/* 横スクロール */

.horizontal_scroll {

  overflow-x: scroll;

  -webkit-overflow-scrolling: touch;

  padding: 0 0 30px 8px;

  display: -ms-flexbox;

  display: flex;

}

/* 画面幅が768px以上の場合、横スクロールを解除 */

@media screen and (min-width: auto) {

  .horizontal_scroll {

    overflow-x: inherit;

    padding: 0 8px 6px;

  }

}

.horizontal_scroll > li {

  width: 100%;

  min-width: 230px;

}

@media screen and (min-width: auto) {

  .horizontal_scroll > li {

    min-width: inherit;

  }

}

.horizontal_scroll > li:not(:last-child) {

  margin-right: 5px;

}

.horizontal_scroll > li:last-child {

  padding-right: 5px;

}

@media screen and (min-width: auto) {

  .horizontal_scroll > li:last-child {

    padding-right: 0;

  }

}

.horizontal_scroll img {

  vertical-align: bottom;

}

/* タイトル */

.slider_ttl {

  color: #333;

  text-align: center; /* テキストを中央揃えに変更 */

  width: 100%;

  /* heightプロパティを削除し、line-heightのみで高さを調整 */

  line-height: 40px;

  /* paddingを具体的な値に設定し、継承による不意の影響を避ける */

  padding: 0px; /* 上下のpaddingは0に、必要に応じて左右のpaddingを調整 */

  margin: 0 0 20px 0;

  background-color: #e5e5e5;

  text-indent: 8px; /* 必要に応じて調整 */

  font-size: 16px;

  font-weight: 700;

  box-sizing: border-box;

  /* vertical-alignを追加して、テキストの垂直位置を微調整 */

  vertical-align: middle;

}



.top-nav-buttons {

  display: grid;

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

  gap: 12px;

  margin: 14px auto 10px;

  max-width: 360px;

}



.top-nav-button {

  display: flex;

  align-items: center;

  justify-content: center;

  padding: 12px 10px;

  border-radius: 999px;

  color: #fff;

  font-weight: 700;

  font-size: 14px;

  letter-spacing: 0.06em;

  text-align: center;

  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);

  border: 2px solid rgba(255, 255, 255, 0.65);

  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;

}



.top-nav-button:hover {

  transform: translateY(-2px);

  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.24);

  filter: brightness(1.03);

}



.top-nav-button:active {

  transform: translateY(1px) scale(0.98);

  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);

}



.top-nav-button--blue {

  background: linear-gradient(135deg, #235EFF, #1C83FF);

}



.top-nav-button--green {

  background: linear-gradient(135deg, #37d67a, #1fbf69);

}



.top-nav-button--orange {

  background: linear-gradient(135deg, #ffb347, #ff7b2c);

}



.top-nav-button--gray {

  background: linear-gradient(135deg, #9ca3af, #6b7280);

}



.top-nav-button--pink {

  background: linear-gradient(135deg, #FF77E9, #F13598);

}



.top-nav-button--game {

  grid-column: 1 / -1;

  font-size: 15px;

  letter-spacing: 0.02em;

}



.voice-widget {

  position: fixed;

  left: 12px;

  bottom: 12px;

  z-index: 2147483647;

}



.voice-widget__button {

  width: 74px;

  height: 74px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  text-decoration: none;

  text-align: center;

  line-height: 1.2;

  font-size: 12px;

  font-weight: 700;

  color: #3f2f2f;

  background: linear-gradient(135deg, #ffd6ec 0%, #ffe3b8 28%, #d8f9d6 52%, #d6efff 76%, #ece0ff 100%);

  border: 2px solid rgba(255, 255, 255, 0.85);

  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.18);

  letter-spacing: 0.03em;

  animation: voiceFloat 3.2s ease-in-out infinite;

}



.voice-widget__button:hover {

  transform: scale(1.04);

}



.voice-widget__button:active {

  transform: scale(0.97);

}



@keyframes voiceFloat {

  0% {

    transform: translateY(0);

  }

  50% {

    transform: translateY(-6px);

  }

  100% {

    transform: translateY(0);

  }

}



@media (prefers-reduced-motion: reduce) {

  .top-nav-button {

    transition: none;

  }

}



.slider_ttl {

  position: relative;

  overflow: hidden;

}



.slider_ttl::after {

  content: "";

  position: absolute;

  inset: 0;

  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 70%);

  transform: translateX(-120%);

  animation: titleSweep 4.2s ease-in-out infinite;

  pointer-events: none;

}



@keyframes titleSweep {

  0%, 60% {

    transform: translateX(-120%);

  }

  100% {

    transform: translateX(120%);

  }

}



.image-s-section h1 img {

  filter: drop-shadow(0 8px 18px rgba(0, 0, 0, 0.18));

  animation: titleGlow 5s ease-in-out infinite;

}



@keyframes titleGlow {

  0%, 100% {

    filter: drop-shadow(0 6px 14px rgba(0, 0, 0, 0.16));

  }

  50% {

    filter: drop-shadow(0 12px 26px rgba(0, 0, 0, 0.26));

  }

}



@media (prefers-reduced-motion: reduce) {

  .slider_ttl::after,

  .image-s-section h1 img {

    animation: none;

  }

}

/* デザイン */

asc1 {

  background: #ccecff;

  display: block;

  width: 140px;

  height: 140px;

  position: relative;

}

asc1::after {

  content: "画像";

  color: #8dd4ff;

  font-size: 30px;

  position: absolute;

  top: 0;

  right: 0;

  bottom: 0;

  left: 0;

  margin: auto;

  display: -ms-flexbox;

  display: flex;

  -ms-flex-align: center;

  align-items: center;

  -ms-flex-pack: center;

  justify-content: center;

}

/*以下、アコーディオンプログラム*/

.panel {

  border: 1px solid #767676;

  border-left: none;

  border-right: none;

  background-color: #FFFFFF;

  padding: 20px 20px;

  display: none;

}

.box {

  background-color: #FFB1B2;

  display: block;

  display: inline-block;

  width: 100%;

  border: 1px solid #767676;

}

. {

  display: block;

  flex-grow: 1;

  width: 100%;

  padding: 25px;

  background-color: #FFFFFF;

  outline: none;

  border: none;

  cursor: pointer;

  text-align: left;

}

.:hover {

  background-color: #99D7D8;

}

.fas {

  float: right;

}

table {

  border-collapse: collapse;

  border-spacing: 0;

  width: 100%;

}

table tr {

  border-bottom: solid 1px #001B3D;

  cursor: pointer;

}

table tr:hover {

  background-color: #d4f0fd;

}

table th, table td {

  text-align: center;

  width: 25%;

  padding: 4px 0;

  vertical-align: middle;

  width: 100px;

}

table td.icon {

  background-size: 35px;

  background-position: left 5px center;

  background-repeat: no-repeat;

  padding-left: 30px;

  background-color: #d4f0fd;

}

table td.icon.bird {

  background-image: url("")

}

table td.icon.whale {

  background-image: url("")

}

table td.icon.crab {

  background-image: url("")

}

/*アコーディオンプログラム*/

/*ここからスケジュールプログラム*/

/* 隠された状態のスタイル */

.hidden {

  display: none;

}

/* 浮き出すスタイル */

#infoContainer1 {

  width: 100%;

  position: absolute;

  top: 42%;

  left: 50%;

  line-height: 1.2;

  transform: translate(-50%, -50%);

  background-color: #d1efff;

  padding: 20px;

  border: 1px solid #ccc;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

  z-index: 1;

}

/* 表のスタイル 1*/

/* styles.css */

table {

  width: 100%;

  border-collapse: collapse;

  border-spacing: 0;

  margin-top: 20px;

}

th, td {

  padding: 10px;

  text-align: left;

  border-bottom: 1px solid #000000;

}

th {

  background-color: #f2f2f2;

  font-weight: bold;

}

tr:hover {

  background-color: #f5f5f5;

}

#infoContainer1 {

  display: none;

}

.hidden {

  display: none;

}

#showInfoButton1,

.showInfoButton1 {

  cursor: pointer;

  background-color: #ff4fa3;

  background-image: linear-gradient(135deg, #ff70bb 0%, #ff3d96 100%);

  color: #fff;

  border: none;

  padding: 8px 23px;

  font-size: 14px;

  border-radius: 5px;

  display: inline-block;

  text-decoration: none;

  font-weight: 800;

  letter-spacing: 0.08em;

  position: relative;

  overflow: hidden;

  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background-position 0.4s ease;

  background-size: 200% 200%;

  box-shadow: var(--teen-shadow);

  opacity: 1;

}

#showInfoButton1:hover,

.showInfoButton1:hover {

  background-color: #ff2b8a;

  background-image: linear-gradient(135deg, #ff7fc4 0%, #ff2f8f 100%);

}

#closeButton1 {

  cursor: pointer;

  float: right;

  font-weight: bold;

  font-size: 18px;

}

/*ここまでスケジュールプログラム*/

/*ここからスケジュールプログラム*/

/* 隠された状態のスタイル */

.hidden {

  display: none;

}

/* 浮き出すスタイル */

#infoContainer2 {

  width: 100%;

  position: absolute;

  top: 42%;

  left: 50%;

  line-height: 1.2;

  transform: translate(-50%, -50%);

  background-color: #d1efff;

  padding: 20px;

  border: 1px solid #ccc;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

  z-index: 1;

}

/* 表のスタイル 1*/

/* styles.css */

table {

  width: 100%;

  border-collapse: collapse;

  border-spacing: 0;

  margin-top: 20px;

}

th, td {

  padding: 10px;

  text-align: left;

  border-bottom: 1px solid #000000;

}

th {

  background-color: #f2f2f2;

  font-weight: bold;

}

tr:hover {

  background-color: #f5f5f5;

}

#infoContainer2 {

  display: none;

}

.hidden {

  display: none;

}

#showInfoButton2 {

  cursor: pointer;

  background-color: #002EAC;

  color: #fff;

  border: none;

  padding: 8px 45px;

  font-size: 14px;

  border-radius: 5px;

}

