@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP|Noto+Serif+JP');

/*
font-family: 'Noto Sans JP', sans-serif;
font-family: 'Noto Serif JP', sans-serif;
*/


.show_pc { display: block !important; }
.show_sp { display: none !important; }

@media only screen and (max-width: 750px) {
  .show_pc { display: none !important; }
  .show_sp { display: block !important; }
}

/* Loading */

#loader-bg {
  display: none;
  position: fixed;
  width: 100%;
  height: 100%;
  top: 0px;
  left: 0px;
  background: #ffffff;
  z-index: 1;
}

#loader {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  width: 200px;
  height: 200px;
  margin-top: -100px;
  margin-left: -100px;
  text-align: center;
  color: #fff;
  z-index: 2;
}

body {
  width: 100%;
}

/* head */

#phead {
  max-width: 1200px;
  display: block;
  margin-right: auto;
  margin-left: auto;
}

#phead img {
  max-width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

#phead .mv {
  position: relative;
  z-index: 2;
}


/* contents */

.img_none {display: none;}

#pbody {
  width: 100%;
  padding: 0;
  margin: 0;
  background-image: url(../images/201910/bk.png);
  background-repeat: repeat;
  font-family: 'Noto Sans JP', sans-serif;
}

#pbody .spbgY,
#pbody.spbgY {
  background-image: url(../images/201910/bg_sp_y.jpg);
}

#pbody .spbgB {
  background-image: url(../images/201910/bg_sp_b.jpg);
}

#wrap04,
#wrap03,
#wrap02 {
  width: 100%;
}

#wrap05,
#wrap {
  width: 1125px;
  margin: 0 auto;
}

#wrap05 img,
#wrap04 img,
#wrap03 img,
#wrap02 img,
#wrap img {
  max-width: 100%;
}


#wrap05 ul,
#wrap04 ul,
#wrap03 ul,
#wrap02 ul,
#wrap ul {
  padding: 0;
  list-style-type: none;
}


/* session00 */
#session00 {
  width: 705px;
  display: block;
  margin: 50px auto 0;
}

/* session01 */
#s01 {
  width: 665px;
  display: block;
  margin: 60px auto 0;
  border: 20px solid #c8aaaa;
  background-color: #ffffff;
  padding: 40px 0 45px;
}

#s01 .cr {
  font-size: 13px;
  margin: -13px 30px 0 30px;
  position: relative;
}

/* s02 */
#s02 {
  width: 705px;
  display: block;
  margin: 70px auto 0;
  padding-bottom: 80px;
  position: relative;
}

#s02 .cr {
  font-size: 13px;
  margin: -178px 0px 0 360px;
}

/* s03 */
#s03 {
  background: rgb(220,248,255); /* Old browsers */
  background: -moz-linear-gradient(45deg,  rgba(220,248,255,1) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 76%, rgba(220,248,255,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(45deg,  rgba(220,248,255,1) 0%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 76%,rgba(220,248,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(45deg,  rgba(220,248,255,1) 0%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 76%,rgba(220,248,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#dcf8ff', endColorstr='#dcf8ff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */
  
  margin-top: 80px;
}

#s03 .wrap {
  width: 705px;
  display: block;
  margin: 0px auto;
  padding-top: 115px;
  padding-bottom: 90px;
}

#s03 .cr {
  width: 557px;
  font-size: 13px;
  margin: -7px auto 0px;
  position: relative;
}

/*
  position: relative;
  z-index: 0;
*/


/* s04 */
#s04 {
  width: 665px;
  display: block;
  margin: 60px auto 0;
  border: 20px solid #000000;
  background-color: #ffdddd;
  padding: 40px 0 50px;
}

#s04 img {
  max-width: 100%;
}

#s04 .cr {
  font-size: 13px;
  margin: -35px 30px 0 30px;
}

