@charset "UTF-8";



/* ヘッダー周り*/

header {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  position: fixed;
  top: 1;
  left: 0;
  right: 0;
  z-index: 3;
  background-color: rgba(255, 255, 255, 0.8);
}

h1 {
  display: flex;
  margin-top: 20px;
  color: #666;
  text-align: center;
}

h1 img {
  display: inline-block;
  width: 320px;
  height: 100px;
  margin: 0;
  padding-top: 0;
  overflow: hidden;
  position: relative;
}

#groval_navi ul {
  list-style-type: none;
  text-align: center;
}

.navi1{
  padding: 0% 0% 1% 0%;
}

.navi2{
  padding: 0% 0% 7% 0%;
}

#groval_navi li a {
  color: #666;
}

#groval_navi li a:hover {
  color: #ffb366;
}

#groval_navi li {
  margin-right: 20px;
  margin-left: 20px;
  display: inline;
  text-align: center;
}

/* レインボー*/
@media (max-width: 1400px) {
  header {background-color: #e50044;
    opacity: 0.8;}
    #groval_navi li a {
      color: #fefefe;
    }
}
@media (max-width: 1300px) {
  header {background-color: #ee7b00;;
    opacity: 0.8;}
}
@media (max-width: 1200px) {
  header {background-color: #ffe100;
    opacity: 0.8;}
}
@media (max-width: 1100px) {
  header {background-color: #00a161;
    opacity: 0.8;}
}
@media (max-width: 1000px) {
  header {background-color: #0073b6;
    opacity: 0.8;}
}
@media (max-width: 900px) {
  header {background-color: #1c4fa1;
    opacity: 0.8;}
}
@media (max-width: 800px) {
  header {background-color: #673d93;
    opacity: 0.8;}
}

/* ヘッダー リンク　 レスポンシブ*/
@media (max-width: 600px) {

  header {
    display:block;
    text-align: center;
    justify-content: center;
    align-items: none;
    position: none;
    top: 1;
    left: 0;
    right: 0;
    z-index: 3;
    background-color: rgba(255, 255, 255, 0.8);
  }
  
  h1 {
    display:block;
    margin-top: 0px;
    margin-bottom: -20px;
    color: #666;
    text-align: center;
  }
  
  h1 img {
    display: inline-block;
    width: 300px;
    height: 80px;
    margin: 0;
    padding-top: 0;
    overflow: hidden;
    position: relative;
  }
  
  #groval_navi ul {
    display:block;
    list-style-type: none;
    text-align: center;
  }

  .navi1{
    padding: 0% 0% 1% 0%;
  }
  
  .navi2{
    padding: 0% 0% 1% 0%;
  }
  #groval_navi li a {
    color: #666;
  }
  
  #groval_navi li a:hover {
    color: #ffb366;
  }
  
  #groval_navi li {
    margin-right: 20px;
    margin-left: 20px;
    display: inline;
    text-align: center;
  }


}


/* インデックス　メインページ*/

/* メインロゴ*/

body{
  background-color: #e6fffe;
  color: #666;
}

h2 {
  text-align: center;
  margin-top: 100px;
  padding: 150px 0 0 0;

  text-align: center;
  margin: 0 auto;
}

h2 img{
  width: 90%;
  height: 90%;
  object-fit: cover;
}


/*インデックス TOP動画　*/

.home_movie{
  text-align: center;
  margin: 0% 0% 0% 0%;
}

/*インデックス TOP テキスト*/
.home_text1{
  margin: 0 auto;
  background-image: url(../images/pic_home_text1.jpg),url(../images/icon_irasuto.png);
  background-repeat: no-repeat;
  background-size: 50%,10%;
  height: 50vh;
  background-position: 90% 90%,5% 95%;
  margin: 1%;
}

.home_text1 p{
  padding: 7% 0 1% 1%;
  font-size: 1rem;
  text-shadow: 1px 1px 1px #fff;
}

.home_text1 span{
color: #ffc7e3;
font-size: 2rem;
}

.home_text2{
  margin: 0 auto;
  background-image: url(../images/pic_home_text2.jpg),url(../images/icon_nenndo.png);
  background-repeat: no-repeat;
  background-size: 50%,17%;
  height: 50vh;
  background-position: 0% 75%,99% 90%;
  margin: 1%;
}

.home_text2 p{
  padding: 13% 0 0 55%;
  font-size: 1rem;
  text-shadow: 1px 1px 1px #fff;
}

.home_text2 span{
color: #ffc7e3;
font-size: 2rem;
}