#showInfoButton2:hover {

  background-color: #0A008C;

}

#closeButton2 {

  cursor: pointer;

  float: right;

  font-weight: bold;

  font-size: 18px;

}

/*ここまでスケジュールプログラム*/

/*ここからスケジュールプログラム*/

/* 隠された状態のスタイル */

.hidden {

  display: none;

}

/* 浮き出すスタイル */

#infoContainer3 {

  width: 100%;

  position: absolute;

  top: 42%;

  left: 50%;

  line-height: 1.2;

  transform: translate(-50%, -50%);

  background-color: #d1efff;

  padding: 20px;

  border: 1px solid #ccc;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

  z-index: 1;

}

/* 表のスタイル 1*/

/* styles.css */

table {

  width: 100%;

  border-collapse: collapse;

  border-spacing: 0;

  margin-top: 20px;

}

th, td {

  padding: 10px;

  text-align: left;

  border-bottom: 1px solid #000000;

}

th {

  background-color: #f2f2f2;

  font-weight: bold;

}

tr:hover {

  background-color: #f5f5f5;

}

#infoContainer3 {

  display: none;

}

.hidden {

  display: none;

}

#showInfoButton3 {

  cursor: pointer;

  background-color: #666666;

  color: #fff;

  border: none;

  padding: 3px 45px;

  font-size: 14px;

  border-radius: 5px;

}

#showInfoButton3:hover {

  background-color: #353535;

}

#closeButton3 {

  cursor: pointer;

  float: right;

  font-weight: bold;

  font-size: 18px;

}

/*ここまでスケジュールプログラム*/

/*ここからスケジュールプログラム*/

/* 隠された状態のスタイル */

.hidden {

  display: none;

}

/* 浮き出すスタイル */

#infoContainer4 {

  width: 100%;

  position: absolute;

  top: 42%;

  left: 50%;

  line-height: 1.2;

  transform: translate(-50%, -50%);

  background-color: #d1efff;

  padding: 20px;

  border: 1px solid #ccc;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

  z-index: 1;

}

/* 表のスタイル 1*/

/* styles.css */

table {

  width: 100%;

  border-collapse: collapse;

  border-spacing: 0;

  margin-top: 20px;

}

th, td {

  padding: 10px;

  text-align: left;

  border-bottom: 1px solid #000000;

}

th {

  background-color: #f2f2f2;

  font-weight: bold;

}

tr:hover {

  background-color: #f5f5f5;

}

#infoContainer4 {

  display: none;

}

.hidden {

  display: none;

}

#showInfoButton4 {

  cursor: pointer;

  background-color: #FF0000;

  color: #fff;

  border: none;

  padding: 10px 45px;

  font-size: 14px;

  border-radius: 5px;

}

#showInfoButton4:hover {

  background-color: #0A008C;

}

#closeButton4 {

  cursor: pointer;

  float: right;

  font-weight: bold;

  font-size: 18px;

}

/*ここまでスケジュールプログラム*/

/*ここからスケジュールプログラム*/

/* 隠された状態のスタイル */

.hidden {

  display: none;

}

/* 浮き出すスタイル */

#infoContainer5 {

  width: 100%;

  position: absolute;

  top: 42%;

  left: 50%;

  line-height: 1.2;

  transform: translate(-50%, -50%);

  background-color: #d1efff;

  padding: 20px;

  border: 1px solid #BFBFBF;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

  z-index: 1;

}

/* 表のスタイル 1*/

/* styles.css */

table {

  width: 100%;

  border-collapse: collapse;

  border-spacing: 0;

  margin-top: 20px;

}

th, td {

  padding: 10px;

  text-align: left;

  border-bottom: 1px solid #000000;

}

th {

  background-color: #f2f2f2;

  font-weight: bold;

}

tr:hover {

  background-color: #f5f5f5;

}

#infoContainer5 {

  display: none;

}

.hidden {

  display: none;

}

#showInfoButton5 {

  cursor: pointer;

  background-color: #A962ED;

  color: #fff;

  border: none;

  padding: 10px 45px;

  font-size: 14px;

  border-radius: 5px;

}

#showInfoButton5:hover {

  background-color: #0A008C;

}

#closeButton5 {

  cursor: pointer;

  float: right;

  font-weight: bold;

  font-size: 18px;

}

/*ここまでスケジュールプログラム*/

/*ここからスケジュールプログラム*/

/* 隠された状態のスタイル */

.hidden {

  display: none;

}

/* 浮き出すスタイル */

#infoContainer6 {

  width: 100%;

  position: absolute;

  top: 42%;

  left: 50%;

  line-height: 1.2;

  transform: translate(-50%, -50%);

  background-color: #a7e2aa;

  padding: 20px;

  border: 1px solid #ccc;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

  z-index: 1000;

}

/* 表のスタイル 1*/

/* styles.css */

table {

  width: 100%;

  border-collapse: collapse;

  border-spacing: 0;

  margin-top: 20px;

}

th, td {

  padding: 10px;

  text-align: left;

  border-bottom: 1px solid #000000;

}

th {

  background-color: #f2f2f2;

  font-weight: bold;

}

tr:hover {

  background-color: #f5f5f5;

}

#infoContainer6 {

  display: none;

}

.hidden {

  display: none;

}

#showInfoButton6 {

  cursor: pointer;

  background-color: #0A008C;

  color: #fff;

  border: none;

  padding: 10px 15px;

  font-size: 14px;

  border-radius: 5px;

}

#showInfoButton6:hover {

  background-color: #0A008C;

}

#closeButton6 {

  cursor: pointer;

  float: right;

  font-weight: bold;

  font-size: 18px;

}

/*ここまでスケジュールプログラム*/

/*ここからスケジュールプログラム*/

/* 隠された状態のスタイル */

.hidden {

  display: none;

}

/* 浮き出すスタイル */

#infoContainer7 {

  width: 100%;

  position: absolute;

  top: 42%;

  left: 50%;

  line-height: 1.2;

  transform: translate(-50%, -50%);

  background-color: #a7e2aa;

  padding: 20px;

  border: 1px solid #ccc;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

  z-index: 1000;

}

/* 表のスタイル 1*/

/* styles.css */

table {

  width: 100%;

  border-collapse: collapse;

  border-spacing: 0;

  margin-top: 20px;

}

th, td {

  padding: 10px;

  text-align: left;

  border-bottom: 1px solid #000000;

}

th {

  background-color: #f2f2f2;

  font-weight: bold;

}

tr:hover {

  background-color: #f5f5f5;

}

#infoContainer7 {

  display: none;

}

.hidden {

  display: none;

}

#showInfoButton7 {

  cursor: pointer;

  background-color: #0A008C;

  color: #fff;

  border: none;

  padding: 10px 15px;

  font-size: 14px;

  border-radius: 5px;

}

#showInfoButton7:hover {

  background-color: #0A008C;

}

#closeButton7 {

  cursor: pointer;

  float: right;

  font-weight: bold;

  font-size: 18px;

}

/*ここまでスケジュールプログラム*/

/*ここからスケジュールプログラム*/

/* 隠された状態のスタイル */

.hidden {

  display: none;

}

/* 浮き出すスタイル */

#infoContainer8 {

  width: 100%;

  position: absolute;

  top: 42%;

  left: 50%;

  line-height: 1.2;

  transform: translate(-50%, -50%);

  background-color: #a7e2aa;

  padding: 20px;

  border: 1px solid #ccc;

  box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);

  z-index: 1000;

}

/* 表のスタイル 1*/

/* styles.css */

table {

  width: 100%;

  border-collapse: collapse;

  border-spacing: 0;

  margin-top: 20px;

}

