@charset "UTF-8";
/** -----------------------------------------------
  共通
------------------------------------------------**/
body {
  font-family: "Noto Sans JP", "Helvetica Neue",Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", sans-serif;
  background-color: #FCFDFC;
}

html {
  scroll-behavior: smooth;
}

/* スマホ専用の改行をPCでは隠す設定 */
.sp-only {
  display: none;
}

/* -----------------------------------------------
  MARK: ヘッダー
------------------------------------------------- */

/* ヘッダー全体の横並び・配置設定 */
.site-header {
  display: flex;
  align-items: center;           /* 中の要素を縦方向の真ん中で揃える */
  justify-content: space-between; /* 各ブロック（ロゴ・ナビ・アイコン）を両端に広げる */
  padding: 20px 80px;           
  width: 100%;
}


/* -----------------------------------------------
  MARK: ロゴ
------------------------------------------------- */

.header-logo a {
  display: flex;
  align-items: center;           /* 画像とテキストの縦の真ん中を揃える */
  text-decoration: none;         /* リンクの下線を消す */
}

/* TSUTSUMUのロゴ画像 */
.logo-image {
  height: 32px;                  /* デザインに合わせて画像の高さを調整 */
  width: auto;                   /* 横幅は比率を保って自動調整 */
  object-fit: contain;
}

/* RECRUITのテキスト */
.logo-text-sub {
  font-size: 12px;               
  font-weight: 500;            
  letter-spacing: 0.2em;        
  color: #7FC2DD;               
  margin-left: 15px;             /* 画像との間のスキマ */
  margin-top: 16px;
}

/* -----------------------------------------------
  MARK: ナビケーション（メニュー）
------------------------------------------------- */

.header-nav {
  margin-left: auto;             /* メニュー全体が右側に寄る */
  margin-right: 60px;            /* 右端のアイコンとの間のスキマ */
}

/* メニューの箇条書きを横並びにする */
.nav-list {
  display: flex;
  list-style: none;              /* ドット（・）を消す */
  gap: 36px;                   
}

/* メニューのリンク文字 */
.nav-list a {
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;           
  color: #036A96;              
  transition: opacity 0.2s ease; /* ホバー時のアニメーションを滑らかに */
}

/* マウスを乗せたときに少し透明にする */
.nav-list a:hover {
  opacity: 0.7;
}


/* ==========================================================================
  リンクタグ（a）のデフォルトスタイルをリセット
========================================================================== */

/* ナビゲーション内のリンク色を調整 */
.header-nav a,
.footer-nav a {
  color: #036A96; 
  text-decoration: none; 
  transition: opacity 0.2s ease;
}

/* マウスを乗せた（ホバー）したときに少し薄く */
.header-nav a:hover,
.footer-nav a:hover {
  opacity: 0.7;
}

/* リストの「・（点）」が出てしまっていたら消す */
.header-nav-list,
.footer-nav-list {
  list-style: none; /* 点マークを消す */
  padding: 0;
  margin: 0;
}


/* --------------------------------------
 * 右端のアイコンエリア
 * ----------------------------------- */
.header-icon {
  display: flex;
  align-items: center;
}	


/* 会社情報の文字とアイコンを横並びにする設定 */
.header-icon .corporate-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;                      /* 文字とアイコンの間のスキマ */
  text-decoration: none;         /* 下線が絶対に消える */
  color: #036A96;              
  font-size: 14px;               /* 他のメニューと文字サイズを合わせる */
  font-weight: 500;              /* 文字の太さも統一 */
  transition: opacity 0.2s ease; /* フワッとするアニメーションも統一 */
}

/* 文字にマウスを乗せたときも他のメニューと同様にフワッとさせる */
.header-icon .corporate-link:hover {
  opacity: 0.7;
}

/* ★外部サイトリンク画像のサイズ調整 */
.header-icon .corporate-link img {
  width: 32px;                  
  height: auto;
  display: block;                /* 画像の下にできる謎の隙間をリセット */
}

/* PC表示ではモーダル内のエントリーボタンを隠す */
.nav-entry-btn-sp {
  display: none;
}

/* -----------------------------------------------
  MARK: メインビジュアル
------------------------------------------------- */

/* フワーッと出るアニメーション */
@keyframes mvTextFadeUp {
  0% {
    opacity: 0;                /* 完全に透明 */
    transform: translateY(20px); /* 元の位置より20px下に配置 */
  }
  100% {
    opacity: 1;                /* 完全に不透明 */
    transform: translateY(0);    /* 元の位置に戻る */
  }
}

.mainvisual {
  background-image:url("../../images/mv-pc.jpg"); 
  
  background-size: cover;       /* 画像の縦横比を保ったまま全体に広げる */
  background-position: center;  /* 画像の中心を真ん中に合わせる */
  width: 100%;
  height: 800px;               
  position: relative;           /* 中の文字を絶対配置するための基準 */
}


/* ★文字全体を包むブロック */
.mv-copy-wrap {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%); /* 中央寄せのためのtransform。アニメーションとは別 */
  text-align: center;
}


.mv-copy-glow {
  filter: drop-shadow(0 0 8px #fff) drop-shadow(0 0 18px #fff);
}

/* ★メインのキャッチコピー（世界をやさしさでつつむ。） */
.mv-copy-main {
  font-size: 48px;
  font-weight: 500;
  color: #308db2;
  line-height: 1.4;
  letter-spacing: 0.05em;

  /* マスク適用後の文字に、親要素で白いグロウを付ける */
  text-shadow: none;
  /* 中央寄せの設定 */
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 10px;

  /* --- 滑らかな出現アニメーションの設定 --- */
  /* マスクのサイズを大きくして左側に隠しておく */
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 33%, transparent 66%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 33%, transparent 66%, transparent 100%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;

  /* 2.0秒かけてイーズアウト（滑らか）に表示 */
  animation: smoothReveal 2s ease-out forwards;
}

@keyframes smoothReveal {
  0% {
    -webkit-mask-position: 100% 0;
    mask-position: 100% 0;
  }
  100% {
    -webkit-mask-position: 0% 0;
    mask-position: 0% 0;
  }
}


/* ★サブのテキスト（TSUTSUMU採用サイト） */
.mv-copy-sub {
  font-size: 24px;
  font-weight: 500;
  color: #308DB2;
  line-height: 1.4;
  letter-spacing: 0.05em;
  text-shadow:
    0 0 10px #ffffff,
    0 0 25px #ffffff,
    0 0 45px #ffffff;

  /* 中央寄せの設定 */
  margin-left: auto;
  margin-right: auto;

  /* アニメーションの設定 */
  opacity: 0; /* 💡最初は透明にしておく（重要！） */
  animation-name: mvTextFadeUp;
  animation-duration: 1.5s;
  animation-timing-function: ease-out;
  animation-fill-mode: forwards;
  animation-delay: 0.5s; /* メインより0.5秒遅らせて再生（リズムが出る） */
}


/* -----------------------------------------------
  MARK:CTA
------------------------------------------------- */
/* ボタン2つを包む外枠：画面の右端中央に固定 */
.side-ctas {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%); /* 縦方向の真ん中にぴったり合わせる */
  z-index: 9999;               /* 一番手前に表示されるようにする */
  
  display: flex;
  flex-direction: column;      /* ボタンを縦に2つ並べる */
  gap: 18px;                   /* ★ボタンとボタンの間の余白*/
}

/* ボタンのスタイル */
.side-ctas__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;                 
  padding: 30px 0;             
  text-decoration: none;       
  font-weight: 400;
  font-size: 16px;
  writing-mode: vertical-rl;   /* 縦書き */
  letter-spacing: 0.2em;       
  transition: opacity 0.2s ease;

  /* ボタンのカラー */
  background-color: #036A96;   /* ボタンの背景色 */
  color: #ffffff;              /* 文字色 */

  /* ボタンの左側全体を丸くする */
  border-radius: 12px 0 0 12px; 
}

.side-ctas__btn--secondary {
  background-color: #fff;
  color: #036A96;
  border: 1px solid #036A96;
}

/* ホバーした時に少し透明にする */
.side-ctas__btn:hover {
  opacity: 0.8;
}

/* -----------------------------------------------
  MARK:スクロールアニメーション
------------------------------------------------- */

.animate-lead {
  transform: translateY(20px);
  opacity: 0;
  transition: transform 1.2s ease-out, opacity 1.2s ease-out;
}

/* アニメーション発火時（文字がふわっと出る） */
.animate-lead.is-animated {
  transform: translateY(0);
  opacity: 1;
}

/* 縦線の初期状態 */
.animate-lead::before {
  content: "";
  position: absolute; 
  top: 0;
  left: 50%;   
  transform: translateX(-50%);
  width: 1px;
  height: 0; /* 最初は高さを0にする */
  background-color: #7FC2DD;
  transition: height 1.5s ease-out 0.2s; /* 1.5秒かけてすーーーっと伸びる */
}

/* アニメーション発火時（縦線が伸びる） */
.animate-lead.is-animated::before {
  height: 80px;
}