/* インデックス　レスポンシブ*/
@media (max-width: 800px) {


.home_text1{
  background-image: url(../images/pic_home_text1_2.jpg);
}

.home_text1 p{
  padding: 7% 45% 1% 1%;
  font-size: 1rem;
  text-shadow: 1px 1px 1px #fff;
}

.home_text2{
  margin: 0 auto;
  background-image: url(../images/pic_home_text2_2.jpg),url(../images/icon_nenndo.png);
  background-repeat: no-repeat;
  background-size: 50%,20%;
  height: 50vh;
  background-position: 0% 75%,99% 90%;
  margin: 1%;
}

.home_text2 p{
  padding: 3% 5% 0 55%;
  font-size: 1rem;
  text-shadow: 1px 1px 1px #fff;
}

}


/* 1日のスケジュール*/



.schedule{
  margin: 0 auto;
  background-color: rgba(255, 255, 255, 0.8);
  padding-bottom: 1%;
}

.schedule h3{
  color: #ffc7e3;
  padding: 1% 7% 0% 7%;
  font-size: 2rem;
}
.schedule_top{
  color: #2d3c95;
  font-size: 3rem;

  text-align: center;
  margin-top: 100px;
  padding: 150px 0 1% 0;

  text-align: center;
  margin: 0 auto;
}
.schedule_text{
  padding: 10px 7% 10px 7%;
font-size: 1.1rem;
}


.schedule_content1,schedule_content2,schedule_content3,schedule_content4,schedule_content5,schedule_content6,
schedule_content7,schedule_content8,schedule_content9,schedule_content10,schedule_content11,schedule_content12,schedule_content13{
  height: 100vh;
}
.schedule_content1_text,schedule_content2_text,schedule_content3_text,schedule_content4_text,schedule_content5_text,schedule_content6_text,
schedule_content7_text,schedule_content8_text,schedule_content9_text,schedule_content10_text,schedule_content11_text,schedule_content12_text,schedule_content13_text{
  font-size: 1.5rem;
}


.schedule_content1{
  margin: 2% auto 2% auto;
  background-image: url(../images/schedulepic1.jpg);
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: 10% 30%;
}

.schedule_content1_text{
  writing-mode: vertical-rl;
  padding: 10% 0% 1% 82%;
  font-size: 400%;
  text-shadow: 1px 1px 1px #fff;

  background-image:url(../images/icon_note.png);
  background-repeat: no-repeat;
  background-size:15%;
  background-position:90% 1%;
}

.yoko {
  text-combine-upright: all;
}
.schedule_time{
  font-size: 110%;
}

.schedule_content2{
  margin: 2% auto 2% auto;
  background-image: url(../images/schedulepic2.jpg),url(../images/icon_nenndo.png);
  background-repeat: no-repeat;
  background-size: 70%,10%;
  background-position: 90% 0%,19% 1%;
}

.schedule_content2_text{
  writing-mode: vertical-rl;
  padding: 10% 0% 1% 5%;
  font-size: 400%;
  text-shadow: 1px 1px 1px #fff;

}

.schedule_content3{
  margin: 1% auto 1% auto;
  background-image: url(../images/icon_irasuto.png),url(../images/schedulepic3.jpg);
  background-repeat: no-repeat;
  background-size: 10%,70%;
  background-position: 80% 90%,10% 30%;
}

.schedule_content3_text{
  writing-mode: vertical-rl;
  padding: 10% 0% 1% 82%;
  font-size: 400%;
  text-shadow: 1px 1px 1px #fff;
}


.schedule_content4{
  margin: 2% auto 2% auto;
  background-image: url(../images/icon_taiko.png),url(../images/schedulepic4.jpg);
  background-repeat: no-repeat;
  background-size: 10%,70%;
  background-position: 20% 100%,90% 0%;
}

.schedule_content4_text{
  writing-mode: vertical-rl;
  padding: 10% 0% 1% 5%;
  font-size: 400%;
  text-shadow: 1px 1px 1px #fff;
}


.schedule_content5{
  margin: 2% auto 2% auto;
  background-image: url(../images/icon_run.png),url(../images/schedulepic5.jpg);
  background-repeat: no-repeat;
  background-size: 10%,70%;
  background-position: 95% 100%,10% 30%;
}

.schedule_content5_text{
  writing-mode: vertical-rl;
  padding: 10% 0% 1% 80%;
  font-size: 400%;
  text-shadow: 1px 1px 1px #fff;
}


.schedule_content6{
  margin: 2% auto 2% auto;
  background-image: url(../images/icon_nawa.png),url(../images/schedulepic6.jpg);
  background-repeat: no-repeat;
  background-size: 10%,70%;
  background-position: 18% 1%,90% 0%;
}

