
/* ====================================================================
   ベース
   ==================================================================== */

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: 160px;
}
   @media screen and (max-width: 1200px) {
      .wrapper{
        padding-top: 120px;
      } 
   }
   @media screen and (max-width: 600px) {
      .wrapper{
        padding-top: 80px;
      } 
   }

.bg_001{
   background-color: rgba(252,215,218,1.00);
   background-image: url("../images/tmp/bg_k_001.png");
   background-position: center;
   background-size: 200px auto;
}

/* ====================================================================
   ヘッダ
   ==================================================================== */
header{
   position: fixed;
   top: 0;
   left: 0;
   width: 100%;
   background-color: rgba(255,255,255,1.00);
   background-image: url("../images/tmp/bg_head.png");
   background-repeat: repeat-x;
   background-position: center top;
   background-size: 360px auto;
   transition: all 1s;
   z-index: 230;
}
   @media screen and (max-width: 1200px) {
      header {
         background-size: 250px auto;
      } 
   }
   @media screen and (max-width: 1024px) {
      header {
         background-size: 200px auto;
      } 
   }
   @media screen and (max-width: 600px) {
      header {
         background-size: 180px auto;
      } 
   }



/* ヘッダインナー */
header .inner{
   position: relative;
   display: flex;
   justify-content: space-between;
   width: calc(100% - 150px);
   margin: auto;
   align-items: center;
   z-index: 240;
   transition: all 1s;
}
   @media screen and (max-width: 600px) {
      header .inner{
         width: 100%;
      } 
   }


/* ヘッダロゴ */
header .main_logo{
   position: relative;
   width: 300px;
   margin: auto;
   padding: 20px 0 15px 0;
   transition: all 1s;
   z-index: 250;
}
   @media screen and (max-width: 1200px) {
      header .main_logo{
         width: 200px;
      } 
   }
   @media screen and (max-width: 1024px) {
      header .main_logo{
         padding: 10px 0 10px 0;
         width: 180px;
      } 
   }
   @media screen and (max-width: 600px) {
      header .main_logo{
         margin: 0 0 0 10px;
         padding: 10px 0 5px 0;
         width: 130px;
      } 
   }


header.is-head .main_logo{
   width: 200px;
   padding: 10px 0 10px 0;
   transition: all 1s;
   z-index: 250;
}
   @media screen and (max-width: 1200px) {
      header.is-head .main_logo{
         width: 150px;
      } 
   }
   @media screen and (max-width: 1024px) {
      header.is-head .main_logo{
         width: 120px;
      } 
   }
   @media screen and (max-width: 600px) {
      header.is-head .main_logo{
         margin: 0 0 0 10px;
         padding: 10px 0 5px 0;
         width: 130px;
      } 
   }


.head_k_bottom{
   position: relative;
   width: 100%;
   height: 15px;
   background-color: rgba(252,215,218,1.00);
   background-image: url("../images/tmp/head_k01.png");
   background-repeat: repeat-x;
   background-position: center;
   background-size: auto 100%;
   transition: all 1s;
}
   @media screen and (max-width: 1200px) {
      .head_k_bottom{
         height: 12px;
      } 
   }
   @media screen and (max-width: 600px) {
      .head_k_bottom{
         height: 10px;
      } 
   }


header.is-head .head_k_bottom{
   height: 13px;
}
   @media screen and (max-width: 600px) {
      header.is-head .head_k_bottom{
         height: 10px;
      } 
   }


.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;
}



/* ====================================================================
   基本ページ
   ==================================================================== */
.content_wrap{
   position: relative;
   width: min(98% , 1100px);
   margin: 0 auto auto auto;
}
   @media screen and (max-width: 1200px) {
      .content_wrap{
         width: 94%;
      } 
   }
   @media screen and (max-width: 800px) {
      .content_wrap{
      } 
   }
   @media screen and (max-width: 600px) {
      .content_wrap{
         width: 94%;
      } 
   }
   

.content_waku_wrap{
   position: relative;
   width: 100%;
   border: rgba(0,0,0,1.00) 1px solid;
   border-radius: 60px;
   padding: 40px;
   box-sizing: border-box;
   background-color: rgba(255,255,255,1.00);
   margin-bottom: 60px;
}
   @media screen and (max-width: 600px) {
      .content_waku_wrap{
         padding: 30px 20px 40px 20px;
         border-radius: 30px;
      } 
   }


/* ====================================================================
   1列レイアウト
   ==================================================================== */
.content_inner{
   position: relative;
   width: 100%;
   margin: auto;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}

