:root{
  --bg:#ebe7e1;
  --bg-soft:#f3f0eb;
  --card:#f8f7f5;

  --text:#2b211d;
  --sub:#74655d;

  --line:#d7d0c8;
  --accent:#a88463;

  --font-ja:"Noto Sans JP",sans-serif;

  --container:1180px;
  --narrow:980px;
}

/* ======================================================
RESET
====================================================== */

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

html{
  scroll-behavior:smooth;
}

body{
  background:var(--bg);
  color:var(--text);

  font-family:var(--font-ja);
  font-size:16px;
  line-height:1.95;
  letter-spacing:.04em;

  -webkit-font-smoothing:antialiased;
}

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

a{
  color:inherit;
  text-decoration:none;
}

/* ======================================================
COMMON
====================================================== */

.container{
  width:min(100% - 48px,var(--container));
  margin-inline:auto;
}

.container.narrow{
  width:min(100% - 48px,var(--narrow));
}

.section{
  padding:120px 0;
}

.section-heading{
  margin-bottom:56px;
}

.section-label{
  font-size:13px;
  letter-spacing:.18em;
  color:var(--accent);

  margin-bottom:26px;
}

.section-title{
  font-size:clamp(34px,4vw,58px);
  line-height:1.45;
  letter-spacing:.04em;
  font-weight:400;
}

.section-description{
  margin-top:30px;

  color:var(--sub);

  font-size:15px;
  line-height:2;
}

/* ======================================================
FV
====================================================== */

.fv{
  position:relative;

  min-height:100vh;

  display:flex;
  align-items:center;

  overflow:hidden;

  color:#fff;
}

.fv-image{
  position:absolute;
  inset:0;
}

.fv-image img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.fv-overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.52),
      rgba(0,0,0,.16)
    );
}

.fv .container{
  position:relative;
  z-index:2;
}

.fv-content{
  width:min(100%,760px);

  padding:150px 0 120px;
}

.eyebrow{
  font-size:13px;
  letter-spacing:.18em;

  color:rgba(255,255,255,.82);

  margin-bottom:28px;
}

.fv-title{
  font-size:clamp(34px,5.8vw,72px);
  line-height:1.28;
  letter-spacing:.03em;
  font-weight:400;

  color:#fff;
}

.fv-text{
  margin-top:34px;

  color:rgba(255,255,255,.92);

  font-size:16px;
  line-height:2.1;
}

.fv-button{
  display:inline-flex;
  align-items:center;
  justify-content:center;

  margin-top:46px;

  min-width:260px;
  height:64px;

  padding:0 40px;

  background:rgba(255,255,255,.12);
  border:1px solid rgba(255,255,255,.34);

  color:#fff;

  font-size:14px;
  letter-spacing:.12em;

  transition:background .3s ease;
}

.fv-button:hover{
  background:rgba(255,255,255,.2);
}

/* ======================================================
INTRO
====================================================== */

.intro{
  background:var(--bg-soft);
}

.intro-lead{
  max-width:900px;
}

.intro-sub{
  font-size:18px;
  line-height:2.1;

  color:var(--sub);
}

/* ======================================================
BASIC SET
====================================================== */

.basic-set{
  background:var(--bg);
}

.basic-card{
  background:var(--card);

  padding:64px;
}

.basic-card-inner{
  max-width:760px;
}

.basic-description{
  color:var(--sub);

  font-size:16px;
  line-height:2.1;
}

.basic-description + .basic-description{
  margin-top:24px;
}

.basic-list{
  list-style:none;

  margin-top:44px;

  border-top:1px solid var(--line);
}

.basic-list li{
  padding:20px 0;

  border-bottom:1px solid var(--line);

  font-size:15px;
}

/* ======================================================
OPTIONAL
====================================================== */

.section-optional{
  padding:120px 0;
}

.section-inner{
  width:min(100% - 48px,var(--narrow));
  margin-inline:auto;
}

