/*// 本スタイルシートはサンプルですので書き換えてください。*/
@charset "UTF-8";

:root {
  --design-width: 2400;
  --contents-width: 1700;
  --contents-side-padding: 350;
  --minwidth: 320;
  --fixed-header-height: 20;
  --root-fz: 16;
  --line-height: 1.5;
  --hover-opacity-ratio: 0.8;
  --hover-duration: 0.3s;
}

.oshitabi__main {
  /*padding-top: 8rem;*/
  /*max-width: 1100px;*/
  /*width: calc(1700 / var(--design-width) * 100%);*/
  margin: auto;
}

.oshitabi__footer__button {
  text-align: center;
  margin-top: 80px;
  margin-bottom: 40px;
}

.oshitabi__footer__button a {
  display: block;
  border: 3px solid #000;
  background-color: #fff;
  max-width: 320px;
  margin: 0 auto;
  padding: 20px;
  text-align: center;
  font-family: "Noto Sans JP", sans-serif;
  font-size: 20px;
  font-weight: 900;
  border-radius: 20px;
  position: relative;
  text-decoration: none;
  color: #000;
  z-index: 999;
}

/*************
/*薬屋003ここから
*/

body {
  font-family: "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック", "Yu Gothic", "Hiragino Kaku Gothic Pro", "ヒラギノ角ゴ Pro W3", "メイリオ", "Meiryo", "ＭＳ Ｐゴシック", "Arial", "Verdana", "sans-serif";
  color: #000;
  line-height: 1.5;
  font-weight: 400;
  overflow-y: auto;
}

img {
  display: block;
  max-width: 100%;
}

.content_wrap {
  -webkit-font-smoothing: antialiased;
  font-family: "Noto Sans JP", serif;
  /*font-size: 16px;*/
  line-height: 1.5;
  font-weight: 400;
  color: var(--text-color);
  margin-top: 66px;
  width: 100%;
  position: relative;
  z-index: 0;
}

@media (min-width: 751px) {
  .content_wrap {
    margin-top: 90px;
  }

  .content_wrap {
    background-size: 95vw calc(100vh - 120px);
    background-position: center 105px;
    background-repeat: no-repeat;
    background-attachment: fixed;
  }
}

:root {
  --text-color: #000000;
  --bg-color: #ffffff;
  --red-color: #ee0000;
  --accent-color: #ffff00;
  --maomao-color: #22A67E;
  --jinshi-color: #6B2792;
  --serif-font: "Noto Serif JP", serif;
  --sans-font: "Noto Sans JP", sans-serif;
}


/* 箇条書き */
ul.text_list li,
p.text_list {
  text-indent: -1em;
  padding-left: 1em;
  text-align:justify;
}

ul.text_list li + li {
  margin-top: 2px;
}

ul.text_list.annotation li {
  font-size: 1.1rem; /*22px*/
  font-weight: 400;
  line-height: 1.9;
  letter-spacing: 0;
}

@media (min-width: 751px) {
  .red_box {
    font-size: 22px;
  }

  .pc_center {
    text-align: center;
  }
}

/* js-fadeUp */
.js-fadeUp {
  transform: translateY(10px);
  opacity: 0;
  transition: all 1s;
}

.js-fadeUp.is-inview {
  transform: translateY(0);
  opacity: 1;
}

/*************
汎用
*************/
/* アコーディオン */
.acc_body {
  display: none;
}

.acc_btn {
  font-weight: 700;
  font-size: 1.1335rem; /*22.67px*/
  line-height: 1;
  letter-spacing: 0;

  width: fit-content;
  margin: 32px auto 0;
  color: var(--text-color);
  position: relative;
  cursor: pointer;
  transition: all 0.3s;
  padding-right: 28px;
}

.acc_btn span {
  position: absolute;
  background-color: #000;
  height: 1.7rem; /*34px*/
  width: 1.7rem; /*34px*/
  border-radius: 100%;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}

.acc_btn span::before,
.acc_btn span::after {
  content: "";
  background-color: #fff;
  position: absolute;
  width: 1rem; /*20px*/
  height: 2px;
  transform: translate(-50%, -50%);
  top: 50%;
  left: 50%;
  transition: transform 0.3s;
}

.acc_btn span::before {
  transform: translate(-50%, -50%) rotate(90deg);
}

.acc_btn.open span::before {
  transform: translate(-50%, -50%);
}

