@charset "UTF-8";


body	{
	margin: 0;
	font-family:  "Yu Mincho", "游明朝",
               "Hiragino Mincho ProN",
               "HGS明朝E", "MS P明朝", serif;
	color: #333;
	background:#f0efea;
}
	
p {
  font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
}

body.menu-lock {
  overflow: hidden;
}

/* 最蔵寺だけ大きく */
.site .temple-name {
  font-size: 1.2em;
}

.site .mountain-name {
  font-size: 0.9em; /* 光照山を少し小さく */
}

/* サイト名 */
.site h1 a	{color: #333;
    text-shadow: 0 1px 0 rgba(0,0,0,0.08);
    text-decoration: none;
    white-space: nowrap;
    font-family: "Yu Mincho", "游明朝",
               "Hiragino Mincho ProN",
               "HGS明朝E", "MS P明朝", serif;
}

h2 {
  padding: 0.5em;              /* 文字周りの余白 */
  color: #494949;              /* 文字色 */
  background: #fffaf4;         /* 背景色 */
  border-left: solid 5px #ffaf58; /* 左線（実線 太さ 色） */
  margin-top: 1.5em;           /* 上の文章との距離 */
  margin-bottom: 1em;          /* 下の文章との距離（必要に応じて調整） */
}

.divider {
  border-bottom: 1px solid #ccc;
  margin: 2em 0;
}

.space {
  margin-bottom: 2em;  /*下に行間空けたい時用*/
}
.space-mt {
  margin-top: 4em;  /*上に行間空けたい時用*/
}

.poem {
  margin: 4em 0 2.5em;  /*上  左右  下*/
}

.poem p {
  margin: 0 0 1.8em;
  line-height: 2;
}

.poem p:last-child {
  margin-bottom: 0;
}

/*リンクページcss*/
.link-list li {
  padding: 5px 0;
}
.link-title {
  font-family: 'メイリオ', Meiryo,'Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3',sans-serif;
  font-weight: 400;
  font-size: 1.08rem;
  letter-spacing: 0.04em;
  color: #2f2a24;
  line-height: 1.3;
  text-decoration: none;
}
.link-title:hover {
  text-decoration: underline;
  text-underline-offset: 4px;
}
.link-desc {
  font-size: 0.9rem;
  color: #6b6257; 
  margin: 2px 0 10px;
  padding-left: 1em;
}

#pagetop {
  position: fixed;
  right: 40px;
  padding: 12px;
  border: none;
  border-radius: 50%;
  background-color: #333;
  cursor: pointer;
  z-index: 1000;

  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.3s ease, transform 0.3s ease, bottom 0.2s ease;

  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

#pagetop.visible {
  opacity: 1;
  transform: translateY(0);
}

#pagetop:hover {
  background-color: #555;
}

#pagetop svg {
  width: 24px;
  height: 24px;
  stroke: white;
}

@media (max-width: 768px) {
  #pagetop {
    right: 20px;
    padding: 10px;
  }

  #pagetop svg {
    width: 20px;
    height: 20px;
  }
}

/*PC向け縦書きナビ＋ヘッダー画像*/
/* ナビゲーション */
 #globalnavi	{display:block;}
 #menu	 { display:none; }
 
 
#globalnavi {
  float: right;
  width: auto;
  height: auto;
  background-color: #5E747A; /* 灰青 */
  padding: 10px 20px;        /* 元に戻す */
}


#globalnavi ul{
  display: flex;
  gap: 18px;
  align-items: flex-start;
  list-style: none;   /* ← ここで●を消す */
  margin: 0;          /* ブラウザのデフォルト余白も消す */
  padding: 0;
}

#globalnavi li{
  align-items: flex-start;
   width: auto;   /* ← 変更 */
  margin: 0;
  padding: 0;
}

#globalnavi a{
display: block;            /* ← inline-block → block に変更 */
  writing-mode: vertical-rl;
  text-orientation: mixed;
  font-size: 16px;
  line-height: 1.9;
  padding: 12px 8px;
  color: #F2F3F1;
  text-decoration: none;
  position: relative;
}

#menu1 a,
#menu2 a,
#menu3 a,
#menu4 a,
#menu5 a,
#menu6 a,
#menu7 a,
#menu8 a,
#menu9 a,
#menu10 a {
  background: none;
}



