@import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700;900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Roboto:wght@900&display=swap"); /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio):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-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } /* reset default text opacity of input placeholder */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } html { font-size: 62.5%; } body { position: relative; background: #fff; color: #17171A; font-family: "Noto Sans JP", sans-serif; font-feature-settings: "palt"; font-size: 1.6rem; font-weight: normal; letter-spacing: 0.05em; line-height: 1; overflow-y: scroll; } @media screen and (max-width: 767px) { body { font-size: 1.4rem; } } button, input, select, textarea { font-family: inherit; font-size: 100%; } .txt_vertical { writing-mode: vertical-rl; } .en { font-family: "Roboto", sans-serif; font-weight: 900; } img, svg { display: block; height: auto; max-width: 100%; } a, button { cursor: pointer; } .l-inner { max-width: 1040px; margin: 0 auto; } @media screen and (max-width: 767px) { .l-inner { max-width: none; margin: 0; } } .c-title01 { margin-top: 100px; position: relative; padding-left: 46px; font-size: 3.6rem; font-weight: bold; letter-spacing: 0.017em; line-height: 1.2; } @media screen and (max-width: 767px) { .c-title01 { margin-top: 60px; padding-left: 23px; font-size: 2.6rem; letter-spacing: 0; } } .c-title01::before { content: ""; display: block; position: absolute; left: 0; top: 4px; bottom: 0; width: 36px; background-image: url(../images/lower/action_heading_lines.png); background-repeat: repeat-y; background-size: 100% auto; } @media screen and (max-width: 767px) { .c-title01::before { width: 19px; } } .c-title01 span { margin-left: 1em; font-size: 1.5rem; } @media screen and (max-width: 767px) { .c-title01 span { display: block; margin: 2px 0 0; font-size: 1.3rem; } } .c-title02 { padding: 30px 15px 0; font-size: 3.2rem; font-weight: bold; letter-spacing: 0.04em; line-height: 1.34375; } @media screen and (max-width: 767px) { .c-title02 { padding: 20px 10px 0; font-size: 2.2rem; line-height: 1.13; } } .p-lower__container .c-title02 { padding-top: 30px; } .c-text { margin-top: 20px; font-size: 1.6rem; font-weight: bold; letter-spacing: 0.05em; line-height: 1.75; } @media screen and (max-width: 767px) { .c-text { margin-top: 12px; } } .c-link01 { display: flex; flex-wrap: wrap; gap: 16px; padding-top: 30px; } .c-link01__item { position: relative; display: flex; align-items: center; width: 100%; } .c-link01__item a { position: relative; display: flex; align-items: center; width: 100%; height: 200px; padding: 0 50px; background: url(../images/lower/link01_bg.jpg) center/cover; } @media screen and (min-width: 768px) { .c-link01__item a:focus::before { opacity: 0.3; } .c-link01__item a:hover::before { opacity: 0.3; } } @media screen and (max-width: 767px) { .c-link01__item a { height: 118px; padding: 0 30px; } } .c-link01__item a::before { content: ""; position: absolute; z-index: 2; top: 0; left: 0; width: 100%; height: 100%; background: #fff; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .c-link01__item a::after { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: rgba(220, 68, 5, 0.7); } .c-link01__text { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; width: 100%; color: #fff; font-size: 3.6rem; font-weight: bold; letter-spacing: 0.0722em; line-height: 1.375; } @media screen and (max-width: 767px) { .c-link01__text { font-size: 2.4rem; } } .c-link01__text::after { content: ""; flex-shrink: 0; width: 43px; height: 43px; background: url(../images/lower/icon_arrow.svg) center/contain no-repeat; } @media screen and (max-width: 767px) { .c-link01__text::after { width: 32px; height: 32px; } } .c-link01 a[target=_blank] .c-link01__text::after { width: 41px; height: 41px; background: url(../images/lower/icon_tab.svg) center/contain no-repeat; } @media screen and (max-width: 767px) { .c-link01 a[target=_blank] .c-link01__text::after { width: 30px; height: 30px; } } .c-link01 a[href$=".pdf"] .c-link01__text::after { width: 33px; height: 42px; background: url(../images/lower/icon_pdf.svg) center/contain no-repeat; } @media screen and (max-width: 767px) { .c-link01 a[href$=".pdf"] .c-link01__text::after { width: 30px; height: 32px; } } .c-link01.-two .c-link01__item { width: calc((100% - 16px) / 2); } @media screen and (max-width: 767px) { .c-link01.-two .c-link01__item { width: 100%; } } .c-link01.-two .c-link01__item a { height: 158px; } @media screen and (max-width: 767px) { .c-link01.-two .c-link01__item a { height: 118px; } } .c-link02 { display: flex; padding-top: 100px; } @media screen and (max-width: 767px) { .c-link02 { display: block; padding-top: 60px; } } .c-link02__img { width: calc((100% + 32px) / 2); height: 329px; margin-bottom: 37px; } @media screen and (max-width: 767px) { .c-link02__img { width: 84.29%; height: auto; aspect-ratio: 279/268; margin-bottom: 0; } } .c-link02__img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .c-link02__box { position: relative; width: calc((100% + 32px) / 2); margin-left: -32px; margin-top: auto; background: #DC4405; padding: 43px 50px; } @media screen and (min-width: 768px) { .c-link02__box:focus .c-link02__heading, .c-link02__box:focus .c-link02__text { opacity: 0.5; } .c-link02__box:focus::after { opacity: 0.5; } .c-link02__box:hover .c-link02__heading, .c-link02__box:hover .c-link02__text { opacity: 0.5; } .c-link02__box:hover::after { opacity: 0.5; } } @media screen and (max-width: 1120px) { .c-link02__box { padding: 30px; min-width: 450px; } } @media screen and (max-width: 767px) { .c-link02__box { display: block; width: 300px; min-width: auto; margin-left: auto; margin-top: -23px; padding: 23px 30px; } } .c-link02__box::after { content: ""; position: absolute; top: 50%; right: 50px; width: 43px; height: 43px; background: url(../images/lower/icon_arrow.svg) center/contain no-repeat; transform: translateY(-50%); transition: all 0.2s; } @media screen and (max-width: 1120px) { .c-link02__box::after { right: 30px; } } @media screen and (max-width: 767px) { .c-link02__box::after { right: 30px; width: 32px; height: 32px; } } .c-link02__heading { color: #EEEEEE; font-size: 3rem; font-weight: bold; letter-spacing: 0.086em; line-height: 1.16; transition: all 0.2s; } @media screen and (max-width: 1120px) { .c-link02__heading { font-size: 2.8rem; } } @media screen and (max-width: 767px) { .c-link02__heading { font-size: 1.8rem; letter-spacing: 0; } } .c-link02__text { color: #EEEEEE; font-size: 3rem; font-weight: bold; letter-spacing: 0.086em; line-height: 1.16; transition: all 0.2s; } @media screen and (max-width: 1120px) { .c-link02__text { font-size: 2.8rem; } } @media screen and (max-width: 767px) { .c-link02__text { font-size: 1.6rem; letter-spacing: 0; } } .c-link02__text { margin-top: 20px; } @media screen and (max-width: 767px) { .c-link02__text { margin-top: 10px; } } .c-link02__text span { font-size: 3.6rem; } @media screen and (max-width: 1120px) { .c-link02__text span { font-size: 3.4rem; } } @media screen and (max-width: 767px) { .c-link02__text span { display: inline-block; margin-top: 4px; font-size: 2.2rem; } } .c-link03 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding-top: 50px; } @media screen and (max-width: 900px) { .c-link03 { grid-template-columns: repeat(1, 1fr); } } @media screen and (max-width: 767px) { .c-link03 { gap: 10px; padding-top: 30px; } } .c-link03__item { border: 1px solid #A2A2A3; } .c-link03__item a { position: relative; display: flex; align-items: center; gap: 30px; padding: 22px; } @media screen and (min-width: 768px) { .c-link03__item a:focus::after { background: #DC4405; } .c-link03__item a:focus .c-link03__text { color: #DC4405; } .c-link03__item a:hover::after { background: #DC4405; } .c-link03__item a:hover .c-link03__text { color: #DC4405; } } @media screen and (max-width: 767px) { .c-link03__item a { gap: 16px; padding: 16px; } } .c-link03__item a::after { content: ""; position: absolute; right: 30px; width: 29px; height: 29px; -webkit-mask-image: url(../images/lower/icon_arrow.svg); mask-image: url(../images/lower/icon_arrow.svg); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: #535353; transition: all 0.2s; } @media screen and (max-width: 767px) { .c-link03__item a::after { right: 16px; width: 29px; height: 29px; } } .c-link03__item a[target=_blank]::after { width: 27px; height: 27px; -webkit-mask-image: url(../images/lower/icon_tab.svg); mask-image: url(../images/lower/icon_tab.svg); } @media screen and (max-width: 767px) { .c-link03__item a[target=_blank]::after { width: 22px; height: 22px; } } .c-link03__img { flex-shrink: 0; width: 139px; height: 70px; } @media screen and (max-width: 767px) { .c-link03__img { width: 86px; height: 60px; } } .c-link03__img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .c-link03__text { padding-right: 40px; color: #403D3A; font-size: 2.4rem; font-weight: bold; letter-spacing: 0; line-height: 1.16; transition: all 0.2s; } @media screen and (max-width: 767px) { .c-link03__text { font-size: 1.5rem; } } .c-link04 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-top: 30px; } @media screen and (max-width: 900px) { .c-link04 { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 767px) { .c-link04 { grid-template-columns: repeat(1, 1fr); padding-top: 30px; } } .c-link04__item a { position: relative; display: flex; align-items: center; height: 72px; padding-inline: 24px 67px; background: #FFE5CD; transition: all 0.2s; } @media screen and (min-width: 768px) { .c-link04__item a:focus { background: rgba(255, 229, 205, 0.5); } .c-link04__item a:focus .c-link04__text { color: #DC4405; } .c-link04__item a:hover { background: rgba(255, 229, 205, 0.5); } .c-link04__item a:hover .c-link04__text { color: #DC4405; } } @media screen and (max-width: 767px) { .c-link04__item a { height: 60px; padding-inline: 20px 67px; } } .c-link04__item a::after { content: ""; position: absolute; right: 20px; width: 21px; height: 21px; -webkit-mask-image: url(../images/lower/icon_arrow.svg); mask-image: url(../images/lower/icon_arrow.svg); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: #DC4405; } .c-link04__item a[target=_blank]::after { width: 19px; height: 19px; -webkit-mask-image: url(../images/lower/icon_tab.svg); mask-image: url(../images/lower/icon_tab.svg); } .c-link04__item a[href$=".pdf"]::after { width: 20px; height: 22px; -webkit-mask-image: url(../images/lower/icon_pdf.svg); mask-image: url(../images/lower/icon_pdf.svg); } .c-link04__text { color: #403D3A; font-size: 1.5rem; font-weight: bold; letter-spacing: 0.1em; line-height: 1.26; transition: all 0.2s; } .c-link05 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding-top: 30px; } @media screen and (max-width: 767px) { .c-link05 { grid-template-columns: repeat(1, 1fr); gap: 30px; } } .c-link05__item { border: 1px solid #A2A2A3; } .c-link05__item a { display: block; padding: 22px 22px 26px; } @media screen and (min-width: 768px) { .c-link05__item a:focus .c-link05__text { color: #DC4405; } .c-link05__item a:focus .c-link05__text::after { background: #DC4405; } .c-link05__item a:hover .c-link05__text { color: #DC4405; } .c-link05__item a:hover .c-link05__text::after { background: #DC4405; } } @media screen and (max-width: 767px) { .c-link05__item a { padding: 22px; } } .c-link05__img { width: 100%; height: auto; aspect-ratio: 468/176; } .c-link05__img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .c-link05__text { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 0 20px; margin-top: 22px; color: #403D3A; font-size: 2.4rem; font-weight: bold; letter-spacing: 0; line-height: 1.16; transition: all 0.2s; } @media screen and (max-width: 767px) { .c-link05__text { padding: 0; margin-top: 15px; } } .c-link05__text::after { content: ""; flex-shrink: 0; width: 43px; height: 43px; -webkit-mask-image: url(../images/lower/icon_arrow.svg); mask-image: url(../images/lower/icon_arrow.svg); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: #535353; transition: all 0.2s; } @media screen and (max-width: 767px) { .c-link05__text::after { width: 32px; height: 32px; } } .c-link05__item a[target=_blank] .c-link05__text::after { width: 35px; height: 35px; -webkit-mask-image: url(../images/lower/icon_tab.svg); mask-image: url(../images/lower/icon_tab.svg); } @media screen and (max-width: 767px) { .c-link05__item a[target=_blank] .c-link05__text::after { width: 28px; height: 28px; } } .c-link06 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; padding-top: 30px; } @media screen and (max-width: 900px) { .c-link06 { grid-template-columns: repeat(1, 1fr); } } .c-link06__item { border: 1px solid #A2A2A3; } .c-link06__item a { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 22px 22px 22px 40px; } @media screen and (min-width: 768px) { .c-link06__item a:focus .c-link06__text { color: #DC4405; } .c-link06__item a:hover .c-link06__text { color: #DC4405; } } @media screen and (max-width: 767px) { .c-link06__item a { padding: 22px; } } .c-link06__item a::before { content: ""; position: absolute; bottom: 0; right: 0; width: 36px; height: 36px; background: #DC4405; } @media screen and (max-width: 767px) { .c-link06__item a::before { width: 28px; height: 28px; } } .c-link06__item a::after { content: ""; position: absolute; bottom: 7px; right: 7px; width: 22px; height: 22px; background: url(../images/lower/icon_tab.svg) center/contain no-repeat; } @media screen and (max-width: 767px) { .c-link06__item a::after { bottom: 5px; right: 5px; width: 18px; height: 18px; } } .c-link06__img { flex-shrink: 0; width: 160px; height: 154px; } @media screen and (max-width: 767px) { .c-link06__img { width: 88px; height: 85px; } } .c-link06__img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .c-link06__text { color: #403D3A; font-size: 2.4rem; font-weight: bold; letter-spacing: 0; line-height: 1.16; transition: all 0.2s; } @media screen and (max-width: 767px) { .c-link06__text { font-size: 1.6rem; } } .c-link07 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; padding-top: 30px; } @media screen and (max-width: 900px) { .c-link07 { grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 767px) { .c-link07 { grid-template-columns: repeat(1, 1fr); gap: 10px; padding-bottom: 20px; margin-bottom: -20px; } } .c-link07__item > a { display: block; padding: 22px 22px 26px; box-shadow: 0px 0px 20px rgba(26, 26, 31, 0.2); border-radius: 20px; } @media screen and (min-width: 768px) { .c-link07__item > a:focus .c-link07__text { opacity: 0.6; } .c-link07__item > a:focus .c-link07__text::after { opacity: 0.6; } .c-link07__item > a:hover .c-link07__text { opacity: 0.6; } .c-link07__item > a:hover .c-link07__text::after { opacity: 0.6; } } @media screen and (max-width: 767px) { .c-link07__item > a { display: flex; align-items: center; gap: 11px; padding: 22px; } } .c-link07__img { flex-shrink: 0; width: 100%; height: auto; aspect-ratio: 292/206; } @media screen and (max-width: 767px) { .c-link07__img { width: 74px; } } .c-link07__img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .c-link07__text { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 22px; padding: 0 9px; font-size: 2rem; font-weight: bold; letter-spacing: 0; line-height: 1.3; transition: all 0.2s; } @media screen and (max-width: 767px) { .c-link07__text { gap: 10px; width: 100%; margin: 0; padding: 0; font-size: 1.6rem; } } .c-link07__text::after { content: ""; flex-shrink: 0; width: 43px; height: 43px; -webkit-mask-image: url(../images/lower/icon_arrow.svg); mask-image: url(../images/lower/icon_arrow.svg); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: #535353; transition: all 0.2s; } @media screen and (max-width: 767px) { .c-link07__text::after { width: 32px; height: 32px; } } .c-link07__item a[target=_blank] .c-link07__text::after { width: 35px; height: 35px; -webkit-mask-image: url(../images/lower/icon_tab.svg); mask-image: url(../images/lower/icon_tab.svg); } @media screen and (max-width: 767px) { .c-link07__item a[target=_blank] .c-link07__text::after { width: 29px; height: 29px; } } .c-link07__download a { display: flex; align-items: center; justify-content: space-between; background: #FFE5CD; margin-top: 20px; padding: 13px 20px; font-size: 2rem; font-weight: bold; letter-spacing: 0; line-height: 1.3; transition: all 0.2s; } @media screen and (min-width: 768px) { .c-link07__download a:focus { color: #DC4405; } .c-link07__download a:focus::after { background: #DC4405; } .c-link07__download a:hover { color: #DC4405; } .c-link07__download a:hover::after { background: #DC4405; } } @media screen and (max-width: 767px) { .c-link07__download a { margin-top: 10px; } } .c-link07__download a::after { content: ""; width: 22px; height: 20px; -webkit-mask-image: url(../images/lower/icon_download.svg); mask-image: url(../images/lower/icon_download.svg); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; background: #17171A; transition: all 0.2s; } @media screen and (max-width: 767px) { .c-link07__download a::after { width: 20px; height: 18px; } } .c-link08 { padding-top: 30px; } .c-link08 a { position: relative; display: flex; border: 2px solid #535353; } @media screen and (min-width: 768px) { .c-link08 a:focus::before { opacity: 0.3; } .c-link08 a:hover::before { opacity: 0.3; } } @media screen and (max-width: 767px) { .c-link08 a { display: block; } } .c-link08 a::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: #fff; opacity: 0; pointer-events: none; transition: opacity 0.2s; } .c-link08__heading { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: 390px; background: #DC4405; padding: 0 40px; color: #fff; font-size: 3.6rem; font-weight: bold; letter-spacing: 0.026em; line-height: 1.5; } @media screen and (max-width: 767px) { .c-link08__heading { width: 100%; padding: 18px 0; font-size: 2.6rem; } } .c-link08__text { padding: 30px 40px; font-size: 1.6rem; font-weight: bold; letter-spacing: 0.026em; line-height: 1.5; } @media screen and (max-width: 767px) { .c-link08__text { padding: 30px; } } .c-nav { background: #FFF9D3; } @media screen and (max-width: 767px) { .c-nav { display: none; } } .c-nav__list { display: grid; display: flex; flex-wrap: wrap; gap: 35px 40px; padding: 90px 0; } @media screen and (max-width: 1100px) { .c-nav__list { max-width: 800px; margin: 0 auto; padding: 90px 20px; } } .c-nav__item { min-width: calc((100% - 120px) / 4); } @media screen and (max-width: 1100px) { .c-nav__item { min-width: calc((100% - 80px) / 3); } } .c-nav__item.-two { width: calc((100% - 40px) / 2); } @media screen and (max-width: 1100px) { .c-nav__item.-two { width: calc((100% - 20px) / 3 * 2); } } .c-nav__item a { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 1.8rem; font-weight: bold; letter-spacing: 0.06em; line-height: 1.3; padding-bottom: 10px; border-bottom: 1px solid #17171A; transition: all 0.2s; } @media screen and (min-width: 768px) { .c-nav__item a:focus { color: #DC4405; border-bottom: 1px solid #DC4405; } .c-nav__item a:hover { color: #DC4405; border-bottom: 1px solid #DC4405; } } .c-nav__item a::after { content: ""; width: 18px; height: 18px; background: url(../images/lower/icon_circle-arrow.svg) center/contain no-repeat; } .c-mv { position: relative; display: flex; align-items: center; width: 100%; height: auto; aspect-ratio: 1280/300; padding: 0 6%; } @media screen and (max-width: 767px) { .c-mv { align-items: flex-end; aspect-ratio: 375/262; padding: 0 6vw; background: #DC4405; } } .c-mv__img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } @media screen and (max-width: 767px) { .c-mv__img { height: auto; aspect-ratio: 375/168; } } .c-mv__img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .c-mv__inner { max-width: 1040px; width: 100%; margin: 0 auto; } @media screen and (max-width: 767px) { .c-mv__inner { max-width: none; } } .c-mv__text { position: relative; display: inline-block; background: #fff; padding: 3px 9px 10px; color: #DC4405; font-size: 6.2rem; font-weight: bold; letter-spacing: 0; line-height: 1; } @media screen and (max-width: 767px) { .c-mv__text { bottom: 32px; padding: 2px 8px 6px; font-size: 3.8rem; } } .c-toggle { pointer-events: none; } @media screen and (max-width: 767px) { .c-toggle { pointer-events: visible; position: relative; padding-right: 50px; } } @media screen and (max-width: 767px) { .c-toggle::after { content: ""; position: absolute; top: 50%; right: 0; background: url(../images/lower/icon_open.svg) center/contain no-repeat; width: 27px; height: 27px; transform: translateY(-50%); } } .c-toggle.is-active::after { background: url(../images/lower/icon_close.svg) center/contain no-repeat; } @media screen and (max-width: 767px) { .c-title02.c-toggle { padding-top: 0; margin-top: 20px; } } @media screen and (max-width: 767px) { .c-title02.c-toggle::after { right: 10px; } } .c-breadcrumb { display: flex; align-items: center; gap: 7px; background: #EDE1DB; padding: 9px 15px; } .c-breadcrumb__home { width: 31px; height: 22px; background: url(../images/lower/icon_home.svg) center/contain no-repeat; transition: all 0.2s; } @media screen and (min-width: 768px) { .c-breadcrumb__home:focus { opacity: 0.6; } .c-breadcrumb__home:hover { opacity: 0.6; } } .c-breadcrumb__arrow { width: 12px; height: 10px; background: url(../images/lower/icon_breadcrumb-arrow.svg) center/contain no-repeat; } .c-breadcrumb__text { font-size: 1.6rem; font-weight: 500; letter-spacing: 0.025em; line-height: 1; } .c-banner-list { display: flex; gap: 16px; } .c-banner-list a { transition: opacity 0.2s; } @media screen and (min-width: 768px) { .c-banner-list a:focus { opacity: 0.7; } .c-banner-list a:hover { opacity: 0.7; } } .p-lower { margin: 120px 0; padding: 0 6%; } @media screen and (max-width: 767px) { .p-lower { margin: 60px 0; padding: 0 6vw; } } @media screen and (max-width: 767px) { .c-toggle + .p-lower__container { height: 0; overflow-y: clip; overflow-x: visible; } } .p-lower__container > *:first-child { padding-top: 30px; } .p-lower__container > * + * { padding-top: 50px; } @media screen and (max-width: 767px) { .p-lower__container > * + * { padding-top: 30px; } } .header_pc nav .global a.current { color: #dc4405; } .header_pc nav .global a.current::after { border-color: #dc4405; } @media screen and (min-width: 768px) { .u-sp { display: none; } } @media screen and (max-width: 767px) { .u-pc { display: none; } } .u-mt05 { margin-top: 0.5em; } .u-mb05 { margin-bottom: 0.5em; } .u-pt05 { padding-top: 0.5em; } .u-pb05 { padding-bottom: 0.5em; } .u-mt1 { margin-top: 1em; } .u-mb1 { margin-bottom: 1em; } .u-pt1 { padding-top: 1em; } .u-pb1 { padding-bottom: 1em; } .u-mt2 { margin-top: 2em; } .u-mb2 { margin-bottom: 2em; } .u-pt2 { padding-top: 2em; } .u-pb2 { padding-bottom: 2em; } .u-mt3 { margin-top: 3em; } .u-mb3 { margin-bottom: 3em; } .u-pt3 { padding-top: 3em; } .u-pb3 { padding-bottom: 3em; } .u-mt4 { margin-top: 4em; } .u-mb4 { margin-bottom: 4em; } .u-pt4 { padding-top: 4em; } .u-pb4 { padding-bottom: 4em; } .u-mt5 { margin-top: 5em; } .u-mb5 { margin-bottom: 5em; } .u-pt5 { padding-top: 5em; } .u-pb5 { padding-bottom: 5em; } .u-white { color: #fff; fill: #fff; } .u-white * { color: #fff; fill: #fff; } .u-center { text-align: center; margin-left: auto; margin-right: auto; } .u-right { text-align: right; margin-left: auto; } .u-left { text-align: left; margin-right: auto; } @media screen and (min-width: 768px) { .u-sp { display: none !important; } } @media screen and (max-width: 767px) { .u-pc { display: none !important; } }