@charset "utf-8";
/*------------------------------------------------------------
	index（侍ジャパンLP版）整理済みバージョン
------------------------------------------------------------*/

/* =========================================================
   メインビジュアル（main_img.jpg）表示設定
   ========================================================= */
.mainVisual {
  width: 984px;
  /* height: 380px; removed */
  margin: 0 auto 48px auto;
  background-color: #011128; /* 背景紺 */
  /* overflow: hidden; removed */
  position: relative;
  box-sizing: border-box;
}

.mainVisual .box,
.mainVisual .topBox,
.mainVisual .photo {
  width: 100%;
  /* height: 100%; removed */
  margin: 0;
  padding: 0;
  display: block;
}

.mainVisual .photo img {
  width: 100%;
  /* height: 100%; removed */
  /* object-fit: cover; removed */
  display: block;
}

/* SP表示時：全幅＆高さ自動 */
@media all and (max-width: 896px) {
  .mainVisual {
    width: 100%;
    height: auto;
    margin-bottom: 32px;
  }
  .mainVisual .photo img {
    width: 100%;
    height: auto;
    object-fit: contain;
  }
}

/* =========================================================
   商品セクション：侍ジャパン風デザイン調整
   ========================================================= */

/* 商品区切りライン（上金＋下赤） */
.samurai-divider-product {
  position: relative;
  width: 100%;
  height: 14px;
  background:
    linear-gradient(#C6A756, #C6A756) top / 100% 4px no-repeat,
    linear-gradient(#BF0028, #BF0028) bottom / 100% 8px no-repeat;
}

/* フッター上部ライン（赤＋金） */
.samurai-divider-bottom {
  position: relative;
  width: 100%;
  height: 24px;
  background:
    linear-gradient(#BF0028, #BF0028) top / 100% 10px no-repeat,
    linear-gradient(transparent, transparent) center / 100% 2px no-repeat,
    linear-gradient(#C6A756, #C6A756) bottom / 100% 10px no-repeat;
  margin-bottom: 60px;
}

@media all and (max-width: 896px) {
  .samurai-divider-bottom {
    height: 18px;
    margin-bottom: 40px;
    background:
      linear-gradient(#BF0028, #BF0028) top / 100% 5px no-repeat,
      linear-gradient(transparent, transparent) center / 100% 1px no-repeat,
      linear-gradient(#C6A756, #C6A756) bottom / 100% 5px no-repeat;
  }
}

/* 見出し調整 */
.headLine01 {
  font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
  font-weight: 700;
  font-size: 4.2rem;
  line-height: 1.3;
  color: #fff;
  text-align: center;
  border: none;
  margin-bottom: 40px;
}
.headLine01 .sm {
  display: block;
  font-size: 3.2rem;
  font-weight: 700;
  color: #fff;
}
@media all and (max-width: 896px) {
  .headLine01 {
    font-size: 2.6rem;
    margin-bottom: 32px;
  }
  .headLine01 .sm {
    font-size: 2.4rem;
  }
}

/* 商品ブロック背景・余白調整 */
.comImgBox {
  background: transparent;
  margin-bottom: 60px;
}
@media all and (max-width: 896px) {
  .comImgBox {
    margin-bottom: 40px;
  }
}

/* =========================================================
   ボタン（TOPへ戻る）白色化
   ========================================================= */
.comBtn a {
  background-color: #fff;
  color: #011128;
  border: 1px solid #fff;
  font-weight: 700;
  border-radius: 25px;
  display: block;
  text-align: center;
  padding: 11px 4px 12px;
  font-size: 1.7rem;
  transition: 0.3s;
}
.comBtn a:hover {
  background-color: transparent;
  color: #fff;
  border: 1px solid #fff;
}

/* =========================================================
   フッター調整
   ========================================================= */
#gFooter {
  background: #011128;
  border: none;
}
.copy {
  text-align: center;
  color: #C6A756;
  font-family: "Helvetica Neue", Arial, sans-serif;
  font-size: 14px;
  letter-spacing: 0.05em;
   padding: 6px 0;         /* ← 元に戻す */
  margin-top: 20px;       /* ← 下にずらしたい分だけマージン追加 */
}
/* ===== PATCH 2025-10-23: コンテンツ帯の薄紺化＆ボタン白化 ===== */

/* コンテンツ帯（#main > .content）を薄い紺に統一 */
#main > .content {
  background-color: #1a2f58 !important;          /* 薄い紺 */
  /* （必要なら下記の境界線を有効化）
  border-left: 1px solid rgba(255,255,255,0.05);
  border-right: 1px solid rgba(255,255,255,0.05);
  */
}

/* 商品ブロックも帯と同色に（透過や別色を上書き） */
#main > .content .comImgBox {
  background-color: #1a2f58 !important;          /* 帯と同色 */
}

/* 「TOP（ページ）に戻る」ボタン：白背景＋紺文字
   ※ index.html 内の a{color:var(--bon-text)} を打ち消すため !important を付与 */
.comBtn a {
  background-color: #ffffff !important;          /* 白背景 */
  color: #011128 !important;                     /* 紺文字 */
  border: 1px solid #ffffff !important;          /* 白枠 */
  font-weight: 700;
}

/* ホバー時：透過＋白文字（背景に溶け込む演出） */
.comBtn a:hover {
  background-color: transparent !important;
  color: #ffffff !important;
  border: 1px solid #ffffff !important;
}
/* ===== FIX PATCH 2025-10-23-b: 薄紺帯のセレクタ修正＋上下のりしろ付与 ===== */

/* 1) ヒーロー直下から帯を繋ぐため、ヒーローの下余白をゼロに */
.mainVisual { 
  margin-bottom: 0 !important;
}

/* 2) コンテンツ帯を薄紺にし、上下面を少しはみ出させて“繋ぐ” */
#main .content {
  background-color: #1a2f58 !important;   /* 薄い紺 */
  /* margin-top: -32px; removed to avoid overlap */
  padding-top: 32px;                      /* 見た目の余白を維持 */
  margin-bottom: -32px;                   /* 下のりしろ（フッター直前まで伸ばす） */
  padding-bottom: 32px;                   /* 見た目の余白を維持 */
  box-sizing: border-box;
  position: relative;
  z-index: 0;
  /* 必要なら薄い境界線を有効化
  border-left: 1px solid rgba(255,255,255,0.06);
  border-right: 1px solid rgba(255,255,255,0.06);
  */
}

/* 3) 商品ボックスは帯色を見せたいので透過のまま */
#main .content .comImgBox {
  background: transparent !important;
}

/* 4) 念のためスマホはのりしろ控えめ（任意） */
@media all and (max-width: 896px){
  #main .content{
    /* margin-top: -24px; removed */
    padding-top: 24px;
    margin-bottom: -24px;
    padding-bottom: 24px;
  }
}
/* ===== PATCH 2025-10-24: ヘッダー＆フッターを薄グレーに統一 ===== */
#gHeader,
#gFooter {
  background-color: #f6f6f6 !important; /* 薄いグレー */
  border: none !important;
}

