:root {
  --color-business: #005e2d;
  --color-private: #cb8000;
  --color-benefits-title: #e3b600;

  --color-pickup-seat-title-text: #8b9780;
  --color-voice-pickup-bg: #12311b;
  --flex-responsive: flex;
  --grid-responsive: grid;
  --padding-inner-lr: 100px;
  --padding-box30: 30px;
  --padding-description-inner: 110px;
  --padding-points-inner: 25px;

  --owners-benefit-title-orval-height: 6.67vw;

  --color-transition-link-green: linear-gradient(90deg, rgba(0, 57, 18, 1) 54.48%, rgba(0, 64, 23, 1) 63.57%, rgba(0, 82, 37, 1) 76.52%, rgba(0, 94, 45, 1) 82.78%);
}

@media screen and (max-width: 1024px) {
  :root {
    --padding-inner-lr: 50px;
    --padding-description-inner: 0;
    --padding-points-inner: 20px;
  }
}

@media screen and (max-width: 639px) {
  :root {
    --flex-responsive: block;
    --grid-responsive: block;
    --padding-inner-lr: 0;
    --padding-box30: 15px;
  }
}

body {
  overflow-x: hidden;
}

p {
  font-feature-settings: "palt";
}

.howto #main-contents {
  padding-bottom: 0;
}

/* {
    outline: 1px solid red;
}*/

/*--------------------------------------
  コンテンツ部共通
*/

.contents-wrap {
  width: 1000px; /*commonでは1200*/
}

.contents-wrap h3 {
  color: var(--color-business);
  text-align: left;
  font-size: 25px;
  letter-spacing: 10px;
  margin-top: 0;
  padding-left: 0;
  padding-right: 0;
}

.contents-wrap .contents-row {
  margin-top: 45px;
  width: 100%;
  max-width: 1000px;
}

.contents-wrap .users-voice {
  display: grid;
  grid-template-columns: max-content auto max-content;
  padding: 30px 24px 30px 45px;
  column-gap: 30px;
  align-items: center;
  border: 1px solid var(--color-business);
  border-radius: 100vw;
}

