@charset "utf-8";
*{padding: 0;margin: 0;}

html {font-size: 15px;box-sizing: border-box;font-family: "Noto Sans JP","游ゴシック","Yu Gothic","Hiragino Kaku Gothic ProN","Hiragino Kaku Gothic Pro","ヒラギノ角ゴ Pro W3",メイリオ,Meiryo,sans-serif;}
body{background-color: #f0f2f3;}
a{text-decoration: none;color: #535353;}
li{list-style: none;}
img {width: 100%;height: auto;vertical-align: bottom;}
ul{padding-left: 0;}
.none{display: none;}
.l-header {
  box-sizing: border-box;
  max-width: 900px;
  margin: 0 auto;
  padding: 10px 5px;
  display: flex;
  align-items: center;
}
.l-header__logo {width: 140px;display: inline-block;}

/* TOP */
.main_container{max-width: 900px;margin: 0px auto 40px;width: 98%;}
.main_img{max-width: 500px;margin: 0 auto;width: 100%;}
.main_img img{width: 100%;}
.main_container h1{font-size: 23px;display: block;text-align: center;margin: 40px auto 10px;font-weight: bold;line-height: 1.3;}
.main_container h1 span{font-size: 16px;color: #065ca3;}
.main_container .area{max-width: 500px;text-align: right;display: block;margin: 5px auto 30px;}


/* パンくずリスト */
.pan {
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  list-style: none;
  font-size: 13px;
  margin-top: 5px;
  margin-left: 3px;
}

.pan li:not(:last-of-type)::after {
  content: ">";
  margin: 0 .2em; /* 記号の左右の余白 */
  color: #777; /* 記号の色 */
}

.pan a {
  color: inherit;
  text-decoration: none;
  color: #0a82e4;
}

/* ========== ヘッダー ========== */
header.top {
  text-align: center;
  margin-bottom: 40px;
}

header.top h1 {
  max-width: 530px;
  margin: 50px auto 0px;
  line-height: 1.4;
  font-size: 1.7rem;
  font-weight: bold;
}

header.top .small {
  font-weight: normal;
  font-size: 1.1rem;
  color: #666;
}

header.top .bunya span {
  display: inline-block;
  margin: 0 6px;
  padding: 4px 10px;
  font-size: 0.9rem;
  border-radius: 20px;
  background-color: #eee;
}

/*----------------トップスライド-----------------------*/

  .slider{
    position:relative;
    width:100%;
    max-width:530px;
    height:380px;
    overflow:hidden;
    border-radius:12px;
    box-shadow:0 5px 18px rgba(0,0,0,0.15);
    margin: 0px auto 70px;
  }
  .slides{
    display:flex;
    width:500%;               /* = 譫壽焚 ﾃ� 100% */
    height:100%;
    transition:transform .5s ease;
  }
  .slides img{
    width:20%;                /* = 100 ﾃｷ 譫壽焚 */
    height:100%;
    object-fit:cover;
    display:block;
  }
  .arrow{
    position:absolute;
    top:50%;
    transform:translateY(-50%);
    font-size:25px;
    color:white;
    background:rgba(0,0,0,0.4);
    padding:8px 14px;
    border-radius:50%;
    cursor:pointer;
    user-select:none;
  }
  .arrow.left{left:16px;}
  .arrow.right{right:16px;}
  .dots{
    position:absolute;
    bottom:12px;
    left:50%;
    transform:translateX(-50%);
    display:flex;
    gap:8px;
  }
  .dot{
    width:12px;height:12px;
    border-radius:50%;
    background:#fff8;
    cursor:pointer;
    transition:background .2s;
  }
  .dot.active{background:#3b82f6;}

/*----------------動画----------------------*/
.video {
  position: relative;
  width: 100%;          /* 画面幅いっぱい */
  max-width: 100%;      /* はみ出さないように */
  aspect-ratio: 16 / 9; /* 高さを自動計算（モダンブラウザ対応） */
  background: #000;     /* 読み込み前に黒背景 */
  overflow: hidden;
  margin-bottom: 50px;
}

.video iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;   /* 親に対して100% */
  height: 100%;  /* 親に対して100% */
  border: 0;
}


/* ========== 詳細エリア ========== */
.item1 h2, .item2 h2{
  border-left: 3px solid #24437e;
  font-size: 1.3rem;
  margin-bottom: 20px;
  padding-left: 10px;
}

.item1 ul {
  margin-bottom: 50px;
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.item1 ul li{
  
  font-weight: bold;
  background-color: #fff;
  display: block;
  padding: 5px;
  max-width: 260px;
  width: 100%;
  border-radius: 20px;
  text-align: center;
}

.item1 table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 50px;
}

.item1 th,
.item1 td {
  background-color: #fff;
  border: 1px solid #ece8e8;
  padding: 10px;
  text-align: center;
  font-size: 1rem;
}

.item1 th {
  background: #1b3177;
  color: #ffffff;
  font-weight: 600;
}

/* ========== 備考セクション ========== */
.item2 {margin-top: 40px;}

.item2 h3 {
  display: inline-block;
  border-bottom: 1px solid #000;
  font-size: 1.3rem;
  margin-bottom: 20px;
  padding: 0px 3px 5px 3px;
}

.item2 .box1 {
  background: #fff;
  padding: 20px 20px 30px 20px;
  margin-bottom: 20px;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.course ul{margin-bottom: 30px;color: #4b4b4b;}

.box1 h4 {
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.box1 ul {font-size: 0.95rem;}


/* ========== ボタンエリア ========== */
    .btn-area {
      margin-top: 10px;
      display: flex;
      gap: 5px;
    }
    .btn {
      flex: 1;
      padding: 15px 5px;
      background: linear-gradient(180deg, #e9582b, #fca04a);
      color: #fff;
      text-align: center;
      border-radius: 10px;
      text-decoration: none;
      font-weight: bold;
      font-size: 15px;
      transition: 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border: 2px solid rgba(255,255,255,0.6);
      box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    }
    .btn span {
      display: inline-block;
      transition: transform 0.3s ease;
    }
    .btn:hover span {
      transform: translateX(6px);
    }
    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    /* 入試ページ有りバッジ */

    .btn-exam {
      background: linear-gradient(180deg, #2239b8, #1dbcec);
    }
    /* 入試ページなし → ボタンは右寄せ */
    .btn-area.single {
      justify-content: flex-end;
    }
    .btn-area.single .btn {
      flex: 0 0 48%;
    }

    .sanpoukun{width: 30px;height: 30px;}
 /* フッター */
.l-footer {
  max-width: 900px;
  box-sizing: border-box;
  margin: 50px 0 0 0;
  font-size: 62.5%;
  margin: 0 auto;
}
.l-footer__container {
padding: 0 10px 16px;

}
.l-footer__logo {
  display: block;
  width: 80px;
  margin: 0 auto;
}
.l-footer__list {
  
  margin: 40px 0 0 0;
  padding: 0 50px;
  display: flex;
  flex-flow: row wrap;
  justify-content: center;
  gap: 30px;
}
.l-footer__link {
  display: inline-block;
  font-size: 1rem;
  text-decoration: none;
}
.l-footer__copy {
  margin: 30px 0 0 0;
  text-align: center;
}


@media (max-width: 600px){
.none{display: block;}
header.top .small {font-size: 15px;}
header.top {margin-bottom: 20px;}
header.top h1 {margin: 20px auto 0px;font-size: 21px;}

/*----------------トップスライド-----------------------*/
.slider{height:280px;margin-bottom: 50px;}
.arrow{font-size: 18px;}
.arrow.left{left:5px;}
.arrow.right{right:5px;}
.dot{width:10px;height:10px;}

/* ========== 詳細エリア ========== */
.item1 h2{font-size: 1.2rem;}
.item1 ul li{max-width: 400px;font-size: 14px;}
.item1 td {font-size: 0.9rem;padding: 10px 5px;}
.item2 .box1 {
  padding: 10px 10px 20px 10px;
  margin-bottom: 10px;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}


/* ========== 備考セクション ========== */
.item2 {margin-top: 40px;}
.item2 h2 {font-size: 1.2rem;margin-bottom: 17px;padding: 0px 3px 3px 3px;}
.box1 {margin-bottom: 15px;}

.box1 h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
}

.box1 ul {font-size: 0.95rem;}



/* ========== ボタンエリア ========== */
    .btn-area {
      margin-top: 10px;
      display: flex;
      gap: 5px;
    }
    .btn {
      flex: 1;
      padding: 15px 5px;
      background: linear-gradient(180deg, #e9582b, #fca04a);
      color: #fff;
      text-align: center;
      border-radius: 10px;
      text-decoration: none;
      font-weight: bold;
      font-size: 15px;
      transition: 0.3s ease;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 6px;
      border: 2px solid rgba(255,255,255,0.6);
      box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    }
    .btn span {
      display: inline-block;
      transition: transform 0.3s ease;
    }
    .btn:hover span {
      transform: translateX(6px);
    }
    .btn:hover {
      transform: translateY(-2px);
      box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    }
    /* 入試ページ有りバッジ */

    .btn-exam {
      background: linear-gradient(180deg, #2239b8, #1dbcec);
    }
    /* 入試ページなし → ボタンは右寄せ */
    .btn-area.single {
      justify-content: flex-end;
    }
    .btn-area.single .btn {
      flex: 0 0 48%;
    }


/* フッター */
.l-footer {margin: 50px 0 0 0;font-size: 62.5%;}
.l-footer__list {margin: 40px 0 0 0;padding: 0 10px;gap: 10px;display: flex;flex-flow: row wrap;justify-content: center;}
.l-footer__link {font-size: 0.9rem;}
.l-footer__copy {margin: 10px 0 0 0;}
}