@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=League+Gothic&display=swap");
/* 固定フッターボタンのスタイル */
/*Custom*/
.mt-1 {
  margin-top: 5px; }

.mt-2 {
  margin-top: 10px; }

.mt-3 {
  margin-top: 15px; }

.mt-4 {
  margin-top: 20px; }

.mt-5 {
  margin-top: 25px; }

.marker {
  background-image: linear-gradient(transparent 60%, #ffff88 60%);
  /*  color: #333;*/
  font-weight: bold; }

/* 各ボタンのスタイル */
.bottom_btn {
  max-width: 750px;
  width: 80%;
  margin: 0 auto; }

.btn {
  display: flex;
  /* アイコンとテキストをflexboxで横並びにする */
  justify-content: center;
  /* テキストとアイコンを中央に寄せる */
  align-items: center;
  /* 垂直方向の中央揃え */
  padding: 15px 10px;
  /* パディングを調整 */
  border-radius: 3px;
  /* 角を丸くする */
  text-decoration: none;
  /* 下線を消す */
  font-weight: bold;
  width: 99%;
  /* ボタンの幅 */
  white-space: nowrap;
  /* ボタン内のテキストとアイコンが改行されないようにする */ }

.btn--line {
  background-color: #ec3d4e;
  /* 赤色のボタンの背景色 */
  color: #fff;
  /* 赤色のボタンの文字色 */ }

.btn--yellow {
  background-color: #333333;
  /* 黄色のボタンの背景色 */
  color: #ffffff;
  /* 黄色のボタンの文字色 */ }

.btn--green {
  background-color: #00b900;
  /* 黄色のボタンの背景色 */
  color: #ffffff;
  /* 黄色のボタンの文字色 */ }

.fixed-bottom-buttons {
  position: fixed;
  /* 画面に固定 */
  bottom: 0;
  /* 画面下部に配置 */
  left: 0;
  /* 画面左端に配置 */
  width: 100%;
  /* 画面幅いっぱいに広げる */
  display: flex;
  /* 子要素（ボタン）を横並びにする */
  justify-content: space-evenly;
  /* ボタンを均等な間隔で配置 */
  align-items: center;
  /* 垂直方向の中央揃え */
  /*padding: 10px 0;*/
  /* 上下のパディングを設定 */
  background-color: rgba(240, 240, 240, 0.9);
  /* 半透明のグレー */
  z-index: 1000;
  /* 他のコンテンツの上に表示されるようにする */
  /* 各ボタンを囲むpタグのスタイル調整 */
  /* アイコンのスタイル */
  /* スマートフォンでの表示調整 (任意: 画面幅が小さい場合のフォントサイズなど) */ }
  .fixed-bottom-buttons p {
    flex-basis: 49%;
    /* 親要素の45%の幅にする */
    text-align: center; }
  .fixed-bottom-buttons .icon-after-text {
    margin-left: 8px;
    /* テキストとアイコンの間にスペースを作成 */
    font-size: 0.9em;
    /* アイコンのサイズをテキストより少し小さくする */ }
  @media (max-width: 749px) {
    .fixed-bottom-buttons .btn {
      font-size: 14px;
      /* スマートフォンでのフォントサイズ */
      padding: 12px 8px;
      /* スマートフォンでのパディング */ }
    .fixed-bottom-buttons .icon-after-text {
      margin-left: 6px;
      /* スマホでのアイコンとテキストの間隔 */
      font-size: 0.8em;
      /* スマホでのアイコンサイズ */ } }

/**ヘッダーボタン**/
.sp_linebtn {
  background-color: #00b900;
  float: right;
  display: flex;
  align-items: center;
  margin-right: 0%;
  margin-top: 0%;
  padding: 15px 10px;
  font-size: 10px;
  height: 40px;
  text-align: center;
  line-height: 0.9rem;
  color: #FFFFFF; }

/* モバイルヘッダーのアクションをFlexboxコンテナにする */
.mobile-header-actions {
  display: flex;
  align-items: center;
  /* SlickNavのslicknav_menuがfixedなので、こちらもfixedにして並列に制御 */
  position: fixed;
  /* SlickNavのメニューと同じpositionにする */
  top: 0;
  right: 0;
  /* z-indexをSlickNavメニューの10000より高く設定して前面に表示 */
  z-index: 10002;
  /* SlickNavメニューより高く設定 */
  padding: 10px 20px;
  /* ヘッダーのパディングに合わせて調整 */
  /* 背景色を設定しないと透過して下の要素が見える可能性がある */
  background-color: transparent;
  /* 背景透過、必要に応じて色を設定 */
  margin-right: 30px; }

/*小さいボタン*/
.small-button {
  display: inline-block;
  width: 100%;
  margin: 0 auto;
  text-align: center;
  border: 1px solid #c1c1c1;
  border-radius: 3px;
  text-decoration: none;
  font-size: 14px;
  cursor: pointer;
  transition: background-color 0.3s; }

.small-button:hover {
  background-color: #ffffff; }

#media {
  /* ロゴリストのスタイル (Flexbox) */
  /* ロゴ画像のスタイル */ }
  #media h2.media {
    font-family: "League Gothic", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: 5rem;
    color: #333333;
    /*margin-bottom: 2rem;*/
    margin-top: 20px; }
    #media h2.media span {
      font-size: 13px; }
  #media .logo-list {
    display: flex;
    /* Flexboxを有効にする */
    flex-wrap: wrap;
    /* 要素がはみ出たら折り返す */
    justify-content: center;
    /* 水平方向の中央揃え */
    align-items: center;
    /* 垂直方向の中央揃え */
    gap: 30px 40px;
    /* 要素間の隙間 (縦 横) */
    /* リストのデフォルトスタイルをリセット */
    padding: 0;
    margin: 0;
    list-style: none; }
  #media .logo-item img {
    max-width: 150px;
    /* ロゴの最大幅 */
    height: auto;
    /* 高さは自動で調整してアスペクト比を維持 */
    vertical-align: middle;
    /* 画像の下の余分な隙間を防ぐ */ }
  #media .mt-5 {
    margin-top: 30px; }