#globalnavi li:hover {
  background-color: rgba(255,255,255,0.12);
}


/* ヘッダー画像 */
.topimg {
  display: block;
  width: 100%;
  height: auto;
}


/* お知らせ */

.news		{ padding-left:40px;
			padding-right:40px}

	
	
.news h1	{margin-top: 0;
	margin-bottom: 5px;
	font-size: 18px;
	color: #333}

.news ul	{margin: 0;
	padding: 0;
	list-style: none}

.news li a	{display: block;
	padding: 5px;
	border-bottom: dotted 2px #dddddd;
	color: #4d433e;
	font-size: 14px;
	text-decoration: none}

.news li a:hover{
    background-color: #eeeeee;
	text-decoration: underline}

.news time {
  color: #888888;
  font-weight: bold;
  float: left;
  width: 60px}
  

.news a:after	{content: "";
	display: block;
	clear: both}


.news .text	{float: none;
	width: auto;
	margin-left: 60px}


			
/* 概要 */
.gaiyou a	{display: block;
	background-color: #f0efea;
	color: #4d433e;
font-weight: normal; /* 400 */
letter-spacing: 0.03em;
  line-height: 1.7;
	text-align: center;
	text-decoration: none;
	padding:2px}

.gaiyou a:hover	{opacity: 0.8;
				text-decoration: underline}

hr {
  border-width: 1px 0 0 0; /* 太さ */
  border-style: solid; /* 種類 */
  border-color: silver; /* 色 */
}


/* フッターロゴ */
.box7	{
		text-align:center;
	background-color: #f0efea;
	padding:20px}

/* フッター電話番号 強調 */
.box8 .tel-link {
  font-size: 20px; /* フッターだけ */
}

/* 電話アイコンだけ大きく */
.tel-link .fa-square-phone {
  font-size: 24px;  /* アイコンだけ24px */
}

/* 電話アイコン */
.tel-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 12px;
  margin-top: 16px;
  font-weight: 700;
  color: #EAF6FA;

  text-decoration: none;
  background: rgba(234, 246, 250, 0.18);
  border-radius: 8px;
}

.tel-link:hover,
.tel-link:active {
  background: rgba(234, 246, 250, 0.28);
}

/* コピーライト */
.copyright p	{
	color: #e0e0e0;
	font-size: 14px}
	

address {
	font-style:normal;
	color: #ffffff;
	rgba(255,255,255,0.85);
	line-height: 1.7;
	font-size: 15px}
	

/* snsアイコンセット */
 .sns-icons {
  margin-top: 10px;
  text-align: center;
}

.sns-icons a {
  display: inline-block;
  margin: 0 8px;
  padding: 6px;
}

.sns-icons img {
  width: 24px;   /* 好きなサイズに */
  height: auto;
  transition: opacity 0.3s;
  filter: brightness(0) invert(1);
}

.sns-icons a:hover img {
  opacity: 0.7;
}
	


/* BOX8をバーの形にする */
.box8 {
  padding-top: 20px;
  padding-bottom: 30px;
  background-color: #5E747A;}


/* ボックスの左右 */
.boxA, .box4, .box6, .box8
	{padding-left: 20px;
	padding-right: 20px}


/* ボックスの上下 */
.boxA {
    padding-top: 0;
  }

  .boxA #globalnavi {
    margin-top: 0;
  }
.box3 {
  padding-bottom: 24px;
}

.box4 {
  background-color: #ffffff;
  padding: 32px 40px;

  margin-top: -24px;      /* ← ここだけ */
  margin-bottom: 32px;

  position: relative;
  z-index: 10;

  box-shadow:
    0 6px 18px rgba(0,0,0,0.06),
    0 2px 6px rgba(0,0,0,0.04);
}

.box6	{padding-top: 20px}

.box6-1, .box6-2, .box6-3
	{
	padding: 30px;
	}

.box9	{
	padding: 20px;
	color:#333333;
	background-color: #ffffff;
	
}
/* box8（共通） */
.box8-inner {
  display: grid;
  align-items: center;
}
	
/* お寺紹介文（共通） */
.news .temple-text {
  color: #4b3621;
  background: #f8f6f2;
  padding: 12px 16px;
  border-left: 4px solid #9e9997;
  margin-bottom: 40px;
  line-height: 1.8;
}

