@charset "UTF-8"; @import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100..900;1,100..900&family=Noto+Sans+JP:wght@100..900&display=swap"); /*** The new CSS reset - version 1.11.2 (last updated 15.11.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) */ *:where(:not(html, iframe, canvas, img, svg, video, audio, input):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; } /* 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 { -webkit-appearance: revert; -moz-appearance: revert; appearance: revert; } sup { font-size: 50%; vertical-align: super; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* 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; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } html { font-size: 62.5%; } @media screen and (max-width: 767px) { html { font-size: 55%; } } body { overflow-x: hidden; font-family: "Noto Sans JP", sans-serif; font-size: clamp(1.4rem, 1.2153846154rem + 0.2403846154vw, 1.6rem); } @media screen and (max-width: 767px) { body { font-size: 1.6rem; } } body { line-height: 2; font-weight: 400; } .en { font-family: "Lato", serif; font-optical-sizing: auto; font-style: normal; font-weight: 500; } a { transition: all 0.3s ease; } a img { transition: all 0.3s ease; } sub { font-size: 60%; vertical-align: baseline; line-height: 0; } .ly_container { position: relative; } .inview { opacity: 0; } .inviewwrap { position: absolute; top: 0; width: 100%; height: 100%; } .inview.active { animation: fadeInup 1s ease-out; animation-fill-mode: forwards; } .inview.noanimation { opacity: 1; animation: none; } .inview.active.left { animation: fadeInLeft 1s ease-out; animation-fill-mode: forwards; } .inview.fade.active { animation: fadeIn 1s ease-out; animation-fill-mode: forwards; } .inview.clip { clip-path: inset(0 100% 0 0); transition: clip-path 0.4s ease-in; transition-delay: 0.3s; opacity: 1; } .inview.active.clip { clip-path: inset(0 0 0 0); animation: none; } .inview.clip.delay01 { transition-delay: 0.6s; } .inview.clip.delay02 { transition-delay: 0.9s; } @keyframes fadeIn { 0% { opacity: 0; } 100% { opacity: 1; } } @keyframes fadeOut { 0% { opacity: 1; } 100% { opacity: 0; } } @keyframes fadeInup { 0% { transform: translateY(50px); opacity: 0; } 100% { transform: translateY(0px); opacity: 1; } } @keyframes fadeInLeft { 0% { transform: translateX(-50px); opacity: 0; } 100% { transform: translateX(0px); opacity: 1; } } .delay01 { animation-delay: 0.3s !important; } .delay02 { animation-delay: 0.6s !important; } .delay03 { animation-delay: 0.9s !important; } ._spShowImportant { display: none !important; } @media screen and (max-width: 767px) { .inviewwrap { position: static; } ._pcShowImportant { display: none !important; } ._spShowImportant { display: block !important; } } .slick-dots { position: absolute; bottom: -35px; right: 0; display: block; width: 100%; padding: 0; margin: 0; list-style: none; text-align: right; } .slick-dots li { position: relative; display: inline-block; width: 20px; height: 20px; margin: 0 5px; padding: 0; cursor: pointer; } .slick-dots li button { font-size: 0; line-height: 0; display: block; width: 20px; height: 20px; padding: 5px; cursor: pointer; color: transparent; border: 0; outline: none; background: transparent; } .slick-dots li button:hover, .slick-dots li button:focus { outline: none; } .slick-dots li button:hover:before, .slick-dots li button:focus:before { opacity: 1; } .slick-dots li button:before { content: ""; display: block; position: absolute; top: 0; left: 0; width: 13px; height: 13px; border-radius: 50%; background-color: #BFBFBF; } .slick-dots li.slick-active button:before { background-color: #133BA3; } .slash-title { display: inline-block; padding: 10px 50px 10px 20px; font-size: clamp(1.4rem, 1.2153846154rem + 0.2403846154vw, 1.6rem); } @media screen and (max-width: 767px) { .slash-title { font-size: 1.6rem; } } .slash-title { font-size: clamp(1.4rem, 1.2153846154rem + 0.2403846154vw, 1.6rem); } @media screen and (max-width: 767px) { .slash-title { font-size: 1.6rem; } } .slash-title { font-weight: bold; color: #fff; clip-path: polygon(0 0, 100% 0, calc(100% - 33px) 100%, 0 100%); background: linear-gradient(90deg, #133BA3 0%, #3865DB 100%); } a.zoom, a .zoom { display: block; position: relative; overflow: hidden; line-height: 0; } a.zoom img, a .zoom img { transform-origin: center; } a.zoom:hover img, a:hover .zoom img { transform: scale(1.05); opacity: 1; } .sp { display: none !important; } @media screen and (max-width: 767px) { .pc { display: none !important; } .sp { display: block !important; } } .inner { max-width: calc(1030px + 6%); margin: auto; padding: 0 3%; } .inner.short { max-width: calc(900px + 6%); } main { padding-block: 110px; } @media screen and (max-width: 970px) { main { padding-top: 92px; } } @media screen and (max-width: 767px) { main { padding-block: 92px; } } main #breadcrumb { padding: 10px 5%; z-index: 2; border-top: 1px solid #B4B4B4; } @media screen and (max-width: 767px) { main #breadcrumb { display: none; padding: 10px 3%; border-top: none; } } main #breadcrumb ul { display: flex; } main #breadcrumb ul li { font-size: clamp(1.2rem, 1.0153846154rem + 0.2403846154vw, 1.4rem); } @media screen and (max-width: 767px) { main #breadcrumb ul li { font-size: 1.4rem; } } main #breadcrumb ul li::after { content: ">"; margin: 0 1ex; } main #breadcrumb ul li:last-child::after { content: ""; } main #breadcrumb.white { color: #fff; } main .common-visual { position: relative; min-height: 360px; text-align: center; display: flex; align-items: center; background-size: cover; background-position: center; } @media screen and (max-width: 767px) { main .common-visual { min-height: 200px; } } main .common-visual::after { content: ""; display: block; position: absolute; width: 100%; height: 100%; background-color: rgba(11, 9, 17, 0.3); mix-blend-mode: multiply; } main .common-visual h1 { position: relative; z-index: 1; width: 100%; margin: auto; text-align: left; max-width: calc(1030px + 6%); margin: auto; padding: 0 3%; } main .common-visual h1 span { display: inline-block; font-size: clamp(4.2rem, 3.8307692308rem + 0.4807692308vw, 4.6rem); } @media screen and (max-width: 767px) { main .common-visual h1 span { font-size: 4.6rem; } } main .common-visual h1 span { font-weight: 400; color: #fff; letter-spacing: 4px; } @media screen and (max-width: 767px) { main .common-visual h1 span { font-size: 6vw; letter-spacing: 0; } } main .common-visual .caption { position: absolute; z-index: 1; width: 100%; margin: auto; text-align: right; margin: auto; padding: 0 3%; bottom: 10px; font-size: clamp(1rem, 0.8153846154rem + 0.2403846154vw, 1.2rem); } @media screen and (max-width: 767px) { main .common-visual .caption { font-size: 1.2rem; } } main .common-visual .caption { color: #fff; text-shadow: 1px 1px 3px rgb(0, 0, 0); } @media screen and (max-width: 767px) { main .common-visual .caption { font-size: 1.2rem; } } main hr { border: 0; border-top: 1px solid #B4B4B4; margin: 100px auto; } @media screen and (max-width: 767px) { main hr { margin: 30px 0; } } main .icon-pdf { vertical-align: middle; } main p { text-align: justify; } main .layout { display: flex; justify-content: space-between; flex-wrap: wrap; } main .layout.nowrap { flex-wrap: nowrap; } main .layout.center { justify-content: center; } main .layout.col1 { justify-content: center; } main .layout.col1 .box { max-width: 600px; } main .layout.col2 .box { width: 48%; margin-bottom: 60px; } @media screen and (max-width: 767px) { main .layout.col2 .box { width: 100%; margin-bottom: 40px; } } main .layout.col3 .box { width: 30.333%; margin-bottom: 60px; } @media screen and (max-width: 767px) { main .layout.col3 .box { width: 100%; margin-bottom: 40px; } } main .layout.col3 .box.wide { width: 65.166%; } main .layout.col3 .box .image-col2 { display: flex; gap: 7%; } main .layout.col4 .box { width: 21%; margin-bottom: 60px; } @media screen and (max-width: 767px) { main .layout.col4 .box { width: 100%; margin-bottom: 40px; } } main .layout .box { display: flex; flex-direction: column; justify-content: space-between; } main .layout .box.last { margin-bottom: 0; } @media screen and (max-width: 767px) { main .layout .box.last { margin-bottom: 40px; } main .layout .box.last:last-child { margin-bottom: 0; } } main .layout .box.comingsoon { pointer-events: none; opacity: 0.7; } main .layout .box.comingsoon img { filter: grayscale(100%); } main .layout .box h3 { display: inline-block; position: relative; font-size: clamp(1.5rem, 1.2230769231rem + 0.3605769231vw, 1.8rem); } @media screen and (max-width: 767px) { main .layout .box h3 { font-size: 1.8rem; } } main .layout .box h3 { font-weight: 500; margin-bottom: 10px; color: #193E71; } main .layout .box h3 .note { display: block; font-size: clamp(1.2rem, 1.0153846154rem + 0.2403846154vw, 1.4rem); } @media screen and (max-width: 767px) { main .layout .box h3 .note { font-size: 1.4rem; } } main .layout .box p { flex-grow: 1; font-size: clamp(1.3rem, 1.1153846154rem + 0.2403846154vw, 1.5rem); } @media screen and (max-width: 767px) { main .layout .box p { font-size: 1.5rem; } } main .layout .box p a { text-decoration: underline; color: #193E71; } main .layout .box p a:hover { color: #D8007D; } main .layout .box .image.nolh { line-height: 1.1; margin-bottom: 0.3rem; } main .layout .box .image { position: relative; } main .layout .box .image .caption { position: absolute; z-index: 1; width: 100%; margin: auto; text-align: right; margin: auto; padding: 0 3%; bottom: 15px; font-size: clamp(1rem, 0.8153846154rem + 0.2403846154vw, 1.2rem); } @media screen and (max-width: 767px) { main .layout .box .image .caption { font-size: 1.2rem; } } main .layout .box .image .caption { color: #fff; text-shadow: 1px 1px 8px rgb(0, 0, 0); } @media screen and (max-width: 767px) { main .layout .box .image .caption { font-size: 1.2rem; } } main .layout.links-block .box { display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start; } main .layout.links-block .box h3 { display: inline-block; position: relative; font-size: clamp(1.5rem, 1.2230769231rem + 0.3605769231vw, 1.8rem); } @media screen and (max-width: 767px) { main .layout.links-block .box h3 { font-size: 1.8rem; } } main .layout.links-block .box h3 { font-weight: 500; margin-bottom: 10px; color: #193E71; } main .layout.links-block .box h3::after { content: ""; display: block; position: absolute; width: 11px; height: 11px; border-top: 3px solid #EC222E; border-right: 3px solid #EC222E; transform: rotate(45deg); right: -20px; top: 12px; } @media screen and (max-width: 767px) { main .layout.links-block .box h3::after { width: 9px; height: 9px; top: 10px; } } main .layout.links-block .box[target=_blank] h3::after { content: ""; display: block; position: absolute; width: 12px; height: 12px; background: url(/assets/image/menu-blank.svg) no-repeat center center/12px 12px; right: -20px; top: 50%; transform: translateY(-50%); border: none; margin-top: 0; } main .layout.row-content { flex-wrap: nowrap; gap: 5%; margin-bottom: 60px; } @media screen and (max-width: 767px) { main .layout.row-content { display: block; } } main .layout.row-content:last-child { margin-bottom: 0; } main .layout.row-content .image { width: 50%; } @media screen and (max-width: 767px) { main .layout.row-content .image { width: 100%; } } main .layout.row-content .image p { text-align: right; font-size: clamp(1.2rem, 1.0153846154rem + 0.2403846154vw, 1.4rem); } @media screen and (max-width: 767px) { main .layout.row-content .image p { font-size: 1.4rem; } } main .layout.row-content .text { width: 50%; } @media screen and (max-width: 767px) { main .layout.row-content .text { width: 100%; } } main .layout.row-content .text h3 { font-size: clamp(1.5rem, 1.2230769231rem + 0.3605769231vw, 1.8rem); } @media screen and (max-width: 767px) { main .layout.row-content .text h3 { font-size: 1.8rem; } } main .layout.row-content .text h3 { font-weight: 500; margin-bottom: 1.5rem; } main .layout.row-content .text p { font-size: clamp(1.3rem, 1.1153846154rem + 0.2403846154vw, 1.5rem); } @media screen and (max-width: 767px) { main .layout.row-content .text p { font-size: 1.5rem; } } main .layout.row-content .text p { margin-bottom: 1rem; } main .layout a[target=_blank] h3 .blank::after { content: ""; display: block; position: absolute; width: 12px; height: 12px; background: url(/assets/image/menu-blank.svg) no-repeat center center/12px 12px; right: -20px; top: 50%; transform: translateY(-50%); border: none; margin-top: 0; } main .bar { background-color: #E59736; color: #fff; line-height: 1; text-align: center; padding: 10px; border-radius: 4px; margin-bottom: 40px; font-weight: 500; font-size: clamp(1.5rem, 1.2230769231rem + 0.3605769231vw, 1.8rem); } @media screen and (max-width: 767px) { main .bar { font-size: 1.8rem; } } @media screen and (max-width: 767px) { main .bar { margin-bottom: 20px; } } main .faq { margin-top: 80px; background-color: #F2F6FA; padding: 100px 0; } @media screen and (max-width: 767px) { main .faq { margin-top: 40px; } } main .faq h2 { font-size: clamp(2.8rem, 2.4307692308rem + 0.4807692308vw, 3.2rem); } @media screen and (max-width: 767px) { main .faq h2 { font-size: 3.2rem; } } main .faq h2 { margin-bottom: 60px; font-weight: 500; } @media screen and (max-width: 767px) { main .faq h2 { margin-bottom: 30px; font-size: 2rem; } } main .faq dl { border-bottom: 1px solid #FAE9D5; } main .faq dl dt, main .faq dl dd { position: relative; display: flex; padding: 25px; } @media screen and (max-width: 767px) { main .faq dl dt, main .faq dl dd { padding: 15px 10px 15px 10px; } } main .faq dl dt .mark, main .faq dl dd .mark { display: inline-block; font-size: clamp(2.4rem, 2.0307692308rem + 0.4807692308vw, 2.8rem); } @media screen and (max-width: 767px) { main .faq dl dt .mark, main .faq dl dd .mark { font-size: 2.8rem; } } main .faq dl dt .mark, main .faq dl dd .mark { font-weight: 500; line-height: 1; width: 60px; } @media screen and (max-width: 767px) { main .faq dl dt .mark, main .faq dl dd .mark { width: 40px; } } main .faq dl dt p, main .faq dl dd p { flex: 1; } main .faq dl dt i, main .faq dl dd i { position: absolute; right: 25px; top: 50%; font-size: 1.8rem; color: #E59736; width: 26px; height: 26px; } @media screen and (max-width: 767px) { main .faq dl dt i, main .faq dl dd i { width: 20px; height: 20px; } } main .faq dl dt i::before, main .faq dl dt i::after, main .faq dl dd i::before, main .faq dl dd i::after { content: ""; display: block; position: absolute; height: 1px; width: 100%; background-color: #E59736; left: 50%; top: 0; transition: transform 0.1s; } main .faq dl dt i::before, main .faq dl dd i::before { transform: rotate(90deg); } main .faq dl dt { cursor: pointer; color: #E59736; border-top: 1px solid #FAE9D5; transition: background-color 0.3s; padding-right: 50px; } main .faq dl dt:hover { background-color: #FDFBF8; } main .faq dl dt p { font-size: clamp(1.5rem, 1.2230769231rem + 0.3605769231vw, 1.8rem); } @media screen and (max-width: 767px) { main .faq dl dt p { font-size: 1.8rem; } } main .faq dl dt p { font-weight: 500; } @media screen and (max-width: 767px) { main .faq dl dt p { font-size: 1.6rem; } } main .faq dl dt.active { background-color: #FDFBF8; } main .faq dl dt.active i::before { transform: rotate(0); } main .faq dl dd { display: none; border-top: 1px solid #FAE9D5; } main .faq dl dd a { color: #E59736; } main .faq dl dd p { font-size: clamp(1.2rem, 1.0153846154rem + 0.2403846154vw, 1.4rem); } @media screen and (max-width: 767px) { main .faq dl dd p { font-size: 1.4rem; } } @media screen and (max-width: 767px) { main .faq dl dd p { font-size: 1.2rem; } } main #first { padding: 80px 0; margin: auto; } @media screen and (max-width: 767px) { main #first { padding: 40px 0; } } main #first h2 { font-size: clamp(2.8rem, 2.4307692308rem + 0.4807692308vw, 3.2rem); } @media screen and (max-width: 767px) { main #first h2 { font-size: 3.2rem; } } main #first h2 { font-weight: 400; margin-bottom: 80px; color: #E59736; } @media screen and (max-width: 767px) { main #first h2 { font-size: 2rem; margin-bottom: 40px; line-height: 1.8; } main #first h2 br { display: none; } } main #first p.lead { font-weight: 400; font-size: clamp(1.4rem, 1.1230769231rem + 0.3605769231vw, 1.7rem); } @media screen and (max-width: 767px) { main #first p.lead { font-size: 1.7rem; } } main .contents-bg { background-color: #F8F8F8; padding: 100px 0; } @media screen and (max-width: 767px) { main .contents-bg { padding: 40px 0; } } main .contents-block { padding: 100px 0; } @media screen and (max-width: 767px) { main .contents-block { padding: 40px 0; } } main .contents-title { font-size: clamp(2.8rem, 2.4307692308rem + 0.4807692308vw, 3.2rem); } @media screen and (max-width: 767px) { main .contents-title { font-size: 3.2rem; } } main .contents-title { font-weight: 500; margin-bottom: 40px; } @media screen and (max-width: 767px) { main .contents-title { font-size: 2rem; margin-bottom: 20px; } } main .link-btn { text-align: center; margin-top: 30px; } main .btn { position: relative; display: inline-block; padding: 16px 60px 18px 24px; line-height: 1; border-radius: 30px; background-color: #E59736; color: #fff; cursor: pointer; transition: all 0.3s; } main .btn::after { content: ""; position: absolute; right: 24px; top: 50%; margin-top: -4.5px; width: 8px; height: 8px; border-top: 1px solid #fff; border-right: 1px solid #fff; transform: rotate(45deg); } main .btn:hover { filter: brightness(1.1); } main .textlink { color: #E59736; text-decoration: underline; } @media screen and (max-width: 767px) { main .js-scrollable img { max-width: none; } } main .note { font-size: clamp(1.2rem, 1.0153846154rem + 0.2403846154vw, 1.4rem); } @media screen and (max-width: 767px) { main .note { font-size: 1.4rem; } } main .note { text-align: right; } main.environment #first h2 { color: #8ABC4C; } main.environment .bar { background-color: #8ABC4C; } main.environment .btn { background-color: #8ABC4C; } main.environment .textlink { color: #8ABC4C; text-decoration: underline; } main.environment .faq dl { border-color: #E3F0D2; } main.environment .faq dl dt { color: #8ABC4C; border-color: #E3F0D2; } main.environment .faq dl dt:hover, main.environment .faq dl dt.active { background-color: #F7FCF2; } main.environment .faq dl dt i::before, main.environment .faq dl dt i::after { background-color: #8ABC4C; } main.environment .faq dl dd { border-color: #E3F0D2; } main.environment .faq dl dd a { color: #8ABC4C; } main.products-service #first h2 { color: #193E71; } main.products-service .bar { background-color: #193E71; } main.products-service .btn { background-color: #193E71; } main.products-service .textlink { color: #193E71; } main.products-service .faq dl { border-color: #C7D4E1; } main.products-service .faq dl dt { color: #193E71; border-color: #C7D4E1; } main.products-service .faq dl dt:hover, main.products-service .faq dl dt.active { background-color: #F2F6FA; } main.products-service .faq dl dt i::before, main.products-service .faq dl dt i::after { background-color: #193E71; } main.products-service .faq dl dd { border-color: #C7D4E1; } main.products-service .faq dl dd a { color: #193E71; } main.sustainability #first h2 { color: #4191D1; } main.sustainability .bar { background-color: #4191D1; } main.sustainability .btn { background-color: #4191D1; } main.sustainability .textlink { color: #4191D1; } main .text-center { text-align: center; } #bottom-contact { background-color: #003F75; padding: 70px 0; } @media screen and (max-width: 767px) { #bottom-contact { padding: 35px 0; } } #bottom-contact .inner { display: flex; color: #fff; } @media screen and (max-width: 767px) { #bottom-contact .inner { display: block; } } #bottom-contact .inner h2 { width: 30%; } @media screen and (max-width: 767px) { #bottom-contact .inner h2 { width: 100%; margin-bottom: 40px; } } #bottom-contact .inner h2 .en { font-size: clamp(3.6rem, 3.2307692308rem + 0.4807692308vw, 4rem); } @media screen and (max-width: 767px) { #bottom-contact .inner h2 .en { font-size: 4rem; } } #bottom-contact .inner h2 .en { line-height: 1.3; } #bottom-contact .inner h2 .jp { font-weight: 500; } #bottom-contact .inner .text { width: 70%; font-size: clamp(1.3rem, 1.1153846154rem + 0.2403846154vw, 1.5rem); } @media screen and (max-width: 767px) { #bottom-contact .inner .text { font-size: 1.5rem; } } @media screen and (max-width: 767px) { #bottom-contact .inner .text { width: 100%; margin-bottom: 40px; } } #bottom-contact .inner .text p { margin-bottom: 1rem; font-size: clamp(1.5rem, 1.2230769231rem + 0.3605769231vw, 1.8rem); } @media screen and (max-width: 767px) { #bottom-contact .inner .text p { font-size: 1.8rem; } } #bottom-contact .inner .text p { font-weight: 500; margin-bottom: 20px; } @media screen and (max-width: 767px) { #bottom-contact .inner .text p { font-size: 1.5rem; } } #bottom-contact .inner .text a { position: relative; display: block; border-radius: 40px; background-color: #fff; color: #003F75; text-align: center; line-height: 1; padding: 15px; } @media screen and (max-width: 767px) { #bottom-contact .inner .text a { padding-block: 25px; } } #bottom-contact .inner .text a span { position: absolute; width: 15px; height: 15px; right: 40px; top: 50%; transform: translateY(-50%); } /* HEADER ================================================== */ #header { position: fixed; top: 0; left: 0; width: 100%; height: 110px; z-index: 500; background-color: #fff; border-bottom: 1px solid #B4B4B4; } @media screen and (max-width: 970px) { #header { height: 91px; } } @media screen and (max-width: 767px) { #header { height: 92px; } } #header .header-layout-main { display: flex; justify-content: space-between; align-items: center; padding: 11px 2% 11px 3%; width: 100%; height: 54px; } @media screen and (max-width: 970px) { #header .header-layout-main { height: 30px; padding-block: 0; } } @media screen and (max-width: 767px) { #header .header-layout-main { padding: 0 3%; } } #header .header-layout-main .header-logo { position: relative; display: flex; align-items: center; } @media screen and (max-width: 767px) { #header .header-layout-main .header-logo { padding: 0; width: 70%; } } #header .header-layout-main .header-logo h1 { display: inline-block; line-height: 1; max-width: 280px; margin-right: 32px; } @media screen and (max-width: 970px) { #header .header-layout-main .header-logo h1 { max-width: 240px; } } @media screen and (max-width: 767px) { #header .header-layout-main .header-logo h1 { margin-right: 10px; height: auto; } } #header .header-layout-main .header-logo .sub { display: block; width: 63px; line-height: 1; } #header .header-layout-main .header-top-navi { display: flex; justify-content: space-between; align-items: center; width: 250px; } @media screen and (max-width: 970px) { #header .header-layout-main .header-top-navi { width: auto; gap: 20px; } } @media screen and (max-width: 767px) { #header .header-layout-main .header-top-navi { width: auto; padding-right: 0; } } #header .header-layout-main .header-top-navi .youtube { line-height: 0; } #header .header-layout-main .header-top-navi .contact { display: none; background-color: #3C3C3C; border-radius: 6px; line-height: 1; color: #fff; padding: 7px 10px 9px; } @media screen and (max-width: 970px) { #header .header-layout-main .header-top-navi .contact { display: block; } } @media screen and (max-width: 767px) { #header .header-layout-main .header-top-navi .contact { display: none; } } #header .header-layout-main .header-top-navi .sub { width: 72px; display: block; line-height: 0; } #header #header-navi { display: flex; padding-left: 3%; margin: auto; } @media screen and (max-width: 767px) { #header #header-navi { padding-bottom: 0; flex: 1; width: 100%; justify-content: flex-end; gap: 20px; border-top: 1px solid #B4B4B4; } } #header #header-navi ul { display: flex; align-items: center; line-height: 2; height: 55px; width: 100%; } @media screen and (max-width: 970px) { #header #header-navi ul .contact, #header #header-navi ul .nor { display: none; } } @media screen and (max-width: 767px) { #header #header-navi ul { width: auto; margin-bottom: 0; padding: 0; } } #header #header-navi ul li { padding-block: 12px; } @media screen and (max-width: 767px) { #header #header-navi ul li { padding-bottom: 0; } } #header #header-navi ul li:focus-visible { outline: solid; } #header #header-navi ul li:hover { color: #193E71; } #header #header-navi ul li > span, #header #header-navi ul li > a { cursor: pointer; font-size: clamp(1.2rem, 1.1vw, 1.5rem); display: block; padding: 0 1vw; font-weight: 500; } @media screen and (max-width: 767px) { #header #header-navi ul li.blank { display: flex !important; gap: 20px; } } #header #header-navi .contact { text-align: right; width: 214px; padding: 0; } @media screen and (max-width: 767px) { #header #header-navi .contact { display: none; } } #header #header-navi .contact a { background-color: #3C3C3C; line-height: 1; color: #fff; font-size: clamp(1.2rem, 1.1vw, 1.5rem); padding: 7px 10px 9px; height: 55px; display: flex; align-items: center; justify-content: center; } #header #header-navi .contact a:hover { background-color: #000; } @media screen and (max-width: 970px) { #header #header-navi .contact a { height: 60px; } } #sp-mm { position: relative; right: 0; bottom: 0; height: 55px; max-width: 123px; width: 8%; cursor: pointer; z-index: 200; background-color: #EBEBEB; } @media screen and (max-width: 970px) { #sp-mm { height: 60px; width: 60px; } } #sp-mm:focus-visible { outline: solid; } #sp-mm:hover .sp-mm-btn span:before { top: -8px; } #sp-mm:hover .sp-mm-btn span:after { bottom: -8px; } #sp-mm .sp-mm-btn { position: relative; width: 28px; height: 1px; margin: auto; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } #sp-mm .sp-mm-btn span { display: block; width: 100%; height: 1px; transition: all 0.3s ease; background-color: #000; } #sp-mm .sp-mm-btn span:before, #sp-mm .sp-mm-btn span:after { content: ""; display: block; position: absolute; width: 100%; height: 1px; left: 0; transition: all 0.3s ease; background-color: #000; transform-origin: center; } #sp-mm .sp-mm-btn span:before { top: -6px; } #sp-mm .sp-mm-btn span:after { bottom: -6px; } #sp-mm.close .sp-mm-btn span { background-color: transparent; } #sp-mm.close .sp-mm-btn span:before { animation: close1 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) forwards; } #sp-mm.close .sp-mm-btn span:after { animation: close2 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) forwards; } @keyframes close1 { 0% { top: 0; transform: rotate(0); } 50% { top: 0; transform: rotate(0); } 100% { top: 0; transform: rotate(-45deg); } } @keyframes close2 { 0% { bottom: 0; transform: rotate(0); } 50% { bottom: 0; transform: rotate(0); } 100% { bottom: 0; transform: rotate(45deg); } } #sp-menu { display: none; position: fixed; top: 110px; left: 0; width: 100%; height: calc(100vh - 100px); z-index: 100; background-color: #fff; padding-top: 60px; overflow-y: auto; } @media screen and (max-width: 970px) { #sp-menu { top: 80px; } } @media screen and (max-width: 767px) { #sp-menu { top: 80px; height: calc(100% - 80px); overflow-y: scroll; padding-top: 20px; } } #sp-menu .inner { display: flex; justify-content: space-between; gap: 3%; max-width: none; } @media screen and (max-width: 767px) { #sp-menu .inner { display: block; padding: 0 5%; } } #sp-menu .inner .col { width: 33.333%; } @media screen and (max-width: 767px) { #sp-menu .inner .col { width: 100%; } } #sp-menu .inner a[target=_blank] { position: relative; padding-right: 15px; } #sp-menu .inner a[target=_blank]::after { content: ""; display: block; position: absolute; width: 12px; height: 12px; background: url(/assets/image/menu-blank.svg) no-repeat center center; right: 0; top: 50%; transform: translateY(-50%); } #sp-menu h2 { font-size: clamp(1.7rem, 1.4230769231rem + 0.3605769231vw, 2rem); } @media screen and (max-width: 767px) { #sp-menu h2 { font-size: 2rem; } } #sp-menu h2 { font-weight: 500; color: #193E71; } @media screen and (max-width: 767px) { #sp-menu h2 { position: relative; margin-bottom: 0; color: #0f0f0f; font-size: 2rem; border-bottom: 1px solid #ccc; padding: 12px 0; } #sp-menu h2::after { content: ""; display: block; position: absolute; right: 15px; top: 50%; width: 7px; height: 7px; border-right: 1px solid #00AAB8; border-bottom: 1px solid #00AAB8; transform: rotate(45deg) translateY(-55%); } #sp-menu h2.open::after { transform: rotate(-135deg) translateY(-55%); right: 9px; } } #sp-menu h2.border { border-bottom: 2px solid #193E71; } @media screen and (max-width: 767px) { #sp-menu h2.border { border-bottom: 1px solid #ccc; margin-bottom: 0; } } #sp-menu h2.border a { padding-top: 0; padding-bottom: 0; } #sp-menu h2.single { margin-bottom: 5rem; } @media screen and (max-width: 767px) { #sp-menu h2.single { margin-bottom: 0; } #sp-menu h2.single::after { transform: rotate(-45deg) translateY(-55%); right: 12px; } } #sp-menu h2.single a { padding-top: 0; padding-bottom: 0; } @media screen and (max-width: 767px) { #sp-menu h2.single a { padding-top: 0; } } #sp-menu h2 a { display: block; padding: 12px 0; } #sp-menu h3 { font-weight: 500; } @media screen and (max-width: 767px) { #sp-menu h3 { font-size: 2rem; padding-block: 1rem; } } @media screen and (max-width: 767px) { #sp-menu .sp-menu-block { display: none; } } #sp-menu ul { margin-bottom: 50px; } @media screen and (max-width: 767px) { #sp-menu ul { margin-bottom: 0; padding-bottom: 20px; } } #sp-menu ul li { margin-bottom: 1rem; } @media screen and (max-width: 767px) { #sp-menu ul li { margin-bottom: 0; } } #sp-menu ul li a { font-size: clamp(1.3rem, 1.1153846154rem + 0.2403846154vw, 1.5rem); } @media screen and (max-width: 767px) { #sp-menu ul li a { font-size: 1.5rem; } } #sp-menu ul li a:hover { color: #00AAB8; } @media screen and (max-width: 767px) { #sp-menu ul li a { display: block; padding: 12px 0 0; } } #sp-menu .nav-image { display: block; } #sp-menu #sp-menu-col1 { width: 39%; } @media screen and (max-width: 767px) { #sp-menu #sp-menu-col1 { width: 100%; } } #sp-menu #sp-menu-col1 .nav-image.mb { margin-bottom: 30px; } #sp-menu #sp-menu-col1 .flex-menu { display: flex; flex-wrap: wrap; } @media screen and (max-width: 767px) { #sp-menu #sp-menu-col1 .flex-menu { display: block; } } #sp-menu #sp-menu-col1 .flex-menu li { width: 33.333%; margin-bottom: 0; } @media screen and (max-width: 767px) { #sp-menu #sp-menu-col1 .flex-menu li { width: 100%; } } #sp-menu #sp-menu-col1 .flex-menu li a { font-size: clamp(1.1rem, 0.9153846154rem + 0.2403846154vw, 1.3rem); } @media screen and (max-width: 767px) { #sp-menu #sp-menu-col1 .flex-menu li a { font-size: 1.3rem; } } @media screen and (max-width: 767px) { #sp-menu #sp-menu-col1 .flex-menu li a { font-size: 1.8rem; } } #sp-menu #sp-menu-col2 { width: 39%; } @media screen and (max-width: 767px) { #sp-menu #sp-menu-col2 { width: 100%; } } #sp-menu #sp-menu-col2 .flex-menu { display: flex; gap: 3%; } @media screen and (max-width: 767px) { #sp-menu #sp-menu-col2 .flex-menu { display: block; } } #sp-menu #sp-menu-col2 .flex-menu .col { width: 50%; } @media screen and (max-width: 767px) { #sp-menu #sp-menu-col2 .flex-menu .col { width: 100%; } } #sp-menu #sp-menu-col2 .flex-menu h4 { font-size: clamp(1.2rem, 1.0153846154rem + 0.2403846154vw, 1.4rem); } @media screen and (max-width: 767px) { #sp-menu #sp-menu-col2 .flex-menu h4 { font-size: 1.4rem; } } @media screen and (max-width: 767px) { #sp-menu #sp-menu-col2 .flex-menu h4 { font-size: 1.8rem; } } #sp-menu #sp-menu-col2 .flex-menu ul { padding-left: 20px; margin-bottom: 10px; } #sp-menu #sp-menu-col2 .flex-menu ul li { margin-bottom: 0; } #sp-menu #sp-menu-col2 .flex-menu ul li a { font-size: clamp(1rem, 0.8153846154rem + 0.2403846154vw, 1.2rem); } @media screen and (max-width: 767px) { #sp-menu #sp-menu-col2 .flex-menu ul li a { font-size: 1.2rem; } } @media screen and (max-width: 767px) { #sp-menu #sp-menu-col2 .flex-menu ul li a { font-size: 1.8rem; } } #sp-menu #sp-menu-col3 { width: 22%; } @media screen and (max-width: 767px) { #sp-menu #sp-menu-col3 { width: 100%; } } #sp-menu #sp-menu-col3 ul li { margin-bottom: 0; } #sp-menu #sp-menu-col3 ul li a { font-size: clamp(1.1rem, 0.9153846154rem + 0.2403846154vw, 1.3rem); } @media screen and (max-width: 767px) { #sp-menu #sp-menu-col3 ul li a { font-size: 1.3rem; } } @media screen and (max-width: 767px) { #sp-menu #sp-menu-col3 ul li a { font-size: 1.8rem; } } #sp-menu #sp-menu-col3 ul li a.comingsoon { pointer-events: none; opacity: 0.7; filter: grayscale(100%); } #sp-menu #sp-bottom { padding-top: 30px; } #sp-menu #sp-bottom .other-link ul { display: flex; gap: 5%; } #sp-menu #sp-bottom .other-link ul li { width: 50%; } #sp-menu #sp-bottom .other-link ul li a { text-align: center; border-radius: 4px; border: 2px solid #00aab8; background-color: #fff; color: #00aab8; line-height: 1; padding: 16px 18px; } #sp-menu #sp-bottom .sns { display: flex; align-items: center; gap: 10%; justify-content: center; margin-top: 30px; } #sp-menu #sp-bottom .sns #sp-bottom-youtube { width: 35%; } #sp-menu #sp-bottom .sns #sp-bottom-youtube img { width: 100%; max-width: none; } .menu-open { position: fixed; } .menu-open .nor { display: none; } /* Mega menu ==================== */ #megamenu-overflow { display: none; position: fixed; top: 120px; left: 0; width: 100%; height: calc(100vh - 120px); z-index: 100; background-color: rgba(255, 255, 255, 0.7); backdrop-filter: blur(10px); } .megamenu-block { visibility: hidden; opacity: 0; position: absolute; top: 200vh; left: 0; width: 100%; background-color: #F8F8F8; z-index: 101; } .megamenu-block.show { animation: mmFadeIn 0.2s cubic-bezier(0.075, 0.82, 0.165, 1) forwards; } @keyframes mmFadeIn { 0% { display: block; visibility: hidden; opacity: 0; top: 120px; } 100% { display: block; visibility: visible; opacity: 1; top: 106px; } } .megamenu-block .inner { padding-top: 40px; } .megamenu-block h2 { margin-bottom: 30px; font-size: clamp(1.7rem, 1.4230769231rem + 0.3605769231vw, 2rem); } @media screen and (max-width: 767px) { .megamenu-block h2 { font-size: 2rem; } } .megamenu-block h2 { font-weight: 500; color: #00AAB8; } .megamenu-block .layout { display: flex; flex-wrap: wrap; } .megamenu-block .layout a { position: relative; width: 25%; height: auto; padding: 0 2% 15px; font-size: clamp(1.3rem, 1.1153846154rem + 0.2403846154vw, 1.5rem); } @media screen and (max-width: 767px) { .megamenu-block .layout a { font-size: 1.5rem; } } .megamenu-block .layout a figure img { overflow: hidden; border-radius: 4px; line-height: 0; } .megamenu-block .layout a figure figcaption { position: relative; display: inline-block; padding-right: 15px; line-height: 1.5; } .megamenu-block .layout a.comingsoon { pointer-events: none; } .megamenu-block .layout a.comingsoon figure { opacity: 0.7; filter: grayscale(100%); } .megamenu-block .layout a:hover { color: #00AAB8; } .megamenu-block .layout a[target=_blank] figcaption::after { content: ""; display: block; position: absolute; width: 12px; height: 12px; background: url(/assets/image/menu-blank.svg) no-repeat center center; right: 0; top: 50%; transform: translateY(-50%); } .megamenu-block .layout.col5 a { width: 20%; } /* FOOTER ================================================== */ #footer { background-color: #F8F8F8; } @media screen and (max-width: 767px) { #footer { padding: 40px 0; } } #footer #footer-menu { position: relative; padding: 50px 5%; display: flex; } @media screen and (max-width: 767px) { #footer #footer-menu { display: none; } } #footer #footer-menu-layout { width: 100%; max-width: 1280px; margin: auto; display: flex; justify-content: space-between; gap: 25px; padding-top: 5vw; } #footer #footer-menu-layout .parent-title { margin-bottom: 1rem; color: #193E71; font-weight: 500; } #footer #footer-menu-layout .parent-title.single { margin-bottom: 2rem; } #footer #footer-menu-layout .sub-title { font-size: clamp(1.1rem, 0.9153846154rem + 0.2403846154vw, 1.3rem); } @media screen and (max-width: 767px) { #footer #footer-menu-layout .sub-title { font-size: 1.3rem; } } #footer #footer-menu-layout .child-menu li a { font-size: clamp(1.1rem, 0.9153846154rem + 0.2403846154vw, 1.3rem); } @media screen and (max-width: 767px) { #footer #footer-menu-layout .child-menu li a { font-size: 1.3rem; } } #footer #footer-menu-layout .child-menu li a { margin-bottom: 1rem; color: #000; } #footer #footer-menu-layout .child-menu li a::before { content: "－ "; } #footer #footer-menu-layout .child-menu li a:hover { color: #193E71; } #footer #footer-menu-layout .child-menu li a[target=_blank] { position: relative; padding-right: 15px; } #footer #footer-menu-layout .child-menu li a[target=_blank]::after { content: ""; display: block; position: absolute; width: 12px; height: 12px; background: url(/assets/image/menu-blank.svg) no-repeat center center; right: 0; top: 50%; transform: translateY(-50%); } #footer #footer-bottom { font-size: clamp(1rem, 0.9076923077rem + 0.1201923077vw, 1.1rem); } @media screen and (max-width: 767px) { #footer #footer-bottom { font-size: 1.1rem; } } #footer #footer-bottom { padding: 0 5% 3vw; } #pagetop { position: fixed; display: flex; align-items: center; justify-content: center; right: 5%; bottom: 5%; cursor: pointer; transition: all 0.3s ease; border: 1px solid #ccc; border-radius: 50%; width: 76px; height: 76px; line-height: 0; z-index: 100; background-color: rgba(255, 255, 255, 0.5); } #pagetop:hover { background-color: #fff; } @keyframes pagetop { 0% { transform: translateY(0); } 100% { transform: translateY(-4px); } } #contact h1 { font-size: clamp(2.6rem, 2.2307692308rem + 0.4807692308vw, 3rem); } @media screen and (max-width: 767px) { #contact h1 { font-size: 3rem; } } #contact h1 { font-weight: 500; margin-block: 50px; color: #193E71; padding: 0 5%; } #contact h1 .en { display: inline-block; font-size: clamp(4.6rem, 4.2307692308rem + 0.4807692308vw, 5rem); } @media screen and (max-width: 767px) { #contact h1 .en { font-size: 5rem; } } #contact h1 .en { font-weight: 500; margin-right: 5vw; line-height: 1; } #contact h1 .jp { display: inline-block; font-size: clamp(2.6rem, 2.2307692308rem + 0.4807692308vw, 3rem); } @media screen and (max-width: 767px) { #contact h1 .jp { font-size: 3rem; } } #contact h1 .jp { font-weight: 500; } #contact .inner { max-width: calc(1070px + 6%); } #contact .inner ul { display: flex; flex-wrap: wrap; justify-content: space-between; } #contact .inner ul li { width: 48%; margin-bottom: 16px; } @media screen and (max-width: 767px) { #contact .inner ul li { width: 100%; } } #contact .inner ul li a { position: relative; background-color: #003F75; color: #fff; font-size: clamp(1.4rem, 1.1230769231rem + 0.3605769231vw, 1.7rem); } @media screen and (max-width: 767px) { #contact .inner ul li a { font-size: 1.7rem; } } #contact .inner ul li a { font-weight: 500; padding: 8px 60px 8px 28px; height: 100px; display: flex; align-items: center; line-height: 1.5; } #contact .inner ul li a::after { content: "→"; display: block; position: absolute; right: 30px; top: 50%; transform: translateY(-50%); color: #fff; font-size: clamp(1.5rem, 1.2230769231rem + 0.3605769231vw, 1.8rem); } @media screen and (max-width: 767px) { #contact .inner ul li a::after { font-size: 1.8rem; } } #contact .inner ul li a::after { font-weight: 500; } #contact #contact-form .form-row { margin-bottom: 2rem; } #contact #contact-form h3 { display: block; color: #003F75; font-size: clamp(1.5rem, 1.2230769231rem + 0.3605769231vw, 1.8rem); } @media screen and (max-width: 767px) { #contact #contact-form h3 { font-size: 1.8rem; } } #contact #contact-form h3 { font-weight: 500; } #contact #contact-form h3 .hi { color: #D65C5C; font-size: clamp(1.1rem, 0.9153846154rem + 0.2403846154vw, 1.3rem); } @media screen and (max-width: 767px) { #contact #contact-form h3 .hi { font-size: 1.3rem; } } #contact #contact-form h3 .hi { padding-left: 20px; } #contact #contact-form input[type=text], #contact #contact-form input[type=email], #contact #contact-form textarea { font-size: clamp(1.4rem, 1.2153846154rem + 0.2403846154vw, 1.6rem); } @media screen and (max-width: 767px) { #contact #contact-form input[type=text], #contact #contact-form input[type=email], #contact #contact-form textarea { font-size: 1.6rem; } } #contact #contact-form input[type=text], #contact #contact-form input[type=email], #contact #contact-form textarea { padding: 10px 15px; width: 100%; border: none; background-color: #F2F5F8; } #contact #contact-form .policy h2 { font-size: clamp(2.6rem, 2.2307692308rem + 0.4807692308vw, 3rem); } @media screen and (max-width: 767px) { #contact #contact-form .policy h2 { font-size: 3rem; } } #contact #contact-form .policy h2 { font-weight: 500; color: #003F75; margin-bottom: 20px; } #contact #contact-form .policy .note { text-align: left; margin-bottom: 50px; } #contact #contact-form .policy .policy-text { font-size: clamp(1.3rem, 1.1153846154rem + 0.2403846154vw, 1.5rem); } @media screen and (max-width: 767px) { #contact #contact-form .policy .policy-text { font-size: 1.5rem; } } #contact #contact-form .policy .policy-text { line-height: 1.5; margin-bottom: 20px; background-color: #F4F4F4; padding: 40px; height: 300px; overflow-y: auto; } #contact #contact-form .policy .policy-text b { font-weight: bold; } @media screen and (max-width: 767px) { #contact #contact-form .policy .policy-text { font-size: 1.4rem; padding: 5%; } } #contact #contact-form .bottom-block { text-align: center; } #contact #contact-form .bottom-block .agree label { cursor: pointer; } #contact #contact-form .bottom-block .agree a { text-decoration: underline; } #contact #contact-form .bottom-block .agree a:hover { color: #D8007D; } #contact .form-btn { text-align: center; } #contact .form-btn #submit-btn { margin-top: 2rem; cursor: pointer; background-color: #003F75; color: #fff; font-weight: 500; text-align: center; font-size: clamp(1.7rem, 1.4230769231rem + 0.3605769231vw, 2rem); } @media screen and (max-width: 767px) { #contact .form-btn #submit-btn { font-size: 2rem; } } #contact .form-btn #submit-btn { border-radius: 50px; line-height: 1; padding: 12px 60px; transition: background-color 0.3s; } #contact .form-btn #submit-btn:hover { background-color: #002d54; } #policy h1 { text-align: center; font-size: clamp(2.6rem, 2.2307692308rem + 0.4807692308vw, 3rem); } @media screen and (max-width: 767px) { #policy h1 { font-size: 3rem; } } #policy h1 { font-weight: 500; margin-block: 50px; color: #193E71; } #policy .content_block { margin-bottom: 100px; } @media screen and (max-width: 767px) { #policy .content_block { margin-bottom: 50px; } } #policy .content_block .inpage-nav { display: flex; flex-wrap: wrap; margin-bottom: 90px; } @media screen and (max-width: 767px) { #policy .content_block .inpage-nav { margin-bottom: 40px; } } #policy .content_block .inpage-nav li { position: relative; width: 50%; margin-bottom: 15px; } @media screen and (max-width: 767px) { #policy .content_block .inpage-nav li { width: 100%; margin-bottom: 10px; } } #policy .content_block .inpage-nav li a { display: block; background-color: #FAFAFA; padding: 25px; color: #003F75; } @media screen and (max-width: 767px) { #policy .content_block .inpage-nav li a { padding: 15px; } } #policy .content_block .inpage-nav li a::after { content: ""; display: block; position: absolute; width: 8px; height: 8px; border-right: 1px solid #003F75; border-bottom: 1px solid #003F75; right: 20px; top: 50%; transform: rotate(45deg) translateY(-50%); } #policy .content_block .inpage-nav li:nth-child(odd)::after { content: ""; display: block; position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 1px; height: 20%; background-color: #BCCBD9; } @media screen and (max-width: 767px) { #policy .content_block .inpage-nav li:nth-child(odd)::after { content: none; } } #policy .content_block h2 { font-size: clamp(2rem, 1.6307692308rem + 0.4807692308vw, 2.4rem); } @media screen and (max-width: 767px) { #policy .content_block h2 { font-size: 2.4rem; } } #policy .content_block h2 { font-weight: 500; color: #003F75; margin-bottom: 20px; border-bottom: 4px solid #003F75; } #policy .content_block h3 { position: relative; font-weight: 500; color: #003F75; padding-bottom: 17px; margin-bottom: 17px; font-size: clamp(1.3rem, 1.1153846154rem + 0.2403846154vw, 1.5rem); } @media screen and (max-width: 767px) { #policy .content_block h3 { font-size: 1.5rem; } } #policy .content_block h3::after { content: ""; display: block; position: absolute; width: 30px; height: 1px; background-color: #003F75; bottom: 0; left: 0; } #policy .content_block p { margin-bottom: 70px; font-size: clamp(1.3rem, 1.1153846154rem + 0.2403846154vw, 1.5rem); } @media screen and (max-width: 767px) { #policy .content_block p { font-size: 1.5rem; } } @media screen and (max-width: 767px) { #policy .content_block p { margin-bottom: 40px; } } #policy .content_block .last { text-align: right; }