/* 2カラムレイアウトのコンテナ */
.two-column-layout {
  display: flex;
  align-items: center;
  /* 垂直方向の中央揃え */
  gap: 20px;
  /* テキストと画像の間の隙間 */
  max-width: 1100px;
  margin: 30px auto;
  /* 上下の余白と、左右中央揃え */
  padding: 20px; }
  .two-column-layout h3 {
    line-height: 1.8em; }

/* テキストと画像それぞれのコンテナ */
.text-content,
.image-content {
  flex: 1;
  /* 親要素の幅を均等に分け合う (1:1の比率) */
  min-width: 0;
  /* flexアイテムの縮小に関するバグを防ぐためのおまじない */ }

/* 画像のスタイル */
.image-content img {
  width: 100%;
  /* 親要素の幅いっぱいに広がる */
  height: auto;
  /* アスペクト比を維持 */
  display: block;
  /* 画像下の余分な隙間を防ぐ */
  border-radius: 8px;
  /* 角を少し丸くする */ }

/* テキスト部分のスタイル */
.text-content h2 {
  font-size: 2rem;
  margin-top: 0; }

/* ボタンのスタイル */
.cta-button {
  display: inline-block;
  background-color: #007bff;
  color: white;
  padding: 12px 24px;
  text-decoration: none;
  border-radius: 5px;
  margin-top: 15px;
  transition: background-color 0.3s; }

