/* ============================================
   Asymmetric-Style Asymmetric Layout
   左側グレー余白 + 白コンテンツカード
   ============================================ */

/* CSS Variables for Asymmetric Style */
:root {
  --asymmetric-bg: #f5f5f5;
  --asymmetric-card-bg: #ffffff;
  --asymmetric-left-margin: 15%;
  --asymmetric-card-padding: 60px 80px;
  --asymmetric-section-gap: 32px;
}

/* ============================================
   Global Image Auto-Cropping
   異なるアスペクト比の画像も自動トリミング
   ============================================ */

.hub-hero__image img,
.hub-company__image img,
.terminal-gallery__item img,
.terminal-section img,
.hub-section img,
[class*="__image"] img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* アスペクト比が指定されたコンテナ */
[data-aspect="16:7"] {
  aspect-ratio: 16/7;
}

[data-aspect="4:3"] {
  aspect-ratio: 4/3;
}

[data-aspect="3:4"] {
  aspect-ratio: 3/4;
}

[data-aspect="16:9"] {
  aspect-ratio: 16/9;
}

/* ============================================
   Main Layout - Asymmetric Gray Background
   ============================================ */

/* Override page-content for Asymmetric style */
.page-content--asymmetric {
  background: var(--asymmetric-bg);
  padding: 80px 0 120px;
  position: relative;
}

/* Asymmetric container - content shifted right */
.page-content--asymmetric .page-content__inner {
  max-width: none;
  padding: 0 5% 0 var(--asymmetric-left-margin);
}

/* ============================================
   Content Cards - White Background
   ============================================ */

.asymmetric-card {
  background: var(--asymmetric-card-bg);
  border-radius: 0;
  padding: var(--asymmetric-card-padding);
  margin-bottom: var(--asymmetric-section-gap);
  box-shadow: none;
  max-width: 900px;
}

.asymmetric-card:last-child {
  margin-bottom: 0;
}

/* Card header styling */
.asymmetric-card__header {
  margin-bottom: 48px;
}

.asymmetric-card__label {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--color-text-light);
  margin-bottom: 16px;
  display: block;
}

.asymmetric-card__title {
  font-size: 28px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--color-text);
}

/* ============================================
   Definition List Style (Asymmetric Data Table)
   ============================================ */

.asymmetric-dl {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.asymmetric-dl__row {
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 40px;
  padding: 24px 0;
  border-bottom: 1px solid #eee;
}

.asymmetric-dl__row:first-child {
  padding-top: 0;
}

.asymmetric-dl__row:last-child {
  border-bottom: none;
}

.asymmetric-dl__label {
  font-size: 14px;
  font-weight: 500;
  color: var(--color-text);
  letter-spacing: 0.05em;
}

.asymmetric-dl__value {
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-text);
}

.asymmetric-dl__value small {
  display: block;
  font-size: 13px;
  color: var(--color-text-light);
  margin-top: 4px;
}

/* ============================================
   Section Variations
   ============================================ */

/* Mission / Vision Card - Large Text */
.asymmetric-card--mission {
  padding: 80px;
}

.asymmetric-card--mission .asymmetric-card__title {
  font-size: 24px;
  font-weight: 700;
  line-height: 1.8;
  margin-bottom: 24px;
}

.asymmetric-card--mission .asymmetric-card__text {
  font-size: 15px;
  line-height: 2;
  color: var(--color-text-light);
}

/* Nested cards for grouped content */
.asymmetric-card--nested {
  background: var(--asymmetric-bg);
  margin: 32px 0;
  padding: 40px;
}

.asymmetric-card--nested:last-child {
  margin-bottom: 0;
}

/* ============================================
   Page Hero - Asymmetric Style
   ============================================ */

.page-hero--asymmetric {
  height: auto;
  min-height: 280px;
  background: var(--color-white);
  display: flex;
  align-items: flex-end;
  padding: 60px 0 40px var(--asymmetric-left-margin);
}