th, td {

  padding: 10px;

  text-align: left;

  border-bottom: 1px solid #000000;

}

th {

  background-color: #f2f2f2;

  font-weight: bold;

}

tr:hover {

  background-color: #f5f5f5;

}

#infoContainer8 {

  display: none;

}

.hidden {

  display: none;

}

#showInfoButton8 {

  cursor: pointer;

  background-color: #0A008C;

  color: #fff;

  border: none;

  padding: 10px 15px;

  font-size: 14px;

  border-radius: 5px;

}

#showInfoButton8:hover {

  background-color: #0A008C;

}

#closeButton8 {

  cursor: pointer;

  float: right;

  font-weight: bold;

  font-size: 18px;

}

/*ここまでスケジュールプログラム*/

/* アニメーション文字 */

.title1 {

  overflow: hidden;

  transform: translate(-100%, 0);

  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;

  color: #aa8f7b;

  font-family: 'Josefin Sans', sans-serif;

}

.title1 span {

  display: block;

  transform: translate(100%, 0);

  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;

}

.title1.-visible, .title1.-visible span {

  transform: translate(0, 0);

}

.sentence {

  overflow: hidden;

  transform: translate(-100%, 0);

  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;

  font-family: "Yu Gothic Medium";

  font-size: 16px;

  text-align: center;

}

.sentence span {

  display: block;

  transform: translate(100%, 0);

  transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.5s;

}

.sentence.-visible, .sentence.-visible span {

  transform: translate(0, 0);

}







/* 動画再生*/

/* 動画コンテナのスタイル */

.video-container {

  width: auto; /* コンテナの幅を調整 */

  height: 200px; /* コンテナの高さを調整 */

  overflow: hidden; /* コンテナ内のオーバーフローを隠す */

  position: fixed;

  bottom: 20px; /* 画面下端からの距離を調整 */

  right: 20px; /* 画面右端からの距離を調整 */

  z-index: 9999; /* 他の要素よりも上に表示 */

}

/* 動画のスタイル */

video {

  width: 100%; /* 動画の幅を100%に設定 */

  height: 100%; /* 動画の高さを100%に設定 */

  object-fit: cover; /* 動画のアスペクト比を保持しつつコンテナに合わせる */

}

/* 画像表示スライド*/

.container1 {

  position: relative;

}

.image {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  opacity: 0;

  transition: opacity 0.5s;

}

.show-image {

  opacity: 1;

}

@keyframes shake {

  0%, 100% {

    transform: translate(-50%, -50%) translateX(0);

  }

  25%, 75% {

    transform: translate(-50%, -50%) translateX(10px);

  }

}

/* 画像モーダル表示*/

.vlist {

  list-style-type: none;

  padding: 0;

  margin: 0;

  display: flex;

  flex-wrap: wrap;

}

.vlist li {

  margin: 10px;

  text-align: center;

}

.vlist li a {

  text-decoration: none;

}

.modal {

  display: none;

  position: fixed;

  z-index: 9999; /* モーダルウィンドウを前面に表示 */

  left: 0;

  top: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(29, 29, 29, 0.59);

  overflow: auto;

}

.modal-content {

  position: absolute;

  left: 50%;

  top: 50%;

  transform: translate(-50%, -50%);

  text-align: center;

}

.modal-image {

  max-width: 100%;

  max-height: 100%;

  z-index: -50;

  animation: floatAnimation 2s infinite alternate; /* アニメーションの適用 */

  transition: transform 0.2s ease-in-out; /* トランジションを追加 */

}

.modal-image.clicked {

  transform: translateX(-5px) rotate(-5deg); /* クリック時のアニメーション */

}

@keyframes floatAnimation {

  0% {

    transform: translateY(0); /* 初期位置 */

  }

  50% {

    transform: translateY(-10px); /* 上に10px移動 */

  }

  100% {

    transform: translateY(0); /* 初期位置に戻る */

  }

}

/* キャプションの文字色を白に設定 */

#caption {

  color: white;

}

/* 背景画像アニメーション */

/* 丸い要素のスタイル */

.circle {

  width: 40px; /* 丸の幅 */

  height: 40px; /* 丸の高さ */

  background-color: rgba(186, 226, 255, 0.73); /* 丸の色 */

  border-radius: 50%;

  position: absolute;

  animation: fade-in 2s ease, fade-out 2s ease, float-up 5s ease-in-out infinite, move 20s linear infinite;

  opacity: 0; /* 最初は非表示 */

}

@keyframes fade-in {

  to {

    opacity: 1;

  }

}

@keyframes fade-out {

  from {

    opacity: 1;

  }

  to {

    opacity: 0;

  }

}

@keyframes float-up {

  0% {

    transform: translateY(0);

  }

  50% {

    transform: translateY(-10px); /* もっとふわっと持ち上がるように調整 */

    opacity: 0.7;

  }

  100% {

    transform: translateY(0);

  }

}

@keyframes move {

  from {

    transform: translate(0, 100%);

  }

  to {

    transform: translate(0, -100%);

  }

}

/* 垂直スクロールバーのデザイン */ ::-webkit-scrollbar {

  width: 20px; /* スクロールバーの幅を設定 */

}

::-webkit-scrollbar-thumb {

  background-color: #70A7FC; /* スクロールバーのつまみ部分の背景色を設定 */

  border-radius: 6px; /* つまみ部分の角を丸くする */

}

/* 水平スクロールバーのデザイン */ ::-webkit-scrollbar-track {

  background-color: #CAE7FF; /* スクロールバーのトラック部分の背景色を設定 */

}

::-webkit-scrollbar-thumb:hover {

  background-color: #364B7E; /* ホバー時のつまみ部分の背景色を設定 */

  border-radius: 8px; /* つまみ部分の角を丸くする */

}

/*画像がふわっとでるスタイル*/

/* 画像の基本スタイル */

.image-style {

  width: 345px; /* 画像の幅 */

  height: auto; /* 高さは自動調整 */

  margin: 10px; /* 画像の外側の余白 */

  border: 0px solid black; /* 枠線 */

  display: block;

  margin-left: auto;

  margin-right: auto;

  animation: swayUpDown 2s infinite; /* 上下にゆらゆらするアニメーションを適用 */

}

/* フェードイン効果 */

.fade-in {

  animation-duration: 2.5s;

  animation-fill-mode: forwards;

}

/* 上下にゆらゆらするアニメーションの定義 */

@keyframes swayUpDown {

  0%, 100% {

    transform: translateY(0);

  }

  50% {

    transform: translateY(-10px); /* 上に10px移動 */

  }

}

/* 受験の流れアコーディオン */

.expandableButton {

  background-color: #FF4F00; /* gray */

  border: none;

  color: white;

  padding: 15px 32px;

  text-decoration: none;

  display: inline-block;

  width: 350px;

  font-size: 16px;

  margin: 2px auto;

  cursor: pointer;

}

.expandableContent {

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.5s ease-out;

  background-color: #f1f1f1;

  width: 100%;

}

/* 展開されたコンテンツ内のテキストを左寄せにする */

.expandableContent p {

  text-align: left;

  width: 100%;

}

/* アクセスのアコーディオン */

.expandableButtonAC {

  background-color: #FF5F00;

  border: none;

  color: white;

  padding: 15px 32px;

  text-decoration: none;

  display: block; /* ボタンをブロック要素として扱う */

  width: 320px; /* Button width */

  font-size: 14px;

  margin: 0 auto; /* 中央配置のためのmargin */

  cursor: pointer;

  border-bottom: 2px solid black; /* 下線を追加 */

  justify-content: center;

  align-items: center;

  text-align: center;

}

.expandableContentAC {

  max-height: 0;

  overflow: hidden;

  transition: max-height 0.5s ease-out; /* Animation */

  background-color: #f1f1f1;

  width: 320px; /* 幅を指定 */

  margin: 0 auto; /* 中央配置のためのmargin */

  text-align: center; /* 中央揃え */

}

/* ボタンの親要素（<dd>）を中央に配置 */

dd5 {

  justify-content: center;

  align-items: center;

  text-align: center;

  margin: 0 auto;

}

/* ボタンの親要素（<p>）を中央に配置 */

pd5 {

  text-align: center;

  width: 330px; /* Button width */

  margin: 0 auto; /* 中央配置のためのmargin */

  justify-content: center;

  align-items: center;

  text-align: center;

}

/* オフィスアワーボタン */

.officeHourButton {

  background-color: #8A2BE2; /* 紫色 */

  color: white;

  padding: 25px 20px;

  border: none;

  border-radius: 15px;

  font-size: 16px;

  cursor: pointer;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

  width: 330px;

  text-align: center;

  transition: all 1s;

  display: block;

  text-decoration: none;

  margin: 10px auto;

  animation: floatAnimation 3s ease-in-out infinite; /* アニメーションの追加 */

}

