/* Flowers-Do トップ2026 案C（カラフルPOP＋用途ナビ）002（001から：写真を商品写真に／色の入口なし／税込を大きく／ランキングに税込・SOLD OUT）
   読み込み：templates/pageIndex.tpl から。指定はすべて #index の中だけに効く（他のページに影響しない）
   色：お祝い＝ピンク #b5628a／#fbeef4、お供え＝緑 #5f9078／#e8f3ec（商品詳細・周年CSSと同じ）
   スマホ(375px)基準。min-width:768px でPC。 */

#index{letter-spacing:0;max-width:1000px;margin:0 auto;padding:0 12px 24px;box-sizing:border-box;color:#333;line-height:1.6}
#index #main,#index #sub{float:none;width:auto;margin:0;padding:0}
#index hr{display:none}
#index a{text-decoration:none}
#index *{letter-spacing:0}
#index img{max-width:100%}
#index ul{list-style:none;margin:0;padding:0}

/* 1〜2. 最初の画面：写真（WebManのトップ画像）＋1行コピー */
#index #bannerMain{width:auto;max-width:none;float:none;margin:0 -12px;padding:0;line-height:0}
#index #bannerMain img{display:block;width:100%;height:300px;object-fit:cover;object-position:50% 58%}
#index .t-hero-ph{margin:0 -12px;height:150px;background:linear-gradient(120deg,#ffd6e7 0%,#ffe9a8 28%,#c6e8ff 55%,#d9c9f5 80%,#cdebd9 100%)}
#index .t-catch{margin:0;padding:14px 4px 6px;text-align:center;font-size:20px;font-weight:bold;line-height:1.4;color:#b5628a}
#index .t-catch small{display:block;margin-top:2px;font-size:12px;font-weight:normal;color:#666}

/* 3. 3つの約束の帯 */
#index .t-promise{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px;margin:10px 0 18px}
#index .t-promise li{padding:8px 4px;border:1px solid #e3d6ee;border-radius:10px;background:#faf7fd;text-align:center;font-size:11px;font-weight:bold;line-height:1.45;color:#5b4a8a}
#index .t-promise li b{display:block;margin-bottom:2px;font-size:10px;font-weight:normal;color:#8a7aa8}

/* 4. 2つの大きな入口＋小さい入口 */
#index .t-sec-title{margin:22px 0 10px;padding:0 0 0 10px;border-left:6px solid #b5628a;font-size:16px;font-weight:bold;line-height:1.3;color:#333}
#index .t-gate{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
#index .t-gate a{display:flex;flex-direction:column;justify-content:flex-end;min-height:120px;padding:12px;border-radius:14px;color:#fff;box-sizing:border-box}
#index .t-gate a b{font-size:18px;line-height:1.3}
#index .t-gate a span{margin-top:4px;font-size:11px;line-height:1.4;opacity:.95}
#index .t-gate .t-oiwai{background:linear-gradient(150deg,#e07aa6,#b5628a 70%)}
#index .t-gate .t-osonae{background:linear-gradient(150deg,#7cae96,#5f9078 70%)}
#index .t-links{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 0}
#index .t-links a{display:block;padding:6px 12px;border:1px solid #cfc5dc;border-radius:999px;background:#fff;font-size:12px;font-weight:bold;line-height:1.4;color:#5b4a8a}
#index .t-links a.t-g{border-color:#5f9078;color:#3f6e57;background:#e8f3ec}
#index .t-links a.t-p{border-color:#b5628a;color:#8f3f66;background:#fbeef4}

/* 5. 予算から選ぶ */
#index .t-budget{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
#index .t-budget a{display:block;padding:12px 4px;border:2px solid #f3b6d0;border-radius:12px;background:#fff;text-align:center;color:#8f3f66}
#index .t-budget a b{display:block;font-size:20px;line-height:1.2}
#index .t-budget a b em{font-size:11px;font-style:normal}
#index .t-budget a span{display:block;margin-top:2px;font-size:10px;line-height:1.4;color:#777}
#index .t-note{margin:6px 0 0;font-size:11px;color:#777}

/* 6. 色から選ぶ */
#index .t-colors{display:flex;flex-wrap:wrap;gap:10px 14px}
#index .t-colors a{display:block;width:52px;text-align:center;font-size:11px;font-weight:bold;color:#555}
#index .t-colors a i{display:block;width:44px;height:44px;margin:0 auto 3px;border-radius:50%;border:1px solid rgba(0,0,0,.1)}

/* 7. 人気ランキング（n_ranking） */
#index #index_ranking{display:block;margin:0;padding:0;border:0;background:none}
#index #index_ranking ul{display:grid;width:auto;max-width:100%;min-width:0;box-sizing:border-box;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0;padding:0;border:0}
#index #index_ranking li{position:relative;float:none;width:auto;margin:0;padding:0;border:0;background:none}
#index #index_ranking li a{display:block;color:#333}
#index #index_ranking li img.t-rimg{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:8px;background:#f4f4f4}
#index #index_ranking li p.t-name{margin:4px 0 0;padding:0;font-size:12px;font-weight:bold;line-height:1.4}
#index #index_ranking li em{position:absolute;top:6px;left:6px;z-index:1;width:26px;height:26px;border-radius:50%;background:#b5628a;color:#fff;font-size:13px;font-style:normal;font-weight:bold;line-height:26px;text-align:center}
#index #index_ranking li .t-badge{position:absolute;top:6px;right:6px;z-index:1;padding:2px 8px;border-radius:999px;background:#333;color:#fff;font-size:10px;font-weight:bold;line-height:1.5}
#index #index_ranking li .t-new{background:#e8590c}
#index #index_ranking li.t-so img.t-rimg{opacity:.45}
#index #index_ranking li:nth-child(1) em{background:#d4a017}
#index #index_ranking li:nth-child(2) em{background:#8a97a6}
#index #index_ranking li:nth-child(3) em{background:#b87333}

