@charset "utf-8";
body {
  color: #222;
  font-family: "Montserrat", "Noto Sans JP", sans-serif;
  background-color: #eee;
  min-height: 100dvh;
}
p {
  letter-spacing: 0.08em;
  line-height: 1.8;
  @media (width <= 600px){
    font-size: 15px;
  }
}
/* ================ ヘッダー ================ */
header {
  padding: 10px 40px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #fff;
  @media(width <= 960px) {
    padding: 10px 20px;
  }
  @media(width <= 700px) {
    padding: 5px 8px;
  }
  @media(width <= 600px) {
    padding: 5px 20px;
    gap: 10px;
  }
  .logo {
    display: block;
    img {
      display: block;
      height: 60px;
      @media(width <= 600px) {
        height: 40px;
      }
    }
  }
  /* 通常のナビゲーションはスマホサイズで非表示 */
  nav.global-nav {
    @media(width <= 600px) {
      display: none;
    }
    ul {
      display: flex;
      align-items: center;
      gap: 50px;
      @media(width <= 960px) {
        gap: 24px;
      }
    }
    a {
      font-size: 14px;
      font-weight: 400;
      display: block; /* クリック領域を広げるためにブロック要素を使用 */
      padding: 10px 0; /* 上下パディング広めに取り、クリック領域広げた */
      @media(width <= 600px) {
        font-size: 12px;
      }
      &:hover {
        color: #6A9631;
        text-decoration: underline;
      }
    }
  }
  /* ハンバーガーメニュー */
  .burger {
    display: none;
    position: relative;
    @media(width <= 600px) {
      display: block;
    }

    /* チェックボックスを非表示 */
    .burger-check {
      display: none;
    }

    /* ハンバーガーアイコンのスタイル (label要素) */
    .burger-button {
      display: flex; /* spanを縦並べ */
      flex-direction: column;
      justify-content: center; /* span中央配置 */
      align-items: center; /* span中央配置 */
      gap: 6px; /* 各spanの間隔を調整 */
      width: 50px; /* クリック可能な幅調整 */
      height: 50px; /* クリック可能な高さ調整 */
      border-radius: 6px;
      cursor: pointer;
      position: relative; /* spanのabsolute配置の基準 */
      z-index: 2; /* メニューの上に表示されるように */
      background-color: transparent; /* 背景色を透明に */
      transition: background-color .2s; /* ホバー時 */

      &:hover {
        background-color: #eee;
      }

      span {
        display: block;
        background-color: #000;
        width: 24px; /* 幅を調整 */
        height: 2px;
        border-radius: 10px;
        transition: transform .2s, opacity .2s; /* アニメーション */
      }
    }

    /* チェックボックスがチェックされた時のハンバーガーアイコンのスタイル */
    .burger-check:checked + .burger-button {
      span:nth-child(1) {
        transform: translateY(0) rotate(45deg);
      }
      span:nth-child(2) {
        opacity: 0; /* 中央の線を非表示 */
      }
      span:nth-child(3) {
        transform: translateY(0) rotate(-45deg);
      }
    }

    /* ハンバーガーメニュー本体のスタイル */
    .burger-menu {
      z-index: 1;
      width: max-content;
      border: 1px solid #ccc;
      background-color: #fff;
      padding: 10px 20px;
      border-radius: 8px;
      position: absolute;
      /* メニューの表示位置調整 */
      top: 100%; /* ヘッダーすぐ下 */
      right: 0; /* 右寄せ */
      margin-top: 10px; /* ヘッダーとの隙間 */
      box-shadow: 0 4px 8px rgba(0,0,0,0.1); /* 影を追加 */

      /* 初期状態では非表示 */
      visibility: hidden; /* transitionのためにvisibilityを使用 */
      opacity: 0;
      transform: translateY(-10px);
      transition: opacity 0.3s ease-out, transform 0.3s ease-out, visibility 0.3s;

      ul {
        display: grid;
        gap: .5em;
        a {
          font-size: 14px;
          font-weight: 400;
          display: block; /* クリック領域を広げるためにブロック要素使用 */
          padding: 8px 15px; /* パディング追加しクリック領域広げる */
          @media(width <= 600px) {
            font-size: 12px;
          }
          &:hover {
            color: #6A9631;
            text-decoration: underline;
          }
        }
      }
    }

    /* チェックボックスがチェックされた時のメニュー本体のスタイル */
    .burger-check:checked ~ .burger-menu {
      visibility: visible;
      opacity: 1;
      transform: translateY(0);
    }
  }
}
  .hero {
    color: #fff;
    text-align: center;
    height: 640px;
    background-image: url(../img/hero-background.JPG);
    background-size: cover;
    background-position: center; /* 背景画像を中央配置 */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;

    /* 透過した灰色の帯 */
    .hero-text-overlay {
      background-color: rgba(0, 0, 0, 0.4); /* 半透明の黒背景 */
      padding: 20px 40px; /* 帯の上下左右余白 */
      border-radius: 8px; /* 帯の角を丸く */
      max-width: 90%; /* 帯の最大幅 */
      box-sizing: border-box; /* paddingを含めて幅を計算 */
      margin: 0 auto; /* 中央寄せ */

      @media (width <= 600px) {
        padding: 15px 20px; /* スマートフォンで余白調整 */
        max-width: calc(100% - 40px); /* 左右に20pxずつの余白 */
      }
    }

    h2 {
      font-size: 48px;
      font-weight: 700;
    }
    p {
      font-size: 20px;
      font-weight: 400;
      margin-top: 20px;
    }
    a {
      display: grid;
      place-items: center;
      width: 60px; height: 60px;
      background-color: #6a9631;
      border-radius: 50%;
      box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.1);
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translateX(-50%) translateY(50%);
      img {
        width: 24px;height: 24px;
      }
    }
    br {
      display: none;
      @media(width <= 700px) {
        display: block;
      }
    }
  }
  .container {
    max-width: 1160px;
    margin: 0 auto;
    padding: 0 40px;
  }
  .main-section {
    padding: 80px 0 100px;
    /* 見だしグループ */
    .heading-group {
      text-align: center;
      margin: 0 0 60px;
      h2 {
        color: #8B7452;
        font-size: 40px;
        font-weight: 700;
      }
      span {
        color: #222;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0.08em;
        display: block;
        margin-top: 10px;
      }
      &::after {
        content: "";
        display: block;
        width: 40px;
        height: 4px;
        background-color: #6A9631;
        border-radius: 4px;
        margin: 30px auto 0;
      }
      /* 既存のh4とspanの重複定義は削除または統合を検討 */
      h4 {
        color: #8B7452;
        font-size: 40px;
        font-weight: 700;
      }
      /* spanは既に上位で定義されているため、このブロックは不要な場合が多い */
      span { /* このspanは既存のheading-groupのspanと重複 */
        color: #222;
        font-size: 14px;
        font-weight: 400;
        letter-spacing: 0.08em;
        display: block;
        margin-top: 10px;
      }
      /* ::afterも既存と重複 */
      &::after {
        content: "";
        display: block;
        width: 40px;
        height: 4px;
        background-color: #6A9631;
        border-radius: 4px;
        margin: 30px auto 0;
      }
    }
  }
  .message{
    .layout{
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: start;
      gap: 60px;
      @media (width <= 960px){
        grid-template-columns: 1fr;
      }
    }
    .image{
      border-radius: 40px;
      overflow: hidden;
      img{
        width: 100%;
        aspect-ratio: 5/4;
        object-fit: cover;
      }
    }
    .text{
      img {
        height: 60px;
      }
    }

    .logo-with-margin {
      margin-top: 40px; /* 上の文章との隙間調整 */
      margin-bottom: 20px; /* 下の文章との隙間調整 */
    }
      h3{
        font-size: 28px;
        font-weight: 700;
        margin-top: 20px;
      }
      p{
        margin-top: 20px;
      }
  }
  .about{
    .layout{
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: start;
      gap: 60px;
      @media (width <= 960px){
        grid-template-columns: 1fr;
      }
    }
    .image{
      border-radius: 40px;
      overflow: hidden;
      img{
        width: 100%;
        aspect-ratio: 5/4;
        object-fit: cover;
      }
    }
    .text{
      img{
        height: 60px;
      }
      h3{
        font-size: 28px;
        font-weight: 700;
        margin-top: 20px;
      }
      p{
        margin-top: 20px;
      }
    }
  }
  .musicd{
    .layout {
      display: grid;
      grid-template-columns: 1fr 1fr;
      align-items: start;
      gap: 60px;

      @media (width <= 960px) {
      grid-template-columns: 1fr;
      }
    }

    .left {
      display: flex;
      flex-direction: column;
      gap: 20px;
    }

    .image {
      border-radius: 40px;
      overflow: hidden;

      img {
        width: 100%;
        aspect-ratio: 5/4;
        object-fit: cover;
      }
    }

    .image-little-group {
      display: flex;
      justify-content: space-between;
      gap: 10px;

      @media (max-width: 600px) {
        flex-wrap: wrap;
        justify-content: center;
      }
    }

    .image-little {
      flex: 1;
      max-width: 32%;
      border-radius: 12px;
      overflow: hidden;

      img {
        width: 100%;
        aspect-ratio: 5/4;
        object-fit: cover;
        display: block;
      }
    }

    .text {
      h3 {
        font-size: 28px;
        font-weight: 700;
        margin-top: 20px;
      }

      p {
        margin-top: 20px;
      }
    }
  }
  .recruitment{
    background-color: #f3f1ee;
    .layout{
      align-items: start;
      gap: 60px;
    }
    .text{
      img{
        height: 60px;
      }
      h3{
        font-size: 28px;
        font-weight: 700;
        margin-top: 20px;
      }
      h4{
        font-size: 28px;
        font-weight: 700;
        margin-top: 20px;
      }
      p{
        margin-top: 20px;
      }
    }
    .part-card{
     padding: 10px;
     background-color: #fff;
     border-radius: 20px;
     display: grid;
     gap: 5px;
     img {
       width: 100%;
       aspect-ratio: 4 / 3;
       object-fit: cover;
       border-radius: 12px;
     }
     .name {
      font-size: 14px;
      font-weight: 700;
      line-height: 1;
      letter-spacing: 0;
      text-align: right;
     }
     .comment {
      font-size: 14px;

     }
    }
    .part-list {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr 1fr;
      gap: 20px;
      @media (width <= 960px){
        grid-template-columns: 1fr 1fr 1fr;
      }
      @media (width <= 600px){
        grid-template-columns: 1fr 1fr;
        gap: 10px;
      }
    }
  }
  .contact{
    text-align: center;
    background-color: #f3f1ee;
    .layout{
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 40px;
      margin-top: 60px;
      margin-inline: auto;
      max-width: 700px;
    }
    .label {
      margin-bottom: 20px;
    }
    .button {
      display: inline-block;
      color: #fff;
      background-color: #6a9631;
      padding: 1em 2em;
      border-radius: 8px;
    }
  }
  footer {
    color: #fff;
    background-color: #8B7452;
    padding: 40px 20px 20px;
    display: grid;
    justify-items: center;
    gap: 40px;
    .logo {
      display: block;
      img {
        display: block;
        height: 60px;
        mix-blend-mode: multiply; /* ロゴ背景を周囲と統合 */
      }
    }
    ul {
      display: flex;
      gap: 40px;
      a {
        font-size: 13px;
        display: block; /* クリック領域を広げるためにブロック要素に */
        padding: 10px 0; /* 上下のパディングを追加してクリック領域を広げた */
      }
    }
    .social-links {
      display: flex;
      gap: 20px; /* アイコン間のスペース */
      a {
        color: #fff; /* フッターの背景色に合わせて白に */
        font-size: 30px; /* アイコンのサイズ */
        transition: color 0.3s ease; /* ホバー時 */
        &:hover {
          color: #eee; /* ホバーで少し薄い色に */
        }
      }
    }
    .copyright {
      font-size: 12px;
    }
  }
  .lower-main {
    padding: 80px 0 100px;
    background-color: #F3F1EE;
  }
  .lower-heading-group {
    text-align: center;
    display: grid;
    justify-items: center;
    gap: 20px;
    margin: 0 0 40px;
    h2 {
      font-size: 40px;
      font-weight: 700;
    }
  }
  .form-box {
    max-width: 640px;
    margin: 0 auto;
    border-radius: 20px;
    padding: 60px; /* PC用 */
    background-color: #fff;
    box-shadow: 0px 24px 40px rgb(0 0 0 / 0.08);
    box-sizing: border-box; /* ここを追加 */

    @media (width <= 600px) { /* iPhoneSE対策 */
      padding: 30px 20px; /* 左右のパディングを減らす */
      margin: 0 20px; /* 画面端からの余白を少し確保 */
      width: calc(100% - 40px); /* 左右20pxの余白を引いた幅 */
    }
  }
  .form-item {
    display: grid;
    gap: 10px;
    label {
      font-size: 14px;
    }
    + .form-item {
      margin-top: 30px;
    }
    input,
    textarea {
      border: 1px solid #aaa;
      padding: 0.8em 0.5em;
      border-radius: 8px;
      width: 100%;
      box-sizing: border-box;
      &::placeholder {
        color: #aaa;
      }
    }
    textarea {
      resize: none;
    }
    button {
      font-size: 16px;
      display: inline-block;
      color: #fff;
      background-color: #6A9631;
      border: none;
      padding: 1em 2em;
      border-radius:8px;
      &:hover {
        background-color: #517521;
      }
    }
  }