.officeHourButton:hover {

  background-color: #9932CC;

  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);

}

@keyframes floatAnimation {

  0%, 100% {

    transform: translateY(0);

  }

  50% {

    transform: translateY(-10px);

  }

}

/* Uニュースボタン */

.unewsButton {

  background-color: #FF007E;

  color: white;

  padding: 10px 20px;

  border: none;

  border-radius: 15px;

  font-size: 16px;

  cursor: pointer;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

  width: 330px;

  text-align: center;

  transition: all 1s;

  display: block;

  text-decoration: none;

  margin: 10px auto;

  animation: floatAnimation 5s ease-in-out infinite; /* アニメーションの追加 */

}

.unewsButton:hover {

  background-color: #9932CC;

  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);

}

@keyframes floatAnimation {

  0%, 100% {

    transform: translateY(0);

  }

  50% {

    transform: translateY(-10px);

  }

}

/* LINE登録ボタン */

.linehovButton {

  background-color: #07B800;

  color: white;

  padding: 10px 20px;

  border: none;

  border-radius: 15px;

  font-size: 16px;

  cursor: pointer;

  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);

  width: 330px;

  text-align: center;

  transition: all 1s;

  display: block;

  text-decoration: none;

  margin: 10px auto;

  animation: floatAnimation 3s ease-in-out infinite; /* アニメーションの追加 */

}

.linehovButton:hover {

  background-color: #E80000;

  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);

}

@keyframes floatAnimation {

  0%, 100% {

    transform: translateY(0);

  }

  50% {

    transform: translateY(-10px);

  }

}

/* フェードエフェクト */

.fadein1 {

  opacity: 0;

  transform: translate(0, 100px);

  transition: all 1s;

}

.fadein1.active {

  opacity: 1;

  transform: translate(0, 0);

}

/* バックグラウンドカラー */

.backgroundOC {

  background-color: #FFFFFF;

}

.backgroundEX {

  background-color: #D0EBDC;

}

.backgroundAC {

  background-color: #FFFFFF;

}

.backgroundEX2 {

  background-color: #FFF8E4;

}

.backgroundOH {

  background-color: #FCE4FF;

}

.mapcenter {
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.smart-map {
  width: min(94vw, 360px);
  margin: 0 auto;
  padding: 12px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(17, 24, 39, 0.1);
  box-shadow: 0 8px 18px rgba(0, 0, 0, 0.12);
  text-align: center;
}

.smart-map__load {
  width: 100%;
  min-height: 44px;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.24);
}

.smart-map__tip {
  margin: 9px 0 7px;
  color: #4b5563;
  font-size: 12px;
  line-height: 1.45;
}

.smart-map__external {
  color: #1d4ed8;
  font-size: 13px;
  font-weight: 700;
  text-decoration: underline;
}

.smart-map__frame {
  display: none;
  width: 100%;
  max-width: 336px;
  height: 345px;
  margin-top: 10px;
  border: 0;
  border-radius: 10px;
}

.smart-map.is-loaded .smart-map__load,
.smart-map.is-loaded .smart-map__tip {
  display: none;
}

.smart-map.is-loaded .smart-map__frame {
  display: block;
}
/* ページ下部ボタン1 */

.pagetbutton1 {

  transition: .5s ease;

  display: flex;

  position: fixed;

  left: 50%;

  bottom: calc(env(safe-area-inset-bottom, 0px) + 18px);

  transform: translateX(-50%);

  width: 36px;

  height: 50px;

  z-index: 2147483646;

  pointer-events: auto;

}

.pagetbutton1 a {

  position: relative;

  display: block;

  width: 100%;

}

.pagetbutton1 a img {

  width: 100%;

}

@media screen and (min-width: 414px) {

  .pagetbutton1 {

    /* PC用スタイルを適用する */

    margin-left: auto;

    margin-right: auto;

  }

}

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

  .pagetbutton1 {

    bottom: calc(env(safe-area-inset-bottom, 0px) + 84px);

  }

}

/* ページ下部ボタン2 */

.pagetbutton2 {

  transition: .5s ease;

  display: none;

  position: fixed;

  left: 50%;

  bottom: 70px;

  transform: translateX(10%);

  width: 100px;

  height: 0px;

  z-index: 9999;

}

.pagetbutton2 a {

  position: relative;

  display: block;

  width: 100%;

}

.pagetbutton2 a img {

  width: 100%;

}

@media screen and (min-width: 415px) {

  .pagetbutton2 {

    /* スマートフォン用スタイルを適用する */

    display: none;

  }

}

@media screen and (min-width: 414px) {

  .pagetbutton2 {

    /* PC用スタイルを適用する */

    display: flex;

    margin-left: auto;

    margin-right: auto;

    left: calc(50% + 20px); /* ボタン1の右側に配置 */

  }

}

/* メニューボタン関係 */

.menu-list.product-menu-list dl dd ul li a:before {

  position: absolute;

  -webkit-transform: translate(0, -50%);

  transform: translate(0, -50%);

  content: "";

  top: 50%;

  left: 0;

  width: 50px;

  height: 35px

}

.menu-list.information-menu-list dl dd {

  padding-left: 10px

}

.menu-list.information-menu-list dl dd ul li:not(:last-child) {

  margin-bottom: 20px

}

.menu-list.information-menu-list dl dd ul li a {

  font-size: 1.4rem;

  letter-spacing: .06em

}

.menu-list dl dt {

  position: relative;

  width: 100%;

  margin-bottom: 20px;

  font-size: 1.4rem;

  letter-spacing: .06em

}

.menu-list dl dt:before {

  position: absolute;

  -webkit-transform: translate(0, -50%);

  transform: translate(0, -50%);

  content: "";

  top: 50%;

  left: 0;

  width: 100%;

  height: 1px;

  background: #ededed;

  z-index: 0

}

.menu-list dl dt span {

  position: relative;

  display: inline-block;

  padding: 0 10px;

  background: #fff;

  z-index: 2

}

.trigger {

  position: absolute;

  -webkit-transform: translate(50%, 0);

  transform: translate(50%, 0);

  position: fixed;

  top: 0;

  right: 50%;

  margin-right: -150px;

  width: 62px;

  height: 62px;

  z-index: 10001 !important;

  display: -webkit-box;

  display: -webkit-flex;

  display: flex;

  -webkit-flex-wrap: wrap;

  flex-wrap: wrap;

  -webkit-justify-content: center;

  justify-content: center;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  width: 62px;

  height: 62px;

  background: rgba(255, 255, 255, 0.00);

  cursor: pointer

}

.trigger .menu-trigger, .trigger .menu-trigger span {

  display: inline-block;

  transition: all 2.5s

}

.trigger .menu-trigger {

  position: relative;

  width: 55px;

  height: 18px

}

.trigger .menu-trigger span {

  position: absolute;

  left: 0;

  width: 50px;

  height: 4px; /* 三本線の太さを調整する値に変更 */

  background: #000;

  border-radius: 10px; /* 線の角を丸くするための値に変更 */

}

.trigger .menu-trigger span:nth-of-type(1) {

  top: 0;

}

.trigger .menu-trigger span:nth-of-type(2) {

  top: 8px;

}

.trigger .menu-trigger span:nth-of-type(3) {

  bottom: -2px;

}

.trigger .menu-trigger.active span:nth-of-type(1) {

  width: 20%;

  -webkit-transform: translateY(0) rotate(0);

  transform: translateY(0) rotate(0);

}

.trigger .menu-trigger.active span:nth-of-type(2) {

  width: 20%;

  display: block;

}

.trigger .menu-trigger.active span:nth-of-type(3) {

  width: 20%;

  -webkit-transform: translateY(0) rotate(0);

  transform: translateY(0) rotate(0);

}

.is-fixed {

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  width: 100%;

  height: 100%;

  overflow-x: hidden;

  -webkit-overflow-scrolling: touch

}

.hamburger-menu-back {

  display: none;

  position: absolute;

  -webkit-transform: translate(-50%, 0);

  transform: translate(-50%, 0);

  position: fixed;

  top: 0;

  left: 50%;

  width: 100%;

  max-width: 450px;

  height: 100%;

  z-index: 5000

}

.hamburger-menu-back:before {

  content: "";

  position: absolute;

  top: 62px;

  left: 0;

  width: 100%;

  height: calc(100% - 62px);

  background: rgba(0, 0, 0, .5)

}

.hamburger-wrapper {

  position: relative;

  width: 75%;

  height: 100%;

  padding: 75px 10px 1px;

  overflow-y: scroll;

  background: #fff

}

.hamburger-wrapper .hamburger-logo {

  margin: 0 0 35px;

  text-align: center

}

.hamburger-wrapper .action-menu-list {

  margin: 0 0 30px

}

.hamburger-wrapper .action-menu-list ul {

  display: -webkit-box;

  display: -webkit-flex;

  display: flex;

  -webkit-flex-wrap: wrap;

  flex-wrap: wrap;

  -webkit-justify-content: center;

  justify-content: center;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center

}

