@charset "utf-8";

/* =========================================
   Design tokens
========================================= */
:root{
  --max-w: 1536px;
  --page-x: 2%;
  --gap: 20px;
  --gap-sm: 16px;
  --color-text: #555;
  --color-heading: #444;
  --color-accent: rgb(200,0,0);
  --color-header-bg: #000;
  --color-header-fg: #fff;
  --menu-blur: 6px;
  --fig-default-w: auto;
  --color-button-bg: #000;

  --link-hover: #1B9C07;

  --table-head-bg: #eeeeee;
  --table-border: #cccccc;
  --table-row-even: #eeeeee; /* gray */
  --table-row-odd: #ffffff;  /* white */

    /* ここを変えるだけで全体スケール調整 */
  --logo-scale: 1.0;
  --logo-gray: #333;     /* 文字色（グレー） */

}

/* =========================================
   Base
========================================= */
html, body { height: 100%; }
body{
  margin:auto;
  width:calc(96%);
  max-width:var(--max-w);
  padding:0 var(--page-x);
  font-family:-apple-system,BlinkMacSystemFont,"Helvetica Neue","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic","Meiryo",sans-serif;
  color:var(--color-text);
  -webkit-text-size-adjust:100%;
  text-rendering:optimizeLegibility;
}

/* =========================================
   Header（JS生成）
========================================= */
header{
  position:sticky; top:0; z-index:1000;
  background:var(--color-header-bg);
  color:var(--color-header-fg);
  padding: calc(10px + env(safe-area-inset-top)) 10px 10px;
  display:flex;
  justify-content:space-between;
  align-items:center;
}


.JE-switch{
  position: relative;
  text-align: right;
  top: 10px;
  right: 0px;
  font-size: 16px;
}

.JE-switch a{
  color: var(--color-text);
  text-decoration: none;
} 


/* ロゴ */
.logo{
  display:flex;
  align-items:flex-end; /* 文字のベースラインをそろえる */
  white-space: nowrap;
  gap: 10px;
  color: var(--color-header-fg);
  font-family: "Noto Sans JP","Yu Gothic Medium","Hiragino Kaku Gothic ProN",Meiryo,sans-serif;
}

/* 右の大きい「了仙寺」 */
.logo .ryosenji-logo{
  font-weight: 700;
  font-size: 30px;
  line-height: 1;
  padding-bottom: 5px;
}

/* 左の2行 */
.logo .meta{
  display:flex;
  flex-direction:column;
  white-space: nowrap;
  gap: 6px;
  font-weight:700;
  font-size: 14px;
  line-height:0.8;
}

/* 各行の赤いラインは疑似要素で描画（画像不要） */
.logo .meta-line{
  position:relative;
  padding-bottom: calc(2px  + 3px); /* 下線の分だけ余白 */
}

.logo .meta-line::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:3px;                /* 下線の太さ */
  background: var(--color-accent);
  border-radius: 1px;        /* 画像に近い角の丸み */
}

/* メニューナビ */
.pc-nav a{ padding-right:15px; color:var(--color-header-fg); text-decoration:none; font-size:16px; }
.pc-nav a:hover{ opacity:.7; }

/* =========================================
   Layout containers
========================================= */
.container{ margin-top:40px; }
.sectionBlock{ display:grid; row-gap:var(--gap); margin-bottom:50px; }

/* 見出し＋赤線 */
.sectionBlock .heading h2{
  margin:0; font-size:26px; font-weight:700; color:var(--color-heading); position:relative; padding-bottom:10px;
}
.sectionBlock .heading h2::after{
  content:""; position:absolute; left:0; bottom:-6px; height:3px; background:var(--color-accent); width:100%;
}

.sectionBlock h3{
  margin:0; font-size:18px; font-weight:700; color:var(--color-heading);
}

