/* style.css */
/* =========================================================
   REC HP Skeleton CSS (Stack-safe / Minimal) - INNER BG MODE
   - Header and Columns share the SAME width feeling
   - Column background moved to .column-inner
   - HTML unchanged
   ========================================================= */

:root{
  --max: 1200px;
  --pad-x: 24px;

  /* header */
  --header-pad-y: 14px;
  --header-pad-x: 0px;
  --logo-h: 56px;
  --logo-h-sp: 56px;
  --nav-gap: 18px;

  /* column bg */
  --col-bg-pos: center;
  --col-bg-size: cover;
  --col-bg-repeat: no-repeat;

  /* box */
  --box-pad: 12px;
  --box-radius: 0px;
  --text-gap: 10px;
}

*{ box-sizing: border-box; }
html, body{ height: 100%; }

body{
  margin: 0;
  line-height: 1.6;
  background: #fff;
  color: #111;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Noto Sans JP", Arial, sans-serif;
}

img{ max-width: 100%; height: auto; display: block; }
a{ color: inherit; text-decoration: none; }

/* shared width container */
.container{
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);
}

/* ---------- Header ---------- */
.site-header{ width: 100%; }

.header-inner{
  max-width: var(--max);
  margin: 0 auto;
  padding: var(--header-pad-y) var(--header-pad-x);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.brand{ display: inline-flex; align-items: center; }
.brand-logo{ height: var(--logo-h); width: auto; }

.site-nav{
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  margin-left: auto;
}

/* hamburger */
.nav-toggle{
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.hamburger{
  display: none;
  width: 44px;
  height: 44px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  flex-direction: column;
}

.hamburger span{
  width: 24px;
  height: 2px;
  background: #111;
  margin: 5px 0;
}

/* ===== Mobile drawer (CSS only) ===== */
.nav-drawer{
  display: none;
  position: fixed;
  inset: 0;
  z-index: 2000;
}

.nav-drawer::before{
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,.35);
}

.nav-drawer-inner{
  position: relative;
  margin-left: auto;
  width: min(320px, 86vw);
  height: 100%;
  background: #fff;
  padding: 18px 18px 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* open */
.header-inner:has(#navToggle:checked) + .nav-drawer{
  display: block;
}

/* hamburger animation */
.hamburger span{
  transition: transform .2s ease, opacity .2s ease;
}
.site-header:has(#navToggle:checked) .hamburger span:nth-child(1){
  transform: translateY(7px) rotate(45deg);
}
.site-header:has(#navToggle:checked) .hamburger span:nth-child(2){
  opacity: 0;
}
.site-header:has(#navToggle:checked) .hamburger span:nth-child(3){
  transform: translateY(-7px) rotate(-45deg);
}


/* ---------- Columns ---------- */
.column{
  width: 100%;
  position: relative;
  height: var(--col-h, 520px);
  background: none; /* ← 背景は持たせない */
}

/* ★ 幅をヘッダーと完全同期 */
.column-inner{
  position: relative;
  height: 100%;
  max-width: var(--max);
  margin: 0 auto;
  padding-left: var(--pad-x);
  padding-right: var(--pad-x);

  background-position: var(--col-bg-pos);
  background-size: var(--col-bg-size);
  background-repeat: var(--col-bg-repeat);
}

/* per-column backgrounds */
#col1 .column-inner{ background-image: url("img/CBK1.png"); }
#col2 .column-inner{ background-image: url("img/CBK2.png"); }
#col3 .column-inner{ background-image: url("img/CBK3.png"); }
#col4 .column-inner{ background-image: url("img/CBK4.png"); }
#col5 .column-inner{ background-image: url("img/CBK5.png"); }
#col6 .column-inner{ background-image: url("img/CBK6.png"); }

/* ---------- title / text boxes ---------- */
.column__title,
.column__text{
  position: absolute;
  left: var(--t-x, 24px);
  top: var(--t-y, 24px);
  width: var(--t-w, min(720px, calc(100% - 48px)));
  padding: var(--box-pad);
}

.column__title{
  font-size: 40px;
  font-weight: 700;
  letter-spacing: .06em;
  line-height: 1.25;
}


.column__text{
  left: var(--p-x, 24px);
  top: var(--p-y, 96px);
  width: var(--p-w, min(760px, calc(100% - 48px)));
  padding-top: calc(var(--box-pad) + var(--text-gap));
}

/* ---------- 5 phases ---------- */
.phases{
  position: absolute;
  left: var(--phase-pad-x, 64px);
  right: var(--phase-pad-x, 64px);
  top: var(--phase-top, 140px);
}

.phase{
  display: grid;
  grid-template-columns: var(--badge-w, 220px) 1fr;
  gap: var(--phase-col-gap, 18px);
}

.phase-desc{
  max-width: 520px;
}

.phase + .phase{ margin-top: var(--phase-gap, 18px); }

.phase-badge{
  width: var(--badge-w, 220px);
  height: var(--badge-h, 60px);
  display: flex;
  align-items: left;
  justify-content: left;
}

/* ---------- Debug ---------- */
.column-inner{ outline: 0px solid #fff; outline-offset: -1px; }
.column__title,
.column__text,
.phase-badge{ outline: 0px solid hotpink; outline-offset: -1px; }

/* ===== カラム別上書き（ここから数字だけ変える） ===== */

/* COLUMN 1 */
#col1 .column__title{
  left: 580px;
  top: 124px;
  width: 420px;
  height: 50px;
 
}

#col1 .column__text{
  left: 600px;
  top: 205px;
  width: 510px;
  height: 240px;
  
}

/* COLUMN 2 */
#col2 .column__title{
  left: 80px;
  top: 0px;
  width: 460px;
  height: 80px;
}
#col2 .column__text{
  left: 80px;
  top: 90px;
  width: 560px;
  height: 260px;
}

