/*
Template:bootstrap-basic4
Theme Name:child-tsunagu
*/

@charset "utf-8";


.content{margin: 50px 8%;}



/* header */

  /* ヘッダー全体のスタイル */
  .header-container {
    position: relative;
    width: 100%;
    height: 800px; /* ヘッダーの高さを調整 */
    overflow: hidden;
  }


  /* TOPページ以外のとき */
  body:not(.home) .header-container {
    height: 100px; /* ヘッダーの高さを小さく */
  }


  /* 背景画像 */
  .header-bg img {
    width: 100%;
    height: 100%;
    /* object-fit: cover; */
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
  }

  /* ロゴとナビゲーションの配置 */
  .header-content {
    position: absolute;
    left: 0;
    right: 0;
    display: flex;
    justify-content: space-between; /* ロゴとナビを両端に配置 */
    align-items: center;
    padding: 0 40px; /* 左右の余白 */
    z-index: 2;
    background-color: #fff;
    height: 60px;
  }

  /* ロゴ */
  .logo img {
    height: 40px;
    background-color: #fff;
  }

  /* ナビゲーションのスタイル */

 
  .nav-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 20px; /* メニュー間の間隔 */
  }

  /* メニューアイテム */
  .nav-menu ul li a {
    text-decoration: none;
    color: black; /* 背景画像の上にあるため白色 */
    font-size: 16px;
    font-weight: bold;
    padding: 10px 15px;
    display: block;
    transition: color 0.3s ease, background-color 0.3s ease;
  }
  .home .nav-menu ul li a {
    color: black; /* TOPページだけ白 */
}

  /* ホバー時のスタイル */
  .nav-menu ul li a:hover {
    color: #333;
    background-color: rgba(255, 255, 255, 0.7); /* ホバー時の背景色 */
    border-radius: 5px;
  }




  /* TOPページ */


  .sub-content {
    margin-top: 50px;
    position: relative; /* 位置を相対的に設定 */
    height: 100%; /* 必要に応じて高さを調整 */
}


    /* ピックアップ */
    /* 見出し（h2）は横並びにならないようにブロック要素のままにする */
    .main-tokusyu h2 {
      margin-bottom: 50px;   /* 見出しの下に余白を追加 */
    }

    /* 4つのボックスを横並びに */
    .tokusyu-container {
      display: flex;        /* 横並びにする */
      flex-wrap: wrap; 
      justify-content: space-between; /* 均等配置（両端に余白） */
      gap: 20px;            /* 各ボックスの間隔 */
      margin: 10px 10%;
    }

    /* 各アイテム（1/4ずつのサイズ） */
    .quarter {
      flex: 1 1 calc(25% - 20px); /* 4分割しつつ間隔を考慮 */
      max-width: 220px;           /* 最大250px */
      text-align: center;
    }

    .quarter p {
      max-width: 100%;        /* 親要素（.quarter）の幅を超えない */
      overflow: hidden;       /* はみ出しを防ぐ */
      margin: 5px 0;          /* 上下に適度な余白 */
    }

    /* 画像を丸くする */
    .rad50 {
      width: 100%;         /* 画像サイズ */
      height: auto;
      aspect-ratio: 1 / 1; 
      object-fit: cover;    /* 画像の比率を維持 */
      border-radius: 50%;   /* 丸くする */
    }

    .activity-link {
      text-decoration: none; /* リンクの下線を削除 */
    }
    
    .activity-title {
      font-size: 16px; /* 文字の大きさ */
      color: black; /* 青色 */
      font-weight: bold; /* 太字 */
      margin-top: 10px;
      text-decoration: none;
    }
    
    .activity-link:hover .activity-title {
      color: gray; /* ホバー時の色 */
      text-decoration: none;
    }
    


    /* 注目の特集 */
    /* グリッド全体の設定 */
    .photo-grid {
      display: flex;
      width: 100%;
      max-width: 1200px;
      /* margin: auto; */
      gap: 10px;
      margin: 50px auto;
    }

    /* 左側の大きな画像（1枚） */
    .photo-large {
      width: 50%;
      position: relative; /* 文字を重ねるために親要素に相対位置 */
    }

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

   

    /* 右側の画像4枚を小さく配置 */
    .photo-right {
      width: 50%;
      display: grid;
      grid-template-columns: repeat(2, 1fr); /* 2列 */
      grid-template-rows: repeat(2, 1fr); /* 2行 */
      gap: 10px;
    }

    .photo-small {
      width: 100%;
      position: relative;
    }

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

    /* 写真のテキスト */
    .photo-large, .photo-small {
      position: relative; /* 親要素に相対位置を指定 */
    }
    
    .text-overlay {
        position: absolute;
        bottom: 10px; /* 画像の下から10px */
        left: 10px; /* 画像の左から10px */
        color: black;
        font-size: 16px; /* 名前の文字サイズ */
        font-weight: bold;
        z-index: 2; /* 画像の上に表示 */
        padding: 5px;
    }
    
    .photo-large img, .photo-small img {
        width: 100%;
        height: auto;
        object-fit: cover; /* 画像が領域を埋めるように */
    }
  






    
    
    /* 左側の大きな画像（メイン投稿1件） */
    .photo-large {
      width: 50%;
      position: relative;
    }
    
    .photo-large img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .text-overlay {
      position: absolute;
      bottom: 3px;
      left: 10px;
      color: black;
      font-size: 18px;
      z-index: 2;
    }
    
    /* 右側の画像（サブ投稿4件）を均等に配置 */
    .photo-right {
      width: 50%;
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      grid-template-rows: repeat(2, 1fr);
      gap: 10px;
    }
    
    .photo-small {
      width: 100%;
      height: 100%;
      position: relative;
    }
    
    .photo-small img {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }
    
    .photo-small .text-overlay {
      position: absolute;
      bottom: 3px;
      left: 10px;
      color: black;
      font-size: 18px;
      z-index: 2;
    }
    
    .sena{font-size: 20px; text-align: center; font-family: Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;}

    





    p {margin-bottom: 0 !important; /* 強制的にボトムマージンをリセット */}

    /* 特集ページ */
    .nav-container{position: relative;width: 100%;height: 100%;}
    .common-header {
      background-image: url('https://kumamoto.guide/stay/img/eye_stay.jpg');
      background-size: cover;
      background-position: center;
      height: 200px;
      display: flex;
      align-items: center;
      justify-content: center;
      color: white;
      text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
    }

    .common-grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr); /* 3列 */
      gap: 20px; /* アイテム間の間隔 */
      max-width: 1200px;
      margin: 0 auto;
      padding: 20px;
    }
    
    .common-item {
        text-align: center;
    }

    .common-item h2 {color: black; font-size: 16px; padding-top: 20px;}
    
    .common-item img {
        width: 100%;
        height: 300px;
        max-width: 300px;
        object-fit: cover;
        border-radius: 50%; /* 角丸 */
    }
    

    /* ページネーション */
    .pagination {
      display: flex;
      justify-content: center;
      margin-top: 30px;
      gap: 10px; /* ボタン間の余白 */
  }
  
  .pagination a,
  .pagination span {
      display: inline-block;
      padding: 10px 15px;
      border: 1px solid #ccc;
      border-radius: 5px;
      color: #333;
      text-decoration: none;
      background-color: #fff;
      transition: background-color 0.3s, color 0.3s;
  }
  
  /* 現在のページ */
  .pagination .current {
      background-color: gray;
      color: #fff;
      border-color: black;
      font-weight: bold;
  }
  
  /* ホバー時 */
  .pagination a:hover {
      background-color: black;
      color: #fff;
  }
  
  /* 前へ・次へボタン */
  .pagination .prev,
  .pagination .next {
      font-weight: bold;
  }
  

    /* 特集詳細ページ */
    .feature-banner img {
      width: 100%;
      height: 800px;
      display: block;
    }
    
    .feature-title {
      position: relative;
      text-align: center;
      margin-top: 20px;
      font-size: 2em;
    }

    .feature-details-content{margin: 50px 20%;}
    


    .feature-spot {
      margin-top: 30px; /* 上に余白を追加（数値は調整可能） */
      padding: 20px; /* 内側の余白 */
    }
    
    .feature-spot h3 {
      position: relative;
      text-align: center; /* タイトルを中央寄せ */
      font-size: 1.8rem; /* タイトルの大きさ調整 */
      font-weight: bold;
      padding: 20px 0; /* タイトルの上下に余白を追加 */
    }
    
    .feature-spot h3::before,
    .feature-spot h3::after {
        content: ""; 
        display: block;
        width: 100%; /* 横幅を100%に設定 */
        height: 3px; /* 線の太さ */
        background-color: #333; /* 線の色 */
        position: absolute;
        left: 0;
    }
    
    .feature-spot h3::before {
        top: -5px; /* タイトルの上に線を配置し、適度な間隔をあける */
    }
    
    .feature-spot h3::after {
        bottom: -5px; /* タイトルの下に線を配置し、適度な間隔をあける */
    }


    .feature-spot p {
      width: 90%; /* 幅を90%に設定 */
      margin: 50px auto; /* 中央揃え */

    }
    .feature-image {
      display: block;
      width: 80%;  /* 通常は80%の幅 */
      max-width: 800px; /* 最大幅（大きすぎる画像を制限） */
      min-width: 400px; /* 最小幅（小さすぎる画像を拡大） */
      height: 500px; /* 高さを固定 */
      object-fit: cover; /* 画像の比率を維持しつつ枠にフィット */
      margin: 20px auto; /* 中央配置 */
    }
    

    /* 観光ページ */
    .spot-banner-wrapper {
      display: grid;
      gap: 10px;
      justify-content: center;
      width: 100%;
      max-width: 100vw;
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    /* ▼1枚だけの場合：横幅100%に表示 */
    .spot-banner-wrapper.count-1 .spot-banner {
        width: 100%;
        height: 500px;
    }
    
    /* ▼2枚以上の場合：全て同じ大きさ */
    .spot-banner-wrapper .spot-banner {
        width: 100%;
        height: 500px;
        overflow: hidden;
    }
    
    /* ✅ 画像サイズを完全固定（横幅500px・高さ500px） */
    .spot-banner img {
        width: 100%;
        height: 500px;
        object-fit: cover;
        object-position: center;
        display: block;
    }
    
    /* ▼2枚以上の場合は自動グリッド分割 */
    .spot-banner-wrapper.count-2 {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .spot-banner-wrapper.count-3 {
        grid-template-columns: repeat(3, 1fr);
    }
    
    .spot-banner-wrapper.count-4 {
        grid-template-columns: repeat(4, 1fr);
    }
    
    .spot-banner-wrapper.count-5 {
        grid-template-columns: repeat(5, 1fr);
    }
    
  
  
    
    /* 全ての画像のスタイル */
    .spot-banner img {
        width: 100%;
        height: 500px;
        object-fit: cover;
        display: block;
    }
  
  
  
    .spot-details-content{margin: 50px 0;}

    .spot-description {
      margin-top: 20px; /* 画像との間に余白を作る */
      font-size: 16px;
      color: #333;
      width: 60%;
      margin-left: auto;
      margin-right: auto;
      text-align: center;
    }


    .spot-table-content{width: 50%;}
    .spot-details-table {
      width: 100%;
      margin: 20px 50%; /* テーブルを中央に配置 */
      border-collapse: collapse;
      font-size:8 16px;
    }
    
    .spot-details-table th,
    .spot-details-table td {
        border: 1px solid #ddd;
        padding: 10px;
        text-align: left;
    }
    
    .spot-details-table th {
        background-color: #f4f4f4;
        width: 20%;
    }
    
    .spot-details-table td {
        width: 100%;
    }
    
    .spot-details-table a {
        color: #0073aa;
        text-decoration: none;
    }
    
    .spot-details-table a:hover {
        text-decoration: underline;
    }
    .spot-kihon {
      text-align: center; /* テキストを中央寄せ */
      font-size: 24px; /* 文字サイズ調整 */
      font-weight: bold; /* 文字を太く */
      margin: 40px auto; /* 上下に余白をつけて中央寄せ */
      display: flex;
      justify-content: center;
      align-items: center;
      width: 100%; /* 横幅を画面いっぱいに */
      position: relative;
  }
  
  .spot-kihon::before,
  .spot-kihon::after {
      content: "";
      flex-grow: 1;
      height: 2px;
      background-color: #ddd; /* 線の色 */
      margin: 0 20px; /* 文字との間隔 */
  }
  
  

  /* エリア */
  .area-content{padding: 20px 10%;}
  .area-images {
    display: grid; /* グリッドレイアウトを使用 */
    grid-template-columns: repeat(2, 1fr); /* 各行に2つの列を設定 */
    grid-template-rows: repeat(2, 1fr); /* 2行を設定 */
  }
  .area-image {
      position: relative;
      overflow: hidden;
      width: 100%;
      height: 100%;
  }
  .area-image img {
      width: 100%; /* 画像を親要素に合わせて伸縮 */
      height: 100%; /* 画像を親要素に合わせて伸縮 */
      object-fit: cover; /* 画像が親要素にフィットするように切り取る */
  }
  .area-text {
    position: absolute; /* 絶対位置に配置 */
    top: 50%; /* 縦方向中央 */
    left: 50%; /* 横方向中央 */
    transform: translate(-50%, -50%); /* 完全な中央揃え */
    font-size: 2rem; /* フォントサイズ調整 */
    font-weight: bold; /* 太字 */
    color: white; /* テキストの色 */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.6); /* 影を付けて視認性向上 */
  }


  /* 加賀エリア */
  .area-page-content{display: flex; justify-content: center; /* 中央揃え */}
  .area-posts {
    display: flex;
    flex-wrap: wrap;
    max-width: 1200px;
    gap: 20px; /* 投稿同士の間隔 */
    padding: 0 20px;
    list-style: none;
  }

  .area-post-item {
      width: calc(33.333% - 20px); /* 3列のレイアウト */
      box-sizing: border-box;
      overflow: hidden;
      text-align: center;
      padding: 10px;
  }
  .area-post-item h2{color: black;}

  .area-post-item img {
      width: 100%;
      height: 300px;
      max-width: 300px;
      object-fit: cover;
      border-radius: 50%;
  }

  .area-post-item h2 {
      font-size: 16px;
      margin-top: 10px;
  }

  /* レスポンシブ対応：画面サイズが小さい場合 */
  @media screen and (max-width: 1024px) {
      .area-post-item {
          width: calc(50% - 20px); /* 2列表示 */
      }
  }

  @media screen and (max-width: 768px) {
      .area-post-item {
          width: 100%; /* 1列表示 */
      }
  }

  
  
  
  
  
  

  

  




    
    /* 投稿なしの時 */
    .no-featured {
      text-align: center;
      padding: 40px 20px;
      background-color: #f2f2f2; /* 明るいグレーの背景 */
      border-radius: 8px; /* 角を丸く */
      box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 影をつけて浮き上がるように */
      margin-top: 20px;
  }
  
  .no-featured-message {
      font-size: 22px;
      font-weight: bold;
      color: #555; /* グレーの文字色 */
      text-transform: uppercase; /* 大文字に */
      letter-spacing: 2px; /* 文字間隔を広げる */
      margin: 0;
      position: relative;
  }
  
  .no-featured-message::before {
      font-size: 30px;
      position: absolute;
      left: -40px; /* アイコンを左に配置 */
      top: 50%;
      transform: translateY(-50%);
      color: #ff4d4d; /* 赤いアイコン */
  }
  



    /* footer */
    .foot-bottom{background-color: beige;}
    .foot-text{color: black; text-align: center;}
  










/* フロントページ NEWS*/