/* ============================================================
   原状回復LABO — corporate site styles
   Headings: Zen Maru Gothic / Body: Gothic (sans)
   ============================================================ */

:root {
  /* greens */
  --primary     : #2f7d6b;
  --primary-dark: #246456;
  --primary-deep: #143f37;
  /* footer */
  --green-text  : #2f8270;
  /* eyebrows / accents on light */
  --mint-1      : #eef5f0;
  /* light section bg */
  --mint-2      : #e6f1ea;
  /* darker mint bg */
  --mint-line   : #d8e7df;
  --warm        : #f4f0ea;
  /* warm neutral bg */
  --beige       : #f7f3ec;
  /* light beige section bg */
  /* accent */
  --accent      : #e58e3c;
  /* LINE brand */
  --line-green     : #06c755;
  --line-green-dark: #05a648;
  /* ink / neutrals */
  --ink         : #2b3a37;
  --ink-soft    : #46544f;
  --muted       : #79857f;
  --line        : #e5ebe7;
  --card        : #ffffff;
  --shadow-sm   : 0 2px 10px rgba(20, 63, 55, .06);
  --shadow-md   : 0 14px 40px rgba(20, 63, 55, .10);
  --shadow-lg   : 0 24px 60px rgba(20, 63, 55, .16);
  --radius      : 16px;
  --radius-lg   : 22px;
  --maxw        : 1180px;
  --font-serif  : "Zen Maru Gothic", sans-serif;
  --font-sans   : "Noto Sans JP", sans-serif;
}

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

html {
  scroll-behavior         : smooth;
  -webkit-text-size-adjust: 100%
}

body {
  margin                : 0;
  font-family           : var(--font-sans);
  color                 : var(--ink);
  background            : #fff;
  line-height           : 1.85;
  font-size             : 15px;
  letter-spacing        : .01em;
  -webkit-font-smoothing: antialiased;
  overflow-x            : hidden;
}

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

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

button {
  font-family: inherit;
  cursor     : pointer
}

h1,
h2,
h3,
h4 {
  font-family: var(--font-serif);
  font-weight: 500;
  line-height: 1.4;
  margin     : 0;
  color      : var(--ink)
}

p {
  margin: 0
}

.wrap {
  max-width     : var(--maxw);
  margin-inline : auto;
  padding-inline: 28px
}

.section {
  padding: 96px 0
}

/* eyebrow label with dashes */
.eyebrow {
  display        : flex;
  align-items    : center;
  justify-content: center;
  gap            : 14px;
  font-family    : var(--font-sans);
  font-weight    : 700;
  font-size      : 13px;
  letter-spacing : .22em;
  color          : var(--green-text);
  margin-bottom  : 22px;
}

.eyebrow.en {
  letter-spacing: .28em
}

.eyebrow::before,
.eyebrow::after {
  content   : "";
  width     : 34px;
  height    : 1px;
  background: var(--green-text);
  opacity   : .6
}

.eyebrow.left {
  justify-content: flex-start
}

.eyebrow.left::before {
  display: none
}

.eyebrow.left::after {
  width: 46px
}

.section-head {
  text-align   : center;
  margin-bottom: 54px
}

.section-head h2 {
  font-size     : clamp(26px, 3.4vw, 40px);
  letter-spacing: .04em
}

.section-head .lead {
  margin-top: 20px;
  color     : var(--ink-soft);
  font-size : 15px
}

.section-head .lead span {
  display: block
}

.tx-green {
  color: var(--green-text)
}

/* buttons */
.btn {
  display      : inline-flex;
  align-items  : center;
  gap          : 12px;
  padding      : 16px 26px;
  border-radius: 12px;
  font-weight  : 700;
  font-size    : 15px;
  border       : none;
  transition   : transform .25s ease, box-shadow .25s ease, background .25s ease;
  position     : relative;
}

.btn .ico {
  flex: 0 0 auto
}

.btn-primary {
  background: var(--primary);
  color     : #fff;
  box-shadow: var(--shadow-sm)
}

.btn-primary:hover {
  background: var(--primary-dark);
  transform : translateY(-2px);
  box-shadow: var(--shadow-md)
}

.btn-primary .arrow {
  margin-left: auto
}

.btn-ghost {
  background: #fff;
  color     : var(--primary-dark);
  border    : 1.5px solid var(--mint-line)
}

.btn-ghost:hover {
  transform   : translateY(-2px);
  box-shadow  : var(--shadow-md);
  border-color: var(--primary)
}

.btn-lg {
  padding  : 20px 30px;
  font-size: 16px
}

.arrow-pill {
  width          : 30px;
  height         : 30px;
  border-radius  : 50%;
  background     : var(--primary);
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  color          : #fff;
  flex           : 0 0 auto;
  transition     : transform .25s ease;
}

.card-arrow {
  width          : 28px;
  height         : 28px;
  border-radius  : 50%;
  border         : 1.5px solid var(--accent);
  color          : var(--accent);
  display        : inline-flex;
  align-items    : center;
  justify-content: center;
  transition     : background .25s ease, color .25s ease, transform .25s ease;
}

/* image placeholder */
.ph {
  position  : relative;
  background: linear-gradient(135deg, #e9e3d8, #dcd4c6);
  overflow  : hidden;
  isolation : isolate
}

.ph.cool {
  background: linear-gradient(135deg, #e3ece9, #d3e0db)
}

.ph.warmlight {
  background: linear-gradient(135deg, #f0ebe2, #e4dccd)
}

.ph::before {
  content         : "";
  position        : absolute;
  inset           : 0;
  opacity         : .5;
  background-image: repeating-linear-gradient(135deg, rgba(255, 255, 255, .35) 0 2px, transparent 2px 13px);
}

.ph::after {
  content        : attr(data-label);
  position       : absolute;
  inset          : 0;
  margin         : auto;
  height         : fit-content;
  width          : fit-content;
  font-family    : ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size      : 10.5px;
  letter-spacing : .05em;
  color          : rgba(60, 55, 45, .62);
  background     : rgba(255, 255, 255, .66);
  padding        : 5px 11px;
  border-radius  : 30px;
  white-space    : nowrap;
  backdrop-filter: blur(2px);
}

/* real photo loaded — hide placeholder overlays */
.ph.has-photo {
  background: none
}

.ph.has-photo::before,
.ph.has-photo::after {
  display: none
}

/* reveal animation — gated on .js so content is always visible without JS */
.js .reveal {
  opacity   : 0;
  transform : translateY(26px);
  transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1)
}

.js .reveal.in {
  opacity  : 1;
  transform: none
}

.js .reveal.d1 {
  transition-delay: .08s
}

.js .reveal.d2 {
  transition-delay: .16s
}

.js .reveal.d3 {
  transition-delay: .24s
}

.js .reveal.d4 {
  transition-delay: .32s
}

@media (prefers-reduced-motion:reduce) {
  .js .reveal {
    opacity   : 1;
    transform : none;
    transition: none
  }

  html {
    scroll-behavior: auto
  }
}