@charset "UTF-8";

:root {
  --mv-transition-duration: 0.5s;
  --mv-translate-y: 15;

  --border-color: #666;
  --c-brand-green: #006537;
  --c-brand-green-dark: #004c2a;
  --c-bg-lineup: #fcf6eb;
}


/* --------------------------------------------------------------------------
ANIMATION
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  body {
    transform-origin: top center;
    animation: loading 1.5s;
  }
  @keyframes loading {
    0% {
      opacity: 0;
    }
    25% {
      opacity: 0;
    }
    100% {
      opacity: 1;
    }
  }
}

@keyframes mv-scroll-bob {
  0%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  50% {
    transform: translateX(-50%) translateY(-10px);
  }
}

/* --------------------------------------------------------------------------
CONTENTS
-------------------------------------------------------------------------- */
.main-container {
  letter-spacing: 0;
  font-feature-settings: "palt";
}

@media all and (min-width: 768px), print {
  .main-container {
    margin-bottom: calc(-95 / var(--page-font) * 1rem);
  }

  .bg-wrapper {
    position: relative;
    z-index: 1;
    padding-block-start: calc(136 / var(--page-font) * 1rem);
    padding-block-end: calc(115 / var(--page-font) * 1rem);
  }

  .bg-wrapper::before {
    content: "";
    position: absolute;
    z-index: -1;
    top: calc(-50 / var(--page-font) * 1rem);
    left: 0;
    right: 0;
    bottom: 0;
    background-image: url("../img/top/bg_about_01_pc.png");
    background-repeat: repeat-y;
    background-position: top center;
    background-size: 100% auto;
  }

  .bg-wrapper__cloud {
    position: absolute;
    z-index: -1;
    height: auto;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    opacity: .6;
    filter: drop-shadow(0 calc(25 / var(--page-font) * 1rem) calc(125 / var(--page-font) * 1rem) rgba(255, 255, 255, 1));
  }

  .bg-wrapper__cloud--01 {
    top: calc(-32 / var(--page-font) * 1rem);
    left: calc(40 / var(--page-font) * 1rem);
    width: calc(595 / var(--page-font) * 1rem);
    aspect-ratio: 595 / 295;
    background-image: url("../img/top/img_cloud_01_pc.png");
  }

  .bg-wrapper__cloud--02 {
    top: calc(1006 / var(--page-font) * 1rem);
    right: calc(-196 / var(--page-font) * 1rem);
    width: calc(682 / var(--page-font) * 1rem);
    aspect-ratio: 682 / 283;
    background-image: url("../img/top/img_cloud_02_pc.png");
  }

  .bg-wrapper__cloud--03 {
    top: calc(167 / var(--page-font) * 1rem);
    left: calc(-314 / var(--page-font) * 1rem);
    width: calc(608 / var(--page-font) * 1rem);
    aspect-ratio: 608 / 312;
    background-image: url("../img/top/img_cloud_03_pc.png");
  }

  .bg-wrapper__cloud--04 {
    top: calc(460 / var(--page-font) * 1rem);
    right: calc(-205 / var(--page-font) * 1rem);
    width: calc(536 / var(--page-font) * 1rem);
    aspect-ratio: 536 / 268;
    background-image: url("../img/top/img_cloud_04_pc.png");
  }

  .bg-wrapper__cloud--05 {
    top: calc(980 / var(--page-font) * 1rem);
    left: calc(-72 / var(--page-font) * 1rem);
    width: calc(608 / var(--page-font) * 1rem);
    aspect-ratio: 608 / 312;
    background-image: url("../img/top/img_cloud_05_pc.png");
  }

  .bg-wrapper__leaf {
    position: absolute;
    height: auto;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
  }

  .bg-wrapper__leaf--01 {
    top: calc(-136 / var(--page-font) * 1rem);
    left: calc(-114 / var(--page-font) * 1rem);
    width: calc(553 / var(--page-font) * 1rem);
    aspect-ratio: 553 / 500;
    background-image: url("../img/top/img_about_leaf_01_pc.png");
  }

  .bg-wrapper__leaf--02 {
    top: calc(-118 / var(--page-font) * 1rem);
    right: calc(-140 / var(--page-font) * 1rem);
    width: calc(642 / var(--page-font) * 1rem);
    aspect-ratio: 642 / 486;
    background-image: url("../img/top/img_about_leaf_02_pc.png");
  }

  .bg-wrapper__leaf--03 {
    bottom: calc(-131 / var(--page-font) * 1rem);
    right: calc(-103 / var(--page-font) * 1rem);
    width: calc(262 / var(--page-font) * 1rem);
    aspect-ratio: 262 / 230;
    background-image: url("../img/top/img_about_leaf_03_pc.png");
  }

  .bg-wrapper__leaf--04 {
    top: calc(-246 / var(--page-font) * 1rem);
    left: calc(-153 / var(--page-font) * 1rem);
    z-index: 2;
    width: calc(663 / var(--page-font) * 1rem);
    aspect-ratio: 663 / 443;
    background-image: url("../img/top/img_message_leaf_01_pc.png");
  }

  .bg-wrapper__leaf--05 {
    bottom: calc(-134 / var(--page-font) * 1rem);
    right: calc(-102 / var(--page-font) * 1rem);
    z-index: 2;
    width: calc(400 / var(--page-font) * 1rem);
    aspect-ratio: 400 / 325;
    background-image: url("../img/top/img_message_leaf_02_pc.png");
  }

  .l-section {
    position: relative;
    z-index: 0;
  }

  .l-section__in {
    padding-inline: calc(40 / var(--page-font) * 1rem);
    max-width: calc(1140 / var(--page-font) * 1rem);
    width: 100%;
    position: relative;
    margin: 0 auto;
  }
}

