@charset "UTF-8";

/* =========================================================================
   Variables
   ========================================================================= */
:root {
  --text-color: #333333;
  --bg-color: #ACE0F0;
  --accent-pink: #DC1A75;
  --accent-black: #000000;
  --accent-white: #ffffff;
  --font-main: 'Shippori Mincho', serif;
  --font-sub: 'Noto Sans JP', sans-serif;
}

/* =========================================================================
   Reset & Base Settings
   ========================================================================= */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  /* 日本語がきれいに表示される標準的なゴシック体 */
  font-family: var(--font-sub);
  color: var(--text-color);
  background-color: var(--bg-color);
  margin: 0;
  /* ★重要：親要素の余白を消して、画面端に密着させる */
  background-image:
    url('../images/kv/kv_BG.png'),
    url('../images/kv/kv_BG02.png'),
    url('../images/kv/kv_BG.png'),
    url('../images/kv/kv_BG02.png'),
    url('../images/kv/kv_BG.png'),
    url('../images/kv/kv_BG02.png'),
    url('../images/kv/kv_BG.png'),
    url('../images/kv/kv_BG02.png');
  background-position:
    right -0% top 0%,
    left -10% top 6%,
    right -2% top 18%,
    left 0% top 30%,
    right -0% top 45%,
    left -2% top 55%,
    right -0% top 70%,
    left 0% top 80%;
  background-repeat: no-repeat;
  background-size:
    clamp(300px, 20vw, 500px),
    clamp(300px, 25vw, 550px),
    clamp(300px, 15vw, 550px),
    clamp(350px, 22vw, 500px),
    clamp(400px, 18vw, 550px),
    clamp(350px, 25vw, 550px),
    clamp(400px, 18vw, 550px),
    clamp(350px, 25vw, 550px);
  line-height: 1.6;
  /* モバイルファーストに基づく基本設定 */
  -webkit-text-size-adjust: 100%;
}

img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}

/* =========================================================================
   Layout Settings
   ========================================================================= */
header, main, footer {
  width: 100%;
}

p {
  /* clamp(最小値, 推奨値, 最大値) */
  font-size: clamp(14px, 3.5vw, 16px);
}

a {
  border-bottom: none;
  text-decoration: none;
  color: var(--text-color);
  display: inline-block;
}

/* =========================================================================
   Components (Mobile First)
   ========================================================================= */

/* fv */
.fv {
  width: 95%;
  max-width: 1000px;
  height: auto;
  margin: 0 auto;
}

.fv-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 10%;
  position: relative;
}

.fv-flex .fv-text02 {
  width: 27%;
  margin-left: 10px;
}

.fv-flex .fv-main-visual {
  margin-top: -20px;
  width: 100%;
}

/* 親要素：ここを基準（relative）にします */
.fv-main-visual {
  position: relative;
  width: 100%;
  max-width: 650px;
  /* デザインに合わせて調整 */
  margin: 0 auto;
}

/* 人物画像：下のラインに合わせる設定 */
.fv-person-img {
  width: 100%;
  height: auto;
  display: block;
  margin-left: 10px;
}

/* 参加メリットはこれだ！：人物を基準に絶対配置 */
.fv-catch-text {
  position: absolute;
  /* 位置調整：人物の左肩あたりに配置 */
  bottom: -15%;
  left: 2%;
  /* ％指定にすることで、画面幅に合わせてある程度動くようにします */
  width: 100%;
  /* 画面幅に合わせてサイズも可変にします */
  height: auto;
  z-index: 10;
}

.fv-merits {
  display: grid;
  grid-template-columns: 1fr 1fr;
  /* 2列 */
  width: 95%;
  /* 画面幅の95%まで広げる */
  margin: -1px auto 30px auto;
  position: relative;
  z-index: 5;
}

.fv-merits img {
  width: 100%;
  /* 親要素の半分（1fr）いっぱいに広がる */
  height: auto;
  display: block;
}

.fv-merits .m1 {
  transform: rotate(-3deg);
}

.fv-merits .m2 {
  transform: rotate(2deg) translateY(20px);
  /* 少し下げて動きを出す */
  margin-left: -15px;
  /* 少し重ねる */
}

.fv-merits .m3 {
  transform: rotate(-2deg) translateY(-10px);
  margin-top: -20px;
}

