@charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Zen+Old+Mincho&display=swap"); /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-StyleSheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ :where(:not(html, iframe, canvas, img, svg, video, audio, input, textarea, script, style, title):not(svg *, symbol *):not([class*=wp])):where(:not(vis-bug)) { all: unset; /* その要素のすべてのプロパティ(unicode-bidi, direction, CSSカスタムプロパティを除いて)を、既定値が inherit のものは継承値に、そうでなければ初期値に変更 */ display: revert; /* 宣言が所属するスタイルシートの出所に応じて動作を指定する */ outline: revert; } /* Preferred box-sizing value */ *, *::before, *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::-webkit-input-placeholder { color: unset; } ::-moz-placeholder { color: unset; } :-ms-input-placeholder { color: unset; } ::-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } :root { --header-height: 80px; /* ヘッダー - 高さ */ --header-pt: 20px; /* ヘッダー - 上パディング */ --header-real-height: calc(var(--header-height) + var(--header-pt)); /* ヘッダー - 高さ */ --header-after: 40px; /* ヘッダー - 下余白 */ --page-heading-after: 64px; /* ページ見出し - 下余白 */ --breadcrumb-color: #ffffff; --breadcrumb-after: 80px; /* パンくずリスト - 下余白 */ --footer-before: 0; /* フッター - 上余白 */ --fixed-menu-height: 54px; /* SP版固定メニュー高さ */ --contents-gap: 80px; /* コンテンツ間隔 */ --inline-outer-size: clamp(24px, 6.25vw, 160px); /* コンテンツ外側余白 */ } @media screen and (max-width: 1024px) { :root { --header-height: 32px; /* ヘッダー - 高さ */ --header-pt: 14px; /* ヘッダー - 上パディング */ --header-after: 14px; /* ヘッダー - 下余白 */ --page-heading-after: 16px; /* ページ見出し - 下余白 */ --breadcrumb-after: 40px; /* パンくずリスト - 下余白 */ --contents-gap: 62px; /* コンテンツ間隔 */ } } @media screen and (max-width: 768px) { :root { --inline-outer-size: clamp(12px, 5.3333333333vw, 20px); /* コンテンツ外側余白 */ } } html { font-size: 62.5%; scroll-behavior: smooth; scroll-padding-top: var(--header-height); } body { font-family: "Noto Sans JP", sans-serif; font-size: 1.8rem; min-height: 100vh; position: relative; background: #FDF5F5; overflow-x: clip; } @media screen and (max-width: 1024px) { body { padding: 68px 0 0px; } } body p { font-size: clamp(1.4rem, 1vw, 1.6rem); font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } main { width: 100%; } img, svg { vertical-align: bottom; } .js-scroll-fade-up-trr { opacity: 0; -webkit-transform: translateY(20px); transform: translateY(20px); -webkit-transition: opacity 1.6s ease-out, -webkit-transform 1.6s ease-out; transition: opacity 1.6s ease-out, -webkit-transform 1.6s ease-out; transition: opacity 1.6s ease-out, transform 1.6s ease-out; transition: opacity 1.6s ease-out, transform 1.6s ease-out, -webkit-transform 1.6s ease-out; } .js-scroll-fade-up-trr.is-visible { opacity: 1; -webkit-transform: translateY(0); transform: translateY(0); } .l-header { width: 100%; position: fixed; top: 0; z-index: 10000; } @media screen and (max-width: 1024px) { .l-header { height: 68px; } } .l-header__content { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .l-header__logo { height: 80px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; padding: 12px 36px; } @media screen and (max-width: 1024px) { .l-header__logo { height: 68px; padding: 12px 15px; } } @media screen and (max-width: 376px) { .l-header__logo { padding: 12px 8px; } } .l-header__logo > a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 18px; } @media screen and (max-width: 1024px) { .l-header__logo > a { gap: 10px; } } .l-header__logo > a > img { width: 74px; height: 48px; } @media screen and (max-width: 1024px) { .l-header__logo > a > img { width: 50px; height: 32px; } } @media screen and (max-width: 376px) { .l-header__logo > a > img { width: 30px; height: 20px; } } .l-header__logo > a > p { font-size: clamp(1rem, 1.125vw, 1.8rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #000000; } .l-header__logo > a > p span { display: block; font-size: clamp(0.8rem, 0.9375vw, 1.5rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #000000; } .l-header__btns { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 1024px) { .l-header__btns { display: none; } } .l-header__btns-item { width: 214px; height: 80px; padding: 14px 14px 13px 40px; font-size: clamp(1.4rem, 1vw, 1.6rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ffffff; position: relative; -webkit-transition: all 0.3s; transition: all 0.3s; } @media screen and (max-width: 768px) { .l-header__btns-item { height: 110px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } } .l-header__btns-item:nth-of-type(1) { background: #4256B0; } .l-header__btns-item:nth-of-type(1):hover { background: rgba(66, 86, 176, 0.7); } @media screen and (max-width: 768px) { .l-header__btns-item:nth-of-type(1):hover { background: #4256B0; } } .l-header__btns-item:nth-of-type(2) { background: #1E2753; } .l-header__btns-item:nth-of-type(2):hover { background: rgba(30, 39, 83, 0.7); } @media screen and (max-width: 768px) { .l-header__btns-item:nth-of-type(2):hover { background: #1E2753; } } .l-header__btns-item:nth-of-type(3) { background: #ff5638; } @media screen and (max-width: 768px) { .l-header__btns-item:nth-of-type(3) .l-header__btns-arrow { position: relative; top: 14px; } } .l-header__btns-item:nth-of-type(3):hover { background: rgba(255, 86, 56, 0.7); } @media screen and (max-width: 768px) { .l-header__btns-item:nth-of-type(3):hover { background: #ff5638; } } .l-header__btns-item:nth-of-type(3) > .sub-item { display: block; position: relative; width: 180px; text-align: center; left: -28px; padding: 0 16px; font-size: clamp(1.2rem, 0.8125vw, 1.3rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ff5638; background: #ffffff; border-radius: 20px; } @media screen and (max-width: 768px) { .l-header__btns-item:nth-of-type(3) > .sub-item { position: absolute; top: 30px; } } .l-header__btns-arrow { position: relative; } .l-header__btns-arrow:hover::after { -webkit-transition: background-position 0.3s ease-out; transition: background-position 0.3s ease-out; background-position: 0% 100%; } @media screen and (max-width: 768px) { .l-header__btns-arrow:hover::after { background-position: 100% 0%; } } .l-header__btns-arrow::after { content: ""; display: block; width: 15px; height: 10px; position: absolute; top: 50%; right: -28px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-image: url("../../assets/img/icon/ico_arrow_01.svg"); background-repeat: no-repeat; background-size: 200%; background-position: 100% 0%; -webkit-transition: 0.3s; transition: 0.3s; } .l-header__content { background: #ffffff; } .l-header__content-sub { background-color: #F9F9F9; } @media screen and (max-width: 1024px) { .l-header__content-sub { position: relative; right: -100%; -webkit-transition: all 0.4s; transition: all 0.4s; background-color: #FDF5F5; } } .l-header__content-sub.is-active { right: 0; height: calc(100svh - 68px); overflow-y: scroll; } .l-header__content-sub.is-active::-webkit-scrollbar { display: none; } .l-header__content-sub .l-header__btns { display: none; } @media screen and (max-width: 1024px) { .l-header__content-sub .l-header__btns { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } } .l-header__content-sub .l-header__btns-item:nth-of-type(1) { width: 50%; } .l-header__content-sub .l-header__btns-item:nth-of-type(2) { width: 50%; } .l-header__content-sub .l-header__btns-item:nth-of-type(3) { width: 100%; } .l-header__content-sub .l-header__btns-item:nth-of-type(3) .sub-item { left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .l-header__content-sub .l-header__btns-arrow { display: block; width: 132px; margin: 0 auto; } .l-header__content-sub .l-header__btns-arrow::after { right: 8px; } .l-header__hamburger { display: none; } @media screen and (max-width: 1024px) { .l-header__hamburger { display: block; width: 68px; height: 68px; position: absolute; top: 0; right: 0; background: #2D3B7C; cursor: pointer; } .l-header__hamburger > span { display: block; position: absolute; left: 15px; width: 36px; height: 2px; background: #ffffff; -webkit-transition: all 0.3s; transition: all 0.3s; } .l-header__hamburger > span:nth-of-type(1) { top: 23px; } .l-header__hamburger > span:nth-of-type(2) { top: 34px; } .l-header__hamburger > span:nth-of-type(3) { bottom: 22px; } } .l-header__hamburger.active > span { width: 40px; } .l-header__hamburger.active > span:nth-of-type(1) { top: 34px; -webkit-transform: rotate(34deg); transform: rotate(34deg); } .l-header__hamburger.active > span:nth-of-type(2) { display: none; } .l-header__hamburger.active > span:nth-of-type(3) { bottom: 31px; -webkit-transform: rotate(-34deg); transform: rotate(-34deg); } .l-header__nav { width: 100%; padding-inline: var(--inline-outer-size, 0); } @media screen and (max-width: 1024px) { .l-header__nav { padding-inline: 0; } } .l-header__nav-items { max-width: 1280px; width: 100%; height: auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-justify-content: space-around; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; margin: 0 auto; } @media screen and (max-width: 1024px) { .l-header__nav-items { height: 100%; padding: 36px 30px; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 34px; } } @media screen and (max-width: 1024px) { .l-header__nav-item { max-width: 315px; width: 100%; margin: 0 auto; border-bottom: 1px solid #ff5638; position: relative; } .l-header__nav-item::after { content: ""; display: block; width: 15px; height: 10px; position: absolute; top: 50%; right: 0px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-image: url("../../assets/img/icon/ico_arrow_02.svg"); background-repeat: no-repeat; background-size: 200%; background-position: 100% 0%; } } .l-header__nav-item > a { padding: 12px 0 10px; font-size: clamp(1.6rem, 1vw, 1.6rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; -webkit-transition: all 0.3s; transition: all 0.3s; display: block; } @media screen and (max-width: 1024px) { .l-header__nav-item > a { display: block; font-size: 18px; padding-bottom: 2px; } } .l-header__nav-item > a:hover { opacity: 0.7; } @media screen and (max-width: 1024px) { .l-header__nav-item > a:hover { opacity: 1; } } .l-header__nav-item > a.link--rev { display: block; pointer-events: none; -webkit-filter: grayscale(1); filter: grayscale(1); opacity: 0.6; font-size: clamp(1.4rem, 0.875vw, 1.4rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.5; color: #272727; } .l-footer { width: 100%; position: relative; background: #ffffff; } .l-footer-content { max-width: 1440px; width: 100%; margin: 0 auto; } @media screen and (max-width: 1024px) { .l-footer-content { padding-top: 45px; } } .l-footer-content__inner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; padding-bottom: 50px; margin-bottom: 45px; border-bottom: 1px solid rgba(30, 39, 83, 0.1); } @media (max-width: 1500px) { .l-footer-content__inner { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 34px; padding-inline: calc(var(--inline-outer-size, 0) / 2); } } @media screen and (max-width: 1280px) { .l-footer-content__inner { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } @media (max-width: 836px) { .l-footer-content__inner { padding-bottom: 26px; margin-bottom: 0; border-bottom: none; } } .l-footer-content__nav { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: 36px; } @media (max-width: 1500px) { .l-footer-content__nav { gap: 36px; } } @media (max-width: 836px) { .l-footer-content__nav { max-width: 316px; width: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .l-footer-content__nav-item { min-width: 130px; font-size: clamp(1.4rem, 1vw, 1.6rem); font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } @media (max-width: 836px) { .l-footer-content__nav-item { width: 100%; } } .l-footer-content__nav-item > a { display: block; padding-right: 2vw; padding-bottom: 8px; margin-bottom: 18px; border-bottom: 1px solid #ff5638; } @media screen and (max-width: 768px) { .l-footer-content__nav-item > a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; padding-right: 0; } .l-footer-content__nav-item > a > span { width: 30px; height: 30px; border-radius: 50%; border: 1px solid #ff5638; } } .l-footer-content__nav-item .link { display: block; font-size: clamp(1.4rem, 1vw, 1.6rem); font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; margin-bottom: 10px; -webkit-transition: all 0.3s; transition: all 0.3s; } .l-footer-content__nav-item .link:hover { opacity: 0.7; } .l-footer-content__nav-item .link::last-of-type { margin-bottom: 0; } .l-footer-content__nav-item--soon { -webkit-filter: grayscale(1); filter: grayscale(1); opacity: 0.6; } .l-footer-content__nav-item--soon > a { pointer-events: none; } .l-footer-content__nav-item--soon .link { pointer-events: none; } .l-footer-content__link { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } @media screen and (max-width: 768px) { .l-footer-content__link { max-width: 316px; width: 100%; } } .l-footer-content__link > a { display: block; font-size: clamp(1.6rem, 1vw, 1.6rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } .l-footer-content__link > a.blank-link { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; position: relative; padding-right: 20px; } .l-footer-content__link > a.blank-link::after { content: ""; position: absolute; top: 50%; right: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 10px; height: 10px; background: url("../../assets/img/icon/ico_blank_01.svg") no-repeat; background-size: cover; } .l-footer-content__link > a.foot-link { margin-bottom: 20px; margin-top: 15px; background: #fff; max-width: 242px; } .l-footer-content__info { padding-inline: var(--inline-outer-size, 0); padding-bottom: 58px; } @media screen and (max-width: 768px) { .l-footer-content__info { padding-bottom: 35px; } } .l-footer-content__info-inner { max-width: 1280px; width: 100%; margin: 0 auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; } @media (max-width: 836px) { .l-footer-content__info-inner { max-width: 316px; width: 100%; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .l-footer-content__info-sns { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 14px; } @media (max-width: 836px) { .l-footer-content__info-sns { -webkit-box-ordinal-group: 3; -webkit-order: 2; -ms-flex-order: 2; order: 2; } } .l-footer-content__info-sns > span { display: block; font-size: clamp(1.6rem, 1vw, 1.6rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } .l-footer-content__info-sns > img { width: 56px; height: 56px; } .l-footer-content__info-iso { max-width: 642px; width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; gap: 3vw; } @media (max-width: 836px) { .l-footer-content__info-iso { max-width: 316px; width: 100%; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .l-footer-content__info-iso > img { max-width: 164px; width: 100%; height: auto; -o-object-fit: contain; object-fit: contain; } .l-footer-content__info-area > span, .l-footer-content__info-area > p { font-size: clamp(1.5rem, 1vw, 1.6rem); font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #707070; } .l-footer-content__info-area > p { max-width: 426px; width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; text-align: left; } @media (max-width: 836px) { .l-footer-content__info-area > p { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; margin-bottom: 20px; } } .l-footer-content__info-area > p > span { width: 110px; } .copy { padding: 20px; background: #2E386D; } .copy > p { text-align: center; } .copy > p > small { font-size: clamp(1rem, 0.625vw, 1rem); font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ffffff; font-family: "Inter", serif; } .l-main { position: relative; width: 100%; padding-top: 50px; } @media screen and (max-width: 1024px) { .l-main { padding-top: 0; } } .l-main > * { line-height: 1.75; } .l-main .custom-page-style { max-width: 1440px; padding-inline: calc(var(--inline-outer-size, 0) / 2); margin: 140px auto 0; } @media screen and (max-width: 1024px) { .l-main .custom-page-style { margin: 100px auto 0; } } .l-content { width: 100%; padding-inline: calc(var(--inline-outer-size, 0) / 2); } @media screen and (max-width: 768px) { .l-content { padding-inline: 0; } } .l-content__inner { width: min(100%, 1460px); margin-inline: auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; position: fixed; top: 40px; left: 50%; z-index: 10; -webkit-transform: translateX(-50%); transform: translateX(-50%); } @media (max-width: 1024px) { .l-content__inner { display: none; } } .l-section { width: 100%; margin-top: var(--contents-gap); padding-inline: 32px; } .l-section__inner { width: min(100%, 1440px); margin-inline: auto; } .l-section-title { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 768px) { .l-section-title { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } } @media screen and (max-width: 768px) { .l-section-title--service { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } } .l-section-title > h2 > .en { display: block; padding-left: clamp(26px, 2.5vw, 40px); font-size: clamp(3rem, 4.3125vw, 6.9rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1; color: #ffffff; font-family: "Inter", serif; position: relative; } .l-section-title > h2 > .en::before { content: ""; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: clamp(18px, 2.3vw, 35px); height: 7px; background: #ff5638; } @media screen and (max-width: 768px) { .l-section-title > h2 > .en::before { height: 3px; } } .l-section-title > h2 > .ja { display: block; padding-left: clamp(26px, 2.5vw, 40px); font-size: clamp(1.6rem, 1.5625vw, 2.5rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ffffff; font-family: "Noto Sans JP", sans-serif; } .l-section-title > .c-btn { max-width: 268px; margin: 0; background: #ffffff; top: 0; left: 0; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media screen and (max-width: 768px) { .l-section-title > .c-btn { max-width: 120px; padding: 5px 6px 7px; } } .l-section-title > .c-btn > span { font-size: clamp(1.2rem, 1.125vw, 1.8rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } .l-section-title > .c-btn > span::after { content: ""; width: 15px; height: 15px; background-image: url("../../assets/img/icon/ico_modal_01.svg"); background-size: 100%; background-position: center; } .l-section-title > .c-btn:hover { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .l-section-title > .c-btn:hover > span::after { background-position: center; } .l-section-header { padding-block: 100px 58px; padding-inline: calc(var(--inline-outer-size, 0) / 2); background: url("../../assets/img/common/bg_section_header_01.png") no-repeat; background-size: cover; } @media screen and (max-width: 1024px) { .l-section-header { margin-top: 0; } } @media screen and (max-width: 768px) { .l-section-header { padding-block: 32px 20px; } } .l-section-header__inner { max-width: 1440px; width: 100%; margin: 0 auto; } .l-section-header__inner > .l-section-title > h2 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; } @media screen and (max-width: 768px) { .l-section-header__inner > .l-section-title > h2 { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } } .l-section-subtitle { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto; } .l-section-subtitle > h3 { font-size: clamp(2rem, 2.5vw, 4rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ffffff; position: relative; } .l-section-subtitle > h3::after { content: ""; position: absolute; left: 50%; bottom: -16px; width: 35px; height: 7px; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: #ff5638; } @media screen and (max-width: 768px) { .l-section-subtitle > h3::after { height: 4px; } } .l-section-subtitle--rev > h3 { font-size: clamp(2rem, 2.5vw, 4rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } .c-breadcrumb { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-column-gap: clamp(8px, 1.5rem, 24px); -moz-column-gap: clamp(8px, 1.5rem, 24px); column-gap: clamp(8px, 1.5rem, 24px); row-gap: clamp(4px, 0.75rem, 12px); width: 100%; padding-top: 15px; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } .c-breadcrumb__item { font-size: clamp(14px, 1.125vw, 18px); font-weight: 600; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #CDCDCD; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: clamp(8px, 1.5rem, 24px); position: relative; } .c-breadcrumb__item:last-of-type { display: -webkit-box; overflow: hidden; -webkit-box-flex: unset; -webkit-flex: unset; -ms-flex: unset; flex: unset; -webkit-box-orient: vertical; text-decoration: none; -webkit-line-clamp: 1; pointer-events: none; padding-right: 0; } .c-breadcrumb__item:last-of-type::after { display: none; } .c-breadcrumb > span { line-height: 1; } .c-breadcrumb > span img { vertical-align: inherit; } .c-btn { display: block; max-width: 325px; width: 100%; padding: 12px 18px; margin: 102px auto 0; background: #1E2753; position: relative; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-filter: drop-shadow(6px 6px rgba(30, 39, 83, 0.3)); filter: drop-shadow(6px 6px rgba(30, 39, 83, 0.3)); } .c-btn:hover { top: 3px; left: 3px; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-filter: drop-shadow(0px 0px rgba(30, 39, 83, 0.3)); filter: drop-shadow(0px 0px rgba(30, 39, 83, 0.3)); } @media screen and (max-width: 768px) { .c-btn:hover { top: 0; left: 0; -webkit-filter: drop-shadow(6px 6px rgba(30, 39, 83, 0.3)); filter: drop-shadow(6px 6px rgba(30, 39, 83, 0.3)); } } .c-btn:hover > span::after { -webkit-transition: background-position 0.3s ease-out; transition: background-position 0.3s ease-out; background-position: 0% 100%; } @media screen and (max-width: 768px) { .c-btn:hover > span::after { background-position: 100% 0%; } } .c-btn > span { display: block; width: 100%; padding-bottom: 2px; position: relative; font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ffffff; border-bottom: 1px solid #ff5638; } .c-btn > span::after { content: ""; display: block; width: 15px; height: 10px; position: absolute; top: 50%; right: 0px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-image: url("../../assets/img/icon/ico_arrow_02.svg"); background-repeat: no-repeat; background-size: 200%; background-position: 100% 0%; -webkit-transition: 0.3s; transition: 0.3s; } .c-btn--rev { max-width: 200px; margin: 40px auto 0; background: #ffffff; } .c-btn--rev > span { font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; text-align: right; } .c-btn--rev > span::after { content: ""; display: block; width: 15px; height: 10px; position: absolute; top: 50%; left: 0px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-image: url("../../assets/img/icon/ico_arrow_left_01.svg"); background-repeat: no-repeat; background-size: 200%; background-position: 100% 0%; -webkit-transition: 0.3s; transition: 0.3s; } .c-prev-btn { display: block; max-width: 160px; width: 100%; position: relative; font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; padding-bottom: 8px; margin: 76px auto 0; text-align: right; border-bottom: 1px solid #1E2753; -webkit-transition: all 0.3s; transition: all 0.3s; } @media screen and (max-width: 768px) { .c-prev-btn { margin: 56px auto 0; } } .c-prev-btn > span { background-image: url("../../assets/img/icon/ico_prev_btn_02.svg"); background-size: cover; width: 28px; height: 28px; border-radius: 50%; position: absolute; left: 0; top: 0px; -webkit-transition: background-image 0.3s; transition: background-image 0.3s; } .c-prev-btn:hover > span { background-image: url("../../assets/img/icon/ico_prev_btn_01.svg"); } .c-pagination { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 16px; margin: 30px auto 0; } .c-pagination .page { width: 38px; height: 38px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; background: #fff; border: 1px solid #0068B3; font-size: clamp(1.4rem, 0.875vw, 1.4rem); font-weight: 900; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #0068B3; border-radius: 4px; } .c-pagination .page--now { color: #ffffff; background: #0068B3; } .c-pagination .page--next { border: none; background: transparent; } .c-pagination .page--prev { border: none; background: transparent; } .c-pagination__num { width: 40px; height: 40px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 6px 4px; font-size: clamp(1.4rem, 0.875vw, 1.4rem); font-weight: 900; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #0068B3; -webkit-transition: all 0.3s; transition: all 0.3s; } .c-pagination__num.is-active { background: #0068B3; color: #ffffff; } .c-pagination__cards { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; -webkit-column-gap: clamp(14px, 1rem, 16px); -moz-column-gap: clamp(14px, 1rem, 16px); column-gap: clamp(14px, 1rem, 16px); } .c-pagination__card { font-size: clamp(12px, 3.7333333333vw, 16px); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1em; color: #0068B3; aspect-ratio: 1; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: clamp(30px, 10.6666666667vw, 40px); -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; border: 1px solid #0068B3; background-color: #ffffff; } .c-pagination__card:focus-visible { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; color: #ffffff; background-color: #0086e6; } @media (any-hover: hover) { .c-pagination__card:hover { -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; color: #ffffff; background-color: #0086e6; } } .c-pagination__card.is-active { pointer-events: none; color: #ffffff; border-color: #0068B3; background-color: #0068B3; } .c-pagination__dot { font-size: 16px; font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #0068B3; } .c-footer-container { padding-top: 270px; position: relative; background: #ffffff; } @media screen and (max-width: 1024px) { .c-footer-container { padding-top: 0; margin-top: 0; } } @media screen and (max-width: 768px) { .c-footer-container { background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0)), color-stop(50%, rgba(255, 255, 255, 0)), color-stop(50%, rgb(255, 255, 255)), to(rgb(255, 255, 255))); background: -webkit-linear-gradient(top, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, rgb(255, 255, 255) 50%, rgb(255, 255, 255) 100%); background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, rgb(255, 255, 255) 50%, rgb(255, 255, 255) 100%); } } .c-footer-container__inner { max-width: 1440px; width: 100%; padding: 56px 114px 64px; position: absolute; top: -174px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); background: #2D3B7C; } @media (max-width: 1300px) { .c-footer-container__inner { padding: 56px 3vw 64px; } } @media screen and (max-width: 1024px) { .c-footer-container__inner { position: static; -webkit-transform: translateX(0); transform: translateX(0); } } @media screen and (max-width: 768px) { .c-footer-container__inner { width: 96%; margin: 0 auto; padding-inline: 30px; } } .c-footer-container__intro { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 68px; } @media screen and (max-width: 768px) { .c-footer-container__intro { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 32px; } } .c-footer-container__intro > p { max-width: 436px; width: 100%; font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ffffff; } .c-footer-container__title h2 > .en { display: block; padding-left: clamp(26px, 2vw, 32px); font-size: clamp(3rem, 3.3125vw, 5.3rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1; color: #ffffff; font-family: "Inter", serif; position: relative; } .c-footer-container__title h2 > .en::before { content: ""; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: clamp(18px, 1.5vw, 26px); height: 3px; background: #ff5638; } .c-footer-container__title h2 > .ja { display: block; padding-left: 2vw; font-size: clamp(1.6rem, 1.25vw, 2rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ffffff; font-family: "Noto Sans JP", sans-serif; } .c-footer-container__btns { margin-top: 60px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 36px; } @media screen and (max-width: 1024px) { .c-footer-container__btns { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 26px; } } .c-footer-container__btn { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; max-width: 370px; width: 100%; padding: 26px 48px; background: #ffffff; position: relative; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-filter: drop-shadow(6px 6px rgba(255, 255, 255, 0.3)); filter: drop-shadow(6px 6px rgba(255, 255, 255, 0.3)); top: 0; left: 0; transition: all 0.3s ease-out; } @media screen and (max-width: 768px) { .c-footer-container__btn { padding: 12px 34px; } } .c-footer-container__btn:hover { top: 3px; left: 3px; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-filter: drop-shadow(0px 0px rgba(255, 255, 255, 0.3)); filter: drop-shadow(0px 0px rgba(255, 255, 255, 0.3)); } @media screen and (max-width: 768px) { .c-footer-container__btn:hover { top: 0; left: 0; -webkit-filter: drop-shadow(6px 6px rgba(255, 255, 255, 0.3)); filter: drop-shadow(6px 6px rgba(255, 255, 255, 0.3)); } } .c-footer-container__btn:hover > span::after { -webkit-transition: background-position 0.3s ease-out; transition: background-position 0.3s ease-out; background-position: 0% 100%; } @media screen and (max-width: 768px) { .c-footer-container__btn:hover > span::after { background-position: 100% 0%; } } .c-footer-container__btn--soon { pointer-events: none; -webkit-filter: grayscale(1) drop-shadow(6px 6px rgba(255, 255, 255, 0.3)); filter: grayscale(1) drop-shadow(6px 6px rgba(255, 255, 255, 0.3)); } .c-footer-container__btn--soon:hover { top: 0; left: 0; -webkit-filter: grayscale(1) drop-shadow(6px 6px rgba(255, 255, 255, 0.3)); filter: grayscale(1) drop-shadow(6px 6px rgba(255, 255, 255, 0.3)); } @media screen and (max-width: 768px) { .c-footer-container__btn--soon:hover > span::after { background-position: 100% 0%; } } .c-footer-container__btn > span { display: block; width: 100%; font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; border-bottom: 1px solid #ff5638; position: relative; } .c-footer-container__btn > span::after { content: ""; display: block; width: 15px; height: 10px; position: absolute; top: 50%; right: 0px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-image: url("../../assets/img/icon/ico_arrow_02.svg"); background-repeat: no-repeat; background-size: 200%; background-position: 100% 0%; -webkit-transition: 0.3s; transition: 0.3s; } /* 必須 */ @media screen and (max-width: 768px) { .accordion-content { display: none; } } .accordion-header { cursor: pointer; position: relative; } @media screen and (max-width: 768px) { .accordion-header::before, .accordion-header::after { position: absolute; content: ""; top: 1px; right: 8px; bottom: 9px; width: 14px; height: 1px; margin: auto; background: #ff5638; } .accordion-header::after { -webkit-transform: rotate(-90deg); transform: rotate(-90deg); -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; } .accordion-header.active::after { -webkit-transform: rotate(0deg); transform: rotate(0deg); } } .c-recruit { padding-inline: calc(var(--inline-outer-size, 0) / 2); } .c-recruit__inner { padding: 58px 54px; } @media screen and (max-width: 1280px) { .c-recruit__inner { padding: 58px 0; } } @media screen and (max-width: 963px) { .c-recruit__inner { padding: 30px 0 0; } } .c-recruit-content { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; gap: clamp(24px, 6vw, 80px); } @media screen and (max-width: 963px) { .c-recruit-content { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 24px; } } .c-recruit-content__item { max-width: 620px; width: 100%; padding: 24px 40px 32px; position: relative; z-index: 5; } @media screen and (max-width: 768px) { .c-recruit-content__item { padding-inline: 20px; } } .c-recruit-content__item:nth-of-type(1) { background: #2D3B7C; } .c-recruit-content__item:nth-of-type(1)::before { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url("../../assets/img/common/img_cta_01.jpg"); z-index: -1; opacity: 0.2; background-size: cover; } .c-recruit-content__item:nth-of-type(2) { background: #0b1338; background-position-x: center; background-repeat: no-repeat; background-size: cover; } .c-recruit-content__item:nth-of-type(2)::before { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url("../../assets/img/common/img_cta_02.jpg"); z-index: -1; opacity: 0.2; background-size: cover; } .c-recruit-content__item::after { content: ""; width: 100%; height: 100%; position: absolute; top: 8px; left: 8px; background: rgba(45, 59, 124, 0.15); z-index: -2; } .c-recruit-content__item > p { max-width: 490px; width: 100%; margin: 0 auto; font-size: clamp(2rem, 1.25vw, 2rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ffffff; } .c-recruit-content__item > p:nth-of-type(1) { text-align: center; } .c-recruit-content__item > p:nth-of-type(2) { font-size: clamp(1.6rem, 1vw, 1.6rem); font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 1.5; color: #ffffff; } .c-recruit-content__btns { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; gap: 38px; } @media screen and (max-width: 1280px) { .c-recruit-content__btns { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 18px; } } @media screen and (max-width: 768px) { .c-recruit-content__btns { max-width: 250px; margin: 0 auto; } } .c-recruit-content__btns > p { margin-top: 30px; font-size: clamp(1.8rem, 1.5vw, 2.4rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ffffff; } .c-recruit-content__btns > p.c-recruit-content__btns--rev { text-align: center; font-size: clamp(1.8rem, 1.5vw, 2.4rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ffffff; } .c-recruit-content__btns .c-btn { margin-top: 26px; background: #ffffff; top: 0; left: 0; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .c-recruit-content__btns .c-btn:hover { top: 3px; left: 3px; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media screen and (max-width: 768px) { .c-recruit-content__btns .c-btn:hover { top: 0; left: 0; } } .c-recruit-content__btns .c-btn > span { font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #1E2753; } @media screen and (max-width: 1280px) { .c-recruit-content__btns .c-btn:nth-of-type(2) { margin-top: 0; } } .c-recruit__bottom { padding-inline: 0; } .c-recruit__bottom .c-recruit__inner { padding: 58px 0px; } .c-recruit__bottom .c-recruit-content { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; gap: clamp(16px, 2vw, 30px); } @media screen and (max-width: 963px) { .c-recruit__bottom .c-recruit-content { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 24px; } } .c-recruit__bottom .c-recruit-content__item { max-width: 630px; width: 100%; padding: 24px 40px 32px; position: relative; z-index: 1; } @media screen and (max-width: 768px) { .c-recruit__bottom .c-recruit-content__item { padding: 24px 30px 32px; } } .c-recruit__bottom .c-recruit-content__item:nth-of-type(1) { background: #ffffff; } .c-recruit__bottom .c-recruit-content__item:nth-of-type(1)::before { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url("../../assets/img/common/img_cta_01.jpg"); z-index: -1; opacity: 0.2; background-size: cover; } .c-recruit__bottom .c-recruit-content__item:nth-of-type(2) { background: #ffffff; background-position-x: center; background-repeat: no-repeat; background-size: cover; } .c-recruit__bottom .c-recruit-content__item:nth-of-type(2)::before { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url("../../assets/img/common/img_cta_02.jpg"); z-index: -1; opacity: 0.2; background-size: cover; } .c-recruit__bottom .c-recruit-content__item::after { content: ""; width: 100%; height: 100%; position: absolute; top: 8px; left: 8px; background: rgba(255, 255, 255, 0.25); z-index: -2; } .c-recruit__bottom .c-recruit-content__item > p { max-width: 490px; width: 100%; margin: 0 auto; font-size: clamp(2rem, 1.25vw, 2rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ff5638; } .c-recruit__bottom .c-recruit-content__item > p:nth-of-type(1) { text-align: center; } .c-recruit__bottom .c-recruit-content__item > p:nth-of-type(2) { font-size: clamp(1.6rem, 1vw, 1.6rem); font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } .c-recruit__bottom .c-recruit-content__btns { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; gap: 38px; } @media screen and (max-width: 1280px) { .c-recruit__bottom .c-recruit-content__btns { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 18px; } } .c-recruit__bottom .c-recruit-content__btns .c-btn { margin-top: 26px; background: #1E2753; top: 0; left: 0; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .c-recruit__bottom .c-recruit-content__btns .c-btn:hover { top: 3px; left: 3px; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media screen and (max-width: 768px) { .c-recruit__bottom .c-recruit-content__btns .c-btn:hover { top: 0; left: 0; } } .c-recruit__bottom .c-recruit-content__btns .c-btn > span { font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ffffff; } @media screen and (max-width: 1280px) { .c-recruit__bottom .c-recruit-content__btns .c-btn:nth-of-type(2) { margin-top: 0; } } .c-recruit__bottom .c-recruit-content__btns > p { margin-top: 30px; font-size: clamp(1.8rem, 1.5vw, 2.4rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ffffff; } .c-recruit__bottom .c-recruit-content__btns > p.c-recruit-content__btns--rev { text-align: center; font-size: clamp(1.8rem, 1.5vw, 2.4rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } .c-footer-container__inner--recruit { max-width: 1280px; margin: 0 auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; padding: 62px 50px; background: #2D3B7C; } .c-footer-container__inner--recruit::before { content: ""; width: 100%; height: 100%; position: absolute; top: 0; left: 0; background: url("../../assets/img/common/img_cta_01.jpg"); background-repeat: no-repeat; background-position: center; background-size: cover; z-index: -1; opacity: 0.2; } @media screen and (max-width: 768px) { .c-footer-container__inner--recruit { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 60px; padding: 56px 20px 58px; } } .c-footer-container__inner--recruit > .c-footer-container__intro { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 40px; } .c-footer-container__inner--recruit > .c-footer-container__intro > p { max-width: 548px; } .c-footer-container__inner--recruit > .c-footer-container__intro > .c-footer-container__title > h2 > .ja { display: block; padding-left: 0; font-size: clamp(2rem, 1.875vw, 3rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ffffff; font-family: "Noto Sans JP", sans-serif; position: relative; } .c-footer-container__inner--recruit > .c-footer-container__intro > .c-footer-container__title > h2 > .ja::before { content: ""; position: absolute; left: 0; bottom: -4px; width: clamp(22px, 2.5vw, 35px); height: 3px; background: #ff5638; } .c-footer-container__inner--recruit > .c-footer-container__btns { width: 50%; margin-top: 0; padding-inline: 0; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } @media screen and (max-width: 768px) { .c-footer-container__inner--recruit > .c-footer-container__btns { width: 100%; } } .c-footer-container__inner--recruit > .c-footer-container__btns > .c-footer-container__btn { max-width: 256px; min-width: 214px; padding: 14px 10px; font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #1E2753; } .c-notfound { padding-inline: calc(var(--inline-outer-size, 0) / 2); padding-top: 270px; position: relative; background: #ffffff; } .c-notfound__inner { padding: 58px 54px; } @media screen and (max-width: 1280px) { .c-notfound__inner { padding: 58px 0; } } @media screen and (max-width: 963px) { .c-notfound__inner { padding: 30px 0 0; } } .c-footer-container--about { padding-top: 520px; z-index: 100; } @media screen and (max-width: 1024px) { .c-footer-container--about { padding-top: 0; background: -webkit-gradient(linear, left bottom, left top, from(rgb(255, 255, 255)), color-stop(83%, rgb(255, 255, 255)), color-stop(83%, rgb(253, 245, 245)), to(rgb(253, 245, 245))); background: -webkit-linear-gradient(bottom, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 83%, rgb(253, 245, 245) 83%, rgb(253, 245, 245) 100%); background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgb(255, 255, 255) 83%, rgb(253, 245, 245) 83%, rgb(253, 245, 245) 100%); } } .c-footer-container__inner--about { display: block; max-width: 1280px; padding: 0; background: none; top: -120px; padding: 0 20px 30px 10px; } .c-footer-container__inner--about > a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 56px 78px 64px; background: url("../../assets/img/common/img_cta_01-2.png"), #2D3B7C; background-repeat: no-repeat; background-size: cover; position: relative; z-index: 10; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-filter: drop-shadow(6px 6px 0 rgba(30, 39, 83, 0.15)); filter: drop-shadow(6px 6px 0 rgba(30, 39, 83, 0.15)); overflow: clip; top: 0; left: 0; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media screen and (max-width: 1024px) { .c-footer-container__inner--about > a { padding: 56px 50px 64px; } } @media screen and (max-width: 963px) { .c-footer-container__inner--about > a { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 40px; } } @media screen and (max-width: 768px) { .c-footer-container__inner--about > a { padding: 46px 20px 64px; } } .c-footer-container__inner--about > a::before { content: ""; width: 100%; height: 100%; background: rgba(45, 59, 124, 0.6); position: absolute; top: 0; left: 0; z-index: -1; -webkit-transition: all 0.3s; transition: all 0.3s; } .c-footer-container__inner--about > a:hover { top: 6px; left: 6px; background: #2D3B7C; -webkit-filter: none; filter: none; } @media screen and (max-width: 963px) { .c-footer-container__inner--about > a:hover { top: 0; left: 0; background: url("../../assets/img/common/img_cta_01-2.png"), #2D3B7C; background-size: cover; -webkit-filter: drop-shadow(6px 6px 0 rgba(30, 39, 83, 0.15)); filter: drop-shadow(6px 6px 0 rgba(30, 39, 83, 0.15)); } } .c-footer-container__inner--about > a:hover::before { content: ""; width: 0%; height: 100%; position: absolute; z-index: -1; } @media screen and (max-width: 963px) { .c-footer-container__inner--about > a:hover::before { width: 100%; } } .c-footer-container__inner--about > a:hover > p::after { -webkit-transition: background-position 0.3s ease-out; transition: background-position 0.3s ease-out; background-position: 0% 100%; } @media screen and (max-width: 963px) { .c-footer-container__inner--about > a:hover > p::after { background-position: 100% 0%; } } .c-footer-container__inner--about > a > .c-footer-container__intro { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 12px; } .c-footer-container__inner--about > a > .c-footer-container__intro > p { max-width: 660px; font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ffffff; } .c-footer-container__inner--about > a > .c-footer-container__intro > p.c-footer-container__intro-title { font-size: clamp(1.8rem, 1.5625vw, 2.5rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ffffff; position: relative; } .c-footer-container__inner--about > a > .c-footer-container__intro > p.c-footer-container__intro-title::before { content: ""; position: absolute; left: 0; bottom: -4px; width: clamp(22px, 2.5vw, 35px); height: 3px; background: #ff5638; } .c-footer-container__inner--about > a > .c-footer-container__intro > p.c-footer-container__intro-title > span { position: absolute; top: -40px; left: -30px; font-size: clamp(7rem, 6vw, 9.6rem); font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 1; color: rgba(255, 255, 255, 0.1); font-family: "Inter", serif; } @media screen and (max-width: 768px) { .c-footer-container__inner--about > a > .c-footer-container__intro > p.c-footer-container__intro-title > span { display: none; } } .c-footer-container__inner--about > a > p { padding-right: 54px; padding-bottom: 4px; font-size: clamp(1.8rem, 1.5625vw, 2.5rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ffffff; border-bottom: 1px solid #ff5638; position: relative; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } @media screen and (max-width: 768px) { .c-footer-container__inner--about > a > p { padding-right: 30px; } } .c-footer-container__inner--about > a > p::after { content: ""; display: block; width: 28px; height: 16px; position: absolute; top: 50%; right: 0px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-image: url("../../assets/img/icon/ico_arrow_02.svg"); background-repeat: no-repeat; background-size: 200%; background-position: 100% 0%; -webkit-transition: 0.3s; transition: 0.3s; } .c-footer-container__inner--about .c-footer-container__inner-btns { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: clamp(32px, 5vw, 80px); margin-top: 65px; } @media screen and (max-width: 768px) { .c-footer-container__inner--about .c-footer-container__inner-btns { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .c-footer-container__inner--about .c-footer-container__inner-btns > a { max-width: 590px; width: 100%; height: 228px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 36px; background: url("../../assets/img/common/bg_about_02.png") no-repeat; background-size: cover; -webkit-filter: drop-shadow(12px 12px 0 rgba(30, 39, 83, 0.15)); filter: drop-shadow(12px 12px 0 rgba(30, 39, 83, 0.15)); position: relative; -webkit-transition: all 0.3s; transition: all 0.3s; top: 0; left: 0; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media screen and (max-width: 963px) { .c-footer-container__inner--about .c-footer-container__inner-btns > a { height: 158px; padding: 36px 24px; } } .c-footer-container__inner--about .c-footer-container__inner-btns > a:hover { top: 6px; left: 6px; -webkit-filter: none; filter: none; } @media screen and (max-width: 963px) { .c-footer-container__inner--about .c-footer-container__inner-btns > a:hover { top: 0; left: 0; -webkit-filter: drop-shadow(12px 12px 0 rgba(30, 39, 83, 0.15)); filter: drop-shadow(12px 12px 0 rgba(30, 39, 83, 0.15)); } } .c-footer-container__inner--about .c-footer-container__inner-btns > a:hover > .c-footer-container__inner-btn::after { -webkit-transition: background-position 0.3s ease-out; transition: background-position 0.3s ease-out; background-position: 0% 100%; } @media screen and (max-width: 963px) { .c-footer-container__inner--about .c-footer-container__inner-btns > a:hover > .c-footer-container__inner-btn::after { background-position: 100% 0%; } } .c-footer-container__inner--about .c-footer-container__inner-btns > a > .c-footer-container__inner-btn { max-width: 386px; width: 100%; padding-right: 54px; padding-bottom: 4px; font-size: clamp(1.8rem, 1.5625vw, 2.5rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ffffff; border-bottom: 1px solid #ff5638; position: relative; } @media screen and (max-width: 768px) { .c-footer-container__inner--about .c-footer-container__inner-btns > a > .c-footer-container__inner-btn { padding-right: 24px; } } .c-footer-container__inner--about .c-footer-container__inner-btns > a > .c-footer-container__inner-btn > span { position: absolute; top: -30px; left: 0px; font-size: clamp(7rem, 6vw, 9.6rem); font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 1; color: rgba(255, 255, 255, 0.1); font-family: "Inter", serif; } @media screen and (max-width: 768px) { .c-footer-container__inner--about .c-footer-container__inner-btns > a > .c-footer-container__inner-btn > span { top: -16px; } } .c-footer-container__inner--about .c-footer-container__inner-btns > a > .c-footer-container__inner-btn::after { content: ""; display: block; width: 28px; height: 16px; position: absolute; top: 50%; right: 0px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-image: url("../../assets/img/icon/ico_arrow_02.svg"); background-repeat: no-repeat; background-size: 200%; background-position: 100% 0%; -webkit-transition: 0.3s; transition: 0.3s; } @media screen and (max-width: 768px) { .c-footer-container__inner--about .c-footer-container__inner-btns > a > .c-footer-container__inner-btn::after { width: 20px; height: 12px; } } .c-contact-head { max-width: 600px; width: 100%; margin: 0 auto; } .c-contact-head > p { margin-top: 45px; font-size: clamp(1.6rem, 1vw, 1.6rem); font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; text-align: left; } .c-contact-head > p.c-contact-head__top { font-size: clamp(2rem, 1.875vw, 3rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } .c-contact-head > p.c-contact-head--recruit { text-align: left; } @media screen and (max-width: 576px) { .c-contact-head > p.c-contact-head--recruit { text-align: center; } } .c-contact-head > p a { color: #0066FF; } .c-contact-head__step { max-width: 474px; width: 100%; margin: 0 auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: 87px; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } @media screen and (max-width: 576px) { .c-contact-head__step { max-width: 348px; } } .c-contact-head__step-box { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 8px; } .c-contact-head__step-box > span { display: block; font-size: clamp(1.6rem, 1vw, 1.6rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #BCBCBC; font-family: "Noto Sans JP", sans-serif; } .c-contact-head__step-box:last-of-type .c-contact-head__step-item::after { content: ""; display: none; } .c-contact-head__step-box--now .c-contact-head__step-item { background: #ff5638; font-size: clamp(1.8rem, 2vw, 3.2rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ffffff; } .c-contact-head__step-box--now > span { font-size: clamp(1.6rem, 1vw, 1.6rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } .c-contact-head__step-item { width: 100px; height: 100px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background: #ffffff; border: 1px solid #ff5638; border-radius: 50%; font-size: clamp(1.8rem, 2vw, 3.2rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #BCBCBC; font-family: "Inter", serif; position: relative; } .c-contact-head__step-item::after { content: ""; width: 88px; height: 1px; background: #ff5638; position: absolute; top: 50%; right: -88px; -webkit-transform: translateY(-50%); transform: translateY(-50%); } @media screen and (max-width: 576px) { .c-contact-head__step-item { width: 58px; height: 58px; } } .p-front-fv { height: calc(100vh - 80px); padding: 0; position: relative; } @media screen and (max-width: 1024px) { .p-front-fv { height: calc(100vh - 68px); margin-top: 0; } } .p-front-fv__inner { height: 100%; position: relative; overflow: clip; z-index: 0; } .p-front-fv__inner::after { content: ""; width: 100%; height: 100%; background: rgba(39, 39, 39, 0.1); position: absolute; left: 0; top: 0; z-index: 1; } .p-front-fv__inner > img { width: 100%; height: 100%; position: relative; z-index: 0; overflow: hidden; -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 768px) { .p-front-fv__inner > img { -o-object-position: 64%; object-position: 64%; } } .p-front-fv__inner > h2 { position: absolute; display: block; width: 80%; top: 60%; left: 80px; z-index: 10; font-size: clamp(3.2rem, 4.75vw, 7.6rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.25; color: #ffffff; text-shadow: 0 3px 6px rgba(0, 0, 0, 0.16); } @media screen and (max-width: 768px) { .p-front-fv__inner > h2 { width: 100%; left: 10px; top: 55%; } } .p-front-fv__inner > h2 > span { position: absolute; top: 10%; left: 5%; font-size: clamp(3.4rem, 6.125vw, 9.8rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1; color: rgba(255, 255, 255, 0.2); font-family: "Inter", serif; text-shadow: 0 0 0px rgba(0, 0, 0, 0); } @media screen and (max-width: 768px) { .p-front-fv__inner > h2 > span { top: -14%; } } .p-front-fv__inner-tag { position: absolute; right: 80px; bottom: 45px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 22px; z-index: 10; } @media screen and (max-width: 768px) { .p-front-fv__inner-tag { width: 240px; right: 10px; bottom: 30px; gap: 16px; } } .p-front-fv__inner-tag > p { font-size: clamp(1.2rem, 0.875vw, 1.4rem); font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 1.5; color: #ffffff; } .p-front-fv__inner-item { max-width: 392px; height: auto; width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; border-radius: 6px; background: #ffffff; } @media screen and (max-width: 768px) { .p-front-fv__inner-item { width: 211px; padding: 7px; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; margin-left: auto; } } .p-front-topics { width: 100%; background: #ffffff; } .p-front-topics__inner > a { max-width: 1140px; width: 100%; margin: 0 auto; padding: 20px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 768px) { .p-front-topics__inner > a { padding: 16px 22px 16px 10px; } } @media screen and (max-width: 768px) { .p-front-topics__inner > a > p { display: -webkit-box; overflow: hidden; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 2; max-height: 44px; } .p-front-topics__inner > a > p > span { display: block; } } .p-front-topics__title { position: relative; padding-left: 16px; margin-right: clamp(40px, 5vw, 84px); font-size: clamp(1.4rem, 1vw, 1.6rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; font-family: "Inter", serif; } .p-front-topics__title::before { content: ""; position: absolute; width: 11px; height: 3px; background: #ff5638; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .p-front-topics__cat { height: 22px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; padding: 0 15px; margin-right: clamp(20px, 2vw, 37px); font-size: clamp(1.4rem, 0.875vw, 1.4rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1; color: #ffffff; text-align: center; background: #ff5638; } .p-front-topics__date { margin-right: clamp(16px, 1.5vw, 27px); font-size: clamp(1.2rem, 0.8125vw, 1.3rem); font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #a1a1a1; } .p-front-connect { height: auto; background: url("../../assets/img/common/bg_connect_01.png"); position: relative; background-size: cover; z-index: 0; overflow: hidden; } @media screen and (max-width: 768px) { .p-front-connect { padding-inline: 26px; } } .p-front-connect::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; z-index: 0; background: rgba(255, 255, 255, 0.85); } .p-front-connect__bgbox { width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: 1; } @media screen and (max-width: 768px) { .p-front-connect__bgbox { height: 50%; } } .p-front-connect__bgbox > img { position: absolute; opacity: 0.16; } .p-front-connect__bgbox > img:nth-of-type(1) { max-width: 628px; width: 100%; overflow: hidden; left: 0; top: 82px; } @media screen and (max-width: 1024px) { .p-front-connect__bgbox > img:nth-of-type(1) { max-width: 50vw; } } @media screen and (max-width: 768px) { .p-front-connect__bgbox > img:nth-of-type(1) { max-width: 248px; top: 120px; left: -20px; } } .p-front-connect__bgbox > img:nth-of-type(2) { max-width: 370px; width: 100%; height: 282px; right: 0; top: 74px; overflow: hidden; -o-object-fit: cover; object-fit: cover; } @media screen and (max-width: 1024px) { .p-front-connect__bgbox > img:nth-of-type(2) { max-width: 40vw; height: 200px; } } @media screen and (max-width: 768px) { .p-front-connect__bgbox > img:nth-of-type(2) { max-width: 220px; height: 150px; right: auto; top: 36%; left: 0; } } @media screen and (max-width: 576px) { .p-front-connect__bgbox > img:nth-of-type(2) { top: 42%; } } .p-front-connect__bgbox > img:nth-of-type(3) { max-width: 326px; width: 100%; overflow: hidden; left: 65%; top: 20%; } @media screen and (max-width: 1024px) { .p-front-connect__bgbox > img:nth-of-type(3) { max-width: 30vw; } } @media screen and (max-width: 768px) { .p-front-connect__bgbox > img:nth-of-type(3) { max-width: 208px; right: -20px; top: 25%; left: auto; bottom: auto; } } .p-front-connect__inner { padding: 120px 0 0; position: relative; z-index: 1; } @media screen and (max-width: 768px) { .p-front-connect__inner { padding-top: 62px; } } .p-front-connect__inner > h2 { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto 60px; font-size: clamp(2rem, 2.8125vw, 4.5rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1; color: #272727; text-align: center; position: relative; z-index: 2; } .p-front-connect__inner > h2::after { content: ""; position: absolute; bottom: -3px; left: 0; width: 100%; height: 7px; background: #ff5638; z-index: -1; } .p-front-connect__inner > p { max-width: 690px; width: 100%; margin: 0 auto 26px; font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; text-align: center; } .p-front-connect__inner > a { display: block; max-width: 325px; width: 100%; padding: 12px 18px; margin: 102px auto 0; background: #1E2753; position: relative; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-filter: drop-shadow(6px 6px rgba(30, 39, 83, 0.3)); filter: drop-shadow(6px 6px rgba(30, 39, 83, 0.3)); top: 0; left: 0; transition: all 0.3s ease-out; } @media screen and (max-width: 768px) { .p-front-connect__inner > a { margin: 86px auto 0; } } .p-front-connect__inner > a:hover { top: 3px; left: 3px; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-filter: drop-shadow(0px 0px rgba(30, 39, 83, 0.3)); filter: drop-shadow(0px 0px rgba(30, 39, 83, 0.3)); } @media screen and (max-width: 768px) { .p-front-connect__inner > a:hover { top: 0; left: 0; -webkit-filter: drop-shadow(6px 6px rgba(30, 39, 83, 0.3)); filter: drop-shadow(6px 6px rgba(30, 39, 83, 0.3)); } } .p-front-connect__inner > a:hover > span::after { -webkit-transition: background-position 0.3s ease-out; transition: background-position 0.3s ease-out; background-position: 0% 100%; } @media screen and (max-width: 768px) { .p-front-connect__inner > a:hover > span::after { background-position: 100% 0%; } } .p-front-connect__inner > a > span { display: block; width: 100%; padding-bottom: 2px; position: relative; font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ffffff; border-bottom: 1px solid #ff5638; } .p-front-connect__inner > a > span::after { content: ""; display: block; width: 15px; height: 10px; position: absolute; top: 50%; right: 0px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-image: url("../../assets/img/icon/ico_arrow_02.svg"); background-repeat: no-repeat; background-size: 200%; background-position: 100% 0%; -webkit-transition: 0.3s; transition: 0.3s; } .p-front-connect__inner-content { margin-top: 148px; } @media screen and (max-width: 768px) { .p-front-connect__inner-content { margin-top: 48px; } } .p-front-connect__inner-content > h3 { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto 96px; font-size: clamp(3.4rem, 4.125vw, 6.6rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1; color: #272727; font-family: "Inter", serif; text-align: center; position: relative; z-index: 2; } .p-front-connect__inner-content > h3 > span { display: block; font-size: clamp(1.8rem, 1.25vw, 2rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1; color: #272727; font-family: "Noto Sans JP", sans-serif; } .p-front-connect__inner-content > h3::after { content: ""; position: absolute; bottom: 24px; left: 0; width: 100%; height: 7px; background: #ff5638; z-index: -1; } @media screen and (max-width: 768px) { .p-front-connect__inner-content > h3::after { bottom: 20px; } } .p-front-connect__inner-content-intro { max-width: 505px; width: 100%; margin: 0 auto 20px; font-size: clamp(1.8rem, 1.25vw, 2rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; text-align: center; } @media screen and (max-width: 768px) { .p-front-connect__inner-content-intro { margin: 0 auto 30px; } } .p-front-connect__inner-info { max-width: 702px; width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 24px; margin: 0 auto; position: relative; background: url("../../assets/img/common/bg_infographics_01.svg") no-repeat; background-size: auto; background-position: center; } @media screen and (max-width: 1024px) { .p-front-connect__inner-info { background-size: 90%; } } @media screen and (max-width: 768px) { .p-front-connect__inner-info { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 12px; background: none; } } .p-front-connect__inner-info-item { max-width: 340px; width: 48%; height: 378px; padding: 32px 54px; margin: 0 auto; position: relative; z-index: 0; overflow: visible; } @media screen and (max-width: 768px) { .p-front-connect__inner-info-item { width: 100%; } } @media (max-width: 400px) { .p-front-connect__inner-info-item { max-width: 264px; width: 100%; height: 294px; padding: 32px 22px 62px 38px; } } .p-front-connect__inner-info-item > img { position: absolute; width: 98px; height: 98px; } @media (max-width: 400px) { .p-front-connect__inner-info-item > img { width: 76px; height: 76px; } } .p-front-connect__inner-info-item:nth-of-type(2) { padding-top: 120px; background-image: url("../../assets/img/common/bg_lt_01.svg"); background-repeat: no-repeat; background-size: cover; background-position: center; } @media screen and (max-width: 768px) { .p-front-connect__inner-info-item:nth-of-type(2) { background-image: url("../../assets/img/common/bg_rt_01.svg"); } } @media (max-width: 400px) { .p-front-connect__inner-info-item:nth-of-type(2) { padding-top: 84px; } } .p-front-connect__inner-info-item:nth-of-type(2) > img { top: 18px; left: 28px; } @media screen and (max-width: 768px) { .p-front-connect__inner-info-item:nth-of-type(2) > img { top: 18px; right: 28px; left: auto; } } @media (max-width: 400px) { .p-front-connect__inner-info-item:nth-of-type(2) > img { top: 16px; right: 24px; } } .p-front-connect__inner-info-item:nth-of-type(3) { padding-top: 120px; background-image: url("../../assets/img/common/bg_rt_01.svg"); background-repeat: no-repeat; background-size: cover; background-position: center; } @media (max-width: 400px) { .p-front-connect__inner-info-item:nth-of-type(3) { padding-top: 84px; } } .p-front-connect__inner-info-item:nth-of-type(3) > img { top: 18px; right: 28px; } @media (max-width: 400px) { .p-front-connect__inner-info-item:nth-of-type(3) > img { top: 16px; right: 24px; } } .p-front-connect__inner-info-item:nth-of-type(4) { padding-top: 80px; background-image: url("../../assets/img/common/bg_lb_01.svg"); background-repeat: no-repeat; background-size: cover; background-position: center; } @media screen and (max-width: 768px) { .p-front-connect__inner-info-item:nth-of-type(4) { padding-top: 120px; background-image: url("../../assets/img/common/bg_rt_01.svg"); } } @media (max-width: 400px) { .p-front-connect__inner-info-item:nth-of-type(4) { padding-top: 84px; } } .p-front-connect__inner-info-item:nth-of-type(4) > img { bottom: 22px; left: 28px; } @media screen and (max-width: 768px) { .p-front-connect__inner-info-item:nth-of-type(4) > img { top: 18px; right: 28px; left: auto; } } @media (max-width: 400px) { .p-front-connect__inner-info-item:nth-of-type(4) > img { top: 16px; right: 24px; } } .p-front-connect__inner-info-item:nth-of-type(5) { padding-top: 80px; background-image: url("../../assets/img/common/bg_rb_01.svg"); background-repeat: no-repeat; background-size: cover; background-position: center; } @media screen and (max-width: 768px) { .p-front-connect__inner-info-item:nth-of-type(5) { padding-top: 120px; background-image: url("../../assets/img/common/bg_rt_01.svg"); } } @media (max-width: 400px) { .p-front-connect__inner-info-item:nth-of-type(5) { padding-top: 84px; } } .p-front-connect__inner-info-item:nth-of-type(5) > img { bottom: 22px; right: 28px; } @media screen and (max-width: 768px) { .p-front-connect__inner-info-item:nth-of-type(5) > img { top: 18px; right: 28px; } } @media (max-width: 400px) { .p-front-connect__inner-info-item:nth-of-type(5) > img { top: 16px; right: 24px; } } .p-front-connect__inner-info-item--center { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); z-index: 10; } @media screen and (max-width: 768px) { .p-front-connect__inner-info-item--center { display: none; } } .p-front-connect__inner-info-item > h3 { font-size: clamp(2rem, 1.625vw, 2.6rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #2D3B7C; } .p-front-connect__inner-info-item > p { margin-top: 12px; font-size: clamp(1.4rem, 1vw, 1.6rem); font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } .p-front-connect__inner-horizontal { overflow: hidden; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; width: 100vw; margin-inline: calc(50% - 50vw); } .p-front-connect__inner-horizontal-item { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; white-space: nowrap; font-size: clamp(4.2rem, 7.3125vw, 11.7rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: rgba(217, 217, 217, 0.4); } .p-front-connect__inner-horizontal-item:nth-child(odd) { -webkit-animation: MoveLeft 48s -24s infinite linear; animation: MoveLeft 48s -24s infinite linear; } .p-front-connect__inner-horizontal-item:nth-child(even) { -webkit-animation: MoveLeft2 48s infinite linear; animation: MoveLeft2 48s infinite linear; } @-webkit-keyframes MoveLeft { from { -webkit-transform: translateX(100%); transform: translateX(100%); } to { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @keyframes MoveLeft { from { -webkit-transform: translateX(100%); transform: translateX(100%); } to { -webkit-transform: translateX(-100%); transform: translateX(-100%); } } @-webkit-keyframes MoveLeft2 { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(-200%); transform: translateX(-200%); } } @keyframes MoveLeft2 { from { -webkit-transform: translateX(0); transform: translateX(0); } to { -webkit-transform: translateX(-200%); transform: translateX(-200%); } } .p-front-movie { padding-inline: calc(var(--inline-outer-size, 0) / 2); } .p-front-movie__inner { max-width: 1440px; width: 100%; margin: 0 auto; padding: 54px 80px; background: #ffffff; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 62px; } @media screen and (max-width: 963px) { .p-front-movie__inner { padding: 32px 20px 46px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 32px; } } .p-front-movie__item { max-width: 685px; width: 100%; border-radius: 14px; overflow: clip; } .p-front-movie__item video { max-width: 685px; width: 100%; border-radius: 14px; } .p-front-movie__summary-title { font-size: clamp(2rem, 1.5vw, 2.4rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } .p-front-movie__summary-details { margin-top: 24px; font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } @media screen and (max-width: 963px) { .p-front-movie__summary-details { margin-top: 20px; } } .p-front-service { width: 100%; padding-inline: var(--inline-outer-size, 0); background: url("../../assets/img/common/bg_service_01.png") no-repeat; background-size: cover; background-position: top right; margin-top: 0; } .p-front-service__inner { max-width: 1280px; margin: 0 auto; padding-block: 152px 90px; } @media screen and (max-width: 963px) { .p-front-service__inner { padding-block: 72px 64px; } } .p-front-service__inner-intro { max-width: 768px; width: 100%; margin-top: 48px; } .p-front-service__inner-intro > p { font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ffffff; } .p-front-service__inner > .l-section-title { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } .p-front-service__content { margin-top: 78px; background: #ffffff; -webkit-filter: drop-shadow(6px 6px rgba(30, 39, 83, 0.3)); filter: drop-shadow(6px 6px rgba(30, 39, 83, 0.3)); } .p-front-service__content-intro { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 963px) { .p-front-service__content-intro { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .p-front-service__content-image { width: 45%; max-height: 332px; overflow: clip; } @media screen and (max-width: 963px) { .p-front-service__content-image { width: 100%; } } .p-front-service__content-image > img { -o-object-fit: contain; object-fit: contain; width: 100%; height: 100%; } .p-front-service__content-summary { width: 55%; padding: 62px 76px; } @media screen and (max-width: 963px) { .p-front-service__content-summary { width: 100%; padding: 28px 34px; } } .p-front-service__content-summary > h3 { padding-left: 24px; font-size: clamp(2.2rem, 2.8125vw, 4.5rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; position: relative; } @media screen and (max-width: 768px) { .p-front-service__content-summary > h3 { margin-bottom: 10px; } } .p-front-service__content-summary > h3::before { position: absolute; content: ""; width: 5px; height: 86%; left: 0; top: 0; background: #ff5638; } .p-front-service__content-summary > h3 > span { display: block; font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ff5638; line-height: 1; top: 7px; position: relative; } @media screen and (max-width: 768px) { .p-front-service__content-summary > h3 > span { line-height: 1.75; } } .p-front-service__content-summary--single > h3 { line-height: 1.25; margin-bottom: 24px; } .p-front-service__content-summary--single > h3::before { content: ""; height: 100%; } .p-front-service__content-point { padding: 42px 56px 150px; background: #FDF5F5; position: relative; } @media screen and (max-width: 963px) { .p-front-service__content-point { padding: 42px 24px 130px; } } .p-front-service__content-point > h3 { font-size: clamp(2rem, 1.5vw, 2.4rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; text-align: center; } .p-front-service__content-point > .c-btn { position: absolute; bottom: 45px; right: 32px; } @media screen and (max-width: 768px) { .p-front-service__content-point > .c-btn { max-width: 276px; margin: 0 auto; right: auto; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } } .p-front-service__content-point > .c-btn:hover { top: unset; left: unset; bottom: 42px; right: 28px; -webkit-filter: drop-shadow(0px 0px rgba(30, 39, 83, 0.3)); filter: drop-shadow(0px 0px rgba(30, 39, 83, 0.3)); } @media screen and (max-width: 768px) { .p-front-service__content-point > .c-btn:hover { top: unset; left: 50%; bottom: 45px; right: unset; -webkit-filter: drop-shadow(6px 6px rgba(30, 39, 83, 0.3)); filter: drop-shadow(6px 6px rgba(30, 39, 83, 0.3)); } } .p-front-service__content-point > .c-btn:hover > span::after { -webkit-transition: background-position 0.3s ease-out; transition: background-position 0.3s ease-out; background-position: 0% 100%; } @media screen and (max-width: 768px) { .p-front-service__content-point > .c-btn:hover > span::after { background-position: 100% 0%; } } .p-front-service__point { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: 36px; padding: 16px 0; } @media screen and (max-width: 1280px) { .p-front-service__point { padding: 54px 0 16px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .p-front-service__point-item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; width: 32%; } @media screen and (max-width: 1280px) { .p-front-service__point-item { width: 100%; } } .p-front-service__point-item > span { display: block; width: 100%; height: 1px; margin: 16px auto 30px; background: rgba(255, 86, 56, 0.3); } @media screen and (max-width: 963px) { .p-front-service__point-item > span { margin: 12px auto 16px; } } .p-front-service__point-title { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; } .p-front-service__point-title > h3 { width: 78%; position: relative; font-size: clamp(1.8rem, 1.25vw, 2rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } @media screen and (max-width: 963px) { .p-front-service__point-title > h3 { width: 78%; } } .p-front-service__point-title > h3 > span { position: absolute; top: -48px; left: 4px; font-size: clamp(4.6rem, 3.5vw, 5.6rem); font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 1.75; color: rgba(255, 86, 56, 0.12); font-family: "Inter", serif; } @media screen and (max-width: 1280px) { .p-front-service__point-title > h3 > span { top: -40px; } } .p-front-service__point-title > img { max-width: 58px; width: 100%; height: auto; } @media screen and (max-width: 963px) { .p-front-service__point-title > img { max-width: 44px; } } .p-front-topics__list { margin-top: 0; padding-inline: var(--inline-outer-size, 0); padding-block: 106px; background: #f8efef; } @media screen and (max-width: 1024px) { .p-front-topics__list { padding-block: 62px 72px; } } .p-front-topics__list-inner { max-width: 1280px; width: 100%; margin: 0 auto; } .p-front-topics__list-inner .l-section-title { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto; } .p-front-topics__list-inner .l-section-title > h2 > .en { font-size: clamp(3rem, 4.125vw, 6.6rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1; color: #272727; } .p-front-topics__list-inner .l-section-title > h2 > .ja { padding-left: 0; font-size: clamp(1.6rem, 1.5625vw, 2.5rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; text-align: center; } .p-front-topics__list-inner .c-btn { max-width: 200px; margin: 46px 0 0 auto; background: #ffffff; top: 0; left: 0; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .p-front-topics__list-inner .c-btn:hover { top: 3px; left: 3px; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media screen and (max-width: 768px) { .p-front-topics__list-inner .c-btn:hover { top: 0; left: 0; } } .p-front-topics__list-inner .c-btn > span { font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } .p-front-topics__list-content { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: 68px; margin-top: 26px; } @media screen and (max-width: 1024px) { .p-front-topics__list-content { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 26px; } } @media screen and (max-width: 768px) { .p-front-topics__list-content { margin-top: 60px; } } .p-front-topics__list-cat { max-width: 270px; width: 100%; padding: 30px 36px 40px; background: #ffffff; } @media screen and (max-width: 1024px) { .p-front-topics__list-cat { max-width: 100%; padding: 21px 20px; } } .p-front-topics__list-cat > p { margin-bottom: 24px; font-size: clamp(3rem, 1.875vw, 3rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #2D3B7C; } .p-front-topics__list-cat > .p-front-topics__list-form { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 22px; } @media screen and (max-width: 1024px) { .p-front-topics__list-cat > .p-front-topics__list-form { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } } @media screen and (max-width: 768px) { .p-front-topics__list-cat > .p-front-topics__list-form { gap: 18px 12px; } } @media screen and (max-width: 576px) { .p-front-topics__list-cat > .p-front-topics__list-form { gap: 18px 0; } } .p-front-topics__list-cat > .p-front-topics__list-form > button { padding-left: 20px; font-size: clamp(1.6rem, 1.25vw, 2rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #1E2753; cursor: pointer; position: relative; } @media screen and (max-width: 963px) { .p-front-topics__list-cat > .p-front-topics__list-form > button { padding-inline: 16px 10px; } } @media screen and (max-width: 576px) { .p-front-topics__list-cat > .p-front-topics__list-form > button { width: 50%; padding-inline: 16px 0; } } .p-front-topics__list-cat > .p-front-topics__list-form > button.active::before { content: ""; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 12.5px; height: 12.5px; background: url("../../assets/img/icon/ico_active_01.svg") no-repeat; background-size: cover; } @media screen and (max-width: 963px) { .p-front-topics__list-cat > .p-front-topics__list-form > button.active::before { width: 10px; height: 10px; top: 55%; } } .p-front-topics__list-container { width: 100%; padding: 36px 46px; background-color: #ffffff; } @media screen and (max-width: 1024px) { .p-front-topics__list-container { padding: 26px 20px; } } .p-front-topics__list-item { margin-bottom: 34px; border-bottom: 1px solid rgba(112, 112, 112, 0.2); } .p-front-topics__list-item:last-of-type { margin-bottom: 0; border-bottom: none; } @media screen and (max-width: 1024px) { .p-front-topics__list-item { margin-bottom: 16px; } } .p-front-topics__list-item > a > p:nth-of-type(1) > span.list-info { padding: 2px 14px; margin-right: 12px; font-size: clamp(1.6rem, 1vw, 1.6rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ffffff; text-align: center; background: #2D3B7C; } .p-front-topics__list-item > a > p:nth-of-type(1) > span.list-new { padding: 2px 14px; margin-right: 12px; font-size: clamp(1.6rem, 1vw, 1.6rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ffffff; text-align: center; background: #ff5638; } .p-front-topics__list-item > a > p:nth-of-type(1) > span.list-event { padding: 2px 14px; margin-right: 12px; font-size: clamp(1.6rem, 1vw, 1.6rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ffffff; text-align: center; background: #757da7; } .p-front-topics__list-item > a > p:nth-of-type(1) > span:nth-of-type(2) { font-size: clamp(1.6rem, 1vw, 1.6rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: rgba(39, 39, 39, 0.26); } .p-front-topics__list-item > a > p:nth-of-type(2) { margin-block: 16px 18px; font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } @media screen and (max-width: 1024px) { .p-front-topics__list-item > a > p:nth-of-type(2) { margin-block: 14px 16px; } } .p-front-company { padding: 0; padding-bottom: 300px; margin-top: 170px; overflow-x: clip; } @media screen and (max-width: 1024px) { .p-front-company { margin-top: 22vw; padding-bottom: 70px; } } .p-front-company__inner { max-width: 1280px; width: 80%; padding-block: 66px; padding-inline: var(--inline-outer-size, 0); background: url("../../assets/img/common/bg_company_01.png"); position: relative; } @media screen and (max-width: 1024px) { .p-front-company__inner { padding-top: 200px; width: 95%; } } .p-front-company__inner .l-section-title { position: relative; left: -2vw; } @media screen and (max-width: 768px) { .p-front-company__inner .l-section-title { left: 0; } } .p-front-company__inner > p { max-width: 560px; width: 40vw; margin-top: 44px; font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ffffff; } @media screen and (max-width: 768px) { .p-front-company__inner > p { width: 100%; } } .p-front-company__inner-btn { max-width: 560px; width: 40vw; } @media screen and (max-width: 768px) { .p-front-company__inner-btn { width: 100%; } } .p-front-company__inner .c-btn { max-width: 200px; margin: 46px 0 0 auto; background: #ffffff; top: 0; left: 0; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .p-front-company__inner .c-btn:hover { top: 3px; left: 3px; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media screen and (max-width: 768px) { .p-front-company__inner .c-btn:hover { top: 0; left: 0; } } @media screen and (max-width: 768px) { .p-front-company__inner .c-btn { margin: 46px auto 0; } } .p-front-company__inner .c-btn > span { font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } .p-front-company__inner-image { position: absolute; left: 52vw; top: -40px; max-width: 50vw; width: 100%; max-height: 30vw; overflow: clip; } @media screen and (max-width: 1024px) { .p-front-company__inner-image { max-width: 90vw; height: clamp(210px, 40vw, 520px); max-height: 40vw; top: auto; bottom: 70%; left: 20%; } } @media screen and (max-width: 768px) { .p-front-company__inner-image { bottom: 75%; max-height: inherit; } } .p-front-company__inner-image > img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; -o-object-position: top; object-position: top; } .p-service-links { width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 80px; padding-block: 16px 18px; padding-inline: var(--inline-outer-size, 0); background: #ffffff; } @media screen and (max-width: 768px) { .p-service-links { padding: 30px 5vw 36px; gap: 5vw; } } .p-service-links__item { max-width: 192px; width: 100%; } @media screen and (max-width: 768px) { .p-service-links__item:nth-of-type(1) { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } } @media screen and (max-width: 768px) { .p-service-links__item { max-width: 163px; } } .p-service-links__item > .c-btn { margin: 0; padding: 0; background: #ffffff; -webkit-filter: none; filter: none; } .p-service-links__item > .c-btn > span { font-size: clamp(1.6rem, 1vw, 1.6rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } .p-service-links__item > .c-btn > span::after { content: ""; width: 15px; height: 15px; background-image: url("../../assets/img/icon/ico_arrow_dawn_01.svg"); background-size: 100%; background-position: center; } .p-service-links__item > .c-btn:hover { top: 0; left: 0; } .p-service-links__item > .c-btn:hover > span::after { background-position: center; } .p-service-links__merit.first { padding: 20px 0 15px; } .p-service-links__merit.second { padding: 15px 0 25px; } .p-service-links__merit .p-service-links__item { max-width: none; min-width: 192px; width: auto; } .p-service-links__merit .p-service-links__item .c-btn > span { padding-right: 40px; } .p-service-merit { margin-top: 0; padding-block: 90px 230px; padding-inline: var(--inline-outer-size, 0); background-size: cover; } @media screen and (max-width: 768px) { .p-service-merit { padding-block: 70px 120px; } } .p-service-merit__container { max-width: 1280px; width: 100%; margin: 96px auto 0; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 32px; } @media (max-width: 1146px) { .p-service-merit__container { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } } @media screen and (max-width: 768px) { .p-service-merit__container { -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .p-service-merit__container-item { max-width: 402px; width: 31%; padding: 40px 0; background: #ffffff; -webkit-filter: drop-shadow(8px 8px 0 #DFE1EB); filter: drop-shadow(8px 8px 0 #DFE1EB); } @media (max-width: 1146px) { .p-service-merit__container-item { width: 45%; } } @media screen and (max-width: 768px) { .p-service-merit__container-item { width: 100%; padding: 30px 0; } } .p-service-merit__container-title { padding: 0 52px; } @media screen and (max-width: 768px) { .p-service-merit__container-title { padding: 0 30px 0 52px; } } .p-service-merit__container-title > p { min-height: 86px; font-size: clamp(2rem, 1.5625vw, 2.5rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ff5638; position: relative; } @media screen and (max-width: 768px) { .p-service-merit__container-title > p { height: 70px; } } .p-service-merit__container-title > p > span { position: absolute; right: -34px; bottom: 0; z-index: -1; font-size: clamp(10rem, 6.25vw, 10rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1; color: rgba(30, 39, 83, 0.1); font-family: "Inter", serif; } @media screen and (max-width: 768px) { .p-service-merit__container-title > p > span { right: -16px; } } .p-service-merit__container-title > p::before { content: ""; position: absolute; left: -52px; top: 20px; width: 36px; height: 4px; background: #ff5638; } .p-service-merit__container-summary { margin-top: 40px; padding: 0 clamp(20px, 2vw, 52px); } @media screen and (max-width: 768px) { .p-service-merit__container-summary { margin-top: 30px; } } .p-service-merit__container-summary > p { margin-top: 38px; font-size: clamp(1.8rem, 1.125vw, 1.8rem); font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; text-align: center; } @media screen and (max-width: 768px) { .p-service-merit__container-summary > p { margin-top: 30px; } } .p-service-merit__container-image { max-width: 294px; width: 100%; margin: 0 auto; overflow: clip; } .p-service-merit__container-image > img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-service-link__content { margin-block: 58px 86px; } .p-service-link__content > p { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 66px auto 50px; padding: 16px; font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #1E2753; text-align: center; } .p-service-link__content > .p-service-links { background: none; } .p-service-link__content > .p-service-links > .p-service-links__item { max-width: 378px; height: 86px; } .p-service-link__content > .p-service-links > .p-service-links__item > .c-btn { margin: 0 auto; height: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 12px 18px; margin: 0 auto; } .modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); padding: 40px 20px; overflow: auto; opacity: 0; visibility: hidden; -webkit-transition: 0.3s; transition: 0.3s; -webkit-box-sizing: border-box; box-sizing: border-box; } .modal::before { content: ""; display: inline-block; vertical-align: middle; height: 100%; margin-left: -0.2em; } .modal.is-active { opacity: 1; visibility: visible; z-index: 10000; } .modal-container { position: relative; display: inline-block; vertical-align: middle; max-width: 1440px; width: 90%; height: 80vh; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } @media screen and (max-width: 963px) { .modal-container { height: 90vh; } } .modal-content { height: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 4.5vw 5vw; background: #fff; } @media screen and (max-width: 963px) { .modal-content { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; overflow-y: scroll; } } .modal-content__summary { width: 48%; } @media screen and (max-width: 963px) { .modal-content__summary { width: 100%; } } .modal-content__summary > h3 { display: block; padding-left: 0; margin-bottom: 94px; font-size: clamp(1.8rem, 2.5vw, 4rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.5; color: #272727; font-family: "Noto Sans JP", sans-serif; position: relative; } @media screen and (max-width: 963px) { .modal-content__summary > h3 { display: none; } } .modal-content__summary > h3::before { content: ""; position: absolute; left: 0; bottom: -4px; width: clamp(22px, 2.5vw, 35px); height: 3px; background: #ff5638; } .modal-content__summary > p { font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } .modal-content__summary > p:nth-of-type(1) { margin-bottom: 24px; } .modal-content__image { max-width: 50%; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } @media screen and (max-width: 963px) { .modal-content__image { max-width: 80%; -webkit-box-ordinal-group: 0; -webkit-order: -1; -ms-flex-order: -1; order: -1; margin-bottom: 40px; } } .modal-content__image > h3 { display: none; } @media screen and (max-width: 963px) { .modal-content__image > h3 { display: block; margin-bottom: 30px; font-size: clamp(1.8rem, 2.5vw, 4rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.5; color: #1E2753; font-family: "Noto Sans JP", sans-serif; text-align: center; } } .modal-close { position: absolute; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; top: -20px; right: -20px; width: 40px; height: 40px; color: #fff; background: #1E2753; border-radius: 50%; cursor: pointer; } .p-service-links__merit.first { background: #fdf5f5; } .p-service-links__merit.first.benefit { padding: 20px 5% 25px; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 50px; } @media screen and (max-width: 963px) { .p-service-links__merit.first.benefit { gap: 20px 69px; } } @media screen and (max-width: 768px) { .p-service-links__merit.first.benefit { padding: 30px 5% 35px; } } .p-service-links__merit.first .p-service-links__item a { background: #fdf5f5; } .p-service-links__merit.first .pc-none { display: none; } @media screen and (max-width: 963px) { .p-service-links__merit.first { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; padding: 30px 5% 35px; gap: 20px 69px; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } .p-service-links__merit.first .p-service-links__item { min-width: 123px; } .p-service-links__merit.first .p-service-links__item span { font-size: 14px; padding-right: 30px; } .p-service-links__merit.first .pc-none { display: block; } } .p-service-links__merit.second { background: #fdf5f5; } .p-service-links__merit.second .p-service-links__item a { background: #fdf5f5; } @media screen and (max-width: 963px) { .p-service-links__merit.second { display: none; } } .p-merit-first { margin-top: 0; margin-bottom: 105px; padding-top: 92px; padding-bottom: 105px; padding-inline: var(--inline-outer-size, 0); background: url("../../assets/img/common/bg_service_01.png") no-repeat; background-size: cover; } @media screen and (max-width: 768px) { .p-merit-first { padding: 50px 2.5%; } } .p-merit-first__inner { width: 95%; margin: 0 auto; } .p-merit-first__example { margin-top: 53px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; gap: 12px; } @media screen and (max-width: 963px) { .p-merit-first__example { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } } @media screen and (max-width: 768px) { .p-merit-first__example { margin-top: 35px; gap: 12px; } } .p-merit-first__example-content { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 22px; width: calc((100% - 378px - 24px) / 2); } @media screen and (max-width: 1200px) { .p-merit-first__example-content { width: calc((100% - 320px - 24px) / 2); } } @media screen and (max-width: 963px) { .p-merit-first__example-content { width: 100%; max-width: 500px; } } @media screen and (max-width: 768px) { .p-merit-first__example-content { gap: 12px; } } .p-merit-first__example-content div { border: 5px solid #cdd6dd; background: #fff; border-radius: 100px; height: 120px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 768px) { .p-merit-first__example-content div { padding: 20px 0; height: auto; } } .p-merit-first__example-content div p { width: 65%; margin: 0 auto; font-weight: 500; } @media screen and (max-width: 768px) { .p-merit-first__example-content div p { width: 75%; } } .p-merit-first__example-content div p span { text-decoration: underline; -webkit-text-decoration-color: #ff5638; text-decoration-color: #ff5638; text-underline-offset: 1.5px; } .p-merit-first__example-svg { width: 378px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } @media screen and (max-width: 1200px) { .p-merit-first__example-svg { width: 320px; } } @media screen and (max-width: 963px) { .p-merit-first__example-svg { -webkit-box-ordinal-group: 0; -webkit-order: -1; -ms-flex-order: -1; order: -1; } } @media screen and (max-width: 768px) { .p-merit-first__example-svg { width: 202px; } } .p-merit-first__flow { font-size: 31px; font-weight: bold; color: #fff; padding-top: 75px; text-align: center; position: relative; } @media screen and (max-width: 768px) { .p-merit-first__flow { font-size: 20px; padding-top: 50px; } .p-merit-first__flow br { display: none; } } .p-merit-first__flow:before { position: absolute; content: url("../../assets/img/common/flow_blue.svg"); top: 10px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); } .p-merit-introduction { margin-bottom: 125px; } @media screen and (max-width: 768px) { .p-merit-introduction { margin-bottom: 60px; } } .p-merit-introduction__inner { margin: 0 auto; max-width: 1260px; } .p-merit-introduction__list { margin-top: 80px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 48px 24px; } @media screen and (max-width: 768px) { .p-merit-introduction__list { margin-top: 43px; gap: 16px; } } .p-merit-introduction__list-item { width: calc((100% - 48px) / 3); background: #fff; padding: 22px 35px 30px; -webkit-filter: drop-shadow(8px 8px 0 #dfe1eb); filter: drop-shadow(8px 8px 0 #dfe1eb); cursor: pointer; } .p-merit-introduction__list-item:nth-child(n+4) { display: none; } @media screen and (max-width: 963px) { .p-merit-introduction__list-item { width: calc((100% - 24px) / 2); } .p-merit-introduction__list-item:nth-child(4) { display: block; } .p-merit-introduction__list-item:nth-child(n+5) { display: none; } } @media screen and (max-width: 768px) { .p-merit-introduction__list-item { width: 100%; padding: 20px 15px; } .p-merit-introduction__list-item:nth-child(n+4) { display: none; } } .p-merit-introduction__list-item:hover .p-merit-introduction__list-btn { background: rgba(45, 59, 124, 0.8196078431); } .p-merit-introduction__list-category { padding: 4px 16px; background: #2d3b7c; border-radius: 50px; color: #fff; font-weight: 500; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } .p-merit-introduction__list-img { margin: 20px 0 22px; aspect-ratio: 328/203; position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; border-radius: 3px; } .p-merit-introduction__list-img img { display: block; } .p-merit-introduction__list-title { font-size: 16px; font-weight: 500; display: -webkit-box !important; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; height: 3.5em; word-break: break-all; } .p-merit-introduction__list-bottom { margin-top: 25px; padding-top: 18px; border-top: 1px solid #cdcdcd; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; } @media screen and (max-width: 768px) { .p-merit-introduction__list-bottom { margin-top: 20px; } } .p-merit-introduction__list-tag { font-size: 14px; font-weight: 500; color: #9fa5a9; } .p-merit-introduction__list-btn { width: 47px; height: 47px; background: #2d3b7c; border-radius: 50px; position: relative; -webkit-transition: 0.3s; transition: 0.3s; } @media screen and (max-width: 768px) { .p-merit-introduction__list-btn { width: 37px; height: 37px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } } .p-merit-introduction__list-btn::before { content: ""; display: inline-block; width: 25px; height: 2px; background-color: #fff; position: absolute; right: 11px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); -webkit-transition: opacity 0.5s; transition: opacity 0.5s; } @media screen and (max-width: 768px) { .p-merit-introduction__list-btn::before { width: 20px; right: 8.5px; } } .p-merit-introduction__list-btn::after { content: ""; display: inline-block; width: 25px; height: 2px; background-color: #fff; position: absolute; right: 11px; top: 50%; -webkit-transform: translateY(-50%) rotate(90deg); transform: translateY(-50%) rotate(90deg); -webkit-transition: -webkit-transform 0.5s; transition: -webkit-transform 0.5s; transition: transform 0.5s; transition: transform 0.5s, -webkit-transform 0.5s; } @media screen and (max-width: 768px) { .p-merit-introduction__list-btn::after { width: 20px; right: 8.5px; } } .p-merit-introduction .c-btn { max-width: 200px; margin: 90px auto 0; background: #ffffff; top: 0; left: 0; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; cursor: pointer; } @media screen and (max-width: 768px) { .p-merit-introduction .c-btn { margin-top: 40px; } } .p-merit-introduction .c-btn:hover { top: 3px; left: 3px; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .p-merit-introduction .c-btn span { font-size: clamp(1.2rem, 1.125vw, 1.8rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } .p-merit-introduction .c-btn span::after { content: ""; width: 15px; height: 15px; background-image: url(../../assets/img/icon/ico_modal_01.svg); background-size: 100%; background-position: center; } .p-merit-lecturer { margin-bottom: 100px; } @media screen and (max-width: 768px) { .p-merit-lecturer { margin-bottom: 70px; } } .p-merit-lecturer__inner { margin: 0 auto; max-width: 1260px; } .p-merit-lecturer__list { margin-top: 85px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 46px; } @media screen and (max-width: 963px) { .p-merit-lecturer__list { -webkit-flex-wrap: unset; -ms-flex-wrap: unset; flex-wrap: unset; gap: 0; } .p-merit-lecturer__list.pc-only { display: none; } } .p-merit-lecturer__list-item { width: calc((100% - 46px) / 2); background: #fff; padding: 32px 45px 35px 35px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 42px; border: 1px solid #2d3b7c; } .p-merit-lecturer__list-category { padding: 4px 16px; background: #2d3b7c; border-radius: 50px; color: #fff; font-weight: 500; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; } @media screen and (max-width: 768px) { .p-merit-lecturer__list-category { font-size: 12px; padding: 2px 22px; } } .p-merit-lecturer__list-img { border: 1px solid #2d3b7c; aspect-ratio: 1/1; position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; border-radius: 100px; width: 157px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } @media screen and (max-width: 768px) { .p-merit-lecturer__list-img { width: 87px; } } .p-merit-lecturer__list-img img { display: block; } .p-merit-lecturer__list-textarea { width: calc(100% - 87px - 12.5px); } .p-merit-lecturer__list-title { font-size: 20px; font-weight: 500; margin: 5px 0 20px; } @media screen and (max-width: 768px) { .p-merit-lecturer__list-title { margin-bottom: 0; margin-top: 9px; font-size: 18px; } } @media screen and (max-width: 768px) { .p-merit-lecturer__list-text { display: none; } } .p-merit-lecturer__list-text.sp-only { display: none; } @media screen and (max-width: 768px) { .p-merit-lecturer__list-text.sp-only { display: block; width: 100%; } } .p-merit-flow { background: #fff8f8; padding-bottom: 250px; padding-top: 92px; } @media screen and (max-width: 768px) { .p-merit-flow { padding-top: 42px; padding-bottom: 65px; } } .p-merit-flow__inner { margin: 0 auto; max-width: 1260px; } .p-merit-flow__list { margin-top: 73px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 55px; background: #fff; padding: 80px 10% 60px; } @media screen and (max-width: 768px) { .p-merit-flow__list { padding: 35px 17px; margin-top: 48px; gap: 20px; } } .p-merit-flow__list-item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; gap: 43px; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: relative; } @media screen and (max-width: 963px) { .p-merit-flow__list-item { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } } @media screen and (max-width: 768px) { .p-merit-flow__list-item { gap: 13.5px; } } .p-merit-flow__list-item.orange .p-merit-flow__list-step { color: #ff5638; } .p-merit-flow__list-item:before { position: absolute; content: ""; width: 2px; height: calc(60px + 50%); top: 50%; background: #cdcdcd; left: 47.5px; } @media screen and (max-width: 768px) { .p-merit-flow__list-item:before { position: absolute; content: ""; width: 2px; height: calc(25px + 100%); top: 29px; background: #cdcdcd; left: 29px; } } .p-merit-flow__list-item:last-child:before { display: none; } .p-merit-flow__list-img { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; display: block; position: relative; z-index: 1; } @media screen and (max-width: 768px) { .p-merit-flow__list-img { width: 58px; } } .p-merit-flow__list-head { width: 210px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } @media screen and (max-width: 963px) { .p-merit-flow__list-head { width: calc(100% - 96px - 43px); } } @media screen and (max-width: 768px) { .p-merit-flow__list-head { width: calc(100% - 58px - 13.5px); } } .p-merit-flow__list-step { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; color: #2d3b7c; font-weight: bold; font-size: 19px; gap: 7px; line-height: 1; } @media screen and (max-width: 768px) { .p-merit-flow__list-step { font-size: 14px; } } .p-merit-flow__list-step span { font-size: 28px; line-height: 1; font-family: "Inter", serif; } @media screen and (max-width: 768px) { .p-merit-flow__list-step span { font-size: 20px; } } .p-merit-flow__list-title { font-size: 25px; font-weight: bold; margin-top: 2.5px; } @media screen and (max-width: 768px) { .p-merit-flow__list-title { font-size: 18px; } } .p-merit-flow__list-text { font-size: 18px; } @media screen and (max-width: 963px) { .p-merit-flow__list-text { margin-top: 20px; } } @media screen and (max-width: 768px) { .p-merit-flow__list-text { font-size: 14px; } } @media screen and (max-width: 963px) { .p-merit-flow__list-text.pc-only { display: none; } } .adds .p-front-service__content-intro { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .adds .p-front-service__content-summary { padding: 40px 53px 0; width: 60%; } @media screen and (max-width: 963px) { .adds .p-front-service__content-summary { width: 100%; padding: 16px 5% 35px; } } .adds .p-front-service__content-image { width: 40%; max-height: 318px; } @media screen and (max-width: 963px) { .adds .p-front-service__content-image { width: 100%; max-height: 332px; } } .adds .p-front-service__content-summary-info { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; gap: 10px; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } .adds .p-front-service__content-summary-info span { padding: 4px 22px; background: #ff5638; border-radius: 50px; color: #fff; font-weight: 500; } @media screen and (max-width: 768px) { .adds .p-front-service__content-summary-info span { padding: 4px 15px; } } .adds .p-front-service__content-summary > h3 { margin: 16px 0; font-size: clamp(2.2rem, 2.6vw, 4.5rem); } @media screen and (max-width: 768px) { .adds .p-front-service__content-summary > h3 { margin: 24px 0; } } .adds .p-front-service__content-summary > h3::before { height: 100%; } .adds .p-front-service__content-point { padding-top: 55px; padding-bottom: 35px; } .adds .p-front-service__content-point-heading { position: relative; margin-bottom: 38px; } @media screen and (max-width: 768px) { .adds .p-front-service__content-point-heading { margin-bottom: 15px; } } .adds .p-front-service__content-point-heading:before { position: absolute; content: ""; width: 100%; height: 2px; background: #ff5638; top: 50%; } .adds .p-front-service__content-point-heading h3 { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto; padding: 0 53.5px 0 21.5px; background: #fdf5f5; font-size: 25px; font-weight: bold; z-index: 1; position: relative; } @media screen and (max-width: 768px) { .adds .p-front-service__content-point-heading h3 { font-size: 16px; padding: 0 36px 0 24px; } } .adds .p-front-service__content-point-heading h3:before { position: absolute; content: url("../../assets/img/common/curriculum.svg"); right: 13.5px; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .adds .p-front-service__point { gap: 21.5px; -webkit-box-align: stretch; -webkit-align-items: stretch; -ms-flex-align: stretch; align-items: stretch; } @media screen and (max-width: 1280px) { .adds .p-front-service__point { -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } } @media screen and (max-width: 963px) { .adds .p-front-service__point { padding-top: 21px; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .adds .p-front-service__point-item { width: calc((100% - 43px) / 3); border: 1px solid #ff5638; background: #fff; } @media screen and (max-width: 1280px) { .adds .p-front-service__point-item { width: calc((100% - 21.5px) / 2); } } @media screen and (max-width: 963px) { .adds .p-front-service__point-item { width: 100%; } } .adds .p-front-service__point-title { border-bottom: 1px solid #ff5638; background: #ffe1dc; } .adds .p-front-service__point h4 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; width: 100%; font-size: 20px; color: #ff5638; font-weight: bold; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding-left: 25px; gap: 24px; } @media screen and (max-width: 768px) { .adds .p-front-service__point h4 { font-size: 18px; padding-left: 12px; gap: 10px; } } .adds .p-front-service__point h4 p { color: #ff5638; font-size: 20px; font-weight: bold; } @media screen and (max-width: 768px) { .adds .p-front-service__point h4 p { font-size: 18px; } } .adds .p-front-service__point h4 span { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 17px 8.5px; border-left: 1px solid; gap: 5.5px; -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } @media screen and (max-width: 768px) { .adds .p-front-service__point h4 span { padding: 5px 7.5px; font-size: 16px; } } .adds .p-front-service__point-details { padding: 19px 12%; height: -webkit-fill-available; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 768px) { .adds .p-front-service__point-details { padding: 12px 12%; } } .adds .p-front-service__point-details p { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto; } .adds .p-front-service__content-point .c-btn { top: 0; left: 0; display: block; max-width: 325px; width: 100%; padding: 12px 18px; background: #1e2753; position: relative; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-filter: drop-shadow(6px 6px rgba(30, 39, 83, 0.3)); filter: drop-shadow(6px 6px rgba(30, 39, 83, 0.3)); opacity: 1; pointer-events: unset; margin-right: 0; right: unset; bottom: unset; margin-top: 25px; } @media screen and (max-width: 768px) { .adds .p-front-service__content-point .c-btn { -webkit-transform: unset; transform: unset; } } .adds .p-front-service__content-point .c-btn:hover { top: 3px; left: 3px; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-filter: drop-shadow(0px 0px rgba(30, 39, 83, 0.3)); filter: drop-shadow(0px 0px rgba(30, 39, 83, 0.3)); } .adds .p-front-service__content-point .c-btn:hover > span::after { -webkit-transition: background-position 0.3s ease-out; transition: background-position 0.3s ease-out; background-position: 0% 100%; } .adds .modal-container { height: auto; } .adds .modal-content { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; height: auto; gap: 70px; } @media screen and (max-width: 963px) { .adds .modal-content { gap: 23px; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; max-height: 90vh; overflow-y: scroll; } } .adds .modal-content__image { width: 45%; border: 1px solid #cdcdcd; aspect-ratio: 328/203; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } @media screen and (max-width: 963px) { .adds .modal-content__image { margin: 0; width: 100%; } } .adds .modal-content__image img { display: block; } .adds .modal-content__summary { width: 55%; } @media screen and (max-width: 963px) { .adds .modal-content__summary { width: 100%; } } .adds .modal-content__summary .p-merit-introduction__list-category { color: #fff; } .adds .modal-content__summary .p-merit-introduction__list-title { font-size: 18px; font-weight: bold; margin-bottom: 15px; } .adds .modal-content__summary .p-merit-introduction__list-tag { font-size: 14px; font-weight: 500; color: #9fa5a9; margin-top: 25px; padding-top: 18px; border-top: 1px solid #cdcdcd; } .adds .c-footer-container__inner--recruit { -webkit-filter: drop-shadow(13px 13px 0 #dfe1eb); filter: drop-shadow(13px 13px 0 #dfe1eb); padding: 60px 7.5% 0; height: 276px; } @media screen and (max-width: 963px) { .adds .c-footer-container__inner--recruit { gap: 15px; padding: 60px 5% 0; } } @media screen and (max-width: 768px) { .adds .c-footer-container__inner--recruit { padding: 40px 5% 45px; z-index: 1; margin-bottom: 15px; height: auto; } } .adds .c-footer-container__inner--human { -webkit-filter: drop-shadow(13px 13px 0 #dfe1eb); filter: drop-shadow(13px 13px 0 #dfe1eb); padding: 60px 7.5% 0; padding-inline: 125px; height: 276px; } @media screen and (max-width: 963px) { .adds .c-footer-container__inner--human { gap: 15px; padding: 60px 5% 0; } } @media screen and (max-width: 768px) { .adds .c-footer-container__inner--human { padding: 40px 5% 45px; z-index: 1; margin-bottom: 15px; height: auto; } } .adds .c-footer-container__inner--recruit > .c-footer-container__intro { gap: 20px; } @media screen and (max-width: 768px) { .adds .c-footer-container__inner--recruit > .c-footer-container__intro { gap: 15px; } } .adds .c-footer-container__inner--recruit > .c-footer-container__intro > .c-footer-container__title > h2 > .ja { padding-bottom: 10px; } .adds .c-footer-container__inner--recruit > .c-footer-container__intro > p { max-width: 458px; } .adds .c-footer-container__inner--recruit > .c-footer-container__btns { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; margin-top: 25px; width: 45%; } @media screen and (max-width: 963px) { .adds .c-footer-container__inner--recruit > .c-footer-container__btns { -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } } @media screen and (max-width: 768px) { .adds .c-footer-container__inner--recruit > .c-footer-container__btns { width: 100%; } } .adds .c-footer-container__inner--recruit > .c-footer-container__btns > .c-footer-container__btn { max-width: 455px; padding: 27px 49px 27px 35px; } @media screen and (max-width: 963px) { .adds .c-footer-container__inner--recruit > .c-footer-container__btns > .c-footer-container__btn { padding: 14px 20px; } } .adds .p-front-service__content-summary > h4 { font-weight: bold; margin-bottom: 8px; font-size: 18px; color: #272727; } @media screen and (max-width: 768px) { .adds .p-front-service__content-summary > h4 { margin-bottom: 6px; font-size: 16px; } } .pc-none { display: none; } @media screen and (max-width: 963px) { .pc-none { display: block; } } .slider__scrollbar { width: 90%; margin: 26px auto 0; height: 100%; position: relative; } .slider__scrollbar::before { content: ""; display: block; width: 100%; height: 1px; background-color: #cdd6dd; position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .slider__btn { aspect-ratio: 1/1; background-color: #fff; border: 2px solid #2d3b7c; border-radius: 50%; -webkit-box-shadow: 0 0 8px 8px rgba(0, 0, 0, 0); box-shadow: 0 0 8px 8px rgba(0, 0, 0, 0); cursor: pointer; width: 17px !important; height: 17px; } .swiper-slide { display: -webkit-box !important; display: -webkit-flex !important; display: -ms-flexbox !important; display: flex !important; } @media screen and (max-width: 768px) { .swiper-slide { gap: 15px 12.5px; padding: 16px 20px; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; } } /* 青色の進捗バー */ .slider__progress { height: 3px; /* バーの太さ */ background-color: #2d3b7c; /* 青色 */ position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 0%; /* 初期状態（スライドの位置に応じて変わる） */ -webkit-transition: width 0.8s ease-out; transition: width 0.8s ease-out; } /* ボタンの親要素（スクロールバーの下に配置） */ .slider__buttons { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; /* ボタンを中央に配置 */ gap: 20px; /* ボタン間の間隔 */ margin-top: 10px; /* スクロールバーとの間隔 */ } /* ボタンのデザイン */ .slider__prev, .slider__next { cursor: pointer; } /* Swiperのデフォルト矢印アイコン */ .slider__prev::after, .slider__next::after { font-size: 20px; color: #fff; } .benefit.p-merit-first { padding: 72px; } @media screen and (max-width: 768px) { .benefit.p-merit-first { padding: 50px 2.5%; margin-bottom: 0; } } @media screen and (max-width: 768px) { .benefit .p-front-service__content { margin-top: 30px; } } .benefit .p-front-service__content:first-child { margin-top: 0; } .benefit .adds .p-front-service__content-point-heading h3 span { display: block; font-size: 20px; line-height: 1; } .benefit .adds .p-front-service__content-point-heading h3:before { content: url(../../assets/img/common/graf.svg); right: 30.5px; z-index: -1; } .benefit .adds .p-front-service__point h4 { padding: 5px; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } .benefit .adds .p-front-service__point-details { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; gap: 30px; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding: 0 5%; height: 130px; } @media screen and (max-width: 768px) { .benefit .adds .p-front-service__point-details { gap: 0; height: 77px; } } @media screen and (max-width: 768px) { .benefit .adds .p-front-service__point-details img { -webkit-transform: scale(0.55); transform: scale(0.55); } } .benefit .adds .p-front-service__point-details p { margin: 0; font-weight: 500; color: #ff5638; } @media screen and (max-width: 768px) { .benefit .adds .p-front-service__point-details p { font-size: 14px; } } .benefit .adds .p-front-service__point-details p span { font-size: 50px; font-weight: 600; line-height: 1; } @media screen and (max-width: 768px) { .benefit .adds .p-front-service__point-details p span { font-size: 40px; } } .benefit .adds .p-front-service__point-details p span.head { display: block; font-size: 16px; font-weight: 500; } @media screen and (max-width: 768px) { .benefit .adds .p-front-service__point-details p span.head { font-size: 14px; } } @media screen and (max-width: 390px) { .error-message { font-size: 12px !important; } } .form-privacypolicy-item { cursor: pointer; } .p-topics { padding-inline: var(--inline-outer-size, 0); margin-bottom: 282px; } @media screen and (max-width: 1024px) { .p-topics { padding-bottom: 120px; margin-bottom: 0; } } @media screen and (max-width: 576px) { .p-topics { padding-inline: 10px; } } .p-topics__inner { max-width: 1280px; width: 100%; margin: 0 auto; } .p-topics__inner > form { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; gap: 5vw; } @media screen and (max-width: 1024px) { .p-topics__inner > form { gap: 6vw; } } @media screen and (max-width: 963px) { .p-topics__inner > form { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 40px; } } .p-topics-content { padding: 26px 40px; margin-top: 40px; background: #ffffff; } @media screen and (max-width: 768px) { .p-topics-content { margin-top: 18px; padding: 26px 20px; } } .p-topics-content > ul { width: 100%; } .p-topics-content__item { position: relative; } @media screen and (max-width: 963px) { .p-topics-content__item { padding-inline: 0; } } .p-topics-content__item:hover .p-topics-content__item-title { opacity: 0.6; } .p-topics-content__item:last-of-type { margin: 0 auto; padding-bottom: 0; border-bottom: none; } .p-topics-content__item--new { padding-bottom: 12px; } .p-topics-content__item .topics-header { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 38px; cursor: pointer; margin: 0 auto 18px; padding-bottom: 28px; padding-inline: 5%; border-bottom: 1px solid #cdcdcd; } .p-topics-content__item .topics-header::after { content: url("../../assets/img/icon/ico_topics_arrow_01.svg"); position: absolute; right: 0; top: 4px; -webkit-transition: all 0.3s; transition: all 0.3s; } .p-topics-content__item .topics-header.active::after { content: url("../../assets/img/icon/ico_topics_arrow_01.svg"); position: absolute; right: 0; top: 4px; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-transform: rotate(180deg); transform: rotate(180deg); } @media screen and (max-width: 768px) { .p-topics-content__item .topics-header { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 15px; } } .p-topics-content__item .topics-header > p { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 12px; } .p-topics-content__item .topics-header > p:first-of-type { -webkit-flex-shrink: 0; -ms-flex-negative: 0; flex-shrink: 0; } .p-topics-content__item .topics-header > p.p-topics-content__item-title { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: 0; -webkit-transition: all 0.3s; transition: all 0.3s; font-size: clamp(1.8rem, 1.125vw, 1.8rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } @media screen and (max-width: 768px) { .p-topics-content__item .topics-header > p.p-topics-content__item-title { font-size: clamp(1.8rem, 1.125vw, 1.8rem); font-weight: 600; -webkit-font-smoothing: antialiased; line-height: 1.55; color: #272727; } } .p-topics-content__item .topics-header--new { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 38px; cursor: pointer; margin: 0 auto 18px; padding-bottom: 28px; padding-inline: 5%; border-bottom: 1px solid #cdcdcd; } @media screen and (max-width: 768px) { .p-topics-content__item .topics-header--new { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 15px; } } .p-topics-content__item .topics-header--new::after { content: url("../../assets/img/icon/ico_topics_blank_01.svg"); position: absolute; right: 0; top: 20px; -webkit-transition: all 0.3s; transition: all 0.3s; } .p-topics-content__item .topics-header--new.active::after { content: url("../../assets/img/icon/ico_topics_blank_01.svg"); position: absolute; right: 0; top: 20px; -webkit-transition: all 0.3s; transition: all 0.3s; -webkit-transform: rotate(0deg); transform: rotate(0deg); } .p-topics-content__item .topics-header--new > p { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 12px; } .p-topics-content__item .topics-header--new > p.p-topics-content__item-title { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: 0; font-size: clamp(1.8rem, 1.125vw, 1.8rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } @media screen and (max-width: 768px) { .p-topics-content__item .topics-header--new > p.p-topics-content__item-title { font-size: clamp(1.8rem, 1.125vw, 1.8rem); font-weight: 600; -webkit-font-smoothing: antialiased; line-height: 1.55; color: #272727; } } .p-topics-content__item .topics-content { max-width: 880px; width: 100%; margin: 42px auto 0; padding-bottom: 112px; display: none; font-size: clamp(1.6rem, 1.25vw, 2rem); font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; position: relative; } @media screen and (max-width: 768px) { .p-topics-content__item .topics-content { padding-bottom: 66px; } } .p-topics-content__item .topics-content h2 { font-size: clamp(1.8rem, 1.25vw, 2rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #2D3B7C; padding: 0 0 10px 12px; border-left: 9px solid #ff5638; border-bottom: 1px solid #ff5638; margin-block: 45px; } .p-topics-content__item .topics-content figure { max-width: 550px; width: 100%; height: auto; border-radius: 15px; overflow: clip; margin: 60px auto 86px; } .p-topics-content__item .topics-content figure img { -o-object-fit: contain; object-fit: contain; height: auto; } .p-topics-content__item .topics-content p { margin-top: 24px; font-size: clamp(1.4rem, 1vw, 1.6rem); font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } .p-topics-content__item .topics-content h3 { margin-top: 45px; padding-left: 20px; font-size: clamp(2rem, 1.25vw, 2rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #2D3B7C; position: relative; } .p-topics-content__item .topics-content h3::before { content: ""; position: absolute; top: 16px; left: 0; width: 13px; height: 3px; background: #ff5638; } .p-topics-content__item .topics-content h4 { margin-top: 45px; padding-left: 20px; font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #2D3B7C; position: relative; } .p-topics-content__item .topics-content h4::before { content: ""; position: absolute; top: 14px; left: 0; width: 13px; height: 3px; background: #ff5638; } .p-topics-content__item .topics-content > .topics-content__info-image { max-width: 550px; width: 100%; height: auto; border-radius: 15px; overflow: clip; margin: 60px auto 86px; } @media screen and (max-width: 768px) { .p-topics-content__item .topics-content > .topics-content__info-image { margin: 40px auto 46px; } } .p-topics-content__item .topics-content > .topics-content__event { margin-top: 26px; } .p-topics-content__item .topics-content > .topics-content__event > p { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 18px; } @media screen and (max-width: 768px) { .p-topics-content__item .topics-content > .topics-content__event > p { gap: 10px; } } .p-topics-content__item .topics-content > .topics-content__event > p > span { padding-inline: 16px; font-size: clamp(1.4rem, 1vw, 1.6rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ffffff; text-align: center; background: #ff5638; border-radius: 15px; } .p-topics-content__item .topics-content > .topics-content__event > .topics-content__event-table { margin-top: 18px; border: 1px solid #cdd6dd; } .p-topics-content__item .topics-content > .topics-content__event > .topics-content__event-table > h3 { margin-top: unset; padding: 10px 26px 12px; font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #2D3B7C; border-bottom: 1px solid #cdd6dd; } .p-topics-content__item .topics-content > .topics-content__event > .topics-content__event-table > h3::before { content: ""; display: none; position: absolute; top: 16px; left: 0; width: 13px; height: 3px; background: #ff5638; } .p-topics-content__item .topics-content > .topics-content__event > .topics-content__event-table > .topics-content__event-table-item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; border-bottom: 1px solid #cdd6dd; } @media screen and (max-width: 768px) { .p-topics-content__item .topics-content > .topics-content__event > .topics-content__event-table > .topics-content__event-table-item { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .p-topics-content__item .topics-content > .topics-content__event > .topics-content__event-table > .topics-content__event-table-item:last-of-type { border-bottom: none; } .p-topics-content__item .topics-content > .topics-content__event > .topics-content__event-table > .topics-content__event-table-item > p { margin-top: unset; } .p-topics-content__item .topics-content > .topics-content__event > .topics-content__event-table > .topics-content__event-table-item > p:nth-of-type(1) { width: 176px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #2D3B7C; } @media screen and (max-width: 768px) { .p-topics-content__item .topics-content > .topics-content__event > .topics-content__event-table > .topics-content__event-table-item > p:nth-of-type(1) { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; padding-top: 15px; padding-left: 16px; } } .p-topics-content__item .topics-content > .topics-content__event > .topics-content__event-table > .topics-content__event-table-item > p:nth-of-type(2) { width: 100%; padding: 28px 40px; font-size: clamp(1.4rem, 1vw, 1.6rem); font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; border-left: 1px solid #cdd6dd; } @media screen and (max-width: 768px) { .p-topics-content__item .topics-content > .topics-content__event > .topics-content__event-table > .topics-content__event-table-item > p:nth-of-type(2) { padding: 0 16px 18px; border-left: none; } } .p-topics-content__item .topics-content > .topics-content__event > .topics-content__event-table > .topics-content__event-table-item > p:nth-of-type(2) > a { max-width: 326px; width: 100%; display: block; margin-top: 16px; padding-right: 24px; padding-bottom: 4px; font-size: clamp(1.4rem, 1vw, 1.6rem); font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ff5638; border-bottom: 1px solid #ff5638; position: relative; } .p-topics-content__item .topics-content > .topics-content__event > .topics-content__event-table > .topics-content__event-table-item > p:nth-of-type(2) > a::after { content: ""; width: 24px; height: 18px; position: absolute; right: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: url("../../assets/img/icon/ico_topics_arrow_02.svg") no-repeat; background-size: cover; } .p-topics-content__item .topics-content > .topics-content__event > .topics-content__event-image { max-width: 550px; width: 100%; height: auto; border-radius: 15px; overflow: clip; margin: 60px auto 86px; } @media screen and (max-width: 768px) { .p-topics-content__item .topics-content > .topics-content__event > .topics-content__event-image { margin: 40px auto 46px; } } .p-topics-content__item .topics-content > .topics-content__event > .topics-content__event-link { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 36px; border: 1px solid #2D3B7C; border-radius: 20px; background: #FDF5F5; } @media screen and (max-width: 768px) { .p-topics-content__item .topics-content > .topics-content__event > .topics-content__event-link { padding: 16px 22px; } } .p-topics-content__item .topics-content > .topics-content__event > .topics-content__event-link p { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: clamp(5vw, 10vw, 90px); font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #2D3B7C; } @media screen and (max-width: 768px) { .p-topics-content__item .topics-content > .topics-content__event > .topics-content__event-link p { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: 14px; width: 100%; word-break: break-all; } } .p-topics-content__item .topics-content > .topics-content__event > .topics-content__event-link p > a { padding-left: 28px; font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #0066ff; position: relative; text-decoration: underline; } @media screen and (max-width: 768px) { .p-topics-content__item .topics-content > .topics-content__event > .topics-content__event-link p > a { padding-left: 22px; } } .p-topics-content__item .topics-content > .topics-content__event > .topics-content__event-link p > a::before { content: ""; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 21px; height: 21px; background: url("../../assets/img/icon/ico_links_01.svg") no-repeat; background-size: cover; } @media screen and (max-width: 768px) { .p-topics-content__item .topics-content > .topics-content__event > .topics-content__event-link p > a::before { width: 17px; height: 17px; top: 7px; -webkit-transform: translateY(0); transform: translateY(0); } } .p-topics-content__item-cat { display: block; width: 114px; padding: 2px; font-size: clamp(1.4rem, 1vw, 1.6rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ffffff; text-align: center; } .p-topics-content__item-cat--info { background: #2D3B7C; } .p-topics-content__item-cat--new { background: #ff5638; } .p-topics-content__item-cat--event { background: #757da7; } .p-topics-content__item-place { display: block; padding-left: 24px; font-size: clamp(1.4rem, 1vw, 1.6rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: rgba(30, 39, 83, 0.45); position: relative; } .p-topics-content__item-place::before { content: ""; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 15px; height: 24px; background: url("../../assets/img/icon/ico_location_01.svg") no-repeat; background-size: cover; } .p-topics-select { max-width: 290px; width: 100%; padding: 20px 30px; font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; background: url("../../assets/img/icon/ico_select_arrow_01.svg"), #ffffff; background-repeat: no-repeat; background-position: 90% center; cursor: pointer; } @media screen and (max-width: 963px) { .p-topics-select { max-width: 100%; padding: 12px 20px; background-position: 95% center; } } .p-topics-btns { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; gap: 5vw; } @media screen and (max-width: 1024px) { .p-topics-btns { gap: 6vw; } } @media screen and (max-width: 963px) { .p-topics-btns { -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; gap: 4px; } } .p-topics-btns > button { padding-left: 20px; font-size: clamp(1.2rem, 1.25vw, 2rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; cursor: pointer; position: relative; -webkit-transition: all 0.3s; transition: all 0.3s; } @media screen and (max-width: 963px) { .p-topics-btns > button { padding-inline: 10px; } } .p-topics-btns > button:hover { opacity: 0.7; } .p-topics-btns > button.active::before { content: ""; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 12.5px; height: 12.5px; background: url("../../assets/img/icon/ico_active_01.svg") no-repeat; background-size: cover; } @media screen and (max-width: 963px) { .p-topics-btns > button.active::before { width: 8px; height: 8px; top: 55%; } } .hidden { display: none; } .checkbox-container { margin-top: 30px; padding: 34px 54px; background-color: #ffffff; } @media screen and (max-width: 768px) { .checkbox-container { padding: 30px 20px; } } .checkbox-container > p { font-size: clamp(2rem, 1.25vw, 2rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } .checkbox-container.hidden { display: none; } .checkbox-container-content { margin-top: 20px; border-radius: 5px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; } @media screen and (max-width: 768px) { .checkbox-container-content { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .checkbox-container__item { width: calc(100% - 70px); padding: 18px 30px; background: #FDF5F5; } @media screen and (max-width: 768px) { .checkbox-container__item { width: 100%; } } .tabs { width: 70px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } @media screen and (max-width: 768px) { .tabs { width: 210px; margin: 0 auto; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; } } .tab { padding: 5px 5px 6px; font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; text-align: center; cursor: pointer; background-color: transparent; } @media screen and (max-width: 768px) { .tab { width: 25%; } } .tab.active { background-color: #FDF5F5; } .tab-content { display: none; -webkit-transition: all 0.3s; transition: all 0.3s; } .tab-content__item { width: 100%; } @media screen and (max-width: 768px) { .tab-content__item { max-width: 100%; } } .tab-content__item > p { margin-bottom: 8px; font-size: clamp(1.4rem, 1vw, 1.6rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } .tab-content__item-list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 8px 40px; } .tab-content__item-list > label { font-size: clamp(1.4rem, 1vw, 1.6rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } .tab-content__item-list > label > input[type=checkbox] { position: relative; width: 14px; height: 14px; margin: 0 5px 0 0; border: 1px solid #707070; background: #ffffff; vertical-align: -1px; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; } .tab-content__item-list > label input[type=checkbox]:checked:before { position: absolute; top: -4px; left: 3px; -webkit-transform: rotate(50deg); transform: rotate(50deg); width: 8px; height: 14px; border-right: 3px solid #ff5638; border-bottom: 3px solid #ff5638; content: ""; } .tab-content.active { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: 48px; -webkit-transition: all 0.3s; transition: all 0.3s; } @media screen and (max-width: 768px) { .tab-content.active { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 20px; } } .p-about { margin-top: 0; padding-inline: 0; } .p-about__inner { position: relative; height: 100%; overflow: hidden; } .p-about-container { position: relative; top: 0; left: 0; width: 100%; height: 100vh; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; background-size: cover; background-position: center; -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, transform 0.5s; transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s; } @media screen and (max-width: 963px) { .p-about-container { position: static; height: auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .p-about-container--left { position: -webkit-sticky; position: sticky; top: 0; left: 0; width: 45%; height: 100vh; } .p-about-container--right { position: absolute; right: 0; top: 0; left: auto; width: 55%; height: 100%; display: block; background: url("../../assets/img/common/bg_about_01.png") no-repeat; background-position: top; background-size: cover; background-attachment: fixed; } .p-about-container--right > .p-about-container__summary { height: 100vh; } .p-about-container--pc { display: block; } @media screen and (max-width: 963px) { .p-about-container--pc { display: none; } } .p-about-container--sp { display: none; } @media screen and (max-width: 963px) { .p-about-container--sp { display: block; } } .p-about-container__image { width: 100%; height: 100vh; -o-object-fit: cover; object-fit: cover; -o-object-position: center; object-position: center; -webkit-transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, -webkit-transform 0.5s; transition: opacity 0.5s, transform 0.5s; transition: opacity 0.5s, transform 0.5s, -webkit-transform 0.5s; } @media screen and (max-width: 963px) { .p-about-container__image { width: 100%; height: 360px; } } .p-about-container__image.image-1 { -o-object-position: top; object-position: top; } .p-about-container__image.image-2 { -o-object-position: top; object-position: top; } .p-about-container__summary { width: 100%; height: 100%; padding: 4vw; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; position: relative; } @media screen and (max-width: 963px) { .p-about-container__summary { width: 100%; height: auto; } } @media screen and (max-width: 768px) { .p-about-container__summary { padding: 30px; padding-top: 50px; } } .p-about-container__summary > h3 { max-width: 622px; width: 100%; margin-bottom: 90px; font-size: clamp(2.4rem, 3vw, 4.8rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ff5638; position: relative; z-index: 5; } @media screen and (max-width: 768px) { .p-about-container__summary > h3 { margin-bottom: 50px; text-align: left; } } .p-about-container__summary > h3 > span { width: 100%; position: absolute; left: 62%; top: 85%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); font-size: clamp(2.4rem, 3.1875vw, 5.1rem); font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 1; color: rgba(217, 217, 217, 0.4); font-family: "Inter", serif; z-index: -1; max-width: none; width: -webkit-max-content; width: -moz-max-content; width: max-content; } @media screen and (max-width: 768px) { .p-about-container__summary > h3 > span { left: 0; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } } .p-about-container__summary:first-child > h3 > span { top: 85%; } @media screen and (max-width: 768px) { .p-about-container__summary:first-child > h3 > span { left: 0; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } } .p-about-container__summary:nth-child(2) > h3 > span { top: 115%; } @media screen and (max-width: 768px) { .p-about-container__summary:nth-child(2) > h3 > span { left: 0; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } } .p-about-container__summary:nth-child(3) > h3 > span { top: 50%; left: 50%; } @media screen and (max-width: 768px) { .p-about-container__summary:nth-child(3) > h3 > span { left: 0; -webkit-transform: translate(0, -50%); transform: translate(0, -50%); } } .p-about-container__summary > p { margin-bottom: 50px; } .p-about-container__summary > p:nth-of-type(1) { max-width: 423px; width: 100%; font-size: clamp(1.8rem, 1.25vw, 2rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } @media screen and (max-width: 768px) { .p-about-container__summary > p:nth-of-type(1) { max-width: 100%; } } .p-about-container__summary > p:nth-of-type(2) { max-width: 622px; width: 100%; font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } @media screen and (max-width: 768px) { .p-about-container__summary > p:nth-of-type(2) { max-width: 100%; } } .p-about-container--bottom { height: 100vh; overflow: hidden; } @media screen and (max-width: 1024px) { .p-about-container--bottom { height: auto; } } @media screen and (max-width: 963px) { .p-about-container--bottom { position: static; height: auto; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .p-about-container--bottom .p-about-container__summary { max-width: 100%; width: 100%; background-color: #ffffff; position: relative; background-image: none; z-index: 10; } .p-about-container--bottom .p-about-container__summary::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(234, 251, 255, 0.2); z-index: -1; } .p-about-container--bottom .p-about-container__summary::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: url("../../assets/img/common/bg_connect_01.jpg") no-repeat; background-size: cover; opacity: 0.2; z-index: -2; } .p-about-container--bottom .p-about-container__summary > h3 { text-align: center; } .p-about-container--bottom .p-about-container__summary > p:nth-of-type(1) { max-width: 720px; width: 100%; font-size: clamp(1.8rem, 1.25vw, 2rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } @media screen and (max-width: 768px) { .p-about-container--bottom .p-about-container__summary > p:nth-of-type(1) { max-width: 100%; } } .p-about-container--bottom .p-about-container__summary > p:nth-of-type(2) { max-width: 864px; width: 100%; font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } @media screen and (max-width: 768px) { .p-about-container--bottom .p-about-container__summary > p:nth-of-type(2) { max-width: 100%; } } .p-company { margin-top: 0; padding-top: 80px; padding-inline: var(--inline-outer-size, 0); } @media screen and (max-width: 768px) { .p-company { padding-top: 62px; padding-inline: 30px; } } .p-company__inner { max-width: 1280px; margin: 0 auto; } .p-company__inner > p { margin-top: 106px; padding-bottom: 38px; font-size: clamp(1.8rem, 2.5vw, 4rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ff5638; border-bottom: 1px solid #cdcdcd; } @media screen and (max-width: 768px) { .p-company__inner > p { margin-top: 56px; } } .p-company__content { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: justify; -webkit-justify-content: space-between; -ms-flex-pack: justify; justify-content: space-between; padding-top: 70px; gap: 70px; position: relative; } @media screen and (max-width: 1024px) { .p-company__content { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 0px; } } .p-company__content-summary { width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } @media screen and (max-width: 1024px) { .p-company__content-summary { max-width: 100%; } } .p-company__content-summary > p { margin-bottom: 62px; font-size: clamp(1.6rem, 1vw, 1.6rem); font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } .p-company__content-summary > p:last-of-type { margin-left: auto; margin-bottom: 0; font-size: clamp(1.8rem, 1.25vw, 2rem); font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } .p-company__content-image { max-width: 640px; width: auto; height: -webkit-fit-content; height: -moz-fit-content; height: fit-content; position: relative; } @media screen and (max-width: 1024px) { .p-company__content-image { max-width: 100%; -webkit-box-ordinal-group: 0; -webkit-order: -1; -ms-flex-order: -1; order: -1; } } .p-company__content-image > img { width: 98%; -webkit-filter: drop-shadow(20px 20px 0 #dfe1eb); filter: drop-shadow(20px 20px 0 #dfe1eb); } .p-company__content > span { position: absolute; width: auto; right: 0; left: unset; bottom: -86px; z-index: -1; font-size: clamp(4.2rem, 7.75vw, 12.4rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1; color: rgba(217, 217, 217, 0.4); font-family: "Inter", serif; } @media screen and (max-width: 1024px) { .p-company__content > span { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; left: auto; right: 0; bottom: -64px; } } @media screen and (max-width: 768px) { .p-company__content > span { bottom: -48px; } } .p-company-history { margin-top: 136px; padding-top: 130px; padding-bottom: 240px; padding-inline: var(--inline-outer-size, 0); background: url("../../assets/img/common/bg_service_01.png") no-repeat; background-size: cover; } @media screen and (max-width: 1024px) { .p-company-history { margin-top: 85px; padding-bottom: 80px; } } @media screen and (max-width: 963px) { .p-company-history { margin-top: 85px; } } @media screen and (max-width: 768px) { .p-company-history { margin-top: 62px; padding-top: 62px; padding-bottom: 380px; } } .p-company-history__inner { max-width: 1280px; width: 100%; margin: 0 auto; } .p-company-history__table { width: 100%; margin-top: 76px; background: #ffffff; } .p-company-history__table tr { display: grid; grid-auto-rows: auto; grid-template-columns: 20% 80%; border-bottom: 1px solid #dcdcdc; } @media screen and (max-width: 768px) { .p-company-history__table tr { grid-template-columns: auto; } } .p-company-history__table tr > th { max-width: 302px; width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding: 44px 0; font-size: clamp(1.8rem, 1.25vw, 2rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; border-right: 1px solid #dcdcdc; } @media screen and (max-width: 768px) { .p-company-history__table tr > th { max-width: 100%; padding: 26px 22px 0; border-right: none; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; } } .p-company-history__table tr > td { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; padding: 28px 46px; font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; -webkit-flex-direction: row; -ms-flex-direction: row; flex-direction: row; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 768px) { .p-company-history__table tr > td { padding: 6px 22px 26px; } } .p-company-history__table tr > td.p-company-history__list { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; padding: 28px 40px 28px 54px; } @media screen and (max-width: 768px) { .p-company-history__table tr > td.p-company-history__list { padding: 6px 20px 26px 30px; } } .p-company-history__table tr > td.p-company-history__list > ul > li { list-style: disc; } .p-company-history__table tr > td.p-company-history__list > ul > li::marker { content: "・"; } .p-company-history__table tr > td.p-company-history__table-list { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } .p-company-history__table tr > td > a { display: block; padding: 8px 25px 10px 0; font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; position: relative; } .p-company-history__table tr > td > a::after { content: ""; position: absolute; right: 0; top: 50%; width: 25px; height: 29px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: url("../../assets/img/icon/ico_company_pdf_01.svg") no-repeat; background-size: cover; } .p-company-history__table-item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; gap: 30px; margin-bottom: 50px; } @media screen and (max-width: 576px) { .p-company-history__table-item { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; gap: 16px; margin-bottom: 36px; } } .p-company-history__table-item > p { font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } .p-company-history__table-item:last-of-type { margin-bottom: 0; } .p-company-history__table-item-image { max-width: 192px; width: 100%; } @media screen and (max-width: 576px) { .p-company-history__table-item-image { max-width: 100%; } } .c-footer-container--company { background: #ffffff; } @media screen and (max-width: 768px) { .c-footer-container--company { padding-top: 270px; } } @media screen and (max-width: 768px) { .c-footer-container--company > .c-footer-container__inner { position: absolute; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); top: -300px; } } .p-privacypolicy { padding-inline: calc(var(--inline-outer-size, 0) / 2); } @media screen and (max-width: 768px) { .p-privacypolicy { padding-inline: 30px; margin-top: 64px; } } .p-privacypolicy__inner { max-width: 1280px; width: 100%; margin: 0 auto; padding-bottom: 130px; } @media screen and (max-width: 768px) { .p-privacypolicy__inner { padding-bottom: 68px; } } .p-privacypolicy-content p, .p-privacypolicy-content dt, .p-privacypolicy-content dd { font-size: clamp(1.4rem, 1vw, 1.6rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 2.2; color: #272727; } .p-privacypolicy-content > p, .p-privacypolicy-content dl { margin-bottom: 40px; } @media screen and (max-width: 768px) { .p-privacypolicy-content > p, .p-privacypolicy-content dl { margin-bottom: 32px; } } .p-privacypolicy-content .c-btn--rev { margin-top: 100px; } @media screen and (max-width: 768px) { .p-privacypolicy-content .c-btn--rev { margin-top: 58px; } } .p-notfound { margin-top: 50px; padding-bottom: 300px; } @media screen and (max-width: 1024px) { .p-notfound { padding-bottom: 142px; } } .p-notfound-content > p { font-size: clamp(1.8rem, 1.125vw, 1.8rem); font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; text-align: center; } .p-notfound-summary { margin-top: 180px; } @media screen and (max-width: 768px) { .p-notfound-summary { margin-top: 120px; } } .p-notfound-summary > p:nth-of-type(1) { font-size: clamp(2rem, 2.5vw, 4rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ff5638; text-align: center; } .p-notfound-summary > p:nth-of-type(2) { max-width: 780px; width: 100%; margin: 30px auto 0; font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #1E2753; } .p-faq { padding-inline: calc(var(--inline-outer-size, 0) / 2); padding-bottom: 240px; } @media screen and (max-width: 768px) { .p-faq { margin-top: 24px; padding-bottom: 102px; } } .p-faq__inner { max-width: 1440px; width: 100%; margin: 0 auto; } .p-faq__inner > .c-btn { top: 0; left: 0; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } .p-faq__inner > .c-btn:hover { top: 3px; left: 3px; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media screen and (max-width: 768px) { .p-faq__inner > .c-btn:hover { top: 0; left: 0; } } .p-faq-select { width: 100%; display: block; padding: 20px 50px 20px 30px; background: #ffffff; background-repeat: no-repeat; background-position: 90% center; font-size: clamp(1.4rem, 1.25vw, 2rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #2D3B7C; -webkit-transition: all 0.3s; transition: all 0.3s; position: relative; cursor: pointer; } @media screen and (max-width: 768px) { .p-faq-select { padding: 15px 20px; margin-bottom: 32px; } } .p-faq-select__wrapper { max-width: 530px; width: 100%; display: block; margin: 20px auto 56px; -webkit-transition: all 0.3s; transition: all 0.3s; position: relative; } .p-faq-select__wrapper::after { content: ""; position: absolute; top: 50%; right: 30px; width: 16px; height: 9px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background: url("../../assets/img/icon/ico_select_arrow_01.svg") no-repeat; -webkit-transition: all 0.3s; transition: all 0.3s; } .p-faq-select__wrapper:focus-within::after { -webkit-transform: translateY(-50%) rotate(180deg); transform: translateY(-50%) rotate(180deg); } .p-faq-content { padding-inline: 80px; background: #ffffff; } @media screen and (max-width: 768px) { .p-faq-content { padding: 4px 20px 6px; } } .p-faq-content__list { padding: 32px 5vw 26px; border-bottom: 1px solid #CDCDCD; } @media screen and (max-width: 768px) { .p-faq-content__list { padding: 20px 0; } } .p-faq-content__list:last-of-type { border-bottom: none; } .faq-content { display: none; padding-left: 44px; margin-top: 24px; font-size: clamp(1.6rem, 1.25vw, 2rem); font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; position: relative; } @media screen and (max-width: 768px) { .faq-content { padding: 0 48px 0 32px; } } .faq-content::before { content: "A"; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; width: 36px; height: 36px; font-size: clamp(1.4rem, 1.25vw, 2rem); font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 1; color: #ff5638; font-family: "Inter", serif; border: 1px solid #ff5638; border-radius: 50%; } @media screen and (max-width: 768px) { .faq-content::before { top: 0; -webkit-transform: translateY(0); transform: translateY(0); width: 28px; height: 28px; } } .faq-header { cursor: pointer; position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; padding-right: 48px; padding-left: 0; font-size: clamp(1.8rem, 1.25vw, 2rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } @media screen and (max-width: 768px) { .faq-header { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; padding-right: 28px; } } .faq-header > span { position: relative; left: 0; width: 36px; height: 36px; margin-right: 8px; -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; } @media screen and (max-width: 768px) { .faq-header > span { width: 28px; height: 28px; } } .faq-header > span::before { content: "Q"; width: 36px; height: 36px; position: absolute; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; font-size: clamp(1.4rem, 1.25vw, 2rem); font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 1; color: #1E2753; font-family: "Inter", serif; border: 1px solid #1E2753; border-radius: 50%; } @media screen and (max-width: 768px) { .faq-header > span::before { width: 28px; height: 28px; } } .faq-header::before, .faq-header::after { position: absolute; content: ""; right: 15px; width: 24px; height: 2px; background: #ff5638; -webkit-transition: -webkit-transform 0.3s; transition: -webkit-transform 0.3s; transition: transform 0.3s; transition: transform 0.3s, -webkit-transform 0.3s; } @media screen and (max-width: 768px) { .faq-header::before, .faq-header::after { top: 50%; right: 4px; width: 18px; } } .faq-header::after { -webkit-transform: rotate(90deg); transform: rotate(90deg); } .faq-header.active::after { -webkit-transform: rotate(45deg); transform: rotate(45deg); } .faq-header.active::before { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); } .p-entry { margin-top: 90px; padding-inline: 30px; padding-bottom: 72px; } @media screen and (max-width: 768px) { .p-entry { padding-bottom: 100px; } } .p-entry__inner { max-width: 725px; width: 100%; margin: 0 auto; } .p-entry-content { margin-top: 90px; } .p-entry-content__form-text { margin-bottom: 24px; font-size: clamp(1.6rem, 1vw, 1.6rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } .p-entry-content__form-item { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; margin-bottom: 32px; position: relative; } .p-entry-content__form-item:nth-of-type(3) { margin-bottom: 24px; } .p-entry-content__form-item > label { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; font-size: clamp(1.6rem, 1vw, 1.6rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #000000; } .p-entry-content__form-item > label > span.required { width: 62px; display: block; margin-right: 8px; font-size: clamp(1.6rem, 1vw, 1.6rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ffffff; text-align: center; background: #ff5638; } .p-entry-content__form-item > label input[type=radio] { position: relative; width: 20px; height: 20px; margin: 0 10px 0 0; border: 1px solid #707070; background: #ffffff; border-radius: 50%; vertical-align: -2px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .p-entry-content__form-item > label input[type=radio]:checked:before { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background: #1E2753; content: ""; } .p-entry-content__form-item > input { margin-top: 16px; padding: 10px 20px; background: #ffffff; border: 1px solid #CDD6DD; border-radius: 10px; font-size: clamp(1.6rem, 1vw, 1.6rem); font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } @media screen and (max-width: 768px) { .p-entry-content__form-item > input { border-radius: 3px; } } .p-entry-content__form-item > input::-webkit-input-placeholder { color: #CCCCCC; } .p-entry-content__form-item > input::-moz-placeholder { color: #CCCCCC; } .p-entry-content__form-item > input:-ms-input-placeholder { color: #CCCCCC; } .p-entry-content__form-item > input::-ms-input-placeholder { color: #CCCCCC; } .p-entry-content__form-item > input::placeholder { color: #CCCCCC; } .p-entry-content__form-item--radio > label { margin-bottom: 31px; } .p-entry-content__form-select { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: start; -webkit-justify-content: flex-start; -ms-flex-pack: start; justify-content: flex-start; -webkit-box-align: baseline; -webkit-align-items: baseline; -ms-flex-align: baseline; align-items: baseline; gap: 10px; } @media screen and (max-width: 768px) { .p-entry-content__form-select { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 0 10px; } } .p-entry-content__form-select--ymd > select { width: 100px; margin-top: 16px; margin-right: 12px; padding: 11px 20px; border: 1px solid #CDD6DD; border-radius: 10px; background: url("../../assets/img/icon/ico_ymd_01.png"), #ffffff; background-repeat: no-repeat; background-position: 90% center; } @media screen and (max-width: 768px) { .p-entry-content__form-select--ymd > select { margin-right: 0; border-radius: 3px; } .p-entry-content__form-select--ymd > select:nth-of-type(3) { margin-left: 10px; } } @media screen and (max-width: 768px) { .p-entry-content__form-select--ymd > span { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; width: 100%; } } .p-entry-content__form-select--add > select { width: 236px; margin-top: 16px; margin-right: 12px; padding: 11px 20px; border: 1px solid #CDD6DD; border-radius: 10px; background: url("../../assets/img/icon/ico_add_01.png"), #ffffff; background-repeat: no-repeat; background-position: 90% center; } @media screen and (max-width: 768px) { .p-entry-content__form-select--add > select { border-radius: 3px; } } .p-entry-content__form-select > select::-webkit-input-placeholder { color: #CCCCCC; } .p-entry-content__form-select > select::-moz-placeholder { color: #CCCCCC; } .p-entry-content__form-select > select:-ms-input-placeholder { color: #CCCCCC; } .p-entry-content__form-select > select::-ms-input-placeholder { color: #CCCCCC; } .p-entry-content__form-select > select::placeholder { color: #CCCCCC; } .p-entry-content__form-ymd { background: url("../../assets/img/icon/ico_ymd_01.png") no-repeat; } .p-entry-content__form-btn { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; max-width: 324px; width: 100%; padding: 21px 48px; margin: 60px auto 0; background: #ffffff; position: relative; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; -webkit-filter: drop-shadow(6px 6px #DDDEE5); filter: drop-shadow(6px 6px #DDDEE5); cursor: pointer; } @media screen and (max-width: 768px) { .p-entry-content__form-btn { padding: 12px 34px; } } .p-entry-content__form-btn:hover { top: 3px; left: 3px; -webkit-filter: drop-shadow(0px 0px #DDDEE5); filter: drop-shadow(0px 0px #DDDEE5); } @media screen and (max-width: 768px) { .p-entry-content__form-btn:hover { top: 0; left: 0; -webkit-filter: drop-shadow(6px 6px #DDDEE5); filter: drop-shadow(6px 6px #DDDEE5); } } .p-entry-content__form-btn:hover > span::after { -webkit-transition: background-position 0.3s ease-out; transition: background-position 0.3s ease-out; background-position: 0% 100%; } @media screen and (max-width: 768px) { .p-entry-content__form-btn:hover > span::after { background-position: 100% 0%; } } .p-entry-content__form-btn > span { display: block; width: 100%; font-size: clamp(1.6rem, 1.25vw, 2rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; border-bottom: 1px solid #ff5638; position: relative; } .p-entry-content__form-btn > span::after { content: ""; display: block; width: 15px; height: 10px; position: absolute; top: 50%; right: 0px; -webkit-transform: translateY(-50%); transform: translateY(-50%); background-image: url("../../assets/img/icon/ico_arrow_02.svg"); background-repeat: no-repeat; background-size: 200%; background-position: 100% 0%; -webkit-transition: 0.3s; transition: 0.3s; } .p-entry-content__form-btns { max-width: 608px; width: 100%; margin: 0 auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; } @media screen and (max-width: 768px) { .p-entry-content__form-btns { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .p-entry-content__form-btns > .c-btn--rev { max-width: 290px; width: 100%; padding: 23px 28px; font-size: clamp(1.6rem, 1.25vw, 2rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; cursor: pointer; } @media screen and (max-width: 768px) { .p-entry-content__form-btns > .c-btn--rev { max-width: 220px; padding: 10px 18px; } } .p-entry-content__form-btns > .p-entry-content__form-btn { max-width: 243px; width: 100%; margin: 40px auto 0; background: #1E2753; } @media screen and (max-width: 768px) { .p-entry-content__form-btns > .p-entry-content__form-btn { max-width: 220px; padding: 10px 18px; } } .p-entry-content__form-btns > .p-entry-content__form-btn > span { font-size: clamp(1.6rem, 1.25vw, 2rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #ffffff; } .p-entry-content__form-confirm { max-width: 725px; width: 100%; padding: 12px 20px; margin-top: 16px; font-size: clamp(1.6rem, 1vw, 1.6rem); font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; border: 1px solid #CDD6DD; background: #FFECEC; } .p-entry-content__form-confirm-cap { font-size: clamp(1.4rem, 1vw, 1.6rem); font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #CDCDCD; } .p-entry-content .form-privacypolicy-item { display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto; font-size: clamp(1.4rem, 0.875vw, 1.4rem); font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } .p-entry-content .form-privacypolicy-item > input[type=checkbox] { position: relative; width: 20px; height: 20px; margin: 0 10px 0 0; border: 1px solid #707070; background: #ffffff; vertical-align: -5px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .p-entry-content .form-privacypolicy-item input[type=checkbox]:checked:before { position: absolute; top: -5px; left: 6px; -webkit-transform: rotate(50deg); transform: rotate(50deg); width: 10px; height: 19px; border-right: 3px solid #ff5638; border-bottom: 3px solid #ff5638; content: ""; } .p-entry-content .form-privacypolicy-item > a { margin-right: 4px; font-size: clamp(1.4rem, 0.875vw, 1.4rem); font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #1E2753; border-bottom: 1px solid #1E2753; } .p-entry-content__privacypolicy { margin-top: 120px; } .p-entry-content__privacypolicy-inner { max-width: 1440px; width: 100%; margin: 0 auto; padding: 86px 80px; background: #ffffff; } @media screen and (max-width: 963px) { .p-entry-content__privacypolicy-inner { padding: 60px 5vw; } } .p-entry-content__privacypolicy-inner > p { max-width: 825px; width: 100%; font-size: clamp(1.4rem, 1vw, 1.6rem); font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } .p-entry-content__privacypolicy-inner > .l-section-title { margin-bottom: 28px; } .p-entry-content__privacypolicy-inner > .l-section-title > h2 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: end; -webkit-align-items: flex-end; -ms-flex-align: end; align-items: flex-end; } @media screen and (max-width: 768px) { .p-entry-content__privacypolicy-inner > .l-section-title > h2 { -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .p-entry-content__privacypolicy-inner > .l-section-title > h2 > .en { font-size: clamp(3rem, 4.125vw, 6.6rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1; color: #1E2753; } .p-entry-content__privacypolicy-inner > .l-section-title > h2 > .ja { font-size: clamp(1.6rem, 1.5vw, 2.4rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #1E2753; } @media screen and (max-width: 768px) { .p-entry-content__privacypolicy-inner > .l-section-title > h2 > .ja { padding-left: clamp(26px, 2vw, 32px); } } .p-entry-content__privacypolicy-link:last-of-type { margin-top: 60px; } .p-entry-content__privacypolicy-link > a { display: block; position: relative; padding-left: 28px; width: 100%; word-wrap: break-word; font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 2.5; color: #0066FF; } @media screen and (max-width: 768px) { .p-entry-content__privacypolicy-link > a { margin-top: 16px; font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #0066FF; } } .p-entry-content__privacypolicy-link > a::before { content: ""; position: absolute; left: 0; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 21px; height: 21px; background: url("../../assets/img/icon/ico_links_01.svg") no-repeat; background-size: cover; } @media screen and (max-width: 768px) { .p-entry-content__privacypolicy-link > a::before { top: 5px; -webkit-transform: none; transform: none; } } .p-entry-content__privacypolicy-summary { margin-bottom: 60px; } .p-entry-content__privacypolicy-summary > p { max-width: 718px; width: 100%; margin-top: 24px; font-size: clamp(1.4rem, 1vw, 1.6rem); font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } .p-entry-content__privacypolicy-summary > p.p-entry-content__privacypolicy-title { margin-top: 80px; font-size: clamp(1.8rem, 1.25vw, 2rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } @media screen and (max-width: 768px) { .p-entry-content__privacypolicy-summary > p.p-entry-content__privacypolicy-title { margin-top: 40px; } } .p-entry-content__privacypolicy-title { margin-top: 80px; font-size: clamp(1.8rem, 1.25vw, 2rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } @media screen and (max-width: 768px) { .p-entry-content__privacypolicy-title { margin-top: 40px; } } .p-entry-content__privacypolicy-content { margin-top: 84px; padding: clamp(20px, 5vw, 80px); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: clamp(30px, 6vw, 100px); background: #FDF5F5; } @media screen and (max-width: 963px) { .p-entry-content__privacypolicy-content { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .p-entry-content__privacypolicy-content > p { -webkit-box-flex: 0; -webkit-flex: 0 0 auto; -ms-flex: 0 0 auto; flex: 0 0 auto; font-size: clamp(1.8rem, 1.25vw, 2rem); font-weight: 700; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } .p-entry-content__privacypolicy-content-item { font-size: clamp(1.6rem, 1.125vw, 1.8rem); font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } .entry-form .form-privacypolicy-item { display: block; width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto; font-size: clamp(1.4rem, 0.875vw, 1.4rem); font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; } .entry-form .form-privacypolicy-item > input[type=checkbox] { position: relative; width: 20px; height: 20px; margin: 0 10px 0 0; border: 1px solid #707070; background: #ffffff; vertical-align: -5px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .entry-form .form-privacypolicy-item input[type=checkbox]:checked:before { position: absolute; top: -5px; left: 6px; -webkit-transform: rotate(50deg); transform: rotate(50deg); width: 10px; height: 19px; border-right: 3px solid #ff5638; border-bottom: 3px solid #ff5638; content: ""; } .entry-form .form-privacypolicy-item > a { margin-right: 4px; font-size: clamp(1.4rem, 0.875vw, 1.4rem); font-weight: 400; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #1E2753; border-bottom: 1px solid #1E2753; } .entry-form .p-entry-content__form-btn { margin-top: 40px; } .entry-form .p-entry-content__form-btn.disabled { opacity: 0.6; } .entry-form .p-entry-content__form-btn.disabled:hover { top: 0; left: 0; -webkit-filter: drop-shadow(6px 6px #DDDEE5); filter: drop-shadow(6px 6px #DDDEE5); } .form-privacypolicy-item { width: -webkit-fit-content; width: -moz-fit-content; width: fit-content; margin: 0 auto; } .time-options > label { display: block; margin-left: 20px; margin-bottom: 16px; } .time-options > label > input[type=checkbox] { position: relative; width: 20px; height: 20px; margin: 0 10px 0 0; border: 1px solid #707070; background: #ffffff; vertical-align: -5px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .time-options > label input[type=checkbox]:checked:before { position: absolute; top: -5px; left: 6px; -webkit-transform: rotate(50deg); transform: rotate(50deg); width: 10px; height: 19px; border-right: 3px solid #ff5638; border-bottom: 3px solid #ff5638; content: ""; } .p-entry-content__form-item-check { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px; margin-top: 36px; padding-left: 40px; } @media screen and (max-width: 768px) { .p-entry-content__form-item-check { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } .p-entry-content__form-item-check > label { width: 45%; cursor: pointer; } @media screen and (max-width: 768px) { .p-entry-content__form-item-check > label { width: 100%; } } .p-entry-content__form-item-check > label > input[type=radio] { position: relative; width: 20px; height: 20px; margin: 0 10px 0 0; border: 1px solid #707070; background: #ffffff; border-radius: 50%; vertical-align: -2px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .p-entry-content__form-item-check > label input[type=radio]:checked:before { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 10px; height: 10px; border-radius: 50%; background: #1E2753; content: ""; } .p-entry-content__form-item > textarea { width: 100%; height: 270px; padding: 10px 20px; margin-top: 16px; background: #ffffff; border-radius: 10px; } @media screen and (max-width: 768px) { .p-entry-content__form-item > textarea { border-radius: 3px; } } .p-entry-content__form-item > textarea::-webkit-input-placeholder { color: #CCCCCC; } .p-entry-content__form-item > textarea::-moz-placeholder { color: #CCCCCC; } .p-entry-content__form-item > textarea:-ms-input-placeholder { color: #CCCCCC; } .p-entry-content__form-item > textarea::-ms-input-placeholder { color: #CCCCCC; } .p-entry-content__form-item > textarea::placeholder { color: #CCCCCC; } .p-entry-content__form-item-check input[type=checkbox] { position: relative; width: 20px; height: 20px; margin: 0 10px 0 0; border: 1px solid #707070; background: #ffffff; vertical-align: -5px; -webkit-appearance: none; -moz-appearance: none; appearance: none; } .p-entry-content__form-item-check input[type=checkbox]:checked:before { position: absolute; top: -5px; left: 6px; -webkit-transform: rotate(50deg); transform: rotate(50deg); width: 10px; height: 19px; border-right: 3px solid #ff5638; border-bottom: 3px solid #ff5638; content: ""; } .error { border: 2px solid red; background-color: #ffe6e6; } .error-message { display: none; margin-left: 8px; font-size: clamp(1.4rem, 1vw, 1.6rem); font-weight: 600; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #FF0000; } .footer-padding { width: 100%; padding-top: 90px; background: #ffffff; } @media screen and (max-width: 768px) { .footer-padding { padding-top: 21px; } } .p-entry-content__form-item select { width: 100%; max-width: 300px; margin-top: 16px; padding: 10px 20px; background: #ffffff; border: 1px solid #CDD6DD; border-radius: 10px; font-size: clamp(1.6rem, 1vw, 1.6rem); font-weight: 500; -webkit-font-smoothing: antialiased; line-height: 1.75; color: #272727; background: url("../../assets/img/icon/ico_ymd_01.png"), #ffffff; background-repeat: no-repeat; background-position: 90% center; } .p-entry-content__form-item input[type=date] { width: 100%; max-width: 300px; } .p-entry-content__form-item.after, .p-entry-content__form-item.before { display: none; border-top: 1px solid #000; } .p-entry-content__form-item.after > label, .p-entry-content__form-item.before > label { display: none; } #form-message { margin: 20px 0 0; text-align: center; color: #FF0000; } @media screen and (min-width: 1025px) { .u-dn-xl-min { display: none; } } @media screen and (min-width: 769px) { .u-dn-md-min { display: none; } } @media screen and (max-width: 768px) { .u-dn-md-max { display: none; } } .u-cf::after { display: block; clear: both; content: ""; }/*# sourceMappingURL=style.css.map */