/* s05 */
#s05 {
  width: 675px;
  display: block;
  margin: 60px auto 0;
  border: 10px solid #c8aaaa;
  border-top: 2px solid #c8aaaa;
  border-bottom: 2px solid #c8aaaa;
  background-color: #ffffff;
  padding: 40px 0 50px;
}

#s05 img {
  max-width: 100%;
}

#s05 .cr {
  font-size: 13px;
  margin: -35px 30px 0 40px;
  position: relative;
}

/* s06 */
#s06 {
  width: 730px;
  display: block;
  margin: 60px auto 0;
  padding-bottom: 80px;
}

#s06 .cr {
  width: 523px;
  font-size: 13px;
  margin: -130px 0px 0 215px;
  position: relative;
}

/* s07 */
#s07 {
  background: rgb(248,228,255); /* Old browsers */
  background: -moz-linear-gradient(-45deg,  rgba(248,228,255,1) 0%, rgba(255,255,255,1) 20%, rgba(255,255,255,1) 50%, rgba(255,255,255,1) 76%, rgba(248,228,255,1) 100%); /* FF3.6-15 */
  background: -webkit-linear-gradient(-45deg,  rgba(248,228,255,1) 0%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 76%,rgba(248,228,255,1) 100%); /* Chrome10-25,Safari5.1-6 */
  background: linear-gradient(135deg,  rgba(248,228,255,1) 0%,rgba(255,255,255,1) 20%,rgba(255,255,255,1) 50%,rgba(255,255,255,1) 76%,rgba(248,228,255,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8e4ff', endColorstr='#f8e4ff',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

  margin-top: 80px;
}

#s07 .wrap {
  width: 757px;
  display: block;
  margin: 0px auto;
  padding-top: 100px;
  padding-bottom: 90px;
}

#s07 .cr {
  width: 557px;
  font-size: 13px;
  margin: -20px auto 0px;
  position: relative;
}


/* s08 */
#s08 {
  width: 821px;
  display: block;
  margin: 0px auto 0;
}

#s08 .spcCr {
  width: 821px;
  font-size: 13px;
  text-align: center;
}

#s08 .cr {
  width: 365px;
  font-size: 13px;
  margin: -368px 0px 0 17px;
  position: relative;
  padding-bottom: 210px;
}

/* s09 */
#s09 {
  width: 818px;
  display: block;
  margin: 0px auto 0;
  padding-top: 40px;
}

#s09 .cr {
  width: 330px;
  font-size: 13px;
  margin: -70px 0px 0 54px;
  position: relative;
  padding-bottom: 60px;
}

.movie02,
.movie01 {
  width: 100%;
  margin: 0 auto;
  background-color: #9e8f68;
  padding: 20px 0;
}

.movie01 {
  margin-top: 30px;
  margin-bottom: 50px;
}

.movie02 {
  background-color: #a4abbc;
}

#wide2,
#wide1 {
  width: 682px;
  background-image: url(../images/201910/bg_m01.jpg);
  background-repeat: no-repeat;
  height: auto;
  display: block;
  margin: 10px auto;
  padding: 10px 0;
}

#wide2 {
  background-image: url(../images/201910/bg_m02.jpg);
}

#btn {
  line-height: 0;
  /* width: 50%; */
  width: 1125px;
  display: block;
  margin: 50px auto 0;
}

#btn_no {
  width: 750px;
  display: block;
  margin: 50px auto 0;
}

.btnLinkhalf {
  display: inline-flex;
  list-style-type: none;
  width: 100%;
  max-width: 1200px;
  padding: 0;
  margin: 0;
}

.btnLinkHalf img {
  width: 100%;
}

.btnLinkHalf li {
  width: 100%;
}

.ftArea {
  background-color: #ffffff;
  margin-top: -30px;
  padding-top: 30px;
}

.toList {
  width: 473px;
  display: block;
  margin: 70px auto 0;
}

