/* 全体リセット系（必要に応じて調整） */
*,
*::before,
*::after {
  box-sizing: border-box;
}

body {
  background-color: #ffffff;
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue",
    "Yu Gothic", YuGothic, "游ゴシック体", "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN",
    "Meiryo", sans-serif;
}

/* PCでは改行する */
.pc_br {
  display: inline;
}

/* SPでは改行しない */
@media (max-width: 768px) {
  .pc_br {
    display: none;
  }
}

/* PCでは改行しない */
.sp_br {
  display: none;
}

/* SPでは改行する */
@media (max-width: 768px) {
  .sp_br {
    display: inline;
  }
}


/* PAGE TOP ボタンのスタイル */
.page-top {
  position: fixed;
  right: -12px;
  bottom: 30px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: all 1s ease-in-out;
}

.page-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* ボタンのスタイル */
.btn-page-top {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent; /* 背景なし */
  padding: 12px;
  border-radius: 50%;
  text-decoration: none;
}

.btn-img {
  width: 110px; /* 画像サイズを調整 */
  height: auto;
  object-fit: contain;
  transition: all 0.3s ease; /* 画像のアニメーション */
}

@media (max-width: 768px){
	.page-top {
  position: fixed;
  right: -12px;
  bottom: 30px;
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateX(100%);
  transition: all 1s ease-in-out;
}

.page-top.show {
  opacity: 1;
  visibility: visible;
  transform: translateX(0);
}

/* ボタンのスタイル */
.btn-page-top {
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: transparent; /* 背景なし */
  padding: 12px;
  border-radius: 50%;
  text-decoration: none;
}
	
.btn-img {
  width: 90px; /* 画像サイズを調整 */
  height: auto;
  object-fit: contain;
  transition: all 0.3s ease; /* 画像のアニメーション */
}

}

@media (max-width: 420px){

}




/* アニメーションを制御 */
.page-top.show {
  animation: slideIn 1s ease-in-out forwards;
}

@keyframes slideIn {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(0);
  }
}



/* FV（ファーストビュー） */
.fv {
  position: relative;
width: 100%;
height: 700px;
background-image: url("../img/top_back.png");
background-size: cover;
background-position: bottom center; /* ここを変更 */
background-repeat: no-repeat;
	padding-top: 80px; /* ナビ高さ分の余白（必要に応じて調整） */
}

.typo_title{
	margin: 80px auto 0 auto;
	display: block;
	width: 380px;
}

/* =======================================
   Global Nav（PC：横並び / SP：ハンバーガー）
   - 新卒・中途ボタンは現状維持
======================================= */

/* 追従グローバルナビ */
.global-nav-wrapper {
  position: fixed;
  top: 25px;
  left: 0;
  width: 100%;
  z-index: 1000;
  padding: 0 16px;
  box-sizing: border-box;
}

:root{
  --nav-max: 1200px;
  --nav-pad-y: 18px;
  --nav-pad-x: 32px;
  --nav-gap: 32px;
  --nav-radius: 999px;

  --logo-w: 250px;

  --link-size: 15px;
  --link-gap: 25px;

  --cta-gap: 20px;

  --btn-pad-y: 10px;
  --btn-pad-x: 20px;
  --btn-size: 16px;
}

/* ナビ本体 */
.global-nav {
  max-width: var(--nav-max);
  margin: 0 auto;
  padding: var(--nav-pad-y) var(--nav-pad-x);
  background-color: #ffffff;
  border-radius: var(--nav-radius);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);

  display: flex;
  align-items: center;
  gap: var(--nav-gap);
}

/* ロゴ */
.logo-area a {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.logo-area img {
  display: block;
  width: var(--logo-w);
}
.logo-sub {
  margin-left: 8px;
  font-size: 12px;
  color: #666;
}

/* ---------------------------------------
   PCナビリンク（横並び）
   ※ SP用は nav-links--sp に分離するので混線しない
--------------------------------------- */
.nav-panel{
  display: flex;
  align-items: center;
  gap: var(--nav-gap);
  flex: 1;
  min-width: 0;
}

/* PCの nav-links（横並び） */
.nav-links{
  display: flex;
  list-style: none;
  margin: 0;
  padding: 0 0 0 45px;

  gap: 45px;
  flex: 1;
}

/* ✅ ここ重要：gapで管理するので margin-left は使わない */
.nav-links > li > a{
  text-decoration: none;
  font-size: var(--link-size);
  font-weight: 600;
  color: #23324c !important;
  transition: opacity 0.2s ease;

  position: relative; /* 下線用 */
  margin-left: 0;     /* ← 混線の元を排除 */
}

/* PC：下線アニメ */
.nav-links > li > a::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: -3px;
  width: 0%;
  height: 2px;
  background: #23324c;
  transition: width 0.3s ease;
}
.nav-links > li > a:hover::after{
  width: 100%;
}

/* CTAボタン（現状維持） */
.nav-cta {
  display: flex;
  gap: var(--cta-gap);
  flex: 0 0 auto;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  font-size: var(--btn-size);
  font-weight: 600;
  border-radius: 999px;
  text-decoration: none;
  border: 1px solid transparent;
  white-space: nowrap;
  transition: all 0.4s ease;
}

/* 新卒ボタン */
.btn-primary {
  background-color: #e06907;
  color: #ffffff;
}
.btn-primary:hover {
  background-color: #ffffff;
  color: #d15b0b;
  border: 1px solid #e06907;
}

/* 中途ボタン */
.btn-outline {
  background-color: #ffffff;
  color: #23324c;
  border: 1px solid #23324c !important;
}
.btn-outline:hover {
  background-color: #23324c;
  color: #ffffff;
}

/* ---------------------------------------
   ハンバーガー（JSなし）
--------------------------------------- */
.nav-toggle{
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}

