@charset "utf-8";
/*
font-family: 'Noto Serif JP';
font-weight:300;
sans:300=Light,400=Regular,500=Medium
serif:400=Regular,500=Medium,700=Bold

font-family: 'Lato';
font-weight:400;
*/

/* main cont */
#keyview{
  position: relative;
  background: url(../../menu/images/img_menu_kids.jpg) no-repeat;
  background-size: cover;
  width: 100%;
  height: 100vh;
}
#keyview::after{
  display: block;
  position: absolute;
  top:0;
  left:0;
  content: "";
  background: repeating-linear-gradient(135deg, #ccc, #ccc 2px, #fff 6px, #fff 6px);
  width: 100%;
  height: 100vh;
  z-index: 10;
  opacity: 0.3;
}
#keyview h1{
  position: absolute;
  top:30px;
  left:30px;
  width: 350px;
  z-index: 20;
}
#keyview h1 img{
  width: 100%;
}
#keyview h2{
  position: absolute;
  top:50%;
  left:50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit- transform: translateX(-50%) translateY(-50%);
  color:#0c7a3f;
  font-family: 'Noto Serif JP';
  font-size:36px;
  line-height: 36px;
  font-weight: 700;
  text-shadow:1px 1px 0 #FFF, -1px -1px 0 #FFF,
              -1px 1px 0 #FFF, 1px -1px 0 #FFF,
              0px 1px 0 #FFF,  0-1px 0 #FFF,
              -1px 0 0 #FFF, 1px 0 0 #FFF;
}

/* kids */
#kids{
  margin: 80 0px;
  padding:0 0 60px;
  width: 100%;
}
#kids_keyview{
  position: relative;
  margin: 0;
  background: url(../../menu/images/img_menu2_1.jpg) no-repeat;
  background-size: cover;
  width: 100%;
  height: 500px;
}
#kids_keyview h3{
  position: absolute;
  top:50%;
  left:50%;
  transform: translateX(-50%) translateY(-50%);
  -webkit- transform: translateX(-50%) translateY(-50%);
  font-size:30px;
  line-height: 30px;
  font-weight: 500;
  color:#FFF;
  text-shadow:1px 1px 0 #009be0, -1px -1px 0 #009be0,
              -1px 1px 0 #009be0, 1px -1px 0 #009be0,
              0px 1px 0 #009be0,  0-1px 0 #009be0,
              -1px 0 0 #009be0, 1px 0 0 #009be0;
}
#kids h4{
  margin: 30px 15px 0;
  color:#4599a8;
  font-size:42px;
  line-height: 48px;
  font-weight: 400;
}
#kids .kids_txt{
  margin: 30px 15px 0;
}
#kids .kids_txt p{
  margin: 1em 0 0;
  font-size:20px;
  line-height: 30px;
  font-weight: 400;
}
#kids_qa{
  position:relative;
  margin: 60px 15px 0;
  padding:0 0 30px;
  background-color: #dd70a0;
  width: calc(100% - 30px);
}
#kids_qa::after{
  content:"";
  position: absolute;
  top:2px;
  left:50%;
  transform: translateX(-50%);
  -webkit- transform: translateX(-50%);
  background:url(../../menu/images/icon_gd_q.png) no-repeat;
  background-size: cover;
  width: 57px;
  height: 57px;
}
#kids_qa h4{
  padding:60px 0 0;
  color:#FFF;
  font-size:26px;
  line-height:32px;
  font-weight: 400;
  text-align: center;
}
#kids_qa dl{
  margin:60px auto 0;
  max-width: 690px;
}
#kids_qa dl dt{
  position: relative;
  margin:0 30px 0 90px;
  padding:20px;
  background-color: #FFF;
  border-radius: 10px;
  width: calc(100% - 160px);
  color:#2b2b2b;
  font-size:14px;
  line-height: 1.5em;
}
#kids_qa dl dt::before{
  content: "";
  position: absolute;
  top:0;
  left:-90px;
  background: url(../../images/icon_kids1.png) no-repeat;
  background-size: cover;
  width: 60px;
  height: 60px;
}
#kids_qa dl dt::after{
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  left: -15px;
  top: 15px;
  border-right: 20px solid #FFF;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
#kids_qa dl dd{
  position: relative;
  margin:30px 90px 0 30px;
  padding:20px;
  background-color: #FFF;
  border-radius: 10px;
  width: calc(100% - 160px);
  color:#2b2b2b;
  font-size:14px;
  line-height: 1.5em;
}
#kids_qa dl dd::before{
  content: "";
  position: absolute;
  top:0;
  right:-90px;
  background: url(../../images/icon_kids2.png) no-repeat;
  background-size: cover;
  width: 60px;
  height: 60px;
}
#kids_qa dl dd::after{
  content: "";
  position: absolute;
  display: block;
  width: 0;
  height: 0;
  right: -15px;
  top: 15px;
  border-left: 20px solid #FFF;
  border-top: 15px solid transparent;
  border-bottom: 15px solid transparent;
}
#kids_menu{
  margin: 60px 15px 0;
  width: calc(100% - 30px);
}
#kids_menu h4{
  position: relative;
  margin: 45px 0 0;
  color:#4599a8;
  font-size:42px;
  line-height:48px;
  font-weight: 500;
  text-align: center;
}
#kids_menu h4::after{
  content: "";
  display: block;
  position: absolute;
  top:58px;
  left:50%;
  background-color: #4599a8;
  width: 60px;
  height: 3px;
  transform: translateX(-50%);
  -webkit- transform: translateX(-50%);
}
#kids_menu .box_kids{
  margin: 45px 0 0;
  width: 100%;
}
#kids_menu .box_kids img{
  width: 100%;
}
#kids_menu .box_kids h5{
  margin: 6px 0 0;
  color:#1e78c2;
  font-size:24px;
  line-height:42px;
  font-weight: 400;
  text-align: center;
}
#kids_menu .box_kids p{
  margin: 21px 0 0;
  color:#2b2b2b;
  font-size:20px;
  line-height:30px;
  font-weight: 400;
}
.btn_menu2{
  margin: 45px 0 0;
  background-color: #65cadb;
  width: 100%;
  height: 80px;
  color:#FFF;
  font-size:16px;
  line-height:80px;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
}
.btn_menu2:hover{
  opacity: 0.8;
}
.btn_menu2 a{
  display: block;
  color:#FFF;
  font-size:16px;
  line-height:80px;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
}
#qa_close{
  display: none;
}
#btn_qa{
  margin: 45px 15px 0;
  background-color: #ded371;
  width: calc(100% - 30px);
  height: 80px;
  color:#4b5b5e;
  font-size:16px;
  line-height:80px;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
}
.btn_menu3{
  display: none;
  margin: 45px 15px 0;
  background-color: #ded371;
  width: calc(100% - 30px);
  height: 80px;
  color:#4b5b5e;
  font-size:16px;
  line-height:80px;
  font-weight: 400;
  text-align: center;
  cursor: pointer;
}
.btn_menu3:hover{
  opacity: 0.8;
}
.btn_menu3 a{
  display: block;
  color:#4b5b5e;
  font-size:16px;
  line-height:80px;
  font-weight: 400;
  text-align: center;
  text-decoration: none;
}
@media (orientation:landscape){

}