/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 05 2026 | 02:16:53 */
/* =========================================
   1. 共通設定・アニメーション
========================================= */
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes elegantZoomIn {
  0% { opacity: 0; transform: scale(0.8); filter: blur(8px); }
  100% { opacity: 1; transform: scale(1); filter: blur(0); }
}

.zoom-in-text {
  opacity: 0;
  display: block;
  animation: elegantZoomIn 2.0s cubic-bezier(0.2, 1, 0.3, 1) forwards; text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.45);
}

.zoom-delay {
  animation-delay: 0.6s;
}

.zoom-card {
    overflow: hidden;
}
.zoom-card img.wp-block-cover__image-background {
    transition: transform 0.8s ease;
}
.zoom-card:hover img.wp-block-cover__image-background {
    transform: scale(1.1);
}

.tourist-spot {
  filter: brightness(1.1)  /* 25%明るく */
          saturate(1.35)    /* 彩度を35%アップ（青空や緑が鮮やかに） */
          contrast(1.05);    /* コントラストを10%アップ（くっきりした印象に） */
}

.nostalgic-spot {
  filter: brightness(1.2)   /* 20%明るく */
          saturate(1.2)     /* 彩度を20%アップ */
          sepia(0.15);      /* ほんのり15%だけセピア（温かみ）をプラス */
}

/* =========================================
   モダン・ヒーローセクション（明るい背景＆右側表示修正）
========================================= */
.hero-section {
    position: relative;
    width: 100%;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 60px 20px;
    overflow: hidden;
    /* 背景画像：暗くするレイヤーを削除し、写真そのままの明るさに */
    background-repeat: no-repeat;
    background-position: center center; /* 画像の中心を基準にする */
    background-size: cover;             /* 画面いっぱいに広げる */
    background-attachment: fixed;       /* 背景を固定する */
}

/* カード本体：左右が消えないよう、構造を強化 */
.hero-card {
    display: flex;
    flex-direction: row; /* 横並びを明示 */
    flex-wrap: nowrap;   /* 折り返しを禁止 */
    max-width: 1000px; 
    width: 100%;
    /* 背景を明るい写真に馴染ませるため、透過とぼかしを強化 */
    background: rgba(255, 255, 255, 0.7); 
    backdrop-filter: blur(25px); /* ぼかしを強めて視認性を確保 */
    -webkit-backdrop-filter: blur(25px);
    border-radius: 40px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.15); /* 影を少し柔らかく */
    
    opacity: 0;
    transform: translateY(30px);
    animation: modernEntrance 1.2s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

@keyframes modernEntrance {
    to { opacity: 1; transform: translateY(0); }
}

/* 左側セクション：幅を柔軟に */
.hero-card-left {
    flex: 1 1 50%; /* 半分の幅を基準に */
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: transparent !important;
}

.hero-subtitle {
    font-size: 1.2rem;
    color: #C0392B;
    font-weight: 800;
    letter-spacing: 4px;
    margin-bottom: 10px;
}

.hero-main-title {
    font-size: 3.2rem;
    color: #2C3E50;
    font-weight: 900;
    line-height: 1.1;
    margin-bottom: 20px;
}

.hero-price-tag {
    font-size: 1.8rem;
    font-weight: 700;
    color: #2C3E50;
    display: flex;
    align-items: center;
    gap: 15px;
}
.hero-price-tag::before {
    content: "";
    width: 30px;
    height: 4px;
    background-color: #C0392B;
}

/* 右側セクション：絶対に縮小・消失させない設定（重要） */
.hero-card-right {
    flex: 0 0 45%; /* 右側の幅を固定（45%） */
    min-width: 350px; /* 最小幅を350px確保 */
    padding: 60px 50px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background: rgba(44, 62, 80, 0.05) !important; /* 右側だけ極薄く色付けして境界を出す */
    border-left: 1px solid rgba(0, 0, 0, 0.05);
}

.hero-list {
    list-style: none;
    padding: 0;
    margin: 0 0 35px 0;
    display: block !important; /* 消えるのを防止 */
}

