/* トップページのスタイル */
@charset "UTF-8";

/*=========================================================================================
メインビジュアル
==========================================================================================*/
#input:checked ~ #content {
  transform: translateX(0px);
}


.headline {
  background: url(images/説明会.png) no-repeat 0 0;
  background-size: 100% 100%; 
  background-color: rgba(246, 248, 249, 0.605);
  background-position: center;
  background-blend-mode: lighten;
  font-size: 3rem;
  font-weight: bold;
  margin: auto;
  text-align: center;
  animation: fadein 3s forwards;
}

@keyframes fadein {
  0% {opacity: 0}
  100% {opacity: 1}
} 

.headlinesp{
  display: none;
}

@media screen and (max-width: 768px){
  .headline {display: none;
  }
}

@media screen and (max-width: 768px){
  .headlinesp {
    display: block;
    background: url(images/説明会レスポンシブ.png) no-repeat 0 0;
    background-size: 100%;
  background-color: rgba(246, 248, 249, 0.605);
  background-position: center;
  background-blend-mode:lighten ;
  font-size: 1.75rem;
  margin: auto;
  text-align: center;
}
}

@media screen and (max-width: 480px){
  .headlinesp {
    font-size: 1.25rem;
  }}

.wp-block-table{
  width: 70%;
  margin: auto;
  vertical-align:middle;
  text-align: center;
  animation: fadein 3s forwards;
}

@keyframes fadein {
  0% {opacity: 0}
  100% {opacity: 1}
} 

.explanation {
 max-width: 70%;
 text-align: left;
 margin: 0 auto;
 padding: 0 ;

}

.explanation p {
 display: inline-block;
 text-align: left;
}

a.jump_point {height: 1px;
display: block;
padding-top: 10%;
margin-top: -10%;
}
@media only screen and (max-width: 768px){
  .headerlogo img {
    width: 90px;
    max-width: 90%;
   max-height: 70%;
   justify-content:stretch;
}
}

@media only screen and (max-width: 480px){
  .headerlogo img {
    width: 90px;
    max-width: 80%;
   max-height: 60%;
   justify-content:stretch;
}
}


.explanation h3,
.explanation p {
  opacity: 0;
  transform: translateY(20px); /* 初期位置から少し下にずらして非表示 */
  transition: opacity 2s ease-in-out, transform 2s ease-in-out;
}

.explanation h3.is-visible,
.explanation p.is-visible {
  opacity: 1;
  transform: translateY(0); /* 元の位置に戻して表示 */
}

.headline p{
      font-size: 1.75rem;
      text-align: center;
    }

    @keyframes fadein {
      0% {opacity: 0}
      100% {opacity: 1}
    } 

    .headlinesp{
      display: none;
    }

    @media screen and (max-width: 768px){
      .headline{
        display: none;
      }
    }

    @media screen and (max-width: 768px){
      .headlinesp {
        display: block;
        background: url(images/説明会レスポンシブ.png) no-repeat 0 0;
        background-size: 100%;
        background-color: rgba(246, 248, 249, 0.8);
        background-position: center;
        background-blend-mode:lighten ;
        font-size: 2.25rem;
      margin-top: 5%;
        margin: auto;
        text-align: center;
        height: 40%;
      }
      
      .subsp {
        max-width: 100%;
        height: 100%;
        text-align: center;
        font-size: 1rem;
        margin: 0 auto;
        padding: 0 ;
      }

      .headlinesp p{
        font-size: 1.5rem;
        text-align: center;
      }
      }

    @media screen and (max-width: 480px){
      .headlinesp {
        height: 30%;
        font-size: 1.75rem;
        margin-top: 10%;
      }
      .headlinesp p{
        margin-top: -10%;
        font-size: 1.3rem;
      }
      .subsp {
        margin-top: 10%;
    }
  }

/* --- 全体を囲むコンテナ --- */
.briefing-schedule-container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 10px;
    width: 90%;
    max-width: 1200px;
    margin: 30px auto;
    font-family: "Noto Sans JP", sans-serif;
}

