@charset "UTF-8";

/* --------------------------------------------------------------------------
  共通（TOPページ セクション枠）
-------------------------------------------------------------------------- */

@media all and (min-width: 768px),print {
  .l-top-sec__in {
    max-width: calc(1120 / var(--fs) * 1rem);
    margin: auto;
    padding-inline: calc(20 / var(--fs) * 1rem);
  }
  
  .l-top-sec__body {
    padding-block: calc(91 / var(--fs) * 1rem) calc(104 / var(--fs) * 1rem);
  }
  
  .l-top-sec__header {
    margin-bottom: calc(36 / var(--fs) * var(--font-scale) * 1rem);
  }
}

@media all and (max-width: 767px) {
  .l-top-sec__in {
    padding-inline: calc(20 / var(--fs) * 1rem);
  }
  .l-top-sec__body {
    padding-block: calc(48 / var(--fs) * 1rem) calc(56 / var(--fs) * 1rem);
  }

  .l-top-sec__header {
    margin-bottom: calc(24 / var(--fs) * 1rem);
  }
}

/* --------------------------------------------------------------------------
  キービジュアル（Swiperカルーセル）
-------------------------------------------------------------------------- */

.p-hero .swiper-slide a {
  display: block;
  position: relative;
}

.p-hero .swiper-slide a:focus-visible {
  outline: none;
}

.p-hero .swiper-slide a:focus-visible::after {
  content: '';
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 calc(3 / var(--fs) * 1rem) var(--c-brand-500);
  pointer-events: none;
  z-index: 1;
}

@media all and (min-width: 768px),print {
  .p-hero {
    position: relative;
    display: flow-root;
    background: var(--c-white);
    overflow: hidden;
  }
  
  .p-hero .swiper-slide {
    width: 88%;
  }
  
  .p-hero-slide__media {
    display: block;
  }
  
  .p-hero-slide__img {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .p-hero__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-white);
  }
  
  .p-hero__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    position: relative;
  }
  
  .p-hero__nav-btn--prev {
  }
  
  .p-hero__nav-btn--next {
  }
  .p-hero-side-btn__controller {
    width: 100%;
    margin-inline: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
  .p-hero__side-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    position: relative;
    width: calc(48 / var(--fs) * var(--font-scale) * 1rem);
    aspect-ratio: 1;
    background: var(--c-white);
    border-radius: 50%;
    transition: all .3s ease;

    &::before {
      content: "";
      display: block;
      width: calc(7 / var(--fs) * var(--font-scale) * 1rem);
      padding-top: calc(13 / var(--fs) * var(--font-scale) * 1rem);
      background: url(/recycle/reuse/assets/img/common/ico_arw.svg) no-repeat center / contain;
    }

  }
  
  .p-hero__side-btn--prev {
    &::before {
      margin-right: calc(2 / var(--fs) * var(--font-scale) * 1rem);
      transform: scale(-1, 1);
    }
    &:hover {
      margin-left: calc(-12 / var(--fs) * var(--font-scale) * 1rem);
    }
  }
  
  .p-hero__side-btn--next {
    &::before {
      margin-left: calc(2 / var(--fs) * var(--font-scale) * 1rem);
    }
    &:hover {
      margin-right: calc(-12 / var(--fs) * var(--font-scale) * 1rem);
    }
  }
  
  .p-hero__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--c-black);
    position: relative;
  }
  
  .p-hero__toggle::before,
  .p-hero__toggle::after {
    content: '';
    position: absolute;
    transition: opacity 0.2s ease;
  }
  
  .p-hero__toggle::before {
    top: 50%;
    left: 50%;
    box-sizing: content-box;
    width: calc(6 / var(--fs) * var(--font-scale) * 1rem);
    height: calc(8 / var(--fs) * var(--font-scale) * 1rem);
    border-left: solid calc(1 / var(--fs) * var(--font-scale) * 1rem) var(--c-white);
    border-right: solid calc(1 / var(--fs) * var(--font-scale) * 1rem) var(--c-white);
    transform: translate(-50%, -50%);
  }
  
  .p-hero__toggle::after {
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: calc(6 / var(--fs) * var(--font-scale) * 1rem) 0 calc(6 / var(--fs) * var(--font-scale) * 1rem) calc(10 / var(--fs) * var(--font-scale) * 1rem);
    border-color: transparent transparent transparent var(--c-white);
    transform: translate(-38%, -50%);
    opacity: 0;
  }
  
  .p-hero__toggle.is-paused::before {
    opacity: 0;
  }
  
  .p-hero__toggle.is-paused::after {
    opacity: 1;
  }
  
  .p-hero .swiper-pagination {
    position: static;
    width: auto;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  
  .p-hero .swiper-pagination-bullet {
    background: var(--c-gray-300);
    opacity: 1;
  }
  
  .p-hero .swiper-pagination-bullet-active {
    background: var(--c-brand-500);
  }
  .p-hero__in {
    max-width: calc(1368 / var(--fs) * var(--font-scale) * 1rem);
    margin: 0 auto;
    padding-inline: calc(20 / var(--fs) * var(--font-scale) * 1rem);
  }

  .p-hero__stage {
    position: relative;
  }

  .p-hero__panel {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
    a {
      transition: opacity .3s ease;
    }
    a:hover {
      opacity: .7;
    }
  }

  .p-hero .swiper-slide {
    width: calc(960 / (1440 / var(--fs) * var(--font-scale) * 1rem) * 100%);
    max-width: calc(960 / var(--fs) * var(--font-scale) * 1rem);
  }

  .p-hero__side-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: calc(48 / var(--fs) * var(--font-scale) * 1rem);
    height: calc(48 / var(--fs) * var(--font-scale) * 1rem);
    z-index: 10;
  }

  .p-hero__side-btn--prev {
    left: 0;
  }

  .p-hero__side-btn--next {
    right: 0;
  }

  .p-hero__nav {
    gap: calc(40 / var(--fs) * var(--font-scale) * 1rem);
    padding-block: calc(24 / var(--fs) * var(--font-scale) * 1rem);
  }

  .p-hero__nav-btn {
    width: calc(32 / var(--fs) * var(--font-scale) * 1rem);
    height: calc(32 / var(--fs) * var(--font-scale) * 1rem);
  }

  .p-hero__toggle {
    width: calc(32 / var(--fs) * var(--font-scale) * 1rem);
    height: calc(32 / var(--fs) * var(--font-scale) * 1rem);
  }

  .p-hero .swiper-pagination {
    gap: calc(24 / var(--fs) * var(--font-scale) * 1rem);
  }

  .p-hero .swiper-pagination-bullet {
    width: calc(8 / var(--fs) * var(--font-scale) * 1rem);
    height: calc(8 / var(--fs) * var(--font-scale) * 1rem);
    margin: 0 !important;
    flex-shrink: 0;
    &.swiper-pagination-bullet-active {
      width: calc(12 / var(--fs) * var(--font-scale) * 1rem);
      height: calc(12 / var(--fs) * var(--font-scale) * 1rem);
      pointer-events: none;
    }
  }
}