/* -----------------------------------------------
  MARK:MARK:私たちについて（ABOUT）
------------------------------------------------- */
.about {
  padding: 100px 0;

  background-image: 
    url("../../images/bg-circle-yellow.png"), /* 1つ目の水玉 */
    url("../../images/bg-circle-yellow.png"), /* 2つ目の水玉 */
    url("../../images/bg-circle-yellow.png"), /* 3つ目の水玉 */
    url("../../images/bg-circle-yellow.png"), /* 4つ目の水玉 */
    url("../../images/bg-circle-green.png"),  /* 5つ目の水玉（黄緑） */
    url("../../images/bg-circle-yellow.png"), /* 6つ目の水玉 */
    url("../../images/bg-circle-yellow.png"); /* 7つ目の水玉 */
    
  background-repeat: no-repeat;
  
  /* 画像のサイズ指定 */
  background-size: 
    300px auto, 
    250px auto, 
    240px auto, 
    430px auto, 
    350px auto, 
    230px auto, 
    200px auto;
    
  /* 画像の位置指 */
  background-position: 
    -5% -5%,              /* 1つ目：左上 */
    right -1% top 5%,     /* 2つ目：右上 */
    left 13% bottom 25%,  /* 3つ目：左 */
    right 8% top 40%,     /* 4つ目：写真の右下あたり */
    left 0% bottom 0.5%,  /* 5つ目：左下（黄緑） */
    right 8% bottom 2%,     /* 6つ目：右下 */
    left 3% bottom 60%;   /* 7つ目：左中央の少し小さめ */
}

/* ★全体のコンテンツ最大幅を 960px に指定 */
.about-container {
  max-width: 960px; 
  margin: 0 auto;
  padding: 0 20px; /* 画面が狭くなったときの左右の最低余白 */
}

/* --- タイトル部分 --- */
.about-title-wrap {
  display: flex;         
  position: relative;    
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 30px;
}

/* 縦書きの「ABOUT」 */
.about-lead {
  font-family: 'Poppins', sans-serif; 
  writing-mode: vertical-rl;
  font-size: 14px;
  color: #7FC2DD;
  letter-spacing: 0.2em;
  padding-top: 100px;
  position: absolute;      
  top: 0;        
  left: -100px;  
  
  /* アニメーション前の状態：少し下に下げて透明に */
  transform: translateY(20px);
  opacity: 0;
  transition: transform 1.2s ease-out, opacity 1.2s ease-out;
} 

/* クラスがついたらフワーッと浮き出る */
.about-lead.is-animated {
  transform: translateY(0);
  opacity: 1;
}


/* ABOUTの上にある細い縦線 */
.about-lead::before {
  content: "";
  position: absolute; 
  top: 0;
  left: 50%;   
  transform: translateX(-50%);
  width: 1px;
  height: 0; /* アニメーション前は線の高さを0に */
  background-color: #7FC2DD;
  /* 線の伸びるスピード（文字より少し遅れて動き出すように delay を設定） */
  transition: height 1s ease-out 0.4s;
}

/* クラスがついたら上の線がスーッと80pxに伸びる */
.about-lead.is-animated::before {
  height: 80px;
}

/* 日本語の「私たちについて」タイトル */
.about-title {
  font-size: 32px;
  color: #036A96;
  font-weight: 700;
  line-height: 1.2; 
  padding-left: 0; 
}

/* --- コンテンツブロック（左右並び） --- */
.about-block {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 50px;             /* 文章と写真の間のスキマ */
  margin-bottom: 80px;
}

/* 2つ目のブロックは左右を反転 */
.about-block--reverse {
  flex-direction: row-reverse;
}

.about-text-content {
  flex: 1;
}

.about-p-lead {
  font-size: 20px;
  font-weight: 700;
  color: #443C30;
  margin-bottom: 48px;
  line-height: 1.75;
  /* スマホでの横はみ出し・スクロールバグを防ぐため nowrap は削除 */
}

.about-p-sub {
  font-size: 16px;
  color: #443C30;
  line-height: 3; 
}

/* --- PC用の改行のスタイル --- */
.about-lead-chunk {
  display: block; 
}

.about-sub-chunk {
  display: block; 
}

/* --- 画像の丸いくり抜き設定 --- */
.about-image-wrap {
  display: flex;
  justify-content: center;
}

.about-img {
  width: 460px;    
  height: 354px;         
  object-fit: cover;     
  border-radius: 50%; /* シンプルに50%にするだけで綺麗に楕円になる */
}

/* --- 下部のボタン --- */
.about-btn-wrap {
  text-align: center;
  margin-top: 60px;
}

.about-btn {
  display: inline-block;
  border: 1px solid #036A96;
  color: #036A96;
  text-decoration: none;
  padding: 15px 60px;
  border-radius: 30px; 
  font-size: 16px;
  font-weight: 500;
  background-color: #FCFDFC;
  transition: all 0.3s ease;
}

/* ボタンホバー時 */
.about-btn:hover {
  background-color: #036A96;
  color: #ffffff;
}

/* -----------------------------------------------
  MARK: 事業について
------------------------------------------------- */
.works {
  padding: 100px 0;
  position: relative; /* 背景の配置基準として必須 */
  z-index: 1; 

  /* 「働く環境」セクションの背景画像 .works::before の right: -50px; が原因で50px分右にはみ出ている、そのため全体的に横スクロールが出てしまっていた
.works に overflow-x: hidden; をつけてはみ出る分を非表示にする。でもこれのせいで水玉がセクションを越える設定が反映されない */
  overflow-x: hidden; 

  
  background-image: 
    url("../../images/bg-circle-green.png"), /* 黄緑（左上） */
    url("../../images/bg-circle-green.png"), /* 黄緑（右中央）*/
    url("../../images/bg-circle-green.png"), /* 黄緑（左下） */
    url("../../images/bg-circle-green.png"), /* 黄緑（左中央） */
    url("../../images/bg-circle-pink1.png"),  /* ピンク（左上、緑の近く） */
    url("../../images/bg-circle-pink2.png");  /* ピンク（右下） */
    
  background-repeat: no-repeat; /* 水玉が繰り返さないように設定 */
  
  /* それぞれの水玉の大きさ（横幅） */
  background-size: 
    160px auto, /* 黄緑（左上） */
    200px auto, /* 黄緑（右中央） */
    300px auto, /* 黄緑（左中央） */
    250px auto, /* 黄緑（左中央） */
    120px auto, /* ピンク（左下） */
    150px auto; /* ピンク（右下） */
    
  /* 配置 */
  background-position: 
    -40px 50px,              /* 黄緑（左上：タイトル「事業について」の左） */
    right -30px bottom 20%,   /* 黄緑（右中央：フォトブック事業の右側） */
    left 5% bottom 50%,     /* 黄緑（左中央：フォトブック事業の左） */
    left 0% bottom -1%,     /* 1番左下 */
    left -1% bottom 12%,    /* ピンク（左下：ベビー用品事業の左側） */
    right 8% bottom 10%;   /* ピンク（右下：コミュニティ事業の右下） */

}


/* --------------------------------------
 * 上のセクションへはみ出させる水玉（右上の黄緑）
 * ----------------------------------- */
.works::before {
  content: "";
  position: absolute;
  
  /* 「.works」の上端（top: 0）を飛び越えて、上に引きげる*/
  top: -1%;              /* マイナスで上のセクションにはみだす！ */
  right: -50px;             /* 右側も少しはみ出させて自然な位置に */
  
  /* 水玉画像の指定 */
  width: 400px;             /* 水玉のサイズ */
  height: 400px;
  background-image: url("../../images/bg-circle-green.png");
  background-size: contain;
  background-repeat: no-repeat;
  
  /* z-indexを「-1」にすることで、ボタンや文字、親要素の背景よりもさらに「奥」に引っ込める */
  z-index: -1; 
  pointer-events: none;     
}


/* 全体のコンテンツ最大幅を 960px に指定 */
.works-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 日本語の「事業について」タイトル */
.works-title {
  font-size: 32px;
  color: #036A96;
  font-weight: 700;
}

/* --- タイトル部分 --- */
.works-title-wrap {
  display: flex;
  position: relative; /* 縦書きWORKSの基準点 */
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 30px;
}


/* 縦書きの「ABOUT」 */
.works-lead {
  font-family: 'Poppins', sans-serif; 
  writing-mode: vertical-rl;
  font-size: 14px;
  color: #7FC2DD;
  letter-spacing: 0.2em;
  padding-top: 100px;
  position: absolute;      
  top: 0;        
  left: -100px;  
  
  /* アニメーション前の状態：少し下に下げて透明に */
  transform: translateY(20px);
  opacity: 0;
  transition: transform 1.2s ease-out, opacity 1.2s ease-out;
} 

/* クラスがついたらフワーッと浮き出る */
.works-lead.is-animated {
  transform: translateY(0);
  opacity: 1;
}

.works-lead::before {
  content: "";
  position: absolute; 
  top: 0;
  left: 50%;   
  transform: translateX(-50%);
  width: 1px;
  height: 0; /* アニメーション前は線の高さを0に */
  background-color: #7FC2DD;
  /* 線の伸びるスピード（文字より少し遅れて動き出すように delay を設定） */
  transition: height 1s ease-out 0.4s;
}

/* クラスがついたら上の線がスーッと80pxに伸びる */
.works-lead.is-animated::before {
  height: 80px;
}


/* リード文のスタイル */
.works-section-desc {
  font-size: 15px;
  color: #443C30;
  line-height: 1.8;
  margin-bottom: 60px;
}

.works-section-desc span {
  display: block; /* これでspanごとに自動で改行 */
}

/* --- カードレイアウト（3つのカードを包む枠） --- */
.works-list {
  display: flex;
  flex-direction: column;
  gap: 40px; /* カードとカードの間の隙間 */
  align-items: center;
}