.page-hero--asymmetric .page-hero__bg {
  display: none;
}

.page-hero--asymmetric .page-hero__content {
  position: relative;
  transform: none;
  text-align: left;
  color: var(--color-text);
}

.page-hero--asymmetric .page-hero__label {
  font-size: 11px;
  letter-spacing: 0.15em;
  color: var(--color-text-light);
  margin-bottom: 8px;
}

.page-hero--asymmetric .page-hero__title {
  font-size: 56px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--color-text);
}

.page-hero--asymmetric .page-hero__subtitle {
  font-size: 13px;
  color: var(--color-text-light);
  margin-top: 8px;
}

/* ============================================
   Breadcrumb - Asymmetric Style
   ============================================ */

.breadcrumb--asymmetric {
  background: var(--color-white);
  padding: 16px 0 16px var(--asymmetric-left-margin);
  border-bottom: 1px solid #eee;
}

/* ============================================
   Access / Location Section
   ============================================ */

.asymmetric-access {
  margin-top: 48px;
}

.asymmetric-access__title {
  font-family: var(--font-en);
  font-size: 32px;
  font-weight: 900;
  letter-spacing: 0.02em;
  margin-bottom: 40px;
  color: var(--color-text);
}

.asymmetric-access__item {
  display: grid;
  grid-template-columns: 140px 1fr auto;
  gap: 32px;
  align-items: start;
  padding: 32px 0;
  border-top: 1px solid #eee;
}

.asymmetric-access__label {
  font-size: 14px;
  font-weight: 500;
}

.asymmetric-access__info {
  font-size: 15px;
  line-height: 1.6;
}

.asymmetric-access__info small {
  display: block;
  font-size: 13px;
  color: var(--color-text-light);
  margin-top: 4px;
}

.asymmetric-access__link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1px solid var(--color-border);
  border-radius: 4px;
  font-size: 13px;
  font-weight: 500;
  color: var(--color-text);
  transition: all 0.3s ease;
}

.asymmetric-access__link:hover {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
}

.asymmetric-access__link::after {
  content: '→';
}

/* ============================================
   Footer Contents Navigation
   ============================================ */

.asymmetric-contents {
  background: #1a1a1a;
  padding: 60px 0 60px var(--asymmetric-left-margin);
  color: #fff;
}

.asymmetric-contents__title {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  margin-bottom: 32px;
  color: rgba(255,255,255,0.6);
}

.asymmetric-contents__list {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 48px;
}

.asymmetric-contents__item {
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  transition: color 0.3s ease;
}

.asymmetric-contents__item:hover {
  color: #fff;
}

/* ============================================
   Responsive Design
   ============================================ */

@media (max-width: 1200px) {
  :root {
    --asymmetric-left-margin: 10%;
    --asymmetric-card-padding: 48px 60px;
  }
}

@media (max-width: 1024px) {
  :root {
    --asymmetric-left-margin: 5%;
    --asymmetric-card-padding: 40px 48px;
  }

  .page-hero--asymmetric {
    padding-left: 5%;
  }

  .breadcrumb--asymmetric {
    padding-left: 5%;
  }

  .asymmetric-contents {
    padding-left: 5%;
  }

  .asymmetric-access__item {
    grid-template-columns: 120px 1fr;
  }

  .asymmetric-access__link {
    grid-column: 2;
    justify-self: start;
    margin-top: 16px;
  }
}