.hero-list li {
    font-size: 1.1rem;
    color: #34495E;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap; /* テキストの改行を防いで表示を安定させる */position: relative;
    padding-left: 1.8rem; /* チェックマークのスペースを確保 */
    list-style: none;
}

.hero-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 1.2rem;
    height: 1.2rem;
    /* モダンな細身のチェックアイコン */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23C0392B' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m4.5 12.75 6 6 9-13.5' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* ボタン */
.hero-cta {
    display: inline-block;
    text-decoration: none;
    text-align: center;
    padding: 18px 40px;
    background: #C0392B;
    color: #FFF9ED !important;
    border-radius: 15px;
    font-size: 1.1rem;
    font-weight: 700;
    box-shadow: 0 10px 25px rgba(192, 57, 43, 0.3);
    transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}

.hero-cta:hover {
    background-color: #2C3E50;
    transform: translateY(-5px);
}

/* ul要素自体のデフォルトの余白をリセット */
ul.aboutus-list {
    list-style: none;
    padding: 0;
    margin: 0 0 35px 0;
}

/* リストアイテムの修正 */
.aboutus-list li {
    font-size: 0.9rem; /* 読みやすさのため少しだけ大きく（0.8rem → 0.9rem） */
    color: #34495E;
    margin-bottom: 15px;
    display: flex;
    align-items: flex-start; /* leftからflex-startに修正し、複数行の先頭に合わせる */
    font-weight: 600;
    line-height: 1.5;
    white-space: normal; /* 【重要】nowrapをnormalに変更して改行を許可 */
    position: relative;
    padding-left: 2rem; /* 【重要】マイナス値をやめ、アイコン用のスペースを正の値で確保 */
}

/* チェックマークアイコンの修正 */
.aboutus-list li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0.15rem; /* 複数行になった際、1行目のテキストの高さに合うように位置を調整 */
    /* transform: translateY(-50%); は削除 */
    width: 1.2rem;
    height: 1.2rem;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23C0392B' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m4.5 12.75 6 6 9-13.5' /%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

/* =========================================
   スマートフォン対応
========================================= */
@media (max-width: 900px) {
    .hero-card {
        flex-direction: column; /* スマホでは縦に並べる */
        max-width: 100%;
        border-radius: 25px;
    }
    .hero-card-left {
        padding: 40px 30px;
        text-align: center;
    }
    .hero-main-title { font-size: 2.5rem; }
    .hero-price-tag { justify-content: center; }

    .hero-card-right {
        flex: none;
        width: 100%;
        min-width: 0;
        padding: 30px 30px 40px;
        border-left: none;
        border-top: 1px solid rgba(0,0,0,0.05);
    }
    .hero-cta { width: 100%; }
}

/* =========================================
   2. 日程＆ギャラリーセクション
========================================= */
.itinerary-container {
  display: flex;
  flex-wrap: wrap;
  gap: 50px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 60px 20px;
  font-family: sans-serif;
}

.itinerary-left, .itinerary-right {
  flex: 1 1 400px;
}

.itinerary-title {
  color: #2C3E50;
  font-size: 3rem;
  font-weight: bold;
  margin-bottom: 30px;
  letter-spacing: 2px;
}

/* =========================================
   日程カード（ホバー前とホバー後の完全指定）
========================================= */

/* 1. ホバー前（背景：白系、文字：紺色） */
.day-card {
  background-color: #FAFAFA !important;
  color: #2C3E50 !important;
  border-radius: 12px;
  padding: 12px 20px;
  margin-bottom: 15px;
  cursor: pointer;
  box-shadow: 0 4px 10px rgba(0,0,0,0.05);
  transition: all 0.4s ease;
}

/* カード内のすべての要素（ヘッダー、バッジ、リストなど）も強制的に紺色にする */
.day-card *,
.day-card .day-card-header,
.day-card .day-badge,
.day-card .day-card-details ul li {
  color: #2C3E50 !important;
  transition: color 0.4s ease;
}

/* 2. ホバー後（背景：紺色） */
.day-card:hover {
  background-color: #2C3E50 !important;
}

