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


/*=======================================================
   背景設定
  =======================================================*/
body{
   background-color: rgba(7,19,21,1.00);
}

.bg_001{
   background-image: url("../images_portal/tmp/bg_001.jpg");
   background-position: top left;
   background-size: 200% auto;
}

.bg_002{
   background-color: rgba(218,218,218,1.00);
   background-image: url("../images_portal/tmp/bg_002.jpg");
   background-position: top center;
   background-repeat: no-repeat;
   background-size: 100% auto;
}
   @media screen and (max-width: 600px) {
      .bg_002{
         background-size: 200% auto;
      } 
   }

/*=======================================================
   ヘッダ
  =======================================================*/
.head{
   position: relative;
   width: 100%;
   background-color: rgba(0,0,0,1.00);
   display: flex;
   justify-content: flex-start;
   padding-bottom: 10px;
}

.head .logo_wrap{
   position: relative;
   width: calc(100% - 80px);
   background-image: url("../images_portal/tmp/head/head_bg001_left.jpg") , url("../images_portal/tmp/head/head_bg001_right.jpg");
   background-position: left , right;
   background-repeat: no-repeat;
   background-size: auto 100%;
   display: grid;
   align-items: center;
}
   @media screen and (max-width: 1024px) {
      .head .logo_wrap{
        width: calc(100% - 60px);
      } 
   }


.head .logo_wrap .main_logo{
   position: relative;
   width: 300px;
   margin-left: 40px;
}
   @media screen and (max-width: 1024px) {
      .head .logo_wrap .main_logo{
         width: 200px;
         margin-left: 20px;
      } 
   }
   @media screen and (max-width: 600px) {
      .head .logo_wrap .main_logo{
         width: 170px;
         margin-left: 10px;
      } 
   }


.head .menu_wrap{
   position: relative;
   width: 100px;
   min-height: 100px;
   background-color: rgba(0,0,0,1.00);
}
   @media screen and (max-width: 1024px) {
      .head .menu_wrap{
         width: 100px;
         min-height: 90px;
      } 
   }
   @media screen and (max-width: 600px) {
      .head .menu_wrap{
         width: 80px;
         min-height: 70px;
      } 
   }
   @media screen and (max-width: 480px) {
      .head .menu_wrap{
         width: 60px;
         min-height: 60px;
      } 
   }


/*=======================================================
   ページタイトル
  =======================================================*/
.page_title{
   position: relative;
   width: 400px;
   margin: auto;
   padding: 60px 0 0 0;
}
   @media screen and (max-width: 1024px) {
      .page_title{
         width: 300px;
         padding: 40px 0 0 0;
      } 
   }
   @media screen and (max-width: 600px) {
      .page_title{
         width: 50%;
         padding: 40px 0 0 0;
      } 
   }
   @media screen and (max-width: 480px) {
      .page_title{
         width: 60%;
         padding: 30px 0 0 0;
      } 
   }

/*=======================================================
   コンテンツ領域
  =======================================================*/
.contents_wrap{
   position: relative;
   overflow: hidden;
   width: min(98% , 900px);
   margin: 0 auto 0 auto;
}

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


/*=======================================================
   メニューFIX
  =======================================================*/
.menufix{
  position: -webkit-sticky;
  position: sticky;
  top: 50px;
  margin-bottom: 120px;
}
   @media screen and (max-width: 1024px) {
      .menufix{
         margin-bottom: 0;
      } 
   }


/*=======================================================
   サムネイル全体リンク
  =======================================================*/
a.thumb_link {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}


/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
   ニュースページ
  =======================================================*/
.news_wrap{
   position: relative;
   width: min(95% , 1000px);
   margin: auto;
   padding: 60px 0 0 0;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
}
   @media screen and (max-width: 1024px) {
      .news_wrap{
         padding: 40px 0 0 0;
      } 
   }


.news_wrap .left_box{
   position: relative;
   width: 28%;
}
   @media screen and (max-width: 1024px) {
      .news_wrap .left_box{
         width: 100%;
      } 
   }


.news_wrap .right_box{
   position: relative;
   width: 68%;
}
   @media screen and (max-width: 1024px) {
      .news_wrap .right_box{
         width: 100%;
      } 
   }


.news_list_box{
   position: relative;
   width: 100%;
   display: flex;
   justify-content: space-between;
   flex-wrap: wrap;
   margin-bottom: 5px;
   border: rgba(0,0,0,1.00) 1px solid;
   font-family: 'Noto Serif JP', serif; 
   font-weight: 500;
   letter-spacing: 1px;
   font-size: 94%;
   background-color: rgba(255,255,255,1.00);
}


.news_list_box .news_left{
   position: relative;
   width: 120px;
   min-height: 120px;
   display: grid;
   place-content: center;
   background-color: rgba(0,0,0,1.00);
}
   @media screen and (max-width: 600px) {
      .news_list_box .news_left{
         width: 100px;
         min-height: 0;
      } 
   }