/* アクセスページ用（共通でOK） */
.map {
  margin: 20px 0;
}

.map iframe {
  width: 100%;
  height: 400px;
  border: 0;
}

.box9 a[href^="tel:"] {
  color: #4b3621;
  font-weight: bold;
  text-decoration: none;
}

/* スケジュール */
.list-1 {
  font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
    list-style-type: disc;
    list-style-position: inside;
}

.list-1 li {
    padding: .5em;
}

.list-1 li:not(:last-child) {
    border-bottom: 1px dashed #a8b1b8;
}

.list-1 li::marker {
    color: #a8b1b8;
    font-size: 1.1em;
}


/* Q&Aページ */
.qa-1 {
  font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
}

.qa-1 dt {
  margin-bottom: 1em;
  font-weight: 600;
}

.qa-1 dt::before {
  content: "Q.";
  margin-right: .4em;
}

.qa-1 dd {
  margin: 0 0 2.5em;
  padding: 1em 1.5em;
  background-color: #f2f2f2;
}

.qa-1 dd::before {
  content: "A.";
  margin-right: .4em;
  font-weight: 600;
}

.qa-1 dd::first-line {
  font-weight: 600;
}


/* 1枚写真用CSS */

.temple-photo{
  margin:60px auto;
  text-align:center;
  }

.temple-photo img{
  width:100%;
  max-width:900px;
  height:auto;
  display:block;
  margin:auto;
}

.temple-photo figcaption{
  margin-top:24px;
   color:#222
  font-family: "Yu Mincho", "Noto Serif JP", serif;
  font-size: 18px;
  font-weight: 500;
  }
  /* スマホ */
@media (max-width:768px){
  .temple-photo img{
    width:95%;
  }
}

/* ========================
   年忌表ページ専用CSS 
   構成：
   1. 共通（全デバイス）
   2. PCのみ
   3. スマホのみ
   4. 印刷のみ
======================== */


/* ========================
   1. 共通（全デバイス）
======================== */

/* 入力フォーム周り */
.nenki-page form {
  margin-bottom: 2em;
}
.nenki-page .nenki-text {
  display: block;
  margin-bottom: 2em;  /* 上下の余白を確保 */
}
.nenki-page input[type="date"] {
  font-size: 1.4em;
  padding: .6em .8em;
  box-sizing: border-box;
  max-width: 100%;
}

/* 計算ボタン */
.nenki-page button.nenki-btn {
  font-size: 1em;
  padding: .6em 1.2em;
  cursor: pointer;
  margin-left: .5em;
  box-sizing: border-box;
}

/* 表・基準日・印刷ボタンを同じ幅＆中央に */
.nenki-results {
  width: 80%;
  margin: 0 auto;
}

/* 表は親に任せる */
.nenki-page .nenki-table {
  width: 80% !important;  /* 親の幅に関係なく80％ */
  margin: 0 auto;          /* 中央寄せ */
  border-collapse: collapse; 
}

/* 基準日は左寄せのまま */
.nenki-results .base-date {
  width: 80%;
  margin: 0 auto 1em;
  text-align: left;
}

/* 表デザイン */
.nenki-page .nenki-table th {
  padding: .8em;
  border: 1px solid #ccc;
  background: #f2f2f2;
}

.nenki-page .nenki-table td {
  padding: .8em;
  border: 1px solid #ccc;
}

/* 印刷ボタン（通常時） */
.nenki-page .print-btn {
  display: inline-block;
  font-size: 1em;
  padding: .8em 1.6em;
  margin-top: 1em;
  cursor: pointer;
  box-sizing: border-box;
}


/* ========================
   2. PC表示のみ
======================== */
@media screen and (min-width: 769px) {

  /* フォームを中央に配置 */
  .nenki-page form {
    width: fit-content;   /* 決定打 */
    margin: 0 auto 2em;
    font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
  }

  /* フォーム中身を横並び */
  .nenki-page form label {
    display: inline-flex;
    align-items: center;
    gap: 0.6em;
  }

  /* スマホカードはPCでは非表示 */
  .nenki-page .nenki-card {
    display: none;
  }

  /* 印刷ボタンを強制的に中央 */
  .nenki-page .print-btn {
    display: block !important;
    float: none !important;
    margin-left: auto !important;
    margin-right: auto !important;
    margin-top: 1.5em;
    text-align: center;
  }
}