@media (max-width: 768px) {
  :root {
    --asymmetric-left-margin: 20px;
    --asymmetric-card-padding: 32px 24px;
  }

  .page-content--asymmetric .page-content__inner {
    padding: 0 20px;
  }

  .page-hero--asymmetric {
    padding: 40px 20px 32px;
    min-height: 200px;
  }

  .page-hero--asymmetric .page-hero__title {
    font-size: 36px;
  }

  .breadcrumb--asymmetric {
    padding: 12px 20px;
  }

  .asymmetric-card--mission {
    padding: 40px 24px;
  }

  .asymmetric-card--mission .asymmetric-card__title {
    font-size: 20px;
  }

  .asymmetric-dl__row {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 20px 0;
  }

  .asymmetric-dl__label {
    font-size: 13px;
    color: var(--color-text-light);
  }

  .asymmetric-access__title {
    font-size: 24px;
    margin-bottom: 24px;
  }

  .asymmetric-access__item {
    grid-template-columns: 1fr;
    gap: 8px;
    padding: 24px 0;
  }

  .asymmetric-access__link {
    margin-top: 12px;
  }

  .asymmetric-contents {
    padding: 40px 20px;
  }

  .asymmetric-contents__list {
    flex-direction: column;
    gap: 12px;
  }
}

/* ============================================
   CTA Section - Asymmetric Style Override
   ============================================ */

.page-content--asymmetric + .cta-section {
  background: var(--color-white);
  border-top: 1px solid #eee;
}

.page-content--asymmetric + .cta-section .cta-section__inner {
  max-width: none;
  padding-left: var(--asymmetric-left-margin);
  text-align: left;
}

.page-content--asymmetric + .cta-section .cta-section__lead {
  color: var(--color-text);
}

.page-content--asymmetric + .cta-section .cta-section__btn {
  background: var(--color-text);
  color: #fff;
}

@media (max-width: 768px) {
  .page-content--asymmetric + .cta-section .cta-section__inner {
    padding-left: 20px;
    padding-right: 20px;
  }
}

/* ============================================
   ============================================
   PATTERN A: Hub Page Style (Right Margin)
   IR情報スタイル - メニューページ用
   ============================================
   ============================================ */

:root {
  --hub-right-margin: 15%;
  --hub-bg: #f5f5f5;
}

/* ============================================
   Hub Page Layout
   ============================================ */

.page-content--hub {
  background: var(--color-white);
  padding: 0 0 80px;
}

.page-content--hub .page-content__inner {
  max-width: none;
  padding: 0;
}

/* ============================================
   Hub Hero with Image
   ============================================ */

.hub-hero {
  position: relative;
  margin-bottom: 0;
  margin-left: 120px;
  background: var(--hub-bg);
  padding: 60px 60px 60px 60px;
  overflow: visible;
}

.hub-hero__image {
  width: calc(100% + 120px + 60px);
  margin-left: calc(-120px - 60px);
  aspect-ratio: 16/7;
  overflow: hidden;
}

.hub-hero__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================
   Hub Section with Gray Background (Left White Margin)
   ============================================ */

.hub-section {
  position: relative;
  padding: 48px 0;
  background: var(--hub-bg);
  margin-left: 120px;
}

.hub-section__inner {
  position: relative;
  z-index: 1;
  padding: 0 60px 0 60px;
  max-width: 900px;
  margin: 0 auto;
}

.hub-section__header {
  margin-bottom: 32px;
}

.hub-section__label {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--color-text-light);
  margin-bottom: 8px;
  display: block;
}

.hub-section__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
}

/* ============================================
   Hub Navigation Links (Arrow Style)
   ============================================ */

.hub-nav {
  display: flex;
  flex-direction: column;
}

.hub-nav__item {
  display: flex;
  align-items: center;
  padding: 28px 0;
  border-bottom: 1px solid #eee;
  transition: all 0.3s ease;
}

.hub-nav__item:first-child {
  border-top: 1px solid #eee;
}

.hub-nav__item:hover {
  padding-left: 16px;
}

.hub-nav__arrow {
  font-family: var(--font-en);
  font-size: 20px;
  margin-right: 24px;
  color: var(--color-text);
  transition: transform 0.3s ease;
}

.hub-nav__item:hover .hub-nav__arrow {
  transform: translateX(8px);
}

.hub-nav__content {
  flex: 1;
}

.hub-nav__title {
  font-size: 18px;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 4px;
}

.hub-nav__subtitle {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-text-light);
}