@media all and (max-width: 767px) {
  .p-hero {
    position: relative;
    display: flow-root;
    background: var(--c-white);
    overflow: hidden;
  }
  
  .p-hero .swiper-slide {
    width: 88%;
  }
  
  .p-hero-slide__media {
    display: block;
  }
  
  .p-hero-slide__img {
    display: block;
    width: 100%;
    height: auto;
  }
  
  .p-hero__nav {
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--c-white);
  }
  
  .p-hero__nav-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    position: relative;
  }
  .p-hero__nav-btn--prev {
  }
  
  .p-hero__nav-btn--next {
  }
  .p-hero-side-btn__controller {
    width: 100%;
    margin-inline: auto;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
  }
  .p-hero__side-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    position: relative;
    width: calc(32 / var(--fs) * 1rem);
    aspect-ratio: 1;
    background: var(--c-white);
    border-radius: 50%;
    transition: all .3s ease;

    &::before {
      content: "";
      display: block;
      width: calc(7 / var(--fs) * 1rem);
      padding-top: calc(13 / var(--fs) * 1rem);
      background: url(/recycle/reuse/assets/img/common/ico_arw.svg) no-repeat center / contain;
    }
  }

  .p-hero__side-btn--prev {
    &::before {
      margin-right: calc(2 / var(--fs) * 1rem);
      transform: scale(-1, 1);
    }
  }
  
  .p-hero__side-btn--next {
    &::before {
      margin-left: calc(2 / var(--fs) * 1rem);
    }
  }

  .p-hero__toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 9999px;
    background: var(--c-black);
    position: relative;
  }
  
  .p-hero__toggle::before,
  .p-hero__toggle::after {
    content: '';
    position: absolute;
    transition: opacity 0.2s ease;
  }
  
  .p-hero__toggle::before {
    top: 50%;
    left: 50%;
    box-sizing: content-box;
    width: calc(6 / var(--fs) * 1rem);
    height: calc(8 / var(--fs) * 1rem);
    border-left: solid calc(1 / var(--fs) * 1rem) var(--c-white);
    border-right: solid calc(1 / var(--fs) * 1rem) var(--c-white);
    transform: translate(-50%, -50%);
  }
  
  .p-hero__toggle::after {
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: calc(6 / var(--fs) * 1rem) 0 calc(6 / var(--fs) * 1rem) calc(10 / var(--fs) * 1rem);
    border-color: transparent transparent transparent var(--c-white);
    transform: translate(-38%, -50%);
    opacity: 0;
  }
  
  .p-hero__toggle.is-paused::before {
    opacity: 0;
  }
  
  .p-hero__toggle.is-paused::after {
    opacity: 1;
  }
  
  .p-hero .swiper-pagination {
    position: static;
    width: auto;
    display: flex;
    align-items: center;
    flex-shrink: 0;
  }
  
  .p-hero .swiper-pagination-bullet {
    background: var(--c-gray-300);
    opacity: 1;
  }
  
  .p-hero .swiper-pagination-bullet-active {
    background: var(--c-brand-500);
  }
  .p-hero__in {
    padding-inline: calc(14 / var(--fs) * 1rem);
  }

  .p-hero__stage {
    position: relative;
  }

  .p-hero__panel {
    position: relative;
    width: 100vw;
    margin-left: calc(50% - 50vw);
  }

  .p-hero .swiper-slide {
    max-width: calc(315 / 375 * 100%);
  }

  .p-hero__side-btn {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: calc(32 / var(--fs) * 1rem);
    height: calc(32 / var(--fs) * 1rem);
    z-index: 10;
  }

  .p-hero__side-btn--prev {
    left: 0;
  }

  .p-hero__side-btn--next {
    right: 0;
  }

  .p-hero__nav {
    gap: calc(28 / var(--fs) * 1rem);
    padding-block: calc(24 / var(--fs) * 1rem);
  }

  .p-hero__nav-btn {
    width: calc(32 / var(--fs) * 1rem);
    height: calc(32 / var(--fs) * 1rem);
  }

  .p-hero__toggle {
    width: calc(32 / var(--fs) * 1rem);
    height: calc(32 / var(--fs) * 1rem);
  }

  .p-hero .swiper-pagination {
    gap: calc(18 / var(--fs) * 1rem);
  }

  .p-hero .swiper-pagination-bullet {
    width: calc(8 / var(--fs) * 1rem);
    height: calc(8 / var(--fs) * 1rem);
    margin: 0 !important;
    flex-shrink: 0;
    &.swiper-pagination-bullet-active {
      width: calc(12 / var(--fs) * 1rem);
      height: calc(12 / var(--fs) * 1rem);
      pointer-events: none;
    }
  }
}

/* --------------------------------------------------------------------------
  News & Topic
-------------------------------------------------------------------------- */


@media all and (min-width: 768px),print {
  #news-topic .l-top-sec__body {
    padding-block: calc(43 / var(--fs) * var(--font-scale) * 1rem) calc(80 / var(--fs) * var(--font-scale) * 1rem);
  }
  .p-newstopic__more {
  }
  .p-newstopic-txt {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(8 / var(--fs) * var(--font-scale) * 1rem);
  }
  .p-newstopic-txt > span:first-child {
    position: relative;
    display: inline-block;
  }
  .p-newstopic-txt > span:first-child::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(1 / var(--fs) * var(--font-scale) * 1rem);
    background: currentColor;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .p-newstopic-txt:hover > span:first-child::after {
    opacity: 1;
    transform: scaleX(1);
  }
  .p-newstopic__body {
    display: flex;
    gap: calc(68 / var(--fs) * var(--font-scale) * 1rem);
  }

  .p-newstopic__lead {
    width: calc(356 / 1080 * 100%);
    flex-shrink: 0;
  }

  .p-newstopic__lead-txt {
    margin-top: calc(36 / var(--fs) * var(--font-scale) * 1rem);
    font-size: calc(16 / var(--fs) * var(--font-scale) * 1rem);
    line-height: 1.8;
  }

  .p-newstopic__list {
    flex: 1;
  }

  .p-newstopic__more {
    margin-top: calc(40 / var(--fs) * var(--font-scale) * 1rem);
    font-size: calc(16 / var(--fs) * var(--font-scale) * 1rem);
  }

  .p-newstopic__more-ico {
    width: calc(24 / var(--fs) * var(--font-scale) * 1rem);
    height: calc(24 / var(--fs) * var(--font-scale) * 1rem);
  }
}

@media all and (max-width: 767px) {
  .p-newstopic__more {
  }
  .p-newstopic-txt {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: calc(8 / var(--fs) * var(--font-scale) * 1rem);
  }
  .p-newstopic-txt > span:first-child {
    position: relative;
    display: inline-block;
  }
  .p-newstopic-txt > span:first-child::after {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(1 / var(--fs) * var(--font-scale) * 1rem);
    background: currentColor;
    opacity: 0;
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.3s ease, opacity 0.3s ease;
  }
  .p-newstopic-txt:hover > span:first-child::after {
    opacity: 1;
    transform: scaleX(1);
  }
  .p-newstopic__lead-txt {
    margin-top: calc(17 / var(--fs) * 1rem);
    font-size: calc(16 / var(--fs) * 1rem);
    line-height: 1.8;
  }

  .p-newstopic__list {
    margin-top: calc(40 / var(--fs) * 1rem);
  }

  .p-newstopic__more {
    margin-top: calc(24 / var(--fs) * 1rem);
  }

  .p-newstopic__more-ico {
    width: calc(28 / var(--fs) * 1rem);
    height: calc(28 / var(--fs) * 1rem);
  }
}

/* --------------------------------------------------------------------------
  About Reuse
-------------------------------------------------------------------------- */

.p-about__statement {
  font-weight: 700;
  color: var(--c-brand-500);
}

.p-about__txt {
  color: var(--txt-color);
}

.p-about__diagram {
  width: 100%;
  height: auto;
}