.activity-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 60px;
  @media (width <= 960px) {
    grid-template-columns: 1fr;
  }
}

.activity-layout .text h3 {
  font-size: 28px;
  font-weight: 700;
  margin-bottom: 20px;
  text-align: center;
}

.activity-layout .text ul {
  list-style: none;
  padding: 0;
  text-align: center; /* 中央寄せに調整 */
}

.activity-layout .text li {
  font-size: 18px;
  line-height: 2;
  margin-bottom: 5px;
}

.content-section {
    background-color: #f3f1ee;
    text-align: center; /* 全体を中央寄せ */
}

.content-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  margin-top: 60px;
  margin-inline: auto;
  max-width: 960px; /* レイアウトの最大幅調整 */
  align-items: start; /* 各アイテムの上端揃え */
  @media (width <= 700px) {
    grid-template-columns: 1fr;
    gap: 30px;
  }
}

.content-item {
  background-color: #fff;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0px 4px 10px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  align-items: center; /* アイテム内のコンテンツ中央寄せ */
  text-align: center;
}

.content-item h3 {
  font-size: 24px;
  font-weight: 700;
  margin-bottom: 20px;
  color: #8B7452;
}

.youtube-embed .video-container {
  position: relative;
  width: 100%;
  padding-bottom: 56.25%; /* 16:9 Aspect Ratio */
  height: 0;
  overflow: hidden;
  margin-bottom: 15px;
}

