@charset "UTF-8"; /* ============================================================================ ■ cv-kv ============================================================================ */ /* ---------------------------------------------------------------------------- ● PC ---------------------------------------------------------------------------- */ @media screen and (min-width:641px) , print { .cv-detail .cv-kv { position: relative; width: 100%; height: 785px; margin: 0; padding: 0; } .cv-detail .cv-kv .cv-kvInner { position: absolute; top: 0; left: 0; width: inherit; height: 590px; } .cv-detail .cv-kv .cv-pageTtl { position: absolute; bottom: 0; left: 0; width: 100%; } .cv-detail .cv-kv .cv-pageTtl .cv-pageTtlInner { max-width: 1152px; color: #fff; text-align: center; margin: 0 auto; padding: 45px 75px 50px; background-color: rgba(106,204,241,0.95); box-sizing: border-box; width: 95%; } .cv-detail .cv-kv .cv-pageTtl .cv-lanEnTtl { font-size: 14px; font-weight: 700; line-height: 1; margin-bottom: 40px; } .cv-detail .cv-kv .cv-pageTtl .cv-lanEnTtl span { position: relative; display: inline-block; padding: 0 55px; } .cv-detail .cv-kv .cv-pageTtl .cv-lanEnTtl span::before { width: 35px; content: ""; position: absolute; top: 50%; left: 0; border-top: #fff 1px solid; } .cv-detail .cv-kv .cv-pageTtl .cv-lanEnTtl span::after { width: 35px; content: ""; position: absolute; top: 50%; right: 0; border-top: #fff 1px solid; } .cv-detail .cv-kv .cv-pageTtl h1.cv-lanJpTtl { font-size: 38px; font-weight: 700; line-height: 1.4; letter-spacing: 0.1em; margin: 0; } } /* ---------------------------------------------------------------------------- ● SP ---------------------------------------------------------------------------- */ @media screen and (max-width:640px){ .cv-detail .cv-kv .cv-kvInner { top: 0; left: 0; width: inherit; height: 240px; } .cv-detail .cv-kv .cv-pageTtl { width: 100%; padding: 0 15px; margin-top: -50px; box-sizing: border-box; } .cv-detail .cv-kv .cv-pageTtl .cv-pageTtlInner { color: #fff; text-align: center; margin: 0 auto; padding: 25px 0; background-color: rgba(106,204,241,0.95); box-sizing: border-box; } .cv-detail .cv-kv .cv-pageTtl .cv-lanEnTtl { font-size: 11px; font-weight: 700; line-height: 1; margin-bottom: 10px; } .cv-detail .cv-kv .cv-pageTtl .cv-lanEnTtl span { position: relative; display: inline-block; padding: 0 30px; } .cv-detail .cv-kv .cv-pageTtl .cv-lanEnTtl span::before { width: 20px; content: ""; position: absolute; top: 50%; left: 0; border-top: #fff 1px solid; } .cv-detail .cv-kv .cv-pageTtl .cv-lanEnTtl span::after { width: 20px; content: ""; position: absolute; top: 50%; right: 0; border-top: #fff 1px solid; } .cv-detail .cv-kv .cv-pageTtl h1.cv-lanJpTtl { font-size: 5.3333vw; font-weight: 700; line-height: 1.4; letter-spacing: -0.01em; margin: 0; } } /* ============================================================================ ■ cv-contentsArea ============================================================================ */ /* ---------------------------------------------------------------------------- ● PC ---------------------------------------------------------------------------- */ @media screen and (min-width:641px) , print { .cv-detail .cv-contentsArea { margin-top: 90px; } .cv-detail p.cv-txt { line-height: 2; letter-spacing: 0; } /* cont ---------------------------------------------------------------------------- */ .cv-headCont { padding-bottom: 30px; } .cv-cont { margin-top: 120px; } .cv-pCont { margin-top: 80px; } /* ttl ---------------------------------------------------------------------------- */ p.cv-detailTtl00 { font-weight: 700; text-align: center; margin-bottom: 40px; } .cv-detailTtl00 .cv-item { font-size: 24px; } .cv-detailTtl01 { max-width: 900px; font-size: 38px; line-height: 1.8; color: #6accf1; margin: 0 auto; width: 100%; padding: 0 10px; box-sizing: border-box; } .cv-detailTtl01 span { padding-bottom: 8px; /* border-bottom: #6accf1 2px dashed; */ background: url(../img/line_dashed.png) repeat-x bottom left; background-size: auto 1px; } p.cv-detailTtl02 { font-size: 24px; line-height: 1.4; font-weight: 700; margin-bottom: 40px; } .cv-detailTtl02 span { position: relative; display: block; padding-left: 50px; } .cv-detailTtl02 span::before { width: 30px; content: ""; position: absolute; top: 15px; left: 0; border-top: #000 2px solid; } /* member ---------------------------------------------------------------------------- */ .cv-member { width: 100%; font-size: 0; text-align: center; margin-top: 20px; } .cv-member .cv-memberPiece { display: inline-block; width: 195px; vertical-align: top; margin: 40px 16px 0; } .cv-member .cv-memberPiece:nth-child(4n+1) { margin-left: 0; } .cv-member .cv-memberPiece:nth-child(4n) { margin-right: 0; } .cv-member .cv-memberPh { position: relative; width: 160px; height: 160px; margin: 0 auto 15px; border-radius: 80px; overflow: hidden; } .cv-member .cv-memberPh img { position: absolute; top: 0; left: 0; width: 100%; height: auto; } .cv-member .cv-memberInfo { font-size: 14px; letter-spacing: 0; line-height: 1.6; text-align: center; } .cv-member .cv-memberInfo .cv-memberName { font-weight: 700; margin-right: 5px; } /* ph ---------------------------------------------------------------------------- */ .cv-phMax { width: 94%; width : -webkit-calc(100% - 90px) ; width : calc(100% - 90px) ; margin: 80px auto 0; } .cv-ph1052 { max-width: 1052px; margin: 80px auto 0; overflow: hidden; width: 100%; } .cv-ph900 { max-width: 900px; margin: 80px auto 0; overflow: hidden; width: 100%; } .cv-ph img { width: 100%; height: auto; } .cv-2column li { width: 49%; float: left; } .cv-2column li:nth-child(even){ float: right; } } /* ---------------------------------------------------------------------------- ● SP ---------------------------------------------------------------------------- */ @media screen and (max-width:640px){ .cv-detail .cv-contentsArea { margin-top: 45px; } .cv-detail p.cv-txt { line-height: 2; letter-spacing: 0; } /* cont ---------------------------------------------------------------------------- */ .cv-cont { margin-top: 60px; } .cv-pCont { margin-top: 40px; } /* ttl ---------------------------------------------------------------------------- */ p.cv-detailTtl00 { font-weight: 700; text-align: center; margin-bottom: 30px; } .cv-detailTtl00 .cv-item { font-size: 18px; } .cv-detailTtl01 { font-size: 6.4vw; letter-spacing: -0.03em; line-height: 1.8; color: #6accf1; margin: 0 auto; padding: 0 15px; } .cv-detailTtl01 span { padding-bottom: 4px; /* border-bottom: #6accf1 2px dashed; */ background: url(../img/line_dashed.png) repeat-x bottom left; background-size: auto 1px; } p.cv-detailTtl02 { font-size: 18px; line-height: 1.4; font-weight: 700; margin-bottom: 20px; } .cv-detailTtl02 span { position: relative; display: block; width: 100%; padding-left: 30px; box-sizing: border-box; } .cv-detailTtl02 span::before { width: 20px; content: ""; position: absolute; top: 11px; left: 0; border-top: #000 2px solid; } /* member ---------------------------------------------------------------------------- */ .cv-member { width: 100%; font-size: 0; text-align: center; overflow: hidden; } .cv-member .cv-memberPiece { display: inline-block; width: 44vw; vertical-align: top; margin-top: 25px; float: right; } .cv-member .cv-memberPiece:nth-child(odd) { float: left; clear: both; } .cv-member .cv-memberPh { position: relative; width: 36vw; height: 36vw; margin: 0 auto 10px; border-radius: 18vw; overflow: hidden; } .cv-member .cv-memberPh img { position: absolute; top: 0; left: 0; width: 100%; height: auto; } .cv-member .cv-memberInfo { font-size: 12px; letter-spacing: 0; line-height: 1.6; text-align: center; } .cv-member .cv-memberInfo .cv-memberName { font-weight: 700; margin-right: 5px; } /* ph ---------------------------------------------------------------------------- */ .cv-phMax { width: 100%; margin-top: 40px; } .cv-ph1052, .cv-ph900 { width: 100%; padding: 0 15px; margin-top: 40px; box-sizing: border-box; } .cv-ph img { width: 100%; height: auto; } .cv-ph li { width: 100%; } .cv-ph li:nth-child(even){ margin-top: 20px; } } /* ============================================================================ ■ pageNav ============================================================================ */ /* ---------------------------------------------------------------------------- ● PC ---------------------------------------------------------------------------- */ @media screen and (min-width:1025px) , print { .cv-pageNav { position: relative; max-width: 1052px; height: 110px; margin: 150px auto 0; width: 100%; } .cv-pageNavPrev { position: absolute; top: 0; left: 0; width: 320px; padding-left: 40px; background: url(../img/icon_arrow_left.png) no-repeat left center; background-size: auto 28px; box-sizing: border-box; } .cv-pageNavNext { position: absolute; top: 0; right: 0; width: 320px; padding-right: 40px; background: url(../img/icon_arrow_right.png) no-repeat right center; background-size: auto 28px; box-sizing: border-box; } .cv-pageNavList { display: table; width: 280px; overflow: hidden; } .cv-pageNavList .cv-pageNavPh { display: table-cell; vertical-align: middle; width: 110px; } .cv-pageNavList .cv-pageNavPh span { position: relative; display: block; width: 110px; height: 110px; border-radius: 55px; overflow: hidden; } .cv-pageNavList .cv-pageNavPh img { position: absolute; top: 0; left: 0; width: 100%; height: auto; } .cv-pageNavList .cv-pageNavInfo { display: table-cell; font-size: 12px; letter-spacing: 0; vertical-align: middle; padding-left: 15px; } .cv-pageNavList .cv-pageNavName { font-weight: 700; margin-right: 5px; } .cv-pageNav01 { width: 360px; } .cv-pageNav01 .cv-pageNavList { width: 310px; } .cv-pageNav01 .cv-pageNavName { margin-right: 0; } ul.cv-returnBtnArea { padding-top: 25px; } .cv-returnBtn a { background: #6accf1 url(../img/icon_arrow_white_left.png) no-repeat 30px center; background-size: 10px auto; } } /* ---------------------------------------------------------------------------- ● SP ---------------------------------------------------------------------------- */ @media screen and (max-width:1024px){ .cv-pageNav { width: 100%; margin: 80px auto 0; padding: 0 15px; box-sizing: border-box; } .cv-pageNavPrev { display: block; width: 100%; padding-left: 30px; background: url(../img/icon_arrow_left.png) no-repeat left center; background-size: auto 28px; box-sizing: border-box; float: left; } .cv-pageNavNext { display: block; width: 100%; margin-top: 10px; padding-right: 30px; background: url(../img/icon_arrow_right.png) no-repeat right center; background-size: auto 28px; box-sizing: border-box; float: right; } .cv-pageNavList { display: table; width: 100%; overflow: hidden; } .cv-pageNavList .cv-pageNavPh { display: table-cell; vertical-align: middle; width: 72px; } .cv-pageNavList .cv-pageNavPh span { position: relative; display: block; width: 72px; height: 72px; border-radius: 36px; overflow: hidden; } .cv-pageNavList .cv-pageNavPh img { position: absolute; top: 0; left: 0; width: 100%; height: auto; } .cv-pageNavList .cv-pageNavInfo { display: table-cell; font-size: 11px; letter-spacing: 0; vertical-align: middle; padding-left: 15px; } .cv-pageNavList .cv-pageNavName { font-weight: 700; margin-right: 5px; } .cv-pageNavNext .cv-pageNavInfo { text-align: right; padding-right: 15px; } .cv-pageNav01 .cv-pageNavName { margin-right: 0; } ul.cv-returnBtnArea { padding-top: 20px; clear: both; } .cv-returnBtn a { background: #6accf1 url(../img/icon_arrow_white_left.png) no-repeat 30px center; background-size: 10px auto; } }