@charset "UTF-8";
/* CSS Document */
/* ............................................. */
.english_lesson .top-wrapper {
    background-color: lightgoldenrodyellow;
    background-image:
        radial-gradient(circle at 15% 20%, rgba(255,255,255,0.5) 90px, transparent 91px),
        radial-gradient(circle at 85% 80%, rgba(255,255,255,0.4) 120px, transparent 121px),
        repeating-linear-gradient(
            45deg,
            rgba(255,255,255,0.15),
            rgba(255,255,255,0.15) 10px,
            transparent 11px,
            transparent 20px
        );
}


.english_lesson #circular-text {
	margin: 60px auto 0;
	font-size: 3rem;
	line-height: 30px;
}
.english_lesson .piyohoiku_main_title {
	margin: 0 auto 60px;
	flex-direction: column;
}
.english_lesson .main_title {
	margin: 0;
	font-size: 3.6rem;
	line-height: 36px;
}
.illustrator_img {
	display: inline-block;
	width: 200px;
	height: auto;
}
.english_lesson .main_title, .english_lesson .lead_top_img {
	width: 100%;
}
.english_lesson .section-top__image {
	height: auto;
}
.english_lesson .main_title_section {
	margin: 20px auto 40px;
}
.overview_nursery_table {
	margin: 0 auto;
}
.self_introduction {
	display: flex;
	justify-content: space-around;
	padding: 0 60px;
}
.red_box, .blue_box {
	padding: 0 20px;
}
.red_box {
	border-left: double 4px rgba(238, 168, 182, 1);
	border-right: double 4px rgba(238, 168, 182, 1);
}
.blue_box {
	border-left: double 4px #6ec2ea;
	border-right: double 4px #6ec2ea;
}


.self_introduction_pic {
	padding: 5px 0;
  border-radius: 20px 20px 0 0;
  background-image:
        radial-gradient(circle at 20% 30%, rgba(255,255,255,0.5) 30px, transparent 31px),
        radial-gradient(circle at 80% 70%, rgba(255,255,255,0.4) 50px, transparent 51px),
        radial-gradient(circle at 70% 10%, rgba(255,255,255,0.3) 20px, transparent 21px),
        radial-gradient(circle at 10% 75%, rgba(255,255,255,0.5) 15px, transparent 16px);
}
.red_box .self_introduction_pic {
	background-color: rgba(244, 200, 220, 0.8);   /* #F4C8DC */
}
.red_box .self_introduction_paragraphe {
	background-color: rgba(244, 200, 220, 0.5);
}
.blue_box .self_introduction_pic {
	background-color: rgba(205, 232, 255, 1);
}

.blue_box .self_introduction_paragraphe {
	background-color: rgba(205, 232, 255, 0.3);
}

.self_introduction_pic img {
	display: block;
	width: 180px;
	height: auto;
	margin: 10px auto;
	padding: 8px 0;
	border-radius: 100px;
	border: solid 4px rgba(238, 168, 182, 1);
}
.blue_box .self_introduction_pic img {
	border: solid 4px #6ec2ea;
}
.self_introduction_icone, .self_introduction_flag {
	display: inline-block;
	width: 20px;
	height: auto;
}
.self_introduction_flag.jpn {
	border: solid 0.5px #999999;
}
.english_lesson .our_vision {
    margin: 160px 0 200px;
}
.year_program {
	margin: 200px 0;
}
.self_introduction th {
	text-align: right;
	padding-right: 40px;
}
.self_introduction td {
	text-align: left;
}
.self_introduction_paragraphe {
	padding: 10px 20px;
  border-radius: 0 0 20px 20px;
  background-image:
        radial-gradient(circle, #ff9aa2 4px, transparent 5px),
        
        radial-gradient(circle, #b5ead7 4px, transparent 5px),
        radial-gradient(circle, #c7ceea 4px, transparent 5px);
    background-size: 160px 160px;
    background-position: 0 0, 60px 0px, 90px 80px;
}
.english_lesson .japanese {
  color: #888888;
  font-size: 1.6rem;
  line-height: 24px;
}

@media(max-width: 1060px) {
	.self_introduction {
	justify-content: space-between;
}
}

@media(max-width: 960px) {
  .english_lesson .japanese {
  font-size: 1.6rem;
  line-height: 21px;
}
	.self_introduction {
	padding: 0 40px;
}
	.self_introduction th {
    padding-right: 20px;
}
	.red_box, .blue_box {
	padding: 0 30px;
}
}

@media(max-width: 840px) {
	.red_box, .blue_box {
        padding: 0 20px;
    }
}

@media(max-width: 780px) {
	.self_introduction_paragraphe {
    padding: 10px;
}
}

@media(max-width: 740px) {
	.self_introduction {
		flex-direction: column;
	}
	.red_box {
		margin-bottom: 60px;
	}
	.self_introduction th {
		padding-right: 20px;
	}
}

@media(max-width: 640px) {
	.english_lesson #circular-text {
	margin: 40px auto 0;
	font-size: 2rem;
	line-height: 20px;
}
.english_lesson .piyohoiku_main_title {
	margin: 0 auto 30px;
}
.english_lesson .main_title {
	font-size: 3rem;
	line-height: 30px;
}
.illustrator_img {
	width: 160px;
	font-weight: 0;
}
}

@media(max-width: 580px) {
	.self_introduction {
	padding: 0 20px;
}
.red_box, .blue_box {
	padding: 0 20px;
}
}
@media (max-width: 580px) {
    .self_introduction {
        padding: 0 20px;
    }
    .english_lesson .our_vision {
    margin: 100px 0 160px;
}
}

@media(max-width: 540px) {
  .br_540px {
    display: inline-block;
  }
	.english_lesson #slider_bg {
	height: auto;
}
	.english_lesson #circular-text {
		letter-spacing: 4px;
	}
}

