@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);
:root{
  /*PC用イコライザー*/
  --eq_w: clamp(36px, 1.9791666667vw, 9999px);   /* 点の横38 */
  --eq_h: clamp(10px, 0.6770833333vw, 9999px);   /* 点の縦13 */
  --eq_r: clamp(11px, 0.6770833333vw, 9999px);   /* 角丸13 */
  --eq_gy: clamp(8px, 0.5208333333vw, 9999px);  /* 縦間隔10 */
  --eq_gx: clamp(11px, 0.7291666667vw, 9999px);  /* 横間隔14 */
  --eq_rows: 11;  /* 縦の個数 */
  --eq_color: #000;
  --eq_full: calc(var(--eq_h) * var(--eq_rows) + var(--eq_gy) * (var(--eq_rows) - 1));
  
  /*ページ汎用*/
  --color01:#fff;
  --color02:#FFCB03;
  --color03:#111111;
  --color04:#D71921;
  --color05:#4BC2F0;
  --color06:#E82B9F;
  --color07:#777777;
  --color08:#AAAAAA;
  --color09:#CCCCCC;;

  /*矢印三角*/
  --caret-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 14'%3E%3Cpath d='M8 7 0 14 V0 Z'/%3E%3C/svg%3E");
}


body {
  font-family: 'Noto Sans JP', sans-serif;
  line-height: 1;
  overflow-x: clip;
  background-color: var(--color02);

}
body .Wrap {
  overflow: clip !important;
}
img{
  max-width: 100%;
}
em{
  font-weight: bold;
}
a:hover{
  text-decoration: none;
}


  .pc_view {
    display: none;
  }
  .sp_view {
    display: block;
  }

@media screen and (min-width: 1200px){
  .pc_view {
    display: block;
  }
  .sp_view {
    display: none;
  }
}
footer {
  position: relative;
  z-index: 1;
}

#PageTop {
  background:var(--color02);
}

@media screen and (min-width: 1200px) {
  nav.ContentNavi01 {
    position: relative;
    z-index: 2;
  }
}

