html {
  font-size: 62.5%;
  box-sizing: border-box;
}

body {
  color: #231815;
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  margin: 0 auto;
  width: 100%;
  padding-top: 88px; /* header__wrap の高さと同じ値に調整 */
}

#wrapper {
  max-width: 768px;
  width: 100%;
  margin: 0 auto;
}

img {
  width: 100%;
  object-fit: cover;
}

.inner,
.container {
  width: 100%;
  padding: 0 3%;
  margin-inline: auto;
  max-width: 768px;
}

p {
  font-size: 1rem;
}

.p0 {
  padding: 0;
}

li {
  list-style: none;
}

/* =====================
   変数
===================== */
:root {
  --UDMincho: "BIZ UDMincho", serif;
  --UDGothic: "BIZ UDGothic", sans-serif;
  --UDPMincho: "BIZ UDPMincho", serif;
}

:root.open {
  --button: #fff;
}

/* =====================
   共通
===================== */
a {
  color: inherit;
  text-decoration: none;
}

.heading {
  margin-bottom: 6%;
  font-size: clamp(1.6rem, 4vw, 2.4rem);
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: bold;
}

/* =====================
   header
===================== */

#header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 1000; /* ヘッダーを最前面に */
  background: #fff; /* 背景を白にして透けを防ぐ */
  box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 下に影をつけて見やすく */
}
.header__wrap {
  display: flex;
  justify-content: space-between; /* 左右に分ける */
  align-items: center;
  height: 60px;
  padding: 14px 3% 14px 3%;
}

.header__logo {
    display: flex;
    width: 100%;
    max-width: 172px;
}

.header__right {
  display: flex;
  align-items: center;
  gap: 12px; /* アイコンとメニューの間隔 */
}

.header__icon {
  width: 32px;
  height: 32px;
}

.content {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  text-align: center;
}

/* スクリーンリーダー用 */
.sr-only {
  border: 0;
  position: absolute;
  clip: rect(0 0 0 0);
  height: 1px;
  width: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
}

/* =====================
   ナビゲーションボタン
===================== */
.nav-button {
  box-sizing: content-box;
  padding: 0;
  border: none;
  background: none;
  width: 40px;
  height: 32px;
  cursor: pointer;
  color: var(--button);
}

.nav-button::before,
.nav-button::after {
  content: '';
  display: block;
  height: 2px;
  background-color: currentColor;
  transform: translateY(15px);
  transition: 0.3s ease-in-out;
}

.nav-button::before {
  transform: translateY(-15px);
  box-shadow: 0 15px currentColor;
}

.open .nav-button {
  z-index: 1000;
  color: #fff;
}

.open .nav-button::before {
  transform: rotate(-45deg);
  box-shadow: none;
}

.open .nav-button::after {
  transform: rotate(45deg);
  box-shadow: none;
}

/* =====================
   ナビゲーションメニュー
===================== */
.nav {
  display: flex;                   /* 中身をflexレイアウトで配置 */
  justify-content: center;         /* 中身を左右中央揃え */
  align-items: center;             /* 中身を上下中央揃え */
  position: absolute;              /* 画面に固定配置（絶対位置） */
  top: 0;                          /* 画面の上端に配置 */
  left: 0;                         /* 左端に配置 */
  width: 100%;                     /* 横幅いっぱいに広げる */
  max-height: 0;                   /* 最初は高さゼロで隠す */
  overflow: hidden;                /* 高さゼロの外に出たコンテンツは非表示 */
  background: rgba(0, 0, 0, 0.45); /* 半透明の黒背景（背面を透かす） */
  color: transparent;              /* 最初は文字色を透明にして非表示 */
  transition: max-height 0.5s ease, opacity 0.5s ease; 
                                   /* 高さと透明度を0.5秒かけてアニメーション */
  opacity: 0;                      /* 最初は完全に透明 */
}

.open .nav {
  max-height: 100vh;               /* 開いたときに高さを画面いっぱいまで展開 */
  opacity: 1;                      /* 透明度を1にして表示 */
  color: #fff;                     /* 文字色を白にする */
  padding: 1rem;                   /* 内側に余白を追加して見やすくする */
}

.open .nav a {
  color: #ffffff;     /* リンク文字も白に統一 */
  text-decoration: none;
  font-weight: bold;
  transition: color 0.3s ease;
  font-family: 'M PLUS Rounded 1c', sans-serif;
}

.open .nav a:hover {
  color: #fd3e6e;            /* ホバー時にブランドカラーなどを適用 */
}


