@charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&display=swap"); :root { --primary-color: #0334aa; --primary-text: #0b0153; --second-text: #2a3b64; --third-text: #222; --white-bg: #e3e4ed; --white-bg-rgb: 227, 228, 237; --white-border: #f5f5f2; --red: #da5129; --red-footer: #da5129; --redhover: #c7411a; --mainwhite-rgb: 255, 255, 255; --mainwhite: #fff; --mainblack-rgb: 0, 0, 0; --mainblack: #000; --fs-base: 1.6rem; --purple: #646ffa; --purplehover: #5560ee; --gray: #d9d9d9; --blue: #2971c0; --darkgray: #767171; --border-gray: #444; --border-gray02: #ddd; --text: #212a35; } /* Modern minimal reset */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } * { margin: 0; } body { line-height: 1.5; -webkit-font-smoothing: antialiased; } img, picture, video, canvas, svg { display: block; max-width: 100%; } a { text-decoration: none; } input, button, textarea, select { font: inherit; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } /*----------------------------------------------- @keyframes ------------------------------------------------*/ @-webkit-keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @-webkit-keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(50px); transform: translateY(50px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @keyframes fadeInUp { 0% { opacity: 0; -webkit-transform: translateY(50px); transform: translateY(50px); } 100% { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } } @-webkit-keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @keyframes pulse { 0% { -webkit-transform: scale(1); transform: scale(1); } 50% { -webkit-transform: scale(1.1); transform: scale(1.1); } 100% { -webkit-transform: scale(1); transform: scale(1); } } @-webkit-keyframes zoomOut { 0% { -webkit-transform: scale3d(1.2, 1.2, 1.2); transform: scale3d(1.2, 1.2, 1.2); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @keyframes zoomOut { 0% { -webkit-transform: scale3d(1.2, 1.2, 1.2); transform: scale3d(1.2, 1.2, 1.2); } 100% { -webkit-transform: scale3d(1, 1, 1); transform: scale3d(1, 1, 1); } } @-webkit-keyframes HamBtnOpenTop { 50% { top: 50%; } 100% { top: 50%; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } } @keyframes HamBtnOpenTop { 50% { top: 50%; } 100% { top: 50%; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); } } @-webkit-keyframes HamBtnOpenBottom { 50% { bottom: 50%; } 100% { bottom: 50%; -webkit-transform: translate(-50%, 50%) rotate(-45deg); transform: translate(-50%, 50%) rotate(-45deg); } } @keyframes HamBtnOpenBottom { 50% { bottom: 50%; } 100% { bottom: 50%; -webkit-transform: translate(-50%, 50%) rotate(-45deg); transform: translate(-50%, 50%) rotate(-45deg); } } @-webkit-keyframes HamBtnCloseTop { 50% { top: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } 100% { top: 12px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @keyframes HamBtnCloseTop { 50% { top: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } 100% { top: 12px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @-webkit-keyframes HamBtnCloseBottom { 50% { bottom: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } 100% { bottom: 12px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } @keyframes HamBtnCloseBottom { 50% { bottom: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } 100% { bottom: 12px; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } .u-visualEditArea { color: var(--primary-text); font-size: 1.5rem; font-weight: normal; line-height: 1.8; letter-spacing: 0.05em; } @media screen and (max-width: 768px) { .u-visualEditArea { font-size: 1.3rem; } } .u-visualEditArea * + * { margin-top: 1.75em; } @media screen and (min-width: 769px) { .u-visualEditArea a { -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } } @media screen and (min-width: 769px) { .u-visualEditArea a:hover { opacity: 0.6; } } .u-visualEditArea a { color: var(--primay-color); text-decoration: underline; } .u-visualEditArea h1 { font-size: 4.5rem; line-height: 1.4; } .u-visualEditArea h2 { margin-top: 2em; font-size: 3rem; line-height: 1.6; } .u-visualEditArea h3 { color: var(--primay-color); font-size: 2.2rem; font-weight: bold; line-height: 1.6; } .u-visualEditArea h4 { padding-left: 25px; position: relative; font-size: 1.8rem; line-height: 1.6; } .u-visualEditArea h4::before { content: ""; width: 17px; height: 17px; position: absolute; top: 3px; left: 0; background: var(--primay-color); } .u-visualEditArea h5, .u-visualEditArea h6 { font-size: 1.6rem; line-height: 1.6; } .u-visualEditArea h1 + h2, .u-visualEditArea h2 + h3, .u-visualEditArea h3 + h4, .u-visualEditArea h4 + h5, .u-visualEditArea h5 + h6 { margin-top: 0.5em; } .u-visualEditArea p { color: var(--primary-text); font-size: 1.5rem; font-weight: normal; line-height: 1.8; letter-spacing: 0.05em; } @media screen and (max-width: 768px) { .u-visualEditArea p { font-size: 1.3rem; } } .u-visualEditArea strong, .u-visualEditArea strong * { font-weight: bold; } .u-visualEditArea em, .u-visualEditArea em * { font-style: italic; } .u-visualEditArea ul { list-style-type: disc; } .u-visualEditArea ol { list-style-type: decimal; } .u-visualEditArea ul, .u-visualEditArea ol { margin-top: 1em; padding-left: 1.4em; } .u-visualEditArea ul li, .u-visualEditArea ol li { margin-top: 0.6em; line-height: 1.5; } .u-visualEditArea sup, .u-visualEditArea sub { font-size: 1rem; line-height: 1 !important; } .u-visualEditArea hr { width: 100%; height: 1px; display: block; background: var(--primary-text); } .u-visualEditArea blockquote { padding: 30px; background: var(--primay-color); } .u-visualEditArea table { margin-top: 3em; width: 100% !important; height: auto !important; border-collapse: collapse; background: var(--primay-color); } .u-visualEditArea table thead th, .u-visualEditArea table thead td { font-weight: bold; text-align: center; } .u-visualEditArea table tr th, .u-visualEditArea table tr td { padding: 15px 20px; border: var(--primay-color) 1px solid; line-height: 1.5; text-align: left; vertical-align: middle; } .u-visualEditArea table tr th { width: 25%; font-weight: bold; text-align: center; } .u-visualEditArea img { width: auto; max-width: 100%; height: auto; margin-top: 1em; } .u-visualEditArea img.aligncenter { display: block; margin-left: auto; margin-right: auto; } .u-visualEditArea img.alignright { display: block; margin-right: 0; margin-left: auto; } .u-visualEditArea .gallery { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .u-visualEditArea .gallery-item { margin-top: 0; float: none; text-align: center; } .u-visualEditArea .gallery-columns-2 .gallery-item { width: calc((100% - 40px) / 2); } .u-visualEditArea .gallery-columns-3 .gallery-item { width: calc((100% - 80px) / 3); } /*==================================================================== siteHeader ====================================================================*/ .siteHeader { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; position: fixed; top: 3.5rem; left: 0; z-index: 100; padding: 0 3rem; } @media screen and (max-width: 768px) { .siteHeader { top: 1.5rem; padding: 0 1.6rem; } } .is_login_user .siteHeader { top: 6.7rem; } @media screen and (max-width: 768px) { .is_login_user .siteHeader { top: 46px; } } .siteHeader__inner { padding: 1.6rem 3.2rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 100%; max-width: 132rem; background: rgba(var(--white-bg-rgb), 0.2); border-radius: 6rem; height: 9.6rem; } @media screen and (max-width: 768px) { .siteHeader__inner { height: 6.3rem; padding: 0.8rem 1.6rem; height: 6.3rem; } } .siteHeader__logo { max-width: 23.1rem; -webkit-transition: all 0.2s ease-in; transition: all 0.2s ease-in; } .is-fv .siteHeader__logo { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } @media screen and (max-width: 768px) { .siteHeader__logo { max-width: 14.8rem; } } @media screen and (min-width: 769px) { .siteHeader__logoLink { -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } } @media screen and (min-width: 769px) { .siteHeader__logoLink:hover { opacity: 0.6; } } .siteHeader__btn { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 21rem; height: 6.4rem; color: var(--mainwhite); background: var(--red); border-radius: 5rem; font-weight: 700; line-height: 1; letter-spacing: 0.02em; -webkit-box-shadow: 0px 0px 0px 5px rgba(var(--mainwhite-rgb), 0.15), 0px 20px 20px rgba(var(--mainblack-rgb), 0.2), inset 0px -10px 10px rgba(var(--mainblack-rgb), 0.3), inset 0px 10px 10px rgba(var(--mainwhite-rgb), 0.2); box-shadow: 0px 0px 0px 5px rgba(var(--mainwhite-rgb), 0.15), 0px 20px 20px rgba(var(--mainblack-rgb), 0.2), inset 0px -10px 10px rgba(var(--mainblack-rgb), 0.3), inset 0px 10px 10px rgba(var(--mainwhite-rgb), 0.2); } .siteHeader__btn:hover { background: var(--redhover); } @media screen and (min-width: 769px) { .siteHeader__btn { -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } } @media screen and (max-width: 768px) { .siteHeader__btn { width: 11.8rem; height: 4rem; } } /*==================================================================== siteFooter ====================================================================*/ .siteFooter { color: var(--mainwhite); background: var(--red-footer); padding: 11.2rem 3.2rem; border-top-left-radius: 6rem; border-top-right-radius: 6rem; } @media screen and (max-width: 768px) { .siteFooter { padding: 3.2rem 2rem; border-top-left-radius: 3.2rem; border-top-right-radius: 3.2rem; } } .siteFooter__inner { margin: 0 auto; width: 100%; max-width: 131.2rem; } .siteFooter__rowItem { padding-bottom: 2.4rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; border-bottom: 1px solid var(--white-border); } @media screen and (max-width: 768px) { .siteFooter__rowItem { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 2rem; } } .siteFooter__imgLogo { margin: 0 0 2.4rem; max-width: 23.1rem; } @media screen and (max-width: 768px) { .siteFooter__imgLogo { margin: 0 auto 2.4rem; max-width: 16.5rem; } } .siteFooter__imgTxt { display: block; font-family: "Noto Sans JP", sans-serif; font-size: 1.4rem; font-weight: 400; line-height: 1.5; } .siteFooter__imgTxt:not(:first-child) { margin-top: 0.4rem; } @media screen and (max-width: 768px) { .siteFooter__imgTxt { font-size: 1.2rem; text-align: center; } } .siteFooter__social { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 3.2rem; } @media screen and (max-width: 768px) { .siteFooter__social { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .siteFooter__exLinks { margin: 2.4rem auto 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 4.8rem; } @media screen and (max-width: 768px) { .siteFooter__exLinks { -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } } .siteFooter__exLinksItem { position: relative; color: var(--mainwhite); font-family: "Noto Sans JP", sans-serif; font-size: 1.4rem; font-weight: 400; line-height: 1.5; padding-right: 2rem; } @media screen and (min-width: 769px) { .siteFooter__exLinksItem { -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } } @media screen and (min-width: 769px) { .siteFooter__exLinksItem:hover { opacity: 0.6; } } .siteFooter__exLinksItem::after { content: ""; position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: block; width: 1.2rem; height: 1.2rem; background-image: url('data:image/svg+xml,'); background-size: 100% auto; background-repeat: no-repeat; } .siteFooter__fb { display: block; width: 3.2rem; height: 3.2rem; background-image: url('data:image/svg+xml,'); background-size: 100% auto; } @media screen and (min-width: 769px) { .siteFooter__fb { -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } } @media screen and (min-width: 769px) { .siteFooter__fb:hover { opacity: 0.6; } } .siteFooter__ig { display: block; width: 3.2rem; height: 3.2rem; background-image: url('data:image/svg+xml,'); background-size: 100% auto; } @media screen and (min-width: 769px) { .siteFooter__ig { -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } } @media screen and (min-width: 769px) { .siteFooter__ig:hover { opacity: 0.6; } } .siteFooter__x { display: block; width: 3.2rem; height: 3.2rem; background-image: url('data:image/svg+xml,'); background-size: 100% auto; } @media screen and (min-width: 769px) { .siteFooter__x { -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } } @media screen and (min-width: 769px) { .siteFooter__x:hover { opacity: 0.6; } } .siteFooter__linkedin { display: block; width: 3.2rem; height: 3.2rem; background-image: url('data:image/svg+xml,'); background-size: 100% auto; } @media screen and (min-width: 769px) { .siteFooter__linkedin { -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } } @media screen and (min-width: 769px) { .siteFooter__linkedin:hover { opacity: 0.6; } } .siteFooter__cRightRow { margin: 2.4rem auto 0; width: 100%; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 768px) { .siteFooter__cRightRow { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 2rem; } } .siteFooter__cRightRowLinks { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 2.4rem; } @media screen and (max-width: 768px) { .siteFooter__cRightRowLinks { gap: 0.8rem; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .siteFooter__cRightRowLinksItem { color: var(--mainwhite); font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 1.2rem; line-height: 1.5; } @media screen and (min-width: 769px) { .siteFooter__cRightRowLinksItem { -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } } @media screen and (min-width: 769px) { .siteFooter__cRightRowLinksItem:hover { opacity: 0.6; } } .siteFooter__cRightRowSml { font-family: "Noto Sans JP", sans-serif; font-weight: 400; font-size: 1.2rem; line-height: 1.5; } @media screen and (max-width: 768px) { .siteFooter__cRightRowSml { font-family: "Lato", sans-serif; } } /*==================================================================== COMMON LAYOUT ====================================================================*/ html { font-size: 62.5%; } @media screen and (max-width: 1280px) and (min-width: 768px) { html { font-size: 0.78125vw; } } @media screen and (max-width: 768px) { html { font-size: 2.6666666667vw; } } body { background: var(--primary-color); -webkit-font-feature-settings: "palt" 1; font-feature-settings: "palt" 1; font-family: "Zen Kaku Gothic New", sans-serif; font-size: var(--fs-base); } /*----------------------------------------------- PC/SP 出し分け ------------------------------------------------*/ .u-pcDb { display: block; } .u-pcDib { display: inline-block; } .u-pcDin { display: inline; } .u-pcDf { display: -webkit-box; display: -ms-flexbox; display: flex; } .u-pcDt { display: table; } .u-pcDtc { display: table-cell; } .u-spDb, .u-spDib, .u-spDin, .u-spDf, .u-spDt, .u-spDtc { display: none; } @media screen and (max-width: 768px) { .u-pcDb, .u-pcDib, .u-pcDin, .u-pcDf, .u-pcDt, .u-pcDtc { display: none; } .u-spDb { display: block; } .u-spDib { display: inline-block; } .u-spDin { display: inline; } .u-spDf { display: -webkit-box; display: -ms-flexbox; display: flex; } .u-spDt { display: table; } .u-spDtc { display: table-cell; } } /*----------------------------------------------- サイトコンテンツ ------------------------------------------------*/ .siteContent { background: var(--mainwhite); } /*----------------------------------------------- WPツールバー ------------------------------------------------*/ @media screen and (max-width: 600px) { .is_login_user #wpadminbar { position: fixed; } } .commonHeader__ttlEn { display: block; color: var(--red-footer); font-family: "Lato", sans-serif; font-size: 1.6rem; font-weight: 800; line-height: 1.5; letter-spacing: 0.32em; text-align: center; } .commonHeader__ttl { margin: 1.6rem auto 0; color: var(--third-text); font-size: 4.8rem; font-weight: 700; text-align: center; line-height: 1.2; } @media screen and (max-width: 768px) { .commonHeader__ttl { font-size: 3.2rem; } } .commonHeader__ttl span { color: var(--red-footer); } .commonHeader__ttl.u-fontRoboto { font-family: "Roboto", sans-serif; } /*==================================================================== topPageFvSec ====================================================================*/ .topPageFvSec { position: relative; background: linear-gradient(249.62deg, #0334aa 51.66%, #173e9e 92.7%); min-height: 90rem; padding: 19.8rem 1rem; } @media screen and (max-width: 768px) { .topPageFvSec { min-height: auto; padding: 12rem 0 0; } } .topPageFvSec::before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background-image: url("../images/topPage/topPageFvSec_bg-01.png"); background-size: cover; background-repeat: no-repeat; } @media screen and (max-width: 768px) { .topPageFvSec::before { background-image: url("../images/topPage/topPageFvSec_bg-01_sp.png"); } } .topPageFvSec__inner { position: relative; margin: 0 auto; z-index: 2; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; max-width: 134rem; } @media screen and (max-width: 768px) { .topPageFvSec__inner { -webkit-box-orient: vertical; -webkit-box-direction: reverse; -ms-flex-direction: column-reverse; flex-direction: column-reverse; gap: 5.3rem; padding-bottom: 21.7rem; } } .topPageFvSec__img { padding-left: 1.2rem; width: 66.5rem; margin-bottom: -43.4rem; margin-right: -9rem; } @media screen and (max-width: 768px) { .topPageFvSec__img { position: absolute; left: 0; bottom: -16.1rem; padding-left: 0; margin-left: -2.3rem; margin-right: auto; width: 33.2rem; margin-bottom: 0; } } .topPageFvSec__details { width: 79.2rem; } @media screen and (max-width: 768px) { .topPageFvSec__details { width: 100%; padding: 0 1.6rem; } } .topPageFvSec__flex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 768px) { .topPageFvSec__flex { -ms-flex-wrap: wrap; flex-wrap: wrap; } } .topPageFvSec__flexImg { max-width: 17rem; } @media screen and (max-width: 768px) { .topPageFvSec__flexImg { max-width: 13.5rem; } } .topPageFvSec__flexTxt { color: var(--mainwhite); font-size: 1.8rem; font-weight: 700; margin-left: 1.2rem; } @media screen and (max-width: 768px) { .topPageFvSec__flexTxt { margin-left: 0.4rem; font-size: 1.4rem; } .topPageFvSec__flexTxt:last-of-type { margin-top: 0.4rem; width: 100%; margin-left: 0; } } .topPageFvSec__bnrTxt { margin: 2.4rem 0 0; width: -webkit-max-content; width: -moz-max-content; width: max-content; background: var(--red-footer); color: var(--mainwhite); padding: 0.2rem 1.2rem; font-size: 6.4rem; line-height: 1.25; font-weight: 700; } .topPageFvSec__bnrTxt:not(.u-pcDb):not(.u-spDb) { display: block; } @media screen and (max-width: 768px) { .topPageFvSec__bnrTxt { margin-top: 1.4rem; font-size: 4rem; } } .topPageFvSec__mainTxt { margin: 2.4rem 0 0; color: var(--mainwhite); font-size: 1.8rem; line-height: 1.5; font-weight: 700; } @media screen and (max-width: 768px) { .topPageFvSec__mainTxt { margin-top: 1.4rem; font-size: 1.4rem; } } .topPageFvSec__btn { position: relative; margin: 9rem 0 0; padding: 0 5.8rem 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--mainwhite); width: 50rem; height: 10rem; background: var(--purple); border-radius: 5rem; -webkit-box-shadow: 0px 0px 0px 5px rgba(var(--mainwhite-rgb), 0.15), 0px 20px 20px rgba(var(--mainblack-rgb), 0.2), inset 0px -10px 10px rgba(var(--mainblack-rgb), 0.3), inset 0px 10px 10px rgba(var(--mainwhite-rgb), 0.2); box-shadow: 0px 0px 0px 5px rgba(var(--mainwhite-rgb), 0.15), 0px 20px 20px rgba(var(--mainblack-rgb), 0.2), inset 0px -10px 10px rgba(var(--mainblack-rgb), 0.3), inset 0px 10px 10px rgba(var(--mainwhite-rgb), 0.2); -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .topPageFvSec__btn:hover { background: var(--purplehover); -webkit-box-shadow: 0px 0px 0px 7px rgba(255, 255, 255, 0.15), 0px 20px 20px rgba(0, 0, 0, 0.2), inset 0px -10px 10px rgba(0, 0, 0, 0.3), inset 0px 10px 10px rgba(255, 255, 255, 0.2); box-shadow: 0px 0px 0px 7px rgba(255, 255, 255, 0.15), 0px 20px 20px rgba(0, 0, 0, 0.2), inset 0px -10px 10px rgba(0, 0, 0, 0.3), inset 0px 10px 10px rgba(255, 255, 255, 0.2); } .topPageFvSec__btn::after { content: ""; position: absolute; top: 50%; right: 5.8rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: block; width: 2.6rem; height: 2.6rem; background-image: url('data:image/svg+xml,'); background-size: 1.95rem auto; background-repeat: no-repeat; background-position: center; } @media screen and (max-width: 768px) { .topPageFvSec__btn::after { right: 2.3rem; } } @media screen and (max-width: 768px) { .topPageFvSec__btn { margin: 7.2rem auto 0; width: 31.1rem; height: 7.2rem; padding-left: 1.8rem; padding-right: 5rem; } } .topPageFvSec__btnFloat { position: absolute; top: -3rem; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: block; width: 33rem; height: 5rem; background-image: url('data:image/svg+xml,'); background-size: 100% auto; background-repeat: no-repeat; color: var(--third-text); font-size: 1.4rem; text-align: center; line-height: 1.6; padding-top: 0.8rem; font-weight: 700; } @media screen and (max-width: 768px) { .topPageFvSec__btnFloat { padding-top: 0.6rem; width: 28.7rem; height: 5rem; font-size: 1.2rem; } } .topPageFvSec__btnSpan { font-size: 2.6rem; font-weight: 700; letter-spacing: 0.002em; } @media screen and (max-width: 768px) { .topPageFvSec__btnSpan { font-size: 2rem; } } /*==================================================================== topPageWorrySec ====================================================================*/ .topPageWorrySec { padding: 28.7rem 1rem 10.9rem; position: relative; background: var(--mainwhite); } @media screen and (max-width: 768px) { .topPageWorrySec { padding: 22.4rem 0 11.2rem; } } .topPageWorrySec::before { content: ""; position: absolute; bottom: 6.8rem; left: 0; display: block; width: 41.6rem; height: 57.3rem; background-image: url("../images/topPage/topPageWorrySec_bg-02.png"); background-size: 100% auto; background-repeat: no-repeat; } @media screen and (max-width: 768px) { .topPageWorrySec::before { content: none; } } .topPageWorrySec::after { content: ""; position: absolute; bottom: -16.2rem; right: 0; display: block; width: 46.2rem; height: 57.1rem; background-image: url("../images/topPage/topPageWorrySec_bg-03.png"); background-size: 100% auto; background-repeat: no-repeat; z-index: 2; } @media screen and (max-width: 768px) { .topPageWorrySec::after { display: block; width: 100%; bottom: auto; top: 0; left: 0; height: calc(100% + 3.4rem); background-image: url("../images/topPage/topPageWorrySec_bg-01_sp.png"); z-index: 1; } } .topPageWorrySec__float { position: absolute; bottom: 45rem; left: 0; } @media screen and (min-width: 1440px) { .topPageWorrySec__float { bottom: 40rem; } } @media screen and (max-width: 768px) { .topPageWorrySec__float { display: none; } } .topPageWorrySec { /* &::after { content: ''; position: absolute; bottom: -15.3rem; bottom: 0; left: 0; display: block; width: 100%; height: 164rem; background-image: url('../images/topPage/topPageWorrySec_bg-01.png'); background-size: 100% auto; background-repeat: no-repeat; background-position: bottom; z-index: 1; @include u-mqMax { height: calc(100% + 3.4rem); background-image: url('../images/topPage/topPageWorrySec_bg-01_sp.png'); } } */ } .topPageWorrySec .commonHeader__ttl { margin-top: 0; } .topPageWorrySec .commonHeader__ttl span { margin: 0 0.8rem; display: inline-block; background: var(--red-footer); color: var(--mainwhite); padding: 0.2rem 1.2rem; font-size: 6.4rem; } @media screen and (max-width: 768px) { .topPageWorrySec .commonHeader__ttl span { font-size: 4rem; margin: 0 0 0 0.4rem; } } .topPageWorrySec__inner { position: relative; margin: 0 auto; max-width: 128rem; z-index: 2; } .topPageWorrySec__list { margin: 5.55vw auto 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-column-gap: 23.4rem; -moz-column-gap: 23.4rem; column-gap: 23.4rem; row-gap: 0; } @media screen and (max-width: 1300px) { .topPageWorrySec__list { -webkit-column-gap: 20.4rem; -moz-column-gap: 20.4rem; column-gap: 20.4rem; } } @media screen and (max-width: 768px) { .topPageWorrySec__list { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 6rem; margin-top: 8rem; } } .topPageWorrySec__listItem { position: relative; padding: 16.7rem 0 5rem; width: 27rem; height: 27rem; background: var(--mainwhite); border-radius: 50%; -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 50px rgba(120, 143, 156, 0.25); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 50px rgba(120, 143, 156, 0.25); -webkit-box-sizing: border-box; box-sizing: border-box; } .topPageWorrySec__listItem:nth-of-type(4), .topPageWorrySec__listItem:nth-of-type(5) { margin-top: -4rem; padding: 14.1rem 0 5rem; } @media screen and (max-width: 768px) { .topPageWorrySec__listItem:nth-of-type(4), .topPageWorrySec__listItem:nth-of-type(5) { margin-top: 0; } } .topPageWorrySec__listItem:nth-of-type(4) .topPageWorrySec__listItemFgr, .topPageWorrySec__listItem:nth-of-type(5) .topPageWorrySec__listItemFgr { top: -10.6rem; } @media screen and (max-width: 768px) { .topPageWorrySec__listItem:nth-of-type(4) .topPageWorrySec__listItemFgr { width: 22rem; top: -8.5rem; } } .topPageWorrySec__listItemFgr { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 24rem; top: -8rem; } @media screen and (max-width: 768px) { .topPageWorrySec__listItemFgr { top: -7rem; } } .topPageWorrySec__listItemTxt { color: var(--third-text); font-family: "Roboto", sans-serif; font-size: 1.98rem; font-weight: 700; line-height: 1.3; text-align: center; letter-spacing: 0; } .topPageWorrySec__listItemTxt span { color: var(--blue); } .topPageWorrySec__arrow { margin: 4.44vw auto 0; display: block; max-width: 5.6rem; } @media screen and (max-width: 768px) { .topPageWorrySec__arrow { margin-top: 6rem; } } .topPageWorrySec__txt { margin: 6.4rem auto 0; text-align: center; } @media screen and (max-width: 768px) { .topPageWorrySec__txt { margin-top: 6rem; } } .topPageWorrySec__txtSpan { font-size: 4.8rem; font-weight: 700; line-height: 1.5; color: var(--primary-text); } @media screen and (max-width: 768px) { .topPageWorrySec__txtSpan { font-size: 3.2rem; } } .topPageWorrySec__txtSpan:not(:first-child) { margin-top: 0.8rem; } @media screen and (max-width: 768px) { .topPageWorrySec__txtSpan:not(:first-child) { line-height: 1.7; } } .topPageWorrySec__txtSpan span { display: inline-block; margin: 0 0.8rem; padding: 0.2rem 1.2rem; background: var(--red-footer); color: var(--mainwhite); } /*==================================================================== topPageWhySec ====================================================================*/ .topPageWhySec { position: relative; padding: 11.9rem 0 13.2rem; background: var(--white-border); } .topPageWhySec::before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 10.14vw; background-image: url('data:image/svg+xml,'); background-size: cover; background-repeat: no-repeat; background-position: bottom; } @media screen and (max-width: 768px) { .topPageWhySec::before { content: none; } } @media screen and (max-width: 768px) { .topPageWhySec { padding: 7.3rem 1.6rem 6.6rem; } } .topPageWhySec__inner { margin: 0 auto; max-width: 121.6rem; } @media screen and (max-width: 768px) { .topPageWhySec__inner { max-width: 100%; } } .topPageWhySec__list { margin: 8rem auto 0; } @media screen and (max-width: 768px) { .topPageWhySec__list { margin-top: 6rem; } } .topPageWhySec__listItemTtl { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 768px) { .topPageWhySec__listItemTtl { display: none; } } .topPageWhySec__listItemPocTtl { width: 44rem; text-align: center; font-size: 3.2rem; font-weight: 700; line-height: 1.2; margin-right: 12.5rem; } @media screen and (max-width: 768px) { .topPageWhySec__listItemPocTtl { width: 100%; font-size: 1.6rem; text-align: left; margin-right: 0; } } .topPageWhySec__listItemMorPocTtl { width: 65rem; } @media screen and (max-width: 768px) { .topPageWhySec__listItemMorPocTtl { width: 100%; } } .topPageWhySec__listItemMorPocTtl img { margin: 0 auto; max-width: 23.122rem; } @media screen and (max-width: 768px) { .topPageWhySec__listItemMorPocTtl img { margin-right: 0; max-width: 15.6rem; } } .topPageWhySec__listItem { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 2rem; } @media screen and (max-width: 768px) { .topPageWhySec__listItem { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1.4rem; } } .topPageWhySec__listItem:not(:first-child) { margin-top: 3.3rem; } @media screen and (max-width: 768px) { .topPageWhySec__listItem:not(:first-child) { margin-top: 6rem; } } @media screen and (max-width: 768px) { .topPageWhySec__listItemPoc { width: 100%; } } .topPageWhySec__listItemPocBlk { width: 44rem; height: 11.8rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border: 0.1rem solid var(--border-gray); background: var(--border-gray02); font-weight: 700; color: var(--border-gray); border-radius: 1.6rem; -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (max-width: 768px) { .topPageWhySec__listItemPocBlk { margin-top: 0.8rem; width: 100%; height: 8rem; } } .topPageWhySec__listItemArrow { max-width: 5.3rem; } @media screen and (max-width: 768px) { .topPageWhySec__listItemArrow { -webkit-transform: rotate(90deg); transform: rotate(90deg); max-width: 4rem; } } @media screen and (max-width: 768px) { .topPageWhySec__listItemMorPoc { width: 100%; } } .topPageWhySec__listItemMorPocFlex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; border-radius: 1.6rem; background: var(--mainwhite); border: 0.1rem solid var(--red-footer); padding: 0 2.4rem; width: 69.4rem; height: 11.8rem; -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (max-width: 768px) { .topPageWhySec__listItemMorPocFlex { margin-top: 0.8rem; width: 100%; padding-right: 2rem; } } .topPageWhySec__listItemMorPocCheck { display: block; width: 4rem; height: 4rem; background-image: url('data:image/svg+xml,'); background-size: 100% auto; background-repeat: no-repeat; } .topPageWhySec__listItemMorPocTxt { margin-left: 1.2rem; font-size: 1.8rem; font-weight: 700; line-height: 1.5; } .topPageWhySec__listItemMorPocTxt span { color: var(--red-footer); font-size: 2rem; } @media screen and (max-width: 768px) { .topPageWhySec__listItemMorPocTxt.u-spLs { letter-spacing: -0.04em; } .topPageWhySec__listItemMorPocTxt.u-spLs span { letter-spacing: normal; } } /*==================================================================== topPageReasonSec ====================================================================*/ .topPageReasonSec { position: relative; padding: 11.2rem 0 10.2rem; overflow: hidden; } @media screen and (max-width: 768px) { .topPageReasonSec { padding: 6.2rem 0 13.6rem; } } .topPageReasonSec .commonHeader { position: relative; z-index: 2; } .topPageReasonSec .commonHeader__ttl { color: var(--mainwhite); } .topPageReasonSec .commonHeader__ttl span { font-size: 5.2rem; } @media screen and (max-width: 768px) { .topPageReasonSec .commonHeader__ttl span { font-size: 3.2rem; } } .topPageReasonSec__detailsFlex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 2rem; } @media screen and (max-width: 768px) { .topPageReasonSec__detailsFlex { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 1.2rem; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } .topPageReasonSec__detailsReason { color: var(--red-footer); font-family: "Lato", sans-serif; font-size: 1.6rem; line-height: 1.5; font-weight: 900; letter-spacing: 0.15em; border: 0.2rem solid var(--red-footer); border-radius: 2rem; padding: 0.6rem 2rem; text-align: center; background: var(--mainwhite); } .topPageReasonSec__detailsTtl { color: var(--primary-text); font-size: 4.8rem; font-weight: 700; line-height: 1.3; } @media screen and (max-width: 768px) { .topPageReasonSec__detailsTtl { font-size: 3.2rem !important; line-height: 1.3; } } .topPageReasonSec__detailsTtl span { color: var(--red-footer); } .topPageReasonSec__list { margin: 4rem 0 0; padding: 0; list-style: none; } @media screen and (max-width: 768px) { .topPageReasonSec__list { margin-top: 2rem; } } .topPageReasonSec__listItem { position: relative; padding-left: 4rem; color: var(--primary-text); font-size: 3.2rem; font-weight: 700; } @media screen and (max-width: 768px) { .topPageReasonSec__listItem { font-size: 2rem; padding-left: 2.8rem; line-height: 2; } } .topPageReasonSec__listItem::before { content: ""; display: block; width: 3.2rem; height: 3.2rem; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-image: url('data:image/svg+xml,'); background-size: 100% auto; background-repeat: no-repeat; } @media screen and (max-width: 768px) { .topPageReasonSec__listItem::before { top: 0.8rem; -webkit-transform: none; transform: none; width: 2.4rem; height: 2.4rem; } } .topPageReasonSec__listItem:not(:first-child) { margin-top: 1.2rem; } .topPageReasonSec__img { position: absolute; top: -20%; left: 0; display: block; width: 100%; height: 160%; background-image: url("../images/topPage/topPageReasonSec_bg-01.png"); background-size: cover; background-repeat: no-repeat; will-change: transform; } @media screen and (max-width: 768px) { .topPageReasonSec__img { background-image: url("../images/topPage/topPageReasonSec_bg-01_sp.png"); } } .topPageReasonSec__row01 { margin-top: 8rem; padding-top: 3.9rem; position: relative; z-index: 2; } @media screen and (max-width: 768px) { .topPageReasonSec__row01 { margin-top: 4rem; padding-top: 4rem; } } .topPageReasonSec__row01 .topPageReasonSec__detailsTtl { font-size: 4rem; } .topPageReasonSec__row01::after { content: none; position: absolute; right: 0; bottom: -20rem; display: block; width: 57.1rem; height: 21.6rem; background-image: url('data:image/svg+xml,'); background-size: 100% auto; background-repeat: no-repeat; z-index: -1; } @media screen and (max-width: 768px) { .topPageReasonSec__row01::after { content: ""; background-image: url('data:image/svg+xml,'); bottom: -7rem; width: 15.4rem; height: 21.9rem; } } .topPageReasonSec__row01Inner { margin: 0 auto; max-width: 133.6rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 768px) { .topPageReasonSec__row01Inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; padding: 0 2.2rem; gap: 6rem; } } .topPageReasonSec__img01 { max-width: 74.7rem; } @media screen and (max-width: 768px) { .topPageReasonSec__img01 { max-width: 33rem; margin-bottom: -5rem; } } .topPageReasonSec__row02 { margin-top: 12rem; padding-top: 3.9rem; position: relative; z-index: 2; } @media screen and (max-width: 768px) { .topPageReasonSec__row02 { margin-top: 8rem; padding-top: 6rem; } .topPageReasonSec__row02 .topPageReasonSec__listItem { line-height: 1.25; } .topPageReasonSec__row02 .topPageReasonSec__listItem::before { top: 0.2rem; } .topPageReasonSec__row02 .topPageReasonSec__rowFloat { top: -6rem; } } .topPageReasonSec__row02 .topPageReasonSec__detailsTtl { font-size: 4rem; } .topPageReasonSec__row02::after { content: none; position: absolute; left: 0; bottom: -20rem; display: block; width: 57.1rem; height: 21.6rem; background-image: url('data:image/svg+xml,'); background-size: 100% auto; background-repeat: no-repeat; z-index: -1; } @media screen and (max-width: 768px) { .topPageReasonSec__row02::after { content: ""; background-image: url('data:image/svg+xml,'); width: 14.1rem; height: 21.9rem; bottom: -10rem; } } .topPageReasonSec__row02Inner { margin: 0 auto; max-width: 134.2rem; gap: 4.8rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: reverse; -ms-flex-direction: row-reverse; flex-direction: row-reverse; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 768px) { .topPageReasonSec__row02Inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0 2.2rem; } } .topPageReasonSec__img02 { max-width: 64.8rem; margin-top: 7rem; } @media screen and (max-width: 768px) { .topPageReasonSec__img02 { margin-top: 0; max-width: 33rem; } } .topPageReasonSec__row03 { margin-top: 9rem; position: relative; z-index: 2; } @media screen and (max-width: 768px) { .topPageReasonSec__row03 { margin-top: 0; padding-top: 5.5rem; } } .topPageReasonSec__row03::after { content: none; position: absolute; right: 0; bottom: -10rem; display: block; width: 57.1rem; height: 21.6rem; background-image: url('data:image/svg+xml,'); background-size: 100% auto; background-repeat: no-repeat; z-index: -1; } @media screen and (max-width: 768px) { .topPageReasonSec__row03::after { content: ""; background-image: url('data:image/svg+xml,'); width: 15.8rem; height: 21.9rem; bottom: -4rem; } } .topPageReasonSec__row03Inner { margin: 0 auto; max-width: 117.6rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding-left: 0.9rem; } @media screen and (max-width: 768px) { .topPageReasonSec__row03Inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; padding: 0 2.2rem; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } .topPageReasonSec__row03Details { padding-top: 4.8rem; } .topPageReasonSec__rowFloat { position: absolute; top: 0; left: 0; width: 100vw; height: 100%; z-index: -1; } @media screen and (min-width: 769px) { .topPageReasonSec__row01 .topPageReasonSec__rowFloat img { width: 100%; max-height: 70rem; } .topPageReasonSec__row02 .topPageReasonSec__rowFloat img { width: 100%; max-height: 69.5rem; } .topPageReasonSec__row03 .topPageReasonSec__rowFloat img { width: 100%; max-height: 63.8rem; } } @media screen and (max-width: 768px) { .topPageReasonSec__rowFloat { height: 100%; } } .topPageReasonSec__img03 { max-width: 36rem; } @media screen and (max-width: 768px) { .topPageReasonSec__img03 { max-width: 16.5rem; margin-left: auto; } } .topPageReasonSec__img03 img { margin-top: -4.8rem; } @media screen and (max-width: 768px) { .topPageReasonSec__img03 img { margin-top: 0; } } /*==================================================================== topPageWYGSec ====================================================================*/ .topPageWYGSec { position: relative; padding: 11.2rem 4rem; background: var(--white-border); } @media screen and (max-width: 768px) { .topPageWYGSec { padding: 6.6rem 0; } } .topPageWYGSec::after { content: ""; position: absolute; bottom: -11.2rem; left: 0; display: block; width: 100%; min-height: 53.3rem; height: 37.01vw; background-image: url("../images/topPage/topPageWYGSec_bg-01.png"); background-size: 100% auto; background-repeat: no-repeat; z-index: 1; } @media screen and (max-width: 768px) { .topPageWYGSec::after { bottom: -10rem; height: 134.05rem; background-image: url("../images/topPage/topPageWYGSec_bg-01_sp.png"); } } .topPageWYGSec__inner { margin: 0 auto; max-width: 128rem; z-index: 2; position: relative; } .topPageWYGSec__txt { margin: 2.4rem 0 0; font-size: 2rem; font-weight: 700; text-align: center; } @media screen and (max-width: 768px) { .topPageWYGSec__txt { font-size: 1.6rem; line-height: 1.5; } } .topPageWYGSec__list { margin: 11.2rem auto 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 2rem; } @media screen and (max-width: 768px) { .topPageWYGSec__list { margin-top: 12rem; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 8rem; } } .topPageWYGSec__listItem { position: relative; padding: 16.7rem 0 5rem; width: 27rem; height: 27rem; background: var(--mainwhite); border-radius: 50%; -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 50px rgba(120, 143, 156, 0.25); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 50px rgba(120, 143, 156, 0.25); } .topPageWYGSec__listItemFgr { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .topPageWYGSec__listItemFgr01 { top: -3rem; width: 16rem; } .topPageWYGSec__listItemFgr02 { top: -5.6rem; width: 18rem; } .topPageWYGSec__listItemFgr03 { top: -3rem; width: 16rem; } .topPageWYGSec__listItemFgr04 { top: -2.8rem; width: 20rem; } .topPageWYGSec__listItemTxt { color: var(--third-text); font-size: 2rem; font-weight: 700; line-height: 1.3; text-align: center; } .topPageWYGSec__listItemTxt span { color: var(--blue); } /*==================================================================== topPageCaseSec ====================================================================*/ .topPageCaseSec { background: var(--white-border); padding: 11.2rem 3rem; } @media screen and (max-width: 768px) { .topPageCaseSec { padding: 23rem 0 6rem; } } .topPageCaseSec__inner { margin: 0 auto; max-width: 134.8rem; } .topPageCaseSec__swiper { position: relative; margin: 8rem auto 0; } @media screen and (max-width: 768px) { .topPageCaseSec__swiper { margin-top: 6.4rem; } } .topPageCaseSec__swiperWrapper { padding: 5.2rem 0; } @media screen and (max-width: 768px) { .topPageCaseSec__swiperWrapper { padding: 1.8rem 0; } } .topPageCaseSec__swiperItemInner { background: var(--mainwhite); padding: 3.84rem 2.88rem; border-radius: 2rem; height: 100%; min-height: 63rem; -webkit-transition: all 0.3s ease; transition: all 0.3s ease; -webkit-transform-origin: bottom center; transform-origin: bottom center; } @media screen and (max-width: 768px) { .topPageCaseSec__swiperItemInner { padding: 2.4rem 1.6rem; min-height: 39.8rem; } } .topPageCaseSec { /* .swiper-slide { width: 43.6rem ; height: 52.4rem; color: var(--primary-text); opacity: 0; margin-top: 0; margin-bottom: 0; transition: .3s ease; @include u-mqMax { width: 28.6rem; height: 33.4rem; } } */ } .topPageCaseSec .swiper-slide { transition-property: -webkit-transform; -webkit-transition-property: -webkit-transform; transition-property: transform; transition-property: transform, -webkit-transform; transition-property: transform, -webkit-transform; -webkit-transition: all 1s ease; transition: all 1s ease; } .topPageCaseSec .swiper-slide:not(.swiper-slide-active) { -webkit-transform: scale(0.83); margin-right: 0; } .topPageCaseSec .swiper-slide.swiper-slide-prev { -webkit-transform: scale(0.83) translate(20px, 0); transform: scale(0.83) translate(20px, 0); } @media screen and (max-width: 768px) { .topPageCaseSec .swiper-slide.swiper-slide-prev { -webkit-transform: scale(0.83) translate(75px, 0); transform: scale(0.83) translate(75px, 0); } } .topPageCaseSec .swiper-slide.swiper-slide-next { -webkit-transform: scale(0.83) translate(-20px, 0); transform: scale(0.83) translate(-20px, 0); } @media screen and (max-width: 768px) { .topPageCaseSec .swiper-slide.swiper-slide-next { -webkit-transform: scale(0.83) translate(-75px, 0); transform: scale(0.83) translate(-75px, 0); } } .topPageCaseSec .swiper-slide-active { opacity: 1; } @media screen and (max-width: 768px) { .topPageCaseSec .swiper-slide-active { z-index: 5; } } .topPageCaseSec .swiper-slide-active .topPageCaseSec__swiperItemInner { background: var(--primary-text); color: var(--mainwhite); } .topPageCaseSec .swiper-slide-active .topPageCaseSec__swiperItemImg { -webkit-filter: brightness(0) invert(1); filter: brightness(0) invert(1); } @media screen and (max-width: 768px) { .topPageCaseSec .swiper-slide-active .topPageCaseSec__swiperItemImg { margin-right: 2rem; } } @media screen and (max-width: 768px) { .topPageCaseSec .swiper-slide-active .topPageCaseSec__swiperItemFlexCat01, .topPageCaseSec .swiper-slide-active .topPageCaseSec__swiperItemFlexCat02 { margin-bottom: 0.5rem; } } .topPageCaseSec .swiper-slide-active .topPageCaseSec__swiperItemFlexCat01 { padding: 0.96rem 2.4rem; } @media screen and (max-width: 768px) { .topPageCaseSec .swiper-slide-active .topPageCaseSec__swiperItemFlexCat01 { padding: 0.88rem 1.32rem; letter-spacing: 0.015em; } } .topPageCaseSec .swiper-slide-active .topPageCaseSec__swiperItemFlexCat02 { padding: 0.96rem 2.4rem; background: var(--mainwhite); border: 0; } @media screen and (max-width: 768px) { .topPageCaseSec .swiper-slide-active .topPageCaseSec__swiperItemFlexCat02 { padding: 0.88rem 1.32rem; } } .topPageCaseSec .swiper-slide-active .topPageCaseSec__swiperItemTtl { margin-top: 2.88rem; color: var(--mainwhite); } @media screen and (max-width: 768px) { .topPageCaseSec .swiper-slide-active .topPageCaseSec__swiperItemTtl { margin-top: 1.7rem; } } .topPageCaseSec .swiper-slide-active .topPageCaseSec__swiperItemTxt { margin-top: 2.88rem; color: var(--mainwhite); font-weight: 700; } @media screen and (max-width: 768px) { .topPageCaseSec .swiper-slide-active .topPageCaseSec__swiperItemTxt { margin-top: 1.7rem; } } .topPageCaseSec .swiper-slide-prev, .topPageCaseSec .swiper-slide-next { opacity: 1; } .topPageCaseSec__swiperItemFlex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .topPageCaseSec__swiperItemImg { max-width: 9.6rem; -webkit-transition: 0.3s ease; transition: 0.3s ease; } @media screen and (max-width: 768px) { .topPageCaseSec__swiperItemImg { max-width: 6.6rem; } } .topPageCaseSec__swiperItemFlexCat01 { padding: 0.8rem 2rem; display: block; background: var(--red-footer); color: var(--mainwhite); font-family: "Lato", sans-serif; font-size: 1.44rem; font-weight: 900; text-align: center; border-radius: 2rem; -webkit-transition: 0.3s ease; transition: 0.3s ease; } @media screen and (max-width: 768px) { .topPageCaseSec__swiperItemFlexCat01 { font-size: 0.88rem; padding: 0.8rem 1.2rem; } } .topPageCaseSec__swiperItemFlexCat02 { margin-left: 1.2rem; padding: 0.6rem 2rem; display: block; background: var(--mainwhite); color: var(--primary-text); border: 0.2rem solid var(--primary-text); font-family: "Lato", sans-serif; font-size: 1.44rem; font-weight: 900; text-align: center; border-radius: 2rem; -webkit-transition: 0.3s ease; transition: 0.3s ease; } @media screen and (max-width: 768px) { .topPageCaseSec__swiperItemFlexCat02 { font-size: 0.88rem; margin-left: 0.88rem; padding: 0.6rem 1.2rem; } } .topPageCaseSec__swiperItemTtl { margin: 2.4rem 0 0; color: var(--primary-text); font-size: 2.88rem; font-weight: 700; line-height: 1.5; text-align: justify; -webkit-transition: 0.3s ease; transition: 0.3s ease; } @media screen and (max-width: 768px) { .topPageCaseSec__swiperItemTtl { margin-top: 1.6rem; font-size: 1.98rem; } } .topPageCaseSec__swiperItemTxt { margin: 2.4rem auto 0; color: var(--primary-text); font-size: 2.16rem; font-weight: 500; line-height: 1.5; text-align: justify; -webkit-transition: 0.3s ease; transition: 0.3s ease; } @media screen and (max-width: 768px) { .topPageCaseSec__swiperItemTxt { margin-top: 1.6rem; font-size: 1.54rem; } } .topPageCaseSec__swiperPagination { margin: 2rem auto 0; display: -webkit-box; display: -ms-flexbox; display: flex; top: auto; bottom: auto; left: auto; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; } @media screen and (max-width: 768px) { .topPageCaseSec__swiperPagination { margin: 0; width: -webkit-max-content !important; width: -moz-max-content !important; width: max-content !important; } } .topPageCaseSec__swiperPagination .swiper-pagination-bullet { opacity: 1; background: var(--gray); } .topPageCaseSec__swiperPagination .swiper-pagination-bullet-active { background: var(--primary-text); } .topPageCaseSec__swiperPrev, .topPageCaseSec__swiperNext { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: block; width: 4rem; height: 4rem; background-image: url('data:image/svg+xml,'); background-size: 100% auto; cursor: pointer; z-index: 10; } @media screen and (max-width: 768px) { .topPageCaseSec__swiperPrev, .topPageCaseSec__swiperNext { -webkit-transform: none; transform: none; bottom: 0; top: auto; display: none; position: relative; } } .topPageCaseSec__swiperPrev { left: 0; -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } @media screen and (max-width: 768px) { .topPageCaseSec__swiperPrev { -webkit-transform: rotate(180deg); transform: rotate(180deg); } } .topPageCaseSec__swiperNext { right: 0; } @media screen and (max-width: 768px) { .topPageCaseSec__swiperFlexBtn { margin-top: 2rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 2rem; } } .topPageCaseSec__swiperFlexBtn .topPageCaseSec__swiperPrev, .topPageCaseSec__swiperFlexBtn .topPageCaseSec__swiperNext { display: none; } @media screen and (max-width: 768px) { .topPageCaseSec__swiperFlexBtn .topPageCaseSec__swiperPrev, .topPageCaseSec__swiperFlexBtn .topPageCaseSec__swiperNext { display: block; } } /*==================================================================== topPageFeaturesSec ====================================================================*/ .topPageFeaturesSec { padding: 11.2rem 4rem; background-color: var(--mainwhite); } @media screen and (max-width: 768px) { .topPageFeaturesSec { padding: 6.6rem 0; } } .topPageFeaturesSec .commonHeader__ttl { color: var(--primary-text); } .topPageFeaturesSec__inner { margin: 0 auto; max-width: 128rem; } .topPageFeaturesSec__container { margin: 6.5rem auto 0; } @media screen and (max-width: 768px) { .topPageFeaturesSec__container { padding: 0; margin: 8rem 1.6rem 0; overflow-x: scroll; } } @media screen and (max-width: 768px) { .topPageFeaturesSec__img { padding-bottom: 0.8rem; } .topPageFeaturesSec__img img { max-width: 73rem; } .topPageFeaturesSec__img { /* img { width: auto; height: 86rem; max-width: none; } */ } } /*==================================================================== topPageOffshoreSec ====================================================================*/ .topPageOffshoreSec { position: relative; background-color: var(--mainwhite); padding: 6.6rem 0 11.2rem; color: var(--primary-text); overflow: hidden; } .topPageOffshoreSec::before { content: ""; position: absolute; bottom: -1rem; left: 0; display: block; width: 44.3rem; height: 36.8rem; background-image: url("../images/topPage/topPageOffshoreSec_bg-01.png"); background-size: 100% auto; background-repeat: no-repeat; } @media screen and (max-width: 768px) { .topPageOffshoreSec::before { content: none; } } .topPageOffshoreSec::after { content: ""; position: absolute; top: 0; right: 0; display: block; width: 39.3rem; height: 47.9rem; background-image: url("../images/topPage/topPageOffshoreSec_bg-02.png"); background-size: 100% auto; background-repeat: no-repeat; } @media screen and (max-width: 768px) { .topPageOffshoreSec::after { content: none; } } @media screen and (max-width: 768px) { .topPageOffshoreSec { padding: 6.6rem 0; margin-top: 2rem; background-image: url("../images/topPage/topPageOffshoreSec_bg-01_sp.png"); background-size: 100% auto; } } .topPageOffshoreSec__inner { margin: 0 auto; width: 100%; max-width: 98rem; } .topPageOffshoreSec__bnrTxt { display: block; font-size: 2.4rem; font-weight: 700; line-height: 1.5; text-align: center; } @media screen and (max-width: 768px) { .topPageOffshoreSec__bnrTxt { font-size: 1.8rem; } } .topPageOffshoreSec__bnrFlex { margin: 6.4rem auto 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.8rem; } @media screen and (max-width: 768px) { .topPageOffshoreSec__bnrFlex { margin-top: 2.4rem; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 0.4rem; } } .topPageOffshoreSec__bnrFlexTxt { font-size: 4.8rem; font-weight: 700; line-height: 1.5; } @media screen and (max-width: 768px) { .topPageOffshoreSec__bnrFlexTxt { font-size: 3.2rem; } } .topPageOffshoreSec__bnrFlexTxt span { position: relative; } .topPageOffshoreSec__bnrFlexTxt span::before { content: ""; position: absolute; top: -0.7rem; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: block; width: 1.4rem; height: 1.4rem; background: var(--red-footer); border-radius: 50%; } @media screen and (max-width: 768px) { .topPageOffshoreSec__bnrFlexTxt span::before { content: none; } } .topPageOffshoreSec__bnrFlexRed { background: var(--red-footer); color: var(--mainwhite); font-size: 4.8rem; font-weight: 700; text-align: center; padding: 0 1.2rem; } @media screen and (max-width: 768px) { .topPageOffshoreSec__bnrFlexRed { font-size: 3.2rem; } } .topPageOffshoreSec__mainTxt { margin: 6.4rem auto 0; font-size: 2.4rem; line-height: 1.35; font-weight: 700; text-align: center; } @media screen and (max-width: 768px) { .topPageOffshoreSec__mainTxt { margin-top: 2.4rem; font-size: 1.8rem; } } /*==================================================================== topPageFreeConSec ====================================================================*/ .topPageFreeConSec { padding: 11.2rem 4rem; background-color: var(--primary-text); background-image: url("../images/topPage/topPageFreeConSec_bg-01.png"); background-size: 114.2rem auto; background-repeat: no-repeat; } @media screen and (max-width: 768px) { .topPageFreeConSec { padding: 6.6rem 1.6rem 0; } } .topPageFreeConSec__inner { position: relative; margin: 0 auto; width: 100%; max-width: 128rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 1rem; } @media screen and (max-width: 768px) { .topPageFreeConSec__inner { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .topPageFreeConSec__ttl { color: var(--mainwhite); font-size: 4.8rem; font-weight: 700; line-height: 1.2; } @media screen and (max-width: 768px) { .topPageFreeConSec__ttl { font-size: 3.2rem; letter-spacing: -0.01em; } } .topPageFreeConSec__btn { position: relative; margin: 8rem 0 0; padding: 0 5.8rem 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--mainwhite); width: 50rem; height: 8.9rem; background: var(--red-footer); border-radius: 5rem; -webkit-box-shadow: 0px 0px 0px 5px rgba(var(--mainwhite-rgb), 0.15), 0px 20px 20px rgba(var(--mainblack-rgb), 0.2), inset 0px -10px 10px rgba(var(--mainblack-rgb), 0.3), inset 0px 10px 10px rgba(var(--mainwhite-rgb), 0.2); box-shadow: 0px 0px 0px 5px rgba(var(--mainwhite-rgb), 0.15), 0px 20px 20px rgba(var(--mainblack-rgb), 0.2), inset 0px -10px 10px rgba(var(--mainblack-rgb), 0.3), inset 0px 10px 10px rgba(var(--mainwhite-rgb), 0.2); -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .topPageFreeConSec__btn:hover { background: var(--redhover); -webkit-box-shadow: 0px 0px 0px 7px rgba(255, 255, 255, 0.15), 0px 20px 20px rgba(0, 0, 0, 0.2), inset 0px -10px 10px rgba(0, 0, 0, 0.3), inset 0px 10px 10px rgba(255, 255, 255, 0.2); box-shadow: 0px 0px 0px 7px rgba(255, 255, 255, 0.15), 0px 20px 20px rgba(0, 0, 0, 0.2), inset 0px -10px 10px rgba(0, 0, 0, 0.3), inset 0px 10px 10px rgba(255, 255, 255, 0.2); } .topPageFreeConSec__btn::after { content: ""; position: absolute; top: 50%; right: 3.1rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: block; width: 2.6rem; height: 2.6rem; background-image: url('data:image/svg+xml,'); background-size: 1.95rem auto; background-repeat: no-repeat; background-position: center; } @media screen and (max-width: 768px) { .topPageFreeConSec__btn::after { right: 1.85rem; } } @media screen and (max-width: 768px) { .topPageFreeConSec__btn { margin: 6rem auto 0; width: 31.1rem; height: 7.2rem; padding-left: 1.85rem; padding-right: 5.2rem; } } .topPageFreeConSec__btnSpan { font-size: 2.6rem; font-weight: 700; letter-spacing: 0.002em; } @media screen and (max-width: 768px) { .topPageFreeConSec__btnSpan { font-size: 2rem; } } .topPageFreeConSec__img { margin-top: -7.4rem; margin-bottom: -23.6rem; right: 0; width: 59.6rem; } @media screen and (max-width: 768px) { .topPageFreeConSec__img { margin-top: 4.4rem; margin-left: auto; margin-right: -1.6rem; margin-bottom: -9.1rem; width: 30.6rem; } } /*==================================================================== topPageFlowSec ====================================================================*/ .topPageFlowSec { background: var(--mainwhite); padding: 11.2rem 3rem; } @media screen and (max-width: 768px) { .topPageFlowSec { padding: 22.4rem 4.8rem 6.6rem; } } .topPageFlowSec__inner { margin: 0 auto; max-width: 131.2rem; } .topPageFlowSec__list { margin: 8rem auto 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 3rem; } @media screen and (max-width: 768px) { .topPageFlowSec__list { margin-top: 6rem; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; } } .topPageFlowSec__listItem { position: relative; width: calc(33.3333333333% - 2rem); background: var(--white-border); border-radius: 3.2rem; padding: 2rem; min-height: 36rem; } @media screen and (max-width: 768px) { .topPageFlowSec__listItem { width: 100%; padding: 1.5rem 1.7rem 2.8rem; min-height: auto; } } .topPageFlowSec__listItem:nth-of-type(1) .topPageFlowSec__listItemTxt:first-of-type { margin-top: 3.3rem; } @media screen and (max-width: 768px) { .topPageFlowSec__listItem:nth-of-type(1) .topPageFlowSec__listItemTxt:first-of-type { margin-top: 2.1rem; } } .topPageFlowSec__listItem:nth-of-type(1)::after { content: ""; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: -3rem; width: 3rem; height: 3rem; background-image: url('data:image/svg+xml,'); background-size: 100% auto; background-repeat: no-repeat; } @media screen and (max-width: 768px) { .topPageFlowSec__listItem:nth-of-type(1)::after { top: auto; bottom: -3rem; right: auto; left: 50%; -webkit-transform: translateX(-50%) rotate(90deg); transform: translateX(-50%) rotate(90deg); } } .topPageFlowSec__listItem:nth-of-type(2)::after { content: ""; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: -3rem; width: 3rem; height: 3rem; background-image: url('data:image/svg+xml,'); background-size: 100% auto; background-repeat: no-repeat; } @media screen and (max-width: 768px) { .topPageFlowSec__listItem:nth-of-type(2)::after { top: auto; bottom: -3rem; right: auto; left: 50%; -webkit-transform: translateX(-50%) rotate(90deg); transform: translateX(-50%) rotate(90deg); } } .topPageFlowSec__listItemStep { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 10.3rem; height: 4rem; background: var(--mainwhite); font-family: "Lato", sans-serif; color: var(--red-footer); font-size: 1.6rem; font-weight: 900; line-height: 1.5; letter-spacing: 0.15em; text-align: center; border-radius: 2rem; border: 0.2rem solid var(--red-footer); } .topPageFlowSec__listItemFgr { margin: 0 auto; max-width: 14rem; } @media screen and (max-width: 768px) { .topPageFlowSec__listItemFgr { margin-top: -1rem; } } .topPageFlowSec__listItemTxt { margin-top: 1.2rem; color: var(--second-text); font-size: 2.4rem; font-weight: 700; line-height: 1.3; text-align: center; } .topPageFlowSec__listItemTxt:first-of-type { margin-top: 2.1rem; } @media screen and (max-width: 768px) { .topPageFlowSec__listItemTxt { margin-top: 0.8rem; font-size: 1.8rem; } } /*==================================================================== topPageFaqSec ====================================================================*/ .topPageFaqSec { padding: 11.2rem 11.5rem; background: var(--white-border); } @media screen and (max-width: 768px) { .topPageFaqSec { padding: 6.6rem 3.2rem; } } .topPageFaqSec__inner { margin: 0 auto; width: 100%; max-width: 98rem; } .topPageFaqSec__list { margin: 8rem auto 0; width: 100%; max-width: 98rem; } @media screen and (max-width: 768px) { .topPageFaqSec__list { margin-top: 6.4rem; } } .topPageFaqSec__listItem { padding: 3.2rem 2.6rem; background: var(--mainwhite); border-radius: 2rem; -webkit-box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 50px rgba(120, 143, 156, 0.25); box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25), 0px 4px 50px rgba(120, 143, 156, 0.25); } @media screen and (max-width: 768px) { .topPageFaqSec__listItem { padding: 2rem 1.6rem; } } .topPageFaqSec__listItem:not(:first-child) { margin-top: 2.4rem; } .topPageFaqSec__listItemTtl { position: relative; padding-left: 2.5rem; font-size: 2rem; line-height: 1.5; font-weight: 700; } @media screen and (max-width: 768px) { .topPageFaqSec__listItemTtl { font-size: 1.6rem; padding-right: 3rem; } } .topPageFaqSec__listItemTtl.is-active::after { -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } .topPageFaqSec__listItemTtl::before { content: "Q"; position: absolute; top: 0; left: 0; display: block; color: var(--red-footer); font-family: "Lato", sans-serif; font-weight: 800; line-height: 1.5; } .topPageFaqSec__listItemTtl::after { content: ""; position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: block; width: 2rem; height: 1.1rem; transform: translateY(-50%); background-image: url('data:image/svg+xml,'); background-size: 100% auto; background-repeat: no-repeat; -webkit-transition: all 0.2s linear; transition: all 0.2s linear; } @media screen and (max-width: 768px) { .topPageFaqSec__listItemTtl::after { width: 1.8rem; height: 1rem; } } .topPageFaqSec__listItemCont { margin-top: 1.6rem; display: none; font-size: 1.8rem; font-weight: 500; line-height: 1.5; } @media screen and (max-width: 768px) { .topPageFaqSec__listItemCont { font-size: 1.4rem; } } /*==================================================================== topPageForwardSec ====================================================================*/ .topPageForwardSec { padding: 11.2rem 4rem 10rem; color: var(--mainwhite); background-color: var(--primary-text); background-image: url("../images/topPage/topPageForwardSec_bg-01.png"); background-size: cover; background-repeat: no-repeat; } @media screen and (max-width: 768px) { .topPageForwardSec { padding: 6.6rem 1.6rem; background-image: url("../images/topPage/topPageForwardSec_bg-01_sp.png"); } } .topPageForwardSec__ttl { font-size: 4.8rem; font-weight: 700; line-height: 1.5; text-align: center; } @media screen and (max-width: 768px) { .topPageForwardSec__ttl { font-size: 3.2rem; } } .topPageForwardSec__bnr { margin: 6.4rem auto 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 2.4rem; } @media screen and (max-width: 768px) { .topPageForwardSec__bnr { margin-top: 4rem; gap: 1.6rem; } } .topPageForwardSec__bnrItem { padding-left: 0.7rem; color: var(--primary-text); font-weight: 700; width: 39.6rem; height: 11.4rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; background-image: url('data:image/svg+xml,'); background-size: 100% auto; background-repeat: no-repeat; -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (max-width: 768px) { .topPageForwardSec__bnrItem { width: 25.4rem; height: 7.3rem; } } .topPageForwardSec__bnrItem:nth-child(2) { gap: 0.5rem; } .topPageForwardSec__bnrItemBg { font-size: 4.8rem; } @media screen and (max-width: 768px) { .topPageForwardSec__bnrItemBg { font-size: 3.2rem; } } .topPageForwardSec__bnrItemBg02 { font-size: 6.4rem; } @media screen and (max-width: 768px) { .topPageForwardSec__bnrItemBg02 { font-size: 4rem; } } .topPageForwardSec__bnrItemTxt01 { display: block; font-size: 3.2rem; letter-spacing: -0.04em; padding-left: 0.5rem; } @media screen and (max-width: 768px) { .topPageForwardSec__bnrItemTxt01 { font-size: 2rem; } } .topPageForwardSec__bnrItemTxt02 { display: block; font-size: 2.4rem; } @media screen and (max-width: 768px) { .topPageForwardSec__bnrItemTxt02 { font-size: 1.8rem; } } .topPageForwardSec__bnrItemFlex { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: end; -ms-flex-align: end; align-items: flex-end; } .topPageForwardSec__txt { margin: 6.4rem auto 0; text-align: center; font-size: 3.2rem; font-weight: 700; line-height: 1.5; } @media screen and (max-width: 768px) { .topPageForwardSec__txt { margin-top: 4rem; font-size: 2rem; } } .topPageForwardSec__btn { position: relative; margin: 6.4rem auto 0; padding: 0 5.8rem 0 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; color: var(--mainwhite); width: 50rem; height: 10rem; background: var(--purple); border-radius: 5rem; -webkit-box-shadow: 0px 0px 0px 5px rgba(var(--mainwhite-rgb), 0.15), 0px 20px 20px rgba(var(--mainblack-rgb), 0.2), inset 0px -10px 10px rgba(var(--mainblack-rgb), 0.3), inset 0px 10px 10px rgba(var(--mainwhite-rgb), 0.2); box-shadow: 0px 0px 0px 5px rgba(var(--mainwhite-rgb), 0.15), 0px 20px 20px rgba(var(--mainblack-rgb), 0.2), inset 0px -10px 10px rgba(var(--mainblack-rgb), 0.3), inset 0px 10px 10px rgba(var(--mainwhite-rgb), 0.2); -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .topPageForwardSec__btn:hover { background: var(--purplehover); -webkit-box-shadow: 0px 0px 0px 7px rgba(255, 255, 255, 0.15), 0px 20px 20px rgba(0, 0, 0, 0.2), inset 0px -10px 10px rgba(0, 0, 0, 0.3), inset 0px 10px 10px rgba(255, 255, 255, 0.2); box-shadow: 0px 0px 0px 7px rgba(255, 255, 255, 0.15), 0px 20px 20px rgba(0, 0, 0, 0.2), inset 0px -10px 10px rgba(0, 0, 0, 0.3), inset 0px 10px 10px rgba(255, 255, 255, 0.2); } .topPageForwardSec__btn::after { content: ""; position: absolute; top: 50%; right: 5.8rem; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: block; width: 2.6rem; height: 2.6rem; background-image: url('data:image/svg+xml,'); background-size: 1.95rem auto; background-repeat: no-repeat; background-position: center; } @media screen and (max-width: 768px) { .topPageForwardSec__btn::after { right: 2.3rem; } } @media screen and (max-width: 768px) { .topPageForwardSec__btn { margin-top: 7.2rem; width: 31.1rem; height: 7.2rem; padding-left: 1.8rem; padding-right: 5rem; } } .topPageForwardSec__btnSpan { font-size: 2.6rem; font-weight: 700; letter-spacing: 0.002em; } @media screen and (max-width: 768px) { .topPageForwardSec__btnSpan { font-size: 2rem; } } .contactPageSec01 { padding: 23.8rem 4.5rem 10rem; background: linear-gradient(249.62deg, #0334aa 51.66%, #173e9e 92.7%); position: relative; } .contactPageSec01 .wpcf7-form-control-wrap { position: unset; } .contactPageSec01 .wpcf7-response-output { display: none; } .contactPageSec01 .wpcf7-spinner { display: none; } .contactPageSec01 .wpcf7-list-item-label { display: none; } .contactPageSec01 .wpcf7-not-valid-tip { position: absolute; bottom: 100%; left: 0; font-size: 1rem; font-weight: 700; width: -webkit-max-content; width: -moz-max-content; width: max-content; } .contactPageSec01 .wpcf7-list-item { margin: 0; } @media screen and (max-width: 768px) { .contactPageSec01 { padding: 14rem 1.6rem 6.6rem; } } .contactPageSec01 .commonHeader__ttl { font-size: 5.2rem; } @media screen and (max-width: 768px) { .contactPageSec01 .commonHeader__ttl { font-size: 3.2rem; } } .contactPageSec01::before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background-image: url("../images/contactPage/contactPageSec01_bg-01.png"); background-size: cover; background-repeat: no-repeat; } @media screen and (max-width: 768px) { .contactPageSec01::before { background-image: url("../images/contactPage/contactPageSec01_bg-01_sp.png"); } } .is_page__thanks .contactPageSec01::before { background-image: url("../images/contactPage/contactPageSec01_bg-02.png"); } @media screen and (max-width: 768px) { .is_page__thanks .contactPageSec01::before { background-image: url("../images/contactPage/contactPageSec01_bg-02_sp.png"); } } .contactPageSec01__inner { position: relative; margin: 0 auto; max-width: 126rem; z-index: 2; } .contactPageSec01__blk { background: var(--mainwhite); padding: 6rem 6.4rem; -webkit-box-sizing: border-box; box-sizing: border-box; border-radius: 3.2rem; } @media screen and (max-width: 768px) { .contactPageSec01__blk { padding: 6rem 1.6rem 8rem; border-radius: 1.6rem; } } .contactPageSec01__form { margin: 8rem auto 0; max-width: 82rem; } @media screen and (max-width: 768px) { .contactPageSec01__form { margin-top: 6.4rem; } } .contactPageSec01__formItem { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 6rem; } .contactPageSec01__formItem:has(.wpcf7-not-valid) .contactPageSec01__formInputTxt { border: 1px solid var(--red-footer); } .contactPageSec01__formItem:has(.wpcf7-not-valid) .contactPageSec01__formInputTextarea { border: 1px solid var(--red-footer); } @media screen and (max-width: 768px) { .contactPageSec01__formItem { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; gap: 0.8rem; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } } .contactPageSec01__formItem:not(:first-child) { margin-top: 2.4rem; } .contactPageSec01__formHd { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: end; -ms-flex-pack: end; justify-content: flex-end; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 1.2rem; min-width: 19.8rem; } @media screen and (max-width: 768px) { .contactPageSec01__formHd { -webkit-box-pack: start; -ms-flex-pack: start; justify-content: flex-start; } } .contactPageSec01__formHdTxt { font-size: 1.8rem; font-weight: 700; line-height: 1; text-align: right; } @media screen and (max-width: 768px) { .contactPageSec01__formHdTxt { font-size: 1.4rem; text-align: left; } } .contactPageSec01__formHdReq { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 5.6rem; height: 2.8re; border: 0.1rem solid var(--red-footer); border-radius: 0.4rem; color: var(--red-footer); font-size: 1.6rem; font-weight: 500; line-height: 1.5; } @media screen and (max-width: 768px) { .contactPageSec01__formHdReq { font-size: 1.2rem; width: 4rem; height: 2.2rem; } } .contactPageSec01__formHdReq.u-hide { opacity: 0; } .contactPageSec01__formInput { position: relative; width: calc(100% - 19.8rem - 6rem); } @media screen and (max-width: 768px) { .contactPageSec01__formInput { width: 100%; } } .contactPageSec01__formInputTxt { padding: 1.2rem; width: 100%; border-radius: 0.4rem; border: 0.1rem solid var(--darkgray); outline: none; font-weight: 500; font-size: 1.8rem; line-height: 1.5; } @media screen and (max-width: 768px) { .contactPageSec01__formInputTxt { font-size: 1.4rem; } } .contactPageSec01__formInputTextarea { position: relative; padding: 1.2rem; width: 100%; border-radius: 0.4rem; border: 0.1rem solid var(--darkgray); outline: none; font-weight: 500; font-size: 1.8rem; line-height: 1.5; resize: none; height: 24rem; } @media screen and (max-width: 768px) { .contactPageSec01__formInputTextarea { font-size: 1.4rem; } } .contactPageSec01__formCheckbox { position: relative; margin: 3.2rem auto 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; gap: 0.6rem; width: -webkit-max-content; width: -moz-max-content; width: max-content; } .contactPageSec01__formCheckbox .wpcf7-not-valid-tip { bottom: 100%; } .contactPageSec01__formCheckbox a { color: var(--text); text-decoration: underline; text-underline-offset: 0.2rem; margin-left: 0.6rem; margin-right: -0.2rem; display: inline-block; } @media screen and (min-width: 769px) { .contactPageSec01__formCheckbox a { -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } } @media screen and (min-width: 769px) { .contactPageSec01__formCheckbox a:hover { opacity: 0.6; } } @media screen and (max-width: 768px) { .contactPageSec01__formCheckbox a { margin-bottom: 0.3rem; } } @media screen and (max-width: 768px) { .contactPageSec01__formCheckbox { margin-top: 2.4rem; } } .contactPageSec01__formCheckboxTxt { color: var(--text); font-size: 1.8rem; font-weight: 500; } /* .contactPageSec01__formCheckbox input[type="checkbox"]:checked { background: url(../images/contactform-check.svg) no-repeat center center; background-size: 70%; } */ /* .contactPageSec01__formCheckbox input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 1.875rem; height: 1.875rem; padding: 0; border-radius: 0.3125rem; border: 1px solid #D9D9D9; cursor: pointer; background-color: #fff; } */ .contactPageSec01__formCheckbox input[type="checkbox"] { width: 2.75rem; height: 2.75rem; appearance: none; /* remove default checkbox */ -webkit-appearance: none; border: 2px solid #D9D9D9; border-radius: 5px; cursor: pointer; position: relative; } .contactPageSec01__formCheckbox input[type="checkbox"]:checked { background-image: url("../images/common/checkmark.png"); /* your image path */ background-repeat: no-repeat; background-position: center; background-size: 20px 20px; } @media screen and (max-width: 768px) { .contactPageSec01__formCheckboxTxt { font-size: 1.4rem; } } .contactPageSec01__return { margin: 8rem 0 0; display: inline-block; position: relative; padding-left: 2.8rem; color: var(--third-text); font-size: 1.8rem; line-height: 1.5; font-weight: 500; } @media screen and (min-width: 769px) { .contactPageSec01__return { -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } } @media screen and (min-width: 769px) { .contactPageSec01__return:hover { opacity: 0.6; } } @media screen and (max-width: 768px) { .contactPageSec01__return { margin-top: 6.4rem; font-size: 1.4rem; } } .contactPageSec01__return::before { content: ""; position: absolute; top: 50%; left: 0; display: block; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 2.4rem; height: 2.4rem; background-image: url('data:image/svg+xml,'); background-size: 100% auto; background-repeat: no-repeat; } .contactPageSec01__formBack { margin: 8.4rem auto -5rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 50rem; height: 8.9rem; border-radius: 5rem; background-color: var(--red-footer); border: 0; color: var(--mainwhite); font-size: 2.6rem; font-weight: 700; -webkit-box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.15), 0px 20px 20px rgba(0, 0, 0, 0.2), inset 0px -10px 10px rgba(0, 0, 0, 0.3), inset 0px 10px 10px rgba(255, 255, 255, 0.2); box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.15), 0px 20px 20px rgba(0, 0, 0, 0.2), inset 0px -10px 10px rgba(0, 0, 0, 0.3), inset 0px 10px 10px rgba(255, 255, 255, 0.2); } @media screen and (min-width: 769px) { .contactPageSec01__formBack { -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } } @media screen and (min-width: 769px) { .contactPageSec01__formBack:hover { opacity: 0.6; } } @media screen and (max-width: 768px) { .contactPageSec01__formBack { margin-top: 4.8rem; width: 100%; height: 7.2rem; font-size: 2rem; } } .contactPageSec01__formRecaptcha { margin: 3.2rem auto 0; width: -webkit-max-content; width: -moz-max-content; width: max-content; } @media screen and (max-width: 768px) { .contactPageSec01__formRecaptcha { margin-top: 2.4rem; } } .contactPageSec01__formSubmit { margin: 8.4rem auto 0; display: block; width: 50rem; height: 8.9rem; border-radius: 5rem; background-color: var(--purple); border: 0; color: var(--mainwhite); font-size: 2.6rem; font-weight: 700; -webkit-box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.15), 0px 20px 20px rgba(0, 0, 0, 0.2), inset 0px -10px 10px rgba(0, 0, 0, 0.3), inset 0px 10px 10px rgba(255, 255, 255, 0.2); box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.15), 0px 20px 20px rgba(0, 0, 0, 0.2), inset 0px -10px 10px rgba(0, 0, 0, 0.3), inset 0px 10px 10px rgba(255, 255, 255, 0.2); -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .contactPageSec01__formSubmit:hover { background: var(--purplehover); -webkit-box-shadow: 0px 0px 0px 7px rgba(255, 255, 255, 0.15), 0px 20px 20px rgba(0, 0, 0, 0.2), inset 0px -10px 10px rgba(0, 0, 0, 0.3), inset 0px 10px 10px rgba(255, 255, 255, 0.2); box-shadow: 0px 0px 0px 7px rgba(255, 255, 255, 0.15), 0px 20px 20px rgba(0, 0, 0, 0.2), inset 0px -10px 10px rgba(0, 0, 0, 0.3), inset 0px 10px 10px rgba(255, 255, 255, 0.2); } @media screen and (max-width: 768px) { .contactPageSec01__formSubmit { margin-top: 4.8rem; width: 100%; height: 7.2rem; font-size: 2rem; } } .contactPageSec01__thanks { margin: 8rem auto 0; } @media screen and (max-width: 768px) { .contactPageSec01__thanks { margin-top: 6.4rem; } } .contactPageSec01__thanksTtl { font-size: 3.2rem; font-weight: 700; text-align: center; } @media screen and (max-width: 768px) { .contactPageSec01__thanksTtl { font-size: 2rem; } } .contactPageSec01__thanksTxt { margin: 3.2rem auto 0; font-size: 2rem; font-weight: 500; line-height: 1.5; text-align: center; } @media screen and (max-width: 768px) { .contactPageSec01__thanksTxt { margin-top: 2.4rem; font-size: 1.6rem; } } .contactPageSec01__thanksBtn { margin: 8.4rem auto 0; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: nowrap; flex-wrap: nowrap; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: center; align-items: center; width: 50rem; height: 8.9rem; background: var(--mainwhite); border: 0.3rem solid var(--purple); border-radius: 5rem; color: var(--purple); font-size: 2.6rem; font-weight: 700; -webkit-box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.15), 0px 20px 20px rgba(0, 0, 0, 0.2), inset 0px -10px 10px rgba(0, 0, 0, 0.3), inset 0px 10px 10px rgba(255, 255, 255, 0.2); box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.15), 0px 20px 20px rgba(0, 0, 0, 0.2), inset 0px -10px 10px rgba(0, 0, 0, 0.3), inset 0px 10px 10px rgba(255, 255, 255, 0.2); -webkit-transition: all 0.4s ease-in-out 0s; transition: all 0.4s ease-in-out 0s; } .contactPageSec01__thanksBtn:hover { background: var(--white-border); -webkit-box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.15), 0px 20px 20px rgba(0, 0, 0, 0.2), inset 0px -10px 10px rgba(0, 0, 0, 0.3), inset 0px 10px 10px rgba(255, 255, 255, 0.2); box-shadow: 0px 0px 0px 5px rgba(255, 255, 255, 0.15), 0px 20px 20px rgba(0, 0, 0, 0.2), inset 0px -10px 10px rgba(0, 0, 0, 0.3), inset 0px 10px 10px rgba(255, 255, 255, 0.2); } @media screen and (max-width: 768px) { .contactPageSec01__thanksBtn { margin-top: 7.6rem; width: 100%; height: 7.2rem; font-size: 2rem; } }