/*
 Theme Name:   Sannoji Theme
 Theme URI:    http://sannoji.jp/
 Author:       SONQ BLACKROCK
 Description:  山王寺サイトのオリジナルWPテーマ
 Text Domain: sannoji-theme
 Version:      1.0
 */
:root {
  /* ビューポート幅の1% = 1vw */
  /* 参考: 1vw = 19.2px (1920px ÷ 100) */
}
html, body {
  margin: 0;
  padding: 0;
}
html, body { margin: 0; padding: 0; }
/* カスタムフォント */
@font-face {
  font-family: 'Kozuka Gothic Pr6N';
  src: url('assets/fonts/KozGoPr6N-Regular.otf') format('opentype');
  font-weight: normal;
  font-style: normal;
}
/* デフォルトフォントをカスタムに設定 */
body {
  font-family: kozuka-gothic-pr6n, sans-serif;
  font-family: "fot-tsukuaoldmin-pr6n", sans-serif;
  font-weight: 300;
  font-style: normal;
}
a:hover {color: #000; text-decoration-line: underline;}
ul { list-style: none;padding:0; }
h2 { margin:0; padding:0;}
/* 全体コンテナ */
.wrapper {
  width: 100%;
  margin: 0;
  position: relative;
  overflow-x: hidden;
}

/* サイドバー */
.sidebar {
  position: fixed;
  top: 0;
  right: 0;
  width: 9.375vw; /* 180/1920*100 */
  height: 100vh;
  background: #fff;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.sidebar ul {
  list-style: none;
  margin: 0;
  padding: 0 0 0;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;  /* 上から詰める */
  padding-top: 3.125vw;        /* 60px相当 */
  box-sizing: border-box;
  height: 100%;
  width: 9.375vw;
}
.sidebar li:not(.menu-space):not(.contact) {
  flex: 0 0 auto;     /* 伸縮させないが内容に合わせて高さ自動 */
  display:brock;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
}
.sidebar li a {
  display: flex;
  flex-direction: column;      /* 縦書きテキストを縦方向メイン軸に */
  justify-content: center;     /* 垂直軸（水平方向）中央揃え */
  align-items: center;         /* 水平軸（縦方向）中央揃え */
  width: 100%;
  padding: 0.5208vw 0; /* 10px/1920*100 */
  color: #666;
  text-decoration: none;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 0.7vw; /* 11.648px/1920*100 */
}
.sidebar li a:hover,
.sidebar li.active a {
  color: #000;
}
.sidebar li.active a:hover {
  text-decoration-line: underline;
}
/* spacer が残りの空白をすべて吸収 */
.sidebar li.menu-space {
  flex: 1 1 auto;     /* 残りスペースを埋める */
}
.sidebar li.contact {
  flex: 0 0 18.5185vh; /* 200 ÷ 1080 × 100 = 18.5185vh */
  background: #5a2e69;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
}
.sidebar li.contact a:hover,
.sidebar li.contact a { color:#FFFFFF;}

.sidebar li.menu_mgn_top{margin-top:2vw;}
/*-------------------------------------------------------
  ◆ 1) .hero （背景：hero.png を 20 秒かけてズーム）
-------------------------------------------------------*/
/* 1. ヒーローに overflow:hidden を確実に */
.hero {
  width: calc(100% - 9.375vw);
  height: 56.25vw; /* 1080px/1920*100 */
  margin-right: 9.375vw;
  position: relative;
  
  overflow: hidden; /* 拡大時にはみ出す部分を隠す */
  /* すでにある background 設定はそのまま */
  background: url('assets/img/hero.png') center/cover no-repeat;
  /* 背景サイズを明示してからアニメーションさせる */
  background-size: 100% 100%;
  /* アニメーションを適用 */
  animation: hero-zoom 20s ease-out forwards;
}
/* 疑似要素で二枚目の画像(top2-80.jpg)を重ねる */
.hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* 二枚目画像を最初から120%で配置 */
  background: url('assets/img/top2-80.jpg') center/cover no-repeat;
  background-size: 120% 120%;
  opacity: 0; /* 初期は透明 */
  z-index: 1; /* 下から 2 番目 */

  /*
    animation: [アニメーション名] [継続時間] [イージング] [遅延] forwards;
    - duration = 8s
    - delay    = 8s
    → 「読み込みから 8 秒は opacity:0」のあと、「8～16 秒にかけて opacity:0→1」
    → 16 秒時点で opacity:1 になり、その後もずっと表示される
  */
  animation: fade-second 8s ease-in-out 8s forwards;
}
/*-------------------------------------------------------
  ◆ 3) .hero::before 三枚目 (top3-80.jpg) を重ねる
     16 秒遅延 → 8 秒かけてフェードイン → 完全表示（forwards）
-------------------------------------------------------*/
.hero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

 /* 三枚目画像を最初から120%で配置 */
  background: url("assets/img/top3-80.jpg") center/cover no-repeat;
  background-size: 120% 120%;
  opacity: 0; /* 初期は透明 */
  z-index: 2; /* ::after より手前 */

  animation: fade-third 8s ease-in-out 16s forwards;
}

