@charset "utf-8";
/* ======================================================
   フリースクールたけのこページ
====================================================== */ :root {
  --main-color: #efe875; /* ページのメインカラー */
  --base-color: #ffffff; /* ベース（白） */
  --accent-color: #cce7ff; /* アクセントカラー */
}
#header, .copyright {
  background-color: #68A77B;
  background-image: url("../image/common/top-bottom-img.png");
  background-repeat: repeat;
  background-size: auto;
  color: #fff;
}
.infor-back {
  background-color: #AEE5CF;
  background-image: url("../image/takenoko/back-01.png");
  background-size: auto;
  background-repeat: repeat;
}
/* -----------------------------------------------------
   ヘッダー・フッター（背景・柄）
----------------------------------------------------- */
#header, .copyright {
  background-color: var(--main-8);
  background-image: url("../image/common/top-bottom-img.png");
  background-repeat: repeat;
  background-size: auto;
  color: var(--white);
}
/* -----------------------------------------------------
   ページタイトル
----------------------------------------------------- */
#page-title.page-title--free-school {
  background-image: url("../image/afterschool/page-title.png");
  background-position: center;
  background-size: cover;
}
/* -----------------------------------------------------
   グリーン系背景（セクション共通）
----------------------------------------------------- */
.section {
  padding-bottom: 80px;
}
.green-back {
  /* 元：#AEE5CF 系のやさしいグリーン */
  background-color: var(--accent-1);
  background-image: url("../image/takenoko/back-01.png");
  background-size: auto;
  background-repeat: repeat;
}
/* ======================================================
   アフタースクールとは（section--about-after-school）
====================================================== */
.section--about-free-school {
  background-image: url("../image/afterschool/about.jpg");
  background-position: center;
  background-size: cover;
}
/* 内側の白背景ボックス */
.section--about-free-school .free-school-content {
  background-color: color-mix(in srgb, var(--white) 80%, transparent);
  margin: 100px auto;
  padding: 60px 40px;
  border-radius: 8px;
  box-shadow: var(--box-shadow-3);
}
/* タイトル */
.free-school-main-title {
  position: relative;
  z-index: 2;
  margin-bottom: 32px;
}
/* 説明文 */
.free-school-content dl {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 80%;
  margin: 40px auto 0 auto;
}
.free-school-content dt {
  font-size: var(--font-m);
  font-weight: 700;
}
.free-school-content dd {
  margin-top: 24px;
  font-size: var(--font-s);
  text-align: left;
  line-height: 1.8;
}
/* -------------------------
   レスポンシブ
   ------------------------- */
@media (max-width: 1024px) { /* タブレット以下のサイズ */
  .section--about-free-school .free-school-content {
    margin: auto;
  }
}
/* タブレット以下 */
@media (max-width: 900px) {
  .section--about-free-school .free-school-content {
    margin: 40px auto;
    padding: 40px 24px;
  }
  .free-school-content dl {
    width: 90%;
    margin-top: 20px;
  }
  .free-school-content dd {
    margin-top: 8px;
    font-size: var(--font-s);
  }
}
/* スマホ S（〜400px） */
@media (max-width: 400px) {
  .section--about-free-school .free-school-content {
    margin: 30px auto;
    padding: 32px 16px;
  }
  .free-school-content dl {
    width: 100%;
  }
}
/* ======================================================
   コンセプト（section--concept）
====================================================== */
.section--concept {
  padding: 0;
}
.concept-content p {
  margin: 30px auto;
  line-height: 1.5;
  text-align: center;
}
.line-top {
  height: 100px;
  width: 100%;
  background-image: url("../image/afterschool/takenoko-line.png");
  background-repeat: repeat-x;
  background-position: top;
  background-size: contain;
}
.line-bottom {
  height: 100px;
  width: 100%;
  background-image: url("../image/afterschool/takenoko-line.png");
  background-repeat: repeat-x;
  background-position: bottom;
  background-size: contain;
}
/* -------------------------
   レスポンシブ
   ------------------------- */
