/** Shopify CDN: Minification failed Line 738:20 Unterminated string token Line 3369:2 "margin-botto" is not a known CSS property Line 4279:2 "margin-botto" is not a known CSS property **/ @font-face { font-family: "Hiragino-Sans-GB-W3"; src: url("https://cdn.shopify.com/s/files/1/0679/3759/9739/files/Hiragino-Sans-GB-W3.ttf?v=1704767351") format("truetype"), url("https://cdn.shopify.com/s/files/1/0679/3759/9739/files/Hiragino-Sans-GB-W3.woff?v=1704767349") format("woff"); font-weight: normal; } @font-face { font-family: "Hiragino-Sans-GB-W6"; src: url("https://cdn.shopify.com/s/files/1/0679/3759/9739/files/hiragino-sans-gb-w6.woff?v=1704767350") format("woff"), url("https://cdn.shopify.com/s/files/1/0679/3759/9739/files/hiragino-sans-gb-w6.woff?v=1704767350") format("woff2"); font-weight: normal; } @font-face { font-family: "Avenir-Roman"; src: url("https://cdn.shopify.com/s/files/1/0679/3759/9739/files/Avenir-Roman.woff?v=1704767349") format("woff"); } /* ----------------------------reset ---------------------------- */ html, body, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, figcaption, figure, footer, header, menu, nav, section, summary, time, mark, audio, video, main { margin: 0; padding: 0; border: 0; outline: 0; /*font-size: 100%;*/ background: transparent; } body { font-family: var(--text-family); font-size: 12px; line-height: 2; letter-spacing: 1.25px; color: #333333; text-align: left; -webkit-text-size-adjust: 100%; min-height: 100vh; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding-top: 80px; } @media screen and (max-width: 749px) { body { padding-top: 60px; } } body.is-fixed { position: fixed; left: 0; width: 100%; } main { display: block; /*IE*/ } h1, h2, h3, h4, h5, h6 { font-weight: 400; } li { list-style-type: none; } a { outline: none; color: inherit; text-decoration: none; } *:focus { outline: none; } strong { font-weight: 700; } img:not(.header_logo img) { width: 100%; /*height: auto;*/ vertical-align: middle; } svg { width: 100%; height: auto; vertical-align: middle; } button { background: transparent; border: 0; border-radius: 0; } /* iOS */ input[type=submit], input[type=button] { border-radius: 0; -webkit-box-sizing: content-box; -webkit-appearance: button; -moz-appearance: auto; appearance: auto; border: none; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; } input[type=submit]::-webkit-search-decoration, input[type=button]::-webkit-search-decoration { display: none; } input[type=submit]:focus, input[type=button]:focus { outline-offset: -2px; } input, select, textarea { -webkit-appearance: none; border-radius: 0 !important; } .cf { zoom: 1; } .cf:before, .cf:after { content: ""; display: table; } .cf:after { clear: both; } a { color: inherit; } a:link, a:active, a:visited { text-decoration: none; } @media (any-hover: hover) { a { -webkit-transition: opacity 0.2s; transition: opacity 0.2s; } a:hover { opacity: 0.8; } } @media screen and (min-width: 750px) { a[href^="tel:"] { display: inline-block; pointer-events: none; } a, a * { outline: 1px solid transparent; } } /* ---------------------------- common ---------------------------- */ .rte h1, .rte h2, .rte h3, .rte h4, .rte h5, .rte h6 { font-weight: 700; margin-top: 0; margin-bottom: 0; } .rte img { width: auto; } /* ---------------------------- js-preload ---------------------------- */ .js-preload * { -webkit-transition: none !important; transition: none !important; } /* ----------------------------header ---------------------------- */ .header { position: fixed; top: 0; left: 0; z-index: 99; width: 100%; height: 80px; /*height: 120px;*/ background: #fff; -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (max-width: 749px) { .header { height: 60px; } } .header *, .header *::before, .header *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } .header_logo { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 22px; width: 110px; /*width: 140px;*/ } @media screen and (max-width: 749px) { .header_logo { left: 12px; width: 70px; } } .header_icon_list_item.search { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 121px; width: 27px; height: 28px; cursor: pointer; line-height: 1; } .header_icon_list_item.search img { height: 100%; width: auto; } @media (any-hover: hover) { .header_icon_list_item.search { -webkit-transition: opacity 0.2s; transition: opacity 0.2s; } .header_icon_list_item.search:hover { opacity: 0.8; } } @media screen and (max-width: 749px) { .header_icon_list_item.search { right: 65px; width: 19px; height: 20px; } } .header_search .header_search_form { padding: 130px 40px; width: 630px; margin: 0 auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: inherit; } @media only screen and (max-width: 767px) { .header_search .header_search_form { padding: 100px 20px; width: 100%; } } .header_search .search_form_input { background-color: #f0f1f4; border: 0; width: calc(100% - 70px); height: 60px; padding: 10px 10px 10px 30px; border-radius: 30px 0 0 30px !important; font-size: 16px; } @media only screen and (max-width: 767px) { .header_search .search_form_input { width: calc(100% - 50px); height: 44px; border-radius: 22px 0 0 22px!important; padding: 10px 10px 10px 20px; } } .header_search .search_form_submit { border: 0; width: 70px; height: 60px; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; line-height: 1; border-radius: 0 30px 30px 0 !important; background: #f0f1f4 url('data:image/svg+xml;utf8,') no-repeat left 10px center/27px 27px; padding: 0; } @media only screen and (max-width: 767px) { .header_search .search_form_submit { padding: 0; width: 50px; height: 44px; border-radius: 0 22px 22px 0 !important; background-size: 17px 17px; } } .header_search .search_form_submit svg { display: none; } .header_button { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 205px; width: 200px; } @media screen and (max-width: 749px) { .header_button { right: 112px; width: 128px; } } .toggle_button { position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 0; width: 80px; height: 80px; cursor: pointer; } @media (any-hover: hover) { .toggle_button { -webkit-transition: opacity 0.2s; transition: opacity 0.2s; } .toggle_button:hover { opacity: 0.8; } } @media screen and (max-width: 749px) { .toggle_button { width: 50px; height: 50px; } } .toggle_button span { position: absolute; width: 38px; height: 3px; background: #333333; -webkit-transition: all 0.3s ease-out; transition: all 0.3s ease-out; } @media screen and (max-width: 749px) { .toggle_button span { width: 25px; height: 2px; } } .toggle_button span:nth-child(1) { top: 32px; left: 25px; } @media screen and (max-width: 749px) { .toggle_button span:nth-child(1) { top: 20px; left: 12px; } } .toggle_button span:nth-child(2) { top: 45px; left: 25px; } @media screen and (max-width: 749px) { .toggle_button span:nth-child(2) { top: 28px; left: 12px; } } .toggle_button.is-action span:nth-child(1) { -webkit-transform: rotate(45deg); transform: rotate(45deg); top: 39px; } @media screen and (max-width: 749px) { .toggle_button.is-action span:nth-child(1) { top: 24px; } } .toggle_button.is-action span:nth-child(2) { -webkit-transform: rotate(-45deg); transform: rotate(-45deg); top: 39px; } @media screen and (max-width: 749px) { .toggle_button.is-action span:nth-child(2) { top: 24px; } } .header_menu { position: fixed; align-items: flex-start !important; top: 80px; /*top: 120px;*/ left: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; width: 100%; height: calc(100vh - 120px); min-height: 500px; background: #fff; visibility: hidden; -webkit-transition: visibility 0.1s linear 0s; transition: visibility 0.1s linear 0s; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding: 100px 30px; } @media screen and (max-width: 749px) { .header_menu { top: 60px; height: calc(100% - 60px); padding: 50px 20px; display: block; } } .header_menu.is-action { visibility: visible; } .header_menu__wrap { max-width: 1240px; width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px; } @media screen and (max-width: 749px) { .header_menu__wrap { gap: 52px; padding-bottom: 40px; border-bottom: 1px solid #b2b9c1; } } .header_menu__wrap > * { width: calc((100% - 40px) / 3); } @media screen and (max-width: 749px) { .header_menu__wrap > * { width: 100%; } } /* ----------------------------footer ---------------------------- */ .footer { position: relative; padding: 100px 0; -webkit-box-sizing: border-box; box-sizing: border-box; background: #f0f1f4; } .footer .inner { max-width: 1320px; } @media screen and (max-width: 749px) { .footer { padding: 50px 0; } } .footer *, .footer *::before, .footer *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } .footer_logo { width: 160px; } @media screen and (max-width: 749px) { .footer_logo { width: 110px; margin: 0 auto; } } .footer_menu__wrap { max-width: 1240px; width: 100%; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px; margin-top: 60px; } @media screen and (max-width: 749px) { .footer_menu__wrap { gap: 52px; padding-bottom: 40px; border-bottom: 1px solid #b2b9c1; margin-top: 50px; } } .footer_menu__wrap > * { width: calc((100% - 40px) / 3); } @media screen and (max-width: 749px) { .footer_menu__wrap > * { width: 100%; } } .footer__policy { margin-top: 97px; } @media screen and (max-width: 749px) { .footer__policy { margin-top: 51px; } } .footer__copy { font-size: 12px; line-height: 1; letter-spacing: 0.06em; text-align: center; margin-top: 10px; font-family: "Avenir-Roman"; font-weight: 900; } @media screen and (max-width: 749px) { .footer__copy { margin-top: 10px; font-size: 11px; } } .footer__pagetop { position: fixed; bottom: 70px; right: 50px; z-index: 98; width: 70px; height: 70px; -webkit-transition: top 0.3s, bottom 0.3s; transition: top 0.3s, bottom 0.3s; } @media screen and (max-width: 749px) { .footer__pagetop { right: 20px; width: 45px; height: 45px; } } .footer__pagetop.is-absolute { position: absolute; bottom: auto; top: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); } .footer__pagetop a { display: block; width: 100%; height: 100%; border-radius: 100vh; -webkit-box-shadow: 3px 0 16px rgba(0, 19, 48, 0.2); box-shadow: 3px 0 16px rgba(0, 19, 48, 0.2); } @media screen and (max-width: 749px) { .footer__pagetop a { -webkit-box-shadow: 2px 0 8px rgba(0, 19, 48, 0.2); box-shadow: 2px 0 8px rgba(0, 19, 48, 0.2); } } /* ----------------------------common ---------------------------- */ @media (min-width:750px) { .visible-sp { display: none!important } } @media (max-width:749px) { .visible-pc { display: none!important } } @media (max-width:749px) { .hidden-sp { display: none!important } } @media (min-width:750px) { .hidden-pc { display: none!important } } .main_contents { -webkit-box-flex: 1; -webkit-flex: 1 0 auto; -ms-flex: 1 0 auto; flex: 1 0 auto; -webkit-box-sizing: border-box; box-sizing: border-box; } .main_contents *, .main_contents *::before, .main_contents *::after { -webkit-box-sizing: border-box; box-sizing: border-box; } .nobreak { display: inline-block; } @media (any-hover: hover) { .hover { -webkit-transition: opacity 0.2s; transition: opacity 0.2s; } .hover:hover { opacity: 0.8; } } .inner { /*max-width: 1320px;*/ max-width: 1120px; width: 100%; padding: 0 40px; margin: 0 auto; -webkit-box-sizing: border-box; box-sizing: border-box; } @media screen and (max-width: 749px) { .onlypc { display: none !important; } .inner { padding: 0 20px; } } @media screen and (min-width: 750px) { .onlysp { display: none !important; } } .txt_list > li{ padding-left: 16px; box-sizing: border-box; position: relative; } .txt_list li:before { content: "●"; position: absolute; top: 0; left: 0; color: #999; -webkit-transform: scale(0.4, 0.4); transform: scale(0.4, 0.4); } /* ---------------------------- background ---------------------------- */ .template-page, .template-blog, .template-collection, .template-search{ background: #f0f1f4; } /* ---------------------------- title ---------------------------- */ .heading_primary { margin: 93px 0; } @media screen and (max-width: 749px) { .heading_primary { margin: 50px 0; } } .heading_primary.white { color: #fff; } .heading_primary.white .heading_primary__subtitle::before { background: #fff; } .heading_primary__title { /*font-size: 80px;*/ font-size: 64px; font-weight: 900; letter-spacing: 0.02em; line-height: 1; text-transform: uppercase; font-family: "Avenir-Roman"; } @media screen and (max-width: 1099px) { .heading_primary__title { /*font-size: 65px;*/ font-size: 50px' } } @media screen and (max-width: 749px) { .heading_primary__title { font-size: 50px; } } .heading_primary__subtitle { position: relative; font-size: 24px; letter-spacing: 0.06em; padding-left: 30px; line-height: 1.2; margin-top: 30px; } @media screen and (max-width: 1099px) { .heading_primary__subtitle { font-size: 20px; padding-left: 20px; } } @media screen and (max-width: 749px) { .heading_primary__subtitle { font-size: 16px; padding-left: 16px; margin-top: 15px; } } .heading_primary__subtitle::before { content: ""; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; width: 6px; height: 100%; background: #333333; } @media screen and (max-width: 749px) { .heading_primary__subtitle::before { width: 4px; } } .heading_primary_small__title { font-size: 54px; font-weight: 900; letter-spacing: 0.02em; line-height: 1; text-transform: uppercase; font-family: "Avenir-Roman"; } @media screen and (max-width: 1099px) { .heading_primary_small__title { font-size: 44px; } } @media screen and (max-width: 749px) { .heading_primary_small__title { font-size: 34px; } } .heading_primary_small__subtitle { position: relative; font-size: 16px; letter-spacing: 0.06em; padding-left: 20px; line-height: 1.2; margin-top: 23px; } @media screen and (max-width: 1099px) { .heading_primary_small__subtitle { font-size: 18px; padding-left: 15px; } } @media screen and (max-width: 749px) { .heading_primary_small__subtitle { font-size: 13px; padding-left: 16px; margin-top: 15px; } } .heading_primary_small__subtitle::before { content: ""; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; width: 4px; height: 100%; background: #333333; } @media screen and (max-width: 749px) { .heading_primary_small__subtitle::before { width: 4px; } } .heading_secondary { margin: 33px 0; } @media screen and (max-width: 749px) { .heading_secondary { margin: 20px 0; } } .heading_secondary__title { font-size: 24px; /*font-size: 32px;*/ font-weight: 900; letter-spacing: 0.02em; line-height: 1; text-transform: uppercase; font-family: "Avenir-Roman"; } @media screen and (max-width: 749px) { .heading_secondary__title { font-size: 20px; } } .heading_secondary__subtitle { font-size: 16px; letter-spacing: 0.06em; margin-top: 11px; } @media screen and (max-width: 749px) { .heading_secondary__subtitle { font-size: 13px; margin-top: 5px; } } .title_black28 { font-size: 28px; letter-spacing: 0.06em; font-family: var(--text-family); font-weight: 600; } @media screen and (max-width: 899px) { .title_black28 { font-size: 24px; } } @media screen and (max-width: 749px) { .title_black28 { font-size: 20px; } } /* ---------------------------- button ---------------------------- */ .button_blue01 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding: 12px; /*padding: 19px;*/ text-align: center; border-radius: 100vh; background: #003366; color: #fff; font-size: 14px; /*font-size: 16px;*/ font-family: var(--text-family); font-weight: 600; letter-spacing: 0.06em; } @media screen and (max-width: 749px) { .button_blue01 { padding: 8px; font-size: 10px; } } .button_blue_arrow01 { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding: 19px 50px; text-align: center; border-radius: 100vh; background: #003366; color: #fff; font-size: 16px; font-family: var(--text-family); font-weight: 600; letter-spacing: 0.04em; } .womens .button_blue_arrow01 { background: #92d0f2; } @media screen and (max-width: 749px) { .button_blue_arrow01 { padding: 8px 35px; font-size: 12px; } } .button_blue_arrow01::before { content: ""; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 33px; width: 11px; height: 17px; background: url('data:image/svg+xml;utf8,') no-repeat center center/contain; } @media screen and (max-width: 749px) { .button_blue_arrow01::before { right: 17px; width: 8px; height: 13px; } } .button_transparent_arrow01 { position: relative; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding: 19px 50px; text-align: center; border-radius: 100vh; border: 1px solid #a8afb9; font-size: 16px; font-family: var(--text-family); font-weight: 600; letter-spacing: 0.06em; } @media screen and (max-width: 749px) { .button_transparent_arrow01 { padding: 10px 40px; font-size: 13px; } } .button_transparent_arrow01::before { content: ""; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); right: 33px; width: 11px; height: 17px; background: url('data:image/svg+xml;utf8,') no-repeat center center/contain; } @media screen and (max-width: 749px) { .button_transparent_arrow01::before { right: 23px; width: 8px; height: 13px; } } .button_howtouse { height: 110px; } @media screen and (max-width: 749px) { .button_howtouse { height: 80px; } } .banner_section { padding: 100px 0; background: #fff; } @media screen and (max-width: 749px) { .banner_section { padding: 50px 0; } } .banner_section .inner { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; justify-content: center; gap: 20px; } @media screen and (max-width: 749px) { .banner_section .inner { display: block; gap: unset; } } .banner_section__item { width: calc(50% - 10px); } @media screen and (max-width: 749px) { .banner_section__item { width: 100%; } .banner_section__item:nth-child(n+2) { margin-top: 10px; } } .button_safety, .button_mailmagazine { height: 110px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; border-radius: 10px; color: #fff; font-size: 20px; font-family: var(--text-family); font-weight: 600; letter-spacing: 0.06em; background: #003366; border: 1px solid #fff; } @media screen and (max-width: 749px) { .button_safety, .button_mailmagazine { height: 80px; border-radius: 5px; font-size: 16px; } } .button_safety__inner { position: relative; padding-left: 53px; } @media screen and (max-width: 749px) { .button_safety__inner { padding-left: 39px; } } .button_safety__inner::before { content: ""; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; width: 33px; height: 44px; background: url("https://cdn.shopify.com/s/files/1/0679/3759/9739/files/icon_safety.svg?v=1704763137") no-repeat center center/contain; } @media screen and (max-width: 749px) { .button_safety__inner::before { width: 26px; height: 35px; } } .button_mailmagazine__inner { position: relative; padding-left: 53px; } @media screen and (max-width: 749px) { .button_mailmagazine__inner { padding-left: 39px; } } .button_mailmagazine__inner::before { content: ""; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; width: 33px; height: 43px; background: url("https://cdn.shopify.com/s/files/1/0679/3759/9739/files/icon_mailmagazine.svg?v=1704763137") no-repeat center center/contain; } @media screen and (max-width: 749px) { .button_mailmagazine__inner::before { width: 27px; height: 39px; } } /* ---------------------------- menu ---------------------------- */ .menu_card { border-top: 1px solid #b2b9c1; padding-top: 27px; } @media screen and (max-width: 749px) { .menu_card { padding-top: 40px; } } .menu_card__title { font-family: "Avenir-Roman"; font-weight: 900; letter-spacing: 0.04em; font-size: 18px; margin-bottom: 23px; } @media screen and (max-width: 749px) { .menu_card__title { font-size: 16px; } } .menu_card__link { font-size: 14px; font-family: var(--text-family); font-weight: 600; letter-spacing: 0.06em; } @media screen and (min-width: 750px) and (max-width: 1299px) { .menu_card__link { font-size: clamp(12px, 1.0769230769vw, 14px); } } @media screen and (max-width: 749px) { .menu_card__link { font-size: 13px; } } .menu_card__link + .menu_card__link { margin-top: 27px; } .menu_card__list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 16px 18px; margin: 18px 0 28px; } @media screen and (min-width: 750px) and (max-width: 1299px) { .menu_card__list { -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; } } @media screen and (max-width: 749px) { .menu_card__list { margin: 17px 0 25px; gap: 16px 12px; } } .menu_card__list li { position: relative; padding-left: 20px; width: calc(42% - 9px); } @media screen and (min-width: 750px) and (max-width: 1299px) { .menu_card__list li { width: 100%; } } @media screen and (max-width: 749px) { .menu_card__list li { padding-left: 18px; width: calc(50% - 6px); } } .menu_card__list li::before { content: ""; position: absolute; top: 13px; left: 0; width: 12px; height: 1px; border-top: 1px solid #333333; } @media screen and (max-width: 749px) { .menu_card__list li::before { top: 11px; width: 10px; } } .menu_card__list li a { font-size: 14px; letter-spacing: 0.06em; } @media screen and (max-width: 749px) { .menu_card__list li a { font-size: 13px; } } .menu_card__sns { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; gap: 28px; margin-top: 48px; } @media screen and (max-width: 749px) { .menu_card__sns { gap: 23px; margin-top: 40px; } } .menu_card__sns li.facebook { width: 28px; } .menu_card__sns li.x { width: 24px; } .menu_card__sns li.instagram { width: 28px; } .menu_card__sns li.youtube { width: 32px; } .menu_card__sns li a { display: block; } @media screen and (max-width: 749px) { .menu_card__sns li a:hover { opacity: 1; } } /* ---------------------------- product_list ---------------------------- */ .product_list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; gap: 20px; } @media screen and (max-width: 899px) { .product_list { display: block; } } .product_list_item { width: calc((100% - 40px) / 3); background: #fff; border-radius: 10px; } @media screen and (max-width: 899px) { .product_list_item { width: 100%; } .product_list_item:nth-child(n+2) { margin-top: 20px; } } @media screen and (max-width: 749px) { .product_list_item { border-radius: 5px; } .product_list_item:nth-child(n+2) { margin-top: 10px; } } .product_list_item a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; height: 100%; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 40px 30px; } @media screen and (max-width: 899px) { .product_list_item a { position: relative; -webkit-box-orient: unset; -webkit-box-direction: unset; -webkit-flex-direction: unset; -ms-flex-direction: unset; flex-direction: unset; padding: 24px 38px; -webkit-box-align: start; -webkit-align-items: flex-start; -ms-flex-align: start; align-items: flex-start; } } @media screen and (max-width: 749px) { .product_list_item a { padding: 16px 18px; } } .product_list_item a .button_blue_arrow01 { margin-top: auto; width: 100%; } @media screen and (max-width: 899px) { .product_list_item a .button_blue_arrow01 { position: absolute; bottom: 24px; right: 38px; margin: 0; width: 240px; } } @media screen and (max-width: 749px) { .product_list_item a .button_blue_arrow01 { right: 18px; width: 120px; } } .product_list_item__image { position: relative; width: 100%; aspect-ratio: 340/272; } @media screen and (max-width: 899px) { .product_list_item__image { width: 35%; } } @media screen and (max-width: 749px) { .product_list_item__image { width: 90px; aspect-ratio: 168/180; } } .product_list_item__image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .product_list_item__title { font-size: 16px; letter-spacing: 0.06em; line-height: 1.75; margin: 34px 0; word-break: break-word; } @media screen and (max-width: 899px) { .product_list_item__title { width: 65%; padding: 0 0 90px 20px; margin: 0; } } @media screen and (max-width: 749px) { .product_list_item__title { width: calc(100% - 90px); padding: 0 0 60px 10px; font-size: 13px; line-height: 1.7692307692; } } .product_list.ranking .product_list_item { position: relative; } .product_list.ranking .product_list_item::before { content: var(--ranking_number); position: absolute; top: -10px; left: 10px; z-index: 1; width: 44px; height: 63px; -webkit-clip-path: polygon(100% 0%, 100% 100%, 50% 81%, 0 100%, 0 0); clip-path: polygon(100% 0%, 100% 100%, 50% 81%, 0 100%, 0 0); background: var(--ranking_color); color: #fff; padding-top: 17px; text-align: center; font-size: 24px; font-family: "Avenir-Roman"; font-weight: 900; line-height: 1; } @media screen and (max-width: 899px) { .product_list.ranking .product_list_item::before { left: -10px; } } @media screen and (max-width: 749px) { .product_list.ranking .product_list_item::before { top: -5px; left: -5px; width: 24px; height: 35px; padding-top: 11px; font-size: 13px; } } .product_list.ranking .product_list_item:nth-child(1) { --ranking_number:"01"; --ranking_color: #b7a843; } .product_list.ranking .product_list_item:nth-child(2) { --ranking_number:"02"; --ranking_color: #9299a0; } .product_list.ranking .product_list_item:nth-child(3) { --ranking_number:"03"; --ranking_color: #b28762; } /* ---------------------------- breadcrumb ---------------------------- */ .breadcrumb { padding: 10px 40px; } @media screen and (max-width: 749px) { .breadcrumb { padding: 9px 0 9px 15px; } } .breadcrumb__wrap { overflow-x: auto; overflow-y: hidden; white-space: nowrap; padding-bottom: 5px; } .breadcrumb__item { font-size: 12px; color: #999999; display: inline; line-height: 1.3; padding: 0; } @media screen and (max-width: 749px) { .breadcrumb__item { font-size: 10px; } } .breadcrumb__item:not(:last-child) { margin-right: 13px; } @media screen and (max-width: 749px) { .breadcrumb__item:not(:last-child) { margin-right: 6px; } } .breadcrumb__item:not(:last-child)::after { content: ""; display: inline-block; margin-left: 7px; width: 6px; height: 6px; border-top: 1px solid #999999; border-right: 1px solid #999999; -webkit-transform: rotate(45deg) translateY(-1px); transform: rotate(45deg) translateY(-1px); } @media screen and (max-width: 749px) { .breadcrumb__item:not(:last-child)::after { margin-left: 5px; } } .breadcrumb__item a { text-decoration: underline; text-underline-offset: 3px; } /* ---------------------------- magazine_section_list ---------------------------- */ .magazine_section_list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px; } @media screen and (max-width: 899px) { .magazine_section_list { display: block; gap: unset; } } .magazine_section_list_item { width: calc((100% - 40px) / 3); } @media screen and (max-width: 899px) { .magazine_section_list_item { width: 100%; } .magazine_section_list_item:nth-child(n+2) { margin-top: 20px; } } @media screen and (max-width: 749px) { .magazine_section_list_item { width: 100%; } .magazine_section_list_item:nth-child(n+2) { margin-top: 10px; } } .magazine_section_list_item a { display: block; border-radius: 10px; background: #fff; overflow: hidden; } @media screen and (max-width: 749px) { .magazine_section_list_item a { border-radius: 5px; } } .magazine_section_list_item__image { width: 100%; aspect-ratio: 400/226; } .magazine_section_list_item__image img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .magazine_section_list_item__textarea { padding: 32px 28px; } @media screen and (max-width: 749px) { .magazine_section_list_item__textarea { padding: 12px 20px; } } .magazine_section_list_item__title { font-size: 16px; height: 56px; line-height: 1.75; letter-spacing: 0.06em; display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; word-break: break-word; } @media screen and (max-width: 749px) { .magazine_section_list_item__title { font-size: 16px; height: auto; line-height: 1.75; } } .magazine_section_list_item__tag { font-size: 12px; color: #7a96b5; letter-spacing: 0.06em; margin-top: 11px; font-family: var(--text-family); font-weight: 600; } @media screen and (max-width: 749px) { .magazine_section_list_item__tag { font-size: 11px; margin-top: 2px; } } .magazine__tag_item { margin-left: 1em; } .magazine__tag_item:first-child { margin-left: 0; } /* ----------------------------top ---------------------------- */ .top_mv { width: 100%; background: #f0f1f4; } .top_mv .slick-dots { position: absolute; bottom: -43px; left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } @media screen and (max-width: 749px) { .top_mv .slick-dots { bottom: -23px; } } .top_mv .slick-dots li { margin: 0 10px; width: 16px; height: 16px; } @media screen and (max-width: 749px) { .top_mv .slick-dots li { margin: 0 5px; width: 8px; height: 8px; } } .top_mv .slick-dots li button { position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); transform: translate(-50%, -50%); width: 8px; height: 8px; padding: 0; border-radius: 100vh; background: #a8afb9; } @media screen and (max-width: 749px) { .top_mv .slick-dots li button { width: 4px; height: 4px; } } .top_mv .slick-dots li button::before { content: none; } .top_mv .slick-dots li.slick-active button { background: #003366; width: 100%; height: 100%; } .top_mv:not(.slick-initialized) { display: none; } .top_mv.slick-initialized { display: block; } .top_mv__image { width: 100%; height: auto; } .top_products { background: #f0f1f4; padding: 97px 0 200px; } @media screen and (max-width: 749px) { .top_products { padding: 45px 0 100px; } } .top_products > .inner > *:last-child { margin-bottom: 0; } .categories_section { margin: 93px 0; } @media screen and (max-width: 749px) { .categories_section { margin: 50px 0; } } .categories_section_list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; gap: 20px; } @media screen and (max-width: 749px) { .categories_section_list { -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 10px; } } .categories_section_list_item { width: calc((100% - 40px) / 3); aspect-ratio: 1/1; } @media screen and (max-width: 749px) { .categories_section_list_item:nth-child(-n+2) { width: calc(50% - 5px); } .categories_section_list_item:nth-child(3) { width: 100%; aspect-ratio: 67/20; } } .categories_section_list_item a { position: relative; display: block; width: 100%; height: 100%; border-radius: 10px; overflow: hidden; } @media screen and (max-width: 749px) { .categories_section_list_item a { border-radius: 5px; } } .categories_section_list_item a img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } .categories_section_list_item__text { position: absolute; top: 50%; left: 0; -webkit-transform: translateY(-50%); transform: translateY(-50%); width: 100%; color: #fff; font-size: clamp(18px, 1.8181818182vw, 24px); letter-spacing: 0.06em; text-align: center; word-break: break-word; padding: 0 20px; } @media screen and (max-width: 749px) { .categories_section_list_item__text { font-size: 16px; } } .brand_section { margin: 93px 0; } @media screen and (max-width: 749px) { .brand_section { margin: 50px 0; } } .brand_section_list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 20px; } @media screen and (max-width: 749px) { .brand_section_list { gap: 10px; } } .brand_section_list_item { width: calc((100% - 60px) / 4); } @media screen and (max-width: 1099px) { .brand_section_list_item { width: calc(50% - 10px); } } @media screen and (max-width: 749px) { .brand_section_list_item { width: calc(50% - 5px); } } .brand_section_list_item a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -webkit-flex-direction: column; -ms-flex-direction: column; flex-direction: column; padding: 40px 28px; background: #fff; border-radius: 10px; height: 100%; } @media screen and (min-width: 1100px) { .brand_section_list_item a { padding: 40px clamp(15px, 2.1212121212vw, 28px); } } @media screen and (max-width: 749px) { .brand_section_list_item a { padding: 23px 13px 18px; border-radius: 5px; } } .brand_section_list_item .button_blue_arrow01 { margin-top: auto; } .brand_section_list_item__image { position: relative; width: calc(100% - 4px); aspect-ratio: 233/270; max-width: 233px; margin: 0 auto; } .brand_section_list_item__image img { position: absolute; top: 0; left: 0; width: 100%; height: 100%; -o-object-fit: contain; object-fit: contain; } .brand_section_list_item__title { font-size: 20px; font-family: var(--text-family); font-weight: 600; text-align: center; margin-top: 41px; letter-spacing: 0.06em; line-height: 1.2; word-break: break-word; min-height: 45px; } @media screen and (min-width: 1100px) { .brand_section_list_item__title { font-size: clamp(15px, 1.4393939394vw, 20px); } } @media screen and (max-width: 749px) { .brand_section_list_item__title { font-size: 11px; margin-top: 20px; letter-spacing: 0.03em; min-height: 27px; } } .brand_section_list_item__text { font-size: 16px; text-align: center; letter-spacing: 0.06em; margin: 19px 0 36px; line-height: 1.625; word-break: break-word; } @media screen and (min-width: 1100px) { .brand_section_list_item__text { font-size: clamp(12px, 1.1363636364vw, 16px); } } @media screen and (max-width: 749px) { .brand_section_list_item__text { font-size: 10px; line-height: 1.6; margin: 10px 0 18px; } } .brand_section__button { width: 280px; margin: 58px auto 0; } @media screen and (max-width: 749px) { .brand_section__button { width: 180px; margin: 30px auto 0; } } .detail_section { margin: 93px 0; } @media screen and (max-width: 749px) { .detail_section { margin: 50px 0; } } .detail_section_tab { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; gap: 20px; } @media screen and (min-width: 1100px) { .detail_section_tab { display: none; } } @media screen and (max-width: 749px) { .detail_section_tab { gap: 10px; } } .detail_section_tab__item { position: relative; width: calc((100% - 40px) / 2); height: 80px; border-radius: 10px; font-size: 20px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; cursor: pointer; } @media (any-hover: hover) { .detail_section_tab__item { -webkit-transition: opacity 0.2s; transition: opacity 0.2s; } .detail_section_tab__item:hover { opacity: 0.8; } } @media screen and (max-width: 749px) { .detail_section_tab__item { width: calc((100% - 20px) / 3); height: 40px; font-size: 13px; border-radius: 5px; } } .detail_section_tab__item:not(.is-active) { background: #e2e4e9; } .detail_section_tab__item.is-active { background: #003366; color: #fff; } .womens .detail_section_tab__item.is-active { background: #92d0f2; } .detail_section_tab__item.is-active::before { content: ""; position: absolute; top: calc(100% - 1px); left: 50%; -webkit-transform: translateX(-50%); transform: translateX(-50%); width: 25px; height: 12px; background: #003366; -webkit-clip-path: polygon(0 0, 100% 0%, 50% 100%); clip-path: polygon(0 0, 100% 0%, 50% 100%); } .womens .detail_section_tab__item.is-active::before { background: #92d0f2; } @media screen and (max-width: 749px) { .detail_section_tab__item.is-active::before { width: 14px; height: 7px; } } .detail_section_tab__item span { position: relative; } .detail_section_tab__item span::before { content: ""; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; } .detail_section_tab__item.purpose span { padding-left: 38px; } @media screen and (max-width: 749px) { .detail_section_tab__item.purpose span { padding-left: 25px; } } .detail_section_tab__item.purpose span::before { width: 23px; height: 20px; background: url('data:image/svg+xml;utf8,') no-repeat center center/contain; } @media screen and (max-width: 749px) { .detail_section_tab__item.purpose span::before { width: 17px; height: 14px; } } .detail_section_tab__item.purpose.is-active span::before { background: url('data:image/svg+xml;utf8,') no-repeat center center/contain; } .detail_section_tab__item.part span { padding-left: 38px; } @media screen and (max-width: 749px) { .detail_section_tab__item.part span { padding-left: 26px; } } .detail_section_tab__item.part span::before { width: 25px; height: 25px; background: url('data:image/svg+xml;utf8,') no-repeat center center/contain; } @media screen and (max-width: 749px) { .detail_section_tab__item.part span::before { width: 16px; height: 16px; } } .detail_section_tab__item.part.is-active span::before { background: url('data:image/svg+xml;utf8,') no-repeat center center/contain; } .detail_section_tab__item.type span { padding-left: 40px; } @media screen and (max-width: 749px) { .detail_section_tab__item.type span { padding-left: 26px; } } .detail_section_tab__item.type span::before { width: 30px; height: 27px; background: url('data:image/svg+xml;utf8,') no-repeat center center/contain; } @media screen and (max-width: 749px) { .detail_section_tab__item.type span::before { width: 19px; height: 16px; } } .detail_section_tab__item.type.is-active span::before { background: url('data:image/svg+xml;utf8,') no-repeat center center/contain; } .detail_section_panel { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; gap: 20px; } @media screen and (max-width: 1099px) { .detail_section_panel { display: block; gap: unset; margin-top: 40px; } } @media screen and (max-width: 749px) { .detail_section_panel { margin-top: 20px; } } .detail_section_panel_item { width: calc((100% - 40px) / 3); background: #fff; border-radius: 10px; overflow: hidden; padding: 41px 32px; } @media screen and (max-width: 1099px) { .detail_section_panel_item { width: 100%; } .detail_section_panel_item:not(.is-show) { display: none; } .detail_section_panel_item.is-show { display: block; } } @media screen and (max-width: 749px) { .detail_section_panel_item { border-radius: 5px; padding: 19px 21px; } } .brand_section_panel_item__title { position: relative; font-size: 20px; font-family: var(--text-family); font-weight: 600; letter-spacing: 0.04em; line-height: 1; margin-bottom: 38px; padding-left: var(--brand_section_panel_item__title_padding); } @media screen and (max-width: 1099px) { .brand_section_panel_item__title { display: none; } } .brand_section_panel_item__title::before { content: ""; position: absolute; top: 50%; -webkit-transform: translateY(-50%); transform: translateY(-50%); left: 0; width: var(--brand_section_panel_item__title_width); height: var(--brand_section_panel_item__title_height); background-image: var(--brand_section_panel_item__title_image); background-position: center center; background-repeat: no-repeat; background-size: contain; } .brand_section_panel_item__title.purpose { --brand_section_panel_item__title_padding: 37px; --brand_section_panel_item__title_width: 23px; --brand_section_panel_item__title_height: 20px; --brand_section_panel_item__title_image: url("https://cdn.shopify.com/s/files/1/0679/3759/9739/files/icon_detail01.svg?v=1704763335"); } .brand_section_panel_item__title.part { --brand_section_panel_item__title_padding: 37px; --brand_section_panel_item__title_width: 24px; --brand_section_panel_item__title_height: 24px; --brand_section_panel_item__title_image: url("https://cdn.shopify.com/s/files/1/0679/3759/9739/files/icon_detail02.svg?v=1704763335"); } .brand_section_panel_item__title.type { --brand_section_panel_item__title_padding: 41px; --brand_section_panel_item__title_width: 30px; --brand_section_panel_item__title_height: 17px; --brand_section_panel_item__title_image: url("https://cdn.shopify.com/s/files/1/0679/3759/9739/files/icon_detail03.svg?v=1704763335"); } .brand_section_panel_item__list { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 11px 12px; } @media screen and (max-width: 749px) { .brand_section_panel_item__list { gap: 8px; } } .brand_section_panel_item__list li a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding: 12px 20px; font-size: 14px; text-align: center; letter-spacing: 0.04em; border-radius: 100vh; border: 1px solid #b2b9c1; line-height: 1.2; word-break: break-word; } @media screen and (max-width: 749px) { .brand_section_panel_item__list li a { padding: 12px 18px; font-size: 13px; } } .ranking_section { padding: 98px 0 200px; background: #003366; } .womens .ranking_section { background: #92d0f2; } @media screen and (max-width: 749px) { .ranking_section { padding: 46px 0 100px; } } .ranking_button { width: 520px; margin: 199px auto 0; } .ranking_button.mt30 { margin-top: 30px; } @media screen and (max-width: 749px) { .ranking_button { width: 335px; margin: 99px auto 0; } } .magazine_section { padding: 98px 0 200px; background: #f0f1f4; } @media screen and (max-width: 749px) { .magazine_section { padding: 48px 0 100px; } } .magazine_section__button { width: 280px; margin: 58px auto 0; } @media screen and (max-width: 749px) { .magazine_section__button { width: 180px; margin: 30px auto 0; } } /* ---------------------------- header_search ---------------------------- */ .header_search{ width: 100%; height: 100vh; display: none; position: fixed; z-index: -1; top: 0; left: 0; background: #fff; } .header_search_form{ padding: 130px 40px; width: 600px; margin: 0 auto; display: flex; box-sizing: border-box; } .search_form_input{ background-color: #f0f0f0; border: 0; width: 476px; height: 44px; padding: 10px; box-sizing: border-box; margin: 0!important; } [type="search"]::placeholder { color: #999; letter-spacing: 1.5px; } [type="search"]::-webkit-search-cancel-button, [type="search"]::-webkit-search-decoration { -webkit-appearance: none; } input:-webkit-autofill { box-shadow: 0 0 0 1000px #f0f0f0 inset; /*debug*/ } .search_form_submit{ background-color: #f0f0f0; border: 0; width: 44px; height: 44px; padding: 12px; box-sizing: border-box; cursor: pointer; line-height: 1; /*debug*/ } .search_form_submit svg{ width: 19px; } @media only screen and (max-width: 767px) { .header_search_form{ padding: 100px 20px; width: 100%; } .search_form_input{ width: calc(100% - 44px); } .search_form_submit{ padding: 13px; } .search_form_submit svg{ width: 17px; } } /* ----------------------------info ---------------------------- */ .info_list{ display: flex; flex-wrap: wrap; } .info_list_item{ width: 31.2%; margin-left: 3.2%; } .info_list_item:nth-child(3n+1){ margin-left: 0; } .info_list_item:nth-child(n+4){ margin-top: 4.8%; } .info_list_item_img img{ max-width: none!important; max-height: none!important; /*debug*/ } /* IE */ .info_list_item_img_noimage{ position: relative; padding-bottom: 100%; } .info_list_item_img_noimage img, .info_list_item_img_noimage svg{ position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .info_list_item_txt{ margin-top: 25px; } .info_list_item_date{ color: #999; } .info_list_item_ttl{ margin-top: 5px; } .btn_primary{ margin-top: 100px; text-align: center; font-family: var(--font-heading-family); font-weight: var(--font-heading-weight); } .btn_primary a{ line-height: 1.35; display: inline-block; padding: 20px 25px; border: 1px solid #666; transition: all 0.2s; opacity: 1!important; /*debug*/ } .btn_primary a:hover{ border: 1px solid #212121; background: #212121; color: #fff; } @media only screen and (max-width: 767px) { .info_list_item{ width: 100%; margin-left: 0; } .info_list_item:nth-child(n+2){ margin-top: 30px; } .info_list_item_txt{ margin-top: 15px; } .btn_primary{ margin-top: 50px; } .btn_primary a{ padding: 15px 25px; } } /* ----------------------------product ---------------------------- */ /* media */ /* .product_list{ display: flex; flex-wrap: wrap; } .product_list_item{ width: 22.6%; margin-left: 3.2%; } .product_list_item:nth-child(4n+1){ margin-left: 0; } .product_list_item:nth-child(n+5){ margin-top: 4.8%; } .product_list_item_txt{ margin-top: 25px; } .product_list_item_price{ margin-top: 5px; }*/ .price { display: flex; flex-direction: column; align-items: flex-start; margin-top: 0; margin-bottom: 0; } @media only screen and (max-width: 749px) { .price { font-size: calc(((var(--font-size-base) - 1) / (var(--font-size-base))) * 1em); } } .price--unavailable { visibility: hidden; } .price--compare-price-hidden .price__compare { display: none; } .price__pricing-group { display: flex; flex-direction: row; align-items: baseline; } .price__regular { display: block; } .price__regular, .price__sale { margin-right: 0; } .price--on-sale .price__regular, .price--on-sale .price__availability { display: none; } .price__availability { display: none; color: var(--color-body-text); font-size: 0.9em; font-weight: var(--font-weight-body); text-transform: uppercase; letter-spacing: 1px; } .price--sold-out .price__availability { display: block; } .price__sale { display: none; } .price--on-sale .price__sale { display: flex; flex-direction: row; flex-wrap: wrap; } .price__vendor { color: var(--color-body-text); font-size: 0.9em; font-weight: var(--font-weight-body); text-transform: uppercase; letter-spacing: 1px; margin: 5px 0 10px; width: 100%; -ms-flex-preferred-size: 100%; -webkit-flex-basis: 100%; -moz-flex-basis: 100%; flex-basis: 100%; } .price__vendor--listing { margin: 0 0 4px; } .price-item--sale { display: inline-block; color: #cd1536; } .price__compare{ display: inline-block; margin-left: 8px; } .price-unit-price { margin-bottom: 8px; color: var(--color-body-text); font-size: 0.8em; } .price-item__label { display: inline-block; white-space: nowrap; font-weight: var(--font-weight-body--bolder); } .price__badge { display: none; align-self: center; text-align: center; font-size: 10px; line-height: 1.3; text-transform: uppercase; border: 1px solid #666; border-radius: 2px; padding: 2px 6px; font-weight: 400; } .price__badge--sale { color: #fff; border-color: #cd1536; background-color: #cd1536; } .price--on-sale .price__badge--sale { display: flex; } .price--sold-out .price__badge--sale { display: none; } .price--sold-out .price__badge--sold-out { display: flex; margin: 4px 10px 0 0; } .price__badges--listing { margin-top: 5px; } /* @media only screen and (max-width: 767px) { .product_list{ justify-content: space-between; } .product_list_item{ width: calc(50% - 10px); margin-left: 0; } .product_list_item:nth-child(n+3){ margin-top: 30px; } .product_list_item_txt{ margin-top: 15px; } } */ /* ----------------------------top_hero ---------------------------- */ .top_hero{ width: 100%; height: 100vh; min-height: 40vw; position: relative; z-index: 2; background-repeat: no-repeat; background-position: center center; background-size: cover; } .top_hero_scroll{ position: absolute; bottom: 40px; left: 20px; z-index: 2; width: 40px; height: 80px; cursor: pointer; } .top_hero_scroll span:before, .top_hero_scroll span:after{ content: ""; display: inline-block; position: absolute; left: 0; right: 0; bottom: 0; width: 1px; height: 100%; background: #212121; -webkit-transition: height .3s cubic-bezier(0.2, 1, 0.3, 1); transition: height .3s cubic-bezier(0.2, 1, 0.3, 1); margin: auto; } .top_hero_scroll span:before{ height: 0; -webkit-transition-delay:.3s; transition-delay:.3s; } .top_hero_scroll span{ display: block; padding: 0 20px; height: 100%; } @media only screen and (min-width: 768px) { .top_hero_scroll span:hover:before{ height: 100%; } .top_hero_scroll span:hover:after{ height: 0; } } @media only screen and (max-width: 767px) { .top_hero{ min-height: 480px; } .top_hero_scroll{ bottom: 20px; left: 0; height: 60px; } } /* ----------------------------top_info ---------------------------- */ .top_info .inner{ padding-top: 160px; padding-bottom: 160px; } @media only screen and (max-width: 767px) { .top_info .inner{ padding-top: 80px; padding-bottom: 80px; } } /* ----------------------------top_product ---------------------------- */ .top_product .inner{ padding-top: 160px; border-top: 1px solid #e9e9e9; } @media only screen and (max-width: 767px) { .top_product .inner{ padding-top: 80px; } } /* ----------------------------common ---------------------------- */ .page_section + .page_section{ padding-top: 100px; } @media only screen and (max-width: 767px) { .page_section + .page_section{ padding-top: 50px; } } /* ----------------------------concept ---------------------------- */ .concept_inner{ display: flex; align-items: center; justify-content: space-between; flex-direction: row-reverse; } .concept_img{ width: 50%; } .concept_txt{ width: 50%; padding-right: 80px; box-sizing: border-box; } .concept_txt .ttl_secondary{ margin-bottom: 40px; } .concept_txt p + p{ margin-top: 20px; } @media only screen and (max-width: 767px) { .concept_inner{ display: block; } .concept_img{ width: 100%; } .concept_txt{ width: 100%; padding-right: 0; margin-top: 30px; } .concept_txt .ttl_secondary{ margin-bottom: 30px; } } /* ----------------------------post ---------------------------- */ .post_date{ color: #999; } .post_img{ margin-top: 40px; } .post_txt{ margin-top: 40px; } .post_txt a{ text-decoration: underline; } .post_txt a:hover{ text-decoration: none; opacity: 1!important; } @media only screen and (max-width: 767px) { .post_img{ margin-top: 30px; } .post_txt{ margin-top: 30px; } } /* ----------------------------dealer ---------------------------- */ .dealer_article{ padding: 60px 0; border-bottom: 1px solid #e9e9e9; } .dealer_article:first-of-type{ border-top: 1px solid #e9e9e9; } .dealer_article .ttl_secondary{ margin-bottom: 40px; } .dealer_list_item + .dealer_list_item{ margin-top: 40px; } @media only screen and (max-width: 767px) { .dealer_article{ padding: 40px 0; } .dealer_article .ttl_secondary{ margin-bottom: 30px; } .dealer_list_item + .dealer_list_item{ margin-top: 30px; } } /* ----------------------------product ---------------------------- */ .product_head{ padding-top: 130px; padding-bottom: 50px; display: flex; justify-content: space-between; align-items: center; } .product_head_img{ width: 38.7%; } .thumbnails-wrapper{ top: 0; margin: 0; } .product_head_img_thumb{ padding-top: 20px; display: flex; flex-wrap: wrap; } .product_head_img_thumb_item{ width: calc(100% / 7 - ((1.75% * 6) / 7) ) !important; margin-left: 1.75%; } .product_head_img_thumb_item:nth-child(7n+1){ margin-left: 0; } @media only screen and (max-width: 768px) { .product_head_img_thumb_item:nth-child(7n+1){ margin-left: 1.75%; } } .product_head_img_thumb_item:nth-child(n+8){ margin-top: 1.75%; } @media only screen and (max-width: 768px) { .product_head_img_thumb_item:nth-child(n+8){ margin-top: 0; } } .product_head_img_thumb_item .product-single__thumbnail{ margin: 0; display: block; transition: opacity 0.2s; position: relative; min-height: 0; border: 0; } .product_head_img_thumb_item .product-single__thumbnail.active-thumb{ border: 0; } .product_head_img_thumb_item .product-single__thumbnail.active-thumb:before{ content: ""; display: inline-block; opacity: 0.2; background: #000; width: 100%; height: 100%; position: absolute; top: 0; left: 0; } .product_head_img_thumb_item .product-single__thumbnail img{ padding: 0; aspect-ratio: 1; object-fit: contain; } @media only screen and (min-width: 768px) { .product_head_img_thumb_item a:hover{ opacity: 0.8; } } .mobile-version-custom{ display:none; } .desktop-version-custom .product_head_img{ width:70%; } @media only screen and (max-width: 768px) { .desktop-version-custom{ display:none; } .mobile-version-custom{ display:block; } .product-slider-custom .slick-current{ left: 0 !important; } .product-slider-custom .hide{ display: initial !important; } .mobile-version-custom .product-slider-custom img{ height:300px!important; } .product-slider-custom .slick-list { max-height: 335px!important; } /*.product-slider-custom .slick-list { max-height:500px; }*/ .product_head .product_head_img_thumb .slick-track{ display:flex; align-items:center; } .product_head_img_thumb { margin-left: -1.75%; margin-right: -1.75%; } .product_head_img_thumb_item{ width: calc(100% / 5 - ((1.75% * 4) / 5) ) !important; width: 18.6%!important; } .mobile-version-custom .product-featured-media{ max-width:100% !important; object-fit:contain !important; } .mobile-version-custom .product-single__media-wrapper{ max-width:100% !important; } .product-slider-custom .slick-next:before, .product-slider-custom .slick-prev:before { content: none; } .product-slider-custom .slick-prev.slick-arrow{ background: url('https://cdn.shopify.com/s/files/1/0679/3759/9739/files/211689_left_arrow_icon_042235db-a00f-48b6-a352-93967179dc92.png?v=1706444867'); left: -2px; } .product-slider-custom .slick-next.slick-arrow{ background: url('https://cdn.shopify.com/s/files/1/0679/3759/9739/files/211607_right_arrow_icon_132e950d-3115-4fea-a0b4-ee7f3ca381b9.png?v=1706444866'); right: -2px; } .product-slider-custom .slick-prev.slick-arrow , .product-slider-custom .slick-next.slick-arrow{ background-repeat: no-repeat; background-position: center center; top: 49%; width: 25px; height: 25px; background-color: #0033668a; z-index: 2; background-size: 20px; border-radius: 50%; /*padding: 10px;*/ box-shadow: none; } .product-slider-custom .slick-prev.slick-arrow { background-position: center right 3px; } .product-slider-custom .slick-next.slick-arrow.slick-disabled{ opacity:0.4; } .product-slider-custom .slick-prev.slick-arrow.slick-disabled{ opacity:0.4; } /*.product_head_img_thumb_item { margin-left: 0; }*/ /*.product_head_img_thumb_item:nth-child(7n+1){ margin-left: 1.75%; } .product_head_img_thumb_item:nth-child(5n+1){ margin-left: 0; } .product_head_img_thumb_item:nth-child(n+6){ margin-top: 1.75%; } .product_head_img_thumb_item { margin-left: 0; } .product_head_img_thumb_item:nth-child(n+2) { margin-left: 1.75%; } .slick-track .product_head_img_thumb_item:nth-child(5n+1){ margin-left: 0; }*/ } .product_head_txt{ width: 54.9%; } .product_head_txt .ttl_primary { font-size: 28px; line-height: 1.75; letter-spacing: 0.03em; text-align: left; margin-bottom: 40px; } .product_head_txt .ttl_secondary { font-size: 20px; line-height: 1.75; letter-spacing: 0.03em; } .product_head_price{ margin-top: 40px; } .product_head_price .price-item{ font-size: 14px; font-weight: 500; } .product_head_price_tax{ font-size: 10px; font-weight: normal; } .product_head_list{ border-top: 1px solid #e9e9e9; border-bottom: 1px solid #e9e9e9; margin-top: 40px; padding: 40px 0; } .product_head_list_item{ display: flex; } .product_head_list_item h4{ width: 60px; margin-right: 20px; } .product_head_list_item:not(:first-child){ margin-top: 10px; } .product_head_txt .product-form{ margin-top: 40px; padding: 0; max-width: none!important; display: flex; justify-content: space-between; } .product_head_txt .product-form__item{ display: flex; flex-direction: row; max-width: none!important; margin-bottom: 0; flex-basis: auto; } .product-form__controls-group.product-form__controls-group--submit { width: 100%; } @media only screen and (max-width: 767px) { .product-form__controls-group.product-form__controls-group--submit { margin-bottom: 30px; } } .product_head_txt .product-form__cart-submit, .product_head_txt .shopify-payment-button{ width: 33.33%; min-width: 180px; } .product_head_txt .product-form__cart-submit, .product_head_txt .shopify-payment-button .shopify-payment-button__button{ font-size: 20px; font-weight: 700; line-height: 1.75; color: #333333; text-align: center; cursor: pointer; border-radius: 0; transition: all 0.2s; box-sizing: border-box; min-height: 0; margin-bottom: 0; opacity: 1; } .shopify-payment-button{ margin-left: 20px; } .product_head .product_head_txt .product-form__cart-submit { background: #fed815; width: 420px; height: 90px; border-radius: 45px; padding: 0; display: flex; justify-content: center; align-items: center; column-gap: 13px; } .product_head .product_head_txt .product-form__cart-submit:hover, .product_head .product_head_txt .product-form__cart-submit:hover span { opacity: 0.8; color: initial; } .product_head .product_head_txt .product-form__cart-submit img { width: 98px; height: auto; padding-top: 11px; } .product-form__cart-submit-text{ display: flex; justify-content: center; align-items: center; } .product-form__cart-submit-icon{ width: 19px; display: block; margin-right: 15px; position: relative; top: -1.5px; } .product_head_txt .product-form__cart-submit .product-form__cart-submit-icon svg{ width: 19px; } .product_head .product_head_txt .product-form__cart-submit[aria-disabled]{ cursor: default; opacity: 0.6!important; pointer-events: none; font-family: "Helvetica Neue" , Helvetica , Arial, Verdana, 'Noto Sans JP', sans-serif; } .product_head .product_head_txt .shopify-payment-button .shopify-payment-button__button{ background: #212121!important; color: #fff; border: 1px solid #212121; } .product_head_txt .product-form__cart-submit svg, .product_head_txt .shopify-payment-button .shopify-payment-button__button svg{ width: 16px; height: auto; } #BIS_trigger { background: #212121!important; color: #fff; border: 1px solid #212121; font-size: inherit!important; font-weight: 400; line-height: 1.75; text-align: center; cursor: pointer; border-radius: 0; padding: 18px 25px; transition: all .2s; box-sizing: border-box; min-height: 0; margin-left: 20px; margin-bottom: 0; opacity: 1!important; } @media only screen and (min-width: 768px) { .product_head .product_head_txt .shopify-payment-button .shopify-payment-button__button:hover, #BIS_trigger:hover{ background: #fff!important; color: #212121; border: 1px solid #666; } } .product_head .product_head_txt .product-form__error-message-wrapper{ margin-left: 0; } .product_head .product_head_txt .product-form__error-message{ margin-left: 0; color: #cd1536; } .product_body{ margin-top: 50px; margin-bottom: 50px; } .product_body_container { display: flex; flex-wrap: wrap; justify-content: flex-start; column-gap: 21px; } .product_body_item{ width: calc(100% / 3 - (42px / 3)); } .product_body_item_txt{ margin-top: 25px; } .product_body_item:nth-child(n+4){ margin-top: 60px; } .product_description{ margin: 50px 0 200px; } .product_description_item:not(:first-child){ margin-top: 40px; } .product_other{ padding-top: 160px; } .product_description .detail_section_panel_item { width:100%; background: #f0f1f4; padding: 40px 30px; } .product_description_panel_item__title { font-size: 14px; font-weight: 600; letter-spacing: .04em; line-height: 1.7; margin-bottom: 20px; } .panel_item__text { font-size: 14px; letter-spacing: .04em; line-height: 1.7; } .detail_section_panel_item .more, .detail_section_panel_item .close { padding-top: 15px; } @media only screen and (max-width: 767px) { .product_description .detail_section_tab__item { width: calc((100% - 10px) / 2); height: 50px; line-height: 1.38; text-align: center; } .product_description .detail_section_panel_item { width: 100%; padding: 20px; } } @media only screen and (max-width: 767px) { .product_head{ padding-top: 80px; display: block; } .product_head_img{ width: 100%; } .product_head_img_thumb{ padding-top: 10px; } .product_head_txt{ margin-top: 40px; width: 100%; } .product_head_txt .ttl_primary{ font-size: 20px; margin-bottom: 20px; } .product_head_txt .ttl_primary br { display: none; } .product_head_price{ margin-top: 20px; } .product_head_list{ margin-top: 30px; padding: 30px 0; } .product_head_list_item h4{ width: 45px; margin-right: 10px; } .product_head_txt .product-form{ margin-top: 30px; display: block; } .shopify-payment-button, #BIS_trigger{ margin-left: 0; margin-top: 15px; } .product_head_txt .product-form__item{ display: block; } .product_head .product_head_txt .product-form__cart-submit { width: 100%; min-width: 0; font-size: 13px; height: 60px; column-gap: 9px; } .product_head .product_head_txt .product-form__cart-submit img { width: 63px; height: auto; padding-top: 7px; } .product_body{ display: block; margin-top: 35px; } .product_body_item{ width: 100%; } .product_body_item_txt{ margin-top: 20px; } .product_body_item:nth-child(n+2){ margin-top: 20px; } .product_description{ padding: 30px 0 100px; margin: 0; } .product_description_item:not(:first-child){ margin-top: 30px; } .product_other{ padding-top: 80px; } } /* ---------------------------- pages ---------------------------- */ .page_title_wrapper { margin-top: 70px; margin-bottom: 80px; } @media screen and (max-width: 749px) { .page_title_wrapper { margin-top: 40px; margin-bottom: 46px; } } .page_title { font-size: 24px; letter-spacing: 0.06em; font-family: var(--text-family); font-weight: 600; margin-botto: 6px; } @media screen and (max-width: 899px) { .page_title { font-size: 24px; } } @media screen and (max-width: 749px) { .page_title { font-size: 20px; } } /* ----------------------------contact ---------------------------- */ .page-contact-form { background: #fff; position: unset !important; font-size: 14px; } .page-contact-form .page_section { max-width: 780px; margin: 0 auto; } .form_item:not(:first-of-type){ margin-top: 40px; } .form_label{ display: block; } .form_label span{ margin-left: 8px; padding: 2px 4px; border: solid 1px #333; border-radius: 2px; background-color: #333; color: #fff; font-size: 10px; } .form_label span.any{ background: #fff; color: #333; } .form_input{ display: block; margin-top: 15px; background-color: #f0f0f0; border: 0; width: 100%; height: 44px; padding: 10px; box-sizing: border-box; } .form_textarea{ display: block; margin-top: 15px; background-color: #f0f0f0; border: 0; width: 100%; height: 180px; padding: 10px; box-sizing: border-box; } .form_item input::placeholder, .form_item textarea::placeholder{ color: #999; letter-spacing: 1.5px; } .form_item input::-webkit-search-cancel-button, .form_item input::-webkit-search-decoration { -webkit-appearance: none; } .form_caption{ margin-top: 15px; font-size: 10px; } .form_caption img, .form_caption svg{ width: 100px; } .form_submit{ margin-top: 40px; text-align: center; } .form_submit input:not[type="checkbox"]{ line-height: 1.35; padding: 20px 25px; cursor: pointer; border-radius: 0; transition: all 0.2s; background: #212121; color: #fff; border: 1px solid #212121; } .form_submit input[type="checkbox"]{ border: 1px solid var(--color-border-form); background-color: var(--color-text-field); color: var(--color-text-field-text); max-width: 100%; line-height: 1.2; border-radius: 2px; } .form_submit input[type="submit"]{ background: #333; color: #fff; } @media only screen and (min-width: 768px) { .form_submit input:hover{ opacity: .8; } } @media only screen and (max-width: 767px) { .form_item:not(:first-of-type){ margin-top: 30px; } .form_input{ margin-top: 10px; } .form_submit{ margin-top: 30px; } .form_submit input{ padding: 18px 25px; } } /* globo form */ .page-contact-form { background: #fff; position: unset !important; font-size: 14px; } .page-contact-form .page_section { max-width: 780px; margin: 0 auto; } .page-contact-form .globo-form-app.boxed-layout .g-container { padding: 0; } .globo-paragraph a { text-decoration: underline; } .globo-form-app { box-shadow: none !important; } .globo-form-app .panels { z-index: 0 !important; } .globo-form-control .label-content { font-family: var(--text-family); font-size: 14px; font-weight: 400; line-height: 2; letter-spacing: 1.25px; color: #333333; text-align: left; -webkit-text-size-adjust: 100%; background-color: transparent; } .globo-form-control .text-danger { font-size: 0 !important; } .globo-form-control .text-danger:before { content: '必須'; margin-left: 8px; padding: 2px 4px; border: solid 1px #333; border-radius: 2px; background-color: #333; color: #fff; font-size: 10px; } @media only screen and (max-width: 767px) { .gfb__dropzone--placeholder--title { font-size: 12px; } .help-text.globo-description { font-size: 10px; } } /* ----------------------------law ---------------------------- */ .law_article{ padding: 60px 0; border-bottom: 1px solid #e9e9e9; } .law_article:first-of-type { border-top: 1px solid #e9e9e9; } .law_txt_mail{ width: 110px; } @media only screen and (max-width: 767px) { .law_article { padding: 40px 0; } } /* ----------------------------policy ---------------------------- */ .policy_article{ padding: 60px 0; border-bottom: 1px solid #e9e9e9; } .policy_article:first-of-type { margin-top: 60px; border-top: 1px solid #e9e9e9; } .policy_table{ margin-top: 20px; width: 100%; border-collapse: collapse; } .policy_table th{ padding: 20px; font-weight: normal; background: #f9f9f9; border: 1px solid #e0e0e0; } .policy_table td{ padding: 20px; border: 1px solid #e0e0e0; } .policy_table + p{ margin-top: 20px; } @media only screen and (max-width: 767px) { .policy_article { padding: 40px 0; } } /* ----------------------------terms ---------------------------- */ .terms_article{ padding: 60px 0; border-bottom: 1px solid #e9e9e9; } .terms_article:first-of-type { border-top: 1px solid #e9e9e9; } .terms_article .ttl_secondary { margin-bottom: 40px; } .terms_item:not(:first-of-type){ margin-top: 40px; } @media only screen and (max-width: 767px) { .terms_article { padding: 40px 0; } .terms_item:not(:first-of-type){ margin-top: 30px; } } /* ----------------------------legal ---------------------------- */ .regal_mail { display: flex; align-items: center; } .regal_mail img { height: 1rem; width: auto; } /* ----------------------------faq ---------------------------- */ .faq_article_wrap{ padding-top: 90px; margin-top: -90px; /* anker link */ } .faq_article{ padding: 60px 0; border-bottom: 1px solid #e9e9e9; } .faq_article:first-of-type { border-top: 1px solid #e9e9e9; } .faq_article_q, .faq_article_a { display: flex; align-items: baseline; } .faq_article_q { margin-bottom: 30px; } .faq_article_q_icon, .faq_article_a_icon { flex-shrink: 0; width: 28px; height: 28px; margin-right: 15px; border-radius: 28px; font-weight: 500; text-align: center; line-height: 28px; font-size: 14px; box-sizing: border-box; } .faq_article_q_icon { background-color: #212121; color: #fff; } .faq_article_a_icon { border: solid 1px #666; } .faq_article_q .ttl_secondary{ margin-bottom: 0; } .faq_article_a_txt p + p, .faq_article_a_txt p + .ttl_tertiary{ margin-top: 30px; } .faq_article_a_txt p a{ text-decoration: underline; } @media only screen and (max-width: 767px) { .faq_article_wrap{ padding-top: 60px; margin-top: -60px; } .faq_article { padding: 40px 0; } .faq_article_q { margin-bottom: 20px; } .faq_article_a_txt p + p, .faq_article_a_txt p + .ttl_tertiary{ margin-top: 20px; } } /* ----------------------------404 ---------------------------- */ .template-404 .page_section p { text-align: center; } /* ----------------------------search ---------------------------- */ .search_section { margin-top: 93px; padding-bottom: 160px; } @media only screen and (max-width: 767px) { .search_section { margin-top: 40px; padding-bottom: 80px; } } .template-search .heading_secondary__title { text-transform: unset; margin-bottom: 15px; } .template-search .article_list_item__image img { position: unset; object-fit: cover; max-height: unset; } .template-search .list-view-item:last-child{ padding-bottom: 22px; margin-bottom: 22px; } @media only screen and (max-width: 640px) { .template-search .product_list_item a { flex-grow: 1; } .template-search .article_list_item__image img { width: 90px; } } .search_not_found{ text-align: center; margin-bottom: 40px; } .template-search .page_section .header_search_form{ padding-top: 0; padding-bottom: 0; } .template-search .page_section .header_search_form { width: 630px; margin: 0 auto; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-sizing: border-box; box-sizing: border-box; font-family: inherit; } .template-search .page_section .search_form_input { background-color: #fff; border: 0; height: 60px; padding: 10px 10px 10px 30px; border-radius: 30px 0 0 30px !important; font-size: 16px; } .template-search .page_section .search_form_submit { border: 0; width: 70px; height: 60px; -webkit-box-sizing: border-box; box-sizing: border-box; cursor: pointer; line-height: 1; border-radius: 0 30px 30px 0 !important; background: #fff url('data:image/svg+xml;utf8,') no-repeat left 10px center/27px 27px; padding: 0; } @media only screen and (max-width: 640px) { .template-search .page_section .header_search_form { width: 100%; } .template-search .page_section .search_form_input { width: calc(100% - 50px); height: 44px; border-radius: 22px 0 0 22px!important; padding: 10px 10px 10px 20px; } .template-search .page_section .search_form_submit { padding: 0; width: 50px; height: 44px; border-radius: 0 22px 22px 0 !important; background-size: 17px 17px; } } /* ----------------------------pager ---------------------------- */ .main .pagination{ display: flex; align-items: center; justify-content: center; padding-top: 0; margin-top: 100px; } .pagination .btn--narrow{ padding: 15px; width: 20px; height: 20px; border: 1px solid #666; display: flex; align-items: center; justify-content: center; transition: all 0.2s; opacity: 1!important; /*debug*/ border-radius: 0; } .pagination button.btn--narrow{ opacity: 0!important; } .pagination .btn--narrow svg{ height: 100%; width: auto; } .pagination .btn--narrow:hover{ border: 1px solid #212121; background: #212121; } .pagination .btn--narrow:hover .icon_arrow_left, .pagination .btn--narrow:hover .icon_arrow_right{ fill: #fff; } /* ----------------------------login ---------------------------- */ .page_section .collection-header{ padding-top: 0!important; margin-bottom: 0!important; } .form-vertical input, .form-vertical select, .form-vertical .disclosure__toggle, .form-vertical textarea { box-sizing: border-box; } .page_section label{ font-weight: 400; } .page_section input[type="text"], .page_section input[type="email"], .page_section input[type="password"], .page_section input[type="tel"], .page_section select { display: block; margin: 15px 0 0; background-color: #f0f0f0; border: 0; width: 100%; height: 44px; padding: 10px; box-sizing: border-box; } .page_section .btn_submit { line-height: 1.35; padding: 20px 25px; cursor: pointer; border-radius: 0; transition: all 0.2s; background: #212121; color: #fff; border: 1px solid #212121; opacity: 1!important; width: auto; display: inline-block; } .page_section #customer_login .btn_submit { margin: 10px 0 40px; } .page_section .form_guest .btn_submit{ margin: 10px 0 0; } @media only screen and (min-width: 768px) { .page_section .btn_submit:hover{ background: #fff; color: #212121; } } .form-message--error{ color: #cd1536; border: 1px solid #cd1536; background: transparent; padding: 30px; box-sizing: border-box; } .form-message--error .form-message__link, .form-message--error a { color: #cd1536; } .input-error-message{ color: #cd1536; margin: 10px 0 0; } .form-message--error .form-message__link:hover, .form-message--error .form-message__link:focus, .form-message--error a:hover, .form-message--error a:focus { color: #cd1536; } .shopify-challenge__container{ padding: 0 20px; box-sizing: border-box; } .shopify-challenge__container form{ margin-top: 40px; } .shopify-challenge__button{ margin-top: 40px!important; } .form-message--success { background-color: transparent; padding: 30px; box-sizing: border-box; } .page_section .form-message--success { margin: 0 0 100px!important; } #RecoverPasswordForm .ttl_primary + P{ padding-bottom: 40px; } .form_guest{ padding-top: 40px; margin-top: 40px; text-align: center; border-top: 1px solid #e9e9e9; } #customer_register_link{ border-bottom: 1px solid #212121; padding-bottom: 2px; } @media only screen and (max-width: 767px) { .page_section .btn_submit { padding: 18px 25px; } .page_section #customer_login .btn_submit { margin: 10px 0 30px; } .form-message--error{ padding: 20px; } .shopify-challenge__container form{ margin-top: 30px; } .shopify-challenge__button{ margin-top: 30px!important; } .form-message--success { padding: 20px; } .page_section .form-message--success { margin: 0 0 50px!important; } #RecoverPasswordForm .ttl_primary + P{ padding-bottom: 30px; } .form_guest{ padding-top: 30px; margin-top: 30px; } } /* ----------------------------cart ---------------------------- */ .page_section .cart__row{ border-bottom: 1px solid #e9e9e9; } .page_section .cart td { padding-top: 40px; padding-bottom: 40px; } .page_section .cart .cart__meta{ padding-right: 15px; } .page_section .cart__image-wrapper { padding-right: 30px; flex: 0 0 auto; width: 95px; } .page_section .cart__image { max-height: none; } .page_section .cart__qty-input{ background-color: #f0f0f0; border: 0; } @media only screen and (max-width: 749px) { .cart th { padding: 30px 22px 20px; } .page_section .cart_th_product{ width: 65%; } .page_section .cart_th_price{ width: 35%; } .page_section .cart td { padding-top: 30px; padding-bottom: 30px; } .page_section .cart__image-wrapper { padding-right: 20px; width: 60px; } .cart__row .ttl_secondary{ font-size: 12px; } .page_section .cart__qty-input{ width: 44px; } } /* ----------------------------cart_popup ---------------------------- */ .cart-popup{ box-sizing: border-box; margin-top: 0; } .cart-popup__close{ width: 43px; } .cart-popup__cta-link{ box-sizing: border-box; } .cart-popup-item__image-wrapper{ flex-basis: auto; width: 95px; } /* ----------------------------account ---------------------------- */ .account_article{ padding: 60px 0; border-bottom: 1px solid #e9e9e9; } .account_article:first-of-type { border-top: 1px solid #e9e9e9; } .account_logout{ margin-top: 40px; text-align: center; } .account_logout a{ border-bottom: 1px solid #212121; padding-bottom: 2px; } @media only screen and (max-width: 767px) { .account_article{ padding: 40px 0; } .account_logout{ margin-top: 30px; text-align: center; } } /* ----------------------------account ---------------------------- */ .address_back{ text-align: center; } .txt_link_underline{ border-bottom: 1px solid #212121; padding-bottom: 2px; } .address_list { margin-top: 60px; } .address_list_item { padding: 60px 0; border-bottom: 1px solid #e9e9e9; } .address_list_item:first-child { border-top: 1px solid #e9e9e9; } .address_list_item .address { margin: 0!important; } .address_list_item .address + .form-vertical{ margin-top: 40px; } .address_add{ margin-top: 100px; text-align: center; } #AddressNewForm{ margin-top: 40px; padding-bottom: 60px; border-bottom: 1px solid #e9e9e9; } .address_btn_list{ margin-top: 20px; display: flex; } .template-customers-addresses .form_submit .text-link{ border-bottom: 1px solid #212121; padding-bottom: 2px; } .template-customers-addresses .form_submit .text-link:hover{ opacity: 0.8; } .address_btn_list > li:not(:first-child){ margin-left: 10px; } @media only screen and (max-width: 767px) { .address_list { margin-top: 40px; } .address_list_item { padding: 40px 0; } .address_list_item .address + .form-vertical{ margin-top: 30px; } .address_add{ margin-top: 50px; } } /* ----------------------------activate account ---------------------------- */ .form_submit_cancel{ margin-top: 40px; text-align: center; } .form_submit_cancel .text-link{ padding: 0 0 2px; border-top: 0; border-left: 0; border-right: 0; border-bottom: 1px solid #212121; background: transparent; } .form_submit_cancel .text-link:hover{ opacity: 0.8; } @media only screen and (max-width: 767px) { .form_submit_cancel{ margin-top: 30px; } } @media only screen and (max-width: 749px) { .order-table th, .order-table td { width: calc(100% - 2em); } } /* ---------------------------- order ---------------------------- */ .account_article.account_article_order{ border-top: 0; padding-top: 0; margin-top: 60px; } .account_article .order-table{ font-size: inherit!important; border: 0; margin-top: 40px; } .order-table th:before, .order-table td:before{ font-size: inherit!important; } .order-table th, .order-table td { padding-left: 10px; padding-right: 10px; } .account_return a { border-bottom: 1px solid #212121; padding-bottom: 2px; } @media only screen and (max-width: 767px) { .account_article .order-table{ margin-top: 30px; } } /* ---------------------------- product ---------------------------- */ .page_section .filters-toolbar__input-wrapper{ margin: 0; } .page_section .filters-toolbar__item-child{ display: flex; align-items: center; /* IE */ } .page_section .filters-toolbar__item-child:first-child { margin-right: 40px; } .page_section .filters-toolbar__label.select-label { margin-right: 10px; font-size: inherit!important; } .page_section .filters-toolbar__input{ margin: 0; padding-left: 15px; padding-right: 35px; } .page_section .select-group .icon{ z-index: 1; right: 12px; width: 9px; height: auto; } .collection-header + .product_list{ margin-top: 60px; } @media only screen and (max-width: 767px) { .page_section .filters-toolbar__item-wrapper{ justify-content: flex-start; } .page_section .filters-toolbar__item-child{ display: block; } .page_section .filters-toolbar__item-child:first-child { margin-right: 20px; } .page_section .filters-toolbar__label{ margin: 0 0 8px; } .page_section .filters-toolbar__input{ max-width: 140px; } .collection-header + .product_list{ margin-top: 30px; } } /* ---------------------------- Collection ---------------------------- */ .section_collection_template .page_section { padding-bottom: 160px; } @media screen and (max-width: 749px) { .section_collection_template .page_section { padding-bottom: 80px; } } .collection_title_wrapper { margin-top: 70px; margin-bottom: 80px; } @media screen and (max-width: 749px) { .collection_title_wrapper { margin-top: 40px; margin-bottom: 46px; } } .collection_title { font-size: 24px; letter-spacing: 0.06em; font-family: var(--text-family); font-weight: 600; margin-botto: 6px; } @media screen and (max-width: 899px) { .collection_title { font-size: 24px; } } @media screen and (max-width: 749px) { .collection_title { font-size: 20px; } } .collection_description { font-size: 16px; letter-spacing: 0.06em; } @media screen and (max-width: 749px) { .collection_description { font-size: 13px; } } .collection_link { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-flex-wrap: wrap; -ms-flex-wrap: wrap; flex-wrap: wrap; gap: 11px 12px; margin-top: 45px; } @media screen and (max-width: 749px) { .collection_link { gap: 8px; margin-top: 18px; } } .collection_link li a { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; padding: 12px 20px; font-size: 14px; text-align: center; letter-spacing: 0.04em; border-radius: 100vh; line-height: 1.2; word-break: break-word; } @media screen and (max-width: 749px) { .collection_link li a { padding: 12px 17px; font-size: 13px; } } .collection_link li.current a { border: 1px solid #333333; background: #333333; color: #fff; } .tag-nav-blocks { list-style-type: none; border-radius: 100vh; border: 1px solid #b2b9c1; text-decoration: none; } .tag-nav-blocks:hover { background-color: #333; color: #fff; } .tag-nav-blocks:hover a { opacity: 1; } .section-collection { flex-wrap: wrap; } /* ---------------------------- Collection Categories ---------------------------- */ .section-collection-categories .heading_secondary { margin-bottom: 100px; } @media screen and (max-width: 749px) { .section-collection-categories .heading_secondary { margin-bottom: 50px; } } /* ---------------------------- Blog Magazine ---------------------------- */ .blog_title { font-size: 24px; letter-spacing: 0.06em; font-weight: bold; line-height: 1.2; margin-top: 100px; } /* ---------------------------- Pagination ---------------------------- */ .magazine_pager { position: relative; margin: 95px auto 0; width: 320px; height: 70px; display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; display: flex; -webkit-box-align: center; -webkit-align-items: center; -ms-flex-align: center; align-items: center; -webkit-box-pack: center; -webkit-justify-content: center; -ms-flex-pack: center; justify-content: center; } @media screen and (max-width: 749px) { .magazine_pager { margin: 50px auto 0; width: 240px; height: 45px; } } .magazine_pager__text { font-size: 16px; text-align: center; line-height: 1; } @media screen and (max-width: 749px) { .magazine_pager__text { font-size: 13px; } } .magazine_pager__prev, .magazine_pager__next { position: absolute; top: 0; width: 70px; height: 70px; } @media screen and (max-width: 749px) { .magazine_pager__prev, .magazine_pager__next { width: 45px; height: 45px; } } .magazine_pager__prev a, .magazine_pager__next a { position: relative; display: block; text-indent: 100%; overflow: hidden; white-space: nowrap; width: 100%; height: 100%; border-radius: 100vh; border: 1px solid #a8afb9; } .magazine_pager__prev a::before, .magazine_pager__next a::before { content: ""; position: absolute; top: 50%; left: 50%; opacity: 1; width: 12px; height: 12px; border-top: 3px solid #333333; } @media screen and (max-width: 749px) { .magazine_pager__prev a::before, .magazine_pager__next a::before { width: 10px; height: 10px; border-top: 2px solid #333333; } } .magazine_pager__prev { left: 0; } .magazine_pager__prev a::before { border-left: 3px solid #333333; -webkit-transform: translate(-50%, -50%) rotate(-45deg); transform: translate(-50%, -50%) rotate(-45deg); margin-left: 3px; } @media screen and (max-width: 749px) { .magazine_pager__prev a::before { border-left: 2px solid #333333; margin-left: 2px; } } .magazine_pager__next { right: 0; } .magazine_pager__next a::before { border-right: 3px solid #333333; -webkit-transform: translate(-50%, -50%) rotate(45deg); transform: translate(-50%, -50%) rotate(45deg); margin-left: -3px; } @media screen and (max-width: 749px) { .magazine_pager__next a::before { border-right: 2px solid #333333; margin-left: -2px; } } /* ---------------------------- 240126追加 ---------------------------- */ .product_body { max-width: 480px; margin: 50px auto 0; } .product_body { font-size: 14px; letter-spacing: .04em; line-height: 1.7; } .product_body h1, .product_body h2, .product_body h3, .product_body h4, .product_body p, .product_body li { margin-bottom: .5em; } .product_body h1 { font-size: 30px; } .product_body h2 { font-size: 22px; } .product_body h3 { font-size: 18px; } .product_body h4 { font-size: 15px; } .rte img { float: none !important; } @media only screen and (max-width: 767px) { .product_body { max-width: unset; margin: 35px auto 0; } .product_head_txt .ttl_secondary { font-size: 14px; } } /* New CSS */ .template-search .list-view-item{ display: none; }