.youtube-embed .video-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-radius: 8px; /* 角を丸く */
}

.youtube-embed .video-title {
  font-size: 16px;
  font-weight: 600;
  color: #222;
  margin-top: 10px;
}

.social-content .social-links-content {
  display: flex;
  flex-direction: column; /* 縦に並べる */
  gap: 20px; /* アイコン間のスペース */
  width: 100%; /* 親要素の幅いっぱいに広げる */
  align-items: center; /* アイテム中央寄せ */
}

.social-content .social-links-content a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 20px; /* テキストサイズ */
  color: #222;
  transition: color 0.3s ease;
  padding: 10px 20px; /* クリック可能な領域を広げる */
  border: 1px solid #eee; /* 軽い枠線を追加 */
  border-radius: 8px;
  width: fit-content; /* コンテンツの幅に合わせる */
  justify-content: center; /* アイコンとテキストを中央に配置 */
}

.social-content .social-links-content a:hover {
  color: #6A9631;
  border-color: #6A9631; /* ホバー時に枠線の色を変える */
}

.social-content .social-links-content a i {
  font-size: 30px; /* アイコンサイズ */
}

.social-content .social-links-content a span {
  font-size: 18px; /* テキストサイズを調整 */
  font-weight: 500;
}
/* ================ 練習情報セクション ================ */
.practice-info {
  background-color: #f3f1ee; /* 背景色設定 */
}