/* タブレット以下 */
@media (max-width: 900px) {
  .section--concept {
    /* ベースの .section padding を活かすので追加の上下paddingは不要 */
  }
  .flex-container {
    flex-direction: column;
  }
  .concept-flex-container img {
    width: 70%;
    margin-bottom: 32px;
  }
  .concept-flex-container p {
    width: 70%;
  }
}
/* スマホ以下のサイズ */
@media (max-width: 767px) {
  .concept-content p {
    text-align: left;
  }
}
/* スマホ L（401〜767px） */
@media (min-width: 401px) and (max-width: 767px) {
  .concept-flex-container {
    margin-top: 24px;
  }
}
/* スマホ S（〜400px） */
@media (max-width: 400px) {
  .concept-flex-container img {
    width: 90%;
  }
  .concept-flex-container p {
    width: 90%;
  }
}
/* ======================================================
   教育理念（section--philosophy）
====================================================== */
.section--philosophy {
  background-image: url("../image/afterschool/philosophy-back.jpg");
  background-position: center right;
  background-size: cover;
}
/* 内側の白背景ボックス */
.section--philosophy .philosophy-content {
  background-color: color-mix(in srgb, var(--white) 80%, transparent);
  margin: 100px auto;
  padding: 60px 40px;
  border-radius: 8px;
  box-shadow: var(--box-shadow-3);
}
.rinen-main-title {
  position: relative;
  z-index: 2;
  margin-bottom: 32px;
}
/* 各理念ブロック */
.section--philosophy dl {
  position: relative;
  z-index: 2;
  text-align: center;
  width: 80%;
  margin: 18px auto 0 auto;
}
.section--philosophy dt {
  font-size: var(--font-m);
/*  font-weight: 700;*/
}
.section--philosophy dd {
  margin-top: 24px;
  font-size: var(--font-s);
  text-align: left;
  line-height: 1.8;
}
/* -------------------------
   レスポンシブ
   ------------------------- */
/* タブレット以下 */
@media (max-width: 900px) {
  .section--philosophy .philosophy-content {
    margin: 40px auto;
    padding: 40px 24px;
  }
  .section--philosophy dl {
    width: 90%;
    margin-top: 24px;
  }
  .section--philosophy dt {
    font-size: var(--font-m);
  }
  .section--philosophy dd {
    margin-top: 12px;
    font-size: var(--font-s);
  }
}
/* スマホ S（〜400px） */
@media (max-width: 400px) {
  .section--philosophy .philosophy-content {
    margin: 30px auto;
    padding: 32px 16px;
  }
  .section--philosophy dl {
    width: 100%;
  }
}
/* ======================================================
   基本情報（section--basic-info）
====================================================== */
.section--basic-info {}
.info-grid-container {
  margin-top: 30px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.info-grid-container img {
  display: block;
  margin: 0 auto;
  height: 150px;
}
.info-grid-container dl {
  text-align: center;
  margin-top: 16px;
}
.info-grid-container dt {
  font-size: var(--font-m);
  font-weight: 700;
}
.info-grid-container dd {
  font-size: var(--font-s);
}
.info-comment {
  margin-top: 40px;
  text-align: center;
}
.info-comment li {
  list-style: none;
  line-height: 1.8;
}
/* -------------------------
   レスポンシブ
   ------------------------- */
/* タブレット以下 */
@media (max-width: 1024px) {
  .info-grid-container {
    grid-template-columns: repeat(2, 1fr);
    margin-top: 0;
  }
  .info-grid-container img {
    height: 130px;
  }
  .info-grid-container dt {
    font-size: var(--font-s);
  }
  .info-comment li {
    text-align: left;
  }
}
/* スマホ（〜767px） */
@media (max-width: 767px) {
  .info-grid-container {
/*    grid-template-columns: repeat(1, 1fr);*/
    margin-top: 0;
	    gap: 0;

  }
  .info-grid-container li {
    margin-top: 30px;
  }
  .info-grid-container img {
    height: 100px;
  }
  .info-grid-container dt {
    font-size: var(--font-s);
  }
  .info-comment li {
    text-align: left;
  }
}
/* スマホ S（〜400px） */
@media (max-width: 400px) {
  .info-comment li {
    width: 90%;
    margin: 0 auto;
    text-align: left;
  }
}
/* ======================================================
   料金（money）テーブル
====================================================== */

#table03 {
  width: 100%;
  margin-top: 30px;
}

#table03 th,
#table03 td {
  text-align: center;
  width: 20%;
  min-width: 130px;
  padding: 10px;
  height: 60px;
}

#table03 th {
  background-color: var(--main-2);
}

#table03 td {
  background-color: var(--white);
}

#table03 .head {
  background-color: var(--main-4);
}

/**/
.money-text {
  margin-top: 10px;
}

/* 横スクロール（タブレット以下） */
@media (max-width: 900px) {
  #table03 {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }

  #table03 .fixed {
    position: sticky;
    left: 0;
  }

  #table03 .fixed::before {
    content: "";
    position: absolute;
    top: 0;
    left: -1px;
    right: -1px;
    height: 100%;
    border-left: 1px solid var(--gray-4);
    border-right: 1px solid var(--gray-4);
  }
}