.nav-hamburger{
  display: none; /* SPで表示 */
  margin-left: auto;
  width: 55px;
  height: 55px;
  border-radius: 50%;
  background: #23324c;
  color: #fff;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  gap: 10px;
  padding-top: 6px;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

.nav-hamburger__icon{
  position: relative;
  width: 22px;
  height: 2px;
  background: #fff;
  display: block;
}
.nav-hamburger__icon::before,
.nav-hamburger__icon::after{
  content:"";
  position: absolute;
  left: 0;
  width: 22px;
  height: 2px;
  background: #fff;
}
.nav-hamburger__icon::before{ top: -7px; }
.nav-hamburger__icon::after{ top: 7px; }

.nav-hamburger__text{
  font-size: 9px;
  font-weight: 700;
  line-height: 1;
}

/* overlay（SPで表示） */
.nav-overlay{
  display: none;
}

/* =======================================
   960px以下：SP動作
======================================= */
@media (max-width: 960px){

  .global-nav{
    padding: 14px 65px;
    gap: 20px;
    border-radius: 100px;
  }

  /*  PCの横並びリンクはSPでは使わない（SP専用 ul に置き換えているため） */
  /* nav-panel は“メニュー面”として固定表示 */
  .nav-panel{
    position: fixed;
    top: 105px;
    left: 16px;
    right: 16px;
    max-width: 85%;
    margin: 0 auto;
    padding: 18px 18px 20px;

    background: #fff;
    border-radius: 18px;
    box-shadow: 0 12px 28px rgba(0,0,0,.16);

    display: grid;
    gap: 14px;

    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
    z-index: 1100;
  }

  /* ハンバーガー表示 */
  .nav-hamburger{
    display: flex;
  }

  /*  SP用リンクリスト（事業を知る風） */
  .nav-links--sp{
    display: grid;
    gap: 0;
    margin: 0;
    padding: 4px 0;
    list-style: none;
  }
  .nav-links--sp li{
    border-bottom: 1px solid rgba(35,50,76,.12);
  }
  .nav-links--sp li:last-child{
    border-bottom: none;
  }

  .nav-links--sp li a{
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;

    padding: 30px 10px;
    border-radius: 12px;
    text-decoration: none;
    color: #23324c !important;

    font-size: 16px;
    font-weight: 700;
  }

  /* SP：PC用下線（a::after）は無効化 */
  .nav-links--sp li a::after{
    display: none !important;
  }

  /* テキスト下線アニメ（business-item-text相当） */
  .nav-links--sp .nav-sp-text{
    position: relative;
    display: inline-block;
  }
  .nav-links--sp .nav-sp-text::after{
    content:"";
    position: absolute;
    left: 0;
    bottom: -6px;
    width: 0;
    height: 2px;
    background: #23324c;
    transition: width .3s ease;
  }

  /* 丸矢印（business-item-icon相当） */
  .nav-links--sp .nav-sp-icon{
    position: relative;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: #23324c;
    border: 2px solid #23324c;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .3s ease;
    flex: 0 0 auto;
  }
  .nav-links--sp .nav-sp-icon::before{
    content:"";
    width: .5rem;
    height: .5rem;
    border-top: 2px solid #fff;
    border-right: 2px solid #fff;
    transform: rotate(45deg);
    transition: border-color .3s ease;
  }

  /* hover/active */
  .nav-links--sp li a:hover .nav-sp-text::after{
    width: 100%;
  }
  .nav-links--sp li a:hover .nav-sp-icon{
    background: #fff;
  }
  .nav-links--sp li a:hover .nav-sp-icon::before{
    border-top-color: #23324c;
    border-right-color: #23324c;
  }

  /* CTAはそのまま（見た目維持） */
  .nav-cta{
    width: 100%;
    display: flex;
    gap: 16px;
	  margin-bottom: 30px;
  }
  .nav-cta .btn{
    width: 100%;
    padding: 14px 0;
  }

  /* overlay */
  .nav-overlay{
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.25);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, visibility .25s ease;
    z-index: 1050;
  }

  /* 開閉 */
  .nav-toggle:checked ~ .nav-panel{
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav-toggle:checked ~ .nav-overlay{
    opacity: 1;
    visibility: visible;
  }

  /* ×表示 */
  .nav-toggle:checked + .nav-hamburger .nav-hamburger__icon{
    background: transparent;
  }
  .nav-toggle:checked + .nav-hamburger .nav-hamburger__icon::before{
    top: 0;
    transform: rotate(45deg);
  }
  .nav-toggle:checked + .nav-hamburger .nav-hamburger__icon::after{
    top: 0;
    transform: rotate(-45deg);
  }
}/* 960px以下閉じ */

/* =======================================
   768px以下：微調整（差分だけ）
======================================= */
@media (max-width: 768px){
	
	
	
	.logo-area img {
  display: block;
  width: 220px;
}
.logo-sub {
  margin-left: 8px;
  font-size: 12px;
  color: #666;
}

  .global-nav{
    padding: 14px 25px;   /* 960の 65px は狭い端末で効きすぎるので調整例 */
    border-radius: 100px;  /* 100px → 角丸を少し緩める例（好みでOK） */
  }

  .nav-panel{
    max-width: 95%;
    top: 96px;           /* 必要なら */
  }

  .nav-links--sp li a{
    padding: 25px 18px 25px 10px;  /* 30px は縦長になりすぎるので調整例 */
  }

  .nav-cta{
    flex-direction: column;
    gap: 20px;
    margin-bottom: 18px;
  }

  .nav-cta .btn{
    padding: 20px 0;
  }
	
	
	
}/* 768px以下閉じ */




/* ここから新css追加_260123 */


/* =========================
   FVキャラ：タブレット/スマホも位置＋大きさ調整できる版
   ========================= */

.fv { position: relative; overflow: hidden; }

.fv-characters{
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.fv-characters .chara{
  position: absolute;
  height: auto;
  display: block;
  max-width: none;
}

/* ---------------------------------------
  ① 基本サイズ（PC基準）
  - まずは “各キャラの基準clamp” を定義
  - 全体スケールは --fv-scale で管理
--------------------------------------- */
:root{
  --fv-scale: 1;        /* 全体倍率（PC） */
  --fv-scale-tab: .92;  /* タブレット全体倍率 */
  --fv-scale-sp:  .82;  /* スマホ全体倍率 */
}

/* PC（デフォルト）：各キャラの「基準サイズ」 */
.chara-01{ --base: clamp(90px, 11.5vw, 150px); }
.chara-02{ --base: clamp(120px, 15.5vw, 200px); }
.chara-03{ --base: clamp(80px,  9.5vw, 120px); }
.chara-04{ --base: clamp(80px,  8.5vw, 110px); }
.chara-05{ --base: clamp(80px,  9vw,  115px); }
.chara-06{ --base: clamp(90px,  10vw, 135px); }
.chara-07{ --base: clamp(110px, 12vw, 155px); }
.chara-08{ --base: clamp(90px,  10vw, 130px); }

/* PC：サイズ適用（個別補正0%） */
.fv-characters .chara{
  width: calc(var(--base) * var(--fv-scale) * (1 + var(--size-tweak, 0)));
}

/* ---------------------------------------
  ② PC：位置（あなたの元値を踏襲）
--------------------------------------- */
.chara-01{ left: 3%;  bottom: 10%; }
.chara-02{ left: 9%;  bottom: 40%; }
.chara-03{ left: 19%; bottom: 0%; }
.chara-04{ left: 34%; bottom: 0%; }
.chara-05{ left: 49%; bottom: 0%; }
.chara-06{ right: 25%; bottom: 0%; }
.chara-07{ right: 13%; bottom: 30%; }
.chara-08{ right: 5%;  bottom: 2%; }

/* ここで微調整したい場合：
.chara-02{ bottom: 38%; }
.chara-07{ right: 12%; }
*/

/* ---------------------------------------
  ③ タブレット：位置 + 大きさ（個別補正）
  - 全体は --fv-scale = --fv-scale-tab に変更
  - さらにキャラ毎に --size-tweak で微調整（例：-0.06 = 6%小さく）
--------------------------------------- */
@media (max-width: 1024px){
  :root{ --fv-scale: var(--fv-scale-tab); }

  /* 位置調整（必要なものだけ書く） */
  .chara-02{ bottom: 34%; left: 8%; }    /* 例：少し下げて左寄せ */
  .chara-07{ bottom: 26%; right: 12%; }  /* 例：少し下げて内側へ */

  /* 大きさ調整（必要なものだけ書く） */
  .chara-01{ --size-tweak: -0.02; } /* 2%小さく */
  .chara-02{ --size-tweak: -0.04; } /* 4%小さく */
  .chara-07{ --size-tweak: -0.03; }
  /* 他は未指定なら0%のまま */
}

/* ---------------------------------------
  ④ スマホ：位置 + 大きさ（個別補正）
  - 全体は --fv-scale = --fv-scale-sp に変更
  - あなたの元のSP位置をベースにして、さらに補正できる
--------------------------------------- */
@media (max-width: 768px){
  :root{ --fv-scale: var(--fv-scale-sp); }
	
	.fv-characters .chara-01,.fv-characters .chara-08,.fv-characters .chara-07{
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
		
.fv-characters .chara-02{ width: clamp(100px, 13.5vw, 150px); }
.fv-characters .chara-03{ width: clamp(70px, 13.5vw, 150px); }
.fv-characters .chara-04{ width: clamp(65px, 13.5vw, 150px); }
.fv-characters .chara-05{ width: clamp(70px, 13.5vw, 150px); }
.fv-characters .chara-06{ width: clamp(82px, 13.5vw, 150px); }

  
	
	.fv_typo .typo_title{
  margin: 70px auto 0 auto;
  width: 280px;
}
	
.fv {
  position: relative;
width: 100%;
height: 500px;
background-image: url("../img/top_back.png");
background-size: cover;
background-position: bottom center; /* ここを変更 */
background-repeat: no-repeat;
	
}

  /* 位置（元のSP値を踏襲 + 必要ならさらに調整） */
  
  .chara-02{ left: 1%;  top: 38%; }
  .chara-03{ left: 4%; bottom: 0; }
  .chara-04{ left: 28%; bottom: 0; }
  .chara-05{ left: 52%; bottom: 0; }
  .chara-06{ right: 5%; bottom: 0; }
  

  /* 大きさ：SPは被りやすいので、上段組だけ少し小さくする例 */
  .chara-02{ --size-tweak: -0.10; } /* 10%小さく */
  .chara-07{ --size-tweak: -0.08; } /* 8%小さく */

  /* 下段は少しだけ縮める例（必要なら） */
  .chara-03{ --size-tweak: -0.04; }
  .chara-04{ --size-tweak: -0.04; }
  .chara-05{ --size-tweak: -0.04; }
  .chara-06{ --size-tweak: -0.04; }
}

/* ---------------------------------------
  ⑤ 超小型：さらに詰めたい時（任意）
--------------------------------------- */
@media (max-width: 420px){
  :root{ --fv-scale: .74; }

  /* 上段をさらに小さく＆少し下げる例 */
  .chara-02{ bottom: 26%; --size-tweak: -0.14; }
  .chara-07{ bottom: 16%; --size-tweak: -0.12; }
}




/* =========================================================
   PC（基本スタイル）
========================================================= */

/* ------------------------------
   メインヒーロー（土台）
------------------------------ */
.main-hero {
  position: relative;
  padding: 60px 20px 0;
  max-width: 100%;
  margin: 0 auto;
}

/* ------------------------------
   テキストブロック
------------------------------ */
.main_text_blk {
  position: relative;
  text-align: center;
  margin: 80px 30px 40px;
  z-index: 5;
}

/* 見出し */
.main_text_blk .main_ttl {
  font-size: 35px;
  font-weight: 700;
  color: #23324c;
  line-height: 1.3;
}

.main_text_blk .main_ttl span {
  color: #ce205a;
}

/* サブテキスト */
.main_text_blk .main_sub {
  font-size: 18px;
  font-weight: 400;
  color: #23324c;

  margin-top: 25px;
  width: 680px;
  max-width: 90%;
  margin-left: auto;
  margin-right: auto;

  text-align: left;
  line-height: 1.9;
}

.main_text_blk .main_sub p {
  margin-bottom: 20px;
}

.main_text_blk .main_sub p:last-child {
  margin-bottom: 0;
}

/* ------------------------------
   メイン装飾（ふわふわ）
------------------------------ */
.main-decor {
  position: absolute;
  z-index: 1;
  animation: float 7s ease-in-out infinite;
}

.main-decor img {
  width: 100%;
  height: auto;
  display: block;
}

/* PC位置 */
.main-decor--01 { width: 60px; top: 30%; left: 0%; }
.main-decor--02 { width: 10px; top: 90%; left: 7%; }
.main-decor--03 { width: 30px; top: 105%; left: 15%; }
.main-decor--04 { width: 60px; top: 16%; right: 15%; }
.main-decor--05 { width: 10px; top: 45%; right: 19%; }
.main-decor--06 { width: 80px; top: 90%; right: 0%; }
.main-decor--07 { width: 10px; top: 140%; right: 15%; }

@keyframes float {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-12px); }
  100% { transform: translateY(0); }
}

/* =========================================================
   Growth セクション（PC）
========================================================= */
.growth {
  padding: 0;
}

.growth-visual {
  position: relative;
  width: min(100%, 950px);
  height: 460px;
  margin: 0 auto;
  overflow: visible;
}

/* 矢印背景 */
.growth-arrows {
  position: absolute;
  inset: 0;
  background-image: url("../img/main_arow.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: top center;
}

/* キャラ共通 */
.growth-chara {
  position: absolute;
  height: auto;
  pointer-events: none;
}

/* PC基準 */
.growth-chara--01 { width: 120px; left: 1%;  bottom: 0%; }
.growth-chara--02 { width: 140px; left: 13%; bottom: 14%; }
.growth-chara--03 { width: 200px; left: 29%; bottom: 1%; }
.growth-chara--04 { width: 180px; left: 36%; bottom: 40%; }
.growth-chara--05 { width: 125px; left: 52%; bottom: 0%; }
.growth-chara--06 { width: 120px; left: 67%; bottom: 3%; }
.growth-chara--07 { width: 140px; left: 84%; bottom: 0%; }

/* =========================================================
   Tablet（〜1024px）
========================================================= */
@media (max-width: 1024px) {

  .main_text_blk {
    margin: 60px 20px 40px;
  }

  .main_text_blk .main_ttl {
    font-size: 30px;
  }

  .main_text_blk .main_sub {
    font-size: 16px;
    width: 640px;
  }

  .growth {
    padding: 60px 16px;
  }

  .growth-visual {
    max-width: 760px;
    height: 420px;
  }

  /* キャラを少し縮小 */
  .growth-chara--01 { width: 105px; }
  .growth-chara--02 { width: 120px; }
  .growth-chara--03 { width: 170px; }
  .growth-chara--04 { width: 155px; }
  .growth-chara--05 { width: 110px; }
  .growth-chara--06 { width: 105px; }
  .growth-chara--07 { width: 120px; }
}

/* =========================================================
   SP（〜768px）
========================================================= */
@media (max-width: 768px) {

  .main-hero {
    padding: 0;
  }

  .main_text_blk {
  position: relative;
  text-align: center;
  margin: 40px 25px 40px 25px;
  z-index: 5;
}

/* 見出し */
.main_text_blk .main_ttl {
  font-size: 28px;
  font-weight: 700;
  color: #23324c;
  line-height: 1.4;
}

.main_text_blk .main_ttl span {
  color: #ce205a;
}

/* サブテキスト */
.main_text_blk .main_sub {
  font-size: 16px;
  font-weight: 400;
  color: #23324c;

  margin-top: 25px;
  width: 100%;
  max-width: 95%;
  margin-left: auto;
  margin-right: auto;

  text-align: left;
  line-height: 1.7;
}

.main_text_blk .main_sub p {
  margin-bottom: 15px;
}

.main_text_blk .main_sub p:last-child {
  margin-bottom: 0;
}

  /* 装飾は少し薄く */
  .main-decor {
    opacity: 0.85;
  }

  /* 装飾のSP位置 */
  .main-decor--01 {width: 6%; top: 3%; left: 0;}/* 左赤 */
  .main-decor--02 {width: 60%; top: 30%; left: 3%; }/* 削除 */
  .main-decor--03 {width: 6%; bottom: 20%; left: 5%;}
  .main-decor--04 {width: 8%; top: 0%; right: 5%;}
  .main-decor--05 {width: 60%; top: 22%; right: 8%;}/* 削除 */
  .main-decor--06 {width: 5%; bottom: 80%; right:0;}/* 右青 */
  .main-decor--07 {width: 5%; top: 26%; right: 4%; }/* 削除 */
	
	.main-decor--02,.main-decor--03,.main-decor--05,.main-decor--06,.main-decor--07{
		display: none;
	}

  .growth {
    padding: 0;
  }

  .growth-visual {
    width: 100%;
    height: 300px;
  }

  /* SP用：全体を下寄せ＆縮小 */
  .growth-chara--01,
  .growth-chara--02,
  .growth-chara--03,
  .growth-chara--04,
  .growth-chara--05,
  .growth-chara--06,
  .growth-chara--07 {
    bottom: 2%;
  }

  .growth-chara--01 { width: 75px; left: 0%; bottom: 0%; }/* ほいちゃん */
  .growth-chara--02 { width: 75px; left: 10%; bottom:35%; }/* OTA */
  .growth-chara--03 { width: 115px; left: 20%; bottom: 0%; }/* ひらの */
  .growth-chara--04 { width: 105px; left: 30%; bottom: 35%; }/* おの */
  .growth-chara--05 { width: 70px; left: 47%; bottom: 0%; }/* ゆうき */
  .growth-chara--06 { width: 70px; left: 63%; bottom: 10%; }/* ふじ */
  .growth-chara--07 { width: 85px; left: 79%; bottom: 0%; }/* はな */
}



/* =========================
   Our Industry セクション
   ========================= */

/* セクション全体 */
.section-industry {
  background-color: #fffce9;      /* 背景の薄いイエロー */
  padding: 60px 0 80px 0;
}

.industry-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
}

/* 見出し部分 */
.industry-heading {
  text-align: center;
  margin-bottom: 24px;
}

/* PNG タイトル画像 */
.industry-heading-img {
  width: 400px;          /* お好みで 340〜420px くらいに調整 */
  max-width: 90%;
  height: auto;
  display: block;
  margin: 0 auto 8px;    /* 下に少し余白 */
}

/* サブタイトル */
.industry-heading-ja {
  font-size: 18px;
	font-weight: bold;
  color: #23324c;
}

/* カード全体（外側の角丸ボックス） */
.industry-card {
  position: relative;
  max-width: 950px;
  margin: 30px auto 10px auto;
  border-radius: 25px;
  overflow: hidden;
}

/* 背景画像（差し替えOK） */
.industry-card-bg {
  width: 100%;
  height: 350px;  /* 背景エリアの高さ。画像に合わせて調整 */
  background-image: url("../img/top_our_industry.png");
  background-size: cover;
  background-position: center;
}

/* 中央の白カード */
.industry-card-content {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  cursor: pointer; /* 手のカーソルにする（任意） */
  width: 80%;
  max-width: 800px;
  padding: 20px 40px;

  background-color: #fff;
  border-radius: 25px;

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* タイトルテキスト */
.industry-card-title {
  font-size: 27px;
  font-weight: 700;
  color: #23324c;
}

/* =========================
   「もっと見る」ボタン
   ========================= */

.industry-button a {
  position: relative;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 10px 24px 10px 60px;

  font-family: "Noto Sans JP", "Noto Sans Japanese", sans-serif;
  line-height: 1.8;
  text-decoration: none;
  color: #23324c;
  font-weight: 500;

  transition: 0.3s ease-in-out;
  border-radius: 999px;
  overflow: hidden;
}

.industry-button a::after {
  content: "";
  position: absolute;
  display: block;
  top: 50%;
}

/* 矢印 
.industry-button a::before {
  width: 0.5rem;
  height: 0.5rem;
  left: 1.2rem;
  border-top: solid 2px #fff;
  border-right: solid 2px #fff;
  z-index: 2;
  transform: translateY(-50%) rotate(45deg);
  transition: all 0.3s;
}*/

/* 丸い背景 → ホバーで横に広がる 
.industry-button a::after {
  left: 0;
  background: #23324c;
  z-index: 1;
  width: 3rem;
  height: 3rem;
  border-radius: 4rem;
  transform: translateY(-50%);
  transition: all 0.5s;
}*/

.industry-button a span {
  position: relative;
  z-index: 3;
  /*transition: all 0.3s;*/
}

/* hover 時の変化 */
/* カード全体 or ボタンのどこに乗っても同じ動きにする */




 .industry-button{
	 display: flex;
    justify-content: flex-start;
  
  }

.industry-button a{
	text-align: left;
}

/* =========================
   Our Industry：レスポンシブ上書き
   ========================= */

/* ---------- Tablet（〜1024px） ---------- */
@media (max-width: 1024px) {

  .section-industry{
    padding: 50px 0 70px;
  }

  .industry-inner{
    max-width: 92%;
    padding: 0 16px;
  }

  /* タイトル画像少し縮小 */
  .industry-heading-img{
    width: 340px;
  }

  .industry-heading-ja{
    font-size: 16px;
  }

  .industry-card{
    max-width: 900px;
    border-radius: 22px;
    margin: 24px auto 10px;
  }

  /* 背景の高さを少し抑える */
  .industry-card-bg{
    height: 300px;
    background-position: center;
  }

  /* 白カードを少し幅広＆余白控えめ */
  .industry-card-content{
    width: 86%;
    max-width: 760px;
    padding: 18px 28px;
    gap: 18px;
    border-radius: 22px;
  }

  .industry-card-title{
    font-size: 24px;
  }

  /* ボタン余白も少し縮める */
  .industry-button a{
    padding: 10px 22px 10px 56px;
    font-size: 15px;
  }

  /* 丸背景 */
  .industry-button a::after{
    width: 2.8rem;
    height: 2.8rem;
  }
}


/* ---------- SP（〜768px） ---------- */
@media (max-width: 768px) {
	/* hoverで色が変わる演出を無効化（SPはhoverが不安定なので） */
  

  /* ボタンの見た目：左に紺色の丸＋白矢印を常時表示 */
  .industry-button a {
    justify-content: flex-start; /* 左寄せ */
    gap: 14px;
    padding: 14px 22px 14px 64px; /* 左に丸を置く余白 */
    color: #23324c;
  }

  .industry-button a::after {
    left: 8px;     /* 丸の位置 */
    right: auto;    /* 右寄せを殺す */
    width: 30px;
    height: 30px;
    background: #23324c; /* 紺丸固定 */
    border-radius: 999px;
    transform: translateY(-50%);
  }

  /* 
  .industry-button a::before {
    left: 28px;     
    width: 8px;
    height: 8px;
    border-top: solid 2px #fff;   
    border-right: solid 2px #fff; 
    transform: translateY(-50%) rotate(45deg);
  }*/

  .industry-button a span {
    color: #23324c; /* テキストは通常色固定 */
  }

  .section-industry{
    padding: 65px 0 65px;
  }

  .industry-inner{
    max-width: 94%;
    padding: 0 14px;
  }

  .industry-heading{
    margin-bottom: 18px;
  }

  .industry-heading-img{
    width: 300px!important;   /* SPでちょうど良いサイズ */
  }

  .industry-heading-ja{
    font-size: 15px;
	margin-top: 0!important;
  }

  .industry-card{
    max-width: 100%;
    border-radius: 15px;
    margin: 18px auto 8px;
  }

  /* 背景をさらに低く（SPで縦を食いすぎないように） */
  .industry-card-bg{
    height: 250px;
    background-position: center;
  }

  /* 白カード：縦積み（タイトル→ボタン）にして崩れ防止 */
  .industry-card-content{
    width: 90%;
    max-width: 520px;
    padding: 22px 18px;
    border-radius: 15px;

    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;

    /* 中央寄せは維持 */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
  }
	/* タイトルテキスト */
.industry-card-title {
	margin:7px 0 4px 0;
}

  .industry-button{
    display: flex;
    justify-content: center;
  }

  .industry-button a{
    padding: 14px 32px 14px 64px;
    font-size: 16px;
  }

  .industry-button a::after{
    width: 40px;
    height: 40px;
  }

  /*
  .industry-button a::before{
    left: 22px;
    width: 8px;
    height: 8px;
  }*/

  /* SPは hover が効かない端末も多いので、押しやすさ優先。
     hover演出はそのままでもOK（不要ならここで無効化も可） */
}


/* ---------- 小さめSP（〜390px） ---------- */
@media (max-width: 390px) {

  .industry-heading-img{
    width: 240px;
  }

  .industry-card-bg{
    height: 220px;
  }

  .industry-card-content{
    width: 92%;
    padding: 14px 16px;
  }

  .industry-card-title{
    font-size: 18px;
  }

  .industry-button a{
    font-size: 13px;
    padding: 11px 16px 11px 48px;
  }
}


/* =========================
   Our Business セクション（完全差し替え版）
   ========================= */

/* フェード速度（ここだけ触ればOK） */
:root{
  --visual-fade: 0.45s;
}

/* =========================
   セクション外枠（PC）
   ========================= */
.section-business {
  position: relative;
  background-color: #ffffff;
  padding: 80px 0 100px;
  overflow: hidden;
}

.business-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 10px;
}

/* =========================
   ふわふわ装飾（PC）
   ========================= */
.business-decor {
  position: absolute;
  z-index: 1;
  animation: businessFloat 8s ease-in-out infinite;
}

.business-decor img {
  width: 100%;
  height: auto;
  display: block;
}

/* 位置・サイズ（PC） */
.business-decor--01 {
  width: 80px;
  top: 15%;
  left: 0;
  animation-delay: 0s;
}
.business-decor--02 {
  width: 30px;
  top: 95%;
  left: 42px;
  animation-delay: 0.8s;
}
.business-decor--03 {
  width: 10px;
  top: 30%;
  right: 130px;
  animation-delay: 1.6s;
}
.business-decor--04 {
  width: 110px;
  bottom: -40px;
  right: -20px;
  animation-delay: 2.4s;
}

@keyframes businessFloat {
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* =========================
   メインレイアウト（PC）
   ========================= */
.business-main {
  margin-top: 50px;
  position: relative;
  z-index: 2;
  display: flex;
  gap: 80px;
  align-items: center;
}

/* =========================
   左側：画像（PC）
   ========================= */
.business-visual {
  flex: 0 0 44%;
  height: 320px;
  border-radius: 25px;
  position: relative;
  overflow: hidden;
}

/* 表示レイヤー（画像フェード） */
.business-visual::before {
  content: "";
  position: absolute;
  inset: 0;

  /* JSが --business-img を入れたらそれを優先。未指定なら初期画像 */
  background-image: var(--business-img, url("../img/top_saiyoukoukoku.png") );
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;

  opacity: 1;
  transition: opacity var(--visual-fade) ease;

  pointer-events: none;
}

/* フェードアウト用 */
.business-visual.is-fade::before {
  opacity: 0;
}

/* =========================
   右側：事業リスト（PC）
   ========================= */

/* アンカー位置（PC） */
#saiyoukoukoku,
#outsourcing,
#hp,
#movie,
#sns{
  scroll-margin-top: 140px;
}

.business-list {
  flex: 0 0 44%;
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* 各行全体 */
.business-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  text-decoration: none;
  color: #23324c;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}

/* テキスト＋下線アニメ */
.business-item-text {
  position: relative;
}

.business-item-text::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -6px;
  width: 0;
  height: 2px;
  background-color: #23324c;
  transition: width 0.3s ease;
}

/* 丸矢印 */
.business-item-icon {
  position: relative;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background-color: #23324c;
  border: 2px solid #23324c;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

/* 中の矢印 */
.business-item-icon::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
  transform: rotate(45deg);
  transition: border-color 0.3s ease;
}

/* hover */
.business-item:hover .business-item-text::after {
  width: 100%;
}

.business-item:hover .business-item-icon {
  background-color: #ffffff;
}

.business-item:hover .business-item-icon::before {
  border-top-color: #23324c;
  border-right-color: #23324c;
}

/* =========================
   Tablet（〜1024px）
   ========================= */
@media (max-width: 1024px) {

  .section-business{
    padding: 64px 0 84px;
  }

  .business-inner{
    padding: 0 16px;
  }

  .business-main{
    gap: 36px;
    margin-top: 40px;
  }

  .business-visual{
    flex: 0 0 48%;
    height: 300px;
    border-radius: 22px;
  }

  .business-list{
    flex: 1;
    gap: 20px;
  }

  .business-item{
    font-size: 16px;
    gap: 18px;
  }

  .business-item-icon{
    width: 30px;
    height: 30px;
  }

  .business-item-icon::before{
    width: 0.45rem;
    height: 0.45rem;
  }

  .business-decor--01{ top: 18%; left: -10px; }
  .business-decor--02{ top: 94%; left: 24px; }
  .business-decor--03{ top: 28%; right: 70px; }
  .business-decor--04{ bottom: -30px; right: -10px; }

  /* アンカー（タブレット） */
  #saiyoukoukoku,
  #outsourcing,
  #hp,
  #movie,
  #sns{
    scroll-margin-top: 150px;
  }
}