/*-------------------------------------------------------
  ◆ 4) キーフレーム定義
     A) hero-zoom （背景ズーム用）
     B) fade-second （二枚目フェードイン用）
     C) fade-third  （三枚目フェードイン用）
-------------------------------------------------------*/
@keyframes hero-zoom {
  from {
    background-size: 100% 100%;
  }
  to {
    background-size: 120% 120%;
  }
}

@keyframes fade-second {
  0% {
    opacity: 0;
    background-size: 120% 120%;
  }
  100% {
    opacity: 1;
    background-size: 100% 100%;
  }
}

@keyframes fade-third {
  0% {
    opacity: 0;
    background-size: 120% 120%;
  }
  100% {
    opacity: 1;
    background-size: 100% 100%;
  }
}

/*-------------------------------------------------------
  5) hero-overlay（SVGロゴ）を読み込み後3秒かけてフェードイン
     その後はずっと表示しておきたいので forwards 指定
-------------------------------------------------------*/
.hero-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  z-index: 2; /* ::after より手前に出す */
}

.hero-text {
  width: 10.15625vw;  /* 195px ÷ 1920px ×100 */
  height: 30.578vw;   /* 587px ÷ 1920px ×100 */
  margin-bottom: 1.0417vw; /* 20px ÷ 1920px ×100 */

  opacity: 0; /* 初期は透明 */
  animation: fade-in 3s ease-in forwards; /* 3秒かけて不透明に */
}

.hero-seal {
  width: 4.1667vw; /* 80px ÷ 1920px ×100 */
}

/*-------------------------------------------------------
  6) fade-in キーフレーム（hero-text 用）
     0% : opacity:0
     100%: opacity:1
-------------------------------------------------------*/
@keyframes fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/* ------------各 section 基本------------- */
section {
  width: calc(100% - 9.375vw);
  margin-right: 9.375vw;
  position: relative;
}