.news_list_box .news_right{
   position: relative;
   overflow: hidden;
   width: calc(100% - 120px);
   display: grid;
   align-items: center;
   background-color: rgba(255,255,255,1.00);
}
   @media screen and (max-width: 600px) {
      .news_list_box .news_right{
         width: 100%;
      } 
   }


.news_list_box .day{
   color: rgba(230,0,18,1.00);
}


.news_list_box .news_title{
   color: rgba(0,0,0,1.00);
   padding: 15px 20px;
   font-family: YakuHanMP,'Noto Serif JP', serif; 
}
     @media screen and (max-width: 600px) {
      .news_list_box .news_title{
         padding-bottom: 20px;
      } 
   }



/*---------------------------
   ニュース内部
  ---------------------------*/

.news_content{
   position: relative;
   overflow: hidden;
   background-color:transparent;
   margin: 40px auto 60px auto;
   border: none;
}

.news_content .title_box.ne span{
   white-space: nowrap;
}

.news_content_wrap{
   position: relative;
   overflow: hidden;
   display: table;
   width: 100%;
   box-sizing: border-box;
   border: rgba(0,0,0,1.00) 1px solid;
   font-family: YakuHanMP,'Noto Serif JP', serif; 
   margin-bottom: 10px;
}
   @media screen and (max-width: 600px) {
      .news_content_wrap{
         display: flex;
         flex-wrap: wrap;
         background-color: rgba(129,0,0,1.00);
      } 
   }



.news_content .day_box{
   position: relative;
   display: table-cell;
   vertical-align: middle;
   width: 120px;
   height: 120px;
   min-height: 120px;
   background-color: rgba(0,0,0,1.00);
   color: rgba(255,0,4,1.00);
   line-height: 1.2;
   text-align: center;
}
   @media screen and (max-width: 600px) {
      .news_content .day_box{
         width: 70px;
         min-height: 0;
         height: auto;
         margin-bottom: 5px;
         padding: 2px 0;
      } 
   }


.news_content .day_box .year{
   font-size: 90%;
}

.news_content .day_box .day{
   font-size: 130%;
}

.news_content .title_box{
   position: relative;
   overflow: hidden;
   display: table-cell;
   vertical-align: middle;
   width: auto;
   background-color: rgba(129,0,0,1.00);
   color: rgba(255,255,255,1.00);
   padding: 15px 20px;
   font-size: 110%;
   line-height: 1.4;
}
   @media screen and (max-width: 600px) {
      .news_content .title_box{
         width: 100%;
         padding: 5px 20px 20px 20px;
      } 
   }


.news_list_box .day{
   color: rgba(230,0,18,1.00);
}


.news_list_box .news_title{
   color: rgba(0,0,0,1.00);
   padding: 15px 20px;
   font-family: YakuHanMP,'Noto Serif JP', serif; 
}
     @media screen and (max-width: 600px) {
      .news_list_box .news_title{
         padding-bottom: 20px;
      } 
   }

.kiji_wrap{
   position: relative;
   width: 100%;
   border: rgba(0,0,0,1.00) 1px solid;
   background-color: rgba(255,255,255,1.00);
}

.kiji_inner{
   padding: 60px 120px;
   line-height: 1.8;
}
     @media screen and (max-width: 1024px) {
      .kiji_inner{
         padding: 60px 80px;
      } 
   }
     @media screen and (max-width: 800px) {
      .kiji_inner{
         padding: 60px 40px;
      } 
   }
     @media screen and (max-width: 480px) {
      .kiji_inner{
         padding: 30px 20px;
      } 
   }


.news_b_back{
   position: relative;
   width: 80px;
   margin: 0 auto 120px auto;
}
     @media screen and (max-width: 480px) {
      .news_b_back{
         margin: 0 auto 80px auto;
      } 
   }



/*〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓〓
   綿流し
  =======================================================*/
footer {
  position: relative;
  overflow: hidden;
}

/* particles.js の背景レイヤー */
#wata {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
}

/* particles.js が生成する canvas */
#wata .particles-js-canvas-el {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* footerの中身をcanvasより前面へ */
.foot_wrap {
  position: relative;
  z-index: 1;
}





#footer_ripple {
  position: relative;
  overflow: hidden;

  /* ripplesは背景画像がないと効果が見えにくい */
  background-image: url("images_portal/tmp/bg/footer_bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* particles.js用 */
#wata {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;
  pointer-events: none;
}

/* particlesのcanvas */
#wata .particles-js-canvas-el {
  position: absolute;
  inset: 0;
  width: 100% !important;
  height: 100% !important;
  display: block;
}

/* footerの中身 */
.foot_wrap {
  position: relative;
  z-index: 2;
}