@media(max-width: 480px) {
	.english_lesson table td:nth-child(2), .english_lesson table th:nth-child(2), .english_lesson th:nth-child(1), .english_lesson td:nth-child(1) {
        padding: 5px;
    }
}

@media(max-width: 440px) {
	.self_introduction_paragraphe .overview_nursery_table th:nth-child(1) {
		padding: 10px 20px 0;
	}
	.english_lesson table td:nth-child(2), .english_lesson table th:nth-child(2), .english_lesson th:nth-child(1), .english_lesson td:nth-child(1) {
        padding: 3px;
    }
	.english_lesson .overview_nursery_table tr {
        border: none;
    }
}
@media (max-width: 420px) {
    .self_introduction {
        padding: 0 10px;
    }
    .english-program {
      padding: 20px 10px;
    }
}
@media(max-width: 420px) {
	.self_introduction {
	padding: 0 10px;
	}
}


.english-program {
  max-width: 900px;
  margin: auto;
  padding: 30px;
  font-family: "Segoe UI", sans-serif;
  background: #f9fcff;
  border-radius: 20px;
}

.english-program h2 {
  text-align: center;
  color: #4a90e2;
  margin-bottom: 5px;
}

.subtitle {
  text-align: center;
  color: #777;
  margin-bottom: 30px;
}

.program-block {
  background: white;
  padding: 20px;
  border-radius: 15px;
  margin-bottom: 20px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}

.program-block h3 {
  color: #ff7aa2;
}

.year_program table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 10px;
}

.year_program th, .year_program td {
  padding: 10px;
  border-bottom: 1px solid #eee;
  text-align: left;
}

.year_program th {
  background: #eaf4ff;
}


/* 2eme bloc du programme de cours d'anglais ............................................. */
.english-program {
  background: #f9fbff;
  padding: 40px;
  border-radius: 20px;
 /* font-family: "Arial", sans-serif; */
}

.english-program h2 {
  text-align: center;
  color: #4a6fa5;
  margin-bottom: 20px;
}

.intro {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 40px;
  color: #555;
}

.program-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}

.month {
  background: white;
  padding: 20px;
  border-radius: 16px;
  box-shadow: 0 6px 15px rgba(0,0,0,0.05);
  transition: transform 0.2s;
}

.month:hover {
  transform: translateY(-5px);
}

.month h3 {
  color: #ff8fa3;
  margin-bottom: 10px;
}

.month p {
  margin: 5px 0;
  color: #444;
}




/* 3eme bloc du programme de cours d'anglais ............................................. */
.english-program {
  max-width: 950px;
  margin: auto;
  padding: 30px;
  /* font-family: "Noto Sans JP", sans-serif; */
  background: #f7fbff;
  border-radius: 20px;
}

