@charset "UTF-8";
/* Color Palette */
/* Padding */
/* Heder Space */
/* Wrap */
/*-----------
Root
-------------*/
:root {
  --large: 8rem;
  --medium: 5rem;
  --small: 2rem;
  --transition: all 0.3s ease; }

@media screen and (max-width: 1200px) {
  :root {
    --large: 6rem;
    --medium: 4rem;
    --small: 1.5rem; } }
@media screen and (max-width: 880px) {
  :root {
    --large: 5rem;
    --medium: 3rem;
    --small: 1.5rem; } }
@media screen and (max-width: 480px) {
  :root {
    --large: 3rem;
    --medium: 2rem;
    --small: 1rem; } }
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

/*html, body {
  scroll-padding-top: 66px;
	@include sp { scroll-padding-top: 52px;}
}*/
.sm {
  font-weight: normal;
  font-size: 50%; }

.note {
  font-size: 90%; }

.f-600 {
  font-weight: 600; }

/* ------------------
MAIN VISUAL 
------------------*/
.mv {
  width: 100%;
  height: 38vw;
  position: relative;
  display: flex;
  justify-content: flex-start;
  background-color: #1414d2;
  margin-top: 90px; }
  @media (max-width: 480px) {
    .mv {
      margin-top: 52px;
      height: auto;
      min-height: unset;
      flex-wrap: wrap-reverse; } }

.mv_ttl {
  margin: auto;
  font-feature-settings: 'palt'; }
  .mv_ttl h1 {
    margin-bottom: 2rem;
    padding: 0;
    font-size: clamp(29px, calc( 14.533px + 4.45vw ), 100px);
    font-weight: 700;
    line-height: 0.8;
    text-align: left;
    color: #ffffff;
    font-feature-settings: 'palt'; }
    @media (max-width: 480px) {
      .mv_ttl h1 {
        font-size: clamp(38px, 12vw, 48px); } }
  .mv_ttl p {
    font-size: clamp(21px, calc( 15.498px + 1.692vw ), 48px);
    font-weight: 600;
    margin-bottom: 3rem; }
    @media (max-width: 1200px) {
      .mv_ttl p {
        margin-bottom: 1.5rem; } }
    @media (max-width: 480px) {
      .mv_ttl p {
        margin-bottom: 1rem; } }
  @media (max-width: 480px) {
    .mv_ttl {
      width: 100%;
      padding: 2rem 3rem 1rem; } }

.pc-logo {
  display: block;
  position: absolute;
  bottom: 4%;
  right: calc( 32vw + 2% );
  width: 10vw;
  min-width: 100px; }
  .pc-logo img {
    width: 100%; }
  @media (max-width: 1200px) {
    .pc-logo {
      right: calc( 32vw + 2% ); } }
  @media (max-width: 480px) {
    .pc-logo {
      display: none !important; } }

.mv_right {
  width: 32vw;
  display: flex;
  flex-direction: row; }
  @media (max-width: 480px) {
    .mv_right {
      flex-direction: column;
      width: 100%;
      max-width: 100%; } }
  .mv_right__image {
    width: 90%;
    background: url("../img/merchant/mv_merchant.jpg");
    background-size: cover;
    background-position: top; }
    @media (max-width: 480px) {
      .mv_right__image {
        width: 100%;
        height: auto;
        aspect-ratio: 1 / 1;
        background: url("../img/merchant/mv_merchant-sp.jpg");
        background-size: contain;
        background-position: center; } }
  .mv_right__bar {
    width: 6vw;
    max-width: 120px;
    background-color: #ffdc8c;
    text-align: center; }
    .mv_right__bar img {
      width: 80%;
      margin: auto;
      display: none; }
    @media (max-width: 480px) {
      .mv_right__bar {
        padding: 1rem 2rem;
        width: 100%;
        max-width: none;
        text-align: right; }
        .mv_right__bar img {
          display: block !important;
          width: auto;
          max-width: 150px;
          min-width: 120px;
          margin-right: 0; } }

/* ------------------
Description
------------------*/
.descrip {
  width: 100%;
  background-color: #ffffff;
  text-align: center;
  padding: 4rem 0; }
  .descrip h3 {
    font-size: clamp(21px, calc( 19.16px + 0.56vw ), 30px);
    font-weight: 600;
    margin: 0;
    padding: 0; }
  .descrip p {
    margin-top: 2rem; }
  @media (max-width: 880px) {
    .descrip {
      width: 90%;
      margin: 0 auto; } }
  @media (max-width: 480px) {
    .descrip {
      text-align: left;
      padding: 3rem; } }