/* ご注意事項アコーディオン */
.caution_acc {
  margin-bottom: 1.9rem;
}

.caution_acc .acc_btn {
  padding: 3px 40px 3px 20px;
  color: #000;
}

.caution_acc .acc_btn span {
  right: 0.5rem; /*-10px*/
}

.caution_acc .acc_body {
  padding: 0.5rem;
  border-radius: 0.5rem;
  margin-top: 1rem;
  margin-bottom: 1rem;
}

.caution_head {
  font-weight: bold;
  font-size: 14px;
  margin-bottom: 4px;
}

.text_list + .caution_head {
  margin-top: 8px;
}
@media (min-width: 751px) {
  .caution_acc .acc_body {
    /*padding: 20px;*/
    border-radius: 16px;
  }
}

/*************
メディアクエリ
*************/
@media (min-width: 751px) {
  .sp {
    display: none;
  }
}

@media (max-width: 750px) {
  .pc {
    display: none;
  }
}

/*==============================
# 薬屋のふたりたび
==============================*/
html {
/*  font-size: 2.667vw;*/
  scrollbar-gutter: stable;
  font-size: clamp(10px, 0.8vw, 20px);
}

@media (max-width: 750px) {
  html {
    font-size: clamp(10px, 2.67vw, 20px)
  }
}

/*
@media (min-width: 751px) {
  .content_wrap::before {
    content: "";
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: calc(100% - 90px);
    background-image: url(../img/bg.webp);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top center;
  }    
}
*/

a:hover {
  opacity: 0.8;
  transition: 0.3s;
}

.content {
  position: relative;
  box-sizing: border-box;
}

.content * {
  box-sizing: border-box;
}

.content__inner {
  width: 30vw;
  min-width: 375px;
  margin: 0 auto;
  overflow: hidden;
  background-color: #fff;
}

@media (max-width: 750px) {
  .content__inner {
    width: 100%;
  }
}

.underline--ip {
  color: #000;
  text-decoration: underline solid #000;
  -webkit-text-decoration: underline solid #000;  
}

/*内枠設定*/
.wrapper-720 {
  padding: 0 2%;
  margin: 0 auto;
}

.wrapper-686 {
  padding: 0 2.23%;
  margin: 0 auto;
}

.wrapper-648 {
  padding: 0 2.77%;
  margin: 0 auto;
}

.wrapper-640 {
  padding: 0 3.35%;
  margin: 0 auto;
}

/*背景パターン
----------------------------------------------- */
.bg-pattern-outer {
  background-image: url(../images/bg_pattern_outer.webp);
  background-size: 57px 9px;
  background-repeat: repeat;
}

.bg-pattern-inner {
  background-image: url(../images/bg_pattern_inner.webp);
  background-size: 57px 9px;
  background-repeat: repeat;
}

/*period*/
.period {
  margin-top: 0;
}

.period__img {
  width: 100%;
  margin: 0 auto;
}

.heading {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 2.3rem 0;
}

.heading__text {
  display: flex;
  font-family: var(--serif-font);
  font-size: 1.4rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  line-height: 1.75;
  text-align: center;
  color: #000;
}

/*あらすじ*/
.frame-introduction {
  max-width: 712px;
  max-height: 1411px;
  width: 100%;
  height: auto;
  background-image: url(../images/frame-introduction.webp);
  aspect-ratio: 1411 / 712;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  margin: 0 auto;
}

.intro-title__ja > img {
  max-width: 200px;
  width: 10rem;
  height: 100%;
  margin: 0 auto;
  padding-top: 3.8rem;
}

.intro-title__deco > img {
  max-width: 106px;
  width: 5rem;
  margin: 1rem auto 0;
}

.intro-prologue__text {
  font-family: var(--serif-font);
  font-weight: 500;
  font-size: 1.4rem; /*28px*/
  line-height: 1.85;
  letter-spacing: 0;
  text-align: center;
  padding-top: 1.5rem;
  padding-bottom: 4.0rem;
}

@media (max-width: 750px) {
  ruby {
    ruby-position: over;
    line-height: 1;
    padding: 0;
  }

  rt {
    line-height: 1;
    margin-bottom: -0.8em;
  }
}

.intro-content {
  margin-top: 6.8rem;
  min-height: 100%;
}

.intro-content__inner {
  width: 100%;
  min-height: 100%;
}

/*anchor-link*/
.anchor-link {
  padding-top: 3.82rem;
  padding-bottom: 5rem;
}

