@charset "UTF-8";
/** -----------------------------------
	お知らせページ news
----------------------------------- **/
@media screen and (min-width:769px){
.sub-center-col {
  background-image: url(img/sub-eyecatch.jpg) ;
}
/*------ active page nav ---------*/
#page-news .gnav-news a,#page-news .snav-news a{
  color: var(--sub-text-color);
  border-bottom: 2px dotted #612e01;
}
/*------ main ---------*/
main{
  box-sizing: border-box;
  width: 100%;
  margin: 0 auto 200px;
  padding: 100px auto 0;
}
.main-inner{
  margin: 0 auto;
}
/*------------- news title ---------------*/
.sec-title {
  width: 100%;
  text-align: center;
  padding: 50px 0;
  position: relative;
  z-index: 0;
}
.sec-title i {
  font-size: 3rem;
  margin-bottom: 20px;
  position: relative;
  z-index: 2;
  color: var(--title-icon-color);
}
.sec-title h2 {
  width: 100%;
  font-size: 2.5rem;
  margin-bottom: 5px;
  position: relative;
  z-index: 2;
  color: #333;
}
/* back text */
.sec-title p {
  width: 100%;
  color: var(--accent-color);
  text-align: center;
  font-size: 8rem;
  opacity: 0.5;
  transform: rotate(-5deg);
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) rotate(-10deg);
  z-index: 1;
  pointer-events: none;
}
/*------------- news -------------------*/
main section{
  width: 100%;
  padding: 100px 0 0;
}
#news{
  width: 100%;
  margin: 0 auto;
}
.news-inner-container{
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
}
/* --- アコーディオン全体の枠 --- */
.news-item {
  border-bottom: 1px solid #55483d;
  margin: 0 auto;
  background: #fff;
}
/* --- クリックするヘッダー部分 --- */
summary {
  list-style: none;
  cursor: pointer;
  padding: 20px;
  outline: none;
}
summary::-webkit-details-marker { display: none; }
.news-summary-inner {
  display: flex;
  align-items: center;
  gap: 20px;
}
.news-date {
  font-weight: bold;
  color: var(--accent-color);
  min-width: 100px;
  font-size: 1rem;
}
.news-title {
  flex: 1;
  font-size: 1.2rem;
  margin: 0;
  line-height: 1.4;
  text-align: left;
}
/* --- スライドを実現する設定 --- */
.news-content-wrapper {
  display: block;
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease-in-out;
}
/* JavaScriptで高さを制御するため、CSSでのopen時設定は不要になります */
.news-item-inner {
  padding: 10px 20px 30px;
  display: flex;
  gap: 30px;
  border-top: 1px dashed #eee;
}
.news-thumb {
  width: 350px;
  flex-shrink: 0;
}
.news-thumb img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  display: block;
}
.news-body {
  flex: 1;
  line-height: 1.6;
  text-align: left;
  font-size: 1.1rem;
  padding: 30px 0 50px;
}

/* summary（タイトル部分）の基本設定 */
.news-item summary {
    position: relative; /* アイコン配置の基準 */
    list-style: none;    /* デフォルトの三角矢印を消す（Chrome用） */
    cursor: pointer;
    padding-right: 40px; /* アイコン用のスペースを確保 */
}

/* Safariなど他のブラウザのデフォルト矢印も消す */
.news-item summary::-webkit-details-marker {
    display: none;
}

/* アイコンの土台（共通） */
.news-item summary::before,
.news-item summary::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px; /* 右端からの距離 */
    width: 14px;  /* 線の長さ */
    height: 2px;  /* 線の太さ */
    background-color: #f39800; /* 日付と同じオレンジ色（適宜変更してください） */
    transition: transform 0.3s ease; /* 動きを滑らかにする */
}

/* 縦線（＋にするための線） */
.news-item summary::after {
    transform: translateY(-50%) rotate(90deg);
}

/* 開いている時（details[open]）の設定 */
.news-item details[open] summary::after {
    transform: translateY(-50%) rotate(0deg); /* 縦線を横に倒して「ー」にする */
    opacity: 0; /* 完全に重ねて消す、または透明にする */
}

/* 【重要】最新記事（1番目）または本文なし記事のアイコンを隠す */
.news-item:first-child summary::before,
.news-item:first-child summary::after,
.news-item summary.no-content::before,
.news-item summary.no-content::after {
    display: none;
}

/* 最新記事と本文なし記事のカーソルをデフォルトに戻す */
.news-item:first-child summary,
.news-item summary.no-content {
    cursor: default;
    padding-right: 0; /* スペースを戻す */
}



}  /*---- @media end min-width:769px----*/

/*----------------@media screen-------------------*/
 /* -------------------------------
 　　　769以上　-　1332以下
 ------------------------------- */
  @media screen and (min-width: 769px) and (max-width: 1332px){
    .news-inner{
      width: 100%;
      padding: 0 60px;
    }
    .news-inner-container {max-width: 1200px;}
    .news-list{padding: 0 40px;}
  }
 /* -------------------------------
 　　　769以上　-　1199以下
 ------------------------------- */
  @media screen and (min-width: 769px) and (max-width: 1199px){
    .news-inner-container {max-width: none;}
  }
 /* ----------------------------------------
 　　　タブレットサイズ　769以上　-　1024以下
 ---------------------------------------- */
  @media screen and (max-width:1023px){
    #page-news .nav-news a {
      color: var(--accent-color);
      font-weight: bold;
    }
    #page-news .nav-news a i{
      color: var(--accent-color);
      font-weight: bold;
    }
    .news-body {
      font-size: 1rem;
      padding: 30px 0 20px;
    }
    .news-thumb {width: 300px;}
  } /* @media screen and (max-width:1023px) */