.schedule_content6_text{
  writing-mode: vertical-rl;
  padding: 10% 0% 1% 5%;
  font-size: 400%;
  text-shadow: 1px 1px 1px #fff;
}

.schedule_content7{
  margin: 2% auto 2% auto;
  background-image: url(../images/icon_run.png),url(../images/schedulepic7.jpg);
  background-repeat: no-repeat;
  background-size: 10%,70%;
  background-position: 95% 90%,10% 30%;
}

.schedule_content7_text{
  writing-mode: vertical-rl;
  padding: 4% 0% 1% 75%;
  font-size: 390%;
  text-shadow: 1px 1px 1px #fff;
}

.schedule_content8{
  margin: 2% auto 2% auto;
  background-image: url(../images/icon_taiko.png),url(../images/schedulepic8.jpg);
  background-repeat: no-repeat;
  background-size: 10%,70%;
  background-position: 18% 90%,90% 0%;
}

.schedule_content8_text{
  writing-mode: vertical-rl;
  padding: 4% 0% 1% 2%;
  font-size: 400%;
  text-shadow: 1px 1px 1px #fff;
}

.schedule_content9{
  margin: 2% auto 2% auto;
  background-image: url(../images/icon_nawa.png),url(../images/schedulepic9.jpg);
  background-repeat: no-repeat;
  background-size: 10%,70%;
  background-position: 84% 15%,10% 30%;
}

.schedule_content9_text{
  writing-mode: vertical-rl;
  padding: 10% 0% 1% 82%;
  font-size: 400%;
  text-shadow: 1px 1px 1px #fff;
}

.schedule_content10{
  margin: 2% auto 2% auto;
  background-image: url(../images/icon_nenndo.png),url(../images/schedulepic10.jpg);
  background-repeat: no-repeat;
  background-size: 10%,70%;
  background-position: 18% 90%,90% 0%;
}

.schedule_content10_text{
  writing-mode: vertical-rl;
  padding: 10% 0% 1% 5%;
  font-size: 400%;
  text-shadow: 1px 1px 1px #fff;
}

.schedule_content11{
  margin: 2% auto 2% auto;
  background-image: url(../images/icon_note.png),url(../images/schedulepic11.jpg);
  background-repeat: no-repeat;
  background-size: 10%,70%;
  background-position: 85% 25%,10% 30%;
}

.schedule_content11_text{
  writing-mode: vertical-rl;
  padding: 10% 0% 1% 82%;
  font-size: 400%;
  text-shadow: 1px 1px 1px #fff;
}

.schedule_content12{
  margin: 2% auto 2% auto;
  background-image: url(../images/icon_irasuto.png),url(../images/schedulepic12.jpg);
  background-repeat: no-repeat;
  background-size: 10%,70%;
  background-position: 18% 95%,90% 0%;
}

.schedule_content12_text{
  writing-mode: vertical-rl;
  padding: 10% 0% 1% 5%;
  font-size: 400%;
  text-shadow: 1px 1px 1px #fff;
}

.schedule_content13{
  margin: 2% auto 2% auto;
  background-image: url(../images/icon_run.png),url(../images/schedulepic13.jpg);
  background-repeat: no-repeat;
  background-size: 10%,70%;
  background-position: 83% 15%,10% 30%;
}

.schedule_content13_text{
  writing-mode: vertical-rl;
  padding: 10% 0% 1% 82%;
  font-size: 400%;
  text-shadow: 1px 1px 1px #fff;
}


/* 1日のスケジュール レスポンシブ*/