/* ホバー時は中の文字をすべてベージュに変える */
.day-card:hover *,
.day-card:hover .day-card-header,
.day-card:hover .day-badge,
.day-card:hover .day-card-details ul li {
  color: #fff9ed !important;
}

/* =========================================
   カードのレイアウト設定（変更なし）
========================================= */
.day-card-header {
  display: flex !important;
  align-items: center !important;
  gap: 15px;
  font-size: 1.1rem;
  font-weight: bold;
}

.day-card-header span {
  margin: 0 !important;
  line-height: 1.2 !important;
}

.day-card-details {
  max-height: 0;
  overflow: hidden;
  transition: all 0.4s ease;
}

.day-card:hover .day-card-details {
  max-height: 500px;
  margin-top: 15px;
}

/* ギャラリー全体のグリッド設定 */
.gallery-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
  width: 100%;
}

/* 枠（コンテナ）の設定 */
.gallery-item {
  position: relative;
  width: 100%;
  height: 300px; /* ここで高さを固定 */
  border-radius: 12px;
  overflow: hidden; /* ズームした時のはみ出しをカット */
  cursor: pointer;
  /* テーマによる余計な余白をリセット */
  margin: 0 !important;
  padding: 0 !important;
}

/* 写真を枠に強制的に合わせる設定 */
.gallery-img {
  /* 絶対配置にして枠の隅々まで広げる */
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  /* 写真を歪ませず、枠に合わせて自動トリミング */
  object-fit: cover !important;
  /* テーマの干渉（最大幅制限など）をすべて無効化 */
  max-width: none !important;
  max-height: none !important;
  min-width: 100% !important;
  min-height: 100% !important;
  
  display: block;
  transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);
  z-index: 1;
}

/* ホバー時のズーム演出 */
.gallery-item:hover .gallery-img {
  transform: scale(1.1);
}

/* ホバー時の赤いオーバーレイ */
.gallery-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(192, 57, 43, 0.85); /* 視認性を上げました */
  color: #fff9ed;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  font-size: 1.2rem;
  opacity: 0;
  transition: opacity 0.4s ease;
  z-index: 2; /* 写真の上に配置 */
}

.gallery-item:hover .gallery-overlay {
  opacity: 1;
}

/* =========================================
   3. 見積もり（QUOTATION）セクション - 縦並び・高精度版
========================================= */
.quotation-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px 80px;
  font-family: sans-serif;
}

.quotation-card {
  display: flex;
  flex-wrap: wrap;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 15px 40px rgba(0, 0, 0, 0.12);
  background-color: #FAFAFA;
  align-items: stretch; /* 左右の高さを自動で一致させる */transition: transform 0.4s cubic-bezier(0.25, 1, 0.5, 1), 
              box-shadow 0.4s ease;
  cursor: pointer; /* カーソルを指マークにして反応することを示す */
}

.quotation-card:hover {
  transform: translateY(-10px); /* 10px上に浮き上がる */
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.2); /* 影を広げて浮遊感を出す */
}

