/* Shared styles for the local subpages. Design units use the PC and mobile artboards. */
.lower-site { --u: min(1px, calc(100vw / 1440)); --u-x: var(--u); }
.fig-sp, .nav-mobile { display: none; }
.design-band { overflow: clip; }
.design-band > .design-node { margin-inline: auto; }
.design-node { display: block; position: relative; flex: none; min-width: 0; }
.layout-column, .layout-row { display: flex; align-items: flex-start; }
.layout-column { flex-direction: column; }
.layout-row { flex-direction: row; }
.design-text { white-space: pre-wrap; overflow-wrap: normal; line-break: strict; }
.design-link { text-decoration: none; }
.design-link:hover { text-decoration: underline; text-underline-offset: .2em; }
.inline-design-link { text-decoration: underline; text-underline-offset: .2em; }
.design-link:focus-visible { outline-offset: -2px; z-index: 1; }
.lower-site main .design-node[id], .lower-site .contact-form-section { scroll-margin-top: 18px; }
.design-image img, .design-vector svg { display: block; width: 100%; height: 100%; max-width: none; }
.design-vector { pointer-events: none; }
.design-clip-def { position: absolute; }
.design-vector svg { position: absolute; inset: 0; overflow: visible; }
.design-symbol { line-height: 1; font-size: calc(20 * var(--u)); text-align: center; color: currentColor; }
.design-swoosh { border-radius: 100% 0 100% 0; transform: skewX(-35deg) rotate(-4deg); }
.lower-site [hidden] { display: none !important; }
.filter-reflow { min-height: 0 !important; }

.fig-pc [data-section$="制作範囲を明確にします"] .layout-column:has(> h2),
.fig-pc [data-section$="制作範囲を明確にします"] h2 { width: calc(1000 * var(--u-x)) !important; }
.fig-pc [data-section$="システムの現場で培った経験"] h2 { max-width: 100%; }
.fig-pc .case-result-value { min-height: calc(56 * var(--u)) !important; }
.lower-site [aria-disabled="true"] { opacity: .65; }