/* ====================================================================
   2列レイアウト（ソート用）
   ==================================================================== */
.content_flex_inner{
   position: relative;
   width: 100%;
   margin: auto;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}

.content_flex_inner .left_wrap{
   position: relative;
   width: 25%;
   padding: 20px 0 0 0;
}
   @media screen and (max-width: 1024px) {
      .content_flex_inner .left_wrap{
         width: 100%;
         padding: 0 0 0 0;
      } 
   }
   @media screen and (max-width: 480px) {
      .content_flex_inner .left_wrap{
         width: 100%;
         padding: 0px 0 0 0;
      } 
   }

.content_flex_inner .right_wrap{
   position: relative;
   width: 70%;
   padding: 55px 0 0 0;
}
   @media screen and (max-width: 1024px) {
      .content_flex_inner .right_wrap{
         width: 100%;
         padding: 20px 0 0 0;
      } 
   }
   @media screen and (max-width: 600px) {
      .content_flex_inner .right_wrap{
         padding: 20px 0 0 0;
      } 
   }



.content_flex_inner .left_wrap2{
   position: relative;
   width: 10%;
   padding: 60px 0 0 0;
}
   @media screen and (max-width: 1024px) {
      .content_flex_inner .left_wrap2{
         width: 100%;
         padding: 0 0 0 0;
      } 
   }
   @media screen and (max-width: 480px) {
      .content_flex_inner .left_wrap2{
         width: 100%;
         padding: 0px 0 0 0;
      } 
   }

.content_flex_inner .right_wrap2{
   position: relative;
   width: 85%;
   padding: 55px 0 0 0;
}
   @media screen and (max-width: 1024px) {
      .content_flex_inner .right_wrap2{
         width: 100%;
         padding: 20px 0 0 0;
      } 
   }
   @media screen and (max-width: 600px) {
      .content_flex_inner .right_wrap2{
         padding: 20px 0 0 0;
      } 
   }


.b_back{
   position: relative;
   width: 100%;
   display: block;
}
   @media screen and (max-width: 1024px) {
      .b_back{
         display: none;
      } 
   }


.b_back_m{
   display: none;
}
   @media screen and (max-width: 1024px) {
      .b_back_m{
         display: block;
         position: relative;
         width: 200px;
         margin: auto;
      } 
   }
   @media screen and (max-width: 600px) {
      .b_back_m{
         width: 50%;
      } 
   }


.b_back_list{
   position: fixed;
   top: 120px;
   left: 0;
   background-color: rgba(126,76,67,1.00);
   color: rgba(255,255,255,1.00);
   z-index: 15;
}
   @media screen and (max-width: 1200px) {
      .b_back_list{
        top: 100px;
      } 
   }
   @media screen and (max-width: 480px) {
      .b_back_list{
        top: 60px;
      } 
   }


.b_back_list a{
   display: block;
   padding: 4px 30px;
  font-family: YakuHanJP, 'Zen Maru Gothic', serif; 
  transform: rotate(0.03deg);
   color: rgba(255,255,255,1.00);
   font-weight: 600;
   font-size: 120%;
}
   @media screen and (max-width: 480px) {
      .b_back_list a{
        font-size: 90%;
        padding: 4px 20px;
      } 
   }


/* ソートFIX */
.menufix{
  position: -webkit-sticky;
  position: sticky;
  top: 160px;
}
   @media screen and (max-width: 480px) {
      .menufix{
        position: relative;
        top: 0;
      } 
   }

/* ====================================================================
   セクションタイトル
   ==================================================================== */

.section_title_wrap{
   position: relative;
   width: min(40% , 450px);
   margin: 40px auto 40px auto;
}
   @media screen and (max-width: 800px) {
      .section_title_wrap{
         width: 60%;
         margin: 30px auto 20px auto;
      } 
   }
   @media screen and (max-width: 600px) {
      .section_title_wrap{
         width: 70%;
         margin: 20px auto 20px auto;
      } 
   }

.section_title_wrap.news{
   margin: 40px auto 0 auto;
}

/* ====================================================================
   フッダー
   ==================================================================== */
.page_foot{
   position: relative;
   width: 100%;
   background-image: url("../images/top/bg_footer.png");
   background-repeat: repeat-x;
   background-size: 400px auto;
   background-position: bottom center;
}
   @media screen and (max-width: 1200px) {
      .page_foot{
         background-size: 250px auto;
      } 
   }
   @media screen and (max-width: 1024px) {
      .page_foot{
         background-size: 220px auto;
      } 
   }
   @media screen and (max-width: 600px) {
      .page_foot{
         background-size: 200px auto;
      } 
   }


