/* =========================
   Base
========================= */

:root {
  --color-main: #657b67;
  --color-main-dark: #4f6351;

  --color-accent: #d99763;
  --color-accent-dark: #ba7847;

  --color-cream: #f7f3eb;
  --color-beige: #ede4d8;

  --color-text: #444b46;
  --color-light-text: #707771;

  --color-white: #ffffff;

  --radius-sm: 14px;
  --radius-md: 22px;
  --radius-lg: 34px;

  --shadow-soft:
    0 14px 40px rgba(68, 75, 70, 0.08);

  --transition:
    all 0.25s ease;
}


html {
  scroll-behavior: smooth;
}


body {
  font-family:
    "Noto Sans JP",
    sans-serif;

  color: var(--color-text);

  background: #ffffff;

  line-height: 1.9;

  letter-spacing: 0.02em;
}


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


a {
  text-decoration: none;
}


h1,
h2,
h3 {
  font-family:
    "Zen Maru Gothic",
    "Noto Sans JP",
    sans-serif;

  font-weight: 700;

  color: #374039;
}


/* =========================
   Common
========================= */

.section-padding {
  padding: 110px 0;
}


.bg-cream {
  background:
    var(--color-cream);
}


.section-heading {
  max-width: 760px;
  margin: 0 auto 55px;
}


.section-heading h2 {
  font-size: clamp(
    2rem,
    4vw,
    3rem
  );

  margin-bottom: 20px;
}


.section-heading p {
  color:
    var(--color-light-text);
}


.section-eyebrow {
  display: inline-block;

  margin-bottom: 14px;

  color:
    var(--color-accent-dark);

  font-size: 0.8rem;

  font-weight: 700;

  text-transform: uppercase;

  letter-spacing: 0.14em;
}


.section-title {
  font-size:
    clamp(
      2rem,
      4vw,
      3rem
    );

  line-height: 1.45;

  margin-bottom: 28px;
}


.section-title span {
  color:
    var(--color-main);
}


.lead-copy {
  font-size: 1.1rem;

  line-height: 2;
}


/* =========================
   Buttons
========================= */

.btn {
  border-radius: 999px;

  font-weight: 600;

  padding:
    0.85rem
    1.6rem;

  transition:
    var(--transition);
}


.btn-primary-custom {
  background:
    var(--color-main);

  color: #ffffff;

  border:
    1px solid
    var(--color-main);
}


.btn-primary-custom:hover {
  background:
    var(--color-main-dark);

  color: #ffffff;

  transform:
    translateY(-2px);
}


.btn-primary-soft {
  background:
    var(--color-main);

  color: #ffffff;

  padding:
    0.65rem
    1.2rem;
}


.btn-primary-soft:hover {
  color: #ffffff;

  background:
    var(--color-main-dark);
}


.btn-light-custom {
  background:
    rgba(
      255,
      255,
      255,
      0.92
    );

  color:
    var(--color-text);

  border:
    1px solid
    rgba(
      255,
      255,
      255,
      0.5
    );
}


.btn-light-custom:hover {
  background: #ffffff;
}


.btn-outline-custom {
  border:
    1px solid
    var(--color-main);

  color:
    var(--color-main);
}


.btn-outline-custom:hover {
  background:
    var(--color-main);

  color: #ffffff;
}


/* =========================
   Header
========================= */

.site-header {
  background:
    rgba(
      255,
      255,
      255,
      0.94
    );

  backdrop-filter:
    blur(12px);

  border-bottom:
    1px solid
    rgba(
      80,
      95,
      80,
      0.07
    );
}


.navbar {
  min-height:
    78px;
}


.navbar-brand {
  display:
    flex;

  flex-direction:
    column;

  line-height:
    1.2;
}


.brand-main {
  font-family:
    "Zen Maru Gothic",
    sans-serif;

  font-size:
    1.2rem;

  font-weight:
    700;

  color:
    var(--color-main-dark);
}


.brand-sub {
  font-size:
    0.72rem;

  margin-top:
    4px;

  color:
    var(--color-light-text);
}


.nav-link {
  color:
    var(--color-text);

  font-weight:
    500;
}


.nav-link:hover {
  color:
    var(--color-main);
}


/* =========================
   Hero
========================= */

.hero-section {
  position:
    relative;

  min-height:
    760px;

  background:
    url(images/Company.jpg)
    center
    center /
    cover
    no-repeat;

  overflow:
    hidden;
}