/* 山王寺について */
.about-section {
  background: rgba(90, 45, 100, 0.05); /* #5a2d64 at 5% opacity */
  padding: 10.417vw 0 5.208vw; /* 200px,100px/1920*100 */
}
.about-inner {
  width: 75vw; /* 1440/1920*100 */
  height: 31.25vw; /* 600/1920*100 */
  margin: 0 auto;
  position: relative;
}
.about-image {
  float: left;
  width: 40%;
  margin-right: 1.0417vw; /* 20px */
}
.about_img {
  width: 22.552vw; /* 433/1920*100 */
  height: 4.167vw; /* 80px */
  margin-bottom: 11.458vw; /* 220px */
}
.about_btn {
  width: 12.813vw; /* 246/1920*100 */
  height: 2.5vw;    /* 48px */
  margin-top: 1.0417vw;
  display: block;
}
.about-text {
  position: absolute;
  top: 0;
  right: 0;
  writing-mode: vertical-rl;
  text-orientation: upright;
  font-size: 1.083vw;
  line-height: 1.8;
  height: 31.25vw;
  overflow: hidden;
}
.about-text h2 {
  line-height: 3.125vw; /* 2.4em*1.3*16/1920*100 */
}
.about-text p {  /* cemetery-desc と同様のスタイル, 縦書き */  
  font-size: 1.083vw;  /* 16px/1920*100 */  
  line-height: 1.8;  
  display: block;  
}
/* 葬儀・納骨・法事 */
.services-section { background: rgba(90, 45, 100, 0.05); padding: 0; }
.services-container { display: flex; }
.services-left {
  position: relative; /* オーバーレイ用に基準定位 */
}
.services-left .services-png {
  width: 27.083vw; /* 520/1920*100 */
}
.services-svg {
  position: absolute;
  top: 50%; left: 50%; transform: translate(-50%,-50%);
  width: 1.927vw; /* 37/1920*100 */
  height: 22.969vw; /* 441/1920*100 */
}
.services-right {
  flex: 1;
  display: flex;
  align-items: center;
  padding-left: 6.25vw; /* 120/1920*100 */
  padding-right: 8vw;
}

