/* Shared three actions. The background follows the irregular edge of the original drawing. */
.f-quick-links {
  border: 0;
  gap: 20px;
}
.f-quick-links > :is(a, button) {
  justify-content: center;
  position: relative;
  color: #fff;
  background: url('assets/revised/button-shape.png') center / 100% 100% no-repeat;
  border: 0;
}
.f-quick-links > :is(a, button):hover {
  background: url('assets/revised/button-shape.png') center / 100% 100% no-repeat;
  filter: brightness(.94);
}
.f-quick-links img { filter: brightness(0) invert(1); }
.f-service,.f-services-heading h2 a { display:block; }
.f-services-heading h2 a { height:100%; }
.sumicchi { position:absolute; width:186px; pointer-events:none; user-select:none; scroll-margin-top:32vh; }
.sumicchi-body { width:100%; height:auto; }
.sumicchi .pupil { position:absolute; inset:0; width:100%; height:100%; }
@media (prefers-reduced-motion:no-preference) {
  .sumicchi .pupil { transition: transform 75ms ease-out; }
}

.f-controller { display:block; }
.f-controller img { width:100%; height:auto; }
.f-controller:is(:hover,:focus-visible) img { filter:brightness(.84); }
.company-page .f-canvas { height:auto; }
.company-page .f-footer { position:relative; top:auto; transform:none; }
.company-content {
  --profile-green:#347338; --profile-rule:#c5d4bf;
  width:min(calc(100% - 40px),1120px); margin-inline:auto; font-size:var(--body-size,16px);
}
.company-photo {
  margin:0; aspect-ratio:2.45; display:grid; place-items:center;
  background:#f1f2ed; border:2px solid #959f8f; border-radius:1% .6% 1.2% .7% / 2% 1% 2% 1%;
}
.company-photo figcaption { color:#586153; font-size:var(--small-size,14px); }
.company-inner { max-width:830px; margin:0 auto; }
.company-lead { margin:46px 0 26px; }
.company-lead h1 { color:var(--profile-green); font:800 clamp(30px,3.25vw,54px)/1.45 var(--hira); }
.company-lead h1 span { display:block; }
.company-story { line-height:1.9; font-weight:500; }
.company-story h2 { margin:0 0 .5em; font:800 1.2em/1.55 var(--hira); color:var(--profile-green); }
.company-story h2 small { font:500 var(--small-size,14px)/1.55 var(--hira); color:#4c5849; }
.company-story > p { margin-top:.75em; }
.company-profile { margin-top:60px; }
.profile-head { display:flex; align-items:end; justify-content:space-between; gap:16px; padding-bottom:10px; border-bottom:3px solid var(--profile-green); }
.profile-word { height:18px; width:auto; }
.profile-head h2 { margin-top:7px; color:var(--profile-green); font:800 1.8em/1.3 var(--hira); }
.profile-friends { width:clamp(120px,26%,210px); height:auto; }
.company-profile dl { margin:0; }
.company-profile dl div { display:grid; grid-template-columns:7em minmax(0,1fr); gap:1.1em; padding:.9em .35em; border-bottom:1px solid var(--profile-rule); }
.company-profile dt { color:var(--profile-green); font:800 1em/1.75 var(--hira); }
.company-profile dd { margin:0; font-weight:500; line-height:1.75; }
.company-profile dd span { display:inline-block; }
.profile-source { margin-top:1em; color:#4c5849; font-size:var(--small-size,14px); }
.profile-source a { text-decoration:underline; text-underline-offset:.2em; }
.company-details { margin-top:2.25em; }
.company-details h2 { margin-bottom:.55em; padding-bottom:.25em; border-bottom:2px solid var(--profile-green); font:800 1.45em/1.5 var(--hira); color:var(--profile-green); }
.company-details p,.company-fields dd { font-weight:500; line-height:1.8; }
.company-fields { margin:0; }
.company-fields > div { border-bottom:1px solid var(--profile-rule); padding:.85em .35em; }
.company-fields dt { margin-bottom:.2em; font:800 1.05em/1.65 var(--hira); }
.company-fields dd { margin:0; }
@media(min-width:900px) {
  .company-fields > div { display:grid; grid-template-columns:minmax(10em,32%) minmax(0,1fr); gap:1.1em; align-items:baseline; }
}
.company-profile dd a,.company-details a { color:var(--profile-green); text-decoration:underline; text-underline-offset:.2em; }
.company-action { margin-top:36px; text-align:center; }
.company-site-link {
  display:inline-flex; align-items:center; justify-content:center; gap:1.1em;
  min-height:52px; padding:.8em 1.5em; color:white; background:#326d32;
  border-radius:2% 1.5% 3% 1% / 7% 5% 8% 4%; font:800 1.05em/1.5 var(--hira);
}
.company-site-link:hover { background:#285b28; }
.company-site-link img { width:.7em; height:auto; filter:brightness(0) invert(1); }
.company-content a:focus-visible { outline:3px solid var(--profile-green); outline-offset:4px; }

.detail-intro, .detail-item h2 { text-align:center; }
.detail-intro h1 img { display:block; width:100%; height:auto; }
.detail-intro .f-marvin, .detail-item .f-marvin {
  position:static;
  width:var(--mw);
  height:auto;
  margin-inline:auto;
}
.detail-intro .f-marvin img, .detail-item .f-marvin img { height:auto; }
.detail-jp { display:block; font:800 18px/1.7 var(--hira); }
.detail-frame {
  position:relative;
  margin:0;
  aspect-ratio:3 / 2;
  display:grid;
  place-items:center;
  background:#eaeaea;
}
.detail-frame > span { color:#707070; font:400 40px/1.45 'Hiragino Sans',sans-serif; }
.detail-scene { position:absolute; max-width:none; height:auto; pointer-events:none; }
.item-1 { --scene-left:64.667%; --scene-top:77.57%; --scene-width:60%; }
.item-2 { --scene-left:-26%; --scene-top:67.32%; --scene-width:48.5%; }
.item-3 { --scene-left:64.667%; --scene-top:76.07%; --scene-width:50.333%; }
.item-4 { --scene-left:-19%; --scene-top:77.32%; --scene-width:52.833%; }
.item-5 { --scene-left:64.667%; --scene-top:67.32%; --scene-width:56.667%; }
.detail-scene { left:var(--scene-left); top:var(--scene-top); width:var(--scene-width); }
.detail-copy h3 { color:#42883c; font:800 24px/1.5 var(--hira); text-align:center; }
.detail-copy p { font:500 16px/1.875 'Yu Gothic','Hiragino Sans',sans-serif; overflow-wrap:anywhere; }

/* Only the group at the active breakpoint participates in reading and focus order. */
.quick-footer { display:none; }

@media(min-width:1200px) {
  .f-quick-links { left:392px; top:269px; width:1120px; height:92px; gap:20px; }
  .f-quick-links > :is(a, button) { padding:12px 58px 12px 20px; font-size:max(22px,calc(16px / var(--type-scale))); }
  .f-quick-links img { position:absolute; right:39px; width:26px; height:auto; }
  .f-hero { top:426.693px; }
  .f-news-grid { --news-row-height:max(320px, calc(220px / var(--type-scale))); }
  .f-news-card > a { display:block; padding-top:195px; }
  /* Place the bottom of each label 8 screen pixels above the photo across desktop zoom levels. */
  .f-news-card .f-category { top:calc(20px - 8px / var(--type-scale)); transform:translateY(-100%); line-height:1.25; }
  .f-news-card .f-date { position:static; }
  .f-news-grid .f-news-card h3 { position:static; margin-top:4px; font-size:max(16px,calc(14px / var(--type-scale))); line-height:1.42; }
  .f-about-copy { top:470px; line-height:2.28; }
  .f-news-card h3 br, .f-about-copy br, .f-company p br, .f-contact p br, .f-services-heading p br { display:initial; }
  .f-about-copy { width:650px; }
  .f-services-heading p { left:70px; width:396px; font-size:max(16px,calc(12px / var(--type-scale))); line-height:1.7; }
  .f-services-heading h2 { margin:0; }
  .f-service-gamepad { top:65px; }
  .f-service p { top:47px; }
  .company-content { padding:426px 0 80px; }
  .f-company p,.f-contact p { width:490px; font-size:max(16px,calc(13px / var(--type-scale))); line-height:1.75; }
  .f-contact { height:290px; }
  .f-footer .phone { top:340px; }
  .sumicchi-left { left:0; top:2900px; }
  .sumicchi-right { right:0; top:1290px; }
  .service-page .f-canvas { height:6200px; }
  .service-page .f-footer { top:5500px; transform:none; }
  .detail-intro { position:absolute; left:750px; top:458.8px; width:404px; }
  .detail-intro h1 { margin-top:28.7px; }
  .detail-list { position:absolute; left:652px; top:678px; width:600px; }
  .detail-item { position:relative; height:950px; scroll-margin-top:26px; }
  .detail-item.item-4 { height:1000px; }
  .detail-jp { margin-top:6px; }
  .detail-frame { position:absolute; top:92.71px; width:100%; }
  .detail-copy { position:absolute; top:564px; width:100%; }
  .detail-copy p { margin-top:6px; font-size:max(16px,calc(14px / var(--type-scale))); }
}
@media(max-width:1199px) {
  .f-news-card .f-news-image { margin-top:8px; }
  .f-news-card h3 { margin-top:4px; line-height:1.55; }
  .quick-header { display:none; }
  .quick-footer { display:grid; grid-template-columns:1fr; gap:5px; margin:42px auto 0; }
  .quick-footer + .f-footer { margin-top:32px; }
  .f-quick-links > :is(a, button) { min-height:54px; padding:12px 45px; font-size:17px; }
  .f-quick-links img { position:absolute; right:22px; width:14px; height:auto; }
  .sumicchi { width:clamp(60px,15vw,100px); }
  .sumicchi-left { position:relative; margin:12px auto 0 0; }
  .service-page main { position:relative; }
  .sumicchi-right { right:0; top:92px; }
  .company-content { max-width:700px; padding-top:30px; }
  .company-photo { aspect-ratio:16/9; }
  .company-lead { margin:26px 0 20px; }
  .company-lead h1 { font-size:clamp(22px,5.7vw,36px); }
  .company-profile { margin-top:38px; }
  .profile-word { height:14px; }
  .profile-head h2 { font-size:26px; }
  .company-action { margin-top:26px; }
  .detail-intro { width:min(62vw,300px); margin:38px auto 40px; }
  .detail-intro .f-marvin { width:94px; }
  .detail-intro h1 { margin-top:12px; }
  .detail-list { width:min(calc(100% - 48px),600px); margin:auto; }
  .detail-item { margin-bottom:64px; scroll-margin-top:20px; }
  .detail-item:last-child { margin-bottom:0; }
  .detail-item .f-marvin { width:min(calc(var(--mw) * .86),100%); }
  .detail-jp { margin:9px 0 16px; font-size:16px; }
  .detail-frame { width:100%; }
  .detail-frame > span { font-size:clamp(19px,5vw,32px); }
  .detail-scene { width:calc(var(--scene-width) * .88); }
  .item-1 .detail-scene,.item-3 .detail-scene,.item-5 .detail-scene { left:auto; right:-10px; }
  .item-2 .detail-scene,.item-4 .detail-scene { left:-10px; }
  .detail-copy { padding-top:max(28px,9%); }
  .detail-copy h3 { font-size:18px; line-height:1.6; text-wrap:balance; }
  .detail-copy p { margin-top:12px; line-height:1.95; }
}

@media (min-width:1600px) {
  .f-news-card h3 { margin-left:-8px; width:292px; }
  .f-news-grid .f-news-card h3 { white-space:nowrap; }
}
@media (min-width:1200px) and (max-width:1599px) {
  .f-news-card h3 br { display:none; }
}

@media(max-width:540px) {
  .company-profile dl div { grid-template-columns:1fr; gap:.16em; padding:.65em .15em; }
}

/* Anchor each drawing to its paragraph, while letting the canvas edge crop its shell. */
.company-opening > .sumicchi,.inquiry-greeting > .sumicchi {
  position:absolute; top:auto; margin:0; transform:translateY(-25%);
}
@media(max-width:1199px) {
  .company-opening,.inquiry-greeting {
    --egg-width:clamp(56px,14vw,90px);
    --outer-gutter:calc((100vw - 100%) / 2);
    position:relative; min-height:calc(var(--egg-width) * 1.3);
  }
  .company-opening { padding-left:max(0px,calc(var(--egg-width) + 12px - var(--outer-gutter))); }
  .inquiry-greeting {
    display:grid; align-items:center;
    padding-right:max(0px,calc(var(--egg-width) + 12px - var(--outer-gutter)));
  }
  .company-opening > .sumicchi,.inquiry-greeting > .sumicchi {
    top:50%; width:var(--egg-width); transform:translateY(-50%);
  }
  .company-opening > .sumicchi-left { left:calc(-1 * var(--outer-gutter)); }
  .inquiry-greeting > .sumicchi-right { right:calc(-1 * var(--outer-gutter)); }
}