/* ==============================================================
   TORABAS ONE — スマホ最適化 & グループブランドナビ 追加スタイル
   Loads AFTER styles.css to override / augment mobile.
   ============================================================== */

/* ---------- グループブランド切替リンク (nav) ---------- */
.nav__group-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 6px 12px 6px 6px !important;
  border: 1.5px solid var(--line-2) !important;
  border-radius: 999px !important;
  font-family: var(--sans) !important;
  font-size: 12px !important;
  font-weight: 700 !important;
  letter-spacing: 0.05em !important;
  color: var(--black) !important;
  transition: all 0.2s ease !important;
  margin-left: 6px;
}
.nav__group-link::after { display: none !important; }
.nav__group-link:hover {
  background: var(--black) !important;
  color: var(--white) !important;
  border-color: var(--black) !important;
}
.nav__group-link:hover .nav__group-mark {
  filter: invert(1);
}
.nav__group-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  background: var(--black);
  color: var(--white);
  font-family: var(--sans);
  font-weight: 900;
  font-size: 10px;
  letter-spacing: 0.02em;
  border-radius: 3px;
  flex-shrink: 0;
}
.nav__group-mark--k {
  background: #F27A2A;
  border-radius: 50%;
  font-family: "Fraunces", serif;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: -0.02em;
}

@media (max-width: 860px) {
  .nav__group-link {
    padding: 14px 24px 14px 24px !important;
    border: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--line-2) !important;
    justify-content: flex-start !important;
    background: linear-gradient(90deg, rgba(228,0,43,0.04), transparent) !important;
    font-size: 14px !important;
    letter-spacing: 0.14em !important;
  }
}

/* ---------- スマホ最適化: ヒーロー ---------- */
@media (max-width: 860px) {
  /* 全体的な余白最適化 */
  :root { --pad: 20px; }

  /* HERO */
  .hero__panel { display: none !important; }
  .hero__coord { display: none !important; }
  .hero__ch { top: 76px; right: 12px; font-size: 10px; }
  .hero__grid { display: none; }
  .hero__inner {
    padding: 110px 20px 30px !important;
    display: block !important;
  }
  .hero__meta {
    font-size: 10px;
    letter-spacing: 0.2em;
    gap: 8px;
    margin-bottom: 20px;
  }
  .hero__title {
    font-size: clamp(56px, 18vw, 100px) !important;
    line-height: 0.94 !important;
    margin-bottom: 20px !important;
  }
  .hero__title .jp { font-size: 0.42em !important; }
  .hero__title .jp--big { font-size: 0.9em !important; }
  .hero__sub {
    font-size: 14px !important;
    line-height: 1.8 !important;
    margin-bottom: 26px !important;
  }
  .hero__cta {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 10px !important;
  }
  .hero__cta .btn {
    justify-content: center;
    text-align: center;
    min-height: 48px;
    font-size: 12.5px !important;
    padding: 14px 20px !important;
  }
  .hero__scroll { display: none; }
  .hero__strip {
    font-size: 9px !important;
    padding: 10px 14px !important;
    gap: 8px !important;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
  }
  .hero__strip::-webkit-scrollbar { display: none; }
}

/* ---------- Statement ---------- */
@media (max-width: 860px) {
  .statement { padding: 60px 20px !important; }
  .statement__tiger { opacity: 0.06 !important; }
  .statement__intro {
    display: block !important;
  }
  .statement__side {
    margin-bottom: 20px;
    font-size: 10px !important;
  }
  .statement__brand {
    font-size: clamp(38px, 11vw, 60px) !important;
    line-height: 1.1 !important;
    margin-bottom: 20px !important;
  }
  .statement__lead {
    font-size: 14.5px !important;
    line-height: 1.9 !important;
  }
  .statement__triple {
    display: block !important;
    margin-top: 40px !important;
  }
  .statement__block {
    padding: 26px 22px !important;
    margin-bottom: 12px;
  }
  .statement__block-word {
    font-size: clamp(38px, 11vw, 54px) !important;
  }
  .statement__closer .big {
    font-size: clamp(36px, 11vw, 56px) !important;
  }
}