.page_foot .i_share{
   position: relative;
   width: 120px;
   margin: auto;
   margin-bottom: 10px;
}

.copy_wrap{
   position: relative;
   width: 100%;
   background-color: rgba(255,255,255,1.00);
}

.copy_page{
   position: relative;
   padding: 10px 20px 50px 20px;
   text-align: center;
   color: rgba(127,76,66,1.00);
   font-size: 90%;
}

/* ====================================================================
   枠
   ==================================================================== */

.ad_waku01{
   position: relative;
   width: 100%;
   border:30px solid ;
   box-sizing: border-box;
   -moz-border-image: url("../images/tmp/w01.png") 48;
   -webkit-border-image: url("../images/tmp/w01.png") 48;
}
   @media screen and (max-width: 600px) {
      .ad_waku01{
         position: relative;
         width: 100%;
         margin-top: 30px;
         border:30px solid ;
         box-sizing: border-box;
         -moz-border-image: url("../images/tmp/w01.png") 40;
         -webkit-border-image: url("../images/tmp/w01.png") 40;
      } 
   }

.ad_waku01_inner{
   background-color: rgba(255,255,255,0.50);position: relative;
   width: 100%;
}


/* ====================================================================
   ニュース
   ==================================================================== */

.news-item{
   background-color: rgba(255,255,255,1.00);
   padding: 7px;
   margin-bottom: 30px;
}

.news_list_inner article{
   position: relative;
   width: 100%;
   background-color: rgba(245,230,209,1.00);
   border: rgba(197,146,45,1.00) 1px solid;
   padding: 10px 0;
}

.news_list_inner article .news_list_cont_w{
   position: relative;
   width: 90%;
   margin: auto;
   border-top: rgba(197,146,45,1.00) 3px dotted;
   border-bottom: rgba(197,146,45,1.00) 3px dotted;
   padding: 20px 30px 20px 10px;
}
   @media screen and (max-width: 600px) {
      .news_list_inner article .news_list_cont_w{
         padding: 10px 10px 10px 10px;
      } 
   }


.news_list_inner .k_t_l{
   position: absolute;
   top: 2px;
   left: 2px;
   width: 30px;
}
   @media screen and (max-width: 600px) {
      .news_list_inner .k_t_l{
         width: 20px;
      } 
   }


.news_list_inner .k_t_r{
   position: absolute;
   top: 2px;
   right: 2px;
   width: 30px;
}
   @media screen and (max-width: 600px) {
      .news_list_inner .k_t_r{
         width: 20px;
      } 
   }


.news_list_inner .k_b_l{
   position: absolute;
   bottom: 2px;
   left: 2px;
   width: 30px;
}
   @media screen and (max-width: 600px) {
      .news_list_inner .k_b_l{
         width: 20px;
      } 
   }


.news_list_inner .k_b_r{
   position: absolute;
   bottom: 2px;
   right: 2px;
   width: 30px;
}
   @media screen and (max-width: 600px) {
      .news_list_inner .k_b_r{
         width: 20px;
      } 
   }


a .news_list_box{
   color: rgba(0,0,0,1.00);
}


.news_list_box .day{
   font-family: 'Noto Serif JP', serif;
   color: rgba(255,255,255,1.00);
}

.news_list_box .day span{
   background-image: url("../images/news_tmp/news_list_day_bg.png");
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
   padding: 0 20px 2px 20px;
   font-size: 95%;
   font-weight: 600;
}
   @media screen and (max-width: 600px) {
      .news_list_box .day span{
         padding: 3px 10px 3px 10px;
      } 
   }


.news_list_box .title{
   padding-left: 20px;
}
   @media screen and (max-width: 600px) {
      .news_list_box .title{
         padding-left: 10px;
      } 
   }



/* ニュース内部 */


.news_in{
   background-color: rgba(255,255,255,1.00);
   padding: 7px;
   margin-bottom: 30px;
}

.news_in_inner article{
   position: relative;
   width: 100%;
   background-color: rgba(255,247,235,1.00);
   border: rgba(197,146,45,1.00) 1px solid;
   padding: 10px 0;
}

