@charset "UTF-8";
/* CSS Document */

h1{
	font-size: 2rem;
		font-family: "Kosugi Maru", "Hiragino Maru Gothic ProN", "ヒラギノ丸ゴ ProN", "Arial Rounded MT Bold", "游ゴシック", sans-serif;
	font-size: 2rem;
	color: #663300;
}
/*❎教育目標*/
.section-01 {
  position: relative;
  width: 100%;
  height: 100vh;
  margin: 150px auto 0;
  text-align: center;

  z-index: 1;
}
/* 背景スライドフェード */
.background-slide-wrapper {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

.fade-slide {
  position: absolute;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

.fade-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.fade-slide.active {
  opacity: 1;
  z-index: 1;
}

/* テキスト配置 */
.section-01-text {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 5;
  font-weight: bold;
  font-family: "Kosugi Maru", "Hiragino Maru Gothic ProN", sans-serif;

  /* 2pxの丸い白フチ */
  text-shadow:
    -2px -2px 0 #fff,
     2px -2px 0 #fff,
    -2px  2px 0 #fff,
     2px  2px 0 #fff,
    -2px  0px 0 #fff,
     2px  0px 0 #fff,
     0px -2px 0 #fff,
     0px  2px 0 #fff,
    -1px -1px 0 #fff,
     1px -1px 0 #fff,
    -1px  1px 0 #fff,
     1px  1px 0 #fff;
}



/* 円（正円） */
.circle-under-text {
  width: 400px;
  height: 400px;
  background-color: rgba(255,255,255,0.2);
  border-radius: 50%;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;

  /*  背景ブラー効果 */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); /* Safari対応 */
}


/* 文字スタイル */
.section-01-text .line1 span {
  font-size: 4.2rem;
  line-height: 4rem;
}

.section-01-text .line2 span {
  font-size: 2rem;
  line-height: 3rem;
  font-weight: 500;
}

.section-01-text span {
  display: inline-block;
  margin: 5px;
  color: #333;
  opacity: 0;
  transform: translateY(20px) scale(0.95);
  animation: popSlow 0.7s ease-out forwards;

}

/* カラフル文字 */
.section-01-text span:nth-child(6n+1) { color: #f77f7f; }
.section-01-text span:nth-child(6n+2) { color: #f6ad55; }
.section-01-text span:nth-child(6n+3) { color: #f6c344; }
.section-01-text span:nth-child(6n+4) { color: #7dd181; }
.section-01-text span:nth-child(6n+5) { color: #56cfe1; }
.section-01-text span:nth-child(6n+6) { color: #a393eb; }

/* アニメーション遅延（必要に応じて続く） */
.section-01-text span:nth-child(1)  { animation-delay: 0.08s; }
.section-01-text span:nth-child(2)  { animation-delay: 0.16s; }
.section-01-text span:nth-child(3)  { animation-delay: 0.24s; }
/* …以下、上限まで指定済み */

@keyframes popSlow {
  0%   { opacity: 0; transform: translateY(20px) scale(0.95); }
  50%  { opacity: 1; transform: translateY(-6px) scale(1.05); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}

/* レスポンシブ */
@media screen and (max-width: 1100px){
  .section-01 {
    margin: 50px auto 0;
  }
  .section-01-text {
    width: 80%;
  }
  .section-01-text .line1 span {
    font-size: 2.5rem;
    line-height: 3rem;
  }
  .section-01-text .line2 span {
    font-size: 1.5rem;
    line-height: 2rem;
    margin-top: 20px;
  }
  .circle-under-text {
    width: 350px;
    height: 350px;
  }
}
/* 最初の行の文字サイズを大きく */
.section-01-text .line1 span {
  font-size: 2.5rem;
  line-height: 3rem;
}

/* 2行目だけ文字サイズを小さく */
.section-01-text .line2 span {
	margin-top: 20px;
  font-size: 1.5rem;
  line-height: 2rem;
  font-weight: 500;
}	
	
}
/*❎青空背景用*/
.sky-illustration {
 position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  z-index: 5;

}

.sky-illustration img {
	margin-top: -50px;
  width:100%; 
  height: auto;
  display: block;
	z-index: 20;
}

.back-sky {
  z-index: 1;
  margin: -10px;
  padding: 0;
  background-color: #9ae6f7;
	background-image: url("../img/bg.png");
		background-repeat: repeat-y;     /* 縦方向にリピート */
  background-size: 100% auto;     
  background-position: top center; 
}

/*幼児像・園長先生コメントふわっと動かす*/

.fade-up {
  opacity: 0;
  transform: translateY(40px);
  transition: all 1s ease-out;
}


/* スクロールで表示されたときに追加されるクラス */
.fade-up.active {
  opacity: 1;
  transform: translateY(0);
}

/* 時差用 */
.delay-1 {
  transition-delay: 0.4s;
}

.delay-2 {
  transition-delay: 0.8s;
}


/*❎めざす幼児像*/
.section-02{
	width: 80%;
	margin:0 auto;
	padding-top: 150px;
	display: flex;
	flex-wrap: wrap;
	gap:30px;
}
.section02-left{
	width: 40%;
}
.section02-left img{
	width: 90%;
	height: 
	border-radius: 20px;
	
}
.section02-right{
	text-align: left;
	width: 50%;
}
.section02-right h1{
	font-size: 2rem;
	margin-bottom: 20px;
	text-align: center;
}
.section02-right ul{
	list-style: none;
}
.section02-right li{
	font-size: 1.3rem;
	font-weight: 600;
	line-height: 3rem;
}

@media screen and (max-width: 1100px) {
  .section-02 {
    flex-direction: column;
    align-items: center;
  }

  .section02-left,
  .section02-right {
    width: 100%;
  }

  .section02-left img {
    width: 100%; /* より大きくして中央にフィットさせる */
    display: block;
    margin: 0 auto;
	  border-radius: 20px;
  }

  .section02-right h1 {
    text-align: center; /* 中央のまま維持 */
  }
	.section02-right ul{
		text-align: center;
		font-size: 1.5rem;
	}
}



/*❎園の特徴*/

.section-02-5{
  margin-top:100px;
  display:flex;
  width:100%;
  min-height:60vh;
  font-family:"Kosugi Maru","Hiragino Maru Gothic ProN","ヒラギノ丸ゴ ProN",
             "Arial Rounded MT Bold","游ゴシック",sans-serif;
  box-sizing:border-box;
}

/* ===== 左側 ===== */
.content-area{
  flex:1 1 50%;
  padding:40px;
  box-sizing:border-box;
  margin-left:30px;
}
.content-box{
  display:none;
  background-color:rgba(255,255,255,0.5);
  border-radius:25px;
  padding:20px 25px;
}
.content-box h3{font-size:1.8rem;margin-bottom:10px;color:#603813;}
.content-box p{font-size:1.2rem;line-height:1.7;color:#333;text-align: left;}
.content-box img{
  width:80%;
  object-fit:cover;
  border-radius:20px;
}

/* ===== 右側（画像ボタン） ===== */
.button-area{
  position:relative;
  flex:0 0 50%;
  min-height:400px;
}

/* ▼ ボタン共通スタイル */
.btn-img{
  position:absolute;
  width:250px;height:250px;
  background-size:contain;
  background-repeat:no-repeat;
  cursor:pointer;
  transition:transform .3s;
  --angle:0deg;           /* 基本角度 */
  --offset:6deg;          /* 揺れ幅 */
  animation:swayPause 6s ease-in-out infinite;
}
.btn-img:hover{transform:rotate(var(--angle)) scale(1.05);}

/* ▼ ボタン 1 */
.btn1{top:5%;  left:5%;  background-image:url("../img/about-img/painting.png");}
.btn1:hover{background-image:url("../img/about-img/painting-hover.png");}

/* ▼ ボタン 2 */
.btn2{top:30%; left:50%; --angle:-8deg; background-image:url("../img/about-img/lunch.png");}
.btn2:hover{background-image:url("../img/about-img/lunch-hover.png");}

/* ▼ ボタン 3 */
.btn3{top:65%; left:10%; --angle:6deg;  background-image:url("../img/about-img/friendhouse.png");}
.btn3:hover{background-image:url("../img/about-img/friendhouse--hover.png");}

/* ===== 揺れ → 静止 → 揺れ キーフレーム ===== */
@keyframes swayPause{
  0%  {transform:rotate(var(--angle));}
  6%  {transform:rotate(calc(var(--angle) + var(--offset)));}
  12% {transform:rotate(var(--angle));}
  18% {transform:rotate(calc(var(--angle) - var(--offset)));}
  24% {transform:rotate(var(--angle));}
  100%{transform:rotate(var(--angle));}
}

/* ===== スマホ（900px 未満） ===== */
@media screen and (max-width:900px){
  .section-02-5{
    display:flex;
    flex-direction:column-reverse;
    margin-top:100px;
  }
  .content-area{
    flex:1 1 50%;
    padding:20px;
    margin-left:0;
  }
  .button-area{
    display:flex;flex-wrap:wrap;
    justify-content:center;align-items:center;
    min-height:auto;padding:30px 0 0;
  }
  .btn-img{
    position:static;
    width:25%;height:auto;
    aspect-ratio:1/1;   /* Safari 対策 */
    margin:10px;
    /* アニメーションは PC と同じく有効 */
  }
  .btn-img:hover{transform:scale(1.05);}  /* hover 時の拡大は維持 */
}






/*❎園長先生ごあいさつ*/

.section-03 {
  display: flex;
  width: 80%;
  margin: 200px auto 0px;
  flex-wrap: wrap;
  gap: 30px;
  padding-bottom: 100px;
  justify-content: center;
}


/* 左：あいさつ文 */
.section03-left {
  width: 50%;  /* 調整 */
  text-align: left;
}

/* 右：写真＋フレーム */
.section03-right {
  width: 35%;  /* 調整 */
  display: flex;
  justify-content: flex-start;
  align-items: flex-end;
  position: relative;
}


/* ラッパー */
.principal-photo-wrap {
  position: relative;
  width: 300px;
  height: auto;

}

/* フレーム（背面） */
.principal-photo-wrap .frame {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  z-index: 1;
}


/* 写真（前面） */
.principal-photo-wrap .principal {
  display: block;
  width: 100%;
  position: relative;
  bottom: 0;
  z-index: 2;
}
/*写真サイズ*/
.principal{
	max-height: 320px;
	object-fit: contain;
}
/* テキストスタイル */
.section-03 h1 {
  margin-bottom: 15px;
  font-size: 2rem;
}
.section-03 p {
  font-size: 1.2rem;
	background-color: rgba(255,255,255,0.7);
	padding: 10px 15px;
	border-radius: 20px;
}




/* ✅ スマホ表示：上下に並べ、順番を逆転 */
@media screen and (max-width: 1100px) {
  .section-03 {
    flex-direction: column;
	  padding-top: 150px;
  }

  .section03-left {
    width: 100%;
    order: 2; /* ✅ 下に移動 */
  }

  .section03-right {
    width: 100%;
    order: 1; /* ✅ 上に移動 */
    text-align: center;
	  justify-content: center;
  }

  .principal-photo-wrap {
    max-width: 250px;
  }
}


/*❎アクセス*/

.back-green{
	padding-top: 200px;
	background-image: url("../img/about-img/smile-back.png");
	background-color: #9ae6f7;
	background-size: cover;
	background-position: top center;
	width: 100%;
}
.section-04{margin-bottom: 100px;}
.section-04 iframe{
	width: 70%;
	min-height: 500px;
	min-width: 500px;
	margin: 0 auto;
	max-width: 920px;
	
}


.parking{
	margin: 0 auto;
	justify-content: center;
	display: flex;
	flex-wrap: wrap;
	gap:50px;
}
.parking img{
	background-color: #fff;
	border-radius: 20px;
	max-width: 400px;
	width: 80%;

}
@media screen and (max-width: 1100px){
	.section-04 iframe{

	min-height: 200px;
	min-width: 200px;
	}
}

/*❎幼稚園概要*/
/* 全体を包むブロック */
.about-summary {
  position: relative;
  width: 100%;
  padding-bottom: 100px;
}

/* テーブル基本設定 */
.table {
  width: 80%;
  margin: 0 auto 60px;
  border-collapse: collapse;  /* ← 行間は padding で作る */
  font-family: "Kosugi Maru", sans-serif;
  font-size: 1.5rem;
  color: #603813;
}

/* テーブル見出し */
.table th {
  text-align: right;
  vertical-align: top;
  padding: 12px 20px 12px 0;
  white-space: nowrap;
  font-weight: bold;
  width: 180px;
}

/* テーブル内容 */
.table td {
  text-align: left;
  vertical-align: top;
  padding: 12px 0;
}
/* 沿革タイトルだけ左寄せ */
.table th.history-title {
  text-align: left !important; 
  padding-left: 0.5em;        
}

/* 2行目以降にドットラインを背景で表示 */
.table tr + tr {
  background: repeating-linear-gradient(
    90deg,
    #f39800 0 3px,
    transparent 3px 12px
  );
  background-position: left top;
  background-size: 100% 6px;  /* 高さ6pxのドット帯 */
  background-repeat: no-repeat;
}


/* 沿革写真（PC時右下に回転して重ねる） */
.history-photo {
  position: absolute;
  right: 7%;
  bottom: 150px;
  width: 400px;
  max-width: 40%;
  z-index: 10;
}



/* スマホ時のテーブルと写真調整 */
@media screen and (max-width: 1100px) {
  .table {
    width: 90%;
    font-size: 1.2rem;
  }

  .table th {
    width: 100px;
  }

  .history-photo {
    position: static;
    display: block;
    margin: 40px auto 0;
    width: 70%;
    max-width: 350px;
    transform: rotate(0deg);
  }
}

/* ❎園についてのみ問い合わせ背景変更*/

.contact{
	width: 100%;
	background-image: url("../img/about-img/contact-backimg.png");
	background-size: cover;
	background-position: top center;
	padding: 0 0 100px;
	
}
.contact-no{
	width: 80%;
	margin: 0 auto;
}