/* 共通 */
.homev2{ background:#fff; }
.homev2-section{ max-width:1100px; margin:0 auto; padding:28px 24px; }
.homev2-title{ font-size:12px; letter-spacing:.18em; margin:0 0 14px; }
.homev2-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:14px; position:relative; padding-bottom:14px; margin-bottom:24px;}
.homev2-head h2{ font-size:22px; letter-spacing:.08em; margin:0; font-weight:600; display:inline-block; padding-bottom:10px; }
.homev2-more{ font-size:13px; letter-spacing:.08em; text-decoration:none; font-weight:600; color:#111; }

.homev2-more:hover{
  color:#c11717;
}

.homev2-head{
  display:flex;
  justify-content:space-between;
  align-items:flex-end;
  padding-bottom:12px;
  border-bottom:2px solid #c11717;   /* ← 細めに */
}

/* グリッド */
.homev2-grid{ display:grid; gap:16px; }
.homev2-grid--products{ grid-template-columns: repeat(4, 1fr); }
.homev2-grid--theme{ grid-template-columns: repeat(3, 1fr); }
.homev2-grid--contents{ grid-template-columns: repeat(3, 1fr); }
.homev2-grid--cats{ grid-template-columns: repeat(3, 1fr); }

/* タイル/バナー（ホバー効果の土台） */
.homev2-tile,
.homev2-banner,
.homev2-card{
  position:relative;
  display:block;
  text-decoration:none;
  color:#111;
  overflow:hidden;                 /* 画像拡大のはみ出しを隠す */
  outline:1px solid rgba(0,0,0,.06);
  background:#f7f7f7;
}


.homev2-tile img,
.homev2-banner img,
.homev2-card img{
  display:block;
  width:100%;
  height:auto;
  transform:scale(1);
  transition: transform .25s ease;
}

/* ★PDF指定：ホバーで赤枠＋画像拡大 */
.homev2-tile:hover,
.homev2-banner:hover,
.homev2-card:hover{
  outline:2px solid #c40000;        /* 赤枠 */
}

.homev2-tile:hover img,
.homev2-banner:hover img,
.homev2-card:hover img{
  transform:scale(1.04);            /* 少し拡大 */
}

/* ラベル */
.homev2-tile__label,
.homev2-banner__label{
  position:absolute;
  left:12px;
  bottom:12px;
  background:rgba(255,255,255,.88);
  padding:6px 10px;
  font-size:11px;
  letter-spacing:.12em;
}

/* =========================
   KV (MetaSlider) - 整理版
   ========================= */

/* 中央カラムの共通幅（既にあるならOK） */
.homev2 {
  --homev2-max: 1120px;
  --homev2-pad: 24px;
}

/* KVセクション（外側の余白だけ担当） */
.homev2-kv{
  margin: 0 auto 60px;
}

/* MetaSliderを「中央寄せ＋カラム幅」に固定 */
.homev2-kv .metaslider{
  max-width: var(--homev2-max);
  margin: 0 auto;
  padding: 0 var(--homev2-pad);

  /* テーマ/プラグインのfloat対策 */
  float: none !important;
  display: block;
}

/* スライダーの角丸（任意） */
.homev2-kv .metaslider .flexslider{
  border-radius: 10px;
  overflow: hidden;
}

/* 画像の見え方 */
.homev2-kv .metaslider .slides img{
  width: 100%;
  height: 460px;         /* 380〜480で調整 */
  object-fit: cover;
  display: block;
}

/* スマホ */
@media (max-width: 768px){
  .homev2-kv .metaslider{
    max-width: none;
    padding: 0;
  }
  .homev2-kv .metaslider .slides img{
    height: 320px;
  }
}


/* 商品カード */
.homev2-card{ padding:10px; background:#fff; }
.homev2-card__img{ background:#f2f2f2; }
.homev2-card__name{ font-size:11px; margin-top:10px; letter-spacing:.10em; }
.homev2-card__price{ font-size:11px; opacity:.7; margin-top:4px; }

/* 下部info */
.homev2-section--info{ padding-top:10px; }
.homev2-info{ display:grid; grid-template-columns: repeat(3, 1fr); gap:18px; }
.homev2-info__block h3{ font-size:12px; letter-spacing:.14em; margin:0 0 10px; }
.homev2-info__block p{ font-size:12px; line-height:1.7; margin:0; opacity:.8; }

/* レスポンシブ（最低限） */
@media (max-width: 980px){
  .homev2-grid--products{ grid-template-columns: repeat(2, 1fr); }
  .homev2-grid--theme,
  .homev2-grid--contents,
  .homev2-grid--cats,
  .homev2-info{ grid-template-columns: 1fr; }
}

.homev2-kv {
  margin-bottom: 60px;
}

.homev2 .metaslider {
  max-width: 1200px;  /* 好きな幅 */
  margin: 0 auto;
}

/* 中央カラムの共通幅 */
.homev2 {
  --homev2-max: 1120px;   /* ここを 1040 / 1200 など好みで調整 */
  --homev2-pad: 24px;
}

.homev2 .homev2-container {
  max-width: var(--homev2-max);
  margin: 0 auto;
  padding: 0 var(--homev2-pad);
}

/* MetaSlider自体を中央カラム幅にする */
.homev2 .homev2-kv .metaslider {
  max-width: var(--homev2-max);
  margin: 0 auto;
  padding: 0 var(--homev2-pad);
}

/* 画像の見え方（圧迫感を減らす） */
.homev2 .homev2-kv .metaslider .slides img {
  width: 100%;
  height: 460px;        /* 圧迫感あるなら 380〜480 くらいで調整 */
  object-fit: cover;
  display: block;
}

.homev2 .homev2-kv .metaslider .flexslider {
  border-radius: 10px;
  overflow: hidden;
}

.homev2 .homev2-section {
  padding: 48px 0;  /* セクション間の余白 */
}

@media (max-width: 768px) {
  .homev2 .homev2-kv .metaslider {
    max-width: none;
    padding: 0;
  }
  .homev2 .homev2-kv .metaslider .slides img {
    height: 320px;
  }
}

/* RECOMMENDED の中のWC商品リストをホーム用に整える */
.homev2-section--recommended ul.products{
  margin: 0;
  padding: 0;
}

.homev2-section--recommended ul.products li.product{
  margin: 0;
}

/* ===== RECOMMENDED：ホーム用商品グリッド ===== */
.homev2-section--recommended ul.products{
  list-style:none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
}

.homev2-section--recommended ul.products li.product{
  width: auto !important;     /* テーマの固定幅を無効化 */
  float: none !important;     /* floatを無効化 */
  margin: 0 !important;
  text-align: left;
}

.homev2-section--recommended ul.products li.product a{
  text-decoration:none;
  color: inherit;
  display:block;
}

.homev2-section--recommended ul.products li.product img{
  width: 100%;
  height: 210px;
  object-fit: contain;        /* 商品画像は contain が無難 */
  background: #fff;
  display:block;
}

.homev2-section--recommended .woocommerce-loop-product__title{
  margin: 10px 0 0;
  font-size: 12px;
  letter-spacing: .06em;
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1.4;
  min-height: 3.0em;          /* タイトル段数を揃える */
}

.homev2-section--recommended .price{
  margin-top: 6px;
  color: #c00;
  font-size: 13px;
}

/* レスポンシブ */
@media (max-width: 1024px){
  .homev2-section--recommended ul.products{ grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 640px){
  .homev2-section--recommended ul.products{ grid-template-columns: repeat(2, 1fr); }
}

/* RECOMMENDED スライダー：横に複数見せる */
.homev2-reco-swiper{
  position: relative;
  width: 100%;
  margin: 0 auto;
}

/* スライド内カード */
.homev2-reco-card{
  display: block;
  text-decoration: none;
  color: inherit;
}

/* 画像の枠（白背景＋余白） */
.homev2-reco-card__img{
  background: #fff;
  padding: 18px;
}

/* 画像サイズ：でかすぎ問題をここで止める */
.homev2-reco-card__img img{
  width: 100%;
  height: 180px;          /* ← ここが超重要。1枚目風の高さ */
  object-fit: contain;
  display: block;
}

/* テキスト */
.homev2-reco-card__title{
  margin-top: 10px;
  font-size: 12px;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1.4;
}

.homev2-reco-card__price{
  margin-top: 6px;
  color: #000;
  font-size: 12px;
}

/* 右の赤い矢印っぽく */
.homev2-reco-next,
.homev2-reco-prev{
  position: absolute;
  top: 40%;
  width: 52px;
  height: 52px;
  border-radius: 999px;
  background: #c11717;
  cursor: pointer;
  z-index: 5;
}

.homev2-reco-prev{ left: -26px; }
.homev2-reco-next{ right: -26px; }

.homev2-reco-prev:after,
.homev2-reco-next:after{
  content: '';
  position:absolute;
  inset:0;
  margin:auto;
  width: 10px;
  height: 10px;
  border-top: 2px solid #fff;
  border-right: 2px solid #fff;
  transform: rotate(-135deg);
}

.homev2-reco-next:after{ transform: rotate(45deg); }

/* スマホは矢印を内側に */
@media (max-width: 768px){
  .homev2-reco-prev{ left: 8px; }
  .homev2-reco-next{ right: 8px; }
}

.homev2-reco-swiper{
  overflow: visible;
}

.homev2-reco-next,
.homev2-reco-prev{
  z-index: 9999;
}

.homev2-reco-next,
.homev2-reco-prev{
  display: flex;
  align-items: center;
  justify-content: center;
}
.homev2-reco-prev:after,
.homev2-reco-next:after{
  position: static;
  margin: 0;
}

.homev2-categories{
  max-width:1200px;
  margin:0 auto;
  padding:40px 20px;
}

.cat-grid{
  display:flex;
  flex-direction:column;
  gap:16px;
}

.cat-row-2,
.cat-row-3{
  display:grid;
  gap:16px;
}

.cat-row-2{
  grid-template-columns: 1fr 1fr;
}

.cat-row-3{
  grid-template-columns: repeat(3,1fr);
}

.cat-tile{
  position:relative;
  display:block;
  overflow:hidden;
}

.cat-img{
  display:block;
  width:100%;
  height:260px;              /* ←確実に表示させる */
  background-size:cover;
  background-position:center;
  background-color:#eee;
}

.cat-tile:hover .cat-img{
  transform: scale(1.05);
}

/* 横長タイル用 */
.cat-tile--wide .cat-img{
  height:340px;              /* 横長用 */
}

@media (max-width: 768px){
  .cat-tile--wide .cat-img{
    aspect-ratio: 16 / 8;
  }
}

.cat-img{
  display:block;
  width:100%;
  height:260px;              /* ←確実に出すために固定 */
  background-size:cover;
  background-position:center;
  background-color:#eee;     /* 画像失敗でも面が見える */
  transition: transform .4s ease;
}

.cat-tile--wide .cat-img{
  height:340px;              /* 横長は少し高め */
}

/* 3列グリッド用 */
.cat-tile--grid{
  display:block;
}

.cat-tile--grid .cat-img{
  height:220px;
}

.cat-tile--grid .cat-label{
  position:static;       /* 絶対配置を解除 */
  transform:none;
  background:none;
  padding:0;
  margin-top:12px;

  text-align:center;
  font-size:18px;
  letter-spacing:.10em;
  color:#111;
}

.cat-tile--grid .cat-label{
  text-transform:uppercase;
  font-weight:500;
}

/* 横長用：中央の小さい白ラベル（文字幅） */

/* 強制：横長タイルのラベルを文字サイズに固定 */
.cat-tile--wide .cat-label{
  display:inline-block !important;
  width:auto !important;
  height:auto !important;
  min-height:0 !important;
  max-height:none !important;
  padding:4px 12px !important;
  line-height:1 !important;

  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);

  background:#fff;
  border-radius:2px;
  white-space:nowrap;
}

/* 横長用：中央の小さい白ラベル（衝突しない専用クラス） */
.cat-tile--wide .cat-badge{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  display:inline-block;
  background:#fff;
  padding:4px 12px;
  border-radius:2px;
  font-size:18px;
  letter-spacing:.12em;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  color:#111;
}

/* ===== CATEGORIES BY THEME ===== */
.theme-grid{
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}

.theme-tile{
  position:relative;
  display:block;
  text-decoration:none;
  color:inherit;
  overflow:hidden;
}

.theme-img{
  display:block;
  width:100%;
  height:240px;
  background-size:cover;
  background-position:center;
  background-color:#eee;
  transition:transform .4s ease;
}

.theme-tile:hover .theme-img{
  transform:scale(1.04);
}

/* 画像の外・左下テキスト */
.theme-tile{
  position:relative;
  display:block;
  text-decoration:none;
  color:inherit;
}

.theme-img{
  display:block;
  width:100%;
  height:240px;
  background-size:cover;
  background-position:center;
  background-color:#eee;
  transition:transform .4s ease;
}

.theme-badge{
  position:static;         /* ←絶対配置をやめる */
  display:block;

  margin-top:10px;
  font-size:14px;
  letter-spacing:.12em;
  font-weight:600;

  text-align:left;
  background:none;
  padding:0;
}



/* レスポンシブ */
@media (max-width: 980px){
  .theme-grid{ grid-template-columns: 1fr; }
  .theme-img{ height:220px; }
}

/* ===== CONTENTS（大きい画像のみ） ===== */
.contents-hero{
  display:block;
  text-decoration:none;
  color:inherit;
}

.contents-hero__img{
  display:block;
  width:100%;
  height:420px;          /* ←ここで存在感を作る */
  background-size:cover;
  background-position:center;
  background-color:#eee;
  transition:transform .4s ease;
}

.contents-hero{
  position:relative;
  display:block;
  text-decoration:none;
  color:inherit;
}

.contents-hero__img{
  display:block;
  width:100%;
  height:420px;
  background-size:cover;
  background-position:center;
  background-color:#eee;
  transition:transform .4s ease;
}

.contents-hero__label{
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);

  display:inline-block;
  background:rgba(255,255,255,.92);
  padding:6px 16px;
  border-radius:2px;

  font-size:12px;
  letter-spacing:.14em;
  font-weight:600;
  text-transform:uppercase;
  line-height:1;
  white-space:nowrap;
}

.contents-hero:hover .contents-hero__img{
  transform:scale(1.02);
}

@media (max-width: 980px){
  .contents-hero__img{ height:260px; }
}

/* ===== HOW TO ORDER ===== */
.howto-swiper{ position:relative; overflow:visible; }

.howto-card{
  display:block;
  text-decoration:none;
  color:inherit;
}

.howto-card__img{
  display:block;
  width:100%;
  height:180px;
  background-size:cover;
  background-position:center;
  background-color:#eee;
}

.howto-card__title{
  display:block;
  margin-top:10px;
  font-size:12px;
  letter-spacing:.12em;
  font-weight:600;
  text-transform:uppercase;
}

/* 矢印（RECOMMENDEDと同じ丸ボタン） */
.howto-next,
.howto-prev{
  position:absolute;
  top:40%;
  width:52px;
  height:52px;
  border-radius:999px;
  background:#c11717;
  cursor:pointer;
  z-index:5;
}

.howto-prev{ left:-26px; }
.howto-next{ right:-26px; }

.howto-prev:after,
.howto-next:after{
  content:'';
  width:10px; height:10px;
  border-top:2px solid #fff;
  border-right:2px solid #fff;
  position:absolute;
  inset:0;
  margin:auto;
  transform:rotate(-135deg);
}
.howto-next:after{ transform:rotate(45deg); }

/* スマホは内側へ */
@media (max-width:768px){
  .howto-prev{ left:8px; }
  .howto-next{ right:8px; }
}

.howto-static .swiper-wrapper{
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap:16px;
  transform:none !important;
}

/* ===== TOP ANNOUNCEMENT BAR ===== */
.homev2-announcement{
  background:#e10600;   /* ブランド赤 */
  text-align:center;
}

.homev2-announcement a{
  display:block;
  padding:10px 0;
  color:#fff;
  font-size:13px;
  letter-spacing:.05em;
  font-weight:500;
  text-decoration:none;
}

.homev2-announcement a:hover{
  opacity:.85;
}

/* 親ははみ出しOK（矢印用） */
.homev2-section--recommended,
.homev2-section--recommended .homev2-container{
  overflow: visible;
}

/* swiperは中身を切る（スライド溢れ防止） */
.homev2-reco-swiper{
  overflow: hidden;
  position: relative;
}

/* containerを基準にする */
.homev2-section--recommended .homev2-container{
  position: relative;
}

/* 矢印を container 基準で外側に */
.homev2-reco-prev,
.homev2-reco-next{
  position: absolute;
  top: 52%;                 /* だいたい中央 */
  transform: translateY(-50%);
  z-index: 10;
}

.homev2-reco-prev{ left: -26px; }
.homev2-reco-next{ right: -26px; }

.homev2-reco-wrap{
  position:relative;
  overflow:visible;
}

.homev2-reco-swiper{
  overflow:hidden;
}

/* ===== Home v2 Categories: Mobile layout ===== */
@media (max-width: 768px){

  /* 1) 全体：2列グリッド */
  .cat-grid{
    display:grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:12px;
  }

  /* 2) row wrapper（cat-row-3）は “中身だけ” グリッド化して親のgridに従わせる */
  .cat-row-3{
    display: contents; /* wrapperを消して中のaをcat-grid直下扱いに */
  }

  /* 3) タイルの共通 */
  .cat-tile{
    display:block;
    border-radius:12px;
    overflow:hidden;
    background:#fff;
    position:relative;
  }

  /* 4) 画像（background）: 高さ揃え */
  .cat-tile .cat-img{
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;     /* ← まずはこれが安定 */
    background-size: cover;
    background-position: center;
  }

  /* 5) 3枚グリッドのタイル：下にラベル */
  .cat-tile--grid .cat-label{
    display:block;
    padding:10px 10px 12px;
    font-size:13px;
    line-height:1.25;
    letter-spacing:.06em;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
    color:#111;
  }

  /* 6) 横長タイル：2列ぶち抜き + 比率を横長に */
  .cat-tile--wide{
    grid-column: 1 / -1;     /* span 2 */
  }
  .cat-tile--wide .cat-img{
    aspect-ratio: 16 / 7;    /* 横長を強調（好みで 16/8 でもOK） */
  }

  /* 7) バッジ（横長の中央）: 長文でも暴れない */
  .cat-tile--wide .cat-badge{
    position:absolute;
    left:50%;
    top:50%;
    transform:translate(-50%, -50%);
    max-width: calc(100% - 24px);
    padding:10px 12px;
    text-align:center;
    font-size:12px;
    line-height:1.2;
    letter-spacing:.08em;

    /* 長い文言対策 */
    white-space:normal;
    overflow:hidden;
    display:-webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;   /* 2行まで */
  }
}

/* iPhone SE級は1列に */
@media (max-width: 360px){
  .cat-grid{
    grid-template-columns: 1fr;
  }
  .cat-tile--wide{
    grid-column:auto; /* 1列なので不要 */
  }
}

/* ===== HOW TO ORDER: mobile 2-column ===== */
@media (max-width: 768px){

  /* Swiperのtransformを無効化 */
  .homev2-section--howto .swiper-wrapper{
    display:grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap:16px;
    transform:none !important;
  }

  .homev2-section--howto .swiper-slide{
    width:auto !important;
    margin:0 !important;
  }

  /* 矢印は非表示 */
  .homev2-section--howto .howto-prev,
  .homev2-section--howto .howto-next{
    display:none !important;
  }

  /* 画像比率を整える（重要） */
  .howto-card__img{
    display:block;
    width:100%;
    aspect-ratio: 4 / 3;
    background-size:cover;
    background-position:center;
  }

  /* タイトル整形 */
  .howto-card__title{
    display:block;
    margin-top:8px;
    font-size:14px;
    line-height:1.3;
    letter-spacing:.05em;
  }
}

@media (max-width: 768px){
  .cat-tile--wide .cat-img{
    aspect-ratio: 16 / 9; /* ← 16/7より少し高さが出て見やすい */
  }

  /* バッジを少し下寄せ＋背景で読みやすく */
  .cat-tile--wide .cat-badge{
    top:auto;
    bottom:12px;
    transform:translateX(-50%);
    background:rgba(255,255,255,.85);
    color:#111;
    border-radius:999px;
  }
}

@media (max-width: 768px){

  .cat-tile--wide .cat-img{
    aspect-ratio: 16 / 9; /* 少し高さ出す */
  }

  .cat-tile--wide .cat-badge{
    bottom:14px;
    top:auto;
    transform:translateX(-50%);
    background:rgba(255,255,255,.9);
    color:#111;
    padding:8px 14px;
    border-radius:999px;
    font-size:12px;
  }
}

/* ===== Mobile only: Starter Kit image override ===== */
@media (max-width: 768px){

  .cat-tile--starter .cat-img{
    background-image: url("https://futontokyo.com/wp-content/uploads/2026/02/starterkit_m.jpg") !important;
    background-size: cover;
    background-position: center;
  }

}