@charset "UTF-8"; /*** The new CSS reset - version 1.9 (last updated 19.6.2023) 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) */ @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&display=swap"); *: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; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { /*max-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; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; } /* reset default text opacity of input placeholder */ :-ms-input-placeholder { color: unset; } ::placeholder { color: unset; } /* remove default dot (•) sign */ ::marker { content: initial; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; } /* * 機能：clamp関数の文字列を返す * 引数：$size-at-min-width サイズ(フォントサイズなど)の最小値(pxやremなどの単位は必須) * 　　　$size-at-max-width サイズ(フォントサイズなど)の最大値(pxやremなどの単位は必須) * 　　　$min-width [省略可]サイズが最小値に到達する画面幅 * 　　　$max-width [省略可]サイズが最大値に到達する画面幅 * 使用方法： *　　デフォルトの最小画面幅$min-width-defaultと最大画面幅$max-width-defaultを事前に指定しておく *　　最小幅と最大幅をデフォルト以外にしたい場合は、引数にそれぞれ単位付きの画面幅を入れる */ .noto-serif { font-family: YakuHanMP, "Noto Serif JP", "Hiragino Mincho ProN", "Noto Serif JP", "Yu Mincho", YuMincho, serif; font-weight: 500; font-style: normal; } .noto-sans { font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; font-weight: 500; font-style: normal; } .montserrat { font-family: "Montserrat", sans-serif; font-weight: 500; font-style: normal; } html { scroll-behavior: smooth; scroll-padding-top: 100px; } body { font-family: YakuHanJP, "Noto Sans JP", "Hiragino Sans", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif; color: #161616; font-size: 16px; line-height: 2; font-weight: 500; letter-spacing: 0; text-justify: inter-character; font-feature-settings: "palt"; } ul, ol { margin: 0; padding: 0; } p { margin-bottom: 0; } a:hover, a:active, a:focus { color: inherit; text-decoration: underline; } a { opacity: 1; transition: opacity 0.2s; color: inherit; text-decoration: none; } a:hover, a:focus { opacity: 0.75; transition: opacity 0.4s; text-decoration: none; } a.button:hover { opacity: 1; transition: opacity 0; text-decoration: none; } @media (min-width: 992px) { a[href*="tel:"] { pointer-events: none; cursor: default; text-decoration: none; } } object { pointer-events: none; } a.svg { display: inline-block; position: relative; z-index: 1; } a.svg span { display: inline-block; } a.svg span object { position: relative; z-index: -1; } img { max-width: 100%; height: auto; vertical-align: bottom; } button { margin: 0; padding: 0; border: none; outline: none; background-color: transparent; cursor: pointer; } input[type=submit], input[type=button] { cursor: pointer; } label:has(input[type=checkbox]) { cursor: pointer; } input[type=text], input[type=email], input[type=tel], textarea { width: 100%; height: auto; padding: 0.5rem; border: solid 1px #f6f6f6; border-radius: 0; background-color: #ffffff; } input[type=checkbox] { all: revert; } hr { border-top: solid 1px #f6f6f6; background: transparent; opacity: 1; } map area { cursor: pointer; } .text-start { text-align: left; } .text-center { text-align: center; } .text-end { text-align: right; } @media (min-width: -0.02) { .text-xs-start { text-align: left; } .text-xs-center { text-align: center; } .text-xs-end { text-align: right; } } @media (min-width: 575.98px) { .text-sm-start { text-align: left; } .text-sm-center { text-align: center; } .text-sm-end { text-align: right; } } @media (min-width: 767.98px) { .text-md-start { text-align: left; } .text-md-center { text-align: center; } .text-md-end { text-align: right; } } @media (min-width: 991.98px) { .text-lg-start { text-align: left; } .text-lg-center { text-align: center; } .text-lg-end { text-align: right; } } @media (min-width: 1199.98px) { .text-xl-start { text-align: left; } .text-xl-center { text-align: center; } .text-xl-end { text-align: right; } } @media (min-width: 1399.98px) { .text-xxl-start { text-align: left; } .text-xxl-center { text-align: center; } .text-xxl-end { text-align: right; } } .fw-bold { font-weight: bold; } .fw-bolder { font-weight: bolder; } .fw-normal { font-weight: normal; } .fw-light { font-weight: light; } .fw-lighter { font-weight: lighter; } .fst-italic { font-style: italic; } .fst-normal { font-style: normal; } @media (min-width: -0.02) { .fw-xs-bold { font-weight: bold; } .fw-xs-bolder { font-weight: bolder; } .fw-xs-normal { font-weight: normal; } .fw-xs-light { font-weight: light; } .fw-xs-lighter { font-weight: lighter; } .fst-xs-italic { font-style: italic; } .fst-xs-normal { font-style: normal; } } @media (min-width: 575.98px) { .fw-sm-bold { font-weight: bold; } .fw-sm-bolder { font-weight: bolder; } .fw-sm-normal { font-weight: normal; } .fw-sm-light { font-weight: light; } .fw-sm-lighter { font-weight: lighter; } .fst-sm-italic { font-style: italic; } .fst-sm-normal { font-style: normal; } } @media (min-width: 767.98px) { .fw-md-bold { font-weight: bold; } .fw-md-bolder { font-weight: bolder; } .fw-md-normal { font-weight: normal; } .fw-md-light { font-weight: light; } .fw-md-lighter { font-weight: lighter; } .fst-md-italic { font-style: italic; } .fst-md-normal { font-style: normal; } } @media (min-width: 991.98px) { .fw-lg-bold { font-weight: bold; } .fw-lg-bolder { font-weight: bolder; } .fw-lg-normal { font-weight: normal; } .fw-lg-light { font-weight: light; } .fw-lg-lighter { font-weight: lighter; } .fst-lg-italic { font-style: italic; } .fst-lg-normal { font-style: normal; } } @media (min-width: 1199.98px) { .fw-xl-bold { font-weight: bold; } .fw-xl-bolder { font-weight: bolder; } .fw-xl-normal { font-weight: normal; } .fw-xl-light { font-weight: light; } .fw-xl-lighter { font-weight: lighter; } .fst-xl-italic { font-style: italic; } .fst-xl-normal { font-style: normal; } } @media (min-width: 1399.98px) { .fw-xxl-bold { font-weight: bold; } .fw-xxl-bolder { font-weight: bolder; } .fw-xxl-normal { font-weight: normal; } .fw-xxl-light { font-weight: light; } .fw-xxl-lighter { font-weight: lighter; } .fst-xxl-italic { font-style: italic; } .fst-xxl-normal { font-style: normal; } } .text-decoration-underline { text-decoration: underline; } .text-decoration-line-through { text-decoration: line-through; } .text-decoration-none { text-decoration: none; } @media (min-width: -0.02) { .text-decoration-xs-underline { text-decoration: underline; } .text-decoration-xs-line-through { text-decoration: line-through; } .text-decoration-xs-none { text-decoration: none; } } @media (min-width: 575.98px) { .text-decoration-sm-underline { text-decoration: underline; } .text-decoration-sm-line-through { text-decoration: line-through; } .text-decoration-sm-none { text-decoration: none; } } @media (min-width: 767.98px) { .text-decoration-md-underline { text-decoration: underline; } .text-decoration-md-line-through { text-decoration: line-through; } .text-decoration-md-none { text-decoration: none; } } @media (min-width: 991.98px) { .text-decoration-lg-underline { text-decoration: underline; } .text-decoration-lg-line-through { text-decoration: line-through; } .text-decoration-lg-none { text-decoration: none; } } @media (min-width: 1199.98px) { .text-decoration-xl-underline { text-decoration: underline; } .text-decoration-xl-line-through { text-decoration: line-through; } .text-decoration-xl-none { text-decoration: none; } } @media (min-width: 1399.98px) { .text-decoration-xxl-underline { text-decoration: underline; } .text-decoration-xxl-line-through { text-decoration: line-through; } .text-decoration-xxl-none { text-decoration: none; } } .d-block { display: block; } .d-inline-block { display: inline-block; } .d-flex { display: -ms-flexbox; display: flex; } .d-inline-flex { display: -ms-inline-flexbox; display: inline-flex; } .d-none { display: none; } .d-inline { display: inline; } @media (min-width: -0.02) { .d-xs-block { display: block; } .d-xs-inline-block { display: inline-block; } .d-xs-flex { display: -ms-flexbox; display: flex; } .d-xs-inline-flex { display: -ms-inline-flexbox; display: inline-flex; } .d-xs-none { display: none; } .d-xs-inline { display: inline; } } @media (min-width: 575.98px) { .d-sm-block { display: block; } .d-sm-inline-block { display: inline-block; } .d-sm-flex { display: -ms-flexbox; display: flex; } .d-sm-inline-flex { display: -ms-inline-flexbox; display: inline-flex; } .d-sm-none { display: none; } .d-sm-inline { display: inline; } } @media (min-width: 767.98px) { .d-md-block { display: block; } .d-md-inline-block { display: inline-block; } .d-md-flex { display: -ms-flexbox; display: flex; } .d-md-inline-flex { display: -ms-inline-flexbox; display: inline-flex; } .d-md-none { display: none; } .d-md-inline { display: inline; } } @media (min-width: 991.98px) { .d-lg-block { display: block; } .d-lg-inline-block { display: inline-block; } .d-lg-flex { display: -ms-flexbox; display: flex; } .d-lg-inline-flex { display: -ms-inline-flexbox; display: inline-flex; } .d-lg-none { display: none; } .d-lg-inline { display: inline; } } @media (min-width: 1199.98px) { .d-xl-block { display: block; } .d-xl-inline-block { display: inline-block; } .d-xl-flex { display: -ms-flexbox; display: flex; } .d-xl-inline-flex { display: -ms-inline-flexbox; display: inline-flex; } .d-xl-none { display: none; } .d-xl-inline { display: inline; } } @media (min-width: 1399.98px) { .d-xxl-block { display: block; } .d-xxl-inline-block { display: inline-block; } .d-xxl-flex { display: -ms-flexbox; display: flex; } .d-xxl-inline-flex { display: -ms-inline-flexbox; display: inline-flex; } .d-xxl-none { display: none; } .d-xxl-inline { display: inline; } } .container { position: relative; width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; z-index: 1; } @media (max-width: 991.98px) { .container { padding: 0 20px; } } .container-small { position: relative; width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; z-index: 1; } @media (max-width: 991.98px) { .container-small { padding: 0 20px; } } .container-small { max-width: 1080px; } .container-fluid { position: relative; width: 100%; max-width: 1120px; margin: 0 auto; padding: 0 20px; z-index: 1; } @media (max-width: 991.98px) { .container-fluid { padding: 0 20px; } } .container-fluid { width: 100%; max-width: inherit; } .w-100 { width: 100%; } .frame-wrapper__video { position: relative; width: 100%; height: 0; padding-bottom: 57.1428571429%; overflow: hidden; } .frame-wrapper__video iframe { width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .noscroll { overflow: hidden; } .main-header { position: absolute; top: 42px; left: 50%; transform: translateX(-50%); display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: justify; justify-content: space-between; width: 100%; max-width: 1400px; padding: 0 40px; z-index: 9999; } .main-header-gdo, .main-header-bridgestone { font-size: 0; line-height: 0; } @media (max-width: 767.98px) { .main-header { top: 15px; padding: 0 20px; } .main-header-gdo { width: 50px; } .main-header-bridgestone { width: 103px; } } .main-footer { padding-bottom: 120px; background-color: #161616; color: #ffffff; } @media (max-width: 767.98px) { .main-footer { padding-bottom: calc(13.3333333333vw + 25px); } } .main-footer-image { position: relative; width: 100%; height: 450px; margin-bottom: 80px; background: right center/cover no-repeat url("../images/footer-bg-pc.jpg"); } @media (max-width: 767.98px) { .main-footer-image { height: auto; aspect-ratio: 750/740; margin-bottom: 60px; background-image: url("../images/footer-bg-sp.jpg"); } } .main-footer-image-content { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; height: 100%; } @media (max-width: 767.98px) { .main-footer-image-content { -ms-flex-pack: end; justify-content: flex-end; } } .main-footer-image-content-title { margin-top: 74px; margin-bottom: 25px; font-size: 35px; line-height: 1; color: #fff000; letter-spacing: 0.1em; font-weight: 600; filter: drop-shadow(0 0 15px rgba(38, 49, 18, 0.4)); } @media (max-width: 767.98px) { .main-footer-image-content-title { margin-top: 0; margin-bottom: 14px; font-size: 17.5px; text-align: center; filter: drop-shadow(0 0 8px rgba(38, 49, 18, 0.4)); } } .main-footer-image-content-text { margin-bottom: 10px; font-size: 40px; line-height: 1.5; color: #ffffff; font-weight: 700; filter: drop-shadow(0 0 15px rgba(56, 71, 31, 0.8)); } @media (max-width: 767.98px) { .main-footer-image-content-text { margin-bottom: -10px; font-size: 23px; line-height: 1.4347826087; text-align: center; filter: drop-shadow(0 0 8px rgb(56, 71, 31)); } } .main-footer-image-content-link { margin-top: auto; transform: translateY(50%); } @media (max-width: 767.98px) { .main-footer-image-content-link { width: 280px; margin: 0 auto; text-align: center; } } .main-footer-menu { display: -ms-flexbox; display: flex; -ms-flex-pack: center; justify-content: center; } .main-footer-menu-list { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; } .main-footer-menu-list-item { padding-right: 1em; font-size: 14px; line-height: 2.1428571429; } @media (max-width: 767.98px) { .main-footer-menu-list-item { font-size: 11px; line-height: 2; } } .main-footer-menu-list-item::after { content: "｜"; display: inline-block; } .main-footer-menu-list-item:last-child::after { display: none; } .main-footer-cp { text-align: center; font-size: 12px; line-height: 2.5; } @media (max-width: 767.98px) { .main-footer-cp { font-size: 10px; line-height: 2.2; } } .page-top { position: fixed; right: 0; bottom: 136px !important; width: 60px; height: 60px; opacity: 0; visibility: hidden; transition: all 0.3s; z-index: 1000; } .page-top.is-show { opacity: 1; visibility: visible; } .page-top.is-fixed { position: fixed !important; } .page-top.is-absolute { position: absolute !important; } @media (max-width: 767.98px) { .page-top { bottom: 13.3333333333vw !important; width: 50px; height: 50px; } } /* * 機能：clamp関数の文字列を返す * 引数：$size-at-min-width サイズ(フォントサイズなど)の最小値(pxやremなどの単位は必須) * 　　　$size-at-max-width サイズ(フォントサイズなど)の最大値(pxやremなどの単位は必須) * 　　　$min-width [省略可]サイズが最小値に到達する画面幅 * 　　　$max-width [省略可]サイズが最大値に到達する画面幅 * 使用方法： *　　デフォルトの最小画面幅$min-width-defaultと最大画面幅$max-width-defaultを事前に指定しておく *　　最小幅と最大幅をデフォルト以外にしたい場合は、引数にそれぞれ単位付きの画面幅を入れる */ .main-image { position: relative; width: 100%; min-height: 800px; aspect-ratio: 1400/800; margin-bottom: 160px; } @media (max-width: 767.98px) { .main-image { height: auto; min-height: inherit; aspect-ratio: 750/1080; margin-bottom: 50px; } } .main-image-image { position: absolute; width: 100%; height: 100%; z-index: -1; background: bottom center/cover no-repeat url("../images/main-image-pc.jpg"); } @media (max-width: 767.98px) { .main-image-image { background: top center/cover no-repeat url("../images/main-image-sp.jpg"); } } .main-image-content { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: end; align-items: flex-end; -ms-flex-pack: start; justify-content: flex-start; padding-top: 194px; } @media (max-width: 767.98px) { .main-image-content { -ms-flex-align: center; align-items: center; padding-top: 82.2666666667vw; } } .main-image-title { margin-bottom: 20px; } @media (max-width: 767.98px) { .main-image-title { margin-bottom: 15px; } } .main-image-title span { position: relative; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: center; justify-content: center; width: 100%; max-width: 441px; min-height: 40px; margin: 0 auto; padding: 5px 46px; color: #ffffff; text-align: center; font-size: 23px; letter-spacing: 0.1em; font-weight: 700; white-space: nowrap; } @media (max-width: 767.98px) { .main-image-title span { max-width: inherit; min-height: 30px; padding: 3px 18px; font-size: 16px; } } .main-image-title span::before { content: ""; position: absolute; top: 0; left: 0; transform: skew(-10deg); width: 100%; height: 100%; background-color: #000000; z-index: -1; } .main-image-subtitle { position: relative; margin-bottom: 10px; padding: 10px 27px; } @media (max-width: 767.98px) { .main-image-subtitle { margin-bottom: 6px; padding: 6px 15px; } } .main-image-subtitle::before { content: ""; position: absolute; top: 0; left: 0; transform: skew(-10deg); width: 100%; height: 100%; background-color: #ffffff; z-index: -1; } .main-image-subtitle-text { position: relative; margin-right: -0.05em; font-size: 50px; line-height: 1; font-weight: 900; letter-spacing: 0.05em; color: #161616; white-space: nowrap; z-index: 1; } @media (max-width: 767.98px) { .main-image-subtitle-text { font-size: 30px; } } .main-image-zip { text-align: center; font-size: 45px; line-height: 1; color: #ffffff; font-weight: 700; filter: drop-shadow(0 0 10px rgba(5, 24, 64, 0.5)); } @media (max-width: 767.98px) { .main-image-zip { font-size: 27.5px; line-height: 1.4545454545; color: #161616; letter-spacing: -0.05em; filter: none; } } .banner { position: fixed; bottom: 0; left: 0; width: 100%; margin-bottom: 0; z-index: 9999; } .banner-container { display: -ms-grid; display: grid; -ms-grid-columns: 1fr 1fr; grid-template-columns: 1fr 1fr; gap: 0; } .notice { margin-bottom: 60px; } @media (max-width: 767.98px) { .notice { margin-bottom: 40px; } } .notice-text { max-width: 730px; margin: 0 auto; font-size: 18px; line-height: 2; letter-spacing: 0.05em; } @media (max-width: 767.98px) { .notice-text { max-width: 100%; margin: 0 auto; padding: 0 10px; font-size: 15px; line-height: 2; } } .chapter { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; gap: 150px; margin-bottom: 100px; } @media (max-width: 767.98px) { .chapter { gap: 70px; margin-bottom: 70px; } } .chapter-item-hero { position: relative; width: 100%; max-height: 580px; aspect-ratio: 1400/580; } @media (max-width: 767.98px) { .chapter-item-hero { height: auto; max-height: inherit; aspect-ratio: 750/650; } } .chapter-item-hero img, .chapter-item-hero picture { position: absolute; width: 100%; height: 100%; object-fit: cover; z-index: 0; } .chapter-item-num { position: relative; clip-path: polygon(0 0, 100% 0, 100% 66%, 50% 100%, 0 66%); display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; -ms-flex-align: center; align-items: center; -ms-flex-pack: start; justify-content: flex-start; width: 180px; height: 202px; margin: -50px auto 60px; padding-top: 45px; font-family: "Montserrat", sans-serif; text-align: center; background-color: #dfd5c7; z-index: 10; } @media (max-width: 767.98px) { .chapter-item-num { width: 125px; height: 140px; margin: -40px auto 30px; padding-top: 38px; } } .chapter-item-num-text { margin-bottom: 16px; font-size: 15px; line-height: 1; letter-spacing: 0.15em; } @media (max-width: 767.98px) { .chapter-item-num-text { margin-bottom: 8px; font-size: 12.5px; } } .chapter-item-num-num { font-size: 80px; line-height: 1; font-weight: 100; letter-spacing: 0.05em; } @media (max-width: 767.98px) { .chapter-item-num-num { font-size: 45px; } } .chapter-item-title { margin-bottom: 40px; text-align: center; font-size: 35px; line-height: 1.4285714286; letter-spacing: 0.1em; font-weight: 700; } @media (max-width: 767.98px) { .chapter-item-title { margin-bottom: 23px; font-size: 25px; line-height: 1.4; } } .chapter-item-text { max-width: 760px; margin: 0 auto; font-size: 18px; line-height: 2; letter-spacing: 0.05em; } @media (max-width: 767.98px) { .chapter-item-text { max-width: 100%; margin: 0 auto; padding: 0 10px; font-size: 15px; line-height: 2; } } .chapter-item-text-note { font-size: 14px; line-height: 1; letter-spacing: 0.05em; color: #161616; } @media (max-width: 767.98px) { .chapter-item-text-note { font-size: 12px; } } .chapter-item-text sup { vertical-align: super; font-size: smaller; } .chapter-item-image { text-align: center; } @media (max-width: 767.98px) { .chapter-item-image { position: relative; width: 100%; aspect-ratio: 670/450; overflow: hidden; } .chapter-item-image img, .chapter-item-image picture { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; } } .chapter-item-notice { font-size: 16px; line-height: 2.75; letter-spacing: 0.05em; } @media (max-width: 767.98px) { .chapter-item-notice { font-size: 14px; line-height: 2; } } .chapter-item-notice-text { font-size: 15px; line-height: 2; text-indent: -1em; padding-left: 1em; } @media (max-width: 767.98px) { .chapter-item-notice-text { margin-top: 4px; font-size: 12.5px; line-height: 2; } } .chapter-item-notice-zip span { font-size: 15px; } @media (max-width: 767.98px) { .chapter-item-notice-zip span { font-size: 13px; } } .chapter-item-notice-link { display: -ms-flexbox; display: flex; -ms-flex-direction: column; flex-direction: column; gap: 5px; -ms-flex-align: start; align-items: flex-start; margin-top: 45px; } .chapter-item-notice-link a { display: inline-block; font-size: 18px; line-height: 2.1111111111; letter-spacing: 0.05em; color: #00a8ff; border-bottom: solid 1px #00a8ff; } @media (max-width: 767.98px) { .chapter-item-notice-link a { font-size: 15px; } } .chapter-item-content { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr; gap: 80px; max-width: 960px; margin: 0 auto; } @media (max-width: 767.98px) { .chapter-item-content { max-width: 100%; gap: 40px; } } .faq { margin-bottom: 100px; } @media (max-width: 767.98px) { .faq { margin-bottom: 50px; } } .faq-title { margin-bottom: 60px; text-align: center; font-size: 25px; line-height: 1.6; letter-spacing: 0.1em; font-weight: 700; } @media (max-width: 767.98px) { .faq-title { margin-bottom: 23px; font-size: 25px; line-height: 1.4; } } .faq-list { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr; gap: 10px; max-width: 960px; margin: 0 auto; } @media (max-width: 767.98px) { .faq-list { max-width: 100%; } } .faq-item { background-color: #f6f6f6; } .faq-item-question-heading { margin: 0; font: inherit; } .faq-item-question { display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; width: 100%; padding: 20px 40px; text-align: left; cursor: pointer; } @media (max-width: 767.98px) { .faq-item-question { padding: 15px 13px; } } .faq-item-question-label { -ms-flex-negative: 0; flex-shrink: 0; margin-right: 26px; padding-left: 7px; font-family: "Montserrat", sans-serif; font-size: 50px; line-height: 0.75; font-weight: 100; } @media (max-width: 767.98px) { .faq-item-question-label { -ms-flex-item-align: start; align-self: flex-start; margin-right: 13px; padding-left: 4px; font-size: 25px; } } .faq-item-question-text { -ms-flex: 1; flex: 1; font-size: 18px; line-height: 1.8333333333; letter-spacing: 0.1em; font-weight: 700; } @media (max-width: 767.98px) { .faq-item-question-text { font-size: 13px; line-height: 1.7692307692; } } .faq-item-question-toggle { -ms-flex-negative: 0; flex-shrink: 0; -ms-flex-item-align: stretch; align-self: stretch; display: -ms-flexbox; display: flex; -ms-flex-align: center; align-items: center; -ms-flex-pack: end; justify-content: flex-end; margin-left: 33px; padding-left: 40px; border-left: solid 1px #b8b8b8; } @media (max-width: 767.98px) { .faq-item-question-toggle { margin-left: 20px; padding-left: 13px; } } .faq-item-question-toggle img { display: block; width: 40px; height: auto; } @media (max-width: 767.98px) { .faq-item-question-toggle img { width: 25px; } } .faq-item-question-toggle .faq-item-question-toggle-open { display: none; } .faq-item-answer { display: -ms-grid; display: grid; -ms-grid-rows: 0fr; grid-template-rows: 0fr; transition: grid-template-rows 0.3s ease; transition: grid-template-rows 0.3s ease, -ms-grid-rows 0.3s ease; } .faq-item-answer-inner { overflow: hidden; } .faq-item-answer-text { padding: 0 80px 60px; font-size: 18px; line-height: 2; letter-spacing: 0.05em; font-weight: 400; } @media (max-width: 767.98px) { .faq-item-answer-text { padding: 0 25px 30px; font-size: 13px; line-height: 2.1538461538; } } .faq-item.is-open .faq-item-question-toggle-close { display: none; } .faq-item.is-open .faq-item-question-toggle-open { display: block; } .faq-item.is-open .faq-item-answer { -ms-grid-rows: 1fr; grid-template-rows: 1fr; padding-top: 50px; border-top: solid 1px #b8b8b8; } @media (max-width: 767.98px) { .faq-item.is-open .faq-item-answer { padding-top: 25px; } } .link { margin-bottom: 100px; } @media (max-width: 767.98px) { .link { margin-bottom: 125px; } } .link-container { display: -ms-grid; display: grid; -ms-grid-columns: 1fr; grid-template-columns: 1fr; gap: 40px; text-align: center; } @media (max-width: 767.98px) { .link-container { gap: 25px; } } @media (max-width: 767.98px) { img.button-gdo-image { width: 66.6666666667vw; max-width: 250px; height: auto; } }