@font-face {
    font-family: "Local Noto Sans JP";
    src: local("Noto Sans JP");
}

/* ===========================
   変数
=========================== */
:root {
 
  /* Colors - Base */
  --color-primary: #fff100;
  --color-secondary: #fbc600;

  /* Colors - Base text */
  --color-text-primary: #333333;
  --color-text-blue: #0068B6;
  --color-text-white: #ffffff;
  
  /* Colors - Background */
  --color-back-primary: #fff57c;
  --color-back-secondary: #fffce0;
  --color-back-mv: #FFF000;
  --color-back-howto:#FEEEB2;



  /* Colors - accent */
  --color-accent-primary: #ec6c00;
  --color-accent-secondary : #e63d8f;
  
  
    /* Container */
  --min-viewport-width: 750;
  --max-viewport-width: 1348;
  --min-fluid-ratio: calc(1 / var(--min-viewport-width) * 100dvi);
  --max-fluid-ratio: calc(1 / var(--max-viewport-width) * 100dvi);

  /* ========================================
     Typography
     ======================================== */
  
  /* Font Families */
  --font-family-base: "Local Noto Sans JP", "Noto Sans JP", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic", "YuGothic", Meiryo, sans-serif;
  
  /* Font Sizes */
   --font-size-xs:   min(12px, calc(12 * var(--max-fluid-ratio)));
   --font-size-sm:   min(14px, calc(14 * var(--max-fluid-ratio)));
   --font-size-base: min(16px, calc(16 * var(--max-fluid-ratio)));
   --font-size-md:   min(18px, calc(18 * var(--max-fluid-ratio)));
   --font-size-lg:   min(20px, calc(20 * var(--max-fluid-ratio)));
   --font-size-xl:   min(24px, calc(24 * var(--max-fluid-ratio)));
   --font-size-2xl:  min(28px, calc(28 * var(--max-fluid-ratio)));
   --font-size-3xl:  min(32px, calc(32 * var(--max-fluid-ratio)));
   --font-size-4xl:  min(36px, calc(36 * var(--max-fluid-ratio)));
   --font-size-5xl:  min(40px, calc(40 * var(--max-fluid-ratio)));
   --font-size-6xl:  min(48px, calc(48 * var(--max-fluid-ratio)));

  /* Font Weights */
  --font-weight-light: 300;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --font-weight-bold: 700;
  --font-weight-extrabold: 800;
  --font-weight-black: 900;
  
  
  /* ========================================
     Components
     ======================================== */
  
  /* Border Radius */
  --radius-full: calc(1px / 0);
  /* ========================================
     icon
     ======================================== */ 
   --icon-chebron-bottm: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 38 38'%3E%3Cdefs%3E%3CclipPath id='a'%3E%3Crect width='38' height='38' fill='none'/%3E%3C/clipPath%3E%3C/defs%3E%3Cg clip-path='url(%23a)'%3E%3Cpath d='M6.61,8.827.435,2.652A1.5,1.5,0,0,1,0,1.544,1.49,1.49,0,0,1,1.544,0,1.5,1.5,0,0,1,2.652.435L9.935,7.719a1.394,1.394,0,0,1,.337.515,1.845,1.845,0,0,1,0,1.188,1.394,1.394,0,0,1-.337.515L2.652,17.219a1.5,1.5,0,0,1-1.108.435A1.568,1.568,0,0,1,.435,15Z' transform='translate(13.34 10.173)' fill='%23333'/%3E%3C/g%3E%3C/svg%3E");
    
}

