/* ==========================================
   TRB KYOTO — ABOUT SECTION
========================================== */

.trbk-about {
  --about-orange: #D96A31;
  --about-moss: #6F7B5B;

  position: relative;
  isolation: isolate;
  min-height: 650px;
  display: flex;
  align-items: center;
  overflow: hidden;
  background: #344D40;
  color: #fff;
}

.trbk-about,
.trbk-about * {
  box-sizing: border-box;
}

/* Background photo */
.trbk-about__background {
  position: absolute;
  inset: 0;
  z-index: -2;

  background-image: url("https://trbbiketour.com/kyoto/wp-content/uploads/2026/10/kyoto-gion-shirakawa-willow.webp");
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
}

/* Color gradient */
.trbk-about__overlay {
  position: absolute;
  inset: 0;
  z-index: -1;

  background: linear-gradient(
    90deg,
    rgba(81, 121, 69, .96) 0%,
    rgba(79, 137, 83, .92) 30%,
    rgba(31, 127, 112, .70) 62%,
    rgba(0, 92, 96, .32) 100%
  );
}

.trbk-about__inner {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  padding: 105px 40px;
}

.trbk-about__content {
  max-width: 570px;
}

.trbk-about__eyebrow {
  display: inline-block;
  margin-bottom: 20px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .19em;
  color: rgba(255,255,255,.86);
}