.year_program h2 {
  text-align: center;
  color: #4a90e2;
}

.year_program .subtitle {
  text-align: center;
  color: #777;
  margin-bottom: 30px;
}

.age-block {
  background: white;
  padding: 20px;
  border-radius: 15px;
  margin-bottom: 25px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}

.age-block h3 {
  color: #ff7aa2;
}

.goal {
  background: #fff5f8;
  padding: 10px 15px;
  border-radius: 10px;
}

.year_program table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 15px;
}

.year_program th, .year_program td {
  padding: 10px;
  border-bottom: 1px solid #eee;
  vertical-align: top;
}
@media (max-width: 440px) {
.year_program td {
  padding: 3px;
}
.sample_schedule {
  border-collapse: separate; /* important */
  border-spacing: 0 12px;    /* 0 horizontal / 12px vertical entre les tr */
}
}

.year_program th {
  background: #eaf4ff;
}


/* 4eme bloc du programme de cours d'anglais .......................................... */

.english-program{
max-width:900px;
margin:auto;
padding:20px;
}

.year_program h2{
text-align:center;
color:#ff8fb1;
}
.year_program h2, .special-events h2 {
  font-size: 2rem;
  font-weight: 500;
}
@media (max-width: 960px) {
    .year_program h2, .special-events h2 {
        font-size: 1.8rem;
        margin: 0 0 20px;
    }
  }
  @media (max-width: 540px) {
   .english-program {
      padding: 20px 10px 40px;
    }
    .age-block {
      padding: 20px 0;
    }
  }
  @media (max-width: 420px) {
    .english-program, .program-block {
      padding: 20px 10px;
    }
  }



.monthly{
background:white;
padding:15px;
border-radius:20px;
box-shadow:0 4px 10px rgba(0,0,0,0.05);
margin-bottom:20px;
}

.accordion{
width:100%;
padding:15px;
margin-top:10px;
border:none;
border-radius:15px;
background:#ffe4f2;
font-size:18px;
cursor:pointer;
}

.panel{
display:none;
background:white;
padding:15px;
border-radius:15px;
margin-bottom:10px;
}

/* MOBILE */
@media(max-width:600px){
h2 {
  font-size:22px;
}
.accordion {
  font-size:16px;
}
.panel {
    padding: 15px 5px;
  }
.english-program, .program-block {
  padding: 20px 5px;
}
  td .japanese {
    display: none;
  }
}



/* section de lessons speciaux de l'ecole .......................................... */
.our_vision.special_event {
  background-color: rgba(192, 49, 176, 0.1);
}
.special-events{
max-width: 960px;
margin: 40px auto;
padding: 20px;
/* background:#fff7fb; */
border-radius:25px;
/* font-family:"Noto Sans JP",sans-serif; */
}

.special-events h2{
text-align:center;
color:#ff7aa2;
margin-bottom:40px;
font-weight: 600;
}

/* ===== TIMELINE ===== */
.timeline{
position:relative;
padding-left:40px;
}

.timeline::before{
content:"";
position:absolute;
left:15px;
top:0;
bottom:0;
width:4px;
background:#ffd1e6;
}

.timeline-item{
position:relative;
margin-bottom:40px;
}

/* kawaii moving dot */
.timeline-item::before{
content:"✨";
position:absolute;
left:-5px;
top:10px;
font-size:20px;
animation: float 2s infinite ease-in-out;
}

@keyframes float{
0%{transform:translateY(0);}
50%{transform:translateY(-6px);}
100%{transform:translateY(0);}
}

.timeline-date{
font-weight:bold;
color:#4a90e2;
margin-bottom:8px;
}

/* ===== EVENT CARD ===== */
.event-card{
background:white;
padding:18px;
border-radius:20px;
box-shadow:0 4px 12px rgba(0,0,0,0.05);
}

.event-card img{
	display: inline-block;
	width:200px;
	height: auto;
	border-radius:15px;
	margin-bottom:10px;
	border: 1px solid #999999;
}

.event-card h3{
color:#ff8fb1;
}

/* MOBILE */
@media(max-width:600px){
.timeline{padding-left:25px;}
}

.program-block ul {
	list-style: none;
	padding: 0;
	margin: 0 0 40px;
}


