/* =====================================================================
   site7 デザイン（style.css）を Laravel / CMS で使うための追加スタイル
   ===================================================================== */

/* ヒーロー見出し：CMS の HTML で強調色を付ける */
.p-fv__ttl .accent,.p-fv__line--red{color:var(--accent)}

/* CMS 出力の <span> が見出しなどの中で改行を崩さないように */
.c-head h2>span,.c-head .c-en>span{display:inline}

/* ---------- CMS 編集モード ---------- */
/* .photo の中の画像は絶対配置なので、編集用ラッパーも面いっぱいに広げてクリックできるようにする */
.photo>.cms-editable-image,.l-entry-link__bg>.cms-editable-image{position:absolute;inset:0;width:auto;height:auto}
.photo>.cms-editable-image .cms-image{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.photo>.cms-editable-image .cms-image-placeholder{position:absolute;inset:0;min-height:0}
.photo>.cms-editable-image:hover{outline-offset:-4px}
/* .photo の外で使う編集用画像 */
.cms-editable-image>.cms-image{display:block}
/* 管理者のときは出現アニメで隠さない（編集対象を見失わないように） */
.is-cms-admin .js-reveal{opacity:1;translate:none}
.is-cms-admin .c-loading{display:none}
/* リスト管理のラッパー：一覧のグリッドを壊さない */
.cms-list{position:relative}
.cms-list-items.p-slider__track>.cms-list-item{flex:0 0 min(380px,80vw)}
/* 編集ツールバーとヘッダーが重ならないように */
.is-cms-admin .c-pagetop{bottom:84px}
.is-cms-admin .c-fixcta{bottom:152px}

/* ---------- フォーム（Laravel のバリデーション表示） ---------- */
.c-form__error{flex:0 0 100%;font-size:14px;font-weight:700;color:var(--accent-dark)}
.c-form .is-invalid{border-color:var(--accent-dark);background:#fff}
.c-alert{background:var(--accent-tint);border:1px solid var(--accent);border-radius:16px;padding:18px 22px;font-size:15px;font-weight:700;color:var(--accent-dark)}
.c-alert ul{display:grid;gap:4px;margin-top:6px;font-weight:500}
.c-form__submit{margin-top:10px}
.c-form__submit .c-button{cursor:pointer}

/* ---------- お知らせ ---------- */
.p-news{display:grid;border-top:1px solid var(--line)}
.p-news__item a{display:grid;grid-template-columns:140px 120px 1fr;gap:20px;align-items:center;padding:24px 8px;border-bottom:1px solid var(--line);transition:background .3s}
.p-news__item a:hover{background:var(--accent-tint)}
.p-news__date{font-family:var(--ff-en);font-weight:700;color:var(--muted);letter-spacing:.06em}
.p-news__cat{justify-self:start;font-size:13px;font-weight:700;color:var(--accent);border:1px solid var(--accent);border-radius:20px;padding:2px 14px}
.p-news__ttl{font-size:17px;font-weight:700;line-height:1.6}
.p-news__empty{padding:60px 0;text-align:center;color:var(--muted)}
.p-article{max-width:860px}
.p-article__meta{display:flex;gap:16px;align-items:center;margin-bottom:24px}
.p-article__body{font-size:17px;line-height:2.1}
.p-article__body p+p{margin-top:1.4em}
.p-article__img{aspect-ratio:16/9;border-radius:24px;margin-bottom:40px}
.p-article__back{margin-top:60px}
@media (max-width:767px){
  .p-news__item a{grid-template-columns:auto 1fr;gap:8px 14px}
  .p-news__ttl{grid-column:1/-1}
}

/* ---------- 完了ページ ---------- */
.p-complete{max-width:720px;margin-inline:auto;text-align:center;padding:40px 0}
.p-complete__icon{width:88px;height:88px;margin:0 auto 30px;border-radius:50%;background:var(--accent);display:grid;place-items:center}
.p-complete__icon svg{width:40px;height:40px;fill:none;stroke:#fff;stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
.p-complete h2{font-size:clamp(24px,3vw,32px);font-weight:700;line-height:1.6}
.p-complete p{margin-top:18px;font-size:16px;line-height:2;color:var(--ink-2)}
.p-complete .c-button{margin:40px auto 0}


/* トップ「支援の流れ」：番号の丸（li>span）のスタイルが CMS 出力の <span> に及ばないように */
.p-business__flow li>div span{all:unset}

/* ---------- エラーページ（resources/views/errors） ---------- */
.p-error{position:relative;min-height:calc(100svh - 90px);display:flex;align-items:center;padding:150px 0 120px;overflow:hidden;background:var(--accent-tint)}
.p-error__inner{position:relative;z-index:1;text-align:center}
.p-error__code{font-size:clamp(96px,16vw,200px);line-height:1;color:var(--accent);letter-spacing:.04em}
.p-error__en{display:block;margin-top:10px;font-size:15px;color:var(--accent);letter-spacing:.2em;text-transform:uppercase}
.p-error__ttl{margin-top:18px;font-size:clamp(24px,3vw,36px);font-weight:700;line-height:1.5}
.p-error__lead{max-width:560px;margin:18px auto 0;font-size:16px;line-height:2;color:var(--ink-2)}
.p-error__btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap;margin-top:40px}
.p-error__loop{position:absolute;left:0;right:0;bottom:-.1em;z-index:0}
.p-error__loop .c-loop__text{color:rgba(254,77,77,.08)}
.p-error__leaf{position:absolute;right:8vw;top:18%;width:clamp(80px,8vw,140px);aspect-ratio:290/238;background:var(--accent);opacity:.85;border-radius:80% 0 80% 0/70% 0 70% 0;rotate:-20deg;pointer-events:none}
.p-error__footer{padding:24px 0}
.p-error__footer .l-footer__bottom{margin-top:0;padding-top:0;border-top:0}
@media (max-width:767px){
  .p-error{padding:120px 0 90px}
  .p-error__leaf{right:16px;top:90px;width:60px}
  .p-error__btns .c-button{min-width:0}
}

/* ---------- ロゴ（元の MIGHT ロゴマーク：public/images/might-mark.svg） ---------- */
.l-logo__mark{width:28px;height:28px;flex-shrink:0}
.c-loading__mark{width:40px;height:40px}
@media (max-width:767px){.l-logo__mark{width:24px;height:24px}}

/* =====================================================================
   トップのヒーロー写真：3 本のアーチ（style.css の 3 層構成を上書き）
   左＝.p-fv__bg / 中央＝.p-fv__main / 右＝.p-fv__person。JS の同期スライド・視差・マウス追従はそのまま使う
   ===================================================================== */
.p-fv__visual{aspect-ratio:700/600}
.p-fv__bg,.p-fv__main,.p-fv__person{rotate:none;bottom:auto;aspect-ratio:auto}
.p-fv__bg{left:0;top:24%;width:29%;height:68%}
.p-fv__main{left:33%;right:auto;top:2%;width:36%;height:88%}
.p-fv__person{left:auto;right:0;top:12%;width:27%;height:64%}
.p-fv__bg-item,.p-fv__main-item,.p-fv__person-img{border-radius:999px 999px 28px 28px;box-shadow:0 24px 60px rgba(51,51,51,.12)}
.p-fv__main-item{box-shadow:0 30px 70px rgba(51,51,51,.16)}
/* 右：旧デザインの白い台座と拡大アニメをやめ、他の 2 本と同じフェードに */
.p-fv__leafbg{display:none}
.p-fv__person-img,.p-fv__person-item.is-active .p-fv__person-img{inset:0;transform:none}
.p-fv__person-item.is-active{animation:fvbob 9s ease-in-out infinite alternate-reverse}
.p-fv__main-item.is-active{animation:fvbob 11s ease-in-out infinite alternate}
/* 中央アーチの後ろの線と、赤い点 */
.p-fv__visual::before{content:"";position:absolute;left:37%;top:-3%;width:36%;height:88%;border:1.5px solid var(--accent);border-radius:999px 999px 28px 28px;opacity:.45;pointer-events:none}
.p-fv__visual::after{content:"";position:absolute;left:27%;top:14%;width:16px;height:16px;border-radius:50%;background:var(--accent);pointer-events:none}
/* 中央の都市名ラベル */
.p-fv__cap{position:absolute;left:50%;bottom:22px;translate:-50% 0;z-index:2;display:flex;flex-direction:column;align-items:center;min-width:64%;padding:8px 18px;border-radius:40px;background:rgba(255,255,255,.92);backdrop-filter:blur(6px);text-align:center;line-height:1.3;white-space:nowrap}
.p-fv__cap b{font-family:var(--ff-en);font-size:15px;font-weight:800;letter-spacing:.06em;color:var(--ink)}
.p-fv__cap small{font-family:var(--ff-en);font-size:11px;font-weight:700;letter-spacing:.16em;color:var(--accent);text-transform:uppercase}
.p-fv__badge{right:0;bottom:-2%}
@media (max-width:767px){
  .p-fv__visual{aspect-ratio:1/1.02;margin-bottom:30px}
  .p-fv__bg{left:0;top:26%;width:29%;height:60%}
  .p-fv__main{left:33%;top:2%;width:36%;height:84%}
  .p-fv__person{left:auto;right:0;top:14%;width:27%;height:58%}
  .p-fv__visual::before{left:38%;width:36%;height:82%}
  .p-fv__visual::after{width:12px;height:12px}
  .p-fv__bg-item,.p-fv__main-item,.p-fv__person-img{border-radius:999px 999px 18px 18px}
  .p-fv__cap{bottom:12px;padding:6px 10px;min-width:84%}
  .p-fv__cap b{font-size:12px}
  .p-fv__cap small{font-size:9px}
  .p-fv__badge{bottom:-10%}
}

/* =====================================================================
   レスポンシブ調整（タブレット・スマホでの文字の大きさ／重なり／はみ出し）
   ===================================================================== */
/* グリッドの子が中身（表・タグ列など）の幅まで広がり、ページごと横にはみ出すのを防ぐ */
.l-lower>*,.p-contact>*,.c-feature>*,.c-access>*{min-width:0}

@media (max-width:1024px){
  /* トップのヒーロー：画面の高さ固定（sticky）をやめ、内容の高さに合わせる */
  .p-fv-wrap{height:auto;min-height:0}
  .p-fv-wrap .p-fv{position:relative;height:auto;min-height:0;max-height:none;padding:130px 0 80px}
  .p-over{margin-top:-28px}
  .p-fv__scroll,.p-fv__leaf,.rj-fv__leaf{display:none}
  .p-fv__visual{margin:0 auto 40px;width:100%}
  /* Mission の丸写真：本文に重ならず、画面の端で切れないよう、見出しの上の余白に小さく収める */
  .p-strength__bubble01{width:96px;left:24px;top:24px}
  .p-strength__bubble02{width:68px;right:28px;top:56px;bottom:auto}
  .p-over>.p-strength{padding-top:140px}
}

/* 採用ページのヒーロー：タブレットもスマホと同じ縦積みにする（3 列のままだと写真が細く、案内カードが被る） */
@media (min-width:768px) and (max-width:1024px){
  .rj-fv{padding:110px 0 40px}
  .rj-fv__grid{grid-template-columns:1fr;grid-template-areas:"main" "person";width:calc(100% - 48px);gap:24px;min-height:0;max-height:none}
  .rj-fv__bg{display:none}
  .rj-fv__main{margin:0 0 90px;aspect-ratio:16/10;max-height:none}
  .rj-fv__news{left:24px;right:24px;bottom:-70px;grid-template-columns:auto 1fr auto}
  .rj-fv__center{flex-direction:row;align-items:flex-end;justify-content:space-between;padding:0}
  .rj-fv__catch{font-size:32px}
  .rj-fv__person{width:30%}
}

@media (max-width:767px){
  /* 見出し：大きすぎて 1 文字だけ次の行に落ちるのを防ぐ */
  .p-fv-wrap .p-fv{padding:110px 0 70px}
  .p-fv__ttl{font-size:clamp(28px,8.2vw,40px);line-height:1.35}
  .p-fv__lead{font-size:15px}
  .c-head{margin-bottom:32px}
  .c-head h2,.c-head .ttl{font-size:clamp(22px,6.4vw,30px)}
  .c-head .c-en,.l-lower-fv .c-en{font-size:14px}
  .l-lower-fv h1{font-size:clamp(26px,7.4vw,34px)}
  .l-lower-fv p{font-size:15px}
  .p-strength__heading,.p-business__heading{font-size:clamp(22px,6.4vw,28px)}
  .p-business__en{font-size:28px}
  .c-lead,.p-strength__copy{font-size:15px}
  .rj-intro h2,.rj-seek__ttl,.rj-pos__ttl{font-size:clamp(24px,7vw,32px)}
  .rj-cv h2{font-size:clamp(26px,7.4vw,34px)}
  .l-entry__copy{font-size:clamp(20px,5.8vw,26px)}
  .c-quote p{font-size:17px}
  .c-quote__big{font-size:clamp(20px,6vw,26px)!important}
  .p-message__body h2{font-size:clamp(20px,6vw,26px)}
  .p-message__body h3{font-size:18px}
  .c-feature h3{font-size:20px}
  .c-card h3,.p-cards__list--4 .c-card h3{font-size:19px}
  .s-card h3{font-size:18px}
  /* 下層ページの見出し帯：番号＋タイトル＋英字を、タイトルが潰れないよう 2 段に */
  .c-sec-head{flex-wrap:wrap;align-items:center;gap:6px 12px;margin-bottom:24px}
  .c-sec-head h2{font-size:clamp(20px,5.8vw,24px);line-height:1.5;flex:1 1 0;min-width:0}
  .c-sec-head .c-en{order:3;flex-basis:100%;font-size:12px}
  /* 国カード：縦書きの英字が国名に重なるので非表示 */
  .country>span.country__en{display:none}
  .country b{font-size:17px}
  .country .c-en{font-size:11px}
  /* 大きいボタンが 2 行に折り返さないように */
  .c-button--big{min-width:0;width:100%;max-width:320px;padding:14px 64px 14px 24px;font-size:16px}
  .c-button--big .c-arrow,.c-arrow--big{width:40px;height:40px}
  .l-entry__btns .c-button{justify-content:center}
  .rj-entry--big{font-size:16px}
}

@media (max-width:767px){
  .p-strength__bubble01{width:80px;left:16px;top:20px}
  .p-strength__bubble02{width:56px;right:20px;top:44px}
  .p-over>.p-strength{padding-top:120px}
}
/* 支援実績のカード送り：スマホでは横スクロール（次のカードが端で切れて見える）をやめて縦に並べる */
@media (max-width:767px){
  .p-slider__ctrl{display:none}
  .p-slider__track,.cms-list-items.p-slider__track{flex-direction:column;overflow:visible;scroll-snap-type:none;margin-right:0;padding:0;gap:20px}
  .s-card,.cms-list-items.p-slider__track>.cms-list-item{flex:0 0 auto;width:100%}
}
/* タブレット・スマホでも Mission のカードがヒーローに重なってくる（高さ・位置は main.js の fvLayout が設定） */
@media (max-width:1024px){
  .p-fv-wrap.is-stack .p-fv{position:sticky}
  .p-fv-wrap.is-stack .p-fv__dim{display:block}
}

/* =====================================================================
   スマホのヒーロー：写真を画面いっぱいの背景にして、文字を重ねる
   （中央アーチ .p-fv__main のスライドを全面に広げ、左右のアーチは隠す）
   ===================================================================== */
@media (max-width:767px){
  .p-fv-wrap .p-fv{height:100svh;min-height:560px;max-height:none;padding:0 0 56px;display:flex;flex-direction:column;justify-content:flex-end;background:#1a1a1a}
  .p-fv__dots{display:none}
  /* 写真の基準を .p-fv 全体にする（grid の transform が基準を奪わないように） */
  .p-fv .p-fv__grid{position:static;transform:none!important;transform-style:flat;will-change:auto;width:calc(100% - 40px)}
  .p-fv .p-fv__visual{position:absolute;inset:0;aspect-ratio:auto;width:auto;margin:0;z-index:0}
  .p-fv__visual::before,.p-fv__visual::after{display:none}
  .p-fv__bg,.p-fv__person,.p-fv__badge{display:none}
  .p-fv .p-fv__main{position:absolute;inset:0;width:auto;height:auto;transform:none}
  .p-fv .p-fv__main-item{border-radius:0;box-shadow:none;animation:none}
  .p-fv__main::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(17,17,17,.45) 0%,rgba(17,17,17,.1) 30%,rgba(17,17,17,.25) 55%,rgba(17,17,17,.78) 100%)}
  /* 都市名ラベルは右上（ヘッダーの下）へ */
  .p-fv .p-fv__cap{top:92px;bottom:auto;left:auto;right:16px;translate:none;min-width:0;padding:6px 14px;align-items:flex-end}
  .p-fv .p-fv__cap b{font-size:13px}
  .p-fv .p-fv__cap small{font-size:10px}
  /* 文字は白で、写真の上に */
  .p-fv .p-fv__text{position:relative;z-index:2;color:#fff}
  .p-fv .p-fv__label{color:#fff}
  .p-fv .p-fv__label i{background:#fff}
  .p-fv .p-fv__ttl{color:#fff;text-shadow:0 2px 16px rgba(0,0,0,.35)}
  .p-fv .p-fv__ttl .accent,.p-fv .p-fv__line--red{color:#ff8f8f}
  .p-fv .p-fv__lead{color:rgba(255,255,255,.92)}
  .p-fv .p-fv__btns .c-button:not(.c-button--fill){background:rgba(255,255,255,.95)}
}