/* =========================================
   Figure（figureベース）
========================================= */
.sectionBlock .text > :first-child{ margin-top:0; }
.sectionBlock figure{ align-self:start; display:inline-block; width:var(--fig-w,var(--fig-default-w)); max-width:100%; margin:0; }
.sectionBlock figure>img{ display:block; width:100%; height:auto; object-fit:cover; background:#eee; border-radius:6px; }
.sectionBlock figure>figcaption{ width:100%; margin-top:8px; font-size:13px; line-height:1.5; color:#666; text-align:left; word-break:break-word; }

/* =========================================
   バッジ
========================================= */
.badgeGrid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
  align-items: start;
}
.badgeGrid a {
  display: block;
}
.badgeGrid img {
  display: block;
  width: 100%;
  height: auto;
  /* 角丸や影が必要ならここに追加 */
}


/* =========================================
    インライン
========================================= */

  .figureGrid{
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(var(--thumb-min), 1fr));
    gap: var(--gap);
    align-items: start;
  }

    /* 1枚分のカード */
  .figureGrid figure{
    margin: 0; /* figure デフォルト余白を消す */
    border-radius: var(--radius);
    overflow: hidden;
  }

    /* キャプション */
  .figureGrid figcaption{
    padding: 5px 5px;
    font-size: 0.92rem;
    line-height: 1.45;
    color: #333;
  }


/* =========================================
   資料テーブル
========================================= */
.table {
  width: 100%;
  border-collapse: collapse;
  border-spacing: 0;
}

.table thead th {
  position: sticky;
  top: 0;
  background: var(--table-head-bg);
  z-index: 1;
  border-bottom: 1px solid var(--table-border);
  text-align: left;
  padding: 10px 12px;
  font-weight: 600;
}

.table tbody td {
  border-top: 1px solid var(--table-border);
  padding: 10px 12px;
  vertical-align: top;
}

/* Zebra striping: alternate white and gray backgrounds */
.table.zebra tbody tr:nth-child(odd)  { background: var(--table-row-odd); }
.table.zebra tbody tr:nth-child(even) { background: var(--table-row-even); }

/* Image wrapper */
.img-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* =========================================
   YouTube
========================================= */
.youtube {
    position: relative;
    width: 100%;
    padding-top: 56.25%; /* 16:9のアスペクト比 */
    height: 0;
}

.youtube iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

/* =========================================
   リンクボタン
========================================= */
.linkWithArrow {
  color:var(--color-text);
  font-size:20px;
  font-weight:700;
  text-decoration:none;
  padding: 5px;
  margin-right: 20px;
}

.linkWithArrow:hover {
  color:var(--link-hover);
}

.round_arrow {
  position: relative;
  padding-left: 30px;
}
 
.round_arrow::before { /* 背景の表示設定 */
  content: "";
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 3px;
  width: 25px; /* 横幅 */
  height: 25px; /* 高さ */
  border-radius: 50%; /* 角の丸み */
  background:var(--color-text);
}
 
.round_arrow::after { /* くの字の表示設定 */
  content: "";
  position: absolute;
  margin: auto;
  top: 0;
  bottom: 0;
  left: 7px;
  width: 10px;
  height: 10px;
  border-top: 3px solid #fff;
  border-right: 3px solid #fff;
  transform: rotate(45deg);
}

a:hover .round_arrow::before {
  background:var(--link-hover);
}

.address{
  margin-top: 20px;
  font-size: 20px;
  font-weight:700;
}

.indent {
    padding-left: 2em;
}

.invoice {
    display: flex;
    flex-wrap: wrap;
}

.price {
    font-size: 200%;
}

.fee{
    font-size: small;
}

.breakdown {
    padding: 2em;
    margin: 2em;
}

.asterisk{
    color: red;
    font-size: -1;
}

.button {
    display: inline-block;
    font-size: 1.5em;
    text-align: center;
    cursor: pointer;
    padding:0.2em 2em;
    background:black;
    color:white;
    margin-top: 2em;
    text-decoration: none;
}

.button:disabled {
    background-color: lightgray;
    color: white;
    cursor: not-allowed;
  }

