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


/* ====================================================================
   ヘッダ
   ==================================================================== */
header{
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   background-color: rgba(0,0,0,1.00);
   background-image: url("../images/bg/bg_002.jpg");
   background-position: top center;
   background-size: 100% auto;
   opacity: 0;
   transition: all 1s;
   margin-top: -100px;
   z-index: 230;
   border-bottom: rgba(104,192,217,1.00) 4px solid;
}

/* ヘッダ背景 */
header.is-head{
   opacity: 1;
   transition: all 1s;
   z-index: 230;
   margin-top: 0;
}


/* ヘッダインナー */
header .inner{
   position: relative;
   display: flex;
   justify-content: space-between;
   width: calc(100% - 150px);
   height: 100px;
   align-items: center;
   z-index: 240;
   transition: all 1s;
}
   @media screen and (max-width: 1200px) {
      header .inner{
        height: 80px;
        width: calc(100% - 10px - 90px);
      } 
   }
   @media screen and (max-width: 1024px) {
      header .inner{
         height: 80px;
         width: calc(100% - 10px - 80px);
      } 
   }
   @media screen and (max-width: 480px) {
      header .inner{
         height: 60px;
         width: calc(100% - 10px - 80px);
      } 
   }


/* ヘッダロゴ */
header .logo{
   position: absolute;
   top: 7px;
   left: 2%;
   width: 170px;
   margin: auto;
   opacity: 0;
   transition: all 1s;
   z-index: 250;
}
   @media screen and (max-width: 1200px) {
      header .logo{
         width: 130px;
         left: 1%;
         top: 7px;
      } 
   }
   @media screen and (max-width: 1024px) {
      header .logo{
         width: 130px;
      } 
   }
   @media screen and (max-width: 600px) {
      header .logo{
     } 
   }
   @media screen and (max-width: 480px) {
      header .logo{
         width: 96px;
      } 
   }


header.is-head .logo{
   opacity: 1;
   transition: all 1s;
}
   @media screen and (max-width: 1200px) {
      header.is-head .logo{
         width: 130px;
      } 
   }
   @media screen and (max-width: 1024px) {
      header.is-head .logo{
         width: 130px;
         left: 1%;
      } 
   }
   @media screen and (max-width: 600px) {
      header.is-head .logo{
          left: 1%;
      } 
   }
   @media screen and (max-width: 480px) {
      header.is-head .logo{
          width: 96px;
      } 
   }



header .menu.is-head{
   width: calc(100% - 300px);
}
   @media screen and (max-width: 1200px) {
      header .menu.is-head{
         width: calc(100% - 230px);
      } 
   }


header .menu{
   position: relative;
   margin: 0 0 0 auto;
   width: calc(100% - 35%);
   box-sizing: border-box;
}
   @media screen and (max-width: 1200px) {
      header .menu{
         width: calc(100% - 39%);
      } 
   }
   @media screen and (max-width: 1024px) {
      header .menu{
         display: none;
      } 
   }




.gmenu_wrap_pc ol{
   width: 100%;
   list-style: none;
   display: flex;
   justify-content: flex-end;
   flex-wrap: wrap;
   gap: 0 30px;
}
   @media screen and (max-width: 1200px) {
      header .menu.is-head{
         gap: 0 10px;
      } 
   }


.gmenu_wrap_pc ol li{
   position: relative;
   line-height: 1.6;
   font-size: 110%;
   padding-left: 1.2em;
}
   @media screen and (max-width: 1200px) {
      .gmenu_wrap_pc ol li{
         font-size: 90%;
      } 
   }


.gmenu_wrap_pc ol li a{
   border-bottom: rgba(255,255,255,0.00) 1px solid;
}

.gmenu_wrap_pc ol li.select a{
   color: rgba(49,196,181,1.00);
}