.practice-layout {
  display: grid;
  grid-template-columns: 1fr 1.2fr; /* 左:右 = 1:1.2 の比率で分割 */
  gap: 40px;
  align-items: stretch; /* カラムの高さ揃える */

  @media (width <= 960px) {
    grid-template-columns: 1fr; /* 画面が狭い場合は縦1列に */
    gap: 30px;
  }
}

.practice-details {
  display: flex;
  flex-direction: column;
  gap: 30px; /* カード間スペース */
}

.info-card {
  background-color: #fff;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0px 12px 20px rgba(0, 0, 0, 0.05);
  display: flex;
  flex-direction: column;
}

.info-card h3 {
  color: #8B7452;
  font-size: 22px;
  font-weight: 700;
  margin: 0 0 20px 0;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}

.info-card p {
  line-height: 1.9;
}
.info-card p + p, .info-card .note {
  margin-top: 1em;
}

.info-card .note {
  font-size: 14px;
  color: #555;
  line-height: 1.7;
}

/* 右カラム(場所)のカードは高さを100%に */
.location-card {
  height: 100%;
}


/* Google Mapのレスポンシブ対応 */
.map-container {
  position: relative;
  width: 100%;
  padding-bottom: 75%; /* 4:3のアスペクト比 */
  height: 0;
  overflow: hidden;
  border-radius: 12px;
  margin: 20px 0;
}

.map-container iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 活動費用リスト */
.cost-list {
  margin-top: auto; /* カード下部に配置 */
  padding-top: 20px;
}

.cost-list div {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: 15px 10px;
  border-top: 1px solid #f0f0f0;
}

.cost-list dt {
  font-weight: 700;
  font-size: 16px;
}

.cost-list dd {
  font-size: 24px;
  font-weight: 700;
  color: #6A9631;
  margin: 0;
}