/* IDEA VISTA 株式会社 — 新HP 共通スタイル（2026-10-26 全面刷新・配色は大野様ご提出のティファニーブルー・Airera ダイダロス）
   方針: 大野様ご要望「（ティファニーブルーの）色を多めに・活発でアクティブな印象・人の写真を多く」。
   参考サイトの構成（写真の大きなヒーロー＋斜めの色面／丸い写真のお悩み／写真つきカード）に寄せる。
   文字は読みやすさ優先（ゴシック・濃い色・小さすぎない）。旧変数名（--teal 等）は互換のため残す。 */
:root{
  /* 大野様ご提出のティファニーブルー5色（10/16 LINE・COLOURlovers「Tiffany Blue」）: #54B6B5 #6AC8C7 #89D9D8 #ADEBEA #D4FBFA
     白文字を載せるボタン・帯だけ、同じ色相の濃い色（--tb-deep / --tb-ink）で読みやすさを確保する */
  --tb1:#54B6B5; --tb2:#6AC8C7; --tb3:#89D9D8; --tb4:#ADEBEA; --tb5:#D4FBFA;
  --tb-deep:#237675; --tb-ink:#1D5E5D; --teal-text:#2E8786; /* 白地の数字・見出しラベル用（コントラスト4.2） */
  --green:var(--tb1); --green-dark:var(--tb-deep); --green-deep:var(--tb-ink); --lime:var(--tb4); --lime-soft:#E4F8F7;
  --mint:#E9FAF9; --mint-2:#F4FDFD; --line:#C6E8E7; --ink:#1E2B2B; --muted:#46595A; --white:#FFFFFF; --footer:#164847;
  /* 互換 */
  --teal:var(--tb1); --teal-dark:var(--tb-deep); --teal-soft:rgba(84,182,181,.16); --tiffany-pale:var(--tb5); --tiffany-mid:var(--tb3);
  --navy:var(--tb-ink); --ivory:var(--white); --beige:var(--mint); --beige-solid:var(--mint); --sand:var(--tb5); --card:var(--mint-2);
  --sans:"Noto Sans JP","Hiragino Kaku Gothic ProN","Yu Gothic",Meiryo,sans-serif;
  --serif:var(--sans);
  --en:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --max:1140px; --r:10px; --shadow:0 10px 30px rgba(29,94,93,.12);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--white);line-height:1.9;font-size:16.5px;letter-spacing:.03em;font-weight:400}
