@charset "utf-8";

/* 基本CSS */
*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    color: #4e440a;
    font-family: "Kiwi Maru", serif;
    font-weight: 400;
    font-style: normal;
	line-height: 2;
    /* outline: 1px solid red */
}
.box{
    padding: 30px;
}
header{
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 999;
    background: #ff51aee8;
    height: auto;
    padding: 10px;
}
main{
    overflow: hidden;
}
footer{
    background: #FF51AD;
    text-align: center;
}
p{
    font-size: 1.1em;
    margin: 0 0 0 10px;
}
span{
    font-size: 1.3em;
}
h2{
    text-align: center;
    padding: 10px;
    color: #fdfdfd;
    font-size: 2.8em;
}
h3{
    text-align: center;
    padding: 15px;
    color: #fdfdfd;
    font-size: 1.8em;
}
h4{
    margin: 10px 0 10px 10px;
    font-size: 1.3em;
}
img.radius-img{
    display: block;
    border-radius: 15px;

}
.box-contents{
    margin: 30px 0;
}

/* content */
.container{
    width: 1100px;
    margin: 0 auto;
    padding: 40px 0;
}
img#bottom-line,img#top-line,img.wave-line{
    display: block;
    width: 100%;
}
#hanabi,#wind_chime,#morning-glory,#Straw_Hat,#sunflour,#watermelon,#shaved-ice,#ramune-soda,#water-balloon,#corn{
    display: block;
    width: 20%;
    position: absolute;
    z-index: 3;
}
.course-box img,
.for-working-box img {
    width: 50%;
    max-width: 100%;
    height: auto;
    margin: 0; 
    display: block;
    border-radius: 15px;
}
.course-box .box,
.for-working-box .box {
    display: flex;
    gap: 25px;
    align-items: flex-start;
}
.media{
    width: 50%;
}
.media img{
    width: 100%;
}

/* Main-visual */
#main-vis-group{
    background-color: #fff;
    width: 100%;
    height: 100vh;
    background-repeat: no-repeat;
    background-position: bottom 40% center;
    background-size: cover;
    position: relative;
}
#main-vis-group::before {
background: rgba(255,81,173,0.4);
content: '';
width: 100%;
height: 30%;
position: absolute;
top: 70%;
left: 0;
z-index: 2
}
#main-logo img{
    position: absolute;
    width: 750px;
    height: auto;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
}
#main-logo img:nth-child(1){
    z-index: 10;
}
#main-logo img:nth-child(2){
    z-index: 11;
}
#main-logo img:nth-child(3){
    z-index: 12;
}
#main-logo img:nth-child(4){
    z-index: 14;
}

#girl{
    display: block;
    position: absolute;
    bottom: 5%;
    left: 3%;
    z-index: 3;
}
#boy{
    display: block;
    position: absolute;
    bottom: 5%;
    right: 3%;
    z-index: 3;
}
#left_asset{
    display: block;
    position: absolute;
    width: auto;
    top: 140px;
    left: 0%;
    z-index: 2;
}
#right_asset{
    display: block;
    position: absolute;
    width: auto;
    top: 140px;
    right: 0%;
    z-index: 2;
}
#top-line{
    position: absolute;
    width: auto;
    height: auto;
    top: 100px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}
#bottom-line{
    position: absolute;
    width: auto;
    height: auto;
    bottom: 10px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 2;
}

/* main-vis-slides */
.main-vis-slides{
  position: absolute;
  inset: 0;
  z-index: 1;
  overflow: hidden;
}
.main-vis-slides img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  animation-name: mainVisFade;
  animation-duration: 12s;
  animation-iteration-count: infinite;
}
.main-vis-slides img:nth-child(1){ animation-delay: 0s; }
.main-vis-slides img:nth-child(2){ animation-delay: 4s; }
.main-vis-slides img:nth-child(3){ animation-delay: 8s; }
@keyframes mainVisFade {
  0%{
    opacity: 0;
  }
  20%{
    opacity: 1;
  }
  80%{
    opacity: 0;
  }
  100%{
    opacity: 0;
  }
}

