@charset "utf-8";

/* ======================================================
   フリースクールたけのこページ
====================================================== */
:root {
  --main-color: #68A77B; /* ページのメインカラー */
  --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-5);
  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/takenoko/page-title.jpg");
  background-position: bottom;
  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-free-school）
====================================================== */

.section--about-free-school {
  background-image: url("../image/takenoko/free-school-img.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: 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 .concept-content {}

.flex-container {
  display: flex;
  justify-content: center;
  align-items: center;
gap: 40px; 
}

.concept-flex-container {
  margin-top: 50px;
}

.concept-flex-container img {
  display: block;
  margin: 0 auto;
  width: 50%;
}

.concept-flex-container p {
  width: 50%;
  margin: 0;
  line-height: 1.5;
}

/* -------------------------
   レスポンシブ
   ------------------------- */
/* タブレット以下 */
@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%;
  }
}

/* スマホ 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/takenoko/rinen-back.jpg");
  background-position: top;
  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 {
	background-color: var(--main-3);
	background-image: url("../image/takenoko/back-01.png");
	background-repeat: repeat;
	background-size: contain;
	
}

.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: 900px) {
  .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;
  }

  .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: center;
  }
}

/* スマホ S（〜400px） */
@media (max-width: 400px) {
  .info-comment li {
    width: 90%;
    margin: 0 auto;
    text-align: left;
  }
}



/* ======================================================
   教室案内（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 {

		background-color: var(--main-3);
	background-image: url("../image/takenoko/back-01.png");
	background-repeat: repeat;
	background-size: contain;
}

.information-container {
  margin-top: 30px;
}



/* ======================================================
   オンライン受付（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;
  }
}