#contents_block {
   font-family: var(--font-family-base);
   font-size: var(--font-size-base);
   font-weight: var(--font-weight-bold);
   color: var(--color-text-primary);
   overflow: hidden;
   /* reset */
   ruby {
      ruby-align: center;
   }
   rt {
      font-size: var(--font-size-xs);
      ruby-align: center;
   }

   *,*::before,*::after {
      box-sizing: border-box
   }

   * {
      margin: 0
   }

   ul,ol {
      padding: 0
   }

   body {
      -webkit-font-smoothing: antialiased
   }

   img,picture,video,canvas,svg {
      display: block;
      max-width: 100%
   }

   input,button,textarea,select {
      font: inherit
   }

   p,h1,h2,h3,h4,h5,h6 {
      overflow-wrap: break-word
   }

   p {
      text-wrap: pretty
   }

   #root,#__next {
      isolation: isolate
   }

   b {
      font-weight: var(--font-weight-extrabold);
   }

   em {
      font-style: normal
   }

   tbody {
      -webkit-text-size-adjust: 100%
   }

   img {
      max-width: 100%;
      height: auto;
      vertical-align: top;
   }

   .sp {
      display: none;
   }

   .visually-hidden {
      position: absolute;
      width: 1px;
      height: 1px;
      padding: 0;
      margin: -1px;
      overflow: hidden;
      clip: rect(0, 0, 0, 0);
      white-space: nowrap;
      border: 0;
   }
   /* ========================================
      ドットタイトル
   ======================================== */
   .title-with-dots {
      display: block grid;
      grid-template-columns: 1fr max-content 1fr;
      font-size: var(--font-size-6xl);
      color: var(--title-color); /* ← 外から注入 */
      column-gap: min(40px, calc(40 * var(--max-fluid-ratio)));
      align-items: center;
      font-weight: var(--font-weight-extrabold);

      &:before,
      &:after {
         --dot-size: min(6px, calc(6 * var(--max-fluid-ratio)));
         content: "";
         height: var(--dot-size);
         transform: translateY(min(3px, calc(3 * var(--max-fluid-ratio))));
         background: radial-gradient(
            circle,
            var(--title-color) calc(var(--dot-size) / 2),
            transparent calc(var(--dot-size) / 2)
         );
         background-size: calc(var(--dot-size) * 2) var(--dot-size);
      }
      rt {
         font-size: var(--font-size-md);
      }
   }
   .title-with-dots:has(ruby) {
      &:before,
      &:after {
         transform: translateY(min(12px, calc(12 * var(--max-fluid-ratio))));
      }
   }
   /* ========================================
      波区切り下
   ======================================== */
   .wave-after {
      position: relative;
      &:after {
         content: "";
         position: absolute;
         width: 100%;
         height: min(20px, calc(20 * var(--max-fluid-ratio)));
         bottom: -2px;
         left: 0;
         transform: scaleY(-1);
         background-color: var(--wave-color, #fff);
         mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='500' viewBox='0 0 1920 500'%3E%3Cpath d='M1920,0c-30,0-30,15.969-60.008,15.969S1829.989,0,1799.985,0s-30,15.969-60.005,15.969-30-15.969-60-15.969-30,15.969-60,15.969-30-15.969-60-15.969-30,15.969-60,15.969S1469.97,0,1439.97,0s-30,15.969-60,15.969-30-15.969-60-15.969-30,15.969-60,15.969-30-15.969-60-15.969-30,15.969-60,15.969-30-15.969-60-15.969-30,15.969-59.995,15.969S989.979,0,959.979,0s-30,15.969-60,15.969S869.98,0,839.98,0s-30,15.969-60,15.969S749.981,0,719.982,0s-30,15.969-60,15.969S629.984,0,599.984,0s-30,15.969-60,15.969S509.986,0,479.986,0s-30,15.969-60,15.969S389.99,0,359.991,0s-30,15.969-60,15.969S269.994,0,239.995,0s-30,15.969-60,15.969S149.995,0,120,0,90,15.969,60,15.969,30,0,0,0V500H1920Z' transform='translate(1920 500) rotate(180)'/%3E%3C/svg%3E");
         mask-repeat: repeat-x;
         mask-position: min(60px, calc(60 * var(--max-fluid-ratio))) bottom;
         mask-size: 100% auto;
      }
   }
   /* ========================================
      波区切り上
   ======================================== */
   .wave-before {
      position: relative;
      &:before {
         content: "";
         position: absolute;
         width: 100%;
         height: min(20px, calc(20 * var(--max-fluid-ratio)));
         top: -2px;
         left: 0;
         background-color: var(--wave-color, #fff);
         mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='500' viewBox='0 0 1920 500'%3E%3Cpath d='M1920,0c-30,0-30,15.969-60.008,15.969S1829.989,0,1799.985,0s-30,15.969-60.005,15.969-30-15.969-60-15.969-30,15.969-60,15.969-30-15.969-60-15.969-30,15.969-60,15.969S1469.97,0,1439.97,0s-30,15.969-60,15.969-30-15.969-60-15.969-30,15.969-60,15.969-30-15.969-60-15.969-30,15.969-60,15.969-30-15.969-60-15.969-30,15.969-59.995,15.969S989.979,0,959.979,0s-30,15.969-60,15.969S869.98,0,839.98,0s-30,15.969-60,15.969S749.981,0,719.982,0s-30,15.969-60,15.969S629.984,0,599.984,0s-30,15.969-60,15.969S509.986,0,479.986,0s-30,15.969-60,15.969S389.99,0,359.991,0s-30,15.969-60,15.969S269.994,0,239.995,0s-30,15.969-60,15.969S149.995,0,120,0,90,15.969,60,15.969,30,0,0,0V500H1920Z' transform='translate(1920 500) rotate(180)'/%3E%3C/svg%3E");
         mask-repeat: repeat-x;
         mask-position: left bottom;
         mask-size: 100% auto;
      }
   }
}

/* ========================================
   MV
======================================== */
#contents_block .mv {
   background-color: var(--color-back-mv);
   position: relative;
   &:before {
      content: "";
      display: block;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: min(137px, calc(137 * var(--max-fluid-ratio)));
      background-color: #fff;
   }
   .mv_inner {
      width: min(1280px, calc(1280 * var(--max-fluid-ratio)));
      margin-inline: auto;
      position: relative;
      padding-top: min(53px, calc(53 * var(--max-fluid-ratio)));
   }
   .mv_title {
      width: min(1070px, calc(1070 * var(--max-fluid-ratio)));
      margin-inline: auto;
      position: relative;
      z-index: 2;
   }
   .mv_koropaka {
      width: min(1179px, calc(1179 * var(--max-fluid-ratio)));
      margin-inline: auto;
      margin-top: max(calc(-29 * var(--max-fluid-ratio)), -29px);
      img {
         transform: translate(
            max(-1px, calc(-1 * var(--max-fluid-ratio)))
         );
      }
   }
   .mv_imgLeft {
      position: absolute;
      width: min(250px, calc(250 * var(--max-fluid-ratio)));
      top: min(55px, calc(55 * var(--max-fluid-ratio)));
      left: max(-120px, calc(-120 * var(--max-fluid-ratio)));
   }
   .mv_imgRight {
      width: min(269px, calc(269 * var(--max-fluid-ratio)));
      position: absolute;
      top: min(55px, calc(55 * var(--max-fluid-ratio)));
      right: max(-129px, calc(-129 * var(--max-fluid-ratio)));
   }
   .mv_link {
      width: min(200px, calc(200 * var(--max-fluid-ratio)));
      bottom: min(51px, calc(51 / 1920 * 100dvi));
      right: min(79px, calc(79 / 1920 * 100dvi));
      transition: filter .5s ease-in-out;
      position: absolute;
      z-index: 10;
      transition: opacity 0.3s ease;
   }
   .mv_link.is-fixed {
      position: fixed;
      animation: fadeIn2 0.3s ease;
   }
   .mv_link.is-return {
      animation: fadeIn 0.3s ease;
   }
   .mv_link.is-hidden {
      opacity: 0;
      pointer-events: none;
   }
   @media (hover: hover) {
      .mv_link:hover {
         filter: brightness(.9)
      }
   }
}

@keyframes fadeIn {
   from {
      opacity: 0;
      transform: translateY(10px);
   }
   to {
      opacity: 1;
      transform: translateY(0);
   }
}