/* 左側：金額セクション */
.quotation-left {
  flex: 1 1 400px;
  background-color: #C0392B;
  color: #fff9ed !important;
  padding: 50px 50px; /* 余白を戻して高さを確保 */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.quotation-title {
  font-size: 2.5rem;
  font-weight: 800;
  margin-bottom: 10px;
  letter-spacing: 2px;
}

.quotation-price {
  font-size: 2.2rem;
  font-weight: 700;
  margin: 0;
}

/* 右側：内容セクション（縦並び構成） */
.quotation-right {
  flex: 1.5 1 500px;
  background-color: #FAFAFA;
  padding: 50px 50px; /* 余白を広げてカードを高くする */
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.included-title {
  font-size: 1.4rem;
  font-weight: 800;
  margin-bottom: 25px; /* タイトル下の余白 */
  color: #C0392B;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  display: inline-block;
  padding-bottom: 5px;
}

.included-list li {
  font-size: 1.1rem;
  font-weight: 700;
  color: #C0392B;
  margin-bottom: 10px; /* リスト間の余白をしっかり取る */
  display: flex;
  align-items: center;
  line-height: 1.4;

  /* 👇 ここから3行を追加（hero-listと同じ土台を作る） */
  position: relative;
  padding-left: 1.8rem; /* チェックマークのスペースを確保 */
  list-style: none;
}

/* チェックマーク */
.included-list li::before {
  /* 👇 ここから中身をhero-listと完全に同じに書き換え */
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 1.2rem;
  height: 1.2rem;
  /* モダンな細身のチェックアイコン */
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23C0392B' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='m4.5 12.75 6 6 9-13.5' /%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

/* スマホ対応 */
@media (max-width: 900px) {
  .quotation-card {
    flex-direction: column;
  }
  .quotation-left, .quotation-right {
    padding: 40px 30px;
    flex: none;
    width: 100%;
  }

/* --- 修正済み：レスポンシブ設定と閉じカッコ --- */
@media (max-width: 900px) {
    .hero-card { flex-direction: column; max-width: 100%; border-radius: 25px; }
    .hero-card-left { padding: 40px 30px; text-align: center; }
    .hero-main-title { font-size: 2.5rem; }
    .hero-price-tag { justify-content: center; }
    .hero-card-right { flex: none; width: 100%; min-width: 0; padding: 30px 30px 40px; border-left: none; border-top: 1px solid rgba(0,0,0,0.05); }
    .hero-cta { width: 100%; }
    
    .quotation-card { flex-direction: column; }
    .quotation-left, .quotation-right { padding: 40px 30px; flex: none; width: 100%; }
    
    .contact-page-wrapper { flex-direction: column; }
    .itinerary-container { flex-direction: column; }
}

/* --- 前のセクションの閉じ忘れを強制終了 --- */
} 

/* =========================================
   NEW: Single Card Form Design (Final)
========================================= */

/* 外側のラップ：ここを確実に表示させる */
.simple-wrapper {
    display: flex !important;
    background-color: #FDFDFD !important;
}

/* メインの角丸カード：!importantでテーマの干渉を防止 */
.single-form-card {
    display: block !important;
    max-width: 850px !important;
    width: 100% !important;
    background: #ffffff !important; /* 確実に白く表示 */
    border-radius: 40px !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.1) !important;
    padding: 60px !important;
    box-sizing: border-box !important;
    animation: fadeInUp 1.2s ease forwards !important; margin-top: 35px;
}

/* タイトルとテキスト */
.form-main-title {
    display: block !important;
    font-size: 2.4rem !important;
    color: #2C3E50 !important;
    font-weight: 900 !important;
    text-align: center !important;
    margin-bottom: 3px !important;
}

.form-subtitle {
    display: block !important;
    text-align: center !important;
    color: #7F8C8D !important;
    margin-bottom: 10px !important;
}

/* 各入力項目のラベル */
.field-label {
    display: block !important;
    font-size: 0.9rem !important;
    font-weight: 700 !important;
    color: #2C3E50 !important;
    margin-bottom: 0px !important;
}

/* 入力ボックスの装飾（テーマの細い線を上書き） */
.single-form-card input[type="text"],
.single-form-card input[type="date"] {
    width: 100% !important;
    padding: 16px 25px !important;
    border: 2px solid #edf2f7 !important;
    border-radius: 15px !important;
    font-size: 0.7rem !important;
    background-color: #f9f9f9 !important;
    color: #2C3E50 !important;
    box-sizing: border-box !important; margin-bottom: 15px !important;
}

/* 日程エリアの横並び */
.date-range-inputs {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

.date-input-wrap { flex: 1 !important; }

.date-separator {
    margin-top: 25px !important;
    color: #BDC3C7 !important;
    font-size: 1.5rem !important;
}

/* 送信ボタン（重要：WordPressのデフォルトを上書き） */
.form-footer { margin-top: 50px !important; text-align: center !important; }

.form-footer input.hero-cta {
    background-color: #C0392B !important;
    color: #ffffff !important;
    border: none !important;
    padding: 20px 60px !important;
    border-radius: 15px !important;
    font-weight: 700 !important;
    cursor: pointer !important;
    transition: all 0.4s ease !important;
}

.form-footer input.hero-cta:hover {
    background-color: #2C3E50 !important;
    transform: translateY(-5px) !important;
}

/* スマホ対応 */
@media (max-width: 768px) {
    .single-form-card { padding: 40px 20px !important; }
    .date-range-inputs { flex-direction: column !important; align-items: stretch !important; }
    .date-separator { display: none !important; }
    .form-footer input.hero-cta { width: 100% !important; }
}

/* Requiredバッジのスタイル修正 */
.required-badge {
    background-color: #C0392B !important; /* 深みのある赤 */
    color: #ffffff !important;           /* 白文字 */
    font-size: 0.7rem !important;        /* 少し小さめでスタイリッシュに */
    font-weight: 700 !important;
    padding: 3px 10px !important;       /* 上下左右の余白 */
    border-radius: 50px !important;      /* カプセル型の丸み */
    margin-left: 10px !important;        /* ラベルとの間隔 */
    display: inline-block !important;
    vertical-align: middle !important;
    text-transform: uppercase !important; /* 文字を大文字にしてプロっぽく */
    letter-spacing: 0.5px !important;    /* 字間を少し広げる */
    box-shadow: 0 2px 5px rgba(192, 57, 43, 0.2) !important; /* 軽い影で浮かせる */
}

/* Special Requests (textarea) を他の項目と統一 */
.single-form-card textarea {
    width: 100% !important;
    /* 縦の長さを長めに設定（お好みで調整してください） */
    min-height: 200px !important; 
    padding: 18px 25px !important;
    border: 2px solid #edf2f7 !important;
    border-radius: 15px !important;
    font-size: 1rem !important;
    background-color: #f9f9f9 !important;
    color: #2C3E50 !important;
    box-sizing: border-box !important;
    font-family: inherit !important; /* フォントを統一 */
    transition: all 0.3s ease !important; margin-top: 10px;
}

/* 入力中の枠線色（他の項目と合わせる） */
.single-form-card textarea:focus {
    border-color: #C0392B !important;
    background-color: #ffffff !important;
    outline: none !important; margin-top: 10px;
}

/* 全体のレイアウト設定 */
.contact-page-wrapper {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    align-items: flex-start;
    margin: 0px 30px;
}

/* 左半分（フォーム）と右半分（カード）の幅設定 */
.contact-section-left { flex: 1.5; } /* こっちを大きく */
.contact-section-right { flex: 1; }

/* 右側カードのデザイン */
.service-flow-card {
    display: block !important;
    max-width: 850px !important;
    width: 100% !important;
    background: #2C3E50 !important; /* 確実に白く表示 */
    border-radius: 40px !important;
    border: 1px solid rgba(0, 0, 0, 0.05) !important;
    box-shadow: 0 40px 100px rgba(0, 0, 0, 0.1) !important;
    padding: 40px !important;
    box-sizing: border-box !important;
    animation: fadeInUp 1.2s ease forwards !important; margin-top: 35px; 
}

.flow-title {
    display: block !important;
    font-size: 2.4rem !important;
    color: #ffffff !important;
    font-weight: 900 !important;
    text-align: center !important;
    margin-bottom: 10px !important;
    border-bottom: 2px solid #FFCC00; 
    padding-bottom: 10px;
}

/* 各ステップのスタイル */
.flow-item {
    display: flex;
    margin-bottom: 20px;
    align-items: flex-start; 
}

.flow-number {
    background: #FFCC00;
    color: #2C3E50;
    font-weight: bold;
    min-width: 35px;
    height: 35px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    font-size: 0.9rem;
}

.flow-content p {
    margin: 0;
    line-height: 1.6;
    color: #ffffff;
}

.flow-note {
    font-size: 0.85rem;
    color: #ffffff;
    margin-top: 5px !important;
}

.flow-contact-info {
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px dashed #FFCC00;
    text-align: center;
    font-style: italic;
    color: #ffffff;
}

/* レスポンシブ調整：画面が狭い時 */
@media (max-width: 768px) {
    .contact-page-wrapper {
        flex-direction: column;
    }
    .contact-section-left, 
    .contact-section-right {
        width: 100%;
    }
}

/* 1. 元の緑色の枠線とスタイルをリセット */
.wpcf7-response-output {
    border: none !important; /* 緑の枠を消す */
    margin: 20px 0 0 0 !important;
    padding: 0 !important;
}

/* 2. 送信成功メッセージのモダンなデザイン */
.wpcf7-mail-sent-ok {
    background-color: #f0fff4; /* 非常に薄い緑（清潔感） */
    color: #276749; /* 濃い緑の文字 */
    padding: 15px 20px !important;
    border-radius: 8px !important; /* 角丸 */
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); /* 軽い影で浮遊感 */
    font-weight: 500;
    text-align: center;
    
    /* 3. モダンなアニメーション（ふわっと表示） */
    animation: fadeInUp 0.5s ease-out forwards;
}

/* アニメーションの定義 */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px); /* 下から上に動く */
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* エラー時のデザインもモダンに統一（オプション） */
.wpcf7-validation-errors, 
.wpcf7-acceptance-missing, 
.wpcf7-aborted, 
.wpcf7-spam-blocked {
    background-color: #fff5f5 !important;
    color: #c53030 !important;
    border: none !important;
    padding: 15px 20px !important;
    border-radius: 8px !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05) !important;
    animation: fadeInUp 0.5s ease-out forwards;
}