@media all and (min-width: 768px),print {
  .l-top-sec:has(.p-about__body) .l-top-sec__header {
    margin-bottom: calc(40 / var(--fs) * var(--font-scale) * 1rem);
  }

  .p-about__body {
    display: flex;
    gap: calc(64 / var(--fs) * var(--font-scale) * 1rem);
  }

  .p-about__text {
    width: calc(531 / 1080 * 100%);
  }

  .p-about__statement {
    font-size: calc(24 / var(--fs) * var(--font-scale) * 1rem);
    line-height: 1.8;
  }

  .p-about__txt {
    margin-top: calc(17 / var(--fs) * var(--font-scale) * 1rem);
    font-size: calc(16 / var(--fs) * var(--font-scale) * 1rem);
    line-height: 2.2;
  }

  .p-about__figure {
    width: calc(485 / 1080 * 100%);
  }

  .p-about-column {
    margin-top: calc(55 / var(--fs) * var(--font-scale) * 1rem);
    border-radius: calc(16 / var(--fs) * var(--font-scale) * 1rem);
border: 1px solid var(--c-brand-500);
background: var(--c-white);
overflow: hidden;
  }
  .p-about-column__heading {
    border-radius:0 0 calc(16 / var(--fs) * var(--font-scale) * 1rem) 0;
background: var(--c-brand-500);
display: inline-block;
padding: calc(6 / var(--fs) * var(--font-scale) * 1rem) calc(40 / var(--fs) * var(--font-scale) * 1rem);
  }
  .p-about-column__head {
    color: var(--c-white);
    font-family: 'Krona One', sans-serif;
    font-size: calc(20 / var(--fs) * var(--font-scale) * 1rem);
    line-height: 180%;
  }

  .p-about-column__body {
    padding: calc(20 / var(--fs) * var(--font-scale) * 1rem) calc(40 / var(--fs) * var(--font-scale) * 1rem) calc(26 / var(--fs) * var(--font-scale) * 1rem);
    display: flex;
    flex-direction: column;
    row-gap: calc(19 / var(--fs) * var(--font-scale) * 1rem);
  }
  .p-about-column__title{
    color: var(--c-brand-500);
    font-size: calc(20 / var(--fs) * var(--font-scale) * 1rem);
    line-height: 180%;
    font-weight: 700;
  }
  .p-about-column__txt {
    font-size: calc(16 / var(--fs) * var(--font-scale) * 1rem);
    line-height: 2.2;
    color: var(--c-brand-500);
  }
}

@media all and (max-width: 767px) {
  .p-about__statement {
    font-size: calc(20 / var(--fs) * var(--font-scale) * 1rem);
    line-height: 1.8;
    font-feature-settings: "palt";
  }

  .p-about__txt {
    margin-top: calc(14 / var(--fs) * var(--font-scale) * 1rem);
    font-size: calc(16 / var(--fs) * var(--font-scale) * 1rem);
    line-height: 1.8;
    text-align: justify;
  }

  .p-about__figure {
    margin-top: calc(40 / var(--fs) * var(--font-scale) * 1rem);
  }
  .p-about-column {
    margin-top: calc(40 / var(--fs) * var(--font-scale) * 1rem);
    border-radius: calc(16 / var(--fs) * var(--font-scale) * 1rem);
border: 1px solid var(--c-brand-500);
background: var(--c-white);
overflow: hidden;
  }
  .p-about-column__heading {
    border-radius:0 0 calc(16 / var(--fs) * var(--font-scale) * 1rem) 0;
background: var(--c-brand-500);
display: inline-block;
padding: calc(6 / var(--fs) * var(--font-scale) * 1rem) calc(24 / var(--fs) * var(--font-scale) * 1rem);
  }
  .p-about-column__head {
    color: var(--c-white);
    font-family: 'Krona One', sans-serif;
    font-size: calc(18 / var(--fs) * var(--font-scale) * 1rem);
    line-height: 180%;
  }

  .p-about-column__body {
    padding: calc(15 / var(--fs) * var(--font-scale) * 1rem) calc(23 / var(--fs) * var(--font-scale) * 1rem);
    display: flex;
    flex-direction: column;
    row-gap: calc(9 / var(--fs) * var(--font-scale) * 1rem);
  }

  .p-about-column__title {
    font-size: calc(18 / var(--fs) * var(--font-scale) * 1rem);
    color: var(--c-brand-500);
    line-height: 150%;
    font-weight: 700;
  }
  .p-about-column__txt {
    font-size: calc(16 / var(--fs) * var(--font-scale) * 1rem);
    line-height: 180%;
    color: var(--c-brand-500);
  }
}

/* --------------------------------------------------------------------------
  Reuse Roadmap
-------------------------------------------------------------------------- */

.p-roadmap__btn .c-btn:focus-visible {
  outline-color: var(--c-white);
}


@media all and (min-width: 768px),print {
  .p-roadmap__badge {
    display: block;
    text-align: center;
    background: #D93664;
    color: var(--c-white);
    font-weight: 700;
    border-radius: calc(8 / var(--fs) * 1rem);
  }
  
  .p-roadmap__badge em {
    font-family: 'Krona One', sans-serif;
    font-weight: 400;
    letter-spacing: 0.01em;
  }
  
  .p-roadmap-card {
    background: var(--c-white);
    border-radius: calc(8 / var(--fs) * 1rem);
    text-align: center;
  }
  
  .p-roadmap-card__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(16 / var(--fs) * var(--font-scale) * 1rem);
    text-align: left;
  }
  
  .p-roadmap-card__ico {
    display: block;
    flex-shrink: 0;
  }
  
  .p-roadmap-card__ico img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  .p-roadmap-card__label {
    font-weight: 700;
    color: var(--txt-color);
  }
  
  .p-roadmap-card__num {
    font-weight: 700;
    color: var(--txt-color);
    line-height: 1;
  }
  
  .p-roadmap-card__num em {
    font-family: 'Krona One', sans-serif;
    font-weight: 400;
    letter-spacing: 0.01em;
  }
  
  .p-roadmap-card__unit {
    font-weight: 700;
  }
  
  .p-roadmap-card__note {
    color: #646464;
  }
  
  .p-roadmap__source {
    text-align: right;
    color: var(--c-white);
    line-height:  180%;
  }
  
  .p-roadmap__btn {
  }
  .l-top-sec:has(.p-roadmap__badge) .l-top-sec__header {
    margin-bottom: calc(40 / var(--fs) * var(--font-scale) * 1rem);
  }

  .p-roadmap__badge {
    width: 100%;
    margin: 0 0 calc(16 / var(--fs) * var(--font-scale) * 1rem);
    padding-block: calc(10 / var(--fs) * var(--font-scale) * 1rem);
    font-size: calc(16 / var(--fs) * var(--font-scale) * 1rem);
  }

  .p-roadmap__badge em {
    font-size: calc(24 / var(--fs) * var(--font-scale) * 1rem);
  }

  .p-roadmap__cards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: calc(24 / var(--fs) * var(--font-scale) * 1rem);
  }

  .p-roadmap-card {
    padding: calc(32 / var(--fs) * var(--font-scale) * 1rem) calc(20 / var(--fs) * var(--font-scale) * 1rem);
  }

  .p-roadmap-card__head {
    min-height: calc(45 / var(--fs) * var(--font-scale) * 1rem);
  }

  .p-roadmap-card:nth-child(1) .p-roadmap-card__ico {
    width: calc(44 / var(--fs) * var(--font-scale) * 1rem);
  }

  .p-roadmap-card:nth-child(2) .p-roadmap-card__ico {
    width: calc(41 / var(--fs) * var(--font-scale) * 1rem);
  }

  .p-roadmap-card:nth-child(3) .p-roadmap-card__ico {
    width: calc(36 / var(--fs) * var(--font-scale) * 1rem);
  }

  .p-roadmap-card__label {
    font-size: calc(16 / var(--fs) * var(--font-scale) * 1rem);
    line-height: 1.4;
  }

  .p-roadmap-card__num {
    margin-top: calc(16 / var(--fs) * var(--font-scale) * 1rem);
    font-size: calc(24 / var(--fs) * var(--font-scale) * 1rem);
  }

  .p-roadmap-card__num em {
    font-size: calc(64 / var(--fs) * var(--font-scale) * 1rem);
  }

  .p-roadmap-card__note {
    margin-top: calc(8 / var(--fs) * var(--font-scale) * 1rem);
    font-size: calc(14 / var(--fs) * var(--font-scale) * 1rem);
  }

  .p-roadmap__source {
    margin-top: calc(9 / var(--fs) * var(--font-scale) * 1rem);
    font-size: calc(12 / var(--fs) * var(--font-scale) * 1rem);
  }

  .p-roadmap__btn {
    max-width: calc(320 / var(--fs) * var(--font-scale) * 1rem);
    margin: calc(50 / var(--fs) * var(--font-scale) * 1rem) auto 0;
  }

  .p-roadmap__btn .c-btn {
    --btn-arrow: url('/recycle/reuse/assets/img/common/ico_arw_btn01_on.svg');
    --btn-arrow-on: url('/recycle/reuse/assets/img/common/ico_arw_btn01.svg');
    --btn-min-height: 64;
  }
}