@media (max-width: 800px) {

.schedule{
  max-width: 600px;
  margin: 0 auto;
}

.schedule h3{
  margin-top: 10%;
  color: #ffc7e3;
  padding: 1% 7% 0% 7%;
  font-size: 2rem;
}
.schedule_top{
  color: #2d3c95;
  font-size: 3rem;

  text-align: center;
  margin-top: 100px;
  padding: 150px 0 1% 0;

  text-align: center;
  margin: 0 auto;
}
.schedule_text{
  padding: 10px 7% 10px 7%;
font-size: 1.1rem;
}


.schedule_content1,schedule_content2,schedule_content3,schedule_content4,schedule_content5,schedule_content6,
schedule_content7,schedule_content8,schedule_content9,schedule_content10,schedule_content11,schedule_content12,schedule_content13{
  height: 80vh;
}
.schedule_content1_text,schedule_content2_text,schedule_content3_text,schedule_content4_text,schedule_content5_text,schedule_content6_text,
schedule_content7_text,schedule_content8_text,schedule_content9_text,schedule_content10_text,schedule_content11_text,schedule_content12_text,schedule_content13_text{
  font-size: 1.5rem;
}


.schedule_content1{
  margin: 2% auto;
  background-image: url(../images/schedulepic1_2.jpg);
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: 0% 1%;
}

.schedule_content1_text{
  writing-mode: vertical-rl;
  padding: 50% 0% 15% 80%;
  font-size: 180%;
  text-shadow: 1px 1px 1px #fff;

  background-image:url(../images/icon_note.png);
  background-repeat: no-repeat;
  background-size:30%;
  background-position:90% 100%;
}

.yoko {
  text-combine-upright: all;
}
.schedule_time{
  font-size: 110%;
}

.schedule_content2{
  margin: 2% auto;
  background-image: url(../images/icon_nenndo.png),url(../images/schedulepic2_2.jpg);
  background-repeat: no-repeat;
  background-size: 30%,70%;
  background-position: 16% 35%,100% 0%;
  height: 80vh;
}

.schedule_content2_text{
  writing-mode: vertical-rl;
  padding: 60% 0% 1% 6%;
  font-size: 180%;
  text-shadow: 1px 1px 1px #fff;

}

.schedule_content3{
  margin: 1% auto 1% auto;
  background-image: url(../images/icon_irasuto.png),url(../images/schedulepic3_2.jpg);
  background-repeat: no-repeat;
  background-size: 30%,70%;
  background-position: 90% 90%,0% 30%;
  height: 80vh;
}

.schedule_content3_text{
  writing-mode: vertical-rl;
  padding: 30% 0% 1% 82%;
  font-size: 180%;
  text-shadow: 1px 1px 1px #fff;
}


.schedule_content4{
  margin: 2% auto 2% auto;
  background-image: url(../images/icon_taiko.png),url(../images/schedulepic4_2.jpg);
  background-repeat: no-repeat;
  background-size: 30%,70%;
  background-position: 14% 100%,100% 0%;
  height: 80vh;
}

.schedule_content4_text{
  writing-mode: vertical-rl;
  padding: 25% 0% 1% 8%;
  font-size: 180%;
  text-shadow: 1px 1px 1px #fff;
}


.schedule_content5{
  margin: 2% auto 2% auto;
  background-image: url(../images/icon_run.png),url(../images/schedulepic5_2.jpg);
  background-repeat: no-repeat;
  background-size: 30%,70%;
  background-position: 88% 98%,0% 30%;
  height: 80vh;
}

.schedule_content5_text{
  writing-mode: vertical-rl;
  padding: 10% 0% 1% 80%;
  font-size: 180%;
  text-shadow: 1px 1px 1px #fff;
}


.schedule_content6{
  margin: 2% auto 2% auto;
  background-image: url(../images/icon_nawa.png),url(../images/schedulepic6_2.jpg);
  background-repeat: no-repeat;
  background-size: 30%,70%;
  background-position: 1% 95%,100% 0%;
  height: 80vh;
}

.schedule_content6_text{
  writing-mode: vertical-rl;
  padding: 15% 0% 1% 8%;
  font-size: 180%;
  text-shadow: 1px 1px 1px #fff;
}

.schedule_content7{
  margin: 2% auto 2% auto;
  background-image: url(../images/icon_run.png),url(../images/schedulepic7_2.jpg);
  background-repeat: no-repeat;
  background-size: 30%,70%;
  background-position: 88% 98%,0% 30%;
  height: 80vh;
}

.schedule_content7_text{
  writing-mode: vertical-rl;
  padding: 10% 1% 1% 80%;
  font-size: 180%;
  text-shadow: 1px 1px 1px #fff;
}

.schedule_content8{
  margin: 2% auto 2% auto;
  background-image: url(../images/icon_taiko.png),url(../images/schedulepic8_2.jpg);
  background-repeat: no-repeat;
  background-size: 30%,70%;
  background-position: 18% 90%,100% 0%;
  height: 80vh;
}

.schedule_content8_text{
  writing-mode: vertical-rl;
  padding: 15% 0% 1% 6%;
  font-size: 180%;
  text-shadow: 1px 1px 1px #fff;
}

.schedule_content9{
  margin: 2% auto 2% auto;
  background-image: url(../images/icon_nawa.png),url(../images/schedulepic9_2.jpg);
  background-repeat: no-repeat;
  background-size: 30%,70%;
  background-position: 88% 98%,0% 30%;
  height: 80vh;
}

.schedule_content9_text{
  writing-mode: vertical-rl;
  padding: 20% 0% 1% 80%;
  font-size: 180%;
  text-shadow: 1px 1px 1px #fff;
}

.schedule_content10{
  margin: 2% auto 2% auto;
  background-image: url(../images/icon_nenndo.png),url(../images/schedulepic10_2.jpg);
  background-repeat: no-repeat;
  background-size: 30%,70%;
  background-position: 18% 90%,100% 0%;
  height: 80vh;
}

.schedule_content10_text{
  writing-mode: vertical-rl;
  padding: 15% 0% 1% 8%;
  font-size: 180%;
  text-shadow: 1px 1px 1px #fff;
}

.schedule_content11{
  margin: 2% auto 2% auto;
  background-image: url(../images/icon_note.png),url(../images/schedulepic11_2.jpg);
  background-repeat: no-repeat;
  background-size: 30%,70%;
  background-position: 88% 98%,0% 30%;
  height: 80vh;
}

.schedule_content11_text{
  writing-mode: vertical-rl;
  padding: 20% 0% 1% 80%;
  font-size: 180%;
  text-shadow: 1px 1px 1px #fff;
}

.schedule_content12{
  margin: 2% auto 2% auto;
  background-image: url(../images/icon_irasuto.png),url(../images/schedulepic12_2.jpg);
  background-repeat: no-repeat;
  background-size: 30%,70%;
  background-position: 18% 95%,100% 0%;
  height: 80vh;
}

.schedule_content12_text{
  writing-mode: vertical-rl;
  padding: 20% 0% 1% 8%;
  font-size: 180%;
  text-shadow: 1px 1px 1px #fff;
}

.schedule_content13{
  margin: 2% auto 2% auto;
  background-image: url(../images/icon_run.png),url(../images/schedulepic13_2.jpg);
  background-repeat: no-repeat;
  background-size: 30%,70%;
  background-position: 88% 98%,0% 30%;
  height: 80vh;
}

.schedule_content13_text{
  writing-mode: vertical-rl;
  padding: 20% 0% 1% 80%;
  font-size: 180%;
  text-shadow: 1px 1px 1px #fff;
}

}


