/* ========================================================================================= ^^
  Key visual for brand
============================================================================================ ^^ */
.c-key-visual {
  background: url(../images/brand/kv.jpg) no-repeat 50% 100%/cover;
}

/* ========================================================================================= ^^
  Introduction for brand
============================================================================================ ^^ */
#container .p-introduction {
  padding: calc(64 * var(--min-ratio)) calc(10 * var(--min-ratio)) calc(59 * var(--min-ratio));
  background-color: #fff;
  color: #333;
  text-align: center;
}
@media (min-width: 768px) {
  #container .p-introduction {
    padding: calc(128 * var(--max-ratio)) calc(10 * var(--max-ratio)) calc(118 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-introduction {
    padding: calc(128 * var(--rem-ratio)) calc(10 * var(--rem-ratio)) calc(118 * var(--rem-ratio));
  }
}
#container .p-introduction h2:not(.c-title) {
  width: calc(296 * var(--min-ratio));
  margin: 0 auto calc(50 * var(--min-ratio));
}
@media (min-width: 768px) {
  #container .p-introduction h2:not(.c-title) {
    width: calc(296 * var(--max-ratio));
    margin-bottom: calc(50 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-introduction h2:not(.c-title) {
    width: calc(296 * var(--rem-ratio));
    margin-bottom: calc(50 * var(--rem-ratio));
  }
}
#container .p-introduction h2.c-title {
  width: 100%;
  margin: 0 auto calc(27 * var(--min-ratio));
}
@media (min-width: 768px) {
  #container .p-introduction h2.c-title {
    width: calc(561 * var(--max-ratio));
    margin-bottom: calc(27 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-introduction h2.c-title {
    width: calc(561 * var(--rem-ratio));
    margin-bottom: calc(27 * var(--rem-ratio));
  }
}
#container .p-introduction .c-text {
  font-size: clamp(0.875rem, 0.824rem + 0.22vw, 1rem);
  line-height: 2.5;
  letter-spacing: 0.1em;
}
#container .p-introduction .c-image--01 {
  max-width: 1000px;
  width: 100%;
  margin: calc(59 * var(--min-ratio)) auto calc(65 * var(--min-ratio));
}
@media (min-width: 768px) {
  #container .p-introduction .c-image--01 {
    margin: calc(118 * var(--max-ratio)) auto calc(131 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-introduction .c-image--01 {
    margin: calc(118 * var(--rem-ratio)) auto calc(131 * var(--rem-ratio));
  }
}
#container .p-introduction .c-image--02 {
  max-width: 248px;
  width: 100%;
  margin: calc(40 * var(--min-ratio)) auto calc(46 * var(--min-ratio));
}
@media (min-width: 768px) {
  #container .p-introduction .c-image--02 {
    margin: calc(40 * var(--max-ratio)) auto calc(46 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-introduction .c-image--02 {
    margin: calc(40 * var(--rem-ratio)) auto calc(46 * var(--rem-ratio));
  }
}

/* ========================================================================================= ^^
  History
============================================================================================ ^^ */
#container .p-history {
  padding: calc(39 * var(--min-ratio)) calc(10 * var(--min-ratio)) calc(60 * var(--min-ratio));
}
@media (min-width: 768px) {
  #container .p-history {
    padding: calc(77 * var(--max-ratio)) calc(10 * var(--max-ratio)) calc(120 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-history {
    padding: calc(77 * var(--rem-ratio)) calc(10 * var(--rem-ratio)) calc(120 * var(--rem-ratio));
  }
}
#container .p-history .c-title {
  margin-bottom: calc(32 * var(--min-ratio));
  font-family: var(--font-cinzel);
  font-size: clamp(1.75rem, 1.446rem + 1.3vw, 2.5rem);
  color: #333;
  line-height: 1.75;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-align: center;
}
@media (min-width: 768px) {
  #container .p-history .c-title {
    margin-bottom: calc(65 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-history .c-title {
    margin-bottom: calc(65 * var(--rem-ratio));
  }
}
#container .p-history .c-history-scroll {
  width: 100%;
  height: calc(600 * var(--min-ratio));
  background-color: #fff;
  overflow-y: scroll;
  overflow-x: hidden;
}
@media (min-width: 768px) {
  #container .p-history .c-history-scroll {
    height: calc(600 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-history .c-history-scroll {
    height: calc(600 * var(--rem-ratio));
  }
}

/* ========================================================================================= ^^
  Achievement
============================================================================================ ^^ */
#container .p-achievement {
  padding: calc(58 * var(--min-ratio)) calc(10 * var(--min-ratio)) calc(44 * var(--min-ratio));
  background-color: #fff;
  color: #333;
  text-align: center;
}
@media (min-width: 768px) {
  #container .p-achievement {
    padding: calc(116 * var(--max-ratio)) calc(10 * var(--max-ratio)) calc(87 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-achievement {
    padding: calc(116 * var(--rem-ratio)) calc(10 * var(--rem-ratio)) calc(87 * var(--rem-ratio));
  }
}
#container .p-achievement .c-title {
  margin-bottom: calc(31 * var(--min-ratio));
  font-family: var(--font-shippori);
  font-size: clamp(1.25rem, 1.047rem + 0.86vw, 1.75rem);
  color: #333;
  line-height: 1.7857142857;
  font-weight: 500;
  letter-spacing: 0.08em;
}
@media (min-width: 768px) {
  #container .p-achievement .c-title {
    margin-bottom: calc(31 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-achievement .c-title {
    margin-bottom: calc(31 * var(--rem-ratio));
  }
}
#container .p-achievement .c-title sub {
  font-size: clamp(0.75rem, 0.75rem + 0vw, 0.75rem);
}
#container .p-achievement .c-text {
  margin-bottom: calc(47 * var(--min-ratio));
  font-size: clamp(0.875rem, 0.824rem + 0.22vw, 1rem);
  color: #333;
  line-height: 2.5;
  letter-spacing: 0.08em;
}
@media (min-width: 768px) {
  #container .p-achievement .c-text {
    margin-bottom: calc(94 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-achievement .c-text {
    margin-bottom: calc(94 * var(--rem-ratio));
  }
}
#container .p-achievement .c-image {
  max-width: 700px;
  width: 100%;
  margin: 0 auto calc(47 * var(--min-ratio));
}
@media (min-width: 768px) {
  #container .p-achievement .c-image {
    margin-bottom: calc(47 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-achievement .c-image {
    margin-bottom: calc(47 * var(--rem-ratio));
  }
}
#container .p-achievement .c-image + p {
  margin-bottom: calc(55 * var(--min-ratio));
  font-size: clamp(0.75rem, 0.75rem + 0vw, 0.75rem);
  color: #333;
  line-height: 2;
  letter-spacing: 0.06em;
  text-align: left;
}
@media (min-width: 768px) {
  #container .p-achievement .c-image + p {
    margin-bottom: calc(110 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-achievement .c-image + p {
    margin-bottom: calc(110 * var(--rem-ratio));
  }
}
#container .p-achievement .c-grid {
  row-gap: calc(35 * var(--min-ratio));
}
@media (min-width: 768px) {
  #container .p-achievement .c-grid {
    grid-template-columns: repeat(2, 1fr);
    -moz-column-gap: 3.5714285714%;
    column-gap: 3.5714285714%;
    row-gap: calc(35 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-achievement .c-grid {
    row-gap: calc(35 * var(--rem-ratio));
  }
}
#container .p-achievement .c-grid .c-image {
  margin-bottom: 0;
}
#container .p-achievement .c-grid .c-image figcaption {
  padding-top: calc(10 * var(--min-ratio));
  font-size: clamp(0.625rem, 0.524rem + 0.43vw, 0.875rem);
  color: #333;
  line-height: 1.7142857143;
  letter-spacing: 0.04em;
  text-align: left;
}
@media (min-width: 768px) {
  #container .p-achievement .c-grid .c-image figcaption {
    padding-top: calc(10 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-achievement .c-grid .c-image figcaption {
    padding-top: calc(10 * var(--rem-ratio));
  }
}

/* ========================================================================================= ^^
  After support
============================================================================================ ^^ */
#container .p-after-support {
  padding-top: calc(35 * var(--min-ratio));
  background-color: #fff;
  color: #333;
  text-align: center;
}
@media (min-width: 768px) {
  #container .p-after-support {
    padding-top: calc(70 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-after-support {
    padding-top: calc(70 * var(--rem-ratio));
  }
}
#container .p-after-support .c-title {
  margin-bottom: calc(31 * var(--min-ratio));
  font-family: var(--font-shippori);
  font-size: clamp(1.75rem, 1.446rem + 1.3vw, 2.5rem);
  line-height: 1.75;
  font-weight: 400;
  letter-spacing: 0.1em;
}
@media (min-width: 768px) {
  #container .p-after-support .c-title {
    margin-bottom: calc(31 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-after-support .c-title {
    margin-bottom: calc(31 * var(--rem-ratio));
  }
}
#container .p-after-support .c-title sub {
  font-size: clamp(0.75rem, 0.75rem + 0vw, 0.75rem);
}
#container .p-after-support .l-section__inner > .c-grid {
  max-width: 750px;
  width: 90%;
  margin: 0 auto calc(33 * var(--min-ratio));
  grid-template-columns: 1fr 21.3333333333%;
  align-items: center;
  -moz-column-gap: 4%;
  column-gap: 4%;
}
@media (min-width: 768px) {
  #container .p-after-support .l-section__inner > .c-grid {
    width: 100%;
    margin: 0 auto calc(66 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-after-support .l-section__inner > .c-grid {
    margin: 0 auto calc(66 * var(--rem-ratio));
  }
}
#container .p-after-support .c-text {
  margin: 0;
  font-family: var(--font-shippori);
  font-size: clamp(1.25rem, 1.047rem + 0.86vw, 1.75rem);
  color: #333;
  line-height: 1.75;
  letter-spacing: 0.1em;
  text-align: left;
}
#container .p-after-support .c-image {
  margin: 0;
}