.fv-merits .m4 {
  transform: rotate(3deg);
  margin-left: -15px;
  /* 少し重ねる */
  margin-top: -2%;
}

.fv-border {
  border-bottom: 1px solid var(--accent-black);
  margin: 35px auto;
  width: 95%;
}

/* 固定ボタン */
.fixed-button {
  position: fixed;
  bottom: 30px;
  /* 画面下からの距離 */
  right: 30px;
  /* 画面右からの距離 */
  width: 200px;
  /* ボタンのサイズ */
  z-index: 100;
  /* 初期状態：非表示（下に隠しておく） */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.4s ease;
  /* ふわっと出すためのアニメーション */
}

/* JSでこのクラスがついたら表示される */
.fixed-button {
  position: fixed;
  bottom: 10px;
  /* 画面下からの距離 */
  right: 10px;
  /* 画面右からの距離 */
  width: 200px;
  /* ボタンのサイズ */
  z-index: 100;
  /* 初期状態：非表示（下に隠しておく） */
  opacity: 0;
  visibility: hidden;
  transform: translateY(20px);
  transition: all 0.4s ease;
  /* ふわっと出すためのアニメーション */
}

/* JSでこのクラスがついたら表示される */
.fixed-button.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* --- About Section --- */
#about {
  width: 90%;
  margin: 80px auto;
  max-width: 1000px;
}

.about-container {
  background-color: var(--accent-white);
  padding: 60px 20px 40px;
  position: relative;
}

.about-title {
  position: absolute;
  top: -20px;
  left: 0px;
  background-color: var(--accent-black);
  color: var(--accent-white);
  padding: 10px 18px;
  letter-spacing: 0.03em;
  z-index: 10;
  line-height: 1;
  font-family: var(--font-main);
}

/* 「TURN」の部分：大きい方 */
.about-title-main {
  font-size: clamp(24px, 6.96vw, 36px);
  font-weight: bold;
}

/* 「とは？」の部分：小さい方 */
.about-title-small {
  font-size: clamp(18px, 5.22vw, 24px);
  font-weight: bold;
}

.about-images {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 30px;
}

.col-usa {
  width: 40%;
  margin-right: -15%;
  position: relative;
  top: 20px;
  /* 冊子の重なりと位置調整 */
  z-index: 2;
}

.col-usa .img-usa {
  width: 100%;
}

.col-turn {
  width: 65%;
  z-index: 1;
}

.col-turn .img-turn {
  width: 100%;
}

.about-description {
  font-size: 14px;
  line-height: 1.8;
  color: #333;
  width: 95%;
  max-width: 500px;
  margin: 0 auto 30px;
}

.about-action {
  text-align: center;
}

.btn-primary {
  display: inline-block;
  background-color: var(--accent-pink);
  /* 濃いピンク */
  color: var(--accent-white);
  text-decoration: none;
  font-weight: bold;
  font-size: 15px;
  padding: 14px 40px;
  border-radius: 40px;
  box-shadow: 2px 3px 0 var(--accent-black);
  /* 右下の黒い影 */
  transition: transform 0.2s, box-shadow 0.2s;
}

.btn-primary:hover {
  opacity: 0.9;
}

.btn-primary:active {
  transform: translate(2px, 3px);
  box-shadow: 0 0 0 var(--accent-black);
}

/* --- 昨年度の様子 --- */
#picture {
  width: 90%;
  margin: 100px auto;
  max-width: 1000px;
}

.picture-inner {
  margin: 0 auto;
  position: relative;
  padding-bottom: 50px;
}

.picture-title {
  position: absolute;
  top: 0;
  left: 0;
  background-color: var(--accent-black);
  color: var(--accent-white);
  font-family: var(--font-main);
  padding: 15px 20px;
  line-height: 1.2;
  font-size: clamp(24px, 6.96vw, 36px);
  text-align: center;
  z-index: 10;
}

.picture-smp {
  margin-left: 5%;
}

.picture-list {
  display: flex;
  flex-direction: column;
  gap: -20px;
  padding-left: 15px;
}

.picture-item {
  width: 90%;
  position: relative;
  z-index: 1;
}

.item-right {
  align-self: flex-end;
}

.item-center {
  align-self: center;
}

.item-left {
  align-self: flex-start;
}