/* 商品の並び（item の繰り返し）：写真が大きい2列カード */
#index .item_list{margin:22px 0 0;padding:0;border:0;background:none}
#index .item_list h2.arrowTtl{margin:0 0 10px;padding:0 0 0 10px;border:0;border-left:6px solid #b5628a;background:none;font-size:16px;line-height:1.3}
#index .item_list h2.arrowTtl a{color:#333}
#index .item_list ul{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 10px;margin:0;padding:0}
#index .item_list li{float:none;width:auto;margin:0;padding:0;border:0;background:none}
#index .item_list li:after,#index .item_list li:before{display:none}
#index .item_list li a{display:block;color:#333}
#index .item_list li figure{float:none;display:block;width:auto;height:auto;max-height:none;overflow:visible;margin:0;padding:0;line-height:0}
#index .item_list li figure img{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:8px;background:#f4f4f4}
#index .item_list li h3{margin:6px 0 0;padding:0;border:0;background:none;font-size:13px;font-weight:bold;line-height:1.4}
#index .item_list li p.item_value,#index #index_ranking li p.item_value{margin:2px 0 0;font-size:11px;font-weight:normal;line-height:1.4;color:#777}
#index .item_list li p.item_value b,#index #index_ranking li p.item_value b{font-size:16px;font-weight:bold;color:#b5628a}
#index .item_list li p.item_value small,#index #index_ranking li p.item_value small{display:block;font-size:10px;color:#888}
#index .item_list li p:not(.item_value){margin:2px 0 0;font-size:11px;line-height:1.5;color:#777}
#index .item_list .moreWrap{margin:12px 0 0;text-align:center}
#index .item_list .moreWrap a.listLink{display:inline-block;padding:8px 28px;border:2px solid #b5628a;border-radius:999px;background:#fff;font-size:13px;font-weight:bold;color:#b5628a}

/* 9. 読み物 */
#index .t-read{display:block;margin:22px 0 0;padding:14px;border-radius:12px;background:#f1ecfa;color:#5b4a8a}
#index .t-read b{display:block;font-size:14px}
#index .t-read span{font-size:12px;color:#666}

/* よくあるご質問（スマホでも出す。sp.css の非表示を、トップの中だけ上書き） */
#index #sub{display:block!important;margin-top:22px}
#index #side_banner{margin:0 0 14px}
#index #side_banner ul{display:grid;grid-template-columns:1fr;gap:8px}
#index #index_faq{padding:14px;border-radius:12px;background:#f6f7f8}
#index #index_faq h2{margin:0 0 8px;padding:0;border:0;background:none;font-size:15px;line-height:1.4;color:#333}
#index #index_faq ul{display:block}
#index #index_faq li{float:none;width:auto;margin:0;padding:6px 0;border-bottom:1px solid #e5e5e5;font-size:13px}
#index #index_faq li a{color:#4a5568}
#index #index_faq #index_faq1,#index #index_faq #index_faq2{float:none;width:auto;margin:0;padding:0}
#index #index_faq p{margin:8px 0 0;text-align:right;font-size:12px}

/* PC（768px以上）：同じHTMLを横に広げる */
@media (min-width:768px){
  #index{padding:0 16px 40px}
  #index #bannerMain,#index .t-hero-ph{margin:0 -16px}
  #index .t-hero-ph{height:260px}
  #index #bannerMain img{height:420px}
  #index .t-catch{padding:22px 0 8px;font-size:30px}
  #index .t-catch small{font-size:14px}
  #index .t-promise{gap:12px;margin:14px auto 28px;max-width:760px}
  #index .t-promise li{padding:12px 8px;font-size:14px}
  #index .t-promise li b{font-size:12px}
  #index .t-sec-title{margin:36px 0 14px;font-size:20px}
  #index .t-gate{gap:18px}
  #index .t-gate a{min-height:200px;padding:20px}
  #index .t-gate a b{font-size:26px}
  #index .t-gate a span{font-size:14px}
  #index .t-links{gap:10px;margin-top:16px}
  #index .t-links a{padding:8px 18px;font-size:14px}
  #index .t-budget{gap:16px}
  #index .t-budget a{padding:20px 8px}
  #index .t-budget a b{font-size:28px}
  #index .t-budget a span{font-size:13px}
  #index .t-colors{gap:14px 24px}
  #index .t-colors a{width:72px;font-size:13px}
  #index .t-colors a i{width:60px;height:60px}
  #index #index_ranking ul{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
  #index .item_list{margin-top:36px}
  #index .item_list h2.arrowTtl{font-size:20px}
  #index .item_list ul{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px 14px}
  #index .item_list li h3{font-size:14px}
  #index .item_list li p.item_value b{font-size:18px}
  #index #sub{margin-top:36px}
  #index #side_banner ul{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
}