@charset "UTF-8";
/* ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■
** ＜20周年記念ページ＞
**
** ▼ こちらのスタイルシートには、ページ共通のCSSを記述してください。▼
** ■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■■ */
:root {
  --content-width: 1012px;
  --txt-80: 80px;
  --txt-64: 64px;
  --txt-54: 54px;
  --txt-36: 36px;
  --txt-32: 32px;
  --txt-30: 30px;
  --txt-28: 28px;
  --txt-26: 26px;
  --txt-24: 24px;
  --txt-22: 22px;
  --txt-21: 21px;
  --txt-20: 20px;
  --txt-18: 18px;
  --txt-16: 16px;
  --txt-15: 15px;
  --txt-14: 14px;
  --txt-13: 13px;
  --txt-12: 12px;
  --ff-primary: 'Noto Sans JP', sans-serif;
  --ff-secondary: 'Noto Serif JP', serif;
  --ff-en: 'Lora', serif;
  --fw-black: 900;
  --fw-bold: 700;
  --fw-semibold: 600;
  --fw-medium: 500;
  --clr-primary: #a39848;
  --clr-gold: #c7bc6b;
  --clr-white: #fff;
  --clr-black: #000;
  --clr-black-02: #333;
  --clr-beige-01: #959676;
  --clr-beige-02: #9d8227;
  --clr-light-gray: #f2f2f2;
  --lh-large: 2;
  --lh-medium: 1.7;
  --lh-small: 1;
  --ls-large: 0.06em;
  --ls-small: 0.02em;
  --ls-small-tight: -0.05em;
}

/**
 * 共通
 * ---------------------------------------- */
#contents {
  width: 100%;
}

#breadcrumbs {
  max-width: var(--content-width);
  margin-right: auto;
  margin-left: auto;
}

a:hover {
  color: currentColor;
  text-decoration: initial;
}

.rasin-20thlp * {
  font-family: var(--ff-primary) !important;
  font-size: 16px;
  line-height: normal;
}

/**
 * グリッドレイアウト
 * ---------------------------------------- */
.grid {
  display: grid;
}

.grid--justify-items-center {
  justify-items: center;
}

.grid--col-3 {
  grid-template-columns: repeat(3, 1fr);
}

.grid--gap-x-15 {
  row-gap: 15px;
}

.grid--separator-line {
  border-top: 1px solid var(--clr-black);
}

/**
 * フレックスレイアウト
 * ---------------------------------------- */
.flex {
  display: flex;
}

.flex--items-center {
  align-items: center;
}

.flex--items-end {
  align-items: flex-end;
}

.flex--justify-center {
  justify-content: center;
}

.flex--justify-end {
  justify-content: flex-end;
}

.flex--shrink-0 {
  flex-shrink: 0;
}

.flex--nowrap {
  flex-wrap: nowrap;
}

/**
 * テキスト
 * ---------------------------------------- */
/* フォントファミリー */
.text--ff-secondary {
  font-family: var(--ff-secondary) !important;
}

/* 英字フォント */
.text--ff-en {
  font-family: var(--ff-en) !important;
}

/* フォントサイズ */
.text--fz-24 {
  font-size: var(--txt-24);
}

.text--fz-20 {
  font-size: var(--txt-20);
}

.text--fz-18 {
  font-size: var(--txt-18);
}

.text--fz-15 {
  font-size: var(--txt-15);
}

/* フォントウェイト */
.text--fw-black {
  font-weight: var(--fw-black);
}

.text--fw-bold {
  font-weight: var(--fw-bold);
}

.text--fw-semibold {
  font-weight: var(--fw-semibold);
}

.text--fw-medium {
  font-weight: var(--fw-medium);
}

/* 文字色 */
.text--clr-primary {
  color: var(--clr-primary);
}

.text--clr-white {
  color: var(--clr-white);
}

.text--clr-gold {
  color: var(--clr-gold);
}

.text--clr-black-02 {
  color: var(--clr-black-02);
}

.text--clr-beige-01 {
  color: var(--clr-beige-01);
}

.text--clr-beige-02 {
  color: var(--clr-beige-02);
}

/* 下線 */
.text--bb-primary {
  position: relative;
  padding-bottom: 8px;
}

.text--bb-primary::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: 1px;
  background-color: var(--clr-primary);
}

.text--bottom-line {
  position: relative;
  padding-bottom: 8px;
}

.text--bottom-line::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 1px;
  background-color: #d9d9d9;
}