.pic-img {
  width: 100%;
  height: auto;
  display: block;
  margin-top: -20px;
}

/* --- ボランティア詳細セクション --- */
#detail {
  width: 90%;
  margin: 100px auto;
  max-width: 1000px;
}

.detail-wrapper {
  position: relative;
  max-width: 650px;
  margin: 0 auto;
  padding-top: 110px;
  /* 装飾画像のスペース */
}

.detail-decorations {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 120px;
  /* z-index指定を外し、子要素で個別にコントロールできるようにします */
  pointer-events: none;
}

.decor-clip {
  position: absolute;
  bottom: -15px;
  left: 50%;
  transform: translateX(-50%);
  width: 45%;
  max-width: 300px;
  z-index: 10;
  /* クリップは紙の上に */
}

.decor-usa {
  position: absolute;
  bottom: -55px;
  /* 下に下げて紙に隠れる部分を増やす */
  right: 3%;
  width: 40%;
  max-width: 300px;
  z-index: 0;
  /* 紙(z-index:2)の後ろに配置 */
}

.detail-paper {
  background-color: var(--accent-white);
  padding: 50px 20px 10px;
  position: relative;
  border: 1px solid var(--accent-black);
  z-index: 2;
  /* うさぎより手前、クリップより奥に */
}

.detail-title-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.detail-title {
  background-color: var(--accent-black);
  color: var(--accent-white);
  font-family: var(--font-main);
  padding: 10px 20px;
  font-size: clamp(20px, 6vw, 26px);
  letter-spacing: 0.03em;
}

.detail-content {
  padding: 0 20px;
}

.detail-section {
  margin-bottom: 35px;
}

.detail-heading {
  font-family: var(--font-main);
  font-size: clamp(18px, 5vw, 20px);
  font-weight: 800;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}

/* うすいピンク系の区切り線 */
.detail-divider {
  border-bottom: 1px solid var(--accent-pink);
  opacity: 0.3;
  margin: 35px 0;
}

/* 特徴リスト（ピンクドット） */
.detail-list-pink {
  list-style: none;
  padding-left: 0;
}

.detail-list-pink li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 10px;
  line-height: 1.8;
}

.detail-list-pink li::before {
  content: "●";
  position: absolute;
  left: 0;
  color: var(--accent-pink);
  font-size: 0.8em;
  top: 0.2em;
}

/* 注意事項リスト（黒ひし形） */
.detail-list-diamond {
  list-style: none;
  padding-left: 0;
}

.detail-list-diamond li {
  position: relative;
  padding-left: 1.4em;
  margin-bottom: 12px;
  line-height: 1.8;
}

.detail-list-diamond li::before {
  content: "◆";
  position: absolute;
  left: 0;
  color: var(--accent-black);
  font-size: 0.9em;
  top: 0.1em;
}

.detail-list-diamond li small {
  display: block;
  /* ★重要：blockにすることで行間の制御を確実にする */
  line-height: 1.5;
  /* 0.01を消して、1.5くらいに設定 */
  margin-top: 5px;
  /* 上の文との隙間を少し開ける */
  font-size: 0.85em;
  /* 親の文字サイズに対する比率 */
}

.detail-section p {
  line-height: 1.8;
  margin: 0;
}

.bold-text {
  font-weight: bold;
  padding: 15px 0;
}

.merit-images {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
}

.merit-images img {
  max-width: 100%;
  width: 100%;
  height: auto;
}

/* --- ボランティアの流れセクション --- */
#flow {
  width: 90%;
  margin: 100px auto;
  max-width: 1200px;
}

