|
|
| (37 intermediate revisions not shown) |
| Line 9: |
Line 9: |
| | #hokkaidou-contents .member-header { width: 100%; height 40px; margin: 30px 0 20px; } | | #hokkaidou-contents .member-header { width: 100%; height 40px; margin: 30px 0 20px; } |
| | #hokkaidou-contents .member-header h2 { font-size: 24px; line-height: 30px; } | | #hokkaidou-contents .member-header h2 { font-size: 24px; line-height: 30px; } |
| | + | #hokkaidou-contents .member-header2 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: 180px;} | + | #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; |
| - | right: 30%; 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 32: |
Line 35: |
| | } | | } |
| | | | |
| - | .member-header:nth-child(2) { | + | .member-header2 { |
| - | margin-top: 140px; | + | margin-top: 50px; |
| | } | | } |
| | | | |
| - | .member-header:nth-child(3) { | + | .member-header3 { |
| - | margin-top: 140px; | + | margin-top: 50px; |
| | + | position: relative; |
| | + | top:0px; |
| | } | | } |
| | | | |
| Line 50: |
Line 55: |
| | | | |
| | | | |
| - | .show-ymzk{ | + | .show{ |
| | cursor: pointer; | | cursor: pointer; |
| | position: absolute; | | position: absolute; |
| | } | | } |
| | | | |
| - | .overlay-ymzk{ | + | .overlay{ |
| - | opacity:0.7; | + | opacity:1; |
| | background: black; | | background: black; |
| | color: white; | | color: white; |
| - | height: 200px; | + | height: 240px; |
| | position: relative; | | position: relative; |
| - | width:500px; | + | width:400px; |
| | display:none; | | display:none; |
| | top: 6px; | | top: 6px; |
| | + | right:130px; |
| | + | z-index:5; |
| | } | | } |
| | | | |
| - | .overlay-ymzk::before { | + | .overlay::before { |
| | content: ""; | | content: ""; |
| | display: inline-block; | | display: inline-block; |
| Line 72: |
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; |
| | } | | } |
| | | | |
| - | .overlay-content-ymzk{ | + | .overlay-content { |
| | color: white; | | color: white; |
| | 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:500px;
| |
| - | 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:500px;
| |
| - | 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:500px;
| |
| - | 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:500px;
| |
| - | 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:500px;
| |
| - | 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:500px;
| |
| - | 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:500px;
| |
| - | 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:500px;
| |
| - | 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:500px;
| |
| - | 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:500px;
| |
| - | 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:500px;
| |
| - | 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:500px;
| |
| - | 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:500px;
| |
| - | 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:500px;
| |
| - | 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:500px;
| |
| - | 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:500px;
| |
| - | 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;
| |
| - | }
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| - |
| |
| | | | |
| | | | |
"
