@charset "utf-8";					/*使用する文字コード*/

/* ===============================
   ファーストビュースライド 
=============================== */
.item1{
  opacity: 0;
  width: 100%;
  height: auto;
  object-fit: cover;
  position: absolute;
  left: 0;
  top: 0;
  animation: anime 25s infinite;
}

/* ←ここは外に出す！！！！ */
.item1:nth-of-type(2) {
  animation-delay: 5s;
}

.item1:nth-of-type(3) {
  animation-delay: 10s;
}

.item1:nth-of-type(4) {
  animation-delay: 15s;
}

.item1:nth-of-type(5) {
  animation-delay: 20s;
}
@keyframes anime {
  0%   { opacity: 0; }
  10%  { opacity: 1; }
  30%  { opacity: 1; }
  40%  { opacity: 0; }
  100% { opacity: 0; }
}

.slideBox{
  height: 100vh;       /* ←画面いっぱい */
  position: relative;  /* ←これ重要 */
  overflow: hidden;
  margin-top: 0px;
}



/* タブ */
#tabcontrol a{
  display: inline-block;
  padding: 0.75em 10em;
  text-decoration: none;
  color: black;
}

#tabbody div{
  padding: 1em;
}


/* ▼スマホ▼ */
@media screen and (max-width: 768px) {

  .slideBox{
    position:relative;
    width:100%;
    height:85vw;
    overflow:hidden;
  }

  .slideBox img{
    width:100%;
    height:85vw; /* ←ここ合わせる */
    object-fit:cover;
    display:block;
  }

}






/* ===============================
コース一覧
=============================== */
/* コース一覧タイトル */
.course-title{
  display:block;
  width:250px;
  margin:80px auto 40px;
}
/* タブ全体 */
#tabcontrol{
  display:flex;
  justify-content:center;
  gap:5px;
  margin:70px auto -1px;
  position:relative;
  z-index:10;
}

/* タブボタン */
#tabcontrol a{
  display:inline-block;
  padding:10px 150px;
  border-radius:5px 5px 0 0;
  text-decoration:none;
  color:#534741;
  border:1px solid #ddd;
  border-bottom:none;
  background:#ece5dc; /* ←通常 */
  font-size:14px;
  font-family:'M PLUS Rounded 1c', sans-serif;
  transition:0.3s;
}

/* hover（選択されてない時） */
#tabcontrol a:hover{
  background:#dfd4c5;
}

/* 選択中 */
#tabcontrol a.active{
  background:#f9f8f1;
}

/* 背景 */
#tabpage1,
#tabpage2{
  background:#f9f8f1;
  padding:80px 40px;
}



/* ===============================
上2つ
=============================== */

.course-grid-large{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:30px;
  max-width:1700px;
  margin:0 auto 30px;
}

/* ===============================
下3列
=============================== */

.course-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:30px;
  max-width:1700px;
  margin:0 auto;
}

/* 20歳～だけ4列 */
.course-grid-adult{
  grid-template-columns:repeat(4,1fr);
}


/* ===============================
カード
=============================== */

.course-card{
  text-align:center;
  background:transparent !important;
}

/* 画像 */
.course-card img{
  width:100%;
  display:block;
  transition:0.4s;
}

/* hover */
.course-card:hover img{
  transform:translateY(-5px);
  opacity:0.92;
}

/* タイトル */
.course-card h3{
  font-size:22px;
  color:#534741;
  margin-top:22px;
  margin-bottom:0px;
  font-family:'M PLUS Rounded 1c', sans-serif;
  font-weight:500;
  letter-spacing:0.05em;
}

/* サブ */
.course-card p{
  color:#777;
  font-size:14px;
  line-height:1.8;
  margin-top:-5px;
}

/* ▼スマホ▼ */
@media (max-width:768px){

/* タイトル */
.course-title{
  width:55%;
  margin:0 auto 30px;
}

/* タブ全体 */
#tabcontrol{
  gap:3px;
  margin:40px auto -1px;
}

/* タブボタン */
#tabcontrol a{
  padding:10px 35px;
  font-size:13px;
  border-radius:5px 5px 0 0;
}

/* 背景 */
#tabpage1,
#tabpage2{
  padding:40px 2px;
}

/* 上2つ */
.course-grid-large{
  grid-template-columns:1fr;
  gap:20px;
  margin-bottom:20px;
}

/* 下 */
.course-grid,
.course-grid-adult{
  grid-template-columns:repeat(2,1fr);
  gap:2px;
}