.services-desc {
  font-size: 1.083vw; /* ≈1.3em*16/1920*100 */
  margin: 4.167vw 0;  /* 80/1920*100 */
}
.services-title { font-size: 2.5vw; color:#5a2e69; margin: -1.563vw 0 1.25vw; }

/* 山王寺霊園 */
.cemetery-section { background: rgba(90, 45, 100, 0.05); padding: 0 0 0 9.375vw;box-sizing: border-box;}
.cemetery-container { display: flex; height: 46.875vw; /*900/1920*100*/ }
.cemetery-left {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center; /* 縦中央 */
  padding-right: 2.083vw;
  padding-bottom: 10vw;
  background: none;
}

.cemetery-title { color:#5a2e69; margin: -1.563vw 0 1.25vw; }
.cemetery-desc { font-size: 1.083vw; line-height:1.8; margin: 4.167vw 0; padding-right:3vw;}
.cemetery-png { width: 27.083vw; }
.cemetery-right {
  position: relative;
  width: 27.083vw; /* 520/1920*100 */
}
.cemetery-svg {
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.927vw;
  height: 25.78vw;
}

/* 年中行事 */
.events-section {
  background: url('assets/img/gyouji.png') center/cover;
  background-repeat: repeat-x;
  height: 56.25vw;
  padding: 0 9.375vw 10.417vw;
}
.gyouji-title { color:#5a2e69; margin: 0; width:17.6042vw}
.events-text-wrap { font-size:1.083vw; color:#fff; line-height:1.8; margin:4.167vw 0; }
.events-overlay { position:absolute; bottom:10.417vw; left:9.375vw; }
.events-overlay h2 { margin:0 0 -1vw 0; padding:0;}
/* お知らせ */
.news-section { background:url('assets/img/news_bg.png') center/cover; padding:10.417vw 9.375vw; }
.news-subtitle { font-size:0.85vw; color:#fff; margin-bottom:2.4vw; }
.news-heading { font-size:2.5vw; color:#fff; margin:-1.563vw 0 2.083vw; }
.news-items { list-style:none; margin:4.167vw 0; padding:0; width:80%}
.news-date { display:flex; align-items:center; margin-bottom:0.417vw; }
.news-date span { width:6.25vw; font-size:0.833vw; color:#ddd; margin-right:0.833vw; }
.news-link { font-size:0.938vw; color:#fff; text-underline-offset: 0.3vw;}
.news-link:hover { color:#fff;font-weight: bold;text-decoration: none;}
.news-desc { font-size:0.833vw; color:#fff; line-height:1.8; margin-bottom:0; }
.news-item { border-top:0.052vw solid rgba(255,255,255,0.5); padding:1.563vw 0; }
.news-item:last-child { border-bottom:0.052vw solid rgba(255,255,255,0.5); }

/* 交通案内 */
.access-section { background: rgba(90, 45, 100, 0.05); padding:4.167vw 1.042vw; }
.access-inner { width:75vw; margin:0 auto; }
.access-title { font-size:2.5vw; color:#5a2e69; margin:-1.563vw 0 1.25vw; }
.access-subtitle { font-size: 0.85vw;margin-bottom: 2.4vw;}
.access-list { margin:4.167vw 0;}
.access-list li { margin-bottom:0.417vw; font-size:0.833vw; }
.access-map { text-align: center; margin:4.1667vw 0 1.0417vw 0;}
.access-map iframe { width:100%; height:23.438vw; border:0; border-radius:0.52vw; }

/* フッター */
.footer-section { background:url('assets/img/footer_bg.png') center/cover no-repeat; padding:10vw 9.375vw; }
.footer-container { display:flex; align-items:flex-start; }
.footer-left { flex:none; width:15.625vw; margin-right:2.083vw; }
.footer-left img { height:15.625vw; width:auto; display:block; margin-top: 1vw;}
.footer-right { flex:1; display:flex; flex-direction:column; color:#fff; font-size:1.083vw; }
.footer-contact .footer-tel,
.footer-contact .footer-fax { font-size:2vw; }
.footer-nav { margin:2vw 0; }
.footer-nav a { color:#fff; font-size:0.729vw; text-decoration:underline; margin-right:3.125vw; }
.footer-copy { font-size:0.729vw; color:#fff; }
.footer-hours { margin:0;}
.footer-address { margin:0;}
.footer-tel { margin-right:2vw;}

/* トップへ戻る */
.to-top {display:none;}
/*
.to-top { position:fixed; bottom:2.083vw; right:calc(200px/1920*100vw); z-index:1000; }
.to-top img { width:1.667vw; height:1.875vw; }
*/
/* 詳細はこちらボタン共通スタイル */
.about_btn,
.services-btn,
.cemetery-btn,
.events-overlay .btn {
  display: inline-block;
  width: 12.813vw; /* 246px ÷ 1920px × 100 */
  height: 2.5vw;   /* 48px ÷ 1920px × 100 */
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  transition: background-image 0.3s ease;
  /* テキストリンクの場合は色指定 */
  color: #fff;
  text-decoration: none;
}

/* マウスオーバー時に別SVGに切り替え */
.about_btn:hover,
.services-btn a:hover,
.cemetery-btn a:hover,
.events-overlay .btn:hover {
  background-image: url('assets/svg/btn_f.svg');
}

/* 一覧ボタンは別SVGを使う */
.btn-ichiran {
  display: inline-block;
  width: 12.813vw;
  height: 2.5vw;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
  transition: background-image 0.3s ease;
}

.btn-ichiran a:hover {
  background-image: url('assets/svg/ichiran_btn.svg');
}

/* 見出し SVG */
.access-title {
  display: block;
  width: 16.770833vw; /* 323px/1920*100 */
  height: auto;
  margin: 1vw 0 0 0;      /* 他のセクションと同じ余白に */
}
.services-title {
  display: block;
  width: 22.65625vw; /* 435px/1920*100 */
  height: auto;
  margin: 1vw 0 0 0;
}
.cemetery-title {
  display: block;
  width: 13.802083vw; /* 265px/1920*100 */
  height: auto;
  margin: 1vw 0 0 0;
}
.news-heading {
  display: block;
  width: 11.09375vw; /* 213px/1920*100 */
  height: auto;
  margin: 1vw 0 0 0;
}
/* ---- 共通：メニューアイコン非表示（PC） ---- */
.mobile-menu-icon {
  display: none;
}

/* -------------------------------
   レスポンシブ（スマホ／タブレット）用設定
   ※必要に応じて「max-width: 768px」などを調整してください
--------------------------------- */

@media screen and (max-width: 768px) {

  /* 2. 各セクションを全幅にする */
  section {
    width: 100% !important;
    margin-right: 0 !important;
  }

  /* ----------------------------------------------------------
     About セクション：about-image 上、about-text 下 に縦並び
     ---------------------------------------------------------- */
  .about-section{
   padding:0 0 5.208vw;
  }
  .about-text .danraku1{
    display:block;
    flex-direction:column;
    height:90vw;
    margin:0 0 5vw 0;
  }
  .about-text .danraku2{
    display:block;
    flex-direction:column;
    height:90vw;
    margin:0 -4vw 15vw 0;
  }
  .about-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    height: auto !important; /* 高さを自動に */
  }
  .about-image,
  .about-text {
    position: static !important;
    width: 100% !important;
    margin: 20vw 0 20vw;
  }
  .about_img { width:100%;margin-bottom:10.417vw;}
  .about-text h2{
    font-size:7vw !important;
    margin-left:8vw;
  }
  .about-text{
    display:contents;
    height:90vw;
  }
  .about-inner{
    width:85vw;
    height:auto;
  }
  about-text{
    display:contetns;
  }
  /* ----------------------------------------------------------
     Services セクション：services-left 上、services-right 下 に縦並び
     services-left の画像を横幅いっぱいに広げる
     ---------------------------------------------------------- */
  .services-title{
    margin:10.417vw 0;
  }
  .services-container {
    display: contents;
  }
  .services-left,
  .services-right {
    display: contents;
    position: relative !important;
    width: 100% !important;
    margin: 0 0 1.25rem; /* 下に余白を 20px（目安） */
  }
  services-left{
    order; 2;
    height:60vw;
  }
  services-right{
    display: contents;
    order; 1;
    height:60vw;
  }
  .services-text-wrap{
    padding-left:5vw;
    padding-top:20vw;
  }
  .services-left .services-png {
    width: 100% !important;
    height: auto !important;
  }
  .services-svg{
    top:26%;
    width:8vw;
    height:auto;
  }
  .services-desc{
    margin: 0 0 20vw 0;
  }
            
  /* ----------------------------------------------------------
     Cemetery セクション：cemetery-right（画像）を上、cemetery-left（テキスト）を下 に縦並び
     cemetery-right の画像を横幅いっぱいに広げる
     ---------------------------------------------------------- */
  .cemetery-container {
    display: flex !important;
    flex-direction: column !important;
    height: auto !important;
  }

  /* image on top */
  .cemetery-right {
    order: 0 !important;
    position: static !important;
    width: 100% !important;
  }
  .cemetery-right .cemetery-png {
    width: 100% !important;
    height: auto !important;
  }

  /* text & button underneath */
  .cemetery-left {
    order: 1 !important;
    position: static !important;
    width: 100% !important;
    margin: 0 0 10vw;
    padding-left:5vw;
    padding-top:20vw;
  }
  .cemetery-section{
    padding:0;
  }
  .cemetery-svg{
    top:26%;
    width:8vw;
    height:auto;
  }
  .cemetery-title{
    margin:10.417vw 0;
  }
  .cemetery-desc{
    margin-bottom:20vw;
    padding-right:3vw;
    word-break: normal; /* 単語の分割はデフォルトに依存 */
    line-break: strict; /* 禁則処理を厳格に適用 */
  }
  /* ----------------------------------------------------------
     Hero セクション：高さを 100vh、縦型比率で左右を切って表示
     ---------------------------------------------------------- */

  /* ヒーローを画面いっぱいに、左右は cover で切り取る */
  .hero {
    width: 100%;               /* 横幅をフルに */
    height: 100vh !important;             /* 高さを画面高さいっぱいに */
    background-position: center center !important; /* 中央を表示 */
    background-repeat: no-repeat;
    /* ← cover は外す */
    background-size: auto 100%;
    animation: hero-zoom 20s ease-out forwards !important;
  }
  /* 二枚目・三枚目も cover に切り替え */
  .hero::after,
  .hero::before {
    background-size: auto 120%; /* 初期状態は120% */
  }
  
  /* ■ 3) モバイル用ズームキーフレーム */
  @keyframes hero-zoom {
    from { background-size: auto 100%; }
    to   { background-size: auto 120%; }
  }

  /* ■ 4) （必要なら）フェード用キーフレームも background-size を調整 */
  @keyframes fade-second {
    0%   { opacity: 0; background-size: auto 120%; }
    100% { opacity: 1; background-size: auto 100%; }
  }
  @keyframes fade-third {
    0%   { opacity: 0; background-size: auto 120%; }
    100% { opacity: 1; background-size: auto 100%; }
  }

  /* ■ 5) 2枚目・3枚目のアニメーション例 */
  .hero::after {
    content: "";
    position: absolute; inset: 0;
    background: url('assets/img/top2-80.jpg') center no-repeat;
    opacity: 0;
    animation:
      fade-second 8s ease-in-out 8s forwards,
      hero-zoom-mobile 8s ease-out 8s forwards reverse;
  }
  .hero::before {
    content: "";
    position: absolute; inset: 0;
    background: url('assets/img/top3-80.jpg') center no-repeat;
    opacity: 0;
    animation:
      fade-third 8s ease-in-out 16s forwards,
      hero-zoom-mobile 8s ease-out 16s forwards reverse;
  }
  /* （もし .hero-text のサイズも崩れるようであれば、横幅だけ小さめに調整） */
  .hero-text {
    width: 40vw !important;               /* 画面幅の60%に抑える例 */
    height: auto !important;
  }
  /* ----------------------------------------------------------
     Year-round Events（年中行事）セクション：画像は全幅
     ---------------------------------------------------------- */
  .events-section{
    height:150vw;
    padding-left: 5vw;
  }
  .events-text-wrap{
    font-size:4vw;
    margin:20vw 0;
  }
  .events-overlay img{
    width:70vw;
    height:auto;
    bottom:0;
  }
  .events-overlay .btn{
    width:50vw;
    height:auto;
  }
  .events-overlay{
    left:5vw;
    margin-bottom: 10vw;
  }
  /* ----------------------------------------------------------
     News セクション：ニュースリストを全幅にして左右余白をなくす
     ---------------------------------------------------------- */
  .news-section {
    /* もともとの上下パディングに、見出しの上マージン分を追加 */
    padding: 20vw 4vw 10.417vw;
    /* 左右パディングはお好みで調整 */
    background: url('assets/img/news_bg.png') center/cover no-repeat;
    background-size: cover;
    box-sizing: border-box;
  }

  .news-section .news-container {
    padding: 0 4vw;
    margin: 0 auto;
  }

  /* 見出しの上マージンをリセット */
  .news-heading {
    margin-top: 0;
    margin-bottom: 2.083vw; /* 下だけスペース */
  }
  .news-items {
    width: 100% !important;
    margin:0;
  }
  .news-date{
    display:grid;
  }
  .news-date span{
    font-size:4vw;
    width:auto;
  }
  .news-link{
    font-size:4vw;
  }
  .news-more{
    margin-top: 20vw;
    margin-bottom: 0;
    padding-bottom: 20vw;
  }
  /* ----------------------------------------------------------
     Access セクション：地図 iframe を全幅にする
     ---------------------------------------------------------- */
  .access-list{
    margin-top:10.417vw;
  }
  .access-map iframe {
    width: 100% !important;
    height: auto !important;
  }
  .access-inner{
    width:auto;
    margin:0 5vw;
    padding-top:20vw;
  }
  .access-inner li{
    font-size:4vw;
  }
  .access-map{
    margin: 20vw 0;
  }
  .access-section{
    padding-top:0;
  }
            
  /* ----------------------------------------------------------
     Footer セクション：縦並び
     ---------------------------------------------------------- */
  
  .footer-section{
    padding:20vw 0 20vw 0;
  }
  .footer-container {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .footer-left {
    width: 100% !important;
    margin: 0 0 1vw 0;
  }
  .footer-right{
    padding:0;
    font-size:4vw;
    text-align: center;
  }
  .footer-left img{
    margin:0 auto 20vw auto;
    height:60vw;
  }
  .footer-contact .footer-tel,
  .footer-contact .footer-fax{
    font-size:5.5vw;
  }
  .footer-nav a{
    font-size:3vw;
    white-space: nowrap;
  }
  .footer-copy{
    font-size:3vw;
    text-align:center;
  }
  /* タイトルSVGを適度に拡大 */
  .about_img,
  .services-title,
  .cemetery-title,
  .news-heading,
  .access-title {
    height: 15vw !important;
    width:auto;
    max-width: none !important;
    margin: 0 0 20vw 0;
  }
  /* 詳細ボタンを大きめに */
  .about_btn,
  .services-btn,
  .cemetery-btn,
  .btn-ichiran {
    width: 50vw !important;
    height: auto !important;
    background-size: contain !important;
  }
  .cemetery-btn{
    margin-top: 20vw;
  }
  .services-btn{
    margin-top:20vw;
    margin-bottom:20vw;
  }
  /* テキストを読みやすく大きめに */
  .about-text p,
  .services-desc,
  .cemetery-desc,
  .news-desc {
    font-size: 4vw !important;
    line-height: 1.6 !important;
    margin: 0;
    margin-right: 4vw;
  }
  .news-item{
    padding-right:5vw;
  }
  /* アイコンを右上に固定表示 */
  .mobile-menu-icon {
    display: block;
    position: fixed;
    top: 1rem;               /* お好みのマージンに */
    right: 1rem;
    width: 2.5rem;           /* 例：40px 相当 */
    height: auto;
    z-index: 200;            /* sidebar より上に */
    cursor: pointer;
  }

  /* 初期は sidebar を画面外に隠す */
  .sidebar {
    transform: translateX(100%);
    transition: transform 0.3s ease;
  }

  /* .sidebar.open が付いたら、表示位置へ */
  .sidebar.open {
    transform: translateX(0);
  }

  /* 背後を半透明のオーバーレイにしたい場合 */
  .sidebar::before {
      content: "";
      position: fixed;
      top: 0; left: 0;
      width: 100%; height: 100%;
      background: rgba(0,0,0,0.4);
      z-index: -1;  /* sidebar の z-index より小さく */
    }
  
  /* スマホ用サイドバー本体 */
  .sidebar {
    position: fixed;
    top: 0;
    right: 0;
    width: 50vw;          /* 画面幅の80%、お好みでmax-width:300px等を追加してもOK */
    max-width: 300px;
    height: 100vh;
    background: #fff;
    box-shadow: -2px 0 8px rgba(0,0,0,0.2);
    transform: translateX(100%);
    transition: transform 0.3s ease;
    z-index: 1000;
    overflow-y: auto;
  }
  /* open クラスがついたら表示 */
  .sidebar.open {
    transform: translateX(0);
  }

  .sidebar ul {
    display: flex;
    flex-direction: column;
    padding: 1em;
    margin: 0;
    width:50vw;
    background:#FFF;
  }
  /* spacer は残りを埋める */
  .sidebar li.menu-space {
    flex: 1;
  }
  /* 各メニュー項目 */
  .sidebar li:not(.menu-space) {
    margin-bottom: 1em;
  }
  .sidebar li a {
    display: block;
    padding: 0.75em 1em;
    color: #333;
    font-size: 1rem;
    text-decoration: none;
    border-radius: 4px;
    writing-mode:unset;
  }
  .sidebar li a:hover,
  .sidebar li.active a {
    background: rgba(90, 45, 100, 0.1);
    color: #5a2e69;
  }
  /* お問い合わせだけ特別 */
  .sidebar li.contact {
    margin-top: 1em;
    background: #5a2e69;
    border-radius: 4px;
  }
  .sidebar li.contact a {
    color: #fff;
  }
}