html{
  scroll-behavior:smooth;
}

body{
  font-family:
  "Hiragino Sans",
  "Yu Gothic",
  sans-serif;
}

header{
  font-family: serif;
}

header{
  position:fixed; 
  top:0;
  left:0;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:15px 40px;
  background-color:white;
	z-index: 999;
	
	box-sizing:border-box;
}


.site-title h1{
  font-size:24px;
  margin:0;
}

.sub-title{
  font-size:12px;
  margin:0;
}

.header-buttons{
  display:flex;
  gap:10px;
}

.green-button{
  background-color:#60C46C;
  color:white;
  padding:10px 20px;
  border-radius:999px;
  text-decoration:none;
  font-size:14px;
	transition:0.3s;
	display:inline-block;
  box-sizing:border-box;
  max-width:100%;
}
.green-button:hover{
  opacity:0.8;
}

.main-visual img{
	width:100%;
	display:block;
}

.greeting{
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap:50px;
  padding:100px 5%;
}

.greeting-text{
  width:51%;
}

.greeting-text h2{
  font-size:30px;
  display: inline-block;
  border-bottom:15px solid #f3ef8d;
  line-height:0.3;
  padding-bottom:0px;
  margin-bottom:0px;
}

.greeting-text p{
  line-height: 2;
  font-size: 15px;
}

.greeting-image{
	width: 50%;
}

.greeting-image img{
  width: 100%;
  border-radius: 20px;
  display: block;
}
.feature{
  padding: 100px 5%;
  text-align: center;
}

.feature h2{
  display: inline-block;
  font-size:30px;
	border-bottom:15px solid #f3ef8d;
  line-height:0.3;
  padding-bottom:0px;
  margin-bottom:60px;
}

.feature-box{
  display: flex;
  justify-content: center;
  gap: 50px;
  margin-bottom: 50px;
}

.feature-card{
  width: 350px;
  background-color: white;
  border-radius: 30px;
  padding: 30px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
  text-align: left;
}

.feature-card img{
  width: 100%;
  border-radius: 20px;
  margin-bottom: 20px;
}

.feature-card h3{
  font-size:18px;
	margin-bottom:20px;
	text-align: center;
}

.feature-card p{
	line-height: 1.8;
	font-size: 15px;
}

.feature-text{
  font-size: 20px;
  font-weight: normal;
  margin-top: 50px;
}

.target{
  text-align:center;
  padding:100px 5%;
}

.target h2{
  display:inline-block;
	font-size:30px;
	border-bottom:15px solid #f3ef8d;
  line-height:0.3;
  padding-bottom:0px;
  margin-bottom:10px;
}

.target-box{
  background-color:#EBFFEE;
  border-radius:40px;
  padding:10px 50px;
}

.target-box p{
  font-size:25px;
  font-weight:bold;
  margin-bottom:60px;
  line-height:1.5;
}

.target-box p:last-child{
  margin-bottom:0;
}

.flow-section{
  width:90%;
  max-width:1200px;
  margin:80px auto;
  text-align:center;
}

.flow-title{
  font-size:25px;
  font-weight:bold;
  display:inline-block;
  background:linear-gradient(
    transparent 60%,
    #f4ef93 60%
  );
  padding:0 20px;
  margin-bottom:30px;
}

.flow-text{
  font-size:20px;
  line-height:1.8;
  margin-bottom:60px;
  font-weight:normal;
}

.flow-box{
  background:#dfeee0;
  border-radius:40px;
  padding:50px 40px;
}

.flow-subtitle{
  font-size:25px;
  margin-bottom:40px;
  font-weight:bold;
}

.flow-item{
  display:flex;
  align-items:center;
  border-top:3px solid #777;
  padding:25px 0;
}

.flow-item:last-child{
  border-bottom:3px solid #777;
}

.flow-label{
  width:180px;
  background:#67c96b;
  color:white;
  font-size:20px;
  font-weight:bold;
  padding:10px 5px;
  flex-shrink:0;
}

.flow-content{
  flex:1;
  text-align:center;
	font-size:20px;
  font-weight:normal;
  line-height:1.6;
}

.diamond-title{
  text-align:center;
  font-size:20px;
  margin-bottom:40px;
	font-weight:bold;
}

.diamond-section{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:50px;
	padding:100px 0;
	width:100%;
}

.diamond-wrapper{
  display:flex;
  justify-content:center;
	gap:120px;
	flex-wrap: wrap;
	width:100%;
}

.diamond{
  width:180px;
  height:180px;
  background-color:#EBFFEE;
  transform:rotate(45deg);
  display:flex;
  justify-content:center;
  align-items:center;
}

.diamond p{
  transform:rotate(-45deg);
  text-align:center;
  font-size:20px;
  font-weight:bold;
  line-height:1.8;
}

.price-section{
  width:90%;
  max-width:1200px;
  margin:60px auto;
}

.price-title{
  text-align:center;
  font-size:30px;
  font-weight:bold;
  display:block;
  width:fit-content;
  margin:0 auto 40px;
  background:linear-gradient(
    transparent 60%,
    #efe88f 60%
  );
  padding:0 30px;
}