.flow-container {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

.flow-header {
  position: relative;
  padding-top: 130px;
  /* グループが収まる高さを確保 */
  margin-bottom: 20px;
  /* 次のstep枠との間隔 */
}

/* 画像2つをまとめる固定比率のグループ */
.flow-decor-group {
  position: absolute;
  bottom: -60px;
  /* step枠の下に潜り込む深さ */
  right: -2%;
  width: 85%;
  max-width: 400px;
  aspect-ratio: 400 / 250;
  /* 常に同じ縦横比を維持 */
  z-index: 1;
  /* step枠より背面に */
  pointer-events: none;
}

.flow-text-img {
  position: absolute;
  top: -70px;
  left: -20px;
  width: 65%;
  /* グループに対する割合 */
  max-width: none;
}

.flow-usa-img {
  position: absolute;
  bottom: 0;
  right: 0px;
  width: 45%;
  /* グループに対する割合 */
  max-width: none;
}

.flow-title-wrap {
  display: inline-block;
  background-color: var(--accent-black);
  color: var(--accent-white);
  padding: 10px 20px;
  position: relative;
  z-index: 10;
}

.flow-title {
  font-family: var(--font-main);
  font-size: clamp(20px, 6vw, 26px);
  letter-spacing: 0.1em;
}

.flow-steps {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.flow-item {
  width: 100%;
  background-color: var(--accent-white);
  border-bottom: 3px solid var(--accent-pink);
  /* 詳細セクションのスタイルと統一感をもたせる */
  position: relative;
  z-index: 5;
}

.flow-step-label {
  background-color: var(--accent-pink);
  color: var(--accent-white);
  text-align: center;
  padding: 10px;
  font-family: 'Times New Roman', Times, serif;
  font-weight: normal;
}

.step-text {
  display: inline-block;
  font-size: 1.25rem;
  line-height: 1;
  margin-right: 5px;
  margin-bottom: 0;
  letter-spacing: 0.05em;
}

.step-num {
  display: inline-block;
  font-size: 1.25rem;
  line-height: 1;
  font-weight: bold;
}

.flow-step-content {
  padding: 25px 20px;
}

.flow-step-title {
  color: var(--accent-pink);
  font-size: clamp(18px, 5vw, 22px);
  margin-bottom: 10px;
  font-weight: 800;
  font-family: var(--font-main);
}

.flow-step-content p {
  line-height: 1.8;
  margin: 0;
}

.flow-step-content small {
  display: inline-block;
  margin-top: 5px;
  font-size: 0.85em;
  color: var(--text-color);
  line-height: 1.5;
}

.flow-btn-wrap {
  text-align: center;
  margin-top: 10px;
}

.flow-arrow {
  width: 0;
  height: 0;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 15px solid var(--accent-pink);
  margin: 20px 0;
}

/* --- 取引先企業セクション --- */
#companies {
  width: 100%;
  margin: 100px auto;
  background-color: var(--accent-white);
}

.companies-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 60px 5% 40px;
  position: relative;
}

.companies-title-wrap {
  position: absolute;
  top: -20px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--accent-black);
  color: var(--accent-white);
  padding: 10px 20px;
  z-index: 10;
}

.companies-title {
  font-family: var(--font-main);
  font-size: clamp(20px, 6vw, 26px);
  letter-spacing: 0.15em;
  font-weight: bold;
  text-align: center;
}

.companies-notes {
  list-style: none;
  padding-left: 0;
  margin-bottom: 20px;
}

.companies-notes li {
  position: relative;
  padding-left: 1.5em;
  margin-bottom: 8px;
  line-height: 1.6;
}

.companies-notes li::before {
  content: "●";
  position: absolute;
  left: 0;
  top: 0.1em;
  color: var(--accent-pink);
  font-size: 0.9em;
}

.underline-bold {
  font-weight: bold;
  text-decoration: underline var(--accent-black);
  text-underline-offset: 5px;
}

.companies-sub-notes {
  margin-bottom: 30px;
  line-height: 1.6;
}

.companies-sub-notes small {
  display: inline-block;
}

/* テーブルスクロール設定 */
.js-scrollable {
  width: 100%;
}

.companies-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 650px;
  /* スマホで縮まずにスクロールさせるための最低幅 */
  white-space: nowrap;
}

.companies-table th,
.companies-table td {
  padding: 15px;
  border: 1px solid rgba(204, 33, 110, 0.3);
  /* 薄いピンク枠線 */
  text-align: center;
  vertical-align: middle;
}

.companies-table th {
  background-color: var(--accent-pink);
  color: var(--accent-white);
  font-weight: bold;
  border: 1px solid var(--accent-pink);
  border-right: 1px solid var(--accent-white);
}

.companies-table th:last-child {
  border-right: 1px solid var(--accent-pink);
}

/* スマホ表示ではwhite-space: nowrapを維持しますが、PCでは折り返しても良いように設定可能です */
/* --- お問い合わせ先セクション --- */
#contact {
  width: 90%;
  margin: 100px auto;
  max-width: 1000px;
  padding-top: 50px;
  /* うさぎがはみ出すスペースの確保 */
}