/* 1枚のカード全体のスタイル */
.works-card {
  display: flex;
  width: 100%;
  max-width: 800px;  
  background-color: #FCFDFC; 
  border: 1px solid #f0f0f0;  
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05); 
  overflow: hidden; 
  margin: 0 auto;     /* カードを中央に配置する */

   /* 変化を「0.3秒かけて滑らかに」する設定 */
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}



/* カードの左側：テキスト情報エリア */
.works-card__info {
  flex: 1;
  width: 40%;
  padding: 40px;
  position: relative; /* ボタンを右下に絶対配置するための基準 */
  display: flex;
  flex-direction: column;
}


/* 事業名（h3） */
.works-card__title {
  font-size: 18px;
  font-weight: 700;
  color: #443C30;
  margin-bottom: 20px;
}

/* 説明文 */
.works-card__text {
  font-size: 16px;
  color: #443C30;
  line-height: 2;
  letter-spacing: 0.05em;
  margin-bottom: 40px; /* ボタンとの間の余白 */
}

/* もっと見るボタン */
.works-card__btn {
  position: absolute;
  right: 40px;
  bottom: 30px;
  display: inline-block;
  background-color: #F2DF9A; 
  color: #443C30;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 30px;
  border-radius: 20px; /* 丸みのあるカプセル型 */
  transition: opacity 0.2s ease;
}

.works-card__btn:hover {
  opacity: 0.8;
}

/* カードの右側：画像エリア */
.works-card__image-wrap {
  width: 345px; /* ★画像の横幅 */
  display: flex;
  flex-shrink: 0; /* 画面が狭くなっても画像が潰れないようにする */
}


/* 画像自体の設定 */
.works-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover; /* 画像が比率を保ったまま枠いっぱいに綺麗に収まるようにする */
}




/* -----------------------------------------------
  MARK:働く環境
------------------------------------------------- */

.workplace {
  padding: 100px 0;
  position: relative; /* 背景の配置基準 */
  z-index: 1;         /* 他の要素との重なりバグを防ぐ */
  
  background-image: 
    url("../../images/bg-circle-pink1.png"), /* 1: 左上 */
    url("../../images/bg-circle-pink2.png"), /* 2: 右上 */
    url("../../images/bg-circle-pink1.png"), /* 3: 左下 */
    url("../../images/bg-circle-pink2.png"); /* 4: 右下 */
    
  background-repeat: no-repeat; /* 水玉が繰り返さないように設定 */
  
  background-size: 
    200px auto, /* 1: 左上 */
    300px auto, /* 2: 右上（存在感のあるサイズ） */
    250px auto, /* 3: 左下 */
    140px auto; /* 4: 右下（少し控えめなサイズ） */
    
  background-position: 
    -1% 0%,             /* 1: 左上 */
    right 0% top 40px,    /* 2: 右上 */
    left 3% bottom 5%,     /* 3: 左下 */
    right 5% bottom 10%;    /* 4: 右下 */
}


/* 全体のコンテンツ最大幅を 960px に指定 */
.workplace-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}


/* --- タイトル部分 --- */
.workplace-title-wrap {
  display: flex;
  position: relative; /* 縦書きWORKPLACEの基準点 */
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 30px;
}

/* 縦書きの「WORKPLACE」 */
.workplace-lead {
  font-family: 'Poppins', sans-serif;
  writing-mode: vertical-rl;
  font-size: 14px;
  color: #7FC2DD;
  letter-spacing: 0.2em;
  padding-top: 100px;

  position: absolute;
  top: 0;
  left: -100px; /* 左外側へはみ出させる */

   /* アニメーション前の状態：少し下に下げて透明に */
  transform: translateY(20px);
  opacity: 0;
  transition: transform 1.2s ease-out, opacity 1.2s ease-out;
}

/* クラスがついたらフワーッと浮き出る */
.workplace-lead.is-animated {
  transform: translateY(0);
  opacity: 1;
}

/* WORKPLACEの上にある細い縦線 */
.workplace-lead::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 0; /* アニメーション前は線の高さを0に */
  background-color: #7FC2DD;
  /* 線の伸びるスピード（文字より少し遅れて動き出すように delay を設定） */
  transition: height 1s ease-out 0.4s;
}


/* クラスがついたら上の線がスーッと80pxに伸びる */
.workplace-lead.is-animated::before {
  height: 80px;
}


/* 日本語の「働く環境」タイトル */
.workplace-title {
  font-size: 32px;
  color: #036A96;
  font-weight: 700;
}

/* リード文 */
.workplace-section-desc {
  font-size: 15px;
  color: #443C30;
  line-height: 1.8;
  margin-bottom: 60px;
}

/* --- 3カラムレイアウト（横並び） --- */
.workplace-list {
  display: flex;
  justify-content: space-between;
  gap: 40px; /* 各項目どうしの間隔 */
  margin-bottom: 60px;
}

/* 1つの項目枠 */
.workplace-item {
  flex: 1; /* 3つの要素を均等な幅にする */
  text-align: center; /* 中身をすべて中央寄せに */
}

/* アイコン画像を包む枠 */
.workplace-item__icon-wrap {
  height: 120px; /* アイコンの縦位置を揃えるための高さ固定 */
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 24px;
}

/* アイコン画像自体 */
.workplace-item__icon {
  max-height: 100%; /* 高さは枠を超えないように */
  width: auto;
}

/* 各項目のタイトル（h3） */
.workplace-item__title {
  font-size: 20px;
  color: #443C30;
  font-weight: 700;
  margin-bottom: 20px;
  letter-spacing: 0.05em;
}

/* 各項目の説明文 */
.workplace-item__text {
  font-size: 14px;
  color: #443C30;
  line-height: 1.8;
  text-align: left; /* 説明文は左揃えにして読みやすく */
}

/* --- 下部のボタン --- */
.workplace-btn-wrap {
  text-align: center;
  margin-top: 60px;
}

.workplace-btn {
  display: inline-block;
  border: 1px solid #7FC2DD; /* 線は淡い水色 */
  color: #036A96;
  text-decoration: none;
  padding: 15px 60px;
  border-radius: 30px; 
  font-size: 16px;
  font-weight: 500;
  background-color: #FCFDFC;
  box-shadow: 0 4px 10px rgba(127, 194, 221, 0.2); /* ボタンの水色の影 */
  transition: all 0.3s ease;
}

/* ボタンホバー時 */
.workplace-btn:hover {
  background-color: #7FC2DD;
  color: #ffffff;
}

/*改行する */
.workplace-section-desc span,
.workplace-item__text span {
  display: block; 
}


/* -----------------------------------------------
  MARK:ギャラリー
------------------------------------------------- */

.gallery-slider {
  width: 100%;
  overflow: hidden; /* 画面外にはみ出た画像を見えなくする */
  padding: 60px 0;
  background-color: #FCFDFC;
}

/* 2つのリストを横並びにして動かすトラック */
.gallery-slider__track {
  display: flex;
  width: max-content; /* 中身のサイズに合わせて横幅を自動で無限に広げる */
}

/* 画像が並ぶリスト本体 */
.gallery-slider__list {
  display: flex;
  gap: 20px; /* 画像と画像の間のスキマ */
  padding-right: 20px; /* 2つのリストがくっついた時の隙間調整 */
  
  /* アニメーション！ 、無限ループ(infinite) */
  animation: scrollGallery 60s linear infinite; 
}

/* リストの中の画像1枚ずつの設定 */
.gallery-slider__list img {
  width: 320px;  
  height: 240px;
  object-fit: cover;
  border-radius: 12px; 
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05); /* うっすらとした影 */
}

/* --- 横に動かすアニメーション --- */
@keyframes scrollGallery {
  0% {
    transform: translateX(0); /* 最初元の位置 */
  }
  100% {
    transform: translateX(-100%); /* 1セット分丸ごと左にスライドしたらリセット */
  }
}


/* -----------------------------------------------
  MARK:メンバー紹介
------------------------------------------------- */

.people {
  padding: 100px 0;
  background-color: #FCFDFC; 
  position: relative; /* 背景や擬似要素の配置基準 */
  z-index: 1;         /* 重なり順のバグを防ぐ */
  
  
  background-image: 
    url("../../images/bg-circle-pink1.png"),   /* 1: 【右右上】ピンク */
    url("../../images/bg-circle-purple1.png"), /* 2: 【左上】*/
    url("../../images/bg-circle-purple2.png"),  /* 3: 【左下】 */
    url("../../images/bg-circle-purple1.png"), /* 4: 【右中央】 */
    url("../../images/bg-circle-purple2.png");   /* 5: 【右下】 */
    
  background-repeat: no-repeat; /* 水玉が格子状に繰り返さないようにする */
  
  /* それぞれの水玉のサイズ（横幅） */
  background-size: 
    200px auto, /* 1: 右上のピンク */
    160px auto, /* 2: 左上の黄色 */
    180px auto, /* 3: 左下の黄緑 */
    250px auto, /* 4: 右中央*/
    130px auto; /* 5: 右下のピンク */
    
  background-position: 
    right -30px top 50px,     /* 1: 右上のピンク */
    left -40px top 180px,     /* 2: 左上 */
    left 5% bottom 120px,     /* 3: 左下 */
    right -1% top 50%,       /* 4: 右中央 */
    right 8% bottom 80px;     /* 5: 右下 */
}