/* 療育プログラム*/

h2
{
  color: #2d3c95;
  font-size: 3rem;

  text-align: center;
  margin-top: 100px;
  padding: 150px 0 1% 0;

  margin: 0 auto;
}

.activity_text{
  padding: 10px 7% 10px 7%;
  font-size: 1.1rem;
}

.activity_athlete_top{
  margin: 5% 0% 0% 0%;
  text-align: center;
}

.activity_athlete_top img{
  height: 40%;
  width: 40%;
}

.activity_artist_top{
  margin: 5% 0% 0% 0%;
  text-align: center;
}

.activity_artist_top img{
  height: 40%;
  width: 40%;
}


.activity_athlete {
  max-width: 1300px;
  margin: 0 auto;
}

.activity_artist{
  max-width: 1300px;
  margin: 0 auto;
}


.athlete_item img{
  height: 100%;
  width: 100%;
}

.activity_grid {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  margin-top: 6%;
  
}

.activity{
  padding: 0% 0% 0% 0%;
  margin: 0% 0% 0% 0%;
}


/* スタッフ紹介*/

.staff{
  background-color: rgba(255, 255, 255, 0.8);
  padding-bottom: 2%;
}

.staff_top_text{
  padding-bottom: 2%;
  text-align: center;
  font-size: 1.5rem;}

.grid_all{
  max-width: 1000px;
  margin: o auto;
  text-align: center;
  margin: 0% 10% 0% 10%;

  background-image: url(../images/icon_run.png),url(../images/icon_nawa.png),url(../images/icon_nenndo.png),url(../images/icon_note.png),url(../images/icon_taiko.png),url(../images/icon_irasuto.png);
  background-repeat: no-repeat;
  background-size: 15%,17%,17%,19%,17%,17%;
  background-position: 80% 13%,25% 25%,80% 45%,25% 60%,80% 80%,25% 98%;
}

.profile_pic_grid img{
width: 50%;
}

.profile_pic_grid{
  display: grid;
  grid-template-columns: repeat(4, minmax(600px, 1fr));
  grid-auto-rows: 210px;
  margin: 2% auto;
  
}


/* プロフィール１*/
.gridbox1{
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  background-image: url(../images/staff_etou_pic.png);
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: 50% 100%;
  
}

.gridbox2{
  grid-column:  1/ 2;
  padding: 3% 0% 0% 1%;
  text-align: left;
  font-size: 1.5rem;
  background-color: #ffc7e3;
}

.gridbox3{
  grid-column: 1 / 2;
  padding: 3% 0% 0% 3%;
  text-align: left;
  font-size: 1rem;
  line-height:1.5em;
  background-color: #ffc7e3;
}

/* プロフィール2*/
.profile2_gridbox1{
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  background-image: url(../images/staff_nisimura_pic.png);
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: 50% 100%;
  
}