/* Hub nav with gray background card */
.hub-nav__item--card {
  background: var(--hub-bg);
  padding: 24px 32px;
  margin: 8px 0;
  border: none;
  border-radius: 0;
}

.hub-nav__item--card:first-child {
  border-top: none;
}

.hub-nav__item--card:hover {
  padding-left: 40px;
  background: #ebebeb;
}

/* ============================================
   Hub News/Info List
   ============================================ */

.hub-list {
  display: flex;
  flex-direction: column;
}

.hub-list__item {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid #eee;
  align-items: baseline;
}

.hub-list__item:last-child {
  border-bottom: none;
}

.hub-list__date {
  font-family: var(--font-en);
  font-size: 13px;
  color: var(--color-text-light);
}

.hub-list__tag {
  display: inline-block;
  padding: 2px 8px;
  background: var(--hub-bg);
  font-size: 11px;
  margin-left: 12px;
}

.hub-list__title {
  font-size: 15px;
  color: var(--color-text);
  transition: color 0.3s ease;
}

.hub-list__item:hover .hub-list__title {
  color: var(--color-primary);
}

.hub-list__more {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 24px;
  border: 1px solid var(--color-border);
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: var(--color-text);
  margin-top: 24px;
  transition: all 0.3s ease;
  align-self: flex-end;
}

.hub-list__more:hover {
  background: var(--color-text);
  color: #fff;
  border-color: var(--color-text);
}

.hub-list__more::after {
  content: '→';
}

/* ============================================
   Hub Page Hero - Simple Style
   ============================================ */

.page-hero--hub {
  height: auto;
  min-height: auto;
  background: var(--color-white);
  padding: 100px 80px 32px 120px;
  position: relative;
  justify-content: flex-start;
  align-items: flex-end;
}

.page-hero--hub .page-hero__bg {
  display: none;
}

.page-hero--hub .page-hero__content {
  position: relative;
  transform: none;
  text-align: left;
  color: var(--color-text);
}

.page-hero--hub .page-hero__title {
  font-family: var(--font-en-heading);
  font-size: 120px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--color-text);
  text-shadow: none;
  line-height: 1;
}

.page-hero--hub .page-hero__subtitle {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-top: 16px;
  letter-spacing: 0.08em;
}

/* ============================================
   Hub Breadcrumb
   ============================================ */

.breadcrumb--hub {
  background: var(--color-white);
  padding: 16px 80px 16px 120px;
  border-bottom: 1px solid #eee;
}

/* ============================================
   Hub Footer Contents
   ============================================ */

.hub-contents {
  background: #1a1a1a;
  padding: 60px 60px 60px 120px;
  color: #fff;
}

.hub-contents__title {
  font-family: var(--font-en);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  margin-bottom: 24px;
  color: rgba(255,255,255,0.5);
}

.hub-contents__list {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 40px;
}

.hub-contents__item {
  font-size: 13px;
  color: rgba(255,255,255,0.7);
  transition: color 0.3s ease;
}

.hub-contents__item:hover {
  color: #fff;
}

/* ============================================
   Hub Responsive
   ============================================ */

@media (max-width: 1200px) {
  .hub-hero {
    margin-left: 80px;
    padding: 48px;
  }

  .hub-hero__image {
    width: calc(100% + 80px + 48px);
    margin-left: calc(-80px - 48px);
  }

  .hub-section {
    margin-left: 80px;
  }

  .hub-section__inner {
    padding: 0 48px;
  }

  .page-hero--hub {
    padding: 100px 60px 32px 80px;
  }

  .page-hero--hub .page-hero__title {
    font-size: 100px;
  }

  .page-hero--hub .page-hero__subtitle {
    font-size: 22px;
  }

  .breadcrumb--hub {
    padding: 16px 60px 16px 80px;
  }

  .hub-contents {
    padding: 60px 60px 60px 80px;
  }
}

