style 属性はCSSファイルより優先されるため、!important がないと上書きできません。ここだけは例外的に使っています。アカウントは全拠点で共通（2966）なので、管理画面では拠点ごとに色を変えられません。ページ側で変えます。 ※ body.itm-page の内側だけの指定です。商品ページ以外のチャットは今までどおりの色のままです。 ═══════════════════════════════════════════════ */ body.itm-page #chamo-window .chamo-titlebar{ background-color:var(--fe21-concept) !important; } /* 最小化ボタン（×）と帯の文字を白のままに保つ */ body.itm-page #chamo-window .chamo-titlebar, body.itm-page #chamo-window .chamo-titlebar *{ color:#fff !important; } /* 顔写真が帯と重なるので下げる。この写真だけ position:absolute; top:10px で置かれていて、高さ24pxの帯の下に潜り込んでいる。位置も style 属性に書かれるため !important が要る。 */ body.itm-page #chamo-window #chamo-image{ top:34px !important; } /* 写真を下げた分、横の文章も下げて高さをそろえる */ body.itm-page #chamo-window .chamo_main > div:first-child, body.itm-page #chamo-window .chamo-main > div:first-child{ margin-top:24px !important; } /* 閉じているときの呼び出し窓も同じ色にする */ body.itm-page #chamo-waiting .chamo-titlebar{ background-color:var(--fe21-concept) !important; } /* ═══════════════════════════════════════════════ スマホメニューの開き方 ─────────────────────────────────────────────── 共通CSS（kyotentop.css）は display:none / block の切り替えなので、そのままでは動きを付けられません。ただし display:block にして透明にしておくと、閉じているあいだも要素が残り、場所を取ったりページに重なったりします。そこで display の切り替えは共通CSSのまま触らず、「開いた瞬間だけ」アニメーションを1回再生します。閉じるときは今までどおり即座に消えます。商品ページの中（body.itm-page）だけの指定です。共通CSSは触っていないので、他のページには影響しません。 ═══════════════════════════════════════════════ */ @keyframes itm-menu-in{ from{ opacity:0; transform:translateY(-10px); } to { opacity:1; transform:none; } } @keyframes itm-menu-item-in{ from{ opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } } body.itm-page .mobile-menu.open{ animation:itm-menu-in .26s ease both; } /* 中の項目は、少し遅れて順に入ってくる */ body.itm-page .mobile-menu.open .mobile-nav-item{ animation:itm-menu-item-in .22s ease both; } body.itm-page .mobile-menu.open .mobile-nav-item:nth-child(1){ animation-delay:.05s; } body.itm-page .mobile-menu.open .mobile-nav-item:nth-child(2){ animation-delay:.08s; } body.itm-page .mobile-menu.open .mobile-nav-item:nth-child(3){ animation-delay:.11s; } body.itm-page .mobile-menu.open .mobile-nav-item:nth-child(4){ animation-delay:.14s; } body.itm-page .mobile-menu.open .mobile-nav-item:nth-child(5){ animation-delay:.17s; } body.itm-page .mobile-menu.open .mobile-nav-item:nth-child(n+6){ animation-delay:.20s; } /* 小項目も開くときだけ動かす。 open が付くのは .mobile-dropdown ではなく親の .mobile-nav-item のほうで、共通CSS側が .mobile-nav-item.open .mobile-dropdown{ display:block } で出し分けているので、そこに合わせる。 */ body.itm-page .mobile-menu .mobile-nav-item.open .mobile-dropdown{ animation:itm-menu-item-in .2s ease both; } /* ═══════════════════════════════════════════════ ページ内ナビ（上段：パンくず／下段：目次＋カート）・パンくずは固定。長い商品名は末尾を省略する・目次は PC・スマホとも横スクロール。スクロールバーは隠す・現在地は拠点色（--fe21-concept）で示す ═══════════════════════════════════════════════ */ /* --- 上段：パンくず --- */ body.itm-page .itm-nav .itm-nav-crumb{ display:flex; align-items:baseline; white-space:nowrap; overflow:hidden; } body.itm-page .itm-nav .itm-nav-crumb a{ flex:0 0 auto; color:inherit; transition:color .18s ease; } body.itm-page .itm-nav .itm-nav-crumb a:hover{ color:var(--fe21-concept); } body.itm-page .itm-nav .itm-crumb-current{ flex:1 1 auto; min-width:0; overflow:hidden; text-overflow:ellipsis; } @media (max-width:767px){ body.itm-page .itm-nav .itm-nav-crumb{ font-size:10px; } } /* --- 下段：目次とカートの並び --- */ body.itm-page .itm-nav .itm-nav-row{ display:flex; align-items:stretch; gap:12px; } @media (min-width:768px){ body.itm-page .itm-nav .itm-nav-row{ gap:20px; } } /* --- 目次（横スクロール） --- */ body.itm-page .itm-nav .itm-nav-list{ display:flex; align-items:stretch; flex:1 1 auto; min-width:0; margin:0; padding:0; gap:20px; list-style:none; overflow-x:auto; overflow-y:hidden; overscroll-behavior-x:contain; -webkit-overflow-scrolling:touch; scrollbar-width:none; -ms-overflow-style:none; color:var(--itm-body); font-size:13px; font-weight:700; } @media (min-width:768px){ body.itm-page .itm-nav .itm-nav-list{ gap:32px; font-size:16px; } } body.itm-page .itm-nav .itm-nav-list::-webkit-scrollbar{ display:none; } body.itm-page .itm-nav .itm-nav-list > li{ flex:0 0 auto; display:flex; } /* 横に続きがあることを示す。右端だけ薄くする */ @media (max-width:767px){ body.itm-page .itm-nav .itm-nav-list{ -webkit-mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 20px),transparent 100%); mask-image:linear-gradient(90deg,#000 0,#000 calc(100% - 20px),transparent 100%); } } /* --- 目次の各項目：ホバーと現在地で拠点色にする --- */ body.itm-page .itm-nav .itm-nav-list a{ position:relative; display:flex; align-items:center; padding:12px 0; white-space:nowrap; color:inherit; text-decoration:none; transition:color .18s ease; } @media (min-width:768px){ body.itm-page .itm-nav .itm-nav-list a{ padding:16px 0; } } body.itm-page .itm-nav .itm-nav-list a:hover, body.itm-page .itm-nav .itm-nav-list a:focus-visible{ color:var(--fe21-concept); } body.itm-page .itm-nav .itm-nav-list a[aria-current="true"]{ color:var(--fe21-concept); } /* 下線。ホバーで左から伸び、現在地では出したままにする */ body.itm-page .itm-nav .itm-nav-list a::after{ content:""; position:absolute; left:0; right:0; bottom:0; height:3px; background:var(--fe21-concept); transform:scaleX(0); transform-origin:left center; transition:transform .18s ease; } body.itm-page .itm-nav .itm-nav-list a:hover::after, body.itm-page .itm-nav .itm-nav-list a:focus-visible::after, body.itm-page .itm-nav .itm-nav-list a[aria-current="true"]::after{ transform:scaleX(1); } /* --- ナビ内のお問い合わせ（カートの左・PCのみ） --- スマホは横幅が足りず、下部のアクションバーが同じ役割を持つため出しません。 */ body.itm-page .itm-nav .itm-nav-contact{ flex:0 0 auto; align-self:center; display:none; align-items:center; gap:6px; /* PCのカートと同じ40pxに揃える */ height:40px; padding:0 18px; border-radius:9999px; border:1px solid var(--fe21-midashi, #0F2B3D); background:var(--fe21-midashi, #0F2B3D); color:#fff; font-size:13px; font-weight:700; white-space:nowrap; text-decoration:none; transition:background .18s ease, color .18s ease, border-color .18s ease; } @media (min-width:768px){ body.itm-page .itm-nav .itm-nav-contact{ display:inline-flex; } } body.itm-page .itm-nav .itm-nav-contact:hover, body.itm-page .itm-nav .itm-nav-contact:focus-visible{ opacity:.85; } body.itm-page .itm-nav .itm-nav-contact svg{ display:block; flex:0 0 auto; width:18px; height:18px; } /* --- ナビ内のカート --- */ body.itm-page .itm-nav #itm-nav-cart{ position:relative; flex:0 0 auto; align-self:center; display:inline-flex; align-items:center; justify-content:center; /* 指で押すスマホは44px（Appleの推奨44pt／Googleの推奨48dpに合わせる）。マウスで狙うPCは40pxで十分で、お問い合わせボタンとも高さが揃う。 */ width:44px; height:44px; border-radius:9999px; /* ナビの帯が白になったので、カートは薄い拠点色で地を作る。白のままだと帯に溶けて見えなくなる。 */ background:var(--fe21-pale2, #E7EFF5); border:1px solid var(--fe21-pale2, #E7EFF5); color:var(--fe21-concept); transition:background .18s ease, border-color .18s ease, color .18s ease; } @media (min-width:768px){ body.itm-page .itm-nav #itm-nav-cart{ width:40px; height:40px; } } body.itm-page .itm-nav #itm-nav-cart:hover, body.itm-page .itm-nav #itm-nav-cart:focus-visible{ background:var(--fe21-concept); border-color:var(--fe21-concept); color:#fff; } /* アイコン。寸法を指定しないと flex の中で潰れる */ body.itm-page .itm-nav .itm-cart-icon{ display:block; flex:0 0 auto; width:22px; height:22px; } @media (min-width:768px){ body.itm-page .itm-nav .itm-cart-icon{ width:21px; height:21px; } } /* カート個数のバッジ。アイコンの右上に重ねる */ body.itm-page .itm-nav .itm-badge{ position:absolute; top:-3px; right:-3px; display:none; align-items:center; justify-content:center; min-width:18px; height:18px; padding:0 5px; border-radius:9999px; border:2px solid var(--itm-tint); background:var(--fe21-midashi, #E4451E); color:#fff; font-size:10px; font-weight:700; line-height:1; font-variant-numeric:tabular-nums; } body.itm-page .itm-nav .itm-badge:not(.hidden){ display:flex; } /* トップへ戻る（左下） */ .itm-page #itm-totop{ opacity:0; visibility:hidden; pointer-events:none; transform:translateY(8px); } .itm-page #itm-totop.is-visible{ opacity:1; visibility:visible; pointer-events:auto; transform:none; } .itm-page #itm-totop:hover{ background:var(--itm-paper); } /* アンカー移動時にヘッダーとナビの下に隠れないように */ .itm-page section[id]{ scroll-margin-top:calc(var(--itm-header) + 64px); } /* 拡大表示：hidden 属性を確実に効かせる（Tailwind の display 指定より優先） */ .itm-page #item-lightbox[hidden]{ display:none !important; } /* 商品画像スライダー */ .itm-slides{ display:flex; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; border-radius:8px; } .itm-slides::-webkit-scrollbar{ display:none; } .itm-slide{ flex:0 0 100%; scroll-snap-align:center; } .itm-arrow{ position:absolute; top:50%; transform:translateY(-50%); width:36px; height:36px; border-radius:9999px; background:rgba(255,255,255,.92); border:1px solid var(--itm-line); display:none; align-items:center; justify-content:center; padding:0; line-height:0; color:var(--itm-ink); box-shadow:0 2px 10px rgba(15,43,61,.10); } /* 中身はSVG。文字（‹ ›）だとフォントの字幅と高さの差で丸の中心からずれるため、図形で描いて確実に中央に置く。 */ .itm-arrow svg{ display:block; width:18px; height:18px; } .itm-arrow:hover{ background:#fff; } .itm-arrow[disabled]{ opacity:.35; cursor:default; } @media (min-width:768px){ .itm-arrow{ display:flex; } } .itm-dot{ width:7px; height:7px; border-radius:9999px; background:var(--itm-line); transition:width .2s ease, background .2s ease; } .itm-dot[aria-current="true"]{ width:20px; background:var(--fe21-concept); } /* 関連商品カードスマホ：横スクロール。1枚を大きく見せ、次の1枚を少しのぞかせて «横に続きがある» ことを伝える（Amazonのカルーセルと同じ考え方） PC ：4列グリッド */ .itm-reco-grid{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; margin-left:-16px; margin-right:-16px; padding:2px 16px 6px; scrollbar-width:none; } .itm-reco-grid::-webkit-scrollbar{ display:none; } .itm-reco-grid > *{ flex:0 0 80%; scroll-snap-align:start; } @media (min-width:768px){ .itm-reco-grid{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:24px; overflow:visible; margin:0; padding:0; } .itm-reco-grid > *{ flex:none; } } /* 動画がない商品は動画枠だけ消す（右カラムには共通メッセージが残る） */ .itm-page #item-staff-video[data-has-video="false"] .itm-video-col{ display:none; } /* 動画のサムネイル（クリックするまでYouTubeを読み込まない） */ .itm-video-facade{ cursor:pointer; } .itm-video-facade:hover .itm-video-play{ transform:scale(1.08); } .itm-video-play{ transition:transform .2s ease; } @media (prefers-reduced-motion: reduce){ *{ transition:none!important; animation:none!important; } }