.anchor-link-list {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: auto auto;
  width: 100%;
  gap: 1.2rem 1rem;
  padding: 0 1.3rem;
}

.anchor-link-list > li {
  width: 100%;
}

/*content01
  東海道新幹線　車内コンテンツ
**************************/
.content01 {
  padding: 1.0rem 0 2rem;
}

.content__wrapper {
  background-color: #FFF;
  border: 1px solid #CEBE8A;
  border-radius: 30px;
}

.content-heading__title {
  margin: -8px auto clamp(0px, 4.6vw, 35px);
  width: 100%;
  position: relative;
  z-index: 1;
}

/*element共通*/
.element {
  margin-bottom: 4rem;
}

.element__text {
  font-family: var(--serif-font);
  font-weight: 500;
  font-size: 1.5rem; /*31px*/
  line-height: 1.8;
  letter-spacing: 0;
  text-align: center;
  margin: 1.5rem 0;
}

.prologue-voice-image {
  max-width: 868px;
  width: 100%;
  padding: 0 14%;  
  text-align: center;
}

/*プロローグボイス*/


/*朗読コンテンツ*/
.reading-content .element__text {
    margin: 1.5rem 0 2.0rem;
}

.reading-content .board {
  width: 86.3%;
  color: #000;
  margin: 0 auto;
}

.reading-content .board .schedule {
  font-family: var(--serif-font);
  font-weight: 700;
  font-size: 1.5rem; /*30px*/
  line-height: 1.86;
  letter-spacing: 0;
  text-align: center;
  color: var(--maomao-color);
  background-color: #C9EEE3;
  border-top: 2px solid #22A67E;
  padding: 0.45rem 0;
}

.reading-content .board .excerpt {
  font-family: var(--serif-font);
  font-weight: 700;
  font-size: 1.5rem; /*30px*/
  line-height: 1.566;
  letter-spacing: 0.09em;
  text-align: center;
  padding: 0.5rem 0 0.1rem;
}

.reading-content .board .cast {
  font-family: var(--serif-font);
  font-weight: 700;
  font-size: 1.5rem; /*30px*/
  line-height: 1.566;
  letter-spacing: 0.09em;
  text-align: center;
  color: var(--maomao-color);
  padding: 0.4rem 0;
}

/*認定試験*/
.quiz-content .element__text {
  font-size: 1.48rem;
}

.participate {
  max-width: 643px;
  width: 100%;
  text-align: center;
  margin: 0 auto;
  margin-bottom: 1.15rem;
}
 
.quiz-content .board {
  width: 100%;
  color: #000;
  text-align: center;
  margin: 1.4rem auto -2rem;
}

.board__title > img {
  width: 8.4rem;
  margin: 0 auto;
}

.board > .board__title {
  padding-top: 0.5rem;
}

.quiz-content .grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: clamp(0px, 1.32rem, 30px);
  padding: 2.7rem 2% 1.35rem;
  justify-content: center;
  align-items: center;
}

.quiz-content .grid__item {
  padding: 1.5rem;
  background: #f2f2f2;
  text-align: center;
}

.quiz-content .grid__item-left {
  margin-left: auto;
  margin-right: 0;
}

.quiz-content .grid__item-left img {
  max-width: 136.3px;
}

.quiz-content .grid__item-right {
  font-family: var(--serif-font);
  font-weight: 500;
  font-size: 1.55rem; /*31px*/
  line-height: 1.4; /*1.8*/
  letter-spacing: 0;
  vertical-align: middle;
  text-align: left;
}

.quiz-content .text_list {
  padding: 0 0.1rem;
}

.link-btn {
  margin-top: -2.4rem;
  margin-bottom: 1.5rem;
}

.link-quiz,
.link-guidebook {
  pointer-events: none; 
}

/*content02
東海道新幹線　乗車特典
**************************/
.content02 {
  padding: 1.0rem 0 2rem;
}

/*引き換え期間*/
.exchange-period {
  margin-bottom: 1.95rem;
}

.exchange-period .board {
  width: 100%;
  color: #000;
  margin-top: 1.5rem;
  margin-bottom: 1.25rem;
}

.exchange-period table {
  text-align: center;
  width: 86.5%;
  margin: 0 auto;
}

.exchange-period tbody {
  border-top: 2px solid var(--maomao-color);
}

.exchange-period tbody tr {
  border-bottom: 2px solid var(--maomao-color);
}