.gmenu_wrap_pc ol li a{
  color: rgba(0,0,0,1.00);
   text-decoration: none;
   padding: 0;
   font-weight: 600;
   letter-spacing: 2px;
   display: block;
   transition: all 1s;
}
   @media screen and (max-width: 1200px) {
      .gmenu_wrap_pc ol li a{
         letter-spacing: 0px;
      } 
   }


.is-head .gmenu_wrap_pc ol li a{
   transition: all 1s;
}

.view {
  opacity: 0;
  -webkit-transition: all .5s ease-in-out;
  transition: all .5s ease-in-out;
}
.view.active{
   opacity: 1;
}

.overflow_wrap{
   position: relative;
   overflow: hidden;
}

.main{
   position: relative;
   width: 100%;
}

/* ====================================================================
   フッター追加要素
   ==================================================================== */

footer .k_foot_bg{
   position: absolute;
   width: 40%;
   bottom: 0;
   left: 10%;
}
   @media screen and (max-width: 1024px) {
      footer .k_foot_bg{
         width: 70%;
         left: 20%;
      } 
   }
   @media screen and (max-width: 600px) {
      footer .k_foot_bg{
         width: 95%;
         left: 5%;
      } 
   }

/* ====================================================================
   トップセクション
   ==================================================================== */

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


.visual_01{
   position: relative;
   width: 100%;
}
   @media screen and (max-width: 600px) {
      .visual_01{
         display: none;
      } 
   }


.visual_mobile_wrap{
   display: none;   
}

   @media screen and (max-width: 600px) {
      .visual_mobile_wrap{
         display: block;
         position: relative;
         width: 100%;
         overflow-x: auto;
      } 
   }



.visual_mobile_01{
   display: none;
}
   @media screen and (max-width: 600px) {
      .visual_mobile_01{
         display: block;
         width: 180%;
      } 
   }



.visual_upper{
   position: absolute;
   width: 4%;
   left: 0;
   ackground-color: rgba(0,0,0,0.60);
   z-index: 200;
}

/* スクロール指定 */
.fixed-element {
   position: fixed;
   left: 10px;
   width: calc(100% - 120px);
}
   @media screen and (max-width: 600px) {
      .fixed-element{
         position: absolute !important;
         top: 0 !important;
         left: 0;
         z-index: 10;
         width: calc(100% - 70px);
      } 
   }


.fixed_container{
   position: relative;
   width: 100%;
}

.main_logo{
   position: relative;
   width: 24%;
   margin: 20px 20px 0 0;
}
   @media screen and (max-width: 600px) {
      .main_logo{
         width: 53%;
         margin: 10px 0 0 0;
      } 
   }

.main_ch02-02{
   position: absolute;
   width: 4.2%;
   top: 120%;
   left: 4.5%;
}
   @media screen and (max-width: 600px) {
      .main_ch02-02{
         width: 9.2%;
         left: 7%;
         top: 120%;
      } 
   }



.main_ch_wrap{
   position: absolute;
   width: 28%;
   top: 30px;
   right: 0;
}
   @media screen and (max-width: 600px) {
      .main_ch_wrap{
         top: 30px;
         width: 35%;
         right: 0%;
      } 
   }
   @media screen and (max-width: 480px) {
      .main_ch_wrap{
         top: 30px;
         width: 40%;
         right: 0%;
      } 
   }



.main_ch{
   position: relative;
   width: 80%;
   float: right;
}
   @media screen and (max-width: 600px) {
      .main_ch{
         width: 100%;
         
      } 
   }



.main_ch02{
   position: relative;
   width: calc(100% + 5.5%);
   top: 10px;
   left: 17%;
}
   @media screen and (max-width: 600px) {
      .main_ch02{
         width: calc(100% + 50px);
         left: 10px;
         top: 10px;
      } 
   }


/* ====================================================================
   インフォセクション
   ==================================================================== */

.info_wrap{
   position: relative;
   width: 100%;
   background-color: rgba(241,240,222,1.00);
}