.hamburger-wrapper .action-menu-list ul li {

  margin: 0 6px

}

.hamburger-wrapper .action-menu-list ul li:nth-child(2) a:before {

  background: none center/contain no-repeat

}

.hamburger-wrapper .action-menu-list ul li a {

  display: block;

  position: relative;

  padding: 45px 0 0;

  font-size: 1.2rem;

  font-weight: 700;

  text-align: center;

  letter-spacing: .12em

}

.hamburger-wrapper .action-menu-list ul li a:before {

  position: absolute;

  -webkit-transform: translate(-50%, 0);

  transform: translate(-50%, 0);

  content: "";

  top: 0;

  left: 50%;

  width: 44px;

  height: 38px;

  background: none center/contain no-repeat

}

.hamburger-wrapper .menu-list-contents dl:not(:last-child) {

  margin: 0 0 40px

}

.hamburger-wrapper .menu-list-contents dl:first-child dd ul li a {

  position: relative;

  padding-left: 60px

}

.hamburger-wrapper .menu-list-contents dl:first-child dd ul li a:before {

  position: absolute;

  -webkit-transform: translate(0, -50%);

  transform: translate(0, -50%);

  content: "";

  top: 50%;

  left: 3px;

  width: 53px;

  height: 43px;

  background: url("../photoimage/moc.png") center/contain no-repeat

}

.hamburger-wrapper .menu-list-contents dl:first-child dd ul li:nth-child(2) a:before {

  background: url("../photoimage/mex.png") center/contain no-repeat

}

.hamburger-wrapper .menu-list-contents dl:first-child dd ul li:nth-child(3) a:before {

  background: url("../photoimage/mexm.png") center/contain no-repeat

}

.hamburger-wrapper .menu-list-contents dl:first-child dd ul li:nth-child(4) a:before {

  background: url("../photoimage/mac.png") center/contain no-repeat

}

.hamburger-wrapper .menu-list-contents dl:first-child dd ul li:nth-child(5) a:before {

  background: url("../photoimage/moo.png") center/contain no-repeat

}

.hamburger-wrapper .menu-list-contents dl.other dt {

  padding: 0 15px;

  text-align: left

}

.hamburger-wrapper .menu-list-contents dl.other dd ul {

  padding: 10px 0 0

}

.hamburger-wrapper .menu-list-contents dl.other dd ul li {

  border: none;

  height: 25px

}

.hamburger-wrapper .menu-list-contents dl.other dd ul li:not(:last-child) {

  margin: 0 0 10px

}

.hamburger-wrapper .menu-list-contents dl.other dd ul li a:after {

  display: none

}

.hamburger-wrapper .menu-list-contents dl dt {

  margin: 0 0 10px;

  padding: 0 15px;

  font-size: 1.3rem;

  font-weight: 700;

  letter-spacing: .12em;

  line-height: 1.5

}

.hamburger-wrapper .menu-list-contents dl dd ul {

  border-top: 1px solid #ededed

}

.hamburger-wrapper .menu-list-contents dl dd ul li {

  width: 100%;

  height: 55px;

  border-bottom: 1px solid #ededed

}

.hamburger-wrapper .menu-list-contents dl dd ul li a {

  display: -webkit-box;

  display: -webkit-flex;

  display: flex;

  -webkit-flex-wrap: wrap;

  flex-wrap: wrap;

  -webkit-justify-content: flex-start;

  justify-content: flex-start;

  -webkit-box-align: center;

  -ms-flex-align: center;

  align-items: center;

  position: relative;

  width: 100%;

  height: 100%;

  padding: 0 0px;

  font-size: 1.5rem;

  font-weight: 700;

  letter-spacing: .12em

}

.menu-list {

  width: 245px

}

.menu-list.product-menu-list {

  margin-bottom: 55px

}

.menu-list.product-menu-list dl dd ul li {

  position: relative

}

.menu-list.product-menu-list dl dd ul li:not(:last-child) {

  margin-bottom: 15px

}

.menu-list.product-menu-list dl dd ul li a {

  display: -webkit-box;

  display: -webkit-flex;

  display: flex;

  -webkit-flex-wrap: wrap;

  flex-wrap: wrap;

  -webkit-box-align: center;

  align-items: center;

  width: 100%;

  height: 35px;

  padding-left: 65px;

  font-size: 1.6rem;

  font-weight: 700;

  letter-spacing: .06em

}

/* メニュー内部アイコン */

.menu-list-contents2 ul {

  list-style-type: none;

  margin: 20px;

  padding: 0;

  display: flex;

}

.menu-list-contents2 li {

  margin-right: 10px; /* 適宜調整してください */

}

.menu-list-contents2 img {

  width: 40px; /* アイコンの幅を調整してください */

  height: auto; /* アイコンの高さを調整してください */

  margin: 1px; /* アイコンの余白を調整してください */

}

/* センタリング用のスタイル */

.container-custom {

  width: 380px; /* パーツの幅 */

  margin: 0 auto; /* 横方向に中央に配置 */

  text-align: center; /* 中央揃え */

}

/* アクセスモーダル */

.unique-container {

  display: grid;

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

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

  gap: 10px;

  width: 380px;

  height: 380px;

  margin: 50px auto;

}

.unique-modal {

  display: none;

  position: fixed;

  top: 0;

  left: 0;

  width: 100%;

  height: 100%;

  background-color: rgba(0, 0, 0, 0.5);

  justify-content: center;

  align-items: center;

}

.unique-modal-content {

  background-color: white;

  padding: 20px;

  border-radius: 10px;

  text-align: center;

}

.unique-modal-content img {

  max-width: 380px;

  height: auto;

}

.unique-modal-content img.expanded {

  max-width: 100vw;

  max-height: 100vh;

  object-fit: contain;

  cursor: zoom-out;

  position: fixed;

  top: 0;

  left: 0;

  right: 0;

  bottom: 0;

  margin: auto;

  z-index: 9999;

}





/* 新しく追加されたスタイル */

.unique-modal-btn {

  position: relative;

}

.unique-modal-btn img {

  width: 100%;

  height: 100%;

  object-fit: cover;

  border-radius: 10px;

}

.unique-modal-btn span {

  position: absolute;

  bottom: 10px;

  background-color: rgba(255, 255, 255, 0.8);

  padding: 5px 0px;

  border-radius: 5px;

  font-size: 14px;

  font-weight: bold;

}

.close-btn {

  position: absolute;

  top: 145px;

  right: calc(50% + -190px); /* 中央から右に30px移動 */

  font-size: 20px; /* バツのサイズを調整 */

  background-color: transparent; /* 背景色を透明に設定 */

  border: 2px solid aqua; /* 2pxのアクア色のボーダーを設定 */

  color: aqua;

  border-radius: 50%; /* 丸くするために50%のボーダーラジアスを設定 */

  width: 30px;

  height: 30px;

  display: flex;

  justify-content: center;

  align-items: center;

  text-align: center; /* テキストを中央揃え */

  padding: 5px; /* ボタンのパディングを追加 */

}

.close-btn span {

  font-size: 10px; /* テキストを少し小さくする */

}

.close-btn:hover span {

  display: inline-block; /* ホバー時に「閉じる」テキストを表示 */

  margin-left: 35px; /* テキストとバツの間に5pxの余白を追加 */

}

.new-badge {

  display: inline-block;

  background-color: red;

  color: white;

  padding: 1px 8px;

  border-radius: 4px;

  font-size: 12px; /* Added font-size property */

  margin-right: 1em; /* 左に余白を4文字分 */

}

.left-aligned {

  text-align: left;

  margin-left: 2em; /* 左に余白を2文字分 */

}

.highlight {

  background-color: hsla(62, 100%, 50%, 1.00); /* 文字背景を黄色に */

  line-height: 1.7; /* 適切な行間に設定 */

}

.underline {

  text-decoration: underline; /* リンクに下線を追加 */

}

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

.custom-carousel-container {

  display: flex;

  justify-content: center;

  align-items: center;

  height: auto;

  margin-bottom: 30px; /* 下部の余白を追加 */

  margin-top: 20px; /* 下部の余白を追加 */

}

.custom-carousel {

  position: relative;

  width: 400px;

  overflow: hidden;

  border-radius: 15px;

  background-color: #ffffff;

}

.custom-carousel-inner {

  display: flex;

  transition: transform 0.5s ease-in-out;

}

.custom-carousel-item {

  width: 400px;

  flex: 0 0 auto;

  display: flex;

  justify-content: center;

  align-items: center;

}

.custom-carousel-item img {

  max-width: 100%;

  height: auto;

  display: block;

  border-radius: 15px;

}