.catalog-section{
  width:min(100% - 48px,var(--narrow));

  margin:72px auto 0;

  display:grid;
  gap:34px;
}

.catalog-card{
  display:grid;
  grid-template-columns:1fr 1fr;

  background:var(--card);

  overflow:hidden;
}

.catalog-image{
  aspect-ratio:4 / 3;

  overflow:hidden;

  background:#f2efea;
}

.catalog-image img{
  width:100%;
  height:100%;

  object-fit:cover;
}

.catalog-content{
  padding:64px 48px;

  display:flex;
  flex-direction:column;
  justify-content:center;
}

.catalog-label{
  font-size:13px;
  letter-spacing:.18em;

  color:var(--accent);

  margin-bottom:26px;
}

.catalog-title{
  font-size:clamp(28px,3vw,46px);
  line-height:1.55;
  font-weight:400;
}

.catalog-text{
  margin-top:28px;

  color:var(--sub);

  font-size:15px;
  line-height:2;
}

/* ======================================================
REASSURANCE
====================================================== */

.reassurance{
  background:var(--bg-soft);
}

.reassurance-grid{
  display:grid;
  gap:18px;
}

.reassurance-card{
  background:var(--card);

  padding:28px 32px;

  font-size:15px;
  line-height:1.9;
}

/* ======================================================
FORM INTRO
====================================================== */

.form-intro{
  padding-bottom:48px;
}

.form-intro-text{
  color:var(--sub);

  font-size:16px;
  line-height:2;

  margin-top:-8px;
}

/* ======================================================
FORM
====================================================== */

.request-form-section{
  padding:0 0 120px;
}

.form-card{
  background:var(--card);

  padding:52px 42px 44px;
}

.form-group + .form-group{
  margin-top:28px;
}

.form-group label,
.checkbox-title{
  display:block;

  font-size:15px;

  margin-bottom:12px;
}