.info_k_top{
   position: absolute;
   width: 100%;
   top: -5px;
   left: 0;
   height: 40px;
   background-image: url("../part1_images/tmp/bar_under.png");
   background-position: top center;
   background-repeat: repeat-x;
   background-size: auto 100%;
}
   @media screen and (max-width: 1200px) {
      .info_k_top{
         height: 30px;
      } 
   }
   @media screen and (max-width: 600px) {
      .info_k_top{
         top: -2px;
      } 
   }


.info_k_bottom{
   position: absolute;
   width: 100%;
   bottom: -12px;
   left: 0;
   height: 40px;
   background-image: url("../part1_images/tmp/bar_under.png");
   background-position: top center;
   background-repeat: repeat-x;
   background-size: auto 100%;
   z-index: 10;
}
   @media screen and (max-width: 1200px) {
      .info_k_bottom{
         height: 30px;
      } 
   }


.info_content_wrap{
   position: relative;
   width: min(95% , 1200px);
   margin: auto;
   padding: 80px 0 80px 0;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}

.info_content_wrap .left_wrap{
   position: relative;
   width: 60%;
}
   @media screen and (max-width: 900px) {
      .info_content_wrap .left_wrap{
         width: 100%
      } 
   }


.info_content_wrap .right_wrap{
   position: relative;
   width: 35%;
}
   @media screen and (max-width: 900px) {
      .info_content_wrap .right_wrap{
         position: absolute;
         top: 15%;
         right: -2.5%;
         width: 23%;
      } 
   }
   @media screen and (max-width: 700px) {
      .info_content_wrap .right_wrap{
         position: absolute;
         top: 20%;
      } 
   }
   @media screen and (max-width: 600px) {
      .info_content_wrap .right_wrap{
         top: 13%;
         width: 35%;
      }
      .twitter_wrap img{
         filter: drop-shadow(0 0 0.75rem rgba(255,255,255,1.00));
      }
   }



.info_title{
   font-family: 'M PLUS Rounded 1c', sans-serif;
   transform: rotate(0.03deg);
   color: rgba(79,54,18,1.00);
}
.info_title span.index{
   font-size: 140%;
   font-weight: 500;
   letter-spacing: 8px;
   padding-right: 0.5em;
}
   @media screen and (max-width: 600px) {
      .info_title span.index{
         font-size: 4.5vw;
         letter-spacing: 4px;
      } 
   }


.info_title span.index_jp{
   font-size: 90%;
   font-weight: 500;
   letter-spacing: 5px;
}
   @media screen and (max-width: 600px) {
      .info_title span.index_jp{
         font-size: 2.5vw;
         letter-spacing: 2px;
      } 
   }


.info_news_wrap{
   position: relative;
   width: 100%;
   height: 230px;
   background-color: rgba(249,248,236,1.00);
   padding: 30px;
   border-radius: 10px;
}
   @media screen and (max-width: 600px) {
      .info_news_wrap{
         height: 380px;
      } 
   }

.info_news_wrap .b_allnews{
   position: absolute;
   width: 180px;
   right: 20px;
   bottom: -9%;
}
   @media screen and (max-width: 600px) {
      .info_news_wrap .b_allnews{
         width: 180px;
         bottom: -6%;
      } 
   }


/* ニュースリスト */
.news_box{
   position: relative;
   overflow: auto;
   box-sizing: border-box;
   width: 95%;
   height: 100%;
   margin: auto;
}

.news_box article{
   position: relative;
   width: 100%;
   margin-bottom: 15px;
}

.news_list_box{
   position: relative;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   align-items: center;
   padding: 0 15px 20px 15px;
   border-bottom: rgba(208,201,183,1.00) 1px solid;
}

a .news_list_box .day{
   font-family: 'Zen Maru Gothic', serif;
   color: rgba(234,85,20,1.00);
   font-weight: 600;
   width: 90px;
}
   @media screen and (max-width: 600px) {
      a .news_list_box .day{
         width: 100%;
      } 
   }


