@charset "UTF-8";

/* ===============================
   0) Reset / Base / Helpers
   =============================== */

/* ===============================
   1) PC（デフォルト）
   =============================== */


/* ===== simple header ===== */

.header{
  position: fixed; 
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 90px;
  background-color:#dd6f5e !important; 
  display:flex; 
  flex-direction:column; 
  align-items:center;
  z-index:10000;
}
.header_inner{
  width: 90%; 
  height: 100%;
  display: flex; 
  justify-content: flex-start; 
  align-items: center;
}
.header_logo{ 
  display:inline-flex; 
  align-items:center; 
}
.header_logo img{ 
  height:55px; 
  width:auto; 
  display:block; 
}
.header_navgroup{
  margin-left:auto; 
  display:flex; 
  gap:60px;
}


/* Nav: hover色 & active下線（最小改変） */
.header__navitem{
    font-size: 16px;
  color: #fff;
  cursor: pointer;
  border-bottom: 2px solid transparent;  
  transition: color .2s ease, border-color .2s ease;
}
.header_navitem{
  display:inline-block; 
  padding-bottom:2px;
  font-size:16px; 
  color:#fff; 
  text-decoration:none; 
  cursor:pointer;
  border-bottom:2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}

.header_navitem:hover{ color:#A8BF89; }
.header_navitem.is-active{
  color:#A8BF89; 
  border-bottom-color: currentColor;
}

/* ーーーーーーーーーなみなみーーーーーーーーー */

/* 変数（必要なら調整） */
:root{
  --header-h: 90px;   /* 実際のheader高さに揃える */
  --wave-overlap: 20px;    /* ここを好みで 16〜40px くらい */
  --wave-h:   80px;   /* 波の高さ */
  --wave-w:  240px;   /* 1山の横幅（数を増やす→小さく） */
}

/* 既存の header はそのまま（position:fixed） */
.header{ position: fixed; top:0; left:0; width:100%; height: var(--header-h); background:#fff; z-index:10000; }

/* ここが新しい“波”本体 */
.header::after{
  content:"";
  position: absolute;
  left:0; right:0; 
  bottom: calc(-0.6 * var(--wave-h)); 
  height: var(--wave-h);
  /* 波の色は“ヘッダーの色”を見せる。= 白でOK */
  background-color:#dd6f5e;

  /* SVGを横方向に繰り返すマスク（WebKit併記） */
  -webkit-mask: url("../img/wave.svg") center bottom / var(--wave-w) 100% repeat-x;
          mask: url("../img/wave.svg") center bottom / var(--wave-w) 100% repeat-x;

  transform: scaleY(-1);
  transform-origin: center;
    pointer-events: none;
  z-index: 10001;               /* ヘッダーより前面（必要なら） */
}

/* ーーーーーーーーーなみなみーーーーーーーーー */
















/* ===============================
   About セクション
   =============================== */

.about{
  width: 100%;
  background-color: #fff;
}
.about-head{
  width: 100%;
  padding-top: 170px;
  text-align: center;
}
.about-eyebrow{
font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 18px;
letter-spacing: 2px;
text-align:center; 
color: #dd6f5e;
}
.about-title{
  font-family: gelica, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 30px;
  letter-spacing:.3em; 
    text-align:center; 
  color:#dd6f5e ;
  margin-bottom: 50px;
}


.about-grid{
  width: 80%;
  display: flex;
  margin: 0 auto;
}
.about-left{
  width: 60%;
}
.nameplate{
  background-color: #dd6f5e;
  width: 60%;
  border-radius: 30px;
  text-align: center;
  margin-top: 30px;
  margin-left: 5%;
}
.chip-ja{
  font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 24px;
  letter-spacing: 5px;
  color: #fff;
}
.chip-en{
  font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
  letter-spacing: 1px;
  color: #fff;

}
.about-body{
font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 16px;
letter-spacing: 0px;
line-height:1.7; 
color: #dd6f5e;
padding-top: 50px;
  padding-right: 10%;
  padding-left: 7%;


}
.about-photo{
  width: 40%;
  text-align: center;
  margin-bottom: 100px;
}
.aboutme{
  width: 65%;
}




/* why-wattaiセクション */



.hero-card.is-bg {
  position: relative;
  width: 75%;                          /* 横幅80% */
  height: 750px;                       /* 高さは好きに調整 */
  margin: 75px auto;                   /* 中央寄せ */
  border-radius: 30px;                 /* 角丸 */
  background: url("../img/why-wattai.png") top center/cover no-repeat;
  border: 0.5px solid #dd6f5e;

    /* 好みで濃さを変えられる変数（下で使う） */
  --ov-top: .96;   /* 上の白さ  */
  --ov-mid: .84;   /* 中央の白さ*/
  --ov-btm: .92;   /* 下の白さ  */

  background-image:
    linear-gradient(to bottom,
      rgba(255,255,255,var(--ov-top)) 0%,
      rgba(255,255,255,var(--ov-top)) 16%,
      rgba(255,255,255,var(--ov-mid)) 16%,
      rgba(255,255,255,var(--ov-mid)) 74%,
      rgba(255,255,255,var(--ov-btm)) 74%,
      rgba(255,255,255,var(--ov-btm)) 100%),
    url(../img/why-wattai.png);  /* ← 既存のURLをそのまま置く */
  background-size: cover;
  background-position: center;
}



/* 文字を中央に重ねる */
.hero-content {
  position: absolute;
  inset: 0;                           /* 上下左右いっぱいに広げる */


}

/* 見出し */
.hero-eyebrow {
margin-top: 100px;
font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;
font-size: 25px;
letter-spacing: 2px;
text-align:center; 
  color: #0E285E;
}
.hero-highlight{
  font-family: gelica, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 30px;
  letter-spacing:.3em; 
    text-align:center; 
  color: #0E285E;
}

.hero-article h4{
  padding-top: 120px;
  padding-left: 11%;
  font-family: gelica, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 20px;
  letter-spacing:.3em; 
  color: #0E285E;

}


.hero-article p {
  margin: 40px auto;   /* 上下に余白 */
  width: 80%;
  font-family: fot-tsukuardgothic-std, sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 16px;
  letter-spacing: 1px;
  color: #0E285E;
}

/* 各段落ごとに配置を切り替え */
.hero-article p.align-left   { text-align: left; }
.hero-article p.align-center { text-align: center; }
.hero-article p.align-right  { text-align: right; }

.highlight{
  color: #dd6f5e;
}



















/* ===== Contact CTA（配置用）===== */
.contact-cta{
  width: 100%;
  text-align: center;
  margin-top: 100px;
  margin-bottom: 150px;
  z-index: 5;          /* 背景より前 */
}
.cwin-open{
  background: transparent;
  color: #dd6f5e;
  border: 1.5px solid #dd6f5e;
  padding: 12px 22px;
  border-radius: 999px;

    font-family: fot-tsukuardgothic-std, sans-serif;
font-weight: 400;
font-style: normal;


  letter-spacing: .05em;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, transform .08s ease;
  backdrop-filter: blur(2px);
}
.cwin-open:hover{ 
  background: rgba(221, 111, 94, 0.7);
  color: #fff;
}
.cwin-open:active{ transform: scale(.98); }

/* ===== Contact Window（モーダル。名前空間 cwin-）===== */
/* オーバーレイ */
.cwin{
  display: none;
  position: fixed;
  inset: 0;
  padding: 16px;                 /* 余白はお好みで */
  background: rgba(0,0,0,.35);
  z-index: 20000;
}

/* 中央に固定配置するフォーム本体 */
.cwin-form{
  width: min(560px, 92vw);
  background: #fff;
  color: #333;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,.25);
  padding: 28px 24px 24px;

  /* ここがポイント（positionは absolute だけにする） */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);

  margin: 0;                          /* 中央配置に合わせてリセット */
  max-height: calc(100dvh - 64px);    /* 画面より大きい時に備える */
  overflow: auto;                     /* 中でスクロール */
}
.cwin-title{
  margin: 0 0 12px;
  text-align: center;
  letter-spacing: .2em;
  font-weight: 800;
}
.cwin-row{ display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.cwin-input{
  flex: 1 1 240px;
  min-width: 0;
  border: 0;
  border-bottom: 2px solid #F26B4B;
  padding: 10px;
}
.cwin-textarea{
  width: 100%;
  min-height: 120px;
  border: 0;
  border-bottom: 2px solid #F26B4B;
  padding: 10px;
}
.cwin-submit{
  display: inline-block;
  margin: 16px auto 4px;
  padding: 12px 24px;
  border: 2px solid #F26B4B;
  background: none;
  color: #F26B4B;
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, color .2s ease;
}
.cwin-submit:hover{ background:#F26B4B; color:#fff; }

.cwin-close{
  position:absolute;
  top: 6px; right: 10px;
  font-size: 28px;
  line-height: 1;
  background: none; border: 0;
  color: #F26B4B;
  cursor: pointer;
}






/* ===== Footer ===== */
:root{
  --footer-h: 90px;   /* フッター高さ */
  --wave-h:   80px;   /* 波の高さ */
  --wave-w:  240px;   /* 1山の横幅 */
}

/* 本体 */
.site-footer{
  position: relative;
  height: var(--footer-h);
  background-color:#dd6f5e !important; 
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 0;               /* 基準の層 */
}

/* 波（上向き） */
.site-footer::before{
  content: "";
  position: absolute;
  top: calc(-0.6 * var(--wave-h));   /* ← かぶせ量。pxでもOK */
  left: 0;
  right: 0;
  height: var(--wave-h);
  background: #dd6f5e;                  /* 波の色 = フッター地色 */

  /* 横にリピートするマスク（WebKit併記） */
  -webkit-mask: url("../img/wave.svg") center top / var(--wave-w) 100% repeat-x;
          mask: url("../img/wave.svg") center top / var(--wave-w) 100% repeat-x;

  pointer-events: none;
  z-index: 0;                         /* テキストより背面 */
}

/* 表示テキスト */
.copyright{
  margin: 0;
  position: relative;
  z-index: 1;                         /* 波より前面に */
  font-family: fot-tsukuardgothic-std, sans-serif;
  color: #fff;
}







































/* === Mobile: header wave seam killer === */
@media (max-width: 768px){
  .header{ background:#fff; transform: translateZ(0); } /* 描画にじみ抑制 */
  .header::after{
    bottom: calc(-5px - 0.6 * var(--wave-h)) !important;
    height: calc(var(--wave-h) + 6px) !important;
    backface-visibility: hidden; will-change: transform;
  }
  .header::before{
    content:""; position:absolute; left:0; right:0; bottom:-1px;
    height:1px; background:#fff; z-index:10002;
  }
}

/* === Hamburger（共通） === */
.nav_toggle{
  margin-left:auto; display:none; position:relative;
  width:42px; height:42px; border:0; background:transparent; cursor:pointer;
  -webkit-tap-highlight-color: transparent;
}
.nav_toggle span,
.nav_toggle::before,
.nav_toggle::after{
  content:""; position:absolute; left:9px; right:9px; height:2px;
  background:#fff; transition:transform .25s ease, opacity .25s ease, top .25s ease;
}
.nav_toggle span{ top:20px; }
.nav_toggle::before{ top:12px; }
.nav_toggle::after{ top:28px; }

@media (max-width:768px){
  .nav_toggle{ display:block; z-index:10003; }
  .header_navgroup{
    position: fixed; top: var(--header-h, 90px); left:12px; right:12px;
    display:flex; flex-direction:column; gap:14px;
    padding:16px 16px 18px; background:#dd6f5e; border-radius:16px;
    box-shadow: 0 10px 30px rgba(0,0,0,.12);
    transform-origin: top center; transform: translateY(-8px) scaleY(.96);
    opacity:0; visibility:hidden; pointer-events:none;
    transition: transform .36s cubic-bezier(.22,1,.36,1), opacity .24s ease, visibility 0s linear .36s;
    z-index:10002;
  }
  .header.is-open .header_navgroup{
    transform:none; opacity:1; visibility:visible; pointer-events:auto;
    transition: transform .44s cubic-bezier(.22,1,.36,1), opacity .28s ease, visibility 0s;
  }
  .header.is-open .nav_toggle::before{ top:20px; transform: rotate(45deg); }
  .header.is-open .nav_toggle span{ opacity:0; }
  .header.is-open .nav_toggle::after{ top:20px; transform: rotate(-45deg); }

  /* 背景の半透明オーバーレイ（見た目だけ） */
  .header::before{
    content:""; position:fixed; left:0; right:0; top: var(--header-h, 90px); bottom:0;
    background: rgba(0,0,0,.18); backdrop-filter: blur(2px);
    opacity:0; pointer-events:none; transition: opacity .24s ease; z-index:10001;
  }
  .header.is-open::before{ opacity:1; pointer-events:auto; }
}











/* ===== Tablet ≤960px ===== */
@media (max-width: 960px){
  .about-head{ padding-top: 140px; }
  .about-grid{ width:86%; display:grid; grid-template-columns:1fr; gap:28px; }
  .about-left{ width:auto; order:2; text-align:center; }
  .about-photo{ width:auto; order:1; margin-bottom:20px; }
  .aboutme{ width:min(420px,70%); height:auto; }
  .nameplate{ width: min(520px, 80%); margin: 20px auto 0; }

  .hero-card.is-bg{ width:86%; height: 580px; margin: 60px auto; }
  .hero-article h4{ padding-top: 70px; padding-left: 0; text-align:center; }
  .hero-article p{ width: 86%; }
}

/* ===== Phone ≤768px ===== */
@media (max-width: 768px){
  .about-head{ padding-top: 120px; }
  .about-title{ font-size:26px; letter-spacing:.25em; margin-bottom:28px; }
  .about-grid{ gap:22px; }
  .aboutme{ width:min(360px,78%); }
  .about-body{ padding: 26px 6% 0; text-align:left; }
  .hero-card.is-bg{ width:92%; height: 480px; }
  .hero-eyebrow{ margin-top: 60px; font-size: 18px; }
  .hero-article h4{ padding-top: 36px; font-size:18px; }
  .hero-article p{ width: 90%; font-size: 14px; letter-spacing: .2px; }
  .contact-cta{ margin-top: 60px; margin-bottom: 100px; }
}


/* ===== why wattai リセット＋再レイアウト（つぶれ防止） ===== */
/* 親は内容の高さで伸びるように。重なり回避に z-index も付与 */
.hero-card.is-bg{
  width: min(92%, 940px);
  margin: clamp(36px, 7vh, 80px) auto;
  height: auto;               /* ← 固定高さをやめる */
  min-height: 420px;          /* 低すぎ防止の下限だけ置く */
  position: relative;
  z-index: 1;
  background-position: center top;
  background-size: cover;
  overflow: hidden;
}

/* 中身は absolute をやめて通常フローに戻す＋中でパディング管理 */
.hero-content{
  position: relative;         /* ← ここが肝！absolute を解除 */
  inset: auto;                /* 念のためリセット */
  padding: clamp(18px, 4.5vw, 40px) clamp(16px, 4vw, 32px) clamp(24px, 5vw, 48px);
  box-sizing: border-box;
}

/* 見出しの過剰な上余白＆左パディングを整理 */
.hero-eyebrow{ margin-top: 8px; text-align:center; }
.hero-article h4{
  padding-top: 10px;
  padding-left: 0;            /* ← 左に寄せてた余白を解除 */
  text-align: center;
}

/* テキストは枠内100%で折り返し強化（英数/URL対策） */
.hero-article p{
  width: 100%;
  margin: clamp(14px, 2.6vh, 22px) auto;
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* CTAが重ならないように少しだけ間を空ける */
.contact-cta{ margin-top: clamp(24px, 4vh, 36px); }

/* スマホ最適化 */
@media (max-width: 768px){
  .hero-card.is-bg{
    width: 92%;
    min-height: 380px;
    margin: 28px auto;
  }
  .hero-article p{ font-size: 15px; line-height: 1.9; }
}
/* === About：ポートレート（藤原 江梨花）のスマホサイズを少し小さく === */
@media (max-width: 768px){


  /* aboutページのポートレート（.aboutme を使っている場合） */
  .aboutme{
    width: clamp(180px, 46vw, 300px);   /* 以前の min(360px,78%) を上書き */
  }
}


/* === About：スマホだけ文字サイズを一括で微縮小（比率維持） === */
@media (max-width: 768px){
  /* ここを変えるだけで全体の縮小率を調整（0.90〜0.95あたりが目安） */
  .about{ --about-scale: .92; }

  /* タイトル/見出し/リード/本文などを比率のまま縮小 */
  .about-title{        font-size: calc(26px * var(--about-scale)); }
  .hero-eyebrow{       font-size: calc(20px * var(--about-scale)); } /* 「— について —」系 */
  .hero-article h4{    font-size: calc(18px * var(--about-scale)); }
  .hero-highlight{     font-size: calc(24px * var(--about-scale)); } /* 強調見出し */
  .hero-article p{     font-size: calc(15px * var(--about-scale)); line-height: 1.9; }

  /* 「藤原 江梨花 〜 ここから育てていきます」の本文ブロック */
  .about-body{         font-size: calc(16px * var(--about-scale)); }
  .about-body p,
  .about-body li{      font-size: calc(16px * var(--about-scale)); line-height: 1.9; }

  /* もし他に本文サイズを直指定している要素があれば同様に追加でOK */
}


/* === why wattai! カード：内側にゆとり＋本文幅の上限を設定 === */

/* スマホはさらに“読みやすい幅”に絞る＆余白をキープ */
@media (max-width: 768px){
  .hero-content{
    padding: clamp(22px, 7vw, 40px) clamp(20px, 7vw, 36px)
             clamp(28px, 8vw, 48px);
  }
  .hero-article{
    width: min(92%, 60ch); /* ちょい細めにして視線の往復を減らす */
  }
}
/* === SP: ハンバーガーのパネルを半分くらい・右端寄せに === */
@media (max-width: 768px){
  .header_navgroup{
    /* フル幅→右端に寄せた半分幅へ */
    left: auto;
    right: max(12px, env(safe-area-inset-right)); /* iPhoneのノッチも考慮 */
    width: clamp(240px, 50vw, 360px);             /* 最小240px〜最大360pxで“だいたい半分” */
    margin-left: auto;
    border-radius: 16px;
    transform-origin: top right;                  /* 開閉の基点を右上に */
    padding: 14px 16px;
  }

  /* リンクの見た目をコンパクトに（長い文でも折りやすく） */
  .header_navgroup a{
    display:block;
    padding: 10px 6px;
    text-align: left;
    white-space: normal;
    word-break: break-word;
  }
}

/* ===== SP: 名前を必ず「漢字の下に英字」で縦積み ===== */
@media (max-width: 768px){
  .nameplate{
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;     /* 念のため中央寄せ */
    width: min(520px, 86%); /* 既存レイアウトに近い幅感を維持 */
    margin-inline: auto;
  }
  .nameplate .chip-ja,
  .nameplate .chip-en{
    display: block;         /* 横並びを強制解除して縦積みに */
    white-space: nowrap;    /* 途中改行の禁止（漢字も英字も崩れない） */
    line-height: 1.2;
  }
  .nameplate .chip-ja{ margin-bottom: 4px; } /* “下に英字”の間を少しだけ */
}






/* ===== SP: 名前枠の余白を増やして圧迫感を解消 ===== */
@media (max-width: 768px){
  .nameplate{
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;                 /* 行間 */
    padding: 14px 18px;       /* ← 枠内の余白アップ（好みで 16px/20px へ） */
    margin: 14px auto 22px;   /* 枠の外側の余白も少し追加 */
    width: min(520px, 86%);
    text-align: center;
    box-sizing: border-box;
    border-radius: 999px;      /* 角丸を少し大きめに */
  }
  .nameplate .chip-ja,
  .nameplate .chip-en{
    display: block;           /* 縦積み維持 */
    white-space: nowrap;      /* 途中改行を禁止（意図通り1行ずつ） */
    line-height: 1.25;
  }
  .nameplate .chip-ja{ margin-bottom: 4px; }
}