/* =========================
   Smartphone（〜768px）
   ========================= */
@media (max-width: 768px) {
	
	/* テキスト下線（疑似要素）を完全に消す */
  .business-item-text::after {
    content: none;
    width: 0;
    height: 0;
  }

  /* hoverしても下線が出ないように念押し */
  .business-item:hover .business-item-text::after {
    width: 0;
  }

  .section-business{
    padding: 65px 0 60px!important;
  }

  .business-inner{
    padding: 0 14px;
  }

  .business-main{
    flex-direction: column;
    gap: 22px;
    margin-top: 20px;
  }

  .business-visual{
    width: 95%;
    flex: none;
    height: 240px;
    border-radius: 15px;
  }

  .business-list{
    width: 95%;
    flex: none;
    gap: 18px;
  }

  /* タップしやすい余白 */
  .business-item{
    width: 100%;
    padding: 8px 0;
    font-size: 17px;
    gap: 16px;
  }

  .business-item-text::after{
    bottom: -5px;
  }

  .business-item-icon{
    width: 32px;
    height: 32px;
  }

  .business-item-icon::before{
    width: 0.5rem;
    height: 0.5rem;
  }

  .business-decor--01{ width: 25px; top: 6%; left: -5px; }
  .business-decor--02{ width: 25px; top: 95%; left: 15px; }
  .business-decor--03{ width: 9px; top: 14%; right: 33px; }
  .business-decor--04{ width: 2px; bottom: -50px; right: -18px; }
	
	.business-decor--02,.business-decor--03,.business-decor--04{
		display: none;
	}

  /* アンカー（スマホ） */
  #saiyoukoukoku,
  #outsourcing,
  #hp,
  #movie,
  #sns{
    scroll-margin-top: 160px;
  }
}

/* =========================
   Small Smartphone（〜480px）
   ========================= */
@media (max-width: 480px) {

  .section-business{
    padding: 46px 0 64px;
  }

  .business-inner{
    padding: 0 12px;
  }

  .business-visual{
    height: 210px;
  }

  .business-item{
    font-size: 15px;
  }

  .business-item-icon{
    width: 30px;
    height: 30px;
  }

  .business-item-icon::before{
    width: 0.45rem;
    height: 0.45rem;
  }

  .business-decor--01{ width: 62px; }
  .business-decor--04{ width: 100px; }
}




/* =========================
   Our Works セクション（完全差し替え版）
   ========================= */

/* ===== セクション全体（PC） ===== */

/* =========================
   Works：タイトル画像を <picture> で切替える用の補強
   ========================= */

/* picture をブロック化して、レイアウト崩れを防ぐ */
.works-heading-left picture{
  display: block;
}

/* picture内のimgは既存の .industry-heading-img をそのまま使うが、
   念のため block を保証しておく（余白のズレ防止） */
.works-heading-left picture .industry-heading-img{
  display: block;
}

.section-works{
  background-color: #f5fff9;  /* 淡いミント */
  padding: 70px 0 80px;
}

.works-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ===== 見出し（PC：左寄せ） ===== */
.works-heading-left{
  text-align: left;
  margin-bottom: 22px;
}

.works-heading-left .industry-heading-img{
  width: 340px;     /* PCのタイトル画像サイズ */
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 0 14px 0;
}

.works-heading-left .industry-heading-ja{
  font-size: 18px;
  font-weight: 700;
  color: #23324c;
  margin: 0;
  text-align: left;
}

/* ===== メインレイアウト（PC） ===== */
.works-content{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 56px;
}

/* 左側テキスト（PC） */
.works-text{
  flex: 0 0 44%;
}

.works-desc{
  font-size: 16px;
  line-height: 1.95;
  color: #23324c;
  margin: 0 0 28px 0;
}

/* 右側画像（PC） */
.works-visual{
  flex: 0 0 44%;
}

.works-visual img{
  width: 100%;
  height: auto;
  border-radius: 28px;
  display: block;
}

/* =========================
   Works専用「もっと見る」ボタン（PC）
   ※他セクションと干渉しないように works-button に分離
   ========================= */
.works-button a{
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: flex-start;

  padding: 11px 24px 11px 62px;
  min-height: 46px;

  font-family: "Noto Sans JP", sans-serif;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;

  color: #23324c;
  font-weight: 600;

  border-radius: 999px;
  overflow: hidden;

  transition: 0.3s ease-in-out;
}

/* 矢印 */
.works-button a::before{
  content: "";
  position: absolute;
  left: 1.2rem;
  top: 50%;
  transform: translateY(-50%) rotate(45deg);
  width: 0.5rem;
  height: 0.5rem;

  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;

  z-index: 2;
  transition: all 0.3s;
}

/* 丸背景 */
.works-button a::after{
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);

  width: 3rem;
  height: 3rem;

  background: #23324c;
  border-radius: 999px;

  z-index: 1;
  transition: all 0.5s;
}

.works-button a span{
  position: relative;
  z-index: 3;
  transition: color 0.3s;
}



/* =========================
   Tablet（〜1024px）
   ========================= */
@media (max-width: 1024px){

  .section-works{
    padding: 64px 0 72px;
  }

  .works-inner{
    padding: 0 18px;
  }

  .works-heading-left .industry-heading-img{
    width: 320px;
    margin-bottom: 12px;
  }

  .works-heading-left .industry-heading-ja{
    font-size: 17px;
  }

  .works-content{
    gap: 36px;
  }

  .works-text{
    flex: 0 0 48%;
  }

  .works-visual{
    flex: 0 0 48%;
  }

  .works-desc{
    font-size: 16px;
    margin-bottom: 22px;
  }

  .works-visual img{
    border-radius: 24px;
  }

  .works-button a{
    padding: 10px 22px 10px 58px;
    min-height: 44px;
    font-size: 15px;
  }

  .works-button a::after{
    width: 2.9rem;
    height: 2.9rem;
  }
}

/* =========================
   Our Works：Smartphone（〜768px）完全版（差し替え用 / !important 強制）
   ※ HTMLは <div class="industry-button works-button"> のままでOK
   ========================= */
@media (max-width: 768px){

  .section-works{
    padding: 65px 0 65px !important;
  }

  .works-inner{
    width: 95% !important;
    max-width: none !important;
    padding: 0 !important;
    margin: 0 auto !important;
  }

  /* 写真を上、見出し＋テキスト＋ボタンを下 */
  .works-content{
    flex-direction: column-reverse !important;
    gap: 24px !important;
  }

  .works-text,
  .works-visual{
    flex: 1 1 95% !important;
  }

  /* 写真エリア */
  .works-visual{
    width: 95% !important;
    margin: 0 auto !important;
  }

  .works-visual img{
    width: 100% !important;
    max-height: 240px !important;
    object-fit: cover !important;
    border-radius: 15px !important;
    display: block !important;
  }

  /* テキスト側 */
  .works-text{
    width: 95% !important;
    margin: 0 auto !important;
  }

  /* 見出し：中央寄せ */
  .works-heading-left{
    text-align: center !important;
    margin-bottom: 14px !important;
  }

  /* picture（タイトル画像切替）を中央寄せ */
  .works-heading-left picture{
    display: block !important;
    margin: 0 auto !important;
    width: fit-content !important; /* 未対応でもOK */
  }

  /* タイトル画像 */
  .works-heading-left .industry-heading-img{
    width: 260px !important;
    max-width: 95% !important;
    height: auto !important;
    display: block !important;
    margin: 18px auto 10px !important;
  }

  /* サブタイトル */
  .works-heading-left .industry-heading-ja{
    font-size: 16px !important;
    text-align: center !important;
    margin: 0 !important;
  }

  /* 説明文：左揃え（箱は中央） */
  .works-desc{
    width: 95% !important;
    font-size: 17px !important;
    line-height: 1.9 !important;
    text-align: left !important;
    margin: 0 auto 20px !important;
  }

  /* ==================================================
     Works：もっと見る（SPは Our Industry と同仕様に固定）
     ==================================================
     - 中央寄せ
     - 丸 40px / 矢印 8px / left位置も同じ
     - hover無効化（変化させない）
     ※ industry-button のSP指定よりも確実に勝つように !important
  */

  /* ボタン外枠：中央寄せ */
  .works-button{
    display: flex !important;
    justify-content: center !important;
  }

  /* a本体：Industry SPと同じパディング/サイズ感 */
  .works-button a{
    position: relative !important;
    display: inline-flex !important; /* industry-buttonのdisplay:flexより優先 */
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;

    padding: 14px 32px 14px 64px !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    line-height: 1.8 !important;
    text-decoration: none !important;
    color: #23324c !important;

    border-radius: 999px !important;
    overflow: hidden !important;

    transition: none !important; /* SPは演出オフ */
  }

  /* 丸（40px固定） */
  .works-button a::after{
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 0 !important;     /* Industryと同じ */
    right: auto !important;
    transform: translateY(-50%) !important;

    width: 40px !important;
    height: 40px !important;
    border-radius: 999px !important;
    background: #23324c !important;

    z-index: 1 !important;

    transition: none !important; /* SPは演出オフ */
  }

  /* 矢印（8px固定 / left:22px） */
  .works-button a::before{
    content: "" !important;
    position: absolute !important;
    top: 50% !important;
    left: 15px !important;
    transform: translateY(-50%) rotate(45deg) !important;

    width: 8px !important;
    height: 8px !important;
    border-top: 2px solid #fff !important;
    border-right: 2px solid #fff !important;

    z-index: 2 !important;

    transition: none !important; /* SPは演出オフ */
  }

  .works-button a span{
    position: relative !important;
    z-index: 3 !important;
    color: #23324c !important;
    transition: none !important;
  }

  

  /* iOSタップハイライト対策（任意、必要なら有効化） */
  /* .works-button a{ -webkit-tap-highlight-color: transparent !important; } */
}


/* =========================
   Small Smartphone（〜480px）
   ========================= */
@media (max-width: 480px){

  .section-works{
    padding: 48px 0 58px;
  }

  .works-heading-left .industry-heading-img{
    width: 250px;
  }

  .works-desc{
    font-size: 14.5px;
  }

  .works-button a{
    font-size: 14.5px;
    padding: 10px 20px 10px 56px;
    min-height: 44px;
  }

  .works-button a::before{
    left: 1.1rem;
  }

  .works-button a::after{
    width: 2.85rem;
    height: 2.85rem;
  }
}


/* =========================
   Profile セクション（完全版：SP768px調整＋装飾調整込み）
   ========================= */

/* =========================
   Profile：タイトル画像を <picture> で切替える用の補強
   ========================= */
.profile-heading-right picture{
  display: block;
}
.profile-heading-right picture .profile-heading-img{
  display: block;
}

/* =========================
   セクション全体（PC）
   ========================= */
.section-profile{
  position: relative;
  background-color: #ffffff;
  padding: 60px 0 80px;
  overflow: hidden;
}

