@charset "UTF-8"; /* * base */ @import url("https://fonts.googleapis.com/css2?family=Zen+Old+Mincho&display=swap"); /* * variable */ /* * function */ /*** The new CSS reset - version 1.11.3 (last updated 25.08.2024) GitHub page: https://github.com/elad2412/the-new-css-reset ***/ /* Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug - The "html" element is excluded, otherwise a bug in Chrome breaks the CSS hyphens property (https://github.com/elad2412/the-new-css-reset/issues/36) */ *:where(:not(html, iframe, canvas, img, svg, video, audio):not(svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Fix mobile Safari increase font-size on landscape mode */ html { -moz-text-size-adjust: none; -webkit-text-size-adjust: none; text-size-adjust: none; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu, summary { list-style: none; } /* Firefox: solve issue where nested ordered lists continue numbering from parent (https://bugzilla.mozilla.org/show_bug.cgi?id=1881517) */ ol { counter-reset: revert; } /* For images to not be able to exceed their container */ img { max-inline-size: 100%; max-block-size: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; } /* revert the 'white-space' property for textarea elements on Safari */ textarea { white-space: revert; } /* minimum style to allow to style meter element */ meter { -webkit-appearance: revert; appearance: revert; } /* preformatted text - use only for this feature */ :where(pre) { all: revert; box-sizing: border-box; } /* reset default text opacity of input placeholder */ ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* 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; } body { margin: 0; padding: 0; position: relative; font-optical-sizing: auto; font-family: "Zen Old Mincho", serif; color: #1A1311; font-size: 100%; font-weight: 400; -webkit-text-size-adjust: 100%; word-break: break-word; } a { text-decoration: none; } a:hover { text-decoration: inherit; } img { vertical-align: bottom; } b { font-weight: bold; } /* * header */ @keyframes headerMoveSp { 0% { height: 100svh; } 100% { height: 120px; } } @keyframes headerMovePc { 0% { height: 100svh; } 100% { height: 279px; } } @keyframes logoMoveSp { 0% { transform: translateY(0); } 100% { transform: translateY(10px); } } @keyframes logoMovePc { 0% { transform: translateY(0); } 100% { transform: translateY(30px); } } .p-header { padding: 22px; } .p-header .l-container { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-items: flex-start; justify-content: flex-start; align-content: center; justify-content: center; height: 100svh; animation: headerMoveSp 0.8s ease-out 0.8s normal forwards; } @media screen and (min-width: 786px) { .p-header .l-container { animation: headerMovePc 0.8s ease-out 0.8s normal forwards; } } .p-header .c-siteLogo { width: 944px; height: 56px; transform: translateY(0); animation: logoMoveSp 0.8s ease-out 0.8s normal forwards; } @media screen and (min-width: 786px) { .p-header .c-siteLogo { width: 944px; height: 153px; animation: logoMovePc 0.8s ease-out 0.8s normal forwards; } } .p-header .c-siteLogo img { width: 100%; height: auto; } /* * footer */ .p-footer { padding: 35px 0 22px 0; background-color: #F2F2F6; line-height: 2; font-size: 14px; letter-spacing: 0.15rem; } @media screen and (min-width: 786px) { .p-footer { padding: 50px 0 35px 0; font-size: 22px; } } .c-icon { margin-right: 13px; vertical-align: middle; } .c-icon.-instagram { filter: invert(5%) sepia(9%) saturate(2184%) hue-rotate(327deg) brightness(99%) contrast(93%); width: 22px; height: 22px; } .p-footerLinks { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-items: flex-start; justify-content: flex-start; column-gap: 20px; } .p-copyright { font-size: 10px; } @media screen and (min-width: 786px) { .p-copyright { font-size: 11px; } } /* * main */ .l-wrapper { overflow: hidden; } .l-main { position: relative; z-index: 1; } @media screen and (min-width: 600px) { .l-basicSplit { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-items: flex-start; justify-content: space-between; } } .l-basicSplit__main, .l-basicSplit__aside { margin-bottom: 56px; } @media screen and (min-width: 600px) { .l-basicSplit__main { width: 62.8424657534%; } } @media screen and (min-width: 600px) { .l-basicSplit__aside { width: 27.5684931507%; } } /* * container */ .l-container { margin: 0 auto; padding: 0 13px; } @media screen and (min-width: 786px) { .l-container { padding: 0 22px; } } .l-container.-spMg--0 { padding: 0; } @media screen and (min-width: 786px) { .l-container.-spMg--0 { padding: 0 22px; } } @media screen and (min-width: 786px) { .l-container.-pcMg--0 { padding: 0; } } @media screen and (min-width: 786px) { .-width--768 { max-width: 724px; } } @media screen and (min-width: 786px) { .-width--784 { max-width: 784px; } } @media screen and (min-width: 786px) { .-width--790 { max-width: 746px; } } @media screen and (min-width: 786px) { .-width--1024 { max-width: 980px; } } @media screen and (min-width: 786px) { .-width--1038 { padding: 0 0 0 130px; max-width: 1168px; } } @media screen and (min-width: 786px) { .-width--1076 { max-width: 1076px; } } .-width--1280 { padding: 0; } @media screen and (min-width: 786px) { .-width--1280 { max-width: 1280px; } } .-width--full { padding: 0; max-width: 100%; } /* * breadcrumb */ .p-breadcrumb { padding: 13px; } @media screen and (min-width: 600px) { .p-breadcrumb { padding: 18px 35px; } } .p-breadcrumbNav { margin: 0; padding: 0; list-style-type: none; display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-items: flex-start; justify-content: flex-start; } .p-breadcrumbNav li { font-size: 10px; } @media screen and (min-width: 600px) { .p-breadcrumbNav li { font-size: 11px; } } .p-breadcrumbNav li:nth-of-type(n+2)::before { margin: 0 10px 0 4px; border-top: 1px solid #707070; border-right: 1px solid #707070; content: ""; display: inline-block; width: 7px; height: 7px; transform: rotate(45deg); } @media screen and (min-width: 600px) { .p-breadcrumbNav li:nth-of-type(n+2)::before { width: 8px; height: 8px; } } .p-breadcrumb:last-of-type { background-color: #171717; } /* * default */ /* * grid */ .l-grid { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-items: flex-start; justify-content: flex-start; } .l-grid.-has--gap { column-gap: 2.734375%; row-gap: 2.734375vw; } .l-grid.-has--gap > .-col--1 { width: 5.8268229167%; } .l-grid.-has--gap > .-col--2 { width: 14.3880208333%; } .l-grid.-has--gap > .-col--3 { width: 22.94921875%; } .l-grid.-has--gap > .-col--4 { width: 31.5104166667%; } .l-grid.-has--gap > .-col--5 { width: 40.0716145833%; } .l-grid.-has--gap > .-col--6 { width: 48.6328125%; } .l-grid.-has--gap > .-col--7 { width: 57.1940104167%; } .l-grid.-has--gap > .-col--8 { width: 65.7552083333%; } .l-grid.-has--gap > .-col--9 { width: 74.31640625%; } .l-grid.-has--gap > .-col--10 { width: 82.8776041667%; } .l-grid.-has--gap > .-col--11 { width: 91.4388020833%; } @media screen and (min-width: 600px) { .l-grid.-has--gap > .-pcCol--1 { width: 5.8268229167%; } } @media screen and (min-width: 600px) { .l-grid.-has--gap > .-pcCol--2 { width: 14.3880208333%; } } @media screen and (min-width: 600px) { .l-grid.-has--gap > .-pcCol--3 { width: 22.94921875%; } } @media screen and (min-width: 600px) { .l-grid.-has--gap > .-pcCol--4 { width: 31.5104166667%; } } @media screen and (min-width: 600px) { .l-grid.-has--gap > .-pcCol--5 { width: 40.0716145833%; } } @media screen and (min-width: 600px) { .l-grid.-has--gap > .-pcCol--6 { width: 48.6328125%; } } @media screen and (min-width: 600px) { .l-grid.-has--gap > .-pcCol--7 { width: 57.1940104167%; } } @media screen and (min-width: 600px) { .l-grid.-has--gap > .-pcCol--8 { width: 65.7552083333%; } } @media screen and (min-width: 600px) { .l-grid.-has--gap > .-pcCol--9 { width: 74.31640625%; } } @media screen and (min-width: 600px) { .l-grid.-has--gap > .-pcCol--10 { width: 82.8776041667%; } } @media screen and (min-width: 600px) { .l-grid.-has--gap > .-pcCol--11 { width: 91.4388020833%; } } .l-gridCol.-col--1 { width: 8.3333333333%; } .l-gridCol.-col--2 { width: 16.6666666667%; } .l-gridCol.-col--3 { width: 25%; } .l-gridCol.-col--4 { width: 33.3333333333%; } .l-gridCol.-col--5 { width: 41.6666666667%; } .l-gridCol.-col--6 { width: 50%; } .l-gridCol.-col--7 { width: 58.3333333333%; } .l-gridCol.-col--8 { width: 66.6666666667%; } .l-gridCol.-col--9 { width: 75%; } .l-gridCol.-col--10 { width: 83.3333333333%; } .l-gridCol.-col--11 { width: 91.6666666667%; } .l-gridCol.-col--12 { width: 100%; } @media screen and (min-width: 600px) { .l-gridCol.-pcCol--1 { width: 8.3333333333%; } } @media screen and (min-width: 600px) { .l-gridCol.-pcCol--2 { width: 16.6666666667%; } } @media screen and (min-width: 600px) { .l-gridCol.-pcCol--3 { width: 25%; } } @media screen and (min-width: 600px) { .l-gridCol.-pcCol--4 { width: 33.3333333333%; } } @media screen and (min-width: 600px) { .l-gridCol.-pcCol--5 { width: 41.6666666667%; } } @media screen and (min-width: 600px) { .l-gridCol.-pcCol--6 { width: 50%; } } @media screen and (min-width: 600px) { .l-gridCol.-pcCol--7 { width: 58.3333333333%; } } @media screen and (min-width: 600px) { .l-gridCol.-pcCol--8 { width: 66.6666666667%; } } @media screen and (min-width: 600px) { .l-gridCol.-pcCol--9 { width: 75%; } } @media screen and (min-width: 600px) { .l-gridCol.-pcCol--10 { width: 83.3333333333%; } } @media screen and (min-width: 600px) { .l-gridCol.-pcCol--11 { width: 91.6666666667%; } } @media screen and (min-width: 600px) { .l-gridCol.-pcCol--12 { width: 100%; } } /* * button */ a[target=_blank]::after { margin-left: 5px; content: ""; display: inline-block; width: 13px; height: 13px; background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2010%2010%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bopacity%3A.7%3B%7D.cls-2%7Bfill%3A%23fff%3Bstroke-width%3A0px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22external-link%22%20class%3D%22cls-1%22%3E%3Cpath%20id%3D%22external-link-2%22%20class%3D%22cls-2%22%20d%3D%22M7.5%2C5.5v3c0%2C.28-.22.5-.5.5H1.5c-.28%2C0-.5-.22-.5-.5V3c0-.28.22-.5.5-.5h3c.28%2C0%2C.5-.22.5-.5s-.22-.5-.5-.5H1.5c-.83%2C0-1.5.67-1.5%2C1.5v5.5c0%2C.83.67%2C1.5%2C1.5%2C1.5h5.5c.83%2C0%2C1.5-.67%2C1.5-1.5v-3c0-.28-.22-.5-.5-.5s-.5.22-.5.5ZM4.35%2C6.35L9%2C1.71v1.79c0%2C.28.22.5.5.5s.5-.22.5-.5V.5c0-.13-.05-.26-.15-.35h0c-.09-.09-.22-.15-.35-.15h-3c-.28%2C0-.5.22-.5.5s.22.5.5.5h1.79L3.65%2C5.65c-.19.2-.19.52.01.71.19.19.5.19.69%2C0h0Z%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: cover; vertical-align: -0.075rem; } a[target=_blank]:has(img)::after { display: none; } .c-boxButton { border: none; font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; appearance: none; } @media screen and (min-width: 600px) { .c-boxButton { transition: all 0.4s; } } @media screen and (min-width: 600px) { .c-boxButton:hover { opacity: 0.7; } } input[type=submit].c-boxButton.-reservation { padding: 13px 35px; border: 1px solid #797979; border-radius: 0; background-color: #F0F0F0; } .c-basicButton { display: inline-block; } .c-basicButton.c-boxButton { padding: 13px 22px; border: 1px solid #141414; } @media screen and (min-width: 600px) { .c-basicButton.c-boxButton { padding: 13px 35px; } } .c-basicButton.c-boxButton[target=_blank]::after { margin-left: 5px; content: ""; display: inline-block; width: 13px; height: 13px; background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23000%3Bstroke-width%3A0px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M15%2C11v6c0%2C.28-.11.52-.29.71s-.43.29-.71.29H3c-.28%2C0-.53-.11-.71-.29s-.29-.43-.29-.71V6c0-.28.11-.53.29-.71s.43-.29.71-.29h6c.55%2C0%2C1-.45%2C1-1s-.45-1-1-1H3c-.83%2C0-1.58.34-2.12.88s-.88%2C1.29-.88%2C2.12v11c0%2C.83.34%2C1.58.88%2C2.12s1.29.88%2C2.12.88h11c.83%2C0%2C1.58-.34%2C2.12-.88s.88-1.29.88-2.12v-6c0-.55-.45-1-1-1s-1%2C.45-1%2C1ZM8.71%2C12.71L18%2C3.41v3.59c0%2C.55.45%2C1%2C1%2C1s1-.45%2C1-1V1c0-.14-.03-.26-.08-.38s-.12-.23-.22-.32t0%2C0c-.09-.09-.2-.17-.32-.22-.12-.05-.25-.08-.38-.08h-6c-.55%2C0-1%2C.45-1%2C1s.45%2C1%2C1%2C1h3.59L7.29%2C11.29c-.39.39-.39%2C1.02%2C0%2C1.41s1.02.39%2C1.41%2C0Z%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: cover; vertical-align: -0.075rem; } @media screen and (min-width: 600px) { .c-basicButton.-button--lg { padding: 22px 35px; } } .c-backButton { margin-top: 22px; padding: 13px; border: none; display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-items: flex-start; justify-content: flex-start; align-items: center; justify-content: center; width: 100%; background-color: #fff; color: #8EB3D5; font-size: 16px; font-weight: bold; outline: none; appearance: none; transition: all 0.4s; } @media screen and (min-width: 600px) { .c-backButton { padding: 22px; font-size: 22px; } } .c-backButton::before { margin-right: 11px; content: ""; display: inline-block; width: 18px; height: 18px; background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024.84%2015.27%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Anone%3Bstroke%3A%238eb3d5%3Bstroke-miterlimit%3A4%3Bstroke-width%3A2px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22_%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_12%22%3E%3Cpath%20id%3D%22_%E3%83%91%E3%82%B9_9%22%20class%3D%22cls-1%22%20d%3D%22M0%2C7.75h22.64%22%2F%3E%3Cpath%20id%3D%22_%E3%83%91%E3%82%B9_8%22%20class%3D%22cls-1%22%20d%3D%22M16.29.71l7.14%2C7.14-6.72%2C6.72%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: 0 50%; background-size: 100% auto; transform: scale(-1, 1); } @media screen and (min-width: 600px) { .c-backButton::before { margin-right: 13px; width: 22px; height: 22px; } } .c-basicButton ~ .c-backButton { opacity: 0.7; } @media screen and (min-width: 600px) { .c-basicButton ~ .c-backButton:hover { opacity: 1; } } /* * media */ .c-siteLogo { margin: 0; position: relative; z-index: 1; } .c-siteLogo a { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-items: flex-start; justify-content: flex-start; align-items: center; } .c-siteLogoImg { margin-right: 13px; width: 44px; height: 44px; filter: invert(100%) sepia(100%) saturate(0%) hue-rotate(237deg) brightness(101%) contrast(106%); } @media screen and (min-width: 786px) { .c-siteLogoImg { width: 56px; height: 56px; } } .c-siteLogoTitle { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-items: flex-start; justify-content: flex-start; flex-direction: column; width: 120px; line-height: 1; color: #fff; } @media screen and (min-width: 786px) { .c-siteLogoTitle { width: 120px; } } .c-siteLogoTitle__title { line-height: 1.1; font-size: 22px; font-weight: 400; } @media screen and (min-width: 786px) { .c-siteLogoTitle__title { font-size: 28px; } } .c-siteLogoTitle__meta { margin-top: 5px; margin-bottom: 5px; font-weight: 400; font-size: 10px; letter-spacing: 0.05rem; transform-origin: 0%; transform: scale(0.85); } @media screen and (min-width: 786px) { .c-siteLogoTitle__meta { margin-bottom: 8px; font-size: 11px; } } .c-gmap { position: relative; width: 100%; /* 16:9のアスペクト比 */ padding-top: 100%; height: 0; } .c-gmap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .c-youtube { position: relative; padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/ height: 0; overflow: hidden; } .c-youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .c-basicTable th, .c-basicTable td { padding: 8px 22px 8px 0; } @media screen and (min-width: 786px) { .c-basicTable th, .c-basicTable td { padding: 8px 35px 8px 0; } } .c-basicTable thead th { font-weight: 600; } .c-basicTable tbody tr { border-top: 1px solid #141414; } .c-basicTable tbody th { font-weight: 600; } /* * title */ .c-headingTitle__l { margin: 0; margin-bottom: 22px; display: block; font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-weight: 600; font-style: normal; color: #171717; line-height: 1.6; font-size: 18px; } @media screen and (min-width: 600px) { .c-headingTitle__l { margin-bottom: 35px; font-size: 28px; } } .c-headingTitle__m { margin: 0; margin-bottom: 13px; font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; font-size: 14px; } @media screen and (min-width: 600px) { .c-headingTitle__m { margin-bottom: 22px; font-size: 16px; } } /* * article */ /* * section */ .p-brandHeading { position: relative; } .p-brandHeading p { margin-bottom: 22px; line-height: 2; font-size: 11px; } @media screen and (min-width: 786px) { .p-brandHeading p { margin-bottom: 35px; font-size: 13px; text-align: center; } } .p-brandHeading .p-brandStoreList { margin-bottom: 0; } /* * home */ @keyframes scrollFade { 0% { transform: translateY(22px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } .is-targetElm { transform: translateY(22px); opacity: 0; will-change: transform; } .is-targetElm.is-displayed { animation: scrollFade 1s ease-out 0.4s normal forwards; } @keyframes colorFade { 0% { opacity: 0; filter: grayscale(100%); } 100% { opacity: 1; filter: grayscale(0%); } } .p-mainvisual { margin-bottom: 56px; } @media screen and (min-width: 786px) { .p-mainvisual { margin-bottom: 112px; } } .p-mainvisual img { opacity: 0; width: 100%; filter: grayscale(100%); animation: colorFade 1s ease-out 1.6s normal forwards; } .p-homeSection { margin-bottom: 56px; } @media screen and (min-width: 786px) { .p-homeSection { margin-bottom: 112px; } } .p-homeSection p.-lg { line-height: 2.2; font-size: 17px; letter-spacing: 0.1rem; } @media screen and (min-width: 786px) { .p-homeSection p.-lg { line-height: 2.4; font-size: 28px; letter-spacing: 0.3rem; } } .p-homeSection p.-md { line-height: 2.2; font-size: 16px; letter-spacing: 0.1rem; } @media screen and (min-width: 786px) { .p-homeSection p.-md { line-height: 2.4; font-size: 25px; } } .p-homeSection .c-textIndent { text-indent: 1.5rem; } @media screen and (min-width: 786px) { .p-homeSection .c-textIndent { text-indent: 2rem; } } .c-homeSectionTitle { margin-bottom: 28px; letter-spacing: 0.15rem; } @media screen and (min-width: 786px) { .c-homeSectionTitle { margin-bottom: 35px; letter-spacing: 0.3rem; } } .c-homeSectionTitle.-lg { font-size: 26px; text-indent: 1.5rem; } @media screen and (min-width: 786px) { .c-homeSectionTitle.-lg { font-size: 52px; text-indent: 4rem; } } .c-homeSectionTitle.-md { font-size: 24px; text-indent: 2rem; } @media screen and (min-width: 786px) { .c-homeSectionTitle.-md { font-size: 44px; text-indent: 4rem; } } .c-homeSectionTitle.-sm { font-size: 18px; } @media screen and (min-width: 786px) { .c-homeSectionTitle.-sm { font-size: 22px; } } .c-homeSectionTitle.-ss { font-size: 17px; } @media screen and (min-width: 786px) { .c-homeSectionTitle.-ss { font-size: 18px; } } .p-styleImg { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-items: flex-start; justify-content: flex-start; column-gap: 5.2141527002%; } .p-styleImgCol { width: 47.3929236499%; } .c-imgW--617 { width: 100%; height: auto; max-width: 617px; } .p-basicList { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-items: flex-start; justify-content: flex-start; flex-direction: row; row-gap: 22px; } .p-basicList li { padding-bottom: 5px; border-bottom: 1px solid #9c9c9c; width: 100%; font-size: 15px; letter-spacing: 0.1rem; } @media screen and (min-width: 786px) { .p-basicList li { font-size: 22px; } } .p-basicList li a { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-items: flex-start; justify-content: flex-start; } .p-basicListObject { display: inline-block; width: 100%; } @media screen and (min-width: 786px) { .p-basicListObject { width: 130px; } } .p-basicListTitle { display: inline-block; width: 100%; } @media screen and (min-width: 786px) { .p-basicListTitle { width: calc(100% - 130px); } } .p-pdTab { margin: 0 auto 30px auto; } @media screen and (min-width: 786px) { .p-pdTab { margin: 0 auto 40px auto; width: 83.90625%; } } .p-pdTabList { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-items: flex-start; justify-content: flex-start; justify-content: flex-end; } .p-pdTabButton { padding: 5px; border-bottom: 2px solid rgba(26, 19, 17, 0.1); width: 120px; font-size: 13px; letter-spacing: 0.1rem; text-align: center; } @media screen and (min-width: 786px) { .p-pdTabButton { width: 16.6666666667%; transition: all 0.8s; } } @media screen and (min-width: 786px) { .p-pdTabButton:hover { background-color: #FFF1C1; cursor: pointer; } } .p-pdTabButton:nth-of-type(n+2) { border-left: 2px solid rgba(26, 19, 17, 0.1); } .p-pdTabButton.is-active { background-color: #FFF1C1; } @media screen and (min-width: 786px) { .p-pdTabButton.is-active:hover { cursor: default; } } .p-pdTabContents { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-items: flex-start; justify-content: flex-start; flex-direction: column; } @media screen and (min-width: 786px) { .p-pdTabContents { flex-direction: row; } } .p-pdTabContent { margin-bottom: 22px; display: none; order: -1; } @media screen and (min-width: 786px) { .p-pdTabContent { margin-right: 2.6951672862%; margin-bottom: 0; width: 57.3420074349%; } } .p-pdTabContent.is-active { display: block; } .p-pdTabVar { margin-bottom: 22px; margin-right: -13px; padding-bottom: 13px; display: none; width: calc(100% + 13px); overflow-x: scroll; } @media screen and (min-width: 786px) { .p-pdTabVar { margin-bottom: 0; margin-right: 0; width: 39.9628252788%; overflow: visible; } } .p-pdTabVar.is-active { display: block; } .p-pdTabVarList { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-items: flex-start; justify-content: flex-start; row-gap: 15px; } @media screen and (min-width: 786px) { .p-pdTabVarList { flex-direction: column; width: auto; height: 430px; row-gap: 22px; } } .p-pdTabVarList.-shiki { width: 1232px; } @media screen and (min-width: 786px) { .p-pdTabVarList.-shiki { width: auto; } } .p-pdTabVarList.-koiki { width: 448px; } @media screen and (min-width: 786px) { .p-pdTabVarList.-koiki { width: auto; } } .p-pdTabVarListCol { padding: 6px; display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-items: flex-start; justify-content: flex-start; width: 112px; } @media screen and (min-width: 786px) { .p-pdTabVarListCol { width: 33.333%; transition: all 0.8s; } } @media screen and (min-width: 786px) { .p-pdTabVarListCol:hover { background-color: #FFF1C1; cursor: pointer; } } .p-pdTabVarListCol.is-active { background-color: #FFF1C1; } .p-pdColorIcon { margin-right: 6px; width: 20px; } @media screen and (min-width: 786px) { .p-pdColorIcon { width: 24px; } } .c-pdName { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-items: flex-start; justify-content: flex-start; flex-direction: column; } .c-pdName span { line-height: 1; font-size: 11px; } @media screen and (min-width: 786px) { .c-pdName span { line-height: 1; font-size: 12px; } } .c-pdName .en { margin-top: 2.5px; } @media screen and (min-width: 786px) { .c-pdName .en { margin-top: 5px; } } @keyframes fadeContent { 0% { opacity: 0; } 100% { opacity: 1; } } .p-pdCol { display: none; opacity: 0; } .p-pdCol.is-active { display: block; animation: fadeContent 1s ease-out 0.1s normal forwards; } .p-pdCol .p-pdColImg { margin-bottom: 22px; } @media screen and (min-width: 786px) { .p-pdCol .p-pdColImg { margin-bottom: 30px; } } .p-pdCol .p-pdColCopy { margin-bottom: 20px; line-height: 2.2; font-size: 13px; letter-spacing: 0.05rem; text-indent: 1rem; } .p-pdCol .p-pdColName, .p-pdCol .p-pdColSpec { line-height: 2.2; font-size: 13px; letter-spacing: 0.05rem; } .p-simpleBox { margin: 0 auto; padding: 22px 92px; border: 1px solid #1a1919; display: inline-block; } .p-simpleBox .c-homeSectionTitle { margin-bottom: 0; letter-spacing: 0.2rem; } .p-simpleBox .c-homeSectionTitle .c-icon { width: 22px; height: 22px; vertical-align: -0.25rem; } @media screen and (min-width: 786px) { .p-simpleBox .c-homeSectionTitle .c-icon { width: 26px; height: 26px; vertical-align: -0.3rem; } } .p-simpleBox p { font-size: 15px; letter-spacing: 0.1rem; } @media screen and (min-width: 786px) { .p-simpleBox p { font-size: 22px; } } /* * contact */ .c-must { font-weight: normal; color: #A97E4A; } .c-form__unit { font-size: 13px; } .p-contactTarget { width: 100%; } .p-contactTarget h2 { margin-top: 0; background-color: #171717; color: #fff; } .p-loanSimulater { padding: 22px; background-color: #F0F0F0; } .p-loanSimulater .c-form__input { width: 80%; background-color: #fff; } @media screen and (min-width: 786px) { .p-loanSimulater .c-form__input { width: 300px; } } .p-loanSimulater .c-input__select select { background-color: #fff; } @media screen and (min-width: 786px) { .p-loanSimulater .p-form__table dt { width: 33%; } } .p-loanSimulater .p-form__table dd { margin-bottom: 22px; } @media screen and (min-width: 786px) { .p-loanSimulater .p-form__table dd { width: 65%; } } .p-form__progress { margin-bottom: 35px; display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-items: flex-start; justify-content: flex-start; } .p-form__progress li { padding: 13px 8px; border: 1px solid #fff; width: 33.333%; font-size: 13px; text-align: center; } @media screen and (min-width: 786px) { .p-form__progress li { padding: 16px 13px; font-size: 15px; } } .p-form__progress li:nth-of-type(2) { border-left: none; border-right: none; } .p-form__progress li.is-active { background-color: #fff; color: #8EB3D5; font-weight: bold; } .wpcf7-spinner { display: none !important; } .wpcf7-not-valid-tip { margin-top: 8px; font-size: 11px !important; } @media screen and (min-width: 786px) { .p-form__table { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-items: flex-start; justify-content: flex-end; } } .p-form__table .c-must { margin-top: 2px; margin-left: 8px; font-size: 11px; vertical-align: -0.2rem; } @media screen and (min-width: 786px) { .p-form__table .c-must { margin-top: 4px; } } .p-form__table .c-form__unit { margin: 0 22px 0 8px; } .p-form__table dt, .p-form__table dd { margin: 0; } .p-form__table dt { margin-bottom: 13px; display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-items: flex-start; justify-content: flex-start; } @media screen and (min-width: 786px) { .p-form__table dt { margin-right: 2%; padding-top: 8px; width: 28%; } } .p-form__table dt h3 { margin: 0; font-weight: 600; font-size: 14px; } @media screen and (min-width: 786px) { .p-form__table dt h3 { font-size: 15px; } } .p-form__table .c-headingTitle__m { padding: 0; border: none; } .p-form__table dd { margin-bottom: 35px; } @media screen and (min-width: 786px) { .p-form__table dd { width: 70%; } } .p-form__table dd p { font-size: 13px; } .p-form__table dd p a { color: #A97E4A; } .p-form__table dd .c-form__date { margin-bottom: 22px; width: 200px; padding-right: 56px; color: #171717; display: flex; justify-content: flex-start; } @media screen and (min-width: 786px) { .p-form__table.-form--confirm { display: flex; flex-wrap: wrap; } } @media screen and (min-width: 786px) { .p-form__table.-form--confirm dt { margin-right: 2%; width: 33%; } } @media screen and (min-width: 786px) { .p-form__table.-form--confirm dd { padding-top: 5px; width: 65%; } } .c-form__input { margin: 0; padding: 11px 11px 9px 11px; border: 1px solid rgba(121, 121, 121, 0.6); border-radius: 0; width: 100%; background-color: #F0F0F0; color: #48545a; font-size: 13px; outline: none; appearance: none; } .c-form__input::placeholder { color: #171717; opacity: 0.4; } .c-dateEdit { position: relative; height: 40px; } .c-dateEdit .c-form__input { position: relative; height: 40px; text-align: left; } .c-dateEdit .c-form__input::-webkit-calendar-picker-indicator { width: 100%; height: 100%; position: absolute; opacity: 0; top: 0; left: 0; } .c-dateEdit .c-form__input::after { content: "選択"; margin-top: 1px; width: 44px; height: 17px; background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018%2019.97%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23000%3Bstroke-width%3A0px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M15.98%2C18V6.99H2.02v11.02h13.97ZM15.98%2C1.97c.53%2C0%2C1%2C.2%2C1.41.61s.61.87.61%2C1.41v14.02c0%2C.53-.2.99-.61%2C1.38-.41.39-.87.59-1.41.59H2.02c-.56%2C0-1.04-.19-1.43-.56-.39-.38-.59-.84-.59-1.41V3.98c0-.53.2-1%2C.59-1.41.39-.41.87-.61%2C1.43-.61h.98V0h2.02v1.97h7.97V0h2.02v1.97s.98%2C0%2C.98%2C0ZM14.02%2C9v1.97h-2.02v-1.97h2.02ZM9.99%2C9v1.97h-1.97v-1.97h1.97ZM6%2C9v1.97h-2.02v-1.97h2.02Z%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: 100% 50%; position: absolute; top: 50%; right: 11px; transform: translateY(-50%); font-size: 12px; pointer-events: none; } .c-dateEdit #placeholder { margin-top: -8px; border: 1px solid #999; border-radius: 4px; display: none; position: absolute; top: 50%; right: 8px; width: 25px; height: 20px; background-color: #eee; color: #000; } input[type=date i]::-webkit-calendar-picker-indicator { background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2018%2019.97%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23000%3Bstroke-width%3A0px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M15.98%2C18V6.99H2.02v11.02h13.97ZM15.98%2C1.97c.53%2C0%2C1%2C.2%2C1.41.61s.61.87.61%2C1.41v14.02c0%2C.53-.2.99-.61%2C1.38-.41.39-.87.59-1.41.59H2.02c-.56%2C0-1.04-.19-1.43-.56-.39-.38-.59-.84-.59-1.41V3.98c0-.53.2-1%2C.59-1.41.39-.41.87-.61%2C1.43-.61h.98V0h2.02v1.97h7.97V0h2.02v1.97s.98%2C0%2C.98%2C0ZM14.02%2C9v1.97h-2.02v-1.97h2.02ZM9.99%2C9v1.97h-1.97v-1.97h1.97ZM6%2C9v1.97h-2.02v-1.97h2.02Z%22%2F%3E%3C%2Fsvg%3E"); } .c-user__name { max-width: 320px; } .c-user__phone { max-width: 160px; } .c-user__mail { max-width: 480px; } .c-user__context { height: 150px; } @media screen and (min-width: 786px) { .c-user__context { height: auto; } } .c-radioBox { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-items: flex-start; justify-content: flex-start; } @media screen and (min-width: 786px) { .c-radioBox { padding-top: 2px; } } .c-radioBox .wpcf7-list-item { margin: 0; } .c-radioBox label { margin-right: 22px; } .c-radioBox label input[type=radio] { opacity: 0; appearance: none; position: absolute; } .c-radioBox label input[type=radio]:checked + span::after { opacity: 1; } .c-radioBox label .c-text, .c-radioBox label .wpcf7-list-item-label { display: inline-block; position: relative; padding-left: 26px; line-height: 2.5; font-size: 13px; } .c-radioBox label .c-text::before, .c-radioBox label .wpcf7-list-item-label::before { position: absolute; top: 8px; left: 0; width: 18px; height: 18px; border: 1px solid rgba(121, 121, 121, 0.6); background-color: #F0F0F0; content: ""; border-radius: 50%; } .c-radioBox label .c-text::after, .c-radioBox label .wpcf7-list-item-label::after { position: absolute; top: 12px; left: 4px; width: 10px; height: 10px; border-radius: 50%; background-color: #171717; content: ""; opacity: 0; transition: all 0.1s; } .c-checkBox { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-items: flex-start; justify-content: flex-start; } @media screen and (min-width: 786px) { .c-checkBox { padding-top: 2px; } } .c-checkBox:last-of-type { margin-bottom: 0; display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-items: flex-start; justify-content: center; } @media screen and (min-width: 786px) { .c-checkBox:last-of-type { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-items: flex-start; justify-content: flex-start; } } .c-checkBox .wpcf7-list-item { margin: 0 13px 0 0; } .c-checkBox label { margin-right: 22px; } .c-checkBox label:last-of-type { margin-right: 0; } .c-checkBox label input[type=checkbox] { opacity: 0; appearance: none; position: absolute; } .c-checkBox label input[type=checkbox]:checked + span::after { opacity: 1; } .c-checkBox .c-text, .c-checkBox .wpcf7-list-item-label { display: inline-block; position: relative; padding-left: 26px; line-height: 2.5; font-size: 13px; } .c-checkBox .c-text::before, .c-checkBox .wpcf7-list-item-label::before { position: absolute; top: 8px; left: 0; width: 18px; height: 18px; border: 1px solid rgba(121, 121, 121, 0.6); background-color: #F0F0F0; content: ""; transition: all 0.3s; } .c-checkBox .c-text::after, .c-checkBox .wpcf7-list-item-label::after { border-top: 2px solid #171717; border-left: 2px solid #171717; position: absolute; top: 7px; left: 5px; width: 8px; height: 14px; font-size: 14px; display: flex; align-items: center; justify-content: center; content: ""; opacity: 0; transition: all 0.1s; transform: rotate(-135deg); } @media screen and (min-width: 786px) { .c-checkBox .c-text::after, .c-checkBox .wpcf7-list-item-label::after { border-top: 3px solid #171717; border-left: 3px solid #171717; } } .c-input__select { margin-bottom: 8px; display: inline-block; position: relative; border: 1px solid rgba(121, 121, 121, 0.6); vertical-align: middle; } @media screen and (min-width: 786px) { .c-input__select { margin-bottom: 0; } } .c-input__select select { appearance: none; width: 160px; padding: 11px 15px; padding-right: 1em; border: none; outline: 0; background-color: #F0F0F0; background-image: none; box-shadow: none; font-size: 13px; text-indent: 0.01px; text-overflow: ellipsis; cursor: pointer; } .c-input__select:before { position: absolute; top: 14px; right: 16px; width: 0; height: 0; border-width: 8px 6px 0 6px; border-style: solid; border-color: #333 transparent transparent transparent; content: ""; pointer-events: none; } .c-form__error { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-items: flex-start; justify-content: flex-start; flex-direction: column; align-items: flex-start; } .c-form__error .c-form__input { background-color: #fffddc; } .c-form__error br { display: none; } .c-form__error-msg { padding: 3px; border-radius: 4px; position: relative; display: inline-block; background-color: #fffddc; color: #48545a; font-size: 10px; } .c-form__error-msg::before { margin-left: -8px; position: absolute; top: -8px; left: 50%; content: ""; border-right: 8px solid transparent; border-bottom: 8px solid #fffddc; border-left: 8px solid transparent; display: block; width: 8px; } .c-form__action { margin-top: 35px; } /* * color */ .u-color--attention { color: #b70052; } .u-link { color: #A97E4A; } .u-border--blue { border: 1px solid #141414; } .u-bg--white { background-color: #fff; } .u-bg--blue { background-color: #141414; color: #fff; } .u-bg--grayBlue { background-color: #1A1A54; color: #fff; } .u-bg--gladBlue { background: linear-gradient(0deg, rgba(1, 1, 60, 0.8239889706) 0%, rgb(1, 1, 60) 100%); color: #fff; } .u-bg--lightGray { background-color: #E2E9EF; color: #141414; } /* * margin */ /* gap-size */ /* y-axis */ .u-mg__y--92 { margin-top: 56px; margin-bottom: 56px; } @media screen and (min-width: 786px) { .u-mg__y--92 { margin-top: 92px; margin-bottom: 92px; } } .u-mg__y--56 { margin-top: 35px; margin-bottom: 35px; } @media screen and (min-width: 786px) { .u-mg__y--56 { margin-top: 56px; margin-bottom: 56px; } } .u-mg__y--35 { margin-top: 22px; margin-bottom: 22px; } @media screen and (min-width: 786px) { .u-mg__y--35 { margin-top: 35px; margin-bottom: 35px; } } .u-mg__y--22 { margin-top: 13px; margin-bottom: 13px; } @media screen and (min-width: 786px) { .u-mg__y--22 { margin-top: 22px; margin-bottom: 22px; } } /* x-axis */ .u-mg__x--92 { margin-left: 56px; margin-right: 56px; } @media screen and (min-width: 980px) { .u-mg__x--92 { margin-left: 92px; margin-right: 92px; } } .u-mg__x--56 { margin-left: 35px; margin-right: 35px; } @media screen and (min-width: 980px) { .u-mg__x--56 { margin-left: 56px; margin-right: 56px; } } .u-mg__x--35 { margin-left: 22px; margin-right: 22px; } @media screen and (min-width: 786px) { .u-mg__x--35 { margin-left: 35px; margin-right: 35px; } } .u-mg__x--22 { margin-left: 13px; margin-right: 13px; } @media screen and (min-width: 786px) { .u-mg__x--22 { margin-left: 22px; margin-right: 22px; } } .u-mg__x--13 { margin-left: 8px; margin-right: 8px; } @media screen and (min-width: 786px) { .u-mg__x--13 { margin-left: 13px; margin-right: 13px; } } .u-mg__x--0 { margin-left: 0; margin-right: 0; } @media screen and (min-width: 786px) { .u-pcMg__x--35 { margin-left: 35px; margin-right: 35px; } } @media screen and (min-width: 786px) { .u-pcMg__x--22 { margin-left: 22px; margin-right: 22px; } } /* left */ .u-mg__l--92 { margin-left: 92px; } .u-mg__l--92 { margin-left: 56px; } .u-mg__l--35 { margin-left: 35px; } .u-mg__l--22 { margin-left: 22px; } .u-mg__l--13 { margin-left: 13px; } .u-mg__l--8 { margin-left: 8px; } /* bottom */ .u-mg__b--92 { margin-bottom: 56px; } @media screen and (min-width: 786px) { .u-mg__b--92 { margin-bottom: 92px; } } .u-mg__b--56 { margin-bottom: 35px; } @media screen and (min-width: 786px) { .u-mg__b--56 { margin-bottom: 56px; } } .u-mg__b--35 { margin-bottom: 22px; } @media screen and (min-width: 786px) { .u-mg__b--35 { margin-bottom: 35px; } } .u-mg__b--22 { margin-bottom: 13px; } @media screen and (min-width: 786px) { .u-mg__b--22 { margin-bottom: 22px; } } .u-mg__b--13 { margin-bottom: 8px; } @media screen and (min-width: 786px) { .u-mg__b--13 { margin-bottom: 13px; } } .u-mg__b--8 { margin-bottom: 8px; } /* top */ .u-mg__t--92 { margin-top: 92px; } .u-mg__t--56 { margin-top: 56px; } .u-mg__t--35 { margin-top: 35px; } .u-mg__t--22 { margin-top: 22px; } .u-mg__t--13 { margin-top: 13px; } .u-mg__t--8 { margin-top: 8px; } /* zero */ .u-mg__t--0 { margin-top: 0; } .u-mg__b--0 { margin-bottom: 0; } .u-mg__r--0 { margin-right: 0; } .u-mg__l--0 { margin-left: 0; } /* * padding */ /* gap-size */ /* y-axis */ .u-pd__y--92 { padding-top: 56px; padding-bottom: 56px; } @media screen and (min-width: 786px) { .u-pd__y--92 { padding-top: 92px; padding-bottom: 92px; } } .u-pd__y--56 { padding-top: 35px; padding-bottom: 35px; } @media screen and (min-width: 786px) { .u-pd__y--56 { padding-top: 56px; padding-bottom: 56px; } } .u-pd__y--35 { padding-top: 22px; padding-bottom: 22px; } @media screen and (min-width: 786px) { .u-pd__y--35 { padding-top: 35px; padding-bottom: 35px; } } .u-pd__y--22 { padding-top: 13px; padding-bottom: 13px; } @media screen and (min-width: 786px) { .u-pd__y--22 { padding-top: 22px; padding-bottom: 22px; } } /* x-axis */ .u-pd__x--56 { padding-left: 35px; padding-right: 35px; } @media screen and (min-width: 980px) { .u-pd__x--56 { padding-left: 56px; padding-right: 56px; } } .u-pd__x--35 { padding-left: 22px; padding-right: 22px; } @media screen and (min-width: 786px) { .u-pd__x--35 { padding-left: 35px; padding-right: 35px; } } .u-pd__x--22 { padding-left: 13px; padding-right: 13px; } @media screen and (min-width: 786px) { .u-pd__x--22 { padding-left: 22px; padding-right: 22px; } } /* all */ .u-pd__a--56 { padding: 35px; } @media screen and (min-width: 786px) { .u-pd__a--56 { padding: 56px; } } .u-pd__a--35 { padding: 22px; } @media screen and (min-width: 786px) { .u-pd__a--35 { padding: 35px; } } .u-pd__a--22 { padding: 13px; } @media screen and (min-width: 786px) { .u-pd__a--22 { padding: 22px; } } .u-pd__a--13 { padding: 8px; } @media screen and (min-width: 786px) { .u-pd__a--13 { padding: 13px; } } /* top */ .u-pd__t--92 { padding-top: 92px; } .u-pd__t--56 { padding-top: 56px; } .u-pd__t--35 { padding-top: 35px; } .u-pd__t--22 { padding-top: 22px; } .u-pd__t--13 { padding-top: 13px; } .u-pd__t--8 { padding-top: 8px; } /* bottom */ .u-pd__b--92 { padding-bottom: 92px; } .u-pd__b--56 { padding-bottom: 56px; } .u-pd__b--35 { padding-bottom: 35px; } .u-pd__b--22 { padding-bottom: 22px; } .u-pd__b--13 { padding-bottom: 13px; } .u-pd__b--8 { padding-bottom: 8px; } /* right */ .u-pd__r--22 { padding-right: 22px; } .u-pd__r--13 { padding-right: 13px; } .u-pd__r--8 { padding-right: 8px; } /* left */ .u-pd__l--22 { padding-left: 22px; } .u-pd__l--13 { padding-left: 13px; } .u-pd__l--8 { padding-left: 8px; } /* zero */ .u-pd__t--0 { padding-top: 0; } .u-pd__b--0 { padding-bottom: 0; } .u-pd__r--0 { padding-right: 0; } .u-pd__l--0 { padding-left: 0; } /* * utility */ .u-sp--br { display: block; } @media screen and (min-width: 786px) { .u-sp--br { display: none; } } .u-pc--br { display: none; } @media screen and (min-width: 786px) { .u-pc--br { display: block; } } .u-sp--center { text-align: center; } @media screen and (min-width: 786px) { .u-sp--center { text-align: left; } } @media screen and (min-width: 786px) { .u-pc--center { text-align: center; } } .u-text--center { justify-content: center; text-align: center; } .u-text--right { justify-content: flex-end; text-align: right; } .u-text--left { justify-content: flex-start; text-align: left; } .u-direction--column { flex-direction: column; } .u-justify--start { justify-content: flex-start; } .u-justify--center { justify-content: center; } .u-justify--end { justify-content: flex-end; } .u-justify--spacebetween { justify-content: space-between; } .u-justify--spacearound { justify-content: space-around; } .u-align--center { align-items: center; } .u-align--strech { align-items: stretch; } .u-placeitems--center { place-items: center; } .u-width--50 { width: 50%; } .u-width--60 { width: 60%; } .u-width--70 { width: 70%; } .u-width--80 { width: 80%; } .u-width--90 { width: 90%; } .u-width--100 { width: 100%; } .u-width--auto { width: auto; } @media screen and (min-width: 786px) { .u-pcWidth--50 { width: 50%; } } @media screen and (min-width: 786px) { .u-pcWidth--60 { width: 60%; } } @media screen and (min-width: 786px) { .u-pcWidth--70 { width: 70%; } } @media screen and (min-width: 786px) { .u-pcWidth--80 { width: 80%; } } @media screen and (min-width: 786px) { .u-pcWidth--90 { width: 90%; } } @media screen and (min-width: 786px) { .u-pcWidth--100 { width: 100%; } } @media screen and (min-width: 786px) { .u-pcWidth--auto { width: auto; } } .u-img--full { width: 100%; height: auto; } .u-pos--relative { position: relative; } .u-pos--absolute { position: absolute; } .u-ovh--hidden { overflow: hidden; } .u-display--flex { display: flex; } .u-display--grid { display: grid; } .u-display--inline { display: inline; } .u-display--inlineBlock { display: inline-block; } .u-display--none { display: none; } .u-border--radius { border-radius: 10px; } @media screen and (min-width: 786px) { .u-border--radius { border-radius: 30px; } } /* * font */ .u-font__serif { font-family: "Noto Serif JP", serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; } .u-font__sans { font-family: "Noto Sans JP", sans-serif; } .u-font__bold { font-weight: 600; } .u-font__z--56 { line-height: 1.3; font-size: 35px; } @media screen and (min-width: 786px) { .u-font__z--56 { font-size: 56px; } } .u-font__z--35 { line-height: 1.3; font-size: 28px; } @media screen and (min-width: 786px) { .u-font__z--35 { font-size: 35px; } } .u-font__z--32 { line-height: 1.3; font-size: 24px; } @media screen and (min-width: 786px) { .u-font__z--32 { font-size: 32px; } } .u-font__z--28 { line-height: 1.3; font-size: 22px; } @media screen and (min-width: 786px) { .u-font__z--28 { font-size: 28px; } } .u-font__z--26 { line-height: 1.6; font-size: 20px; } @media screen and (min-width: 786px) { .u-font__z--26 { font-size: 26px; } } .u-font__z--24 { line-height: 1.6; font-size: 20px; } @media screen and (min-width: 786px) { .u-font__z--24 { font-size: 24px; } } .u-font__z--22 { line-height: 1.6; font-size: 18px; } @media screen and (min-width: 786px) { .u-font__z--22 { font-size: 22px; } } .u-font__z--20 { line-height: 1.6; font-size: 16px; } @media screen and (min-width: 786px) { .u-font__z--20 { font-size: 20px; } } .u-font__z--18 { line-height: 1.8; font-size: 16px; } @media screen and (min-width: 786px) { .u-font__z--18 { font-size: 18px; } } .u-font__z--16 { line-height: 1.8; font-size: 14px; } @media screen and (min-width: 786px) { .u-font__z--16 { font-size: 16px; } } .u-font__z--14 { line-height: 1.8; font-size: 13px; } @media screen and (min-width: 786px) { .u-font__z--14 { font-size: 14px; } } .u-font__z--12 { line-height: 1.8; font-size: 10px; } @media screen and (min-width: 786px) { .u-font__z--12 { font-size: 12px; } } .u-font__z--10 { line-height: 1.8; font-size: 10px; }