/* ========================
   3. スマホ表示のみ
======================== */
@media screen and (max-width: 768px) {

  /* 表は非表示 */
  .nenki-page .nenki-table {
    display: none;
  }

  /* カード表示：幅は親幅いっぱい */
  .nenki-page .nenki-card {
    display: block;
    background: #f2f2f2;
    padding: 1em;
    margin-bottom: 1em;
    width: 100%;      /* カードは親幅いっぱい */
    box-sizing: border-box;
  }

  .nenki-page .nenki-card h3 {
    margin: 0 0 .5em;
    font-size: 1.1em;
  }

  /* 親コンテナ：画面幅の90％で中央寄せ */
  .nenki-results {
    width: 100%;       /* カードは親幅いっぱい */
    max-width: none;   /* 幅制限なし */
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
  }

  /* フォーム専用ラッパー */
  .form-wrapper {
    width: 90%;        /* カードより少し狭く */
    max-width: 400px;  /* 任意の最大幅 */
    margin: 0 auto 1em;
    font-family: 'メイリオ', 'Hiragino Kaku Gothic Pro', sans-serif;
  }

  /* フォーム全体：縦並び */
  .form-wrapper form {
    display: flex;
    flex-direction: column;
    gap: 1em;           /* ラベルとボタン間の縦間隔 */
    align-items: center; /* 中央揃え */
  }

  /* ラベル：文字中央、入力欄はフォーム幅に揃える */
  .form-wrapper form label {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1em;        /* 文字と入力欄の間 */
    width: 100%;
    text-align: center;
    white-space: nowrap; /* 文字折り返し防止 */
  }

  /* 日付入力と計算ボタン：フォーム幅に揃える */
  .form-wrapper input[type="date"],
  .form-wrapper button.nenki-btn {
    width: 100%;
    box-sizing: border-box;
    display: block;
    margin: 0;
  }
 /* 基準日を左寄せ */
  .nenki-results .base-date {
    text-align: left;     /* 左寄せ */
    width: 100%;          /* 親幅いっぱい */
    margin: 0 0 1em;      /* 下余白1em */
  }
  /* 印刷ボタンは非表示 */
  .nenki-page .print-btn {
    display: none !important;
  }
}

/* ========================
   4. 印刷用
======================== */
@media print {

  @page {
    margin: 10mm;

    /* 印刷用フッター */
    @bottom-right {
      content: "光照山 最蔵寺（年忌表）";
      font-size: 9pt;
    }
  }

/* 印刷時の表を広げる */
  .nenki-results {
    width: 100% !important;
  }

  /* テーブルを80％に */
  table.nenki-table {
    width: 80% !important;
    margin: 0 auto;
    table-layout: auto !important;
    border-collapse: collapse;
  }

  table.nenki-table th,
  table.nenki-table td {
    padding: 4px 6px;
    border: 1px solid #000;
  }

  /* 画面用UIをすべて非表示 */
  header,
  .boxA,
  .box3,
  nav,
  .divider,
  .nenki-page h2,
  .nenki-page h2 + p,
  .nenki-page form,
  .nenki-page .nenki-card,
  .nenki-page .print-btn,
  .nenki-card,
  .nenki-page > p {
    display: none !important;
  }
  footer {
    display: none !important;
  }
  
* {
    box-shadow: none !important;
    text-shadow: none !important;
  }
  .table-container {
    display: none !important;
  }
  .scroll-note {
    display: none !important;
  } 
  
  /* JSのページトップボタンを印刷しない */
  #pagetop {
    display: none !important;
  }
}

/* =========================
   年忌表（横スクロール表）
========================= */

.table-container {
  display: flex;
  justify-content: center;
  align-items: flex-start;
  gap: 10px;
  width: 100%;
  margin: 20px auto; /* 上下余白はここで調整 */
}

/* 横スクロール制御 */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  display: block;
  position: relative;
}

/* 表本体 */
.table {
  display: grid;
  grid-template-columns: repeat(14, max-content);
  width: max-content;
  margin: 0;
}

.row {
  display: contents;
}

.cell {
  padding: 10px;
  writing-mode: vertical-rl;
  text-orientation: upright;
  white-space: nowrap;
  text-align: left;
  display: block;
}

