/* ============================
   トップヘッダーセクション
   ============================ */
.section-forest-top {
  position: relative;
  /* 森の高さ（全体の厚み） */
  padding-top: min(40vh, 320px);
  padding-bottom: 80px; /* アイコンを下にはみ出させる分 */
  overflow: visible;
}

/* 森の絵を背景として敷く */
.section-forest-top::before {
  content: "";
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/bg/BGhead_forest.webp"); /* 上の森 */
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;
  z-index: -2;
}

/* 森の上に光のレイヤーを重ねる */
.section-forest-top::after {
  content: "";
  position: absolute;
  inset: 0;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;

  /* ★ここをすーさんのファイル名に合わせてね */
  background-image: url("../img/bg/BGhead_forest_light.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: cover;

  pointer-events: none;
  z-index: -1;              /* 森より前、テキストより後ろ */

  opacity: 0;               /* 最初は消えてる */
  animation: forest-light-pulse 9s ease-in-out infinite 1.4s;
}

/* 光がふわっと瞬くアニメ */
@keyframes forest-light-pulse {
  0%, 100%   { opacity: 0.05; }
  15%        { opacity: 0.4; }
  30%        { opacity: 0.15; }
  45%        { opacity: 0.5; }
  60%        { opacity: 0.2; }
  80%        { opacity: 0.35; }
}

/* 動きを減らす設定の人向け */
@media (prefers-reduced-motion: reduce) {
  .section-forest-top::after {
    animation: none;
    opacity: 0.25;  /* うっすら常時光ってるだけにする */
  }
}

/* 中身の位置基準 */
.section-forest-top .section_inner {
  position: relative;
}

.hero_inner {
  text-align: center;
}

/* アイコンを森と下の帯の境界に乗せる */
.hero_icon {
  position: absolute;
  left: 50%;
  bottom: -64px;          /* 下のセクションに食い込ませる量 */
  transform: translateX(-50%);
  width: 168px;
  height: 168px;
  border-radius: 50%;
  overflow: hidden;
  /* 影などあればここで */
  z-index: 2;
}

.hero_icon img {
  display: block;
  width: 100%;
  height: auto;
}

.section-head {
  position: relative;
  margin-top: -40px;   /* 森との境目を少し重ねる */
  padding-top: 96px;   /* アイコンの上からテキストまでの余白 */
  z-index: 1;
}

.hero {
  position: relative;
}
.hero_fog-left,
.hero_fog-right {
  position: absolute;
  width: 60vw;
  height: 220px;         /* ★ここを明示的なpxかvhにする！ */
  pointer-events: none;
  z-index: -1;           /* 文字より後ろにしたければ-1とか */
}

/* 左霧 */
.hero_fog-left {
  top: -200px;
  left: -10vw;
  background: url("../img/bg/head_fogL.webp") no-repeat left bottom / contain;
  opacity: 0;
  animation: fog-left-in 1.2s ease-out forwards;
}

@keyframes fog-left-in {
  0% {
    opacity: 0;
    transform: translateX(-40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 右霧 */
.hero_fog-right {
  bottom: -120px;
  right: -10vw;
  background: url("../img/bg/head_fogR.webp") no-repeat right bottom / contain;
  opacity: 0;
  animation: fog-right-in 1.2s ease-out forwards 150ms;
}

@keyframes fog-right-in {
  0% {
    opacity: 0;
    transform: translateX(40px);
  }
  100% {
    opacity: 1;
    transform: translateX(0);
  }
}


/* PC用：セクションの上に横一文字で霧を敷く */
/*.section-head::before {
  content: "";
  position: absolute;
  top: -80px;           /* 森の中から這い上がる感じで位置調整 */
 /* left: 0;
  right: 0;
  height: 400px;
  background-image: url("../img/bg/BGhead_fog.webp");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;  /* もしくは contain 好みで */
 /* z-index: -1;
}*/



/* デフォルトでは hero_fog は非表示にしておく */
/*.hero_fog {
  display: none;
}*/


/* ============================
   プロフィールセクション
   ============================ */

/* プロフィールセクション用レイアウト */
.section-profile .section_body {
  display: flex;
  justify-content: center;
}

/* 紙フレームのパネル本体 */
.profile_panel {
  position: relative;
  max-width: 820px;
  width: 100%;
  margin-inline: auto;

  /* アイコンが上にはみ出すので、上だけちょっと多めに */
  padding: clamp(72px, 9vw, 96px) clamp(24px, 5vw, 56px) clamp(40px, 5vw, 56px);

  /* 和紙フレームの画像 */
  background-image: url("../img/profile/profileBG.webp");
  background-repeat: no-repeat;
  background-position: center top;
  background-size: 100% 100%;
}

/* アイコンの丸をパネルの上端からちょい飛び出させる */
.profile_icon {
  position: absolute;
  top: 0;
  left: 0;
  transform: translate(clamp(32px, 6vw, 80px), -50%);
  width: clamp(112px, 12vw, 144px);
  height: clamp(112px, 12vw, 144px);
  border-radius: 50%;
  overflow: hidden;
}

/* 画像自体の調整 */
.profile_icon img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;

  /* ふんわり浮かせる */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.25);
}

/* タイトル：紙の中央あたりにドンと */
.profile_title {
  margin: 0 0 1.5em;
  text-align: center;
  font-size: clamp(1.6rem, 2.1vw, 2.2rem);
}

/* 本文ブロック */
.profile_note {
  font-size: 0.95rem;
  line-height: 1.9;
}

/* 段落間の余白 */
.profile_note p {
  margin: 0 0 1.2em;
}

/* 右上に足あと */
.profile_tracks {
  position: absolute;
  top: clamp(24px, 5vw, 40px);
  right: clamp(24px, 6vw, 56px);
  width: clamp(96px, 12vw, 148px);
  pointer-events: none; /* クリック邪魔しないように */
}

.profile_tracks img {
  display: block;
  width: 100%;
  height: auto;
}

/* ============================
   フッターセクション
   ============================ */
.section-foot {
  position: relative;
  bottom: 0;
  padding-block: clamp(40px, 6vw, 72px);
  padding-top: clamp(96px, 20vw, 240px); 
  font-size: 0.9rem;
  color: #d3f4f5; /* 水色っぽい文字 */
  overflow: hidden;
}

/* 幾何学パターン（奥） */
.section-foot::before {
  content: "";                  /* まず「いるよ」と宣言する */
  position: absolute;
  inset: 0;                     /* top,right,bottom,left を全部 0 に */
  background-image: url("../img/bg/BG_asanoha.webp");
  background-repeat: repeat;
  background-size: cover;       /* or 260px auto など好みで */
  background-attachment: fixed;  /*← 必要なら残してOK（SPだと効かないこと多い） */
  z-index: 0;    
}

/* 森（手前、下部だけ） */
.section-foot::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 685px; /* 森の高さに合わせて調整 */
  background-image: url("../img/bg/BGfoot_forest.webp");
  background-size: auto 100% ;
  background-position: center bottom;
  background-repeat: no-repeat;
  z-index: 1;
}

/* 中身は前面に */
.section-foot .section_body {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
}

.section-foot .section_inner {
  min-height: 40vh;         /* フッター全体の高さ（ざっくり） */
  display: flex;
  align-items: flex-end;    /* 下寄せ */
  justify-content: center;  /* 水平中央 */
}


/* フッターだけ見出しをKiwiMaruに */
.foot_title {
  font-family: "Kiwi Maru", system-ui, -apple-system, BlinkMacSystemFont,
    "Hiragino Sans", "ヒラギノ角ゴ ProN", "Yu Gothic", "游ゴシック体",
    "Meiryo", "メイリオ", sans-serif;
  font-weight: 400; /* レギュラー */
  font-size: 1rem;
  letter-spacing: 0.12em;
  margin-bottom: 0.5em;
}

/* SNSアイコンの並び */
.foot_icon {
  list-style: none;   /* ・を消す */
  padding: 0;  
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px; /* アイコン同士の間隔 */
  margin-block: 16px 24px; /* 上下余白（お好み） */
}

/* SNSアイコン自体 */
.foot_icon img {
  width: 32px;   /* PCでのアイコンの基本サイズ */
  height: 32px;  /* SVGなので高さ明示してもOK */
  display: block;
}

.section-foot a {
  color: #cdeff1;       /* 文字色とちょい差のある水色とか */
  text-decoration: none;
}

.section-foot a:hover {
  text-decoration: underline;
}

/* ============================
   レスポンシブ調整
   ============================ */

/* PC版：プロフィールをアイコン＋テキストの2カラムにする */
@media (min-width: 960px) {

  /* 紙パネルを2カラムレイアウトに */
  .section-profile .profile_panel {
    display: grid;
    grid-template-columns: minmax(0, 260px) minmax(0, 1fr);
    column-gap: clamp(32px, 4vw, 56px);
    align-items: start;

    /* アイコンをはみ出させないので、上の余白を少し詰める */
    padding: clamp(40px, 5vw, 56px) clamp(40px, 5vw, 64px);
  }

  /* アイコン：紙の上に普通に置く */
  .section-profile .profile_icon {
    position: static;      /* absolute を解除 */
    transform: none;       /* ずらしを解除 */
    width: 200px;
    height: 200px;
    margin: 0 auto;        /* 左カラムの中で中央寄せ */
  }

  .section-profile .profile_main {
    grid-column: 2;
    align-self: start;
  }

  /* タイトル＆本文は右カラムにまとめる */
  .section-profile .profile_title {
    grid-column: 2;
    margin-top: 0;
    margin-bottom: 1.2em;
    text-align: left;      /* PCは左寄せに */
  }

  .section-profile .profile_note {
    font-size: 0.95rem;
    line-height: 1.9;
  }

  /* 足あとは、2カラムにしても位置がいい感じになるよう微調整 */
  .section-profile .profile_tracks {
    top: clamp(24px, 3vw, 32px);
    right: clamp(40px, 5vw, 56px);
  }
}


@media (max-width: 959px) {

  .section-forest-top {
    padding-top: 320px;   /* 森の見せたい量に合わせて微調整 */
    padding-bottom: 48px; /* 下の食い込みをちょっと控えめに */
  }

  .section-head {
    margin-top: -24px;    /* PCよりマイナスを弱める */
    padding-top: 96px;    /* アイコンからタイトルまでの余白を確保 */
  }

  .hero_icon {
    bottom: -56px;        /* PCより少しだけ下げる */
    width: 152px;
    height: 152px;
  }
}

@media (max-width: 589px) {

  /* セクション間の重なりを少し縮める（お好みで） */
  .section-forest-top {
    padding-top: 260px;      /* 縦長画面なので少し高さ増やしてもOK */
    padding-bottom: 72px;
  }

  .section-head {
    margin-top: -54px;
    padding-top: 40px;
  }

  /* PC用の横長霧はSPではオフ */
  .section-head::before {
    display: none;
  }

  /* 代わりに hero-lead と hero-note の間に霧を挟む */
  .hero_fog {
    display: block;
    height: 230px;           /* 霧の見える高さ */
    right: 0;
    margin: 16px 0 0;
    background-image: url("../img/bg/BGhead_fog.webp");
    background-repeat: no-repeat;
    /* 右半分だけ映るように少し拡大＋右寄せ */
    background-size: 200% auto;
    background-position: right center;

    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
    overflow: hidden; 
  }

  .foot_icon img {
    width: 28px;
    height: 28px;
  }

  .section-profile .profile_panel {
    max-width: 540px;

    /* モバイル用フレームに差し替え*/
    background-image: url("/assets/img/profile/profileBG_mobile.webp");

    padding: clamp(80px, 12vw, 96px) 18px 32px;
  }

  .section-profile .profile_icon {
    left: 50%;
    transform: translate(-50%, -50%);
    width: clamp(112px, 22vw, 136px);
    height: clamp(112px, 22vw, 136px);
  }

  .section-profile .profile_main {
   padding-inline: clamp(24px, 6vw, 40px);
  }

  .section-profile .profile_title {
    margin-top: 0.5em;
    margin-bottom: 1.4em;
    text-align: center;
  }

  .section-profile .profile_note {
    font-size: 0.9rem;
  }

  /* 足あとは少し小さめ＆右下寄りに逃がす案 */
  .section-profile .profile_tracks {
    top: auto;
    bottom: 20px;
    right: clamp(12px, 6vw, 24px);
    width: clamp(88px, 20vw, 120px);
    opacity: 0.85;
  }
}