.trbk-about h2 {
  margin: 0 0 28px;
  padding: 0;
  color: #fff;
  font-size: clamp(48px, 6vw, 86px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.055em;
}

.trbk-about h2 em {
  font-style: normal;
  color: #FFD1A9;
}

.trbk-about__lead {
  margin: 0 0 24px;
  font-size: clamp(21px, 2.3vw, 29px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -.025em;
  color: #fff;
}

.trbk-about__description {
  margin: 0 0 17px;
  color: rgba(255,255,255,.94);
  font-size: 15px;
  line-height: 1.85;
}

.trbk-about__button {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 65px;
  min-width: 275px;
  margin-top: 25px;
  padding: 20px 25px;
  background: #17242C;
  color: #fff !important;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-decoration: none;
  transition: background .25s, transform .25s;
}

.trbk-about__button:hover {
  background: var(--about-orange);
  transform: translateY(-3px);
  color: #fff !important;
}

.trbk-about__button span {
  font-size: 20px;
  line-height: 1;
}

.trbk-about__vertical {
  position: absolute;
  right: 24px;
  top: 50%;
  transform: translateY(-50%);
  writing-mode: vertical-rl;
  font-size: 11px;
  letter-spacing: .22em;
  font-weight: 700;
  color: rgba(255,255,255,.8);
}

/* Tablet */
@media (max-width: 980px) {
  .trbk-about {
    min-height: 600px;
  }

  .trbk-about__inner {
    padding: 90px 35px;
  }

  .trbk-about__overlay {
    background: linear-gradient(
      90deg,
      rgba(65, 112, 72, .96) 0%,
      rgba(43, 116, 96, .88) 60%,
      rgba(15, 96, 95, .55) 100%
    );
  }
}

/* Mobile */
@media (max-width: 767px) {
  .trbk-about {
    min-height: auto;
    align-items: flex-end;
  }

  .trbk-about__background {
    background-position: 62% center;
  }

  .trbk-about__overlay {
    background: linear-gradient(
      180deg,
      rgba(27, 92, 83, .62) 0%,
      rgba(43, 103, 78, .93) 45%,
      rgba(43, 103, 78, .98) 100%
    );
  }

  .trbk-about__inner {
    padding: 100px 24px 75px;
  }

  .trbk-about__content {
    max-width: 100%;
  }

  .trbk-about h2 {
    font-size: 58px;
  }

  .trbk-about__lead {
    font-size: 22px;
  }

  .trbk-about__description {
    font-size: 14px;
    line-height: 1.85;
  }

  .trbk-about__button {
    width: 100%;
    min-width: 0;
  }

  .trbk-about__vertical {
    display: none;
  }
}


/* ==========================================
   TRB KYOTO ABOUT — ORANGE COLOR OVERRIDE
   Orange gradient + Moss Green CTA
========================================== */

/* セクション背景 */
.trbk-about {
  --about-orange: #D96A31;
  --about-moss: #6F7B5B;
  background: #D96A31;
}

/* オレンジ主体のグラデーション */
.trbk-about__overlay {
  background: linear-gradient(
    90deg,
    rgba(217, 106, 49, 0.98) 0%,
    rgba(225, 112, 48, 0.96) 28%,
    rgba(229, 122, 55, 0.86) 48%,
    rgba(221, 120, 62, 0.45) 70%,
    rgba(217, 106, 49, 0.05) 100%
  );
}

/* ABOUT US 見出し */
.trbk-about h2,
.trbk-about__lead {
  color: #FFFFFF;
}

/* 見出しのアクセント */
.trbk-about h2 em {
  color: #344B2C;
}

/* 本文 */
.trbk-about__description,
.trbk-about__eyebrow {
  color: #FFFFFF;
}

/* CTA：モスグリーン */
.trbk-about__button {
  background: #6F7B5B;
  color: #FFFFFF !important;
  border: 1px solid #6F7B5B;
}

/* CTAホバー：深いモスグリーン */
.trbk-about__button:hover {
  background: #4F5D3F;
  border-color: #4F5D3F;
  color: #FFFFFF !important;
  transform: translateY(-3px);
}

/* スマホ用 */
@media (max-width: 767px) {
  .trbk-about__overlay {
    background: linear-gradient(
      180deg,
      rgba(217, 106, 49, 0.45) 0%,
      rgba(217, 106, 49, 0.90) 38%,
      rgba(217, 106, 49, 0.98) 100%
    );
  }
}


/* ==========================================
   TRB KYOTO ABOUT — CYAN & YELLOW
   ========================================== */

.trbk-about {
  --about-cyan: #29B1E1;
  --about-cyan-dark: #087FA8;
  --about-yellow: #FFD400;

  background: var(--about-cyan);
}

/* PC：シアンブルーのグラデーション */
.trbk-about .trbk-about__overlay {
  background: linear-gradient(
    90deg,
    rgba(8, 95, 130, 0.97) 0%,
    rgba(12, 139, 181, 0.94) 28%,
    rgba(41, 177, 225, 0.82) 50%,
    rgba(41, 177, 225, 0.38) 72%,
    rgba(41, 177, 225, 0.05) 100%
  );
}

/* 見出し */
.trbk-about h2,
.trbk-about .trbk-about__lead {
  color: #FFFFFF;
}

/* 見出しアクセント */
.trbk-about h2 em {
  color: var(--about-yellow);
}

/* 本文 */
.trbk-about .trbk-about__description,
.trbk-about .trbk-about__eyebrow {
  color: #FFFFFF;
}

/* CTAボタン */
.trbk-about .trbk-about__button {
  background: var(--about-yellow);
  border: 1px solid var(--about-yellow);
  color: #17242C !important;
  transition:
    background-color .25s ease,
    border-color .25s ease,
    transform .25s ease;
}

/* CTAホバー */
.trbk-about .trbk-about__button:hover {
  background: var(--about-cyan);
  border-color: var(--about-cyan);
  color: #17242C !important;
  transform: translateY(-3px);
}

/* タブレット */
@media (min-width: 768px) and (max-width: 980px) {
  .trbk-about .trbk-about__overlay {
    background: linear-gradient(
      90deg,
      rgba(8, 95, 130, 0.97) 0%,
      rgba(12, 139, 181, 0.90) 60%,
      rgba(41, 177, 225, 0.45) 100%
    );
  }
}

/* スマホ */
@media (max-width: 767px) {
  .trbk-about .trbk-about__overlay {
    background: linear-gradient(
      180deg,
      rgba(8, 95, 130, 0.40) 0%,
      rgba(12, 139, 181, 0.88) 45%,
      rgba(8, 95, 130, 0.97) 100%
    );
  }

  .trbk-about .trbk-about__button {
    width: 100%;
  }
}

/* キーボード操作 */
.trbk-about a:focus-visible {
  outline: 3px solid var(--about-yellow);
  outline-offset: 4px;
}