/* CSS Document */

/* FVは既存 #fv / #page-title を継承想定 */

/* メタ */
#lp-meta { display: none;}
#lp-meta .lp-meta-inner {
  max-width: 1100px; margin: 0 auto; display: flex; gap: 14px; align-items: center; color: #666;
    display: none;
}

#lp-meta .lp-cat { background: #f0ebe5; color: #9D8566; padding: 4px 8px; border-radius: 6px; }
#lp-meta .lp-tags i { margin-left: 8px; }

/* 本文 */
#lp-content section{
    padding-bottom: 80px;
}
#lp-content { padding: 0; }
#lp-content .lp-content-inner { /*max-width: 1300px;*/ margin: 0 auto; color: #333; line-height: 1.9; }
/*#lp-content .lp-content-inner img { max-width: 100%; height: 100vh;
 }*/

/* シェア */
#lp-share { padding: 10px 20px 20px; }
#lp-share .lp-share-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 10px; }
#lp-share .share-btn { display:inline-block; padding:6px 10px; border:1px solid #ddd; border-radius:8px; text-decoration:none; }

/* 前後ナビ */
#lp-post-nav { padding: 20px; }
#lp-post-nav .lp-post-nav-inner { max-width: 1100px; margin: 0 auto; display: flex; justify-content: space-between; }
#lp-post-nav a { text-decoration: none; }

/* 関連 */
#lp-related { max-width: 1200px; margin: 20px auto 60px; padding: 0 20px; }
#lp-related .lp-related-grid {
  display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}
#lp-related .lp-related-card { display:block; background:#fff; border-radius:14px; overflow:hidden; box-shadow:0 6px 18px rgba(0,0,0,.06); text-decoration:none; }
#lp-related .lp-related-card .thumb img { width:100%; height:180px; object-fit:cover; display:block; }
#lp-related .title { padding: 12px 14px; color:#222; line-height:1.5; }

.tate {
  writing-mode: vertical-rl;
  text-orientation: upright;
  width: fit-content; /* テキスト幅に合わせる */
  margin: 5vw auto; /* 横方向中央寄せ */
  
}
#lp-content .tate p{
    font-size: 20px;
    line-height: 2em;
    margin: 0 1em;
    
}
.tcy {
  text-combine-upright: all;
  display: inline-block;
  text-align: center;
  width: 1em; /* 縦書き1文字分の幅に */
}

.list-wrap {
  max-width: 1300px;
  margin: auto;
  width: 96%;
  display: grid;
  grid-template-columns: repeat(4, 1fr); /* 横4つに並べる */
  gap: 30px 20px; /* 縦30px 横20pxの間隔 */
}

.list-wrap.center {
  max-width: 1300px;
  margin: auto;
  width: 46%;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px 20px;
  justify-content: center; /* ここで真ん中寄せ */
}
.list-wrap h3{
    margin: 20px 0!important;
}
@media screen and (max-width: 768px) {
  .tate {
    writing-mode: horizontal-tb;
    text-orientation: mixed;
    width: auto;
      text-align: center;
  }
    .yokonarabi .lp-btn{
        margin: auto;
    }
    
}

/* =========================
   Features（八芳園の魅力）
   HTML側：<section class="features"> 内の <div class="yokonarabi"> ～ </div>
   ========================= */

/* 3列グリッド（レスポンシブ） */
.yokonarabi {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 28px;               /* カード間の余白 */
  align-items: start;
}

/* タブレットで2列 */
@media (max-width: 1024px) {
  .yokonarabi {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px;
  }
}

/* スマホで1列 */
@media (max-width: 768px) {
  .yokonarabi {
    grid-template-columns: 1fr;
    gap: 20px;
  }
}

/* カード（article）内の基本余白 */
.yokonarabi > article {
  display: flex;
  flex-direction: column;
  gap: 12px;               /* 画像/見出し/本文の間隔 */
}

/* 画像ボックス：16:9でトリミング */
.img-box {
  position: relative;
  width: 100%;
  aspect-ratio: 5 / 3;    /* ブラウザ対応が古い場合は高さ比率で代替してOK */
  overflow: hidden;
  border-radius: 8px;      /* 角丸はお好みで */
    
}

.img-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
    object-position: center center;
    aspect-ratio: 5 / 3;


}

/* 見出しの余白（必要最低限） */
.features > h2 {
  margin: 0 0 18px;
}

.yokonarabi h3 {
  margin: 6px 0 0;
  line-height: 1.35;
}

.yokonarabi h4 {
  margin: 2px 0 0;
  font-weight: normal;     /* サブ見出しは軽めに */
  line-height: 1.5;
    font-size: 1.2vw;
}

/* 本文 */
.yokonarabi p {
  margin: 0;
  line-height: 1.8;
}

/* 画像の読み込み時のチラつき対策（任意） */
.img-box img {
  transform: translateZ(0);
  backface-visibility: hidden;
}

.lp-btn {
  display: inline-block;
  color: #535119;
  background-color: #c8ac6f;
  padding: 10px 20px;
  border-radius: 6px;
  text-decoration: none;
  font-weight: bold;
    font-size: 16px;
    text-align: center;
  transition: background-color 0.3s ease, color 0.3s ease;
}

.lp-btn:hover {
  background-color: #b6995f; /* 少し濃く */
  color: #fff;
}
.tac{
    text-align: center;
}

/* まず上揃え & 下ボタン */
.yokonarabi { width: 96%; margin: auto; display:flex; flex-wrap:wrap; gap: 40px 48px; align-items: stretch; }
.yokonarabi > article { flex:1 1 calc(33.333% - 32px); display:flex; flex-direction:column; }

