@charset "UTF-8";
@import url("https://fonts.googleapis.com/css2?family=League+Gothic&display=swap");
/* 固定フッターボタンのスタイル */
/* 各ボタンのスタイル */
.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;
  /* 赤色のボタンの文字色 */ }

.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;
    /* アイコンのサイズをテキストより少し小さくする */ }
  .fixed-bottom-buttons .btn--yellow {
    background-color: #333333;
    /* 黄色のボタンの背景色 */
    color: #ffffff;
    /* 黄色のボタンの文字色 */ }
  @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; }

#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; }
    #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.time {
      font-size: 15px;
      font-weight: 400; }

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

  .sp {
    display: block !important; } }