@charset "UTF-8";

/* =========================================
   SHIRT-THEME OVERRIDE (Ice & Silver)
   ========================================= */
:root {
/* ★シルバーの上書きを消したので、見出し棒などは自動で「田屋Gold」に戻ります */
  --shirt-edge: #eaf2f8;     /* 両サイドの水色 */
  --shirt-light: #ffffff;    /* 真ん中あたりの白 */
  --shirt-accent: #7ca8cc;   /* アクアブルー（ボタンホバー時） */
  --taya-black: #334155;     /* テキスト色 */
}

.taya-lp {
  /* 1. 地紋のスタート位置をブラウザの最上部(0)に固定 */
  margin-top: 0 !important;
  padding-top: 0 !important;
  background-origin: border-box !important;
  background-position: top center !important;
  
  /* フッターとの余白調整 */
  margin-bottom: 0 !important;
  background-repeat: repeat;
}

/* 2. メインビジュアル（写真）をヘッダーの高さ分下げる */
.taya-lp .main-visual {
  margin-top: 97px !important;
}

@media screen and (max-width: 768px) {
  .taya-lp .main-visual {
    margin-top: 0 !important; /* スマホはヘッダーに合わせて調整 */
  }
}

/* =========================================
   SHIRT PATTERN BACKGROUND 
   ========================================= */

/* シャツ特集専用の見出し装飾 */
.shirt-theme h2::after {
  content: " ";
  display: block;
  width: 40px;
  height: 2px;
  background: var(--taya-gold); /* シルバーのライン */
  margin: 15px auto 0;
}

/* ボタン：清涼感のあるホバーエフェクト */
.shirt-theme .taya-btn {
  background: var(--taya-gold); /* 初期はシルバー */
  color: #fff !important;
  border-radius: 2px;
  border: none;
  transition: all 0.3s ease;
}

.shirt-theme .taya-btn:hover {
  background: var(--shirt-accent); /* ホバーでアクアブルーへ */
  transform: translateY(-2px);
  box-shadow: 0 6px 15px rgba(124, 168, 204, 0.4);
}

/* =========================================
   TYPOGRAPHY & LAYOUT ADJUSTMENTS
   ========================================= */

/* 説明文（p）のサイズを小さくして、行間をゆったりさせる */
.shirt-theme .block-text p {
  font-size: 14px;         /* 標準より一回り小さく */
  line-height: 1.9;        /* 行間を広げて読みやすく */
  color: #445566;          /* 上品なブルーグレー */
  margin-bottom: 1.5em;    /* 下の商品リストとの間隔 */
}

/* スマホ表示の時は、視認性を守るため少しだけ戻す調整 */
@media screen and (max-width: 768px) {
  .shirt-theme .block-text p {
    font-size: 13.5px; 
    line-height: 1.8;
  }
}

/* スマホで「写真・文章・商品」の順に強制する設定 */
@media screen and (max-width: 768px) {
  /* PCで文章が先にきているブロックにこのクラスを付与 */
  .taya-lp .block-2col.reverse-sp {
    display: flex !important;
    flex-direction: column-reverse !important; /* 下にある写真を一番上に持ってくる */
  }

  /* 写真と文章の間の余白を調整 */
  .taya-lp .block-2col.reverse-sp .block-text {
    margin-top: 24px;
    padding-top: 0;
  }
  
  /* 商品リスト(item-list)が文章の下に来るように配置を確認 */
  .taya-lp .block-2col.reverse-sp .item-list {
    order: 2; /* 明示的に最後に配置 */
  }
}

/* 特集内の最後のセクション（ギフト案内など）の下余白を調整 */
.taya-lp section:last-of-type {
  margin-bottom: 0 !important;
  padding-bottom: 80px;
}
.taya-lp .block-wide-bottom {
  margin-bottom: 0 !important;
}

/* =========================================
   SLIDER BASE CSS
   ========================================= */
.mv-slider {
    position: relative;
    width: 100%;
    height: auto;
    overflow: hidden;
}

.mv-slide {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    opacity: 0;
    transition: opacity 1.5s ease-in-out; /* 1.5秒かけてフェード */
    z-index: 1;
}

/* 最初の1枚目とアクティブなスライドを表示 */
.mv-slide.active {
    position: relative; 
    opacity: 1;
    z-index: 2;
}

.main-visual .caption {
    z-index: 11;
}

/* =========================================
   MVキャプションの位置変更（左下 → 左中央）
   ========================================= */
.main-visual .caption {
    position: absolute;
    top: 50%;                      /* 上から50%（真ん中）に配置 */
    bottom: auto !important;       /* ベースCSSの「下付け」を強制リセット */
    left: 5%;                      /* 左からの余白（必要に応じて調整） */
    transform: translateY(-50%);   /* 要素の高さの半分だけ上に戻して、完全にド真ん中にする */
    z-index: 11;
}

/* スマホ表示の時の位置調整（必要に応じて） */
@media screen and (max-width: 768px) {
    .main-visual .caption {
        left: 4%;                  /* スマホの時は少し左端に寄せる */
        /* スマホで少し下寄りにしたい場合は top: 60%; などに調整してください */
    }
}