.contents-wrap .users-voice.private_border {
  border: 1px solid var(--color-private, #cb8000);
}

.contents-wrap .users-voice .voice-title img {
  display: block;
  margin: 0 auto;
}

.contents-wrap .users-voice .voice-title {
  display: flex;
  column-gap: 15px;
}

.contents-wrap .users-voice .voice-title .symbol {
  width: 50px;
  height: auto;
  flex: 0;
}

.contents-wrap .users-voice .voice-title .title {
  width: 160px;
  height: auto;
  flex: 0;
  align-self: center;
  transform: translateY(3px);
}

.contents-wrap .users-voice .voice-text {
  letter-spacing: 2px;
  line-height: 1.8;
  font-weight: bold;
}
.contents-wrap .users-voice .voice-link {
  width: 234px;
}
.contents-wrap .users-voice .voice-link .anchor-transition {
  margin-top: 0;
}
.contents-wrap .users-voice .voice-link .anchor-transition a {
  font-size: 19px;
  padding: 10px 23% 10px 22px;
}


.contents-wrap .useful {
  border-radius: 30px;
  display: grid;
  grid-template-columns: 180px auto;
  column-gap: 30px;
  padding: 30px 40px 25px;
  position: relative;
}

.contents-wrap .useful h3 {
  font-size: 22px;
  letter-spacing: 0;
  line-height: 1.8;
}
.contents-wrap .useful img {
  display: block;
  margin: 0 auto;
}
.contents-wrap .useful .title {
  width: 130px;
}

.contents-wrap .useful .useful-contents ul {
  list-style: none;
  margin-top: 15px;
}

.contents-wrap .useful .useful-contents ul li {
  text-indent: -1em;
  padding-left: 1em;
  font-family: var(--font-family-gothic);
  line-height: 1.4;
  font-size: 14px;
  margin-bottom: 5px;
}

.contents-wrap .useful .useful-contents ul li:before {
  content: "";
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 100%;
  background: var(--color-business);
}

.contents-wrap .useful .useful-contents .note {
  font-family: var(--font-family-gothic);
  margin-top: 15px;
  color: var(--color-business);
}

.contents-wrap .useful .useful-points {
  margin-top: 25px;
}

.contents-wrap .useful .note {
  position: relative;
}

.contents-wrap .useful .note p {
  font-size: 14px;
  display: inline-block;
}

.contents-wrap .useful .note p:after {
  content: "";
  display: inline-block;
  width: 35px;
  height: 14px;
  background: url(../img/how_to/useful-note-arrow.svg) no-repeat bottom / contain;
  margin-bottom: 3px;
}

.contents-wrap .useful .useful-contents .note a {
  color: var(--color-business);
  font-weight: bold;
}

.contents-wrap .useful .useful-contents .business-note {
  font-size: 11px;
  margin-top: 5px;
}
.contents-wrap .useful .e-ticket {
  width: 200px;
  height: auto;
  position: absolute;
  right: 30px;
  bottom: 20px;
}

@media (max-width: 999px) {
  .contents-wrap h3 {
    font-size: 22px;
    letter-spacing: 2px;
  }
  .contents-wrap .contents-row {
    width: 100%;
    column-gap: 20px;
  }
  .contents-wrap .users-voice .voice-title {
    flex-direction: column;
  }
  .contents-wrap .users-voice .voice-text br.pc {
    display: none;
  }
  .contents-wrap .useful .useful-contents .note p br.sp {
    display: block !important;
  }
}

@media (min-width: 900px) and (max-width: 999px) {
  .contents-wrap .useful .e-ticket {
    right: 20vw;
  }
}

@media (min-width: 640px) and (max-width: 999px) {
  .contents-wrap .users-voice .voice-link {
    text-align: center;
  }
  .contents-wrap .contents-row.useful {
    padding-bottom: 60px;
  }
  .contents-wrap .useful .e-ticket {
    width: 150px;
  }
  .contents-wrap .useful .useful-contents .business-note br.sp {
    display: block !important;
  }
}
@media (max-width: 880px) {
  .contents-wrap .users-voice.contents-row {
    grid-template-columns: max-content auto;
    row-gap: 10px;
  }
  .contents-wrap .contents-row .voice-title {
    grid-row: 1 / span 2;
  }
  .contents-wrap .contents-row .voice-link {
    margin-left: auto;
    margin-right: auto;
  }
}
@media (max-width: 639px) {
  .contents-wrap h3 {
    font-size: 21px;
  }
  .contents-wrap .users-voice.contents-row {
    grid-template-columns: 1fr;
    row-gap: 20px;
    padding: 25px 15px;
    border-radius: 30px;
  }
  .contents-wrap .users-voice .voice-title {
    justify-content: center;
    flex-direction: row;
    align-items: center;
  }
  .contents-wrap .voice-title .symbol,
  .contents-wrap .voice-title .title {
    margin: 0 !important;
  }
  .contents-wrap .users-voice .voice-text {
    letter-spacing: 0;
    font-size: 12px;
    line-height: 1.5;
    text-align: center;
  }
  .contents-wrap .users-voice .voice-link {
    text-align: center;
  }
  .contents-wrap .users-voice .anchor-transition {
    margin-top: 0;
  }
  .contents-wrap .useful {
    grid-template-columns: 1fr;
    padding: 30px 15px 25px;
    row-gap: 20px;
  }
  .contents-wrap .useful .title {
    width: 65%;
  }

  .contents-wrap .useful .note p {
    font-size: 12px;
  }
  .contents-wrap .useful h3 {
    padding: 0;
    font-size: 18px;
    text-align: center;
    line-height: 1.4;
  }
  .contents-wrap .useful .useful-points.sp {
    width: 80%;
  }
  .contents-wrap .useful .useful-contents ul li {
    font-size: 12px;
  }
  .contents-wrap .useful .e-ticket {
    width: 100px;
    right: 10px;
    bottom: 20px;
  }
  .contents-wrap .useful .note p:after {
    width: 25px;
    height: 10px;
  }
}

@media screen and (min-width: 640px) {
  #main-top #main-contents:after {
    display: none;
  }
  .howto #main-contents {
    padding-bottom: 0;
  }
}

/*ボタン　矢印調整*/
.anchor-transition a:after {
  right: 10% !important;
}

/*--------------------------------------
  メインビジュアル
*/
@media screen and (max-width: 639px) {
  #main-visual .header-contents .header-lead {
    font-size: 15px;
    padding-left: 7px;
  }
}

/****---- コンテンツここから ----***/
/*********************************************
for BUSINESS 法人契約のお客様 営業ツールとして活用
**********************************************/
#business {
  padding-top: 100px;
}

.mv {
  position: relative;
  max-width: 1000px;
  margin: 0 auto;
  width: 100%;
}

.mv img {
  display: block;
  width: 100%;
  height: 770px;
}

