@charset "utf-8";
#page.index #main {
    width: 100%;
    height: 590px;
    margin-left: auto;
  	margin-right: auto;
    position: relative;
}
  #page.index #main .topslide {
    width:1400px;
    height:590px;
  	margin-left: auto;
  	margin-right: auto;
  	position: relative;
  }
  #page.index #main .swiper-wrapper{
  	margin:0 auto;
    width:1400px;
    height:590px;
  	position:relative;
  }
  #page.index #main .swiper-slide{
  	width:100%;
  	height: 100%;
  	margin:0;
  	box-sizing:border-box;
  	text-align:center;
  	position:relative;
  }
  	#page.index #main .swiper-slide img {
      width:100%;
    	height: 100%;
  		margin:0;
  		display:block;
  		overflow: hidden;
  		position:relative;
  	}

  #page.index #main .mainBox{
    width:960px;
    height: 337px;
    position: relative;
    margin:0 auto;
    background-image: url(../images/top/main_comment_back.png);
    background-repeat: no-repeat;
    background-position: center center;
  }
  #page.index #main .mainBox .mainBoxin{
    width:568px;
    position: relative;
    margin:0 auto;
  }
    #page.index #main .mainBoxin h2{
      width: 100%;
      padding:30px 0 32px;
    }
    #page.index #main .mainBoxin img{
      width: 100%;
    }

@media (max-width: 750px) {
  #page.index #main {
      width: 100%;
      height: auto;
      background-size: cover;
      padding: 0;
  }
  #page.index #main .contentsinMax.sp{
    width: 100vw !important;
    min-width: 100vw !important;
  }
  	#page.index #main img {
  		width:100vw !important;
  		height:auto;
  		margin:0;
  	}
}


.index #message{
  height:615px;
  display: flex;
	-webkit-align-items: center;
	align-items: center;
	-webkit-flex-wrap: wrap;
	flex-wrap: wrap;
	-webkit-align-content: center;
	align-content: center;
	-webkit-justify-content: center;
	justify-content: center;
}
  .index #message p {
    font-size:28px;
    line-height:1.8;
    letter-spacing: -1px;
  }
  .index #message p.comment01 {
    font-size:40px;
    line-height:1.4;
    margin-bottom:40px;
  }
  .index #message p.comment01 span{
    font-size:46px;
  }
  .index #message .button{
    margin-top:40px;
  }
@media (max-width: 750px) {
  .index #message{
    padding:9.33vw 0 6vw;
    height:auto;
  }
    .index #message p {
      font-size:3.73vw;
    }
  .index #message p.comment01 {
    font-size:5.33vw;
    line-height:1.4;
    margin-bottom:5.33vw;
  }
  .index #message p.comment01 span{
    font-size:6.13vw;
  }
  .index #message .button{
    margin-top:5.33vw;
  }
}


.index #news{
  padding:70px 0 60px;
}
  .index #news .newsbox{
    padding:40px 0 70px;
  }
  .index #news .newsbox dl{
    width:46.5%;
    border-top:1px solid #90835a;
  }
    .index #news .newsbox dt{
      display:table;
      margin:25px 0 25px;
    }
      .index #news .newsbox dt .data{
        margin-right:20px;
        font-size:20px;
        color:#685f4c;
        line-height:1.4;
      }
      .index #news .newsbox dt h3{
        display: inline-table;
        font-size:20px;
        color:#685f4c;
        font-weight:normal;
        line-height:1.4;
      }
    .index #news .newsbox dd{
      font-size:32px;
      line-height:1.4;
    }
@media (max-width: 750px) {
  .index #news{
    padding:6.66vw 0 8vw;
  }
  .index #news .newsbox{
    padding:5.33vw 0 2.6vw;
  }
  .index #news .newsbox dl{
    width:100%;
    margin:0 0 6vw;
  }
  .index #news .newsbox dt{
    margin:3.33vw 0 4vw;
  }
    .index #news .newsbox dt .data{
      font-size:2.6vw;
    }
    .index #news .newsbox dt h3{
      font-size:2.6vw;
    }
  .index #news .newsbox dd{
    font-size:4.26vw;
  }
}



.index #lesson{
  padding:48px 0 68px;
}
  .index #lesson .tbox{
    margin:78px auto 20px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
  }
  .index #lesson .tbox .box{
    width:31%;
    background-color:#fff;
    margin-bottom:67px;
  }
  .index #lesson .tbox .box:nth-child(2),
  .index #lesson .tbox .box:nth-child(5){
    margin-left:2%;
    margin-right:2%;
  }
    .index #lesson .tbox .box h3{
      background-color:#f5e0eb;
      width:100%;
      min-height:146px;
      display: flex;
    	-webkit-align-items: center;
    	align-items: center;
    	-webkit-flex-wrap: wrap;
    	flex-wrap: wrap;
    	-webkit-align-content: center;
    	align-content: center;
    	-webkit-justify-content: center;
    	justify-content: center;
      text-align: center;
    }
    .index #lesson .tbox .box:last-child h3{
      background-color:#dedacd;
    }
      .index #lesson .tbox .box h3 .name{
        font-size:29px;
        color:#cc6699;
        text-align: center;
      }
      .index #lesson .tbox .box h3 .data{
        font-size:18px;
        text-align: center;
      }
    .index #lesson .tbox .box .photo img{
      width:100%;
    }
  .index #lesson .tbox .box .comment{
    background-color:#fff;
    padding:20px 20px;
    width:100%;
    display: flex;
  	-webkit-align-items: center;
  	align-items: center;
  	-webkit-flex-wrap: wrap;
  	flex-wrap: wrap;
  	-webkit-align-content: center;
  	align-content: center;
  	-webkit-justify-content: center;
  	justify-content: center;
    text-align: center;
  }