.news_in_inner article .news_in_cont_w{
   position: relative;
   width: 80%;
   margin: auto;
   border-top: rgba(197,146,45,1.00) 3px dotted;
   border-bottom: rgba(197,146,45,1.00) 3px dotted;
   padding: 20px 30px 20px 10px;
}
   @media screen and (max-width: 600px) {
      .news_in_inner article .news_in_cont_w{
         padding: 10px 10px 10px 10px;
         width: 90%;
      } 
   }
   @media screen and (max-width: 480px) {
      .news_in_inner article .news_in_cont_w{
         width: 95%;
      } 
   }


.news_in_inner .k_t_l{
   position: absolute;
   top: 2px;
   left: 2px;
   width: 30px;
}
   @media screen and (max-width: 600px) {
      .news_main_inner .k_t_l{
         width: 20px;
      } 
   }



.news_in_inner .k_t_r{
   position: absolute;
   width: 80px;
   top: 10px;
   right: 10px;
}
   @media screen and (max-width: 1024px) {
      .news_in_inner .k_t_r{
         width: 60px;
         top: 10px;
         right: 10px;
      } 
   }
   @media screen and (max-width: 600px) {
      .news_in_inner .k_t_r{
         width: 10%;
         top: 5px;
         right: 5px;
      } 
   }

.news_in_inner .k_t_l{
   position: absolute;
   width: 80px;
   top: 10px;
   left: 10px;
}
   @media screen and (max-width: 1024px) {
      .news_in_inner .k_t_l{
         width: 60px;
         top: 10px;
         left: 15px;
      } 
   }
   @media screen and (max-width: 600px) {
      .news_in_inner .k_t_l{
         width: 10%;
         top: 5px;
         left: 5px;
      } 
   }




.news_in_box{
   color: rgba(0,0,0,1.00);
}


.news_in_box .day{
   font-family: 'Noto Serif JP', serif;
   color: rgba(255,255,255,1.00);
   margin-top: 10px;
   margin-bottom: 6px;
}
   @media screen and (max-width: 600px) {
      .news_in_box .day{
         padding-left: 0;
      } 
   }


.news_in_box .day span{
   background-image: url("../images/news_tmp/news_list_day_bg.png");
   background-position: center;
   background-repeat: no-repeat;
   background-size: contain;
   padding: 0 20px 2px 20px;
   font-size: 120%;
   font-weight: 600;
}
   @media screen and (max-width: 1024px) {
      .news_in_box .day span{
         font-size: 100%;
      } 
   }
   @media screen and (max-width: 480px) {
      .news_in_box .day span{
         padding: 3px 10px 3px 10px;
         font-size: 3.4vw;
      } 
   }


.news_in_box .title{
   padding-left: 20px;
}
   @media screen and (max-width: 600px) {
      .news_in_box .title{
         padding-left: 0;
      } 
   }


.news_title{
  font-family: 'Zen Maru Gothic', serif;
  font-size: 140%;
  font-weight: 600;
  transform: rotate(0.03deg);
  background-image: url("../images/news_tmp/title_bar.png");
  background-position: bottom left;
  background-repeat: no-repeat;
  background-size: 151%  auto;
  padding: 0px 0px 20px 20px;
  margin-bottom: 40px;
}
   @media screen and (max-width: 1024px) {
      .news_title{
         font-size: 120%;
         padding: 0 0px 12px 0; 
      } 
   }
   @media screen and (max-width: 600px) {
      .news_title{
         padding: 0 0px 12px 0;
         margin-bottom: 20px;
      } 
   }
   @media screen and (max-width: 480px) {
      .news_title{
         padding: 0px 0px 7px 0; 
         font-size: 4.0vw;
         background-size: 250%  auto;
      } 
   }


.news_txt_wrap{
   position: relative;
   width: 98%;
   margin: auto;
   margin-bottom: 50px;
   line-height: 1.8;
}


/* 追加要素 */

.news_chara_wrap{
   position: relative;
   width: 100%;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   margin-bottom: 30px;
}

.news_chara_wrap .zenshin{
   position: relative;
   width: 50%;
}

.news_chara_wrap .c_right_wrap{
   position: relative;
   width: 50%;
}

.news_chara_wrap .c_right_wrap ol{
   position: relative;
   width: 100%;
   margin-right: 10%;
   display: flex;
   justify-content: center;
   flex-wrap: wrap;
   margin-top: 15px;
   margin-bottom: 30px;
}
   @media screen and (max-width: 480px) {
      .news_chara_wrap .c_right_wrap ol{
         margin-top: 5px;
      } 
   }


.news_chara_wrap .c_right_wrap li{
   width: 68%;
   margin-bottom: 15px;
   border: rgba(108,44,47,1.00) 1px solid;
}
   @media screen and (max-width: 480px) {
      .news_chara_wrap .c_right_wrap li{
         margin-bottom: 7px;
      } 
   }