/*ビジネス・スタッフ・プライベート兼用*/
.business__label,
.private__label {
  position: absolute;
  top: 0;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 450px;
  padding: 30px 25px;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/*ビジネス・スタッフ*/
.business__label {
  background: linear-gradient(90deg, #003912 0%, #006833 100%);
}

/*プライベート*/
.private__label {
  background: #bd9000;
}

.business__label h2,
.private__label h2 {
  margin: 0;
  font-family: serif;
  font-size: 60px;
  font-family: var(--font-family-alphanumeric-serif);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.business__label p,
.private__label p {
  margin: 0;
  font-size: clamp(0.9rem, 1.6vw, 1.4rem);
  line-height: 1.8;
}

/****スマホ****/
@media (max-width: 1300px) {
  #main-visual:has(.header-contents) {
    aspect-ratio: auto;
  }

  .mv img {
    height: auto;
  }

  .business__label,
  .private__label {
    font-size: 30px;
  }
}

@media (max-width: 1100px) {
  #main-visual:has(.header-contents) {
    aspect-ratio: auto;
  }
}

@media (max-width: 639px) {
  #business {
    margin-top: 10px;
    padding-top: 120px;
  }
  .business__label h2,
  .private__label h2 {
    font-size: 40px;
    margin-bottom: 6px;
    min-height: 0;
  }
  .business__label,
  .private__label {
    width: 80%;
    transform: translate(-50%, -80%);
    padding: 20px;
  }
}

/*********************************************
 satisfy-wrap 90％以上のご契約者様にご満足いただいております
**********************************************/
/*ビジネス・スタッフ・プライベート兼用*/
.satisfy-wrap,
.private-wrap {
  margin: 50px 0 0 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/*ビジネス・スタッフ*/
.satisfy-wrap {
  background: #e6efea;
}

/*プライベート*/
.private-wrap {
  background: #ede4c7;
}

.satisfy-wrap .contents-row,
.private-wrap .contents-row {
  margin: 0 auto;
  padding: 30px 0;
}

/**スマホ用**/
@media (max-width: 639px) {
  .satisfy-wrap .contents-row,
  .private-wrap .contents-row {
    max-width: 90%;
    padding: 20px 20px;
  }
}

/*ビジネス・スタッフ・プライベート兼用*/
.satisfy-title,
.private-title {
  font-family: var(--font-family-mincho);
  font-weight: bold;
  font-size: 27px;
  line-height: 1;
  padding: 10px 0;
  text-align: center;
  position: relative;
  width: 100vw;
  max-width: none;
  box-sizing: border-box;
  margin: 0 calc(50% - 50vw) 25px;
  letter-spacing: 0.05em;
}

.satisfy-title span,
.private-title span {
  color: #fff33f;
}

.satisfy-title span.bigtxt,
.private-title span.bigtxt {
  font-size: 1.3em;
}

/*ビジネス・スタッフ*/
.satisfy-title {
  background: linear-gradient(90deg, #003912 0%, #006833 100%);
  padding: 10px 0 15px;
}

/*プライベート*/
.private-title {
  background: linear-gradient(to right, #c15f1b, #c8940b, #c15f1b);
  padding: 10px 0 20px;
}

@media screen and (min-width: 640px) and (max-width: 859px) {
  .satisfy-title,
  .private-title {
    font-size: 22px;
    padding: 20px;
  }
}

.satisfy .graph {
  gap: 0;
  padding: 0 20px;
}

.satisfy .graph img {
  width: 100%;
  height: auto;
}

@media screen and (min-width: 640px) {
  .satisfy .graph > div:first-child {
    padding-right: 30px;
  }

  .satisfy .graph > div:last-child {
    padding-left: 30px;
    border-left: 1px solid #ccc;
  }
}

@media (max-width: 639px) {
  .satisfy .graph {
    padding: 0;
  }

  .satisfy .graph > div:last-child {
    margin-top: 30px;
  }

  .satisfy-title,
  .private-title {
    font-size: 26px;
    padding: 15px 0 20px;
    line-height: 1.3;
    margin-bottom: 15px;
  }

  .satisfy-title span.bigtxt,
  .private-title span.bigtxt {
    font-size: 28px;
  }

  .contents-wrap .contents-row:has(> .satisfy-title) {
    margin-top: 30px;
  }

  .contents-wrap .contents-row:has(> .private-title) {
    margin-top: 30px;
  }

  /*.contents-wrap .contents-row {
    width: 95%;
  }*/

  .contents-wrap .contents-row > .two-column {
    row-gap: 5px;
  }
}

/*********************************************
guest-section 大切なお客様を非日常の特等席へ 
**********************************************/
.guest-section {
  width: 100%;
  margin: 30px auto 0;
  padding: 0 !important;
}

/* 中央寄せをインナー枠 */
.guest-section__inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  width: 100%;
}

/*ビジネス・スタッフ・プライベート兼用*/
.guest-section .left,
.guest-section .left_private {
  flex: 1;
  padding: 100px 60px;
  margin-top: 80px; /* 画像が上にはみ出す分 */
  position: relative;
  z-index: 1;
}

/*ビジネス・スタッフ*/
.guest-section .left {
  background: #ebf1ee;
}
/*プライベート*/
.guest-section .left_private {
  background: #ede4c7;
}

.guest-section .right {
  flex: 1;
  margin-left: -80px; /* 左ブロックに重ねる */
  margin-bottom: 70px; /* 画像を上に持ち上げる */
  position: relative;
  z-index: 2;
}

.guest-section .right img {
  width: 100%;
  display: block;
}

/** スマホ用 **/
@media (max-width: 1000px) {
  .guest-section {
    padding: 40px 20px;
  }
  .guest-section__inner {
    display: block; /* スマホ時は縦並びに */
  }
  .guest-section .right {
    margin-left: 0;
    margin-bottom: 0;
  }

  /*
  .guest-section .right img {
    height: 300px;
  }
   */

  .guest-section .left,
  .guest-section .left_private {
    padding: 30px 20px 30px 20px;
    margin-top: 0;
  }
}

/*********************************************
users-voice ご利用者様の声 
**********************************************/
/* Business */
#business .useful {
  background: #ebf3d8;
}

/*********************************************
pickup-seat　ビジネス利用にオススメのシートをご紹介
**********************************************/
/*** 背景色 ***/

/*ビジネス・スタッフ*/
.pickup-wrap {
  background: #e6efea;
  margin: 50px 0 0 0;
  width: 100vw;
  margin-left: calc(50% - 50vw);
}

/*プライベート*/
.private-wrap {
  background: #ede4c7;
}

.pickup-section {
  width: 100%;
  margin: 0 auto;
  padding: 50px 0 60px 0;
}

/* 中央寄せをインナー枠 */
.pickup-section__inner {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  align-items: flex-end;
  width: 100%;
}

.pickup-section__inner p {
  font-family: var(--font-family-gothic);
}

.pickup-title_wrap {
  max-width: 1000px;
  margin: 0 auto -40px auto;
}

.pickup-title_wrap p {
  font-weight: bold;
}

/*** h2 ***/
/*ビジネス・スタッフ・プライベート兼用*/
.pickup-title_wrap h2 {
  margin-top: 0;
  text-align: left;
  font-size: 60px;
  margin-bottom: 0;
  line-height: 1;
  font-family: var(--font-family-alphanumeric-serif);
  font-weight: 400;
  color: #005e2d;
}

/*プライベート*/
.private-wrap h2 {
  color: #cb8000 !important;
}

.pickup-title_wrap p {
  font-size: 20px;
  margin-top: 20px;
}

.pickup-section .left h3,
.private-wrap h3 {
  color: #fff !important;
}

/*** 左矩形 ***/
/*ビジネス・スタッフ・プライベート兼用*/
.pickup-section .left,
.pickup-section .left_ {
  flex: 1;
  padding: 40px 60px 50px 0;
  margin-top: 60px;
  align-self: flex-start;
  position: relative;
  z-index: 1;
  color: #fff;
}

/* 背景だけ左端まで伸ばす */
.pickup-section .left::before,
.pickup-section .left_::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  right: 100%;
  width: 100vw;
  background: inherit;
  z-index: -1;
}

