@charset "UTF-8"; /*** The new CSS reset - version 1.7.3 (last updated 7.8.2022) GitHub page: https://github.com/elad2412/the-new-css-reset Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property - The "symbol *" part is to solve Firefox SVG sprite bug */ *:where(:not(html, iframe, canvas, img, svg, video, audio, svg *, symbol *)) { all: unset; display: revert; } /* Preferred box-sizing value */ *, *::before, *::after { box-sizing: border-box; } /* Reapply the pointer cursor for anchor tags */ a, button { cursor: revert; } /* Remove list styles (bullets/numbers) */ ol, ul, menu { list-style: none; } /* For images to not be able to exceed their container */ img { max-width: 100%; } /* removes spacing between cells in tables */ table { border-collapse: collapse; } /* Safari - solving issue when using user-select:none on the text input doesn't working */ input, textarea { -webkit-user-select: auto; -moz-user-select: auto; 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; } /* 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])) { -webkit-line-break: after-white-space; overflow-wrap: break-word; -moz-user-modify: read-write; -webkit-user-modify: read-write; -webkit-user-select: auto; -moz-user-select: auto; user-select: auto; } /* apply back the draggable feature - exist only in Chromium and Safari */ :where([draggable=true]) { -webkit-user-drag: element; } /** * ルートフォントサイズpx（ブラウザ標準フォントサイズ） */ /** * ベースフォントサイズpx */ /** * ベース行の高さ */ /** * メディアクエリブレイクポイント Tailwind202303時点基準 */ /** * メインコンテンツ幅 */ /** * pxをremで返す * * @function rem * @param {number} $number pxサイズ * @var {number} $root-font-size ブラウザ標準フォントサイズ（16px） * @return {number} 単位ありremサイズ * @example * $root-font-size : 16px の場合 * rem(10) 10px => 0.625rem * rem(16) 16px => 1rem * rem(24) 24px => 1.5rem * rem(32) 32px => 2rem */ /** * 単位を除いた数値を返す * * @function strip-unit * @param {number} $value 単位あり数値 * @return {number} 単位なし数値 * @example * strip-unit(16px) => 16 * strip-unit(1rem) => 1 */ /** * clampを使用した可変サイズ指定関数 * * @function fluid * @param {number} $min-px 最小サイズpx * @param {number} $max-px 最大サイズpx * @param {number} $min-viewport-px 最小ビューポートpx * @param {number} $max-viewport-px 最大ビューポートpx * @var {number} $min 最小サイズ * @var {number} $max 最大サイズ * @return {string} clamp * @example * fluid(16, 32) => clamp(1rem, 1.67vw + 0.667rem, 2rem) * 320pxから1280pxの間で16pxから32pxまでサイズが変わる * fluid(10px, 18px, 480px, 1024px) => clamp(0.625rem, 1.47vw + 0.184rem, 1.125rem) * 480pxから1024pxの間で10pxから18pxまでサイズが変わる */ /** * メディアクエリmixin * * @mixin mq * @param {number} $size ブレイクポイント（単位あり） * @param {string} $width max or min セット defalut max * @param {bool} or {string} $orientation(false, portrait, landscape) * @example * @include mq(320px) { => @media (max-width:320px) { * @include mq(480px, min, portrait) { => @media (min-width:480px) and (orientation: portrait) */ /** * clearfix mixin * float回り込み解除処理 * * @mixin clearfix */ /** * px=>rem 変換してフォントサイズ指定 mixin * * @mixin font-size * @param {number} $px 単位なしpxサイズ */ /** * 可変フォントサイズ mixin * * @mixin fluid-font-size * @param {number} $min-px 最小サイズpx * @param {number} $max-px 最大サイズpx * @param {number} $min-viewport-px 最小ビューポートpx * @param {number} $max-viewport-px 最大ビューポートpx */ /** * 長文省略 mixin * * @mixin line-clamp * @param {number} $lines 表示行数 */ /** * アイコンフォント mixin * * @mixin icon-font * @param {string} $code 文字コード（エスケープ文字¥不要） * @param {number} $px pxサイズ * @param {number} $weight フォントウェイト * @param {string} $font-family フォントファミリー * @use @include icon-font("f0c9", 16, 400, Font Awesome 6 Pro); */ :root { /* フォント */ --base-font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Noto Sans JP", sans-serif; /* 基本（日本語） */ --en-font-family: "Google Sans Flex", sans-serif; /* 英文専用。英語表記の箇所にだけ指定する */ --base-font-size: 16; /* カラー */ --main-color: #006934; /* メインカラー */ --font-color: #222; /* 基本文字色 */ --black-color: #222; /* 黒 */ --sub-font-color: #383838; /* サブ文字色 */ --border-color: #ccc; /* 罫線色 */ --sub-color: #ccc; /* サブカラー */ } body { font-family: var(--base-font-family); font-size: 1rem; line-height: 1.6; color: var(--font-color); background: #fff; } body.is-active { overflow: hidden; } /* SP専用の改行ユーティリティ。PCでは折り返さず1行で見せる（
） */ .br-sp { display: none; } @media (max-width: 639.999px) { .br-sp { display: inline; } } /* スクロールで下から出現するリビール演出（JS observer が is-active を付与）。 lead コンセプト等の強調用途のため、基準 2s より少しゆっくりの 2.4s */ .js-fade-up { opacity: 0; transform: translate(0, 14px); transition: opacity 2.4s cubic-bezier(0.16, 1, 0.3, 1), transform 2.4s cubic-bezier(0.16, 1, 0.3, 1); } .js-fade-up.is-active { opacity: 1; transform: translate(0, 0); } .wrapper { font-size: clamp(0.9375rem, 0.15625vw + 0.875rem, 1rem); font-weight: 400; } a * { transition: opacity 0.4s ease-in-out; } a:hover *:not(img) { opacity: 0.7; } /** * ヘッダー */ .header { position: relative; z-index: 1000; width: 100%; --header-logo-color: var(--main-color); --header-fg-color: var(--font-color); color: var(--header-fg-color); } .index .header { position: absolute; top: 0; left: 0; --header-logo-color: #fff; --header-fg-color: #fff; } /* お知らせティッカー(背景: main-color / バーは全幅) */ .header__news-ticker { display: flex; justify-content: center; align-items: center; gap: clamp(0.5rem, 1.25vw + 0rem, 1rem); padding: clamp(0.375rem, 0vw + 0.375rem, 0.375rem) clamp(0.75rem, 1.25vw + 0.25rem, 1.25rem); background: var(--main-color); } /* 前後送りの矢印ボタン */ .header__news-arrow { flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: #fff; cursor: pointer; } .header__news-arrow .material-symbols-outlined { font-size: clamp(1.125rem, 0.625vw + 0.875rem, 1.375rem); font-variation-settings: "wght" 400; } /* お知らせ本文(JSで無限横スライド) */ .header__news-ticker-wrapper { position: relative; overflow: hidden; height: clamp(1.125rem, 0.3125vw + 1rem, 1.25rem); flex: 1 1 auto; min-width: 0; } @media (min-width: 768px) { .header__news-ticker-wrapper { flex: 0 0 60%; } } .header__news-list { display: flex; width: 100%; height: 100%; transition: transform 0.5s cubic-bezier(0.645, 0.045, 0.355, 1); } .header__news-list li { flex: 0 0 100%; width: 100%; display: flex; align-items: center; justify-content: center; } .header__news-list li a { display: block; width: 100%; font-size: clamp(0.8125rem, 0.15625vw + 0.75rem, 0.875rem); line-height: 1.4; text-align: center; color: #fff; text-decoration: underline; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ヘッダー本体(背景なし) */ .header__inner { display: flex; align-items: center; padding: clamp(1.125rem, 2.8125vw + 0rem, 2.25rem) clamp(1rem, 5vw - 1rem, 3rem); } @media (max-width: 639.999px) { .header__inner { position: relative; } } .header__logo { flex-shrink: 0; width: clamp(5.625rem, 4.6875vw + 3.75rem, 7.5rem); line-height: 1; } .header__logo a { display: block; } .header__logo svg { display: block; width: 100%; height: auto; } .header__logo svg path { fill: var(--header-logo-color); } @media (max-width: 639.999px) { .header__logo { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } } .header__nav { flex: 1 1 auto; min-width: 0; } .header__nav ul { display: flex; align-items: center; justify-content: center; gap: clamp(0.875rem, 1.5625vw + 0.25rem, 1.5rem); } .header__nav li a { font-family: var(--en-font-family); font-size: clamp(0.75rem, 0.3125vw + 0.625rem, 0.875rem); font-weight: 200; line-height: 1.2; letter-spacing: 0.04em; white-space: nowrap; color: var(--header-fg-color); } @media (max-width: 1023.999px) { .header__nav { display: none; } } .header__iconset { display: flex; align-items: center; gap: clamp(0.75rem, 0.625vw + 0.5rem, 1rem); flex-shrink: 0; margin-left: auto; } .header__iconset a { display: flex; align-items: center; justify-content: center; color: var(--header-fg-color); } .header__iconset .material-symbols-outlined { font-size: clamp(1.25rem, 0.3125vw + 1.125rem, 1.375rem); font-variation-settings: "wght" 400; } .header__iconset li:first-child .material-symbols-outlined, .header__iconset li:last-child .material-symbols-outlined { font-size: clamp(1.5rem, 0.3125vw + 1.375rem, 1.625rem); } @media (max-width: 639.999px) { .header__iconset li:last-child { display: none; } } .header__hamburger { display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-left: clamp(0.75rem, 0.625vw + 0.5rem, 1rem); color: var(--header-fg-color); cursor: pointer; } .header__hamburger .material-symbols-outlined { font-size: clamp(1.375rem, 0.625vw + 1.125rem, 1.625rem); font-variation-settings: "wght" 400; } @media (max-width: 639.999px) { .header__hamburger { order: -1; margin-left: 0; } } .sitename { background: #000; padding: clamp(0.5rem, 1.875vw - 0.25rem, 1.25rem) clamp(0.5rem, 1.875vw - 0.25rem, 1.25rem) clamp(0.25rem, 1.875vw - 0.5rem, 1rem); line-height: 1; width: clamp(5rem, 12.5vw + 0rem, 10rem); } .sitename .logo path { fill: #fff; } .gnav-btn { padding: 0 5px; } .gnav-btn .gnav-btn__inner { width: clamp(1.25rem, 1.7361111111vw + 0.4166666667rem, 2.5rem); } .gnav-btn .gnav-btn__line { display: block; transition: margin 0.2s 0.2s, transform 0.2s; height: 2px; border-radius: 3px; background-color: #000; } .gnav-btn .gnav-btn__line:nth-of-type(1), .gnav-btn .gnav-btn__line:nth-of-type(2) { margin-bottom: 2px; } .gnav-btn.is-active .gnav-btn__line { transition: margin 0.2s, transform 0.2s 0.2s; } .gnav-btn.is-active .gnav-btn__line:nth-of-type(1) { transform: rotate(-45deg); margin-bottom: -3px; } .gnav-btn.is-active .gnav-btn__line:nth-of-type(2) { opacity: 0; } .gnav-btn.is-active .gnav-btn__line:nth-of-type(3) { transform: rotate(45deg); margin-top: -3px; } .gnav { position: fixed; background: #000; color: #fff; width: 100%; height: 100vh; z-index: 9990; transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); overscroll-behavior-y: contain; } .gnav.is-active { transform: translateX(0); transition: transform 0.4s 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); } .gnav__block { overflow-y: scroll; padding: clamp(3.75rem, 3.125vw + 2.5rem, 5rem) clamp(0.625rem, 7.8125vw - 2.5rem, 3.75rem) 160px; height: 100%; } .gnav__block .basic__block { margin-top: 40px; } .gnav__block .basic__title { color: var(--sub-color); } .gnav__inner { margin-top: 20px; display: flex; align-items: center; flex-wrap: wrap; gap: clamp(1.25rem, 3.125vw + 0rem, 2.5rem); } .gnav__inner._vertical { flex-direction: column; align-items: flex-start; } .gnav__subtitle + .gnav__inner { margin-top: 10px; } .gnav__subtitle { margin-top: 20px; font-size: clamp(1.0625rem, 0.46875vw + 0.875rem, 1.25rem); line-height: 1.35; display: flex; align-items: center; font-weight: 800; } .gnav__subtitle:after { content: ""; display: inline-block; width: 30px; height: 1px; background: #fff; margin-left: clamp(0.25rem, 0.625vw + 0rem, 0.5rem); } .gnav__item { font-size: clamp(1rem, 0.625vw + 0.75rem, 1.25rem); line-height: 1.35; font-weight: 600; } .gnav__item._cart { position: relative; line-height: 1.35; } .gnav__item._cart .material-symbols-outlined { font-variation-settings: "wght" 300; } .gnav__item._cart .icon-cart__num { position: absolute; transform: translate(40%, -40%); top: 0; right: 0; width: 20px; height: 20px; border-radius: 50%; background: var(--accent-color); font-size: 12px; font-weight: bold; display: flex; justify-content: center; align-items: center; } .gnav__item._thin { font-weight: 400; } .gnav__icon-sns svg { width: 20px; height: 20px; } .gnav__icon-sns path, .gnav__icon-sns circle { fill: #fff; } .main { padding-top: 0; } .headnews { padding-top: clamp(2.625rem, 7.5vw - 0.375rem, 5.625rem); } @media (max-width: 639.999px) { .headnews { padding-top: 75px; } } .hero { position: relative; width: 100%; min-height: 100vh; min-height: 100svh; padding-bottom: clamp(3.75rem, 15.625vw - 2.5rem, 10rem); overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; background: url("https://gigaplus.makeshop.jp/KILEL2026/images/hero_sp.webp") no-repeat center center; background-size: cover; transform: scale(1.05); z-index: 0; } @media (min-width: 640px) { .hero::before { background-image: url("https://gigaplus.makeshop.jp/KILEL2026/images/hero_pc.webp"); } } .hero__video { position: absolute; inset: 0; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transform: scale(1.05); z-index: 1; } .hero._about { padding: clamp(2.625rem, 7.5vw - 0.375rem, 5.625rem) 0 0; } @media (max-width: 639.999px) { .hero._about { padding: 40px 0 0; } } .mainimg__inner { display: flex; justify-content: space-between; align-items: center; } .swiper-slide { display: block; } .swiper-horizontal { touch-action: auto !important; } .swiper-slide.swiper-slide-active .swiper-img img { transform: scale(1.1) translateX(-4%); } .swiper-img img { -o-object-fit: cover; object-fit: cover; transition: transform 6s ease-in; } .main-logo { width: 30%; margin-left: clamp(0.625rem, 1.5625vw + 0rem, 1.875rem); mix-blend-mode: difference; z-index: 2; animation: slide-rotate-hor-bottom 0.4s cubic-bezier(0.215, 0.61, 0.355, 1); font-size: clamp(1rem, 5.9375vw - 1.375rem, 3.375rem); color: #fff; font-weight: 800; } @media (max-width: 639.999px) { .main-logo { width: 23%; } } .main-logo path { stroke: #fff; transition: fill 0.2s 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .main-logo.is-active path { fill: #fff; } .about__title { display: block; transform: translateY(clamp(-2.5rem, -5.46875vw + 1.875rem, -0.3125rem)); -webkit-text-stroke: 0.3px #fff; color: transparent; transition: color 0.4s 0.4s cubic-bezier(0.55, 0.055, 0.675, 0.19); } .is-active .about__title { color: #fff; } @keyframes slide-rotate-hor-bottom { 0% { opacity: 0; transform: translateX(25%); } 100% { opacity: 1; transform: translateX(0); } } .mainimg__slider { position: relative; width: 80%; max-width: 1400px; z-index: 1; margin-right: 0 !important; margin-left: -10% !important; line-height: 1; } @media (max-width: 639.999px) { .mainimg__slider { width: 88%; } } .main__pv { width: 100%; height: auto; display: block; } .mainimg__slider-link { position: absolute; bottom: 0; left: 0; z-index: 10; transform: translate(-50%, 50%) skew(45deg, -45deg) scale(60%); } @media (max-width: 639.999px) { .mainimg__slider-link { transform: translate(-50%, 50%) skew(45deg, -45deg) scale(30%); } } .mainimg__slider-link a { opacity: 0; transition: opacity 0.3s ease-in-out; pointer-events: none; } .mainimg__slider-link a.is-active { opacity: 1; pointer-events: auto; } .mainimg__slider-link svg { width: 48px; height: 48px; animation: flow 1.8s ease-in-out 0s infinite; } @keyframes flow { 0% { transform: translate(-4%, 0); } 50% { transform: translate(12%, 0); } 100% { transform: translate(-4%, 0); } } .swiper__banner { overflow: hidden; width: 100%; } .swiper__banner .swiper-slide img { width: 100%; height: auto; display: block; } .swiper__mainimg { overflow: hidden; aspect-ratio: 16/9; } .swiper__mainimg.is-active { cursor: pointer; } .swiper__mainimg img { width: 100%; } .progress { position: absolute; transform: rotate(-90deg) translate(-50%, -50%) scale(1); z-index: 5; bottom: 0; left: 0; width: 84px; height: 84px; } @media (max-width: 639.999px) { .progress { transform: rotate(-90deg) translate(-50%, -50%) scale(0.4); } } .progress circle { fill: transparent; stroke: rgba(0, 0, 0, 0.8); stroke-width: 2; stroke-dasharray: 0 252; } .progress circle.is-init { animation: circle 5s linear infinite; } .progress circle.is-active { animation: circle 6s linear infinite; } .progress__bg { position: absolute; transform: rotate(-90deg) translate(-50%, -50%) scale(1); z-index: 4; bottom: 0; left: 0; width: 84px; height: 84px; } @media (max-width: 639.999px) { .progress__bg { transform: rotate(-90deg) translate(-50%, -50%) scale(0.4); } } .progress__bg circle { fill: transparent; stroke: rgba(255, 255, 255, 0.6); stroke-width: 2; stroke-dasharray: 252 252; } @keyframes circle { 0% { stroke-dasharray: 0 252; } 99.9%, to { stroke-dasharray: 252 252; } } .logo-scroll { mix-blend-mode: difference; position: absolute; overflow: hidden; margin: 0 calc(30% - 50vw); display: flex; align-items: center; bottom: -20%; z-index: 3; opacity: 0; transition: opacity 0.4s 0.6s ease-in-out; } @media (max-width: 639.999px) { .logo-scroll { margin: 0 calc(40% - 50vw); } } .logo-scroll.is-active { opacity: 1; } .logo-scroll__inner { display: flex; align-items: center; animation: loop infinite linear 17s both; } .logo-scroll__inner .logo-scroll__child { width: 100vw; padding: 0 0.5vw; height: auto; } .logo-scroll__inner .logo-scroll__child path { fill: #ccc; } @keyframes loop { from { transform: translateX(0); } to { transform: translateX(-50%); } } .thumb-block { position: relative; z-index: 4; background: #000; width: 45%; margin: 0 0 0 auto; transform: translateY(-60%); } @media (max-width: 639.999px) { .thumb-block { width: 60%; } } .swiper__thumb { overflow: hidden; display: none; opacity: 0; transition: opacity 0.8s ease-in-out; } .swiper__thumb.swiper-initialized { opacity: 1; display: block; } .swiper__thumb .swiper-slide { opacity: 0.5; line-height: 0; transition: opacity 0.8s ease-in-out; } .swiper__thumb .swiper-slide.swiper-slide-thumb-active { opacity: 1; } .swiper__thumb .swiper-horizontal > .swiper-scrollbar, .swiper__thumb .swiper-scrollbar.swiper-scrollbar-horizontal { position: relative !important; height: clamp(0.25rem, 0.625vw + 0rem, 0.5rem) !important; bottom: 0 !important; } .swiper__thumb .swiper-scrollbar-drag { height: 10% !important; position: relative; background: #fff !important; border-radius: 0 !important; top: 40% !important; } .topselling__block { overflow: hidden; } .swiper__top-item .swiper-slide { overflow: visible !important; } .swiper__top-item .swiper-slide::before { counter-increment: rank; content: "#" counter(rank, decimal-leading-zero); position: absolute; top: 0; left: 0; z-index: 100; transform: translate(-25%, -50%); font-size: clamp(1.125rem, 0.9375vw + 0.75rem, 1.5rem); font-weight: 600; line-height: 1.3; text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); color: #fff; } #topImage { display: none; } .category__img img { width: 100%; height: auto; } .check__block { overflow: hidden; } .check__block + .about__block { margin-top: 0; } .brand__block { padding-bottom: 0 !important; } .brand-list { display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch; } @media (max-width: 639.999px) { .brand-list { padding-bottom: 20px; } } .brand-list .brand-list__item { padding: clamp(1.25rem, 3.125vw + 0rem, 2.5rem) 0 clamp(1.25rem, 6.25vw - 1.25rem, 3.75rem); width: 20%; text-align: center; line-height: 1; display: flex; align-items: stretch; flex-direction: column; justify-content: center; } @media (max-width: 639.999px) { .brand-list .brand-list__item { width: 50%; } } .brand-list .brand-list__item .basic__btn-border { margin-top: auto; } .brand-list .brand-list__item._pallaetonda .brand-list__title { margin-bottom: 20px; } .brand-list .brand-list__item._pallaetonda svg { width: 60%; height: auto; } .brand-list .brand-list__item._syg .brand-list__title { margin-bottom: 20px; } .brand-list .brand-list__item._syg svg { width: 62%; height: auto; } .brand-list .brand-list__item._sweetyears .brand-list__title { margin-top: clamp(1.25rem, 4.6875vw - 0.625rem, 3.125rem); margin-bottom: 20px; } .brand-list .brand-list__item._sweetyears svg { width: 70%; height: auto; } .brand-list .brand-list__item._nero .brand-list__title { margin-top: clamp(1.25rem, 4.6875vw - 0.625rem, 3.125rem); margin-bottom: 20px; } .brand-list .brand-list__item._nero svg { width: 70%; height: auto; } @media (max-width: 639.999px) { .brand-list .brand-list__item._pace { width: 60%; } } .brand-list .brand-list__item._pace .brand-list__title { margin-top: clamp(0.9375rem, 2.34375vw + 0rem, 1.875rem); margin-bottom: 20px; } .brand-list .brand-list__item._pace svg { width: 60%; height: auto; } .brand-list .brand-list__item svg { fill: #fff; } .brand-list .brand-list__item svg .logo-syg__sub-color { fill: var(--syg-sub-color); } .brand-list .brand-list__item svg .logo-sweetyears__sub-color { fill: var(--sweetyears-sub-color); } .brand-list .brand-list__item svg .logo-nero__sub-color { fill: var(--nero-sub-color); } @media (min-width: 768px) { .store__inner { max-width: 750px; width: 80%; } } .store__img { line-height: 0; width: 100%; height: auto; } .store__contents { color: #fff; background: #000; padding: clamp(0.625rem, 1.5625vw + 0rem, 1.25rem); display: flex; gap: clamp(0.625rem, 4.6875vw - 1.25rem, 2.5rem); align-items: center; } @media (max-width: 639.999px) { .store__contents { flex-direction: column; align-items: flex-start; } } .store__header ._title { font-size: clamp(1rem, 0.625vw + 0.75rem, 1.25rem); line-height: 1.35; font-weight: 600; } .store__header ._subtitle { font-size: clamp(0.9375rem, 0.15625vw + 0.875rem, 1rem); line-height: 1.6; } .store__text dl { display: flex; font-size: clamp(0.9375rem, 0.15625vw + 0.875rem, 1rem); line-height: 1.6; } .store__text dl dt { font-weight: 700; } .store__text dl dt::after { content: ":"; margin: 0 5px; } .store__text dl dd { font-weight: 700; } .store__text p { font-size: clamp(0.9375rem, 0.15625vw + 0.875rem, 1rem); } .store__text small { font-size: clamp(0.8125rem, 0.15625vw + 0.75rem, 0.875rem); line-height: 1.6; } .store__slider-list { position: relative; margin-top: clamp(1.25rem, 3.125vw + 0rem, 2.5rem); } .swiper__store-list { width: 100%; overflow: hidden; padding: 0 clamp(0.625rem, 1.5625vw + 0rem, 1.25rem); } @media (max-width: 639.999px) { .swiper__store-list { padding: 0 clamp(0.3125rem, 0.78125vw + 0rem, 0.625rem); } } .slide-store-list__controller { position: absolute; top: 50%; left: 0; right: 0; transform: translateY(-50%); pointer-events: none; z-index: 10; } .swiper-button-next__store-list, .swiper-button-prev__store-list { position: absolute; top: 0; width: 60px; height: 60px; border: solid 1px #000; border-radius: 50%; background: rgba(255, 255, 255, 0.6); fill: #000; display: flex; justify-content: center; align-items: center; cursor: pointer; pointer-events: auto; } @media (max-width: 639.999px) { .swiper-button-next__store-list, .swiper-button-prev__store-list { width: 40px; height: 40px; } } .swiper-button-next__store-list svg, .swiper-button-prev__store-list svg { width: 100%; height: auto; transform: scale(0.6); } .swiper-button-next__store-list { right: clamp(0.625rem, 1.5625vw + 0rem, 1.25rem); } .swiper-button-prev__store-list { left: clamp(0.625rem, 1.5625vw + 0rem, 1.25rem); } .swiper-button-prev__store-list svg { transform: scale(0.6) rotate(180deg); } .media__block { display: flex; width: 100%; margin-top: clamp(1.25rem, 6.25vw - 1.25rem, 3.75rem); } @media (max-width: 639.999px) { .media__block { flex-direction: column; } } .media__block .media__item { width: 50%; display: flex; flex-direction: column; justify-content: flex-end; background-size: cover; background-position: top center; background-repeat: no-repeat; } @media (max-width: 639.999px) { .media__block .media__item { width: 100%; } } .media__block .media__item .basic__btn, .media__block .media__item .basic__btn-border { text-align: left; width: clamp(10rem, 29.6875vw - 1.875rem, 21.875rem); } .media__block .media__item .basic__btn a, .media__block .media__item .basic__btn-border a { text-align: center; } .media__title { font-size: clamp(2.125rem, 3.125vw + 0.875rem, 3.375rem); font-weight: 800; line-height: 1.2; margin-bottom: clamp(1.25rem, 3.125vw + 0rem, 2.5rem); } .media__subtitle { font-size: clamp(1rem, 0.625vw + 0.75rem, 1.25rem); font-weight: 600; line-height: 1.35; } /** * Lead（トップコンセプト） * 背景にゴルフ場の夕景を全面に敷き、白文字でコンセプトを語るセクション */ .lead { position: relative; background: url("https://gigaplus.makeshop.jp/KILEL2026/images/bg_lead.webp") no-repeat center center; background-size: cover; color: #fff; padding: clamp(3.75rem, 3.125vw + 2.5rem, 5rem) clamp(1.25rem, 3.125vw + 0rem, 2.5rem); overflow: hidden; } .lead::before { content: ""; position: absolute; inset: 0; z-index: 0; background: rgba(0, 0, 0, 0.3); } .lead__content { position: relative; z-index: 1; max-width: 960px; margin: 0 auto; text-align: center; } .lead__branding { width: clamp(13.75rem, 31.25vw + 1.25rem, 26.25rem); margin: 0 auto; } .lead__branding svg { width: 100%; height: auto; } .lead__branding svg path { fill: #fff; } .lead__tagline { margin-top: clamp(1.5rem, 2.5vw + 0.5rem, 2.5rem); line-height: 1.8; } .lead__body { margin-top: clamp(1.75rem, 2.5vw + 0.75rem, 2.75rem); } .lead__block { margin-top: clamp(1.25rem, 1.875vw + 0.5rem, 2rem); } .lead__block:first-child { margin-top: 0; } .lead__text { font-size: clamp(0.75rem, 0.625vw + 0.5rem, 1rem); } /** * Product List（商品リストセクション） * 見出し行 + 商品カードグリッド。New Arrivals / Tops / カテゴリページ等で汎用利用。 * PC 4 列 / SP 2 列。カード画像は 3:4。 * マークアップは _partials/_product-list.html / _product-card.html を include する。 */ .product-list { padding: clamp(3.75rem, 6.25vw + 1.25rem, 6.25rem) 0 0; } .product-list .js-fade-up { transition-duration: 1.2s; } .product-list._dark { background: url("https://gigaplus.makeshop.jp/KILEL2026/images/bg_second.webp") no-repeat center center; background-size: cover; margin-top: clamp(3.75rem, 6.25vw + 1.25rem, 6.25rem); padding: clamp(3.75rem, 6.25vw + 1.25rem, 6.25rem) 0; } .product-list._dark .product-list__title, .product-list._dark .product-card__name, .product-list._dark .product-card__price { color: #fff; } .product-list._dark .product-card__subname { color: rgba(255, 255, 255, 0.7); } .product-list._dark .product-list__viewall a, .product-list._dark .product-list__viewall-sp { --btn-pill-color: #fff; --btn-pill-hover-color: var(--main-color); } .product-list__inner { max-width: 1280px; margin: 0 auto; padding: 0 clamp(1rem, 5vw - 1rem, 3rem); } .product-list__head { display: flex; justify-content: space-between; align-items: center; gap: clamp(1rem, 1.25vw + 0.5rem, 1.5rem); } .product-list__title { font-size: clamp(2.125rem, 3.4375vw + 0.75rem, 3.5rem); font-weight: 400; line-height: 1.1; color: var(--main-color); } .footer__contact-btn a, .news-detail__back, .info-list__viewall, .product-list__viewall-sp, .product-list__viewall a { display: inline-block; line-height: 1.2; font-size: clamp(0.8125rem, 0.46875vw + 0.625rem, 1rem); padding: clamp(0.5rem, 0.625vw + 0.25rem, 0.75rem) clamp(1.25rem, 1.875vw + 0.5rem, 2rem); color: var(--btn-pill-color, var(--main-color)); border: 1px solid var(--btn-pill-color, var(--main-color)); border-radius: 9999px; transition: background-color 0.4s ease, color 0.4s ease, border-color 0.4s ease; } .footer__contact-btn a:hover, .news-detail__back:hover, .info-list__viewall:hover, .product-list__viewall-sp:hover, .product-list__viewall a:hover { background: var(--btn-pill-color, var(--main-color)); color: var(--btn-pill-hover-color, #fff); } .product-list__viewall { flex-shrink: 0; } @media (max-width: 639.999px) { .product-list__viewall { display: none; } } .product-list__viewall-sp { display: none; } @media (max-width: 639.999px) { .product-list__viewall-sp { display: block; width: 100%; margin-top: clamp(1.5rem, 1.25vw + 1rem, 2rem); padding: clamp(0.625rem, 0.78125vw + 0.3125rem, 0.9375rem) clamp(1.25rem, 3.125vw + 0rem, 2.5rem); font-size: clamp(0.8125rem, 0.15625vw + 0.75rem, 0.875rem); line-height: 1.4; text-align: center; } } .product-list__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.25rem, 1.875vw + 0.5rem, 2rem) clamp(0.25rem, 0.625vw + 0rem, 0.5rem); margin-top: clamp(1.25rem, 4.375vw - 0.5rem, 3rem); } .product-list__grid:first-child { margin-top: 0; } @media (max-width: 639.999px) { .product-list__grid { grid-template-columns: repeat(2, 1fr); gap: clamp(1rem, 1.25vw + 0.5rem, 1.5rem) clamp(0.375rem, 0.625vw + 0.125rem, 0.625rem); } } /** * Product Card（商品カード） * 商品リストグリッド内の 1 アイテム。単体でも再利用可能。 */ .product-card__link { display: block; } .product-card__thumb { position: relative; overflow: hidden; aspect-ratio: 3/4; background: #f5f5f5; line-height: 0; } .product-card__thumb img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform 2000ms cubic-bezier(0.08, 0.82, 0.17, 1); } .product-card__link:hover .product-card__thumb img { transform: scale(1.05); } .product-card__badge { position: absolute; top: clamp(0.5rem, 0.625vw + 0.25rem, 0.75rem); left: clamp(0.5rem, 0.625vw + 0.25rem, 0.75rem); z-index: 1; display: inline-flex; align-items: center; padding: clamp(0.25rem, 0vw + 0.25rem, 0.25rem) clamp(0.75rem, 0.625vw + 0.5rem, 1rem); font-size: clamp(0.6875rem, 0.3125vw + 0.5625rem, 0.8125rem); font-weight: 400; line-height: 1; letter-spacing: 0.04em; color: #fff; background: var(--main-color); border-radius: 999px; } .product-card__name { margin-top: clamp(0.625rem, 0.9375vw + 0.25rem, 1rem); font-size: clamp(0.8125rem, 0.15625vw + 0.75rem, 0.875rem); font-weight: 400; line-height: 1.4; color: var(--font-color); } .product-card__subname { font-size: clamp(0.625rem, 0.15625vw + 0.5625rem, 0.6875rem); line-height: 1.5; color: #999; } .product-card__price { margin-top: clamp(0.25rem, 0.625vw + 0rem, 0.5rem); font-size: clamp(0.8125rem, 0.15625vw + 0.75rem, 0.875rem); line-height: 1.4; color: var(--font-color); } /** * Info List（News / FAQ） * 「日付 + タイトル」または「テキストのみ」の情報リスト。 * product-list と幅・見出し・View ALL ボタンの意匠を揃える。 */ .info-list { padding: clamp(3.75rem, 6.25vw + 1.25rem, 6.25rem) 0 0; } .info-list:last-of-type { padding-bottom: clamp(2rem, 3.75vw + 0.5rem, 3.5rem); } .info-list__inner { max-width: 1280px; margin: 0 auto; padding: 0 clamp(1rem, 5vw - 1rem, 3rem); } .info-list__head { display: flex; justify-content: space-between; align-items: center; gap: clamp(1rem, 1.25vw + 0.5rem, 1.5rem); } .info-list__title { font-size: clamp(1.875rem, 4.0625vw + 0.25rem, 3.5rem); font-weight: 400; line-height: 1.1; color: var(--main-color); } .info-list__viewall { flex-shrink: 0; } @media (max-width: 639.999px) { .info-list__viewall { display: none; } } .info-list__viewall--sp { display: none; } @media (max-width: 639.999px) { .info-list__viewall--sp { display: block; width: 100%; margin-top: clamp(1.5rem, 1.25vw + 1rem, 2rem); padding: clamp(0.625rem, 0.78125vw + 0.3125rem, 0.9375rem) clamp(1.25rem, 3.125vw + 0rem, 2.5rem); font-size: clamp(0.8125rem, 0.15625vw + 0.75rem, 0.875rem); line-height: 1.4; text-align: center; } } .info-list__items { margin-top: clamp(1.25rem, 3.125vw + 0rem, 2.5rem); list-style: none; } .info-list__item { border-top: 1px solid var(--border-color); } .info-list__item:last-child { border-bottom: 1px solid var(--border-color); } .info-list__link { display: flex; align-items: baseline; gap: clamp(1.25rem, 4.375vw - 0.5rem, 3rem); padding: clamp(1rem, 1.25vw + 0.5rem, 1.5rem) 0; color: var(--font-color); transition: opacity 0.4s ease; } .info-list__link:hover { opacity: 0.4; } @media (max-width: 639.999px) { .info-list__link { flex-direction: column; gap: 8px; } } .info-list__date { flex-shrink: 0; font-size: clamp(0.8125rem, 0.15625vw + 0.75rem, 0.875rem); line-height: 1.4; color: #999; } .info-list__text { font-size: clamp(0.875rem, 0.3125vw + 0.75rem, 1rem); line-height: 1.6; } /** * Page Head（下層ページ共通の見出し） * 英語タイトル（メインカラーの大きな英字）+ 日本語サブ。左寄せ。 * Guide / Stores / FAQ など下層ページの先頭に置く。 */ .page-head { padding-top: clamp(1.25rem, 4.375vw - 0.5rem, 3rem); } .page-head__inner { max-width: 1280px; margin: 0 auto; padding: 0 clamp(1rem, 5vw - 1rem, 3rem); } .page-head__en { font-size: clamp(2.125rem, 3.4375vw + 0.75rem, 3.5rem); font-family: var(--en-font-family); font-weight: 400; line-height: 1.1; color: var(--main-color); } .page-head__ja { margin-top: clamp(0.25rem, 0.625vw + 0rem, 0.5rem); font-size: clamp(0.75rem, 0.3125vw + 0.625rem, 0.875rem); line-height: 1.4; color: var(--main-color); } /** * Post（管理画面=makeshop の投稿内容を表示する汎用本文） * 商品詳細の .item__contents と同じ思想で、内側はクラス不要の純タグのみで * スタイリングする。WYSIWYG 出力（h2-h6 / p / ul / ol / table / hr 等）を * そのまま流し込んでもカンプ通りに整う。 * * 各タグのスタイルは商品詳細 .item__contents と完全に統一している * （同じ投稿内容がどちらに載っても同一見た目になるようにするため）。 * .item__contents 側を更新したら、この .post も必ず同じ値に揃えること。 */ .post { max-width: 1280px; margin: clamp(1.75rem, 3.125vw + 0.5rem, 3rem) auto 0; padding: 0 clamp(1rem, 5vw - 1rem, 3rem); font-size: clamp(0.875rem, 0.15625vw + 0.8125rem, 0.9375rem); line-height: 1.8; } .post > * + * { margin-top: clamp(0.875rem, 0.625vw + 0.625rem, 1.125rem); } .post h2, .post h3, .post h4, .post h5, .post h6 { font-size: clamp(1rem, 0.3125vw + 0.875rem, 1.125rem); line-height: 1.3; } .post h2 + *, .post h3 + *, .post h4 + *, .post h5 + *, .post h6 + * { margin-top: clamp(0.75rem, 0.625vw + 0.5rem, 1rem); } .post ul { list-style: disc; margin-left: 20px; } .post ol { margin-left: 15px; } .post table { width: 100%; } .post table th { white-space: nowrap; background: var(--base-color); } .post table th, .post table td { padding: clamp(0.625rem, 0.78125vw + 0.3125rem, 0.9375rem) clamp(0.625rem, 1.5625vw + 0rem, 1.25rem); border: solid 1px var(--border-color); } @media (max-width: 767.999px) { .post table.table__sm-vertical th, .post table.table__sm-vertical td { display: block; width: 100%; white-space: normal; } .post table.table__sm-vertical td { border-top: none; } } .post em { color: var(--accent-color); } .post hr { border-top: 1px solid var(--border-color); margin: clamp(1.5rem, 0.625vw + 1.25rem, 1.75rem) 0; } /** * NEWS 詳細（WordPress テーマ kilel-news の single） * page-head（NEWS / お知らせ）の下に、記事の日付・タイトル・アイキャッチを積む見出し帯。 * 本文は .post（上記）で表示する。.post / page-head と幅基準を揃える。 */ .news-detail { max-width: 1280px; margin: clamp(1rem, 1.875vw + 0.25rem, 1.75rem) auto 0; padding: 0 clamp(1rem, 5vw - 1rem, 3rem); } .news-detail__date { display: block; font-family: var(--en-font-family); font-size: clamp(0.8125rem, 0.3125vw + 0.6875rem, 0.9375rem); line-height: 1.4; color: #999; } .news-detail__title { margin-top: clamp(0.375rem, 0.625vw + 0.125rem, 0.625rem); font-size: clamp(1.25rem, 1.5625vw + 0.625rem, 1.875rem); font-weight: 700; line-height: 1.4; color: var(--font-color); } .news-detail__thumb { margin-top: clamp(1rem, 1.25vw + 0.5rem, 1.5rem); } .news-detail__thumb img { width: 100%; height: auto; } .news-detail__nav { max-width: 1280px; margin: clamp(2rem, 3.75vw + 0.5rem, 3.5rem) auto 0; padding: 0 clamp(1rem, 5vw - 1rem, 3rem); display: flex; align-items: center; justify-content: space-between; gap: clamp(0.75rem, 1.875vw + 0rem, 1.5rem); font-size: clamp(0.8125rem, 0.15625vw + 0.75rem, 0.875rem); } .news-detail__nav a { color: var(--font-color); transition: opacity 0.3s ease; } .news-detail__nav a:hover { opacity: 0.5; } .news-detail__back { flex-shrink: 0; } .news-detail__back:hover { opacity: 1; } .news-empty { max-width: 1280px; margin: clamp(1.5rem, 2.5vw + 0.5rem, 2.5rem) auto; padding: 0 clamp(1rem, 5vw - 1rem, 3rem); font-size: clamp(0.875rem, 0.3125vw + 0.75rem, 1rem); text-align: center; } /** * Shop List（店舗一覧） * 直営店（先頭）→ 卸先（エリア見出し付きで後半）の順にセクションで積む。 * 各セクションはカードのグリッド（PC 3 列 / SP 1 列）。 */ .shop-list { max-width: 1280px; margin: clamp(1.75rem, 3.125vw + 0.5rem, 3rem) auto 0; padding: 0 clamp(1rem, 5vw - 1rem, 3rem); display: grid; gap: clamp(3rem, 5vw + 1rem, 5rem); } .shop-list__section { display: grid; gap: clamp(1rem, 1.25vw + 0.5rem, 1.5rem); } .shop-list__area { font-size: clamp(1.25rem, 1.25vw + 0.75rem, 1.75rem); font-weight: 700; line-height: 1.3; } .shop-list__grid { display: grid; grid-template-columns: 1fr; gap: clamp(2rem, 1.25vw + 1.5rem, 2.5rem); } @media (min-width: 768px) { .shop-list__grid { grid-template-columns: repeat(3, 1fr); } } .shop-list__img { display: flex; align-items: center; justify-content: center; aspect-ratio: 16/10; margin: 0; overflow: hidden; background: #ededed; color: #d9633f; font-size: clamp(0.875rem, 0.3125vw + 0.75rem, 1rem); line-height: 0; } .shop-list__img img { width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; transition: transform 2000ms cubic-bezier(0.08, 0.82, 0.17, 1); } .shop-list__name { margin-top: clamp(0.75rem, 0.625vw + 0.5rem, 1rem); font-size: clamp(1rem, 0.625vw + 0.75rem, 1.25rem); font-weight: 700; line-height: 1.4; } .shop-list__info { margin-top: clamp(0.375rem, 0.3125vw + 0.25rem, 0.5rem); font-size: clamp(0.8125rem, 0.3125vw + 0.6875rem, 0.9375rem); line-height: 1.8; } /** * NEWS 一覧（WordPress）で shop-list レイアウトを流用するための追加。 * stores には無い「カード全体リンク」と、page-head との間隔だけを補う。 */ .product-list--news { padding-top: clamp(1.75rem, 3.125vw + 0.5rem, 3rem); } .shop-list__link { display: block; color: inherit; text-decoration: none; } .shop-list__link:hover .shop-list__img img { transform: scale(1.05); } /** * FAQ（details/summary によるネイティブ・アコーディオン。JS 不要） * summary 左に「Q」、右に +/− トグル。開いた項目の回答はメインカラー。 */ .faq { max-width: 1280px; margin: clamp(1.75rem, 3.125vw + 0.5rem, 3rem) auto 0; padding: 0 clamp(1rem, 5vw - 1rem, 3rem); } .faq__item { border-top: 1px solid var(--border-color); } .faq__item:last-child { border-bottom: 1px solid var(--border-color); } .faq__q { position: relative; display: flex; align-items: flex-start; gap: clamp(0.625rem, 0.9375vw + 0.25rem, 1rem); padding: clamp(1.125rem, 0.9375vw + 0.75rem, 1.5rem) clamp(2.25rem, 1.875vw + 1.5rem, 3rem) clamp(1.125rem, 0.9375vw + 0.75rem, 1.5rem) 0; font-size: clamp(0.875rem, 0.3125vw + 0.75rem, 1rem); line-height: 1.6; font-weight: 500; cursor: pointer; list-style: none; } .faq__q::-webkit-details-marker { display: none; } .faq__q::before { content: "Q"; flex-shrink: 0; font-family: var(--en-font-family); font-size: clamp(1.25rem, 0.9375vw + 0.875rem, 1.625rem); font-weight: 400; line-height: 1.2; color: var(--main-color); } .faq__q::after { content: "add"; position: absolute; top: 50%; right: 0; transform: translateY(-50%); font-family: "Material Symbols Outlined"; font-weight: 400; font-size: clamp(1.375rem, 0.625vw + 1.125rem, 1.625rem); line-height: 1; color: var(--font-color); } .faq__item[open] .faq__q::after { content: "remove"; } .faq__a { padding: 0 0 clamp(1.125rem, 0.9375vw + 0.75rem, 1.5rem) clamp(1.875rem, 1.875vw + 1.125rem, 2.625rem); font-size: clamp(0.8125rem, 0.3125vw + 0.6875rem, 0.9375rem); line-height: 1.9; color: var(--main-color); } /** * About Lead */ .about-lead { background: url("https://gigaplus.makeshop.jp/KILEL2026/images/about_lead.webp") no-repeat left top; background-size: 65% auto; padding: clamp(7.5rem, 28.125vw - 3.75rem, 30rem) clamp(1rem, 3.75vw - 0.5rem, 2.5rem) clamp(1.25rem, 3.125vw + 0rem, 2.5rem); } @media (max-width: 639.999px) { .about-lead { padding: clamp(13.125rem, 53.125vw + 2.5rem, 23.75rem) 20px 0; background-size: 70% auto; } } .about-lead__inner { text-align: right; color: #000; max-width: 980px; margin: 0 auto; padding-left: 30%; } @media (max-width: 639.999px) { .about-lead__inner { padding-left: 0; } } .about-lead__text { margin-top: clamp(1.25rem, 3.125vw + 0rem, 2.5rem); font-size: clamp(0.75rem, 0.625vw + 0.5rem, 1rem); } .about-lead__text:first-child { margin-top: 0; } .about-lead__text._en { font-size: clamp(0.625rem, 0.3125vw + 0.5rem, 0.75rem); font-weight: 600; line-height: 1.35; } .about-description.basic__block { margin: 120px clamp(1rem, 0.625vw + 0.75rem, 1.25rem) 0; } .about-description__list { display: flex; flex-wrap: wrap; justify-content: center; gap: clamp(2.5rem, 3.125vw + 1.25rem, 3.75rem); max-width: 980px; margin: 0 auto; } @media (max-width: 639.999px) { .about-description__list { flex-direction: column; } } .about-description__list .about-description__item { font-size: clamp(0.9375rem, 0.15625vw + 0.875rem, 1rem); line-height: 1.6; width: calc(50% - clamp(1.25rem, 1.5625vw + 0.625rem, 1.875rem)); text-align: center; } @media (max-width: 639.999px) { .about-description__list .about-description__item { width: 100%; } } .about-description__list .about-description__item + li { margin-top: 0; } .about-description__title { font-size: clamp(2.125rem, 3.125vw + 0.875rem, 3.375rem); font-weight: 800; line-height: 1.2; margin-bottom: 10px; color: var(--bg-sub-color); } .about-description__subtitle { font-size: clamp(1rem, 0.625vw + 0.75rem, 1.25rem); font-weight: 600; line-height: 1.35; margin-bottom: 10px; } .about-description__text { font-size: clamp(0.8125rem, 0.15625vw + 0.75rem, 0.875rem); line-height: 1.6; } .store-list__block.basic__block { margin-top: 120px; } .store-list { margin: clamp(1.25rem, 3.125vw + 0rem, 2.5rem) 20px 0; display: flex; flex-wrap: wrap; gap: 20px; } @media (max-width: 767.999px) { .store-list { margin: clamp(1.25rem, 3.125vw + 0rem, 2.5rem) 16px 0; } } @media (max-width: 639.999px) { .store-list { flex-direction: column; } } .store-list__item { width: calc((100% - 40px) / 3); } @media (max-width: 767.999px) { .store-list__item { width: calc((100% - 10px) / 2); } } @media (max-width: 639.999px) { .store-list__item { width: 100%; } } .store-list__item figure { margin-bottom: clamp(0.625rem, 0.78125vw + 0.3125rem, 0.9375rem); overflow: hidden; } .store-list__item figure img { width: 100%; height: auto; display: block; } .store-list__header { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: clamp(0.3125rem, 0.78125vw + 0rem, 0.625rem); } .store-list__title { font-size: clamp(1rem, 0.625vw + 0.75rem, 1.25rem); font-weight: 600; flex-shrink: 1; min-width: 0; } .store-list__tag { display: flex; gap: 5px; flex-shrink: 0; } .store-list__tag-item { font-size: clamp(0.6875rem, 0.15625vw + 0.625rem, 0.75rem); padding: 2px 8px; font-weight: 600; } .store-list__tag-item._original { background: #000; color: #fff; } .store-list__tag-item._golf { background: #00a251; color: #fff; } .store-list__tag-item._popup { background: #b339e0; color: #fff; } .store-list__info { font-size: clamp(0.75rem, 0.3125vw + 0.625rem, 0.875rem); line-height: 1.6; } .about__block { display: flex; flex-direction: row-reverse; align-items: center; background: #000; } @media (max-width: 639.999px) { .about__block { flex-direction: column; } } .about__contents { color: #fff; width: 40%; padding-left: clamp(0.625rem, 1.5625vw + 0rem, 1.875rem); font-size: clamp(0.9375rem, 0.15625vw + 0.875rem, 1rem); line-height: 1.6; } .about__contents .basic__title { margin-top: 0; mix-blend-mode: difference; } .about__contents .sns__block .icon-sns svg { width: 20px; height: 20px; } .about__contents .sns__block .icon-sns path, .about__contents .sns__block .icon-sns circle { fill: #fff; } .about__contents .sns__inner { justify-content: left; margin-top: 10px; } @media (max-width: 639.999px) { .about__contents { width: 100%; padding: 20px 20px 0; margin-top: -60px; } .about__contents .basic__title { text-align: center !important; } .about__contents .sns__inner { justify-content: center; } } .about__logo { width: clamp(6.25rem, 15.625vw + 0rem, 12.5rem); z-index: 2; } .about__logo path { fill: #fff; } @media (max-width: 639.999px) { .about__logo { margin: 5px auto 0; } } .about__text { margin-top: clamp(0.625rem, 1.5625vw + 0rem, 1.25rem); mix-blend-mode: difference; } .about__video { width: 70%; margin-left: -10%; line-height: 0.7; } @media (max-width: 639.999px) { .about__video { width: 100%; margin-left: 0; } } .about__video video { width: 100%; -o-object-fit: fill; object-fit: fill; aspect-ratio: 16/9; } .sns__block .icon-sns svg { width: 20px; height: 20px; } .sns__block .icon-sns path, .sns__block .icon-sns circle { fill: #000; } .sns__inner { display: flex; justify-content: center; align-items: center; gap: 20px; } .footer { background: var(--black-color); color: #fff; margin-top: clamp(1.25rem, 6.25vw - 1.25rem, 3.75rem); } ._bg + .footer, .product-list._dark + .footer, .lead + .footer, .media__block + .footer { margin-top: 0; } .footer__inner { max-width: 1280px; margin: 0 auto; padding: clamp(2.5rem, 3.125vw + 1.25rem, 3.75rem) clamp(1.25rem, 4.375vw - 0.5rem, 3rem); } .footer__logo { text-align: center; } .footer__logo svg { width: clamp(8.75rem, 9.375vw + 5rem, 12.5rem); height: auto; } .footer__logo svg path { fill: #fff; } .footer__social { display: flex; justify-content: center; align-items: center; gap: clamp(1rem, 0.625vw + 0.75rem, 1.25rem); margin-top: clamp(1.25rem, 1.25vw + 0.75rem, 1.75rem); } .footer__social a { display: flex; align-items: center; justify-content: center; } .footer__social svg { width: clamp(1.375rem, 0.625vw + 1.125rem, 1.625rem); height: clamp(1.375rem, 0.625vw + 1.125rem, 1.625rem); fill: #fff; } .footer__divider { position: relative; margin-top: clamp(1.75rem, 1.25vw + 1.25rem, 2.25rem); border-top: 1px solid rgba(255, 255, 255, 0.4); } .footer__pagetop { position: absolute; top: 50%; right: 0; transform: translateY(-50%); display: flex; align-items: center; justify-content: center; width: clamp(3rem, 1.25vw + 2.5rem, 3.5rem); height: clamp(3rem, 1.25vw + 2.5rem, 3.5rem); border-radius: 50%; background: #fff; color: var(--main-color); transition: opacity 0.4s ease-in-out; } .footer__pagetop:hover { opacity: 0.7; } .footer__pagetop .material-symbols-outlined { font-size: clamp(1.375rem, 0.625vw + 1.125rem, 1.625rem); font-variation-settings: "wght" 400; } .footer__content { display: flex; justify-content: space-between; align-items: flex-start; gap: clamp(2.5rem, 3.125vw + 1.25rem, 3.75rem); margin-top: clamp(2.5rem, 2.5vw + 1.5rem, 3.5rem); } @media (max-width: 639.999px) { .footer__content { flex-direction: column; gap: 48px; } } .footer__nav { display: flex; gap: clamp(2.5rem, 5vw + 0.5rem, 4.5rem); } @media (max-width: 639.999px) { .footer__nav { display: grid; grid-template-columns: 1fr 1fr; gap: 40px clamp(1.25rem, 3.125vw + 0rem, 2.5rem); width: 100%; } .footer__nav .footer__nav-col:nth-child(1) { grid-column: 1; grid-row: 1; } .footer__nav .footer__nav-col:nth-child(2) { grid-column: 2; grid-row: 1; } .footer__nav .footer__nav-col:nth-child(3) { grid-column: 2; grid-row: 2; } } .footer__nav-title { font-size: clamp(1rem, 0.3125vw + 0.875rem, 1.125rem); font-weight: 400; line-height: 1.4; margin-bottom: clamp(1rem, 0.625vw + 0.75rem, 1.25rem); } .footer__nav-list { font-size: clamp(0.75rem, 0.3125vw + 0.625rem, 0.875rem); line-height: 1.2; } .footer__nav-list li + li { margin-top: clamp(0.625rem, 0.625vw + 0.375rem, 0.875rem); } .footer__nav-list a { color: rgba(255, 255, 255, 0.85); transition: opacity 0.4s ease-in-out; } .footer__nav-list a:hover { opacity: 0.7; } .footer__contact { flex-shrink: 0; width: clamp(13.75rem, 9.375vw + 10rem, 17.5rem); } @media (max-width: 639.999px) { .footer__contact { width: 100%; text-align: center; } } .footer__contact-btn { margin: 0; } .footer__contact-btn a { --btn-pill-color: #fff; --btn-pill-hover-color: #000; display: block; width: 100%; padding: clamp(0.625rem, 0.78125vw + 0.3125rem, 0.9375rem) clamp(1.25rem, 3.125vw + 0rem, 2.5rem); text-align: center; } .footer__contact-note { font-size: clamp(0.75rem, 0.15625vw + 0.6875rem, 0.8125rem); line-height: 1.7; margin-top: clamp(1rem, 0.625vw + 0.75rem, 1.25rem); color: rgba(255, 255, 255, 0.9); } .footer__copyright { font-size: 0.6875rem; line-height: 1.5; margin-top: clamp(1rem, 1.25vw + 0.5rem, 1.5rem); color: rgba(255, 255, 255, 0.7); } .basic__block { margin-top: clamp(1.25rem, 6.25vw - 1.25rem, 3.75rem); } .main .basic__block:first-child { margin-top: 0; padding-top: clamp(1.25rem, 6.25vw - 1.25rem, 3.75rem); } .index .main .basic__block:first-child { margin-top: 0; padding-top: clamp(0.625rem, 3.125vw - 0.625rem, 1.875rem); } .basic__block._banner { width: 70vw; max-width: 980px; margin: clamp(0rem, 6.25vw - 2.5rem, 2.5rem) auto 0 !important; padding-top: 0 !important; } .basic__block._banner-footer { width: 70vw; max-width: 980px; margin: clamp(1.25rem, 3.125vw + 0rem, 2.5rem) auto 0 !important; padding-top: 0 !important; } .basic__block > *:first-child { margin-top: 0; } .basic__block._bg + .basic__block._bg { margin-top: 0; } .basic__block._bg { padding: clamp(1.25rem, 6.25vw - 1.25rem, 3.75rem) 0; background: #000; color: #fff; } .basic__block._bg-white { background: #fff; color: #000; } .basic__block._bg-gray { background: var(--base-sub-color); color: #000; } .basic__title { font-size: clamp(2.125rem, 3.125vw + 0.875rem, 3.375rem); line-height: 1.2; font-weight: 800; text-align: center; overflow: hidden; margin-top: clamp(1.25rem, 6.25vw - 1.25rem, 3.75rem); } .basic__title span, .basic__title small, .basic__title svg { display: block; transform: translateY(200%); transition: transform 1000ms cubic-bezier(0.08, 0.82, 0.17, 1); } .basic__title.is-active span, .basic__title.is-active small, .basic__title.is-active svg { transform: translateY(0); } .basic__title._left { text-align: left; } .basic__catch { font-size: clamp(1.375rem, 1.5625vw + 0.75rem, 2rem); font-weight: 600; line-height: 1.25; } .basic__subtitle { font-size: clamp(1.125rem, 0.9375vw + 0.75rem, 1.5rem); font-weight: 600; line-height: 1.25; margin-top: clamp(-3.75rem, -3.125vw - 1.25rem, -2.5rem); } .basic__btn { margin-top: clamp(1.25rem, 3.125vw + 0rem, 2.5rem); text-align: center; } .basic__btn a { font-size: clamp(0.625rem, 0.625vw + 0.375rem, 0.875rem); line-height: 1.4; display: inline-block; min-width: 40%; vertical-align: middle; font-weight: 700; padding: clamp(0.625rem, 0.78125vw + 0.3125rem, 0.9375rem) clamp(1.25rem, 3.125vw + 0rem, 2.5rem); transition: background-color 1000ms cubic-bezier(0.08, 0.82, 0.17, 1), color 1000ms cubic-bezier(0.08, 0.82, 0.17, 1), border 1000ms cubic-bezier(0.08, 0.82, 0.17, 1); background: #000; color: #fff; border: 1px solid #000; } .basic__btn a:hover { border: 1px solid currentColor; color: #000; background: transparent; } ._accent .basic__btn a:hover { border: 1px solid var(--accent-color); } .basic__btn._accent a { background: var(--accent-color); border: 1px solid var(--accent-color); } .basic__btn._accent a:hover { background: transparent; border: 1px solid var(--accent-color); color: #000; } .basic__btn-border { margin-top: clamp(1.25rem, 3.125vw + 0rem, 2.5rem); text-align: center; } .basic__btn-border a { font-size: clamp(0.8125rem, 0.46875vw + 0.625rem, 1rem); line-height: 1.4; display: inline-block; min-width: 60%; vertical-align: middle; padding: clamp(0.625rem, 0.78125vw + 0.3125rem, 0.9375rem) clamp(1.25rem, 3.125vw + 0rem, 2.5rem); transition: background-color 1000ms cubic-bezier(0.08, 0.82, 0.17, 1), color 1000ms cubic-bezier(0.08, 0.82, 0.17, 1), border 1000ms cubic-bezier(0.08, 0.82, 0.17, 1); color: #fff; border: 1px solid currentColor; } .basic__btn-border a:hover { border: 1px solid #fff; color: #000; background: #fff; } .basic__btn-border._reverse a { color: #000; border: 2px solid currentColor; } .basic__btn-border._reverse a:hover { border: 2px solid #000; color: #fff; background: #000; } .basic__link { position: relative; display: inline-block; transition: color 0.2s; } .basic__link:after { content: ""; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: #fff; transform: scaleX(0); transform-origin: left; transition: transform 0.2s; } .item-list .basic__link:after, .sns__item .basic__link:after { background: #000; } .basic__link._black:after { background: #000; } .basic__link:hover:after { transform: scaleX(1); } .basic__contents { margin: clamp(1.25rem, 3.125vw + 0rem, 2.5rem) clamp(0.3125rem, 11.71875vw - 4.375rem, 5rem) 0; font-size: clamp(0.9375rem, 0.15625vw + 0.875rem, 1rem); } .basic__contents h2 + *, .basic__contents h3 + *, .basic__contents h4 + *, .basic__contents h5 + *, .basic__contents h6 + * { margin-top: clamp(1.25rem, 3.125vw + 0rem, 2.5rem); } .basic__contents h2 { font-size: clamp(2.125rem, 3.125vw + 0.875rem, 3.375rem); font-weight: 800; line-height: 1.2; } .basic__contents h3 { font-size: clamp(1.75rem, 1.875vw + 1rem, 2.5rem); font-weight: 700; line-height: 1.2; } .basic__contents h4 { font-size: clamp(1.375rem, 1.5625vw + 0.75rem, 2rem); font-weight: 600; line-height: 1.25; } .basic__contents h5 { font-size: clamp(1.125rem, 0.9375vw + 0.75rem, 1.5rem); font-weight: 600; line-height: 1.3; } .basic__contents h6 { font-size: clamp(1rem, 0.625vw + 0.75rem, 1.25rem); font-weight: 600; line-height: 1.35; } .basic__contents ul { list-style: disc; margin-left: 20px; } .basic__contents ol { margin-left: 15px; } .basic__contents ol li { list-style: decimal; } .basic__contents table { width: 100%; } .basic__contents table th { white-space: nowrap; font-weight: 900; background: var(--base-color); } .basic__contents table th, .basic__contents table td { font-size: clamp(0.75rem, 0.625vw + 0.5rem, 1rem); padding: clamp(0.625rem, 0.78125vw + 0.3125rem, 0.9375rem) clamp(0.625rem, 1.5625vw + 0rem, 1.25rem); border: solid 1px var(--border-color); } .basic__contents > * { margin-top: clamp(0.625rem, 1.5625vw + 0rem, 1.25rem); } .basic__contents dt { font-weight: 900; } .basic__contents strong { font-weight: bold; } .pager { display: flex; justify-content: center; } .pager__btn { margin-top: clamp(1.25rem, 3.125vw + 0rem, 2.5rem); text-align: center; } .pager__btn > * { font-size: clamp(0.625rem, 0.625vw + 0.375rem, 0.875rem); display: inline-block; vertical-align: middle; font-weight: 700; padding: clamp(0.625rem, 0.78125vw + 0.3125rem, 0.9375rem) 0; width: clamp(2.5rem, 3.125vw + 1.25rem, 3.75rem); height: clamp(2.5rem, 3.125vw + 1.25rem, 3.75rem); transition: background-color 1000ms cubic-bezier(0.08, 0.82, 0.17, 1), color 1000ms cubic-bezier(0.08, 0.82, 0.17, 1), border 1000ms cubic-bezier(0.08, 0.82, 0.17, 1); } .pager__btn._first, .pager__btn._last { line-height: 0.7; } .pager__btn._first > a, .pager__btn._first > span, .pager__btn._last > a, .pager__btn._last > span { background: #fff; color: #000; border: 2px solid #fff; } .pager__btn > span { background: #000; color: #fff; border: 2px solid #000; } .pager__btn > span._ellipsis { background: #fff; color: #000; border: 2px solid #fff; } .pager__btn a { background: transparent; border: 2px solid transparent; color: #000; } .pager__btn a:hover { color: #000; background: #000; border: 2px solid #000; color: #fff; } .pager__btn .material-symbols-outlined { font-size: clamp(1.125rem, 1.5625vw + 0.5rem, 1.75rem); font-variation-settings: "wght" 400; line-height: 1; } .subcategory-list { margin: clamp(1.25rem, 3.125vw + 0rem, 2.5rem) 20px 0; padding: 10px 10px 0; background: #000; color: #fff; } @media (max-width: 767.999px) { .subcategory-list { margin: clamp(1.25rem, 3.125vw + 0rem, 2.5rem) 10px 0; } } @media (max-width: 639.999px) { .subcategory-list { margin: clamp(1.25rem, 3.125vw + 0rem, 2.5rem) 5px 0; padding: 5px 5px 0; font-size: 0.75rem; } } .subcategory-list li { margin: 0 10px 10px; display: inline-block; } @media (max-width: 639.999px) { .subcategory-list li { margin: 0 2.5px 5px; } } .subcategory-list li a { text-decoration: underline; } .subcategory-list__title { font-weight: bold; } .items-control { margin: clamp(1.25rem, 3.125vw + 0rem, 2.5rem) 20px 20px; display: flex; justify-content: space-between; align-items: flex-end; position: relative; z-index: 1000; } @media (max-width: 767.999px) { .items-control { margin: clamp(1.25rem, 3.125vw + 0rem, 2.5rem) 10px 20px; } } @media (max-width: 639.999px) { .items-control { margin: clamp(1.25rem, 3.125vw + 0rem, 2.5rem) 5px 20px; font-size: 0.75rem; } } .items-control .items-control__total { border-bottom: none; padding-bottom: 0; visibility: hidden; } @media (max-width: 639.999px) { .items-control .items-control__total { visibility: visible; } } .items-control__total { font-size: clamp(0.9375rem, 0.15625vw + 0.875rem, 1rem); padding-bottom: 5px; font-weight: 700; line-height: 1.6; border-bottom: solid 1px var(--border-color); } .items-control__total ._number { font-size: clamp(1.375rem, 1.5625vw + 0.75rem, 2rem); font-weight: 600; line-height: 1.25; margin: 0 clamp(0.3125rem, 0.78125vw + 0rem, 0.625rem); } .items-control__sort { position: relative; width: 280px; } @media (max-width: 639.999px) { .items-control__sort { width: auto; } } .items-control__sort select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background: #fff; border: 1px solid var(--border-color); border-radius: 4px; padding: clamp(0.625rem, 0.3125vw + 0.5rem, 0.75rem) clamp(2.1875rem, 1.5625vw + 1.5625rem, 2.8125rem) clamp(0.625rem, 0.3125vw + 0.5rem, 0.75rem) clamp(0.9375rem, 0.78125vw + 0.625rem, 1.25rem); font-size: clamp(0.9375rem, 0.15625vw + 0.875rem, 1rem); cursor: pointer; width: 100%; transition: border-color 0.2s ease-in-out; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 24 24'%3E%3Cpath d='M7 10l5 5 5-5z' fill='%23000'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right clamp(0.625rem, 0.3125vw + 0.5rem, 0.75rem) center; background-size: 32px 32px; } .items-control__sort select:focus { outline: none; } .items-control__sort select option { padding: clamp(0.625rem, 0.3125vw + 0.5rem, 0.75rem); background: #fff; color: var(--base-font-color); } .items-control__sort select option:checked { background: var(--base-sub-color); } @media (max-width: 639.999px) { .items-control__sort select { display: none; } } .items-control__sort .items-control__sort-toggle { display: none; cursor: pointer; transition: all 0.2s ease-in-out; line-height: 1; } @media (max-width: 639.999px) { .items-control__sort .items-control__sort-toggle { display: flex; align-items: center; justify-content: center; } } .items-control__sort .items-control__sort-toggle .material-symbols-outlined { font-size: 2.25rem; color: var(--support-color); } .items-control__sort .items-control__sort-toggle.is-active .material-symbols-outlined { color: var(--border-color); } .items-control__sort .items-control__sort-menu { display: none; position: absolute; top: calc(100% + 5px); right: 0; background: #fff; border: 1px solid var(--border-color); border-radius: 4px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 3000; min-width: 240px; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease-in-out; } @media (max-width: 639.999px) { .items-control__sort .items-control__sort-menu.is-active { display: block; opacity: 1; visibility: visible; transform: translateY(0); } } .items-control__sort .items-control__sort-menu ul { list-style: none; padding: 0; margin: 0; } .items-control__sort .items-control__sort-menu li { border-bottom: 1px solid var(--border-color); width: 100%; } .items-control__sort .items-control__sort-menu li:last-child { border-bottom: none; } .items-control__sort .items-control__sort-menu li._active { background: var(--base-sub-color); } .items-control__sort .items-control__sort-menu li a { display: block; width: 100%; padding: clamp(0.75rem, 0.3125vw + 0.625rem, 0.875rem) clamp(0.9375rem, 0.78125vw + 0.625rem, 1.25rem); font-size: clamp(0.9375rem, 0.15625vw + 0.875rem, 1rem); color: var(--base-font-color); text-decoration: none; transition: background 0.2s ease-in-out; } .items-control__sort .items-control__sort-menu li a:hover { background: var(--base-sub-color); } .items-control__sort dt::after { content: " : "; } .items-control__sort dt, .items-control__sort dd, .items-control__sort li { display: inline-block; } .items-control__sort li span { text-decoration: underline; font-weight: 900; } .items-control__sort li a { transition: opacity 0.4s ease-in-out; } .items-control__sort li a:hover { opacity: 0.7; } .item { display: flex; justify-content: center; gap: clamp(1.5rem, 3.75vw + 0rem, 3rem); margin: clamp(1.25rem, 3.125vw + 0rem, 2.5rem) auto 0; max-width: 1280px; padding: 0 clamp(1rem, 5vw - 1rem, 3rem); } @media (max-width: 639.999px) { .item { display: block; } } .item__img { width: 50%; flex-shrink: 0; } @media (max-width: 639.999px) { .item__img { width: 100%; } } .item__img .swiper__item-main { position: relative; } .item__img .swiper__item-main .swiper-wrapper { overflow: hidden; width: 100%; } .item__img .swiper__item-main img { width: 100%; height: auto; } .item__img .swiper__item-main .swiper-button-next__item, .item__img .swiper__item-main .swiper-button-prev__item { display: none; position: absolute; width: 32px; height: 32px; justify-content: center; align-items: center; color: var(--main-color); cursor: pointer; z-index: 30; top: 50%; right: 8px; transform: translateY(-50%); } @media (max-width: 639.999px) { .item__img .swiper__item-main .swiper-button-next__item, .item__img .swiper__item-main .swiper-button-prev__item { display: flex; } } .item__img .swiper__item-main .swiper-button-next__item svg, .item__img .swiper__item-main .swiper-button-prev__item svg { width: 100%; height: auto; } .item__img .swiper__item-main .swiper-button-prev__item { right: auto; left: 8px; } .item__img .swiper__item-thumb { overflow: hidden; width: 100%; } .item__img .swiper__item-thumb img { display: block; width: 100%; height: auto; } .item__img .swiper__item-thumb .swiper-slide { cursor: pointer; } .item__img .swiper__item-thumb .swiper-slide.swiper-slide-thumb-active { opacity: 1; } .item__img .swiper__item-thumb .swiper-slide:not(.swiper-slide-thumb-active) { opacity: 0.6; } @media (min-width: 640px) { .item__img .swiper__item-thumb .swiper-wrapper { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(0.25rem, 0.625vw + 0rem, 0.5rem); transform: none !important; } .item__img .swiper__item-thumb .swiper-slide { width: auto !important; margin: 0 !important; } } @media (max-width: 639.999px) { .item__detail { margin-top: clamp(1.25rem, 3.125vw + 0rem, 2.5rem); } } .item__title { font-size: clamp(1.125rem, 0.3125vw + 1rem, 1.25rem); line-height: 1.25; } .item__subname { margin-top: clamp(0.25rem, 0.3125vw + 0.125rem, 0.375rem); color: #888; font-size: clamp(0.625rem, 0.3125vw + 0.5rem, 0.75rem); line-height: 1.5; } .item__price { margin-top: clamp(0.75rem, 0.625vw + 0.5rem, 1rem); font-size: clamp(1.125rem, 0.3125vw + 1rem, 1.25rem); line-height: 1.2; color: var(--main-color); } .item__point { display: flex; align-items: center; margin-top: 5px; } .item__point dt { border: #000 2px solid; border-radius: 50%; line-height: 0.4; margin-right: 5px; } .item__point dt span { font-size: clamp(0.625rem, 1.25vw + 0.125rem, 1.125rem); } .item__point dd { white-space: nowrap; } .item__point dd strong { font-weight: 900; font-size: 1rem; } .item-option { margin-top: clamp(1rem, 1.25vw + 0.5rem, 1.5rem); } .item-option__title { font-size: clamp(0.8125rem, 0.15625vw + 0.75rem, 0.875rem); line-height: 1.35; letter-spacing: 0.04em; text-align: left; } .item-form--sp { display: none; } @media (max-width: 639.999px) { .item-form--pc { display: none; } .item-form--sp { display: block; } } .item-option__select { margin-top: clamp(0.5rem, 0.3125vw + 0.375rem, 0.625rem); } .item-option__select .item-option__chip input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .item-option__select .item-option__chip { cursor: pointer; -webkit-user-select: none; -moz-user-select: none; user-select: none; } .item-option__select .item-option__chip.is-hidden { display: none !important; } .item-option__select .item-option__stock { font-size: 0.6875rem; color: var(--main-color); } .item-form--pc .item-option__select .item-option__list { display: flex; flex-wrap: wrap; gap: 8px; } .item-form--pc .item-option__select .item-option__chip { display: inline-flex; align-items: center; justify-content: center; min-width: 76px; padding: 11px 20px; font-size: 0.875rem; line-height: 1.2; text-align: center; background: #fff; color: #000; border: 1px solid #000; transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease; } .item-form--pc .item-option__select .item-option__chip:hover { background: #000; color: #fff; } .item-form--pc .item-option__select .item-option__chip:has(input:checked) { background: #000; color: #fff; } .item-form--pc .item-option__select .item-option__chip:has(input:disabled) { background: var(--bg-second, #f2f2f2); color: #bbb; border-color: var(--border-color); cursor: not-allowed; } .item-form--pc .item-option__select .item-option__chip:has(input:disabled):hover { background: var(--bg-second, #f2f2f2); color: #bbb; } .item-form--pc .item-option__select .item-option__chip:has(input:focus-visible) { outline: 2px solid var(--main-color); outline-offset: 2px; } .item-select { position: relative; margin-top: clamp(0.5rem, 0.3125vw + 0.375rem, 0.625rem); } .item-select__input { -moz-appearance: none; appearance: none; -webkit-appearance: none; width: 100%; padding: 13px 40px; font-size: 0.9375rem; line-height: 1.4; text-align: center; -moz-text-align-last: center; text-align-last: center; color: #000; background-color: #fff; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8' fill='none'%3E%3Cpath d='M1 1.5 6 6.5 11 1.5' stroke='%23333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; border: 1px solid var(--border-color); border-radius: 0; cursor: pointer; } .item-select__input:disabled { color: #bbb; cursor: not-allowed; } .item-cart { margin-top: clamp(2rem, 2.5vw + 1rem, 3rem); } .item-cart__btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: clamp(0.9375rem, 0.78125vw + 0.625rem, 1.25rem); font-size: clamp(0.9375rem, 0.15625vw + 0.875rem, 1rem); line-height: 1.4; text-align: center; color: #fff; background: var(--main-color); border: 1px solid var(--main-color); cursor: pointer; transition: opacity 0.3s ease; } .item-cart__btn:hover { opacity: 0.85; } .item-cart__btn._sold { color: #888; background: var(--bg-second, #f2f2f2); border-color: var(--border-color); cursor: not-allowed; } .item-cart__btn._sold:hover { opacity: 1; } .item-cart__btn .material-symbols-outlined { vertical-align: middle; font-size: clamp(1.25rem, 0.3125vw + 1.125rem, 1.375rem); } .item-movie { display: block; margin-top: clamp(2rem, 2.5vw + 1rem, 3rem); overflow: hidden; } .item-movie__img { display: block; width: 100%; height: auto; transition: opacity 0.3s ease; } .item-movie:hover .item-movie__img { opacity: 0.85; } .item__contents { margin-top: clamp(1.75rem, 1.875vw + 1rem, 2.5rem); padding-top: clamp(1.5rem, 0.625vw + 1.25rem, 1.75rem); border-top: 1px solid var(--border-color); font-size: clamp(0.875rem, 0.15625vw + 0.8125rem, 0.9375rem); line-height: 1.8; } .item__contents + .item__contents { margin-top: clamp(1.5rem, 0.625vw + 1.25rem, 1.75rem); } .item__contents:last-of-type { padding-bottom: clamp(1.5rem, 0.625vw + 1.25rem, 1.75rem); border-bottom: 1px solid var(--border-color); } .item__contents > * + * { margin-top: clamp(0.875rem, 0.625vw + 0.625rem, 1.125rem); } .item__contents h2, .item__contents h3, .item__contents h4, .item__contents h5, .item__contents h6 { font-size: clamp(1rem, 0.3125vw + 0.875rem, 1.125rem); line-height: 1.3; } .item__contents h2 + *, .item__contents h3 + *, .item__contents h4 + *, .item__contents h5 + *, .item__contents h6 + * { margin-top: clamp(0.75rem, 0.625vw + 0.5rem, 1rem); } .item__contents ul { list-style: disc; margin-left: 20px; } .item__contents ol { margin-left: 15px; } .item__contents table { width: 100%; } .item__contents table th { white-space: nowrap; background: var(--base-color); } .item__contents table th, .item__contents table td { padding: clamp(0.625rem, 0.78125vw + 0.3125rem, 0.9375rem) clamp(0.625rem, 1.5625vw + 0rem, 1.25rem); border: solid 1px var(--border-color); } .item__contents em { color: var(--accent-color); } .item__contents hr { border-top: 1px solid var(--border-color); margin: clamp(1.5rem, 0.625vw + 1.25rem, 1.75rem) 0; } .item-list__wrapper { width: 100%; display: flex; justify-content: left; } .item-list__sidebar { width: 20%; max-width: 280px; margin-left: 20px; } @media (max-width: 1279.999px) { .item-list__sidebar { width: 20%; } } @media (max-width: 1023.999px) { .item-list__sidebar { width: 25%; } } @media (max-width: 767.999px) { .item-list__sidebar { margin-left: 0; position: fixed; top: 0; left: 0; width: 75vw; max-width: none; height: 100vh; background: var(--border-color); z-index: 3000; overflow-y: auto; padding: 75px 10px 20px; transform: translateX(-100%); transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); } .item-list__sidebar.is-active { transform: translateX(0); transition: transform 0.4s 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); } } .item-list__sidebar .items-control__total { display: block; } @media (max-width: 767.999px) { .item-list__sidebar .items-control__total { display: none; } } .sidebar__title { font-size: clamp(1rem, 0.625vw + 0.75rem, 1.25rem); font-weight: 600; line-height: 1.35; margin: 20px 0 15px; } @media (max-width: 767.999px) { .sidebar__title { margin: 20px 0 10px; } } .sidebar__category-item > ._inner { display: flex; justify-content: space-between; align-items: center; font-size: clamp(1rem, 0.3125vw + 0.875rem, 1.125rem); padding: clamp(0.3125rem, 0.78125vw + 0rem, 0.625rem) clamp(0.625rem, 0.78125vw + 0.3125rem, 0.9375rem) clamp(0.3125rem, 0.78125vw + 0rem, 0.625rem) 0; transition: all 0.3s ease; width: 100%; cursor: pointer; } .sidebar__category-item > ._inner:hover { background: var(--base-sub-color); } @media (max-width: 767.999px) { .sidebar__category-item > ._inner { background: #fff; padding: 5px 20px; margin-bottom: 2px; } .sidebar__category-item > ._inner:hover { background: var(--base-sub-color); } } .sidebar__category-item > ._inner::after { content: "\e145"; font-family: "Material Symbols Outlined"; font-size: 20px; transition: all 0.3s ease; } .sidebar__category-item > ._inner.is-active { font-weight: 600; } .sidebar__category-item > ._inner.is-active::after { font-weight: 400; content: "\e15b"; } .sidebar__category-item > ._link { display: block; font-size: clamp(1rem, 0.3125vw + 0.875rem, 1.125rem); padding: clamp(0.3125rem, 0.78125vw + 0rem, 0.625rem) clamp(0.625rem, 0.78125vw + 0.3125rem, 0.9375rem) clamp(0.3125rem, 0.78125vw + 0rem, 0.625rem) 0; transition: all 0.3s ease; width: 100%; } .sidebar__category-item > ._link:hover { background: var(--base-sub-color); } @media (max-width: 767.999px) { .sidebar__category-item > ._link { background: #fff; padding: 10px 20px; margin-bottom: 2px; } .sidebar__category-item > ._link:hover { background: var(--base-sub-color); } } .sidebar__subcategory-list { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; } .sidebar__subcategory-list.is-active { max-height: 500px; } .sidebar__subcategory-item > ._inner { display: block; padding: clamp(0.3125rem, 0.78125vw + 0rem, 0.625rem) clamp(0.625rem, 0.78125vw + 0.3125rem, 0.9375rem); font-weight: 300; transition: background-color 0.2s; } @media (max-width: 767.999px) { .sidebar__subcategory-item > ._inner { background: #fff; padding: 10px 20px; margin-bottom: 2px; } } .sidebar__subcategory-item > ._inner:hover { background: var(--base-sub-color); } .sidebar__btn { position: fixed; z-index: 2000; right: 10px; bottom: 10px; padding: 15px; width: 70px; height: 70px; background: #000; color: #fff; border-radius: 50%; text-align: center; cursor: pointer; display: none; transition: background-color 0.3s ease; } @media (max-width: 767.999px) { .sidebar__btn { display: block; } } .sidebar__btn .sidebar__btn-icon { line-height: 1; } .sidebar__btn .sidebar__btn-text { font-size: 10px; line-height: 1.2; } .sidebar__overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100vh; background: rgba(0, 0, 0, 0.7); z-index: 1500; opacity: 0; visibility: hidden; transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); } .sidebar__overlay.is-active { opacity: 1; visibility: visible; transition: opacity 0.4s 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); } .item-list__block { flex: 1; } .item-list { margin: clamp(1.25rem, 3.125vw + 0rem, 2.5rem) 20px 0; display: flex; flex-wrap: wrap; justify-content: left; gap: 20px; } @media (max-width: 767.999px) { .item-list { margin: clamp(1.25rem, 3.125vw + 0rem, 2.5rem) 10px 0; gap: 10px; } } @media (max-width: 639.999px) { .item-list { margin: clamp(1.25rem, 3.125vw + 0rem, 2.5rem) 5px 0; gap: 10px; } } .item-list__block > .item-list { margin-top: 0; } .item-list__detail { overflow: hidden; width: calc((100% - 100px) / 6); } @media (max-width: 1279.999px) { .item-list__detail { width: calc((100% - 60px) / 4); } } @media (max-width: 1023.999px) { .item-list__detail { width: calc((100% - 40px) / 3); } } @media (max-width: 767.999px) { .item-list__detail { width: calc((100% - 20px) / 3); } } @media (max-width: 639.999px) { .item-list__detail { width: calc((100% - 10px) / 2); } } .item-list__img { overflow: hidden; position: relative; line-height: 0; } .item-list__img img { width: 100%; height: auto; -o-object-fit: cover; object-fit: cover; transition: transform 2000ms cubic-bezier(0.08, 0.82, 0.17, 1); } .item-list__img a { line-height: 0; } .item-list__img a:hover img { transform: scale(1.1); } .item-list__tag { margin-right: 5px; font-size: clamp(0.625rem, 0.3125vw + 0.5rem, 0.75rem); line-height: 1.4; } .item-list__tag._id { line-height: 1.2; position: absolute; bottom: 0; right: 0; padding: 5px; background: #000; color: #fff; margin-right: 0; } .item-list__tag._sale { display: inline-block; padding: 0 5px; background: var(--accent-color); color: #fff; } .item-list__tag._sold, .item-list__tag._new { display: inline-block; padding: 0 5px; background: #000; color: #fff; } .item-list__title { font-weight: 700; margin-top: clamp(0.625rem, 1.5625vw + 0rem, 1.25rem); line-height: 1.6; vertical-align: middle; } .item__icon { max-width: 30px; height: auto; } .item-list__price { font-weight: 700; line-height: 1.6; } .item-list__price._sale { color: var(--accent-color); } .slide-item__block { margin-top: clamp(1.25rem, 3.125vw + 0rem, 2.5rem); padding: 0 20px; counter-reset: rank 0; } @media (max-width: 767.999px) { .slide-item__block { padding: 0 10px; } } @media (max-width: 639.999px) { .slide-item__block { padding: 0 5px; } } .slide-item__block._top .item-list__tag._sold { background: #fff; color: #000; } .slide-item__block .swiper-slide { overflow: hidden; width: calc((100% - 100px) / 6); transform: translateY(10%); opacity: 0; transition: opacity 2000ms cubic-bezier(0.08, 0.82, 0.17, 1), transform 2000ms cubic-bezier(0.08, 0.82, 0.17, 1); } .slide-item__block .swiper-slide.is-active { opacity: 1; transform: translateY(0); } @media (max-width: 1279.999px) { .slide-item__block .swiper-slide { width: calc((100% - 60px) / 4); } } @media (max-width: 1023.999px) { .slide-item__block .swiper-slide { width: calc((100% - 40px) / 3); } } @media (max-width: 767.999px) { .slide-item__block .swiper-slide { width: calc((100% - 20px) / 3); } } @media (max-width: 639.999px) { .slide-item__block .swiper-slide { width: calc((100% - 10px) / 2); } } .slide-item__block .slide-item__controller { display: flex; justify-content: space-between; align-items: center; margin-top: clamp(0.625rem, 4.6875vw - 1.25rem, 2.5rem); } .slide-item__block .slide-item__controller .swiper-scrollbar__top-item { height: 4px; z-index: 1; background: #222; width: calc(100% - 160px); } @media (max-width: 639.999px) { .slide-item__block .slide-item__controller .swiper-scrollbar__top-item { width: calc(100% - 100px); } } .slide-item__block .slide-item__controller .swiper-scrollbar__top-item .swiper-scrollbar-drag { z-index: 2; background: #fff; top: 38%; height: 1px; } .slide-item__block .slide-item__controller .swiper-button-next__top-item, .slide-item__block .slide-item__controller .swiper-button-prev__top-item { width: 60px; height: 60px; border: solid 1px #fff; border-radius: 0 !important; fill: #fff; display: flex; justify-content: center; align-items: center; cursor: pointer; } @media (max-width: 639.999px) { .slide-item__block .slide-item__controller .swiper-button-next__top-item, .slide-item__block .slide-item__controller .swiper-button-prev__top-item { width: 40px; height: 40px; } } .slide-item__block .slide-item__controller .swiper-button-next__top-item .material-symbols-outlined, .slide-item__block .slide-item__controller .swiper-button-prev__top-item .material-symbols-outlined { font-size: 24px; color: #fff; } .slide-item__block .slide-item__controller .swiper-button-prev__top-item .material-symbols-outlined { font-size: 24px; color: #fff; } .slide-item__block .slide-item__controller .swiper-scrollbar__check-item { height: 4px; z-index: 1; background: #ccc; width: calc(100% - 160px); } @media (max-width: 639.999px) { .slide-item__block .slide-item__controller .swiper-scrollbar__check-item { width: calc(100% - 100px); } } .slide-item__block .slide-item__controller .swiper-scrollbar__check-item .swiper-scrollbar-drag { z-index: 2; background: #000; top: 38%; height: 1px; } .slide-item__block .slide-item__controller .swiper-button-next__check-item, .slide-item__block .slide-item__controller .swiper-button-prev__check-item { width: 60px; height: 60px; border: solid 1px #000; border-radius: 0; fill: #000; display: flex; justify-content: center; align-items: center; cursor: pointer; } @media (max-width: 639.999px) { .slide-item__block .slide-item__controller .swiper-button-next__check-item, .slide-item__block .slide-item__controller .swiper-button-prev__check-item { width: 40px; height: 40px; } } .slide-item__block .slide-item__controller .swiper-button-next__check-item .material-symbols-outlined, .slide-item__block .slide-item__controller .swiper-button-prev__check-item .material-symbols-outlined { font-size: 24px; color: #000; } .slide-item__block .slide-item__controller .swiper-button-prev__check-item .material-symbols-outlined { font-size: 24px; color: #000; } .slide-item__block .swiper-button-lock { display: none !important; } .top-collaborate__block { padding-bottom: clamp(1.25rem, 6.25vw - 1.25rem, 3.75rem); } .collaborate-list { margin: clamp(1.25rem, 3.125vw + 0rem, 2.5rem) clamp(0.625rem, 1.5625vw + 0rem, 1.25rem) 0; display: flex; justify-content: center; gap: 20px; flex-wrap: wrap; } @media (max-width: 767.999px) { .collaborate-list { gap: 10px; margin-top: 10px; } } .collaborate-list li { width: calc((100% - 60px) / 4); font-weight: bold; line-height: 1; } @media (max-width: 767.999px) { .collaborate-list li { width: calc((100% - 20px) / 3); } } .collaborate-list li a { font-size: clamp(0.625rem, 1.25vw + 0.125rem, 1.125rem); } .topnews__block { overflow: hidden; position: relative; width: 100%; padding: 0 clamp(0.625rem, 1.5625vw + 0rem, 1.25rem) clamp(1.25rem, 6.25vw - 1.25rem, 3.75rem); } .slide-news { margin-top: clamp(0.625rem, 1.5625vw + 0rem, 1.25rem); } .slide-news li a { display: block; line-height: 1; font-weight: bold; font-size: clamp(0.625rem, 0.9375vw + 0.25rem, 1rem); } .cart__block, .cart-no__block { max-width: 1280px; margin: clamp(1.25rem, 3.125vw + 0rem, 2.5rem) auto 0; padding: 0 clamp(1rem, 5vw - 1rem, 3rem); } .cart-no__block { text-align: center; } .cart__header { display: flex; justify-content: space-between; gap: 20px; border-bottom: 1px solid var(--border-color); } @media (max-width: 767.999px) { .cart__header { gap: 10px; } } .cart__header .cart__title { font-weight: 500; font-size: clamp(0.75rem, 0.3125vw + 0.625rem, 0.875rem); line-height: 1.35; letter-spacing: 0.04em; color: var(--sub-font-color); width: calc((75% - 80px) / 3); } @media (max-width: 767.999px) { .cart__header .cart__title { width: calc((75% - 40px) / 3); } } .cart__header .cart__title._count { width: 15%; } .cart__header .cart__title._delete { width: 10%; } .cart-item { display: flex; justify-content: space-between; align-items: center; margin-top: clamp(0.625rem, 1.5625vw + 0rem, 1.25rem); gap: 20px; border-bottom: 1px solid var(--border-color); } @media (max-width: 767.999px) { .cart-item { gap: 10px; } } .cart-item > * { width: calc((75% - 80px) / 3); } @media (max-width: 767.999px) { .cart-item > * { width: calc((75% - 40px) / 3); } } .cart-item > *.cart-item__count { width: 15%; } .cart-item > *.cart-item__delete { width: 10%; } .cart-item .cart-item__img img { width: 100%; max-width: 200px; } .cart-item .cart-item__title { font-weight: 400; font-size: clamp(0.9375rem, 0.15625vw + 0.875rem, 1rem); line-height: 1.25; } .cart-item .cart-item__option { margin-top: clamp(0.25rem, 0.3125vw + 0.125rem, 0.375rem); color: #888; font-size: clamp(0.625rem, 0.3125vw + 0.5rem, 0.75rem); line-height: 1.5; } .cart-item .cart-item__point { margin-top: clamp(0.25rem, 0.3125vw + 0.125rem, 0.375rem); font-size: clamp(0.625rem, 0.3125vw + 0.5rem, 0.75rem); line-height: 1.5; } .cart-item .cart-item__count input[type=number] { width: 100%; text-align: center; padding: clamp(0.3125rem, 0.78125vw + 0rem, 0.625rem) clamp(0.625rem, 1.5625vw + 0rem, 1.25rem); border: 1px solid var(--border-color); font-size: clamp(0.8125rem, 0.46875vw + 0.625rem, 1rem); line-height: 1.4; } .cart-item .cart-item__count .basic__btn { text-align: left; margin-top: clamp(0.3125rem, 0.78125vw + 0rem, 0.625rem); } .cart-item .cart-item__count .basic__btn a { display: block; width: 100%; text-align: center; padding: clamp(0.3125rem, 0.78125vw + 0rem, 0.625rem) clamp(0.625rem, 1.5625vw + 0rem, 1.25rem); font-size: clamp(0.6875rem, 0.3125vw + 0.5625rem, 0.8125rem); line-height: 1.4; font-weight: 400; color: var(--main-color); background: #fff; border: 1px solid var(--main-color); } .cart-item .cart-item__count .basic__btn a:hover { opacity: 0.85; color: var(--main-color); background: #fff; border: 1px solid var(--main-color); } .cart-item .cart-item__price { font-size: clamp(0.625rem, 0.3125vw + 0.5rem, 0.75rem); line-height: 1.5; } .cart-item .cart-item__price strong { font-size: clamp(1rem, 0.625vw + 0.75rem, 1.25rem); line-height: 1.2; font-weight: 400; color: var(--main-color); } .cart-total__block { display: flex; justify-content: right; align-items: center; margin-top: clamp(1.25rem, 3.125vw + 0rem, 2.5rem); } .cart-total__block dt { font-weight: 400; margin-right: clamp(0.625rem, 1.5625vw + 0rem, 1.25rem); font-size: clamp(0.8125rem, 0.46875vw + 0.625rem, 1rem); } .cart-total__block dd { font-size: clamp(0.75rem, 0.625vw + 0.5rem, 1rem); } .cart-total__block dd strong { font-weight: 500; color: var(--main-color); font-size: clamp(1.5rem, 1.875vw + 0.75rem, 2.25rem); line-height: 1; } .cart-bulk__block { display: flex; justify-content: right; align-items: center; gap: 20px; } @media (max-width: 639.999px) { .cart-bulk__block { display: block; } } @media (max-width: 639.999px) { .cart-bulk__block .cart-bulk__title { font-size: 0.75rem; text-align: right; } } .cart-bulk__block .cart-total__block dd strong { color: var(--accent-color); } .cart-control__block { max-width: 480px; margin: clamp(1.5rem, 2.5vw + 0.5rem, 2.5rem) auto 0; } .cart-control__block .basic__btn { margin-top: 0; } .cart-control__block .basic__btn a { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; padding: clamp(0.9375rem, 0.78125vw + 0.625rem, 1.25rem); font-size: clamp(0.9375rem, 0.15625vw + 0.875rem, 1rem); line-height: 1.4; font-weight: 400; color: #fff; background: var(--main-color); border: 1px solid var(--main-color); transition: opacity 0.3s ease; } .cart-control__block .basic__btn a:hover { opacity: 0.85; color: #fff; background: var(--main-color); border: 1px solid var(--main-color); } .cart-control__block .basic__btn-border { margin-top: clamp(0.75rem, 0.625vw + 0.5rem, 1rem); } .cart-control__block .basic__btn-border a { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; padding: clamp(0.9375rem, 0.78125vw + 0.625rem, 1.25rem); font-size: clamp(0.9375rem, 0.15625vw + 0.875rem, 1rem); line-height: 1.4; font-weight: 400; color: var(--main-color); background: #fff; border: 1px solid var(--main-color); transition: opacity 0.3s ease; } .cart-control__block .basic__btn-border a:hover { opacity: 0.85; color: var(--main-color); background: #fff; border: 1px solid var(--main-color); } .cart-control__block .amazon > * { margin: clamp(0.625rem, 1.5625vw + 0rem, 1.25rem) auto 0; } @media (max-width: 639.999px) { .cart-control__block .amazon > * { width: 60% !important; } } @media (max-width: 639.999px) { .no__under-sm { display: none; } } @media (max-width: 767.999px) { .no__under-md { display: none; } } @media (max-width: 1023.999px) { .no__under-lg { display: none; } } @media (min-width: 640px) { .no__over-sm { display: none; } } @media (min-width: 768px) { .no__over-md { display: none; } } @media (min-width: 1024px) { .no__over-lg { display: none; } } @media (min-width: 1280px) { .no__over-xl { display: none; } } /* 汎用フェードアップ（JS observer が is-active を付与）。統一 fadeUp 仕様の基準（14px / 2s） */ .js-fadein { opacity: 0; transform: translate(0, 14px); transition: opacity 2s cubic-bezier(0.16, 1, 0.3, 1), transform 2s cubic-bezier(0.16, 1, 0.3, 1); } .js-fadein.is-active { opacity: 1; transform: translate(0, 0); } /** * Collection */ .collection__block { max-width: 1200px; margin: 0 auto; padding: clamp(3.75rem, 9.375vw + 0rem, 7.5rem) 24px 0; display: flex; justify-content: space-between; gap: 24px; } @media (max-width: 767.999px) { .collection__block { padding: 60px 12px 0; gap: 16px; } } @media (max-width: 639.999px) { .collection__block { flex-direction: column; } } .collection-sidebar { flex-shrink: 0; } @media (max-width: 767.999px) { .collection-sidebar { position: fixed; top: 0; left: 0; width: 75vw; max-width: none; height: 100vh; background: var(--border-color); z-index: 3000; overflow-y: auto; padding: 80px 20px 20px; transform: translateX(-100%); transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); } .collection-sidebar.is-active { transform: translateX(0); transition: transform 0.4s 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); } } .collection-sidebar__list { display: flex; flex-direction: column; gap: 8px; } @media (max-width: 767.999px) { .collection-sidebar__list { gap: 0; } } .collection-sidebar__list li.is-active a { color: #000; font-weight: 700; } @media (max-width: 767.999px) { .collection-sidebar__list li a { display: block; background: #fff; padding: 12px 20px; margin-bottom: 2px; } } .collection-sidebar__list a { font-size: clamp(0.8125rem, 0.15625vw + 0.75rem, 0.875rem); font-weight: 500; color: #999; transition: color 0.3s ease, font-weight 0.3s ease; } .collection-sidebar__list a:hover { color: #000; } @media (max-width: 767.999px) { .collection-sidebar__list a { font-size: 16px; color: #000; } .collection-sidebar__list a:hover { background: var(--base-sub-color); } } .collection__inner { flex: 1; min-width: 0; position: relative; overflow: hidden; min-height: 600px; } .collection__list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; opacity: 0; visibility: hidden; transform: translateY(20px); transition: opacity 0.4s ease-out, transform 0.4s ease-out, visibility 0.4s ease-out; position: absolute; top: 0; left: 0; width: 100%; pointer-events: none; } .collection__list.is-active { opacity: 1; visibility: visible; transform: translateY(0); position: relative; pointer-events: auto; } @media (max-width: 767.999px) { .collection__list { grid-template-columns: repeat(2, 1fr); gap: 16px; } } @media (max-width: 639.999px) { .collection__list { grid-template-columns: 1fr; gap: 12px; } } .collection__list li img { width: 100%; height: auto; display: block; } /** * Instagram Feed（全幅・無限横スクロールマーキー） * Checked Items 直下に配置する full-bleed の帯。 * JS(instagram.js) が __group を複製して 2 枚並べ、translateX(-50%) でシームレスにループさせる。 * token 設定時は実フィードへ差し替え、未設定時はダミー画像をそのまま流す。 */ .instagram { width: 100%; overflow: hidden; background: #000; margin-top: clamp(3.75rem, 6.25vw + 1.25rem, 6.25rem); } .instagram.js-fade-up { transition-duration: 1.2s; } .product-list._dark + .instagram, ._bg + .instagram { margin-top: 0; } .instagram__viewport { width: 100%; overflow: hidden; } .instagram__track { display: flex; width: -moz-max-content; width: max-content; } .instagram__track.is-running { animation: igMarquee var(--loop-duration, 60s) linear infinite; } .instagram__track:hover { animation-play-state: paused; } .instagram__group { display: flex; flex-shrink: 0; } .instagram__item { display: block; flex: 0 0 auto; width: clamp(13.75rem, 18.75vw + 6.25rem, 21.25rem); aspect-ratio: 4/5; overflow: hidden; } @media (max-width: 639.999px) { .instagram__item { width: 52vw; } } .instagram__image { display: block; width: 100%; height: 100%; -o-object-fit: cover; object-fit: cover; } @keyframes igMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (prefers-reduced-motion: reduce) { .instagram__track.is-running { animation: none; } } /** * Item List（商品一覧 / カテゴリーページ） * 左にカテゴリー絞り込みサイドバー、右に商品グリッド（_product-list.html を流用）。 * 幅は他セクション（product-list / footer 等）と揃え $content-width 内に収める。 * PC: サイドバー常時表示・グリッド 3 列。 * SP(<$md): サイドバーは「絞り込む」ボタンで左からスライドインするドロワー。グリッド 2 列。 */ .itemlist { padding: clamp(2.5rem, 3.125vw + 1.25rem, 3.75rem) 0 0; } .itemlist .js-fade-up { transition-duration: 1.2s; } .itemlist__inner { max-width: 1280px; margin: 0 auto; padding: 0 clamp(1rem, 5vw - 1rem, 3rem); } .itemlist__title { font-size: clamp(2.125rem, 3.4375vw + 0.75rem, 3.5rem); font-weight: 400; line-height: 1.1; color: var(--main-color); margin-bottom: clamp(1.5rem, 2.5vw + 0.5rem, 2.5rem); } @media (max-width: 767.999px) { .itemlist__title { text-align: center; } } .itemlist__subtitle { display: block; font-size: clamp(1rem, 0.625vw + 0.75rem, 1.25rem); font-weight: 400; line-height: 1.4; color: var(--font-color); margin-top: clamp(0.375rem, 0.625vw + 0.125rem, 0.625rem); } .itemlist__empty { font-size: clamp(0.875rem, 0.3125vw + 0.75rem, 1rem); color: var(--font-color); padding: clamp(1.5rem, 2.5vw + 0.5rem, 2.5rem) 0; } .itemlist__body { display: flex; align-items: flex-start; gap: clamp(1.5rem, 3.75vw + 0rem, 3rem); } @media (max-width: 767.999px) { .itemlist__body { display: block; } } .itemlist__main { flex: 1; min-width: 0; } .itemlist__main .product-list__grid { grid-template-columns: repeat(3, 1fr); margin-top: 0; gap: clamp(1.75rem, 1.875vw + 1rem, 2.5rem) clamp(0.75rem, 1.25vw + 0.25rem, 1.25rem); } @media (max-width: 767.999px) { .itemlist__main .product-list__grid { grid-template-columns: repeat(2, 1fr); gap: clamp(1.25rem, 0.625vw + 1rem, 1.5rem) clamp(0.375rem, 0.625vw + 0.125rem, 0.625rem); } } .itemlist__sidebar-wrap { flex-shrink: 0; width: clamp(13.75rem, 9.375vw + 10rem, 17.5rem); position: sticky; top: clamp(1.25rem, 3.125vw + 0rem, 2.5rem); align-self: flex-start; } @media (max-width: 767.999px) { .itemlist__sidebar-wrap { width: auto; position: static; opacity: 1 !important; transform: none !important; } } .menu-drawer, .search-drawer .itemlist__sidebar { position: fixed; top: 0; right: 0; left: auto; z-index: 3000; width: 86vw; max-width: 400px; height: 100vh; height: 100dvh; background: #fff; overflow-y: auto; padding: clamp(1.25rem, 1.25vw + 0.75rem, 1.75rem) clamp(1.25rem, 0.625vw + 1rem, 1.5rem) clamp(2.5rem, 3.125vw + 1.25rem, 3.75rem); transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); } .is-active.menu-drawer, .search-drawer .is-active.itemlist__sidebar { transform: translateX(0); transition: transform 0.4s 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); } .itemlist__sidebar { width: 100%; } @media (max-width: 767.999px) { .itemlist__sidebar { position: fixed; top: 0; right: 0; z-index: 3000; width: 86vw; max-width: 360px; height: 100vh; height: 100dvh; background: #fff; overflow-y: auto; padding: clamp(1.25rem, 1.25vw + 0.75rem, 1.75rem) clamp(1.25rem, 0.625vw + 1rem, 1.5rem) clamp(2.5rem, 3.125vw + 1.25rem, 3.75rem); transform: translateX(100%); transition: transform 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); } .itemlist__sidebar.is-active { transform: translateX(0); transition: transform 0.4s 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); } } .itemlist__sidebar-back { display: none; } @media (max-width: 767.999px) { .itemlist__sidebar-back { display: flex; align-items: center; gap: 2px; margin-bottom: clamp(1rem, 0.625vw + 0.75rem, 1.25rem); font-size: clamp(0.9375rem, 0.15625vw + 0.875rem, 1rem); line-height: 1.2; color: var(--main-color); cursor: pointer; } .itemlist__sidebar-back .material-symbols-outlined { font-size: 1.375rem; } } .search-drawer .itemlist__sidebar-back { display: flex; align-items: center; gap: 2px; margin-bottom: clamp(1rem, 0.625vw + 0.75rem, 1.25rem); font-size: clamp(0.9375rem, 0.15625vw + 0.875rem, 1rem); line-height: 1.2; color: var(--main-color); cursor: pointer; } .search-drawer .itemlist__sidebar-back .material-symbols-outlined { font-size: 1.375rem; } .filter-category { border-top: 1px solid var(--border-color); } .filter-category__item { border-bottom: 1px solid var(--border-color); } .filter-category__head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: clamp(0.875rem, 0.625vw + 0.625rem, 1.125rem) 0; font-size: clamp(0.9375rem, 0.3125vw + 0.8125rem, 1.0625rem); line-height: 1.3; text-align: left; color: var(--font-color); cursor: pointer; transition: opacity 0.3s ease; } .filter-category__head:hover { opacity: 0.7; } .filter-category__head::after { content: "\e145"; font-family: "Material Symbols Outlined"; font-size: 1.25rem; font-weight: 300; line-height: 1; color: var(--font-color); } .filter-category__head.is-active::after { content: "\e15b"; } .filter-category__head.is-current { color: var(--main-color); } .filter-category__head.is-current::after { color: var(--main-color); } .filter-category__head--link { text-decoration: none; } .filter-category__head--link::after { content: none; } .filter-category__head--link.is-active, .filter-category__head--link.is-current { color: var(--main-color); } .filter-category__item:has(.is-current) .filter-category__sub { max-height: 600px; padding-bottom: clamp(0.5rem, 0.625vw + 0.25rem, 0.75rem); } .filter-category__item:has(.is-current) .filter-category__head::after { content: "\e15b"; } .filter-category__sub { max-height: 0; overflow: hidden; transition: max-height 0.3s ease-out; } .filter-category__sub.is-active { max-height: 600px; padding-bottom: clamp(0.5rem, 0.625vw + 0.25rem, 0.75rem); } .filter-category__sub-link { display: block; padding: clamp(0.5rem, 0.15625vw + 0.4375rem, 0.5625rem) 0 clamp(0.5rem, 0.15625vw + 0.4375rem, 0.5625rem) clamp(0.5rem, 0.625vw + 0.25rem, 0.75rem); font-size: clamp(0.875rem, 0.15625vw + 0.8125rem, 0.9375rem); line-height: 1.4; color: #aaa; transition: color 0.3s ease; } .filter-category__sub-link:hover { color: var(--font-color); } .filter-category__sub-link.is-active, .filter-category__sub-link.is-current { color: var(--main-color); } .filter-sort { margin-top: clamp(1.5rem, 1.25vw + 1rem, 2rem); } .filter-sort__select { -webkit-appearance: none; -moz-appearance: none; appearance: none; width: 100%; padding: clamp(0.75rem, 0.3125vw + 0.625rem, 0.875rem) clamp(2.5rem, 0.625vw + 2.25rem, 2.75rem) clamp(0.75rem, 0.3125vw + 0.625rem, 0.875rem) clamp(0.875rem, 0.3125vw + 0.75rem, 1rem); font-size: clamp(0.875rem, 0.15625vw + 0.8125rem, 0.9375rem); line-height: 1.4; color: var(--font-color); background-color: #fff; border: 1px solid var(--border-color); cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1.5 7 7.5 13 1.5' stroke='%23333' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right clamp(0.875rem, 0.3125vw + 0.75rem, 1rem) center; background-size: 14px 9px; transition: border-color 0.3s ease; } .filter-sort__select:focus { outline: none; border-color: var(--main-color); } .filter-search { position: relative; margin-top: clamp(0.75rem, 0.625vw + 0.5rem, 1rem); } .filter-search__input { width: 100%; padding: clamp(0.75rem, 0.3125vw + 0.625rem, 0.875rem) clamp(2.75rem, 0.625vw + 2.5rem, 3rem) clamp(0.75rem, 0.3125vw + 0.625rem, 0.875rem) clamp(0.875rem, 0.3125vw + 0.75rem, 1rem); font-size: clamp(0.875rem, 0.15625vw + 0.8125rem, 0.9375rem); line-height: 1.4; color: var(--font-color); background: #fff; border: 1px solid var(--border-color); transition: border-color 0.3s ease; } .filter-search__input::-moz-placeholder { color: #aaa; } .filter-search__input::placeholder { color: #aaa; } .filter-search__input:focus { outline: none; border-color: var(--main-color); } .filter-search__btn { position: absolute; top: 50%; right: clamp(0.625rem, 0.3125vw + 0.5rem, 0.75rem); transform: translateY(-50%); display: flex; align-items: center; justify-content: center; color: var(--font-color); cursor: pointer; transition: color 0.3s ease; } .filter-search__btn:hover { color: var(--main-color); } .filter-search__btn .material-symbols-outlined { font-size: 1.375rem; } .itemlist__filter-btn { position: fixed; right: clamp(0.75rem, 0.625vw + 0.5rem, 1rem); bottom: clamp(0.75rem, 0.625vw + 0.5rem, 1rem); z-index: 2000; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 2px; width: 76px; height: 76px; border-radius: 50%; background: var(--main-color); color: #fff; cursor: pointer; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); transition: opacity 0.3s ease; } @media (max-width: 767.999px) { .itemlist__filter-btn { display: flex; } } .itemlist__filter-btn:hover { opacity: 0.85; } .itemlist__filter-btn .material-symbols-outlined { font-size: 1.625rem; } .itemlist__filter-btn .itemlist__filter-btn-text { font-size: 0.6875rem; line-height: 1.2; } .itemlist__overlay { position: fixed; inset: 0; z-index: 2500; background: rgba(0, 0, 0, 0.6); opacity: 0; visibility: hidden; transition: opacity 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); } .itemlist__overlay.is-active { opacity: 1; visibility: visible; transition: opacity 0.4s 0.4s cubic-bezier(0.645, 0.045, 0.355, 1); } /** * ページネーション（商品一覧） * 矢印 + ページ番号を中央に並べる。現在ページは .is-current で強調。 * PC: 1 2 3 4 5 … 9 / SP: ._hide-sp を間引いて 1 2 3 4 … 9。 */ .pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: clamp(1.125rem, 1.5625vw + 0.5rem, 1.75rem); margin-top: clamp(2.5rem, 3.75vw + 1rem, 4rem); } .pagination__num, .pagination__ellipsis { font-family: var(--en-font-family); font-size: clamp(1.125rem, 0.625vw + 0.875rem, 1.375rem); font-weight: 300; line-height: 1; color: var(--font-color); } .pagination__num { transition: opacity 0.3s ease; } .pagination__num:hover { opacity: 0.5; } .pagination__num.is-current { color: var(--main-color); pointer-events: none; } @media (max-width: 767.999px) { .pagination__num._hide-sp { display: none; } } .pagination__ellipsis { color: #999; } .pagination__nav { display: flex; align-items: center; justify-content: center; color: var(--font-color); transition: opacity 0.3s ease; } .pagination__nav:hover { opacity: 0.5; } .pagination__nav .material-symbols-outlined { font-size: clamp(1.375rem, 0.625vw + 1.125rem, 1.625rem); font-variation-settings: "wght" 300; } /** * メニュードロワー（全ページ共通・ハンバーガーで開く） * 検索ドロワーと枠（%drawer-panel）・戻るボタン（%drawer-back）を共有し意匠を統一。 */ @media (max-width: 639.999px) { .menu-drawer { right: auto; left: 0; transform: translateX(-100%); text-align: right; } .menu-drawer.is-active { transform: translateX(0); } } .menu-drawer__back { display: flex; align-items: center; gap: 2px; margin-bottom: clamp(1rem, 0.625vw + 0.75rem, 1.25rem); font-size: clamp(0.9375rem, 0.15625vw + 0.875rem, 1rem); line-height: 1.2; color: var(--main-color); cursor: pointer; } .menu-drawer__back .material-symbols-outlined { font-size: 1.375rem; } @media (max-width: 639.999px) { .menu-drawer__back { width: 100%; flex-direction: row-reverse; } .menu-drawer__back .material-symbols-outlined { transform: scaleX(-1); } } .menu-drawer__register { display: block; width: 100%; padding: clamp(0.875rem, 0.625vw + 0.625rem, 1.125rem); margin-bottom: clamp(0.5rem, 0.625vw + 0.25rem, 0.75rem); font-size: clamp(0.875rem, 0.3125vw + 0.75rem, 1rem); line-height: 1.4; text-align: center; color: #fff; background: var(--main-color); transition: opacity 0.3s ease; } .menu-drawer__register:hover { opacity: 0.85; } .menu-list { margin-top: 0; } .menu-list__item { border-bottom: 1px solid var(--border-color); } .menu-list__item:first-child { border-top: 1px solid var(--border-color); } .menu-list__link { display: flex; align-items: center; justify-content: space-between; gap: clamp(0.75rem, 0.625vw + 0.5rem, 1rem); padding: clamp(0.875rem, 0.625vw + 0.625rem, 1.125rem) 0; font-size: clamp(0.9375rem, 0.15625vw + 0.875rem, 1rem); line-height: 1.3; color: var(--font-color); transition: opacity 0.3s ease; } @media (max-width: 639.999px) { .menu-list__link { justify-content: flex-end; } } .menu-list__link:hover { opacity: 0.7; } .menu-list__link .material-symbols-outlined { flex-shrink: 0; font-size: 1.25rem; color: var(--font-color); } .menu-drawer__sns { display: flex; align-items: center; gap: clamp(1rem, 0.625vw + 0.75rem, 1.25rem); margin-top: clamp(1.25rem, 0.625vw + 1rem, 1.5rem); } .menu-drawer__sns a { display: inline-flex; align-items: center; justify-content: center; transition: opacity 0.3s ease; } .menu-drawer__sns a:hover { opacity: 0.7; } .menu-drawer__sns svg { width: 24px; height: 24px; fill: var(--main-color); } .menu-drawer__sns path, .menu-drawer__sns circle { fill: var(--main-color); }