@charset "utf-8";




/*----------------------------------------
	for PC
----------------------------------------*/


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


/* 背景 */

.background_sec01{width:100%;height:100vh;position:absolute;top:0;left:0;z-index:3;}


.background_sec02{width:100%;height:100vh;position:absolute;top:0;left:0;z-index:1;opacity:0;}
.background_sec02 .img-bg{width:100%;position:absolute;top:0;left:0;z-index: 2;}

.background_sec03{width:100%;height:100vh;position:absolute;top:0;left:0;z-index:3;opacity:0;}
.background_sec03 .img-bg{width:100%;position:absolute;top:0;left:0;z-index:1;}


/* 序 */

.sec01__wrap{margin:0 auto 0px;width:100vw;position:relative;min-height: 100vh;}
.sec01__inner{margin:0 auto;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:1100px;padding-top:0px;transition: all 1s;}
.sec01__wrap.set_relative .sec01__inner{margin:0 auto;position:absolute;width:1100px;padding-top:0px;left:50%;top:50%;transform:translate(-50%,-50%);}
.sec01__inner .text{color:#fff;text-align:center;line-height:2.5;font-size:19px;}

/*ラベル*/
.accbox{text-align: center;position:relative;padding-top:20px;}
.accbox:before{content:'';display:block;width:240px;height:1px;position:absolute;top:0;left:50%;transform: translate(-50%,0%);background-color:#aaa;}
.accbox label {display: inline-block; margin: 1.5px 0; padding : 11px 12px;font-weight: bold;cursor :pointer;transition: all 0.5s;text-align:center;font-size: 18px;font-weight:400;color:#bbb;vertical-align: middle;}
.accbox label:after{content:'';display:inline-block;background-image:url('../img/common/icon-plus.jpg');width:26px;height:26px;background-size:100%;opacity:0.5;vertical-align: middle;margin-left:10px;}

.accbox input {display: none;}

.accbox{opacity:0;transition:all 1s;}
.accbox.on{opacity:1;}

/*中身を非表示にしておく*/
.accbox .accshow {height: 0;padding: 0px;overflow: hidden;opacity: 0;transition: 1.5s;}

.cssacc:checked ~ label{display:none;}
.cssacc:checked ~ .accshow {height: auto;padding: 5px;opacity: 1;}


/* 登場人物 */

.sec02__inner{margin:0 auto;padding:150px 0 200px;position:relative;}
.sec02__inner .bar{display:block;margin:0 auto 0px;}
.sec02__inner .character__wrap{display:flex;width:90%;margin:0 auto;justify-content: center;flex-wrap:wrap;}
.sec02__inner .box{position:relative;margin:0 10px 60px;border:10px solid rgba(255,255,255,0.05);box-shadow:0 0 20px rgba(0,0,0,0.8);opacity:0;}
.sec02__inner .box.large .name{position:absolute;top:240px;right:56px;}
.sec02__inner .box:before{content:'';display:block;}
.sec02__inner .box img{display:block;}
.sec02__inner .box .name{position:absolute;top:150px;right:36px;}

.sec02__inner .character__wrap.second-line .box{width:140px;}
.sec02__inner .character__wrap.second-line .box img{width:100%;}
.sec02__inner .character__wrap.second-line .box .name{width:60px;right:43px;bottom:10px;}

.sec02__inner .box.num-01 .name{right:66px;}

.sec02__inner .box .icon-plus{position:absolute;bottom:-14px;right:-14px;width:40px;transform:scale(0.8);transition:all 0.3s;opacity:0.5;}
.sec02__inner .box:hover .icon-plus{transform:scale(1);opacity:0.8;}


.btn-diagram{padding:6px 80px;border:1px solid #fff;display:inline-block;color:#fff;transition:all 0.5s;position:relative;}
.btn-diagram:after{content:'';display:inline-block;width:16px;background:url(../img/common/plus-w.svg);height:16px;background-size:100%;position:absolute;right:10px;top:50%;transform: translate(0,-50%);}

.btn-diagram:hover{background-color:#fff;color:#000;}
.btn-diagram:hover:after{content:'';display:inline-block;width:16px;background:url(../img/common/plus-b.svg);height:16px;background-size:100%;position:absolute;right:10px;top:50%;transform: translate(0,-50%);}

.centering{text-align: center;}

/* 妖怪 */
.sec03__inner{margin:0 auto;padding:150px 0 0px;position:relative;}
.sec03__inner .youkai-img{width:100%;margin-top:-40px;opacity:0;}

.youkai__wrap{position:relative;}
.link__wrap{position:absolute;z-index:1;width:100%;height:100%;}

.youkai-name-01{position:absolute;top:-5%;left:24%;display:block;opacity:0;max-width:44px;}/* めずき */
.youkai-name-02{position:absolute;top:16%;left:48%;display:block;opacity:0;max-width:44px;}/* ころうか */
.youkai-name-03{position:absolute;top:-2%;left:90%;display:block;opacity:0;max-width:44px;}/* ぎゅうき */
.youkai-name-04{position:absolute;top:30%;left:50%;display:block;opacity:0;max-width:44px;}/* うぶめ */
.youkai-name-05{position:absolute;top:39%;left:43%;display:block;opacity:0;max-width:44px;}/* えんき */
.youkai-name-06{position:absolute;top:77%;left:43%;display:block;opacity:0;max-width:44px;}/* やまんば */
.youkai-name-07{position:absolute;top:73%;left:27%;display:block;opacity:0;max-width:44px;}/* がき */
.youkai-name-08{position:absolute;top:84%;left:32%;display:block;opacity:0;max-width:44px;}
.youkai-name-09{position:absolute;top:38%;left:25%;display:block;opacity:0;max-width:44px;}
.youkai-name-10{position:absolute;top:84%;left:3%;display:block;opacity:0;max-width:44px;}
.youkai-name-11{position:absolute;top:59%;left:68%;display:block;opacity:0;max-width:44px;}/* ただら */
.youkai-name-12{position:absolute;top:43%;left:66%;display:block;opacity:0;max-width:44px;}/* わいら */
.youkai-name-13{position:absolute;top:2%;left:63%;display:block;opacity:0;max-width:44px;}
.youkai-name-14{position:absolute;top:41%;left:3%;display:block;opacity:0;max-width:44px;}/* やつのかみ */
.youkai-name-15{position:absolute;top:59%;left:5%;display:block;opacity:0;max-width:44px;}/* かまいたち */
.youkai-name-16{position:absolute;top:64%;left:36%;display:block;opacity:0;max-width:44px;}/* げどうへい */
.youkai-name-17{position:absolute;top:71%;left:85%;display:block;opacity:0;max-width:44px;}/* みつめやずら */
.youkai-name-18{position:absolute;top:49%;left:81%;display:block;opacity:0;max-width:44px;}/* ぬれおんな */
.youkai-name-19{position:absolute;top:53%;left:21%;display:block;opacity:0;max-width:44px;}/* てっそ */
.youkai-name-20{position:absolute;top:58%;left:96%;display:block;opacity:0;max-width:44px;}/* タタリモッケ */
.youkai-name-21{position:absolute;top:8%;left:18%;display:block;opacity:0;max-width:44px;}/* ごずき */
.youkai-name-22{position:absolute;top:22%;left:6%;display:block;opacity:0;max-width:44px;}/* りょうめんすくな */

.youkai-name{width:2.2%;transition: all 0.5s}
.youkai-name img{width:100%;display:block;}
.youkai-name:hover{margin-top:-10px;}

.yokai-img{position:relative;z-index:0;}


.youkai-name.icon-new:before{top:-8px;right:-8px;}
.youkai-name.icon-new:after{top:-8px;right:-8px;}


#contents{padding-top:0px;}

.background__wrap .cover-noclick{width:100vw;height:100vh;z-index:2;position:absolute;top:0;left:0;background:url(../img/top/cover-pattern.png);}


}




/*----------------------------------------
	for SP
----------------------------------------*/


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

  /* 背景 */

  .background_sec01{width:100%;height:100vh;position:absolute;top:0;left:0;z-index:3;}
  .background_sec01 .img-bg{width:100%;position:absolute;top:0;left:0;z-index:1;}

  .background_sec02{width:100%;height:100vh;position:absolute;top:0;left:0;z-index:1;opacity:0;}
  .background_sec02 .img-bg{width:100%;position:absolute;top:0;left:0;z-index: 2;}

  .background_sec03{width:100%;height:100vh;position:absolute;top:0;left:0;z-index:3;opacity:0;}
  .background_sec03 .img-bg{width:100%;position:absolute;top:0;left:0;z-index:1;}


  /* 序 */

  .sec01__wrap{margin:0 auto 0px;width:100vw;position:relative;z-index: 2;}
  .sec01__inner{margin:0 auto;padding:0 12%;position:relative;z-index: 2;}
  /* .sec01__wrap.set_relative .sec01__inner{margin:0 auto;position:relative;width:1100px;padding-top:0px;left:50%;top:50%;transform:translate(-50%,-50%);} */
  .sec01__inner .text{color:#fff;text-align:left;line-height:2.5;font-size:14px;}


  /*ラベル*/
  .accbox{text-align: center;position:relative;}
  .accbox:before{content:'';display:block;width:240px;height:1px;position:absolute;top:0;left:50%;transform: translate(-50%,0%);background-color:#aaa;}
  .accbox label {display: inline-block; padding : 10px 12px;font-weight: bold;cursor :pointer;transition: all 0.5s;text-align:center;font-size: 16px;font-weight:400;color:#bbb;vertical-align: middle;}
  .accbox label:after{content:'';display:inline-block;background-image:url('../img/common/icon-plus.jpg');width:26px;height:26px;background-size:100%;opacity:0.5;vertical-align: middle;margin-left:10px;}

  .accbox input {display: none;}

  .accbox{opacity:0;transition:all 1s;padding-top:30px;}
  .accbox.on{opacity:1;}

  /*中身を非表示にしておく*/
  .accbox .accshow {height: 0;padding: 0;overflow: hidden;opacity: 0;transition: 1.5s;}

  .cssacc:checked ~ label{display:none;}
  .cssacc:checked ~ .accshow {height: auto;padding: 0px;opacity: 1;}


  /* 登場人物 */

  .sec02__inner{margin:0 auto;padding:100px 0 50px;position:relative;}
  .sec02__inner .bar{display:block;margin:0 auto 0px;}
  .sec02__inner .character__wrap{display:flex;width:90%;margin:0 auto;justify-content: center;flex-wrap:wrap;}

  .sec02__inner .box{position:relative;margin:0 2% 4%;border:5px solid rgba(255,255,255,0.05);box-shadow:0 0 20px rgba(0,0,0,0.8);width:22%;}
  .sec02__inner .box img{display:block;width:100%;}
  .sec02__inner .box .name{position:absolute;top:42%;left:12%;width:50%;}

  .sec02__inner .character__wrap.second-line .box{width:140px;}
  .sec02__inner .character__wrap.second-line .box img{width:100%;}
  .sec02__inner .character__wrap.second-line .box .name{width:60px;left:5px;bottom:10px;}

  .sec02__inner .box.num-01 .name{right:10%;}


  .sec02__inner .box .icon-plus{position:absolute;bottom:0px;right:0px;width:20px;transform:scale(0.8);transition:all 0.3s;opacity:0.5;}
  .sec02__inner .box:hover .icon-plus{transform:scale(1);opacity:0.8;}

  .centering{text-align:center;}
  .btn-diagram{padding:6px 80px;border:1px solid #fff;display:inline-block;color:#fff;transition:all 0.5s;position:relative;margin:40px auto 0;}
  .btn-diagram:after{content:'';display:inline-block;width:16px;background:url(../img/common/plus-w.svg);height:16px;background-size:100%;position:absolute;right:10px;top:50%;transform: translate(0,-50%);}




  /* 妖怪 */

  .sec03__inner{margin:0 auto;padding:50px 0 0px;position:relative;}
  .sec03__inner .youkai-img{width:100%;margin-top:-40px;}

  .youkai__wrap{position:relative;}
  .link__wrap{position:absolute;z-index:1;width:100%;height:100%;}

  .youkai-name-01{position:absolute;top:-3%;left:17%;display:block;}
  .youkai-name-02{position:absolute;top:25%;left:86%;display:block;}
  .youkai-name-03{position:absolute;top:-3%;left:73%;display:block;}
  .youkai-name-04{position:absolute;top:36%;left:44%;display:block;}
  .youkai-name-05{position:absolute;top:50%;left:48%;display:block;}/* えんき */
  .youkai-name-06{position:absolute;top:87%;left:61%;display:block;}
  .youkai-name-07{position:absolute;top:77%;left:1%;display:block;}/* がき */
  .youkai-name-08{position:absolute;top:90%;left:39%;display:block;}
  .youkai-name-09{position:absolute;top:55%;left:20%;display:block;}
  .youkai-name-10{position:absolute;top:91%;left:5%;display:block;}
  .youkai-name-11{position:absolute;top:60%;left:90%;display:block;}/* ただら */
  .youkai-name-12{position:absolute;top:40%;left:77%;display:block;}
  .youkai-name-13{position:absolute;top:24%;left:41%;display:block;}
  .youkai-name-14{position:absolute;top:39%;left:7%;display:block;}/* やつのかみ */
  .youkai-name-15{position:absolute;top:65%;left:3%;display:block;}/* かまいたち */
  .youkai-name-16{position:absolute;top:68%;left:49%;display:block;}/* げどうへい */
  .youkai-name-17{position:absolute;top:85%;left:90%;display:block;}/* みつめやずら */
  .youkai-name-18{position:absolute;top:46%;left:93%;display:block;}/* ぬれおんな */
  .youkai-name-19{position:absolute;top:59%;left:36%;display:block;}/* てっそ */
  .youkai-name-20{position:absolute;top:68%;left:89%;display:block;}/* たたりもっけ */
  .youkai-name-21{position:absolute;top:10%;left:23%;display:block;}/* ごずき */
  .youkai-name-22{position:absolute;top:26%;left:3%;display:block;}/* ごずき */

  .youkai-name{width:3.5%;transition: all 0.5s}
  .youkai-name img{width:100%;display:block;}

  .youkai-name.icon-new:before{top:-4px;right:-4px;}
  .youkai-name.icon-new:after{top:-4px;right:-4px;}

  .yokai-img{position:relative;z-index:0;}


  #contents{padding-top:40px;}

  .background__wrap .cover-noclick{width:100vw;height:100vh;z-index:2;position:absolute;top:0;left:0;background:url(../img/top/cover-pattern.png);background-size:100px;}

}