/* course */
#course-group{
    background-color: #CAFAFF;
}
#course-group h2{
    display: block;
    background-color: #2BBAFF;
}
.course-box-wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.course-box{
    background-color: #ffffff;
    width: 100%;
    border-radius: 15px;
    position: relative;
}
#hanabi{
    top: -10%;
    left: -12.5%;
}
#wind_chime{
    top: 55%;
    right: -13%;
    rotate: 15deg;
}
#morning-glory{
    top: -10%;
    right: -14%;
    rotate: 15deg;
}
#Straw_Hat{
    top: 70%;
    left: -12.5%;
    rotate: -15deg;
}
.course-box .box{
  display: flex;
}
.txt-box{
    width: 50%;
}
.course-box h3#elect{
    background-color: #98DF1E;
    border-radius: 15px 15px 0 0;
}
.course-box h3#game{
    background-color: #FF51AD;
    border-radius: 15px 15px 0 0;
}

/* FAQ */
#FAQ-group{
    background-color: #2BBAFF;
}
#FAQ-group h2{
    background-color: #0186DE;
}
.FAQ-box-wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.FAQ-box{
    background-color: #ffffff;
    width: 100%;
    border-radius: 15px;
    position: relative;
}
#sunflour{
    top: -30%;
    right: -14%;
}
#watermelon{
    top: 40%;
    left: -13%;
    rotate: 15deg;
}
.FAQ-box h3{
    background-color: #0186DE;
    border-radius: 15px 15px 0 0;
    text-align: center;
}
.FAQ-box p{
    width: 100%;
}

/* MAP */
#maps-group{
    background-color: #FEFBC8;
}
#maps-group h2{
    background-color: #FFD358;
}
.info{
    margin: 0 auto;
}
.school-info{ 
    width: 100%;
    border-collapse: collapse;
    margin: 0 auto;
    margin-top: 22px;
}
.school-info th{
    width: 20%;
    padding: 15px 10px;
}
.school-info td{
    padding: 15px 10px;
}
#maps-group .info iframe{
    width: 100%;
    display: block;
    margin: 0 auto;
}

/* submit */
#submit-form-group{
    background-color: #98DF1E;
}
#submit-form-group h2{
    background-color: #50C819;
}
.submit-form-wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.submit-form-wrap p{
    padding: 20px 10px;
}
.submit-form-box{
    position: relative;
    background-color: #ffffff;
    width: 100%;
    border-radius: 15px;
}
#shaved-ice{
    top: -9%;
    left: -12%;
}
#ramune-soda{
    top: 85%;
    right: -12%;
    rotate: 15deg;
}
input[type="text"] {
	width: clamp(100px,50%,200px);
}
input[type="email"] {
	width: clamp(150px,75%,300px);
}
textarea {
	width: clamp(200px,100%,400px);
	height: 115px;
	overflow-y: scroll;
}
input[type="submit"] {
	width: 50px;
    height: 25px;
    display: block;
}
p input{
        margin: 0 auto;
}
input, textarea {
	margin-top: 7px;
}

/* for working */
#for-working-group{
    background-color: #E6BAFF;
}
.for-working-box{
    background-color: #ffffff;
    width: 100%;
    border-radius: 15px;
    position: relative;
}
#water-balloon{
    top: -7%;
    right: -12%;
    rotate: -7deg;
}
#corn{
    top: 85%;
    left: -13%;
    rotate: -21deg;
}
#for-working-group h2{
    background-color: #D65FFE;
}
#for-working-group h3{
    background-color: #D65FFE;
    border-radius: 15px 15px 0 0;
    text-align: center;
}
.for-working-wrap{
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}
.for-working-box .box{
    display: flex;
}

img.circle-img{
    border-radius: 50%;
    width: 80% ;
    margin-top: 25%;
}

.balloon-box{
    display: block;
    padding: 10px 15px;
    background: #eed5ff;
    border-radius: 45px;
    z-index: 2;
}
.balloon p {
    margin: 0;
    padding: 0;
    /* font-size: 1.3em; */
    text-align: center;
    z-index: 2;
}
.balloon h4{
    margin: 0 0;
    text-align: center;
}
#pagetop {
    right: 10px;
    bottom: 10px;
}
#pagetop img {
  
    width: 50px;
}
#pagetop {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    line-height: 0;
    cursor: pointer;

    position: fixed;
    right: 16px;
    bottom: 16px;
    z-index: 100;

    opacity: 0;
    visibility: hidden;
    transition: .6s;
}
#pagetop.active {
    opacity: 1;
    visibility: visible;
}
#pagetop img {
    display: block;   
    width: 80px;
}
small{
    color: #ffffff;
}

/* 検証中 */