html{scroll-behavior: smooth;}
body{font-family: "ryo-gothic-plusn", sans-serif; font-weight: 300; font-size:18px; font-style: normal; sans-serif; color: #393939; font-feature-settings: "palt"; background-color:#fffdfb; letter-spacing:1px;}
a {display: block; color: inherit; text-decoration: none; font: inherit;}
:root{--maincolor : rgb(235, 147, 87) ; }
:root{--backcolor : rgb(255, 255, 230) ; }
.animation a:hover{transform: translate3d(0, 3px, 0); transition: .3s;}
img {-webkit-user-drag: none; -khtml-user-drag: none; -moz-user-drag: none;}

/* Header */
header{ background-color:rgb(255, 255, 255, 0.8); position: fixed; width:100%; box-shadow: 0px 10px 10px -5px #33333314; z-index:100;}

h2{display:flex; flex-direction: column; align-items: center; font-weight: 700; padding:5rem 0 3rem 0; font-size: 28px; text-align:center; line-height:150%;}
h2 span{font-size:1rem; color: var(--maincolor); display:block; font-weight: 500; padding-bottom:2rem;}


@media screen and (max-width: 700px) {
body{font-size: clamp(14px, 2.5vw, 16px);}
h2{font-size:20px; padding:3rem 1rem;}
.img-scale01{width:100%;}
.img-scale01 img{width:100%;}
.img-scale02{width:95%; margin:0 auto;}
.img-scale02 img{width:100%;}
.img-scale03{width:90%; margin:0 auto;}
.img-scale03 img{width:100%;}
.img-scale04{width:85%; margin:0 auto;}
.img-scale04 img{width:100%;}

}

.header-wrapper {display: flex; justify-content: space-between; align-items: center;  padding:1rem; max-width: 1280px; margin: 0 auto;}
nav .nav-list {list-style: none; display: flex; gap: 20px; justify-content: space-between;}
.logo{margin-right:2rem;}
.logo img {height: 80px;}
nav {width:100%; padding:0 2rem;}
nav .nav-list li {display:flex; flex-direction: column; align-items: center; font-weight: 700;}
nav .nav-list a {text-decoration: none; color: #393939;}
nav .nav-list li span{font-size:0.8rem; color: var(--maincolor); display:block; padding-top:0.5rem; font-weight: 500;}

@media screen and (min-width: 700px) {
.hamburger {display:none;}
}

@media screen and (max-width: 700px) {
.header-wrapper{padding:0 1rem; height:70px;}
.logo img {height: 50px;}
input[type="checkbox"] {opacity: 0; visibility: hidden; position: absolute;}
.hamburger {display: block; width: 30px; height: 80px; position: relative; display: flex; justify-content: center; align-items: center; cursor: pointer;}
.hamburger span,.hamburger span::before,.hamburger span::after {position: absolute; display: block; content: ""; width: 100%; height: 2px; background-color: #393939; transition: all 0.5s;}
.hamburger span::before {top: -10px;}
.hamburger span::after {bottom: -10px;}
input[type="checkbox"]:checked + .hamburger span {background-color: transparent;}
input[type="checkbox"]:checked + .hamburger span::before {top: 0; transform: rotate(45deg);}
input[type="checkbox"]:checked + .hamburger span::after {bottom: 0; transform: rotate(-45deg);}
.menu {position: fixed; width: 60%; height: 100vh; top: 70px; right: -120%; background-color:#ffffffd1; padding: 35px 0; transition: all 0.5s;}
nav .nav-list {flex-direction: column;}
.nav-list a {display: block; font-size: 15px; padding:1rem; text-transform: uppercase;}
input[type="checkbox"]:checked ~ .menu {right: 0;}
}

main{padding-top: 112px;}
@media screen and (max-width: 700px) {
main{padding-top: 70px;}
}

/* section01 */

#section01 .pagewrap{background-image:url("../images/key-visial.png"); background-size: cover; height:900px;}
#section01 .contents{ max-width: 1200px; margin: 0 auto;}
#section01 .contents dl{width:510px; padding-top:4rem;}
#section01 .contents dt{margin-bottom:7rem;}
#section01 .contents dt img{width:100%;}
#section01 .contents dd img{width:90%;}

@media screen and (min-width: 700px) {
#section01 .smp{display:none;}
}

@media screen and (max-width: 700px) {
#section01 .pagewrap{display:none;}
#section01 .smp{width: 100%;}
#section01 .smp ul{background-color:var(--backcolor);}
#section01 .smp li:first-child img,#section01 .smp li:last-child img{width:100%;}
#section01 .smp li:last-child{width:80%; margin:0 auto; padding:2rem 0;}

}
/* section02 */
#section02 .pagewrap{background-image:url("../images/s-02-background.png"); background-size: contain; background-repeat: no-repeat; padding:5rem 0 2rem 0;}
#section02 .contents{ max-width: 1200px; margin: 0 auto; display:flex; justify-content: space-around;}
#section02 .left-box{width:700px; margin-right:50px;}
#section02 .left-box p{line-height:220%; text-align:center;}
#section02 .right-box{width:500px;}
#section02 .right-box img{width:100%;}
#section02 .site{display: flex; justify-content: center; max-width: 1200px; margin: 0 auto; padding:4rem 0;}
#section02 .site img{width:90%;}

@media screen and (min-width: 700px) {
#section02 .smp{display:none;}
}
@media screen and (max-width: 700px) {
#section02 .pagewrap{display:none;}
#section02 .smp{padding:0;}
}
/* section03 */
#section03 .pagewrap{background-color:var(--backcolor); padding-bottom:5rem;}
#section03 .contents{ max-width: 1200px; margin: 0 auto;}
#section03 .detail{display: flex; justify-content: center; padding:5rem 0;}
#section03 .detail img{width:90%;}
#section03 .negative{background-image:url("../images/s-03-background.png"); background-size: cover; background-repeat: no-repeat; padding:5rem 0 2rem 0;}
#section03 .negative ul{display: flex; flex-direction: column; align-items: flex-end; align-content: flex-end;   padding-top: 4rem;}
#section03 .negative li{background-color:#ffffff; padding:1.5rem; margin-bottom:1.5rem; width:60%; border-radius: 10px; box-shadow: 2px 1px 4px 1px #33333315; text-align:center;}
#section03 .title{display: flex; justify-content: center; margin-top:-9rem;}
#section03 .title img{width:90%;}

@media screen and (min-width: 700px) {
#section03 .smp{display:none;}
}
@media screen and (max-width: 700px) {
#section03 .pagewrap,#section03 .negative{display:none;}
#section03 .smp{padding:0;}
}

/* section04 */
#section04{background-image:url("../images/s-04-background.png"); background-size: contain; background-repeat: no-repeat; padding-bottom 2rem; background-position: bottom; }
#section04 .right-box{position:relative; width:45%;}
#section04 .right-box:before{content:url("../images/howa-2.png"); display:block; position: absolute; left: 0; transform: translate(-50%, -33%); z-index: -99;}
#section04 .right-box img{width:100%;}
#section04 .pagewrap{ max-width: 1200px; margin: 0 auto; display:flex; justify-content: space-between; padding-top:7rem;}
#section04 .pagewrap .left-box dl{display:flex; flex-direction: column;}
#section04 .pagewrap .left-box dt{margin-bottom:3rem; font-weight:300; text-align:center; line-height:200%;}
#section04 .pagewrap .left-box dd{color: var(--maincolor); font-weight:700; font-size:23px;}
#section04 .pagewrap .left-box span.marker {background: linear-gradient(transparent 50%,#fff0ca);}
#section04 .detail{ max-width: 1200px; margin: 0 auto; padding:5rem 0;}
#section04 .detail p{display: flex; justify-content: center; margin-bottom:4rem;}
#section04 .detail p img{width:70%;}
#section04 .detail .point01{display:flex; justify-content: space-between;}
#section04 .detail .point01 dl{margin-bottom:2rem;}
#section04 .detail .point02{display:flex; justify-content: center;}
#section04 .detail .point02 dl:first-child{margin-right:2rem;}
#section04 .detail dl{background-color:#ffffff; padding:1.5rem; border-radius: 10px; box-shadow: 2px 1px 4px 1px #33333315; width: calc(100% / 3 - 20px);}
#section04 .detail dt{text-align:center; margin-bottom:1.5rem; line-height:180%; font-size:21px;}
#section04 .detail dt span{display: inline-block; color:#ffffff; padding:0.7rem; background-image: linear-gradient(90deg, #ff842b, #ffd878); margin-right:10px; border-radius: 10px;}
#section04 .detail dd{ line-height:200%;}

@media screen and (min-width: 700px) {
#section04 .smp{display:none;}
}
@media screen and (max-width: 700px) {
#section04 .pagewrap,#section04 .detail{display:none;}
#section04 .smp{position:relative;}
#section04 .smp ul{position:absolute; right: 0; left: 0; bottom:1.5rem; margin: 0 auto;}
#section04 .smp li{margin-bottom:1rem;}
}


/* section05 */
#section05 .pagewrap{ max-width: 1100px; margin: 0 auto; padding:5rem 0;}
#section05 .service-01{position:relative; padding-bottom:9rem;}
#section05 .service-01:after{content:url("../images/section05-01-point.png"); display:block; position: absolute; left: 50%; transform: translate(-79%, 0%);}
#section05 .service-02{position:relative; padding-bottom:9rem;}
#section05 .service-02:before{content:url("../images/howa-2.png"); display:block; position: absolute; left: 0; transform: translate(-50%, -33%); z-index: -99;}
#section05 .service-02:after{content:url("../images/section05-02-point.png"); display:block; position: absolute; left: 50%; transform: translate(-27%, -5%);}
#section05 .service-03{position:relative;}
#section05 .service-03:before{content:url("../images/howa-1.png"); display:block; position: absolute; right: 0;  transform: translate(64%, -45%); z-index: -99;}
#section05 .detail{display:flex; justify-content: space-between;}
#section05 p{ width:calc(100% / 2 - 30px);}
#section05 p img{width:100%;}
#section05 dl{display:flex; flex-direction: column; width:calc(100% / 2 - 30px);}
#section05 dt{display:flex; margin-bottom:1rem; align-items: center; font-size:23px;}
#section05 dt h3{color:var(--maincolor); font-weight:700; font-size:45px; margin-right:10px ;transform: scale(0.95, 1);}
#section05 dd{line-height:200%;}

@media screen and (min-width: 700px) {
#section05 .smp{display:none;}
}
@media screen and (max-width: 700px) {
#section05 .pagewrap{display:none;}
#section05 .smp{padding:0;}
}

/* section06 */
#section06 .pagewrap{max-width: 1200px; margin: 0 auto;}
#section06 .pagewrap p{line-height:200%; margin-bottom:3rem;}
#section06 .pagewrap ul{width:900px; margin:0 auto;}
#section06 .pagewrap li{margin-bottom:5rem;}
#section06 .pagewrap li img{width:100%;}

@media screen and (min-width: 700px) {
#section06 .smp{display:none;}
}

@media screen and (max-width: 700px) {
#section06 .pagewrap{display:none;}
#section06 .smp li{margin-bottom:2rem;}
#section06 .smp ul{padding-bottom:1rem;}
}

/* section07 */
#section07 .pagewrap{max-width: 1200px; margin: 0 auto;}
#section07 .contents{display:flex; margin-top:2.5rem;}
#section07 .student{display:flex; flex-direction: column; align-items: center; flex: 1; margin-right:2rem;}
#section07 .student p{margin-bottom:1rem; position:relative;}
#section07 .student p:before{content:url("../images/howa-1.png"); display:block; position: absolute; left: 0; transform: translate(-50%, -33%); z-index: -99;}
#section07 .student dl{display:flex; flex-direction: column; align-items: center;}
#section07 .student dt{margin-bottom:0.8rem; font-size:20px;}
#section07 .student dd{padding:0.5rem 2rem; background-color:#F5F5F5; border-radius: 50px; font-size:16px;}
#section07 .detail{display:flex; flex-direction: column; flex: 4;}
#section07 .detail p{color:var(--maincolor); font-weight:700; font-size:23px; padding:1rem 0 1.5rem 1rem;}
#section07 .comment{font-size:17px;}
#section07 .comment dl{display:flex; justify-content: space-between; margin-bottom:3rem;}
#section07 .comment dt{flex: 1; margin-right: 2rem;}
#section07 .comment dt span{background-color:var(--maincolor); padding:1rem; border-radius: 50px; color:#ffffff; text-align:center; font-size:16px; display: block;}
#section07 .comment dd{flex: 5; line-height:200%;}
#section07 .comment dd span{font-weight:700; display:inline-block; margin-top:1rem; border-bottom:1px solid #393939;}

@media screen and (min-width: 700px) {
#section07 .smp{display:none;}
}
@media screen and (max-width: 700px) {
#section07 .pagewrap{display:none;}
#section07 .smp{padding:0;}
#section07 .smp ul{display: flex; overflow-x: scroll; padding:0 1rem 3rem 1rem;}
#section07 .smp ul:-webkit-scrollbar-thumb {background-color:var(--maincolor); border-radius: 7px;}
#section07 .smp ul:-webkit-scrollbar-track {background-color:var(--backcolor); border-radius: 7px;}
#section07 .smp li{width: 90%; padding:2rem 0; flex-shrink: 0; margin-right:1rem; border-radius: 10px; box-shadow: 2px 1px 4px 1px #33333315; background-color:#ffffff; display: flex; align-items: flex-start;}
#section07 .smp li:last-child{ margin-right:0;}
#section07 .smp li img{width:95%; margin:0 auto;}
}

/* section08 */

#section08{background-color:var(--backcolor); padding-bottom:5rem;}
#section08 .pagewrap{max-width: 800px; margin: 0 auto; display:flex; justify-content: space-between;}
#section08 .contents{position:relative;}
#section08 .contents p{margin-bottom:1rem;}
#section08 .contents dl{display:flex; flex-direction: column; align-items: center;}
#section08 .contents dt{margin-bottom:0.8rem; font-size:23px;}
#section08 .modal-open-button{position:absolute; right:10px; top:25px; z-index:1;}
#section08 .modal {position: fixed; top: 0; left: 0; z-index: 2; display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: rgb(0 0 0 / 60%); opacity: 0; transition: opacity 0.5s, scale 0s 0.5s; scale: 0;}
#section08 .modal:target { opacity: 1; transition: opacity 0.5s; scale: 1;}
#section08 .close {position: absolute; top: 20px; right: 20px; font-size: 24px; color: black; text-decoration: none; cursor: pointer; transform: translate(50%, -50%);}
#section08 .modal-wrapper {position: relative; width: 80%; max-width: 700px; max-height: 75%; padding:2rem; margin: auto; overflow: scroll; background-color: #FEFEFE; border-radius: 5px; overflow: visible;}
#section08 .modal-content ul {display:flex; align-items: center; justify-content: space-between; margin-bottom:2rem;}
#section08 .modal-content li:first-child{width:40%; margin-right:3%;}
#section08 .modal-content li:last-child{width:55%;}
.modal-content p{line-height:200%;}
#section08 .modal-content li img{width:90%; border:2px solid var(--maincolor);}
#section08 .modal-content dl{align-items: flex-start;}
#section08 .modal-content dt{font-weight:700; font-size:23px;}
#section08 .modal-content dd{font-size:70%; line-height:150%;}

@media screen and (max-width: 700px) {
#section08 .pagewrap {max-width:100%; padding:0 1rem;}
#section08 .modal-open-button{right: -15px; top: 5px;}
#section08 .modal-open-button img{width:80%;}
#section08 .modal-wrapper{width:95%; font-size:13px; padding: 1.5rem;}
#section08 .modal-content h1{font-size:20px;}
#section08 .contents dt{font-size:20px;}
#section08 .contents dd{font-size:11px;}
#section08 .contents{ width:calc(100% / 2 - 10px);}
#section08 .contents p img{width:100%;}
#section08 .modal-content ul{margin-bottom:1rem;}
#section08 .modal-content li img{width:100%;}
}

#section09 .pagewrap{max-width: 1200px; margin: 0 auto;}
#section09 .pagewrap p{line-height:200%;}
#section09 .contents{width:1100px; margin:0 auto;}
#section09 .contents img{width:100%;}

@media screen and (min-width: 700px) {
#section09 .smp{display:none;}
}

@media screen and (max-width: 700px) {
#section09 .pagewrap{max-width: 100%;}
#section09 .pagewrap p{width:90%; margin:0 auto; padding-bottom:1rem;}
#section09 .contents{display:none;}
#section09 .smp{padding-bottom:3rem;}
}

#section10 .pagewrap{max-width: 1200px; margin: 0 auto;}
#section10 .qa-10 {width: 80%; margin:0 auto;}
#section10 .qa-10 summary { display: flex; justify-content: space-between; align-items: center; position: relative; padding:2rem 2rem 2rem 4rem; color: #393939; font-weight: 600; line-height: 150%; border-bottom: 2px solid #393939;}
#section10 .qa-10:first-child summary{padding: 0 2rem 2rem 4rem;}
#section10 .qa-10:first-child summary::before{top:0;}

#section10 .qa-10 summary::before,
#section10 .qa-10 p::before {position: absolute; left: 1em; font-weight: 600; font-size: 1.3em; top: 2rem;}
#section10 .qa-10 summary::before {color: #EB9354; content: "Q.";}
#section10 .qa-10 summary::after { transform: translateY(-25%) rotate(45deg); width: 10px; height: 10px; margin-left: 10px; border-bottom: 3px solid #393939; border-right: 3px solid #393939; content: ''; transition: transform .5s;}
#section10 .qa-11[open] summary::after { transform: rotate(225deg);}
#section10 .qa-10 p { position: relative; transform: translateY(-10px); opacity: 0;  margin: 0;  padding:2rem 2rem 2rem 4rem; color: #393939;  transition: transform .5s, opacity .5s; line-height:180%;}
#section10 .qa-10[open] p { transform: none; opacity: 1;}
#section10 .qa-10 p::before { color: #333333; line-height: 1.2; content: "A."; top:2rem;}
#section10 .detail dl{display:flex; flex-direction: column; align-items: center; margin-top:5rem;}
#section10 .detail dt{color:var(--maincolor); padding:2rem; border:4px solid var(--maincolor); margin-bottom:2rem; text-align:center; font-size:23px; border-radius: 50px;}
#section10 .detail dd{text-align:center;}

@media screen and (max-width: 700px) {
#section10 .qa-10 {width:85%;}
#section10 .qa-10 summary{padding: 2rem 2rem 1rem 4rem;}
#section10 .qa-10:first-child summary{padding: 0 2rem 1rem 4rem;}
#section10 .qa-10:first-child summary::before{top:0;}
#section10 .detail dl{width:90%; margin:3rem auto 1rem auto;}
#section10 .detail dt{font-size:17px; line-height:150%;}
#section10 .detail dd{width:90%;}
#section10 .detail dd img{width:90%;}
}

#information .pagewrap{background-image:url("../images/background.jpg"); background-size: cover;}
#information .detail{max-width: 1200px; margin: 0 auto; padding:5rem 0;}
#information .contents{background-color:#ffffff; padding:3rem 0; border-radius: 10px; box-shadow: 2px 1px 4px 1px #33333315;}
#information .contents dl{display:flex; flex-direction: column;}
#information .contents dt{display: flex; justify-content: center; align-items: center; font-size:20px; margin-bottom:1rem;}
#information .contents dt:before,#information .contents dt:after {width: 1px; height: 20px; background-color: #393939; content: '';}
#information .contents dt:before {transform: rotate(-35deg); margin-right: 20px;}
#information .contents dt:after {transform: rotate(35deg); margin-left: 20px;}
#information .contents dd{color:var(--maincolor); font-weight:700; font-size:23px; line-height:170%; text-align:center;}
#information .contents dd span{background: linear-gradient(transparent 50%,#fff0ca);}
#information p{display: flex; justify-content: center; position:relative; padding-top:3rem;}
#information p:before{content:url("../images/haru.png"); display:block; position: absolute; left: 0; transform: translate(64%, 20%);}
#information p:after{content:url("../images/aki.png"); display:block; position: absolute; right: 0; transform: translate(-64%, 21%);}

@media screen and (min-width: 700px) {
#information .smp{display:none;}
}
@media screen and (max-width: 700px) {
#information .pagewrap{display:none;}
#information .smp{width:100%;}
#information .smp dl{position:relative; display: flex; justify-content: center;}
#information .smp dd{position:absolute; bottom:3rem; width:70%;}
#information .smp dd img{width:100%;}
}

section:last-child{margin-bottom:3rem !important; }
footer{ text-align:center; padding:3rem; background-color:#393939; color:#ffffff;}

/*アニメーション制御*/
.fadeUp{animation-name:fadeUpAnime; animation-duration:1.5s; animation-fill-mode:forwards; opacity:0;}
@keyframes fadeUpAnime{from {opacity: 0; transform: translateY(20px);}
  to {opacity: 1; transform: translateY(0);}
}
.reflection{position: relative; overflow: hidden;}
.reflection::after {content: ""; display: block; width: 30px; height: 100%; position: absolute; top: -180px; left: 0; background-color: #FFF; opacity: 0; transform: rotate(45deg); animation: reflect 3s ease-in-out infinite; -webkit-transform: rotate(45deg); -webkit-animation: reflect 3s ease-in-out infinite;}
@keyframes reflect {0% { transform: scale(0) rotate(45deg); opacity: 0; } 80% { transform: scale(0) rotate(45deg); opacity: 0.5; } 81% { transform: scale(4) rotate(45deg); opacity: 1; } 100% { transform: scale(50) rotate(45deg); opacity: 0; }}
@-webkit-keyframes reflect {0% { transform: scale(0) rotate(45deg); opacity: 0; } 80% { transform: scale(0) rotate(45deg); opacity: 0.5; } 81% { transform: scale(4) rotate(45deg); opacity: 1; } 100% { transform: scale(50) rotate(45deg); opacity: 0; }}
.entry{animation:entry 2s infinite;}
@keyframes entry{0% {transform: translate(0px, 3px);} 5% {transform: translate(0px, -3px);} 10% {transform: translate(0px, 3px);} 15% {transform: translate(0px, -3px);} 20% {transform: translate(0px, 3px);} 25% {transform: translate(0px, -3px);} 30% {transform: translate(0px, 0px);}}
.fadeUpTrigger,.bgappearTrigger,.bgUDextendTrigger,.bgDUextendTrigger,.bgRLextendTrigger,.bgLRextendTrigger{ opacity: 0;}