@charset "UTF-8"; :root { --height-keyword-area: 4.5rem; } @media screen and (min-width: 992px) { :root { --height-keyword-area: 4.9rem; } } @media screen and (max-width: 991px) { :root{ } } /* 背景 ------------------------------------------------------------- */ .bg-blue-default { background-color: var(--color-bg); } .bg-blue-primary { background-color: var(--color-blue-primary); } .bg-blue-secondary, .bg-blue-ice-blue { background-color: var(--color-border); } .bg-blue-dark { background-color: var(--color-blue-dark); } .bg-blue-light { background-color: var(--color-blue-light); } .bg-red{ background-color: var(--color-red); } .bg-yellow{ background-color: var(--color-yellow-accent); } .bg-orange{ background-color: var(--color-green-used); } .bg-green{ background-color: var(--color-orange-specialty); } @media screen and (min-width: 992px) { .c-top-sub-section{ background-color: transparent; } } .c-heading{ border-radius: 1rem 1rem 0 0; padding: .6rem 1rem .7rem; display: flex; align-items: center; justify-content: center; gap: .4rem; font-size: 2.4rem; line-height: 1; font-weight: var(--fw-extrabold); border-bottom: .5rem solid var(--color-blue-primary); } .c-heading::before{ content: ""; width: 4rem; height: 4rem; mask-repeat: no-repeat; mask-size: contain; } /* タイトル　 　　背景色/テキストカラー/ボーダーカラー ------------------------------------------------------------- */ /* ダークブルー/アクセントイエロー/アクセントイエロー */ [data-heading-bg-color="dark-blue"]{ background-color: var(--color-blue-dark); } [data-heading-bg-color="dark-blue"]{ color: var(--color-yellow-accent); border-color: var(--color-yellow-accent); } [data-heading-bg-color="dark-blue"]:before{ background-color: var(--color-yellow-accent); } /* ダークブルー/ホワイト/なし */ [data-heading-bg-color="dark-blue"][data-heading-text-color="white"]{ color: var(--color-white); border-bottom: unset; } [data-heading-bg-color="dark-blue"][data-heading-text-color="white"]:before{ background-color: var(--color-white); } /* ライトブルー/ホワイト/アクセントイエロー */ [data-heading-bg-color="light-blue"]{ background-color: var(--color-blue-light); } [data-heading-bg-color="light-blue"]{ color: var(--color-white); border-color: var(--color-yellow-accent); } [data-heading-bg-color="light-blue"]:before{ background-color: var(--color-white); } /* レッド/ホワイト/なし */ [data-heading-bg-color="red"]{ background-color: var(--color-red); } [data-heading-bg-color="red"]{ color: var(--color-white); } [data-heading-bg-color="red"]:before{ background-color: var(--color-white); } /* イエロー/ダークブルー/ダークブルー */ [data-heading-bg-color="yellow"]{ background-color: var(--color-yellow-accent); } [data-heading-bg-color="yellow"]{ color: var(--color-blue-dark); border-color: var(--color-blue-dark); } [data-heading-bg-color="yellow"]:before{ background-color: var(--color-blue-dark); } /* ライトブルー/ホワイト/アクセントイエロー */ [data-heading-bg-color="light-blue"]{ background-color: var(--color-blue-light); } [data-heading-bg-color="light-blue"]{ color: var(--color-white); border-color: var(--color-yellow-accent); } [data-heading-bg-color="light-blue"]:before{ background-color: var(--color-white); } /* オレンジ/ホワイト/なし */ [data-heading-bg-color="orange"]{ background-color: var(--color-orange-specialty); } [data-heading-bg-color="orange"]{ color: var(--color-white); } [data-heading-bg-color="orange"]:before{ background-color: var(--color-white); } /* グリーン/パールブルー/ディープイエロー */ [data-heading-bg-color="green"]{ background-color: var(--color-green-used); } [data-heading-bg-color="green"]{ color: var(--color-blue-pale); border-color: var(--color-yellow-deep); } [data-heading-bg-color="green"]:before{ background-color: var(--color-blue-pale); } /* プライマリーブルー/ホワイト/アクセントイエロー */ [data-heading-bg-color="primary-blue"]{ background-color: var(--color-blue-primary); } [data-heading-bg-color="primary-blue"]{ color: var(--color-white); border-color: var(--color-yellow-accent); } [data-heading-bg-color="primary-blue"]:before{ background-color: var(--color-white); } /* アイスブルー/ホワイト/アクセントイエロー */ [data-heading-bg-color="ice-blue"]{ background-color: var(--color-ice-blue); } [data-heading-bg-color="ice-blue"]{ color: var(--color-blue-dark); border-color: var(--color-blue-dark); } [data-heading-bg-color="ice-blue"]:before{ background-color: var(--color-blue-dark); } /* ボーダーがないパターンの時につける */ [data-heading-border-color="none"]{ border-bottom: unset; } /* アイコン別 */ /* メガホン */ [data-heading-icon="megaphone"]:before{ mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240.001%22%20height%3D%2240%22%20viewBox%3D%220%200%2040.001%2040%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_26581%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2026581%22%20transform%3D%22translate(-82.999%20-789)%22%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_28986%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2028986%22%20width%3D%2240%22%20height%3D%2240%22%20transform%3D%22translate(83%20789)%22%20fill%3D%22none%22%2F%3E%20%3Cg%20id%3D%22Icon_ionic-ios-megaphone%22%20data-name%3D%22Icon%20ionic-ios-megaphone%22%20transform%3D%22translate(79.631%20792.625)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_81236%22%20data-name%3D%22%E3%83%91%E3%82%B9%2081236%22%20d%3D%22M6.074%2C12.624a5.89%2C5.89%2C0%2C0%2C1%2C2.79-5.06.207.207%2C0%2C0%2C0-.109-.385h0A4.953%2C4.953%2C0%2C0%2C0%2C4%2C11.655a.911.911%2C0%2C0%2C0-.635.956.874.874%2C0%2C0%2C0%2C.693.949A5.659%2C5.659%2C0%2C0%2C0%2C7.985%2C17.7h0a.28.28%2C0%2C0%2C0%2C.244-.481A6.39%2C6.39%2C0%2C0%2C1%2C6.074%2C12.624Z%22%20transform%3D%22translate(0%20-0.334)%22%20fill%3D%22%23fff100%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_81237%22%20data-name%3D%22%E3%83%91%E3%82%B9%2081237%22%20d%3D%22M29.592%2C6.889c-.064-.173-.135-.333-.205-.494A6.579%2C6.579%2C0%2C0%2C0%2C28%2C4.331a3.165%2C3.165%2C0%2C0%2C0-2.232-.956%2C2.932%2C2.932%2C0%2C0%2C0-1.655.5%2C22.874%2C22.874%2C0%2C0%2C1-9.876%2C2.95c-2.674%2C0-2.527.013-2.527.013a6.013%2C6.013%2C0%2C0%2C0-.667%2C10.582c.776.648%2C1.514.564%2C1.353%2C1.424s-1.443%2C6.253-1.6%2C7.375-.186%2C1.764.257%2C2.309a9.464%2C9.464%2C0%2C0%2C0%2C4.361%2C1.526c1.186%2C0%2C.885-.558.885-2.809s-.6-8.446%2C1.058-8.446c3.1%2C0%2C4.714%2C1.109%2C7.138%2C2.033a3.437%2C3.437%2C0%2C0%2C0%2C1.289.3A3.164%2C3.164%2C0%2C0%2C0%2C28%2C19.966%2C6.646%2C6.646%2C0%2C0%2C0%2C29.393%2C17.9c.071-.167.141-.333.212-.513a14.976%2C14.976%2C0%2C0%2C0%2C.879-5.252A14.985%2C14.985%2C0%2C0%2C0%2C29.592%2C6.889ZM27.886%2C16.958c-.41%2C1.007-1.129%2C1.809-1.725%2C1.809s-1.142-.8-1.552-1.809a13.225%2C13.225%2C0%2C0%2C1-.789-4.791%2C13.274%2C13.274%2C0%2C0%2C1%2C.789-4.8c.41-1%2C.956-1.6%2C1.546-1.6s1.3.609%2C1.719%2C1.6a12.921%2C12.921%2C0%2C0%2C1%2C.013%2C9.594Z%22%20transform%3D%22translate(-0.424)%22%20fill%3D%22%23fff100%22%2F%3E%20%3C%2Fg%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_81238%22%20data-name%3D%22%E3%83%91%E3%82%B9%2081238%22%20d%3D%22M112.552%2C809.425l5.214-8.051%2C1.228%2C3.865L124%2C800.718l-5.359%2C8.078-1.74-3.084Z%22%20transform%3D%22translate(-1.86%20-4.294)%22%20fill%3D%22%23fff100%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_81239%22%20data-name%3D%22%E3%83%91%E3%82%B9%2081239%22%20d%3D%22M0%2C0%2C4.295%2C6.631%2C5.306%2C3.448%2C9.429%2C7.171%2C5.015.518%2C3.583%2C3.058Z%22%20transform%3D%22translate(111.104%20807)%20rotate(8)%22%20fill%3D%22%23fff100%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E'); } /* セールアイコン */ .c-heading[data-heading-icon="sale"]::before{ content: ""; width: 4rem; height: 4rem; mask-repeat: unset; mask-size: unset; background-color: unset; background-repeat: no-repeat; background-size: contain; background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_26581%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2026581%22%20transform%3D%22translate(-83%20-789)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_81235%22%20data-name%3D%22%E3%83%91%E3%82%B9%2081235%22%20d%3D%22M20%2C0%2C17.185%2C2.222%2C13.82.979%2C11.828%2C3.962%2C8.245%2C3.82%2C7.272%2C7.272%2C3.82%2C8.245l.142%2C3.584L.979%2C13.82l1.243%2C3.364L0%2C20l2.221%2C2.816L.979%2C26.18l2.983%2C1.992L3.82%2C31.756l3.453.972.972%2C3.452%2C3.584-.142%2C1.992%2C2.983%2C3.365-1.243L20%2C40l2.816-2.222%2C3.365%2C1.243%2C1.991-2.983%2C3.584.142.972-3.452%2C3.453-.972-.142-3.584%2C2.983-1.992-1.243-3.364L40%2C20l-2.221-2.816%2C1.243-3.364-2.983-1.992.142-3.584-3.453-.972L31.756%2C3.82l-3.584.142L26.181.979%2C22.816%2C2.222Z%22%20transform%3D%22translate(83%20789)%22%20fill%3D%22%23fff%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_84023%22%20data-name%3D%22%E3%83%91%E3%82%B9%2084023%22%20d%3D%22M3.08.112A2.643%2C2.643%2C0%2C0%2C0%2C5.95-2.632c0-1.414-.826-2.058-2.282-3.136C2.73-6.454%2C2.45-6.734%2C2.45-7.21c0-.434.238-.714.56-.714a.624.624%2C0%2C0%2C1%2C.588.7v.392a.162.162%2C0%2C0%2C0%2C.168.168h1.96a.162.162%2C0%2C0%2C0%2C.168-.168v-.336A2.662%2C2.662%2C0%2C0%2C0%2C3.01-9.912%2C2.626%2C2.626%2C0%2C0%2C0%2C.168-7.21c0%2C1.68%2C1.218%2C2.548%2C2.24%2C3.276.924.672%2C1.26.938%2C1.26%2C1.386a.607.607%2C0%2C0%2C1-.588.672c-.322%2C0-.56-.28-.56-.728v-.322a.162.162%2C0%2C0%2C0-.168-.168H.378a.162.162%2C0%2C0%2C0-.168.168v.434A2.607%2C2.607%2C0%2C0%2C0%2C3.08.112ZM10.682%2C0h2.03c.1%2C0%2C.154-.042.154-.126%2C0-.014-.014-.028-.014-.056L10.836-9.646a.171.171%2C0%2C0%2C0-.182-.154h-2.3a.171.171%2C0%2C0%2C0-.182.154L6.146-.182c-.028.126.028.182.14.182H8.274a.162.162%2C0%2C0%2C0%2C.182-.154l.182-1.218a.078.078%2C0%2C0%2C1%2C.084-.07h1.512a.078.078%2C0%2C0%2C1%2C.084.07L10.5-.154A.162.162%2C0%2C0%2C0%2C10.682%2C0ZM8.932-3.3%2C9.408-6.5c.014-.07.07-.07.084%2C0L10-3.3c0%2C.042-.014.07-.056.07H8.988C8.946-3.234%2C8.932-3.262%2C8.932-3.3ZM13.72%2C0H18.8a.162.162%2C0%2C0%2C0%2C.168-.168V-1.82a.162.162%2C0%2C0%2C0-.168-.168H15.946a.066.066%2C0%2C0%2C1-.07-.07V-9.632a.162.162%2C0%2C0%2C0-.168-.168H13.72a.162.162%2C0%2C0%2C0-.168.168V-.168A.162.162%2C0%2C0%2C0%2C13.72%2C0Zm11.4-7.98V-9.632a.162.162%2C0%2C0%2C0-.168-.168H19.894a.162.162%2C0%2C0%2C0-.168.168V-.168A.162.162%2C0%2C0%2C0%2C19.894%2C0h5.054a.162.162%2C0%2C0%2C0%2C.168-.168V-1.82a.162.162%2C0%2C0%2C0-.168-.168H22.12a.066.066%2C0%2C0%2C1-.07-.07V-3.836a.066.066%2C0%2C0%2C1%2C.07-.07h1.554a.162.162%2C0%2C0%2C0%2C.168-.168V-5.74a.162.162%2C0%2C0%2C0-.168-.168H22.12a.066.066%2C0%2C0%2C1-.07-.07V-7.742a.066.066%2C0%2C0%2C1%2C.07-.07h2.828A.162.162%2C0%2C0%2C0%2C25.116-7.98Z%22%20transform%3D%22translate(90%20814.5)%22%20fill%3D%22%23d90f0f%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E') } /* サムズアップ */ [data-heading-icon="thumbs-up"]:before{ mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_26581%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2026581%22%20transform%3D%22translate(-83%20-789)%22%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_28986%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2028986%22%20width%3D%2240%22%20height%3D%2240%22%20transform%3D%22translate(83%20789)%22%20fill%3D%22none%22%2F%3E%20%3Cpath%20id%3D%22Icon_metro-thumbs-up%22%20data-name%3D%22Icon%20metro-thumbs-up%22%20d%3D%22M23.622%2C12.9c-.205-.548%2C5.459-5.605%2C2.156-9.7-.773-.958-3.395%2C4.589-7.118%2C7.1-2.055%2C1.385-6.834%2C4.334-6.834%2C5.965V26.812c0%2C1.96%2C7.579%2C4.037%2C13.339%2C4.037%2C2.112%2C0%2C5.17-13.228%2C5.17-15.329s-6.511-2.073-6.713-2.622Zm-13.339.147a4.572%2C4.572%2C0%2C0%2C0-4.627%2C4.817v7.478A4.42%2C4.42%2C0%2C0%2C0%2C10.283%2C30c1.013%2C0-1.542-.882-1.542-3.486v-9.83c0-2.727%2C2.556-3.639%2C1.542-3.639Z%22%20transform%3D%22translate(85.006%20791.916)%22%20fill%3D%22%23003a7a%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E') } /* 王冠 */ [data-heading-icon="crown"]:before{ mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_26581%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2026581%22%20transform%3D%22translate(-82.998%20-789)%22%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_28986%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2028986%22%20width%3D%2240%22%20height%3D%2240%22%20transform%3D%22translate(82.998%20789)%22%20fill%3D%22none%22%2F%3E%20%3Cpath%20id%3D%22Icon_awesome-crown%22%20data-name%3D%22Icon%20awesome-crown%22%20d%3D%22M26.485%2C22.472H5.618a.8.8%2C0%2C0%2C0-.8.8V24.88a.8.8%2C0%2C0%2C0%2C.8.8H26.485a.8.8%2C0%2C0%2C0%2C.8-.8V23.275A.8.8%2C0%2C0%2C0%2C26.485%2C22.472ZM29.7%2C6.421a2.408%2C2.408%2C0%2C0%2C0-2.408%2C2.408%2C2.359%2C2.359%2C0%2C0%2C0%2C.221.993L23.877%2C12a1.6%2C1.6%2C0%2C0%2C1-2.217-.582L17.572%2C4.264a2.408%2C2.408%2C0%2C1%2C0-3.04%2C0l-4.088%2C7.153A1.6%2C1.6%2C0%2C0%2C1%2C8.227%2C12L4.6%2C9.822a2.407%2C2.407%2C0%2C1%2C0-2.192%2C1.415%2C2.459%2C2.459%2C0%2C0%2C0%2C.386-.04l3.627%2C9.671H25.683L29.31%2C11.2a2.459%2C2.459%2C0%2C0%2C0%2C.386.04%2C2.408%2C2.408%2C0%2C1%2C0%2C0-4.816Z%22%20transform%3D%22translate(86.946%20796.159)%22%20fill%3D%22%23fff%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E') } /* 魚 */ [data-heading-icon="fish"]:before{ mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%20%3Cdefs%3E%20%3CclipPath%20id%3D%22clip-path%22%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_29000%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2029000%22%20width%3D%2232.032%22%20height%3D%2218.513%22%20fill%3D%22%23fff%22%2F%3E%20%3C%2FclipPath%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_26581%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2026581%22%20transform%3D%22translate(-82.998%20-789)%22%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_28986%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2028986%22%20width%3D%2240%22%20height%3D%2240%22%20transform%3D%22translate(82.998%20789)%22%20fill%3D%22none%22%2F%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_26639%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2026639%22%20transform%3D%22translate(86.982%20800.744)%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_26638%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2026638%22%20clip-path%3D%22url(%23clip-path)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_81243%22%20data-name%3D%22%E3%83%91%E3%82%B9%2081243%22%20d%3D%22M16.617%2C15.879a.046.046%2C0%2C0%2C0-.015-.063.045.045%2C0%2C0%2C0-.016-.006%2C15.979%2C15.979%2C0%2C0%2C1-2.934-.733%2C32.941%2C32.941%2C0%2C0%2C1-6.6-3.456.064.064%2C0%2C0%2C0-.084.011%2C10.891%2C10.891%2C0%2C0%2C1-5.677%2C3.5A1.178%2C1.178%2C0%2C0%2C1%2C.3%2C15.049c-.455-.311-.275-.791-.077-1.293Q.74%2C12.44%2C1.8%2C9.872A3.031%2C3.031%2C0%2C0%2C0%2C1.528%2C7.3Q1.3%2C6.721.2%2C4.113c-.212-.5-.359-.886.105-1.217A1.414%2C1.414%2C0%2C0%2C1%2C1.5%2C2.912%2C9.559%2C9.559%2C0%2C0%2C1%2C4.293%2C4.193%2C15.3%2C15.3%2C0%2C0%2C1%2C6.85%2C6.336a.209.209%2C0%2C0%2C0%2C.249.04q2.962-1.589%2C4.734-2.5.886-.456%2C1.659-.785a.045.045%2C0%2C0%2C0%2C.027-.049%2C13.792%2C13.792%2C0%2C0%2C1-.214-2.034c-.016-.526.1-.869.636-.961a5.835%2C5.835%2C0%2C0%2C1%2C1.607.025%2C8.15%2C8.15%2C0%2C0%2C1%2C4.81%2C1.9q.3.29.493.458a.443.443%2C0%2C0%2C0%2C.225.1%2C20.3%2C20.3%2C0%2C0%2C1%2C9.5%2C4.4c.959.752%2C1.92%2C1.648%2C1.207%2C2.969a4.418%2C4.418%2C0%2C0%2C1-.8.952%2C18.807%2C18.807%2C0%2C0%2C1-5.181%2C3.5%2C14.54%2C14.54%2C0%2C0%2C1-3.4%2C1.1q-.419.08-1.329.223a.23.23%2C0%2C0%2C0-.137.076%2C9.344%2C9.344%2C0%2C0%2C1-3.55%2C2.491%2C1.983%2C1.983%2C0%2C0%2C1-1.26.221c-.682-.219-.486-.975-.188-1.47q.538-.89.676-1.123M26.639%2C8.108A1.234%2C1.234%2C0%2C1%2C0%2C25.4%2C9.342a1.234%2C1.234%2C0%2C0%2C0%2C1.234-1.234%22%20transform%3D%22translate(0%200)%22%20fill%3D%22%23fff%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E') } /* 釣竿 */ [data-heading-icon="fishing-rod"]:before{ mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%20%3Cdefs%3E%20%3CclipPath%20id%3D%22clip-path%22%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_29001%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2029001%22%20width%3D%2233.293%22%20height%3D%2234.033%22%20fill%3D%22%23fff%22%2F%3E%20%3C%2FclipPath%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_26581%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2026581%22%20transform%3D%22translate(-82.996%20-789)%22%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_28986%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2028986%22%20width%3D%2240%22%20height%3D%2240%22%20transform%3D%22translate(82.996%20789)%22%20fill%3D%22none%22%2F%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_26641%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2026641%22%20transform%3D%22translate(85.996%20792)%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_26640%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2026640%22%20clip-path%3D%22url(%23clip-path)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_81244%22%20data-name%3D%22%E3%83%91%E3%82%B9%2081244%22%20d%3D%22M31.6%2C3.041A.051.051%2C0%2C0%2C0%2C31.54%2C3a.052.052%2C0%2C0%2C0-.024.014L13.908%2C21.262a.308.308%2C0%2C0%2C0-.074.3%2C2.03%2C2.03%2C0%2C0%2C1-.751%2C2.069q-.957%2C1.018-2.514%2C2.55a2.347%2C2.347%2C0%2C0%2C0-.229.276.088.088%2C0%2C0%2C0%2C.009.115l1.215%2C1.173a.056.056%2C0%2C0%2C0%2C.08%2C0%2C.058.058%2C0%2C0%2C0%2C.017-.04%2C2.825%2C2.825%2C0%2C0%2C1%2C.877-2.078%2C3.031%2C3.031%2C0%2C0%2C1%2C4.512.4%2C3.214%2C3.214%2C0%2C0%2C1-.078%2C3.921%2C3.31%2C3.31%2C0%2C0%2C1-3.827.935%2C4.907%2C4.907%2C0%2C0%2C1-1.356-.969q-1.952-1.8-2.442-2.326a.044.044%2C0%2C0%2C0-.062%2C0l0%2C0q-.85.836-1.615%2C1.651c-1.383%2C1.472-2.327%2C2.4-3.9%2C4.035a1.926%2C1.926%2C0%2C0%2C1-1.585.759%2C2.847%2C2.847%2C0%2C0%2C1-2.109-1.9c-.24-.854.154-1.316.715-1.926q.425-.46.594-.627%2C4.437-4.39%2C8.7-8.817.059-.061.353-.322a1.957%2C1.957%2C0%2C0%2C1%2C1.631-.667.314.314%2C0%2C0%2C0%2C.184-.054%2C2.183%2C2.183%2C0%2C0%2C0%2C.31-.262q1.985-2%2C15.285-15.3C29.1%2C2.907%2C30.406%2C1.721%2C31.677.435c.3-.307.8-.578%2C1.19-.352.719.41.4%2C1.066-.028%2C1.53a.269.269%2C0%2C0%2C0-.065.242%2C12.3%2C12.3%2C0%2C0%2C1-.564%2C7.624%2C15.739%2C15.739%2C0%2C0%2C1-2.983%2C4.468c-2.216%2C2.432-4.109%2C5.084-4.5%2C8.3a6.747%2C6.747%2C0%2C0%2C0%2C.625%2C3.773q.154.3.6%2C1.071a1.575%2C1.575%2C0%2C0%2C1%2C.206.932.131.131%2C0%2C0%2C1-.008.038l-.176.493a.543.543%2C0%2C0%2C0%2C.006.377c.594%2C1.52%2C1.052%2C3.789-.74%2C4.774a2.369%2C2.369%2C0%2C0%2C1-3.272-.882%2C2.268%2C2.268%2C0%2C0%2C1%2C.021-1.939.6.6%2C0%2C0%2C1%2C.875-.309c.454.278.287.787.2%2C1.332a.564.564%2C0%2C0%2C0%2C.24.471%2C1.069%2C1.069%2C0%2C0%2C0%2C1.093.248c.633-.179.784-.7.754-1.314a6.3%2C6.3%2C0%2C0%2C0-.4-1.869c-.132-.359-.483-.536-.605-.9a1.635%2C1.635%2C0%2C0%2C1%2C.108-1.239.288.288%2C0%2C0%2C0%2C.007-.225%2C11.72%2C11.72%2C0%2C0%2C1-.8-2.577%2C10.422%2C10.422%2C0%2C0%2C1%2C.647-5.323%2C18.419%2C18.419%2C0%2C0%2C1%2C3.65-5.674q1.2-1.308%2C1.56-1.78c1.816-2.36%2C3.018-5.7%2C2.279-8.683%22%20transform%3D%22translate(0%200)%22%20fill%3D%22%23fff%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E') } /* ボート */ [data-heading-icon="boat"]:before{ mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%20%3Cdefs%3E%20%3CclipPath%20id%3D%22clip-path%22%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_29002%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2029002%22%20width%3D%2234.625%22%20height%3D%2233.77%22%20fill%3D%22%23fff%22%2F%3E%20%3C%2FclipPath%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_26581%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2026581%22%20transform%3D%22translate(-82.996%20-789)%22%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_28986%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2028986%22%20width%3D%2240%22%20height%3D%2240%22%20transform%3D%22translate(82.996%20789)%22%20fill%3D%22none%22%2F%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_26643%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2026643%22%20transform%3D%22translate(85.997%20792.001)%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_26642%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2026642%22%20clip-path%3D%22url(%23clip-path)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_81245%22%20data-name%3D%22%E3%83%91%E3%82%B9%2081245%22%20d%3D%22M99.168%2C0a2.877%2C2.877%2C0%2C1%2C1-2.877%2C2.877A2.876%2C2.876%2C0%2C0%2C1%2C99.168%2C0%22%20transform%3D%22translate(-86.476%200)%22%20fill%3D%22%23fff%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_81246%22%20data-name%3D%22%E3%83%91%E3%82%B9%2081246%22%20d%3D%22M12.217%2C19.87l-.364%2C2.811a.062.062%2C0%2C0%2C0%2C.054.07h.009q.635-.007%2C2.179-.013a3.177%2C3.177%2C0%2C0%2C1%2C1.179.157%2C2.019%2C2.019%2C0%2C0%2C1%2C1.215%2C1.542.1.1%2C0%2C0%2C0%2C.095.076q3.8.008%2C6.571-.005a2.289%2C2.289%2C0%2C0%2C1%2C.858.076q.472.235.225.8-.19.428-1.567%2C3.164a4.928%2C4.928%2C0%2C0%2C1-6.2%2C2.679q-.193-.074-1.3-.651a3.759%2C3.759%2C0%2C0%2C0-2.258-.012q-.7.372-1.251.633a4.183%2C4.183%2C0%2C0%2C1-3.76-.221q-.283-.147-.79-.424a.689.689%2C0%2C0%2C0-.2-.072%2C3.607%2C3.607%2C0%2C0%2C0-2%2C.134%2C4.228%2C4.228%2C0%2C0%2C1-2.933.812.725.725%2C0%2C0%2C1-.668-.582Q.682%2C28.113.031%2C25.412A.654.654%2C0%2C0%2C1%2C.3%2C24.631a1.942%2C1.942%2C0%2C0%2C1%2C.934-.119q2.688.012%2C4.97%2C0a.05.05%2C0%2C0%2C0%2C.05-.05.048.048%2C0%2C0%2C0%2C0-.017A2.582%2C2.582%2C0%2C0%2C1%2C6.173%2C22.9c.283-1.188.885-3.369%2C1.194-5.1a7.528%2C7.528%2C0%2C0%2C1%2C.424-1.678A3.225%2C3.225%2C0%2C0%2C1%2C10.9%2C14.4a2.989%2C2.989%2C0%2C0%2C1%2C1.941%2C1.16q.7.851%2C1.711%2C2.264a2.594%2C2.594%2C0%2C0%2C0%2C.19.228.187.187%2C0%2C0%2C0%2C.191.054%2C16.61%2C16.61%2C0%2C0%2C1%2C3.166-.758.542.542%2C0%2C0%2C0%2C.251-.088q4.715-3.136%2C12-7.869c.258-.168.537-.351.832-.234s.273.43.274.733q.009%2C9.1-.012%2C13.149a.63.63%2C0%2C0%2C0%2C.228.532%2C11.2%2C11.2%2C0%2C0%2C1%2C1.124%2C1.19%2C9.554%2C9.554%2C0%2C0%2C1-.354%2C11.679.293.293%2C0%2C0%2C0-.029.332q.56.977%2C1.412%2C2.528a3.134%2C3.134%2C0%2C0%2C1%2C.483%2C1.345.28.28%2C0%2C0%2C1-.192.253c-.6.2-2.053-.635-2.811-1.013a1.065%2C1.065%2C0%2C0%2C0-.927.1%2C20.5%2C20.5%2C0%2C0%2C1-2.038.882%2C1.72%2C1.72%2C0%2C0%2C1-.4.058c-.813.06-.356-.9-.173-1.236q.323-.6%2C1.328-2.291.062-.105.271-.533a.25.25%2C0%2C0%2C0-.025-.261%2C12.237%2C12.237%2C0%2C0%2C1-1.875-3.569A.05.05%2C0%2C0%2C0%2C27.414%2C33l-.013.006a3.8%2C3.8%2C0%2C0%2C1-.992.6c-.457.147-.565-.189-.612-.574a10.679%2C10.679%2C0%2C0%2C1-.055-2.112c.058-.738.639-1.008%2C1.233-1.3a.241.241%2C0%2C0%2C0%2C.134-.187%2C8.958%2C8.958%2C0%2C0%2C1%2C1.984-4.809q.273-.323%2C1.16-1.189a.553.553%2C0%2C0%2C0%2C.1-.4q-.022-1.89-.005-11.876a.064.064%2C0%2C0%2C0-.1-.054L19.182%2C18.316a.079.079%2C0%2C0%2C0-.032.09c.183.569.331%2C1.088-.176%2C1.524a2.072%2C2.072%2C0%2C0%2C1-.879.388%2C21.608%2C21.608%2C0%2C0%2C0-3.442%2C1.09%2C1.2%2C1.2%2C0%2C0%2C1-1.222-.394q-.422-.394-1.153-1.162a.036.036%2C0%2C0%2C0-.061.019m19.441%2C6.763a.654.654%2C0%2C1%2C0-.654.654.654.654%2C0%2C0%2C0%2C.654-.654%22%20transform%3D%22translate(0%20-8.191)%22%20fill%3D%22%23fff%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_81247%22%20data-name%3D%22%E3%83%91%E3%82%B9%2081247%22%20d%3D%22M99.047%2C270.677a.574.574%2C0%2C0%2C0-.152.061c-1.4.911-2.684%2C1.776-4.393%2C1.713A6.593%2C6.593%2C0%2C0%2C1%2C89.659%2C270a.529.529%2C0%2C0%2C1%2C.049-.738%2C8%2C8%2C0%2C0%2C1%2C4.35-2.442.831.831%2C0%2C0%2C0%2C.349-.174c.28-.236.623-.605.964-.507a6.848%2C6.848%2C0%2C0%2C1%2C2.691%2C1.769.489.489%2C0%2C0%2C0%2C.13.084%2C3.216%2C3.216%2C0%2C0%2C0%2C.738.216.457.457%2C0%2C0%2C0%2C.47-.1q1.168-.912%2C2.377-1.754a1.832%2C1.832%2C0%2C0%2C1%2C.477-.251.269.269%2C0%2C0%2C1%2C.326.147%2C1.5%2C1.5%2C0%2C0%2C1%2C.014%2C1.053%2C8.859%2C8.859%2C0%2C0%2C1-.906%2C2.046.246.246%2C0%2C0%2C0%2C0%2C.254%2C5.207%2C5.207%2C0%2C0%2C1%2C.926%2C2.429%2C1.433%2C1.433%2C0%2C0%2C1-.047.539.24.24%2C0%2C0%2C1-.218.165.937.937%2C0%2C0%2C1-.548-.142%2C25.836%2C25.836%2C0%2C0%2C1-2.627-1.9.141.141%2C0%2C0%2C0-.128-.027m-7.379-1.361a.563.563%2C0%2C1%2C0%2C.7-.35.554.554%2C0%2C0%2C0-.7.35%22%20transform%3D%22translate(-80.405%20-238.974)%22%20fill%3D%22%23fff%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E') } /* ルアー */ [data-heading-icon="lure"]{ gap: 0; } [data-heading-icon="lure"]:before{ mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%20%3Cdefs%3E%20%3CclipPath%20id%3D%22clip-path%22%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_29010%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2029010%22%20width%3D%2214.022%22%20height%3D%2240%22%20fill%3D%22%23e8f2fc%22%2F%3E%20%3C%2FclipPath%3E%20%3C%2Fdefs%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_26581%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2026581%22%20transform%3D%22translate(-82.996%20-789)%22%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_28986%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2028986%22%20width%3D%2240%22%20height%3D%2240%22%20transform%3D%22translate(82.996%20789)%22%20fill%3D%22none%22%2F%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_26674%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2026674%22%20transform%3D%22translate(95.986%20789)%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_26673%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2026673%22%20clip-path%3D%22url(%23clip-path)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_81253%22%20data-name%3D%22%E3%83%91%E3%82%B9%2081253%22%20d%3D%22M11.842%2C7.514a.029.029%2C0%2C0%2C0%2C.018.036.027.027%2C0%2C0%2C0%2C.028-.007%2C10.347%2C10.347%2C0%2C0%2C1%2C2.936-2.232%2C2.809%2C2.809%2C0%2C0%2C1%2C1.731-.471.336.336%2C0%2C0%2C1%2C.247.3%2C8.573%2C8.573%2C0%2C0%2C1-1.865%2C5.5%2C4.711%2C4.711%2C0%2C0%2C1-.709.752c-.6.521-1.087.472-2%2C.471q-1.937%2C0-3.581%2C0a1.979%2C1.979%2C0%2C0%2C1-1.591-.757A8.79%2C8.79%2C0%2C0%2C1%2C4.935%2C5.542a1.573%2C1.573%2C0%2C0%2C1%2C.159-.614.128.128%2C0%2C0%2C1%2C.086-.073%2C1.488%2C1.488%2C0%2C0%2C1%2C.95.066A9.11%2C9.11%2C0%2C0%2C1%2C9.564%2C7.309a.024.024%2C0%2C0%2C0%2C.042-.018q-.039-.818%2C0-1.724c.057-1.5.056-2.467.048-4.216a1.988%2C1.988%2C0%2C0%2C1%2C.11-.845A.9.9%2C0%2C0%2C1%2C11.326.423a1.9%2C1.9%2C0%2C0%2C1%2C.123.731q.1%2C2.038.112%2C3.631a.03.03%2C0%2C0%2C0%2C.03.029.028.028%2C0%2C0%2C0%2C.023-.013%2C2%2C2%2C0%2C0%2C1%2C.231-.318%2C11.1%2C11.1%2C0%2C0%2C1%2C2.56-2.022q.792-.428%2C1.161.315a.763.763%2C0%2C0%2C1%2C0%2C.658%2C1.251%2C1.251%2C0%2C0%2C1-.513.428%2C7.616%2C7.616%2C0%2C0%2C0-1.387%2C1.067%2C6.354%2C6.354%2C0%2C0%2C0-1.822%2C2.586%22%20transform%3D%22translate(-4.347%200)%22%20fill%3D%22%23e8f2fc%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_81254%22%20data-name%3D%22%E3%83%91%E3%82%B9%2081254%22%20d%3D%22M6.628%2C134.22q.027.1-.025%2C0a.052.052%2C0%2C0%2C0-.1.008q-.129.441-.416%2C1.318c-.14.426-.563.915-.989.371a27.641%2C27.641%2C0%2C0%2C1-4.02-6.922.484.484%2C0%2C0%2C1%2C.011-.371%2C5.4%2C5.4%2C0%2C0%2C1%2C.7-1.073%2C6.45%2C6.45%2C0%2C0%2C1%2C4.088-2.515.469.469%2C0%2C0%2C0%2C.362-.6l-.012-.037a.548.548%2C0%2C0%2C0-.625-.38%2C7.272%2C7.272%2C0%2C0%2C0-2.564.934A8.461%2C8.461%2C0%2C0%2C0%2C.7%2C127.146a.074.074%2C0%2C0%2C1-.1.018.072.072%2C0%2C0%2C1-.028-.043%2C20.514%2C20.514%2C0%2C0%2C1%2C.192-10.335%2C51.66%2C51.66%2C0%2C0%2C1%2C2.729-7.27.273.273%2C0%2C0%2C1%2C.25-.163l5.3%2C0a.388.388%2C0%2C0%2C1%2C.2.058%2C1.3%2C1.3%2C0%2C0%2C1%2C.166.31q1.407%2C3.091%2C2.411%2C6.019a.074.074%2C0%2C0%2C0%2C.094.046.078.078%2C0%2C0%2C0%2C.03-.019%2C5.866%2C5.866%2C0%2C0%2C1%2C1.353-1.12.1.1%2C0%2C0%2C1%2C.109.01%2C1.971%2C1.971%2C0%2C0%2C1%2C.516%2C1.2%2C6.816%2C6.816%2C0%2C0%2C1-.373%2C3.629q-.159.413-.522%2C1.151a.555.555%2C0%2C0%2C0-.052.173%2C21.688%2C21.688%2C0%2C0%2C0-.041%2C2.53%2C12.393%2C12.393%2C0%2C0%2C1-.221%2C2.406%2C21.124%2C21.124%2C0%2C0%2C1-2.489%2C6.57q-.851%2C1.48-2.282%2C3.649a.834.834%2C0%2C0%2C1-.333.305.386.386%2C0%2C0%2C1-.472-.112%2C1.444%2C1.444%2C0%2C0%2C1-.25-.544%2C12.956%2C12.956%2C0%2C0%2C1-.289-1.4.013.013%2C0%2C0%2C1%2C.026%2C0m-1.983-3.782c.608.94%2C1.714.448%2C1.869-.5a.912.912%2C0%2C0%2C0-.091-.651.909.909%2C0%2C0%2C0-.556-.348c-.929-.248-1.829.559-1.222%2C1.5%22%20transform%3D%22translate(0%20-96.313)%22%20fill%3D%22%23e8f2fc%22%2F%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%20%3C%2Fg%3E%3C%2Fsvg%3E') } /* コラム */ [data-heading-icon="column"]:before{ mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_26581%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2026581%22%20transform%3D%22translate(-82.994%20-789)%22%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_28986%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2028986%22%20width%3D%2240%22%20height%3D%2240%22%20transform%3D%22translate(82.994%20789)%22%20fill%3D%22none%22%2F%3E%20%3Cpath%20id%3D%22Icon_map-book-store%22%20data-name%3D%22Icon%20map-book-store%22%20d%3D%22M25.832%2C24.42V3.859A2.426%2C2.426%2C0%2C0%2C0%2C23.413%2C1.44H8.9A2.426%2C2.426%2C0%2C0%2C0%2C6.48%2C3.859v22.98A2.426%2C2.426%2C0%2C0%2C0%2C8.9%2C29.258H23.413c1.124%2C0%2C2.419%2C0%2C2.419-1.209v-.6H9.5a1.213%2C1.213%2C0%2C0%2C1-1.209-1.209V24.42H25.832ZM9.5%2C6.278a.607.607%2C0%2C0%2C1%2C.6-.6H22.2a.607.607%2C0%2C0%2C1%2C.6.6V7.487a.607.607%2C0%2C0%2C1-.6.6H10.108a.607.607%2C0%2C0%2C1-.6-.6V6.278Zm0%2C4.838a.607.607%2C0%2C0%2C1%2C.6-.6H22.2a.607.607%2C0%2C0%2C1%2C.6.6v1.209a.607.607%2C0%2C0%2C1-.6.6H10.108a.607.607%2C0%2C0%2C1-.6-.6Z%22%20transform%3D%22translate(86.839%20793.948)%22%20fill%3D%22%23fff%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E') } /* お知らせ */ [data-heading-icon="news"]:before{ mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_26581%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2026581%22%20transform%3D%22translate(-82.994%20-789)%22%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_28986%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2028986%22%20width%3D%2240%22%20height%3D%2240%22%20transform%3D%22translate(82.994%20789)%22%20fill%3D%22none%22%2F%3E%20%3Cpath%20id%3D%22Icon_awesome-newspaper%22%20data-name%3D%22Icon%20awesome-newspaper%22%20d%3D%22M30.013%2C4.5H4.785a1.3%2C1.3%2C0%2C0%2C0-1.3%2C1.3V6.24H1.3A1.3%2C1.3%2C0%2C0%2C0%2C0%2C7.545V22.334a3.045%2C3.045%2C0%2C0%2C0%2C3.045%2C3.045H28.708a2.61%2C2.61%2C0%2C0%2C0%2C2.61-2.61V5.8A1.3%2C1.3%2C0%2C0%2C0%2C30.013%2C4.5ZM3.045%2C22.769a.435.435%2C0%2C0%2C1-.435-.435V8.85h.87V22.334A.435.435%2C0%2C0%2C1%2C3.045%2C22.769Zm12.832-.87H7.612a.652.652%2C0%2C0%2C1-.652-.652v-.435a.652.652%2C0%2C0%2C1%2C.652-.652h8.265a.652.652%2C0%2C0%2C1%2C.652.652v.435A.652.652%2C0%2C0%2C1%2C15.877%2C21.9Zm11.309%2C0H18.922a.652.652%2C0%2C0%2C1-.652-.652v-.435a.652.652%2C0%2C0%2C1%2C.652-.652h8.265a.652.652%2C0%2C0%2C1%2C.652.652v.435A.652.652%2C0%2C0%2C1%2C27.186%2C21.9Zm-11.309-5.22H7.612a.652.652%2C0%2C0%2C1-.652-.652v-.435a.652.652%2C0%2C0%2C1%2C.652-.652h8.265a.652.652%2C0%2C0%2C1%2C.652.652v.435A.652.652%2C0%2C0%2C1%2C15.877%2C16.679Zm11.309%2C0H18.922a.652.652%2C0%2C0%2C1-.652-.652v-.435a.652.652%2C0%2C0%2C1%2C.652-.652h8.265a.652.652%2C0%2C0%2C1%2C.652.652v.435A.652.652%2C0%2C0%2C1%2C27.186%2C16.679Zm0-5.22H7.612a.652.652%2C0%2C0%2C1-.652-.652V8.632a.652.652%2C0%2C0%2C1%2C.652-.652H27.186a.652.652%2C0%2C0%2C1%2C.652.652v2.175A.652.652%2C0%2C0%2C1%2C27.186%2C11.46Z%22%20transform%3D%22translate(86.994%20794.5)%22%20fill%3D%22%23fff%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E') } /* 閲覧履歴 */ [data-heading-icon="history"]:before{ mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2240%22%20height%3D%2240%22%20viewBox%3D%220%200%2040%2040%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_26581%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2026581%22%20transform%3D%22translate(-83.496%20-789)%22%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_28986%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2028986%22%20width%3D%2240%22%20height%3D%2240%22%20transform%3D%22translate(83.496%20789)%22%20fill%3D%22none%22%2F%3E%20%3Cpath%20id%3D%22Icon_awesome-history%22%20data-name%3D%22Icon%20awesome-history%22%20d%3D%22M29.4%2C14.955A14.42%2C14.42%2C0%2C0%2C1%2C5.933%2C26.209a1.4%2C1.4%2C0%2C0%2C1-.107-2.07l.655-.655a1.4%2C1.4%2C0%2C0%2C1%2C1.854-.115A10.7%2C10.7%2C0%2C1%2C0%2C7.652%2C7.187L10.6%2C10.138a.93.93%2C0%2C0%2C1-.658%2C1.588H1.493a.93.93%2C0%2C0%2C1-.93-.93V2.343a.93.93%2C0%2C0%2C1%2C1.588-.658L5.021%2C4.556A14.42%2C14.42%2C0%2C0%2C1%2C29.4%2C14.955ZM18.883%2C19.536l.571-.734a1.4%2C1.4%2C0%2C0%2C0-.245-1.958L16.843%2C15V8.935a1.4%2C1.4%2C0%2C0%2C0-1.4-1.4h-.93a1.4%2C1.4%2C0%2C0%2C0-1.4%2C1.4v7.887l3.8%2C2.958a1.4%2C1.4%2C0%2C0%2C0%2C1.958-.245Z%22%20transform%3D%22translate(88.951%20794.455)%22%20fill%3D%22%23003a7a%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E') } @media screen and (min-width: 992px) { .c-heading{ gap: .8rem; } /* ルアー */ [data-heading-icon="lure"]{ gap: 0; } } /* ============================================================= Header ============================================================= */ /* 全体 ------------------------------------------------------------- */ .s-header { height: auto; /* position: sticky; */ /* ★既存のstickyをコメントアウト */ position: relative; /* ★relativeに変更 */ z-index: 1000; width: 100%; background-color: var(--color-white); /* 追従時に下が透けないよう背景色を明示 */ } @media screen and (min-width: 992px) { .s-header { /* top: calc(var(--header-height-upper) * -1); */ top: auto; /* ★リセット */ } } @media screen and (max-width: 991px) { .s-header { /* top: calc(var(--header-height-upper) * -1); */ top: auto; /* ★リセット */ /* border-bottom: 1px solid var(--color-border); */ } } /* 矢印 */ .common-icon-accordion::after { content: ""; display: block; width: 2.4rem; height: 2.4rem; flex-shrink: 0; border-radius: .4rem; background-color: var(--color-blue-primary); background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_27346%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2027346%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_28976%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2028976%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_81224%22%20data-name%3D%22%E3%83%91%E3%82%B9%2081224%22%20d%3D%22M11.2%2C6.1a.5.5%2C0%2C0%2C1-.354-.146L5.6.707.354%2C5.953a.5.5%2C0%2C0%2C1-.707%2C0%2C.5.5%2C0%2C0%2C1%2C0-.707l5.6-5.6a.5.5%2C0%2C0%2C1%2C.707%2C0l5.6%2C5.6A.5.5%2C0%2C0%2C1%2C11.2%2C6.1Z%22%20transform%3D%22translate(17.7%2015.099)%20rotate(-180)%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E'); transition: transform var(--transition-default); } .common-icon-accordion.active::after { transform: scale(1 , -1); } [data-contents-type="category"] .common-icon-accordion::after{ background-color: var(--color-white); background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_27352%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2027352%22%20transform%3D%22translate(10810%20482)%22%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_28976%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2028976%22%20width%3D%2224%22%20height%3D%2224%22%20rx%3D%224%22%20transform%3D%22translate(-10786%20-458)%20rotate(180)%22%20fill%3D%22none%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_81224%22%20data-name%3D%22%E3%83%91%E3%82%B9%2081224%22%20d%3D%22M11.2%2C6.1a.5.5%2C0%2C0%2C1-.354-.146L5.6.707.354%2C5.953a.5.5%2C0%2C0%2C1-.707%2C0%2C.5.5%2C0%2C0%2C1%2C0-.707l5.6-5.6a.5.5%2C0%2C0%2C1%2C.707%2C0l5.6%2C5.6A.5.5%2C0%2C0%2C1%2C11.2%2C6.1Z%22%20transform%3D%22translate(-10792.5%20-467.5)%20rotate(-180)%22%20fill%3D%22%230052a5%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E') } /* ------------------------------------------------------------- 【追記】ここから下に追従用のスタイルを追加 ------------------------------------------------------------- */ /* ガタツキ防止ラッパー */ .js-header-wrapper { width: 100%; } /* 追従状態のヘッダー基本スタイル */ .s-header.is-fixed { position: fixed; top: 0; left: 0; width: 100%; z-index: 9999; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1); /* border-bottom: 1px solid var(--color-border); */ /* iOS Safari用のチラつき・描画バグ防止（おまじない） */ will-change: transform; -webkit-transform: translate3d(0, 0, 0); transform: translate3d(0, 0, 0); /* 上からスライドインするアニメーション */ animation: headerSlideIn 0.3s ease forwards; } /* 追従時に非表示にする要素（要素が無くてもCSSなのでエラーになりません） */ .s-header.is-fixed .header-ticker-area, .s-header.is-fixed .header-keyword-search { display: none !important; } /* 前回の要件：追従時に「1」と「12」のバッジもピンポイントで非表示にする場合 */ /* ※Vueコンポーネント内の実際のバッジクラス名（例: .badge-1 など）に合わせて調整してください */ .s-header.is-fixed .badge-1, .s-header.is-fixed .badge-12 { display: none !important; } /* スライドインアニメーションの定義 */ @keyframes headerSlideIn { from { transform: translateY(-100%); } to { transform: translateY(0); } } .s-header-wrap { position: relative; display: block; /* height: var(--header-height-lower); */ height: auto; } @media screen and (min-width: 992px) { .s-header-wrap { /* height: var(--header-height-pc); */ padding-inline: 0; /* display: grid; grid-template-columns: 16.6rem 1fr 1fr; gap: 3rem; */ width: 100%; } .s-header.is-fixed .s-header-wrap { border-top: 3px solid var(--color-blue-light); } } @media screen and (max-width: 991px) { .s-header-wrap { /* display: flex; */ padding: 0; /* justify-content: flex-start; */ /* border-top: 1px solid var(--color-border); */ } } /* メガメニュー */ @media screen and (min-width: 992px) { .s-header-categoryNav { padding-top: 0; border-bottom: none; height: var(--header-height-category-nav); } .s-header-categoryNav:hover { border-bottom: none; } .s-header-categoryNav:hover::after{ display: none; } } .s-header-contentsNavBlock{ height: auto; } @media screen and (min-width: 992px) { .s-header-contentsNavBlock__item{ height: var(--header-height-category-nav); } } /* ハンバーガーメニュ ------------------------------------------------------------- */ html:has(.s-header-navBlok__openBtn.active) { overflow: hidden; } /* Total Nav ------------------------------------------------------------- */ /* ========================================== * 共通・ベーススタイル * ========================================== */ .header-logo img { width: 100%; } .header-total-nav__outer{ width: 100%; background-color: var(--color-white); } .header-total-nav { box-sizing: border-box; width: 100%; } /* カラーナビ内のボタン共通（a, button, p の差異を吸収） */ .button-total-nav { display: block; box-sizing: border-box; margin: 0; border: none; background: none; text-align: center; text-decoration: none; border-radius: .4rem .4rem 0 0; color: var(--color-white); font-size: 1.3rem; line-height: 1.4rem; letter-spacing: .03em; text-align: center; font-weight: var(--fw-medium); padding-block: 1rem; display: grid; place-items: center; } .button-total-nav.js-wrapper-nav-more{ padding-block: 0; } .js-button-nav-more{ padding-block: 1rem; padding-inline: 0; } a.button-total-nav[data-button-type="oficial"]{ background-color: var(--color-yellow-accent); border: 1px solid var(--color-ice-blue); color: var(--color-text-default); } a.button-total-nav[data-button-type="new-item"]{ background-color: var(--color-blue-dark); /* border: 1px solid var(--color-blue-dark); */ color: var(--color-white); } [data-button-type="shop"]{ background-color: var(--color-orange-specialty); /* border: 1px solid var(--color-orange-specialty); */ } [data-button-type="coming-soon-red"]{ background-color: var(--color-red); /* border: 1px solid var(--color-green-used); */ font-weight: var(--fw-semibold); font-family: var(--font-en); color: var(--color-white); } [data-button-type="coming-soon-green"]{ background-color: var(--color-green-used); /* border: 1px solid var(--color-red); */ font-weight: var(--fw-semibold); font-family: var(--font-en); color: var(--color-white); } .button-total-nav[data-button-type="coming-soon-red"], .button-total-nav[data-button-type="coming-soon-green"]{ color: var(--color-white); } .js-button-nav-more{ display: flex; align-items: center; justify-content: center; width: 100%; } .js-button-nav-more::after{ content: ""; width: 2rem; height: 1.4rem; background-repeat: no-repeat; background-size: contain; background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2220%22%20height%3D%2214%22%20viewBox%3D%220%200%2020%2014%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_25165%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2025165%22%20transform%3D%22translate(-318%20-1841)%22%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_27168%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2027168%22%20width%3D%2220%22%20height%3D%2214%22%20transform%3D%22translate(318%201841)%22%20fill%3D%22none%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_81137%22%20data-name%3D%22%E3%83%91%E3%82%B9%2081137%22%20d%3D%22M-6576.055%2C1853.126a.748.748%2C0%2C0%2C1-.53-.22l-4.876-4.876a.75.75%2C0%2C0%2C1%2C0-1.061.75.75%2C0%2C0%2C1%2C1.061%2C0l4.346%2C4.346%2C4.346-4.346a.75.75%2C0%2C0%2C1%2C1.061%2C0%2C.75.75%2C0%2C0%2C1%2C0%2C1.061l-4.876%2C4.876A.748.748%2C0%2C0%2C1-6576.055%2C1853.126Z%22%20transform%3D%22translate(6903.432%20-2)%22%20fill%3D%22%23fff%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E') } .js-wrapper-nav-more{ position: relative; } .js-button-nav-more{ appearance: none; background: none; border: none; color: var(--color-white); } .js-target-nav-more{ position: absolute; top: 100%; left: 0; width: 100%; border-radius: 0 0 .4rem .4rem; background-color: var(--color-orange-specialty); /* border: 1px solid var(--color-orange-specialty); */ z-index: 9999; } .js-target-nav-more__inner{ } .js-target-nav-more__inner > *{ border-top: 1px solid var(--color-white); color: var(--color-white); padding-block: 1.4rem; font-size: 1.3rem; line-height: 1; overflow: hidden; display: block; } [data-text="ja"]{ font-weight: var(--fw-medium); font-family: var(--font-ja); } [data-text="en"]{ font-weight: var(--fw-semibold); font-family: var(--font-en); } /* 右側アイコンリストの共通横並び */ .s-header-utilityList { display: flex; align-items: center; list-style: none; margin: 0; padding: 0; } .s-header-wrap__utility{ position: static; } .s-header-utilityList__item{ width: auto; font-size: 1rem; text-align: center; letter-spacing: .03em; line-height: 1; font-weight: var(--fw-semibold); color: var(--color-blue-primary); flex-shrink: 0; } .s-header-utilityList__item img{ width: 3rem; margin-inline: auto; } .s-header-utilityList__item figcaption{ margin-top: .5rem; } .s-header__cartCnt { top: 5px; right: 0; left: 2px; width: 100%; min-width: auto; height: auto; padding: 0; border-radius: unset; background: unset; font-family: var(--font-en); font-size: 1.1rem; text-align: center; line-height: 1; color: var(--color-white); font-weight: var(--fw-semibold); margin-inline: auto; } .c-freeWordSearchBox{ border-radius: .4rem; padding: 1rem; border: solid 2px var(--color-blue-light); background-color: var(--color-white); /* position: relative; */ cursor: auto; } .c-freeWordSearchBox__submit { display: block; background: transparent; border: none; padding: 0; outline: none; cursor: pointer; } .c-freeWordSearchBox__icon{ width: 2.4rem; cursor: auto; pointer-events: none; } .js-wrapper-nav-more{ } .js-button-nav-more::after{ transition: transform var(--transition-default); } .js-target-nav-more{ display: grid; grid-template-rows: 0fr; /* 初期状態は高さ0分（閉じている） */ transition: grid-template-rows var(--transition-default); overflow: hidden; /* はみ出た中身を隠す */ } .js-open-nav-more .js-button-nav-more::after{ transform: scale(1,-1); } /* Gridの中で中身を正しく消やすための必須設定 */ .js-target-nav-more__inner { min-height: 0; } /* 開いたとき */ .js-open-nav-more .js-target-nav-more { grid-template-rows: 1fr; /* 中身にぴったり合わせた高さになる */ } /* .c-freeWordSearchBox__icon{ position: absolute; top: 0; right: 0; bottom: 0; margin-block: auto; pointer-events: none; } */ /* ========================================== * 【991px以下】Grid Layout * ========================================== */ @media (max-width: 991px) { .header-total-nav { display: grid; /* 横方向：左（ハンバーガー）、中央（ロゴで広げる）、右（ユーティリティ） */ grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; /* エリアを指定して要素の順番を入れ替える */ grid-template-areas: "tab tab tab" "hamburger logo utility"; align-items: center; } /* 1段目全体に広げる */ .header-total-nav-tab { grid-area: tab; display: flex; gap: .2rem; width: 100%; } .s-header.is-fixed .header-total-nav-tab{ height: 0; overflow: hidden; border-bottom: .3rem solid var(--color-blue-light); } html:has(.p-page-productDetail) .header-total-nav-tab{ height: 0; overflow: hidden; } .button-total-nav { width: 19.2%; } [data-button-type="shop"]{ width: 21.06666%; } /* 2段目・左：ハンバーガー */ .s-header-hamburger { grid-area: hamburger; display: block; /* スマホのみ表示 */ padding: var(--gutter-sp); /* 三本線のスタイル（適宜調整してください） */ } /* 2段目・中央：ロゴ */ .s-header-navBlok__openBtn{ margin-inline-start: var(--gutter-sp); } .center-content{ grid-area: logo; justify-self: start; /* 左に寄せてハンバーガーのすぐ右隣に配置 */ } .header-logo { width: 16rem; margin-left: var(--gutter-sp); /* ハンバーガーとの間隔 */ padding-block: .7rem; } .s-header-navBlok__openBtn { width: 2.4rem; height: 2.1rem; position: relative; } .s-header-navBlok__openBtn::before, .s-header-navBlok__openBtn::after, .s-header-navBlok__openBtn > span{ width: 2.4rem; height: .3rem; border-radius: .2rem; background-color: var(--color-blue-primary); } .s-header-navBlok__openBtn::before{ top: 0; } .s-header-navBlok__openBtn > span { top: calc(50% - 0.15rem); } .s-header-navBlok__openBtn::after { bottom: 0; } .s-header-navBlok__openBtn.active::after{ bottom: 1.5px; } html:has(.s-header-navBlok__openBtn.active) .s-header-navBlok__nav { visibility: visible; transform: translate(0, 0); } .header-total-nav .s-header-freeWordSearch { display: none; } /* 2段目・右：右側アイコン群 */ .s-header-wrap__utility { grid-area: utility; margin-right: 1rem; } .s-header-utilityList { gap: 1.4rem; height: 100%; } } /* ========================================== * 【992px以上】Flexbox で横一列 * ========================================== */ @media (min-width: 992px) { .header-total-nav { display: flex; align-items: center; margin-inline: auto; padding-inline: var(--gutter-pc); max-width: 144rem; width: 100%; } /* PCではハンバーガーを隠す */ .s-header-hamburger { display: none !important; } /* ロゴ */ .center-content { flex-shrink: 0; margin: 0; } /* カラーナビ */ .header-total-nav-tab { display: flex; flex-shrink: 0; gap: .2rem; /* ボタン同士の隙間 */ margin-left: 5rem; /* ロゴとの間隔 */ padding-top: 1rem; } .button-total-nav { flex: none; padding: 1.6rem 0; width: 10rem; } .button-total-nav.button-total-nav-newitem{ width: 12rem; } [data-button-type="shop"]{ width: 12rem; } .js-button-nav-more{ padding-block: 1.6rem; } /* フリーワード検索窓を「余白に合わせて自動で引き伸ばす」 */ .s-header-freeWordSearch { display: block !important; flex-grow: 1; /* これでグーンと伸びます */ max-width: 46rem; /* 画面が広すぎるときに伸びすぎるのを防ぐストッパー */ } .sp-search-nav .s-header-freeWordSearch { display: none!important; } /* 右側アイコン群 */ .s-header-wrap__utility { flex-shrink: 0; margin-left: 3rem; } .s-header-utilityList { gap: 2rem; } .s-header-wrap__utility{ flex-direction: unset; justify-content: flex-end; } .s-header-wrap__utility{ column-gap: 4.6rem; padding-block: .5rem; } } @media (hover: hover) { .js-button-nav-more{ cursor: pointer; } } /* ジーニーサーチ　詳細検索 ------------------------------------------------------------- */ /* -- base -- */ body { --search-color-text: var(--color-text-default); --search-color-dark: var(--color-blue-primary); --search-color-dark-dark: var(--color-blue-dark); --search-color-light: var(--color-ice-blue); --search-color-border-head: var(--color-border); --search-color-border-left: var(--color-ice-blue); --search-color-bg: var(--color-white); --search-icon-accordion: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gPGcgaWQ9IuOCs+ODs+ODneODvOODjeODs+ODiF83MF8xOTAiIGRhdGEtbmFtZT0i44Kz44Oz44Od44O844ON44Oz44OIIDcwIOKAkyAxOTAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0IDI0KSByb3RhdGUoMTgwKSI+IDxyZWN0IGlkPSLplbfmlrnlvaJfMjg5NzYiIGRhdGEtbmFtZT0i6ZW35pa55b2iIDI4OTc2IiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHJ4PSI0IiBmaWxsPSIjMDA1MmE1Ii8+IDxwYXRoIGlkPSLjg5HjgrlfODEyMjQiIGRhdGEtbmFtZT0i44OR44K5IDgxMjI0IiBkPSJNMCwwLDUuNiw1LjYsMTEuMiwwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2LjUgOS41KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMSIvPiA8L2c+PC9zdmc+"); --search-icon-check: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNy44OTUiIGhlaWdodD0iMTIuMzM2IiB2aWV3Qm94PSIwIDAgMTcuODk1IDEyLjMzNiI+IDxwYXRoIGlkPSLjg5HjgrlfODExMjEiIGRhdGEtbmFtZT0i44OR44K5IDgxMTIxIiBkPSJNMTUwNC4xNzIsMTYxMS4zMzFsNC4zNjIsNC44Nyw3Ljg4MS03LjUwOCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE1MDEuMzQ4IC0xNjA1Ljg2NSkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwNTJhNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjQiLz48L3N2Zz4="); --search-icon-arrow: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij4gPGcgaWQ9IuOCsOODq+ODvOODl18yNjA4NyIgZGF0YS1uYW1lPSLjgrDjg6vjg7zjg5cgMjYwODciIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI2ODMgLTE1Nikgcm90YXRlKDkwKSI+IDxwYXRoIGlkPSLjg5HjgrlfODExNDUiIGRhdGEtbmFtZT0i44OR44K5IDgxMTQ1IiBkPSJNMCwwSDE4VjE4SDBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNzQgMjY2NSkgcm90YXRlKDkwKSIgZmlsbD0iI2ZmZiIvPiA8cGF0aCBpZD0i44OR44K5XzgxMTM5IiBkYXRhLW5hbWU9IuODkeOCuSA4MTEzOSIgZD0iTS03MTA2LjAwOSw3MTYuNzEzLTcxMDEuMyw3MTJsNC43MTMsNC43MTMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg3OS4yMTMgOTc3NS41MDkpIHJvdGF0ZSg5MCkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzAwNTJhNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz4gPC9nPjwvc3ZnPg=="); } body[data-brand="003"] { --search-color-text: var(--color-primary-gold); --search-color-dark: var(--color-primary-gold); --search-color-dark-dark: var(--color-main); --search-color-light: var(--color-primary-gold); --search-color-border-head: var(--color-primary-gold); --search-color-border-left: var(--color-white); --search-color-bg: var(--color-main); --search-icon-accordion: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gPGcgaWQ9IuOCs+ODs+ODneODvOODjeODs+ODiF83MF8xOTAiIGRhdGEtbmFtZT0i44Kz44Oz44Od44O844ON44Oz44OIIDcwIOKAkyAxOTAiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0IDI0KSByb3RhdGUoMTgwKSI+IDxyZWN0IGlkPSLplbfmlrnlvaJfMjg5NzYiIGRhdGEtbmFtZT0i6ZW35pa55b2iIDI4OTc2IiB3aWR0aD0iMjQiIGhlaWdodD0iMjQiIHJ4PSI0IiBmaWxsPSIjZDRhZjM3Ii8+IDxwYXRoIGlkPSLjg5HjgrlfODEyMjQiIGRhdGEtbmFtZT0i44OR44K5IDgxMjI0IiBkPSJNMCwwLDUuNiw1LjYsMTEuMiwwIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2LjUgOS41KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMSIvPiA8L2c+PC9zdmc+"); --search-icon-check: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNy44OTUiIGhlaWdodD0iMTIuMzM2IiB2aWV3Qm94PSIwIDAgMTcuODk1IDEyLjMzNiI+IDxwYXRoIGlkPSLjg5HjgrlfODExMjEiIGRhdGEtbmFtZT0i44OR44K5IDgxMTIxIiBkPSJNMTUwNC4xNzIsMTYxMS4zMzFsNC4zNjIsNC44Nyw3Ljg4MS03LjUwOCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTE1MDEuMzQ4IC0xNjA1Ljg2NSkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2Q0YWYzNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjQiLz48L3N2Zz4="); --search-icon-arrow: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij4gPGcgaWQ9IuOCsOODq+ODvOODl18yNjA4NyIgZGF0YS1uYW1lPSLjgrDjg6vjg7zjg5cgMjYwODciIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI2ODMgLTE1Nikgcm90YXRlKDkwKSI+IDxwYXRoIGlkPSLjg5HjgrlfODExNDUiIGRhdGEtbmFtZT0i44OR44K5IDgxMTQ1IiBkPSJNMCwwSDE4VjE4SDBaIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxNzQgMjY2NSkgcm90YXRlKDkwKSIgZmlsbD0ibm9uZSIvPiA8cGF0aCBpZD0i44OR44K5XzgxMTM5IiBkYXRhLW5hbWU9IuODkeOCuSA4MTEzOSIgZD0iTS03MTA2LjAwOSw3MTYuNzEzLTcxMDEuMyw3MTJsNC43MTMsNC43MTMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDg3OS4yMTMgOTc3NS41MDkpIHJvdGF0ZSg5MCkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2Q0YWYzNyIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz4gPC9nPjwvc3ZnPg=="); } html:has(.s-headerModalBox.active), body:has(.s-headerModalBox.active) { overflow: hidden; height: 100%; } .s-headerModalBox__outer { width: 100%; height: 100%; overflow: hidden; position: absolute; max-width: 80rem; background: var(--search-color-bg); } .s-headerModalBoxHeding { background: var(--color-yellow-accent); padding: 1.6rem 1rem 1.8rem; } [data-brand="003"] .s-headerModalBoxHeding { background: linear-gradient(#f7d97a 0%, #d4af37 50.25%, #b8860b 100%); color: var(--color-primary); } .s-headerModalBox__inner { position: absolute; top: 6rem; bottom: 0; left: 0; width: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; box-sizing: border-box; } .s-headerModalBoxHeding__closeBtn { right: revert; left: 0; font-weight: var(--fw-semibold); font-size: 1.5rem; letter-spacing: 0.03em; color: var(--color-text-default); } .s-headerModalBoxHeding__closeBtn::before { content: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxOCIgaGVpZ2h0PSIxOCIgdmlld0JveD0iMCAwIDE4IDE4Ij4gPGcgaWQ9IuOCsOODq+ODvOODl18yNTYxMiIgZGF0YS1uYW1lPSLjgrDjg6vjg7zjg5cgMjU2MTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDE4KSI+IDxwYXRoIGlkPSLjg5HjgrlfODExNDUiIGRhdGEtbmFtZT0i44OR44K5IDgxMTQ1IiBkPSJNMCwxOEgxOFYwSDBaIiB0cmFuc2Zvcm09InJvdGF0ZSg5MCkiIGZpbGw9Im5vbmUiLz4gPHBhdGggaWQ9IuODkeOCuV84MTEzOSIgZGF0YS1uYW1lPSLjg5HjgrkgODExMzkiIGQ9Ik0wLDAsNC4xOTMsNC4xOTMsOC4zODcsMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoLTYuNSA0LjUpIHJvdGF0ZSg5MCkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzFlMmEzNiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBzdHJva2Utd2lkdGg9IjIiLz4gPC9nPjwvc3ZnPg=="); display: block; margin-right: 0.4em; padding-top: 0.1rem; font-size: 1.4rem; transform: revert; } .s-headerModalBoxHeding__title { font-weight: var(--fw-semibold); font-size: 1.8rem; letter-spacing: 0.03em; text-align: center; } .s-headerRefinedSearchBox { padding: 0rem 1rem 6rem; } .s-headerModalBoxFooterBtn { flex-direction: revert; gap: 1rem; padding: 0.8rem 1.3rem; position: absolute; bottom: 0; height: 6rem; background-color: var(--color-white); background-color: rgba(255, 255, 255, 0.8); z-index: 2; } [data-brand="003"] .s-headerModalBoxFooterBtn { background-color: rgba(0, 0, 0, 0.8); } .s-headerModalBoxFooterBtn .c-btn { font-weight: var(--fw-semibold); font-size: 1.6rem; height: 4.4rem; padding: 0; display: grid; align-items: center; background-color: var(--search-color-dark); border: 1px solid var(--search-color-dark); } .s-headerModalBoxFooterBtn__clear { margin-top: 0; order: revert; } .s-headerModalBoxFooterBtn__clear .c-btn.c-btn--white { border: 2px solid var(--search-color-dark); color: var(--search-color-dark) !important; background-color: var(--search-color-bg); } .s-headerModalBoxFooterBtn__next { order: revert; } @media (max-width: 767px) { .s-headerModalBox { padding-top: 0; width: 100%; height: 100%; } } @media (min-width: 768px) { .s-headerModalBox__outer { max-height: 60rem; left: 50%; transform: translateX(-50%); } .s-headerModalBox__inner { max-height: none; } .s-headerRefinedSearchBox { padding: 3rem 6rem; } .s-headerModalBoxFooterBtn { padding-inline: calc((100% - 36rem) / 2); } .s-headerModalBoxFooterBtn__clear { margin-right: 0; } } /* -- body -- */ .p-productListWrap__sideNav-title { font-weight: 600; font-size: 2rem; letter-spacing: 0.03em; padding-bottom: 1rem; border-bottom: 3px solid var(--search-color-light); margin-bottom: 2rem; color: var(--search-color-text); } .s-headerRefinedSearchBox-item, .m-productNavTitleList { margin-top: 2rem; padding-bottom: 2rem; border-bottom: 2px solid var(--search-color-light); } /*.s-headerRefinedSearchBox > .s-headerRefinedSearchBox-item:last-child, .m-genieeFilterPanel__body > .m-productNavTitleList:last-of-type { border-bottom: none; }*/ .s-headerRefinedSearchBox-item__title, .m-productNavTitleList__title { padding-left: 0; margin-bottom: 1rem; font-weight: 600; font-size: 1.6rem; letter-spacing: 0.03em; } .m-productNavTitleList__title.js-secondary-accordion__trigger:not(.active) { margin-bottom: 0; } .m-productNavTitleList__title.js-secondary-accordion__trigger { position: relative; } .m-productNavTitleList__title.js-secondary-accordion__trigger::after { content: ''; display: block; width: 2.4rem; height: 2.4rem; position: absolute; top: 50%; right: 0; background-image: var(--search-icon-accordion); background-size: contain; background-repeat: no-repeat; background-position: center; transform: translateY(-50%) rotate(180deg); transform-origin: center center; } .m-productNavTitleList__title.js-secondary-accordion__trigger.active::after { transform: translateY(-50%) rotate(0deg); } /*.s-headerRefinedSearchBox-item__input #searchWord, .m-makerFilter__searchInput { border-radius: .4rem; padding: 1rem; border: solid 2px var(--color-blue-light); background-color: var(--color-white); position: relative; cursor: auto; }*/ .m-makerFilter__groupTitle { font-weight: var(--fw-semibold); font-size: 1.4rem; letter-spacing: 0.03em; line-height: 1.714; margin-block: 1rem; padding: 0.5rem 1rem; background-color: var(--color-bg); } [data-brand="003"] .m-makerFilter__groupTitle { border: 1px solid var(--color-primary-gold); color: var(--color-primary-gold); background-color: revert; } @media (min-width: 768px) { .s-headerModalBox__outer .m-productNavList-checkList.m-productNavList-geniee.m-makerFilter__list { display: grid; grid-template-columns: 1fr 1fr; } } .js-secondary-accordion__target .m-makerFilter__search { margin-top: 1rem; margin-bottom: 2rem; } .s-headerRefinedSearchBox-item__checkList { padding: 0; border: 0; } /* -- price --*/ .m-productNavPriceRange { display: flex; align-items: center; padding-inline: 0; max-width: fit-content; } .m-productNavPriceRange__field { display: flex; align-items: center; padding-inline: 0; border: 0; } .m-productNavPriceRange__unit { color: var(--color-gray-dark); font-size: 1.2rem; font-weight: 600; font-size: 1.6rem; letter-spacing: 0.03em; margin-left: 1rem; } .m-productNavPriceRange__tilde { font-size: 1.5rem; letter-spacing: 0.03em; margin-inline: 1rem; } .p-productListWrap .m-productNavPriceRange__unit { margin-left: 0.2rem; } .p-productListWrap .m-productNavPriceRange__tilde { margin-inline: 0.2rem 0.2rem; } /* -- category --*/ .m-productNavList-checkList__item__label { font-size: 1.4rem; letter-spacing: 0.03em; line-height: 1.714; padding: 0.5rem; gap: 0 1rem; } .p-advanced-search .m-productNavList-hasChildeCategories__title { position: relative; padding: 0rem 3rem 0rem 0rem; cursor: pointer; font-family: "Noto Sans JP"; font-size: 1.4rem; letter-spacing: 0.03em; line-height: 1.714; } [data-brand="003"] .m-genieeFilter .m-productNavList-hasChildeCategories__toggle::after { content: "＋"; color: var(--color-primary-gold); } [data-brand="003"] .m-productNavList-hasChildeCategories.open > .m-productNavList-hasChildeCategories__title { background-color: color-mix(in srgb, var(--color-gray-light) 20%, transparent) } .p-advanced-search .m-productNavList-radioList__item__label, .p-advanced-search .m-productNavList-checkList__item__label { display: flex; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 0 1rem; padding-block: 0.5rem; cursor: pointer; } .p-advanced-search .m-productNavList-hasChildeCategories__title::after { content: ""; } .p-advanced-search .m-productNavList-hasChildeCategories.open > .m-productNavList-hasChildeCategories__title::after { content: ""; } .m-productNavList-hasChildeCategories .m-productNavList-hasChildeCategories > .m-productNavList-hasChildeCategories__title { padding-left: 1.8rem; } /* -- parts -- */ .p-advanced-search input[type="checkbox"] { width: 3rem; height: 3rem; border-radius: 4px; background: #fff; border: 2px solid #e0e0e0; background-image: none; transition: none; flex-shrink: 0; } .p-advanced-search input[type="checkbox"]:checked { background-color: none; border-color: #e0e0e0; background-image: var(--search-icon-check); background-repeat: no-repeat; background-position: center center; background-size: 1.8rem 1.2rem; } .p-advanced-search input[type="radio"] { width: 3rem; height: 3rem; border: 2px solid #e0e0e0; flex-shrink: 0; } .p-advanced-search input[type="radio"]:checked::after { width: 1.4rem; height: 1.4rem; background-color: var(--search-color-dark); } .p-advanced-search input[type="radio"]:checked { border: 2px solid #e0e0e0; } .p-advanced-search select, .p-advanced-search input[type="text"], .p-advanced-search input[type="number"] { height: 4.8rem; border-radius: 4px; border: 1px solid #d8d8d8; background: var(--color-white); -moz-appearance: textfield; font-weight: var(--fw-regular); font-size: 1.6rem; letter-spacing: 0.03em; } .p-advanced-search select { padding-inline: 1rem; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDIwIDIwIj4gPGcgaWQ9IuOCsOODq+ODvOODl18yNzMyNyIgZGF0YS1uYW1lPSLjgrDjg6vjg7zjg5cgMjczMjciIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0zMTggLTE4NDEpIj4gPHJlY3QgaWQ9IumVt+aWueW9ol8yNzE2OCIgZGF0YS1uYW1lPSLplbfmlrnlvaIgMjcxNjgiIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoMzE4IDE4NDEpIiBmaWxsPSIjZmZmIi8+IDxwYXRoIGlkPSLjg5HjgrlfODExMzciIGRhdGEtbmFtZT0i44OR44K5IDgxMTM3IiBkPSJNLTY1ODAuOTMyLDE4NDcuNWw0Ljg3Niw0Ljg3Niw0Ljg3Ni00Ljg3NiIgdHJhbnNmb3JtPSJ0cmFuc2xhdGUoNjkwMy40MzIgMSkiIGZpbGw9Im5vbmUiIHN0cm9rZT0iIzFlMmEzNiIgc3Ryb2tlLXdpZHRoPSIxIi8+IDwvZz48L3N2Zz4="); background-repeat: no-repeat; background-position: right 1rem center; background-size: 2rempx 2rem; cursor: pointer; } .m-genieeCategorySelect__branch { background-color: currentColor; -webkit-mask-image: url('data:image/svg+xml;charset=UTF-8,'); mask-image: url('data:image/svg+xml;charset=UTF-8,'); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } [data-brand="003"] .m-genieeCategorySelect__branch { color: #fff; } .p-advanced-search .m-productNavPriceRange__field select { width: 14rem; } .p-productListWrap__sideNav .m-productNavPriceRange__field select { width: 10rem; padding-inline: 0.6rem 2.6rem; background-position: right 0.4rem center; font-size: 1.2rem; } .p-productListWrap__sideNav .m-productNavPriceRange { justify-content: space-between; } .p-advanced-search input[type="number"]::-webkit-outer-spin-button, .p-advanced-search input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .m-makerFilter__more-wrapper { position: relative; width: 100%; padding-bottom: 5rem; } .m-makerFilter__more-check { display: none; } .m-makerFilter__more-content { overflow: hidden; transition: max-height 0.3s ease; } .m-makerFilter__more-check:not(:checked) ~ .m-makerFilter__more-content { max-height: 59.2rem; } .m-makerFilter__more-check:not(:checked) ~ .m-makerFilter__more-content::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 10rem; background: linear-gradient(rgba(255, 255, 255, 0) 0%, #fff 100%); pointer-events: none; } [data-brand="003"] .m-makerFilter__more-check:not(:checked) ~ .m-makerFilter__more-content::after { background: linear-gradient(rgba(10, 10, 8, 0) 0%, #0a0a08 100%); } .m-makerFilter__more-btn { position: absolute; bottom: 0rem; left: 50%; transform: translateX(-50%); width: fit-content; } .m-makerFilter__more-btn .c-btn { font-weight: var(--fw-semibold); font-size: 1.6rem; width: 18.6rem; height: 4.4rem; display: grid; align-items: center; border: 2px solid var(--search-color-dark); color: var(--search-color-dark) !important; background-color: var(--search-color-bg); display: flex; justify-content: center; gap: 0.6rem; } .m-makerFilter__more-btn .c-btn::after { content: var(--search-icon-arrow); } .m-makerFilter__more-check:checked ~ .m-makerFilter__more-content { max-height: 9999px; } .m-makerFilter__more-check:checked ~ .m-makerFilter__more-btn { display: none; } /* -- sideStock_sideNavi -- */ .m-productNavList-radioList:has([name="sideStock_searchBox"]), .m-productNavList-radioList:has([name="sideStock_sideNavi"]) { display: flex; align-items: center; padding: 0; box-sizing: border-box; list-style: none; margin: 0; position: relative; } .m-productNavList-radioList:has([name="sideStock_searchBox"]) li, .m-productNavList-radioList:has([name="sideStock_sideNavi"]) li { display: block; } .m-productNavList-radioList:has([name="sideStock_searchBox"]) li:first-child, .m-productNavList-radioList:has([name="sideStock_sideNavi"]) li:first-child, .m-productNavList-radioList:has([name="sideStock_searchBox"]) li:last-child, .m-productNavList-radioList:has([name="sideStock_sideNavi"]) li:last-child { position: relative; } .m-productNavList-radioList:has([name="sideStock_searchBox"]) li:last-child, .m-productNavList-radioList:has([name="sideStock_sideNavi"]) li:last-child { position: absolute; top: 0; left: 0; width: 100%; height: 100%; } .m-productNavList-radioList:has([name="sideStock_searchBox"]) li:first-child, .m-productNavList-radioList:has([name="sideStock_sideNavi"]) li:first-child { z-index: 2; } .m-productNavList-radioList:has(input[name="sideStock_searchBox"][value="1"]:checked) li:last-child, .m-productNavList-radioList:has(input[name="sideStock_sideNavi"][value="1"]:checked) li:last-child { z-index: 3; } .m-productNavList-radioList:has([name="sideStock_searchBox"]) label, .m-productNavList-radioList:has([name="sideStock_sideNavi"]) label { display: inline-flex; align-items: center; position: relative; gap: 0.8rem; cursor: pointer; width: 100%; height: 100%; } .m-productNavList-radioList:has([name="sideStock_searchBox"]) li:last-child span, .m-productNavList-radioList:has([name="sideStock_sideNavi"]) li:last-child span { opacity: 0; pointer-events: none; } input[name="sideStock_searchBox"], input[name="sideStock_sideNavi"] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; } .m-productNavList-radioList:has([name="sideStock_searchBox"]) li:first-child label::before, .m-productNavList-radioList:has([name="sideStock_sideNavi"]) li:first-child label::before { content: ""; display: block; width: 5.4rem; height: 3rem; background-color: #BCBCBC; border-radius: 999px; transition: background-color 0.3s; flex-shrink: 0; } .m-productNavList-radioList:has(input[name="sideStock_searchBox"][value="1"]:checked) li:first-child label::before, .m-productNavList-radioList:has(input[name="sideStock_sideNavi"][value="1"]:checked) li:first-child label::before { background-color: var(--search-color-dark); } .m-productNavList-radioList:has([name="sideStock_searchBox"]) li:first-child label::after, .m-productNavList-radioList:has([name="sideStock_sideNavi"]) li:first-child label::after { content: ""; position: absolute; left: 0.2rem; width: 2.6rem; height: 2.6rem; background-color: #ffffff; border-radius: 50%; transition: transform 0.3s; pointer-events: none; } .m-productNavList-radioList:has(input[name="sideStock_searchBox"][value="1"]:checked) li:first-child label::after, .m-productNavList-radioList:has(input[name="sideStock_sideNavi"][value="1"]:checked) li:first-child label::after { transform: translateX(2.4rem); } /*-- sideImmediateShip_sideNavi --*/ .m-productNavList-checkList:has([name="sideImmediateShip_searchBox"]), .m-productNavList-checkList:has([name="sideImmediateShip_sideNavi"]) { display: flex; align-items: center; padding: 0; box-sizing: border-box; list-style: none; margin: 0; } .m-productNavList-checkList:has([name="sideImmediateShip_searchBox"]) li, .m-productNavList-checkList:has([name="sideImmediateShip_sideNavi"]) li { display: block; } .m-productNavList-checkList:has([name="sideImmediateShip_searchBox"]) label, .m-productNavList-checkList:has([name="sideImmediateShip_sideNavi"]) label { display: inline-flex; align-items: center; position: relative; gap: 0.8rem; cursor: pointer; } input[name="sideImmediateShip_searchBox"], input[name="sideImmediateShip_sideNavi"] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; } .m-productNavList-checkList:has([name="sideImmediateShip_searchBox"]) label::before, .m-productNavList-checkList:has([name="sideImmediateShip_sideNavi"]) label::before { content: ""; display: block; width: 5.4rem; height: 3rem; background-color: #BCBCBC; border-radius: 999px; transition: background-color 0.3s; flex-shrink: 0; } .m-productNavList-checkList:has(input[name="sideImmediateShip_searchBox"]:checked) label::before, .m-productNavList-checkList:has(input[name="sideImmediateShip_sideNavi"]:checked) label::before { background-color: var(--search-color-dark); } .m-productNavList-checkList:has([name="sideImmediateShip_searchBox"]) label::after, .m-productNavList-checkList:has([name="sideImmediateShip_sideNavi"]) label::after { content: ""; position: absolute; top: 0.7rem; left: 0.2rem; width: 2.6rem; height: 2.6rem; background-color: #ffffff; border-radius: 50%; transition: transform 0.3s; pointer-events: none; } .m-productNavList-checkList:has(input[name="sideImmediateShip_searchBox"]:checked) label::after, .m-productNavList-checkList:has(input[name="sideImmediateShip_sideNavi"]:checked) label::after { transform: translateX(2.4rem); } /*-- sideStock_sideNavi（在庫あり。sideImmediateShipと同一のトグルスイッチ表示。緊急対応 2026-09-02） --*/ .m-productNavList-checkList:has([name="sideStock_searchBox"]), .m-productNavList-checkList:has([name="sideStock_sideNavi"]) { display: flex; align-items: center; padding: 0; box-sizing: border-box; list-style: none; margin: 0; } .m-productNavList-checkList:has([name="sideStock_searchBox"]) li, .m-productNavList-checkList:has([name="sideStock_sideNavi"]) li { display: block; } .m-productNavList-checkList:has([name="sideStock_searchBox"]) label, .m-productNavList-checkList:has([name="sideStock_sideNavi"]) label { display: inline-flex; align-items: center; position: relative; gap: 0.8rem; cursor: pointer; } input[name="sideStock_searchBox"], input[name="sideStock_sideNavi"] { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; } .m-productNavList-checkList:has([name="sideStock_searchBox"]) label::before, .m-productNavList-checkList:has([name="sideStock_sideNavi"]) label::before { content: ""; display: block; width: 5.4rem; height: 3rem; background-color: #BCBCBC; border-radius: 999px; transition: background-color 0.3s; flex-shrink: 0; } .m-productNavList-checkList:has(input[name="sideStock_searchBox"]:checked) label::before, .m-productNavList-checkList:has(input[name="sideStock_sideNavi"]:checked) label::before { background-color: var(--search-color-dark); } .m-productNavList-checkList:has([name="sideStock_searchBox"]) label::after, .m-productNavList-checkList:has([name="sideStock_sideNavi"]) label::after { content: ""; position: absolute; top: 0.7rem; left: 0.2rem; width: 2.6rem; height: 2.6rem; background-color: #ffffff; border-radius: 50%; transition: transform 0.3s; pointer-events: none; } .m-productNavList-checkList:has(input[name="sideStock_searchBox"]:checked) label::after, .m-productNavList-checkList:has(input[name="sideStock_sideNavi"]:checked) label::after { transform: translateX(2.4rem); } /* ジーニーサーチ　サジェスト ------------------------------------------------------------- */ .s-header-freeWordSearch [name="global_freeWordSearch"] { position: relative; } /*.s-header-freeWordSearch .div.poplink.sphs > div.poplink_search { border: 10px solid var(--search-color-border-head); border-top: 0; } .s-header-freeWordSearch .div.poplink.sphs > div.poplink_search > div.item { border: none; width: 100%; border-top: 1px solid var(--search-color-border-head); }*/ .s-header-freeWordSearch div.poplink.pc022 { width: 100%; top: calc(100% + 0.6rem); left: 0 !important; border: 10px solid var(--search-color-border-head); border-top: none; } .s-header-freeWordSearch div.poplink > div.poplink_suggest { border: none; color: var(--color-text-default); background-color: #fff; } .s-header-freeWordSearch div.poplink.pc022 > div.poplink_suggest { width: 100%; float: none; } .s-header-freeWordSearch div.poplink > div.poplink_suggest > div.word { padding: 1rem; border-bottom: 1px solid var(--search-color-border-head); } .s-header-freeWordSearch div.poplink > div.poplink_suggest > div.word:hover { background-color: var(--search-color-border-head); } .s-header-freeWordSearch div.poplink div.highlighted { color: var(--color-text-default); background-color: var(--search-color-border-head); } .s-header-freeWordSearch div.poplink.pc022 > div.poplink_search, .s-header-freeWordSearch div.poplink.pc022 > div.poplink_recommend { width: 100%; float: none; margin-left: 0; border: none; color: var(--color-text-default); } .s-header-freeWordSearch div.poplink > div.poplink_search > div.header, .s-header-freeWordSearch div.poplink > div.poplink_recommend > div.header { font-weight: 600; font-size: 1.6rem; letter-spacing: 0.03em; color: var(--color-text-default); background-color: var(--color-white); padding: 1.4rem 1rem 1rem; border-bottom: 1px solid var(--search-color-border-head); } .s-header-freeWordSearch div.poplink > div.poplink_search > div.item, .s-header-freeWordSearch div.poplink > div.poplink_recommend > div.item { padding: 0.8rem 1rem; border-bottom: 1px solid var(--search-color-border-head); } .s-header-freeWordSearch div.poplink > div.poplink_search > div.item:hover, .s-header-freeWordSearch div.poplink > div.poplink_recommend > div.item:hover { background-color: var(--search-color-border-head); } .s-header-freeWordSearch div.poplink > div.poplink_search > div.item a, .s-header-freeWordSearch div.poplink > div.poplink_recommend > div.item a { color: var(--color-text-default); display: flex; align-items: center; gap: 1rem; } .s-header-freeWordSearch div.poplink > div.poplink_search > div.item a > div.item_left > div.image_box, .s-header-freeWordSearch div.poplink > div.poplink_recommend > div.item a > div.item_left > div.image_box { width: 6rem; height: 6rem; } .s-header-freeWordSearch div.poplink > div.poplink_search > div.item a > div.item_right, .s-header-freeWordSearch div.poplink > div.poplink_recommend > div.item a > div.item_right { margin-left: 0; width: calc(100% - 8rem); } .s-header-freeWordSearch div.poplink > div.poplink_search > div.item a > div.item_right > div.title, .s-header-freeWordSearch div.poplink > div.poplink_recommend > div.item a > div.item_right > div.title, .s-header-freeWordSearch div.poplink > div.poplink_search > div.item a > div.item_right > div.summary, .s-header-freeWordSearch div.poplink > div.poplink_recommend > div.item a > div.item_right > div.summary { font-weight: normal; font-size: 1.3rem; letter-spacing: 0.03em; color: #1c1c1c; } .s-header-freeWordSearch div.poplink > div.poplink_search > div.item a > div.item_right > div.any1, .s-header-freeWordSearch div.poplink > div.poplink_recommend > div.item a > div.item_right > div.any1 { font-family: var(--font-barlow-condensed),var(--font-noto-sans),sans-serif; font-weight: var(--fw-semibold); font-size: 2rem; letter-spacing: 0.03em; color: var(--color-red); } .s-header-freeWordSearch .poplink_invisible { display: none; } /* ジーニーサーチ　ワードリスト ------------------------------------------------------------- */ .header-keyword-search { background-color: var(--color-blue-dark); height: var(--height-keyword-area); width: 100%; /* 画面全体（100%）に背景色を敷く */ box-sizing: border-box; display: flex; align-items: center; } .p-relatedKeywords__item { font-weight: var(--fw-semibold); font-size: 1.2rem; letter-spacing: 0.03em; text-align: center; color: var(--search-color-dark); border-radius: 0.4rem; background: #fff; padding: 0.7rem 2rem; flex-shrink: 0; cursor: pointer; box-sizing: border-box; box-shadow: inset 0 0 0 1px var(--search-color-dark); } @media (max-width: 992px) { .p-relatedKeywords__slider { width: 100%; opacity: 1; } .p-relatedKeywords__list { display: flex; align-items: center; flex-wrap: nowrap; overflow-x: auto; padding: 0.8rem 1rem; gap: 0.6rem; scroll-padding-inline: 1rem; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .p-relatedKeywords__item { width: auto; } .swiper-keyword-search-prev, .swiper-keyword-search-next { display: none !important; } } @media (min-width: 993px) { .p-relatedKeywords__slider { margin-inline: auto; padding-inline: var(--gutter-pc); width: var(--container-default); position: relative; padding-left: 4rem; padding-right: 4rem; box-sizing: border-box; } .p-relatedKeywords__list.swiper-wrapper { display: flex; align-items: center; overflow-x: visible; padding: 0.8rem 0; } .p-relatedKeywords__item.swiper-slide { width: auto !important; } .swiper-keyword-search-prev, .swiper-keyword-search-next { width: 5rem; height: 100%; top: 0; margin-top: 0; } .swiper-keyword-search-prev { left: 0; background: linear-gradient(to left, rgba(0, 58, 122, 0) 0%, var(--search-color-dark-dark) 100%); } .swiper-keyword-search-next { right: 0; background: linear-gradient(to right, rgba(0, 58, 122, 0) 0%, var(--search-color-dark-dark) 100%); } .swiper-keyword-search-prev .swiper-button-disabled. .swiper-keyword-search-next .swiper-button-disabled { display: none; } .swiper-keyword-search-prev::after { content: ''; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gPGcgaWQ9IuOCs+ODs+ODneODvOODjeODs+ODiF83MF8xMTQiIGRhdGEtbmFtZT0i44Kz44Oz44Od44O844ON44Oz44OIIDcwIOKAkyAxMTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgMjQpIHJvdGF0ZSgyNzApIj4gPHJlY3QgaWQ9IumVt+aWueW9ol8yODk3NiIgZGF0YS1uYW1lPSLplbfmlrnlvaIgMjg5NzYiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgcng9IjQiIGZpbGw9Im5vbmUiLz4gPHBhdGggaWQ9IuODkeOCuV84MTIyNCIgZGF0YS1uYW1lPSLjg5HjgrkgODEyMjQiIGQ9Ik0wLDUuNiw1LjYsMGw1LjYsNS42IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2LjUgOS41KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIvPiA8L2c+PC9zdmc+"); width: 2.4rem; height: 2.4rem; } .swiper-keyword-search-next::after { content: ''; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0Ij4gPGcgaWQ9IuOCs+ODs+ODneODvOODjeODs+ODiF83MF8xMTQiIGRhdGEtbmFtZT0i44Kz44Oz44Od44O844ON44Oz44OIIDcwIOKAkyAxMTQiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDI0KSByb3RhdGUoOTApIj4gPHJlY3QgaWQ9IumVt+aWueW9ol8yODk3NiIgZGF0YS1uYW1lPSLplbfmlrnlvaIgMjg5NzYiIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgcng9IjQiIGZpbGw9Im5vbmUiLz4gPHBhdGggaWQ9IuODkeOCuV84MTIyNCIgZGF0YS1uYW1lPSLjg5HjgrkgODEyMjQiIGQ9Ik0wLDUuNiw1LjYsMGw1LjYsNS42IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSg2LjUgOS41KSIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjZmZmIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIHN0cm9rZS13aWR0aD0iMiIvPiA8L2c+PC9zdmc+"); width: 2.4rem; height: 2.4rem; } } /* カテゴリーナビ ------------------------------------------------------------- */ .s-header-content-list{ padding-inline: var(--gutter-sp); margin-inline: auto; } button.modal-search{ appearance: none; border: none; background: none; border: none; padding: 0; margin: 0; } @media (min-width: 992px) { .s-header-contentsNavBlock{ justify-content: center; gap: 8rem; background-color: var(--color-ice-blue); } .s-header-content-list{ width: 114rem; max-height: 42rem; overflow-y: auto; } .s-header-categoryNav__body { top: 100%; padding-block: 3rem; padding-inline: 0; z-index: 100; } [data-contents-type="category"] .s-header-categoryNav__body { background-color: var(--color-blue-primary); } [data-contents-type="manufacturer"] .s-header-categoryNav__body { background-color: var(--color-bg); } .s-header-categoryNav__head{ font-size: 1.4rem; font-weight: var(--fw-semibold); letter-spacing: .03em; line-height: 1; } .s-header-categoryNav__head::after{ width: 1.4rem; height: 1.4rem; background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88_20_132%22%20data-name%3D%22%E3%82%B3%E3%83%B3%E3%83%9D%E3%83%BC%E3%83%8D%E3%83%B3%E3%83%88%2020%20%E2%80%93%20132%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2214%22%20height%3D%2214%22%20viewBox%3D%220%200%2014%2014%22%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_27177%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2027177%22%20width%3D%2214%22%20height%3D%2214%22%20fill%3D%22none%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_81139%22%20data-name%3D%22%E3%83%91%E3%82%B9%2081139%22%20d%3D%22M-7100.41%2C718.1a.5.5%2C0%2C0%2C1-.354-.146l-5.6-5.6a.5.5%2C0%2C0%2C1%2C0-.707.5.5%2C0%2C0%2C1%2C.707%2C0l5.246%2C5.246%2C5.246-5.246a.5.5%2C0%2C0%2C1%2C.707%2C0%2C.5.5%2C0%2C0%2C1%2C0%2C.707l-5.6%2C5.6A.5.5%2C0%2C0%2C1-7100.41%2C718.1Z%22%20transform%3D%22translate(7107.41%20-707.8)%22%20fill%3D%22%231e2a36%22%2F%3E%3C%2Fsvg%3E') } [data-rect-type="right"]:after{ transform: rotate(-90deg); } } @media screen and (max-width: 991px) { .s-header-wrap__nav { position: static; order: 3; margin-inline: 0; width: 6.5rem; /* height: var(--header-height-lower); */ height: 0; } .s-header-navBlok__nav { position: absolute; padding: 2rem 0; top: calc(100% - var(--height-keyword-area)); /* height: calc(100vh - var(--height-keyword-area) ); */ } .s-header-navBlok__nav.active { visibility: visible; transform: translate(0, 0); } .s-header.is-fixed .s-header-navBlok__nav{ top: 100%; /* height: calc(100vh - var(--header-scroll-height) - var(--header-height-upper)); */ } .s-header-user-nav{ padding-inline: var(--gutter-sp); } .s-header-user-nav__inner{ border-bottom: 2px solid var(--color-border); padding-bottom: 2rem; } .s-header-user-nav-login{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem; } .button-header-nav--user{ display: grid; place-items: center; font-size: 1.6rem; font-weight: var(--fw-semibold); color: var(--color-white); border-radius: .4rem; height: 4.4rem; border:2px solid var(--color-blue-primary); background-color: var(--color-white); } .s-header-user-nav-login a.button-header-nav--user{ color: var(--color-white); } .s-header-user-nav-member-page a.button-header-nav--user{ color: var(--color-blue-primary); } [data-button-type="login"]{ background-color: var(--color-blue-primary); border-color: var(--color-blue-primary); } [data-button-type="register"]{ background-color: var(--color-red); border-color: var(--color-red); } [data-button-type="member"]{ color: var(--color-blue-primary); width: 14.4rem; margin-inline: auto; } .s-header-user-panel{ margin-top: 2rem; border-radius: 1rem; background-color: #EFF3F7; padding: 1.8rem 1.5rem; } .s-header-user-panel:has(.s-header-user-status){ display: grid; grid-template-columns: auto 16.7rem; gap: 2.5rem; align-items: center; } .s-header-user-status__name{ font-size: 1.4rem; line-height: 1; font-weight: var(--fw-medium); display: flex; align-items: baseline; gap: .5rem; } .s-header-user-status__name span{ font-size: 1.8rem; overflow: hidden; display: -webkit-box; text-overflow: ellipsis; -webkit-box-orient: vertical; -webkit-line-clamp: 1; } .s-header-user-status__point{ margin-top: .5rem; font-size: 1.4rem; display: flex; align-items: baseline; gap: .4rem; } .s-header-user-status__point span{ font-size: 3rem; font-weight: var(--fw-bold); } .s-header-user-content{ display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: .4rem; } .s-header-user-status + .s-header-user-content { display: grid; grid-template-columns: repeat(2, 1fr); grid-template-rows: auto auto; grid-column-gap: .6rem; grid-row-gap: .7rem; } .s-header-user-status + .s-header-user-content [data-user-content="favorite"] { grid-area: 1 / 1 / 2 / 2; } .s-header-user-status + .s-header-user-content [data-user-content="history"] { grid-area: 1 / 2 / 2 / 3; } .s-header-user-status + .s-header-user-content [data-user-content="coupon"] { grid-area: 2 / 1 / 3 / 3; padding-block: 0; } .s-header-user-status + .s-header-user-content [data-user-content="coupon"] figure{ display: flex; align-items: center; justify-content: center; } .s-header-user-status + .s-header-user-content [data-user-content="coupon"] img, .s-header-user-status + .s-header-user-content [data-user-content="coupon"] svg{ margin-inline: unset; } .s-header-user-status + .s-header-user-content [data-user-content="coupon"] figcaption{ margin-top: 0; } .s-header-user-content-item{ background-color: var(--color-white); border-radius: .4rem; padding-block: .5rem .9rem; } .s-header-user-content-item img, .s-header-user-content-item svg{ width: 3.9rem; display: block; margin-inline: auto; } .s-header-user-content-item figcaption{ display: block; text-align: center; font-size: 1.3rem; line-height: 1; letter-spacing: .03em; font-weight: var(--fw-medium); color: var(--color-blue-primary); margin-top: .2rem; } .header-sp-icon-accordion::after { content: ""; display: block; width: 2.4rem; height: 2.4rem; flex-shrink: 0; border-radius: .4rem; background-color: var(--color-blue-primary); background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_27346%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2027346%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_28976%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2028976%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_81224%22%20data-name%3D%22%E3%83%91%E3%82%B9%2081224%22%20d%3D%22M11.2%2C6.1a.5.5%2C0%2C0%2C1-.354-.146L5.6.707.354%2C5.953a.5.5%2C0%2C0%2C1-.707%2C0%2C.5.5%2C0%2C0%2C1%2C0-.707l5.6-5.6a.5.5%2C0%2C0%2C1%2C.707%2C0l5.6%2C5.6A.5.5%2C0%2C0%2C1%2C11.2%2C6.1Z%22%20transform%3D%22translate(17.7%2015.099)%20rotate(-180)%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E'); transition: transform var(--transition-default); } .header-sp-icon-accordion[data-rect-type="right"]::after{ transform:rotate(-90deg); } .header-sp-icon-accordion.active::after { transform: scale(1 , -1); } [data-contents-type="category"] .header-sp-icon-accordion::after{ background-color: var(--color-white); background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_27352%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2027352%22%20transform%3D%22translate(10810%20482)%22%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_28976%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2028976%22%20width%3D%2224%22%20height%3D%2224%22%20rx%3D%224%22%20transform%3D%22translate(-10786%20-458)%20rotate(180)%22%20fill%3D%22none%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_81224%22%20data-name%3D%22%E3%83%91%E3%82%B9%2081224%22%20d%3D%22M11.2%2C6.1a.5.5%2C0%2C0%2C1-.354-.146L5.6.707.354%2C5.953a.5.5%2C0%2C0%2C1-.707%2C0%2C.5.5%2C0%2C0%2C1%2C0-.707l5.6-5.6a.5.5%2C0%2C0%2C1%2C.707%2C0l5.6%2C5.6A.5.5%2C0%2C0%2C1%2C11.2%2C6.1Z%22%20transform%3D%22translate(-10792.5%20-467.5)%20rotate(-180)%22%20fill%3D%22%230052a5%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E') } [data-contents-type="category"]{ background-color: var(--color-blue-primary); border-radius: 1rem; margin-block: 1.5rem 2rem; } [data-contents-type="category"] .s-header-content-list{ padding-bottom: 1rem; } .s-header-categoryNav__head{ font-size: 1.8rem; padding: 1.6rem 0; display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-weight: var(--fw-semibold); background-color: unset; } [data-contents-type="category"] .s-header-categoryNav__head{ background-color: unset; color: var(--color-white); padding: 2rem var(--gutter-sp); } .s-header-contentsNavBlock__item + .s-header-contentsNavBlock__item{ padding-inline: var(--gutter-sp); } .s-header-contentsNavBlock__item + .s-header-contentsNavBlock__item .s-header-categoryNav__head{ border-top: 2px solid var(--color-ice-blue); } [data-contents-type="manufacturer"] .s-header-content-list, [data-contents-type="manufacturer"] .grid-list-manufacturer{ padding-inline: 0; } [data-contents-type="manufacturer"] .grid-list-manufacturer{ margin-bottom: 2rem; } [data-contents-type="search-modal"] button.s-header-categoryNav__head{ padding: 1.6rem 0; width: 100%; border-bottom: 2px solid var(--color-ice-blue); } .s-header-company__navlist{ margin-top: 4rem; display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 2rem 4rem; } .s-header-company__navlist__item a{ display: grid; grid-template-columns: auto 1.8rem; align-items: center; font-size: 1.4rem; line-height: 1; letter-spacing: .03em; padding-inline: var(--gutter-sp); } .s-header-company__navlist__item a::after{ content: ''; width: 1.8rem; height: 1.8rem; mask-repeat: no-repeat; mask-size: contain; mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_25612%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2025612%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_81145%22%20data-name%3D%22%E3%83%91%E3%82%B9%2081145%22%20d%3D%22M0%2C0H18V18H0Z%22%20transform%3D%22translate(18)%20rotate(90)%22%20fill%3D%22none%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_81139%22%20data-name%3D%22%E3%83%91%E3%82%B9%2081139%22%20d%3D%22M8.387%2C5.193A1%2C1%2C0%2C0%2C1%2C7.68%2C4.9L4.193%2C1.414.707%2C4.9a1%2C1%2C0%2C0%2C1-1.414%2C0%2C1%2C1%2C0%2C0%2C1%2C0-1.414L3.486-.707a1%2C1%2C0%2C0%2C1%2C1.414%2C0L9.094%2C3.486a1%2C1%2C0%2C0%2C1-.707%2C1.707Z%22%20transform%3D%22translate(10.693%204.5)%20rotate(90)%22%20fill%3D%22%231e2a36%22%2F%3E%3C%2Fsvg%3E'); background-color: var(--color-primary); } } @media screen and (min-width: 768px) and (max-width: 991px) { .button-total-nav{ width: 20%; } .js-button-nav-more{ gap: 1rem; } .center-content{ margin-left: 2rem; } .s-header-navBlok__openBtn{ margin-left: 1rem; } .s-header-navBlok__nav{ padding-inline: 4rem; } [data-contents-type="category"] .s-header-categoryNav__head{ padding: 2rem 1rem; } [data-contents-type="category"] .header-sp-icon-accordion::after, [data-contents-type="manufacturer"] .header-sp-icon-accordion::after{ display: none; } [data-contents-type="category"] .category-list{ padding-inline: 2rem; } .s-header-freeWordSearch, .card-list-anchor{ padding-inline: 2rem; } } @media (hover: hover) { .s-header-categoryNav__head[data-rect-type="below"]::after{ transition: transform var(--transition-default); } .s-header-categoryNav:hover .s-header-categoryNav__head[data-rect-type="below"]::after{ transform: scale(1 , -1) } } /* SP検索フォームとアンカーボタン ------------------------------------------------------------- */ .card-list-anchor[data-page="product-detail"]{ display: none; } .sp-middle-nav-content-anchor{ display:none; } @media screen and (max-width: 991px) { .sp-search-nav{ background-color: var(--color-ice-blue); padding-block: .8rem; padding-inline: var(--gutter-sp); } .s-header.is-fixed .sp-search-nav .s-header-freeWordSearch{ display: grid; grid-template-columns: 1fr 10rem; gap: .5rem; align-items: center; } .sp-search-nav .s-header-freeWordSearch input[type=search]{ font-size: 1.5rem; } .modal-search__anchor{ display:none; height: 100%; } .s-header.is-fixed .modal-search__anchor{ display:block; } .button-modal-search-anchor{ text-align: center; font-size: 1.4rem; line-height: 1.2; letter-spacing: .03em; font-weight: var(--fw-semibold); display: flex; flex-direction: column; justify-content: center; background-color: var(--color-yellow-accent); border: 1px solid var(--color-blue-pale); border-radius: .4rem; width: 100%; height: 100%; padding: 0; margin: 0; } .button-modal-search-anchor span{ font-size: 1.2rem; } .card-list-anchor{ display: grid; grid-template-columns: auto auto auto; gap: .5rem; margin-top: .8rem; } .s-header.is-fixed .card-list-anchor{ display:none; } .card-list-anchor a, .card-list-anchor .c-button-anchor{ font-size: 1.3rem; text-align: center; line-height: 1; letter-spacing: .03em; font-weight: var(--fw-semibold); background-color: var(--color-white); border-radius: .4rem; padding: .9rem .6rem; display:grid; place-items: center; } .card-list-anchor .c-button-anchor{ color: var(--color-white); height: 100%; margin: 0; } /* 商品詳細ページ用 */ .card-list-anchor[data-page="product-detail"]{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); margin-top: 0; border-block: 1px solid #E0E0E0; } .card-list-anchor[data-page="product-detail"] > *{ position: relative; padding-block: .8rem; font-size: 1.5rem; text-align: center; font-weight: var(--fw-semibold); } .card-list-anchor[data-page="product-detail"] > a + *:before{ content: ""; width: 1px; height: 2ch; background-color: #E0E0E0; position: absolute; left: 0; top:0; bottom: 0; margin-block: auto; } /* 商品詳細ページ追従ヘッダー時 */ html:has(.p-page-productDetail) .s-header.is-fixed .header-logo, html:has(.p-page-productDetail) .s-header.is-fixed .sp-bottom-nav-content-anchor{ display:none; } html:has(.p-page-productDetail) .s-header.is-fixed .sp-middle-nav-content-anchor{ display:block; } html:has(.p-page-productDetail) .s-header.is-fixed .card-list-anchor[data-page="product-detail"]{ display: grid; } html:has(.p-page-productDetail) .s-header.is-fixed [data-link-type="login"], html:has(.p-page-productDetail) .s-header.is-fixed [data-link-type="cart"] figcaption{ display:none; } html:has(.p-page-productDetail) .s-header.is-fixed .center-content{ justify-self: center; width: 100%; } html:has(.p-page-productDetail) .s-header.is-fixed .s-header-wrap__utility{ width: auto; height: 3.3rem; } html:has(.p-page-productDetail) .s-header.is-fixed .card-list-anchor[data-page="product-detail"]{ border-block: unset; } html:has(.p-page-productDetail) .s-header .s-header-navBlok__nav{ top: 100%; height: calc(100vh - 1rem); } html:has(.p-page-productDetail) .s-header.is-fixed .s-header-navBlok__nav{ height: calc(100vh - 1rem); } html:not(:has(#product-detail-block)) .button-product-detail-block, html:not(:has(#product-review)) .button-product-review{ opacity: .4; pointer-events: none; } } /* ヘッダー帯バナー ------------------------------------------------------------- */ .header-ticker-area { width: 100%; height: var(--header-height-upper); text-align: center; background-color: var(--color-yellow-accent); display: flex; justify-content: center; align-items: center; } .header-ticker-text { font-size: 1.2rem; letter-spacing: 0.03em; line-height: 1; text-align: center; font-weight: var(--fw-bold); -webkit-line-clamp: 1; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; } .s-header-overlay{ position: fixed; top: 0; left: 0; display: block; width: 100vw; height: 100vh; background-color: var(--color-main); opacity: 0; transition: opacity var(--transition-default); z-index: 99; pointer-events: none; } html:has(.s-header-categoryNav:hover) .s-header-overlay, html:has(.js-keyword-modal.active) .s-header-overlay { opacity: 0.6; pointer-events: auto; } @media screen and (max-width: 991px) { .header-ticker-area{ margin-bottom: .2rem; } } @media screen and (min-width: 768px) { } @media screen and (max-width: 767px) { } @media (hover: hover) { } /* ============================================================= Footer ============================================================= */ /* 共通 ------------------------------------------------------------- */ .s-footer { border-top: .6rem solid var(--color-ice-blue); padding: 0; } .s-footer-content{ padding-inline:var(--gutter-sp); } .return-top{ position: fixed; bottom: 1rem; right: 1rem; z-index: 2; height: calc(100vh - 1rem); display: grid; align-items: flex-end; pointer-events: none; } .return-top::before{ content: ''; width: 4px; height: calc(100vh - -5rem); position: absolute; bottom: 5rem; right: 0; left: 0; margin-inline: auto; background-color: var(--color-blue-primary); opacity: 0; transition: opacity var(--transition-default); } .button-return-top__inner{ display: grid; place-items: center; width: 100%; height: 100%; position: relative; } .button-return-top__water{ position: absolute; top: 0; left: 0; opacity: 0; transition: opacity var(--transition-default); } [data-brand="001"] .button-return-top__main-outer{ width: 5.4rem; height: 5.4rem; overflow: hidden; } [data-brand="001"] .button-return-top__main{ transform: rotate(-45deg); transform-origin: center; transition: rotate var(--transition-default); } .js-button-return-top{ pointer-events: auto; } .button-return-top__text{ margin-inline: auto; } .js-button-return-top.midst{ opacity: 1; } .return-top:has(.js-button-return-top.midst)::before, .js-button-return-top.midst .button-return-top__water{ opacity: 1; } [data-brand="001"] .js-button-return-top.midst .button-return-top__main{ transform: rotate(0); } [data-brand="003"] .button-return-top__main-outer{ width: 5rem; position: relative; } [data-brand="003"] .base{ opacity: 1; } [data-brand="003"] .return{ opacity: 0; position: absolute; bottom: 0; left: 0; } [data-brand="003"] .midst .base{ opacity: 0; } [data-brand="003"] .midst .return{ opacity: 1; } [data-brand="003"] .return-top::before{ width: 3px; background-image: linear-gradient(90deg, rgba(255, 255, 255, 1) 33%, rgba(212, 175, 55, 1) 33% 66%, rgba(255, 255, 255, 1) 66%); background-color: transparent; } @media (hover: hover) { .js-button-return-top:hover{ opacity: 1; } /* .js-button-return-top:hover .button-return-top__water, */ .return-top:has(.js-button-return-top:hover)::before{ opacity: 1; } [data-brand="001"] .js-button-return-top:hover .button-return-top__main{ transform: rotate(0); } } /* コンテンツリスト ------------------------------------------------------------- */ /* カンパニーインフォ関係 ------------------------------------------------------------- */ .company-information{ margin-top: 1rem; padding-top: 3rem; border-top: 2px solid var(--color-ice-blue); } .company-information-content-area{ display:flex; flex-direction: column; gap: 3.96rem; justify-items: center; } .company-information-content__shop-list{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem 0; width: 100%; } .company-information-content__shop-list li{ width: 100%; } .company-information-content__shop-list a{ display:grid; grid-template-columns: auto 1.8rem; padding-inline: 1rem; font-size: 1.4rem; line-height: 1; letter-spacing: .03rem; } .company-information-content__shop-list a::after{ content: ""; width: 1.8rem; height: 1.8rem; mask-repeat: no-repeat; mask-size: contain; mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_25612%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2025612%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_81145%22%20data-name%3D%22%E3%83%91%E3%82%B9%2081145%22%20d%3D%22M0%2C0H18V18H0Z%22%20transform%3D%22translate(18)%20rotate(90)%22%20fill%3D%22none%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_81139%22%20data-name%3D%22%E3%83%91%E3%82%B9%2081139%22%20d%3D%22M8.387%2C5.193A1%2C1%2C0%2C0%2C1%2C7.68%2C4.9L4.193%2C1.414.707%2C4.9a1%2C1%2C0%2C0%2C1-1.414%2C0%2C1%2C1%2C0%2C0%2C1%2C0-1.414L3.486-.707a1%2C1%2C0%2C0%2C1%2C1.414%2C0L9.094%2C3.486a1%2C1%2C0%2C0%2C1-.707%2C1.707Z%22%20transform%3D%22translate(10.693%204.5)%20rotate(90)%22%20fill%3D%22%231e2a36%22%2F%3E%3C%2Fsvg%3E'); background-color: var(--color-text-default); } .company-information-content__sns-list{ display:grid; grid-template-columns: repeat(4, 2.4rem); gap: 2rem; justify-content: center; } .payment-methods{ margin-top: 4rem; display:grid; grid-template-columns: repeat(6, minmax(5rem, 1fr)); justify-content: center; gap: .8rem; padding-inline: var(--gutter-sp); } .payment-methods__item{ border-radius: .4rem; overflow: hidden; border: 1px solid #E0E0E0; } .s-footer-bottom{ margin-top: 4rem; } .s-footer-wrap__logo{ width: 16rem; margin-inline: auto; } .s-footer-wrap__copy{ margin-top: 2rem; background-color: var(--color-blue-primary); color: var(--color-white); font-size: 1rem; text-align: center; font-weight: var(--fw-semibold); font-family: var(--font-en); line-height: 1; padding: 1rem 1rem; } @media screen and (min-width: 768px) { /* 共通 ------------------------------------------------------------- */ /* コンテンツリスト ------------------------------------------------------------- */ /* カンパニーインフォ関係 ------------------------------------------------------------- */ .site-content-list{ display: grid; grid-template-columns: 41rem 41rem 18rem; gap: 0 10rem; } .company-information{ margin-top: 0; padding-top: 4rem; border-color: #F5F5F5; } .company-information-content-area{ flex-direction: row; justify-content: space-between; align-items: center; } .company-information-content__shop-list{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem 6rem; width: auto; } .company-information-content__shop-list li{ width: auto; } .company-information-content__shop-list a{ padding-inline: 0; grid-template-columns: 15rem 2rem; } .company-information-content__sns-list{ display:grid; grid-template-columns: repeat(4, 2.4rem); gap:3rem; justify-content: flex-start; } .payment-methods{ /* grid-template-columns: repeat(9, 5rem); */ display: flex; gap: .8rem; padding-inline: 0; } .payment-methods__item{ width: 5rem; } .s-footer-wrap__copy{ font-weight: var(--fw-regular); } } @media screen and (max-width: 767px) { /* 共通 ------------------------------------------------------------- */ /* コンテンツリスト ------------------------------------------------------------- */ /* カンパニーインフォ関係 ------------------------------------------------------------- */ } /* フッター カテゴリから探す ------------------------------------------------------------- */ .s-footer-content__inner{ padding-top: 1rem; } .s-footer-category { padding-block: 0; } .s-footer-category__title { display: flex; align-items: center; justify-content: space-between; font-size: 1.6rem; font-weight: var(--fw-semibold); color: var(--color-text-default); cursor: unset; } .s-footer-category__list-inner { display: grid; grid-template-columns: repeat(2, 1fr); } .s-footer-category__link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; font-size: 1.2rem; text-decoration: none; color: var(--color-text-default); } .s-footer-category__link::after { content: ""; display: block; width: 1.8rem; height: 1.8rem; flex-shrink: 0; mask-repeat: no-repeat; mask-size: contain; mask-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2218%22%20height%3D%2218%22%20viewBox%3D%220%200%2018%2018%22%3E%20%3Cg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_27356%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2027356%22%20transform%3D%22translate(12167%20-9108)%22%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_81145%22%20data-name%3D%22%E3%83%91%E3%82%B9%2081145%22%20d%3D%22M0%2C0H18V18H0Z%22%20transform%3D%22translate(-12149%209108)%20rotate(90)%22%20fill%3D%22none%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_81139%22%20data-name%3D%22%E3%83%91%E3%82%B9%2081139%22%20d%3D%22M-7096.582%2C717.713a1%2C1%2C0%2C0%2C1-.707-.293l-4.006-4.006-4.006%2C4.006a1%2C1%2C0%2C0%2C1-1.414%2C0%2C1%2C1%2C0%2C0%2C1%2C0-1.414l4.713-4.713a1%2C1%2C0%2C0%2C1%2C1.414%2C0l4.713%2C4.713a1%2C1%2C0%2C0%2C1%2C0%2C1.414A1%2C1%2C0%2C0%2C1-7096.582%2C717.713Z%22%20transform%3D%22translate(-11443.787%2016218.509)%20rotate(90)%22%20fill%3D%22%230052a5%22%2F%3E%20%3C%2Fg%3E%3C%2Fsvg%3E'); background-color: var(--color-primary); } /* PC: js-accordion__target の max-height: 0 を無効化して常時展開 */ @media screen and (min-width: 768px) { .s-footer-content__inner{ padding-top: 0; } .site-content{ padding-block: 4rem; } .js-accordion__target{ max-height: none !important; overflow: visible; } .s-footer-category__list { padding-top: 1.6rem; } .s-footer-category__list-inner{ gap:1.2rem 5rem; } [data-separate="true"]{ margin-top: 2.8rem; } [data-column="single"] .s-footer-category__list-inner{ grid-template-columns: 1fr; } .s-footer-category__link::after { width: 1.6rem; height: 1.6rem; } .s-footer-category + .s-footer-category{ margin-top: 4rem; } } @media screen and (max-width: 767px) { .s-footer-category__title { padding-block: 1rem; padding-inline: 1rem; } .s-footer-category__title::after { content: ""; display: block; width: 2.4rem; height: 2.4rem; flex-shrink: 0; border-radius: .4rem; background-color: var(--color-blue-primary); background-repeat: no-repeat; background-position: center; background-size: contain; background-image: url('data:image/svg+xml;charset=utf8,%3Csvg%20id%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97_27346%22%20data-name%3D%22%E3%82%B0%E3%83%AB%E3%83%BC%E3%83%97%2027346%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%3E%20%3Crect%20id%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2_28976%22%20data-name%3D%22%E9%95%B7%E6%96%B9%E5%BD%A2%2028976%22%20width%3D%2224%22%20height%3D%2224%22%20fill%3D%22none%22%2F%3E%20%3Cpath%20id%3D%22%E3%83%91%E3%82%B9_81224%22%20data-name%3D%22%E3%83%91%E3%82%B9%2081224%22%20d%3D%22M11.2%2C6.1a.5.5%2C0%2C0%2C1-.354-.146L5.6.707.354%2C5.953a.5.5%2C0%2C0%2C1-.707%2C0%2C.5.5%2C0%2C0%2C1%2C0-.707l5.6-5.6a.5.5%2C0%2C0%2C1%2C.707%2C0l5.6%2C5.6A.5.5%2C0%2C0%2C1%2C11.2%2C6.1Z%22%20transform%3D%22translate(17.7%2015.099)%20rotate(-180)%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E'); transition: transform var(--transition-default); } .s-footer-category__title.active::after { transform: scale(1 , -1); } .s-footer-category__list-inner{ border-block: 1px solid var(--color-ice-blue); } .s-footer-category__link { /* padding: 1.6rem 1rem; */ padding: 0 1rem; font-size: 1.4rem; min-height: 5.4rem; border-bottom: 1px solid var(--color-ice-blue); margin-bottom: -1px; } /* 2列の中央ボーダー */ .s-footer-category__link:nth-child(odd) { border-right: 1px solid var(--color-ice-blue); } } @media screen and (max-width: 991px) { .s-footer{ margin-top: 5rem; } /* html:has(.product-history-list) .s-footer{ margin-top: 0; } */ } @media (hover: hover) { } .m-toast { top: calc(var(--header-scroll-height) + 1rem) !important; z-index: 99999!important; }