/* 大文字表示 */
.text--uppercase {
  text-transform: uppercase;
}

/* 文字間隔 */
.text--ls-large {
  letter-spacing: var(--ls-large);
}

.text--ls-small {
  letter-spacing: var(--ls-small);
}

.text--ls-small-tight {
  letter-spacing: var(--ls-small-tight);
}

/* 文字行間 */
.text--lh-large {
  line-height: var(--lh-large);
}

.text--lh-medium {
  line-height: var(--lh-medium);
}

.text--lh-small {
  line-height: var(--lh-small);
}

.text--ffs-palt {
  font-feature-settings: 'palt';
}

/* 配置 */
.text--txt-center {
  text-align: center;
}

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

/* ブロックレベル */
.text--block {
  display: block;
}

.text--inline {
  display: inline;
}

/* テキストシャドウ */
.text--txt-shadow {
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.45);
}

/* アンダーライン */
.text--underline {
  position: relative;
}

.text__link {
  color: #40a1fb;
  text-decoration: underline;
  text-decoration-color: #40a1fb;
}

.text__link:hover {
  color: #40a1fb;
}

/**
 * ラベル
 * ---------------------------------------- */
/* タイトル */
.title-label {
  margin-right: auto;
  margin-left: auto;
  padding-top: 8px;
  padding-right: 16px;
  padding-bottom: 8px;
  padding-left: 16px;
  background-color: var(--clr-black);
  text-align: center;
  box-sizing: border-box;
}

.title-label__text {
  color: var(--clr-white);
  line-height: var(--lh-small);
  font-feature-settings: 'palt';
}

/* グラデーション */
.gradation-label {
  font-weight: var(--fw-medium);
  background: linear-gradient(to right, rgba(152, 124, 30, 1) 0%, rgba(232, 222, 116, 1) 50%, rgba(152, 124, 30, 1) 100%);

  text-align: center;
}

/**
 * 共通セクション
 * ---------------------------------------- */
.section {
  position: relative;
  padding-right: 20px;
  padding-left: 20px;
}

.section--bg-light-gray {
  background-color: var(--clr-light-gray);
}

.section.-performance {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  background-image: url('/contents/20th/common/img/bg_performance_pc_01.jpg');
}

.section.-pt-0 {
  padding-top: 0;
}

.section.-pb-20 {
  padding-bottom: 20px;
}

.section.-pb-0 {
  padding-bottom: 0;
}

.section--maxw-832 .section__inner {
  max-width: 832px;
}

.section--maxw-711 .section__inner {
  max-width: 711px;
}

.section--maxw-660 .section__inner {
  max-width: 660px;
}

.section__inner {
  max-width: var(--content-width);
  margin-right: auto;
  margin-left: auto;
}

/**
 * 見出し
 * ---------------------------------------- */
.heading--ff-secondary {
  font-family: var(--ff-secondary) !important;
}

.heading--fz-36 {
  font-size: var(--txt-36);
}

.heading--fz-24 {
  font-size: var(--txt-24);
}

.heading--fw-bold {
  font-weight: var(--fw-bold);
}

.heading--fw-semibold {
  font-weight: var(--fw-semibold);
}

.heading--fw-medium {
  font-weight: var(--fw-medium);
}

.heading--clr-primary {
  color: var(--clr-primary);
}

.heading--clr-white {
  color: var(--clr-white);
}

.heading--txt-center {
  text-align: center;
}

.heading--txt-right {
  text-align: right;
}

.heading--ffs-palt {
  font-feature-settings: 'palt';
}

/**
 * 画像
 * ---------------------------------------- */
.image--block {
  display: block;
}

.image--flex-shrink-0 {
  flex-shrink: 0;
}

.image--relative {
  position: relative;
}

/**
 * 注釈
 * ---------------------------------------- */
.note--clr-white .note__item::before {
  color: var(--clr-white);
}

.note--clr-white .note__text {
  color: var(--clr-white);
}

.note--ff-02 .note__text {
  font-family: 'Noto Serif JP', serif !important;
}

.note--ffs-palt .note__text {
  font-feature-settings: 'palt';
}

.note__item {
  position: relative;
  padding-left: 16px;
  display: flex;
}

.note__item::before {
  content: '※';
  position: absolute;
  top: 0;
  left: 0;
  font-size: var(--txt-15);
  font-weight: var(--fw-medium);
}

.note__text {
  font-size: var(--txt-15);
}