@keyframes fadeIn2 {
   from {
      opacity: 0;
   }
   to {
      opacity: 1;
   }
}

#contents_block .cp_nav {
   width: 100%;
   display: block grid;
   grid-template-columns:
      min(295px, calc(295 * var(--max-fluid-ratio))) 
      min(180px, calc(180 * var(--max-fluid-ratio))) 
      min(270px, calc(270 * var(--max-fluid-ratio))) 
      min(268px, calc(268 * var(--max-fluid-ratio)));
   justify-content: center;
   align-items: baseline;
   background-color: var(--color-secondary);
   a {
      img {
         transition: opacity .5s ease-in-out;
      }
   }
   a:nth-child(1) {
      background: url(../images/nav01_bg.png) no-repeat center top / cover;
   }
   a:nth-child(2) {
      background: url(../images/nav02_bg.png) no-repeat center top / cover;
   }
   a:nth-child(3) {
      background: url(../images/nav03_bg.png) no-repeat center top / cover;
   }
   a:nth-child(4) {
      background: url(../images/nav04_bg.png) no-repeat center top / cover;
   }
   @media (hover: hover) {
      a:hover img {
         opacity: 0;
      }
   }
}

/* ========================================
   about
======================================== */
#contents_block .about {
   background: url(../images/about_bg.png) repeat-y center top / 100% auto;
   background-color: var(--color-back-primary);
   padding-top: min(120px, calc(120 * var(--max-fluid-ratio)));
   padding-bottom: min(122px, calc(122 * var(--max-fluid-ratio)));

   .about_inner {
      width: min(1280px, calc(1280 * var(--max-fluid-ratio)));
      margin-inline: auto;
   }
   .about_title {
      width: min(938px, calc(938 * var(--max-fluid-ratio)));
      margin-inline: auto;
   }
   .about-box {
      width: min(1248px, calc(1248 * var(--max-fluid-ratio)));
      margin-inline: auto;
      margin-top: min(56px, calc(56 * var(--max-fluid-ratio)));
      box-shadow: 
      0 0 0 min(16px, calc(16 * var(--max-fluid-ratio))) var(--color-secondary),
      0 0 0 min(24px, calc(24 * var(--max-fluid-ratio))) var(--color-text-blue);
      border-radius: min(24px, calc(24 * var(--max-fluid-ratio)));
      background-color: #ffffff;
      background-image:
      linear-gradient(#fef7d9 2px, transparent 2px),
      linear-gradient(90deg, #fef7d9 2px, transparent 2px);
      background-size: 21px 21px;
      background-position: 11px -2px;
      padding-top: min(67px, calc(67 * var(--max-fluid-ratio)));

      .about-box_title {
         font-size: var(--font-size-xl);
         b {
            display: block;
            font-size: var(--font-size-4xl);
            color: var(--color-text-blue);
            margin-top: min(4px, calc(4 * var(--max-fluid-ratio)));
         }
      }
      .about-box_text {
         width: fit-content;
         margin-inline: auto;
         margin-top: min(12px, calc(12 * var(--max-fluid-ratio)));
         font-size: var(--font-size-xl);
         
         display: block grid;
         row-gap: min(3px, calc(3 * var(--max-fluid-ratio)));
         background: url(../images/about_text-line.svg) no-repeat center bottom / 100% auto;
         padding-bottom: min(34px, calc(34 * var(--max-fluid-ratio)));
      }
      .about-box_img1 {
         width: min(810px, calc(810 * var(--max-fluid-ratio)));
         margin-inline: auto;
         margin-top: min(40px, calc(40 * var(--max-fluid-ratio)));
      }

      .about-box_bottom {
         background-color: #fffabd;
         border-bottom-left-radius: min(24px, calc(24 * var(--max-fluid-ratio)));
         border-bottom-right-radius: min(24px, calc(24 * var(--max-fluid-ratio)));
         position: relative;
         margin-top: min(78px, calc(78 * var(--max-fluid-ratio)));
         padding-top: min(110px, calc(110 * var(--max-fluid-ratio)));
      }

      .about-box_balloon {
         width: min(692px, calc(692 * var(--max-fluid-ratio)));
         margin-inline: auto;
         position: absolute;
         inset: max(-64px, calc(-64 * var(--max-fluid-ratio))) 0 0 0;
      }
      .about-box_img2 {
         width: min(832px, calc(832 * var(--max-fluid-ratio)));
         margin-inline: auto;
      }      
   }

   .about-product {
      margin-top: min(114px, calc(114 * var(--max-fluid-ratio)));
      .about-product_title {
         width: min(1246px, calc(1246 * var(--max-fluid-ratio)));
         margin-inline: auto;
      }
      .about-product_notes {
         font-size: var(--font-size-xl);
         
         margin-top: min(23px, calc(23 * var(--max-fluid-ratio)));
      }
      .about-product_img {
         margin-top: min(61px, calc(61 * var(--max-fluid-ratio)));
         display: block grid;
         row-gap: min(40px, calc(40 * var(--max-fluid-ratio)));
      }
   }
   .about-other {
      margin-top: min(117px, calc(117 * var(--max-fluid-ratio)));
      width: 100%;
      .about-other_title {
         --title-color: var(--color-text-blue);
      }
      .about-other_text {
         font-size: var(--font-size-xl);
         
         display: block grid;
         row-gap: min(16px, calc(16 * var(--max-fluid-ratio)));
         margin-top: min(44px, calc(44 * var(--max-fluid-ratio)));
         b {
            font-size: var(--font-size-4xl);
            color: var(--color-accent-secondary);
            margin-top: max(-12px, calc(-12 * var(--max-fluid-ratio)));
            display: block;
         }
      }
      .about-other_img {
         margin-inline: calc(50% - 50vi);
         margin-top: min(66px, calc(66 * var(--max-fluid-ratio)));
         img {
            width: min(1324px, calc(1324 * var(--max-fluid-ratio)));
            margin-inline: auto;
         }
      }
      .about-other-box {
         width: 100%;
         background-color: var(--color-back-secondary);
         border-radius: min(40px, calc(40 * var(--max-fluid-ratio)));
         padding-top: min(61px, calc(61 * var(--max-fluid-ratio)));
         padding-bottom: min(68px, calc(68 * var(--max-fluid-ratio)));
         margin-top: min(80px, calc(80 * var(--max-fluid-ratio)));
         border: min(12px, calc(12 * var(--max-fluid-ratio))) solid var(--color-accent-secondary);
         .about-other-box_text {
            font-size: var(--font-size-4xl);
            display: block grid;
            row-gap: min(12px, calc(12 * var(--max-fluid-ratio)));
            b {
               color: var(--color-accent-secondary);
            }
         }
         .about-other-box_img {
            width: min(1136px, calc(1136 * var(--max-fluid-ratio)));
            margin-inline: auto;
            margin-top: min(69px, calc(69 * var(--max-fluid-ratio)));
         }

         .about-other-box_sub {
            background-color: #fff;
            border: 1px solid var(--color-accent-primary);
            width: min(1000px, calc(1000 * var(--max-fluid-ratio)));
            border-radius: min(20px, calc(20 * var(--max-fluid-ratio)));
            margin-inline: auto;
            margin-top: min(80px, calc(80 * var(--max-fluid-ratio)));
            font-size: var(--font-size-xl);            
            text-align: left;
            display: block grid;
            grid-template-columns: 1fr min(334px, calc(334 * var(--max-fluid-ratio)));
            padding-top: min(43px, calc(43 * var(--max-fluid-ratio)));
            padding-bottom: min(41px, calc(41 * var(--max-fluid-ratio)));
            padding-inline: min(31px, calc(31 * var(--max-fluid-ratio)));
            line-height: calc(44 /24);
            p {
               word-break: keep-all;
               display: block grid;
               grid-template-columns: auto 1fr;
            }
            img {
               transform: translateX(max(-28px, calc(-28 * var(--max-fluid-ratio)))) translateY(max(3px, calc(3 * var(--max-fluid-ratio))));
            }
         }
      }
   }
}

/* ========================================
   product
======================================== */
#contents_block .product {
   padding-top: min(98px, calc(98 * var(--max-fluid-ratio)));
   padding-bottom: min(115px, calc(115 * var(--max-fluid-ratio)));
   &:after {
      --wave-color: #FEEEB2;
         mask-position: left bottom;
   }
   
   .product_inner {
      width: min(1280px, calc(1280 * var(--max-fluid-ratio)));
      margin-inline: auto;
      .product_title {
         width: min(347px, calc(347 * var(--max-fluid-ratio)));
         margin-inline: auto;
      }
      .product_img {
         display: block grid;
         margin-top: min(57px, calc(57 * var(--max-fluid-ratio)));
         grid-template-columns: min(643px, calc(643 * var(--max-fluid-ratio))) min(604px, calc(604 * var(--max-fluid-ratio)));
         column-gap: min(126px, calc(126 * var(--max-fluid-ratio)));
         transform: translateX(max(-65px, calc(-65 * var(--max-fluid-ratio))));
      }
      .product-bokujo {
         position: relative;
         &:after {
            content: "";
            display: block;
            top: max(-11px, calc(-11 * var(--max-fluid-ratio)));
            right: max(-66px, calc(-66 * var(--max-fluid-ratio)));
            position: absolute;
            --dot-size: min(8px, calc(8 * var(--max-fluid-ratio)));
            --dot-gap: min(12px, calc(12 * var(--max-fluid-ratio)));

            width: var(--dot-size);
            height: min(505px, calc(505 * var(--max-fluid-ratio)));
            background: radial-gradient(
               circle,
               var(--color-accent-primary) calc(var(--dot-size) / 2),
               transparent calc(var(--dot-size) / 2)
            );
            background-size: var(--dot-size) calc(var(--dot-size) + var(--dot-gap));
         }
      }
      .product-panapp {
         margin-top: min(12px, calc(12 * var(--max-fluid-ratio)));
      }
   }
}
/* ========================================
   howto
======================================== */
#contents_block .howto {
   background-image: url(../images/howto_bg.png);
   background-repeat: no-repeat;
   background-size: min(1664px, calc(1664 * var(--max-fluid-ratio))) auto;
   background-position: center min(65px, calc(65 * var(--max-fluid-ratio)));
   background-color: var(--color-back-howto);
   padding-top: min(82px, calc(82 * var(--max-fluid-ratio)));
   padding-bottom: min(102px, calc(102 * var(--max-fluid-ratio)));
   .howto_inner {
      width: min(1280px, calc(1280 * var(--max-fluid-ratio)));
      margin-inline: auto;      
   }
   .howto_title {
      width: min(703px, calc(703 * var(--max-fluid-ratio)));
      margin-inline: auto;
   }
   .howto_text {
      font-size: var(--font-size-xl);
      line-height: calc(40 / 24);
   }
   .howto-top {
      .howto_text {
         margin-top: min(15px, calc(15 * var(--max-fluid-ratio)));
      }
   }
   .howto_step {
      margin-top: min(49px, calc(49 * var(--max-fluid-ratio)));
   }
   .howto-help {
      margin-top: min(55px, calc(55 * var(--max-fluid-ratio)));
      display: block grid;
      row-gap: min(80px, calc(80 * var(--max-fluid-ratio)));
      .howto-help_title {
         width: min(950px, calc(950 * var(--max-fluid-ratio)));
         margin-inline: auto;
      }
      .howto-help_img {
         width: min(1000px, calc(1000 * var(--max-fluid-ratio)));
         margin-inline: auto;
         margin-top: max(-25px, calc(-25 * var(--max-fluid-ratio)));
         img {
            transform: translateX(min(25px, calc(25 * var(--max-fluid-ratio))));
         }
      }
      .howto-help_subtitle {
         --title-color: var(--color-text-blue);
      }
      .howto_text {
         margin-top: min(34px, calc(34 * var(--max-fluid-ratio)));
      }
      .howto_btn {
         display: block;
         width: min(600px, calc(600 * var(--max-fluid-ratio)));
         margin-inline: auto;
         margin-top: min(49px, calc(49 * var(--max-fluid-ratio)));
         transition: filter .5s ease-in-out;
      }
      .howto_thum {
         display: block;
         width: min(992px, calc(992 * var(--max-fluid-ratio)));
         height: min(572px, calc(572 * var(--max-fluid-ratio)));
         margin-inline: auto;
         margin-top: min(49px, calc(49 * var(--max-fluid-ratio)));
         iframe {
            border: none;
            width: 100%;
            height: 100%;
         }
      }
      @media (hover: hover) {
         .howto_btn:hover {
            filter: brightness(.9)
         }
      }
      
   }
}