/* 全体のコンテンツ最大幅を 960px に指定 */
.people-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- タイトル部分 --- */
.people-title-wrap {
  display: flex;
  position: relative; /* 縦書きPEOPLEの基準点 */
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 30px;
}

/* 縦書きの「PEOPLE」 */
.people-lead {
  font-family: 'Poppins', sans-serif;
  writing-mode: vertical-rl;
  font-size: 14px;
  color: #7FC2DD;
  letter-spacing: 0.2em;
  padding-top: 100px;

  position: absolute;
  top: 0;
  left: -100px; /* 左外側へはみ出させる */

   /* アニメーション前の状態：少し下に下げて透明に */
  transform: translateY(20px);
  opacity: 0;
  transition: transform 1.2s ease-out, opacity 1.2s ease-out;

}

/* クラスがついたらフワーッと浮き出る */
.people-lead.is-animated {
  transform: translateY(0);
  opacity: 1;
}

/* PEOPLEの上にある細い縦線 */
.people-lead::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 0; /* アニメーション前は線の高さを0に */
  background-color: #7FC2DD;

   /* 線の伸びるスピード（文字より少し遅れて動き出すように delay を設定） */
  transition: height 1s ease-out 0.4s;
}

/* クラスがついたら上の線がスーッと80pxに伸びる */
.people-lead.is-animated::before {
  height: 80px;
}



/* 日本語の「メンバー紹介」タイトル */
.people-title {
  font-size: 32px;
  color: #036A96;
  font-weight: 700;
}

/* リード文 */
.people-section-desc {
  font-size: 15px;
  color: #443C30;
  line-height: 1.8;
  margin-bottom: 60px;
}

.people-section-desc span { 
  display: block;
}

/* --- 2列×2段のカード配置 --- */
.people-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 2等分 */
  gap: 40px 30px; /* 縦の隙間40px、横の隙間30px */
  margin-bottom: 60px;
}

/* メンバーカード単体 */
.people-card {
  display: flex;
  flex-direction: column;
}


/* 画像とコメントを包むエリア（親枠に角丸とoverflowを入れる） */
.people-card__image-wrap {
  position: relative; 
  width: 100%;
  height: 260px; 
  margin-bottom: 20px;
  border-radius: 0 60px 0 60px; 
  overflow: hidden;            
  display: block;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* メンバー写真の画像本体 */
.people-grid .people-card__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease; 
  /* border-radius は削除 */
}


.people-card__image-wrap img {
  width: 100%;
  height: 100%;
  border-radius: 0 60px 0 60px; 
  object-fit: cover;   /* 画像が荒くならない*/
}

/* 写真の上のコメントリボン */
.people-card__comment {
  position: absolute;
  left: 20px;
  bottom: 20px;
}

/* コメントの背景付き白文字（マーカー風） */
.people-card__comment span {
  display: inline-block;
  background-color: rgba(255, 255, 255, 0.9); /* 白の少し透明背景 */
  color: #036A96; 
  font-size: 16px;
  font-weight: 700;
  padding: 4px 8px;
  margin-bottom: 4px; /* 2行の隙間 */
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.05);
}

/* 役職テキスト */
.people-card__role {
  font-size: 13px;
  color: #443C30;
  margin-bottom: 6px;
}

/* 名前テキスト */
.people-card__name {
  font-size: 16px;
  font-weight: 700;
  color: #443C30;
}

/* --- 下部のボタン --- */
.people-btn-wrap {
  text-align: center;
  margin-top: 60px;
}

.people-btn {
  display: inline-block;
  border: 1px solid #7FC2DD;
  color: #036A96;
  text-decoration: none;
  padding: 15px 60px;
  border-radius: 30px; 
  font-size: 15px;
  font-weight: 500;
  background-color: #FCFDFC;
  box-shadow: 0 4px 10px rgba(127, 194, 221, 0.15);
  transition: all 0.3s ease;
}

.people-btn:hover {
  background-color: #7FC2DD;
  color: #ffffff;
}


/* メンバー写真の画像本体とアニメーション */
  .people-grid .people-card__image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s ease; 
  }


  /* マウスが乗っていないときの基本設定 */
.people-card__image-wrap {
    display: block;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* マウスが乗った（ホバーした）ときの変化 */
.people-card__image-wrap:hover {
    transform: translateY(-5px); /* ちょっとだけ上に浮き上がる */
    box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* 影が濃くなって浮いて見える */
}

  /* メンバーカード内のテキストのリンク下線を強制オフにする */
.people-card,
.people-card:hover {
  text-decoration: none;
  color: inherit ;
}
.people-card__role,
.people-card__name {
  text-decoration: none;
  color: inherit ;
}


/* -----------------------------------------------
  MARK: 募集職種
------------------------------------------------- */
.careers {
  padding: 100px 0;
  background-color: #FCFDFC;
  position: relative; /* 背景の配置基準 */
  z-index: 1;         /* 重なり順のバグを防ぐ */
  
  background-image: 
    url("../../images/dot_water_yellow.png"), /* 1: 【右側・上】右肩下がりの水玉 */
    url("../../images/kirakira_yellow.png"); /* 2: 【右側・下】右肩下がりの水玉 */
    
  background-repeat: no-repeat;
  
  background-size: 
    400px auto, /* 1: 右上の水玉 */
    400px auto;/* 2: 右下の水玉 */
    
  background-position: 
    right -30px top 50px,     /* 1: 右側・上 */
    right 4% bottom -1%;    /* 2: 右側・下 */
} 


/* --------------------------------------
 * 前のセクションへはみ出させる水玉（左上のキラキラ黄色）
 * ----------------------------------- */
.careers::before {
  content: "";
  position: absolute;
  
  /* ここで「.careers」の上端を飛び越えて、上のセクションに引き上げ */
  top: -200px;             
  left: -150px;             /* 左端も少し画面外にはみ出す */
  
  /*画像の設定（サイズはこれまでの700px相当の領域を確保） */
  width: 700px;             
  height: 700px;
  background-image: url("../../images/kirakira_yellow.png");
  background-size: contain;
  background-repeat: no-repeat;
  
  /* 重ね順（他のセクションの背景より手前、かつ文字やボタンの邪魔をしない最背面） */
  z-index: -1; 
  pointer-events: none;     /* クリックや選択を邪魔しないようにする */
}


/* 全体のコンテンツ最大幅を 960px に指定 */
.careers-container {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 20px;
}

/* --- タイトル部分 --- */
.careers-title-wrap {
  display: flex;
  position: relative; /* 縦書きCAREERSの基準点 */
  align-items: flex-start;
  gap: 20px;
  margin-bottom: 30px;
}

/* 縦書きの「CAREERS」 */
.careers-lead {
  font-family: 'Poppins', sans-serif;
  writing-mode: vertical-rl;
  font-size: 14px;
  color: #7FC2DD;
  letter-spacing: 0.2em;
  padding-top: 100px;

  position: absolute;
  top: 0;
  left: -100px; /* 左外側へはみ出させる */

    /* アニメーション前の状態：少し下に下げて透明に */
  transform: translateY(20px);
  opacity: 0;
  transition: transform 1.2s ease-out, opacity 1.2s ease-out;
}

/* クラスがついたらフワーッと浮き出る */
.careers-lead.is-animated {
  transform: translateY(0);
  opacity: 1;
}


/* CAREERSの上にある細い縦線 */
.careers-lead::before {
  content: "";
  position: absolute;
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 0; 
  background-color: #7FC2DD;

  /* 線の伸びるスピード（文字より少し遅れて動き出すように delay を設定） */
  transition: height 1s ease-out 0.4s;
}

/* クラスがついたら上の線がスーッと80pxに伸びる */
.careers-lead.is-animated::before {
  height: 80px;
}


/* 日本語の「募集職種」タイトル */
.careers-title {
  font-size: 32px;
  color: #036A96;
  font-weight: 700;
}

/* リード文 */
.careers-section-desc {
  font-size: 15px;
  color: #443C30;
  line-height: 1.8;
  margin-bottom: 60px;
}

.careers-section-desc span { 
  display: block;
}

/* --- 職種カードの配置（2列グリッド） --- */
.careers-grid {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 綺麗に半分ずつ2列に並べる */
  gap: 24px 30px; /* 縦の隙間24px、横の隙間30px */
  margin-bottom: 60px;
}



/* ==========================================
   職種カード単体（クリックできるリンク型）
   ========================================== */
.careers-card {
  display: flex;
  align-items: center;
  justify-content: space-between; /* 文字エリアと矢印を両端に離す */
  background-color: #FCFDFC;
  padding: 24px 32px;
  text-decoration: none; /* リンクの下線を消す */

  
  /* 左側の細い縦線 */
  border-left: 4px solid #E8D39B; 
  /* 周りのうっすらとしたシャドウ */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.04);
  
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}


/* カード全体をホバーした時の動き */
.careers-card:hover {
  transform: translateY(-3px); /* カードが少し上にふわっと浮き上がる */
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08); /* 影を少し濃くする */
}


/* ==========================================
   カード内のテキスト・パーツ設定
   ========================================== */
/* カード内のテキストを包む枠 */
.careers-card__text-wrap {
  display: flex;
  flex-direction: column;
  gap: 4px;
}


/* 職種名（h3） */
.careers-card__title {
  font-size: 18px;
  font-weight: 700;
  color: #443C30;
}

/* 英語のサブテキスト */
.careers-card__sub {
  font-size: 11px;
  color: #A0988E; 
  font-family: 'Poppins', sans-serif;
}