/* 世界遺産セクション全体のスタイル */
.custom-heritage-section {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 20px;
  box-sizing: border-box;
}

/* ① 小見出し */
.heritage-title {
  color: #C0392B;
  font-size: 2.2em;
  text-align: right;
  margin-bottom: 40px;
}

.culture-title {
  color: #C0392B;
  font-size: 2.2em;
  text-align: left;
  margin-bottom: 40px;
}

/* ② カード全体 */
.heritage-card {
  display: flex;
  width: 100%;
  min-height: 400px; /* カードの最低限の高さを確保 */
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  margin-bottom: 40px;
  background-color: #ffffff;
}

/* カード左側（説明文＋ボタン）: 幅を1とする（全体で1/3） */
.heritage-text-area {
  flex: 1;
  padding: 40px;
  display: flex;
  flex-direction: column; /* 縦並びに配置 */
  justify-content: space-between; /* 上のテキストと下のボタンを引き離す */
  align-items: flex-start; /* 左寄せにする */ background-color: #ffffff;
}

.heritage-text-content p {
  color: #838380;
  line-height: 1.6;
}

/* カード右側（写真・ショートコード）: 幅を2とする（全体で2/3） */
.heritage-image-area {
  flex: 2;
  background-color: #e0e0e0;
  position: relative; /* 画像をいっぱいに広げるための基準点 */
}

