/*
 * Responsive refinements for the standalone inner pages.
 * Scope: ABOUT / VALUE / COMPANY / CONTACT only.
 * Shared header and footer rules intentionally live elsewhere.
 */

:is(.page-about, .page-value, .page-company, .page-contact) main {
  min-width: 0;
  overflow: clip;
}

:is(.page-about, .page-value, .page-company, .page-contact) main
  :is(h1, h2, h3, p, dt, dd, label, a, span) {
  line-break: strict;
  overflow-wrap: break-word;
}

:is(.page-about, .page-value, .page-company, .page-contact) main
  :is(h1, h2, h3) {
  text-wrap: balance;
}

:is(.page-about, .page-value, .page-company, .page-contact) main p {
  text-wrap: pretty;
}

/* 1024px-class tablets and compact notebooks. */
@media (max-width: 1100px) {
  .page-about .about-home-mission {
    width: min(90%, 960px);
    gap: clamp(44px, 6vw, 68px);
  }

  .page-about .bd-mission__visual.bd-mission-collage {
    height: 470px;
  }

  .page-about .bd-mission__copy .bd-mission__title h2 {
    margin-bottom: 32px;
    font-size: 36px;
  }

  .page-about .bd-mission__copy .bd-mission__body > h3 {
    font-size: clamp(32px, 4.25vw, 43px);
  }

  .page-value .bd-selectable-values__panel {
    padding-right: 5%;
    padding-left: 4%;
  }

  .page-value .bd-selectable-values__panel li {
    margin-bottom: 9px;
  }

  .page-company .section,
  .page-contact .section {
    padding-top: clamp(72px, 8vw, 96px);
    padding-bottom: clamp(80px, 9vw, 112px);
  }
}

/* Portrait tablet: editorial blocks become one readable column. */
@media (max-width: 860px) {
  .page-about .about-home-mission {
    display: block;
    width: 100%;
    padding: 84px 7.5% 92px;
  }

  .page-about .bd-mission__visual.bd-mission-collage {
    display: block;
    width: min(100%, 620px);
    height: 450px;
    margin: 0 auto 64px;
  }

  .page-about .bd-mission__copy {
    width: min(100%, 680px);
    margin-inline: auto;
    padding: 0;
  }

  .page-about .bd-mission__copy .bd-mission__title h2 {
    margin-bottom: 38px;
  }

  .page-about .bd-mission__copy .bd-mission__body > div {
    max-width: 46em;
  }

  .page-value .bd-home-values {
    padding: 92px 0 104px;
  }

  .page-value .bd-selectable-values {
    display: block;
    width: min(88%, 690px);
    min-height: 0;
    margin-inline: auto;
    background: #f7f7f7;
    text-align: left;
  }

  .page-value .bd-selectable-values::after {
    right: -6%;
    bottom: -46px;
    width: 58%;
    height: 116px;
  }

  .page-value .bd-selectable-values__photo {
    position: relative;
    top: auto;
    left: auto;
    z-index: 2;
    width: 100%;
    height: auto;
    margin: 0;
    aspect-ratio: 16 / 9;
  }

  .page-value .bd-selectable-values__panel {
    display: block;
    position: relative;
    z-index: 3;
    width: 100%;
    min-height: 0;
    margin: 0;
    padding: clamp(40px, 7vw, 58px);
    background: rgba(255, 255, 255, .97);
    box-shadow: 0 14px 30px rgba(18, 43, 55, .08);
  }

  .page-value .bd-selectable-values__panel::after {
    display: none;
  }

  .page-value .bd-selectable-values__panel h2 {
    margin-bottom: 30px;
  }

  .page-value .bd-selectable-values__panel h3 {
    margin-bottom: 18px;
    font-size: clamp(21px, 3.25vw, 25px);
  }

  .page-value .bd-selectable-values__panel li {
    margin-bottom: 16px;
  }

  .page-value .bd-selectable-values__panel strong {
    font-size: 15px;
  }

  .page-company .profile__row {
    grid-template-columns: minmax(132px, 26%) minmax(0, 1fr);
    gap: 20px;
  }

  .page-company .profile__td,
  .page-contact .contact-info dd,
  .page-contact .form-note {
    overflow-wrap: anywhere;
  }

  .page-contact .service__lead br {
    display: none;
  }

  .page-contact .contact-grid {
    grid-template-columns: 1fr;
  }

  .page-contact .contact-grid > form {
    border-top: 1px solid #d2d8d8;
  }
}