/* --- カードの基本スタイル --- */
.schedule-card {
    background-color: #fff;
    border-radius: 12px;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
    border: 1px solid #e8e8e8;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* --- カードのヘッダー部分 --- */
.card-header {
    padding: 25px 20px;
    color: #fff;
    text-align: center;
    min-height: 210px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.card-header.basic-header     { background: linear-gradient(135deg, rgb(211, 84, 84), #c00); }
.card-header.advanced-header { background: linear-gradient(135deg, #FF8C00, #CD6600); }
.card-header.ipo-header      { background: linear-gradient(135deg, #cbd361, #cec107); }


/* --- 吹き出しデザイン --- */
.card-header .image-text {
    position: relative;
    background: #fff;
    padding: 8px 15px;
    border-radius: 10px;
    font-weight: bold;
    margin-bottom: 15px;
    filter: drop-shadow(0 4px 6px rgba(0,0,0,0.15));
    line-height: 1.5;
    text-align: center;
    min-height: 100px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

/* 個別の文字サイズ調整 */
.card-header.basic-header .image-text {
    font-size: 1.4rem;
}
.card-header.advanced-header .image-text,
.card-header.ipo-header .image-text {
    font-size: 1.2rem;
}


/* 吹き出しのしっぽ（共通） */
.card-header .image-text::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 8px solid transparent;
    border-top-color: #fff;
}

/* 吹き出しのテキスト色（個別） */
.card-header.basic-header .image-text { color: #b30303; }
.card-header.advanced-header .image-text { color: #CD6600; }
.card-header.ipo-header .image-text { color: #a1980f; }


.card-header h3 {
    margin: 10px 0;
    padding: 5px 15px;
    font-size: 1.8rem;
    font-weight: 700;
    text-shadow: 0px 2px 5px rgba(0, 0, 0, 0.5);
    border-bottom: 2px solid rgba(255, 255, 255, 0.5);
}

/* ヘッダー内のサブタイトル */
.card-subtitle {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 500;
    opacity: 0.9;
    line-height: 1.5;
}

/* 「基本編」の位置ずれを補正するスペース */
.card-header.basic-header h3 {
    margin-bottom: calc(10px + 1.8rem); /* 1.2rem * 1.5 */
}


/* --- カードのボディ（日程リスト） --- */
.card-body {
    padding: 10px 25px 20px 25px;
    flex-grow: 1;
}

.schedule-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.schedule-list li {
    padding: 16px 5px;
    border-bottom: 1px dashed #ccc;
    font-size: 1.4rem;
    line-height: 1.0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 15px;
    align-items: center;
    justify-content: center;
    position: relative; /* オーバーレイの基準位置にするため */
}

/* リスト内の各要素のスタイル */
.schedule-list li strong,
.schedule-list .date {
    flex-basis: 100%;
    text-align: center;
    margin-bottom: 8px;
}

.schedule-list .time {
    font-weight: normal;
    padding: 3px 10px;
    border-radius: 5px;
    font-size: 1.4rem;
    white-space: nowrap;
}

.schedule-list .note {
    font-weight: bold;
    color: #c50000;
    background-color: #f8d7da;
    padding: 3px 10px;
    border-radius: 5px;
    font-size: 1rem;
    white-space: nowrap;
}

.time-group {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap;
}

.scroll-reveal {
  opacity: 0;
  transform: translateY(50px);
  transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.scroll-reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* --- スマホ表示の調整 --- */
@media (max-width: 767px) {
    .briefing-schedule-container {
        grid-template-columns: 1fr;
        width: 95%;
        gap: 20px;
    }
    .card-header h3 {
        font-size: 1.6rem;
    }
    .schedule-list li {
        font-size: 1.2rem;
        line-height: 1.4;
    }
    .card-header .image-text {
        min-height: 0;
    }
    .card-header.basic-header h3 {
        margin-bottom: 10px;
    }
}

/* --- 大きい画面表示の調整 --- */
@media (min-width: 1280px) {
    .briefing-schedule-container {
        max-width: 1400px;
        grid-template-columns: repeat(3, 1fr);
    }
}

/* 締め切りの装飾 */
.text-with-shadow_simekiri {
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.2);
color: #CC0000;
font-weight: bold;
font-size: 1rem;
}

@media (max-width: 950px) {
.text-with-shadow_simekiri {
  font-size: 0.77rem;
  }
}

@media (max-width: 768px) {
  .text-with-shadow_simekiri {
    font-size: 1rem;
    }
  }

a.btn_02pc, a.btn_02sp {
  display: block;
  text-align: center;
  text-decoration: none;
  margin: 20px auto;
  padding: 1rem 3rem;
  font-weight: bold;
  transition: 0.5s;
  background: #cc0000;
  color: #fff;
  border: 3px solid #cc0000;
  border-radius: 5px;
  width: 270px;
}

a.btn_02pc:hover, a.btn_02sp:hover {
  color: #cc0000;
  background: #fff;
}

@media (min-width: 767px) {
a.btn_02sp {
display: none;
}
}

@media (max-width: 767px) {
  a.btn_02pc {
      display: none;
  }

  a.btn_02sp {
      display: block;
      width: 250px;
      font-size: 80%;
      padding: 1rem 3rem;
      border: 1px solid #cc0000;
  }
}

@media (max-width: 500px) {
  a.btn_02sp {
      width: 195px;
      padding: 1rem 2rem;
  }
}

@media (max-width: 430px) {
  a.btn_02sp {
      width: 180px;
      padding: 1rem 1.5rem;
  }
}

.shadow_17jipc,.shadow_17jisp {
  display: block;
  text-align: center;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.shadow_17jisp {
  display: none;
}

@media (max-width: 768px) {
  .shadow_17jipc{
    display: none;
  }
  .shadow_17jisp{
    display: block;
    font-size: 1rem;
  }
}

/*受付終了*/
/*
.schedule-list li.finished::after {
    content: '受付終了しました';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(100, 100, 100, 0.75); 
    color: #fff;
    font-weight: bold;
    font-size: 1.5rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}
*/

/*満員御礼*/
/*
.schedule-list li.soldout::after {
    content: '満員御礼';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(100, 100, 100, 0.75); 
    color: #c00;
    font-weight: bold;
    font-size: 2.5rem;
    text-shadow: 1px 1px 3px rgba(0,0,0,0.5);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
}
*/