@media all and (max-width: 767px) {
  .p-roadmap__badge {
    padding-block: calc(3 / var(--fs) * 1rem);
    font-size: calc(16 / var(--fs) * 1rem);
    margin-bottom: calc(16 / var(--fs) * 1rem);
    line-height: 1.4;
  }
  .p-roadmap__badge em {
    font-size: calc(24 / var(--fs) * 1rem);
  }

  .p-roadmap__cards {
    display: flex;
    flex-direction: column;
    gap: calc(16 / var(--fs) * 1rem);
  }

  .p-roadmap__badge {
    display: block;
    text-align: center;
    background: #D93664;
    color: var(--c-white);
    font-weight: 700;
    border-radius: calc(8 / var(--fs) * 1rem);
  }
  
  .p-roadmap__badge em {
    font-family: 'Krona One', sans-serif;
    font-weight: 400;
    letter-spacing: 0.01em;
  }
  
  .p-roadmap-card {
    background: var(--c-white);
    border-radius: calc(8 / var(--fs) * 1rem);
    text-align: center;
  }
  
  .p-roadmap-card__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: calc(8 / var(--fs) * 1rem);
    text-align: left;
  }
  
  .p-roadmap-card__ico {
    display: block;
    flex-shrink: 0;
  }
  
  .p-roadmap-card__ico img {
    width: 100%;
    height: auto;
    display: block;
  }
  
  .p-roadmap-card__label {
    font-weight: 700;
    color: var(--txt-color);
  }
  
  .p-roadmap-card__num {
    font-weight: 700;
    color: var(--txt-color);
    line-height: 1;
  }
  
  .p-roadmap-card__num em {
    font-family: 'Krona One', sans-serif;
    font-weight: 400;
    letter-spacing: 0.01em;
  }
  
  .p-roadmap-card__unit {
    font-weight: 700;
  }
  
  .p-roadmap-card__note {
    color: #646464;
  }
  
  .p-roadmap__source {
    text-align: right;
    color: var(--c-white);
    line-height:  180%;
  }
  
  .p-roadmap__btn {
  }

  .p-roadmap-card {
    padding: calc(24 / var(--fs) * 1rem) calc(20 / var(--fs) * 1rem);
  }

  .p-roadmap-card__ico {
    width: calc(30 / var(--fs) * 1rem);
  }

  .p-roadmap-card__label {
    font-size: calc(16 / var(--fs) * 1rem);
    line-height: 1.4;
  }

  .p-roadmap-card__num {
    margin-top: calc(12 / var(--fs) * 1rem);
    font-size: calc(56 / var(--fs) * 1rem);
  }

  .p-roadmap-card__unit {
    font-size: calc(20 / var(--fs) * 1rem);
  }

  .p-roadmap-card__note {
    margin-top: calc(6 / var(--fs) * 1rem);
    font-size: calc(14 / var(--fs) * 1rem);
  }

  .p-roadmap__source {
    margin-top: calc(9 / var(--fs) * 1rem);
    font-size: calc(12 / var(--fs) * 1rem);
    text-align: left;
    line-height: 1.8;
  }

  .p-roadmap__btn {
    margin-top: calc(24 / var(--fs) * 1rem);
    width: calc(315 / var(--fs) * 1rem);
    margin-inline: auto;
  }
  .p-roadmap__btn .c-btn {
    --btn-arrow: url('/recycle/reuse/assets/img/common/ico_arw_btn01_on.svg');
    --btn-arrow-on: url('/recycle/reuse/assets/img/common/ico_arw_btn01.svg');
  }
}

/* --------------------------------------------------------------------------
  Special Contents
-------------------------------------------------------------------------- */


@media all and (min-width: 768px),print {
  .l-top-sec:has(.p-special__body) .l-top-sec__header {
    margin-bottom: calc(56 / var(--fs) * var(--font-scale) * 1rem);
  }

  .p-special__body {
    display: flex;
    align-items: center;
    gap: calc(64 / var(--fs) * 1rem);
  }

  .p-special__figure {
  }

  .p-special__thumb {
    display: block;
    max-width: calc(556 / var(--fs) * 1rem);
    width: 100%;
  }

  .p-special__content {
    flex-grow: 1;
    flex-shrink: 0;
  }

  .p-special__catch {
    display: block;
    width: calc(451 / var(--fs) * var(--font-scale) * 1rem);
  }

  .p-special__btns {
    margin-top: calc(40 / var(--fs) * var(--font-scale) * 1rem);
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: calc(40 / var(--fs) * var(--font-scale) * 1rem);
  }

  .p-special__btn {
    max-width: calc(320 / var(--fs) * var(--font-scale) * 1rem);
    width: 100%;
  }

  .p-special__btn .c-btn {
    --btn-bg-color: var(--c-black);
    --btn-border-color: var(--c-white);
    --btn-txt-color: var(--c-white);
    --btn-arrow: url('/recycle/reuse/assets/img/common/ico_arw_btn02.svg');
    --btn-arrow-on: url('/recycle/reuse/assets/img/common/ico_arw_btn02_on.svg');
    --btn-min-height: 88;
  }

  .p-special__btn .c-btn:hover {
    --btn-bg-color: var(--c-white);
    --btn-txt-color: var(--c-black);
  }
}

@media all and (max-width: 767px) {
  #special-contents .l-top-sec__header {
    margin-bottom: calc(42 / var(--fs) * 1rem);
  }
  .p-special__figure {
    margin-bottom: calc(32 / var(--fs) * 1rem);
  }

  .p-special__thumb {
    width: calc(305 / var(--fs) * 1rem);
    display: block;
    margin-inline: auto;
  }
  .p-special__content {
    width: calc(308 / var(--fs) * 1rem);
    margin-inline: auto;
  }
  .p-special__catch {
  }

  .p-special__btns {
    margin-top: calc(40 / var(--fs) * 1rem);
    display: flex;
    flex-direction: column;
    gap: calc(16 / var(--fs) * 1rem);
  }

  .p-special__btn {
    font-size: calc(13 / var(--fs) * 1rem);
  }
  .p-special__btn .c-btn {
    --btn-bg-color: var(--c-black);
    --btn-border-color: var(--c-white);
    --btn-txt-color: var(--c-white);
    --btn-arrow: url('/recycle/reuse/assets/img/common/ico_arw_btn02.svg');
    --btn-arrow-on: url('/recycle/reuse/assets/img/common/ico_arw_btn02_on.svg');
    --btn-min-height: 76;
  }
}