/* 画像・タイトルの余白調整（上端を揃える） */
.yokonarabi .img-box { aspect-ratio: 16/9; margin:0 0 16px; overflow:hidden; }
.yokonarabi h2 { margin:0 0 14px; line-break:strict; }
.yokonarabi p  { margin:0 0 20px; line-height:2; line-break:strict;}

/* ← ココがキモ：本文高さを揃える（値は調整） */
.yokonarabi article p { min-height: 12em; }  /* 例：12行分相当 */

/* ボタンを最下部へ */
.yokonarabi .lp-btn { margin-top:auto; display:inline-block; }

#lp-content h2{
    text-align: center;
    margin: 40px 0;
    line-height: 2em!important;
}
#lp-content h3{
    margin: 0px 0;
    font-size: 24px;
}
#lp-content h4{
    margin:  0;
    font-size: 22px;
    line-height: 1.6em!important;
    margin-bottom: 16px;
}
#lp-content p{
    font-size: 18px;
    padding-bottom: 20px;
}
/*観光３列*/
.kankou-grid {
    width: 65%;
    margin: auto;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    column-gap: 3%;
    row-gap: 5%;
}
#syuhen {
    height: auto!important;
}

#page-title, #page-title2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
    background: radial-gradient(rgba(0, 0, 0, 0.3), /* 中心の黒 */ rgba(255, 255, 255, 0.1) 50%, /* 徐々に明るく */ rgba(255, 255, 255, 0.2) 80% /* 外側の光 */);
    border-radius: 50%;
    box-shadow: 0 0 3vw rgba(255, 255, 255, 0.2), 0 0 5vw rgba(255, 255, 255, 0.1), 0 0 10vw rgba(255, 255, 255, 0.1);
    aspect-ratio: 1 / 1;
    width: 100%;
    display: flex
;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    letter-spacing: 0.5vw;
}
#fv{
    display: none;
}
.lp-content-inner #fv2 {
    height: 100vh !important;
    aspect-ratio: unset !important;
}
.lp-content-inner #fv2 img{
    height: 100vh !important;
}
#page-title label, #page-title2 label{
    line-break:strict;font-feature-settings: "palt";
}

#lp-content #page-title, #lp-content #page-title2 {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    text-align: center;
    background: transparent!important;
    box-shadow: none!important;
    aspect-ratio: 1 / 1;
    width: 100%;
    text-shadow: 0 0 10px rgba(0, 0, 0, 1.0);
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    letter-spacing: 0.5vw;
}

.red-box{
    background-color: #F35517;
    color: #EEF3EC;
}
.white-box{
    max-width: 1300px;
    margin: 40px auto;
    width: 96%;
    background: #fff;
    border-radius: 20px;
    padding: 30px;
}

.voice-list{
    max-width: 1300px;
    margin: 40px auto;
    width: 96%;
    text-align: center;
    background: #fff;
    border-radius: 20px;
    padding: 30px;
}

/*以下スマホ調整用*/
@media(min-width:751px){
    .sp{
        display: none !important;
    }
}
@media(max-width:750px){
    .pc{
        display: none !important;
    }
}

@media(max-width:750px){
    #page-title, #page-title2{
        max-width: 96%!important;
        margin: auto;
    }
    
    #lp-content .lp-content-inner #fv2{
        width: 100%!important;
    } 
    .lp-content-inner #fv2 img{
  object-fit: cover;

    }
    .yokonarabi{
        display: block;
    }
    .yokonarabi > article{
        display: block;
        margin-bottom: 30px;
    }
    .lp-btn{
        
    }
    #lp-content h2{
        font-feature-settings: "palt";line-break:strict;
        line-height: 1.6em!important;
    }
    #lp-content h4{
    margin:  0;
    font-size: 20px;
    line-height: 1.6em!important;
    margin-bottom: 16px;
}
    .yokonarabi article p{
        min-height:auto;
    }
}



/*固定予約ボタン*/
.fixed-reserve-btn {
  position: fixed;
  background-color: #F35517; /* 赤橙 */
  color: #EEF3EC;           /* 淡いグレー寄り白 */
  font-weight: bold;
  text-align: center;
  text-decoration: none;
  z-index: 9999;
  box-shadow: 0 3px 6px rgba(0,0,0,0.25);
  transition: opacity 0.3s ease;
}

/* スマホ（幅100%） */
@media screen and (max-width: 767px) {
  .fixed-reserve-btn {
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 10px 0;
    font-size: 16px;
  }
}

/* PC（右下フローティング） */
@media screen and (min-width: 768px) {
  .fixed-reserve-btn {
    bottom: 10px;
    right: 10px;
    border-radius: 30px;
    padding: 14px 28px;
    font-size: 18px;
  }
}

.fixed-reserve-btn:hover {
  opacity: 0.9;
}


#lp-dlist dl {
  display: grid;
  grid-template-columns: 10em 1fr;
  gap: 0;
  max-width: 900px;
  margin: 24px auto;
  border-top: 1px solid #ddd;   /* 上枠 */
  border-bottom: 1px solid #ddd;/* 下枠 */
}

#lp-dlist dt,
#lp-dlist dd {
  margin: 0;
  padding: 10px 12px;
  border-top: 1px solid #ddd;
    
}

#lp-dlist dt {
font-weight: normal;
text-align: center;
white-space: nowrap;
background-color: rgba(255, 255, 255, 0.80); /* 白の25%透過 */
}

/* 最初の行は上線を消す */
#lp-dlist dl > dt:first-of-type,
#lp-dlist dl > dd:first-of-type {
  border-top: none;
}

/* スマホ縦積み */
@media (max-width: 768px) {
  #lp-dlist dl {
    grid-template-columns: 1fr;
  }
  #lp-dlist dt {
    border-bottom: 1px solid #ddd;
  }
}