.toInsta {
  width: 81px;
  display: block;
  margin: 40px auto 0;
}

.snsLink {
  width: 50%;
  padding: 0;
  list-style-type: none;
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-align-items: center;
  align-items: center;
  margin: 30px auto 0;
  /* padding-bottom: 35px !important; */
}

.snsLink li {
  width: 80%;
  text-align: center;
}

.snsLink li img {
  height: 81px;
}

.splLogo {
  width: 312px;
  display: block;
  margin: 55px auto 0;
}

.toMain {
  width: 685px;
  display: block;
  margin: 30px auto 0;
}

.stc {
  width: 400px;
  margin-top: 50px;
  display: block;
  margin: 50px auto 0;
}


@media screen and (max-width: 767px) {
  .show_pc {display: none;}
  .show_sp {display: block;}
  
  #pbody {
    background-size: 100%;
  }

  #pbody .spbgY,
  #pbody.spbgY {
    background-size: 100%;
  }
  
  #pbody .spbgB {
    background-size: 100%;
  }


  #wrap05,
  #wrap04,
  #wrap03,
  #wrap02,
  #wrap {
    width: 100%;
  }
  
  #phead {
    width: 100%;
  }

  #wrap img {
    max-width: 100%;
  }

  #session00 {
    width: 85.6%;
    margin-top: -82px;
  }

  #s01 {
    width: 81.2%;
    margin-top: 30px;
    padding-top: 15px;
    border: 8px solid #c8aaaa;
  }

  #s01 .cr {
    font-size: 10px;
    width: 91.8%;
    margin-left: auto;
    margin-right: auto;
    margin-top: -4px;
  }

  #s01 .cr img {
    width: 10%;
  }

  #s02 {
    width: 87.333%;
    padding-bottom: 50px;
  }

  #s02 .cr {
    font-size: 10px;
    width: 61.063%;
    margin-top: -75px;
    margin-left: 120px;
      position: relative;
  }

  #s02 .cr img {
    width: 15%;
  }

  #s03 {
    width: 100%;
    margin-top: 0px;
  }

  #s03 .wrap {
    width: 76.533%;
    padding-top: 48px;
    padding-bottom: 40px;
  }

  #s03 .cr {
    font-size: 10px;
    width: 113.24%;
    margin-left: -20px;
  }

  #s03 .cr img {
    width: 10.153%;
  }

  #s04 {
    width: 81.733%;
    margin-top: 30px;
    border: 10px solid #000000;
    padding: 30px 0 15px;
  }

  #s04 .cr {
    font-size: 10px;
    width: 86.5%;
    margin:0 auto;
  }

  #s04 .cr img {
    width: 12.218%;
  }

  #s04 .cr p {
    margin-left: 14.285714%;
    margin-top: -12px;
  }
  
  #s05 {
    width: 81.066%;
    margin-top: 25px;
    padding: 25px 0 15px;
    border: 4px solid #c8aaaa;
    border-top: 1px solid #c8aaaa;
    border-bottom: 1px solid #c8aaaa;
  }

  #s05 .cr {
    font-size: 10px;
    width: 86.60%;
    margin: -10px auto 0;
  }
  
  #s05 .cr p {
    margin: 3px 0;
  }
  #s05 .cr img {
    width: 11.32%;
  }

  #s06 {
    width: 88%;
    margin-top: 30px;
    padding-bottom: 30px;
  }

  #s06 .cr {
    font-size: 10px;
    width: 64.848%;
    margin-left: 116px;
    margin-top: -53px;
  }

  #s06 .cr img {
    width: 15.42%;
  }

  #s07 {
    width: 100%;
    margin-top: 0px;
  }

  #s07 .wrap {
    width: 88%;
    padding-top: 40px;
    padding-bottom: 23px;
  }

  #s07 .cr {
    font-size: 10px;
    width: 81.06%;
    margin-top: -7px;
    margin-left: auto;
    margin-right: auto;
  }

  #s07 .cr img {
    width: 12.15%;
  }

  #s08 {
    width: 100%;
    margin-top: 0px;
    padding-bottom: 10px;
  }

  #s08 .spcCr {
    width: 100%;
  }

  .sp08 {
    width: 85.6%;
    margin: 0px auto;
  }
  
  #s08 .cr {
    font-size: 10px;
    width: 45%;
    margin-left: 6%;
    margin-top: -181px;
    padding-bottom: 0px;
  }
  
  #s08 .cr p {
   letter-spacing: -0.12em;
  }
  
  #s08 .spcCr {
    font-size: 10px;
    padding-bottom: 10px;
  }

  #s08 .cr img {
    width: 83.4355%;
  }
  
  #s09 {
    width: 100%;
    margin-top: 0px;
    padding-top: 30px;
    padding-bottom: 35px;
  }

  #s09 .sp09 {
    width: 85.6%;
    display: block;
    margin:-5px auto 0;
  }
  
  #s09 .cr {
    font-size: 10px;
    width: 48%;
    margin-left: 6.666%;
    margin-top: -53px;
    padding-bottom: 0;
  }
  
  #wide2,
  #wide1 {
    width:69.3333%;
    margin: 2px auto;
    padding: 2px 0;
  }
  
  .movie02,
  .movie01 {
    padding: 2px 0;
  }
  
  .movie01 {
    margin: 20px 0 0;
  }
  
  .splLogo {
    margin-top: 25px;
  }
  
  .toList {
    width: 52%;
    margin-top: 40px;
  }

  .toInsta {
    width: 10.9333%;
    margin-top: 15px;
  }

  .toApli {
    margin-top: 12px;
  }

  .snsLink {
    width: 73%;
  }

  .snsLink li img {
    height: 40px;
  }

  .splLogo {
    width: 38.666%;
  }
  
  .toMain {
    width: 85.6%;
    margin-top: 18px;
  }

  .stc {
    width: 82.4%;
  }


  #btn {
    line-height: 0;
    width: 100%;
    margin-top: 42px;
  }
  
  #btn_no {
    line-height: 0;
    width: 100%;
    margin-top: 42px;
  }

  .btnLinkhalf li {
    width: 100%;
  }
}