/*ビジネス・スタッフ*/
.pickup-section .left {
  background: #005e2d;
}
/*プライベート*/
.pickup-section .left_ {
  background: #cb8000;
}

/*** before ***/
/*ビジネス・スタッフ*/
.pickup-section .anchor-transition:before {
  width: 60%;
  background: linear-gradient(to right, #c5c9b8 0%, #ffffff 50%, #c5c9b8 100%);
}

/*プライベート*/
.private-wrap .pickup-section .anchor-transition:before {
  width: 60%;
  background: linear-gradient(to right, #ffffff99 0%, #ffffff 50%, #ffffff99 100%) !important;
}

/*ビジネス・スタッフ・プライベート兼用*/
.pickup-section .anchor-transition a,
.private-wrap.pickup-section .anchor-transition a {
  padding: 12px 10% 12px 19px;
  width: 60%;
}
.pickup-section .anchor-transition a {
  color: #005e2d;
}

/*プライベート*/
.private-wrap .pickup-section .anchor-transition a {
  color: #cb8000;
}

/*ビジネス・スタッフ*/
.pickup-section .anchor-transition a:after {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='45.1' height='6.93' viewBox='0 0 45.1 6.93'><polyline fill='none' stroke='%23005e2d' stroke-miterlimit='10' stroke-width='1' points='0 6.68 44.5 6.68 38 .18' vector-effect='non-scaling-stroke'/></svg>") no-repeat top / contain;
  transition: var(--transition);
}

/*プライベート*/
.private-wrap .pickup-section .anchor-transition a:after {
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='45.1' height='6.93' viewBox='0 0 45.1 6.93'><polyline fill='none' stroke='%23cb8000' stroke-miterlimit='10' stroke-width='1' points='0 6.68 44.5 6.68 38 .18' vector-effect='non-scaling-stroke'/></svg>") no-repeat top / contain;
  transition: var(--transition);
}

.pickup-section .right {
  flex: 1;
  margin-left: -70px;
  align-self: flex-start;
  margin-top: -95px;
  margin-bottom: 0;
  position: relative;
  z-index: 2;
}

.pickup-section .right img {
  width: 100%;
  display: block;
  /*height: 460px;*/
}

.seat_space {
  margin-top: 60px;
}

/**** スマホ用 1000 ****/
@media (max-width: 1000px) {
  .seat_space {
    margin-top: -50px;
    padding: 0 0 60px 0;
  }

  .pickup-title_wrap {
    width: 90%;
    margin: 0 auto;
  }
  .pickup-title_wrap h2 {
    font-size: 40px;
  }
  .pickup-title_wrap p {
    font-size: 16px;
    margin-top: 10px;
  }
  .pickup-section__inner {
    display: block;
    width: 90%;
  }
  .pickup-section .right {
    margin: 0;
    position: static;
    z-index: auto;
  }
  .pickup-section .right img {
    width: 100%;
    height: auto;
    /*height: 300px;*/
  }
  .pickup-section .left,
  .pickup-section .left_ {
    margin: 20px 0 0 0;
    padding: 30px;
    position: static;
    z-index: auto;
  }

  .pickup-section .left::before,
  .pickup-section .left_::before {
    content: none;
  }

  .pickup-section .left h3 {
    font-size: 24px;
    letter-spacing: 2px;
  }
  .pickup-section .anchor-transition a,
  .pickup-section .anchor-transition:before,
  .private-wrap .pickup-section .anchor-transition a,
  .private-wrap .pickup-section .anchor-transition:before {
    width: 100%;
  }
}

/*--------------------------------------
  活用方法
--------------------------------------*/
/*
section > div:not(.category-main) {
  margin-top: 60px;
}
  */

/* カテゴリごとのメイン部分 */
.category-main-wrap img {
  width: 100%;
}

@media screen and (min-width: 1200px) {
  .inline {
    display: inline-block;
  }
}

@media screen and (min-width: 640px) {
  .category-main-wrap {
    grid-template-columns: repeat(20, 1fr);
    column-gap: 30px;
    row-gap: 50px;
  }
}

@media screen and (max-width: 639px) {
  .category-main-wrap {
    grid-template-columns: 23% 1fr;
    gap: 13px;
  }

  .category-main-wrap .related-diagram {
    order: 3;
    grid-column: 1 / span 2;
    margin-top: 20px;
  }
  section > div:not(.category-main) {
    margin-top: 0;
  }
}

@media screen and (min-width: 640px) and (max-width: 860px) {
  section > div:not(.category-main) {
    padding-left: 0;
    padding-right: 0;
  }
}

/* 満足度 */
/* 写真と活用方法ポイント */

@media screen and (min-width: 640px) and (max-width: 859px) {
  .satisfy-title,
  .private-title {
    font-size: 22px;
    padding: 20px;
  }
}

@media screen and (max-width: 639px) {
  .benefit-box p.benefit-sublead {
    width: calc(100% + 49px) !important;
    text-align: center;
    font-size: 18px;
    background: #970811 !important;
    box-sizing: border-box;
  }
}
/* owners benefits */
.owners-benefits-wrap {
  background: linear-gradient(90deg, rgba(185, 148, 152, 1) 0%, rgba(209, 183, 185, 1) 50.25%, rgba(185, 148, 152, 1) 100%);
  position: relative;
  margin-top: 0px;
  padding-top: 60px;
  padding-bottom: 40px;
}

.owners-benefits-wrap h3.heading {
  text-align: center;
  color: #800811;
  font-size: 90px;
  font-family: var(--font-family-alphanumeric-serif);
  font-weight: 400;
}

@media (max-width: 639px) {
  .owners-benefits-wrap h3.heading {
    font-size: 40px;
  }
}

.owners-benefits-wrap h3.heading img {
  max-width: 100%;
}
.contents .main-text {
  line-height: 2.2;
  letter-spacing: 0.1em;
}

.boldtxt {
  font-weight: bold;
}

.owners-benefits p.benefits-lead {
  font-size: 20px;
  text-align: center;
  font-weight: 500;
}

.owners-benefits p.benefits-lead span {
  display: inline-block;
  font-weight: bold;
}

.owners-benefits-wrap .contents-wrap {
  margin-top: 15px;
}

.owners-benefits-wrap .contents-wrap .owners-benefits {
  margin: 0 auto;
}

.owners-benefits .right-column {
  margin-top: 15px;
  display: flex;
  gap: 15px;
  justify-content: space-between;
}
.benefit-box {
  padding: 25px;
  border: 3px solid var(--color-contents-dark-red);
}

.box-2 .benefit-more .anchor-transition a {
  padding: 10px 10% 10px 12px !important;
}

.benefit-box p.benefit-sublead {
  position: relative;
  left: -26px;
  z-index: 2;
  background: linear-gradient(to right, var(--color-contents-dark-red) 70%, transparent 100%);
  color: var(--color-benefits-title);
  font-family: var(--font-family-mincho);
  display: inline-block;
  font-weight: bold;
  font-size: 17px;
  padding: 8px 80px 8px 20px;
  letter-spacing: 2px !important;
}

.benefit-box .benefit-lead {
  font-family: var(--font-family-mincho);
  font-weight: 500;
  margin-top: 10px;
  margin-bottom: 10px;
  font-size: 20px;
  font-weight: bold;
}

.benefit-box .benefit-contents {
  font-size: 14px;
  font-family: var(--font-family-gothic);
}

.benefit-box .benefit-contents .benefit-detail {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.benefit-box .benefit-contents ul.benefit-list {
  margin-bottom: 15px;
  z-index: 1;
  position: relative;
}
.benefit-box .benefit-contents ul.benefit-list li {
  list-style: none;
  margin-bottom: 3px;
}
.benefit-box .benefit-contents ul.benefit-list li::before {
  content: "●";
  color: var(--color-contents-dark-red);
  margin-right: 0.2em;
}
.benefit-box .benefit-contents .benefit-annotation {
  font-size: 11px;
}

.benefit-box .benefit-contents .benefit-annotation ul {
  list-style: none;
}
.benefit-box .benefit-contents .benefit-annotation ul li {
  text-indent: -1em;
  padding-left: 1em;
}
.benefit-box .benefit-contents .benefit-annotation ul li:before {
  content: "※";
}

.benefit-box .benefit-contents img {
  max-width: 100%;
  height: auto;
}

a.benefit_btn {
  display: block;
  width: max-content;
  box-sizing: border-box;
  color: #fff;
  font-family: var(--font-family-mincho);
  font-size: 30px;
  font-weight: 400;
  padding: 15px var(--padding-inner-lr);
  text-decoration: none;
  text-align: center;
  margin: 0 auto;
  background: var(--color-contents-dark-red);
  margin-top: 35px;
  border-radius: 50px;
}

.benefit_btn:hover {
  opacity: 0.8;
}

section .benefit-box {
  position: relative;
  width: 100%;
  background: #fff;
}

section a.benefit-box {
  text-decoration: none;
  color: #000;
  display: block;
}

.business-note {
  font-size: 13px;
  margin-top: 20px;
  font-family: var(--font-family-mincho);
  text-indent: -1em;
  padding-left: 1em;
}

.owners-benefits .box-1 {
  margin-top: 40px;
}

.benefit-lead .emphasis {
  color: var(--color-contents-dark-red);
}

.benefit-box .benefit-annotation {
  margin-top: 10px;
  font-size: 10px;
  letter-spacing: -0.5px;
}

@media screen and (max-width: 999px) {
  .contents .main-text br.pc {
    display: none;
  }
}

@media screen and (max-width: 639px) {
  .category-main-wrap img.category-main {
    aspect-ratio: 296 / 242;
    object-fit: cover;
  }
  .contents .main-text {
    font-size: 16px;
    line-height: 1.5;
  }

  .owners-benefits-wrap {
    margin-top: 0;
  }

  .owners-benefits-wrap .contents-wrap {
    max-width: 90%;
  }

  .owners-benefits h3.heading {
    font-size: 32px;
  }

  .owners-benefits-wrap h3.heading img {
    width: 80%;
    margin: 0 auto;
  }

  .benefit-box p.benefit-sublead {
    margin-left: 0;
    white-space: nowrap;
  }

  a.benefit_btn {
    font-size: 18px;
    padding: 10px 20px;
  }

  section .benefit-box {
    padding: 35px 23px;
    border: 3px solid var(--color-contents-dark-red);
  }

  .benefit-box .benefit-contents ul {
    text-align: left;
  }
  .business-note {
    font-size: 11px;
  }

  .pickup-seat .pickup-text {
    font-size: 18px;
    letter-spacing: 1px;
  }

  .pickup-seat h4 {
    padding-left: 0;
  }
}

/******************************
* for Business
*/

#business .box-1 .benefit-contents {
  width: 650px;
  max-width: 100%;
  display: grid;
  grid-template-columns: 300px auto;
  gap: 15px;
}

#business .box-1 img.float.pc {
  width: 34%;
  height: auto;
  position: absolute;
  bottom: 50px;
  right: 0;
}

#business .box-1 .present-scene {
  grid-row: span 2;
}