/* ショートコードで出力される画像を枠に合わせる処理 */
.heritage-image-area img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  top: 0;
  left: 0;
}

/* ③ View More ボタン */
.heritage-view-more {
  display: inline-block;
  background-color: #C0392B;
  color: #FFF9ED;
  padding: 20px 40px;
  border-radius: 30px;
  text-decoration: none;
  font-weight: bold;
  font-size: 1.1em;
  transition: opacity 0.3s ease;
  margin-top: 20px; /* テキストと近すぎる場合の余白 */
}

.heritage-view-more:hover {
  opacity: 0.8;
  color: #FFF9ED;
}

/* ==== アニメーション用の設定 ==== */
.fade-element {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 1.2s ease, transform 1.2s ease;
}

.fade-element.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.fade-element.delay-card {
  transition-delay: 0.5s;
}

/* ==== スマホ表示（レスポンシブ）対応 ==== */
@media screen and (max-width: 768px) {
  .heritage-card {
    flex-direction: column-reverse; /* スマホでは説明文＆ボタンを下、画像を上にする */
  }
  .heritage-text-area,
  .heritage-image-area {
    flex: none;
    width: 100%;
  }
  .heritage-image-area {
    height: 300px; /* スマホでの画像の高さを固定 */
    position: relative;
  }
}

