@charset "utf-8";

.header-area {
  position: relative;
}

/* neo 用のスタイル */
main.neo {
  padding-top: clamp(0px, 4vw, 160px);
}

/*NEO　キャッチコピー（画像）*/

/* デフォルト（PCなど大きめ画面） */
.catch-copy-wrapper2 {
  position: absolute;
  top: clamp(-207px, -13vw, -64px);
  left: 50%;
  transform: translateX(-50%);
  width: clamp(380px, 89vw, 1140px);
  z-index: 100;
  pointer-events: none;
}

/*2枚目のスライドの流れ星
---------------------------------------------------------------------------*/
/* 共通のスタイル */
.shooting-star {
  position: absolute;
  width: 120px;
  height: 2px;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), white);
  opacity: 0;
  filter: blur(2px) drop-shadow(0 0 6px white);
  pointer-events: none;
  z-index: 5;
}

/* 星1：右下へ流れる（開始直後） */
/* 星1（大きめ・太め） */
.star1 {
  top: -100px;
  left: -100px;
  width: 140px;
  height: 3px;
  transform: rotate(45deg);
  animation: shooting1 5s ease-in-out infinite;
  animation-delay: 0s;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0), white);
  filter: blur(2px) drop-shadow(0 0 6px white);
}

/* 星2（小さめ・細め） */
.star2 {
  top: -100px;
  right: -100px;
  width: 90px;
  height: 1.5px;
  transform: rotate(-45deg);
  animation: shooting2 5s ease-in-out infinite;
  animation-delay: 7s;
  background: linear-gradient(270deg, rgba(255, 255, 255, 0), white);
  filter: blur(1px) drop-shadow(0 0 4px white);
}