.cta-button:hover {
  background-color: #0056b3; }

/* --- レスポンシブ対応 (メディアクエリ) --- */
/* 画面幅が768px以下の場合に適用されるスタイル */
@media (max-width: 768px) {
  .two-column-layout {
    flex-direction: column;
    /* flexの方向を縦(column)に変更 */ } }
#about .day_box {
  margin-bottom: 20px; }
  #about .day_box h3 {
    font-size: 1.5rem;
    line-height: 1em;
    margin-bottom: 5px; }
    #about .day_box h3 span {
      font-size: 0.9rem;
      font-weight: 400; }
  #about .day_box h3.online {
    color: #bf322a; }
  #about .day_box h3.tokyo {
    color: #333333; }
  #about .day_box p {
    padding: 0 !important;
    margin: 0 !important; }
  #about .day_box .day_text {
    text-align: left;
    font-size: 30px;
    font-weight: 900; }
    #about .day_box .day_text span.ok {
      font-size: 13px;
      border: 1px solid #e33300;
      padding: 5px;
      font-weight: 400;
      color: #e33300;
      margin: 0 15px; }
    #about .day_box .day_text span.ng {
      font-size: 13px;
      border: 1px solid #333333;
      padding: 5px;
      font-weight: 400;
      color: #333333;
      margin: 0 15px; }
    #about .day_box .day_text span.few {
      font-size: 13px;
      border: 1px solid #815490;
      padding: 5px;
      font-weight: 400;
      color: #815490;
      margin: 0 15px; }
    #about .day_box .day_text span.time {
      font-size: 15px;
      font-weight: 400; }
  #about .day_box table.sc {
    width: 100%;
    text-align: left;
    margin: 0; }
    #about .day_box table.sc td.scline {
      border-bottom: 1px dotted #333333; }

/*about*/
/*生徒の声追加分*/
#StudentVoice {
  background: #FFFFFF;
  border-radius: 5px;
  margin-bottom: 50px;
  /* PC表示用のスタイル (画面幅が768px以上の場合に適用) */ }
  #StudentVoice .accordion-003 {
    margin-bottom: 7px;
    border-bottom: 2px solid #d0d0d0;
    text-align: left; }
  #StudentVoice .accordion-003 summary {
    display: flex;
    justify-content: space-between;
    align-items: center;
    position: relative;
    padding: 1em;
    color: #c90808;
    font-weight: 600;
    cursor: pointer; }
    #StudentVoice .accordion-003 summary img.voiceicon {
      width: 100px;
      padding-right: 10px; }
  #StudentVoice .accordion-003 summary::-webkit-details-marker {
    display: none; }
  #StudentVoice .accordion-003 summary::after {
    transform: translateY(-25%) rotate(45deg);
    width: 7px;
    height: 7px;
    margin-left: 10px;
    border-bottom: 3px solid #c90808b3;
    border-right: 3px solid #c90808b3;
    content: '';
    transition: transform .3s; }
  #StudentVoice .accordion-003[open] summary::after {
    transform: rotate(225deg); }
  #StudentVoice .accordion-003 p {
    transform: translateY(-10px);
    opacity: 0;
    margin: 0;
    padding: .3em 2em 1.5em;
    color: #333333;
    transition: transform .5s, opacity .5s; }
  #StudentVoice .accordion-003[open] p {
    transform: none;
    opacity: 1; }
  #StudentVoice .Course {
    font-size: 12px;
    color: #4E4E4E;
    line-height: 1.5em; }
  #StudentVoice .flags {
    width: 25px; }
  @media screen and (min-width: 768px) {
    #StudentVoice {
      /* 生徒の声のセクション */
      /* アコーディオンのサマリー部分（生徒の声の見出し） */
      /* アコーディオンの本文部分 */
      /* voiceiconのサイズをPC用に調整 */ }
      #StudentVoice #StudentVoice {
        /* 必要に応じてパディングやマージンを調整 */
        padding: 20px 0; }
      #StudentVoice .accordion-003 summary {
        font-size: 20px;
        /* PCでのフォントサイズを大きくする */
        text-align: left;
        /* 左寄せにする */ }
      #StudentVoice .accordion-003 p {
        font-size: 16px;
        /* PCでのフォントサイズを大きくする */
        text-align: left;
        /* 左寄せにする */ }
      #StudentVoice .accordion-003 summary img.voiceicon {
        width: 120px;
        padding-right: 15px; } }