.custom-prev, .custom-next {

  position: absolute;

  top: 50%;

  transform: translateY(-50%);

  background-color: #F9499B;

  color: white;

  border: none;

  padding: 10px;

  cursor: pointer;

  border-radius: 50%;

}

.custom-prev {

  left: 15px;

}

.custom-next {

  right: 15px;

}

.custom-dots {

  text-align: center;

  position: absolute;

  bottom: 15px;

  width: 100%;

  display: flex;

  justify-content: center;

  align-items: center;

}

.custom-dot {

  height: 15px;

  width: 15px;

  margin: 0 5px;

  background-color: #949494;

  border-radius: 30%;

  display: inline-block;

  cursor: pointer;

  transition: background-color 0.3s;

}

.custom-dot.active {

  background-color: #CF0066;

}





/* トップ画像配列スタイル */

        .vertical-images {

            display: flex;

            flex-direction: column;

            align-items: center; /* 中央揃え */

            gap: 10px; /* 画像間のスペースを小さく設定 */

        }

        figure {

            text-align: center; /* 補足を中央揃え */

            margin: 10px; /* 各画像全体の外側余白 */

            padding: 10px; /* 画像全体の内側余白 */

            border: 1px solid #ccc; /* 画像を囲む枠線 */

            border-radius: 8px; /* 枠線を角丸にする */

            background-color: #f9f9f9; /* 背景色 */

        }

        img {

            max-width: 100%; /* 画像が画面幅を超えないようにする */

            height: auto; /* 縦横比を保つ */

        }

        figcaption {

            margin-top: 8px; /* 画像との間隔 */

            font-size: 14px; /* 補足の文字サイズ */

            color: #555; /* 補足の文字色 */

        }







/* 通知の赤い丸 */

.notification-image {

  position: relative;

  display: inline-block;

}



.notification-image::after {

  content: "";

  position: absolute;

  top: 5px;   /* 上からの位置調整 */

  right: 10px; /* 右からの位置調整 */

  width: 30px;

  height: 30px;

  background-color: red;

  border-radius: 70%;



  z-index: 10;

}



.featured-banner {

  width: min(82vw, 420px);

  margin: 6px auto 14px;

  padding: 7px;

  border: 2px solid #ff2d7a;

  border-radius: 14px;

  background: linear-gradient(135deg, #fff4fa 0%, #ffffff 55%, #fff9e9 100%);

  box-shadow: 0 12px 26px rgba(255, 45, 122, 0.28), 0 6px 14px rgba(0, 0, 0, 0.16);

  animation: featuredBannerPulse 2.4s ease-in-out infinite;

}



.featured-banner-link {

  display: block;

}



.featured-banner img {

  display: block;

  width: 100%;

  border-radius: 9px;

}



.featured-banner::after {

  top: -8px;

  right: -8px;

  width: 34px;

  height: 34px;

  border: 2px solid #fff;

  box-shadow: 0 0 0 4px rgba(255, 45, 122, 0.25);

}



@media (max-width: 768px) {

  .featured-banner {

    width: min(86vw, 330px);

    padding: 6px;

    border-radius: 12px;

  }

  .featured-banner img {

    border-radius: 8px;

  }

  .featured-banner::after {

    top: -7px;

    right: -7px;

    width: 28px;

    height: 28px;

  }

}



.scroll-hint {

  position: fixed;

  left: 50%;

  bottom: 28px;

  transform: translateX(-50%);

  z-index: 2147483646;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 6px;

  padding: 12px 18px;

  border-radius: 999px;

  color: #fff;

  background: linear-gradient(135deg, rgba(255, 79, 216, 0.92), rgba(124, 58, 237, 0.92));

  border: 2px solid rgba(255, 255, 255, 0.7);

  backdrop-filter: blur(8px);

  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.28), 0 0 18px rgba(255, 79, 216, 0.35);

  opacity: 0;

  pointer-events: none;

  transition: opacity 0.5s ease, transform 0.5s ease;

  animation: scrollHintFloat 2.2s ease-in-out infinite;

}



.scroll-hint__text {

  font-size: 13px;

  letter-spacing: 0.12em;

  font-weight: 800;

  text-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);

}



.scroll-hint__arrow {

  font-size: 18px;

  line-height: 1;

  letter-spacing: 0.2em;

  animation: scrollHintBounce 1.2s ease-in-out infinite;

}



.scroll-hint::before {

  content: "";

  position: absolute;

  inset: -6px;

  border-radius: 999px;

  border: 2px solid rgba(255, 255, 255, 0.5);

  opacity: 0.7;

  animation: scrollHintPulse 1.8s ease-in-out infinite;

  pointer-events: none;

}



.scroll-hint::after {

  content: "";

  position: absolute;

  top: -14px;

  right: -8px;

  width: 20px;

  height: 20px;

  border-radius: 50%;

  background: radial-gradient(circle, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0) 70%);

  opacity: 0.9;

  animation: scrollHintSparkle 2.4s ease-in-out infinite;

}



.scroll-hint.is-visible {

  opacity: 1 !important;

  transform: translateX(-50%) translateY(0);

}



/* さりげない“かっこいい”アニメ演出 */

@keyframes softFloat {

  0%, 100% {

    transform: translateY(0);

  }

  50% {

    transform: translateY(-6px);

  }

}



@keyframes glowPulse {

  0%, 100% {

    box-shadow: 0 10px 24px rgba(0, 0, 0, 0.18);

  }

  50% {

    box-shadow: 0 14px 30px rgba(0, 0, 0, 0.26);

  }

}



@keyframes dotPulse {

  0%, 100% {

    transform: scale(1);

    opacity: 0.9;

  }

  50% {

    transform: scale(1.12);

    opacity: 1;

  }

}



@keyframes featuredBannerPulse {

  0%, 100% {

    transform: translateY(0);

    box-shadow: 0 12px 26px rgba(255, 45, 122, 0.28), 0 6px 14px rgba(0, 0, 0, 0.16);

  }

  50% {

    transform: translateY(-2px);

    box-shadow: 0 15px 30px rgba(255, 45, 122, 0.34), 0 8px 18px rgba(0, 0, 0, 0.18);

  }

}



.pc_logo img {

  animation: softFloat 4.5s ease-in-out infinite;

}



.pc_logo img:nth-child(2) {

  animation-delay: 0.8s;

}



.notification-image::after {

  animation: dotPulse 1.8s ease-in-out infinite;

}



.notification-image img,

.custom-carousel-item img,

.vertical-images img {

  transition: transform 0.25s ease, box-shadow 0.25s ease;

  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);

}



.notification-image img:hover,

.custom-carousel-item img:hover,

.vertical-images img:hover {

  transform: translateY(-4px) scale(1.02);

  box-shadow: 0 16px 32px rgba(0, 0, 0, 0.25);

}



.unique-modal-btn {

  animation: glowPulse 3.2s ease-in-out infinite;

}



.menu-trigger span {

  transition: transform 0.2s ease, box-shadow 0.2s ease;

  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.22);

}



.menu-trigger:hover span {

  transform: translateY(-1px);

  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.28);

}



@media (prefers-reduced-motion: reduce) {

  .pc_logo img,

  .unique-modal-btn,

  .notification-image::after,

  .featured-banner {

    animation: none;

  }

  .notification-image img,

  .custom-carousel-item img,

  .vertical-images img,

  .menu-trigger span {

    transition: none;

  }

}



@keyframes scrollHintFloat {

  0%, 100% {

    transform: translateX(-50%) translateY(0);

  }

  50% {

    transform: translateX(-50%) translateY(-6px);

  }

}



@keyframes scrollHintBounce {

  0%, 100% {

    transform: translateY(0);

  }

  50% {

    transform: translateY(4px);

  }

}



@keyframes scrollHintPulse {

  0%, 100% {

    transform: scale(1);

    opacity: 0.55;

  }

  50% {

    transform: scale(1.04);

    opacity: 0.9;

  }

}



@keyframes scrollHintSparkle {

  0%, 100% {

    transform: translateY(0) scale(1);

    opacity: 0.6;

  }

  50% {

    transform: translateY(-6px) scale(1.1);

    opacity: 1;

  }

}