.profile-inner{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* =========================
   メインレイアウト（PC：左画像＋右テキスト）
   ========================= */
.profile-content{
  position: relative;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 48px;
}

/* 左：画像（PC） */
.profile-visual{
  flex: 0 0 40%;
}

.profile-visual img{
  width: 100%;
  height: auto;
  display: block;
  border-radius: 32px;
}

/* 右：タイトル〜本文〜ボタン（PC） */
.profile-right{
  flex: 0 0 50%;
}

/* 見出し（PC：左寄せ） */
.profile-heading-right{
  text-align: left;
  margin-bottom: 20px;
}

.profile-heading-right .profile-heading-img{
  width: 300px;     /* PCタイトル画像サイズ */
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 0 15px 0;
}

.profile-heading-right .industry-heading-ja{
  margin: 4px 0 0 0;
  text-align: left;
}

/* 説明文（PC） */
.profile-desc{
  font-size: 16px;
  line-height: 1.9;
  color: #23324c;
  margin: 0 0 32px 0;
}

/* ボタン（既存 .industry-button を再利用） */
.profile-button{
  /* 追加したい余白があればここ */
}



/* =========================
   ふわふわ装飾（PC）
   ========================= */
.profile-decor{
  position: absolute;
  z-index: 1;
  animation: profileFloat 8s ease-in-out infinite;
}

.profile-decor img{
  width: 100%;
  height: auto;
  display: block;
}

/* 位置とサイズ（PCベース） */
.profile-decor--01{  /* 左側の六角形 */
  width: 30px;
  top: 45%;
  left: 0%;
  animation-delay: 0s;
}

.profile-decor--02{  /* 右寄りの三角 */
  width: 40px;
  top: 15%;
  right: 390px;
  animation-delay: 0.8s;
}

.profile-decor--03{  /* 右下ドット */
  width: 10px;
  bottom: 18%;
  right: 5%;
  animation-delay: 1.2s;
}

@keyframes profileFloat{
  0%   { transform: translateY(0); }
  50%  { transform: translateY(-10px); }
  100% { transform: translateY(0); }
}

/* =========================
   Tablet（〜900px）
   ========================= */
@media (max-width: 900px){

  .section-profile{
    padding: 56px 0 72px;
  }

  .profile-content{
    flex-direction: column;
    gap: 24px;
  }

  .profile-visual,
  .profile-right{
    flex: 1 1 100%;
    width: 100%;
  }

  .profile-heading-right .profile-heading-img{
    width: 280px;
  }

  .profile-desc{
    font-size: 15px;
  }

  /* 装飾：被りにくい位置へ */
  .profile-decor--01{
    width: 24px;
    top: 10%;
    left: -8px;
  }
  .profile-decor--02{
    width: 28px;
    top: 6%;
    right: 10%;
  }
  .profile-decor--03{
    width: 9px;
    right: 6%;
    bottom: 12%;
  }
}

/* =========================
   Smartphone（〜768px）
   Our Works と同じ思想：
   - 画像が上
   - 見出しは中央
   - 説明文は左揃え（箱は中央）
   - ボタンは中央寄せ
   - 装飾はサイズ/位置をSP用に調整
   ========================= */
@media (max-width: 768px){

  .section-profile{
    padding: 65px 0 65px!important;
  }

  .profile-inner{
    width: 95%;
    max-width: none;
    padding: 0;
    margin: 0 auto;
  }

  /* 画像→テキストの縦並び（画像が上） */
  .profile-content{
    flex-direction: column;
    gap: 24px;
  }

  .profile-visual,
  .profile-right{
    flex: 1 1 95%;
  }

  /* 画像エリア */
  .profile-visual{
    width: 95%;
    margin: 0 auto;
  }

  .profile-visual img{
    width: 100%;
    max-height: 240px;
    object-fit: cover;
    border-radius: 15px;
    display: block;
  }

  /* 右カラム（見出し＋本文＋ボタン） */
  .profile-right{
    width: 95%;
    margin: 0 auto;
  }

  /* 見出し：中央 */
  .profile-heading-right{
    text-align: center;
    margin-bottom: 14px!important;
  }

  .profile-heading-right picture{
    margin: 0 auto;
    width: fit-content;
  }

  .profile-heading-right .profile-heading-img{
    width: 240px!important;
    max-width: 95%!important;
    margin: 18px auto 10px;
  }

  .profile-heading-right .industry-heading-ja{
    font-size: 16px!important;
    text-align: center!important;
    margin: 0;
  }

  /* 説明文：左揃え（箱は中央） */
  .profile-desc{
    width: 95%!important;
    font-size: 17px!important;
    line-height: 1.9!important;
    text-align: left!important;
    margin: 0 auto 20px!important;
  }

  /* ボタン：中央寄せ */
  .profile-button{
    display: flex;
    justify-content: center;
  }
	
/* 1) まず「見た目」を通常時から固定（hoverを前提にしない） */
  .industry-button.profile-button a,
  .industry-button.profile-button a:focus,
  .industry-button.profile-button a:active{
    justify-content: flex-start !important;
    gap: 14px !important;
    padding: 14px 32px 14px 64px !important;
    color: #23324c !important;
    transition: none !important;
  }

  /* 2) 丸を固定（hoverでも変えない） */
  .industry-button.profile-button a::after,
  .industry-button.profile-button a:focus::after,
  .industry-button.profile-button a:active::after{
    left: 8px !important;
    right: auto !important;
    width: 40px !important;
    height: 40px !important;
    background: #23324c !important;
    border-radius: 999px !important;
    transform: translateY(-50%) !important;
    transition: none !important;
  }

  /* 3) 矢印を固定（hoverでも変えない） */
  .industry-button.profile-button a::before,
  .industry-button.profile-button a:focus::before,
  .industry-button.profile-button a:active::before{
    left: 22px !important;
    width: 8px !important;
    height: 8px !important;
    border-top: solid 2px #fff !important;
    border-right: solid 2px #fff !important;
    transform: translateY(-50%) rotate(45deg) !important;
    transition: none !important;
  }

  /* 4) テキスト色も固定 */
  .industry-button.profile-button a span,
  .industry-button.profile-button a:focus span,
  .industry-button.profile-button a:active span{
    color: #23324c !important;
    transition: none !important;
  }

  /* 5) iOSタップハイライト（任意） */
  .industry-button.profile-button a{
    -webkit-tap-highlight-color: transparent !important;
  }
	
	

  /* =========================
     ふわふわ装飾（SP調整）
     ========================= */
  .profile-decor{
    opacity: 0.6; /* 主張を少し弱める（不要なら削除OK） */
  }

  .profile-decor--01{
    width: 23px;
    top: 3%;
    left: 0;
  }

  .profile-decor--02{
    width: 25px;
    top: 50%;
    right: 20%;
  }

  .profile-decor--03{
    display: none;
  }

  /* SPで装飾を消したい場合（任意）
  .profile-decor{
    display: none;
  }
  */
}

/* =========================
   Small Smartphone（〜480px）
   ========================= */
@media (max-width: 480px){

  .profile-heading-right .profile-heading-img{
    width: 240px;
  }

  .profile-desc{
    font-size: 14px;
  }
}


/* =========================
   Message セクション（レスポンシブ強化版）
   ========================= */
:root{
  --message-gap-pc: 12px;   /* PC間隔 */
  --message-gap-tab: 12px;  /* タブレット間隔 */
  --message-gap-sp: 10px;   /* SP間隔 */
}

/* =========================
   追加：トラックの“見える範囲”を固定してはみ出しを隠す
   ========================= */
.message-viewport{
  overflow: hidden;          /* ←これが「チラ見え」対策の本体 */
  width: 100%;
}

/* ついでに：transform時のガタつき抑制（任意） */
.message-track{
  transform: translate3d(0,0,0);
}

.message-role{
  text-align: center;
  font-weight: 700;
  font-size: 18px;
  margin: 0 0 10px;
  color: #23324c;
}

.section-message{
  position: relative;
  padding: 120px 0 80px;
  background: url("../img/message_arch_02.png") no-repeat top center;
  background-size: cover;
  overflow: hidden;
}

.message-inner{
  position: relative;
  z-index: 1;
  max-width: 1100px;   /* 90%より安定。好みで */
  width: 90%;
  margin: 0 auto;
  padding: 0 10px;
}

/* 見出し */
.message-heading{
  text-align: center;
  margin-bottom: 40px;
}
.message-heading .industry-heading-img{
  width: 400px;
  max-width: 90%;
  height: auto;
  margin: 0 auto 8px;
}

/* =========================
   スライダー本体
   ========================= */
.message-slider{
  position: relative;
  margin-top: 20px;
}

/* 左右矢印 */
.message-arrow{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  border-radius: 999px;
  border: none;
  background-color: #23324c;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
}
.message-arrow::before{
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-top: 2px solid #ffffff;
  border-right: 2px solid #ffffff;
}
.message-arrow--prev{ left: -10px; }
.message-arrow--prev::before{ transform: rotate(-135deg); }
.message-arrow--next{ right: -10px; }
.message-arrow--next::before{ transform: rotate(45deg); }

/* トラック */
.message-track{
  display: flex;
  gap: var(--message-gap-pc);
  transition: transform 0.6s ease;
  will-change: transform;
}

/* カード（高さ固定しない＝テキスト縦伸びOK） */
.message-item{
  text-align: center;
  flex: 0 0 calc((100% - (var(--message-gap-pc) * 2)) / 3); /* 初期=PC3枚 */
}

/* アバター */
.message-avatar{
  margin: 0 auto 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.message-avatar img{
  width: 55%;
  height: auto;
}

/* テキスト（縦に伸びてもOK） */
.message-text{
  text-align: left;
  font-size: 15px;
  line-height: 1.8;
  color: #23324c;
  max-width: 210px;
  margin: 0 auto;
	font-weight: 500;
}

/* =========================
   Tablet（〜1024px）：2枚表示
   ========================= */
@media (max-width: 1024px){

  .section-message{
    padding: 90px 0 90px;
  }

  .message-track{
    gap: var(--message-gap-tab);
  }

  .message-item{
    flex: 0 0 calc((100% - (var(--message-gap-tab) * 1)) / 2);
  }

  .message-arrow--prev{ left: -6px; }
  .message-arrow--next{ right: -6px; }
}

/* =========================
   SP（〜768px）：2枚表示（要望）
   ========================= */
@media (max-width: 768px){

  .section-message{
    padding: 60px 0 80px;
  }

  .message-inner{
    width: 95%;
  }

  .message-track{
    gap: var(--message-gap-sp);
  }

  .message-item{
    flex: 0 0 calc((100% - (var(--message-gap-sp) * 1)) / 2);
  }

  .message-text{
    font-size: 14.5px;
    max-width: 220px;
  }

  .message-arrow--prev{ left: 0; }
  .message-arrow--next{ right: 0; }
}

/* =========================
   小さめSP（〜480px）：1枚表示に戻す（破綻防止）
   ========================= */
@media (max-width: 480px){

  .message-item{
    flex: 0 0 100%;
  }

  .message-text{
    max-width: 260px;
  }
}



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

/* セクション全体はお好みで */
.section-faq {
  padding: 80px 0 120px;
  background-color: #f9fafb;
}

.faq-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
}

/* タイトル */
.faq-heading {
  text-align: center;
  margin-bottom: 40px;
}

.faq-heading .industry-heading-img {
  width: 420px;
  max-width: 80%;
  height: auto;
  margin: 0 auto 8px;
}



/* =========================
   FAQ セクション全体
   ========================= */

.section-faq {
  padding: 70px 0 90px;
  background-color: #f9fafb;  /* セクションの背景色（お好みで） */
}

.faq-inner {
  max-width: 960px;           /* ★ ワイドにしたい幅（中央寄せ） */
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
  text-align: left;
}

.faq-title {
  font-size: 32px;
  font-weight: 800;
  color: #23324c;
  margin-bottom: 4px;
}

.faq-subtitle {
  font-size: 16px;
  color: #23324c;
  margin-bottom: 32px;
}

/* =========================
   アコーディオン本体
   ========================= */

.faq-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
  text-align: left;           /* 中身は左揃え */
}

/* <details> 本体 */
.qa-1 {
  max-width: 100%;            /* 親の 960px に追従 */
  margin: 0 auto 10px auto;             /* 中央寄せ */
  border: 2px solid #d6dde3;
  border-radius: 10px;
  background-color: #fff;
  overflow: hidden;
}

/* デフォルトの三角アイコンを消す（ブラウザ依存ケア） */
.qa-1 summary::-webkit-details-marker {
  display: none;
}

/* 見出し行（Q + タイトル + 矢印） */
.qa-1 summary {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  padding: 2em 2.5em 2em 3.5em;
  color: #23324c;
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  list-style: none;
}

/* Q と A の共通疑似要素のベース位置 */
.qa-1 summary::before,
.qa-1 p::before {
  position: absolute;
  left: 1.2em;
  font-weight: 700;
  font-size: 1.3em;
}

/* Q マークの色（★ここで色を変更） */
.qa-1 summary::before {
  color: #23324c;    /* 例：サイト共通のネイビー */
  content: "Q";
}

/* 矢印アイコン（右側） */
.qa-1 summary::after {
  transform: translateY(-25%) rotate(45deg);
  width: 7px;
  height: 7px;
  margin-left: 10px;
  border-bottom: 3px solid #23324c;
  border-right: 3px solid #23324c;
  content: '';
  transition: transform .3s;
}

/* 開いたときに矢印を上向きへ */
.qa-1[open] summary::after {
  transform: translateY(-25%) rotate(225deg);
}

/* 答え部分のベース */
.qa-1 p {
  position: relative;
  transform: translateY(-8px);
  opacity: 0;
  margin: 0;
  padding: .1em 3.8em 1.6em;
  color: #333;
  font-size: 15px;
  line-height: 2;
  transition: transform .3s, opacity .3s;
	text-align: left;
	width: 850px;
}

/* A マークの色（★ここで色を変更） */
.qa-1 p::before {
  color: #ce205a;   /* 例：ブランドのピンク */
  line-height: 1.4;
  content: "A";
	margin-left: 3px;
}

/* 開いたときにふわっと表示 */
.qa-1[open] p {
  transform: none;
  opacity: 1;
}

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

@media (max-width: 768px) {
  .section-faq {
    padding: 60px 0 80px;
  }

  .faq-inner {
    max-width: 95%;
    padding: 0 10px;
  }

  .faq-title {
    font-size: 26px!important;
  }

  .faq-subtitle {
    font-size: 15px;
    margin-bottom: 24px;
  }

  .qa-1 summary {
    padding: 1.9em 1.8em 1.9em 3em!important;
    font-size: 18px!important;
	margin-top: 1px!important;
  }

  .qa-1 p {
    padding: 1.1em 3.2em 1.3em!important;
    font-size: 16px!important;
	  width: 100%;
  }
}

@media (max-width: 480px) {
  .faq-title {
    font-size: 24px;
  }

  .qa-1 summary {
    padding: 0.8em 1.4em 0.8em 2.6em;
    font-size: 14px;
  }

  .qa-1 p {
    padding: .4em 2.6em 1.2em;
    font-size: 13px;
  }
}

/* =========================
   ENTRY セクション（完全版：丸ごと差し替えOK）
   ========================= */

/* セクション */
.section-entry{
  padding: 70px 0 90px;
  background: url("../img/entry_back.png") no-repeat center center;
  background-size: cover;
}