/* 上段余白調整 */
.row:nth-child(1) .cell {
  padding-top: 20px;
  padding-bottom: 20px;
}

.row:nth-child(2) .cell {
  padding-top: 20px;
}

/* 仕切り線 */
.row.line {
  display: block;
  grid-column: 1 / -1;
  border-bottom: 1px solid #000;
  margin: 10px 0;
  height: 0;
}

/* 右側 縦書きタイトル */
.side-text {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  writing-mode: vertical-rl;
  text-orientation: upright;
  gap: 10px;
  width: auto;
  margin-top: 80px;
}

.side-text .title {
  margin: 0;
  font-size: 24px;
}

.side-text .subtitle {
  margin: 100px 0 0 0;
  font-size: 16px;
  color: #555;
}

/* スクロール案内 */
.scroll-note {
  display: none;        /* PCでは非表示 */
  font-size: 16px;
  color: #666;
  text-align: center;  /* ← 中央寄せ */
  white-space: nowrap;
}

/* スマホ */
@media (max-width: 768px) {
  .scroll-note {
    display: block;
   }

    .side-text .title {
    font-size: 20px;  /* 今より少し小さく */
  }

  .side-text .subtitle {
    font-size: 16px;
  }
}

/* PCのみ 和紙っぽく*/
@media (min-width: 769px) {
  .table-wrapper {
    background: #fffefb;
    border: 1px solid #ddd;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
    padding: 20px;
  }
.side-text {
    gap: 30px;  /* ← タイトルと注釈の間 */
  }
}

/* ########### 599px以下 ########### */
@media (max-width: 699px) {

/* スマホ・タブレットのタップ時の青いハイライトを全体で消す */
*,
*::before,
*::after {
  -webkit-tap-highlight-color: transparent; /* Chrome / iOS用 */
}


   /* ヘッダー全体を基準にする */
  header {
    position: relative;
  }

/*スマホ用に行間調整（現在は未使用）
.news .temple-text {
 line-height: 2em; 
  }
*/

  
  /* 写真の高さ調整 */
  .topimg {
    height: 200px;
    object-fit: cover;
  }

 /* H1（メインタイトル） */
  h1 {
    font-size: 1.7em;   /* 前より大きめに */
    line-height: 1.4;   /* 行間も少し広げて読みやすく */
  }

  /* H2（セクションタイトル） */
  h2 {
    font-size: 1.3em;   /* H1とのバランスを保つ */
    line-height: 1.5;
    padding: 0.5em;
  }

  /* 本文全体 */
  p {
    font-size: 1.05em;  /* ご年配向けに少し大きめ */
    line-height: 1.7;   /* 行間を広めにして読みやすさUP */
  }

  /* 左右余白 */
  .boxA,
  .box4,
  .box6,
  .box8,
  .box9 {
  padding-left: 12px;
  padding-right: 12px;
}

  /* .box9 内のテキスト */
  .box9 p {
    font-size: 1.05em;
    line-height: 1.7;
  }

/* ヘッダーの寺院名 */
.site .temple-name {
  font-size: 28px; /* メインページH1に合わせて大きめ */
  line-height: 1.2; /* 少し余白を詰める */
}

/* ヘッダーの山号 */
.site .mountain-name {
  font-size: 20px; /* H1より控えめにバランス調整 */
  margin-right: 0.3em;
  line-height: 1.2;
}


/* Googleマップ */
.map iframe {
    height: 300px;
  }

/* ナビゲーション */
#globalnavi		{display:none;}
#menu	{display:block;}


#menu ul	{margin: 0;
	padding: 0;
	list-style: none}

#menu li a	{display: block;
 padding: 14px 10px;   /* タップしやすく */
  color: #2f3f44;
  font-size: 16px;      /* 文字サイズUP */
  text-decoration: none;
  line-height: 1.6;
 border-bottom: 1px solid #ddd;
}

#menu li a:hover	{background-color: #eeeeee}

/* スマホ用box8デザイン */
.box8-inner {
    grid-template-columns: 1fr;
    text-align: center;
  }

  .sns-icons { order: 1; }
  .box8-2   { order: 2; }  /* 住所 */
  .box8-1   { order: 3; }  /* コピーライト */


/* ===============================
   ハンバーガーメニュー
   =============================== */