.price-top-text{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:40px;
  margin-bottom:50px;
}

.small-text{
  font-size:15px;
  font-weight:bold;
  line-height:1.5;
}

.main-text{
  font-size:30px;
  font-weight:bold;
}

.price-table{
  background:#dfeee0;
  margin-bottom:25px;
}

.table-header{
  background:#64c56b;
  text-align:center;
  font-size:30px;
  font-weight:bold;
  padding:20px;
}

.table-row{
  display:flex;
  border-top:4px solid #777;
}

.left-cell{
  width:32%;
  border-right:4px solid #777;
  font-size:20px;
  font-weight:bold;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px 20px;
}

.right-cell{
  flex:1;
  font-size:20px;
  font-weight:bold;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  padding:20px 20px;
}

.note-text{
  font-size:14px;
  font-weight:normal;
  margin-bottom:80px;
  line-height:1.8;
}

.school-box{
  background:#dfeee0;
  margin-bottom:30px;
}

.school-header{
  background:#64c56b;
  text-align:center;
  font-size:30px;
  font-weight:bold;
  padding:10px;
}

.school-content{
  text-align:center;
  padding:20px 20px;
}

.price-big{
  font-size:25px;
  font-weight:bold;
  margin-right:40px;
}

.price-small{
  font-size:20px;
  font-weight:bold;
}

.note-text{
  font-size:14px;
  font-weight:normal;
  margin-bottom:80px;
  line-height:1.8;
}

.support-box{
  text-align:center;
}

.support-title{
  display:inline-block;
  font-size:20px;
  font-weight:bold;
  background:linear-gradient(
    transparent 60%,
    #cfe8c7 60%
  );
  padding:0 20px;
  margin-bottom:5px;
}

.support-text{
  font-size:15px;
  font-weight:normal;
  line-height:1.8;
}

.contact-section{
  width:90%;
  max-width:1200px;
  margin:60px auto 100px;
}

.contact-title{
  text-align:center;
  font-size:30px;
  font-weight:bold;
  display:block;
  width:fit-content;
  margin:0 auto 60px;
  background:linear-gradient(
    transparent 60%,
    #f3ef8d 60%
  );
  padding:0 25px;
}

.contact-grid{
  display:flex;
  justify-content:space-between;
  gap:30px;
  margin-bottom:70px;
}

.contact-card{
  background:white;
  border:2px solid #bdbdbd;
  border-radius:35px;
  width:320px;
  min-height:320px;
  padding:40px 30px;
  text-align:center;
}

.contact-card h3{
  font-size:30px;
  margin-bottom:30px;
}

.contact-card p{
  font-size:18px;
  line-height:1.8;
  font-weight:bold;
}

.icon-circle{
  width:90px;
  height:90px;
  background:#65c86a;
  border-radius:50%;
  margin:0 auto 30px;

  display:flex;
  align-items:center;
  justify-content:center;

  color:white;
  font-size:42px;
}

.icon-circle img{
  width:100px;
  height:100px;
  object-fit:contain;
}

.green-button{
  display:inline-block;
  background:#65c86a;
  color:white;
  text-decoration:none;
  font-size:18px;
  font-weight:bold;
  padding:18px 28px;
  border-radius:999px;
  transition:0.3s;
}

.green-button:hover{
  transform:translateY(-3px);
  opacity:0.9;
}

.sns-icons{
  display:flex;
  justify-content:center;
  gap:30px;
  margin-top:20px;
}

.sns-link{
  width:90px;
  height:90px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  text-decoration:none;
  font-size:30px;
  background:white;
  border:2px solid #cfcfcf;
}

.sns-link img{
  width:100px;
  height:100px;
  object-fit:contain;
}

.line{
  color:#06c755;
}

.insta{
  color:#e1306c;
}

.school-info{
  background:white;
  border:2px solid #bdbdbd;
  border-radius:40px;
  text-align:center;
  padding:60px 30px;
}

.school-info h2{
  font-size:30px;
  margin-bottom:20px;
}

.school-info p{
  font-size:18px;
  margin-bottom:40px;
}

.large-button{
  font-size:24px;
  padding:22px 40px;
}

.footer{
  background:#65c86a;
	text-align:center;
	font-family: serif;
  padding:30px 20px 30px;
}

.footer-top-link{
  text-decoration:none;
  color:black;
  display:inline-block;
}

.footer-sub{
  font-size:18px;
  margin-bottom:0px;
  font-weight:bold;
}

.footer-title{
  font-size:30px;
  margin-top:0px;
  margin-bottom:40px;
}

.footer-sns{
  background:white;
  width:280px;
  margin:0 auto 40px;
  border-radius:35px;

  display:flex;
  justify-content:center;
  align-items:center;
  gap:60px;
  padding:35px 45px;
}

.footer-icon{
  font-size:64px;
  text-decoration:none;
}

.footer-icon img{
  width:100px;
  height:100px;
	object-fit:contain;
	display:block;
}

.footer-icon .fa-line{
  color:#06c755;
}

.footer-icon .fa-instagram{
  color:#e1306c;
}

.copyright{
  font-size:20px;
  color:#666;
}