#contents_block .hoby {
   background: repeating-linear-gradient(
   to right,
   #ffe900  0px,
   #ffe900 min(25px, calc(25 * var(--max-fluid-ratio))),
   #fff000 min(25px, calc(25 * var(--max-fluid-ratio))),
   #fff000 min(45px, calc(45 * var(--max-fluid-ratio)))
   );
   padding-top: min(138px, calc(138 * var(--max-fluid-ratio)));
   padding-bottom: min(120px, calc(120 * var(--max-fluid-ratio)));
   &:before {
      --wave-color: #FEEEB2;
   }
   .hoby_inner {
      width: min(1280px, calc(1280 * var(--max-fluid-ratio)));
      margin-inline: auto;
   }
   .hoby_title {
      width: min(702px, calc(702 * var(--max-fluid-ratio)));
      margin-inline: auto;
   }
   .hoby_text {
      font-size: var(--font-size-xl);
      line-height: calc(40 / 24);
      margin-top: min(16px, calc(16 * var(--max-fluid-ratio)));
   }
   .hoby_thum {
      margin-top: min(49px, calc(49 * var(--max-fluid-ratio)));
      height: min(572px, calc(572 * var(--max-fluid-ratio)));
      display: block;
      width: min(992px, calc(992 * var(--max-fluid-ratio)));
      margin-inline: auto;
      iframe {
         border: none;
         width: 100%;
         height: 100%;
      }
   }

   .hoby-ch {
      background-color: var(--color-back-secondary);
      width: 100%;
      border-radius: min(40px, calc(40 * var(--max-fluid-ratio)));
      padding-top: min(74px, calc(74 * var(--max-fluid-ratio)));
      padding-bottom: min(74px, calc(74 * var(--max-fluid-ratio)));
      padding-left: min(124px, calc(124 * var(--max-fluid-ratio)));
      margin-top: min(81px, calc(81 * var(--max-fluid-ratio)));
      display: block grid;
      text-align: left;
      grid-template-columns: min(238px, calc(238 * var(--max-fluid-ratio))) 1fr;
      column-gap: min(64px, calc(64 * var(--max-fluid-ratio)));
      align-items: center;
      border: min(6px , calc(6 * var(--max-fluid-ratio))) solid #fff;
      .hoby-ch_text {
         display: block grid;
         row-gap: min(39px, calc(39 * var(--max-fluid-ratio)));
         dt {
            font-size: var(--font-size-4xl);
            font-weight: var(--font-weight-extrabold);
         }
         dd {
            font-size: var(--font-size-xl);
            line-height: calc(38 /24);

         }
      }
   }
}


