@charset "UTF-8";
/*googleフォントからNoto Sans JP,oto Serif JP,Robotoを引用*/
@import url("https://fonts.googleapis.com/css?family=Noto+Sans+JP|Noto+Serif+JP|Roboto:400,700&display=swap");

/*****************************************/
/*PC,SPでの出し分け*/
/* sp時にしか表示させない */
@media only screen and (min-width: 769px) {.is_sp {display: none !important}}
/* PC時にしか表示させない */
@media only screen and (max-width: 768px) {.is_pc {display: none !important}}
/*****************************************/
html {
  font-size: 10px
}

body {
  font-family: 'Noto Sans JP', 'Hiragino Sans', 'Yu Gothic', 'Meiryo', sans-serif;
  font-size: 1.6rem;
  line-height: 1.5;
  /*背景画像もプリントアウト対象にする*/
  -webkit-print-color-adjust: exact;
}


/*****************************************/
/*flex関連をclass化*/

/*通常版*/
.flex {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
}

/*左右中央寄せ*/
.flex_center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  justify-content: center;
}

/*天地中央寄せ*/
.flex_middle {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
}

/*flex逆から*/
.flex_reverse {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: reverse;
  -ms-flex-direction: row-reverse;
  flex-direction: row-reverse;
}

/*flex-boxを使った天地左右中央寄せ*/
.just_center {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  flex-direction: column;
  justify-content: center;
  -webkit-align-items: center;
  -ms-align-items: center;
  align-items: center;
}

/*左右詰め等倍*/
.space_between {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-flex-flow: row wrap;
  -ms-flex-flow: row wrap;
  flex-flow: row wrap;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
}
/*-----------------------------*/
/*      form周りのリセット（要適宜）      */
/*----------------------------*/
/*
input, button {
  appearance: none;
  -moz-appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none transparent;
  background-clip: padding-box;
  color: inherit;
  font-size: inherit;
  vertical-align: middle;
  box-sizing: border-box;
  outline: none;
}

input::-ms-clear,
button:-ms-clear {
  display: none;
}

input::-ms-reveal,
button:-ms-reveal {
  display: none;
}

input::-ms-expand,
button:-ms-expand {
  display: none;
}

input:focus,
button:focus {
  outline: none;
}
*/
/*****************************************/
/*
  footer
*/

footer {
  background: #fff;
  position: relative;
}

footer .logo1 {
  text-align: center;
  padding: 32px 0
}

footer .logo1 img {
  width: 96px;
  height: 48px
}

footer .footermenu {
  text-align: center;
  padding-bottom: 8px
}

footer .footermenu li {
  display: inline-block;
  padding: 0 8px;
  border-left: 1px solid #004EA2
}

footer .footermenu li:first-of-type {
  border: none
}

footer .footermenu a {
  color: #004EA2
}

footer .logo2 {
  text-align: center;
  padding: 48px 0 24px
}

footer .logo2 img {
  width: 160px;
  height: 48px
}

footer .copyright {
  font-size: 12px;
  text-align: center;
  padding-bottom: 16px
}

footer .copyright li {
  padding: 0 8px;
  color: #14116e
}



@media only screen and (max-width: 768px) {
  footer {
    margin-top: -1px
  }
  footer .inbox {
    padding: 0 16px
  }

  footer .logo1 {
    padding: 32px 0 16px
  }

  footer .logo2 {
    padding: 32px 0 16px
  }

  footer .copyright {
    padding-bottom: 64px
  }

  footer .copyright li {
    padding: 0
  }
}


/*
  common
*/
body{
  background: #F5F4E8;
}
section{
  max-width: 1920px;
  margin: 0 auto;
}
section .wrapper{
  width: calc(100% / 6 * 4);
  margin: 0 auto;
}
.tac{text-align: center;}
img{text-align: center;}

@media only screen and (max-width: 768px) {
  section .wrapper{
    width: 100%;
  }
}



/*
  kv
*/
#kv{
  background: url(../images/bak_body@2x.png) 0 0 repeat;
  background-size: 960px;
  padding-bottom: 80px;
}
#kv .wrapper{
  max-width: 960px;
  width: auto;
}
#kv .main_kv{
  padding: 0;
  max-width: 960px;
  margin: 0 auto;
}
#kv .sub_kv{
  -webkit-box-align: end;
	-ms-flex-align: end;
	align-items: flex-end;
}
#kv .sub_kv .box01{
  width: calc(100% / 6 * 2);
  padding: 0 10px;
}
#kv .sub_kv .box01 .img_area .ttl{
  position: relative;
  z-index: 1;
}
#kv .sub_kv .box01 .img_area .img{
  margin-top: -15%;
}
#kv .sub_kv .box01 .text{
  background: #fff;
  border-radius: 18px 16px 16px 18px;
  box-shadow: 0px 3px 6px rgba(66, 136, 104, 0.33);
  text-align: center;
  padding: 24px 0 28px;
  margin-top: -32px;
}
#kv .sub_kv .box01 .day{
  background: #5BACA8;
  color: #fff;
  font-size: 1.5rem;
  line-height: 1.2;
  padding: 10px 0;
}
#kv .sub_kv .box01 .item{
  margin-top: 8px;
  font-size: 1.5rem;
  font-weight: bold;
  line-height: 1.3333;
  color: #5BACA8;
}
#kv .sub_kv .box01 .name{
  margin-top: 4px;
  font-size: 2.4rem;
  font-weight: bold;
  line-height: 1.3333;
  color: #517491;
}
#kv .sub_kv .box01 .size{
  margin-top: 12px;
  font-size: 1.3rem;
  line-height: 1.3;
  color: #5BACA8;
}

