@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&family=Noto+Serif+JP:wght@400;700&family=M+PLUS+1p:wght@400;500;700&display=swap');

.v-sp {
 display: none;
}

main {
 background: #B3963D;
}

.arrow-sp{
 display: none;
}

.contents{
 padding-top: 0px;
 padding-bottom: 60px;
}

.contents h1{
 font-size: 36px;
 margin: auto;
 color: #fff;
 text-align: center;
 padding-top: 40px;
 padding-bottom: 40px;
 font-family: 'M PLUS 1p', sans-serif;
}

.contents .point{
 width: 1250px;
 display: flex;
 justify-content: center;
 margin: auto;
 position: relative;
}

.contents li{
 color: #333333;
 background: #fff;
 text-align: center;
 border-radius: 20px;
 font-family: 'M PLUS 1p', sans-serif;
}

.contents .point li .arrow-pc{
 width: 179.5px;
 position: absolute;
 top: 35%;
 left: 40%;
 right: 40%;
 padding: 0;
}

.contents .point li:first-child{
 margin-right: 10px;
}

.contents .point li:last-child{
 margin-left: 10px;
}

.contents .point li .okuru{
 position: absolute;
 padding: 35px 13.5px;
 border-radius: 100%;
 border: 6px solid #B3963D;
 color: #B3963D;
 font-size: 26px;
 top: -10%;
 left:1%;
 right: auto;
 background:#fff;
}

.contents .point li .morau{
 position: absolute;
 padding: 22px 10.5px;
 padding-top: 31px;
 border-radius: 100%;
 border: 6px solid #B3963D;
 color: #B3963D;
 font-size: 23px;
 line-height: 28px;
 letter-spacing: -1px;
 top: -10%;
 right: 1%;
 left: auto;
 background:#fff;
}

.contents .point li h2{
 font-size: 25px;
 padding-top: 30px;
 padding-bottom: 0px;
}

.contents .point li img{
 width: 550px;
 padding: 20px 20px 10px 20px;
 margin-bottom: 10px;
}


.contents .course{
 width: 1200px;
 margin: auto;
 background: #fff;
 border-radius: 20px;
 margin-top: 30px;
 padding-top: 30px;
 text-align: center;
 font-family: 'M PLUS 1p', sans-serif;
}

.contents .course ul{
 display: flex;
 padding-top: 0px;
 padding-bottom: 40px;
 justify-content: center;
}

.contents .course li {
 margin-left: 8px;
 margin-right: 8px;
}

.contents .course h3{
 color: #B3963D;
 font-size: 32px;
 padding-top: 30px;
 padding-bottom: 50px;
}

.contents .course li h4{
 color: #B3963D;
 margin: auto;
 font-size: 22px;
 font-weight: normal;
 padding-top: 12px;
}

.contents .course li p{
 position: relative;
 color: #B3963D;
 margin: auto;
 font-size: 20px;
 top: 2px;
 padding-bottom: 15px;
}

.contents .course li p small{
 font-size: 15px;
}

.contents .course a{
 width: 95%;
 display: block;
 font-size: 16px;
 padding-top: 8px;
 padding-bottom: 8px;
 color: #fff;
 background: #333333;
 margin: auto;
 margin-bottom: 10px;
}

.contents .course a:hover{
 color: #333333;
 background: #fff;
 box-shadow: 0 0 0 1px inset #333333;
}

.contents .course li img{
 width: 180px;
 padding: 0px;
}

.contents  .giftlist {
 margin-top: 40px;
 padding-bottom: 40px;
}

.contents  .giftlist img{
 width: 200px;
 margin-top: 10px;
}


#block-mv .mv{
 background-image: url(../images/mv_pc.jpg);
 width: 100%;padding-bottom: 25%;
 background-size: cover;
 background-position: center center;
 background-repeat: no-repeat;
}

#block-mv .inner {
 position: relative;
 max-width: 1350px;
 height: 100%;
 margin: auto;
}

#block-mv .inner .logo {
 position: absolute;
 left: 0;
 top: 0;
 width: 194px;
 z-index: 1;
}


@media screen and (max-width: 1490px) {
 
 #block-mv .inner{
  width: 90%;
 }
 
}

@media screen and (max-width: 1270px) {
 
 #block-mv .inner .logo {
  width: 18%;
 } 
 
 .contents .point{
  width: 95%;
 }
 
.contents .point li img{
  width: 90%;
 }
 