a .news_list_box .title{
   font-family: 'Zen Maru Gothic', serif;
   color: rgba(31,27,34,1.00);
   width: calc(100% - 100px);
   font-weight: 600;
}
   @media screen and (max-width: 600px) {
      a .news_list_box .title{
         width: 100%;
      } 
   }



.twitter_wrap{
   position: absolute;
   width: 100%;
   top: -80px;
   right: 0;
}
   @media screen and (max-width: 600px) {
      .twitter_wrap{
         top: -73px;
      } 
   }


/* ====================================================================
   スタッフ＆キャスト
   ==================================================================== */

.staff_wrap{
   position: relative;
   overflow: hidden;
   background-image: url("../part1_images/tmp/bg_dot_w_15.png"), url("../part1_images/top/bg_staff.jpg");
   background-position: center, center top 25%;
   background-size: 3% auto, cover;
   text-shadow: 0px 1px 4px #000000;
}
   @media screen and (max-width: 600px) {
      .staff_wrap{
         background-image: url("../part1_images/tmp/bg_dot_w_15.png"), url("../part1_images/top/bg_staff_m.jpg");
         background-position: center, left top;
         background-size: 10% auto, cover;
	      text-shadow: 0px 1px 4px #000000;
      } 
   }



.staff_title{
   position: relative;
   width: 100%;
   margin: 100px auto 60px auto;
   text-align: center;
}
   @media screen and (max-width: 600px) {
      .staff_title{
         margin: 60px auto 40px auto;
      } 
   }


.staff_title .i_title{
   font-family: 'Zen Maru Gothic', serif;
   font-size: 240%;
   transform: rotate(0.03deg);
   color: rgba(237,236,214,1.00);
   letter-spacing: 5px;
   line-height: 1.4;
}
   @media screen and (max-width: 600px) {
      .staff_title .i_title{
         font-size: 7vw;
         letter-spacing: 2px;
      } 
   }
.staff_title .i_title_jp{
   font-family: 'Zen Maru Gothic', serif;
   font-size: 100%;
   font-weight: 600;
   transform: rotate(0.03deg);
   color: rgba(245,162,0,1.00);
   letter-spacing: 4px;
   line-height: 1.4;
}
   @media screen and (max-width: 600px) {
      .staff_title .i_title_jp{
         font-size: 3vw;
         letter-spacing: 2px;
      } 
   }

.staff_flex_wrap{
   position: relative;
   width: min(98% , 1100px);
   margin: auto;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}

.staff_flex_wrap .left_staff{
   position: relative;
   width: 58%;
   margin-bottom: 60px;
   text-align: center;
}
   @media screen and (max-width: 600px) {
      .staff_flex_wrap .left_staff{
         width: 100%;
      } 
   }


.staff_flex_wrap .right_cast{
   position: relative;
   width: 42%;
   margin-bottom: 60px;
   text-align: center;
}
   @media screen and (max-width: 600px) {
      .staff_flex_wrap .right_cast{
         width: 100%;
      } 
   }


.staff_flex_wrap .i_index{
   font-family: 'Zen Maru Gothic', serif;
   transform: rotate(0.03deg);
   color: rgba(234,85,20,1.00);
   font-size: 120%;
   font-weight: 600;
   margin-bottom: 40px;
   letter-spacing: 5px;
}
   @media screen and (max-width: 480px) {
      .staff_flex_wrap .i_index{
         font-size: 5.5vw;
         margin-bottom: 30px;
      } 
   }


.staff_flex_wrap .credit_box{
   margin-bottom: 50px;
   text-align: center;
}
   @media screen and (max-width: 600px) {
      .staff_flex_wrap .credit_box{
         margin-bottom: 30px;
      } 
   }


.staff_flex_wrap .credit_box .positin{
   font-family: 'Zen Maru Gothic', serif;
   font-size: 100%;
   font-weight: 500;
   transform: rotate(0.03deg);
   color: rgba(245,162,0,1.00);
   letter-spacing: 4px;
}
   @media screen and (max-width: 480px) {
      .staff_flex_wrap .credit_box .positin{
         font-size: 4vw;
      } 
   }