.required{
  font-size:11px;

  color:#9d938a;

  margin-left:8px;

  letter-spacing:.08em;
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea{
  width:100%;

  border:none;
  border-bottom:1px solid #cfc6bc;

  background:transparent;

  padding:10px 0 12px;

  font-size:16px;
  color:var(--text);

  font-family:var(--font-ja);

  outline:none;
  border-radius:0;
}

textarea{
  resize:vertical;
  min-height:120px;
}

input:focus,
textarea:focus{
  border-color:#8d7762;
}

.checkbox-item{
  display:flex !important;
  align-items:center;

  gap:10px;

  margin-top:12px;

  font-size:15px;
}

.checkbox-item input{
  width:16px;
  height:16px;
}

.submit-button{
  width:100%;
  height:68px;

  margin-top:40px;

  border:none;

  background:#241d19;

  color:#fff;

  font-size:14px;
  letter-spacing:.12em;

  cursor:pointer;

  transition:opacity .3s ease;
}

.submit-button:hover{
  opacity:.82;
}

.form-note{
  margin-top:18px;

  color:var(--sub);

  font-size:13px;
  line-height:1.8;
}

/* ======================================================
FIXED CTA
====================================================== */

.fixed-cta{
  position:fixed;

  right:28px;
  bottom:28px;

  width:190px;
  height:54px;

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

  background:rgba(27,22,19,.92);
  backdrop-filter:blur(10px);

  color:#fff;

  font-size:13px;
  letter-spacing:.12em;

  z-index:1000;

  box-shadow:0 10px 30px rgba(0,0,0,.12);
}

/* ======================================================
FOOTER
====================================================== */

.footer{
  padding:100px 0;

  background:#e4dfd8;
}

.footer-text{
  text-align:center;

  color:var(--sub);

  font-size:15px;
  line-height:2;
}

.final-logo{
  margin:44px auto 0;
  text-align:center;
}

.final-logo img{
  width:150px;
  height:auto;

  opacity:.72;

  margin:0 auto;
}

/* ======================================================
THANKS PAGE
====================================================== */

.thanks-page{
  background:var(--bg);
}

/* THANKS FV */

.thanks-fv{
  position:relative;

  height:72vh;
  min-height:560px;

  display:flex;
  align-items:flex-end;

  overflow:hidden;

  color:#fff;
}

.thanks-fv-image{
  position:absolute;
  inset:0;
}

.thanks-fv-image img{
  width:100%;
  height:100%;

  object-fit:cover;
}

.thanks-overlay{
  position:absolute;
  inset:0;

  background:
    linear-gradient(
      to top,
      rgba(0,0,0,.58),
      rgba(0,0,0,.12)
    );
}

.thanks-content{
  position:relative;
  z-index:2;

  padding-bottom:92px;
}

.thanks-label{
  font-size:13px;
  letter-spacing:.18em;

  color:rgba(255,255,255,.82);

  margin-bottom:26px;
}

.thanks-title{
  font-size:clamp(42px,6vw,72px);
  line-height:1.34;
  letter-spacing:.04em;
  font-weight:400;
}

.thanks-text{
  margin-top:32px;

  color:rgba(255,255,255,.9);

  font-size:16px;
  line-height:2;
}

/* THANKS SECTION */

.thanks-section{
  background:var(--bg-soft);

  padding:110px 0 96px;
}

.thanks-section-title{
  font-size:clamp(34px,4vw,54px);
  line-height:1.55;
  letter-spacing:.04em;
  font-weight:400;
}

.thanks-list{
  margin-top:56px;
}

.thanks-item{
  padding:30px 0;

  border-bottom:1px solid var(--line);
}

.thanks-item:first-child{
  border-top:1px solid var(--line);
}

.thanks-number{
  font-size:13px;

  color:#aaa29a;

  letter-spacing:.08em;

  margin-bottom:14px;
}

.thanks-item p:not(.thanks-number){
  font-size:16px;
  line-height:2;
}

/* VIEWPOINT */

.thanks-viewpoint{
  background:#fff;

  padding:120px 0 40px;
}

.thanks-text-block{
  margin-top:54px;

  font-size:16px;
  line-height:2.15;
}

.thanks-text-block p + p{
  margin-top:8px;
}

.thanks-viewpoint-note{
  margin-top:42px !important;
}

/* CLOSING */

.thanks-closing{
  background:#fff;

  padding:0 0 72px;
}

.thanks-closing p{
  font-size:16px;
  line-height:2.15;

  color:var(--text);
}

/* THANKS FOOTER */

.thanks-footer{
  background:var(--bg-soft);

  padding:76px 0 72px;

  text-align:center;
}

.thanks-footer .final-logo{
  margin:0 auto 28px;
}

.thanks-footer .final-logo img{
  width:150px;
  height:auto;

  opacity:.72;

  margin:0 auto;
}

.official-link{
  display:inline-block;

  font-size:13px;
  letter-spacing:.18em;

  color:var(--sub);

  transition:opacity .3s ease;
}

.official-link:hover{
  opacity:.62;
}

/* ======================================================
TABLET
====================================================== */

@media (max-width:1024px){

  .catalog-card{
    grid-template-columns:1fr;
  }

  .catalog-image{
    aspect-ratio:16 / 10;
  }

  .catalog-content{
    padding:48px 36px;
  }

}

/* ======================================================
SP
====================================================== */

@media (max-width:768px){

  body{
    line-height:1.85;
  }

  .container,
  .container.narrow,
  .section-inner{
    width:min(100% - 28px,100%);
  }

  .section{
    padding:82px 0;
  }

  .section-heading{
    margin-bottom:34px;
  }

  .section-label,
  .eyebrow,
  .catalog-label{
    font-size:12px;

    margin-bottom:18px;
  }

  .section-title,
  .fv-title,
  .catalog-title{
    line-height:1.52;
  }

  .section-title{
    font-size:36px;
  }

  /* FV */

  .fv{
    min-height:100svh;
  }

  .fv-content{
    width:100%;

    padding:120px 0 90px;
  }

  .fv-title{
    font-size:clamp(32px,10vw,46px);

    line-height:1.34;
  }

  .fv-text{
    margin-top:28px;

    font-size:15px;
    line-height:2;
  }

  .fv-button{
    width:100%;
    min-width:auto;

    margin-top:38px;

    height:60px;
  }

  /* INTRO */

  .intro-sub{
    font-size:16px;
  }

  /* BASIC */

  .basic-card{
    padding:38px 28px;
  }

  .basic-description,
  .catalog-text,
  .form-intro-text{
    font-size:15px;
    line-height:1.95;
  }

  .basic-list{
    margin-top:34px;
  }

  .basic-list li{
    padding:16px 0;

    font-size:14px;
  }

  /* OPTIONAL */

  .section-optional{
    padding:82px 0;
  }

  .catalog-section{
    margin-top:42px;

    gap:22px;
  }

  .catalog-image{
    aspect-ratio:16 / 10;
  }

  .catalog-content{
    padding:32px 26px;
  }

  .catalog-title{
    font-size:18px;
  }

  .catalog-text{
    margin-top:18px;
  }

  /* REASSURANCE */

  .reassurance-grid{
    gap:12px;
  }

  .reassurance-card{
    padding:20px 22px;

    font-size:14px;
    line-height:1.8;
  }

  /* FORM */

  .form-intro{
    padding-bottom:24px;
  }

  .request-form-section{
    padding-bottom:82px;
  }

  .form-card{
    padding:30px 22px 28px;
  }

  .form-group + .form-group{
    margin-top:22px;
  }

  .form-group label,
  .checkbox-title{
    font-size:14px;

    margin-bottom:8px;
  }

  .required{
    font-size:10px;

    margin-left:6px;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea{
    padding:8px 0 10px;

    font-size:16px;
  }

  textarea{
    min-height:100px;
  }

  .checkbox-item{
    margin-top:10px;

    font-size:14px;
  }

  .submit-button{
    height:60px;

    margin-top:32px;
  }

  /* FIXED CTA */

  .fixed-cta{
    left:20px;
    right:20px;
    bottom:18px;

    width:auto;
    height:58px;
  }

  body:not(.thanks-page){
    padding-bottom:92px;
  }

  /* FOOTER */

  .footer{
    padding:72px 0;
  }

  .footer-text{
    font-size:14px;
  }

  .final-logo{
    margin-top:32px;
  }

  .final-logo img{
    width:150px;
  }

  /* THANKS */

  .thanks-fv{
    height:64svh;
    min-height:520px;
  }

  .thanks-content{
    padding-bottom:70px;
  }

  .thanks-title{
    font-size:38px;
    line-height:1.45;
  }

  .thanks-text{
    margin-top:24px;

    font-size:15px;
  }

  .thanks-section{
    padding:82px 0 76px;
  }

  .thanks-section-title{
    font-size:34px;
    line-height:1.6;
  }

  .thanks-list{
    margin-top:42px;
  }

  .thanks-item{
    padding:26px 0;
  }

  .thanks-item p:not(.thanks-number){
    font-size:15px;
    line-height:2;
  }

  .thanks-viewpoint{
    padding:88px 0 32px;
  }

  .thanks-text-block{
    margin-top:42px;

    font-size:15px;
    line-height:2.05;
  }

  .thanks-closing{
    padding:0 0 56px;
  }

  .thanks-closing p{
    font-size:15px;
    line-height:2.05;
  }

  .thanks-footer{
    padding:64px 0 62px;
  }

  .thanks-footer .final-logo{
    margin-bottom:24px;
  }

  .thanks-footer .final-logo img{
    width:150px;
  }

}