/* ==========================================
   Attraction by seasonセクション全体のレイアウト
   ========================================== */
.season-attraction-section {
  max-width: 1200px; /* 全体の最大幅 */
  margin: 0 auto;
  padding: 20px 20px;
  overflow: hidden; /* スクロール時の横揺れ・はみ出し防止 */
}

/* ① 小見出しの基本スタイルとアニメーション初期状態 */
.season-heading {
  color: #C0392B;
  text-align: right;
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 35px;
  
  /* スクロール前の状態（不透明度0、少し下に配置） */
  opacity: 0;
  transform: translateY(30px);
  /* 0.2秒遅れて1秒かけてフェードイン */
  transition: opacity 1s ease 0.2s, transform 1s ease 0.2s;
}

/* ② 4枚のカードコンテナ（横並び設定） */
.cards-container {
  display: flex;
  gap: 20px;
  flex-wrap: wrap; /* スマホ時に自動で折り返す */
}

/* ==========================================
   カードの基本スタイルとフェードイン初期状態
   ========================================== */
.season-card {
  flex: 1 1 calc(25% - 15px); /* 4分割から隙間分を引く */
  min-width: 240px; /* スマホ時の縦並びのトリガーとなる最小幅 */
  height: 400px; /* カードの高さ */
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  display: block;
  text-decoration: none; /* リンクの下線を消す */
  
  /* スクロール前の状態（不透明度0、左側に配置） */
  opacity: 0;
  transform: translateX(-50px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* ==========================================
   カードが左から順番に時間差で表示される設定
   ========================================== */
.season-card.is-visible:nth-child(1) { transition-delay: 0.6s; }
.season-card.is-visible:nth-child(2) { transition-delay: 0.8s; }
.season-card.is-visible:nth-child(3) { transition-delay: 1.0s; }
.season-card.is-visible:nth-child(4) { transition-delay: 1.2s; }

/* ==========================================
   スクロール時にJavaScriptでクラスが付与された後の状態
   ========================================== */
.season-heading.is-visible,
.season-card.is-visible {
  opacity: 1;
  transform: translate(0, 0);
}

/* ==========================================
   カードの内部（写真・レイヤー・テキスト）
   ========================================== */
/* 背景写真 */
.card-bg {
  position: absolute;
  top: 0; left: 0; width: 100%; height: 100%;
  background-size: cover;
  background-position: center;
  z-index: 1;
  /* ズームイン時のアニメーション速度 */
  transition: transform 0.6s ease;
}

/* 下部4分の1の暗いレイヤー（グラデーションで自然に） */
.card-overlay {
  position: absolute;
  bottom: 0; left: 0; width: 100%; height: 40%;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.55) 0%, rgba(0, 0, 0, 0) 100%);
  z-index: 2;
}

/* テキスト（#FFF9ED） */
.card-content {
  position: absolute;
  bottom: 0; left: 0; width: 100%;
  padding: 24px;
  box-sizing: border-box;
  color: #FFF9ED;
  z-index: 3;
}

.card-content h3 {
  color: #FFF9ED;
  margin: 0 0 8px 0;
  font-size: 1.5rem;
  font-weight: bold;
}

.card-content p {
  color: #FFF9ED;
  margin: 0;
  font-size: 0.95rem;
  opacity: 0.9;
}

/* ==========================================
   マウスホバー時のズームイン
   ========================================== */
.season-card:hover .card-bg {
  transform: scale(1.12); /* 1.12倍に拡大 */
}

/* Attraction by Area 全体レイアウト */
.attraction-section {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px 20px;
  overflow: hidden;
}

/* ① 小見出しのデザイン */
.attraction-heading {
  color: #C0392B;
  text-align: left;
  font-size: 2rem;
  font-weight: bold;
  margin-bottom: 0px;
}

/* 新しく作ったコンテナを位置の基準にする */
.map-container {
  position: relative;
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}

