/* ====================================================================
   ベース
   ==================================================================== */

html, body {
   height: 100%;
}
 
body > footer {
  position: sticky;
  top: 100vh;
}

main{
   position: relative;
   overflow: hidden;
   width: 100%;
}

main.page_fix{
   overflow: visible;
}

.wrapper{
   position: relative;
   z-index: 2;
   padding-top: 140px;
}
   @media screen and (max-width: 1200px) {
      .wrapper{
        padding-top: 120px;
      } 
   }
   @media screen and (max-width: 600px) {
      .wrapper{
        padding-top: 80px;
      } 
   }


/* ====================================================================
   ヘッダ
   ==================================================================== */
header{
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   transition: all 1s;
   z-index: 230;
}
   @media screen and (max-width: 600px) {
      header {
         background-size: 200% auto;
      } 
   }


header.is-head{
   background-color: rgba(255,255,255,0.90);
   background-position: top center;
   background-size: 100% auto;
}

.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;
}


/* ====================================================================
   基本ページ
   ==================================================================== */

.page_wrap{
   position: relative;
   width: 100%;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}

.page_wrap .left_wrap{
   position: relative;
   width: min(20% , 380px);
}
   @media screen and (max-width: 1600px) {
      .page_wrap .left_wrap{
        width: 20%;
      } 
   }
   @media screen and (max-width: 1200px) {
      .page_wrap .left_wrap{
        width: 20%;
      } 
   }
   @media screen and (max-width: 800px) {
      .page_wrap .left_wrap{
        width: 100%;
      } 
   }


.page_wrap .center_wrap{
   position: relative;
   width: min(60% , 900px);
   margin: 0 auto 0 auto;
}
   @media screen and (max-width: 1400px) {
      .page_wrap .center_wrap{
        width: 65%;
      } 
   }
   @media screen and (max-width: 1200px) {
      .page_wrap .center_wrap{
        width: 70%;
      } 
   }
   @media screen and (max-width: 1024px) {
      .page_wrap .center_wrap{
        width: 75%;
      } 
   }
   @media screen and (max-width: 800px) {
      .page_wrap .center_wrap{
        width: 90%;
      } 
   }



.page_wrap .right_wrap{
   position: relative;
   width: 20%;
}
   @media screen and (max-width: 1400px) {
      .page_wrap .right_wrap{
        width: 15%;
      } 
   }
    @media screen and (max-width: 1200px) {
      .page_wrap .right_wrap{
        width: 10%;
      } 
   }
  
   @media screen and (max-width: 1024px) {
      .page_wrap .right_wrap{
        display: none;
      } 
   }

.logo_main{
   position: relative;
   width: 100%;
}
   @media screen and (max-width: 800px) {
      .logo_main{
        width: 145px;
      } 
   }
   @media screen and (max-width: 600px) {
      .logo_main{
        width: 100px;
      } 
   }

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

.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%;
   margin-bottom: 5px;
}
   @media screen and (max-width: 1200px) {
      .bar_under{
        height: 30px;
      } 
   }


/* ====================================================================
   ページタイトル
   ==================================================================== */

.page_title_wrap{
   font-family: 'Zen Maru Gothic', serif;
   position: relative;
   width: 100%;
   margin: 40px auto 30px auto;
   color: rgba(80,55,20,1.00);
   display: flex;
   justify-content: flex-start;
   align-items: center;
}
   @media screen and (max-width: 480px) {
      .page_title_wrap{
        margin: 20px auto 20px auto;
      } 
   }

.b_page_back_title{
   position: absolute;
   bottom: 0;
   right: 10px;
   width: 90px;
}
   @media screen and (max-width: 600px) {
      .b_page_back_title{
        width: 60px;
      } 
   }


.page_title_wrap .page_i01{
   font-size: 240%;
   font-weight: 500;
   letter-spacing: 10px;
   padding-right: 10px;
   line-height: 1;
}
   @media screen and (max-width: 480px) {
      .page_title_wrap .page_i01{
        font-size: 6.5vw;
        letter-spacing: 6px;
      } 
   }



.page_title_wrap .page_i02{
   font-size: 120%;
   padding-top: 6px;
   font-weight: 600;
}
   @media screen and (max-width: 480px) {
      .page_title_wrap .page_i02{
        font-size: 4.5vw;
      } 
   }


/* ====================================================================
   ニュースページ
   ==================================================================== */

.news_wrap{
   position: relative;
   width: 100%;
   border: rgba(226,225,204,1.00) 2px solid;
   border-radius: 15px;
   background-color: rgba(255,255,255,1.00);margin-bottom: 60px;
}