/* Animation base */

.animated {
  -webkit-animation-duration: 3s;
  opacity: 0;
  
  animation-duration: 3s;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
}


.imgClear {
  line-height: 0;
  filter: grayscale(100); 
  /* transition: filter 0.2s; */
}

.imgClear.on {
  filter: grayscale(0); 
  transition: filter 1.5s;
}

.imgMain {
  line-height: 0;
  filter: grayscale(100); 
  /* transition: filter 0.2s; */
}

.imgMain.on {
  filter: grayscale(0); 
  transition: filter 4s;
}

.animated.infinite {
  -webkit-animation-iteration-count: infinite;
  animation-iteration-count: infinite;
}

.animated.once {
  -webkit-animation-iteration-count: 1;
  animation-iteration-count: 1;
}

.blur-img {
  -webkit-animation-name: imageBlur;
  animation-name: imageBlur;

  transition: 3s;
}


@-webkit-keyframes imageBlur {
  from {
    opacity: 0;
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -ms-filter: blur(15px);
    -o-filter: blur(15px);
    filter: blur(15px);
  }

  to {
    opacity: 1;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}
@keyframes imageBlur {
  from {
    opacity: 0;
    -webkit-filter: blur(15px);
    -moz-filter: blur(15px);
    -ms-filter: blur(15px);
    -o-filter: blur(15px);
    filter: blur(15px);
  }

  to {
      opacity: 1;
    -webkit-filter: blur(0px);
    -moz-filter: blur(0px);
    -ms-filter: blur(0px);
    -o-filter: blur(0px);
    filter: blur(0px);
  }
}




/* Animation End */