@media all and (max-width: 767px) {
  .main-container {
    margin-bottom: calc(-95 / 750 * 100vw);
  }

  .bg-wrapper {
    position: relative;
    background-image: url("../img/top/bg_about_01_sp.png");
    background-repeat: repeat-y;
    background-position: top center;
    background-size: 100% auto;
    padding-block-start: calc(108 / 750 * 100vw);
    padding-block-end: calc(110 / 750 * 100vw);
  }

  .bg-wrapper__cloud {
    display: none;
  }

  .bg-wrapper__leaf {
    position: absolute;
    height: auto;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
  }

  .bg-wrapper__leaf--01 {
    top: calc(-108 / 750 * 100vw);
    left: calc(-19 / 750 * 100vw);
    width: calc(386 / 750 * 100vw);
    aspect-ratio: 346 / 500;
    background-image: url("../img/top/img_about_leaf_01_sp.png");
  }

  .bg-wrapper__leaf--02 {
    top: calc(-128 / 750 * 100vw);
    right: 0;
    width: calc(512 / 750 * 100vw);
    aspect-ratio: 512 / 466;
    background-image: url("../img/top/img_about_leaf_02_sp.png");
  }

  .bg-wrapper__leaf--03 {
    bottom: calc(-114 / 750 * 100vw);
    right: 0;
    width: calc(212 / 750 * 100vw);
    aspect-ratio: 212 / 175;
    background-image: url("../img/top/img_about_leaf_03_sp.png");
  }

  .bg-wrapper__leaf--04 {
    top: calc(-171 / 750 * 100vw);
    left: calc(-48 / 750 * 100vw);
    z-index: 2;
    width: calc(519 / 750 * 100vw);
    aspect-ratio: 519 / 380;
    background-image: url("../img/top/img_message_leaf_01_sp.png");
  }

  .bg-wrapper__leaf--05 {
    bottom: calc(-104 / 750 * 100vw);
    right: calc(-46 / 750 * 100vw);
    z-index: 2;
    width: calc(280 / 750 * 100vw);
    aspect-ratio: 280 / 162;
    background-image: url("../img/top/img_message_leaf_02_sp.png");
  }

  .l-section {
    position: relative;
    z-index: 0;
  }

  .l-section__in {
    padding-inline: calc(47 / 750 * 100vw);
    width: 100%;
    position: relative;
    margin: 0 auto;
  }
}