/* 1回目：右下へ */
@keyframes shooting1 {
  0% {
    transform: translate(0, 0) rotate(45deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translate(600px, 600px) rotate(45deg);
    opacity: 0;
  }
}

/* 2回目：左下へ */
@keyframes shooting2 {
  0% {
    transform: translate(0, 0) rotate(-45deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  100% {
    transform: translate(-600px, 600px) rotate(-45deg);
    opacity: 0;
  }
}

/*neo シーズンの案内
---------------------------------------------------------------------------*/
/* 共通レイアウト（横並びの表形式） */
.list1.two-column {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  z-index: 2;
}

.list1 .list-box {
  width: 55%;
  background-color: transparent;
  box-sizing: border-box;
  color: #fff;
  z-index: 2;
}

.list-box .list-title {
  font-size: 1.2rem;
  margin-bottom: 1rem;
  font-weight: bold;
  color: #fff;
}

.list-box .list-subtitle {
  font-size: 0.9rem;
  color: #ccc;
  margin-top: -0.5rem;
  margin-bottom: 1rem;
}

.list-box .list-row {
  display: flex;
  border: 1px solid #fff;
  border-radius: 6px;
  overflow: hidden;
  margin-bottom: 0.5rem;
}

.list-box .item {
  flex: 1;
  padding: 0.7rem;
  color: #fff;
  text-align: center;
  border-right: 1px solid #fff;
}

.list-box .item:last-child {
  border-right: none;
}

/* ラベル装飾 */
.corner-label {
  background-color: rgba(255, 255, 255, 0.1);
  color: #eab6dc;
  border: 1px solid #eab6dc;
  padding: 0.2em 0.6em;
  border-radius: 1em;
  font-size: 0.8rem;
  font-weight: normal;
  display: inline-block;
  margin-left: 0.5em;
  vertical-align: middle;
  text-decoration: none;
  transition: background-color 0.3s ease;
}

.corner-label:hover {
  background-color: rgba(255, 223, 223, 0.2);
}

/* スマホ向け（600px以下）：カード型に切り替え */
@media screen and (max-width: 600px) {
  .list1.two-column {
    flex-direction: column;
    align-items: center;
  }

  .list1 .list-box {
    width: 100%;
    max-width: 480px;
    margin: 0 auto;
    padding: 0 1rem;
  }

  .list-box .list-row {
    display: block;
    border: 1px solid #fff;
    border-radius: 8px;
    padding: 1rem;
    margin-bottom: 1rem;
    background: rgba(255, 255, 255, 0.05);
  }

  .list-box .item {
    border: none;
    text-align: left;
    padding: 0.5rem 0;
  }

  .list-box .item + .item {
    border-top: 1px solid #fff;
  }

  #tomonokai-neo-3,
  #tomonokai-neo-5 {
    display: flex;
    flex-direction: column-reverse;
  }
}

/*「ボナさんの推薦文」
---------------------------------------------------------------------------*/
/* 推薦文セクション */
.recommendation {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 300px;
  padding: 0 2rem; /* 余白を追加してスマホでも余裕を持たせる */
}

/* 推薦文テキスト */
.box2 .recommendation p {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  font-size: clamp(1rem, 2.5vw, 1.15rem);
  line-height: 1.9;
  font-style: normal;
  text-align: left;
  padding: 0 clamp(1rem, 10vw, 200px); /* 左右余白をレスポンシブに */
}

/* 強調テキスト */
.box2 .recommendation strong {
  font-weight: bold;
  font-style: italic;
  color: #b02e0c;
}

/* 署名部分 */
.box2 .signature {
  font-family: "Yu Mincho", "Hiragino Mincho ProN", serif;
  text-align: right;
  padding-right: clamp(1rem, 8vw, 4rem);
  margin-top: 1em;
  margin-bottom: 6rem;
  font-style: normal;
}

/* スマホ向け調整（600px以下） */
@media screen and (max-width: 600px) {
  .recommendation {
    flex-direction: column;
    height: auto;
    padding: 1rem;
  }

  .box2 .recommendation p {
    padding: 0 1rem;
    text-align: center;
  }

  .box2 .signature {
    text-align: center;
    padding-right: 0;
    margin-bottom: 3rem;
  }
}

/*（コンテンツの紹介ボックス）
---------------------------------------------------------------------------*/

/* ボックスの中のチェシャ猫イラスト */
.box2 .see-through-cat {
  position: absolute;
  left: clamp(70px, 12vw, 250px);
  top: clamp(84px, 9vw, 140px);
  width: clamp(120px, 18vw, 250px); /* 最小〜最大幅を制限 */
  opacity: 0.5;
  transform: rotate(-20deg);
  transition: all 0.3s ease;
}

/* スマホ向け（700px以下） */
@media screen and (max-width: 700px) {
  .box2 .see-through-cat {
    left: 3.3rem;
    top: 6rem;
  }
}

/* スマホ向け（600px以下） */
@media screen and (max-width: 600px) {
  .box2 .see-through-cat {
    left: 2rem;
    top: 5rem;
    width: clamp(70px, 40vw, 115px); /* 少し大きめにして見やすく */
    transform: rotate(-18deg); /* 回転を少し緩めてバランス調整 */
  }
}

/* スマホ向け（500px以下） */
@media screen and (max-width: 500px) {
  .box2 .see-through-cat {
    left: clamp(10px, 2vw, 50px);
    top: 2rem;
    width: 95px;
  }
}

/* スマホ向け（400px以下） */
@media screen and (max-width: 400px) {
  .box2 .see-through-cat {
    width: 80px;
  }
}

/*ボックスの上キャッチコピー（画像）*/
.box2 .catch-text-neo {
  position: absolute;
  right: 19vw; /*右からの配置場所*/
  top: -11vw; /*上からの配置場所*/
  width: 55%; /*イラストの幅。*/
}

/*box2 
---------------------------------------------------------------------------*/
.box2 .illust4 {
  width: 20%;
}

/*テキストボックス*/
.box2 .text {
  margin-bottom: 2rem; /*下に5文字分の余白*/
}

/* スマホ用の調整 */
@media screen and (max-width: 900px) {
  .box2 p {
    padding: 10px 100px; /* スマホでは余白を小さく */
  }
}

/* スマホ用の調整 */
@media screen and (max-width: 700px) {
  .box2 p {
    padding: 10px 70px; /* スマホでは余白を小さく */
  }
}

/* スマホ用の調整 */
@media screen and (max-width: 500px) {
  .box2 p {
    padding: 10px 45px; /* スマホでは余白を小さく */
  }
}

/* スマホ用の調整 */
@media screen and (max-width: 400px) {
  .box2 p {
    padding: 10px 30px; /* スマホでは余白を小さく */
  }
}

.box2 .content-container {
  display: flex;
  flex-direction: row; /* コンテンツを横並びにする */
}

/*画面幅600px以上の追加指定*/
@media screen and (min-width: 600px) {
  .box2 {
    display: block; /* フレックスボックスを解除 */
    gap: 2rem;
    border-radius: 20vw 0 20vw 0; /*角を丸くする指示。左上、右上、右下、左下への順番。*/

    /* テキスト部分の調整 */
    .box2 .text {
      margin-bottom: 3rem;
    }

    /* 画像部分の調整 */
    .box2 .image img {
      max-width: 80%;
    }
  }

  .box2 > * {
    flex: 1;
  }

  /*テキストボックスの上の小さなイラスト*/
  .box2 h2 img {
    width: 5vw; /*幅*/
  }

  .box2 .text {
    margin-bottom: 0; /*下マージンのリセット*/
  }
} /*追加指定ここまで*/

/*画像を囲むブロック*/
.box2 .image {
  margin-bottom: 2rem;
}

.box2 .description {
  max-width: 90%;
  text-align: left;
}

/*画像の角を少し丸くする指定*/
.box2 .image img {
  border-radius: 10px;

  max-width: 500px; /* 画像の最大幅を設定 */
  height: auto; /* 画像の高さを自動設定 */
}

/*画像ブロック内の１枚目の写真への追加指定*/
.box2 .image img:nth-of-type(1) {
  width: 95%; /*画像の幅*/
}

/*画像ブロック内の２枚目の写真への追加指定*/
.box2 .image img:nth-of-type(2) {
  width: 40%; /*画像の幅*/
}
.box2 .image img:nth-of-type(2) {
  position: absolute;
  right: 0; /*画像ブロックに対して右側からの配置場所*/
  top: 15vw; /*画像ブロックに対して上からの配置場所*/
}

.speed1 {
  transform: translateY(30px) !important; /* 初期位置を40px下げる */
}

/* センター寄せリストのスタイル */
.centered-list {
  list-style: disc;
  padding: 0;
  display: inline-block; /* リスト全体をセンター寄せ */
  text-align: left; /* リスト項目を左寄せ */
}

.centered-list li {
  text-align: left; /* リスト項目を左寄せ */
  margin: 5px 0; /* 項目間の余白 */
  font-size: 30px;
}

/* コンテナ内の要素を横並びにする */
.content-container {
  justify-content: center; /* 横方向の中央寄せ */
  flex-wrap: wrap; /* スマホ時は縦並び */
}

/* 画像部分の設定 */
.content-container .image img {
  width: 300px; /* 画像サイズ調整 */
  height: auto;
  border-radius: 10px;
}

/* 説明文の設定 */
.content-container .description {
  max-width: 400px;
  text-align: left;
}

/* スマホ用レイアウト */
@media screen and (max-width: 768px) {
  .content-container {
    flex-direction: column; /* 縦並びに */
    text-align: center;
  }

  .content-container .image img {
    width: 80%; /* スマホでは幅を広げる */
  }

  .content-container .description {
    text-align: center;
  }
}

/* storesボタン */
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  box-sizing: inherit;
}

.stores-btn,
a.stores-btn,
button.stores-btn {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
  position: relative;
  display: inline-block;
  padding: 1rem 4rem;
  margin-top: 30px;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #212529;
  border-radius: 0.5rem;
}

a.btn-malformation {
  font-size: 2rem;
  padding: 1.5rem 2.5rem;
  color: #fff;
  border-radius: 100% 80px / 80px 100%;
  background-color: #eb6100;
}

a.btn-malformation:hover {
  color: #fff;
  border-radius: 60% 80% / 100% 80%;
}

.btn-malformation--pastel {
  background: #fca1a1;
  background: -webkit-linear-gradient(-45deg, #fca1a1 40%, #fcfc5d 100%);
  background: -webkit-linear-gradient(315deg, #fca1a1 40%, #fcfc5d 100%);
  background: linear-gradient(135deg, #fca1a1 40%, #fcfc5d 100%);
  -webkit-box-shadow: 30px 10px 0 #fefeb3;
  box-shadow: 30px 10px 0 #fefeb3;

  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#fca1a1', endColorstr='#fcfc5d', GradientType=1);
}

/* ── storesボタン 小サイズバリアント ── */
/* storesボタン 小サイズバリアント */
.stores-btn.small {
  font-size: 1rem;
  padding: 0.25rem 0.5rem;
  margin-top: 0;
  /* border-radius は上書きせずに、もとの形をキープ */
  /* box-shadow だけ少し抑えたいなら下記だけ入れる */
  box-shadow: 5px 2px 0 #fefeb3;
}

/* ── 小サイズボタンは通常の丸角に ── */
.stores-btn.small,
.stores-btn.small.btn-malformation,
.stores-btn.small.btn-malformation--pastel {
  /* 元の歪んだ border-radius を打ち消す */
  border-radius: 0.5rem;
  /* 影も少し控えめに */
  box-shadow: 5px 2px 0 #fefeb3;
}

/* 小サイズ storesボタン 水色→緑グラデーション */
.stores-btn.small.btn-malformation--aqua {
  /* background: #a0e7ff; */
  /* background: -webkit-linear-gradient(135deg, #a0e7ff 0%, #a0ffb3 100%); */
  background: linear-gradient(135deg, #7eacee 0%, #68e280 100%);
  /* color: #004d40; */
  border-radius: 0.5rem;
  box-shadow: 5px 2px 0 #c4ff9b;
  letter-spacing: 0.05em;
  text-decoration: none;
}

/* 必要ならホバー時も調整 */
.stores-btn.small.btn-malformation:hover {
  border-radius: 40% 60% / 80% 60%;
}

/*list1（コースのご案内コーナー）
---------------------------------------------------------------------------*/
/* 冒頭の大きなロゴの飾り */
.logo-kazari {
  position: relative;
  background: url("../../neo/images/autograph.png") no-repeat center top / 40%;
  background-size: clamp(350px, 44vw, 570px);
}

/* 白い透かしレイヤー */
.logo-kazari::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.4);
  z-index: 1;
}

/* 1期～5期　背景画像　デフォルト（PNG）*/
.list1.image1 {
  background: url("../../neo/images/neo1.png") no-repeat center/cover;
  position: relative;
}
.list1.image2 {
  background: url("../../neo/images/neo2.png") no-repeat center/cover;
  position: relative;
}
.list1.image3 {
  background: url("../../neo/images/neo3.png") no-repeat center/cover;
  position: relative;
}
.list1.image4 {
  background: url("../../neo/images/neo4.png") no-repeat center/cover;
  position: relative;
}
.list1.image5 {
  background: url("../../neo/images/neo5.png") no-repeat center/cover;
  position: relative;
}

/* WebP がサポートされていれば上書き */
@supports (background-image: url("../../neo/images/neo1.webp")) {
  .list1.image1 {
    background: url("../../neo/images/neo1.webp") no-repeat center/cover;
  }
}
@supports (background-image: url("../../neo/images/neo2.webp")) {
  .list1.image2 {
    background: url("../../neo/images/neo2.webp") no-repeat center/cover;
  }
}
@supports (background-image: url("../../neo/images/neo3.webp")) {
  .list1.image3 {
    background: url("../../neo/images/neo3.webp") no-repeat center/cover;
  }
}
@supports (background-image: url("../../neo/images/neo4.webp")) {
  .list1.image4 {
    background: url("../../neo/images/neo4.webp") no-repeat center/cover;
  }
}
@supports (background-image: url("../../neo/images/neo5.webp")) {
  .list1.image5 {
    background: url("../../neo/images/neo5.webp") no-repeat center/cover;
  }
}

/*ボックス１個あたり*/
.list1 {
  padding: var(
    --space-large
  ); /*ボックス内の余白。冒頭のspace-largeを読み込みます。*/
  position: relative;
  overflow-x: hidden;
  margin-bottom: 1vw; /*下に空けるスペース。ボックス同士の隙間です。*/
}

.list1.image1::before,
.list1.image2::before,
.list1.image3::before,
.list1.image4::before,
.list1.image5::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); /* 黒の60%透明 */
  z-index: 0; /* テキストの下に来るように */
}
/*テキストブロック*/
.list1 .text {
  position: relative;
  z-index: 1;
  width: 80%; /*幅*/
  height: 100%;
  color: #fff; /*文字色*/
  text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.3); /*テキストの影。右へ、下へ、ぼかし幅、0,0,0は黒のことで0.3は色が30%出た状態。*/
}