/* --------------------------------------------------------------------------
  Reuse Guide
-------------------------------------------------------------------------- */

.p-guide-panels {
  position: relative;
}

.p-guide-panel[data-cat='consumer'] {
  --panel-bg: #f0f8f6;
}

.p-guide-panel[data-cat='local'] {
  --panel-bg: #f0f8f6;
}

.p-guide-panel[data-cat='business'] {
  --panel-bg: #f0f8f6;
}

.p-guide-panel__body {
  background: var(--panel-bg);
}

.p-guide-panel__lead-txt {
  color: var(--txt-color);
}

.p-guide-block {
  background: var(--c-brand-500);
  color: var(--c-white);
}

.p-guide-block__title {
  font-weight: 700;
  color: var(--c-white);
}

.p-guide-block__txt {
  color: var(--c-white);
  & + & {
    margin-top: 1em;
  }
}

.p-guide-card__title {
  font-weight: 700;
  color: var(--txt-color);
  line-height: 1.8;
}

.p-guide-card__ico {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: calc(82 / var(--fs) * var(--font-scale) * 1rem);
  text-align: center;
}

.p-guide-card__ico img {
  width: fit-content;
  height: auto;
}

.p-guide-card__desc {
  font-weight: 700;
  color: var(--txt-color);
}

.p-guide-card__note {
  color: var(--txt-color);
}

.p-guide-sub {
  background: var(--c-gray-100);
}

.p-guide-block + .p-guide-sub {
  background: var(--panel-bg);
}

.p-guide-sub__title {
  font-weight: 700;
  color: var(--c-brand-500);
}

.p-guide-infobox {
  background: var(--c-white);
}

.p-guide-infobox__ico {
  display: block;
  flex-shrink: 0;
}

.p-guide-infobox__ico img {
  width: 100%;
  height: auto;
  display: block;
}

.p-guide-infobox dt {
  font-weight: 700;
}

.p-guide-lawlist-item {
  display: flex;
  align-items: baseline;
}

.p-guide-lawlist-item__badge {
  display: inline-block;
  flex-shrink: 0;
  background: var(--c-brand-500);
  color: var(--c-white);
  font-weight: 500;
  border-radius: calc(4 / var(--fs) * 1rem);
  text-align: center;
}

.p-guide-lawlist-item__desc {
  color: var(--txt-color);
}

.p-guide-market__chart-img {
  width: 100%;
  height: auto;
  display: block;
}

.p-guide-source {
  color: var(--c-brand-200);
  > a {
    text-decoration: underline;
  }
}

