@charset "UTF-8"; /* ============================================================================ ■ cv-kv ============================================================================ */ /* ---------------------------------------------------------------------------- ● PC ---------------------------------------------------------------------------- */ @media screen and (min-width: 751px), print { .cv-index .cv-kv { position: relative; width: 100%; height: 60vw; margin: 0; padding: 0; background: #f4f4f4 url(../img/kv_ph.png) no-repeat right center; background-size: contain; max-height: 690px; } .cv-index .cv-pageTtl { position: absolute; top: 35%; left: 0; display: block; width: 41.5441vw; width : -webkit-calc(100% - 800px); width: calc(100% - 850px); min-width: 565px; height: 185px; color: #6accf1; padding: 50px 0 0 90px; background: #fff; box-sizing: border-box; } .cv-index .cv-pageTtl .cv-lanEnTtl { font-size: 16px; line-height: 1; font-weight: 700; } .cv-index .cv-pageTtl .cv-lanEnTtl span::before { width: 35px; content: ""; position: absolute; top: 50%; left: 0; border-top: #6accf1 1px solid; } .cv-index .cv-pageTtl .cv-lanEnTtl span::after { width: 35px; content: ""; position: absolute; top: 50%; right: 0; border-top: #6accf1 1px solid; } .cv-index .cv-pageTtl .cv-lanEnTtl span { position: relative; display: inline-block; padding: 0 55px; } .cv-index .cv-pageTtl .cv-lanJpTtl { font-size: 36px; line-height: 1; margin: 15px 0 0; } .cv-index .cv-pageTtl .cv-lanJpTtl span { padding-bottom: 5px; /* border-bottom: #6accf1 2px dashed; */ background: url(../img/line_dashed.png) repeat-x bottom left; background-size: auto 1px; } } @media screen and (min-width:1360px) { .cv-index .cv-kv { background: #f4f4f4 url(../img/kv_ph.png) no-repeat right center; background-size: 66.5% auto; } } /* ---------------------------------------------------------------------------- ● SP ---------------------------------------------------------------------------- */ @media screen and (max-width: 750px){ .cv-index .cv-kv { position: relative; width: 100%; height: 420px; background: #f4f4f4 url(../img/kv_ph_sp.png) no-repeat right center; background-size: contain; } .cv-index .cv-pageTtl { position: absolute; top: 160px; top: -webkit-calc(50% - 12.3333vw); top : calc(50% - 12.3333vw); left: 0; display: table; width: 76vw; height: 24.6666vw; color: #6accf1; padding-left: 6.6666vw; background: #fff; box-sizing: border-box; } .cv-index .cv-pageTtlInner { display: table-cell; width: inherit; height: inherit; vertical-align: middle; } .cv-index .cv-pageTtl .cv-lanEnTtl { font-size: 11px; font-weight: 700; line-height: 1; } .cv-index .cv-pageTtl .cv-lanEnTtl span::before { width: 20px; content: ""; position: absolute; top: 50%; left: 0; border-top: #6accf1 1px solid; } .cv-index .cv-pageTtl .cv-lanEnTtl span::after { width: 20px; content: ""; position: absolute; top: 50%; right: 0; border-top: #6accf1 1px solid; } .cv-index .cv-pageTtl .cv-lanEnTtl span { position: relative; display: inline-block; padding: 0 30px; } .cv-index .cv-pageTtl .cv-lanJpTtl { font-size: 6vw; line-height: 1; letter-spacing: -0.05em; margin: 10px 0; } .cv-index .cv-pageTtl .cv-lanJpTtl span { padding-bottom: 2px; /* border-bottom: #6accf1 2px dashed; */ background: url(../img/line_dashed.png) repeat-x bottom left; background-size: auto 1px; } } /* ============================================================================ ■ cv-contentsArea ============================================================================ */ /* ---------------------------------------------------------------------------- ● PC ---------------------------------------------------------------------------- */ @media screen and (min-width:641px) , print { .cv-index .cv-contentsArea { margin-top: 100px; } .cv-index .cv-leadTxt { font-size: 24px; font-weight: 700; text-align: center; margin-bottom: 60px; } } @media screen and (min-width:900px) , print { .cv-list { display: flex; width: 100%; padding: 40px 55px; margin-top: 30px; background: #f4f4f4; box-sizing: border-box; justify-content: space-between; } .cv-list .cv-phArea { /* display: table-cell; */ width: calc(57% - 50px); /* vertical-align: middle; */ font-size: 0; } .cv-list .cv-phArea ul{display:flex;} .cv-list .cv-ph { /* display: block; */ /* position: relative; */ max-width: 240px; max-height: 224px; /* float: left; */ width: 100%; margin-right: 20px; } .cv-list .cv-ph:nth-child(even) { /* float: right; */ margin-right: 0; } .cv-list .cv-ph img { /* position: absolute; */ /* top: 0; */ /* left: 0; */ width: 100%; height: auto; } .cv-list .cv-txtArea { position: relative; /* display: table-cell; */ /* vertical-align: middle; */ padding-left: 50px; width: 43%; } .cv-list .cv-ttl { font-size: 2vw; font-weight: 700; line-height: 1.4; margin: 0 0 30px; } .cv-list .cv-customer { display: table; width: 100%; } .cv-list .cv-customerPh { display: table-cell; width: 120px; vertical-align: top; } .cv-list .cv-customerPh span { display: block; position: relative; width: inherit; height: 120px; border-radius: 60px; overflow: hidden; } .cv-list .cv-customerPh img { position: absolute; top: 0; left: 0; width: 100%; height: auto; } .cv-list .cv-customerInner { display: table-cell; vertical-align: middle; padding-left: 20px; padding-bottom: 40px; } .cv-list .cv-customerInfo { font-size: 14px; } .cv-list .cv-customerPosition { display: block; font-size: 12px; line-height: 1.6; margin-bottom: 2px; } .cv-list .cv-customerName { font-size: 16px; font-weight: 700; margin-right: 5px; } .cv-list .cv-btnMore { position: absolute; bottom: -15px; right: 0; width: 190px; height: 40px; margin-top: 15px; } .cv-list .cv-btnMore a { font-size: 14px; line-height: 40px; text-align: center; background: #6accf1 url(../img/icon_arrow_white_right.png) no-repeat 20px center; background-size: auto 12px; } .cv-list01 .cv-customerName { margin-right: 0; } } @media screen and (min-width:1083px){ .cv-list .cv-ttl { font-size: 22px; } } /* ---------------------------------------------------------------------------- ● SP ---------------------------------------------------------------------------- */ @media screen and (max-width:899px){ .cv-list { width: 100%; padding: 25px 6.6666vw; margin-top: 20px; background: #f4f4f4; box-sizing: border-box; } .cv-list .cv-phArea { width: 100%; overflow: hidden; } .cv-list .cv-ph { position: relative; width: 38vw; height: 35.6vw; float: left; } .cv-list .cv-ph:nth-child(even) { float: right; } .cv-list .cv-ph img { position: absolute; top: 0; left: 0; width: 100%; height: auto; } .cv-list .cv-txtArea { width: 100%; } .cv-list .cv-ttl { font-size: 3.2vw; font-weight: 700; line-height: 1.4; text-align: center; margin: 20px 0 10px; } .cv-list .cv-customer { display: table; width: 100%; } .cv-list .cv-customerPh { display: table-cell; width: 72px; vertical-align: top; } .cv-list .cv-customerPh span { display: block; position: relative; width: inherit; height: 72px; border-radius: 36px; overflow: hidden; } .cv-list .cv-customerPh img { position: absolute; top: 0; left: 0; width: 100%; height: auto; } .cv-list .cv-customerInner { display: table-cell; vertical-align: middle; padding-left: 15px; } .cv-list .cv-customerInfo { font-size: 12px; letter-spacing: -0.05em; } .cv-list .cv-customerPosition { display: block; line-height: 1.6; } .cv-list .cv-customerName { font-size: 14px; font-weight: 700; margin-right: 5px; } .cv-list .cv-btnMore { display: block; width: 100%; height: 45px; margin-top: 15px; max-width: unset; } .cv-list .cv-btnMore a { font-size: 14px; line-height: 45px; text-align: center; background: #6accf1 url(../img/icon_arrow_white_right.png) no-repeat 20px center; background-size: auto 12px; } .cv-list01 .cv-customerName { margin-right: 0; } } @media screen and (max-width: 640px){ .cv-list .cv-ttl { font-size: 4.2666vw; } .cv-index .cv-contentsArea { margin-top: 45px; } .cv-index .cv-leadTxt { font-size: 4.26vw; font-weight: 700; text-align: center; margin-bottom: 40px; } } @media screen and (max-width:320px){ .cv-list01 .cv-customerInfo { font-size: 11px; } .cv-list01 .cv-customerName { font-size: 12px; } }