.hero-overlay {
  position:
    absolute;

  inset:
    0;

  background:
    linear-gradient(
      90deg,
      rgba(
        35,
        48,
        39,
        0.68
      )
      0%,

      rgba(
        35,
        48,
        39,
        0.38
      )
      46%,

      rgba(
        35,
        48,
        39,
        0.08
      )
      100%
    );
}


.min-vh-75 {
  min-height:
    760px;
}


.hero-content {
  color: #ffffff;

  padding:
    80px
    0;
}


.hero-eyebrow {
  color:
    #f0d8c0;
}


.hero-title {
  color:
    #ffffff;

  font-size:
    clamp(
      2.5rem,
      6vw,
      4.8rem
    );

  line-height:
    1.35;

  margin-bottom:
    28px;
}


.hero-title span {
  color:
    #f6e2c7;
}


.hero-lead {
  font-size:
    clamp(
      1rem,
      2vw,
      1.2rem
    );

  line-height:
    2;

  margin-bottom:
    36px;
}


/* =========================
   Concern Cards
========================= */

.concern-card {
  height: 100%;

  padding:
    28px
    18px;

  background:
    #ffffff;

  border-radius:
    var(--radius-md);

  text-align:
    center;

  box-shadow:
    var(--shadow-soft);

  transition:
    var(--transition);
}


.concern-card:hover {
  transform:
    translateY(-5px);
}


.icon-circle {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  width:
    68px;

  height:
    68px;

  margin:
    0
    auto
    18px;

  border-radius:
    50%;

  background:
    #e8efe8;

  color:
    var(--color-main);

  font-size:
    1.65rem;
}


.concern-card p {
  margin:
    0;

  font-weight:
    600;
}


/* =========================
   Concept
========================= */

.image-frame {
  overflow:
    hidden;

  border-radius:
    var(--radius-lg);

  box-shadow:
    var(--shadow-soft);
}


.image-frame img {
  aspect-ratio:
    4 / 3;

  object-fit:
    cover;
}


.concept-message {
  margin-top:
    32px;

  padding:
    26px
    28px;

  border-radius:
    var(--radius-md);

  background:
    var(--color-cream);

  border-left:
    4px solid
    var(--color-accent);
}


.concept-message p:last-child {
  margin-bottom: 0;
}


/* =========================
   Gallery
========================= */

.gallery-section {
  background:
    #fbfaf7;
}


.gallery-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      4,
      1fr
    );

  gap:
    18px;
}


.gallery-item {
  position:
    relative;

  margin: 0;

  overflow:
    hidden;

  border-radius:
    var(--radius-md);

  min-height:
    260px;
}


.gallery-item img {
  width:
    100%;

  height:
    100%;

  object-fit:
    cover;

  transition:
    transform
    0.4s
    ease;
}


.gallery-item:hover img {
  transform:
    scale(
      1.04
    );
}


.gallery-main {
  grid-column:
    span 2;

  grid-row:
    span 2;

  min-height:
    540px;
}


.gallery-item figcaption {
  position:
    absolute;

  left:
    18px;

  right:
    18px;

  bottom:
    18px;

  padding:
    11px
    14px;

  border-radius:
    999px;

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

  font-size:
    0.85rem;

  text-align:
    center;
}


/* =========================
   Feature Cards
========================= */

.feature-card {
  height:
    100%;

  overflow:
    hidden;

  border-radius:
    var(--radius-md);

  background:
    #ffffff;

  box-shadow:
    var(--shadow-soft);
}


.feature-card img {
  aspect-ratio:
    16 / 9;

  object-fit:
    cover;
}


.feature-content {
  padding:
    28px;
}


.feature-number {
  display:
    block;

  margin-bottom:
    10px;

  color:
    var(--color-accent);

  font-size:
    0.85rem;

  font-weight:
    700;

  letter-spacing:
    0.15em;
}


.feature-content h3 {
  margin-bottom:
    14px;

  font-size:
    1.45rem;
}


/* =========================
   Timeline
========================= */

.timeline {
  max-width:
    860px;

  margin:
    0
    auto;
}


.timeline-item {
  display:
    grid;

  grid-template-columns:
    80px
    34px
    1fr;

  gap:
    18px;

  position:
    relative;

  padding-bottom:
    35px;
}


.timeline-item::after {
  content: "";

  position:
    absolute;

  left:
    96px;

  top:
    25px;

  bottom:
    -5px;

  width:
    2px;

  background:
    #c8d3c9;
}


.timeline-item:last-child::after {
  display:
    none;
}