.entry-inner{
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* 見出し（ENTRY） */
.entry-heading{
  text-align: center;
  margin-bottom: 40px;
}

.entry-heading-img{
  width: 400px;
  max-width: 80%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* カードエリア（2枚横並び） */
.entry-cards{
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 35px;
}

/* =========================
   カード共通（new / career 共通）
   ========================= */
.new_entry_box,
.career_entry_box{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.8rem;

  width: 100%;
  max-width: 500px;
  min-height: 200px;
  padding: 30px;
  box-sizing: border-box;

  border-radius: 25px;
  background-color: #ffffff;

  text-decoration: none;
  font-family: "Noto Sans JP", "Noto Sans Japanese", sans-serif;
  font-size: 22px;
  font-weight: 700;

  box-shadow: 0 12px 24px rgba(0,0,0,0.06);

  /* hoverのゆれを抑えて、滑らかに */
  transition: transform 0.2s ease, box-shadow 0.2s ease,
              background-color 0.2s ease, border-color 0.2s ease;
}

/* NEW：オレンジ */
.new_entry_box{
  border: 2px solid #e06907;
  color: #e06907;
}

/* CAREER：ネイビー */
.career_entry_box{
  border: 2px solid #23324c;
  color: #23324c;
}

/* テキスト */
.new_entry_box-text,
.career_entry_box-text{
  margin: 0;
  line-height: 1.25;
}

/* =========================
   丸矢印（circle_btn）共通
   ========================= */
.new_entry_box .circle_btn,
.career_entry_box .circle_btn{
  position: relative;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: 50%;
  background: #ffffff;
  flex-shrink: 0;
  transition: 0.25s ease;
}

/* 枠線色だけ分ける */
.new_entry_box .circle_btn{ border: 2px solid #e06907; }
.career_entry_box .circle_btn{ border: 2px solid #23324c; }

/* 矢印共通 */
.new_entry_box .circle_btn::after,
.career_entry_box .circle_btn::after{
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  width: 6px;
  height: 6px;
  transform: translate(-50%, -50%) rotate(45deg);
  border-radius: 1px;
  transition: 0.25s ease;
}

/* 矢印色だけ分ける */
.new_entry_box .circle_btn::after{
  border-top: 3px solid #e06907;
  border-right: 3px solid #e06907;
}
.career_entry_box .circle_btn::after{
  border-top: 3px solid #23324c;
  border-right: 3px solid #23324c;
}

/* =========================
   hover（PC想定）
   ========================= */
@media (hover:hover) and (pointer:fine){

  .new_entry_box:hover,
  .career_entry_box:hover{
    transform: translateY(-2px);
    box-shadow: 0 14px 28px rgba(0,0,0,0.08);
  }

  .new_entry_box:hover .circle_btn{
    transform: scale(1.12);
    background: #e06907;
  }
  .new_entry_box:hover .circle_btn::after{
    border-top-color: #ffffff;
    border-right-color: #ffffff;
  }

  .career_entry_box:hover .circle_btn{
    transform: scale(1.12);
    background: #23324c;
  }
  .career_entry_box:hover .circle_btn::after{
    border-top-color: #ffffff;
    border-right-color: #ffffff;
  }
}

/* =========================
   Tablet（〜1024px）
   ========================= */
@media (max-width: 1024px){

  .section-entry{
    padding: 64px 0 80px;
  }

  .entry-cards{
    gap: 24px;
  }

  .new_entry_box,
  .career_entry_box{
    max-width: 460px;
    min-height: 190px;
    padding: 28px 26px;
    font-size: 18px;
    border-radius: 22px;
  }

  .new_entry_box .circle_btn,
  .career_entry_box .circle_btn{
    width: 2.7rem;
    height: 2.7rem;
  }
}

/* =========================
   SP（〜768px）
   縦積み・タップしやすい
   ========================= */
@media (max-width: 768px){

  .section-entry{
    padding: 60px 0 60px!important;
  }

  .entry-inner{
	  width: 95%;
    padding: 0 14px;
  }

  .entry-heading{
    margin-bottom: 26px;
  }

  .entry-heading-img{
    width: 300px;
    max-width: 90%;
  }

  .entry-cards{
    flex-direction: column;
    gap: 18px;
  }

  .new_entry_box,
  .career_entry_box{
    max-width: 520px;
    min-height: 160px;
    padding: 20px 20px!important;
    font-size: 16px;
    border-radius: 15px;
    gap: 14px;
  }

  .new_entry_box .circle_btn,
  .career_entry_box .circle_btn{
    width: 44px;
    height: 44px;
  }

  .new_entry_box .circle_btn::after,
  .career_entry_box .circle_btn::after{
    width: 7px;
    height: 7px;
  }

  /* SPはhoverが暴れやすいので、タップ時の違和感を抑える */
  .new_entry_box,
  .career_entry_box{
    -webkit-tap-highlight-color: transparent;
  }
}

/* =========================
   小さめSP（〜480px）
   ========================= */
@media (max-width: 480px){

  .entry-heading-img{
    width: 260px;
  }

  .new_entry_box,
  .career_entry_box{
    min-height: 150px;
    padding: 20px 18px;
    font-size: 15px;
  }
}


/* =========================
   FOOTER 共通
   ========================= */

.site-footer {
  background: #23324c;
  color: #ffffff;
  width: 100%;
  padding: 80px 0 70px 0;
  font-family: "Noto Sans JP", sans-serif;
}

.footer-inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;

  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

/* 左側ブロック */
.footer-left {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.footer-logo {
  width: 250px; /* 適宜調整 */
  height: auto;
}

/*リンク部分*/
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

/* 下線アニメーションつきリンク */
.footer-link {
  position: relative;
  color: #ffffff;
  font-size: 13px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* 外部リンクアイコン */
/* 外部リンクアイコン（SVG画像） */
.external-icon {
  display: inline-block;
  width: 14px;                 /* アイコンの大きさはお好みで */
  height: 14px;
  background: url("../img/arow.svg") no-repeat center center;
  background-size: contain;
  margin-left: 4px;            /* 文字とのすき間 */
}


/* 下線エフェクト */
.underline-animate::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0%;
  height: 1px;
  background: #ffffff;
  transition: width 0.3s ease;
}

.underline-animate:hover::after {
  width: 100%;
}

/* 右側：プライバシーマーク */
.footer-right .privacy-mark {
  width: 90px; /* 適宜調整 */
  height: auto;
  background: #fff;
  border-radius: 12px;
  padding: 6px 12px;
}

/* コピーライト */
.footer-bottom {
  text-align: center;
  padding-top: 10px;
  margin-top: 20px;
  margin-bottom: 20px;
  color: #23324c;
  font-size: 13px;
  opacity: 0.8;
}


/* =========================
   レスポンシブ対応
   ========================= */

@media (max-width: 900px) {
  .footer-inner {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .footer-left {
    align-items: center;
  }

  .footer-right {
    margin-top: 20px;
  }

  .footer-logo {
    width: 200px;
  }
}

@media (max-width: 768px){

.footer-logo {
  width: 240px!important; /* 適宜調整 */
  height: auto;
margin-bottom: 10px;
}
	
/* 右側：プライバシーマーク */
.footer-right .privacy-mark {
  width: 75px!important; /* 適宜調整 */
  height: auto;
  background: #fff;
  border-radius: 10px;
  padding: 6px 12px;
}


}


@media (max-width: 480px) {
  .footer-link {
    font-size: 16px;
  }

  .footer-logo {
    width: 180px;
  }

  .footer-bottom {
    font-size: 13px;
  }
}

/* =========================
   業界を知るページ用 FV
   ========================= */

/* TOP と同じ .fv を使いつつ、fv--industry だけ背景と高さを上書き */
.fv.fv--industry {
  position: relative;
  width: 100%;
  height: 340px;  /* デザイン見てお好みで */
  background-image: url("../img/page_back.png"); /* ← 業界ページ用の背景画像に差し替え */
  background-size: cover;
  background-position: center top;
  background-repeat: no-repeat;
  padding-top: 45px;  /* 固定ナビ分 */
  overflow: hidden;
}

/* タイトルブロック */
.industry-fv {
  position: relative;
  max-width: 1200px;
  margin: 120px auto 0;
  padding: 0 20px;
  text-align: center;
  color: #23324c;
}

/* Our Industry のタイトル画像 */
.industry-fv-title {
  display: block;
  margin: 0 auto;
  width: 420px;        /* タイトル画像に合わせて調整 */
  max-width: 90vw;
  height: auto;
}

/* 「業界を知る」小見出し */
.industry-fv-sub {
  margin-top: 18px;
  font-size: 18px;
  font-weight: 700;
  letter-spacing: 0.12em;
}

/* スマホ調整 */
@media (max-width: 768px) {
  .fv.fv--industry {
    height: 260px;
    padding-top: 50px;
  }
	
  .industry-fv-sub {
  margin-top: 10px;
}

  .industry-fv {
    margin-top: 90px;
  }

  .industry-fv-title {
    width: 290px!important;
  }

  .industry-fv-sub {
    font-size: 16px;
  }
}

/* =========================
   広告業界の今と、これから
   ========================= */

.section-ad-now {
  background-color: #ffffff;
  padding: 60px 0 0 0;
}

.ad-now-inner {
  max-width: 1000px;
  margin: 0 auto 60px auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* キービジュアル */
.ad-now-hero {
  position: relative;
  overflow: hidden;
  height: 360px;  /* 画像の比率を見てお好みで調整 */
  background-image: url("../img/koukoku_top.png"); /* ← 差し替え画像 */
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}

/* 上部のブルーバー＋タイトル */
.ad-now-hero-title-bar {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  padding: 9px 0;
  background-color: #0088d4;
  color: #ffffff;
  font-size: 25px;
  font-weight: 700;
  text-align: center;
  box-sizing: border-box;
}

/* 本文エリア */
.ad-now-body {
  margin-top: 60px;
}

/* 見出し（シンプルに使いたい場合用：今回は未使用でもOK） */
.ad-now-heading {
  font-size: 22px;
  font-weight: 800;
  color: #0088d4;
  margin: 0 0 18px;
  padding-bottom: 10px;
}

/* =====================================
   タイトル下に青ライン＋淡ブルーライン
   ===================================== */

/* タイトル行全体（タイトル＋薄い線のラッパー） */
.section-title-line {
  display: flex;
  align-items: flex-end;
  margin-bottom: 20px;
}

/* 左側：タイトル文字＋濃い青ライン */
.section-title-main {
  margin: 10px 0 0 0;
  font-size: 23px;
  font-weight: bold;
  color: #0088d4;
  padding-bottom: 8px;
  border-bottom: 3px solid #0088d4; /* 濃い青ライン */
}

/* 右側：淡いブルーの残り線 */
.section-title-tail {
  flex: 1;                     /* 残り幅ぜんぶ使う */
  height: 3px;
  background-color: #cde4f6;   /* 淡いブルー */
}

/* リード文 */
.ad-now-lead {
  font-size: 16px;
  line-height: 1.9;
  color: #000;
  margin: 0 0 14px;
}

/* デジタル広告の種類 */
.ad-now-digital {
  margin-top: 40px;
}

.ad-now-digital-heading {
  font-size: 20px;
  font-weight: 700;
  color: #23324c;
  margin: 0 0 20px;
}

/* 丸バッジ群 */
.ad-now-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 33px;
}

.ad-now-badge {
  flex: 0 0 130px;
  max-width: 130px;
  height: 130px;
  border-radius: 50%;
  background-color: #e4f3ff; /* 淡いブルー */
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-size: 16px;
  font-weight: 700;
  color: #23324c;
  line-height: 1.3;
}

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

@media (max-width: 960px) {
  .section-ad-now {
    padding: 60px 0 70px;
  }
	/* 本文エリア */
.ad-now-body {
  margin-top: 40px!important;
}

  .ad-now-hero {
    height: 300px;
  }

  .ad-now-hero-title-bar {
    font-size: 22px;
    padding: 14px 12px;
  }

  .ad-now-heading,
  .section-title-main {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
  .section-ad-now {
    padding: 30px 0 30px!important;
  }
	.ad-now-inner,.sales-inner {
  width: 95%!important;
  max-width: none!important;
  padding: 0 15px!important;
}

  .ad-now-hero {
    height: 260px;
  }
  .ad-now-digital {
  margin-top: 40px;
  text-align: center;
}
	
.ad-now-digital-heading {
  font-size: 18px!important;
}
	
/* 左側：タイトル文字＋濃い青ライン */
.section-title-main {
  font-size: 20px!important;
}

  .ad-now-hero-title-bar {
    font-size: 19px!important;
    letter-spacing: 0.08em;
	  padding: 8px 0!important;
  }

  .ad-now-badges {
    gap: 10px!important;
  }

  .ad-now-badge {
    flex: 0 0 120px!important;
    max-width: 130px;
    height: 130px;
    font-size: 14px;
	  margin: 0 auto;
  }
}

@media (max-width: 480px) {
  .ad-now-hero {
    height: 220px;
  }

  .ad-now-hero-title-bar {
    font-size: 16px;
  }

  .ad-now-heading,
  .section-title-main {
    font-size: 18px;
  }

  .ad-now-lead {
    font-size: 16px;
    color: #000;
  }

  .ad-now-badge {
    flex: 0 0 120px;
    max-width: 120px;
    height: 120px;
    font-size: 12px;
  }
}

.cpa_img{
	margin: 60px auto 0 auto;
	width: 280px;
}

@media (max-width: 960px) {
  .cpa_img{
	margin: 60px auto 0 auto;
	width: 60%;
}
}

@media (max-width: 768px) {
  .cpa_img{
	margin: 60px auto 0 auto;
	width: 80%!important;
}
}

@media (max-width: 480px) {
  .cpa_img{
	margin: 60px auto 0 auto;
	width: 60%;
}
}

/* =========================
   採用広告業界の営業とは
   ========================= */

.section-sales {
  background-color: #f9f9f9; /* 薄いグレー背景 */
  padding: 80px 0;
}

.sales-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* セクションタイトルバー（幅・色は ad-now と揃えるイメージ） */
.sales-hero-title-bar {
  width: 100%;
  padding: 9px 0;
  background-color: #0088d4;
  color: #ffffff;
  font-size: 25px;
  font-weight: 700;
  text-align: center;
  box-sizing: border-box;
}

/* 各ブロック共通 */
.sales-block {
  margin-top: 50px;
}

/* リード文・説明文 */
.sales-lead {
  font-size: 16px;
  line-height: 1.9;
  color: #000;
  margin: 0 0 20px;
}

.sales-note {
  font-size: 14px;
  line-height: 1.9;
  color: #23324c;
  margin-top: 20px;
}

/* =========================
   スキルカード（アイコン＋テキスト）
   ========================= */

.sales-skills {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  margin-top: 30px;
}

.sales-skill-card {
  flex: 1 1 calc(25% - 18px);  /* PCでは4列 */
  min-width: 220px;
  background-color: #e4f3ff;
  padding: 30px 20px 30px 20px;
  box-sizing: border-box;
  text-align: center;
	margin-bottom: 25px;
}

/* SVGアイコン枠 */
.skill-icon {
  width: 80px;
  height: 80px;
  margin: 0 auto 15px auto;
  display: flex;
  align-items: center;
  justify-content: center;
}

.skill-icon img {
  width: 100%;
  height: auto;
  display: block;
}

/* カテゴリ名テキスト */
.sales-skill-label {
  font-size: 15px;
  font-weight: 600;
  color: #23324c;
  line-height: 1.6;
}

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

@media (max-width: 960px) {

  .section-sales {
    padding: 60px 0;
  }

  .sales-hero-title-bar {
    font-size: 22px;
    padding: 10px 12px;
  }

  .sales-block {
    margin-top: 40px;
  }

  .sales-skills {
    gap: 20px;
  }

  .sales-skill-card {
    flex: 1 1 calc(50% - 12px);  /* タブレットサイズでは2列 */
  }

  .skill-icon {
    width: 64px;
    height: 64px;
  }
}

@media (max-width: 768px) {
	
	.sales-hero-title-bar {
    font-size: 19px!important;
    letter-spacing: 0.08em;
	  padding: 8px 0!important;
  }
	
	.sales-inner{
		
		max-width: none!important;
	}
	
	/* カテゴリ名テキスト */
.sales-skill-label {
  font-size: 17px!important;
}

  .sales-hero-title-bar {
    font-size: 18px;
    letter-spacing: 0.08em;
  }

  .sales-skills {
    margin-top: 24px;
    gap: 5px!important;
  }

  .sales-skill-card {
    flex: 1 1 100%;  /* スマホ寄りでは1列 */
    min-width: 0;
  }

  .skill-icon {
    width: 70px!important;
    height: 70px!important;
  }
}

@media (max-width: 480px) {

  .sales-hero-title-bar {
    font-size: 16px;
  }

  .sales-lead {
    font-size: 15px;
  }

  .sales-note {
    font-size: 13px;
  }

  .skill-icon {
    width: 50px;
    height: 50px;
  }

  .sales-skill-label {
    font-size: 14px;
  }
}

/* =========================
   採用広告事業（背景なし）
   ========================= */

/* 青帯タイトル（指定通り100%幅） */
.recruit-ad-title-bar {
  width: 100%;
  padding: 6px 0;
  background-color: #0088d4;
  color: #ffffff;
  font-size: 25px;
  font-weight: 700;
  text-align: center;
  box-sizing: border-box;
	margin: 60px 0 25px 0;
}

/* セクション全体（白背景で余白だけ） */
.recruit-ad-section {
  background-color: #ffffff;
  box-sizing: border-box;
}

/* 中身の2カラム */
.recruit-ad-inner {
  max-width: 1100px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  gap: 31px;
}

/* 左の画像 */
.recruit-ad-image {
  flex: 0 0 30%;
}

.recruit-ad-image img {
  width: 100%;
  height: auto;
  display: block;
}

/* 右のテキスト */
.recruit-ad-text {
  flex: 1;
}

.recruit-ad-heading {
  font-size: 21px;
  font-weight: 700;
  line-height: 1.5;
  margin: 0 0 10px 0;   /* ← ここを追加（上を0にする） */
  color: #23324c; /* 見出しを青で強調（元画像の印象） */
}

.recruit-ad-body {
  font-size: 15px;
  line-height: 1.9;
  margin: 0;
  color: #000;
}

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

/* =========================
   Tablet（〜960px）
   ========================= */
@media (max-width: 960px){

  .recruit-ad-inner{
    flex-direction: column;
    align-items: flex-start;     /* ← ★縦並び時は左揃えが自然 */
    gap: 24px;                  /* ← ★SP寄りになるほど詰めやすい */
  }

  /* 画像が大きくなりすぎないよう上限を作る（調整ポイント） */
  .recruit-ad-image{
    width: 100%;
    max-width: 520px;           /* ★ここで“画像の最大幅”を調整 */
  }

  .recruit-ad-heading{
    font-size: 22px;            /* ★タブレット見出しサイズ */
  }
}

/* =========================
   Smartphone（〜768px）
   ========================= */
@media (max-width: 768px){

  /* ★タイトルバー：SP用に「上マージン/下マージン/高さ感」調整 */
  .recruit-ad-title-bar{
	  
    font-size: 20px!important;
    letter-spacing: 0.08em;
    padding: 9px 0!important;          /* ★上下の厚み */
    margin: 40px auto 0 auto!important;       /* ★上マージン/下マージン（ここが調整点） */
	box-sizing: border-box;
  }

  /* ★左右余白（スマホは少し狭めたいならここ） */
  .recruit-ad-inner{
	width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
  }

  /* ★画像：幅・高さ・余白をSPで調整 */
  .recruit-ad-image{
	  width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
  }
	


.recruit-ad-image img {
  width: 100%!important;
  height: auto!important;
  display: block!important;
}

  

  /* ★テキスト：サイズ/余白調整 */
  .recruit-ad-heading{
    font-size: 20px!important;             /* ★見出しサイズ */
    margin: 0 0 10px 0!important;          /* ★見出し下余白 */
  }

  .recruit-ad-body{
    font-size: 16px!important;             /* ★本文サイズ */
    line-height: 1.85!important;           /* ★行間 */
  }
	
	
}

/* =========================
   Small Smartphone（〜480px）
   ========================= */
@media (max-width: 480px){

  .recruit-ad-title-bar{
    font-size: 16px;
    padding: 9px 10px;
    margin: 34px 0 16px 0;       /* ★さらに詰める */
  }

  .recruit-ad-inner{
    padding: 0 12px;
    gap: 16px;
  }

  .recruit-ad-image{
    max-width: 360px;            /* ★さらに小さく */
  }

  .recruit-ad-heading{
    font-size: 18px;
    margin-bottom: 8px;
  }

  .recruit-ad-body{
    font-size: 14.5px;
  }
}

/* =========================
   採用広告掲載の流れ
   ========================= */

.ad-flow {
  padding: 56px 0 20px;
}

.ad-flow__inner {
  max-width: 1200px;
  margin: 0 auto;
}

.ad-flow__title {
  margin: 0;
  text-align: center;
  font-size: 23px;
  font-weight: 700;
  color: #23324c;
  letter-spacing: 0.06em;
}

.ad-flow__title-line {
  width: 70px;
  height: 2px;
  margin: 18px auto 40px auto;
  background: #23324c;
  border-radius: 999px;
}

/* 4列（PC）→ 2列（レスポンシブ） */
.ad-flow__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* カード */
.flow-card {
  background: transparent;
  border: 1px solid #23324c;
}

/* 上部ネイビー帯 */
.flow-card__step {
  position: relative;
  background: #23324c;
  color: #ffffff;
  text-align: center;
  font-weight: 600;
  font-size: 18px;
  letter-spacing: 0.06em;
  padding: 10px 10px 10px 10px;
}

/* ▼切り欠き（三角） */
.flow-card__step::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -10px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 13px solid transparent;
  border-right: 13px solid transparent;
  border-top: 13px solid #23324c;
}

/* 本体 */
.flow-card__body {
  padding: 20px 18px 20px; /* 三角の分だけ上に余白 */
  min-height: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* アイコン枠（共通：ここがベース） */
.flow-card__icon {
  width: 100px;
  height: 100px;
  display: grid;
  place-items: center;
  margin: 5px 0 10px 0;
}

.flow-card__icon img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* 見出し */
.flow-card__heading {
  margin: 6px 0 12px;
  text-align: center;
  font-size: 20px;
  font-weight: 700;
  color: #23324c;
}

/* 本文 */
.flow-card__text {
  margin: 0;
  font-size: 14px;
  line-height: 1.6;
  color: #000;
}

/* =========================
   STEP別：アイコンサイズ調整（ここを触ればOK）
   ========================= */

/* 例：必要に応じて数値を変更してください */
.flow-card--s1 .flow-card__icon { width: 105px;  height: 105px; }
.flow-card--s2 .flow-card__icon { width: 105px;  height: 105px; }
.flow-card--s3 .flow-card__icon { width: 105px;  height: 105px; }
.flow-card--s4 .flow-card__icon { width: 105px;  height: 105px; }


/* もし「枠は同じで、画像だけ小さくしたい」場合は↓を使う（任意）
.flow-card--s1 .flow-card__icon img { width: 88%; height: 88%; }
.flow-card--s2 .flow-card__icon img { width: 95%; height: 95%; }
.flow-card--s3 .flow-card__icon img { width: 85%; height: 85%; }
.flow-card--s4 .flow-card__icon img { width: 100%; height: 100%; }
*/

/* =========================
   レスポンシブ：2列
   ========================= */
@media (max-width: 900px) {
  .ad-flow__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 18px;
  }

  .flow-card__step {
    font-size: 22px;
  }

  .flow-card__body {
    min-height: 260px;
  }

  /* アイコン枠（共通のベース） */
  .flow-card__icon {
    width: 100px;
    height: 100px;
  }

  .flow-card__heading {
    font-size: 20px;
  }

  .flow-card__text {
    font-size: 15px;
  }

  /* STEP別アイコンもモバイルで再調整したい場合（任意）
     ここは必要になってから触ればOKです */
  .flow-card--s1 .flow-card__icon { width: 92px;  height: 92px; }
  .flow-card--s2 .flow-card__icon { width: 100px; height: 100px; }
  .flow-card--s3 .flow-card__icon { width: 88px;  height: 88px; }
  .flow-card--s4 .flow-card__icon { width: 104px; height: 104px; }
}

/* =========================
   採用広告掲載の流れ：SP幅調整
   ========================= */
@media (max-width: 768px){
	.inner-sns {
  padding: 0 0 70px 0!important;
}

  /* セクション全体の左右余白を統一 */
  .ad-flow{
    padding: 48px 0 24px 0;
  }

  /* ★ここが重要：横幅95%の基準 */
  .ad-flow__inner{
    max-width: none;
    margin-left: auto;
    margin-right: auto;
  }

  /* タイトルまわりも一緒に揃う */
  .ad-flow__title{
    font-size: 20px;
  }

  .ad-flow__title-line{
    margin: 14px auto 28px;
  }

  /* グリッド：スマホでは2列 or 1列にしたい場合 */
  .ad-flow__grid{
    gap: 10px;
  }
	
	.flow-card__step{
    font-size: 18px;
    padding: 7px 0;
  }

  .flow-card__icon{
    width: 60px;
    height: 60px;
    margin: 4px 0 10px;
  }

  /* カード内の詰め調整（任意） */
  .flow-card__body{
    padding: 18px 14px 20px;
    min-height: auto;
  }

  .flow-card__heading{
    font-size: 16px!important;
  }

  .flow-card__text{
    font-size: 14px!important;
    line-height: 1.7;
  }
	
}


/* さらに小さい端末（任意：2列のまま詰める） */
@media (max-width: 480px) {
  .ad-flow__title {
    font-size: 26px;
  }

  .ad-flow__title-line {
    width: 110px;
    margin: 14px auto 28px;
  }

  .flow-card__body {
    padding: 36px 14px 18px;
    min-height: 240px;
  }
}

/* =========================
   取り扱い媒体（ロゴ画像差し替え前提）
   ========================= */

.media-logos {
  padding: 56px 0 30px; /* ad-flowと合わせるなら同等でOK */
}

.media-logos__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

/* ロゴを囲う白いパネル */
.media-logos__panel {
  margin-top: 28px;
  background: #ffffff;
  border: 1px solid #a0a0a0;
  border-radius: 15px;
  padding: 10px 25px 5px 25px;
  box-sizing: border-box;
}

/* 画像表示 */
.media-logos__picture {
  display: block;
}

.media-logos__img {
  width: 100%;
  height: auto;
  display: block;
}

/* =========================
   レスポンシブ
   ========================= */
@media (max-width: 768px) {
  .media-logos {
	margin: 0 auto;
    padding: 40px 0 20px!important;
  }

  .media-logos__panel {
    padding: 15px 0 5px 0!important;
    border-radius: 14px;
  }
}

/* =========================================================
  採用業務のフロー
========================================================= */
.ad-flow__title {
  margin: 0;
  text-align: center;
  font-size: 21px;
  font-weight: 700;
  color: #23324c;
  letter-spacing: 0.06em;
}

.ad-flow__title-line {
  width: 70px;
  height: 2px;
  margin: 18px auto 30px auto;
  background: #23324c;
  border-radius: 999px;
}

/* =========================================================
  採用業務のフロー（画像表示）
========================================================= */
.hire-flow-img {
  padding: 56px 0 20px;
}

.hire-flow-img__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  box-sizing: border-box;
}

/* 図の外枠 */
.hire-flow-img__panel {
 
}

/* 画像 */
.hire-flow-img__picture {
  display: block;
}

.hire-flow-img__img {
  width: 75%;      /* ← 好きなサイズに */
  height: auto;
  margin: 0 auto;
  display: block;
}

/* =========================================================
  レスポンシブ
========================================================= */
@media (max-width: 768px) {
  .hire-flow-img__panel {
    border-radius: 16px;
    padding: 12px;
  }
	.hire-flow-img__img {
  width: 95%!important;      /* ← 好きなサイズに */
  margin: 0 auto;
}
	.inner-ad {
  padding:0!important;
}

.inner-outsourcing {
  padding: 0!important;
}

.inner-hp {
  padding: 0!important;
}

.inner-movie {
  padding: 0!important;
}

.inner-sns {
  padding: 0!important;
}
	
}

/* =========================
   セクション個別余白
========================= */

.inner-ad {
  padding:0;
}

.inner-outsourcing {
  padding: 0;
}

.inner-hp {
  padding: 0;
}

.inner-movie {
  padding: 0;
}

.inner-sns {
  padding: 0;
}


/* =========================
   Our Works　営業の仕事内容
========================= */

/* 本文エリア */
.ad-now-body_works {
  margin-top: 30px;
}

/* 見出し（シンプルに使いたい場合用：今回は未使用でもOK） */
.ad-now-heading_works {
  font-size: 22px;
  font-weight: 800;
  color: #23324c;
  margin: 0 0 18px;
  padding-bottom: 10px;
}

/* =====================================
   タイトル下に青ライン＋淡ブルーライン
   ===================================== */

/* タイトル行全体（タイトル＋薄い線のラッパー） */
.section-title-line_works {
  display: flex;
  align-items: flex-end;
  margin-bottom: 20px;
}

/* 左側：タイトル文字＋濃い青ライン */
.section-title-main_works {
  margin: 10px 0 0 0;
  font-size: 23px;
  font-weight: bold;
  color: #0088d4;
  padding-bottom: 8px;
  border-bottom: 3px solid #0088d4; /* 濃い青ライン */
}

/* 右側：淡いブルーの残り線 */
.section-title-tail_works {
  flex: 1;                     /* 残り幅ぜんぶ使う */
  height: 3px;
  background-color: #cde4f6;   /* 淡いブルー */
}

/* リード文 */
.ad-now-lead_works {
  font-size: 16px;
  line-height: 1.9;
  color: #000;
  margin: 0 0 14px;
}

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

@media (max-width: 960px) {
  .section-ad-now {
    padding: 60px 0 40px;
  }

  .ad-now-hero {
    height: 300px;
  }

  .ad-now-hero-title-bar {
    font-size: 22px;
    padding: 14px 12px;
  }

  .ad-now-heading,
  .section-title-main {
    font-size: 20px;
  }
}

@media (max-width: 768px) {
	
	/* 本文エリア */
.ad-now-body_works {
  margin-top: 20px;
}
	
	/* 左側：タイトル文字＋濃い青ライン */
.section-title-main_works {
  margin: 5px 0 0 0!important;
  font-size: 20px;
  font-weight: bold;
  color: #0088d4;
  padding-bottom: 8px;
  border-bottom: 3px solid #0088d4; /* 濃い青ライン */
}

/* 右側：淡いブルーの残り線 */
.section-title-tail_works {
  flex: 1;                     /* 残り幅ぜんぶ使う */
  height: 3px;
  background-color: #cde4f6;   /* 淡いブルー */
}

/* リード文 */
.ad-now-lead_works {
  font-size: 16px;
  line-height: 1.9;
  color: #000;
  margin: 20px 0 10px;
}
	
	
  .section-ad-now {
    padding: 50px 0 40px;
  }

  .ad-now-hero {
    height: 260px;
  }

  .ad-now-hero-title-bar {
    font-size: 18px;
    letter-spacing: 0.08em;
  }

  .ad-now-badges {
    gap: 16px;
  }

  .ad-now-badge {
    flex: 0 0 130px;
    max-width: 130px;
    height: 130px;
    font-size: 13px;
  }
	
	
}

@media (max-width: 480px) {
  .ad-now-hero {
    height: 220px;
  }

  .ad-now-hero-title-bar {
    font-size: 16px;
  }

  .ad-now-heading,
  .section-title-main {
    font-size: 18px;
  }

  .ad-now-lead {
    font-size: 16px;
    color: #000;
  }

  .ad-now-badge {
    flex: 0 0 120px;
    max-width: 120px;
    height: 120px;
    font-size: 12px;
  }
}

.cpa_img{
	margin: 60px auto 0 auto;
	width: 350px;
}

@media (max-width: 960px) {
  .cpa_img{
	margin: 60px auto 0 auto;
	width: 60%;
}
}

@media (max-width: 768px) {
  .cpa_img{
	margin: 60px auto 0 auto;
	width: 60%;
}
}

@media (max-width: 480px) {
  .cpa_img{
	margin: 60px auto 0 auto;
	width: 60%;
}
}

/* =========================
  お悩み吹き出し＋人物＋矢印
========================= */

.worry-lead {
  padding: 44px 0 36px;
}

.worry-lead__inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 110px;
  box-sizing: border-box;
}

/* --- 吹き出し3つ --- */
.worry-lead__bubbles {
  display: flex;
  justify-content: center; /* 全体を中央寄せ */
  gap: 40px;               /* ← 間隔だけ調整 */
  margin-bottom: 45px;
}

.worry-bubble {
  position: relative;
  border: 2px solid #23324c;
  background: #ffffff;
  color: #23324c;
  text-align: center;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0.04em;
  padding: 12px 20px 12px 20px;
  box-sizing: border-box;
}

/* 吹き出しのしっぽ（下向き） */
.worry-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -22px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 17px solid transparent;
  border-right: 17px solid transparent;
  border-top: 21px solid #23324c; /* 外枠色 */
}



.worry-bubble::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 18px solid #ffffff; /* 内側（背景色） */
  z-index: 1;
}

/* 背景色のバリエーション（必要なら） */
.worry-bubble--mint  { background: #dff6ef; }
.worry-bubble--blue  { background: #e8f2ff; }
.worry-bubble--cream { background: #fbf6e6; }

.worry-bubble--mint::before  { border-top-color: #dff6ef; }
.worry-bubble--blue::before  { border-top-color: #e8f2ff; }
.worry-bubble--cream::before { border-top-color: #fbf6e6; }

/* --- 人物 --- */
.worry-lead__people {
  display: flex;
  justify-content: center;
  align-items: flex-end;
  gap: 160px;
  margin: 10px auto 26px auto;
}

.worry-lead__person {
  width: 120px;     /* ここで人物サイズ調整 */
  height: auto;
  display: block;
}

/* --- 矢印 --- */
.worry-lead__arrow {
  display: grid;
  place-items: center;
}

.worry-lead__arrow-img {
  margin: 20px 0 20px 0;
  width: 50px;     /* ここで矢印サイズ調整 */
  height: auto;
  display: block;
}

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

@media (max-width: 980px) {
  .worry-lead__bubbles {
    grid-template-columns: 1fr;
    gap: 18px;
    margin-bottom: 26px;
  }

  .worry-bubble {
    font-size: 22px;
    padding: 18px 14px;
  }

  .worry-lead__people {
    gap: 60px;
  }

  .worry-lead__person {
    width: 200px;
  }

  .worry-lead__arrow-img {
    width: 100px;
  }
}

@media (max-width: 768px){
	/* =========================
  お悩み吹き出し＋人物＋矢印
========================= */

.worry-lead {
  padding: 44px 0 5px;
}

.worry-lead__inner{
    max-width: 95%;
    margin: 0 auto;
    padding: 0 10px; /* ← 110pxはSPだとキツい */
    box-sizing: border-box;
  }

/* 吹き出し：gridで添付の並びにする */
  .worry-lead__bubbles{
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-areas:
      "blue  blue"
      "mint  cream";
    gap: 14px 14px;
    justify-items: stretch;
    margin-bottom: 26px;
  }
	
	/* どれがどこに行くか */
  .worry-bubble--blue  { grid-area: blue;  justify-self: center; margin-bottom: 20px; }
  .worry-bubble--mint  { grid-area: mint; }
  .worry-bubble--cream { grid-area: cream; }
	
	/* サイズ調整（お好みで） */
  .worry-bubble{
    width: 100%;
    font-size: 14px;
    padding: 12px 0px;
  }

  /* 上の1つだけ少し横幅を絞って“中央感”を出す */
  .worry-bubble--blue{
    max-width: 310px; /* ここ調整可 */
  }

  /* しっぽ位置を変えたい場合（添付のように内側寄せ） */
  .worry-bubble{ --tail-x: 50%; }           /* デフォ：中央 */
  .worry-bubble--mint{ --tail-x: 70%; }     /* 左下：右寄せ（内側へ） */
  .worry-bubble--cream{ --tail-x: 30%; }    /* 右下：左寄せ（内側へ） */

  .worry-bubble::after,
  .worry-bubble::before{
    left: var(--tail-x);
    transform: translateX(-50%);
  }

.worry-bubble {
  position: relative;
  border: 2px solid #23324c;
  background: #ffffff;
  color: #23324c;
  text-align: center;
  font-weight: 600;
  font-size: 15px;
  letter-spacing: 0.04em;
  padding: 12px 20px 12px 20px;
  box-sizing: border-box;
}

/* 吹き出しのしっぽ（下向き） */
.worry-bubble::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -22px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 17px solid transparent;
  border-right: 17px solid transparent;
  border-top: 21px solid #23324c; /* 外枠色 */
}



.worry-bubble::before {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -18px;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 15px solid transparent;
  border-right: 15px solid transparent;
  border-top: 18px solid #ffffff; /* 内側（背景色） */
  z-index: 1;
}

/* 背景色のバリエーション（必要なら） */
.worry-bubble--mint  { background: #dff6ef; }
.worry-bubble--blue  { background: #e8f2ff; }
.worry-bubble--cream { background: #fbf6e6; }

.worry-bubble--mint::before  { border-top-color: #dff6ef; }
.worry-bubble--blue::before  { border-top-color: #e8f2ff; }
.worry-bubble--cream::before { border-top-color: #fbf6e6; }

/* --- 人物 --- */
.worry-lead__people {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 50px!important;
  margin: 40px auto 26px auto!important;
}

.worry-lead__person {
  width: 100px!important;     /* ここで人物サイズ調整 */
  height: auto;
  display: flex;
	justify-content: center;
}

/* --- 矢印 --- */
.worry-lead__arrow {
  display: grid;
  place-items: center;
}

.worry-lead__arrow-img {
  margin: 20px 0 20px 0;
  width: 50px!important;     /* ここで矢印サイズ調整 */
  height: auto;
  display: block;
}

}

@media (max-width: 560px) {
  .worry-lead {
    padding: 34px 0 30px;
  }

  .worry-lead__people {
    display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  margin: 10px auto 26px auto;
  }

  .worry-lead__person {
    width: 180px;
  }

  .worry-lead__arrow-img {
    width: 90px;
  }
}

/* 青帯タイトル（指定通り100%幅） */
.recruit-ad-title-bar_works {
  background-color: #0088d4;
  color: #ffffff;
  font-size: 25px;
  font-weight: 700;
  text-align: center;
  box-sizing: border-box;
	margin: 20px 0 25px 0;
}

/* スマホ */
@media (max-width: 600px) {
  .recruit-ad-title-bar_works {
    font-size: 18px;
    letter-spacing: 0.08em;
  }
}

/* =========================
  営業のとある一日（外枠カード）
  内側：#f8ffff / 外枠：#a0a0a0 / 角丸：15px
========================= */
.sales-day {
  padding: 20px 0 2px 0;
}

.sales-day__inner {
  max-width: 770px;
  margin: 0 auto;
  padding: 40px 60px;

  background: #f9ffff;
  border: 1px solid #a0a0a0;
  border-radius: 15px;

  box-sizing: border-box;
}

/* タイトル */
.sales-day__title {
  margin: 0 0 28px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: #000;
}

/* =========================
  UL を「画面の真ん中」に
  → UL をブロックとして中央寄せ + 幅制御
========================= */
.sales-day__timeline {
  position: relative;
  list-style: none;

  /* ★中央寄せ */
  max-width: 600px;     /* ←必要なら調整（= 中身の行幅） */
  margin: 0 auto;       /* ←UL自体を中央へ */
  width: 100%;

  /* ライン＋ドットのための左余白 */
  padding: 0 0 0 15px;
  box-sizing: border-box;
}

/* 縦ライン */
.sales-day__timeline::before {
  content: "";
  position: absolute;
  left: 32px;
  top: 1px;
  bottom: 6px;
  width: 2px;
  background: #b9b9b9;
}

/* 各行 */
.sales-day__item {
  position: relative;
  padding: 10px 0 20px 20px;
}

.sales-day__item:last-child {
  padding-bottom: 0;
}

/* ドット（縦ラインの中央に配置） */
.sales-day__dot {
  position: absolute;
  left: 10px;   /* ←ライン中央に合わせる */
  top: 18px;
  width: 16px;
  height: 16px;
  border-radius: 999px;
  background: #9e9e9e;
}

/* 内容 */
.sales-day__content {
  padding-left: 0;
}

/* 上段（時計＋時刻＋ラベル） */
.sales-day__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
	margin-left: 20px;
}

/* 時計アイコン（後で差し替えOK） */
.sales-day__clock {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
}

.sales-day__clock img {
  width: 22px;
  height: auto;
  display: block;
}

/* 時刻 */
.sales-day__time {
  margin: 0;
  font-size: 19px;
  font-weight: 600;
  min-width: 64px;
}

/* 青見出し */
.sales-day__label {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #0b7fd3;
}

/* 説明文 */
.sales-day__text {
  margin: 0;
  font-size: 15px;
  line-height: 1.9;
  color: #000;
	padding-left: 20px;
}

/* =========================
  レスポンシブ
========================= */
@media (max-width: 768px){
	
/* =========================
  営業のとある一日（外枠カード）
  内側：#f8ffff / 外枠：#a0a0a0 / 角丸：15px
========================= */
.sales-day {
  padding: 20px 0 2px 0;
}

.sales-day__inner {
  max-width: 770px;
  margin: 0 auto;
  padding: 40px 60px;

  background: #f9ffff;
  border: 1px solid #a0a0a0;
  border-radius: 15px;

  box-sizing: border-box;
}

/* タイトル */
.sales-day__title {
  margin: 0 0 28px;
  text-align: center;
  font-size: 22px;
  font-weight: 700;
  color: #000;
}

/* =========================
  UL を「画面の真ん中」に
  → UL をブロックとして中央寄せ + 幅制御
========================= */
.sales-day__timeline {
  position: relative;
  list-style: none;

  /* ★中央寄せ */
  max-width: 600px;     /* ←必要なら調整（= 中身の行幅） */
  margin: 0 auto;       /* ←UL自体を中央へ */
  width: 100%;

  /* ライン＋ドットのための左余白 */
  padding: 0!important;
  box-sizing: border-box;
}

/* 縦ライン */
.sales-day__timeline::before {
  display: none;
}

/* 各行 */
.sales-day__item {
  position: relative;
  padding: 10px 0 20px 0;
}

.sales-day__item:last-child {
  padding-bottom: 0;
}

/* ドット（縦ラインの中央に配置） */
.sales-day__dot {
  display: none;
}

/* 内容 */
.sales-day__content {
  padding-left: 0;
}

/* 上段（時計＋時刻＋ラベル） */
.sales-day__head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 5px;
	margin-left: 0;
}

/* 時計アイコン（後で差し替えOK） */
.sales-day__clock {
  width: 34px;
  height: 34px;
  border-radius: 999px;
  display: grid;
  place-items: center;
}

.sales-day__clock img {
  width: 22px;
  height: auto;
  display: block;
}

/* 時刻 */
.sales-day__time {
  margin: 0;
  font-size: 18px!important;
  font-weight: 600;
  min-width: 64px;
}

/* 青見出し */
.sales-day__label {
  margin: 0;
  font-size: 18px!important;
  font-weight: 600;
  color: #0b7fd3;
}

/* 説明文 */
.sales-day__text {
  margin: 0;
  font-size: 16px!important;
  line-height: 1.9;
  color: #000;
	padding-left: 0;
}
}



@media (max-width: 640px) {
  .sales-day__inner {
    padding: 30px 20px;
  }

  /* ULは中央のまま、幅を少し詰める */
  .sales-day__timeline {
    max-width: 100%;
    padding-left: 0;
  }

  .sales-day__timeline::before {
    left: 18px;
  }

  .sales-day__dot {
    left: 10px;
  }

  .sales-day__time {
    min-width: auto;
    font-size: 18px;
  }

  .sales-day__label {
    font-size: 16px;
  }

  .sales-day__text {
    font-size: 13px;
  }
}

/* =========================
  職種カード一覧
========================= */
.role-grid {
  padding: 40px 0 30px 0;
}

.role-grid__inner {
  max-width: 880px;
  margin: 0 auto;
  padding: 0 20px;
}

/* グリッド */
.role-grid__list {
  list-style: none;
  margin: 0;
  padding: 0;

  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}

/* カード */
.role-card {
  background: #ffffff;
  border: 2px solid #2f3d55;
  border-radius: 15px;
  padding: 10px 16px 15px;
  text-align: center;
  box-sizing: border-box;
}

/* アイコン枠 */
.role-card__icon {
  width: 120px;
  height: 120px;
  margin: 0 auto 12px;
  display: grid;
  place-items: center;
}

.role-card__icon img {
  width: 60%;
  height: auto;
  display: block;
}

/* 職種名 */
.role-card__label {
  margin: 15px 0 0 0;
  font-size: 16px;
  font-weight: 600;
  color: #2f3d55;
}

/* =========================
  個別アイコンサイズ調整
========================= */

.role-card--keiei .role-card__icon img {
  width: 65%;
  margin-top: 10px;
}

.role-card--jinji .role-card__icon img {
  width: 62%;
	margin-top: 10px;
}

.role-card--programmer .role-card__icon img {
  width: 57%;
	margin-top:12px;
}

.role-card--designer .role-card__icon img {
  width: 59%;
	margin-top:12px;
}

.role-card--shinko .role-card__icon img {
  width: 59%;
	margin-top:6px;
}

.role-card--customer .role-card__icon img {
  width: 59%;
	margin-top:3px;
}

.role-card--movie .role-card__icon img {
  width: 59%;
  margin-top: 9px;
}

.role-card--camera .role-card__icon img {
  width: 59%;
	margin-top: 8px;
}

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

/* タブレット */
@media (max-width: 1000px) {
  .role-grid__list {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* =========================
  SP（〜768px）
========================= */
@media (max-width: 768px){

  .role-grid{
    padding: 25px 0 2px;
  }

  .role-grid__inner{
    padding: 0 ;
  }

  /* 2列固定 */
  .role-grid__list{
    grid-template-columns: repeat(2, 1fr);
    gap: 14px;
  }

  /* カード */
  .role-card{
    border-radius: 12px;
    padding: 10px 8px 12px;
  }

  /* アイコン枠 */
  .role-card__icon{
    width: 78px;
    height: 78px;
    margin-bottom: 6px;
  }

  /* 画像サイズ（共通を少し小さく） */
  .role-card__icon img{
    width: 68%;
	  margin-top: 0 !important;
  }

  /* 職種名 */
  .role-card__label{
    font-size: 15px;
    margin-top: 6px;
    line-height: 1.35;
  }

}


/* スマホ */
@media (max-width: 600px) {
  .role-grid__list {
    grid-template-columns: repeat(2, 1fr); /* ← 2列にする */
  }

  .role-card__icon {
    width: 100px;
    height: 100px;
  }

  .role-card__label {
    font-size: 15px;
  }
}

/* =========================
  キャリアパス
========================= */
.career-path {
  padding: 1px 0 80px 0;
}

.career-path__inner {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 40px;
}

/* 横並び */
.career-path__list {
  list-style: none;
  margin: 0;
  padding: 0;

  display: flex;
  align-items: flex-end;
  gap: 20px;
}

/* カード共通 */
.career-card {
  flex: 1;
  color: #ffffff;
}

/* 上の肩書 */
.career-card__level {
	font-size: 18px;
  text-align: center;
  font-weight: 700;
  margin-bottom: 7px;
}
/* レベル文字色 */
.career-card--1 .career-card__level {
  color: #2bb27c;
}

.career-card--2 .career-card__level {
  color: #33a4b5;
}

.career-card--3 .career-card__level {
  color: #de8c4e;
}

.career-card--4 .career-card__level {
  color: #cc7aa3;
}

/* 本体 */
.career-card__body {
  border-radius: 15px;
  padding: 5px 22px 24px;
}

/* 年数ラベル */
.career-card__year {
  background: #ffffff;
  border-radius: 7px;
  text-align: center;
  font-weight: 700;
  padding: 5px;
  margin-bottom: 12px;
}

/* 説明 */
.career-card__text {
  margin: 0;
  line-height: 1.8;
  font-size: 15px;
}

/* =========================
  各段階カラー＆高さ
========================= */

.career-card--1 .career-card__body {
  background: #2bb27c;
  min-height: 230px;
}

.career-card--1 .career-card__year {
  color: #2bb27c;
}

.career-card--2 .career-card__body {
  background: #33a4b5;
  min-height: 300px;
}

.career-card--2 .career-card__year {
  color: #33a4b5;
}

.career-card--3 .career-card__body {
  background: #de8c4e;
  min-height: 360px;
}

.career-card--3 .career-card__year {
  color: #de8c4e;
}

.career-card--4 .career-card__body {
  background: #cc7aa3;
  min-height: 420px;
}

.career-card--4 .career-card__year {
  color: #cc7aa3;
}

/* =========================
  レスポンシブ
========================= */
@media (max-width: 900px) {
  .career-path__list {
    flex-direction: column;
    align-items: stretch;
  }

  .career-card__body {
    min-height: auto;
  }
}

/* =========================
  SP：キャリアパスをスライド（横スクロール）表示
========================= */
@media (max-width: 768px){

  .career-path__inner{
    padding: 0 16px; /* スマホ余白 */
  }
	
	/* 年数ラベル */
.career-card__year {
  font-size: 16px;
}

  .career-path__list{
    display: flex;
    flex-direction: row;   /* ★ 900pxのcolumnを上書き */
    flex-wrap: nowrap;     /* ★ 折り返し禁止 */
    align-items: stretch;
    gap: 14px;

    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;

    padding: 0 16px 10px;
    margin: 0 -16px;
  }

  .career-path__list > .career-card{
    flex: 0 0 80%;
    scroll-snap-align: start;
  }

  /* 1枚あたりの幅（好みで調整） */
  .career-card{
    flex: 0 0 86%;
    scroll-snap-align: start;
  }

  /* PC用の「高さ段差」が邪魔ならSPでは揃える */
  .career-card__body{
    min-height: 260px !important; /* 好きな高さ */
  }
	

  /* 文字や余白をSP向けに */
  .career-card__level{
    font-size: 18px;
    margin-bottom: 8px;
  }
  .career-card__text{
    font-size: 16px;
    line-height: 1.7;
  }

  /* スクロールバーを薄く（任意） */
  .career-path__list{
    scrollbar-width: thin; /* Firefox */
  }
  .career-path__list::-webkit-scrollbar{
    height: 6px;
  }
	
	.career-card{ flex-basis: 80%; }
	
	.career-path{
		padding: 1px 0 20px 0;
	}
}



/* =========================
  求める人物像（アイコン＋タイトル＋説明）
========================= */

/* ここを触ると“全体の基準値”が変えられます */
.persona{
  padding: 70px 0 50px 0;
}

.persona__inner{
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}

/* リスト全体の行間（＝各ブロックの縦の間隔） */
.persona__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 42px; /* ← ブロック間の余白を一括調整 */
}

/* 1行（ブロック） */
.persona__item{
  display: grid;
  grid-template-columns: 110px 1fr; /* ← 左(アイコン枠) / 右(テキスト) */
  align-items: start;
  column-gap: 32px; /* ← アイコンとテキストの距離 */
}

/* テキスト側のまとまり */
.persona__texts{
  display: flex;
  flex-direction: column;
}

/* アイコン枠（左の角丸ボックス） */
.persona__icon{
  width: 110px;     /* ← 枠サイズ（必要なら個別で上書き） */
  height: 110px;
  border-radius: 10px;
  background: #23324c;
  display: grid;
  place-items: center;
  overflow: hidden; /* ← はみ出し防止 */
}

/* 中のSVG/画像のサイズ（個別調整できるように） */
.persona__icon img{
  width: 65%;     /* ← 基準：中身のサイズ */
  height: 65%;
  object-fit: contain;
  display: block;
}



/* タイトル */
.persona__text{
  margin: 6px 0 0;
  font-size: 21px;
  font-weight: 600;
  color: #23324c;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

/* 説明（追加） */
.persona__desc{
  margin: 6px 0 0;     /* ← タイトルとの距離 */
  font-size: 15px;     /* ← 指定：15pxくらい */
  line-height: 1.8;
  color: #000;    
}

/* =========================
  個別調整用（必要な分だけ触ればOK）
  - アイコンの大きさ：.persona__icon--0X / .persona__icon--0X img
  - ブロックの余白：.persona__item--0X { margin-top/bottom }
  - タイトル/説明の位置：.persona__text--0X / .persona__desc--0X
========================= */

/* 中のアイコンだけ個別にサイズ変更したい */
.persona__icon--01 img{ width: 72%; height: 72%; }
.persona__icon--02 img{ width: 68%; height: 68%; }
.persona__icon--03 img{ width: 74%; height: 74%; }
.persona__icon--04 img{ width: 70%; height: 70%; }
.persona__icon--05 img{ width: 66%; height: 66%; }
.persona__icon--06 img{ width: 78%; height: 78%; }

/* 特定ブロックだけ上下余白を増減したい（例） 
.persona__item--02{ margin-top: 6px; }
.persona__item--05{ margin-top: 10px; }*/

/* タイトル位置を微調整したい（例） */
.persona__text--03{ margin-top: 10px; }

/* 説明位置を微調整したい（例） */
.persona__desc--03{ margin-top: 8px; }

/* =========================
  レスポンシブ
========================= */
@media (max-width: 900px){
  .persona__list{
    gap: 40px;
  }

  .persona__item{
    grid-template-columns: 96px 1fr;
    column-gap: 22px;
  }

  .persona__icon{
    width: 96px;
    height: 96px;
    border-radius: 16px;
  }

  .persona__text{
    font-size: 18px;
  }

  .persona__desc{
    font-size: 14px;
  }
}

@media (max-width: 768px){

	/* ここを触ると“全体の基準値”が変えられます */
.persona{
  padding: 70px 0 50px 0;
}

.persona__inner{
  max-width: 95%;
  margin: 0 auto;
  padding: 0 ;
  box-sizing: border-box;
}

/* リスト全体の行間（＝各ブロックの縦の間隔） */
.persona__list{
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 42px; /* ← ブロック間の余白を一括調整 */
}

/* 1行（ブロック） */
.persona__item{
  display: grid;
  grid-template-columns: 110px 1fr; /* ← 左(アイコン枠) / 右(テキスト) */
  align-items: start;
  column-gap: 32px; /* ← アイコンとテキストの距離 */
}

/* テキスト側のまとまり */
.persona__texts{
  display: flex;
  flex-direction: column;
}

/* アイコン枠（左の角丸ボックス） */
.persona__icon{
  width: 100px;     /* ← 枠サイズ（必要なら個別で上書き） */
  height: 100px;
  border-radius: 10px;
  background: #23324c;
  display: grid;
  place-items: center;
  overflow: hidden; /* ← はみ出し防止 */
}

/* 中のSVG/画像のサイズ（個別調整できるように） */
.persona__icon img{
  width: 65%;     /* ← 基準：中身のサイズ */
  height: 65%;
  object-fit: contain;
  display: block;
}



/* タイトル */
.persona__text{
  margin: 6px 0 0;
  font-size: 21px;
  font-weight: 600;
  color: #23324c;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

/* 説明（追加） */
.persona__desc{
  margin: 6px 0 0;     /* ← タイトルとの距離 */
  font-size: 15px;     /* ← 指定：15pxくらい */
  line-height: 1.8;
  color: #000;    
}

/* =========================
  個別調整用（必要な分だけ触ればOK）
  - アイコンの大きさ：.persona__icon--0X / .persona__icon--0X img
  - ブロックの余白：.persona__item--0X { margin-top/bottom }
  - タイトル/説明の位置：.persona__text--0X / .persona__desc--0X
========================= */

/* 中のアイコンだけ個別にサイズ変更したい */
.persona__icon--01 img{ width: 72%; height: 72%; }
.persona__icon--02 img{ width: 68%; height: 68%; }
.persona__icon--03 img{ width: 74%; height: 74%; }
.persona__icon--04 img{ width: 70%; height: 70%; }
.persona__icon--05 img{ width: 66%; height: 66%; }
.persona__icon--06 img{ width: 78%; height: 78%; }

/* 特定ブロックだけ上下余白を増減したい（例） 
.persona__item--02{ margin-top: 6px; }
.persona__item--05{ margin-top: 10px; }*/

/* タイトル位置を微調整したい（例） */
.persona__text--03{ margin-top: 10px; }

/* 説明位置を微調整したい（例） */
.persona__desc--03{ margin-top: 8px; }
}

@media (max-width: 520px){
  .persona{
    padding: 28px 0 8px 0;
  }

  .persona__list{
    gap: 28px;
  }

  .persona__item{
    grid-template-columns: 76px 1fr;
    column-gap: 5px;
  }

  .persona__icon{
    width: 65px;
    height: 65px;
    border-radius: 10px;
  }

  .persona__text{
    font-size: 18px;
    letter-spacing: 0.02em;
  }

  .persona__desc{
    font-size: 15px;
  }
}

/* =========================
   個別SVG位置調整
   translate(X, Y)
   X: +で右 / -で左
   Y: +で下 / -で上
========================= */

.persona__icon--01 img{
  width: 72%;
  transform: translate(1px, -2px);
}

.persona__icon--02 img{
  width: 68%;
  transform: translate(1.1px, 1px);
	margin-bottom: 3px;
}

.persona__icon--03 img{
  width: 74%;
  transform: translate(2px, 3px);
	margin-bottom: 5px;
}

.persona__icon--04 img{
  width: 65%;
  transform: translate(-1px, 1px);
}

.persona__icon--05 img{
  width: 68%;
  transform: translate(2px, 3px);
	margin-bottom: 5px;
}

.persona__icon--06 img{
  width: 70%;
  transform: translate(3px, 0px);
	margin-right: 4px;
}

/* =========================
   新卒募集要項
========================= */
.recruit-spec {
  padding: 50px 20px 10px 20px;
}

.recruit-spec__inner {
  max-width: 850px;
  margin: 0 auto;
}

.recruit-spec__title {
  text-align: center;
  font-size: clamp(20px, 2.2vw, 25px);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #23324c;
  margin-bottom: 28px;
}

/* ====== 表（dl） ====== */
.spec-table {
  border-top: 1px solid #d7dde7;
}

.spec-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  column-gap: 28px;
  padding: 22px 0;
  border-bottom: 1px solid #d7dde7;
}

.spec-th {
  font-weight: 600;
  color: #23324c;
  line-height: 1.6;
  font-size: 18px;
}

.spec-td {
  color: #23324c;
  line-height: 1.9;
  margin: 0; /* ddのデフォルト余白を潰す */
  min-width: 0;
  font-size: 16px;
}

.spec-text {
  margin: 0 0 10px;
  font-weight: 600;
}

.spec-list {
  margin: 0;
  padding-left: 1.2em;
}

.spec-list li {
  margin: 6px 0;
}

/* ====== 下部CTA（画像差し替え枠） ====== */
.recruit-spec__cta {
  display: flex;
  justify-content: center;
  margin: 60px auto 20px auto;
}

.cta-banner {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  border-radius: 10px;
  padding: 10px;
  background: #fff;
  transition: transform 0.2s ease;
  max-width: 360px;
  width: min(360px, 90%);
}

.cta-banner img {
  width: 190px;   /* ← 好きなサイズに */
  height: auto;   /* 縦横比を維持 */
}


/* hover（不要なら削除OK） */
@media (hover: hover) {
  .cta-banner:hover {
    transform: translateY(-1px);
  }
}

/* =========================
   Responsive
========================= */
@media (max-width: 768px) {
	.recruit-spec {
  padding: 50px 0 10px 0;
}
	
	.recruit-spec__inner {
  max-width: 95%;
  margin: 0 auto;
}
	
  .spec-row {
    grid-template-columns: 1fr; /* 縦積み */
    row-gap: 8px;
    padding: 18px 0;
  }

  .spec-th {
    font-size: 18px!important;
  }

  .spec-td {
    font-size: 16px;
  }
}

/* =========================
   中途募集要項
========================= */
.career-spec__inner{
	width: 850px;
	margin: 0 auto;
}

.career-spec{
  padding: 50px 20px 10px 20px;
}


.career-spec__title{
  text-align: center;
  font-size: clamp(20px, 2.2vw, 25px);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #23324c;
  margin-bottom: 18px;
}

/* =========================
   職種ナビ（ページ内リンク）
========================= */
.job-nav{
  display: flex;
  justify-content: center;
  gap: 80px;
  margin: 0 0 10px;
  flex-wrap: wrap;
}

.job-nav__btn{
	margin: 40px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 999px;
  border: 2px solid #0b71c7;
  background: #fff;
  color: #0b71c7;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
	/* ★追加 */
  transition: 
    background-color 0.1s ease,
    color 0.3s ease,
    transform 0.3s ease,
    border-color 0.3s ease;
}

/* active（初期はコンサル営業が青） */
.job-nav__btn.is-active{
  background: #0b71c7;
  color: #fff;
}

/* hover：非active時だけ青に */
@media (hover:hover){
  .job-nav__btn:not(.is-active):hover{
    background: #0b71c7;
    color: #fff;
    transform: translateY(-1px);
  }
}

/* 飛び先のヘッダー被り対策（追従ナビがある場合調整） */
#job-consulting, #job-cs{
  scroll-margin-top: 310px;
}

/* =========================
   ブロック
========================= */
.job-block{
  padding-top: 16px;
}

.job-block + .job-block{
  margin-top: 1px;
}

.job-block__title{
  font-size: 21px;
  font-weight: 700;
  color: #23324c;
  margin: 18px 0 14px;
}

/* =========================
   表（dl）
========================= */
.spec-table{
  border-top: 1px solid #d7dde7;
}

.spec-row{
  display: grid;
  grid-template-columns: 200px 1fr;
  column-gap: 28px;
  padding: 22px 0;
  border-bottom: 1px solid #d7dde7;
}

.spec-th{
  font-weight: 600;
  color: #23324c;
  line-height: 1.6;
  font-size: 18px;
}

.spec-td{
  color: #23324c;
  line-height: 1.9;
  margin: 0;
  min-width: 0;
  font-size: 16px;
}

.spec-text{
  margin: 0 0 10px;
  font-weight: 600;
}

.spec-note{
  margin: 8px 0 0;
  font-size: 14px;
  color:#23324c;
  line-height: 1.7;
}

.spec-list{
  margin: 8px 0 0;
  padding-left: 1.2em;
}

.spec-list li{
  margin: 6px 0;
}

.spec-sub{
  margin-top: 12px;
}

.spec-sub__title{
  margin: 12px 0 6px;
  font-weight: 700;
  font-size: 16px;
  color: #23324c;
}

.spec-link{
  color: #0b71c7;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* =========================
   エントリーボタン（画像の代替：枠＋アイコン）
========================= */
.career-spec__cta{
  display: flex;
  justify-content: center;
  margin: 70px 0 90px 0;
}

.entry-btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  width: min(760px, 100%);
  padding: 40px 20px;
  border: 2px solid #23324c;
  border-radius: 15px;
  text-decoration: none;
  color: #fff;
  background: #23324c;
  font-weight: 700;
	
 /* ★追加 */
  transition: background-color 0.35s ease,
    color 0.1s ease,
    transform 0.1s ease,
    border-color 0.1s ease;
}

.entry-btn__icon{
  width: 34px;
  height: 34px;
  border-radius: 999px;
  border: 2px solid #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
	/* ★追加 */
  transition: border-color 0.1s ease;
}

.entry-btn__text{
  font-size: 16px;
  letter-spacing: 0.08em;
}

@media (hover:hover){
  .entry-btn:hover{
    transform: translateY(-1px);
    background: #fff;
    color: #23324c;
  }
  .entry-btn:hover .entry-btn__icon{
    border-color: #23324c;
  }
	
	
}

/* =========================
   Responsive
========================= */
@media (max-width: 768px){
	.career-spec__inner{
	width: 95%;
	margin: 0 auto;
}
	.entry-btn{
  padding: 60px 20px;
  border: 2px solid #23324c;
  border-radius: 10px;
  text-decoration: none;
  color: #fff;
  background: #23324c;
  font-weight: 700;
	}

.career-spec{
  padding: 50px 20px 10px 20px;
}
	
	/* =========================
   職種ナビ（ページ内リンク）
========================= */
.job-nav{
  display: flex;
  justify-content: center;
  gap: 80px;
  margin: 0 0 10px;
  flex-wrap: wrap;
}

.job-nav__btn{
	margin: 15px 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  border-radius: 999px;
  border: 2px solid #0b71c7;
  background: #fff;
  color: #0b71c7;
  text-decoration: none;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
	/* ★追加 */
  transition: 
    background-color 0.1s ease,
    color 0.3s ease,
    transform 0.3s ease,
    border-color 0.3s ease;
}
	
  .job-nav{
    gap: 5px;
  }
  .job-nav__btn{
    width: min(260px, 100%);
    padding: 20px 16px;
  }

  .spec-row{
    grid-template-columns: 1fr;
    row-gap: 8px;
    padding: 18px 0;
  }

  .spec-th{
    font-size: 18px;
  }

  .spec-td{
    font-size: 16px;
  }

  .entry-btn{
    padding: 18px 16px;
    gap: 12px;
  }

  .entry-btn__text{
    font-size: 15px;
  }
}

/* Works内だけ industry-button の影響を遮断 */
.section-works .works-button{
  display: inline-block;
}

/* PCレイアウトの安定化（干渉防止） */
.section-works .works-content{
  display: flex;
  align-items: center;
  justify-content: space-between;
}


/*
@media (hover: hover) and (pointer: fine){
  .industry-button a{
    transition: color .25s ease;
  }
  .industry-button a::after{
    transition: width .25s ease;
  }

  
}*/

/* ===== もっと見るボタン：hover/疑似要素/transition を無効化して挙動統一 ===== */

/* 3ボタン共通：hoverで見た目が変わらないようにする */
.industry-button a:hover,
.works-button a:hover,
.profile-button a:hover{
  transform: none;
  filter: none;
  opacity: 1;
  box-shadow: none;
}

/* industry-button の丸・矢印を消す（疑似要素無効化） */
.industry-button a::before,
.industry-button a::after,
.industry-button a:hover::before,
.industry-button a:hover::after{
  content: none !important;
}

/* transition を止める（hoverでズレたりチラつくのを防止） */
.industry-button a{
  transition: none !important;
}

/* =========================
新もっと見る「Our Industry」   
========================= */

/* ラッパー（配置） */
.more-btn_industry{
  align-items: center;
  display: flex;
  justify-content: flex-start; /* 必要なら center に */
}

/* ボタン本体：前回の挙動をここで殺す */
.more-btn_industry .more-btn__link{
  /* ---- 前回のアニメ/transform等を無効化 ---- */
  animation: none !important;
  transform: none !important;

  /* transitionは“ホバー色変化だけ”に限定（完全に無くしたいなら none に） */
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;

  /* ---- デザイン ---- */
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 15px 55px 15px 30px; /* 右は矢印分の余白 */
  border-radius: 9999px;

  background: #23324c;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  border: 1px solid #23324c;
}

/* spanが入っているので文字周りのズレ防止 */
.more-btn_industry .more-btn__link span{
  display: inline-block;
}

/* 右矢印（静的） */
.more-btn_industry .more-btn__link::after{
  content:"";
  position:absolute;
  top:50%;
  right: 23px;

  width: 8px;
  height: 8px;

  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);

  /* 矢印が動く挙動も消す */
  transition: none !important;
}

/* hover（色だけ変える：動かさない） */
.more-btn_industry .more-btn__link:hover{
  background: #fff;
  color: #23324c;
  border-color: #23324c;
}

/* フォーカス（アクセシビリティ） */
.more-btn_industry .more-btn__link:focus-visible{
  outline: 3px solid rgba(0,136,212,.35);
  outline-offset: 3px;
}

/* =========================
   SP調整
========================= */
@media (max-width: 768px){
  .more-btn_induustry{
    margin-top: 14px;
  }

  .more-btn_industry .more-btn__link{
    padding: 19px 60px 19px 30px;
    font-size: 15px;
  }

  .more-btn_industry .more-btn__link::after{
    right: 30px;
    width: 7px;
    height: 7px;
  }
	
	
}

/* =========================
新もっと見る「Our Works」
========================= */

/* ラッパー（配置） */
.more-btn_works{
  margin-top: 18px;
  display: flex;
  justify-content: flex-start; /* 左揃え */
}

/* ボタン本体：前回の挙動をここで殺す */
.more-btn_works .more-btn__link{
  /* ---- 前回のアニメ/transform等を無効化 ---- */
  animation: none !important;
  transform: none !important;

  /* transitionは“ホバー色変化だけ”に限定 */
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;

  /* ---- デザイン（Industryと同等） ---- */
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 15px 55px 15px 30px; /* 右は矢印分の余白 */
  border-radius: 9999px;

  background: #23324c;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  border: 1px solid #23324c;
}

/* spanのズレ防止 */
.more-btn_works .more-btn__link span{
  display: inline-block;
}

/* 右矢印（静的） */
.more-btn_works .more-btn__link::after{
  content:"";
  position:absolute;
  top:50%;
  right: 23px;

  width: 8px;
  height: 8px;

  border-top: 2px solid currentColor;
  border-right: 2px solid currentColor;
  transform: translateY(-50%) rotate(45deg);

  /* 矢印が動く挙動も消す */
  transition: none !important;
}

/* hover（色だけ変える：動かさない） */
.more-btn_works .more-btn__link:hover{
  background: #fff;
  color: #23324c;
  border-color: #23324c;
}

/* フォーカス */
.more-btn_works .more-btn__link:focus-visible{
  outline: 3px solid rgba(0,136,212,.35);
  outline-offset: 3px;
}

/* =========================
   SP調整（Works）
========================= */
@media (max-width: 768px){
  .more-btn_works{
    margin-top: 14px;
	  display: flex;
  justify-content: center!important; /* 左揃え */
  }

  .more-btn_works .more-btn__link{
    padding: 19px 60px 19px 30px;
    font-size: 15px;
  }

  .more-btn_works .more-btn__link::after{
    right: 30px;
    width: 7px;
    height: 7px;
  }
}

/* =========================
新もっと見る「Profile」
========================= */

/* ラッパー */
.more-btn_profile{
  margin-top: 18px;
  display: flex;
  justify-content: flex-start;
}

/* ボタン本体 */
.more-btn_profile .more-btn__link{
  /* 旧挙動を完全停止 */
  animation: none !important;
  transform: none !important;

  /* 色反転だけ許可 */
  transition: background-color .25s ease, color .25s ease, border-color .25s ease;

  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 10px;

  padding: 15px 55px 15px 30px;
  border-radius: 9999px;

  background: #23324c;
  color: #fff;
  text-decoration: none;
  font-weight: 600;
  line-height: 1;
  border: 1px solid #23324c;
}

/* 文字ズレ防止 */
.more-btn_profile .more-btn__link span{
  display: inline-block;
}

/* 矢印 */
.more-btn_profile .more-btn__link::after{
  content:"";
  position:absolute;
  top:50%;
  right:23px;

  width:8px;
  height:8px;

  border-top:2px solid currentColor;
  border-right:2px solid currentColor;
  transform:translateY(-50%) rotate(45deg);

  transition:none !important;
}

/* hover：色のみ反転 */
.more-btn_profile .more-btn__link:hover{
  background:#fff;
  color:#23324c;
  border-color:#23324c;
}

/* フォーカス */
.more-btn_profile .more-btn__link:focus-visible{
  outline:3px solid rgba(0,136,212,.35);
  outline-offset:3px;
}

/* =========================
   SP
========================= */
@media (max-width:768px){

  .more-btn_profile{
    margin-top: 14px;
	  display: flex;
  justify-content: center!important; /* 左揃え */
  }

  .more-btn_profile .more-btn__link{
    padding: 19px 60px 19px 30px;
    font-size:15px;
  }

  .more-btn_profile .more-btn__link::after{
    right: 30px;
    width: 7px;
    height: 7px;
  }

}

/* =========================
   レスポンシブ：inner幅を95%に
   ========================= 
@media (max-width: 768px){
	
  .ad-now-inner,.sales-inner{
    width: 95%!important;
    margin: 0 auto;
    padding-left: 0;
    padding-right: 0;
  }
}*/