.benefit-box .benefit-lead .standard {
  font-size: 0.75em;
  letter-spacing: -0.5px;
}

@media (min-width: 640px) {
  #business .business-note {
    grid-row: 2;
    grid-column: span 2;
  }
}

@media (max-width: 820px) {
  #business .owners-benefits .right-column {
    flex-wrap: wrap;
  }
  #business .box-1 .benefit-contents {
    grid-template-columns: 1fr;
    width: 100%;
  }
  .benefit-box p.benefit-sublead {
    width: 100%;
    text-align: left;
  }
  #business .box-1 .present-scene {
    width: 100%;
  }
  #business .box-1 img.float.pc {
    display: none !important;
  }
  #business .box-1 img.float.sp {
    display: block !important;
    order: 1;
  }

  #business .box-1 .present-scene {
    width: 100%;
    max-width: 400px;
    height: auto;
    margin-left: auto;
    margin-right: auto;
  }

  #business .box-1 .benefit-annotation br.pc {
    display: none;
  }
  #business .benefit-box .benefit-contents .benefit-annotation {
    order: 3;
  }
  #business .box-1 .benefit-list {
    margin-bottom: 0;
  }
  #business .business-note {
    margin-top: 10px;
  }
}

@media (min-width: 640px) and (max-width: 820px) {
  .benefit-box .benefit-contents .benefit-detail {
    font-size: 16px;
  }
}

