/* 試作の見た目と場面構成。WordPressの共通トークンにはまだ反映しない。 */
:root{
  /* MAMPのtokens.cssを参照。旧変数名tealも、値は現行サイトの青にする。 */
  --teal:#2396AD;--aqua:#EAF3FB;--ink:#1F2C3A;--pink:#DE6484;
  --paper:#FFFFFF;--rose:#FBE3EA;--leaf:#DEEBF7;--mist:#E4F0FA;
  --brand-text:#C24765;--blue-dark:#1D6B7E;--lemon:#F5CF6B;
  --display:var(--font-site);
  --accent-type:var(--display);
}
body{background:var(--paper)}
h1,h2,h3,.marketing-words,.service-index{font-family:var(--display)}
h1,h2,h3{font-weight:700;letter-spacing:-.025em}
p{font-weight:400;letter-spacing:.015em}
.prototype-site-header{box-shadow:none;background:#fffffffa}
.brand{width:170px}
.prototype-global-nav{gap:20px}
.prototype-global-nav a{font-weight:500}
.header-contact{background:transparent;color:var(--ink);padding:10px 0 10px 12px}
.header-contact span{display:grid;place-items:center;width:32px;height:32px;background:var(--brand-text);color:white;border-radius:50%;font-size:15px}
.display-settings{position:relative}
.display-settings summary{display:flex;align-items:center;justify-content:center;cursor:pointer;list-style:none;width:28px;height:36px}
.display-settings summary::-webkit-details-marker{display:none}
.display-settings summary>span{display:none}
.display-settings>div{position:absolute;right:0;top:48px;min-width:210px;background:var(--paper);padding:18px;box-shadow:0 10px 35px #173b351a;border:1px solid #173b3520;display:grid;gap:8px}
.display-settings:not([open])>div{display:none}
.display-settings a,.display-settings button{font:inherit;font-size:13px;text-align:left;color:var(--ink);border:0;background:transparent;padding:9px 0}
.display-settings button:disabled{opacity:.65}

/* 線画は三層で構成。前景だけを大きく移動させ、読む区間では静止する。 */
.scene,.contact-mark{fill:none;stroke:var(--ink);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.scene{display:block;width:100%;height:100%;overflow:visible}
.art-back,.art-front{transform-box:fill-box;transform-origin:center}
.art-back{transform:translateX(calc(var(--layer-shift,0px) * -.3)) rotate(calc(var(--layer-turn,0deg) * -.3))}
.art-front{transform:translateX(var(--layer-shift,0px)) rotate(var(--layer-turn,0deg))}

/* タグラインから会社の見出しへ。文字の大小より登場する順序で視線を導く。 */
.opening-art{position:absolute;inset:0;pointer-events:none;will-change:transform,opacity;background:var(--paper) url("assets/poster-field.svg") center/cover no-repeat}
.opening-art-web{position:absolute;width:31vw;height:auto;right:-2vw;top:56%;transform:rotate(12deg)}
.opening-art-field{position:absolute;width:24vw;height:auto;left:-5vw;bottom:-8%;transform:rotate(-14deg)}
body:not(.opening-motion) .opening-art{display:none}
.hero-copy h1{font-weight:700;font-size:inherit;line-height:1.4;letter-spacing:-.03em;position:relative;isolation:isolate}
.hero-intro-line{display:block;white-space:nowrap}
.hero-target{display:inline-block;font-family:var(--display);font-weight:500;font-size:clamp(64px,8.2vw,124px);letter-spacing:-.045em;line-height:1.35;color:var(--ink)}
.hero-from{display:inline-block;font-family:var(--accent-type);font-size:clamp(35px,4.7vw,70px);font-weight:500;letter-spacing:-.025em;margin-left:.16em}
.hero-company{display:block;font-size:clamp(28px,3.1vw,46px);font-weight:500;letter-spacing:.04em;margin:24px 0 0 9%}
.hero-copy>p.hero-statement{font-family:var(--accent-type);font-size:clamp(36px,7.1vw,110px);font-weight:500;line-height:1.45;letter-spacing:.015em;margin:0 0 42px;width:max-content;max-width:100%;text-align:center}
.hero-statement>span{display:block}
.opening-motion .opening{height:410svh}
.opening-motion .hero-copy{color:var(--ink);inset:0;padding:0;transform-origin:50% 50%}
.opening-motion .hero-copy h1{position:absolute;left:16%;right:6%;top:39%;margin:0}
.opening-motion .hero-copy>p.hero-statement{position:absolute;left:0;top:0;max-width:none;margin:0;transform-origin:0 0;will-change:transform,opacity}
.opening-motion .hero-target,.opening-motion .hero-from,.opening-motion .hero-company,.opening-motion .opening-art .scene{opacity:0}
body:not(.opening-motion) .hero-copy{background:var(--paper) url("assets/poster-field.svg") center/cover;color:var(--ink);overflow:hidden}
.hero-copy h1 .hero-target,.hero-copy h1 .hero-from,.hero-copy h1 .hero-company{will-change:transform}

.marketing-words{font-weight:700;letter-spacing:-.04em}
.marketing-words span:nth-child(2),.marketing-words span:nth-child(5){color:#f5cf6b}
.goal-label{font-family:var(--display);letter-spacing:.08em;font-weight:500}
.goal-label:after{border-color:#ffffff80;border-radius:28px 28px 0 0}
.diagram-caption{font-size:14px;letter-spacing:.06em}
.opening-motion .approach-copy h2{font-weight:700;font-size:clamp(36px,4.7vw,76px);line-height:1.32}
.opening-motion .approach-copy p{font-size:clamp(15px,1.15vw,18px);line-height:2}

/* 調査はカードの一覧ではなく、見開きを一つずつ読む構成。 */
.research-section{background:var(--paper)}
.research-stage{background:var(--paper)}
.research-heading{align-items:center}
.research-heading h2{font-size:clamp(34px,3.4vw,52px);line-height:1.28}
.research-heading p{font-size:14px;line-height:1.9;font-weight:400}
.research-sheets{display:block}
.research-sheet,.research-sheet:nth-child(2),.research-sheet:nth-child(3){
  background:none;color:var(--ink);border-radius:0;box-shadow:none;padding:40px 0;
  display:grid;grid-template-columns:44% 56%;align-items:center;position:relative;gap:0;
}
.research-illustration{grid-column:2;grid-row:1;width:100%;height:430px}
.research-copy{grid-column:1;grid-row:1;padding-right:8%;position:relative;z-index:2}
.research-number{font-size:30px!important;font-family:var(--display);color:#b24163;line-height:1!important;margin-bottom:24px!important}
.research-number span{font-size:12px;color:#6a7980;letter-spacing:.1em;margin-left:8px}
.research-copy h3{font-size:clamp(30px,3.8vw,56px);line-height:1.35;margin:0 0 24px}
.research-copy>p:last-child{font-size:18px;max-width:400px;line-height:2}
.research-note{font-size:13px;line-height:1.8;max-width:800px;margin:24px 0 0;color:#526775}
.motion .research-section{height:330svh;isolation:isolate}
.motion .research-section:before{content:"";position:absolute;inset:0 0 auto;height:120svh;background:var(--teal);z-index:-1}
.motion .research-stage{padding:112px var(--pad) 34px;display:flex;flex-direction:column;justify-content:flex-start;will-change:clip-path}
.motion .research-heading{margin-bottom:8px}
.motion .research-heading h2{font-size:clamp(34px,3.4vw,52px)}
.motion .research-sheets{position:relative;flex:1;min-height:0;display:block;perspective:none}
.motion .research-sheet{position:absolute;inset:0;padding:0;box-shadow:none;will-change:opacity}
.motion .research-sheet h3{font-size:clamp(30px,3.8vw,56px);margin:0 0 22px}
.motion .research-illustration{height:100%;max-height:480px;min-height:0;will-change:transform}
.motion .research-copy{will-change:transform}
.motion .research-note{margin-top:8px;flex-shrink:0}

.process-strip{padding-top:50px;padding-bottom:85px;background:var(--paper)}
.process-strip h2{font-weight:500}
.process-strip ol{border-top:1px solid #23344430;padding-top:28px}
.process-strip li:before{font-family:var(--display);font-weight:500;color:#b24163}
.services,.service-index,.motion .service-index,.journal,.prototype-site-footer{background:var(--paper)}
.services-head{padding-top:85px;padding-bottom:45px}
.services-head h2{font-size:clamp(44px,6vw,88px)}
.motion .service-index a{border:0;font-weight:500;letter-spacing:-.01em;transition:color .2s}
.motion .service-index a[aria-current="true"]{font-weight:700}
.motion .service-index a span{transition:transform .25s}
.motion .service-index a:hover span{transform:translate(3px,-3px)}

/* 事業紹介の絵はテキストの右へ広く。色面よりも線画の場面を主役にする。 */
.panel-web{background:var(--aqua);color:var(--ink)}
.panel-field{background:var(--pink)}
.panel-ax{background:var(--paper)}
.panel-training{background:#FCF3D9}
.panel-event{background:var(--blue-dark);color:var(--paper)}
.service-panel,.motion .service-panel{box-shadow:none;isolation:isolate;grid-template-columns:48% 52%;padding:6% 5%}
.service-panel:before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background-image:radial-gradient(#2334441a .8px,transparent .8px);background-size:14px 14px;mask-image:linear-gradient(110deg,transparent 45%,#000)}
.panel-web:before,.panel-event:before{background-image:radial-gradient(#ffffff35 .8px,transparent .8px)}
.motion .service-panel{transform-origin:50% 50%;will-change:clip-path,transform}
body:not(.motion) .service-art{width:100%}
.service-copy{grid-column:1;grid-row:1;will-change:transform,opacity}
.service-copy h3,.motion .service-copy h3{font-weight:700;font-size:clamp(30px,3.1vw,49px);line-height:1.4;letter-spacing:-.025em}
.service-label{font-size:12px;font-weight:400;letter-spacing:.04em}
.service-copy>p:not(.service-label){font-weight:400;line-height:1.95}
.round-link{border:none;border-radius:0;border-bottom:1px solid #23344460;padding:16px 0 12px;background:none;font-weight:500;font-size:13px}
.round-link span{display:grid;place-items:center;width:30px;height:30px;flex-shrink:0;border-radius:50%;border:1px solid currentColor;transition:transform .25s}
.round-link:hover{background:none;color:inherit;border-color:currentColor}
.round-link:hover span{transform:rotate(45deg)}
.panel-event .round-link{border-bottom-color:#ffffff60}
.service-art,.motion .service-art{grid-column:2;grid-row:1;display:block;padding:0;margin:0 -12% 0 -2%;width:114%;height:450px;max-height:none;overflow:visible;will-change:transform;perspective:none}
.service-art .scene{filter:drop-shadow(0 14px 12px #2039440b)}
.panel-field .service-art{transform-origin:30% 65%}
.panel-training .service-art{transform-origin:80% 40%}

.journal-heading h2{font-size:clamp(34px,4.5vw,72px);line-height:1.35}
.article-grid{gap:0;border-top:1px solid #23344440}
.article{border-radius:0;background:none;border-right:1px solid #23344425;padding-top:34px}
.article:nth-child(2),.article:nth-child(3),.article:nth-child(4){background:none;color:var(--ink)}
.article:last-child{border-right:0}
.article h3{font-size:clamp(20px,1.55vw,25px);font-weight:500;line-height:1.7}
.article-meta{color:#9a3556}
.article:hover{background:var(--aqua);color:var(--ink)}
.company{background:var(--aqua)}
.company h2{font-weight:500}
.motion .company{border-radius:0 0 64px 0;box-shadow:none}
.closing,.contact{background:var(--blue-dark)}
.contact{position:relative;min-height:500px;padding-top:90px;padding-bottom:90px}
.motion .contact{min-height:65svh}
.contact h2{font-size:clamp(36px,4.5vw,64px);font-weight:500;letter-spacing:.03em;margin:22px 0 45px}
.contact-links{max-width:920px}
.contact-primary{font-family:var(--display);font-weight:500;font-size:23px}
.contact-phone{font-family:var(--display);font-weight:500;font-size:28px}
.contact .section-label{font-size:13px;letter-spacing:.1em;color:#c3d6df}
.contact-mark{display:block;position:absolute;right:8%;top:12%;width:145px;height:112px;transform:rotate(-8deg);opacity:.95}
.footer-services h2{font-family:var(--display);font-weight:700}

@media(max-width:1100px){
  .prototype-global-nav{gap:13px}.brand{width:150px}.header-contact{padding-left:0}.header-contact span{width:26px;height:26px}
  .motion .service-copy h3{font-size:32px}
  .motion .service-copy>p:not(.service-label){font-size:15px}
  .service-copy .round-link{font-size:12px;gap:10px}
}
@media(max-width:900px){
  .display-settings summary{justify-content:flex-start;width:auto;gap:12px;padding:12px 0;height:auto}
  .display-settings summary>span{display:inline;font-size:13px}
  .display-settings>div{position:static;box-shadow:none;border:0;padding:6px 0 15px}
  .research-heading p{display:none}
  .motion .research-stage{padding-top:104px}
  .research-copy>p:last-child{font-size:17px}
  .service-panel,.motion .service-panel{display:flex;flex-direction:column;justify-content:center;padding:30px;align-items:stretch}
  .service-art,.motion .service-art{order:0;width:100%;height:240px;max-height:27svh;margin:0 0 20px}
  .service-copy{order:1}
  .motion .service-copy h3{font-size:36px}
  .motion .service-copy>p:not(.service-label){font-size:16px}
  .article:nth-child(2){border-right:0}
}
@media(max-width:600px){
  .hero-copy h1{font-size:inherit;line-height:1.4}
  .hero-target{display:block;font-size:clamp(54px,16vw,84px);letter-spacing:-.04em}
  .hero-from{display:block;font-size:clamp(27px,8.4vw,43px);margin:6px 0 0 10%;letter-spacing:-.025em}
  .hero-company{font-size:clamp(23px,6.3vw,32px);margin:26px 0 0;letter-spacing:0}
  .hero-copy>p.hero-statement{font-size:9.4vw;line-height:1.55;margin-bottom:50px}
  .opening-motion .hero-copy{inset:0}
  .opening-motion .hero-copy h1{top:36%;left:24px;right:24px}
  .opening-art-web{width:73vw;right:-19vw;top:66%;transform:rotate(12deg)}
  .opening-art-field{width:58vw;left:-19vw;bottom:-7%;transform:rotate(-14deg)}
  .opening-motion .approach-copy h2{font-size:33px;line-height:1.4}
  .opening-motion .approach-copy p{font-size:14px}
  .diagram-caption{font-size:12px}
  .research-stage{padding:70px 24px 40px}
  .research-sheet,.research-sheet:nth-child(2),.research-sheet:nth-child(3){display:flex;flex-direction:column;padding:25px 0 40px}
  .research-illustration{height:250px;order:0}
  .research-copy{order:1;padding:0;width:100%}
  .research-copy h3{font-size:29px}
  .research-copy>p:last-child{font-size:16px;line-height:1.9}
  .research-number{font-size:24px!important;margin:0 0 16px!important}
  .motion .research-section{height:345svh}
  .motion .research-stage{padding:96px 24px 28px}
  .motion .research-heading{margin:0}
  .motion .research-heading h2{font-size:30px;line-height:1.3}
  .motion .research-sheet{justify-content:center;padding:0}
  .motion .research-illustration{flex:0 1 auto;height:28svh;max-height:260px;width:100%;margin:0 0 8px}
  .motion .research-sheet h3{font-size:29px;margin:0 0 14px}
  .motion .research-sheet p{font-size:16px}
  .motion .research-note{font-size:11px;line-height:1.8;margin-top:10px}
  .process-strip{padding:40px 24px 55px}
  .process-strip ol{gap:22px;padding-top:22px}
  .services-head{padding-top:65px}
  .services-head h2{font-size:46px}
  .motion .service-index{height:66px;gap:24px}
  .motion .service-index a{border-bottom:1px solid transparent;font-size:14px!important}
  .motion .service-index a[aria-current="true"]{border-color:var(--teal)}
  .motion .service-panels{top:66px;bottom:0}
  .service-panel,.motion .service-panel{padding:22px 24px}
  .service-art,.motion .service-art{height:22svh;max-height:205px;margin:0 0 10px;width:100%;flex-shrink:0}
  .motion .service-copy h3{font-size:31px;line-height:1.35;margin:8px 0 14px}
  .motion .service-copy>p:not(.service-label){font-size:15px;line-height:1.85}
  .motion .service-copy .round-link{padding:8px 0;margin-top:16px}
  .motion .service-copy .round-link span{width:26px;height:26px}
  .service-label{font-size:11px}
  .secondary-link{font-size:11px;margin-top:12px}
  .journal-heading h2{font-size:33px}
  .article-grid{border:0;gap:0}
  .article{border:0;border-top:1px solid #23344430;padding:26px 0}
  .article h3{font-size:22px}
  .motion .company{border-radius:0 0 36px 0}
  .contact{padding:75px 24px}
  .motion .contact{min-height:65svh}
  .contact h2{font-size:34px;letter-spacing:.02em;margin:20px 0 36px}
  .contact-primary{font-size:21px}
  .contact-phone{font-size:27px;margin-top:30px}
  .contact-mark{width:90px;height:70px;top:26px;right:20px;opacity:.8}
}
@media(max-width:600px) and (max-height:780px){
  .motion .service-art{display:block;height:135px;margin-bottom:8px}
  .motion .service-copy h3{font-size:28px}
  .motion .service-copy>p:not(.service-label){font-size:14px}
  .motion .research-illustration{height:23svh;margin-bottom:5px}
  .motion .research-sheet p{font-size:15px}
  .research-number{margin-bottom:12px!important}
}
@media(prefers-reduced-motion:reduce){
  .opening-art{display:none}
}

/* アイコン単体でも押せる範囲を確保する。名前は読み上げに残す。 */
.menu-button{width:44px;min-height:44px;justify-content:center}
.menu-button span{width:23px;height:13px;position:relative;transition:transform .25s}
.menu-button[aria-expanded="true"] span{border-bottom:0;height:0;transform:rotate(45deg)}
.menu-button[aria-expanded="true"] span:after{content:"";position:absolute;left:0;top:-1px;width:23px;border-top:1px solid;transform:rotate(90deg)}

/* 後半も全画面の接続を維持。文字を読む間は移動を止める。 */
.journal-travel,.company-travel{position:relative}
.closing{overflow:clip}
.motion .journal-heading,.motion .company-main,.motion .company-news,.motion .contact-links,.motion .contact-mark{will-change:transform,opacity}
.motion .contact-mark{transform-origin:50% 100%}
.motion .contact{isolation:isolate}
.motion .contact:before{content:"";position:absolute;width:40vw;height:40vw;min-width:250px;min-height:250px;right:-20vw;bottom:-26vw;border:1px solid #c5d6df40;border-radius:50%;z-index:-1;transform:scale(var(--contact-orbit,1))}
@media(min-width:901px){
  .motion .journal-travel{height:220svh;background:var(--paper)}
  .motion .journal{position:sticky;top:82px;height:calc(100svh - 82px);padding:40px var(--pad);display:flex;flex-direction:column;justify-content:center}
  .motion .journal-heading{margin-bottom:28px;gap:12px 30px}
  .motion .journal-heading h2{font-size:clamp(32px,3.3vw,50px)}
  .motion .journal-heading>.section-label{font-size:13px}
  .motion .article{min-height:250px;padding:23px 20px}
  .motion .article h3{font-size:clamp(18px,1.4vw,22px);line-height:1.75}
  .motion .article-meta{margin-bottom:20px}
  .motion .article-open{padding-top:18px;font-size:24px}
  .motion .journal-related{margin-top:22px;font-size:12px}
  .motion .company-travel{height:190svh;z-index:2;pointer-events:none}
  .motion .company{position:sticky;top:82px;min-height:calc(100svh - 82px);padding:50px var(--pad);pointer-events:auto;transform-origin:0 50%}
  .motion .company h2{font-size:44px;margin:18px 0 26px}
  .motion .company dl>div{padding:13px 0}
  .motion .contact{min-height:calc(100svh - 82px)}
}
@media(min-width:601px) and (max-width:900px){
  .hero-target{font-size:9vw}
  .hero-from{font-size:4.9vw}
  .hero-company{font-size:4vw;margin-left:9%}
  .opening-motion .hero-copy h1{left:9%;top:40%}
}
@media(max-width:900px){
  body:not(.opening-motion) .opening-stage{padding-top:68px}
}
@media(max-width:600px){
  .opening-art{background-image:url("assets/poster-field-mobile.svg");background-position:center;background-size:100% 100%}
  body:not(.opening-motion) .hero-copy{background-image:url("assets/poster-field-mobile.svg");background-size:100% 100%}
  .motion .journal{overflow:clip}
  .motion .company-main,.motion .company-news{transform-origin:50% 50%}
}

/* 2026-09-18 当社の5つの視点。名称を省略せず、後半2項目の幅を確保する。 */
.marketing-words{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:18px 24px;font-size:clamp(24px,3.5vw,54px);text-align:center}
.marketing-words span{grid-column:span 2}
.marketing-words span:nth-child(4),.marketing-words span:nth-child(5){grid-column:span 3;font-size:.74em}
@media(max-width:699px){
 .marketing-plane .marketing-words{gap:12px 8px;font-size:30px}
 .marketing-words span:nth-child(4),.marketing-words span:nth-child(5){font-size:17px;line-height:1.5}
}

/* 2026-09-18 最新方針は集客・接客・追客の3項目。 */
.marketing-words{grid-template-columns:repeat(3,minmax(0,1fr));font-size:clamp(32px,5vw,72px)}
.marketing-words span{grid-column:auto}
@media(max-width:699px){.marketing-plane .marketing-words{font-size:34px}}