/* ======================================================
   一日の流れ（section--day-flow）
====================================================== */
.section--day-flow {
  background-color: var(--main-3);
  background-image: url("../image/afterschool/back.png");
  background-repeat: repeat;
  background-size: contain;
}
.day-flow-content {
  max-width: 880px;
  margin-inline: auto;
}
.day-flow-note {
  margin-top: 16px;
  font-size: var(--font-xs);
  color: var(--text-soft);
}
.day-flow-list {
  list-style: none;
  margin: 32px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.day-flow-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 8px;
  padding: 12px 16px;
  background-color: var(--white);
  border-radius: 999px;
  box-shadow: var(--box-shadow-1);
}
.day-flow-step {
  font-weight: 700;
  color: var(--main-7);
}
.day-flow-arrow {
  opacity: 0.7;
}
.day-flow-text {
  font-size: var(--font-s);
}
/* 長期休暇コメント */
.day-flow-comment {
  margin-top: 24px;
  padding-left: 1.2em;
}
.day-flow-comment li {
  font-size: var(--font-xs);
  line-height: 1.8;
}
/* 一日の流れリスト全体 */
.day-flow-list {
  position: relative;
  margin-top: 32px;
  margin-left: 0;
  padding-left: 80px; /* 左に「下校」などのラベル分の余白 */
  list-style: none;
}
/* 真ん中の縦線 */
.day-flow-list::before {
  content: "";
  position: absolute;
  left: 42px; /* 丸の中心位置（↓と合わせる） */
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--text-main);
}
/* 各行 */
.day-flow-list li {
  position: relative;
  display: flex;
  align-items: flex-start;
  padding-bottom: 24px; /* 行間 */
}
/* 丸アイコン */
.day-flow-list li::before {
  content: "";
  position: absolute;
  left: -43px;
  top: 25px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--text-main);
}
/* 左側（時間・ステップ） */
.day-flow-step {
  width: 60px; /* そろえるため固定幅 */
  text-align: left;
  font-weight: 500;
  margin-right: 24px;
}
/* → は非表示にしてデザインをタイムライン寄りに */
.day-flow-arrow {
  display: none;
}
/* 右側の説明 */
.day-flow-text {
  flex: 1;
  line-height: 1.7;
}
/* -------------------------
   レスポンシブ
   ------------------------- */
/* スマホ以下のサイズ */
@media (max-width: 767px) {
	.day-flow-list {
  gap: 24px;
}
  .day-flow-list li {
    border-radius: 12px;
	  flex-direction: column;
    align-items: center;
	  padding: 5px 2px;
  }
  .day-flow-step {
  width: 49px; /* そろえるため固定幅 */
	  margin-right: 5px;

  }
}
/* ======================================================
   わくわく活動（section--activity）
====================================================== */
/* わくわく活動 セクション全体 */
.section--activity {
  padding: 60px 0;
  background: #f9fff3; /* うすい黄緑っぽい背景 */
}

/* タイトル */
.section--activity .main-title {
  text-align: center;
  font-size: 2.2rem;
  font-weight: 700;
  letter-spacing: .1em;
  margin-bottom: 30px;
}

/* 中身のベース */
.activity-content {
  max-width: 960px;
  margin: 0 auto;
}

/* ボックス全体 */
.activity-box {
  background: #ffffff;
  border-radius: 16px;
  padding: 24px 20px 28px;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
  border: 2px solid #ffda7b; /* 黄色系のふち */
}

/* １行に２カラム並べる部分 */
.activity-box__row {
  display: flex;
  gap: 20px;
  margin-bottom: 12px;
}

/* 各カラム */
.activity-box__col {
  flex: 1;
  padding: 16px 14px 18px;
  border-radius: 12px;
  background: #fffaf0;
  display: flex;
  flex-direction: column;
  height: 100%;
  transition: transform .2s ease, box-shadow .2s ease;
}

/* ホバー時のふんわり浮く演出 */
.activity-box__col:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 16px rgba(0,0,0,.08);
}

/* 晴れ・雨で少し色を変える */
.activity-box__col--sunny {
  background: #fff7e0;
}

.activity-box__col--rainy {
  background: #f0f6ff;
}

/* 小見出し（晴れたら…／雨だったら…） */
.activity-box__heading {
  font-size: 1.15rem;
  font-weight: 700;
  margin-bottom: 10px;
  border-left: 6px solid #ffa94d;
  padding-left: 10px;
  display: flex;
  align-items: center;
  gap: 4px;
}

/* アイコン */
.activity-box__icon {
  font-size: 1.2rem;
}

/* 画像まわり */
.activity-box__image {
  width: 100%;
  max-width: 220px;
  margin: 0 auto 12px;
}

.activity-box__image img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
  object-fit: cover;
}

/* 説明テキスト */
.activity-box__text {
  font-size: .95rem;
  line-height: 1.8;
}

/* 下の一文「手先を使う…」 */
.activity-box__note {
  font-size: .95rem;
  font-weight: 600;
  text-align: center;
  margin-top: 10px;
  color: #555;
}

