@charset "utf-8";
/* CSS Document */

html,body{
   min-width:1270px;
}

body{
   background-color: rgba(76,60,52,1.00);
   background-image: url("../images/bg/bg_004.png");
}

.section_1st_wrap{
   position: relative;
   width: 100%;
   background-image: url("../images/bg/bg_003.png");
   background-repeat: repeat-y;
   background-size: 100% auto;
   padding: 10px 0;
}


.visual_wrap{
   position: relative;
   
   overflow: hidden;
   
   width: 100%;
   background-image: url("../images/bg/bg_002.png");
   background-repeat: repeat;
   /*padding-top: 10px;*/
}

.visual_wrap .waku_top_bg{
   position: absolute;
   top: 5px;
   left: 0;
   width: 100%;
   height: 60px;
   background-image: url("../images/bg/bg_003_top.png");
   background-position: center center;
   background-repeat: repeat-x;
   background-size: auto 100%;
   z-index: 10;
}

.visual_wrap .waku_under_bg{
   position: absolute;
   bottom: 5px;
   left: 0;
   width: 100%;
   height: 60px;
   background-image: url("../images/bg/bg_003_under.png");
   background-position: center center;
   background-repeat: repeat-x;
   background-size: auto 100%;
   z-index: 10;
}

#visual_wrap_inner{
   width: 90%;
   min-width: 1180px;
   max-width: 1920px;
   margin: auto;
   margin-top: -20px;
   display: flex;
   justify-content: space-between;
}

.visual_b_wrap{
   position: relative;
   overflow: hidden;
   width: 100%;
   z-index: 5;
}

.visual_b_wrap ol{
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   z-index: 6;
}

.visual_b_wrap li{
   width: 48%;
}

.bv01{
   display: block;
   cursor: pointer;
   z-index: 6;
}

.bv02{
   display: block;
   cursor: pointer;
   z-index: 6;
}


.glb_menu_wrap{
   position: relative;
   width: 100%;
   z-index: 17;
   background-color: rgba(249,240,225,1.00);
   border: rgba(80,60,53,1.00) 1px solid;
   border-top: none;
}

.glb_menu_wrap .logo{
   position: relative;
   width: 90%;
   top: 10px;
   margin-left: -20px;
}

.visual_core{
   width: 75%;
   margin: 10px auto 0 auto;
}

.visual_wrap .visual01{
   position: relative;
   width: 100%;
}

.masked-element03 {
   -webkit-mask-image: url("../images/top/v_004_mask.png");
   -webkit-mask-repeat: no-repeat;
   mask-image: url("../images/top/v_004_mask.png");
   mask-size: 100% 100%;
   mask-repeat: no-repeat;
}




.visual_wrap .logo{
   position: absolute;
   width: 42%;
   margin: auto;
   padding-right: 8%;
   left: 2%;
   top: 2%;
   z-index: 20;
}

.visual_wrap .logo.vc3logo{
   width: 42%;
   left: 1%;
   top: 5%;
}

.visual_wrap .logo.vc2logo{
   width: 38%;
   left: 1%;
   top: 3%;
}



.visual01 .vc2{
   position: absolute;
   width: 140%;
   top: 0;
   left: -22%;
   z-index: 4;
}

.visual01 .vc3{
   position: absolute;
   width: 180%;
   top: 0;
   left: -34%;
   z-index: 4;
}



.ch03{
   position: absolute;
   width: 15.5%;
   top: 6.5%;
   right: -10%;
   z-index: 6;
}

.ch02{
   position: absolute;
   width: 15.5%;
   top: 6.5%;
   right: -12%;
   z-index: 6;
}


/* =============================================================================
   グローバルメニュー
   ========================================================================== */
.global_menu_load{
   margin: 50px auto 50px auto;
}

.glb_menu{
   position: relative;
   width: 15%;
   z-index: 16;
   margin-bottom: 100px;
}

.glb_menu_wrap ol{
   margin: 0 auto 20px auto;
  list-style: none;
}
.glb_menu_wrap li{
   list-style: none;
   text-align: center;
   width: 120%;
   margin-left: -10%;
   margin-bottom: 8px;
   color: rgba(255,255,255,1.00);
   font-size: 110%;
   box-sizing: border-box;
}

.glb_menu_wrap li .menu_b{
   width: 75%;
   margin: auto;
   background-image: url("../images/menu/b_border.png");
   background-repeat: no-repeat;
   background-position: bottom center;
   background-size: 100% auto;
   padding-bottom: 7px;
}

