@charset "UTF-8"; /*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) 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 - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 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; 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; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::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; line-break: after-white-space; user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } :root { --shadow: 0 0 0.7rem rgba(0, 0, 0, 0.2); --menu-gap: clamp(1.2rem, 1vw, 2.5rem); --link-hover: 0.6; --transition: 0.3s ease; --drop-shadow: 0 0 0.5rem rgba(0, 0, 0, 0.2); } :root { --black: #222; --white: #fff; --primary: #009995; --secondary: #22b49d; --tertiary: #006666; --accent: #ff4d79; --attention: #e60000; --gray: #b1b1b1; --dark-gray: #b1b1b1; --bg-dark-gray: #ddd; --bg-gray: #f7f7f7; --bg-green: #e5f5f4; --bg-yellow: #fffac2; --bg-youtube: #ff9f43; --bg-campaign: #f368e0; --bg-notice: #5f27cd; --bg-seminar: #2d85dd; --link: #009995; --btn: #009995; --btn-bg: #fff; } @font-face { font-family: "Noto Sans JP"; font-style: normal; font-weight: 400; font-display: swap; src: local("Noto Sans CJK JP Regular"), local("Noto Sans JP Regular"), local("NotoSansCJKjp-Regular"), local("NotoSansJP-Regular"), url("../fonts/jp400.woff") format("woff"); } @font-face { font-family: "Noto Sans JP"; font-style: normal; font-weight: 500; font-display: swap; src: local("Noto Sans CJK JP Medium"), local("Noto Sans JP Medium"), local("NotoSansCJKjp-Medium"), local("NotoSansJP-Medium"), url("../fonts/jp500.woff") format("woff"); } @font-face { font-family: "Noto Sans JP"; font-style: normal; font-weight: 700; font-display: swap; src: local("Noto Sans CJK JP Bold"), local("Noto Sans JP Bold"), local("NotoSansCJKjp-Bold"), local("NotoSansJP-Bold"), url("../fonts/jp700.woff") format("woff"); } :root { --jp-common: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック", Meiryo, sans-serif; --main_ttl: 3.2rem; --sub_ttl: 2.4rem; --xxl_tx: 2.2rem; --xl_tx: 2rem; --l_tx: 1.8rem; --common_tx: 1.6rem; --m_tx: 1.4rem; --s_tx: 1.2rem; --xs_tx: 1rem; } @media screen and (max-width: 767px) { :root { --main_ttl: clamp(2.8rem, 4vw, 3.2rem); --sub_ttl: clamp(2rem, 3.5vw, 2.4rem); --xxl_tx: clamp(1.9rem, 3.2vw, 2.2rem); --xl_tx: clamp(1.8rem, 3vw, 2rem); --l_tx: clamp(1.7rem, 2.8vw, 1.8rem); --common_tx: clamp(1.6rem, 2.6vw, 1.7rem); --m_tx: clamp(1.4rem, 2.5vw, 1.6rem); --s_tx: clamp(1.2rem, 2.2vw, 1.4rem); } } html { font-size: 62.5%; scroll-behavior: smooth; } body { width: 100vw; min-height: 100dvh; text-rendering: optimizeLegibility; font-family: var(--jp-common); font-feature-settings: "palt"; font-weight: 400; font-size: var(--common_tx); line-height: 1.5; color: var(--black); overflow-x: auto; overscroll-behavior: none; background-color: var(--white); } @media screen and (min-width: 1320px) { body { overflow-x: hidden; } } @media screen and (min-width: 768px) { body { width: max(132rem, 100%); } } @media screen and (max-width: 767px) { body { overflow-x: hidden; } } blockquote, dd, dl, figcaption, h1, h2, h3, h4, h5, ul, ol, li, p { font-size: inherit; font-weight: inherit; color: inherit; } img { max-width: 100%; height: auto; } figure, picture { margin: 0; line-height: 0; } pre { white-space: pre; } button { cursor: pointer; } :where(button, a) { transition: opacity 0.3s ease; } @media (any-hover: hover) { :where(button, a):hover { opacity: var(--link-hover); } } :where(button, a):not([tabindex="-1"]):focus-visible { outline: 0.2rem solid var(--primary); outline-offset: 0.3rem; } strong { font-weight: bold; } :where(.c-common-content) { line-height: 1.8; } :where(.c-common-content) > *:where(:not(h2):not(.c-page-table-scroll-decoration)) { margin-bottom: 3rem; } @media screen and (min-width: 768px) { :where(.c-common-content) > *:where(:not(h2):not(.c-page-table-scroll-decoration)) { margin-bottom: 4rem; margin-left: 2rem; } } :where(.c-common-content) h2 { position: relative; margin-bottom: 1em; padding: 0.2em 2rem; color: var(--primary); font-size: var(--sub_ttl); font-weight: 700; } :where(.c-common-content) h2::before { position: absolute; top: 0; left: 0; width: 0.4rem; height: 100%; background-color: var(--primary); border-radius: 0.2rem; content: ""; } :where(.c-common-content) h2:not(:first-child) { margin-top: 5rem; } :where(.c-common-content) h3, :where(.c-common-content) h4 { margin-bottom: 1.5rem; color: var(--primary); font-size: var(--xl_tx); font-weight: 700; } :where(.c-common-content) ul { list-style-type: disc; } :where(.c-common-content) ul li { margin-left: 2rem; } :where(.c-common-content) ul li::marker { color: var(--primary); } :where(.c-common-content) ul ul { list-style-type: square; } :where(.c-common-content) ul ul ul { list-style-type: circle; } :where(.c-common-content) ol { counter-reset: item; } :where(.c-common-content) ol > li { display: grid; grid-template-columns: auto 1fr; grid-template-areas: "number content" "none list"; width: 100%; counter-increment: item; } :where(.c-common-content) ol > li::before { grid-area: number; content: counters(item, "-") ". "; white-space: nowrap; padding-right: 0.5em; } :where(.c-common-content) ol > li a, :where(.c-common-content) ol > li strong, :where(.c-common-content) ol > li small, :where(.c-common-content) ol > li i, :where(.c-common-content) ol > li em, :where(.c-common-content) ol > li mark, :where(.c-common-content) ol > li del, :where(.c-common-content) ol > li ins, :where(.c-common-content) ol > li sub, :where(.c-common-content) ol > li sup, :where(.c-common-content) ol > li u, :where(.c-common-content) ol > li s, :where(.c-common-content) ol > li code, :where(.c-common-content) ol > li kbd, :where(.c-common-content) ol > li samp, :where(.c-common-content) ol > li var, :where(.c-common-content) ol > li cite, :where(.c-common-content) ol > li q, :where(.c-common-content) ol > li abbr, :where(.c-common-content) ol > li dfn, :where(.c-common-content) ol > li time, :where(.c-common-content) ol > li data, :where(.c-common-content) ol > li ruby, :where(.c-common-content) ol > li rt, :where(.c-common-content) ol > li rp { display: contents; } :where(.c-common-content) ol > li > *:not(a):not(br):not(strong):not(small):not(i):not(em):not(mark):not(del):not(ins):not(sub):not(sup):not(u):not(s):not(code):not(kbd):not(samp):not(var):not(cite):not(q):not(abbr):not(dfn):not(time):not(data):not(ruby):not(rt):not(rp) { grid-area: list; margin-left: 0; margin-top: 0.5rem; } :where(.c-common-content) strong { font-weight: 700; } :where(.c-common-content) a { color: var(--secondary); } :where(.c-common-content) em { font-style: italic; } :where(.c-common-content) small { display: inline-block; font-size: var(--s_tx); } :where(.c-common-content) mark { background-color: var(--accent); color: var(--white); padding: 0.1rem 0.2rem; border-radius: 0.2rem; } :where(.c-common-content) del { text-decoration: line-through; color: var(--gray); } :where(.c-common-content) ins { text-decoration: underline; background-color: rgba(var(--accent), 0.1); padding: 0.1rem 0.2rem; border-radius: 0.2rem; } :where(.c-common-content) sub { font-size: 0.75em; vertical-align: sub; } :where(.c-common-content) sup { font-size: 0.75em; } :where(.c-common-content) sup:not(.fn) { vertical-align: super; } :where(.c-common-content) u { text-decoration: underline; } :where(.c-common-content) s { text-decoration: line-through; } :where(.c-common-content) code { background-color: var(--gray); color: var(--black); padding: 0.1rem 0.3rem; border-radius: 0.2rem; font-size: 0.9em; } :where(.c-common-content) kbd { background-color: var(--gray); color: var(--black); padding: 0.1rem 0.3rem; border-radius: 0.2rem; border: 0.1rem solid var(--gray); box-shadow: 0 0.1rem 0 var(--gray); font-size: 0.9em; } :where(.c-common-content) samp { background-color: var(--gray); color: var(--black); padding: 0.1rem 0.3rem; border-radius: 0.2rem; font-size: 0.9em; } :where(.c-common-content) var { font-style: italic; color: var(--secondary); } :where(.c-common-content) cite { font-style: italic; color: var(--gray); } :where(.c-common-content) q { font-style: italic; } :where(.c-common-content) q::before { content: '"'; } :where(.c-common-content) q::after { content: '"'; } :where(.c-common-content) abbr { text-decoration: underline dotted; cursor: help; } :where(.c-common-content) dfn { font-style: italic; color: var(--secondary); } :where(.c-common-content) time { color: var(--gray); } :where(.c-common-content) data { color: var(--gray); } :where(.c-common-content) ruby { display: inline; } :where(.c-common-content) rt { font-size: 0.7em; color: var(--gray); } :where(.c-common-content) rp { display: none; } :where(.c-common-content) hr { border-bottom: 0.1rem solid var(--gray); } :where(.c-common-content) .wp-block-separator { border: 0; border-bottom: 0.1rem solid var(--gray); } :where(.c-common-content) .wp-block-file * + .wp-block-file__button { border-radius: 100vmax; padding: 0.1em 1em 0.3em; } .c-container { width: 100%; margin-inline: auto; } .c-container--large { padding-inline: 2rem; overflow-x: hidden; overflow-y: visible; } @media screen and (max-width: 767px) { .c-container--large { padding-inline: 1rem; } } @media screen and (min-width: 1720px) { .c-container--mv { padding-inline: 2rem; } } @media screen and (min-width: 768px) { .c-container--bg { min-width: 132rem; } .c-container--mv { width: clamp(132rem, 100%, 172rem); } .c-container--large { width: clamp(132rem, 100%, 172rem); } .c-container--medium { width: clamp(128rem, 95%, 148rem); } .c-container--fix-medium { width: 128rem; } .c-container--small { width: 120rem; } } .c-page-container { padding-bottom: 10rem; } .c-arrow-btn { --btn: #22b49d; --btn-bg: #fff; transition: all var(--transition); display: flex; align-items: center; justify-content: center; width: var(--btn-width, min(100%, 60rem)); margin-inline: auto; padding: 1em 1em 1.1em; border-radius: 1rem; border: 0.1rem solid var(--btn); position: relative; background-color: var(--btn-bg); color: var(--primary); font-weight: 700; } .c-arrow-btn::after { transition: all var(--transition); width: 1em; aspect-ratio: 1/1; position: absolute; top: 50%; transform: translateY(-50%); right: 2.15em; border-radius: 50%; background: center/contain no-repeat var(--btn) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M13.72 10l-6.08 5.46 1-5.46-1-5.46L13.72 10z'/%3E%3C/svg%3E"); content: ""; } @media (any-hover: hover) { .c-arrow-btn:hover { border-color: var(--btn); color: var(--btn-bg); background-color: var(--btn); opacity: 1; } .c-arrow-btn:hover::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%2322b49d' d='M13.72 10l-6.08 5.46 1-5.46-1-5.46L13.72 10z'/%3E%3C/svg%3E"); background-color: var(--btn-bg); } } .c-icon-btn { transform: translateZ(0); transition: border var(--transition), background-color var(--transition), color var(--transition); display: flex; align-items: center; justify-content: center; gap: 0.3em; width: var(--btn-width, min(100%, 60rem)); margin-inline: auto; padding: 0.7em 1em 0.8em; border-radius: 1rem; border: 0.1rem solid var(--btn); background-color: var(--btn); color: var(--white); font-size: var(--sub_ttl); font-weight: 500; filter: drop-shadow(var(--drop-shadow)); } @media (any-hover: hover) { .c-icon-btn:hover { opacity: 1; border: 0.1rem solid var(--btn); background-color: var(--white); color: var(--btn); } .c-icon-btn:hover::before { background-color: var(--btn); } } .c-icon-btn::before { margin-top: 0.1em; display: block; width: 1em; aspect-ratio: 1/1; transition: background-color var(--transition); mask: center/contain no-repeat; background-color: #fff; content: ""; } .c-icon-btn--account { --btn: #ff4d79; } .c-icon-btn--account::before { mask-image: url(../images/icon-open-account.svg); } .c-icon-btn--materials::before { mask-image: url(../images/icon-request-materials.svg); } .c-icon-btn--details { --btn: #ff9e43; background-color: var(--btn); } .c-icon-btn--details::before { mask-image: url(../images/icon-details.svg); } .c-icon-btn--contact::before { mask-image: url(../images/icon-contact.svg); } .c-icon-btn--today::before { mask-image: url(../images/icon-today.svg); } .c-text-arrow-btn { display: flex; align-items: center; justify-content: flex-end; width: fit-content; margin: 3rem 0 0 auto; padding-right: 1.5em; position: relative; font-size: var(--m_tx); line-height: 1; } .c-text-arrow-btn::after { transition: background-color var(--transition); width: 1rem; margin-top: 0.1em; aspect-ratio: 1/1; position: absolute; top: 50%; transform: translateY(-50%); right: 0.1rem; background-color: var(--btn); mask: center/contain no-repeat url(../images/icon-arrow.svg); content: ""; } .c-round-nav { overflow: hidden; display: flex; align-items: center; border: 1px solid var(--primary); border-radius: 100vmax; font-weight: 700; } .c-round-nav__current { display: flex; align-items: center; justify-content: center; border-radius: 50%; color: var(--white); background-color: var(--primary); } .c-round-nav__list { display: grid; } .c-round-nav__item { display: block; color: var(--primary); text-align: center; } .c-round-nav__item:not(:last-child) { border-right: 1px solid var(--primary); } .c-common-btns { display: flex; justify-content: center; flex-wrap: wrap; gap: 2rem; margin-bottom: 6rem; } .c-common-btns--3col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem min(6rem, 3.75vw); margin-inline: auto; } @media screen and (min-width: 768px) { .c-common-btns--3col { width: fit-content; } } @media screen and (max-width: 767px) { .c-common-btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; width: 100%; } } .c-common-btns__btn { transition: all var(--transition); display: block; flex: 1; padding: 0.8em 1em; border-radius: 1rem; color: var(--white); font-weight: 700; font-size: var(--m_tx); text-align: center; background-color: var(--btn); } @media (any-hover: hover) { .c-common-btns__btn:hover { transform: translateY(-0.2rem); filter: drop-shadow(var(--drop-shadow)); opacity: var(--link-hover); } } @media screen and (max-width: 767px) { .c-common-btns__btn { display: grid; place-items: center; } } :where(.c-common-btns--3col) .c-common-btns__btn { display: grid; place-items: center; padding: 0.8em 3em; } @media screen and (max-width: 767px) { :where(.c-common-btns--3col) .c-common-btns__btn { padding: 0.8em 1em; } } .c-grid-2col, .c-grid-sp2col, .c-grid-2col-sp1col { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } @media screen and (max-width: 767px) { .c-grid-2col-sp1col { grid-template-columns: 1fr; } } @media screen and (min-width: 768px) { .c-grid-sp2col { display: block; } } .c-grid-3col, .c-grid-3col-sp1col, .c-grid-3col-sp2col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); } @media screen and (max-width: 767px) { .c-grid-3col-sp2col { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media screen and (max-width: 767px) { .c-grid-3col-sp1col { grid-template-columns: 1fr; } } .c-grid-4col, .c-grid-4col-sp3col, .c-grid-4col-sp2col, .c-grid-4col-sp1col { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); } @media screen and (max-width: 767px) { .c-grid-4col-sp1col { grid-template-columns: 1fr; } } @media screen and (max-width: 767px) { .c-grid-4col-sp2col { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media screen and (max-width: 767px) { .c-grid-4col-sp3col { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .c-ttl { all: revert; margin-bottom: 5rem; font-size: var(--main_ttl); font-weight: 700; text-align: center; } .c-ttl--linear { --start-color: #009995; --end-color: #00c9c8; background: linear-gradient(90deg, var(--start-color) 0%, var(--end-color) 70%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } .c-ttl::before { all: unset; } .c-common-content .c-ttl { margin-top: 8rem; } .c-secondary-ttl { position: relative; margin-bottom: 1em; padding: 0.2em 2rem; color: var(--primary); font-size: var(--sub_ttl); font-weight: 700; } .c-secondary-ttl::before { position: absolute; top: 0; left: 0; width: 0.4rem; height: 100%; background-color: var(--primary); border-radius: 0.2rem; content: ""; } .c-secondary-ttl:not(:first-child) { margin-top: 5rem; } .c-tertiary-title { margin-left: 2rem; margin-bottom: 1.5rem; color: var(--primary); font-size: var(--xl_tx); font-weight: 700; } .l-main { --swiper-pagination-bullet-inactive-color: #b1b1b1; --swiper-pagination-bottom: -3rem; } @media screen and (max-width: 767px) { .l-main { --swiper-pagination-bottom: -2rem; } } .l-main .swiper-button { transition: all var(--transition); z-index: 10; display: flex; align-items: center; justify-content: center; width: 4rem; height: 4rem; margin-top: 0; border-radius: 50%; position: absolute; top: calc(50% - 2rem); background: center/80% no-repeat var(--secondary) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M13.72 10l-6.08 5.46 1-5.46-1-5.46L13.72 10z'/%3E%3C/svg%3E"); outline: 0.2rem solid transparent; color: revert; cursor: pointer; } .l-main .swiper-button::after { content: ""; } @media (any-hover: hover) { .l-main .swiper-button:hover { opacity: 1; background-color: var(--white); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%2322b49d' d='M13.72 10l-6.08 5.46 1-5.46-1-5.46L13.72 10z'/%3E%3C/svg%3E"); outline: 0.2rem solid var(--secondary); } } .l-main .swiper-button:focus-visible { opacity: 1; outline: 0.2rem solid var(--secondary); background-color: var(--white); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%2322b49d' d='M13.72 10l-6.08 5.46 1-5.46-1-5.46L13.72 10z'/%3E%3C/svg%3E"); } .l-main .swiper-button-prev { rotate: 180deg; } .l-main .swiper-pagination, .l-main .swiper-pagination-bullets.swiper-pagination-horizontal { z-index: 10; position: absolute; left: 0; width: 100%; } .l-main .swiper-pagination .swiper-pagination-bullet, .l-main .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet { width: 0.8rem; height: 0.8rem; margin: 0 0.5rem; opacity: 1; } .l-main .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active, .l-main .swiper-pagination-bullets.swiper-pagination-horizontal .swiper-pagination-bullet.swiper-pagination-bullet-active { background-color: var(--secondary); } .l-main .swiper-pause-button { --icon-bg: #22b49d; --icon-img: #fff; display: flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; margin-left: 1rem; border: 0.1rem solid var(--secondary); border-radius: 50%; background-color: var(--icon-bg); cursor: pointer; transition: all var(--transition); } .l-main .swiper-pause-button::before { width: 1rem; height: 1rem; background: center/contain no-repeat; mask-image: url(../images/icon-pause.svg); background-color: var(--icon-img); content: ""; } .l-main .swiper-pause-button .swiper-pause-icon, .l-main .swiper-pause-button .swiper-play-icon { transition: all var(--transition); width: 1rem; height: 1rem; } @media (any-hover: hover) { .l-main .swiper-pause-button:hover { --icon-img: #22b49d; --icon-bg: #fff; } } .l-main .swiper-pause-button.is-paused { --icon-img: #22b49d; --icon-bg: #fff; } .l-main .swiper-pause-button.is-paused::before { mask-image: url(../images/icon-play.svg); } @media (any-hover: hover) { .l-main .swiper-pause-button.is-paused:hover { --icon-bg: #22b49d; --icon-img: #fff; } } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } .c-button-tab__input { position: absolute; opacity: 0; pointer-events: none; } .c-button-tab__input:focus-visible { opacity: 1; position: relative; z-index: 10; outline: 0.2rem solid var(--primary); outline-offset: 0.2rem; } .c-button-tab__label { transition: all var(--transition); display: flex; align-items: center; justify-content: center; min-height: 6rem; padding: 2.5em 1.5em; border-radius: 1rem; color: var(--white); font-size: var(--m_tx); font-weight: 700; text-align: center; background-color: var(--gray); cursor: pointer; } @media screen and (max-width: 767px) { .c-button-tab__label { font-size: var(--m_tx); padding: 1em; } } @media (any-hover: hover) { .c-button-tab__label:hover { transform: translateY(-0.3rem); opacity: var(--link-hover); filter: drop-shadow(var(--drop-shadow)); } } .c-button-tab__label:focus-visible { opacity: 1; outline: 0.2rem solid var(--primary); outline-offset: 0.2rem; } .c-button-tab__label[aria-selected=true] { transform: translateY(-0.3rem); background-color: var(--primary); pointer-events: none; filter: drop-shadow(var(--drop-shadow)); } .c-button-tab__content[aria-hidden=true] { display: none; } .c-button-tab__content[aria-hidden=false] { display: block; } .c-button-tab__content[aria-hidden=false]:focus-within { outline: none; } .c-tabs__tab-list { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); } .c-tabs__tab-item { --tab-border-color: #ddd; transition: all var(--transition); display: block; border-bottom: 0.3rem solid var(--tab-border-color); margin-bottom: 3rem; position: relative; text-align: center; color: var(--tab-border-color); cursor: pointer; } @media screen and (min-width: 768px) { .c-tabs__tab-item { padding: 1rem; } } @media screen and (max-width: 767px) { .c-tabs__tab-item { padding-bottom: 1rem; font-size: var(--s_tx); } } @media (any-hover: hover) { .c-tabs__tab-item:hover { --tab-border-color: #009995; opacity: var(--link-hover); } } .c-tabs__tab-item:focus-visible { --tab-border-color: #009995; opacity: var(--link-hover); outline: 0.2rem solid var(--primary); } .c-tabs__tab-item.active { --tab-border-color: #009995; pointer-events: none; } .c-tabs__tab-item::after { transition: all var(--transition); display: block; width: 1rem; height: 1rem; clip-path: polygon(0% 0%, 50% 100%, 100% 0%); position: absolute; bottom: -1rem; left: 50%; translate: -50% 0; background-color: var(--tab-border-color); content: ""; } .c-pagination { margin-top: 8rem; } .c-pagination__list { display: flex; align-items: center; justify-content: center; gap: min(2.5rem, 2vw); } .c-pagination__link, .c-pagination__text { display: grid; place-items: center; width: 4rem; aspect-ratio: 1/1; padding-bottom: 0.1em; border: 0.1rem solid var(--gray); border-radius: 50%; text-align: center; } @media screen and (max-width: 767px) { .c-pagination__link, .c-pagination__text { width: 3.5rem; font-size: var(--m_tx); } } .c-pagination__text { border-color: var(--primary); background-color: var(--primary); color: var(--white); } .c-pagination__dots { display: grid; place-items: center; width: 4rem; aspect-ratio: 1/1; text-align: center; color: var(--primary); font-weight: 700; } @media screen and (max-width: 767px) { .c-pagination__dots { width: 1.5rem; font-size: 1.4rem; } } .c-pagination__link--first, .c-pagination__link--prev, .c-pagination__link--next, .c-pagination__link--last { padding-top: 0.3rem; } .c-pagination__link--first::after, .c-pagination__link--prev::after, .c-pagination__link--next::after, .c-pagination__link--last::after { width: 1.5rem; aspect-ratio: 1/1; background: center/contain no-repeat; content: ""; } @media screen and (max-width: 767px) { .c-pagination__link--first::after, .c-pagination__link--prev::after, .c-pagination__link--next::after, .c-pagination__link--last::after { width: var(--s_tx); } } .c-pagination__link--first, .c-pagination__link--prev { padding-right: 0.2rem; } .c-pagination__link--next, .c-pagination__link--last { padding-left: 0.2rem; } .c-pagination__link--first::after { rotate: 180deg; background-image: url(../images/icon-double-arrow.svg); } .c-pagination__link--prev::after { rotate: 180deg; background-image: url(../images/icon-arrow.svg); } .c-pagination__link--next::after { background-image: url(../images/icon-arrow.svg); } .c-pagination__link--last::after { background-image: url(../images/icon-double-arrow.svg); } .c-pagination__link--inactive { opacity: 0.3; pointer-events: none; } .c-tel-contact-info { width: 100%; } .c-tel-contact-info__item { overflow: hidden; border-radius: 1rem; filter: drop-shadow(var(--drop-shadow)); transform: translateZ(0); } .c-tel-contact-info__ttl { padding: 0.8em 1em; color: #fff; font-size: var(--sub_ttl); font-weight: 500; text-align: center; background-color: var(--secondary); } .c-tel-contact-info__phone { padding: 0.8em 1em; text-align: center; color: var(--primary); background-color: var(--white); } .c-tel-contact-info__phone-link { display: flex; align-items: center; justify-content: center; font-size: 4.5rem; font-weight: 500; color: var(--secondary); text-decoration: none; } @media screen and (min-width: 768px) { .c-tel-contact-info__phone-link { pointer-events: none; } } @media screen and (max-width: 767px) { .c-tel-contact-info__phone-link { font-size: 3.5rem; } } .c-tel-contact-info__phone-link::before { display: block; margin-top: 0.1em; padding-right: 1.5em; width: 1em; height: 1em; mask: center/contain no-repeat url(../images/icon-contact-phone.svg); background-color: var(--tertiary); content: ""; } .c-tel-contact-info__phone-link .c-tel-contact-info__note { font-size: var(--m_tx); font-weight: 500; color: var(--black); text-align: center; } .c-breadcrumb { margin: 3rem auto 8rem; } @media screen and (max-width: 767px) { .c-breadcrumb { margin: 2rem auto 5rem; } } .c-breadcrumb__item { display: inline; align-items: center; gap: 0.5em; position: relative; font-size: var(--m_tx); color: var(--primary); } .c-breadcrumb__item:not(:last-child)::after { display: inline-block; rotate: 45deg; width: 0.3em; aspect-ratio: 1/1; margin: 0 0.8em 0.2em 0; border-top: 0.1rem solid var(--black); border-right: 0.1rem solid var(--black); content: ""; } .c-breadcrumb__link { margin-right: 0.7em; color: var(--black); } .c-mv__container { width: 100%; aspect-ratio: 32/11; display: flex; align-items: center; justify-content: flex-start; background: center/contain no-repeat; background-image: var(--bg-image); } @media screen and (max-width: 767px) { .c-mv__container { aspect-ratio: 3/2; background-image: var(--bg-image-sp); } } .c-mv__title { z-index: 1; width: fit-content; color: var(--white); font-size: 5rem; font-weight: 700; } @media screen and (max-width: 767px) { .c-mv__title { font-size: 2.8rem; } } .c-mv__title::before { display: block; width: 1em; aspect-ratio: 4/3; margin-inline: auto; border-bottom: 0.1rem solid var(--white); background: center/contain no-repeat url(../images/icon-page-mv-decoration.svg); content: ""; } @keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes slideRightLeft { 0% { transform: translateX(0); } 50% { transform: translateX(10vw); } 100% { transform: translateX(0); } } .c-page-table { margin-bottom: 1rem; } .c-page-table--deposit { max-width: 60rem; margin-inline: auto; margin-top: 0; } @media screen and (max-width: 767px) { .c-page-table-scroll-decoration { position: relative; } .c-page-table-scroll-decoration::before { transition: opacity var(--transition); z-index: 99; position: absolute; top: 15rem; left: calc(50% - 15vw); width: 20vw; height: 20vw; background: center/contain no-repeat url(../images/icon-scroll-hint.svg); content: ""; } .c-page-table-scroll-decoration.is-active::before { opacity: 0; visibility: hidden; } .c-page-table-scroll-decoration.animate-before::before { animation: slideRightLeft 1s ease-in-out 3; } .c-page-table-scroll-decoration .c-page-table { overflow-x: auto; -webkit-overflow-scrolling: touch; overscroll-behavior-inline: contain; padding-right: 2rem; } } .table { width: 100%; border-collapse: collapse; font-size: var(--m_tx); text-align: center; } @media screen and (max-width: 767px) { .table { width: fit-content; font-size: var(--s_tx); } .table:not(.table--time):not(.table--sp-fixed) { white-space: nowrap; } .table:not(:first-child) { margin-top: 2rem; } .table--time, .table--sp-fixed { width: 100%; white-space: wrap; } .table--time thead th:first-child, .table--time tbody td:first-child { width: 45%; } } .table .sub-title { margin-bottom: 0; padding: 1em; color: var(--primary); font-size: var(--common_tx); font-weight: 700; text-align: left; background-color: #e5f5f4; } @media screen and (max-width: 767px) { .table .sub-title { font-size: var(--m_tx); } } .table thead th { padding: 1em; border: 0.1rem solid var(--white); border-bottom: 0.1rem solid var(--primary); color: var(--white); font-size: var(--common_tx); font-weight: 700; text-align: center; vertical-align: middle; background-color: var(--primary); } @media screen and (max-width: 767px) { .table thead th { padding: 0.5em; font-size: var(--m_tx); } } .table thead th:first-child { border-left: 0.1rem solid var(--primary); } .table thead th:last-child { border-right: 0.1rem solid var(--primary); } .table thead th p { font-size: var(--common_tx); font-weight: 700; } @media screen and (max-width: 767px) { .table thead th p { font-size: var(--m_tx); } } .table tbody th { padding: 1em; border: 0.1rem solid var(--primary); background-color: var(--bg-gray); vertical-align: middle; } @media screen and (max-width: 767px) { .table tbody th { padding: 0.5em; } } .table tbody td { padding: 1em; border: 0.1rem solid var(--primary); background-color: var(--white); vertical-align: middle; } @media screen and (max-width: 767px) { .table tbody td { padding: 0.5em; } } .c-cta { padding-block: 5rem; background-color: var(--bg-gray); } .c-cta__inner { display: flex; flex-direction: column; gap: 1.5rem; } .c-loading { --loading-top: 50%; position: relative; } .c-loading::before, .c-loading::after { transition: all var(--transition); position: absolute; visibility: hidden; opacity: 0; } .c-loading::before { z-index: 9; transition: opacity var(--transition), visibility var(--transition); width: 100%; height: 100%; top: 0; left: 0; background-color: rgba(255, 255, 255, 0.4); content: ""; } .c-loading::after { z-index: 10; width: 4rem; height: 4rem; border: 0.3rem solid #f3f3f3; border-top: 0.3rem solid var(--primary); border-radius: 50%; animation: spin 1s linear infinite; top: var(--loading-top); left: calc(50% - 2rem); transform: translateY(-50%); content: ""; } .c-loading--active { pointer-events: none; } .c-loading--active::before, .c-loading--active::after { visibility: visible; opacity: 1; } .c-form__item { margin-bottom: 3rem; box-sizing: border-box; } @media screen and (min-width: 768px) { .c-form__item { display: flex; align-items: flex-start; justify-content: flex-start; gap: 1.5rem 10em; } } .c-form__label { display: block; position: relative; font-weight: 700; color: var(--primary); } @media screen and (min-width: 768px) { .c-form__label { width: 20%; text-align: right; } :where(.c-form__item--center) .c-form__label { margin-top: 0.5em; } } @media screen and (max-width: 767px) { .c-form__label { width: fit-content; margin-bottom: 1rem; } } .c-form__required { display: inline-block; width: fit-content; padding: 0.2rem 0.5rem; margin-left: 0.5rem; font-size: var(--s_tx); color: var(--white); background-color: var(--accent); border-radius: 0.5rem; } @media screen and (min-width: 768px) { .c-form__required:not(.c-form__required--inline) { position: absolute; top: 0.1em; right: -4em; } } .c-form__input-area { width: 100%; flex-shrink: 0; } @media screen and (min-width: 768px) { .c-form__input-area { width: min(60rem, 100%); } } .c-form__input, .c-form__textarea { width: 100%; padding: 0.5em 1em; border: 0.2rem solid var(--primary); background-color: var(--white); transition: border-color 0.3s ease; } .c-form .wpcf7-form-control-wrap:has(select) { position: relative; display: flex; flex-wrap: wrap; align-items: center; width: 100%; } .c-form .wpcf7-form-control-wrap:has(select)::after { content: ""; position: absolute; right: 1.2rem; top: 1.5em; transform: translateY(-50%); width: 0; height: 0; border-left: 0.6rem solid transparent; border-right: 0.6rem solid transparent; border-top: 0.8rem solid var(--primary); pointer-events: none; z-index: 2; } .c-form__select { overflow: hidden; width: 100%; height: 2.8em; padding: 0.5em calc(1em + 1.2rem) 0.5em 1em; border: 0.2rem solid var(--primary); background-color: var(--white); transition: border-color 0.3s ease; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: none; } .c-form__select option:disabled, .c-form .placeholder { color: var(--bg-dark-gray); } .c-form__input:focus, .c-form__select:focus, .c-form__textarea:focus { border-color: var(--secondary); } .c-form__select:focus { outline: 0.2rem solid var(--primary); outline-offset: 0.3rem; } .c-form__input:invalid { border-color: var(--attention); } .c-form__checkbox, .c-form__radio { display: flex; flex-wrap: wrap; justify-content: flex-start; gap: 1.2rem; } .c-form__checkbox span.wpcf7-list-item { display: flex; align-items: center; margin: 0; width: calc((100% - 2.4rem) / 3); } @media screen and (max-width: 767px) { .c-form__checkbox span.wpcf7-list-item { width: calc((100% - 1.2rem) / 2); } } .c-form__checkbox--full span.wpcf7-list-item { width: 100%; } .c-form__radio span.wpcf7-list-item { display: flex; align-items: center; margin: 0; } .c-form input[type=radio], .c-form input[type=checkbox] { appearance: none; width: 2rem; height: 2rem; border: 0.2rem solid var(--bg-dark-gray); background-color: var(--bg-dark-gray); margin-right: 1rem; position: relative; cursor: pointer; flex-shrink: 0; } .c-form input[type=radio]:focus-visible, .c-form input[type=checkbox]:focus-visible { opacity: 1; outline: 0.2rem solid var(--primary); outline-offset: 0.3rem; } .c-form input[type=radio] { border-radius: 50%; } .c-form input[type=radio]:checked, .c-form input[type=checkbox]:checked { border-color: var(--primary); background-color: var(--primary); box-shadow: inset 0 0 0 0.2rem var(--white); } .c-form__date-group { display: flex; align-items: center; gap: 2rem; } .c-form__date-item { display: flex; align-items: center; gap: 1rem; width: 100%; } .c-form__date-label { white-space: nowrap; } .c-form__address-group { display: flex; flex-direction: column; gap: 1.5rem; } .c-form .zipcode-status { margin-top: 0.5rem; padding: 0.5rem 1rem; border-radius: 0.4rem; font-size: 1.2rem; font-weight: 500; transition: all var(--transition); } .c-form .zipcode-status.zipcode-loading { background-color: #e3f2fd; color: #1976d2; border: 0.1rem solid #bbdefb; } .c-form .zipcode-status.zipcode-success { background-color: #e8f5e8; color: #2e7d32; border: 0.1rem solid #c8e6c9; } .c-form .zipcode-status.zipcode-error { background-color: #ffebee; color: #c62828; border: 0.1rem solid #ffcdd2; } .c-form__address-item { display: block; } .c-form__address-label { display: block; margin-bottom: 1rem; } .c-form__textarea { min-height: 12rem; resize: vertical; } .c-form__agreement { width: fit-content; margin-inline: auto; } .c-form__agreement .wpcf7-list-item { margin-left: 0; } .c-form__agreement .wpcf7-list-item label { display: flex; align-items: flex-start; justify-content: flex-start; flex-wrap: nowrap; width: 100%; } .c-form__agreement .wpcf7-list-item label input[type=checkbox] { margin-top: 0.2em; } .c-form__agreement label { cursor: pointer; } .c-form *::placeholder { opacity: 0.3; } .c-form__submit { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; flex-direction: column; margin-inline: auto; margin-top: 5rem; gap: 2rem; } @media screen and (min-width: 768px) { .c-form__submit { padding-inline: 30% 20%; } } .c-form .wpcf7-spinner { display: none; } .c-form .wpcf7 .wpcf7-response-output { display: none; } .c-form .wpcf7 form.failed .wpcf7-response-output, .c-form .wpcf7 form.aborted .wpcf7-response-output, .c-form .wpcf7 form.invalid .wpcf7-response-output, .c-form .wpcf7 form.unaccepted .wpcf7-response-output, .c-form .wpcf7 form.payment-required .wpcf7-response-output { display: block; padding: 1em; border: 0; color: #dc3232; background-color: #ffebee; } .c-form__submit-btn, .c-form__previous-btn { transition: all var(--transition); margin-inline: auto; padding: 1em; border-radius: 1rem; text-align: center; font-weight: 700; cursor: pointer; } .c-form__submit-btn { width: 100%; border: 0.1rem solid var(--secondary); } .c-form__submit-btn:disabled { background-color: var(--bg-dark-gray); border: 0.1rem solid var(--bg-dark-gray); color: var(--gray); } .c-form__submit-btn:not(:disabled) { color: var(--tertiary); background-color: var(--white); } @media (any-hover: hover) { .c-form__submit-btn:not(:disabled):hover { background-color: var(--secondary); color: var(--white); } } .c-form__previous-btn { width: 60%; border: 0.1rem solid var(--gray); } @media (any-hover: hover) { .c-form__previous-btn:hover { background-color: var(--gray); color: var(--white); } } .c-news-content__item { align-items: flex-start; line-height: 1.8; } @media screen and (min-width: 768px) { .c-news-content__item { display: grid; grid-template-columns: auto 6.5em 1fr; gap: 1.5em; } } @media screen and (max-width: 767px) { .c-news-content__item { display: flex; justify-content: flex-start; flex-wrap: wrap; gap: 0.5em 1.5em; width: 100%; font-size: var(--m_tx); } } .c-news-content__item:not(:last-child) { margin-bottom: 1em; } @media screen and (max-width: 767px) { .c-news-content__item:not(:last-child) { margin-bottom: 1.5em; } } .c-news-content__item-tag { padding-bottom: 0.1em; border-radius: 100vmax; color: var(--white); font-size: var(--m_tx); font-weight: 700; text-align: center; } @media screen and (min-width: 768px) { .c-news-content__item-tag { margin-top: 0.2em; } } @media screen and (max-width: 767px) { .c-news-content__item-tag { width: 6.5em; margin-top: 0.2em; font-size: var(--s_tx); } } .c-news-content__item-tag--notice { background-color: #5f27cd; } .c-news-content__item-tag--campaign { background-color: #f368e0; } .c-news-content__item-tag--seminar { background-color: #2e86de; } .c-news-content__item-tag--youtube { background-color: #ff9f43; } .c-news-content__item-title { color: var(--primary); text-decoration: underline; text-underline-offset: 0.3em; } @media screen and (max-width: 767px) { .c-news-content__item-title { width: 100%; } } html { scroll-padding-top: 15rem; } @media screen and (max-width: 767px) { html { scroll-padding-top: 6rem; } } body::-webkit-scrollbar { width: 1rem; background: var(--bg-gray); } body::-webkit-scrollbar-thumb { border-radius: 0.5rem; } body::-webkit-scrollbar-thumb:vertical { background: linear-gradient(to bottom, var(--bg-green), var(--secondary)); } body::-webkit-scrollbar-thumb:horizontal { background: linear-gradient(to right, var(--bg-green), var(--secondary)); } .l-header-attention { z-index: 9999; transition: background-color 0.2s ease, max-height 0.2s ease; overflow: hidden; position: relative; background-color: var(--attention); max-height: 50em; isolation: isolate; } .l-header-attention--closed { background-color: var(--white); max-height: 0; } .l-header-attention__container { display: grid; grid-template-columns: 1em 1fr; align-items: center; gap: 1em; margin-inline: auto; padding: 1rem 2rem; } @media screen and (max-width: 767px) { .l-header-attention__container { width: 100vw; padding: 1rem; } } .l-header-attention__message { color: var(--white); font-size: var(--common_tx); font-weight: 500; line-height: 1.6; } .l-header-attention__close { transition: opacity var(--transition); display: flex; align-items: center; justify-content: center; width: 1.6rem; height: 1.6rem; border-radius: 50%; position: relative; background-color: var(--white); cursor: pointer; } @media (any-hover: hover) { .l-header-attention__close:hover { opacity: var(--link-hover); } } .l-header-attention__close span { position: absolute; width: 0.8rem; height: 0.2rem; background-color: var(--attention); border-radius: 0.1rem; } .l-header-attention__close span:first-child { transform: rotate(45deg); } .l-header-attention__close span:last-child { transform: rotate(-45deg); } .l-header { z-index: 99; position: sticky; top: 0; left: 0; width: 100%; background-color: var(--white); filter: drop-shadow(var(--drop-shadow)); } @media screen and (max-width: 767px) { .l-header { width: 100vw; } } .l-header__container { width: 100%; margin-inline: auto; padding-inline: 2rem; padding: 1rem; } @media screen and (max-width: 767px) { .l-header__container { height: 6rem; } } @media screen and (min-width: 768px) { .l-header__container { display: flex; align-items: center; justify-content: space-between; width: clamp(132rem, 100%, 172rem); padding: 1.5rem 2rem; min-height: 10.5rem; gap: var(--menu-gap); } } .l-header__logo { flex-shrink: 0; width: 7rem; aspect-ratio: 1/1; } @media screen and (max-width: 767px) { .l-header__logo { width: 4rem; } } .l-header__logo-link { display: block; height: 100%; } .l-header__hamburger-wrap { z-index: 999; position: absolute; top: calc(50% - 1.2rem); right: 1rem; } @media screen and (min-width: 768px) { .l-header__hamburger-wrap { display: none; } } .l-header__hamburger { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; flex-direction: column; width: 3.3rem; height: 2.4rem; } .l-header__hamburger i { transition: all var(--transition); width: 100%; height: 0.2rem; border-radius: 0.5rem; background-color: var(--primary); } .l-header__hamburger::before { transition: all var(--transition); opacity: 0; position: absolute; top: 50%; transform: translateY(-50%); left: -3em; font-size: var(--xs_tx); font-weight: 700; color: var(--dark-gray); content: "閉じる"; } .l-header__hamburger--open i { width: 2.3rem; background-color: var(--black); } .l-header__hamburger--open i:nth-child(1) { transform: translate(0.5rem, 1.1rem) rotate(45deg); } .l-header__hamburger--open i:nth-child(2) { opacity: 0; } .l-header__hamburger--open i:nth-child(3) { transform: translate(0.5rem, -1.1rem) rotate(-45deg); } .l-header__hamburger--open::before { opacity: 1; } @media screen and (min-width: 768px) { .l-header-nav { display: flex; align-items: center; justify-content: flex-end; flex: 1; gap: var(--menu-gap); } } @media screen and (max-width: 767px) { .l-header-nav { transition: all 0.3s ease; z-index: 99; visibility: hidden; opacity: 0; width: 100vw; height: 100vh; min-height: 100vh; position: absolute; top: 0; left: 0; background-color: var(--white); } .l-header-nav--open { visibility: visible; opacity: 1; } } @media screen and (min-width: 768px) { .l-header-nav__container { display: contents; } } @media screen and (max-width: 767px) { .l-header-nav__container { overflow-y: auto; overflow-x: hidden; overscroll-behavior: none; display: flex; flex-direction: column; height: 100dvh; padding: 6rem 10vw 0; } } .l-header-nav__btns { display: flex; } @media screen and (max-width: 767px) { .l-header-nav__btns { width: 100%; flex-direction: column; gap: 2rem; margin: 3rem 0; } } @media screen and (min-width: 768px) { .l-header-nav__btns { align-items: center; justify-content: flex-end; flex-wrap: nowrap; gap: 1rem; width: fit-content; } } @media screen and (min-width: 768px) { .l-header-nav__btn { font-size: clamp(1.3rem, 1.1rem + 0.2vw, 1.6rem); padding: 0.7em 0 0.8em; width: 10em; } } @media screen and (max-width: 1319px) { .l-header-nav__btn { font-size: 1.4rem; width: 9em; } } @media screen and (max-width: 767px) { .l-header-nav__btn { font-size: var(--common_tx); padding: 1em 1em 1.1em; width: 100%; } } @media screen and (min-width: 768px) { .l-header-nav__list { display: flex; align-items: center; justify-content: space-evenly; flex: 1; gap: var(--menu-gap); } } @media screen and (max-width: 767px) { .l-header-nav__list { display: contents; margin-bottom: 2rem; } } .l-header-nav__list-col { position: relative; } @media screen and (max-width: 767px) { .l-header-nav__list-col { width: 100%; } .l-header-nav__list-col--site-use { order: 1; width: 100vw; margin-inline: calc(50% - 50vw); padding: 6rem 10vw; background-color: var(--primary); } .l-header-nav__list-col--site-use .l-header-nav__list-label { display: block; color: var(--white); padding-left: 1.5em; pointer-events: none; } .l-header-nav__list-col--site-use .l-header-nav__list-label::after { display: none; } .l-header-nav__list-col--site-use .l-header-nav__list-label::before { display: none; } .l-header-nav__list-col--site-use .l-header-nav__list-child { max-height: revert; margin-left: 2em; } .l-header-nav__list-col--site-use .l-header-nav__list-child ul { margin-left: 0; } .l-header-nav__list-col--site-use .l-header-nav__list-child > li { margin-left: 0; border: 0; } .l-header-nav__list-col--site-use .l-header-nav__list-child a { padding-left: 0; color: var(--white); } } .l-header-nav__list-item { display: none; } @media screen and (max-width: 767px) { .l-header-nav__list-item { display: none; } } .l-header-nav__list-label { transition: opacity var(--transition); display: block; padding: 1rem 0; font-size: clamp(1.3rem, 1.1rem + 0.2vw, 1.6rem); font-weight: 500; color: var(--black); text-decoration: none; cursor: pointer; } @media screen and (max-width: 1319px) { .l-header-nav__list-label { font-size: 1.4rem; } } @media screen and (max-width: 767px) { .l-header-nav__list-label { display: grid; grid-template-columns: 1em 1fr 1em; align-items: center; gap: 0.8em; width: 100%; font-size: 2rem; color: var(--tertiary); } .l-header-nav__list-label::before { display: block; height: 0.3em; width: 1em; margin-top: 0.2em; background-color: var(--tertiary); content: ""; } .l-header-nav__list-label::after { display: flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; padding-bottom: 0.1em; border-radius: 50%; border: 0.1rem solid var(--tertiary); font-size: 1.2rem; content: "＋"; } } @media (any-hover: hover) { .l-header-nav__list-label:hover { opacity: var(--link-hover); } } @media screen and (min-width: 768px) { .l-header-nav__list-label { border-bottom: 0.1rem solid var(--white); } .l-header-nav__list-label::after { transition: transform var(--transition); rotate: 90deg; display: inline-block; width: 0.6em; height: 0.6em; margin-left: 0.5em; background: center/contain no-repeat url("../images/icon-arrow.svg"); content: ""; } } @media screen and (min-width: 768px) and (any-hover: hover) { :where(.l-header-nav__list-col:hover) .l-header-nav__list-label::after { transform: rotate(180deg); } :where(.l-header-nav__list-col:hover) .l-header-nav__list-label { border-bottom: 0.1rem solid var(--tertiary); } } @media screen and (min-width: 768px) { :where(.l-header-nav__list-col:focus-visible) .l-header-nav__list-label { border-bottom: 0.1rem solid var(--tertiary); } :where(.l-header-nav__list-col:focus-visible) .l-header-nav__list-label::after { transform: rotate(180deg); } :where(.l-header-nav__list-col:focus) .l-header-nav__list-label { border-bottom: 0.1rem solid var(--tertiary); } :where(.l-header-nav__list-col:focus) .l-header-nav__list-label::after { transform: rotate(180deg); } } .l-header-nav__list-child-container { transition: all var(--transition); opacity: 0; display: grid; grid-template-rows: 0fr; } @media screen and (min-width: 768px) { .l-header-nav__list-child-container { z-index: 10; position: absolute; top: calc(100% + 1rem); left: 0; width: fit-content; } } @media screen and (min-width: 768px) and (any-hover: hover) { :where(.l-header-nav__list-col:hover) .l-header-nav__list-child-container { grid-template-rows: 1fr; opacity: 1; } } @media screen and (min-width: 768px) { :where(.l-header-nav__list-col:focus-visible) .l-header-nav__list-child-container, .l-header-nav__list-child-container:has(:focus-visible) { grid-template-rows: 1fr; opacity: 1; } :where(.l-header-nav__list-col:focus) .l-header-nav__list-child-container, .l-header-nav__list-child-container:has(:focus) { grid-template-rows: 1fr; opacity: 1; } } @media screen and (max-width: 767px) { .l-header-nav__list-child-container { margin-left: 2.5em; } :where(.l-header-nav__list-col--site-use) .l-header-nav__list-child-container { grid-template-rows: 1fr; opacity: 1; } } .l-header-nav__list-child-container > ul { overflow-y: hidden; } @media screen and (min-width: 768px) { .l-header-nav__list-child-container > ul { width: fit-content; padding: 0 1.5em 1.5em; background-color: var(--white); } } @media screen and (max-width: 767px) { .l-header-nav__list-child-container > ul > li { margin-left: 0.5em; border-left: 0.1rem solid var(--tertiary); } } .l-header-nav__list-child-container a { display: block; margin-left: 0.5em; font-size: var(--s_tx); text-indent: -0.5em; } @media screen and (max-width: 767px) { .l-header-nav__list-child-container a { padding: 0.5em 2em; font-size: var(--common_tx); color: var(--tertiary); } } @media screen and (min-width: 768px) { .l-header-nav__list-child-container a { width: fit-content; margin-left: 0; margin-top: 1.3em; line-height: 1.5; text-wrap-mode: nowrap; } } @media screen and (max-width: 767px) { .l-header-nav__list-child-container ul ul { margin-left: 2rem; } } @media screen and (max-width: 767px) { .l-header-nav__list-item:checked + .l-header-nav__list-label::after { content: "－"; } .l-header-nav__list-item:checked ~ .l-header-nav__list-child-container { grid-template-rows: 1fr; opacity: 1; } } .l-footer { background-color: var(--primary); } .l-footer__inner { padding: 10rem 2rem 5rem; color: var(--white); } @media screen and (max-width: 767px) { .l-footer__inner { padding: 5rem 2rem; } } .l-footer-nav { margin-bottom: 6rem; } .l-footer-nav__list { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; line-height: 1.8; } @media screen and (max-width: 767px) { .l-footer-nav__list { flex-wrap: wrap; row-gap: 3rem; } } .l-footer-nav__list-col { width: 50%; } @media screen and (min-width: 768px) { .l-footer-nav__list-col { width: fit-content; } } .l-footer-nav__list-item { margin-bottom: 3rem; font-size: clamp(1.4rem, 1.1vw, 1.6rem); font-weight: 500; } @media screen and (max-width: 767px) { .l-footer-nav__list-item { margin-bottom: 1.5rem; font-weight: 700; } } .l-footer-nav__list-child ul { margin-left: 1rem; } .l-footer-nav__list-child a { display: block; margin-left: 0.5em; margin-bottom: 0.5em; font-size: var(--s_tx); font-weight: 500; text-indent: -0.5em; } @media screen and (max-width: 767px) { .l-footer-nav__list-child a { font-weight: 700; } } .l-footer-nav__list-child a:focus-visible { outline-color: var(--white); } .l-footer-info { padding-top: 2rem; border-top: 0.1rem solid var(--white); font-size: var(--s_tx); font-weight: 500; } @media screen and (min-width: 768px) { .l-footer-info { display: flex; align-items: center; justify-content: space-between; flex-wrap: nowrap; width: 100%; font-size: var(--m_tx); } } .l-footer-info__logo { font-size: 3rem; line-height: 1; margin-bottom: 0.1em; } .l-footer-info__name, .l-footer-info__address { margin-bottom: 1em; } @media screen and (max-width: 767px) { .l-footer-info__service { margin-bottom: 1em; } } .l-footer-copyright { padding: 1rem 2rem; text-align: center; font-size: var(--s_tx); background-color: var(--white); } .l-main { background-color: var(--white); } @media screen and (max-width: 767px) { .l-main { overflow-x: hidden; } } .p-top-slider { --swiper-pagination-bullet-inactive-color: #fff; --swiper-pagination-bottom: 3rem; position: relative; } @media screen and (max-width: 767px) { .p-top-slider { --swiper-pagination-bottom: 1rem; } } .p-top-slider__container { line-height: 1; } .p-top-slider__link { display: block; width: 100%; height: 100%; } .p-top-slider__link:focus-visible { outline-offset: -0.5rem; } .p-top-slider__pic { display: block; width: 100%; height: 100%; } .p-top-slider__img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .p-top-slider .swiper { width: 100%; overflow: hidden; aspect-ratio: 1920/808; } .p-top-slider .swiper-slide { width: 100%; height: 100%; } .p-top-slider .swiper-button-next { right: min(5vw, 5rem); } @media screen and (max-width: 767px) { .p-top-slider .swiper-button-next { right: 1rem; } } .p-top-slider .swiper-button-prev { left: min(5vw, 5rem); } @media screen and (max-width: 767px) { .p-top-slider .swiper-button-prev { left: 1rem; } } .p-top-banner { z-index: 2; display: block; padding-block: 1rem; margin-top: -1rem; position: relative; } @media screen and (min-width: 768px) { .p-top-banner { margin-top: -2.5rem; } } .p-top-banner__figure { transition: transform var(--transition); display: block; padding: 0; line-height: 0; transform: translateZ(0); filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.2)); } @media screen and (min-width: 768px) { .p-top-banner__figure { width: fit-content; } } @media (any-hover: hover) { .p-top-banner__figure:hover { transform: translateY(-0.5rem); opacity: 1; } } .p-top-banner__img:focus-visible { outline: 0.2rem solid var(--primary); outline-offset: 0.3rem; } .p-top-container { padding-block: 10rem; border-bottom: 0.1rem solid var(--gray); } @media screen and (max-width: 767px) { .p-top-container { padding-block: 5rem; } } @media screen and (max-width: 767px) { .p-ttl { margin-bottom: 2rem; } } .p-top-seminar__swiper-container { position: relative; margin-bottom: 6rem; } @media screen and (max-width: 767px) { .p-top-seminar__swiper-container { margin-bottom: 5rem; width: 100vw; margin-inline: calc(50% - 50vw); } } .p-top-seminar__swiper:not(.swiper-initialized) .swiper-wrapper { display: flex; gap: 2rem; align-items: stretch; } .p-top-seminar__swiper .swiper-slide { width: calc((100% - 2rem) / 2); height: auto; } @media screen and (min-width: 768px) { .p-top-seminar__swiper .swiper-slide { width: calc((100% - 6rem) / 4); } } .p-top-seminar .swiper { padding: 1rem; } .p-top-seminar .swiper-slide { overflow: hidden; display: flex; flex-direction: column; height: auto; border-radius: 1rem; background-color: var(--white); filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.2)); transform: translateZ(0); } .p-top-seminar .swiper-button-next { right: -2rem; } @media screen and (max-width: 767px) { .p-top-seminar .swiper-button-next { display: none; } } .p-top-seminar .swiper-button-prev { left: -2rem; } @media screen and (max-width: 767px) { .p-top-seminar .swiper-button-prev { display: none; } } .p-top-seminar__link:focus-visible { outline-offset: -0.5rem; } .p-top-seminar__figure { width: 100%; aspect-ratio: 60/29; object-fit: cover; background-color: var(--gray); } .p-top-seminar__img { width: 100%; height: 100%; object-fit: cover; } .p-top-seminar__info { padding: 1rem; display: flex; flex-direction: column; justify-content: space-between; flex: 1; min-height: 8rem; } @media screen and (max-width: 767px) { .p-top-seminar__info { min-height: 7rem; } } .p-top-seminar__item-title { margin-bottom: 0.5rem; font-weight: 700; text-align: left; line-height: 1.4; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; flex: 1; } @media screen and (max-width: 767px) { .p-top-seminar__item-title { font-size: var(--m_tx); } } .p-top-seminar__date { font-size: var(--s_tx); text-align: right; } .p-top-products__list { gap: 3rem; margin-bottom: 2rem; } .p-top-products__item { transform: translateZ(0); transition: transform 0.3s; padding: 3rem 2rem 7.5rem; border-radius: 1.2rem; text-align: center; font-size: var(--l_tx); filter: drop-shadow(var(--drop-shadow)); } @media screen and (max-width: 767px) { .p-top-products__item { padding-bottom: 4rem; font-size: var(--common_tx); } } @media (any-hover: hover) { .p-top-products__item:hover { transform: translateY(-5px); } } .p-top-products__label { margin-bottom: 6rem; font-weight: 500; } @media screen and (max-width: 767px) { .p-top-products__label { margin-bottom: 3rem; } } .p-top-products__icon { height: 10rem; } .p-top-products .blue { background-color: #e9f4fc; } .p-top-products .beige { background-color: #fef0e6; } .p-top-products .gray { background-color: #f1f3f6; } .p-top-products .yellow { background-color: #fff9e5; } .p-top-sub-ttl { --bubble-color: #fc9d9d; --bg-color: #fff; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; width: fit-content; margin-inline: auto; margin-bottom: 2rem; padding-inline: 1em; position: relative; font-size: var(--sub_ttl); font-weight: 700; } .p-top-sub-ttl::before { position: absolute; bottom: -1rem; left: 0; width: 100%; height: 50%; border: 0.2rem solid var(--bubble-color); border-top: none; border-bottom-right-radius: 100vmax; border-bottom-left-radius: 100vmax; content: ""; } @media screen and (max-width: 767px) { .p-top-sub-ttl::before { bottom: -0.8rem; } } .p-top-sub-ttl::after { rotate: 45deg; position: absolute; bottom: -2.1rem; left: calc(50% - 0.25em); width: 0.5em; height: 1.8rem; border-right: 0.2rem solid var(--bubble-color); background-color: var(--bg-color); content: ""; } @media screen and (max-width: 767px) { .p-top-sub-ttl::after { height: 1.5rem; bottom: -1.6rem; } } .p-top-video__inner { padding-top: 10rem; } @media screen and (max-width: 767px) { .p-top-video__inner { padding-top: 5rem; } } @media screen and (min-width: 768px) { .p-top-video__title { margin-bottom: 4.5rem; } } .p-top-video__swiper-container { overflow-x: hidden; position: relative; padding-bottom: 4.5rem; } @media screen and (max-width: 767px) { .p-top-video__swiper-container { padding-bottom: 3rem; padding-inline: 1rem; } } @media screen and (min-width: 768px) { .p-top-video .swiper { gap: 2rem; padding-block: 0.5rem; } } @media screen and (min-width: 768px) { .p-top-video .swiper-slide { width: 34rem; } } .p-top-video .swiper-button-next { right: 4rem; } @media screen and (max-width: 767px) { .p-top-video .swiper-button-next { display: none; } } .p-top-video__item { transition: opacity var(--transition); } .p-top-video__link { display: block; } .p-top-video__img { width: 100%; object-fit: cover; aspect-ratio: 16/9; } .p-top-video__content { padding-bottom: 10rem; border-bottom: 0.1rem solid var(--gray); } @media screen and (max-width: 767px) { .p-top-video__content { padding-bottom: 5rem; } } .p-top-video__description { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; } @media screen and (max-width: 767px) { .p-top-video__description { font-size: var(--m_tx); } } .p-top-about__inner { padding-block: 10rem; } @media screen and (max-width: 767px) { .p-top-about__inner { padding-block: 5rem; } } .p-top-about__lead { font-size: var(--xxl_tx); text-align: center; line-height: 1.8; } .p-top-about__lead-line { text-decoration-color: #fffac2; text-decoration-line: underline; text-decoration-thickness: 0.5rem; text-underline-offset: -0.3rem; text-decoration-skip-ink: none; } .p-top-about__users { padding: 0 2rem 5rem; position: relative; } @media screen and (max-width: 767px) { .p-top-about__users { padding-bottom: 1rem; } } .p-top-about__users::before { display: block; clip-path: ellipse(100% 100% at 50% 0%); background-color: #fffac2; position: absolute; top: 5rem; left: 0; width: 100%; height: 100%; content: ""; } @media screen and (max-width: 767px) { .p-top-about__users::before { clip-path: ellipse(200% 100% at 50% 0%); } } .p-top-about__users-inner { gap: 3rem; } .p-top-about__user { position: relative; display: flex; flex-direction: column; text-align: center; } @media screen and (max-width: 767px) { .p-top-about__user:not(:last-child) { padding-bottom: 3rem; border-bottom: 0.1rem solid var(--primary); } } .p-top-about__user-bubble { transform: translateZ(0); z-index: 2; background: var(--white); padding: 3rem; border-radius: 3rem; position: relative; font-size: var(--sub_ttl); font-weight: 500; color: var(--primary); filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.2)); } @media screen and (max-width: 767px) { .p-top-about__user-bubble { width: 80%; margin-inline: auto; } } .p-top-about__user-bubble::after { transform: translateX(-50%); z-index: -1; display: block; width: 1.5rem; height: 2rem; clip-path: polygon(0% 0%, 75% 100%, 100% 0%); position: absolute; bottom: -1.9rem; left: 48%; background-color: var(--white); content: ""; } @media screen and (max-width: 767px) { .p-top-about__user-bubble::after { left: 20%; } } .p-top-about__user-content { display: flex; align-items: flex-end; flex-wrap: nowrap; justify-content: center; gap: 3rem; width: 80%; margin-inline: auto; } @media screen and (min-width: 768px) { .p-top-about__user-content { width: 50%; align-items: center; flex-direction: column; } } .p-top-about__user-icon { width: 100%; margin-inline: auto; padding-top: 2rem; } .p-top-about__btn { display: grid; place-items: center; width: 100%; aspect-ratio: 1/1; margin-inline: auto; border-radius: 50%; position: relative; background-color: var(--secondary); color: var(--white); font-weight: 700; font-size: var(--l_tx); line-height: 1.4; } @media screen and (min-width: 768px) { .p-top-about__btn { font-weight: 500; font-size: var(--sub_ttl); line-height: 1.2; } } .p-top-about__btn::after { position: absolute; bottom: 1em; right: auto; width: 1em; aspect-ratio: 1/1; border-radius: 50%; background: center/contain no-repeat var(--white) url("../images/icon-arrow-green.svg"); content: ""; } .p-top-features { margin-top: -5rem; padding: 20rem 0 10rem; background-color: var(--primary); } .p-top-features__hgroup { color: var(--white); text-align: center; margin-bottom: 6rem; } @media screen and (max-width: 767px) { .p-top-features__hgroup { margin-bottom: 2rem; } } .p-top-features__subtitle { --bubble-color: #fff; --bg-color: #009995; } .p-top-features__list { gap: 3rem; max-width: 120rem; margin-inline: auto; } @media screen and (min-width: 768px) { .p-top-features__list { padding-inline: 2rem; } } @media screen and (max-width: 767px) { .p-top-features__list { gap: 1rem; } } .p-top-features__item { transform: translateZ(0); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.5rem 5rem; padding: 4rem 3rem; border-radius: 1rem; position: relative; background-color: var(--white); filter: drop-shadow(var(--drop-shadow)); } @media screen and (max-width: 767px) { .p-top-features__item { display: grid; grid-row: span 3; grid-template-rows: subgrid; padding: 2rem 1.5rem; } } .p-top-features__text-container { flex: 1; align-self: flex-start; } @media screen and (max-width: 767px) { .p-top-features__text-container { margin-bottom: 1.5rem; } } .p-top-features__item-title { margin-bottom: 1.5rem; font-size: var(--sub_ttl); font-weight: 500; } @media screen and (max-width: 767px) { .p-top-features__item-title { margin-bottom: 1rem; font-size: var(--l_tx); text-align: center; } } .p-top-features__icon-container { flex: 1; } .p-top-features__icon { width: 100%; height: 7em; object-fit: contain; } @media screen and (max-width: 767px) { .p-top-features__icon { height: 7rem; } } .p-top-features__link-paragraph { width: 100%; } @media screen and (max-width: 767px) { .p-top-features__link-paragraph { width: fit-content; margin-inline: auto; text-align: center; } } .p-top-features__link { color: var(--primary); text-decoration: underline; text-underline-offset: 0.5rem; font-weight: 500; position: relative; padding-right: 1.5rem; } @media screen and (max-width: 767px) { .p-top-features__link { font-size: var(--m_tx); margin-right: -1.3em; } } .p-top-features__link::after { display: inline-block; width: 0.6em; height: 0.6em; margin-left: 0.3em; background: center/contain no-repeat url("../images/icon-arrow.svg"); content: ""; } .p-top-market__current { width: 15rem; aspect-ratio: 1/1; text-align: center; } @media screen and (max-width: 767px) { .p-top-market__current { width: 16rem; } } .p-top-market__list { width: 100%; grid-template-columns: repeat(2, 1fr); } @media screen and (min-width: 768px) { .p-top-market__list { padding-inline: 1em; } } @media screen and (max-width: 767px) { .p-top-market__list { padding-right: 1em; } } .p-top-market__item { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; position: relative; } @media screen and (max-width: 767px) { .p-top-market__item { flex-direction: column; gap: 1rem; } } .p-top-market__item::before { display: block; width: 3em; aspect-ratio: 1/1; background: center/contain no-repeat var(--white); content: ""; } .p-top-market__item:nth-child(1)::before { background-image: url("../images/top-market-01.svg"); } .p-top-market__item:nth-child(2)::before { background-image: url("../images/top-market-02.svg"); } .p-top-market__text { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; width: fit-content; margin-left: 1em; } @media screen and (max-width: 767px) { .p-top-market__text { font-size: var(--s_tx); } } .p-top-market__text::after { transition: all var(--transition); display: block; width: 1em; margin-top: 0.1em; margin-left: 1em; aspect-ratio: 1/1; border-radius: 50%; background-color: var(--secondary); background: center/contain var(--secondary) no-repeat url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M13.72 10l-6.08 5.46 1-5.46-1-5.46L13.72 10z'/%3E%3C/svg%3E"); content: ""; } @media screen and (min-width: 768px) { .p-top-market__text::after { margin-left: 5em; } } @media (any-hover: hover) { :where(.p-top-market__item:hover) .p-top-market__text::after { border: 0.1rem solid var(--secondary); background-color: var(--white); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%2322b49d' d='M13.72 10l-6.08 5.46 1-5.46-1-5.46L13.72 10z'/%3E%3C/svg%3E"); } } .p-top-news__inner { border-bottom: 0; } .p-top-steps { --bg-color: #f7f7f7; background-color: var(--bg-gray); } .p-top-steps__inner { border-bottom: 0; } .p-top-steps__list { gap: 2rem; } .p-top-steps__item { transform: translateZ(0); display: grid; gap: 1rem; padding: 5rem 3rem; border-radius: 1rem; position: relative; background-color: var(--white); filter: drop-shadow(var(--drop-shadow)); } @media screen and (max-width: 767px) { .p-top-steps__item { grid-template-columns: repeat(2, 1fr); align-items: center; } } @media screen and (min-width: 768px) { .p-top-steps__item { gap: 2.5em; grid-template-rows: subgrid; grid-row: span 3; grid-template-areas: "title" "icon" "text"; text-align: center; } } .p-top-steps__item:not(:first-child)::before { z-index: 9; display: block; width: 4rem; height: 4rem; position: absolute; background-color: var(--secondary); content: ""; } @media screen and (min-width: 768px) { .p-top-steps__item:not(:first-child)::before { top: 40%; left: -2.5rem; clip-path: polygon(0% 0%, 0% 100%, 100% 50%); } } @media screen and (max-width: 767px) { .p-top-steps__item:not(:first-child)::before { transform: translateX(-50%); top: -3rem; left: 50%; clip-path: polygon(0% 0%, 50% 100%, 100% 0%); } } @media screen and (min-width: 768px) { .p-top-steps__text-container { display: contents; } } .p-top-steps__item-title { font-size: var(--l_tx); font-weight: 700; } @media screen and (min-width: 768px) { .p-top-steps__item-title { grid-area: title; } } @media screen and (max-width: 767px) { .p-top-steps__item-title { text-align: center; margin-bottom: 1em; } } .p-top-steps__item-text { line-height: 1.8; } @media screen and (min-width: 768px) { .p-top-steps__item-text { grid-area: text; } } @media screen and (min-width: 768px) { .p-top-steps__icon-container { grid-area: icon; } } @media screen and (max-width: 767px) { .p-top-steps__icon-container { text-align: center; padding-left: 6vw; } } .p-top-steps__icon { object-fit: contain; width: 11rem; height: 10rem; } .p-top-steps__contact-title { margin-top: 10rem; } .p-top-steps__contact-btns { display: grid; gap: 2rem; width: min(60rem, 100%); margin-top: 5rem; margin-inline: auto; } .top-sns { display: flex; gap: 5rem; margin-top: 5rem; justify-content: center; } .top-sns__link { width: 6rem; aspect-ratio: 1/1; background: center/contain no-repeat; } .top-sns__link--youtube { background-image: url("../images/icon-youtube.svg"); } .top-sns__link--x { background-image: url("../images/icon-twitter.svg"); } .p-seminar-archive__inner { transform: translateZ(0); filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.2)); } .p-seminar-archive__header-tabs { overflow: hidden; display: flex; gap: 0.1rem; width: 100%; border-top-left-radius: 1rem; border-top-right-radius: 1rem; } .p-seminar-archive__header-tab { transition: all var(--transition); display: block; width: 50%; padding: 1.5em; text-align: center; color: #808080; font-weight: bold; background-color: #d0d0d0; cursor: pointer; } .p-seminar-archive__header-tab--active { color: var(--white); background-color: var(--primary); pointer-events: none; } @media (any-hover: hover) { .p-seminar-archive__header-tab:not(.p-seminar-archive__header-tab.p-seminar-archive__header-tab--active):hover { color: var(--white); background-color: var(--primary); } } @media screen and (min-width: 768px) { .p-seminar-archive__header-tab { font-size: var(--sub_ttl); } } .p-seminar-archive__header-tab:focus-visible { opacity: 1; background-color: var(--primary); color: var(--white); outline: 0.2rem solid var(--primary); outline-offset: 0.3rem; } .p-seminar-archive__intro { padding: 3rem 8rem 5rem; border: 0.1rem solid var(--primary); background-color: var(--white); } @media screen and (max-width: 767px) { .p-seminar-archive__intro { padding: 3rem 1.5rem 5rem; } } .p-seminar-archive__tab-list { grid-template-columns: repeat(4, 1fr); font-weight: 700; } @media screen and (max-width: 767px) { .p-seminar-archive__contents-list { padding: 0 1rem; } } @media screen and (min-width: 768px) { .p-seminar-archive__contents { display: grid; grid-template-columns: 40% minmax(0, 1fr); gap: 4rem; } } .p-seminar-archive__contents:not(:first-child) { padding-top: 5rem; } @media screen and (min-width: 768px) { .p-seminar-archive__contents:not(:first-child) { padding-top: 8rem; } } .p-seminar-archive__contents:first-child { padding-top: 2rem; } @media screen and (min-width: 768px) { .p-seminar-archive__contents:first-child { padding-top: 5rem; } } .p-seminar-archive__contents:not(:last-child) { border-bottom: 1px solid var(--gray); padding-bottom: 5rem; } @media screen and (min-width: 768px) { .p-seminar-archive__contents:not(:last-child) { padding-bottom: 8rem; } } @media screen and (max-width: 767px) { .p-seminar-archive__figure-wrapper { margin-bottom: 1rem; } } .p-seminar-archive__figure { transform: translateZ(0); overflow: hidden; width: 100%; aspect-ratio: 34/19; border-radius: 1rem; position: relative; filter: drop-shadow(var(--drop-shadow)); background-color: var(--gray); } @media screen and (min-width: 768px) { .p-seminar-archive__figure { flex-shrink: 0; } } .p-seminar-archive__img { width: 100%; aspect-ratio: 34/19; object-fit: cover; } .p-seminar-archive__badges { display: flex; flex-wrap: wrap; width: 100%; column-gap: 0.5rem; } .p-seminar-archive__badge { width: 7em; margin-top: 1rem; padding: 0.2em 0.5em; border-radius: 0.5rem; font-size: var(--m_tx); font-weight: 500; text-align: center; color: #fff; } .p-seminar-archive__badge.online { background-color: #f6921e; } .p-seminar-archive__badge.venue { background-color: #0072bc; } .p-seminar-archive__badge.event { background-color: #cc1e49; } .p-seminar-archive__date-time { margin-bottom: 0.5rem; } .p-seminar-archive__title { font-size: var(--sub_ttl); font-weight: 700; color: var(--primary); margin-bottom: 2rem; } .p-seminar-archive__info { font-weight: 500; display: flex; align-items: stretch; margin-bottom: 0.6rem; border-bottom: 0.1rem solid var(--primary); border-radius: 1rem 0 0 1rem; } @media screen and (max-width: 767px) { .p-seminar-archive__info { font-size: var(--m_tx); } } .p-seminar-archive__label { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; padding: 0.5em 1.5em; border-radius: 1rem 0 0 1rem; color: #fff; background-color: var(--primary); } .p-seminar-archive__value { flex: 1; padding: 0.5em 1.5em; word-break: break-word; } .p-seminar-archive__value--teacher { display: flex; flex-wrap: wrap; gap: 0.5rem 1em; } @media screen and (min-width: 768px) { .p-seminar-archive__value--teacher { gap: 1.5rem 2em; } } .p-seminar-archive__teacher-item { display: flex; align-items: center; justify-content: flex-start; width: fit-content; line-height: 1; } .p-seminar-archive__teacher-item:not(:last-child) { border-right: 0.1rem solid var(--black); padding-right: 1em; } @media screen and (min-width: 768px) { .p-seminar-archive__teacher-item:not(:last-child) { padding-right: 2em; } } .p-seminar-archive__buttons { display: grid; margin-top: 2rem; gap: 1rem; } @media screen and (min-width: 768px) { .p-seminar-archive__buttons { grid-template-columns: repeat(2, 1fr); } } .p-seminar-archive__button { --btn: #fff; background-color: var(--btn-bg); color: var(--btn); } @media screen and (max-width: 767px) { .p-seminar-archive__button { width: 100%; } } @media (any-hover: hover) { .p-seminar-archive__button:hover { border: 0.1rem solid var(--btn-bg); } } .p-seminar-archive__button--detail { --btn-bg: #f7931e; } .p-seminar-archive__button--detail::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23f7931e' d='M13.72 10l-6.08 5.46 1-5.46-1-5.46L13.72 10z'/%3E%3C/svg%3E"); } @media (any-hover: hover) { .p-seminar-archive__button--detail:hover::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M13.72 10l-6.08 5.46 1-5.46-1-5.46L13.72 10z'/%3E%3C/svg%3E"); } } .p-seminar-archive__button--apply { --btn-bg: #f36b7f; } .p-seminar-archive__button--apply::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23f36b7f' d='M13.72 10l-6.08 5.46 1-5.46-1-5.46L13.72 10z'/%3E%3C/svg%3E"); } @media (any-hover: hover) { .p-seminar-archive__button--apply:hover::after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath fill='%23fff' d='M13.72 10l-6.08 5.46 1-5.46-1-5.46L13.72 10z'/%3E%3C/svg%3E"); } } .p-seminar-archive__button--disabled, .p-seminar-archive__button--end { --btn-bg: #ccc; border: 0; pointer-events: none; color: #808080; cursor: not-allowed; } .p-seminar-archive__button--disabled::after, .p-seminar-archive__button--disabled::before, .p-seminar-archive__button--end::after, .p-seminar-archive__button--end::before { display: none; } .p-seminar-archive-loading-overlay { width: 100vw; height: 100lvh; position: fixed; top: 0; left: 0; z-index: 9999; pointer-events: none; } .p-seminar-archive-loading-overlay.c-loading::before { position: fixed; } .p-seminar-archive-loading-overlay.c-loading::after { position: fixed; } .p-news-single__header { width: 100%; } @media screen and (min-width: 768px) { .p-news-single__header { width: fit-content; max-width: 94rem; margin-inline: auto; } } .p-news-single__title { margin-bottom: 2rem; } .p-news-single__date { margin-bottom: 5rem; text-align: right; } @media screen and (min-width: 768px) { .p-news-single__date { margin-bottom: 8rem; } } .p-youtube-mv__picture { display: block; } .p-youtube-mv__img { width: 100%; } .p-youtube__list { gap: 3rem; } @media screen and (max-width: 767px) { .p-youtube__list { gap: 1.5rem; } } .p-youtube__item { display: grid; grid-template-rows: subgrid; grid-row: span 4; gap: 1.5rem; } .p-youtube__figure { overflow: hidden; position: relative; cursor: pointer; } @media (any-hover: hover) { .p-youtube__figure:hover .p-youtube__img { transform: scale(1.02); } .p-youtube__figure:hover::after { transform: translate(-50%, -50%) scale(1.1); } } .p-youtube__figure::after { z-index: 2; transform: translate(-50%, -50%); transition: var(--transition); width: 7rem; position: absolute; top: 50%; left: 50%; aspect-ratio: 1/1; background: center/contain no-repeat url(../images/icon-youtube-play.svg); filter: drop-shadow(0 0 0.5rem rgba(0, 0, 0, 0.2)); content: ""; } .p-youtube__img { transition: var(--transition); width: 100%; object-fit: cover; aspect-ratio: 16/9; } .p-youtube__iframe-wrapper { position: relative; width: 100%; aspect-ratio: 16/9; } .p-youtube__iframe-wrapper iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; } .p-youtube__description { overflow: hidden; display: -webkit-box; -webkit-line-clamp: 4; line-clamp: 4; -webkit-box-orient: vertical; } .p-youtube__btn { margin-top: 3rem; } @media screen and (max-width: 767px) { .p-youtube__btn { margin-top: 1rem; padding-right: 2.5em; } .p-youtube__btn:after { right: 1.5em; } } .p-youtube__link { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: 0.5em; width: min(100%, 60rem); margin-top: 10rem; margin-inline: auto; padding: 0.5em 1em; border-radius: 100vmax; color: var(--white); font-size: var(--sub_ttl); font-weight: 700; background-color: #f00; } @media screen and (max-width: 767px) { .p-youtube__link { margin-top: 5rem; font-size: var(--common_tx); } } .p-youtube__link::before { display: block; width: 4rem; aspect-ratio: 1/1; border-radius: 50%; background: center/80% no-repeat var(--white) url(../images/icon-youtube-play.svg); background-color: var(--white); content: ""; } .p-lecturer__list { gap: 3rem; } .p-lecturer__item { transform: translateZ(0); display: grid; grid-template-rows: subgrid; grid-row: span 3; gap: 1.5rem; border: 0.2rem solid var(--primary); background-color: var(--white); filter: drop-shadow(var(--drop-shadow)); } .p-lecturer__top { display: flex; justify-content: space-between; } .p-lecturer__info { flex: 1; margin-top: 3rem; } .p-lecturer__name { font-size: var(--sub_ttl); font-weight: 500; color: var(--white); padding: 0.3em 1em; background: var(--primary); text-align: center; } .p-lecturer__position { font-size: var(--l_tx); font-weight: 500; color: var(--primary); margin: 2rem 1.5rem 0 2rem; } .p-lecturer__figure { width: 16rem; aspect-ratio: 16/21; background-color: var(--gray); } .p-lecturer__img { width: 100%; height: 100%; object-fit: cover; } .p-lecturer__profile { line-height: 1.8; margin: 2.5rem 2rem; } .p-lecturer__socials { text-align: center; padding: 1.5rem; margin-inline: 2rem; border-top: 0.1rem solid var(--primary); } .p-lecturer__socials-link { display: inline-block; margin: 0 1.8rem; } .p-lecturer__socials-img { width: 100%; height: 100%; object-fit: cover; } /* 用語集タブスタイル */ .p-glossary-tab { margin-bottom: 60px; } .p-glossary-tab__nav { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2rem min(7rem, 7vw); margin-bottom: 100px; margin-inline: auto; width: 100%; } @media screen and (max-width: 767px) { .p-glossary-tab__nav { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-bottom: 6rem; } } .p-glossary-tab__label { display: flex; align-items: center; justify-content: center; min-height: 6rem; padding: 2.5em 1.5em; border-radius: 1rem; color: var(--white); font-size: var(--m_tx); font-weight: 700; text-align: center; background-color: var(--gray); cursor: pointer; } .p-glossary-tab__label span { display: inline-block; } .p-glossary-tab__label span::first-letter { font-size: var(--xl_tx); } @media screen and (max-width: 767px) { .p-glossary-tab__label { font-size: var(--m_tx); padding: 1em; } } .p-glossary-tab__content { display: none; margin-bottom: 10rem; } @media screen and (max-width: 767px) { .p-glossary-tab__content { margin-bottom: 6rem; } } /* アンカーリンクナビゲーション */ .p-glossary-anchor-nav { width: fit-content; margin: 0 auto 10rem; } @media screen and (max-width: 767px) { .p-glossary-anchor-nav { width: 100%; margin-bottom: 6rem; } } .p-glossary-anchor-nav__current { width: clamp(8rem, 16vw, 10rem); height: clamp(8rem, 16vw, 10rem); flex-shrink: 0; } .p-glossary-anchor-nav__current-text { font-size: var(--m_tx); } .p-glossary-anchor-nav__current-text::first-letter { font-size: clamp(2.8rem, 6vw, 4.3rem); } .p-glossary-anchor-nav__links { display: flex; flex-wrap: nowrap; } @media screen and (max-width: 767px) { .p-glossary-anchor-nav__links { width: 100%; } } .p-glossary-anchor-nav__link { color: var(--primary); font-size: clamp(1.8rem, 2.5vw, 2.5rem); width: 100%; } @media screen and (min-width: 768px) { .p-glossary-anchor-nav__link { padding: 0 min(6vw, 6rem); } } /* 用語セクション */ .p-glossary-section { margin-bottom: 40px; } .p-glossary-section__title { margin-bottom: 3rem; padding-left: 2rem; border-left: 0.4rem solid var(--primary); border-bottom: 0.1rem solid var(--primary); position: relative; font-size: clamp(2rem, 2.5vw, 2.4rem); font-weight: 700; text-align: left; color: var(--primary); } .p-glossary-section__term-group:not(:last-child) { margin-bottom: 10rem; } @media screen and (max-width: 767px) { .p-glossary-section__term-group:not(:last-child) { margin-bottom: 6rem; } } .p-glossary-section__items { display: grid; font-size: 1.6rem; grid-template-columns: clamp(7em, 25%, 12em) 1fr; } @media screen and (min-width: 768px) { .p-glossary-section__items { margin-left: 2em; } } .p-glossary-section__item-term { display: flex; align-items: center; justify-content: flex-end; padding: 2em 0 2em 2rem; color: var(--primary); border-bottom: 1px solid var(--primary); } @media screen and (max-width: 767px) { .p-glossary-section__item-term { padding-left: 0; font-size: var(--m_tx); } } .p-glossary-section__item-definition { display: flex; align-items: center; padding: 2em 2em 2em clamp(2rem, 5vw, 8rem); color: var(--black); border-bottom: 1px solid var(--primary); } @media screen and (max-width: 767px) { .p-glossary-section__item-definition { font-size: var(--m_tx); } } .p-common-page__content-container ol { counter-reset: item; list-style-type: none; } .p-common-page__content-container ol > li { display: block; position: relative; padding-left: 2.3rem; counter-increment: item; } @media screen and (max-width: 767px) { .p-common-page__content-container ol > li { margin-left: 0; } } .p-common-page__content-container ol > li::before { display: inline-flex; align-items: center; justify-content: center; width: 1.8rem; height: 1.8rem; margin-right: 0.5rem; padding-bottom: 0.1em; padding-right: 0; border-radius: 50%; position: absolute; top: 1.6rem; transform: translateY(-50%); left: 0; font-size: 65%; color: var(--white); background-color: var(--primary); content: counter(item); } .p-economic__wrap { --loading-top: 10rem; height: 100rem; margin-bottom: 10rem; position: relative; } .p-cfd__content-title { margin-top: 10rem; } @media screen and (max-width: 767px) { .p-cfd__table-container { display: flex; flex-direction: column; width: 100%; gap: 3rem; } } @media screen and (min-width: 768px) { .p-cfd__table-container { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; } } .p-cfd__img-text { margin-bottom: 5rem; } @media screen and (min-width: 768px) { .p-cfd__img-text { display: grid; grid-template-columns: 60% 40%; gap: 4rem; } } @media screen and (max-width: 767px) { .p-cfd__figure { margin-block: 3rem; } } .p-smartcx__figure { margin-inline: auto; margin-bottom: 5rem; } @media screen and (min-width: 768px) { .p-smartcx__figure { width: 50%; } } .p-smartcx__table tbody th { width: 10em; font-size: var(--common_tx); font-weight: 700; background-color: var(--white); vertical-align: middle; } .p-smartcx__table tbody th span { font-size: 150%; } @media screen and (max-width: 767px) { .p-smartcx__table tbody th { width: 7em; } } .p-smartcx__table td { font-size: var(--m_tx); text-align: left; vertical-align: middle; } .p-services { --btn-width: 100%; } .p-services__block { margin-bottom: 8rem; } @media screen and (min-width: 768px) { .p-services__content { display: flex; align-items: stretch; gap: 4rem; } } @media screen and (min-width: 768px) { .p-services__figure { flex: 1; } } @media screen and (max-width: 767px) { .p-services__figure { margin-bottom: 2rem; } } .p-services__text { line-height: 1.8; } @media screen and (min-width: 768px) { .p-services__text { display: flex; flex-direction: column; flex: 1; padding: min(5rem, 3.125vw) 0 min(2rem, 1.25vw); } } .p-services__btn { margin-top: 5rem; } .p-information__content-title { margin-top: 5rem; } .p-information__greeting { display: flex; align-items: center; gap: 3rem; } @media screen and (max-width: 767px) { .p-information__greeting { flex-direction: column; gap: 2rem; margin-bottom: 4rem; } } .p-information__greeting-image { flex-shrink: 0; width: 30rem; } @media screen and (max-width: 767px) { .p-information__greeting-image { width: 100vw; margin-inline: calc(50% - 50vw); } } .p-information__greeting-text { flex: 1; } @media screen and (max-width: 767px) { .p-information__greeting-text { flex: none; } } .p-information__greeting-text { margin-bottom: 2rem; line-height: 1.8; } .p-information__greeting-text .c-page-common-text:last-child { margin-bottom: 0; } .p-information__office-item { margin-bottom: 4rem; } .p-information__office-item-ttl { background-color: #009995; color: #fff; font-size: 1.6rem; font-weight: 700; padding: 0.2em 2em; margin: 0 0 2rem 0; border-radius: 0; width: 100%; } .p-information__office-item-content { display: flex; gap: 3rem; align-items: flex-start; } @media screen and (max-width: 767px) { .p-information__office-item-content { flex-direction: column; gap: 2rem; } } @media screen and (max-width: 767px) { .p-information__office-item-table { width: 100%; } } @media screen and (min-width: 768px) { .p-information__office-item-table { flex: 1; } } @media screen and (max-width: 767px) { .p-information__office-item-map { width: 100%; } } @media screen and (min-width: 768px) { .p-information__office-item-map { flex: 1; } } .p-information__office-item-map iframe { width: 100%; height: 40rem; border: none; } @media screen and (max-width: 767px) { .p-information__office-item-map iframe { height: 25rem; } } .p-information__table { width: 100%; margin-inline: auto; font-size: 1.6rem; } @media screen and (min-width: 768px) { .p-information__table { width: 90%; } } .p-information__table tr { display: grid; align-items: center; grid-template-columns: 7em 1fr; padding: 1em 2em; border-bottom: 0.1rem solid #009995; gap: 4em; } @media screen and (max-width: 767px) { .p-information__table tr { padding: 1em 0.5em; gap: 2em; } } .p-information__table th { color: #009995; font-weight: 700; text-align: right; } .p-information__contact { margin-top: 10rem; padding-block: 1rem 6rem; background-color: var(--bg-gray); } .p-information__contact-container { width: min(60rem, 100%); margin-inline: auto; } .p-information__contact-note { margin-top: 2rem; font-size: var(--m_tx); font-weight: 500; color: var(--black); text-align: center; } @media screen and (max-width: 767px) { .p-documents__btns { grid-template-columns: 1fr; } } .p-documents__btn { display: grid; grid-template-columns: 3em 1fr 1.5em; align-items: center; justify-content: flex-start; gap: 1em; font-size: var(--common_tx); text-align: left; padding: 1.5em; } @media screen and (max-width: 767px) { .p-documents__btn { display: flex; justify-content: center; position: relative; padding-right: 4.5em; } } .p-documents__btn::before { display: block; width: 3em; height: 3em; background: center/contain no-repeat; content: ""; } .p-documents__btn::after { rotate: 90deg; display: block; width: 1.5em; height: 1.5em; background: center/contain no-repeat url(../images/icon-arrow-green.svg); content: ""; } @media screen and (max-width: 767px) { .p-documents__btn::after { position: absolute; top: auto; right: 2em; } } .p-documents__btn:nth-child(1)::before { background-image: url(../images/icon-material-01.svg); } .p-documents__btn:nth-child(2)::before { background-image: url(../images/icon-material-02.svg); } .p-documents__btn:nth-child(3)::before { background-image: url(../images/icon-material-03.svg); } .p-faq__block { margin-bottom: 6rem; } .p-faq__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2rem; } .p-faq__item { transition: all 0.2s ease; margin: 0; padding: 0; } .p-faq__item:has(.p-faq__details[open]) { margin-bottom: -2em; } @media screen and (max-width: 767px) { .p-faq__item:has(.p-faq__details[open]) { margin-bottom: -1em; } } .p-faq__details { position: relative; } .p-faq__details::details-content { display: grid; grid-template-rows: 1fr; opacity: 1; } @media (prefers-reduced-motion: no-preference) { .p-faq__details::details-content { transition: all var(--transition); transition-behavior: allow-discrete; } } .p-faq__details:not([open])::details-content { grid-template-rows: 0fr; opacity: 0; } .p-faq__summary { transition: background-color 0.3s ease; z-index: 9; display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; position: relative; width: 50%; padding: 0.5em 3em 0.5em 1.5em; border-radius: 1rem; background-color: var(--primary); color: var(--white); font-size: 1.1rem; font-weight: 700; line-height: 1.2; cursor: pointer; } @media screen and (max-width: 767px) { .p-faq__summary { width: 100%; padding: 1rem 1.5em; font-size: 1rem; } } .p-faq__summary::after { z-index: 2; transition: color 0.3s ease; display: grid; place-items: center; width: 1.3em; aspect-ratio: 1/1; padding-bottom: 0.1em; border-radius: 50%; position: absolute; right: 2em; top: auto; font-size: var(--common_tx); font-weight: bold; color: var(--primary); background-color: var(--white); content: "+"; } @media screen and (max-width: 767px) { .p-faq__summary::after { right: 1rem; font-size: var(--m_tx); } } @media (any-hover: hover) { .p-faq__summary:hover { background-color: var(--tertiary); } .p-faq__summary:hover::after { color: var(--tertiary); } } .p-faq__summary::-webkit-details-marker { display: none; } .p-faq__summary::-moz-list-bullet { list-style-type: none; } .p-faq__summary:focus-visible { opacity: 1; background-color: var(--tertiary); outline: 0.2rem solid var(--primary); outline-offset: 0.2rem; } .p-faq__summary:focus-visible::after { color: var(--tertiary); } .p-faq__details[open] .p-faq__summary::after { content: "−"; } .p-faq__question { display: flex; align-items: center; justify-content: flex-start; flex-wrap: nowrap; width: 100%; padding-right: 3rem; font-size: 1.8rem; color: var(--white); } @media screen and (max-width: 767px) { .p-faq__question { padding-right: 2.5rem; } } .p-faq__question::before { flex-shrink: 0; display: inline-block; width: 2em; height: 3em; margin-right: 0.5em; background: center/contain no-repeat url(../images/icon-q.svg); content: ""; } .p-faq__content { overflow: hidden; transform: translateY(-2em); position: relative; font-size: 1.6rem; } @media screen and (max-width: 767px) { .p-faq__content { transform: translateY(-1em); } } .p-faq__answer-container { padding: 3.5em 2em 1.5em; border: 0.2rem solid var(--primary); } @media screen and (max-width: 767px) { .p-faq__answer-container { padding: 2em 1.5em 1em; } } .p-faq__answer { line-height: 1.7; font-size: 1.6rem; } .p-faq__links-list { list-style: none; } .p-faq__links-list li { margin-left: 0; } .p-faq__links-list li::first-letter { font-size: 80%; margin-right: 0.5em; } .p-chart__btns { display: grid; } @media screen and (min-width: 768px) { .p-chart__btns { grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 1.5rem 6rem; } } @media screen and (max-width: 767px) { .p-chart__btns { grid-template-columns: repeat(auto-fit, minmax(7.5em, 1fr)); gap: 1rem; } } @media screen and (min-width: 768px) { .p-chart__list { position: relative; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6rem 10rem; } .p-chart__list::after { display: block; height: 100%; border-right: 0.1rem solid var(--primary); position: absolute; top: 0; left: 50%; content: ""; } } @media screen and (max-width: 767px) { .p-chart__item:not(:first-child) { padding-top: 5rem; } .p-chart__item:not(:last-child) { padding-bottom: 5rem; border-bottom: 0.1rem solid var(--primary); } } .p-chart__ttl { display: flex; align-items: center; gap: 0.2em; margin-bottom: 2rem; font-size: var(--sub_ttl); color: var(--primary); } .p-chart__ttl::before { display: inline-block; width: 0.4em; aspect-ratio: 1/1; margin-top: 0.1em; background-color: var(--primary); border-radius: 50%; content: ""; } .p-chart__iframe { all: unset; width: 100%; aspect-ratio: 6/5; } .u-wid-fit { width: fit-content; margin-inline: auto; } .u-tac { text-align: center; } @media screen and (min-width: 768px) { .u-pc-tac { text-align: center; } } @media screen and (max-width: 767px) { .u-sp-tac { text-align: center; } } .u-tal { text-align: left; } .u-tar { text-align: right; } .u-center { margin: 0 auto; } .u-right { margin: 0 0 0 auto; } .u-left { margin: 0 auto 0 0; } .u-fw-b { font-weight: bold; } .u-fz-s { font-size: var(--s_tx); } .u-fz-common { font-size: var(--common_tx); } .u-fz-m { font-size: var(--m_tx); } .u-fz-l { font-size: var(--l_tx); } .u-fz-xl { font-size: var(--xl_tx); } .u-fw300 { font-weight: 300; } .u-fw400 { font-weight: 400; } .u-fw600 { font-weight: 600; } .u-fw700 { font-weight: 700; } .u-fw900 { font-weight: 900; } .u-mt-00 { margin-top: 0; } .u-mt-10 { margin-top: 1rem; } .u-mt-20 { margin-top: 2rem; } .u-mt-30 { margin-top: 3rem; } .u-mt-40 { margin-top: 4rem; } .u-mt-50 { margin-top: 5rem; } .u-mt-60 { margin-top: 6rem; } .u-mt-70 { margin-top: 7rem; } .u-mt-80 { margin-top: 8rem; } .u-mt-90 { margin-top: 9rem; } .u-mt-100 { margin-top: 10rem; } .u-mb-00 { margin-bottom: 0; } .u-mb-10 { margin-bottom: 1rem; } .u-mb-20 { margin-bottom: 2rem; } .u-mb-30 { margin-bottom: 3rem; } .u-mb-40 { margin-bottom: 4rem; } .u-mb-50 { margin-bottom: 5rem; } .u-mb-60 { margin-bottom: 6rem; } .u-mb-70 { margin-bottom: 7rem; } .u-mb-80 { margin-bottom: 8rem; } .u-mb-90 { margin-bottom: 9rem; } .u-mb-100 { margin-bottom: 10rem; } .u-lh12 { line-height: 1.2; } .u-lh13 { line-height: 1.3; } .u-lh15 { line-height: 1.5; } .u-lh16 { line-height: 1.6; } .u-lh18 { line-height: 1.8; } .u-lh20 { line-height: 2; } .u-udline { text-decoration: underline; } .u-pt-10 { padding-top: 1rem; } .u-pt-15 { padding-top: 1.5rem; } .u-pt-20 { padding-top: 2rem; } .u-pt-30 { padding-top: 3rem; } .u-pt-40 { padding-top: 4rem; } .u-pb-0 { padding-bottom: 0; } .u-pb-10 { padding-bottom: 1rem; } .u-pb-15 { padding-bottom: 1.5rem; } .u-pb-20 { padding-bottom: 2rem; } .u-pb-30 { padding-bottom: 3rem; } .u-pb-40 { padding-bottom: 4rem; } .u-pl-10 { padding-left: 1rem; } .u-pr-10 { padding-right: 1rem; } .u-pl-15 { padding-left: 1.5rem; } .u-pr-15 { padding-right: 1.5rem; } .u-pl-20 { padding-left: 2rem; } .u-pr-20 { padding-right: 2rem; } .u-p-20 { padding: 2rem; } @media screen and (min-width: 768px) { .u-pc-none { display: none; } } @media screen and (max-width: 767px) { .u-sp-none { display: none; } } .u-none { display: none; } .u-hidden { visibility: hidden; } .u-central { display: flex; align-items: center; justify-content: center; } .u-pointer { cursor: pointer; } .u-overflow-hidden { overflow: hidden; } .u-indent-1em { display: inline-block; padding-left: 1em; text-indent: -1em; } .u-c-primary { color: var(--primary); }/*# sourceMappingURL=style.css.map */