/* 右側の矢印画像（＞）の基本設定 */
.careers-card__arrow {
  display: inline-block; /* アニメーションを効かせるために必須 */
  width: 16px;           /* デザインに合わせてサイズ調整 */
  height: auto;
  transition: transform 0.3s ease; /* 0.3秒かけて動く設定 */
}


/* カードにマウスが乗ったとき、中の「矢印」を連動させて右にフワッと動かす（4pxに統一） */
.careers-card:hover .careers-card__arrow {
  transform: translateX(12px); /* カードの浮き上がりに合わせて4px右へ移動 */
}


/* --- 下部のボタン --- */
.careers-btn-wrap {
  text-align: center;
  margin-top: 60px;
}

.careers-btn {
  display: inline-block;
  border: 1px solid #E8D39B; /*  */
  color: #443C30;
  text-decoration: none;
  padding: 15px 80px; /* 横幅を少し広めに */
  border-radius: 30px; 
  font-size: 15px;
  font-weight: 500;
  background-color: #FCFDFC;
  box-shadow: 0 4px 10px rgba(232, 211, 155, 0.15);
  transition: all 0.3s ease;
}

.careers-btn:hover {
  background-color: #E8D39B;
  color: #ffffff;
}

/* -----------------------------------------------
  MARK:エントリーメッセージ
------------------------------------------------- */
.entry-message {
  padding: 0; /* 画面半分レイアウトのため上下パディングは0 */
  background-color: #ffffff;
  width: 100%;
  
  /* overflow: hidden のままだとはみ出した葉っぱが消えてしまうので、
     横スクロールだけを防ぐ「overflow-x: clip」または「overflow-x: hidden」にする */
  overflow-x: clip; 
  position: relative; /* 念のため背景の基準点として */
  z-index: 1;

  background-image: 
    url("../../images/leaf_water1.png"),  /* 1: 左上 */
    url("../../images/leaf_water2.png"); /* 2: 右下　右側の葉っぱ（最後はセミコロン） */
    
  background-repeat: no-repeat;
  
  /* それぞれのサイズ */
  background-size: 
    400px auto, /* 1: 左側の葉っぱ */
    220px auto; /* 2: 右側の葉っぱ（最後はセミコロン） */
    
  background-position: 
    left -8% top -10%,   /* 1: 左側 */
    left 45% bottom 20%;  /* 2: 右側（最後はセミコロン） */
}

/* 全体を画面いっぱいに広げる */
.entry-message-container {
  max-width: 100%;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center; /* 左右のパーツの縦の中心を揃える */
  gap: 0; 
  /* 背景画像がテキストや画像の下に潜り込めるように設定 */
  position: relative;
  z-index: 1;
}

/* 左側：テキストコンテンツ枠（画面の左半分：50%） */
.entry-message__content {
  width: 50%; 
  /* 他のセクションの960pxの枠と左端をぴったり揃える */
  padding-left: calc((100vw - 960px) / 2 + 20px); 
  padding-right: 60px; /* 画像との間のゆったりした余白 */
  padding-top: 80px;   /* セクション内の上下の余白 */
  padding-bottom: 100px;
  box-sizing: border-box;
  
  /* 背景よりテキストが手前に来るようにして、かつ透明にすることで背景を透かす */
  position: relative;
  z-index: 2;
  background: transparent; 
} 



/* キャッチコピー（その想いが、未来を包む力になる） */
.entry-message__catch {
  font-size: 36px;
  font-weight: 700;
  color: #036A96;
  line-height: 1.5;
  margin-bottom: 30px;

  /* --- 滑らかな出現アニメーションの設定 --- */
  /* マスクのサイズを大きくして左側に隠しておく */
  -webkit-mask-image: linear-gradient(to right, #000 0%, #000 33%, transparent 66%, transparent 100%);
  mask-image: linear-gradient(to right, #000 0%, #000 33%, transparent 66%, transparent 100%);
  -webkit-mask-size: 300% 100%;
  mask-size: 300% 100%;
  -webkit-mask-position: 100% 0;
  mask-position: 100% 0;

}

/* JSでこのクラスがついたらアニメーションを開始する */
.entry-message__catch.is-animated {
  animation: smoothReveal 2s ease-out forwards;
}


/* サブリード（TSUTSUMUで、あなたらしく働きませんか） */
.entry-message__lead {
  font-size: 16px;
  font-weight: 500;
  color: #036A96;
  letter-spacing: 0.05em;
  margin-bottom: 40px;
}

/* エントリーボタンの親枠 */
.entry-message__btn-wrap {
  text-align: left;
}


/* エントリーボタン */
.entry-message__btn {
  display: inline-block;
  background-color: #256699; 
  color: #ffffff;
  text-decoration: none;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.2em; 
  padding: 16px 70px; 
  border-radius: 30px; 
  box-shadow: 0 6px 20px rgba(37, 102, 153, 0.3); 
  transition: all 0.3s ease;
}


/* エントリーボタンをホバーしたとき */
.entry-message__btn:hover {
  background-color: #1d527c;
  transform: translateY(2px); 
  box-shadow: 0 3px 10px rgba(37, 102, 153, 0.2);
}


/* 右側：画像エリア */
.entry-message__image-wrap {
  width: 50%; 
  height: 560px; 
  overflow: hidden;
  /* 右半分は画像が乗るため、葉っぱを下に隠すか、透過させたい場合は z-index を調整*/
  position: relative;
  z-index: 2;
}


.entry-message__image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover; 
}

/* -----------------------------------------------
  MARK:フッター
------------------------------------------------- */

.footer {
  background-color: #fcfdfc; 
  border-top: 1px solid #f0f0f0; /* メッセージエリアとの薄い境界線 */
  padding: 60px 0;
  width: 100%;
}


.footer-container {
  display: flex;
  justify-content: space-between; /* 左のブロックと右のナビを両端に分ける */
  align-items: center;           /* 上下中央揃え */
  max-width: 1200px;             /* サイトの共通幅に合わせる */
  margin: 0 auto;
  padding: 0 40px;
}

/* --- 左側（ロゴ＆コピーライト） --- */
.footer-left {
  display: flex;
  flex-direction: column;
  align-items: flex-start;       /* 左揃え */
  gap: 12px;
}

.footer-logo img {
  width: 180px;                  /* ロゴ画像の横幅 */
  height: auto;
  display: block;
}


.footer__copyright {
  font-size: 11px;
  color: #036A96;
  letter-spacing: 0.05em;
  margin: 0;
}


/* --- 右側（ナビゲーション） --- */
.footer-nav__list {
  display: flex;
  flex-direction: row;           /* PCではメニューを横並びにする */
  align-items: center;
  gap: 60px;                     /* メニューごとの横の間隔 */
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-nav__list a {
  text-decoration: none;
  font-size: 14px;
  color: #036A96;
  font-weight: 500;
  transition: opacity 0.2s ease;
}


.footer-nav__list a:hover {
  opacity: 0.7;
}


/* ===============================================
  MARK:アニメーション対象の初期状態（最初は透明で30px下に下げる）
================================================= */

.about-title-wrap, .about-img, .about-p-lead, .about-p-sub, .about-btn-wrap,
.works-title-wrap, .works-section-desc, .works-card,
.workplace-title-wrap, .workplace-section-desc, .workplace-item, .workplace-btn-wrap,
.people-title-wrap, .people-section-desc, .people-card, .people-btn-wrap,
.careers-title-wrap, .careers-section-desc, .careers-card, .careers-btn-wrap {
  
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  will-change: opacity, transform;
}


#about .is-animated,
#works .is-animated,
#workplace .is-animated,
#people .is-animated,
#careers .is-animated {
  opacity: 1;
  transform: translateY(0);
}


/* ===============================================
  MARK:レスポンシブ
================================================= */

/* 横並びのナビを保てるよう、中間幅では余白を調整する */
.nav-list a,
.header-icon .corporate-link { white-space: nowrap; }
.header-logo { flex-shrink: 0; }
@media screen and (min-width: 901px) and (max-width: 1200px) {
  .site-header { padding: 20px 24px; gap: 16px; }
  .logo-image { height: 24px; }
  .logo-text-sub { font-size: 10px; margin-left: 10px; margin-top: 10px; }
  .header-nav { margin-right: 0; }
  .nav-list { gap: 14px; }
  .nav-list a, .header-icon .corporate-link { font-size: 13px; }
}

/* タブレットからハンバーガーメニューに切り替える */
@media screen and (max-width: 900px) {
/* ===============================================
  MARK: ヘッダー・ボタンSPの基本設定
  ================================================= */
  .site-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    height: 72px;       /* ヘッダーの高さを72pxに固定 */
    padding: 0 20px;    /* 左右余白20px */
    box-sizing: border-box; /* 高さにpaddingを含める設定 */
    background-color: #FCFDFC; /* スクロール時に後ろのコンテンツが透けないように背景色を指定 */
  }
  

  /* --- スマホ用のロゴサイズ調整 --- */
  .logo-image {
    height: 24px; 
    width: auto;
  }

  /* 「RECRUIT」の文字サイズと位置もロゴに合わせて */
  .logo-text-sub {
    font-size: 10px;  
    margin-left: 10px; 
    margin-top: 10px;  
  }


  /* 右端アイコンはスマホでは非表示 */
  .header-icon {
    display: none;
  }


  /* ハンバーガーメニュー全体（24px × 24px ） */
  .menu-btn {
    display: flex;
    align-items: center;
    justify-content: center; /* 24pxの枠内の真ん中に線を配置 */
    width: 24px;   /* 全体の横幅24px */
    height: 24px;  /* 全体の高さ24px */
    position: relative;
    cursor: pointer;
    z-index: 100; /* ❌を白い画面より前に出すために 10 から 100 に変更 */
  }
  
  /* 3本線共通のベーススタイル（太さ2px、線の長さ20px） */
  .menu-btn::before,
  .menu-btn::after,
  .menu-btn span {
    content: "";
    position: absolute;
    left: 2px;         /* 24pxの枠内で長さ20pxを中央寄せにするため、左に2px余白 */
    width: 20px;      
    height: 2px;      
    background-color: #036A96;
    transition: all 0.3s ease; /* アニメーションを滑らかにする設定 */
  }

  /* 線の間隔を「6px」にするための位置計算 */
  .menu-btn span {
    top: 11px; /* 真ん中の線 */
  }

  .menu-btn::before {
    top: 3px;  /* 上の線 */
  }

  .menu-btn::after {
    top: 19px; /* 下の線 */
  }

  /* ===============================================
    MARK: ハンバーガーメニューが「×」になるときの動き
    （必ず通常の三本線の設定より下に書く！）
  ================================================= */
  /* 真ん中の線（span）を消す */
  .menu-btn.is-active span,
  body.is-menu-open .menu-btn span {
    opacity: 0;
    left: -20px;
  }

  /* 上の線（before）を中央に引き下げて45度回転 */
  .menu-btn.is-active::before,
  body.is-menu-open .menu-btn::before {
    top: 11px; 
    transform: rotate(45deg);
  }

  /* 下の線（after）を中央に引き上げてマイナス45度回転 */
  .menu-btn.is-active::after,
  body.is-menu-open .menu-btn::after {
    top: 11px; 
    transform: rotate(-45deg);
  }


   /* ===============================================
    MARK: ロゴ・ナビゲーションメニューSP
  ================================================= */

/* --- スマホ用ナビゲーションメニューの土台 --- */
  .header-nav {
    display: none; /* 初期状態は非表示（is-openクラスで開閉） */
    right:0;
    position: fixed;
    top: 72px;          /* ヘッダーの高さ(72px)の下にぴったり合わせる */
    width: 60vw;        /* 画面幅の70%にする */
    height: auto;       /* 縦幅は画面いっぱいではなく、中身に合わせる */
    max-height: calc(100vh - 92px); /* 画面からはみ出さないためのストッパー（ヘッダー分などを引く） */
    
    background: rgba(255, 255, 255, 0.9); /* 背景を少し透明にする） */
    border-radius: 20px ;         
    box-shadow: -8px 0 24px rgba(0, 0, 0, .12); 
    z-index: 90;               
    
    padding: 40px 24px; /* メニュー内の上下左右の余白 */
    overflow-y: auto;   /* 万が一メニューが増えても枠内でスクロールできるように */
    box-sizing: border-box;
  }

  /* --- メニューのリンク（文字）の並び替え --- */
  .nav-list {
    display: flex;
    flex-direction: column; 
    align-items: center;    
    justify-content: center;
    gap: 32px;              /* リンク同士の上下の間隔 */
    list-style: none;       
    padding: 0;
    margin: 0;
  }

  /* --- リンクの文字のデザイン --- */
  .nav-list li a {
    display: block;
    font-size: 14px;       
    font-weight: 500;
    color: #036A96;        
    text-decoration: none;
    padding: 8px 20px;   
  }


  /* これを入れていないと、PC用の非表示（display: none）が勝ってしまうことがあります */
  .nav-entry-btn-sp {
    display: block;
    width: 100%;
    text-align: center;
    margin-top: 24px;
  }


/* 青い横長ボタンのデザイン */
  li.nav-entry-btn-sp a {
    display: block; 
    width: 90%; 
    max-width: 300px; 
    margin: 0 auto; 
    
    background-color: #2F6998; 
    color: #FFF;              
    font-size: 16px;
    font-weight: 500;
    letter-spacing: 0.2em; 
    
    padding: 16px 0; 
    border-radius: 40px; 
    text-decoration: none;
    text-align: center;       
    
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
  }



  .mainvisual { margin-top: 72px; }
  .side-ctas { z-index: 900; }
}

