@charset "UTF-8";
/* Color Palette */
/* Padding */
/* Header Space */
/* Wrap */
:root {
  /* デフォルト */
  --large: 8rem;
  --medium: 3rem;
  --small: 1rem; }

@media screen and (max-width: 640px) {
  :root {
    --large: 3rem;
    --medium: 2rem;
    --small: .5rem; } }
*, *:before, *:after {
  -webkit-box-sizing: border-box;
  box-sizing: border-box; }

html, body {
  scroll-padding-top: 66px; }
  @media (max-width: 640px) {
    html, body {
      scroll-padding-top: 52px; } }

body {
  background: #ffffff; }

.sm {
  font-weight: normal;
  font-size: 50%; }

.txt-align-left {
  text-align: left; }

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

.mv_ttl {
  /*max-width:$inside-wrap;*/
  margin: auto; }
  .mv_ttl h1 {
    font-size: clamp(18px, 3vw, 48px);
    font-weight: 600;
    text-align: left;
    color: #ffffff; }
    .mv_ttl h1 span {
      display: inline-block;
      font-size: 140%;
      margin: 2rem 0 0; }
      @media (max-width: 640px) {
        .mv_ttl h1 span {
          margin: 0; } }
    @media (max-width: 640px) {
      .mv_ttl h1 {
        margin: 2rem 0; } }
  @media (max-width: 640px) {
    .mv_ttl {
      width: 85%; } }

.mv_right {
  width: 26vw;
  max-width: 380px;
  display: flex;
  flex-direction: column; }
  @media (max-width: 640px) {
    .mv_right {
      width: 100vw; } }
  .mv_right__image {
    width: 100%;
    height: auto; }
  .mv_right__logo {
    padding: 1.5rem;
    background-color: #1414d2;
    text-align: center; }
    .mv_right__logo img {
      width: 60%;
      margin: auto; }
      @media (max-width: 640px) {
        .mv_right__logo img {
          width: 20%;
          min-width: 120px; } }
    @media (max-width: 640px) {
      .mv_right__logo {
        padding: 1rem;
        text-align: right;
        padding-right: 2rem; } }

/*
	@include pc {margin-top: 13vw;}
	@include tab {margin-top: 8vw;}
	
	@media only screen and (max-width: 1024px) and (min-width: 500px) {
		width: 68%;
		margin-top: 9vh;
	}*/
/* ------------------
credit card blocks
------------------*/
.campaign-card {
  background: #f7f4f2;
  width: 100%;
  border: 1px solid #051464;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  margin: 2rem 0 0;
  text-align: left; }
  @media (max-width: 640px) {
    .campaign-card {
      width: 97%;
      margin: 2rem auto 0; } }
  .campaign-card p {
    padding: 0 2rem 2rem; }
    @media (max-width: 640px) {
      .campaign-card p {
        padding: 0 1.5rem 2rem; } }
  .campaign-card p.card_title {
    font-size: 120%;
    font-weight: 600;
    padding: 1.5rem 2rem 0; }
    @media (max-width: 640px) {
      .campaign-card p.card_title {
        padding: 1rem 1.5rem 0; } }
  .campaign-card .card_deco {
    width: 100%;
    height: 10px;
    background: #051464;
    position: relative;
    margin-top: -1rem; }
    .campaign-card .card_deco::after {
      content: '';
      position: absolute;
      top: -15px;
      right: 5%;
      width: 35px;
      height: 33.5px;
      background: url("../img/mpmonth/icon_present_mb.svg");
      background-size: contain; }

.cards-sec {
  background-color: #f7f4f2;
  padding: 6rem 0; }
  @media (max-width: 1200px) {
    .cards-sec {
      padding: 4rem 0; } }
  @media (max-width: 880px) {
    .cards-sec {
      padding: 2.5rem 0; } }

.blocks-wrap {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 20px;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  align-items: stretch; }
  @media (max-width: 1412px) {
    .blocks-wrap {
      width: 96%;
      gap: 10px; } }
  @media (max-width: 880px) {
    .blocks-wrap {
      gap: 5px; } }
  @media (max-width: 640px) {
    .blocks-wrap {
      gap: 8px; } }
  .blocks-wrap .card-link {
    display: flex;
    flex-direction: column;
    width: calc((100% - 3 * 20px) / 4);
    text-decoration: none;
    color: #000000;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-sizing: border-box;
    border-radius: 10px;
    border: 2px solid transparent;
    will-change: transform, border;
    height: auto; }
    .blocks-wrap .card-link:hover {
      border: 2px solid #1414d2;
      border-radius: 10px;
      transform: translateZ(0);
      z-index: 1;
      box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); }
    @media (max-width: 1412px) {
      .blocks-wrap .card-link {
        width: calc((100% - 3 * 10px) / 4); } }
    @media (max-width: 880px) {
      .blocks-wrap .card-link {
        width: calc((100% - 3 * 5px) / 4); } }
    @media (max-width: 640px) {
      .blocks-wrap .card-link {
        width: calc((100% - 2 * 8px) / 2); } }
  .blocks-wrap__blocks {
    width: 100%;
    background-color: #ffffff;
    border-radius: 10px;
    padding: 1rem;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: stretch;
    height: 100%;
    flex: 1 1 auto; }
    @media (max-width: 880px) {
      .blocks-wrap__blocks {
        padding: 0.5rem; } }
    .blocks-wrap__blocks p {
      font-size: clamp(16px, calc( 12.61px + 0.38vw ), 20px);
      text-align: center;
      font-weight: 600;
      flex-grow: 1; }
      .blocks-wrap__blocks p span {
        line-height: 1.15;
        display: block; }
      @media (max-width: 1200px) {
        .blocks-wrap__blocks p {
          font-size: clamp(12px, calc( 1px + 1.25vw ), 16px); } }
      @media (max-width: 880px) {
        .blocks-wrap__blocks p {
          flex-grow: 1; } }
    .blocks-wrap__blocks .credit-card-image-wrap {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 140px;
      flex: 0 0 140px; }
      @media (max-width: 880px) {
        .blocks-wrap__blocks .credit-card-image-wrap {
          height: 100px;
          flex: 0 0 100px; } }
      @media (max-width: 640px) {
        .blocks-wrap__blocks .credit-card-image-wrap {
          height: 80px;
          flex: 0 0 80px; } }
      .blocks-wrap__blocks .credit-card-image-wrap img {
        display: block;
        width: auto;
        height: auto;
        object-fit: contain;
        vertical-align: middle !important; }
        .blocks-wrap__blocks .credit-card-image-wrap img.platinum-vertical {
          max-width: 42%;
          max-height: 92%; }
        .blocks-wrap__blocks .credit-card-image-wrap img.card-horizontal {
          max-width: 92%;
          max-height: 78%; }

/* ------------------
クレジットカードCP詳細
------------------*/
.details {
  background-image: url("../img/cardcp/bg_card-details.jpg");
  background-size: cover; }

.inner-wrap {
  background: #ffffff;
  width: 100%; }

.box {
  width: 100%;
  padding: 6rem 4rem 5rem;
  position: relative; }
  @media (max-width: 880px) {
    .box {
      padding: 8vw 2vw 4vw; } }
  .box:not(:last-child)::after {
    content: "";
    display: block;
    width: calc(100% - 8rem);
    height: 1px;
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    bottom: 0;
    border-bottom: 1px solid #cccccc; }
    @media (max-width: 880px) {
      .box:not(:last-child)::after {
        width: calc(100% - 4vw); } }
  .box .continue {
    width: 80%;
    padding: 2rem;
    background: #d7d2ff;
    margin: 5rem auto 0; }
    @media (max-width: 640px) {
      .box .continue {
        width: 97%;
        margin: 2rem auto 0;
        padding: 1rem; } }
    .box .continue h3 {
      text-align: center;
      font-size: 130%; }
  .box__ttl {
    width: 100%;
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 3.5rem; }
    @media (max-width: 880px) {
      .box__ttl {
        gap: 2rem; } }
    @media (max-width: 640px) {
      .box__ttl {
        flex-direction: column;
        align-items: center;
        text-align: center; } }
    .box__ttl__image {
      width: 30%; }
      @media (max-width: 880px) {
        .box__ttl__image {
          width: 40%; } }
      @media (max-width: 640px) {
        .box__ttl__image {
          width: 100%; } }
      .box__ttl__image__one {
        width: 19%;
        display: flex;
        flex-direction: column;
        align-items: flex-start; }
        @media (max-width: 880px) {
          .box__ttl__image__one {
            width: 29%; } }
        @media (max-width: 640px) {
          .box__ttl__image__one {
            width: 80%; } }
        .box__ttl__image__one img {
          width: 100%; }
        .box__ttl__image__one figcaption {
          margin-left: 10px;
          font-size: 75%;
          line-height: 1.3; }
      .box__ttl__image__two {
        width: 22%;
        display: flex;
        flex-direction: column;
        align-items: flex-start; }
        @media (max-width: 880px) {
          .box__ttl__image__two {
            width: 32%; } }
        @media (max-width: 640px) {
          .box__ttl__image__two {
            width: 90%; } }
        .box__ttl__image__two img {
          width: 100%; }
        .box__ttl__image__two figcaption {
          margin: 0 10px;
          font-size: 75%;
          line-height: 1.3; }
      .box__ttl__image__three {
        width: 26%;
        display: flex;
        flex-direction: column;
        align-items: flex-start; }
        @media (max-width: 880px) {
          .box__ttl__image__three {
            width: 36%; } }
        @media (max-width: 640px) {
          .box__ttl__image__three {
            width: 100%; } }
        .box__ttl__image__three img {
          width: 100%; }
        .box__ttl__image__three figcaption {
          margin: 0 10px;
          font-size: 75%;
          line-height: 1.3; }
      .box__ttl__image__vertical {
        width: 13%;
        display: flex;
        flex-direction: column;
        align-items: flex-start; }
        @media (max-width: 880px) {
          .box__ttl__image__vertical {
            width: 20%; } }
        @media (max-width: 640px) {
          .box__ttl__image__vertical {
            width: 45%; } }
        .box__ttl__image__vertical img {
          width: 100%; }
        .box__ttl__image__vertical figcaption {
          margin: 0 10px;
          font-size: 75%;
          line-height: 1.3; }
      .box__ttl__image img {
        width: 100%; }
      .box__ttl__image figcaption {
        margin: 0 10px;
        font-size: 75%;
        line-height: 1.3; }
    .box__ttl__txt {
      display: flex;
      flex-direction: column;
      justify-content: center; }
      .box__ttl__txt h2 {
        font-size: clamp(18px, calc( 15.55px + 0.7523vw ), 30px);
        margin-bottom: 2rem; }
        @media (max-width: 640px) {
          .box__ttl__txt h2 {
            margin-bottom: 1rem; } }
      .box__ttl__txt p span {
        font-weight: 600;
        margin: 0; }
      @media (max-width: 640px) {
        .box__ttl__txt .saison-note {
          text-align: left; } }
      .box__ttl__txt p.note {
        margin: 2rem 0 0; }
      .box__ttl__txt .special {
        margin-top: 1rem; }
        .box__ttl__txt .special .special-wrap {
          padding: 2rem 2rem 1.5rem;
          background: #000000;
          color: white;
          display: inline-block;
          line-height: 1.6;
          position: relative; }
          .box__ttl__txt .special .special-wrap::before {
            position: absolute;
            content: '';
            top: 0;
            left: 0;
            width: 100%;
            height: 8px;
            background: #276ef1; }
          @media (max-width: 640px) {
            .box__ttl__txt .special .special-wrap {
              padding: .5rem; } }
        .box__ttl__txt .special .emp {
          font-weight: 600;
          margin: 0 0 1rem; }
        .box__ttl__txt .special .shrink {
          line-height: 1.3; }
  .box__table {
    width: 100%;
    max-width: 1080px;
    margin: auto;
    padding-top: 3rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /*td.detail{width:60%;margin-left:1rem;background-color: $light-tonal-gray;@include sp{width:50%;}}*/ }
    @media (max-width: 1200px) {
      .box__table {
        max-width: none; } }
    @media (max-width: 640px) {
      .box__table {
        padding-top: 2rem; } }
    .box__table p {
      margin: 0 8px;
      font-feature-settings: 'palt'; }
      @media (max-width: 640px) {
        .box__table p {
          margin: 0 5px; } }
    .box__table p.limited-bonus {
      font-size: 120%; }
    .box__table table {
      width: 100%;
      border-collapse: separate;
      border-spacing: 8px;
      text-align: center;
      color: #000000;
      line-height: 1.5;
      box-sizing: border-box; }
      @media (max-width: 640px) {
        .box__table table {
          width: 125%;
          border-spacing: 5px; } }
      @media (max-width: 640px) {
        .box__table table.apply-period {
          width: 100%; } }
      .box__table table .js-accordion-target.is-hidden {
        display: none; }
      .box__table table .js-accordion-target.is-open {
        display: table-row; }
    .box__table #js-trigger-row td {
      border: none; }
    .box__table #js-trigger-row .table-toggle-btn {
      padding: 1rem 0;
      text-align: center; }
      .box__table #js-trigger-row .table-toggle-btn button {
        border: none;
        background: none;
        color: #1414d2;
        text-decoration: underline; }
      .box__table #js-trigger-row .table-toggle-btn #js-table-trigger {
        cursor: pointer; }
    .box__table td {
      background-color: #f7f4f2;
      white-space: normal !important;
      font-feature-settings: 'palt';
      font-size: clamp(14px, calc( 13.59px + 0.1253vw ), 16px);
      padding: 1.5rem;
      vertical-align: middle; }
      @media (max-width: 880px) {
        .box__table td {
          padding: 0.8rem; } }
      @media (max-width: 640px) {
        .box__table td {
          padding: 0.5rem;
          font-size: 12px; } }
      .box__table td p {
        margin: 0;
        font-feature-settings: 'palt'; }
        .box__table td p span {
          color: #1414d2;
          font-size: 80%;
          display: inline-block;
          line-height: 1.3; }
        .box__table td p span.red {
          color: #ff4b4b; }
      .box__table td .addition {
        display: flex;
        flex-direction: column; }
        .box__table td .addition span {
          color: #000000;
          font-size: 80%; }
        .box__table td .addition span.black {
          font-weight: 600; }
      .box__table td .split {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: left; }
        @media (max-width: 880px) {
          .box__table td .split {
            flex-direction: column; } }
    .box__table td.card-type {
      background-color: #1414d2;
      color: #ffffff;
      border-radius: 10px 10px 0 0; }
    .box__table td.platinum-title {
      background-color: #1414d2;
      color: #ffffff; }
    .box__table td.offer {
      background-color: #051464;
      text-align: left;
      color: #ffffff; }
      @media (max-width: 1200px) {
        .box__table td.offer {
          min-width: 76px;
          max-width: 200px; } }
      .box__table td.offer.saison-only {
        min-width: 160px; }
        @media (max-width: 640px) {
          .box__table td.offer.saison-only {
            min-width: 120px; } }
    .box__table td.special {
      background-color: #ffbeb9;
      text-align: left; }
    .box__table td.none {
      background-color: #ffffff; }
    .box__table td.saison {
      width: 140px; }
      @media (max-width: 1200px) {
        .box__table td.saison {
          width: auto;
          min-width: 110px; } }
      @media (max-width: 640px) {
        .box__table td.saison {
          min-width: 90px; } }
    .box__table td.brand {
      background: #ffffff;
      border: 1px solid #1414d2;
      max-width: 110px; }
    .box__table .brand-logo {
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
      gap: 1rem; }
      .box__table .brand-logo img {
        width: 40px;
        height: auto; }
    @media (max-width: 640px) {
      .box__table {
        width: 100%;
        margin: 0 auto; } }
  .box__button {
    margin: 3rem 0;
    text-align: center; }
    .box__button p {
      margin: 2rem 0; }
      .box__button p a {
        color: #1414d2; }
        .box__button p a:hover {
          color: #0D0D8F; }
    .box__button p.alert {
      font-size: 90%;
      color: #ff4b4b; }
    .box__button .btn {
      padding: 1.4rem 15rem 1.5rem 15rem; }
      @media (max-width: 640px) {
        .box__button .btn {
          padding: 1.4rem 0 1.5rem;
          width: 95%; } }

#cautions-saison, #cautions-jcb, #cautions-jcb-platinum, #cautions-mufg, #cautions-diners,
#cautions-uc {
  display: none; }

.modal-box {
  padding: 3rem 6rem 5rem 6rem; }
  @media (max-width: 640px) {
    .modal-box {
      padding: 3rem 1.5rem; } }
  .modal-box h2 {
    font-size: clamp(18px, calc( 15.55px + 0.7523vw ), 30px);
    font-weight: 600;
    text-align: center;
    margin: 0; }
    .modal-box h2 p {
      font-size: 80%; }
  .modal-box .modal-content {
    width: 100%;
    height: 68vh;
    overflow-y: auto;
    margin-top: 2rem; }
    @media (max-width: 640px) {
      .modal-box .modal-content {
        height: 70vh; } }
    .modal-box .modal-content__label h4 {
      color: #1414d2;
      font-size: 120%;
      font-weight: 600;
      margin: 4rem 0 2rem;
      display: flex;
      line-height: 1.3; }
      @media (max-width: 640px) {
        .modal-box .modal-content__label h4 {
          margin: 3rem 0 1.5rem; } }
      .modal-box .modal-content__label h4::before {
        content: '';
        display: inline-block;
        width: 5px;
        padding: .5rem 0;
        margin-right: 1rem;
        border-left: 5px solid #1414d2; }
    .modal-box .modal-content__content {
      background-color: #f7f4f2;
      padding: 2rem; }
      @media (max-width: 640px) {
        .modal-box .modal-content__content {
          padding: 1rem; } }
      .modal-box .modal-content__content p.exception {
        padding-left: 1rem; }
      .modal-box .modal-content__content p.exception:nth-child(1) {
        padding-bottom: 1rem; }
      .modal-box .modal-content__content ul {
        list-style: none;
        padding-left: 1.5em; }
        .modal-box .modal-content__content ul li {
          text-indent: -1.1em; }
    .modal-box .modal-content .offerdate {
      margin-left: 1rem;
      margin-top: 2rem; }
      .modal-box .modal-content .offerdate table {
        width: 70%;
        border-collapse: collapse;
        text-align: center;
        color: #000000;
        line-height: 1.5;
        font-size: 80%; }
        @media (max-width: 640px) {
          .modal-box .modal-content .offerdate table {
            width: 100%; } }
      .modal-box .modal-content .offerdate td {
        background-color: #ffffff;
        padding: 1rem;
        vertical-align: middle;
        border: 1px solid #1414d2; }
        .modal-box .modal-content .offerdate td p {
          margin: 0;
          font-feature-settings: 'palt'; }
      .modal-box .modal-content .offerdate td.ttl {
        background-color: #276ef1;
        color: #ffffff; }

/* ------------------
免責事項
------------------*/
.disclaimer {
  background: #1414d2; }
  .disclaimer h2 {
    text-align: center;
    color: #ffffff; }
  .disclaimer__box {
    background-color: #ffffff;
    color: #000000;
    border-radius: 10px;
    padding: 5rem 7rem;
    margin-top: 4.5rem; }
    @media (max-width: 640px) {
      .disclaimer__box {
        padding: 2rem;
        margin-top: 2rem; } }

/* ------------------
Modal
------------------
.modal-window {
	padding: 0rem;
	
	&__contents {
		.ttl-img {
			position: relative;
			.ttl {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				font-size: clamp(16px, 4vw, 30px);
		font-weight: bold;
		//background: $dark-blue;
		//color: #fff;
		padding: 2rem;
				color: #fff;
				filter: drop-shadow(0 0px 10px rgba(0, 0, 0, 0.6))
			}
			img {
				border-radius: 5px 5px 0 0;
			}
			
		}
		.box {
				background: $light-tonal-gray;
				padding: 1rem;
				margin: 0 0 1rem;
			}
		&-txt {
			padding: 2rem 4rem;
			@include sp {
				padding: 1rem;
			}
		}
	}
	.btn {
		margin: 2rem auto 2rem;
	}
}*/