@media all and (min-width: 768px),print {
  .l-top-sec:has(.p-guide-intro) .l-top-sec__header {
    margin-bottom: calc(40 / var(--fs) * var(--font-scale) * 1rem);
  }

  .p-guide-intro {
    margin-bottom: calc(56 / var(--fs) * var(--font-scale) * 1rem);
  }

  .p-guide-intro__lead {
    font-size: calc(16 / var(--fs) * var(--font-scale) * 1rem);
  }

  .p-guide-panel__body {
  }

  .p-guide-panel__head {
    padding: calc(56 / var(--fs) * 1rem) calc(80 / var(--fs) * 1rem);
  }

  .p-guide-panel__title {
    font-size: calc(28 / var(--fs) * var(--font-scale) * 1rem);
    font-weight: 700;
    margin-bottom: calc(15 / var(--fs) * var(--font-scale) * 1rem);
    line-height: 1.8;
  }

  .p-guide-panel__lead-txt {
    font-size: calc(16 / var(--fs) * var(--font-scale) * 1rem);
    line-height: 1.8;
  }

  .p-guide-block {
    padding: calc(56 / var(--fs) * 1rem) calc(80 / var(--fs) * 1rem);
  }

  .p-guide-block__title {
    font-size: calc(24 / var(--fs) * var(--font-scale) * 1rem);
    margin-bottom: calc(12 / var(--fs) * var(--font-scale) * 1rem);
    line-height: 1.8;
  }

  .p-guide-block__txt {
    font-size: calc(16 / var(--fs) * var(--font-scale) * 1rem);
    line-height: 1.8;
  }

  .p-guide-cards {
    display: flex;
    margin-top: calc(32 / var(--fs) * 1rem);
    grid-template-columns: repeat(3, 1fr);
    gap: calc(20 / var(--fs) * 1rem);
  }

  .p-guide-card {
    background: var(--c-white);
    border-radius: calc(12 / var(--fs) * 1rem);
    text-align: center;
    width: calc((100% - ((20 * 2) / var(--fs) * 1rem)) / 3);
    padding: calc(16 / var(--fs) * 1rem) calc(20 / var(--fs) * 1rem) calc(28 / var(--fs) * 1rem);
  }

  .p-guide-card__title {
    font-size: calc(18 / var(--fs) * var(--font-scale) * 1rem);
    margin-bottom: calc(15 / var(--fs) * var(--font-scale) * 1rem);
  }

  .p-guide-card__ico {
  }

  .p-guide-card__desc {
    margin-top: calc(16 / var(--fs) * var(--font-scale) * 1rem);
    font-size: calc(14 / var(--fs) * var(--font-scale) * 1rem);
    line-height: 1.8;
  }

  .p-guide-card__note {
    margin-top: calc(3 / var(--fs) * var(--font-scale) * 1rem);
    font-size: calc(14 / var(--fs) * var(--font-scale) * 1rem);
    line-height: 1.8;
  }

  .p-guide-sub {
    padding: calc(56 / var(--fs) * 1rem) calc(80 / var(--fs) * 1rem);
  }

  .p-guide-sub__title {
    font-size: calc(24 / var(--fs) * var(--font-scale) * 1rem);
    margin-bottom: calc(10 / var(--fs) * var(--font-scale) * 1rem);
    line-height: 1.8;
  }

  .p-guide-sub__lead {
    font-size: calc(16 / var(--fs) * var(--font-scale) * 1rem);
    line-height: 1.8;
  }

  .p-guide-infobox {
    margin-top: calc(32 / var(--fs) * 1rem);
    padding: calc(24 / var(--fs) * 1rem);
    
  }
  .p-guide-infobox__inner {
  }
  .p-guide-infobox-list {
  }
  .p-guide-infobox-list-item {
    & + & {
      margin-top: calc(14 / var(--fs) * 1rem);
    }
  }
  .p-guide-infobox__content {
    display: grid;
    align-items: start;
    grid-template-columns: auto 1fr;
    gap: 0 calc(16 / var(--fs) * 1rem);
  }
  .p-guide-infobox__ico {
  }
  .p-guide-infobox__read {
  }
  .p-guide-infobox-head {
    grid-area: 1 / 2 / 2 / 3;
    font-size: calc(18 / var(--fs) * var(--font-scale) * 1rem);
    line-height: 1.8;
  }
  .p-guide-infobox-head__label {
  }
  .p-guide-infobox-detail {
    grid-area: 2 / 2 / 3 / 3;
    font-size: calc(16 / var(--fs) * var(--font-scale) * 1rem);
    line-height: 1.8;
    margin-top: calc(8 / var(--fs) * var(--font-scale) * 1rem);
  }
  .p-guide-infobox-detail__label {
  }

  .p-guide-infobox__ico {
    grid-area: 1 / 1 / 3 / 2;
    width: calc(34 / var(--fs) * var(--font-scale) * 1rem);
  }

  .p-guide-infobox dl {
    font-size: calc(14 / var(--fs) * var(--font-scale) * 1rem);
    line-height: 1.8;
  }

  .p-guide-lawlist__container {
    margin-top: calc(24 / var(--fs) * var(--font-scale) * 1rem);
    background: var(--c-white);
    padding: calc(32 / var(--fs) * var(--font-scale) * 1rem) ;
  }
  .p-guide-lawlist {
    display: flex;
    flex-direction: column;
    gap: calc(16 / var(--fs)* 1rem);
  }

  .p-guide-lawlist-item {
    gap: calc(16 / var(--fs)* 1rem);
  }

  .p-guide-lawlist-note {
    font-size: calc(16 / var(--fs) * var(--font-scale) * 1rem);
    line-height: 1.8;
    margin-top: calc(8 / var(--fs) * var(--font-scale) * 1rem);
  }
  .p-guide-lawlist-note-txt {
    > a {
      text-decoration: underline;
      padding-right: calc(29 / var(--fs) * var(--font-scale) * 1rem);
      display: inline-block;
      position: relative;
      &::after {
        content: "";
        display: block;
        width: calc(21 / var(--fs) * var(--font-scale) * 1em);
        padding-top: calc(24 / var(--fs) * var(--font-scale) * 1em);
        background: url(../img/common/ico_pdf.svg) no-repeat center / contain;
        position: absolute;
        top: 0;
        right: 0;
        margin-top: calc(((1lh - 1em) / 2) / 2);
      }
    }
  }

  .p-guide-lawlist-item__badge {
    min-width: calc(232 / var(--fs) * var(--font-scale) * 1rem);
    padding-block: calc(2 / var(--fs) * var(--font-scale) * 1rem) calc(1 / var(--fs) * var(--font-scale) * 1rem);
    font-size: calc(16 / var(--fs) * var(--font-scale) * 1rem);
    line-height: 1.8;
  }

  .p-guide-lawlist-item__desc {
    font-size: calc(16 / var(--fs) * var(--font-scale) * 1rem);
    line-height: 1.8;
  }

  .p-guide-market {
    display: flex;
    align-items: flex-start;
    gap: calc(32 / var(--fs) * var(--font-scale) * 1rem);
  }

  .p-guide-market__text {
    flex: 1;
  }

  .p-guide-market-read {
    width: calc(417 / 920 * 100%);
  }
  .p-guide-market__chart {
    width: calc(463 / 920 * 100%);
  }

  .p-guide-source {
    margin-top: calc(16 / var(--fs) * var(--font-scale) * 1rem);
    font-size: calc(12 / var(--fs) * var(--font-scale) * 1rem);
    line-height: 1.6;
    > a:hover {
      text-decoration: none;
    }
  }
  .p-circular-infobox-heading {
    font-size: calc(18 / var(--fs) * var(--font-scale) * 1rem);
    font-weight: 700;
    line-height: 1.8;
    margin-bottom: calc(7 / var(--fs) * var(--font-scale) * 1rem);
  }
  .p-circular-infobox-heading__label {
  }
  .p-circular-infobox-read {
  }
  .p-circular-infobox-read-txt {
    font-size: calc(16 / var(--fs) * var(--font-scale) * 1rem);
    line-height: 1.8;
  }
  .p-circular-infobox-read-txt__label {
  }
  .p-circular-infobox-graph {
    max-width: calc(805 / var(--fs) * var(--font-scale) * 1rem);
    width: 100%;
    margin-inline: auto;
    margin-top: calc(16 / var(--fs) * var(--font-scale) * 1rem);
  }
  .p-guide-sub--action {
    background: var(--c-main-100);
  }
  .p-guide-sub__column {
    display: flex;
    align-items: start;
    gap: calc(70 / 920 * 100%);
  }
  .p-guide-sub__column--read {
    width: calc(480 / 920 * 100%);
  }
  .p-guide-sub__column--thumb {
    width: calc(298 / 920 * 100%);
  }
  .p-action-cards {
    display: flex;
    gap: calc(16 / var(--fs) * var(--font-scale) * 1rem);
    margin-top: calc(16 / var(--fs) * var(--font-scale) * 1rem);
  }
  .p-action-card {
    width: calc((100% - ((16 * 2) / var(--fs) * var(--font-scale) * 1rem)) / 3);
    background: var(--c-white);
    border: solid 1px var(--c-brand-500);
    border-radius: calc(8 / var(--fs) * 1rem);
  }
  .p-action-card__inner {
    padding-inline: calc(32 / var(--fs) * 1rem);
  }
  .p-action-card__body {
    padding-block: calc(16 / var(--fs) * 1rem) calc(32 / var(--fs) * 1rem);
  }
  .p-action-card__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(96 / var(--fs) * var(--font-scale) * 1rem);
    img {
      width: fit-content;
    }
  }
  .p-action-card__title {
    text-align: center;
    font-size: calc(18 / var(--fs) * var(--font-scale) * 1rem);
    font-weight: 700;
    line-height: 1.8;
  }
  .p-action-card-txt {
    text-align: center;
    font-size: calc(14 / var(--fs) * var(--font-scale) * 1rem);
    line-height: 1.8;
  }
  .p-action-card-txt__label {
  }
  .p-action-card-ratio {
    margin-top: calc(18 / var(--fs) * var(--font-scale) * 1rem);
  }
  .p-action-card-ratio-txt {
    display: flex;
    justify-content: center;
    align-items: end;
    font-family: 'Krona One', sans-serif;
    font-size: calc(40 / var(--fs) * var(--font-scale) * 1rem);
    color: var(--c-brand-500);
  }
  .p-action-card-ratio-txt__label {
    line-height: 1;
  }
  .p-action-card-ratio-txt__label--unit {
    font-size: calc(28 / 40 * 1em);
    line-height: 1;
  }
  .p-action-btn {
    width: calc(320 / var(--fs) * var(--font-scale) * 1rem);
    margin-inline: auto;
    margin-top: calc(40 / var(--fs) * var(--font-scale) * 1rem);
  }
  .p-guide-market__chart-img {
    border-radius: calc(8 / var(--fs) * 1rem);
    overflow: hidden;
  }
}