.lower-header .header-inner { grid-template-columns: minmax(235px,1fr) auto minmax(140px,.75fr); }
.lower-header .nav-desktop { display: flex; gap: clamp(14px,2.7vw,44px); }
.lower-header .header-cta {
  width: min(248px,100%);
  min-height: 53px;
  padding-inline: 12px;
  white-space: nowrap;
}
.lower-header .brand { font-size: clamp(22px,2.37vw,34px); }
.lower-header .lower-mobile-cta { color: #fff; background: var(--red); }
.lower-site[data-page="18"] .lower-header .header-inner,
.lower-site[data-page="20"] .lower-header .header-inner { grid-template-columns: minmax(235px,1fr) auto; }

.column-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; padding: 28px 24px; width: min(100%,1210px); margin-inline: auto; }
.category-buttons { display: flex; flex-wrap: wrap; gap: 10px; }
.category-buttons button, .column-search button {
  min-height: 46px; border: 1px solid var(--line); border-radius: 28px; background: #fff;
  color: var(--ink); padding: 8px 17px; cursor: pointer; font: 700 15px/1.35 var(--body-font);
}
.category-buttons button[aria-pressed="true"], .column-search button { background: var(--dark); color: white; border-color: var(--dark); }
.category-buttons button:hover, .column-search button:hover { box-shadow: inset 0 0 0 1px var(--dark); }
.column-search { display: flex; gap: 10px; min-width: 0; }
.column-search input, .contact-form input:not([type="checkbox"]), .contact-form textarea {
  min-width: 0; width: 100%; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line);
  background: #fff; color: var(--ink); border-radius: 9px; font: inherit;
}
.column-search button { flex: none; }
.column-empty { width: 100%; padding: 25px; background: #f2f7fb; border-radius: 14px; }
.column-design-sample { width: min(calc(100% - 48px),1100px); margin: 20px auto 40px; border-top: 1px solid var(--line); }
.column-design-sample summary { padding: 14px 0; font-weight: 700; cursor: pointer; }
.column-design-sample article { display: flex; align-items: center; flex-wrap: wrap; gap: 16px; }
.column-design-sample img { width: min(240px,100%); border-radius: 10px; }
.column-design-sample p { font-size: 14px; color: #435b6e; }

.contact-form-section { padding: 76px 24px 83px; background: #eef5f9; }
.contact-form { width: min(100%, 850px); padding: clamp(18px,3.2vw,43px); margin-inline: auto; border-radius: 20px; background: white; border: 1px solid #cfdee9; }
.contact-form h2 { margin-bottom: 23px; font-size: 32px; }
.contact-form .form-field { margin: 0 0 24px; min-inline-size: 0; padding: 0; border: 0; }
.contact-form label:not(.option), .form-label, .contact-form legend { font-weight: 700; }
.form-field > label, .form-label { display: flex; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; margin-bottom: 7px; }
.required, .optional { display: inline-block; color: #ac0e29; font-size: .85em; font-weight: 700; }
.optional { color: #526b7d; }
.field-note { margin: 6px 0; font-size: 14px; color: #435b6e; }
.field-error { color: #a30927; margin-top: 7px; font-size: 15px; font-weight: 700; }
.contact-form [aria-invalid="true"] { border-color: #a30927 !important; outline: 1px solid #a30927; }
.contact-form :focus-visible, .column-search :focus-visible { outline: 2px solid #bd903a; outline-offset: 2px; }
.form-options { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 5px 20px; }
.option, .consent-row { min-height: 44px; display: flex; align-items: flex-start; gap: 9px; padding: 9px 0; }
.contact-form input[type="checkbox"] { width: 19px; height: 19px; flex: 0 0 19px; margin: 4px 0 0; accent-color: var(--dark); }
.contact-form textarea { display: block; resize: vertical; }
.contact-form .button { display: flex; width: min(100%,360px); margin: 17px auto 0; cursor: pointer; }
.local-result { max-width: 850px; margin: 18px auto; padding: 12px 18px; background: #edf5fa; color: var(--ink); }

.fig-pc .contact-form { width: min(100%,922px); padding-inline: clamp(40px,6.2vw,89px); }
.fig-pc .contact-form #name { max-width: 412px; }
.fig-pc .contact-form #business { max-width: 548px; }
.fig-pc .contact-form #email { max-width: 618px; }
.fig-pc .contact-form input:not([type="checkbox"]) { min-height: 52px; }
.fig-pc .form-options { grid-template-columns: 1fr; gap: 0; }

@media (max-width: 1100px) {
  .lower-site {
    --u: clamp(.81px, calc(100vw / 390), 1.16px);
    --mobile-width: min(100vw, 680px);
    --u-x: calc(var(--mobile-width) / 390);
  }
  .fig-pc { display: none; }
  .fig-sp { display: block; }
  .photo-hero + .design-band > .design-node,
  .photo-hero + .design-band .design-vector { width: 100% !important; }
  .column-filter { display: grid; width: var(--mobile-width); gap: 10px; }
  .category-buttons { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 7px 10px; }
  .category-buttons button:first-child { grid-column: 1/-1; justify-self: start; }
  .column-search input { font-size: 16px; }
  .contact-form-section { padding: 45px 24px; }
  .contact-form { width: min(100%,calc(342 * var(--u-x))); padding: 0; border: 0; background: transparent; }
  .contact-form h2 { font-size: 25px; }
  .contact-form .form-field { padding: 16px; margin-bottom: 16px; background: #fff; border: 1px solid #cfdee9; border-radius: 14px; }
  .contact-form fieldset > legend { float: left; margin-bottom: 4px; }
  .contact-form fieldset .field-note { clear: both; }
  .form-options { grid-template-columns: 1fr; }
  .form-field > label, .form-label { justify-content: space-between; }
  .local-result { margin-inline: 24px; }
}

@media (max-width: 820px) {
  .lower-header .nav-desktop, .lower-header .header-cta { display: none; }
  .lower-header .header-inner {
    --side: clamp(16px,6.15vw,24px); min-height: 64px; max-width: var(--mobile-width);
    grid-template-columns: minmax(0,1fr) auto auto; grid-template-rows: 64px; gap: 0 8px; padding-inline: var(--side);
  }
  .lower-header .brand { font-size: clamp(15px,4.87vw,19px); padding-bottom: 3px; white-space: nowrap; }
  .lower-header .brand::after { height: 5px; bottom: 0; }
  .lower-header .lower-mobile-cta, .lower-header .menu-toggle { display: grid; place-content: center; min-height: 48px; }
  .lower-header .lower-mobile-cta { min-width: clamp(60px,21.5vw,84px); border-radius: 10px; font-size: 14px; }
  .lower-header .menu-toggle { width: 48px; min-width: 44px; border-radius: 10px; border: 1px solid #d4e1ea; color: var(--ink); background: #fff; gap: 4px; padding: 8px; cursor: pointer; }
  .lower-header .menu-toggle span { display: block; width: 21px; height: 2px; background: currentColor; }
  .lower-header .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(6px) rotate(45deg); }
  .lower-header .menu-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
  .lower-header .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-6px) rotate(-45deg); }
  .lower-header .main-nav { display: none; grid-column: 1/-1; margin-inline: calc(-1 * var(--side)); padding: 18px var(--side) 24px; background: #f2f7fb; }
  .lower-header .menu-toggle[aria-expanded="true"] + .main-nav { display: block; }
  .lower-header .nav-mobile { display: grid; gap: 7px; }
  .lower-header .nav-mobile a {
    display: flex; justify-content: space-between; align-items: center; gap: 6px; width: 100%;
    min-height: 48px; padding: 7px 13px; border: 1px solid #cfdee9; border-radius: 26px;
    background: #fff; font-size: 15px; white-space: normal;
  }
  .lower-header .nav-mobile a::after { content: "›"; color: inherit; }
  .lower-header .nav-mobile .lower-menu-cta { background: var(--red); color: #fff; }
  .lower-header .menu-group-label { color: var(--dark); font-size: 15px; }
  .lower-site[data-page="18"] .lower-header .header-inner,
  .lower-site[data-page="20"] .lower-header .header-inner { grid-template-columns: minmax(0,1fr) auto; }
}

@media (max-width: 360px) {
  .lower-header .header-inner { --side: 16px; column-gap: 6px; }
}

@media (width < 720px) {
  .fig-sp [data-column-card] { padding-bottom: var(--flow-bottom); }
  .fig-sp [data-column-card] h3 {
    white-space: normal;
    word-break: auto-phrase;
    text-wrap: pretty;
  }
  .fig-sp .column-title-divider { display: none; }
  .fig-sp .column-title-detail { display: block; }
}

@media (720px <= width <= 1100px) {
  .lower-site { --mobile-width: min(100vw, 960px); }

  /* Keep the authored gaps and padding; let wrapped copy determine the height. */
  .fig-sp .natural-height:not(a) {
    min-height: 0 !important;
    padding-bottom: var(--flow-bottom);
  }
  .fig-sp .natural-height:not(a) > .design-text:not(a) { min-height: 0 !important; }

  /* The cover photos need more height at this width; illustration edges stay visible. */
  .fig-sp .responsive-media {
    --media-block: min(340px, var(--media-height));
    min-height: var(--media-block) !important;
  }
  .fig-sp .responsive-media > .design-image {
    height: var(--media-block) !important;
    min-height: 0 !important;
  }
  .fig-sp .responsive-media > .whole-illustration { background: #eaf6fd; }
  .fig-sp .whole-illustration img { object-fit: contain !important; }
  .lower-site[data-page="1"] .fig-sp .layout-column:has(> .responsive-media > .whole-illustration) {
    --service-art: calc(342 * var(--u-x) * .40);
    --service-copy: calc(342 * var(--u-x) - var(--service-art) - 24px);
    display: grid;
    grid-template-columns: var(--service-art) var(--service-copy);
    gap: 24px;
  }
  .lower-site[data-page="1"] .fig-sp .responsive-media:has(> .whole-illustration) {
    --u-x: calc(var(--service-art) / 342);
  }
  .lower-site[data-page="1"] .fig-sp .responsive-media:has(> .whole-illustration) + .layout-column {
    --u-x: calc(var(--service-copy) / 342);
    margin-top: 0 !important;
  }
  .fig-sp .responsive-media:has(img:is([src$="/website-mobile-check.png"], [src$="/restaurant-body-food-photo.png"])) {
    --media-block: min(410px, var(--media-height));
  }
  .fig-sp img:is([src$="/website-mobile-check.png"], [src$="/restaurant-body-food-photo.png"]) {
    object-position: center 40%;
  }
  .fig-sp [data-section$="サイト制作のご相談"] h2,
  .fig-sp [data-section$="Googleマップ運用のご相談"] h2,
  .fig-sp [data-section$="事業に合った運用量と費用の対象"] h3,
  .fig-sp [data-section$="公開後の運用相談"] h2,
  .fig-sp [data-section$="Googleビジネスプロフィールの運用事例"] .layout-column > h2 + p,
  .lower-site[data-page="6"] .photo-hero > .design-node > p,
  .fig-sp [data-column-card] h3 {
    text-wrap: balance;
    word-break: auto-phrase;
  }
  .fig-sp footer .layout-overlay:has(> .inline-design-link) > .design-vector { --u-x: var(--u); }
  .fig-sp footer .layout-overlay > .inline-design-link { text-decoration: none; width: max-content !important; }
  .fig-sp footer .layout-overlay > .inline-design-link:hover { text-decoration: underline; }

  .lower-site[data-page="18"] .fig-sp .layout-overlay:has(> .design-symbol) > .design-node {
    --u-x: var(--u);
    translate: calc(171 * (var(--mobile-width) / 390 - var(--u))) 0;
  }
  .lower-site[data-page="20"] .fig-sp .layout-row > .inline-design-link,
  .lower-site[data-page="20"] .fig-sp .layout-row > .inline-design-link + .design-text { width: auto !important; }
  .lower-site[data-page="20"] .fig-sp .layout-row > .inline-design-link + .design-text { font-size: calc(16 * var(--u)) !important; }

  .fig-sp .column-filter { padding-inline: calc(24 * var(--u-x)); }
  .fig-sp .category-buttons { display: flex; }

  /* The opening copy and photo fit side by side before the desktop layout does. */
  .photo-hero > .design-node {
    --u: 1px;
    --u-x: var(--u);
    --photo-width: calc(43% - 16px);
    width: var(--mobile-width) !important;
    min-height: 0 !important;
    padding: 38px calc(var(--photo-width) + 48px) 32px 24px;
    gap: 12px;
  }
  .photo-hero > .design-node > :not(.design-image) {
    margin: 0 !important;
    max-width: 100%;
  }
  .photo-hero > .design-node > .design-text {
    width: 100% !important;
    min-height: 0 !important;
  }
  .photo-hero > .design-node > .design-image {
    position: absolute;
    inset-inline-end: 24px;
    top: 50%;
    translate: 0 -50%;
    width: var(--photo-width) !important;
    height: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
    aspect-ratio: 342 / 208;
  }
  .photo-hero > .design-node > .design-link {
    justify-content: space-between;
    align-items: center;
    padding-inline: 13px;
  }
  .photo-hero > .design-node > .design-link > * {
    width: auto !important;
    min-height: 0 !important;
    margin: 0 !important;
  }
}