.glb_menu_wrap li a{
   transition: color 0.5s;
   color: rgba(255,255,255,1.00);
   text-decoration: none;
   z-index: 104;
   padding-bottom: 10px;
   text-shadow: 2px 2px 3px rgba(12,114,185,1.00),
             -2px 2px 3px rgba(12,114,185,1.00),
             2px -2px 3px rgba(12,114,185,1.00),
             -2px -2px 3px rgba(12,114,185,1.00);
}

.glb_menu_wrap li a:hover{
   transition: color 0.5s;
   color: rgba(255,240,0,1.00);
}

.glb_menu_wrap li:hover{
   background-image: url("../images/menu/b_under.png");
   background-position: left bottom;
   background-repeat: no-repeat;
   background-size: 90% auto;
}

.glb_menu_wrap .select a{
   color: rgba(249,244,166,1.00);
}

.glb_menu .k01{
   width: 100%;
   margin: auto;
   padding-bottom: 10px;
   margin-bottom: 10px;
   background-image: url("../images/menu/b_border.png");
   background-repeat: no-repeat;
   background-position: bottom center;
   background-size: 100% auto;
}

.glb_menu_wrap .logo{
   position: relative;
   width: 240px;
   top: 10px;
   margin-left: -20px;
   z-index: 2;
}

.glb_menu_under{
   width: 100%;
   margin: auto;
   margin-top: -1px;
}


.b_jikkun_menu{
   width: 90%;
   margin: auto;
   margin-bottom: 20px;
}

.pv_wrap{
   position: relative;
   overflow: hidden;
   width: 100%;
   margin-bottom: 30px;
   margin-top: -20px;
}

.pv_wrap .inner{
   position: absolute;
   width: 88%;
   top: 12%;
   left: 5.8%;
   border: rgba(204,167,82,1.00) 2px solid;
   box-sizing: border-box;
}

.pv_b{
   position: absolute;
   width: 100%;
   top: 0;
   left: 0;
   background-color: rgba(215,0,15,0.75);
   background-image: url("../images/movie/p_000.png");
   background-position: center center;
   background-repeat: no-repeat;
   background-size: 100% 100%;
}

.pv_b:hover{
   background-color: rgba(215,0,15,0.45);
   background-image: url("../images/movie/p_000_hover.png");
}


  /* -----------------------------------------
   メニューFIX
   -----------------------------------------*/
.menufix{
  position: -webkit-sticky;
  position: sticky;
  top: 0px;
}





.obi_wrap{
   position: relative;
   overflow: hidden;
   width: 100%;
   background-image: url("../images/bg/bg_003.png");
   background-repeat: repeat-y;
   background-size: 100% auto;
}

.obi_inner{
   position: relative;
   overflow: hidden;
   background-color: rgba(76,60,52,1.00);
   margin-bottom: 10px;
}

.obi_inner .ch{
   position: relative;
   overflow: hidden;
   width: 80%;
   min-width: 1100px;
   margin: 20px auto;
}

.section_2nd_wrap{
   position: relative;
   overflow: hidden;
   width: 100%;
   margin: 0 auto;
   background-image: url("../images/bg/bg_001.png");
   background-size: 100% 100%;
}

.section_2nd_wrap .ch_wrap{
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   width: 40%;
   min-width: 700px;
   margin: 30px auto;
}

.under_wrap{
   position: relative;
   overflow: hidden;
   width: 100%;
   background-image: url("../images/bg/bg_003.png");
   background-repeat: repeat-y;
   background-size: 100% auto;
}

.under_wrap .inner{
   position: relative;
   width: 100%;
}

.section_2nd_wrap .chara_left{
   position: absolute;
   width: 33%;
   left: -30%;
   bottom: 8%;
}

.section_2nd_wrap .chara_right{
   position: absolute;
   width: 27%;
   right: -28%;
   bottom: 8%;
}

.under_inner{
   position: relative;
   background-color: rgba(255,255,255,1.00);
   background-image:url("../images/bg/k_002.png");
   background-position: center center;
   background-repeat: repeat-x;
   background-size: auto 50px;
   height: 90px;
   margin: 10px auto;
}

.footer{
   position: relative;
   overflow: hidden;
   width: 100%;
}

.footer .k001{
   width: 120px;
   margin: 20px auto 20px auto;
}