.exchange-period .item {
  font-family: var(--serif-font);
  font-weight: 700;
  font-size: 1.75rem; /*35px*/
  line-height: 1.6;
  letter-spacing: 0.09em;
  color: var(--maomao-color);
  text-align: center;
  padding: 1.22rem 0;
}

.exchange-period .item .size-00 {
    font-size: 1.1rem;
    position: relative;
    top: -0.5em;
    color: var(--maomao-color);
}

.exchange-period .item span {
  font-size: 1.5rem; /*30px*/
  line-height: 1.6;
  letter-spacing: 0em;
  color: #000;
}

.content02 .exchange-period__note .text_list {
      margin-bottom: 1.25rem;
}

/*特典の入手方法*/
.content02 .procedure {
  margin: 0;
}

.exchange-period .element__text {
  margin: 3rem 0 1rem;
  font-weight: 500;
  font-size: 1.55rem; /*31px*/
  line-height: 1.82;
}

.exchange-period .grid {
  display: grid;
  grid-template-columns: 1fr 3fr;
  gap: 1.3rem;
  padding: 2.6rem 1.2rem 1.1rem;
  justify-content: center;
  align-items: center;
}

.exchange-period .board__title > img {
    width: 13.8rem;
    margin: 0 auto;
}

.exchange-period .grid__item {
  padding: 1.5rem;
  background: #f2f2f2;
  text-align: center;
}

.exchange-period .grid__item-left {
  margin-left: auto;
  margin-right: 0;
}

.exchange-period .grid__item-left img {
  max-width: 136.3px;
}

.exchange-period .grid__item-right {
  font-family: var(--serif-font);
  font-weight: 500;
  font-size: 1.55rem; /*31px*/
  line-height: 1.4; /*1.8*/
  letter-spacing: 0;
  vertical-align: middle;
  text-align: left;
}

/*特典引き換え場所*/
.content02 .board-exchange {
  width: 100%;
  height: auto;
  margin: 0 auto 1.5rem;
  color: #000;
  background-image: url(../images/frame-board-content2.webp);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.board-exchange table {
  text-align: center;
  width: 100%;
}

th {
  font-family: var(--sans-font);
  font-weight: 700;
  font-size: 1.2rem; /*24px*/
  line-height: 2.3;
  letter-spacing: 0;
  text-align: center;
  padding: 0.8rem 0 0;
}

.line1 td {
  font-family: var(--sans-font);
  font-family: Noto Sans JP;
  font-weight: 700;
  font-size: 1.85rem; /*37px*/
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}

.line1 td a {
  font-family: var(--sans-font);
  font-weight: 400;
  font-size: 1.15rem; /*23px*/
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}

.line2 td {
  font-family: var(--sans-font);
  font-weight: 700;
  font-size: 1.2rem; /*24px*/
  line-height: 1.75;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--maomao-color);
  padding: 1.2rem 0 0;
}

.line2 td > span {
  font-family: var(--sans-font);
  font-weight: 500;
  font-size: 1.45rem; /*29px*/
  color: #000;
}

.line3 td {
  font-family: var(--sans-font);
  font-weight: 400;
  font-size: 0.9rem; /*18px*/
  line-height: 1.77;
  letter-spacing: 0.06em;
  text-align: center;
}

.line4 td {
  font-family: var(--sans-font);
  font-weight: 700;
  font-size: 1.2rem; /*24px*/
  line-height: 1.75;
  letter-spacing: 0.06em;
  text-align: center;
  color: var(--maomao-color);
  padding: 1.0rem 0 1.5rem;
}

.line4 td > span {
  font-family: var(--sans-font);
  font-weight: 500;
  font-size: 1.45rem; /*29px*/
  color: #000;
}

.content02 .text_list {
  padding: 0 0.2rem;
  margin-bottom: 2.2rem;
}

/*content03
大阪限定ボイス付き
周遊スタンプラリー
**************************/
.content03 {
  padding: 1rem 0 2rem;
}

.content-heading__text {
  font-family: var(--serif-font);
  font-weight: 500;
  font-size: 1.55rem; /*31px*/
  line-height: 1.8;
  letter-spacing: 0;
  text-align: center;
  padding: 1rem 0 2.15rem;
}

.content03 .element {
    margin-bottom: 2rem;
}

.stamp-rally-spot-image {
 padding: 2rem 0;
 position: relative;
}

/*モーダル発火*/
.click-range {
  position: relative;
}