/* --------------------------------------------------------------------------
  MV
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .mainvisual {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    background: url("../img/top/bg_mainvisual_pc.png") no-repeat center center;
    background-size: cover;
    aspect-ratio: 1366 / 530;
    container-type: inline-size;
  }
  .mainvisual__in {
    display: flex;
    justify-content: center;
    gap: calc(72 / 1366 * 100cqw);
    margin-block-end: calc(89 / 1366 * 100cqw);
    margin-inline-start: calc(127 / 1366 * 100cqw);
    opacity: 0;
    transform: translateY(calc(var(--mv-translate-y) / var(--page-font) * 1rem));
    transition: transform var(--mv-transition-duration) ease, opacity var(--mv-transition-duration) ease;
  }
  .mainvisual__in.is-visible {
    transform: translateY(0) !important;
    opacity: 1 !important;
  }
  .mainvisual__logo {
    width: calc(346 / 1366 * 100cqw);
  }
  .mainvisual__text {
    margin-block-start: calc(108 / 1366 * 100cqw);
    width: calc(487 / 1366 * 100cqw);
  }

  .mainvisual-scroll {
    position: absolute;
    bottom: calc(-56 / 1366 * 100cqw);
    left: calc(50% - calc(7 / 1366 * 100cqw));
    z-index: 2;
    transform: translateX(-50%);
    opacity: 0;
    transition: opacity var(--mv-transition-duration) ease;
    animation: mv-scroll-bob 1.6s ease-in-out infinite;
  }

  .mainvisual-scroll.is-visible {
    opacity: 1 !important;
  }

  .mainvisual-scroll-text {
    position: absolute;
    top: calc(43 / 1366 * 100cqw);
    right: calc(-34 / 1366 * 100cqw);
    transform: rotate(90deg);
    letter-spacing: 0.1em;
    font-size: calc(9 / 1366 * 100cqw);
    color: #828282;
  }

  .mainvisual-scroll__bar {
    position: relative;
    width: calc(20 / 1366 * 100cqw);
  }

  .mainvisual-scroll__bar svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .mv-arrow__line-wrap {
    position: absolute;
    top: calc(0.501 / 1366 * 100cqw);
    left: calc(16.798 / 1366 * 100cqw);
    width: calc(2 / 1366 * 100cqw);
    height: calc(138.495 / 1366 * 100cqw);
    overflow: hidden;
  }


  .mv-arrow__line-flow {
    display: none;
  }
}

@media all and (min-width: 768px) and (max-width: 1024px) {
  .mainvisual__in {
    margin: 0;
  }
}

@media all and (max-width: 767px) {
  .mainvisual {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    background: url("../img/top/bg_mainvisual_sp.png") no-repeat center center;
    background-size: cover;
    aspect-ratio: 750 / 800;
  }

  .mainvisual__in {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(64 / 750 * 100vw);
    margin-block-end: calc(115 / 750 * 100vw);
  }

  .mainvisual__logo {
    max-width: calc(346 / 750 * 100vw);
    width: 100%;
    transform: translateX(calc(-10 / 750 * 100vw));
  }

  .mainvisual__text {
    margin-block-start: 0;
    max-width: calc(487 / 750 * 100vw);
    width: 100%;
    transform: translateX(calc(10 / 750 * 100vw));
  }

  .mainvisual-scroll {
    position: absolute;
    bottom: calc(-48 / 750 * 100vw);
    left: calc(50% - calc(7 / 750 * 100vw));
    z-index: 1;
    transform: translateX(-50%);
    animation: mv-scroll-bob 1.6s ease-in-out infinite;
  }

  .mainvisual-scroll-text {
    position: absolute;
    top: calc(45 / 750 * 100vw);
    right: calc(-31 / 750 * 100vw);
    transform: rotate(90deg);
    letter-spacing: 0.1em;
    font-size: calc(9 / 750 * 100vw);
    color: #828282;
  }

  .mainvisual-scroll__bar {
    position: relative;
    width: calc(18 / 750 * 100vw);
  }

  .mainvisual-scroll__bar svg {
    display: block;
    width: 100%;
    height: auto;
  }

  .mv-arrow__line-wrap {
    position: absolute;
    top: 0.354%;
    left: 86.144%;
    width: 10.256%;
    height: 97.874%;
    overflow: hidden;
  }

  .mv-arrow__line-flow {
    display: none;
  }
}

/* --------------------------------------------------------------------------
  ABOUT
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .about-sec__lead {
    max-width: calc(458 / var(--page-font) * 1rem);
    width: 100%;
    margin-inline: auto;
  }

  .about-sec__title {
    position: relative;
    max-width: calc(382 / var(--page-font) * 1rem);
    width: 100%;
    margin-block-start: calc(122 / var(--page-font) * 1rem);
    margin-inline: auto;
  }

  .about-sec__title:before {
    top: calc(-23 / var(--page-font) * 1rem);
    left: calc(-2 / var(--page-font) * 1rem);
    transform: translateX(-100%);
    max-width: calc(94 / var(--page-font) * 1rem);
    aspect-ratio: 94 / 77;
    background-image: url("../img/top/img_title_deco_01.png");
  }

  .about-sec__description {
    margin-block-start: calc(37 / var(--page-font) * 1rem);
    text-align: center;
    line-height: calc(38/18);
    font-weight: 500;
    font-size: calc(18 / var(--page-font) * 1rem);
  }

  .about-sec__badge {
    display: flex;
    align-items: center;
    width: fit-content;
    min-height: calc(32 / var(--page-font) * 1rem);
    margin-inline: auto;
    margin-block-start: calc(32 / var(--page-font) * 1rem);
    padding-block: calc(5 / var(--page-font) * 1rem);
    padding-inline: calc(12 / var(--page-font) * 1rem);
    border: 1px solid var(--border-color);
    font-weight: 500;
    font-size: calc(14 / var(--page-font) * 1rem);
  }

  .about-sec__caption {
    margin-block-start: calc(11 / var(--page-font) * 1rem);
    text-align: center;
    font-weight: 500;
    line-height: calc(18 / 12);
    font-size: calc(12 / var(--page-font) * 1rem);
  }

  .about-sec__caption > .__strong {
    font-size: calc(14 / var(--page-font) * 1rem);
    color: var(--c-brand-green);
  }

  .about-sec__logo {
    max-width: calc(157 / var(--page-font) * 1rem);
    width: 100%;
    margin-block-start: calc(14 / var(--page-font) * 1rem);
    margin-inline: auto;
  }

  .about-sec__youtube {
    --youtube-offset-x: calc(13 / var(--page-font) * 1rem);
    --youtube-offset-y: calc(18 / var(--page-font) * 1rem);
    position: relative;
    width: 100%;
    max-width: calc(671 / var(--page-font) * 1rem + 13 / var(--page-font) * 1rem);
    margin-block-start: calc(57 / var(--page-font) * 1rem);
    margin-inline: auto;
    padding-right: var(--youtube-offset-x);
    padding-bottom: var(--youtube-offset-y);
  }

  .about-sec__youtube-bg {
    position: absolute;
    top: var(--youtube-offset-y);
    left: var(--youtube-offset-x);
    right: 0;
    bottom: 0;
    background: #fff;
    border-radius: calc(15 / var(--page-font) * 1rem);
    z-index: 0;
  }

  .about-sec__youtube iframe {
    position: relative;
    z-index: 1;
    display: block;
    aspect-ratio: 671 / 377;
    width: 100%;
    height: auto;
    border-radius: calc(15 / var(--page-font) * 1rem);
  }
}

@media all and (max-width: 767px) {
  .about-sec__lead {
    max-width: calc(458 / 750 * 100vw);
    width: 100%;
    margin-inline: auto;
  }

  .about-sec__title {
    position: relative;
    left: calc(-10 / 750 * 100vw);
    max-width: calc(487 / 750 * 100vw);
    width: 100%;
    margin-block-start: calc(137 / 750 * 100vw);
    margin-inline: auto;
  }

  .about-sec__title:before {
    top: calc(-14 / 750 * 100vw);
    left: calc(13 / 750 * 100vw);
    transform: translateX(-100%);
    max-width: calc(94 / 750 * 100vw);
    aspect-ratio: 94 / 77;
    background-image: url("../img/top/img_title_deco_01.png");
  }

  .about-sec__description {
    margin-block-start: calc(37 / 750 * 100vw);
    text-align: center;
    line-height: calc(58/28);
    font-weight: 500;
    font-size: calc(28 / 750 * 100vw);
  }

  .about-sec__badge {
    display: flex;
    align-items: center;
    width: fit-content;
    min-height: calc(40 / 750 * 100vw);
    margin-inline: auto;
    margin-block-start: calc(35 / 750 * 100vw);
    padding-block: calc(5 / 750 * 100vw);
    padding-inline: calc(25 / 750 * 100vw);
    border: 1px solid var(--border-color);
    font-weight: 500;
    font-size: calc(20 / 750 * 100vw);
  }

  .about-sec__caption {
    margin-block-start: calc(15 / 750 * 100vw);
    text-align: center;
    font-weight: 500;
    line-height: calc(27 / 20);
    font-size: calc(20 / 750 * 100vw);
  }

  .about-sec__caption > .__strong {
    font-size: calc(24 / 750 * 100vw);
    color: var(--c-brand-green);
  }

  .about-sec__logo {
    position: relative;
    left: calc(-10 / 750 * 100vw);
    max-width: calc(157 / 750 * 100vw);
    width: 100%;
    margin-block-start: calc(28 / 750 * 100vw);
    margin-inline: auto;
  }

  .about-sec__youtube {
    --youtube-offset-x: calc(13 / 750 * 100vw);
    --youtube-offset-y: calc(18 / 750 * 100vw);
    position: relative;
    left: calc(-14 / 750 * 100vw);
    width: 104%;
    margin-block-start: calc(33 / 750 * 100vw);
    margin-inline: auto;
    padding-right: var(--youtube-offset-x);
    padding-bottom: var(--youtube-offset-y);
  }

  .about-sec__youtube-bg {
    position: absolute;
    top: var(--youtube-offset-y);
    left: var(--youtube-offset-x);
    right: 0;
    bottom: 0;
    background: #fff;
    border-radius: calc(15 / 750 * 100vw);
    z-index: 0;
  }

  .about-sec__youtube iframe {
    position: relative;
    z-index: 1;
    display: block;
    aspect-ratio: 671 / 377;
    width: 100%;
    height: auto;
    border-radius: calc(15 / 750 * 100vw);
  }
}

/* --------------------------------------------------------------------------
  MESSAGE
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .message-sec {
    margin-block-start: calc(170 / var(--page-font) * 1rem);
  }

  .message-sec__title {
    position: relative;
    max-width: calc(514 / var(--page-font) * 1rem);
    width: 100%;
    margin-inline: auto;
  }

  .message-sec__title:before {
    top: calc(-20 / var(--page-font) * 1rem);
    left: 50%;
    transform: translateY(-100%) translateX(-50%);
    max-width: calc(109 / var(--page-font) * 1rem);
    aspect-ratio: 109 / 44;
    background-image: url("../img/top/img_title_deco_02.png");
  }

  .message-sec__lead {
    max-width: calc(717 / var(--page-font) * 1rem);
    width: 100%;
    height: auto;
    aspect-ratio: 717 / 46;
    margin-block-start: calc(45 / var(--page-font) * 1rem);
    margin-inline: auto;
  }

  .message-sec__description {
    margin-block-start: calc(31 / var(--page-font) * 1rem);
    text-align: center;
    font-weight: 500;
    line-height: calc(38 / 18);
    font-size: calc(18 / var(--page-font) * 1rem);
  }

  .message-block-outer {
    position: relative;
    margin-block-start: calc(71 / var(--page-font) * 1rem);
  }

  .message-block {
    position: relative;
    background-color: var(--c-white);
    border-radius: calc(25 / var(--page-font) * 1rem);
    box-shadow: 0 0 calc(7 / var(--page-font) * 1rem) rgba(0, 0, 0, 0.44);
  }

  .message-block__inner {
    padding-inline: calc(55 / var(--page-font) * 1rem);
  }

  .message-block__body {
    padding-block: calc(99 / var(--page-font) * 1rem) calc(77 / var(--page-font) * 1rem);
  }

  .message-block__title {
    max-width: calc(749 / var(--page-font) * 1rem);
    width: 100%;
    margin-inline: auto;
    transform: translateX(calc(15 / var(--page-font) * 1rem));
  }

  .message-block__text {
    margin-block-start: calc(35 / var(--page-font) * 1rem);
    text-align: center;
    line-height: calc(36 / 18);
    letter-spacing: 0.08em;
    font-weight: 500;
    font-size: calc(18 / var(--page-font) * 1rem);
  }

  .message-block__image {
    margin-block-start: calc(38 / var(--page-font) * 1rem);
    max-width: calc(585 / var(--page-font) * 1rem);
    width: 100%;
    height: auto;
    aspect-ratio: 585 / 374;
    margin-inline: auto;
    transform: translateX(calc(15 / var(--page-font) * 1rem));
    transform: translateX(4px);
  }
}

@media all and (max-width: 767px) {
  .message-sec {
    margin-block-start: calc(201 / 750 * 100vw);
  }

  .message-sec__title {
    position: relative;
    max-width: calc(656 / 750 * 100vw);
    width: 100%;
    margin-inline: auto;
  }

  .message-sec__title:before {
    top: calc(-18 / 750 * 100vw);
    left: calc(50% + calc(-2 / 750 * 100vw));
    transform: translateY(-100%) translateX(-50%);
    max-width: calc(109 / 750 * 100vw);
    aspect-ratio: 109 / 44;
    background-image: url("../img/top/img_title_deco_02.png");
  }

  .message-sec__lead {
    max-width: calc(607 / 750 * 100vw);
    width: 100%;
    height: auto;
    aspect-ratio: 607 / 127;
    margin-block-start: calc(45 / 750 * 100vw);
    margin-inline: auto;
  }

  .message-sec__description {
    margin-block-start: calc(36 / 750 * 100vw);
    font-weight: 500;
    line-height: calc(58 / 28);
    font-size: calc(28 / 750 * 100vw);
  }

  .message-block-outer {
    position: relative;
    margin-block-start: calc(73 / 750 * 100vw);
  }

  .message-block {
    background-color: var(--c-white);
    border-radius: calc(25 / 750 * 100vw);
    box-shadow: 0 0 calc(7 / 750 * 100vw) rgba(0, 0, 0, 0.44);
  }

  .message-block__inner {
    padding-inline: calc(50 / 750 * 100vw);
  }

  .message-block__body {
    padding-block: calc(84 / 750 * 100vw) calc(69 / 750 * 100vw);
  }

  .message-block__title {
    max-width: calc(555 / 750 * 100vw);
    width: 100%;
    margin-inline: auto;
  }

  .message-block__text {
    margin-block-start: calc(41 / 750 * 100vw);
    line-height: calc(58 / 28);
    font-weight: 500;
    font-size: calc(28 / 750 * 100vw);
  }

  .message-block__image {
    margin-block-start: calc(29 / 750 * 100vw);
    max-width: calc(555 / 750 * 100vw);
    width: 100%;
    height: auto;
    aspect-ratio: 555 / 453;
    margin-inline: auto;
    transform: translateX(calc(3 / 750 * 100vw));
  }
}


/* --------------------------------------------------------------------------
  TITLE DECO ICON
-------------------------------------------------------------------------- */
.about-sec__title:before,
.message-sec__title:before {
  content: "";
  position: absolute;
  display: block;
  width: 100%;
  height: auto;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: contain;
}