.profile2_gridbox2{
  grid-column:  2/ 3;
  padding: 3% 0% 0% 1%;
  text-align: left;
  font-size: 1.5rem;
  background-color: #d9d9ff;
}

.profile2_gridbox3{
  grid-column: 2 / 3;
  padding: 3% 0% 0% 3%;
  text-align: left;
  font-size: 1.5rem;
  line-height:1.5em;
  background-color: #d9d9ff;
}

/* プロフィール3*/
.profile3_gridbox1{
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  background-image: url(../images/staff_tainaka_pic.png);
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: 50% 100%;
  
}

.profile3_gridbox2{
  grid-column:  1/ 2;
  padding: 3% 0% 0% 1%;
  text-align: left;
  font-size: 1.5rem;
  background-color: #ffc7e3;
}

.profile3_gridbox3{
  grid-column: 1 / 2;
  padding: 3% 0% 0% 3%;
  text-align: left;
  font-size: 1.5rem;
  line-height:1.5em;
  background-color: #ffc7e3;
}

/* プロフィール4*/
.profile4_gridbox1{
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  background-image: url(../images/staff_nakata_pic.png);
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: 50% 100%;
  
}

.profile4_gridbox2{
  grid-column:  2/ 3;
  padding: 3% 0% 0% 1%;
  text-align: left;
  font-size: 1.5rem;
  background-color: #d9d9ff;
}

.profile4_gridbox3{
  grid-column: 2 / 3;
  padding: 3% 0% 0% 3%;
  text-align: left;
  font-size: 1.5rem;
  line-height:1.5em;
  background-color: #d9d9ff;
}

/* プロフィール5*/
.profile5_gridbox1{
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  background-image: url(../images/staff_hashimoto_pic.png);
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: 50% 100%;
  
}

.profile5_gridbox2{
  grid-column:  1/ 2;
  padding: 3% 0% 0% 1%;
  text-align: left;
  font-size: 1.5rem;
  background-color: #ffc7e3;
}

.profile5_gridbox3{
  grid-column: 1 / 2;
  padding: 3% 0% 0% 3%;
  text-align: left;
  font-size: 1.5rem;
  line-height:1.5em;
  background-color: #ffc7e3;
}

/* プロフィール6*/
.profile6_gridbox1{
  grid-column: 2 / 3;
  grid-row: 1 / 3;
  background-image: url(../images/staff_kisimoto_pic.png);
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: 50% 100%;
  
}

.profile6_gridbox2{
  grid-column:  2/ 3;
  padding: 3% 0% 0% 1%;
  text-align: left;
  font-size: 1.5rem;
  background-color: #d9d9ff;
}

.profile6_gridbox3{
  grid-column: 2 / 3;
  padding: 3% 0% 0% 3%;
  text-align: left;
  font-size: 1.5rem;
  line-height:1.5em;
  background-color: #d9d9ff;
}


/* スタッフ紹介 レスポンシブ*/

