/* style.css - Asianesthetic Healingbeauty */
:root{--ink:#534741;--gold:#b8982e;--gold-l:#d7b94b;--cream:#FCF5E3;--sand:#e6ddc8;--sage:#97ae88;--rose:#cd6f55;--hh:6.5rem}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:var(--hh);-webkit-text-size-adjust:100%}
body{font-family:"Shippori Mincho","ヒラギノ明朝 Pro W3","Yu Mincho","游明朝",serif;font-size:16px;line-height:1.9;letter-spacing:.06em;color:var(--ink);background:#fff}
img{max-width:100%;height:auto;vertical-align:bottom}
ul{list-style:none}a{color:inherit;text-decoration:none}
iframe{border:0;max-width:100%}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}
section{padding:4rem 1rem}
.h3{text-align:center;margin-bottom:2.5rem}
.h3_p{display:inline-block;position:relative;font-size:.95rem;letter-spacing:.2em}
.h3_p::before{content:"";position:absolute;left:50%;bottom:-5px;width:15px;height:1.5px;transform:translateX(-50%);background:var(--ink);transition:width .8s ease .2s}
.js .h3_p{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s ease}
.js .h3.in .h3_p{opacity:1;transform:none}
.h3.in .h3_p::before{width:48px}
h2{font-size:clamp(1.4rem,3vw,1.8rem);font-weight:600;padding-top:.8rem;line-height:1.5}

/* header */
.site-header{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--hh);background:rgba(255,255,255,.82);backdrop-filter:blur(6px);transition:box-shadow .3s,height .3s}
.site-header.scrolled{box-shadow:0 2px 12px rgba(83,71,65,.12)}
.header-inner{max-width:1200px;height:100%;margin:0 auto;padding:0 1.2rem;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.logo{display:block;height:100%;padding:.2rem 0}.logo img{height:100%;width:auto;max-width:none}
.gnav{display:flex;gap:clamp(.8rem,2vw,2rem);font-size:.9rem}
.gnav a{padding:.4rem 0;border-bottom:1px solid transparent;transition:color .3s,border-color .3s}
.gnav a:hover{color:var(--gold);border-color:var(--gold-l)}
.menu-btn{display:none;width:44px;height:44px;border:0;background:none;cursor:pointer;position:relative}
.menu-btn span{position:absolute;left:10px;width:24px;height:2px;background:var(--ink);transition:transform .3s,opacity .3s}
.menu-btn span:nth-child(1){top:14px}.menu-btn span:nth-child(2){top:21px}.menu-btn span:nth-child(3){top:28px}
.menu-btn[aria-expanded=true] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn[aria-expanded=true] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded=true] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* hero */
.hero{position:relative;margin-top:var(--hh);height:min(75vh,640px);min-height:320px;padding:0;overflow:hidden;background:var(--cream)}
.hero-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:zoom 14s ease-out both}
.hero-img2{opacity:0;animation:fade 14s ease-in-out infinite alternate,zoom 14s ease-out both}
.hero::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse at 100% 0,rgba(40,30,25,.42),rgba(40,30,25,0) 65%);pointer-events:none}
.hero h1{position:absolute;z-index:2;right:clamp(1.5rem,6vw,6rem);top:clamp(1.8rem,9%,4rem);writing-mode:vertical-rl;white-space:nowrap;font-size:clamp(2.4rem,9vw,3.6rem);font-weight:400;line-height:1.25;letter-spacing:.4em;color:#fff;text-shadow:0 1px 6px rgba(40,30,25,.45),0 2px 22px rgba(40,30,25,.55);animation:rise .8s ease .3s both}
.hero h1 span{display:block}
.hero h1 span:nth-child(2){margin-top:1em}
@keyframes zoom{from{transform:scale(1.08)}to{transform:scale(1)}}
@keyframes fade{0%,35%{opacity:0}65%,100%{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}

/* about / reason */
.about{padding-bottom:3rem}
.about-body{max-width:1000px;margin:0 auto 2.5rem;display:flex;gap:3rem;align-items:center;justify-content:center}
.about_memo{flex:1 1 480px;max-width:520px;line-height:2.1}
.about-body img{flex:0 1 380px;border-radius:2px}
.firsttime{text-align:center}
.herb-band{height:280px;background:url("../img/herb.jpg") center/cover fixed no-repeat}
.reason{padding-top:0;padding-bottom:4rem}
.reason-title{position:relative;margin:-5rem auto 1.5rem;width:min(420px,92%);padding:2.5rem 0 1.5rem;background:#fff}
.reason-lead{text-align:center;font-weight:600;padding:0 1rem 2rem}
.reason-list{max-width:1000px;margin:0 auto;display:flex;flex-wrap:wrap;justify-content:center;gap:2rem}
.reason-list li{width:min(250px,100%);text-align:center}
.reason-list img{width:100%;margin-bottom:.8rem}

/* menu teaser */
.menu-sec{background:var(--cream)}
.recommend{display:flex;flex-wrap:wrap;justify-content:center;gap:1.5rem;margin-bottom:2.5rem}
.recommend li{max-width:440px}
.recommend img{width:100%;transition:transform .5s}
.recommend li{overflow:hidden}.recommend li:hover img{transform:scale(1.04)}
.menu_more{width:fit-content;margin:0 auto;border:1px solid var(--ink);transition:background .3s,color .3s}
.menu_more a{display:block;padding:.6rem 2.5rem}
.menu_more:hover{background:var(--ink);color:#fff}

/* news */
.news-list{max-width:800px;margin:0 auto}
.news-list .item a{display:flex;gap:1.5rem;padding:1.2rem .8rem;border-bottom:1px solid #ccc;transition:background .3s,padding-left .3s}
.news-list .item:first-child a{border-top:1px solid #ccc}
.news-list .date{flex:0 0 7.5em;color:#8a8178;font-size:.95rem}
.news-list a:hover{background:var(--cream);padding-left:1.4rem}
.news-list a:hover .title{color:var(--gold)}

/* access */
.access-wrap{max-width:1000px;margin:0 auto;display:flex;flex-wrap:wrap;gap:2.5rem;align-items:center;justify-content:center}
.access iframe{width:min(520px,100%);height:340px}
.map{font-style:normal;width:min(340px,100%);padding:1.8rem;border:1px solid var(--ink);border-radius:30px 0}
.map a{border-bottom:1px solid}

/* contact */
.contact{background:repeating-linear-gradient(-45deg,#F2E9D3 0,#F2E9D3 1px,#fff 4px,#fff 6px)}
#tel{background:#fff;width:min(340px,100%);margin:0 auto 3rem;padding:1.8rem;border:1px solid var(--ink);border-radius:30px 0}
.tel{font-weight:600;padding-bottom:1rem}
.tel_no{font-size:1.4rem;font-weight:600;border-bottom:1px solid;width:fit-content}
.tel_no a:hover{color:var(--gold)}
.box_con{background:#fff;border:1px solid var(--ink);max-width:900px;padding:1rem 2rem 2rem;margin:0 auto}
.form{text-align:center;font-weight:600;padding:1.2rem}
.formTable{width:100%;border-collapse:collapse}
.formTable tr{border-bottom:1px dotted #cdcdcd}
.formTable th{width:32%;font-weight:400;padding:1em .5em;text-align:left;vertical-align:top}
.formTable td{padding:1em .5em}
.formTable th span{background:var(--rose);padding:0 .4em;color:#fff;margin-left:.6em;font-size:.8rem}
.note{display:block;font-size:.75rem;line-height:1.5;color:#8a8178}
.formTable input:not([type=radio]):not([type=checkbox]),.formTable select,.formTable textarea{width:100%;min-height:2.8em;padding:.5em;border:1px solid var(--sage);background:#fff;font:inherit;transition:box-shadow .3s}
.formTable input:focus,.formTable select:focus,.formTable textarea:focus{outline:0;box-shadow:0 0 0 3px rgba(151,174,136,.35)}
.formTable textarea{min-height:10em}
.box_br{display:inline-block;margin-right:1.5rem}
.radio02-input{accent-color:var(--sage);margin-right:.4rem;width:1rem;height:1rem}
.con_pri{max-width:700px;margin:1.5rem auto 0}
.box_pri{height:240px;overflow-y:scroll;border:1px solid #cdcdcd;background:#f7f7f7;padding:1.2rem 2rem}
.box_pri h4{font-size:1.05rem;margin-top:1rem}.box_pri .box_tori h4{margin-top:0}
.box_pri .txt{font-size:.9rem}
.box_check{text-align:center;margin:1.2rem 0}
.agree{accent-color:var(--sage);width:1rem;height:1rem;vertical-align:middle}
.btn{text-align:center}
.btn input{background:var(--ink);color:#fff;border:0;padding:.7em 4em;font:inherit;letter-spacing:.3em;cursor:pointer;transition:background .3s,transform .2s}
.btn input:hover{background:var(--gold);transform:translateY(-2px)}

/* footer */
.site-footer{background:var(--sand);padding:2rem 1.2rem}
.footer-inner{max-width:1100px;margin:0 auto;display:flex;flex-wrap:wrap;gap:2rem;justify-content:space-between}
.footer-inner img{height:96px;width:auto;display:block;margin-bottom:.6rem}
.footer-inner li{padding-bottom:.4rem;font-size:.9rem}
.footer-inner a:hover{color:var(--gold)}
small{font-size:.8rem}

/* menu page */
.page-title{margin-top:var(--hh);text-align:center;font-size:clamp(1.6rem,4vw,2.2rem);letter-spacing:.3em;padding:90px 1rem;background:var(--cream) url("../img/menu_bg.png") center/cover;color: #ffffff; }
.price-sec{padding-bottom:1rem}
.price{width:min(640px,100%);margin:0 auto;border-collapse:collapse}
.price th,.price td{padding:.8rem .8rem;border-bottom:1.5px solid var(--ink);text-align:left;font-weight:400}
.price .cost{text-align:right;font-weight:600;white-space:nowrap}
.price tr{transition:background .3s}.price tr:hover{background:var(--cream)}
.price-note{text-align:center;padding:1rem;font-size:.9rem}
.reserve{margin:2rem auto 4rem}


/* responsive */
@media (max-width:900px){
  :root{--hh:5rem}
  .menu-btn{display:block}
  .gnav{position:fixed;inset:var(--hh) 0 auto 0;flex-direction:column;gap:0;background:rgba(255,255,255,.97);padding:.5rem 1.5rem 1.5rem;max-height:0;overflow:hidden;opacity:0;visibility:hidden;transition:opacity .3s,visibility .3s}
  .gnav.open{max-height:80vh;opacity:1;visibility:visible;box-shadow:0 8px 16px rgba(83,71,65,.12)}
  .gnav a{display:block;padding:.9rem 0;border-bottom:1px solid #eee}
  .about-body{flex-direction:column;gap:1.5rem}
  .herb-band{background-attachment:scroll;height:200px}
  .reason-title{margin-top:-4rem}
}
@media (max-width:768px){
  section{padding:3rem 1rem}
  .news-list .item a{flex-direction:column;gap:.2rem}
  .box_con{padding:.5rem 1rem 1.5rem}
  .formTable th,.formTable td{display:block;width:100%}
  .formTable th{background:var(--sage);color:#fff;text-align:center;padding:.7em .3em}
  .note{color:#fff}
  .box_pri{padding:1rem}
  .hero h1{letter-spacing:.3em}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .h3_p{opacity:1;transform:none}
  .hero-img2{opacity:0}
}