/*画面幅600px以上の追加指定*/
@media screen and (min-width: 600px) {
  /*テキストブロック*/
  .list1 .text {
    width: 40%; /*幅*/
  }
} /*追加指定ここまで*/

/*テキストの配置場所を入れ替えたい場合のスタイル。*/
.list1 .text.reverse {
  margin-left: auto;
}

/*list1内のh3見出し*/
.list1 h3 {
  margin: 0;
  padding: 0;
  font-weight: normal; /*h要素のデフォルトの太字を標準に*/
  position: relative;
  font-size: 2rem; /*文字サイズを200%*/
  letter-spacing: 0.1rem; /*文字間隔を少しだけ広く*/
  line-height: 1.2; /*行間を狭くする*/
}

/*list1内のh3見出し内の１文字目の大きな文字*/
.list1 h3 .large {
  font-size: 7rem; /*文字サイズを7倍*/
}

/*見出しの右上にある英語の小さな文字*/
.list1 h3 span:not(.large) {
  font-size: 1rem; /*文字サイズを標準に戻す*/
  opacity: 0.5; /*透明度50%*/
  position: absolute;
  right: 0px; /*右からの配置場所*/
  top: 0px; /*上からの配置場所*/
}

/*点線の囲み
---------------------------------------------------------------------------*/

