@charset "UTF-8";

/* Cascade layers 宣言 */
@layer reset, base, layout, components, project, utility;

/* =========================================================
   Foundation
========================================================= */
:root {
  --color-main: #2e5a3b;
  --color-base: #f5f3ef;
  --color-sub: #c7b19b;
  --color-accent: #e29447;

  --color-text: #1f1d1a;
  --color-text-light: #6b6760;
  --color-line: #e5e0d7;
  --color-white: #ffffff;

  --font-jp: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-sans: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", sans-serif;
  --font-en: "Inter", "Noto Sans JP", sans-serif;

  --container: 1080px;
  --container-md: 960px;
  --header-h: 104px;

  --ease: cubic-bezier(.22,.61,.36,1);
}

*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body.l-body,
body {
  margin: 0;
  font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Yu Gothic", "Meiryo", sans-serif !important;
  font-size: 16px;
  line-height: 1.8;
  color: var(--color-text);
  background: var(--color-base);
  -webkit-font-smoothing: antialiased;
  font-feature-settings: "palt" 1;
}

img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; padding: 0; margin: 0; }
h1, h2, h3, h4, p, dl, dd, dt, figure { margin: 0; padding: 0; }
button { background: none; border: 0; cursor: pointer; font: inherit; color: inherit; }


/* =========================================================
   Components : Button
========================================================= */
.c-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 48px;
  padding: 14px 28px;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .04em;
  border-radius: 999px;
  transition: transform .3s var(--ease), background-color .3s var(--ease), color .3s var(--ease);
}
.c-btn:hover { transform: translateY(-2px); }

