@charset 'UTF-8';/*  */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP&display=swap');

/* Base
------------------------------------------------------------*/
html {
  font-size: 14px;
}

body{
    font-family: 'Noto Serif JP', serif;
    font-style: lighter;
    line-height: 1.6;
    letter-spacing: .1em;
    color: #604c3f;/*------------------------color3--------------------------------*/
    text-align: left;
    text-decoration: none;
    flex: 1;
    background-color: #ffffff;
    margin: 0;
    }

hr{
  margin: 0.5vh  0vh;
  size:1;
  color:#393E46;
}

.under{
  text-decoration:underline;
}


/*------------------------header--------------------------------*/
header{
  z-index: 99;
  position:fixed;
  top: 0vw;
  padding-left:2vw;
  background-color:#ffe2ee;
  height:5vh;
  width:100vw;
  display:flex;
  justify-content: space-between;
  align-items: center;
  font-size:0.8rem;
}

.icon {
  font-family: "Font Awesome 5 Free"; 
}
.fabiflex{
	align-items: center;
}
.fabi{
	padding: 2vw;
	width:5vw;
	height:5vw;
}


/*------------------------main-content--------------------------------*/
main{
}


/*------------------------footer--------------------------------*/
footer{
  justify-content: center;
  background-color:#ffe2ee;
}
footer p{
  margin:0vw;
}

.foot-mar{
  margin: 4vw auto;
}

/*------------------------table--------------------------------*/
table{
  background-color: white;
}
th{
  padding: 0.25vw 1vw;
  text-align: center;
}
td{
  text-align: center;
}

/*------------------------img--------------------------------*/
.top-video{
	background-image: url(../img/top.jpg);
	background-size: cover;
  background-position: center;
  width:100vw;
  height:27vh;
  margin-top:5vh;
}

.top-img{
  margin: auto;
  margin-top: 5vh;
  height: 80vh;
  width: 90vw;

  background-image: url(../img/top.mov);
  background-size: cover;
  background-position: center;
  background-color: #393E46;
}
.img1-lesson{
  height:80vw;
  width:80vw;
  background-color: #393E46;
  background-image: url(../img/ichinomiya.jpg);
  background-size: cover;
  top:20%;
}
.img2-lesson{
  height:80vw;
  width:80vw;
  background-color: #393E46;
  background-image: url(../img/inazawa.jpg);
  background-size: cover;
  top:20%;
}

.img1-teach{
  height:80vw;
  width:65vw;
  margin:auto;
  background-color: #393E46;
  border-radius: 50%;
  background-image: url(../img/teacher1.jpg);
  background-size: cover;
  background-position: center;
  background-color: #393E46;
}
.img2-teach{
  height:80vw;
  width:65vw;
  margin:auto;
  background-color: #393E46;
  border-radius: 50%;
  background-image: url(../img/teacher2.jpg);
  background-size: cover;
  background-position: center;
  background-color: #393E46;
}

/*------------------------box--------------------------------*/
.box18{
  width:50vw;
  margin:1.5vh auto;
  padding: 0.25em 1em;
  border: solid 1px #393E46;
  border-radius: 3px 0 3px 0;
  background-color: white;
}
.box19{
  width:vw;
  margin:1.5vh auto;
  padding: 0.25em 1em;
  border: solid 1px #393E46;
  border-radius: 3px 0 3px 0;
  background-color: white;
}

.box18:after {
  top:-12px;
  left:-12px;
}
.box18:before {
  bottom:-12px;
  right:-12px;
}
.box18 p {
  margin: 0; 
  padding: 0;
}
.box19:after {
  top:-12px;
  left:-12px;
}
.box19:before {
  bottom:-12px;
  right:-12px;
}
.box19 p {
  margin: 0; 
  padding: 0;
}



.box26 .box-title {
  position: absolute;
  display: inline-block;
  top: -13px;
  left: 10px;
  padding: 0 9px;
  line-height: 1;
  font-size: 19px;
  font-weight: bold;
}


.box26-1 {
  position: relative;
  margin: 2em 1vw;
  padding: 0.5em 0.25em;
 
  border-radius: 8px;
}
.box26-1 .box-title-1 {
  position: absolute;
  display: inline-block;
  top: -13px;
  left: 10px;
  padding: 0 9px;
  line-height: 1;
  font-size: 19px;
  background: #ffe2ee;
  font-weight: bold;
}
.box26-1 p {
  margin: 0; 
  padding: 0;
  font-size: 1rem;
}

#content {
  padding:5vh 7vw;
}
.in-post{
  padding:2vh 7vw;
}

/*------------------------tab--------------------------------*/

/*tabの形状*/
.tab{
  display: flex;
  padding:0;
  list-style: none;
  margin: 0;
}

.tab li a{
  display: block;
  border-radius: 10px 10px 0 0;
  width:50vw;
  padding-bottom: 1vw;
}
/*liにactiveクラスがついた時の形状*/
.tab li.active a{
  background-color: #ffe2ee;
}