/* タイトル */
.course-card h3{
  font-size:13px;
  margin-top:8px;
}

/* サブ */
.course-card p{
  font-size:9px;
  line-height:1.2;
  margin-top:-2px;
}

.course-section{
  padding:70px 0;
}

}





/* ===============================
   キャンペーン1
=============================== */

/* 全体 */
.campaign-section{
  text-align:center;
  padding:80px 20px 100px;  /* ←上だけ増やす */
  margin-top:80px !important;
  background:#fff;
}

/* タイトル */
.campaign1-title{
  width:700px;
  max-width:90%;
  margin-bottom:40px;
}

/* 説明文 */
.campaign-text{
  font-size:16px;
  color:#534741;
  margin-bottom:40px;
}

/* ボタンエリア */
.campaign-links{
  display:flex;
  justify-content:center;
  gap:30px;   /* ←間隔 */
  flex-wrap:wrap;
  max-width:1400px;
  margin:0 auto;
}

/* ボタン画像 */
.campaign-links img{
  width:420px;
  max-width:100%;

  border-radius:10px;
  box-shadow:0 10px 25px rgba(0,0,0,0.1);
  transition:0.3s;
}

/* ホバー */
.campaign-links img:hover{
  transform:translateY(-5px);
opacity:0.92;
}



/* ▼スマホ▼ */

@media (max-width:768px){

.campaign-section{
    padding:0px 10px 35px;
  }

  /* タイトル */
  .campaign1-title{
    width:92%;
    margin-top:-50px;
  }

/* テキスト */
.campaign-text{
  font-size:10px;
  margin:-15px 0 18px;
  line-height:1.7;
}

/* 縦並び */
.campaign-links{
  flex-direction:column;
  gap:15px;
}

/* 画像 */
.campaign-links img{
  max-width:80%;
}

}





/* ===============================
　お知らせ 
=============================== */

.news-section{
  text-align:center;
  padding:60px 20px;
}

.news-title{
  height:100px;
  margin-bottom:40px;
}

.news-wrap{
  max-width:1200px;
  margin:0 auto;
  display:flex;
  gap:25px;
}

.news-item{
  flex:1;
  display:flex;
  align-items:center;
  gap:18px;
  padding:10px 0;
  background:none;     /* 白枠なし */
  box-shadow:none;     /* 影なし */
  border-radius:0;
}

/* ロゴ */

.news-item img{
  width:65px;          /* 少し大きく */
  height:auto;
  display:block;
  border-radius:0;
}

/* 文字 */

.news-text{
  text-align:left;
}

.news-text .date{
  color:#cbb79a;
  font-size:12px;
  font-weight:500;
  letter-spacing:0.05em;
}

.news-text p{
  margin:3px 0 0;
  font-size:13px;
  line-height:1.6;
  color:#777;
}

/* ▼スマホ▼ */

@media screen and (max-width:768px){

  .news-wrap{
    flex-direction:column;
    gap:15px;
  }

  .news-item{
    width:100%;
    justify-content:flex-start;
  }

/* 全体 */
.news-section{
  text-align:center;
}

/* タイトル */
.news-title{
  width:90%;
  max-width:320px;

  height:auto; /* ←これ重要 */

  display:block;
  margin:0 auto 20px;
}

}




/* ===============================
　 メニューボタン 
=============================== */
.info-menu{
  background:#ece5dc;
  padding:50px 20px;
}

.info-wrap{
  max-width:2200px;
  width:95%;
  margin:0 auto;

  display:flex;
  justify-content:center;
  gap:3px;

  flex-wrap:nowrap;
}

.info-btn{
  flex:1;
}

.info-btn img{
  width:100%;
  max-width:350px;   /* ← ボタン大きく */
  height:auto;
  display:block;
  transition:0.3s;
}

.info-btn img:hover{
  transform:translateY(-3px);
  opacity:0.9;
}

/*▼ スマホ▼ */

@media screen and (max-width:768px){

  .info-menu{
    padding:30px 10px;
  }

/* 一覧 */
.info-wrap{
  width:100%;

  display:grid;
  grid-template-columns:repeat(2,1fr);

  column-gap:8px;  /* ←左右 */
  row-gap:18px;    /* ←上下広げる */

  flex-wrap:unset;
}

/* ボタン */
.info-btn img{
  width:88%;
  max-width:100%;
  margin:0 auto;
  display:block;
}

}






}