@media (max-width: 639px) {
  #business .box-1 .benefit-contents {
    row-gap: 10px;
  }
  #business .benefit-box .benefit-contents .benefit-annotation {
    margin-top: 0;
  }
}

#business .box-2 .benefit-sublead {
  width: 90%;
  padding-left: 20px;
  /*padding-right: 5px;*/
  letter-spacing: 1px;
  /*text-align: center;*/
}

#business .box-2 .benefit-lead {
  margin-top: 0px;
  letter-spacing: 0;
  font-weight: bold;
}

#business .box-2 .benefit-contents {
  margin-top: 15px;
  width: 95%;
  gap: 5px;
  grid-template-columns: 55% auto;
}

#business .box-2 .benefit-more {
  text-align: center;
}

#business .box-2 .anchor-transition {
  width: 60%;
  margin-top: 5px;
}

#business .box-2 .anchor-transition:before {
  background: linear-gradient(90deg, rgba(35, 0, 0, 1) 0%, rgba(182, 30, 45, 1) 100%);
}

@media (min-width: 821px) {
  #business .box-2 {
    padding-right: 5px;
  }
}

@media (max-width: 820px) {
  #business .box-2 .benefit-lead br.pc {
    display: none !important;
  }
  #business .box-2 .benefit-contents {
    grid-template-columns: 1fr;
    row-gap: 20px;
  }
  #business .box-2 .benefit-contents img {
    display: block;
    margin: 0 auto;
  }
  #business .box-2 .benefit-contents img.pc {
    display: none;
  }

  #business .box-2 .benefit-contents img.sp {
    display: block !important;
  }

  #business .box-2 .benefit-contents img.sp2 {
    position: relative;
    top: -20px;
  }
  #business .box-2 .benefit-more {
    margin-top: 20px;
  }
}