/* Animation sur h3 de special events ............................. */
.event-card {
    position: relative;
    border-radius: 16px;
    padding: 0 18px 20px;
    background: #f7fbff;
    box-shadow: 0 4px 12px rgba(0,0,0,0.08);
    border: 0.5px solid rgba(0,0,0,0.08);
    margin-bottom: 60px;
    overflow: hidden;
}

/* bulles de dialogue */
.event-card::before,
.event-card::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: rgba(173, 216, 230, 0.25);
}

.event-card::before {
    width: 90px;
    height: 90px;
    top: -30px;
    right: -30px;
}

.event-card::after {
    width: 60px;
    height: 60px;
    bottom: -20px;
    left: -20px;
}


/* carte active */
.event-card.active {
    box-shadow: 0 10px 28px rgba(0,0,0,0.12);
}

/* titre cliquable */
.event-toggle {
    cursor: pointer;
    margin: 0 0 10px;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
}
.event-toggle span {
  display: block;
}
.event-toggle .arrow {
  margin-bottom: 0;
}
/* flèche */
.arrow {
    transition: transform 0.4s ease;
}

/* rotation flèche */
.event-card.active .arrow {
    transform: rotate(180deg);
}

/* image + texte cachés */
.event-card img,
.event-card p {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transform: translateY(-12px);
    transition:
        max-height 0.6s cubic-bezier(.4,0,.2,1),
        opacity 0.45s ease,
        transform 0.45s ease,
        margin 0.4s ease;
    margin: 0;
}

/* visibles */
.event-card.active img,
.event-card.active p {
    max-height: 600px;
    opacity: 1;
    transform: translateY(0);
}

/* espacements */
.event-card.active img {
    margin: 20px 0 0;
}

.event-card.active p {
    margin-top: 12px;
}

/* image style */
.english_special_event_img {
    width: 100%;
    border-radius: 12px;
    display: block;
    transition: transform 0.6s ease;
}

/* zoom image */
.event-card.active .english_special_event_img {
    transform: scale(1.03);
}

@media(max-width:540px) {
  .special-events {
    padding: 0px 20px 20px 10px;
  }
  .bottom_ligne {
    border-bottom: 2px #ff7aa2 dashed;
  }
}
@media(max-width:440px) {
  .special-events {
    padding: 0px 20px 20px 0;
  }
}











/* conteneur global */
#season-bg {
    position: fixed;
    inset: 0;
    z-index: -1;
    overflow: hidden;
}

/* PARTICULE GENERIQUE */
.particle {
    position: absolute;
    top: -10px;
    pointer-events: none;
}

/* 🌧 pluie */
.rain {
    width: 2px;
    height: 20px;
    background: rgba(255,255,255,0.6);
    animation: rainFall linear infinite;
}

@keyframes rainFall {
    to {
        transform: translateY(110vh);
    }
}

/* ❄ neige */
.snow {
    width: 8px;
    height: 8px;
    background: white;
    border-radius: 50%;
    animation: snowFall linear infinite;
}

@keyframes snowFall {
    to {
        transform: translateY(110vh);
    }
}

/* 🍁 feuilles automne */
.leaf {
    width: 12px;
    height: 12px;
    background: orange;
    border-radius: 30% 70% 70% 30%;
    animation: leafFall linear infinite;
}

@keyframes leafFall {
    to {
        transform: translateY(110vh) rotate(360deg);
    }
}

/* 🌸 printemps fleurs */
.flower {
    width: 10px;
    height: 10px;
    background: pink;
    border-radius: 50%;
    animation: flowerFall linear infinite;
}

@keyframes flowerFall {
    to {
        transform: translateY(110vh);
    }
}

/* ✨ été éclats */
.sparkle {
    width: 4px;
    height: 4px;
    background: gold;
    border-radius: 50%;
    animation: sparkleFloat 3s ease-in-out infinite alternate;
}

@keyframes sparkleFloat {
    from { transform: translateY(0px); opacity: 0.4; }
    to { transform: translateY(-40px); opacity: 1; }
}

table.sample_schedule {
  max-width: 680px;
  width: 100%;
  margin: 0 auto;
}
.td10 {
  width: 200px;
  color: #6ec2ea;
  font-weight: 600;
  text-align: left;
}

@media(max-width:480px) {
  .td10 {
  width: 150px;
}
}
@media(max-width:380px) {
  .td10 {
  width: 120px;
}
}