/*============================
  共通
============================*/
a.link_btn{
  position: relative;
  display: block;
  width: 78.6667vw;        /* 295px */
  height: 8.5333vw;        /* 32px */
  line-height: 8.5333vw;   /* 32px */
  font-size: 3.7333vw;     /* 14px */
  font-weight: bold;
  color: #111111;
  text-align: center;
  background: var(--color01);
  margin: auto;
  border-radius: 8.5333vw; /* 32px */
}
a.link_btn:after {
  display: block;
  position: absolute;
  content: "";
  color: var(--color03);
  width: 2.1333vw;         /* 8px */
  height: 3.7333vw;        /* 14px */
  top: 50%;
  right: 2.6667vw;         /* 10px */
  margin-bottom: 8vw;      /* 30px */
  transform: translateY(-50%);
  background-color: currentColor;
  -webkit-mask-image: var(--caret-svg);
          mask-image: var(--caret-svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}
.main_btn{
  display: block;
  position: relative;
  width: 89.3333vw;        /* 335px */
  height: 17.6vw;          /* 66px */
  margin: 0 auto 8vw;      /* 30px */
  color: #111111;
  font-size: 4.8vw;        /* 18px */
  font-weight: bold;
  padding-left: 6.9333vw;  /* 26px */
  line-height: 17.0667vw;  /* 64px */
  text-align: left;
  box-sizing: border-box;
  border: 0.2667vw solid currentColor; /* 1px */
  overflow: hidden;
  transition: color 0.3s ease;
}
.main_btn:before{
  display: block;
  position: absolute;
  content: "";
  width: 8vw;              /* 30px */
  height: 17.0667vw;       /* 64px */
  right: 0;
  left: auto;
  top: 0;
  background-color: #111111;
  transition: width 0.3s ease;
}
.main_btn:hover:before {
  width: 100%;
}
.main_btn p{
  position: relative;
  z-index: 1;
}
.btn_arrow:after {
  content: "";
  position: absolute;
  width: 2.1333vw;         /* 8px */
  height: 3.7333vw;        /* 14px */
  right: 2.6667vw;         /* 10px */
  top: 50%;
  transform: translateY(-50%);
  background-color: currentColor;
  -webkit-mask-image: var(--caret-svg);
          mask-image: var(--caret-svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center;
          mask-position: center;
}
a.link_btn:hover{
  opacity: 0.5;
}
a.link_btn + a.link_btn{
  margin-top: 5.333333333333334vw; /* 20px */
}
.svg_round{
  position: absolute;
  display: inline-block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 307.038 307.038'><defs><clipPath id='a'><path fill='none' d='M0 0h307.038v307.038H0z'/></clipPath></defs><g clip-path='url(%23a)'><path fill='%23111' d='M153.519 306.852A153.333 153.333 0 1 0 .186 153.519a153.333 153.333 0 0 0 153.333 153.333m0-191.489a38.157 38.157 0 1 1-38.157 38.157 38.157 38.157 0 0 1 38.157-38.157'/><path fill='%23ffcb03' d='M153.519 0a153.559 153.559 0 0 1 59.756 294.974A153.559 153.559 0 0 1 93.762 12.064 152.564 152.564 0 0 1 153.519 0m0 306.666c84.445 0 153.146-68.7 153.146-153.146S237.965.373 153.519.373.373 69.074.373 153.519s68.7 153.146 153.146 153.146m0-191.489a38.343 38.343 0 1 1-38.343 38.343 38.387 38.387 0 0 1 38.343-38.343m0 76.313a37.97 37.97 0 1 0-37.97-37.97 38.013 38.013 0 0 0 37.97 37.97'/><path fill='%23ffcb03' d='M216.986 152.028a1.491 1.491 0 0 1 1.491 1.491 65.029 65.029 0 0 1-64.958 64.958 1.491 1.491 0 1 1 0-2.982 62.049 62.049 0 0 0 61.977-61.977 1.491 1.491 0 0 1 1.491-1.491'/><path fill='%23ffcb03' d='M153.519 88.561a1.491 1.491 0 0 1 0 2.982 62.049 62.049 0 0 0-61.977 61.976 1.491 1.491 0 0 1-2.982 0 65.031 65.031 0 0 1 64.958-64.958'/><path fill='%23ffcb03' d='M229.579 152.028a1.491 1.491 0 0 1 1.491 1.491 77.636 77.636 0 0 1-77.551 77.551 1.491 1.491 0 0 1 0-2.982 74.656 74.656 0 0 0 74.572-74.569 1.491 1.491 0 0 1 1.491-1.491'/><path fill='%23ffcb03' d='M153.519 75.969a1.491 1.491 0 1 1 0 2.981 74.654 74.654 0 0 0-74.569 74.57 1.491 1.491 0 1 1-2.982 0 77.636 77.636 0 0 1 77.55-77.551'/><path fill='%23ffcb03' d='M240.681 153.519h2.982a90.244 90.244 0 0 1-90.143 90.143v-2.982a87.263 87.263 0 0 0 87.162-87.162'/><path fill='%23ffcb03' d='M153.519 63.376v2.981a87.262 87.262 0 0 0-87.162 87.162h-2.982a90.244 90.244 0 0 1 90.143-90.143'/><path fill='%23ffcb03' d='M253.273 153.519h2.983a102.85 102.85 0 0 1-102.737 102.738v-2.982a99.869 99.869 0 0 0 99.754-99.754'/><path fill='%23ffcb03' d='M153.519 50.784v2.981a99.869 99.869 0 0 0-99.754 99.754h-2.982A102.85 102.85 0 0 1 153.519 50.784'/><path fill='%23ffcb03' d='M265.865 153.519h2.979a115.456 115.456 0 0 1-115.325 115.325v-2.982a112.476 112.476 0 0 0 112.346-112.343'/><path fill='%23ffcb03' d='M153.519 38.192v2.981A112.476 112.476 0 0 0 41.172 153.519H38.19A115.457 115.457 0 0 1 153.519 38.192'/><path fill='%23ffcb03' d='M278.458 153.519h2.982a126.814 126.814 0 0 1-10.069 49.746 128.67 128.67 0 0 1-68.1 68.1 126.816 126.816 0 0 1-49.747 10.069v-2.982a125.082 125.082 0 0 0 124.934-124.933'/><path fill='%23ffcb03' d='M153.519 25.599v2.981A125.083 125.083 0 0 0 28.58 153.519h-2.982a127.921 127.921 0 0 1 127.92-127.92'/><path fill='%23ffcb03' d='M291.05 153.519h2.982a139.3 139.3 0 0 1-11.06 54.643 141.336 141.336 0 0 1-74.809 74.809 139.3 139.3 0 0 1-54.644 11.06v-2.982a136.6 136.6 0 0 0 97.2-40.33 136.6 136.6 0 0 0 40.328-97.2'/><path fill='%23ffcb03' d='M153.519 13.007v2.981A137.689 137.689 0 0 0 15.988 153.519h-2.982A140.512 140.512 0 0 1 153.519 13.007'/><path fill='%23ffcb03' d='M153.519 102.336a51.183 51.183 0 1 1-51.183 51.183 51.241 51.241 0 0 1 51.183-51.183m0 99.384a48.2 48.2 0 1 0-48.2-48.2 48.256 48.256 0 0 0 48.2 48.2'/></g></svg>");
}
@media screen and (min-width: 1200px) {
  a.link_btn{
    width: 456.27px;    /* 295 */
    height: 49.49px;    /* 32 */
    line-height: 49.49px; /* 32 */
    font-size: 21.65px; /* 14 */
    border-radius: 49.49px; /* 32 */
  }
  a.link_btn:after{
    width: 12.37px;     /* 8 */
    height: 21.65px;    /* 14 */
    right: 15.47px;     /* 10 */
    margin-bottom: 46.40px; /* 30 */
  }
  a.link_btn + a.link_btn{
    margin-top: 30px; /* 20px */
  }
  .main_btn{
    width: 518.13px;    /* 335 */
    height: 102.08px;   /* 66 */
    margin: 0 auto 46.40px; /* 30 */
    font-size: 27.84px; /* 18 */
    padding-left: 40.21px; /* 26 */
    line-height: 98.99px;  /* 64 */
    border: 1.55px solid currentColor; /* 1 */
  }
  .main_btn:before{
    width: 46.40px;     /* 30 */
    height: 98.99px;    /* 64 */
  }
  .btn_arrow:after{
    width: 12.37px;     /* 8 */
    height: 21.65px;    /* 14 */
    right: 15.47px;     /* 10 */
  }
}
/*============================
  PC用背景
============================*/
@media screen and (min-width: 1200px) {
  .pc_bg{
    position: fixed;
    top: 0;
    width: 100vw;
    height: 100vh;
    z-index: -1;;
  }
  .pc_bg::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 3.729166666666666vw; /* 110px */
    background-color: var(--color03)
  }
  .pc_bg > img{
    display: block;
    position: absolute;
    height: auto;
    width: clamp(475px, 25.46875vw, 9999px); 
    top: clamp(178px, 9.2708333333vw, 9999px);
    left: clamp(1080px, 56.25vw, 9999px);
  }
  .bg_sticky{
    position: sticky;
    bottom: 0; 
    background: #111;
    color: #fff;
  }
  .eq{
    position: absolute;
    bottom: 4.25vw; /* 120px */
    display:flex;
    gap:var(--eq_gx);
    align-items:flex-end;
  }
  .pc_bg .svg_round{
    top: 198px;
    left: 198px;
    width: 307px;
    height: 307px;
  }
  /* 1列の枠（ちょうど11個分の高さ） */
  .col{
    position:relative;
    width:var(--eq_w);
    height:var(--eq_full);
    flex-shrink: 0;
  }

  /* クリップ（下から見せる） */
  .clip{
    --n: 1; /* 初期値：1個表示 */
    position:absolute;
    left:0; bottom:0;
    width:var(--eq_w);
    overflow:hidden;

    /* ← ここが“段数 n 個ぶんの高さ” */
    height: calc( var(--eq_h) + (var(--eq_h) + var(--eq_gy)) * (var(--n,1) - 1) );

    /* トランジションで段階的に変化（steps は JS で設定） */
    transition-property: height;
    will-change: height;
  }

  /* 点を下揃えで縦に積む */
  .stack{
    position:absolute;
    left:0; right:0; bottom:0;
    display:flex;
    flex-direction:column;
    gap:var(--eq_gy);
  }
  .dot{
    width:var(--eq_w);
    height:var(--eq_h);
    background:var(--eq_color);
    border-radius:var(--eq_r);
  }

  @media (prefers-reduced-motion: reduce){
    .clip{ transition-duration: 0.001s; }
  }
}
@media screen and (min-width: 1000px) and (max-width: 1800px) {
  .pc_bg .svg_round{
    left: 82px;

  }
  .pc_bg > img{
  width: clamp(319px, 25.36875vw, 9999px);
  left: clamp(898px, 56.25vw, 9999px);
    
  }
}
/*============================
  メイン
============================*/
.MainColumn{
  text-align: left;
  color: var(--color03);
  background-color: var(--color02);
  width: 100vw;            /* 375px */
  overflow: hidden;
}
.kv {
  position:relative
}
.kv .svg_round{
  width: 29.06666666666667vw;
  height:  29.06666666666667vw;
  left: -15.733333333333333vw;
  bottom: -14.399999999999999vw;
}
.about dl{
  display: flex;
  flex-wrap: wrap;
  width: 76vw;             /* 285px */
  margin: 4vw auto 4.8vw 16.633333vw;
  font-size: 4vw;          /* 15px */
}
.about dl span{
  display: inline-block;
  font-size: 3.2vw;        /* 12px */
}
.about dl dt{
  position: relative;
  font-weight: bold;
  width: 4em;
  padding-right: 1.733333vw;
  margin-bottom: 2.6667vw; /* 10px */
  box-sizing: content-box;
}
.about dl dt:after{
  display: block;
  position: absolute;
  content: "";
  width: 0.2667vw; /* 1px */
  height: 1em;
  right: 0;
  top: 0;
  background-color: var(--color03);
}
.about dl dd{
  padding-left: 1.733333vw;
  margin-bottom: 2.6667vw; /* 10px */
  font-weight: bold;
  width: calc(100% - 4.88em);
  box-sizing: content-box;
}
.about dl dd p{
  margin-bottom: 1.6vw;   /* 6px */
}
.about dl dd em{
  margin-top: 1.6vw; /* 6px */
  display: inline-block;
  text-decoration: underline !important;
}
.about dl dd svg{
  width: 2.666666666666667vw; /* 10px */
  height: 2.666666666666667vw; /* 10px */
}
.about dl dd a{
  color: var(--color04);
  text-decoration: underline !important;
}
.about .summary{
  position: relative;
  display: flex;
  margin: 0 5.3333vw 8vw;  /* 0 20px 30px */
  padding: 4vw 5.3333vw;   /* 15px 20px */
  align-items: center;
  background-color: var(--color01);
  border: 0.5333vw solid var(--color03); /* 2px */
  border-radius: 2.6667vw; /* 10px */
}
.about .summary .screw{
  position: absolute;
  width: 100%;
  left: 0;
}
.about .summary .screw.top{
  top: 1.6vw;  /* 6px */
}
.about .summary .screw.bottom{
  bottom: 2.83vw;  /* 8px */
}
.about .summary .screw:before,
.about .summary .screw:after{
  position: absolute;
  display: block;
  content: '';
  width: 1.33vw;  /* 5px */
  height: 1.33vw;  /* 5px */
  border-radius: 1.33vw;  /* 5px */
  background-color: var(--color03);

}
.about .summary .screw:before{
  left: 1.6vw;  /* 6px */
}
.about .summary .screw:after{
  right: 1.6vw;  /* 6px */
}
.about .summary img{
  width: 17.3333vw;        /* 65px */
  height: 13.6vw;          /* 51px */
  margin-right: 4vw;       /* 15px */
}
.about .summary p{
  font-size: 4vw;          /* 15px */
  line-height: 1.6667;
}
.about .summary p span{
  font-weight: bold;
}

@media screen and (min-width: 1200px) {
  .MainColumn{
    width: 580.00px;    /* 375 */
    margin-left: 350px;
  }
  .kv .svg_round{
    width: 170.77px;
    height: 170.77px;
    left: -92.43px;
    bottom: -84.60px
  }
  .about dl{
    width: 440.80px;    /* 285 */
    margin: 23.20px auto 27.84px 100.27px; /* 15 auto 18 70 */
    font-size: 23.20px; /* 15 */
  }
  .about dl span{
    font-size: 18.56px; /* 12 */
  }
  .about dl dt{
    padding-right: 10.18px;
    margin-bottom: 15.47px; /* 10 */
  }
  .about dl dt:after{
    width: 1.5px
  }
  .about dl dd{
    padding-left: 7.98px;
    margin-bottom: 15.47px; /* 10 */
    width: calc(100% - 4.79em);
  }
  .about dl dd p{
    margin-bottom: 6px;   /* 6px */
  }
  .about dl dd em{
    margin-top: 9px; /* 6 */
  }
  .about dl dd svg{
    width: 15.47px; /* 10px */
    height:15.47px; /* 10px */
  }
  .about .summary{
    margin: 0 30.93px 46.40px;  /* 0 20 30 */
    padding: 23.20px 30.93px;   /* 15 20 */
    border: 3.09px solid var(--color03); /* 2 */
    border-radius: 15.47px;     /* 10 */
  }

  .about .summary .screw.top{
    top: 9.41px;  /* 6px */
  }
  .about .summary .screw.bottom{
    bottom:17.53px;  /* 8px */
  }
  .about .summary .screw:before,
  .about .summary .screw:after{
    width: 7.83px;  /* 5px */
    height: 7.83px;  /* 5px */
    border-radius: 7.83px;  /* 5px */
  }
  .about .summary .screw:before{
    left: 9.41px;  /* 6px */
  }
  .about .summary .screw:after{
    right: 9.41px;  /* 6px */
  }
  .about .summary img{
    width: 17.3333vw;        /* 65px */
    height: 13.6vw;          /* 51px */
    margin-right: 4vw;       /* 15px */
  }
  .about .summary p{
    font-size: 4vw;          /* 15px */
    line-height: 1.6667;
  }
  .about .summary img{
    width: 100.53px;    /* 65 */
    height: 78.88px;    /* 51 */
    margin-right: 23.20px; /* 15 */
  }
  .about .summary p{
    font-size: 23.20px; /* 15 */
  }
}
@media screen and (min-width: 1200px) and (max-width: 1800px) {
  .MainColumn{
    margin-left: 230px;
  }
}
/*============================
  ケンブンロク
============================*/
.kenbunroku .inner{
  position: relative;
  color: var(--color01);
  padding: 13.3333vw 0;    /* 50px 0 */
  background-color: var(--color03);
  border-radius: 5.3333vw; /* 20px */
}
.kenbunroku .inner img{
  margin-bottom: 4vw;      /* 15px */
}
.kenbunroku .inner > p:not([class]){
  font-size: 4vw;          /* 15px */
  margin: 0 5.3333vw 8vw;  /* 0 20px 30px */
  line-height: 1.6667;
}
.kenbunroku .inner > p span{
  color: #4BC2F0;
  font-weight: bold;
}
.kenbunroku .inner .title{
  font-size: 4.5333vw;     /* 17px */
  margin-bottom: 2.6667vw; /* 10px */
  text-align: center;
  color: var(--color05);
}
.kenbunroku .inner dl.summary{
  font-weight: bold;
  text-align: center;
  margin: 0 5.3333vw 8vw;  /* 0 20px 30px */
  line-height: 1.4286;
}
.kenbunroku .inner dl.summary dt{
  font-size: 3.2vw;        /* 12px */
  height: 6.6667vw;        /* 25px */
  line-height: 6.6667vw;   /* 25px */
  color: var(--color03);
  background-color: var(--color05);
}
.kenbunroku .inner dl.summary dd{
  font-size: 3.7333vw;     /* 14px */
  padding: 2.6667vw 5.3333vw; /* 10px 20px */
  border: 0.2667vw solid var(--color05); /* 1px */
}
.kenbunroku .inner dl.summary dd p{
    line-height: 1.4286;
}
.kenbunroku .inner dl.summary dd em{
  font-size: 4.8vw;        /* 18px */
}
.kenbunroku .inner .title.ticket{
  color: var(--color06);
}
.kenbunroku .inner dl.summary.ticket dt{
  background-color: var(--color06);
}
.kenbunroku .inner dl.summary.ticket dd{
  border-color: var(--color06);
}
.kenbunroku .inner dl.summary.ticket dd .notice{
  font-size: 2.9333vw;     /* 11px */
  font-weight: normal;
}
.kenbunroku .inner .apply{
  font-size: 4vw;          /* 15px */
  text-align: center;
}
.kenbunroku .inner .apply > p{
  margin-bottom: 4vw;      /* 15px */
  line-height: 1.5;
}
.kenbunroku .inner .apply p em{
  font-size: 4.8vw;        /* 18px */
}
.kenbunroku .inner .apply .main_btn{
  background-color: var(--color02);
  border-color: var(--color02);
}
.kenbunroku .inner .apply .main_btn.off{
  pointer-events: none;
  background-color: var(--color07);
  border-color: var(--color07);
  color: var(--color08);
}
.kenbunroku .inner .apply .main_btn p{
    line-height: 17.6vw;
}
.kenbunroku .inner .apply .main_btn:before{
  background-color: var(--color03);
}
.kenbunroku .inner .apply .main_btn:after {
  color: var(--color02);
}
.kenbunroku .inner .apply .main_btn.off:after {
  color: var(--color07);
}
.kenbunroku .inner .apply .main_btn:hover {
  color: var(--color02);
}
@media screen and (min-width: 1200px) {
  .kenbunroku .inner{
    padding: 77.33px 0;   /* 50 0 */
    border-radius: 30.93px; /* 20 */
  }
  .kenbunroku .inner img{
    margin-bottom: 23.20px; /* 15 */
  }
  .kenbunroku .inner > p:not([class]){
    font-size: 23.20px;     /* 15 */
    margin: 0 30.93px 46.40px; /* 0 20 30 */
  }
  .kenbunroku .inner .title{
    font-size: 26.29px;   /* 17 */
    margin-bottom: 15.47px; /* 10 */
  }
  .kenbunroku .inner dl.summary{
    margin: 0 30.93px 46.40px; /* 0 20 30 */
  }
  .kenbunroku .inner dl.summary dt{
    font-size: 18.56px;   /* 12 */
    height: 38.67px;      /* 25 */
    line-height: 38.67px; /* 25 */
  }
  .kenbunroku .inner dl.summary dd{
    font-size: 21.65px;       /* 14 */
    padding: 15.47px 30.93px; /* 10 20 */
    border: 1.55px solid var(--color05); /* 1 */
  }
  .kenbunroku .inner dl.summary dd em{
    font-size: 27.84px;   /* 18 */
  }
  .kenbunroku .inner dl.summary.ticket dd .notice{
    font-size: 17.01px;   /* 11 */
  }
  .kenbunroku .inner .apply{
    font-size: 23.20px;   /* 15 */
  }
  .kenbunroku .inner .apply p{
    margin-bottom: 23.20px; /* 15 */
  }
  .kenbunroku .inner .apply p em{
    font-size: 27.84px;   /* 18 */
  }
  .kenbunroku .inner .apply .main_btn p{
      line-height: 102.08px;
  }
}
/*============================
  ショップ
============================*/
.shop {
  padding: 13.3333vw 0 17.0667vw; /* 50px 0 64px */
}
.shop img{
  display: block;
  width: 89.3333vw;       /* 335px */
  margin: auto;
}
.shop .goods_marquee {
  position: relative;
  overflow: hidden;
  width: 100%;
  margin-bottom: 8vw;     /* 30px */
}
.shop .goods_marquee ul {
  display: flex;
  flex-wrap: nowrap;
  gap: 4vw;               /* 15px */
  width: max-content;
  animation: goods_slide 20s linear infinite;
}
.shop .goods_marquee li {
  flex: 0 0 auto;
  width: 34.6667vw;       /* 130px */
}
.shop .goods_marquee img {
  display: block;
  width: 100%;
  height: auto;
}
@keyframes goods_slide {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}
.shop .about{
  font-size: 4vw;         /* 15px */
  text-align: center;
  line-height: 1.6667;
  margin-bottom: 8vw;     /* 30px */
}
.shop .main_btn{
  color: var(--color01);
  background-color: var(--color04);
  border-color: var(--color04);

  padding: 2.1333vw 0 2.1333vw 14.1333vw; /* 8px 0 8px 53px */
}
.shop .main_btn p{
  text-align: center;
  width: fit-content;
  line-height: 1.3333;
}
.shop .main_btn:before{
  background-color: var(--color01);
}
.shop .main_btn:hover{
  color: var(--color04);
}
.shop .main_btn:after {
  color: var(--color04);
}

@media screen and (min-width: 1200px) {
  .shop{
    padding: 77.33px 0 98.99px; /* 50 0 64 */
  }
  .shop img{
    width: 518.13px;     /* 335 */
  }
  .shop .goods_marquee{
    margin-bottom: 46.40px; /* 30 */
  }
  .shop .goods_marquee ul{
    gap: 23.20px;        /* 15 */
  }
  .shop .goods_marquee li{
    width: 201.07px;     /* 130 */
  }
  .shop .about{
    font-size: 23.20px;  /* 15 */
    margin-bottom: 46.40px; /* 30 */
  }
  .shop .main_btn{
    padding: 12.37px 0 12.37px 81.97px; /* 8 0 8 53 */
  }
}
/*============================
  関連記事
============================*/
.related{
  padding: 8vw 0 8vw; /* 30px 0 30px */
  background-color: var(--color01);
}
.related .link_btn{
  background-color: var(--color02);
}
.related span{
  display: none;
}
.coming-soon{
  position: relative;
}
.coming-soon span{
  display: block;
  font-size: 4.2667vw;    /* 16px */
  font-weight: bold;
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50% , -50%);
  z-index: 1;
}
.coming-soon a{
  pointer-events: none;
  background-color: var(--color09) !important;
  color: var(--color07);
}
.coming-soon a:after{
  background-color:var(--color07);
  color: var(--color07);
  fill:var(--color07);
}

@media screen and (min-width: 1200px) {
  .related{
    padding: 45px 0 45px; /* 30 0 30 */
    margin-bottom: 85px;
  }
  .coming-soon span{
    font-size: 24.75px;  /* 16 */
  }
}