.footer .copy_top{
   text-align: center;
   color: rgba(255,255,255,1.00);
   font-weight: 600;
   font-size: 90%;
   margin-bottom: 50px;
}


.footer_bner_wrap{
   width: 1080px;
   margin: 20px auto auto auto;
   display: flex;
   justify-content: space-between;
}

.footer_bner_wrap li{
   width: 340px;
}

  /* -----------------------------------------
   インフォ枠
   -----------------------------------------*/
.info_wrap{
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;

   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   width: 1100px;
   margin: 30px auto;

}

.info_wrap .info_box{
   width: 48%;
}

.info_wrap .chara01{
   position: absolute;
   bottom: 40px;
   left: -60px;
   width: 13%;
}

.info_wrap .chara02{
   position: absolute;
   bottom: 50px;
   right: -50px;
   width: 10%;
}

.info_i01{
   width: 55%;
   margin: auto auto auto auto;
}

.info_more{
   width: 80%;
   margin: 10px auto 15px auto;
   padding: 20px 0 60px 0;
   text-align: center;
}

.info_more a{
   background-color: rgba(195,152,60,1.00);
   border-radius: 30px;
   color: rgba(255,255,255,1.00);
   text-decoration: none;
   padding: 5px 40px;
   font-size: 120%;
   font-weight: 600;
}

.info_wrap .info_box .w_bg{
   width: 100%;
   background-image:url("../images/top/w_news.png");
   background-position: top center;
   background-repeat: no-repeat;
   background-size: 100% 100%;
}

.news_inner{
   position: relative;
   width: 90%;
   margin: auto;
   padding: 60px 30px 60px 30px;
   box-sizing: border-box;
}

.twitter_inner{
   position: relative;
   width: 90%;
   margin: auto;
   padding: 60px 30px 60px 30px;
   box-sizing: border-box;
}


.update_area{
   position: relative;
   overflow: auto;
   width: 100%;
   height: 300px;
}

.news_sys .day{
   color: rgba(203,167,84,1.00);
   font-family: 'Noto Serif JP', serif; 
   font-size: 90%;
}

.news_sys .title{
   color: rgba(69,22,0,1.00);
   font-family: 'Noto Serif JP', serif; 
	font-weight:400 !important;
	line-height: 1.4 !important;
	font-size:90% !important;
   margin-bottom: 12px;
   padding-bottom: 7px;
   border-bottom: rgba(195,152,61,1.00) 2px dotted;
}

.news_sys .title a{
   color: rgba(69,22,0,1.00);
   text-decoration: none;
}

.b_more{
   position: relative;
   margin:  20px auto;
   text-align: center;
}

.b_more a{
   background-color: rgba(202,163,75,1.00);
   font-family: 'Noto Serif JP', serif;
   font-weight: 700;
   font-size: 120%;
   color: rgba(255,255,255,1.00);
   text-decoration: none;
   border-radius: 40px;
   padding: 1px 20px 4px 20px;
}

/* -----------------------------------------
   シェアボタン
   -----------------------------------------*/

.share_wrap{
	position:relative;
	width:200px;
	font-size:140%;
  padding-top: 20px;
	margin: auto;
}

/* -----------------------------------------
   モーダル
   -----------------------------------------*/

.modal_wrap{
  width: 900px;
  margin: auto;
}

.modal_wrap .p001{
	position: relative;
	overflow: hidden;
	width: 100%;
}

.modal_wrap .inner{
	background-color: rgba(0,117,170,1.00);
	font-family: "M PLUS Rounded 1c";
	color: rgba(255,255,255,1.00);
	padding: 20px 30px;
	font-size: 140%;
	line-height: 1.8;
	font-weight: 600;
}

.modal_wrap .mdlfoot{
	position: relative;
	overflow: hidden;
	width: 100%;
	background-image: url("../images/top/popup/p_002.jpg");
	background-position: center top;
	background-repeat: repeat;
}

.modal_wrap .mdllogo{
	width: 50%;
	margin: 50px auto 100px auto;
}

/* -----------------------------------------
   ローディング領域  
   -----------------------------------------*/
.op_load{
   width: 200px;
   margin:  20px auto;
   font-size: 140%;
   font-weight: 900;
   color: rgba(69,22,0,1.00);
   text-align: center;
}

.op_anime_wrap{
	position:fixed;
   top: 0;
   left: 0;
   width: 100%;
	height:100vh;
   height: calc(var(--vh, 1vh) * 100);
	z-index:99999;
   background-color: rgba(255,251,251,1.00);
   background-image: url("../images/bg/bg_002.png");
}

