/* =========================================================
   front-page.css
   トップページ専用
   - ヒーロー背景
   - テキスト型NEWS一覧
   ========================================================= */


/* =========================================================
   ベース設定
   ========================================================= */

html,
body{
  margin:0;
  padding:0;
  height:auto !important;
  min-height:100vh;
  overflow:auto !important;
  overflow-x:hidden !important;
}

body{
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
}

/* ページ先頭 margin 折り畳み防止 */
.site-main .page-content > :first-child{
  margin-top:0 !important;
}

/* 本文前面へ */
.site-main,
.site-main .page-content{
  position:relative;
  z-index:1;
}


/* =========================================================
   ヒーローセクション
   ========================================================= */

#frontBg{
  position:relative;
  height:100vh;
  overflow:hidden;
  z-index:1;
  pointer-events:none;
}

.hero-visual,
.hero-bg-layer{
  width:100%;
  height:100%;
}

.hero-visual{
  position:relative;
  overflow:hidden;
}

.hero-bg-layer{
  position:absolute;
  inset:0;
  background-size:cover;
  background-position:center;
  background-repeat:no-repeat;
  opacity:0;
  transition:opacity 2s ease;
}

.hero-bg-layer.front-layer1,
.hero-bg-layer.is-visible{
  opacity:1;
}


/* =========================================================
   NEWSセクション
   ========================================================= */

#frontBottomBand{
  position:relative;
  width:100%;
  height:auto;
  margin:0;
  padding:0;
  background:transparent;
  color:#222;
  z-index:1;
}

#frontBottomBand .band-bg{
  background:#f5f1ea;
  padding:28px 0 34px;
  color:#222;
}

/* - News - 見出し */
#frontBottomBand .news-section-header{
  display:block;
  max-width:1100px;
  margin:0 auto;
  padding:0 20px;
  text-align:center;
}

#frontBottomBand .news-lead{
  display:block;
  position:static;
  transform:none;
  margin:0 0 14px;
  padding:0;
  color:#9b6f4d;
  font-size:13px;
  font-weight:400;
  letter-spacing:0.22em;
  line-height:1.4;
  white-space:normal;
}


/* =========================================================
   NEWS投稿一覧
   ========================================================= */

.recent-posts{
  display:block !important;
  max-width:1100px;
  margin:0 auto !important;
  padding:0 20px !important;
  border-top:1px solid #ddd3c7;
}

/* 1投稿 */
.recent-post-item{
  width:100% !important;
  display:flex;
  align-items:flex-start;
  gap:6px;
  margin:0 !important;
  padding:8px 0 !important;
  border-bottom:1px solid #ddd3c7;
  text-align:left;
  box-sizing:border-box;
}

/* 旧カード用サムネイルは完全非表示 */
.recent-post-item .post-thumbnail,
.recent-post-item:not(:has(.post-thumbnail img))::before{
  display:none !important;
  content:none !important;
}

/* 日付 */
.recent-post-item .post-date{
  width:140px;
  flex-shrink:0;
  margin:0 !important;
  padding-top:1px;
  color:#777 !important;
  font-size:12px !important;
  line-height:1.2 !important;
}

/* タイトルエリア */
.recent-post-item .post-details{
  flex:1;
  display:block;
  margin:0 !important;
  padding:0 !important;
  background:transparent !important;
  border:none !important;
  box-shadow:none !important;
  color:#222;
  text-align:left;
}

/* 投稿タイトル */
.recent-post-item .post-title{
  display:block;
  margin:0 !important;
  color:#111;
  font-size:12px !important;
  font-weight:400 !important;
  line-height:1.3 !important;
  white-space:normal;
}

.recent-post-item .post-title a{
  color:#111 !important;
  text-decoration:none !important;
  font-weight:400 !important;
}

.recent-post-item .post-title a:hover{
  text-decoration:underline !important;
}

/* 抜粋を出している場合 */
.recent-post-item .post-excerpt{
  margin:4px 0 0;
  color:#666;
  font-size:12px;
  line-height:1.5;
  display:-webkit-box;
  -webkit-line-clamp:2;
  -webkit-box-orient:vertical;
  overflow:hidden;
}


/* =========================================================
   一覧ボタン
   ========================================================= */

/* PC用の古い一覧ボタンは非表示 */
.section-header{
  display:none !important;
}

.section-title,
.view-all{
  display:none !important;
}


/* =========================================================
   モバイル
   ========================================================= */

@media (max-width:768px){

  html,
  body{
    overflow-x:hidden !important;
    overscroll-behavior-x:none !important;
  }

  #frontBottomBand .band-bg{
    padding:24px 0 28px;
  }

  #frontBottomBand .news-section-header{
    padding:0 16px;
  }

  #frontBottomBand .news-lead{
    margin-bottom:12px;
    font-size:12px;
  }

  .mobile-news-header{
    display:flex;
    align-items:center;
    justify-content:flex-end;
    margin:0 16px 12px;
    padding:0 0 10px;
    border-bottom:1px solid #ddd3c7;
  }

  .mobile-news-title{
    display:none;
  }

  .mobile-news-viewall{
    display:inline-block;
    color:#9b6f4d;
    font-size:12px;
    line-height:1;
    text-decoration:none;
    border:1px solid #9b6f4d;
    border-radius:20px;
    padding:6px 14px;
  }

  .recent-posts{
    max-width:100% !important;
    padding:0 16px !important;
    border-top:none;
  }

  .recent-post-item{
    display:block;
    padding:10px 0 !important;
  }

  .recent-post-item .post-date{
    width:auto;
    display:block;
    margin-bottom:4px !important;
    font-size:11px !important;
    line-height:1.3 !important;
  }

  .recent-post-item .post-title{
    font-size:12px !important;
    line-height:1.45 !important;
  }

  .recent-post-item .post-details{
    width:auto !important;
    max-width:none !important;
  }
}


/* =========================================================
   PC：モバイル専用ヘッダー非表示
   ========================================================= */

@media (min-width:769px){

  .mobile-news-header{
    display:none !important;
    visibility:hidden !important;
  }
}




/* 投稿本文を小さく */
.post-content{
  font-size:12px !important;
  line-height:1.2;
  color:#555;
  margin-top:8px;     /* タイトルとの余白 */
  padding-left:1em;   /* 1文字分下げる（1スペース感覚） */
}

/* 段落間隔 */
.post-content p{
  margin:0 0 8px;
}



.front-greeting{
  background: #fff;
  padding: 42px 20px 36px;
}

.front-greeting-inner{
  max-width: 1040px;
  margin: 0 auto;
  font-family: "Noto Sans JP","Yu Gothic",Meiryo,sans-serif;
  color: #111;
  font-size: 14px;
  line-height: 1.2;
  letter-spacing: .04em;
}

.front-greeting-inner p{
  margin: 0 0 12px;
}

.front-greeting-sign{
  margin-top: 18px !important;
  text-align: right;
  font-weight: 700;
}

@media (max-width: 767px){
  .front-greeting{
    padding: 30px 18px 28px;
  }

  .front-greeting-inner{
    font-size: 14px;
    line-height: 1.9;
  }
}