/*エリアの表示非表示と形状*/
.area{
  display: none;/*はじめは非表示*/
  opacity: 0;/*透過0*/
  padding:2vh 7vw;
  border-radius:0 0 20px 20px;
}

/*areaにis-activeというクラスがついた時の形状*/
.area.is-active {
    display: block;/*表示*/
    animation-name: displayAnime;/*ふわっと表示させるためのアニメーション*/
    animation-duration: 2s;
    animation-fill-mode: forwards;
    background-color: #f8f7f5;
}

@keyframes displayAnime{
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}




@media only screen and (min-width:600px) {

    /*------------------------main-content--------------------------------*/
    .tab-in{
      height: 2.5vh;
    }
    .tab li a {
      padding-bottom: 0vw;
    }
    .flex-lesson{
      width: 100%;
      display:flex;
      justify-content:  space-around;
    }
    .class-content{
      width:50%;
    }

    .flex-teach{
      display: flex;
      justify-content: space-around;
    }
    .box26-1 {
      margin: 2em 5vw;
    }
    .box26-1 p {
      margin: 0; 
      padding: 0;
      font-size: 1.2rem;
    }
    /*------------------------img--------------------------------*/
  .img1-lesson{
    height:40vw;
    width:40vw;
    background-color: #393E46;
  }
  .img2-lesson{
    height:40vw;
    width:40vw;
    background-color: #393E46;
  }

  .img1-teach{
    height:30vw;
    width:30vw;
    margin:5vh auto;
    background-color: #393E46;
    border-radius: 50%;
  }
}


@media only screen and (min-width:1025px) {
  .menu-btn {
    margin: auto;
  }
    /*------------------------main-content--------------------------------*/
    .tab-in{
      height: 4vh;
    }
    .flex-lesson{
      display: flex;
      justify-content: space-between;
    }
    .class-content{
      width:50%;
    }

    .flex-teach{
      display: flex;
      justify-content: space-around;
    }
    /*------------------------img--------------------------------*/
  .img1-lesson{
    height:25vw;
    width:25vw;
    background-color: #393E46;
  }
  .img2-lesson{
    height:25vw;
    width:25vw;
    background-color: #393E46;
  }

  .img1-teach{
    height:20vw;
    width:20vw;
    margin:auto;
    background-color: #393E46;
    border-radius: 50%;
  }
}

















/*------------------------photo--------------------------------*/

#photo-top{
  background-color: white;
  padding:5vw;
  
}
.photo-flex{
  /*----display: flex;----*/
  flex-wrap: wrap;
}
.img-photographer{
background-image: url(./img/photo1.jpg);
height:85vw;
width:85vw;
margin:5vw auto;
background-color: #393E46;
background-size: cover;
border-radius: 50%;
}

.img-photo{
  height:29vw;
  width:29vw;
  margin:0.5vw;
  background-color: #393E46;
  background-size: cover;
  background-position: center;
}
.img-photo-yoko{
  height:40vw;
  width:90vw;
  margin:0.5vw;
  background-color: #393E46;
  background-size: cover;
  background-position: center;
}

.img1-photo{
  background-color: #393E46;
  background-image: url(../img/1.jpg);
}
.img2-photo{
  background-color: #393E46;
  background-image: url(../img/9.jpg);
}
.img3-photo{
  background-color: #393E46;
  background-image: url(../img/3.jpg);
}
.img4-photo{
  background-color: #393E46;
  background-image: url(../img/5.jpg);
}
.img5-photo{
  background-color: #393E46;
  background-image: url(../img/4.jpg);
}
.img6-photo{
  background-color: #393E46;
  background-image: url(../img/6.jpg);
}
.img7-photo{
  background-color: #393E46;
  background-image: url(../img/8.jpg);
}
.img8-photo{
  background-color: #393E46;
  background-image: url(../img/7.jpg);
}
.img9-photo{
  background-color: #393E46;
  background-image: url(../img/2.jpg);
}
.img10-photo{
  background-color: #393E46;
  background-image: url(../img/yoko10.jpeg);
}
.img11-photo{
  background-color: #393E46;
  background-image: url(../img/yoko11.jpeg);
}
.img12-photo{
  background-color: #393E46;
  background-image: url(../img/yoko12.jpeg);
}

.photographer{
  padding:0vh 5vw;
}



@media only screen and (min-width:600px) {
  .top-video{
    width:100vw;
    height:40vh;
    margin-top:5vh;
  }
  .photo-top-flex{
    display: flex;
  }
  .photo-flex {
    width: 50%;
  }
  .photo-title{
    width: 50%;
  }
  .img-photo-yoko{
    height:28vw;
    width:37.5vwvw;
    margin:0.5vw;
  }

  .photo-content-flex{
    display: flex;
  }
  .content-flex{
    width:50%;
  }
  .img-photographer{
    height:29vw;
    width:29vw;
}




@media only screen and (min-width:1025px) {

  .top-video{
    width:100vw;
    height:80vh;
    margin-top:5vh;
  }
}
#content{
  margin:auto;
}