@media (min-width: 640px) and (max-width: 820px) {
  #business .box-2 .benefit-contents img.sp {
    width: 60%;
  }
}

#business .box-3 {
  flex-grow: 1;
}
#business .box-3 .benefit-contents {
  display: flex;
  gap: 25px;
  margin-top: 15px;
}

#business .benefit-contents-small {
  font-size: 12px;
}

@media screen and (max-width: 639px) {
  #business .owners-benefits .two-column .right-column .box-2 {
    padding-bottom: 70px;
  }
}

/*********************************************
for Staff 法人契約のお客様 福利厚生ツールとして活用
**********************************************/
#main-contents #staff {
  margin-top: 100px;
  padding-top: 100px;
}

@media screen and (max-width: 1000px) {
  #main-contents #staff {
    padding-top: 120px;
    margin-top: 70px;
  }
}

#staff .useful {
  background: #ebf3d8;
}

#staff .benefit-box {
  display: grid;
  grid-template-columns: auto 29% 29%;
  gap: 19px;
}

#staff .benefit-sublead {
  width: 100%;
  /*text-align: center;*/
}

@media (max-width: 639px) {
  #staff .benefit-sublead {
    text-align: left;
  }
}

#staff .benefit-box .benefit-contents {
  position: relative;
}
#staff .benefit-box .ticket-sample {
  /*position: absolute;*/
  margin-top: 10px;
  width: 210px;
  /*bottom: -25px;
  right: 20px;*/
}

#staff .box-2,
#private .benefit-box.box-2 {
  margin-top: 20px;
}