/* COLUMN 3 */
#col3 .column__title{
  left: 80px;
  top: 5px;
  width: 800px;
  height: 72px;
}
#col3 .column__text{
  left: 120px;
  top: 380px;
  width: 890px;
  height: 140px;
}

#col5 .column__title{
  left: 700px;
  top: 62px;
  width: 400px;
  height: 72px;
}

#col5 .column__text{
  left: 700px;
  top: 150px;
  width: 400px;
  height: 240px;
}

#col6 .column__title{
  left: 100px;
  top: 62px;
  width: 500px;
  height: 72px;
}


#col6 .column__text{
  left: 100px;
  top: 150px;
  width: 500px;
  height: 340px;
}

/* ---------- Responsive ---------- */
@media (max-width: 768px){
  :root{ --pad-x: 16px; }

  .brand-logo{ height: var(--logo-h-sp); }

  .site-nav{ display: none; }
  .hamburger{ display: inline-flex; }

  /* SPは通常フローに落とす */
  .column__title,
  .column__text{
    position: static;
    width: auto;
    margin-top: 16px;
    transform: none ;
  }


  /* ===== col1: SPでも「テキストをボトム固定」 ===== */
  #col1.column{
    height: var(--col-h, 520px);       /* col1も高さ維持して底に落とす */
  }
  #col1 .column-inner{
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 16px;             /* 最下段の逃げ */
  }
  #col1 .column__title{
    margin-top: 86px;                 /* 通常の上余白 */
  }
  #col1 .column__text{
    height: auto !important;          /* 折り返し可 */
    width: auto !important;           /* 固定幅を潰す（col1はPCで幅固定してるため） */
    max-width: 100%;
    margin-top: auto;                 /* ★これで下へ落ちる */
    margin-bottom: 0;
  }


  /* ===== col3: SPでも「テキストをボトム固定」 ===== */
  #col3.column{
    height: var(--col-h, 520px);       /* col3は高さを維持して底に落とす */
  }
  #col3 .column-inner{
    height: 100%;
    display: flex;
    flex-direction: column;
    padding-bottom: 16px;             /* 最下段の逃げ */
  }
  #col3 .column__title{
    margin-top: 16px;                 /* 通常の上余白 */
  }
  #col3 .column__text{
    height: auto !important;          /* 折り返し可 */
    width: auto !important;
    margin-top: auto;                 /* ★これで下へ落ちる */
    margin-bottom: 0;
  }

  .phases{
    position: static;
    margin-top: 12px;
  }

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

  /* col4 高さ解除（長文でもカラム外に出ない） */
  #col4.column{
    height: auto;
    min-height: var(--col-h, 720px);
  }
  #col4 .column-inner{
    height: auto;
    padding-bottom: 24px;
  }
}

/* ===== PCだけ transform を効かせる ===== */
@media (min-width: 769px){
  #col1 .column__title{ transform: translate(20px, -10px); }
}


/* ===== HEADER FIXED ===== */
.site-header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 999;
  background: #fff;
}
body{ padding-top: 88px; }
.header-inner{ background:#fff; }

/* ===== Mobile Drawer Toggle (FIX) ===== */
.site-header:has(#navToggle:checked) .nav-drawer{ display:block; }
.site-header:has(#navToggle:checked) .hamburger span:nth-child(1){ transform: translateY(7px) rotate(45deg); }
.site-header:has(#navToggle:checked) .hamburger span:nth-child(2){ opacity:0; }
.site-header:has(#navToggle:checked) .hamburger span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); }