.contact-container {
  background-color: var(--accent-white);
  padding: 20px 20px 40px;
  position: relative;
  /* margin-top to overlap with title is handled by absolute title */
}

.contact-title-wrap {
  position: absolute;
  top: -30px;
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--accent-black);
  color: var(--accent-white);
  padding: 15px 15px;
  z-index: 10;
  width: 90%;
  max-width: 320px;
}

.contact-title {
  font-family: var(--font-main);
  font-size: clamp(18px, 5vw, 24px);
  letter-spacing: 0.03em;
  text-align: center;
  line-height: 1.2;
}

.contact-info {
  font-weight: bold;
  margin-top: 30px;
  /* タイトルバーの被りを考慮 */
  margin-bottom: 20px;
  padding: 0 10px;
}

.contact-name {
  margin-bottom: 5px;
  line-height: 1.6;
}

.contact-address {
  line-height: 1.6;
}

.contact-methods {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}

.contact-method-box {
  width: 100%;
  height: auto;
  min-height: 150px;
  max-width: 500px;
  border: 1px solid var(--accent-black);
  padding: 30px 20px;
  text-align: center;
  background-color: var(--accent-white);
}

.contact-icon {
  width: 50px;
  height: auto;
  margin-bottom: 15px;
}

.contact-method-label {
  font-size: 0.95em;
  font-weight: bold;
}

.contact-method-value {
  font-size: clamp(20px, 6vw, 28px);
  font-weight: 900;
  font-family: var(--font-sub);
}

.contact-method-value2 {
  font-size: clamp(15px, 6vw, 20px);
  font-weight: 900;
  font-family: var(--font-sub);
}

.contact-character,
.contact-character2 {
  display: none;
  /* スマホでは出現させない */
}

/* common */
.pc-none {
  display: block;
}

.pc-display {
  display: none;
}

/* =========================================================================
   Media Queries (PC/Tablet)
   ========================================================================= */