.c-btn--accent {
  background: var(--color-accent);
  color: var(--color-white);
}
.c-btn--accent:hover { background: #d58235; }

.c-btn--main {
  background: var(--color-main);
  color: var(--color-white);
}
.c-btn--main:hover { background: #244a30; }

.c-btn--ghost {
  background: transparent;
  color: var(--color-text);
  border: 1px solid var(--color-text);
}
.c-btn--ghost:hover {
  background: var(--color-text);
  color: var(--color-white);
}

.c-btn--lg {
  min-height: 60px;
  padding: 18px 36px;
  font-size: 16px;
}

.c-btn--xl {
  min-height: 45px;
  padding: 8px 22px;
  font-size: 12px;
  border-radius: 999px;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 16px 32px -14px rgba(0,0,0,.4);
}
.c-btn--xl:hover { transform: translateY(-2px); }
.c-btn__main {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .02em;
}
.c-btn__sub {
  font-size: 9px;
  font-weight: 500;
  opacity: .85;
  letter-spacing: .06em;
}
.c-btn__arrow {
  display: inline-block;
  transition: transform .3s var(--ease);
}
.c-btn:hover .c-btn__arrow { transform: translateX(4px); }

.c-btn--outline {
  background: rgba(255,255,255,.08);
  color: var(--color-white);
  border: 1.5px solid rgba(255,255,255,.5);
  backdrop-filter: blur(6px);
}
.c-btn--outline:hover {
  background: var(--color-white);
  color: var(--color-main);
  border-color: var(--color-white);
}

/* =========================================================
   Components : Heading
========================================================= */
.c-heading { margin-bottom: 56px; }
.c-heading__en {
  font-family: var(--font-en);
  font-size: clamp(15px, 3.6vw, 17px);
  letter-spacing: .2em;
  color: var(--color-accent);
  text-transform: uppercase;
  margin-bottom: 12px;
}
.c-heading__title {
  font-family: var(--font-jp);
  font-size: clamp(26px, 5.2vw, 32px);
  font-weight: 700;
  line-height: 1.5;
  color: var(--color-main);
  letter-spacing: .03em;
}
.c-heading--light .c-heading__en { color: var(--color-sub); }
.c-heading--light .c-heading__title { color: var(--color-white); }

/* Jumbo heading variant: big English flush-left, JP title offset right */
.c-heading--jumbo {
  margin-bottom: 64px;
  --jumbo-indent: 22%;
}
.c-heading--jumbo .c-heading__eyebrow {
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .06em;
  color: var(--color-text-light);
  margin-bottom: 16px;
}
.c-heading--jumbo .c-heading__jumbo {
  font-family: var(--font-en);
  font-size: clamp(72px, 10vw, 160px);
  font-weight: 800;
  line-height: .92;
  letter-spacing: -.02em;
  color: var(--color-main);
  margin-bottom: 32px;
}
.c-heading--jumbo .c-heading__title {
  font-family: var(--font-jp);
  font-size: clamp(22px, 2.2vw, 32px);
  font-weight: 700;
  line-height: 1.6;
  color: var(--color-main);
  letter-spacing: .02em;
  margin-left: var(--jumbo-indent);
}
.c-heading--jumbo.c-heading--light .c-heading__eyebrow { color: rgba(255,255,255,.6); }
.c-heading--jumbo.c-heading--light .c-heading__jumbo { color: var(--color-white); }
.c-heading--jumbo.c-heading--light .c-heading__title { color: var(--color-white); }

/* Jumbo-aligned body: matches heading title's left edge */
.c-body-jumbo-aligned { margin-left: 22%; }

@media (max-width: 960px) {
  .c-heading--jumbo { --jumbo-indent: 0; }
  .c-body-jumbo-aligned { margin-left: 0; }
}
@media (max-width: 768px) {
  .c-heading--jumbo .c-heading__jumbo { font-size: clamp(56px, 18vw, 96px); }
}

/* =========================================================
   Components : Link arrow
========================================================= */
.c-link-arrow {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-en);
  font-size: 15px;
  letter-spacing: .08em;
  color: var(--color-main);
  padding-bottom: 6px;
  border-bottom: 1px solid var(--color-main);
  transition: gap .3s var(--ease);
}
.c-link-arrow::after {
  content: "→";
  transition: transform .3s var(--ease);
}
.c-link-arrow:hover { gap: 16px; }
.c-link-arrow:hover::after { transform: translateX(4px); }


/* =========================================================
   State
========================================================= */
.is-hidden { display: none !important; }
.is-fade-in { opacity: 0; transform: translateY(20px); transition: opacity .8s var(--ease), transform .8s var(--ease); }
.is-fade-in.is-active { opacity: 1; transform: none; }
.is-pc-only { display: inline; }
@media (max-width: 960px) {
  .is-pc-only { display: none; }
}


/* =========================================================
   Component : Contact CTA Block
   - TOP（front-page.php）と /service/（page-service.php）で共通利用
   - 命名は p-top-contact のままだが、共通コンポーネントとして base.css に配置
========================================================= */
.p-top-contact {
  padding: 140px 0 40px;
}
.p-top-contact__inner {
  padding: 88px 56px;
  text-align: center;
  background: var(--color-white);
  border: 1px solid var(--color-line);
  border-radius: 6px;
  position: relative;
  overflow: hidden;
}
.p-top-contact__inner::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 120%, rgba(226,148,71,.16), transparent 60%);
  pointer-events: none;
}
.p-top-contact__en {
  font-family: var(--font-en);
  font-size: 15px;
  letter-spacing: .2em;
  color: var(--color-accent);
  margin-bottom: 12px;
  text-transform: uppercase;
  position: relative;
}
.p-top-contact__title {
  font-family: var(--font-jp);
  font-size: clamp(26px, 3.4vw, 38px);
  color: var(--color-main);
  font-weight: 600;
  margin-bottom: 20px;
  position: relative;
}
.p-top-contact__desc {
  font-size: 15px;
  color: var(--color-text-light);
  margin-bottom: 24px;
  line-height: 1.9;
  position: relative;
}
.p-top-contact__tag {
  display: inline-block;
  padding: 8px 20px;
  background: var(--color-main);
  color: var(--color-white) !important;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  margin-bottom: 40px;
  position: relative;
}
.p-top-contact__box {
  text-align: left;
  max-width: 520px;
  margin: 0 auto 40px;
  padding: 28px 32px;
  background: var(--color-base);
  border-radius: 4px;
  position: relative;
}
.p-top-contact__box-label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--color-main);
  margin-bottom: 14px;
}
.p-top-contact__box-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text);
  line-height: 1.7;
}
.p-top-contact__box-list li {
  position: relative;
  padding-left: 20px;
}
.p-top-contact__box-list li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--color-accent);
  font-weight: 700;
}
.p-top-contact__note {
  margin-top: 18px;
  font-size: 12px;
  color: var(--color-text-light);
  position: relative;
}
.p-top-contact__inner .c-btn { position: relative; }
@media (max-width: 768px) {
  .p-top-contact { padding: 80px 0 20px; }
  .p-top-contact__inner { padding: 56px 24px; }
}