@charset "UTF-8"; /* * base */ @import url("https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&family=Noto+Serif+JP:wght@200..900&family=Playfair+Display:ital,wght@0,400..900;1,400..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; -moz-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 */ ::-moz-placeholder { color: unset; } ::placeholder { color: unset; } /* fix the feature of 'hidden' attribute. display:revert; revert to element instead of attribute */ :where([hidden]) { display: none; } /* revert for bug in Chromium browsers - fix for the content editable attribute will work properly. - webkit-user-select: auto; added for Safari in case of using user-select:none on wrapper element*/ :where([contenteditable]:not([contenteditable=false])) { -moz-user-modify: read-write; -webkit-user-modify: read-write; overflow-wrap: break-word; -webkit-line-break: after-white-space; -webkit-user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /* Revert Modal native behavior */ :where(dialog:modal) { all: revert; box-sizing: border-box; } /* Remove details summary webkit styles */ ::-webkit-details-marker { display: none; } body { margin: 0; padding: 0; position: relative; background-color: #fff; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; color: #1A1311; font-size: 100%; -webkit-text-size-adjust: 100%; word-break: break-word; } a { text-decoration: none; } a:hover { text-decoration: inherit; } img { vertical-align: bottom; } b { font-weight: bold; } /* * header */ .l-header { position: sticky; top: 0; left: 0; z-index: 100; background-color: #fff; } @media screen and (min-width: 768px) { .l-header { position: relative; z-index: 10; } } .scrolled .l-header { box-shadow: 0 0 6px rgba(0, 0, 0, 0.12); } .p-header { position: relative; } .p-headerBar { display: none; } @media screen and (min-width: 768px) { .p-headerBar { padding: 13px 22px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; align-items: center; justify-content: space-between; background-color: #EFEFEF; } } .p-headerBar .c-siteTitle { font-size: 12px; } .p-headerBarNav { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; align-items: center; -moz-column-gap: 13px; column-gap: 13px; } .p-headerBarNav > a { padding-right: 13px; font-size: 12px; } .p-headerBarNav > a:nth-of-type(n+3) { border-right: 1px solid rgba(26, 19, 17, 0.2); } .p-headerBarNav > a img { margin-right: 5px; margin-bottom: -1px; width: 16px; height: 16px; } .p-headerBar .p-snsLinks { margin-left: 9px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; -moz-column-gap: 13px; column-gap: 13px; } .p-headerBar .p-snsLinks a img { width: 28px; } .p-headerMain { padding: 13px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; justify-content: center; } @media screen and (min-width: 768px) { .p-headerMain { padding: 22px; align-items: center; justify-content: space-between; } } @media screen and (min-width: 1201px) { .p-headerMain { padding: 35px 22px 35px 35px; -moz-column-gap: 44px; column-gap: 44px; } } .p-headerMain .c-siteLogo { margin-left: 13px; } @media screen and (min-width: 768px) { .p-headerMain .c-siteLogo { margin: 0 auto 0 0; transition: all 0.6s; } } .p-headerMain .c-siteLogo img { width: 82px; height: 35px; } @media screen and (min-width: 768px) { .p-headerMain .c-siteLogo img { width: 100px; height: 52px; } } @media screen and (min-width: 1201px) { .p-headerMain .c-siteLogo img { width: 131px; height: 56px; } } .p-langSwitch { position: relative; font-size: 11px; } .p-langSwitch .c-title img { margin-right: 5px; width: 16px; height: 16px; } .p-langSwitch::before, .p-langSwitch::after { position: absolute; bottom: -16px; content: ""; display: block; } .p-langSwitch::before { z-index: 101; width: 100%; height: 16px; } .p-langSwitch::after { margin-left: 0; left: 50%; z-index: 102; display: none; background-color: #fff; width: 22px; height: 16px; clip-path: polygon(0 100%, 50% 0, 100% 100%); } .p-langSwitchList { margin-top: 15px; padding: 22px; position: absolute; top: 100%; left: 0; z-index: 100; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; row-gap: 13px; display: none; width: 150%; background-color: #fff; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12); } .p-langSwitchList a { font-size: 14px; } @media screen and (min-width: 768px) { .p-langSwitch:hover::after { display: block; } } @media screen and (min-width: 768px) { .p-langSwitch:hover .p-langSwitchList { display: flex; } } .p-langSwitchContents { padding: 20px 13px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; justify-content: center; align-items: center; row-gap: 13px; display: none; position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; background-color: #fff; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.12); visibility: hidden; opacity: 0; transition-delay: 0.1s; transition: all 0.4s; } .p-langSwitchContents.is-active { display: flex; visibility: visible; opacity: 1; } .p-langSwitchContents.is-active .p-langSwitchList { margin-top: 0; position: static; display: flex; flex-direction: row; -moz-column-gap: 22px; column-gap: 22px; } .p-langSwitchContents .p-langSwitchList:last-child { padding-top: 13px; border-top: 1px solid #EFEFEF; justify-content: center; width: 100%; } .p-headerMobileTool { position: absolute; top: 22px; left: 22px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; -moz-column-gap: 22px; column-gap: 22px; } @media screen and (min-width: 768px) { .p-headerMobileTool { display: none; } } .p-headerMobileTool .c-langCloseButton { position: absolute; left: 22px; top: 20px; } .p-headerMobileTool .p-langSwitch .c-title img { width: 18px; height: 18px; } .p-headerMobileTool .p-langSwitchList { padding: 0; width: auto; background-color: transparent; box-shadow: none; } .menu-open .p-headerMobileTool { z-index: 1000; } .menu-open .p-headerMobileTool .p-langSwitch .c-title img { filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(218deg) brightness(104%) contrast(105%); } .menu-open .p-headerMobileTool .p-glbSearchIcon { filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(218deg) brightness(104%) contrast(105%); } .menu-open .p-headerMobileTool .is-active .p-glbSearchIcon { filter: none; } .p-glbNav { display: none; } @media screen and (min-width: 768px) { .p-glbNav { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; align-items: center; } } .p-glbNavList { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; -moz-column-gap: 22px; column-gap: 22px; } .p-glbNavList li a { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-size: 15px; letter-spacing: 0.1rem; } .p-searchButton { line-height: 0; transition: all 0.4s; } @media screen and (min-width: 768px) { .p-searchButton { margin: 0; } } .p-searchButton img { width: 15px; height: 15px; } .p-glbSearch { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; align-items: center; } .p-glbSearch form { display: inline-flex; width: 100%; } .p-glbSearchButton { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; justify-content: center; align-items: center; border-radius: 50%; width: 28px; height: 28px; background-color: #F4F4F4; } @media screen and (min-width: 768px) { .p-glbSearchButton { margin-top: 3px; } } @media screen and (min-width: 768px) { .p-glbSearchButton:hover { cursor: pointer; } } .p-glbSearchIcon { width: 18px; height: 18px; } @media screen and (min-width: 768px) { .p-glbSearchIcon { width: 16px; height: 16px; } } .p-glbSearchField { border-top: 1px solid #F4F4F4; padding: 15px 13px; display: none; position: fixed; top: 0; left: 0; z-index: 1000; width: 100%; background-color: #fff; visibility: hidden; opacity: 0; transition: all 0.4s; } @media screen and (min-width: 768px) { .p-glbSearchField { padding: 0; border-top: none; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; align-items: center; flex-wrap: nowrap; position: absolute; top: 0; left: 0; z-index: 8; height: 100%; box-shadow: none; } } @media screen and (min-width: 980px) { .p-glbSearchField { height: 100%; } } .p-glbSearchField.is-active { display: flex; visibility: visible; opacity: 1; } .p-glbSearchField .c-form__input { margin: 0 8px 0 0; width: calc(100% - 77px); height: 28px; text-align: left; } @media screen and (min-width: 768px) { .p-glbSearchField .c-form__input { width: calc(100% - 44px); height: 35px; } } @media screen and (min-width: 768px) { .p-glbSearch:hover .p-searchButton { opacity: 0; visibility: hidden; } } .p-glbSearch:hover .p-glbSearchField { display: flex; } @media screen and (min-width: 768px) { .p-glbSearch:hover .p-glbSearchField { opacity: 1; visibility: visible; transform: translate(0px); } } .c-headerSearchButton { display: none; border: none; background-color: transparent; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: all 0.4s; } @media screen and (min-width: 768px) { .c-headerSearchButton:hover { opacity: 0.7; } } .p-mobileNavButton { padding: 10px; border: none; position: fixed; top: 7px; right: 8px; z-index: 100; display: flex; flex-wrap: wrap; align-items: center; align-content: center; justify-items: normal; justify-content: normal; width: 48px; height: 48px; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } @media screen and (min-width: 768px) { .p-mobileNavButton { display: none; top: 72px; right: 22px; width: 56px; height: 56px; } } .p-mobileNavButton .c-navBorder { margin-bottom: 5px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; justify-content: center; row-gap: 5px; } .p-mobileNavButton .c-navBorder span, .p-mobileNavButton .c-navBorder::before, .p-mobileNavButton .c-navBorder::after { content: ""; display: block; width: 22px; height: 1px; background-color: #1A1311; transition: all 0.4s; } @media screen and (min-width: 768px) { .p-mobileNavButton .c-navBorder span, .p-mobileNavButton .c-navBorder::before, .p-mobileNavButton .c-navBorder::after { width: 44px; height: 2px; } } .p-mobileNavButton .c-navBorder span { display: block; } .p-mobileNavButton .c-navName { margin-left: 1px; display: block; line-height: 1; font-size: 10px; letter-spacing: 0; transform: scale(0.9); } .p-headerMenu { position: fixed; top: 0; left: 100%; z-index: 90; width: 100%; height: 100svh; height: 100lvh; } @media screen and (min-width: 768px) { .p-headerMenu { display: block; position: static; width: auto; height: auto; } } .p-headerMenuInner { padding: 61px 22px 35px 22px; 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: 768px) { .p-headerMenuInner { padding: 0; overflow: visible; opacity: 1; } } .p-headerMenuInner.menu-visible { overflow-y: visible; } .p-headerMenuContent { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; justify-content: center; -moz-column-gap: 13px; column-gap: 13px; overflow: hidden; } @media screen and (min-width: 768px) { .p-headerMenuContent { -moz-column-gap: 22px; column-gap: 22px; } } @media screen and (min-width: 1201px) { .p-headerMenuContent { -moz-column-gap: 22px; column-gap: 22px; } } .p-headerMenu::after { content: ""; display: block; position: fixed; top: 0; left: 0; z-index: -10; width: 100%; height: 100svh; height: 100lvh; background-color: #1A1311; visibility: hidden; transition: all 0.3s; opacity: 0; } .p-headerMenu .p-glbSitemap { margin-bottom: 22px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); width: 100%; } @media screen and (min-width: 768px) { .p-headerMenu .p-glbSitemap { display: none; } } .p-headerMenu .p-glbSearch { display: none; } @media screen and (min-width: 768px) { .p-headerMenu .p-glbSearch { display: flex; } } .p-headerMenu .p-sns { margin-top: 22px; padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.2); width: 100%; } @media screen and (min-width: 768px) { .p-headerMenu .p-sns { display: none; } } .p-headerMenu .p-sns .c-title { margin-bottom: 13px; color: #fff; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-size: 12px; text-align: center; } .p-headerMenu .p-sns .p-snsLinks { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; justify-content: center; -moz-column-gap: 13px; column-gap: 13px; } .p-headerMenu .p-sns .p-snsLinks a img { width: 40px; } .p-headerContact { margin-bottom: 22px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; align-items: center; justify-content: space-between; width: 100%; } @media screen and (min-width: 768px) { .p-headerContact { display: none; } } @media screen and (min-width: 980px) { .p-headerContact { margin-bottom: 0; display: flex; justify-content: flex-start; -moz-column-gap: 22px; column-gap: 22px; width: auto; } } .p-headerContact a { padding: 13px; border: 1px solid #1A1311; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; justify-content: center; align-items: center; width: 48%; background-color: #fff; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-size: 13px; } @media screen and (min-width: 768px) { .p-headerContact a { padding: 0; border: none; width: auto; background-color: transparent; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-size: 13px; } } .p-headerContact a:nth-of-type(2) { border-color: #fff; background-color: transparent; color: #fff; } @media screen and (min-width: 768px) { .p-headerContact a:nth-of-type(2) { color: #1A1311; } } @media screen and (min-width: 768px) { .p-headerContact a::after { margin-top: 3px; content: ""; display: block; width: 100%; height: 1px; background-color: #1A1311; } } .menu-open { overflow: hidden; } .menu-open .p-headerMain .c-siteLogo { z-index: 100; } .menu-open .p-headerMain .c-siteLogo img { filter: invert(100%) sepia(0%) saturate(0%) hue-rotate(218deg) brightness(104%) contrast(105%); } .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; } @media screen and (min-width: 768px) { .menu-open .p-headerMenu::after { top: 39px; } } .menu-open .p-mobileNavButton .c-navBorder span, .menu-open .p-mobileNavButton .c-navBorder::before, .menu-open .p-mobileNavButton .c-navBorder::after { background-color: #fff; } .menu-open .p-mobileNavButton .c-navBorder::before { transform: translate(0px, 6px) rotate(45deg); } .menu-open .p-mobileNavButton .c-navBorder span { transform: translate(0px, 0px) rotate(-45deg); } .menu-open .p-mobileNavButton .c-navBorder::after { opacity: 0; } .menu-open .p-mobileNavButton .c-navName { color: #fff; } .p-glbBrandNav { padding-right: 0 !important; position: relative; width: 100% !important; } .p-glbBrandNav > a { padding: 10px 13px; display: block; background-color: rgba(255, 255, 255, 0.1); } .p-glbBrandNavList { padding: 0 13px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; row-gap: 13px; position: relative; z-index: 100; width: 100%; max-height: 0; overflow: hidden; visibility: hidden; transition: max-height 0.4s ease, padding 0.4s ease, opacity 0.4s ease 0.4s; opacity: 0; } .p-glbBrandNavList.is-open { padding: 22px 13px; border-bottom: 1px solid rgba(255, 255, 255, 0.2); max-height: 2000px; visibility: visible; opacity: 1; } .p-glbBrandNavList li { width: 100% !important; } .p-glbBrandNavList .c-brandName { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; } .p-glbBrandNavList .c-brandName span { font-weight: normal; } .p-glbBrandNavList .c-brandName .-en { font-size: 12px; } .p-glbBrandNavList .c-brandName .-jp { font-size: 10px; transform: scale(0.8); transform-origin: left center; } .p-headerInfo { margin-top: 35px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; justify-content: center; align-items: center; row-gap: 13px; width: 100%; color: #fff; text-align: center; } @media screen and (min-width: 768px) { .p-headerInfo { display: none; } } .p-headerInfo .c-siteLogo { width: 114px; order: -1; } .p-headerInfo .c-siteLogoImg { filter: invert(92%) sepia(100%) saturate(2%) hue-rotate(175deg) brightness(107%) contrast(100%); } .p-headerInfo .c-siteTitle { line-height: 2; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-size: 11px; } @media screen and (min-width: 768px) { .p-headerInfo .c-siteTitle { font-size: 12px; } } .p-headerInfo .c-shopAddress { line-height: 2; font-size: 11px; } .p-headerInfo .c-shopAddress .c-tel { margin-top: 0; font-size: 12px; } .p-headerLangLink { margin-top: 35px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; justify-content: center; -moz-column-gap: 22px; column-gap: 22px; row-gap: 13px; } @media screen and (min-width: 768px) { .p-headerLangLink { display: none; } } .p-headerLangLink a { padding: 13px; border: 1px solid #535353; color: #fff; font-size: 12px; opacity: 0.7; } @media screen and (min-width: 768px) { .p-headerLangLink a { padding: 13px 35px; font-size: 14px; } } .c-singleToggleButton { position: absolute; right: 0; top: 0; width: 100%; height: 100%; text-align: right; } .c-singleToggleButton span { margin: 0 13px; display: inline-block; } .c-singleToggleButton span::before, .c-singleToggleButton span::after { content: ""; display: block; width: 14px; height: 1px; background-color: #fff; transition: all 0.4s; } .c-singleToggleButton span::before { transform: translate(0px, 1px) rotate(90deg); } .c-singleToggleButton.is-open span::before { opacity: 0; } .c-langCloseButton, .c-formCloseButton { margin: 0 13px 0 8px; } @media screen and (min-width: 768px) { .c-langCloseButton, .c-formCloseButton { display: none; } } .c-langCloseButton span::before, .c-langCloseButton span::after, .c-formCloseButton span::before, .c-formCloseButton span::after { content: ""; display: block; width: 14px; height: 1px; background-color: #363636; } .c-langCloseButton span::before, .c-formCloseButton span::before { transform: translate(0px, 0px) rotate(45deg); } .c-langCloseButton span::after, .c-formCloseButton span::after { transform: translate(0px, -1px) rotate(-45deg); } .c-langCloseButton { width: 22px; height: 22px; } .c-formBox__input { padding: 14px 13px; border: none; border-radius: 0; width: 125.3%; background-color: #363636; font-size: 16px; color: #fff; -webkit-appearance: none; -moz-appearance: none; appearance: none; transform-origin: 0 0; transform: scale(0.8); } .c-formBox__input::-moz-placeholder { color: #fff; opacity: 0.5; } .c-formBox__input::placeholder { color: #fff; opacity: 0.5; } .c-formBox__button { border: none; position: absolute; top: 0; right: 0; width: 38px; height: 38px; background-color: transparent; -webkit-appearance: none; -moz-appearance: none; appearance: none; outline: none; } .c-formBox__button img { filter: invert(99%) sepia(3%) saturate(273%) hue-rotate(287deg) brightness(114%) contrast(100%); opacity: 0.7; } @media screen and (min-width: 768px) { .c-formBox__button:hover { cursor: pointer; } } .p-headerSeal { padding-top: 22px; border-top: 1px solid rgba(255, 255, 255, 0.2); display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; justify-content: center; -moz-column-gap: 13px; column-gap: 13px; width: 100%; } @media screen and (min-width: 768px) { .p-headerSeal { padding-top: 0; border-top: none; justify-content: flex-start; width: auto; } } .p-headerSeal a { display: inline-flex; } .p-headerSeal a img { width: auto; height: 66px; } .p-headerSeal iframe { width: 139px; height: 66px; } .p-headerSeal:empty { display: none; } .p-headerSeal:empty + .p-sns { margin-top: 0; } /* * footer */ .p-glbSitemap { border-top: 1px solid rgba(255, 255, 255, 0.2); } @media screen and (min-width: 768px) { .p-glbSitemap { border-top: none; } } .p-glbSitemap .p-sitemapCol { padding: 22px 0 0 0; border-bottom: 1px solid rgba(255, 255, 255, 0.2); } @media screen and (min-width: 768px) { .p-glbSitemap .p-sitemapCol { padding: 0; border-bottom: none; width: 23.0496453901%; } } .p-glbSitemap .p-toggleTitle { margin-bottom: 22px; position: relative; color: #fff; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 600; font-size: 16px; letter-spacing: 0.1rem; } .p-glbSitemap .p-toggleTitle.is-open .c-toggleButton::before { opacity: 0; } .p-glbSitemap .c-toggleButton { position: absolute; right: 0; top: -10px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; align-items: center; justify-content: center; width: 40px; height: 40px; background-color: rgba(255, 255, 255, 0.08); } @media screen and (min-width: 768px) { .p-glbSitemap .c-toggleButton { display: none; } } .p-glbSitemap .c-toggleButton::before, .p-glbSitemap .c-toggleButton::after { content: ""; display: block; width: 16px; height: 1px; background-color: #fff; transition: all 0.4s; } .p-glbSitemap .c-toggleButton::before { transform: translate(0px, 1px) rotate(90deg); } .p-glbSitemap .p-glbNavList { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; -moz-column-gap: 0; column-gap: 0; row-gap: 13px; max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding-bottom 0.4s ease, opacity 0.4s ease; opacity: 0; } @media screen and (min-width: 768px) { .p-glbSitemap .p-glbNavList { flex-direction: column; row-gap: 20px; } } .p-glbSitemap .p-glbNavList.is-open { padding-bottom: 22px; max-height: 2000px; opacity: 1; } .p-glbSitemap .p-glbNavList li { padding-right: 22px; width: 50%; } @media screen and (min-width: 768px) { .p-glbSitemap .p-glbNavList li { width: auto; } } .p-glbSitemap .p-glbNavList li a { color: #fff; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-size: 12px; } @media screen and (min-width: 768px) { .p-glbSitemap .p-glbNavList li a { font-size: 13px; } } .p-footer { padding: 35px 0; background-color: #1A1311; color: #fff; } @media screen and (min-width: 768px) { .p-footer { padding: 56px 0; } } .p-footer .l-container { padding: 0 22px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; } @media screen and (min-width: 768px) { .p-footer .l-container { -moz-column-gap: 1.8835616438%; column-gap: 1.8835616438%; } } .p-footer .p-glbSitemap { margin-bottom: 35px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; width: 100%; } @media screen and (min-width: 768px) { .p-footer .p-glbSitemap { margin-bottom: 0; border-bottom: none; width: 72.4315068493%; flex-direction: row; -moz-column-gap: 2.6004728132%; column-gap: 2.6004728132%; } } @media screen and (min-width: 768px) { .p-footer .p-glbBrandNav > a { padding: 0; background-color: transparent; } } @media screen and (min-width: 768px) { .p-footer .p-glbBrandNav .c-singleToggleButton { display: none; } } .p-footerInfo { margin-top: 35px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; justify-content: flex-start; align-items: center; row-gap: 13px; width: 100%; text-align: center; } @media screen and (min-width: 768px) { .p-footerInfo { margin-top: 0; width: 25.6849315068%; row-gap: 22px; order: -1; } } .p-footerInfo .c-siteLogo { width: 114px; order: -1; } .p-footerInfo .c-siteLogoImg { filter: invert(92%) sepia(100%) saturate(2%) hue-rotate(175deg) brightness(107%) contrast(100%); } .p-footerInfo .c-siteTitle { line-height: 2; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-size: 11px; } @media screen and (min-width: 768px) { .p-footerInfo .c-siteTitle { font-size: 13px; } } .p-footerInfo .c-shopAddress { line-height: 2; font-size: 11px; } @media screen and (min-width: 768px) { .p-footerInfo .c-shopAddress { font-size: 13px; } } .p-footerInfo .c-shopAddress .c-tel { margin-top: 0; font-size: 13px; } .p-footer .p-sns { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; align-items: center; width: 100%; } @media screen and (min-width: 768px) { .p-footer .p-sns { width: 25.6849315068%; } } .p-footer .p-sns .c-title { margin-bottom: 13px; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-size: 12px; } .p-footer .p-sns .p-snsLinks { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; -moz-column-gap: 22px; column-gap: 22px; } .p-footer .p-sns .p-snsLinks a { width: 30px; height: 30px; } .p-sns.-default { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; align-items: center; width: 100%; } .p-sns.-default .p-snsLinks { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; -moz-column-gap: 22px; column-gap: 22px; } .p-sns.-default .p-snsLinks a { width: 30px; height: 30px; } .p-footerLangLink { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; justify-content: center; -moz-column-gap: 22px; column-gap: 22px; row-gap: 13px; } @media screen and (min-width: 768px) { .p-footerLangLink { margin-top: 13px; justify-content: flex-start; width: 72.4315068493%; } } .p-footerLangLink a { padding: 13px; border: 1px solid #535353; font-size: 12px; opacity: 0.7; } @media screen and (min-width: 768px) { .p-footerLangLink a { padding: 13px 35px; font-size: 13px; } } .p-footerBanners { padding: 22px 0; background-color: #fff; } @media screen and (min-width: 768px) { .p-footerBanners { padding: 35px 0; } } .p-footerBanners .l-container { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; justify-content: center; -moz-column-gap: 22px; column-gap: 22px; row-gap: 22px; } @media screen and (min-width: 768px) { .p-footerBanners .l-container { flex-wrap: nowrap; align-items: center; -moz-column-gap: 22px; column-gap: 22px; } } .p-footerBanners .-bnr--1 { width: 146px; } @media screen and (min-width: 768px) { .p-footerBanners .-bnr--1 { width: 188px; } } .p-footerBanners .-bnr--2 { width: 48px; } @media screen and (min-width: 768px) { .p-footerBanners .-bnr--2 { width: 68px; } } .p-footerBanners .-bnr--3 { width: 48px; } @media screen and (min-width: 768px) { .p-footerBanners .-bnr--3 { width: 62px; } } .p-footerBanners .-bnr--4 { width: 177px; } @media screen and (min-width: 768px) { .p-footerBanners .-bnr--4 { width: 230px; } } .p-footerBanners .-bnr--5 { width: 155px; } @media screen and (min-width: 768px) { .p-footerBanners .-bnr--5 { width: 220px; } } .p-footerBanners .-bnr--6 { width: 128px; } @media screen and (min-width: 768px) { .p-footerBanners .-bnr--6 { width: 160px; } } .p-footerBanners .-bnr--7 { border: 1px solid #EFEFEF; width: 128px; } @media screen and (min-width: 768px) { .p-footerBanners .-bnr--7 { width: 180px; } } .p-footerOthers { padding: 22px 0 100px 0; background-color: #EFEFEF; } @media screen and (min-width: 768px) { .p-footerOthers { padding: 35px 0; } } .p-footerOthers .l-container { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; justify-content: center; row-gap: 22px; } @media screen and (min-width: 768px) { .p-footerOthers .l-container { row-gap: 0; justify-content: flex-start; align-items: stretch; -moz-column-gap: 56px; column-gap: 56px; } } .p-footerOthers .p-privacyLink img { width: 56px; height: auto; } @media screen and (min-width: 768px) { .p-footerOthers .p-privacyLink img { width: 72px; } } .p-footerSubNav { padding: 0 22px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; align-items: center; justify-content: center; -moz-column-gap: 22px; column-gap: 22px; row-gap: 22px; } @media screen and (min-width: 768px) { .p-footerSubNav { margin: 13px 0; padding: 0; justify-content: flex-start; } } .p-footerSubNav a { font-size: 10px; letter-spacing: 0.05rem; } @media screen and (min-width: 768px) { .p-footerSubNav a { font-size: 12px; } } .p-footerSubNav a:first-child { width: 100%; text-align: center; } @media screen and (min-width: 768px) { .p-footerSubNav a:first-child { width: auto; text-align: left; } } .p-footerPayment { width: 80%; text-align: center; } @media screen and (min-width: 768px) { .p-footerPayment { width: auto; } } .p-copyright { margin-top: 13px; font-size: 10px; text-align: center; letter-spacing: 0.075rem; } @media screen and (min-width: 768px) { .p-copyright { margin: 0 0 0 auto; font-size: 11px; text-align: left; } } /* * main */ .l-wrapper { overflow: hidden; } .l-main { position: relative; z-index: 1; letter-spacing: 0.05rem; } @media screen and (min-width: 600px) { .l-basicSplit { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: space-between; } } .l-basicSplit__main, .l-basicSplit__aside { margin-bottom: 56px; } @media screen and (min-width: 600px) { .l-basicSplit__main { width: 62.8424657534%; } } @media screen and (min-width: 600px) { .l-basicSplit__aside { width: 27.5684931507%; } } /* * fixed-nav */ .p-fixedNav { position: fixed; bottom: 22px; right: 11px; z-index: 8; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; align-items: center; -moz-column-gap: 8px; column-gap: 8px; row-gap: 13px; } @media screen and (min-width: 768px) { .p-fixedNav { bottom: 35px; right: 22px; display: inline-block; -moz-column-gap: 13px; column-gap: 13px; text-align: right; } } .p-guideNavList, .p-lineContact { border-radius: 8px; background-color: #fff; box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.06); } .p-guideNavList { padding: 8px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; justify-content: space-around; -moz-column-gap: 6px; column-gap: 6px; } @media screen and (min-width: 768px) { .p-guideNavList { padding: 8px 13px; -moz-column-gap: 22px; column-gap: 22px; } } .p-guideNavCol { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; justify-content: flex-end; font-size: 11px; } @media screen and (min-width: 768px) { .p-guideNavCol { font-size: 11px; } } .c-guideLink { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; justify-content: space-around; align-items: center; } .c-guideLink.-brand img { width: 17px; } .c-guideLink.-contact img { margin-bottom: 3px; width: 20px; } .c-guideLink.-shoppingGuide img { margin-bottom: 3px; width: 28px; } .c-guideLink.-appointment img { margin-bottom: 3px; width: 16px; } .c-guideLink figcaption { transform: scale(0.9); } @media screen and (min-width: 768px) { .c-guideLink figcaption { transform: scale(1); } } .p-lineContact { padding: 5px 2px; display: inline-block; text-align: center; } @media screen and (min-width: 768px) { .p-lineContact { margin-top: 13px; padding: 8px 13px; } } @media screen and (min-width: 768px) { .p-lineContact figure { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; align-items: center; -moz-column-gap: 8px; column-gap: 8px; } } .p-lineContact figure img { width: 26px; } .p-lineContact figure figcaption { line-height: 1; font-size: 11px; transform: scale(0.8); } @media screen and (min-width: 768px) { .p-lineContact figure figcaption { transform: scale(1); } } .p-lineContact figure figcaption .-pc { display: none; } @media screen and (min-width: 768px) { .p-lineContact figure figcaption .-pc { display: inline-block; } } .p-lineContact figure figcaption .-sp { display: block; } @media screen and (min-width: 768px) { .p-lineContact figure figcaption .-sp { display: none; } } /* * container */ .l-container { margin: 0 auto; padding: 0 13px; } @media screen and (min-width: 768px) { .l-container { padding: 0 22px; } } .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 (min-width: 768px) { .-width--640 { max-width: 596px; } } @media screen and (min-width: 768px) { .-width--768 { max-width: 724px; } } @media screen and (min-width: 768px) { .-width--790 { max-width: 790px; } } @media screen and (min-width: 768px) { .-width--880 { max-width: 880px; } } @media screen and (min-width: 768px) { .-width--1024 { max-width: 1024px; } } @media screen and (min-width: 768px) { .-width--1070 { max-width: 1070px; } } @media screen and (min-width: 768px) { .-width--1168 { max-width: 1168px; } } @media screen and (min-width: 768px) { .-width--1210 { max-width: 1210px; } } @media screen and (min-width: 768px) { .-width--1440 { max-width: 1396px; } } .-width--full { padding: 0; max-width: 100%; } /* * breadcrumb */ .p-breadcrumb { padding: 11px 13px; background-color: #EFEFEF; } @media screen and (min-width: 768px) { .p-breadcrumb { padding: 11px 22px; } } .p-breadcrumbList { margin: 0; padding: 0; list-style-type: none; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; } .p-breadcrumbList li { font-size: 10px; letter-spacing: 0.05rem; } @media screen and (min-width: 768px) { .p-breadcrumbList li { font-size: 11px; } } .p-breadcrumbList li:nth-of-type(n+2)::before { margin: 0 8px; content: ""; display: inline-block; width: 8px; height: 1px; background-color: #1A1311; opacity: 0.4; vertical-align: 0.25rem; } @media screen and (min-width: 768px) { .p-breadcrumbList li:nth-of-type(n+2)::before { margin: 0 13px; } } .p-breadcrumb:last-of-type { background-color: transparent; } /* * default */ /* * grid */ .l-grid { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; } .l-grid.-has--gap { -moz-column-gap: 2.734375%; column-gap: 2.734375%; row-gap: 2.734375vw; } .l-grid.-has--gap > .-col--1 { width: 5.8268229167%; } .l-grid.-has--gap > .-col--2 { width: 14.3880208333%; } .l-grid.-has--gap > .-col--3 { width: 22.94921875%; } .l-grid.-has--gap > .-col--4 { width: 31.5104166667%; } .l-grid.-has--gap > .-col--5 { width: 40.0716145833%; } .l-grid.-has--gap > .-col--6 { width: 48.6328125%; } .l-grid.-has--gap > .-col--7 { width: 57.1940104167%; } .l-grid.-has--gap > .-col--8 { width: 65.7552083333%; } .l-grid.-has--gap > .-col--9 { width: 74.31640625%; } .l-grid.-has--gap > .-col--10 { width: 82.8776041667%; } .l-grid.-has--gap > .-col--11 { width: 91.4388020833%; } @media screen and (min-width: 600px) { .l-grid.-has--gap > .-pcCol--1 { width: 5.8268229167%; } } @media screen and (min-width: 600px) { .l-grid.-has--gap > .-pcCol--2 { width: 14.3880208333%; } } @media screen and (min-width: 600px) { .l-grid.-has--gap > .-pcCol--3 { width: 22.94921875%; } } @media screen and (min-width: 600px) { .l-grid.-has--gap > .-pcCol--4 { width: 31.5104166667%; } } @media screen and (min-width: 600px) { .l-grid.-has--gap > .-pcCol--5 { width: 40.0716145833%; } } @media screen and (min-width: 600px) { .l-grid.-has--gap > .-pcCol--6 { width: 48.6328125%; } } @media screen and (min-width: 600px) { .l-grid.-has--gap > .-pcCol--7 { width: 57.1940104167%; } } @media screen and (min-width: 600px) { .l-grid.-has--gap > .-pcCol--8 { width: 65.7552083333%; } } @media screen and (min-width: 600px) { .l-grid.-has--gap > .-pcCol--9 { width: 74.31640625%; } } @media screen and (min-width: 600px) { .l-grid.-has--gap > .-pcCol--10 { width: 82.8776041667%; } } @media screen and (min-width: 600px) { .l-grid.-has--gap > .-pcCol--11 { width: 91.4388020833%; } } .l-gridCol.-col--1 { width: 8.3333333333%; } .l-gridCol.-col--2 { width: 16.6666666667%; } .l-gridCol.-col--3 { width: 25%; } .l-gridCol.-col--4 { width: 33.3333333333%; } .l-gridCol.-col--5 { width: 41.6666666667%; } .l-gridCol.-col--6 { width: 50%; } .l-gridCol.-col--7 { width: 58.3333333333%; } .l-gridCol.-col--8 { width: 66.6666666667%; } .l-gridCol.-col--9 { width: 75%; } .l-gridCol.-col--10 { width: 83.3333333333%; } .l-gridCol.-col--11 { width: 91.6666666667%; } .l-gridCol.-col--12 { width: 100%; } @media screen and (min-width: 600px) { .l-gridCol.-pcCol--1 { width: 8.3333333333%; } } @media screen and (min-width: 600px) { .l-gridCol.-pcCol--2 { width: 16.6666666667%; } } @media screen and (min-width: 600px) { .l-gridCol.-pcCol--3 { width: 25%; } } @media screen and (min-width: 600px) { .l-gridCol.-pcCol--4 { width: 33.3333333333%; } } @media screen and (min-width: 600px) { .l-gridCol.-pcCol--5 { width: 41.6666666667%; } } @media screen and (min-width: 600px) { .l-gridCol.-pcCol--6 { width: 50%; } } @media screen and (min-width: 600px) { .l-gridCol.-pcCol--7 { width: 58.3333333333%; } } @media screen and (min-width: 600px) { .l-gridCol.-pcCol--8 { width: 66.6666666667%; } } @media screen and (min-width: 600px) { .l-gridCol.-pcCol--9 { width: 75%; } } @media screen and (min-width: 600px) { .l-gridCol.-pcCol--10 { width: 83.3333333333%; } } @media screen and (min-width: 600px) { .l-gridCol.-pcCol--11 { width: 91.6666666667%; } } @media screen and (min-width: 600px) { .l-gridCol.-pcCol--12 { width: 100%; } } @media screen and (min-width: 768px) { .-has--partition { padding-right: 2.734375%; border-right: 1px solid #F4F4F4; } } /* * old grid */ /* grid system */ .grid-pattern { margin-bottom: 35px; } .grid { width: 103.71093%; overflow: hidden; } .grid__item { margin-right: 3.57815%; margin-bottom: 22px; } .grid-flex { display: flex; flex-wrap: wrap; width: 100%; } .grid-flex .grid__item { margin-right: 0; width: 100%; } @media screen and (min-width: 768px) { .grid-flex .grid__item { width: auto; } } .grid-flex.reverse-grid .grid__item:first-child { order: -1; } @media screen and (min-width: 768px) { .grid-flex.reverse-grid .grid__item:first-child { order: 2; } } .img-sp-60 { margin: 0 20%; width: 60% !important; } @media screen and (min-width: 768px) { .img-sp-60 { margin: 0 auto; width: auto !important; } } .img-sp-80 { margin: 0 10%; width: 80% !important; } @media screen and (min-width: 768px) { .img-sp-80 { margin: 0 auto; width: auto !important; } } .grid__item--1 { width: 2.966105%; } .grid__item--2 { width: 13.08851%; } .grid__item--3 { width: 21.42184%; } .grid__item--4 { width: 29.75517%; } .grid__item--5 { width: 38.0885%; } .grid__item--6 { width: 46.42183%; } .grid__item--7 { width: 54.75516%; } .grid__item--8 { width: 63.08849%; } .grid__item--9 { width: 71.42182%; } .grid__item--10 { width: 79.75515%; } .grid__item--11 { width: 89.877555%; } .grid__item--12 { width: 96.42181%; } .sp-grid__2 .grid__item--3 { width: 46.42183%; } @media screen and (min-width: 768px) { .sp-grid__2 .grid__item--3 { width: auto; } } .justify-center { justify-content: center; } .justify-center li { margin-bottom: 13px !important; text-align: center; } /* * button */ .c-link { position: relative; } .c-link::after { content: ""; display: block; position: absolute; bottom: -2px; left: 0; width: 100%; height: 1px; background-color: #1A1311; } .c-linkBox, .arw-l { padding: 10px 22px; border: 1px solid #1A1311; display: inline-block; background-color: #fff; } @media screen and (min-width: 768px) { .c-linkBox, .arw-l { padding: 13px 35px; } } .c-linkBox.-dark, .arw-l.-dark { background-color: #1A1311; color: #fff; } .c-linkBox.-dark.-border, .arw-l.-dark.-border { border: 1px solid #fff; background-color: transparent; } .c-linkBox.-lg, .arw-l.-lg { padding: 22px; width: 100%; font-size: 16px; text-align: center; } @media screen and (min-width: 768px) { .c-linkBox.-lg, .arw-l.-lg { padding: 22px 92px; width: auto; font-size: 18px; } } .c-arw::after { margin-left: 8px; content: ""; display: inline-block; width: 12px; height: 3px; background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012.82%202.82%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Anone%3Bstroke%3A%23bd1c22%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20id%3D%22_%E3%83%91%E3%82%B9_262%22%20class%3D%22cls-1%22%20d%3D%22M0%2C2.32h11.74l-1.69-2%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: 0% 0%; background-size: 100% auto; background-size: 100% auto; vertical-align: middle; } .c-moreButton { margin-left: -14px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; display: inline-flex; align-items: center; position: relative; z-index: 0; font-weight: 400; font-size: 10px; } @media screen and (min-width: 768px) { .c-moreButton { margin-left: -24px; font-size: 12px; } } .c-moreButton::before, .c-moreButton::after { content: ""; display: block; } .c-moreButton::before { position: relative; z-index: -1; border-radius: 50%; width: 24px; height: 24px; background-color: #fff; transform: translateX(14px); } @media screen and (min-width: 768px) { .c-moreButton::before { width: 48px; height: 48px; transform: translateX(24px); } } .c-moreButton::after { margin-top: -2px; margin-left: 5px; width: 12px; height: 3px; vertical-align: middle; background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012.82%202.82%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Anone%3Bstroke%3A%23bd1c22%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20id%3D%22_%E3%83%91%E3%82%B9_262%22%20class%3D%22cls-1%22%20d%3D%22M0%2C2.32h11.74l-1.69-2%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: 0% 0%; background-size: 100% auto; } @media screen and (min-width: 768px) { .c-moreButton::after { margin-left: 8px; width: 16px; height: 3px; } } .c-articleTagButton { padding: 8px 13px; border: 1px solid #C8151F; border-radius: 6px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; align-items: center; justify-content: center; background-color: #fff; color: #C8151F; font-weight: 500; font-size: 14px; } @media screen and (min-width: 768px) { .c-articleTagButton { padding: 13px; border-radius: 10px; font-size: 16px; } } .c-articleTagButton::before { margin-right: 5px; content: "#"; display: inline-block; } .c-contactButton { padding: 13px 22px; border-radius: 50px; display: block; width: 100%; background-color: #C8151F; color: #fff; font-size: 14px; text-align: center; } @media screen and (min-width: 768px) { .c-contactButton { padding: 22px 35px; max-width: 335px; font-size: 15px; } } .c-submitButton { padding: 13px 22px; border-radius: 0; display: block; width: 100%; background-color: #1A1311; color: #fff; font-size: 14px; text-align: center; } @media screen and (min-width: 768px) { .c-submitButton { padding: 22px 35px; font-size: 15px; transition: all 0.4s; } } @media screen and (min-width: 768px) { .c-submitButton:hover { cursor: pointer; opacity: 0.7; } } .c-boxButton { border: none; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; -webkit-appearance: none; -moz-appearance: none; appearance: none; } @media screen and (min-width: 600px) { .c-boxButton { transition: all 0.4s; } } @media screen and (min-width: 600px) { .c-boxButton:hover { opacity: 0.7; } } input[type=submit].c-boxButton.-reservation { padding: 13px 35px; border: 1px solid #797979; border-radius: 0; background-color: #F0F0F0; } .c-basicButton { display: inline-block; } .c-basicButton.c-boxButton { padding: 13px 22px; border: 1px solid #F4F4F4; } @media screen and (min-width: 600px) { .c-basicButton.c-boxButton { padding: 13px 35px; } } .c-basicButton.c-boxButton[target=_blank]::after { margin-left: 5px; content: ""; display: inline-block; width: 13px; height: 13px; background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2020%2020%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3A%23000%3Bstroke-width%3A0px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20class%3D%22cls-1%22%20d%3D%22M15%2C11v6c0%2C.28-.11.52-.29.71s-.43.29-.71.29H3c-.28%2C0-.53-.11-.71-.29s-.29-.43-.29-.71V6c0-.28.11-.53.29-.71s.43-.29.71-.29h6c.55%2C0%2C1-.45%2C1-1s-.45-1-1-1H3c-.83%2C0-1.58.34-2.12.88s-.88%2C1.29-.88%2C2.12v11c0%2C.83.34%2C1.58.88%2C2.12s1.29.88%2C2.12.88h11c.83%2C0%2C1.58-.34%2C2.12-.88s.88-1.29.88-2.12v-6c0-.55-.45-1-1-1s-1%2C.45-1%2C1ZM8.71%2C12.71L18%2C3.41v3.59c0%2C.55.45%2C1%2C1%2C1s1-.45%2C1-1V1c0-.14-.03-.26-.08-.38s-.12-.23-.22-.32t0%2C0c-.09-.09-.2-.17-.32-.22-.12-.05-.25-.08-.38-.08h-6c-.55%2C0-1%2C.45-1%2C1s.45%2C1%2C1%2C1h3.59L7.29%2C11.29c-.39.39-.39%2C1.02%2C0%2C1.41s1.02.39%2C1.41%2C0Z%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-size: cover; vertical-align: -0.075rem; } @media screen and (min-width: 600px) { .c-basicButton.-button--lg { padding: 22px 35px; } } .c-backButton { margin-top: 22px; padding: 13px; border: none; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; align-items: center; justify-content: center; width: 100%; background-color: #fff; color: #8EB3D5; font-size: 16px; font-weight: bold; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; transition: all 0.4s; } @media screen and (min-width: 600px) { .c-backButton { padding: 22px; font-size: 22px; } } .c-backButton::before { margin-right: 11px; content: ""; display: inline-block; width: 18px; height: 18px; background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2024.84%2015.27%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Anone%3Bstroke%3A%238eb3d5%3Bstroke-miterlimit%3A4%3Bstroke-width%3A2px%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cg%20id%3D%22_%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_12%22%3E%3Cpath%20id%3D%22_%E3%83%91%E3%82%B9_9%22%20class%3D%22cls-1%22%20d%3D%22M0%2C7.75h22.64%22%2F%3E%3Cpath%20id%3D%22_%E3%83%91%E3%82%B9_8%22%20class%3D%22cls-1%22%20d%3D%22M16.29.71l7.14%2C7.14-6.72%2C6.72%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: 0 50%; background-size: 100% auto; transform: scale(-1, 1); } @media screen and (min-width: 600px) { .c-backButton::before { margin-right: 13px; width: 22px; height: 22px; } } .c-basicButton ~ .c-backButton { opacity: 0.7; } @media screen and (min-width: 600px) { .c-basicButton ~ .c-backButton:hover { opacity: 1; } } /* * media */ .c-siteLogo { margin: 0; position: relative; z-index: 1; } .c-siteLogoImg { width: 102px; height: auto; } @media screen and (min-width: 768px) { .c-siteLogoImg { width: 155px; } } .c-gmap { position: relative; width: 100%; padding-top: 66.6666%; height: 0; } .c-gmap iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .c-youtube, .youtube { position: relative; padding-bottom: 56.25%; /*アスペクト比 16:9の場合の縦幅*/ height: 0; overflow: hidden; } .c-youtube iframe, .youtube iframe { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .c-embedMovie video { width: 100%; height: auto; } .c-basicTable th, .c-basicTable td { padding: 8px 22px 8px 0; } @media screen and (min-width: 768px) { .c-basicTable th, .c-basicTable td { padding: 8px 35px 8px 0; } } .c-basicTable thead th { font-weight: 600; } .c-basicTable tbody tr { border-top: 1px solid #F4F4F4; } .c-basicTable tbody th { font-weight: 600; } .c-basicTable.-default th, .c-basicTable.-default td { padding: 13px; } @media screen and (min-width: 768px) { .c-basicTable.-default th, .c-basicTable.-default td { padding: 22px 13px; } } .c-basicTable.-default thead th, .c-basicTable.-default thead td { background-color: #1A1311; color: #fff; } .c-basicTable.-default tbody tr:nth-child(even) { background-color: #F4F4F4; } .c-alertBox { margin-top: 13px; padding: 13px; border: 1px solid #999; } @media screen and (min-width: 768px) { .c-alertBox { padding: 22px 13px; } } .p-pvMark img { margin: 13px 0; } .p-pvMark p { font-size: 13px !important; } .c-pvMark img { width: 100px; height: auto; max-width: 100px; } .c-basicBox { padding: 22px; } @media screen and (min-width: 768px) { .c-basicBox { padding: 35px; } } .c-basicList li { position: relative; padding-left: 1.4rem; margin-bottom: 8px; line-height: 2; font-size: 13px; } @media screen and (min-width: 768px) { .c-basicList li { font-size: 14px; } } .c-basicList.-has--gap li { margin-bottom: 22px; } .c-basicList.-dots li::before { content: "•"; position: absolute; left: 0; top: -0.45rem; color: rgba(0, 0, 0, 0.3); font-weight: bold; font-size: 20px; } .c-basicList.-count li { counter-increment: step; } .c-basicList.-count li::before { content: counter(step); padding-left: 1px; position: absolute; left: -0.5rem; top: 0.3rem; width: 1.5em; height: 1.5em; background: #333; color: #fff; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: bold; } .c-basicListTable { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; row-gap: 13px; } @media screen and (min-width: 768px) { .c-basicListTable { justify-content: space-between; -moz-column-gap: 5%; column-gap: 5%; } } .c-basicListTable dt, .c-basicListTable dd { font-size: 13px; } @media screen and (min-width: 768px) { .c-basicListTable dt, .c-basicListTable dd { font-size: 14px; } } .c-basicListTable dt { font-weight: bold; } @media screen and (min-width: 768px) { .c-basicListTable dt { width: 30%; } } @media screen and (min-width: 768px) { .c-basicListTable dd { width: 65%; } } /* * title */ .p-basicHeading { position: relative; } .p-basicHeading .p-basicMore { margin-top: -12px; position: absolute; top: 50%; right: 0; } .p-basicHeading .p-basicMore .c-link { font-size: 11px; } @media screen and (min-width: 768px) { .p-basicHeading .p-basicMore .c-link { font-size: 13px; } } .p-basicHeading.-collection { text-align: center; } .p-basicHeading.-collection .c-collectionType { margin-bottom: 13px; } .p-basicHeading.-collectionItems { text-align: center; } .p-basicHeading.-collectionItems .c-collectionType { margin-bottom: 13px; } .p-basicHeading.-collectionItems .c-basicHeading { position: relative; } .p-basicHeading.-collectionItems .c-basicHeading::before { position: absolute; top: 20px; z-index: 0; content: ""; display: block; width: 100%; height: 1px; background-color: #1A1311; } @media screen and (min-width: 768px) { .p-basicHeading.-collectionItems .c-basicHeading::before { top: 26px; } } .p-basicHeading.-collectionItems .c-basicHeading span { display: inline-block; } .p-basicHeading.-collectionItems .c-basicHeading .-en { margin: 0; padding: 0 13px; position: relative; z-index: 1; background-color: #fff; } @media screen and (min-width: 768px) { .p-basicHeading.-collectionItems .c-basicHeading .-en { padding: 0 22px; } } .p-basicHeading.-collectionItems .c-basicHeading .-jp { margin-top: 13px; display: inline-block; } .p-basicHeading.-collectionItems p { margin-bottom: 35px; text-align: left; } .c-basicHeading { margin-bottom: 22px; line-height: 1.8; text-align: center; } @media screen and (min-width: 768px) { .c-basicHeading { margin-bottom: 35px; } } .c-basicHeadingTitle span { display: inline-block; } .c-basicHeadingTitle.-en { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-size: 22px; } @media screen and (min-width: 768px) { .c-basicHeadingTitle.-en { font-size: 28px; } } .c-basicHeadingTitle.-jp { font-size: 11px; } @media screen and (min-width: 768px) { .c-basicHeadingTitle.-jp { font-size: 13px; } } .p-contentsHeading { padding: 35px 22px; position: relative; } @media screen and (min-width: 768px) { .p-contentsHeading { padding: 56px 35px; } } .p-contentsHeading .c-basicHeading span { display: inline-block; } .p-contentsHeading .c-basicHeadingTitle.-en { font-size: 28px; } @media screen and (min-width: 768px) { .p-contentsHeading .c-basicHeadingTitle.-en { font-size: 35px; } } .p-contentsHeading .c-basicHeadingTitle.-jp { font-size: 11px; } @media screen and (min-width: 768px) { .p-contentsHeading .c-basicHeadingTitle.-jp { margin-top: 13px; font-size: 13px; } } .p-contentsHeading .p-seal__patek { margin-bottom: 22px; text-align: center; } @media screen and (min-width: 768px) { .p-contentsHeading .p-seal__patek { margin-bottom: 0; position: absolute; right: 35px; top: 35px; width: 188px; } } .p-contentsHeading .p-seal__patek img { width: 122px; } @media screen and (min-width: 768px) { .p-contentsHeading .p-seal__patek img { width: 156px; } } .p-contentsHeading .p-seal__patek figcaption { margin-top: 8px; color: #A9947D; font-size: 12px; text-align: center; } @media screen and (min-width: 768px) { .p-contentsHeading .p-seal__patek figcaption { font-size: 13px; } } .p-contentsHeading.-watch { padding-bottom: 13px; } .p-contentsHeading.-brand { padding: 0 0 35px 0; text-align: center; } @media screen and (min-width: 768px) { .p-contentsHeading.-brand { padding: 0 0 56px 0; } } .p-contentsHeading.-brand .c-headingImg { margin-bottom: 35px; width: 100%; background-color: #020701; text-align: center; } @media screen and (min-width: 768px) { .p-contentsHeading.-brand .c-headingImg { margin-bottom: 56px; } } .p-contentsHeading.-brand .c-headingImg img { margin: 0 auto; width: 100%; max-width: 1024px; } .p-contentsHeading.-brand .c-collectionType { margin-bottom: 22px; } .p-contentsHeading.-brand .c-headingDesc { padding: 0 13px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; justify-content: center; overflow: hidden; } @media screen and (min-width: 768px) { .p-contentsHeading.-brand .c-headingDesc { padding: 0 22px; } } .p-contentsHeading.-brand .c-headingDesc img { float: left; max-width: 340px; } .p-contentsHeading.-brand .c-headingDesc img + p { text-align: left; } .p-contentsHeading.-brand .c-headingDesc p { line-height: 2; font-size: 14px; text-align: left; } @media screen and (min-width: 768px) { .p-contentsHeading.-brand .c-headingDesc p { font-size: 15px; } } .p-contentsHeading.-brand + .base-content .heading-ll { margin-bottom: 35px; line-height: 1.6; font-weight: 500; font-size: 22px; } .p-contentsHeading.-brand + .base-content .heading-l { margin-bottom: 22px; font-weight: 500; font-size: 18px; } .p-contentsHeading.-brand + .base-content p { margin-bottom: 22px; font-size: 14px; } @media screen and (min-width: 768px) { .p-contentsHeading.-brand + .base-content p { margin-bottom: 35px; font-size: 15px; } } .p-contentsHeading.-brand.-jewelry .c-headingImg { background-color: transparent; border-bottom: 1px solid #F4F4F4; } .p-contentsHeading.-collection { padding: 35px 22px 0 22px; text-align: center; } @media screen and (min-width: 768px) { .p-contentsHeading.-collection { padding: 56px 35px 0 35px; } } @media screen and (min-width: 768px) { .p-contentsHeading.-collection .c-collectionType { margin-bottom: 22px; } } .p-contentsHeading.-collection .c-headingDesc { margin: 0 auto; max-width: 790px; } .p-contentsHeading.-collection .c-headingDesc p { line-height: 1.8; font-size: 14px; text-align: center; } .p-contentsHeading.-has--bg { position: relative; background-repeat: no-repeat; background-position: 100% 50%; } .p-contentsHeading.-has--bg::before { content: ""; display: block; position: absolute; top: 0; left: 0; z-index: 0; width: 100%; height: 100%; opacity: 0.8; } @media screen and (min-width: 768px) { .p-contentsHeading.-has--bg::before { display: none; } } .p-contentsHeading.-has--bg .l-container { position: relative; z-index: 1; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; justify-content: flex-start; align-items: center; min-height: 180px; } @media screen and (min-width: 768px) { .p-contentsHeading.-has--bg .l-container { min-height: 240px; } } .p-contentsHeading.-has--bg .c-basicHeading { margin-bottom: 0; text-align: left; } .p-contentsHeading.-has--bg .c-basicHeadingTitle { color: #fff; text-shadow: 0px 0px 15px rgba(0, 0, 0, 0.4); } .p-contentsHeading.-has--bg .c-basicHeading p { margin-top: 35px; color: #fff; line-height: 2; font-size: 13px; } @media screen and (min-width: 768px) { .p-contentsHeading.-has--bg .c-basicHeading p { font-size: 14px; } } .p-contentsHeading.-maintenance { background-color: #1a1311; background-image: url(/images/maintenance/maintenance_heading.jpg); } .p-contentsHeading.-maintenance::before { background-color: #1a1311; } .p-contentsHeading.-onlinePayment { background-color: #02afb6; background-image: url(/images/online-payment/online_payment_heading.jpg); } .p-contentsHeading.-onlinePayment::before { background-color: #02afb6; } .p-contentsNav { margin-bottom: 35px; padding: 22px; background-color: #F4F4F4; } @media screen and (min-width: 768px) { .p-contentsNav { margin-bottom: 56px; padding: 35px; } } .p-contentsNavList { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; justify-content: center; -moz-column-gap: 22px; column-gap: 22px; row-gap: 22px; } @media screen and (min-width: 768px) { .p-contentsNavList { -moz-column-gap: 44px; column-gap: 44px; row-gap: 22px; } } .p-contentsNavList a { padding-bottom: 2px; display: inline-block; position: relative; font-size: 12px; } .p-contentsNavList a::after { content: ""; display: block; position: absolute; bottom: -2px; width: 100%; height: 1px; background-color: #1A1311; } @media screen and (min-width: 768px) { .p-contentsNavList a { font-size: 14px; } } .p-contentsNav + #brand_news { padding-top: 0; } .c-basicHeading.-lg { margin-bottom: 35px; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 500; font-size: 20px; } @media screen and (min-width: 768px) { .c-basicHeading.-lg { font-size: 24px; } } .c-basicHeading.-md { margin-bottom: 35px; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 400; font-size: 16px; text-align: left; } @media screen and (min-width: 768px) { .c-basicHeading.-md { font-size: 18px; } } .c-basicHeading.-sm { margin-bottom: 13px; font-weight: 600; font-size: 13px; } @media screen and (min-width: 768px) { .c-basicHeading.-sm { font-size: 16px; } } .c-basicHeading.-ss { margin-bottom: 13px; font-size: 12px; } @media screen and (min-width: 768px) { .c-basicHeading.-ss { font-size: 15px; } } .c-basicHeading.-left--border { padding-left: 13px; border-left: 4px solid #E3E3E3; } .c-basicCatch.-md { margin-bottom: 35px; color: #C8151F; font-weight: 600; font-size: 18px; } @media screen and (min-width: 768px) { .c-basicCatch.-md { font-size: 20px; } } /* old heading */ .heading-xl { margin-bottom: 22px; text-align: center; } @media screen and (min-width: 600px) { .heading-xl { margin-bottom: 35px; } } .heading-xl .main { position: relative; display: inline-block; font-family: "Noto Serif JP", serif; font-size: 22px; } @media screen and (min-width: 600px) { .heading-xl .main { font-size: 28px; } } .heading-xl .main:before, .heading-xl .main:after { content: ""; position: absolute; top: 51%; display: block; width: 22px; height: 1px; background-color: #1b1918; } .heading-xl .main:before { left: -35px; } .heading-xl .main:after { right: -35px; } .heading-xl .sub { margin-top: 8px; display: block; font-size: 10px; opacity: 0.6; } @media screen and (min-width: 600px) { .heading-xl .sub { margin-top: 13px; font-size: 12px; } } .heading-ll { margin-bottom: 22px; line-height: 1.3; font-size: 1.375em; font-weight: bold; } .heading-l { margin-bottom: 13px; line-height: 1.3; font-size: 0.94em; font-weight: bold; } .heading-m { margin-bottom: 13px; font-size: 0.88em; font-weight: bold; } .heading-s { margin-bottom: 13px; font-size: 0.82em; font-weight: bold; } .heading-ss { margin-bottom: 13px; font-size: 0.75em; font-weight: bold; } /* * article */ .p-articleDetail .l-container { padding: 0; } @media screen and (min-width: 768px) { .p-articleDetail .l-container { padding: 0 22px; } } .p-articleBox { background-color: #fff; overflow: hidden; } @media screen and (min-width: 768px) { .p-articleBox { border-radius: 10px; } } .p-articleHeadingCol { padding: 22px 22px 0 22px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; row-gap: 8px; position: relative; } @media screen and (min-width: 768px) { .p-articleHeadingCol { padding: 35px 56px 13px 56px; } } .p-articleHeadingCol .c-articleCase, .p-articleHeadingCol .c-articleDesc { font-size: 12px; letter-spacing: 0.05rem; } @media screen and (min-width: 768px) { .p-articleHeadingCol .c-articleCase, .p-articleHeadingCol .c-articleDesc { font-size: 14px; } } .p-articleHeadingCol .c-articleDesc { font-weight: 700; line-height: 1.5; font-size: 22px; opacity: 1; letter-spacing: 0.05rem; } @media screen and (min-width: 768px) { .p-articleHeadingCol .c-articleDesc { font-size: 28px; } } .p-articleHeadingCol .c-articleDesc .en { font-weight: 500; } .p-articleHeadingCol .c-articleTitle { margin-top: -5px; line-height: 1.3; font-weight: normal; font-size: 12px; opacity: 0.7; letter-spacing: 0.05rem; } @media screen and (min-width: 768px) { .p-articleHeadingCol .c-articleTitle { font-size: 15px; } } .p-articleHeadingCol .c-articleTitle .en { font-weight: 400; } .p-articleHeadingCol .c-articleUpdate { position: absolute; top: 22px; right: 22px; font-size: 11px; } @media screen and (min-width: 768px) { .p-articleHeadingCol .c-articleUpdate { top: 35px; right: 56px; font-size: 12px; } } .p-articleHeadingCol .c-articleCategoryTag { font-size: 10px; } @media screen and (min-width: 768px) { .p-articleHeadingCol .c-articleCategoryTag { font-size: 12px; } } .p-articleHeadingCol .c-articleTags .c-articleTag { font-size: 10px; } @media screen and (min-width: 768px) { .p-articleHeadingCol .c-articleTags .c-articleTag { font-size: 12px; } } .p-articleContents { padding: 0 22px 35px 22px; letter-spacing: 0.05rem; } @media screen and (min-width: 768px) { .p-articleContents { padding: 0 56px 35px 56px; } } .p-articleContents a { color: #C8151F; } .p-articleContents p { margin: 8px 0; font-weight: 400; line-height: 1.6; font-size: 15px; } @media screen and (min-width: 768px) { .p-articleContents p { margin: 13px 0; font-size: 16px; } } .p-articleContents p b.en { font-weight: 400; } .p-articleContents img { margin: 18px 0; } @media screen and (min-width: 768px) { .p-articleContents img { margin: 22px 0; } } .p-articleContents h2 { margin: 18px 0; padding-left: 24px; display: inline-block; position: relative; font-weight: 700; font-size: 20px; } @media screen and (min-width: 768px) { .p-articleContents h2 { margin: 22px 0; padding-left: 35px; font-size: 24px; } } .p-articleContents h2 .en { font-weight: 500; } .p-articleContents h2::before { content: ""; display: block; position: absolute; top: 13px; left: 0; width: 16px; height: 2px; background-color: #C8151F; } @media screen and (min-width: 768px) { .p-articleContents h2::before { top: 16px; width: 22px; height: 2px; } } .p-articleContents h3 { margin: 18px 0; padding-left: 13px; border-left: 2px solid #C8151F; display: inline-block; font-weight: 700; font-size: 18px; } @media screen and (min-width: 768px) { .p-articleContents h3 { margin: 22px 0; font-size: 20px; } } .p-articleContents h3 .en { font-weight: 500; } .p-articleController { margin-top: 35px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; align-items: center; justify-content: center; } @media screen and (min-width: 768px) { .p-articleController { margin-top: 56px; margin-bottom: 56px; } } .c-articlePosition { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; align-items: center; justify-content: center; -moz-column-gap: 8px; column-gap: 8px; } @media screen and (min-width: 768px) { .c-articlePosition { -moz-column-gap: 13px; column-gap: 13px; } } .c-articlePosition b, .c-articlePosition a { border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; font-size: 13px; } @media screen and (min-width: 768px) { .c-articlePosition b, .c-articlePosition a { width: 48px; height: 48px; font-size: 15px; } } .c-articlePosition b { background-color: #C8151F; font-weight: 400; color: #fff; } .c-articlePosition a { background-color: #fff; } .c-articleButton { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; align-items: center; position: relative; z-index: 0; font-weight: 400; font-size: 12px; } .c-articleButton::before, .c-articleButton::after { content: ""; display: block; } .c-articleButton::before { position: relative; z-index: -1; border-radius: 50%; width: 36px; height: 36px; background-color: #fff; transform: translateX(18px); } @media screen and (min-width: 768px) { .c-articleButton::before { width: 48px; height: 48px; transform: translateX(24px); } } .c-articleButton::after { width: 16px; height: 3px; background-image: url("data:image/svg+xml;charset=utf8,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22UTF-8%22%3F%3E%3Csvg%20id%3D%22_%E3%83%AC%E3%82%A4%E3%83%A4%E3%83%BC_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2012.82%202.82%22%3E%3Cdefs%3E%3Cstyle%3E.cls-1%7Bfill%3Anone%3Bstroke%3A%23bd1c22%3B%7D%3C%2Fstyle%3E%3C%2Fdefs%3E%3Cpath%20id%3D%22_%E3%83%91%E3%82%B9_262%22%20class%3D%22cls-1%22%20d%3D%22M0%2C2.32h11.74l-1.69-2%22%2F%3E%3C%2Fsvg%3E"); background-repeat: no-repeat; background-position: 0% 0%; background-size: 100% auto; } .c-articleButton.-prev::before { order: 1; transform: translateX(-24px); } .c-articleButton.-prev::after { margin-right: 8px; order: -1; transform: scale(-1, 1); } .c-articleButton.-next::after { margin-left: 8px; } /* * section */ .p-basicSection { padding: 35px 0; overflow: hidden; } @media screen and (min-width: 768px) { .p-basicSection { padding: 56px 0; } } .p-basicSection p { line-height: 1.8; font-size: 14px; } @media screen and (min-width: 768px) { .p-basicSection p { font-size: 15px; } } .p-basicSection p a { position: relative; line-height: 1.6; display: inline-block; } .p-basicSection p a::after { content: ""; display: block; position: absolute; bottom: -2px; width: 100%; height: 1px; background-color: #1A1311; } .p-basicSection p a.c-linkBox::after { display: none; } .p-basicSection.-article p { margin-bottom: 22px; } @media screen and (min-width: 768px) { .p-basicSection.-article p { margin-bottom: 35px; } } .p-basicSection.-blog { position: relative; } @media screen and (min-width: 768px) { .p-basicSection.-blog .c-basicHeading { padding: 0 30%; } } .p-basicMore { margin-top: 35px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; justify-content: center; -moz-column-gap: 22px; column-gap: 22px; row-gap: 22px; text-align: center; } @media screen and (min-width: 768px) { .p-basicMore { margin-top: 56px; } } .p-basicMore .c-linkBox { font-size: 12px; } @media screen and (min-width: 768px) { .p-basicMore .c-linkBox { font-size: 14px; } } .p-newsList { margin: 0 auto; max-width: 790px; } .p-newsList .p-articleCol { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; align-items: flex-start; -moz-column-gap: 8px; column-gap: 8px; width: 100%; } @media screen and (min-width: 768px) { .p-newsList .p-articleCol { -moz-column-gap: 22px; column-gap: 22px; } } .p-newsList .p-articleCol a { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; align-items: flex-start; -moz-column-gap: 8px; column-gap: 8px; row-gap: 13px; } @media screen and (min-width: 768px) { .p-newsList .p-articleCol a { -moz-column-gap: 22px; column-gap: 22px; } } .p-newsList .p-articleCol .c-articleDate { width: 88px; font-size: 12px; } @media screen and (min-width: 768px) { .p-newsList .p-articleCol .c-articleDate { font-size: 14px; } } .p-newsList .p-articleCol .c-articleCategory { padding: 2px 8px; border: 1px solid #1A1311; display: inline-block; background-color: #fff; font-size: 11px; text-align: center; } @media screen and (min-width: 768px) { .p-newsList .p-articleCol .c-articleCategory { width: 158px; font-size: 11px; } } .p-newsList .p-articleCol .c-articleTitle { margin: 0; width: 100%; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 400; font-size: 12px; } @media screen and (min-width: 768px) { .p-newsList .p-articleCol .c-articleTitle { width: calc(100% - 290px); font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-size: 15px; } } .p-newsList .p-articleCol:nth-of-type(n+2)::before { margin: 16px 0; content: ""; display: block; width: 100%; height: 1px; background-color: #1A1311; opacity: 0.1; } .p-newsFilter { position: absolute; right: 22px; bottom: 8px; } @media screen and (min-width: 768px) { .p-newsFilter { right: 56px; bottom: 16px; } } .c-newsCategorySelecterWrapper { max-width: 100px; margin: 0 auto; } @media screen and (min-width: 768px) { .c-newsCategorySelecterWrapper { max-width: 120px; } } .c-newsCategorySelecter { width: 100%; padding: 8px; font-size: 12px; line-height: 1.5; color: #333; background-color: #fff; border: 1px solid #ccc; border-radius: 0; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;charset=US-ASCII,%3Csvg width='10' height='6' viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1em center; background-size: 10px 6px; cursor: pointer; transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out; } .c-newsCategorySelecter:focus { border-color: #666; outline: none; box-shadow: 0 0 0 2px rgba(100, 100, 255, 0.2); } .p-shopInfoList { margin: 0 9px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; row-gap: 35px; } @media screen and (min-width: 768px) { .p-shopInfoList { margin: 0; -moz-column-gap: 5.2336448598%; column-gap: 5.2336448598%; row-gap: 56px; } } @media screen and (min-width: 768px) { .p-shopInfoList .p-articleCol { width: 47.3831775701%; } } .p-shopInfoList .c-articleThumb { width: 100%; aspect-ratio: 1.33/1; overflow: hidden; box-shadow: 0 0 6px rgba(0, 0, 0, 0.12); } .p-shopInfoList .c-articleThumb img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .c-articleStatus { margin-top: 13px; padding-top: 3px; padding-bottom: 3px; display: inline-block; font-weight: normal; font-size: 10px; letter-spacing: 0.025rem; } @media screen and (min-width: 768px) { .c-articleStatus { margin-top: 18px; font-size: 11px; } } .c-articleStatus.-commingSoon { padding-left: 13px; padding-right: 13px; background-color: #F0DD4F; } .c-articleStatus.-now { padding-left: 22px; padding-right: 22px; background-color: #ACF459; } .c-articleStatus.-ended { padding-left: 13px; padding-right: 13px; background-color: #FFD6D6; } .c-articleTitle { margin-top: 8px; margin-bottom: 8px; line-height: 1.6; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 400; font-size: 16px; } @media screen and (min-width: 768px) { .c-articleTitle { margin-top: 13px; margin-bottom: 13px; font-size: 22px; } } .c-articleShop { margin-right: 13px; position: relative; font-size: 11px; } @media screen and (min-width: 768px) { .c-articleShop { margin-right: 22px; font-size: 13px; } } .c-articleDate { font-size: 11px; } @media screen and (min-width: 768px) { .c-articleDate { font-size: 13px; } } .p-itemCategoryList { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; row-gap: 13px; } @media screen and (min-width: 768px) { .p-itemCategoryList { -moz-column-gap: 0.7476635514%; column-gap: 0.7476635514%; row-gap: 0; } } .p-itemCategoryList + div { margin: 35px 0 22px 0; } @media screen and (min-width: 768px) { .p-itemCategoryList + div { margin: 56px 0 56px 0; } } .p-itemCategoryList + div .c-linkBox { font-size: 13px; } @media screen and (min-width: 768px) { .p-itemCategoryList + div .c-linkBox { font-size: 14px; } } .p-itemCategoryList ~ .p-itemCategoryList.-watch .p-categoryCol { flex-direction: row; } @media screen and (min-width: 768px) { .p-itemCategoryList ~ .p-itemCategoryList.-watch .p-categoryCol { width: 49.0654205607%; } } @media screen and (min-width: 768px) { .p-itemCategoryList ~ .p-itemCategoryList.-watch .p-categoryCol .c-title { margin-right: 6.6666666667%; } } .p-itemCategoryList ~ .p-itemCategoryList.-watch .p-categoryCol:first-of-type { display: none; } .p-itemCategoryList.-watch, .p-itemCategoryList.-others { margin-top: 13px; -moz-column-gap: 3.1775700935%; column-gap: 3.1775700935%; } @media screen and (min-width: 768px) { .p-itemCategoryList.-watch, .p-itemCategoryList.-others { margin-top: 19px; -moz-column-gap: 1.7757009346%; column-gap: 1.7757009346%; } } .p-itemCategoryList.-watch .p-categoryCol { padding: 13px; flex-direction: column; align-items: center; justify-content: space-around; width: 48.4112149533%; } @media screen and (min-width: 768px) { .p-itemCategoryList.-watch .p-categoryCol { width: 23.6448598131%; } } .p-itemCategoryList.-watch .p-categoryCol:first-of-type { flex-direction: row; justify-content: center; -moz-column-gap: 13px; column-gap: 13px; width: 100%; } @media screen and (min-width: 768px) { .p-itemCategoryList.-watch .p-categoryCol:first-of-type { -moz-column-gap: 35px; column-gap: 35px; width: 49.0654205607%; } } .p-itemCategoryList.-watch .p-categoryCol:first-of-type .c-img { width: 140px; } @media screen and (min-width: 768px) { .p-itemCategoryList.-watch .p-categoryCol:first-of-type .c-img { width: 220px; } } .p-itemCategoryList.-watch .p-categoryCol .c-img { width: 106px; } @media screen and (min-width: 768px) { .p-itemCategoryList.-watch .p-categoryCol .c-img { width: 166px; } } .p-itemCategoryList.-watch .p-categoryCol .c-title { margin-top: 10px; } .p-itemCategoryList.-others .p-categoryCol { padding: 13px 22px 22px 22px; flex-direction: column; width: 48.4112149533%; } @media screen and (min-width: 768px) { .p-itemCategoryList.-others .p-categoryCol { width: 23.6448598131%; } } .p-itemCategoryList .p-categoryCol { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; background-color: #fff; } .p-itemCategoryList .p-categoryCol .c-title { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; align-items: center; text-align: center; } .p-itemCategoryList .p-categoryCol .c-title .-en { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-size: 16px; } @media screen and (min-width: 768px) { .p-itemCategoryList .p-categoryCol .c-title .-en { font-size: 20px; } } .p-itemCategoryList .p-categoryCol .c-title .-jp { margin-top: 5px; font-size: 12px; } @media screen and (min-width: 768px) { .p-itemCategoryList .p-categoryCol .c-title .-jp { margin-top: 8px; font-size: 13px; } } .p-watchPanel { padding: 35px 22px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; align-items: center; justify-content: center; row-gap: 13px; width: 100%; background-color: #1A1311; } @media screen and (min-width: 768px) { .p-watchPanel { padding: 22px; row-gap: 35px; width: 38.1308411215%; } } .p-watchPanel .c-img { width: 200px; } @media screen and (min-width: 768px) { .p-watchPanel .c-img { width: auto; } } .p-watchPanel .c-title { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; align-items: center; color: #fff; } .p-watchPanel .c-title .-en { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-size: 22px; } @media screen and (min-width: 768px) { .p-watchPanel .c-title .-en { font-size: 28px; } } .p-watchPanel .c-title .-jp { margin-top: 5px; font-size: 10px; } @media screen and (min-width: 768px) { .p-watchPanel .c-title .-jp { margin-top: 8px; } } .p-watchPanel .c-linkBox { background-color: #fff; font-size: 10px; } @media screen and (min-width: 768px) { .p-watchPanel .c-linkBox { font-size: 12px; } } .p-watchBannersList { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; row-gap: 8px; } @media screen and (min-width: 768px) { .p-watchBannersList { -moz-column-gap: 1.2232415902%; column-gap: 1.2232415902%; width: 61.1214953271%; } } .p-watchBannersList a { display: block; } @media screen and (min-width: 768px) { .p-watchBannersList a { width: 49.3883792049%; } } .p-blogList { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; row-gap: 35px; } @media screen and (min-width: 768px) { .p-blogList { -moz-column-gap: 5.2336448598%; column-gap: 5.2336448598%; row-gap: 56px; } } @media screen and (min-width: 768px) { .p-blogList .p-articleCol { width: 47.3831775701%; } } .p-blogList .p-articleCol a { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; align-items: flex-start; justify-content: space-between; } .p-blogList .p-articleCol .c-articleImg { width: 38.7283236994%; aspect-ratio: 4/3; overflow: hidden; } @media screen and (min-width: 768px) { .p-blogList .p-articleCol .c-articleImg { width: 41.8145956607%; } } .p-blogList .p-articleCol .c-articleImg img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-blogList .p-articleCol .c-articleContent { width: 56.936416185%; } @media screen and (min-width: 768px) { .p-blogList .p-articleCol .c-articleContent { width: 53.8461538462%; } } .p-blogList .p-articleCol .c-articleTag { margin-bottom: 8px; padding: 5px; display: inline-block; background-color: #F4F4F4; font-size: 10px; } @media screen and (min-width: 768px) { .p-blogList .p-articleCol .c-articleTag { margin-bottom: 13px; } } .p-blogList .p-articleCol .c-articleTitle { margin-top: 0; margin-bottom: 13px; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 500; font-size: 14px; } @media screen and (min-width: 768px) { .p-blogList .p-articleCol .c-articleTitle { margin-bottom: 19px; font-size: 16px; } } .p-blogList .p-articleCol .c-articleAuthor { margin-right: 13px; display: inline-block; font-size: 12px; } @media screen and (min-width: 768px) { .p-blogList .p-articleCol .c-articleAuthor { margin-right: 22px; font-size: 13px; } } .p-blogList .p-articleCol .c-articleDate { font-size: 12px; } @media screen and (min-width: 768px) { .p-blogList .p-articleCol .c-articleDate { font-size: 13px; } } .p-shopList { margin: 0 9px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; row-gap: 22px; } @media screen and (min-width: 768px) { .p-shopList { margin: 0; -moz-column-gap: 4.7945205479%; column-gap: 4.7945205479%; row-gap: 56px; } } .p-shopList .p-shopCol { background-color: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, 0.08); } @media screen and (min-width: 768px) { .p-shopList .p-shopCol { width: 30.1369863014%; min-height: 320px; } } .p-shopList .p-shopInfo { padding: 13px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; row-gap: 13px; } @media screen and (min-width: 768px) { .p-shopList .p-shopInfo { padding: 22px; } } .p-shopList .p-shopInfo .c-shopName { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 400; font-size: 18px; } @media screen and (min-width: 768px) { .p-shopList .p-shopInfo .c-shopName { font-size: 22px; } } .p-shopList .p-shopInfo .c-shopAddress { font-size: 12px; } @media screen and (min-width: 768px) { .p-shopList .p-shopInfo .c-shopAddress { font-size: 13px; } } .p-shopList .p-shopInfo .c-shopAddress .c-tel { margin-top: 13px; display: inline-block; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-size: 14px; letter-spacing: 0; } @media screen and (min-width: 768px) { .p-shopList .p-shopInfo .c-shopAddress .c-tel { font-size: 16px; } } .p-shopList .p-shopInfo .c-telLink { display: inline-block; } .p-shopList .p-shopInfo .c-shopTime { font-size: 12px; } @media screen and (min-width: 768px) { .p-shopList .p-shopInfo .c-shopTime { font-size: 13px; } } .p-shopList .p-shopInfo .c-shopLinks { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; width: 100%; justify-content: space-between; row-gap: 13px; } .p-shopList .p-shopInfo .c-shopLinks .c-linkBox { padding: 8px; width: 48%; font-size: 12px; text-align: center; } @media screen and (min-width: 768px) { .p-shopList .p-shopInfo .c-shopLinks .c-linkBox { padding: 10px; width: 47%; font-size: 13px; } } .p-shopList.-row .p-shopCol { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; width: 100%; background-color: #EFEFEF; } @media screen and (min-width: 768px) { .p-shopList.-row .p-shopCol .c-shopImg { display: block; width: 41.7808219178%; aspect-ratio: 16/9; /* 比率を保ってレスポンシブに */ overflow: hidden; } } .p-shopList.-row .p-shopCol .c-shopImg img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @media screen and (min-width: 768px) { .p-shopList.-row .p-shopCol .p-shopInfo { padding: 35px 56px; flex-direction: column; justify-content: center; width: 58.2191780822%; } } .p-shopList.-row .p-shopCol .c-shopName { font-size: 20px; } @media screen and (min-width: 768px) { .p-shopList.-row .p-shopCol .c-shopName { font-size: 22px; } } @media screen and (min-width: 768px) { .p-shopList.-row .p-shopCol .c-shopLinks { margin-top: 13px; row-gap: 22px; } } .p-shopList.-row .p-shopCol .c-shopLinks .c-linkBox:nth-of-type(n+3) { display: block; } .c-shopName { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 600; font-size: 18px; } .c-shopAddress { font-size: 11px; } .c-shopAddress .c-tel { margin-top: 13px; display: inline-block; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-size: 16px; } .c-telLink { display: inline-block; } .c-shopTime { font-size: 11px; } .c-shopLinks { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; width: 100%; justify-content: space-between; } .c-shopLinks .c-linkBox { padding: 10px; width: 47%; font-size: 11px; text-align: center; } .c-shopLinks .c-linkBox:nth-of-type(n+3) { display: none; } .p-pagenation { margin-top: 56px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; align-items: center; justify-content: center; -moz-column-gap: 35px; column-gap: 35px; } .p-pagenationList { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; align-items: center; justify-content: center; -moz-column-gap: 22px; column-gap: 22px; } .p-pagenationList li { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-size: 16px; } .p-pagenationList li b, .p-pagenationList li a { display: inline-block; position: relative; width: 1rem; text-align: center; } .p-pagenationList li b::after, .p-pagenationList li a::after { content: ""; display: block; position: absolute; bottom: -2px; width: 100%; height: 1px; background-color: #1A1311; } .p-pagenationList li a::after { opacity: 0.3; } .p-pageButton { display: inline-flex; } .p-basicContact { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; justify-content: space-between; } .p-basicContact .c-linkBox { padding: 13px; width: 48%; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-size: 14px; text-align: center; } @media screen and (min-width: 768px) { .p-basicContact .c-linkBox { padding: 22px; font-size: 16px; } } .p-serviceList { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; justify-content: center; -moz-column-gap: 3.1775700935%; column-gap: 3.1775700935%; row-gap: 13px; } @media screen and (min-width: 768px) { .p-serviceList { -moz-column-gap: 2.0560747664%; column-gap: 2.0560747664%; row-gap: 22px; } } .p-serviceList .p-seviceCol { padding: 35px 22px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; row-gap: 13px; width: 48.4112149533%; background-color: #fff; text-align: center; box-shadow: 0 0 6px rgba(0, 0, 0, 0.08); } @media screen and (min-width: 768px) { .p-serviceList .p-seviceCol { row-gap: 22px; width: 31.9626168224%; } } .p-serviceList .p-seviceCol .c-serviceIcon img { width: auto; height: 48px; } @media screen and (min-width: 768px) { .p-serviceList .p-seviceCol .c-serviceIcon img { height: 77px; } } .p-serviceList .p-seviceCol .c-serviceTitle { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-size: 14px; } @media screen and (min-width: 768px) { .p-serviceList .p-seviceCol .c-serviceTitle { font-size: 16px; } } .p-homeCollection + #contact { background-color: #fff; } .p-basicCol p { margin-bottom: 22px; } @media screen and (min-width: 768px) { .p-basicCol p { margin-bottom: 35px; } } /* * home */ @keyframes scrollFade { 0% { transform: translateY(56px); opacity: 0; } 100% { transform: translateY(0); opacity: 1; } } .is-targetElm { transform: translateY(56px); opacity: 0; will-change: transform; } .is-targetElm.is-displayed { animation: scrollFade 0.6s ease-out 0s normal forwards; } .p-heroSlide { width: 330px; height: auto; background-color: #1A1311; } @media screen and (min-width: 600px) { .p-heroSlide { width: 473px; } } .p-heroSlide .c-slideCol { padding: 22px 13px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; justify-content: center; row-gap: 13px; background-color: #1A1311; color: #fff; } @media screen and (min-width: 600px) { .p-heroSlide .c-slideCol { padding: 28px 22px 35px 22px; } } @media screen and (min-width: 768px) { .p-heroSlide .c-slideCol { padding: 22px; } } .p-heroSlide .c-slideCol .c-articleTitle { margin: 0; display: inline-flex; flex-wrap: wrap; flex-direction: column; row-gap: 8px; text-align: center; } @media screen and (min-width: 768px) { .p-heroSlide .c-slideCol .c-articleTitle { row-gap: 11px; } } .p-heroSlide .c-slideCol .c-articleTitle .-en { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; line-height: 1.2; font-weight: 400; font-size: 20px; } @media screen and (min-width: 768px) { .p-heroSlide .c-slideCol .c-articleTitle .-en { font-size: 28px; } } .p-heroSlide .c-slideCol .c-articleTitle .-jp { font-weight: 400; font-size: 11px; } @media screen and (min-width: 768px) { .p-heroSlide .c-slideCol .c-articleTitle .-jp { font-size: 13px; } } .p-heroSlide .c-slideCol .c-articleDesc { font-weight: 400; line-height: 2; font-size: 12px; text-align: center; } @media screen and (min-width: 768px) { .p-heroSlide .c-slideCol .c-articleDesc { font-size: 13px; } } .p-homeHero { margin-bottom: 22px; padding-bottom: 0; position: relative; } @media screen and (min-width: 768px) { .p-homeHero { margin-bottom: 56px; } } .p-homeHero .p-sliderNavPosition { width: auto; } .p-homeHero .p-basicMore { margin-top: 0; margin-bottom: 8px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; align-items: flex-start; row-gap: 13px; font-size: 15px; } .p-homeHero .p-basicMore a { font-weight: 400; font-size: 15px; display: inline-block; position: relative; } .p-homeHero .p-basicMore a::after { content: ""; display: block; position: absolute; bottom: -2px; width: 100%; height: 1px; background-color: #1A1311; } .p-heroSliderPosition { display: none; } @media screen and (min-width: 768px) { .p-heroSliderPosition { padding: 35px 35px 0 35px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; align-content: flex-end; position: absolute; top: 0; left: 0; width: calc(50% - 236px); height: 100%; background-color: rgba(255, 255, 255, 0.95); } } .p-heroSliderPositionList { margin-bottom: 22px; height: auto; justify-content: flex-end; flex-direction: column; row-gap: 22px; } .p-heroSliderPositionList li { font-size: 15px; } .p-heroSliderPositionList li.is-active span::after { opacity: 1; } .p-heroSliderPositionList li span { display: inline-block; position: relative; } .p-heroSliderPositionList li span::after { content: ""; display: block; position: absolute; bottom: -2px; width: 100%; height: 1px; background-color: #1A1311; transition: all 0.4s; opacity: 0; } @media screen and (min-width: 768px) { .p-heroSliderPositionList li span:hover { cursor: pointer; } } @media screen and (min-width: 768px) { .p-heroSliderPositionList li span:hover::after { opacity: 1; } } .p-heroSliderController { margin-top: 22px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; align-items: center; justify-content: center; -moz-column-gap: 22px; column-gap: 22px; } @media screen and (min-width: 768px) { .p-heroSliderController { margin-top: 35px; } } .c-sliderNavButton { display: inline-flex; justify-content: center; width: 22px; height: 22px; } @media screen and (min-width: 768px) { .c-sliderNavButton { width: 28px; height: 28px; } } .c-sliderNavButton img { filter: invert(6%) sepia(8%) saturate(2207%) hue-rotate(327deg) brightness(94%) contrast(94%); width: 7px; } @media screen and (min-width: 768px) { .c-sliderNavButton img { width: 8px; } } @media screen and (min-width: 768px) { .c-sliderNavButton:hover { cursor: pointer; } } .c-sliderNavButton.swiper-button-disabled { opacity: 0.3; } @media screen and (min-width: 768px) { .c-sliderNavButton.swiper-button-disabled:hover { cursor: default; } } .p-sliderNavPosition { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; align-items: center; -moz-column-gap: 8px; column-gap: 8px; } @media screen and (min-width: 768px) { .p-sliderNavPosition { -moz-column-gap: 13px; column-gap: 13px; } } .p-sliderNavPosition .swiper-pagination-bullets.swiper-pagination-horizontal { width: auto; } .p-sliderNavPosition .swiper-pagination-bullet { margin: 0 !important; border: 1px solid #1A1311; width: 4px; height: 4px; transition: all 0.4s; background-color: #fff; opacity: 1; } @media screen and (min-width: 768px) { .p-sliderNavPosition .swiper-pagination-bullet { width: 6px; height: 6px; } } .p-sliderNavPosition .swiper-pagination-bullet-active { border: 1px solid transparent; border-radius: 2px; width: 18px; height: 2px; background-color: #1A1311; } @media screen and (min-width: 768px) { .p-sliderNavPosition .swiper-pagination-bullet-active { width: 24px; height: 4px; } } /* * watch */ .p-typeSelecter { margin-bottom: 35px; border-bottom: 3px solid #1A1311; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; } @media screen and (min-width: 768px) { .p-typeSelecter { justify-content: center; -moz-column-gap: 8px; column-gap: 8px; } } .p-typeSelecter a { margin: 0 1%; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; justify-content: center; align-items: center; width: 31.333%; height: 48px; background-color: #F4F4F4; font-weight: 400; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-size: 16px; } @media screen and (min-width: 768px) { .p-typeSelecter a { margin: 0; width: 184px; height: 82px; font-size: 22px; } } .p-typeSelecter a.is-active { background-color: #1A1311; color: #fff; font-weight: 500; } .p-listSort { margin-bottom: 9px; padding: 13px 0; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; justify-content: center; -moz-column-gap: 22px; column-gap: 22px; row-gap: 13px; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); } @media screen and (min-width: 768px) { .p-listSort { margin-bottom: 35px; padding: 22px 0; -moz-column-gap: 35px; column-gap: 35px; row-gap: 22px; } } .p-listSort a { display: inline-block; font-size: 11px; letter-spacing: 0.025rem; } @media screen and (min-width: 768px) { .p-listSort a { font-size: 14px; } } .p-listSort a::after { margin-top: 1px; content: ""; display: block; width: 100%; height: 1px; background-color: #1A1311; opacity: 0.3; } .p-listSort a.is-active::after { opacity: 1; } .p-typeContainer .p-listSort { position: sticky; top: 60px; left: 0; z-index: 100; } @media screen and (min-width: 768px) { .p-typeContainer .p-listSort { top: 0; } } .p-sortContent { display: none; opacity: 0; transition: opacity 0.6s ease-out; } .p-sortContent.is-show { display: block; opacity: 1; } .p-alphabetLinks { margin: 0 auto 35px auto; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; justify-content: center; -moz-column-gap: 8px; column-gap: 8px; row-gap: 8px; max-width: 700px; } @media screen and (min-width: 768px) { .p-alphabetLinks { margin: 0 auto 56px auto; } } .p-alphabetLinks a { padding-left: 1px; padding-bottom: 1px; border: 1px solid transparent; border-radius: 50%; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; align-items: center; justify-content: center; width: 30px; height: 30px; background-color: #EFEFEF; line-height: 1; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 600; font-size: 13px; text-align: center; transition: all 0.3s; } @media screen and (min-width: 768px) { .p-alphabetLinks a { width: 40px; height: 40px; font-size: 17px; } } @media screen and (min-width: 768px) { .p-alphabetLinks a:hover { border: 1px solid #1A1311; } } .p-watchBrandsList, .p-jewelryBrandsList { margin-bottom: 56px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; -moz-column-gap: 2.8099173554%; column-gap: 2.8099173554%; row-gap: 13px; } @media screen and (min-width: 768px) { .p-watchBrandsList, .p-jewelryBrandsList { margin-bottom: 92px; row-gap: 35px; } } @media screen and (min-width: 768px) { .p-watchBrandsList .p-watchBrandCol, .p-watchBrandsList .p-jewelryBrandCol, .p-jewelryBrandsList .p-watchBrandCol, .p-jewelryBrandsList .p-jewelryBrandCol { width: 48.5950413223%; } } .p-watchBrandsList .p-watchBrandCol .c-brandThumb, .p-watchBrandsList .p-jewelryBrandCol .c-brandThumb, .p-jewelryBrandsList .p-watchBrandCol .c-brandThumb, .p-jewelryBrandsList .p-jewelryBrandCol .c-brandThumb { margin-bottom: 13px; padding: 8px 22px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; align-items: center; -moz-column-gap: 3.7414965986%; column-gap: 3.7414965986%; aspect-ratio: 1.9/1; background-color: #1A1311; color: #fff; } @media screen and (min-width: 768px) { .p-watchBrandsList .p-watchBrandCol .c-brandThumb, .p-watchBrandsList .p-jewelryBrandCol .c-brandThumb, .p-jewelryBrandsList .p-watchBrandCol .c-brandThumb, .p-jewelryBrandsList .p-jewelryBrandCol .c-brandThumb { padding: 13px 35px; } } .p-watchBrandsList .p-watchBrandCol .c-brandImg, .p-watchBrandsList .p-jewelryBrandCol .c-brandImg, .p-jewelryBrandsList .p-watchBrandCol .c-brandImg, .p-jewelryBrandsList .p-jewelryBrandCol .c-brandImg { width: 29.9319727891%; } @media screen and (min-width: 768px) { .p-watchBrandsList .p-watchBrandCol .c-brandImg, .p-watchBrandsList .p-jewelryBrandCol .c-brandImg, .p-jewelryBrandsList .p-watchBrandCol .c-brandImg, .p-jewelryBrandsList .p-jewelryBrandCol .c-brandImg { width: 30.7823129252%; } } .p-watchBrandsList .p-watchBrandCol .c-brandCol, .p-watchBrandsList .p-jewelryBrandCol .c-brandCol, .p-jewelryBrandsList .p-watchBrandCol .c-brandCol, .p-jewelryBrandsList .p-jewelryBrandCol .c-brandCol { padding-bottom: 8px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; align-items: flex-start; justify-content: center; } @media screen and (min-width: 768px) { .p-watchBrandsList .p-watchBrandCol .c-brandCol, .p-watchBrandsList .p-jewelryBrandCol .c-brandCol, .p-jewelryBrandsList .p-watchBrandCol .c-brandCol, .p-jewelryBrandsList .p-jewelryBrandCol .c-brandCol { padding-bottom: 13px; } } .p-watchBrandsList .p-watchBrandCol .c-brandLogo, .p-watchBrandsList .p-jewelryBrandCol .c-brandLogo, .p-jewelryBrandsList .p-watchBrandCol .c-brandLogo, .p-jewelryBrandsList .p-jewelryBrandCol .c-brandLogo { margin-bottom: 5px; width: 66.3265306122%; text-align: center; } @media screen and (min-width: 768px) { .p-watchBrandsList .p-watchBrandCol .c-brandLogo, .p-watchBrandsList .p-jewelryBrandCol .c-brandLogo, .p-jewelryBrandsList .p-watchBrandCol .c-brandLogo, .p-jewelryBrandsList .p-jewelryBrandCol .c-brandLogo { margin-bottom: 8px; width: 65.4761904762%; } } .p-watchBrandsList .p-watchBrandCol .c-brandLogo img, .p-watchBrandsList .p-jewelryBrandCol .c-brandLogo img, .p-jewelryBrandsList .p-watchBrandCol .c-brandLogo img, .p-jewelryBrandsList .p-jewelryBrandCol .c-brandLogo img { width: 100%; transform: scale(1.1); } .p-watchBrandsList .p-watchBrandCol .c-brandName, .p-watchBrandsList .p-jewelryBrandCol .c-brandName, .p-jewelryBrandsList .p-watchBrandCol .c-brandName, .p-jewelryBrandsList .p-jewelryBrandCol .c-brandName { margin-bottom: 13px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; row-gap: 5px; } @media screen and (min-width: 768px) { .p-watchBrandsList .p-watchBrandCol .c-brandName, .p-watchBrandsList .p-jewelryBrandCol .c-brandName, .p-jewelryBrandsList .p-watchBrandCol .c-brandName, .p-jewelryBrandsList .p-jewelryBrandCol .c-brandName { margin-bottom: 13px; } } .p-watchBrandsList .p-watchBrandCol .c-brandName .-en, .p-watchBrandsList .p-jewelryBrandCol .c-brandName .-en, .p-jewelryBrandsList .p-watchBrandCol .c-brandName .-en, .p-jewelryBrandsList .p-jewelryBrandCol .c-brandName .-en { font-weight: 400; font-size: 20px; } @media screen and (min-width: 768px) { .p-watchBrandsList .p-watchBrandCol .c-brandName .-en, .p-watchBrandsList .p-jewelryBrandCol .c-brandName .-en, .p-jewelryBrandsList .p-watchBrandCol .c-brandName .-en, .p-jewelryBrandsList .p-jewelryBrandCol .c-brandName .-en { font-size: 24px; } } .p-watchBrandsList .p-watchBrandCol .c-brandName .-jp, .p-watchBrandsList .p-jewelryBrandCol .c-brandName .-jp, .p-jewelryBrandsList .p-watchBrandCol .c-brandName .-jp, .p-jewelryBrandsList .p-jewelryBrandCol .c-brandName .-jp { font-size: 10px; } @media screen and (min-width: 768px) { .p-watchBrandsList .p-watchBrandCol .c-brandName .-jp, .p-watchBrandsList .p-jewelryBrandCol .c-brandName .-jp, .p-jewelryBrandsList .p-watchBrandCol .c-brandName .-jp, .p-jewelryBrandsList .p-jewelryBrandCol .c-brandName .-jp { font-size: 12px; } } .p-watchBrandsList .p-watchBrandCol .c-brandDesc, .p-watchBrandsList .p-jewelryBrandCol .c-brandDesc, .p-jewelryBrandsList .p-watchBrandCol .c-brandDesc, .p-jewelryBrandsList .p-jewelryBrandCol .c-brandDesc { line-height: 1.8; font-size: 12px; opacity: 0.8; } @media screen and (min-width: 768px) { .p-watchBrandsList .p-watchBrandCol .c-brandDesc, .p-watchBrandsList .p-jewelryBrandCol .c-brandDesc, .p-jewelryBrandsList .p-watchBrandCol .c-brandDesc, .p-jewelryBrandsList .p-jewelryBrandCol .c-brandDesc { font-size: 14px; } } .p-watchBrandsList .p-jewelryBrandCol .c-brandThumb, .p-jewelryBrandsList .p-jewelryBrandCol .c-brandThumb { background-color: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, 0.2); } .p-watchBrandsList .p-jewelryBrandCol .c-brandImg, .p-jewelryBrandsList .p-jewelryBrandCol .c-brandImg { width: 29.9319727891%; } @media screen and (min-width: 768px) { .p-watchBrandsList .p-jewelryBrandCol .c-brandImg, .p-jewelryBrandsList .p-jewelryBrandCol .c-brandImg { width: 37.5850340136%; } } .p-watchBrandsList .p-jewelryBrandCol .c-brandLogo, .p-jewelryBrandsList .p-jewelryBrandCol .c-brandLogo { width: 66.3265306122%; } @media screen and (min-width: 768px) { .p-watchBrandsList .p-jewelryBrandCol .c-brandLogo, .p-jewelryBrandsList .p-jewelryBrandCol .c-brandLogo { width: 58.6734693878%; } } .p-brandNewsList { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; justify-content: center; row-gap: 35px; } .p-brandNewsList .p-articleCol a { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; align-items: flex-start; -moz-column-gap: 3.9772727273%; column-gap: 3.9772727273%; } .p-brandNewsList .p-articleCol .c-articleThumb { width: 31.8181818182%; aspect-ratio: 1.33/1; overflow: hidden; box-shadow: 0 0 6px rgba(0, 0, 0, 0.12); } .p-brandNewsList .p-articleCol .c-articleThumb img { width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .p-brandNewsList .p-articleCol .p-articleContent { width: 64.2045454545%; } .p-brandNewsList .p-articleCol .p-articleContent .c-articleTitle { margin-top: 0; } .p-brandNewsList .p-articleCol .c-articleStatus { margin-top: 0; color: #1A1311; } .p-brandNewsList.-pcCol--2 { flex-direction: row; -moz-column-gap: 4%; column-gap: 4%; } @media screen and (min-width: 768px) { .p-brandNewsList.-pcCol--2 .p-articleCol { width: 48%; } } .p-brandCollectionList { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; justify-content: center; -moz-column-gap: 3.8461538462%; column-gap: 3.8461538462%; row-gap: 14px; } @media screen and (min-width: 768px) { .p-brandCollectionList { -moz-column-gap: 2.7397260274%; column-gap: 2.7397260274%; row-gap: 32px; } } .p-brandCollectionList .p-brandCollectionCol { padding: 13px 0; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; width: 48.0769230769%; background-color: #fff; } @media screen and (min-width: 768px) { .p-brandCollectionList .p-brandCollectionCol { padding: 22px 0; width: 17.8082191781%; } } .p-brandCollectionList .c-collectionInfo { padding: 13px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; row-gap: 8px; align-items: center; } @media screen and (min-width: 768px) { .p-brandCollectionList .c-collectionInfo { padding: 13px 22px; row-gap: 13px; } } .p-brandCollectionList .c-collectionStatus { line-height: 1; font-size: 11px; letter-spacing: 0; } @media screen and (min-width: 768px) { .p-brandCollectionList .c-collectionStatus { font-size: 13px; } } .p-brandCollectionList .c-collectionStatus.-new { color: #e52368; } .c-collectionImg { margin: 0 auto; width: 80%; } @media screen and (min-width: 768px) { .c-collectionImg { width: 100%; } } .c-collectionName { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; row-gap: 5px; letter-spacing: 0.02rem; text-align: center; } @media screen and (min-width: 768px) { .c-collectionName { row-gap: 8px; } } .c-collectionName .-en { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 400; font-size: 16px; } @media screen and (min-width: 768px) { .c-collectionName .-en { font-size: 18px; } } .c-collectionName .-jp { font-size: 11px; } @media screen and (min-width: 768px) { .c-collectionName .-jp { font-size: 13px; } } .c-collectionType { padding: 6px 8px; display: inline-block; line-height: 1; font-weight: 500; font-size: 10px; letter-spacing: 0.05rem; } @media screen and (min-width: 768px) { .c-collectionType { padding: 6px 11px; font-size: 11px; } } .c-collectionType.-mens { background-color: #1A1311; color: #fff; } .c-collectionType.-ladies { background-color: #e6e6e6; } .p-itemsList { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; -moz-column-gap: 3.8461538462%; column-gap: 3.8461538462%; row-gap: 35px; } @media screen and (min-width: 768px) { .p-itemsList { justify-content: center; -moz-column-gap: 2.7397260274%; column-gap: 2.7397260274%; row-gap: 56px; } } .p-itemCol { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; row-gap: 8px; width: 48.0769230769%; letter-spacing: 0.05rem; text-align: center; } @media screen and (min-width: 768px) { .p-itemCol { row-gap: 13px; width: 17.8082191781%; } } .p-itemCol p.c-itemPrice { margin-bottom: 0; text-align: center; } .p-itemCol p.c-itemPrice .c-unit { font-size: 10px; } .p-itemCol .delete-btn { border: none; background-color: #F4F4F4; font-size: 12px; } @media screen and (min-width: 768px) { .p-itemCol .delete-btn:hover { cursor: pointer; } } .c-itemBrand { font-weight: 400; font-size: 11px; } @media screen and (min-width: 768px) { .c-itemBrand { font-size: 12px; } } .c-itemName { line-height: 1.6; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 500; font-size: 15px; } @media screen and (min-width: 768px) { .c-itemName { font-size: 16px; } } .c-itemRef { font-weight: 400; font-size: 11px; } @media screen and (min-width: 768px) { .c-itemRef { font-size: 12px; } } h4.c-itemPrice, p.c-itemPrice { font-weight: 400; font-size: 12px; } @media screen and (min-width: 768px) { h4.c-itemPrice, p.c-itemPrice { font-size: 13px; } } h4.c-itemPrice .c-unit, p.c-itemPrice .c-unit { font-size: 10px; } @media screen and (min-width: 768px) { .p-shopInfoCol { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; -moz-column-gap: 5.2336448598%; column-gap: 5.2336448598%; } } .p-shopInfoCol .c-shopImg { margin-bottom: 22px; display: block; } @media screen and (min-width: 768px) { .p-shopInfoCol .c-shopImg { margin-bottom: 0; width: 45.6074766355%; } } .p-shopInfoCol .c-shopImg img { width: 100%; height: auto; } .p-shopInfoCol .p-shopInfoDetail { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; row-gap: 13px; } @media screen and (min-width: 768px) { .p-shopInfoCol .p-shopInfoDetail { row-gap: 22px; width: 49.1588785047%; } } .p-shopInfoCol .c-shopName { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; row-gap: 8px; font-weight: 400; font-size: 18px; } @media screen and (min-width: 768px) { .p-shopInfoCol .c-shopName { row-gap: 13px; font-size: 22px; } } .p-shopInfoCol .c-shopBrand { font-weight: 400; font-size: 12px; } @media screen and (min-width: 768px) { .p-shopInfoCol .c-shopBrand { font-size: 13px; } } .p-shopInfoCol .c-link::after { background-color: #fff; } .p-shopInfoCol .c-shopAddress, .p-shopInfoCol .c-shopTime { font-size: 12px; } @media screen and (min-width: 768px) { .p-shopInfoCol .c-shopAddress, .p-shopInfoCol .c-shopTime { font-size: 13px; } } .p-shopInfoCol .c-shopLinks { justify-content: space-between; } @media screen and (min-width: 768px) { .p-shopInfoCol .c-shopLinks { justify-content: flex-start; -moz-column-gap: 22px; column-gap: 22px; } } .p-shopInfoCol .c-linkBox { padding: 13px 35px; border-color: #fff; width: 48%; background-color: transparent; font-size: 13px; } @media screen and (min-width: 768px) { .p-shopInfoCol .c-linkBox { width: auto; font-size: 14px; } } .brand-data { margin-bottom: 35px !important; background-color: #000; box-sizing: border-box; } .brand-data .arw-l { border-radius: 4px; background-color: #aad521; font-weight: bold; color: #000; transition: all 0.3s; } .brand-data__list, .brand-data__cell { display: flex; flex-wrap: wrap; height: 100%; } .brand-data__list { align-items: center; } .brand-data__cell { padding: 35px; position: relative; align-content: center; justify-content: center; width: 100%; color: #fff; box-sizing: border-box; } @media screen and (min-width: 768px) { .brand-data__cell { width: 50%; } } .brand-data__cell:first-child { background-size: cover; background-position: center center; } .brand-data__cell:first-child::before { content: ""; position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; background-color: #000; opacity: 0.6; z-index: 0; } .brand-data__cell .brand-info__logo, .brand-data__cell .brand-info__list { position: relative; z-index: 1; text-align: center; } .brand-data__cell .brand-info__logo { margin-top: -35px; } .brand-data__cell .brand-info__list { margin-top: -22px; } @media screen and (min-width: 768px) { .brand-data__cell .brand-info__list { margin-top: -35px; } } .brand-data__cell .brand-info__list li { margin-top: 13px; } .brand-data__cell .brand-data__title { font-size: 16px; font-weight: bold; text-align: center; } @media screen and (min-width: 768px) { .brand-data__cell .brand-data__title { font-size: 20px; } } .brand-data__cell .brand-data__contact .fz18 { font-size: 16px; font-weight: bold; } @media screen and (min-width: 768px) { .brand-data__cell .brand-data__contact .fz18 { font-size: 18px; } } .panerai .brand-data__cell:first-child { background-image: url(/uploads/images/brands/panerai/panerai-boutique1.jpg); } .panerai .brand-contact::before { background-image: url(/uploads/images/brands/panerai/panerai-boutique1.jpg); } .panerai .brand-contact .contact-list li .arw { background-color: #aad521; } /* * jewelry */ .p-bridalBnr { padding: 22px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; justify-content: center; align-items: center; row-gap: 22px; background-color: #fff; box-shadow: 0 0 6px rgba(0, 0, 0, 0.12); } @media screen and (min-width: 768px) { .p-bridalBnr { padding: 35px; } } .p-bridalBnr img { width: 100%; height: auto; max-width: 480px; } .p-bridalBnr h1 { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-size: 16px; } /* * jewelry-blog */ #jewelry-blog { margin-bottom: 56px; padding-bottom: 56px; } @media screen and (max-width: 980px) { #jewelry-blog { margin-bottom: 35px; padding-bottom: 35px; } } #jewelry-blog .container { overflow: visible; } @media screen and (max-width: 980px) { #jewelry-blog .container { overflow: hidden; } } #jewelry-blog .blog-nav-list { margin-bottom: 22px; font-size: 0; text-align: center; } #jewelry-blog .blog-nav-list li { margin: 0 18px 18px 18px; display: inline-block; } @media screen and (max-width: 600px) { #jewelry-blog .blog-nav-list li { margin: 0 6px 12px 6px; } } #jewelry-blog .blog-nav-list li a { color: #333; font-size: 18px; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; transition: 0.3s all; } @media screen and (max-width: 600px) { #jewelry-blog .blog-nav-list li a { border-radius: 8px; display: inline-block; padding: 8px 11px; background-color: #fff; font-size: 13px; box-shadow: 0px 0px 6px 3px #eee; } } #jewelry-blog .blog-nav-list li a:hover { opacity: 0.6; } #jewelry-blog .blog-list { margin: 0; margin-left: -3.9215686275%; display: flex; flex-wrap: wrap; width: 104.0816326531%; overflow: visible; } #jewelry-blog .blog-list .list-item { margin-left: 3.9215686275%; margin-bottom: 3.9215686275%; width: 29.4117647059%; background-color: #fff; box-shadow: 0px 0px 6px 3px #eee; transition: 0.6s all; } @media screen and (max-width: 600px) { #jewelry-blog .blog-list .list-item { width: 46.0784313725%; } } #jewelry-blog .blog-list .list-item:hover { background-color: #131313; } #jewelry-blog .blog-list .list-item:hover img { transform: scale(1.1); opacity: 0.6; } #jewelry-blog .blog-list .list-item:hover a { color: #fff; } #jewelry-blog .blog-list .list-item a { display: block; color: #333; } #jewelry-blog .blog-list .list-item img { width: 100%; height: auto; transition: 0.4s all; } #jewelry-blog .blog-list .list-item .thumb { overflow: hidden; } #jewelry-blog .blog-list .list-item .item-content { padding: 22px; text-align: center; } @media screen and (max-width: 600px) { #jewelry-blog .blog-list .list-item .item-content { padding: 22px 13px; } } #jewelry-blog .blog-list .list-item .item-content .catch { margin-bottom: 8px; line-height: 1.6; font-size: 12px; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; } #jewelry-blog .blog-list .list-item .item-content .title { margin-bottom: 5px; line-height: 1.6; font-size: 20px; font-weight: bold; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; } @media screen and (max-width: 600px) { #jewelry-blog .blog-list .list-item .item-content .title { line-height: 1.3; font-size: 18px; } } #jewelry-blog .blog-list .list-item .item-content .text { line-height: 1.6; font-size: 11px; opacity: 0.7; } #jewelry-blog .blog-list .list-item .item-content .text p { margin-bottom: 13px; } #jewelry-blog .blog-list .list-item .item-content .more { margin-bottom: 18px; border-bottom: 1px dotted; display: inline-block; font-size: 14px; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-style: italic; text-align: right; } #jewelry-blog .blog-list .list-item .item-content .update { display: block; font-size: 12px; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-style: italic; opacity: 0.7; } #jewelry-blog .blog-list.grid-4 .list-item { width: 21.0784313725%; } #jewelry-blog .blog-list.grid-4 .list-item:nth-child(n+9) { display: none; } @media screen and (max-width: 600px) { #jewelry-blog .blog-list.grid-4 .list-item { width: 46.0784313725%; } } #jewelry-blog .page-list { margin-bottom: 0; } #jewelry-blog .page-list a { background-color: #fff; } #jewelry-blog .page-list a:hover { background-color: #131313; } body.blog-article { overflow: auto; } #jewelry-blog-list .pagenation.container { padding: 0; } #jewelry-blog-article { margin: 0 auto; max-width: 606px; } #jewelry-blog-article .item-content { padding: 35px; background-color: #fff; box-shadow: 0px 0px 6px 3px #eee; } @media screen and (max-width: 600px) { #jewelry-blog-article .item-content { padding: 22px; } } #jewelry-blog-article .item-content .catch { margin-bottom: 8px; line-height: 1.6; font-size: 14px; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; } #jewelry-blog-article .item-content .title { margin-bottom: 22px; line-height: 1.6; font-size: 28px; font-weight: bold; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; } @media screen and (max-width: 600px) { #jewelry-blog-article .item-content .title { font-size: 24px; } } #jewelry-blog-article .item-content .text { margin-bottom: 35px; line-height: 1.8; font-size: 14px; } #jewelry-blog-article .item-content .text p { margin-bottom: 13px; } #jewelry-blog-article .item-content .update { display: block; font-size: 14px; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-style: italic; opacity: 0.7; } @media screen and (max-width: 600px) { #jewelry-blog-article .item-content .update { font-size: 12px; } } #jewelry-blog-article .item-content img { max-width: 100%; height: auto; } #jewelry-blog-article .pagenation.container { padding: 0; } #jewelry-blog-article .page-list { margin-top: 22px; background-color: transparent; } #jewelry-blog-article .page-list a { display: inline-block; font-size: 13px; color: #333; } #jewelry-blog-article .page-list .back { padding: 8px 13px; width: auto; } .scroller-status { display: none; } #jewelry-blog #content_main { padding-top: 11px; overflow: hidden; } #jewelry-blog .fixed_page .title { text-align: center; } #jewelry-blog .fixed_page .item_article .item_content .text h2 { margin: 21px 0; font-size: 1.25rem; color: #8E4D4D; } @media screen and (max-width: 640px) { #jewelry-blog .fixed_page .item_article .item_content .text h2 { font-size: 1.125rem; } } #jewelry-blog .fixed_page img { margin: 14px 0; width: 100%; height: auto; } #jewelry-blog .content_heading { margin-bottom: 44px; font-size: 2.1875rem; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; text-align: center; } #jewelry-blog .content_heading:after { margin: 44px auto; content: ""; width: 56px; height: 1px; display: block; background-color: #C0BBB9; } @media screen and (max-width: 640px) { #jewelry-blog .content_heading { font-size: 1.75rem; } } #jewelry-blog .pdv14 { padding: 14px 0; } @media screen and (max-width: 606px) { #jewelry-blog .wMax { width: 100%; height: auto; } } /********************************************************************************* jewerly care **********************************************************************************/ .jwcr-heading img { margin: 0; } .list-inline { margin-bottom: 35px; font-size: 0; } .center { text-align: center; } .list-inline li { display: inline-block; width: 50%; } @media screen and (max-width: 480px) { .list-inline li { width: 100%; } } .list-inline li img { margin: 0; } .jwcr-border-1 { margin: 56px 0 0 0; } .jwcr-border-1 img { margin: 0; } .jwcr-section { margin-bottom: 56px; } .jwcr-title, .jwcr-title-m { margin: 0 auto !important; max-width: 352px; } .jwcr-title { margin-bottom: 44px !important; } @media screen and (max-width: 480px) { .jwcr-title, .jwcr-title-m { width: 75%; } } .item-table { margin-bottom: 35px; display: table; } .item-table li { display: table-cell; font-size: 1.125rem; text-align: center; vertical-align: bottom; } .item-table li .thumb { max-width: 135px; } .item-table li:first-child .thumb { vertical-align: top; } .item-table li:nth-child(n+1) { /* width: 22%;*/ } @media screen and (max-width: 640px) { .item-table { display: block; overflow: hidden; } .item-table li:first-child { display: none; } .item-table li { display: block; float: left; width: 50%; text-align: left; } .item-table .cell:before { display: inline-block; width: 4rem; } .item-table .cell.cell-1:before { content: "[ PT ]"; } .item-table .cell.cell-2:before { content: "[ WS ]"; } .item-table .cell.cell-3:before { content: "[ YG ]"; } .item-table .cell.cell-4:before { content: "[ PS ]"; } } .jwcr-contact { margin-bottom: 22px; padding: 22px 22px 8px 22px; background-color: #ffecf0; text-align: center; } @media screen and (max-width: 480px) { .jwcr-contact { padding: 13px 13px 0 13px; } } .jwcr-contact h4, .jwcr-contact p { display: inline-block; line-height: 1; font-size: 1.25rem; } @media screen and (max-width: 480px) { .jwcr-contact h4, .jwcr-contact p { font-size: 1rem; } } .jwcr-coupon-sp { display: none; } @media screen and (max-width: 480px) { .jwcr-coupon { display: none; } .jwcr-coupon-sp { display: block; } } .jwcr-contact h4 { margin-right: 1rem; } .jwcr-step img, .jwcr-border-2 img { margin: 0; } .jwcr-step-title { font-size: 1.125rem; } .jwcr-step-title img { width: 30px; vertical-align: -0.25rem; } .bridal-bnr { margin: 0 auto 35px auto; max-width: 980px; } @media screen and (max-width: 980px) { .bridal-bnr { margin: 0 22px 35px 22px; } } @media screen and (max-width: 600px) { .bridal-bnr { margin: 0 13px 35px 13px; } } .bridal-bnr a { padding: 22px 56px; border: 1px solid #cecece; display: flex; align-items: center; justify-content: center; background-image: url(/images/bridal/bridal-heading-bg.png); background-repeat: repeat-x; background-position: 50% 100%; color: #6b6865; font-size: 14px; } @media screen and (max-width: 600px) { .bridal-bnr a { display: block; text-align: center; font-size: 13px; } } .bridal-bnr a span { color: #6b6865; } .bridal-bnr img { margin-right: 35px; width: 100%; height: auto; width: 50%; } @media screen and (max-width: 600px) { .bridal-bnr img { margin-bottom: 13px; width: 100%; } } .jewelry-brand-detail { position: relative; } .jewelry-brand-detail img { width: 100%; height: auto; } .brand-content-main { margin: 0 auto 35px auto; max-width: 604px; } .brand-content-logo { margin: 0 auto 56px auto; max-width: 230px; } @media screen and (max-width: 600px) { .brand-content-logo { max-width: 156px; } } .brand-content-outline { margin-bottom: 56px; text-align: center; } @media screen and (max-width: 600px) { .brand-content-outline { margin-bottom: 56px; } } .brand-content-outline h1 { margin-bottom: 35px; line-height: 1.4; font-family: "Noto Serif JP", serif; font-weight: bold; font-size: 22px; } @media screen and (max-width: 600px) { .brand-content-outline h1 { font-size: 18px; } } .brand-content-outline p { margin-bottom: 35px; line-height: 2; font-size: 16px; } @media screen and (max-width: 600px) { .brand-content-outline p { margin-bottom: 22px; font-size: 14px; text-align: left; } } @media screen and (max-width: 600px) { .brand-content-outline p a { display: block; text-align: center; } } .brand-content-title { margin-bottom: 56px; font-family: "Noto Serif JP", serif; font-weight: bold; font-size: 22px; text-align: center; } @media screen and (max-width: 600px) { .brand-content-title { font-size: 20px; } } .brand-grid { margin-bottom: 56px; } .brand-grid.grid-2 { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; } .brand-grid.reverse-grid { flex-direction: row-reverse; } .brand-grid.mgb0 { margin-bottom: 0; } .brand-grid-col { margin-bottom: 56px; display: flex; flex-wrap: wrap; flex-direction: column; width: 47.1428571429%; } @media screen and (max-width: 600px) { .brand-grid-col { margin-bottom: 35px; width: 100%; } } @media screen and (max-width: 600px) { .brand-grid-col img { margin: 0 auto; width: 70%; } } .brand-grid-col h2 { font-family: "Noto Serif JP", serif; font-weight: bold; font-size: 22px; text-align: center; } @media screen and (max-width: 600px) { .brand-grid-col h2 { font-size: 20px; } } .brand-grid-col h2 span { margin-left: 8px; color: #e52368; font-size: 14px; vertical-align: 0.2rem; } @media screen and (max-width: 600px) { .brand-grid-col h2 span { margin-left: 5px; font-size: 12px; } } .brand-grid-col p { margin-top: 35px; line-height: 2; font-size: 16px; } @media screen and (max-width: 600px) { .brand-grid-col p { margin-top: 22px; font-size: 14px; } } .brand-contents-morebutton { margin-left: -70px; padding: 13px; position: absolute; left: 50%; bottom: 0; display: block; background-color: #131313; width: 140px; color: #fff; font-size: 14px; text-align: center; box-sizing: border-box; } @media screen and (max-width: 600px) { .brand-contents-morebutton { font-size: 12px; } } .brand-contents-morebutton::before { content: "続きを読む"; } .brand-contents-morebutton::after { display: none; content: "続きを閉じる"; } .brand-opener { display: none; } .brand-opener:checked + .brand-contents-morebutton::before { display: none; } .brand-opener:checked + .brand-contents-morebutton::after { display: block; } .brand-opener:checked ~ .brand-contents-hidden { visibility: visible; max-height: 9000px; } .brand-contents-hidden { margin-bottom: 56px; max-height: 0; visibility: hidden; overflow: hidden; transition: all 1s; } /* * Bridal */ .p-bridalHero { padding-top: 0; background: linear-gradient(0deg, rgb(227, 246, 255) 0%, rgb(255, 255, 255) 100%); } .p-bridalHero .l-container { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; align-items: center; -moz-column-gap: 2%; column-gap: 2%; row-gap: 35px; } @media screen and (min-width: 768px) { .p-bridalHeroHeading { width: 58%; } } .p-bridalHeroImg img { width: 100%; height: auto; } .p-bridalHeroCol { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; width: 100%; } @media screen and (min-width: 768px) { .p-bridalHeroCol { width: 40%; } } .p-bridalHeroCol p { line-height: 2; font-size: 13px; text-align: center; } @media screen and (min-width: 768px) { .p-bridalHeroCol p { line-height: 2.5; font-size: 15px; } } .p-bridalHeroNav { width: 100%; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; justify-content: center; row-gap: 13px; } @media screen and (min-width: 768px) { .p-bridalHeroNav { -moz-column-gap: 2%; column-gap: 2%; row-gap: 22px; } } .p-bridalHeroNav a { border: none; width: 100%; background: rgb(176, 225, 250); background: linear-gradient(90deg, rgb(176, 225, 250) 20%, rgb(251, 240, 234) 80%); font-size: 13px; text-align: center; box-shadow: 0 0 8px rgba(255, 255, 255, 0.7); } @media screen and (min-width: 768px) { .p-bridalHeroNav a { width: 48%; font-size: 14px; } } @media screen and (min-width: 768px) { .p-bridalItem p { text-align: center; } } .p-boucheronLink { margin: 22px auto 0 auto; display: block; max-width: 480px; text-align: center; } @media screen and (min-width: 768px) { .p-boucheronLink { margin-top: 35px; } } .p-boucheronLink img { width: 80%; } .p-boucheronLink .c-linkBox { font-size: 13px; } .p-bridalOption { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; row-gap: 35px; } @media screen and (min-width: 768px) { .p-bridalOption { row-gap: 56px; } } .p-bridalOption .l-container { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; row-gap: 22px; } @media screen and (min-width: 768px) { .p-bridalOption .l-container { row-gap: 35px; } } .p-bridalOption p { font-size: 14px; } @media screen and (min-width: 768px) { .p-bridalOption p { text-align: center; } } @media screen and (min-width: 768px) { .p-bridalOptionStep { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; -moz-column-gap: 2%; column-gap: 2%; } } .p-bridalOptionStep li { text-align: center; } @media screen and (min-width: 768px) { .p-bridalOptionStep li { width: 48%; } } .p-bridalOptionStep li h3 { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; } .p-bridalOptionStep li h3 span { font-size: 22px; } @media screen and (min-width: 768px) { .p-bridalOptionStep li h3 span { font-size: 28px; } } .p-bridalOptionStep li img { width: 60%; } @media screen and (min-width: 768px) { .p-bridalOptionStep li img { width: 80%; } } .p-bridalContact { margin-top: -35px; padding: 22px 35px; background-color: #e3f6ff; text-align: center; } @media screen and (min-width: 768px) { .p-bridalContact { margin-top: -56px; } } .p-bridalContact h3 { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-size: 18px; } @media screen and (min-width: 768px) { .p-bridalContact h3 { font-size: 22px; } } .p-bridalContact p { font-size: 14px; } .p-bridalBrandBnr { margin: 0 auto 22px auto; padding: 0 35px; align-items: center; max-width: 540px; text-align: center; } .p-bridalBrandBnr .c-bridalBrandImg { margin: 0 auto; max-width: 400px; } .p-bridalBrandBnr .c-bridalBrandLogo { margin: 0 auto; max-width: 220px; } .service-table { margin-bottom: 35px; } @media screen and (max-width: 800px) { .service-table { overflow-x: scroll; } } .carat-table { width: 800px; } .carat-table td { padding: 13px 22px; font-size: 0.88em; vertical-align: bottom; text-align: center; } .carat-table td img { margin-bottom: 13px; } .clarity-table { border-top: 1px solid #d6d6d6; border-left: 1px solid #d6d6d6; width: 880px; } @media screen and (min-width: 768px) { .clarity-table { width: 100%; } } .clarity-table th { background-color: #1b1918; color: #fff; } .clarity-table th, .clarity-table td { padding: 13px 22px; border-right: 1px solid #d6d6d6; border-bottom: 1px solid #d6d6d6; line-height: 1.3; font-size: 0.82em; text-align: center; } .clarity-table td:nth-child(odd) { background-color: #f1f1f1; } /* * item-detail */ .p-itemDetail { margin: 13px 0; } @media screen and (min-width: 768px) { .p-itemDetail { margin: 56px 0; } } .p-itemDetail .l-container { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; align-items: flex-start; justify-content: space-between; } .p-itemContentDiv:first-of-type { width: 58.0479452055%; } .p-itemContentDiv:nth-of-type(2) { width: 37.1575342466%; } .p-itemGallery { margin-bottom: 35px; width: 100%; order: 1; } @media screen and (min-width: 768px) { .p-itemGallery { margin-bottom: 56px; } } .p-itemFeature { margin-bottom: 35px; order: 3; } .p-itemInfo { order: 2; } .p-itemContact { margin-bottom: 35px; order: 4; } @media screen and (min-width: 768px) { .p-itemContact { margin-bottom: 0; } } .p-itemBrandNews { order: 5; } .p-itemGalleryList .swiper-slide img { max-inline-size: none; max-block-size: none; width: 100%; height: auto; } .p-itemGalleryMain { border: 1px solid #EFEFEF; } .p-itemGalleryThumb { margin-top: 13px; } @media screen and (min-width: 768px) { .p-itemGalleryThumb { margin-top: 17px; } } .p-itemGalleryThumb .p-itemGalleryList { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; -moz-column-gap: 2.5073746313%; column-gap: 2.5073746313%; } .p-itemGalleryThumb .swiper-slide { border: 1px solid #EFEFEF; width: 17.994100295% !important; } @media screen and (min-width: 768px) { .p-itemGalleryThumb .swiper-slide:hover { border: 1px solid #1A1311; cursor: pointer; transition: border 0.4s ease-in-out; } } .p-itemGalleryThumb .swiper-slide.swiper-slide-thumb-active { border: 1px solid #1A1311; } @media screen and (min-width: 768px) { .p-itemGalleryThumb .swiper-slide.swiper-slide-thumb-active:hover { cursor: default; } } .pswp__img { max-inline-size: none; max-block-size: none; } .p-itemInfo .c-collectionType { margin-bottom: 13px; } .p-itemInfo .c-collectionName { margin-bottom: 22px; row-gap: 8px; text-align: left; } .p-itemInfo .c-collectionName .-en { font-weight: 400; font-size: 16px; } @media screen and (min-width: 768px) { .p-itemInfo .c-collectionName .-en { font-size: 18px; } } .p-itemInfo .c-itemName { line-height: 1.5; font-weight: 400; font-size: 22px; } @media screen and (min-width: 768px) { .p-itemInfo .c-itemName { font-size: 28px; } } .p-itemInfo .c-itemNameSub { margin-bottom: 13px; display: block; width: 100%; font-size: 14px; } @media screen and (min-width: 768px) { .p-itemInfo .c-itemNameSub { margin-bottom: 22px; font-size: 16px; } } .p-itemInfo .c-itemRef { margin-top: 5px; font-size: 11px; } @media screen and (min-width: 768px) { .p-itemInfo .c-itemRef { font-size: 13px; } } .p-itemInfo .c-itemPrice { margin-top: 22px; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 400; font-size: 16px; } @media screen and (min-width: 768px) { .p-itemInfo .c-itemPrice { font-size: 18px; } } .p-itemInfo .c-itemPrice .c-unit { font-size: 10px; vertical-align: 0.1rem; } @media screen and (min-width: 768px) { .p-itemInfo .c-itemPrice .c-unit { font-size: 11px; } } .p-itemInfo .c-itemSpec { margin-top: 35px; } .p-itemInfo .c-itemSpec li { margin-bottom: 22px; padding-top: 13px; } .p-itemInfo .c-itemSpec li:not(:last-child) { border-top: 1px solid #e8e8e8; } .p-itemInfo .c-itemSpec h5 { margin-bottom: 8px; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 500; font-size: 14px; } @media screen and (min-width: 768px) { .p-itemInfo .c-itemSpec h5 { font-size: 15px; } } .p-itemInfo .c-itemSpec p { line-height: 1.8333333333; font-weight: 400; font-size: 12px; } @media screen and (min-width: 768px) { .p-itemInfo .c-itemSpec p { font-size: 13px; } } .p-itemInfo .c-itemSpec .c-specLabel { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 600; font-size: 14px; } .p-specDetail { padding-top: 22px; border-top: 1px solid rgba(26, 19, 17, 0.6); border-bottom: 1px solid rgba(26, 19, 17, 0.6); } @media screen and (min-width: 768px) { .p-specDetail { margin-bottom: 0 !important; border-bottom: none; } } .c-specInput { display: none; } .c-specLabel { margin-bottom: 13px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; align-items: center; } .c-specIcon { margin-left: 8px; display: inline-flex; align-items: center; justify-content: center; flex-direction: column; width: 20px; height: 20px; background-color: #F4F4F4; vertical-align: -0.25rem; } .c-specIcon::before, .c-specIcon::after { content: ""; display: block; width: 12px; height: 1px; background-color: #1A1311; } .c-specIcon::before { transform: translate(0px, 1px) rotate(90deg); } .c-deepSpec { max-height: 0; overflow: hidden; transition: all 0.6s ease-in-out; } /* チェックされたときに展開 */ .c-specInput:checked + .c-specLabel .c-specIcon::before { opacity: 0; } .c-specInput:checked + .c-specLabel + .c-deepSpec { margin-bottom: 22px; max-height: 1000px; /* 十分に大きな値にする */ opacity: 1; } .p-itemFeature { position: relative; /* ベースのスタイル */ /* チェック時：全展開 */ } .p-itemFeature .c-itemInfoTitle { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 400; font-size: 18px; } @media screen and (min-width: 768px) { .p-itemFeature .c-itemInfoTitle { font-size: 22px; } } .p-itemFeature .c-itemInfoContents { padding-bottom: 35px; transition: all 0.5s ease; } .p-itemFeature .c-itemInfoContentsInner { display: -webkit-box; -webkit-line-clamp: 13; -webkit-box-orient: vertical; overflow: hidden; transition: max-height 0.5s ease, -webkit-line-clamp 0.5s ease; max-height: 27em; /* 3行程度 */ line-height: 1.8; font-size: 14px; } @media screen and (min-width: 768px) { .p-itemFeature .c-itemInfoContentsInner { font-size: 15px; } } .p-itemFeature .c-infoInput:checked ~ .c-itemInfoContents .c-itemInfoContentsInner { -webkit-line-clamp: unset; display: block; max-height: 2000px; /* 十分に大きい値でOK */ } .p-itemFeature .c-infoLabel { position: absolute; bottom: 0; display: none; } .p-itemFeature .c-infoLabel .c-labelText { font-size: 13px; } .p-itemFeature .c-infoLabel .c-labelText::before { content: "続きを読む"; transition: content 0.3s ease; } .c-infoInput:checked + .c-infoLabel .c-labelText::before { content: "閉じる"; } .p-itemContact { padding-top: 22px; border-top: 1px solid rgba(26, 19, 17, 0.6); } .p-itemContact p { line-height: 2; font-size: 10px; letter-spacing: 0; } @media screen and (min-width: 768px) { .p-itemContact p { font-size: 11px; } } .c-itemLoanBnr { margin-top: 22px; padding: 22px; border: 1px solid #EFEFEF; background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgb(216, 216, 216) 100%); } .c-itemLoanBnrTitle { font-size: 13px; } @media screen and (min-width: 768px) { .c-itemLoanBnrTitle { font-size: 15px; } } .c-itemLoanBnr .c-loanResult { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 500; font-size: 22px; } @media screen and (min-width: 768px) { .c-itemLoanBnr .c-loanResult { font-size: 24px; } } .c-itemLoanBnr .c-note { margin-top: 8px; font-size: 10px; } @media screen and (min-width: 768px) { .c-itemLoanBnr .c-note { font-size: 12px; } } .p-snsLinksTitle { display: block; width: 100%; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 600; font-size: 12px; text-align: center; } .p-snsLinks.-share { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; justify-content: center; -moz-column-gap: 22px; column-gap: 22px; width: 100%; } .p-snsLinks.-share button, .p-snsLinks.-share a { display: block; width: 30px; } @media screen and (min-width: 768px) { .p-snsLinks.-share button:hover { cursor: pointer; } } .p-itemBrandNews { padding: 22px 0; border-top: 1px solid rgba(26, 19, 17, 0.6); } @media screen and (min-width: 768px) { .p-itemBrandNews { padding: 22px; } } .p-itemBrandNews .p-basicHeading { width: 100%; } .p-itemBrandNews .c-basicHeadingTitle.-en { font-size: 22px; } .p-itemBrandNewsList { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; row-gap: 35px; } .p-itemBrandNewsList .p-articleCol a { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; justify-content: space-between; } .p-itemBrandNewsList .c-articleThumb { width: 29.3375394322%; } .p-itemBrandNewsList .p-articleContent { width: 65.2996845426%; } .p-itemBrandNewsList .c-articleStatus { margin-top: 0; font-size: 11px; } .p-itemBrandNewsList .c-articleTitle { margin-bottom: 8px; font-size: 16px; } .item-status, .c-itemStatus { display: flex; flex-wrap: wrap; justify-content: center; -moz-column-gap: 8px; column-gap: 8px; row-gap: 8px; } .item-status span, .c-itemStatus span { padding: 8px 13px; display: inline-block; color: #fff; line-height: 1; font-size: 11px; } .item-status__new, .c-itemStatus__new { background-color: #e52368; } .item-status__limited, .c-itemStatus__limited { background-color: #0075c2; } .item-status__eol, .c-itemStatus__eol { background-color: #9d9d9d; } .p-itemInfo { width: 100%; } .p-itemInfo .c-itemStatus { margin-top: 13px; justify-content: flex-start; } .p-itemInfo .c-itemStatus span { margin: 0 4px 8px 0; font-size: 11px; } .p-itemInfo .p-basicContact { margin-top: 13px; -moz-column-gap: 3%; column-gap: 3%; row-gap: 13px; } .p-itemInfo .p-basicContact .c-linkBox { padding: 8px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; width: 48.5%; justify-content: center; align-items: center; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-size: 13px; } @media screen and (min-width: 768px) { .p-itemInfo .p-basicContact .c-linkBox { padding: 13px; font-size: 14px; } } .p-itemInfo .p-basicContact .c-linkBox:first-child { padding: 13px; width: 100%; } .p-itemInfo .p-basicContact .c-linkBox.-favorite { border: none; width: 100%; background-color: #F4F4F4; } .p-itemInfo .p-basicContact .c-linkBox.-favorite img { margin-right: 5px; width: 16px; height: 16px; vertical-align: middle; } .p-itemInfo .p-basicContact .c-linkBox + .c-linkBox { width: 100%; } .p-itemInfo .p-basicContact .c-loanModalButton { padding: 13px; width: 48.5%; font-size: 13px; } @media screen and (min-width: 768px) { .p-itemInfo .p-basicContact .c-loanModalButton { padding: 13px; font-size: 14px; } } /* * brand */ .p-basicSection + .container { padding-top: 56px; } #watch .container { margin: 0 auto; max-width: 980px; } .mgt56 { margin-top: 56px !important; } .mgt35 { margin-top: 35px !important; } .mgt22 { margin-top: 22px !important; } .mgt13 { margin-top: 13px !important; } .mgb56 { margin-bottom: 56px !important; } .mgb35 { margin-bottom: 35px !important; } .mgb22 { margin-bottom: 22px !important; } .mgb13 { margin-bottom: 13px !important; } .base-content { margin-bottom: 35px; margin-left: auto; margin-right: auto; padding: 0 22px; max-width: 980px; } @media screen and (min-width: 980px) { .base-content { padding: 0; } } .base-content img { margin-bottom: 22px; } @media screen and (min-width: 768px) { .base-content img { margin-bottom: 35px; } } .base-content p, .base-content li, .base-content dd { line-height: 1.8; font-size: 14px; } @media screen and (min-width: 768px) { .base-content p, .base-content li, .base-content dd { font-size: 15px; } } .base-content p { margin-bottom: 22px; } .base-content .grid__item img { margin-bottom: 0; } .article-pr-link { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; align-items: center; justify-content: center; row-gap: 22px; } .article-pr-link a { padding: 10px 22px; border: 1px solid #1A1311; display: inline-block; background-color: #fff; text-align: center; } @media screen and (min-width: 768px) { .article-pr-link a { padding: 13px 35px; } } .event-movie { margin: 0 auto; max-width: 640px; } .event-movie video { width: 100%; height: auto; } .patek-brand-seal { margin-bottom: 35px; text-align: center; } .patek-brand-seal img { width: 200px; height: auto; } .patek-brand-seal figcaption { margin-top: 13px; color: #ae967c; font-size: 13px; } @media screen and (min-width: 600px) { .patek-brand-seal figcaption { font-size: 14px; } } .base-page-link { padding: 22px 22px 0 22px; background-color: #f4f4f4; } .base-page-link ul { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; } .base-page-link ul li { margin-right: 0; margin-bottom: 13px; width: 100%; } @media screen and (min-width: 600px) { .base-page-link ul li { margin-right: 3.333%; margin-bottom: 22px; width: 30%; } } .base-page-link ul li a { color: #131313; transition: all 0.3s; } .base-page-link ul li a::before { margin-right: 8px; content: ""; display: inline-block; border-top: 1px solid #131313; border-left: 1px solid #131313; width: 8px; height: 8px; transform: translate(0, -3px) rotate(225deg); } .base-page-link ul li a:hover { opacity: 0.7; } .patek-author { padding: 13px 22px; display: flex; flex-wrap: wrap; align-items: center; background-color: #f4f4f4; } @media screen and (min-width: 768px) { .patek-author { padding: 22px 35px; } } .patek-author figure { margin-bottom: 8px !important; } @media screen and (min-width: 768px) { .patek-author figure { margin-bottom: 0 !important; } } .patek-author p { margin: 0 !important; } .patek-author__img { width: 40%; margin: 0 auto; } @media screen and (min-width: 768px) { .patek-author__img { margin-right: 4%; width: 16%; } } .patek-author__img img { width: 100%; height: auto; } .patek-author__column { width: 100%; } @media screen and (min-width: 768px) { .patek-author__column { width: 80%; } } .patek-author__column h2 { font-size: 14px; font-weight: bold; text-align: center; } @media screen and (min-width: 768px) { .patek-author__column h2 { font-size: 16px; text-align: left; } } .patek-author__column p { margin-top: 13px; line-height: 1.6; font-size: 12px; } @media screen and (min-width: 768px) { .patek-author__column p { font-size: 14px; } } .patek-column__list { margin-top: 13px; } @media screen and (min-width: 768px) { .patek-column__list { margin-top: 22px; } } .patek-column__list li { background-color: #f4f4f4; } .patek-column__list li img { width: 100%; height: auto; } .patek-column__list li a { display: block; color: #333; transition: all 0.3s; } @media screen and (min-width: 768px) { .patek-column__list li a:hover { opacity: 0.6; } } .patek-column__list li h2 { padding: 13px; line-height: 1.4; font-weight: bold; font-size: 13px; } @media screen and (min-width: 768px) { .patek-column__list li h2 { font-size: 15px; } } .mukinri-bnr { padding: 22px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; background-color: #131313; color: #fff; } @media screen and (min-width: 768px) { .mukinri-bnr { padding: 35px 22px; } } .mukinri-heading { margin-right: 0; display: flex; flex-wrap: wrap; align-items: center; } @media screen and (min-width: 768px) { .mukinri-heading { margin-right: 35px; } } .mukinri-heading .mukinri-title { margin-right: 13px; padding: 8px 13px; background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%); color: #000; line-height: 1.4; font-size: 15px; font-weight: bold; text-align: right; } .mukinri-heading .mukinri-num { background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1; font-family: "PT Serif", serif; font-size: 80px; } .mukinri-heading .mukinri-unit { background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-family: "PT Serif", serif; font-size: 28px; font-weight: bold; margin-top: 35px; } .mukinri-copy { margin-bottom: 0 !important; line-height: 1.2; font-size: 13px; } @media screen and (min-width: 768px) { .mukinri-copy { font-size: 15px; } } .mukinri-max { margin: 0 5px; background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; line-height: 1.2; font-family: "PT Serif", serif; font-size: 38px; } .mukinri-sample { padding: 13px; display: inline-block; background-color: #131313; color: #fff; } .mukinri-sample h4 { background: linear-gradient(45deg, #B67B03 0%, #DAAF08 45%, #FEE9A0 70%, #DAAF08 85%, #B67B03 90% 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; font-weight: bold; } .mukinri-sample p:last-of-type { margin-bottom: 0 !important; } /* * contact */ .p-contactTelBlock { padding: 22px; background-color: #F4F4F4; } @media screen and (min-width: 768px) { .p-contactTelBlock { padding: 35px; } } .p-contactTelBlock p.c-shopTime { margin-top: 13px; font-size: 12px; } /* * old article */ .grid { padding: 22px 0; overflow: hidden; } .grid.mgt22 { margin-top: 0 !important; } .grid .column { width: 500px; } .img-left figure { margin-right: 22px; float: left; } .img-left .column { float: left; } .img-left.col-block { width: 100%; } .img-left.col-block figure { margin-right: 2.24489%; width: 24.48979%; } .img-left.col-block figure img { width: 100%; height: auto; } .img-left.col-block .column { float: none; overflow: hidden; } @media screen and (max-width: 640px) { .img-left.col-block .column { overflow: visible; } } .article-content p { font-size: 0.94em; } @media screen and (max-width: 480px) { .article-content p { font-size: 1em; } } .article-content .heading-l { line-height: 1.2; } .article-content .img-right { margin-left: 22px; float: right; width: 36.36363%; /*240px*/ } .article-content .img-right img { margin-bottom: 8px; width: 100%; max-width: 240px; height: auto; } .article-content .img-right figcaption { font-size: 0.88em; } .article-content .photo-list { width: 103.0303%; /*680px*/ overflow: hidden; } .article-content .photo-list .list__cell { margin-right: 2.94117%; /*20px*/ float: left; width: 17.05882%; /*116px*/ } @media screen and (max-width: 480px) { .article-content .photo-list .list__cell { width: 30.1%; } } .photo-list img { margin-bottom: 8px; width: 100%; height: auto; } .photo-list figcaption { font-size: 0.82em; } .article-content .grid.normal-grid { padding-bottom: 1em; width: 103.711%; } .article-content .grid.normal-grid.pdb0 { padding-bottom: 0; } @media screen and (min-width: 414px) { .article-content .grid.normal-grid { width: 100%; } } .article-content .grid.normal-grid .grid__item { margin-bottom: 8px; } .article-content .grid.normal-grid.grid-center { padding-left: 12.499995%; } @media screen and (max-width: 414px) { .article-content .grid.normal-grid { width: 103.711%; } .article-content .grid.normal-grid.grid-center { padding-left: 0; } .article-content .grid.normal-grid .grid__item--3, .article-content .grid.normal-grid .grid__item--4, .article-content .grid.normal-grid .grid__item--6 { width: 46.42183%; } .article-content .grid.normal-grid.sp-grid1 { width: 100%; } .article-content .grid.normal-grid.sp-grid1 .grid__item--3, .article-content .grid.normal-grid.sp-grid1 .grid__item--4, .article-content .grid.normal-grid.sp-grid1 .grid__item--5, .article-content .grid.normal-grid.sp-grid1 .grid__item--6, .article-content .grid.normal-grid.sp-grid1 .grid__item--7, .article-content .grid.normal-grid.sp-grid1 .grid__item--8, .article-content .grid.normal-grid.sp-grid1 .grid__item--9, .article-content .grid.normal-grid .grid__item--6.sp-grid-max, .article-content .grid.normal-grid.sp-grid1 .grid__item--12 { width: 100%; } .article-content .grid.normal-grid.sp-grid2 { width: 101%; } .article-content .grid.normal-grid.sp-grid3 { width: 102%; } .article-content .grid.normal-grid.sp-grid2 .grid__item--3, .article-content .grid.normal-grid.sp-grid2 .grid__item--4, .article-content .grid.normal-grid.sp-grid2 .grid__item--5, .article-content .grid.normal-grid.sp-grid2 .grid__item--6, .article-content .grid.normal-grid.sp-grid2 .grid__item--7, .article-content .grid.normal-grid.sp-grid2 .grid__item--8, .article-content .grid.normal-grid.sp-grid2 .grid__item--9 { margin-right: 1%; width: 49%; } .article-content .grid.normal-grid.sp-grid3 .grid__item--3, .article-content .grid.normal-grid.sp-grid3 .grid__item--4, .article-content .grid.normal-grid.sp-grid3 .grid__item--5, .article-content .grid.normal-grid.sp-grid3 .grid__item--6, .article-content .grid.normal-grid.sp-grid3 .grid__item--7, .article-content .grid.normal-grid.sp-grid3 .grid__item--8, .article-content .grid.normal-grid.sp-grid3 .grid__item--9 { margin-right: 1%; width: 32%; } .grid.normal-grid.sp-grid1 .img-center { text-align: center; } .grid.normal-grid.sp-grid1 .img-center img { width: 60%; } } .article-content .grid.inner-grid { padding-bottom: 0; } .article-content .grid.inner-grid .grid__item { margin-bottom: 0; } .normal-grid { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; } .brand-story { display: table; position: relative; } .brand-story .expand { position: relative; top: -22px; max-height: 93px; overflow: hidden; transition: 1.2s; } .brand-story .expand:before { content: ""; position: absolute; bottom: -0.8rem; width: 100%; height: 80%; z-index: 10; /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#ffffff+0,ffffff+66&0+1,1+66 */ /* FF3.6-15 */ /* Chrome10-25,Safari5.1-6 */ background: linear-gradient(to bottom, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 1%, rgb(255, 255, 255) 66%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */ pointer-events: none; transition: 0.2s; } .brand-story input { visibility: hidden; } .brand-story label { display: block; position: absolute; bottom: -0.8rem; left: 0; z-index: 10; cursor: pointer; text-transform: uppercase; } .brand-story label:before { padding: 3px; border-radius: 4px; content: "続きを読む"; display: inline-block; background-image: linear-gradient(to right, currentColor 100%, currentColor 100%); background-position: 0 100%; /* 下端 */ background-repeat: no-repeat; background-size: 100% 1px; /* 幅100%、高さ2pxの線 */ font-size: 12px; } .brand-story input:checked + label:before { content: "閉じる"; } .brand-story input[type=checkbox]:checked ~ .expand { max-height: 2200px; } .brand-story input[type=checkbox]:checked ~ .expand:before { opacity: 0; } .brand-story input[type=checkbox]:checked ~ .expand:after { opacity: 0; } .article-content .wrap-mxw640 { margin: 0 auto; max-width: 640px; } .border-all, .border-frame { border-width: 1px; border-style: solid; } .border-frame .inner { padding: 0 22px 22px 22px; } .border-frame .inner .title-m, .border-frame .inner > p { margin-top: 22px; } .border-frame .inner .title-m.mgt0 { margin-top: 0; } .border-frame hr { margin: 13px 0; border-width: 1px 0 0 0; border-style: solid; } .flex-grid { margin: 22px 0 0 0; padding: 0; display: flex; } .flex-grid li { float: none; } .flex-grid.reverse-col li:first-child { order: 2; } .flex-grid.reverse-col li:nth-child(2) { order: 1; } .flex-grid.item-center li { display: flex; flex-wrap: wrap; align-items: center; align-content: center; } @media screen and (max-width: 480px) { .flex-grid { flex-wrap: wrap; width: 100%; } .flex-grid li { margin-right: 0 !important; width: 100% !important; } .flex-grid li:nth-child(n+2) { margin-top: 13px; } .flex-grid.reverse-col li:first-child { order: 1; } .flex-grid.reverse-col li:nth-child(2) { order: 2; } } /* * form */ .c-must { font-weight: normal; color: #a20303; } .c-form__unit { font-size: 13px; } .p-contactTarget { width: 100%; } .p-contactTarget h2 { margin-top: 0; background-color: #171717; color: #fff; } .p-form .c-note { font-size: 10px; } @media screen and (min-width: 768px) { .p-form .c-note { font-size: 12px; } } .p-formProgress { margin-bottom: 35px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; -moz-column-gap: 2%; column-gap: 2%; } .p-formProgress li { padding: 8px; border: 1px solid #fff; position: relative; width: 32%; font-size: 13px; text-align: center; opacity: 0.6; } @media screen and (min-width: 768px) { .p-formProgress li { font-size: 15px; } } .p-formProgress li::after { content: ""; display: block; position: absolute; left: 0; bottom: -8px; width: 100%; height: 1px; background-color: #dddddd; } .p-formProgress li:nth-of-type(2) { border-left: none; border-right: none; } .p-formProgress li.is-active { position: relative; background-color: #fff; font-weight: bold; opacity: 1; } .p-formProgress li.is-active::after { content: ""; display: block; position: absolute; bottom: -8px; width: 100%; height: 1px; background-color: #1A1311; } @media screen and (min-width: 768px) { .p-loanTable, .p-formTable { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: flex-end; align-items: flex-start; } } .p-loanTable .c-must, .p-formTable .c-must { margin-top: 2px; margin-left: 8px; font-size: 11px; vertical-align: -0.2rem; } @media screen and (min-width: 768px) { .p-loanTable .c-must, .p-formTable .c-must { margin-top: 4px; } } .p-loanTable .c-form__unit, .p-formTable .c-form__unit { margin: 0 22px 0 8px; } .p-loanTable dt, .p-loanTable dd, .p-formTable dt, .p-formTable dd { margin: 0; } .p-loanTable dt, .p-formTable dt { margin-bottom: 8px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; font-size: 15px; } @media screen and (min-width: 768px) { .p-loanTable dt, .p-formTable dt { margin-right: 2%; padding-top: 10px; width: 30%; font-size: 15px; } } .p-loanTable .c-headingTitle__m, .p-formTable .c-headingTitle__m { padding: 0; border: none; } .p-loanTable dd, .p-formTable dd { margin-bottom: 22px; } @media screen and (min-width: 768px) { .p-loanTable dd, .p-formTable dd { margin-bottom: 35px; width: 68%; } } .p-loanTable dd p, .p-formTable dd p { margin-bottom: 0; font-size: 13px; } .p-loanTable dd:last-of-type, .p-formTable dd:last-of-type { margin-bottom: 0; } .p-loanTable dd.has-radio, .p-formTable dd.has-radio { padding-top: 8px; } @media screen and (min-width: 768px) { .p-loanTable.-form--confirm, .p-formTable.-form--confirm { display: flex; flex-wrap: wrap; } } .p-loanTable.-form--confirm dt, .p-loanTable.-form--confirm dd, .p-formTable.-form--confirm dt, .p-formTable.-form--confirm dd { line-height: 1.6; font-size: 13px; } @media screen and (min-width: 768px) { .p-loanTable.-form--confirm dt, .p-loanTable.-form--confirm dd, .p-formTable.-form--confirm dt, .p-formTable.-form--confirm dd { font-size: 15px; } } .p-loanTable.-form--confirm dt, .p-formTable.-form--confirm dt { font-size: 14px; font-weight: bold; } @media screen and (min-width: 768px) { .p-loanTable.-form--confirm dt, .p-formTable.-form--confirm dt { padding-top: 0; margin-right: 2%; width: 30%; font-size: 15px; } } @media screen and (min-width: 768px) { .p-loanTable.-form--confirm dd, .p-formTable.-form--confirm dd { padding-top: 0; width: 68%; } } .c-form__input { margin: 0; padding: 11px 11px 9px 11px; border-radius: 0; border: 1px solid #dcdcdc; width: 100%; background-color: #F4F4F4; font-size: 13px; outline: none; -webkit-appearance: none; -moz-appearance: none; appearance: none; } @media screen and (min-width: 768px) { .c-form__input { font-size: 15px; } } .c-form__input::-moz-placeholder { color: #171717; opacity: 0.4; } .c-form__input::placeholder { color: #171717; opacity: 0.4; } .c-user__name { max-width: 320px; } .c-user__phone { max-width: 70px; text-align: center; } .c-user__post { max-width: 70px; text-align: center; } .c-user__address { max-width: 480px; } .c-user__mail { max-width: 480px; } .c-user__context { height: 150px; } @media screen and (min-width: 768px) { .c-user__context { height: 100px; } } .c-radioBox { -moz-appearance: none; appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 1px solid #999; border-radius: 50%; background-color: #F4F4F4; position: relative; vertical-align: middle; margin-right: 6px; cursor: pointer; transition: border-color 0.2s; } .c-radioBox:checked { border-color: #333; } .c-radioBox:checked::before { content: ""; position: absolute; top: 4px; left: 4px; width: 8px; height: 8px; background-color: #333; border-radius: 50%; } label[for^=m-], label[for^=h-] { display: inline-block; margin-right: 1.2em; cursor: pointer; font-size: 13px; line-height: 1.5; vertical-align: middle; } @media screen and (min-width: 768px) { label[for^=m-], label[for^=h-] { font-size: 15px; } } .c-checkBox { -moz-appearance: none; appearance: none; -webkit-appearance: none; width: 18px; height: 18px; border: 1px solid #999; border-radius: 0; background-color: #F4F4F4; position: relative; vertical-align: middle; margin-right: 6px; cursor: pointer; transition: background-color 0.2s, border-color 0.2s; } .c-checkBox:checked { border-color: #333; background-color: #333; } .c-checkBox:checked::before { content: ""; position: absolute; top: 2px; left: 5px; width: 4px; height: 9px; border: solid #fff; border-width: 0 2px 2px 0; transform: rotate(45deg); } label[for=agree-btn] { font-size: 13px; line-height: 1.5; cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; vertical-align: middle; } @media screen and (min-width: 768px) { label[for=agree-btn] { font-size: 15px; } } .agreementCheck { margin: 0 0 35px 0; text-align: center; } .c-input__select { width: auto; max-width: 320px; padding: 8px 28px 8px 13px; font-size: 13px; line-height: 1.4; color: #333; background-color: #F4F4F4; border: 1px solid #dcdcdc; border-radius: 0; appearance: none; -webkit-appearance: none; -moz-appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg viewBox='0 0 10 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23999'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 1em center; background-size: 10px 6px; cursor: pointer; transition: border-color 0.2s ease, box-shadow 0.2s ease; } @media screen and (min-width: 768px) { .c-input__select { font-size: 15px; } } .c-input__select:focus { border-color: #666; outline: none; box-shadow: 0 0 0 2px rgba(100, 100, 255, 0.2); } .c-form__error { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; align-items: flex-start; } .c-form__error .c-form__input { background-color: #fffddc; } .c-form__error br { display: none; } .c-form__error-msg, .err-msg { padding: 3px; border-radius: 4px; position: relative; display: inline-block; color: #a20303; font-size: 10px; } .c-form__error-msg::before, .err-msg::before { content: "※"; } .error .c-form__input, .error .c-input__select { border: 1px solid #a20303; } .agreementCheck + .err-msg, .agreementCheck + .c-form__error-msg { margin-bottom: 22px; width: 100%; font-size: 13px; text-align: center; } .c-form__action { margin-top: 35px; } .p-agreementText { margin: 35px 0; padding: 22px; border: 1px solid #dcdcdc; height: 200px; width: 100%; background-color: #F4F4F4; box-sizing: border-box; overflow: auto; } .p-agreementText .simple-table th, .p-agreementText .simple-table td { padding: 13px; } .p-agreementText .simple-table thead th { font-size: 0.875rem; } .p-formAction { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; justify-content: center; row-gap: 22px; } .p-loanSimulator { position: fixed; top: 0; left: 0; z-index: 10000; display: none; width: 100%; height: 100%; background-color: rgba(0, 0, 0, 0.7); opacity: 0; } .p-loanSimulator.is-show { display: flex; align-items: center; justify-content: center; opacity: 1; } .p-loanSimulatorInner { margin: 92px 13px; padding: 35px 22px; border-radius: 8px; position: relative; width: 100%; max-width: 768px; height: 73svh; background-color: #fff; overflow-y: scroll; } @media screen and (min-width: 768px) { .p-loanSimulatorInner { margin: 0 auto; padding: 56px; height: 80svh; } } .p-loanSimulator .c-closeButton { margin-top: -35px; position: fixed; width: calc(100% - 70px); text-align: right; } @media screen and (min-width: 768px) { .p-loanSimulator .c-closeButton { max-width: 656px; } } .p-loanSimulator .c-closeButton span { border: 1px solid #1A1311; border-radius: 50%; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; display: inline-flex; width: 40px; height: 40px; background-color: #fff; } @media screen and (min-width: 768px) { .p-loanSimulator .c-closeButton span { width: 48px; height: 48px; } } .p-loanSimulator .c-closeButton span::before, .p-loanSimulator .c-closeButton span::after { content: ""; display: block; width: 30px; height: 1px; background-color: #1A1311; } .p-loanSimulator .c-closeButton span::before { transform: translate(4px, 19px) rotate(45deg); } @media screen and (min-width: 768px) { .p-loanSimulator .c-closeButton span::before { transform: translate(8px, 23px) rotate(45deg); } } .p-loanSimulator .c-closeButton span::after { transform: translate(4px, 0px) rotate(-45deg); } @media screen and (min-width: 768px) { .p-loanSimulator .c-closeButton span::after { transform: translate(8px, 0px) rotate(-45deg); } } .c-loan__price { display: inline-block; max-width: 280px; } /* * shop info */ .p-shopInfoContent { padding-bottom: 35px; } @media screen and (min-width: 768px) { .p-shopInfoContent { padding-bottom: 56px; } } .p-newsHeading, .p-shopInfoHeading { margin-bottom: 9px; padding: 13px 0; } @media screen and (min-width: 768px) { .p-newsHeading, .p-shopInfoHeading { padding: 22px 0; } } .p-newsHeading .c-articleStatus, .p-shopInfoHeading .c-articleStatus { margin-top: 0; } .p-newsHeading .c-articleTitle, .p-shopInfoHeading .c-articleTitle { margin-bottom: 8px; font-size: 20px; } @media screen and (min-width: 768px) { .p-newsHeading .c-articleTitle, .p-shopInfoHeading .c-articleTitle { margin-bottom: 13px; font-size: 28px; } } .p-newsArticle .p-articleContent img, .p-shopInfoContent img { margin-bottom: 22px; } @media screen and (min-width: 768px) { .p-newsArticle .p-articleContent img, .p-shopInfoContent img { margin-bottom: 35px; } } .p-newsArticle .p-articleContent h1, .p-newsArticle .p-articleContent h2, .p-newsArticle .p-articleContent h3, .p-shopInfoContent h1, .p-shopInfoContent h2, .p-shopInfoContent h3 { line-height: 1.6; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 500; } .p-newsArticle .p-articleContent h1, .p-shopInfoContent h1 { margin-bottom: 22px; font-size: 20px; } @media screen and (min-width: 768px) { .p-newsArticle .p-articleContent h1, .p-shopInfoContent h1 { margin-bottom: 35px; font-size: 24px; } } .p-newsArticle .p-articleContent h2, .p-shopInfoContent h2 { margin-bottom: 22px; font-size: 18px; } @media screen and (min-width: 768px) { .p-newsArticle .p-articleContent h2, .p-shopInfoContent h2 { margin-bottom: 35px; font-size: 20px; } } .p-newsArticle .p-articleContent h3, .p-shopInfoContent h3 { margin-bottom: 13px; font-size: 16px; } @media screen and (min-width: 768px) { .p-newsArticle .p-articleContent h3, .p-shopInfoContent h3 { margin-bottom: 22px; font-size: 18px; } } .p-newsArticle .p-articleContent p, .p-shopInfoContent p { margin-bottom: 22px; line-height: 2; font-size: 14px; } @media screen and (min-width: 768px) { .p-newsArticle .p-articleContent p, .p-shopInfoContent p { margin-bottom: 35px; font-size: 15px; } } .p-newsArticle .p-articleContent p a, .p-shopInfoContent p a { position: relative; line-height: 1.6; display: inline-block; } .p-newsArticle .p-articleContent p a::after, .p-shopInfoContent p a::after { content: ""; display: block; position: absolute; bottom: -2px; width: 100%; height: 1px; background-color: #1A1311; } .p-newsArticle .p-articleContent table, .p-shopInfoContent table { margin-bottom: 22px; } @media screen and (min-width: 768px) { .p-newsArticle .p-articleContent table, .p-shopInfoContent table { margin-bottom: 35px; } } .p-newsArticle .p-articleContent table th, .p-newsArticle .p-articleContent table td, .p-shopInfoContent table th, .p-shopInfoContent table td { font-size: 14px; } @media screen and (min-width: 768px) { .p-newsArticle .p-articleContent table th, .p-newsArticle .p-articleContent table td, .p-shopInfoContent table th, .p-shopInfoContent table td { font-size: 15px; } } .p-contentsNavTitle { margin-bottom: 13px; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 500; font-size: 16px; text-align: center; } @media screen and (min-width: 768px) { .p-contentsNavTitle { margin-bottom: 22px; font-size: 18px; } } .p-articleSectionHeading { padding: 13px; background: #413D3C; background: linear-gradient(0deg, rgb(65, 61, 60) 0%, rgb(26, 19, 17) 100%); color: #fff; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 500; font-size: 18px; text-align: center; } @media screen and (min-width: 768px) { .p-articleSectionHeading { padding: 22px; font-size: 20px; } } .p-arcticleSectionContent { margin: 22px 0; overflow: hidden; } @media screen and (min-width: 768px) { .p-arcticleSectionContent { margin: 35px 0; } } .p-arcticleSectionContent h2, .p-arcticleSectionContent h3 { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 500; } .p-arcticleSectionContent h2 { margin-bottom: 13px; font-size: 20px; } @media screen and (min-width: 768px) { .p-arcticleSectionContent h2 { margin-bottom: 22px; font-size: 24px; } } .p-arcticleSectionContent p { margin-bottom: 22px; line-height: 2; font-size: 14px; } @media screen and (min-width: 768px) { .p-arcticleSectionContent p { font-size: 15px; } } .p-arcticleSectionContent .c-basicImg { margin-bottom: 22px; } @media screen and (min-width: 768px) { .p-arcticleSectionContent .c-basicImg { margin-bottom: 35px; max-width: 404px; } } @media screen and (min-width: 768px) { .p-arcticleSectionContent .c-basicImg.-img--left { margin-right: 35px; float: left; } } .p-loanModelList { margin-bottom: 35px; border: 1px solid #EFEFEF; } @media screen and (min-width: 768px) { .p-loanModelList { margin-bottom: 56px; } } .p-articletLoanSim { padding: 22px; background: linear-gradient(0deg, rgb(255, 255, 255) 0%, rgb(216, 216, 216) 100%); text-align: center; } @media screen and (min-width: 768px) { .p-articletLoanSim { padding: 35px 0; } } .p-articletLoanSim h2, .p-articletLoanSim h3 { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 500; } .p-articletLoanSim h2 { margin-bottom: 13px; line-height: 1; font-size: 20px; } @media screen and (min-width: 768px) { .p-articletLoanSim h2 { font-size: 24px; } } .p-articletLoanSim h2 span { font-size: 35px; } @media screen and (min-width: 768px) { .p-articletLoanSim h2 span { font-size: 50px; } } .p-articletLoanSim h3 { margin-bottom: 8px; font-size: 14px; } @media screen and (min-width: 768px) { .p-articletLoanSim h3 { font-size: 15px; } } .p-articletLoanSim p { font-size: 13px; } .p-loanModelSample { padding: 0 22px 22px 22px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; -moz-column-gap: 4.3209876543%; column-gap: 4.3209876543%; row-gap: 13px; } @media screen and (min-width: 768px) { .p-loanModelSample { padding: 0 35px 35px 35px; } } .p-loanModelSample::after { margin-top: 22px; content: ""; display: block; width: 100%; height: 1px; background-color: #1A1311; } @media screen and (min-width: 768px) { .p-loanModelSample::after { margin-top: 35px; } } .p-loanModelSample:last-of-type::after { display: none; } .p-loanModelSample h2, .p-loanModelSample h3 { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 500; } .p-loanModelSample .c-loanModelThumb { text-align: center; } @media screen and (min-width: 768px) { .p-loanModelSample .c-loanModelThumb { width: 39.012345679%; } } .p-loanModelSample .c-loanModelThumb img { width: 70%; } @media screen and (min-width: 768px) { .p-loanModelSample .c-loanModelThumb img { width: 100%; } } @media screen and (min-width: 768px) { .p-loanModelSample .c-loanModelCol { width: 56.6666666667%; } } .p-loanModelSample .c-loanModelTitle { margin-bottom: 13px; font-size: 20px; text-align: center; } @media screen and (min-width: 768px) { .p-loanModelSample .c-loanModelTitle { margin-bottom: 22px; font-size: 22px; text-align: left; } } .p-loanModelSample .c-itemMeta { margin-bottom: 13px; } .p-loanModelSample .c-itemMeta a { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; } .p-loanModelSample .c-itemName { margin-bottom: 5px; font-size: 18px; text-align: center; } @media screen and (min-width: 768px) { .p-loanModelSample .c-itemName { font-size: 20px; text-align: left; } } .p-loanModelSample .c-itemRef { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-size: 12px; opacity: 1; text-align: center; } @media screen and (min-width: 768px) { .p-loanModelSample .c-itemRef { font-size: 13px; text-align: left; } } .p-loanModelSample .c-itemSpec { line-height: 2; font-size: 13px; } .p-loanModelSample .c-itemPrice { margin-bottom: 22px; font-size: 18px; text-align: center; } @media screen and (min-width: 768px) { .p-loanModelSample .c-itemPrice { font-size: 20px; text-align: left; } } .p-loanModelSample .c-note { line-height: 1.8; font-size: 11px; } .p-loanModelSample .c-note.c-noteIndent { padding-left: 11px; text-indent: -11px; } .c-loanModelSummary { margin-bottom: 13px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; -moz-column-gap: 3.2679738562%; column-gap: 3.2679738562%; row-gap: 13px; } .c-loanModelSummary .c-loanModelTable { width: 100%; } @media screen and (min-width: 768px) { .c-loanModelSummary .c-loanModelTable { width: 38.3442265795%; } } .c-loanModelSummary .c-loanModalButton { width: 100%; } @media screen and (min-width: 768px) { .c-loanModelSummary .c-loanModalButton { width: 58.3877995643%; } } .c-loanModelTable { padding: 13px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; row-gap: 8px; background-color: #F4F4F4; } .c-loanModelTable dt, .c-loanModelTable dd { font-size: 13px; } .c-loanModelTable dt { margin-right: 8px; } @media screen and (min-width: 768px) { .c-loanModelTable dt { margin-right: 0; width: 4rem; } } .c-loanModelTable dd { margin-right: 22px; } @media screen and (min-width: 768px) { .c-loanModelTable dd { margin-right: 0; } } .c-loanModalButton { margin: 0 auto; padding: 13px; border: 1px solid #1A1311; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; justify-content: center; align-content: center; align-items: center; -moz-column-gap: 5px; column-gap: 5px; font-size: 13px; text-align: center; } @media screen and (min-width: 768px) { .c-loanModalButton { font-size: 14px; } } .c-loanModalButton img { width: 28px; } .p-itemBoxList { margin-bottom: 35px; border: 1px solid #EFEFEF; } @media screen and (min-width: 768px) { .p-itemBoxList { margin-bottom: 56px; } } .p-itemBox { padding: 22px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; -moz-column-gap: 4.3209876543%; column-gap: 4.3209876543%; } @media screen and (min-width: 768px) { .p-itemBox { padding: 35px; } } .p-itemBox::after { margin-top: 35px; margin-bottom: -35px; content: ""; display: block; width: 100%; height: 1px; background-color: #1A1311; } .p-itemBox:last-of-type::after { display: none; } .p-itemBoxImg { text-align: center; } @media screen and (min-width: 768px) { .p-itemBoxImg { width: 45.5555555556%; } } .p-itemBoxImg img { width: 80%; } @media screen and (min-width: 768px) { .p-itemBoxImg img { width: 100%; } } .p-itemBoxCol { width: 100%; } @media screen and (min-width: 768px) { .p-itemBoxCol { width: 50%; } } .p-itemBoxCol .c-itemBrand { margin-bottom: 5px; font-size: 12px; text-align: center; } @media screen and (min-width: 768px) { .p-itemBoxCol .c-itemBrand { font-size: 13px; text-align: left; } } .p-itemBoxCol .c-itemMeta { margin-bottom: 22px; } .p-itemBoxCol .c-itemMeta a { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; } .p-itemBoxCol .c-itemName { margin-bottom: 5px; font-size: 20px; text-align: center; } @media screen and (min-width: 768px) { .p-itemBoxCol .c-itemName { font-size: 22px; text-align: left; } } .p-itemBoxCol .c-itemRef { font-size: 12px; opacity: 1; text-align: center; } @media screen and (min-width: 768px) { .p-itemBoxCol .c-itemRef { font-size: 13px; text-align: left; } } .p-itemBoxCol .c-itemStatus { margin-bottom: 13px; } @media screen and (min-width: 768px) { .p-itemBoxCol .c-itemStatus { justify-content: flex-start; } } .p-itemBoxCol .c-itemSpec { margin-bottom: 22px; line-height: 2; font-size: 13px; } .p-itemBoxCol .c-itemPrice { margin-bottom: 22px; font-size: 16px; text-align: center; } @media screen and (min-width: 768px) { .p-itemBoxCol .c-itemPrice { font-size: 18px; text-align: left; } } .p-itemBoxCol .c-linkBox { width: 100%; font-size: 13px; text-align: center; } @media screen and (min-width: 768px) { .p-itemBoxCol .c-linkBox { width: auto; font-size: 14px; } } /* * shop */ .p-shopHero { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; } @media screen and (min-width: 768px) { .p-shopHeroImg { width: 56.25%; aspect-ratio: 3/2; overflow: hidden; } } .p-shopHeroImg img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-shopHeroCol { padding: 35px 22px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; justify-content: center; background-color: #1A1311; color: #fff; } @media screen and (min-width: 768px) { .p-shopHeroCol { padding: 56px; width: 43.75%; } } .p-shopHeroCol .c-shopName { font-weight: 400; font-size: 20px; } @media screen and (min-width: 768px) { .p-shopHeroCol .c-shopName { font-size: 28px; } } .p-shopHeroCol .c-shopAddress { margin-top: 13px; font-size: 12px; } @media screen and (min-width: 768px) { .p-shopHeroCol .c-shopAddress { font-size: 13px; } } .p-shopHeroCol .c-tel { margin: 22px 0; font-size: 16px; } @media screen and (min-width: 768px) { .p-shopHeroCol .c-tel { margin: 35px 0; font-size: 18px; } } .p-shopHeroCol .c-tel .c-link::after { background-color: #fff; } .p-shopHeroCol .c-shopTime { font-size: 12px; } @media screen and (min-width: 768px) { .p-shopHeroCol .c-shopTime { font-size: 13px; } } .p-shopHeroCol .p-contentsNavList { margin-top: 35px; justify-content: flex-start; } @media screen and (min-width: 768px) { .p-shopHeroCol .p-contentsNavList { margin-top: 56px; row-gap: 35px; max-width: 400px; } } .p-shopHeroCol .p-contentsNavList a::after { background-color: #fff; } .p-shopBrands { border-top: 1px solid #1A1311; } .p-shopBrandsBlock { padding: 13px 0; border-bottom: 1px solid #1A1311; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; } .p-shopBrandsTitle { margin-bottom: 22px; padding: 13px; display: block; width: 100%; background-color: #F4F4F4; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 500; font-size: 16px; } @media screen and (min-width: 768px) { .p-shopBrandsTitle { margin-bottom: 0; padding: 22px; width: 253px; font-size: 18px; } } .p-shopBrandsList { padding: 0 13px 13px 13px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; -moz-column-gap: 2%; column-gap: 2%; row-gap: 22px; width: 100%; } @media screen and (min-width: 768px) { .p-shopBrandsList { padding: 22px 35px; -moz-column-gap: 44px; column-gap: 44px; row-gap: 35px; width: calc(100% - 253px); } } .p-shopBrandsList.-default .p-shopBrandsListCol { width: 100%; } .p-shopBrandsListCol { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; display: inline-flex; width: 48%; flex-direction: column; row-gap: 3px; } @media screen and (min-width: 768px) { .p-shopBrandsListCol { row-gap: 8px; width: auto; } } .p-shopBrandsListCol span:first-child { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 500; font-size: 14px; } @media screen and (min-width: 768px) { .p-shopBrandsListCol span:first-child { font-size: 16px; } } .p-shopBrandsListCol span:nth-child(2) { font-size: 10px; transform: scale(0.8); transform-origin: 0 0; } @media screen and (min-width: 768px) { .p-shopBrandsListCol span:nth-child(2) { transform: scale(1); } } .p-shopDetail { margin-bottom: 35px; padding: 35px 0 0 0; border-top: 1px solid #1A1311; border-bottom: 1px solid #1A1311; } @media screen and (min-width: 768px) { .p-shopDetail { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: row; -moz-column-gap: 4.7945205479%; column-gap: 4.7945205479%; row-gap: 56px; } } .p-shopDetailBlock { margin-bottom: 35px; } @media screen and (min-width: 768px) { .p-shopDetailBlock { margin-bottom: 56px; } } @media screen and (min-width: 768px) { .p-shopDetailBlock:first-of-type { margin-bottom: 0; } } .p-shopDetailBlock:nth-of-type(2) { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; row-gap: 35px; } @media screen and (min-width: 768px) { .p-shopDetailBlock:nth-of-type(2) { margin-bottom: 0; row-gap: 56px; } } @media screen and (min-width: 768px) { .p-shopDetailBlock:nth-of-type(odd) { width: 33.3047945205%; } } @media screen and (min-width: 768px) { .p-shopDetailBlock:nth-of-type(even) { width: 61.9006849315%; } } .p-shopDetailBlock .c-basicHeading { margin-bottom: 22px; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-weight: 500; text-align: left; } .p-shopDetailBlock p { font-size: 13px; } @media screen and (min-width: 768px) { .p-shopDetailBlock p { font-size: 14px; } } @media screen and (min-width: 768px) { .p-shopDetailBlock .p-shopDataCol:first-of-type { width: 60%; } } @media screen and (min-width: 768px) { .p-shopDetailBlock .p-shopDataCol:nth-of-type(2) { width: 40%; } } .p-shopDataCol .c-credit { margin-top: 35px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; align-items: flex-start; -moz-column-gap: 35px; column-gap: 35px; row-gap: 22px; } .p-shopDataCol .c-credit .c-paymentLogo { width: 268px; } .p-shopDataCol .c-credit .c-jptaxLogo { width: 152px; } .p-shopAside { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; align-items: center; row-gap: 35px; } .p-shopAside .p-sns .c-title { margin-bottom: 13px; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-size: 12px; text-align: center; } .p-shopAside .p-snsLinks { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; -moz-column-gap: 22px; column-gap: 22px; } .p-shopAside .p-snsLinks a { display: inline-block; width: 30px; } .p-imgGallery .swiper-slide img { width: 100%; height: auto; } .p-imgGalleryThumb { margin-top: 13px; } .p-imgGalleryThumb .swiper-slide { width: 17.7377892031% !important; opacity: 0.4; } .p-imgGalleryThumb .swiper-slide.swiper-slide-thumb-active { opacity: 1; } .p-imgGalleryThumb.-thumb--square .swiper-slide { aspect-ratio: 1/1; overflow: hidden; } .p-imgGalleryThumb.-thumb--square .swiper-slide img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-voiceList { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; -moz-column-gap: 3.1775700935%; column-gap: 3.1775700935%; row-gap: 35px; } @media screen and (min-width: 768px) { .p-voiceList { row-gap: 56px; } } .p-voiceListCol { width: 48.4112149533%; } @media screen and (min-width: 768px) { .p-voiceListCol { width: 31.214953271%; } } .p-voiceList .c-articleImg img { width: 100%; height: auto; } .p-voiceList .c-articleImg figcaption { margin-top: 13px; font-weight: bold; font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; font-size: 13px; } @media screen and (min-width: 768px) { .p-voiceList .c-articleImg figcaption { font-size: 15px; } } .p-basicArticle { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; justify-content: center; box-shadow: 0 0 6px rgba(0, 0, 0, 0.12); } .p-basicArticle .c-basicImg { aspect-ratio: 4/3; overflow: hidden; } @media screen and (min-width: 768px) { .p-basicArticle .c-basicImg { width: 60%; } } .p-basicArticle .c-basicImg img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-basicArticle .c-basicCol { padding: 22px; width: 100%; background-color: #F4F4F4; } @media screen and (min-width: 768px) { .p-basicArticle .c-basicCol { padding: 56px; width: 40%; } } .p-basicArticle .c-basicCol .c-basicHeading { margin-bottom: 0; text-align: left; } .p-basicArticle .c-basicCol .c-update { margin-top: 13px; display: inline-block; font-size: 11px; } @media screen and (min-width: 768px) { .p-basicArticle .c-basicCol .c-update { font-size: 12px; } } .p-basicArticle .c-basicCol .c-context { margin-top: 35px; line-height: 2; font-size: 14px; } @media screen and (min-width: 768px) { .p-basicArticle .c-basicCol .c-context { font-size: 15px; } } /* * feature */ @media screen and (min-width: 768px) { .p-basicSection.-feature .l-container { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; -moz-column-gap: 5.46875%; column-gap: 5.46875%; } } .p-featureImg { margin-bottom: 35px; } @media screen and (min-width: 768px) { .p-featureImg { margin-bottom: 0; width: 44.921875%; } } @media screen and (min-width: 768px) { .p-featureImg.-img--right { order: 1; } } .p-featureCol { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; flex-direction: column; justify-content: flex-start; align-content: center; align-items: center; row-gap: 22px; } @media screen and (min-width: 768px) { .p-featureCol { width: 49.609375%; row-gap: 35px; } } .p-featureCol .c-featureLogo, .p-featureCol .c-featureInfo { width: 100%; text-align: center; } .p-featureCol .c-featureInfo { line-height: 2; font-size: 14px; } @media screen and (min-width: 768px) { .p-featureCol .c-featureInfo { font-size: 16px; } } .p-featureCol .c-featureInfo a { line-height: 1.6; display: inline-block; } .p-featureCol p { font-size: 13px; } @media screen and (min-width: 768px) { .p-featureCol p { font-size: 14px; } } .p-featureCol .c-linkBox { font-size: 13px; } @media screen and (min-width: 768px) { .p-featureCol .c-linkBox { font-size: 14px; } } /* * concept */ #concept { position: relative; background-color: transparent; } #concept:before, #concept:after { content: ""; display: block; position: absolute; top: 0; z-index: -1; width: 50%; height: 100%; } #concept:before { left: 0; background-color: #e1e1e1; } #concept:after { left: 50%; background-color: #f2f2f2; } #concept #contents { overflow: hidden; } .title-en { font-family: "Open Sans", sans-serif; font-style: italic; font-weight: 300; } #concept-heading { margin-bottom: 13px; position: relative; height: 640px; background-color: #000; text-align: center; overflow: hidden; } @media screen and (max-width: 1024px) { #concept-heading { padding-top: 65.83333%; height: auto; } } #concept-heading .catch { margin-top: -4.125rem; position: absolute; top: 50%; left: 0; width: 100%; } #concept-heading .catch h1 { color: #fff; } #concept-heading .catch .title-en { font-size: 4.125rem; } #concept-heading .catch .title-ja { font-size: 1.125rem; } #concept-heading .catch .title-ja:before { margin: 35px auto; content: ""; display: block; width: 44px; height: 1px; background-color: #fff; } #concept-heading .catch .title-sub { margin-top: 30px; display: inline-block; line-height: 1.4; font-size: 1.125rem; } .concept-main-bg { margin-top: -320px; position: absolute; top: 50%; left: 0; width: 110%; height: auto; opacity: 0; animation-play-state: paused; transform: scale(1.1); -moz-transition: 4s cubic-bezier(0.165, 0.84, 0.44, 1); -webkit-transition: 4s cubic-bezier(0.165, 0.84, 0.44, 1); -o-transition: 4s cubic-bezier(0.165, 0.84, 0.44, 1); -ms-transition: 4s cubic-bezier(0.165, 0.84, 0.44, 1); } #concept .video_wrapper { margin: 56px 0; } @media screen and (max-width: 768px) { #concept .video_wrapper { margin: 22px 0; } } .load .concept-main-bg { opacity: 0.6; transform: scale(1); } #concept-heading .breadcrumb-nav { position: absolute; top: 35px; z-index: 10; width: 100%; } #concept-heading .breadcrumb-nav li, #concept-heading .breadcrumb-nav li a, #concept-heading .breadcrumb-nav li:after { color: #fff; } @media screen and (max-width: 1024px) { .concept-main-bg { margin-top: 0; top: 0; left: 0; } } @media screen and (max-width: 768px) { #concept-heading .catch .title-en { font-size: 2.1875rem; } #concept-heading .catch .title-ja:before { margin: 22px auto; width: 22px; } #concept-heading .catch .title-ja, #concept-heading .catch .title-sub { font-size: 0.875rem; } #concept-heading .catch .title-sub { margin-top: 22px; } #concept-heading .breadcrumb-nav { top: 22px; } } @media screen and (max-width: 480px) { #concept-heading .catch .title-ja, #concept-heading .catch .title-sub { font-size: 0.82rem; } } .concept-section { margin: 0 auto 13px auto; padding: 56px 56px 21px 56px; max-width: 980px; position: relative; background-color: #fff; } .concept-section .sec-img { position: absolute; top: -35px; width: 63.97959%; } .concept-section .sec-img img { width: 100%; height: auto; } .concept-section.image-left .sec-img { left: -9.16666%; } .concept-section.image-right .sec-img { right: -9.16666%; } .concept-section .column { width: 39.38775%; overflow: hidden; background-color: #fff; } .concept-section.image-left .column { float: right; } .concept-section.image-right .column { float: left; } .concept-section .column h2 { margin-bottom: 35px; } .concept-section .column h2 span { display: inline-block; line-height: 1.1785; font-size: 3.5rem; word-break: normal; word-wrap: break-word; } .concept-section .column h3 { margin-bottom: 35px; font-size: 1.125rem; font-weight: bold; } .concept-section .column p { margin-bottom: 35px; line-height: 1.86; font-size: 0.875rem; } @media screen and (max-width: 768px) { .concept-section { margin: 0 3% 13px 3%; padding: 51% 22px 22px 22px; } .concept-section .sec-img { top: 0; width: 50%; } .concept-section.image-left .sec-img { left: 0; } .concept-section.image-right .sec-img { right: 0; } .concept-section.image-left .sec-img, .concept-section.image-right .sec-img { left: 0; right: auto; } .concept-section .column { z-index: 20; background-color: transparent; } .concept-section.image-left .column, .concept-section.image-right .column { float: none; width: 100%; } .concept-section .column h2, .concept-section .column h3 { margin-bottom: 22px; } .concept-section .column h2 { position: absolute; top: 18%; right: 22px; display: inline-block; width: 40%; } .concept-section .column h2 span { font-size: 2.375rem; } .concept-section .column h3 { font-size: 1rem; } .concept-section .column p { margin-bottom: 22px; } } @media screen and (max-width: 480px) { .concept-section { padding: 55% 22px 22px 22px; } .concept-section .column h2 { top: 10%; width: 40%; } .concept-section .column h2 span { font-size: 1.875rem; } } .concept-category .container { max-width: 980px; } .concept-category .category-list { display: table; } .concept-category .category-list li { padding: 56px; float: left; display: table-cell; background-color: #fff; text-align: center; vertical-align: middle; } .concept-category .category-list li a { margin: 0 auto; padding: 13px; display: block; max-width: 212px; background-color: #1b1918; color: #fff; line-height: 1.5; font-size: 0.875rem; font-weight: bold; } .concept-category .category-list.grid-3 { width: 101.32653%; } .concept-category .category-list.grid-3 li { margin-right: 1.30916%; margin-bottom: 13px; width: 32.02416%; } .concept-category .category-list.grid-2 { width: 101.22448%; } .concept-category .category-list.grid-2 li { margin-right: 1.20967%; margin-bottom: 13px; width: 48.79032%; } .concept-category .category-list li .title-en { font-size: 2.75rem; } .concept-category .category-list li .title-ja { margin-bottom: 22px; display: block; font-size: 1rem; font-weight: bold; } .concept-category .category-list li .title-ja:before { margin: 22px auto; content: ""; display: block; width: 34px; height: 1px; background-color: #333; } @media screen and (max-width: 768px) { .concept-category { margin: 0 3%; } .concept-category .category-list li { padding: 22px; } .concept-category .category-list li .title-en { font-size: 1.875rem; } .concept-category .category-list li .title-ja:before { margin: 18px auto; width: 22px; } .concept-category .category-list li .title-ja { margin-bottom: 18px; font-size: 0.82rem; } .concept-category .category-list li a { padding: 8px; width: 50%; font-size: 0.75rem; } .concept-category .category-list.grid-3 { width: 104%; } .concept-category .category-list.grid-3 li:first-child { width: 100%; } .concept-category .category-list.grid-3 li:nth-child(2), .concept-category .category-list.grid-3 li:nth-child(3) { margin-right: 4%; width: 46%; } .concept-category .category-list.grid-3 li:nth-child(2) a, .concept-category .category-list.grid-3 li:nth-child(3) a { width: 100%; } .concept-category .category-list.grid-2 { width: 100%; } .concept-category .category-list.grid-2 li { margin-right: 0; width: 100%; } } .concept-about { margin-bottom: 35px; padding: 35px 0; background-image: url(/images/concept/concept-about-bg.jpg); background-repeat: no-repeat; background-position: 50% 90%; background-size: 100% auto; } .concept-about-heading { margin-bottom: 35px; color: #fff; font-size: 2.75rem; text-align: center; } @media screen and (max-width: 480px) { .concept-about { margin: 0 0 22px 0; background-size: 200% auto; } .concept-about-heading { margin-bottom: 22px; font-size: 2.175rem; } } .concept-about .category-list li { background-color: rgba(255, 255, 255, 0.95); } #contents .animated { opacity: 0; animation-duration: 0.4s; animation-delay: 0.1s; } .mgb56 { margin-bottom: 56px; } /* * lang */ /********************************************************************************* lang > en, cn **********************************************************************************/ #lang .container { margin: 0 auto; max-width: 880x; position: relative; } @media screen and (max-width: 880px) { #lang .container { padding: 0 22px; } } #lang #site-lang-header { background-color: #1b1918; } #lang #site-lang-header a { transition: all 0.4s; } #lang #site-lang-header a:hover { opacity: 0.7; } #lang #site-lang-header .container { height: auto; } #lang #header-logo { padding-top: 22px; margin: 0 auto; position: static; width: 92px; } #lang #header-logo .logo__img img { filter: invert(98%) sepia(5%) saturate(418%) hue-rotate(279deg) brightness(116%) contrast(100%); height: auto; } @media screen and (max-width: 480px) { #lang #header-logo { margin: 0 auto; } } #lang #site-lang-header #back-btn { position: absolute; top: 35px; left: 13px; z-index: 10; } @media screen and (max-width: 480px) { #lang #site-lang-header #back-btn { top: 28px; } } #lang #site-lang-header #back-btn a { font-size: 0.82em; color: #fff; } #lang #site-lang-header #back-btn a.c-link::after { background-color: #fff; } #lang .img-full { width: 100%; height: auto; } #lang #header-nav-lang { padding: 13px 0; position: sticky; top: 0; left: 0; z-index: 100; background-color: #1b1918; } #lang #header-nav-lang ul { display: flex; flex-wrap: wrap; justify-content: center; } @media screen and (max-width: 480px) { #lang #header-nav-lang ul { margin-left: 16px; justify-content: flex-start; } } #lang #header-nav-lang ul li { margin: 0 9px; } @media screen and (max-width: 480px) { #lang #header-nav-lang ul li { margin: 0; } } #lang #header-nav-lang ul li a { padding: 13px; display: block; color: #fff; font-size: 15px; } #lang #header-contact { position: absolute; top: -3px; right: 13px; } #lang #header-contact a { display: flex; flex-wrap: wrap; flex-direction: column; align-items: center; } #lang #header-contact img { margin-bottom: 3px; width: 28px; height: 28px; filter: invert(100%) sepia(0%) saturate(9%) hue-rotate(234deg) brightness(104%) contrast(103%); } #lang #header-contact span { font-size: 12px; color: #fff; } #lang #header-visual { background-color: #1b1918; text-align: center; } #lang #header-visual img { width: 100%; max-width: 880x; height: auto; vertical-align: bottom; } #lang .base-content { padding: 0; overflow: hidden; } #lang .base-content .heading-xl { text-align: left; font-size: 22px; } @media screen and (max-width: 880x) { #lang .base-content { padding: 0 13px; } } .lang-shop-list { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; -moz-column-gap: 3.4693877551%; column-gap: 3.4693877551%; row-gap: 13px; overflow: hidden; } @media screen and (max-width: 480px) { .lang-shop-list { width: 100%; } } .lang-shop-list .list__cell { width: 48.2653061224%; } @media screen and (max-width: 480px) { .lang-shop-list .list__cell { width: 100%; } } .lang-shop-list .cell-thumb { margin-bottom: 13px; } .lang-shop-list .cell-thumb img { width: 100%; height: auto; } .lang-shop-list figcaption { padding: 0 13px; height: 35px; background-color: #1b1918; line-height: 35px; color: #fff; } #lang .base-content .heading-s { margin-bottom: 0; font-size: 1em; } #lang .base-content .heading-ib { display: inline-block; font-weight: bold; } .mgr22 { margin-right: 22px; } .lang-sns-list { position: fixed; left: 0; bottom: 56px; width: 100%; } .lang-sns-list ul { display: flex; flex-wrap: wrap; justify-content: flex-end; } @media screen and (max-width: 480px) { .lang-sns-list ul { margin-right: 13px; } } .lang-sns-list ul li { margin: 0 0 0 13px; } .lang-sns-list ul li a img { width: 48px; height: auto; } .watch-brand__default--list { margin-left: -2.390438247%; display: flex; flex-wrap: wrap; } .watch-brand__default--list li { margin-top: 2.390438247%; margin-left: 2.390438247%; width: 47.609561753%; transition: all 0.3s; } @media screen and (max-width: 480px) { .watch-brand__default--list li { width: 100%; } } .watch-brand__default--list li a { padding: 22px; display: flex; align-items: center; height: 100%; background-color: #323232; color: #fff; text-align: center; } @media screen and (max-width: 480px) { .watch-brand__default--list li a { padding: 13px; } } .watch-brand__default--list li img { width: 100%; height: auto; } .watch-brand__default--list li .thumb { padding: 0 22px; width: 42%; } .watch-brand__default--list li .column { margin-left: 3%; width: 55%; } .watch-brand__default--list li .logo { transform: scale(1.1); } .watch-brand__default--list li .name { margin-top: 22px; line-height: 1.3; font-size: 18px; font-family: "PT Serif", serif; word-wrap: break-word; } @media screen and (max-width: 480px) { .watch-brand__default--list li .name { margin-top: 8px; } } .watch-brand__default--list li .yomi { margin-top: 8px; line-height: 1.4; font-size: 12px; opacity: 0.6; } .watch-brand__default--list li:hover { transform: translateY(-13px); } /* * blog */ .p-blogCategoryNav { margin-bottom: 35px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; justify-content: center; -moz-column-gap: 2%; column-gap: 2%; } @media screen and (min-width: 768px) { .p-blogCategoryNav { margin-bottom: 0; position: absolute; right: 35px; top: 22px; flex-direction: column; row-gap: 13px; } } .p-blogCategoryNav .c-input__select { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; align-items: center; width: 49%; font-size: 10px; } @media screen and (min-width: 768px) { .p-blogCategoryNav .c-input__select { width: 100%; max-width: 204px; font-size: 12px; } } .p-blogList.-blogTop .p-articleCol:first-child { width: 100%; } .p-blogList.-blogTop .p-articleCol:first-child a { row-gap: 13px; } .p-blogList.-blogTop .p-articleCol:first-child .c-articleImg { width: 100%; } @media screen and (min-width: 768px) { .p-blogList.-blogTop .p-articleCol:first-child .c-articleImg { width: 41.8145956607%; } } .p-blogList.-blogTop .p-articleCol:first-child .c-articleContent { width: 100%; } @media screen and (min-width: 768px) { .p-blogList.-blogTop .p-articleCol:first-child .c-articleContent { width: 53.8461538462%; } } .p-blogList.-blogTop .p-articleCol:first-child .c-articleTag { font-size: 11px; } @media screen and (min-width: 768px) { .p-blogList.-blogTop .p-articleCol:first-child .c-articleTag { font-size: 12px; } } .p-blogList.-blogTop .p-articleCol:first-child .c-articleTitle { font-size: 16px; } @media screen and (min-width: 768px) { .p-blogList.-blogTop .p-articleCol:first-child .c-articleTitle { font-size: 20px; } } .c-basicCategoryLink { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; -moz-column-gap: 8px; column-gap: 8px; row-gap: 8px; } @media screen and (min-width: 768px) { .c-basicCategoryLink { -moz-column-gap: 13px; column-gap: 13px; row-gap: 13px; } } .c-basicCategoryLink li a { padding: 5px 8px; border-radius: 4px; border: 1px solid #dcdcdc; display: inline-block; background-color: #F4F4F4; font-size: 10px; } @media screen and (min-width: 768px) { .c-basicCategoryLink li a { font-size: 12px; } } .p-blogArticleHeading { margin-bottom: 35px; display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; } .p-blogArticleHeading .p-blogCategoryNav { margin: 13px; position: static; width: 100%; flex-direction: row; } @media screen and (min-width: 768px) { .p-blogArticleHeading .p-blogCategoryNav { margin: 22px; justify-content: flex-end; -moz-column-gap: 13px; column-gap: 13px; } } .p-blogArticleHeading .p-blogCategoryNav .c-input__select:first-child { max-width: 300px; } .p-blogArticleHeading .l-container { display: flex; flex-wrap: wrap; align-items: normal; align-content: normal; justify-items: normal; justify-content: normal; -moz-column-gap: 13px; column-gap: 13px; } @media screen and (min-width: 768px) { .p-blogArticleHeading .l-container { -moz-column-gap: 22px; column-gap: 22px; } } .p-blogArticleHeading .c-articleTag { padding: 5px 8px; border-radius: 4px; border: 1px solid #dcdcdc; display: inline-block; background-color: #F4F4F4; font-size: 10px; } @media screen and (min-width: 768px) { .p-blogArticleHeading .c-articleTag { font-size: 11px; } } .p-blogArticleHeading .c-articleTitle { margin-bottom: 8px; display: block; width: 100%; font-size: 20px; } @media screen and (min-width: 768px) { .p-blogArticleHeading .c-articleTitle { margin-bottom: 13px; font-size: 28px; } } .p-blogArticleHeading .c-articleAuthor { font-size: 10px; } @media screen and (min-width: 768px) { .p-blogArticleHeading .c-articleAuthor { font-size: 11px; } } .c-blogArticleHero { margin-bottom: 22px; aspect-ratio: 16/6; overflow: hidden; } .c-blogArticleHero img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .p-blogArticleContents { padding: 22px 0; } @media screen and (min-width: 768px) { .p-blogArticleContents { padding: 35px 0; } } .p-blogArticleContents img { height: auto; } .p-blogArticleContents h1, .p-blogArticleContents h2, .p-blogArticleContents h3, .p-blogArticleContents h4 { font-weight: bold; } .p-blogArticleContents h1, .p-blogArticleContents h2 { margin: 22px 0; } @media screen and (min-width: 768px) { .p-blogArticleContents h1, .p-blogArticleContents h2 { margin: 35px 0; } } .p-blogArticleContents h3, .p-blogArticleContents h4 { margin: 13px 0; } @media screen and (min-width: 768px) { .p-blogArticleContents h3, .p-blogArticleContents h4 { margin: 22px 0; } } .p-blogArticleContents h1 { font-size: 20px; } @media screen and (min-width: 768px) { .p-blogArticleContents h1 { font-size: 22px; } } .p-blogArticleContents h2 { font-size: 18px; } @media screen and (min-width: 768px) { .p-blogArticleContents h2 { font-size: 20px; } } .p-blogArticleContents h3 { font-size: 16px; } @media screen and (min-width: 768px) { .p-blogArticleContents h3 { font-size: 18px; } } .p-blogArticleContents h4 { font-size: 14px; } @media screen and (min-width: 768px) { .p-blogArticleContents h4 { font-size: 16px; } } .p-blogArticleContents p { margin: 13px 0; line-height: 1.8; font-size: 14px; } @media screen and (min-width: 768px) { .p-blogArticleContents p { margin: 22px 0; font-size: 15px; } } .p-blogArticleContents a:not(:has(img)) { position: relative; } .p-blogArticleContents a:not(:has(img))::after { content: ""; display: block; position: absolute; bottom: -2px; left: 0; width: 100%; height: 1px; background-color: #1A1311; } .p-articleBottomNav .p-articleCol { padding: 13px 13px 22px 13px; border-top: 1px solid #1A1311; background-color: #F4F4F4; } @media screen and (min-width: 768px) { .p-articleBottomNav .p-articleCol { padding: 22px; } } .c-articlePos { margin-bottom: 22px; display: block; width: 100%; font-weight: bold; font-size: 16px; } .c-articlePos.-next { text-align: right; } .kamine-ceo #content-heading .container { max-width: 1168px; } .kamine-ceo #content-heading .container .content-heading__img { text-align: center; } .kamine-ceo #content-heading .container .content-heading__img img { max-width: 1168px; } /* * color */ .u-color--attention { color: #b70052; } .u-color--white { color: #fff; } .u-color--white .c-link::after { background-color: #fff; } .u-link { color: #A97E4A; } .u-border--blue { border: 1px solid #F4F4F4; } .u-bg--white { background-color: #fff; } .u-bg--blue { background-color: #F4F4F4; color: #fff; } .u-bg--grayBlue { background-color: #1A1A54; color: #fff; } .u-bg--gladBrown { background: linear-gradient(0deg, rgb(244, 243, 243) 0%, rgb(26, 19, 17) 100%); } .u-bg--gladDarkBrown { background: linear-gradient(0deg, rgb(65, 61, 60) 0%, rgb(26, 19, 17) 100%); } .u-bg--lightGray { background-color: #F4F4F4; } /* * margin */ /* gap-size */ /* y-axis */ .u-mg__y--92 { margin-top: 56px; margin-bottom: 56px; } @media screen and (min-width: 768px) { .u-mg__y--92 { margin-top: 92px; margin-bottom: 92px; } } .u-mg__y--56 { margin-top: 35px; margin-bottom: 35px; } @media screen and (min-width: 768px) { .u-mg__y--56 { margin-top: 56px; margin-bottom: 56px; } } .u-mg__y--35 { margin-top: 22px; margin-bottom: 22px; } @media screen and (min-width: 768px) { .u-mg__y--35 { margin-top: 35px; margin-bottom: 35px; } } .u-mg__y--22 { margin-top: 13px; margin-bottom: 13px; } @media screen and (min-width: 768px) { .u-mg__y--22 { margin-top: 22px; margin-bottom: 22px; } } .u-mg__y--13 { margin-top: 8px; margin-bottom: 8px; } @media screen and (min-width: 768px) { .u-mg__y--13 { margin-top: 13px; margin-bottom: 13px; } } /* x-axis */ .u-mg__x--92 { margin-left: 56px; margin-right: 56px; } @media screen and (min-width: 980px) { .u-mg__x--92 { margin-left: 92px; margin-right: 92px; } } .u-mg__x--56 { margin-left: 35px; margin-right: 35px; } @media screen and (min-width: 980px) { .u-mg__x--56 { margin-left: 56px; margin-right: 56px; } } .u-mg__x--35 { margin-left: 22px; margin-right: 22px; } @media screen and (min-width: 768px) { .u-mg__x--35 { margin-left: 35px; margin-right: 35px; } } .u-mg__x--22 { margin-left: 13px; margin-right: 13px; } @media screen and (min-width: 768px) { .u-mg__x--22 { margin-left: 22px; margin-right: 22px; } } .u-mg__x--13 { margin-left: 8px; margin-right: 8px; } @media screen and (min-width: 768px) { .u-mg__x--13 { margin-left: 13px; margin-right: 13px; } } .u-mg__x--0 { margin-left: 0; margin-right: 0; } @media screen and (min-width: 768px) { .u-pcMg__x--35 { margin-left: 35px; margin-right: 35px; } } @media screen and (min-width: 768px) { .u-pcMg__x--22 { margin-left: 22px; margin-right: 22px; } } /* left */ .u-mg__l--92 { margin-left: 92px; } .u-mg__l--92 { margin-left: 56px; } .u-mg__l--35 { margin-left: 35px; } .u-mg__l--22 { margin-left: 22px; } .u-mg__l--13 { margin-left: 13px; } .u-mg__l--8 { margin-left: 8px; } /* bottom */ .u-mg__b--92 { margin-bottom: 56px; } @media screen and (min-width: 768px) { .u-mg__b--92 { margin-bottom: 92px; } } .u-mg__b--56 { margin-bottom: 35px; } @media screen and (min-width: 768px) { .u-mg__b--56 { margin-bottom: 56px; } } .u-mg__b--35 { margin-bottom: 22px; } @media screen and (min-width: 768px) { .u-mg__b--35 { margin-bottom: 35px; } } .u-mg__b--22 { margin-bottom: 13px !important; } @media screen and (min-width: 768px) { .u-mg__b--22 { margin-bottom: 22px !important; } } .u-mg__b--13 { margin-bottom: 8px !important; } @media screen and (min-width: 768px) { .u-mg__b--13 { margin-bottom: 13px !important; } } .u-mg__b--8 { margin-bottom: 8px !important; } /* top */ .u-mg__t--92 { margin-top: 92px; } .u-mg__t--56 { margin-top: 56px; } .u-mg__t--35 { margin-top: 35px; } .u-mg__t--22 { margin-top: 22px; } .u-mg__t--13 { margin-top: 13px; } .u-mg__t--8 { margin-top: 8px; } /* zero */ .u-mg__t--0 { margin-top: 0 !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--92 { padding-top: 56px; padding-bottom: 56px; } @media screen and (min-width: 768px) { .u-pd__y--92 { padding-top: 92px; padding-bottom: 92px; } } .u-pd__y--56 { padding-top: 35px; padding-bottom: 35px; } @media screen and (min-width: 768px) { .u-pd__y--56 { padding-top: 56px; padding-bottom: 56px; } } .u-pd__y--35 { padding-top: 22px; padding-bottom: 22px; } @media screen and (min-width: 768px) { .u-pd__y--35 { padding-top: 35px; padding-bottom: 35px; } } .u-pd__y--22 { padding-top: 13px; padding-bottom: 13px; } @media screen and (min-width: 768px) { .u-pd__y--22 { padding-top: 22px; padding-bottom: 22px; } } /* x-axis */ .u-pd__x--56 { padding-left: 35px; padding-right: 35px; } @media screen and (min-width: 980px) { .u-pd__x--56 { padding-left: 56px; padding-right: 56px; } } .u-pd__x--35 { padding-left: 22px; padding-right: 22px; } @media screen and (min-width: 768px) { .u-pd__x--35 { padding-left: 35px; padding-right: 35px; } } .u-pd__x--22 { padding-left: 13px; padding-right: 13px; } @media screen and (min-width: 768px) { .u-pd__x--22 { padding-left: 22px; padding-right: 22px; } } /* all */ .u-pd__a--56 { padding: 35px; } @media screen and (min-width: 768px) { .u-pd__a--56 { padding: 56px; } } .u-pd__a--35 { padding: 22px; } @media screen and (min-width: 768px) { .u-pd__a--35 { padding: 35px; } } .u-pd__a--22 { padding: 13px; } @media screen and (min-width: 768px) { .u-pd__a--22 { padding: 22px; } } .u-pd__a--13 { padding: 8px; } @media screen and (min-width: 768px) { .u-pd__a--13 { padding: 13px; } } /* top */ .u-pd__t--92 { padding-top: 92px; } .u-pd__t--56 { padding-top: 56px; } .u-pd__t--35 { padding-top: 35px; } .u-pd__t--22 { padding-top: 22px; } .u-pd__t--13 { padding-top: 13px; } .u-pd__t--8 { padding-top: 8px; } /* bottom */ .u-pd__b--92 { padding-bottom: 92px; } .u-pd__b--56 { padding-bottom: 56px; } .u-pd__b--35 { padding-bottom: 35px; } .u-pd__b--22 { padding-bottom: 22px; } .u-pd__b--13 { padding-bottom: 13px; } .u-pd__b--8 { padding-bottom: 8px; } /* right */ .u-pd__r--22 { padding-right: 22px; } .u-pd__r--13 { padding-right: 13px; } .u-pd__r--8 { padding-right: 8px; } /* left */ .u-pd__l--22 { padding-left: 22px; } .u-pd__l--13 { padding-left: 13px; } .u-pd__l--8 { padding-left: 8px; } /* zero */ .u-pd__y--0 { padding-top: 0; padding-bottom: 0; } .u-pd__x--0 { padding-left: 0; padding-right: 0; } .u-pd__t--0 { padding-top: 0; } .u-pd__b--0 { padding-bottom: 0; } .u-pd__r--0 { padding-right: 0; } .u-pd__l--0 { padding-left: 0; } /* * utility */ .sp-enter, .u-sp--br { display: block; } @media screen and (min-width: 768px) { .sp-enter, .u-sp--br { display: none; } } .pc-enter, .u-pc--br { display: none; } @media screen and (min-width: 768px) { .pc-enter, .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-align--strech { align-items: stretch; } .u-placeitems--center { place-items: center; } .u-width--10 { width: 10%; } .u-width--20 { width: 20%; } .u-width--30 { width: 30%; } .u-width--40 { width: 40%; } .u-width--50 { width: 50%; } .u-width--60 { width: 60%; } .u-width--70 { width: 70%; } .u-width--80 { width: 80%; } .u-width--90 { width: 90%; } .u-width--100 { width: 100%; } .u-width--auto { width: auto; } @media screen and (min-width: 768px) { .u-pcWidth--10 { width: 10%; } } @media screen and (min-width: 768px) { .u-pcWidth--20 { width: 20%; } } @media screen and (min-width: 768px) { .u-pcWidth--30 { width: 30%; } } @media screen and (min-width: 768px) { .u-pcWidth--40 { width: 40%; } } @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; } .clr, .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; } } @media screen and (min-width: 768px) { .u-col--reverse { order: -1; } } /* * font */ .u-font__serif { font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; font-style: normal; } .u-font__sans { font-family: "Noto Sans JP", sans-serif; } .u-font__bold { font-weight: 600; } .u-font__z--56 { line-height: 1.3; font-size: 35px; } @media screen and (min-width: 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--15 { line-height: 1.8; font-size: 14px; } @media screen and (min-width: 768px) { .u-font__z--15 { font-size: 15px; } } .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--13 { line-height: 1.8; font-size: 12px; } @media screen and (min-width: 768px) { .u-font__z--13 { font-size: 13px; } } .u-font__z--12 { line-height: 1.8; font-size: 10px !important; } @media screen and (min-width: 768px) { .u-font__z--12 { font-size: 12px !important; } } .u-font__z--10 { line-height: 1.8; font-size: 10px; } /* * utility */ .text-center { text-align: center; }