@media all and (max-width: 767px) {
  .p-guide-intro__title {
    font-size: calc(20 / var(--fs) * 1rem);
    font-weight: 700;
  }

  .p-guide-intro__lead {
    margin-bottom: calc(40 / var(--fs) * 1rem);
    font-size: calc(16 / var(--fs) * 1rem);
    line-height: 1.8;
  }

  .p-guide-panel__body {
  }

  .p-guide-panel__head {
    padding-block: calc(50 / var(--fs) * 1rem) calc(56 / var(--fs) * 1rem);
    padding-inline: calc(20 / var(--fs) * 1rem);
  }

  .p-guide-panel__title {
    font-size: calc(24 / var(--fs) * 1rem);
    font-weight: 700;
    line-height: 1.8;
    font-feature-settings: "palt";
  }

  .p-guide-panel__lead-txt {
    margin-top: calc(20 / var(--fs) * 1rem);
    font-size: calc(16 / var(--fs) * 1rem);
    line-height: 1.8;
    font-feature-settings: "palt";
  }

  .p-guide-block {
    padding-inline: calc(20 / var(--fs) * 1rem);
    padding-block: calc(44 / var(--fs) * 1rem) calc(56 / var(--fs) * 1rem);
  }

  .p-guide-block__title {
    font-size: calc(20 / var(--fs) * 1rem);
    line-height: 1.8;
  }

  .p-guide-block__txt {
    margin-top: calc(14 / var(--fs) * 1rem);
    font-size: calc(16 / var(--fs) * 1rem);
    line-height: 1.8;
  }

  .p-guide-cards {
    margin-top: calc(24 / var(--fs) * 1rem);
    gap: calc(8 / var(--fs) * 1rem);
  }

  .p-guide-card {
    background: var(--c-white);
    border-radius: calc(12 / var(--fs) * 1rem);
    padding-block: calc(22 / var(--fs) * 1rem) calc(26 / var(--fs) * 1rem);
    padding-inline: calc(20 / var(--fs) * 1rem);
    & + & {
      margin-top: calc(8 / var(--fs) * 1rem);
    }
  }

  .p-guide-card__title {
    text-align: center;
    font-size: calc(18 / var(--fs) * 1rem);
  }

  .p-guide-card__ico {
    margin-top: calc(16 / var(--fs) * 1rem);
  }

  .p-guide-card__desc {
    text-align: center;
    margin-top: calc(12 / var(--fs) * 1rem);
    font-size: calc(14 / var(--fs) * 1rem);
    line-height: 1.8;
  }

  .p-guide-card__note {
    text-align: center;
    margin-top: calc(6 / var(--fs) * 1rem);
    font-size: calc(14 / var(--fs) * 1rem);
    line-height: 1.8;
    font-weight: 400;
  }

  .p-guide-sub {
    padding-inline: calc(20 / var(--fs) * 1rem);
    padding-block: calc(44 / var(--fs) * 1rem) calc(56 / var(--fs) * 1rem);
  }

  .p-guide-sub__title {
    font-size: calc(20 / var(--fs) * 1rem);
    line-height: 1.8;
  }

  .p-guide-sub__lead {
    margin-top: calc(10 / var(--fs) * 1rem);
    font-size: calc(16 / var(--fs) * 1rem);
    line-height: 1.8;
    font-feature-settings: "palt";
  }

  .p-guide-infobox {
    margin-top: calc(24 / var(--fs) * 1rem);
    padding: calc(24 / var(--fs) * 1rem);
    gap: calc(12 / var(--fs) * 1rem);
    flex-direction: column;
  }
  .p-guide-infobox__inner {
  }
  .p-guide-infobox-list {
  }
  .p-guide-infobox-list-item {
    & + & {
      margin-top: calc(14 / var(--fs) * 1rem);
    }
  }
  .p-guide-infobox__content {
    display: grid;
    align-items: start;
    grid-template-columns: auto 1fr;
    gap: 0 calc(16 / var(--fs) * 1rem);
  }
  .p-guide-infobox__ico {
  }
  .p-guide-infobox-head {
    grid-area: 1 / 2 / 2 / 3;
    font-size: calc(16 / var(--fs) * 1rem);
    line-height: 1.8;
    font-feature-settings: "palt";
  }
  .p-guide-infobox-head__label {
  }
  .p-guide-infobox-detail {
    grid-area: 2 / 1 / 3 / 3;
    font-size: calc(16 / var(--fs) * 1rem);
    line-height: 1.8;
  }
  .p-guide-infobox-detail__label {
  }

  .p-guide-infobox__ico {
    width: calc(32 / var(--fs) * 1rem);
    margin: auto;
  }

  .p-guide-infobox dl {
    font-size: calc(13 / var(--fs) * 1rem);
    line-height: 1.8;
  }

  .p-guide-lawlist__container {
    margin-top: calc(16 / var(--fs) * 1rem);
    background: var(--c-white);
    padding: calc(20 / var(--fs) * 1rem);
  }
  .p-guide-lawlist {
    display: flex;
    flex-direction: column;
    gap: calc(16 / var(--fs) * 1rem);
  }

  .p-guide-lawlist-item {
    flex-direction: column;
    gap: calc(8 / var(--fs) * 1rem);
  }

  .p-guide-lawlist-note {
    font-size: calc(16 / var(--fs) * 1rem);
    line-height: 1.8;
    margin-top: calc(16 / var(--fs) * 1rem);
  }
  .p-guide-lawlist-note-txt {
    > a {
      text-decoration: underline;
      padding-right: calc(29 / var(--fs) * 1rem);
      display: inline-block;
      position: relative;
      &::after {
        content: "";
        display: block;
        width: calc(21 / var(--fs) * 1em);
        padding-top: calc(24 / var(--fs) * 1em);
        background: url(../img/common/ico_pdf.svg) no-repeat center / contain;
        position: absolute;
        top: 50%;
        right: 0;
        transform: translateY(-50%);
      }
    }
  }

  .p-guide-lawlist-item__badge {
    padding-inline: calc(16 / var(--fs) * 1rem);
    padding-block: calc(3 / var(--fs) * 1rem);
    font-size: calc(14 / var(--fs) * 1rem);
    line-height: 1.8;
    min-width: calc(158 / var(--fs) * 1rem);
  }

  .p-guide-lawlist-item__desc {
    font-size: calc(14 / var(--fs) * 1rem);
    line-height: 1.8;
  }

  .p-guide-market {
    margin-top: calc(16 / var(--fs) * 1rem);
    display: flex;
    flex-direction: column;
    gap: calc(16 / var(--fs) * 1rem);
  }

  .p-guide-source {
    margin-top: calc(12 / var(--fs) * 1rem);
    font-size: calc(12 / var(--fs) * 1rem);
    line-height: 1.6;
  }
  .p-circular-infobox-heading {
    font-size: calc(16 / var(--fs) * 1rem);
    font-weight: 700;
    line-height: 1.8;
    margin-bottom: calc(15 / var(--fs) * 1rem);
  }
  .p-circular-infobox-heading__label {
  }
  .p-circular-infobox-read {
  }
  .p-circular-infobox-read-txt {
    font-size: calc(14 / var(--fs) * 1rem);
    line-height: 1.8;
  }
  .p-circular-infobox-read-txt__label {
  }
  .p-circular-infobox-graph {
    width: 100%;
    margin-inline: auto;
    margin-top: calc(26 / var(--fs) * 1rem);
  }
  .p-guide-sub--action {
    background: var(--c-main-100);
  }
  .p-guide-sub__column {
  }
  .p-guide-sub__column--read {
  }
  .p-guide-sub__column--thumb {
    margin-top: calc(16 / var(--fs) * 1rem);
  }
  .p-action-cards {
    display: flex;
    align-items: start;
    flex-direction: column;
    gap: calc(16 / var(--fs) * 1rem);
    margin-top: calc(16 / var(--fs) * 1rem);
  }
  .p-action-card {
    width: 100%;
    background: var(--c-white);
    border: solid 1px var(--c-brand-500);
    border-radius: calc(8 / var(--fs) * 1rem);
  }
  .p-action-card__inner {
    padding-inline: calc(32 / var(--fs) * 1rem);
  }
  .p-action-card__body {
    padding-block: calc(8 / var(--fs) * 1rem) calc(24 / var(--fs) * 1rem);
  }
  .p-action-card__ico {
    display: flex;
    align-items: center;
    justify-content: center;
    height: calc(96 / var(--fs) * 1rem);
    img {
      width: fit-content;
    }
  }
  .p-action-card__title {
    text-align: center;
    font-size: calc(18 / var(--fs) * 1rem);
    font-weight: 700;
    line-height: 1.8;
  }
  .p-action-card-txt {
    text-align: center;
    font-size: calc(14 / var(--fs) * 1rem);
    line-height: 1.8;
  }
  .p-action-card-txt__label {
  }
  .p-action-card-ratio {
    margin-top: calc(18 / var(--fs) * 1rem);
  }
  .p-action-card-ratio-txt {
    display: flex;
    justify-content: center;
    align-items: end;
    font-family: 'Krona One', sans-serif;
    font-size: calc(40 / var(--fs) * 1rem);
    color: var(--c-brand-500);
  }
  .p-action-card-ratio-txt__label {
    line-height: 1;
  }
  .p-action-card-ratio-txt__label--unit {
    font-size: calc(28 / 40 * 1em);
    line-height: 1;
  }
  .p-action-btn {
    margin-inline: auto;
    margin-top: calc(32 / var(--fs) * 1rem);
    font-feature-settings: "palt";
    .c-btn {
      --btn-txt-fs: 15;
    }
  }
}

