/* -------------------------------------- */
/* 全体基本設定 */
/* -------------------------------------- */

body {
    font-family: "Hiragino Sans", "Hiragino Kaku Gothic ProN", 
                 "Yu Gothic", "Meiryo", sans-serif;
    font-size: 16px;
    font-weight: 400; 
    line-height: 1.8;
    letter-spacing: 0.04em;
    color: #373232;
	background-image:url('../img_bg/white.jpg');
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	overflow-x: hidden !important;
}

html, body {
    width: 100%; 
    margin: 0;
    padding: 0;
}

a {
    text-decoration: none !important;
    color: inherit !important; 
    transition: opacity 0.4s ease;
}

a:hover {
    color: inherit !important; 
    opacity: 0.5 !important; 
}

*, *::before, *::after {
    box-sizing: border-box; 
}
/* 追加：ブラウザ独自の余白（margin）と内余白（padding）をリセットする */
body, h1, h2, h3, h4, h5, h6, p, ul, ol, dl, dt, dd, figure {
    margin: 0;
    padding: 0;
}

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth; /* これを追記 */
}

/* -------------------------------------- */
/* l-header */
/* -------------------------------------- */
.l-header {
  position: relative;
  z-index: 100;
  width: 100%;
  height: 240px;
}

.l-header__inner {
  position: relative;
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

/* 左側エリア */
.l-header__left {
  padding-top: 10px;
}

.l-header__sns {
  display: flex;
  align-items: center;
  list-style: none;
  padding: 0;
  margin: 0 0 60px 0;
}

.l-header__sns li {
  margin-right: 10px;
}

.l-header__sns li:last-child {
  margin-right: 0;
}

.l-header__sns-instagram {
  font-size: 28px;
}

.l-header__sns-facebook {
  font-size: 25px;
}

.l-header__logo-main {
  display: flex;
  align-items: center;
  margin-bottom: 15px;
}

.l-header__logo-mark {
  /* 高さを指定（例：44px） */
  height: 35px;
  /* 横幅は比率を維持して自動計算 */
  width: auto;
  
  /* 念のため画像が歪まないように追加 */
  object-fit: contain;
  
  margin-right: 15px;
  display: block; /* 余計な隙間を防ぐためにblock要素にするのが推奨 */
}

.l-header__logo-text {
  line-height: 1.4;
  font-weight: bold;
}

/* 旅のことなら：10px */
.l-header__logo-text-sub {
  display: block;
  font-family: source-han-serif-japanese, serif;
	color: #373232; /* 仮の色 */
	font-size: 10pt;
	font-weight: bold;
	letter-spacing:0.2em;
    line-height: 1;
	margin-bottom: 6px; /* 上下のテキスト間にわずかな隙間 */
    white-space: nowrap;
}

/* 株式会社漣観光社：12px */
.l-header__logo-text-main {
  display: block;
  font-family: source-han-serif-japanese, serif;
	color: #373232; /* 仮の色 */
	font-size: 12pt;
	letter-spacing:0.2em;
    font-weight: bold;
    line-height: 1;
    white-space: nowrap;
}

.l-header__logo-cursive {
  width: auto;
}

/* 右側エリア：親コンテナ */
.l-header__right {
  display: flex;
  align-items: flex-start;
  height: 100%;
  padding-top: 60px; /* 指示通り 60px に調整 */
  /* スローガンボックス180px + 余白40px - aのpadding10px = 210px */
  padding-right: 210px; 
}

/* ナビゲーションのリスト */
.l-header__nav-list {
  display: flex;
  align-items: flex-start;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* ナビゲーションの各項目 */
.l-header__nav-item {
  /* 画像間の距離を25pxにする計算（padding10*2 + margin5） */
  margin-left: 5px; 
  margin-right: 0;
  padding: 0;
}

.l-header__nav-item:first-child {
  margin-left: 0;
}

/* クリック範囲：上下左右10px */
.l-header__nav-item a {
  display: flex;
  align-items: flex-start;
  padding: 10px; 
  text-decoration: none !important; /* ベースCSSの important に対抗するためこれだけ残すのが安全 */
  line-height: 0;
}

.l-header__nav-item img {
  display: block;
  width: auto;
  height: auto;
  vertical-align: top;
}

/* スローガンボックス */
.l-header__slogan-box {
  position: absolute;
  top: 0;
  right: 0;
  width: 180px;
  height: 350px;
  background-color: #004494;
  background-image: url("../img_bg/blue.jpg"); /* 画像パスを指定 */
  background-repeat: repeat; /* 上下左右に繰り返す（デフォルト） */
  background-size: auto; /* 画像本来のサイズで繰り返す場合 */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 110;
}

/* モバイル専用要素をデフォルトで非表示にする（メディアクエリの外に記述） */
.l-header__logo-cursive-mobile,
.l-header__hamburger {
  display: none;
}

.m-header-message-bar {
  display: none;
}

.u-display-sp,
.l-header__nav-line,
.l-header__nav-sns-list,
.l-header__nav-contact,
.l-header__nav-footer-links {
  display: none; /* PC版（デフォルト）ではこれらを隠す */
}


/* -------------------------------------- */
/* sec-company (Main Visual) */
/* -------------------------------------- */
.sec-company {
  position: relative;
  width: 100%;
}

.sec-company__mv {
  width: 1600px;
  margin: 0 auto;
}

.sec-company__mv-inner {
  position: relative;
  width: 100%;
  /* 既存のアスペクト比設定を維持 */
  height: 0;
  padding-top: 42.5531%; 
  overflow: hidden;
}

/* 1. スライダーエリア（最背面） */
.sec-company__mv-slider {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
}

.sec-company__mv-slide {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: mvFade 15s infinite; /* 3枚想定：15秒で1サイクル */
}

.sec-company__mv-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* フェードのタイミング調整 */
.sec-company__mv-slide:nth-child(1) { animation-delay: 0s; }
.sec-company__mv-slide:nth-child(2) { animation-delay: 5s; }
.sec-company__mv-slide:nth-child(3) { animation-delay: 10s; }

/* 2. ドットレイヤー（画像の上、テキストの下） */
.sec-company__mv-dot-overlay {
  display: block;
  position: absolute;
  /* 親要素の四隅に吸着させる */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  /* 画像より大きく、テキスト(3)より小さい値 */
  z-index: 2; 

  /* パスの確認：CSSファイルから見てimgフォルダがどこにあるか */
  background-image: url('../img_company/dot_white.png'); 
  background-repeat: repeat;
  /* 2px*2pxならここも合わせる */
  background-size: 2px 2px; 

  /* 確認のため一度 opacity を 1 (透明なし) にしてテストしてください */
  opacity: 0.3;
  pointer-events: none;
}

/* 3. コンテンツ（最前面） */
.sec-company__mv-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 3;
  
  /* 上下端に振り分ける設定（指示を優先） */
  display: flex;
  flex-direction: column;
  justify-content: space-between; 
  align-items: center; /* 左右中央 */
  
  /* MVの枠から内側への余白：デザインに合わせて調整 */
  padding: 0; 
  box-sizing: border-box;
}

/* 縦書きコピー（上基準） */
.sec-company__mv-title {
  margin-top: 60px; /* MVの下端からの微調整 */
}

/* ボタン（下基準） */
.sec-company__mv-btn-wrap {
 margin-bottom: 40px; /* MVの下端からの微調整 */
}

/* シンプルなクロスフェードアニメーション */
@keyframes mvFade {
  0% { opacity: 0; }
  10% { opacity: 1; }
  33% { opacity: 1; }
  43% { opacity: 0; }
  100% { opacity: 0; }
}

@supports (aspect-ratio: 2.35 / 1) {
  .sec-company__mv-inner {
    aspect-ratio: 2.35 / 1;
    height: auto;
    padding-top: 0;
  }
}

.sec-company__mv-figure {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.sec-company__mv-figure img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ボタン本体（装飾用：後からここをいじります） */
.sec-company__mv-btn {
  display: inline-block;
  /* 今は仮のデザインにしておきます */
  min-width: 200px;
  padding: 15px 30px;
  background-color: #004494; /* 漣観光社カラー（仮） */
  background-image: url("../img_bg/white.jpg"); /* 画像パスを指定 */
  background-repeat: repeat; /* 上下左右に繰り返す（デフォルト） */
  background-size: auto; /* 画像本来のサイズで繰り返す場合 */
  font-family: 'fot-tsukuardgothic-std', sans-serif;
  color: #fff;
  text-align: center;
  text-decoration: none;
  font-weight: bold;
  transition: all 0.3s ease; /* ホバー時のアニメーション準備 */
}

/* PC版では横書きテキストを確実に消す */
.m-mv-title-text {
  display: none;
}

.l-header__nav {
  display: none;
}

.l-header__nav-sp {
  display: none !important;
}

/* PC版ナビゲーションの基本表示 */
.l-header__nav-pc {
  display: block;
}

.sec-rakutabi .sec-rakutabi__scaler {
  display: contents;
}


/* ==========================================================================
   Responsive Phase 1: 1800px - 1200px
   ========================================================================== */

/* 1800px〜1400px: 左右余白100pxを維持しMV可変、ヘッダー1200px固定 */
@media screen and (max-width: 1800px) {
  .sec-company__mv {
    width: calc(100% - 200px); /* 左右100pxずつの余白 */
    max-width: none; /* 1600px制限を解除して可変にする */
    margin-left: auto;
    margin-right: auto;
  }
  
  .l-header__inner {
    width: 1200px; /* ヘッダーは1200px固定を維持 */
    margin: 0 auto;
  }
}

/* 1400px〜1200px: 左右余白50px、ヘッダーとMVが同期して縮小開始 */
@media screen and (max-width: 1400px) {
  .sec-company__mv {
    /* 左右50pxずつの余白へ切り替え */
    width: calc(100% - 100px); 
  }

  .l-header__inner {
    /* ヘッダーの固定を解除し、MVと同じ余白（左右50px）で同期縮小 */
    width: calc(100% - 100px); 
    max-width: 1200px; /* 1200px以上には広がらないよう制限 */
  }
  
  /* 要素が近づくため、ナビゲーションの右余白を維持 */
  .l-header__right {
    padding-right: 210px; /* スローガンボックス(180px)との衝突を避ける距離 */
  }
}

/* ==========================================================================
   Responsive Phase 2: 1200px - 920px (Synchronized Shrinkage)
   ========================================================================== */

@media screen and (max-width: 1200px) {
  /* 1. Safari対策：paddingを消し、中身の画像で高さを出させる */
  .sec-company__mv-inner {
    height: auto !important;
    padding-top: 0 !important;
    position: relative;
    display: block; /* flexを一度解除 */
  }

  /* スライダー自体も高さを自動にする */
  .sec-company__mv-slider {
    position: relative !important;
    height: auto !important;
  }

  /* 重要：1枚目の画像だけ「絶対配置」を解除して、地面に置く */
  /* これによりSafariが物理的な「高さ」を強制的に認識します */
  .sec-company__mv-slide:first-child {
    position: relative !important;
    display: block !important;
  }

  .sec-company__mv-slide img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  /* これが残っていると、画像の下に余計な余白が発生します */
  .m-mv-content-mobile {
    display: none !important;
  }

  /* 2. ボタンとコピーの配置（ここを以前のようにシンプルにします） */
  .sec-company__mv-content {
    position: absolute; /* 画像の上に重ねる */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex !important;
    flex-direction: column;
    z-index: 5;
    pointer-events: none;
  }

  /* 上から30px */
  .sec-company__mv-title {
    margin-top: 30px;
    margin-bottom: 0;
  }

  /* 下から20px */
  .sec-company__mv-btn-wrap {
    margin-top: auto !important; 
    margin-bottom: 20px !important; /* ここで下から20pxに固定 */
    display: block !important;
    line-height: 1; /* 余計な行間をリセット */
  }
  
  .sec-company__mv-btn {
    /* ...既存の設定... */
    margin: 0 auto;
  }
}

.sec-rakutabi__img-left-wrap-sp {
  display: none !important;
}



/* ==========================================================================
   Responsive Phase 3: 920px - 768px (アコーディオン対応・完全版)
   ========================================================================== */

@media screen and (max-width: 920px) {
  /* --- 1. ヘッダー共通設定 --- */
  .l-header {
    height: 80px; /* ヘッダーの高さを固定 */
  }
  .l-header__inner {
    position: relative !important;
    width: calc(100% - 60px) !important;
    height: 100%;
    display: flex !important;
    align-items: center !important;
  }

  /* 非表示設定：PCパーツ */
  .l-header__sns, .l-header__nav, .l-header__logo-text, .l-header__logo-cursive {
    display: none !important;
  }
  
  /* 2. 新設したメッセージバーのスタイル */
  .m-header-message-bar {
    display: flex;
    justify-content: center;
    align-items: baseline;
    width: 100%;
    padding: 0px 0  20px 0;
    /* ヘッダー80pxの直下に配置（もしheaderがfixedなら、その分下げる設定が必要な場合があります） */
    position: relative; 
    z-index: 9;
  }

  /* 「旅のことなら」を10pxに */
  .m-header-message-sub {
    font-family: source-han-serif-japanese, serif;
    font-size: 10pt !important;
    font-weight: bold !important;
    letter-spacing: 0.1em;
    line-height: 1 !important;
    margin-right: 5px; /* 横並び時の隙間 */
  }

  /* 「株式会社漣観光社」を14pxに */
  .m-header-message-main {
    font-family: source-han-serif-japanese, serif;
    font-size: 12pt !important;
    letter-spacing: 0.1em;
    font-weight: bold !important;
    line-height: 1 !important;
  }

  /* 中央ロゴ：モバイルサイズに最適化 */
  .l-header__logo-cursive-mobile {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    width: 45vw;
    max-width: 280px;
    min-width: 160px;
    z-index: 5;
  }
  .l-header__logo-cursive-mobile img { width: 100%; height: auto; display: block; }

  /* ハンバーガーボタン：枠なし・最前面 */
.l-header__hamburger {
  display: block !important;
  position: absolute !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 30px;
  height: 24px;
  background: transparent !important;
  border: none !important;
  outline: none !important;
  padding: 0;
  z-index: 1100;
  cursor: pointer;
}

.l-header__hamburger span {
  display: block; 
  position: absolute; 
  left: 0; 
  width: 100%; 
  height: 2px; 
  background-color: #333;
  /* 動きを滑らかにするために transition を追加 */
  transition: transform 0.3s ease, top 0.3s ease, opacity 0.3s ease, background-color 0.3s ease;
}

.l-header__hamburger span:nth-child(1) { top: 0; }
.l-header__hamburger span:nth-child(2) { top: 11px; }
.l-header__hamburger span:nth-child(3) { top: 22px; }


/* --- ここから追加：メニューが開いた時（is-active）のスタイル --- */

/* 1. 紺色の背景で見えるように三本線を「白」に変える */
.l-header__hamburger.is-active span {
  background-color: #fffffa !important;
}

/* 2. 3本の棒を「×」に変形させる */
.l-header__hamburger.is-active span:nth-child(1) {
  top: 11px; /* 中央に寄せる */
  transform: rotate(45deg);
}

.l-header__hamburger.is-active span:nth-child(2) {
  opacity: 0; /* 真ん中の棒を消す */
}

.l-header__hamburger.is-active span:nth-child(3) {
  top: 11px; /* 中央に寄せる */
  transform: rotate(-45deg);
}

  /* スローガンボックス：PC版(108px)の70%縮小 */
  .l-header__slogan-box {
    position: absolute !important;
    top: 80px;
    right: 0 !important;
    width: calc(150px * 0.9) !important;
    height: auto !important;
	padding: 25px 18px;        /* 上下12px、左右8pxの余白を箱の内側に作る */
    z-index: 10;
  }

  .l-header__slogan-box img { width: 100%; height: auto; display: block; }

  /* --- 2. MVエリア：Safariのバグを回避する構造リセット --- */
  .sec-company__mv {
    width: calc(100% - 60px);
    margin: 0 auto;
    height: auto !important;
    display: block !important;
  }

  .sec-company__mv-inner {
    height: auto !important;
    padding-top: 0 !important; /* PC版の%指定を完全に解除 */
    display: block !important;
    aspect-ratio: 2.35 / 1;    /* Safariに高さを強制認識させる */
    position: relative !important;
  }

  /* 画像エリア：absoluteを解除し高さを確保 */
  .sec-company__mv-slider {
    position: static !important; /* absoluteを解除 */
    display: block !important;
    width: 100% !important;
    height: auto !important;
  }
  .sec-company__mv-slide img {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 2.35 / 1;
    object-fit: cover;
    display: block;
  }
  
  /* 1枚目の画像を表示の基準にする */
  .sec-company__mv-slide {
    position: absolute; /* フェードのためにabsoluteは維持 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
  /* 1枚目だけを「static」にすることで、親要素に高さを発生させる */
  .sec-company__mv-slide:first-child {
    position: relative !important; 
  }

  /* ドットオーバーレイ：画像にピッタリ吸着させる */
  .sec-company__mv-dot-overlay {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: 100% !important;
    z-index: 2;
  }

  /* PC版の縦書きコピーが含まれるコンテンツエリアを非表示 */
  .sec-company__mv-content {
    display: none !important;
    visibility: hidden !important; /* 物理的に見えなくする */
    opacity: 0 !important;         /* 透明にする */
    pointer-events: none !important;
    position: static !important;   /* absoluteを解除して座標を殺す */
  }

  /* --- 3. 新設：モバイル専用テキストエリア（画像の外） --- */
  .m-mv-content-mobile {
    display: block !important;
    position: relative !important;
    z-index: 10 !important;
    margin-top: 0 !important; /* マイナス値をやめて順序通りに並べる */
  }

  .m-mv-title-text {
    display: block !important;
    
    /* 両端揃えの設定 */
    text-align: justify;
    text-justify: inter-ideograph; /* 日本語の文字間を均等に調整 */
    
    /* 禁則処理と改行制御 */
    line-break: strict;            /* 句読点や閉じ括弧を行頭に置かない（厳しい制限） */
    word-break: break-all;         /* 枠内での折り返しを保証 */
    
    line-height: 1.6;
    margin-bottom: 25px;
  }

  .sec-company__mv-btn-wrap {
    display: block !important;
    text-align: center !important; /* 中身のインライン要素を中央に寄せる */
    width: 100% !important;
    margin-top: 0;
    margin-bottom: 40px; /* 次のコンテンツとの距離 */
  }

  .sec-company__mv-btn {
    display: inline-block !important; /* 左右中央配置を可能にする */
    width: 90% !important;            /* スマホで見やすい幅 */
    max-width: 300px;                 /* 広がりすぎを防止 */
    margin: 0 auto !important;        /* 念のための自動余白設定 */
    
    /* 以前の装飾を維持 */
    padding: 14px 0;
    background: #000 !important;
    color: #fff !important;
    text-align: center;
  }
  
  /* メニューの土台（最初は透明で隠しておく） */
 .l-header__nav-pc {
    display: none !important;
  }

  /* モバイル用アコーディオンの土台 */
.l-header__nav-sp {
  display: block !important;
  position: fixed;
  top: 0; 
  left: 0;
  width: 100%;
  height: 100vh; 
  
  /* --- 修正箇所：画像を繰り返し表示する設定 --- */
  background-image: url('../img_bg/white.png'); 
  background-repeat: repeat;       /* 画像を繰り返す */
  background-size: auto;         /* 画像本来のサイズで表示（または任意のpx指定） */
  background-position: top left;
  
  /* 代替色：白系統（#fffffa）ベースの透過色 */
  background-color: rgba(255, 255, 250, 0.8); 

  z-index: 100;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;

  /* アニメーション設定 */
  opacity: 1; 
  visibility: visible;
  transform: translateY(-100%); 
  transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* メニューが開いた時 */
.l-header__nav-sp.is-active {
  transform: translateY(0);
}

/* 内部コンテンツ：ここで「紺色テクスチャ」の範囲を制御 */
.l-header__nav-inner {
  height: auto !important;
  display: flex !important;
  flex-direction: column;
  align-items: center;

  background-image: url('../img_bg/blue.jpg');
  background-repeat: repeat;
  background-color: #003371;

  width: 100%;
  padding-top: 80px; 
  padding-bottom: 30px; 
  overflow: hidden;
}

/* 一番下のリストの余計な余白を消す */
.l-header__nav-footer-links {
  display: flex;
  flex-wrap: wrap;       /* 折り返しを許可 */
  justify-content: center;
  max-width: 90%;        /* 横幅を制限してコントロールしやすくする */
  margin: 0 auto;
  padding: 0;
  list-style: none;
}

/* リンク項目の調整：上3つ・下1つにするための指定 */
.l-header__nav-footer-links li {
  font-size: 11px;       /* 収まりが悪い場合は微調整してください */
  white-space: nowrap;   /* 単語の途中で改行させない */
}

/* 4番目の要素（旅行業登録標識〜）を強制的に改行させる */
.l-header__nav-footer-links li:nth-child(4) {
  flex-basis: 100%;      /* 横幅いっぱいに広げることで次行へ送る */
  text-align: center;
  margin-top: 5px;       /* 上段との隙間（保存情報に基づき5px） */
}

  /* ナビと罫線をまとめるグループ：中身（画像）の幅に合わせて縮む */
.l-header__nav-group {
  display: table;          /* inline-blockより確実に中身の幅で止まります */
  margin: 0 auto 20px;     /* 左右中央配置にし、下に余白 */
  padding: 0;              /* paddingが幅を広げないようリセット */
  width: auto;
}

/* メインナビ：画像の高さ固定を解除 */
.l-header__nav-list {
  display: flex;
  flex-direction: row-reverse;
  justify-content: center;
  align-items: flex-start;
  margin: 0 0 20px 0;      /* 下の罫線との隙間のみ設定 */
  padding: 0;              /* 左右のpaddingをゼロに */
  list-style: none;
}

  .l-header__nav-item {
  /* 左右のmarginを 5px 程度に詰めると、線とのズレが目立たなくなります */
  margin: 0 5px;           
  padding: 0;
  flex-shrink: 0;
}

.l-header__nav-item:first-child { margin-right: 0; } /* 右端の余白カット */
.l-header__nav-item:last-child { margin-left: 0; }  /* 左端の余白カット */

  .l-header__nav-item img {
    width: auto;      /* 画像本来の横幅 */
  height: auto;     /* 画像本来の高さ */
  max-height: 70vh; /* 画面からはみ出さないための保険（任意で調整） */
  display: block;
  }

  /* 罫線：親（グループ）の幅に100%合わせる */
.l-header__nav-line {
  display: block !important;
  width: 100% !important;
  height: 1px;
  border: none;
  background-color: #fffffa; /* 透過なしのオフホワイトに変更 */
  margin: 0;
  padding: 0;
}

  /* 3. SNSアイコン */
  .l-header__nav-sns-list {
  display: flex;
  justify-content: center;
  margin-bottom: 20px;
  list-style: none;
  padding: 0;
}

  /* 1. アイコン同士の間隔を margin で作る */
.l-header__nav-sns-list li {
  margin: 0 12px;
  display: flex;
  align-items: center; /* 異なるサイズのアイコンを垂直中央に揃える */
}

/* Instagram（24px） */
.l-header__nav-sns-list .fa-instagram {
  color: #fff;
  font-size: 24px;
}

/* Facebook（22px） */
.l-header__nav-sns-list .fa-facebook {
  color: #fff;
  font-size: 22px;
}

  /* お問い合わせボタンのエリア */
.l-header__nav-contact {
  display: block !important;
  width: 100%;
  text-align: center;
  margin-top: 5px; /* 保存された指示：5pxのスペース */
  margin-bottom: 25px;
}

/* お問い合わせボタン自体のスタイル（もし崩れていれば） */
.m-btn-contact {
  display: inline-block;
  background-color: #c49b31;
  color: #ffffff;
  padding: 10px 30px;
  text-decoration: none;
  font-weight: bold;
  /* ボタンが消えないように最小幅を設定 */
}

  /* 5. フッターリンク（テキスト） */
  .l-header__nav-footer-links {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    list-style: none;
    padding: 0;
	/* --- ここを追加 --- */
    margin-bottom: 0 !important; /* ブラウザ標準の余白を強制的に消す */
    margin-top: 0; 
    /* ---------------- */
    max-width: 500px;
	font-family: 'fot-tsukuardgothic-std', sans-serif;
	font-weight: bold;
	line-height: 1; /* 行送りを調整し、文字が潰れないように */
	font-size: 12px;
	color: #ffffff;
  }

  .l-header__nav-footer-links li {
    /* 改行時に5pxの間隔を確保 */
    margin: 10px 10px; 
  }

  .l-header__nav-footer-links a {
    color: #fff;
    font-size: 11px;
    text-decoration: none;
    opacity: 0.8;
  }
}

@media screen and (max-width: 768px) {
  /* スローガンボックス：さらに縮小して位置を微調整 */
  .l-header__slogan-box {
    /* PC版(150px)の約60%程度のサイズ感（90px）に調整 */
    width: 100px !important; 
    
    /* ヘッダー高さ80pxに合わせ、右端に固定 */
    top: 80px !important; 
    right: 0 !important;
    
    /* ボックス内の余白もサイズに合わせて少し詰める */
    padding: 20px 15px !important; 
    
    /* 中身の画像がはみ出さないように */
    display: block;
  }
  .m-mv-title-text br {
    display: none;
  }
}
/* 500px以下（改行時）の設定 */
@media screen and (max-width: 500px) {
  
  /* ヘッダー内とメインビジュアルの幅を左右15px余白に設定 */
  .l-header__inner,
  .sec-company__mv {
    width: calc(100% - 30px) !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .m-header-message-bar {
    flex-direction: column;
    align-items: center;
    /* メッセージバー自体の幅も揃える */
    width: 100%; 
  }

  /* --- 以下、既存の500px設定を維持 --- */
  .m-header-message-sub {
    margin-right: 0;
    margin-bottom: 5px;
    line-height: 1.2 !important;
  }

  .m-header-message-main {
    margin-top: 0;
  }

  .l-header__slogan-box {
    width: 70px !important;
    top: 80px !important;
    right: 0 !important;
    padding: 10px 10px !important;
    display: block;
  }
}



/* PC版（921px以上）ではモバイル用を隠す */
@media screen and (min-width: 921px) {
  .sec-company__mv-content {
    display: flex !important; /* display: none を打ち消し */
    visibility: visible !important;
    opacity: 1 !important;
    position: absolute !important;
    z-index: 3;
  }

  .sec-company__mv-btn-wrap {
    display: block !important;
    margin-bottom: 40px;
  }
  
  .m-mv-content-mobile {
    display: none !important;
  }

/* PC時はスマホ専用エリアを隠す */
.sec-rakutabi__sp-gallery { display: none; }
}



/* ==========================================================================
   sec-dekirukoto
   ========================================================================== */
.sec-dekirukoto {
  width: 100%;
  padding: 120px 0px 80px !important;
}

.dekirukoto-container {
  width: 1200px; /* (360px * 3) + (60px * 2) */
  margin: 0 auto;
  overflow: hidden; /* 子要素のマージンはみ出しをカット */
}

.section-title {
  text-align: center;
  font-family: source-han-serif-japanese, serif;
  font-size: 28px;
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-bottom: 60px;
}

.menu-list {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: center !important;
  list-style: none;
  padding: 0;
  /* gapの代わりに左右のマージンを相殺するネガティブマージン */
  margin: 0 -30px !important; 
}

.menu-item {
  width: 360px !important;
  flex-shrink: 0;
  /* 左右に30pxずつの余白を持たせることで、アイテム間が60pxになります */
  margin: 0 30px 60px 30px !important; 
}

.menu-visual {
  position: relative !important; /* SVGを絶対配置するための基準 */
  overflow: hidden;    /* 画像の角丸からはみ出さないように */
  width: 360px !important;
  /* margin-bottom をここで調整。写真を基準に 8px 空けます */
  margin-bottom: 8px !important; 
}
.menu-visual::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /* ドット画像のパスを指定 */
  background-image: url("../img_overlay/dot_white.png"); 
  background-repeat: repeat;
  /* 写真の視認性を守るため、必要に応じて不透明度を調整 */
  opacity: 0.2; 
  pointer-events: none; /* ドット越しに下のリンクをクリックできるように */
  z-index: 2; /* 写真(z-index:1相当)の上に配置 */
}

.menu-photo {
  display: block !important;
  width: 325px !important;
  height: 240px !important;
  object-fit: cover;
  /* margin-right 14px はそのまま */
  margin-right: 14px !important; 
}

.menu-title-svg {
  position: absolute !important;
  top: 0 !important;
  /* 写真の幅(325px) + 間隔(14px) = 339px の位置に配置 */
  left: 340px !important; 
  width: 20px !important;
  height: auto !important;
}

/* テキストエリアを写真の幅(325px)に揃える */
.menu-content-block {
  width: 325px !important;
  clear: both !important;
}

.menu-lead {
  width: 325px !important;
  font-weight: 550 !important;
  font-size: 15px;
  margin: 12px 0 4px 0;
  line-height: 1.4;
}

.menu-description {
  width: 325px !important;
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  text-align: justify !important;
  text-justify: inter-character;
}

.menu-btn-wrapper {
  width: 325px !important;
  margin-top: 14px;
  text-align: center;
}

/* カード全体をリンクとして機能させる（以前の指示数値を維持） */
.menu-card-link {
  text-decoration: none !important;
  color: inherit !important;
  display: block !important;
  transition: all 0.3s ease;
}

/* 塗りつぶしボタンの基本スタイル（以前のあなたの修正値を維持） */
.menu-btn {
  display: inline-block !important;
  padding: 12px 40px !important;
  background-color: #e3c57c !important;
  background-image: url("../img_bg/blue.jpg"); /* 画像パスを指定 */
  background-repeat: repeat; /* 上下左右に繰り返す（デフォルト） */
  background-size: auto; /* 画像本来のサイズで繰り返す場合 */
  font-family: 'fot-tsukuardgothic-std', sans-serif;
  color: #fffffa !important;
  text-decoration: none !important;
  line-height: 1;
  font-weight: bold;
  font-size: 15px;
  border-radius: 0px;
  transition: all 0.3s;
  pointer-events: none; /* クリック判定は親のaタグに任せる */
}

/* ★カード全体をホバーした時の反応 */
.menu-card-link:hover .menu-btn {
  /* 塗りつぶしのまま、少し明るくするか透明度を変えて反応を出す */
  opacity: 0.6 !important;
}

/* 写真も少しだけ反応させると「押せる感」が増します */
.menu-card-link:hover .menu-photo {
  filter: brightness(1.05);
  transition: 0.3s;
}

/* PCではスマホ用タイトルを隠す */
.sp-menu-title {
  display: none;
}

/* ==========================================================================
   Responsive (Tablet / Mobile)
   ========================================================================== */

/* タブレットサイズ (1230px以下 〜 769px) */
@media screen and (min-width: 769px) and (max-width: 1230px) {
  .dekirukoto-container {
    /* 左右にしっかり余白（計80px）を取り、スクロールバーとの衝突を回避 */
    width: calc(100% - 80px) !important;
    max-width: 840px !important; /* 最大でも2列が綺麗に見える幅 */
    margin: 0 auto !important;
    padding: 0 !important;
  }

  .menu-list {
    display: flex !important;
    flex-wrap: wrap !important; /* 念のためwrapに戻しますが、計算で落ちないようにします */
    justify-content: center !important;
    margin: 0 -15px !important; /* 隙間を固定値で管理 */
  }

  .menu-item {
    /* ★計算の肝：親の50%から左右マージン分（計30px）を引く
       これで、画面が縮まっても「2枚が横に並ぶ」状態を100%維持します */
    width: calc(50% - 30px) !important;
    max-width: 360px !important; /* PCサイズより大きくならない */
    min-width: 320px !important; /* 写真と文字が重なり始める手前で止める */
    margin: 0 15px 60px 15px !important;
    flex-shrink: 1 !important;
  }

  /* 写真と文字の関係を固定値ではなく「内側の100%」で管理 */
  .menu-visual {
    width: 100% !important;
    position: relative !important;
  }

  .menu-photo {
    /* 写真の幅を「親(menu-item)の全幅から、右側の文字スペース分」を引いた値に */
    width: calc(100% - 25px) !important;
    height: auto !important;
  }

  .menu-title-svg {
    /* 写真の縮小に追従させるため、右端（right: 0）に固定 */
    left: auto !important;
    right: 0 !important;
    width: 20px !important;
    height: auto !important;
  }
  
  /* アイテムの並び替え */
  .menu-item:nth-child(1) { order: 4; }
  .menu-item:nth-child(2) { order: 1; }
  .menu-item:nth-child(3) { order: 2; } 
  .menu-item:nth-child(5) { order: 3; } 

  /* 4番目（日帰りバスツアー）を非表示 */
  .menu-item:nth-child(4) {
    display: none !important;
  }
}

/* スマホサイズ (768px以下) */
@media screen and (max-width: 768px) {
  .sec-dekirukoto {
    padding: 60px 0 !important;
  }

  .dekirukoto-container {
    width: 90% !important; /* 画面端に少し余白 */
  }

  /* リストを2列にする */
  .menu-list {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: space-between !important;
    margin: 0 !important;
  }

  .menu-item {
    /* 2列にするため幅を48%程度に。間隔は自動計算 */
    width: 48% !important; 
    margin: 0 0 4% 0 !important;
  }

  /* 4番目のアイテムを非表示にする（あなたの修正を維持） */
  .menu-item:nth-child(4) {
    display: none !important;
  }

  /* --- スマホ専用の画像内タイトル表示 --- */
  .menu-visual {
    position: relative !important;
    width: 100% !important;
    margin-bottom: 0 !important; /* 下の要素を消すので0に */
    /* 画像を少し暗くして文字を読みやすくする */
    background: #000; 
  }

  .menu-photo {
    width: 100% !important;
    height: auto !important;
    aspect-ratio: 1 / 1; /* スマホは正方形にすると2列並びが綺麗です */
    display: block !important;
    opacity: 0.8; /* 背景の黒と混ざって少し暗くなる */
    margin: 0 !important;
  }

  .menu-title-svg {
    display: none !important; /* 縦書きSVGは消す */
  }

  .sp-menu-title {
    display: flex !important;
    position: absolute !important;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    /* 真ん中に配置 */
    align-items: center;
    justify-content: center;
    text-align: center;
    
    color: #fffffa !important;
    font-size: 14px;
    font-weight: bold;
    padding: 10px;
    box-sizing: border-box;
    pointer-events: none;
    letter-spacing: 0.05em;
    line-height: 1.4;
    text-shadow: 0 0 10px rgba(0,0,0,0.5); /* 文字の視認性確保 */
  }

  /* 説明文とボタンを非表示にする */
  .menu-content-block {
    display: none !important;
  }
  
    /* アイテムの並び替え */
  .menu-item:nth-child(1) { order: 4; }
  .menu-item:nth-child(2) { order: 1; }
  .menu-item:nth-child(3) { order: 2; } 
  .menu-item:nth-child(5) { order: 3; } 
}



/* ==========================================================================
   sec-tours
   ========================================================================== */
.sec-tours {
  padding: 80px 0; /* セクション間の余白 */
  background-color: #e6f3f1; /* 薄い水色 */
  position: relative;
}

.sec-tours__inner {
  width: 1200px;
  margin: 0 auto;
}

.sec-tours__empty-state {
  text-align: center;
  padding: 60px 0;
}

.sec-tours__message-main {
  font-family: source-han-serif-japanese, serif;
  font-size: 24px;
  margin-bottom: 15px;
  line-height: 1.5;
}

.sec-tours__message-sub {
  font-size: 16px;
  line-height: 1;
}

/* 1200px以下：左右50px（headerの同期設定に合わせる場合） */
@media screen and (max-width: 1200px) {
  .sec-tours__inner {
    width: calc(100% - 100px);
  }
}

/* 920px以下：モバイル共通ルール（左右30px → 500px以下で15px） */
@media screen and (max-width: 920px) {
  .sec-tours {
    padding: 60px 0;
  }
  .sec-tours__inner {
    width: calc(100% - 60px);
  }
  .sec-tours__message-main {
    font-size: 20px;
  }
  .sec-tours__message-sub {
    font-size: 14px;
  }
}

/* 500px以下：左右15px余白 */
@media screen and (max-width: 500px) {
  .sec-tours__inner {
    width: calc(100% - 30px);
  }
  .sec-tours__message-main {
    font-size: 16px;
    margin-bottom: 8px;
  }
  .sec-tours__message-sub {
    font-size: 12px;
  }
}




.sec-dekirukoto {
  width: 100%;
  padding: 60px 0; /* 上下余白は適宜調整してください */
}

.dekirukoto-container {
  width: 1200px;
  margin: 0 auto;
}

.section-title {
  text-align: center;
  margin-bottom: 40px;
}

.menu-list {
  display: flex;
  justify-content: space-between; /* 32pxの余白を自動計算（(1200-276*4)/3=32） */
  list-style: none;
  padding: 0;
  margin: 0;
}

.menu-item {
  width: 276px;
}

.menu-visual {
  display: flex;
  align-items: flex-start; /* 上揃え */
  justify-content: space-between;
  width: 276px;
  margin-bottom: 16px; /* 写真と下のテキストの間隔 */
}

.menu-photo {
  width: 248px;
  height: 248px;
  object-fit: cover;
}

.menu-title-svg {
  width: 28px; /* 276px - 248px */
  height: auto;
}

.menu-description {
  width: 248px; /* 写真の幅に合わせる場合 */
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}




/* ==========================================================================
   sec-rakutabi
   ========================================================================== */
   .sec-rakutabi {
  margin-top: 100px; /* 前のセクションとの間隔 */
}

/* 帯の設定 */
.sec-rakutabi__bg-band {
  width: 100%;
  height: 670px;
  background-color: #f0f7f9; /* 薄い水色 */
  position: relative;
}

.sec-rakutabi__inner {
  width: 1200px;
  height: 100%;
  margin: 0 auto;
  position: relative;
  display: flex;
  justify-content: space-between;
}

/* ロゴSVG（帯から50px上、右寄せ） */
.sec-rakutabi__logo {
  position: absolute;
  top: -50px;
  right: 0;
  width: auto;
  z-index: 10; /* 他の要素より上に配置 */
}

/* 左写真（フェード） */
.sec-rakutabi__img-left-wrap {
  width: 460px;
  height: 620px;
  position: relative;
  top: 0; /* 帯の上端に合わせる */
  z-index: 5;
}

.sec-rakutabi__fade-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sec-rakutabi__fade-list li {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  animation: rakutabiFade 15s infinite;
}

/* 簡易フェードアニメーション例（3枚の場合） */
.sec-rakutabi__fade-list li:nth-child(1) { animation-delay: 0s; }
.sec-rakutabi__fade-list li:nth-child(2) { animation-delay: 5s; }
.sec-rakutabi__fade-list li:nth-child(3) { animation-delay: 10s; }

@keyframes rakutabiFade {
  0% { opacity: 0; }
  10% { opacity: 1; }
  33% { opacity: 1; }
  43% { opacity: 0; }
  100% { opacity: 0; }
}

.sec-rakutabi__fade-list li img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 中央縦書きSVG */
.sec-rakutabi__copy-svg {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  top: 50px; /* 右写真の上端に揃える */
  z-index: 5;
}

/* 右側コンテンツ（高さ620pxにして底辺を揃える） */
.sec-rakutabi__right-content {
  width: 460px;
  height: 570px; 
  margin-top: 50px; 
  display: flex;
  flex-direction: column;
  /* space-betweenを廃止し、上から順に配置 */
  justify-content: flex-start; 
  z-index: 5;
}

/* 右側の写真 */
.sec-rakutabi__img-right {
  width: 460px;
  height: 270px;
  flex-shrink: 0;
}

.sec-rakutabi__img-right img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.sec-rakutabi__text-area {
  /* 写真との間隔を30pxに設定 */
  margin-top: 20px; 
  /* 写真の幅(460px)に対して中央揃え */
  text-align: center;
}

.sec-rakutabi__lead {
  font-size: 20px;
  font-family: 'fot-tsukuardgothic-std', sans-serif;
	font-weight: bold;
  line-height: 1.6;
  margin-bottom: 15px; /* 下の説明文との間隔 */
  display: inline-block; /* 幅をテキスト分に縮小 */
  /* 左揃えに変更 */
  text-align: left;
  /* 全体を全角2文字分（2em）右にずらす */
  padding-left: 2em;
  /* 1行目だけを元の位置（左に2em分）に引き戻す */
  text-indent: -2em;
}

.sec-rakutabi__desc {
  /* 説明文は読みやすさを考慮し、必要であれば左揃えに戻すことも可能ですが、
     現在は親要素のcenterを引き継いでいます */
  text-align: left; 
  display: inline-block; /* text-align: centerの影響下で左揃えを維持する場合 */
  max-width: 100%;       /* 親の460pxを超えないように */
}

/* もっと見るボタン：左写真の底辺と揃えるために最下部へ押し下げ */
.sec-rakutabi__btn-wrap {
  margin-top: auto; /* 余ったスペースをすべてここに入れ、ボタンを一番下へ */
  width: 100%;
}

.m-btn-rakutabi {
  display: block;
  width: 100%;
  background-color: #8ab8b8;
  color: #fff;
  padding: 15px 0;
  text-align: center;
  text-decoration: none;
}

/* 調整中ボタン専用のスタイル（詳細度を強化） */
.sec-rakutabi .m-btn-rakutabi.is-adjusting {
  background-color: #b0c4c4;
  color: #ffffff !important; /* !important を念のため追加して強制適用 */
  cursor: default;
  pointer-events: none;
  opacity: 1;
  text-decoration: none; /* 下線が出るのを防ぐ */
}

.sec-rakutabi__sp-header-set {
  display: none !important;
  visibility: hidden !important;
  position: absolute;
  pointer-events: none;
}

/* PC・タブレット含め、基本はすべて非表示 */
.sp-only-lead {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow: hidden !important;
}

@media screen and (max-width: 1300px) and (min-width: 921px) {
  
  /* 親クラス .sec-rakutabi を頭に付けて詳細度を上げる */
  .sec-rakutabi .sec-rakutabi__bg-band {
    height: auto;
    padding-bottom: 50px;
  }

  .sec-rakutabi .sec-rakutabi__inner {
    width: 100%;
    max-width: 1300px;
    padding: 0 50px;
    height: auto;
  }

  /* ロゴ：中身の画像ごと縮小 */
  .sec-rakutabi .sec-rakutabi__logo {
    width: 15vw;       /* 画面幅に合わせて縮小 */
    max-width: 220px;  /* 元のサイズを超えない上限 */
    height: auto;
    top: -4vw;         /* 帯からの浮き具合も微調整 */
    right: 50px;       /* 0から50pxに変更して余白を確保 */
  }
  .sec-rakutabi .sec-rakutabi__logo svg,
  .sec-rakutabi .sec-rakutabi__logo img {
    width: 100%;
    height: auto;
    display: block;
  }

  /* 左写真：flex-basisを使用して比率を固定 */
  .sec-rakutabi .sec-rakutabi__img-left-wrap {
    flex: 0 0 38.3%;
    height: auto;
    aspect-ratio: 460 / 620;
    min-width: 0;
  }
  .sec-rakutabi .sec-rakutabi__img-left-wrap img {
    width: 100%;
    height: auto;
  }

  /* 中央縦書きコピー：中身のsvg/imgを強制縮小 */
  .sec-rakutabi .sec-rakutabi__copy-svg {
    /* 1200pxに対して約120px程度なら 10% 前後が理想 */
    width: 15vw; 
    max-width: 120px; /* PC版のサイズを上限にする */
    height: auto;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    top: 4vw;
    z-index: 5;
  }

  /* 重要：SVGタグそのものに幅100%をかけて枠に追従させる */
  .sec-rakutabi .sec-rakutabi__copy-svg svg,
  .sec-rakutabi .sec-rakutabi__copy-svg img {
    width: 100% !important;
    height: auto !important;
    display: block;
  }

  /* 右コンテンツ：固定幅・高さを解除 */
  .sec-rakutabi .sec-rakutabi__right-content {
    flex: 0 0 38.3%;
    width: auto;
    height: auto;
    margin-top: 4vw;
    min-width: 0;
  }

  .sec-rakutabi .sec-rakutabi__img-right {
    width: 100%;
    height: auto;
    aspect-ratio: 460 / 270;
  }

  /* テキスト・ボタン：親の幅に100%で追従 */
  .sec-rakutabi .sec-rakutabi__text-area,
  .sec-rakutabi .sec-rakutabi__btn-wrap {
    width: 100%;
  }

.sec-rakutabi__text-area {
  /* 写真との間隔を30pxに設定 */
  margin-top: 10px; 
}
.sec-rakutabi .sec-rakutabi__lead {
    /* clamp(最小サイズ, 可変サイズ, 最大サイズ) */
    /* 16pxを下限、1.8vwを可変、20px(PC版)を上限に設定 */
    font-size: 1.385vw;
    
    display: inline-block;
    width: auto;
    white-space: normal;
    line-height: 1.4;
    
    /* ずらし設定を維持 */
    text-align: left;
    padding-left: 2em;
    text-indent: -2em;
    
    margin-bottom: 5px;
  }

 .sec-rakutabi .sec-rakutabi__desc {
  /* PC版が15px程度と仮定した場合の上限設定 */
  /* clamp(最小値, 可変値, 最大値) */
  font-size: 1.077vw;
  font-weight: 400; /* 400(通常)より少しだけ太く */
  /* 行間を5pxに固定する計算 (1.0 = 文字サイズ分 + 5px) */
  /* line-height: 1.8 だと文字サイズによって隙間が変わるため、こちらが正確です */
  line-height: calc(1.0 + 5px / 1ex); 
  /* もし上記が反映されにくい場合は、シンプルに 1.6〜1.7程度で微調整してください */
  line-height: 1.7; 

  text-align: left;
  display: inline-block;
  max-width: 100%;
  margin-top: 0px;
}

/* 1. ボタン全体の枠を縮小 */
  .sec-rakutabi__btn-wrap {
    order: 5;
    margin: 20px auto 0 !important;
    width: 100% !important;
    display: flex !important;      /* Safariでも確実に中央寄せにするため */
    justify-content: center !important;
    text-align: center;
  }

  /* ボタン本体 */
  .m-btn-rakutabi.is-adjusting {
    display: block !important;     /* flexの子要素としてサイズを固定しやすくする */
    width: 240px !important;       /* Chromeと同じ横幅を指定 */
    max-width: 80% !important;    /* 念のため、極端に狭い画面で突き抜けないよう */
    height: 50px !important;
    line-height: 50px !important;
    margin: 0 auto !important;
    /* その他の装飾はそのまま */
  }

  /* 2. ボタン本体の高さと文字サイズを調整 */
  .sec-rakutabi .sec-rakutabi__btn-wrap a {
    height: clamp(45px, 4vw, 55px); /* 高さを少し低めに（PC版は60px程度が多い） */
    line-height: clamp(45px, 4vw, 55px);
    
    /* 文字サイズも説明文より少し大きく、でも目立ちすぎないサイズに */
    font-size: clamp(14px, 1.2vw, 16px);
    
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .sec-rakutabi .sec-rakutabi__sp-gallery img {
    width: calc((100% - 60px) / 3) !important; /* あなたの元の計算を維持 */
    height: auto !important; /* 縦伸びを物理的に防止 */
    
    /* アスペクト比を維持するための指定 */
    aspect-ratio: 3 / 8; /* スクリーンショットの縦長比率に合わせる */
    object-fit: cover;
    
    /* Safari 14以前などの古い環境への対応（念のため） */
    flex-shrink: 0; 
  }

  /* 親要素がSafariで高さを誤認しないよう固定 */
  .sec-rakutabi .sec-rakutabi__sp-gallery {
    display: flex !important;
    align-items: flex-start !important; /* 上揃えにして縦に引き伸ばされるのを防ぐ */
  }
  .sec-rakutabi__sp-gallery {
    display: none !important;
    height: 0 !important;
    overflow: hidden !important;
    margin: 0 !important;
    padding: 0 !important;
  }
}

@media screen and (max-width: 1100px) {
    .sec-rakutabi__lead {
      font-size: 16px !important; /* ここで止める */
    }
    .sec-rakutabi__desc {
      font-size: 13px !important; /* ここで止める */
    }
  }

/* PC時はスマホ用要素を隠す（共通部分） */
.sec-rakutabi__img-left-wrap-sp {
  display: none;
}

@media screen and (max-width: 920px) {
  /* 全体の背景と上下50px余白 */
  .sec-rakutabi .sec-rakutabi__bg-band {
    height: auto;
    padding: 50px 0;
    background-color: #ebf6f8;
  }

  .sec-rakutabi .sec-rakutabi__inner {
    display: flex !important;
    flex-direction: column !important;
    align-items: center;
    width: calc(100% - 30px);
    margin-right: 30px;
    margin-left: 0;
    position: relative;
  }
  
  /* PC版の絶対配置をすべて解除して、縦に正しく並べる */
  .sec-rakutabi .sec-rakutabi__img-right,
  .sec-rakutabi .sec-rakutabi__text-area,
  .sec-rakutabi .sec-rakutabi__sp-gallery,
  .sec-rakutabi .sec-rakutabi__btn-wrap {
    position: static; /* absoluteを解除 */
    transform: none;
    width: 100%;
    margin: 0;
  }

  /* 船・文字・ボタンを階層からバラして並び替える */
  .sec-rakutabi .sec-rakutabi__right-content {
    display: contents;
  }

  /* 1. 船の画像：右に30pxの余白 */
  .sec-rakutabi .sec-rakutabi__img-right {
    order: 1;
    width: 100%;
    text-align: right;
    margin-right: 0 !important;
  }

  .sec-rakutabi .sec-rakutabi__img-right img {
    width: auto;
    max-width: 100%;
    height: auto;
    display: block;
    margin-left: auto;
  }

  /* ロゴ：船の画像の右端（30pxの位置）に揃えて固定 */
  .sec-rakutabi .sec-rakutabi__logo {
    position: absolute;
    right: 80px; /* 親のimg-rightが右30px空いているので、その右端に吸着させる */
    top: -100px;
    width: 110px;
    z-index: 10;
  }


  .sec-rakutabi .sec-rakutabi__text-area {
    order: 2;
    margin-top: 40px;
    width: 100%;
    display: contents; /* これで中の lead と desc がバラバラに動けるようになります */
    flex-direction: column;
    align-items: flex-end; /* 右側に寄せる */
    padding: 0;
  }

  .sec-rakutabi .sec-rakutabi__lead {
    order: 2; /* 船(1)の次 */
    margin-top: 40px;
    margin-right: 10px !important; /* 船の右余白に合わせる */
    
    align-self: flex-end; /* 右側に寄せる */
    width: 100%;
    max-width: 460px; /* 船の軸に合わせた設定値を維持 */
    text-align: center;
    
    /* 改行の設定：大きくした時に突き抜けないよう normal に変更 */
    white-space: normal; 
    
    /* 文字サイズを強制的に大きく（1100px時の16pxを上書き） */
    font-size: 20px !important; 
    font-weight: bold !important;
    line-height: 1.4;
    display: block;
  }

  /* 3. スマホ専用3枚画像：コピーから40px下 */
  .sec-rakutabi .js-pc-only {
    display: none !important;
  }

  .sec-rakutabi .sec-rakutabi__sp-gallery {
    order: 3;
    margin-top: 30px;
    width: calc(100% + 30px); 
    margin-left: 0;
    margin-right: -30px; 
    padding: 0 30px;
    box-sizing: border-box;
    display: block; /* ここはblockで正しいです */
  }

  .sec-rakutabi .sp-gallery-inner {
    display: flex;
    justify-content: space-between;
    width: 100%;
    /* 【修正】Safariの縦伸びを止めるためにここに追加 */
    align-items: flex-start; 
  }

  .sec-rakutabi .sp-gallery-inner img {
    width: calc((100% - 60px) / 3); 
    aspect-ratio: 3 / 4; /* ご提示の比率 */
    object-fit: cover;
    /* 【修正】Safariでアスペクト比を維持させるために必須 */
    height: auto !important; 
    flex-shrink: 0;
  }

  /* 最後の写真以外の右に30pxの隙間を作る */
  .sec-rakutabi .sp-gallery-inner img:not(:last-child) {
    margin-right: 30px;
  }

  /* 4. 説明文：写真から25px下 */
  .sec-rakutabi .sec-rakutabi__desc {
    order: 4;
    display: block;
    margin-top: 20px;

    /* 左右のズレを解消する決定打 */
    width: auto;       /* 幅を固定せず、マージンに任せる */
    margin-left: 30px;  /* 左端から30px空ける */
    margin-right: -30px; /* 親要素が右に30px空けているので、-30pxで画面端まで伸ばす */
    padding-right: 30px; /* 伸ばした分、内側に30pxの余白を作る */

    /* テキスト設定 */
    text-align: left;
    font-size: 16px !important;
    line-height: calc(1.0 + 5px / 0.8ex); /* 保存情報：行間5px */
  }

  /* 5. ボタン：説明文から40px下 / 最下部50px余白 */
  .sec-rakutabi .sec-rakutabi__btn-wrap {
    order: 5;
    margin-top: 40px;
    margin-bottom: 50px;
    display: flex;
    justify-content: center;
  }

  .sec-rakutabi .m-btn-rakutabi.is-adjusting {
    display: block;
    width: 240px;
    height: 50px;
    line-height: 50px;
    background-color: #8dbfb8;
    color: #fff;
    text-align: center;
    text-decoration: none;
  }

  /* 縦コピー：左端余白に配置 */
  .sec-rakutabi .sec-rakutabi__copy-svg {
    position: absolute;
    top: 0;
    z-index: 5;

    /* 画面の左端から「船の左端」までを一つの巨大な箱にする */
    left: 0 !important;
    right: 460px !important; /* 船の幅（画像+テキスト）を右から確保 */
    width: auto !important;

    /* その箱の左側に30pxの絶対的な余白を作る */
    padding-left: 30px !important; x

    /* 残った空間（30px〜船の左端の間）で、画像を中央に配置する */
    display: flex !important;
    justify-content: center !important;
    
    transform: none !important;
  }

  .sec-rakutabi .sec-rakutabi__copy-svg img {
    width: auto; /* 画像本来の幅を維持 */
    display: block;
  }
}

@media screen and (min-width: 769px) {
  /* 920px以下で消えないように強制表示 */
  .sec-rakutabi__logo.js-pc-only,
  .sec-rakutabi__copy-svg.js-pc-only {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  
  /* この範囲ではスマホ専用タイトルは「絶対に」出さない */
  .sp-only-lead {
    display: none !important;
  }
}

@media screen and (max-width: 768px) {
  .sec-rakutabi {
    position: relative !important;
  }
  
  /* 親要素の幅制限を解除して、画面いっぱいに使えるようにします */
  .sec-rakutabi__right-content {
    padding-right: 0 !important;
    margin-right: 0 !important;
    width: 100% !important;
  }
  /* 1. 不要な単体画像を非表示にする */
  .sec-rakutabi__copy-svg,
  .sec-rakutabi__logo.js-pc-only {
    display: none !important;
  }

  /* 2. 背景と全体の余白設定 */
 .sec-rakutabi__bg-band {
    /* セット画像が白背景と水色背景を跨げるよう、
       背景自体の位置や余白を調整します。
    */
    margin-top: 0 !important;
    padding-top: 40px !important;
  }

  .sec-rakutabi__inner {
    margin-top: -90px !important;
    position: relative !important;
    z-index: 10 !important;
	padding-right: 30px !important; /* 右側の30pxを復活 */
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 3. 船の画像エリア（統合画像の基準点） */
.sec-rakutabi__img-right {
  position: relative !important;
  margin-top: 80px !important;
  margin-left: 30px !important; 
  width: calc(100% - 30px) !important;
  
  height: auto !important;        /* 内容（写真）の高さに合わせる */
    aspect-ratio: auto !important;  /* 外枠の比率指定を解除して干渉を防ぐ */
    margin-bottom: 0 !important;
}

  .ship-img {
    width: 100% !important;
    aspect-ratio: 16 / 8 !important; /* お好みの高さに調整してください */
    object-fit: cover !important;
  }

  /* 4. ★ロゴ＋コピーセット画像：サイズと位置を厳守 */
.sec-rakutabi__sp-header-set {
    position: absolute !important;
    z-index: 100 !important;
    right: 0 !important; /* 画面（またはinner）の右端に固定 */
    
    /* topの数値を調整することで、白背景へのはみ出し具合を固定します。
       pxで指定することで、船の画像が縮んでもこの位置から動きません。
    */
    top: -60px !important; 
    
    width: 95% !important;
    transform: none !important;
    display: block !important;
  }

.sec-rakutabi__text-area {
    /* 1. 左は船の画像と揃えて 30px 空ける */
    margin-left: 30px !important;
    
    /* 2. 右側は、親の padding-right(30px) が既にあるので、
          自分自身の margin-right は 0 にすることで「左右均等な30px」になります */
    margin-right: 0 !important;
    
    /* 3. 幅は「親の全幅」から「自分の左マージン30px」を引いた分にします */
    width: calc(100% - 30px) !important;
    
    /* 4. その他のズレをリセット */
    padding: 0 !important;
    display: block !important;
    position: relative !important;
    box-sizing: border-box !important;
    
    background-color: rgba(255, 0, 0, 0.3) !important; /* 確認用 */
  }
  
  /* 5. テキストとギャラリーの整合性 */
.sec-rakutabi__lead {
    /* 1. ブロック要素化して横幅を赤いエリアいっぱいに広げる */
    display: block !important;
    width: 100% !important;
    
    /* 2. 広がった幅の中で、文字を中央に寄せる */
    text-align: center !important;
    
    /* 3. 他の配置設定が干渉しないようにリセット */
    position: static !important;
    float: none !important;
    
    /* 4. 余白と改行の制御 */
    margin: 40px 0 30px 0 !important;
    white-space: nowrap !important;
  }
  
  .sec-rakutabi__lead br {
    display: none !important;
  }

  .sp-gallery-inner {
    display: flex !important;
    justify-content: center !important;
    padding: 0 15px !important;    /* 画面両端の余白 */
  }
  
  .sp-gallery-inner img {
    width: 30% !important;         /* gapを使わず、幅のパーセントで隙間を作る */
    margin: 0 1.5% !important;     /* gapの代わりに左右マージンで「隙間」を再現 */
    height: auto !important;
  }

  .sec-rakutabi__desc {
    margin-top: 30px !important;
    text-align: justify !important;
    text-justify: inter-character !important;
    line-height: calc(1.0 + 5px / 0.8ex) !important;
  }
  
  
  /* 船の左に重なっている画像を強制的に消去 */
  .sec-rakutabi__copy-svg, 
  .sec-rakutabi__copy-svg img {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    position: absolute !important;
    pointer-events: none !important;
  }
}





/* ====================================== */
/* スライダー骨格：PC版 (768px以上) の横並び */
/* ====================================== */

.oshinagaki-card {
    display: flex;
    height: 500px;
    
    /* 300px (青) + 30px (余白) + 690px (画像) = 1020px */
    width: 1020px; /* カード全体の幅を固定 */
    margin-left: auto; /* 中央寄せ */
    margin-right: auto; /* 中央寄せ */
}

/* 1. 青いテキストエリア（左側）：300px死守 */
.card-text-area {
    order: 1;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 300px;
    min-width: 300px;
    
    height: 500px; 
	font-family: 'fot-tsukuardgothic-std', sans-serif;
    font-size: 16px;
    line-height: 1.8;
    font-weight: bold;
    color: #002E4E;
    padding: 0px 0 0px 0px; 
    margin: 0px; 
    text-align: justify;
    text-justify: inter-ideograph;
    justify-content: flex-end !important;
    gap: 0px; 
    position: relative;
    
    display: flex;
    flex-direction: column; 
    justify-content: flex-end !important;
}

/* 2. 画像エリア（右側）：残りの領域を全て占有 */
.card-image-area {
    order: 2;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 690px;
    max-width: 690px;
    height: 500px;
    overflow: hidden;
    position: relative; /* 絶対配置の基準 */
    display: flex; /* Flexboxは維持 */
	
}

/* ====================================== */
/* 1. 背景画像 (一番奥 / z-index: 1) */
/* ====================================== */
.oshinagaki-photo {
    /* <img>タグになったため、background-に関するプロパティはすべて削除 */
    
    /* ↓↓↓ 絶対配置で親要素全体を覆う ↓↓↓ */
    position: absolute; 
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    /* <img>タグの内容がコンテナを覆うように設定 */
    object-fit: cover;
    
    z-index: 1; /* 一番奥 */
}

/* ====================================== */
/* 2. 乗算レイヤー全体を包むラッパー (z-index: 2) */
/* ====================================== */
.yellow-multiply-wrapper {
    position: absolute;
    top: 0px; /* 縦位置を上に揃えるため、この20pxは維持 */
    left: 20px;
    /* ↓↓↓ サイズを 110px × 300px に変更 ↓↓↓ */
    width: 110px; 
    height: 300px;
    z-index: 2; 
    
    isolation: isolate; 
    mix-blend-mode: multiply; 
}

/* 乗算レイヤー */
.yellow-box-multiply {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img_bg/blue.jpg');
    background-size: cover;          /* 要素全体を覆うように画像を拡大・縮小 */
    background-position: center;     /* 画像を中央に配置 */
    background-repeat: no-repeat;    /* 画像の繰り返しを停止 */
    /* ↓↓↓ 削除: 親に移動したため、ここでは削除 ↓↓↓ */
    /* mix-blend-mode: multiply; */ 
    z-index: 1; 
}

/* ====================================== */
/* 3. 不透明レイヤーとSVGを包むラッパー (最前面 / z-index: 10) */
/* ====================================== */
.title-normal-wrapper {
    position: absolute;
    top: 0px; 
    left: 20px;
    width: 110px; 
    height: 300px; /* 黄色い箱の高さ */
    z-index: 3; 
    
    display: flex; 
    justify-content: center;
    /* ↓↓↓ 縦方向を中央寄せ (center) に変更 ↓↓↓ */
    align-items: center; 
}

/* 不透明レイヤー */
.yellow-box-normal-opacity {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: url('../img_bg/blue.jpg');
    background-size: cover;          /* 要素全体を覆うように画像を拡大・縮小 */
    background-position: center;     /* 画像を中央に配置 */
    background-repeat: no-repeat;    /* 画像の繰り返しを停止 */
    opacity: 0.6;
    mix-blend-mode: normal;
    z-index: 1; /* 親 (.title-normal-wrapper) の中で一番奥 */
}

/* SVG画像 */
.image-overlay-title-img {
    position: static; 
    z-index: 2; 
    
    /* ↓↓↓ サイズを元に戻す (auto) ↓↓↓ */
    width: auto; 
    height: auto; 
    
    /* Flexboxの中央配置に任せるため、マージンは削除 */
    margin-top: 0; 
}

/* ====================================== */
/* その他 (古い定義の削除/整理) */
/* ====================================== */

/* 不要な古いクラスは全て削除しました */

/* 画像の上に重ねる四角タイトル画像の設定 (HTMLから移動) */
.image-overlay-title-img {
    /* 上のSVG定義に統合済み */
}

/* タイトルコンテナの設定 */
.card-title-container {
    align-self: flex-end; 
    width: fit-content;
    max-width: 100%;
    margin-left: 0px;
}

.menu-button-group {
    position: absolute;
    top: 30px; 
    right: 15px; 
    left: auto; 
    transform: none; 
    display: flex;
    justify-content: flex-start;
    gap: 0px;
    align-items: flex-start; 
}

.card-menu-title-top {
    display: block;
    width: 30px; 
    height: auto;
    position: static; 
    top: auto;      
    right: auto;
    margin-bottom: 0; 
    margin-left: 0;
    margin-right: 0;
}

.card-white-border {
    width: 270px;
    height: 1px;
    background-color: #002E4E;
    margin-top: 10px;      
    margin-bottom: 8px; 
}

.card-vertical-title {
    margin-bottom: 0px; 
}

h3.card-main-title {
    writing-mode: horizontal-tb;
    font-family: 'fot-tsukuardgothic-std', sans-serif;
    font-size: 20px; 
    font-weight: bold;
    line-height: 1;
    color: #002E4E; 
    margin-bottom: 2px; 
    width: 270px; 
}

.oshinagaki-bg-fullwidth {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%; 
    height: 100%; 
    background-color: #fffffa; /* 背景色 */
    z-index: 0; /* コンテンツの背面に配置 */
}

.oshinagaki-slider-section {
    position: relative; /* 背景要素の基準点 */
    padding: var(--section-padding-y) 0;
    z-index: 1; /* コンテンツを前面に出すため */
	padding-top: 100px;
    /* ドットの表示エリアとして内側に確保（ドットが消えないように） */
    padding-bottom: 50px; 
    /* ドットの「下」から次のセクションまでの距離を外側で確保 */
    margin-bottom: 70px;
}

.oshinagaki-swiper.swiper-container {
    /* コンテンツ（スライダー）自体に最大幅を設定し、中央寄せにする */
    max-width: var(--content-max-width); /* 例: 1140px */
    margin-left: auto;
    margin-right: auto;
    /* Swiperが必要とするため、overflowはhiddenのままにしておく */
    overflow: hidden; 
    z-index: 2; /* 背景の上に表示 */
}


/* ====================================== */
/* Swiper ボタンのカスタムスタイル */
/* ====================================== */
.swiper-button-prev,
.swiper-button-next {
    /* Swiper v5のデフォルトアイコン（contentで挿入される）を消去 */
    /* これが効かない場合は、以下の設定で強制的に消します */
    color: transparent !important; /* デフォルトのアイコンの色を透明にする */
    
    /* 垂直方向の中央配置 */
    top: 50%;
    margin-top: -20px;
    width: 40px;
    height: 40px;
	
	z-index: 10 !important;
    
    /* 1. デフォルトの背景画像を強制的に削除 */
    background-image: none !important; 
}

/* 擬似要素（::after）の中身を強制的に消去する */
.swiper-button-prev::after,
.swiper-button-next::after {
    content: "" !important; /* contentを空にし、最優先する */
    font-size: 0 !important; /* 念のためフォントサイズもゼロにする */
    opacity: 0 !important; /* 透明度もゼロにする */
}

/* 左矢印の設定 (yajirusi_l.png) */
.swiper-button-prev {
    background-image: url('../img_top_oshinagaki/yajirusi_l.svg') !important;
    background-size: contain; 
    background-repeat: no-repeat;
}

/* 右矢印の設定 (yajirusi_r.png) */
.swiper-button-next {
    background-image: url('../img_top_oshinagaki/yajirusi_r.svg') !important;
    background-size: contain;
    background-repeat: no-repeat;
}

/* ====================================== */
/* ★★ ページネーション（ドットボタン）の共通スタイルと位置調整 ★★ */
/* ====================================== */

/* ページネーション（ドットボタン）の共通クラス */
.swiper-pagination {
    /* (その他の設定は変更なし) */
    position: absolute;
    width: 100%;
    text-align: center;
    z-index: 10;
    bottom: 25px;
}

/* ドット自体の共通スタイル（非アクティブドットの基本色） */
.swiper-pagination-bullet {
    /* 非アクティブ時の色を薄い色に設定 */
    background: #7AC3B9; /* 例: 薄い灰色 */
    opacity: 0.4; /* 不透明度を1にすることで、後述のアクティブ色とのコントラストを明確にします */
    width: 8px; /* サイズを調整 */
    height: 8px;
    margin: 0 10px !important;
    transition: background-color 0.3s, opacity 0.3s; /* スムーズな切り替え */
}

/* アクティブなドットのスタイル（色を変更して強調） */
.swiper-pagination-bullet-active {
    /* アクティブなドットの色を濃い色に設定 */
    background: #002E4E; /* 例: 目立つ赤色 (元のコードの #002E4E とは別に変更) */
    opacity: 1; /* 完全に不透明 */
    /* 必要に応じてサイズを変更してさらに強調できます */
    /* transform: scale(1.2); */ 
}

@media (min-width: 1140px) {
    
    /* .oshinagaki-card が display: flex; であり、
       card-image-area の order が 2 (またはデフォルトのまま) であることを前提とします。*/
    
    /* 1. card-text-area: デスクトップでの固定幅と余白を再適用 */
    .card-text-area {
        /* 横並び時の設定 */
        order: 1; /* 左側へ移動（青いエリアが order: 2 なら反転） */
        flex-basis: 300px;
        min-width: 300px;
		justify-content: flex-end;
        
        /* 余白の移動: 青いエリアとの間に 30px のマージンを設定 */
        margin-left: 30px; /* デスクトップ表示でのみ適用 */
        
        /* 右側の余分なパディングをリセットし、左側パディングを確保 */
        padding: 0px 0 0px 30px;
    }

    /* 2. card-image-area: 順序を 2 に設定し、残りのスペースを占める */
    .card-image-area {
        order: 2; /* 右側へ移動（青いエリアを右へ） */
        flex-grow: 1; /* 残りのスペースを全て占有 */
        /* margin: 0; */
    }
	
	/* menu-button-group に残りの高さを全て引き伸ばさせる */
    .card-text-area > .menu-button-group {
        /*
         * PC版でメニューボタン群がテキストエリアの「上側」にあり、
         * 下のコンテンツを画像の下端に揃えたい場合、
         * この上のメニューボタン群が「成長」して残りの空間を埋める必要がある。
         */
        flex-grow: 1; 
        /* 必要に応じて、padding-topなどでメニューボタンを上端に固定する */
    }
    
    /* 3. メインコンテンツのラッパーは成長を停止 */
    .card-text-area > .menu-tablet-wrapper {
        flex-grow: 0;
        /* これはデフォルト値なので不要な場合が多いが、念のため */
    }
    
    /* 補足: 子要素の余計なマージンをリセット */
    .card-main-content h3, 
    .card-main-content p {
        margin: 0;
    }
	
/* ★★★ 究極のSafari (WebKit) 限定対策 ★★★ */
    /* -webkit-appearance プロパティは Safari にしか効かないため、Chromeでは無視される */
    @supports (-webkit-appearance: none) {
        .menu-button-group > .menu-button-link:not(:last-child) {
            /* gap が効かない Safari にだけ margin-right: 20px を強制適用 */
            margin-right: 20px !important;
        }
    }
    
    /* Chrome向けの設定は不要です。Chromeでは gap: 20px が機能しています。 */
}


/* -------------------------------------- */
/* 第1段階ブレークポイント (1139px以下): タブレット向けレイアウト */
/* -------------------------------------- */
@media (max-width: 1139px) {
    
    /* 1. カード全体の縦積みレイアウト設定 */
    .oshinagaki-card {
        flex-direction: column; 
        height: auto;
        width: auto; 
        margin: 0;
        max-width: 100%; /* ← ここを修正 */
        margin-left: auto;
        margin-right: auto;
    }
    
    /* 2. Swiperコンテナのパディングと幅設定 */
    .oshinagaki-swiper {
        padding-left: 0px !important;
        padding-right: 0px !important;
        width: 100%;
        overflow: hidden;
        padding-bottom: 20px !important;
        
        /* ★★★ 追記: ボタンの配置基準をこのコンテナにするために追加 ★★★ */
        position: relative;
    }
    
    /* 3. 縦積みに伴うカード内部の調整 */
    .card-text-area,
    .card-image-area {
        flex-basis: auto;
        flex-grow: 1;
        flex-shrink: 1;
        min-width: auto;
        max-width: none; 
        height: auto;
    }
    
    /* ★★★ 16:9比率を適用する（Padding Hack）と画像切り替え ★★★ */
    .card-image-area { 
        order: 1; 
        height: 0; /* 高さを0にリセット */
        padding-top: 56.25%; /* (9 / 16) * 100 = 56.25% で16:9を強制 */
        overflow: hidden; 
        position: relative; 
        margin-bottom: 0 !important;
        max-width: 100%;
        width: 100%; 
        margin-left: 0;
        margin-right: 0;
    } 

    /* 画像要素 (div) を親要素に絶対配置でフィットさせる */
    .oshinagaki-photo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
    
    /* 四角タイトル画像の位置をタブレット・モバイル向けに調整 */
    .image-overlay-title-img {
        /* 例: 画像の右下に配置 */
        top: auto; 
        bottom: 20px; 
        left: auto;
        right: 20px;
        max-width: 120px; /* モバイル向けに少し小さくする */
    }
    
    /* 4. テキストエリアのパディングと余白調整 (PC版の30pxを継承) */
    .card-text-area { 
        order: 2; 
        margin-right: 0; 
        
        /* ★★修正: 親要素の Flexbox を変更し、子要素を横並びにする ★★ */
        display: flex;
        flex-direction: row; /* 横並び */
        width: 100%;
        justify-content: space-between; /* 左右の要素を両端に寄せる */
        align-items: flex-start; /* 縦方向は上寄せ */
        /* ★確定: PC版と同じ上下左右 30px のパディング */
        padding: 15px 10px 30px 0px !important;
    }
    /* ★★ 追記: 横並びコンテナ (menu-tablet-wrapper) の定義 ★★ */
    .menu-tablet-wrapper {
        display: flex;
        flex-direction: row;
        width: 100%; /* 親要素 (card-text-area) の幅いっぱい */
        justify-content: space-between; 
        align-items: flex-start;
    }

    /* ★★ 追記: メインコンテンツ (タイトル・罫線・テキスト) の幅を 260px に制限 ★★ */
    .card-main-content {
        /* ★重要: 260px に固定し、メニューボタンにスペースを空ける */
        flex-shrink: 0;
        flex-basis: 270px;
        width: 270px;
        /* ★★ 修正: メニューとの間に 30px の隙間を設ける ★★ */
        margin-right: 40px;
    }

    /* ★★ 追記: 新しいテキストボタンエリアのスタイル ★★ */
    .menu-tablet-buttons {
        /* 横並びのメニューボタンのスタイルを定義 */
        display: flex;
        flex-direction: column; /* テキストボタンは縦に並べる */
        writing-mode: vertical-rl; /* 縦書き（PC版の再現） */
        font-size: 14px;
        font-weight: bold;
        color: #fffffa;
        line-height: 1.5;
        letter-spacing: 0.1em;
        padding-top: 10px; /* PC版のボタン位置を考慮して調整 */
    }
    
    /* 5. タイトル・罫線の幅調整 */
    .card-title-container {
        width: 100% !important;
        margin-top: 0 !important;
        margin-left: 0 !important;
    }
    
h3.card-main-title {
        width: 100% !important; 
    }
    
    .card-white-border {
        /*
         * ★ 罫線の幅を元に戻す ★
         * PC版と同じ固定値、またはautoを設定して、親要素ではなく
         * 自身が持つ幅（例：heightやborder-leftなど）で制御する
         */
        width: auto !important; 
        
        /* 罫線が短い線の場合、親要素で中央寄せになっているかもしれないので、
           ここでは左寄せ（タブレット/モバイルでの一般的な配置）に設定 */
        margin-left: 0 !important; 
    }
    
    /* 6. ボタン位置調整（★★ここを修正・追記★★） */
    
    /* 左右ボタン共通の水平・垂直調整 */
    .swiper-button-prev, .swiper-button-next {
        /* 垂直中央に配置 (ボタン高さ40pxの半分で調整) */
        top: 50% !important; 
        /* ★★★ 修正: 垂直中央(-20px)からさらに45px上へ移動 (-20px - 45px = -65px) ★★★ */
        margin-top: -135px !important; 
        
        /* ★追記: ボタンサイズ 40x40px を強制 */
        width: 40px !important;
        height: 40px !important;
        
        /* Swiperのスライド位置計算を乱さないために、transformで位置を調整する */
        transform: none !important; sformで位置を調整する */
        transform: none !important; 
    }

    /* 1. 左ボタン */
    .swiper-button-prev { 
        /* ★再々修正: 画面の左端から、中央コンテンツの左境界まで移動させる (レイアウト崩れを防ぐため left: 0 を使用) */
        left: 0 !important;
        
        /* 画面中央(50%)からコンテンツ幅の半分(345px)を引いた位置に移動させる */
        /* さらにボタンを内側に10px入れる */
        transform: translateX(calc(50vw - 345px - 20px)) !important; 

        right: auto !important; 
    }
    
    /* 2. 右ボタン */
    .swiper-button-next { 
        /* ★再々修正: 画面の右端から、中央コンテンツの右境界まで移動させる (レイアウト崩れを防ぐため right: 0 を使用) */
        right: 0 !important; 
        
        /* 画面中央(50%)からコンテンツ幅の半分(345px)を引いた位置に移動させる */
        /* さらにボタンを内側に10px入れる */
        transform: translateX(calc(-50vw + 345px + 20px)) !important;
        
        left: auto !important;
    }
    
    /* ★追記: Swiperのデフォルトアイコンのサイズ調整 */
    .swiper-button-prev::after,
    .swiper-button-next::after {
        font-size: 20px !important; /* 矢印のサイズを調整 */
        line-height: 40px; /* 垂直中央に合わせる */
    }
    
    /* 7. 縦書きメニュー画像ボタンの非表示 */
    .menu-button-group {
        display: none !important;
    }
    
    /* 8. 左右のスライドの透明度設定 */
    .oshinagaki-swiper .swiper-slide:not(.swiper-slide-active) {
        opacity: 0.2 !important; 
    }
    .oshinagaki-swiper .swiper-slide-active {
        opacity: 1 !important; 
    }

    /* ★★★ 9. 青い背景を中央スライドのみに制限する設定を完全に解除 ★★★ */
    .oshinagaki-slider-section {
        /* overflow: visible に戻す (PC版と同じ設定) */
        overflow-x: visible !important; 
    }
    
    .oshinagaki-bg-fullwidth {
        /* width: 100% のままで、制限や中央寄せを解除 */
        max-width: 100% !important; 
        width: 100% !important;
        left: 0 !important;
        transform: none !important; 
    }
	
	.oshinagaki-swiper .swiper-slide {
        width: 100% !important;
        max-width: 690px !important;
		max-width: 690px !important;
        min-width: auto !important; 
        flex-shrink: 0 !important;
    }
	
	/* ★★ 修正: 横書きメニューリンクのスタイル ★★ */
    .menu-links-tablet {
        display: block !important;
        flex-direction: column; 
        font-size: 16px; 
        font-weight: bold;
        line-height: 1.5;
        letter-spacing: 0.05em;
        color: #353030; 
        padding-top: 0px;
        flex-grow: 1;
        flex-shrink: 1;
        min-width: 100px;
    }

    /* ★★ 追記: 個別リンクのスタイル ★★ */
    .menu-links-tablet .card-menu-link {
        color: inherit;
        text-decoration: none; 
        margin-bottom: 8px; /* リンク間の縦方向の隙間 */
        white-space: nowrap; 
        
        /* ★★ 追記: リンク内の要素を縦に並べるためのFlexbox設定 ★★ */
        display: flex;
        flex-direction: column; /* 縦積み */
        line-height: 1; /* 縦積みになったので行間を詰める */
        
        /* ★★ 追記: ホバー時に下線を出す（オプション） ★★ */
        padding-bottom: 1px;
        transition: border-color 0.3s;
    }
    .menu-links-tablet .card-menu-link:hover {
        border-bottom-color: #353030; /* ホバー時に下線を出す */
    }
	
	/* ★★ 追記: 日付のフォントサイズを小さくする ★★ */
    .menu-links-tablet .menu-date {
        font-family: futura-pt, sans-serif;
		font-size: 12px; /* 小さめ */
        font-weight: bold; /* 太字を解除 */
        letter-spacing: 0.1em;
        margin-bottom: 5px; /* ツアー名との隙間 */
        color: #D09E25; /* 少し薄い色にしても良い */
    }
    
    /* ★★ 追記: ツアー名のフォントサイズ ★★ */
    .menu-links-tablet .menu-tour-name {
        font-family: 'fot-tsukuardgothic-std', sans-serif;
		font-size: 16px; /* 親要素の 16px より少し小さくても良い */
        font-weight: bold;
		color: #002E4E; /* 少し薄い色にしても良い */
    }
    
    /* ★★ 既存の p タグ用スタイルは不要になるため削除（または .menu-tablet-buttons のスタイルを削除） ★★ */
    .menu-tablet-buttons {
        display: none; /* HTMLの変更で menu-links-tablet にクラス名が変わったため、このスタイルは無効化 */
    }
	.wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

	.item-accordion-group {
    }
	
	/* ★★ 追記/修正: タブレットでのアコーディオン開閉ボタンを強制非表示にするルールを復活 ★★ */
    .item-accordion-toggle-btn {
        display: none !important; /* ← これを復活！ */
    }
	
	/* ★★★ タブレット版のページネーション位置調整 ★★★ */
    .swiper-pagination {
        /* タブレット版では画像エリアの下にテキストエリアが来るため、
           テキストエリアのパディングと合わせ、スライダーの最下部から調整します */
        bottom: 20px !important; /* モバイルよりも少し上に配置 */
    }
	.oshinagaki-photo {
        position: absolute;
        top: 0;
        left: 0;
        width: 100% !important; /* 親要素の幅に合わせる */
        height: 100% !important; /* 親要素の高さに合わせる */
        
        /* ↓↓↓ 【★★★ 最終修正：PC版の object-fit: cover を強制的に無効化 ★★★】 ↓↓↓ */
        /* 画像が拡大せず、コンテナ内にアスペクト比を維持して収まるようにする */
        object-fit: contain !important; 
        
        /* 画像の比率がコンテナに影響するのを防ぐ */
        min-width: 0 !important;
        min-height: 0 !important;
        /* ↑↑↑ 【★★★ object-fit: contain を !important で強制 ★★★】 ↑↑↑ */
    }
}

/* 1140px以上のPC画面での、ボタンの枠外配置 */
@media (min-width: 1140px) {

    /* 1. スライド全体を強制的に1020px固定に戻す */
    .oshinagaki-card {
        width: 1020px !important; 
        flex-direction: row !important; /* 横並びに戻す */
        margin-left: auto !important;
        margin-right: auto !important;
    }
    
    /* 2. カード内部のflex設定を横並び用に強制的に戻す */
    .card-text-area {
        flex-basis: 300px !important;
    }
    .card-image-area {
        flex-basis: 690px !important;
    }
    
/* 1. 左ボタン：スライド左側の境界線に合わせる */
.swiper-button-prev {
    /* 基準点：スライドコンテンツの左端位置 (50% - 1020px / 2) */
    left: calc(50% - 1020px / 2) !important; 
    
    /* ★★ 修正: ボタンの幅の半分 (20px) だけ外側 (左) へ移動させる ★★ */
    /* これにより、ボタンの右端がスライドの左端に合致する */
    transform: translateX(-20px) !important; 
    
    /* transform: translateX(-40px) !important;  ← 以前のコードをこれに置き換え */
}

/* 2. 右ボタン：スライド右側の境界線に合わせる */
.swiper-button-next {
    /* 基準点：スライドコンテンツの右端位置 (50% - 1020px / 2) */
    right: calc(50% - 1020px / 2) !important; 
    
    /* ★★ 修正: ボタンの幅の半分 (20px) だけ外側 (右) へ移動させる ★★ */
    /* これにより、ボタンの左端がスライドの右端に合致する */
    transform: translateX(20px) !important; 
    
    /* transform: translateX(40px) !important; ← 以前のコードをこれに置き換え */
    
    left: auto !important;
}

    
/* アクティブではないスライドの透明度を下げる (PC版のみ) */
    .oshinagaki-swiper .swiper-slide:not(.swiper-slide-active) {
        opacity: 0.4 !important;
        transition: opacity 0.3s;
    }
    .oshinagaki-swiper .swiper-slide-active {
        opacity: 1 !important;
    }
	
	.oshinagaki-swiper .swiper-slide {
        width: 1020px !important;
        max-width: 1020px !important;
    }
	
	.oshinagaki-swiper {
        max-width: 1020px !important; 
        width: 100% !important; 
        margin-left: auto !important;
        margin-right: auto !important;
        
        /* ★★ ここが鍵: overflow を visible に戻す ★★ */
        overflow: visible !important; 
        overflow-x: visible !important; /* X軸方向も指定 */
    }
	
/* タブレット専用のテキストボタンエリアだけを非表示にする */
    .menu-tablet-buttons {
        display: none !important;
    }

/* 横並びラッパー (タイトルなどを囲む親要素) のFlexboxを解除し、縦積みのブロック表示に戻す */
    .menu-tablet-wrapper {
        display: block !important; 
        flex-direction: column !important; 
    }
	
	/* モバイル向け横書きメニューリンク全体を非表示 */
    .menu-links-tablet {
        display: none !important;
    }
    
    /* モバイル向けアコーディオン開閉ボタンを非表示 */
    .item-accordion-toggle-btn {
        display: none !important;
    }
	
	/* ★★★ PC版のページネーション位置調整 ★★★ */
    .swiper-pagination {
        /* PC版のデフォルト位置を使用 */
        bottom: -40px !important; 
    }
}

/* ====================================== */
/* ★★ 768px〜1139px (タブレット) のアコーディオン設定 ★★ */
/* ====================================== */
@media (min-width: 768px) and (max-width: 1139px) {
    
    /* ======================================= */
    /* 1. アコーディオンの強制常時表示（タブレット） */
    /* ======================================= */
    
    /* [タブレット] アコーディオンの親グループは「表示」する */
    .item-accordion-group {
        display: block !important;
    }item-accordion-content
    
    /* [タブレット] アコーディオンの「ボタン」だけ非表示 */
    .item-accordion-toggle-btn {
        display: none !important;
    }
    
    /* [タブレット] アコーディオンの「中身」は常に表示（展開） */
	.item-accordion-content {
        display: block !important; /* ← 最重要 */
        max-height: none !important; 
        min-height: auto !important;
        opacity: 1 !important;
        visibility: visible !important;
        overflow: visible !important;
        transition: none !important; /* アニメーション不要 */
    }
    
    /* ======================================= */
    /* 2. 左右ブロックのレイアウトと縦方向の揃え修正 */
    /* ======================================= */

    .menu-tablet-wrapper {
        display: flex;
        flex-direction: row; 
        
        /* 左右のブロックを上端で揃えるための設定 */
        align-items: flex-start; 
        
        /* ブロック間の横の隙間 */
        gap: 0px; 
    }

/* ★★★ 画像と下部コンテンツの間隔を調整 ★★★ */
    .card-text-area {
        /*
         * 画像の下に位置するテキストエリア全体の上側マージンを増やす
         * 例として 30px に設定（現状が0pxなら30pxの余白が追加される）
         */
        margin-top: 10px !important; 
    }
	
    /* 左ブロック（タイトル・説明文）は固定幅 */
    .card-main-content {
        flex-grow: 0;
        flex-shrink: 0;
        /* タブレット用の適切な幅を設定（例: 40%や350pxなど） */
        /* flex-basis: 40%; */ 
    }
    
    /* 右ブロック（メニューリスト）は残りの空間を埋める */
    .menu-links-tablet {
        flex-grow: 1;
        margin-top: 0; /* 念のためのマージンリセット */
    }
    
    /* ======================================= */
    /* 3. 左ブロックのタイトル上端ズレ解消 */
    /* ======================================= */
    
    .card-main-content .card-main-title {
        /*
         * H3タグのデフォルトマージンをリセットし、
         * 左ブロックのコンテンツを上端にピタリと揃える
         */
        margin-top: 0 !important; 
    }
	
	/* ★ タブレット専用の罫線余白設定 ★ */
    .card-white-border {
        margin-top: 10px !important; 
        margin-bottom: 8px !important; 
    }
	
	/* これが効かない margin-bottom の原因を排除します */
    .card-description {
        /*
         * 説明文の上側のマージンをゼロに強制リセット
         * これで罫線の margin-bottom: 20px が確実に有効になる！
         */
        margin-top: 0 !important; 
    }
	
}


/* ====================================== */
/* スライダー骨格：モバイル版 (767px以下) へのバッサリ変更 (最終確定) */
/* ====================================== */
@media (max-width: 767px) {
    /* モバイル共通設定の変更 */
    :root {
        --section-padding-y: 60px;
        --side-padding: 40px; /* 余白を40pxに変更 */
    }
    
    /* wrapper のパディングを 0 にリセット（Swiperが余白を制御するため） */
    .wrapper {
        padding-left: 0 !important;
        padding-right: 0 !important;
    }
	
	h3.card-main-title {
        /*
         * 768px以下の画面幅 (モバイル) のみで適用したい
         * 小さなフォントサイズを指定します。
         * 例: 18px
         */
        font-size: 20px;
    }
    
    /* カード全体の縦積みと幅設定 */
    .oshinagaki-card {
        flex-direction: column; /* 縦積みへ変更 */
        height: auto; 
        width: 100% !important; 
    }
	
	.oshinagaki-photo {
                /*
                  【修正点1】幅をビューポート幅いっぱいに設定 (画面に依存)
                  親要素の max-width や padding に影響されず、画面幅いっぱいに広がる
                */
                width: 100vw;

            
            /* 画像が見やすいように高さを確保 (ここではアスペクト比 10:6) */
            height: 60vw; 
            max-height: 400px; /* PCでの過剰な高さを制限 */

            /* 画像の表示設定 */
            background-size: cover;
            background-position: center center;
            background-repeat: no-repeat;
            }
			
			/* 2. 乗算レイヤー全体を包むラッパー (黄色い箱全体) */
    .yellow-multiply-wrapper {
        display: none !important;
    }
    
    /* 3. 不透明レイヤーとSVGを包むラッパー (タイトル表示部分) */
    .title-normal-wrapper {
        display: none !important;
    }
    
    /* もし画像タイトル要素 (.image-overlay-title-img) がこれらの中にない場合、これも非表示に */
    .image-overlay-title-img {
        display: none !important;
    }

    .card-text-area,
    .card-image-area {
        flex: 1 1 100%; 
        min-width: 100%; 
        height: auto;
        margin-right: 0; 
    }
    
    /* 画像エリアのスタイル */
    .card-image-area { 
        order: 1; 
        height: 200px; 
        max-width: 100%;
        width: 100%; 
        margin-left: 0;
        margin-right: 0;
    } 
    
    /* 四角タイトル画像の位置をモバイル向けに調整 */
    .image-overlay-title-img {
        bottom: 10px; 
        right: 10px; 
        max-width: 100px; 
        top: auto; 
        left: auto;
    }
    
    /* テキストエリアのスタイル */
    .card-text-area { 
        order: 2; 
        /* スライドの幅を制御するために左右のパディングを0にし、余白はSwiperで調整 */
        padding: 0px 0px !important; /* 上下20px、左右0px */
        
        /* Flexboxを縦積みに戻す */
        display: flex !important;
        flex-direction: column !important; 
		font-size: 16px; 
		line-height: 1.7;
    }

    /* 横並びコンテナ (タイトルなどを囲んでいたラッパー) も縦積みに戻す */
    .menu-tablet-wrapper {
        display: flex;
        flex-direction: column; 
        width: 100%; 
        justify-content: flex-start; 
        align-items: flex-start;
    }

    /* メインコンテンツ (タイトル・罫線・テキスト) を 100% 幅に拡張 */
    .card-main-content {
        flex-shrink: 1 !important;
        flex-basis: auto !important;
        width: 100% !important; 
        margin-right: 0 !important; 
    }

    /* メニューリンクコンテナ（アコーディオンのラッパー） */
    .menu-links-tablet {
        margin-top: 25px; 
        padding-top: 0; 
        width: 100%; 
        display: flex;
        flex-direction: column; 
        font-size: 16px; 
        font-weight: bold;
        line-height: 1.5;
        letter-spacing: 0.05em;
        min-width: 100px;
    }

    /* 個別リンクのスタイル（日付・ツアー名の縦積み） */
    .menu-links-tablet .card-menu-link {
        color: inherit;
        text-decoration: none; 
        margin-bottom: 5px; 
        white-space: nowrap; 
        display: flex;
        flex-direction: column; 
        line-height: 1; 
        padding-bottom: 1px;
        transition: border-color 0.3s;
    }
    .menu-links-tablet .card-menu-link:hover {
        /* ホバーはモバイルでは使わないため、もしあれば削除しても良い */
        border-bottom-color: #353030;
    }
    
    /* 日付のフォントサイズを小さくする */
    .menu-links-tablet .menu-date {
        font-family: futura-pt, sans-serif;
        font-size: 12px; 
        font-weight: bold; 
        letter-spacing: 0.1em;
        margin-bottom: 5px; 
        color: #D09E25; 
    }
    
    /* ツアー名のフォントサイズ */
    .menu-links-tablet .menu-tour-name {
        font-family: 'fot-tsukuardgothic-std', sans-serif;
        font-size: 16px; 
        font-weight: bold;
        color: #002E4E; 
    }
    
    /* タイトルや罫線の幅を100%に合わせる */
    h3.card-main-title,
    .card-title-container {
        width: 100% !important;
    }

    /* 罫線は解除 */
    .card-white-border {
        /* 罫線の上下の余白（これは以前の修正で追加済みのはず） */
        margin-top: 10px !important; 
        margin-bottom: 8px !important;
    }
	
	/* ★★★ 最重要：説明文の上側マージンをリセット ★★★ */
    .card-description {
        /*
         * 他のCSSによる margin-top の上書きを防ぎ、
         * 罫線の margin-bottom が正しく機能するようにする
         */
        margin-top: 0 !important; 
        
        /* 念のため、下側の余白もモバイル用に設定 */
        margin-bottom: 0 !important; 
    }
    
    /* ボタンをモバイルでは非表示にする */
    .swiper-button-prev,
    .swiper-button-next {
        display: none !important; 
    }
    
    /* 既存の p タグ用スタイルは不要になるため削除 */
    .menu-tablet-buttons {
        display: none !important;
    }
    
    /* Swiperコンテナの調整 */
    .oshinagaki-swiper {
        touch-action: pan-y;
        padding-bottom: 40px; 
        
        /* 以前のネガティブマージン/パディング設定をすべてリセット */
        margin-left: 0 !important; 
        margin-right: 0 !important; 
        padding-left: 0 !important; 
        padding-right: 0 !important; 
        width: 100% !important;
    }
    
    /* Swiperスライドの幅と配置の最終決定 */
    .oshinagaki-swiper .swiper-slide {
        /* 左右40pxずつ、合計80pxの余白を画面幅から引く */
        width: calc(100vw - 80px) !important; 
        max-width: none !important;
        min-width: 0 !important;
    }
	
	/* 1139px以下の設定を上書きして、透明度をより薄くしないように変更できます。 */
    .oshinagaki-swiper .swiper-slide:not(.swiper-slide-active) {
        /* 例: 透明度を 0.4 に設定 (0.1よりも薄くならない) */
        opacity: 0.4 !important; 
    }

   /* ====================================== */
   /* ★★ モバイル版アコーディオンメニューのスタイル (修正) ★★ */
   /* ====================================== */

    /* デフォルトで隠すコンテンツのスタイル */
    .item-accordion-content {
      display: none;
    }
	
	.item-accordion-group {
        display: block !important;
        width: 100%;
        /* margin-top: 20px; /* 必要に応じて調整 */
    }
    
    /* 展開された状態のコンテンツ */
    .item-accordion-group.is-open .item-accordion-content {
        /* JSアニメーションを助けるために、必要に応じて高さを設定します。
           ただし、slideDown()が動く場合は、この設定は不要か、またはheight: auto; で十分です */
        /* height: auto !important; */
        
        /* contents が正しく縦並びになるようにレイアウトを再設定 */
        display: block !important;
        
        /* padding や margin を追加してコンテンツに余白を与える */
        padding-top: 15px !important;
        padding-bottom: 15px !important;
    }
	
	.item-accordion-content * {
        writing-mode: horizontal-tb !important; /* 縦書きを強制リセット */
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }    
    /* 開閉ボタンのスタイル */
    .item-accordion-toggle-btn {
        width: 177px; /* ★修正: 177px に変更 */
        border: none;
        background-color: transparent;
		
		/* 1. 【修正】background-image 関連を削除し、::before に移行 */
		background-image: none; 
		background-size: auto; 
		background-position: auto; 
		height: 26px; /* 文字と矢印のための最小高さ */
		
		/* 2. テキストと矢印を吹き出しの中に配置するための調整 */
		position: relative; /* ::before の基準点 */
		padding: 0; 
		
		/* 3. フォントと色の設定 */
		font-family: 'fot-tsukuardgothic-std', sans-serif;
        color: #002E4E; 
        font-size: 15px;
        font-weight: bold;
        text-align: left !important; /* ボタンのテキストは左揃えを指示 */
        cursor: pointer;
        
		/* margin-left: 40px; を削除 */
        margin-top: 15px;
		margin-bottom: 40px;
		
        /* ★★ 修正: ::before (top: 15px) の位置を考慮し、ボタン全体を下にずらす ★★ */
        padding-top: 1px; /* 追加: テキストと矢印を背景画像と同期させる */

		/* 5. Flexbox設定を左寄せに上書き */
        display: flex;
        justify-content: flex-start; /* 左寄せ */
        align-items: center;
    }
	
	/* ★★★ 吹き出しの背景を擬似要素で挿入し、位置をずらす ★★★ */
	.item-accordion-toggle-btn::before {
		content: "";
		position: absolute;
		/* 1. 吹き出しのサイズと画像を設定 */
		width: 177px; 
		height: 26px; 
		background-image: url('../img_top_oshinagaki/bubble_01.svg');
		background-size: 100% 100%; /* ぴったり合わせる */
		background-repeat: no-repeat;
		
		/* 2. 背景として z-index を設定 */
		z-index: -1;
		
		/* 3. 【最重要】位置を15px下にずらす */
		top: 15px; /* 上端から15px下に配置 */
		left: 0;
	}
	
	/* 吹き出し画像に合わせるため、テキストコンテナを調整 */
	.item-accordion-toggle-btn .text-open,
	.item-accordion-toggle-btn .text-close {
		/* 絶対配置と中央寄せを解除し、吹き出しの左上部分に配置 */
		position: static; 
		transform: none;
		white-space: nowrap;
		display: block;
		text-align: left; /* テキスト自体も左揃え */
		
        /* ★修正: 吹き出しの高さ 26px に line-height を合わせ、テキストを垂直中央に寄せる */
        line-height: 26px; /* 26pxに修正 */
		padding-top: 0; /* 削除 */
		padding-bottom: 0; /* 削除 */

		/* 吹き出しの左端からのパディングを調整 */
		padding-left: 15px; /* 吹き出しの形に合わせて左側のパディング */
		padding-right: 15px; /* 矢印との隙間を確保 */
		
		/* Flexboxの子要素として、矢印よりも前に来るように調整 */
		order: 1; 
	}
	
    /* 閉じるテキストはデフォルトで非表示 */
    .item-accordion-toggle-btn .text-close {
        display: none;
    }

    /* 開いた状態のボタン (開閉テキストの切り替え) */
    .item-accordion-group.is-open .item-accordion-toggle-btn .text-open {
        display: none;
    }
    .item-accordion-group.is-open .item-accordion-toggle-btn .text-close {
        display: inline;
    }

	
	/* リンク自体のレイアウトはここで行う */
.item-accordion-content .card-menu-link {
    /* 常に表示するリンクと同じスタイルを確保 */
    display: flex;
    flex-direction: column; 
    margin-bottom: 1px;
    padding-bottom: 10px;
}
    
.menu-links-tablet {
        display: flex !important; /* モバイルで表示を戻す */
    }
    .item-accordion-toggle-btn {
        display: flex !important; /* モバイルで表示を戻す */
    }
	
	/* ★★★ モバイル版のページネーション位置調整 ★★★ */
    .swiper-pagination {
        /* モバイル版では画像エリアの下、テキストエリアの下の余白を利用して配置 */
        bottom: -8px !important; /* スライダーの最下部から調整（一番下に近く） */
    }
}




/* =================================================   
   旅の手帖セクション（隙間固定・可変対応版）
   ================================================= */
.techo-section {
    padding: 80px 0;
    background-color: #e6f3f1;
}

/* 左右40pxの余白を確保しつつ縮小 */
.techo-container {
    max-width: 1280px; 
    margin: 0 auto;
    padding: 0 40px;
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    box-sizing: border-box;
}

.techo-main-content {
    flex: 1;
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* 記事を横に並べる行 */
.techo-articles-row {
    display: flex;
    justify-content: flex-start;
    gap: 60px; /* 記事間の余白。ここも狭すぎるなら調整可 */
    margin-bottom: 60px;
}

.techo-card {
    width: 100%; 
    max-width: 510px; /* 450 + 15 + 45 */
    flex-shrink: 1;
}

/* --- 写真とラベルのエリア --- */
.techo-image-wrapper {
    position: relative;
    width: 100%;
    /* 【修正】右側に「隙間15px + ラベル45px = 60px」の固定余白を確保 */
    padding-right: 60px; 
    margin-bottom: 15px;
    box-sizing: border-box;
}

/* 写真本体：正方形を維持して可変 */
.techo-photo {
    width: 100%;
    aspect-ratio: 1 / 1; 
    object-fit: cover;
    display: block;
}

/* 写真右側のラベル：幅45px固定、位置は右端固定 */
.techo-vertical-label {
    position: absolute;
    top: 0;
    right: 0; /* ラッパーのpadding-right(60px)の中に収まる */
    width: 45px;
    height: 100%;
}

.techo-vertical-label img {
    width: 100%;
    height: auto;
}

/* 説明文：写真と同じ幅に揃える（右に60pxの固定余白） */
.techo-description {
    width: 100%;
    font-size: 15px;
    line-height: 1.8;
    color: #333;
    text-align: justify;
    padding-right: 60px; 
    box-sizing: border-box;
}

/* 右端タイトル：36px固定 */
.techo-section-title {
    width: 36px;
    margin-left: 84px; 
    flex-shrink: 0;
}

.techo-section-title img {
    width: 100%;
    height: auto;
}

/* ボタンエリア */
.techo-btn-area {
    width: 100%;
    max-width: 1080px; /* 510+60+510 */
    text-align: center;
}

.btn-more {
    display: inline-block;
    padding: 15px 80px;
    border: 1px solid #333;
    text-decoration: none;
    color: #333;
}

.is-sp-only {
    display: none !important;
}

/* もしHTMLで is-pc-only を使っている場合はこちらも */
.is-pc-only {
    display: block; /* 通常は表示 */
}

/* --- レスポンシブ：920px以下（全要素連動縮小版） --- */
@media (max-width: 920px) {
    .techo-container {
        display: flex;
        flex-direction: row; 
        justify-content: center; 
        align-items: flex-start;
        padding: 0 5vw; /* 画面端の最小余白 */
        
        /* 写真を中央に保つための補正：(右タイトルの幅 + 隙間) 分だけ左を空ける */
        /* タイトル約4vw + 隙間約3vw = 7vw */
        padding-left: calc(5vw + 7vw); 
    }

    /* 記事1（PC専用）を非表示 */
    .is-pc-only {
        display: none !important;
    }

    .techo-main-content {
        flex: 0 1 auto;
        display: flex;
        flex-direction: column;
        align-items: center;
        min-width: 0;
    }

    .techo-articles-row {
        display: block;
        margin-bottom: 0;
    }

    /* 写真サイズ：画面に合わせて可変 */
    .techo-card {
        width: 65vw; 
        max-width: 450px;
        margin: 0;
    }

    .techo-image-wrapper {
        position: relative;
        width: 100%;
        margin-bottom: 0 !important;
        line-height: 0; /* 行間による隙間も排除 */
        padding-right: 0; 
    }

    .techo-photo {
        width: 100%;
        aspect-ratio: 1 / 1;
        object-fit: cover;
        display: block; /* inlineからblockに変えることで下の隙間が消えます */
        vertical-align: bottom;
    }

    /* 不要な要素を非表示 */
    .techo-vertical-label,
    .techo-description {
        display: none;
    }

    /* 【修正】右側のタイトル：画面幅に合わせて縮小 */
    .techo-section-title {
        width: 4vw;        /* 画面幅の4%（920pxで約36px） */
        min-width: 24px;   /* 小さくなりすぎない限界 */
        margin-left: 3vw;  /* 写真との隙間も画面幅に連動 */
        flex-shrink: 0;
    }

    .techo-section-title img {
        width: 100%;
        height: auto;
    }

    /* ボタンエリア */
    .techo-btn-area {
        width: 100%;
        text-align: center;
        margin-top: 10px;
    }

    .btn-more {
        display: inline-block;
        padding: 12px 60px;
        font-size: 14px;
        white-space: nowrap;
    }
	/* 写真下の情報エリア */
.techo-info {
        width: 100%;
        margin-top: 0 !important; /* 強制的に0に */
        padding-top: 0;
        text-align: left;
    }

/* 日付：小さめ・少し細め */
.techo-date {
        display: block;
		font-family: futura-pt, sans-serif;
        font-size: 14px;
		font-weight: 600;
        color: #D09E25;
        margin: 0; /* margin-bottomも一旦0に */
        padding-top: 4px; /* 画像に近すぎる場合はここで微調整 */
    }

/* タイトル：通常の読みやすいサイズ */
.techo-title-sp {
        font-family: 'fot-tsukuardgothic-std', sans-serif;
		font-size: 18px;
        font-weight: 600;
        margin: 0; /* h3特有の上下余白を削除 */
        padding: 0;
        line-height: 1.2;
    }

/* ボタンエリア：情報エリアとの間隔を再調整 */
.techo-btn-area {
    width: 100%;
    text-align: center;
    margin-top: 40px; /* テキストが入ったので少し離す */
}
}



/* =================================================   
   お知らせセクション（gap不使用・1200px）
   ================================================= */
.news-section {
    padding: 100px 0;
}

.news-container {
    max-width: 1200px; /* 全体の枠は1200px */
    margin: 0 auto;
    display: flex;
    align-items: flex-start;
    /* 左右に50pxの余白を設定 */
    padding: 0 50px;
    /* paddingを幅に含めて1200pxを超えないようにする */
    box-sizing: border-box; 
}

/* 左側：縦書きタイトル（36px固定） */
.news-section-title {
    width: 36px;
    flex-shrink: 0;
    /* リストとの間隔 */
    margin-right: 60px; 
}

.news-section-title img {
    width: 100%;
    height: auto;
    display: block;
}

/* 右側：お知らせリスト */
.news-list {
    flex: 1;
    /* 1200pxから(左右余白100px + タイトル36px + 間隔60px)を引いた幅に自動調整されます */
}

/* 各お知らせの行 */
.news-item {
    border-top: 1px solid #373232;
    background-color: transparent;
    transition: background-color 0.3s ease;
}

.news-item:last-child {
    border-bottom: 1px solid #373232;
}

.news-item:hover {
    background-color: #e6f3f1;
}

/* リンクエリア */
.news-link {
    display: flex;
    /* 上下30px / 左右20px（背景色の中での余白） */
    padding: 30px 20px;
    text-decoration: none;
    color: #333;
    width: 100%;
    box-sizing: border-box;
}
.news-link:hover {
    /* 個別の透明度設定は削除 */
    opacity: 1;
}

/* サムネイル画像 */
.news-image {
    width: 240px;
    height: 140px;
    flex-shrink: 0;
    overflow: hidden;
}

.news-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* テキストコンテンツ */
.news-content {
    flex: 1;
    padding-left: 30px; /* 画像との間隔 */
}

.news-meta {
    margin-bottom: 15px;
	font-family: futura-pt, sans-serif;
	font-weight: 600;
    font-size: 14px;
	line-height: 1;
}

.news-date {
    margin-right: 0px;
}

.news-category {
    font-size: 12px;
	color: #9b9898;
	line-height: 1;
}

.news-category::before {
    content: "/ ";
}

.news-text {
    line-height: 1.8;
}

/* --- スマホ対応（920px以下） --- */
@media (max-width: 920px) {
    .news-container {
        display: flex; /* 縦に積まず、横並びを維持 */
        padding: 0 20px; /* 左右余白を少し詰める */
        box-sizing: border-box;
    }

    /* 左側：タイトル画像（少し小さくしてバランス調整） */
    .news-section-title {
        width: 24px; /* スマホ用に少しスリムに */
        margin-right: 25px; /* リストとの距離 */
        flex-shrink: 0;
    }

    /* 右側：お知らせリスト */
    .news-list {
        flex: 1;
        min-width: 0; /* テキストのはみ出し防止 */
    }

    /* 【重要】画像を非表示にする */
    .news-image {
        display: none !important;
    }

    /* リンクエリアの調整 */
    .news-link {
        display: block; /* 中身（日付と本文）を縦に積む */
        padding: 20px 10px; /* 上下余白をスマホ用に調整 */
        margin: 0 -10px; /* 背景色の塗りを左右に少し広げる */
        width: auto;
    }

    /* テキストコンテンツの余白をリセット */
    .news-content {
        padding-left: 0;
    }

    .news-meta {
        margin-bottom: 8px;
    }

    .news-text {
        font-size: 14px; /* スマホで読みやすいサイズ */
        line-height: 1.6;
    }
}



/* Instagramセクション全体 */
.instagram-section {
    padding: 80px 0;
    background-color: #e6f3f1;
}

.instagram-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 50px;
    box-sizing: border-box;
}

/* ヘッダー：中央寄せ・高さ調整 */
.instagram-header {
    margin-bottom: 40px;
}

.insta-logo-title {
    display: flex;
    align-items: center;    /* 上下中央揃え */
    justify-content: center; /* 左右中央揃え */
}

.insta-icon-wrapper {
    font-size: 28px;
    margin-right: 12px;
    line-height: 1; /* 余計な隙間を排除 */
    display: flex;
    align-items: center;
}

.insta-icon-wrapper a {
    color: #373232;
    text-decoration: none;
    height: 28px; /* フォントサイズと合わせる */
}

.instagram-title {
    font-family: futura-pt, sans-serif;
    font-size: 26px;
    color: #373232;
    line-height: 1;
    margin: 0;
    font-weight: 600;
}

/* フィード（5枚横並び） */
.instagram-feed {
    display: flex;
    margin: 0 -10px;
}

.insta-item {
    flex: 1;
    margin: 0 10px;
    aspect-ratio: 1 / 1;
    overflow: hidden;
    background-color: #eee;
}

.insta-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: opacity 0.3s;
}

/* View More ボタン：中央寄せ */
.instagram-btn-wrapper {
    margin-top: 50px;
    text-align: center;
}

.insta-more-link {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    transition: opacity 0.3s ease;
}

.insta-more-link:hover {
    opacity: 0.7;
}

/* @sazanami_tabiが入る水色の四角 */
.insta-account-box {
    background-color: #82c0b8; 
    color: #fff;
    padding: 6px 18px; /* アイコンなしに合わせて左右バランスを均等に */
    border-radius: 4px;
    margin-right: 12px;
    display: inline-block;
    line-height: 1.5; /* 文字が上下中央に来るように調整 */
    letter-spacing: 0.05em;
    font-family: futura-pt, sans-serif;
    font-weight: bold;
}

/* 「をもっと見る」のテキスト */
.more-text {
    font-size: 15px;
    color: #373232;
    letter-spacing: 0.05em;
}

.more-view-btn:hover {
    opacity: 0.6;
}

/* --- スマホ対応（920px以下） --- */
@media (max-width: 920px) {
    .instagram-container {
        padding: 0 20px;
    }
    .instagram-feed {
        flex-wrap: wrap;
        margin: 0 -5px;
    }
    .insta-item {
        flex: none;
        width: calc(50% - 10px); /* 2カラム */
        margin: 5px;
    }
    /* 5枚目は奇数で余るのでスマホでは隠すときれいです */
    .insta-item:last-child {
        display: none;
    }
}



/* --- フッター --- */
.l-footer {
    background-image: url("../img_bg/blue.jpg");
    
    /* 繰り返し設定 */
    background-repeat: repeat;    /* 画像を縦横に繰り返す */
    background-size: auto;        /* 画像本来のサイズで表示（リピートに必須） */
    background-position: top left; /* 左上を起点に並べる */
	background-color: #002b41; /* 画像に近い深いネイビー */
    color: #fffffa;
    padding: 80px 0 40px;
    font-size: 14px;
}

.l-footer__inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0; 
}

/* メインコンテンツ（3カラム） */
.l-footer__content {
    display: flex;
    justify-content: space-between;
    border-bottom: 0px solid #fffffa;
    padding-bottom: 60px;
    margin-bottom: 40px;
}

.l-footer__column {
    width: 31%; /* 合計93%。残りの7%が自動的に「間隔」になります */
}
/* 2番目（中央）のカラムだけ左右に余白を作る */
.l-footer__column:nth-child(2) {
    margin: 0 50px;
}

/* 上下エリアの間隔を30pxに指定 */
.l-footer__block:not(:last-child) {
    margin-bottom: 40px;
}

.l-footer__title {
    font-family: 'fot-tsukuardgothic-std', sans-serif;
    font-size: 18px;
    font-weight: bold;
    margin-bottom: 12px;
    position: relative;
    padding-bottom: 6px;
}

/* タイトル下の線（デザインに合わせる） */
.l-footer__title::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%; /* カラム幅いっぱいに線を引く */
    height: 1px;
    background-color: #fffffa;
}

.l-footer__title-link {
    color: inherit;          /* 親要素（タイトル）の色を引き継ぐ */
    text-decoration: none;   /* 下線を消す */
    display: inline-block;
    transition: opacity 0.3s; /* ホバー時の動きを滑らかに */
}

.l-footer__title-link:hover {
    opacity: 0.7;           /* 重ねた時に少し透かして「押せる」ことを伝える */
}

.l-footer__list {
    list-style: none;
    padding: 0;
	font-weight: 500;
}

.l-footer__list li {
    margin-bottom: 6px;
    line-height: 1.6;
}

.l-footer__list a {
    color: #fff;
    text-decoration: none;
    transition: opacity 0.3s;
}

.l-footer__list a:hover {
    opacity: 0.7;
}

/* リンクなしリストのスタイル */

.l-footer__list.--no-link {
    list-style: none; /* デフォルトの点も消す */
    padding: 0;
    margin: 0;
}

.l-footer__list.--no-link li {
    color: #fffffa;
opacity: 0.5;   /* これでその要素全体が 0.5 の半透明になります */
    margin-bottom: 8px;
    cursor: default;
    padding-left: 0; /* 記号がないので余白も0にして左端を揃える */
    line-height: 1.6;
}

/* 下部エリア（中央寄せ） */
.l-footer__bottom {
    text-align: left;
}

.l-footer__sub-nav {
    display: flex;
    justify-content: flex-start; /* リンクを左から並べる */
    list-style: none;
    padding: 0;
    margin-bottom: 20px;
}

.l-footer__sub-nav li {
    margin-right: 30px; /* 右側に間隔を作る（中央揃えの時の左右余白を調整） */
    margin-left: 0;     /* 左側は0にする */
    position: relative;
}

/* 区切り線（ | ） */
.l-footer__sub-nav li:not(:last-child)::after {
    content: '|';
    position: absolute;
    right: -20px;
    color: #fffffa;
}

.l-footer__sub-nav a {
    font-weight: 600;
	color: #fff;
    text-decoration: none;
}

.l-footer__info {
    font-size: 12px;
	font-style: normal;
	font-weight: 500;
    color: #fffffa;
    margin-bottom: 8px;
    line-height: 1;
}

.l-footer__copyright {
    font-size: 12px;
	font-weight: 500;
    color: #fffffa;
	line-height: 1;
}




.c-pagetop {
    position: fixed;
    right: 0px;
    bottom: 30px;
    z-index: 100;

    /* ボタンのサイズ（画像に合わせて調整してください） */
    width: 50px; 
    height: 180px; 

    /* 背景画像としてSVGを指定 */
    background-image: url("../img/pagetop.svg");
    background-repeat: no-repeat;
    background-position: center;
    background-size: contain; /* 画像を枠内に収める */

    /* テキストは画像に含まれているはずなので、HTMLの中身は空でもOK */
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;

    /* ふわっと表示用の設定 */
    opacity: 0;
    visibility: hidden;
    transition: all 0.5s;
    cursor: pointer;
}

/* 表示状態 */
.c-pagetop.is-show {
    opacity: 1;
    visibility: visible;
}

/* ホバーした時に少し浮き上がる演出（お好みで） */
.c-pagetop:hover {
    transform: translateY(-5px);
}

/* スマホ版（767px以下）の設定 */
@media screen and (max-width: 767px) {
    .c-pagetop {
        right: 0px;  /* 端に寄せすぎず、親指で押しやすい位置に */
        bottom: 15px;
        width: 40px;  /* スマホで邪魔にならないサイズに調整 */
        height: 120px; /* スマホ用画像の縦横比に合わせる */
        background-image: url("../img/pagetop_sp.svg"); /* スマホ用画像に差し替え */
    }
}

/* 表示クラス（共通） */
.c-pagetop.is-show {
    opacity: 1;
    visibility: visible;
}




@charset "utf-8";

/* --- 1. 基本設定 --- */
.l-header.is-sub {
  width: 100%;
  position: relative;
  z-index: 1000;
}

/* --- 2. 【PC版】1021px以上：1300px中央寄せ・レスポンシブ配置 --- */
@media screen and (min-width: 921px) {
  .l-header.is-sub {
    height: 230px;
    display: flex;
    justify-content: center; /* 画面が1300px以上の時、全体を中央に保持 */
  }

  .l-header.is-sub .l-header__inner {
    width: 100%;
    max-width: 1300px; /* コンテンツ1200px + 左右余白50px×2 */
    padding: 50px 50px 0; /* 左右に50pxの「デッドスペース」を確保 */
    margin: 0 auto;
    display: flex;
    justify-content: space-between; /* SNS / ロゴ / ナビ を三点に配置 */
    align-items: flex-start;
    position: relative;
  }

  /* 左：SNS（画面が狭まるとロゴへ寄っていく） */
  .l-header.is-sub .l-header__left {
    flex: 1; /* ロゴを中央に保つための重み */
    display: flex;
    justify-content: flex-start;
  }
  .l-header.is-sub .l-header__sns { 
    display: flex; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
    margin-top: -50px; /* 高さを微調整 */
  }
  .l-header.is-sub .l-header__sns li { margin-right: 15px; }

  /* 中：ロゴエリア（常にど真ん中をキープ） */
  .l-header.is-sub .l-header__logo-area {
    flex: 0 0 auto; /* 幅を固定して中央から動かさない */
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 0 20px; /* ナビとの衝突回避用 */
  }
  
  .l-header.is-sub .l-header__logo-pc {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .l-header.is-sub .l-header__logo-mark { 
    width: 60px; 
    margin-bottom: 5px;
    display: block;
  }

  .l-header.is-sub .l-header__logo-text-single {
    font-family: source-han-serif-japanese, serif; 
    font-size: 16px; 
    font-weight: 600; 
    color: #373232; 
    margin-bottom: 8px;
    white-space: nowrap;
  }
  
  .l-header.is-sub .l-header__logo-cursive { width: 420px; }

  /* 右：PCナビ（画面が狭まるとロゴへ寄っていく） */
  .l-header.is-sub .l-header__nav-pc {
    flex: 1; /* SNSとのバランスをとり、ロゴを中央に固定 */
    display: flex;
    justify-content: flex-end;
  }
  .l-header.is-sub .l-header__nav-list { 
    display: flex; 
    list-style: none; 
    margin: 0; 
    padding: 0; 
  }
  
  /* ナビゲーションの間隔（お好みで調整） */
  .l-header.is-sub .l-header__nav-item {
    margin-left: 5px !important; 
  }

  /* 不要な要素を非表示 */
  .l-header.is-sub .l-header__hamburger,
  .l-header.is-sub .l-header__nav-sp,
  .l-header.is-sub .l-header__logo-mobile { display: none; }
}

/* --- 3. 【スマホ版】920px以下：クリック干渉防止版 --- */
@media screen and (max-width: 920px) {
  .l-header.is-sub .l-header__inner {
    padding: 0 0px !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    position: relative !important;
    height: 70px !important;
  }

  /* 【左】波ロゴ：z-indexを上げて確実にクリック可能にする */
  .l-header.is-sub .l-header__logo-pc {
    display: block !important;
    position: relative !important;
    z-index: 20 !important; /* 中央ロゴ(5)より高く */
    flex: 0 0 auto !important;
  }
  .l-header.is-sub .l-header__logo-text-single,
  .l-header.is-sub .l-header__logo-cursive {
    display: none !important;
  }
  .l-header.is-sub .l-header__logo-mark {
    width: 44px !important;
    display: block !important;
    margin-top: 5px !important;
    cursor: pointer !important;
  }

  /* 【中】筆記体ロゴ：pointer-eventsでクリックを「透明」にする */
  .l-header.is-sub .l-header__logo-mobile {
    display: block !important;
    position: absolute !important;
    left: 50% !important;
    top: 50% !important;
    transform: translate(-50%, -50%) !important;
    z-index: 5 !important; /* 低く設定 */
    
    /* ★超重要：このロゴ自体はクリックに反応せず、下の要素にクリックを通す */
    pointer-events: none !important; 
    
    width: 45vw !important;
    max-width: 280px !important;
    min-width: 150px !important;
    margin-top: 5px !important;
  }

  /* 【右】ハンバーガー：z-indexを上げて確実にクリック可能にする */
  .l-header.is-sub .l-header__hamburger {
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    width: 30px !important;
    height: 20px !important;
    position: relative !important;
    z-index: 1000 !important; /* 中央ロゴ(5)より高く */
    cursor: pointer !important;
	margin-top: -45px !important;
  }
  .l-header.is-sub .l-header__hamburger span {
    display: block !important;
    width: 100% !important;
    height: 2px !important;
    background: #373232 !important;
  }
  .l-header.is-sub .l-header__hamburger.is-active span {
    background: #ffffff !important;
  }

  /* 不要な要素の非表示 */
  .l-header.is-sub .l-header__left,
  .l-header.is-sub .l-header__nav-pc,
  .l-header.is-sub .l-header__nav-sp {
    display: none !important;
  }
  /* メニューが開いている時だけnav-spを表示 */
  .l-header.is-sub .l-header__nav-sp.is-active {
    display: block !important;
  }
}






/* ======================================================
   下層ページ共通：ヘッドエリア (PC一行保証版)
   ====================================================== */

.p-sub-hero {
  padding: 40px 50px 60px !important;
  color: #373232 !important;
}

.p-sub-hero__inner {
  max-width: 1200px !important;
  margin: 0 auto !important;
  position: relative !important;
}

/* --- 1. 上段：タイトルとページ数 --- */
.p-sub-hero__top-row {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-end !important;
  padding-bottom: 20px !important;
  position: relative !important;
}

.p-sub-hero__title-group {
  display: flex !important;
  align-items: flex-end !important;
  /* ★PC版では絶対に改行させない */
  white-space: nowrap !important;
  flex-wrap: nowrap !important;
}

.p-sub-hero .small-title {
  font-family: 'fot-tsukuardgothic-std', sans-serif;
  font-size: 24px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  margin: 0 15px 0 0 !important;
  position: relative !important;
  top: -2px !important;
}

.p-sub-hero .main-title {
  font-family: 'fot-tsukuardgothic-std', sans-serif;
  font-size: 32px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  margin: 0 !important;
  position: relative !important;
  top: -2px !important;
}

/* ページ数エリア */
.p-sub-hero__page-group {
  position: absolute !important;
  right: 0 !important;
  bottom: 20px !important;
  display: flex !important;
  align-items: flex-end !important;
}

.p-sub-hero .page-counter {
  font-size: 14px !important;
  letter-spacing: 0.2em !important;
  font-family: futura-pt, sans-serif !important;
  font-weight: bold !important;
  line-height: 1 !important;
  margin-right: 5px !important;
}

.p-sub-hero .page-text {
  font-size: 12px !important;
  font-weight: bold !important;
  line-height: 1 !important;
}

/* --- 2. 罫線 / 3. 中段（変更なし） --- */
.p-sub-hero__border {
  border: none !important;
  border-top: 1px solid #373232 !important;
  margin: 0 !important;
  width: 100% !important;
}

.p-sub-hero__info-row {
  display: flex !important;
  justify-content: center !important;
  align-items: flex-end !important;
  padding: 30px 0 30px !important;
}

/* Safari対策の余白 */
.p-sub-hero .title-date {
  font-family: futura-pt, sans-serif !important;
  font-size: 16px !important;
  font-weight: bold !important;
  line-height: 1 !important;
  margin-right: 15px !important; /* 横並び時の間隔 */
}

.p-sub-hero .title-category {
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  position: relative !important;
  top: -1px !important;
}

/* ======================================================
   ★ 切り替えポイント（920px以下：すべてを2行・中央寄せに）
   ====================================================== */
@media screen and (max-width: 920px) {
  
  .p-sub-hero {
  padding: 40px 30px 0px !important;
  color: #373232 !important;
}

  /* --- 1. 上段（タイトル・ページ数） --- */
  .p-sub-hero__top-row {
    flex-direction: column !important;
    align-items: center !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  
  .p-sub-hero__title-group {
    flex-direction: column !important; /* 小タイトルとメインを2行に */
    align-items: center !important;
  }

  .p-sub-hero .small-title {
    margin: 0 0 8px 0 !important; /* 下に余白 */
    font-size: 20px !important;
    top: 0 !important;
  }

  .p-sub-hero .main-title {
    margin: 0 !important;
    font-size: 26px !important;
    top: 0 !important;
    text-align: center !important;
  }

  .p-sub-hero__page-group {
    position: static !important;
    margin-top: 15px !important;
    justify-content: center !important;
  }

  /* --- 2. 中段（日付・カテゴリ）も2行にする --- */
  .p-sub-hero__info-row {
    flex-direction: column !important; /* 日付とカテゴリを2行に */
    align-items: center !important;
    padding: 18px 0 18px !important; /* 上下の余白バランスを調整 */
  }

  .p-sub-hero .title-date {
    margin: 0 0 8px 0 !important; /* 横の余白を消して、下に余白を作る */
    font-size: 14px !important;
  }

  .p-sub-hero .title-category {
    margin: 0 !important;
    top: 0 !important;
    font-size: 13px !important;
  }
}

/* ======================================================
   ★ 切り替えポイント（920px以下：すべてを2行・中央寄せに）
   ====================================================== */
@media screen and (max-width: 500px) {
  
.p-sub-hero {
  padding: 40px 20px 0px !important;
  color: #373232 !important;
}
}