/* ========================================
   systems / terms
======================================== */
#contents_block .systems {
   font-size: var(--font-size-xl);
   
   line-height: calc(44 / 24);
   background-color: #fff;
   padding-top: min(74px, calc(74 * var(--max-fluid-ratio)));
   padding-bottom: min(81px, calc(81 * var(--max-fluid-ratio)));
}

#contents_block .terms {
   background-color: var(--color-back-primary);
   padding-top: min(96px, calc(96 * var(--max-fluid-ratio)));
   padding-bottom: min(168px, calc(168 * var(--max-fluid-ratio)));
   .terms_inner {
      background-color: #fff;
      border-radius: min(40px, calc(40 * var(--max-fluid-ratio)));
      width: min(992px, calc(992 * var(--max-fluid-ratio)));
      margin-inline: auto;
      padding-top: min(75px, calc(75 * var(--max-fluid-ratio)));
      padding-bottom: min(66px, calc(66 * var(--max-fluid-ratio)));
      padding-inline: min(64px, calc(64 * var(--max-fluid-ratio)));
      display: block grid;
      row-gap: min(51px, calc(51 * var(--max-fluid-ratio)));
   }
   .terms_title {
      font-size: var(--font-size-6xl);
      color: var(--color-text-blue);
      font-weight: var(--font-weight-extrabold);
   }
   .terms_list {
      list-style-type: none;
      text-align: left;
      display: block grid;
      row-gap: 0.5rem;
      li {
         line-height: calc(24 / 16);
         font-weight: var(--font-weight-medium);
      }
   }
}

@media (max-width: 1280px) {
   #contents_block .mv {
      .mv_link {
         bottom: min(30px, calc(30 * var(--max-fluid-ratio)));
         right: min(20px, calc(20 * var(--max-fluid-ratio)));
      }
   }
}

