@charset "UTF-8"; /* * base */ @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap"); @import url("https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&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: "Noto Sans JP", sans-serif; color: #1B120C; font-size: 100%; font-weight: 400; letter-spacing: 0.025rem; -webkit-text-size-adjust: 100%; word-break: break-word; font-feature-settings: "palt"; } a { text-decoration: none; } a:hover { text-decoration: inherit; } img { vertical-align: bottom; } b { font-weight: bold; } /* * header */ .p-header { width: 100%; background-color: #FFFFFF; position: fixed; top: 0; left: 0; z-index: 100; } @media screen and (max-width: 979px) { .p-header { height: 70px; } } @media screen and (min-width: 980px) { .p-header { height: 80px; box-shadow: none; } } @media screen and (min-width: 1215px) { .p-header { width: 1280px; left: 50%; transform: translateX(-50%); } } .p-header__inner { width: 100%; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; height: 100%; } @media screen and (max-width: 979px) { .p-header__inner { padding: 0 0 0 20px; } } @media screen and (min-width: 980px) { .p-header__inner { padding: 0 40px; } } .p-header__logo { display: block; position: relative; z-index: 100; } .p-header__logo img { display: block; height: 30px; width: auto; } @media screen and (min-width: 980px) { .p-header__logo img { height: 40px; } } @media screen and (min-width: 980px) { .p-header__nav { display: flex; align-items: center; position: relative; z-index: 200; } } @media screen and (max-width: 979px) { .p-header__menu { margin: 0; padding: 0; } } @media screen and (min-width: 980px) { .p-header__menu { display: flex; list-style: none; padding: 0; margin: 0; } .p-header__menu:nth-of-type(2) { margin-left: 30px; padding-left: 30px; border-left: 1px solid #ccc; } } @media screen and (max-width: 979px) { .p-header__menu.-id--2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; padding: 40px 20px; border-bottom: 1px solid #ccc; } } @media screen and (min-width: 980px) { .p-header__menuItem { margin-left: 24px; border-bottom: none; } .p-header__menuItem:first-child { margin-left: 0; border-top: none; } } .p-header__menuLink { color: #1B120C; } @media screen and (max-width: 979px) { .-id--1 .p-header__menuLink { display: block; padding: 24px 20px; border-bottom: 1px solid #ccc; } } @media screen and (min-width: 980px) { .p-header__menuLink { position: relative; display: block; padding: 0; font-size: 13px; line-height: 1.3; letter-spacing: 0.05em; } } @media screen and (min-width: 980px) { .p-header__menuLink.-current:after { content: ""; display: block; position: absolute; bottom: -8px; width: 100%; height: 1px; background: #1B120C; transition: width 0.5s; } } @media screen and (min-width: 980px) { .p-header__menuLink:after { content: ""; display: block; position: absolute; bottom: -8px; width: 0; height: 1px; background: #1B120C; transition: width 0.5s; } } @media screen and (min-width: 980px) { .p-header__menuLink:hover:after { width: 100%; } } @media screen and (min-width: 980px) { .p-header__menuLink.-id--product-list::before { margin: 0 6px 0 0; border-top: 1px solid #1B120B; border-right: 1px solid #1B120B; content: ""; display: inline-block; width: 6px; height: 6px; transform: rotate(135deg) translatey(3px); } } .p-header__subMenu { display: none; opacity: 0; visibility: "hidden"; transition: all 0.6s; } @media screen and (max-width: 979px) { .p-header__subMenu { background-color: #E9EBE9; padding: 0; height: 0; } } .p-header__menuItem.is-open .p-header__subMenu { display: block; opacity: 1; visibility: visible; } @media screen and (max-width: 979px) { .p-header__menuItem.is-open .p-header__subMenu { padding: 15px 40px; height: auto; } } @media screen and (min-width: 980px) { .p-header__menuItem.is-open .p-header__subMenu { position: fixed; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 20px; top: 80px; left: 0; right: 0; background-color: #fff; padding: 32px 20px 30px 0; border-top: 1px solid #ccc; width: 100%; } } @media screen and (min-width: 980px) { .p-header__subMenuItem { border-bottom: none; } .p-header__subMenuItem:first-child { border-top: none; } } .p-header__subMenuLink { position: relative; color: #1B120C; display: block; } @media screen and (max-width: 979px) { .p-header__subMenuLink { padding: 15px 0; font-size: 14px; line-height: 1.2; letter-spacing: 0.05em; } } @media screen and (min-width: 980px) { .p-header__subMenuLink { padding: 0; font-size: 14px; line-height: 1.2; letter-spacing: 0.05em; } } @media screen and (min-width: 980px) { .p-header__subMenuLink:after { content: ""; display: block; position: absolute; bottom: -8px; width: 0; height: 1px; background: #1B120C; transition: width 0.5s; } } @media screen and (min-width: 980px) { .p-header__subMenuLink:hover:after { width: 100%; } } .p-mobileNavButton { padding: 5px; border: none; z-index: 100; display: flex; flex-wrap: wrap; align-items: flex-start; align-content: center; justify-items: flex-start; justify-content: center; width: 70px; height: 100%; background: #fff; outline: none; appearance: none; } @media screen and (min-width: 980px) { .p-mobileNavButton { display: none; } } .p-mobileNavButton span { transition: all 0.4s; } .p-mobileNavButton span:first-of-type, .p-mobileNavButton span:nth-of-type(2), .p-mobileNavButton span:nth-of-type(3) { content: ""; display: block; width: 32px; height: 1px; background-color: #1C1310; } .p-mobileNavButton span:nth-of-type(2) { margin-top: 8px; } .p-mobileNavButton span:nth-of-type(3) { margin-top: 8px; } .p-headerMenu { padding-top: 60px; position: fixed; top: 0; left: 100%; z-index: 0; width: 100%; height: 100svh; height: 100dvh; background-color: #fff; } @media screen and (min-width: 980px) { .p-headerMenu { position: relative; top: auto; left: auto; width: auto; height: auto; margin: 0; padding: 0; border: none; } } .p-headerMenuInner { position: relative; z-index: 200; height: 100%; overflow-y: scroll; transition-delay: 0.2s; transition: all 0.6s; opacity: 0; } @media screen and (min-width: 980px) { .p-headerMenuInner { margin: 0 auto; height: auto; overflow-y: visible; opacity: 1; } } .p-headerMenuInner.menu-visible { overflow-y: visible; } .p-headerMenu::after { content: ""; display: block; position: fixed; top: 0; left: 0; z-index: -10; width: 100%; height: 100svh; height: 100lvh; background-color: #fff; visibility: hidden; transition: all 0.3s; opacity: 0; } @media screen and (max-width: 979px) { .p-headerMenuContent { background-color: #F4F5F4; padding: 10px 20px 40px; } } .p-headerMenuContent .p-contact { margin: 40px 20px 0; color: #1B120C !important; } @media screen and (min-width: 980px) { .p-headerMenuContent .p-contact { display: none; } } .menu-open { overflow: hidden; } .menu-open .p-headerMenu { left: 0; } .menu-open .p-headerMenuInner { top: 0; opacity: 1; } .menu-open .p-headerMenu::after { top: 0; z-index: 10; visibility: visible; opacity: 1; } .menu-open .p-mobileNavButton { background-color: transparent; } .menu-open .p-mobileNavButton span:first-of-type, .menu-open .p-mobileNavButton span:nth-of-type(3) { background-color: #1C1310; } .menu-open .p-mobileNavButton span:first-of-type { transform: translate(0px, 8px) rotate(45deg); } .menu-open .p-mobileNavButton span:nth-of-type(2) { opacity: 0; } .menu-open .p-mobileNavButton span:nth-of-type(3) { transform: translate(0px, -9px) rotate(135deg); } /* * footer */ .p-footer { background-color: #F4F5F4; padding: 60px 0 40px; } @media screen and (min-width: 980px) { .p-footer { padding: 96px 0 20px; } } @media screen and (min-width: 1215px) { .p-footer { width: 1280px; margin-inline: auto; } } .p-footerNav { display: flex; flex-direction: column; align-items: center; padding-inline: 40px; } @media screen and (min-width: 768px) { .p-footerNav { width: 640px; margin-inline: auto; } } @media screen and (min-width: 980px) { .p-footerNav { width: 960px; margin-inline: auto; flex-direction: row; justify-content: space-between; padding-inline: 0; } } .p-footerNav__logo a { display: block; transition: all 0.5s; } .p-footerNav__logo a:hover { opacity: 0.5; } .p-footerNav__logo img { width: 136px; height: auto; } .p-footerNav__mainLinks, .p-footerNav__subLinks { width: 100%; padding-block: 40px; } .p-footerNav__mainLinks ul, .p-footerNav__subLinks ul { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 30px 20px; } .p-footerNav__mainLinks li, .p-footerNav__subLinks li { text-align: left; } .p-footerNav__mainLinks a, .p-footerNav__subLinks a { color: #1B120C; font-size: 14px; letter-spacing: 0.05em; text-decoration: none; line-height: 1.2; transition: all 0.5s; } .p-footerNav__mainLinks a:hover, .p-footerNav__subLinks a:hover { opacity: 0.5; } .p-footerNav__mainLinks { border-bottom: 1px solid #CCCCCC; } @media screen and (min-width: 980px) { .p-footerNav__mainLinks { border-bottom: none; width: auto; padding: 0 40px; box-sizing: border-box; } } @media screen and (min-width: 980px) { .p-footerNav__mainLinks ul { display: flex; gap: 0 40px; } } @media screen and (min-width: 980px) { .p-footerNav__subLinks { width: 200px !important; padding-block: 0; } } @media screen and (min-width: 980px) { .p-footerNav__subLinks ul { border-left: 1px solid #CCCCCC; grid-template-columns: 1fr; gap: 16px 0px; padding-left: 40px; } } @media screen and (max-width: 979px) { .p-footerNav__sns { display: flex; justify-content: center; } } @media screen and (min-width: 980px) { .p-footerNav__sns { padding-left: 40px; } } @media screen and (max-width: 979px) { .p-footerNav__snsItem { width: 40px; } } @media screen and (min-width: 980px) { .p-footerNav__snsItem { width: 40px; } } @media screen and (max-width: 979px) { .p-footerNav__subLinks ul + .p-footerNav__sns { margin-top: 32px; } } @media screen and (min-width: 980px) { .p-footerNav__subLinks ul + .p-footerNav__sns { margin-top: 24px; } } .p-footerCopyright { color: #0E0F10; font-size: 10px; letter-spacing: 0.05em; text-align: center; line-height: 1.2; margin-top: 20px; } @media screen and (min-width: 980px) { .p-footerCopyright { margin-top: 60px; } } /* * footer */ .p-footerContact { background-color: #2D2B29; position: relative; overflow: hidden; } @media screen and (max-width: 767px) { .p-footerContact { padding: 60px 32px; } } @media screen and (min-width: 768px) { .p-footerContact { padding: 120px 2%; } } @media screen and (min-width: 1215px) { .p-footerContact { width: 1280px; margin-inline: auto; } } .p-footerContact__inner { margin-inline: auto; } @media screen and (min-width: 768px) { .p-footerContact__inner { max-width: 960px; } } @media screen and (max-width: 767px) { .p-footerContact .c-basicText.-size--32-40 + .c-basicText.-size--12-14 { margin-top: 16px; } } @media screen and (min-width: 768px) { .p-footerContact .c-basicText.-size--32-40 + .c-basicText.-size--12-14 { margin-top: 20px; } } @media screen and (max-width: 767px) { .p-footerContact__content { margin-top: 48px; } } @media screen and (min-width: 768px) { .p-footerContact__content { margin-top: 48px; } } @media screen and (max-width: 767px) { .p-footerContact .p-contact { margin-top: 48px; } } @media screen and (min-width: 768px) { .p-footerContact .p-contact { margin-top: 48px; } } @media screen and (max-width: 767px) { .p-footerContact__itemForm { margin-top: 48px; } } @media screen and (min-width: 768px) { .p-footerContact__itemForm { margin-top: 48px; } } @media screen and (max-width: 767px) { .p-footerContact__itemForm .c-basicButtonT1 { width: 100%; height: 80px; } } @media screen and (min-width: 768px) { .p-footerContact__itemForm .c-basicButtonT1 { width: 360px; height: 80px; } } .p-footerContact__image { margin-inline: auto; } @media screen and (max-width: 767px) { .p-footerContact__image { width: 240px; margin-top: 64px; } } @media screen and (min-width: 768px) { .p-footerContact__image { width: 80%; margin-top: 64px; } } @media screen and (min-width: 980px) { .p-footerContact__image { width: 100%; } } .p-footerContact__image img { display: block; margin-inline: auto; } .l-footerContactGridCol { width: 100%; } @media screen and (min-width: 980px) { .l-footerContactGridCol:first-child { width: 500px; } } @media screen and (min-width: 980px) { .l-footerContactGridCol:last-child { width: 400px; } } /* * main */ .l-wrapper { overflow: hidden; } .l-main { position: relative; z-index: 1; overflow: hidden; margin-top: 70px; } @media screen and (min-width: 768px) { .l-main { margin-top: 80px; } } @media screen and (min-width: 1215px) { .l-main { width: 1280px; margin-inline: auto; } } @media screen and (min-width: 768px) { .l-main .l-container.-width--640, .l-main .l-container.-width--880, .l-main .l-container.-width--960, .l-main .l-container.-width--1120, .l-main .l-container.-width--1200 { padding: 0 2%; } } @media screen and (min-width: 1215px) { .l-main .l-container.-width--640, .l-main .l-container.-width--880, .l-main .l-container.-width--960, .l-main .l-container.-width--1120, .l-main .l-container.-width--1200 { padding: 0; } } /* * container */ .l-container { margin: 0 auto; } .l-container.-spMg--0 { padding: 0; } @media screen and (min-width: 768px) { .l-container.-spMg--0 { padding: 0 22px; } } @media screen and (min-width: 768px) { .l-container.-pcMg--0 { padding: 0; } } @media screen and (max-width: 767px) { .l-container.-spGap--bass { padding-inline: 4%; } } @media screen and (min-width: 768px) { .-width--640 { max-width: 640px; } } @media screen and (min-width: 768px) { .-width--768 { max-width: 724px; } } @media screen and (min-width: 768px) { .-width--800 { max-width: 800px; } } @media screen and (min-width: 768px) { .-width--860 { max-width: 860px; } } @media screen and (min-width: 768px) { .-width--880 { max-width: 880px; } } @media screen and (min-width: 768px) { .-width--920 { max-width: 920px; } } @media screen and (min-width: 768px) { .-width--960 { max-width: 960px; } } @media screen and (min-width: 768px) { .-width--1000 { max-width: 1000px; } } @media screen and (min-width: 768px) { .-width--1024 { max-width: 1024px; } } @media screen and (min-width: 768px) { .-width--1100 { max-width: 1100px; } } @media screen and (min-width: 768px) { .-width--1120 { max-width: 1120px; } } @media screen and (min-width: 768px) { .-width--1160 { max-width: 1160px; } } @media screen and (min-width: 768px) { .-width--1200 { max-width: 1200px; } } @media screen and (min-width: 980px) { .-width--1230 { margin-left: 9.5588235294%; width: 90.4411764706%; } } .-width--full { padding: 0; max-width: 100%; } /* * breadcrumb */ .p-breadcrumbNav { margin-bottom: 0; padding: 12px 20px; } @media screen and (min-width: 1160px) { .p-breadcrumbNav { padding: 20px 40px; } } .p-breadcrumbNavList { display: flex; flex-wrap: wrap; align-items: flex-start; align-content: flex-start; justify-items: flex-start; justify-content: flex-start; margin-bottom: 0; padding-left: 0; gap: 8px; } .p-breadcrumbNavList li { font-size: 10px; } @media screen and (min-width: 768px) { .p-breadcrumbNavList li { font-size: 12px; } } .p-breadcrumbNavList li:nth-of-type(n+2)::before { margin: 0 10px 0 0; border-top: 0.5px solid #CCCCCC; border-right: 0.5px solid #CCCCCC; content: ""; display: inline-block; width: 6px; height: 6px; transform: rotate(45deg); } @media screen and (min-width: 768px) { .p-breadcrumbNavList li:nth-of-type(n+2)::before { width: 8px; height: 8px; } } .p-breadcrumbNavList li b { font-weight: normal; color: #999999; } .p-breadcrumbNavList li a { transition: all 0.3s; text-decoration: underline; color: #1B120C; } @media screen and (min-width: 768px) { .p-breadcrumbNavList li a:hover { text-decoration: none; } } /* * 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: 3.90625%; row-gap: 3.90625vw; } .l-grid.-has--gap > .l-gridCol { width: 100%; } .l-grid.-has--gap > .-col--1 { width: 4.7526041667%; } .l-grid.-has--gap > .-col--2 { width: 13.4114583333%; } .l-grid.-has--gap > .-col--3 { width: 22.0703125%; } .l-grid.-has--gap > .-col--4 { width: 30.7291666667%; } .l-grid.-has--gap > .-col--5 { width: 39.3880208333%; } .l-grid.-has--gap > .-col--6 { width: 48.046875%; } .l-grid.-has--gap > .-col--7 { width: 56.7057291667%; } .l-grid.-has--gap > .-col--8 { width: 65.3645833333%; } .l-grid.-has--gap > .-col--9 { width: 74.0234375%; } .l-grid.-has--gap > .-col--10 { width: 82.6822916667%; } .l-grid.-has--gap > .-col--11 { width: 91.3411458333%; } @media screen and (min-width: 768px) { .l-grid.-has--gap > .-pcCol--1 { width: 4.7526041667%; } } @media screen and (min-width: 768px) { .l-grid.-has--gap > .-pcCol--2 { width: 13.4114583333%; } } @media screen and (min-width: 768px) { .l-grid.-has--gap > .-pcCol--3 { width: 22.0703125%; } } @media screen and (min-width: 768px) { .l-grid.-has--gap > .-pcCol--4 { width: 30.7291666667%; } } @media screen and (min-width: 768px) { .l-grid.-has--gap > .-pcCol--5 { width: 39.3880208333%; } } @media screen and (min-width: 768px) { .l-grid.-has--gap > .-pcCol--6 { width: 48.046875%; } } @media screen and (min-width: 768px) { .l-grid.-has--gap > .-pcCol--7 { width: 56.7057291667%; } } @media screen and (min-width: 768px) { .l-grid.-has--gap > .-pcCol--8 { width: 65.3645833333%; } } @media screen and (min-width: 768px) { .l-grid.-has--gap > .-pcCol--9 { width: 74.0234375%; } } @media screen and (min-width: 768px) { .l-grid.-has--gap > .-pcCol--10 { width: 82.6822916667%; } } @media screen and (min-width: 768px) { .l-grid.-has--gap > .-pcCol--11 { width: 91.3411458333%; } } .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: 768px) { .l-gridCol.-pcCol--1 { width: 8.3333333333%; } } @media screen and (min-width: 768px) { .l-gridCol.-pcCol--2 { width: 16.6666666667%; } } @media screen and (min-width: 768px) { .l-gridCol.-pcCol--3 { width: 25%; } } @media screen and (min-width: 768px) { .l-gridCol.-pcCol--4 { width: 33.3333333333%; } } @media screen and (min-width: 768px) { .l-gridCol.-pcCol--5 { width: 41.6666666667%; } } @media screen and (min-width: 768px) { .l-gridCol.-pcCol--6 { width: 50%; } } @media screen and (min-width: 768px) { .l-gridCol.-pcCol--7 { width: 58.3333333333%; } } @media screen and (min-width: 768px) { .l-gridCol.-pcCol--8 { width: 66.6666666667%; } } @media screen and (min-width: 768px) { .l-gridCol.-pcCol--9 { width: 75%; } } @media screen and (min-width: 768px) { .l-gridCol.-pcCol--10 { width: 83.3333333333%; } } @media screen and (min-width: 768px) { .l-gridCol.-pcCol--11 { width: 91.6666666667%; } } @media screen and (min-width: 768px) { .l-gridCol.-pcCol--12 { width: 100%; } } .l-pcGridT1 { display: grid; } @media screen and (max-width: 767px) { .l-pcGridT1.-spCol--2 { grid-template-columns: repeat(2, 1fr); } } @media screen and (min-width: 768px) { .l-pcGridT1.-pcCol--2 { grid-template-columns: repeat(2, 1fr); } } @media screen and (min-width: 768px) { .l-pcGridT1.-pcCol--3 { grid-template-columns: repeat(3, 1fr); } } @media screen and (min-width: 768px) { .l-pcGridT1.-pcCol--4 { grid-template-columns: repeat(4, 1fr); } } @media screen and (max-width: 767px) { .l-pcGridT1.-spGap--16 { gap: 16px; } } @media screen and (min-width: 768px) { .l-pcGridT1.-pcGap--20 { gap: 20px; } } @media screen and (min-width: 768px) { .l-pcGridT1.-pcGap--40 { gap: 40px; } } @media screen and (min-width: 768px) { .l-pcGridT1.-pcItems--center { align-items: center; } } /* * button */ .c-basicButtonT1 { position: relative; display: inline-flex; align-items: center; justify-content: center; color: #1B120C; background-color: #FFFFFF; font-size: 14px; font-weight: 400; line-height: 1.3; border: 1px solid #CCCCCC; text-decoration: none; outline: none; appearance: none; transition: all 0.5s; } .c-basicButtonT1:hover { background-color: #DDD; } @media screen and (max-width: 767px) { .c-basicButtonT1 { padding: 20px 40px; } } @media screen and (min-width: 768px) { .c-basicButtonT1 { padding: 20px 80px; } } .c-basicButtonT1.-shadowT1 { box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.1); } .c-basicButtonT1.-arrowT1::after { position: absolute; top: 50%; right: 10%; transform: translateY(-50%); transition: all 0.3s; content: ""; display: inline-block; width: 20px; height: 5px; 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%22la1%22%20data-name%3D%22l1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2041.3%208.9%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.st0%20%7B%20fill%3A%20%23707070%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%2241.3%208.9%200%208.9%200%207.9%2038.7%207.9%2030.4%20.8%2031.1%200%2041.3%208.9%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: cover; } @media screen and (min-width: 768px) { .c-basicButtonT1.-arrowT1::after { width: 41px; height: 9px; } } .c-basicButtonT1.-arrowT1:hover::after { right: 8%; } .c-basicButtonT1.-color--black { color: #FFFFFF; background-color: #1B120C; } .c-basicButtonT1.-color--black:hover { background-color: #666666; } .c-cartButton { position: relative; display: inline-flex; align-items: center; justify-content: center; color: #FFFFFF; background-color: #1B120C; font-weight: 400; line-height: 1.3; text-decoration: none; outline: none; appearance: none; letter-spacing: 0.2em; transition: all 0.5s; } .c-cartButton:hover { background-color: #666; } @media screen and (max-width: 767px) { .c-cartButton { padding: 20px 40px; font-size: 14px; } } @media screen and (min-width: 768px) { .c-cartButton { padding: 36px; font-size: 16px; } } .c-cartButton.-w--100pct { width: 100%; } /* * media */ .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-gmap.-aspect--normal { padding-top: 56.25%; } .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-basicImg { margin: 0; } .c-basicImg.-img--100pct img { width: 100%; } a .c-basicImg img { transition: opacity 0.5s ease-in-out; } a .c-basicImg img:hover { opacity: 0.6; } #splash { /*fixedで全面に固定*/ position: fixed; z-index: 1999 !important; width: 100%; height: 100%; background: #FFF; text-align: center; color: #999; top: 0; left: 0; transition: opacity 1.5s ease-out; /* フェードアウトのアニメーション時間 */ opacity: 1; } #splash.is-hidden { opacity: 0; /* アニメーション完了後にdisplay: none; を設定する場合はJavaScriptで行う */ } /* Loadingバー中央配置　*/ #splash_text { position: absolute; top: 50%; left: 50%; z-index: 999; width: 100%; transform: translate(-50%, -50%); color: #CCC; } .splash_hd { position: absolute; top: 53%; left: 50%; z-index: 999; width: 100%; transform: translate(-50%, -50%); } .splash_hd .ch_note { color: #CCC; font-size: 12px; } /* * text */ .c-basicText { font-weight: 400; font-optical-sizing: auto; font-style: normal; line-height: 1.5; margin-block: calc((1em - 1lh) / 2); margin: 0; } @media screen and (max-width: 767px) { .c-basicText.-size--12-14 { font-size: 12px; } } @media screen and (min-width: 768px) { .c-basicText.-size--12-14 { font-size: 14px; } } @media screen and (max-width: 767px) { .c-basicText.-size--14-16 { font-size: 14px; } } @media screen and (min-width: 768px) { .c-basicText.-size--14-16 { font-size: 16px; } } @media screen and (max-width: 767px) { .c-basicText.-size--16-20 { font-size: 16px; } } @media screen and (min-width: 768px) { .c-basicText.-size--16-20 { font-size: 20px; } } @media screen and (max-width: 767px) { .c-basicText.-size--16-24 { font-size: 16px; } } @media screen and (min-width: 768px) { .c-basicText.-size--16-24 { font-size: 24px; } } @media screen and (max-width: 767px) { .c-basicText.-size--16-32 { font-size: 16px; } } @media screen and (min-width: 768px) { .c-basicText.-size--16-32 { font-size: 32px; } } @media screen and (max-width: 767px) { .c-basicText.-size--18-24 { font-size: 18px; } } @media screen and (min-width: 768px) { .c-basicText.-size--18-24 { font-size: 24px; } } @media screen and (max-width: 767px) { .c-basicText.-size--18-32 { font-size: 18px; } } @media screen and (min-width: 768px) { .c-basicText.-size--18-32 { font-size: 32px; } } @media screen and (max-width: 767px) { .c-basicText.-size--20-24 { font-size: 20px; } } @media screen and (min-width: 768px) { .c-basicText.-size--20-24 { font-size: 24px; } } .c-basicText.-size--20-32 { font-size: 20px; } @media screen and (min-width: 768px) { .c-basicText.-size--20-32 { font-size: 32px; } } @media screen and (max-width: 767px) { .c-basicText.-size--20-40 { font-size: 20px; } } @media screen and (min-width: 768px) { .c-basicText.-size--20-40 { font-size: 40px; } } .c-basicText.-size--24-32 { font-size: 24px; } @media screen and (min-width: 768px) { .c-basicText.-size--24-32 { font-size: 32px; } } .c-basicText.-size--24-40 { font-size: 24px; } @media screen and (min-width: 768px) { .c-basicText.-size--24-40 { font-size: 40px; } } @media screen and (max-width: 767px) { .c-basicText.-size--24-48 { font-size: 24px; } } @media screen and (min-width: 768px) { .c-basicText.-size--24-48 { font-size: 48px; } } .c-basicText.-size--32-40 { font-size: 32px; } @media screen and (min-width: 768px) { .c-basicText.-size--32-40 { font-size: 40px; } } @media screen and (max-width: 767px) { .c-basicText.-size--40-60 { font-size: 40px; } } @media screen and (min-width: 768px) { .c-basicText.-size--40-60 { font-size: 60px; } } .c-basicText.-family--roboto { font-family: "Roboto", sans-serif; font-weight: 300; } .c-basicText.-weight--300 { font-weight: 300; } @media screen and (min-width: 768px) { .c-basicText.-pcWeight--300 { font-weight: 300; } } .c-basicText.-weight--700 { font-weight: 700; } .c-basicText.-leading-1 { line-height: 1; } .c-basicText.-leading-1\.1 { line-height: 1.1; } .c-basicText.-leading-1\.2 { line-height: 1.2; } .c-basicText.-leading-1\.3 { line-height: 1.3; } .c-basicText.-leading-2 { line-height: 2; } .c-basicText.-tracking-0\.15 { letter-spacing: 0.15em; } .c-basicText.-tracking-0\.1 { letter-spacing: 0.1em; } .c-basicUl { list-style: disc; } @media screen and (max-width: 767px) { .c-basicUl { margin: 0 0 0 20px; } } @media screen and (min-width: 768px) { .c-basicUl { margin: 0 0 0 24px; } } .c-basicUl li { font-weight: 400; font-optical-sizing: auto; font-style: normal; line-height: 1.5; margin-block: calc((1em - 1lh) / 2); margin: 0; padding-block: 2px; } @media screen and (max-width: 767px) { .c-basicUl li { font-size: 14px; } } @media screen and (min-width: 768px) { .c-basicUl li { font-size: 16px; } } .c-basicUl li:first-child { padding-block-start: 0; } .c-basicUl li:last-child { padding-block-end: 0; } .c-basicUl.-inline { display: flex; flex-wrap: wrap; gap: 0 32px; } .c-basicUl.-inline li:first-child { padding-block-start: 8px; } .c-basicUl.-inline li:last-child { padding-block-end: 8px; } .c-basicNote { list-style: none; margin: 0; } .c-basicNote li { font-weight: 400; font-optical-sizing: auto; font-style: normal; line-height: 1.5; text-box: trim-both cap alphabetic; text-indent: -1em; padding-left: 1em; margin: 0; padding-block: 8px; } @media screen and (max-width: 767px) { .c-basicNote li { font-size: 12px; } } @media screen and (min-width: 768px) { .c-basicNote li { font-size: 14px; } } .c-basicTag { display: inline-block; background-color: #F4F5F4; font-size: 12px; color: #0E0F10; } @media screen and (max-width: 767px) { .c-basicTag { font-size: 12px; padding: 4px 16px; } } @media screen and (min-width: 768px) { .c-basicTag { font-size: 16px; padding: 4px 16px; } } .c-basicTagContainer { display: flex; flex-wrap: wrap; align-items: center; } @media screen and (max-width: 767px) { .c-basicTagContainer { gap: 6px; } } @media screen and (min-width: 768px) { .c-basicTagContainer { gap: 10px; } } .c-basicTagT2 { display: inline-flex; align-items: center; justify-content: center; background-color: #FFF; color: #0E0F10; border: 1px solid #CCCCCC; border-radius: 5px; text-align: center; line-height: 1.3; } @media screen and (max-width: 767px) { .c-basicTagT2 { font-size: 12px; padding: 8px 14px; } } @media screen and (min-width: 768px) { .c-basicTagT2 { font-size: 16px; padding: 8px 16px; } } .c-basicTagT2Container { display: flex; flex-wrap: wrap; } @media screen and (max-width: 767px) { .c-basicTagT2Container { gap: 6px; } } @media screen and (min-width: 768px) { .c-basicTagT2Container { gap: 10px; } } @media screen and (max-width: 767px) { .c-basicTagT2Container.-sp-col2 { display: grid; grid-template-columns: repeat(2, 1fr); } } @media screen and (max-width: 767px) { .c-basicTagT2Container.-sp-col2 .c-basicTagT2 { min-height: 60px; } } .c-basicTable { border-collapse: collapse; width: 100%; border-top: 1px solid #CCCCCC; } .c-basicTable tr { border-bottom: 1px solid #CCCCCC; } @media screen and (max-width: 767px) { .c-basicTable th, .c-basicTable td { font-size: 14px; padding: 8px 14px; } } @media screen and (min-width: 768px) { .c-basicTable th, .c-basicTable td { font-size: 16px; padding: 12px 16px; } } @media screen and (max-width: 767px) { .c-basicTable.-spRow tr { display: block; } .c-basicTable.-spRow tr *:first-child { padding-block-start: 20px; } .c-basicTable.-spRow tr *:last-child { padding-block-end: 20px; } .c-basicTable.-spRow tr th, .c-basicTable.-spRow tr td { display: block; padding-block: 4px; } .c-basicTable.-spRow tr th { padding-block-end: 16px; } } .c-basicPrice__price { color: #1B120C; font-family: "Roboto", sans-serif; font-weight: 700; line-height: 1; text-box: trim-both cap alphabetic; } @media screen and (max-width: 767px) { .c-basicPrice__price { font-size: 40px; } } @media screen and (min-width: 768px) { .c-basicPrice__price { font-size: 56px; } } @media screen and (max-width: 767px) { .c-basicPrice__price .ec-unit { font-size: 24px; } } @media screen and (min-width: 768px) { .c-basicPrice__price .ec-unit { font-size: 40px; } } .c-basicPrice__tax { color: #0E0F10; font-weight: 400; line-height: 1; text-box: trim-both cap alphabetic; } @media screen and (max-width: 767px) { .c-basicPrice__tax { font-size: 14px; } } @media screen and (min-width: 768px) { .c-basicPrice__tax { font-size: 16px; } } .c-basicA { color: #0E0F10; text-decoration: underline; transition: opacity 0.5s ease-in-out; } /* * text */ .c-basicBox h2, .c-basicBox p { margin: 0; } /* * form */ .c-selectbox { position: relative; border: 1px solid #CCCCCC; border-radius: 8px; overflow: hidden; } .c-selectbox::before, .c-selectbox::after { position: absolute; content: ""; pointer-events: none; } .c-selectbox::before { display: inline-block; right: 0; width: 40px; height: 40px; background-color: #f4f5f4; border-left: 1px solid #CCCCCC; } .c-selectbox::after { position: absolute; top: 50%; right: 13px; transform: translateY(-50%); content: "▼"; font-size: 10px; color: #1B120C; line-height: 1; text-box: trim-both cap alphabetic; } .c-selectbox select { display: flex; align-items: center; appearance: none; min-width: 100px; height: 40px; padding-left: 24px; border: none; background-color: #ffffff; color: #333; line-height: 1; cursor: pointer; } @media screen and (max-width: 767px) { .c-selectbox select { font-size: 14px; } } @media screen and (min-width: 768px) { .c-selectbox select { font-size: 14px; } } .c-selectbox select:focus { outline: 2px solid #f4f5f4; } .p-formToShopify__block { display: flex; align-items: center; } .p-formToShopify__block:nth-child(2) { justify-content: space-between; } @media screen and (max-width: 767px) { .p-formToShopify__block:nth-child(2) { margin-top: 10px; } } @media screen and (min-width: 768px) { .p-formToShopify__block:nth-child(2) { margin-top: 20px; } } @media screen and (max-width: 767px) { .p-formToShopify__block:nth-child(3) { margin-top: 20px; } } @media screen and (min-width: 768px) { .p-formToShopify__block:nth-child(3) { margin-top: 40px; } } /* * animation */ .a-fadeInLeftToRight1 { opacity: 0; } .a-fadeInLeftToRight1.is-active { animation: fadeInLeftToRight1 0.5s ease-out 0s 1 normal; animation-fill-mode: forwards; } .a-fadeInLeftToRight1 { opacity: 0; } .a-fadeInLeftToRight1.is-active { animation: fadeInLeftToRight1 0.5s ease-out 0s 1 normal; animation-fill-mode: forwards; } .a-fadeInLeftToRight2 { opacity: 0; } .a-fadeInLeftToRight2.is-active { animation: fadeInLeftToRight2 0.5s ease-out 0s 1 normal; animation-fill-mode: forwards; } .a-fadeInBottomToTop1 { opacity: 0; } .a-fadeInBottomToTop1.is-active { animation: fadeInBottomToTop1 0.5s ease-out 0s 1 normal; animation-fill-mode: forwards; } @keyframes fadeInLeftToRight1 { 0% { opacity: 0; transform: translateX(-30px); } 100% { opacity: 1; transform: translateX(0); } } @keyframes fadeInLeftToRight2 { 0% { opacity: 0; transform: translate(-60%, -50%); } 100% { opacity: 1; transform: translate(-50%, -50%); } } @keyframes fadeInLeftToRight1_productHeadingTop { 0% { opacity: 0; transform: translate(-30px, 40px); } 100% { opacity: 1; transform: translate(0, 40px); } } @keyframes fadeInBottomToTop1 { 0% { opacity: 0; transform: translateY(60px); } 100% { opacity: 1; transform: translateY(0); } } /* * contentComponent */ .p-contact__tel { font-weight: 700; font-family: "Roboto", sans-serif; font-size: 40px; line-height: 1.17; letter-spacing: 0.05em; text-box: trim-both cap alphabetic; margin-top: 24px; } .p-contact__tel a { color: inherit; text-decoration: none; } .p-contact__hours { line-height: 1.5; letter-spacing: 0.1em; margin-top: 16px; } @media screen and (max-width: 767px) { .p-contact__hours { font-size: 12px; } } @media screen and (min-width: 768px) { .p-contact__hours { font-size: 14px; } } .p-contact__hours__subText { font-size: 10px; } @media screen and (min-width: 768px) { .p-contact__hours__subText { font-size: 12px; } } @media screen and (max-width: 767px) { .p-contact__itemLine { margin-top: 24px; } } @media screen and (min-width: 768px) { .p-contact__itemLine { margin-top: 48px; } } .p-contact__lineLink { color: inherit; display: flex; align-items: center; justify-content: flex-start; } @media screen and (min-width: 768px) { .p-contact__lineLink { justify-content: flex-start; } } .p-contact__lineIcon { width: 32px; margin-right: 8px; } @media screen and (min-width: 768px) { .p-contact__lineIcon { width: 40px; margin-right: 16px; } } .p-contact__lineIcon img { vertical-align: middle; } .p-contact__lineText { line-height: 1.67; letter-spacing: 0.07em; } @media screen and (max-width: 767px) { .p-contact__lineText { font-size: 11px; } } @media screen and (min-width: 768px) { .p-contact__lineText { font-size: 14px; } } .p-headingT1 { text-align: center; } @media screen and (max-width: 767px) { .p-headingT1 { margin-block-end: 40px; } } @media screen and (min-width: 768px) { .p-headingT1 { margin-block-end: 48px; } } @media screen and (max-width: 767px) { .p-headingT1 .c-basicText.-size--32-40 + .c-basicText.-size--12-14 { margin-block-start: 14px; } } @media screen and (min-width: 768px) { .p-headingT1 .c-basicText.-size--32-40 + .c-basicText.-size--12-14 { margin-block-start: 20px; } } .p-basicHeading { background-color: #F4F5F4; position: relative; width: 100%; overflow: hidden; } @media screen and (max-width: 767px) { .p-basicHeading { padding-block: 40px; } } @media screen and (min-width: 768px) { .p-basicHeading { padding-block: 64px; } } .p-basicHeading__textBox:has(.p-basicHeading__image) { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; } @media screen and (max-width: 767px) { .p-basicHeading__textBox:has(.p-basicHeading__image) { left: 20px; } } @media screen and (min-width: 768px) { .p-basicHeading__textBox:has(.p-basicHeading__image) { left: 80px; } } .p-basicHeading__textBox.-text--center:has(.p-basicHeading__image) { left: 50%; transform: translate(-50%, -50%); text-align: center; } @media screen and (max-width: 767px) { .p-basicHeading:has(.p-basicHeading__image) { min-height: auto; padding-block: 0; } } @media screen and (min-width: 768px) { .p-basicHeading:has(.p-basicHeading__image) { min-height: auto; padding-block: 0; } } .p-basicHeading:has(.p-basicHeading__image) .p-basicHeading__textBox { display: block; position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; } @media screen and (max-width: 767px) { .p-basicHeading:has(.p-basicHeading__image) .p-basicHeading__textBox { left: 20px; } } @media screen and (min-width: 768px) { .p-basicHeading:has(.p-basicHeading__image) .p-basicHeading__textBox { left: 80px; } } .p-basicHeading:has(.p-basicHeading__image) .p-basicHeading__textBox.-text--center { left: 50%; transform: translate(-50%, -50%); text-align: center; } .p-basicHeading__image { width: 100%; } .p-basicHeading__image img { width: 100%; } @media screen and (max-width: 767px) { .p-basicHeading .c-basicText.-size--24-48 + .c-basicText.-size--14-16 { margin-top: 20px; } } @media screen and (min-width: 768px) { .p-basicHeading .c-basicText.-size--24-48 + .c-basicText.-size--14-16 { margin-top: 32px; } } @media screen and (max-width: 767px) { .p-basicHeading .c-basicText.-size--14-16 + .c-basicText.-size--14-16 { margin-block-start: 40px; } } @media screen and (min-width: 768px) { .p-basicHeading .c-basicText.-size--14-16 + .c-basicText.-size--14-16 { margin-block-start: 48px; } } body.salon-style-series .p-basicHeading .c-basicText.-size--24-48, body.salon-style-series .p-basicHeading .c-basicText.-size--14-16 { color: #FFFFFF; } @media screen and (max-width: 767px) { .p-blockL1__inner { padding-block: 60px; } } @media screen and (min-width: 768px) { .p-blockL1__inner { padding-block: 120px; } } @media screen and (max-width: 767px) { .p-blockL1__inner.-pd--t40-b60-t60-b120 { padding-block: 40px 60px; } } @media screen and (min-width: 768px) { .p-blockL1__inner.-pd--t40-b60-t60-b120 { padding-block: 60px 120px; } } @media screen and (max-width: 767px) { .p-blockL1__inner.-pd--t0-b60-t0-b120 { padding-block: 0px 60px; } } @media screen and (min-width: 768px) { .p-blockL1__inner.-pd--t0-b60-t0-b120 { padding-block: 0px 120px; } } .p-stack > *:first-child { margin-block-start: 0 !important; } .p-stack > *:last-child { margin-block-end: 0 !important; } @media screen and (max-width: 767px) { .p-stack.-ma__t--16-20 > * { margin-block-start: 16px; } } @media screen and (min-width: 768px) { .p-stack.-ma__t--16-20 > * { margin-block-start: 20px; } } .p-card { display: block; color: #0E0F10; text-decoration: none; transition: opacity 0.5s ease; } .p-card:hover { opacity: 0.5; } @media screen and (max-width: 767px) { .p-cardUnit .p-card { width: 80%; margin-inline: auto; } } @media screen and (max-width: 767px) { .p-cardUnit .l-pcGridT1Col + .l-pcGridT1Col { margin-top: 32px; } } @media screen and (max-width: 767px) { .p-textBackground.-sp-white { background-color: rgba(255, 255, 255, 0.4); } } @media screen and (max-width: 767px) { .p-textBackground.-pd--sp-12 { padding: 12px; } } @media screen and (max-width: 767px) { body.salon-style-series .p-textBackground.-sp-white { background-color: rgba(0, 0, 0, 0.4); } } @media screen and (max-width: 767px) { .p-pager { margin-top: 40px; } } @media screen and (min-width: 768px) { .p-pager { margin-top: 40px; display: flex; justify-content: flex-end; } } @media screen and (min-width: 768px) { .p-pager__next, .p-pager__prev { width: 48%; } } @media screen and (min-width: 768px) { .p-pager:has(.p-pager__prev) { justify-content: space-between; } } .p-pager__a { display: block; transition: opacity 0.5s ease; } .p-pager__a:hover { opacity: 0.5; } .p-pager__block { background-color: #F4F5F4; } @media screen and (max-width: 767px) { .p-pager__block { margin-top: 12px; } } @media screen and (min-width: 768px) { .p-pager__block { margin-top: 32px; } } @media screen and (max-width: 767px) { .p-pager__block__inner { padding: 12px; } } @media screen and (min-width: 768px) { .p-pager__block__inner { padding: 20px; } } @media screen and (max-width: 767px) { .p-pager__block .c-basicImg { width: 32%; } } @media screen and (min-width: 768px) { .p-pager__block .c-basicImg { width: 24%; } } @media screen and (max-width: 767px) { .p-pager__block .c-basicText { width: 68%; } } @media screen and (min-width: 768px) { .p-pager__block .c-basicText { width: 76%; } } .p-pager__prev .p-pager__flex { display: flex; align-items: center; justify-content: flex-start; } .p-pager__prev .p-pager__block .c-basicText { text-align: left; padding-left: 4%; } @media screen and (max-width: 767px) { .p-pager__next { margin-top: 40px; } } .p-pager__next .p-pager__flex { display: flex; align-items: center; justify-content: flex-end; } .p-pager__next .p-pager__block .c-basicText { text-align: right; padding-right: 4%; } /* * button */ .p-button-containerT1 { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px; } @media screen and (min-width: 768px) { .p-button-containerT1 { gap: 20px; } } .p-button-containerT1.-col { flex-direction: column; } .p-button-containerT1.-gap--20-40 { gap: 20px; } @media screen and (min-width: 768px) { .p-button-containerT1.-gap--20-40 { gap: 40px; } } .p-button-containerT1.-justify-start { justify-content: flex-start; } @media screen and (min-width: 768px) { .p-button-containerT1.-pc-justify-start { justify-content: flex-start; } } .p-button-containerT1.-mt--blockL1Btm { margin-block-start: 40px; } @media screen and (min-width: 768px) { .p-button-containerT1.-mt--blockL1Btm { margin-block-start: 80px; } } .p-button-containerT2 { display: flex; flex-wrap: wrap; flex-direction: column; gap: 20px; } @media screen and (min-width: 768px) { .p-button-containerT2 { justify-content: space-between; align-items: center; flex-direction: row; gap: 0; } } @media screen and (max-width: 767px) { .p-button-containerT2 .c-basicButtonT1 { height: 80px; } } @media screen and (min-width: 768px) { .p-button-containerT2 .c-basicButtonT1 { display: flex; width: 30%; height: 120px; padding-inline: 0; font-size: 16px; } } /* * form */ .p-form__item + .p-form__item { border-top: 1px solid #EEE; } @media screen and (max-width: 767px) { .p-form__item + .p-form__item { margin-block-start: 20px; padding-block-start: 20px; } } @media screen and (min-width: 768px) { .p-form__item + .p-form__item { margin-block-start: 24px; padding-block-start: 24px; } } @media screen and (max-width: 767px) { .p-form__label + .p-form__input { margin-block-start: 12px; } } @media screen and (min-width: 768px) { .p-form__label + .p-form__input { margin-block-start: 12px; } } @media screen and (max-width: 767px) { .p-form__input + .p-form__input { margin-block-start: 12px; } } @media screen and (min-width: 768px) { .p-form__input + .p-form__input { margin-block-start: 16px; } } @media screen and (max-width: 767px) { .p-form__label + .p-form__description { margin-block-start: 16px; } } @media screen and (min-width: 768px) { .p-form__label + .p-form__description { margin-block-start: 20px; } } @media screen and (max-width: 767px) { .p-form__description + .p-form__input { margin-block-start: 16px; } } @media screen and (min-width: 768px) { .p-form__description + .p-form__input { margin-block-start: 20px; } } @media screen and (max-width: 767px) { .p-form__input + .p-form__error { margin-block-start: 12px; } } @media screen and (min-width: 768px) { .p-form__input + .p-form__error { margin-block-start: 12px; } } .p-form__error { color: #C00; } .p-form__input.-flex { display: flex; align-items: center; } @media screen and (max-width: 767px) { .p-form__input.-flex { gap: 8px; } } @media screen and (min-width: 768px) { .p-form__input.-flex { gap: 8px; } } .p-form__input.-flex.-address .p-form__control { width: 80px; } .p-form__input.-flex.-phone .p-form__control { width: 80px; } .p-form__required { color: #C00; background-color: #ffe6e6; padding: 2px 4px; line-height: 1; font-size: 80%; } .p-form__control { display: block; width: 100%; font-weight: 400; line-height: 1.5; color: #333; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-color: #FFF; background-clip: padding-box; border: 1px solid #CCC; } @media screen and (max-width: 767px) { .p-form__control { font-size: 16px; padding: 4px 8px; } } @media screen and (min-width: 768px) { .p-form__control { font-size: 16px; padding: 6px 10px; } } .p-form__control.-calendar { width: 160px; } .p-form__check { display: flex; align-items: center; gap: 8px; } .p-form__check-input { appearance: checkbox; -webkit-appearance: checkbox; -moz-appearance: checkbox; width: 1em; height: 1em; cursor: pointer; pointer-events: auto; } /* * qaAccordion */ @media screen and (max-width: 767px) { .p-qaAccordion__details { margin-bottom: 14px; } } @media screen and (min-width: 768px) { .p-qaAccordion__details { margin-bottom: 20px; } } .p-qaAccordion__summary { /* display: list-item;以外を指定してデフォルトの三角形アイコンを消します */ display: block; border-bottom: 1px solid #CCCCCC; } .p-qaAccordion__summary::-webkit-details-marker { /* Safariで表示されるデフォルトの三角形アイコンを消します */ display: none; } .p-qaAccordion__summaryInner { position: relative; cursor: pointer; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } @media screen and (max-width: 767px) { .p-qaAccordion__summaryInner { padding: 16px 10px; } } @media screen and (min-width: 768px) { .p-qaAccordion__summaryInner { padding: 20px 24px; } } @media screen and (max-width: 767px) { .p-qaAccordion__summaryInner .c-basicText { width: 80%; } } @media screen and (min-width: 768px) { .p-qaAccordion__summaryInner .c-basicText { width: 90%; } } .p-qaAccordion__q, .p-qaAccordion__a { color: #1D1511; font-size: 18px; font-family: "Roboto", sans-serif; font-weight: 400; letter-spacing: 0.2em; width: 10%; } @media screen and (min-width: 768px) { .p-qaAccordion__q, .p-qaAccordion__a { font-size: 24px; width: 6%; } } .p-qaAccordion__icon { display: block; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 16px; height: 16px; flex-shrink: 0; transform-origin: center 43%; transition: transform 0.4s; } .p-qaAccordion__icon::before, .p-qaAccordion__icon::after { content: ""; position: absolute; display: block; width: 16px; height: 1px; background-color: #1B120C; transition: all 0.5s; } .p-qaAccordion__icon::before { top: 8px; left: 0; transform: rotate(0deg); } [open] .p-qaAccordion__icon::before { transform: rotate(45deg); } .p-qaAccordion__icon::after { top: 8px; left: 0; transform: rotate(90deg); } [open] .p-qaAccordion__icon::after { transform: rotate(135deg); } .p-qaAccordion__content { overflow: hidden; } .p-qaAccordion__contentInner { position: relative; cursor: pointer; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } @media screen and (max-width: 767px) { .p-qaAccordion__contentInner { padding: 16px 10px; } } @media screen and (min-width: 768px) { .p-qaAccordion__contentInner { padding: 20px 24px; } } @media screen and (max-width: 767px) { .p-qaAccordion__contentInner .c-basicText { width: 90%; } } @media screen and (min-width: 768px) { .p-qaAccordion__contentInner .c-basicText { width: 90%; } } /* * home */ @media screen and (min-width: 1215px) { .p-homeMainvisual { width: 1280px; margin-inline: auto; } } .p-mainVisualSliderController { position: relative; } @media screen and (max-width: 979px) { .p-mainVisualSliderController { padding: 25px 20px 0; } } @media screen and (min-width: 980px) { .p-mainVisualSliderController { padding: 40px 40px 0; } } @media screen and (min-width: 980px) { .p-mainVisualSliderController__row { display: flex; flex-direction: row; justify-content: space-between; align-items: center; } } .p-mainVisualSliderController__col { position: relative; } @media screen and (max-width: 979px) { .p-mainVisualSliderController__col { height: 24px; } } @media screen and (min-width: 980px) { .p-mainVisualSliderController__col { height: 40px; } } @media screen and (max-width: 979px) { .p-mainVisualSliderController__col:nth-of-type(1) { width: 160px; } } @media screen and (min-width: 980px) { .p-mainVisualSliderController__col:nth-of-type(1) { width: 200px; } } @media screen and (max-width: 979px) { .p-mainVisualSliderController__col:nth-of-type(2) { width: 100%; } } @media screen and (min-width: 980px) { .p-mainVisualSliderController__col:nth-of-type(2) { width: calc(100% - 200px); } } .p-mainVisualSlider .c-mainVisualSlider-button-prev, .p-mainVisualSlider .c-mainVisualSlider-button-next { z-index: 11; top: 50%; transform: translateY(-50%); margin-top: 0; transition: all 0.6s; } @media screen and (max-width: 979px) { .p-mainVisualSlider .c-mainVisualSlider-button-prev, .p-mainVisualSlider .c-mainVisualSlider-button-next { width: 31px; height: 24px; } } @media screen and (min-width: 980px) { .p-mainVisualSlider .c-mainVisualSlider-button-prev, .p-mainVisualSlider .c-mainVisualSlider-button-next { width: 52px; height: 40px; } } .p-mainVisualSlider .c-mainVisualSlider-button-prev:after, .p-mainVisualSlider .c-mainVisualSlider-button-next:after { content: ""; display: inline-block; background-repeat: no-repeat; background-size: cover; } @media screen and (max-width: 979px) { .p-mainVisualSlider .c-mainVisualSlider-button-prev:after, .p-mainVisualSlider .c-mainVisualSlider-button-next:after { width: 31px; height: 24px; } } @media screen and (min-width: 980px) { .p-mainVisualSlider .c-mainVisualSlider-button-prev:after, .p-mainVisualSlider .c-mainVisualSlider-button-next:after { width: 52px; height: 40px; } } @media screen and (min-width: 980px) { .p-mainVisualSlider .c-mainVisualSlider-button-prev:hover, .p-mainVisualSlider .c-mainVisualSlider-button-next:hover { opacity: 0.4; } } .p-mainVisualSlider .c-mainVisualSlider-button-prev { 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%20version%3D%221.1%22%20viewBox%3D%220%200%2052%2040%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.st0%20%7B%20fill%3A%20%231b120c%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M52%2C20h-12C40%2C9%2C31%2C0%2C20%2C0S0%2C9%2C0%2C20s9%2C20%2C20%2C20%2C19.4-8.4%2C19.9-19h12.1v-1ZM20%2C39C9.5%2C39%2C1%2C30.5%2C1%2C20S9.5%2C1%2C20%2C1s19%2C8.5%2C19%2C19h-15v-4l-7%2C4.5%2C7%2C4.5v-4h14.9c-.5%2C10-8.8%2C18-18.9%2C18Z%22%2F%3E%3C%2Fsvg%3E"); } .p-mainVisualSlider .c-mainVisualSlider-button-next { 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%82%B0%E3%83%AB%E3%83%BC%E3%83%97_57%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2052%2040%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.st0%20%7B%20fill%3A%20%231b120c%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpath%20class%3D%22st0%22%20d%3D%22M32%2C0C21%2C0%2C12%2C9%2C12%2C20H0v1h12.1c.5%2C10.6%2C9.3%2C19%2C19.9%2C19s20-9%2C20-20S43%2C0%2C32%2C0ZM32%2C39c-10.1%2C0-18.4-8-18.9-18h14.9v4l7-4.5-7-4.5v4h-15C13%2C9.5%2C21.5%2C1%2C32%2C1s19%2C8.5%2C19%2C19-8.5%2C19-19%2C19Z%22%2F%3E%3C%2Fsvg%3E"); } .p-mainVisualSlider .c-mainVisualSlider-pagination { top: 50%; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; font-size: 14px; color: #ccc; } @media screen and (max-width: 979px) { .p-mainVisualSlider .c-mainVisualSlider-pagination { height: 24px; } } @media screen and (min-width: 980px) { .p-mainVisualSlider .c-mainVisualSlider-pagination { height: 40px; } } .p-mainVisualSlider .swiper-pagination-current { color: #1B120C; } @media screen and (max-width: 979px) { .p-mainVisualSlider .swiper-pagination-current { margin-inline-end: 10px; } } @media screen and (min-width: 980px) { .p-mainVisualSlider .swiper-pagination-current { margin-inline-end: 10px; } } .p-mainVisualSlider .swiper-pagination-total { color: #1B120C; } @media screen and (max-width: 979px) { .p-mainVisualSlider .swiper-pagination-total { margin-inline-start: 10px; } } @media screen and (min-width: 980px) { .p-mainVisualSlider .swiper-pagination-total { margin-inline-start: 10px; } } .p-mainVisualSlider .c-mainVisualSlider-scrollbar { height: 1px; background-color: #CCCCCC; top: 50%; transform: translateY(-50%); } .p-mainVisualSlider .c-mainVisualSlider-scrollbar .swiper-scrollbar-drag { background-color: #1B120C; } .p-newsList__item { border-bottom: 1px solid #CCC; } @media screen and (max-width: 767px) { .p-newsList__item { padding-block: 20px; } } @media screen and (min-width: 768px) { .p-newsList__item { padding-block: 20px; } } .p-newsList__item__link { font-weight: 400; font-optical-sizing: auto; font-style: normal; line-height: 1.5; text-box: trim-both cap alphabetic; transition: all 0.5s; color: #0E0F10; } @media screen and (max-width: 767px) { .p-newsList__item__link { font-size: 14px; } } @media screen and (min-width: 768px) { .p-newsList__item__link { font-size: 16px; } } .p-newsList__item__link:hover { opacity: 0.5; } .p-newsList__item__date { font-weight: 400; font-optical-sizing: auto; font-style: normal; line-height: 1.5; text-box: trim-both cap alphabetic; color: rgba(27, 18, 12, 0.5); } @media screen and (max-width: 767px) { .p-newsList__item__date { font-size: 12px; margin-top: 20px; } } @media screen and (min-width: 768px) { .p-newsList__item__date { font-size: 14px; margin-top: 20px; } } .p-productHeadingTop { position: relative; } .p-productHeadingTop__inner { display: flex; justify-content: flex-end; align-items: center; } .-odd .p-productHeadingTop__inner { justify-content: flex-end; } .-even .p-productHeadingTop__inner { justify-content: flex-start; } .p-productHeadingTop__image { display: block; } @media screen and (max-width: 767px) { .p-productHeadingTop__image { width: 94.87%; height: auto; } } @media screen and (min-width: 768px) { .p-productHeadingTop__image { width: 89%; height: auto; } } .p-productHeadingTop__image img { width: 100%; display: block; } @media screen and (min-width: 768px) { .p-productHeadingTop__textBox { position: absolute; top: 10%; left: 16%; } } @media screen and (min-width: 980px) { .p-productHeadingTop__textBox { top: 30%; } } @media screen and (min-width: 768px) { .-odd .p-productHeadingTop__textBox { left: 16%; } } @media screen and (min-width: 768px) { .-even .p-productHeadingTop__textBox { left: 20%; } } @media screen and (min-width: 980px) { .-even .p-productHeadingTop__textBox { left: 36%; } } .p-productHeadingTop__textBox__block:nth-of-type(1) { display: flex; flex-direction: column; } @media screen and (max-width: 767px) { .p-productHeadingTop__textBox__block:nth-of-type(1) { position: absolute; top: 40px; left: 12%; z-index: 100; gap: 32px; } } @media screen and (min-width: 768px) { .p-productHeadingTop__textBox__block:nth-of-type(1) { gap: 48px; } } @media screen and (max-width: 767px) { .-odd .p-productHeadingTop__textBox__block:nth-of-type(1) { left: 12%; } } @media screen and (max-width: 767px) { .-even .p-productHeadingTop__textBox__block:nth-of-type(1) { left: 28%; } } @media screen and (max-width: 767px) { .p-productHeadingTop__textBox__block:nth-of-type(1).-sp-top--24 { top: 24px; } } .p-productHeadingTop__textBox__block:nth-of-type(2) { display: flex; flex-direction: column; } @media screen and (max-width: 767px) { .p-productHeadingTop__textBox__block:nth-of-type(2) { margin-top: 20px; padding-inline: 5%; gap: 24px; } } @media screen and (min-width: 768px) { .p-productHeadingTop__textBox__block:nth-of-type(2) { gap: 40px; } } @media screen and (min-width: 768px) { .p-productHeadingTop__textBox__block + .p-productHeadingTop__textBox__block { margin-top: 32px; } } @media screen and (max-width: 767px) { .p-productHeadingTop + .p-productHeadingTop { margin-top: 70px; } } @media screen and (min-width: 768px) { .p-productHeadingTop + .p-productHeadingTop { margin-top: 80px; } } @media screen and (max-width: 767px) { .p-homeCommitment .l-pcGridT1 { margin-top: 40px; } } @media screen and (min-width: 768px) { .p-homeCommitment .l-pcGridT1 { margin-top: 36px; } } @media screen and (max-width: 767px) { .p-homeProductBtn { margin-block: 50px; } } @media screen and (min-width: 768px) { .p-homeProductBtn { margin-block: 80px; } } .p-homeProductCard__inner { display: flex; position: relative; } @media screen and (max-width: 767px) { .p-homeProductCard__inner { margin-bottom: 40px; } } @media screen and (min-width: 768px) { .p-homeProductCard__inner { align-items: center; } } @media screen and (max-width: 767px) { .p-homeProductCard__inner:nth-of-type(1) { flex-direction: row-reverse; } } .p-homeProductCard__col { position: relative; } @media screen and (max-width: 767px) { .p-homeProductCard__col.-type--imgBox { position: absolute; top: 0; width: 64%; } } @media screen and (min-width: 768px) { .p-homeProductCard__col.-type--imgBox { width: 54%; } } @media screen and (max-width: 767px) { .p-homeProductCard__col.-type--imgBox.-left { left: 0; } } @media screen and (max-width: 767px) { .p-homeProductCard__col.-type--imgBox.-right { right: 0; } } .p-homeProductCard__col.-type--textBox { z-index: 2; } @media screen and (max-width: 767px) { .p-homeProductCard__col.-type--textBox { margin-top: 32px; width: auto; } } @media screen and (min-width: 768px) { .p-homeProductCard__col.-type--textBox { width: 46%; padding: 5%; } } @media screen and (max-width: 767px) { .p-homeProductCard__col.-type--textBox .c-basicText.-size--24-40 + .c-basicText.-size--14-16 { margin-top: 24px; } } @media screen and (min-width: 768px) { .p-homeProductCard__col.-type--textBox .c-basicText.-size--24-40 + .c-basicText.-size--14-16 { margin-top: 24px; } } @media screen and (max-width: 767px) { .p-homeProductCard__col.-type--textBox .p-button-containerT1 { margin-top: 20px; } } @media screen and (min-width: 768px) { .p-homeProductCard__col.-type--textBox .p-button-containerT1 { margin-top: 48px; } } /* * products */ .p-productHeading { position: relative; } @media screen and (min-width: 980px) { .p-productHeading { margin-top: -6.4%; } } .p-productHeading__inner { display: flex; justify-content: flex-end; align-items: center; } .p-productHeading__image { display: block; } @media screen and (max-width: 767px) { .p-productHeading__image { width: 94.87%; height: auto; } } @media screen and (min-width: 768px) { .p-productHeading__image { width: 89%; height: auto; } } .p-productHeading__image img { width: 100%; display: block; } .p-productHeading__textBox { position: absolute; } @media screen and (max-width: 767px) { .p-productHeading__textBox { top: 50%; transform: translateY(-50%); left: 12%; } } @media screen and (min-width: 768px) { .p-productHeading__textBox { top: 56%; transform: translateY(-50%); left: 16%; } } @media screen and (max-width: 767px) { .p-productHeading__textBox .c-basicText.-size--18-32 + .c-basicText.-size--20-40 { margin-top: 32px; } } @media screen and (min-width: 768px) { .p-productHeading__textBox .c-basicText.-size--18-32 + .c-basicText.-size--20-40 { margin-top: 56px; } } @media screen and (min-width: 768px) { .p-productSpecs__row { display: grid; grid-template-columns: repeat(2, 1fr); } } @media screen and (min-width: 768px) { .p-productSpecs__col:nth-child(1) { order: 2; } } @media screen and (min-width: 768px) { .p-productSpecs__col:nth-child(2) { order: 1; padding-right: 15%; } } @media screen and (max-width: 767px) { .p-productSpecs .c-basicText.-size--24-32 + .c-basicTagContainer { margin-top: 20px; } } @media screen and (min-width: 768px) { .p-productSpecs .c-basicText.-size--24-32 + .c-basicTagContainer { margin-top: 32px; } } @media screen and (max-width: 767px) { .p-productSpecs .p-productSpecs__col .c-basicText.-size--20-24:nth-child(1) { margin-top: 20px; } } @media screen and (min-width: 768px) { .p-productSpecs .p-productSpecs__col .c-basicText.-size--20-24:nth-child(1) { margin-top: 60px; } } @media screen and (max-width: 767px) { .p-productSpecs .c-basicText.-size--20-24 + .c-basicText.-size--14-16 { margin-top: 32px; } } @media screen and (min-width: 768px) { .p-productSpecs .c-basicText.-size--20-24 + .c-basicText.-size--14-16 { margin-top: 40px; } } @media screen and (max-width: 767px) { .p-productSpecs .c-basicText.-size--14-16 + .c-basicTagT2Container { margin-top: 40px; } } @media screen and (min-width: 768px) { .p-productSpecs .c-basicText.-size--14-16 + .c-basicTagT2Container { margin-top: 60px; } } @media screen and (max-width: 767px) { .p-productSpecs .c-basicTagT2Container + .c-basicTable { margin-top: 28px; } } @media screen and (min-width: 768px) { .p-productSpecs .c-basicTagT2Container + .c-basicTable { margin-top: 40px; } } @media screen and (max-width: 767px) { .p-productSpecs .c-basicTable + .p-formToShopify { margin-top: 40px; } } @media screen and (min-width: 768px) { .p-productSpecs .c-basicTable + .p-formToShopify { margin-top: 32px; } } .p-productGallery { position: relative; overflow: hidden; } @media screen and (max-width: 767px) { .p-productGallery { margin-block: 40px; } } .p-productGallery [class*=swiper]:focus { outline: none; } .p-productGallery .slide-media, .p-productGallery .thumb-media { position: relative; overflow: hidden; } .p-productGallery .slide-media img, .p-productGallery .thumb-media img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .p-productGallery .swiper, .p-productGallery .thumb-wrapper { max-width: 560px; margin: auto; } .p-productGallery .swiper { overflow: visible; } @media screen and (max-width: 767px) { .p-productGallery .swiper { width: 80%; } } .p-productGallery .swiper-button-prev, .p-productGallery .swiper-button-next { color: #999; top: 50%; } .p-productGallery .swiper-button-prev { left: 0; } .p-productGallery .swiper-button-next { right: 0; } .p-productGallery .slide { display: block; overflow: hidden; } .p-productGallery .slide-media { display: block; padding-top: 100%; } .p-productGallery .thumb-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; } .p-productGallery .thumb-media { padding-top: 100%; cursor: pointer; } @media screen and (max-width: 767px) { .p-productGallery .swiper + .thumb-wrapper { margin-top: 16px; } } @media screen and (min-width: 768px) { .p-productGallery .swiper + .thumb-wrapper { margin-top: 16px; } } @media screen and (max-width: 767px) { .p-productAbout .p-headingT1 { margin-bottom: 48px; } } @media screen and (min-width: 768px) { .p-productAbout .p-headingT1 { margin-bottom: 64px; } } @media screen and (max-width: 767px) { .p-productAbout__section__header + .p-productAbout__section__body { margin-top: 24px; } } @media screen and (min-width: 768px) { .p-productAbout__section__header + .p-productAbout__section__body { margin-top: 36px; } } .p-productAbout__section__inputContent { text-align: center; font-weight: 400; font-optical-sizing: auto; font-style: normal; line-height: 1.5; } @media screen and (max-width: 767px) { .p-productAbout__section__inputContent { font-size: 14px; } } @media screen and (min-width: 768px) { .p-productAbout__section__inputContent { font-size: 16px; } } @media screen and (max-width: 767px) { .p-productAbout__section + .p-productAbout__section { margin-top: 80px; } } @media screen and (min-width: 768px) { .p-productAbout__section + .p-productAbout__section { margin-top: 100px; } } .p-productAbout__download { margin: 0; padding: 0; } .p-productAbout__download li { position: relative; margin: 0; padding: 8px 0 8px 28px; } .p-productAbout__download li a { color: #0E0F10; } .p-productAbout__download li a:hover { text-decoration: underline; } .p-productAbout__download li::after { position: absolute; top: 50%; left: 0; transform: translateY(-50%); transition: all 0.3s; content: ""; display: inline-block; width: 16px; height: 20px; 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%20data-name%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%20version%3D%221.1%22%20viewBox%3D%220%200%2016.4%2020%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.st0%20%7B%20fill%3A%20none%3B%20%7D%20.st1%20%7B%20fill%3A%20%231b120c%3B%20%7D%20.st2%20%7B%20clip-path%3A%20url(%23clippath)%3B%20%7D%20%3C%2Fstyle%3E%20%3CclipPath%20id%3D%22clippath%22%3E%20%3Crect%20class%3D%22st0%22%20width%3D%2216.4%22%20height%3D%2220%22%2F%3E%20%3C%2FclipPath%3E%20%3C%2Fdefs%3E%20%3Cg%20class%3D%22st2%22%3E%20%3Cg%20id%3D%22_%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_178%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_178%22%3E%20%3Cpath%20id%3D%22_%E3%83%91%E3%82%B9_27%22%20data-name%3D%22%E3%83%91%E3%82%B9_27%22%20class%3D%22st1%22%20d%3D%22M15%2C0H2.5c-.8%2C0-1.4.6-1.4%2C1.4h0v7.1H.3C.1%2C8.5%2C0%2C8.7%2C0%2C8.8s0%2C0%2C0%2C0v5.2c0%2C.2.1.3.3.3h.8v4.3c0%2C.8.6%2C1.4%2C1.4%2C1.4%2C0%2C0%2C0%2C0%2C0%2C0h9.1c0%2C0%2C.1%2C0%2C.2%2C0l4.5-4.5c0%2C0%2C0-.1%2C0-.2V1.4c0-.8-.6-1.4-1.4-1.4M.6%2C9.1h12.4v4.6H.6v-4.6ZM12%2C19v-3.5h3.5l-3.5%2C3.5ZM15.9%2C14.9h-4.2c-.2%2C0-.3.1-.3.3v4.2H2.5c-.5%2C0-.8-.4-.8-.8v-4.3h11.5c.2%2C0%2C.3-.1.3-.3v-5.2c0-.2-.1-.3-.3-.3H1.7V1.4c0-.5.4-.8.8-.8h12.5c.5%2C0%2C.8.4.8.8v13.5Z%22%2F%3E%20%3Crect%20id%3D%22_%E9%95%B7%E6%96%B9%E5%BD%A2_508%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_508%22%20class%3D%22st1%22%20x%3D%223.6%22%20y%3D%222.4%22%20width%3D%225.5%22%20height%3D%22.6%22%2F%3E%20%3Crect%20id%3D%22_%E9%95%B7%E6%96%B9%E5%BD%A2_509%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_509%22%20class%3D%22st1%22%20x%3D%223.6%22%20y%3D%224.3%22%20width%3D%225.5%22%20height%3D%22.6%22%2F%3E%20%3Crect%20id%3D%22_%E9%95%B7%E6%96%B9%E5%BD%A2_510%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_510%22%20class%3D%22st1%22%20x%3D%223.6%22%20y%3D%226.3%22%20width%3D%225.5%22%20height%3D%22.6%22%2F%3E%20%3Cpath%20id%3D%22_%E3%83%91%E3%82%B9_28%22%20data-name%3D%22%E3%83%91%E3%82%B9_28%22%20class%3D%22st1%22%20d%3D%22M6.4%2C9.9h-.5v3.1h.5c.4%2C0%2C.8-.1%2C1.1-.4.6-.6.7-1.6%2C0-2.2-.3-.3-.8-.5-1.2-.5M7.2%2C12.2c-.2.2-.5.3-.8.3h0v-2.1h0c.3%2C0%2C.6%2C0%2C.8.3.4.4.5%2C1.1%2C0%2C1.6%2C0%2C0%2C0%2C0%2C0%2C0%22%2F%3E%20%3Cpath%20id%3D%22_%E3%83%91%E3%82%B9_29%22%20data-name%3D%22%E3%83%91%E3%82%B9_29%22%20class%3D%22st1%22%20d%3D%22M9%2C12.9h.5v-1.5h.7v-.5h-.7v-.7h.9v-.5h-1.4v3.1Z%22%2F%3E%20%3Cpath%20id%3D%22_%E3%83%91%E3%82%B9_30%22%20data-name%3D%22%E3%83%91%E3%82%B9_30%22%20class%3D%22st1%22%20d%3D%22M4.7%2C10.1c-.2-.2-.4-.2-.7-.2h-.9v3.1h.5v-1.3h.4c.3%2C0%2C.5%2C0%2C.7-.2.4-.3.4-.9%2C0-1.3%2C0%2C0%2C0%2C0%2C0%2C0M4.4%2C11c-.1%2C0-.2.1-.4.1h-.5v-.8h.4c.1%2C0%2C.3%2C0%2C.4%2C0%2C0%2C0%2C.2.2.1.3%2C0%2C.1%2C0%2C.2-.1.3%22%2F%3E%20%3Cpath%20id%3D%22_%E3%83%91%E3%82%B9_31%22%20data-name%3D%22%E3%83%91%E3%82%B9_31%22%20class%3D%22st1%22%20d%3D%22M9.8%2C6.8h4.2V2.4h-4.2v4.5ZM10.4%2C2.9h3.1v3.3h-3.1v-3.3Z%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: cover; } @media screen and (min-width: 768px) { .p-productAbout__download li::after { width: 16px; height: 20px; } } @media screen and (max-width: 767px) { .p-productAbout__download li + li { margin-top: 8px; } } @media screen and (min-width: 768px) { .p-productAbout__download li + li { margin-top: 16px; } } @media screen and (max-width: 767px) { .c-basicTable + .p-productAbout__download { margin-top: 24px; } } @media screen and (min-width: 768px) { .c-basicTable + .p-productAbout__download { margin-top: 36px; } } .p-productAbout__stack > *:first-child { margin-block-start: 0; } .p-productAbout__stack > *:last-child { margin-block-end: 0; } @media screen and (max-width: 767px) { .p-productAbout__stack.-ma__t--16-20 > * { margin-block-start: 16px; } } @media screen and (min-width: 768px) { .p-productAbout__stack.-ma__t--16-20 > * { margin-block-start: 20px; } } @media screen and (max-width: 767px) { .c-basicImg.u-displayTable + .p-productAbout__stack--16-20 { margin-top: 20px; } } @media screen and (min-width: 768px) { .c-basicImg.u-displayTable + .p-productAbout__stack--16-20 { margin-top: 40px; } } @media screen and (max-width: 767px) { .p-productFeatures__section__header .c-basicText.-size--16-32 + .c-basicText.-size--14-16 { margin-top: 24px; } } @media screen and (min-width: 768px) { .p-productFeatures__section__header .c-basicText.-size--16-32 + .c-basicText.-size--14-16 { margin-top: 48px; } } @media screen and (max-width: 767px) { .p-productFeatures__section__header .c-basicImg { margin-top: 20px; } } @media screen and (min-width: 768px) { .p-productFeatures__section__header .c-basicImg { margin-top: 40px; } } @media screen and (max-width: 767px) { .p-productFeatures__section__header + .p-productFeatures__section__body { margin-top: 24px; } } @media screen and (min-width: 768px) { .p-productFeatures__section__header + .p-productFeatures__section__body { margin-top: 36px; } } @media screen and (max-width: 767px) { .p-productFeatures__section + .p-productFeatures__section { margin-top: 80px; } } @media screen and (min-width: 768px) { .p-productFeatures__section + .p-productFeatures__section { margin-top: 120px; } } .p-productFeatures__stack > *:first-child { margin-block-start: 0; } .p-productFeatures__stack > *:last-child { margin-block-end: 0; } @media screen and (max-width: 767px) { .p-productFeatures__stack.-ma__t--16-20 > * { margin-block-start: 16px; } } @media screen and (min-width: 768px) { .p-productFeatures__stack.-ma__t--16-20 > * { margin-block-start: 24px; } } @media screen and (max-width: 767px) { .p-productFeatures__stack .c-basicText.-size--16-24 { margin-top: 20px; margin-bottom: 28px; } } @media screen and (min-width: 768px) { .p-productFeatures__stack .c-basicText.-size--16-24 { margin-bottom: 32px; } } .p-productFeatures__img { text-align: center; } @media screen and (max-width: 767px) { .p-productFeatures__img.-pa--T1 { padding-inline: 30px; } } @media screen and (min-width: 768px) { .p-productFeatures__img.-pa--T1 { padding-right: 60px; display: flex; justify-content: flex-end; } } @media screen and (min-width: 768px) { .p-productFeatures__img .c-basicImg { width: 400px; } .p-productFeatures__img .c-basicImg img { width: 100%; } } @media screen and (max-width: 767px) { .p-productFeatures .l-pcGridT1.-spWidth--80 { width: 80%; } } @media screen and (max-width: 767px) { .p-productFeatures .l-pcGridT1.-spMg--x-auto { margin-inline: auto; } } @media screen and (max-width: 767px) { .p-productFeatures .l-pcGridT1Col + .l-pcGridT1Col { margin-top: 32px; } } .p-productFeatures__sectionBox { background-color: #FFFFFF; overflow: hidden; } @media screen and (max-width: 767px) { .p-productFeatures__sectionBox__inner { margin: 40px 20px; } } @media screen and (min-width: 768px) { .p-productFeatures__sectionBox__inner { margin: 50px 20px; max-width: 800px; margin-inline: auto; } } .p-productFeatures__sectionBox__header.-pcFlex--center { display: flex; } @media screen and (max-width: 767px) { .p-productFeatures__sectionBox__header.-pcFlex--center { flex-direction: column; align-items: center; } } @media screen and (min-width: 768px) { .p-productFeatures__sectionBox__header.-pcFlex--center { flex-direction: row; justify-content: center; align-items: center; } } .p-productFeatures__sectionBox__header .c-basicImg { margin: 0; } @media screen and (max-width: 767px) { .p-productFeatures__sectionBox__header .c-basicImg { margin-bottom: 20px; } } @media screen and (min-width: 768px) { .p-productFeatures__sectionBox__header .c-basicImg { margin-right: 40px; } } @media screen and (max-width: 767px) { .p-productFeatures__sectionBox__header .c-basicText.-size--18-24 { text-align: center; } } @media screen and (max-width: 767px) { .p-productFeatures__sectionBox__header + .p-productFeatures__sectionBox__body { margin-top: 48px; } } @media screen and (min-width: 768px) { .p-productFeatures__sectionBox__header + .p-productFeatures__sectionBox__body { margin-top: 40px; } } @media screen and (max-width: 767px) { .p-productFeatures__sectionBox__item + .p-productFeatures__sectionBox__item { margin-top: 40px; } } @media screen and (min-width: 768px) { .p-productFeatures__sectionBox__item + .p-productFeatures__sectionBox__item { margin-top: 40px; } } @media screen and (max-width: 767px) { .p-productFeatures__section + .p-productFeatures__sectionBox { margin-top: 64px; } } @media screen and (min-width: 768px) { .p-productFeatures__section + .p-productFeatures__sectionBox { margin-top: 64px; } } .p-productFeatures__blockBox { background-color: #1B120C; color: #FFFFFF; } @media screen and (max-width: 767px) { .p-productFeatures__blockBox { padding: 16px; } } @media screen and (min-width: 768px) { .p-productFeatures__blockBox { padding: 16px; } } @media screen and (max-width: 767px) { .p-productFeatures__blockBox + * { margin-top: 16px; } } @media screen and (min-width: 768px) { .p-productFeatures__blockBox + * { margin-top: 16px; } } /* * productList */ .p-productItem { display: grid; grid-row: span 5; grid-template-rows: subgrid; gap: 0 0; transition: all 0.6s; } .p-productItem:hover { transform: scale(1.03); } .p-productItem__image { transition: all 0.5s; } @media screen and (max-width: 767px) { .p-productItem__image { margin-bottom: 14px; } } @media screen and (min-width: 768px) { .p-productItem__image { margin-bottom: 16px; } } .p-productItem__image img { display: block; width: 100%; height: auto; } .p-productItem__catch { line-height: 1.5; font-weight: 400; color: #1B120C; text-box-trim: trim-both; text-box-edge: cap alphabetic; padding-bottom: 20px; border-bottom: 1px solid #cccccc; } @media screen and (max-width: 767px) { .p-productItem__catch { font-size: 16px; margin-bottom: 15px; } } @media screen and (min-width: 768px) { .p-productItem__catch { font-size: 20px; margin-bottom: 20px; } } .p-productItem__name { font-size: 14px; line-height: 1.2; letter-spacing: 0.07em; font-weight: 400; color: #0E0F10; text-box-trim: trim-both; text-box-edge: cap alphabetic; } @media screen and (max-width: 767px) { .p-productItem__name { font-size: 14px; margin-bottom: 14px; } } @media screen and (min-width: 768px) { .p-productItem__name { font-size: 16px; margin-bottom: 20px; } } .p-productItem__features { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; } .p-productItem__feature { background-color: #E9EBE9; font-size: 10px; line-height: 1.8; letter-spacing: 0.1em; font-weight: 400; color: #0E0F10; padding: 4px 8px; } @media screen and (min-width: 768px) { .p-productItem__feature { font-size: 12px; } } .p-productItem__price { line-height: 1.2; letter-spacing: 0.05em; color: #0E0F10; font-weight: 400; text-box-trim: trim-both; text-box-edge: cap alphabetic; } @media screen and (max-width: 767px) { .p-productItem__price { font-size: 14px; } } @media screen and (min-width: 768px) { .p-productItem__price { font-size: 16px; } } @media screen and (max-width: 767px) { .p-productItem__price__tax { font-size: 10px; } } @media screen and (min-width: 768px) { .p-productItem__price__tax { font-size: 12px; } } .p-productList { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 4%; } @media screen and (min-width: 768px) { .p-productList { grid-template-columns: repeat(4, 1fr); gap: 40px 3%; } } @media screen and (max-width: 767px) { .p-productListCatch { padding-block: 40px 40px; } } @media screen and (min-width: 768px) { .p-productListCatch { padding-block: 80px 120px; } } @media screen and (max-width: 767px) { .p-productListCatch .c-basicText.-size--24-32 + .c-basicText.-size--14-16 { margin-top: 32px; } } @media screen and (min-width: 768px) { .p-productListCatch .c-basicText.-size--24-32 + .c-basicText.-size--14-16 { margin-top: 40px; } } .p-navSorting { background-color: #F4F5F4; padding: 24px 16px; } @media screen and (min-width: 980px) { .p-navSorting { padding: 32px 10%; } } @media screen and (min-width: 980px) { .p-navSorting__sortingSection { display: flex; align-items: center; } } @media screen and (max-width: 767px) { .p-navSorting__sortingSection + .p-navSorting__sortingSection { margin-top: 24px; } } @media screen and (min-width: 768px) { .p-navSorting__sortingSection + .p-navSorting__sortingSection { margin-top: 24px; } } .p-navSorting__sectionTitle { line-height: 1.2; letter-spacing: 0.07em; color: #0E0F10; text-box-trim: trim-both; text-box-edge: cap alphabetic; } @media screen and (max-width: 767px) { .p-navSorting__sectionTitle { font-size: 14px; margin-bottom: 12px; } } @media screen and (min-width: 768px) { .p-navSorting__sectionTitle { font-size: 16px; margin-bottom: 12px; } } @media screen and (min-width: 980px) { .p-navSorting__sectionTitle { width: 12%; margin-bottom: 0; } } .p-navSorting__sortingOptions { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: 10px; } .p-navSorting__sortingOptionItem a { display: block; text-decoration: none; line-height: 1.2; letter-spacing: 0.07em; color: #0E0F10; text-box-trim: trim-both; text-box-edge: cap alphabetic; border: 1px solid #CCCCCC; background-color: #FFFFFF; text-align: center; transition: all 0.3s; } @media screen and (max-width: 767px) { .p-navSorting__sortingOptionItem a { font-size: 12px; padding: 10px 10px; } } @media screen and (min-width: 768px) { .p-navSorting__sortingOptionItem a { font-size: 16px; padding: 16px 16px; } } .p-navSorting__sortingOptionItem a:hover { background-color: #D5D9D5; } .p-navSorting__sortingOptionItem.is-active a { background-color: #D5D9D5; } .p-pagination { position: relative; display: flex; justify-content: center; align-items: center; padding-bottom: 20px; } @media screen and (min-width: 768px) { .p-pagination { padding-bottom: 0; } } .p-pagination__numbers { position: absolute; bottom: 0px; left: 50%; transform: translateX(-50%); list-style: none; display: flex; align-items: center; margin: 0; padding: 0; } @media screen and (min-width: 768px) { .p-pagination__numbers { position: relative; bottom: auto; left: auto; transform: none; } } .p-pagination__number a { display: block; text-decoration: none; color: #999999; font-size: 14px; line-height: 1.3; padding: 0 14px; min-width: 32px; text-align: center; transition: all 0.3s; } @media screen and (min-width: 768px) { .p-pagination__number a { font-size: 16px; padding-inline: 16px; } } .p-pagination__number a:hover { text-decoration: underline; } .p-pagination__number:not(:last-child) a, .p-pagination__number:not(:last-child) div { border-right: 1px solid #CCCCCC; } .p-pagination__number.is-active div { display: block; text-decoration: none; color: #1B120C; font-size: 14px; line-height: 1.3; padding: 0 14px; min-width: 32px; text-align: center; } @media screen and (min-width: 768px) { .p-pagination__number.is-active div { font-size: 16px; padding-inline: 16px; } } .p-pagination__prev, .p-pagination__next { position: relative; text-decoration: none; color: #1B120C; font-size: 14px; line-height: 3.2142em; padding: 0 5px; } .p-pagination__prev:hover, .p-pagination__next:hover { text-decoration: underline; } .p-pagination__prev::after, .p-pagination__next::after { position: absolute; top: 50%; transform: translateY(-50%); transition: all 0.3s; content: ""; display: inline-block; background-repeat: no-repeat; background-size: cover; } @media screen and (max-width: 767px) { .p-pagination__prev::after, .p-pagination__next::after { width: 19px; height: 9px; } } @media screen and (min-width: 768px) { .p-pagination__prev::after, .p-pagination__next::after { width: 19px; height: 9px; } } @media screen and (max-width: 767px) { .p-pagination__prev { margin-right: 14px; } } @media screen and (min-width: 768px) { .p-pagination__prev { margin-right: 24px; } } .p-pagination__prev::after { left: -20px; 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%20data-name%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%20version%3D%221.1%22%20viewBox%3D%220%200%2019%209%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.st0%20%7B%20fill%3A%20%231b120c%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%2219%204%207%204%207%200%200%204.5%207%209%207%205%2019%205%2019%204%22%2F%3E%3C%2Fsvg%3E"); } @media screen and (max-width: 767px) { .p-pagination__next { margin-left: 14px; } } @media screen and (min-width: 768px) { .p-pagination__next { margin-left: 24px; } } .p-pagination__next::after { right: -20px; 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%82%B0%E3%83%AB%E3%83%BC%E3%83%97_235%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_235%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20version%3D%221.1%22%20viewBox%3D%220%200%2019%209%22%3E%20%3Cdefs%3E%20%3Cstyle%3E%20.st0%20%7B%20fill%3A%20%231b120c%3B%20%7D%20%3C%2Fstyle%3E%20%3C%2Fdefs%3E%20%3Cpolygon%20class%3D%22st0%22%20points%3D%2219%204.5%2012%200%2012%204%200%204%200%205%2012%205%2012%209%2019%204.5%22%2F%3E%3C%2Fsvg%3E"); } @media screen and (max-width: 767px) { .p-paginationContainerT1.-mt--blockL1Btm { margin-top: 40px; } } @media screen and (min-width: 768px) { .p-paginationContainerT1.-mt--blockL1Btm { margin-top: 80px; } } @media screen and (max-width: 767px) { .p-productList + .p-pagination { margin-top: 40px; } } @media screen and (min-width: 768px) { .p-productList + .p-pagination { margin-top: 80px; } } /* * article */ @media screen and (max-width: 767px) { .p-articleHeading .c-basicText.-size--20-32 + .c-basicText.-size--14-16 { margin-block-start: 20px; } } @media screen and (min-width: 768px) { .p-articleHeading .c-basicText.-size--20-32 + .c-basicText.-size--14-16 { margin-block-start: 20px; } } @media screen and (max-width: 767px) { .p-articleHeading + .p-articleContents { margin-block-start: 40px; } } @media screen and (min-width: 768px) { .p-articleHeading + .p-articleContents { margin-block-start: 80px; } } .p-articleContents { border-bottom: 1px solid #CCC; } @media screen and (max-width: 767px) { .p-articleContents { padding-block-end: 40px; } } @media screen and (min-width: 768px) { .p-articleContents { padding-block-end: 40px; } } .p-articleContents p, .p-articleContents ul li, .p-articleContents ol li, .p-articleContents a { font-weight: 400; font-optical-sizing: auto; font-style: normal; line-height: 1.6; letter-spacing: 0.1em; } @media screen and (max-width: 767px) { .p-articleContents p, .p-articleContents ul li, .p-articleContents ol li, .p-articleContents a { font-size: 14px; } } @media screen and (min-width: 768px) { .p-articleContents p, .p-articleContents ul li, .p-articleContents ol li, .p-articleContents a { font-size: 20px; } } .p-articleContents ul { list-style: disc; } @media screen and (max-width: 767px) { .p-articleContents ul { margin-inline-start: 20px; } } @media screen and (min-width: 768px) { .p-articleContents ul { margin-inline-start: 26px; } } .p-articleContents ul li { padding-block: 8px; } .p-articleContents ol { list-style: decimal; } @media screen and (max-width: 767px) { .p-articleContents ol { margin-inline-start: 20px; } } @media screen and (min-width: 768px) { .p-articleContents ol { margin-inline-start: 26px; } } .p-articleContents ol li { padding-block: 8px; } .p-articleContents a { text-decoration: underline; transition: opacity 0.5s ease; } .p-articleContents a:hover { opacity: 0.7; } @media screen and (max-width: 767px) { .p-articleContents__stack > * { margin-block-start: 24px; } } @media screen and (min-width: 768px) { .p-articleContents__stack > * { margin-block-start: 40px; } } .p-articleContents__stack > *:first-child { margin-block-start: 0 !important; } .p-articleContents__stack > *:first-child img { margin-block-start: 0 !important; } .p-articleContents__stack > *:last-child { margin-block-end: 0 !important; } .p-articleContents__stack > img + * { margin-block-start: 0; } @media screen and (max-width: 767px) { .p-articleContents + .p-cardUnit { margin-block-start: 40px; } } @media screen and (min-width: 768px) { .p-articleContents + .p-cardUnit { margin-block-start: 80px; } } /* * catalogManual */ @media screen and (max-width: 767px) { .p-accordion__details { margin-bottom: 14px; } } @media screen and (min-width: 768px) { .p-accordion__details { margin-bottom: 20px; } } .p-accordion__summary { /* display: list-item;以外を指定してデフォルトの三角形アイコンを消します */ display: block; border-bottom: 1px solid #CCCCCC; } .p-accordion__summary::-webkit-details-marker { /* Safariで表示されるデフォルトの三角形アイコンを消します */ display: none; } .p-accordion__summaryInner { position: relative; cursor: pointer; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } @media screen and (max-width: 767px) { .p-accordion__summaryInner { padding: 16px 10px; } } @media screen and (min-width: 768px) { .p-accordion__summaryInner { padding: 20px 24px; } } @media screen and (max-width: 767px) { .p-accordion__summaryInner .p-stack { width: 80%; } } @media screen and (min-width: 768px) { .p-accordion__summaryInner .p-stack { width: 90%; } } .p-accordion__icon { display: block; position: absolute; top: 50%; right: 10px; transform: translateY(-50%); width: 16px; height: 16px; flex-shrink: 0; transform-origin: center 43%; transition: transform 0.4s; } .p-accordion__icon::before, .p-accordion__icon::after { content: ""; position: absolute; display: block; width: 16px; height: 1px; background-color: #1B120C; transition: all 0.5s; } .p-accordion__icon::before { top: 8px; left: 0; transform: rotate(0deg); } [open] .p-accordion__icon::before { transform: rotate(45deg); } .p-accordion__icon::after { top: 8px; left: 0; transform: rotate(90deg); } [open] .p-accordion__icon::after { transform: rotate(135deg); } .p-accordion__content { overflow: hidden; } .p-accordion__contentInner { position: relative; display: flex; flex-direction: row; justify-content: flex-start; align-items: center; } @media screen and (max-width: 767px) { .p-accordion__contentInner { padding: 16px 10px; } } @media screen and (min-width: 768px) { .p-accordion__contentInner { padding: 20px 24px; } } @media screen and (max-width: 767px) { .p-accordion__contentInner .c-basicText { width: 90%; } } @media screen and (min-width: 768px) { .p-accordion__contentInner .c-basicText { width: 90%; } } /* * recruit */ @media screen and (max-width: 767px) { .p-stack .p-recruit-header__heading { margin-block-start: 40px; } } @media screen and (min-width: 768px) { .p-stack .p-recruit-header__heading { margin-block-start: 40px; } } @media screen and (max-width: 767px) { .p-stack .p-recruit-header__description { margin-block-start: 40px; } } @media screen and (min-width: 768px) { .p-stack .p-recruit-header__description { margin-block-start: 40px; } } .p-recruit-index__item { border-bottom: 1px solid #CCC; } .p-recruit-index__item:first-child { border-top: 1px solid #CCC; } @media screen and (max-width: 767px) { .p-recruit-index__item { padding-block: 40px; } } @media screen and (min-width: 768px) { .p-recruit-index__item { padding-block: 40px; } } @media screen and (max-width: 767px) { .p-recruit-index__item .c-basicText.-size--20-32 + .c-basicText.-size--14-16 { margin-block-start: 24px; } } @media screen and (min-width: 768px) { .p-recruit-index__item .c-basicText.-size--20-32 + .c-basicText.-size--14-16 { margin-block-start: 32px; } } /* * color */ .u-color--white { color: #FFFFFF; } .u-color--gray { color: rgba(27, 18, 12, 0.5); } @media screen and (min-width: 768px) { .u-pc-color--white { color: #FFFFFF; } } .u-bg--gray { background-color: #F4F5F4; } /* * margin */ /* gap-size */ /* y-axis */ .u-mg__y--80 { margin-top: 50px; margin-bottom: 50px; } @media screen and (min-width: 768px) { .u-mg__y--80 { margin-top: 80px; margin-bottom: 80px; } } .u-mg__y--50 { margin-top: 30px; margin-bottom: 30px; } @media screen and (min-width: 768px) { .u-mg__y--50 { margin-top: 50px; margin-bottom: 50px; } } .u-mg__y--30 { margin-top: 20px; margin-bottom: 20px; } @media screen and (min-width: 768px) { .u-mg__y--30 { margin-top: 30px; margin-bottom: 30px; } } .u-mg__y--20 { margin-top: 10px; margin-bottom: 10px; } @media screen and (min-width: 768px) { .u-mg__y--20 { margin-top: 20px; margin-bottom: 20px; } } /* x-axis */ .u-mg__x--80 { margin-left: 50px; margin-right: 50px; } @media screen and (min-width: 980px) { .u-mg__x--80 { margin-left: 80px; margin-right: 80px; } } .u-mg__x--50 { margin-left: 30px; margin-right: 30px; } @media screen and (min-width: 980px) { .u-mg__x--50 { margin-left: 50px; margin-right: 50px; } } .u-mg__x--30 { margin-left: 20px; margin-right: 20px; } @media screen and (min-width: 768px) { .u-mg__x--30 { margin-left: 30px; margin-right: 30px; } } .u-mg__x--20 { margin-left: 10px; margin-right: 10px; } @media screen and (min-width: 768px) { .u-mg__x--20 { margin-left: 20px; margin-right: 20px; } } .u-mg__x--10 { margin-left: 5px; margin-right: 5px; } @media screen and (min-width: 768px) { .u-mg__x--10 { margin-left: 10px; margin-right: 10px; } } .u-mg__x--0 { margin-left: 0; margin-right: 0; } .u-mg__x--auto { margin-left: auto; margin-right: auto; } @media screen and (min-width: 768px) { .u-pcMg__x--30 { margin-left: 30px; margin-right: 30px; } } @media screen and (min-width: 768px) { .u-pcMg__x--20 { margin-left: 20px; margin-right: 20px; } } /* left */ .u-mg__l--80 { margin-left: 80px; } .u-mg__l--80 { margin-left: 50px; } .u-mg__l--30 { margin-left: 30px; } .u-mg__l--20 { margin-left: 20px; } .u-mg__l--10 { margin-left: 10px; } .u-mg__l--5 { margin-left: 5px; } /* bottom */ .u-mg__b--80 { margin-bottom: 50px; } @media screen and (min-width: 768px) { .u-mg__b--80 { margin-bottom: 80px; } } .u-mg__b--50 { margin-bottom: 30px; } @media screen and (min-width: 768px) { .u-mg__b--50 { margin-bottom: 50px; } } .u-mg__b--30 { margin-bottom: 20px; } @media screen and (min-width: 768px) { .u-mg__b--30 { margin-bottom: 30px; } } .u-mg__b--20 { margin-bottom: 10px; } @media screen and (min-width: 768px) { .u-mg__b--20 { margin-bottom: 20px; } } .u-mg__b--10 { margin-bottom: 5px; } @media screen and (min-width: 768px) { .u-mg__b--10 { margin-bottom: 10px; } } .u-mg__b--5 { margin-bottom: 5px; } /* top */ .u-mg__t--80 { margin-top: 80px; } .u-mg__t--50 { margin-top: 50px; } .u-mg__t--30 { margin-top: 30px; } .u-mg__t--20 { margin-top: 20px; } .u-mg__t--10 { margin-top: 10px; } .u-mg__t--5 { margin-top: 5px; } @media screen and (max-width: 767px) { .u-mg__t--sp-16-pc-20 { margin-top: 16px !important; } } @media screen and (min-width: 768px) { .u-mg__t--sp-16-pc-20 { margin-top: 20px !important; } } @media screen and (max-width: 767px) { .u-mg__t--sp-32-pc-40 { margin-top: 32px !important; } } @media screen and (min-width: 768px) { .u-mg__t--sp-32-pc-40 { margin-top: 40px !important; } } @media screen and (max-width: 767px) { .u-mg__t--sp-48-pc-60 { margin-top: 48px !important; } } @media screen and (min-width: 768px) { .u-mg__t--sp-48-pc-60 { margin-top: 60px !important; } } /* zero */ .u-mg__y--0 { margin-top: 0 !important; margin-bottom: 0 !important; } .u-mg__x--0 { margin-left: 0 !important; margin-right: 0 !important; } .u-mg__t--0 { margin-top: 0 !important; } .u-mg__b--0 { margin-bottom: 0 !important; } .u-mg__r--0 { margin-right: 0 !important; } .u-mg__l--0 { margin-left: 0 !important; } /* * padding */ /* gap-size */ /* y-axis */ .u-pd__y--100 { padding-top: 50px; padding-bottom: 50px; } @media screen and (min-width: 768px) { .u-pd__y--100 { padding-top: 100px; padding-bottom: 100px; } } .u-pd__y--50 { padding-top: 35px; padding-bottom: 35px; } @media screen and (min-width: 768px) { .u-pd__y--50 { padding-top: 50px; padding-bottom: 50px; } } .u-pd__y--35 { padding-top: 20px; padding-bottom: 20px; } @media screen and (min-width: 768px) { .u-pd__y--35 { padding-top: 35px; padding-bottom: 35px; } } .u-pd__y--20 { padding-top: 10px; padding-bottom: 10px; } @media screen and (min-width: 768px) { .u-pd__y--20 { padding-top: 20px; padding-bottom: 20px; } } /* x-axis */ .u-pd__x--50 { padding-left: 35px; padding-right: 35px; } @media screen and (min-width: 980px) { .u-pd__x--50 { padding-left: 50px; padding-right: 50px; } } .u-pd__x--35 { padding-left: 20px; padding-right: 20px; } @media screen and (min-width: 768px) { .u-pd__x--35 { padding-left: 35px; padding-right: 35px; } } .u-pd__x--20 { padding-left: 10px; padding-right: 10px; } @media screen and (min-width: 768px) { .u-pd__x--20 { padding-left: 20px; padding-right: 20px; } } /* all */ .u-pd__a--50 { padding: 35px; } @media screen and (min-width: 768px) { .u-pd__a--50 { padding: 50px; } } .u-pd__a--35 { padding: 20px; } @media screen and (min-width: 768px) { .u-pd__a--35 { padding: 35px; } } .u-pd__a--20 { padding: 10px; } @media screen and (min-width: 768px) { .u-pd__a--20 { padding: 20px; } } .u-pd__a--10 { padding: 5px; } @media screen and (min-width: 768px) { .u-pd__a--10 { padding: 10px; } } /* top */ .u-pd__t--100 { padding-top: 100px; } .u-pd__t--50 { padding-top: 50px; } .u-pd__t--35 { padding-top: 35px; } .u-pd__t--20 { padding-top: 20px; } .u-pd__t--10 { padding-top: 10px; } .u-pd__t--5 { padding-top: 5px; } /* bottom */ .u-pd__b--100 { padding-bottom: 100px; } .u-pd__b--50 { padding-bottom: 50px; } .u-pd__b--35 { padding-bottom: 35px; } .u-pd__b--20 { padding-bottom: 20px; } .u-pd__b--10 { padding-bottom: 10px; } .u-pd__b--5 { padding-bottom: 5px; } /* right */ .u-pd__r--20 { padding-right: 20px; } .u-pd__r--10 { padding-right: 10px; } .u-pd__r--5 { padding-right: 5px; } /* left */ .u-pd__l--20 { padding-left: 20px; } .u-pd__l--10 { padding-left: 10px; } .u-pd__l--5 { padding-left: 5px; } /* zero */ .u-pd__y--0 { padding-top: 0 !important; padding-bottom: 0 !important; } .u-pd__x--0 { padding-left: 0 !important; padding-right: 0 !important; } .u-pd__t--0 { padding-top: 0 !important; } .u-pd__b--0 { padding-bottom: 0 !important; } .u-pd__r--0 { padding-right: 0 !important; } .u-pd__l--0 { padding-left: 0 !important; } /* * utility */ .u-sp--none { display: none; } @media screen and (min-width: 768px) { .u-sp--none { display: block; } } @media screen and (min-width: 980px) { .u-pc--none { display: none; } } @media screen and (min-width: 768px) { .u-pcOrder--1 { order: -1; } } .u-sp--br { display: block; } @media screen and (min-width: 768px) { .u-sp--br { display: none; } } .u-pc--br { display: none; } @media screen and (min-width: 768px) { .u-pc--br { display: block; } } .u-sp--center { text-align: center; } @media screen and (min-width: 768px) { .u-sp--center { text-align: left; } } @media screen and (min-width: 768px) { .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-alignCont--center { align-content: center; } .u-align--strech { align-items: stretch; } .u-align--normal { align-items: normal; } .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 !important; } @media screen and (min-width: 768px) { .u-pcWidth--50 { width: 50%; } } @media screen and (min-width: 768px) { .u-pcWidth--60 { width: 60%; } } @media screen and (min-width: 768px) { .u-pcWidth--70 { width: 70%; } } @media screen and (min-width: 768px) { .u-pcWidth--80 { width: 80%; } } @media screen and (min-width: 768px) { .u-pcWidth--90 { width: 90%; } } @media screen and (min-width: 768px) { .u-pcWidth--100 { width: 100%; } } @media screen and (min-width: 768px) { .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: 768px) { .u-border--radius { border-radius: 30px; } } .ut-nowrap { white-space: nowrap; } @media screen and (max-width: 767px) { .ut-spNowrap { white-space: nowrap; } } @media screen and (min-width: 768px) { .ut-pcNowrap { white-space: nowrap; } } .u-displayBlock { display: block; } .u-displayTable { display: table; } /* * 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: 700; } .u-font__z--56 { line-height: 1.3; font-size: 35px; } @media screen and (min-width: 768px) { .u-font__z--56 { font-size: 56px; } } .u-font__z--35 { line-height: 1.3; font-size: 28px; } @media screen and (min-width: 768px) { .u-font__z--35 { font-size: 35px; } } .u-font__z--32 { line-height: 1.3; font-size: 24px; } @media screen and (min-width: 768px) { .u-font__z--32 { font-size: 32px; } } .u-font__z--28 { line-height: 1.3; font-size: 22px; } @media screen and (min-width: 768px) { .u-font__z--28 { font-size: 28px; } } .u-font__z--26 { line-height: 1.6; font-size: 20px; } @media screen and (min-width: 768px) { .u-font__z--26 { font-size: 26px; } } .u-font__z--24 { line-height: 1.6; font-size: 20px; } @media screen and (min-width: 768px) { .u-font__z--24 { font-size: 24px; } } .u-font__z--22 { line-height: 1.6; font-size: 18px; } @media screen and (min-width: 768px) { .u-font__z--22 { font-size: 22px; } } .u-font__z--20 { line-height: 1.6; font-size: 16px; } @media screen and (min-width: 768px) { .u-font__z--20 { font-size: 20px; } } .u-font__z--18 { line-height: 1.8; font-size: 16px; } @media screen and (min-width: 768px) { .u-font__z--18 { font-size: 18px; } } .u-font__z--16 { line-height: 1.8; font-size: 14px; } @media screen and (min-width: 768px) { .u-font__z--16 { font-size: 16px; } } .u-font__z--14 { line-height: 1.8; font-size: 13px; } @media screen and (min-width: 768px) { .u-font__z--14 { font-size: 14px; } } .u-font__z--12 { line-height: 1.8; font-size: 10px; } @media screen and (min-width: 768px) { .u-font__z--12 { font-size: 12px; } } .u-font__z--10 { line-height: 1.8; font-size: 10px; }