.spot {
  position: absolute;
/*border: 2px solid red;*/
  display: inline-block;
  cursor: pointer;
  top: 0;
  left: 0;
}

/*座標指定*/
.spot-01 {
padding: 1.2rem 4.5rem;
    top: -40.0rem;
    left: 12.0rem;
}

.spot-02 {
  padding: 1.4rem 6.5rem;
  top: -16rem;
  left: 2rem;
}

.spot-03 {
  padding: 1.2rem 4.8rem;
  top: -9.8rem;
  left: 17.0rem;
}

.spot-04 {
  padding: 1.4rem 11rem;
  top: -4.3rem;
  left: 1rem;
}

.spot-05 {
  padding: 1.4rem 5.0rem;
  top: -7.5rem;
  left: 0.5rem;
}

.spot-06 {
  padding: 1.2rem 5.0rem;
  top: -12.5rem;
  left: 22.5rem;
}

.spot-07 {
  padding: 1.8rem 6.0rem;
  top: -24.1rem;
  left: 20rem;
}

.spot-08 {
  padding: 1.3rem 5.7rem;
  top: -30.8rem;
  left: 7rem;
}

.spot-09 {
  padding: 1.3rem 10.7rem;
  top: -15.7rem;
  left: 10.5rem;
}

.spot-10 {
  padding: 1.3rem 5.2rem;
  top: -3.6rem;
  left: 18.0rem;
}

/*
@media (max-width: 750px) {
.spot-01 {
  padding: 1.4rem 4.5rem;
  top: -39.5rem;
  left: 12.0rem;
}

.spot-02 {
  padding: 1.4rem 6.5rem;
  top: -16rem;
  left: 2rem;
}

.spot-03 {
  padding: 1.2rem 4.8rem;
  top: -9.8rem;
  left: 17.0rem;
}

.spot-04 {
  padding: 1.4rem 11rem;
  top: -4.3rem;
  left: 1rem;
}

.spot-05 {
  padding: 1.4rem 5.0rem;
  top: -7.5rem;
  left: 0.5rem;
}

.spot-06 {
  padding: 1.2rem 5.0rem;
  top: -12.5rem;
  left: 22.5rem;
}

.spot-07 {
  padding: 1.8rem 6.0rem;
  top: -24.1rem;
  left: 20rem;
}

.spot-08 {
  padding: 1.3rem 5.7rem;
  top: -30.8rem;
  left: 7rem;
}

.spot-09 {
  padding: 1.3rem 5.7rem;
  top: -18.3rem;
  left: 21rem;
}

.spot-10 {
  padding: 1.3rem 5.2rem;
  top: -6.2rem;
  left: 18.6rem;
}
}
*/

/*スポット詳細*/
.detail {
  padding: 0 0 2.65rem;
}

.stamp-rally-spot .detail tr {
  display: inline-flex;
  padding: 0.85rem 0;
  border-bottom: 2px solid #D1BADE;
  width: 100%;  
  align-items: center;
}

.stamp-rally-spot .detail tr:last-child {
  border-bottom: 0;
}

.item-number {
  display: inline-block;
  height:1.3rem;
  width:1.3rem;
  border-radius:50%;
  line-height: 1.2rem;
  text-align:center;
  background-color: var(--jinshi-color);

  font-family: var(--sans-font);
  font-weight: 400;
  font-size: 0.9rem;
  letter-spacing: 0;
  color: #fff;
  padding-right: 0.03rem;
}

@media (max-width: 750px) {
.item-number {
    line-height: 1.4rem;
  }
}

.item-name {
  font-family: var(--sans-font);
  font-weight: 400;
  font-size: 1rem; /*20px*/
  line-height: 1.2;
  letter-spacing: 0;
  padding-left: 0.6rem;
  text-align: left;
  width: 11rem;
}

.item-highlights {
  font-family: var(--sans-font);
  font-weight: 400;
  font-size: 1rem; /*20px*/
  line-height: 1;
  letter-spacing: 0;
  padding-left: 0.3rem;
  text-align: left;
  width: auto;
}

/*コンプリート特典*/
.complete-benefits .element__text {
  font-family: var(--serif-font);
  font-weight: 500;
  font-size: 1.35rem; /*27px*/
  line-height: 2.4;
  letter-spacing: -0.05em;
  text-align: center;
  margin: 1.5rem 0;
}

