/*
Theme Name: Belle Salon
Theme URI:
Author: wait+
Author URI:
Description: 美容院向けオンライン予約サイトテーマ（複数店舗対応）。お客様用の予約フローと、スタッフ用の管理画面テンプレートを含むミニマルデザイン。produced by wait+
Version: 1.0.0
Requires at least: 6.0
Tested up to: 6.5
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: belle-salon
*/

:root{
    --ink:#161616; --ink2:#4a4a4a; --sub:#9a9a9a; --line:#eee; --line2:#e2e2e2;
    --soft:#f6f6f4; --bg:#fff;
  }
  *{box-sizing:border-box}
  html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
  body{margin:0;background:var(--bg);color:var(--ink);line-height:1.7;
    font-family:"Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Yu Gothic",system-ui,sans-serif;
    font-size:15px}
  .serif{font-family:"Hiragino Mincho ProN","Yu Mincho",YuMincho,Georgia,"Times New Roman",serif}
  ::selection{background:#161616;color:#fff}

  /* hero */
  .hero{text-align:center;padding:78px 24px 30px;max-width:760px;margin:0 auto}
  .brand{font-size:24px;letter-spacing:.42em;font-weight:400;padding-left:.42em}
  .brand-sub{font-size:10px;letter-spacing:.5em;color:var(--sub);margin-top:12px;padding-left:.5em}
  .rule{width:34px;height:1px;background:var(--ink);margin:30px auto}
  .hero h1{font-weight:300;font-size:40px;letter-spacing:.02em;margin:0;font-style:italic}
  .hero p{color:var(--ink2);font-size:14px;margin:16px 0 0;letter-spacing:.02em}

  /* booking shell */
  .book{max-width:600px;margin:18px auto 90px;padding:0 24px}
  .prog{height:1px;background:var(--line);margin-bottom:46px;position:relative;overflow:hidden}
  .prog span{position:absolute;left:0;top:0;height:100%;background:var(--ink);width:0;transition:width .45s cubic-bezier(.4,0,.1,1)}

  /* section head */
  .kick{font-size:10px;letter-spacing:.32em;color:var(--sub);margin-bottom:14px}
  .stitle{font-weight:300;font-size:27px;letter-spacing:.02em;margin:0 0 6px}
  .ssub{color:var(--sub);font-size:13px;margin:0 0 30px}

  /* option list (罫線ベース) */
  .list{margin:0 0 34px;border-top:1px solid var(--line)}
  .opt{display:flex;align-items:center;gap:18px;padding:20px 6px;border-bottom:1px solid var(--line);
    cursor:pointer;transition:padding .18s,background .18s}
  .opt:hover{background:var(--soft);padding-left:14px;padding-right:14px}
  .opt.sel{background:#fbfbf9}
  .opt .ic{flex:0 0 auto;color:var(--ink2);display:flex}
  .opt .ic svg{width:22px;height:22px;stroke-width:1.3}
  .opt .meta{flex:1;min-width:0}
  .opt .name{display:block;font-size:16px;letter-spacing:.02em}
  .opt.sel .name{font-weight:600}
  .opt .desc{display:block;font-size:12px;color:var(--sub);margin-top:2px;letter-spacing:.01em}
  .opt .price{font-size:15px;letter-spacing:.03em;white-space:nowrap}
  .opt .tag{font-size:10px;letter-spacing:.18em;color:var(--sub);white-space:nowrap}
  .opt .tick{flex:0 0 auto;width:18px;color:var(--ink);opacity:0;transform:scale(.6);transition:.18s}
  .opt .tick svg{width:18px;height:18px;stroke-width:2}
  .opt.sel .tick{opacity:1;transform:scale(1)}

  /* calendar */
  .cal-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:20px}
  .cal-title{font-size:15px;letter-spacing:.12em}
  .cal-nav{border:none;background:none;font-size:22px;line-height:1;color:var(--ink);cursor:pointer;
    width:34px;height:34px;transition:.15s;border-radius:50%}
  .cal-nav:hover:not(:disabled){background:var(--soft)}
  .cal-nav:disabled{color:#dcdcdc;cursor:not-allowed}
  .cal-grid{display:grid;grid-template-columns:repeat(7,1fr)}
  .cal-w{text-align:center;font-size:10px;letter-spacing:.1em;color:var(--sub);padding-bottom:10px}
  .cal-cell{height:46px;display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:14px}
  .cal-cell .d{width:36px;height:36px;display:flex;align-items:center;justify-content:center;
    border-radius:50%;transition:.15s;font-variant-numeric:tabular-nums}
  .cal-cell:hover:not(.dis):not(.out) .d{background:var(--soft)}
  .cal-cell.sel .d{background:var(--ink);color:#fff;font-weight:500}
  .cal-cell.today:not(.sel) .d{box-shadow:inset 0 0 0 1px var(--ink)}
  .cal-cell.dis{color:#dcdcdc;cursor:not-allowed}
  .cal-cell.out{cursor:default}
  .cal-sun{color:#c0392b}.cal-sat{color:#2d6cb5}

  /* slots */
  .slots{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px;margin-top:24px}
  .slot{padding:12px 0;text-align:center;border:1px solid var(--line2);font-size:13.5px;cursor:pointer;
    letter-spacing:.06em;transition:.15s;font-variant-numeric:tabular-nums}
  .slot:hover:not(.x){border-color:var(--ink)}
  .slot.sel{background:var(--ink);color:#fff;border-color:var(--ink)}
  .slot.x{color:#dcdcdc;border-color:#f3f3f3;cursor:not-allowed}
  .slot-hint{color:var(--sub);font-size:12.5px;margin-top:24px}

  /* form */
  .field{margin-bottom:26px}
  .field label{display:block;font-size:11px;letter-spacing:.14em;color:var(--sub);margin-bottom:8px}
  .field label .req{color:var(--ink);margin-left:6px}
  .field input,.field textarea{width:100%;border:none;border-bottom:1px solid var(--line2);
    padding:9px 2px;font-size:15px;font-family:inherit;background:none;transition:.15s;resize:vertical}
  .field input::placeholder,.field textarea::placeholder{color:#cfcfcf}
  .field input:focus,.field textarea:focus{outline:none;border-color:var(--ink)}

  /* summary */
  .sum{border-top:1px solid var(--ink);margin:0 0 34px}
  .sum .row{display:flex;justify-content:space-between;align-items:baseline;
    padding:14px 2px;border-bottom:1px solid var(--line);font-size:14px}
  .sum .row .k{color:var(--sub);font-size:11px;letter-spacing:.12em}
  .sum .row .v{text-align:right;letter-spacing:.02em}
  .sum .total{padding-top:18px;border-bottom:none}
  .sum .total .v{font-size:22px;font-weight:300}

  /* actions */
  .actions{display:flex;align-items:center;justify-content:space-between;gap:18px;margin-top:6px}
  .btn{font-family:inherit;cursor:pointer;transition:.18s}
  .btn-primary{flex:1;background:var(--ink);color:#fff;border:1px solid var(--ink);
    padding:15px 30px;font-size:12px;letter-spacing:.2em}
  .btn-primary:hover{background:#000}
  .btn-primary:disabled{background:#fff;color:#cfcfcf;border-color:#ececec;cursor:not-allowed}
  .btn-ghost{background:none;border:none;color:var(--sub);font-size:12px;letter-spacing:.14em;
    text-decoration:underline;text-underline-offset:5px;padding:6px 2px;white-space:nowrap}
  .btn-ghost:hover{color:var(--ink)}

  /* done */
  .done{text-align:center;padding:40px 0 20px}
  .done .check{width:58px;height:58px;border-radius:50%;border:1px solid var(--ink);
    display:flex;align-items:center;justify-content:center;margin:0 auto 28px}
  .done .check svg{width:26px;height:26px;stroke-width:1.5}
  .done h2{font-weight:300;font-size:24px;margin:0 0 18px;letter-spacing:.04em}
  .done p{color:var(--ink2);font-size:14px;margin:0 auto;max-width:380px}

  .note{text-align:center;color:#c4c4c4;font-size:11px;letter-spacing:.06em;margin-top:40px}
  .demo-flag{position:fixed;left:16px;bottom:16px;font-size:10px;letter-spacing:.24em;color:var(--sub)}
  footer{text-align:center;color:var(--sub);font-size:11px;letter-spacing:.16em;padding:30px 0 40px}

  @media(max-width:560px){
    .hero{padding:54px 22px 22px}.hero h1{font-size:31px}
    .stitle{font-size:23px}.book{margin-bottom:60px}
    .cal-cell{height:42px}.cal-cell .d{width:34px;height:34px}
  }