.news_list_index{
   position: relative;
   width: 100%;
   padding: 20px 30px 0 30px;
   font-weight: 600;
   letter-spacing: 8px;
   font-size: 100%;
   color: rgba(79,55,21,1.00);
}
   @media screen and (max-width: 600px) {
      .news_list_index{
        padding: 20px 30px 0 20px;
      } 
   }


.news_inner{
   position: relative;
   width: 100%;
   padding: 40px 100px 40px 100px;
}
   @media screen and (max-width: 1024px) {
      .news_inner{
        padding: 40px 40px 40px 40px;
      } 
   }
   @media screen and (max-width: 600px) {
      .news_inner{
        padding: 20px 20px 40px 20px;
      } 
   }


.news_list_wrap{
   position: relative;
   width: 100%;
   padding: 20px 0;
   border-bottom: rgba(210,204,188,1.00) 2px solid;
}

.news_list_box{
   padding: 10px 0;
   border-left: rgba(246,159,0,1.00) 10px solid;
}

.news_list_box .day{
   padding-left: 15px;
   color: rgba(246,159,0,1.00);
   font-family: 'M PLUS Rounded 1c', sans-serif;
   font-size: 90%;
   font-weight: 600;
   transform: rotate(0.03deg);
}

.news_list_box .title{
   padding-left: 15px;
   font-family: 'Zen Maru Gothic', serif;
   font-weight: 600;
}

a .news_list_box .title{
   color: rgba(0,0,0,1.00);
}

.news_list_bar{
   border-top: rgba(210,204,188,1.00) 2px solid;
}

.news_title_wrap{
   position: relative;
   width: 100%;
   padding: 60px 80px 40px 80px;
}
   @media screen and (max-width: 1024px) {
      .news_title_wrap{
        padding: 40px 40px 20px 40px;
      } 
   }
   @media screen and (max-width: 600px) {
      .news_title_wrap{
        padding: 20px 20px 20px 20px;
      } 
   }


.news_title_wrap .day{
   color: rgba(245,160,0,1.00);
   font-family: 'M PLUS Rounded 1c', sans-serif;
   font-size: 100%;
   font-weight: 600;
   transform: rotate(0.03deg);
}

.news_title_wrap .news_title{
   font-family: 'M PLUS Rounded 1c', sans-serif;
   font-size: 160%;
   font-weight: 600;
   transform: rotate(0.03deg);
}
   @media screen and (max-width: 1024px) {
      .news_title_wrap .news_title{
        font-size: 130%;
      } 
   }
   @media screen and (max-width: 600px) {
      .news_title_wrap .news_title{
        font-size: 3.8vw;
      } 
   }


.news_title_bar{
   position: relative;
   width: 90%;
   margin: 0 auto 0 auto;
   border-bottom: rgba(168,155,130,1.00) 2px solid;
}
   @media screen and (max-width: 800px) {
      .news_title_bar{
      } 
   }
   @media screen and (max-width: 600px) {
      .news_title_bar{
      } 
   }


.news_kiji{
   line-height: 1.8;
   color: rgba(76,60,52,1.00);
}

.b_page_back{
   position: relative;
   width: 180px;
   margin: 0 auto 50px auto;
}
   @media screen and (max-width: 600px) {
      .b_page_back{
         width: 150px;
         margin: 0 auto 50px auto;
      } 
   }


/* 追加*/
.ns_01_wrap{
   position: relative;
   display: flex;
   width: 100%;
   margin-top: 7px;
   gap: 10px 1%;
   flex-wrap: wrap;
}

.ns_01_wrap li{
   position: relative;
   width: 32%;
   border: rgba(235,85,20,1.00) 1px solid;
   background-color: rgba(200,160,99,0.3);
}
   @media screen and (max-width: 600px) {
      .ns_01_wrap li{
         width: 49%;
      } 
   }

.ns_01_wrap .pic{
   position: relative;
   width: 100%;
   aspect-ratio: 1 / 1;
   background-color: rgba(245,241,234,1.00);
}

.ns_01_wrap .pic img{
   width: 100%;
   height: 100%;
   object-fit: contain;
}

.ns_01_wrap .name{
   border-top: rgba(235,85,20,1.00) 1px solid;
   text-align: center;
   font-weight: 600;
   line-height: 1.4;
   padding: 6px 10px
}

a.ns_link01{
   background-color: rgba(235,85,20,1.00);
   color: rgba(255,255,255,1.00);
   font-weight: 600;
   padding: 10px 15px;
   border-radius: 30px;
}

/* ====================================================================
   原作ページ
   ==================================================================== */
.comics_inner{
   position: relative;
   width: 100%;
   padding: 40px 50px 40px 50px;
}
   @media screen and (max-width: 800px) {
      .comics_inner{
        padding: 40px 40px 40px 40px;
      } 
   }
   @media screen and (max-width: 600px) {
      .comics_inner{
        padding: 20px 20px 20px 20px;
      } 
   }