/* --------------------------------------------------------------------------
  BUTTON
-------------------------------------------------------------------------- */
a.c-btn {
  position: relative;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  background-color: var(--c-brand-green);
  border-radius: calc(infinity * 1px);
  font-weight: 500;
  color: var(--c-white);
  transition: background-color 0.3s ease;
}

a.c-btn:where(:any-link, :enabled, summary):focus-visible {
  background-color: var(--c-brand-green-dark);
}

@media (hover: hover) {
  a.c-btn:where(:any-link, :enabled, summary):hover {
    background-color: var(--c-brand-green-dark);
  }
}


/* --------------------------------------------------------------------------
  Line up
-------------------------------------------------------------------------- */
@media all and (min-width: 768px), print {
  .lineup-sec {
    background: url("../img/top/bg_lineup_01_pc.png") repeat-y top center;
    background-size: 100% auto;
    padding-block-start: calc(70 / var(--page-font) * 1rem);
    padding-block-end: calc(195 / var(--page-font) * 1rem);
  }

  .lineup-sec__title {
    position: relative;
    left: calc(6 / var(--page-font) * 1rem);
    max-width: calc(556 / var(--page-font) * 1rem);
    width: 100%;
    margin-inline: auto;
  }

  .lineup-sec__body {
    display: flex;
    flex-direction: column;
    gap: calc(16 / var(--page-font) * 1rem);
    margin-block-start: calc(53 / var(--page-font) * 1rem);
  }

  .product-group {
    background: url("../img/top/bg_lineup_02_pc.png") repeat top left;
    background-size: contain;
    border-radius: calc(25 / var(--page-font) * 1rem);
    box-shadow: 0 0 calc(7 / var(--page-font) * 1rem) rgba(0, 0, 0, 0.44);
  }

  .product-group:nth-of-type(2) {
    background: url("../img/top/bg_lineup_03_pc.png") repeat top center;
    background-size: contain;
  }

  .product-group__in {
    position: relative;
    margin-block-start: calc(31 / var(--page-font) * 1rem);
    margin-block-end: calc(21 / var(--page-font) * 1rem);
    margin-inline-start: calc(29 / var(--page-font) * 1rem);
    margin-inline-end: calc(31 / var(--page-font) * 1rem);
    padding-block-start: calc(39 / var(--page-font) * 1rem);
    padding-block-end: calc(48 / var(--page-font) * 1rem);
    padding-inline-start: calc(40 / var(--page-font) * 1rem);
    padding-inline-end: calc(32 / var(--page-font) * 1rem);
    border-radius: calc(25 / var(--page-font) * 1rem);
    border: 2px solid var(--c-brand-green);
  }

  .product-group:nth-of-type(2) .product-group__in {
    background-color: var(--c-white);
    margin-block-start: calc(43 / var(--page-font) * 1rem);
  }

  .product-group__head {
    position: absolute;
  }

  .product-group:nth-of-type(1) .product-group__head {
    position: absolute;
    top: calc(-11 / var(--page-font) * 1rem);
    left: calc(50% + calc(-53 / var(--page-font) * 1rem));
    transform: translateY(-50%) translateX(-50%);
    max-width: calc(311 / var(--page-font) * 1rem);
    width: 100%;
  }

  .product-group:nth-of-type(2) .product-group__head {
    position: absolute;
    top: calc(-4 / var(--page-font) * 1rem);
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    max-width: calc(463 / var(--page-font) * 1rem);
    width: 100%;
  }

  .product-set {
    display: grid;
    grid-template-columns: 1fr calc(492 / var(--page-font) * 1rem);
    gap: calc(20 / var(--page-font) * 1rem);
  }

  .product-list {
    display: flex;
    flex-direction: column;
    gap: calc(50 / var(--page-font) * 1rem);
    margin-block-start: calc(20 / var(--page-font) * 1rem);
  }

  .product-set--cheese .product-list {
    margin-block-start: calc(14 / var(--page-font) * 1rem);
    gap: calc(54 / var(--page-font) * 1rem);
  }

  .product-card {
    --thumb-w: 141;
    --name-w: 149;
    display: flex;
    align-items: flex-end;
    gap: calc(10 / var(--page-font) * 1rem);
  }

  .product-card--shred {
    --thumb-w: 141;
    --name-w: 149;
    margin-inline-start: calc(19 / var(--page-font) * 1rem);
  }

  .product-card--slice {
    --thumb-w: 164;
    --name-w: 134;
    margin-inline-start: calc(5 / var(--page-font) * 1rem);
  }

  .product-card--gurt {
    --thumb-w: 138;
    --name-w: 110;
    margin-inline-start: calc(28 / var(--page-font) * 1rem);
  }

  .product-card--kokusan-gurt {
    --thumb-w: 138;
    --name-w: 225;
    margin-inline-start: calc(28 / var(--page-font) * 1rem);
  }

  .product-card--soft-butter {
    --thumb-w: 155;
    --name-w: 202;
    margin-inline-start: calc(6 / var(--page-font) * 1rem);
  }

  .product-card__thumb {
    max-width: calc(var(--thumb-w) / var(--page-font) * 1rem);
    width: 100%;
  }

  .product-card__body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: calc(10 / var(--page-font) * 1rem);
  }

  .product-card__name {
    max-width: calc(var(--name-w) / var(--page-font) * 1rem);
    width: 100%;
  }

  .product-card--soft-butter .product-card__name {
    transform: translateX(calc(12 / var(--page-font) * 1rem));
  }

  a.product-card__btn {
    min-height: calc(43 / var(--page-font) * 1rem);
    padding-block: calc(5 / var(--page-font) * 1rem);
    padding-inline: calc(30 / var(--page-font) * 1rem);
    font-size: calc(14 / var(--page-font) * 1rem);
  }

  a.product-card__btn::after {
    content: "";
    position: absolute;
    top: calc(50% + calc(1 / var(--page-font) * 1rem));
    right: calc(15 / var(--page-font) * 1rem);
    transform: translateY(-50%);
    display: block;
    width: calc(5 / var(--page-font) * 1rem);
    height: calc(8 / var(--page-font) * 1rem);
    background-color: var(--c-white);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 8'%3E%3Cpath d='M0.75 0.75L4.25 4L0.75 7.25' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 8'%3E%3Cpath d='M0.75 0.75L4.25 4L0.75 7.25' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: transform 0.3s ease;
  }

  a.product-card__btn:where(:any-link, :enabled, summary):focus-visible::after {
    transform: translateY(-50%) translateX(calc(3 / var(--page-font) * 1rem));
  }

  @media (hover: hover) {
    a.product-card__btn:where(:any-link, :enabled, summary):hover::after {
      transform: translateY(-50%) translateX(calc(3 / var(--page-font) * 1rem));
    }
  }

  .product-info {
    --pad-t: 47;
    --pad-r: 40;
    --pad-b: 59;
    --pad-l: 40;
    --qr-bottom: 50;
    --qr-right: 44;
    --badge-w: 278;

    position: relative;
    background-color: var(--c-bg-lineup);
    padding-block: calc(var(--pad-t) / var(--page-font) * 1rem) calc(var(--pad-b) / var(--page-font) * 1rem);
    padding-inline: calc(var(--pad-l) / var(--page-font) * 1rem) calc(var(--pad-r) / var(--page-font) * 1rem);
    border-radius: calc(25 / var(--page-font) * 1rem);
  }

  .product-info--cheese {
    --pad-t: 47;
    --pad-r: 40;
    --pad-b: 59;
    --pad-l: 40;
    --qr-bottom: 44;
    --qr-right: 44;
    --badge-w: 278;
  }

  .product-info--gurt {
    --pad-t: 33;
    --pad-r: 40;
    --pad-b: 130;
    --pad-l: 40;
    --qr-bottom: 20;
    --qr-right: 44;
    --badge-w: 244;
  }

  .product-info--soft-butter {
    --pad-t: 39;
    --pad-r: 40;
    --pad-b: 31;
    --pad-l: 40;
    --qr-bottom: 36;
    --qr-right: 44;
    --badge-w: 243;
    margin-block-start: calc(10 / var(--page-font) * 1rem);
  }

  .product-info__badge {
    max-width: calc(var(--badge-w) / var(--page-font) * 1rem);
    width: 100%;
  }

  .product-info--cheese .product-info__badge {
    margin-inline-start: calc(2 / var(--page-font) * 1rem);
  }

  .product-info__text {
    margin-block-start: calc(22 / var(--page-font) * 1rem);
    line-height: calc(30 / 18);
    letter-spacing: 0.08em;
    font-weight: 500;
    font-size: calc(18 / var(--page-font) * 1rem);
  }

  .product-info--soft-butter .product-info__text {
    max-width: calc(281 / var(--page-font) * 1rem);
  }

  .product-info__note {
    display: grid;
    grid-template-columns: auto 1fr;
    max-width: calc(250 / var(--page-font) * 1rem);
    margin-block-start: calc(17 / var(--page-font) * 1rem);
    line-height: calc(14 / 10);
    letter-spacing: 0.08em;
    font-weight: 500;
    font-size: calc(10 / var(--page-font) * 1rem);
  }

  .product-info__note::before {
    content: "※";
  }

  .product-info__note + .product-info__note {
    margin-block-start: 0;
  }

  .product-info__qr {
    position: absolute;
    bottom: calc(var(--qr-bottom) / var(--page-font) * 1rem);
    right: calc(var(--qr-right) / var(--page-font) * 1rem);
    max-width: calc(108 / var(--page-font) * 1rem);
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  hr.product-group__divider {
    margin-block: calc(31 / var(--page-font) * 1rem) calc(37 / var(--page-font) * 1rem);
    border-top: calc(2 / var(--page-font) * 1rem) solid var(--c-brand-green);
    border-bottom: 0;
  }
}