#kv .sub_kv .box02{
  padding: 0 10px;
  width: calc(100% / 6 * 4);
}
#kv .sub_kv .box02 .img{
  border-radius: 16px;
  border: 4px solid #fff;
  box-shadow: 0px 3px 6px rgb(66 136 104 / 33%);
}
#kv .sub_kv .box02 .img img{
  border-radius: 16px;
}
.box_inner{height: 100%;}

#kv .btn{
  margin-top: 20px;
}
#kv .btn a{
  display: block;
  max-width: 300px;
  margin: 0 auto;
  color: #fff;
  font-size: 1.6rem;
  line-height: 1.5;
  padding: 2px 0;
  text-align: center;
  background: #DDBF7C;
  border-radius: 18px 16px 16px 18px;
  border: 1px solid #fff;
  box-shadow: 0px 3px 6px rgba(66, 136, 104, 0.33);
  padding: 11px 0;
}

#kokuban{
  margin: 0 auto;
  width: calc(100% / 6 * 4);
}
@media only screen and (max-width: 768px) {

  #kv{
    padding-bottom: 80px;
  }
  #kv .main_kv{
    padding: 0;
  }
  #kv .sub_kv{
    display: block;
    margin-top: 10px;
  }
  #kv .sub_kv .box01{
    padding: 0 10px;
    width: 100%;
    margin-top: 10px;
  }
  #kv .sub_kv .box02{
    padding: 0 10px;
    width: 100%;
  }
  #kv .sub_kv .box01 .img_area .img{
    margin-top: 0;
  }
  #kv .sub_kv .box02 .ttl{
    position: relative;
    z-index: 1;
  }

  #kv .sub_kv .box01 .img_area .img{
    width: 55.5555556%;
    margin: 0 auto;
    margin-top: -18%;
    position: relative;
    z-index: 1;
  }
  #kv .btn{
    margin-top: 10px;
    padding: 0 10px;
  }
  #kv .btn a{
    max-width: none;
    width: 100%;
  }
  #kokuban{
    margin: 0 auto;
    width: 100%;
  }
}


/*
  items
*/
#items{
  background: #F5F4E8;
  position: relative;
  padding-bottom: 70px;
}
#items:before{
  content:"";
  display: block;
  height: 80px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(../images/h2_back@2x.png) 0 50% repeat-x;
  background-size: contain;
  transform: translateY(-50%);
}
#items h2{
  max-width: 320px;
  margin: 0 auto;
  transform: translateY(-50%);
}
#items .item_list{
  margin-top: 30px;
}
#items .item_list li{
  width: calc(100% / 3);
  padding: 10px;
}
#items .item_list .box_inner{
  border-radius: 16px;
  overflow: hidden;
  background: #fff;
  text-align: center;
  padding-bottom: 20px;
}
#items .item_list .day{
  color: #fff;
  background: #5BACA8;
  font-size: 1.3rem;
  line-height: 1.3;
  padding: 9px 0;
}
#items .item_list .sub{
  margin-top: 8px;
  color: #5BACA8;
  font-size: 1.3rem;
  line-height: 1.3;
}
#items .item_list .name{
  margin-top: 2px;
  color: #517491;
  font-size: 1.6rem;
  line-height: 1.3;
  font-weight: bold;
}
@media only screen and (max-width: 768px) {
  #items:before{
    background-size: cover;
  }
  #items .item_list{
    margin-top: 0;
    padding: 0 5px;
  }
  #items .item_list li{
    width: calc(100% / 2);
    padding: 5px;
  }
  #items .item_list .box_inner{
    border-radius: 16px;
    overflow: hidden;
    background: #fff;
    text-align: center;
    padding-bottom: 20px;
  }

}

#character{
  background: #fff;
}
#character h2{}


#cm{
  background: url(../images/bak_body@2x.png) 0 0 repeat;
  background-size: 960px;
  padding-bottom: 80px;
  position: relative;
}
#cm:before{
  content:"";
  display: block;
  height: 80px;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url(../images/h2_back@2x.png) 0 50% repeat-x;
  background-size: contain;
  transform: translateY(-50%);
}
#cm h2{
  max-width: 320px;
  margin: 0 auto;
  transform: translateY(-50%);
}
#cm .wrapper{
  overflow: hidden;
  max-width: 640px;
  width: 100%;
  background-color: #fff;
  margin: 0 auto 0;
  border-radius: 18px 16px 16px 18px;
  box-shadow: 0px 3px 6px rgba(66, 136, 104, 0.33);
}
#cm .movie_wrap {
  border: none;
  margin: 0 auto 0;
  max-width: 640px;
  position: relative;
  padding-bottom: 56.25%;
  width: 100%;
}
#cm .movie_wrap iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

@media only screen and (max-width: 768px) {
  #cm {
    padding: 0 10px 80px;
  }
  #cm:before{
    background-size: cover;
  }
}