#Partner {
  margin-top: 50px;
  /* PCとSPで共通のスタイル */
  /* ------------------- */
  /* SP表示用のスタイル */
  /* 画面幅が576px以下の場合に適用 */ }
  #Partner h2.partner {
    font-family: "League Gothic", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: 5rem;
    color: #333333;
    /*margin-bottom: 2rem;*/
    margin-top: 20px; }
    #Partner h2.partner span {
      font-size: 13px; }
  #Partner .college-list {
    display: flex;
    flex-wrap: wrap;
    /* 子要素を次の行に折り返す */
    justify-content: space-between;
    /* 子要素を均等な間隔で配置 */
    padding: 20px;
    text-align: left; }
  #Partner .college-column {
    flex: 1 1 200px;
    /* PCでは幅を均等に、SPでは1列にする */
    padding: 0 10px;
    /* 列の左右に隙間を作る */ }
  #Partner .college-column p {
    margin: 5px 0;
    /* 大学名の上下に少し隙間を作る */ }
  @media screen and (max-width: 575px) {
    #Partner .college-column {
      width: 100%;
      /* SPでは100%幅にする */
      margin-bottom: 20px;
      /* 列の下に隙間を作る */ } }

#News {
  /* PC表示のスタイル */
  /* SP表示のスタイル (画面幅が768px以下の時に適用) */ }
  #News #FV h2.newstitle {
    font-family: "League Gothic", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-variation-settings: "wdth" 100;
    font-size: 5rem;
    color: #333333;
    /*margin-bottom: 2rem;*/
    margin-top: 20px; }
    #News #FV h2.newstitle span {
      font-size: 13px; }
  #News .topimg {
    margin: 0 auto;
    text-align: center;
    max-width: 900px; }
    #News .topimg img {
      margin-top: 80px; }
  #News #box_news {
    max-width: 900px;
    margin: 0 auto;
    padding: 20px;
    /*    border: 1px solid #C1C1C1;*/
    background: #FFFFFF;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
    margin-bottom: 30px; }
    #News #box_news h3 {
      line-height: 1.5em; }
      #News #box_news h3 a {
        color: #ae2a23;
        text-decoration: underline; }
    #News #box_news .News_textBox {
      width: 100%; }
      #News #box_news .News_textBox p {
        margin: 0;
        color: #262626; }
      #News #box_news .News_textBox .news_title {
        border-bottom: solid 3px black;
        font-size: 20px;
        text-align: left;
        padding: 20px 0 5px 0; }
      #News #box_news .News_textBox .pick {
        color: #ae2a23;
        font-weight: 800;
        margin-top: 15px; }
      #News #box_news .News_textBox .skew-text {
        transform: skewX(-10deg);
        font-weight: 600;
        font-size: 18px;
        color: #313131; }
      #News #box_news .News_textBox .table_design01 {
        border-collapse: collapse;
        width: 100%;
        max-width: 700px; }
      #News #box_news .News_textBox .table_design01 th, #News #box_news .News_textBox .table_design01 td {
        border: 2px solid #fff;
        background-color: #f6f6f1;
        padding: 1em; }
      #News #box_news .News_textBox .table_design01 th {
        background-color: #ae2a23;
        color: #fff;
        font-weight: bold;
        text-align: center;
        width: 20%;
        min-width: 4em; }
      #News #box_news .News_textBox .voice-of-customer {
        font-size: 16px;
        line-height: 1.6;
        color: #333;
        padding: 20px;
        background-color: #f9f9f9;
        border-left: 5px solid #ae2a23;
        /* ★ここを変更しました */
        position: relative;
        font-style: italic;
        margin-bottom: 10px; }
      #News #box_news .News_textBox .voice-of-customer p {
        margin: 0;
        position: relative;
        z-index: 1; }
      #News #box_news .News_textBox .voice-of-customer span {
        display: block;
        text-align: right;
        margin-top: 10px;
        font-size: 14px;
        color: #666;
        font-style: normal; }
      #News #box_news .News_textBox .imgbox {
        margin: 0 auto;
        width: 100%;
        margin-top: 15px; }
  @media (max-width: 768px) {
    #News #box_news {
      border: none;
      /* 枠線を非表示にする */
      background: transparent;
      /* 背景を透明にする */
      box-shadow: none;
      /* シャドウを非表示にする */
      padding: 20px;
      /* paddingはそのまま残す */ } }

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 750px) {
  .pc {
    display: none !important; }

  .sp {
    display: block !important; } }