/* --------------------------------------------------------------------------
  Action
-------------------------------------------------------------------------- */
#action {
  background: #F0F8F6;
}
@media all and (min-width: 768px),print {
  .p-action-intro {
    font-size: calc(16 / var(--fs) * var(--font-scale) * 1rem);
    line-height: 1.8;
  }
  .p-action-intro__lead {
  }
  .action-list__container {
    margin-top: calc(48 / var(--fs) * 1rem);
  }
  .action-list {
  }
  .action-list-item {
    & + & {
      margin-top: calc(40 / var(--fs) * 1rem);
    }
  }
  .action-card {
    background: var(--c-white);
  }
  .action-card--movie {
  }
  .action-card__inner {
    padding-inline: calc(80 / var(--fs) * 1rem);
  }
  .action-card__body {
    padding-block: calc(47 / var(--fs) * 1rem) calc(56 / var(--fs) * 1rem);
  }
  .action-card-heading {
    font-size: calc(16 / var(--fs) * var(--font-scale) * 1rem);
    font-weight: 700;
    line-height: 1.8;
    margin-bottom: calc(24 / var(--fs) * var(--font-scale) * 1rem);
  }
  .action-card-heading__label {
  }
  .action-movie-list {
    display: flex;
    flex-wrap: wrap;
    gap: calc(56 / var(--fs) * 1rem) calc(72 / 920 * 100%);
  }
  .action-movie-list-item {
    width: calc((100% - (72 / 920 * 100%)) / 2);
  }
  .action-movie-card {
    display: flex;
    align-items: center;
    gap: calc(24 / var(--fs) * 1rem);
  }
  .action-movie-card-thumb {
    width: calc(176 / 424 * 100%);
  }
  .action-card-detail {
    width: calc(224 / var(--fs) * 1rem);
    flex-shrink: 0;
  }
  .action-card-detail-txt {
    line-height: 1.8;
    margin-bottom: calc(16 / var(--fs) * var(--font-scale) * 1rem);
    font-size: calc(16 / var(--fs) * var(--font-scale) * 1rem);
  }
  .action-card-detail-txt__label {
  }
  .action-card-detail-btn {
    max-width: calc(224 / var(--fs) * var(--font-scale) * 1rem);
    width: 100%;
    .c-btn {
      --btn-min-height: 48;
    }
    .c-btn__body {
      padding-inline: calc(20 / var(--fs) * var(--font-scale) * 1rem) calc(48 / var(--fs) * var(--font-scale) * 1rem);
    }
    .c-btn-arrow__label::before, .c-btn-arrow__label::after {
      background-size: calc(28 / var(--fs) * var(--font-scale) * 1rem);
    }
  }
  .action-card--sugoroku {
    .action-card-detail {
      width: calc(324 / 920 * 100%);
    }
  }
  .sugoroku-content {
    display: flex;
    align-items: center;
    gap: calc(24 / var(--fs) * var(--font-scale) * 1rem);
  }
  .sugoroku-thumb-list {
    display: flex;
    align-items: center;
    gap: calc(24 / var(--fs) * var(--font-scale) * 1rem);
    width: calc(522 / 920 * 100%);
  }
  .sugoroku-thumb-list-item {
  }
  .sugoroku-thumb {
  }
  .action-card-detail-note {
    font-size: calc(12 / var(--fs) * var(--font-scale) * 1rem);
    line-height: 1.8;
    margin-top: calc(18 / var(--fs) * var(--font-scale) * 1rem);
  }
  .action-card-detail-note-txt {
    display: flex;
    align-items: start;
    &::before {
      content: "※";
    }
  }
  .action-card-detail-note-txt__label {
  }
  .p-action__btn {
    width: calc(320 / var(--fs) * var(--font-scale) * 1rem);
    margin-inline: auto;
    margin-top: calc(40 / var(--fs) * var(--font-scale) * 1rem);
  }
}

@media all and (min-width: 768px) and (max-width: 1025px) {
  .action-movie-list-item {
    width: 100%;
  }
  .action-movie-card {
    justify-content: center;
  }
  .action-card--sugoroku {
    .action-card-detail {
      flex-grow: 1;
    }
  }
}

@media all and (max-width: 767px) {
  .p-action-intro {
    font-size: calc(16 / var(--fs) * 1rem);
    line-height: 1.8;
  }
  .p-action-intro__lead {
  }
  .action-list__container {
    margin-top: calc(16 / var(--fs) * 1rem);
  }
  .action-list {
  }
  .action-list-item {
    & + & {
      margin-top: calc(24 / var(--fs) * 1rem);
    }
  }
  .action-card {
    background: var(--c-white);
  }
  .action-card--movie {
  }
  .action-card__inner {
    padding-inline: calc(24 / var(--fs) * 1rem);
  }
  .action-card__body {
    padding-block: calc(23 / var(--fs) * 1rem) calc(32 / var(--fs) * 1rem);
  }
  .action-card-heading {
    font-size: calc(16 / var(--fs) * 1rem);
    font-weight: 700;
    line-height: 1.8;
    margin-bottom: calc(24 / var(--fs) * 1rem);
  }
  .action-card-heading__label {
  }
  .action-movie-list {
  }
  .action-movie-list-item {
    & + & {
      margin-top: calc(32 / var(--fs) * 1rem);
    }
  }
  .action-movie-card {
  }
  .action-movie-card-thumb {
    width: calc(176 / var(--fs) * 1rem);
    margin-inline: auto;
  }
  .action-card-detail {
    margin-top: calc(16 / var(--fs) * 1rem);
  }
  .action-card-detail-txt {
    display: flex;
    justify-content: center;
    line-height: 1.8;
    margin-bottom: calc(16 / var(--fs) * 1rem);
    font-size: calc(16 / var(--fs) * 1rem);
  }
  .action-card-detail-txt__label {
  }
  .action-card-detail-btn {
    max-width: calc(224 / var(--fs) * 1rem);
    width: 100%;
    margin-inline: auto;
    .c-btn {
      --btn-min-height: 44;
    }
    .c-btn__body {
      padding-inline: calc(20 / var(--fs) * 1rem) calc(48 / var(--fs) * 1rem);
    }
    .c-btn-arrow__label::before, .c-btn-arrow__label::after {
      background-size: calc(28 / var(--fs) * 1rem);
    }
  }
  .action-card--sugoroku {
    .action-card-detail {
    }
  }
  .sugoroku-content {
  }
  .sugoroku-thumb-list {
  }
  .sugoroku-thumb-list-item {
    & + & {
      margin-top: calc(16 / var(--fs) * 1rem);
    }
  }
  .sugoroku-thumb {
  }
  .action-card-detail-note {
    font-size: calc(12 / var(--fs) * 1rem);
    line-height: 1.8;
    margin-top: calc(18 / var(--fs) * 1rem);
  }
  .action-card-detail-note-txt {
    display: flex;
    align-items: start;
    &::before {
      content: "※";
    }
  }
  .action-card-detail-note-txt__label {
  }
  .p-action__btn {
    width: calc(315 / var(--fs) * 1rem);
    margin-inline: auto;
    margin-top: calc(32 / var(--fs) * 1rem);
  }
}