:root {

  --teen-grad-1: linear-gradient(135deg, #7c3aed, #22d3ee);

  --teen-grad-2: linear-gradient(135deg, #ff4fd8, #ffb347);

  --teen-grad-line: linear-gradient(135deg, #22c55e, #16f2b3);

  --teen-shadow: 0 10px 20px rgba(0, 0, 0, 0.18), 0 0 0 2px rgba(255, 255, 255, 0.65) inset;

}



.officeHourButton,

.linehovButton,

.unewsButton,

[id^="showInfoButton"] {

  border-radius: 999px;

  font-weight: 800;

  letter-spacing: 0.08em;

  position: relative;

  overflow: hidden;

  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease, background-position 0.4s ease;

  background-size: 200% 200%;

  box-shadow: var(--teen-shadow);

  opacity: 1;

}



.officeHourButton {

  background-image: var(--teen-grad-1);

}



.linehovButton {

  background-image: linear-gradient(135deg, #06c755 0%, #05b14d 55%, #00a63f 100%);

  width: min(92vw, 360px);

  border: 3px solid #ffffff;

  z-index: 0;

  color: #ffffff;

  font-size: clamp(17px, 2.2vw, 21px);

  font-weight: 900;

  letter-spacing: 0.03em;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.28);

  box-shadow: 0 12px 24px rgba(6, 199, 85, 0.38), 0 0 0 3px rgba(255, 255, 255, 0.5);

  animation: lineAttentionPulse 1.8s ease-in-out infinite;

}



.unewsButton {

  background-image: var(--teen-grad-2);

}



[id^="showInfoButton"] {

  background-image: linear-gradient(135deg, #0ea5e9, #6366f1);

  color: #fff;

  border: none;

}



.officeHourButton:hover,

.linehovButton:hover,

.unewsButton:hover,

.showInfoButton1:hover,

[id^="showInfoButton"]:hover {

  transform: translateY(-2px) scale(1.02);

  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.22);

  filter: brightness(1.05);

  opacity: 1;

}



.linehovButton:hover {

  box-shadow: 0 16px 30px rgba(6, 199, 85, 0.5), 0 0 0 4px rgba(255, 255, 255, 0.62);

  filter: brightness(1.08) saturate(1.05);

}



.linehovButton--oc-entry {

  line-height: 1.45;

  padding-top: 14px;

  padding-bottom: 14px;

  z-index: 0;

}



.linehovButton--oc-entry .linehovButton__lead,

.linehovButton--oc-entry .linehovButton__sub,

.linehovButton--oc-entry .linehovButton__tail {

  display: block;

}



.linehovButton--oc-entry .linehovButton__lead {

  color: #ffe45a;

  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);

}



.linehovButton--oc-entry .linehovButton__sub {

  margin-top: 0.25em;

  font-size: 0.84em;

}



.linehovButton--oc-entry .linehovButton__tail {

  margin-top: 0.3em;

}



.officeHourButton:active,

.linehovButton:active,

.unewsButton:active,

.showInfoButton1:active,

[id^="showInfoButton"]:active {

  transform: translateY(1px) scale(0.98);

  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.2);

  filter: brightness(0.98);

}



.officeHourButton:focus-visible,

.linehovButton:focus-visible,

.unewsButton:focus-visible,

.showInfoButton1:focus-visible,

[id^="showInfoButton"]:focus-visible {

  outline: 3px solid rgba(255, 255, 255, 0.9);

  outline-offset: 3px;

}



.officeHourButton::after,

.linehovButton::after,

.unewsButton::after,

.showInfoButton1::after,

[id^="showInfoButton"]::after {

  content: "";

  position: absolute;

  top: -120%;

  left: -40%;

  width: 180%;

  height: 220%;

  background: linear-gradient(120deg, rgba(255, 255, 255, 0) 30%, rgba(255, 255, 255, 0.45) 50%, rgba(255, 255, 255, 0) 70%);

  transform: translateX(-30%) rotate(10deg);

  transition: transform 0.5s ease;

  pointer-events: none;

}



.officeHourButton:hover::after,

.linehovButton:hover::after,

.unewsButton:hover::after,

.showInfoButton1:hover::after,

[id^="showInfoButton"]:hover::after {

  transform: translateX(35%) rotate(10deg);

}



@keyframes lineAttentionPulse {

  0%, 100% {

    box-shadow: 0 12px 24px rgba(6, 199, 85, 0.38), 0 0 0 3px rgba(255, 255, 255, 0.5);

  }

  50% {

    box-shadow: 0 18px 34px rgba(6, 199, 85, 0.55), 0 0 0 5px rgba(255, 255, 255, 0.72);

  }

}



.unique-modal-btn {

  border-radius: 18px;

  overflow: hidden;

  background: #fff;

  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.18);

  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;

}



.unique-modal-btn:hover {

  transform: translateY(-3px) scale(1.02);

  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.22);

  filter: brightness(1.04);

}



.unique-modal-btn:active {

  transform: translateY(1px) scale(0.98);

  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);

}



.unique-modal-btn span {

  backdrop-filter: blur(6px);

  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);

}



@media (prefers-reduced-motion: reduce) {
  .officeHourButton,
  .linehovButton,
  .unewsButton,
  .showInfoButton1,

  [id^="showInfoButton"],

  .unique-modal-btn {

    transition: none;

  }

  .officeHourButton::after,

  .linehovButton::after,

  .unewsButton::after,

  .showInfoButton1::after,

  [id^="showInfoButton"]::after {

    transition: none;

  }

  .linehovButton {
    animation: none;
  }
}

/* Section divider motion */
.section-transition-block {
  position: relative;
}

.section-transition-block::before {
  content: "";
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 42px;
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.58) 0%, rgba(255, 255, 255, 0) 100%);
  opacity: 0;
  transform: translateY(-12px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  pointer-events: none;
  z-index: 1;
}

.section-transition-block.is-revealed::before {
  opacity: 1;
  transform: translateY(0);
}

.section-break-image-wrap {
  position: relative;
}

.section-break-image-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 32%;
  height: 100%;
  background: linear-gradient(110deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.75) 50%, rgba(255, 255, 255, 0) 100%);
  transform: translateX(-220%) skewX(-16deg);
  opacity: 0;
  pointer-events: none;
  z-index: 2;
}

.section-break-image-wrap.is-revealed::after {
  animation: sectionDividerSweep 1.05s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--section-reveal-delay, 0ms) + 120ms) both;
}

.section-break-image {
  opacity: 0;
  transform: translateY(28px) scale(0.985);
  transform-origin: center top;
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1), transform 0.95s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--section-reveal-delay, 0ms);
  will-change: transform, opacity;
}

.section-break-image.is-revealed {
  opacity: 1;
  transform: translateY(0) scale(1);
}

@keyframes sectionDividerSweep {
  0% {
    opacity: 0;
    transform: translateX(-220%) skewX(-16deg);
  }
  12% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    transform: translateX(420%) skewX(-16deg);
  }
}