.op_anime_wrap .logo{
  position: fixed;
  top: 50%;
  left: 50%;
  width: 400px;
  margin-top: -100px;
  margin-left: -200px;
  text-align: center;
  z-index: 2;
}

/* ローディング点滅 */
.blinking{
	-webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:1;}
    100% {opacity:0;}
}
@-moz-keyframes blink{
    0% {opacity:1;}
    100% {opacity:0;}
}
@keyframes blink{
    0% {opacity:1;}
    100% {opacity:0;}
}


/* 〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
   タブレット版
   〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓 */

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

html,body{
   min-width:768px;
}

#visual_wrap_inner{
   width: 90%;
   min-width: 768px;
   max-width: 1024px;
   margin-top: -20px;
}

.obi_inner .ch{
   min-width: 95%;
}

.info_wrap{
   width: 98%;
}

.info_wrap .chara01{
   left: 0;
}

.info_wrap .chara02{
   right: 0;
}

.glb_menu_wrap{
   top: 20px;
}

.ch02{
   right: -5%;
   top: 10%;
}
.ch03{
   right: -5%;
   top: 10%;
}


.masked-element03 {
   -webkit-mask-image: url("../images/top/v_004_mask_tab.png");
   -webkit-mask-repeat: no-repeat;
   mask-image: url("../images/top/v_004_mask_tab.png");
   mask-size: 100% 100%;
   mask-repeat: no-repeat;
}

.footer_bner_wrap{
   width: 90%;
   margin: 20px auto auto auto;
   display: flex;
   justify-content: space-between;
}

.footer_bner_wrap li{
   width: 32%;
}


}



/* 〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
   スマホ版
   〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓 */

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

html,body{
	min-width:100%;
	max-width:100%;
  font-size: 100%;
	overflow: auto;
}


.section_1st_wrap{
   width: 100%;
   background-repeat: repeat-y;
   background-size: 100% auto;
   padding: 10px 0 5px 0;
}

#visual_wrap_inner{
   width: 100%;
   min-width: 100%;
   margin-top: -20px;
   display: block;
   justify-content: space-between;
   z-index: 3;
}

.glb_menu_wrap{
   display: none;
}

.glb_menu{
   display: none;
}

.visual_wrap{
   width: 100%;
   padding-top: 10px;
}

.visual_wrap .waku_top_bg{
   top: 5px;
   left: 0;
   width: 100%;
   height: 25px;
   background-size: auto 100%;
}

.visual_wrap .waku_under_bg{
   bottom: 5px;
   left: 0;
   width: 100%;
   height: 25px;
   background-size: auto 100%;
}


.visual_b_wrap{
   position: absolute;
   overflow: hidden;
   width: 90%;
   top: auto;
   bottom: 30px;
   left: 0;
   right: 0;
   margin: auto;
   z-index: 5;
}

.visual_b_wrap ol{
   display: flex;
   justify-content: space-between;
   z-index: 6;
}

.visual_b_wrap li{
   width: 15%;
}

.bv01{
   display: block;
   cursor: pointer;
   z-index: 6;
}

.bv02{
   display: block;
   cursor: pointer;
   z-index: 6;
}



.visual_core{
   width: 100%;
}

.visual_wrap .visual01{
   width: 100%;
   min-width: 100%;
   margin-top: 50px;
   /*padding-bottom: 80px;*/
   padding-bottom: 40px;
}

.visual_wrap .logo{
   position: absolute;
   width: 60%;
   margin: auto;
   padding: 0;
   left: 0;
   right: 0;
   bottom: 7%;
}

.visual_wrap .logo.v3logo{
   position: absolute;
   width: 40%;
   margin: auto;
   padding: 0;
   left: 10px;
   right: auto;
   bottom: auto;
}

.pv_wrap{
   position: relative;
   overflow: hidden;
   width: 80%;
   margin: auto;
   margin-bottom: 30px;
}

.obi_wrap{
   position: relative;
   overflow: hidden;
   width: 100%;
   background-image: url("../images/bg/bg_003.png");
   background-repeat: repeat-y;
   background-size: 100% auto;
}

.obi_inner{
   margin-bottom: 5px;
}

.obi_inner .ch{
   position: relative;
   overflow: hidden;
   width: 98%;
   min-width: 98%;
   margin: 0 auto;
}