/* Phones: 320 / 375 / 390 / 430 logical-pixel widths. */
@media (max-width: 680px) {
  :is(.page-about, .page-value, .page-company, .page-contact) .page-hero {
    min-height: 360px !important;
    padding: 228px clamp(20px, 6vw, 26px) 34px !important;
    background-size: 100% 205px !important;
  }

  :is(.page-about, .page-value, .page-company, .page-contact) .page-hero::before {
    top: 188px !important;
  }

  :is(.page-about, .page-value, .page-company, .page-contact) .page-hero::after {
    top: 178px !important;
    height: 28px !important;
  }

  :is(.page-about, .page-value, .page-company, .page-contact) .page-hero__jp {
    margin-bottom: 6px !important;
    padding-left: 16px !important;
    font-size: clamp(17px, 5vw, 20px) !important;
    letter-spacing: .035em !important;
  }

  :is(.page-about, .page-value, .page-company, .page-contact) .page-hero__jp::before {
    width: 4px;
  }

  :is(.page-about, .page-value, .page-company, .page-contact) .page-hero__en {
    font-size: clamp(40px, 13vw, 52px) !important;
    letter-spacing: -.045em !important;
  }

  .page-about .about-home-mission {
    padding: 68px 6.5% 76px;
  }

  .page-about .bd-mission__visual.bd-mission-collage {
    display: grid;
    height: auto;
    min-height: 0;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 8px;
    margin-bottom: 50px;
  }

  .page-about .bd-mission-collage figure,
  .page-about .bd-mission-collage figure:nth-child(n) {
    position: relative;
    inset: auto;
    width: 100%;
    height: auto;
    aspect-ratio: 4 / 3;
    margin: 0;
  }

  .page-about .bd-mission-collage figure:first-child {
    grid-row: span 2;
    aspect-ratio: auto;
  }

  .page-about .bd-mission-collage figure img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }

  .page-about .bd-mission__copy .bd-mission__title p {
    font-size: 12px;
  }

  .page-about .bd-mission__copy .bd-mission__title h2 {
    margin-bottom: 30px;
    font-size: clamp(32px, 10vw, 40px);
  }

  .page-about .bd-mission__copy .bd-mission__body > h3 {
    margin-bottom: 24px;
    font-size: clamp(27px, 8.2vw, 34px);
    line-height: 1.45;
  }

  .page-about .bd-mission__copy .bd-mission__body > div {
    font-size: 14px;
    line-height: 1.95;
  }

  .page-about .sentaku-mvv {
    padding: 72px 0 86px;
  }

  .page-about .sentaku-mvv__inner {
    width: 87%;
  }

  .page-about .sentaku-mvv__label {
    font-size: clamp(22px, 7vw, 26px);
  }

  .page-about .sentaku-mvv__item h2 {
    font-size: clamp(18px, 5.2vw, 21px);
    line-height: 1.65;
  }

  .page-value .bd-home-values {
    padding: 66px 0 82px;
  }

  .page-value .bd-selectable-values {
    width: 88%;
  }

  .page-value .bd-selectable-values__photo {
    aspect-ratio: 4 / 3;
  }

  .page-value .bd-selectable-values__panel {
    padding: 34px clamp(22px, 7vw, 30px) 38px;
  }

  .page-value .bd-selectable-values__panel h2 {
    margin-bottom: 24px;
    font-size: clamp(32px, 10vw, 42px);
  }

  .page-value .bd-selectable-values__panel h2 small {
    font-size: 12px;
  }

  .page-value .bd-selectable-values__panel h3 {
    font-size: clamp(19px, 5.8vw, 23px);
    line-height: 1.55;
  }

  .page-value .bd-selectable-values__panel h3 br {
    display: none;
  }

  .page-value .bd-selectable-values__lead,
  .page-value .bd-selectable-values__panel li {
    font-size: 13px;
    line-height: 1.85;
  }

  .page-value .bd-selectable-values__panel span {
    display: block;
  }

  .page-company .section,
  .page-contact .section {
    padding: 66px 0 78px;
  }

  .page-company .wrap,
  .page-contact .wrap {
    width: 88%;
  }

  .page-company .profile__row {
    grid-template-columns: 1fr;
    gap: 7px;
    padding: 19px 2px;
  }

  .page-company .profile__th {
    font-size: 12px;
  }

  .page-company .profile__td {
    font-size: 14px;
    line-height: 1.75;
  }

  .page-company .profile__services span {
    display: block;
  }

  .page-company .btn {
    width: 100%;
    min-height: 54px;
    padding-right: 20px;
    padding-left: 20px;
    white-space: normal;
  }

  .page-contact .service__lead {
    margin-bottom: 38px !important;
    font-size: 14px;
    line-height: 1.95;
  }

  /* Keep the sentence break semantic on narrow screens.  Chrome's Japanese
     auto-phrase currently splits 「お聞かせ」 after 「お聞か」. */
  .page-contact .contact-kaizen__form > h2 {
    font-size: 0 !important;
  }

  .page-contact .contact-kaizen__form > h2::before {
    content: "ご相談内容を\Aお聞かせください。";
    display: block;
    color: #173947;
    font-size: clamp(25px, 7.4vw, 28px);
    font-weight: 700;
    line-height: 1.5;
    white-space: pre-line;
  }

  .page-contact .contact-info,
  .page-contact #contact-form {
    padding: 30px clamp(20px, 7vw, 30px);
  }

  .page-contact .contact-info h3 {
    margin-bottom: 30px;
    font-size: 24px;
  }

  .page-contact .contact-info dd.tel {
    font-size: clamp(20px, 6.4vw, 24px);
  }

  .page-contact .form-row {
    margin-bottom: 22px;
    padding-bottom: 18px;
  }

  .page-contact .form-row input,
  .page-contact .form-row select,
  .page-contact .form-row textarea {
    width: 100%;
    min-width: 0;
    font-size: 16px;
  }

  .page-contact .form-row textarea {
    min-height: 140px;
  }

  .page-contact .form-submit .btn {
    min-height: 56px;
    padding-right: 18px;
    padding-left: 18px;
    font-size: 14px;
    white-space: normal;
  }

  .page-contact .form-note {
    font-size: 11px;
    line-height: 1.75;
  }
}