/* チェックボックス非表示 */
#menu-cb {
  display: none;
}

/* ハンバーガーメニュー本体 */
#ham-menu {
  position: fixed;
  top: 0;
  right: -200px;              /* 初期は右に隠す */
  width: 200px;
  height: 100%;
  padding: 10px;
  padding-top: 60px;          /* アイコンと被らない */
  box-sizing: border-box;
  background-color: #94b2bd;
  box-shadow: -4px 0 12px rgba(0,0,0,0.15);
  z-index: 1000;
  transition: transform 0.3s ease;
   overflow-y: auto;                 /* ← 追加 */
  -webkit-overflow-scrolling: touch;/* ← 追加 */
}

/* メニュー開 */
#menu-cb:checked ~ #ham-menu {
  transform: translateX(-200px);
}

/* 背景（半透明＋クリック可） */
#menu-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.5);
  opacity: 0;
  z-index: 999;
  transition: opacity 0.3s ease;
  pointer-events: none;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

#menu-cb:checked ~ #menu-background {
  opacity: 1;
  pointer-events: auto;
}

/* ハンバーガーアイコン */
#menu-icon {
  position: fixed;
  top: 10px;
  right: 10px;
  width: 60px;
  height: 60px;
  background-color: #f0efea;
  cursor: pointer;
  z-index: 1001;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease-out;
  -webkit-tap-highlight-color: transparent;
}

/* ホバー */
#menu-icon:hover {
  transform: scale(1.05);
}

/* 開閉アイコン切替 */
#menu-icon .icon.open,
#menu-icon .text.open-text {
  display: block;
}
#menu-icon .icon.close,
#menu-icon .text.close-text {
  display: none;
}

#menu-cb:checked + #menu-icon .icon.open,
#menu-cb:checked + #menu-icon .text.open-text {
  display: none;
}

#menu-cb:checked + #menu-icon .icon.close,
#menu-cb:checked + #menu-icon .text.close-text {
  display: block;
}

/* 開いたときの背景色 */
#menu-cb:checked + #menu-icon {
  background-color: #94b2bd;
}

/* アイコン文字 */
#menu-icon .icon {
  font-size: 36px;
  line-height: 1;
  color: #111;
}

#menu-icon .text {
  font-size: 12px;
  font-weight: bold;
  line-height: 1;
}

/* メニュー内リスト */
#ham-menu ul {
  list-style: none;
  margin: 0;
  padding-left: 10px;
}

#ham-menu ul li a {
  display: block;
  padding: 12px 10px;
  font-size: 1.15rem;
  font-weight: 700;
  color: #2f3f44;
  text-decoration: none;
}

#ham-menu ul li a:hover,
#ham-menu ul li a:active {
  color: #1f5f73;
  background-color: rgba(255,255,255,0.35);
}


/* SNSアイコン */
#ham-menu .sns-icons li::after {
  content: none !important;
}

#ham-menu .sns-icons a {
  opacity: 0.8;
  text-decoration: none;
  background: none;
  border-bottom: none !important;
  transition: opacity 0.2s ease;
}

#ham-menu .sns-icons a:hover {
  opacity: 1;
}

#ham-menu .sns-icons {
  display: flex;
  justify-content: center;
  gap: 16px;
  margin-top: 1em;
}

#ham-menu .sns-icons img {
    width: 24px;
    height: auto;
    filter: none !important;
}



#ham-menu .sns-icons a:focus {
  outline: none;
}
#ham-menu .sns-icons a:focus-visible {
  outline: 2px solid rgba(255,255,255,0.6);
  outline-offset: 4px;
}

.news		{ padding-left:10px;
			padding-right:10px}

.box4 {
    width: 100%;
    padding: 16px;
    box-sizing: border-box; /* ← 超重要 */
  }
  
.box8-inner		{text-align:center}
}



/* ########### 768px以上 ########### */
@media (min-width: 768px) {

/* BOX1とBOX2を横に並べる設定 */
.boxA-inner {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
  }
.boxA #globalnavi {
    margin-top: 0;
  }
  .box1,
  .box2 {
    float: none;      /* ← 卒業 */
    width: auto;
  }

.box4 {
    width: 90%;         /* 画面幅の90％にして左右に余白 */
    margin-left: auto;
    margin-right: auto;
    padding: 32px;      /* 内側余白はそのまま */
    box-sizing: border-box;
  }