/* =========================================
   Desktop (>=770px)：2カラム
========================================= */
@media (min-width:770px){
  .sectionBlock{
    grid-template-columns:auto 1fr;
    grid-template-areas:
      "title title"
      "leftcol rightcol";
    column-gap:var(--gap);
    align-items:start;
  }
  
  .sectionBlock .heading{ grid-area:title; }

  .sectionBlock.left  figure{ grid-area:leftcol;  justify-self:start; }
  .sectionBlock.left  .text  { grid-area:rightcol; }

  .sectionBlock.right{ grid-template-columns:1fr auto; }
  .sectionBlock.right .text   { grid-area:leftcol;  text-align:left; }
  .sectionBlock.right figure  { grid-area:rightcol; justify-self:end; }

  .sectionBlock.above {
    /* 左右2カラム指定をこのセクションだけ無効化して1カラムに */
    grid-template-columns: 1fr;
    grid-template-areas:
      "title"
      "photo"
      "text";
  }
  .sectionBlock.above .heading { grid-area: title; }

  /* 写真は100%幅に（既存の figureベース運用を踏襲） */
  .sectionBlock.above figure {
    grid-area: photo;
    justify-self: stretch;     /* 横いっぱい */
    --fig-w: 100%;             /* 既存の figure 幅変数に100%を流し込む */
  }

  .sectionBlock.above .text { grid-area: text; }

  .badgeGrid {
    grid-template-columns: repeat(4, 1fr);
    gap: var(--gap);
  }

  .sectionBlock.above .linkBlock{
    display:inset-block;

  }

/* ギャラリーの横並び本体 */
.sectionBlock .gallery{
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  align-items: flex-start; /* ★カードの上端をそろえる */
  margin-top: 16px;
}

/* 1枚分のカード（figure） */
.sectionBlock .gallery .card{
  margin: 0;                               /* figure のデフォルト余白を消す */
  display: flex;                           /* 画像＋キャプションを縦に積む */
  flex-direction: column;
  max-width: var(--card-max, 250px);       /* インラインの --card-max を使用 */
  width: 100%;
}

/* 画像 */
.sectionBlock .gallery .card img{
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  object-fit: cover;
}

/* キャプション：card-max 幅で折り返し */
.sectionBlock .gallery .card .cap{
  margin-top: 8px;
  font-size: 0.95rem;
  line-height: 1.6;
}


  
}

/* =========================================
   Mobile (<=769px)：縦並び＋左寄せ
========================================= */
@media (max-width:769px){
  .pc-nav{ display:none; }
  .hamburger{ display:block !important; }

  .sectionBlock{
    grid-template-columns:1fr;
    grid-template-areas:
      "title"
      "photo"
      "text";
    row-gap:var(--gap-sm);
  }
  .sectionBlock .heading{ grid-area:title; }
  .sectionBlock figure{ grid-area:photo; justify-self:start; width:var(--fig-mobile-w, 100%); }
  .sectionBlock .text{ grid-area:text; }

  body.menu-open header, body.menu-open main, body.menu-open footer{
    filter:blur(var(--menu-blur)); transition:filter .25s ease; will-change:filter;
  }

  .badgeGrid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap);
  }

  .linkBlock a{
    display:block;
  }

  .card{
    padding-bottom: 20px;
  }
}

/* =========================================
   Hamburger（JS生成）
========================================= */
.hamburger{
  position:fixed;
  top:calc(14px + env(safe-area-inset-top));
  right:calc(34px + env(safe-area-inset-right));
  width:28px; height:24px;
  cursor:pointer; z-index:10000; display:none;
}
.hamburger span{
  position:absolute; left:0; width:100%; height:3px; background:rgba(200,200,200,0.5); transition:.3s;
}
.hamburger span:nth-child(1){ top:0; }
.hamburger span:nth-child(2){ top:10px; }
.hamburger span:nth-child(3){ top:20px; }
.hamburger.active span:nth-child(1){ top:10px; transform:rotate(45deg); }
.hamburger.active span:nth-child(2){ opacity:0; }
.hamburger.active span:nth-child(3){ top:10px; transform:rotate(-45deg); }
.hamburger.active span{ background:#000; }

/* =========================================
   Overlay menu（JS生成）
========================================= */
#layer{
  position:fixed; inset:0; background:rgba(0,0,0,.6);
  display:flex; justify-content:flex-end;
  opacity:0; visibility:hidden; pointer-events:none;
  transition:opacity .3s ease; z-index:9998;
  padding-top:env(safe-area-inset-top);
  padding-right:env(safe-area-inset-right);
  padding-bottom:env(safe-area-inset-bottom);
  padding-left:env(safe-area-inset-left);
}
#layer.show{ opacity:1; visibility:visible; pointer-events:auto; }
.mobileMenu{
  width:min(70%, 300px); height:100%; background:rgba(255,255,255,0.8); padding:40px 20px;
  transform:translateX(100%); transition:transform .35s ease;
}
#layer.show .mobileMenu{ transform:translateX(0); }
.mobileMenu ul{ list-style:none; padding:0; margin:0; }
.mobileMenu li{ margin:20px 0; }
.mobileMenu a{ text-decoration:none; color:#333; font-size:20px; }

/* =========================================
   Footer
========================================= */
footer{ text-align:center; margin:20px 0; padding:20px 0; font-size:14px; }