@media (max-width: 600px) {
    
}



body{
    padding: 0;
    margin: 0;
    font-family: sans-serif;
    line-height: 1.6;
}

#sticky-header {
    position: fixed;
    top: 0;
    width: 100%;
    height: 7vh;
    background-color: white;
    color: white;
    text-align: center;
    padding: 12px 0;
    font-size: 20px;
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s ease;
    z-index: 1000;
    pointer-events: none; /* hoverを無効化（不要なら削除） */
    display: flex;
  }
  
#sticky-header.show {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.headerLogo{
    height: auto;
    width: 40%;
    flex-shrink: 0;     /* ← 縮まないようにするのがポイント！ */
    object-fit: contain;  /* 必要に応じて切り抜き表示も可能 */
}

.childeHeaderLogo{
    width: 90%;
}

@media (max-width: 600px) {
    #sticky-header{
        flex-direction: column;
        height: auto;
    }
    .headerLogo{
        width: 90%;
        margin-bottom: 10px;
    }
}

.header-buttons{
    display: flex;
    gap: 30px;
    flex-wrap: wrap;       /* スマホで折り返しOK */
    justify-content: center;
    align-items: center;
    margin: 0 0 0 15%;
    flex-direction: row;
    width: 90%;
    left: 0;
}

.header-button {
    text-decoration: none;
    padding: 8px 35px;
    border-radius: 28px;
    background: #f29a76;
    color: white;
    font-weight: bold;
    font-size: 14px;
    background: linear-gradient(135deg, #ffe066, #ff8c42); /* ← ここがポイント！ */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
  }
  
  .header-button:hover {
    background: #da4b04;
    transform: translateY(-2px);
  }

@media (max-width: 600px) {
    .header-buttons{
        gap: 20px;
        margin: 0;
    }
    .header-button{
        font-size: 10px;
    }
}

/*renkunここから*/

.support-widget {
    position: fixed;
    right: 20px;
    bottom: 50px;
    width:  200px;
    display: flex;               /* ← displayを明示 */
    flex-direction: column;
    align-items: center;
    gap: .6rem;
    z-index: 9999;               /* ← 前面に引き上げ */
    opacity: 0;
    transform: translateY(12px) scale(.98);
    pointer-events: none;
    transition: opacity .6s ease, transform .6s cubic-bezier(.22,1,.36,1);
  }
  .support-widget.is-active {
    opacity: 1;
    transform: translateY(0) scale(1);
    pointer-events: auto;
  }
  /* 以降（吹き出し/ボタン/イラスト/ダークモード/PRM）は前回のままでOK */
  .speech-bubble{ position:relative; background:#fff; border:1px solid #e5e7eb; border-radius:12px; padding:.8rem; text-align:center; box-shadow:0 6px 16px rgba(0,0,0,.12); font-size: 1rem; line-height:1.5; }
  .speech-bubble::after{ content:""; position:absolute; bottom:-10px; left:50%; transform:translateX(-50%); border:10px solid transparent; border-top-color:#fff; }
  .speech-bubble::before{ content:""; position:absolute; bottom:-12px; left:50%; transform:translateX(-50%); border:12px solid transparent; border-top-color:#e5e7eb; }
  .support-btn{
    text-decoration: none;
    padding: 8px 15px;
    border-radius: 28px;
    background: #f29a76;
    color: white;
    font-weight: bold;
    font-size: 14px;
    background: linear-gradient(135deg, #ffe066, #ff8c42); /* ← ここがポイント！ */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, box-shadow 0.2s; }
  .support-btn:hover{ 
    background: #da4b04;
    transform: translateY(-2px); }
  .support-figure{ margin:0; width:70%; }
  .support-figure img{ width:100%; height:auto; display:block; transform-origin:50% 100%; }
  .support-widget.is-active .support-figure img{
    animation: floatY 3.6s ease-in-out infinite alternate,
               tilt   6s   ease-in-out infinite alternate;
  }
  @keyframes floatY { from{ transform:translateY(0);} to{ transform:translateY(-6px);} }
  @keyframes tilt   { from{ rotate:0deg;} to{ rotate:-.8deg;} }
  @media (prefers-reduced-motion: reduce){
    .support-widget{ transition:none; transform:none; }
    .support-widget.is-active{ opacity:1; }
    .support-figure img{ animation:none !important; }
  }

  .support-figure img {
    width: 100%;
    height: auto;
    display: block;
    transform-origin: 50% 100%;
    animation: floatY 6s ease-in-out infinite alternate,
               tilt   10s ease-in-out infinite alternate; /* 2つの動き */
  }
  
  @keyframes floatY {
    from { transform: translateY(0); }
    to   { transform: translateY(-6px); }
  }
  
  @keyframes tilt {
    from { rotate: 0deg; }
    to   { rotate: -1deg; }
  }

  @media (max-width: 600px) {
    .support-widget {
        width: 70px;
        bottom: 40px;

    }
    .speech-bubble{
        display: none;
    }

  }

/*renkunここまで*/

.background{
    position: fixed;
    background-image: url('img/background.png');
    background-size: cover;                  /* 要素いっぱいに表示 */
    background-position: center;             /* 中央寄せ */
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.box_up{
    position: fixed;
    top: 0;
    left: 0;
    width: 180px;
    height: 70vh;
    background-color: #fce5ce;
    z-index: 10;
}

.box_down{
    position: fixed;
    left: 0;
    top: 70vh;
    width: 180px;
    height: 30vh;
    background-color: #e7c1da;
    z-index: 10;
}

.box_left{
    position: fixed;
    top: 0;
    left: 180px;
    width: 1000px;
    height: 120px;
    background-color: #bae1e1;
    z-index: 10;
}

.box_right{
    position: fixed;
    top: 0;
    height: 120px;
    background-color: #b2c3e4;
    right: 240px;
    min-width: 0;     
    width: 500px;
    z-index: 10;
}

.square{
    position: fixed;
    height: 120px;
    top: 0;
    aspect-ratio: 1 / 1; /* 正方形に保つ */
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 4px;
    font-size: 20px;
    color: white;
    z-index: 10;
}

.fb_icon{
    background-color: white;
    right: 120px;
    z-index: 10;
}

.hamberger{
    background-color: white;
    right: 0;
    z-index: 10;
}

@media (max-width: 600px) {
    .box_down,
    .box_left,
    .box_right,
    .box_up,
    .fb_icon,
    .hamberger,
    .spuare{
        display: none;
    }
}

.header{
    position: absolute;
}

.center{
    position: absolute;
}

.footer{
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 30px;
    color: #222;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 999;
    background-color: aliceblue;
}

@media (max-width: 600px) {
    
}

.sideBanner{
    top: 0;
    left: 0;
}

.main{
    position: relative;
    z-index: 100;
    width: 70vw;
    height: auto;
    min-height: 100vh;
    top: 0;
    left: 150px;
    margin-top: 0;
    padding-top: 0;
}

@media (max-width: 600px) {
    .main{
        margin: 0 auto;
        left: 0;
        width: 95vw;
    }
}

.top{
    height: 100vh;
}

@media (max-width: 600px) {
    .top{
        height: auto;
    }
}


.logoSet{
    margin-top: 50px;
    margin-bottom: 50px;
    width: 80vw;
}

@media (max-width: 600px) {
    .logoSet{
        margin-top: 20px;
        margin-bottom: 10px;
    }
}

.logoLeft{
    width: auto;
    display: inline-block;
}

.logoIbaraki{
    font-family: 'Potta One', sans-serif;
    font-size: 50px;
    margin: 0;
}

@media (max-width: 600px) {
    .logoIbaraki{
        font-size: 20px;
    }
}

.unei{
    right: 0;
    margin: 0;
    text-align: right;
}

@media (max-width: 600px) {
    .unei{
        font-size: 10px;
    }
}


.logoRight{
    display: inline-block;
}

.logo{
    font-family: 'Potta One', sans-serif;
    font-size: 100px;
    margin: 0;
}

@media (max-width: 600px) {
    .logo{
        font-size: 50px;
    }
}

.taglineSet{
    padding-left: 10%;
    height: 70%;
    width: 70vw;
    display: flex;
}

@media (max-width: 600px) {
    .taglineSet{
        flex-direction: column-reverse;
        padding-left: 0;
        height: auto;
        width: 100%;
        align-items: center;
    }
}

.taglineComment{
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    height: 80%;
    width: auto;
    text-align: left;
}

@media (max-width: 600px) {
    .taglineComment{
        height: auto;
        justify-content: center;
    }
    .taglineComment p{
        text-align: center;
    }
}

@media (max-width: 600px) {
    .comment{
        font-size: 15px;
    }
}

.tagline{
    font-size: 40px;
}

@media (max-width: 600px) {
    .tagline{
        font-size: 30px;
    }
}

.heroImg{
    width: 50%;
    height: auto;       /* ← 縦は画像に合わせて自然に */
    flex-shrink: 0;     /* ← 縮まないようにするのがポイント！ */
    object-fit: contain;  /* 必要に応じて切り抜き表示も可能 */
}

@media (max-width: 600px) {
    .heroImg{
        width: 100%;
    }
}

.action-buttons {
    display: flex;
    gap: 20px;
    flex-wrap: wrap;       /* スマホで折り返しOK */
    justify-content: center;
    margin: 24px 0;
  }

  @media (max-width: 600px) {
    .action-buttons{
        gap: 10px;
        width: 100%;
    }
}
  
  .action-button {
    display: inline-block;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    color: white;
    border: none;
    border-radius: 30px;
    text-decoration: none;
    background: linear-gradient(135deg, #ffe066, #ff8c42); /* ← ここがポイント！ */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
  }

  @media (max-width: 600px) {
    .action-button{
        font-size: 15px;
        padding: 6px 12px;
        margin-left: 0;
    }
}
  
  .action-button:hover {
    background: #da4b04;
    transform: translateY(-2px);
    color: #ffe066;
  }

  .action-button_selection{
    display: inline-block;
    padding: 12px 24px;
    font-size: 16px;
    font-weight: bold;
    color: #da4b04;
    background-color: white;
    border: none;
    border-radius: 30px;
    text-decoration: none;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
    border: 1px solid black;
    border-color: #da4b04;
  }

section{
    height: auto;
    width: 85%;
    margin: 5vw;
    padding: 5vw;
    padding-top: 2vw;
    padding-bottom: 2vw;
    background-color: rgba(255, 255, 255, 0.6);
    border-radius: 80px;
}

@media (max-width: 600px) {
    section{
        margin: 2vw;
        border-radius: 30px;
    }
}


h1{
    font-size: xx-large;
    text-align: center;
    margin-bottom: 0;
}

@media (max-width: 600px) {
    h1{
        font-size: 28px;
    }
}

h2{
    font-size: small;
    text-align: center;
    margin-top: 0;
    margin-bottom: 30px;
}

@media (max-width: 600px) {
    h2{
        font-size: 13px;
    }
}

p{
    text-align: center;
    align-items: center;
}

@media (max-width: 600px) {
    p{
        font-size: 16px;
        text-align: justify;       /* 両端揃え */
        text-align-last: left;     /* 最終行は左揃え！ */
    }
}

li{
    list-style: none;
}

.systemImg,
.mapImg{
    width: 100%;
    height: auto;
}

.logo_container{
    display: flex;
    width: 100%;
    height: auto;
    gap: 30px;
    flex-direction: column;
}

.imgRow{
    width: 80%;
    display: flex;
    justify-content: center;
}

.logoA{
  width: 100%; /* 画像サイズは好きに調整 */
  height: auto;
  gap: 7%;
}

.logoA img{
    width: 45%;
    height: auto;
    padding: 10px;
    object-fit: contain;
    border-radius: 10px;
    background-color: white;
}

.logoYUNIMA{
    width: 100%; /* 画像サイズは好きに調整 */
    height: auto;
    gap: 5%;
  }
  
  .logoYUNIMA img{
      width: 25%;
      height: auto;
      padding: 7px;
      object-fit: contain;
      border-radius: 10px;
      background-color: white;
  }

.logoB{
  width: 100%; /* 画像サイズは好きに調整 */
  height: auto;
  gap: 2%;
}

.logoB img{
    width: 15%;
    height: auto;
    padding: 7px;
    object-fit: contain;
    border-radius: 10px;
    background-color: white;
}

.logoC{
    width: 100%; /* 画像サイズは好きに調整 */
    height: auto;
    gap: 3%;
  }
  
  .logoC img{
      width: 19%;
      height: auto;
      padding: 7px;
      object-fit: contain;
      border-radius: 10px;
      background-color: white;
  }

.system p{
    margin: 50px auto;
    width: 70%;
    line-height: 1.8;
}

@media (max-width: 600px) {
.system p{
    margin: 15px auto;
    width: 90%;
    }
}

.flexbox{
    display: flex;
    gap: 3vw;
    align-items: center;
    text-align: center;
    height: auto;
    flex-direction: column;
}

.gallery-wrapper {
    position: relative;
    overflow: hidden;
  }

.image-gallery {
    display: flex;
    overflow-x: auto;        /* ← 横スクロールだけ可能に */
    overflow-y: hidden;      /* ← 縦スクロールは防ぐ */
    white-space: nowrap;     /* ← スクロールバー発生を確実に */
    padding: 8px;
    gap: 20px;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch; /* ← スマホの慣性スクロール */
    max-width: 100%; /* ★ 追加：スマホでも親幅に収まる */
    box-sizing: border-box; /* ★ 念のため padding 分込み */
  }

  /* カスタムスクロールバー：Webkit系（Chrome, Safari, Edge） */
  .image-gallery::-webkit-scrollbar {
    height: 4px; /* 横スクロールバーの高さ */
  }
  
  .image-gallery::-webkit-scrollbar-track {
    background: transparent; /* 背景は透明または薄いグレーに */
  }
  
  .image-gallery::-webkit-scrollbar-thumb {
    background: #ff8c42; /* スクロールバー本体の色 */
    border-radius: 4px;
    transition: background 0.3s;
  }
  
  .image-gallery::-webkit-scrollbar-thumb:hover {
    background: rgba(100, 100, 100, 0.7); /* ホバー時に少し濃く */
  }
  
  .gallery-item {
    flex: 0 0 auto;
    width: auto;
    scroll-snap-align: start;
    text-align: center;
    max-width: 30vh; /* ★ 画像とpの最大幅セットで揃える */
    margin: 0 auto; /* 中央寄せ */
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  
  .gallery-item img {
    height: 30vh;
    width: auto;
    display: block;
    object-fit: contain;
    border-radius: 6px;
    margin: 0 auto; /* 中央寄せ */
    max-width: 100%; /* はみ出し防止 */
  }

.gallery-item p {
    margin-top: 8px;
    font-size: 0.9rem;
    max-width: 100%; /* ★ 親(.gallery-item)に合わせる */
    word-break: break-word;
    overflow-wrap: anywhere;
    line-height: 1.4;
    white-space: normal; /* ← 折り返し可能に戻す */
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal; /* ← これ大事 */
    flex-shrink: 1; /* ← flex の場合だけ意外と必要なことがある */
}

  /* オプション：スマホ用に少し画像小さめにする */
@media (max-width: 600px) {
    .gallery-item img {
        height: 25vh; /* スマホ時は高さちょっと控えめに */
    }
}
  
  .caption {
    margin-top: 8px;
    font-size: 14px;
    color: #333;
  }

.divider {
  width: 300px;
  height: 3px;
  background-color: #ccc;
}

.journey_text{
    height: auto;
    width: 70%;
}

@media (max-width: 600px) {
    .journey_text{
        margin: 15px auto;
        width: 90%;
        }
    }

.listStyle{
    list-style: none;
    padding: 0;
    line-height: 3;
}

@media (max-width: 600px) {
    .listStyle{
        line-height: 1.7;
        text-align: justify;       /* 両端揃え */
        text-align-last: left;     /* 最終行は左揃え！ */
        }
    }

.listStyle li::before {
  content: "▶︎ ";
  color: #333;
}

.voiceLeft{
    height: auto;
    width: 70%;
}

@media (max-width: 600px) {
    .voiceLeft{
        line-height: 1.7;
        text-align: justify;       /* 両端揃え */
        text-align-last: left;     /* 最終行は左揃え！ */
        }
    }

.letterImg{
    height: auto;
    width: 35%;
}

.voiceRight{
    height: auto;
    width: 64%;
}

.voiceListStyle{
    list-style: none;
    padding: 0;
    line-height: 2.2;
}

@media (max-width: 600px) {
    .voiceRight{
        height: auto;
        width: 90%;
    }
    .voiceListStyle{
        line-height: 1.7;
        text-align: justify;       /* 両端揃え */
        text-align-last: left;     /* 最終行は左揃え！ */
        }
    }

.voiceListStyle li::before {
  content: "▶︎ ";
  color: #333;
}

.voiceListStyle li{
    margin-bottom: 25px;
}


.styled-table {
    width: 80%;
    margin: 0 auto;
    border: 10px solid #f29a76; /* 外枠を太く＆色付きに */
    border-collapse: collapse;
    font-family: 'Helvetica Neue', sans-serif;
    font-size: 16px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    overflow: hidden; /* 角丸を効かせるため */
  }
  
  .styled-table thead {
    background-color: #f29a76;
    color: white;
    text-align: left;
    border-radius: 8px;
  }
  
  .styled-table th,
  .styled-table td {
    padding: 12px 16px;
    border-bottom: 1px solid #eee;
    text-align: center;
  }
  
  .styled-table tbody tr:nth-child(even) {
    background-color: #f9f9f9;
  }
  
  .styled-table tbody tr:hover {
    background-color: #e0f7fa; /* ホバーでうっすら色を変える */
    transition: background 0.2s ease;
  }

  .flex-table {
    background-color: #fffdf9; /* ほぼ白に近いクリーム系 */
    border-radius: 16px; /* 角丸大きめ → 柔らかく */
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.05); /* 影をふわっと */
    max-width: 640px;
    margin: 24px auto;
    font-family: "Helvetica Neue", "Hiragino Sans", "Noto Sans JP", sans-serif;
    color: #555; /* 黒すぎないグレー系 → やさしい */
    overflow: hidden;
    flex-direction: column;
  }

  .flex-row{
    flex-wrap: wrap;
    padding: 16px 20px; /* 余白を広めに → ゆったり感 */
    border-bottom: 1px solid rgba(245, 215, 178, 0.5); /* 線を淡めに */
    transition: background-color 0.3s ease; /* hover時のふわっと効果 */
    display: flex;
    flex-direction: row;
  }

  /* スマホ時は1列にする */
  @media (max-width: 600px) {
    .flex-row{
        flex-direction: column;
    }
  }
  
  .flex-table > div {
    padding: 12px 16px;
    border-bottom: 1px solid #f5d7b2;
  }
  
  .flex-table .rowHeader {
    flex: 1 1 40%;
    font-weight: 600; /* 極太じゃない */
    color: #d17c27; /* やさしいオレンジ */
    background-color: #fff6ec; /* ごく薄いオレンジ系背景 */
    padding: 10px 12px;
    border-radius: 8px;
  }
  
  .flex-table .rowContent {
    flex: 1 1 60%;
    background-color: #fff; /* 完全白 → すっきり */
    padding: 10px 12px;
    border-radius: 8px;
    word-break: break-word;
    overflow-wrap: anywhere;
  }
  
  .flex-table > div:nth-last-child(-n+1) {
    border-bottom: none;
  }

.bold{
    font-weight: 800;
}

.endLogo{
    display: block;
    margin: 20px auto;
    width: 50%;
    height: auto;
}

@media (max-width: 600px) {
    .endLogo{
        width: 80%;
    }
  }

.end-buttons{
    display: flex;
    gap: 180px;
    flex-wrap: wrap;       /* スマホで折り返しOK */
    justify-content: center;
    align-items: center;
    margin: 80px;
}

@media (max-width: 600px) {
    .end-buttons{
        gap: 30px;
        margin: 40px;
    }
  }

.end-button {
    text-decoration: none;
    padding: 8px 35px;
    border-radius: 50px;
    background: #f29a76;                  /* 水色系 */
    color: white;
    font-weight: bold;
    font-size: 30px;
    background: linear-gradient(135deg, #ffe066, #ff8c42); /* ← ここがポイント！ */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
  }

@media (max-width: 600px) {
    .end-button{
        font-size: 20px;
    }
}

.end-buttonsTop{
    display: flex;
    gap: 120px;
    flex-wrap: wrap;       /* スマホで折り返しOK */
    justify-content: center;
    align-items: center;
    margin: 80px;
}

@media (max-width: 600px) {
    .end-buttonsTop{
        gap: 30px;
    }
}
  
.end-button:hover {
    background: #da4b04;
    transform: translateY(-2px);
  }

  .endbutton p{
    text-align: center;
    align-items: center;
    line-height: 2;
  }

  @media (max-width: 600px) {
    .endbutton p{
        width: 80%;
        margin: 80px auto;
    }
  }







  /*about*/

.background{
    position: fixed;
    background-image: url('img/background.png');
    background-size: cover;                  /* 要素いっぱいに表示 */
    background-position: center;             /* 中央寄せ */
    background-repeat: no-repeat;
    height: 100vh;
    width: 100%;
    top: 0;
    left: 0;
    z-index: -1;
}

.childeHeader{
    align-items: center;
    text-align: center;
    margin: 0 auto;
    width: 60%;
}

@media (max-width: 600px) {
    .childeHeader{
        width: 100%;
    }
  }

.childeLogo{
    align-items: center;
    text-align: center;
    margin: 0 auto;
    width: 100%;
}

.childeHeadButtons{
    display: flex;
    gap: 60px;
    align-items: center;
    justify-content: center;
    margin-top: 80px;
}

@media (max-width: 600px) {
    .childeHeadButtons{
        flex-direction: column;
        gap: 30px;
        margin-top: 20px;
        margin-bottom: 30px;
    }
  }

.childeMain
section{
    margin: 5vw auto;
}

.action-button_selection,
.childe{
    background: #da4b04;
    color: white;
    border-color: white;
}

.header-button_selection{
    text-decoration: none;
    padding: 8px 35px;
    border-radius: 28px;
    font-weight: bold;
    font-size: 14px;
    background: linear-gradient(135deg, #ffe066, #ff8c42); /* ← ここがポイント！ */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    transition: transform 0.2s, box-shadow 0.2s;
    background: #da4b04;
    color: white;
    border-color: white;
}

.greetingPara{
    width: 85%;
    align-items: center;
    text-align: center;
    margin: 0 auto;
}

.seasons{
    display: flex;
    gap: 20px;
    width: 100%;
    height: auto;
}

@media (max-width: 600px) {
    .seasons{
        flex-direction: column;
    }
  }

.season{
    width: 23%;
    height: 300px;
    border-radius: 80px;
    padding: 30px;
    align-items: center;
    text-align: center;
    transition: all 0.5s ease; /* ← ここを変更！ */
    cursor: pointer;
    display: flex;
    flex-direction: column;
}

@media (max-width: 600px) {
    .season{
        flex-direction: row;
        width: 80%;
        height: 60px;
    }
  }

.season:hover {
    color: white;
    background-color: #555;
    transform: translateY(-5px);
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
  }

.spring{
    background-color: #c1e7c1;
}

.summer{
    background-color:  rgb(255, 140, 58);
}

.autumn{
    background-color: rgb(201, 184, 154);
}

.winter{
    background-color: rgb(173, 239, 255);
}

h3{
    font-size: xx-large;
    color: white;
    font-weight: bolder;
}

@media (max-width: 600px) {
    h3{
        width: auto;
        margin-right: 20px;
        margin-left: 20px;
    }
  }

.seasonalList{
    display: flex;
    flex-direction: column;
    text-align: center;
}

@media (max-width: 600px) {
    .seasonalList{
        text-align: left;
        text-align: left;
    }
  }

.aboutGallery{
    width: 90%;
    margin: auto;
    columns: 3;
}

.aboutGallery li{
    width: auto;
    height: auto;
    margin: 0 2rem 2rem 2rem;
    list-style: none;
    border-radius: 6px;
}

.aboutGallery img{
    width: 100%;
    object-fit: contain;
    border-radius: 6px;
    margin: 0 auto; /* 中央寄せ */
    max-width: 100%; /* はみ出し防止 */
    filter: drop-shadow(5px 5px 3px 0 #9682828f);
    box-shadow: 3px 3px 3px 0 #9682828f;
}

@media (max-width: 600px){
    .aboutGallery{
        columns: 2;
    }
}

.fade-in {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
  }
  .fade-in.is-visible {
    opacity: 1;
  }

      /*
      コース画像拡大モーダル （ここから本PEN のコア）
      ===================================================== */
      #grayDisplay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        /* コンテンツ全てに対して固定的に 1160pxとか指定されているときの対応で、
        ダサいが!importantつける */
        max-width: 100% !important;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
      }
      
      #grayDisplay img {
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        margin: auto;
        max-width: 90%;
        max-height: 90%;
        height: 90%;
        object-fit: contain;
      }






/*support*/

.please{
    display: flex;
    width: 80%;
    gap: 10%;
    margin: 50px auto;
    align-items: center;
    justify-content: center;
}

.helpContents{
    display: inline-block;
    padding: 12px 24px;
    background-color: #ffe066;
    color: #333;
    font-size: x-large;
    font-weight: bold;
    text-align: center;
    border-radius: 40% 60% 60% 40% / 50% 40% 60% 50%; /* ← モクモク風 */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

.supportPara{
    width: 80%;
    margin: 30px auto;
}

.supporter-table {
    width: 100%;
    border-collapse: collapse;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
    font-family: "Helvetica Neue", "Hiragino Sans", "Noto Sans JP", sans-serif;
    color: #444;
    background-color: #fffdf9;
    margin: 20px auto;
}

.supporter-table thead {
    background-color: #f9b87f; /* オレンジ基調 */
    color: #fff;
    font-weight: bold;
}

.supporter-table thead td {
    padding: 14px 16px;
    font-size: 1rem;
}

.supporter-table tbody tr {
    border-bottom: 1px solid rgba(245, 215, 178, 0.5);
}

.supporter-table tbody tr:last-child {
    border-bottom: none;
}

.supporter-table td {
    padding: 14px 16px;
    line-height: 1.6;
    word-break: break-word;
    overflow-wrap: anywhere;
    white-space: normal;
    word-break: break-word;
}

.supporter-table .bold {
    font-weight: bold;
    color: #d17c27; /* 濃いめオレンジ */
}

/* スマホ時：カード風に変形 */
@media (max-width: 600px) {
    .supporter-table thead {
        display: none; /* ヘッダー非表示 */
    }

    .supporter-table, .supporter-table tbody, .supporter-table tr, .supporter-table td {
        display: block;
    }

    .supporter-table tbody tr {
        margin-bottom: 16px;
        padding: 12px;
        border: 1px solid rgba(245, 215, 178, 0.5);
        border-radius: 12px;
        background-color: #fffaf3;
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
    }

    .supporter-table td {
        padding: 8px 12px;
        position: relative;
        overflow-wrap: anywhere;
        white-space: normal;
        word-break: break-word;
    }

    /* 疑似要素で項目名を表示（テーブルヘッダー代わり） */
    .supporter-table td:nth-of-type(1)::before {
        content: "会員種別";
        display: block;
        font-weight: bold;
        color: #d17c27;
        margin-bottom: 4px;
    }

    .supporter-table td:nth-of-type(2)::before {
        content: "年会費";
        display: block;
        font-weight: bold;
        color: #d17c27;
        margin-bottom: 4px;
    }

    .supporter-table td:nth-of-type(3)::before {
        content: "詳細";
        display: block;
        font-weight: bold;
        color: #d17c27;
        margin-bottom: 4px;
    }
}