@charset "UTF-8";

/* --------------------------------------------------------------------------
  下層
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
  .page-hero {
    --hero-bg-color: var(--c-main-500);
    position: relative;
    overflow: hidden;
    background: url('/road/bicycleuse/good-cycle-japan/assets/img/common/hero_bg_icon.png') 97% -40% no-repeat;
    background-size: calc(300 / var(--fs) * 1rem) calc(183 / var(--fs) * 1rem);
  }
  .page-hero::before {
    content: '';
    display: block;
    width: calc(2077 / var(--fs) * 1rem);
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: radial-gradient(circle, var(--c-white) calc(1.75 / var(--fs) * 1rem), transparent calc(1.75 / var(--fs) * 1rem));
    background-position: 0 0;
    background-size: calc(15 / var(--fs) * 1rem) calc(15 / var(--fs) * 1rem);
    opacity: 0.08;
  }
  .page-hero::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: var(--hero-bg-color);
  }
  .page-hero__in {
    max-width: calc(1140 / var(--fs) * 1rem);
    margin: auto;
    padding: 0 calc(20 / var(--fs) * 1rem);

    display: block;
  }
  .page-hero__header {
    padding: calc(38 / var(--fs) * 1rem) 0;
  }
  .page-hero__header-title {
    display: flex;
    align-items: center;
    gap: calc(20 / var(--fs) * 1rem);
  }
  .page-hero__header-title__label {
    color: var(--c-white);
    font-size: calc(40 / var(--fs) * 1rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: calc(2.4 / 40 * 1rem);
  }
  .page-hero__header-title__subtitle {
    flex-shrink: 0;
    margin-top: calc(4 / var(--fs) * 1rem);
    padding-block: calc(6 / var(--fs) * 1rem) calc(8 / var(--fs) * 1rem);
    padding-inline: calc(10 / var(--fs) * 1rem) calc(8 / var(--fs) * 1rem);
    border: calc(1 / var(--fs) * 1rem) solid var(--c-white);
    font-size: calc(20 / var(--fs) * 1rem);
    font-weight: 800;
    color: var(--c-white);
    line-height: 1.1;
    letter-spacing: 0.06em;
  }
}

@media all and (max-width: 767px) {
  .page-hero {
    --hero-bg-color: var(--c-main-500);
    position: relative;
    overflow: hidden;
    background: url('/road/bicycleuse/good-cycle-japan/assets/img/common/hero_bg_icon.png') 94% -24% no-repeat;
    background-size: calc(200 / var(--fs) * 1rem) calc(122.25 / var(--fs) * 1rem);
  }
  .page-hero::before {
    content: '';
    display: block;
    width: calc(2077 / var(--fs) * 1rem);
    height: 100%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    position: absolute;
    content: "";
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background-image: radial-gradient(circle, var(--c-white) calc(1.75 / var(--fs) * 1rem), transparent calc(1.75 / var(--fs) * 1rem));
    background-position: 0 0;
    background-size: calc(15 / var(--fs) * 1rem) calc(15 / var(--fs) * 1rem);
    opacity: 0.08;
  }
  .page-hero::after {
    content: '';
    display: block;
    width: 100%;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    background-color: var(--hero-bg-color);
  }
  .page-hero__in {
    max-width: calc(1140 / var(--fs) * 1rem);
    margin: auto;
    padding: 0 calc(20 / var(--fs) * 1rem);

    display: block;
  }
  .page-hero__header {
    padding-block: calc(20 / var(--fs) * 1rem) calc(22 / var(--fs) * 1rem);
  }
  .page-hero__header-title {
    display: flex;
    align-items: center;
    gap: calc(16 / var(--fs) * 1rem);
  }
  .page-hero__header-title__label {
    color: var(--c-white);
    font-size: calc(24 / var(--fs) * 1rem);
    font-weight: 800;
    line-height: 1.4;
  }
  .page-hero__header-title__subtitle {
    flex-shrink: 0;
    margin-top: calc(4 / var(--fs) * 1rem);
    padding-block: calc(4 / var(--fs) * 1rem) calc(6 / var(--fs) * 1rem);
    padding-inline: calc(10 / var(--fs) * 1rem) calc(10 / var(--fs) * 1rem);
    border: calc(1 / var(--fs) * 1rem) solid var(--c-white);
    font-size: calc(16 / var(--fs) * 1rem);
    font-weight: 800;
    color: var(--c-white);
    line-height: 1.1;
    letter-spacing: 0.06em;
  }
}


/* --------------------------------------------------------------------------
  PAGE
-------------------------------------------------------------------------- */

@media all and (min-width: 768px), print {
  .l-page-container {
  }
  .l-page-container__in {
    padding-bottom: calc(120 / var(--fs) * 1rem);
  }
}

@media all and (max-width: 767px) {
  .l-page-container {
  }
  .l-page-container__in {
    padding-bottom: calc(60 / var(--fs) * 1rem);
  }
}


/* sec */

@media all and (min-width: 768px), print {
  .l-page-sec {
  }
  .l-page-sec:nth-child(even) {
  }
  .l-page-sec__in {
    max-width: calc(1140 / var(--fs) * 1rem);
    margin: auto;
    padding-inline: calc(20 / var(--fs) * 1rem);
  }
  .l-page-sec__body {
    padding-block: calc(80 / var(--fs) * 1rem);
  }
  .l-page-sec:last-child .l-page-sec__body {
    padding-bottom: 0;
  }
  .l-page-sec__header {
    margin-bottom: calc(48 / var(--fs) * 1rem);
  }
  .l-page-sec__content {
  }
}

@media all and (max-width: 767px) {
  .l-page-sec {
  }
  .l-page-sec:nth-child(even) {
  }
  .l-page-sec__in {
    margin: auto;
    padding-inline: calc(20 / var(--fs) * 1rem);
  }
  .l-page-sec__body {
    padding-block: calc(50 / var(--fs) * 1rem);
  }
  .l-page-sec:last-child .l-page-sec__body {
    padding-bottom: 0;
  }
  .l-page-sec__header {
    margin-bottom: calc(48 / var(--fs) * 1rem);
  }
  .l-page-sec__content {
  }
}


/* block */

@media all and (min-width: 768px), print {
  .l-page-block {
  }
  .l-page-block + .l-page-block {
    margin-top: calc(60 / var(--fs) * 1rem);
  }
  .l-page-block__in {
  }
  .l-page-block__header {
    margin-bottom: calc(20 / var(--fs) * 1rem);
  }
  .l-page-block__content {
  }
}

@media all and (max-width: 767px) {
  .l-page-block {
  }
  .l-page-block + .l-page-block {
    margin-top: calc(50 / var(--fs) * 1rem);
  }
  .l-page-block__in {
  }
  .l-page-block__header {
    margin-bottom: calc(10 / var(--fs) * 1rem);
  }
  .l-page-block__content {
  }
}