@charset "UTF-8";

/* Base */
:root {
  --color-page: transparent;
  --color-text: #000;
  --color-blue: #0054d8;
  --color-purple: #7259d2;
  --content-width: 1100px;
  --shadow-box: 0 0 10px rgba(0, 0, 0, 0.15);
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: 16px;
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--color-page);
  color: var(--color-text);
  font-family: -apple-system, BlinkMacSystemFont, "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", YuGothic, Meiryo, sans-serif;
  line-height: 1.7;
}

main {
  padding-top: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

picture {
  display: block;
}

.innerlink {
  height: 0px;
  position: absolute;
  top: -48px;
}

@media (min-width: 940px) {
  .innerlink {
    top: -108px;
  }
}

.common-inner {
  width: min(100% - 32px, var(--content-width));
  margin-inline: auto;
}

@media (min-width: 940px) {
  .common-inner {
    width: min(100% - 64px, var(--content-width));
  }
}

/* Common shadow box */
.common-shadow-box {
  background: #fff;
  box-shadow: var(--shadow-box);
  padding: 20px 16px;
}

.common-shadow-box > :first-child {
  margin-top: 0;
}

.common-shadow-box > :last-child {
  margin-bottom: 0;
}

@media (min-width: 940px) {
  .common-shadow-box {
    padding: 32px 40px;
  }
}

/* Page header */
.page-header {
  width: 100%;
}

.page-header-img {
  width: 100%;
}

@media (min-width: 940px) {
  .page-header-img {
    min-height: 260px;
    object-fit: cover;
    object-position: center;
  }
}

/* Intro section */
.intro-section {
  padding: 32px 0 24px;
}

.intro-banner-img {
  width: 100%;
  margin-inline: auto;
}

.intro-navigation {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  max-width: 600px;
  margin: 32px auto 0;
}

.intro-navigation-link {
  display: block;
  transition: opacity 0.2s ease;
}

.intro-navigation-link:focus-visible {
  outline: 3px solid #fff;
  outline-offset: 3px;
}

@media (min-width: 940px) {
  .intro-section {
    padding: 64px 0 64px;
  }

  .intro-navigation {
    max-width: 850px;
  }

  .intro-navigation {
    gap: 24px;
    margin-top: 64px;
  }

  .intro-navigation-link:hover {
    opacity: 0.8;
  }
}

/* Section title */
.section-title {
  width: 100%;
  margin: 0;
  padding: 7px 16px;
  color: #fff;
  font-size: clamp(20px, 5vw, 32px);
  font-weight: 700;
  line-height: 1.4;
  text-align: center;
}

@media (min-width: 940px) {
  .section-title {
    padding: 12px 32px;
    font-size: 32px;
  }
}

/* Swap pairs section */
.swap-pairs-section .section-title {
  background: linear-gradient(90deg, #3ba8e4, #002a93);
}

.swap-pairs-section {
  padding-bottom: 40px;
  position: relative;
}

.swap-pairs-content {
  width: min(100%, 672px);
  margin: 24px auto 0;
  padding: 20px 16px;
  background: #fff;
}

.swap-pairs-content:has(.common-shadow-box) {
  padding: 0;
  background: transparent;
}

.swap-pairs-heading,
.range-trend-pairs-heading {
  margin: 0 0 16px;
  font-size: clamp(18px, 4.5vw, 28px);
  line-height: 1.5;
  text-align: center;
}

.swap-pairs-heading {
  color: #002d73;
}

.swap-pairs-heading-accent {
  color: #154985;
}

.range-trend-pairs-heading {
  color: #662d91;
}

.common-shadow-box .swap-pairs-heading:not(:first-child) {
  margin-top: 24px;
}

.swap-pairs-text,
.range-trend-pairs-text {
  margin: 12px 0;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
}

.swap-pairs-text-small {
  font-size: 12px;
}

.swap-pairs-subheading {
  margin-top: 32px;
}

.swap-pairs-img {
  width: 100%;
  margin-top: 16px;
}

.swap-pairs-note,
.range-trend-pairs-note {
  margin: 12px 0 0;
  color: #000;
  font-size: 12px;
  line-height: 1.6;
  text-align: center;
}

@media (min-width: 940px) {
  .swap-pairs-section {
    padding-bottom: 160px;
  }

  .swap-pairs-content {
    width: min(100%, 900px);
    margin-top: 40px;
    padding: 32px 40px;
  }

  .swap-pairs-content:has(.common-shadow-box) {
    padding: 0;
  }

  .swap-pairs-heading,
  .range-trend-pairs-heading {
    margin-bottom: 24px;
    font-size: 28px;
  }

  .swap-pairs-text,
  .range-trend-pairs-text {
    margin-block: 16px;
    font-size: 20px;
  }

  .swap-pairs-text-small {
    font-size: 14px;
  }

  .swap-pairs-subheading {
    margin-top: 40px;
  }

  .swap-pairs-img {
    margin-top: 64px;
  }
  .swap-pairs-subheading + picture .swap-pairs-img {
    margin-top: 24px;
  }

  .swap-pairs-note,
  .range-trend-pairs-note {
    margin-top: 16px;
    font-size: 13px;
  }
}

/* Range and trend pairs section */
.range-trend-pairs-section .section-title {
  background: linear-gradient(90deg, #7e84dd, #6851bf);
}

.range-trend-pairs-section {
  padding-bottom: 40px;
  position: relative;
}

.range-trend-pairs-content {
  width: min(100%, 672px);
  margin: 24px auto 0;
  padding: 20px 16px;
  background: #fff;
}

.range-trend-pairs-content:has(.common-shadow-box) {
  padding: 0;
  background: transparent;
}

.range-trend-pairs-images {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0;
  margin-top: 16px;
  margin-left: -1.5vw;
  margin-right: -1.5vw;
}

.range-trend-pairs-images + .common-shadow-box {
  margin-top: 8px;
}

.range-trend-pairs-content > picture + .common-shadow-box {
  margin-top: 24px;
}

.range-trend-pairs-img {
  width: 100%;
  margin-top: 16px;
}

.range-trend-pairs-img-cnh {
  margin-left: -1.5vw;
  margin-right: -1.5vw;
  max-width: calc(100% + 3vw);
  width: auto;
}

.range-trend-pairs-images .range-trend-pairs-img {
  margin-top: 0;
}

.range-trend-pairs-subheading {
  margin: 20px 0 0;
  color: #333;
  font-size: clamp(16px, 4vw, 22px);
  line-height: 1.5;
  text-align: center;
}

.range-trend-pairs-subheading-accent {
  color: #662d91;
}

.common-shadow-box .range-trend-pairs-subheading {
  margin-top: 0;
}

@media (min-width: 940px) {
  .range-trend-pairs-section {
    padding-bottom: 160px;
  }

  .range-trend-pairs-content {
    width: min(100%, 900px);
    margin-top: 40px;
    padding: 32px 40px;
  }

  .range-trend-pairs-content:has(.common-shadow-box) {
    padding: 0;
  }

  .range-trend-pairs-images {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px;
    margin-top: 24px;
    margin-left: -1.5vw;
    margin-right: -1.5vw;
  }

  .range-trend-pairs-images + .common-shadow-box,
  .range-trend-pairs-content > picture + .common-shadow-box {
    margin-top: 32px;
  }

  .range-trend-pairs-img {
    margin-top: 24px;
  }

  .range-trend-pairs-img-cnh {
    margin-left: auto;
    margin-right: auto;
    max-width: 560px;
  }

  .range-trend-pairs-subheading {
    margin-top: 32px;
    font-size: 28px;
  }
}

/* How to start section */
.how-to-start-section .section-title {
  background: linear-gradient(90deg, #3ba8e4, #002a93);
}

.how-to-start-section {
  padding-bottom: 40px;
}

.how-to-start-img {
  width: 100%;
  max-width: 768px;
  margin: 24px auto 0;
}

@media (min-width: 940px) {
  .how-to-start-section {
    padding-bottom: 64px;
  }

  .how-to-start-img {
    margin-top: 40px;
  }
}