/* トップページ（public/pm.html）用。料金ページ（src/pages/price.html）も相談CTA・ページ先頭ボタン・見出しラベル（.t-contact / .t-pagetop / .t-label / .t-h2）に使う。
   現行 STUDIO 版（service.remodela.jp）のレイアウト・余白・文字サイズに合わせている。
   ブレークポイントは現行と同じ 1280 / 840 / 540 / 320px。
   --g-bright（見出しラベル・NEWS の副題などの文字の緑）は、白地で 4.5:1 以上になるよう現行の #309873 より一段濃くしている。 */
.t-page{--g:#286b4a;--g-bright:#277a5c;--mint:#f0f8f3;--sage:#94c9a6;--ink:#242528;--txt:#333;--deep:#085f2a;--orange:#fbbc46;--gray:#f6f7f9;--grad:linear-gradient(90deg,#ff6 0%,#ffb054 100%);--f:Overpass,'Noto Sans JP','Open Sans',sans-serif;font-family:var(--f);font-size:16px;line-height:1.4;font-weight:400;color:var(--txt);overflow-x:clip}
.t-main{display:block;background:#fff}
.t-main p{margin:0}
.t-main h1,.t-main h2,.t-main h3{margin:0;letter-spacing:normal;text-wrap:wrap;font-feature-settings:normal}
.t-main ul,.t-main ol{margin:0;padding:0;list-style:none}
.t-main img{max-width:100%;height:auto}
.t-main svg{display:block}

/* 表示アニメーション（現行と同じく、画面に入ったらフェード／30px 上へ） */
.js .t-main [data-appear]{transition:opacity var(--ad,.4s) var(--ae,cubic-bezier(.4,.4,0,1)) var(--adl,.4s),translate var(--ad,.4s) var(--ae,cubic-bezier(.4,.4,0,1)) var(--adl,.4s)}
.js .t-main [data-appear]:not(.is-in){opacity:var(--ao,0)}
.js .t-main [data-appear^="up"]:not(.is-in){translate:0 30px}
.js .t-main [data-appear="up20"]:not(.is-in){translate:0 20px}

/* ---------- ファーストビュー ---------- */
.t-fv{position:relative}
.t-fv__bg{position:absolute;left:0;top:0;width:100%;height:740px;opacity:.6;background:url(pm-assets/top/hero-bg.webp) center/cover no-repeat;pointer-events:none}
.t-hero{position:relative;z-index:1;height:740px;display:flex;flex-direction:column;align-items:center;justify-content:center}
/* 中身の幅はヘッダー（.header-inner：最大 1280px・左右 15px 以上）と同じにして、見出しの左端をロゴの左端にそろえる */
.t-hero__in{width:1310px;max-width:100%;height:100%;padding:0 15px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.t-hero__row{width:100%;display:flex;align-items:center;gap:15px}
/* 1280px を超える幅では見出し（48px・11字）が1行に収まる幅を確保する（1280px 以下は文字の大きさを幅に合わせて縮める） */
.t-hero__copy{width:max(calc(40% - 9px),530px);margin-bottom:50px;display:flex;flex-direction:column;align-items:flex-start}
.t-hero__title-wrap{width:100%;margin-bottom:30px;display:flex;flex-direction:column;align-items:flex-start}
.t-hero__title{font-size:48px;font-weight:700;line-height:1.4;color:#333;display:flex;flex-direction:column;align-items:flex-start}
.t-hero__line{display:block;white-space:nowrap}
.t-hero__line--em{margin-top:5px;text-decoration:underline #2a5939 4px;text-underline-offset:.2em;text-decoration-skip-ink:none}
.t-hero__product{display:flex;flex-direction:column;align-items:flex-start;gap:10px}
.t-hero__agent{color:#2a5939;font-size:20px;font-weight:700;line-height:1}
.t-hero__pm{width:360px;margin-bottom:30px}
.t-hero__awards{width:560px;max-width:100%}
/* 実績バッジ（ヒーロー・選ばれる理由）。画像の下端にある注記（表示すると約6〜8px）は枠で切り落とし、注記は下の文字で出す */
.t-badge-img{overflow:hidden}
.t-main .t-badge-img img{display:block;width:100%;max-width:none;height:auto}
.t-badge-img--awards{aspect-ratio:800/172}
.t-badge-img--retention{aspect-ratio:600/190}
.t-badge-note{margin-top:4px !important;color:#333;font-size:12px;font-weight:500;line-height:1.5}
/* ヒーローは画像の注記と同じく右寄せ（98% の「※」の下） */
.t-hero__awards .t-badge-note{padding-right:8.6%;text-align:right}
.t-hero__visual{width:calc(60% - 6px);display:flex;flex-direction:column;align-items:center}
.t-hero__laptop{width:80%;display:flex;flex-direction:column;align-items:center}
.t-hero__screen{position:relative;width:100%;border-radius:15px 15px 0 0}
.t-hero__video{display:block;width:100%;height:auto;border-radius:15px 15px 0 0;object-fit:contain}
.t-hero__badge{position:absolute;right:-52px;top:-46px;width:210px;z-index:1}
.t-hero__base{position:relative;z-index:1;width:120%;margin:0 -10%}
.t-hero__base img{width:100%}

.t-cta-dl{position:relative;z-index:1;width:700px;max-width:100%;margin:0 auto;display:flex;justify-content:center}
.t-cta-dl__btn{position:relative;width:100%;margin-top:-50px;padding:10px 30px;display:flex;align-items:center;justify-content:center;border-radius:96px;background:var(--grad);box-shadow:3px 3px 0 rgba(0,0,0,.2);overflow:clip;color:#242528}
.t-cta-dl__wipe{position:absolute;inset:0;background:var(--orange);transform:scaleX(0);transform-origin:left center;transition:transform .5s cubic-bezier(.4,.4,0,1)}
.t-cta-dl__btn:hover .t-cta-dl__wipe,.t-cta-dl__btn:focus-visible .t-cta-dl__wipe{transform:scaleX(1)}
.t-cta-dl__btn img{position:relative;width:100px;flex-shrink:0}
.t-cta-dl__text{position:relative;flex-shrink:0;display:flex;flex-direction:column;align-items:center;padding:0 70px 0 10px;white-space:nowrap}
.t-cta-dl__sub{font-size:18px;font-weight:600;line-height:1.75;font-feature-settings:'palt' 1;text-align:center}
.t-cta-dl__main{font-size:28px;font-weight:700;line-height:1.25;color:#282828;text-align:center}


/* 導入企業ロゴ（2段・逆方向に流れ続ける。1枚 220px を5秒で進む＝現行と同じ速さ） */
.t-logos{position:relative;z-index:1;background:#fff;padding:70px 0;display:flex;flex-direction:column;align-items:center}
.t-logos__row{width:1400px;max-width:100%;margin:5px 0;overflow:hidden}
.t-logos__row--rev{margin-bottom:0}
.t-logos__track{display:flex;width:max-content;animation:t-marquee 45s linear infinite}
.t-logos__row--rev .t-logos__track{animation-direction:reverse}
.t-logos__track li{flex:none;width:220px;height:70px;padding-right:20px}
.t-logos__track img{display:block;width:100%;height:100%;object-fit:contain;object-position:center}
.t-logos:hover .t-logos__track{animation-play-state:paused}
@keyframes t-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ---------- リモデラとは？ ---------- */
.t-about{background:var(--g);padding:100px 50px;display:flex;flex-direction:column;align-items:center}
.t-about__head{width:1200px;max-width:100%;margin-bottom:20px;display:flex;align-items:flex-start;justify-content:center}
.t-about__head img{width:200px;margin-right:20px}
.t-about__head h2{color:#fff;font-size:32px;font-weight:700;line-height:2;padding-top:5px;font-feature-settings:'palt' 1}
.t-about__body{width:1000px;max-width:100%;display:flex;flex-direction:column;align-items:center}
.t-about__lead{color:#fff;font-size:24px;font-weight:600;line-height:1.4;text-align:center;margin-bottom:40px !important;text-wrap:balance}
/* 全体図（文字は HTML、イラスト・人物・画面・ロゴ・アイコンは pm-assets/top/about/ の画像）。
   PC は 左2社・中央の管理会社・右2社 を双方向の矢印でつなぐ。同じ行の2社は高さをそろえ、矢印はカードの縦中央に置く。
   4社のカードは同じ型：帯 → 人物（左。同じ枠に収め、下端を面の境目にそろえる）＋項目（右）→ 製品の段（白い面。左にロゴ・製品名、右に画面）。
   管理会社は 人物 → 説明 → リモデラPM のロゴ → 画面 を1つのまとまりにして縦中央に置く。
   要素はすべてカードの内側に収める。寸法は .t-map の変数にまとめ、図の幅（cqi）に合わせて少し縮む。
   840px 以下は管理会社を先頭に縦1列にし、左の幹線から各社へ矢印を出す（幹線と矢印は各社の ::before / ::after）。 */
.t-map{--face:#ddede3;--gut:44px;--gap:22px;--bh:clamp(32px,3.6cqi,34px);--fp:clamp(10px,1.3cqi,12px);--pw:clamp(84px,calc(13.7cqi - 9px),120px);--ph:clamp(72px,calc(9.1cqi + 10px),96px);--dh:clamp(58px,calc(8.4cqi + 1px),80px);--k:clamp(10px,calc(1.33cqi + 1px),13.5px);--ih:clamp(32px,3.6cqi,34px);--hg:clamp(10px,1.9cqi,18px);--pp:6px;container-type:inline-size;width:1000px;max-width:100%;display:grid;grid-template-columns:minmax(0,1fr) 5% 21% 5% minmax(0,1fr);grid-template-areas:"owner l1 hub l3 builder" "tenant l2 hub l4 guarantor";row-gap:20px;padding:24px 2.8%;background:linear-gradient(90deg,#fff,#f9faf8 50%,#f2f4f1);color:var(--txt);font-size:16px;line-height:1.4;text-align:left}
.t-main .t-map img{display:block;max-width:none}
.t-map__band{display:flex;align-items:center;justify-content:center;height:var(--bh);padding:0 8px;background:var(--g);border-radius:6px 6px 0 0;color:#fff;font-size:clamp(15px,1.8cqi,17px);font-weight:500;letter-spacing:.06em;white-space:nowrap}
.t-map__hub{grid-area:hub;display:flex;flex-direction:column;background:#fff;border:2px solid var(--g);border-radius:8px;overflow:hidden;text-align:center}
/* 管理会社の帯は枠線（2px）の内側にあるので、その分だけ低くして各社の帯と下端をそろえる */
.t-map__hub .t-map__band{height:calc(var(--bh) - 2px);border-radius:0}
/* 管理会社の中身（人物 → 説明 → リモデラPM のロゴ → 画面）は1つのまとまりにして縦中央に置き、間の余白（--hg）をそろえる */
.t-map__hubbody{display:flex;flex-direction:column;align-items:center;gap:var(--hg);margin:auto 0;padding:var(--hg) 0}
.t-map__manager{width:84%}
.t-map__catch{padding:0 6px;color:var(--g);font-size:clamp(14px,1.7cqi,16px);font-weight:700;line-height:1.35;word-break:keep-all;text-wrap:balance}
.t-map__hub .t-map__logo{width:46%}
.t-map__hub .t-map__device{width:96%}
.t-map__party{position:relative;display:flex;flex-direction:column;min-width:0}
.t-map__party--owner{grid-area:owner}
.t-map__party--tenant{grid-area:tenant}
.t-map__party--builder{grid-area:builder}
.t-map__party--guarantor{grid-area:guarantor}
.t-map__face{flex:1;display:flex;flex-direction:column;padding:var(--fp) var(--fp) 0;background:var(--face);border-radius:0 0 6px 6px}
/* 人物と項目の段。人物は同じ枠（--pw × --ph）に収めて下端に置き、切り口を製品の段（家主はカードの下端）にそろえる。項目は段の縦中央 */
.t-map__who{flex:1;display:grid;grid-template-columns:var(--pw) minmax(0,1fr);column-gap:clamp(8px,1.27cqi,12px)}
.t-map .t-map__person{align-self:end;width:var(--pw);height:var(--ph);object-fit:contain;object-position:50% 100%}
.t-map .t-map__items{align-self:center;display:flex;flex-direction:column;gap:5px;min-width:0;margin-bottom:8px}
.t-map__items li{display:flex;align-items:center;gap:clamp(6px,.9cqi,9px);min-height:var(--ih);padding:2px 7px 2px 4px;background:#fff;border-radius:3px;box-shadow:0 1px 3px rgba(40,107,74,.1);font-size:clamp(14px,1.7cqi,16px);font-weight:700;line-height:1.25;word-break:keep-all}
.t-map__icon{position:relative;flex:none;width:clamp(24px,3.2cqi,30px);aspect-ratio:1;border-radius:50%;background:var(--face)}
.t-map__icon img{position:absolute;left:50%;top:50%;width:126%;height:126%;translate:-50% -50%}
/* 製品の段。左半分にロゴ・製品名、右半分に画面（同じ高さ --dh の枠に収める） */
.t-map__product{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;justify-items:center;gap:6px;padding:var(--pp);margin-bottom:var(--fp);background:#fff;border-radius:6px}
.t-map__product .t-map__device{width:100%;height:var(--dh);object-fit:contain}
/* 賃借人のアプリ画面は、スマホの上部（見出し・物件カード・相談ボタン）を大きく見せ、下は白い段の下端で切る */
.t-map__product .t-map__device--phone{align-self:end;width:min(100%,calc((var(--dh) + var(--pp)) * 1.25));height:calc(var(--dh) + var(--pp));margin-bottom:calc(var(--pp) * -1);object-fit:cover;object-position:50% 0}
/* ロゴは「リモデラ」の字の高さ（--k）をそろえる。製品名の文字も同じ高さに見える大きさ */
.t-map__party--builder .t-map__logo{width:calc(var(--k) * 5.72)}
.t-map__party--guarantor .t-map__logo{width:calc(var(--k) * 9.1)}
.t-map .t-map__product .t-map__logo{max-width:100%}
.t-map__name{color:var(--g);font-size:max(13px,calc(var(--k) * 1.25));font-weight:700;line-height:1.3;text-align:center;word-break:keep-all}
/* 管理会社と各社をつなぐ双方向の矢印（PC） */
.t-map__link{align-self:center;padding:0 4px;color:var(--g)}
.t-map__link svg{width:100%;height:auto;overflow:visible;fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.t-map__link--owner{grid-area:l1}
.t-map__link--tenant{grid-area:l2}
.t-map__link--builder{grid-area:l3}
.t-map__link--guarantor{grid-area:l4}
@media (max-width:840px){
  .t-map{--bh:38px;--fp:14px;--pw:clamp(78px,30cqi,124px);--ph:clamp(76px,29cqi,116px);--dh:clamp(76px,28cqi,104px);--k:clamp(10px,3.4cqi,13.5px);--ih:40px;--hg:16px;display:flex;flex-direction:column;gap:var(--gap);width:600px;padding:20px 16px 24px}
  .t-map__link{display:none}
  .t-map__band{font-size:17px}
  .t-map__hubbody{padding:20px 0 22px}
  .t-map__manager{width:min(64%,260px)}
  .t-map__catch{font-size:17px}
  .t-map__hub .t-map__logo{width:min(46%,200px)}
  .t-map__hub .t-map__device{width:min(80%,340px)}
  .t-map__party{margin-left:var(--gut)}
  /* 幹線（管理会社の下から最後の保証会社まで）と、各社への双方向の矢印（帯の高さの中央） */
  .t-map__party::before{content:"";position:absolute;left:calc(12px - var(--gut));top:calc(var(--gap) * -1);bottom:0;width:3px;background:var(--g)}
  .t-map__party--guarantor::before{bottom:auto;height:calc(var(--gap) + var(--bh) / 2 + 1.5px)}
  .t-map__party::after{content:"";position:absolute;left:calc(14px - var(--gut));top:calc(var(--bh) / 2);width:calc(var(--gut) - 16px);height:14px;translate:0 -50%;background:var(--g);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 14' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7h20M7.5 2 2.5 7l5 5M17.5 2l5 5-5 5'/%3E%3C/svg%3E") center/100% 100% no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 25 14' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2.5 7h20M7.5 2 2.5 7l5 5M17.5 2l5 5-5 5'/%3E%3C/svg%3E") center/100% 100% no-repeat}
  .t-map__items li{gap:8px;padding-right:6px;font-size:16px}
  .t-map__icon{width:32px}
}
@media (max-width:360px){
  .t-map{--gut:38px;--fp:10px;padding:16px 10px 20px}
  .t-map__items li{gap:6px;font-size:15px}
  .t-map__icon{width:30px}
}
.t-about__nav{width:1200px;max-width:100%;margin-top:70px;display:flex;align-items:stretch;justify-content:center}
.t-about__nav a{width:20%;display:flex;flex-direction:column;align-items:center;border-right:2px solid #fff;color:#fff}
.t-about__nav a:first-child{border-left:2px solid #fff}
.t-about__name{font-size:20px;font-weight:600;line-height:1.4;margin-bottom:20px;text-align:center;word-break:keep-all;overflow-wrap:anywhere}
.t-about__icons{display:flex;flex-direction:column;align-items:center}
.t-about__icon{width:50px;height:50px;border-radius:50%;background:var(--sage);display:grid;place-items:center}
.t-about__icon svg{width:auto;height:24px;fill:#fff}
.t-about__arrow{width:24px;height:24px;margin-top:5px;fill:#fff;transition:translate .3s ease-in-out}
.t-about__nav a:hover .t-about__arrow{translate:0 5px}

/* ---------- サービス ---------- */
.t-label{color:var(--g-bright);font-size:16px;font-weight:800;line-height:1.4;margin-bottom:5px !important;text-align:center}
.t-h2{width:1100px;max-width:100%;padding:0 40px;margin-bottom:50px !important;color:var(--ink);font-size:40px;font-weight:700;line-height:1.35;text-align:center;font-feature-settings:'palt' 1 !important}
/* サービスごとの色。--ac：番号・リード・要点・ボタン／--ac-tint：画面写真の背景・要点の面／--ac-soft：枠線・区切り。
   --ac の文字は白地・--ac-tint 地とも WCAG AA（4.5:1）以上 */
.t-svc--green{--ac:#286b4a;--ac-tint:#eef7f1;--ac-soft:#d5eadc}
.t-svc--blue{--ac:#225f9c;--ac-tint:#edf3fa;--ac-soft:#d4e3f3}
.t-svc--amber{--ac:#94500b;--ac-tint:#fcf3e6;--ac-soft:#f3dfc1}
.t-svc--violet{--ac:#5f4799;--ac-tint:#f3f0f9;--ac-soft:#e0d9f0}
.t-svc--teal{--ac:#0d6b72;--ac-tint:#eaf5f6;--ac-soft:#cbe6e8}
.t-svc{padding:100px 40px;display:flex;flex-direction:column;align-items:center}
.t-svc__list{width:1200px;max-width:100%;display:flex;flex-direction:column;gap:110px}
.t-svc__row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);align-items:center;gap:64px}
.t-svc__row:nth-child(even) .t-svc__text{order:2}
.t-svc__text{min-width:0;width:100%}
.t-svc .t-svc__no{margin:0 0 14px;padding:4px 4px 4px 16px;display:inline-flex;align-items:center;gap:10px;border-radius:99px;background:var(--ac-tint);color:var(--ac);line-height:1;white-space:nowrap}
.t-svc__no-label{padding-top:.15em;font-size:14px;font-weight:800;letter-spacing:.14em;text-transform:uppercase}
.t-svc__no-num{width:40px;height:40px;padding-top:.15em;display:grid;place-items:center;border-radius:50%;background:var(--ac);color:#fff;font-size:20px;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.t-svc__title{color:var(--ink);font-size:34px;font-weight:800;line-height:1.35}
.t-svc__lead{margin:10px 0 0 !important;color:var(--ink);font-size:19px;font-weight:700;line-height:1.6;word-break:keep-all;overflow-wrap:anywhere}
.t-svc .t-svc__checks{margin:24px 0 32px;border-top:1px solid #e3e6e8}
.t-svc__checks li{position:relative;padding:13px 0 13px 38px;word-break:keep-all;overflow-wrap:anywhere;border-bottom:1px solid #e3e6e8;color:var(--txt);font-size:16px;line-height:1.6}
.t-svc__checks li::before{content:'';position:absolute;left:0;top:14px;width:24px;height:24px;border-radius:50%;background:var(--ac) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23fff' d='M9 16.17 4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z'/%3E%3C/svg%3E") center/16px no-repeat}
.t-svc__checks strong{color:var(--ink);font-weight:800;white-space:nowrap}
.t-svc__media{position:relative;aspect-ratio:3/2;border-radius:20px;background:var(--ac-tint);overflow:hidden;display:flex;align-items:center;justify-content:center}
.t-svc__media::before{content:'';position:absolute;inset:0;background:var(--bg) center/cover no-repeat}
.t-svc__media--lines::before{background:var(--ac);-webkit-mask:var(--bg) center/cover no-repeat;mask:var(--bg) center/cover no-repeat;opacity:.35}
.t-svc__media img{position:relative;width:88%;height:88%;object-fit:contain;transition:scale 1s cubic-bezier(.4,.4,0,1),opacity .6s cubic-bezier(.4,.4,0,1) .6s,translate .6s cubic-bezier(.4,.4,0,1) .6s}
.t-svc__media img:hover{scale:1.02}
/* 04 は縦長のアプリ画面の上側を切り出した画像なので、下端を枠の下端にそろえて切る */
.t-svc__media--app img{width:100%;height:100%;object-fit:cover;object-position:center bottom}
/* 05 は書類の取り込みと連携先まで描いた図なので、枠いっぱいに出す。スマホは縦長の図に切り替える */
.t-svc__media--db picture{display:contents}
.t-svc__media--db img{width:100%;height:100%;object-fit:contain}
@media (max-width:540px){.t-svc__media--db{aspect-ratio:1125/1475}}
@media (max-width:1100px){.t-svc__row{gap:40px}.t-svc__title{font-size:30px}}
@media (max-width:840px){
  .t-svc{padding:60px 24px}
  .t-svc__list{gap:72px}
  .t-svc__row{grid-template-columns:1fr;gap:28px}
  .t-svc__row .t-svc__media{order:-1}
  .t-svc__row:nth-child(even) .t-svc__text{order:0}
  .t-svc__text{max-width:600px;justify-self:center}
  .t-svc__title{font-size:26px}
  .t-svc__lead{font-size:17px}
}
@media (max-width:540px){
  .t-svc{padding:48px 16px}
  .t-svc__list{gap:56px}
  .t-svc__row{gap:22px}
  .t-svc__media{border-radius:14px}
  .t-svc .t-svc__no{margin-bottom:10px;padding:3px 3px 3px 14px;gap:8px}
  .t-svc__no-label{font-size:13px}
  .t-svc__no-num{width:34px;height:34px;font-size:17px}
  .t-svc__title{font-size:24px}
  .t-svc__lead{font-size:16px}
  .t-svc .t-svc__checks{margin:18px 0 26px}
  .t-svc__checks li{padding:11px 0 11px 34px;font-size:15px}
  .t-svc__checks li::before{top:12px;width:22px;height:22px;background-size:14px}
  .t-svc .t-more{width:100%;justify-content:center;gap:10px;padding:10px 30px 8px}
}
.t-more{display:inline-flex;align-items:center;justify-content:flex-end;gap:5px;padding:6px 50px 4px;border:2px solid #333;border-radius:32px;color:#333;background:transparent;transition:background-color .3s,border-color .3s,color .3s}
.t-more span{font-size:16px;font-weight:500;line-height:1;padding:12px 0 10px}
.t-more svg{width:24px;height:24px;fill:#222;transition:fill .3s}
.t-more:hover{background:var(--g);border-color:var(--g);color:#fff}
.t-more:hover svg{fill:#fff}

/* ---------- AI連携機能（MCP） 現行は埋め込み枠。中身と見た目は同じで、ページ内に直接置く ---------- */
.t-mcp{background:#fff}
.t-mcp__in{max-width:960px;margin:0 auto;padding:56px 20px;text-align:center;color:#222;font-family:"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,sans-serif}
.t-mcp__label{display:inline-block;margin:0 0 10px !important;padding:2px 14px;border:1px solid #2b6b4e;border-radius:99px;color:#2b6b4e;font-size:12px;font-weight:700;letter-spacing:.12em;line-height:1.4}
.t-mcp__title{margin:0 0 16px !important;font-size:30px !important;font-weight:700;line-height:1.4;color:#222}
.t-mcp__lead{width:fit-content;margin:0 auto 28px !important;max-width:760px;font-size:16px;line-height:1.9;text-align:left}
.t-mcp__video{position:relative;margin:0 auto 32px;max-width:860px;border-radius:12px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.12);background:#12201e}
.t-mcp__video video{display:block;width:100%;height:auto;aspect-ratio:16/9}
.t-mcp__play{position:absolute;inset:0;width:100%;height:100%;margin:0;padding:0;border:0;border-radius:0;background:transparent;cursor:pointer}
.t-mcp__play:focus-visible{outline-offset:-6px}
.t-mcp__points{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:0 0 24px;text-align:left}
.t-mcp__point{background:#eef6f1;border-radius:10px;padding:20px}
.t-mcp__ptitle{margin:0 0 8px !important;font-size:16px;font-weight:700;line-height:1.4}
.t-mcp__ptext{font-size:14px;line-height:1.8;color:#444}
.t-mcp__note{font-size:13px;line-height:1.8;color:#666}

@media (max-width:690px){.t-mcp__in{padding:40px 16px}.t-mcp__title{font-size:22px !important}.t-mcp__lead{font-size:14px}.t-mcp__note{text-align:left}.t-mcp__points{grid-template-columns:1fr}.t-mcp__pc{display:none}}

/* ---------- NEWS ---------- */
.t-news{padding:0 100px;display:flex;flex-direction:column;align-items:center}
.t-news__box{width:1100px;max-width:100%;padding:30px 50px;border:1px solid rgba(0,0,0,.3);display:flex;flex-direction:column;align-items:flex-start}
.t-news__head{width:100%;margin-bottom:20px;display:flex;align-items:flex-start;justify-content:space-between}
.t-news__ttl{display:flex;align-items:center;justify-content:center}
.t-news__ttl h2{margin-right:30px;color:var(--ink);font-size:32px;font-weight:700;line-height:1.35;font-feature-settings:'palt' 1}
.t-news__ttl p{color:var(--g-bright);font-size:16px;font-weight:600;line-height:1.4}
.t-news__all{flex:none;display:flex;align-items:center;padding:5px 15px;border-radius:48px;background:var(--gray);color:#333;transition:opacity .3s}
.t-news__all span{font-size:15px;line-height:1.4}
.t-news__all svg{width:24px;height:24px;fill:#333}
.t-news__all:hover{opacity:.7}
.t-main .pm-news-list{display:flex;flex-direction:column;align-items:flex-start}
.t-main .pm-news-list a{display:flex;width:100%;margin-bottom:10px;font-size:16px;line-height:1.7;color:#333}
.t-main .pm-news-list a:hover strong{color:var(--g);text-decoration:underline}
.t-main .pm-news-list time{flex:none;width:6.25em;margin-right:24px;color:var(--ink);white-space:nowrap}
.t-main .pm-news-list strong{font-weight:400}

/* ---------- 選ばれる理由 ---------- */
.t-why{padding:100px 100px 20px;display:flex;flex-direction:column;align-items:center}
.t-label--flat{margin-bottom:0 !important}
.t-why__h2{margin-bottom:15px !important}
.t-why__badge{width:318px;min-height:138px;margin-bottom:10px;display:flex;flex-direction:column;align-items:center;justify-content:center}
.t-why__badge .t-badge-img{width:233px}
.t-why__badge .t-badge-note{text-align:center}
.t-why__cards{width:1100px;max-width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:stretch}
.t-why__card{width:48.5%;margin-bottom:80px;padding:30px;border-radius:8px;background:var(--mint);display:flex;flex-direction:column;align-items:center}
.t-why__card img{width:60%;max-width:180px}
.t-why__card h3{width:100%;color:var(--ink);font-size:18px;font-weight:800;line-height:1.4;text-align:center;word-break:keep-all;overflow-wrap:anywhere}
.t-why__text{width:100%;margin-top:15px !important;font-size:16px;line-height:1.7;text-align:left}

/* ---------- 利用者の声 ---------- */
.t-voice{display:flex;flex-direction:column;align-items:center;justify-content:flex-end}
.t-voice__lead{margin:0 0 30px !important;padding:0 15px;color:#fff;font-size:20px;font-weight:700;line-height:1.4;text-align:center}
.t-voice__band{width:100%;padding:70px 0;background:var(--g);display:flex;flex-direction:column;align-items:center}
.t-voice__row{width:100%;padding:0 30px;display:flex;align-items:flex-start;justify-content:center;gap:0 40px}
.t-voice__item{width:460px;min-width:0;display:flex;flex-direction:column;align-items:center}
.t-voice__btn{display:block;width:100%;padding:0;border:0;border-radius:10px;background:none;overflow:hidden}
.t-voice__btn img{display:block;width:100%;border-radius:10px;transition:opacity .3s}
.t-voice__btn:hover img{opacity:.8}
.t-voice__item p{margin-top:10px !important;color:#fff;font-size:16px;font-weight:600;line-height:1.4}
.t-more--white{margin-top:30px;padding:0 30px;border-color:#fff;color:#fff}
.t-more--white svg{fill:#fff}
.t-more--white:hover{background:var(--sage);border-color:var(--sage);color:var(--g)}
.t-more--white:hover svg{fill:var(--g)}

/* ---------- 導入までの流れ ---------- */
.t-flow{padding:100px;background:var(--mint);display:flex;flex-direction:column;align-items:center}
.t-label--flow{margin-bottom:10px !important}
.t-flow__h2{margin-bottom:25px !important}
.t-flow__lead{margin-bottom:40px !important;color:#333;font-size:16px;line-height:1.4}
.t-flow__steps{width:700px;max-width:100%;display:flex;flex-direction:column;align-items:center}
/* 札は手順の文の1行目にそろえ（上そろえ）、札の下から次の札まで縦線でつなぐ（文が2行以上でも線が途切れない） */
.t-flow__steps li{position:relative;width:100%;display:flex;align-items:flex-start}
.t-flow__steps li+li{margin-top:20px}
.t-flow__steps li:not(:last-child)::after{content:'';position:absolute;left:35px;top:27px;bottom:-20px;width:2px;background:var(--sage)}
.t-flow__num{flex:none;width:72px;margin-right:24px;padding:4px 0 3px;border:1px solid var(--g);border-radius:99px;background:#fff;color:var(--g);font-size:13px;font-weight:700;line-height:1.4;letter-spacing:.04em;text-align:center;white-space:nowrap}
.t-flow__steps p{flex:1;padding-top:1px;color:var(--ink);font-size:16px;font-weight:700;line-height:1.5}

/* ---------- よくある質問 ---------- */
.t-faq{padding:100px;background:var(--gray);display:flex;flex-direction:column;align-items:center}
.t-faq__list{width:1100px;max-width:100%;display:flex;flex-direction:column;gap:10px}
.t-faq__item{background:#fff}
.t-faq__item summary{display:flex;align-items:center;justify-content:space-between;gap:0;padding:15px;border:1px solid transparent;cursor:pointer;list-style:none;transition:border-color .3s}
.t-faq__qrow{flex:1;display:flex;align-items:flex-start;gap:20px}
.t-faq__item summary::-webkit-details-marker{display:none}
.t-faq__item summary:hover{border-color:var(--g)}
.t-faq__q{flex:none;color:var(--ink);font-size:28px;font-weight:700;line-height:1}
.t-faq__question{flex-shrink:0;width:calc(90% - 2px);color:var(--ink);font-size:16px;font-weight:700;line-height:2}
.t-faq__icon{flex:none;width:40px;height:40px;padding:7px;border:1px solid rgba(36,37,40,.1);border-radius:96px;fill:var(--ink);transition:rotate .3s cubic-bezier(.4,.4,0,1),border-color .3s,fill .3s}
.t-faq__item summary:hover .t-faq__icon{border-color:rgba(36,37,40,.7);fill:var(--g)}
.t-faq__item[open] .t-faq__icon{rotate:180deg}
.t-faq__answer{overflow:hidden}
.t-faq__answer p{padding:30px;color:var(--ink);font-size:16px;line-height:1.75}
.t-faq__answer a{color:var(--g);text-decoration:underline}

/* ---------- お問い合わせ ---------- */
.t-contact{position:relative;overflow:hidden;z-index:0;padding:80px 0 120px;border:1px solid rgba(36,37,40,.1);background:var(--g);display:flex;flex-direction:column;align-items:center}
.t-contact h2{margin-bottom:0;color:rgba(255,255,255,.95);font-size:36px;font-weight:700;line-height:1.5;text-align:center;font-feature-settings:'palt' 1}
.t-contact__pair{width:1060px;max-width:100%;padding:0 30px;display:flex;align-items:flex-end;justify-content:center;gap:50px}
.t-contact__col{width:calc(50% - 25px);display:flex;flex-direction:column;align-items:center}
.t-contact__cap{margin-bottom:10px;display:flex;align-items:flex-end;justify-content:center;white-space:nowrap}
.t-contact__cap img{width:80px;flex-shrink:0}
.t-contact__cap p{color:#fff;font-size:18px;line-height:1.75;letter-spacing:.1em;text-align:center;font-feature-settings:'palt' 1;white-space:nowrap}
.t-contact__cap .t-contact__cap-dl{margin:0 40px 0 10px}
.t-contact__btn{width:100%;padding:25px 30px;border-radius:64px;box-shadow:3px 3px 0 rgba(0,0,0,.2);color:#282828;font-size:24px;font-weight:700;line-height:1.25;text-align:center;transition:opacity .3s}
.t-contact__btn:hover{opacity:.85}
.t-contact__btn--dl{background:var(--grad)}
.t-contact__btn--contact{background:rgba(255,255,255,.95)}
.t-contact__mark{position:absolute;right:0;bottom:-26px;z-index:-1;color:rgba(255,255,255,.03);font-family:Oswald,sans-serif;font-size:12vw;font-weight:600;line-height:1.4;white-space:nowrap;pointer-events:none}

/* ページ先頭へ（右下。少しスクロールしてから出す・フォームが見えている間は出さない仕組みは shared.css・shared.js） */
.t-pagetop{position:fixed;right:60px;bottom:60px;z-index:40;width:55px;height:54px;padding:10px 11px 10px 10px;border:1px solid #fff;border-radius:50%;background:var(--g);display:grid;place-items:center;transition:opacity .3s,visibility .3s}
.t-pagetop svg{width:32px;height:32px;fill:#fff}
.t-pagetop:hover{opacity:.8}
.t-page .global-footer-legal a[href="#header"]{display:none}

/* ======================================================================== */
@media (max-width:1280px){
  .t-fv{padding-top:50px}
  .t-hero{height:600px}
  .t-hero__copy{width:calc(40% - 9px)}
  .t-hero__title{font-size:min(44px,calc((40vw - 21px)/11.2))}
  .t-hero__badge{width:160px}
  .t-cta-dl{width:60%}
  .t-cta-dl__btn{margin-top:-40px}
  .t-cta-dl__sub{font-size:16px}
  .t-cta-dl__main{font-size:24px}
  .t-about{padding:100px 60px}
  .t-news{padding:100px 60px}
  .t-why{padding:0 60px 50px}
  .t-why__h2{margin-bottom:4px !important}
  .t-voice__item{width:calc(33.33% - 26.67px)}
  .t-flow{padding:100px 60px}
  .t-faq{padding:100px 60px}
  .t-faq__list{width:min(1120px,calc(100% + 20px));max-width:none;margin:0 -10px}
  .t-faq__item summary{gap:20px}
  .t-contact{padding:100px 60px}
  .t-contact__pair{width:90%;padding:0;flex-direction:column;align-items:center;gap:30px}
  .t-contact__pair>*{width:100%}
  .t-contact__pair{max-width:none}
  .t-contact__col{width:85%}
  .t-contact__cap p{font-size:16px}
  .t-contact__mark{left:10px;right:-363px;bottom:-27px;font-size:20vw}
}
@media (max-width:840px){
  .t-fv{padding-top:0}
  .t-fv__bg{height:1200px}
  .t-hero{height:auto}
  .t-hero__in{height:auto;overflow:hidden}
  .t-hero__row{flex-wrap:wrap;align-items:flex-start;justify-content:center;gap:42px;padding-top:50px}
  .t-hero__copy{width:100%;margin-bottom:0;align-items:center}
  .t-hero__title-wrap{margin-bottom:50px;align-items:center}
  .t-hero__title{font-size:44px}
  .t-hero__pm{margin-bottom:40px}
  .t-hero__product{align-items:flex-start}
  .t-hero__visual{width:calc(80% - 8.4px);margin-bottom:30px}
  .t-hero__laptop{width:100%;margin-bottom:30px}
  .t-hero__badge{right:-61px;top:-25px;width:150px}
  .t-cta-dl{width:auto}
  .t-cta-dl__btn{width:460px;margin-top:0}
  .t-cta-dl__btn img{width:90px}
  .t-cta-dl__text{padding:0 70px 0 20px}
  .t-cta-dl__sub{font-size:12px}
  .t-cta-dl__main{font-size:20px}
  .t-about{padding:100px 25px}
  .t-about__head img{width:160px}
  .t-about__head h2{font-size:24px}
  .t-about__lead{font-size:20px}
  .t-about__name{font-size:16px}
  .t-h2{font-size:24px}
  .t-news{padding:50px 40px}
  .t-news__box{padding:30px 30px 0}
  .t-news__ttl h2{font-size:24px}
  .t-news__head{margin-bottom:0}
  .t-main .pm-news-list{margin:15px 0}
  .t-why{padding:50px 40px 0}
  .t-why__card{padding:40px 15px}
  .t-why__card h3{font-size:20px}
  .t-voice__row{flex-direction:column;align-items:center;gap:40px}
  .t-voice__item{width:calc(80% - 8px)}
  .t-voice__btn{width:460px;max-width:100%}
  .t-flow{padding:50px 40px}
  .t-faq{padding:50px 40px}
  .t-faq__list{width:calc(100% + 40px);margin:0 -20px;padding:0 20px}
  .t-contact{padding:50px 40px}
  .t-contact__pair{width:90%}
  .t-contact__col{width:100%}
  .t-contact h2{font-size:24px}
  .t-contact__cap p{font-size:14px}
  .t-contact__btn{font-size:22px}
  .t-contact__mark{left:0;right:0;bottom:-21px}
  .t-pagetop{right:30px;bottom:30px}
}
@media (max-width:540px){
  .t-fv__bg{height:820px}
  .t-hero__row{gap:40px 30px}
  .t-hero__title-wrap{margin-bottom:20px}
  .t-hero__title{font-size:30px}
  .t-hero__line--em{margin-bottom:15px}
  .t-hero__agent{font-size:15px}
  .t-hero__pm{width:240px;margin-bottom:20px}
  .t-hero__visual{width:calc(90% - 4.2px)}
  .t-hero__badge{right:-34px;top:-23px;width:150px}
  .t-cta-dl{width:100%;padding:0 15px}
  .t-cta-dl__btn{width:100%}
  .t-cta-dl__btn img{width:80px}
  .t-cta-dl__sub{font-size:14px}
  .t-logos{padding:30px 0}
  .t-logos__row{margin:0 0 5px}
  .t-logos__row--rev{margin-bottom:0}
  .t-logos__track li{height:50px;padding-right:10px}
  .t-about{padding:60px 20px}
  .t-about__head{align-items:center}
  .t-about__head img{width:120px}
  .t-about__head h2{font-size:20px;margin-top:10px}
  .t-about__lead{font-size:18px;text-align:left;margin-bottom:30px !important}
  .t-about__nav{flex-direction:column}
  .t-about__nav a{width:100%;flex-direction:row;align-items:center;justify-content:space-between;padding:10px 30px 10px 0;border:0;border-bottom:1px solid #fff}
  .t-about__nav a:first-child{border-left:0;border-top:1px solid #fff}
  .t-about__name{margin-bottom:0;padding-left:30px;text-align:left}
  .t-about__icons{flex-direction:row}
  .t-about__icon{width:40px;height:40px}
  .t-about__icon svg{height:20px}
  .t-about__arrow{margin-top:0}
  .t-more span{font-size:15px}
  .t-news{padding:60px 20px 20px}
  .t-news__box{padding:30px 15px 0}
  .t-news__head{flex-direction:column;align-items:center}
  .t-news__ttl{width:100%;flex-direction:column}
  .t-news__all{align-self:flex-end;margin-top:5px}
  .t-main .pm-news-list a{flex-direction:column;margin-bottom:15px}
  .t-why{padding:60px 20px 20px}
  .t-why__card{width:100%;margin-bottom:40px}
  .t-voice{padding:50px 0}
  .t-voice__row{padding:0 15px}
  .t-voice__item{width:100%}
  .t-voice__btn{width:100%}
  .t-more--white{gap:10px}
  .t-flow{padding:60px 20px 20px}
  .t-faq{padding:60px 20px}
  .t-faq__list{width:calc(100% + 20px);margin:0 -10px;padding:0 10px}
  .t-faq__question{line-height:1.6}
  .t-faq__answer p{padding:30px 15px}
  .t-contact{padding:60px 20px}
  .t-contact__pair{width:100%}
  .t-contact h2{font-size:20px}
  .t-contact__cap p{font-size:16px}
  .t-contact__btn{padding:15px 30px;font-size:20px}
  .t-pagetop{right:15px;width:44px;height:44px;padding:0}
  .t-pagetop svg{width:24px;height:24px}
}
@media (max-width:320px){
  .t-hero__row{gap:30px 40px;padding-top:40px}
  .t-hero__title{font-size:26px}
  .t-hero__pm{width:200px;margin-bottom:10px}
  .t-hero__badge{right:-23px;top:-15px;width:90px}
  .t-cta-dl__btn img{width:60px}
  .t-cta-dl__text{margin-right:5px;padding:0 20px 0 10px}
  .t-cta-dl__sub{font-size:10px}
  .t-about{padding:60px 15px}
  .t-about__head img{width:100px;margin-right:15px}
  .t-about__name{font-size:16px}
  .t-news,.t-why,.t-flow{padding:40px 20px 20px}
  .t-why__card{margin-bottom:30px}
  .t-why__card h3{font-size:18px}
  .t-h2{padding:0;margin-bottom:30px !important}
  .t-flow__num{width:64px;margin-right:12px}
  .t-flow__steps li:not(:last-child)::after{left:31px}
  .t-faq{padding:40px 15px}
  .t-faq__qrow{gap:10px}
  .t-contact{padding:60px 15px}
  .t-contact__cap img{width:60px}
  .t-contact__cap p{font-size:12px}
  .t-contact__btn{font-size:16px}
}
@media (prefers-reduced-motion:reduce){
  .js .t-main [data-appear]{opacity:1 !important;translate:none !important;transition:none !important}
  .t-logos__track{animation:none}
  .t-cta-dl__wipe,.t-about__arrow,.t-faq__icon,.t-svc__media img{transition:none}
}