.nav ul {
  display: flex;
  flex-direction: column;   /* 常に縦並び */
  align-items: center;      /* 中央寄せ */
  gap: 1.2rem;              /* リンク間隔（スマホと同じに統一） */
  list-style: none;
  margin: 0;
  padding: 0;

  color: #fff;
  font-size: clamp(1.4rem, 2vw, 1.6rem);
}

/* PC/スマホ共通になるので、このメディアクエリは不要 */
@media (max-width: 768px) {
  .nav ul {
    /* flex-direction: column; ← 消す */
    /* gap: 1.2rem; ← 消す */
  }
}

/* =====================
   mv
===================== */
.mv {
  margin-bottom: 10px;
}

.mv__image {
  width: 100%;
  height: auto;
}

/* =====================
   about
===================== */
.about {
  margin-bottom: 24px;
}

.about__contents {
  display: grid;
  grid-template-columns: 6fr 3fr;
  gap: 20px;
  margin-bottom: 24px;
}

.about.heading {
  margin-top: 6%;
  text-align: center;
}

.contents__textArea__text {
  text-indent: 1em;
  letter-spacing: 0.05em;
  font-size: clamp(1rem, 2.5vw, 1.8rem);
  font-family: 'M PLUS Rounded 1c', sans-serif;
}

.about__textArea {
  display: grid;
  grid-template-columns: 1fr 7fr;
  gap: 24px;
}

.contents__block__image {
  width: 94%;
  position: relative;
  overflow: hidden;
  border: 0.2px solid #000;
}

.reflection {
  height: 100%;
  width: 30px;
  position: absolute;
  top: -180px;
  left: 0;
  background-color: #fff;
  opacity: 0;
  transform: rotate(45deg);
  animation: reflection 2s ease-in-out infinite;
}