@media (max-width: 390px) {
  :is(.page-about, .page-value, .page-company, .page-contact) .page-hero {
    min-height: 340px !important;
    padding-top: 216px !important;
    padding-bottom: 29px !important;
    background-size: 100% 193px !important;
  }

  :is(.page-about, .page-value, .page-company, .page-contact) .page-hero::before {
    top: 178px !important;
  }

  :is(.page-about, .page-value, .page-company, .page-contact) .page-hero::after {
    top: 169px !important;
  }

  .page-about .bd-mission__copy .bd-mission__body > h3 {
    letter-spacing: 0;
  }

  .page-value .bd-selectable-values {
    width: 90%;
  }

  .page-contact .contact-info,
  .page-contact #contact-form {
    padding-right: 20px;
    padding-left: 20px;
  }
}

@media (max-width: 340px) {
  :is(.page-about, .page-value, .page-company, .page-contact) .page-hero__en {
    font-size: 39px !important;
  }

  .page-about .about-home-mission,
  .page-company .wrap,
  .page-contact .wrap {
    width: 100%;
  }

  .page-about .about-home-mission {
    padding-right: 20px;
    padding-left: 20px;
  }

  .page-company .wrap,
  .page-contact .wrap {
    padding-right: 18px;
    padding-left: 18px;
  }

  .page-value .bd-selectable-values {
    width: calc(100% - 28px);
  }

  .page-value .bd-selectable-values__panel {
    padding-right: 18px;
    padding-left: 18px;
  }
}