@media (prefers-reduced-motion: reduce) {
  .section-transition-block::before,
  .section-break-image-wrap::after {
    animation: none;
    transition: none;
    opacity: 0;
  }

  .section-break-image {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

.section-follow-item {
  opacity: 0;
  filter: blur(4px);
  transition: opacity 0.74s cubic-bezier(0.22, 1, 0.36, 1), filter 0.74s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: var(--follow-reveal-delay, 0ms);
}

.section-follow-item.is-revealed {
  opacity: 1;
  filter: blur(0);
}

.top-nav-button.is-current {
  transform: translateY(-1px) scale(1.015);
  box-shadow: 0 16px 30px rgba(0, 0, 0, 0.26);
  filter: brightness(1.08) saturate(1.05);
}

.hamburger-wrapper .menu-list-contents dl dd ul li a {
  transition: background-color 0.26s ease, color 0.26s ease, box-shadow 0.26s ease;
}

.hamburger-wrapper .menu-list-contents dl dd ul li a.is-current {
  background: linear-gradient(90deg, rgba(28, 131, 255, 0.16), rgba(28, 131, 255, 0.02));
  color: #12458f;
  box-shadow: inset 4px 0 0 #1c83ff;
}

@media (prefers-reduced-motion: reduce) {
  .section-follow-item {
    opacity: 1;
    filter: none;
    transition: none;
  }

  .top-nav-button.is-current,
  .hamburger-wrapper .menu-list-contents dl dd ul li a,
  .hamburger-wrapper .menu-list-contents dl dd ul li a.is-current {
    transition: none;
  }
}

/* Trust quick panel */
.trust-quick-panel {
  width: min(88vw, 350px);
  margin: 0 auto 16px;
  padding: 14px 12px 12px;
  border-radius: 18px;
  background: linear-gradient(145deg, #f0f8ff 0%, #ffffff 48%, #fff7e8 100%);
  border: 1px solid rgba(28, 131, 255, 0.22);
  box-shadow: 0 10px 22px rgba(0, 0, 0, 0.11);
}

.trust-quick-panel h2 {
  margin: 0 0 12px;
  font-size: 17px;
  font-weight: 800;
  color: #133053;
  text-align: center;
  letter-spacing: 0.04em;
}

.trust-quick-panel ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.trust-quick-panel li {
  min-height: 46px;
  padding: 6px 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.86);
  border: 1px solid rgba(19, 48, 83, 0.1);
}

.trust-quick-panel li strong {
  display: block;
  font-size: 13px;
  color: #12458f;
  font-weight: 800;
  line-height: 1.25;
}

.trust-quick-panel li span {
  display: block;
  margin-top: 3px;
  font-size: 11px;
  color: #4a596b;
  line-height: 1.4;
}

.trust-quick-panel__actions {
  margin-top: 9px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.trust-quick-panel__actions a {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 8px;
  border-radius: 999px;
  text-align: center;
  text-decoration: none;
  font-size: 11px;
  font-weight: 700;
  color: #ffffff;
  background: linear-gradient(135deg, #0ea5e9, #2563eb);
  box-shadow: 0 8px 16px rgba(37, 99, 235, 0.24);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease;
}

.trust-quick-panel__actions a:first-child {
  background: linear-gradient(135deg, #9ca3af, #6b7280);
  color: #ffffff;
  box-shadow: 0 8px 16px rgba(75, 85, 99, 0.28);
}

.trust-quick-panel__actions a:last-child {
  background: linear-gradient(135deg, #ffe8f5 0%, #fff1dc 25%, #e8f6ff 50%, #e9faef 75%, #f0ebff 100%);
  color: #244164;
  box-shadow: 0 8px 16px rgba(116, 136, 171, 0.24);
  border: 1px solid rgba(36, 65, 100, 0.12);
}

.trust-quick-panel__actions a:hover {
  transform: translateY(-1px);
  filter: brightness(1.04);
}

/* Mobile touch and performance polish */
[id^="jump"] {

  scroll-margin-top: 16px;

}

.top-nav-button,
.officeHourButton,
.showInfoButton1,
[id^="showInfoButton"],
.hamburger-wrapper .menu-list-contents dl dd ul li a,
.unique-modal-btn,
#nextBtn,
#bgmToggle {
  min-height: 44px;
}

.top-nav-button {
  min-width: 0;
}

.pagetbutton1 {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 22px);
}

@media screen and (max-width: 959px) {
  .voice-widget,
  #bgmWidget {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 78px) !important;
  }
}

@media screen and (max-width: 413px) {
  .top-nav-buttons {
    gap: 10px;
  }

  .trust-quick-panel {
    width: min(90vw, 330px);
    padding: 13px 10px 11px;
  }

  .trust-quick-panel ul {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .trust-quick-panel li strong {
    font-size: 12px;
  }

  .trust-quick-panel__actions {
    grid-template-columns: 1fr 1fr;
    gap: 6px;
  }

  .trust-quick-panel__actions a {
    font-size: 10px;
    min-height: 42px;
    padding: 7px;
  }

  .pagetbutton1 {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 14px);
  }

  .voice-widget,
  #bgmWidget {
    bottom: calc(env(safe-area-inset-bottom, 0px) + 62px) !important;
  }

  #bgmToggle {
    width: 56px !important;
    height: 56px !important;
    font-size: 24px !important;
  }

  #bgmPanel {
    max-width: min(92vw, 320px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .trust-quick-panel__actions a {
    transition: none;
  }
}

/* オープンキャンパス日程の詳細ボタン */

.oc-schedule-table .oc-detail-button {

  display: flex;

  align-items: center;

  justify-content: center;

  box-sizing: border-box;

  width: 132px;

  max-width: calc(100% - 8px);

  min-height: 32px;

  margin: 7px auto 3px;

  padding: 5px 12px;

  border: 2px solid #187a6b;

  border-radius: 6px;

  background: #fff;

  color: #176f61;

  font-size: 13px;

  font-weight: 800;

  line-height: 1;

  letter-spacing: 0.12em;

  text-decoration: none;

  box-shadow: 0 4px 10px rgba(18, 92, 80, 0.14);

  transition: transform 0.18s ease, background-color 0.18s ease, color 0.18s ease;

}



.oc-schedule-table .oc-detail-button:hover {

  transform: translateY(-1px);

  background: #187a6b;

  color: #fff;

}



.oc-schedule-table .oc-detail-button:focus-visible {

  outline: 3px solid rgba(24, 122, 107, 0.3);

  outline-offset: 2px;

}



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

  .oc-schedule-table td:first-child {

    box-sizing: border-box;

    width: 46%;

    padding-right: 5px;

    padding-left: 5px;

  }



  .oc-schedule-table td:last-child {

    box-sizing: border-box;

    width: 54%;

    padding-right: 3px;

    padding-left: 3px;

  }



  .oc-schedule-table .showInfoButton1 {

    box-sizing: border-box;

    max-width: calc(100% - 8px);

    padding-right: 14px;

    padding-left: 14px;

  }



  .oc-schedule-table .oc-detail-button {

    width: 132px;

    max-width: calc(100% - 8px);

  }

}



/* 入試対策講座の日程 */
.exam-course-table {
  box-sizing: border-box;
  max-width: 100%;
  border-collapse: separate;
  border-spacing: 0 8px;
  table-layout: fixed;
}

.exam-course-table tr {
  border: 0;
}

.exam-course-table th {
  padding: 10px 4px;
  border: 0;
  background: #176f61;
  color: #fff;
  font-size: 13px;
  letter-spacing: 0.04em;
}

.exam-course-table th:first-child {
  border-radius: 8px 0 0 8px;
}

.exam-course-table th:last-child {
  border-radius: 0 8px 8px 0;
}

.exam-course-table td {
  box-sizing: border-box;
  border-top: 1px solid rgba(20, 105, 91, 0.12);
  border-bottom: 1px solid rgba(20, 105, 91, 0.12);
  background: rgba(255, 255, 255, 0.68);
}

.exam-course-table td:first-child {
  border-left: 4px solid #49af9d;
  border-radius: 8px 0 0 8px;
}

.exam-course-table td:last-child {
  border-right: 1px solid rgba(20, 105, 91, 0.12);
  border-radius: 0 8px 8px 0;
}

.exam-course-table th:nth-child(1),
.exam-course-table td:nth-child(1) {
  width: 21%;
}

.exam-course-table th:nth-child(2),
.exam-course-table td:nth-child(2) {
  width: 52%;
  padding: 14px 9px;
}

.exam-course-table th:nth-child(3),
.exam-course-table td:nth-child(3) {
  width: 27%;
}

.exam-course-table .exam-course-title,
.exam-course-table .exam-course-detail,
.exam-course-table .exam-course-note,
.exam-course-table .exam-course-lecturer {
  display: block;
  letter-spacing: 0;
  line-height: 1.45;
}

.exam-course-table .exam-date-year,
.exam-course-table .exam-date-main {
  display: block;
  letter-spacing: 0;
}

.exam-course-table .exam-date-year {
  color: #55706b;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.25;
}

.exam-course-table .exam-date-main {
  color: #173f38;
  font-size: 13px;
  font-weight: 800;
  line-height: 1.4;
  white-space: nowrap;
}

.exam-course-table .exam-course-title {
  font-size: 15px;
  font-weight: 700;
  color: #142f2a;
}

.exam-course-table .exam-course-detail {
  margin-top: 6px;
  font-size: 13px;
  font-weight: 500;
}

.exam-course-table .exam-course-note {
  margin-top: 4px;
  color: #d72d78;
  font-size: 12px;
  font-weight: 700;
}

.exam-course-table .exam-course-lecturer {
  margin-top: 6px;
  color: #52635f;
  font-size: 11px;
  font-weight: 500;
}

.exam-course-table .showInfoButton1,
.exam-course-table #showInfoButton2 {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 110px;
  max-width: calc(100% - 6px);
  min-height: 42px;
  padding: 0 3px;
  line-height: 1.2;
  text-align: center;
  vertical-align: middle;
}

@media screen and (max-width: 600px) {
  .exam-course-table {
    border-spacing: 0 7px;
  }

  .exam-course-table th {
    padding: 8px 2px;
    font-size: 12px;
  }

  .exam-course-table th:nth-child(1),
  .exam-course-table td:nth-child(1) {
    width: 22%;
  }

  .exam-course-table th:nth-child(2),
  .exam-course-table td:nth-child(2) {
    width: 51%;
    padding: 13px 6px;
  }

  .exam-course-table th:nth-child(3),
  .exam-course-table td:nth-child(3) {
    width: 27%;
    padding-right: 3px;
  }

  .exam-course-table .showInfoButton1,
  .exam-course-table #showInfoButton2 {
    box-sizing: border-box;
    width: 110px;
    max-width: calc(100% - 6px);
    height: 42px;
    min-width: 0;
    padding: 0 2px;
    font-size: 11px;
    line-height: 1.2;
    letter-spacing: 0;
    white-space: nowrap;
  }

  .exam-course-table td:nth-child(1) {
    padding: 8px 2px;
  }

  .exam-course-table .exam-date-year {
    font-size: 10px;
  }

  .exam-course-table .exam-date-main {
    font-size: 12px;
  }

  .exam-course-table .exam-course-title {
    font-size: 14px;
  }

  .exam-course-table .exam-course-detail {
    font-size: 12px;
  }

  .exam-course-table .exam-course-note {
    font-size: 11px;
  }

  .exam-course-table .exam-course-lecturer {
    font-size: 10px;
  }
}