@media (max-width: 700px) {


  .staff_top_text{
    padding-bottom: 2%;
    text-align: center;
    font-size: 1.2rem;}
  
  .grid_all{
    max-width: 600px;
    margin: o auto;
    text-align: center;
    margin: 0% 10% 0% 10%;
  }
  
  .profile_pic_grid img{
  width: 50%;
  }
  
  .profile_pic_grid{
    display: grid;
    grid-template-columns: repeat(2, minmax(480px, 1fr));
    grid-auto-rows: 200px;
    margin: 2% auto;
    
  }
  
  /* プロフィール１*/
.gridbox1{
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  background-image: url(../images/staff_etou_pic.png);
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: 50% 100%;
  
}

.gridbox2{
  grid-column:  1/ 2;
  padding: 3% 0% 0% 1%;
  text-align: left;
  font-size: 1.5rem;
  background-color: #ffc7e3;
}

.gridbox3{
  grid-column: 1 / 2;
  padding: 3% 0% 0% 3%;
  text-align: left;
  font-size: 1rem;
  line-height:1.5em;
  background-color: #ffc7e3;
}

/* プロフィール2*/
.profile2_gridbox1{
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  background-image: url(../images/staff_nisimura_pic.png);
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: 50% 100%;
  
}

.profile2_gridbox2{
  grid-column:  1/ 2;
  padding: 3% 0% 0% 1%;
  text-align: left;
  font-size: 1.5rem;
  background-color: #d9d9ff;
}

.profile2_gridbox3{
  grid-column: 1 / 2;
  padding: 3% 0% 0% 3%;
  text-align: left;
  font-size: 1.5rem;
  line-height:1.5em;
  background-color: #d9d9ff;
}

/* プロフィール3*/
.profile3_gridbox1{
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  background-image: url(../images/staff_tainaka_pic.png);
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: 50% 100%;
  
}

.profile3_gridbox2{
  grid-column:  1/ 2;
  padding: 3% 0% 0% 1%;
  text-align: left;
  font-size: 1.5rem;
  background-color: #ffc7e3;
}

.profile3_gridbox3{
  grid-column: 1 / 2;
  padding: 3% 0% 0% 3%;
  text-align: left;
  font-size: 1.5rem;
  line-height:1.5em;
  background-color: #ffc7e3;
}

/* プロフィール4*/
.profile4_gridbox1{
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  background-image: url(../images/staff_nakata_pic.png);
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: 50% 100%;
  
}

.profile4_gridbox2{
  grid-column:  1/ 2;
  padding: 3% 0% 0% 1%;
  text-align: left;
  font-size: 1.5rem;
  background-color: #d9d9ff;
}

.profile4_gridbox3{
  grid-column: 1 / 2;
  padding: 3% 0% 0% 3%;
  text-align: left;
  font-size: 1.5rem;
  line-height:1.5em;
  background-color: #d9d9ff;
}

/* プロフィール5*/
.profile5_gridbox1{
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  background-image: url(../images/staff_hashimoto_pic.png);
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: 50% 100%;
  
}

.profile5_gridbox2{
  grid-column:  1/ 2;
  padding: 3% 0% 0% 1%;
  text-align: left;
  font-size: 1.5rem;
  background-color: #ffc7e3;
}

.profile5_gridbox3{
  grid-column: 1 / 2;
  padding: 3% 0% 0% 3%;
  text-align: left;
  font-size: 1.5rem;
  line-height:1.5em;
  background-color: #ffc7e3;
}

/* プロフィール6*/
.profile6_gridbox1{
  grid-column: 1 / 2;
  grid-row: 1 / 3;
  background-image: url(../images/staff_kisimoto_pic.png);
  background-repeat: no-repeat;
  background-size: 70%;
  background-position: 50% 100%;
  
}

.profile6_gridbox2{
  grid-column:  1 / 2;
  padding: 3% 0% 0% 1%;
  text-align: left;
  font-size: 1.5rem;
  background-color: #d9d9ff;
}

.profile6_gridbox3{
  grid-column: 1 / 2;
  padding: 3% 0% 0% 3%;
  text-align: left;
  font-size: 1.5rem;
  line-height:1.5em;
  background-color: #d9d9ff;}

}


/*ご利用までの流れ */

.process{
  text-align: left;
  color: #666;
  font-size: 1.5rem
;
  font-weight: bold;

  max-width: 600px;
  margin: 0 auto;

  background-image: url(../images/icon_nenndo.png);
  background-repeat: no-repeat;
  background-size: 20%;
  background-position: 90% 10%;
}

.button_process{
  color: #ffb366;
}

.process_top{
  color: #ffc7e3;
  padding: 5% 0% 1% 0%;
  font-size: 2rem;
}

/*ご利用までの流れ レスポンシブ*/
@media screen and (max-width: 800px) {

.process{
  text-align: left;
  color: #666;
  font-size: 1.2rem;
  font-weight: bold;
  text-shadow: 1px 1px 1px #fff;

  max-width: 600px;
  margin: 0 auto;
  padding: 0% 0% 0% 15%;

  background-image: url(../images/icon_nenndo.png);
  background-repeat: no-repeat;
  background-size: 0%;
  background-position: 90% 100%;

}

.process_top{
  color: #ffc7e3;
  padding: 5% 0% 1% 0%;
  font-size: 2rem;
}

}

/* 料金*/

.price{
  background-color: rgba(255, 255, 255, 0.8);
  padding-bottom: 10%;

  text-align: center;
}

.price_category{
  color: #ffc7e3;
  padding: 3% 0% 1% 0%;
  font-size: 2rem;

  text-align: left;
	display: inline-block;  
}

.price p{
  padding-bottom: 2%;

  text-align: left;
	display: inline-block;
}

body {
  line-height: 1.25;
}

table {
  border-collapse: collapse;
  margin: 0 auto;
  padding: 0;
  width: 900px;
  table-layout: fixed;
}

table tr {
  background-color: #e6f2f5;
  padding: .35em;
  border-bottom: 2px solid #e6fffe;
}
table th,
table td {
  padding: 1em 10px 1em 1em;
  border-right: 2px solid #e6fffe;
}
table th {
  font-size: .85em;
}
table thead tr{
  background-color: #167F92;
  color:#fff;
}
table tbody th {
    background: #78bbc7;
    color: #fff;
}
.txt{
   text-align: left;
   font-size: .85em;
}
.price{
  color: #666;
  font-weight: bold;

  margin: 0 auto;
}
.non{
  background:rgba(255, 255, 255, 0.8);
}


/* 料金 レスポンシブ*/

@media screen and (max-width: 800px) {
 
  .price{
    margin: 0%;
  }
  table {
    border: 0;
    width:100%
  }
  table th{
    background-color: #167F92;
    display: block;
    border-right: none;
  }
  table thead {
    border: none;
    clip: rect(0 0 0 0);
    height: 1px;
    margin: -1px;
    overflow: hidden;
    padding: 0;
    position: absolute;
    width: 1px;
  }
  table tr {
    display: block;
    margin-bottom: .625em;
  }
  table td {
    border-bottom: 1px solid #bbb;
    display: block;
    font-size: .8em;
    text-align: right;
    position: relative;
    padding: .625em .625em .625em 4em;
    border-right: none;
  }
  
  table td::before {
    content: attr(data-label);
    font-weight: bold;
    position: absolute;
    left: 10px;
    color: #167F92;
  }
  table td:last-child {
    border-bottom: 0;
  }
  table tbody th {
    color: #fff;
}
}


/* お問い合わせ*/

.contact{
  margin: 0 auto;
  text-align: center;
}

.contact p{
  padding-top: 2%;
  text-align: left;
	display: inline-block;
}

.contact h4{
  font-size: 1.5rem;
}

.contact span{
  color: #ffb366;
  font-size: 1.8rem;
}

.contact h3{
  color: #ffc7e3;
  padding: 3% 0% 1% 0%;
  font-size: 1.5rem;

  text-align: left;
	display: inline-block;
}

/* アクセス*/
.access{
  margin: 0 auto;
  padding: 0%;
  background-color: rgba(255, 255, 255, 0.8);
  text-align: center;
}

.access p{
  text-align: left;
  display: inline-block;
  padding: 3%;
}

.location-map{
  text-align: center;
}

/* お問い合わせ アクセス　　レスポンシブ*/

@media screen and (max-width: 800px) {

  /* お問い合わせ*/

.contact{
  margin: 0 auto;
}

.contact p{
  padding-top: 2%;
}

.contact h3{
  color: #ffc7e3;
  padding: 0% 0% 1% 0%;
  font-size: 1.5rem;
}

/* アクセス*/
.access{
  margin: 0 auto;
}

.access p{
  padding: 3% 0% 3% 0%;
}

}

@media (max-width:  600px) {

  .location-map{
    width:10%
  }
}


/* sns固定アイコン用*/
.snslink{
  position: fixed;
  bottom: 0%;
  width: 100%;
}

.snslink img{
  width: 5%;
  height: 5%;
  object-fit: cover;
  padding: 1% 1% 0% 0%;
}

@media (max-width:  600px) {
  .snslink{
    position: fixed;
    bottom: 0%;
    width: 100%;
  }
  
  .snslink img{
    width: 15%;
    height: 15%;
    object-fit: cover;
    padding: 1% 1% 0% 0%;
  }
}


/* フッター */
footer {
  height: 15vh;
  font-family: serif;
  margin: 10% auto 0 auto;
  background-color: #d9d9ff;
}

.copyright{
  text-align: center;
  color: #fff;

}

/* フッター SNS*/

.sns img{
  width: 5%;
  height: 5%;
  object-fit: cover;
  padding: 1% 1% 0% 0%;
}
.sns{
  text-align: center;
}

/* レインボー*/
@media (max-width: 1400px) {
  footer {background-color: #e50044;
    opacity: 0.8;}
}
@media (max-width: 1300px) {
  footer {background-color: #ee7b00;;
    opacity: 0.8;}
}
@media (max-width: 1200px) {
  footer {background-color: #ffe100;
    opacity: 0.8;}
}
@media (max-width: 1100px) {
  footer {background-color: #00a161;
    opacity: 0.8;}
}
@media (max-width: 1000px) {
  footer {background-color: #0073b6;
    opacity: 0.8;}
}
@media (max-width: 900px) {
  footer {background-color: #1c4fa1;
    opacity: 0.8;}
}
@media (max-width: 800px) {
  footer {background-color: #673d93;
    opacity: 0.8;}
}

/* フッダー レスポンシブ*/
@media (max-width:  600px) {

  footer {
    height: 15vh;
    font-family: serif;
    margin: 10% auto 0 auto;
    background-color:#d9d9ff;
  }

  .sns img{
    width: 10%;
    height: 10%;
    object-fit: cover;
    padding: 1% 1% 0% 0%;
  }

}

body{font-family: 'IBM Plex Sans JP', sans-serif;}