.ns03 .c_txt01{
   position: relative;
   width: 100%;
   font-family: 'Zen Maru Gothic', serif;
   margin-bottom: 20px;
   font-weight: 500;
}


h2.news_chara{
   font-family: 'Zen Maru Gothic', serif;
   font-weight: 600;
   font-size: 140%;
}
   @media screen and (max-width: 480px) {
      h2.news_chara{
         font-size: 115%;
      } 
   }




.ns03_c02 h2.news_chara {
   background-color: rgba(183,186,222,0.10);
   border-top: rgba(88,94,151,1.00) 3px solid;
}
.ns03_c02 h2.news_chara:after {
  background: -webkit-repeating-linear-gradient(-45deg, rgba(88,94,151,1), rgba(88,94,151) 2px, rgba(250,244,225,1.00) 2px, rgba(250,244,225,1.00) 4px);
  background: repeating-linear-gradient(-45deg, rgba(88,94,151), rgba(88,94,151) 2px, rgba(250,244,225,1.00) 2px, rgba(250,244,225,1.00) 4px);
}


.ns03_c03 h2.news_chara {
   background-color: rgba(247,222,108,0.10);
   border-top: rgba(247,222,108,1.00) 3px solid;
}
.ns03_c03 h2.news_chara:after {
  background: -webkit-repeating-linear-gradient(-45deg, rgba(247,222,108,1), rgba(247,222,108) 2px, rgba(250,244,225,1.00) 2px, rgba(250,244,225,1.00) 4px);
  background: repeating-linear-gradient(-45deg, rgba(247,222,108), rgba(247,222,108) 2px, rgba(250,244,225,1.00) 2px, rgba(250,244,225,1.00) 4px);
}


.ns03_c04 h2.news_chara {
   background-color: rgba255,102,128,0.10);
   border-top: rgba(255,102,128,1.00) 3px solid;
}
.ns03_c04 h2.news_chara:after {
  background: -webkit-repeating-linear-gradient(-45deg, rgba(255,102,128,1.00), rgba(255,102,128) 2px, rgba(250,244,225,1.00) 2px, rgba(250,244,225,1.00) 4px);
  background: repeating-linear-gradient(-45deg, rgba(255,102,128), rgba(255,102,128) 2px, rgba(250,244,225,1.00) 2px, rgba(250,244,225,1.00) 4px);
}






h3.news_chara{
   border-bottom: rgba(108,44,47,1.00) 3px dotted;
}
.ns03_c02 h3{
   border-bottom: rgba(88,94,151,1.00) 3px dotted;
}
.ns03_c03 h3{
   border-bottom: rgba(247,222,108,1.00) 3px dotted;
}
.ns03_c04 h3{
   border-bottom: rgba(255,102,128,1.00) 3px dotted;
}



.ns03_c02 h4{
   border-left: solid 10px rgba(88,94,151,1.00);
}
.ns03_c03 h4{
   border-left: solid 10px rgba(247,222,108,1.00);
}
.ns03_c04 h4{
   border-left: solid 10px rgba(255,102,128,1.00);
}



.ns03_posi{
   font-size: 100%;
   font-weight: 600;
}


.news_chara_cv_wrap{
   border: rgba(173,173,173,1.00) 3px dotted;
   padding: 20px;
   box-sizing: border-box;
   border-radius: 15px;
   margin-bottom: 80px;
   background-color: rgba(255,255,255,0.40);
}

.news_chara_cv_wrap .comment_wrap{
   position: relative;
   width: 100%;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}

.news_chara_cv_wrap .comment_wrap .cv_pic{
   position: relative;
   width: 25%;
}
   @media screen and (max-width: 600px) {
      .news_chara_cv_wrap .comment_wrap .cv_pic{
         width: 50%;
         margin: auto;
         margin-bottom: 20px;
      }
   }


.news_chara_cv_wrap .comment_wrap .comment_txt{
   position: relative;
   width: 73%;
   line-height: 2.0;
}
   @media screen and (max-width: 600px) {
      .news_chara_cv_wrap .comment_wrap .comment_txt{
         width: 100%;
      }
   }

.news_chara_cv_wrap2{
   border: rgba(173,173,173,1.00) 3px dotted;
   padding: 20px;
   box-sizing: border-box;
   border-radius: 15px;
   margin-bottom: 40px;
   background-color: rgba(255,255,255,0.40);
}