/* ========================================================================================= ^^
  After service
============================================================================================ ^^ */
#container .p-after-service {
  margin-bottom: calc(30 * var(--min-ratio));
}
@media (min-width: 768px) {
  #container .p-after-service {
    margin-bottom: calc(60 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-after-service {
    margin-bottom: calc(60 * var(--rem-ratio));
  }
}
#container .p-after-service .c-service-section__text p + ul {
  margin-top: calc(27 * var(--min-ratio));
}
@media (min-width: 768px) {
  #container .p-after-service .c-service-section__text p + ul {
    margin-top: calc(27 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-after-service .c-service-section__text p + ul {
    margin-top: calc(27 * var(--rem-ratio));
  }
}

/* ========================================================================================= ^^
  D's
============================================================================================ ^^ */
#container .p-ds {
  margin-bottom: calc(35 * var(--min-ratio));
}
@media (min-width: 768px) {
  #container .p-ds {
    margin-bottom: calc(71 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-ds {
    margin-bottom: calc(71 * var(--rem-ratio));
  }
}
#container .p-ds .c-service-section__image {
  max-width: 950px;
  width: 100%;
  margin: calc(30 * var(--min-ratio)) auto calc(35 * var(--min-ratio));
}
@media (min-width: 768px) {
  #container .p-ds .c-service-section__image {
    margin: calc(30 * var(--max-ratio)) auto calc(35 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-ds .c-service-section__image {
    margin: calc(30 * var(--rem-ratio)) auto calc(35 * var(--rem-ratio));
  }
}
#container .p-ds .c-equipment-example {
  margin: calc(53 * var(--min-ratio)) auto calc(2 * var(--min-ratio));
}
@media (min-width: 768px) {
  #container .p-ds .c-equipment-example {
    margin: calc(53 * var(--max-ratio)) auto calc(2 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-ds .c-equipment-example {
    margin: calc(53 * var(--rem-ratio)) auto calc(2 * var(--rem-ratio));
  }
}

/* ========================================================================================= ^^
  D's Bridge
============================================================================================ ^^ */
#container .p-ds-bridge .c-service-section__image--01 {
  max-width: 750px;
  width: 100%;
  margin: calc(47 * var(--min-ratio)) auto calc(35 * var(--min-ratio));
}
@media (min-width: 768px) {
  #container .p-ds-bridge .c-service-section__image--01 {
    margin: calc(47 * var(--max-ratio)) auto calc(71 * var(--max-ratio));
  }
}
@media (min-width: 1300px) {
  #container .p-ds-bridge .c-service-section__image--01 {
    margin: calc(47 * var(--rem-ratio)) auto calc(71 * var(--rem-ratio));
  }
}
#container .p-ds-bridge .c-service-section__image--02 {
  margin: calc(30 * var(--min-ratio)) auto;
}
@media (min-width: 768px) {
  #container .p-ds-bridge .c-service-section__image--02 {
    margin: calc(30 * var(--max-ratio)) auto;
  }
}
@media (min-width: 1300px) {
  #container .p-ds-bridge .c-service-section__image--02 {
    margin: calc(30 * var(--rem-ratio)) auto;
  }
}

/* ========================================================================================= ^^
  Brand
============================================================================================ ^^ */