/** -----------------------------------------------
  Smartphone :  画面の横幅が640pxまで
------------------------------------------------**/
@media screen and (max-width:640px){

  /* スマホの時だけ改行を発動させる */
  .sp-only {
    display: inline;
  }

/* スマホでは最初からすべて表示状態にするリセット設定 */
  .animate-lead {
    opacity: 1 ;
    transform: none ;
  }
  .animate-lead::before {
    height: 1px ; /* スマホは横線なので高さを1pxに固定 */
  }

  /* ===============================================
  MARK: メインビジュアルSP
================================================= */

  .mainvisual {
    background-image: url("../../images/mv-pc.jpg");
    height: 80vh;
    margin-top: 72px; /* ※実際のスマホ版ヘッダーの高さ（paddingやロゴの高さの合計）に合わせて数値を調整してください */
  }

  /* 画面幅がどれだけ広がっても、スマホ表示時は最大343pxの幅に収める */
  .mv-container {
    max-width: 343px; 
    margin: 0 auto;
    padding: 0;       
  }

  /* 文字全体を包むブロックの配置調整 */
  .mv-copy-wrap {
    top: 35px; /* 上からの位置をスマホ用に少し詰める */
    width: calc(100% - 32px); /* 左右に少し余白を持たせる */
  }

  /* メインコピー（世界をやさしさでつつむ。） */
  .mv-copy-main {
    font-size: 28px; /* スマホ画面に収まるサイズに縮小 */
    padding: 8px 16px;
    letter-spacing: 0.02em;

    width: fit-content; /* 文字の長さに幅を合わせる */
    max-width: 90%;     /* 画面からはみ出さないようにガード */
  }

  /* サブテキスト（TSUTSUMU採用サイト） */
  .mv-copy-sub {
    font-size: 14px; /* スマホ用に縮小 */
    padding: 6px 12px;
  }



  /* ===============================================
  MARK:追従するCTAをSPの時は消す
================================================= */
  /* ▼PC用の右側追従CTAをスマホでは消す ▼ */
  .side-ctas {
    display: none;
  }


  /* ===============================================
  MARK: 私たちについてSP
================================================= */
  .about {
    padding: 60px 0; /* 上下の余白をスマホ向けにコンパクトに */
    text-align: center; /* 中の要素をすべて中央揃え */
    
    /* 水玉背景の位置やサイズを調整 */
    background-size: 150px auto, 120px auto, 120px auto, 180px auto, 100px auto;
    background-position: 
      -30px -10px,
      right -8% top 5%,
      left 5% bottom 100px,
      right 1% top 48%,
      left -10px bottom 40%;
  }

  /* タイトル全体の枠のレイアウトを縦並び中央揃えにリセット */
  .about-title-wrap {
    display: block;
    margin-bottom: 40px;
  }
  
  /* 縦書きから横書き（中央寄せ）に変更 */
.about-lead {
  font-family: 'Poppins', sans-serif;
  writing-mode: horizontal-tb; /* 横書き */
  font-size: 14px;
  color: #7FC2DD;
  letter-spacing: 0.2em;
  
  display: flex;         
  align-items: center;          
  justify-content: center;      
  gap: 16px;                    /* 線と文字の間のスキマ */
  margin: 0 auto 15px;          /* 中央に寄せて、下の見出しとの隙間を作る */
} 

/* 縦線を、左側の「横線」に変身させる */
.about-lead::before {
  content: "";
  width: 60px;                  /* 横線の長さ */
  height: 1px;                  /* 横線の太さ */
  background-color: #7FC2DD;
}


.about-p-lead {
    display: block; /* スマホの時は塊ごと縦に並べる */
  }

.about-p-lead {
text-align: center; /* もっともっとやさしさで、の部分の文字が真ん中 */
  }

  /* 日本語の「私たちについて」見出し */
  .about-title {
    font-size: 24px; 
    padding-left: 0;
    text-align: center; 
  }

  /* 写真とテキストを包む枠 */
  .about-block {
    flex-direction: column; /* 横並び から 縦並び に変更 */
    gap: 30px;              /* 画像とテキストの間のスキマ */
    margin-bottom: 50px;    /* ブロックごとの間隔 */
  }

  /* 2つ目の「左右反転」していたブロックも、スマホでは上から下への縦並びに */
  .about-block--reverse {
    flex-direction: column; 
  }

  .about-text-content {
    width: 100%;
  }

  /* キャッチコピー */
  .about-p-lead {
    font-size: 16px;
    white-space: normal; /* PC用の1行固定を解除し、スマホ画面幅で改行 */
    margin-bottom: 20px;
    padding: 0 16px;     /* 画面端に文字がくっつかないように */
  }

  /* TSUTSUMUの改行 */
  .about-sub-chunk-sp{
    display: block;
  } 


  /* 説明文テキスト */
  .about-p-sub {
    font-size: 14px;
    line-height: 2.0; 
    padding: 0 16px;
  }

  /* 画像を包む枠（343pxの幅に合わせて中央寄せ） */
  .about-image-wrap {
    width: 100%;
    max-width: 343px; /* コンテンツ幅に固定 */
    margin: 0 auto;
  }

  .about-img {
    width: 100%;
    height: 260px; 
    border-radius: 50% / 50%; /* 綺麗な楕円形をキープ */
  }

  /* --- 下部のボタン --- */
  .about-btn-wrap {
    margin-top: 40px;
  }

  .about-btn {
    padding: 12px 50px; 
    font-size: 14px;
  }

  .about .about-title-wrap .about-lead {
    display: flex;     
    align-items: center;          
    justify-content: center;      
    gap: 16px;                    
    writing-mode: horizontal-tb;  
    
    position: relative; 
    top: auto;          
    left: auto;         
    
    padding-top: 0;               
    margin: 0 auto 15px; 
  }

  .about .about-title-wrap .about-lead::before {
    content: "";                  
    position: static;  
    transform: none;   
    width: 60px;       
    height: 1px;       
    background-color: #7FC2DD;
  }



  /* ===============================================
  MARK: 事業について　SP
================================================= */
/* ===============================================
    SP用（スマホ表示時）の水玉サイズ調整
================================================= */

  /* 1. background-image で配置している水玉のサイズを小さくする */
  .works {
    /* PC版の数値を全体的に小さく調整（必要に応じて数値を変更してください） */
    background-size: 
      100px auto,  /* 1: 黄緑（左上） ※PCの半分のサイズ */
      130px auto, /* 2: 黄緑（右上） */
      150px auto, /* 3: 黄緑（左中央） */
      125px auto, /* 4：黄緑（左下） */
      60px auto,  /* 5: ピンク（左下） */
      75px auto;  /* 6: ピンク（右下） */

    background-position: 
    -5% 5%,              /* 1: 黄緑（左上：タイトル「事業について」の左） */
    right -30px top 16%,   /* 2: 黄緑（右上） */
    left -8% bottom 50%,     /* 3: 黄緑（左中央：フォトブック事業の左） */
    left -4% bottom 0.01%,     /* 1番左下 */
    left -5% bottom 6%,    /* 4: ピンク（左下：ベビー用品事業の左側） */
    right 8% bottom 10%;   /* 5: ピンク（右下：コミュニティ事業の右下） */

    padding: 0;
    text-align: center;
  }

  /* 上に飛び出させている大きな水玉（::before）を小さくする */
  .works::before {
    width: 200px;  /* PC時の 400px から 200px へ縮小 */
    height: 200px;
    top: -30px;    /* サイズが小さくなった分、はみ出し量も少なく調整 */
    right: -20px;
  }
  

  /* カード全体の並び替えと余白調整 */
  .works-card {
    flex-direction: column-reverse; /* 縦並びにして上下ひっくり返す */
    background-color: transparent; /* 背景を透明にして一体感を出す */
    border: none; /* 外枠を消す */
    box-shadow: none; /* 外側の影を消す */
    display: flex;
  }

  .works-section-desc span {
  display: inline;
}

/* スマホだと左寄せにする */
  .works-section-desc{
  text-align: left;
  max-width: 280px; 
  margin: 0 auto 40px;
}


  /* 画像エリアを上に配置し、カード中央に寄せる */
  .works-card__image-wrap {
    width: 100%; /* 横幅いっぱいに広げる */
    max-width: 280px; 
    height: 280px; 
    margin: 0 auto; /* 中央寄せ */
  }

  /* 画像の下にくるテキスト情報エリア */
  .works-card__info {
    flex: none;
    width: 100%;
    max-width: 320px; 
    margin: 20px auto 0; /* 画像との間に20pxの隙間を作り中央寄せ */
    padding: 30px 20px 80px; /* 下側にボタン用の余白(80px)を多めに確保 */
    
    /* PC版のカードスタイルをこちらのテキストエリアに移植 */
    background-color: #FCFDFC;
    border: 1px solid #f0f0f0;
    /* 左側にデザインの黄色い縦線を入れる（PC版で別指定がない場合） */
    border-left: 4px solid #F2DF9A; 
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
  }


  /* 説明文の文字サイズと行間の微調整 */
  .works-card__text {
    font-size: 14px;
    line-height: 1.75;
    letter-spacing: 0.1em; /* PC版の0.4emはスマホだと広すぎるので調整 */
    margin-bottom: 0;
    text-align: left;
  }

  /* もっと見るボタンの位置を調整 */
  .works-card__btn {
    right: 50%;
    transform: translateX(50%); /* 右下ではなく中央配置にする */
    bottom: 24px;
    padding: 10px 40px; /* スマホでも押しやすいサイズに */
  }


  /* 見出しの包み箱を縦並びにして、完全に中央寄せにする */
  .works-title-wrap {
    display: flex;
    flex-direction: column; 
    align-items: center;    
    justify-content: center;
    width: 100%;
    margin-bottom: 24px;
  }


  /* WORKSの上の線を左側の「横線」に */
  .works .works-title-wrap .works-lead {
    padding-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    writing-mode: horizontal-tb;
    position: relative;
    top: auto;
    left: auto;
    margin: 0 auto 10px; 
  }

  .works .works-title-wrap .works-lead::before {
    content: "";
    position: static;
    transform: none;
    width: 60px;
    height: 1px;
    background-color: #7FC2DD;
  }


  /* ===============================================
  MARK: 働く環境SP
================================================= */

/* ===============================================
    SP用：WORKPLACEセクションの水玉サイズ調整
================================================= */
  .workplace {
    padding:0px ;
    text-align: center;
    /* PC版の数値を全体的に約半分に縮小 */
    background-size: 
      150px auto, /* 1: 左上 (PC: 300px) */
      110px auto, /* 2: 右上 (PC: 220px) */
      125px auto, /* 3: 左下 (PC: 250px) */
      70px auto;  /* 4: 右下 (PC: 140px) */
      
    /* サイズを小さくした分、画面の内側に入り込みすぎない */
    background-position: 
      -5% 0%,               /* 1: 左上 */
      right -20px top 10%,  /* 2: 右上 */
      left -5% bottom 0%,    /* 3: 左下 */
      right 0% bottom 10%;    /* 4: 右下 */
  }

  /*改行しない！ */
  .workplace-section-desc span,
  .workplace-item__text span {
    display: block; 
}


  .workplace-title-wrap {
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 24px;
  }

  .workplace-lead {
    padding-top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    writing-mode: horizontal-tb;
    position: relative;
    top: auto;
    left: auto;
    margin: 0 auto 10px;
  }

  .workplace-lead::before {
    content: "";
    position: static;
    transform: none;
    width: 60px;
    height: 1px;
    background-color: #7FC2DD;
  }

  .workplace-title {
    font-size: 24px;
    margin: 0;
    text-align: center;
  }

  /* 導入のリード文 */
  .workplace-section-desc {
    font-size: 14px;
    line-height: 1.8;
    padding: 0 20px;
    margin: 0 auto 40px;
    text-align:left;
    
  }

  .workplace-section-desc span {
    display: inline;
  }

  /* 3つの項目を包む大枠 */
  .workplace-list {
    display: flex;
    flex-direction: column; 
    align-items: center;    
    gap: 40px;         
    width: 100%;
    margin-bottom: 40px;
  }

  /* 各環境のアイテム */
  .workplace-item {
    width: 100%;
    max-width: 280px;       
    margin: 0 auto;         
    text-align: center;
  }

  /* アイコン画像の調整 */
  .workplace-item__icon-wrap img{
    width: 100px;                      
    height: 150px;
    margin: 0 ; 
    object-fit: contain;              
  }

  /* 各環境の小見出し */
  .workplace-item__title {
    font-size: 18px;
    color: #443C30;
    margin-bottom: 12px;
  }

  /* 説明文テキスト */
  .workplace-item__text {
    font-size: 14px;
    line-height: 1.45;
    color: #443C30;
    text-align: left;  
    word-break: keep-all; 
    overflow-wrap: break-word;          
  }



  /* ===============================================
    MARK:ギャラリーSP
  ================================================= */

  /* ▼ スライダーの画像（img）を指定します */
  .gallery-slider img {
    width:200px;     
  /*  縦横の比率を指定する */
    aspect-ratio: 1 / 1; 
    flex-shrink: 0;
  /*  画像を引き伸ばさず、枠に合わせて綺麗にトリミングする */
    object-fit: cover;
    height: auto;
}


  /* ===============================================
  MARK: メンバー紹介SP
================================================= */
  /* --------------------------------------
      PEOPLE セクションの水玉
  -------------------------------------- */
  .people {
    padding: 60px 0;
    text-align: center;
    /* PC版の数値を全体的に約半分に縮小 */
    background-size: 
      100px auto, /* 1: 右上のピンク (PC: 200px) */
      80px auto,  /* 2: 左上 (PC: 160px) */
      90px auto,  /* 3: 左下 (PC: 180px) */
      125px auto, /* 4: 右中央 (PC: 250px) */
      65px auto;  /* 5: 右下のピンク (PC: 130px) */
      
    /* 位置の微調整（画面中央に寄りすぎないよう） */
    background-position: 
      right -5% top 0%,     /* 1: 右上のピンク */
      left -1% top 3%,     /* 2: 左上 */
      left 0% bottom 25%,      /* 3: 左下 */
      right -5% top 50%,        /* 4: 右中央 */
      right 2% bottom 7%;     /* 5: 右下 */
  }

  /* PEOPLEの上の線を左側の「横線」 */
  .people-title-wrap {
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 24px;
  }

  .people-lead {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    writing-mode: horizontal-tb;
    position: relative;
    top: auto;
    left: auto;
    margin: 0 auto 10px;
    
    font-size: 14px; 
    letter-spacing: 0.2em;
    padding-top: 0; 
  }

  .people-lead::before {
    content: "";
    position: static;
    transform: none;
    width: 60px;
    height: 1px;
    background-color: #7FC2DD;
  }

  /* 日本語タイトル「メンバー紹介」 */
  .people-title {
    font-size: 24px;
    margin: 0;
    text-align: center;
  }

  /* 導入のリード文 */
  .people-section-desc {
    font-size: 14px;
    line-height: 1.8;
    padding: 0 20px;
    margin: 0 auto 40px;
    text-align: left;
  }

  .people-section-desc span{
    display: inline;
  }

  /* メンバー一覧の大枠（Grid）を縦1列に */
  .people-grid {
    display: flex;         
    flex-direction: column; 
    align-items: center;    
    gap: 50px;              
    width: 100%;
    margin-bottom: 50px;
  }


/* 各メンバーのカード */
  .people-card {
    width: 100%;
    max-width: 343px;       
    margin: 0 auto;         
    text-align: left;  
    
    display: flex;
    flex-direction: column;
    text-decoration: none; /* リンク特有の下線を消す */
    color: inherit;        /* 文字色が青などのリンク色になるのを防ぐ */

  }

    /* 肩書テキスト */
  .people-card__role {
    font-size: 13px;
    color: #443C30;
    margin-bottom: 5px;
    line-height: 1.5;
    text-align: left;
  }

  /* 名前テキスト */
  .people-card__name {
    font-size: 18px;
    font-weight: 700;
    color: #443C30;
    margin: 0;
    text-align: left;
  }


  /* メンバー写真の枠 */
  .people-card__image-wrap {
    width: 100%;
    position: relative;      
    height: 260px; 
    margin-bottom: 20px;
    
    /* ★追加：枠からはみ出た部分を切り取って隠す */
    overflow: hidden; 
    /* ★変更：imgに指定していた角丸を、この窓枠側に移動させる */
    border-radius: 0 60px 0 60px; 
}



  /* ===============================================
  MARK: 募集職種　SP
================================================= */

/* ===============================================
   SP用：CAREERS（募集職種）の水玉サイズ調整
================================================= */
.careers {
  padding: 60px 0;
  text-align: center;
  
  /* PC版の1枚目（水玉）を非表示にし、2枚目（キラキラ）だけ残す */
  background-image: 
    none, 
    url("../../images/kirakira_yellow.png");
    
  /* 400px から 200px に縮小 */
  background-size: 
    200px auto, 
    200px auto;
    
  /* サイズ変更に合わせて位置を微調整 */
  background-position: 
    right -15px top 30px, 
    right 0% bottom 0%;
}

/* --------------------------------------
 * 上のセクションへはみ出させるキラキラ（::before）の縮小
 * ----------------------------------- */
.careers::before {
  width: 350px;  /* PCの 700px から半分の 350px */
  height: 350px;
  top: -80px;   /* サイズに合わせてはみ出し量も調整 */
  left: -50px;
}


  /* CAREERSの上の線を左側の「横線」に */
  .careers-title-wrap {
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    width: 100%;
    margin-bottom: 24px;
  }

  .careers-lead {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 16px;
    writing-mode: horizontal-tb;
    position: relative;
    top: auto;
    left: auto;
    margin: 0 auto 10px;
    
    font-size: 14px;
    letter-spacing: 0.2em;
    padding-top: 0; 
  }

  .careers-lead::before {
    content: "";
    position: static;
    transform: none;
    width: 60px;
    height: 1px;
    background-color: #7FC2DD;
  }

  /* 日本語タイトル「募集職種」 */
  .careers-title {
    font-size: 24px;
    margin: 0;
    text-align: center;
  }

  /* 導入のリード文 */
  .careers-section-desc {
    font-size: 14px;
    line-height: 1.8;
    padding: 0 20px;
    margin: 0 auto 40px;
    text-align: left;
  }

  .careers-section-desc span { 
  display: inline;
}

  /* 2列グリッドを縦1列に切り替える */
  .careers-grid {
    grid-template-columns: 1fr;
    gap: 16px;                  
    width: 100%;
    max-width: 343px;            
    margin: 0 auto 40px;         
  }

  /* 各職種カードのスマホ調整 */
  .careers-card {
    padding: 20px 24px;          
  }

  /* 文字の開始位置を左に揃える */
  .careers-card .careers-card__text-wrap .careers-card__sub {
    text-align: left;
  }

  /* ===============================================
  MARK:エントリーメッセージSP
================================================= */

/* 葉っぱのサイズと位置をスマホ用に */
  .entry-message {
    background-size: 
      200px auto, /* 1: 左上の葉っぱ（PCの400pxから半減） */
      110px auto; /* 2: 右下の葉っぱ（PCの220pxから半減） */
      
    background-position: 
      left -12% top 1%,   /* 1: 左上の位置を微調整 */
      right 1% top 20%; /* 2: 右下の位置 */
  }

 /* 横並びを縦並びに切り替える */
  .entry-message .entry-message-container {
    flex-direction: column;
    height: auto;
  }

    /* テキストエリア */
  .entry-message .entry-message-container .entry-message__content {
    width: 100%;
    padding: 80px 20px 40px; 
    text-align: center;
  }


  .entry-message__image-wrap {
    width: 100%; /* 横幅いっぱい */
    height: 300px; /* スマホ画面に収まりの良い高さに調整 */
  }


  /* キャッチコピー */
  .entry-message .entry-message__content .entry-message__catch {
    font-size: 28px;
    margin-bottom: 24px;
  }


  /* リード文 */
  .entry-message .entry-message__content .entry-message__lead {
    font-size: 14px;
    margin-bottom: 30px;
  }


  /* ボタンの親枠 */
  .entry-message .entry-message__content .entry-message__btn-wrap {
    text-align: center;
  }
 

  /* ボタン自体 */
  .entry-message .entry-message__btn-wrap .entry-message__btn {
    padding: 14px 60px;
    font-size: 15px;
    width: 100%;
    max-width: 280px; 
    box-sizing: border-box;
  }


  /* 画像エリア */
  .entry-message .entry-message-container .entry-message__image-wrap {
    width: 100%;
    height: 360px; 
  }


  /* ===============================================
  MARK: フッター　SP
================================================= */
  .footer {
    padding: 40px 0;
  }

  .footer-container {
    padding: 0 20px;            /* 端の余白を狭める */
  }

  .footer-left {
    align-items: center;         /* スマホではロゴとコピーライトを中央揃えに */
  }

  .footer-logo img {
    width: 140px;                /* スマホ用にロゴを少し小さく調整 */
  }


.footer-nav__list {
    flex-direction: column;      /* スマホではメニューを縦並びにする */
    align-items: center;         /* 各テキスト自体を中央揃えに */
    gap: 16px;                   /* メニューごとの上下の間隔 */
  }

  .footer-nav__list a {
    font-size: 12px;
  }



  /* ===============================================
  MARK:縦線と英語見出しのアニメーション無効化
================================================= */

  /* is-animated が付いた場合もまとめて height を固定する */
  .animate-lead::before,
  .animate-lead.is-animated::before {
    height: 1px;
    transition: none;
  }


} /* メディアクエリ全体の閉じカッコ */