.staff_flex_wrap .credit_box .name{
   font-family: 'Zen Maru Gothic', serif;
   font-size: 150%;
   font-weight: 500;
   transform: rotate(0.03deg);
   color: rgba(255,255,255,1.00);
   letter-spacing: 4px;
   line-height: 1.2;
}
   @media screen and (max-width: 480px) {
      .staff_flex_wrap .credit_box .name{
         font-size: 5.5vw;
      } 
   }

.staff_flex_wrap .credit_box .corp{
   font-family: 'Zen Maru Gothic', serif;
   font-size: 80%;
   font-weight: 500;
   transform: rotate(0.03deg);
   color: rgba(255,255,255,1.00);
   line-height: 1.2;
}
   @media screen and (max-width: 480px) {
      .staff_flex_wrap .credit_box .corp{
         font-size: 3.0vw;
      } 
   }


/* ====================================================================
   ポータル領域
   ==================================================================== */

.portal_wrap{
   position: relative;
   width: 100%;
   background-image: url("../part1_images/tmp/bg_002.jpg");
   background-size: 100% auto;
   padding-bottom: 5px;
}

.portal_k_top{
   position: absolute;
   width: 100%;
   top: -5px;
   left: 0;
   height: 40px;
   background-image: url("../part1_images/tmp/bar_under.png");
   background-position: top center;
   background-repeat: repeat-x;
   background-size: auto 100%;
}
   @media screen and (max-width: 1200px) {
      .portal_k_top{
         height: 30px;
      } 
   }



.portal_title{
   position: relative;
   width: 100%;
   padding: 100px 0 60px 0;
   text-align: center;
}
   @media screen and (max-width: 600px) {
      .portal_title{
         padding: 60px 0 30px 0;
      } 
   }


.portal_title .i_title{
   font-family: 'Zen Maru Gothic', serif;
   font-size: 240%;
   font-weight: 500;
   transform: rotate(0.03deg);
   color: rgba(36,23,11,1.00);
   letter-spacing: 5px;
   line-height: 1.4;
}
   @media screen and (max-width: 600px) {
      .portal_title .i_title{
         font-size: 7vw;
         letter-spacing: 2px;
      } 
   }

.portal_title .i_title_jp{
   font-family: 'Zen Maru Gothic', serif;
   font-size: 100%;
   font-weight: 600;
   transform: rotate(0.03deg);
   color: rgba(36,23,11,1.00);
   letter-spacing: 4px;
   line-height: 1.4;
}
   @media screen and (max-width: 600px) {
      .portal_title .i_title_jp{
         font-size: 3vw;
         letter-spacing: 2px;
      } 
   }


.portal_bn_wrap{
   position: relative;
   width: min(98% , 1200px);
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   margin: auto;
   padding-bottom: 40px;
}
   @media screen and (max-width: 600px) {
      .portal_bn_wrap{
         width: 95%
      } 
   }


.portal_bn_wrap li{
   width: 32.5%;
   margin-bottom: 20px;
}

.portal_bn_wrap li .bn_pic{
   position: relative;
   width: 100%;
   border: rgba(0,0,0,1.00) 1px solid;
}

.portal_bn_wrap li .bn_index{
   font-family: 'Zen Maru Gothic', serif;
   font-size: 80%;
   font-weight: 600;
   transform: rotate(0.03deg);
   color: rgba(36,23,11,1.00);
   letter-spacing: 5px;
   line-height: 1.4;
   text-align: left;
}


.bar_under{
   position: relative;
   width: 100%;
   height: 40px;
   background-image: url("../part1_images/tmp/bar_under.png");
   background-position: left top;
   background-repeat: repeat-x;
   background-size: auto 100%;
}
   @media screen and (max-width: 1200px) {
      .bar_under{
        height: 30px;
      } 
   }
   @media screen and (max-width: 600px) {
      .bar_under{
        height: 30px;
      } 
   }