@media (max-width: 768px) {
   :root {
   /* Font Sizes */
      --font-size-xs:   calc(20 * var(--min-fluid-ratio));
      --font-size-md:   calc(28 * var(--min-fluid-ratio));
      --font-size-xl:   calc(32 * var(--min-fluid-ratio));
      --font-size-4xl:  calc(40 * var(--min-fluid-ratio));
   }

   #contents_block {
      font-size: var(--font-size-base);

      img {
         width: 100%;
      }

      .sp {
         display: inline;
      }

      rt {
         transform: translateY(calc(8 * var(--min-fluid-ratio)));
         line-height: 100% !important;
      }
      .nobr {
         white-space: nowrap;
      }
      /* ========================================
         ドットタイトル
      ======================================== */
      .title-with-dots {
         font-size: var(--font-size-4xl);
         column-gap: calc(20 * var(--min-fluid-ratio));
         &:before,
         &:after {
            --dot-size: calc(6 * var(--min-fluid-ratio));
         }
         rt {
            font-size: var(--font-size-xs);
         }
      }
      .title-with-dots:has(ruby) {
         &:before,
         &:after {
            transform: translateY(calc(12 * var(--min-fluid-ratio)));
         }
      }
      /* ========================================
         波区切り下
      ======================================== */
      .wave-after {
         &:after {
            height: calc(20 * var(--min-fluid-ratio));

            /* 波形はmask-imageで共通化 */
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='750' height='126' viewBox='0 0 750 126'%3E%3Cpath d='M0,0C13.392,0,13.392,8,26.784,8s13.39-8,26.78-8S66.955,8,80.346,8s13.392-8,26.783-8,13.39,8,26.781,8S147.3,0,160.693,0s13.393,8,26.786,8,13.391-8,26.783-8,13.392,8,26.783,8,13.391-8,26.783-8,13.392,8,26.784,8S308,0,321.4,0s13.394,8,26.788,8,13.392-8,26.785-8,13.393,8,26.786,8,13.393-8,26.786-8,13.393,8,26.786,8,13.393-8,26.786-8S495.507,8,508.9,8s13.391-8,26.783-8,13.392,8,26.785,8,13.393-8,26.786-8,13.394,8,26.789,8,13.394-8,26.789-8,13.4,8,26.789,8,13.4-8,26.791-8,13.4,8,26.794,8S736.6,0,750,0V126H0Z' transform='translate(750 126) rotate(180)'/%3E%3C/svg%3E");
            mask-position: calc(24 * var(--min-fluid-ratio)) bottom;
         }
      }
      /* ========================================
         波区切り上
      ======================================== */
      .wave-before {
         position: relative;
         &:before {
            height: calc(20 * var(--min-fluid-ratio));

            /* 色はこれだけ変えればOK */
            background-color: var(--wave-color, #fff);

            /* 波形はmask-imageで共通化 */
            mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='750' height='126' viewBox='0 0 750 126'%3E%3Cpath d='M0,0C13.392,0,13.392,8,26.784,8s13.39-8,26.78-8S66.955,8,80.346,8s13.392-8,26.783-8,13.39,8,26.781,8S147.3,0,160.693,0s13.393,8,26.786,8,13.391-8,26.783-8,13.392,8,26.783,8,13.391-8,26.783-8,13.392,8,26.784,8S308,0,321.4,0s13.394,8,26.788,8,13.392-8,26.785-8,13.393,8,26.786,8,13.393-8,26.786-8,13.393,8,26.786,8,13.393-8,26.786-8S495.507,8,508.9,8s13.391-8,26.783-8,13.392,8,26.785,8,13.393-8,26.786-8,13.394,8,26.789,8,13.394-8,26.789-8,13.4,8,26.789,8,13.4-8,26.791-8,13.4,8,26.794,8S736.6,0,750,0V126H0Z' transform='translate(750 126) rotate(180)'/%3E%3C/svg%3E");
         }
      }
   }

   /* ========================================
      MV
   ======================================== */
   #contents_block .mv {
      &:before {
         height: calc(96 * var(--min-fluid-ratio));
      }
      .mv_inner {
         width: 100%;
         padding-top: calc(34 * var(--min-fluid-ratio));
      }
      .mv_title {
         width: calc(670 * var(--min-fluid-ratio));
      }
      .mv_koropaka {
         width: 100%;
         margin-top: calc(1 * var(--min-fluid-ratio));
         img {
            transform: translate(0);
         }
      }
      .mv_imgLeft {
         width: calc(172 * var(--min-fluid-ratio));
         top: calc(52 * var(--min-fluid-ratio));
         left: calc(12 * var(--min-fluid-ratio));
      }
      .mv_imgRight {
         width: calc(169 * var(--min-fluid-ratio));
         top: calc(53 * var(--min-fluid-ratio));
         right: calc(14 * var(--min-fluid-ratio));
      }
      .mv_link {
         width: calc(166 * var(--min-fluid-ratio));
         bottom: calc(37 * var(--min-fluid-ratio));
         right: calc(37 * var(--min-fluid-ratio));
      }
   }

   #contents_block .cp_nav {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
      position: relative;
      &:before {
         content: "";
         display: block;
         position: absolute;
         inset: 0;
         margin-inline: auto;
         background-color: #333;
         width: 1px;
         height: 100%;
      }
      &:after {
         --dot-size: calc(4 * var(--min-fluid-ratio));
         content: "";
         height: var(--dot-size);
         transform: translateY(min(3px, calc(3 * var(--max-fluid-ratio))));
         background: radial-gradient(
            circle,
            #333 calc(var(--dot-size) / 2),
            transparent calc(var(--dot-size) / 2)
         );
         background-size: calc(var(--dot-size) * 2) var(--dot-size);
         display: block;
         width: 100%;
         position: absolute;
         inset: 0 0 0 0;
         pointer-events: none;
         margin-block: auto;
      }
      a {
         width: 50%;
         background: none !important;
      }
      @media (hover: hover) {
         a:hover img {
            opacity: 1;
         }
      }
   }

   /* ========================================
      about
   ======================================== */
   #contents_block .about {
      background: url(../images/sp/about_bg.png) repeat-y center top / 100% auto;
      background-color: var(--color-back-primary);
      padding-top: calc(100 * var(--min-fluid-ratio));
      padding-bottom: calc(129 * var(--min-fluid-ratio));

      .about_inner {
         width: calc(670 * var(--min-fluid-ratio));
      }
      .about_title {
         width: 100%;
      }
      .about-box {
         width: 100%;
         margin-top: calc(32 * var(--min-fluid-ratio));
         border: calc(8 * var(--min-fluid-ratio)) solid var(--color-text-blue);
         box-shadow: none;
         border-radius: calc(46 * var(--min-fluid-ratio));
         background-image:
            linear-gradient(#fef7d9 calc(2 * var(--min-fluid-ratio)), transparent calc(2 * var(--min-fluid-ratio))),
            linear-gradient(90deg, #fef7d9 calc(2 * var(--min-fluid-ratio)), transparent calc(2 * var(--min-fluid-ratio)));
            background-size: calc(22 * var(--min-fluid-ratio)) calc(21 * var(--min-fluid-ratio));
            background-position: calc(5 * var(--min-fluid-ratio)) calc(13 * var(--min-fluid-ratio));
            padding-top: 0;

         .about-box_sp-border {
            border: calc(16 * var(--min-fluid-ratio)) solid var(--color-secondary);
            padding-top: calc(46 * var(--min-fluid-ratio));
            border-radius: calc(38 * var(--min-fluid-ratio));
         }

         .about-box_title {
            b {
               margin-top: calc(15 * var(--min-fluid-ratio));
               line-height: calc(62 / 40);
            }
         }
         .about-box_text {
            margin-top: calc(1 * var(--min-fluid-ratio));
            row-gap: calc(6 * var(--min-fluid-ratio));
            background: none;
            padding-bottom: 0;
            line-height: calc(56 / 32);
            p:last-child {
               line-height: calc(60 / 32);               
            }
            span {
               width: fit-content;
               display: block;
               background: url(../images/sp/about_text-line.svg) repeat-x left bottom / auto calc(9 * var(--min-fluid-ratio));
               margin-inline: auto;
            }
            .nobr {
               background: none;
               width: auto;
               display: inline;
               margin-inline: 0;
            }
         }
         .about-box_img1 {
            width: calc(580 * var(--min-fluid-ratio));
            margin-top: 0;
            img {
               transform: translateX(calc(10 * var(--min-fluid-ratio)));
            }
         }

         .about-box_bottom {
            border-bottom-left-radius: calc(32 * var(--min-fluid-ratio));
            border-bottom-right-radius: calc(32 * var(--min-fluid-ratio));
            margin-top: calc(53 * var(--min-fluid-ratio));
            padding-top: calc(122 * var(--min-fluid-ratio));
            padding-bottom: calc(40 * var(--min-fluid-ratio));
         }

         .about-box_balloon {
            width: calc(580 * var(--min-fluid-ratio));
            inset: calc(-52 * var(--min-fluid-ratio)) 0 0 0;
         }
         .about-box_img2 {
            width: calc(577 * var(--min-fluid-ratio));
            img {
               transform: translateX(calc(-2 * var(--min-fluid-ratio)));
            }
         }      
      }

      .about-product {
         margin-top: calc(107  * var(--min-fluid-ratio));
         .about-product_title {
            width: calc(627 * var(--min-fluid-ratio));
         }
         .about-product_notes {
            margin-top: calc(15 * var(--min-fluid-ratio));
            line-height: calc(48 / 32);
         }
         .about-product_img {
            margin-top: calc(35 * var(--min-fluid-ratio));
            row-gap: calc(40 * var(--min-fluid-ratio));
         }
      }
      .about-other {
         margin-top: calc(99 * var(--min-fluid-ratio));
         
         .about-other_text {
            font-size: var(--font-size-xl);
            row-gap: 0;
            margin-top: calc(42 * var(--min-fluid-ratio));
            line-height: calc(56 / 32);
            b {
               font-size: var(--font-size-4xl);
               margin-top: calc(4 * var(--min-fluid-ratio));
               line-height: calc(60 / 42);
            }
         }
         .about-other_img {
            margin-top: calc(15 * var(--min-fluid-ratio));
            img {
               width: calc(735 * var(--min-fluid-ratio));
               transform: translateX(calc(-1 * var(--min-fluid-ratio)));
            }
         }
         .about-other-box {
            border-radius: calc(40 * var(--min-fluid-ratio));
            padding-top: calc(38 * var(--min-fluid-ratio));
            padding-bottom: calc(52 * var(--min-fluid-ratio));
            margin-top: calc(55 *  var(--min-fluid-ratio));
            border-width: calc(12 * var(--min-fluid-ratio));
            .about-other-box_text {
               row-gap: 0;
               line-height: calc(62 / 40);
               p:last-child {
                  margin-top: calc(-5 * var(--min-fluid-ratio));
               }
            }
            .about-other-box_img {
               width: calc(612 * var(--min-fluid-ratio));
               margin-top: calc(17 * var(--min-fluid-ratio));
            }

            .about-other-box_sub {
               border-width: calc(2 * var(--min-fluid-ratio));
               width: calc(570 * var(--min-fluid-ratio));
               border-radius: calc(20 * var(--min-fluid-ratio));
               margin-top: calc(56 * var(--min-fluid-ratio));
               font-size: var(--font-size-md);            
               grid-template-columns: 1fr;
               padding-top: calc(34 * var(--min-fluid-ratio));
               padding-bottom: calc(38 * var(--min-fluid-ratio));
               padding-inline: calc(30 * var(--min-fluid-ratio));
               line-height: calc(48 / 28);
               row-gap: calc(16 * var(--min-fluid-ratio));
               p {
                  word-break: break-all;
                  br {
                     display: none;
                  }
               }
               img {
                  width: calc(334 * var(--min-fluid-ratio));
                  margin-inline: auto;
                  transform: translateX(0);
               }
            }
         }
      }
   }

   /* ========================================
      product
   ======================================== */
   #contents_block .product {
      padding-top: calc(48 * var(--min-fluid-ratio));
      padding-bottom: calc(136 * var(--min-fluid-ratio));
      &:after {
         --wave-color: #FEEEB2;
            mask-position: calc(50 * var(--min-fluid-ratio)) bottom;
      }      
      .product_inner {
         width: calc(670  * var(--min-fluid-ratio));
         .product_title {
            width: calc(277 * var(--min-fluid-ratio));
         }
         .product_img {
            margin-top: calc(51 * var(--min-fluid-ratio));
            grid-template-columns: 1fr;
            column-gap: 0;
            transform: translateX(0);
            row-gap: calc(80 * var(--min-fluid-ratio));
         }
         .product-bokujo {
            width: calc(622 * var(--min-fluid-ratio));
            margin-inline: auto;
            img {
               transform: translateX(calc(-22 * var(--min-fluid-ratio)));
            }
            &:after {
               content: none;
            }
         }
         .product-panapp {
            width: calc(600 * var(--min-fluid-ratio));
            margin-inline: auto;
            margin-top: 0;
            img {
               transform: translateX(calc(-12 * var(--min-fluid-ratio)));
            }
         }
      }
   }
   /* ========================================
      howto
   ======================================== */
   #contents_block .howto {
      background-image: url(../images/sp/howto_bg.png);
      background-size: 100% auto;
      background-position: center calc(154 * var(--min-fluid-ratio));
      padding-top: calc(39 * var(--min-fluid-ratio));
      padding-bottom: calc(102 * var(--min-fluid-ratio));
      .howto_inner {
         width: calc(670 * var(--min-fluid-ratio));
      }
      .howto_title {
         width: calc(547 * var(--min-fluid-ratio));
      }
      .howto_text {
         line-height: calc(56 / 32);
      }
      .howto-top {
         .howto_text {
            margin-top: calc(26 * var(--min-fluid-ratio));
         }
      }
      .howto_step {
         margin-top: calc(27 * var(--min-fluid-ratio));
      }
      .howto-help {
         margin-top: calc(45 *  var(--min-fluid-ratio));
         row-gap: calc(36 * var(--min-fluid-ratio));
         .howto-help_title {
            width: calc(600 * var(--min-fluid-ratio));
            img {
               transform: translateX(0);
            }
         }
         .howto-help_img {
            width: calc(631 * var(--min-fluid-ratio));
            margin-top: 0;            
            img {
               transform: translateX(0);
            }
         }
         .howto_text {
            margin-top: calc(25 * var(--min-fluid-ratio));
         }
         .howto_btn {
            width: calc(600 * var(--min-fluid-ratio));
            margin-top: calc(32 * var(--min-fluid-ratio));
         }
         .howto_thum {
            width: calc(670 * var(--min-fluid-ratio));
            height: calc(391 * var(--min-fluid-ratio));
            margin-top: calc(32 * var(--min-fluid-ratio));
         }
      }
      .howto-help_instructions {
         margin-top: calc(22 * var(--min-fluid-ratio));
         .howto-help_subtitle {
            column-gap: calc(18 * var(--min-fluid-ratio));
         }
      }
      .howto-help_movie {
         margin-top: calc(42 * var(--min-fluid-ratio));
         .howto_text {
            margin-inline: calc(50% - 50vi);            
         }
      }
   }

   #contents_block .hoby {
      background: repeating-linear-gradient(
      to right,
      #ffe900  0px,
      #ffe900 calc(56 * var(--max-fluid-ratio)),
      #fff000 calc(56 * var(--max-fluid-ratio)),
      #fff000 calc(81 * var(--max-fluid-ratio))
      );
      padding-top: calc(81 * var(--min-fluid-ratio));
      padding-bottom: calc(120 * var(--min-fluid-ratio));
      .hoby_inner {
         width: calc(670 * var(--min-fluid-ratio));
      }
      .hoby_title {
         width: calc(562 * var(--min-fluid-ratio));
      }
      .hoby_text {
         line-height: calc(48 / 32);
         margin-top: calc(31 * var(--min-fluid-ratio));
      }
      .hoby_thum {
         margin-top: calc(51 * var(--min-fluid-ratio));
         width: 100%;
         height: calc(391 * var(--min-fluid-ratio));
      }

      .hoby-ch {
         width: calc(590 * var(--min-fluid-ratio));
         border-radius: calc(40 * var(--min-fluid-ratio));
         padding-top: calc(54 * var(--min-fluid-ratio));
         padding-bottom: calc(83 * var(--min-fluid-ratio));
         padding-inline: calc(44 * var(--min-fluid-ratio));
         margin-top: calc(56 * var(--min-fluid-ratio));
         margin-inline: auto;
         grid-template-columns: 1fr;
         column-gap: 0;
         align-items: start;
         border-width: calc(6 * var(--min-fluid-ratio));
         row-gap: calc(35 * var(--min-fluid-ratio));
         img {
            order: 2;
            width: calc(238 * var(--min-fluid-ratio));
            margin-inline: auto;
         }
         .hoby-ch_text {
            display: contents;
            row-gap: 0;
            dt {
               font-size: var(--font-size-4xl);
               order: 1;
               text-align: center;
            }
            dd {
               line-height: calc(48 /32);
               order: 2;
               margin-top: calc(3 * var(--min-fluid-ratio));
               padding-inline: calc(6 * var(--min-fluid-ratio));

            }
         }
      }
   }


   /* ========================================
      systems / terms
   ======================================== */
   #contents_block .systems {
      font-size: var(--font-size-xl);
      
      line-height: calc(48 / 32);
      padding-top: calc(76 * var(--min-fluid-ratio));
      padding-bottom: calc(80 * var(--min-fluid-ratio));
   }

   #contents_block .terms {
      padding-top: calc(78 * var(--min-fluid-ratio));
      padding-bottom: calc(440 * var(--min-fluid-ratio));
      .terms_inner {
         border-radius: calc(40 * var(--min-fluid-ratio));
         width: calc(654 * var(--min-fluid-ratio));
         padding-top: calc(65 * var(--min-fluid-ratio));
         padding-bottom: calc(61 * var(--min-fluid-ratio));
         padding-inline: calc(61 * var(--min-fluid-ratio));
         row-gap: calc(49 * var(--min-fluid-ratio));
      }
      .terms_title {
         font-size: var(--font-size-4xl);
      }
      .terms_list {
         li {
            font-size: var(--font-size-xl);
            line-height: calc(46 / 32);
            br {
               display: none;
            }
         }
      }
   }

}