.timeline-time {
  font-weight:
    700;

  color:
    var(--color-main);
}


.timeline-dot {
  width:
    18px;

  height:
    18px;

  margin-top:
    6px;

  border-radius:
    50%;

  background:
    var(--color-accent);

  position:
    relative;

  z-index:
    2;
}


.timeline-item h3 {
  font-size:
    1.15rem;

  margin-bottom:
    5px;
}


.timeline-item p {
  margin:
    0;

  color:
    var(--color-light-text);
}


/* =========================
   Staff
========================= */

.staff-image {
  border-radius:
    var(--radius-lg);

  box-shadow:
    var(--shadow-soft);
}


.staff-quote {
  padding:
    24px;

  margin:
    26px
    0;

  background:
    var(--color-cream);

  border-radius:
    var(--radius-md);

  font-size:
    1.15rem;

  line-height:
    1.9;
}


.text-link {
  display:
    inline-flex;

  align-items:
    center;

  gap:
    8px;

  color:
    var(--color-main);

  font-weight:
    700;
}


/* =========================
   Family
========================= */

.family-section {
  background:
    #efe6da;
}


.family-section h2 {
  font-size:
    clamp(
      2rem,
      4vw,
      3rem
    );

  margin-bottom:
    28px;
}


.family-lead {
  font-size:
    1.1rem;

  line-height:
    2.2;
}


.family-highlight {
  display:
    inline-block;

  margin:
    20px
    0
    30px;

  padding:
    10px
    18px;

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

  border-radius:
    999px;

  font-weight:
    700;
}


/* =========================
   Steps
========================= */

.steps-grid {
  display:
    grid;

  grid-template-columns:
    repeat(
      5,
      1fr
    );

  gap:
    16px;
}


.step-card {
  padding:
    30px
    20px;

  border-radius:
    var(--radius-md);

  background:
    #ffffff;

  box-shadow:
    var(--shadow-soft);

  text-align:
    center;
}


.step-card span {
  display:
    block;

  margin-bottom:
    18px;

  color:
    var(--color-accent-dark);

  font-size:
    0.75rem;

  font-weight:
    700;
}


.step-card i {
  display:
    block;

  margin-bottom:
    15px;

  color:
    var(--color-main);

  font-size:
    2rem;
}


.step-card h3 {
  font-size:
    1.1rem;
}


/* =========================
   FAQ
========================= */

.faq-accordion {
  max-width:
    900px;
}


.accordion-item {
  margin-bottom:
    12px;

  border:
    0;

  border-radius:
    16px
    !important;

  overflow:
    hidden;
}


.accordion-button {
  padding:
    22px
    24px;

  font-weight:
    600;

  background:
    #ffffff;
}


.accordion-button:not(.collapsed) {
  color:
    var(--color-main-dark);

  background:
    #eef3ee;

  box-shadow:
    none;
}


.accordion-button:focus {
  box-shadow:
    none;
}


/* =========================
   Contact
========================= */

.contact-section {
  position:
    relative;

  padding:
    120px
    0;

  color:
    #ffffff;

  background:
    url(
      "https://placehold.co/1800x900/78907b/ffffff?text=Smile+Photo"
    )
    center
    center /
    cover
    no-repeat;
}


.contact-overlay {
  position:
    absolute;

  inset:
    0;

  background:
    rgba(
      46,
      64,
      50,
      0.72
    );
}


.contact-section h2 {
  color:
    #ffffff;

  font-size:
    clamp(
      2.3rem,
      5vw,
      3.6rem
    );

  margin-bottom:
    25px;
}


.contact-label {
  display:
    inline-block;

  margin-bottom:
    14px;

  color:
    #f2d9c1;

  font-size:
    0.8rem;

  font-weight:
    700;

  letter-spacing:
    0.15em;

  text-transform:
    uppercase;
}


/* =========================
   Access
========================= */

.info-list > div {
  display:
    grid;

  grid-template-columns:
    130px
    1fr;

  gap:
    20px;

  padding:
    17px
    0;

  border-bottom:
    1px solid
    #e5e5df;
}


.info-list dt {
  font-weight:
    700;

  color:
    var(--color-main-dark);
}


.info-list dd {
  margin:
    0;
}


.map-placeholder {
  display:
    flex;

  align-items:
    center;

  justify-content:
    center;

  min-height:
    420px;

  background:
    #e8ece7;

  border-radius:
    var(--radius-md);

  color:
    var(--color-main);

  font-size:
    1.4rem;

  font-weight:
    700;
}