/* ---------- Origin ---------- */
@media (max-width: 860px) {
  .origin { padding: 60px 20px !important; }
  .origin__inner {
    display: block !important;
  }
  .origin__photo { margin-bottom: 28px; }
  .origin__side { display: none; }
  .origin__title {
    font-size: clamp(30px, 9vw, 44px) !important;
    line-height: 1.2 !important;
  }
  .origin__keywords {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .origin__keywords li {
    font-size: 11px !important;
    padding: 10px 12px !important;
  }
}

/* ---------- Service v2 ---------- */
@media (max-width: 860px) {
  .service-v2 { padding: 60px 20px !important; }
  .service-v2__watermark { font-size: 90px !important; opacity: 0.08; }
  .service-v2__head {
    display: block !important;
  }
  .service-v2__title {
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 1.2 !important;
    margin-bottom: 20px;
  }
  .service-v2__desc { font-size: 13.5px !important; }
  .service-v2__grid {
    display: block !important;
  }
  .service-v2__card {
    padding: 30px 22px !important;
    margin-bottom: 10px;
  }
  .service-v2__card__title {
    font-size: 20px !important;
  }
  .service-v2__card__desc { font-size: 13.5px !important; line-height: 1.85 !important; }
}

/* ---------- Model (循環モデル) — モバイルではリスト表示 ---------- */
@media (max-width: 860px) {
  .model { padding: 60px 20px !important; }
  .model__title { font-size: clamp(26px, 8vw, 40px) !important; }
  .model__lead { font-size: 14px !important; }
  .model__circle {
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    padding: 0 !important;
    margin-top: 30px !important;
  }
  .model__circle > svg,
  .model__circle .model__center,
  .model__circle .model__orbit,
  .model__circle .model__orbit-inner,
  .model__circle .model__pulse,
  .model__circle .model__travelers { display: none !important; }
  .model__node {
    position: static !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 22px 20px 20px 60px !important;
    background: rgba(255,255,255,0.04) !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-left: 3px solid var(--red) !important;
    margin: 0 0 10px 0 !important;
    display: block !important;
    text-align: left !important;
    left: auto !important; top: auto !important;
  }
  .model__node .n {
    position: absolute;
    top: 22px;
    left: 12px;
    font-size: 10px !important;
    color: var(--red) !important;
    font-family: var(--mono);
    font-weight: 700;
    letter-spacing: 0.12em;
    writing-mode: vertical-rl;
    text-orientation: mixed;
    height: 44px;
    line-height: 1;
  }
  .model__node h3 { font-size: 17px !important; margin: 0 0 4px !important; }
  .model__node p { font-size: 13px !important; line-height: 1.75 !important; }
  .model__coda p { font-size: 15px !important; line-height: 1.8; }
  .model__note { font-size: 10px !important; margin-top: 30px !important; }
}

/* ---------- Product (開発中) ---------- */
@media (max-width: 860px) {
  .product { padding: 60px 20px !important; }
  .product__watermark { display: none; }
  .product__head { display: block !important; }
  .product__title {
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 1.2 !important;
    margin-bottom: 16px;
  }
  .product__desc { font-size: 13.5px !important; }
  .product__grid { display: block !important; }
  .product__card {
    margin-bottom: 10px;
  }
  .product__card__body { padding: 26px 20px !important; }
  .product__card__title { font-size: 19px !important; }
  .product__mock { padding: 20px !important; }
  .product__disclaimer { font-size: 10.5px !important; padding: 14px 18px !important; }
}

/* ---------- Future ---------- */
@media (max-width: 860px) {
  .future-v2 { padding: 60px 20px !important; }
  .future-v2__title {
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 1.2 !important;
  }
  .future-v2__lead { font-size: 14px !important; }
  .future-v2__grid {
    display: block !important;
  }
  .future-v2__item {
    padding: 30px 22px !important;
    margin-bottom: 10px;
  }
  .future-v2__item .en-big {
    font-size: clamp(40px, 11vw, 56px) !important;
  }
  .future-v2__item h3 { font-size: 20px !important; margin-bottom: 8px !important; }
  .future-v2__item p { font-size: 13.5px !important; line-height: 1.85 !important; }
  .future-v2__coda { font-size: clamp(30px, 9vw, 44px) !important; }
}

/* ---------- Kumamoto ---------- */
@media (max-width: 860px) {
  .kumamoto { padding: 60px 20px !important; }
  .kumamoto__inner {
    display: block !important;
  }
  .kumamoto__photo {
    aspect-ratio: 4/3 !important;
    margin-bottom: 24px !important;
  }
  .kumamoto__title {
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 1.2 !important;
  }
  .kumamoto__coord { font-size: 10px !important; }
  .kumamoto__map-lines { margin-top: 20px; }
  .kumamoto__map-lines span { font-size: 10px !important; }
}

/* ---------- News ---------- */
@media (max-width: 860px) {
  .news-v2 { padding: 50px 20px !important; }
  .news-v2__title { font-size: clamp(30px, 9vw, 44px) !important; }
  .news-v2__item {
    display: block !important;
    padding: 18px 0 !important;
  }
  .news-v2__item .date { font-size: 10.5px !important; margin-bottom: 4px; }
  .news-v2__item .tag {
    display: inline-block;
    font-size: 10px !important;
    margin: 0 0 6px !important;
  }
  .news-v2__item .head { font-size: 14px !important; line-height: 1.6 !important; }
}

/* ---------- Partner ---------- */
@media (max-width: 860px) {
  .partner-v2 { padding: 60px 20px !important; }
  .partner-v2__inner { display: block !important; }
  .partner-v2__title {
    font-size: clamp(30px, 9vw, 46px) !important;
    line-height: 1.2 !important;
  }
  .partner-v2__body { font-size: 14px !important; }
  .partner-v2__list {
    margin-top: 28px !important;
    columns: 2;
    gap: 8px;
  }
  .partner-v2__list li {
    font-size: 12.5px !important;
    padding: 10px 12px !important;
  }
  .partner-v2__cta { width: 100%; justify-content: center; text-align: center; }
}

/* ---------- Company ---------- */
@media (max-width: 860px) {
  .company-v2 { padding: 60px 20px !important; }
  .company-v2__inner { display: block !important; }
  .company-v2__title-wrap { margin-bottom: 30px; }
  .company-v2__title {
    font-size: clamp(38px, 12vw, 60px) !important;
    line-height: 0.95 !important;
  }
  .company-v2__title-jp { font-size: 12px !important; }
  .company-v2__lead { font-size: 14px !important; }
  .company-v2__row {
    display: block !important;
    padding: 16px 0 !important;
  }
  .company-v2__row dt {
    font-size: 11px !important;
    margin-bottom: 6px !important;
  }
  .company-v2__row dd {
    font-size: 14px !important;
    line-height: 1.75 !important;
  }
  .company-v2__row .v-note { font-size: 11px !important; }
  .company-v2__biz li { font-size: 13.5px !important; }
}

/* ---------- Our Brands ---------- */
@media (max-width: 860px) {
  .our-brands-t { padding: 60px 20px !important; }
  .our-brands-t__head { display: block !important; }
  .our-brands-t__title {
    font-size: clamp(28px, 8vw, 42px) !important;
    line-height: 1.2 !important;
    margin-bottom: 16px;
  }
  .our-brands-t__desc { font-size: 13.5px !important; }
  .our-brands-t__grid { display: block !important; }
  .brand-card-t {
    padding: 28px 22px 26px !important;
    margin-bottom: 12px;
  }
  .brand-card-t__copy { font-size: clamp(28px, 8vw, 40px) !important; }
  .brand-card-t__desc { font-size: 13.5px !important; }
}

/* ---------- CTA row ---------- */
@media (max-width: 860px) {
  .cta-row__grid {
    display: block !important;
  }
  .cta-card {
    padding: 30px 22px !important;
    margin-bottom: 8px;
  }
  .cta-card__title { font-size: clamp(24px, 7vw, 32px) !important; line-height: 1.25 !important; }
  .cta-card__desc { font-size: 13.5px !important; }
}

/* ---------- Footer ---------- */
@media (max-width: 860px) {
  .footer { padding: 60px 20px 40px !important; }
  .footer__inner {
    display: block !important;
  }
  .footer__col { margin-top: 28px; }
  .footer__brand-en { font-size: 24px !important; }
  .footer__tag { font-size: 22px !important; }
  .footer__tag-sub { font-size: 13.5px !important; }
  .footer__col h4 { font-size: 11px !important; margin-bottom: 12px !important; }
  .footer__col li { font-size: 13.5px !important; }
  .footer__bottom {
    display: block !important;
    font-size: 11px !important;
  }
  .footer__bottom > div { margin-bottom: 6px; }
}

/* ---------- タッチ機器 ---------- */
@media (hover: none) and (pointer: coarse) {
  .cursor { display: none !important; }
  /* ボタンのタップ領域 */
  .btn, .nav__cta, .cta-card, .stock__card__more, .brand-card-t {
    min-height: 44px;
  }
}

/* ---------- 極小画面 (~360px) ---------- */
@media (max-width: 380px) {
  .hero__title { font-size: 52px !important; }
  .hero__meta { flex-wrap: wrap; }
  .statement__brand { font-size: 34px !important; }
  .service-v2__card__title,
  .product__card__title,
  .future-v2__item h3 {
    font-size: 18px !important;
  }
}