img{max-width:100%;height:auto;display:block}
a{color:var(--green-dark);text-decoration:none}
h1,h2,h3,h4{font-family:var(--sans);font-weight:700;color:var(--ink);margin:0;letter-spacing:.04em;line-height:1.5;text-wrap:balance}
p{margin:0 0 1em}
strong{color:var(--green-deep)}
.wrap{max-width:var(--max);margin:0 auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.sr{position:absolute;left:-9999px}
:focus-visible{outline:3px solid var(--tb3);outline-offset:2px}

/* header */
.site-header{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:rgba(255,255,255,.96);backdrop-filter:blur(6px);box-shadow:0 1px 0 var(--line)}
.site-header .wrap{display:flex;align-items:center;justify-content:space-between;height:76px;gap:16px}
.brand{font-family:var(--en);font-weight:700;font-size:24px;letter-spacing:.1em;color:var(--green-deep)}
.brand small{display:block;font-family:var(--sans);font-weight:500;font-size:11px;letter-spacing:.12em;color:var(--teal-text);line-height:1.3;margin-top:2px}
.nav{display:flex;gap:26px;align-items:center}
.nav a{color:var(--ink);font-size:14.5px;font-weight:500;letter-spacing:.06em;padding:6px 0;display:flex;align-items:center;gap:7px}
.nav a:not(.cta)::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--lime)}
.nav a:nth-child(2n):not(.cta)::before{background:var(--green)}
.nav a:hover,.nav a[aria-current="page"]{color:var(--green-dark)}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--green)}
.nav .cta{background:var(--tb-deep);color:#fff;padding:12px 24px;border-radius:999px;font-weight:700;box-shadow:0 6px 16px rgba(35,118,117,.28)}
.nav .cta:hover{background:var(--tb-ink);color:#fff}
.nav .cta[aria-current="page"]{color:#fff;box-shadow:0 0 0 3px var(--lime)}
.menu-btn{display:none;background:none;border:0;width:44px;height:44px;cursor:pointer}
.menu-btn span{display:block;height:2px;background:var(--green-deep);margin:7px 9px;border-radius:2px}
@media (max-width:900px){
  .menu-btn{display:block}
  .nav{display:none;position:absolute;left:0;right:0;top:76px;background:#fff;flex-direction:column;align-items:stretch;gap:0;padding:8px 20px 20px;box-shadow:0 12px 24px rgba(29,94,93,.12)}
  .nav.open{display:flex}
  .nav a{padding:14px 0;border-bottom:1px solid var(--line)}
  .nav a[aria-current="page"]{box-shadow:none}
  .nav .cta{margin-top:14px;justify-content:center;border-bottom:0}
}

/* hero（写真＋斜めの緑パネル） */
.hero{position:relative;min-height:min(640px,76vh);display:flex;align-items:center;background:#cfeeee right center/auto 100% no-repeat;background-size:cover;background-position:right 30%;overflow:hidden;isolation:isolate}
.hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(120deg,rgba(212,251,250,.97) 0%,rgba(173,235,234,.96) 26%,rgba(137,217,216,.95) 46%,rgba(137,217,216,0) 46.2%);}
.hero::after{content:"";position:absolute;z-index:-1;top:0;bottom:0;left:44%;width:90px;background:var(--tb1);transform:skewX(-30deg);opacity:.9}
.hero .wrap{position:relative;width:100%}
.hero h1{color:var(--ink);font-size:clamp(32px,4.6vw,56px);line-height:1.4;letter-spacing:.06em;max-width:560px}
.hero h1 em{font-style:normal;color:var(--tb-deep)}
.hero .lead{margin-top:22px;max-width:500px;font-size:16.5px;line-height:2;letter-spacing:.06em;color:var(--ink);font-weight:500}
.hero .hero-cta{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap}
.hero .hero-sub{margin-top:18px;font-size:clamp(17px,1.9vw,21px);font-weight:700;letter-spacing:.08em;color:var(--tb-deep)}
.hero .hero-check{margin-top:16px;font-size:14px;letter-spacing:.04em}
.hero .hero-check a{display:inline-block;background:rgba(255,255,255,.88);padding:4px 10px;border-radius:6px}
.hero .hero-check a{color:var(--ink);text-decoration:underline;text-underline-offset:4px}
.worries .ph--icon{object-fit:contain;background:transparent;box-shadow:none}
.worries .who{display:inline-block;margin:14px 0 6px;padding:3px 12px;border-radius:999px;background:var(--tb-deep);color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.06em}
.hero--page{min-height:340px}
.hero--page::before{background:linear-gradient(120deg,rgba(212,251,250,.97) 0%,rgba(173,235,234,.96) 30%,rgba(137,217,216,.95) 52%,rgba(137,217,216,0) 52.2%)}
.hero--page::after{left:50%;width:70px}
.hero--page h1{font-size:clamp(28px,3.6vw,42px)}
.hero--page .en{font-family:var(--en);font-weight:700;font-size:clamp(14px,1.6vw,18px);letter-spacing:.24em;color:var(--tb-deep);opacity:1;line-height:1;margin-bottom:14px;text-transform:uppercase}
@media (max-width:760px){
  .hero{min-height:auto;padding-block:72px 220px;background-position:70% bottom;background-size:auto 260px;background-color:var(--tb3)}
  .hero::before{background:linear-gradient(180deg,var(--tb5) 0%,var(--tb4) 50%,var(--tb3) calc(100% - 240px),rgba(137,217,216,0) calc(100% - 200px))}
  .hero::after{display:none}
  .hero--page{padding-block:56px 200px}
}

/* sections */
.section{position:relative;padding-block:100px}
.section--beige,.section--solid{background:var(--mint)}
.section--sand{background:var(--mint-2)}
.section--stripe{background:linear-gradient(115deg,transparent 0 64%,var(--tb5) 64% 70%,transparent 70% 78%,rgba(84,182,181,.12) 78% 82%,transparent 82%),var(--white)}
.sec-head{text-align:center;margin-bottom:52px;position:relative}
.sec-head .en{font-family:var(--en);font-weight:700;font-size:15px;letter-spacing:.26em;color:var(--tb-deep);opacity:1;line-height:1;position:static;margin-bottom:12px;text-transform:uppercase}
.sec-head h2{position:relative;font-size:clamp(24px,3vw,34px);letter-spacing:.06em}
.sec-head h2::after{display:none}
.sec-head .sub{color:var(--muted);margin-top:16px;font-size:16.5px;letter-spacing:.04em}
.center{text-align:center}
.prose{max-width:780px;margin:0 auto;font-size:16.5px;line-height:2.1;letter-spacing:.04em;color:var(--ink);text-align:center}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;padding:16px 40px;border-radius:999px;background:var(--tb-deep);color:#fff;font-size:15.5px;font-weight:700;letter-spacing:.08em;transition:.2s;box-shadow:0 8px 20px rgba(35,118,117,.25)}
.btn:hover{background:var(--tb-ink);color:#fff;transform:translateY(-1px)}
.btn--soft{background:#fff;color:var(--green-dark);box-shadow:inset 0 0 0 2px var(--green)}
.btn--soft:hover{background:var(--tb-deep);color:#fff}
.btn--lime{background:var(--tb-deep);color:#fff;box-shadow:0 8px 20px rgba(29,94,93,.3)}
.btn--lime:hover{background:var(--tb-ink);color:#fff}
.btn .chev::after{content:"→";margin-left:10px;font-size:16px}
.mt32{margin-top:32px}.mt48{margin-top:48px}

/* services（旧リスト型） */
.services{list-style:none;margin:0;padding:0;display:grid;gap:18px}
.services li{display:grid;grid-template-columns:64px 1fr;gap:20px;align-items:start;background:#fff;padding:26px 28px;border-radius:var(--r);box-shadow:var(--shadow)}
.services .num{font-family:var(--en);font-weight:700;font-size:28px;color:var(--teal-text);line-height:1;padding-top:4px}
.services h3{font-size:20px;margin-bottom:8px}
.services p{margin:0;font-size:15px;color:var(--ink)}

/* band（写真帯） */
.band{position:relative;padding-block:130px;background:#cfeeee center/cover no-repeat;text-align:center;isolation:isolate}
.band::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(29,94,93,.78),rgba(35,118,117,.55))}
.band h2{position:relative;color:#fff;font-size:clamp(26px,3.6vw,42px);letter-spacing:.12em}

/* news */
.news{list-style:none;margin:0 auto;padding:0;max-width:860px;background:#fff;border-radius:var(--r);box-shadow:var(--shadow);padding-inline:24px}
.news li{display:flex;gap:28px;padding:18px 4px;border-bottom:1px solid var(--line);color:var(--ink)}
.news li:last-child{border-bottom:0}
.news time{flex:0 0 96px;font-family:var(--en);font-weight:600;color:var(--tb-deep);letter-spacing:.06em}

/* flow steps */
.steps{display:grid;grid-template-columns:repeat(5,1fr);gap:18px;counter-reset:s}
.steps article{background:#fff;border-top:4px solid var(--green);padding:26px 20px;border-radius:var(--r);box-shadow:var(--shadow)}
.steps .num{font-family:var(--en);font-weight:700;font-size:30px;color:var(--teal-text);line-height:1}
.steps h3{font-size:18px;margin:10px 0}
.steps p{font-size:14.5px;margin:0;color:var(--ink)}
.cycle{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;position:relative}
.cycle article{background:#fff;padding:26px 18px;text-align:center;border-radius:var(--r);position:relative;box-shadow:var(--shadow)}
.cycle article h3{font-size:17px}
.cycle article p{font-size:14px;color:var(--muted);margin:8px 0 0}
.cycle article:not(:last-child)::after{content:"▶";position:absolute;right:-17px;top:50%;transform:translateY(-50%);color:var(--teal-text);font-size:14px}
.ribbon{display:block;margin:28px auto 0;max-width:720px;background:var(--tb-deep);color:#fff;text-align:center;padding:16px 20px;font-weight:700;letter-spacing:.1em;font-size:17px;border-radius:999px}
@media (max-width:900px){.steps{grid-template-columns:1fr 1fr}.cycle{grid-template-columns:1fr 1fr}.cycle article:not(:last-child)::after{display:none}}
@media (max-width:560px){.steps{grid-template-columns:1fr}.cycle{grid-template-columns:1fr}}

/* about */
.message{display:grid;grid-template-columns:380px 1fr;gap:44px;align-items:center}
.message>div{background:#fff;padding:38px 42px;border-radius:var(--r);box-shadow:var(--shadow)}
.message img{border-radius:var(--r);aspect-ratio:4/5;object-fit:cover;box-shadow:18px 18px 0 var(--tb4)}
.message h3{font-size:23px;margin-bottom:18px;color:var(--green-deep)}
.message p{color:var(--ink);line-height:2.05;letter-spacing:.03em;font-size:16px}
.company{width:100%;max-width:880px;margin:0 auto;border-collapse:collapse;background:#fff;border-radius:var(--r);overflow:hidden;box-shadow:var(--shadow)}
.company th,.company td{text-align:left;padding:18px 20px;border-bottom:1px solid var(--line);vertical-align:top;letter-spacing:.03em}
.company th{width:170px;font-weight:700;white-space:nowrap;background:var(--mint-2);color:var(--green-deep)}
@media (max-width:800px){.message{grid-template-columns:1fr}.message>div{padding:28px 22px}.message img{max-width:340px;margin:0 auto}.company th{width:110px}}

/* contact card */
.contact-card{background:linear-gradient(120deg,var(--tb-ink),var(--tb-deep));max-width:1000px;margin:0 auto;padding:56px 32px;text-align:center;border-radius:16px;color:#fff;position:relative;overflow:hidden;isolation:isolate}
.contact-card::after{content:"";position:absolute;z-index:-1;right:-40px;top:-20px;bottom:-20px;width:120px;background:var(--tb3);transform:skewX(-28deg);opacity:.85}
.contact-card .sec-head .en{color:var(--tb5)}
.contact-card h2{font-size:28px;color:#fff}
.contact-card p{color:#fff;margin:18px 0 30px;letter-spacing:.04em;font-size:16.5px}
.contact-card strong{color:var(--tb5)}
.contact-card .btns{display:flex;gap:18px;justify-content:center;flex-wrap:wrap}
.contact-card .btn{min-width:min(320px,100%);font-size:18px;padding:18px 30px;background:var(--tb5);color:var(--green-deep)}
.contact-card .btn:hover{background:#C2F2F1;color:var(--green-deep)}

/* form */
.form{display:grid;grid-template-columns:220px 1fr;gap:22px 26px;align-items:center;max-width:900px;margin:0 auto;background:#fff;padding:36px;border-radius:var(--r);box-shadow:var(--shadow)}
.form label{font-size:15px;font-weight:700;letter-spacing:.04em;color:var(--ink);display:flex;align-items:center;gap:10px}
.req{background:var(--tb-deep);color:#fff;font-size:11px;padding:2px 8px;border-radius:999px;letter-spacing:.06em}
.form input,.form textarea,.form select{width:100%;border:1.5px solid var(--line);background:#fff;padding:14px 16px;font:inherit;font-size:16px;border-radius:8px;color:var(--ink)}
.form textarea{min-height:140px;resize:vertical}
.form input:focus,.form textarea:focus,.form select:focus{outline:3px solid rgba(35,118,117,.35);border-color:var(--green)}
.form .submit{grid-column:1/-1;text-align:center}
.form .agree{grid-column:1/-1;font-size:14px;color:var(--muted)}
@media (max-width:720px){.form{grid-template-columns:1fr;gap:8px 0;padding:24px 18px}.form label{margin-top:14px}}

/* footer */
.site-footer{background:var(--footer);color:#d7f0ef;padding-block:60px 28px;font-size:14px;letter-spacing:.04em}
.site-footer .cols{display:grid;grid-template-columns:1.2fr 1fr 1fr;gap:32px}
.site-footer .brand{color:#fff}
.site-footer .brand small{color:var(--tb4)}
.site-footer a{color:#eafafa}
.site-footer a:hover{color:var(--tb4)}
.site-footer ul{list-style:none;padding:0;margin:0;display:grid;gap:10px}
.site-footer .copy{margin-top:40px;text-align:center;color:#a6cfce;font-size:12px}
@media (max-width:720px){.site-footer .cols{grid-template-columns:1fr}}

/* reveal（初期表示でも見える状態から） */
.rv{transition:transform .6s ease}
.js .rv:not(.in){transform:translateY(14px)}
@media (prefers-reduced-motion:reduce){.rv,.js .rv:not(.in){opacity:1;transform:none;transition:none}}

@media (max-width:600px){.hero .hero-sub{font-size:15px;letter-spacing:.04em}.hero .lead br,.prose br{display:none}.section{padding-block:72px}}

/* 下層ページ上部の写真: 人物が左の帯に隠れないよう、切り抜いた写真を右側に高さいっぱいで置く（2026-10-30） */
@media (min-width:761px){.ref .hero.hero--page{background-size:auto 100%;background-position:right center;background-color:var(--tb5)}}
/* 写真なしの下層ページ上部（会社案内・サービスの流れ・実績・コラム／2026-10-30 社長指示）: 低めにして、右側に斜めの帯だけを残す */
.ref .hero.hero--plain{min-height:240px;background-image:none;background-color:var(--tb5)}
.ref .hero--plain::before{background:linear-gradient(115deg,transparent 0 64%,var(--tb3) 64% 68%,transparent 68% 72%,var(--tb4) 72% 100%)}
@media (max-width:760px){.ref .hero.hero--plain{min-height:auto;padding-block:48px 56px}.ref .hero--plain::before{background:linear-gradient(115deg,transparent 0 80%,var(--tb3) 80% 85%,var(--tb4) 85% 100%)}}
.message--long{align-items:start}
.message--long img{position:sticky;top:calc(96px + env(safe-area-inset-top,0px))}
.message--long p+p{margin-top:14px}
@media (max-width:800px){.message--long img{position:static}}