@charset "UTF-8";
/* TOPページ固有（値は claude-design-output/css/style.css の MV / TOP about / awards / agency banner / news） */

/* ---------- メインビュー（元データ .mv） ---------- */
.mo-mv { position: relative; overflow: hidden; padding: clamp(40px, 6vw, 72px) 0 clamp(56px, 7vw, 88px); background: var(--mo-light); }
/* 右側の幾何学パターン（作業者指示）。素材をサイトの緑系に色付けし（左はPNG側で透過フェード）、乗算で薄緑の背景になじませる。PCは画像全体を収める（contain） */
/* 模様の端が切り替わって見えないよう、枠を画像の実寸（高さ基準・縦長 1080x1600）に合わせ、端をマスクでぼかす（作業者指示） */
.mo-mv__bg { position: absolute; top: 0; right: 0; bottom: 0; aspect-ratio: 1080 / 1600; max-width: 60%; background: no-repeat right top / cover; mix-blend-mode: multiply; opacity: .5; pointer-events: none; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 55%); mask-image: linear-gradient(to right, transparent 0, #000 55%); }
/* スマホ・タブレット：背景は下部・右寄せで固定（作業者指示） */
@media (max-width: 899px) { .mo-mv__bg { top: auto; bottom: 0; width: 100%; max-width: none; height: 60%; aspect-ratio: auto; background-position: right bottom; background-size: cover; opacity: .45; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 45%); mask-image: linear-gradient(to bottom, transparent 0, #000 45%); } }
.mo-mv__in { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: clamp(32px, 5vw, 64px); align-items: center; }
.mo-mv__txt { display: flex; flex-direction: column; gap: 24px; min-width: 0; container-type: inline-size; }
.mo-mv__badge { align-self: flex-start; padding: 6px 16px; background: #fff; border: 1.5px solid var(--mo-line2); border-radius: 999px; font-size: 15px; font-weight: 700; color: var(--mo-green); }
.mo-mv__ttl { font-size: min(44px, 8cqi); line-height: 1.45; font-weight: 700; letter-spacing: .02em; color: var(--mo-ink); }
.mo-mv__lead { font-size: clamp(16px, 1.5vw, 17px); line-height: 1.9; color: var(--mo-text); }
.mo-mv__btns { display: flex; gap: clamp(8px, 2vw, 12px); margin-top: 4px; padding-bottom: 5px; }
/* MVボタン：サイズは元データの .btn-pill のまま、見た目を「文字＋矢印／ベタの立体影／ホバーで2px沈む」に
   （作業者指示：family-up.com「お仕事を見る」のデザイン。ぼかし影は使わない） */
.mo-btn-pill--3d { justify-content: center; gap: 8px; min-height: calc(clamp(24px, 6.5vw, 32px) + clamp(8px, 2vw, 12px) * 2 + 4px); padding: clamp(8px, 2vw, 12px) clamp(14px, 4vw, 30px); transition: transform .15s ease, box-shadow .15s ease, background-color .2s ease, color .2s ease; }
.mo-btn-pill__svg { flex: none; }
.mo-btn-pill--3d.mo-btn-pill--green { box-shadow: 0 5px 0 var(--mo-green-dd); }
.mo-btn-pill--3d.mo-btn-pill--green:hover { background: var(--mo-green); transform: translateY(2px); box-shadow: 0 3px 0 var(--mo-green-dd); }
.mo-btn-pill--3d.mo-btn-pill--white { box-shadow: 0 5px 0 var(--mo-green); }
.mo-btn-pill--3d.mo-btn-pill--white:hover { background: #fff; transform: translateY(2px); box-shadow: 0 3px 0 var(--mo-green); }
.mo-mv__visual { position: relative; padding: 0 0 28px 28px; }
@media (max-width: 899px) { .mo-mv__visual { order: -1; } }
.mo-mv__blob { position: absolute; left: 0; bottom: 0; width: 72%; height: 70%; background: var(--mo-light2); border-radius: 16px; }
/* #slideshow：CMSスライダーは高さ100%で外枠に追従するため、外枠を 4:3 で明示 */
#slideshow.mo-mv__photo { position: relative; isolation: isolate; aspect-ratio: 4 / 3; overflow: hidden; border-radius: 16px; background: #fff; }
/* CMSスライダーの各階層を外枠（4:3）の高さに合わせる（出力側の --swiper-wrapper-height は auto のため） */
#slideshow #cms-slider-1-1-area, #slideshow .slider_wrapper, #slideshow .main_slider__outer { height: 100%; }
#slideshow .slider_wrapper { --swiper-wrapper-height: 100%; }
/* CMSスライダー内の z-index より上に出す */
.mo-mv__illust { position: absolute; z-index: 2; pointer-events: none; }
.mo-mv__illust img { width: 100%; height: 100%; object-fit: contain; }
/* 商品写真は横長のため幅で指定（右上＝風呂入浴用〈黄〉、左＝救護用〈オレンジ〉）。写真の角に少し重ね、若干傾けてバランスを取る */
.mo-mv__illust--r { top: -40px; right: max(-28px, -2vw); width: clamp(120px, 15vw, 210px); height: clamp(80px, 10vw, 140px); --mo-rot: 8deg; transform: rotate(var(--mo-rot)); animation: mo-deco-anime 1.2s cubic-bezier(.87, .01, 0, .99) infinite; }
.mo-mv__illust--l { bottom: 40px; left: max(-24px, -2vw); width: clamp(110px, 13vw, 180px); height: clamp(76px, 9vw, 124px); --mo-rot: -8deg; transform: rotate(var(--mo-rot)); animation: mo-deco-anime2 1.2s cubic-bezier(.87, .01, 0, .99) infinite; }
@media (max-width: 639px) { .mo-mv__illust--r { top: -28px; right: 4px; width: 104px; height: 70px; } .mo-mv__illust--l { left: -6px; width: 96px; height: 64px; } }
/* 左右の担架：社内定番の deco-anime（右上）／deco-anime2（左）の動き。基準の傾き（±8°）から5°だけカチッと振れて戻る（作業者指示） */
@keyframes mo-deco-anime { 0%, 25% { transform: rotate(var(--mo-rot)); } 30%, 85% { transform: rotate(calc(var(--mo-rot) + 5deg)); } 90%, 100% { transform: rotate(var(--mo-rot)); } }
@keyframes mo-deco-anime2 { 0%, 35% { transform: rotate(var(--mo-rot)); } 40%, 95% { transform: rotate(calc(var(--mo-rot) - 5deg)); } 100% { transform: rotate(var(--mo-rot)); } }
@media (prefers-reduced-motion: reduce) { .mo-mv__illust { animation: none; } }

/* ---------- ベルカ担架とは（元データ .about） ---------- */
.mo-about__head { display: flex; flex-direction: column; gap: 22px; margin-bottom: clamp(28px, 3.5vw, 40px); }
.mo-about__head .mo-shead { margin-bottom: 0; }
.mo-about__catch { font-size: clamp(18px, 5vw, 28px); line-height: 1.6; font-weight: 700; letter-spacing: .02em; color: var(--mo-green); }
.mo-about__img { position: relative; }
/* 人物写真（白背景を透過したPNG）の後ろに体育館の写真をぼかして敷く（作業者指示）。人物は薄くせずそのまま重ねる */
.mo-about__photo { isolation: isolate; }
/* 人物は見下ろしの構図なので、背景を拡大・下寄せにして床を広く見せ、床と壁の境目を頭より上に（作業者指示） */
.mo-about__photo-bg { position: absolute; inset: -12px; z-index: 0; background: no-repeat center bottom / auto 140%; filter: blur(8px) brightness(1.08); }
.mo-ratio.mo-about__photo > img { z-index: 1; filter: drop-shadow(0px 0px 20px white); }
.mo-about__illust { position: absolute; left: max(-20px, -1.5vw); bottom: -28px; width: clamp(100px, 13vw, 160px); height: clamp(100px, 13vw, 160px); }
.mo-about__illust svg { display: block; width: 100%; height: 100%; }
.mo-about__body { display: flex; flex-direction: column; gap: 22px; }
.mo-points { display: flex; flex-direction: column; gap: 12px; }
.mo-point { display: flex; align-items: flex-start; gap: clamp(8px, 2.5vw, 14px); padding: 16px clamp(12px, 3.5vw, 18px); background: var(--mo-light); border-radius: 12px; }
.mo-point__ck { flex: none; width: clamp(22px, 6vw, 28px); height: clamp(22px, 6vw, 28px); margin-top: 2px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; border: 2px solid var(--mo-green-a); color: var(--mo-green); font-size: clamp(11px, 3vw, 14px); font-weight: 700; }
.mo-point__ttl { display: block; font-size: clamp(14.5px, 3.9vw, 17px); color: var(--mo-green); }
.mo-point__txt { display: block; font-size: var(--mo-fz-s); line-height: 1.8; }

/* ---------- 認証・受賞・掲載歴（元データ .award：12列で 4枚＋3枚） ---------- */
.mo-award-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px; }
.mo-award { grid-column: span 3; display: flex; flex-direction: column; gap: 12px; padding: 26px 24px; background: #fff; border-radius: 16px; color: var(--mo-text); }
.mo-award:nth-child(n+5) { grid-column: span 4; }
@media (max-width: 899px) {
  .mo-award, .mo-award:nth-child(n+5) { grid-column: span 6; }
  .mo-award:nth-child(7) { grid-column: span 12; }
}
@media (max-width: 639px) {
  .mo-award, .mo-award:nth-child(n+5), .mo-award:nth-child(7) { grid-column: span 12; }
}
.mo-award__top { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.mo-award__tag { padding: 2px 14px; background: var(--mo-green); border: 1.5px solid var(--mo-green); border-radius: 999px; color: #fff; font-size: 14px; font-weight: 700; }
.mo-award__year { font-family: "Nunito", sans-serif; font-size: 13px; font-weight: 700; color: #7A8580; }
.mo-award__org { font-size: 15px; font-weight: 700; line-height: 1.6; color: var(--mo-green); }
.mo-award__ttl { font-size: 18px; font-weight: 700; line-height: 1.6; color: var(--mo-ink); }

/* ---------- 代理店バナー・リンクカード（元データ .agbnr / .linkcard） ---------- */
.mo-agbnr { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 400px), 1fr)); overflow: hidden; background: #F3AE3F; border-radius: 24px; text-decoration: none; transition: background .3s ease; }
.mo-agbnr:hover { background: #EFA030; }
.mo-agbnr__txt { position: relative; display: flex; flex-direction: column; justify-content: center; gap: 16px; overflow: hidden; padding: clamp(32px, 5vw, 56px); color: #fff; }
.mo-agbnr__bg { position: absolute; right: -12px; bottom: -28px; font-family: "Nunito", sans-serif; font-size: clamp(72px, 10vw, 128px); font-weight: 800; line-height: 1; color: rgba(255, 255, 255, .28); white-space: nowrap; pointer-events: none; }
.mo-agbnr__en { position: relative; display: flex; align-items: center; gap: 10px; font-family: "Nunito", sans-serif; font-size: 15px; font-weight: 800; letter-spacing: .14em; }
.mo-agbnr__en::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: #fff; }
.mo-agbnr__ttl { position: relative; font-size: clamp(28px, 3.6vw, 40px); line-height: 1.4; font-weight: 700; }
.mo-agbnr__lead { position: relative; line-height: 1.85; }
.mo-agbnr__btn { position: relative; align-self: flex-start; display: flex; align-items: center; gap: 16px; margin-top: 8px; padding: 10px 10px 10px 26px; background: #fff; border-radius: 999px; color: var(--mo-head); font-size: 17px; font-weight: 700; }
.mo-agbnr__btn span { width: 34px; height: 34px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--mo-orange); color: #fff; font-size: var(--mo-fz-s); }
.mo-agbnr__img { position: relative; display: block; overflow: hidden; min-height: clamp(220px, 28vw, 340px); background: #EEF3F0; }
/* スマホ（1列）では写真を文字の上に（作業者指示） */
@media (max-width: 899px) { .mo-agbnr__img { order: -1; } }
.mo-agbnr__img > img, .mo-agbnr__img > .mo-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

.mo-links2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 24px; margin-top: 24px; }
.mo-linkcard { position: relative; display: flex; align-items: stretch; min-height: 200px; overflow: hidden; background: var(--mo-green); border-radius: 24px; text-decoration: none; transition: background .3s; }
.mo-linkcard:hover { background: var(--mo-green-d); }
.mo-linkcard__txt { flex: 1 1 50%; display: flex; flex-direction: column; justify-content: center; gap: 6px; min-width: 0; padding: 26px 24px 26px 28px; color: #fff; }
.mo-linkcard__en { font-family: "Nunito", sans-serif; font-size: 14px; font-weight: 800; letter-spacing: .14em; }
.mo-linkcard__ttl { font-size: clamp(24px, 2.8vw, 30px); line-height: 1.4; font-weight: 700; }
.mo-linkcard__img { position: relative; overflow: hidden; flex: 0 0 50%; background: #EEF3F0; }
.mo-linkcard__img > img, .mo-linkcard__img > .mo-ph { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
/* ホバーで写真を少し拡大（作業者指示。1.05倍・ゆっくり。枠からははみ出さない） */
.mo-agbnr__img > img, .mo-linkcard__img > img { transition: transform .6s ease; }
.mo-agbnr:hover .mo-agbnr__img > img, .mo-linkcard:hover .mo-linkcard__img > img { transform: scale(1.05); }
@media (prefers-reduced-motion: reduce) { .mo-agbnr__img > img, .mo-linkcard__img > img { transition: none; } }
.mo-linkcard__arr { position: absolute; right: 14px; bottom: 14px; width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: #fff; color: var(--mo-green); font-size: 16px; }
/* スマホ：写真をカード全体の背景に敷き、緑60％を重ねて白文字を載せる（作業者指示） */
@media (max-width: 639px) {
  .mo-linkcard { min-height: 150px; }
  .mo-linkcard__img { position: absolute; inset: 0; flex: none; }
  .mo-linkcard__img::after { content: ""; position: absolute; inset: 0; background: rgba(15, 122, 72, .6); transition: background .3s; }
  .mo-linkcard:hover .mo-linkcard__img::after { background: rgba(11, 94, 55, .7); }
  .mo-linkcard__txt { position: relative; z-index: 1; flex-basis: 100%; }
  .mo-linkcard__arr { z-index: 1; }
}

/* ---------- お知らせ（元データ .news-top / .newslist） ---------- */
.mo-news-top { display: flex; flex-wrap: wrap; align-items: flex-start; gap: clamp(24px, 4vw, 56px); }
/* 見出し列は中身の幅に合わせ、余った幅は記事一覧へ（作業者指示） */
.mo-news-top__head { flex: 0 0 auto; display: flex; flex-direction: column; gap: 18px; }
.mo-news-top__head .mo-shead { margin-bottom: 0; }
.mo-news-top__head .mo-btn { align-self: flex-start; }
.mo-news-top .mo-newslist { flex: 1 1 520px; min-width: 0; }

/* スマホ：四角いカード・画像・ボックスの角丸を一回り小さく（作業者指示。24→16／16→12／14→10／12→9／10→8／8→6px。丸いボタン999px・円は対象外） */
@media (max-width: 639px) {
  .mo-mv__blob { border-radius: 12px; }
  #slideshow.mo-mv__photo { border-radius: 12px; }
  .mo-point { border-radius: 9px; }
  .mo-award { border-radius: 12px; }
  .mo-agbnr { border-radius: 16px; }
  .mo-linkcard { border-radius: 16px; }
}

/* スマホ：文字サイズのバランス調整（作業者指示） */
@media (max-width: 639px) {
  .mo-about__catch { font-size: 17px; }
  .mo-award__ttl { font-size: 16px; }
  .mo-agbnr__bg { font-size: 56px; }
  .mo-agbnr__ttl { font-size: 23px; }
  .mo-linkcard__ttl { font-size: 20px; }
}

/* スマホ：写真の上に載る白文字は、読みやすいようにふわっとした影を付ける（作業者指示） */
@media (max-width: 639px) {
  .mo-linkcard__txt { text-shadow: 0 0 8px rgba(0, 50, 25, .3); }
}