@charset "utf-8";

/*全体の設定
---------------------------------------------------------------------------*/
body {
  background: #f5f5f5;
  color: #313131;
  /*全体の文字色*/
  margin: 0px;
  padding: 0px;
  font: 16px/1.6 "メイリオ", Meiryo, "ＭＳ Ｐゴシック", Osaka, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro";
}

p {
  line-height: 24px;
}



/*（全般）設定
---------------------------------------------------------------------------*/
a {
  color: #555;
  /*リンクテキストの色*/
  text-decoration: none;
}

a:hover {
  color: #006ddc;
  /*マウスオン時の文字色（全体）*/
}

a:hover .btn {
  position: relative;
  top: 3pt;
  left: 3pt;
}


/*コンテナー（HPを囲むブロック）
---------------------------------------------------------------------------*/
#container {
  width: 1200px;
  /*コンテナー幅*/
  background-color: #fff;
  border-left: 1px solid #ccc;
  border-right: 1px solid #ccc;
  text-align: center;
  margin: 0 auto;
  overflow: hidden;
}

img {
  width: 100%;
}

p {
  font-size: 18px;
  color: #292929;
  line-height: 1.8;
  text-align:left;
}


/*メインコンテンツ（パソコン版）
---------------------------------------------------------------------------*/
.pc_button {
  width: 80%;
  margin: auto;
  padding: 50px 0;
}

.pc_button:hover  {
  opacity: 0.8; 
  transform: scale(1.05); /* 1.05倍に拡大 */
  transition: transform 0.3s ease-out;
}

.cta {
background: linear-gradient(
    90deg, 
    #9978fd 0%, 
    #5297ff 80%, 
    #007cbd 100%
  );
}

.bigtext {
  font-size: 40px;
  font-weight: bold;
  color:#fff;
  text-align: center;
  line-height:1.2;
  padding-top:50px;
  margin:0 0 -20px 0;
}

/* 全体のコンテナ：スマホで横幅が足りない場合にスクロール可能にする */
.table-container {
  width: 90%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin: auto;
  padding:40px 0;
}

.schedule-table {
  width: 100%;
  min-width: 500px; /* スマホで潰れすぎないための最低幅 */
  border-collapse: collapse;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  border: 1px solid #609cf9;
}

/* ヘッダーと左側見出しのスタイル */
.schedule-table th {
  background-color: #609cf9;
  color: #ffffff;
  font-weight: bold;
  padding: 15px;
  border: 1px solid #ffffff; /* 白い境界線 */
  text-align: center;
}

/* データセルのスタイル */
.schedule-table td {
  padding: 12px;
  text-align: center;
  border: 1px solid #609cf9;
  color: #609cf9;
  font-size: 2rem;
}

/* 偶数行に薄い色を付ける（視認性向上） */
.schedule-table tbody tr:nth-child(even) {
  background-color: #f9fbfd;
}

td, th {
  vertical-align: middle;
}


/*フッター設定
---------------------------------------------------------------------------*/
footer {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  padding-top: 20px;
  color: #292929;
  position: relative;
  background-color: #fff;
}

footer a {
  color: #5d5d5d;
}


.copy{
  color: #fff;
  font-size:90%;
  text-align: center;
    background: linear-gradient(
    90deg, 
    #9978fd 0%, 
    #5297ff 80%, 
    #007cbd 100%
  );
  padding: 30px 0;
  margin-top:50px;
}


/*スマホ版調整
---------------------------------------------------------------------------*/
@media only screen and (max-width: 768px) {
.sp_button {
  width: 90%;
  margin: auto;
  padding: 130px 0;
}
.bigtext {
  font-size:70px;
  line-height:1.4;
}
.sp_button:hover  {
  opacity: 0.8; 
  transform: scale(1.05); /* 1.05倍に拡大 */
  transition: transform 0.3s ease-out;
}
footer a {
  color: #5d5d5d;
  font-size:30px;
}
.copy{ 
  font-size:30px;
  margin-top:50px;
}
.schedule-table {
  margin:70px 0;
}
/* 時間のフォントサイズを調整（はみ出さないギリギリ） */
  .schedule-table thead th,
  .schedule-table tbody th {
    font-size: 3rem; 
    padding: 30px 0;
    letter-spacing: -0.5px; /* 文字間隔を詰めて横幅を稼ぐ */
  }

  /* ○ などの記号をさらに大きく */
  .schedule-table td {
    font-size: 4.5rem;
    padding: 10px 0;
  }

}





/*画像切替設定
---------------------------------------------------------------------------*/

/* パソコンで見たときは"pc-image"のclassがついた画像が表示される */
  .pc-image { display: block !important; }
  .sp-image { display: none !important; }

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