@charset "UTF-8"; /*** The new CSS reset - version 1.7.2 (last updated 23.6.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):not(svg *, symbol *)) { all: unset; display: revert; } /* 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; appearance: revert; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } :root { --viewport-offset: max(0px, calc((100vw - 1920px) / 2)); --inner-padding: 8vw; --wrapper-border-width: 10px; --hover-opacity: 0.75; --color-main: #bad921; --color-text: #3b3324; } @media (min-width: 768px) { :root { --inner-padding: 80px; --wrapper-border-width: 16px; } } * { margin: 0; padding: 0; } *::before, *::after { pointer-events: none; } html { overflow: auto; font-size: 62.5%; } body { position: relative; overflow: hidden; min-width: 320px; line-height: 1.7; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-weight: 600; color: var(--color-text); -webkit-text-size-adjust: 100%; letter-spacing: 0.05em; font-size: clamp(1.4rem, 1.0655052265rem + 0.6968641115vw, 1.6rem); } @supports not (font-size: clamp(14 * 0.1rem, 1.0655052265rem + 0.6968641115vw, 16 * 0.1rem)) { body { font-size: 1.4rem; } } body h1:has(wbr), body h2:has(wbr), body h3:has(wbr), body h4:has(wbr), body h5:has(wbr), body h6:has(wbr), body p:has(wbr), body li:has(wbr), body dd:has(wbr), body figcaption:has(wbr) { word-break: keep-all; overflow-wrap: anywhere; } @media (min-width: 768px) { body { width: min(100%, 1920px); margin: auto; font-size: 1.6rem; } } .l-wrapper { position: relative; } .l-wrapper::after { content: ""; box-sizing: border-box; display: inline-block; position: absolute; z-index: 500; top: 0; left: 0; width: 100%; height: 100%; border: var(--wrapper-border-width) solid var(--color-main); } a { color: inherit; text-decoration: none; transition: all 0.3s ease-in; } @media (min-width: 768px) { a:not([class]) { text-decoration: underline; } @media not all and (pointer: coarse) { a:not([class]):hover { text-decoration: none; } } } span { font-weight: inherit; } img { display: block; width: 100%; height: auto; } input, textarea, button { border: none; appearance: none; caret-color: var(--main-color); } input:focus-visible, textarea:focus-visible, button:focus-visible { outline-color: var(--main-color); } @media (max-width: 767.98px) { input, textarea, button { font-size: 1.6rem; } } /*　MV　*/ .js-mv-slider .splide__pagination { bottom: 20px; } .js-mv-slider .splide__pagination__page { box-sizing: border-box; width: 10px; height: 10px; margin: 0 8px; border: 2px solid #fff; background-color: #fff; opacity: 1; } .js-mv-slider .splide__pagination__page.is-active { background-color: transparent; } @media (min-width: 768px) { .js-mv-slider .splide__pagination { left: 50px; right: inherit; bottom: 30px; } .js-mv-slider .splide__pagination__page { width: 16px; height: 16px; } } /* ScrollHint */ .js-scrollhint { display: flex; gap: 40px; scroll-snap-type: x mandatory; padding: 20px 0 20px 20px; scrollbar-color: #bad921 #fff; } .js-scrollhint::-webkit-scrollbar { width: 10px; height: 10px; } .js-scrollhint::-webkit-scrollbar-track { background: #fff; } .js-scrollhint::-webkit-scrollbar-thumb { background: #bad921; } .js-scrollhint > * { min-width: 235px; scroll-snap-align: start; } @media (min-width: 768px) { .js-scrollhint { padding-top: 30px; } } /* Card Slider */ .js-card-slider .splide__arrow { top: 33.22%; width: 44px; height: 44px; background: none; opacity: 1; transform: none; } .js-card-slider .splide__arrow::after { content: ""; display: inline-block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: no-repeat center/15px; } .js-card-slider .splide__arrow svg { display: none; } .js-card-slider .splide__arrow--prev::after { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2215%22%20height%3D%2224%22%20viewBox%3D%220%200%2015%2024%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M0.179775%2012.3164C0.123505%2012.2695%200.0782346%2012.2108%200.0471687%2012.1444C0.0161027%2012.0781%200%2012.0057%200%2011.9324C0%2011.8592%200.0161027%2011.7868%200.0471687%2011.7204C0.0782346%2011.6541%200.123505%2011.5954%200.179775%2011.5484L13.8988%200.115934C13.9718%200.05513%2014.0606%200.0163822%2014.1548%200.00422859C14.249%20-0.00792503%2014.3448%200.00701904%2014.4308%200.0473118C14.5169%200.0876045%2014.5896%200.151577%2014.6406%200.231737C14.6916%200.311897%2014.7187%200.404926%2014.7188%200.499933L14.7188%2023.3649C14.7187%2023.4599%2014.6916%2023.553%2014.6406%2023.6331C14.5896%2023.7133%2014.5169%2023.7773%2014.4308%2023.8176C14.3448%2023.8578%2014.249%2023.8728%2014.1548%2023.8606C14.0606%2023.8485%2013.9718%2023.8097%2013.8988%2023.7489L0.179775%2012.3164Z%22%20fill%3D%22%233B3324%22%2F%3E%3C%2Fsvg%3E"); } .js-card-slider .splide__arrow--next::after { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2215%22%20height%3D%2224%22%20viewBox%3D%220%200%2015%2024%22%20fill%3D%22none%22%3E%20%3Cpath%20d%3D%22M14.539%2012.3164C14.5953%2012.2695%2014.6405%2012.2108%2014.6716%2012.1444C14.7027%2012.0781%2014.7188%2012.0057%2014.7188%2011.9324C14.7188%2011.8592%2014.7027%2011.7868%2014.6716%2011.7204C14.6405%2011.6541%2014.5953%2011.5954%2014.539%2011.5484L0.820005%200.115934C0.747005%200.05513%200.658191%200.0163822%200.563964%200.00422859C0.469737%20-0.00792503%200.373999%200.00701904%200.287958%200.0473118C0.201918%200.0876045%200.129138%200.151577%200.0781412%200.231737C0.0271444%200.311897%204.1008e-05%200.404926%205.72205e-06%200.499933L5.72205e-06%2023.3649C4.1008e-05%2023.4599%200.0271444%2023.553%200.0781412%2023.6331C0.129138%2023.7133%200.201918%2023.7773%200.287958%2023.8176C0.373999%2023.8578%200.469737%2023.8728%200.563964%2023.8606C0.658191%2023.8485%200.747005%2023.8097%200.820005%2023.7489L14.539%2012.3164Z%22%20fill%3D%22%233B3324%22%2F%3E%3C%2Fsvg%3E"); } .js-card-slider .splide__pagination { display: flex !important; bottom: inherit; top: calc(100% + 40px); } .js-card-slider .splide__pagination__page { box-sizing: border-box; width: 10px; height: 10px; margin: 0 8px; border: 2px solid var(--color-text); background-color: var(--color-text); opacity: 1; } .js-card-slider .splide__pagination__page.is-active { background-color: transparent; } @media (max-width: 767.98px) { .js-card-slider { margin: auto; } .js-card-slider { width: 68vw; } .js-card-slider .splide__arrow--prev { left: inherit; right: 100%; } .js-card-slider .splide__arrow--next { right: inherit; left: 100%; } } @media (min-width: 768px) { .js-card-slider .splide__arrow::after { background-size: 30px; } .js-card-slider .splide__pagination { position: static; margin-top: 80px; } } @media (min-width: 1240px) { .js-card-slider .splide__arrow--prev { left: -60px; } .js-card-slider .splide__arrow--next { right: -60px; } } /* .l-header ================================================ */ .l-header { --gnav-button-top: 20px; --gnav-button-right: 20px; position: absolute; z-index: 9000; top: 0; left: 0; width: min(100%, 1920px); pointer-events: none; } .l-header.is-open .l-header__logo-link { position: relative; pointer-events: none; } .l-header.is-open .l-header__logo-link::after { content: ""; display: inline-block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(59, 51, 36, 0.4); } .l-header--lower .l-header__logo { padding: 20px 0 0 20px; } .l-header--lower .l-header__logo img { width: 60px; transform: none; background-color: #fff; } .l-header__button { position: fixed; z-index: 9999; top: var(--gnav-button-top); right: calc(var(--gnav-button-right) + var(--viewport-offset)); width: 48px; height: 48px; pointer-events: auto; cursor: pointer; } @media not all and (pointer: coarse) { .l-header__button:hover { opacity: var(--hover-opacity); } } .l-header__button::before, .l-header__button::after { content: ""; box-sizing: border-box; display: inline-block; position: absolute; z-index: -1; width: 100%; height: 100%; border: 2px solid var(--color-text); border-radius: 12px; } .l-header__button::before { top: 3px; left: 4px; background-color: var(--color-main); } .l-header__button::after { top: 0; left: 0; z-index: -1; background-color: #fff; } .l-header__button-line { position: absolute; width: 16px; height: 2px; background-color: var(--color-text); transition: all 0.3s ease-in; } .l-header__button-line:nth-child(1) { top: var(--gnav-line-top, 16px); } .l-header__button-line:nth-child(2) { top: calc(var(--gnav-line-top, 16px) + var(--gnav-line-gap, 6px)); } .l-header__button-line:nth-child(3) { top: calc(var(--gnav-line-top, 16px) + var(--gnav-line-gap, 6px) + var(--gnav-line-gap, 6px)); } .l-header__button.is-open::before { display: none; } .l-header__button.is-open .l-header__button-line:nth-child(1) { top: calc(var(--gnav-line-top, 16px) + var(--gnav-line-gap, 6px)); transform: rotate(-135deg); } .l-header__button.is-open .l-header__button-line:nth-child(2) { opacity: 0; } .l-header__button.is-open .l-header__button-line:nth-child(3) { top: calc(var(--gnav-line-top, 16px) + var(--gnav-line-gap, 6px)); transform: rotate(135deg); } .l-header__logo { box-sizing: border-box; width: fit-content; padding: 26px 0 0 26px; pointer-events: auto; } .l-header__logo img { width: 92px; transform: translateY(var(--wrapper-border-width)); } .l-header__logo-link { width: fit-content; } @media (max-width: 767.98px) { .l-header.is-open::after { border-top-right-radius: 0; border-bottom-left-radius: 0; } .l-header__button-line { left: calc(50% - 8px); } } @media (min-width: 768px) { .l-header { --gnav-button-top: 40px; --gnav-button-right: 40px; --gnav-line-top: 20px; } .l-header--lower { --gnav-button-top: 40px; } .l-header--lower .l-header__logo { padding: 30px 0 0 30px; } .l-header--lower .l-header__logo img { width: 100px; } .l-header__button { box-sizing: border-box; display: flex; align-items: center; width: 129px; height: 56px; padding: 20px; } .l-header__button.is-open::after { border-top-left-radius: 0; border-bottom-right-radius: 0; } .l-header__button-line { right: 22px; width: 20px; } .l-header__button-text { text-box-trim: trim-both; text-box-edge: text; } .l-header__logo { padding: 30px 0 0 50px; } .l-header__logo img { width: 150px; } } .l-header-gnav { position: fixed; top: var(--gnav-button-top); right: calc(var(--gnav-button-right) + var(--viewport-offset)); width: 90%; height: 90vh; border-radius: 12px; opacity: 0; visibility: hidden; pointer-events: auto; overflow-y: auto; scrollbar-color: #bad921 #fff; } .l-header-gnav::-webkit-scrollbar { width: 10px; height: 10px; } .l-header-gnav::-webkit-scrollbar-track { background: #fff; } .l-header-gnav::-webkit-scrollbar-thumb { background: #bad921; } .l-header-gnav.is-open { opacity: 1; visibility: visible; } .l-header-gnav__inner { box-sizing: border-box; position: relative; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 50px; width: 100%; padding: 60px 0; background-color: #fff; border-radius: 12px; border: 2px solid var(--color-text); } .l-header-gnav__link-area { display: flex; flex-direction: column; align-items: center; gap: 40px; } .l-header-gnav__item:not(:last-of-type) { margin-bottom: 30px; } .l-header-gnav__item-text { position: relative; width: fit-content; margin: 0 auto 1em; text-align: center; font-size: clamp(1.2rem, 1.0666666667rem + 0.2777777778vw, 1.6rem); } @supports not (font-size: clamp(12 * 0.1rem, 1.0666666667rem + 0.2777777778vw, 16 * 0.1rem)) { .l-header-gnav__item-text { font-size: 1.2rem; } } .l-header-gnav__item-text::before, .l-header-gnav__item-text::after { content: "/"; display: inline-block; } .l-header-gnav__item-text::before { transform: scaleX(-1); margin-right: 1em; } .l-header-gnav__item-text::after { margin-left: 1em; } .l-header-gnav__link { box-sizing: border-box; display: flex; align-items: center; justify-content: center; } .l-header-gnav__link--external span { position: relative; display: block; } .l-header-gnav__link--external span::after { content: ""; display: inline-block; width: 1em; height: 1em; margin-left: 0.5em; background: no-repeat center/contain; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211%22%20height%3D%2211%22%20viewBox%3D%220%200%2011%2011%22%20fill%3D%22none%22%3E%20%3Cg%20clip-path%3D%22url(%23clip0_167_1149)%22%3E%20%3Cpath%20d%3D%22M0.70697%2010.0958L9.72197%201.08081%22%20stroke%3D%22%233b3324%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%2F%3E%20%3Cpath%20d%3D%22M10.083%206.082L9.15602%206.049L9.32301%201.481L4.75502%201.648L4.72302%200.720997L10.287%200.520996L10.083%206.082Z%22%20stroke%3D%22%233b3324%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E"); } .l-header-gnav__link--banner img { width: min(65%, 400px); margin: auto; } @media (max-width: 767.98px) { .l-header-gnav__logo { width: 50.6vw; } .l-header-gnav__item-text::before, .l-header-gnav__item-text::after { position: absolute; top: calc(50% - 12px); font-size: 2.4rem; } .l-header-gnav__item-text::before { right: 100%; } .l-header-gnav__item-text::after { left: 100%; } } @media (min-width: 768px) { .l-header-gnav { width: fit-content; } .l-header-gnav__inner { width: auto; padding-top: 100px; } .l-header-gnav__logo { width: 180px; } .l-header-gnav__list { width: 400px; } .l-header-gnav__link { font-size: 2rem; } .l-header-gnav__link span { display: block; position: relative; z-index: 2; padding: 12px 0; } .l-header-gnav__link span::before { content: ""; display: inline-block; position: absolute; z-index: -1; top: 50%; left: 50%; transform: translate(-50%, -50%); width: calc(100% + 60px); height: 100%; border-radius: 30px; background-color: #f0ebe3; opacity: 0; transition: opacity 0.3s ease-in; } @media not all and (pointer: coarse) { .l-header-gnav__link:hover span::before { opacity: 1; } } .l-header-gnav__link--banner img { width: 90%; } } /* overlay */ .l-overlay { position: fixed; z-index: 1000; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(59, 51, 36, 0.4); opacity: 0; visibility: hidden; } .l-overlay.is-open { opacity: 1; visibility: visible; } /* .l-footer ================================================ */ .l-footer { background: url(../img/common/bg_footer01_sp.png) no-repeat center/cover; color: #fff; } .l-footer__inner { padding-top: 14.4vw; } .l-footer__inner { padding-bottom: 10.6vw; } .l-footer__text { position: relative; width: fit-content; margin: 0 auto 1em; text-align: center; font-size: clamp(1.2rem, 0.7714285714rem + 0.8928571429vw, 2.2rem); } @supports not (font-size: clamp(12 * 0.1rem, 0.7714285714rem + 0.8928571429vw, 22 * 0.1rem)) { .l-footer__text { font-size: 1.2rem; } } .l-footer__text::before, .l-footer__text::after { content: "/"; display: inline-block; } .l-footer__text::before { transform: scaleX(-1); margin-right: 1em; } .l-footer__text::after { margin-left: 1em; } .l-footer__banner-area { width: 58.1vw; } .l-footer__list { display: grid; grid-gap: 24px; } .l-footer__credit { font-size: clamp(1rem, 0.8666666667rem + 0.2777777778vw, 1.2rem); } .l-footer__credit { padding-bottom: 8vw; } @supports not (font-size: clamp(10 * 0.1rem, 0.8666666667rem + 0.2777777778vw, 12 * 0.1rem)) { .l-footer__credit { font-size: 1rem; } } @media (max-width: 767.98px) { .l-footer__banner-area { margin: auto; } .l-footer__text::before, .l-footer__text::after { position: absolute; top: calc(50% - 12px); font-size: 2.4rem; } .l-footer__text::before { right: 100%; } .l-footer__text::after { left: 100%; } .l-footer__item:not(:first-of-type) img { margin: auto; } .l-footer__item:not(:first-of-type) img { width: 40.5vw; } .l-footer__credit { text-align: center; } } @media (min-width: 768px) { .l-footer { background-image: url(../img/common/bg_footer01_pc.png); } .l-footer__inner { --inner-max-width: 1400px; --inner-padding: 50px; display: grid; grid-template-columns: 45% 1fr; padding-top: 87px; padding-bottom: 20px; } .l-footer__banner-area { align-self: center; width: min(100%, 560px); } .l-footer__list { grid-gap: 30px; } .l-footer__item:first-of-type { grid-column: 1/3; } .l-footer__credit { padding-left: 40px; padding-bottom: 40px; } } @media (min-width: 1200px) { .l-footer__inner { grid-template-columns: 1fr 1fr; } } @media (min-width: 1366px) { .l-footer__inner { grid-template-columns: min(54.285%, 700px) auto; } .l-footer__list { grid-template-columns: 1fr 1fr; grid-gap: 40px; } } /* .l-breadcrumb //================================================ */ .l-breadcrumb { margin-top: 21.3vw; } .l-breadcrumb__list { display: flex; white-space: nowrap; flex-wrap: nowrap; -webkit-overflow-scrolling: touch; overflow: auto; margin: 0 auto 30px; } .l-breadcrumb__list::-webkit-scrollbar { display: none; } .l-breadcrumb__item { display: inline-block; vertical-align: middle; font-size: 1rem; } .l-breadcrumb__item + .l-breadcrumb__item { margin-left: 4px; } .l-breadcrumb__item + .l-breadcrumb__item:before { content: ">"; margin-right: 4px; } .l-breadcrumb__link { text-decoration: underline; } @media not all and (pointer: coarse) { .l-breadcrumb__link:hover { text-decoration: none; } } @media (min-width: 768px) { .l-breadcrumb { margin-top: 100px; } .l-breadcrumb__list { margin-bottom: 40px; } .l-breadcrumb__item { font-size: 1.2rem; } } .l-mainvisual { position: relative; } .l-mainvisual__inner { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; justify-content: center; align-items: center; } .l-mainvisual__copy { margin: auto; } .l-mainvisual__copy { width: 86.6vw; } @media (min-width: 768px) { .l-mainvisual__copy { width: 50vw; } } @media (min-width: 1200px) { .l-mainvisual__copy { width: min(41.66vw, 800px); } } @media (min-width: 768px) and (max-width: 1024px) { .l-mainvisual__slider { aspect-ratio: 4/3; } .l-mainvisual__slider > *:not(.splide__pagination) { height: 100%; } .l-mainvisual__slider img { object-fit: cover; width: 100%; height: 100%; } } .c-button { box-sizing: border-box; position: relative; display: flex; align-items: center; gap: 5px; width: fit-content; margin-top: var(--button-margin-top, 5.3vw); padding: 6px 20px; border: 2px solid var(--color-text); border-radius: 30px; font-size: clamp(1.2rem, 1.05rem + 0.3125vw, 1.4rem); } @supports not (font-size: clamp(12 * 0.1rem, 1.05rem + 0.3125vw, 14 * 0.1rem)) { .c-button { font-size: 1.2rem; } } .c-button::after { content: ""; display: inline-block; width: 9px; height: 9px; background: no-repeat left center/contain; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211%22%20height%3D%2211%22%20viewBox%3D%220%200%2011%2011%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url%28%23clip0_477_6619%29%22%3E%3Cpath%20d%3D%22M0.70697%2010.0958L9.72197%201.08081%22%20stroke%3D%22%233B3324%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%2F%3E%3Cpath%20d%3D%22M10.083%206.082L9.15602%206.049L9.32301%201.481L4.75502%201.648L4.72302%200.720997L10.287%200.520996L10.083%206.082Z%22%20fill%3D%22%233B3324%22%20stroke%3D%22%233B3324%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_477_6619%22%3E%3Crect%20width%3D%2210.805%22%20height%3D%2210.804%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E"); transition: all 0.3s ease-in; } @media not all and (pointer: coarse) { .c-button:hover { background-color: var(--color-text); color: #fff; } .c-button:hover::after { background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2211%22%20height%3D%2211%22%20viewBox%3D%220%200%2011%2011%22%20fill%3D%22none%22%3E%3Cg%20clip-path%3D%22url%28%23clip0_477_6619%29%22%3E%3Cpath%20d%3D%22M0.70697%2010.0958L9.72197%201.08081%22%20stroke%3D%22white%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%2F%3E%3Cpath%20d%3D%22M10.083%206.082L9.15602%206.049L9.32301%201.481L4.75502%201.648L4.72302%200.720997L10.287%200.520996L10.083%206.082Z%22%20fill%3D%22white%22%20stroke%3D%22white%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_477_6619%22%3E%3Crect%20width%3D%2210.805%22%20height%3D%2210.804%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E"); } } .c-button--center { --button-margin-top: 50px; margin-left: auto; margin-right: auto; } .c-button--has-no-icon::after { display: none; } @media (min-width: 768px) { .c-button { --button-margin-top: 20px; padding: 6px 20px; } .c-button::after { width: 11px; height: 11px; } .c-button--large { justify-content: center; width: 424px; padding: 7px 20px; font-size: 1.8rem; } } .c-card:not(.c-card--slider) .c-card__item:nth-of-type(n + 3) { display: none !important; } .c-card__item.is-new { position: relative; } .c-card__item.is-new::before { content: ""; display: inline-block; position: absolute; z-index: 10; top: -20px; left: -10px; width: 60px; height: 60px; background: url(../img/common/ico_new.png) no-repeat 0 0/contain; transition: opacity 0.3s ease-in; } @media not all and (pointer: coarse) { .c-card__item:hover::before { opacity: var(--hover-opacity); } } .c-card__image { margin-bottom: 12px; } .c-card__date, .c-card__meta, .c-card__title { color: #707070; font-size: clamp(1.1rem, 0.725rem + 0.78125vw, 1.6rem); } @supports not (font-size: clamp(11 * 0.1rem, 0.725rem + 0.78125vw, 16 * 0.1rem)) { .c-card__date, .c-card__meta, .c-card__title { font-size: 1.1rem; } } .c-card__head { font-size: clamp(1.4rem, 0.95rem + 0.9375vw, 2rem); } @supports not (font-size: clamp(14 * 0.1rem, 0.95rem + 0.9375vw, 20 * 0.1rem)) { .c-card__head { font-size: 1.4rem; } } .c-card__head { overflow: hidden; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; } .c-card__meta { margin-top: 16px; padding-top: 12px; border-top: 1px dotted; } @media (max-width: 767.98px) { .c-card--lower { display: grid; margin: auto; } .c-card--lower { width: 68vw; } .c-card--lower { grid-gap: 21.3vw; } } @media (min-width: 768px) { .c-card { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 80px; width: fit-content; margin: auto; } .c-card--urarie .c-card__item { max-width: 320px; } .c-card--slider { grid-gap: 0; } .c-card__item { max-width: 352px; } .c-card__item.is-new::before { top: -30px; width: 80px; height: 80px; } .c-card__image { margin-bottom: 20px; } .c-card__meta { margin-top: 20px; padding-top: 16px; } } @media (min-width: 1200px) { .c-card { grid-template-columns: repeat(3, 1fr); grid-gap: 80px 32px; } .c-card--urarie { grid-template-columns: repeat(4, 1fr); } .c-card--urarie .c-card__item { max-width: 256px; } .c-card:not(.c-card--slider) .c-card__item:nth-of-type(n + 3) { display: block !important; } .c-card--slider { gap: 0; } } .c-single[data-article=article01] .c-single__image-area--01, .c-single[data-article=article01] .c-single__image-area--02 { position: relative; } .c-single[data-article=article01] .c-single__image-area--01::after, .c-single[data-article=article01] .c-single__image-area--02::after { content: ""; display: inline-block; background: no-repeat center/contain; } @media (max-width: 767.98px) { .c-single[data-article=article01] .c-single__image-area--01::after { margin-left: auto; background-image: url(../img/urarie/article01/img_urarie01_sp.png); } .c-single[data-article=article01] .c-single__image-area--01::after { width: 51.4vw; } .c-single[data-article=article01] .c-single__image-area--01::after { height: 45.3vw; } .c-single[data-article=article01] .c-single__image-area--02 { padding-bottom: 23.4vw; } .c-single[data-article=article01] .c-single__image-area--02::after { position: absolute; background-image: url(../img/urarie/article01/img_urarie02_sp.png); } .c-single[data-article=article01] .c-single__image-area--02::after { bottom: -5.4vw; } .c-single[data-article=article01] .c-single__image-area--02::after { left: -6.4vw; } .c-single[data-article=article01] .c-single__image-area--02::after { width: 40.2vw; } .c-single[data-article=article01] .c-single__image-area--02::after { height: 42.6vw; } } @media (min-width: 768px) { .c-single[data-article=article01] .c-single__image-area--01::after { position: absolute; right: -85px; bottom: -200px; width: 261px; height: 446px; background-image: url(../img/urarie/article01/img_urarie01_pc.png); } .c-single[data-article=article01] .c-single__image-area--02::after { position: absolute; left: -98px; bottom: -60px; width: 311px; height: 406px; background-image: url(../img/urarie/article01/img_urarie02_pc.png); } } .c-single { padding-top: 100px; } .c-single--urarie .c-single__head { font-size: clamp(2.6rem, 1.55rem + 2.1875vw, 4rem); } @supports not (font-size: clamp(26 * 0.1rem, 1.55rem + 2.1875vw, 40 * 0.1rem)) { .c-single--urarie .c-single__head { font-size: 2.6rem; } } .c-single__header { margin-top: -13.4vw; } .c-single__header { margin-bottom: 16vw; } .c-single__date { display: inline-block; margin-bottom: -0.2em; padding: 4px 8px 6px; background-color: #fff; color: #707070; font-size: clamp(1.1rem, 0.725rem + 0.78125vw, 1.6rem); } @supports not (font-size: clamp(11 * 0.1rem, 0.725rem + 0.78125vw, 16 * 0.1rem)) { .c-single__date { font-size: 1.1rem; } } .c-single__head { font-size: clamp(2rem, 1.1rem + 1.875vw, 3.2rem); } .c-single__head { margin-bottom: 7.4vw; } @supports not (font-size: clamp(20 * 0.1rem, 1.1rem + 1.875vw, 32 * 0.1rem)) { .c-single__head { font-size: 2rem; } } .c-single__head span { box-sizing: border-box; display: inline-block; padding: 4px 8px; line-height: 1.5; background-color: #fff; } .c-single__head span:not(:first-of-type) { transform: translateY(-0.2em); } .c-single__info { display: grid; grid-template-columns: 22.4vw 1fr; grid-gap: 8vw 5.33vw; } .c-single__info { margin-bottom: 8vw; } .c-single__info-head { grid-column: 1/3; margin-bottom: 0; } .c-single__info-text h3 { font-size: clamp(1.2rem, 0.9rem + 0.625vw, 1.6rem); } .c-single__info-text h3 { margin-bottom: 2.6vw; } @supports not (font-size: clamp(12 * 0.1rem, 0.9rem + 0.625vw, 16 * 0.1rem)) { .c-single__info-text h3 { font-size: 1.2rem; } } .c-single__info-text p { font-weight: 400; font-size: clamp(1.2rem, 1.05rem + 0.3125vw, 1.4rem); } @supports not (font-size: clamp(12 * 0.1rem, 1.05rem + 0.3125vw, 14 * 0.1rem)) { .c-single__info-text p { font-size: 1.2rem; } } .c-single__floorplan { box-sizing: border-box; padding: 8vw 5.33vw; background-color: #f0ebe3; } .c-single__floorplan { margin-bottom: 16vw; } .c-single__floorplan-head { font-size: clamp(1.4rem, 0.95rem + 0.9375vw, 2rem); } .c-single__floorplan-head { margin-bottom: 5.3vw; } @supports not (font-size: clamp(14 * 0.1rem, 0.95rem + 0.9375vw, 20 * 0.1rem)) { .c-single__floorplan-head { font-size: 1.4rem; } } .c-single__floorplan-image { position: relative; } .c-single__floorplan-image { margin-bottom: 5.3vw; } .c-single__floorplan-image::after { content: ""; display: inline-block; position: absolute; right: 0; bottom: 0; width: 26px; height: 26px; background: url(../img/common/ico_lupe.png) no-repeat center/contain; } .c-single__floorplan-note { box-sizing: border-box; width: fit-content; padding: 8px 20px; border: 1px dotted; font-weight: 400; font-size: clamp(1.2rem, 1.05rem + 0.3125vw, 1.4rem); } @supports not (font-size: clamp(12 * 0.1rem, 1.05rem + 0.3125vw, 14 * 0.1rem)) { .c-single__floorplan-note { font-size: 1.2rem; } } .c-single__image-area { display: grid; } .c-single__image-area { gap: 7.4vw; } .c-single__image-area { margin-top: 10.6vw; } .c-single__image-area figure { margin-top: 0 !important; } .c-single__profile { box-sizing: border-box; display: grid; grid-template-columns: 13.33vw 1fr; grid-gap: 4vw; border-radius: 4px; background-color: #f0ebe3; } .c-single__profile { margin-top: 8vw; } .c-single__profile { padding: 4.2vw; } .c-single__profile-image { grid-column: 1; grid-row: 1/3; } .c-single__profile-text, .c-single__profile-button { grid-column: 2; } .c-single__profile-text h3 { font-weight: 600; font-size: clamp(1.4rem, 0.95rem + 0.9375vw, 2rem); } @supports not (font-size: clamp(14 * 0.1rem, 0.95rem + 0.9375vw, 20 * 0.1rem)) { .c-single__profile-text h3 { font-size: 1.4rem; } } .c-single__profile-text p { display: inline-flex; align-items: center; gap: 0.4em; color: #707070; font-size: clamp(1rem, 0.7rem + 0.625vw, 1.4rem); } @supports not (font-size: clamp(10 * 0.1rem, 0.7rem + 0.625vw, 14 * 0.1rem)) { .c-single__profile-text p { font-size: 1rem; } } .c-single__profile-text p i, .c-single__profile-text p svg { width: 1.2em; height: 1.2em; } .c-single__shop { box-sizing: border-box; padding: 9.6vw 5.33vw; border: 2px solid; } .c-single__shop-image { margin: 0 auto 8vw; } .c-single__shop-image { width: 52.2vw; } .c-single__shop-text h3 { font-weight: 600; font-size: clamp(1.4rem, 0.95rem + 0.9375vw, 2rem); } .c-single__shop-text h3 { margin-bottom: 4.2vw; } @supports not (font-size: clamp(14 * 0.1rem, 0.95rem + 0.9375vw, 20 * 0.1rem)) { .c-single__shop-text h3 { font-size: 1.4rem; } } .c-single__shop-text dl { display: grid; grid-template-columns: auto 1fr; font-size: clamp(1.2rem, 1.05rem + 0.3125vw, 1.4rem); } .c-single__shop-text dl { grid-column-gap: 4.2vw; } @supports not (font-size: clamp(12 * 0.1rem, 1.05rem + 0.3125vw, 14 * 0.1rem)) { .c-single__shop-text dl { font-size: 1.2rem; } } .c-single__shop-text dl dt, .c-single__shop-text dl dd { box-sizing: border-box; padding: 8px; border-bottom: 1px dotted; } .c-single__shop-text dl dt { font-weight: 600; } .c-single__shop-text dl dd { font-weight: 400; } @media (max-width: 767.98px) { .c-single__eyecatch { margin-inline: calc(50% - 50vw); } .c-single__header { margin-left: auto; margin-right: auto; } .c-single__header { width: 82.9vw; } } @media (min-width: 768px) { .c-single { padding-top: 150px; } .c-single--urarie .c-single__header { margin-top: -114px; margin-bottom: 0; } .c-single__header { width: min(90%, 800px); margin: -75px auto 96px; } .c-single__date { padding: 4px 10px; } .c-single__head { margin-bottom: 40px; } .c-single__head span { padding: 5px 10px; } .c-single__info { grid-template-columns: 120px 1fr; grid-gap: 30px 40px; max-width: 800px; margin: 0 auto 60px; } .c-single__info-text h3 { margin-bottom: 16px; } .c-single__floorplan { margin-bottom: 100px; padding: 5% 6.25%; } .c-single__floorplan-head, .c-single__floorplan-image { margin-bottom: 30px; } .c-single__floorplan-image::after { width: 37px; height: 37px; } .c-single__floorplan-note { padding: 10px 24px; } .c-single__image-area { gap: 40px; margin-top: 60px; } .c-single__image-area--row { width: min(100%, 800px); margin-left: auto; margin-right: auto; } .c-single__profile { grid-template-columns: 60px 1fr 130px; grid-column-gap: 23px; width: min(76%, 608px); margin: 60px auto 0; padding: 24px 40px; } .c-single__profile-image { grid-row: 1; } .c-single__profile-button { grid-column: 3; align-self: center; } .c-single__shop { display: grid; grid-template-columns: 25% 1fr; grid-column-gap: min(5.35%, 60px); padding: min(4.43%, 50px) min(5.35%, 60px); border-width: 4px; } .c-single__shop-image { width: 100%; margin-bottom: 0; } .c-single__shop-text h3 { margin-bottom: 24px; } .c-single__shop-text dl dt, .c-single__shop-text dl dd { padding: 10px; } .c-single__pc-spacer { display: inline-block; width: 1em; } } @media (min-width: 900px) { .c-single__image-area:not(.c-single__image-area--row) { grid-template-columns: 1fr 1fr; max-width: 920px; margin-left: auto; margin-right: auto; } .c-single__image-area:not(.c-single__image-area--row) figure:first-of-type { padding-top: 60px; } } /* article */ .c-single__content section:not([class]) { border-bottom: 1px dotted; font-size: clamp(1.3rem, 0.925rem + 0.78125vw, 1.8rem); } .c-single__content section:not([class]) { padding-top: 8vw; } .c-single__content section:not([class]) { padding-bottom: 10.6vw; } @supports not (font-size: clamp(13 * 0.1rem, 0.925rem + 0.78125vw, 18 * 0.1rem)) { .c-single__content section:not([class]) { font-size: 1.3rem; } } .c-single__content h2 { line-height: 2; font-weight: 600; font-size: clamp(1.8rem, 1.35rem + 0.9375vw, 2.4rem); } .c-single__content h2 { margin-bottom: 5.3vw; } @supports not (font-size: clamp(18 * 0.1rem, 1.35rem + 0.9375vw, 24 * 0.1rem)) { .c-single__content h2 { font-size: 1.8rem; } } .c-single__content h2 span { display: inline-block; border-bottom: 6px solid var(--color-main); } .c-single__content p { font-weight: 400; } .c-single__content p + p { margin-top: 1.6em; } .c-single__content figure { display: block; } .c-single__content figure { margin-top: 10.6vw; } .c-single__content figure figcaption { margin-top: 10px; font-weight: 400; font-size: clamp(1.2rem, 0.9rem + 0.625vw, 1.6rem); } @supports not (font-size: clamp(12 * 0.1rem, 0.9rem + 0.625vw, 16 * 0.1rem)) { .c-single__content figure figcaption { font-size: 1.2rem; } } @media (min-width: 768px) { .c-single__content section:not([class]) { padding-top: 100px; padding-bottom: 100px; } .c-single__content section:not([class]) > *:not(.c-single__image-area) { max-width: 800px; margin-left: auto; margin-right: auto; } .c-single__content h2 { margin-bottom: 16px; } .c-single__content h2 span { border-bottom-width: 8px; } .c-single__content figure { width: var(--single-image-max-width, 100%); margin: 60px auto 0; } } /* pager */ .c-single__pager { display: grid; grid-template-columns: 1fr 1fr; place-items: center; grid-row-gap: 30px; } .c-single__pager { margin-top: 16vw; } .c-single__pager-link { display: flex; justify-content: center; align-items: center; } @media not all and (pointer: coarse) { .c-single__pager-link:hover { background-color: var(--color-text); color: #fff; } } .c-single__pager-link.is-disabled { color: #999; pointer-events: none; } .c-single__pager-link--previous, .c-single__pager-link--next { gap: 10px; } .c-single__pager-link--previous { justify-self: end; position: relative; padding-right: 19px; } .c-single__pager-link--previous::after { content: ""; display: inline-block; position: absolute; top: 50%; right: 0; transform: translateY(-50%); width: 1px; height: 1em; background-color: var(--color-text); } .c-single__pager-link--next { justify-self: start; padding-left: 19px; } .c-single__pager-link--top { grid-column: 1/3; padding: 6px 20px; border: 2px solid; border-radius: 30px; } .c-single__pager-icon { display: inline-flex; align-items: center; } @media (min-width: 768px) { .c-single__pager { grid-row-gap: 50px; margin-top: 100px; } .c-single__pager-link { font-size: 1.8rem; } .c-single__pager-link--previous, .c-single__pager-link--next { gap: 16px; } .c-single__pager-link--previous { padding-right: 29px; } .c-single__pager-link--next { padding-left: 29px; } .c-single__pager-link--top { padding: 7px 24px; } } .c-support-list { display: flex; flex-direction: column; } .c-support-list { gap: 10.6vw; } .c-support-list__link { position: relative; box-sizing: border-box; display: block; padding-top: 40px; border: 3px solid var(--color-text); background-color: #fff; } .c-support-list__label { position: absolute; top: 0; left: 0; padding: 0 14px; background-color: var(--color-text); border-bottom-right-radius: 16px; color: #fff; font-size: clamp(1.1rem, 0.2666666667rem + 1.7361111111vw, 1.6rem); } @supports not (font-size: clamp(11 * 0.1rem, 0.2666666667rem + 1.7361111111vw, 16 * 0.1rem)) { .c-support-list__label { font-size: 1.1rem; } } .c-support-list__name { box-sizing: border-box; margin-bottom: 16px; padding: 0 30px; font-size: clamp(2.4rem, 1.0666666667rem + 2.7777777778vw, 3.2rem); } @supports not (font-size: clamp(24 * 0.1rem, 1.0666666667rem + 2.7777777778vw, 32 * 0.1rem)) { .c-support-list__name { font-size: 2.4rem; } } .c-support-list__name small { display: block; font-size: clamp(1.6rem, 0.2666666667rem + 2.7777777778vw, 2.4rem); } @supports not (font-size: clamp(16 * 0.1rem, 0.2666666667rem + 2.7777777778vw, 24 * 0.1rem)) { .c-support-list__name small { font-size: 1.6rem; } } .c-support-list__more { box-sizing: border-box; position: relative; display: inline-flex; align-items: center; gap: 8px; margin-bottom: 22px; padding: 0 30px 8px; line-height: 1.1; font-size: clamp(1.2rem, 0.8666666667rem + 0.6944444444vw, 1.4rem); } @supports not (font-size: clamp(12 * 0.1rem, 0.8666666667rem + 0.6944444444vw, 14 * 0.1rem)) { .c-support-list__more { font-size: 1.2rem; } } .c-support-list__more::before { content: ""; display: inline-block; position: absolute; top: 100%; left: 30px; width: 102px; height: 2px; background-color: var(--color-text); } .c-support-list__more::after { content: ""; display: inline-block; width: 9px; height: 9px; background: no-repeat left center/contain; background-image: url("data:image/svg+xml;charset=utf8,%3Csvg%20width%3D%2211%22%20height%3D%2211%22%20viewBox%3D%220%200%2011%2011%22%20fill%3D%22none%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%3Cg%20clip-path%3D%22url(%23clip0_409_4512)%22%3E%3Cpath%20d%3D%22M0.707031%2010.0958L9.72203%201.08081%22%20stroke%3D%22%233B3324%22%20stroke-width%3D%222%22%20stroke-miterlimit%3D%2210%22%2F%3E%3Cpath%20d%3D%22M10.0827%206.082L9.15565%206.049L9.32265%201.481L4.75465%201.648L4.72266%200.720997L10.2867%200.520996L10.0827%206.082Z%22%20fill%3D%22white%22%20stroke%3D%22%233B3324%22%2F%3E%3C%2Fg%3E%3Cdefs%3E%3CclipPath%20id%3D%22clip0_409_4512%22%3E%3Crect%20width%3D%2210.805%22%20height%3D%2210.804%22%20fill%3D%22white%22%2F%3E%3C%2FclipPath%3E%3C%2Fdefs%3E%3C%2Fsvg%3E"); } .c-support-list__text { box-sizing: border-box; padding: 5.33vw 8vw; background-color: #f0ebe3; } @media (max-width: 767.98px) { .c-support-list { margin: auto; } .c-support-list { width: 68vw; } .c-support-list__item { width: min(100%, 352px); margin: auto; } } @media (min-width: 768px) { .c-support-list { flex-wrap: wrap; flex-direction: row; justify-content: center; gap: 32px; } .c-support-list__item { width: 352px; } .c-support-list__link { padding-top: 60px; } .c-support-list__name { margin-bottom: 20px; padding: 0 40px; } .c-support-list__name img { max-width: 237px; } .c-support-list__more { margin-bottom: 33px; padding: 0 40px 10px; } .c-support-list__more::before { left: 40px; width: 120px; } .c-support-list__more::after { width: 11px; height: 11px; } .c-support-list__text { padding: 30px 40px; } } /* ------------------------------ Device-only Break Classes 主にbrで使用することを想定その場合、ソースコードはbrの後ろで改行しないこと（改行すると不要なスペースが入る）使用例：

吾輩は
猫である

------------------------------ */ @media (max-width: 767.98px) { .u-only-sp { display: block; } } @media (min-width: 768px) { .u-only-sp { display: none !important; } } @media (max-width: 767.98px) { .u-only-pc { display: none !important; } } @media (min-width: 768px) { .u-only-pc { display: block; } } /* ------------------------------ Link ------------------------------ */ .u-link { display: block; } @media not all and (pointer: coarse) { .u-link:hover { opacity: var(--hover-opacity); } } .u-zoom { transition: transform 0.3s ease-in; } @media not all and (pointer: coarse) { .u-zoom:hover { transform: scale(1.1) rotateZ(0.03deg); } } a:has(> .u-zoom) { display: block; overflow: hidden; } /* ------------------------------ Layout ------------------------------ */ .u-inner { box-sizing: border-box; width: 100%; padding-left: var(--inner-padding); padding-right: var(--inner-padding); } @media (min-width: 768px) { .u-inner { max-width: var(--inner-max-width, 1120px); margin: auto; } } @media (min-width: 1280px) { .u-inner { padding-left: 0; padding-right: 0; } } .u-bg-yellow { background-color: #fffeee; } /* ------------------------------ Font ------------------------------ */ .u-uppercase { text-transform: uppercase; } .u-capitalize { text-transform: capitalize; } .u-font-roboto { font-family: "Roboto", sans-serif; font-optical-sizing: auto; font-weight: 600; font-style: normal; } /* home-intro */ .home-intro__inner { position: relative; text-align: center; } .home-intro__inner { padding-top: 18.6vw; } .home-intro__inner { padding-bottom: 83.2vw; } .home-intro__inner::before { content: ""; position: absolute; display: inline-block; top: 0; left: 0; width: 148px; height: 47px; background: url(../img/home/bg_light.png) no-repeat 0 0/contain; } .home-intro__lead { line-height: 2; font-size: clamp(1.6rem, 1rem + 1.25vw, 2.4rem); } .home-intro__lead { margin-bottom: 18.6vw; } @supports not (font-size: clamp(16 * 0.1rem, 1rem + 1.25vw, 24 * 0.1rem)) { .home-intro__lead { font-size: 1.6rem; } } .home-intro__lead span { position: relative; display: inline-block; margin-top: 0.5em; padding-bottom: 0.25em; } .home-intro__lead span::after { content: ""; display: inline-block; position: absolute; top: 100%; left: 0; width: 100%; height: 1px; background-color: var(--color-text); } .home-intro__head { position: relative; width: fit-content; margin-left: auto; margin-right: auto; line-height: 1.5; text-box-trim: trim-both; text-box-edge: text; font-size: clamp(4rem, 2.8rem + 2.5vw, 5.6rem); } .home-intro__head { margin-bottom: 8vw; } @supports not (font-size: clamp(40 * 0.1rem, 2.8rem + 2.5vw, 56 * 0.1rem)) { .home-intro__head { font-size: 4rem; } } .home-intro__head::before { content: ""; display: inline-block; position: absolute; top: -30px; left: -53px; width: 83px; height: 51px; background: url(../img/home/txt_enjoy.png) no-repeat 0 0/contain; } .home-intro__text-area { position: relative; margin: auto; font-size: clamp(1.4rem, 0.95rem + 0.9375vw, 2rem); } .home-intro__text-area { width: 66.6vw; } @supports not (font-size: clamp(14 * 0.1rem, 0.95rem + 0.9375vw, 20 * 0.1rem)) { .home-intro__text-area { font-size: 1.4rem; } } .home-intro__text-area::before, .home-intro__text-area::after { content: ""; display: inline-block; position: absolute; background: no-repeat 0 0/contain; } .home-intro__text-area::before { top: calc(100% + 61px); left: -19px; width: 146px; height: 124px; background-image: url(../img/home/img_person.png); } .home-intro__text-area::after { top: calc(100% + 65px); right: -11px; width: 129px; height: 191px; background-image: url(../img/home/img_chair.png); } @media (min-width: 480px) { .home-intro__inner { padding-bottom: 360px; } } @media (min-width: 768px) { .home-intro__inner { padding-top: 100px; } .home-intro__inner::before { width: 234px; height: 80px; } .home-intro__lead { margin-bottom: 100px; } .home-intro__head, .home-intro__text-area { width: 605px; } .home-intro__head { margin-bottom: 40px; } .home-intro__head::before { top: -28px; left: -24px; width: 163px; height: 92px; } .home-intro__text-area { width: 700px; } .home-intro__text-area::before { width: 206px; height: 174px; } .home-intro__text-area::after { width: 195px; height: 288px; } } @media (min-width: 1024px) { .home-intro__inner { padding-bottom: clamp(100px, 180px - 80 * (100vw - 1024px) / 176, 180px); } .home-intro__text-area::before { top: 87px; left: inherit; right: 100%; } .home-intro__text-area::after { top: inherit; bottom: 43px; right: inherit; left: 100%; } } @media (min-width: 1200px) { .home-intro__text-area::before { right: calc(100% + 101px); } .home-intro__text-area::after { left: calc(100% + 97px); } } /* home-merit */ .home-merit { position: relative; } .home-merit::after { content: ""; display: inline-block; position: absolute; right: 28px; bottom: -49px; width: 298px; height: 117px; background: url(../img/home/img_girl.png) no-repeat 0 0/contain; } .home-merit__inner { padding-top: 18.6vw; } .home-merit__inner { padding-bottom: 32vw; } .home-merit__head { margin-bottom: 16vw; } .home-merit__head img { margin: auto; } .home-merit__head img { width: 62.6vw; } .home-merit__list { display: grid; } .home-merit__list { grid-gap: 10.6vw; } .home-merit__item { position: relative; box-sizing: border-box; padding: 9.6vw; border: 3px solid var(--color-text); background: #fff; } .home-merit__subhead { position: relative; line-height: 1.5; text-align: center; padding-bottom: 1em; font-size: clamp(1.6rem, 1.0666666667rem + 1.1111111111vw, 2.4rem); } .home-merit__subhead { margin-bottom: 5.3vw; } @supports not (font-size: clamp(16 * 0.1rem, 1.0666666667rem + 1.1111111111vw, 24 * 0.1rem)) { .home-merit__subhead { font-size: 1.6rem; } } .home-merit__subhead em { font-size: clamp(2.4rem, 1.8666666667rem + 1.1111111111vw, 3.2rem); } @supports not (font-size: clamp(24 * 0.1rem, 1.8666666667rem + 1.1111111111vw, 32 * 0.1rem)) { .home-merit__subhead em { font-size: 2.4rem; } } .home-merit__subhead::after { content: ""; display: inline-block; position: absolute; top: 100%; left: 0; width: 100%; height: 3px; background-color: var(--color-text); } .home-merit__number { position: absolute; top: -23px; left: 50%; transform: translateX(-50%); display: inline-flex; justify-content: center; align-items: center; height: 40px; padding: 0 0.25em; background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 50%, rgb(255, 255, 255) 50%, rgb(255, 255, 255) 100%); font-size: 4rem; text-box-trim: trim-both; text-box-edge: text; } .home-merit__text { font-size: clamp(1.2rem, 0.9rem + 0.625vw, 1.6rem); } @supports not (font-size: clamp(12 * 0.1rem, 0.9rem + 0.625vw, 16 * 0.1rem)) { .home-merit__text { font-size: 1.2rem; } } .home-merit__button-area { margin-top: 45px; } .home-merit__button { justify-content: center; width: 100%; } @media (min-width: 768px) { .home-merit::after { right: 0; bottom: -64px; width: 418px; height: 164px; } .home-merit__inner { padding-top: 100px; padding-bottom: 180px; } .home-merit__head { margin-bottom: 80px; } .home-merit__head img { width: 337px; } .home-merit__list { grid-gap: 80px 40px; } .home-merit__item { padding: 40px; } .home-merit__number { font-size: 5.6rem; } .home-merit__subhead { margin-bottom: 24px; } .home-merit__button-area { display: flex; flex-wrap: wrap; justify-content: center; gap: 30px; margin-top: 90px; } .home-merit__button { --button-margin-top: 0; width: 345px; font-size: 1.4rem; } } @media (min-width: 1024px) { .home-merit__list { grid-template-columns: 1fr 1fr; } .home-merit__item { padding: clamp(30px, 30px + 30 * (100vw - 1024px) / 176, 60px); } } /* home-case */ .home-case { position: relative; } .home-case::before { content: ""; display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 234.66vw; height: 178.66vw; background-color: #f0ebe3; clip-path: ellipse(50% 50% at 50% 50%); } .home-case__inner { position: relative; z-index: 2; } .home-case__inner { padding-top: 18.6vw; } .home-case__inner { padding-bottom: 18.6vw; } .home-case__head { position: relative; line-height: 1.5; text-align: center; } .home-case__head { margin-bottom: 10.6vw; } .home-case__head::after { content: ""; display: inline-block; position: absolute; top: 50%; transform: translateY(-50%); background: url(../img/home/img_compass.png) no-repeat center/contain; } .home-case__head::after { right: 10.9vw; } .home-case__head::after { width: 10.6vw; } .home-case__head::after { height: 21.3vw; } .home-case__head img { margin: auto; } .home-case__head img { width: 48.5vw; } @media (min-width: 768px) { .home-case::before { width: 200vw; height: 100%; } .home-case__inner { max-width: 1120px; margin: auto; padding-top: 150px; padding-bottom: 150px; } .home-case__head { width: fit-content; margin: 0 auto 80px; } .home-case__head::after { top: inherit; bottom: -10px; right: inherit; left: calc(75.53% + 20px); transform: none; width: 62px; height: 123px; } .home-case__head img { width: min(51.07%, 572px); margin: auto; } } @media (min-width: 1280px) { .home-case::before { width: 125vw; aspect-ratio: 24/10; } } @media (min-width: 1366px) { .home-case::after { content: ""; display: inline-block; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 1920px; height: 1000px; background: url(../img/home/bg_case01.png) no-repeat center/contain; } } /* home-report */ .home-report__inner { padding-top: 18.6vw; } .home-report__inner { padding-bottom: 32vw; } .home-report__head { margin-bottom: 10.6vw; } .home-report__head img { margin: auto; } .home-report__head img { width: 68vw; } @media (min-width: 768px) { .home-report__inner { padding-top: 160px; padding-bottom: 160px; } .home-report__head { margin-bottom: 80px; } .home-report__head img { width: 384px; } } @media (min-width: 768px) and (max-width: 1365.98px) { .home-report__inner { --inner-padding: 0; } } /* home-support */ .home-support__inner { padding-top: 18.6vw; } .home-support__inner { padding-bottom: 18.6vw; } .home-support__head { line-height: 1.5; text-align: center; font-size: clamp(3.2rem, 2rem + 2.5vw, 4.8rem); } .home-support__head { margin-bottom: 13.3vw; } @supports not (font-size: clamp(32 * 0.1rem, 2rem + 2.5vw, 48 * 0.1rem)) { .home-support__head { font-size: 3.2rem; } } @media (min-width: 768px) { .home-support__inner { padding-top: 120px; padding-bottom: 160px; } .home-support__head { margin-bottom: 80px; } } /* p-senpai */ .p-senpai--lower .p-senpai__inner { padding-top: 26.6vw; } .p-senpai--lower .p-senpai__inner { padding-bottom: 26.6vw; } .p-senpai--lower .p-senpai__head { margin-bottom: 18.6vw; } .p-senpai__inner { padding-top: 18.6vw; } .p-senpai__inner { padding-bottom: 18.6vw; } .p-senpai__head { margin-bottom: 13.3vw; } @media (min-width: 768px) { .p-senpai--lower .p-senpai__inner { padding-top: 160px; padding-bottom: 160px; } .p-senpai--lower .p-senpai__head { margin-bottom: 100px; } .p-senpai__inner { padding-top: 160px; padding-bottom: 160px; } .p-senpai__head { margin-bottom: 80px; } .p-senpai__head img { width: min(59.1%, 662px); margin: auto; } } /* p-urarie */ .p-urarie--lower .p-urarie__inner { padding-top: 26.6vw; } .p-urarie--lower .p-urarie__inner { padding-bottom: 26.6vw; } .p-urarie__inner { padding-bottom: 32vw; } .p-urarie__head { margin-bottom: 10.6vw; } @media (max-width: 767.98px) { .p-urarie__head { margin-inline: calc(50% - 50vw); } } @media (min-width: 768px) { .p-urarie--lower .p-urarie__inner { padding-top: 160px; padding-bottom: 160px; } .p-urarie__inner { padding-bottom: 160px; } .p-urarie__head { margin-bottom: 40px; } .p-urarie__head img { width: min(62.5%, 700px); margin: auto; } }