@charset "UTF-8"; /* ============================================================================ ■ common ============================================================================ */ .spe-wrap { font-weight: 400; font-family: 'Noto Sans', sans-serif; word-break:normal; overflow-wrap: break-word; } .spe-wrap p { margin: 0; padding: 0; } .spe-wrap ul { list-style: none; margin: 0; padding: 0; } .spe-wrap dl, .spe-wrap dt, .spe-wrap dd { margin: 0; padding: 0; } a.spe-txtLink { text-decoration: underline; cursor: pointer; } a.spe-txtLink:hover { opacity: 1; text-decoration: none; } /* ---------------------------------------------------------------------------- ● PC ---------------------------------------------------------------------------- */ @media screen and (min-width:641px) , print { .spe-wrap { font-size: 16px; letter-spacing: 0.05em; } .spe-brSp { display: none; } .spe-phSp { display: none; } .spe-kome { font-size: 12px; font-weight: 400; } /* contentsArea common ---------------------------------------- */ .spe-contentsArea .spe-content { margin-top : -50px; padding-top : 50px; } .spe-contentsArea .spe-bgGray { width: 100%; background: #f4f4f4; } .spe-contentsArea .spe-contentInner { max-width: 1052px; margin: 0 auto; padding: 75px 10px 80px; } /* spe-contentTtl01 */ .spe-contentsArea .spe-contentTtl01 { text-align: center; margin: 0 0 35px 0; } .spe-contentsArea .spe-contentTtl01 .spe-lanJpTtl { font-size: 32px; line-height: 32px; font-weight: 700; color: #6accf1; margin: 0; } .spe-contentsArea .spe-contentTtl01 .spe-lanEnTtl { font-size: 14px; font-weight: 700; letter-spacing: 0; text-align: center; margin: 10px auto 0; } .spe-contentsArea .spe-contentTtl01 .spe-lanEnTtl span::before { width: 35px; content: ""; position: absolute; top: 50%; left: 0; border-top: #000 1px solid; } .spe-contentsArea .spe-contentTtl01 .spe-lanEnTtl span::after { width: 35px; content: ""; position: absolute; top: 50%; right: 0; border-top: #000 1px solid; } .spe-contentsArea .spe-contentTtl01 .spe-lanEnTtl span { position: relative; display: inline-block; padding: 0 55px; } /* spe-btn */ .spe-btnArea { text-align: center; } .spe-btn { display: inline-block; max-width: 285px; height: 60px; margin: 0 25px; width: 40%; } .spe-btn a { display: block; width: 100%; height: 100%; font-weight: 700; line-height: 60px; color: #fff; background: #6accf1; border-radius: 30px; cursor: pointer; } } /* ---------------------------------------------------------------------------- ● SP ---------------------------------------------------------------------------- */ @media screen and (max-width:320px){ .spe-minHide { display: none; } .spe-hideMin { display: none; } } @media screen and (min-width:321px){ .spe-brMin { display: none; } } @media screen and (max-width:640px){ .spe-wrap { font-size: 14px; letter-spacing: 0.05em; } .spe-brPc { display: none; } .spe-phPc { display: none; } .spe-kome { font-size: 12px; font-weight: 400; } /* contentsArea common ---------------------------------------- */ .spe-contentsArea .spe-bgGray { width: 100%; background: #f4f4f4; } .spe-contentsArea .spe-contentInner { padding: 45px 15px 50px; } /* spe-contentTtl01 */ .spe-contentsArea .spe-contentTtl01 { text-align: center; margin: 0 0 30px 0; } .spe-contentsArea .spe-contentTtl01 .spe-lanJpTtl { font-size: 6.4vw; line-height: 6.4vw; font-weight: 700; color: #6accf1; margin: 0; } .spe-contentsArea .spe-contentTtl01 .spe-lanEnTtl { font-size: 11px; font-weight: 700; letter-spacing: 0; text-align: center; margin: 10px auto 0; } .spe-contentsArea .spe-contentTtl01 .spe-lanEnTtl span::before { width: 20px; content: ""; position: absolute; top: 50%; left: 0; border-top: #000 1px solid; } .spe-contentsArea .spe-contentTtl01 .spe-lanEnTtl span::after { width: 20px; content: ""; position: absolute; top: 50%; right: 0; border-top: #000 1px solid; } .spe-contentsArea .spe-contentTtl01 .spe-lanEnTtl span { position: relative; display: inline-block; padding: 0 30px; } /* spe-btn */ .spe-btnArea { text-align: center; } .spe-btn { display: inline-block; width: 76vw; height: 60px; } .spe-btn a { display: block; width: 100%; height: 100%; font-size: 16px; font-weight: 700; line-height: 60px; color: #fff; background: #6accf1; border-radius: 38vw; } } /* ============================================================================ ■ spe-kv ============================================================================ */ /* ---------------------------------------------------------------------------- ● PC ---------------------------------------------------------------------------- */ @media screen and (min-width:641px) , print { .spe-kv { position: relative; width: 100%; height: 610px; margin: 0; padding: 0; } .spe-kv.spe-kvMain01 { background: url(../img/kv_ph01_pc.jpg) no-repeat center center; background-size: cover; } .spe-kv.spe-kvMain02 { background: url(../img/kv_ph02_pc.jpg) no-repeat center center; background-size: cover; } .spe-kv.spe-kvMain03 { background: url(../img/kv_ph03_pc.jpg) no-repeat center center; background-size: cover; } .spe-kv.spe-kvMain04 { background: url(../img/kv_ph04_pc.jpg) no-repeat center center; background-size: cover; } .spe-kv .spe-pageTtl { display: none; /* position: absolute; text-indent: -9999px; */ } } /* ---------------------------------------------------------------------------- ● SP ---------------------------------------------------------------------------- */ @media screen and (max-width:640px){ .spe-kv { position: relative; width: 100%; height: 112vw; margin: 0; padding: 0; } .spe-kv.spe-kvMain01 { background: url(../img/kv_ph01_sp.jpg) no-repeat center center; background-size: cover; } .spe-kv.spe-kvMain02 { background: url(../img/kv_ph02_sp.jpg) no-repeat center center; background-size: cover; } .spe-kv.spe-kvMain03 { background: url(../img/kv_ph03_sp.jpg) no-repeat center center; background-size: cover; } .spe-kv.spe-kvMain04 { background: url(../img/kv_ph04_sp.jpg) no-repeat center center; background-size: cover; } .spe-kv .spe-pageTtl { display: none; /* position: absolute; text-indent: -9999px; */ } } /* ============================================================================ ■ spe-pageNav ============================================================================ */ /* ---------------------------------------------------------------------------- ● PC ---------------------------------------------------------------------------- */ @media screen and (min-width:641px) , print { .spe-pageNav ul { width: 100%; /*min-width: 1072px;*/ font-size:0; padding: 0; background: #fff; } .spe-pageNav ul li { display: inline-block; width: calc((100% - 6px) / 6); font-size: 15px; font-weight: 700; text-align: center; } .spe-pageNav ul li a { display: block; width: 100%; padding: 30px 0; transition: 0.3s; cursor: pointer; } .spe-pageNav ul li a:hover { color: #6accf1; padding-bottom: 22px; border-bottom: #6accf1 8px solid; opacity: 1; } .spe-pageNav ul li a span { display: block; width: 100%; border-right: #d7d7d7 1px solid; padding: 0 3px; box-sizing: border-box; } .spe-pageNav ul li:last-child a span { border-right: none; } .spe-fixed { position: fixed; top: 0; z-index: 10; border-bottom: #d7d7d7 1px solid; } .spe-pageNav ul.spe-fixed li a { padding: 15px 0; } .spe-pageNav ul.spe-fixed li a:hover { padding-bottom: 9px; border-bottom: #6accf1 6px solid; } .spe-pageNav ul li a.spe-noLink { color: #d7d7d7; cursor: default; } .spe-pageNav ul li a.spe-noLink:hover { padding-bottom: 30px; border-bottom: none } .spe-pageNav ul.spe-fixed li a.spe-noLink:hover { padding-bottom: 15px; } } @media screen and (min-width:1083px){ .spe-pageNav ul li { width: 16.6%; font-size: 16px; } } /* ---------------------------------------------------------------------------- ● SP ---------------------------------------------------------------------------- */ @media screen and (max-width:640px){ .spe-pageNav ul { width: 100%; font-size:0; padding: 0; } .spe-pageNav ul li { display: inline-block; width: 31.5vw; font-size: 3.73vw; font-weight: 700; text-align: center; vertical-align: top; } .spe-pageNav ul li a { display: table-cell; width: inherit; height: 60px; line-height: 1.2; vertical-align: middle; border-right: #d7d7d7 1px solid; border-bottom: #d7d7d7 1px solid; } .spe-pageNav ul li:nth-child(3n) a { border-right: none; } .spe-pageNav ul li:nth-child(4) { letter-spacing: -0.05em; } .spe-pageNav ul li a.spe-noLink { color: #d7d7d7; cursor: default; } } /* ============================================================================ ■ spe-contentFirst ============================================================================ */ /* ---------------------------------------------------------------------------- ● PC ---------------------------------------------------------------------------- */ @media screen and (min-width:641px) , print { .spe-contentFirst .spe-contentTtl01 .spe-lanJpTtl { color: #000; } .spe-contentFirst .spe-firstTxt { font-size: 20px; font-weight: 700; line-height: 2.25; text-align: center; } } /* ---------------------------------------------------------------------------- ● SP ---------------------------------------------------------------------------- */ @media screen and (max-width:640px){ .spe-contentFirst .spe-contentTtl01 .spe-lanJpTtl { color: #000; } .spe-contentFirst .spe-firstTxt { font-size: 4.26vw; font-weight: 700; letter-spacing: -0.05em; text-align: center; letter-spacing: } } @media screen and (max-width:320px){ .spe-contentFirst .spe-firstTxt { font-size: 4vw; } } /* ============================================================================ ■ spe-contentPoint ============================================================================ */ /* ---------------------------------------------------------------------------- ● PC ---------------------------------------------------------------------------- */ @media screen and (min-width: 1083px), print { .spe-contentPoint .spe-lanJpTtl { letter-spacing: 0.08em; padding-left: 0.08em } .spe-pointPiece { position: relative; width: 100%; } .spe-pointPh { width: 550px; height: auto; } .spe-pointPh img { width: 100%; height: auto; } .spe-pointTxtArea { width: 620px; } .spe-pointNumber { display: block; width: 110px; height: 40px; font-size: 19px; font-weight: 700; text-align: center; line-height: 40px; color: #fff; background: #6accf1; } .spe-pointTtl { font-size: 38px; line-height: 1.3; } .spe-pointTxt { text-align: justify; letter-spacing: 0; } /* spe-point01 */ .spe-point01 { height: 400px; margin-top: 0; } .spe-point01 .spe-pointPh { position: absolute; right: -70px; } .spe-point01 .spe-pointTxtArea { position: absolute; top: 50px; left: 0; } /* spe-point02 */ .spe-point02 { height: 520px; margin-top: 60px; } .spe-point02 .spe-pointPh { position: absolute; top: 80px; left: -130px; } .spe-point02 .spe-pointTxtArea { position: absolute; top: 0; right: 0; } .spe-point02 .spe-pointExample { font-size: 0; margin-top: 30px; } .spe-point02 .spe-pointExamplePiece { display: inline-block; width: 170px; text-align: center; vertical-align: top; margin-left: 50px; } .spe-point02 .spe-pointExamplePiece:first-child { margin-left: 0; } .spe-point02 .spe-pointExamplePh { position: relative; width: inherit; height: 150px; border-radius: 6px; overflow: hidden; } .spe-point02 .spe-pointExamplePh img { position: absolute; top: 0; left: 0; width: 100%; height: auto; } .spe-point02 .spe-pointExampleTxt { font-size: 16px; font-weight: 700; letter-spacing: -0.05em; line-height: 1.25; margin-top: 10px; } /* spe-point03 */ .spe-point03 { height: 400px; margin-top: 120px; } .spe-point03 .spe-pointPh { position: absolute; right: -130px } .spe-point03 .spe-pointTxtArea { position: absolute; top: 10px; left: 0; } .spe-point03 .spe-pointTtl { letter-spacing: 0; } /* spe-point04 */ .spe-point04 { height: 430px; margin-top: 0; } .spe-point04 .spe-pointPh { position: absolute; left: -130px; } .spe-point04 .spe-pointTxtArea { position: absolute; top: 60px; right: 0; } } /* ---------------------------------------------------------------------------- ● SP ---------------------------------------------------------------------------- */ @media screen and (max-width: 1082px){ .spe-pointPiece { margin-top: 40px; } p.spe-pointPh { width: 100%; height: auto; margin-top: 30px; text-align: center; } .spe-pointPh img { width: 100%; height: auto; max-width: 690px; } .spe-pointTxtArea { } p.spe-pointNumber { display: block; width: 80px; height: 30px; font-size: 14px; font-weight: 700; text-align: center; line-height: 30px; color: #fff; margin: 0 auto; background: #6accf1; } .spe-pointTtl { font-size: 4.5vw; text-align: center; line-height: 1.3; margin: 20px 0 25px; } .spe-pointTxt { text-align: justify; letter-spacing: 0; } /* spe-point01 */ .spe-point01 { margin-top: 0; } .spe-point01 .spe-pointPh img { /* position: relative; */ /* top: 0; */ /* left: -7vw; */ width: 100%; height: auto; max-width: 690px; } /* spe-point02 */ .spe-point02 .spe-pointExample { font-size: 0; margin-top: 30px; } .spe-point02 .spe-pointExamplePiece { display: inline-block; width: 26.5vw; text-align: center; vertical-align: top; margin-left: 5.3vw; } .spe-point02 .spe-pointExamplePiece:first-child { margin-left: 0; } .spe-point02 .spe-pointExamplePh { position: relative; width: inherit; height: 24vw; border-radius: 0.8vw; overflow: hidden; } .spe-point02 .spe-pointExamplePh img { position: absolute; top: 0; left: 0; width: 100%; height: auto; } .spe-point02 .spe-pointExampleTxt { font-size: 10px; font-weight: 700; letter-spacing: -0.1em; line-height: 1.25; margin-top: 8px; } /* spe-point03 */ .spe-point03 .spe-pointPh img { position: relative; top: 0; left: 4vw; height: auto; max-width: 690px; } /* spe-point04 */ .spe-point04 { margin-top: 20px; } } @media screen and (max-width: 640px){ .spe-pointTtl { font-size: 6.93vw; } } /* ============================================================================ ■ spe-contentGallery ============================================================================ */ /* accordion */ @keyframes show{ from{ opacity: 0; } to{ opacity: 1; } } .spe-galleryPieceArea .spe-galleryPiece:nth-child(n+9) { display: none; } .spe-galleryPieceArea.spe-galleryShow .spe-galleryPiece:nth-child(n+9) { display: inline-block; animation: show 1s ease-in-out 0s; } .spe-galleryBtnArea.spe-galleryBtnHide { display: none; } /* modal */ .spe-galleryModalPiece { position:fixed; display:none; z-index:300; margin:0; } .spe-galleryModalPieceInner { background: #fff; } .spe-galleryModalPieceOverlay { z-index:200; display:none; position:fixed; top:0; left:0; width:100%; height:120%; background-color:rgba(0,0,0,0.75); } /* ---------------------------------------------------------------------------- ● PC ---------------------------------------------------------------------------- */ @media screen and (min-width:641px) , print { .spe-contentGallery .spe-lanJpTtl { letter-spacing: 0.3em; padding-left: 0.3em } .spe-galleryLeadTxt { font-size: 20px; font-weight: 700; line-height: 2.25; text-align: center; margin-bottom: 55px; } .spe-galleryPieceArea { font-size: 0; margin-top: 20px; display: flex; flex-wrap: wrap; } .spe-galleryPiece { /* display: inline-block; */ width: calc((100% - 73px) / 3); text-align: center; margin: 35px 36px 0 0; border-radius: 6px; transition: 0.3s; cursor: pointer; } .spe-galleryPiece:nth-of-type(3n) { margin-right: 0; } .spe-galleryPiece .spe-galleryPh { /* position: relative; */ display: block; width: 100%; /* height: 220px; */ background: #f4f4f4; border-radius: 6px 6px 0 0; overflow: hidden; } .spe-galleryPiece .spe-galleryPh img { /* position: absolute; */ /* top: 0; */ /* left: 0; */ width: 100%; /* height: auto; */ } .spe-galleryPiece .spe-galleryTxt { display: block; width: 100%; /* height: 50px; */ font-size: 14px; font-weight: 700; line-height: 50px; background: #f4f4f4 url(../img/icon_arrow_black.png) no-repeat 95% center; background-size: 10px auto; border-radius: 0 0 6px 6px; padding: 0 5px; box-sizing: border-box; } .spe-galleryPiece:hover { box-shadow:25px 25px 50px 0px #d5dbe2; } .spe-galleryPiece:hover { opacity: 1; } .spe-galleryPiece:hover .spe-galleryTxt { color: #fff; background: #6accf1 url(../img/icon_arrow_white.png) no-repeat 95% center; background-size: 10px auto; } ul.spe-galleryBtnArea { margin-top: 60px; } .spe-galleryBtn a { background: #6accf1 url(../img/icon_plus.png) no-repeat 25px center; background-size: 19px auto; } /* spe-gallery07 */ .spe-gallery07 .spe-galleryTxt { letter-spacing: -0.05em; } /* modal */ .spe-galleryModalPiece { width:405px; } .spe-galleryModalPieceInner { padding: 40px 50px; border-radius: 10px; } .spe-galleryModalPh { display: block; position: relative; width: 100%; height: 285px; border-radius: 6px; overflow: hidden; } .spe-galleryModalPh img { position: absolute; top: 0; left: 0; width: 100%; height: auto; } dl.spe-galleryModalTxtArea { width: 100%; margin-top: 20px; } dt.spe-galleryModalTtl { font-weight: 700; text-align: center; } dd.spe-galleryModalTxt { font-size: 14px; text-align: justify; letter-spacing: -0.05em; margin-top: 15px; } ul.spe-galleryCaseBtnArea { margin-top: 30px; } .spe-galleryCaseBtn { margin:0; width: 285px; } .spe-galleryCaseBtn a { background: #6accf1 url(../img/icon_arrow_white.png) no-repeat 30px center; background-size: 12px auto; } .spe-galleryModalBtnClose { display: block; width: 36px; height: 36px; text-indent: -9999px; margin: 30px auto 0; background: url(../img/gallery_btn_modalclose.png) no-repeat center center; background-size: contain; cursor: pointer; } } @media screen and (min-width:900px){ .spe-galleryPiece { width: calc((100% - 109px) / 4); } .spe-galleryPiece:nth-of-type(3n) { margin-right: 36px; } .spe-galleryPiece:nth-of-type(4n) { margin-right: 0; } } @media screen and (min-width:1083px){ .spe-galleryPiece .spe-galleryTxt { font-size: 16px; } } /* ---------------------------------------------------------------------------- ● SP ---------------------------------------------------------------------------- */ @media screen and (max-width:640px){ .spe-contentGallery .spe-lanJpTtl { letter-spacing: 0.1em; padding-left: 0.1em } .spe-galleryLeadTxt { font-size: 4.26vw; font-weight: 700; text-align: center; } .spe-galleryPieceArea { margin-top: 10px; overflow: hidden; } .spe-galleryPiece { width: 42.6vw; text-align: center; margin-top: 6.66vw; border-radius: 0.8vw; } .spe-galleryPiece:nth-child(odd){ float: left; clear: both; } .spe-galleryPiece:nth-child(even){ float: right; } .spe-galleryPiece .spe-galleryPh { position: relative; display: block; width: 100%; height: 39.7vw; background: #f4f4f4; border-radius: 0.8vw 0.8vw 0 0; overflow: hidden; } .spe-galleryPiece .spe-galleryPh img { position: absolute; top: 0; left: 0; width: 100%; height: auto; } .spe-galleryPiece .spe-galleryTxt { display: block; width: 100%; height: 34px; font-size: 2.93vw; font-weight: 700; line-height: 34px; background: #f4f4f4 url(../img/icon_arrow_black.png) no-repeat 38vw center; background-size: auto 3.5vw; border-radius: 0 0 0.8vw 0.8vw; } ul.spe-galleryBtnArea { margin-top: 40px; } .spe-galleryBtn a { background: #6accf1 url(../img/icon_plus.png) no-repeat 25px center; background-size: 19px auto; } /* spe-gallery07 */ .spe-gallery07 .spe-galleryTxt { letter-spacing: -0.08em; } /* modal */ .spe-galleryModalPiece { width:86.6vw; } .spe-galleryModalPieceInner { padding: 10.6vw; border-radius: 1.33vw; } .spe-galleryModalPh { display: block; position: relative; width: 100%; height: 61.33vw; border-radius: 0.8vw; overflow: hidden; } .spe-galleryModalPh img { position: absolute; top: 0; left: 0; width: 100%; height: auto; } dl.spe-galleryModalTxtArea { width: 100%; margin-top: 15px; } dt.spe-galleryModalTtl { font-weight: 700; text-align: center; } dd.spe-galleryModalTxt { font-size: 11px; text-align: justify; letter-spacing: -0.05em; margin-top: 10px; } ul.spe-galleryCaseBtnArea { margin-top: 20px; } .spe-galleryCaseBtn { width: 100%; height: 50px; margin:0; } .spe-galleryCaseBtn a { font-size: 14px; line-height: 50px; background: #6accf1 url(../img/icon_arrow_white.png) no-repeat 30px center; background-size: 10px auto; } .spe-galleryModalBtnClose { display: block; width: 30px; height: 30px; text-indent: -9999px; margin: 20px auto 0; background: url(../img/gallery_btn_modalclose.png) no-repeat center center; background-size: contain; cursor: pointer; } } /* ============================================================================ ■ spe-contentHowto ============================================================================ */ /* ---------------------------------------------------------------------------- ● PC ---------------------------------------------------------------------------- */ @media screen and (min-width:641px) , print { .spe-contentHowto { font-size: 0; } .spe-contentHowto .spe-lanJpTtl { letter-spacing: 1.4em; padding-left: 1.4em } .spe-contentHowto .spe-kome { text-align: right; margin-top: 30px; } .spe-howtoPiece { position: relative; display: inline-block; width: calc((100% - 21px) / 2); font-size: 14px; text-align: center; vertical-align: top; margin-right: 20px; margin-bottom: 20px; } .spe-howtoPiece:nth-child(2) { margin-right: 0; } .spe-howtoPiece:last-child { margin-right: 0; } .spe-howtoPiece .spe-howtoNumber { position: absolute; top: 0; left: calc(50% - 50px); display: block; width: 105px; height: 40px; font-size: 16px; font-weight: 700; line-height: 40px; color: #fff; background: #6accf1; z-index: 2; } .spe-howtoPiece .spe-howtoPh { position: relative; width: 100%; height: 160px; margin-top: 20px; border-radius: 6px 6px 0 0; overflow: hidden; } .spe-howtoPiece .spe-howtoPh img { position: absolute; top: 0; left: 0; width: 100%; height: auto; } .spe-howtoPiece .spe-howtoTxtArea { width: 100%; background: #fff; border-radius: 0 0 6px 6px; } .spe-howtoPiece .spe-howtoTxtArea .spe-howtoTtl { position: relative; /*width: inherit; height: 88px; display: table-cell;*/ font-size: 18px; font-weight: 700; letter-spacing: 0; line-height: 1.3; vertical-align: middle; padding: 20px; } .spe-howtoPiece .spe-howtoTxtArea .spe-howtoTtl::after { width: 30px; content: ""; position: absolute; left: 42%; left: -webkit-calc(50% - 15px); left: calc(50% - 15px); bottom: 0; border-top: #000 1px solid; } .spe-howtoPiece .spe-howtoTxtArea .spe-howtoTxt { text-align: justify; letter-spacing: -0.06em; padding: 20px 30px 30px; } } @media screen and (min-width:1083px){ .spe-howtoPiece { width: 245px; margin-bottom: 0; } .spe-howtoPiece:nth-child(2) { margin-right: 20px; } } /* ---------------------------------------------------------------------------- ● SP ---------------------------------------------------------------------------- */ @media screen and (max-width:640px){ .spe-contentHowto .spe-lanJpTtl { letter-spacing: 1em; padding-left: 1em } .spe-contentHowto .spe-kome { margin-top: 25px; } .spe-howtoPieceArea { font-size: 0; overflow: hidden; } .spe-howtoPiece { position: relative; display: inline-block; width: 44vw; font-size: 12px; text-align: center; vertical-align: top; margin-top: 25px; } .spe-howtoPiece:first-child, .spe-howtoPiece:nth-of-type(2) { margin-top: 0; } .spe-howtoPiece:nth-child(odd){ float: left; clear: both; } .spe-howtoPiece:nth-child(even){ float: right; } .spe-howtoPiece .spe-howtoNumber { position: absolute; top: 0; left: 29%; left : -webkit-calc(50% - 35px) ; left : calc(50% - 35px) ; display: block; width: 70px; height: 25px; font-weight: 700; line-height: 25px; color: #fff; background: #6accf1; z-index: 2; } .spe-howtoPiece .spe-howtoPh { position: relative; width: 100%; height: 28vw; margin-top: 12px; border-radius: 0.8vw 0.8vw 0 0; overflow: hidden; } .spe-howtoPiece .spe-howtoPh img { position: absolute; top: 0; left: 0; width: 100%; height: auto; } .spe-howtoPiece .spe-howtoTxtArea { width: inherit; background: #fff; border-radius: 0 0 0.8vw 0.8vw; } .spe-howtoPiece .spe-howtoTxtArea .spe-howtoTtl { position: relative; width: inherit; height: 60px; display: table-cell; font-weight: 700; letter-spacing: 0; line-height: 1.3; vertical-align: middle; } .spe-howtoPiece .spe-howtoTxtArea .spe-howtoTtl::after { width: 30px; content: ""; position: absolute; left: 42%; left: -webkit-calc(50% - 15px); left: calc(50% - 15px); bottom: 0; border-top: #000 1px solid; } .spe-howtoPiece .spe-howtoTxtArea .spe-howtoTxt { text-align: justify; letter-spacing: -0.06em; line-height: 1.5; padding: 15px 20px 20px; } } /* ============================================================================ ■ spe-contentCv ============================================================================ */ /* ---------------------------------------------------------------------------- ● PC ---------------------------------------------------------------------------- */ @media screen and (min-width:641px) , print { .spe-cvComingsoon { font-size: 24px; font-weight: 700; color: #6accf1; text-align: center; padding: 100px 0; border-radius: 10px; background: #f4f4f4; } } /* ---------------------------------------------------------------------------- ● SP ---------------------------------------------------------------------------- */ @media screen and (max-width:640px){ .spe-cvComingsoon { font-size: 24px; font-weight: 700; color: #6accf1; text-align: center; padding: 60px 0; border-radius: 1.33vw; background: #f4f4f4; } } /* ---------------------------------------------------------------------------- ● PC ---------------------------------------------------------------------------- */ @media screen and (min-width: 900px), print { .spe-cvList { display: flex; width: 100%; padding: 40px 55px; margin-top: 30px; background: #f4f4f4; box-sizing: border-box; justify-content: space-between; } .spe-cvList .spe-cvPhArea { /* display: table-cell; */ width: calc(57% - 50px); /* vertical-align: middle; */ font-size: 0; } .spe-cvList .spe-cvPhArea ul{display:flex;} .spe-cvList .spe-cvPh { /* display: block; */ /* position: relative; */ max-width: 240px; max-height: 224px; /* float: left; */ width: 100%; margin-right: 20px; } .spe-cvList .spe-cvPh:nth-child(even) { /* float: right; */ margin-right: 0; } .spe-cvList .spe-cvPh img { /* position: absolute; */ /* top: 0; */ /* left: 0; */ width: 100%; height: auto; } .spe-cvList .spe-cvTxtArea { position: relative; /* display: table-cell; */ /* vertical-align: middle; */ padding-left: 50px; width: 43%; } .spe-cvList .spe-cvTtl { font-size: 2vw; font-weight: 700; line-height: 1.4; margin: 0 0 30px; } .spe-cvList .spe-cvCustomer { display: table; width: 100%; } .spe-cvList .spe-cvCustomerPh { display: table-cell; width: 120px; vertical-align: top; } .spe-cvList .spe-cvCustomerPh span { display: block; position: relative; width: inherit; height: 120px; border-radius: 60px; overflow: hidden; } .spe-cvList .spe-cvCustomerPh img { position: absolute; top: 0; left: 0; width: 100%; height: auto; } .spe-cvList .spe-cvCustomerInner { display: table-cell; vertical-align: middle; padding-left: 20px; padding-bottom: 40px; } .spe-cvList .spe-cvCustomerInfo { font-size: 14px; } .spe-cvList .spe-cvCustomerPosition { display: block; font-size: 12px; line-height: 1.6; margin-bottom: 2px; } .spe-cvList .spe-cvCustomerName { font-size: 16px; font-weight: 700; margin-right: 5px; } .spe-cvList .spe-cvBtnMore { position: absolute; bottom: -15px; right: 0; width: 190px; height: 40px; margin-top: 15px; } .spe-cvList .spe-cvBtnMore a { font-size: 14px; line-height: 40px; text-align: center; background: #6accf1 url(../img/icon_arrow_white2.png) no-repeat 20px center; background-size: auto 12px; } .spe-cvList01 .spe-cvCustomerName { margin-right: 0; } ul.spe-cvBtnArea { margin-top: 60px; } .spe-cvBtn a { background: #6accf1 url(../img/icon_arrow_white.png) no-repeat 30px center; background-size: 12px auto; } } @media screen and (min-width:1083px){ .spe-cvList .spe-cvTtl { font-size: 22px; } } /* ---------------------------------------------------------------------------- ● SP ---------------------------------------------------------------------------- */ @media screen and (max-width: 899px){ .spe-cvList { width: 100%; padding: 25px 6.6666vw; margin-top: 20px; background: #f4f4f4; box-sizing: border-box; } .spe-cvList .spe-cvPhArea { width: 100%; overflow: hidden; } .spe-cvList .spe-cvPh { position: relative; width: 38vw; height: 35.6vw; float: left; } .spe-cvList .spe-cvPh:nth-child(even) { float: right; } .spe-cvList .spe-cvPh img { position: absolute; top: 0; left: 0; width: 100%; height: auto; } .spe-cvList .spe-cvTxtArea { width: 100%; } .spe-cvList .spe-cvTtl { font-size: 3.2vw; font-weight: 700; line-height: 1.4; text-align: center; margin: 20px 0 10px; } .spe-cvList .spe-cvCustomer { display: table; width: 100%; } .spe-cvList .spe-cvCustomerPh { display: table-cell; width: 72px; vertical-align: top; } .spe-cvList .spe-cvCustomerPh span { display: block; position: relative; width: inherit; height: 72px; border-radius: 36px; overflow: hidden; } .spe-cvList .spe-cvCustomerPh img { position: absolute; top: 0; left: 0; width: 100%; height: auto; } .spe-cvList .spe-cvCustomerInner { display: table-cell; vertical-align: middle; padding-left: 15px; } .spe-cvList .spe-cvCustomerInfo { font-size: 12px; letter-spacing: -0.05em; } .spe-cvList .spe-cvCustomerPosition { display: block; line-height: 1.6; } .spe-cvList .spe-cvCustomerName { font-size: 14px; font-weight: 700; margin-right: 5px; } .spe-cvList .spe-cvBtnMore { display: block; width: 100%; height: 45px; margin-top: 15px; max-width: unset; } .spe-cvList .spe-cvBtnMore a { font-size: 14px; line-height: 45px; text-align: center; background: #6accf1 url(../img/icon_arrow_white2.png) no-repeat 20px center; background-size: auto 12px; } .spe-cvList01 .spe-cvCustomerName { margin-right: 0; } ul.spe-cvBtnArea { margin-top: 40px; } .spe-cvBtn a { background: #6accf1 url(../img/icon_arrow_white.png) no-repeat 30px center; background-size: 12px auto; } } @media screen and (max-width: 640px){ .spe-cvList .spe-cvTtl { font-size: 4.2666vw; } } @media screen and (max-width:320px){ .spe-cvList01 .spe-cvCustomerInfo { font-size: 11px; } .spe-cvList01 .spe-cvCustomerName { font-size: 12px; } } /* ============================================================================ ■ spe-contentLineup ============================================================================ */ /* ---------------------------------------------------------------------------- ● PC ---------------------------------------------------------------------------- */ @media screen and (min-width:641px) , print { .spe-lineupTable { width: 100%; font-weight: 700; text-align: center; letter-spacing: 0; border-collapse: collapse; } .spe-lineupPh { max-width: 160px; height: auto; margin-bottom: 20px; width: 100%; } .spe-lineupType th { font-size: 24px; padding-bottom: 15px; } .spe-lineupType01 { padding-right: 5px; } .spe-lineupType02 { padding-left: 5px; } .spe-lineupType .spe-lineupInner { display: block; padding: 5px 0; border: #000 1px solid; } .spe-lineupType .spe-lineupInner .spe-kome { margin-left: 10px; } .spe-lineupTable td { font-size: 20px; padding: 20px; border-left: #a5a5a5 1px solid; border-bottom: #a5a5a5 1px solid; } .spe-lineupItem { width: 145px; font-size: 14px; text-align: left; padding: 20px 0; border-bottom: #a5a5a5 1px solid; } .spe-lineupTableRow01 .spe-lineupItem { vertical-align: bottom; } .spe-lineupTableRow01 a.spe-lineupBtnDetail { display: block; width: 88px; height: 30px; font-size: 14px; line-height: 30px; color: #fff; margin: 0 auto 15px; background: #6accf1; border-radius: 15px; } .spe-lineupTableRow06 .spe-lineupItem { border-bottom: none; } .spe-lineupTableRow06 td { font-size: 14px; text-align: left; vertical-align: top; padding: 20px 25px; border-bottom: none; } } /* ---------------------------------------------------------------------------- ● SP ---------------------------------------------------------------------------- */ @media screen and (max-width:640px){ .spe-lineupTable { width: 100%; font-size: 2.93vw; font-weight: 700; line-height: 1.2; text-align: center; letter-spacing: 0; border-collapse: collapse; } .spe-lineupPh { width: 13.3vw; height: auto; margin-bottom: 10px; } .spe-lineupType th { width: 42vw; padding-bottom: 10px; } .spe-lineupType01 { padding-right: 2.5px; } .spe-lineupType02 { padding-left: 2.5px; } .spe-lineupType .spe-lineupInner { display: table-cell; width: inherit; height: 35px; vertical-align: middle; border: #000 1px solid; } .spe-lineupType .spe-lineupInner .spe-kome { display: block; font-size: 10px; } .spe-lineupTable td { padding: 2.93vw; border-left: #a5a5a5 1px solid; border-bottom: #a5a5a5 1px solid; } .spe-lineupItem { text-align: left; padding: 2.93vw 0; border-bottom: #a5a5a5 1px solid; } .spe-lineupTableRow01 .spe-lineupItem { vertical-align: bottom; } .spe-lineupTableRow01 a.spe-lineupBtnDetail { display: block; width: 13.3vw; height: 4.66vw; font-size: 10px; line-height: 4.66vw; color: #fff; margin: 0 auto 10px; background: #6accf1; border-radius: 2.4vw; } .spe-lineupTableRow06 .spe-lineupItem { border-bottom: none; } .spe-lineupTableRow06 td { font-size: 10px; letter-spacing: -0.05em; text-align: left; vertical-align: top; padding: 2vw; border-bottom: none; } .spe-lineupTableRow06 .spe-lineupAttList li { margin-bottom: 8px; } .spe-lineupTableRow06 .spe-lineupAttList li:last-child { margin-bottom: 0; } } /* ============================================================================ ■ spe-contentContact ============================================================================ */ .spe-contentContact .spe-contentTtl01 .spe-lanJpTtl { color: #000; } /* ---------------------------------------------------------------------------- ● PC ---------------------------------------------------------------------------- */ @media screen and (min-width:641px) , print { .spe-contactBtn a { background: #6accf1 url(../img/icon_arrow_white.png) no-repeat 30px center; background-size: 12px auto; } } /* ---------------------------------------------------------------------------- ● SP ---------------------------------------------------------------------------- */ @media screen and (max-width:640px){ .spe-contactBtn a { background: #6accf1 url(../img/icon_arrow_white.png) no-repeat 30px center; background-size: 12px auto; } .spe-contactBtn02 { margin-top: 20px; } } cvPh