/** -------------------------------------------------
　　　モバイル用ベースレイアウト
------------------------------------------------- **/
/* ------------------------------
　　　スマホ用　基本設定
------------------------------ */
@media screen and (max-width:768px){
  .sub-center-col {
    background-image: url(img/sub-eyecatch.jpg) ;
  }
  /*------- active page nav ------*/
  #page-news .nav-news a {
      color: var(--accent-color);
      font-weight: bold;
  }
  #page-news .nav-news a i{
      color: var(--accent-color);
      font-weight: bold;
  }
  /*------ main ---------*/
  main{
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    padding: 0;
  }
  .main-inner{
    padding: 0 15px;
    margin: 0 auto;
  }
  /*------------- pagetop title ---------------*/
  .sec-title {
    width: 100%;
    text-align: center;
    padding: 50px 0 30px;
    position: relative;
    z-index: 0;
  }
  .sec-title i {
    font-size: 2.5rem;
    margin-bottom: 15px;
    position: relative;
    z-index: 2;
    color: var(--title-icon-color);
  }
  .sec-title h2 {
    width: 100%;
    font-size: 2rem;
    margin-bottom: 5px;
    position: relative;
    z-index: 2;
    color: #333;
  }
  /* back text */
   .sec-title p {
    width: 100%;
    color: var(--accent-color);
    text-align: center;
    font-size: 5rem;
    opacity: 0.5;
    transform: rotate(-5deg);
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(-10deg);
    z-index: 1;
    pointer-events: none;
  }
  /*------------- news -------------------*/
  main section{width: 100%;}
  #news{width: 100%;margin: 0 auto 100px;}
  .news-inner-container{margin: 0 auto;}
  .news-list{
    width: 100%;
    padding: 20px 15px;
    display: flex;
    flex-direction: column;
  }
    /* --- アコーディオン全体の枠 --- */
  .news-item {
    width: 100%;
    border-bottom: 1px solid #55483d;
    margin: 0 auto;
    background: #fff;
  }
  /* --- クリックするヘッダー部分 --- */
  summary {
    list-style: none;
    cursor: pointer;
    padding: 20px;
    outline: none;
  }
  summary::-webkit-details-marker { display: none; }
  .news-summary-inner {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
  }
  .news-date {
    font-weight: bold;
    color: var(--accent-color);
    min-width: auto;
    font-size: 1rem;
  }
  .news-title {
    flex: 1;
    font-size: 1rem;
    margin: 0;
    line-height: 1.4;
    text-align: left;
  }
  .news-content-wrapper {
    display: block;
    height: 0;
    overflow: hidden;
    transition: height 0.3s ease-in-out;
  }
  .news-item-inner {
    padding: 10px 10px 30px;
    display: flex;
    flex-direction: column;
    gap: 0px;    
    border-top: 1px dashed #55483d;
  }
  .news-thumb {
    width: 100%;
    flex-shrink: 0;
  }
  .news-thumb img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    display: block;
  }
  .news-body {
    flex: 1;
    line-height: 1.6;
    text-align: left;
    font-size: 1rem;
    padding: 30px 0;
  }
/* summary（タイトル部分）の基本設定 */
.news-item summary {
    position: relative; /* アイコン配置の基準 */
    list-style: none;    /* デフォルトの三角矢印を消す（Chrome用） */
    cursor: pointer;
    padding-right: 40px; /* アイコン用のスペースを確保 */
}

/* Safariなど他のブラウザのデフォルト矢印も消す */
.news-item summary::-webkit-details-marker {
    display: none;
}

/* アイコンの土台（共通） */
.news-item summary::before,
.news-item summary::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 15px; /* 右端からの距離 */
    width: 14px;  /* 線の長さ */
    height: 2px;  /* 線の太さ */
    background-color: #f39800; /* 日付と同じオレンジ色（適宜変更してください） */
    transition: transform 0.3s ease; /* 動きを滑らかにする */
}

/* 縦線（＋にするための線） */
.news-item summary::after {
    transform: translateY(-50%) rotate(90deg);
}

/* 開いている時（details[open]）の設定 */
.news-item details[open] summary::after {
    transform: translateY(-50%) rotate(0deg); /* 縦線を横に倒して「ー」にする */
    opacity: 0; /* 完全に重ねて消す、または透明にする */
}

/* 【重要】最新記事（1番目）または本文なし記事のアイコンを隠す */
.news-item:first-child summary::before,
.news-item:first-child summary::after,
.news-item summary.no-content::before,
.news-item summary.no-content::after {
    display: none;
}

/* 最新記事と本文なし記事のカーソルをデフォルトに戻す */
.news-item:first-child summary,
.news-item summary.no-content {
    cursor: default;
    padding-right: 0; /* スペースを戻す */
}
} /* @media screen and (max-width:768px) */