@media (max-width: 1024px) {
  .hub-hero {
    margin-left: 40px;
    padding: 40px;
  }

  .hub-hero__image {
    width: calc(100% + 40px + 40px);
    margin-left: calc(-40px - 40px);
  }

  .hub-section {
    margin-left: 40px;
  }

  .hub-section__inner {
    padding: 0 40px;
  }

  .page-hero--hub {
    padding: 100px 40px 32px 40px;
  }

  .page-hero--hub .page-hero__title {
    font-size: 80px;
  }

  .page-hero--hub .page-hero__subtitle {
    font-size: 20px;
  }

  .breadcrumb--hub {
    padding: 16px 40px;
  }

  .hub-contents {
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
    padding: 48px 40px;
  }

  .hub-contents__list {
    flex-direction: column;
    gap: 10px;
  }
}

@media (max-width: 768px) {
  .hub-hero {
    margin-left: 20px;
    padding: 24px 20px;
  }

  .hub-hero__image {
    width: calc(100% + 20px + 20px);
    margin-left: calc(-20px - 20px);
  }

  .hub-section {
    margin-left: 20px;
  }

  .hub-section__inner {
    padding: 0 20px;
  }

  .page-hero--hub {
    padding: 100px 20px 24px 20px;
  }

  .page-hero--hub .page-hero__title {
    font-size: 56px;
  }

  .page-hero--hub .page-hero__subtitle {
    font-size: 18px;
  }

  .breadcrumb--hub {
    padding: 12px 20px;
  }

  .hub-nav__item {
    padding: 20px 0;
  }

  .hub-nav__arrow {
    font-size: 16px;
    margin-right: 16px;
  }

  .hub-nav__title {
    font-size: 16px;
  }

  .hub-nav__item--card {
    padding: 20px 24px;
  }

  .hub-list__item {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .hub-list__date {
    font-size: 12px;
  }

  .hub-contents {
    max-width: 100%;
    margin-left: auto;
    margin-right: auto;
    padding: 40px 20px;
  }

  .hub-contents__list {
    flex-direction: column;
    gap: 10px;
  }
}

/* ============================================
   ============================================
   PATTERN B: Terminal Page Style
   末端ページ用 - 左マージン付き灰色背景
   ============================================
   ============================================ */

/* Terminal page layout (with left white margin) */
.page-content--terminal {
  background: var(--color-white);
  padding: 0 0 80px;
}

.page-content--terminal .page-content__inner {
  max-width: none;
  padding: 0;
}

/* Terminal Hero - Simple Title Style */
.page-hero--terminal {
  height: auto;
  min-height: auto;
  background: var(--color-white);
  padding: 100px 80px 32px 120px;
  position: relative;
  justify-content: flex-start;
  align-items: flex-end;
}

.page-hero--terminal .page-hero__bg {
  display: none;
}

.page-hero--terminal .page-hero__content {
  position: relative;
  transform: none;
  text-align: left;
  color: var(--color-text);
}

.page-hero--terminal .page-hero__title {
  font-family: var(--font-en-heading);
  font-size: 120px;
  font-weight: 900;
  letter-spacing: -0.02em;
  color: var(--color-text);
  text-shadow: none;
  line-height: 1;
}

.page-hero--terminal .page-hero__subtitle {
  font-size: 24px;
  font-weight: 600;
  color: #333;
  margin-top: 16px;
  letter-spacing: 0.08em;
}

/* Terminal Section (Left White Margin) */
.terminal-section {
  position: relative;
  padding: 48px 0;
  background: var(--hub-bg);
  margin-left: 120px;
}

.terminal-section__inner {
  position: relative;
  z-index: 1;
  padding: 0 60px;
  max-width: 800px;
  margin: 0 auto;
}

/* ============================================
   CSR Variant: Full-Width Gray Background
   (No left white margin)
   ============================================ */

.terminal-section--fullwidth {
  margin-left: 0;
  padding-left: 120px;
}

.terminal-section--fullwidth .terminal-section__inner {
  padding: 0 60px 0 0;
}

/* ============================================
   Terminal Section Header
   ============================================ */

.terminal-section__header {
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 2px solid var(--color-text);
}

.terminal-section__label {
  font-family: var(--font-en);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.15em;
  color: var(--color-text-light);
  margin-bottom: 8px;
  display: block;
}

.terminal-section__title {
  font-size: 24px;
  font-weight: 700;
  color: var(--color-text);
}

/* ============================================
   Terminal Content Styles
   ============================================ */

.terminal-text {
  font-size: 15px;
  line-height: 2;
  color: var(--color-text);
}

.terminal-text p {
  margin-bottom: 24px;
}

.terminal-text p:last-child {
  margin-bottom: 0;
}

.terminal-highlight {
  background: var(--color-white);
  padding: 40px;
  margin: 32px 0;
  border-left: 4px solid var(--color-text);
}

.terminal-highlight__title {
  font-size: 18px;
  font-weight: 700;
  margin-bottom: 16px;
}

.terminal-highlight__text {
  font-size: 15px;
  line-height: 1.8;
  color: #555;
}

/* ============================================
   Terminal Image Gallery
   ============================================ */

.terminal-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
  margin: 32px 0;
}