@keyframes reflection {
  0% {
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  81% {
    transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}
/*ズームボタン*/
.zoom {
  display: flex;
  justify-content: center;
}

.zoom__image {
  width: 16%;
}

.zoom__text {
  font-size: clamp(1.1rem, 3vw, 1.6rem);
  font-family: 'M PLUS Rounded 1c', sans-serif;
}

/*テキスト*/
.about__textArea--left {
  background-color: #f9f1e4;
  line-height: 1.3;
  text-align: center;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  font-weight: bold;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

.about__textArea--left span {
  margin: 0;
  line-height: 1.2;
  font-size: clamp(1.4rem, 3vw, 1.8rem);
}

.about__textArea--right {
  letter-spacing: 0.05em;
  font-size: clamp(1rem, 2.5vw, 1.8rem);
  font-family: 'M PLUS Rounded 1c', sans-serif;
}

/* =====================
   区切り線
===================== */
.short-line {
  width: 90%;
  margin: 20px auto;
  border: none;/* デフォルトを消す */
  border-top: 0.5px solid #473f3c8c; /* グレーの細線 */
}

/*画像*/
.course__image {
    width: 88%;  /*画像サイズ調整*/
    margin-inline: auto;
    position: relative;
}

.course__image2 {
    width: 88%;
    margin-top: 6%;
    margin-bottom: 8%;
    margin-inline: auto;
    position: relative;
}


/* apply */
.apply {
    background-color: #fff;
    color: black;
    padding-top: 2%;
    padding-bottom: 2%;
}

.apply__title {
    display: grid;
    grid-template-columns: 1fr 4.5fr;
}

.apply__heading {
    padding-bottom: 2%;
    text-align: center;
    font-size: clamp(2.4rem, 6vw, 3.6rem);
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: bold;
}

.apply__block {
    text-align: center;
    margin: 4% 0;
    position: absolute;
    top: 92.5%;  /*ボタンの位置　縦*/
    left: 50%; /*ボタンの位置　横*/
    transform: translate(-50%, -50%);
}

.apply__block2 {
    text-align: center;
    margin-bottom: 8%;
}

.apply_btn {
    display: inline-block;
    width: 240px;
    border-radius: 9999px;
    text-align: center;
    text-decoration: none;
    line-height: 48px;
    outline: none;
    color: #ff2a5f;
    background-color:#ffd4df; 
    -webkit-transition: all .3s;
    transition: all .3s;
    animation: pulsate 1.5s ease-in-out infinite;
    font-weight: bold;
}

.apply_btn:hover {
    transform: scale(0.9);
    color: #fff;
    background-color: #ff2a5f;
}

@keyframes pulsate {
    0% {
        transform: scale(1);
    }

    50% {
        transform: scale(0.95);
    }

    100% {
        transform: scale(1);
    }
}

.apply_btn__text {
    color: var(--white);
    font-size: 1.6rem;
    font-family: 'M PLUS Rounded 1c', sans-serif;
    font-weight: bold;
}

/* voice */
.voice {
    background-color: #fff;
    padding-bottom: 5.5%;
}

.voice__heading {
    width: 94%;
    margin-inline: auto;
    margin-bottom: 3%;
    padding-top: 5.5%;
}

.voice__heading-sub {
    width: 70%;
    padding-top: 40px;
    margin-inline: auto;
    margin-bottom: 3.5%;
}

.voice__box  {
    background-color: #fff;;
    border:5px solid #ea5270;
    border-radius: 25px;
    padding: 4%;
    margin-bottom: 3%;
}

.voice__box:last-child {
    margin-bottom: 0;
}

.voice__shop {
    margin-bottom: 2%;
    font-size: clamp(1.6rem,3vw,2rem);
    font-family:'M PLUS Rounded 1c', sans-serif;
    font-weight: 600;
}

.voice__item {
    font-size: clamp(1.2rem,3vw,1.8rem);
    font-family:'M PLUS Rounded 1c', sans-serif;
    font-weight: 600;
}

.voice__text {
    margin-bottom: 1%;
    font-size: clamp(1rem,3vw,1.6rem);
    font-family:'M PLUS Rounded 1c', sans-serif;
}

.voice__name {
    display: block;
    text-align: right;
    font-size: clamp(1rem,3vw,1.6rem);
    font-family:'M PLUS Rounded 1c', sans-serif;
}

/*矢印の有無*/
.swiper-button-next,
.swiper-button-prev {
  display: none !important;
}
/*ドットの位置*/
.swiper-pagination {
  bottom: -3px !important; /* ← 下に20pxずらす（必要に応じて調整） */
  position: absolute;
}
/*もっと見るボタン*/
.voice__load-more-container {
  text-align: center;
  margin-top: 20px;
  padding: 0 /* 余白確保 */
}

.voice__load-more-btn {
  width: 100%;
  max-width: 800px; /* 最大幅を設定 */
  padding: 14px 24px;
  font-size: 1.2rem;
  font-weight: bold;
  cursor: pointer;
  background-color: #ea5270;
  color: #fff;
  border: none;
  border-radius: 6px;
  transition: background-color 0.3s ease, transform 0.1s ease;
}

.voice__load-more-btn:hover {
  background-color: #d42145;; /*クリックしたときの色*/
}

.voice__load-more-btn:active {
  transform: scale(0.97);
}
/*もっと見るボタンアニメーション効果*/
.voice__box {
  display: none;
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.voice__box.visible {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* sponsorship */
.sponsorship {
    margin-bottom: 4%;
}

.sponsorship.heading {
    text-align: center;
    margin: 4% 0 0 0;
}

.sponsorship__heading__text {
    display: block;
    text-align: center;
    margin-bottom: 4%;
    font-size: clamp(1.1rem, 3vw, 1.6rem);
    font-family: 'M PLUS Rounded 1c', sans-serif;
}

.sponsorship__textArea {
    display: flex;
    justify-content: center;
    gap: 8%
}

.sponsorship__list__item {
    list-style: none;
    font-size: clamp(1rem, 2.5vw, 1.6rem);
    font-family: 'M PLUS Rounded 1c', sans-serif;
}

/*2024飲食店マップリンク*/
.map-rink-btn {
  display: block; /* インライン要素からブロック要素に */
  width: 80%;
  max-width: 500px;
  padding: 10px 5px;
  font-family: 'M PLUS Rounded 1c', sans-serif;
  border: 2px solid #ff2a5f;
  background-color: #fff;
  color: #ff2a5f;
  text-decoration: none;
  border-radius: 8px;
  text-align: center;
  font-size: 1.6rem;
  margin: 6% auto 0; /* 上に6%、左右中央、下0 */
  cursor: pointer;
  font-weight: bold;
  transition: background-color 0.3s ease, color 0.3s ease; /* アニメーション追加 */
}
.map-rink-btn:hover {
    transform: scale(0.9);
}

/* footer */
.copyright {
    display: block;
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.2rem;
    font-family: 'M PLUS Rounded 1c', sans-serif;
}

@media screen and (min-width: 769px) {
    body {
        margin: 0 auto;
        max-width: 768px;
        width: 100%;
    }
}



/* タブレット向け（768px以下） */
@media (max-width: 768px) {
  .voice__load-more-btn {
    padding: 12px 28px;
    font-size: 18px;
  }
}

/* スマホ向け（480px以下） */
@media (max-width: 480px) {
  .voice__load-more-btn {
    padding: 10px 20px;
    font-size: 16px;
  }
}