/* スマホ対応（幅が狭い時は縦並び） */
@media (max-width: 768px) {
  .section--activity {
    padding: 40px 0;
  }

  .section--activity .main-title {
    font-size: 1.8rem;
    margin-bottom: 20px;
  }

  .activity-box {
    padding: 18px 14px 22px;
  }

  .activity-box__row {
    flex-direction: column;
    gap: 14px;
  }

  .activity-box__col {
    padding: 14px 12px 16px;
  }

  .activity-box__heading {
    font-size: 1.05rem;
  }

  .activity-box__image {
    max-width: 260px;
    margin-bottom: 10px;
  }

  .activity-box__text {
    font-size: .9rem;
  }

  .activity-box__note {
    font-size: .9rem;
    margin-top: 4px;
  }
}

/* ちょっと広めの画面で余白を調整 */
@media (min-width: 1024px) {
  .activity-box__row {
    gap: 28px;
  }

  .activity-box__col {
    padding: 18px 18px 22px;
  }
}
/* ======================================================
   教室案内（section--classroom）スライダー
====================================================== */
.section--classroom .classroom-content {}
.slider-02 {
  margin: 50px 0;
}
.slider-02 img {
  width: 100%;
  height: auto;
}
/* slick で生成されるスライドの左右余白 */
.slider-02 .slick-slide {
  margin: 0 10px;
}
/* 下段スライダーは逆向き */
.slider-bottom {
  direction: rtl;
}
/* -------------------------
   レスポンシブ
   ------------------------- */
/* スマホ S（〜400px） */
@media (max-width: 400px) {
  .slider-02 {
    margin: 30px 0;
  }
}
/* ======================================================
   お知らせ（section--news）
====================================================== */
.section--news {}
.information-container {
  margin-top: 30px;
}
/* ======================================================
   先生の紹介（section--teachers）
====================================================== */
.section--teachers {
  background-color: var(--main-3);
  background-image: url("../image/afterschool/back.png");
  background-repeat: repeat;
  background-size: contain;
  background-position: right;
}
/* ======================================================
   オンライン受付（section--online）

====================================================== */
.section--online {
  position: relative;
}
/* オーバーレイ（白 50%） */
.section--online::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--white) 50%, transparent);
  z-index: 1;
}
/* 内側コンテンツはオーバーレイの上 */
.section--online .online-content {
  position: relative;
  z-index: 2;
}
/* 画像ラッパー */
.on-line-section-container {
  text-align: center;
}
.on-line-section-container img {
  display: block;
  width: 70%;
  height: auto;
  margin: 0 auto;
}
/* -------------------------
   レスポンシブ
   ------------------------- */
/* タブレット以下 */
@media (max-width: 900px) {
  .on-line-section-container img {
    width: 90%;
  }
}
/* スマホ S（〜400px） */
@media (max-width: 400px) {
  .on-line-section-container img {
    width: 100%;
  }
}
/* ======================================================
   お問い合わせ（section--contact）
====================================================== */
.section--contact {
  position: relative;
  background-image: url("../image/common/contact-back.jpg");
  background-position: center;
  background-size: cover;
}
/* 黒オーバーレイ（70%） */
.section--contact::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: color-mix(in srgb, var(--black) 70%, transparent);
  z-index: 1;
}
/* 内側コンテンツを前面に */
.section--contact .contact-content {
  position: relative;
  z-index: 2;
  color: var(--white);
}
/* ボックス本体 */
.contact-container {
  width: 70%;
  border: 2px solid var(--white);
  padding: 30px 10px;
  margin: 50px auto;
  text-align: center;
}
.contact-container ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.contact-container li {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: left;
  line-height: 2.5;
}
.contact-container li:last-of-type {
  margin-top: 20px;
}
.contact-container img {
  height: 50px;
  display: block;
  margin-right: 8px;
}
.contact-container .c-tel {
  font-size: var(--font-l);
  font-weight: 700;
}
.contact-container .txt {
  text-align: center;
}
/* Insta リンク下線アニメーション */
.insta-link a {
  position: relative;
  display: inline-block;
  text-decoration: none;
  transition: text-shadow 0.3s ease;
}
.insta-link a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1px;
  background: var(--white);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}
.insta-link a:hover::after {
  transform: scaleX(1);
}
/* -------------------------
   レスポンシブ
   ------------------------- */
/* パソコン（高さ1200px〜）＋タブレット以下共通の微調整 */
@media (min-height: 1200px), (max-width: 900px) {
  .contact-container img {
    height: 40px;
  }
}
/* スマホ（〜600px） */
@media (max-width: 600px) {
  .contact-container {
    width: 90%;
  }
  .contact-container img {
    height: 30px;
  }
}