/* =========================
   Footer
========================= */

.site-footer {
  padding:
    65px
    0
    35px;

  background:
    #455248;

  color:
    rgba(
      255,
      255,
      255,
      0.8
    );
}


.footer-brand {
  color:
    #ffffff;

  font-size:
    1.5rem;
}


.footer-nav {
  display:
    flex;

  justify-content:
    flex-end;

  flex-wrap:
    wrap;

  gap:
    12px
    24px;

  list-style:
    none;

  margin:
    0;

  padding:
    0;
}


.footer-nav a {
  color:
    rgba(
      255,
      255,
      255,
      0.85
    );
}


.site-footer hr {
  margin:
    40px
    0
    25px;

  border-color:
    rgba(
      255,
      255,
      255,
      0.18
    );
}


/* =========================
   Mobile CTA
========================= */

.mobile-fixed-cta {
  position:
    fixed;

  left:
    0;

  right:
    0;

  bottom:
    0;

  z-index:
    1050;

  display:
    grid;

  grid-template-columns:
    repeat(
      3,
      1fr
    );

  background:
    #ffffff;

  box-shadow:
    0
    -5px
    20px
    rgba(
      0,
      0,
      0,
      0.1
    );
}


.mobile-fixed-cta a {
  display:
    flex;

  flex-direction:
    column;

  align-items:
    center;

  justify-content:
    center;

  gap:
    2px;

  min-height:
    64px;

  color:
    var(--color-text);

  font-size:
    0.75rem;

  border-right:
    1px solid
    #eeeeea;
}


.mobile-fixed-cta a:nth-child(2) {
  background:
    var(--color-main);

  color:
    #ffffff;
}


.mobile-fixed-cta i {
  font-size:
    1.2rem;
}


/* =========================
   Responsive
========================= */

@media (
  max-width:
  1199.98px
) {

  .steps-grid {
    grid-template-columns:
      repeat(
        3,
        1fr
      );
  }

}


@media (
  max-width:
  991.98px
) {

  body {
    padding-bottom:
      64px;
  }


  .section-padding {
    padding:
      80px
      0;
  }


  .hero-section,
  .min-vh-75 {
    min-height:
      680px;
  }


  .hero-overlay {
    background:
      rgba(
        38,
        52,
        41,
        0.62
      );
  }


  .gallery-grid {
    grid-template-columns:
      repeat(
        2,
        1fr
      );
  }


  .gallery-main {
    grid-column:
      span 2;

    min-height:
      430px;
  }


  .footer-nav {
    justify-content:
      flex-start;
  }

}


@media (
  max-width:
  767.98px
) {

  .section-padding {
    padding:
      65px
      0;
  }


  .hero-section,
  .min-vh-75 {
    min-height:
      650px;
  }


  .hero-title {
    font-size:
      2.5rem;
  }


  .hero-content {
    padding:
      70px
      0;
  }


  .hero-lead {
    font-size:
      1rem;
  }


  .gallery-grid {
    gap:
      12px;
  }


  .gallery-item {
    min-height:
      190px;
  }


  .gallery-main {
    min-height:
      330px;
  }


  .gallery-item figcaption {
    left:
      10px;

    right:
      10px;

    bottom:
      10px;

    font-size:
      0.7rem;
  }


  .steps-grid {
    grid-template-columns:
      1fr;
  }


  .timeline-item {
    grid-template-columns:
      65px
      28px
      1fr;

    gap:
      10px;
  }


  .timeline-item::after {
    left:
      78px;
  }


  .info-list > div {
    grid-template-columns:
      1fr;

    gap:
      5px;
  }


  .map-placeholder {
    min-height:
      300px;
  }


  .contact-section {
    padding:
      90px
      0;
  }

}


@media (
  max-width:
  575.98px
) {

  .container {
    padding-left:
      20px;

    padding-right:
      20px;
  }


  .hero-section {
    background-position:
      58%
      center;
  }


  .hero-title {
    font-size:
      2.2rem;
  }


  .hero-buttons .btn {
    width:
      100%;
  }


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


  .section-heading h2,
  .section-title {
    font-size:
      1.9rem;
  }


  .gallery-grid {
    grid-template-columns:
      1fr;
  }


  .gallery-main {
    grid-column:
      span 1;

    min-height:
      320px;
  }


  .gallery-item {
    min-height:
      270px;
  }


  .feature-content {
    padding:
      24px
      20px;
  }


  .family-highlight {
    border-radius:
      18px;
  }

}