@media screen and (min-width: 1101px) {
  /*1101*/ }
.mv-anime {
  opacity: 0;
  -webkit-transition: all 1s ease;
  transition: all 1s ease; }
  .mv-anime.show {
    opacity: 1;
    -webkit-transform: translate(0, 0);
            transform: translate(0, 0); }

.fade-bottom {
  -webkit-transform: translateY(50px);
          transform: translateY(50px); }

.fade-left {
  -webkit-transform: translateX(-50px);
          transform: translateX(-50px); }

.fade-right {
  -webkit-transform: translateX(50px);
          transform: translateX(50px); }

.delay1.show {
  -webkit-transition-delay: 0.1s;
          transition-delay: 0.1s; }

.delay2.show {
  -webkit-transition-delay: 0.2s;
          transition-delay: 0.2s; }

.delay3.show {
  -webkit-transition-delay: 0.3s;
          transition-delay: 0.3s; }

.delay4.show {
  -webkit-transition-delay: 0.4s;
          transition-delay: 0.4s; }

.delay5.show {
  -webkit-transition-delay: 0.5s;
          transition-delay: 0.5s; }

.delay6.show {
  -webkit-transition-delay: 0.6s;
          transition-delay: 0.6s; }

.delay7.show {
  -webkit-transition-delay: 0.7s;
          transition-delay: 0.7s; }

.delay8.show {
  -webkit-transition-delay: 0.8s;
          transition-delay: 0.8s; }

.delay9.show {
  -webkit-transition-delay: 0.9s;
          transition-delay: 0.9s; }

.delay10.show {
  -webkit-transition-delay: 1s;
          transition-delay: 1s; }

