|
|
(26 intermediate revisions not shown) |
Line 12: |
Line 12: |
| #hokkaidou-contents .member-header3 h2 { font-size: 24px; line-height: 30px; } | | #hokkaidou-contents .member-header3 h2 { font-size: 24px; line-height: 30px; } |
| #hokkaidou-contents .member-list ul { list-style: none; margin: 0; } | | #hokkaidou-contents .member-list ul { list-style: none; margin: 0; } |
- | #hokkaidou-contents .member-list ul li { float: left; width: 400px; height: 200px; margin: 20px 20px 20px 20px; position: relative; } | + | #hokkaidou-contents .member-list ul li { float: left; width: 130px; height: 130px; margin: 10px 7px 60px 7px; position: relative; top:0px;} |
- | #hokkaidou-contents .member-list ul li img { width: 150px; height: 150px; position: relative; left: 130px;} | + | #hokkaidou-contents .member-list ul li img { width: 130px; height: 130px; position: relative;} |
| #hokkaidou-contents .member-list ul li h3 { font-size: 24px; line-height: 30px; position: relative; top: 20px; margin: 0; top: 12px; color: white; text-align: center;} | | #hokkaidou-contents .member-list ul li h3 { font-size: 24px; line-height: 30px; position: relative; top: 20px; margin: 0; top: 12px; color: white; text-align: center;} |
- | #hokkaidou-contents .member-list ul li p { font-size: 16px; line-height: 25px; position: relative; margin: 0 auto; width: 80%; overflow: auto; text-align: center; | + | #hokkaidou-contents .member-list ul li p { font-size: 16px; line-height: 25px; position: relative; margin: 0 auto; width: 80%; overflow: auto; text-align: left; |
| top: 15px;} | | top: 15px;} |
| #hokkaidou-contents .member-list ul li p:first-letter { margin: 0;} | | #hokkaidou-contents .member-list ul li p:first-letter { margin: 0;} |
| + | |
| | | |
| #sponsor-list { list-style: none; position: relative; height: 200px; margin: 0;} | | #sponsor-list { list-style: none; position: relative; height: 200px; margin: 0;} |
| #sponsor-list li { position: absolute; } | | #sponsor-list li { position: absolute; } |
| #sponsor-list li:nth-child(1) { top: 20px; left: 40px; } | | #sponsor-list li:nth-child(1) { top: 20px; left: 40px; } |
- | #sponsor-list li:nth-child(2) { top: 20px; left: 400px; } | + | #sponsor-list li:nth-child(2) { top: 20px; left: 300px; } |
- | #sponsor-list li:nth-child(3) { top: 20px; left: 700px; } | + | #sponsor-list li:nth-child(3) { top: 20px; left: 520px; } |
- | #sponsor-list li:nth-child(4) { top: 120px; right: 10px; } | + | #sponsor-list li:nth-child(4) { top: 120px; right: 200px; } |
- | #sponsor-list li:nth-child(5) { top: 120px; left: 80px; } | + | #sponsor-list li:nth-child(5) { top: 120px; left: 70px; } |
- | #sponsor-list li:nth-child(6) { top: 120px; left: 400px; } | + | #sponsor-list li:nth-child(6) { top: 120px; left: 305px; } |
| #sponsor-list li:nth-child(7) { top: 120px; left: 560px; } | | #sponsor-list li:nth-child(7) { top: 120px; left: 560px; } |
| #sponsor-list li:nth-child(8) { top: 120px; right: 40px; } | | #sponsor-list li:nth-child(8) { top: 120px; right: 40px; } |
Line 35: |
Line 36: |
| | | |
| .member-header2 { | | .member-header2 { |
- | margin-top: 140px; | + | margin-top: 50px; |
| } | | } |
| | | |
| .member-header3 { | | .member-header3 { |
- | margin-top: 140px; | + | margin-top: 50px; |
| + | position: relative; |
| + | top:0px; |
| } | | } |
| | | |
Line 58: |
Line 61: |
| | | |
| .overlay{ | | .overlay{ |
- | opacity:0.7; | + | opacity:1; |
| background: black; | | background: black; |
| color: white; | | color: white; |
- | height: 200px; | + | height: 240px; |
| position: relative; | | position: relative; |
| width:400px; | | width:400px; |
| display:none; | | display:none; |
| top: 6px; | | top: 6px; |
| + | right:130px; |
| + | z-index:5; |
| } | | } |
| | | |
Line 74: |
Line 79: |
| border-bottom-color: #000; | | border-bottom-color: #000; |
| position: relative; | | position: relative; |
- | left: 50%; | + | left: 45%; |
| top: -6px; | | top: -6px; |
| margin-top: -8px; | | margin-top: -8px; |
| + | z-index:5; |
| } | | } |
| | | |
Line 83: |
Line 89: |
| position: relative; | | position: relative; |
| margin: 40px auto; | | margin: 40px auto; |
- | width:80%; text-align:center; top:-20px; | + | width:100%; |
| + | text-align:center; |
| + | top:-40px; |
| } | | } |
- |
| |
- | .show-sone{
| |
- | cursor: pointer;
| |
- | position: relative;
| |
- | }
| |
- |
| |
- | .overlay-sone{
| |
- | opacity:0.7;
| |
- | background: black;
| |
- | color: white;
| |
- | height: 200px;
| |
- | position: relative;
| |
- | width:400px;
| |
- | display:none;
| |
- | top:6px;
| |
- | }
| |
- |
| |
- | .overlay-sone::before {
| |
- | content: "";
| |
- | display: inline-block;
| |
- | border: 8px solid transparent;
| |
- | border-bottom-color: #000;
| |
- | position: relative;
| |
- | left: 50%;
| |
- | top: -6px;
| |
- | margin-top: -8px;
| |
- | }
| |
- |
| |
- | .overlay-content-sone{
| |
- | color: white;
| |
- | position: relative;
| |
- | margin: 40px auto;
| |
- | width80%; text-align:center; top: -20px;
| |
- | }
| |
- |
| |
- | .show-hana{
| |
- | cursor: pointer;
| |
- | position: relative;
| |
- | }
| |
- |
| |
- | .overlay-hana{
| |
- | opacity:0.7;
| |
- | background: black;
| |
- | color: white;
| |
- | height: 200px;
| |
- | position: relative;
| |
- | width:400px;
| |
- | display:none;
| |
- | }
| |
- |
| |
- | .overlay-hana::before {
| |
- | content: "";
| |
- | display: inline-block;
| |
- | border: 8px solid transparent;
| |
- | border-bottom-color: #000;
| |
- | position: relative;
| |
- | left: 50%;
| |
- | top: -6px;
| |
- | margin-top: -8px;
| |
- | }
| |
- |
| |
- | .overlay-content-hana{
| |
- | color: white;
| |
- | position: relative;
| |
- | margin: 40px auto;
| |
- | width80%; text-align:center; top: -20px;
| |
- | }
| |
- |
| |
- | .show-ryotaro{
| |
- | cursor: pointer;
| |
- | position: relative;
| |
- | }
| |
- |
| |
- | .overlay-ryotaro{
| |
- | opacity:0.7;
| |
- | background: black;
| |
- | color: white;
| |
- | height: 200px;
| |
- | position: relative;
| |
- | width:400px;
| |
- | display:none;
| |
- | }
| |
- |
| |
- | .overlay-ryotaro::before {
| |
- | content: "";
| |
- | display: inline-block;
| |
- | border: 8px solid transparent;
| |
- | border-bottom-color: #000;
| |
- | position: relative;
| |
- | left: 50%;
| |
- | top: -6px;
| |
- | margin-top: -8px;
| |
- | }
| |
- |
| |
- | .overlay-content-ryotaro{
| |
- | color: white;
| |
- |
| |
- | position: relative;
| |
- | margin: 40px auto;
| |
- | width80%; text-align:center; top: -20px;
| |
- | }
| |
- |
| |
- | .show-ayano{
| |
- | cursor: pointer;
| |
- | position: relative;
| |
- | }
| |
- |
| |
- | .overlay-ayano{
| |
- | opacity:0.7;
| |
- | background: black;
| |
- | color: white;
| |
- | height: 200px;
| |
- | position: relative;
| |
- | width:400px;
| |
- | display:none;
| |
- | }
| |
- |
| |
- | .overlay-ayano::before {
| |
- | content: "";
| |
- | display: inline-block;
| |
- | border: 8px solid transparent;
| |
- | border-bottom-color: #000;
| |
- | position: relative;
| |
- | left: 50%;
| |
- | top: -6px;
| |
- | margin-top: -8px;
| |
- | }
| |
- |
| |
- | .overlay-content-ayano{
| |
- | color: white;
| |
- |
| |
- | position: relative;
| |
- | margin: 40px auto;
| |
- | width80%; text-align:center; top: -20px;
| |
- | }
| |
- |
| |
- | .show-naoya{
| |
- | cursor: pointer;
| |
- | position: relative;
| |
- | }
| |
- |
| |
- | .overlay-naoya{
| |
- | opacity:0.7;
| |
- | background: black;
| |
- | color: white;
| |
- | height: 200px;
| |
- | position: relative;
| |
- | width:400px;
| |
- | display:none;
| |
- | }
| |
- |
| |
- | .overlay-naoya::before {
| |
- | content: "";
| |
- | display: inline-block;
| |
- | border: 8px solid transparent;
| |
- | border-bottom-color: #000;
| |
- | position: relative;
| |
- | left: 50%;
| |
- | top: -6px;
| |
- | margin-top: -8px;
| |
- | }
| |
- |
| |
- | .overlay-content-naoya{
| |
- | color: white;
| |
- |
| |
- | position: relative;
| |
- | margin: 40px auto;
| |
- | width80%; text-align:center; top: -20px;
| |
- | }
| |
- |
| |
- | .show-osamu{
| |
- | cursor: pointer;
| |
- | position: relative;
| |
- | }
| |
- |
| |
- | .overlay-osamu{
| |
- | opacity:0.7;
| |
- | background: black;
| |
- | color: white;
| |
- | height: 200px;
| |
- | position: relative;
| |
- | width:400px;
| |
- | display:none;
| |
- | }
| |
- |
| |
- | .overlay-osamu::before {
| |
- | content: "";
| |
- | display: inline-block;
| |
- | border: 8px solid transparent;
| |
- | border-bottom-color: #000;
| |
- | position: relative;
| |
- | left: 50%;
| |
- | top: -6px;
| |
- | margin-top: -8px;
| |
- | }
| |
- |
| |
- | .overlay-content-osamu{
| |
- | color: white;
| |
- |
| |
- | position: relative;
| |
- | margin: 40px auto;
| |
- | width80%; text-align:center; top: -20px;
| |
- | }
| |
- |
| |
- | .show-eri{
| |
- | cursor: pointer;
| |
- | position: relative;
| |
- | }
| |
- |
| |
- | .overlay-eri{
| |
- | opacity:0.7;
| |
- | background: black;
| |
- | color: white;
| |
- | height: 200px;
| |
- | position: relative;
| |
- | width:400px;
| |
- | display:none;
| |
- | }
| |
- |
| |
- | .overlay-eri::before {
| |
- | content: "";
| |
- | display: inline-block;
| |
- | border: 8px solid transparent;
| |
- | border-bottom-color: #000;
| |
- | position: relative;
| |
- | left: 50%;
| |
- | top: -6px;
| |
- | margin-top: -8px;
| |
- | }
| |
- |
| |
- | .overlay-content-eri{
| |
- | color: white;
| |
- |
| |
- | position: relative;
| |
- | margin: 40px auto;
| |
- | width80%; text-align:center; top: -20px;
| |
- | }
| |
- |
| |
- | .show-tori{
| |
- | cursor: pointer;
| |
- | position: relative;
| |
- | }
| |
- |
| |
- | .overlay-tori{
| |
- | opacity:0.7;
| |
- | background: black;
| |
- | color: white;
| |
- | height: 200px;
| |
- | position: relative;
| |
- | width:400px;
| |
- | display:none;
| |
- | }
| |
- |
| |
- | .overlay-tori::before {
| |
- | content: "";
| |
- | display: inline-block;
| |
- | border: 8px solid transparent;
| |
- | border-bottom-color: #000;
| |
- | position: relative;
| |
- | left: 50%;
| |
- | top: -6px;
| |
- | margin-top: -8px;
| |
- | }
| |
- |
| |
- | .overlay-content-tori{
| |
- | color: white;
| |
- |
| |
- | position: relative;
| |
- | margin: 40px auto;
| |
- | width80%; text-align:center; top: -20px;
| |
- | }
| |
- |
| |
- | .show-mami{
| |
- | cursor: pointer;
| |
- | position: relative;
| |
- | }
| |
- |
| |
- | .overlay-mami{
| |
- | opacity:0.7;
| |
- | background: black;
| |
- | color: white;
| |
- | height: 200px;
| |
- | position: relative;
| |
- | width:400px;
| |
- | display:none;
| |
- | }
| |
- |
| |
- | .overlay-mami::before {
| |
- | content: "";
| |
- | display: inline-block;
| |
- | border: 8px solid transparent;
| |
- | border-bottom-color: #000;
| |
- | position: relative;
| |
- | left: 50%;
| |
- | top: -6px;
| |
- | margin-top: -8px;
| |
- | }
| |
- |
| |
- | .overlay-content-mami{
| |
- | color: white;
| |
- |
| |
- | position: relative;
| |
- | margin: 40px auto;
| |
- | width80%; text-align:center; top: -20px;
| |
- | }
| |
- |
| |
- | .show-tamaro{
| |
- | cursor: pointer;
| |
- | position: relative;
| |
- | }
| |
- |
| |
- | .overlay-tamaro{
| |
- | opacity:0.7;
| |
- | background: black;
| |
- | color: white;
| |
- | height: 200px;
| |
- | position: relative;
| |
- | width:400px;
| |
- | display:none;
| |
- | }
| |
- |
| |
- | .overlay-tamaro::before {
| |
- | content: "";
| |
- | display: inline-block;
| |
- | border: 8px solid transparent;
| |
- | border-bottom-color: #000;
| |
- | position: relative;
| |
- | left: 50%;
| |
- | top: -6px;
| |
- | margin-top: -8px;
| |
- | }
| |
- |
| |
- | .overlay-content-tamaro{
| |
- | color: white;
| |
- |
| |
- | position: relative;
| |
- | margin: 40px auto;
| |
- | width80%; text-align:center; top: -20px;
| |
- | }
| |
- |
| |
- | .show-sanbon{
| |
- | cursor: pointer;
| |
- | position: relative;
| |
- | }
| |
- |
| |
- | .overlay-sanbon{
| |
- | opacity:0.7;
| |
- | background: black;
| |
- | color: white;
| |
- | height: 200px;
| |
- | position: relative;
| |
- | width:400px;
| |
- | display:none;
| |
- | }
| |
- |
| |
- | .overlay-sanbon::before {
| |
- | content: "";
| |
- | display: inline-block;
| |
- | border: 8px solid transparent;
| |
- | border-bottom-color: #000;
| |
- | position: relative;
| |
- | left: 50%;
| |
- | top: -6px;
| |
- | margin-top: -8px;
| |
- | }
| |
- |
| |
- | .overlay-content-sanbon{
| |
- | color: white;
| |
- |
| |
- | position: relative;
| |
- | margin: 40px auto;
| |
- | width80%; text-align:center; top: -20px;
| |
- | }
| |
- |
| |
- | .show-liu{
| |
- | cursor: pointer;
| |
- | position: relative;
| |
- | }
| |
- |
| |
- | .overlay-liu{
| |
- | opacity:0.7;
| |
- | background: black;
| |
- | color: white;
| |
- | height: 200px;
| |
- | position: relative;
| |
- | width:400px;
| |
- | display:none;
| |
- | }
| |
- |
| |
- | .overlay-liu::before {
| |
- | content: "";
| |
- | display: inline-block;
| |
- | border: 8px solid transparent;
| |
- | border-bottom-color: #000;
| |
- | position: relative;
| |
- | left: 50%;
| |
- | top: -6px;
| |
- | margin-top: -8px;
| |
- | }
| |
- |
| |
- | .overlay-content-liu{
| |
- | color: white;
| |
- |
| |
- | position: relative;
| |
- | margin: 40px auto;
| |
- | width80%; text-align:center; top: -20px;
| |
- | }
| |
- |
| |
- | .show-shehata{
| |
- | cursor: pointer;
| |
- | position: relative;
| |
- | }
| |
- |
| |
- | .overlay-shehata{
| |
- | opacity:0.7;
| |
- | background: black;
| |
- | color: white;
| |
- | height: 200px;
| |
- | position: relative;
| |
- | width:400px;
| |
- | display:none;
| |
- | }
| |
- |
| |
- | .overlay-shehata::before {
| |
- | content: "";
| |
- | display: inline-block;
| |
- | border: 8px solid transparent;
| |
- | border-bottom-color: #000;
| |
- | position: relative;
| |
- | left: 50%;
| |
- | top: -6px;
| |
- | margin-top: -8px;
| |
- | }
| |
- |
| |
- | .overlay-content-shehata{
| |
- | color: white;
| |
- | position: relative;
| |
- | margin: 40px auto;
| |
- | width80%; text-align:center; top: -20px;
| |
- | }
| |
- |
| |
- | .show-kensuke{
| |
- | cursor: pointer;
| |
- | position: relative;
| |
- | }
| |
- |
| |
- | .overlay-kensuke{
| |
- | opacity:0.7;
| |
- | background: black;
| |
- | color: white;
| |
- | height: 200px;
| |
- | position: relative;
| |
- | width:400px;
| |
- | display:none;
| |
- | }
| |
- |
| |
- | .overlay-kensuke::before {
| |
- | content: "";
| |
- | display: inline-block;
| |
- | border: 8px solid transparent;
| |
- | border-bottom-color: #000;
| |
- | position: relative;
| |
- | left: 50%;
| |
- | top: -6px;
| |
- | margin-top: -8px;
| |
- | }
| |
- |
| |
- | .overlay-content-kensuke{
| |
- | color: white;
| |
- |
| |
- | position: relative;
| |
- | margin: 40px auto;
| |
- | width80%; text-align:center; top: -20px;
| |
- | }
| |
- |
| |
- | .show-itoh{
| |
- | cursor: pointer;
| |
- | position: relative;
| |
- | }
| |
- |
| |
- | .overlay-itoh{
| |
- | opacity:0.7;
| |
- | background: black;
| |
- | color: white;
| |
- | height: 200px;
| |
- | position: relative;
| |
- | width:400px;
| |
- | display:none;
| |
- | }
| |
- |
| |
- | .overlay-itoh::before {
| |
- | content: "";
| |
- | display: inline-block;
| |
- | border: 8px solid transparent;
| |
- | border-bottom-color: #000;
| |
- | position: relative;
| |
- | left: 50%;
| |
- | top: -6px;
| |
- | margin-top: -8px;
| |
- | }
| |
- |
| |
- | .overlay-content-itoh{
| |
- | color: white;
| |
- |
| |
- | position: relative;
| |
- | margin: 40px auto;
| |
- | width80%; text-align:center; top: -20px;
| |
- | }
| |
- |
| |
- | .show-kawahata{
| |
- | cursor: pointer;
| |
- | position: relative;
| |
- | }
| |
- |
| |
- | .overlay-kawahata{
| |
- | opacity:0.7;
| |
- | background: black;
| |
- | color: white;
| |
- | height: 200px;
| |
- | position: relative;
| |
- | width:400px;
| |
- | display:none;
| |
- | }
| |
- |
| |
- | .overlay-kawahata::before {
| |
- | content: "";
| |
- | display: inline-block;
| |
- | border: 8px solid transparent;
| |
- | border-bottom-color: #000;
| |
- | position: relative;
| |
- | left: 50%;
| |
- | top: -6px;
| |
- | margin-top: -8px;
| |
- | }
| |
- |
| |
- | .overlay-content-kawahata{
| |
- | color: white;
| |
- |
| |
- | position: relative;
| |
- | margin: 40px auto;
| |
- | width80%; text-align:center; top: -20px;
| |
- | }
| |
- |
| |
- |
| |
- |
| |
- |
| |
- |
| |
- |
| |
- |
| |
- |
| |
- |
| |
| | | |
| | | |