.complete-benefits .element__text .bold {
  font-weight: 700;
  font-size: 2.0rem; /*40px*/
  line-height: 1.45;
  letter-spacing: 0;
}

.complete-benefits .element__text .font-size {
  font-size: 1.7rem; /*34px*/
  line-height: 1.794;
  letter-spacing: -0.04em;

}

.complete-benefits .element__text .underline-purple {
  font-weight: 500;
  font-size: 1.4875rem; /*29.75px*/
  line-height: 2.0;
  letter-spacing: 0.04em;
  text-decoration: underline;
  text-decoration-color: var(--jinshi-color);
  text-decoration-thickness: 0.125rem;
  text-underline-offset: 0.5em;
}

.complete-benefits .element__text .text-green {
  font-size: 1.928rem; /*38.56px*/
  line-height: 1.6;
  color: var(--jinshi-color);
}

.complete-benefits-image {
  padding: 1.0rem 0 2.0rem;
}

/*特典引き換え場所*/
.content03 .board-exchange {
  background-image: url(../images/frame-board-content3.webp);
  width: 100%;
  height: auto;
  margin: 0 auto 0.5rem;
  color: #000;
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.complete-benefits .line2 td {
  color: var(--jinshi-color);
}

.complete-benefits .line4 td {
  color: var(--jinshi-color);
}

/*オリジナルガイドブック*/
.original-guidebook .element__text {
  font-family: var(--serif-font);
  font-weight: 500;
  font-size: 2.2rem; /*44px*/
  line-height: 1.27;
  letter-spacing: 0;
  text-align: center;
  padding: 2.5rem 0;
}

.original-guidebook__text {
  font-family: var(--serif-font);
  font-weight: 500;
  font-size: 2.2rem; /*44px*/
  line-height: 1.27;
  letter-spacing: 0;
  text-align: center;
  padding: 2.25rem 0 2rem;
}

.original-guidebook__text > span {
  font-size: 1.95rem; /*39px*/
}

.original-guidebook__heading {
  width: 100%;
  height: auto;
  margin: 0 auto 1.5rem;
  color: #000;
  background-image: url(../images/frame-content3-3.webp);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
}

.original-guidebook__heading > p {
  font-family: var(--serif-font);
  font-weight: 700;
  font-size: 1.25rem; /*25px*/
  line-height: 1.96;
  letter-spacing: 0;
  text-align: justify;
  padding: 1.15rem 0;
  padding-left: 1.4rem;
}

.original-guidebook__note {
  font-family: var(--serif-font);
  font-weight: 700;
  font-size: 1.65rem; /*33px*/
  line-height: 1.69;
  letter-spacing: 0;
  text-align: center;
  margin-bottom: 3.25rem;
}

.original-guidebook .text_list {
  margin-bottom: 1.5rem;
}

.original-guidebook .link-btn {
  margin-top: 0;
  margin-bottom: 1.5rem;
}

/*content04
スペシャルコンテンツ
**************************/
.content04 {
  padding: 1.0rem 0 0;
}

.special-content {
  padding-bottom: 2.7rem;
}

.special-content-image {
  width: 87.2%;
  margin: 0 auto;
  margin-top: -5rem;
}

.coming-soon-image {
  width: 50%;
  margin: 0 auto;
}

/*content05
特別告知
**************************/
.content05 {
  padding: 3rem 0 0;
}

.content05 .collaboration-cafe {
  width: 100%;
  height: auto;
  margin: 0 auto;
  color: #000;
  background-image: url(../images/frame-board-content5.webp);
  background-size: 100% 100%;
  background-position: center;
  background-repeat: no-repeat;
  padding: 3rem 0 3.5rem;
  position: relative;
}

.collaboration-cafe__wrapper {
  width: 99%;
  margin: 0 auto;
}
.collaboration-cafe__inner {
  width: 90%;
  margin: 0 auto;
}
.content05 .content-heading__title {
  display: block;
  width: 40%;
  position: absolute;
  top: -1.1rem;
  left: 50%;
  transform: translateX(-50%);
}

.content05 h3 {
  padding: 0 1.6rem;
  margin: 0;
}

.collaboration-cafe .item-name {
  font-family: var(--serif-font);
  font-weight: 500;
  font-size: 1.25rem; /*25px*/
  line-height: 1.8;
  letter-spacing: 0;
  padding: 0;
  width: auto;
  text-align: left;
  table-layout: auto;
}

.collaboration-cafe .item-highlights {
  font-family: var(--serif-font);
  font-weight: 500;
  font-size: 1.25rem; /*25px*/
  line-height: 1.8;
  letter-spacing: 0;
  padding-left: 0;
}

.collaboration-cafe .item-center {
  font-family: var(--serif-font);
  font-weight: 500;
  font-size: 1.25rem; /*25px*/
  line-height: 1.8;
  letter-spacing: 0;
  text-align: center;
  height: 3rem;
}

.collaboration-cafe .item-decoration-top {
  width: 90.3%;
  margin: 0 auto;
  padding: 0.7rem 0 1.4rem;
}

.collaboration-cafe .item-decoration-bottom {
  width: 90.3%;
  margin: 0 auto;
  padding: 0.5rem 0 1rem;
}

.collaboration-cafe .item-message {
  width: 44%;
  margin: 0 auto;
}

/*copyright*/
.copyright {
  font-family: var(--sans-font);
  font-weight: 500;
  font-size: 0.75rem; /*15px*/
  line-height: 1.8;
  letter-spacing: 0.06em;
  padding: 2rem 0 1rem;
}

/*薬屋のふたりたび
モーダルデザイン
-------------------------*/
.modal {
  display: flex;
  justify-content: center;
  align-items: center;
}

.modal-frame {
  text-align: center;
  border-radius: 30px;
  background-color: #fff;
  padding: 58px 0;
  max-width: 650px;
  margin: 0 auto;
}

.wrapper-550 {
  padding: 0 49px;
  margin: 0 auto;
}

.modal .item-number {
  display: inline-block;
  height: 45px;
  width: 45px;
  border-radius: 50%;
  line-height: 1.0;
  text-align:center;
  background-color: var(--jinshi-color);

  font-family: var(--sans-font);
  font-weight: 400;
  font-size: 40.0px;
  letter-spacing: 0;
  text-align: center;
  color: #fff;
  margin-bottom: 10px;
}

/*ipad-mini*/
@media screen and (min-width: 431px) and (max-width: 769px) {
  .modal .item-number {
    line-height: 1.4;
    font-size: 33.0px;
  }
}

.modal .shop-image {
  margin: 12px 0;
}

.modal .shop-name {
  font-family: var(--sans-font);
  font-weight: 700;
  font-size: 32.5px;
  line-height: 1;
  letter-spacing: 0;
  text-align: center;
}

/*背景 オーバーレイ透過処理*/
.modal-overlay {
  position: fixed;
  inset: 0;
  width: 100%;
  height: auto;
  /*height: 100vh;*/
  background: rgba(0,0,0,0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/*クローズボタンデザイン*/
.modal-body {
  position: relative;
}

.btn-modal {
  position: absolute;
  top: -70px;
  right: 0;
  width: 50px;
  height: 50px;
  background-color: var(--jinshi-color);
  border-radius: 50%;
  z-index: 2;
}

.btn-modal__close::before, .btn-modal__close::after { /* 共通設定 */
  content: "";
  position: absolute;
  top: 50%;
  right: 47%;
  width: 1px; /* 棒の幅（太さ） */
  height: 47px; /* 棒の高さ */
  background-color: #fff;
  transform-origin: center;
}

.btn-modal__close::before {
  transform: translate(-50%,-50%) rotate(45deg);
}

.btn-modal__close::after {
  transform: translate(-50%,-50%) rotate(-45deg);
}

.introduction__text {
  font-family: var(--sans-font);
  font-weight: 500;
  font-size: 22.44px;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: justify;
}

.introduction__text > span{
  font-weight: 700;
}

.introduction a {
  text-decoration: underline;
}

.shop-information {
  padding: 1rem 0.2rem 0;
} 

.shop-information > p {
  font-family: var(--sans-font);
  font-weight: 500;
  font-size: 22.44px;
  line-height: 1.5;
  letter-spacing: 0;
  text-align: left;
}

.shop-information > p > span{
  color: var(--jinshi-color);
}

.maomao-color .item-number {
  color: var(--maomao-color);
  background-color: #fff;
  border: 1px solid;
}

.maomao-color .shop-information > p > span {
  color: var(--maomao-color);
}

/*上下に長い場合、スクロール*/
.modal-body__scroll {
  max-height: 80vh;
  overflow-y: auto;
  border-radius: 30px;
} 

@media (max-width: 430px) {
  .modal-frame {
    margin: 0 1.5rem;
  }
  .modal-body__scroll {
    max-height: 65vh;
    -ms-overflow-style: none;      /* IE, Edge */
    scrollbar-width: none;         /* Firefox */    
  }
  .modal-body__scroll::-webkit-scrollbar {
  display: none;                 /* Chrome, Safari */
  }
}

@media (max-width: 750px) {
  .modal-frame {
    /*margin: 0 1.5rem;*/
    padding: 29px 0;
  }

  .wrapper-550 {
      padding: 0 20px;
  }

  .btn-modal {
      position: absolute;
      top: -40px;
      right: 1.5rem;
      width: 30px;
      height: 30px;
  }

  .btn-modal__close::before, .btn-modal__close::after {
    height: 30px; /* 棒の高さ */
  }

  .modal .item-number {
      height: 28px;
      width: 28px;
      line-height: 1.6;
      font-size: 18px;
  }

  .introduction__text {
      font-size: 11.22px;
      line-height: 1.513;
      letter-spacing: 0;
      text-align: justify;
  }

  .shop-information > p {
      font-size: 12px;
  }
  
  .modal .shop-name {
    font-size: 16px;
  }
}

/* ===== モーダル基本 ===== */

.modal {
  display: none;
}

.modal.is-open {
  display: flex; /* 既存レイアウトに合わせる */
}

/* 中身も非表示がデフォルト */
.collaboration-shop {
  display: none;
}

.collaboration-shop.is-open {
  display: flex;
}

/* 閉じるボタン色 */
.modal .btn-modal {
  background-color: var(--jinshi-color);
}

.modal .btn-modal.is-maomao {
  background-color: var(--maomao-color);
}

html.is-locked,
body.is-locked {
  overflow: hidden;
}

/*
右要素デザイン
----------------------------*/
.right-element {
  right: 0;
  width: 33vw;
  top: calc(35vh - 90px);
  padding: 1rem;
  z-index: 10;
  position: fixed;
}

.right-element__wrapper {
  max-width: 410px;
  width: 100%;
  margin: 0 auto;
}
.logo-content {
  margin: 1.25rem;
}

.right-element .anchor-link {
    padding-top: 1.4rem;
    padding-bottom: 0;
}

.right-element .anchor-link-list {
  padding: 0;
}  

@media (max-width: 750px) {
  .right-element {
    display: none;
  }
}

@media (max-width: 1235px) {
  .right-element {
      width: calc((100% - 414px) / 2);
      top: calc(43vh - 90px);
    }
  .right-element {
      padding-left: 1rem;
      padding-right: 1rem;
  }  
}

/*
背景メインアイコン
----------------------------*/
.oshitabi__main {
  position: relative;
}

.pc-decoration {
  position: fixed;
  inset: 0;
  max-width: 2000px;
  margin: 0 auto;
  pointer-events: none;
  z-index: 0;
}

@media (min-width: 751px) {

  :root {
    --main-width: max(30vw, 375px);
    --side-width: calc((min(100vw, 2000px) - var(--main-width)) / 2);
  }

  .decoration {
    position: fixed;
    pointer-events: none;
    z-index: 0;
  }

  /* 左上 */
  .decoration--01 {
    top: 100px;
    left: 10px;
    width: var(--side-width);
    height: 125px;
    background: url(../images/background-01.webp) left top no-repeat;
    background-size: contain;
  }

  /* 右上 */
  .decoration--02 {
    top: 100px;
    right: 10px;
    width: var(--side-width);
    height: 125px;
    background: url(../images/background-02.webp) right top no-repeat;
    background-size: contain;
  }
  /* 右下 */
  .decoration--03 {
    bottom: 10px;
    right: 10px;
    width: var(--side-width);
    height: 125px;
    background: url(../images/background-03.webp) right top no-repeat;
    background-size: contain;
  }

  /* 左下 */
  .decoration--04 {
    bottom: 10px;
    left: 10px;
    width: var(--side-width);
    height: 125px;
    background: url(../images/background-04.webp) left top no-repeat;
    background-size: contain;
  }

  /* 左中央 */
  .decoration--05 {
    top: 50%;
    transform: translateY(-40%);
    left: 0;
    width: var(--side-width);
    height: 335px;
    background: url(../images/background-center.webp) center center no-repeat;
    background-size: contain;
  }
}

.decoration {
  transition: opacity 0.3s ease;
}

.decoration.is-hidden {
  opacity: 0;
  pointer-events: none;
}