/* * アクティブテーマ内レンダリング用カート UI スタイル * * 由来: iihcart-theme/style.css のカート UI セクションを抽出し、 * 全セレクタを .iihcart-scope 配下にスコープしたもの（各セクションの * コメントに抽出元の行範囲を記載）。 * * 運用ポリシー（guides/theme-integration.md 参照）: * - カート UI スタイルの正（single source of truth）は本ファイル。 * - iihcart-theme 1.x 側のコピーは凍結（重大修正のみ）。 * - テーマ 2.0 で自身のカート UI セクションを撤去し本ファイルを利用予定。 * * スコーピング規約: * 1. 全セレクタは .iihcart-scope で始まる（素の要素セレクタ禁止）。 * 2. CSS 変数は :root ではなく .iihcart-scope 上に --iihcart-* で定義。 * 3. Bootstrap 衝突名（.modal-* / .form-group）は参照しない。 * テンプレート側のツインクラス（.iihcart-modal-* 等）のみ参照する。 * 4. !important はミニリセットの装飾打ち消し（content: none）、ボタンの * バリアント（.iihcart-button-light 等）、およびテーマ側の同名 * ユーティリティ（Bootstrap の .text-center / .mt-* 等）に勝つための * ユーティリティ節に限定。 * 5. font-family は指定しない（ホストテーマのフォントを継承し、 * サイトのトーンに馴染ませる）。 */ /* === CSS 変数（既定値。色設定・iihcart_active_theme_css_vars フィルタで上書き可能） === */ .iihcart-scope { --iihcart-color-primary: #b38a12; --iihcart-color-primary-dark: #967310; --iihcart-color-button: #e66000; --iihcart-color-button-hover: #cc5500; --iihcart-color-button-text: #fff; --iihcart-color-link: #006db2; --iihcart-color-error: #e60012; --iihcart-color-text: #111; --iihcart-color-text-light: #666; --iihcart-color-heading-bg: #f2efe6; --iihcart-color-gray-bg: #f0f0f0; --iihcart-color-gray-border: #ccc; --iihcart-color-gray-light: #e5e5e5; --iihcart-color-white: #fff; --iihcart-container-width: 1000px; --iihcart-border-radius-btn: 30px; --iihcart-border-radius-sm: 4px; --iihcart-padded-content-padding: 16px; /* SP 固定ボトムバーの持ち上げ量（ホストテーマの固定フッターとの重なり回避用） */ --iihcart-fixed-bottom-offset: 0px; /* 親プラグインの処理中オーバーレイの配色 */ --iihcart-spinner-color: var(--iihcart-color-primary); --iihcart-overlay-text-color: var(--iihcart-color-text); } /* === ミニリセット === * ホストテーマのコンテンツ装飾（見出しの飾り・テーブル罫線・リストマーカー等）が * カート UI に侵入するのを打ち消す。フォント・文字色などのタイポグラフィは * 意図的にリセットせず、ホストテーマのトーンを継承する。 * `.iihcart-scope.iihcart-scope` は SWELL の .post_content h2 のような * 2 クラス相当の子孫セレクタに勝つための詳細度確保（同一要素の二重クラス指定）。 * * 要素側は `:is()` ではなく `:where()`（詳細度 0）で並べる。`:is(td)` だと * この行が 0-2-1 になり、後続の `.iihcart-scope .cart-item-details { padding: … }` * のような 0-2-0 のレイアウト指定に勝ってしまい、リセットが自分自身の * デザインまで消していた（商品画像とテキストの間の余白が消える等）。 * `:where()` なら 0-2-0 のままホストテーマ（`.entry-content td` = 0-1-2 等）には * 勝ち、同値の自前ルールには後勝ちで譲る。 */ .iihcart-scope, .iihcart-scope *, .iihcart-scope *::before, .iihcart-scope *::after { box-sizing: border-box; } .iihcart-scope { color: var(--iihcart-color-text); font-size: 16px; line-height: 1.8; } .iihcart-scope.iihcart-scope :where(h1, h2, h3, h4, h5, h6) { margin: 0; padding: 0; background: none; border: none; box-shadow: none; letter-spacing: normal; line-height: 1.4; font-weight: 600; } .iihcart-scope.iihcart-scope :is(h1, h2, h3, h4, h5, h6)::before, .iihcart-scope.iihcart-scope :is(h1, h2, h3, h4, h5, h6)::after { content: none !important; } .iihcart-scope.iihcart-scope :where(ul, ol) { list-style: none; margin: 0; padding: 0; } .iihcart-scope.iihcart-scope :where(table, tr, th, td) { background: none; border: none; margin: 0; padding: 0; border-collapse: collapse; } .iihcart-scope.iihcart-scope :where(button) { appearance: none; -webkit-appearance: none; background: none; border: none; border-radius: 0; box-shadow: none; margin: 0; padding: 0; font: inherit; color: inherit; cursor: pointer; } .iihcart-scope.iihcart-scope :where(a) { color: var(--iihcart-color-link); text-decoration: none; transition: opacity .3s; box-shadow: none; } .iihcart-scope.iihcart-scope a:hover { opacity: .7; } .iihcart-scope.iihcart-scope :is(input[type="text"], input[type="email"], input[type="password"], input[type="tel"], input[type="number"], textarea, select) { box-shadow: none; background-color: #fff; } /* select は下の appearance: auto でネイティブの矢印を出すため、テーマが appearance: none と組で * 敷く背景画像の矢印（Lightning 等）を消す。残すと矢印が二重になる */ .iihcart-scope.iihcart-scope :where(select) { background-image: none; } .iihcart-scope img { max-width: 100%; height: auto; } .iihcart-scope form { margin: 0; } /* 本文の行間（抽出元 style.css:383 `.entry-content p { margin-bottom: 16px }` 相当）。 Cocoon のように `* { margin: 0 }` のグローバルリセットを持つテーマでは ブラウザ既定の p 余白も残らないため、スコープ内で明示する。 */ .iihcart-scope p { margin: 0 0 16px; } /* === Buttons / Error / Required (style.css:189-208) === */ /* ========================================================================== Buttons ========================================================================== */ .iihcart-scope .btn-iihcart,.iihcart-scope button.btn-iihcart,.iihcart-scope input[type="submit"].btn-iihcart,.iihcart-scope a.btn-iihcart { display: inline-block; background: var(--iihcart-color-button); color: var(--iihcart-color-button-text); border: none; border-radius: var(--iihcart-border-radius-btn); padding: 16px 48px; font-size: 16px; font-weight: normal; text-align: center; text-decoration: none; cursor: pointer; transition: background .3s; font-family: inherit; -webkit-appearance: none; appearance: none; } .iihcart-scope .btn-iihcart:hover,.iihcart-scope button.btn-iihcart:hover,.iihcart-scope input[type="submit"].btn-iihcart:hover,.iihcart-scope a.btn-iihcart:hover { background: var(--iihcart-color-button-hover); color: var(--iihcart-color-button-text); text-decoration: none; opacity: 1; } .iihcart-scope .btn-iihcart:disabled,.iihcart-scope button.btn-iihcart:disabled { background: #ccc; color: #fff; cursor: not-allowed; opacity: 0.7; } .iihcart-scope .btn-iihcart-gray { display: inline-block; background: #999; color: #fff; border: none; border-radius: var(--iihcart-border-radius-btn); padding: 16px 48px; font-size: 16px; font-weight: normal; text-align: center; cursor: pointer; -webkit-appearance: none; appearance: none; } @media(max-width:768px) { .iihcart-scope .btn-iihcart,.iihcart-scope button.btn-iihcart,.iihcart-scope input[type="submit"].btn-iihcart,.iihcart-scope a.btn-iihcart,.iihcart-scope .btn-iihcart-gray { padding-top: 20px; padding-bottom: 20px; } } /* Cocoon の `input[type=submit] { width: 100% }`（0,1,1）に負けて送信ボタンが 全幅になるのを防ぐ（ログイン / 会員登録 / 登録確認 / パスワード更新）。 コンテナ側で幅を持つボタン（.iihcart-action-button-container-alt）には 同じ詳細度の input 版を併記してあるので上書きされない。 */ .iihcart-scope input[type="submit"].btn-iihcart { width: auto; } /* Error / Required */ .iihcart-scope .error-message,.iihcart-scope .iihcart-error-message,.iihcart-scope .validation-error { color: var(--iihcart-color-error); font-size: 13px; } .iihcart-scope .iihcart-notice-error { color: var(--iihcart-color-error); font-size: 14px; margin-bottom: 16px; } .iihcart-scope .form-error-message { display: none; color: var(--iihcart-color-error); background: #fff4f2; border: 1px solid var(--iihcart-color-error); padding: 8px; font-size: 14px; margin-bottom: 16px; } .iihcart-scope .exclamation-circle { display: inline-block; vertical-align: middle; color: var(--iihcart-color-error); line-height: 1; position: relative; width: 1em; height: 1em; border: 0.1em solid currentColor; border-radius: 50%; box-sizing: content-box; margin-right: 4px; } .iihcart-scope .exclamation-circle > span { width: 0.15em; height: 0.6em; position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .iihcart-scope .exclamation-circle > span::before,.iihcart-scope .exclamation-circle > span::after { content: ''; display: block; width: inherit; background: currentColor; } .iihcart-scope .exclamation-circle > span::before { margin-bottom: 0.1em; height: 0.35em; border-radius: 0.025em; } .iihcart-scope .exclamation-circle > span::after { height: 0.15em; border-radius: 50%; } .iihcart-scope .error-message-container { margin-top: 8px; color: var(--iihcart-color-error); font-size: 13px; } .iihcart-scope .required-badge,.iihcart-scope .iihcart-required { display: inline-block; background: var(--iihcart-color-error); color: #fff; font-size: 10px; font-weight: 700; padding: 2px 6px; border-radius: 2px; vertical-align: middle; margin-left: 4px; } /* === Forms (style.css:210-216) === */ /* ========================================================================== Forms ========================================================================== */ .iihcart-scope input[type="text"],.iihcart-scope input[type="email"],.iihcart-scope input[type="password"],.iihcart-scope input[type="tel"],.iihcart-scope input[type="number"],.iihcart-scope textarea,.iihcart-scope select { border: 1px solid var(--iihcart-color-gray-border); border-radius: var(--iihcart-border-radius-sm); padding: 10px 12px; font-size: 16px; font-family: inherit; color: var(--iihcart-color-text); width: 100%; max-width: 100%; } .iihcart-scope input:focus,.iihcart-scope textarea:focus,.iihcart-scope select:focus { border-color: var(--iihcart-color-primary); outline: none; } .iihcart-scope select { appearance: auto; width: auto; } .iihcart-scope input[type="checkbox"] { accent-color: #248cb3; } /* Zeus トークンのマーカークラス。名前に反して有効期限セレクトには * テンプレートが常時付与している（エラー状態ではない）ため、旧テーマ * （imaoikiruhito_cart/style.css:2993-2996）と同じ通常の見た目にする。 * 意図的にここ（前方）に置き、後続の文脈別ルール * （.iihcart-zeus-payment-group select 等の同詳細度）に上書きさせる。 */ .iihcart-scope select.zeus_token_input_error { border: 1px solid var(--iihcart-color-gray-border); border-radius: var(--iihcart-border-radius-sm); background-color: var(--iihcart-color-white); } /* === Step Bar / Section Headings (style.css:218-240) === */ /* ========================================================================== Step Bar ========================================================================== */ /* Cart Step Progress Bar */ .iihcart-scope .cart-navigation { text-align: center; margin: 40px auto 40px; max-width: 560px; } .iihcart-scope .iihcart-progress-tracker { display: flex; align-items: flex-start; justify-content: center; margin: 0; padding: 0; list-style: none; } .iihcart-scope .iihcart-progress-tracker li { display: flex; flex-direction: column; align-items: center; flex: 1; position: relative; } .iihcart-scope .iihcart-progress-tracker li .step-number { width: 36px; height: 36px; border-radius: 50%; background: var(--iihcart-color-heading-bg); color: #888; border: 1px solid var(--iihcart-color-heading-bg); display: flex; align-items: center; justify-content: center; font-size: 16px; font-weight: normal; margin-bottom: 8px; z-index: 1; } .iihcart-scope .iihcart-progress-tracker li.active .step-number { background: #fff; color: var(--iihcart-color-primary); border: 1px solid var(--iihcart-color-primary); } .iihcart-scope .iihcart-progress-tracker li .text { font-size: 13px; color: #888; white-space: nowrap; } .iihcart-scope .iihcart-progress-tracker li.active .text { color: var(--iihcart-color-text); font-weight: normal; } .iihcart-scope .iihcart-progress-tracker li+li::before { content: ""; position: absolute; top: 18px; right: 50%; width: 100%; height: 2px; background: var(--iihcart-color-heading-bg); z-index: 0; } @media(max-width:768px) { .iihcart-scope .cart-navigation { max-width: 100%; margin-bottom: 24px; } .iihcart-scope .iihcart-progress-tracker li .step-number { width: 28px; height: 28px; font-size: 13px; } .iihcart-scope .iihcart-progress-tracker li .text { font-size: 14px; white-space: normal; text-align: center; } .iihcart-scope .iihcart-progress-tracker li+li::before { top: 14px; } } /* Section Headings */ .iihcart-scope .iihcart-section-heading { background: var(--iihcart-color-heading-bg); padding: 10px 16px; font-size: 14px; font-weight: 600; margin-bottom: 20px; } .iihcart-scope .iihcart-page-title { font-size: 20px; font-weight: 700; margin-bottom: 24px; } .iihcart-scope .iihcart-gray-bg { background: var(--iihcart-color-gray-bg); padding: 16px; border-radius: var(--iihcart-border-radius-sm); } /* === Product Grid / Pagination (style.css:242-276) === */ /* ========================================================================== Product Grid ホストテーマの本文カラム幅は様々（サイドバー有無・1 カラム）なので、専用テーマの 「4 列固定・サムネイル 226px」ではなく、コンテナ幅から列数を決める （226px 以上で収まるだけ並べる: 1000px で 4 列、サイドバー付きの ~750px で 3 列）。 狭いコンテナでは 2 列に固定する（コンテナクエリ。非対応ブラウザは viewport 幅で代替）。 ========================================================================== */ .iihcart-scope .iihcart-archive { container-type: inline-size; } .iihcart-scope .product-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(226px, 1fr)); column-gap: 30px; row-gap: 40px; } .iihcart-scope .product-grid-item { display: block; text-decoration: none; color: var(--iihcart-color-text); } .iihcart-scope .product-grid-item:hover { text-decoration: none; } .iihcart-scope .product-grid-item .product-thumb { width: 100%; aspect-ratio: 1/1; overflow: hidden; background: var(--iihcart-color-gray-bg); margin-bottom: 10px; } .iihcart-scope .product-grid-item .product-thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .3s ease; } .iihcart-scope .product-grid-item:hover .product-thumb img { transform: scale(1.05); } .iihcart-scope .product-grid-item .product-name { font-size: 16px; margin-bottom: 4px; color: #444; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; word-break: break-all; } .iihcart-scope .product-grid-item .product-price { font-size: 16px; color: #444; } .iihcart-scope .product-grid-item .product-category-link { font-size: 14px; color: #ccb88f; } .iihcart-scope .iihcart-archive-empty { margin: 24px 0; } @media(max-width:768px) { .iihcart-scope .product-grid { grid-template-columns: repeat(2,1fr); column-gap: 16px; row-gap: 32px; } } @container (max-width: 560px) { .iihcart-scope .product-grid { grid-template-columns: repeat(2,1fr); column-gap: 16px; row-gap: 32px; } } /* Pagination */ .iihcart-scope .iihcart-pagination { display: flex; justify-content: center; gap: 12px; margin: 40px 0; } .iihcart-scope .iihcart-pagination a,.iihcart-scope .iihcart-pagination span { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; background: var(--iihcart-color-heading-bg); border: none; border-radius: 0; font-size: 14px; color: #888; text-decoration: none; } .iihcart-scope .iihcart-pagination a:hover { background: color-mix(in srgb, var(--iihcart-color-heading-bg), #000 5%); } .iihcart-scope .iihcart-pagination .current { background: #fff; color: var(--iihcart-color-primary); border: 1px solid var(--iihcart-color-primary); font-weight: normal; } .iihcart-scope .iihcart-pagination .disabled { background: #f2f2f2; color: #888; cursor: default; } .iihcart-scope .nav-links { display: flex; gap: 12px; justify-content: center; } .iihcart-scope .nav-links a,.iihcart-scope .nav-links span { display: flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 12px; background: var(--iihcart-color-heading-bg); border: none; border-radius: 0; font-size: 14px; color: #888; text-decoration: none; } .iihcart-scope .nav-links .current { background: #fff; color: var(--iihcart-color-primary); border: 1px solid var(--iihcart-color-primary); font-weight: 600; } @media(max-width:1024px) { .iihcart-scope .iihcart-pagination { gap: 8px; } .iihcart-scope .iihcart-pagination a,.iihcart-scope .iihcart-pagination span { min-width: 36px; height: 36px; padding: 0 8px; } .iihcart-scope .nav-links { gap: 8px; } .iihcart-scope .nav-links a,.iihcart-scope .nav-links span { min-width: 36px; height: 36px; padding: 0 8px; } } /* === Single Product / Shopping Guide / SP Fixed Bar (style.css:278-336) === */ /* ========================================================================== Single Product ========================================================================== */ .iihcart-scope .product-display { display: grid; grid-template-columns: 640px 1fr; gap: 40px; margin-bottom: 40px; } .iihcart-scope .image-gallery .main-image { width: 640px; height: 480px; overflow: hidden; background: var(--iihcart-color-gray-bg); margin-bottom: 16px; } .iihcart-scope .image-gallery .main-image img { width: 100%; height: 100%; object-fit: cover; } .iihcart-scope .image-gallery .thumbnails { display: flex; gap: 8px; } .iihcart-scope .image-gallery .thumbnails img { width: 65px; height: 65px; object-fit: cover; cursor: pointer; border: 2px solid transparent; } .iihcart-scope .image-gallery .thumbnails img:hover { border-color: var(--iihcart-color-primary); } .iihcart-scope .product-info .product-name { font-size: 24px; font-weight: normal; margin-bottom: 8px; } .iihcart-scope .product-info .product-internal-capacity { font-size: 14px; color: var(--iihcart-color-text); margin-bottom: 16px; } .iihcart-scope .product-info .product-stock-status { font-size: 16px; margin-top: 36px; margin-bottom: 16px; } .iihcart-scope .product-info .price-and-quantity { display: flex; align-items: center; gap: 24px; margin-bottom: 16px; } .iihcart-scope .product-info .quantity { display: flex; align-items: center; gap: 8px; } .iihcart-scope .product-info .quantity select { width: auto; min-width: 60px; } .iihcart-scope .product-info .price { font-size: 24px; font-weight: normal; } .iihcart-scope .product-info .price .tax-included { font-size: 14px; font-weight: normal; color: var(--iihcart-color-text-light); } .iihcart-scope .product-info .btn-iihcart { display: block; width: 100%; max-width: 320px; margin-top: 32px; } @media(max-width:1024px) { .iihcart-scope .product-display { grid-template-columns: 1fr; gap: 24px; } .iihcart-scope .image-gallery .main-image { width: 100%; height: auto; aspect-ratio: 4/3; } .iihcart-scope .image-gallery .thumbnails { flex-wrap: wrap; } .iihcart-scope .product-info { margin-top: 16px; } .iihcart-scope .product-info .product-name { font-size: 22px; } .iihcart-scope .product-info .product-internal-capacity { font-size: 11px; } .iihcart-scope .product-info .product-stock-status { font-size: 12px; } .iihcart-scope .product-info .quantity { font-size: 14px; } .iihcart-scope .product-info .price { font-size: 24px; margin-left: auto; } .iihcart-scope .product-info .price .tax-included { font-size: 14px; } .iihcart-scope .product-info .btn-iihcart { max-width: 100%; } /* 抽出元の `.single-iihcart .entry-content { margin-top: 40px }` は削除。 .entry-content はスコープの外側の祖先（ホストテーマ側）なので .iihcart-scope 配下のセレクタでは一致しない。同じ 40px の隔たりは `.product-display { margin-bottom: 40px }`（全幅適用）で確保されている。 */ } /* Shopping guide */ .iihcart-scope .shopping-guide-container { background: #f2f2f2; margin: 40px 0; padding: 24px 32px; } .iihcart-scope .shopping-guide-title { font-size: 24px; font-weight: normal; padding-bottom: 16px; border-bottom: 1px solid var(--iihcart-color-gray-border); margin-left: -32px; margin-right: -32px; padding-left: 32px; padding-right: 32px; } .iihcart-scope .shopping-guide-section { border-bottom: 1px solid var(--iihcart-color-gray-border); margin-left: -32px; margin-right: -32px; padding-left: 32px; padding-right: 32px; } .iihcart-scope .shopping-guide-section:last-child { border-bottom: none; } .iihcart-scope .shopping-guide-toggle { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 14px 0; background: none; border: none; font-size: 16px; font-family: inherit; color: var(--iihcart-color-text); cursor: pointer; text-align: left; } .iihcart-scope .shopping-guide-toggle:hover { opacity: 0.7; } .iihcart-scope .shopping-guide-toggle .toggle-sign { font-size: 18px; color: var(--iihcart-color-text-light); } .iihcart-scope .shopping-guide-content { padding: 0 0 16px; font-size: 16px; line-height: 1.8; } @media(max-width:768px) { .iihcart-scope .shopping-guide-container { padding: 20px; margin: 32px 0; } .iihcart-scope .shopping-guide-title { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; } .iihcart-scope .shopping-guide-section { margin-left: -20px; margin-right: -20px; padding-left: 20px; padding-right: 20px; } } /* SP Fixed bar */ .iihcart-scope .btn-fixed-bottom { display: none; } @media(max-width:1024px) { .iihcart-scope .btn-fixed-bottom { display: block; position: fixed; bottom: 0; left: 0; width: 100%; background: #fff; border-top: 1px solid var(--iihcart-color-gray-light); z-index: 900; padding: 12px 20px; } .iihcart-scope .btn-fixed-content { display: flex; align-items: center; justify-content: space-between; gap: 16px; } .iihcart-scope .btn-fixed-content .product-title-size-wrapper { display: none; } .iihcart-scope .btn-fixed-content .price-wrapper { font-size: 20px; font-weight: normal; flex: 1; } .iihcart-scope .btn-fixed-content .fixed-product-tax-included { font-size: 12px; font-weight: normal; color: var(--iihcart-color-text-light); } .iihcart-scope .fixed-btn-iihcart { background: var(--iihcart-color-button); color: var(--iihcart-color-button-text); border: none; border-radius: var(--iihcart-border-radius-btn); padding: 14px 32px; font-size: 14px; font-weight: normal; cursor: pointer; font-family: inherit; white-space: nowrap; } body.iihcart-has-fixed-bar { padding-bottom: 70px; } } /* === Business Calendar (style.css:394-403) === */ /* 営業日カレンダー */ .iihcart-scope .iihcart-cal-wrapper { display: flex; gap: 20px; flex-wrap: nowrap; } .iihcart-scope .iihcart-cal-month { flex: 1 1 0; min-width: 0; } .iihcart-scope .iihcart-cal-title { font-size: 16px; margin-bottom: 6px; } .iihcart-scope .iihcart-cal-table { border-collapse: collapse; width: 100%; } .iihcart-scope .iihcart-cal-table th { background: #b3a57d; color: #fff; padding: 0; text-align: center; font-size: 16px; font-weight: 600; border: 1px solid #d4d2cd; aspect-ratio: 1/1; vertical-align: middle; } .iihcart-scope .iihcart-cal-table td { padding: 0; text-align: center; font-size: 16px; background: #fff; border: 1px solid #d4d2cd; aspect-ratio: 1/1; vertical-align: middle; } .iihcart-scope .iihcart-cal-table td.holiday { background: #fad4d4; } .iihcart-scope .iihcart-cal-legend { display: flex; align-items: center; gap: 8px; margin-top: 12px; font-size: 14px; color: var(--iihcart-color-text-light); } .iihcart-scope .iihcart-cal-legend-color { display: inline-block; width: 16px; height: 16px; background: #fad4d4; border-radius: 2px; } /* === Auth Pages (style.css:463-599) === */ /* ========================================================================== Auth Pages (Login / Registration) ========================================================================== */ .iihcart-scope .iihcart-auth-page-title { font-size: 24px; font-weight: normal; text-align: center; padding: 30px 0 24px; } /* 見出しがコンテンツ先頭に来るときは上余白を落とす。抽出元の `.entry-content > ...` は .entry-content がスコープの外側の祖先のため一致せず、 スコープラッパー（Active_Theme::wrap）の直下を見るセレクタに置き換えた。 */ .iihcart-scope > .iihcart-auth-page-title:first-child { padding-top: 0; } .iihcart-scope .iihcart-auth-page-title.custom-margin-top { margin-top: 20px; padding-bottom: 12px; } .iihcart-scope .iihcart-auth-form { max-width: var(--iihcart-container-width); margin: 0 auto; } .iihcart-scope .iihcart-auth-form-divider { border-top: 1px solid #ddd; } .iihcart-scope .iihcart-user-registration-header-message { margin-bottom: 24px; } .iihcart-scope .iihcart-auth-form .iihcart-auth-form-group { padding-left: 360px; } .iihcart-scope .iihcart-form-group { display: flex; align-items: center; padding: 20px 0; gap: 20px; } .iihcart-scope .iihcart-form-group .fixed-length-label { min-width: 190px; flex-shrink: 0; } .iihcart-scope .iihcart-auth-form .iihcart-form-group { padding-left: 20px; } .iihcart-scope .iihcart-auth-form .iihcart-form-group > .fixed-length-label { min-width: 320px; } .iihcart-scope .iihcart-auth-form .iihcart-form-group .input-textbox { max-width: 400px; } .iihcart-scope .iihcart-form-group .input-fields { flex: 1; display: flex; flex-wrap: wrap; gap: 8px; } .iihcart-scope .iihcart-form-group .input-wrapper { flex: 1; } .iihcart-scope .iihcart-form-group .input-textbox { width: 100%; max-width: 300px; padding: 10px 12px; border: 1px solid var(--iihcart-color-gray-border); border-radius: 0; font-size: 16px; font-family: inherit; color: var(--iihcart-color-text); } .iihcart-scope .iihcart-form-group .input-textbox:focus { border-color: var(--iihcart-color-primary); outline: none; } .iihcart-scope .iihcart-form-group .input-textbox.input-wide { max-width: 400px; } .iihcart-scope #password,.iihcart-scope #password-for-confirmation { max-width: 340px; } .iihcart-scope .iihcart-auth-form-group { padding-bottom: 10px; padding-left: 210px; } .iihcart-scope .iihcart-auth-password-reset-link { color: var(--iihcart-color-link); font-size: 14px; text-decoration: underline; } .iihcart-scope .password-reset-link { margin-top: 8px; margin-bottom: -8px; } .iihcart-scope .password-reset-link a { color: var(--iihcart-color-link); font-size: 14px; text-decoration: underline; } .iihcart-scope #login_form .iihcart-form-group .input-textbox.input-wide { max-width: 400px; width: 100%; } .iihcart-scope #login_form .iihcart-form-group:has(.iihcart-block-label) { display: grid; grid-template-columns: 324px 1fr; align-items: center; } .iihcart-scope #login_form .iihcart-block-label { min-width: auto; width: fit-content; } @media(max-width:1024px) { .iihcart-scope #login_form .iihcart-form-group:has(.iihcart-block-label) { display: flex; flex-direction: column; align-items: flex-start; } .iihcart-scope #login_form .iihcart-form-group .input-textbox.input-wide { max-width: 100%; } .iihcart-scope #login_form .iihcart-form-group .input-wrapper, .iihcart-scope #login_form .iihcart-form-group .input-fields { width: 100%; } .iihcart-scope .password-reset-link { text-align: right; } } .iihcart-scope .iihcart-auth-center-content { text-align: center; padding: 20px 0; } .iihcart-scope .iihcart-auth-center-content .btn-iihcart { min-width: 280px; } .iihcart-scope .iihcart-auth-login-space { padding-top: 40px; } .iihcart-scope .iihcart-auth-remember-login { display: flex; align-items: center; justify-content: center; gap: 6px; margin-top: 16px; font-size: 13px; flex-wrap: wrap; } .iihcart-scope .iihcart-auth-remember-login .iihcart-auth-notice { width: 100%; text-align: center; margin-top: 0; } .iihcart-scope .iihcart-auth-space { height: 0; } .iihcart-scope .iihcart-auth-form-message { max-width: var(--iihcart-container-width); margin: 0 auto; text-align: center; padding-bottom: 20px; } .iihcart-scope .iihcart-button-spacing { padding-top: 8px; } .iihcart-scope .iihcart-button-light { background: #fff !important; color: var(--iihcart-color-text) !important; border: 1px solid var(--iihcart-color-gray-border) !important; } .iihcart-scope .iihcart-button-light:hover { background: var(--iihcart-color-gray-bg) !important; } @media(max-width:1024px) { .iihcart-scope .iihcart-auth-page-title { font-size: 20px; padding: 20px 0 16px; } .iihcart-scope .iihcart-auth-form { } .iihcart-scope .iihcart-form-group { flex-wrap: wrap; align-items: center; gap: 8px; padding: 16px 0; width: 100%; } .iihcart-scope .iihcart-form-group label:has(.iihcart-radio-option) { width: 100%; margin-right: 0; } .iihcart-scope .iihcart-form-group .iihcart-block-label { min-width: auto; } .iihcart-scope .iihcart-form-group .input-fields { width: 100%; flex-basis: 100%; flex-direction: column; } .iihcart-scope .iihcart-form-group .input-fields.expiration-date-fields { flex-direction: row; flex-wrap: nowrap; align-items: center; } .iihcart-scope .expiration-date-fields select { width: auto; max-width: none; } .iihcart-scope .iihcart-form-group .checkbox-and-error-wrapper { width: 100%; flex-basis: 100%; } .iihcart-scope .iihcart-form-group .input-textbox { max-width: 100%; width: 100%; display: block; } .iihcart-scope .iihcart-form-group .input-textbox.input-medium, .iihcart-scope .iihcart-form-group .input-textbox.input-narrow, .iihcart-scope .iihcart-form-group .input-textbox.input-wide { max-width: 100%; width: 100%; } .iihcart-scope .iihcart-auth-form .iihcart-form-group { padding-left: 0; } .iihcart-scope .iihcart-auth-form .iihcart-form-group .input-textbox { max-width: 100%; } .iihcart-scope #user_registration_form .iihcart-form-group .input-textbox, .iihcart-scope #user_registration_form .iihcart-form-group .input-textbox.input-medium, .iihcart-scope #user_registration_form .iihcart-form-group .input-textbox.input-narrow, .iihcart-scope #user_registration_form .iihcart-form-group .input-textbox.input-wide { max-width: 100%; width: 100%; } .iihcart-scope #user_registration_form .iihcart-form-group select.input-narrow { max-width: 100%; width: 100%; } .iihcart-scope .iihcart-auth-form .iihcart-form-group > .fixed-length-label { padding-left: 0; min-width: auto; } .iihcart-scope .iihcart-auth-form .iihcart-auth-form-group { padding-left: 0; } .iihcart-scope #password,.iihcart-scope #password-for-confirmation { max-width: 100%; width: 100%; } .iihcart-scope .iihcart-auth-form-group { padding-left: 0; text-align: right; } .iihcart-scope .iihcart-auth-form-divider { display: none; } .iihcart-scope #mypage_user_update_form .divider { display: none; } .iihcart-scope .iihcart-auth-form-message { text-align: left; } .iihcart-scope .iihcart-auth-remember-login { justify-content: flex-start; } .iihcart-scope .iihcart-auth-remember-login .iihcart-auth-notice { text-align: left; } .iihcart-scope #iihcart_user_login_form .iihcart-auth-remember-login { justify-content: center; } .iihcart-scope #iihcart_user_login_form .iihcart-auth-remember-login .iihcart-auth-notice { text-align: center; } .iihcart-scope .iihcart-auth-center-content .btn-iihcart { min-width: 200px; width: 100%; } .iihcart-scope .iihcart-button-large { width: 100%; min-width: auto !important; } .iihcart-scope .iihcart-action-buttons { width: 100%; } .iihcart-scope .iihcart-action-button-container { width: 100%; } .iihcart-scope .iihcart-action-button-container .btn-iihcart { min-width: 200px; width: 100%; } .iihcart-scope .iihcart-action-button-container-alt .btn-iihcart { width: 100%; min-width: auto; } .iihcart-scope #delivery_form textarea { max-width: 100%; } .iihcart-scope #delivery_form select.input-medium-fixed { max-width: 100%; width: 100%; } .iihcart-scope .iihcart-required-field-missing { display: none; } .iihcart-scope #shipping-address-fields { background: #f2f2f2; padding: 12px 16px; } .iihcart-scope #shipping-address-fields .iihcart-form-group { border-bottom: none; padding: 0; gap: 0; } .iihcart-scope #shipping-address-fields .iihcart-block-label { margin: 0; padding: 8px 0 0; width: 100%; min-width: auto; background: transparent; border-bottom: none; margin-bottom: 0; font-size: 14px; font-weight: 700; } .iihcart-scope #shipping-address-fields .input-fields { padding: 4px 0 8px; } .iihcart-scope .zeus-radio-buttons-container { flex-direction: column; gap: 4px; } .iihcart-scope #iih_zeus_token_card_info_area { padding: 0; } .iihcart-scope #iih_zeus_token_card_info_area .zeus-radio-buttons-container { align-items: flex-start; margin-bottom: 12px; gap: 8px; } .iihcart-scope #zeus_registerd_card_area, .iihcart-scope #iih_zeus_registerd_card_area_extra_payment_times, .iihcart-scope #iih_zeus_new_card_area_extra_bland, .iihcart-scope #zeus_new_card_area, .iihcart-scope #iih_zeus_new_card_area_extra_payment_times { border-top: none; background: #f2f2f2; padding: 4px 16px; } .iihcart-scope #zeus_registerd_card_area, .iihcart-scope #iih_zeus_new_card_area_extra_bland { padding-top: 12px; } .iihcart-scope #zeus_registerd_card_area:last-child, .iihcart-scope #iih_zeus_registerd_card_area_extra_payment_times, .iihcart-scope #zeus_new_card_area:last-child, .iihcart-scope #iih_zeus_new_card_area_extra_payment_times { padding-bottom: 24px; } .iihcart-scope #mypage-card-register-form #zeus_new_card_area { padding-bottom: 24px; } .iihcart-scope .credit-card-info { text-align: left; } .iihcart-scope #iihcart-credit-card-payment-method-wrap { padding-left: 0; } .iihcart-scope #mypage-card-register-form { padding-left: 0; } .iihcart-scope #mypage-card-register-form .pagination-buttons, .iihcart-scope #mypage-card-register-form .iihcart-order-details-footer-container { margin-left: 0; } .iihcart-scope #zeus_registerd_card_area .iihcart-form-group, .iihcart-scope #zeus_new_card_area .iihcart-form-group, .iihcart-scope #iih_zeus_new_card_area_extra_bland .iihcart-form-group, .iihcart-scope #iih_zeus_registerd_card_area_extra_payment_times .iihcart-form-group, .iihcart-scope #iih_zeus_new_card_area_extra_payment_times .iihcart-form-group { flex-direction: column; align-items: flex-start; border: none; padding: 0; gap: 0; } .iihcart-scope #zeus_registerd_card_area .iihcart-block-label, .iihcart-scope #zeus_new_card_area .iihcart-block-label, .iihcart-scope #iih_zeus_new_card_area_extra_bland .iihcart-block-label, .iihcart-scope #iih_zeus_registerd_card_area_extra_payment_times .iihcart-block-label, .iihcart-scope #iih_zeus_new_card_area_extra_payment_times .iihcart-block-label { margin: 0; width: auto; min-width: auto; padding: 0; border: none; margin-bottom: 0; background: transparent; font-weight: 700; font-size: 14px; padding-top: 12px; text-align: left; } .iihcart-scope #zeus_registerd_card_area .input-fields, .iihcart-scope #zeus_new_card_area .input-fields, .iihcart-scope #iih_zeus_new_card_area_extra_bland .input-fields, .iihcart-scope #iih_zeus_registerd_card_area_extra_payment_times .input-fields, .iihcart-scope #iih_zeus_new_card_area_extra_payment_times .input-fields { padding: 4px 0 0 0; align-items: flex-start; justify-content: flex-start; } .iihcart-scope #zeus_registerd_card_area .input-text, .iihcart-scope #zeus_new_card_area .input-text { text-align: left; } .iihcart-scope #zeus_new_card_area .input-fields.expiration-date-fields { align-items: center; } .iihcart-scope #zeus_new_card_area input[type="tel"], .iihcart-scope #zeus_new_card_area input[type="text"], .iihcart-scope #iihcart-card-brand-select, .iihcart-scope #zeus_token_card_number, .iihcart-scope #zeus_token_card_cvv, .iihcart-scope #zeus_token_card_cvv_for_registerd_card, .iihcart-scope .iihcart-select-label, .iihcart-scope .iihcart-select-label-first { width: 100%; max-width: 100%; } } /* === Mypage / Cart Flow (style.css:601-1143) === */ /* ========================================================================== Mypage ========================================================================== */ /* User Info Box */ .iihcart-scope .iihcart-user-info-container { background: #f2f2f2; padding: 32px; margin-bottom: 32px; } .iihcart-scope .iihcart-user-name { font-size: 16px; margin-bottom: 4px; } .iihcart-scope .iihcart-name-bold { font-weight: 700; font-size: 20px; } .iihcart-scope .iihcart-user-logout { font-size: 12px; color: #444; margin-left: 8px; } .iihcart-scope .iihcart-user-email { font-size: 16px; color: var(--iihcart-color-text); margin-bottom: 8px; } .iihcart-scope .iihcart-user-info { display: flex; gap: 20px; font-size: 14px; color: var(--iihcart-color-text-light); } .iihcart-scope .mobile-hide { display: block; } /* Section Headings */ .iihcart-scope .iihcart-form-heading { background: var(--iihcart-color-heading-bg); padding: 16px 16px; font-size: 16px; font-weight: normal; margin-top: 40px; margin-bottom: 16px; } .iihcart-scope .iihcart-order-info-heading { font-size: 14px; font-weight: 600; margin-top: 24px; margin-bottom: 8px; padding-left: 16px; } .iihcart-scope .iihcart-order-info-heading.margin-top-3 { margin-top: 32px; } .iihcart-scope .iihcart-form-detail-instruction { font-size: 14px; color: var(--iihcart-color-text); margin-bottom: 16px; padding-left: 16px; } /* Purchase History Table */ .iihcart-scope .iihcart-order-history-header { display: flex; max-width: 100%; margin: 0 0 0 20px; background: #f2f4f5; padding: 12px 0; } .iihcart-scope .iihcart-order-date-header { font-size: 14px; color: #111; width: 180px; text-align: center; flex: 0 0 auto; margin-right: 16px; } .iihcart-scope .iihcart-order-number-header { font-size: 14px; color: #111; width: 180px; text-align: center; margin-right: auto; } .iihcart-scope .iihcart-order-total-header { font-size: 14px; color: #111; flex: 0 0 auto; white-space: nowrap; text-align: right; padding: 0 48px 0 0; } .iihcart-scope .iihcart-order-history-border { display: none; border-bottom: 1px solid #ddd; } /* Order history rows (dynamically loaded) */ .iihcart-scope .iihcart-order-history-item { display: flex; max-width: 100%; margin: 0; border-bottom: 1px solid #ddd; padding: 16px 0 16px 20px; } .iihcart-scope .iihcart-order-history-item > div { font-size: 16px; } .iihcart-scope .iihcart-order-date { font-size: 16px; color: #111; width: 180px; text-align: center; flex: 0 0 auto; margin-right: 16px; } .iihcart-scope .iihcart-order-number { font-size: 16px; color: var(--iihcart-color-text-light); width: 280px; text-align: left; margin-right: auto; } .iihcart-scope .iihcart-order-number a { color: #248cb3; text-decoration: underline; } .iihcart-scope .iihcart-order-number a:hover { color: #60a6bf; } .iihcart-scope .iihcart-order-history-item a { color: var(--iihcart-color-link); text-decoration: underline; } .iihcart-scope .iihcart-order-history-item a:hover { opacity: 0.7; } .iihcart-scope .iihcart-order-total { font-size: 16px; color: #111; flex: 0 0 auto; white-space: nowrap; text-align: right; padding: 0 24px 0 0; } .iihcart-scope .iihcart-order-history-for-wide { display: block; } .iihcart-scope .iihcart-order-history-for-narrow { display: none; } .iihcart-scope .iihcart-order-history-table { } .iihcart-scope .iihcart-order-detail { display: flex; justify-content: space-between; align-items: center; padding: 8px 0; } .iihcart-scope .iihcart-order-label { min-width: 150px; font-size: 14px; } .iihcart-scope .iihcart-order-value { word-break: break-all; white-space: normal; font-size: 14px; } .iihcart-scope .iihcart-order-value a { color: #248cb3; text-decoration: underline; } .iihcart-scope .iihcart-order-value a:hover { color: #60a6bf; } /* Pagination */ .iihcart-scope .pagination-buttons { display: flex; justify-content: center; gap: 20px; padding: 24px 0; } .iihcart-scope .btn-previous-page,.iihcart-scope .btn-next-page { display: none; position: relative; background: #fff; border: 1px solid var(--iihcart-color-text); border-radius: 0; padding: 10px 20px; font-size: 13px; cursor: pointer; font-family: inherit; color: var(--iihcart-color-text); width: 160px; text-align: center; } .iihcart-scope .btn-previous-page svg,.iihcart-scope .btn-next-page svg { position: absolute; top: 50%; transform: translateY(-50%); } .iihcart-scope .btn-previous-page svg { left: 12px; } .iihcart-scope .btn-next-page svg { right: 12px; } .iihcart-scope .btn-previous-page:hover,.iihcart-scope .btn-next-page:hover { background: var(--iihcart-color-gray-bg); } .iihcart-scope .btn-previous-page:disabled,.iihcart-scope .btn-next-page:disabled { opacity: .4; cursor: not-allowed; border-color: var(--iihcart-color-gray-border); } .iihcart-scope [type=button].btn-disabled,.iihcart-scope [type=reset].btn-disabled,.iihcart-scope [type=submit].btn-disabled,.iihcart-scope button.btn-disabled { cursor: not-allowed; background: #e3e5e5; color: #888; border-color: #e3e5e5; } .iihcart-scope .button-spacing { padding-top: 32px; } /* Dividers */ .iihcart-scope .divider { border-top: 1px solid #eee; } /* Form Groups on Mypage */ .iihcart-scope .iihcart-form-group .iihcart-block-label { display: flex; align-items: center; gap: 8px; min-width: 190px; font-size: 16px; flex-shrink: 0; } .iihcart-scope .iihcart-form-group.custom-margin { } .iihcart-scope .iihcart-label-area { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .iihcart-scope #register_form .iihcart-label-area { min-width: 324px; justify-content: space-between; } .iihcart-scope #user_registration_form .iihcart-label-area { min-width: 324px; justify-content: space-between; } .iihcart-scope #user_registration_confirmation_form .iihcart-block-label { min-width: 324px; } .iihcart-scope #user_registration_confirmation_form label { cursor: default; } .iihcart-scope .iihcart-confirmation-value { font-size: 16px; } @media(max-width:1024px) { .iihcart-scope #register_form .iihcart-label-area { min-width: auto; } .iihcart-scope #user_registration_form .iihcart-label-area { min-width: auto; } .iihcart-scope #user_registration_confirmation_form .iihcart-block-label { min-width: auto; font-size: 13px; } .iihcart-scope #user_registration_confirmation_form .iihcart-confirmation-value { width: 100%; flex-basis: 100%; } .iihcart-scope #user_registration_confirmation_form .iihcart-form-group { gap: 4px; } } .iihcart-scope #register_form .iihcart-block-label { min-width: auto; } .iihcart-scope #user_registration_form .iihcart-block-label { min-width: auto; } .iihcart-scope #mypage_user_update_form .iihcart-block-label { min-width: 324px; justify-content: space-between; } @media(max-width:1024px) { .iihcart-scope #mypage_user_update_form .iihcart-block-label { min-width: auto; } } @media(min-width:1025px) { .iihcart-scope #user_registration_form .iihcart-form-group .input-textbox { max-width: 300px; } .iihcart-scope #user_registration_form .iihcart-form-group .input-textbox.input-wide { max-width: 400px; } .iihcart-scope #user_registration_form .iihcart-form-group .input-textbox.input-medium { max-width: 240px; } .iihcart-scope #user_registration_form .iihcart-form-group .input-textbox.input-narrow { max-width: 200px; } .iihcart-scope #user_registration_form .iihcart-form-group select.input-narrow { max-width: 200px; width: 200px; } .iihcart-scope #mypage_user_update_form .iihcart-form-group .input-textbox { max-width: 300px; } .iihcart-scope #mypage_user_update_form .iihcart-form-group .input-textbox.input-wide { max-width: 400px; } .iihcart-scope #mypage_user_update_form .iihcart-form-group .input-textbox.input-medium { max-width: 240px; } .iihcart-scope #mypage_user_update_form .iihcart-form-group .input-textbox.input-narrow { max-width: 200px; } .iihcart-scope #mypage_user_update_form .iihcart-form-group select.input-narrow { max-width: 200px; width: 200px; } } .iihcart-scope .iihcart-required-container { display: inline-flex; align-items: center; } .iihcart-scope .iihcart-required-field { background: var(--iihcart-color-error); color: #fff; font-size: 10px; padding: 2px 6px; border-radius: 2px; font-weight: normal; } .iihcart-scope .input-textbox.input-medium { max-width: 240px; } .iihcart-scope .input-textbox.input-narrow { max-width: 200px; } .iihcart-scope select.input-narrow { max-width: 200px; width: 200px; } @media(max-width:1024px) { .iihcart-scope select.input-narrow { max-width: 100%; width: 100%; } } .iihcart-scope .input-text { font-size: 16px; padding: 10px 0; } .iihcart-scope .iihcart-radio-option { margin-right: 4px; } .iihcart-scope .iihcart-form-group label:has(.iihcart-radio-option) { margin-right: 12px; } .iihcart-scope .iihcart-form-group label { font-size: 16px; cursor: pointer; } /* Checkbox & Agreement */ .iihcart-scope .checkbox-and-error-wrapper { flex: 1; } .iihcart-scope .checkbox-wrapper { display: flex; align-items: flex-start; gap: 8px; } .iihcart-scope .iihcart-checkbox-option { width: 18px; height: 18px; accent-color: #248cb3; cursor: pointer; flex-shrink: 0; margin-top: 4px; } .iihcart-scope .iihcart-checkbox-label { font-size: 16px; cursor: pointer; } .iihcart-scope .iihcart-form-group label.error { display: block; width: 100%; flex-basis: 100%; color: var(--iihcart-color-error); font-size: 13px; margin-top: 4px; cursor: default; } .iihcart-scope .iihcart-form-group-note { font-size: 14px; } .iihcart-scope .iihcart-auth-notice { font-size: 12px; color: var(--iihcart-color-text-light); margin-top: 8px; } .iihcart-scope .iihcart-checkbox-label a { color: var(--iihcart-color-link); text-decoration: underline; } .iihcart-scope .iihcart-checkbox-label a:hover { opacity: 0.7; } /* Modal */ .iihcart-scope .iihcart-modal { display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 9999; justify-content: center; align-items: center; } .iihcart-scope .iihcart-modal::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0,0,0,0.5); } .iihcart-scope .iihcart-modal-dialog { position: relative; width: 90%; max-width: 640px; max-height: 90vh; z-index: 1; } .iihcart-scope .iihcart-modal-content { background: #fff; display: flex; flex-direction: column; max-height: 90vh; } .iihcart-scope .iihcart-modal-header { display: flex; justify-content: space-between; align-items: center; padding: 0 20px; background: #e6e6e6; flex-shrink: 0; } .iihcart-scope .iihcart-modal-title { font-size: 12px; font-weight: normal; color: var(--iihcart-color-text-light); line-height: 1; } .iihcart-scope .iihcart-modal-close-button { background: none; border: none; font-size: 24px; cursor: pointer; color: var(--iihcart-color-text-light); padding: 0; line-height: 1; } .iihcart-scope .iihcart-modal-close-button:hover { color: var(--iihcart-color-text); } .iihcart-scope .iihcart-modal-body { padding: 24px; overflow-y: auto; } .iihcart-scope .privacy-policy-title { font-size: 18px; font-weight: normal; margin-bottom: 12px; color: #444; } .iihcart-scope .terms-of-use-title { font-size: 18px; font-weight: normal; margin-bottom: 12px; color: #444; } .iihcart-scope .pre-registration-notice { font-size: 14px; color: #444; margin-bottom: 20px; } .iihcart-scope .iihcart-modal-content-box { border: 1px solid #ccc; padding: 16px; max-height: 400px; overflow-y: auto; font-size: 14px; line-height: 1.8; color: #444; } .iihcart-scope .iihcart-modal-content-box p:first-child { margin-top: 0; } .iihcart-scope .iihcart-modal-content-box p:last-child { margin-bottom: 0; } @media(max-width:768px) { .iihcart-scope .iihcart-modal-dialog { width: 94%; } .iihcart-scope .iihcart-modal-body { padding: 20px; } .iihcart-scope .privacy-policy-title,.iihcart-scope .terms-of-use-title { font-size: 16px; } .iihcart-scope .iihcart-modal-content-box { padding: 16px; max-height: 50vh; } } /* Card Info Display */ .iihcart-scope .iih-form-info-wide { margin: 8px 0; padding-left: 16px; } .iihcart-scope .iih_form_info_area { overflow: hidden; } .iihcart-scope .iih_form_info_area .iihcart-form-group { padding: 0; border-bottom: 1px solid #ccc; margin: 0; align-items: stretch; gap: 0; } .iihcart-scope .iih_form_info_area .iihcart-block-label { background: #f2f2f2; min-width: 160px; padding: 16px; font-size: 13px; display: flex; align-items: center; border-bottom: 1px solid #fff; margin-bottom: -1px; cursor: default; } .iihcart-scope .iih_form_info_area .iihcart-form-group:last-child .iihcart-block-label { border-bottom: none; margin-bottom: 0; } .iihcart-scope .iih_form_info_area .input-fields { padding: 16px; } .iihcart-scope .iih_form_info_area .input-text { padding: 0; } .iihcart-scope .iih-form-info-wide.padding-top-0 { padding-top: 0; } @media(max-width:1024px) { .iihcart-scope .iih_form_info_area { background: #f2f2f2; padding: 16px 20px; } .iihcart-scope .iih-form-info-wide { padding-left: 0; } .iihcart-scope .iih_form_info_area .iihcart-form-group { flex-direction: column; align-items: flex-start; border-bottom: none; padding: 16px 0; gap: 4px; } .iihcart-scope .iih_form_info_area .iihcart-block-label { background: transparent; min-width: auto; padding: 0; margin: 0; border-bottom: none; font-weight: 700; font-size: 14px; } .iihcart-scope .iih_form_info_area .input-fields { padding: 0; } .iihcart-scope .iih_form_info_area .input-text { font-size: 16px; } } /* Misc Buttons */ .iihcart-scope .iihcart-button-unsubscribe { background: #fadcde !important; color: #e60012 !important; } .iihcart-scope .iihcart-button-unsubscribe:hover { background: #f5c0c4 !important; color: #e60012 !important; } /* Padded Content */ .iihcart-scope .padded-content { padding-left: var(--iihcart-padded-content-padding); padding-right: var(--iihcart-padded-content-padding); } .iihcart-scope .iihcart-action-button-container-alt { display: flex; flex-direction: column; align-items: center; gap: 20px; padding: 8px 0; width: 100%; } @media(min-width:769px) { .iihcart-scope .iihcart-action-button-container-alt .btn-iihcart, .iihcart-scope .iihcart-action-button-container-alt input[type="submit"].btn-iihcart { width: 280px; min-width: 280px; } } .iihcart-scope .cart-content-margin { margin-top: 8px; } .iihcart-scope .credit-card-info { font-size: 16px; font-weight: 700; margin-bottom: 16px; } /* Cart Page */ .iihcart-scope .cart-page-title { font-size: 24px; font-weight: normal; margin-top: 0; margin-bottom: 24px; } .iihcart-scope .shipping-message { color: #e60012; font-size: 14px; margin: 0 0 24px 0; } .iihcart-scope .iihcart-blank-message { font-size: 16px; padding: 32px; background: var(--iihcart-color-gray-bg); text-align: center; line-height: 1.8; } .iihcart-scope #iihcart-cart-error-message:empty { display: none; } .iihcart-scope #iihcart-cart-page-header-message { margin-bottom: 16px; color: var(--iihcart-color-text); } /* Negative margins cancel .padded-content's padding so these elements span full width on desktop. On mobile (max-width:768px), .padded-content padding is 0 so these margins are not needed (and not applied). */ @media(min-width:769px) { .iihcart-scope .padded-content > .cart-page-title, .iihcart-scope #iihcart-cart-page-header-message, .iihcart-scope .shipping-message, .iihcart-scope .form-error-message, .iihcart-scope .cart-items-table { margin-left: calc(-1 * var(--iihcart-padded-content-padding)); margin-right: calc(-1 * var(--iihcart-padded-content-padding)); } .iihcart-scope .cart-items-table .cart-page-item > td:first-child { padding-left: 0; } .iihcart-scope .cart-items-table .cart-page-item > td:last-child { padding-right: 0; } } .iihcart-scope #iihcart-cart-page-footer-message { margin-top: 16px; margin-bottom: 40px; color: var(--iihcart-color-text); } .iihcart-scope #iihcart-user-info-page-header-message { margin-bottom: 16px; color: var(--iihcart-color-text); } .iihcart-scope #iihcart-user-info-page-footer-message { margin-top: 24px; color: var(--iihcart-color-text); } .iihcart-scope #iihcart-payment-delivery-page-header-message { margin-bottom: 24px; color: var(--iihcart-color-text); } .iihcart-scope #iihcart-payment-delivery-page-footer-message { margin-top: 24px; margin-bottom: 40px; color: var(--iihcart-color-text); } /* Cart Items Table */ .iihcart-scope .cart-items-table { width: 100%; } .iihcart-scope .cart-page-item > td:first-child { padding-left: 12px; } .iihcart-scope .cart-page-item > td:last-child { padding-right: 12px; } .iihcart-scope .cart-items-table a { color: var(--iihcart-color-text); text-decoration: none; } .iihcart-scope .cart-items-table a:hover { color: var(--iihcart-color-primary); } .iihcart-scope .cart-page-item { display: flex; justify-content: space-between; border-bottom: 1px solid #ddd; padding: 24px 0; } .iihcart-scope .cart-page-item .tax-included { font-size: 12px; color: var(--iihcart-color-text-light); } .iihcart-scope .cart-item-image img { width: 152px; height: 152px; min-width: 152px; object-fit: cover; } .iihcart-scope .cart-item-image { flex-shrink: 0; } .iihcart-scope .cart-item-details { flex-grow: 1; padding: 8px 16px 0 24px; } .iihcart-scope .cart-item-title { font-size: 18px; font-weight: 700; margin-bottom: 12px; } .iihcart-scope .cart-item-price,.iihcart-scope .cart-item-stock { margin: 0 0 4px 0; font-size: 13px; display: block; } .iihcart-scope .cart-item-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; padding: 8px 0 0 0; } .iihcart-scope .cart-item-actions.desktop-actions { display: flex; } .iihcart-scope .cart-item-actions.mobile-actions { display: none; } .iihcart-scope .cart-item-select { } .iihcart-scope .iihcart-quantity { padding: 4px 8px; display: inline-block; } .iihcart-scope .iihcart-amount { white-space: nowrap; font-size: 18px; display: block; } .iihcart-scope .cart-item-bottom { display: flex; justify-content: space-between; align-items: center; width: 100%; } .iihcart-scope .iihcart-remove-from-cart { margin-left: auto; } .iihcart-scope .cart-item-actions .iihcart-remove-from-cart { background: transparent; color: var(--iihcart-color-text-light); border: none; text-decoration: none; padding: 0; cursor: pointer; font-size: 14px; transition: color 0.2s; white-space: nowrap; display: inline-flex; align-items: center; gap: 4px; } .iihcart-scope .cart-item-actions .iihcart-remove-from-cart .remove-icon { display: inline-block; width: 9px; height: 9px; margin-top: 4px; font-size: 0; overflow: hidden; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65.37 65.37' fill='%23888888'%3E%3Cpath d='M36.24,32.68l28.39-28.39c.98-.98.98-2.58,0-3.56-.98-.98-2.57-.98-3.56,0l-28.39,28.39L4.29.74C3.31-.25,1.72-.25.74.74-.25,1.72-.25,3.31.74,4.29l28.39,28.39L.74,61.08c-.98.98-.98,2.58,0,3.56.98.98,2.57.98,3.56,0l28.39-28.39,28.39,28.39c.47.48,1.11.74,1.78.74s1.3-.26,1.78-.74c.98-.98.98-2.58,0-3.56l-28.39-28.39Z'/%3E%3C/svg%3E") no-repeat center / contain; } .iihcart-scope .cart-item-actions .iihcart-remove-from-cart .remove-text { text-decoration: underline; } .iihcart-scope .cart-item-actions .iihcart-remove-from-cart:hover { color: var(--iihcart-color-primary); } .iihcart-scope .cart-item-actions .iihcart-remove-from-cart:hover .remove-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 65.37 65.37' fill='%23b38a12'%3E%3Cpath d='M36.24,32.68l28.39-28.39c.98-.98.98-2.58,0-3.56-.98-.98-2.57-.98-3.56,0l-28.39,28.39L4.29.74C3.31-.25,1.72-.25.74.74-.25,1.72-.25,3.31.74,4.29l28.39,28.39L.74,61.08c-.98.98-.98,2.58,0,3.56.98.98,2.57.98,3.56,0l28.39-28.39,28.39,28.39c.47.48,1.11.74,1.78.74s1.3-.26,1.78-.74c.98-.98.98-2.58,0-3.56l-28.39-28.39Z'/%3E%3C/svg%3E"); } /* Cart Totals */ .iihcart-scope .iihcart-final-amount { font-size: 16px; padding: 24px 0; } .iihcart-scope .iihcart-final-amount span { font-weight: normal; } .iihcart-scope .iihcart-final-amount-item { display: flex; justify-content: flex-end; align-items: center; } .iihcart-scope .iihcart-final-amount-item .label { margin-right: 32px; color: var(--iihcart-color-text); } .iihcart-scope .iihcart-final-amount .amount { font-size: 20px; font-weight: normal; } .iihcart-scope .iihcart-final-amount-item .tax-included { font-size: 14px; color: var(--iihcart-color-text-light); } .iihcart-scope .iihcart-final-amount-separator { border-top: 1px solid #ddd; margin: 8px 0; } /* Confirmation Page - Final Amount Rows */ .iihcart-scope #confirmation .iihcart-final-amount { display: grid; grid-template-columns: 1fr auto; row-gap: 4px; align-items: baseline; } .iihcart-scope #confirmation .iihcart-final-amount-row { display: contents; } .iihcart-scope #confirmation .iihcart-final-amount-row .label { text-align: right; padding-right: 32px; color: var(--iihcart-color-text-light); font-size: 16px; } .iihcart-scope #confirmation .iihcart-final-amount-row .amount-value { white-space: nowrap; font-size: 16px; text-align: right; } .iihcart-scope #confirmation .iihcart-final-amount-row .amount { font-size: 16px; } .iihcart-scope #confirmation .iihcart-final-amount-row .tax-included { color: var(--iihcart-color-text-light); } .iihcart-scope #confirmation .iihcart-final-amount-row.total-payment .label { font-weight: normal; color: var(--iihcart-color-text); padding-top: 16px; } .iihcart-scope #confirmation .iihcart-final-amount-row.total-payment .amount-value { padding-top: 16px; } .iihcart-scope #confirmation .iihcart-final-amount-row.total-payment .amount { font-size: 20px; font-weight: 700; } .iihcart-scope #confirmation .iihcart-final-amount-row.total-payment .tax-included { font-size: 14px; } /* Confirmation Page - Cart Items */ .iihcart-scope #confirmation .cart-item-title { font-weight: normal; } .iihcart-scope #confirmation .cart-page-item .tax-included { font-size: 11px; } /* Confirmation Page - Info Sections */ .iihcart-scope #confirmation { font-size: 16px; } .iihcart-scope #confirmation .iihcart-form-heading { margin-top: 32px; } .iihcart-scope #confirmation .iihcart-form-heading:first-child { margin-top: 0; } .iihcart-scope .margin-bottom-3 { margin-bottom: 12px; } .iihcart-scope .confirm-user-info, .iihcart-scope .confirm-shipping-address-info, .iihcart-scope .confirm-etc-info { padding: 16px; font-size: 16px; line-height: 1.8; } .iihcart-scope .confirm-user-info P, .iihcart-scope .confirm-shipping-address-info P, .iihcart-scope .confirm-etc-info P { margin: 0; padding: 4px 0; } .iihcart-scope .confirm-user-info .label, .iihcart-scope .confirm-etc-info .label { display: inline-block; min-width: 120px; margin-right: 16px; color: var(--iihcart-color-text-light); } /* Confirmation Page - Footer Message */ .iihcart-scope #iihcart-confirm-input-page-header-message { margin-bottom: 24px; color: var(--iihcart-color-text); } .iihcart-scope #iihcart-confirm-input-page-footer-message { margin: 32px 0; line-height: 2; color: var(--iihcart-color-text); } /* Confirmation Page - Privacy Policy Checkbox */ .iihcart-scope .iihcart-agree-to-the-privacy-policy-wrap { display: flex; justify-content: center; padding: 24px 0 16px; } .iihcart-scope .iihcart-agree-to-the-privacy-policy-wrap .checkbox-wrapper { justify-content: center; } /* Confirmation Page - Bottom Buttons */ .iihcart-scope .iihcart-form-bottom-buttons-narrow { border: none; padding-top: 16px; padding-bottom: 40px; } /* Confirmation Page - Button disabled state */ .iihcart-scope #btn-confirm-order.disabled { background: #ccc; color: #fff; cursor: not-allowed; opacity: 0.7; } /* Processing Overlay - 構造とアニメーションは親プラグインで定義（processing-overlay.css）。 ここではテーマカラーへのマッピングのみ行う。 */ /* Zeus 3D Secure Overlay (challenge iframe background) */ .iihcart-scope #iihcart-zeus-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 10001; } /* Action Buttons (cart flow) */ .iihcart-scope .iihcart-action-buttons { display: flex; flex-direction: column; align-items: center; gap: 20px; padding-top: 20px; } .iihcart-scope .iihcart-action-button-container { display: flex; flex-direction: column; align-items: center; gap: 24px; } .iihcart-scope .iihcart-action-button-container .btn-iihcart { min-width: 280px; } .iihcart-scope .iihcart-action-button-container.no-full-width { width: auto; } .iihcart-scope .iihcart-button-no-border-no-full-width { border: none !important; box-shadow: none; width: auto; min-width: 0 !important; background: transparent !important; color: var(--iihcart-color-text) !important; padding: 8px 0 !important; display: inline-flex !important; align-items: center; gap: 4px; } .iihcart-scope .iihcart-button-no-border-no-full-width:hover { color: var(--iihcart-color-primary) !important; background: transparent !important; } .iihcart-scope .iihcart-button-no-border-no-full-width .breadcrumb-separator { display: inline-flex; align-items: center; width: 8px; height: 12px; } .iihcart-scope .iihcart-button-no-border-no-full-width .breadcrumb-separator svg { width: 100%; height: 100%; fill: currentColor; } /* Responsive visibility helpers (mobile-first base) */ .iihcart-scope .hide-on-desktop { display: inline-flex; } .iihcart-scope .show-on-desktop,.iihcart-scope .iihcart-required-container.show-on-desktop { display: none; } /* Payment & Delivery Page */ @media(min-width:769px) { .iihcart-scope .hide-on-desktop { display: none; } .iihcart-scope .show-on-desktop,.iihcart-scope .iihcart-required-container.show-on-desktop { display: inline-flex; } .iihcart-scope .iihcart-required-field-missing { display: inline-block; width: 32px; flex-shrink: 0; } } .iihcart-scope #delivery_form > .iihcart-form-heading:first-of-type { margin-top: 0; } .iihcart-scope .delivery-options { width: 100%; } .iihcart-scope .form-radio { display: flex; align-items: center; gap: 8px; padding: 8px 0; } .iihcart-scope .form-radio input[type="radio"] { width: 18px; height: 18px; accent-color: #248cb3; cursor: pointer; flex-shrink: 0; margin: 0; } .iihcart-scope .form-radio label { font-size: 16px; cursor: pointer; font-weight: normal; } .iihcart-scope .customer-information-address { padding: 4px 0 8px 26px; font-size: 14px; line-height: 1.8; color: var(--iihcart-color-text); } .iihcart-scope .customer-information-address p { margin: 0; } .iihcart-scope #shipping-address-fields { margin-top: 16px; } @media(min-width:769px) { .iihcart-scope #shipping-address-fields .iihcart-form-group { border-bottom: 1px solid #ccc; margin: 0; padding: 0; align-items: stretch; gap: 0; } .iihcart-scope #shipping-address-fields .iihcart-form-group:last-child .iihcart-block-label { border-bottom: 1px solid #fff; margin-bottom: -1px; } .iihcart-scope #shipping-address-fields .iihcart-block-label { background: #f2f2f2; padding: 16px 16px; margin: 0; min-width: 240px; display: flex; align-items: center; border-bottom: 1px solid #fff; margin-bottom: -1px; } .iihcart-scope #shipping-address-fields .input-fields { padding: 12px 16px 12px 32px; align-items: center; } .iihcart-scope #shipping-address-fields .input-fields > .show-on-desktop, .iihcart-scope #shipping-address-fields .input-fields > .iihcart-required-field-missing { width: 40px; flex-shrink: 0; text-align: center; } } /* Delivery/Payment Selects */ .iihcart-scope #delivery_form .padded-content > .iihcart-form-group { padding: 12px 0; } .iihcart-scope #delivery_form select.input-medium-fixed { width: 240px; min-width: 240px; } .iihcart-scope #delivery_form textarea { width: 100%; resize: vertical; padding: 12px; font-size: 16px; line-height: 1.6; } /* Zeus Card Radio Toggle */ .iihcart-scope .zeus-radio-buttons-container { display: flex; gap: 24px; margin-bottom: 16px; } .iihcart-scope .zeus-radio-button-group { display: flex; align-items: center; gap: 6px; } .iihcart-scope .zeus-radio-button-group input[type="radio"] { width: 16px; height: 16px; accent-color: #248cb3; cursor: pointer; margin: 0; } .iihcart-scope .zeus-radio-button-group label { font-size: 16px; cursor: pointer; } /* Zeus Card - Shared Table Styles (desktop only) */ .iihcart-scope #zeus_registerd_card_area, .iihcart-scope #iih_zeus_registerd_card_area_extra_payment_times, .iihcart-scope #iih_zeus_new_card_area_extra_bland, .iihcart-scope #zeus_new_card_area, .iihcart-scope #iih_zeus_new_card_area_extra_payment_times { margin: 0; } @media(min-width:1025px) { .iihcart-scope #zeus_registerd_card_area .iihcart-form-group, .iihcart-scope #iih_zeus_registerd_card_area_extra_payment_times .iihcart-form-group, .iihcart-scope #iih_zeus_new_card_area_extra_bland .iihcart-form-group, .iihcart-scope #zeus_new_card_area .iihcart-form-group, .iihcart-scope #iih_zeus_new_card_area_extra_payment_times .iihcart-form-group { border-bottom: 1px solid #ccc; margin: 0; padding: 0; align-items: stretch; gap: 0; } .iihcart-scope #zeus_registerd_card_area .iihcart-block-label, .iihcart-scope #iih_zeus_registerd_card_area_extra_payment_times .iihcart-block-label, .iihcart-scope #iih_zeus_new_card_area_extra_bland .iihcart-block-label, .iihcart-scope #zeus_new_card_area .iihcart-block-label, .iihcart-scope #iih_zeus_new_card_area_extra_payment_times .iihcart-block-label { background: #f2f2f2; padding: 16px 16px; margin: 0; min-width: 240px; display: flex; align-items: center; border-bottom: 1px solid #fff; margin-bottom: -1px; font-size: 14px; } .iihcart-scope #zeus_registerd_card_area .input-fields, .iihcart-scope #iih_zeus_registerd_card_area_extra_payment_times .input-fields, .iihcart-scope #iih_zeus_new_card_area_extra_bland .input-fields, .iihcart-scope #zeus_new_card_area .input-fields, .iihcart-scope #iih_zeus_new_card_area_extra_payment_times .input-fields { padding: 12px 16px 12px 32px; align-items: center; } /* Last row in each continuous block: no border */ .iihcart-scope #zeus_registerd_card_area .iihcart-form-group:last-child, .iihcart-scope #iih_zeus_new_card_area_extra_bland .iihcart-form-group:last-child, .iihcart-scope #zeus_new_card_area .iihcart-form-group:last-child { border-bottom: none; } .iihcart-scope #zeus_registerd_card_area .iihcart-form-group:last-child .iihcart-block-label, .iihcart-scope #iih_zeus_new_card_area_extra_bland .iihcart-form-group:last-child .iihcart-block-label, .iihcart-scope #zeus_new_card_area .iihcart-form-group:last-child .iihcart-block-label { border-bottom: none; margin-bottom: 0; } /* Continuous borders between stacked containers */ .iihcart-scope #iih_zeus_registerd_card_area_extra_payment_times { border-top: 1px solid #ccc; } .iihcart-scope #iih_zeus_registerd_card_area_extra_payment_times .iihcart-block-label { border-top: 1px solid #fff; margin-top: -1px; } .iihcart-scope #zeus_new_card_area { border-top: 1px solid #ccc; } .iihcart-scope #zeus_new_card_area .iihcart-form-group:first-child .iihcart-block-label { border-top: 1px solid #fff; margin-top: -1px; } .iihcart-scope #iih_zeus_new_card_area_extra_payment_times { border-top: 1px solid #ccc; } .iihcart-scope #iih_zeus_new_card_area_extra_payment_times .iihcart-block-label { border-top: 1px solid #fff; margin-top: -1px; } /* Mypage card page: restore border on last field (card name) */ .iihcart-scope #mypage-card-register-form #zeus_new_card_area .iihcart-form-group:last-child { border-bottom: 1px solid #ccc; } .iihcart-scope #mypage-card-register-form #zeus_new_card_area .iihcart-form-group:last-child .iihcart-block-label { border-bottom: 1px solid #fff; margin-bottom: -1px; } } /* Card Form Field Widths */ @media(min-width:1025px) { .iihcart-scope #iihcart-card-brand-select { width: 400px; } .iihcart-scope #zeus_token_card_number { width: 400px; max-width: 400px; } .iihcart-scope #zeus_token_card_cvv, .iihcart-scope #zeus_token_card_cvv_for_registerd_card { width: 100px; max-width: 100px; } .iihcart-scope .iihcart-select-label, .iihcart-scope .iihcart-select-label-first { width: 240px; } } /* Payment Form Bottom Buttons */ .iihcart-scope .iihcart-form-bottom-buttons { border: none; padding-top: 48px; padding-bottom: 40px; } /* Cart Mobile */ @media(max-width:768px) { .iihcart-scope .cart-page-title { font-size: 20px; margin-bottom: 16px; } .iihcart-scope .cart-page-item { padding: 16px 0; } .iihcart-scope .cart-page-item > td:first-child { padding-left: 0; } .iihcart-scope .cart-page-item > td:last-child { padding-right: 0; } .iihcart-scope .cart-item-image img { width: 80px; height: 80px; min-width: 80px; } .iihcart-scope .cart-item-details { padding: 0 0 0 12px; } .iihcart-scope .cart-item-title { font-size: 16px; font-weight: normal; margin-bottom: 4px; } .iihcart-scope .cart-item-price,.iihcart-scope .cart-item-stock { font-size: 10px; margin: 0; display: inline; } .iihcart-scope .cart-item-price { margin-right: 8px; } .iihcart-scope .cart-item-actions .iihcart-remove-from-cart { font-size: 12px; } .iihcart-scope #iihcart-subtotal-price { font-weight: 700; } .iihcart-scope .cart-item-price .tax-included { font-size: 10px; } .iihcart-scope .cart-item-actions.desktop-actions { display: none; } .iihcart-scope .cart-item-actions.mobile-actions { display: flex; flex-direction: column; align-items: flex-start; margin-top: 8px; padding: 0; } .iihcart-scope .cart-item-select { margin-bottom: 8px; } .iihcart-scope .cart-item-bottom { margin-top: 0; } .iihcart-scope .iihcart-amount { display: inline-block; font-size: 16px; } .iihcart-scope .iihcart-final-amount-item { justify-content: flex-end; flex-wrap: wrap; } .iihcart-scope .iihcart-final-amount-item .label { margin-right: auto; } .iihcart-scope .iihcart-final-amount-item .tax-included { margin-left: 0; } /* Confirmation Mobile */ .iihcart-scope #confirmation .iihcart-final-amount { grid-template-columns: auto 1fr; } .iihcart-scope #confirmation .iihcart-final-amount-row .label { text-align: left; padding-right: 16px; } .iihcart-scope #confirmation .iihcart-final-amount-row .amount-value { text-align: right; } .iihcart-scope .confirm-user-info, .iihcart-scope .confirm-shipping-address-info, .iihcart-scope .confirm-etc-info { padding: 12px 0; font-size: 16px; } .iihcart-scope .confirm-user-info .label, .iihcart-scope .confirm-etc-info .label { display: block; min-width: auto; margin-bottom: 0; font-size: 14px; } .iihcart-scope #iihcart-confirm-input-page-footer-message { margin: 24px 0; padding: 16px 0; } .iihcart-scope .iihcart-agree-to-the-privacy-policy-wrap { padding: 16px 0 8px; justify-content: flex-start; } .iihcart-scope .iihcart-agree-to-the-privacy-policy-wrap .checkbox-wrapper { justify-content: flex-start; } .iihcart-scope .iihcart-form-bottom-buttons-narrow { padding-bottom: 32px; } .iihcart-scope #confirmation .cart-item-price,.iihcart-scope #confirmation .cart-item-stock { display: block; } .iihcart-scope #confirmation .iihcart-action-button-container-alt { align-items: stretch; } } /* Card Edit Form */ .iihcart-scope .iihcart-zeus-payment-group { margin-bottom: 16px; } /* Card Edit Page - Align with heading */ .iihcart-scope #iihcart-credit-card-payment-method-wrap { padding-left: 16px; } .iihcart-scope #mypage-card-register-form { padding-left: var(--iihcart-padded-content-padding); } .iihcart-scope #mypage-card-register-form .pagination-buttons, .iihcart-scope #mypage-card-register-form .iihcart-order-details-footer-container { margin-left: calc(-1 * var(--iihcart-padded-content-padding)); } .iihcart-scope #delivery_form #iihcart-credit-card-payment-method-wrap { padding-left: 0; } .iihcart-scope .iihcart-zeus-payment-group.padding-top-0 { padding-top: 0; } .iihcart-scope .iihcart-zeus-payment-group input[type="tel"], .iihcart-scope .iihcart-zeus-payment-group input[type="text"] { padding: 8px 12px; border: 1px solid var(--iihcart-color-gray-border); border-radius: 0; font-size: 16px; font-family: inherit; } .iihcart-scope .iihcart-zeus-payment-group select { padding: 8px 12px; border: 1px solid var(--iihcart-color-gray-border); border-radius: 0; font-size: 16px; font-family: inherit; } .iihcart-scope .iihcart-select-label, .iihcart-scope .iihcart-select-label-first { padding: 8px 12px; border: 1px solid var(--iihcart-color-gray-border); border-radius: 0; font-size: 16px; } .iihcart-scope .expiration-date-fields { display: flex; align-items: center; gap: 4px; font-size: 16px; } .iihcart-scope .zeus-token-month-margin,.iihcart-scope .zeus-token-divider-margin,.iihcart-scope .zeus-token-year-margin { font-size: 16px; } /* Purchase History Detail */ .iihcart-scope .iihcart-order-details-container { margin-top: 8px; padding-left: 16px; } .iihcart-scope .iihcart-order-detail-border { border-top: none; } .iihcart-scope .iihcart-order-details-header { display: flex; padding: 12px 16px; background: #f2f2f2; border-bottom: 1px solid #ccc; font-size: 14px; font-weight: normal; color: var(--iihcart-color-text); } .iihcart-scope .iihcart-detail-name-header { flex: 1; } .iihcart-scope .iihcart-detail-price-header { flex: 0 0 100px; text-align: center; } .iihcart-scope .iihcart-detail-quantity-header { flex: 0 0 80px; text-align: center; } .iihcart-scope .iihcart-detail-total-header { flex: 0 0 140px; text-align: center; } .iihcart-scope .iihcart-order-detail-item-for-wide { border-bottom: 1px solid #ccc; } .iihcart-scope .iihcart-order-detail-item { display: flex; align-items: center; padding: 16px; font-size: 16px; } .iihcart-scope .iihcart-order-item-name { flex: 1; } .iihcart-scope .iihcart-order-item-name a { color: var(--iihcart-color-link); text-decoration: underline; } .iihcart-scope .iihcart-order-item-price { flex: 0 0 100px; text-align: right; } .iihcart-scope .iihcart-order-item-quantity { flex: 0 0 80px; text-align: center; } .iihcart-scope .iihcart-order-item-total { flex: 0 0 140px; text-align: right; } .iihcart-scope .iihcart-order-detail-item-narrow { display: none; } /* Final Amount */ .iihcart-scope .custom-final-amount { margin-top: 16px; padding: 8px 16px 0 0; } .iihcart-scope .custom-final-amount-row { display: flex; justify-content: flex-end; align-items: baseline; padding: 4px 0; font-size: 16px; } .iihcart-scope .custom-final-label { text-align: right; } .iihcart-scope .custom-final-value { text-align: right; flex: 0 0 180px; overflow: visible; white-space: nowrap; } .iihcart-scope .custom-final-total { } .iihcart-scope .custom-final-total .custom-final-value::after { content: '（税込）'; font-size: 16px; color: var(--iihcart-color-text-light); } .iihcart-scope .custom-final-tax-included { display: none; } /* Receipt Form */ .iihcart-scope .receipt-form-container { margin: 12px 0; padding-bottom: 16px; padding-left: 16px; border-top: none; border-bottom: 1px solid #ccc; } .iihcart-scope .receipt-heading { border-top: 1px solid #ccc; border-bottom: 1px solid #ccc; padding-top: 24px; padding-bottom: 16px; } .iihcart-scope .iihcart-order-info-heading.receipt-heading { margin-top: 48px; } .iihcart-scope .receipt-form-instruction { font-size: 14px; color: #e60012; margin-left: 8px; font-weight: normal; } @media(max-width:1024px) { .iihcart-scope .receipt-form-instruction { display: block; margin-left: 0; margin-top: 4px; } } .iihcart-scope .iihcart-receipt-form .iihcart-history-form-group { display: flex; align-items: center; gap: 8px; } .iihcart-scope .iihcart-receipt-form .iihcart-history-form-group label { font-size: 16px; flex-shrink: 0; } .iihcart-scope .input-medium-fixed { padding: 8px 12px; border: 1px solid var(--iihcart-color-gray-border); border-radius: 0; font-size: 16px; font-family: inherit; width: 240px; max-width: 240px; } .iihcart-scope input[type="text"].input-medium-fixed { width: 240px; max-width: 240px; } .iihcart-scope .iihcart-btn-receipt-form { padding: 8px 20px !important; font-size: 16px !important; margin-left: 24px; } /* Detail Footer */ .iihcart-scope .iihcart-order-details-footer-container { text-align: center; padding: 40px 0; } .iihcart-scope .iihcart-order-details-footer-container .btn-iihcart { min-width: 280px; } @media(max-width:1024px) { .iihcart-scope .iihcart-order-detail-item-for-wide { display: none; } .iihcart-scope .iihcart-order-details-header { display: none; } .iihcart-scope .iihcart-order-details-container { background: #fff; padding: 16px 0; } .iihcart-scope .iihcart-order-info-heading { padding-left: 0; } .iihcart-scope .receipt-form-container { padding-left: 0; border-bottom: none; } .iihcart-scope .receipt-heading { border-top: none; border-bottom: none; } .iihcart-scope .iihcart-order-detail-item-narrow { display: block; border-top: 1px solid #ddd; border-bottom: none; padding: 16px 0; } .iihcart-scope .iihcart-order-detail-item-narrow .iihcart-order-detail-item { display: block; padding: 0; } .iihcart-scope .iihcart-order-detail-narrow { display: flex; justify-content: flex-start; gap: 32px; padding: 4px 0; font-size: 16px; } .iihcart-scope .iihcart-order-label-narrow { font-weight: normal; font-size: 16px; color: var(--iihcart-color-text); min-width: 120px; } .iihcart-scope .iihcart-order-value-narrow { font-size: 16px; } .iihcart-scope .iihcart-order-value-narrow a { color: var(--iihcart-color-link); text-decoration: underline; } .iihcart-scope .custom-final-amount { background: #fff; margin: 0; padding: 16px 0; border-top: 1px solid #ddd; border-bottom: 1px solid #ddd; } .iihcart-scope .custom-final-amount-row { justify-content: flex-start; gap: 32px; padding: 4px 0; font-size: 16px; } .iihcart-scope .custom-final-value { flex: none; overflow: hidden; white-space: normal; text-align: left; } .iihcart-scope .custom-final-label { min-width: 120px; text-align: left; } .iihcart-scope .custom-final-total .custom-final-value::after { font-size: 16px; } .iihcart-scope .iihcart-receipt-form .iihcart-history-form-group { flex-wrap: wrap; } .iihcart-scope .iihcart-receipt-form .iihcart-history-form-group input.input-medium-fixed { width: 100%; max-width: 100%; } .iihcart-scope .iihcart-receipt-form .iihcart-history-form-group .iihcart-btn-receipt-form { width: 100%; margin-left: 0; margin-top: 16px; padding-top: 20px !important; padding-bottom: 20px !important; } .iihcart-scope .iihcart-order-details-footer-container .btn-iihcart { min-width: 200px; } } /* Error Messages */ .iihcart-scope .iihcart-error-message { background: #fff3cd; border: 1px solid #ffc107; border-radius: 4px; padding: 12px 16px; margin-bottom: 16px; font-size: 14px; } /* Validation */ .iihcart-scope .iihcart-validation-error { color: var(--iihcart-color-error); font-size: 13px; margin-top: 4px; } .iihcart-scope div.iihcart-validation-error { width: 100%; flex-basis: 100%; } /* ---- Mypage Mobile ---- */ @media(max-width:768px) { .iihcart-scope .mobile-hide { display: none; } .iihcart-scope .iihcart-user-info-container { padding: 20px; margin-bottom: 24px; margin-left: -20px; margin-right: -20px; } .iihcart-scope .iihcart-name-bold { font-size: 18px; } .iihcart-scope .iihcart-user-info { flex-direction: column; gap: 4px; } .iihcart-scope .iihcart-form-heading { margin-top: 32px; margin-left: -20px; margin-right: -20px; padding: 16px 20px; font-size: 14px; } .iihcart-scope .iihcart-form-detail-instruction { padding-left: 0; } .iihcart-scope .padded-content { padding-left: 0; padding-right: 0; } .iihcart-scope .divider { display: none; } .iihcart-scope .iihcart-order-history-header { display: none; } .iihcart-scope .iihcart-order-history-border { display: block; } .iihcart-scope .iihcart-order-history-item { display: block; padding: 20px 0; } .iihcart-scope .iihcart-order-history-item > div { font-size: 14px; } .iihcart-scope .iihcart-order-history-for-wide { display: none; } .iihcart-scope .iihcart-order-history-for-narrow { display: block; } .iihcart-scope .iihcart-order-date { width: auto; text-align: left; } .iihcart-scope .iihcart-order-number { width: auto; text-align: left; } .iihcart-scope .iihcart-order-total { text-align: left; padding: 0; } .iihcart-scope .iihcart-order-detail { justify-content: left; align-items: flex-start; padding: 4px 0; } .iihcart-scope .iihcart-order-label { min-width: 120px; } .iihcart-scope .iihcart-form-group .iihcart-block-label { min-width: auto; } .iihcart-scope .input-medium-fixed { width: 120px; } .iihcart-scope .iihcart-zeus-payment-group input[type="tel"], .iihcart-scope .iihcart-zeus-payment-group input[type="text"] { width: 100%; } } /* === Utility (style.css:1145-1152) === */ /* ========================================================================== Utility ========================================================================== */ /* Bootstrap を積むテーマ（Lightning 等）では同名ユーティリティが !important 付きで先に定義されるため、こちらも !important で揃える。 値は抽出元と同じ 8px スケール（n × 8px）。 */ .iihcart-scope .text-center { text-align: center !important; } .iihcart-scope .mt-3 { margin-top: 24px !important; } .iihcart-scope .mt-4 { margin-top: 32px !important; } .iihcart-scope .mb-3 { margin-bottom: 24px !important; } .iihcart-scope .mt-5 { margin-top: 40px !important; } .iihcart-scope .mb-0 { margin-bottom: 0 !important; } .iihcart-scope .pt-2 { padding-top: 16px !important; } /* === Shortcode Product Card (style.css:1153-1166) === */ /* ========================================================================= ショートコード: 商品カード [iihcart_show_cart] ========================================================================= */ .iihcart-scope .iihcart-shortcode-product { background: #fff; border: 1px solid var(--iihcart-color-gray-border); border-radius: var(--iihcart-border-radius-sm, 4px); padding: 20px; max-width: 360px; } .iihcart-scope .iihcart-shortcode-name { font-size: 16px; font-weight: 600; margin-bottom: 8px; } .iihcart-scope .iihcart-shortcode-price { font-size: 20px; margin-bottom: 16px; } .iihcart-scope .iihcart-shortcode-price .tax-included { font-size: 12px; color: var(--iihcart-color-text-light); } .iihcart-scope .iihcart-shortcode-price .iihcart-pro-billing-cycle { font-size: 14px; color: var(--iihcart-color-text-light); } .iihcart-scope .iihcart-shortcode-quantity { margin-bottom: 16px; } .iihcart-scope .iihcart-shortcode-quantity label { font-size: 14px; margin-right: 8px; } .iihcart-scope .iihcart-shortcode-quantity select { padding: 4px 8px; } .iihcart-scope .iihcart-shortcode-product .btn-iihcart { display: block; width: 100%; } .iihcart-scope .iihcart-shortcode-product .iihcart-pro-already-subscribed { font-size: 14px; line-height: 1.8; } /* === アクティブテーマ用調整（抽出元にない追加ルール） === */ /* 商品詳細: 専用テーマの 640px 固定カラムはホストテーマのコンテンツ幅 * （SWELL 等で 700-900px 程度）からあふれるため、PC 幅では可変グリッドに調整する。 * 1024px 以下は抽出元と同じ 1 カラム（上の @media(max-width:1024px) 内の * `.iihcart-scope .product-display { grid-template-columns: 1fr }`）に任せる。 * この上書きは二重クラス（詳細度 0-3-0）なので、無条件に書くと 1 カラム化の * ルール（0-2-0）に勝ってしまい、狭幅でも 2 カラムのままになる。 * 必ず min-width で囲むこと。 */ @media(min-width:1025px) { .iihcart-scope.iihcart-scope .product-display { grid-template-columns: minmax(0, 1fr) minmax(260px, 1fr); } } .iihcart-scope.iihcart-scope .image-gallery .main-image { width: 100%; height: auto; aspect-ratio: 4 / 3; } /* SP 固定ボトムバー: ホストテーマの固定フッターと重なる場合の持ち上げ量。 */ @media(max-width:1024px) { .iihcart-scope .btn-fixed-bottom { bottom: var(--iihcart-fixed-bottom-offset, 0px); } } /* 営業日カレンダーの SP 調整（抽出元: style.css:455-460 のフッター @media 内） */ @media(max-width:768px) { .iihcart-scope .iihcart-cal-wrapper { gap: 10px; } .iihcart-scope .iihcart-cal-title { font-size: 16px; } .iihcart-scope .iihcart-cal-table th, .iihcart-scope .iihcart-cal-table td { padding: 0; font-size: 14px; } } /* 定期購入の取り扱い停止メッセージ（Pro 無効時のフェイルセーフ表示）。 * templates/item/single-product.php / ショートコードの商品カードで使用。 */ .iihcart-scope .iihcart-unavailable-note { margin: 16px 0 0; padding: 12px 16px; border: 1px solid #e0c07a; border-left-width: 4px; border-radius: var(--iihcart-border-radius-sm); background: #fdf6e3; color: var(--iihcart-color-text); font-size: 14px; line-height: 1.8; } /* .zeus_token_input_error のうちテキスト系入力に付くもの（Zeus のトークン JS が * エラー時に付与する）はエラー表示として赤枠にする。テンプレートが静的に付与して * いるのは有効期限セレクトだけなので、そちらは Forms セクション側で通常の見た目。 */ .iihcart-scope input[type="text"].zeus_token_input_error, .iihcart-scope input[type="tel"].zeus_token_input_error { border: 1px solid var(--iihcart-color-error); background-color: #fff4f2; } .iihcart-scope input[type="text"].zeus_token_input_error:focus, .iihcart-scope input[type="tel"].zeus_token_input_error:focus { border-color: var(--iihcart-color-error); } /* === カート内点数バッジ（[iihcart_cart_badge]） === */ .iihcart-scope.iihcart-cart-badge { position: relative; display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; line-height: 1; vertical-align: middle; } .iihcart-scope.iihcart-cart-badge:hover { opacity: .7; } .iihcart-scope.iihcart-cart-badge:focus-visible { outline: 2px solid var(--iihcart-color-link); outline-offset: 3px; border-radius: var(--iihcart-border-radius-sm); } .iihcart-scope .iihcart-cart-badge-icon { width: 22px; height: 22px; display: block; flex: none; } .iihcart-scope .iihcart-cart-badge-label { font-size: 14px; white-space: nowrap; } /* 配色は「バッジ専用の設定 → ボタンの配色（テーマ継承含む）」の順に解決する。 * --iihcart-cart-badge-bg / -text は設定されたときだけ出力される。 */ .iihcart-scope .iihcart-cart-count-badge { box-sizing: border-box; display: inline-block; background: var(--iihcart-cart-badge-bg, var(--iihcart-color-button)); color: var(--iihcart-cart-badge-text, var(--iihcart-color-button-text)); border-radius: 999px; min-width: 18px; height: 18px; padding: 0 5px; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; } /* 件数 0 のときはハイドレーション JS が hidden を立てる。UA スタイルの * [hidden]{display:none} は上の display 指定（詳細度 0-2-0）に負けるため、 * ここで明示的に消す。これが無いと空カートで色付きの丸だけが出る。 */ .iihcart-scope .iihcart-cart-count-badge[hidden] { display: none; } /* 視覚的に隠すテキスト（tag="span" でラベルが無いときの読み上げ用） */ .iihcart-scope .iihcart-sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; } /* アイコンがある場合は件数をアイコンの右上に重ねる（カート UI の定番配置）。 * テキストのみ（show_icon="no"）のときはラベルの右に素直に並べる。 */ .iihcart-scope.iihcart-cart-badge-has-icon .iihcart-cart-count-badge { position: absolute; top: -7px; left: 13px; box-shadow: 0 0 0 2px var(--iihcart-cart-badge-ring, transparent); } /* === ウィジェット用ログインフォーム（[iihcart_login_form]） === * フッター・サイドバーの狭い段に収まるようラベルを上、入力とボタンを幅いっぱいにする。 * 入力欄そのものは Forms セクションの共通スタイルが当たる。 */ .iihcart-scope.iihcart-login-widget { font-size: 14px; } .iihcart-scope .iihcart-login-widget-field { margin: 0 0 12px; } .iihcart-scope .iihcart-login-widget-field label { display: block; margin: 0 0 4px; font-size: 13px; line-height: 1.6; color: var(--iihcart-color-text-light); } .iihcart-scope .iihcart-login-widget-field input { width: 100%; font-size: 16px; } .iihcart-scope .iihcart-login-widget-field input:focus { border-color: var(--iihcart-color-primary); outline: none; } .iihcart-scope .iihcart-login-widget-remember { display: flex; align-items: center; margin: 0 0 14px; font-size: 13px; line-height: 1.6; } .iihcart-scope .iihcart-login-widget-remember label { display: flex; align-items: center; gap: 6px; margin: 0; cursor: pointer; } .iihcart-scope .iihcart-login-widget-remember input { margin: 0; } .iihcart-scope .iihcart-login-widget-submit { display: block; width: 100%; } .iihcart-scope .iihcart-login-widget-links { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; margin: 12px 0 0; font-size: 13px; line-height: 1.8; } .iihcart-scope .iihcart-login-widget-links a { color: var(--iihcart-color-link); } /* ウィジェット内のボタンはページ内のボタン（padding 16px 48px）より小さくする */ .iihcart-scope .btn-iihcart-compact, .iihcart-scope button.btn-iihcart-compact, .iihcart-scope input[type="submit"].btn-iihcart-compact { padding: 11px 24px; font-size: 15px; } @media(max-width:768px) { .iihcart-scope .btn-iihcart-compact, .iihcart-scope button.btn-iihcart-compact, .iihcart-scope input[type="submit"].btn-iihcart-compact { padding-top: 13px; padding-bottom: 13px; } }