@media (max-width: 1000px) {
  .index #lesson .tbox .box h3 .name{
    font-size:22px;
  }
}
@media (max-width: 750px) {
  .index #lesson{
    padding:11.33vw 0 10.6vw;
  }
    .index #lesson .tbox{
      margin:9.33vw auto 16vw;
    }
    .index #lesson .tbox .box{
      width:100%;
      margin-bottom:5.06vw;
    }
    .index #lesson .tbox .box:nth-child(2),
    .index #lesson .tbox .box:nth-child(5){
      margin-left:0;
      margin-right:0;
    }
      .index #lesson .tbox .box h3{
        width:100%;
        height:23vw;
      }
        .index #lesson .tbox .box h3 .name{
          font-size:4.53vw;
          line-height:1.6;
        }
        .index #lesson .tbox .box h3 .data{
          font-size:2.66vw;
          line-height:2.4;
        }
    .index #lesson .tbox .box .comment{
      padding:3.73vw 3vw 4.66vw;
      width:100%;
      font-size:2.93vw;
    }

}


.index #voice{
  padding:80px 0 90px;
}
  .index #voice .tbox{
    padding:90px 0 0;
  }
    .index #voice .box{
      background-color: #faf0f5;
      border-radius: 24px;
      padding:20px 0;
      text-align:center;
      width:31%;
    }
    .index #voice .box{
      background-color: #faf0f5;
      border-radius: 24px;
      padding:40px 0 0;
      margin-right:3.5%;
      float:left;
    }
    .index #voice .box:nth-child(3n){
      margin-right:0;
      margin-bottom:40px;
    }
      .index #voice .box img{
        width:94%;
        display: inline-block;
        margin:0 auto 0.5em;
      }
      .index #voice .box p{
        width:94%;
        text-align: left;
        margin:0.5em auto 1.5em;
        width:84%;
        font-size:20px;
      }
      .index #voice .box p.name{
        text-align: center;
        font-size:20px;
      }
@media (max-width: 750px) {
  .index #voice{
    padding:8.53vw 0 11.2vw;
  }
    .index #voice .tbox{
      padding:8vw 0 7vw;
    }
      .index #voice .box{
        border-radius: 24px;
        padding:6.66vw 0;
        width:100%;
      }
      .index #voice .box{
        background-color: #faf0f5;
        border-radius: 8vw;
        padding:40px 0 0;
        margin-right:0;
        float:left;
      }
        .index #voice .box:nth-child(2),
        .index #voice .box:nth-child(3){
          display: none;
        }
}


.index #profile{
  padding:0 0 95px;
}
  .index #profile .photobox{
    display: flex;
  	-webkit-align-items: center;
  	align-items: center;
  	-webkit-flex-wrap: wrap;
  	flex-wrap: wrap;
  	-webkit-align-content: center;
  	align-content: center;
  	-webkit-justify-content: center;
  	justify-content: center;
    margin:85px auto 0;
  }
    .index #profile .photobox .photo{
      width:291px;
    }
    .index #profile .photobox .name{
      margin-left:64px;
    }
      .index #profile .photobox .name h3{
        font-size:40px;
        letter-spacing: 2px;
      }
      .index #profile .photobox .name p{
        font-size:24px;
        letter-spacing: 2px;
      }

    .index #profile .comment{
      margin:50px auto 80px;
    }
    .index #profile .comment p{
      margin-bottom:1.5em;
      font-size:24px;
    }
@media (max-width: 750px) {
  .index #profile{
    padding:0 0 6.66vw;
  }
  .index #profile .photobox{
    margin:11.33vw auto 0;
  }
    .index #profile .photobox .photo{
      width:38.4vw;
    }
    .index #profile .photobox .name{
      margin-left:7.73vw;
    }
      .index #profile .photobox .name h3{
        font-size:5.33vw;
      }
      .index #profile .photobox .name p{
        font-size:3.2vw;
      }

    .index #profile .comment{
      margin:6.66vw auto 10.66vw;
    }
    .index #profile .comment p{
      font-size:3.2vw;
    }
}


.index #contact .contactbox{
  padding:62px 0 70px;
  text-align:center;
}
  .index #contact h3{
    width:246px;
    display: table;
    margin:0 auto;
  }
  .index #contact p{
    font-size:26px;
    margin:36px auto 54px;
  }
@media (max-width: 750px) {
  .index #contact .contactbox{
    padding:8.4vw 0 5.87vw;
  }
    .index #contact h3{
      width:32.8vw;
    }
    .index #contact p{
      font-size:3.46vw;
      margin:3.73vw auto 8.66vw;
    }
}