/**
 * 箇条書きリスト
 * ---------------------------------------- */
.bullet__item {
  position: relative;
  padding-left: 8px;
}

.bullet__item::before {
  content: '';
  position: absolute;
  top: 10px;
  left: 0;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background-color: var(--clr-black);
}

.bullet__text {
  font-size: var(--txt-15);
}

/**
 * ボタン
 * ---------------------------------------- */
.button {
  position: relative;
  display: inline-flex;
  align-items: center;
  column-gap: 10px;
  margin-top: initial;
  margin-bottom: initial;
  padding-top: 7px;
  padding-right: 24px;
  padding-bottom: 7px;
  padding-left: 35px;
  background-color: var(--clr-black);
}

.button::after {
  content: '';
  display: inline-block;
  background-color: var(--clr-white);
  clip-path: polygon(100% 50%, 0 0, 0 100%);
}

.button.-secondary {
  padding-top: 10px;
  padding-right: 42px;
  padding-bottom: 10px;
  padding-left: 42px;
  background: linear-gradient(to right, rgba(152, 124, 30, 1) 0%, rgba(232, 222, 116, 1) 50%, rgba(152, 124, 30, 1) 100%);
}

.button.-secondary::after {
  background-color: var(--clr-black);
}

.button.-secondary .button__text {
  font-weight: var(--fw-medium);
  color: var(--clr-black);
}

.button__text {
  color: var(--clr-white);
  line-height: var(--lh-small);
  /* GTMのクリック計測の調整用 */
  pointer-events: none;
}

/**
 * ボックス型（キャンペーン）
 * ---------------------------------------- */
.campaign-box {
  position: relative;
  background-position: bottom right;
  background-repeat: no-repeat;
  background-color: var(--clr-white);
}

/**
 * テーブル
 * ---------------------------------------- */
.table {
  width: 100%;
}

.table__tr:not(:first-child) {
  border-top: 1px solid var(--clr-primary);
}

.table__th,
.table__td {
  padding-top: 18px;
  padding-bottom: 18px;
}

.table__th {
  padding-right: 60px;
}

.table__td {
  padding-right: 18px;
  padding-left: 18px;
}

/**
 * よくあるご質問
 * ---------------------------------------- */
.faq {
  background-repeat: no-repeat;
  background-position: right top;
  background-color: var(--clr-light-gray);
}

.faq__item {
  border-bottom: 1px solid var(--clr-primary);
}

.faq__item:last-child {
  border: none;
}

