@charset "UTF-8"; /* ========================================================================== AtelierGIFT WordPress 子テーマ ateliergift-custom.css 置き場所 : /public_html/wp-content/themes/mytheme-child/assets/ateliergift-custom.css 読み込み : header.php の内、itembox CDN（add_pc/add_sp）より【前】 ★★★ これはCSSファイルです。header.php（PHP）と取り違えないでください ★★★ 1行目が @charset "UTF-8"; ならCSS、 ul { max-width: 100%; margin-left: auto; margin-right: auto; } .AgCategoryRanking_Note { margin: 16px auto 0; padding: 0; color: var(--ag-ink-soft); font-size: 13px; font-weight: 400; line-height: 1.8; text-align: center; } /* ========================================= 順位の円形ラベル PC JS（07_共通スクリプト）が任意商品表示パーツの出力を自動検出し .AgRankBadge を付与する方式。 class名不問・商品数（1〜20個）に自動対応 ========================================= */ .AgRankItem { position: relative !important; } .AgRankBadge { position: absolute; top: -9px; left: -9px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border: 1px solid var(--ag-accent); border-radius: 50%; background: #ffffff; color: var(--ag-accent); font-family: var(--ag-font-en); font-size: 18px; font-weight: 500; line-height: 1; box-shadow: 0 2px 8px rgba(58, 55, 50, 0.08); pointer-events: none; } /* 1位のみ塗り */ .AgRankBadge.is-first { background: var(--ag-accent); color: #ffffff; } /* ========================================= 金額別お返し目安と人気ギフト PC ========================================= */ .AgBudgetRanking, .AgBudgetRanking *, .AgBudgetRanking *::before, .AgBudgetRanking *::after { box-sizing: border-box; } .AgBudgetRanking_Guide { max-width: 920px; margin: 0 auto 38px; padding: 0; } .AgBudgetRanking_GuideInner { padding: 28px 34px 30px; background: #ffffff; border: 1px solid var(--ag-line); border-radius: 20px; } .AgBudgetRanking_GuideTitle { margin: 0 0 18px; padding: 0; color: var(--ag-ink); font-family: var(--ag-font-serif); font-size: 18px; font-weight: 600; line-height: 1.6; text-align: center; letter-spacing: 0.08em; } .AgBudgetRanking_TableWrapPc { display: block; width: 100%; margin: 0 auto; border: 1px solid var(--ag-line); border-radius: 14px; background: #ffffff; overflow: hidden; } .AgBudgetRanking_Table { width: 100%; margin: 0; border-collapse: collapse; } .AgBudgetRanking_Table th, .AgBudgetRanking_Table td { padding: 15px 16px; border-bottom: 1px solid var(--ag-line); color: var(--ag-ink); font-size: 14px; font-weight: 400; line-height: 1.7; text-align: center; vertical-align: middle; } .AgBudgetRanking_Table th { background: var(--ag-bg-head); font-weight: 700; } .AgBudgetRanking_Table tr:last-child td { border-bottom: none; } .AgBudgetRanking_CardList { display: none; } .AgBudgetRanking_GuideNote { margin: 16px auto 0; padding: 0; color: var(--ag-ink-soft); font-size: 13px; font-weight: 400; line-height: 1.8; text-align: center; } .AgBudgetRanking .AgCategoryRanking_Tabs { max-width: 1120px; } /* 相場表→ランキングタブ連動リンク */ .AgBudgetRanking_JumpLink { display: inline-block; margin-top: 6px; padding-bottom: 1px; border-bottom: 1px solid var(--ag-accent); color: var(--ag-ink); font-size: 12.5px; font-weight: 500; line-height: 1.5; text-decoration: none; cursor: pointer; white-space: nowrap; transition: color 0.2s ease; } .AgBudgetRanking_JumpLink::after { content: " →"; color: var(--ag-accent); } .AgBudgetRanking_JumpLink:hover, .AgBudgetRanking_JumpLink:focus { color: var(--ag-accent); text-decoration: none; outline: none; } /* ========================================= ランキング商品リスト：カルーセル矢印無効化（PC） ========================================= */ .Recipient_Ranking .Osusume_Item .fs-c-productListCarousel__ctrl, .AgCategoryRanking_Items .fs-c-productListCarousel__ctrl { display: none !important; } .Recipient_Ranking .Osusume_Item .fs-c-productListCarousel__list, .AgCategoryRanking_Items .fs-c-productListCarousel__list { width: 100%; } /* ========================================================================== 商品カテゴリページの贈る用途別ランキング用pccss ========================================================================== */ .AgPurposeRanking, .AgPurposeRanking *, .AgPurposeRanking *::before, .AgPurposeRanking *::after { box-sizing: border-box; } .AgPurposeRanking { color: var(--ag-ink); font-family: inherit; } .AgPurposeRanking_Inner { position: relative; } /* リード文 */ .AgPurposeRanking_Lead { max-width: 820px; margin: 0 auto 34px; padding: 0; text-align: center; } .AgPurposeRanking_Lead p { margin: 0; padding: 0; color: var(--ag-ink); font-size: 16px; font-weight: 400; line-height: 2; letter-spacing: 0.03em; } /* タブ：下線スライド式セグメント型（項目数可変・中央折返し） */ .AgPurposeRanking_Tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 6px; max-width: 1120px; margin: 0 auto 38px; padding: 0; scroll-margin-top: 185px; } .AgPurposeRanking_Tab { appearance: none; -webkit-appearance: none; position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 0; min-height: 0; margin: 0; padding: 13px 20px 14px; border: none; border-bottom: 1px solid var(--ag-line); border-radius: 0; background: transparent; color: var(--ag-ink-soft); font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: 0.06em; text-align: center; text-decoration: none; cursor: pointer; transition: color 0.2s ease; } .AgPurposeRanking_Tab::after { content: ""; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); width: 0; height: 2px; background: var(--ag-accent); transition: width 0.25s ease; } .AgPurposeRanking_Tab:hover, .AgPurposeRanking_Tab:focus { background: transparent; border-bottom-color: var(--ag-line); color: var(--ag-ink); opacity: 1; outline: none; } .AgPurposeRanking_Tab.is-active { border-bottom-color: var(--ag-line); background: transparent; color: var(--ag-ink); font-weight: 700; opacity: 1; } .AgPurposeRanking_Tab.is-active::after { width: calc(100% - 20px); } .AgPurposeRanking_Tab.is-active:hover, .AgPurposeRanking_Tab.is-active:focus { border-bottom-color: var(--ag-line); background: transparent; color: var(--ag-ink); } /* パネル */ .AgPurposeRanking_Panels { width: 100%; margin: 0 auto; padding: 0; } .AgPurposeRanking_Panel { width: 100%; margin: 0; padding: 0; } .AgPurposeRanking_Panel[hidden] { display: none !important; } .AgPurposeRanking_Text { max-width: 780px; margin: 0 auto 30px; padding: 0; text-align: center; } .AgPurposeRanking_Text p { margin: 0; padding: 0; color: var(--ag-ink); font-size: 15px; font-weight: 400; line-height: 2; letter-spacing: 0.03em; } /* 商品リスト（任意商品表示パーツの出力枠） */ .AgPurposeRanking_Items { margin-top: 0; } .AgPurposeRanking_Items .fs-c-productList, .AgPurposeRanking_Items .fs-c-productList__list { max-width: 100%; } .AgPurposeRanking_Items > ul { max-width: 100%; margin-left: auto; margin-right: auto; } /* カルーセル矢印を無効化（贈り先別等と同挙動） */ .AgPurposeRanking_Items .fs-c-productListCarousel__ctrl { display: none !important; } .AgPurposeRanking_Items .fs-c-productListCarousel__list { width: 100%; } .AgPurposeRanking_Note { margin: 16px auto 0; padding: 0; color: var(--ag-ink-soft); font-size: 13px; font-weight: 400; line-height: 1.8; text-align: center; } /* 追従ナビ分のアンカー位置補正（既存 #Link_◯◯ 群と同値=185px） */ #Link_Purpose_Ranking { scroll-margin-top: 185px; } /* ===== ↓↓ ここからギフトシミュレーター工数削減アドオン追記 ↓↓ ===== */ /* ========================================================= ギフトシミュレーター工数削減アドオン（追記CSS） v1.0 ブランドトークン（--ag-accent 等）に追従。PC/SP共通。 ========================================================= */ .Gift_Simulator_Omakase{text-align:center;margin:8px 0 18px;} .Gift_Simulator .OmakaseBtn{display:inline-block;min-width:280px;padding:14px 28px;background:var(--ag-accent,#B08D57);color:#fff;font-family:var(--ag-font-sans,sans-serif);font-weight:700;font-size:15px;letter-spacing:.04em;border-radius:6px;cursor:pointer;text-decoration:none;transition:opacity .2s;} .Gift_Simulator .OmakaseBtn:hover{opacity:.85;} .Gift_Simulator .OmakaseBtn span::before{content:"\2605 ";} .Gift_Simulator_Omakase_Note{margin-top:8px;font-size:12px;color:var(--ag-ink-soft,#8A8278);line-height:1.6;font-family:var(--ag-font-sans,sans-serif);} .Wrap_Not_Select{margin-top:16px;text-align:center;} .Gift_Simulator_InlineError{display:none;margin:0 0 14px;padding:12px 16px;background:#FBEFEF;border:1px solid #E0AEAE;border-left:4px solid #C0392B;border-radius:4px;color:#A5332B;font-size:14px;line-height:1.6;font-weight:700;font-family:var(--ag-font-sans,sans-serif);} .Gift_Simulator_Remain{display:none;width:fit-content;margin:0 auto 10px;padding:6px 14px;background:var(--ag-bg-head,#F0E8DE);color:var(--ag-accent,#B08D57);font-size:12px;font-weight:700;border-radius:999px;font-family:var(--ag-font-sans,sans-serif);} @media screen and (max-width:768px){ .Gift_Simulator .OmakaseBtn{width:100%;min-width:0;padding:15px 16px;} .Gift_Simulator_Omakase_Note{font-size:11px;padding:0 8px;} .Gift_Simulator_InlineError{font-size:13px;} } /* ===== 選択状態の強調（枠＋淡色塗り＋チェック）＋おすすめバッジ ===== */ .Gift_Simulator .Step_Common_List label{position:relative;} .Gift_Simulator .Step_Common_List input:checked + label{ background:var(--ag-accent-soft,#F8F3EA)!important; border-color:var(--ag-accent,#B08D57)!important; box-shadow:0 0 0 2px var(--ag-accent,#B08D57) inset!important; border-radius:8px; } .Gift_Simulator .Step_Common_List input:checked + label::after{ content:"\2714";position:absolute;top:6px;right:6px;z-index:2; width:22px;height:22px;line-height:22px;text-align:center; background:var(--ag-accent,#B08D57);color:#fff;border-radius:50%;font-size:13px; } .Gift_Simulator input:checked + label.NomalRadio{ background:var(--ag-accent-soft,#F8F3EA)!important; border-color:var(--ag-accent,#B08D57)!important; color:var(--ag-ink,#3A3732)!important; box-shadow:0 0 0 1.5px var(--ag-accent,#B08D57) inset!important; } .Gift_Simulator .Noshi_Add_Side label{position:relative;} .Gift_Simulator .Noshi_Add_Side input:checked + label .Noshi_Add_Side_Select{ background:var(--ag-accent-soft,#F8F3EA)!important; box-shadow:0 0 0 2px var(--ag-accent,#B08D57) inset!important;border-radius:8px; } .Gift_Simulator .Noshi_Add_Side input:checked + label::after{ content:"\2714";position:absolute;top:6px;right:6px;z-index:2; width:22px;height:22px;line-height:22px;text-align:center; background:var(--ag-accent,#B08D57);color:#fff;border-radius:50%;font-size:13px; } .Gift_Simulator_RecoBadge{ position:absolute;top:-9px;left:8px;z-index:3; background:var(--ag-accent,#B08D57);color:#fff; font-size:11px;font-weight:700;padding:1px 9px;border-radius:999px; font-family:var(--ag-font-sans,sans-serif);white-space:nowrap; } /* ===== ①② 不要オプションを候補と同列のカードに ===== */ .Gift_Simulator .Step_Common_List .Not_Select.InList_None{ flex:0 0 100%;width:100%;grid-column:1 / -1;margin:0 0 6px;text-align:center; } .Gift_Simulator .Step_Common_List .Not_Select.InList_None label.NomalRadio{ display:inline-block;width:100%;box-sizing:border-box;padding:12px; border:1px dashed var(--ag-line,#E3DACC);border-radius:8px; } /* ===== ③ ナビのクリック化／確認画面の「変更」リンク ===== */ .Gift_Simulator .Gift_Simulator_Navi_Box > div[href]{cursor:pointer;} .Gift_Simulator .Gift_Simulator_Navi_Box:not(.deactive) > div[href]:hover span{text-decoration:underline;} .Gift_Simulator .Result_Edit{ display:inline-block;margin:6px 0 0;padding:3px 12px; font-size:12px;font-weight:700;color:var(--ag-accent,#B08D57); border:1px solid var(--ag-accent,#B08D57);border-radius:999px; text-decoration:none;font-family:var(--ag-font-sans,sans-serif);cursor:pointer; } .Gift_Simulator .Result_Edit:hover{background:var(--ag-accent-soft,#F8F3EA);} .Gift_Simulator .Result_Step01 .Result_Edit{margin-left:10px;} /* ===== 緑→オレンジ：内のし・外のしの選択表示を統一 ===== */ .Gift_Simulator .Noshi_Add_Side .Noshi_Add_Side_Name::before, .Gift_Simulator .Noshi_Add_Side .Noshi_Add_Side_Name::after{display:none!important;} .Gift_Simulator .Noshi_Add_Side label:hover .Noshi_Add_Side_Select, .Gift_Simulator .Noshi_Add_Side input:checked + label .Noshi_Add_Side_Select{border-color:var(--ag-accent,#B08D57)!important;} /* ===== 未到達タブのグレーアウト（ゲーティング）===== */ .Gift_Simulator .Gift_Simulator_Navi_Box.nav-locked{opacity:.35;} .Gift_Simulator .Gift_Simulator_Navi_Box.nav-locked > div[href]{cursor:not-allowed;} .Gift_Simulator .Gift_Simulator_Navi_Box.nav-locked > div[href]:hover span{text-decoration:none;} /* ===== 不要(.NomalRadio)もオレンジ丸＋白チェックに統一／カードの緑枠除去 ===== */ .Gift_Simulator input:checked + label.NomalRadio::before{ background:var(--ag-accent,#B08D57)!important;border-color:var(--ag-accent,#B08D57)!important; } .Gift_Simulator input:checked + label.NomalRadio::after{ content:"\2714"!important;background:transparent!important; width:16px!important;height:16px!important;line-height:16px!important; top:1px!important;left:0!important;text-align:center!important; color:#FFFFFF!important;font-size:11px!important; } .Gift_Simulator .Step_Common_List label::after{border-color:var(--ag-accent,#B08D57)!important;} .Gift_Simulator .Step_Common_List input:checked + label::after{left:auto!important;border:none!important;} /* ===== 修正: リスト内の不要(のし不要/カード不要)を明示的にオレンジ丸＋白チェック ===== */ .Gift_Simulator .Step_Common_List .Not_Select.InList_None label.NomalRadio{position:relative;} .Gift_Simulator .Step_Common_List .Not_Select.InList_None input:checked + label.NomalRadio::before{ content:""!important;position:absolute!important;top:50%!important;left:12px!important; -webkit-transform:translateY(-50%)!important;transform:translateY(-50%)!important;margin:0!important; width:18px!important;height:18px!important;border-radius:50%!important; background:var(--ag-accent,#B08D57)!important;border:1px solid var(--ag-accent,#B08D57)!important; } .Gift_Simulator .Step_Common_List .Not_Select.InList_None input:checked + label.NomalRadio::after{ content:"\2714"!important;position:absolute!important;top:50%!important;left:12px!important; -webkit-transform:translateY(-50%)!important;transform:translateY(-50%)!important; width:18px!important;height:18px!important;line-height:18px!important;text-align:center!important; background:transparent!important;border:none!important;color:#FFFFFF!important;font-size:12px!important; } /* ===== 修正: 内のし・外のしの選択にチェックを表示（ボックス右上）===== */ .Gift_Simulator .Noshi_Add_Side label .Noshi_Add_Side_Select{position:relative;} .Gift_Simulator .Noshi_Add_Side input:checked + label::after{content:none!important;} .Gift_Simulator .Noshi_Add_Side input:checked + label .Noshi_Add_Side_Select::after{ content:"\2714"!important;position:absolute!important;top:8px!important;right:8px!important; width:22px!important;height:22px!important;line-height:22px!important;text-align:center!important; background:var(--ag-accent,#B08D57)!important;color:#FFFFFF!important;border-radius:50%!important; font-size:13px!important;z-index:3!important; } /* ========================================= FV：3訴求ブロック PC（横3列） ※色・書体は既存トークン参照（--ag-accent ほか） ========================================= */ .AgFvFeatures, .AgFvFeatures *, .AgFvFeatures *::before, .AgFvFeatures *::after { box-sizing: border-box; } .AgFvFeatures { width: 100%; margin: 0; padding: 0; font-family: var(--ag-font-sans); } .AgFvFeatures_Inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .AgFvFeatures_List { display: flex; width: 100%; margin: 28px 0 0; background: #ffffff; border: 1px solid var(--ag-line); border-radius: 18px; overflow: hidden; } .AgFvFeatures_List .AgFvFeat { flex: 1; display: flex; align-items: center; gap: 14px; padding: 20px 22px; } .AgFvFeatures_List .AgFvFeat + .AgFvFeat { border-left: 1px solid var(--ag-line); } .AgFvFeat_Icon { flex: none; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ag-line); border-radius: 50%; background: var(--ag-bg-soft); color: var(--ag-accent); } .AgFvFeat_Icon svg { width: 25px; height: 25px; } .AgFvFeat_Main { display: block; color: var(--ag-ink); font-size: 15px; font-weight: 700; line-height: 1.5; letter-spacing: 0.02em; } .AgFvFeat_Sub { display: block; margin-top: 4px; color: var(--ag-ink-soft); font-size: 12px; font-weight: 400; line-height: 1.6; } .AgFvFeat .nb { white-space: nowrap; } /* ========================================================= 法人ギフトページ追加CSS ========================================================= */ /* ---- FV 5訴求（法人ページのみ：修飾クラス AgFvFeatures--biz に限定）---- */ .AgFvFeatures--biz .AgFvFeatures_List .AgFvFeat { padding: 16px 14px; gap: 10px; } .AgFvFeatures--biz .AgFvFeat_Icon { width: 42px; height: 42px; } .AgFvFeatures--biz .AgFvFeat_Icon svg { width: 22px; height: 22px; } .AgFvFeatures--biz .AgFvFeat_Main { font-size: 13.5px; } .AgFvFeatures--biz .AgFvFeat_Sub { font-size: 11.5px; } /* SPは既存CSSで縦積み(flex-direction:column)になるため5つでも自動対応 */ /* ---- 共通：法人セクションの軽い余白調整（任意）---- */ .AgBizSection_Lead { text-align: center; color: var(--ag-ink-soft); font-size: 14px; line-height: 1.9; margin: 0 auto 28px; max-width: 760px; } /* ---- ご相談〜納品の流れ AgFlow ---- */ .AgFlow_List { display: flex; gap: 16px; } .AgFlow_Step { flex: 1; background: #fff; border: 1px solid var(--ag-line); border-radius: 14px; padding: 24px 16px; text-align: center; } .AgFlow_Num { width: 38px; height: 38px; border-radius: 50%; background: var(--ag-accent); color: #fff; font-family: var(--ag-font-en); font-size: 18px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; } .AgFlow_StepTitle { font-family: var(--ag-font-serif); font-weight: 600; font-size: 15px; color: var(--ag-ink); margin-bottom: 6px; } .AgFlow_StepText { font-size: 12.5px; color: var(--ag-ink-soft); line-height: 1.7; } @media (max-width: 768px) { .AgFlow_List { flex-direction: column; } } /* ---- 見積・相談 CTA AgContactCta ---- */ .AgContactCta_Inner { background: var(--ag-bg-head); border-radius: 18px; padding: 32px; display: flex; gap: 28px; flex-wrap: wrap; align-items: center; justify-content: space-between; } .AgContactCta_Body { flex: 1; min-width: 260px; } .AgContactCta_Title { font-family: var(--ag-font-serif); font-weight: 600; font-size: 20px; color: var(--ag-ink); margin-bottom: 10px; } .AgContactCta_Text { font-size: 13.5px; color: var(--ag-ink); line-height: 1.8; margin-bottom: 16px; } .AgContactCta_Btn { display: inline-block; background: var(--ag-accent); color: #fff; font-weight: 700; text-decoration: none; border-radius: 6px; padding: 15px 28px; letter-spacing: .04em; } .AgContactCta_Tel { background: #fff; border: 1px solid var(--ag-line); border-radius: 14px; padding: 18px 22px; text-align: center; min-width: 240px; } .AgContactCta_TelLabel { font-size: 12px; color: var(--ag-ink-soft); } .AgContactCta_TelNum { font-family: var(--ag-font-en); font-size: 26px; color: var(--ag-accent); letter-spacing: .04em; display: block; margin: 2px 0; text-decoration: none; } .AgContactCta_TelNote { font-size: 12px; color: var(--ag-ink-soft); } .AgContactForm { margin-top: 24px; } .AgContactForm iframe { width: 100%; border: 0; min-height: 1200px; } @media (max-width: 768px) { .AgContactCta_Inner { padding: 20px; } } /* ---- マナー AgManner ---- */ .AgManner_Grid { display: flex; gap: 16px; flex-wrap: wrap; } .AgManner_Card { flex: 1; min-width: 240px; background: #fff; border: 1px solid var(--ag-line); border-radius: 14px; padding: 22px; } .AgManner_CardTitle { font-family: var(--ag-font-serif); font-weight: 600; font-size: 15px; color: var(--ag-ink); margin-bottom: 8px; padding-left: 14px; border-left: 3px solid var(--ag-accent); } .AgManner_CardText { font-size: 13px; color: var(--ag-ink-soft); line-height: 1.8; } /* ---- FAQ アコーディオン AgFaq ---- */ .AgFaq_List { max-width: 860px; margin: 0 auto; } .AgFaq_Item { background: #fff; border: 1px solid var(--ag-line); border-radius: 10px; margin-bottom: 12px; overflow: hidden; } .AgFaq_Q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font-family: var(--ag-font-serif); font-weight: 600; font-size: 15px; color: var(--ag-ink); padding: 18px 48px 18px 52px; position: relative; line-height: 1.6; } .AgFaq_Q::before { content: "Q"; position: absolute; left: 20px; top: 16px; font-family: var(--ag-font-en); color: var(--ag-accent); font-size: 20px; } .AgFaq_Q::after { content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--ag-accent); border-bottom: 2px solid var(--ag-accent); transform: translateY(-70%) rotate(45deg); transition: transform .2s; } .AgFaq_Item.is-open .AgFaq_Q::after { transform: translateY(-30%) rotate(-135deg); } .AgFaq_A { display: none; padding: 0 24px 20px 52px; font-size: 13.5px; color: var(--ag-ink-soft); line-height: 1.9; } .AgFaq_Item.is-open .AgFaq_A { display: block; } /* ---- コラム枠 ---- ※コラムは既存テーマの Column_* クラス（新築内祝い等と共通）を流用するため、追加CSSは不要です（このセクションのCSSは持ちません）。 */ /* ========================================================= 追加：法人のお客様ヘッダー調整 PC 最終版・用途〜法人のお客様を1列で等間隔に配置・法人のお客様だけ離れる原因になる余白・全角スペース影響をCSS側でも抑制 ========================================================= */ @media screen and (min-width: 768px) { .Header_Main .Header_Content01_02 { display: flex !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: nowrap !important; } .Header_Main .Header_Content01_02 .Header_Navi { display: flex !important; align-items: center !important; justify-content: flex-end !important; flex: 0 1 auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; } .Header_Main .Header_Navi .Header_Navi_List01 { display: flex !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: nowrap !important; column-gap: 44px !important; row-gap: 0 !important; width: auto !important; margin: 0 !important; padding: 0 !important; white-space: nowrap !important; font-size: inherit !important; } .Header_Main .Header_Navi .Header_Navi_List01 > .Header_Navi_List01_Box { flex: 0 0 auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; } .Header_Main .Header_Navi .Header_Navi_List01 > .Header_Navi_List01_Box > .Header_Navi_Trigger { display: inline-block !important; white-space: nowrap !important; } .Header_Main .Header_Navi .Header_Navi_List01 > .Header_Navi_List01_Box.Header_Navi_BusinessGift { margin: 0 !important; padding: 0 !important; } .Header_Main .Header_Navi .Header_Navi_List01 > .Header_Navi_List01_Box.Header_Navi_BusinessGift > a { display: inline-block !important; margin: 0 !important; padding-left: 0 !important; padding-right: 0 !important; white-space: nowrap !important; } .Header_Main .Header_Content01_02 .Header_IconList { flex: 0 0 auto !important; margin-left: 28px !important; } } /* ========================================================= トップページ FV改修（AgTopFv）PC版追加CSS【最終版】・AgTopFv追記分を丸ごとこの内容に差し替えてください・白文字＋左下配置＋下部の薄い墨グラデーション（可読性の保険） ========================================================= */ .AgTopFv { position: relative; } /* 下部の薄い墨グラデーション ※不要なら content: none に */ .AgTopFv::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(0deg, rgba(40, 34, 26, 0.45) 0%, rgba(40, 34, 26, 0.16) 34%, rgba(40, 34, 26, 0) 62%); pointer-events: none; } /* スライド高さの保険（テーマ側で高さ指定がある場合はそちらが優先） */ .AgTopFv .swiper-slide { min-height: 520px; } /* 固定テキスト：左下寄せ */ .AgTopFv_Text { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: flex-start; pointer-events: none; } .AgTopFv_TextInner { width: 100%; max-width: none; margin: 0; padding: 0 60px 64px 56px; /* 位置調整はここ */ background: none; } .AgTopFv_Title { margin: 0; padding: 0; color: #ffffff; font-family: var(--ag-font-serif); font-size: 34px; font-weight: 600; line-height: 1.7; letter-spacing: 0.16em; text-shadow: 0 2px 14px rgba(30, 24, 16, 0.35); } .AgTopFv_TitleSub { display: block; margin-top: 12px; color: #ffffff; font-family: var(--ag-font-sans); font-size: 13px; font-weight: 500; line-height: 1.6; letter-spacing: 0.08em; } .AgTopFv_Desc { margin: 16px 0 0; padding: 0; color: #ffffff; font-size: 14px; font-weight: 400; line-height: 2.1; letter-spacing: 0.05em; text-shadow: 0 1px 10px rgba(30, 24, 16, 0.35); } .AgTopFv_ConceptLink { display: inline-block; margin-top: 18px; padding-bottom: 3px; border-bottom: 1px solid rgba(255, 255, 255, 0.7); color: #ffffff !important; font-size: 12.5px; font-weight: 500; letter-spacing: 0.12em; text-decoration: none; pointer-events: auto; transition: opacity 0.25s ease; } .AgTopFv_ConceptLink::after { content: " →"; font-size: 11px; } .AgTopFv_ConceptLink:hover, .AgTopFv_ConceptLink:focus { opacity: 0.75; text-decoration: none; outline: none; } /* ---- PC/SP 表示切替（FV・アンカー帯専用） ---- */ .AgTopFv_Pc { display: inline; } .AgTopFv_Sp { display: none; } /* ---- アンカーボタン帯【1行×4等幅】 ---- */ .AgTopFv_Anchors.Special_Group_FV_Btns { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 1120px; margin: 28px auto 0; padding: 0 20px; } .AgTopFv_Anchors .AgBtn_Outline { width: 100%; min-width: 0; min-height: 54px; padding: 12px 12px; font-size: 14px; line-height: 1.45; letter-spacing: 0.04em; white-space: normal; word-break: keep-all; } /* ---- トップ用アンカー位置補正 ---- */ #TopLink_Choose, #TopLink_PurposeRanking, #TopLink_CategoryRanking, #TopLink_GiftSearch, #TopLink_ItemList, #TopLink_Set, #TopLink_Service, #TopLink_Column { scroll-margin-top: 185px; } /* ========================================================= トップ：ギフトの選び方（AgTopChoose）PC版追加CSS ========================================================= */ .AgTopChoose, .AgTopChoose *, .AgTopChoose *::before, .AgTopChoose *::after { box-sizing: border-box; } .AgTopChoose { padding: 72px 20px 76px; background: #ffffff; } .AgTopChoose_Inner { max-width: 1120px; margin: 0 auto; } /* 見出し */ .AgTopChoose_Head { text-align: center; } .AgTopChoose_TitleEn { margin: 0 0 8px; padding: 0; color: var(--ag-accent); font-family: var(--ag-font-en); font-size: 14px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; } .AgTopChoose_TitleJp { margin: 0; padding: 0; color: var(--ag-ink); font-family: var(--ag-font-serif); font-size: 30px; font-weight: 600; line-height: 1.6; letter-spacing: 0.12em; } .AgTopChoose_Lead { margin: 14px 0 0; padding: 0; color: var(--ag-ink); font-size: 14px; line-height: 2; letter-spacing: 0.04em; } /* タブ */ .AgTopChoose_Tabs { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px; margin: 36px auto 34px; } .AgTopChoose_Tab { appearance: none; -webkit-appearance: none; margin: 0; padding: 12px 28px 13px; border: none; border-bottom: 2px solid var(--ag-line); border-radius: 0; background: transparent; color: var(--ag-ink-soft); font-family: inherit; font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: 0.06em; cursor: pointer; transition: color 0.2s ease, border-color 0.2s ease; } .AgTopChoose_Tab:hover, .AgTopChoose_Tab:focus-visible { color: var(--ag-ink); outline: none; } .AgTopChoose_Tab.is-active { color: var(--ag-ink); font-weight: 700; border-bottom-color: var(--ag-accent); } /* パネル */ .AgTopChoose_Panel[hidden] { display: none; } /* アイコングリッド：5列（用途・贈る相手） */ .AgTopChoose_List { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin: 0; padding: 0; list-style: none; } /* カテゴリ（4項目）は4列・中央寄せ */ .AgTopChoose_List--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: 900px; margin: 0 auto; } .AgTopChoose_List li { margin: 0; padding: 0; } /* アイコンカード */ .AgTopChoose_Item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; min-height: 148px; padding: 20px 10px 16px; background: #ffffff; border: 1px solid var(--ag-line); border-radius: 16px; color: var(--ag-ink); text-decoration: none; transition: border-color 0.25s ease, background-color 0.25s ease; } .AgTopChoose_Item:hover, .AgTopChoose_Item:focus { border-color: var(--ag-accent); background: var(--ag-accent-soft); color: var(--ag-ink); text-decoration: none; outline: none; } .AgTopChoose_Icon { display: block; width: 80px; height: 80px; object-fit: contain; } .AgTopChoose_Label { font-size: 13.5px; font-weight: 500; line-height: 1.5; letter-spacing: 0.02em; text-align: center; } /* ========================================================= トップ：用途別ランキング追加CSS PC【最終版v6・検証済み】・商品名・金額の書体・色は既存CSS（Osusume_Item経由）のまま変更なし・商品はJSがトップ専用グリッド（AgTopRankGrid）へ再構築 → 列数・バッジ位置をトップ専用CSSで完全制御 ========================================================= */ .AgTopPurposeRanking .AgTopRankCta { display: flex; justify-content: center; margin: 30px auto 0; } /* 順位バッジ（上に9pxはみ出す）の切り取り防止 */ .AgTopPurposeRanking .Osusume_Item, .AgTopPurposeRanking .AgCategoryRanking_Items { overflow: visible !important; } /* トップ専用商品グリッド：5列×1行 */ .AgTopPurposeRanking .AgTopRankGrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 14px; width: 100%; margin: 0; padding: 14px 0 0; /* バッジの逃げ */ list-style: none; } .AgTopPurposeRanking .AgTopRankGrid > li { position: relative; min-width: 0; margin: 0; padding: 0; float: none; } /* 移設した商品要素は列幅いっぱいに（順位バッジは対象外） */ .AgTopPurposeRanking .AgTopRankGrid > li > *:not(.AgRankBadge) { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; float: none !important; } /* SP用「すべて見る」カードはPCでは非表示（PCは5列グリッドのまま） */ .AgTopPurposeRanking .AgTopRankGrid > li.AgTopRankMoreCard { display: none; } /* ========================================================= トップ：カテゴリ別ランキング追加CSS PC【v2・完全版】・PC用CSSファイルの末尾に追記してください・用途別ランキング（最終形）と同一値・スコープのみカテゴリ用・商品名・金額の書体・色は既存CSS（Osusume_Item経由）のまま変更なし ========================================================= */ .AgTopCategoryRanking .AgTopRankCta { display: flex; justify-content: center; margin: 30px auto 0; } /* 順位バッジ（上に9pxはみ出す）の切り取り防止 */ .AgTopCategoryRanking .Osusume_Item, .AgTopCategoryRanking .AgCategoryRanking_Items { overflow: visible !important; } /* トップ専用商品グリッド：5列×1行 */ .AgTopCategoryRanking .AgTopRankGrid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px 14px; width: 100%; margin: 0; padding: 14px 0 0; /* バッジの逃げ */ list-style: none; } .AgTopCategoryRanking .AgTopRankGrid > li { position: relative; min-width: 0; margin: 0; padding: 0; float: none; } /* 移設した商品要素は列幅いっぱいに（順位バッジは対象外） */ .AgTopCategoryRanking .AgTopRankGrid > li > *:not(.AgRankBadge) { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; float: none !important; } /* SP用「すべて見る」丸ボタンはPCでは非表示（PCは5列グリッドのまま） */ .AgTopCategoryRanking .AgTopRankGrid > li.AgTopRankMoreCard { display: none; } /* ========================================================= トップ：かんたんギフト検索（AgTopGiftSearch）追加CSS PC【v1】・PC用CSSファイルの末尾に追記してください・検索フォーム本体のデザインは既存AgGiftFinderのまま変更なし ========================================================= */ /* 見出しをTitle01形式に差し替えたため、旧見出し前提のマイナスマージン（-20px）を解除し、見出しとの間隔を調整 */ .AgTopGiftSearch .AgGiftFinder { margin: 30px auto 0; } .AgTopGiftSearch .AgGiftFinder_Form { margin-top: 0; } /* ここから W4-05 PC ------------------------------------- */ /* ① 並び順：「ご注文手続きへ進む」を上、「ログインして進む」を下にあわせて、サイト側が持っている余白（50px / 20px）を入れ替えてボタン同士の間隔を当初と同じ 20px に戻す */ .fs-c-purchaseHere.fs-c-cartPayment{ display: flex; flex-direction: column; align-items: center; } .fs-c-purchaseHere.fs-c-cartPayment > .fs-c-purchaseHere__message{ order: 1; } .fs-c-purchaseHere.fs-c-cartPayment > .fs-c-buttonContainer:not(.fs-c-buttonContainer--loginAndPurchase){ order: 2; /* ご注文手続きへ進む＝主ボタン */ margin-top: 50px !important; /* 文との間隔（当初の値） */ } .fs-c-purchaseHere.fs-c-cartPayment > .fs-c-buttonContainer--loginAndPurchase{ order: 3; /* ログインして進む＝副ボタン */ margin-top: 20px !important; /* ボタン同士の間隔（当初の値） */ } /* ② 副ボタン「ログインして進む」だけ、白地＋黒枠に変える主ボタン（ご注文手続きへ進む）は黒のまま、サイズもそのまま */ a.fs-c-button--loginAndPurchase{ background-color: #ffffff !important; background-image: none !important; color: #111111 !important; border: 1px solid #111111 !important; } a.fs-c-button--loginAndPurchase .fs-c-button__label{ color: #111111 !important; } /* ③ 副ボタンのマウスオーバー（文字が見えなくならないように） */ a.fs-c-button--loginAndPurchase:hover{ background-color: #111111 !important; color: #ffffff !important; border-color: #111111 !important; } a.fs-c-button--loginAndPurchase:hover .fs-c-button__label{ color: #ffffff !important; } /* ここまで W4-05 PC ------------------------------------- */ /* レビューの「購入者」表示を全ページで非表示 */ .fs-c-reviewer__status { display: none; } /* W6-05 カート：ギフト内容の下に「変更は商品ページから」を表示（2026-08-26 v2） ★ .fs-body-cart は必須（外すと他画面にも出る） ★ \A と white-space:pre-line で改行位置を固定 */ .fs-body-cart .fs-c-cartTable__dataCell--product::after { content: "※ のし・ラッピング・メッセージカードの変更は、\A上の商品名から商品ページに戻って選び直してください。"; white-space: pre-line; display: block; margin-top: 12px; padding: 10px 12px; background: #FBF8F4; border-left: 3px solid #B08D57; font-size: 13px; line-height: 1.8; color: #333333; } /* お客様の声（トップページ）PC用／ 2026-08-26 v5（縦型4枚見せ・隙間を詰めて本文5行） */ .AgVoice{--v-gold:#B08D57;--v-sage:#6A7A58;--v-line:#E5E0D8;--v-muted:#7A7A72;--v-gap:16px;} .Section_Wrap.AgVoice{padding-top:72px;padding-bottom:72px;} .AgVoice .AgVoice_Lead{text-align:center;margin-top:20px;} .AgVoice .AgVoice_Lead p{color:#3A3732;font-size:16px;line-height:32px;} .AgVoice_Slider{margin-top:32px;} .AgVoice_Track{display:flex;gap:var(--v-gap);overflow-x:auto;scroll-snap-type:x mandatory; scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none;} .AgVoice_Track::-webkit-scrollbar{display:none;} .AgVoice_Card{flex:0 0 calc((100% - var(--v-gap) * 3) / 4);scroll-snap-align:start; background:#fff;border:1px solid var(--v-line);display:flex;flex-direction:column;} .AgVoice_Prod{margin:0;padding:16px 18px 12px;font-size:14px;line-height:1.7;} .AgVoice_Prod a, .AgVoice_Prod a:link, .AgVoice_Prod a:visited{color:var(--v-sage);text-decoration:none; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden; min-height:calc(1.7em * 2);} .AgVoice_Prod a:hover{color:var(--v-sage);text-decoration:underline;opacity:1;} .AgVoice_Thumb{aspect-ratio:1/1;overflow:hidden;background:#F4F1EC;} .AgVoice_Thumb img{width:100%;height:100%;object-fit:cover;display:block;} .AgVoice_Card_Body{padding:16px 18px 20px;display:flex;flex-direction:column;flex:1;} .AgVoice_Stars{display:inline-flex;color:var(--v-gold);letter-spacing:.08em;font-size:14px;} .AgVoice_Text{margin:12px 0 0;font-size:13px;line-height:1.85;color:#333;flex:1; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:5;overflow:hidden;} .AgVoice_Meta{margin:14px 0 0;font-size:11px;line-height:1.7;color:var(--v-muted);letter-spacing:.04em;} .AgVoice_Meta span{display:block;} .AgVoice_Ctrl{display:flex;align-items:center;justify-content:center;gap:20px;margin-top:24px;} .AgVoice_Arrow{width:48px;height:48px;border-radius:50%;border:1px solid var(--v-gold); background:#fff;color:var(--v-gold);display:flex;align-items:center;justify-content:center; cursor:pointer;padding:0;transition:.2s;flex:0 0 auto;} .AgVoice_Arrow svg{width:20px;height:20px;} .AgVoice_Arrow:hover{background:var(--v-gold);color:#fff;opacity:1;} .AgVoice_Arrow:disabled{opacity:.25;cursor:default;} .AgVoice_Arrow:focus-visible{outline:2px solid var(--v-sage);outline-offset:3px;} .AgVoice_Dots{display:flex;gap:8px;align-items:center;} .AgVoice_Dots span{width:24px;height:2px;background:var(--v-line);display:block;transition:.2s;} .AgVoice_Dots span.is-active{background:var(--v-gold);} .AgVoice_Bar{display:none;} .AgVoice_More{text-align:center;margin-top:28px;} .AgVoice_More a, .AgVoice_More a:link, .AgVoice_More a:visited{display:inline-block;padding:15px 44px;border:1px solid var(--v-gold); color:var(--v-gold);font-size:14px;letter-spacing:.08em;text-decoration:none;background:#fff;transition:.2s;} .AgVoice_More a:hover{background:var(--v-gold);color:#fff;opacity:1;} } /* ==== 2. PC ここまで ==== */ /* ========================================================================== 3. SP（767px以下） ─ futureshop「SP用CSS」の全内容 ========================================================================== */ @media screen and (max-width: 767px) { /* ========================================================= ATELIER GIFT SP版CSS 改修版・デザイントークン導入（生成×真鍮ゴールド）・書体：見出し=Noto Serif JP / 英字=Cormorant Garamond / 本文=Noto Sans JP ・ランキング3種タブ：下線式セグメント型（横スクロールなし・折返し）・順位円形ラベル（CSSカウンター・HTML変更不要）・追従ローカルナビ（AgStickyNav：4項目均等グリッド） ※セクション交互背景（BG_Gray/BG_White）は現状のまま変更なし ========================================================= */ /* ========================================= 00. デザイントークン（全ページ共通） ========================================= */ /* ========================================= 01. 全ページ共通：書体システム ========================================= */ body { font-family: var(--ag-font-sans); } .Title01_JP, .Title02_JP { font-family: var(--ag-font-serif) !important; font-weight: 600 !important; letter-spacing: 0.1em; color: var(--ag-ink); } .Title01_EN, .F_Bodoni { font-family: var(--ag-font-en) !important; color: var(--ag-accent); letter-spacing: 0.22em; text-transform: uppercase; } html { scroll-behavior: smooth; } .fs-preview-header { display: none; } /* 商品説明ブロック全体 */ .ItemDetail_Desc { margin: 32px 0 20px 0; } .ItemDetail_Desc_Title { display: block; margin: 0 0 18px 0; padding: 0; font-size: 18px; font-weight: 800; line-height: 1.5; color: #000000; letter-spacing: -0.03em; } .ItemDetail_Desc_Text { display: block; margin: 0; padding: 0; font-size: 14px; font-weight: 400; line-height: 1.9; color: #222222; letter-spacing: 0; } .ItemDetail_Desc_Text p { margin: 0 0 1em 0; } .ItemDetail_Desc_Text p:last-child { margin-bottom: 0; } /* ===== SP ヘッダーバー縦幅 0.8倍カスタマイズ ===== */ .Header_Main .Header_SP_Menu_List { padding-top: calc(100vw / 750 * 16); padding-bottom: calc(100vw / 750 * 16); } .Header_Main .Header_SP_Menu .Header_Logo { width: calc(100vw / 750 * 171); } .Header_Main .Header_SP_Menu_List .Header_SP_Menu_Trigger { height: calc(100vw / 750 * 27); width: calc(100vw / 750 * 32); } .Header_Main .Header_SP_Menu_List .Header_SP_Menu_Trigger span { width: calc(100vw / 750 * 32); } .Header_Main .Header_SP_Menu_List .Header_SP_Menu_Cart { width: calc(100vw / 750 * 27); } /* ===== 追加：SPヘッダー検索開閉 ===== */ .Header_SP_SearchToggle { display: none; } @media screen and (max-width: 767px) { .Header_Main .Header_SP_Menu { position: relative; } .Header_Main .Header_SP_Menu_List { position: relative; display: block; height: calc(100vw / 750 * 72); min-height: calc(100vw / 750 * 72); padding-top: 0; padding-bottom: 0; padding-left: calc(100vw / 750 * 20); padding-right: calc(100vw / 750 * 20); box-sizing: border-box; } .Header_Main .Header_SP_Menu_List .Header_SP_Menu_Trigger { position: absolute; left: calc(100vw / 750 * 20); top: 50%; width: calc(100vw / 750 * 32); height: calc(100vw / 750 * 27); transform: translateY(-50%); margin: 0; line-height: 0; } .Header_Main .Header_SP_Menu_List .Header_SP_Menu_Trigger span { width: calc(100vw / 750 * 32); } .Header_Main .Header_SP_Menu .Header_Logo { position: absolute; left: 50%; top: 50%; width: calc(100vw / 750 * 137); transform: translate(-50%, -50%); margin: 0; padding: 0; z-index: 1; line-height: 0; } .Header_Main .Header_SP_Menu .Header_Logo a { display: block; margin: 0; padding: 0; line-height: 0; } .Header_Main .Header_SP_Menu .Header_Logo img { display: block; width: 100%; height: auto; margin: 0; padding: 0; vertical-align: top; } .Header_Main .Header_SP_Menu_List .Header_SP_Menu_Cart { position: absolute; right: calc(100vw / 750 * 20); top: 50%; width: calc(100vw / 750 * 27); height: calc(100vw / 750 * 27); transform: translateY(-50%); margin: 0; line-height: 0; } .Header_Main .Header_SP_Menu_List .Header_SP_Menu_Cart a, .Header_Main .Header_SP_Menu_List .Header_SP_Menu_Cart img { display: block; width: 100%; height: auto; margin: 0; padding: 0; vertical-align: top; } .Header_SP_Menu_Search { position: absolute; right: calc(100vw / 750 * 70); top: 50%; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; width: calc(100vw / 750 * 27); height: calc(100vw / 750 * 27); cursor: pointer; line-height: 0; z-index: 2; } .Header_SP_Menu_Search img { display: block; width: 100%; height: auto; margin: 0; padding: 0; vertical-align: top; } .Header_SP_SearchDrawer { max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; background: #ffffff; border-top: 1px solid rgba(0, 0, 0, 0.08); transition: max-height 0.28s ease, opacity 0.2s ease, visibility 0.2s ease, padding 0.28s ease; padding: 0 calc(100vw / 750 * 20); box-sizing: border-box; } .Header_SP_SearchDrawer_Inner { position: relative; padding-right: 34px; } .Header_SP_SearchDrawer_Form { width: 100%; } .Header_SP_SearchDrawer .fs-p-searchForm { width: 100%; } .Header_SP_SearchDrawer .fs-p-searchForm__inputGroup { display: flex; width: 100%; } .Header_SP_SearchDrawer .fs-p-searchForm__input { width: 100%; min-width: 0; height: 40px; padding: 0 12px; font-size: 13px; box-sizing: border-box; } .Header_SP_SearchDrawer .fs-p-searchForm__button { flex-shrink: 0; height: 40px; padding: 0 12px; font-size: 12px; white-space: nowrap; } .Header_SP_SearchDrawer_Close { position: absolute; right: 0; top: 50%; transform: translateY(-50%); display: flex; justify-content: center; align-items: center; width: 28px; height: 28px; font-size: 22px; line-height: 1; color: var(--ag-ink); cursor: pointer; text-decoration: none; } #sp-header-search-toggle:checked ~ .Header_SP_SearchDrawer { max-height: 100px; opacity: 1; visibility: visible; padding-top: 10px; padding-bottom: 10px; } #sp-header-search-toggle:checked ~ .Header_SP_Menu_List .Header_SP_Menu_Search { opacity: 0.65; } } /* ===== トップページ：カートアイコン白表示（SP版） ===== */ .fs-body-top .Header_Main:not(.active) .Header_SP_Menu_List .Header_SP_Menu_Cart img { -webkit-filter: brightness(0) saturate(100%) invert(100%) drop-shadow(0 0 3px rgba(0,0,0,0.45)) !important; filter: brightness(0) saturate(100%) invert(100%) drop-shadow(0 0 3px rgba(0,0,0,0.45)) !important; opacity: 1 !important; } /* ===== 追加：トップページで虫眼鏡も白表示 ===== */ .fs-body-top .Header_Main:not(.active) .Header_SP_Menu_List .Header_SP_Menu_Search img { -webkit-filter: brightness(0) saturate(100%) invert(100%) drop-shadow(0 0 3px rgba(0,0,0,0.45)) !important; filter: brightness(0) saturate(100%) invert(100%) drop-shadow(0 0 3px rgba(0,0,0,0.45)) !important; opacity: 1 !important; } /* ===== 追加：カテゴリ・用途にアイコンを追加（SP） ===== */ .Header_Main .Header_Navi .Header_Navi_Dropdown .Header_Navi_Dropdown_List .Header_Navi_Dropdown_List_Item a { display: flex; align-items: center; gap: 12px; } .Header_Main .Header_Navi .Header_Navi_Dropdown .Header_Navi_Dropdown_List .Header_Navi_Dropdown_List_Item a::before { content: ""; width: calc(100vw / 750 * 71.8848); height: calc(100vw / 750 * 71.8848); flex-shrink: 0; background-repeat: no-repeat; background-position: center; background-size: contain; } .Header_Main .Header_Navi .Header_Navi_Dropdown .Header_Navi_Dropdown_List .Header_Navi_Dropdown_List_Item.is-catalog a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_catalog.png"); } .Header_Main .Header_Navi .Header_Navi_Dropdown .Header_Navi_Dropdown_List .Header_Navi_Dropdown_List_Item.is-gourmet a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_gourmet.png"); } .Header_Main .Header_Navi .Header_Navi_Dropdown .Header_Navi_Dropdown_List .Header_Navi_Dropdown_List_Item.is-sweets a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_sweets.png"); } .Header_Main .Header_Navi .Header_Navi_Dropdown .Header_Navi_Dropdown_List .Header_Navi_Dropdown_List_Item.is-towel a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_towel.png"); } .Header_Main .Header_Navi .Header_Navi_Dropdown .Header_Navi_Dropdown_List .Header_Navi_Dropdown_List_Item.is-kitchen a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_kitchen.png"); } .Header_Main .Header_Navi .Header_Navi_Dropdown .Header_Navi_Dropdown_List .Header_Navi_Dropdown_List_Item.is-bedding a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_bedding.png"); } .Header_Main .Header_Navi .Header_Navi_Dropdown .Header_Navi_Dropdown_List .Header_Navi_Dropdown_List_Item.is-baby a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_baby.png"); } .Header_Main .Header_Navi .Header_Navi_Dropdown .Header_Navi_Dropdown_List .Header_Navi_Dropdown_List_Item.is-detergent a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_detergent.png"); } .Header_Main .Header_Navi .Header_Navi_Dropdown .Header_Navi_Dropdown_List .Header_Navi_Dropdown_List_Item.is-interior a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_interior.png"); } .Header_Main .Header_Navi .Header_Navi_Dropdown .Header_Navi_Dropdown_List .Header_Navi_Dropdown_List_Item.is-bousai a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_bousai.png"); } /* ===== 追加：ヘッダー用途にアイコンを追加（SP） ===== */ .Header_Main .Header_Navi .Header_Navi_Dropdown .Header_Navi_Dropdown_List .Header_Navi_Dropdown_List_Item.is-purpose-kekkon-uchiiwai a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_kekkon_uchiiwai.png"); } .Header_Main .Header_Navi .Header_Navi_Dropdown .Header_Navi_Dropdown_List .Header_Navi_Dropdown_List_Item.is-purpose-shussan-uchiiwai a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_shussan_uchiiwai.png"); } .Header_Main .Header_Navi .Header_Navi_Dropdown .Header_Navi_Dropdown_List .Header_Navi_Dropdown_List_Item.is-purpose-shinchiku-uchiiwai a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_shinchiku_uchiiwai.png"); } .Header_Main .Header_Navi .Header_Navi_Dropdown .Header_Navi_Dropdown_List .Header_Navi_Dropdown_List_Item.is-purpose-nyuen-nyugaku-oiwaigaeshi a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_nyuen_nyugaku_oiwaigaeshi.png"); } .Header_Main .Header_Navi .Header_Navi_Dropdown .Header_Navi_Dropdown_List .Header_Navi_Dropdown_List_Item.is-purpose-taishoku-uchiiwai-orei a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_taishoku_uchiiwai_orei.png"); } .Header_Main .Header_Navi .Header_Navi_Dropdown .Header_Navi_Dropdown_List .Header_Navi_Dropdown_List_Item.is-purpose-kaiki-iwai-uchiiwai a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_kaiki_iwai_uchiiwai.png"); } .Header_Main .Header_Navi .Header_Navi_Dropdown .Header_Navi_Dropdown_List .Header_Navi_Dropdown_List_Item.is-purpose-kodengaeshi-hoyo a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_kodengaeshi_hoyo.png"); } .Header_Main .Header_Navi .Header_Navi_Dropdown .Header_Navi_Dropdown_List .Header_Navi_Dropdown_List_Item.is-purpose-kekkon-iwai a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_kekkon_iwai.png"); } .Header_Main .Header_Navi .Header_Navi_Dropdown .Header_Navi_Dropdown_List .Header_Navi_Dropdown_List_Item.is-purpose-shussan-iwai a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_shussan_iwai.png"); } .Header_Main .Header_Navi .Header_Navi_Dropdown .Header_Navi_Dropdown_List .Header_Navi_Dropdown_List_Item.is-purpose-shinchiku-hikkoshi-iwai a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_shinchiku_hikkoshi_iwai.png"); } .Header_Main .Header_Navi .Header_Navi_Dropdown .Header_Navi_Dropdown_List .Header_Navi_Dropdown_List_Item.is-purpose-nyuen-nyugaku-iwai a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_nyuen_nyugaku_iwai.png"); } .Header_Main .Header_Navi .Header_Navi_Dropdown .Header_Navi_Dropdown_List .Header_Navi_Dropdown_List_Item.is-purpose-tanjobi-iwai a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_tanjobi_iwai.png"); } .Header_Main .Header_Navi .Header_Navi_Dropdown .Header_Navi_Dropdown_List .Header_Navi_Dropdown_List_Item.is-purpose-shushoku-iwai a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_shushoku_iwai.png"); } .Header_Main .Header_Navi .Header_Navi_Dropdown .Header_Navi_Dropdown_List .Header_Navi_Dropdown_List_Item.is-purpose-toshiiwai a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_toshiiwai.png"); } .Header_Main .Header_Navi .Header_Navi_Dropdown .Header_Navi_Dropdown_List .Header_Navi_Dropdown_List_Item.is-purpose-taishoku-iwai a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_taishoku_iwai.png"); } .Header_Main .Header_Navi .Header_Navi_Dropdown .Header_Navi_Dropdown_List .Header_Navi_Dropdown_List_Item.is-purpose-event a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_event.png"); } .Header_Main .Header_Navi .Header_Navi_Dropdown .Header_Navi_Dropdown_List .Header_Navi_Dropdown_List_Item.is-purpose-souvenir a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_souvenir.png"); } .Header_Main .Header_Navi .Header_Navi_Dropdown .Header_Navi_Dropdown_List .Header_Navi_Dropdown_List_Item.is-purpose-ochugen a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_ochugen.png"); } .Header_Main .Header_Navi .Header_Navi_Dropdown .Header_Navi_Dropdown_List .Header_Navi_Dropdown_List_Item.is-purpose-oseibo a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_oseibo.png"); } /* ========================================================= 追加：法人のお客様ヘッダー調整 SP 修正版・法人のお客様を第1階層メニューの通常行と同じ高さに揃える・アイコンなし・＋なし・罫線、余白、文字位置を他メニューと統一 ========================================================= */ @media screen and (max-width: 767px) { /* 2026-08-27 W8-15：!important を外し、セレクタの詳細度だけで add_sp.css に勝つ形に変更（このセレクタ 0,5,1 ＞ add_sp.css の .Header_Main .Header_Navi .Header_Navi_List01 .Header_Navi_Trigger 0,4,0） WordPress 側の CSS にも同じ内容を入れてある */ /* li 側は add_sp.css の .Header_Main .Header_Navi .Header_Navi_List01 .Header_Navi_List01_Box+.Header_Navi_List01_Box (0,5,0) margin-top .Header_Main .Header_Navi .Header_Navi_List01 .Header_Navi_List01_Box:last-of-type (0,5,0) border-bottom/padding-bottom と競合するので、.Header_Inner.SP_BurgerMenu を足して (0,7,0) にして勝たせている */ .Header_Main .Header_Inner.SP_BurgerMenu .Header_Navi .Header_Navi_List01 .Header_Navi_List01_Box.Header_Navi_BusinessGift { margin: 0; padding: 0; border-bottom: 1px solid #d9d9d9; } /* a 側は add_sp.css の .Header_Main .Header_Navi .Header_Navi_List01 .Header_Navi_Trigger (0,4,0) が相手。下は (0,8,1) なので詳細度だけで勝つ */ .Header_Main .Header_Inner.SP_BurgerMenu .Header_Navi .Header_Navi_List01 .Header_Navi_List01_Box.Header_Navi_BusinessGift > a.Header_Navi_Trigger { position: relative; display: flex; align-items: center; justify-content: flex-start; width: 100%; min-height: calc(100vw / 750 * 118); height: auto; margin: 0; padding: 0 calc(100vw / 750 * 22); box-sizing: border-box; color: var(--ag-ink); font-family: var(--ag-font-serif); font-size: calc(100vw / 750 * 33); font-weight: 400; line-height: 1.4; letter-spacing: 0.08em; text-decoration: none; white-space: normal; } .Header_Main .Header_Inner.SP_BurgerMenu .Header_Navi .Header_Navi_List01 .Header_Navi_List01_Box.Header_Navi_BusinessGift > a.Header_Navi_Trigger::before, .Header_Main .Header_Inner.SP_BurgerMenu .Header_Navi .Header_Navi_List01 .Header_Navi_List01_Box.Header_Navi_BusinessGift > a.Header_Navi_Trigger::after { content: none; display: none; } } /* =================================================== SP：用途別ページ FV＋ナビゲーション =================================================== */ @media screen and (max-width: 768px) { .Special_Group_FV { width: auto !important; margin: 15px auto !important; } .Special_Group_FV .Special_Group_FV_Inner { -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; } .Special_Group_FV .Special_Group_FV_Text { width: 100% !important; padding: 15px 15px 10px !important; text-align: center; } .Special_Group_FV .Special_Group_FV_Img { width: 100% !important; } /* FV：新要素 SP */ .Special_Group_FV_Eyebrow { margin: 0 0 4px; color: var(--ag-accent); font-family: var(--ag-font-en); font-size: 12px; font-weight: 500; line-height: 1.4; letter-spacing: 0.28em; text-transform: uppercase; } .Special_Group_FV .Special_Group_FV_Title { font-family: var(--ag-font-serif); font-weight: 600; letter-spacing: 0.14em; color: var(--ag-ink); } .Special_Group_FV_Rule { display: block; width: 40px; height: 1px; margin: 12px auto 14px; background: var(--ag-accent); } .Special_Group_FV .Special_Group_FV_Desc { color: var(--ag-ink); font-size: 12.5px; line-height: 1.95; letter-spacing: 0.03em; text-align: left; } .Special_Group_FV_Btns { display: flex; flex-direction: column; gap: 10px; margin-top: 18px; } .AgBtn_Fill, .AgBtn_Outline { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: 50px; padding: 12px 16px; border-radius: 999px; font-size: 13.5px; font-weight: 500; line-height: 1.4; letter-spacing: 0.05em; text-align: center; text-decoration: none; box-sizing: border-box; transition: all 0.25s ease; } .AgBtn_Fill::after, .AgBtn_Outline::after { content: "→"; margin-left: 8px; font-size: 12px; } .AgBtn_Fill { background: var(--ag-ink); border: 1px solid var(--ag-ink); color: #ffffff; } .AgBtn_Outline { background: #ffffff; border: 1px solid var(--ag-ink); color: var(--ag-ink); } /* FVランキングボタン：ゴールド枠（汎用・SP縦積み） */ .Special_Group_FV_Btns .AgBtn_Fill, .Special_Group_FV_Btns .AgBtn_Outline { background: #ffffff; border: 1px solid var(--ag-accent); color: var(--ag-ink); min-height: 46px; } /* FV直後LocalNavi：padding-top:120px を上書き */ .Special_Group_FV + .Special_Group_LocalNavi { padding-top: 15px !important; margin-top: 0 !important; } .Special_Group_LocalNavi { padding: 15px 0 !important; overflow: hidden !important; } .Special_Group_LocalNavi .Special_Group_LocalNavi_Inner { width: 100% !important; max-width: 100% !important; padding: 0 12px !important; -webkit-box-sizing: border-box !important; box-sizing: border-box !important; } .Special_Group_LocalNavi .Special_Group_LocalNavi_List { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 6px 0 !important; width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; -webkit-box-sizing: border-box !important; box-sizing: border-box !important; } .Special_Group_LocalNavi .Special_Group_LocalNavi_List li, .Special_Group_LocalNavi .Special_Group_LocalNavi_List li:nth-child(2n), .Special_Group_LocalNavi .Special_Group_LocalNavi_List li:nth-child(3n), .Special_Group_LocalNavi .Special_Group_LocalNavi_List li:nth-child(4n), .Special_Group_LocalNavi .Special_Group_LocalNavi_List li:nth-child(n+4), .Special_Group_LocalNavi .Special_Group_LocalNavi_List li:nth-child(n+5) { display: block !important; width: auto !important; max-width: none !important; min-width: 0 !important; margin: 0 !important; padding: 0 8px !important; border-right: 1px solid var(--ag-line) !important; border-left: none !important; border-top: none !important; border-bottom: none !important; -webkit-box-sizing: border-box !important; box-sizing: border-box !important; } .Special_Group_LocalNavi .Special_Group_LocalNavi_List li:nth-child(3n) { border-right: none !important; padding-right: 0 !important; } .Special_Group_LocalNavi .Special_Group_LocalNavi_List li:nth-child(3n + 1) { padding-left: 0 !important; } .Special_Group_LocalNavi .Special_Group_LocalNavi_List li a { display: -webkit-box !important; display: -ms-flexbox !important; display: flex !important; -webkit-box-orient: vertical !important; -webkit-box-direction: normal !important; -ms-flex-direction: column !important; flex-direction: column !important; -webkit-box-pack: center !important; -ms-flex-pack: center !important; justify-content: center !important; -webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important; width: 100% !important; min-height: 36px !important; margin: 0 !important; padding: 0 !important; font-size: 10px !important; line-height: 1.2 !important; text-align: center !important; white-space: normal !important; word-break: break-word !important; text-decoration: none !important; -webkit-box-sizing: border-box !important; box-sizing: border-box !important; } .Special_Group_LocalNavi .Special_Group_LocalNavi_List li a::after { width: 8px !important; height: 5px !important; margin-top: 3px !important; -ms-flex-negative: 0 !important; flex-shrink: 0 !important; } } /* ========================================= 追従ローカルナビ（AgStickyNav）SP 4項目均等グリッド・横スクロールなし ========================================= */ .AgStickyNav { position: fixed; top: 0; left: 0; right: 0; /* ヘッダーのドロップダウン・ハンバーガーメニューより必ず下になるよう低く設定 */ z-index: 10; background: #ffffff; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border-bottom: 1px solid var(--ag-line); transform: translateY(-110%); transition: transform 0.3s ease; } .AgStickyNav.is-visible { transform: translateY(0); } .AgStickyNav_List { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0; width: 100%; margin: 0; padding: 0; list-style: none; } .AgStickyNav_List li { margin: 0; padding: 0; } .AgStickyNav_List a { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 50px; padding: 6px 1px 5px; color: var(--ag-ink) !important; text-decoration: none; border-bottom: 2px solid transparent; box-sizing: border-box; transition: color 0.2s ease, border-color 0.2s ease; } .AgStickyNav_List a.is-current { color: var(--ag-ink); border-bottom-color: var(--ag-accent); } .AgStickyNav_Main { display: block; font-size: 10px; font-weight: 700; line-height: 1.2; letter-spacing: 0; white-space: normal; color: var(--ag-ink) !important; } .AgStickyNav_Sub { display: block; font-size: 8.5px; font-weight: 500; line-height: 1.2; letter-spacing: 0; white-space: nowrap; color: var(--ag-ink) !important; } /* 追従ナビ文字色：テーマ上書き対策（高詳細度＋!important で確実に濃く） */ nav.AgStickyNav .AgStickyNav_List a, nav.AgStickyNav .AgStickyNav_List a span, nav.AgStickyNav .AgStickyNav_Main, nav.AgStickyNav .AgStickyNav_Sub { color: #2C2C2A !important; } /* SP=PCと同様にメインラベル＋小さめ「ランキング」を表示 */ .AgStickyNav .AgSN_Pc { display: contents; } .AgStickyNav .AgSN_Sp { display: none; } /* 追従ナビ分のアンカー位置補正（固定ヘッダー90px＋ナビ52px） */ #Link_Concierge, #Link_Recipient_Ranking, #Link_CategoryRanking, #Link_BudgetRanking, #Link_Set, #Link_GiftSearch, #Link_Purpose_Ranking, #ItemList, #Link_Column { scroll-margin-top: 150px; } /* ========================================= カタログギフトシリーズ一覧アンカーボタン ========================================= */ .cataloggift_anchor_nav { margin: 24px 0 32px; } .cataloggift_anchor_nav_list { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; padding: 0; list-style: none; } .cataloggift_anchor_nav_item { margin: 0; padding: 0; } .cataloggift_anchor_nav_link { display: inline-flex; align-items: center; justify-content: center; min-width: 120px; min-height: 44px; padding: 10px 18px; border: 1px solid var(--ag-line); border-radius: 999px; background: #ffffff; color: var(--ag-ink); font-size: 14px; font-weight: 700; line-height: 1.4; text-decoration: none; box-sizing: border-box; transition: all 0.25s ease; } .cataloggift_anchor_nav_link:hover, .cataloggift_anchor_nav_link:focus { background: var(--ag-accent-soft); border-color: var(--ag-accent); color: var(--ag-ink); text-decoration: none; outline: none; } #Link_Sogo, #Link_Gourmet, #Link_Bridal, #Link_Birth, #Link_Brand, #Link_Experience, #Link_Buddhist { scroll-margin-top: 120px; } @media screen and (max-width: 767px) { .cataloggift_anchor_nav { margin: 20px 0 28px; } .cataloggift_anchor_nav_list { gap: 8px; } .cataloggift_anchor_nav_item { width: calc(50% - 4px); } .cataloggift_anchor_nav_link { width: 100%; min-width: auto; min-height: 40px; padding: 10px 12px; font-size: 13px; } } .register-point-highlight { color: #e60012; font-weight: bold; } /* SP版詳細カテゴリを常時表示 */ .SP_SubGroup_Links_Inner { display: block !important; } .SP_SubGroup_Links_Trigger { display: none !important; } /* ============================================= カスタム詳細カテゴリリンク ============================================= */ .custom-subcat-links ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 5px; justify-content: center; } .custom-subcat-links ul li { margin: 0; } .custom-subcat-links ul li a { display: block; background-color: #ffffff; border: 1px solid var(--ag-line); border-radius: 25px; padding: 10px 12px; text-decoration: none; color: var(--ag-ink); font-family: inherit; font-size: 13px; line-height: 13px; letter-spacing: 0.3px; text-align: center; white-space: nowrap; box-sizing: border-box; } /* ========================================= 共通：贈る相手別ランキング SP（旧縦積み型） ※未改修ページ向けに維持 ========================================= */ .Recipient_Ranking, .Recipient_Ranking *, .Recipient_Ranking *::before, .Recipient_Ranking *::after { box-sizing: border-box; } .Recipient_Ranking .Recipient_Ranking_Lead { max-width: 100%; margin: 0 auto 26px; padding: 0 4px; text-align: center; } .Recipient_Ranking .Recipient_Ranking_Lead p { margin: 0; padding: 0; color: var(--ag-ink); font-size: 13px; font-weight: 400; line-height: 1.9; letter-spacing: 0.02em; } .Recipient_Ranking .Recipient_Ranking_Nav { width: 100%; margin: 0 auto 38px; padding: 0; } .Recipient_Ranking .Recipient_Ranking_Nav_List { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; width: 100%; margin: 0; padding: 0; list-style: none; } .Recipient_Ranking .Recipient_Ranking_Nav_Item { width: 100%; margin: 0; padding: 0; } .Recipient_Ranking .Recipient_Ranking_Nav_Item:last-child:nth-child(odd) { grid-column: 1 / -1; width: calc(50% - 4px); margin-left: auto; margin-right: auto; } .Recipient_Ranking .Recipient_Ranking_Nav_Link { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: 42px; padding: 9px 10px; border: 1px solid var(--ag-line); border-radius: 999px; background: #ffffff; color: var(--ag-ink); font-size: 12.5px; font-weight: 500; line-height: 1.35; text-align: center; text-decoration: none; white-space: normal; word-break: keep-all; } .Recipient_Ranking .Recipient_Ranking_Block { margin: 0 auto 52px; padding: 0; } .Recipient_Ranking .Recipient_Ranking_Block:last-of-type { margin-bottom: 32px; } .Recipient_Ranking .Recipient_Ranking_Text { max-width: 100%; margin: 0 auto 24px; padding: 0 4px; text-align: center; } .Recipient_Ranking .Recipient_Ranking_Text p { margin: 0; padding: 0; color: var(--ag-ink); font-size: 13px; font-weight: 400; line-height: 1.9; letter-spacing: 0.02em; } .Recipient_Ranking .Osusume_Item { margin-top: 0; } .Recipient_Ranking .Recipient_Ranking_Note { margin: 8px auto 0; padding: 0 4px; color: var(--ag-ink-soft); font-size: 11.5px; font-weight: 400; line-height: 1.7; text-align: center; } #Recipient_Ranking_01, #Recipient_Ranking_02, #Recipient_Ranking_03, #Recipient_Ranking_04, #Recipient_Ranking_05, #Recipient_Ranking_06 { scroll-margin-top: 150px; } /* ========================================= 共通マナーコンテンツ SP最適化版 ========================================= */ .GiftManner, .GiftManner *, .GiftManner *::before, .GiftManner *::after { box-sizing: border-box; } .GiftManner { width: 100%; margin: 40px auto 50px; padding: 0; color: var(--ag-ink); font-family: inherit; line-height: 1.9; letter-spacing: 0.03em; } .GiftManner a { color: inherit; text-decoration: none; } .GiftManner_Inner { width: 100%; max-width: 100%; margin: 0 auto; padding: 0 14px; } /* リードエリア SP */ .GiftManner_Lead { margin: 0 auto 24px; padding: 28px 16px; background: var(--ag-bg-soft); border: 1px solid var(--ag-line); border-radius: 16px; text-align: center; } .GiftManner_Eyebrow { margin: 0 0 8px; padding: 0; color: var(--ag-accent); font-family: var(--ag-font-en); font-size: 11px; font-weight: 500; line-height: 1.5; letter-spacing: 0.22em; text-transform: uppercase; } .GiftManner_Title { margin: 0 0 14px; padding: 0; color: var(--ag-ink); font-family: var(--ag-font-serif); font-size: 22px; font-weight: 600; line-height: 1.5; letter-spacing: 0.08em; } .GiftManner_LeadText { max-width: 100%; margin: 0 auto 10px; padding: 0; color: var(--ag-ink); font-size: 13px; font-weight: 400; line-height: 1.9; } .GiftManner_LeadText:last-child { margin-bottom: 0; } /* アンカーナビ SP：2列化 */ .GiftManner_LocalNavi { width: 100%; max-width: 100%; margin: 0 auto 36px; padding: 0; } .GiftManner_LocalNavi_Inner { width: 100%; max-width: 100%; margin: 0 auto; padding: 0; } .GiftManner_LocalNavi_List { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: 10px 0 !important; width: 100%; margin: 0 !important; padding: 0 !important; list-style: none !important; } .GiftManner_LocalNavi_List li, .GiftManner_LocalNavi_List li:nth-child(2n), .GiftManner_LocalNavi_List li:nth-child(3n), .GiftManner_LocalNavi_List li:nth-child(4n), .GiftManner_LocalNavi_List li:nth-child(n+4), .GiftManner_LocalNavi_List li:nth-child(n+5) { display: block !important; width: auto !important; max-width: none !important; min-width: 0 !important; min-height: 48px !important; margin: 0 !important; padding: 0 10px !important; border-right: 1px solid var(--ag-line) !important; border-left: none !important; border-top: none !important; border-bottom: none !important; background: transparent !important; box-sizing: border-box !important; } .GiftManner_LocalNavi_List li:nth-child(2n) { border-right: none !important; padding-right: 0 !important; } .GiftManner_LocalNavi_List li:nth-child(2n + 1) { padding-left: 0 !important; } .GiftManner_LocalNavi_List li a { position: relative; display: flex !important; flex-direction: column !important; justify-content: center !important; align-items: center !important; width: 100% !important; min-height: 48px !important; margin: 0 !important; padding: 4px 0 !important; color: var(--ag-ink) !important; font-size: 12px !important; font-weight: 500 !important; line-height: 1.4 !important; text-align: center !important; white-space: normal !important; word-break: keep-all !important; overflow-wrap: anywhere !important; text-decoration: none !important; } .GiftManner_LocalNavi_List li a::after { content: ""; display: block; width: 7px; height: 7px; margin-top: 6px; border-right: 1px solid var(--ag-accent); border-bottom: 1px solid var(--ag-accent); transform: rotate(45deg); flex-shrink: 0; } .GiftManner_LocalNavi_List li a:hover, .GiftManner_LocalNavi_List li a:focus { color: var(--ag-accent) !important; text-decoration: none !important; outline: none; } .GiftManner_LocalNavi_Empty { pointer-events: none !important; } .GiftManner_LocalNavi_Empty::before { content: ""; display: block; min-height: 48px; } /* セクション共通 SP */ .GiftManner_Section { margin: 0 auto 20px; padding: 24px 16px; background: #ffffff; border: 1px solid var(--ag-line); border-radius: 16px; } .GiftManner_Section:last-child { margin-bottom: 0; } .GiftManner_SectionSoft { background: var(--ag-bg-soft); } .GiftManner_SectionHead { margin: 0 0 16px; padding: 0; text-align: center; } .GiftManner_Heading { margin: 0; padding: 0; color: var(--ag-ink); font-family: var(--ag-font-serif); font-size: 20px; font-weight: 600; line-height: 1.5; letter-spacing: 0.06em; } .GiftManner_TextBlock { max-width: 100%; margin: 0 auto; padding: 0; text-align: left; } .GiftManner_TextBlock p { margin: 0 0 12px; padding: 0; color: var(--ag-ink); font-size: 13px; font-weight: 400; line-height: 1.9; } .GiftManner_TextBlock p:last-child { margin-bottom: 0; } /* ポイントボックス SP */ .GiftManner_PointBox { max-width: 100%; margin: 20px auto 0; padding: 18px 16px; background: #ffffff; border: 1px solid var(--ag-line); border-radius: 14px; } .GiftManner_Section:not(.GiftManner_SectionSoft) .GiftManner_PointBox { background: var(--ag-bg-soft); } .GiftManner_PointTitle { margin: 0 0 10px; padding: 0; color: var(--ag-ink); font-size: 15px; font-weight: 700; line-height: 1.6; text-align: center; } .GiftManner_CheckList { max-width: 100%; margin: 0 auto; padding: 0; list-style: none; } .GiftManner_CheckList li { position: relative; margin: 0 0 8px; padding: 0 0 0 18px; color: var(--ag-ink); font-size: 13px; line-height: 1.9; text-align: left; } .GiftManner_CheckList li:last-child { margin-bottom: 0; } .GiftManner_CheckList li::before { content: ""; position: absolute; left: 0; top: 0.78em; width: 7px; height: 7px; border-radius: 50%; background: var(--ag-accent); } /* テーブル SP：カード型レイアウト */ .GiftManner_TableWrap { width: 100%; margin: 20px auto 0; overflow-x: visible; border: none; border-radius: 0; background: transparent; } .GiftManner_Table { width: 100%; min-width: 0; margin: 0; border-collapse: collapse; display: block; } .GiftManner_Table thead { display: none; } .GiftManner_Table tbody { display: block; } .GiftManner_Table tbody tr { display: block; margin: 0 0 12px; padding: 0; background: #ffffff; border: 1px solid var(--ag-line); border-radius: 14px; overflow: hidden; } .GiftManner_Table tbody tr:last-child { margin-bottom: 0; } .GiftManner_Table th, .GiftManner_Table td { display: block; width: 100%; padding: 10px 14px; border-bottom: 1px solid var(--ag-line); color: var(--ag-ink); font-size: 13px; font-weight: 400; line-height: 1.8; text-align: left; vertical-align: middle; box-sizing: border-box; } .GiftManner_Table tbody tr th:last-child, .GiftManner_Table tbody tr td:last-child { border-bottom: none; } .GiftManner_Table th { background: var(--ag-bg-head); font-weight: 700; } .GiftManner_Table tbody th { width: 100%; } /* のし画像 SP */ .GiftManner_NoshiImage { max-width: 100%; margin: 20px auto 0; padding: 0; text-align: center; } .GiftManner_NoshiImage img { display: block; width: 100%; height: auto; margin: 0 auto; border-radius: 12px; border: 1px solid var(--ag-line); } .GiftManner_NoshiImage figcaption { margin: 8px 0 0; padding: 0; color: var(--ag-ink-soft); font-size: 12px; font-weight: 400; line-height: 1.8; } /* 注釈 SP */ .GiftManner_Note { max-width: 100%; margin: 18px auto 0; padding: 14px 14px; background: var(--ag-bg-soft); border: 1px solid var(--ag-line); border-radius: 12px; color: var(--ag-ink-soft); font-size: 12.5px; font-weight: 400; line-height: 1.9; text-align: left; } /* カード SP：1列 */ .GiftManner_Grid { display: grid; gap: 12px; margin: 20px auto 0; } .GiftManner_Grid3 { grid-template-columns: 1fr; } .GiftManner_Card { padding: 18px 16px; background: #ffffff; border: 1px solid var(--ag-line); border-radius: 14px; text-align: center; } .GiftManner_CardTitle { margin: 0 0 6px; padding: 0; color: var(--ag-ink); font-size: 15px; font-weight: 700; line-height: 1.6; } .GiftManner_Card p { margin: 0; padding: 0; color: var(--ag-ink); font-size: 13px; line-height: 1.9; } /* CTA SP：縦積み・幅100% */ .GiftManner_CtaBox { display: block; max-width: 100%; margin: 22px auto 0; padding: 0; } .GiftManner_CtaButtonWrap { display: flex; flex-direction: column; justify-content: center; gap: 10px; width: 100%; } .GiftManner_Button { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: 48px; padding: 12px 16px; border: 1px solid var(--ag-accent); border-radius: 999px; background: #ffffff; color: var(--ag-ink); font-size: 14px; font-weight: 500; line-height: 1.4; text-align: center; text-decoration: none; box-sizing: border-box; } /* メッセージ文例 SP */ .GiftManner_MessageList { max-width: 100%; margin: 20px auto 0; padding: 0; } .GiftManner_Message { margin: 0 0 12px; padding: 18px 16px; background: #ffffff; border: 1px solid var(--ag-line); border-radius: 14px; text-align: left; } .GiftManner_Message:last-child { margin-bottom: 0; } .GiftManner_MessageTitle { margin: 0 0 8px; padding: 0; color: var(--ag-ink); font-size: 14px; font-weight: 700; line-height: 1.6; } .GiftManner_Message p { margin: 0; padding: 0; color: var(--ag-ink); font-size: 13px; line-height: 1.9; } /* FAQ SP */ .GiftManner_FaqList { max-width: 100%; margin: 20px auto 0; padding: 0; } .GiftManner_FaqItem { margin: 0 0 10px; padding: 0; background: #ffffff; border: 1px solid var(--ag-line); border-radius: 12px; overflow: hidden; } .GiftManner_FaqItem:last-child { margin-bottom: 0; } .GiftManner_FaqQuestion { position: relative; display: block; cursor: pointer; margin: 0; padding: 15px 46px 15px 16px; color: var(--ag-ink); font-size: 13.5px; font-weight: 700; line-height: 1.7; list-style: none; text-align: left; } .GiftManner_FaqQuestion::-webkit-details-marker { display: none; } .GiftManner_FaqQuestion::after { content: "+"; position: absolute; right: 16px; top: 50%; transform: translateY(-50%); color: var(--ag-accent); font-size: 20px; font-weight: 400; line-height: 1; } .GiftManner_FaqItem[open] .GiftManner_FaqQuestion::after { content: "−"; } .GiftManner_FaqAnswer { padding: 0 16px 16px; } .GiftManner_FaqAnswer p { margin: 0; padding: 0; color: var(--ag-ink); font-size: 13px; line-height: 1.9; text-align: left; } /* 固定ヘッダー対策 */ #GiftManner, #GiftManner_Basic, #GiftManner_Timing, #GiftManner_Budget, #GiftManner_Noshi, #GiftManner_Recipient, #GiftManner_Message, #GiftManner_Ng, #GiftManner_Service, #GiftManner_Faq { scroll-margin-top: 150px; } /* 避けたほうがよいギフト（NgList）SP */ .GiftManner_NgList { max-width: 100%; margin: 20px auto 0; padding: 0; } .GiftManner_NgItem { margin: 0 0 12px; padding: 17px 16px; text-align: left; } .GiftManner_NgItem:last-child { margin-bottom: 0; } .GiftManner_NgItem .GiftManner_MessageTitle { text-align: center; } .GiftManner_NgItem p { font-size: 12.5px; line-height: 1.8; } /* ========================================= ATELIER GIFT 条件検索パーツ SP ========================================= */ @media screen and (max-width: 767px) { .AgGiftFinder, .AgGiftFinder *, .AgGiftFinder *::before, .AgGiftFinder *::after { box-sizing: border-box; } .AgGiftFinder { width: 100%; margin: 36px auto 44px; padding: 0; color: var(--ag-ink); font-family: inherit; line-height: 1.8; letter-spacing: 0.02em; } .AgGiftFinder_Inner { width: 100%; max-width: 100%; margin: 0 auto; padding: 0 14px; } .AgGiftFinder_Head { margin: 0 auto 18px; padding: 14px 14px 13px; background: var(--ag-bg-soft); border: 1px solid var(--ag-line); border-radius: 18px 18px 0 0; text-align: center; } .AgGiftFinder_Title { margin: 0; padding: 0; color: var(--ag-ink); font-family: var(--ag-font-serif); font-size: 19px; font-weight: 600; line-height: 1.45; letter-spacing: 0.06em; } .AgGiftFinder_Form { width: 100%; margin: -18px auto 0; padding: 22px 14px 22px; background: #ffffff; border: 1px solid var(--ag-line); border-radius: 18px; box-shadow: 0 12px 28px rgba(80, 64, 48, 0.08); overflow: hidden; } .AgGiftFinder_Fields { display: block; width: 100%; margin: 0; padding: 0; } .AgGiftFinder_Field { width: 100%; margin: 0 0 16px; padding: 0; } .AgGiftFinder_Field:last-child { margin-bottom: 0; } .AgGiftFinder_Label { display: block; width: 100%; margin: 0 0 7px; padding: 0; color: var(--ag-ink); font-size: 12px; font-weight: 700; line-height: 1.4; text-align: center; white-space: nowrap; letter-spacing: 0.02em; } .AgGiftFinder_Label::after { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 0 2px 6px; border-radius: 50%; background: var(--ag-accent); } .AgGiftFinder_SelectWrap { position: relative; width: 100%; overflow: hidden; border: 1px solid var(--ag-line); border-radius: 999px; background: #ffffff; } .AgGiftFinder_SelectWrap::after { content: ""; position: absolute; right: 17px; top: 50%; width: 8px; height: 8px; border-right: 1px solid var(--ag-ink); border-bottom: 1px solid var(--ag-ink); transform: translateY(-65%) rotate(45deg); pointer-events: none; z-index: 2; } .AgGiftFinder_Select { display: block; appearance: none; -webkit-appearance: none; width: 100%; height: 48px; min-height: 48px; margin: 0; padding: 0 44px; border: none; border-radius: 0; background: transparent; color: var(--ag-ink); font-family: inherit; font-size: 13px; font-weight: 400; line-height: 48px; text-align: center; text-align-last: center; cursor: pointer; outline: none; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; } .AgGiftFinder_Select option { text-align: center; } .AgGiftFinder_Select:focus { background: transparent; box-shadow: none; } .AgGiftFinder_SelectWrap:focus-within { border-color: var(--ag-accent); box-shadow: 0 0 0 3px rgba(176, 141, 87, 0.13); background: #fffdf9; } .AgGiftFinder_Status { display: block; width: 100%; min-height: 24px; margin: 18px auto 0; padding: 12px 12px; background: var(--ag-bg-soft); border: 1px solid var(--ag-line); border-radius: 12px; color: var(--ag-ink-soft); font-size: 11.5px; font-weight: 400; line-height: 1.65; text-align: center; } .AgGiftFinder_StatusTitle { display: block; margin: 0 0 6px; padding: 0; color: var(--ag-ink); font-size: 12px; font-weight: 700; line-height: 1.5; text-align: center; } .AgGiftFinder_StatusItem { display: block; width: 100%; margin: 0 0 4px; padding: 0; text-align: center; } .AgGiftFinder_StatusItem:last-child { margin-bottom: 0; } .AgGiftFinder_StatusItem::after { content: ""; display: none; } .AgGiftFinder_StatusLabel { display: inline; color: var(--ag-ink-soft); font-weight: 700; white-space: nowrap; } .AgGiftFinder_StatusValue { display: inline; color: var(--ag-ink); font-weight: 400; word-break: break-word; } .AgGiftFinder_Actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin: 18px auto 0; padding: 0; } .AgGiftFinder_Submit, .AgGiftFinder_Reset { display: flex; align-items: center; justify-content: center; width: 100%; min-width: 0; min-height: 44px; margin: 0; padding: 10px 8px; border: 1px solid var(--ag-line); border-radius: 999px; background: #ffffff; color: var(--ag-ink); font-family: inherit; font-size: 12.5px; font-weight: 700; line-height: 1.35; text-align: center; text-decoration: none; cursor: pointer; white-space: nowrap; } .AgGiftFinder_Reset { margin-top: 0; } .AgGiftFinder_Submit:hover, .AgGiftFinder_Submit:focus, .AgGiftFinder_Reset:hover, .AgGiftFinder_Reset:focus { border-color: var(--ag-accent); background: var(--ag-accent-soft); color: var(--ag-ink); opacity: 1; outline: none; } } /* ========================================= ATELIER GIFT 30秒ギフト診断コンシェルジュおすすめトップ3 SP ========================================= */ .AgGiftConcierge, .AgGiftConcierge *, .AgGiftConcierge *::before, .AgGiftConcierge *::after { box-sizing: border-box; } .AgGiftConcierge { font-family: inherit; color: var(--ag-ink); } .AgGiftConcierge_FloatButton { position: fixed; right: 12px; bottom: 14px; z-index: 9998; display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 9px; min-width: 158px; min-height: 56px; padding: 9px 16px 10px; border: 1px solid var(--ag-accent); border-radius: 999px; background: var(--ag-accent); color: #ffffff; box-shadow: 0 10px 26px rgba(80, 64, 48, 0.2); cursor: pointer; text-align: center; } .AgGiftConcierge_FloatButton::after { content: ""; position: absolute; inset: 0; border-radius: 999px; border: 2px solid var(--ag-accent); opacity: 0; pointer-events: none; animation: AgConciergePulse 2.4s ease-out infinite; } @keyframes AgConciergePulse { 0% { transform: scale(1); opacity: 0.55; } 70% { transform: scale(1.16); opacity: 0; } 100% { transform: scale(1.16); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .AgGiftConcierge_FloatButton::after { animation: none; opacity: 0; } } .AgGiftConcierge_FloatIcon { display: block; width: 23px; height: 23px; flex-shrink: 0; } .AgGiftConcierge_FloatTextWrap { display: flex; flex-direction: column; align-items: flex-start; } .AgGiftConcierge_FloatLabel { display: block; margin: 0 0 2px; color: var(--ag-accent-soft); font-size: 10.5px; font-weight: 700; line-height: 1.3; letter-spacing: 0.06em; } .AgGiftConcierge_FloatTitle { display: block; color: #ffffff; font-size: 14px; font-weight: 800; line-height: 1.35; letter-spacing: 0.02em; } .AgGiftConcierge_Backdrop { position: fixed; inset: 0; z-index: 9998; background: rgba(0, 0, 0, 0.28); } .AgGiftConcierge_Panel { position: fixed; left: 10px; right: 10px; bottom: 82px; z-index: 9999; width: auto; max-height: calc(100vh - 96px); overflow-y: auto; background: #ffffff; border: 1px solid var(--ag-line); border-radius: 18px; box-shadow: 0 18px 48px rgba(80, 64, 48, 0.24); opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 0.22s ease, visibility 0.22s ease, transform 0.22s ease; } .AgGiftConcierge_Panel.is-active { opacity: 1; visibility: visible; transform: translateY(0); } .AgGiftConcierge_PanelInner { position: relative; padding: 24px 15px 22px; } .AgGiftConcierge_Close { position: absolute; top: 9px; right: 10px; display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; padding: 0; border: none; background: transparent; color: var(--ag-ink); font-size: 28px; font-weight: 300; line-height: 1; cursor: pointer; } .AgGiftConcierge_Head { margin: 0 0 17px; padding: 0 28px 15px; border-bottom: 1px solid var(--ag-line); text-align: center; } .AgGiftConcierge_Eyebrow { margin: 0 0 5px; padding: 0; color: var(--ag-accent); font-size: 11px; font-weight: 700; line-height: 1.4; letter-spacing: 0.14em; } .AgGiftConcierge_Title { margin: 0 0 8px; padding: 0; color: var(--ag-ink); font-family: var(--ag-font-serif); font-size: 20px; font-weight: 600; line-height: 1.45; letter-spacing: 0.05em; } .AgGiftConcierge_Lead { margin: 0; padding: 0; color: var(--ag-ink-soft); font-size: 12px; font-weight: 400; line-height: 1.75; } .AgGiftConcierge_Field { width: 100%; margin: 0 0 13px; padding: 0; } .AgGiftConcierge_Label { display: block; margin: 0 0 7px; padding: 0; color: var(--ag-ink); font-size: 12px; font-weight: 700; line-height: 1.5; text-align: center; } .AgGiftConcierge_Label::after { content: ""; display: inline-block; width: 4px; height: 4px; margin: 0 0 2px 6px; border-radius: 50%; background: var(--ag-accent); } .AgGiftConcierge_SelectWrap { position: relative; width: 100%; } .AgGiftConcierge_SelectWrap::after { content: ""; position: absolute; right: 17px; top: 50%; width: 8px; height: 8px; border-right: 1px solid var(--ag-ink); border-bottom: 1px solid var(--ag-ink); transform: translateY(-65%) rotate(45deg); pointer-events: none; } .AgGiftConcierge_Select { appearance: none; -webkit-appearance: none; width: 100%; min-height: 46px; margin: 0; padding: 0 42px; border: 1px solid var(--ag-line); border-radius: 999px; background: #ffffff; color: var(--ag-ink); font-family: inherit; font-size: 13px; font-weight: 400; line-height: 46px; text-align: center; text-align-last: center; cursor: pointer; outline: none; } .AgGiftConcierge_Status { min-height: 24px; margin: 16px auto 0; padding: 11px 12px; background: var(--ag-bg-soft); border: 1px solid var(--ag-line); border-radius: 13px; color: var(--ag-ink-soft); font-size: 11.5px; font-weight: 400; line-height: 1.7; text-align: center; } .AgGiftConcierge_Status strong { color: var(--ag-ink); font-weight: 700; } .AgGiftConcierge_Actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; width: 100%; margin: 17px auto 0; padding: 0; } .AgGiftConcierge_Submit, .AgGiftConcierge_Reset { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 44px; margin: 0; padding: 9px 8px; border: 1px solid var(--ag-line); border-radius: 999px; background: #ffffff; color: var(--ag-ink); font-family: inherit; font-size: 12px; font-weight: 700; line-height: 1.35; text-align: center; text-decoration: none; cursor: pointer; } .AgGiftConcierge_Submit { border-color: var(--ag-accent); background: var(--ag-accent-soft); } .AgGiftConcierge_Result { margin: 20px auto 0; padding: 0; } .AgGiftConcierge_ResultHead { margin: 0 0 13px; padding: 0; text-align: center; } .AgGiftConcierge_ResultTitle { margin: 0 0 6px; padding: 0; color: var(--ag-ink); font-size: 16px; font-weight: 800; line-height: 1.5; } .AgGiftConcierge_ResultText { margin: 0; padding: 0; color: var(--ag-ink-soft); font-size: 11.5px; line-height: 1.7; } .AgGiftConcierge_Loading, .AgGiftConcierge_Empty, .AgGiftConcierge_Error { margin: 0; padding: 16px 14px; background: var(--ag-bg-soft); border: 1px solid var(--ag-line); border-radius: 13px; color: var(--ag-ink-soft); font-size: 12px; line-height: 1.8; text-align: center; } .AgGiftConcierge_Items { display: grid; grid-template-columns: 1fr; gap: 10px; margin: 0; padding: 0; } .AgGiftConcierge_Item { display: grid; grid-template-columns: 82px 1fr; gap: 10px; width: 100%; padding: 10px; border: 1px solid var(--ag-line); border-radius: 15px; background: #ffffff; } .AgGiftConcierge_ItemImage { display: flex; align-items: center; justify-content: center; width: 82px; height: 82px; overflow: hidden; border-radius: 11px; background: var(--ag-bg-soft); text-decoration: none; } .AgGiftConcierge_ItemImage img { display: block; max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; opacity: 1; visibility: visible; } .AgGiftConcierge_NoImage { color: var(--ag-ink-soft); font-size: 10px; font-weight: 700; line-height: 1.4; text-align: center; } .AgGiftConcierge_Rank { display: inline-flex; align-items: center; justify-content: center; min-width: 39px; min-height: 20px; margin: 0 0 5px; padding: 2px 7px; border-radius: 999px; background: var(--ag-bg-soft); color: var(--ag-accent); font-size: 10.5px; font-weight: 800; line-height: 1.3; } .AgGiftConcierge_ItemName { margin: 0 0 5px; padding: 0; color: var(--ag-ink); font-size: 12.5px; font-weight: 700; line-height: 1.5; text-transform: none; font-variant: normal; font-feature-settings: normal; word-break: break-word; overflow-wrap: anywhere; } .AgGiftConcierge_ItemPrice { margin: 0 0 8px; padding: 0; color: var(--ag-ink-soft); font-size: 11.5px; font-weight: 700; line-height: 1.5; } .AgGiftConcierge_ItemButton, .AgGiftConcierge_MoreLink { display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; color: var(--ag-ink); font-weight: 700; line-height: 1.35; text-align: center; text-decoration: none; } .AgGiftConcierge_ItemButton { min-height: 32px; padding: 7px 12px; border: 1px solid var(--ag-accent); background: var(--ag-accent-soft); font-size: 11.5px; } .AgGiftConcierge_More { margin: 15px auto 0; padding: 0; text-align: center; } .AgGiftConcierge_MoreLink { min-height: 40px; padding: 9px 18px; border: 1px solid var(--ag-line); background: #ffffff; font-size: 12px; } /* ========================================= ↑TOP位置調整：SP ========================================= */ .Page_Top { position: fixed !important; right: 12px !important; bottom: 90px !important; z-index: 9999 !important; } .Page_Top a { display: block; } .Page_Top img { display: block; } /* ========================================= ランキング共通タブ SP 下線式セグメント型（横スクロールなし・中央折返し）対象：贈り先別 / 商品カテゴリ別 / 金額別 ========================================= */ .AgCategoryRanking, .AgCategoryRanking *, .AgCategoryRanking *::before, .AgCategoryRanking *::after { box-sizing: border-box; } .AgCategoryRanking { color: var(--ag-ink); font-family: inherit; } .AgCategoryRanking_Inner { position: relative; } .AgCategoryRanking_Lead { max-width: 100%; margin: 0 auto 22px; padding: 0 4px; text-align: center; } .AgCategoryRanking_Lead p { margin: 0; padding: 0; color: var(--ag-ink); font-size: 13px; font-weight: 400; line-height: 1.9; letter-spacing: 0.02em; } /* タブ：折返し型セグメント（スクロールさせない） */ .AgCategoryRanking_Tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; width: 100%; max-width: 100%; margin: 0 auto 22px; padding: 0; scroll-margin-top: 150px; } .AgCategoryRanking_Tab { appearance: none; -webkit-appearance: none; position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; margin: 0; padding: 10px 13px 11px; border: none; border-bottom: 1px solid var(--ag-line); border-radius: 0; background: transparent; color: var(--ag-ink-soft); font-family: inherit; font-size: 12.5px; font-weight: 500; line-height: 1.35; letter-spacing: 0.03em; text-align: center; text-decoration: none; white-space: nowrap; word-break: keep-all; cursor: pointer; transition: color 0.2s ease; } .AgCategoryRanking_Tab::after { content: ""; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); width: 0; height: 2px; background: var(--ag-accent); transition: width 0.25s ease; } .AgCategoryRanking_Tab.is-active { border-bottom-color: var(--ag-line); background: transparent; color: var(--ag-ink); font-weight: 700; } .AgCategoryRanking_Tab.is-active::after { width: calc(100% - 12px); } /* 旧グリッド指定の名残り対策（中央寄せ指定を無効化） ※タブはflex折返しのため、3〜8個どの項目数でも中央揃えで自動整列 */ .AgCategoryRanking_Tab:nth-child(5) { grid-column: auto; width: auto; margin-left: 0; margin-right: 0; } /* パネル */ .AgCategoryRanking_Panels { width: 100%; margin: 0 auto; padding: 0; } .AgCategoryRanking_Panel { width: 100%; margin: 0; padding: 0; } .AgCategoryRanking_Panel[hidden] { display: none !important; } .AgCategoryRanking_Text { max-width: 100%; margin: 0 auto 20px; padding: 0 4px; text-align: center; } .AgCategoryRanking_Text p { margin: 0; padding: 0; color: var(--ag-ink); font-size: 12.5px; font-weight: 400; line-height: 1.85; letter-spacing: 0.02em; } .AgCategoryRanking_Items { margin-top: 0; } .AgCategoryRanking_Items .fs-c-productList, .AgCategoryRanking_Items .fs-c-productList__list { max-width: 100%; } .AgCategoryRanking_Items > ul { max-width: 100%; margin-left: auto; margin-right: auto; } .AgCategoryRanking_Note { margin: 12px auto 0; padding: 0 4px; color: var(--ag-ink-soft); font-size: 11px; font-weight: 400; line-height: 1.7; text-align: center; } /* ========================================= 順位の円形ラベル SP JS（07_共通スクリプト）が任意商品表示パーツの出力を自動検出し .AgRankBadge を付与する方式。 class名不問・商品数（1〜20個）に自動対応 ※カルーセルなし・通常グリッド表示のまま ========================================= */ .AgRankItem { position: relative !important; } /* SPは画面端の見切れ防止のため、商品枠の内側（左上）に配置 */ .AgRankBadge { position: absolute; top: 4px; left: 4px; z-index: 2; display: flex; align-items: center; justify-content: center; width: 27px; height: 27px; border: 1px solid var(--ag-accent); border-radius: 50%; background: rgba(255, 255, 255, 0.94); color: var(--ag-accent); font-family: var(--ag-font-en); font-size: 14px; font-weight: 500; line-height: 1; box-shadow: 0 2px 6px rgba(58, 55, 50, 0.1); pointer-events: none; } .AgRankBadge.is-first { background: var(--ag-accent); color: #ffffff; } /* ========================================= 金額別お返し目安と人気ギフト SP ========================================= */ .AgBudgetRanking, .AgBudgetRanking *, .AgBudgetRanking *::before, .AgBudgetRanking *::after { box-sizing: border-box; } .AgBudgetRanking_Guide { max-width: 100%; margin: 0 auto 24px; padding: 0; } .AgBudgetRanking_GuideInner { padding: 18px 14px 20px; background: #ffffff; border: 1px solid var(--ag-line); border-radius: 16px; } .AgBudgetRanking_GuideTitle { margin: 0 0 14px; padding: 0; color: var(--ag-ink); font-family: var(--ag-font-serif); font-size: 15px; font-weight: 600; line-height: 1.6; text-align: center; letter-spacing: 0.06em; } .AgBudgetRanking_TableWrapPc { display: none; } .AgBudgetRanking_CardList { display: grid; grid-template-columns: 1fr; gap: 10px; width: 100%; margin: 0 auto; padding: 0; } .AgBudgetRanking_Card { width: 100%; margin: 0; padding: 13px 13px 12px; background: #ffffff; border: 1px solid var(--ag-line); border-radius: 13px; } .AgBudgetRanking_CardAmount { margin: 0 0 8px; padding: 0 0 7px; border-bottom: 1px solid var(--ag-line); color: var(--ag-ink); font-size: 13px; font-weight: 800; line-height: 1.5; text-align: center; } .AgBudgetRanking_CardRow { display: grid; grid-template-columns: 82px 1fr; gap: 8px; align-items: start; margin: 0 0 5px; padding: 0; } .AgBudgetRanking_CardRow:last-child { margin-bottom: 0; } .AgBudgetRanking_CardRow span { display: block; color: var(--ag-accent); font-size: 11px; font-weight: 700; line-height: 1.6; white-space: nowrap; } .AgBudgetRanking_CardRow strong { display: block; color: var(--ag-ink); font-size: 11.5px; font-weight: 700; line-height: 1.6; text-align: left; } /* 相場カード→ランキングタブ連動リンク SP */ .AgBudgetRanking_JumpLink { display: inline-block; margin-top: 9px; padding-bottom: 1px; border-bottom: 1px solid var(--ag-accent); color: var(--ag-ink); font-size: 12px; font-weight: 500; line-height: 1.5; text-decoration: none; cursor: pointer; transition: color 0.2s ease; } .AgBudgetRanking_JumpLink::after { content: " →"; color: var(--ag-accent); } .AgBudgetRanking_CardJump { margin: 8px 0 0; padding: 0; text-align: center; } .AgBudgetRanking_GuideNote { margin: 12px auto 0; padding: 0; color: var(--ag-ink-soft); font-size: 10.5px; font-weight: 400; line-height: 1.7; text-align: left; } /* 金額別タブの文字サイズ調整 */ .AgBudgetRanking .AgCategoryRanking_Tab { padding: 10px 10px 11px; font-size: 11.5px; } /* ========================================= ランキング商品リスト：カルーセル矢印無効化（SP） ========================================= */ .Recipient_Ranking .Osusume_Item .fs-c-productListCarousel__ctrl, .AgCategoryRanking_Items .fs-c-productListCarousel__ctrl { display: none !important; } .Recipient_Ranking .Osusume_Item .fs-c-productListCarousel__list, .AgCategoryRanking_Items .fs-c-productListCarousel__list { width: 100%; } /* ========================================================================== 商品カテゴリページの贈る用途別ランキング用spcss ========================================================================== */ .AgPurposeRanking, .AgPurposeRanking *, .AgPurposeRanking *::before, .AgPurposeRanking *::after { box-sizing: border-box; } .AgPurposeRanking { color: var(--ag-ink); font-family: inherit; } .AgPurposeRanking_Inner { position: relative; } .AgPurposeRanking_Lead { max-width: 100%; margin: 0 auto 22px; padding: 0 4px; text-align: center; } .AgPurposeRanking_Lead p { margin: 0; padding: 0; color: var(--ag-ink); font-size: 13px; font-weight: 400; line-height: 1.9; letter-spacing: 0.02em; } /* タブ：折返し型セグメント（横スクロールなし・中央折返し） */ .AgPurposeRanking_Tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 0; width: 100%; max-width: 100%; margin: 0 auto 22px; padding: 0; scroll-margin-top: 150px; } .AgPurposeRanking_Tab { appearance: none; -webkit-appearance: none; position: relative; display: inline-flex; align-items: center; justify-content: center; min-width: 0; min-height: 44px; margin: 0; padding: 10px 11px 11px; border: none; border-bottom: 1px solid var(--ag-line); border-radius: 0; background: transparent; color: var(--ag-ink-soft); font-family: inherit; font-size: 12px; font-weight: 500; line-height: 1.35; letter-spacing: 0.02em; text-align: center; text-decoration: none; white-space: nowrap; word-break: keep-all; cursor: pointer; transition: color 0.2s ease; } .AgPurposeRanking_Tab::after { content: ""; position: absolute; left: 50%; bottom: -1px; transform: translateX(-50%); width: 0; height: 2px; background: var(--ag-accent); transition: width 0.25s ease; } .AgPurposeRanking_Tab.is-active { border-bottom-color: var(--ag-line); background: transparent; color: var(--ag-ink); font-weight: 700; } .AgPurposeRanking_Tab.is-active::after { width: calc(100% - 11px); } .AgPurposeRanking_Panels { width: 100%; margin: 0 auto; padding: 0; } .AgPurposeRanking_Panel { width: 100%; margin: 0; padding: 0; } .AgPurposeRanking_Panel[hidden] { display: none !important; } .AgPurposeRanking_Text { max-width: 100%; margin: 0 auto 20px; padding: 0 4px; text-align: center; } .AgPurposeRanking_Text p { margin: 0; padding: 0; color: var(--ag-ink); font-size: 12.5px; font-weight: 400; line-height: 1.85; letter-spacing: 0.02em; } .AgPurposeRanking_Items { margin-top: 0; } .AgPurposeRanking_Items .fs-c-productList, .AgPurposeRanking_Items .fs-c-productList__list { max-width: 100%; } .AgPurposeRanking_Items > ul { max-width: 100%; margin-left: auto; margin-right: auto; } .AgPurposeRanking_Items .fs-c-productListCarousel__ctrl { display: none !important; } .AgPurposeRanking_Items .fs-c-productListCarousel__list { width: 100%; } .AgPurposeRanking_Note { margin: 12px auto 0; padding: 0 4px; color: var(--ag-ink-soft); font-size: 11px; font-weight: 400; line-height: 1.7; text-align: center; } /* 追従ナビ分のアンカー位置補正（既存 #Link_◯◯ 群と同値=150px） */ #Link_Purpose_Ranking { scroll-margin-top: 150px; } /* ===== ↓↓ ここからギフトシミュレーター工数削減アドオン追記 ↓↓ ===== */ /* ========================================================= ギフトシミュレーター工数削減アドオン（追記CSS） v1.0 ブランドトークン（--ag-accent 等）に追従。PC/SP共通。 ========================================================= */ .Gift_Simulator_Omakase{text-align:center;margin:8px 0 18px;} .Gift_Simulator .OmakaseBtn{display:inline-block;min-width:280px;padding:14px 28px;background:var(--ag-accent,#B08D57);color:#fff;font-family:var(--ag-font-sans,sans-serif);font-weight:700;font-size:15px;letter-spacing:.04em;border-radius:6px;cursor:pointer;text-decoration:none;transition:opacity .2s;} .Gift_Simulator .OmakaseBtn:hover{opacity:.85;} .Gift_Simulator .OmakaseBtn span::before{content:"\2605 ";} .Gift_Simulator_Omakase_Note{margin-top:8px;font-size:12px;color:var(--ag-ink-soft,#8A8278);line-height:1.6;font-family:var(--ag-font-sans,sans-serif);} .Wrap_Not_Select{margin-top:16px;text-align:center;} .Gift_Simulator_InlineError{display:none;margin:0 0 14px;padding:12px 16px;background:#FBEFEF;border:1px solid #E0AEAE;border-left:4px solid #C0392B;border-radius:4px;color:#A5332B;font-size:14px;line-height:1.6;font-weight:700;font-family:var(--ag-font-sans,sans-serif);} .Gift_Simulator_Remain{display:none;width:fit-content;margin:0 auto 10px;padding:6px 14px;background:var(--ag-bg-head,#F0E8DE);color:var(--ag-accent,#B08D57);font-size:12px;font-weight:700;border-radius:999px;font-family:var(--ag-font-sans,sans-serif);} @media screen and (max-width:768px){ .Gift_Simulator .OmakaseBtn{width:100%;min-width:0;padding:15px 16px;} .Gift_Simulator_Omakase_Note{font-size:11px;padding:0 8px;} .Gift_Simulator_InlineError{font-size:13px;} } /* ===== 選択状態の強調（枠＋淡色塗り＋チェック）＋おすすめバッジ ===== */ .Gift_Simulator .Step_Common_List label{position:relative;} .Gift_Simulator .Step_Common_List input:checked + label{ background:var(--ag-accent-soft,#F8F3EA)!important; border-color:var(--ag-accent,#B08D57)!important; box-shadow:0 0 0 2px var(--ag-accent,#B08D57) inset!important; border-radius:8px; } .Gift_Simulator .Step_Common_List input:checked + label::after{ content:"\2714";position:absolute;top:6px;right:6px;z-index:2; width:22px;height:22px;line-height:22px;text-align:center; background:var(--ag-accent,#B08D57);color:#fff;border-radius:50%;font-size:13px; } .Gift_Simulator input:checked + label.NomalRadio{ background:var(--ag-accent-soft,#F8F3EA)!important; border-color:var(--ag-accent,#B08D57)!important; color:var(--ag-ink,#3A3732)!important; box-shadow:0 0 0 1.5px var(--ag-accent,#B08D57) inset!important; } .Gift_Simulator .Noshi_Add_Side label{position:relative;} .Gift_Simulator .Noshi_Add_Side input:checked + label .Noshi_Add_Side_Select{ background:var(--ag-accent-soft,#F8F3EA)!important; box-shadow:0 0 0 2px var(--ag-accent,#B08D57) inset!important;border-radius:8px; } .Gift_Simulator .Noshi_Add_Side input:checked + label::after{ content:"\2714";position:absolute;top:6px;right:6px;z-index:2; width:22px;height:22px;line-height:22px;text-align:center; background:var(--ag-accent,#B08D57);color:#fff;border-radius:50%;font-size:13px; } .Gift_Simulator_RecoBadge{ position:absolute;top:-9px;left:8px;z-index:3; background:var(--ag-accent,#B08D57);color:#fff; font-size:11px;font-weight:700;padding:1px 9px;border-radius:999px; font-family:var(--ag-font-sans,sans-serif);white-space:nowrap; } /* ===== ①② 不要オプションを候補と同列のカードに ===== */ .Gift_Simulator .Step_Common_List .Not_Select.InList_None{ flex:0 0 100%;width:100%;grid-column:1 / -1;margin:0 0 6px;text-align:center; } .Gift_Simulator .Step_Common_List .Not_Select.InList_None label.NomalRadio{ display:inline-block;width:100%;box-sizing:border-box;padding:12px; border:1px dashed var(--ag-line,#E3DACC);border-radius:8px; } /* ===== ③ ナビのクリック化／確認画面の「変更」リンク ===== */ .Gift_Simulator .Gift_Simulator_Navi_Box > div[href]{cursor:pointer;} .Gift_Simulator .Gift_Simulator_Navi_Box:not(.deactive) > div[href]:hover span{text-decoration:underline;} .Gift_Simulator .Result_Edit{ display:inline-block;margin:6px 0 0;padding:3px 12px; font-size:12px;font-weight:700;color:var(--ag-accent,#B08D57); border:1px solid var(--ag-accent,#B08D57);border-radius:999px; text-decoration:none;font-family:var(--ag-font-sans,sans-serif);cursor:pointer; } .Gift_Simulator .Result_Edit:hover{background:var(--ag-accent-soft,#F8F3EA);} .Gift_Simulator .Result_Step01 .Result_Edit{margin-left:10px;} /* ===== 緑→オレンジ：内のし・外のしの選択表示を統一 ===== */ .Gift_Simulator .Noshi_Add_Side .Noshi_Add_Side_Name::before, .Gift_Simulator .Noshi_Add_Side .Noshi_Add_Side_Name::after{display:none!important;} .Gift_Simulator .Noshi_Add_Side label:hover .Noshi_Add_Side_Select, .Gift_Simulator .Noshi_Add_Side input:checked + label .Noshi_Add_Side_Select{border-color:var(--ag-accent,#B08D57)!important;} /* ===== 未到達タブのグレーアウト（ゲーティング）===== */ .Gift_Simulator .Gift_Simulator_Navi_Box.nav-locked{opacity:.35;} .Gift_Simulator .Gift_Simulator_Navi_Box.nav-locked > div[href]{cursor:not-allowed;} .Gift_Simulator .Gift_Simulator_Navi_Box.nav-locked > div[href]:hover span{text-decoration:none;} /* ===== 不要(.NomalRadio)もオレンジ丸＋白チェックに統一／カードの緑枠除去 ===== */ .Gift_Simulator input:checked + label.NomalRadio::before{ background:var(--ag-accent,#B08D57)!important;border-color:var(--ag-accent,#B08D57)!important; } .Gift_Simulator input:checked + label.NomalRadio::after{ content:"\2714"!important;background:transparent!important; width:16px!important;height:16px!important;line-height:16px!important; top:1px!important;left:0!important;text-align:center!important; color:#FFFFFF!important;font-size:11px!important; } .Gift_Simulator .Step_Common_List label::after{border-color:var(--ag-accent,#B08D57)!important;} .Gift_Simulator .Step_Common_List input:checked + label::after{left:auto!important;border:none!important;} /* ===== 修正: リスト内の不要(のし不要/カード不要)を明示的にオレンジ丸＋白チェック ===== */ .Gift_Simulator .Step_Common_List .Not_Select.InList_None label.NomalRadio{position:relative;} .Gift_Simulator .Step_Common_List .Not_Select.InList_None input:checked + label.NomalRadio::before{ content:""!important;position:absolute!important;top:50%!important;left:12px!important; -webkit-transform:translateY(-50%)!important;transform:translateY(-50%)!important;margin:0!important; width:18px!important;height:18px!important;border-radius:50%!important; background:var(--ag-accent,#B08D57)!important;border:1px solid var(--ag-accent,#B08D57)!important; } .Gift_Simulator .Step_Common_List .Not_Select.InList_None input:checked + label.NomalRadio::after{ content:"\2714"!important;position:absolute!important;top:50%!important;left:12px!important; -webkit-transform:translateY(-50%)!important;transform:translateY(-50%)!important; width:18px!important;height:18px!important;line-height:18px!important;text-align:center!important; background:transparent!important;border:none!important;color:#FFFFFF!important;font-size:12px!important; } /* ===== 修正: 内のし・外のしの選択にチェックを表示（ボックス右上）===== */ .Gift_Simulator .Noshi_Add_Side label .Noshi_Add_Side_Select{position:relative;} .Gift_Simulator .Noshi_Add_Side input:checked + label::after{content:none!important;} .Gift_Simulator .Noshi_Add_Side input:checked + label .Noshi_Add_Side_Select::after{ content:"\2714"!important;position:absolute!important;top:8px!important;right:8px!important; width:22px!important;height:22px!important;line-height:22px!important;text-align:center!important; background:var(--ag-accent,#B08D57)!important;color:#FFFFFF!important;border-radius:50%!important; font-size:13px!important;z-index:3!important; } /* ========================================= FV：3訴求ブロック SP（縦積み） ※@media(max-width:768px)内で自己完結（SP単独でも表示が崩れません） ========================================= */ @media screen and (max-width: 768px) { .AgFvFeatures, .AgFvFeatures *, .AgFvFeatures *::before, .AgFvFeatures *::after { box-sizing: border-box; } .AgFvFeatures { width: 100%; margin: 0; padding: 0; font-family: var(--ag-font-sans); } .AgFvFeatures_Inner { width: 100%; max-width: 100%; margin: 0 auto; padding: 0 14px; } .AgFvFeatures_List { display: flex; flex-direction: column; width: 100%; margin: 14px 0 0; background: #ffffff; border: 1px solid var(--ag-line); border-radius: 16px; overflow: hidden; } .AgFvFeatures_List .AgFvFeat { flex: none; display: flex; align-items: center; gap: 14px; padding: 15px 16px; } .AgFvFeatures_List .AgFvFeat + .AgFvFeat { border-left: none; border-top: 1px solid var(--ag-line); } .AgFvFeat_Icon { flex: none; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--ag-line); border-radius: 50%; background: var(--ag-bg-soft); color: var(--ag-accent); } .AgFvFeat_Icon svg { width: 26px; height: 26px; } .AgFvFeat_Main { display: block; color: var(--ag-ink); font-size: 15px; font-weight: 700; line-height: 1.5; letter-spacing: 0.02em; } .AgFvFeat_Sub { display: block; margin-top: 4px; color: var(--ag-ink-soft); font-size: 12.5px; font-weight: 400; line-height: 1.6; } .AgFvFeat .nb { white-space: nowrap; } } /* ========================================================= 法人ギフトページ追加CSS ========================================================= */ /* ---- FV 5訴求（法人ページのみ：修飾クラス AgFvFeatures--biz に限定）---- */ .AgFvFeatures--biz .AgFvFeatures_List .AgFvFeat { padding: 16px 14px; gap: 10px; } .AgFvFeatures--biz .AgFvFeat_Icon { width: 42px; height: 42px; } .AgFvFeatures--biz .AgFvFeat_Icon svg { width: 22px; height: 22px; } .AgFvFeatures--biz .AgFvFeat_Main { font-size: 13.5px; } .AgFvFeatures--biz .AgFvFeat_Sub { font-size: 11.5px; } /* SPは既存CSSで縦積み(flex-direction:column)になるため5つでも自動対応 */ /* ---- 共通：法人セクションの軽い余白調整（任意）---- */ .AgBizSection_Lead { text-align: center; color: var(--ag-ink-soft); font-size: 14px; line-height: 1.9; margin: 0 auto 28px; max-width: 760px; } /* ---- ご相談〜納品の流れ AgFlow ---- */ .AgFlow_List { display: flex; gap: 16px; } .AgFlow_Step { flex: 1; background: #fff; border: 1px solid var(--ag-line); border-radius: 14px; padding: 24px 16px; text-align: center; } .AgFlow_Num { width: 38px; height: 38px; border-radius: 50%; background: var(--ag-accent); color: #fff; font-family: var(--ag-font-en); font-size: 18px; display: flex; align-items: center; justify-content: center; margin: 0 auto 12px; } .AgFlow_StepTitle { font-family: var(--ag-font-serif); font-weight: 600; font-size: 15px; color: var(--ag-ink); margin-bottom: 6px; } .AgFlow_StepText { font-size: 12.5px; color: var(--ag-ink-soft); line-height: 1.7; } @media (max-width: 768px) { .AgFlow_List { flex-direction: column; } } /* ---- 見積・相談 CTA AgContactCta ---- */ .AgContactCta_Inner { background: var(--ag-bg-head); border-radius: 18px; padding: 32px; display: flex; gap: 28px; flex-wrap: wrap; align-items: center; justify-content: space-between; } .AgContactCta_Body { flex: 1; min-width: 260px; } .AgContactCta_Title { font-family: var(--ag-font-serif); font-weight: 600; font-size: 20px; color: var(--ag-ink); margin-bottom: 10px; } .AgContactCta_Text { font-size: 13.5px; color: var(--ag-ink); line-height: 1.8; margin-bottom: 16px; } .AgContactCta_Btn { display: inline-block; background: var(--ag-accent); color: #fff; font-weight: 700; text-decoration: none; border-radius: 6px; padding: 15px 28px; letter-spacing: .04em; } .AgContactCta_Tel { background: #fff; border: 1px solid var(--ag-line); border-radius: 14px; padding: 18px 22px; text-align: center; min-width: 240px; } .AgContactCta_TelLabel { font-size: 12px; color: var(--ag-ink-soft); } .AgContactCta_TelNum { font-family: var(--ag-font-en); font-size: 26px; color: var(--ag-accent); letter-spacing: .04em; display: block; margin: 2px 0; text-decoration: none; } .AgContactCta_TelNote { font-size: 12px; color: var(--ag-ink-soft); } .AgContactForm { margin-top: 24px; } .AgContactForm iframe { width: 100%; border: 0; min-height: 1200px; } @media (max-width: 768px) { .AgContactCta_Inner { padding: 20px; } } /* ---- マナー AgManner ---- */ .AgManner_Grid { display: flex; gap: 16px; flex-wrap: wrap; } .AgManner_Card { flex: 1; min-width: 240px; background: #fff; border: 1px solid var(--ag-line); border-radius: 14px; padding: 22px; } .AgManner_CardTitle { font-family: var(--ag-font-serif); font-weight: 600; font-size: 15px; color: var(--ag-ink); margin-bottom: 8px; padding-left: 14px; border-left: 3px solid var(--ag-accent); } .AgManner_CardText { font-size: 13px; color: var(--ag-ink-soft); line-height: 1.8; } /* ---- FAQ アコーディオン AgFaq ---- */ .AgFaq_List { max-width: 860px; margin: 0 auto; } .AgFaq_Item { background: #fff; border: 1px solid var(--ag-line); border-radius: 10px; margin-bottom: 12px; overflow: hidden; } .AgFaq_Q { width: 100%; text-align: left; background: none; border: 0; cursor: pointer; font-family: var(--ag-font-serif); font-weight: 600; font-size: 15px; color: var(--ag-ink); padding: 18px 48px 18px 52px; position: relative; line-height: 1.6; } .AgFaq_Q::before { content: "Q"; position: absolute; left: 20px; top: 16px; font-family: var(--ag-font-en); color: var(--ag-accent); font-size: 20px; } .AgFaq_Q::after { content: ""; position: absolute; right: 22px; top: 50%; width: 10px; height: 10px; border-right: 2px solid var(--ag-accent); border-bottom: 2px solid var(--ag-accent); transform: translateY(-70%) rotate(45deg); transition: transform .2s; } .AgFaq_Item.is-open .AgFaq_Q::after { transform: translateY(-30%) rotate(-135deg); } .AgFaq_A { display: none; padding: 0 24px 20px 52px; font-size: 13.5px; color: var(--ag-ink-soft); line-height: 1.9; } .AgFaq_Item.is-open .AgFaq_A { display: block; } /* ---- コラム枠 ---- ※コラムは既存テーマの Column_* クラス（新築内祝い等と共通）を流用するため、追加CSSは不要です（このセクションのCSSは持ちません）。 */ /* ========================================================= 追加：SPフッター Category 詳細用途・詳細カテゴリアイコン表示・ヘッダーSPの用途/カテゴリ用アイコンと同じ画像を使用・フッターCategory内の詳細リンクだけに限定・金額/贈る相手/法人のお客様には影響させない ========================================================= */ @media screen and (max-width: 767px) { .Footer_Main .Footer_Category_List_Box_Inner ul li.Footer_Category_IconItem > a { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; min-height: calc(100vw / 750 * 78) !important; box-sizing: border-box !important; text-align: left !important; } .Footer_Main .Footer_Category_List_Box_Inner ul li.Footer_Category_IconItem > a::before { content: "" !important; display: block !important; width: calc(100vw / 750 * 71.8848) !important; height: calc(100vw / 750 * 71.8848) !important; flex: 0 0 calc(100vw / 750 * 71.8848) !important; background-repeat: no-repeat !important; background-position: center !important; background-size: contain !important; } /* 商品カテゴリ */ .Footer_Main .Footer_Category_List_Box_Inner ul li.Footer_Category_IconItem.is-catalog > a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_catalog.png") !important; } .Footer_Main .Footer_Category_List_Box_Inner ul li.Footer_Category_IconItem.is-gourmet > a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_gourmet.png") !important; } .Footer_Main .Footer_Category_List_Box_Inner ul li.Footer_Category_IconItem.is-sweets > a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_sweets.png") !important; } .Footer_Main .Footer_Category_List_Box_Inner ul li.Footer_Category_IconItem.is-towel > a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_towel.png") !important; } .Footer_Main .Footer_Category_List_Box_Inner ul li.Footer_Category_IconItem.is-kitchen > a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_kitchen.png") !important; } .Footer_Main .Footer_Category_List_Box_Inner ul li.Footer_Category_IconItem.is-bedding > a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_bedding.png") !important; } .Footer_Main .Footer_Category_List_Box_Inner ul li.Footer_Category_IconItem.is-baby > a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_baby.png") !important; } .Footer_Main .Footer_Category_List_Box_Inner ul li.Footer_Category_IconItem.is-detergent > a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_detergent.png") !important; } .Footer_Main .Footer_Category_List_Box_Inner ul li.Footer_Category_IconItem.is-interior > a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_interior.png") !important; } .Footer_Main .Footer_Category_List_Box_Inner ul li.Footer_Category_IconItem.is-bousai > a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_bousai.png") !important; } /* 用途 */ .Footer_Main .Footer_Category_List_Box_Inner ul li.Footer_Category_IconItem.is-purpose-kekkon-uchiiwai > a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_kekkon_uchiiwai.png") !important; } .Footer_Main .Footer_Category_List_Box_Inner ul li.Footer_Category_IconItem.is-purpose-shussan-uchiiwai > a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_shussan_uchiiwai.png") !important; } .Footer_Main .Footer_Category_List_Box_Inner ul li.Footer_Category_IconItem.is-purpose-shinchiku-uchiiwai > a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_shinchiku_uchiiwai.png") !important; } .Footer_Main .Footer_Category_List_Box_Inner ul li.Footer_Category_IconItem.is-purpose-nyuen-nyugaku-oiwaigaeshi > a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_nyuen_nyugaku_oiwaigaeshi.png") !important; } .Footer_Main .Footer_Category_List_Box_Inner ul li.Footer_Category_IconItem.is-purpose-taishoku-uchiiwai-orei > a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_taishoku_uchiiwai_orei.png") !important; } .Footer_Main .Footer_Category_List_Box_Inner ul li.Footer_Category_IconItem.is-purpose-kaiki-iwai-uchiiwai > a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_kaiki_iwai_uchiiwai.png") !important; } .Footer_Main .Footer_Category_List_Box_Inner ul li.Footer_Category_IconItem.is-purpose-kodengaeshi-hoyo > a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_kodengaeshi_hoyo.png") !important; } .Footer_Main .Footer_Category_List_Box_Inner ul li.Footer_Category_IconItem.is-purpose-kekkon-iwai > a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_kekkon_iwai.png") !important; } .Footer_Main .Footer_Category_List_Box_Inner ul li.Footer_Category_IconItem.is-purpose-shussan-iwai > a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_shussan_iwai.png") !important; } .Footer_Main .Footer_Category_List_Box_Inner ul li.Footer_Category_IconItem.is-purpose-shinchiku-hikkoshi-iwai > a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_shinchiku_hikkoshi_iwai.png") !important; } .Footer_Main .Footer_Category_List_Box_Inner ul li.Footer_Category_IconItem.is-purpose-nyuen-nyugaku-iwai > a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_nyuen_nyugaku_iwai.png") !important; } .Footer_Main .Footer_Category_List_Box_Inner ul li.Footer_Category_IconItem.is-purpose-tanjobi-iwai > a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_tanjobi_iwai.png") !important; } .Footer_Main .Footer_Category_List_Box_Inner ul li.Footer_Category_IconItem.is-purpose-shushoku-iwai > a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_shushoku_iwai.png") !important; } .Footer_Main .Footer_Category_List_Box_Inner ul li.Footer_Category_IconItem.is-purpose-toshiiwai > a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_toshiiwai.png") !important; } .Footer_Main .Footer_Category_List_Box_Inner ul li.Footer_Category_IconItem.is-purpose-taishoku-iwai > a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_taishoku_iwai.png") !important; } .Footer_Main .Footer_Category_List_Box_Inner ul li.Footer_Category_IconItem.is-purpose-event > a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_event.png") !important; } .Footer_Main .Footer_Category_List_Box_Inner ul li.Footer_Category_IconItem.is-purpose-souvenir > a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_souvenir.png") !important; } .Footer_Main .Footer_Category_List_Box_Inner ul li.Footer_Category_IconItem.is-purpose-ochugen > a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_ochugen.png") !important; } .Footer_Main .Footer_Category_List_Box_Inner ul li.Footer_Category_IconItem.is-purpose-oseibo > a::before { background-image: url("https://ateliergift.itembox.cloud/item/img/common/icon_purpose_oseibo.png") !important; } } /* ========================================================= トップページ FV改修（AgTopFv）SP版追加CSS【最終版】・AgTopFv追記分を丸ごとこの内容に差し替えてください・表示：タイトル＋SEOサブ＋コンセプトリンクのみ（説明文は非表示）・文字色：墨色（--ag-ink）に統一＋白ハロー・SP用CSS単体で完結（PC用CSSに依存しない） ========================================================= */ @media screen and (max-width: 767px) { .AgTopFv { position: relative; } /* 写真への加工なし */ .AgTopFv::before { content: none; } /* スライド高さの保険（テーマ側で高さ指定がある場合はそちらが優先） */ .AgTopFv .swiper-slide { min-height: 430px; } /* 固定テキスト：写真の上・下寄せ */ .AgTopFv_Text { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; display: flex; align-items: flex-end; pointer-events: none; } .AgTopFv_TextInner { width: 100%; max-width: none; margin: 0; padding: 0 20px 24px; background: none; } /* タイトル：墨色＋白ハロー */ .AgTopFv_Title { margin: 0; padding: 0; color: var(--ag-ink); font-family: var(--ag-font-serif); font-size: 19px; font-weight: 600; line-height: 1.75; letter-spacing: 0.08em; text-shadow: 0 0 14px rgba(255, 255, 255, 0.85), 0 0 4px rgba(255, 255, 255, 0.65); } /* サブ：ink-soft は写真上では同化するため墨色に統一（階層はサイズで表現） */ .AgTopFv_TitleSub { display: block; margin-top: 7px; color: var(--ag-ink); font-family: var(--ag-font-sans); font-size: 10.5px; font-weight: 500; line-height: 1.7; letter-spacing: 0.04em; text-shadow: 0 0 12px rgba(255, 255, 255, 0.85), 0 0 4px rgba(255, 255, 255, 0.65); } /* 説明文：SPでは非表示（HTMLは残す・PCでは表示） */ .AgTopFv_Desc { display: none; } .AgTopFv_ConceptLink { display: inline-block; margin-top: 12px; padding-bottom: 2px; border-bottom: 1px solid var(--ag-ink); color: var(--ag-ink) !important; font-size: 11.5px; font-weight: 500; letter-spacing: 0.1em; text-decoration: none; text-shadow: 0 0 12px rgba(255, 255, 255, 0.85); pointer-events: auto; } .AgTopFv_ConceptLink::after { content: " →"; font-size: 10px; } /* ---- PC/SP 表示切替 ---- */ .AgTopFv_Pc { display: none; } .AgTopFv_Sp { display: inline; } /* ---- アンカーボタン帯：2×2グリッド ---- */ .AgTopFv_Anchors.Special_Group_FV_Btns { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 16px 0 0; padding: 0 14px; } .AgTopFv_Anchors .AgBtn_Outline { width: 100%; min-width: 0; min-height: 48px; padding: 10px 8px; font-size: 12.5px; letter-spacing: 0.02em; line-height: 1.4; white-space: normal; word-break: keep-all; } /* ---- トップ用アンカー位置補正 ---- */ #TopLink_Choose, #TopLink_PurposeRanking, #TopLink_CategoryRanking, #TopLink_GiftSearch, #TopLink_ItemList, #TopLink_Set, #TopLink_Service, #TopLink_Column { scroll-margin-top: 150px; } } /* ========================================================= トップ：ギフトの選び方（AgTopChoose）SP版追加CSS ・SP用CSS単体で完結（PC用CSSに依存しない） ========================================================= */ @media screen and (max-width: 767px) { .AgTopChoose, .AgTopChoose *, .AgTopChoose *::before, .AgTopChoose *::after { box-sizing: border-box; } .AgTopChoose { padding: 46px 14px 54px; background: #ffffff; } .AgTopChoose_Inner { max-width: none; margin: 0; } /* 見出し */ .AgTopChoose_Head { text-align: center; } .AgTopChoose_TitleEn { margin: 0 0 6px; padding: 0; color: var(--ag-accent); font-family: var(--ag-font-en); font-size: 11px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; } .AgTopChoose_TitleJp { margin: 0; padding: 0; color: var(--ag-ink); font-family: var(--ag-font-serif); font-size: 21px; font-weight: 600; line-height: 1.6; letter-spacing: 0.1em; } .AgTopChoose_Lead { margin: 10px 0 0; padding: 0; color: var(--ag-ink); font-size: 12px; line-height: 1.9; letter-spacing: 0.03em; } /* タブ：3等分 */ .AgTopChoose_Tabs { display: flex; margin: 24px 0 20px; } .AgTopChoose_Tab { appearance: none; -webkit-appearance: none; flex: 1; min-width: 0; margin: 0; padding: 11px 4px 12px; border: none; border-bottom: 2px solid var(--ag-line); border-radius: 0; background: transparent; color: var(--ag-ink-soft); font-family: inherit; font-size: 12.5px; font-weight: 500; line-height: 1.4; letter-spacing: 0; text-align: center; cursor: pointer; } .AgTopChoose_Tab.is-active { color: var(--ag-ink); font-weight: 700; border-bottom-color: var(--ag-accent); } /* パネル */ .AgTopChoose_Panel[hidden] { display: none; } /* アイコングリッド：2列 */ .AgTopChoose_List, .AgTopChoose_List--4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; max-width: none; margin: 0; padding: 0; list-style: none; } .AgTopChoose_List li { margin: 0; padding: 0; } /* アイコンカード */ .AgTopChoose_Item { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 8px; min-height: 128px; padding: 14px 8px 12px; background: #ffffff; border: 1px solid var(--ag-line); border-radius: 14px; color: var(--ag-ink); text-decoration: none; } .AgTopChoose_Icon { display: block; width: 68px; height: 68px; object-fit: contain; } .AgTopChoose_Label { font-size: 11.5px; font-weight: 500; line-height: 1.5; letter-spacing: 0; text-align: center; } } /* ========================================================= トップ：用途別ランキング追加CSS SP【v9・完全版】・SP＝横スライド（全カード同サイズ・2枚＋3枚目チラ見せ・スナップ）・スライド終端は「浮かせた円形ボタン」（枠なし・縦中央・金の丸ボタン）・商品名・金額の書体・色は既存CSS（Osusume_Item経由）のまま変更なし ========================================================= */ @media screen and (max-width: 767px) { .AgTopPurposeRanking .AgTopRankCta { margin: 20px 0 0; padding: 0 6px; } /* 順位バッジの切り取り防止 */ .AgTopPurposeRanking .Osusume_Item, .AgTopPurposeRanking .AgCategoryRanking_Items { overflow: visible !important; } /* 横スライド（CSSスクロールスナップ・軽量／カード幅40%＝2枚+3枚目3割見え） */ .AgTopPurposeRanking .AgTopRankGrid { display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; width: 100%; margin: 0; padding: 12px 0 8px; /* 上=バッジの逃げ */ list-style: none; scrollbar-width: none; /* Firefox: スクロールバー非表示 */ } .AgTopPurposeRanking .AgTopRankGrid::-webkit-scrollbar { display: none; /* iOS/Chrome: スクロールバー非表示 */ } .AgTopPurposeRanking .AgTopRankGrid > li { position: relative; flex: 0 0 40%; /* カード幅。見え方の調整はここ */ max-width: 40%; min-width: 0; margin: 0; padding: 0; scroll-snap-align: start; } /* 移設した商品要素はカード幅いっぱいに（順位バッジは対象外） */ .AgTopPurposeRanking .AgTopRankGrid > li > *:not(.AgRankBadge) { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; float: none !important; } /* ---- スライド終端：浮かせた円形ボタン ---- */ .AgTopPurposeRanking .AgTopRankGrid > li.AgTopRankMoreCard { display: flex; align-items: center; /* 余白の縦中央に配置 */ justify-content: center; flex: 0 0 34%; /* 商品カードよりひと回り細く */ max-width: 34%; } .AgTopPurposeRanking .AgTopRankMoreCard_Link { display: flex; flex-direction: column; align-items: center; gap: 10px; width: auto; padding: 0; border: none; background: transparent; font-size: 0; /* 元の長文テキストは表示しない（読み上げには残る） */ text-decoration: none; } /* 金の細枠・円形ボタン */ .AgTopPurposeRanking .AgTopRankMoreCard_Link::before { content: "→"; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border: 1px solid var(--ag-accent); border-radius: 50%; background: #ffffff; color: var(--ag-accent); font-size: 20px; font-weight: 400; line-height: 1; box-shadow: 0 2px 10px rgba(58, 55, 50, 0.06); transition: background-color 0.2s ease; } .AgTopPurposeRanking .AgTopRankMoreCard_Link:active::before { background: var(--ag-accent-soft); } /* ボタン下の短いラベル */ .AgTopPurposeRanking .AgTopRankMoreCard_Link::after { content: "すべて見る"; color: var(--ag-ink); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.5; } } /* ========================================================= トップ：カテゴリ別ランキング追加CSS SP【v2・完全版】・SP用CSSファイルの末尾に追記してください・用途別ランキング（v9）と同一仕様・スコープのみカテゴリ用・SP＝横スライド（全カード同サイズ・2枚＋3枚目チラ見せ・スナップ）・スライド終端は「浮かせた円形ボタン」（枠なし・縦中央・金の丸ボタン） ========================================================= */ @media screen and (max-width: 767px) { .AgTopCategoryRanking .AgTopRankCta { margin: 20px 0 0; padding: 0 6px; } /* 順位バッジの切り取り防止 */ .AgTopCategoryRanking .Osusume_Item, .AgTopCategoryRanking .AgCategoryRanking_Items { overflow: visible !important; } /* 横スライド（CSSスクロールスナップ・軽量／カード幅40%＝2枚+3枚目3割見え） */ .AgTopCategoryRanking .AgTopRankGrid { display: flex; gap: 10px; overflow-x: auto; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; width: 100%; margin: 0; padding: 12px 0 8px; /* 上=バッジの逃げ */ list-style: none; scrollbar-width: none; /* Firefox: スクロールバー非表示 */ } .AgTopCategoryRanking .AgTopRankGrid::-webkit-scrollbar { display: none; /* iOS/Chrome: スクロールバー非表示 */ } .AgTopCategoryRanking .AgTopRankGrid > li { position: relative; flex: 0 0 40%; /* カード幅。見え方の調整はここ */ max-width: 40%; min-width: 0; margin: 0; padding: 0; scroll-snap-align: start; } /* 移設した商品要素はカード幅いっぱいに（順位バッジは対象外） */ .AgTopCategoryRanking .AgTopRankGrid > li > *:not(.AgRankBadge) { width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; float: none !important; } /* ---- スライド終端：浮かせた円形ボタン ---- */ .AgTopCategoryRanking .AgTopRankGrid > li.AgTopRankMoreCard { display: flex; align-items: center; /* 余白の縦中央に配置 */ justify-content: center; flex: 0 0 34%; /* 商品カードよりひと回り細く */ max-width: 34%; } .AgTopCategoryRanking .AgTopRankMoreCard_Link { display: flex; flex-direction: column; align-items: center; gap: 10px; width: auto; padding: 0; border: none; background: transparent; font-size: 0; /* 元の長文テキストは表示しない（読み上げには残る） */ text-decoration: none; } /* 金の細枠・円形ボタン */ .AgTopCategoryRanking .AgTopRankMoreCard_Link::before { content: "→"; display: flex; align-items: center; justify-content: center; width: 64px; height: 64px; border: 1px solid var(--ag-accent); border-radius: 50%; background: #ffffff; color: var(--ag-accent); font-size: 20px; font-weight: 400; line-height: 1; box-shadow: 0 2px 10px rgba(58, 55, 50, 0.06); transition: background-color 0.2s ease; } .AgTopCategoryRanking .AgTopRankMoreCard_Link:active::before { background: var(--ag-accent-soft); } /* ボタン下の短いラベル */ .AgTopCategoryRanking .AgTopRankMoreCard_Link::after { content: "すべて見る"; color: var(--ag-ink); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; line-height: 1.5; } } /* ========================================================= トップ：かんたんギフト検索（AgTopGiftSearch）追加CSS SP【v1】・SP用CSSファイルの末尾に追記してください・検索フォーム本体のデザインは既存AgGiftFinderのまま変更なし ========================================================= */ @media screen and (max-width: 767px) { /* 見出しをTitle01形式に差し替えたため、旧見出し前提のマイナスマージン（-18px）を解除し、見出しとの間隔を調整 */ .AgTopGiftSearch .AgGiftFinder { margin: 22px auto 0; } .AgTopGiftSearch .AgGiftFinder_Form { margin-top: 0; } } /* ここから W4-05 SP ------------------------------------- */ /* ① 並び順：「ご注文手続きへ進む」を上、「ログインして進む」を下にあわせて、サイト側が持っている余白（30px / 10px）を入れ替えて間隔を当初と同じに保つ */ .fs-c-purchaseHere.fs-c-cartPayment{ display: flex; flex-direction: column; align-items: center; } .fs-c-purchaseHere.fs-c-cartPayment > .fs-c-purchaseHere__message{ order: 1; } .fs-c-purchaseHere.fs-c-cartPayment > .fs-c-buttonContainer:not(.fs-c-buttonContainer--loginAndPurchase){ order: 2; /* ご注文手続きへ進む＝主ボタン */ margin-top: 30px !important; /* 文との間隔（当初の値） */ } .fs-c-purchaseHere.fs-c-cartPayment > .fs-c-buttonContainer--loginAndPurchase{ order: 3; /* ログインして進む＝副ボタン */ margin-top: 10px !important; /* ボタン同士の間隔（当初の値） */ } /* ② 副ボタン「ログインして進む」だけ、白地＋黒枠に変える主ボタン（ご注文手続きへ進む）は黒のまま、サイズもそのまま */ a.fs-c-button--loginAndPurchase{ background-color: #ffffff !important; background-image: none !important; color: #111111 !important; border: 1px solid #111111 !important; } a.fs-c-button--loginAndPurchase .fs-c-button__label{ color: #111111 !important; } /* ここまで W4-05 SP ------------------------------------- */ /* お客様の声（トップページ）SP用／ 2026-08-26 v2 */ .AgVoice{--v-gold:#B08D57;--v-sage:#6A7A58;--v-line:#E5E0D8;--v-muted:#7A7A72;--v-gap:calc(100vw / 750 * 24);} .AgVoice .AgVoice_Lead{text-align:center;margin-top:calc(100vw / 750 * 30);} .AgVoice .AgVoice_Lead p{color:#3A3732;font-size:13px;line-height:24.7px;} .AgVoice_Slider{margin-top:calc(100vw / 750 * 50);} .AgVoice_Track{display:flex;gap:var(--v-gap);overflow-x:auto;scroll-snap-type:x mandatory; scroll-behavior:smooth;scrollbar-width:none;-ms-overflow-style:none; margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw); padding:0 calc(100vw / 750 * 30);scroll-padding-left:calc(100vw / 750 * 30);} .AgVoice_Track::-webkit-scrollbar{display:none;} .AgVoice_Card{flex:0 0 calc(100vw / 750 * 318);scroll-snap-align:start; background:#fff;border:1px solid var(--v-line);display:flex;flex-direction:column;} .AgVoice_Prod{margin:0;padding:calc(100vw / 750 * 22) calc(100vw / 750 * 24) calc(100vw / 750 * 16); font-size:10.5px;line-height:1.6;} .AgVoice_Prod a, .AgVoice_Prod a:link, .AgVoice_Prod a:visited{color:var(--v-sage);text-decoration:none; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:2;overflow:hidden; min-height:calc(1.7em * 2);} .AgVoice_Prod a:hover{color:var(--v-sage);opacity:1;} .AgVoice_Thumb{aspect-ratio:1/1;overflow:hidden;background:#F4F1EC;} .AgVoice_Thumb img{width:100%;height:100%;object-fit:cover;display:block;} .AgVoice_Card_Body{padding:calc(100vw / 750 * 24) calc(100vw / 750 * 24) calc(100vw / 750 * 26); display:flex;flex-direction:column;flex:1;} .AgVoice_Stars{display:inline-flex;color:var(--v-gold);letter-spacing:.08em;font-size:12px;} .AgVoice_Text{margin:calc(100vw / 750 * 16) 0 0;font-size:12px;line-height:1.8;color:#333;flex:1; display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:4;overflow:hidden;} .AgVoice_Meta{margin:calc(100vw / 750 * 20) 0 0;font-size:10.5px;line-height:1.7; color:var(--v-muted);letter-spacing:.04em;} .AgVoice_Meta span{display:block;} /* 矢印とドットはSPでは使いません（横スワイプ＋下のバーで操作します） */ .AgVoice_Ctrl{display:none;} .AgVoice_Bar{position:relative;height:2px;background:var(--v-line); margin-top:calc(100vw / 750 * 40);overflow:hidden;} .AgVoice_Bar_Thumb{position:absolute;top:0;left:0;height:2px;background:var(--v-gold); width:25%;transform:translateX(0);transition:transform .15s linear;} .AgVoice_More{text-align:center;margin-top:calc(100vw / 750 * 50);} .AgVoice_More a, .AgVoice_More a:link, .AgVoice_More a:visited{display:inline-block;padding:calc(100vw / 750 * 28) calc(100vw / 750 * 60); border:1px solid var(--v-gold);color:var(--v-gold);font-size:13px;letter-spacing:.08em; text-decoration:none;background:#fff;transition:.2s;} .AgVoice_More a:hover{background:var(--v-gold);color:#fff;opacity:1;} /* ========================================================= 2026-08-27 W8-15：SPバーガーメニュー下部（ログイン行と ABOUT US） --------------------------------------------------------- ■ 何をしているか 1) 「法人のお客様 → ログイン・マイページ／会員登録 → ABOUT US」の上下の間隔を、どちらも 60/750vw（vw430で34.4px）に揃える上の間隔＝ Header_Content01 の下余白 40/750vw ＋ Content03 の上余白 20/750vw 下の間隔＝ Content03 の下余白 30/750vw ＋ Content02 の上余白 30/750vw （変更前は 80/750vw と 160/750vw で、下が上の2倍あった） 2) ログイン行と ABOUT US のリンクを、上部の「用途で選ぶ」〜「贈る相手で選ぶ」と同じ書体・同じ大きさ・同じ字間にする font-family "FP-ヒラギノ角ゴ ProN W3"（ゴシック） → "Shippori Mincho"（明朝） font-size 28/750vw → 32/750vw letter-spacing 0.02em → 0.04em line-height 44.8/750vw → 1.8 いずれも add_sp.css の .Header_Main .Header_Navi .Header_Navi_List01 .Header_Navi_Trigger が上部ナビに指定している値と同じ。 ※「法人のお客様」だけは Noto Serif JP（--ag-font-serif）で、上部ナビ5項目とは別の明朝になっている。これは既存の指定なので今回は触っていない。ヘッダー内を完全に1書体にしたい場合は、上の「法人のお客様」ブロックの font-family を var(--ag-font-serif) → "Shippori Mincho", serif に、 letter-spacing を 0.08em → 0.04em に変えれば揃う。 ■ 上書きしている相手（add_sp.css） .Header_Main .Header_Content03 (0,2,0) padding .Header_Main .Header_Content02 (0,2,0) padding .Header_Main .Header_Content03 .Header_Content03_Link02, ... a (0,3,0)/(0,3,1) font-size .Header_Main .Header_Content02 .Header_Navi_List02 li a (0,3,2) font-size このファイルは add_sp.css より前に読まれるため、!important ではなくセレクタの詳細度（下記はいずれも 0,5,x）で勝たせている。デバッグ時は「.SP_BurgerMenu_Inner を1段足しているだけ」と考えれば読める。 ■ PCへの影響 max-width:767px に閉じているため無し。加えてPCでは .Header_Content02 が display:none、.Header_Content03 は position:absolute で余白を持たない。 ■ WordPress 側にも同じブロックを入れてある（両サイトで見た目を揃えるため） ========================================================= */ @media screen and (max-width: 767px) { .Header_Main .Header_Inner.SP_BurgerMenu .SP_BurgerMenu_Inner .Header_Content03 { padding-top: calc(100vw / 750 * 20); padding-bottom: calc(100vw / 750 * 30); } .Header_Main .Header_Inner.SP_BurgerMenu .SP_BurgerMenu_Inner .Header_Content02 { padding-top: calc(100vw / 750 * 30); } .Header_Main .Header_Inner.SP_BurgerMenu .SP_BurgerMenu_Inner .Header_Content03 .Header_Content03_Link02, .Header_Main .Header_Inner.SP_BurgerMenu .SP_BurgerMenu_Inner .Header_Content03 .Header_Content03_Link02 a, .Header_Main .Header_Inner.SP_BurgerMenu .SP_BurgerMenu_Inner .Header_Content02 .Header_Navi_List02 li a { font-family: "Shippori Mincho", serif; font-size: calc(100vw / 750 * 32); line-height: 1.8; letter-spacing: 0.04em; } } } /* ==== 3. SP ここまで ==== */