#staff .box-2 .align-bottom-box {
  display: flex;
  align-items: flex-end; /* 下揃え*/
}

#staff .box-2 .benefit-contents-small {
  font-size: 12px;
  letter-spacing: -0.5px;
}

@media (min-width: 640px) {
  #staff .business-note {
    grid-row: 2;
    grid-column: span 2;
  }
}

@media (max-width: 950px) {
  #staff .benefit-box.box-2 .benefit-contents-small br {
    display: none;
  }
}
@media (min-width: 769px) and (max-width: 950px) {
  #staff .benefit-box .ticket-sample {
    position: static;
    display: block;
    margin: 10px auto 0;
  }
}
@media (max-width: 768px) {
  #staff .benefit-box .benefit-lead br {
    display: none;
  }
  #staff .benefit-box .benefit-detail br {
    display: none;
  }
}

@media (min-width: 640px) and (max-width: 768px) {
  #staff .benefit-box {
    grid-template-columns: 1fr 1fr;
  }
  #staff .benefit-box > div:first-child {
    grid-column: span 2;
  }
  #staff .benefit-box.box-2 .benefit-contents-small {
    padding-right: 220px;
  }
  #staff .benefit-box .ticket-sample {
    right: 0;
  }
}

@media (max-width: 639px) {
  #staff .benefit-box {
    grid-template-columns: 1fr;
  }
  #staff .benefit-box .ticket-sample {
    position: static;
    display: block;
    margin: 15px auto;
    width: 100%;
  }
  #staff .business-note {
    margin-top: 10px;
  }
  #staff .box-2 .benefit-contents-small .line {
    display: inline !important;
  }
}

/*********************************************
for Private 個人利用のお客様 個人契約で楽しむ
**********************************************/
#main-contents #private {
  margin-top: 100px;
  padding-top: 100px;
}

@media screen and (max-width: 1000px) {
  #main-visual:has(.header-contents) {
    aspect-ratio: auto;
  }
}

@media screen and (max-width: 639px) {
  #main-contents #private {
    padding-top: 120px;
    margin-top: 70px;
  }
}

#private .contents-wrap h3 {
  color: #7a4a1a;
}

#private .contents-wrap h3.color_var {
  color: #cb8000;
}

#private .category-main-wrap .contents-detail h3 {
  color: var(--color-font-base);
  letter-spacing: 5px;
}

#private .category-main-wrap > .contents-row > .two-column:has(.related-diagram) {
  grid-template-columns: 38% auto;
}

#private .related-diagram img {
  width: 93%;
}

#private .satisfy .graph > div:last-child {
  border-left: none;
}

#private .satisfy .graph > div {
  padding-left: 0;
  padding-right: 0;
}

#private .satisfy .graph img.left {
  margin: 30px 0 0 0;
  width: 85%;
  /*height: 260px;*/
}

@media (max-width: 639px) {
  #private .satisfy .graph img.left {
    margin: 20px 0 0 0;
    width: 100%;
    /*height: 260px;*/
  }
}

#private .anchor-transition:before {
  background: linear-gradient(90deg, rgba(203, 128, 0, 1) 54.48%, rgba(203, 130, 7, 1) 60.07%, rgba(204, 136, 25, 1) 68.04%, rgba(204, 146, 56, 1) 77.4%, rgba(205, 153, 77, 1) 82.78%);
}
#private .useful {
  background: #ede4c7;
}
#private .useful .useful-contents ul li:before {
  background: var(--color-private);
}

#private .useful .useful-contents .note {
  color: var(--color-private);
  margin-top: 35px;
}

#private .contents-wrap .useful .note p:after {
  background: url(../img/how_to/useful-note-arrow-private.svg) no-repeat bottom / contain;
}

#private .pickup-seat .pickup-text {
  color: #8c784d;
}

#private .owners-benefits .benefit-sublead {
  width: 100%;
  /*text-align: center;*/
}

#private .owners-benefits .benefit-detail {
  letter-spacing: -0.5px;
}

#private .benefit-box {
  display: grid;
  grid-template-columns: 310px auto;
  gap: 20px;
}

#private .benefit-box.box-2 {
  column-gap: 0;
  row-gap: 20px;
}

#private .contents-wrap .useful .useful-contents .note a {
  color: var(--color-private);
}

@media (max-width: 900px) {
  #private .satisfy p br.pc {
    display: none;
  }
}

@media (max-width: 639px) {
  #private .extended-bg:before {
    content: none;
  }
  #private .benefit-box {
    grid-template-columns: 1fr;
  }
  #private .category-main-wrap > .contents-row > .two-column:has(.related-diagram) {
    grid-template-columns: 1fr;
  }
  #private .category-main-wrap .contents-detail h3 {
    letter-spacing: -0.5px;
    font-size: 19px;
  }
}