/* 点線の囲み（box2内） */
.box2 .highlight-box {
  border: 2px dashed #666;
  margin: 50px clamp(0.1rem, 10vw, 178px); /* ← pと同じ左右余白に揃える */
  padding: 20px clamp(0.1rem, 1vw, 50px);
  box-sizing: border-box;
  text-align: center;
}

/* テキストスタイル */
.box2 .highlight-box p {
  font-size: clamp(1rem, 2.2vw, 1.2rem); /* ← pと同じフォントサイズに揃える */
  line-height: 2;
  text-align: left;
  margin: 0 auto 1em;
  padding: 0;
}

/* スマホ向け（600px以下） */
@media screen and (max-width: 600px) {
  .box2 .highlight-box {
    padding: 1.5rem 1rem;
    margin: 0 4rem 2rem;
  }
}

/* スマホ向け（500px以下） */
@media screen and (max-width: 500px) {
  .box2 .highlight-box {
    margin: 0 2rem 2rem;
  }
}

/* スマホ向け（400px以下） */
@media screen and (max-width: 400px) {
  .box2 .highlight-box {
    margin: 0 1.2rem 2rem;
  }
}

/*縦書き用の設定
---------------------------------------------------------------------------*/
/*ボックス全体*/
.title-bg {
  display: flex; /*flexボックスを使う指定*/
  justify-content: center; /*並びかたの種類の指定*/
}

/*ボックス内のh2*/
.title-bg h2 {
  font-weight: normal; /*h要素のデフォルトの太字を標準に*/
  display: flex; /*flexボックスを使う指定*/
  flex-direction: column; /*縦並びにする指定*/
  align-items: center; /*垂直揃えの指定。天地中央に配置されるように。*/
  padding-bottom: 3vw;
}

/*縦書きにする指定*/
.title-bg h2 .tate {
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 2rem;
}

/*横書きで使う際の指定。※縦書きを横書きにする為の指定ではないのでご注意下さい。*/
.title-bg h2 .yoko {
  font-size: 0.9rem; /*文字サイズ90%*/
  margin-bottom: 3vw; /*下に空けるスペース*/
  letter-spacing: 0.1rem; /*文字間隔を少しだけ広く*/
  opacity: 0.5; /*透明度50%*/
}

/*list1内のbtn2の設定。マウスオン時にボタンの背景色を追加。*/
.list1:hover .btn2 a {
  background: rgba(
    0,
    0,
    0,
    0.8
  ); /*背景色。0,0,0は黒のことで0.8は色が80%出た状態。*/
}