/* 英文テキストのデザイン */
.map-container .attraction-subtext {
  position: absolute;
  top: 10px;
  left: 200px;
  z-index: 10;
  color: #838380 !important;
  font-size: 25px;
  text-align: left;
  margin: 5px;
  max-width: 500px;
  line-height: 1.4;
  transform: translateX(-30px);
}

/* ② 日本地図コンテナ */
.japan-map-wrapper {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

/* --- アニメーション設定 --- */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}
.fade-in.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* 表示のタイミングをずらす */
.step-1 { transition-delay: 0.2s; } /* 見出し */
.step-2 { transition-delay: 0.6s; } /* 地図 */
.step-3 { transition-delay: 1.0s; } /* 英文テキスト */

.map-container .attraction-subtext.is-visible {
  transform: translateX(0);
}

/* ポップアップ写真の共通スタイル */
.popup-photo {
  position: absolute;
  border-radius: 50%;
  overflow: hidden;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
  
  /* 初期状態（非表示・サイズ0） */
  opacity: 0;
  transform: scale(0);
  
  /* シャキッと動く高速アニメーション */
  transition: opacity 0.3s ease-out, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}

/* 表示された時の状態 */
.popup-photo.is-visible {
  opacity: 1;
  transform: scale(1);
}

.popup-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 層ごとのサイズ設定（数字が小さい方がz-indexを高くし、上に重なるようにしています） */
.layer-1 { width: 200px; height: 200px; z-index: 7; }
.layer-2 { width: 150px; height: 150px; z-index: 6; }
.layer-3 { width: 250px; height: 250px; z-index: 5; }


/* ==========================================
   各写真の位置 ＆ 0.1秒間隔の超高速連鎖ディレイ
   ========================================== */

/* ① photo-1: マップ右上・大サイズ */
.photo-1 {
  top: 10px;
  right: 0px;
  transition-delay: 1.1s; /* 英文(1.0s)の直後 */
}

/* ② photo-2: マップ中心の上・中サイズ */
.photo-2 {
  top: 150px;
  left: calc(50% - 125px); /* 1200pxの中央から写真の半径分左へ寄せる */
  transition-delay: 1.2s;
}

/* ③ photo-3: ①の下部に重なる・小サイズ */
.photo-3 {
  top: 270px;
  right: 90px; /* ①の内側（左下側）に潜り込ませて重ねる */
  transition-delay: 1.3s;
}

/* ④ photo-4: マップ左側・中サイズ */
.photo-4 {
  top: 130px;
  left: 80px;
  transition-delay: 1.4s;
}

/* ⑤ photo-5: マップ左下・小サイズ */
.photo-5 {
  top: 260px;
  left: 200px;
  transition-delay: 1.5s;
}


/* ==========================================
   レスポンシブ対応（スマホ画面での崩れ防止）
   ========================================== */
@media (max-width: 768px) {

  /* ① 「Click on each region...」のテキストを非表示 */
  .map-container .attraction-subtext {
    display: none !important;
  }

  /* ② コンテナの余白（地図の形に合わせて少し減らしています） */
  .map-container {
    padding-top: 30px;
    padding-bottom: 30px;
  }

  /* ③ 写真のサイズ（スマホ用に縮小） */
  .layer-1 { width: 65px; height: 65px; } 
  .layer-2 { width: 85px; height: 85px; }
  .layer-3 { width: 120px; height: 120px; }

  /* ④ 各写真の位置（左上に3つ、右下に2つ） */

  /* --- 左上のグループ（3枚） --- */
  .photo-1 {
    top: 30px;
    left: 2%;
    right: auto; /* PC版のright指定を解除 */
  }
  .photo-4 {
    top: 160px;
    left: 0%;
  }
  .photo-2 {
    top: 35px;
    left: 40%;
  }

  /* --- 右下のグループ（2枚） --- */
  .photo-3 {
    top: auto; /* PC版のtop指定を解除 */
    bottom: 120px;
    right: 30%;
  }
  .photo-5 {
    top: auto; /* PC版のtop指定を解除 */
    left: auto; /* PC版のleft指定を解除 */
    bottom: 180px;
    right: 0%;
  }
}