/* フッター文字が背景と被らないように補正 */
#gFooter .copy,
#gFooter address {
  color: #333 !important; /* 濃いグレー文字で可読性UP */
}

/* ヘッダー内リンクなども黒系で統一 */
#gHeader .hBox h1 span,
#gHeader .hBox .hLink a {
  color: #333 !important;
}
/* ===== PATCH 2025-10-24: 薄紺帯をフッター直前まで繋げる ===== */

/* ヒーロー下からフッターまでの薄紺帯を途切れなく延長 */
#main .content {
  background-color: #041542 !important;  /* 薄紺 */
  /* margin-top: -60px; removed to avoid overlap */
  padding-top: 32px;
  margin-bottom: -150px;                  /* ← 下方向への“のりしろ”を拡大 */
  padding-bottom: 80px;                  /* 内側余白を確保 */
  position: relative;
  z-index: 0;
  box-sizing: border-box;
}

/* 商品ボックスは透過で帯色をそのまま見せる */
#main .content .comImgBox {
  background: transparent !important;
}

/* スマホ時：のりしろを控えめに */
@media all and (max-width: 896px) {
  #main .content {
    /* margin-bottom: -48px; keep as is */
    padding-bottom: 48px;
  }
}
/* ===== PATCH 2025-10-24-e: フッター上部をグレー化（ラインは残す） ===== */

