@charset "UTF-8";

:root{
  --pink:#e85b83;
  --pink-deep:#d94370;
  --pink-soft:#fff1f5;
  --rose:#f6dbe4;
  --cream:#fffaf8;
  --text:#4d4145;
  --muted:#76686d;
  --line:#ead9de;
  --white:#fff;
  --shadow:0 18px 55px rgba(84,49,62,.10);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0;
  color:var(--text);
  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,.95);
  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:18px;
}
.brand{display:flex;flex-direction:column;text-decoration:none}
.brand-sub{font-size:10px;color:var(--muted);line-height:1.3}
.brand-name{font:700 20px/1.4 serif;color:var(--pink-deep)}
.header-cta{
  padding:9px 18px;
  border-radius:999px;
  color:#fff;
  background:var(--pink);
  text-decoration:none;
  font-size:13px;
  font-weight:700;
  box-shadow:0 7px 18px rgba(232,91,131,.20);
}
.breadcrumb{
  width:min(1120px,calc(100% - 40px));
  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{
  position:relative;
  overflow:hidden;
  padding:82px 20px 76px;
  text-align:center;
  background:
    radial-gradient(circle at 8% 25%,rgba(246,219,228,.85),transparent 24%),
    radial-gradient(circle at 92% 70%,rgba(255,229,237,.9),transparent 25%),
    linear-gradient(180deg,#fff,#fff6f9);
}
.hero:before,.hero:after{
  content:"✦";
  position:absolute;
  color:rgba(232,91,131,.24);
  font-size:44px;
}
.hero:before{left:7%;top:32%}
.hero:after{right:7%;bottom:25%}
.hero-inner{width:min(900px,100%);margin:auto}
.eyebrow,.section-kicker{
  margin:0 0 12px;
  color:var(--pink);
  font-size:11px;
  font-weight:800;
  letter-spacing:.22em;
}
.hero h1{
  margin:0;
  font:700 clamp(34px,5vw,54px)/1.45 serif;
  color:#493b40;
}
.hero-lead{
  margin:20px 0 8px;
  color:var(--pink-deep);
  font-size:clamp(17px,2.3vw,23px);
  font-weight:700;
}
.hero-note{margin:0;color:var(--muted);font-size:13px}
.select-section{padding:78px 20px;background:#fff}
.section-inner{width:min(1120px,100%);margin:auto}
.section-heading{text-align:center;margin-bottom:38px}
.section-heading h2,.reassurance h2,.message-box h2{
  margin:0 0 13px;
  color:#493b40;
  font:700 clamp(27px,4vw,40px)/1.5 serif;
}
.section-heading>p:last-child{margin:0;color:var(--muted);font-size:14px}
.choice-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:18px;
}
.choice-card{
  position:relative;
  min-height:260px;
  padding:27px 25px 24px;
  background:linear-gradient(145deg,#fff,#fff8fa);
  border:1px solid var(--line);
  border-radius:22px;
  text-decoration:none;
  box-shadow:0 9px 30px rgba(84,49,62,.06);
  transition:transform .2s ease,box-shadow .2s ease,border-color .2s ease;
}
.choice-card:hover{
  transform:translateY(-4px);
  border-color:rgba(232,91,131,.55);
  box-shadow:var(--shadow);
}
.choice-number{
  position:absolute;
  top:17px;right:20px;
  color:#cdb9bf;
  font-size:12px;
  font-weight:800;
}
.choice-icon{
  display:flex;
  width:52px;height:52px;
  align-items:center;justify-content:center;
  margin-bottom:15px;
  color:var(--pink-deep);
  background:var(--pink-soft);
  border-radius:50%;
  font-weight:800;
  font-size:19px;
}
.choice-card h3{margin:0 0 8px;color:#493b40;font-size:20px}
.choice-card p{margin:0 0 17px;color:var(--muted);font-size:13px}
.choice-card strong{color:var(--pink-deep);font-size:12px}
.choice-phone{border-color:rgba(232,91,131,.4)}
.choice-line .choice-icon{font-size:11px;letter-spacing:.03em}
.choice-service{background:#fff}
.important{
  max-width:900px;
  margin:32px auto 0;
  padding:22px 25px;
  background:#fffaf0;
  border:1px solid #eadfc7;
  border-radius:17px;
}
.important-title{margin-bottom:5px;color:#9b7040;font-weight:800;font-size:14px}
.important p{margin:0 0 7px;font-size:12px;color:#6e5e52}
.important a{color:var(--pink-deep);font-size:12px;font-weight:700;text-decoration:none}
.安心-section{padding:76px 20px;background:#fff7f9}
.reassurance{
  display:grid;
  grid-template-columns:.9fr 1.1fr;
  gap:55px;
  align-items:center;
}
.steps{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.steps>div{
  padding:18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:15px;
}
.steps span{display:block;color:var(--pink);font-size:11px;font-weight:800}
.steps strong{display:block;color:#493b40;font-size:14px}
.steps small{display:block;color:var(--muted);font-size:10px;line-height:1.5}
.message-section{
  padding:78px 20px;
  text-align:center;
  background:linear-gradient(145deg,#fff,#fff0f4);
}
.message-box{width:min(800px,100%);margin:auto}
.message-box h2{margin-bottom:15px}
.message-box h2 em{color:var(--pink-deep);font-style:normal}
.message-box>p:not(.section-kicker){color:var(--muted);font-size:14px}
.message-buttons{
  display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:28px
}
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  min-width:220px;min-height:51px;padding:11px 24px;
  border-radius:999px;text-decoration:none;font-size:13px;font-weight:700
}
.primary{color:#fff;background:var(--pink);box-shadow:0 10px 25px rgba(232,91,131,.22)}
.secondary{color:var(--pink-deep);background:#fff;border:1px solid var(--pink)}
.site-footer{
  padding:30px 20px;text-align:center;color:#fff;background:#5a4b50
}
.site-footer p{margin:0 0 8px;font:700 17px serif}
.site-footer div{display:flex;justify-content:center;flex-wrap:wrap;gap:15px;margin-bottom:10px}
.site-footer a{color:#fff;text-decoration:none;font-size:11px}
.site-footer small{font-size:10px;opacity:.8}

@media(max-width:820px){
  .choice-grid{grid-template-columns:1fr 1fr}
  .reassurance{grid-template-columns:1fr;gap:30px}
}
@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 13px;font-size:11px}
  .breadcrumb{width:calc(100% - 28px);white-space:nowrap;overflow:auto}
  .hero{padding:58px 18px 60px}
  .select-section,.message-section,.安心-section{padding:58px 15px}
  .choice-grid{grid-template-columns:1fr}
  .choice-card{min-height:auto}
  .steps{grid-template-columns:1fr}
  .message-buttons{flex-direction:column;align-items:stretch}
  .btn{width:100%;min-width:0}
}


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

.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;

    }

}