.section_2nd_wrap{
   width: 100%;
   margin: 0 auto;
   background-size: 100% 100%;
}


.section_2nd_wrap .ch_wrap{
   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   width: 90%;
   min-width: 90%;
   margin: 30px auto;
}

.under_wrap{
   position: relative;
   overflow: hidden;
   width: 100%;
   background-image: url("../images/bg/bg_003.png");
   background-repeat: repeat-y;
   background-size: 100% auto;
}

.under_wrap .inner{
   position: relative;
   width: 100%;
}

.section_2nd_wrap .chara_left{
   position: absolute;
   width: 25%;
   left: -10px;
   bottom: -10px;
}

.section_2nd_wrap .chara_right{
   position: absolute;
   width: 23%;
   right: -10px;
   bottom: -10px;
}

.under_inner{
   position: relative;
   background-color: rgba(255,255,255,1.00);
   background-image:url("../images/bg/k_002.png");
   background-position: center center;
   background-repeat: repeat-x;
   background-size: auto 50px;
   height: 90px;
   margin: 10px auto;
}

.footer{
   position: relative;
   overflow: hidden;
   width: 100%;
}

.footer .k001{
   width: 120px;
   margin: 20px auto 20px auto;
}

.footer .copy_top{
   text-align: center;
   color: rgba(255,255,255,1.00);
   font-weight: 600;
   font-size: 90%;
   margin-bottom: 50px;
}



  /* -----------------------------------------
   インフォ枠
   -----------------------------------------*/
.info_wrap{
   display: block;
   justify-content: space-between;
   flex-wrap: wrap;

   position: absolute;
   top: 0;
   right: 0;
   left: 0;
   width: 98%;
   margin: 30px auto;

}

.b_jikkun_menu{
   width: 90%;
   margin: auto;
   margin-bottom: 20px;
}

.info_wrap .info_box{
   width: 100%;
   margin-bottom: 20px;
}


.update_area{
   position: relative;
   overflow: auto;
   width: 100%;
   height: 200px;
}


.news_inner{
   position: relative;
   width: 90%;
   margin: auto;
   padding: 40px 10px 40px 10px;
   box-sizing: border-box;
}

.twitter_inner{
   position: relative;
   width: 90%;
   margin: auto;
   padding: 40px 10px 40px 10px;
   box-sizing: border-box;
   font-size: 90%;
}



.under_wrap{
   width: 100%;
   background-size: 100% auto;
}

.under_inner{
   background-size: auto 25px;
   height: 40px;
   margin: 5px auto;
}

.footer{
   position: relative;
   overflow: hidden;
   width: 100%;
}

.footer .k001{
   width: 120px;
   margin: 20px auto 20px auto;
}

.footer .copy_top{
   text-align: center;
   color: rgba(255,255,255,1.00);
   font-weight: 600;
   font-size: 90%;
   margin-bottom: 50px;
}


.footer_bner_wrap{
   width: 80%;
   margin: 20px auto auto auto;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}

.footer_bner_wrap li{
   width: 100%;
   margin-bottom: 20px;
}


/* -----------------------------------------
   モーダル
   -----------------------------------------*/

.modal_wrap{
  width: 100%;
  margin: auto;
}

.modal_wrap .p001{
	position: relative;
	overflow: hidden;
	width: 100%;
}

.modal_wrap .inner{
	background-color: rgba(0,117,170,1.00);
	font-family: "M PLUS Rounded 1c";
	color: rgba(255,255,255,1.00);
	padding: 20px 20px;
	font-size: 100%;
	line-height: 1.6;
	font-weight: 600;
}

.modal_wrap .mdlfoot{
	position: relative;
	overflow: hidden;
	width: 100%;
	background-image: url("../images/top/popup/p_002.jpg");
	background-position: center top;
	background-repeat: repeat;
}

.modal_wrap .mdllogo{
	width: 50%;
	margin: 50px auto 100px auto;
}


/* -----------------------------------------
   ローディング領域  
   -----------------------------------------*/
.op_load{
   width: 100%;
   text-align: center;
}

.op_anime_wrap{
	height:100vh;
   height: calc(var(--vh, 1vh) * 100);
}

.op_anime_wrap .logo{
  position: fixed;
  top: 50%;
  left: 50%;
  width: 300px;
  margin-top: -70px;
  margin-left: -150px;
  text-align: center;
  z-index: 2;

}



}