@media all and (min-width: 768px) and (max-width: 900px) {
  .lineup-sec__body {
    --page-font: 22;
  }
}

@media all and (min-width: 900px) and (max-width: 1024px) {
  .lineup-sec__body {
    --page-font: 18.5;
  }
}

@media all and (max-width: 767px) {
  .lineup-sec {
    background: url("../img/top/bg_lineup_01_pc.png") repeat-y top center;
    background-size: 100% auto;
    padding-block-start: calc(88 / 750 * 100vw);
    padding-block-end: calc(140 / 750 * 100vw);
  }

  .lineup-sec__title {
    position: relative;
    left: calc(3 / 750 * 100vw);
    max-width: calc(361 / 750 * 100vw);
    width: 100%;
    margin-inline: auto;
  }

  .lineup-sec__body {
    display: flex;
    flex-direction: column;
    gap: calc(49 / 750 * 100vw);
    margin-block-start: calc(51 / 750 * 100vw);
  }

  .product-group {
    background-color: var(--c-white);
    border-radius: calc(25 / 750 * 100vw);
    box-shadow: 0 0 calc(5 / 750 * 100vw) rgba(0, 0, 0, 0.44);
  }

  .product-group__in {
    position: relative;
    margin-block: calc(36 / 750 * 100vw) calc(38 / 750 * 100vw);
    margin-inline: calc(30 / 750 * 100vw) calc(27 / 750 * 100vw);
    padding-block: calc(78 / 750 * 100vw) calc(31 / 750 * 100vw);
    padding-inline: calc(30 / 750 * 100vw);
    border-radius: calc(25 / 750 * 100vw);
    border: calc(1 / 750 * 100vw) solid var(--c-brand-green);
  }

  .product-group:nth-of-type(2) .product-group__in {
    margin-block: calc(42 / 750 * 100vw) calc(29 / 750 * 100vw);
    padding-block: calc(86 / 750 * 100vw) calc(39 / 750 * 100vw);
  }

  .product-group__head {
    position: absolute;
  }

  .product-group:nth-of-type(1) .product-group__head {
    position: absolute;
    top: calc(-7 / 750 * 100vw);
    left: calc(50% + calc(-11 / 750 * 100vw));
    transform: translateY(-50%) translateX(-50%);
    max-width: calc(411 / 750 * 100vw);
    width: 100%;
  }

  .product-group:nth-of-type(2) .product-group__head {
    position: absolute;
    top: calc(-16 / 750 * 100vw);
    left: 50%;
    transform: translateX(-50%);
    max-width: calc(441 / 750 * 100vw);
    width: 100%;
  }

  .product-set {
    display: grid;
    grid-template-columns: 1fr;
    gap: calc(69 / 750 * 100vw);
  }

  .product-set--gurt {
    gap: calc(45 / 750 * 100vw);
  }

  .product-set--soft-butter {
    gap: calc(50 / 750 * 100vw);
    margin-block-start: calc(102 / 750 * 100vw);
  }

  .product-list {
    display: flex;
    flex-direction: column;
    gap: calc(78 / 750 * 100vw);
  }

  .product-set--cheese .product-list{
    margin-inline-start: calc(20 / 750 * 100vw);
  }

  .product-set--gurt .product-list{
    gap: calc(75 / 750 * 100vw);
  }

  .product-card {
    --thumb-w: 173;
    --name-w: 211;
    display: flex;
    align-items: flex-end;
    gap: calc(10 / 750 * 100vw);
  }

  .product-card--shred {
    --thumb-w: 173;
    --name-w: 211;
    margin-inline-start: calc(20 / 750 * 100vw);
  }

  .product-card--slice {
    --thumb-w: 222;
    --name-w: 190;
  }

  .product-card--gurt {
    --thumb-w: 200;
    --name-w: 155;
    margin-inline-start: calc(5 / 750 * 100vw);
  }

  .product-card--kokusan-gurt {
    --thumb-w: 199;
    --name-w: 307;
    margin-inline-start: calc(6 / 750 * 100vw);
  }

  .product-card--soft-butter {
    --thumb-w: 189;
    --name-w: 286;
    margin-inline-start: calc(14 / 750 * 100vw);
  }

  .product-card__thumb {
    max-width: calc(var(--thumb-w) / 750 * 100vw);
    width: 100%;
  }

  .product-card--soft-butter .product-card__thumb {
    margin-block-start: calc(14 / 750 * 100vw);
  }

  .product-card__body {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: end;
    gap: calc(12 / 750 * 100vw);
  }

  .product-card__name {
    max-width: calc(var(--name-w) / 750 * 100vw);
    width: 100%;
  }

  a.product-card__btn {
    gap: calc(16 / 750 * 100vw);
    min-height: calc(58 / 750 * 100vw);
    padding-block: calc(5 / 750 * 100vw);
    padding-inline: calc(20 / 750 * 100vw);
    font-size: calc(22 / 750 * 100vw);
  }

  a.product-card__btn::after {
    content: "";
    display: block;
    width: calc(7 / 750 * 100vw);
    height: auto;
    aspect-ratio: 5 / 8;
    background-color: var(--c-white);
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 8'%3E%3Cpath d='M0.75 0.75L4.25 4L0.75 7.25' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 5 8'%3E%3Cpath d='M0.75 0.75L4.25 4L0.75 7.25' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
    transition: transform 0.3s ease;
  }

  a.product-card__btn:where(:any-link, :enabled, summary):focus-visible::after {
    transform: translateX(calc(3 / 750 * 100vw));
  }

  @media (hover: hover) {
    a.product-card__btn:where(:any-link, :enabled, summary):hover::after {
      transform: translateX(calc(3 / 750 * 100vw));
    }
  }

  .product-info {
    --badge-w: 417;

    position: relative;
    background-color: var(--c-bg-lineup);
    padding-block: calc(49 / 750 * 100vw) calc(40 / 750 * 100vw);
    padding-inline: calc(30 / 750 * 100vw) calc(40 / 750 * 100vw);
    border-radius: calc(25 / 750 * 100vw);
  }

  .product-info--cheese {
    --badge-w: 417;
  }

  .product-info--gurt {
    --badge-w: 367;
  }

  .product-info--soft-butter {
    --badge-w: 365;
  }

  .product-info__in {
    display: grid;
    grid-template-columns: 1fr calc(158 / 750 * 100vw);
    column-gap: calc(12 / 750 * 100vw);
    margin-block-start: calc(37 / 750 * 100vw);
  }

  .product-info--cheese .product-info__in{
    margin-block-start: calc(28 / 750 * 100vw);
  }

  .product-info--gurt .product-info__in{
    margin-block-start: calc(25 / 750 * 100vw);
  }

  .product-info--soft-butter .product-info__in{
    margin-block-start: calc(23 / 750 * 100vw);
  }

  .product-info__badge {
    max-width: calc(var(--badge-w) / 750 * 100vw);
    width: 100%;
  }

  .product-info__text {
    grid-column: 1;
    line-height: calc(38 / 24);
    letter-spacing: 0.08em;
    font-weight: 500;
    font-size: calc(24 / 750 * 100vw);
  }

  .product-info__note {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: auto 1fr;
    margin-block-start: calc(23 / 750 * 100vw);
    line-height: calc(24 / 20);
    letter-spacing: 0.08em;
    font-weight: 500;
    font-size: calc(20 / 750 * 100vw);
  }

  .product-info__note::before {
    content: "※";
  }

  .product-info__note + .product-info__note {
    margin-block-start: 0;
  }

  .product-info__qr {
    grid-column: 2;
    grid-row: 1;
    max-width: calc(158 / 750 * 100vw);
    width: 100%;
    aspect-ratio: 1 / 1;
  }

  .product-set--cheese .product-info__qr {
    margin-block-start: calc(13 / 750 * 100vw);
  }

  .product-set--gurt .product-info__qr {
    margin-block-start: calc(42 / 750 * 100vw);
  }

  .product-set--soft-butter .product-info__qr {
    margin-block-start: calc(28 / 750 * 100vw);
  }

  hr.product-group__divider {
    display: none;
  }
}