.contents .point li .arrow-pc{
 width: 15%;
 top: 35%;
 left: 40%; 
 }
 
 .contents .course{
  width: 95%;
 }
 
 .contents .course ul{
  width: 98%;
  margin: auto;
 }
 
 .contents .course li h4{
  font-size: 20px;
 }
  
 .contents .point li .okuru{
  width: 120px;
  height: 120px;
  top:-15%;
  padding: 0px;
  padding-top: 35px;
  left: -2.5%;
 }
 
 .contents .point li .morau{
  width: 120px;
  height: 120px;
  top:-15%;
  padding: 0px;
  padding-top: 30px;
  right: -2.5%;
 }
 
}

@media screen and (max-width: 1030px) {
 
 .contents .course h3{
  padding-top: 10px;
  padding-bottom: 40px;
 } 
 
 .contents .course li p{
  font-size: 18px;
 }
 
 .contents .course a{
  font-size: 14px;
 }
 
 .contents .point li h2{
  padding-top: 60px;
 }
 
 }
 
 @media screen and (max-width: 975px) {
  
  #block-mv .mv{
   padding-bottom: 28%;
  } 
  
  .contents h1{
   font-size: 33px;
  } 
  
  .contents .course h3{
   font-size: 30px;
  } 
  
 .contents .course li{
  margin-left: 5px;
  margin-right: 5px;
  }
  
 .contents .course li h4{
  font-size: 18px;
 }
 
 .contents .course li p{
  font-size: 15px;
 }
  
  .contents .course a{
   width: 100%;
  }
  
 }
 
 
 @media screen and (max-width: 875px) {
  
  .contents h1{
   font-size: 33px;
   padding-bottom: 50px;
  }
  
 .contents .point li .arrow-pc{
  top: 45%; 
  }
   
 .contents .point li .okuru{
  width: 110px;
  height: 110px;
  font-size: 20px;
  line-height: 22px;
  padding-top: 37px;
  } 
  
 .contents .point li .morau{
  width: 110px;
  height: 110px;
  font-size: 20px;
  line-height: 22px;
  }
  
 .contents .course h3{
  font-size: 30px; 
  }
  
  .contents .course ul{
   flex-wrap: wrap;
   padding-bottom: 0px;
  }
  
  .contents .course li{
   display: flex;
   flex-direction: column;
   width: calc(30% - 7px);
   margin: auto;
   margin-bottom: 30px;
  }
  
 .contents .course li img{
  width: 95%;
  margin: auto;
  }
 
 .contents .course li h4{
  font-size: 20px;
 }
 
 .contents .course li p{
  font-size: 20px;
 }
  
 .contents .course a{
  width: 95%;
  font-size: 16px;
  margin: auto;
  margin-bottom: 10px;
  }
  
 .contents .giftlist{
  margin-top: 20px; 
  }
  
 }

@media screen and (max-width: 767px) {
 
.v-pc {
 display: none;
 }
 
.v-sp {
 display: block;
 }
 
#block-mv .mv{
 background-image: url(../images/mv_sp.jpg);
 height: 0;
 padding-bottom: 120%;
 background-size: cover;
 background-position: center center;
 }
 
#block-mv .inner .logo {
 width: 30%;
 }
 
 #block-mv {
  height: auto;
 }
 
#block-mv .inner .ttl .sekai {
 width: 80px;
 }

.arrow-pc{
 display: none;
}
 
.contents h1{
 padding-top: 30px;
 padding-bottom: 30px;
 }
 
.contents .point{
 width: 92%;
 display: block;
 }
 
.contents .point li h2{
 font-size: 32px;
 padding-top: 30px;
 padding-bottom: 20px;
 }
 
.contents ul li{
 width: 100%;
 display: block;
 margin: auto;
 }
 
.contents .point li:first-child{
 margin-bottom: 50px;
 margin-right: 0px;
 }
 
.contents .course ul li:first-child{
 position: relative;
 }
 
.contents .point li .okuru{
 width: 130px;
 height: 130px;
 font-size: 28px;
 top: -5%;
 border: 4px solid #B3963D;
 padding-top: 48px;
 }
 
.contents .point li .morau{
 width: 130px;
 height: 130px;
 font-size: 26px;
 line-height: 32px;
 top: -15%;
 border: 4px solid #B3963D;
 padding-top: 36px;
 right: 0px;
 }
 
.contents .point li:last-child{
 position: relative;
 margin-top: 80px;
 margin-left: 0px;
 }
 
 
.contents .point li img{
 width: 100%;
 padding: 0px;
 }

.contents .point li .arrow-sp{
 display: block;
 width: 66.5px;
 position: absolute;
 top: 42%;
 left: 45%;
 right: 50%;
 padding: 0;
 z-index: 999;
}
 