/* BOX6-1、BOX6-2、BOX6-3を横に並べる設定 */
.box6 {
    display: flex;
    gap: 20px;   /* paddingで調整していた余白を置き換え */
  }

  .box6-1,
  .box6-2,
  .box6-3 {
    float: none;     /* ← 卒業 */
    width: 100%;
    padding: 0;      /* 個別paddingは不要に */
  }

.box6-1, .box6-2, .box6-3
	{-moz-box-sizing: border-box;
	-webkit-box-sizing: border-box;
	box-sizing: border-box}



 .box8-inner {
    display: flex;
    justify-content: center;   /* ← 基本は中央 */
    align-items: center;
  }

.box8-1 {
  display: flex;
  align-items: center;   /* 縦位置を揃える */
  gap: 12px;             /* コピーとSNSの間隔 */
}
.copyright {
  display: flex;
  align-items: center;
  gap: 12px;
}

.copyright p {
  margin: 0;              /* ← 超重要 */
  white-space: nowrap;    /* ← 改行させない */
}

.sns-icons {
    position: static;
    display: flex;
    gap: 8px;
    justify-self: center;
  }

.box8-2 {
  text-align: right;
}	
.add { text-align: left; margin-left: auto; margin-right: 0px; width: 300px; } 
							

}

/* ===== 縦書きナビ完成版 ===== */
@media (min-width: 700px) {

/* li 自体 */
#globalnavi li {
  position: relative;
  height: 160px;       /* ナビマスの高さ */
  padding: 0;          /* liの余白は無し */
  overflow: hidden;    /* はみ出し防止 */
  display: flex;
  justify-content: center; /* 水平方向中央 */
  align-items: flex-start; /* 上寄せ */
}

/* a を li 全体にフィットさせる */
#globalnavi li a {
  box-sizing: border-box;  /* ← これが決定打 */
  display: flex;              /* flex に変更 */
  justify-content: flex-start; /* 縦方向：上揃え */
  align-items: center;         /* 横方向：中央 */
  height: 100%;                  /* li にフィット */
  writing-mode: vertical-rl;
  text-orientation: upright;     /* ← セミコロン必須 */
  text-decoration: none;
  color: #F2F3F1;
  font-size: 16px;
  line-height: 1.9;
  background-color: transparent; /* 通常背景 */
  transition: background-color 0.2s;
  padding-right: 12px;         /* 見た目の上余白 */
  width: 40px;                    /* 横幅調整 */
}
  
/* hover 背景 */
#globalnavi li:hover a {
  background-color: rgba(255,255,255,0.12);
}

  /* 下線 */
  #globalnavi li::after {
    content: "";
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: #EAEFEA;
    transform: scaleY(0);
    transition: transform 0.2s;
  }

  #globalnavi li:hover::after {
    transform: scaleY(1);
  }
}


/* ########### 1190px以上 ########### */
@media (min-width: 1190px) {

/* 全体の横幅を固定 */
.box4, .boxA-inner, .box6
	{width: 1140px;
	margin-left: auto;
	margin-right: auto}
	
.box8-inner {
     display: flex;
    justify-content: space-between; /* 左右に広げる */
    align-items: center;
    max-width: 1140px;             /* 中央寄せの基準幅 */
    margin: 0 auto;                 /* 中央寄せ */
    padding-left: 40px;             /* 左右の余白 */
    padding-right: 40px;
    position: relative;
  }

  .sns-icons {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
  }
}

@media (min-width: 767px) and (max-width: 1189px) {

   .box8-inner {
    max-width: 900px;      /* ← 中央寄せの基準幅 */
    margin: 0 auto;        /* ← これが超重要 */
    padding-left: 40px;
    padding-right: 40px;

    display: flex;
    justify-content: space-between;
    align-items: center;
  }

  .sns-icons {
    order: 2;
    margin: 0 auto;   /* 中央 */
  }

  .box8-1 { /* コピーライト */
    order: 1;
  }

  .box8-2 { /* 住所 */
    order: 3;
    text-align: right;
  }
}

@media (max-width: 820px) {
  .sns-icons {
    position: static;
    margin: 0 auto;
  }

  .box8-inner {
    justify-content: center;
  }
}