/* ------------------
加盟店セクション
------------------*/
.merchant {
  position: relative;
  background-color: #f7f4f2;
  text-align: center; }
  .merchant h2 {
    font-size: clamp(28px, calc( 26.369px + 0.501vw ), 36px);
    font-weight: 600; }
  .merchant .btn-point {
    margin: 3rem 0 1rem; }
    .merchant .btn-point a {
      font-weight: 600;
      text-decoration: none; }
    .merchant .btn-point span {
      padding: 1rem 2rem;
      background-color: #ffffff;
      border-radius: 10px;
      box-shadow: 0px 3px 16px rgba(0, 0, 0, 0.2); }
      .merchant .btn-point span svg {
        width: 16px;
        padding-top: 5px; }
    .merchant .btn-point .btn-point:hover svg {
      color: #0D0D8F; }
  .merchant:not(:last-child)::after {
    content: "";
    display: block;
    width: 90%;
    position: absolute;
    left: 50%;
    bottom: 0;
    transform: translateX(-50%);
    border-bottom: 2px solid #cccccc; }

.merchant-cards {
  margin: 6rem auto 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  max-width: 1280px; }
  @media (max-width: 480px) {
    .merchant-cards {
      flex-direction: column; } }

.m-card {
  background: white;
  border: 2px solid #cccccc;
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 0 1 calc(33.333% - 2rem);
  max-width: calc(33.333% - 2rem);
  box-sizing: border-box; }
  @media (max-width: 880px) {
    .m-card {
      flex: 0 1 calc(46% - 2rem);
      max-width: calc(50% - 2rem);
      width: 90%; } }
  @media (max-width: 480px) {
    .m-card {
      flex: 0 1 100%;
      width: 90%;
      max-width: none;
      margin: 0 auto; } }
  .m-card__image {
    width: 100%;
    display: flex;
    align-content: center;
    justify-content: center;
    padding: 1rem 0;
    border-bottom: 2px solid #cccccc;
    /*.german-pet-house {
    	width: 80%;
    }
    .trefac {
    	width: 80%;
    }
    .trefac-shuccho {
    	width: 80%;
    }
    .jcm {
    	width: 80%;
    }
    .moppy {
    	width: 80%;
    }
    .point-income {
    	width: 80%;
    }*/ }
    .m-card__image .merchant-logo {
      width: 80%; }
  .m-card__content {
    padding: 1.5rem;
    text-align: left;
    font-feature-settings: 'palt';
    display: flex;
    flex-direction: column;
    flex-grow: 1;
    /*p {
    	display:block;
    	margin-top: $card-padding;
    }*/ }
    .m-card__content h3 {
      font-size: clamp(18px, calc( 16.77px + 0.376vw ), 24px);
      margin: 0;
      padding: 0;
      display: block; }
      .m-card__content h3 span {
        font-size: 90%; }
    .m-card__content a.cta {
      text-decoration: underline; }
    .m-card__content p:not(.term):not(.term__long) {
      display: block;
      margin: 1.5rem 0;
      flex-grow: 1;
      text-align: justify;
      text-justify: inter-ideograph; }
    .m-card__content p.term {
      text-align: center;
      border-top: 2px solid #cccccc;
      border-bottom: 2px solid #cccccc;
      padding: 1.5rem 0;
      color: #1414d2;
      font-weight: 600;
      flex-shrink: 0;
      margin-top: auto;
      font-size: 90%; }
      .m-card__content p.term span {
        color: #000000; }
      .m-card__content p.term span.campaign {
        position: relative;
        margin-top: 8px;
        padding: 5px;
        background: rgba(255, 230, 220, 0.3);
        display: block;
        font-weight: 400; }
        .m-card__content p.term span.campaign .cp-ttl {
          color: #ff4b4b;
          padding-left: 20px;
          font-weight: 600; }
          .m-card__content p.term span.campaign .cp-ttl::before {
            content: '';
            position: absolute;
            width: 15px;
            height: 15px;
            top: 8px;
            left: 21%;
            transform: translateX(-50%);
            background: url("../img/merchant/icon_present_red.svg");
            background-size: contain;
            background-repeat: no-repeat; }
      .m-card__content p.term__long {
        text-align: left;
        border-top: 2px solid #cccccc;
        border-bottom: 2px solid #cccccc;
        padding: 1.5rem 0;
        color: #1414d2;
        font-weight: 600;
        flex-shrink: 0;
        margin-top: auto;
        font-size: 90%; }
        .m-card__content p.term__long span {
          color: #000000; }
  .m-card__card-btn-wrap {
    padding: 1.5rem 1.5rem 3.5rem;
    display: flex;
    flex-direction: column; }
    .m-card__card-btn-wrap .btn {
      margin-top: 1.5rem;
      font-weight: 600; }
    .m-card__card-btn-wrap .cta {
      text-decoration: underline;
      font-size: 90%; }

/* ------------------
Modal Pop Up
------------------*/
.detail-wrap {
  display: none; }

.modal-box {
  padding: 2rem 6rem 5rem;
  font-feature-settings: 'palt'; }
  @media (max-width: 480px) {
    .modal-box {
      padding: 3rem 1.5rem; } }
  .modal-box .logo-image {
    width: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center; }
    .modal-box .logo-image img.merchant-logo {
      width: 40%;
      margin: auto; }
    .modal-box .logo-image img.color-bar {
      width: 100%;
      height: auto;
      display: block; }
  .modal-box h3 {
    font-size: clamp(18px, calc( 16.77px + 0.37vw ), 24px);
    font-weight: 600;
    text-align: left;
    margin: 1rem 0 0;
    padding: 0;
    line-height: 3; }
  .modal-box p span {
    color: #000000; }
  .modal-box p.campaign {
    position: relative;
    margin-top: 8px;
    padding: 1rem;
    background: rgba(255, 230, 220, 0.3);
    display: block;
    font-weight: 400; }
    .modal-box p.campaign .cp-ttl {
      color: #ff4b4b;
      padding-left: 20px;
      font-weight: 600; }
      .modal-box p.campaign .cp-ttl::before {
        content: '';
        position: absolute;
        width: 15px;
        height: 15px;
        top: 1.5rem;
        left: 1rem;
        background: url("../img/merchant/icon_present_red.svg");
        background-size: contain;
        background-repeat: no-repeat; }
  .modal-box a.cta {
    text-decoration: underline; }
  .modal-box .modal-content {
    width: 100%;
    font-feature-settings: 'palt';
    margin-top: 3rem; }
    .modal-box .modal-content table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 0;
      text-align: left;
      color: #000000;
      line-height: 1.5;
      box-sizing: border-box; }
    .modal-box .modal-content td {
      background-color: #f7f4f2;
      font-feature-settings: 'palt';
      font-size: clamp(14px, calc( 13.59px + 0.1253vw ), 16px);
      padding: 1rem;
      border: 0px solid transparent;
      background-clip: padding-box;
      vertical-align: middle; }
      .modal-box .modal-content td ul {
        padding-left: 1.5rem; }
        @media (max-width: 480px) {
          .modal-box .modal-content td ul {
            padding-left: 1rem; } }
        .modal-box .modal-content td ul li {
          text-indent: -0.7em; }
    .modal-box .modal-content td.label {
      background-color: #ffdc8c; }
    .modal-box .modal-content tr > td + td {
      border-left-width: 8px; }
      @media (max-width: 480px) {
        .modal-box .modal-content tr > td + td {
          border-left-width: 5px; } }
    .modal-box .modal-content tr + tr > td {
      border-top-width: 8px; }
      @media (max-width: 480px) {
        .modal-box .modal-content tr + tr > td {
          border-top-width: 5px; } }
  .modal-box .cautions {
    border: 1px solid #000000;
    max-height: 150px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding: 2rem;
    margin-bottom: 1rem; }
    @media (max-width: 480px) {
      .modal-box .cautions {
        padding: 1rem; } }
    .modal-box .cautions ul {
      padding-left: 1.5rem; }
      @media (max-width: 480px) {
        .modal-box .cautions ul {
          padding-left: 1rem; } }
      .modal-box .cautions ul li {
        text-indent: -0.7em; }
  .modal-box .btn-in-popup {
    display: flex;
    justify-content: center;
    margin-top: 3rem; }
    .modal-box .btn-in-popup .btn {
      font-weight: 600;
      padding: 1.5rem 6rem 1.6rem; }

ul {
  padding-left: 1.5rem; }
  @media (max-width: 480px) {
    ul {
      padding-left: 1rem; } }
  ul li {
    text-indent: -0.7em; }

sup {
  vertical-align: super !important; }