.contents .course{
 width: 92%;
 margin-top: 60px;
 }
 
}

@media screen and (max-width:620px){
 
 .contents .point li .okuru{
  width: 100px;
  height: 100px;
  font-size: 21px;
  padding-top: 35px;
  left: -3%;
 }
 
 .contents .point li .morau{
  width: 100px;
  height: 100px;
  font-size: 20px;
  line-height: 22px;
  padding-top: 28px;
  right: -3%
 }
 
 .contents .point li h2{
  font-size: 28px;
 }
 
 .contents .course li{
  width: calc(44% - 0px);
  margin-bottom: 30px;
  margin-left: 8px;
  margin-right: 8px;
}
 
}

@media screen and (max-width: 570px) {
 
 .contents .point li h2{
  font-size: 25px;
 }
  
 .contents .point li .okuru{
  width: 90px;
  height: 90px;
  font-size: 19px;
  padding-top: 30px;
 }
  
 .contents .point li .morau{
  width: 95px;
  height: 95px;
  font-size: 19px;
  line-height: 22px;
  padding-top: 25px;
  top:-13%;
 } 
 
.contents .course h3{
 width: 90%;
 margin: auto;
 font-size: 28px;
 line-height: 38px;
 padding-top: 10px;
 padding-bottom: 20px;
 }
 
.contents .course h3 br{
  display: block;
 }
 
 .contents .point li .arrow-sp{
  left: 43%;
 }
 
 .contents .course li h4{
  font-size: 22px;
 }
 
 .contents .course a{
  width: 100%;
  font-size: 17px;
  padding-top: 10px;
  padding-bottom: 10px;
 }
 
 .contents .course li .price{
  font-size: 21px;
  padding-top: 4px;
 }
 
 }

@media screen and (max-width: 490px) {
 
 .contents h1{
  font-size: 30px;
  line-height: 42px;
 }
 
 .contents .point li .okuru{
  width: 85px;
  height: 85px;
  font-size: 20px;
  padding-top: 26px;
  left: -3%;
 }
 
 .contents .point li .morau{
  width: 95px;
  height: 95px;
  font-size: 20px;
  line-height: 20px;
  padding-top: 27px;
  right: -3%
 }
 
 .contents .point li .arrow-sp{
  width: 60px;
  left: 42.5%;
}
 
 .contents .point li h2{
  font-size: 23px;
  padding-bottom: 10px;
 }

 
}


@media screen and (max-width: 460px) {
 
#block-mv .inner .logo{
 width: 35%; 
 } 
 
.contents{
 padding-bottom: 60px;
 }
 
.contents li h2{
 font-size: 23px; 
 }
 
.contents ul li:first-child{
 margin-bottom: 30px; 
 }
 
.contents .course{
 padding-top: 20px;
 margin-top: 30px;
 }
 
.contents .course h3{
 width: 95%;
 font-size: 25px;
 padding-bottom: 30px;
 line-height: normal;
 }
 
}

@media screen and (max-width: 435px) {
 
 .contents h1{
  font-size: 26px;
  padding-top: 20px;
  padding-bottom: 40px;
 }
 
 .contents .point li h2{
  font-size: 21px;
 }
 
 .contents .course h3{
  font-size: 22px;
 }
 
 .contents .course a{
  font-size: 16px;
 }
 
 .contents .point li .arrow-sp{
  width: 55px;
  left: 42%;
 }
 
 .contents .point li .okuru{
  width: 77px;
  height: 77px;
  font-size: 18px;
  padding-top: 24px;
  top: -7%;
 }
 
 .contents .point li .morau{
  width: 85px;
  height: 85px;
  font-size: 18px;
  padding-top: 24px;
 }
 
 .contents .course li{
  width: calc(45% - 0px);
  margin-left: 5px;
  margin-right:5px
 }

 .contents .course li h4{
  font-size: 21px;
 } 

 .contents .course li .price{
  font-size: 18px;
  padding-top: 0px;
 } 
 
 .contents .course a{
  font-size: 15px;
 }
 
}


@media screen and (max-width: 366px) {
 
 .contents h1{
  font-size: 24px;
 }
 
 .contents .point li h2{
  font-size: 19px;
  padding-top: 35px;
 }
 
 .contents .course h3{
  font-size: 19px;
 }
 
.contents .course .text h4{
 font-size: 19px;
 }
 
.contents .course .text p{
 font-size: 18px;
 }

.contents .course .text small{
 font-size: 13px;
 }
 
 .contents .course a{
  font-size: 14px;
 }
 
}