@charset "UTF-8";

:root{
  --pink:#e85b83;
  --pink-deep:#d94370;
  --pink-pale:#fff1f5;
  --rose:#f5dce4;
  --cream:#fffaf8;
  --brown:#4d4145;
  --muted:#76686d;
  --line:#ead9de;
  --shadow:0 16px 45px rgba(82,52,62,.09);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--brown);
  background:var(--cream);
  font-family:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  line-height:1.85;
  -webkit-text-size-adjust:100%;
}
a{color:inherit}
.site-header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.96);
  backdrop-filter:blur(12px);
  border-bottom:1px solid rgba(232,91,131,.18);
}
.header-inner{
  width:min(1160px,calc(100% - 32px));
  min-height:72px;margin:auto;
  display:flex;align-items:center;justify-content:space-between;gap:15px;
}
.brand{display:flex;flex-direction:column;text-decoration:none}
.brand-sub{font-size:9px;letter-spacing:.16em;color:var(--muted);line-height:1.3}
.brand-name{font:700 20px/1.4 serif;color:var(--pink-deep)}
.header-cta{
  padding:9px 17px;border-radius:999px;
  color:#fff;background:var(--pink);
  font-size:12px;font-weight:700;text-decoration:none;
  box-shadow:0 7px 18px rgba(232,91,131,.2);
}
.breadcrumb{
  width:min(1100px,calc(100% - 32px));margin:auto;
  padding:15px 0;color:var(--muted);font-size:12px;
}
.breadcrumb a{color:var(--pink-deep);text-decoration:none}
.breadcrumb span{margin:0 8px}
.hero{
  padding:72px 20px 64px;text-align:center;
  background:
    radial-gradient(circle at 8% 35%,rgba(245,220,228,.8),transparent 25%),
    radial-gradient(circle at 92% 70%,rgba(255,226,235,.85),transparent 25%),
    linear-gradient(180deg,#fff,#fff5f8);
}
.eyebrow{
  margin:0 0 10px;color:var(--pink);
  font-size:11px;font-weight:800;letter-spacing:.23em;
}
.hero h1{margin:0;font:700 clamp(31px,5vw,50px)/1.45 serif;color:#493b40}
.hero p:last-child{margin:16px 0 0;color:var(--muted);font-size:14px}
.notice{
  width:min(820px,calc(100% - 32px));margin:-20px auto 45px;
  padding:20px 24px;display:flex;gap:15px;align-items:center;
  background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:var(--shadow);
}
.notice-icon{
  flex:0 0 46px;width:46px;height:46px;border-radius:50%;
  display:grid;place-items:center;color:var(--pink-deep);
  background:var(--pink-pale);font-size:21px;
}
.notice strong{font-size:14px}
.notice p{margin:2px 0 0;color:var(--muted);font-size:12px}
.document-wrap{width:min(900px,calc(100% - 32px));margin:auto}
.document-head{
  display:flex;justify-content:space-between;align-items:center;
  padding:12px 18px;background:#5a4b50;color:#fff;
  border-radius:15px 15px 0 0;font-size:10px;letter-spacing:.08em;
}
.document{
  height:min(520px,65vh);overflow-y:auto;
  padding:42px clamp(22px,5vw,58px);
  background:#fff;border:1px solid var(--line);border-top:0;
  box-shadow:var(--shadow);
  scrollbar-color:var(--pink) #f6eef0;
}
.document:focus{outline:2px solid rgba(232,91,131,.35);outline-offset:-2px}
.doc-section{padding-bottom:27px;margin-bottom:27px;border-bottom:1px solid #f0e4e8}
.doc-section:last-of-type{border-bottom:0}
.doc-section h2{
  margin:0 0 12px;padding-left:14px;
  border-left:4px solid var(--pink);
  color:#493b40;font-size:20px;line-height:1.5;
}
.doc-section p,.doc-section li{font-size:14px}
.doc-section p{margin:0}
.doc-section ol{margin:13px 0 0;padding-left:25px}
.doc-section li{margin:8px 0}
.doc-meta{
  padding-top:8px;color:var(--muted);font-size:11px;
}
.doc-meta p{margin:2px 0}
.read-status{
  padding:15px 18px 12px;background:#fff;
  border:1px solid var(--line);border-top:0;border-radius:0 0 15px 15px;
}
.progress-track{height:5px;background:#f0e4e8;border-radius:99px;overflow:hidden}
.progress-track span{
  display:block;width:0;height:100%;background:var(--pink);
  transition:width .15s ease;
}
.read-status p{margin:7px 0 0;text-align:center;color:var(--muted);font-size:11px}
.consent-section{
  width:min(760px,calc(100% - 32px));margin:38px auto 0;
  padding:25px;background:#fff;border:1px solid var(--line);
  border-radius:20px;box-shadow:var(--shadow);
}
.consent-label{
  display:flex;align-items:flex-start;gap:13px;cursor:pointer;
  padding:17px;border-radius:14px;background:var(--pink-pale);
}
.consent-label input{
  position:absolute;opacity:0;pointer-events:none;
}
.custom-check{
  flex:0 0 24px;width:24px;height:24px;margin-top:1px;
  border:2px solid #d9c2ca;border-radius:7px;background:#fff;
  position:relative;
}
.consent-label input:checked + .custom-check{
  background:var(--pink);border-color:var(--pink);
}
.consent-label input:checked + .custom-check:after{
  content:"";position:absolute;left:7px;top:3px;width:6px;height:11px;
  border:solid #fff;border-width:0 2px 2px 0;transform:rotate(45deg);
}
.consent-label strong{display:block;font-size:14px}
.consent-label small{display:block;margin-top:3px;color:var(--muted);font-size:10px}
#submitButton{
  width:100%;margin-top:15px;min-height:54px;border:0;border-radius:999px;
  display:flex;align-items:center;justify-content:center;gap:15px;
  color:#fff;background:#cfc4c8;font-size:14px;font-weight:800;
  cursor:not-allowed;transition:.2s;
}
#submitButton b{font-size:20px}
#submitButton.is-ready{
  background:var(--pink);cursor:pointer;
  box-shadow:0 10px 24px rgba(232,91,131,.22);
}
#submitButton.is-ready:hover{background:var(--pink-deep);transform:translateY(-1px)}
.consent-help{margin:9px 0 0;text-align:center;color:var(--muted);font-size:10px}
.links-section{
  width:min(760px,calc(100% - 32px));margin:25px auto 70px;
  display:flex;justify-content:center;flex-wrap:wrap;gap:10px;
}
.links-section a{
  padding:10px 15px;border:1px solid var(--line);border-radius:999px;
  background:#fff;color:var(--pink-deep);font-size:11px;text-decoration:none;
}
.links-section a:hover{border-color:var(--pink)}
.site-footer{padding:30px 20px;text-align:center;background:#5a4b50;color:#fff}
.site-footer p{margin:0 0 5px;font:700 17px serif}
.site-footer small{font-size:10px;opacity:.8}
@media(max-width:600px){
  .header-inner{width:calc(100% - 24px);min-height:64px}
  .brand-sub{display:none}.brand-name{font-size:17px}
  .header-cta{padding:8px 12px;font-size:10px}
  .hero{padding:55px 17px 54px}
  .notice{margin-top:-17px;padding:17px;align-items:flex-start}
  .document{height:58vh;padding:30px 20px}
  .doc-section h2{font-size:17px}
  .doc-section p,.doc-section li{font-size:13px}
  .consent-section{padding:18px}
  .links-section{margin-bottom:50px}
}


/* ==========================================
   セリシール共通固定ボトムナビ
   ========================================== */

.cerisier-bottom-nav {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;

    width: 100%;
    height: 70px;

    display: flex;
    align-items: stretch;
    justify-content: center;

    background: rgba(255, 255, 255, 0.97);

    border-top: 1px solid #ead1d8;

    box-shadow: 0 -3px 15px rgba(90, 50, 50, 0.12);

    z-index: 10000;

    box-sizing: border-box;

    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}


/* 各ボタン */

.cerisier-bottom-nav__item {

    flex: 1 1 0;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

    min-width: 0;

    text-decoration: none;

    font-size: 13px;
    font-weight: 600;

    color: #654848;

    background: #ffffff;

    border-right: 1px solid #eadde1;

    box-sizing: border-box;

    transition:
        background-color .2s ease,
        color .2s ease,
        transform .1s ease;
}


/* 最後の罫線 */

.cerisier-bottom-nav__item:last-child {
    border-right: none;
}


/* アイコン */

.cerisier-bottom-nav__icon {

    display: block;

    margin-bottom: 3px;

    font-size: 21px;

    line-height: 1;

}


/* 電話 */

.cerisier-bottom-nav__phone
.cerisier-bottom-nav__icon {
    color: #c85d72;
}


/* 相談メニュー */

.cerisier-bottom-nav__service
.cerisier-bottom-nav__icon {
    color: #d47b91;
}


/* 予約 */

.cerisier-bottom-nav__reserve {

    background: #d95b78;

    color: #ffffff;

}

.cerisier-bottom-nav__reserve
.cerisier-bottom-nav__icon {

    color: #ffffff;

}


/* マウスオーバー */

.cerisier-bottom-nav__phone:hover,
.cerisier-bottom-nav__service:hover {

    background: #fff3f6;

    color: #c94f6d;

}


.cerisier-bottom-nav__reserve:hover {

    background: #c94f6d;

}


/* タップ時 */

.cerisier-bottom-nav__item:active {

    transform: scale(.98);

}


/* ==========================================
   スマートフォン
   ========================================== */

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

    .cerisier-bottom-nav {

        height: 64px;

    }


    .cerisier-bottom-nav__item {

        font-size: 11px;

    }


    .cerisier-bottom-nav__icon {

        font-size: 19px;

        margin-bottom: 2px;

    }

}


/* ==========================================
   ボトムナビにコンテンツが隠れないための余白
   ========================================== */

body {

    padding-bottom: 70px;

}


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

    body {

        padding-bottom: 64px;

    }

}