/* ===== 修正版：赤金ラインの間を狭く（太さ維持） ===== */
.samurai-divider-bottom {
  position: relative;
  width: 100%;
  height: 22px; /* ← 元の28pxより少し低くして間を詰める */
  background:
    linear-gradient(#BF0028, #BF0028) top / 100% 10px no-repeat,   /* 上：赤 */
    linear-gradient(#f6f6f6, #f6f6f6) center / 100% 2px no-repeat, /* ← 間をわずか2pxに */
    linear-gradient(#C6A756, #C6A756) bottom / 100% 10px no-repeat, /* 下：金 */
    #f6f6f6; /* 背景グレー（フッターと同色） */
  margin-bottom: 0 !important;
  border: none !important;
}


/* フッターも同色グレーに統一 */
#gFooter {
  background-color: #f6f6f6 !important;
  border: none !important;
}

/* フッター内文字の視認性補正 */
#gFooter .copy,
#gFooter address {
  color: #333 !important; /* 黒寄りグレーで読みやすく */
}
/* ===== 復元用：全体テーマカラー設定 ===== */
:root {
  --bon-navy: #011128;
  --samurai-red: #BF0028;
  --samurai-gold: #C6A756;
  --bon-text: #f2f5f8;
}

/* 背景・文字の基本色設定 */
html, body {
  background: var(--bon-navy);
  color: var(--bon-text);
}

/* リンク共通色 */
a, a:visited, a:hover, a:active {
  color: var(--bon-text);
}

/* ヘッダー */
#gHeader {
  background: var(--bon-navy);
}
#gHeader .hBox h1 span,
#gHeader .hBox .hLink a {
  color: #fff;
}

/* メインビジュアル */
.mainVisual {
  background: var(--bon-navy);
  padding: 0;
  margin-bottom: 0;
}
.mainVisual .box {
  display: block;
  max-width: none;
}
.mainVisual .topBox {
  width: auto;
  margin: 0;
  overflow: visible;
}
.mainVisual .topBox .photo {
  margin: 0;
}
/* 説明ボックスと右ロゴ非表示 */
.mainVisual .topBox .textBox,
.mainVisual .logo {
  display: none !important;
}
.mainVisual img {
  width: 100%;
  height: auto;
  display: block;
}

/* 見出し下線 */
.headLine01 {
  border-bottom: none;
}

/* 商品枠下線 */
.comImgBox {
  border-bottom: 1px solid var(--samurai-gold);
}

/* フッター */
#gFooter {
  background: var(--bon-navy);
  padding-top: 50px;
}
#gFooter .copy {
  background: transparent;
  color: var(--samurai-gold);
  border-bottom: 2px solid var(--samurai-red);
}
#gFooter address {
  color: #cfd7e3;
}

/* ===== FINAL OVERRIDE: HERO visible, no crop ===== */
.mainVisual{
  height: auto !important;
  overflow: visible !important;
  width: 100% !important;
  max-width: 984px;
  margin: 0 auto 32px !important;
}
.mainVisual .box,
.mainVisual .topBox,
.mainVisual .photo{
  height: auto !important;
}
.mainVisual .photo img{
  height: auto !important;
  object-fit: initial !important;
  object-position: center bottom !important;
}
/* Avoid content overlapping hero bottom */
#main .content{
  margin-top: 0 !important;
}
/* === ヒーロー直下〜フッター上まで：幅984pxの薄紺帯で連続 === */

/* 1) ヒーローの下余白をなくす */
.mainVisual {
  margin-bottom: 0 !important;
}

/* 2) コンテンツ帯を薄紺で塗り、上と下を繋げる */
#main .content {
  background-color: #041542 !important; /* 他と同じ薄紺 */
  width: 984px;
  margin: 0 1 auto;          /* 中央寄せを維持 */
  padding-top: 32px;
  padding-bottom: 30px;    /* ← 下部をやや広めにしてフッターと自然につなげる */
  padding-left: 30px;
  padding-right: 30px;
  box-sizing: border-box;
  position: relative;
  z-index: 0;
}

/* 3) スマホ表示調整 */
@media all and (max-width: 896px) {
  #main .content {
    width: auto;
    padding-top: 24px;
    padding-bottom: 48px;
  }
}

/* 4) 商品ボックスなどは背景透過のまま */
#main .content .comImgBox {
  background: transparent !important;
}
.mainVisual-pc { display: block; }
.mainVisual-sp { display: none; }

@media screen and (max-width: 896px) {
  .mainVisual-pc { display: none !important; }
  .mainVisual-sp { display: block !important; }
}
/* === FIX: PCでSP画像が出てしまう問題の優先度修正 === */
.mainVisual img.mainVisual-sp { display: none !important; }  /* PC時は確実に消す */

@media screen and (max-width: 896px) {
  .mainVisual img.mainVisual-pc { display: none !important; } /* SP時はPC画像OFF */
  .mainVisual img.mainVisual-sp { display: block !important; }/* SP時はSP画像ON  */
}