/* メニューの表示状態はクラスで管理し、画面幅の変更にも対応する */
.menu-btn { display: none; }
:focus-visible { outline: 3px solid #036A96; outline-offset: 5px; }
body.is-modal-open { overflow: hidden; }

/* 青いシャボン玉の Coming Soon モーダル */
.coming-soon {
  position: fixed;
  inset: 0;
  margin: auto;
  width: min(560px, calc(100% - 32px));
  max-height: calc(100dvh - 40px);
  padding: 0;
  border: 1px solid #dbeaf1;
  border-radius: 28px;
  color: #036A96;
  background: #fff url("../../images/soap_bubble_blue.jpg") center / cover no-repeat;
  box-shadow: 0 24px 80px rgba(16, 65, 90, .2);
  overflow-y: auto;
}
.coming-soon::backdrop { background: rgba(30, 62, 80, .38); backdrop-filter: blur(5px); }
.coming-soon__content { position: relative; padding: 76px 28px 52px; text-align: center; }
.coming-soon__close {
  position: absolute; top: 14px; right: 14px;
  width: 44px; height: 44px; border-radius: 50%;
  background: rgba(255, 255, 255, .85); font-size: 30px; line-height: 1;
}
.coming-soon__eyebrow { font-size: 11px; letter-spacing: .22em; margin-bottom: 18px; }
.coming-soon__title { font-size: clamp(30px, 7vw, 46px); font-weight: 500; letter-spacing: .04em; }
.coming-soon__description { margin-top: 24px; color: #443C30; font-size: 14px; line-height: 2; }
.coming-soon__button {
  margin-top: 32px; padding: 12px 48px; border-radius: 30px;
  background: #036A96; color: #fff; font-size: 14px;
}
.coming-soon__button:hover { background: #255a7b; }
@media screen and (max-width: 900px) {
  .menu-btn { display: flex; }
  .header-nav { margin: 0; }
  .header-nav.is-open { display: block; }
  section[id] { scroll-margin-top: 88px; }
}
@media screen and (max-width: 640px) {
  .coming-soon__content { padding: 68px 20px 40px; }
}