.terminal-gallery__item {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: #ddd;
}

.terminal-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.terminal-gallery__caption {
  font-size: 13px;
  color: var(--color-text-light);
  margin-top: 8px;
}

/* ============================================
   Terminal Breadcrumb
   ============================================ */

.breadcrumb--terminal {
  background: var(--color-white);
  padding: 16px 80px 16px 120px;
  border-bottom: 1px solid #eee;
}

/* ============================================
   Terminal Responsive
   ============================================ */

@media (max-width: 1200px) {
  .page-hero--terminal {
    padding: 100px 60px 32px 80px;
  }

  .page-hero--terminal .page-hero__title {
    font-size: 100px;
  }

  .page-hero--terminal .page-hero__subtitle {
    font-size: 22px;
  }

  .terminal-section {
    margin-left: 80px;
  }

  .terminal-section__inner {
    padding: 0 48px;
  }

  .terminal-section--fullwidth {
    margin-left: 0;
    padding-left: 80px;
  }

  .breadcrumb--terminal {
    padding: 16px 60px 16px 80px;
  }
}

@media (max-width: 1024px) {
  /* Terminal ページをタブレット用中央配置レイアウトに変更 */
  .page-content--terminal {
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
  }

  .page-hero--terminal {
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
    padding: 100px 40px 32px 40px;
  }

  .page-hero--terminal .page-hero__title {
    font-size: 80px;
  }

  .page-hero--terminal .page-hero__subtitle {
    font-size: 20px;
  }

  .terminal-section {
    margin-left: 0;
  }

  .terminal-section__inner {
    padding: 0 40px;
  }

  .terminal-section--fullwidth {
    margin-left: 0;
    padding-left: 40px;
    padding-right: 40px;
  }

  .breadcrumb--terminal {
    max-width: 540px;
    margin-left: auto;
    margin-right: auto;
    padding: 16px 40px;
  }

  .terminal-gallery {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  /* Terminal ページをモバイル用フル幅に */
  .page-content--terminal {
    max-width: 100%;
  }

  .page-hero--terminal {
    max-width: 100%;
    padding: 100px 20px 24px 20px;
  }

  .page-hero--terminal .page-hero__title {
    font-size: 56px;
  }

  .page-hero--terminal .page-hero__subtitle {
    font-size: 18px;
  }

  .terminal-section {
    margin-left: 0;
  }

  .terminal-section__inner {
    padding: 0 20px;
  }

  .terminal-section--fullwidth {
    margin-left: 0;
    padding-left: 20px;
    padding-right: 20px;
  }

  .breadcrumb--terminal {
    max-width: 100%;
    padding: 12px 20px;
  }

  .terminal-highlight {
    padding: 24px;
    margin: 24px 0;
  }
}