:root {
  --brand-teal: #00B2B2;
  --brand-gold: #BC9634;
  --text-dark: #444444;
  --bg-grey: #505050;
  --white: #ffffff; }

body {
  font-family: 'Noto Sans JP', sans-serif;
  color: #505050;
  margin: 0 auto 70px;
  letter-spacing: 0.04em;
  font-weight: 500;
  overflow-x: hidden; }
  @media screen and (max-width: 768px) {
    body {
      font-size: 2.1333333333vw; } }
  body * {
    -webkit-box-sizing: border-box;
            box-sizing: border-box;
    line-height: 1; }

.wrapper {
  margin: 0 auto;
  width: 1010px;
  background: #FFF; }
  @media screen and (max-width: 768px) {
    .wrapper {
      width: auto; } }

@media screen and (max-width: 768px) {
  .sp-none {
    display: none; } }

@media screen and (min-width: 769px) {
  .pc-none {
    display: none; } }

a {
  color: #000;
  text-decoration: none; }
  a:hover, a:active, a:focus {
    color: #333333; }
  a:hover img {
    -webkit-transition: all 0.3s;
    transition: all 0.3s; }

p {
  margin: 0; }

img {
  vertical-align: bottom; }

ul,
li {
  margin: 0;
  padding: 0;
  list-style-type: none; }

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  padding: 0;
  line-height: 1em;
  font-weight: 500; }

figure {
  margin: 0;
  padding: 0;
  line-height: 0; }

img {
  width: auto;
  height: auto; }

@media screen and (min-width: 769px) {
  img[src$=".svg"] {
    width: auto; } }

.inner {
  padding: 0 6%; }

.img_text {
  line-height: 0; }

.top-banner {
  background-color: var(--brand-gold);
  color: var(--white);
  text-align: center;
  padding: 12px 0;
  font-size: 12px;
  font-weight: bold;
  letter-spacing: 0.2em;
  position: relative;
  z-index: 101; }

.fv_block {
  position: relative; }
  .fv_block .fv_back {
    position: absolute;
    margin: 0 calc(50% - 50vw);
    width: 100vw;
    top: -2px; }
    .fv_block .fv_back img {
      width: 100%; }
  .fv_block .logo {
    width: auto;
    text-align: center;
    z-index: 2;
    padding-top: 3rem;
    display: block;
    position: relative; }
    @media screen and (max-width: 768px) {
      .fv_block .logo img {
        width: 70%; } }
  .fv_block .mv {
    text-align: center;
    position: relative;
    z-index: 2;
    margin-top: 30px; }
    @media screen and (max-width: 768px) {
      .fv_block .mv img {
        width: 100%; } }

.campaign {
  margin: 0 auto;
  max-width: 900px; }
  @media screen and (max-width: 768px) {
    .campaign {
      max-width: 90%; } }
  .campaign .campaign_block {
    border: solid 2px var(--brand-gold);
    border-radius: 30px;
    padding: 70px 100px 30px; }
    @media screen and (max-width: 768px) {
      .campaign .campaign_block {
        padding: 50px 30px 0;
        border-radius: 15px; } }
    .campaign .campaign_block .campaign_detail {
      margin-bottom: 50px; }
      .campaign .campaign_block .campaign_detail h2 {
        font-size: 1.2rem;
        background-color: var(--bg-grey);
        color: #fff;
        padding: 13px 18px;
        display: inline-block;
        margin-bottom: 15px; }
        @media screen and (max-width: 768px) {
          .campaign .campaign_block .campaign_detail h2 {
            font-size: 1rem;
            padding: 10px 13px; } }
      .campaign .campaign_block .campaign_detail p {
        font-size: 1.2rem;
        line-height: 1.8;
        margin-bottom: 15px;
        word-break: break-all; }
        @media screen and (max-width: 768px) {
          .campaign .campaign_block .campaign_detail p {
            font-size: 1rem; } }
        .campaign .campaign_block .campaign_detail p small {
          font-size: 0.9rem; }
          @media screen and (max-width: 768px) {
            .campaign .campaign_block .campaign_detail p small {
              font-size: 0.8rem; } }
        .campaign .campaign_block .campaign_detail p .-under {
          text-decoration: underline; }
    .campaign .campaign_block .product-links {
      margin: 40px 0;
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-orient: vertical;
      -webkit-box-direction: normal;
          -ms-flex-direction: column;
              flex-direction: column;
      gap: 15px; }
    .campaign .campaign_block .product-card {
      text-decoration: none;
      -webkit-transition: opacity 0.3s;
      transition: opacity 0.3s; }
    .campaign .campaign_block .product-card:hover {
      opacity: 0.9; }
    .campaign .campaign_block .product-card-inner {
      display: -webkit-box;
      display: -ms-flexbox;
      display: flex;
      -webkit-box-align: center;
          -ms-flex-align: center;
              align-items: center;
      -webkit-box-pack: center;
          -ms-flex-pack: center;
              justify-content: center;
      position: relative;
      background-position: center;
      background-repeat: no-repeat;
      overflow: hidden;
      height: auto; }
      @media screen and (max-width: 768px) {
        .campaign .campaign_block .product-card-inner {
          background-size: cover; } }
      @media screen and (min-width: 768px) and (max-width: 1100px) {
        .campaign .campaign_block .product-card-inner {
          background-size: auto; } }
    .campaign .campaign_block .card-orange {
      background-image: url("../img/btn_bg_pc.png"); }
      @media screen and (max-width: 768px) {
        .campaign .campaign_block .card-orange {
          background-image: url("../img/btn_bg_sp.png"); } }
    .campaign .campaign_block .product-content-img {
      width: 100%;
      max-width: 500px;
      height: auto;
      -o-object-fit: contain;
         object-fit: contain;
      z-index: 1; }
    .campaign .campaign_block .content-sp {
      display: none; }
    .campaign .campaign_block .arrow {
      position: absolute;
      right: 30px;
      top: 50%;
      margin-top: -7.5px;
      z-index: 2; }
  .campaign .notice_block {
    margin-top: 50px; }
    .campaign .notice_block .notice_detail {
      margin-bottom: 50px; }
      .campaign .notice_block .notice_detail h3 {
        font-size: 1.2rem;
        font-weight: bold;
        margin-bottom: 10px;
        line-height: 1.8; }
        @media screen and (max-width: 768px) {
          .campaign .notice_block .notice_detail h3 {
            font-size: 1.1rem; } }
      .campaign .notice_block .notice_detail p {
        font-size: 1rem;
        line-height: 1.8;
        margin-bottom: 20px; }
        @media screen and (max-width: 768px) {
          .campaign .notice_block .notice_detail p {
            font-size: 0.9rem; } }
  .campaign .coupon-section {
    padding: 40px 20px; }
    @media screen and (max-width: 768px) {
      .campaign .coupon-section {
        padding: 0px 0px; } }
  .campaign .coupon-container {
    margin: 0 auto;
    background-color: var(--brand-gold);
    border-radius: 30px;
    padding: 40px 20px;
    text-align: center;
    color: var(--white);
    -webkit-box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); }
    @media screen and (max-width: 768px) {
      .campaign .coupon-container {
        border-radius: 15px; } }
  .campaign .coupon-title {
    font-size: 1.5rem;
    margin-bottom: 20px; }
    @media screen and (max-width: 768px) {
      .campaign .coupon-title {
        font-size: 1.3rem; } }
  .campaign .coupon-code-box {
    background-color: var(--white);
    padding: 20px 30px;
    display: inline-block;
    margin-bottom: 15px;
    border: solid 5px #000; }
  .campaign .coupon-code {
    color: var(--bg-grey);
    font-size: 2rem;
    font-weight: bold;
    letter-spacing: 2px; }
    @media screen and (max-width: 768px) {
      .campaign .coupon-code {
        font-size: 1.8rem; } }
  .campaign .coupon-note {
    font-size: 0.8rem; }