.faq__button {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.faq__title {
  position: relative;
  letter-spacing: var(--ls-large);
}

.faq__title::before {
  content: 'Q';
  position: absolute;
  top: 0;
}

.faq__icon {
  position: absolute;
  border-top: 1px solid var(--clr-black);
  border-right: 1px solid var(--clr-black);
}

.faq__area {
  position: relative;
  padding-bottom: 24px;
  padding-left: 36px;
}

.faq__area::before {
  content: 'A';
  position: absolute;
  top: 0;
}

/**
 * カード型
 * ---------------------------------------- */
.card {
  display: grid;
  background-image: url('/contents/20th/common/img/bg_20th_card.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}

.card .image {
  grid-area: image;
}

.card .heading {
  grid-area: heading;
}

.card .text {
  grid-area: text;
}

.card:nth-child(2) .text {
  border-bottom: 1px solid var(--clr-primary);
}

.card__link {
  grid-area: link;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-weight: var(--fw-medium);
  font-feature-settings: 'palt';
  color: var(--clr-primary);
  border-bottom: 1px solid var(--clr-primary);
}

.card__link:hover {
  color: var(--clr-primary);
}

.card__link::after {
  content: '';
  width: 14px;
  height: 20px;
  background-color: var(--clr-primary);
  clip-path: polygon(100% 50%, 0 0, 0 100%);
}

/**
 * data属性
 * ---------------------------------------- */
[data-gtm-click] * {
  /* GTMのクリック計測の調整用（data属性の子要素を「none」に調整） */
  pointer-events: none;
}

/**
 * margin-top
 * ---------------------------------------- */
.mt-80 {
  margin-top: 80px;
}

.mt-60 {
  margin-top: 60px;
}

.mt-40 {
  margin-top: 40px;
}

.mt-35 {
  margin-top: 35px;
}

.mt-20 {
  margin-top: 20px;
}

.mt-16 {
  margin-top: 16px;
}

.mt-13 {
  margin-top: 13px;
}

.mt-12 {
  margin-top: 12px;
}

.mt-10 {
  margin-top: 10px;
}

/**
 * margin-bottom
 * ---------------------------------------- */
.mb-24 {
  margin-bottom: 24px;
}

.mb-16 {
  margin-bottom: 16px;
}

/**
 * max-width
 * ---------------------------------------- */
.maxw-696 {
  max-width: 696px;
}

.maxw-591 {
  max-width: 591px;
}

.maxw-604 {
  max-width: 604px;
}

/**
 * margin-right、margin-left
 * ---------------------------------------- */
.mx-auto {
  margin-right: auto;
  margin-left: auto;
}

/**
 * JavaScript
 * ---------------------------------------- */
/* アコーディオン */
.js-accordion-target {
  height: 0;
  overflow: hidden;
  transition: height 0.3s ease;
}

/**
 * PC
 * ---------------------------------------- */
@media screen and (min-width: 769px) {
  .br-pc {
    display: block;
  }

  .br-sp {
    display: none;
  }

  /* PC閲覧時は非表示 */
  .sp-only {
    display: none;
  }

  .grid--pc-col-3 {
    grid-template-columns: repeat(3, 1fr);
  }

  .grid--pc-col-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--pc-gap-x-62 {
    row-gap: 62px;
  }

  .grid--pc-gap-x-50 {
    row-gap: 50px;
  }

  .grid--pc-gap-x-40 {
    row-gap: 40px;
  }

  .grid--pc-gap-x-30 {
    row-gap: 30px;
  }

  .grid--pc-gap-x-23 {
    row-gap: 23px;
  }

  .grid--pc-gap-x-18 {
    row-gap: 18px;
  }

  .grid--pc-gap-x-15 {
    row-gap: 15px;
  }

  .grid--pc-gap-x-10 {
    row-gap: 10px;
  }

  .grid--pc-gap-x-8 {
    row-gap: 8px;
  }

  .grid--pc-gap-y-48 {
    column-gap: 48px;
  }

  .grid--pc-gap-y-44 {
    column-gap: 44px;
  }

  .grid--pc-gap-y-36 {
    column-gap: 36px;
  }

  .grid--pc-gap-y-18 {
    column-gap: 18px;
  }

  .grid--pc-maxw-600 {
    max-width: 600px;
  }

  .grid--pc-maxh-108 {
    max-height: 108px;
  }

  .grid--separator-line {
    margin-top: 80px;
    padding-top: 80px;
  }

  .flex--pc-flex-col {
    flex-direction: column;
  }
  .flex--pc-flex-grow {
    flex-grow: 1;
  }

  .flex--pc-gap-y-50 {
    column-gap: 50px;
  }

  .flex--pc-gap-y-40 {
    column-gap: 40px;
  }

  .flex--pc-gap-y-36 {
    column-gap: 36px;
  }

  .flex--pc-gap-y-34 {
    column-gap: 34px;
  }

  .flex--pc-gap-y-33 {
    column-gap: 33px;
  }

  .flex--pc-gap-y-28 {
    column-gap: 28px;
  }

  .heading--pc-fz-32 {
    font-size: var(--txt-32);
  }

  .heading--pc-fz-26 {
    font-size: var(--txt-26);
  }

  .heading--pc-fz-24 {
    font-size: var(--txt-24);
  }

  .heading--pc-txt-right {
    text-align: right;
  }

  .text--pc-fz-80 {
    font-size: var(--txt-80);
  }

  .text--pc-fz-36 {
    font-size: var(--txt-36);
  }

  .text--pc-fz-28 {
    font-size: var(--txt-28);
  }

  .text--pc-fz-24 {
    font-size: var(--txt-24);
  }

  .text--pc-fz-20 {
    font-size: var(--txt-20);
  }

  .text--pc-fz-18 {
    font-size: var(--txt-18);
  }

  .text--pc-fz-15 {
    font-size: var(--txt-15);
  }

  .text--pc-fz-14 {
    font-size: var(--txt-14);
  }

  .text--pc-txt-right {
    text-align: right;
  }

  .text--pc-txt-center {
    text-align: center;
  }

  .text--pc-underline {
    position: relative;
  }

  .text--pc-underline::before {
    content: '';
    position: absolute;
    background-color: var(--clr-black);
    width: 100%;
    height: 1px;
    bottom: -3px;
    left: 0;
  }

  .button::after {
    width: 14px;
    height: 20px;
  }

  .button__text {
    font-size: var(--txt-20);
  }

  .image--pc-maxw-452 img {
    max-width: 452px;
  }

  .mv {
    background-image: url('/contents/20th/common/img/bg_mv_pc_01.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center bottom;
  }

  .mv__inner {
    max-width: 832px;
    margin-right: auto;
    margin-left: auto;
  }

  .mv__copy {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 45px;
    padding-right: 20px;
    padding-bottom: 90px;
    padding-left: 20px;
  }

  .section {
    padding-top: 80px;
    padding-bottom: 80px;
  }

  .title-label {
    max-width: 620px;
  }

  .title-label__text {
    font-size: var(--txt-20);
  }

  .gradation-label {
    min-width: 260px;
    padding-top: 1px;
    padding-bottom: 1px;
    border-radius: 30px;
  }

  .gradation-label__text {
    font-size: var(--txt-20);
    font-weight: var(--fw-medium);
  }

  .card {
    grid-template-columns: 520px 1fr;
    grid-template-areas:
      'image  heading'
      'image  heading'
      'image    text'
      'image    text'
      'image    text'
      'image    link'
      'image  link';
    grid-template-rows: 0;
    column-gap: 23px;
    padding-top: 32px;
    padding-right: 28px;
    padding-bottom: 32px;
    padding-left: 28px;
    box-shadow: 5px 5px 30px -13px var(--clr-black);
  }

  .card--reverse {
    grid-template-columns: 1fr 520px;
    grid-template-areas:
      'heading image'
      'heading image'
      'text image'
      'text image'
      'text image'
      'link image'
      'link image';
  }

  .card__link {
    font-size: var(--txt-18);
    margin-top: 54px;
    padding-bottom: 8px;
    column-gap: 8px;
  }

  .card:nth-child(3) .card__link {
    margin-top: 40px;
  }

  .card:nth-child(2) .text {
    padding-bottom: 90px;
  }

  .box {
    padding-top: 80px;
    padding-right: 25px;
    padding-bottom: 80px;
    padding-left: 25px;
  }

  .campaign-box {
    padding-top: 80px;
    padding-right: 45px;
    padding-bottom: 80px;
    padding-left: 45px;
    background-image: url('/contents/20th/common/img/bg_campaign_pc_01.png');
    background-size: 601px auto;
  }

  .faq {
    padding-top: 80px;
    padding-right: 80px;
    padding-bottom: 56px;
    padding-left: 80px;
    background-image: url('/contents/20th/common/img/bg_faq_pc_01.png');
    background-size: 601px auto;
  }

  .faq__list {
    margin-top: 24px;
  }

  .faq__button {
    padding-top: 20px;
    padding-right: 32px;
    padding-bottom: 20px;
    padding-left: 8px;
    cursor: pointer;
  }

  .faq__icon {
    top: 45%;
  }

  .faq__button.is-open .faq__icon {
    transform: translateY(-50%) rotate(-45deg);
    top: 50%;
  }

  .faq__area::before {
    font-size: var(--txt-20);
    left: 8px;
  }

  .faq__title {
    padding-left: 28px;
    font-size: var(--txt-20);
  }

  .faq__title::before {
    font-size: var(--txt-20);
    left: 0;
  }

  .faq__icon {
    width: 20px;
    height: 20px;
    top: 45%;
    right: 8px;
    transform: translateY(-50%) rotate(135deg);
  }

  .table__th,
  .table__td {
    font-size: var(--txt-20);
  }

  .mt-pc-118 {
    margin-top: 118px;
  }

  .mt-pc-111 {
    margin-top: 111px;
  }

  .mt-pc-110 {
    margin-top: 110px;
  }

  .mt-pc-100 {
    margin-top: 100px;
  }

  .mt-pc-90 {
    margin-top: 90px;
  }

  .mt-pc-80 {
    margin-top: 80px;
  }

  .mt-pc-63 {
    margin-top: 63px;
  }

  .mt-pc-62 {
    margin-top: 62px;
  }

  .mt-pc-60 {
    margin-top: 60px;
  }

  .mt-pc-57 {
    margin-top: 57px;
  }

  .mt-pc-55 {
    margin-top: 55px;
  }

  .mt-pc-54 {
    margin-top: 54px;
  }

  .mt-pc-52 {
    margin-top: 52px;
  }

  .mt-pc-50 {
    margin-top: 50px;
  }

  .mt-pc-48 {
    margin-top: 48px;
  }

  .mt-pc-40 {
    margin-top: 40px;
  }

  .mt-pc-32 {
    margin-top: 32px;
  }

  .mt-pc-30 {
    margin-top: 30px;
  }

  .mt-pc-27 {
    margin-top: 27px;
  }

  .mt-pc-24 {
    margin-top: 24px;
  }

  .mt-pc-23 {
    margin-top: 23px;
  }

  .mt-pc-21 {
    margin-top: 21px;
  }

  .mt-pc-20 {
    margin-top: 20px;
  }

  .mt-pc-19 {
    margin-top: 19px;
  }

  .mt-pc-18 {
    margin-top: 18px;
  }

  .mt-pc-16 {
    margin-top: 16px;
  }

  .mt-pc-12 {
    margin-top: 12px;
  }

  .mt-pc-11 {
    margin-top: 11px;
  }

  .mt-pc-8 {
    margin-top: 8px;
  }

  .mr-pc-32 {
    margin-right: 32px;
  }

  .pt-pc-57 {
    padding-top: 57px;
  }

  .pt-pc-20 {
    padding-top: 20px;
  }

  .pt-pc-0 {
    padding-top: 0;
  }

  .pb-pc-180 {
    padding-bottom: 180px;
  }

  .pb-pc-12 {
    padding-bottom: 12px;
  }

  .px-pc-58 {
    padding-right: 58px;
    padding-left: 58px;
  }

  .py-pc-100 {
    padding-top: 100px;
    padding-bottom: 100px;
  }

  .py-pc-90 {
    padding-top: 90px;
    padding-bottom: 90px;
  }

  .py-pc-55 {
    padding-top: 55px;
    padding-bottom: 55px;
  }

  .minh-pc-87 {
    min-height: 87px;
  }
}

/**
 * SP
 * ---------------------------------------- */
@media screen and (max-width: 768px) {
  /* 共通 */
  #breadcrumbs {
    padding-right: 15px;
    padding-left: 15px;
  }

  #contents_wrap {
    max-width: 100%;
  }

  #contents section {
    width: initial;
    margin: initial;
    padding-bottom: 40px;
    clear: initial;
  }

  section > div:not(.accordion):not(.customersbox):not(.period):not(.form_t):not(.formlist):not(.titlebar_list):not(.titlebar_g):not(.pager):not(.required):not(.title):not(.formbox):not(.formbox_n):not(.title_c):not(.comment):not(.titlebar_g_o):not(.product_img):not(#sub_img):first-child {
    background: transparent;
    padding: initial;
  }

  .footer-shop-slide {
    background-color: var(--clr-white) !important;
  }

  [class*='col-'] {
    float: initial;
  }

  /* 改行 */
  .br-pc {
    display: none;
  }

  .br-sp {
    display: block;
  }

  /* 表示の切り替え */
  .pc-only {
    display: none;
  }

  /* 共通セクション */
  .section {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  .section--sp-bg-light-gray {
    background-color: var(--clr-light-gray);
  }

  .section.-performance {
    margin-bottom: 40px !important;
    background-image: url('/contents/20th/common/img/bg_performance_sp_01.jpg');
  }

  .section.-shop-info {
    padding-top: 20px !important;
    padding-bottom: 20px !important;
  }

  /* グリッドレイアウト */
  .grid--sp-col-2 {
    grid-template-columns: repeat(2, 1fr);
  }

  .grid--sp-col-1 {
    grid-template-columns: 1fr;
  }

  .grid--sp-gap-x-48 {
    row-gap: 48px;
  }

  .grid--sp-gap-x-40 {
    row-gap: 40px;
  }

  .grid--sp-gap-x-38 {
    row-gap: 38px;
  }

  .grid--sp-gap-x-32 {
    row-gap: 32px;
  }

  .grid--sp-gap-x-28 {
    row-gap: 28px;
  }

  .grid--sp-gap-x-24 {
    row-gap: 24px;
  }

  .grid--sp-gap-x-20 {
    row-gap: 20px;
  }

  .grid--sp-gap-x-16 {
    row-gap: 16px;
  }

  .grid--sp-gap-x-10 {
    row-gap: 10px;
  }

  .grid--sp-gap-x-9 {
    row-gap: 9px;
  }

  .grid--sp-gap-x-4 {
    row-gap: 4px;
  }

  .grid--sp-gap-x-3 {
    row-gap: 3px;
  }

  .grid--sp-gap-y-20 {
    column-gap: 20px;
  }

  .grid--sp-gap-y-16 {
    column-gap: 16px;
  }

  .grid--separator-line {
    margin-top: 30px;
    padding-top: 30px;
  }

  .grid--sp-w-full .grid__item {
    width: 100%;
  }

  /* フレックスレイアウト */
  .flex--sp-flex-col {
    flex-direction: column;
  }

  .flex--sp-flex-col-reverse {
    flex-direction: column-reverse;
  }

  .flex--sp-justify-center {
    justify-content: center;
  }

  .flex--sp-gap-x-40 {
    row-gap: 40px;
  }

  .flex--sp-gap-x-36 {
    row-gap: 36px;
  }

  /* 見出し */
  .heading--sp-fz-28 {
    font-size: var(--txt-28);
  }

  .heading--sp-fz-24 {
    font-size: var(--txt-24);
  }

  .heading--sp-fz-22 {
    font-size: var(--txt-22);
  }

  .heading--sp-fz-20 {
    font-size: var(--txt-20);
  }

  .heading--sp-fz-15 {
    font-size: var(--txt-15);
  }

  .heading--sp-txt-center {
    text-align: center;
  }

  /* テキスト */
  .text--sp-fz-64 {
    font-size: var(--txt-64);
  }

  .text--sp-fz-24 {
    font-size: var(--txt-24);
  }

  .text--sp-fz-21 {
    font-size: var(--txt-21);
  }

  .text--sp-fz-20 {
    font-size: var(--txt-20);
  }

  .text--sp-fz-18 {
    font-size: var(--txt-18);
  }

  .text--sp-fz-16 {
    font-size: var(--txt-16);
  }

  .text--sp-fz-15 {
    font-size: var(--txt-15);
  }

  .text--sp-fz-14 {
    font-size: var(--txt-14);
  }

  .text--sp-fz-13 {
    font-size: var(--txt-13);
  }

  .text--sp-fz-12 {
    font-size: var(--txt-12);
  }

  .text--sp-underline {
    border-bottom: 1px solid var(--clr-black);
  }

  /* text-align */
  .text--sp-txt-center {
    text-align: center;
  }

  /* ボタン */
  .button::after {
    width: 14px;
    height: 16px;
  }

  .button__text {
    font-size: var(--txt-18);
  }

  /* 画像 */
  .image--sp-maxw-medium {
    max-width: 400px;
  }

  .image--sp-maxw-320 {
    max-width: 320px;
  }

  .image--sp-maxw-280 {
    max-width: 280px;
  }

  .image--sp-maxw-220 {
    max-width: 220px;
  }

  .image--sp-maxw-190 {
    max-width: 190px;
  }

  .image--sp-mx-auto {
    margin-right: auto;
    margin-left: auto;
  }

  .image--sp-w-full img {
    width: 100%;
  }

  .image--sp-offer-banner img {
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 65%, rgb(255 255 255 / 0%) 100%);
  }

  /* ラベル（タイトル） */
  .title-label {
    max-width: 450px;
    padding-right: 12px;
    padding-left: 12px;
  }

  .gradation-label {
    min-width: 190px;
    padding-top: 1px;
    padding-bottom: 1px;
    border-radius: 20px;
  }

  /* テーブル */
  .table__th,
  .table__td {
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: var(--txt-15);
  }

  .table__th {
    min-width: 115px;
    padding-right: 4px;
    vertical-align: top;
  }

  .table__td {
    padding-right: 4px;
    padding-left: 4px;
  }

  /* メインビジュアル */
  .mv__copy {
    display: block;
    margin-top: 15px;
  }

  .mv__copy img {
    width: 100%;
  }

  .box {
    padding-top: 25px;
    padding-right: 20px;
    padding-bottom: 25px;
    padding-left: 20px;
  }

  .campaign-box {
    padding-top: 25px;
    padding-right: 16px;
    padding-bottom: 25px;
    padding-left: 16px;
    background-image: url('/contents/20th/common/img/bg_campaign_sp_01.png');
    background-size: 220px auto;
  }

  .card {
    grid-template-columns: 1fr;
    grid-template-areas:
      'heading'
      'image'
      'text'
      'link';
    column-gap: 23px;
    padding-top: 25px;
    padding-right: 20px;
    padding-bottom: 25px;
    padding-left: 20px;
    box-shadow: 5px 5px 30px -13px var(--clr-black);
  }

  .card:nth-child(2) .text {
    padding-bottom: 25px;
  }

  .card__link {
    margin-top: 25px;
    padding-bottom: 8px;
    column-gap: 10px;
    font-size: var(--txt-18);
  }

  .card__link::after {
    width: 12px;
    height: 16px;
  }

  /* よくある質問 */
  .faq {
    padding-top: 25px;
    padding-right: 20px;
    padding-bottom: 11px;
    padding-left: 20px;
    background-image: url('/contents/20th/common/img/bg_faq_sp_01.png');
    background-size: 220px auto;
  }

  .faq__list {
    margin-top: 14px;
  }

  .faq__area {
    padding-left: 24px;
  }

  .faq__area::before {
    left: 4px;
  }

  .faq__button {
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .faq__button.is-open .faq__icon {
    transform: translateY(24px) rotate(-45deg);
  }

  .faq__title {
    padding-left: 24px;
    padding-right: 24px;
    font-size: var(--txt-16);
  }

  .faq__title::before {
    font-size: var(--txt-16);
    left: 4px;
  }

  .faq__icon {
    width: 10px;
    height: 10px;
    top: 0;
    right: 0;
    transform: translateY(18px) rotate(135deg);
  }

  /* 注釈 */
  .note--sp-grid {
    display: grid;
  }

  .note--sp-justify-items-center {
    justify-items: center;
  }

  .note--sp-fz-14 .note__item::before {
    font-size: var(--txt-14);
  }

  .note--sp-fz-14 .note__text {
    font-size: var(--txt-14);
  }

  .note--sp-fz-13 .note__item {
    padding-left: 13px;
  }

  .note--sp-fz-13 .note__item::before {
    font-size: var(--txt-13);
  }

  .note--sp-fz-13 .note__text {
    font-size: var(--txt-13);
  }

  /* margin-top */
  .mt-sp-80 {
    margin-top: 80px;
  }

  .mt-sp-73 {
    margin-top: 73px;
  }

  .mt-sp-57 {
    margin-top: 57px;
  }

  .mt-sp-50 {
    margin-top: 50px;
  }

  .mt-sp-48 {
    margin-top: 48px;
  }

  .mt-sp-40 {
    margin-top: 40px;
  }

  .mt-sp-36 {
    margin-top: 36px;
  }

  .mt-sp-35 {
    margin-top: 35px;
  }

  .mt-sp-30 {
    margin-top: 30px;
  }

  .mt-sp-26 {
    margin-top: 26px;
  }

  .mt-sp-25 {
    margin-top: 25px;
  }

  .mt-sp-24 {
    margin-top: 24px;
  }

  .mt-sp-20 {
    margin-top: 20px;
  }

  .mt-sp-18 {
    margin-top: 18px;
  }

  .mt-sp-16 {
    margin-top: 16px;
  }

  .mt-sp-15 {
    margin-top: 15px;
  }

  .mt-sp-14 {
    margin-top: 14px;
  }

  .mt-sp-13 {
    margin-top: 13px;
  }

  .mt-sp-12 {
    margin-top: 12px;
  }

  .mt-sp-10 {
    margin-top: 10px;
  }

  .mt-sp-9 {
    margin-top: 9px;
  }

  .mt-sp-8 {
    margin-top: 8px;
  }

  .mt-sp-6 {
    margin-top: 6px;
  }

  .mt-sp-5 {
    margin-top: 5px;
  }

  /* padding-top */
  .pt-sp-100 {
    padding-top: 100px;
  }

  .pt-sp-60 {
    padding-top: 60px;
  }

  .pt-sp-40 {
    padding-top: 40px;
  }

  .pt-sp-0 {
    padding-top: initial;
  }

  /* padding-right、padding-left */
  .px-sp-20 {
    padding-right: 20px;
    padding-left: 20px;
  }

  /* padding-top、padding-bottom */
  .py-sp-100 {
    padding-top: 100px;
    padding-bottom: 100px !important;
  }

  .py-sp-60 {
    padding-top: 60px;
    padding-bottom: 60px !important;
  }

  .py-sp-40 {
    padding-top: 40px;
    padding-bottom: 40px;
  }

  /* width（SPのみ要素を横幅いっぱいにする場合） */
  .w-full-sp {
    width: 100%;
  }
}

/**
 * ホバー
 * ---------------------------------------- */
@media (hover: hover) {
  a:hover,
  .coupon-button:hover {
    opacity: 0.7;
    text-decoration: none;
  }

  .text--pc-underline:hover::before {
    opacity: 0;
  }
}