:root{
      --outer-bg:#c7b2b2; /* これが背景色 */
    --bg: #c7b2b2;       /* セクション間・上側 */
      --paper:#fffaf8;
      --ink:#4e433f;
      --sub:#7c6b67;
      --line:#d8c2bd;
      --rose:#b98f92;
      --rose-deep:#9a7376;
      --accent:#7e5b5f;
      --card:#fffdfc;
      --shadow: 0 12px 40px rgba(111, 85, 86, 0.10);
    }

    *{
      box-sizing:border-box;
    }

    /* 追加CSS ここから */
    /* 追加CSS ここまで */

    html{
      scroll-behavior:smooth;
    }

    .hero,
    .section{
      scroll-margin-top: 10px; /* ジャンプ時に天井から少し空ける */
    }

    html,body{
      margin:0;
      padding:0;
      font-family:"Noto Serif JP", serif;
      color:var(--ink);
      background:var(--outer-bg);
      line-height:1.8;
    }

    body.public-page{
      background:var(--bg);
      margin-top:24px;
      /*border-bottom:2px var(--bg) solid;*/
    }

    img{
      max-width:100%;
      display:block;
    }

    a{
      color:var(--accent);
      text-decoration:none;
    }

    @media (min-width: 961px) and (hover: hover){
      .aoyama-line-link:hover{
        color:#657efc;
      }
    }

    .page{
      width: 100%;
      background:var(--bg);
      padding-top: 0;
      margin: 0 auto;
    }

    .page .entry-content{
      width:min(1120px, calc(100% - 32px));
      margin:0 auto 48px;
      position:relative;
      border-radius:28px;  
    }

    .hero{
      position:relative;
      overflow:hidden;
      background:var(--paper);
      border:1px solid rgba(255,255,255,0.35);
      box-shadow:var(--shadow);
      border-radius:28px;
      padding:32px 28px 28px;
    }

    .hero::before{
      content:"ART MAKE";
      position:absolute;
      left:20px;
      bottom:8px;
      font-size:clamp(68px, 12vw, 170px);
      letter-spacing:.08em;
      color:rgba(112,87,88,.12);
      line-height:0.88;
      z-index:0;
      pointer-events:none;
      white-space:nowrap;
      font-style:italic;
      font-family: "Noto Serif JP", serif;
    }

    .hero-top{
      position:relative;
      z-index:1;
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap:28px;
      align-items:center;
    }

    .eyebrow{
      font-size:clamp(14px, 2vw, 20px);
      letter-spacing:.22em;
      color:var(--sub);
      margin-bottom:12px;
      font-family: "Noto Serif JP", serif;
    }

    .main-title{
      margin:0;
      font-weight:500;
      font-size:clamp(42px, 7vw, 88px);
      line-height:1.02;
      letter-spacing:.06em;
      color:var(--rose-deep);
      font-family: "Noto Serif JP", serif;
    }

    .hero-copy{
      margin:18px 0 0;
      font-size:clamp(15px, 2vw, 18px);
      color:var(--ink);
      max-width:40em;
      font-family: "Noto Serif JP", serif;
      line-height: 1.8;
      font-feature-settings: normal;
      text-align: start;
      overflow-wrap: normal;
    }

    .hero-badges{
      margin-top:22px;
      display:flex;
      flex-wrap:wrap;
      gap:10px;
    }

    .badge{
      border:1px solid var(--line);
      background:rgba(255,255,255,.55);
      color:var(--accent);
      padding:8px 14px;
      border-radius:12px;
      font-size:14px;
      line-height:1.2;
      font-family: "Noto Serif JP", serif;
    }

    .hero-images{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:14px;
      align-content:start;
      position:relative;
      z-index:1;
    }

    .hero-images .big{
      grid-column:1 / -1;
    }

    .photo-card{
      background:#fff;
      padding:10px;
      border-radius:22px;
      box-shadow:var(--shadow);
    }

    .photo-card img{
      width:100%;
      aspect-ratio: 4 / 3;
      object-fit:cover;
      border-radius:16px;
    }


    .section{
      margin-top:24px;
      background:var(--paper);
      border:1px solid rgba(255,255,255,0.4);
      box-shadow:var(--shadow);
      border-radius:28px;
      padding:28px;
    }

    .section-title{
      margin:0 0 18px;
      font-size:clamp(28px, 4vw, 52px);
      color:var(--rose-deep);
      line-height:1.08;
      letter-spacing:.04em;
    }

    .section-sub{
      display:block;
      margin-top:6px;
      font-size:20px;
      letter-spacing:.18em;
      color:var(--sub);
      font-family: "Noto Sans JP", sans-serif;
      font-weight: 600;
    }

    .lead{
      font-size:16px;
      color:var(--ink);
      margin:0;
      font-family: "Noto Serif JP", serif;
      font-feature-settings: normal;
      text-align: start;
    }

    .reservation-box{
      display:grid;
      grid-template-columns: 1fr 1fr;
      gap:18px;
      margin-top:18px;
    }

    .mini-card{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:22px;
      padding:20px;
    }

    .mini-card h3{
      margin:0 0 10px;
      font-size:24px;
      color:var(--accent);
      font-weight:500;
    }

    .reservation-heading{
      font-family:"Noto Sans JP", sans-serif;
    }

    .mini-card p{
      margin:0;
      font-size:15px;
      font-family: "Noto Serif JP", serif;
      text-align: start;
      overflow-wrap: normal;
    }

    .about-grid{
      display:grid;
      grid-template-columns: 1.15fr .85fr;
      gap:22px;
      align-items:start;
    }

    .bullet-list{
      margin:18px 0 0;
      padding:0;
      list-style:none;
      font-family: "Noto Serif JP", serif;
    }

    .bullet-list li{
      margin:0 0 12px;
      padding-left:1.2em;
      position:relative;
      line-height: 1.8;
    }

    .bullet-list li::before{
      content:"◆";
      position:absolute;
      left:0;
      top:0;
      color:var(--rose);
      font-size:.9em;
    }

    .info-note{
      margin-top:16px;
      padding:14px 16px;
      border-radius:16px;
      background:rgba(185,143,146,0.10);
      border:1px solid rgba(185,143,146,0.35);
      font-size:14px;
      color: #4e433f;
      font-family: "Noto Serif JP", serif;
    }


    @media (min-width: 961px){
      #about .about-grid{
        grid-template-columns:1fr;
      }
    }

    .table-wrap{
      overflow-x:auto;
      margin-top:18px;
    }

    table{
      width:100%;
      border-collapse:separate;
      border-spacing:0;
      min-width:680px;
      background:var(--card);
      border:1px solid var(--line);
      border-radius:18px;
      overflow:hidden;
    }

    th, td{
      border:0;
      border-right:1px solid var(--line);
      border-bottom:1px solid var(--line);
      padding:16px 14px;
      vertical-align:top;
      text-align:left;
      font-size:15px;
      line-height:1.7;
    }

    /* 角丸クリップと重なる外周の罫線を落とす（カード表示になるSPでは不要） */
    @media (min-width: 561px){
      th:last-child,
      td:last-child{
        border-right:0;
      }

      tbody tr:last-child td{
        border-bottom:0;
      }
    }

    th{
      background:#efe1de;
      color:var(--accent);
      font-size:16px;
      font-weight:600;
      font-family: "Noto Sans JP", sans-serif;
    }

    .voice-grid{
      margin-top:18px;
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:16px;
    }

    .voice{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:20px;
      padding:18px;
      position:relative;
      font-family: "Noto Serif JP", serif;
    }

    .voice::before{
      content:"“";
      position:absolute;
      top:8px;
      left:14px;
      font-size:48px;
      line-height:1;
      color:#3a272933;
    }

    .voice p{
      margin:0;
      padding-top:12px;
      font-size:15px;
      text-align: start;
      overflow-wrap: normal;
    }

    .voice small{
      display:block;
      margin-top:10px;
      color:var(--sub);
      font-size:12px;
      letter-spacing:.08em;
    }

    .price-grid{
      display:grid;
      grid-template-columns: repeat(3, 1fr);
      gap:18px;
      margin-top:18px;
    }

    .price-card{
      background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.65));
      border:1px solid var(--line);
      border-radius:22px;
      padding:22px 20px;
      text-align:center;
    }

    .price-card .label{
      display:block;
      margin-bottom:10px;
      font-size:22px;
      color:var(--accent);
      font-family: "Noto Serif JP", serif;
    }

    .price-card .price{
      font-size:34px;
      line-height:1.1;
      color:var(--rose-deep);
      font-family: "Noto Serif JP", serif;
    }

    .price-card .tax{
      margin-top:8px;
      font-size:13px;
      color:var(--sub);
      font-family: "Noto Serif JP", serif;
    }

    .staff{
      display:grid;
      grid-template-columns: .9fr 1.1fr;
      gap:22px;
      align-items:start;
    }

    .staff-photo img{
      width:90%;
      aspect-ratio: 4 / 5;
      object-fit:cover;
      border-radius:22px;
      box-shadow:var(--shadow);
      margin-inline:auto;
      height: revert-layer;
    }

    .staff-name{
      margin:0 0 12px;
      font-size:32px;
      color:var(--rose-deep);
      line-height:1.2;
      font-weight:500;
    }

    .staff-role{
      margin:0 0 16px;
      color:var(--sub);
      font-size:15px;
      letter-spacing:.08em;
      font-family: "Noto Serif JP", serif;
    }

    .staff-links{
      display:flex;
      flex-wrap:wrap;
      gap:10px;
      margin-top:18px;
    }

    .staff-links2{
      display:flex;
      justify-content:center;
      margin-top:12px;
    }

    .staff-links2 a{
      display:inline-block;
      padding:8px 14px;
      border:1px solid var(--line);
      border-radius:999px;
      background:rgba(255,255,255,.7);
      font-size:14px;
      font-family: "Noto Serif JP", serif;
    }

    .staff-links a{
      display:inline-block;
      border:1px solid var(--line);
      background:rgba(255,255,255,.7);
      padding:10px 14px;
      border-radius:999px;
      font-size:14px;
      font-family: "Noto Serif JP", serif;
    }

    .cta{
      display:grid;
      grid-template-columns: 1.1fr .9fr;
      gap:22px;
      align-items:center;
    }

    .cta-box{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:24px;
      padding:22px;
    }

    .cta-box h3{
      margin:0 0 10px;
      font-size:20px;
      color:var(--rose-deep);
      font-weight:500;
      line-height: 1.8;
    }

    .cta-box p{
      margin:0;
      font-size:15px;
    }

    .qr-wrap{
      display:flex;
      justify-content:center;
      align-items:center;
    }

    .qr-card{
      width:min(180px, 100%);
      background:#fff;
      border:1px solid var(--line);
      border-radius:22px;
      padding:16px;
      text-align:center;
      box-shadow:var(--shadow);
    }

    .qr-card img{
      width:100%;
      max-width:190px;
      margin:0 auto 10px;
      aspect-ratio:1 / 1;
      object-fit:cover;
      border-radius:12px;
      height: revert-layer;
    }

    .qr-card p{
      margin:0;
      font-size:12px;
      color:var(--sub);
      line-height:1.7;
      text-align:center;
      font-family: "Noto Serif JP", serif;
    }

    .footer-note{
      margin-top:22px;
      font-size:13px;
      color:var(--sub);
      line-height:1.8;
      text-align: center;
      font-family: "Noto Serif JP", serif;
    }

    .placeholder-note{
      margin-top:8px;
      font-size:12px;
      color:var(--sub);
    }

    .cta-box .reservation_exp {
      font-size: 18px;
      color: #4e433f;
      font-family: "Noto Serif JP", serif;
      text-align: start;
      overflow-wrap: normal;
    }
    @media (max-width: 1120px){
      .hero-photo img {
        width: 100%;
        height: auto;
        aspect-ratio: auto;
        object-fit: cover;
      }
      
    }

    @media (max-width: 960px){
      .hero-top,
      .about-grid,
      .staff,
      .cta,
      .reservation-box{
        grid-template-columns:1fr;
      }

      .voice-grid,
      .price-grid{
        grid-template-columns:1fr;
      }

      .hero{
        padding:24px 18px 20px;
      }

      .section{
        padding:22px 18px;
      }
    }

    .ruby {
      font-size: 16px;
      font-family: "Noto Serif JP", serif;
      display: block;
    }
    .staff-name .ruby{
      display: inline;
    }
    
    @media screen and (max-width: 1100px) {
      .ruby {
        transform: translateY(-1px);
      }
    }
    @media screen and (max-width: 1100px) {
      .ruby {
        transform: none;
      }
    }

    .sp-only{
      display:none;
    }

    /* 元のフッターメニューは非表示 */
    .mobile-menu-buttons{
      display: none;
    }


    /* ===== スマホ用ハンバーガーメニュー ===== */
    .nav-toggle{
      display:none;
    }

    .nav-btn,
    .sp-nav,
    .nav-overlay{
      display:none;
    }

    @media screen and (max-width: 768px) {
      /*body.public-page{
        margin-top: 0;
      }*/
      
      .page .main {
        padding: 0;
      }
    }

    @media (max-width: 560px){
      .body.public-page{
        margin-top: 10px;
      }

      .nav-btn{
        display:block;
        position:fixed;
        top:14px;
        right:14px;
        width:48px;
        height:48px;
        background:var(--paper);
        border:2px solid #fff;
        border-radius:14px;
        box-shadow:var(--shadow);
        z-index:1001;
        cursor:pointer;
      }

      .nav-btn span{
        position:absolute;
        left:13px;
        right:13px;
        height:2px;
        background:var(--accent);
        border-radius:2px;
        transition:transform .3s ease, opacity .3s ease, top .3s ease;
      }

      .nav-btn span:nth-child(1){ top:15px; }
      .nav-btn span:nth-child(2){ top:22px; }
      .nav-btn span:nth-child(3){ top:29px; }

      /* 開いたとき：三本線 → ✕ */
      .nav-toggle:checked ~ .nav-btn span:nth-child(1){
        top:22px;
        transform:rotate(45deg);
      }
      .nav-toggle:checked ~ .nav-btn span:nth-child(2){
        opacity:0;
      }
      .nav-toggle:checked ~ .nav-btn span:nth-child(3){
        top:22px;
        transform:rotate(-45deg);
      }

      .sp-nav{
        display:block;
        position:fixed;
        top:0;
        right:0;
        width:60%;
        height:100dvh;
        background:#131b29;
        z-index:1000;
        transform:translateX(100%);
        transition:transform .35s ease;
        padding-top:76px;
        overflow-y:auto;
      }

      .nav-toggle:checked ~ .sp-nav{
        transform:translateX(0);
      }

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

      .sp-nav li + li{
        border-top:1px solid #e3dccc;
      }

      .sp-nav a{
        display:block;
        padding:16px 20px;
        color:#e3dccc;
        font-size:15px;
        letter-spacing:.08em;
        font-family:"Noto Sans JP", sans-serif;
      }

      /* メニュー外（左側）タップで閉じるオーバーレイ */
      .nav-overlay{
        display:block;
        position:fixed;
        inset:0;
        background:rgba(19,27,41,.35);
        z-index:999;
        opacity:0;
        pointer-events:none;
        transition:opacity .3s ease;
      }

      .nav-toggle:checked ~ .nav-overlay{
        opacity:1;
        pointer-events:auto;
      }
    }

    /* スマートフォンサイズ */
    @media (max-width: 560px){
      .sp-only{
        display:block;
      }

      /*.page{
        width:min(100% - 18px, 1120px);
        margin:10px auto 24px;
      }*/
      
    .page .entry-content{
        width:min(100% - 18px, 1120px);
        margin:10px auto 24px;
      position:relative;
      border-radius:28px;  
    }

      .section-sub {
        font-size: 20px;
        font-weight: 400;
      }

      .hero::before{
        left:10px;
        bottom:10px;

        font-style:italic;  
      }

      .badge{
        font-size:12px;
        padding:7px 11px;
      }

      .mini-card h3{
        font-size:20px;
      }

      .staff-name{
        font-size:28px;
      }

      .price-card .price{
        font-size:30px;
      }

      .staff-photo img {
        width: 90%;
        height: auto;
        aspect-ratio: 1 / 1;
        object-fit: contain;
      }

      .table-wrap{
        overflow:visible;
      }

      .table-wrap table,
      .table-wrap tbody,
      .table-wrap tr,
      .table-wrap td{
        display:block;
        width:100%;
      }

      .table-wrap table{
        min-width:0;
        background:transparent;
        border:0;
        border-radius:0;
      }

      .table-wrap thead{
        display:none;
      }

      .table-wrap tr{
        margin-bottom:16px;
        overflow:hidden;
        background:var(--card);
        border:1px solid var(--line);
        border-radius:16px;
      }

      .table-wrap td{
        border:0;
        border-bottom:1px solid var(--line);
        padding:14px;
      }

      .table-wrap td:last-child{
        border-bottom:0;
      }

      .table-wrap tr:last-child{
        /*border-bottom:0;*/
      }
      
      .table-wrap td:first-child{
        background:#efe1de;
        color:var(--accent);
        font-family:"Noto Sans JP", sans-serif;
        font-weight:600;
      }

      .table-wrap td:nth-child(2)::before,
      .table-wrap td:nth-child(3)::before{
        display:block;
        margin-bottom:5px;
        color:var(--rose-deep);
        font-family:"Noto Sans JP", sans-serif;
        font-size:13px;
        font-weight:700;
      }

      .table-wrap td:nth-child(2)::before{
        content:"メリット";
      }

      .table-wrap td:nth-child(3)::before{
        content:"デメリット・注意点";
      }


    }