@media screen and (min-width: 768px) {

  /* fv pc */
  .fv-inner {
    display: flex;
    align-items: stretch;
    /* ★重要：左右のボックスの高さを強制的に揃える */
    justify-content: space-between;
    width: 100%;
    margin: -50px auto 0 auto;
    height: auto;
    gap: 20px;
    /* 左右の適度な隙間 */
  }

  .fv-inner .fv-flex {
    width: 100%;
  }

  .fv-merits {
    display: grid;
    grid-template-columns: 1fr 1fr;
    margin: 0 0px auto 0;
    /* ★マイナスマージンを増やして上の画像と重ねる */
  }

  .fv-merits img {
    width: 100%;
    /* 親要素の半分（1fr）いっぱいに広がる */
    height: auto;
    display: block;
  }

  .fv-merits .m1 {
    transform: rotate(-3deg);
    margin-top: -50px;
  }

  .fv-merits .m2 {
    transform: rotate(2deg) translateY(20px);
    /* 少し下げて動きを出す */
    margin-left: -15px;
    /* 少し重ねる */
  }

  .fv-merits .m3 {
    transform: rotate(-2deg) translateY(-10px);
    margin-top: -50px;
  }

  .fv-merits .m4 {
    transform: rotate(3deg);
    margin-left: -15px;
    /* 少し重ねる */
    margin-top: 0%;
  }

  .fv-pc-button {
    width: 100%;
    /* ★aタグ（50%）に対して100%（つまり結果的に50%） */
    height: auto;
    display: block;
    margin: 0;
    /* 余計なマージンを消す */
  }

  .fv-pc-btn-link {
    display: block;
    /* blockにする */
    width: 50%;
    /* ★ここで「クリック範囲の幅」を決めます */
    max-width: 500px;
    /* 大きくなりすぎない制限 */
    margin: -20px 0 0;
    /* align-items:centerがあるので左右autoは不要になります */
    text-decoration: none;
  }

  .fv-flex_right {
    width: 95%;
    display: flex;
    /* Flexboxを有効にする */
    flex-direction: column;
    /* 上から下に並べる */
    align-items: center;
    /* ★中身を横方向の中央に寄せる */
    justify-content: flex-end;
    /* ★右も下揃えにすると、ボタンの位置が左と揃いやすい */
    text-align: center;
    /* これを入れると、中のaタグ（インライン要素）が中央に寄ります */
    margin-top: 40px;
  }

  .fv-catch-text_pc {
    width: 80%;
    margin: 0 auto;
    margin-top: 70px;
  }

  /* 固定ボタン */
  .fixed-button {
    position: fixed;
    bottom: 50px;
    /* 画面下からの距離 */
    right: 5%;
    /* 画面右からの距離 */
    width: 200px;
    /* ボタンのサイズ */
    z-index: 100;
    /* 初期状態：非表示（下に隠しておく） */
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all 0.4s ease;
    /* ふわっと出すためのアニメーション */
  }

  /* --- TURNとは？ セクション (PC版) --- */
  /* コンテナと見出し */
  .about-container {
    padding-top: 80px;
  }

  .about-title {
    top: -30px;
    left: 0;
    /* 全体の左上に配置 */
  }

  /* 「TURN」の部分：大きい方 */
  .about-title-main {
    font-size: clamp(38px, 3.33vw, 48px);
    font-weight: bold;
  }

  /* 「とは？」の部分：小さい方 */
  .about-title-small {
    font-size: clamp(28px, 2.78vw, 40px);
    font-weight: bold;
  }

  /* flexを作用させるため、画像のラッパーを無効化 */
  .about-images {
    display: contents;
  }

  /* 冊子とテキストを横並びに */
  .about-content {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  /* うさぎ：見切れずに、かつ縦横で冊子と被らないように配置 */
  .col-usa {
    position: absolute;
    width: 18%;
    min-width: 120px;
    top: 80px;
    /* 768px幅でも見切れないように、安全な%指定ではみ出させる */
    left: -4%;
    margin-right: 0;
    transform: none;
    z-index: 10;
  }

  /* 冊子カラム */
  .col-turn {
    width: 30%;
    /* うさぎが占有する幅（約14〜15%）を避け、絶対に重ならないようにする */
    margin-left: 16%;
    min-width: 160px;
    display: flex;
    justify-content: center;
  }

  /* テキストカラム */
  .col-text {
    /* 全体の幅から、冊子(30%)と余白(16%)を引いた残りのスペースを使用 */
    width: 53%;
    padding-left: 20px;
  }

  .about-description p {
    line-height: 2.0;
    /* 行間幅広く */
    font-size: clamp(15px, 1.5vw, 17px);
    /* 読みやすくサイズ調整 */
  }

  /* CTAボタンカプセル */
  .about-action {
    text-align: center;
    margin-top: 30px;
  }

  /* マゼンタ背景と右下影の立体感・完全な丸み */
  .btn-primary {
    background-color: var(--accent-pink);
    border-radius: 50px;
    box-shadow: 5px 5px 0px var(--accent-black);
    padding: 16px 50px;
    font-size: 1.15rem;
  }

  .btn-primary:active {
    transform: translate(5px, 5px);
    box-shadow: 0 0 0 var(--accent-black);
  }

  /* --- ボランティア詳細 セクション (PC版) --- */
  .detail-wrapper {
    position: relative;
    max-width: 1200px;
    margin: 0 auto;
    padding-top: 100px;
    /* 金具やうさぎの表示域を確保 */
  }

  .detail-decorations {
    height: 150px;
  }

  /* うさぎをバインダー右上からひょっこり出す */
  .decor-usa {
    top: -160px;
    /* 顔が紙に隠れないよう大幅に上に引き上げ */
    bottom: auto;
    /* モバイル指定を解除 */
    right: 0px;
    width: 35%;
    max-width: 200px;
    z-index: 1;
    /* 紙の後ろに配置して不要な部分を隠す */
  }

  /* バインダーの金具（クリップ）を上部中央へ */
  .decor-clip {
    bottom: auto;
    top: 30px;
    width: 45%;
    max-width: 280px;
    z-index: 10;
  }

  /* 白い台紙部分 */
  .detail-paper {
    padding: 80px;
    padding-bottom: 10px;
    background-color: var(--accent-white);
    border: 1px solid var(--accent-black);
    z-index: 5;
  }

  /* 黒背景の見出し */
  .detail-title-wrap {
    margin-bottom: 60px;
    margin-top: -20px;
  }

  .detail-title {
    font-size: clamp(38px, 3.33vw, 44px);
    padding: 15px 60px;
    letter-spacing: 0.1em;
  }

  .detail-section {
    margin-bottom: 50px;
  }

  /* 見出しスタイル：左側に細いグレーの水平線 */
  .detail-heading {
    font-size: 24px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
  }

  /* 最後の「注意事項」見出しは画像デザインに合わせて非表示にする */
  .detail-section:last-child .detail-heading {
    display: none;
  }

  /* ボランティアのメリット：4カラムグリッド（2行×2列） */
  .merit-images {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 30px;
    padding: 20px 0;
  }

  /* 手書きのチラシ感を演出する少しの傾き */
  .merit-images img:nth-child(1) {
    transform: rotate(-2deg);
  }

  .merit-images img:nth-child(2) {
    transform: rotate(1deg);
  }

  .merit-images img:nth-child(3) {
    transform: rotate(2deg);
  }

  .merit-images img:nth-child(4) {
    transform: rotate(-1deg);
  }

  /* 注意書き部分のテキスト間隔調整 */
  .detail-list-pink li {
    font-size: 16px;
    margin-bottom: 12px;
    line-height: 1.8;
  }

  /* --- ボランティアの流れ セクション (PC版) --- */
  #flow {
    padding: 150px 0 100px;
    /* 上のセクションとうさぎの耳がかぶらないよう、上部の余白を多めに確保 */
  }

  /* 1. 全体のレイアウト（2カラムFlexbox） */
  .flow-container {
    display: flex;
    justify-content: flex-start;
    align-items: stretch;
    max-width: 1000px;
    width: 100%;
    margin: 0 auto;
    position: relative;
  }

  /* 左カラム：見出し */
  .flow-header {
    flex: 0 0 auto;
    /* 幅はコンテンツのまま */
    padding-top: 0;
    margin-bottom: 0;
    position: static;
  }

  /* 2. 黒背景に白文字の縦書き見出し */
  .flow-title-wrap {
    display: inline-block;
    background-color: var(--accent-black);
    padding: 40px 15px;
  }

  .flow-title {
    writing-mode: vertical-rl;
    /* 縦書き */
    text-orientation: upright;
    font-size: 32px;
    letter-spacing: 0.2em;
    line-height: 1.4;
  }

  /* 右カラム：フロートリスト */
  .flow-steps {
    flex: 1;
    margin-left: 50px;
    /* 左見出しとの間隔 */
    align-items: stretch;
  }

  /* 3. フロートリスト（ピンクと白を横並び） */
  .flow-item {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    margin-bottom: 60px;
    /* 間の三角矢印スペース含む */
    position: relative;
  }

  .flow-item:last-child {
    margin-bottom: 0;
    /* 最後のステップは下マージンなし */
  }

  /* ピンク部分（step 01 等） */
  .flow-step-label {
    width: 150px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 0;
    /* モバイルのパディングをリセット */
  }

  .flow-step-label .step-text {
    display: block;
    font-size: 1.2rem;
    margin-right: 0;
    margin-bottom: 8px;
  }

  .flow-step-label .step-num {
    display: block;
    font-size: 3.5rem;
  }

  /* 白部分（内容） */
  .flow-step-content {
    flex: 1;
    padding: 30px 40px;
    background-color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
  }

  .flow-step-title {
    font-size: 24px;
    margin-bottom: 15px;
  }

  .flow-btn-wrap {
    text-align: left;
    /* ボタン左寄せに変更 */
    margin-top: 20px;
  }

  /* スマホ用のHTML配置矢印は非表示に */
  .flow-arrow {
    display: none;
  }

  /* CSSで描画する三角（▼）を各アイテムの下に配置 */
  .flow-item:not(:last-child)::after {
    content: '';
    position: absolute;
    bottom: -40px;
    /* 次のステップの中間地点 */
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 15px solid transparent;
    border-right: 15px solid transparent;
    border-top: 25px solid var(--accent-pink);
    /* CSS triangle */
    z-index: 10;
  }

  /* 4. キャラクターのはみ出し配置（右上） */
  .flow-decor-group {
    position: absolute;
    top: -150px;
    /* 白エリアからより高くはみ出す */
    right: 0;
    /* 右上のエッジに配置（step01の右上にあたる位置） */
    bottom: auto;
    left: auto;
    width: 320px;
    height: 180px;
    z-index: 1;
    /* stepボックス（z-index: 5）の裏側に配置し顔だけ出す */
  }

  /* うさぎの位置 */
  .flow-usa-img {
    position: absolute;
    bottom: -30px;
    /* 体の下半分をstep01ボックスの後ろに沈める */
    right: 0;
    width: 175px;
    transform: rotate(5deg);
  }

  /* 吹き出しテキストの位置 */
  .flow-text-img {
    position: absolute;
    top: -20px;
    left: -60px;
    /* うさぎの左上に配置して吹き出し口を合わせる */
    width: 200px;
    transform: rotate(-3deg);
  }

  .companies-title {
    font-family: var(--font-main);
    font-size: clamp(38px, 3.33vw, 44px);
    letter-spacing: 0.15em;
    font-weight: bold;
    text-align: center;
  }

  .companies-container {
    background-color: var(--accent-white);
    padding: 100px 20px 40px;
    position: relative;
  }

  .contact-title-wrap {
    /* 箱の横幅を文字が1行で収まる十分な広さに設定 */
    width: auto;
    min-width: 350px;
    /* 理想のデザインに合わせて調整してください */
    max-width: 80%;
    padding: 15px 10px;
    /* 左右の余白を広げると1枚目のイメージに近くなります */
  }

  .contact-title {
    font-family: var(--font-main);
    /* clampの設定：最大値を44pxにされていますが、少し小さくすると収まりやすくなります */
    font-size: clamp(38px, 3.33vw, 44px);
    line-height: 1;
    /* 1行で強制表示させる魔法の記述 */
    white-space: nowrap;
    /* 個別に設定していた幅制限を解除 */
    width: auto;
    margin: 0;
  }

  .contact-method-box {
    display: flex;
    flex-direction: column;
    justify-content: center;
    /* 中身を上下中央に */
    align-items: center;
    /* 中身を左右中央に */
    width: 100%;
    max-width: 500px;
    border: 1px solid var(--accent-black);
    padding: 30px 20px;
    background-color: var(--accent-white);
    box-sizing: border-box;
    /* パディングを含めた計算にする */
  }

  .contact-methods {
    flex-direction: row;
    /* 横並びにする */
    justify-content: center;
    align-items: stretch;
    /* ★これが重要：高さを揃える */
    max-width: 900px;
    margin: 0 auto;
  }

  .contact-method-box {
    flex: 1;
    /* 幅を均等にする */
    max-width: none;
    /* 個別の最大幅制限を解除 */
    min-height: 200px;
    /* PC版での最小の高さを確保 */
  }

  .contact-icon {
    width: 50px;
    height: auto;
    margin-bottom: 15px;
  }

  .contact-character {
    display: block;
    position: absolute;
    /* 親要素を基準に自由に動かせるようにする */
    top: -110px;
    /* 上方向に60pxはみ出させる */
    left: 50%;
    transform: translateX(-400px);
    /* 中央から左に380px戻した位置に固定 */
    width: 120px;
    /* うさぎのサイズ調整 */
    height: auto;
    z-index: 20;
    /* タイトルなどの他の要素より上に表示する */
  }

  .contact-character2 {
    display: block;
    position: absolute;
    /* 親要素を基準に自由に動かせるようにする */
    top: -45px;
    /* 上方向に60pxはみ出させる */
    left: 50%;
    transform: translateX(-410px);
    /* 1匹目より少しだけ左にずらす */
    width: 80px;
    /* うさぎのサイズ調整 */
    height: auto;
    z-index: -20;
    /* タイトルなどの他の要素より上に表示する */
  }

  .contact-info {
    font-weight: bold;
    margin-top: 30px;
    /* タイトルバーの被りを考慮 */
    margin-bottom: 20px;
    padding: 0 10px;
    width: fit-content;
    /* 中身の文字幅に合わせる */
    margin-left: auto;
    /* 左右autoで要素自体を中央へ */
    margin-right: auto;
    text-align: left;
    /* 要素内での文字は左揃えにする */
  }

  .contact-container {
    background-color: var(--accent-white);
    padding: 30px 20px 40px;
    position: relative;
    /* margin-top to overlap with title is handled by absolute title */
  }

  /* common */
  .pc-none {
    display: none;
  }

  .pc-display {
    display: block;
  }
}