@import url(https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700&family=Noto+Sans+JP:wght@400&display=swap);
/* CTAbutton */
.cta-wrapper {
  text-align: center;
  margin: 1em auto;
  font-family: 'Helvetica Neue', sans-serif;
}

.cta-elegant {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 16px 20px;
  font-size: 17px;
  font-weight: 600;
  color: white;
  background: linear-gradient(90deg, #22c1c3, #00baa3);
  border-radius: 9999px;
  text-decoration: none;
  box-shadow: 0 6px 16px rgba(0, 150, 136, 0.2);
  transition: all 0.3s ease;
  width: 100%;
  max-width: 483px;
}

.cta-elegant:hover {
  background: linear-gradient(90deg, #1c9c9e, rgb(12, 143, 130));
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(0, 150, 136, 0.3);
}

.cta-label {
  background: white;
  color: #0cbdae;
  font-size: 13px;
  font-weight: bold;
  padding: 11px 10px;
  border-radius: 999px;
}

.cta-arrow {
  font-size: 18px;
  margin-left: 4px;
}

.cta-subtext {
  margin: 24px 0 12px;
  font-size: 15px;
  color: #666;
}

.cta-options {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  margin: 1em auto;
  max-width: 550px;
}

.cta-option {
  background: #ffffffe8;
  border: 2px solid #00bfa5;
  color: #00bfa5;
  padding: 1em 1px;
  border-radius: 9999px;
  font-size: 15px;
  font-weight: 500;
  text-decoration: none;
  transition: all 0.3s ease;
  width: 48%;
  margin: 1%;
}

.cta-option:hover {
  background: #00bfa5;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 191, 165, 0.2);
}

@media screen and (max-width: 720px) {
  .cta-option {
    padding: 1em 1px;
  }

  .cta-subtext {
    color: white;
  }
}










a.blue {
  color: #0478e0;
}

a.none {
  color: #464646;
}

a.white {
  color: #ffffff;
}

/* spacing.css */
.m-6-auto {
  margin: 6px auto;
}

.m-12-auto {
  margin: 12px auto;
}

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

.mb-24 {
  margin: 7em auto 2em auto;
}

.mb-36 {
  margin: 36px auto;
}

/* INDEXPAGE */
.index_event {
  margin: 0;
  text-align: center;
  background: #2cb3a7;
  padding: 11px 0;
  font-size: 14px;
}

.index_event a {
  color: white;
}

h1.page {
  text-align: center;
  font-size: 13px;
  font-weight: normal;
}

.line-offer-box {
  border-radius: 12px;
  padding: 24px 10px;
  text-align: center;
  margin: 0 auto;
  width: 100%;
}

.lead-text {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  margin-bottom: 6px;
}

.coupon-highlight {
  color: #f49a00;
  font-weight: bold;
  background: linear-gradient(transparent 65%, #fff3a8 65%);
}

.sub-text {
  font-size: 12px;
  color: #666;
  margin: 15px auto;
}

.sub-text a {
  color: #666;
}

.line-button {
  display: inline-flex;
  align-items: center;
  background-color: #00c300;
  color: white;
  font-weight: bold;
  font-size: 16px;
  padding: 6px 24px;
  border-radius: 999px;
  text-decoration: none;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.15);
  transition: 0.2s ease;
}

.line-button:hover {
  opacity: 0.9;
  transform: translateY(-1px);
}

.line-icon {
  width: 45px;
  height: 45px;
  margin-right: 8px;
}

@media(max-width: 880px) {
  .gfadatab {
    font-size: 20px;
  }

  .gfadatab1 {
    font-size: 14px;
  }
}

@media(max-width: 750px) {
  .gfadatab1 {
    font-size: 15px;
  }

  .gfadatab {
    font-size: 21px;
  }

  p.tyuuifafga,
  h1.page {
    display: none;
  }
}

.unique-slider-container {
  width: 100%;
  max-width: 1200px;
  margin: 0 auto;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  padding: 0 12px;
}

.unique-slider {
  display: flex;
  flex-wrap: nowrap;
  gap: 16px;
  padding: 16px 0;
}

/* 共通スライドデザイン */
.unique-slide {
  scroll-snap-align: center;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  transition: transform 0.3s ease;
  background: white;
}

/* PCでは3枚横並び */
@media (min-width: 768px) {
  .unique-slide {
    flex: 0 0 calc((100% - 32px) / 3);
    /* 3枚表示 + gap */
  }
}

/* スマホでは1枚ずつスライド表示 */
@media (max-width: 767px) {
  .unique-slide {
    flex: 0 0 95%;
    /* 両端ちら見せ */
  }
}

.unique-slide img {
  width: 100%;
  height: auto;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 16px;
}

.order-status {
  font-family: "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  border: 2px solid #1cb4a7;
  padding: 16px 8px;
  background-color: #f4fffe;
  max-width: 600px;
  margin: 20px auto;
  border-radius: 8px;
  width: 98%;
}

.order-status a {
  color: blue;
}

.order-status h2 {
  font-size: 18px;
  color: #1cb4a7;
  border-bottom: 2px solid #1cb4a7;
  padding-bottom: 6px;
  margin-bottom: 12px;
}

.order-status h2 span {
  font-size: 10px;
  color: #555;
  margin-left: 10px;
}

.order-status table {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}

.order-status thead {
  background-color: #85e0d9;
  color: #222;
}

.order-status thead tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.order-status tbody {
  display: block;
  max-height: 250px;
  /* 約5行分の高さ */
  overflow-y: auto;
  width: 100%;
}

.order-status tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}

.order-status th,
.order-status td {
  border: 1px solid #85e0d9;
  padding: 8px 5px;
  text-align: center;
  font-size: 10.5px;
  box-sizing: border-box;
}

/* オプション：スクロールバーの装飾（Chrome対応） */
.order-status tbody::-webkit-scrollbar {
  width: 6px;
}

.order-status tbody::-webkit-scrollbar-thumb {
  background-color: #ccc;
  border-radius: 3px;
}

/* 偶数行と奇数行で背景色を交互に */
.order-status tbody tr:nth-child(odd) {
  background-color: #ffffff;
  /* 白 */
}

.order-status tbody tr:nth-child(even) {
  background-color: #ecfffd;
  /* 薄い緑っぽい水色 */
}

@media screen and (max-width: 380px) {
  td.op_pm_nado {
    font-size: 9px;
  }
}

.movie_title_page {
  text-align: center;
  width: 100%;
  text-align: center;
}

.movie_title_page img {
  width: 100%;
  max-width: 152px;
}

.movie_title_page h1,
.movie_title_page h2 {
  font-size: 20px;
  font-family: 'Anton', sans-serif;
  /* フォントを設定 */
  font-weight: bold;
  /* 太字 */
  margin: 5px 0 11px 0;
  color: #353535;
}

h1.movie_title_page_division {
  text-align: center;
  font-size: 15px;
}

h2.movie_title_page_division_sub {
  font-size: 14px;
  line-height: 22px;
  color: #464646;
  font-weight: normal;
}

.movie_title_page p {
  font-size: 13px;
  color: #535353;
  line-height: 22px;
  width: 90%;
  margin: 0 auto;
}

.movie_frex,
.osusume_frex,
.movie_frex2 {
  display: flex;
  max-width: 1200px;
  width: 98%;
  height: auto;
  margin: 24px auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
}

.movie_frex2::-webkit-scrollbar {
  display: none;
}

/* PCではグリッドで中央3列に */
@media (max-width: 767px) {
  .movie_frex2 {
    display: flex !important;
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: 18px;
    padding: 0 16px;
  }

  .movie_frex2>.movie_content {
    flex: 0 0 auto;
    scroll-snap-align: start;
    width: 360px;
  }

  .movie_frex2 .movie-info {
    flex-wrap: wrap !important;
  }
}

.movie_content {
  width: 31%;
  height: auto;
  line-height: 25px;
}

.movie-card {
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  background: #fff;
  font-family: 'Noto Sans JP', sans-serif;
}

/* 初期状態：非表示＆下にズラす */
.fade-in {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.8s ease, transform 0.8s ease;
}

/* 表示時：フェードイン */
.fade-in.visible {
  opacity: 1;
  transform: translateY(0);
}

/* 最初の .fade-in だけはアニメーションを無効化（LCP対策） */
.movie-card.fade-in:first-of-type,
.movie-card.fade-in:nth-of-type(1) {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

.video-thumbnail {
  width: 100%;
  aspect-ratio: 16 / 9;
  -o-object-fit: cover;
     object-fit: cover;
  display: block;
  background-color: #fff9e6;
  /* ← 淡いクリーム色 */
}

.movie-image img {
  width: 100%;
  height: auto;
  display: block;
}

.movie-tags {
  display: flex;
  justify-content: space-between;
  padding: 0.5em 1em 0;
}

.tag {
  font-size: 0.75em;
  padding: 0.3em 0.7em;
  border-radius: 5px;
  font-weight: bold;
  display: inline-block;
  width: 35%;
  text-align: center;
}

.tag.hot {
  background-color: #00c1b3;
  color: white;
}

.tag.detail {
  border: 1px solid #00c1b3;
  color: #00c1b3;
  text-decoration: none;
  transition: background 0.3s;
  width: 50%;
  font-weight: bold;
}

.tag.detail:hover {
  background-color: #e6f9f8;
}

.movie-content {
  padding: 1em;
}

.movie-lead {
  font-size: 0.85em;
  margin: 0.2em 0;
  color: #444;
}

.movie-title {
  font-size: 1em;
  font-weight: bold;
  margin: 0.2em 0 0.5em;
}

.price {
  font-size: 0.9em;
  color: #666;
  margin-left: 0.5em;
}

.movie-info {
  display: flex;
  gap: 12px;
  font-size: 0.8em;
  color: #666;
  margin: 12px 0;
}

span.info {
  background-color: #eeeeee;
  color: #595959;
  padding: 2px 16px;
  border-radius: 6px;
}

/* フェードインアニメーション */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(30px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media screen and (max-width: 720px) {
  .movie_content {
    width: 100%;
    height: auto;
  }

  .movie_frex {
    gap: 30px;
  }
}

.see-all-button-wrapper {
  text-align: center;
  animation: fadeIn 1.2s ease-in-out both;
}

.see-all-button {
  display: inline-block;
  padding: 0.9em 2em;
  font-size: 1em;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(135deg, #00bfa6, #009e8e);
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 6px 20px rgba(0, 191, 166, 0.3);
  position: relative;
}

.see-all-button:hover {
  background: linear-gradient(135deg, #009e8e, #007e70);
  transform: translateY(-2px);
  box-shadow: 0 8px 25px rgba(0, 191, 166, 0.45);
}

.see-all-button .arrow {
  margin-left: 0.5em;
  transition: margin-left 0.3s;
}

.see-all-button:hover .arrow {
  margin-left: 0.8em;
}

/* フェードイン */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(20px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* FOOTER共通CSS */
.movie_voice_frex {
  display: flex;
  width: 100%;
  height: auto;
  max-width: 1200px;
}

.movie_voice,
.osusume {
  width: 33%;
  padding: 0.5em;
  height: auto;
  flex-shrink: 0;
  flex-direction: column;
  word-wrap: break-word;
  /* 長い単語の途中でも折り返しOK */
  word-break: break-word;
  /* 日本語対応・改行を強制的に入れる */
  white-space: normal;
  /* 折り返しOKにする（←重要） */
}

.movie_voice img,
.osusume img {
  width: 100%;
  height: auto;
}

.movie_voice h3 {
  margin: 0.5em 0;
  font-weight: normal;
}

.osusume h2 {
  color: #ffffff;
  font-size: 40px;
  margin-top: -47px;
  margin-left: 4px;
  text-shadow: 2px 2px 8px rgba(0, 0, 0, 0.3);
}

.osusume h3 {
  margin: 0.5em 0;
}

.movie_voice h4,
.osusume h4 {
  font-weight: normal;
}

.movie_voice p {
  font-size: 14px;
  line-height: 1.6em;
  /* ← 少し広げて余裕を持たせる */
  color: #353535;
  text-align: left;
  /* ← スマホでは justify を避けた方が自然 */
  margin: 0.5em auto;
  padding: 0.2em;

  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
  text-overflow: ellipsis;
}

.osusume p {
  font-size: 15px;
  line-height: 25px;
}

@media(max-width: 900px) {
  .movie_voice_frex {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 1300px;
    width: 100%;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }

  .movie_voice_frex::-webkit-scrollbar {
    display: none;
  }

  .movie_voice,
  .osusume {
    display: inline-block;
    width: 100%;
    max-width: 310px;
    margin: 0.2em;
    flex-shrink: 0;
  }

  .movie_voice p {
    text-align: left !important;
    max-height: calc(1.6em * 3);
    /* フォールバック用 */
  }
}

.for_step {
  width: 100%;
  height: auto;
  padding: 2em 0;
  margin: 0 auto;
  background-image:
    repeating-linear-gradient(to bottom, transparent 25px, rgba(0, 0, 0, 0.04) 26px, rgba(0, 0, 0, 0.04) 26px, transparent 27px, transparent 51px, rgba(0, 0, 0, 0.04) 52px, rgba(0, 0, 0, 0.04) 52px, transparent 53px, transparent 77px, rgba(0, 0, 0, 0.04) 78px, rgba(0, 0, 0, 0.04) 78px, transparent 79px, transparent 103px, rgba(0, 0, 0, 0.04) 104px, rgba(0, 0, 0, 0.04) 104px, transparent 105px, transparent 129px, rgba(0, 0, 0, 0.04) 130px, rgba(0, 0, 0, 0.04) 130px), repeating-linear-gradient(to right, transparent 25px, rgba(0, 0, 0, 0.04) 26px, rgba(0, 0, 0, 0.04) 26px, transparent 27px, transparent 51px, rgba(0, 0, 0, 0.04) 52px, rgba(0, 0, 0, 0.04) 52px, transparent 53px, transparent 77px, rgba(0, 0, 0, 0.04) 78px, rgba(0, 0, 0, 0.04) 78px, transparent 79px, transparent 103px, rgba(0, 0, 0, 0.04) 104px, rgba(0, 0, 0, 0.04) 104px, transparent 105px, transparent 129px, rgba(0, 0, 0, 0.04) 130px, rgba(0, 0, 0, 0.04) 130px)
}

.for_step_fre {
  display: flex;
  margin: 1em auto;
  max-width: 1000px;
  width: 100%;
  height: auto;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.for_step_fre div {
  width: 23%;
  margin: 1%;
  height: auto;
}

.for_step_fre img {
  width: 100%;
  height: auto;
}

.for_step_fre div h2 {
  margin: 1em auto;
  font-size: 16px;
  color: #4daf8f;
  font-weight: normal;
  color: #333;
}

.for_step_fre div h2 span {
  color: #4daf8f;
  font-weight: bold;
  font-size: 17px;
  padding: 5px;
}

.for_step_fre div p {
  font-size: 14px;
  color: #575757;
  text-align: justify;
  width: 90%;
  margin: 0 auto 1em auto;
  line-height: 1.5em;
  height: 45px;
}

@media screen and (max-width: 960px) {
  .for_step_fre div {
    width: 48%;
  }

  .fre_bana_six div {
    width: 32%;
  }

}

.movie_tel_other {
  text-align: center;
  margin: 3em auto 2em auto;
}

.movie_tel_other h3 {
  font-family: serif;
  font-size: 1.8em;
  font-weight: normal;
  margin: 0.5em auto;
}

.movie_tel_other h3 a {
  color: #333;
}

.movie_tel_other p {
  color: #333;
}

.form_under_fre {
  width: 90%;
  max-width: 500px;
  margin: 0 auto 1em auto;
  display: flex;
}

.form_under1 {
  background-color: #1a90a0;
  text-align: center;
  padding: 1em;
  width: 48%;
  margin: 0 1%;
  border-radius: 20px;
}

.form_under2 {
  background-color: #25c662;
  text-align: center;
  padding: 1em;
  width: 48%;
  margin: 0 1%;
  border-radius: 20px;
}

.news_movie {
  width: 90%;
  margin: 1em auto;
  max-width: 700px;
  text-align: justify;
}

.news_movie h3 span {
  color: white;
  margin-left: 5px;
  font-size: 9px;
  padding: 4px 10px;
  background-color: #91b2eb;
  font-weight: normal;
}

p.single-line {
  width: 95%;
  /* 必要に応じて調整 */
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news_movie {
  width: 90%;
  margin: 1em auto;
  max-width: 700px;
  text-align: justify;
}

.news_movie h3 span {
  color: white;
  margin-left: 5px;
  font-size: 9px;
  padding: 4px 10px;
  background-color: #91b2eb;
  font-weight: normal;
}

p.single-line {
  width: 95%;
  /* 必要に応じて調整 */
  display: block;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.news_movie h3 span3 {
  font-size: 13px;
  font-weight: normal;
  color: #4c4c4c;
  margin-left: 5px;
}

.news_movie h3 {
  margin: 0.5em auto;
  display: flex;
  align-items: center;
}

.news_movie p {
  line-height: 1.5em;
  font-size: 13.5px;
  margin: 0.5em 0;
}

.news_movie p a {
  color: #385e8a;
  margin: 0 auto;
}

.frex_under_text {
  display: flex;
  max-width: 1000px;
  width: 95%;
  margin: 1em auto;
  align-items: center;
}

.frex_under_text_in1 {
  width: 40%;
}

.frex_under_text_in1 img {
  width: 75%;
  height: auto;
}

.frex_under_text_in2 {
  width: 60%;
  text-align: justify;
  line-height: 1.6em;
}

@media(max-width: 600px) {
  .footer_unde_bana2 img {
    width: 98%;
    height: auto;
    margin: 1%;
  }
}

@media(max-width: 900px) {
  .movie_voice_frex {
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    max-width: 1300px;
    width: 100%;
    margin: 0 auto;
    /* IE, Edge 対応 */
    -ms-overflow-style: none;
    /* Firefox 対応 */
    scrollbar-width: none;
  }

  .movie_voice {
    /* 横スクロール用 */
    display: inline-block;
    width: 100%;
    margin: 0.7em;
  }

  .movie_voice p {
    -webkit-line-clamp: 4;
  }

  .frex_under_text {
    display: block;
  }

  .frex_under_text_in1 {
    width: 100%;
    text-align: center;
    margin: 1em auto;
  }

  .frex_under_text_in1 img {
    width: 50%;
    height: auto;
  }

  .frex_under_text_in2 {
    width: 100%;
  }

}

@media(max-width: 900px) {
  .frex_under_text_in1 img {
    width: 70%;
    height: auto;
  }
}


.foo {
  color: #333;
  text-align: center;
  line-height: 1.8em;
  font-size: 13px;
  width: 95%;
  margin: 0 auto;
}

.foo a {
  color: #385e8a;
}

.jugyou {
  text-align: center;
  line-height: 1.8em;
  margin: 1em auto;
}

.isum_fotter {
  text-align: center;
  margin: 1em auto;
}

.isum_fotter p {
  margin: 0.5em auto;
  font-size: 14px;
  color: #333;
}

.isum_fotter img {
  width: 75px;
  height: auto;
  margin: 5px auto;
}

.isum_img {
  width: 100%;
  height: auto;
  margin: 1em auto;
  max-width: 500px;
}

.isum_img img {
  width: 100%;
  height: auto;
}

/* 全体のスタイル */
.seo_koumoku {
  width: 95%;
  height: auto;
  max-width: 900px;
  margin: 3em auto;
}

/* 見出しのデザイン */
.seo_title {
  margin-bottom: 1em;
  font-size: 16px;
  padding-bottom: 1em;
  position: relative;
  color: #585858;
  cursor: pointer;
  /* クリック可能に */
  padding-right: 30px;
}

/* 見出し内の小文字 */
.seo_title h2 span {
  font-size: 15px;
  padding-left: 2px;
}

/* 見出しの下線デザイン */
.seo_title:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 5px;
  content: '';
  background-image: repeating-linear-gradient(-45deg, #000, #000 1px, transparent 2px, transparent 5px);
  background-size: 7px 7px;
  backface-visibility: hidden;
}

/* 本文スタイル（初期状態は非表示） */
.seo_honbn {
  text-align: justify;
  line-height: 1.5em;
  font-size: 16px;
  color: #5e5e5e;
  display: none;
  /* 折りたたみ初期状態 */
  padding-top: 10px;
}

/* 開いたときのスタイル */
.seo_koumoku.open .seo_honbn {
  display: block;
}

/* アイコンのスタイル */
.toggle-icon {
  position: absolute;
  right: 0;
  top: 5px;
  font-size: 16px;
  transition: transform 0.3s ease;
}

/* 開いたときに回転 */
.seo_koumoku.open .toggle-icon {
  transform: rotate(180deg);
}

.movie_liter {
  width: 95%;
  max-width: 900px;
  margin: 1em auto;
  font-weight: normal;
}

.movie_liter h1 {
  text-align: center;
  line-height: 2em;
  margin: 1em auto;
  font-weight: normal;
  font-family: serif;
  font-size: 18px;
}

.movie_liter h1::before {
  content: "“";
  font-size: 25px;
  color: #5e5e5e;
}

.movie_liter h1::after {
  content: "”";
  font-size: 25px;
  color: #5e5e5e;
}

.movie_liter h2 {
  font-weight: normal;
  margin: 0.5em auto;
  font-size: 15px;
  color: #5e5e5e;
  line-height: 1.5em;
}

.movie_liter p {
  line-height: 1.6em;
  margin: 0.5em auto;
  padding: 0.5em 0;
  color: #5e5e5e;
  font-size: 16px;
  text-align: justify;
}

.movie_liter h3 {
  font-weight: normal;
  margin: 0 auto;
  color: #505050;
  /*文字色*/
  padding: 0.5em;
  /*文字周りの余白*/
  display: inline-block;
  /*おまじない*/
  line-height: 1.3;
  /*行高*/
  vertical-align: middle;
}

.movie_liter h3::before {
  content: '●';
  color: #b7cad9;
  margin-right: 8px;
}

.movie_liter_fre_im {
  display: flex;
  flex-wrap: wrap;
  margin: 2em auto;
}

.movie_liter_fre_im div {
  width: 33%;
  height: auto;
}

.movie_liter_fre_im img {
  width: 100%;
  height: auto;
}

@media screen and (max-width: 700px) {
  .movie_liter h1 {
    font-size: 15px;
  }

  .movie_liter_fre_im_sp {
    display: none;
  }

  .movie_liter_fre_im div {
    width: 50%;
  }
}

.breadcrumb {
  display: flex;
  flex-wrap: nowrap;
  /* 横並びにして折り返さない */
  list-style: none;
  max-width: 100%;
  width: 100%;
  margin: 6px auto;
  font-size: 14px;
  overflow-x: auto;
  /* 横スクロールを有効にする */
  white-space: nowrap;
  /* テキストが折り返さない */
  scroll-snap-type: x mandatory;
  /* スクロール位置を調整 */
  max-width: 1200px;
  padding: 0 5px;
}

.breadcrumb a {
  color: #7c7c7c;
  text-decoration: underline;
}

.breadcrumb li:not(:last-of-type)::after {
  content: "›";
  margin: 0 .6em;
  /* 記号の左右の余白 */
  color: #7c7c7c;
  /* 記号の色 */
}

/* スクロールバーの非表示 */
.breadcrumb::-webkit-scrollbar {
  display: none;
}

.faq-container {
  width: 100%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
}

.faq-item {
  border-bottom: 1px solid #ddd;
  padding: 10px 0;
  font-size: 15px;
  color: #555;
  margin: 5px 0;
  line-height: 25px;
}

.faq-question {
  font-size: 16px;
  font-weight: bold;
  color: #404040;
  /* 質問全体の色 */
  position: relative;
  margin: 0;
  padding: 10px;
  cursor: pointer;
}

.faq-question::before {
  content: "Q";
  font-size: 20px;
  font-weight: bold;
  color: #ffb000;
  margin-right: 5px;
}

.faq-answer {
  padding: 10px;
  font-size: 14px;
  color: #333;
  display: none;
  /* 初期状態では非表示 */
}

.faq-answer strong {
  font-size: 14px;
  color: #000;
}

.faq-answer ul {
  padding-left: 20px;
  list-style-type: disc;
}

.faq-answer .note {
  font-size: 13px;
  color: #666;
  margin-top: 5px;
}


.quick_date {
  display: flex;
  margin: 1em auto;
  width: 95%;
  max-width: 600px;
}

.quick_date div {
  width: 48%;
  text-align: center;
  height: auto;
  margin: 1%;
  padding: 1em;
  border: solid 1px #000;
  line-height: 26px;
  border: solid 1px #cfcfcf;
  background: #f9f9f9;
  border-radius: 5px;
}

.quick_date p span {
  font-size: 15px;
  font-weight: normal;
  color: #656161;
}

.quick_date p {
  font-size: 20px;
  font-weight: bold;
  color: #2f2f2f;
}

.queck_text {
  width: 90%;
  margin: 0.5em auto;
  line-height: 22px;
  font-size: 16px;
  color: #272727;
  max-width: 500px;
}

.text_hash {
  font-size: 13px;
  margin: 0.2em 0;
  color: #1abc9c;
  padding: 0 1em;
  cursor: default;
}


/* Modal styles */
.movie-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9999;
  background: rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
}

.movie-modal-content {
  background: white;
  padding: 24px;
  border-radius: 12px;
  width: 95%;
  max-width: 420px;
  text-align: center;
}

.movie-card-grid {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 16px 0;
}

.movie-card-pop {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.movie-card-pop input {
  display: none !important;
}

.movie-card-body {
  flex: 1;
  border-radius: 8px;
  padding: 17px;
  font-weight: bold;
  transition: 0.2s;
  margin: 18px 0;
  border: solid 1px #e2e2e2;
  background: #f5f5f5;
}

.movie-modal-content a {
  color: #525252;
}

.movie-card-pop input:checked+.movie-card-body {
  background: #00bfa5;
  color: white;
}

.movie-modal-submit {
  background: #00bfa5;
  color: white;
  border: none;
  padding: 12px 20px;
  border-radius: 999px;
  font-weight: bold;
  cursor: pointer;
  transition: 0.2s;
  margin: 0.5em auto;
  width: 95%;
  max-width: 200px;
}

.movie-modal-submit:hover {
  background: #009688;
}

.movie-modal-submit:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
}

.hero {
  background-color: #f5faff;
  padding: 1.5em 0;
}

/* video frame */
.hero-frame-vid {
  position: relative;
  aspect-ratio: 16 / 9;
  max-width: 640px;
  margin: 0 auto;
  width: 100%;
}

.hero-frame-vid img.hero-loader-gif,
.hero-frame-vid video.hero-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  border-radius: 15px;
}

.hero-frame-vid video.hero-video {
  opacity: 0;
  transition: opacity 0.5s ease;
}

.hero-frame-vid video.hero-video.visible {
  opacity: 1;
}

.annual-badge {
  position: absolute;
  bottom: 0px;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  height: auto;
  text-align: center;
  padding: 10px;
  z-index: 100;
}

/*
  Index ファーストビュー
*/
.fv_fle {
  display: flex;
  width: 100%;
  height: auto;
  max-width: 1300px;
  margin: 0 auto;
  align-items: center;
  flex-wrap: wrap;
}

.fv_fle .fv_nai,
.fv_fle .fv_nai2 {
  width: 48%;
  margin: 1%;
  position: relative;
}

.fv_fle img {
  width: 100%;
  height: auto;
  border-radius: 15px;
}



.fv_fle h2 {
  font-family: system-ui;
  color: #525252;
  font-size: 17px;
  text-align: center;
  padding: 6px 0px 6px 6px;
  line-height: 24px;
}

.fv_fle h2 span {
  color: #1cb4a7;
}


.zengaku_wish_erabu {
  font-size: 15px;
  margin: 1.4em auto;
  text-align: center;
}

.zengaku_wish_erabu a {
  color: #3c88f5;
  font-weight: bold;
}

.setumei_botan_ue {
  font-size: 16px;
  text-align: center;
  margin-top: 10px;
  font-weight: 500;
  letter-spacing: 0.5px;
  color: #333;
}

.setumei_botan_ue .setumei_botan_ue_highlight {
  background: linear-gradient(to right, #1fc1c0, #03bba6);
  color: #fff;
  padding: 6px 15px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 14px;
  display: inline-block;
  margin-bottom: 5px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.zengaku_wish_erabu a span {
  padding: 3px 15px;
  background-color: #3c88f5;
  color: white;
  text-align: center;
  margin-right: 10px;
  border-radius: 10px;
}

@media (max-width: 900px) {
  .fv_fle .fv_nai {
    width: 100%;
    margin: 0 auto;
    position: relative;
  }

  .fv_fle h2 {
    font-size: 17px;
  }

  .fv_fle img {
    border-radius: 0;
  }

  .fv_fle .fv_nai2 {
    width: 100%;
  }

  .fv_nai2 {
    order: 2;
  }

  .fv_nai {
    order: 1;
  }

  .hero-frame-vid {
    max-width: 1000px;
  }

  .hero-frame-vid img.hero-loader-gif,
  .hero-frame-vid video.hero-video {
    border-radius: 0;
  }

  .lc-contact-boost-inner {
    margin: 0;
  }

  .page {
    margin: 10px auto;
  }
}

@media (max-width: 760px) {
  .page {
    margin: 0;
  }
}

.movie-select-flex_aiuo {
  display: flex;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin: 20px auto;
}

.movie_select_flex_in {
  width: 47%;
}

.movie-card_aiuo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
  padding: 14px 18px;
  text-decoration: none;
  color: #2cb3a7;
  transition: 0.2s ease;
  width: 100%;
  min-height: 80px;
  background: #f2f2f2;
}

.movie-card_aiuo:hover {
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
  transform: translateY(-2px);
}

.movie-img_aiuo {
  width: 44px !important;
  height: auto;
  -o-object-fit: contain;
     object-fit: contain;
}

/* テキスト */
.movie-label_aiuo {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.4;
  margin: 0;
}

.isyou_no {
  width: 100%;
  height: auto;
  margin: 0 auto 1em auto;
  text-align: center;
  max-width: 400px;
}

.isyou_no img {
  width: 80%;
  height: auto;
  max-width: 500px;
}


.fv_nai2_in {
  width: 100%;
  margin: 0 auto;
  text-align: center;
  max-width: 500px;
}

.fv_nai2_main img {
  max-width: 220px;
  margin: 0 auto 20px;
}

.fv_nai2_feature {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  width: 100%;
  margin: 1em auto;
}

.fv_nai2_item {
  width: 31%;
  display: flex;
  flex-direction: column;
  align-items: center;
  font-size: 14px;
  color: #333;
}

.fv_nai2_item img {
  width: 60px;
  height: auto;
  margin-bottom: 8px;
}

.fv_fre {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 1em auto;
  max-width: 450px;
}

.fv_fre img {
  width: 100%;
  height: auto;
}

/* モバイル調整 */
@media (max-width: 767px) {
  .movie-card_aiuo {
    flex-direction: column;
    padding: 12px 14px;
    gap: 6px;
    min-height: auto;
  }

  .movie-img_aiuo {
    width: 60px !important;
    margin-bottom: 4px;
  }

  .movie-label_aiuo {
    font-size: 13px;
    line-height: 21px;
    text-align: center;
  }

  .fv_nai2_main img {
    max-width: 180px;
  }
}

.videoos {
  width: 100%;
  max-width: 800px;
  margin: 40px auto;
  padding: 0 20px;
  box-sizing: border-box;
}

.videoos video {
  width: 100%;
  height: auto;
  border-radius: 16px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
  display: block;
}


.lc-contact-boost-inner {
  max-width: 720px;
  margin: 0 auto;
  padding: 60px 10px;
  background: #f4f9ff;
}

.lc-contact-boost-pretitle {
  font-size: 14px;
  font-weight: 600;
  color: #2cb3a7;
  margin-bottom: 8px;
}

h2.lc-contact-boost-title {
  font-size: 23px;
  font-weight: 700;
  margin: 0;
  line-height: 1.2;
  text-align: left;
  font-weight: bold !important;
  font-family: Helvetica Neue, sans-serif;
  padding: 0;
}

.lc-contact-boost-highlight {
  color: #007acc;
}

.lc-contact-boost-lead {
  font-size: 1rem;
  color: #333;
  line-height: 33px;
  margin: 16px 0;
}

.lc-contact-boost-tags {
  display: flex;
  flex-wrap: wrap;
  line-height: 21px;
  margin: 0 auto;
  /* 横幅を auto 中心 */
  /* この幅で折り返し制御 */
  padding: 0;
  list-style: none;
  max-width: 500px;
  margin: 0 auto 0 0;
}

/* タグひとつひとつ */
.lc-contact-boost-tag {
  flex: 0 1 auto;
  /* 内容幅に合わせつつ、折り返しOK */
  white-space: nowrap;
  /* テキスト改行させない */
  font-size: 12px;
  color: #007acc;
  font-weight: bold;
  padding-left: 5px;
}


@media (max-width: 900px) {
  .lc-contact-boost-inner {
    margin: 0;
    max-width: 1000px;
  }

  .hero {
    padding: 0 0 10px 0;
  }
}




/* ムービー選択ボタン 共通 */
.lc-movie-select {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  justify-content: center;
  margin: 40px 0;
}

/* 個別カード */
.lc-movie-select__card {
  flex: 1 1 300px;
  max-width: 320px;
  background: #ffffff;
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 24px;
  text-decoration: none;
  transition: transform 0.2s, box-shadow 0.2s;
}

.lc-movie-select__card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

/* テキスト */
.lc-movie-select__label {
  font-size: 1rem;
  font-weight: 600;
  color: #005ea3;
  margin: 0;
}

/* 矢印アイコン */
.lc-movie-select__arrow {
  font-size: 1.25rem;
  color: #005ea3;
  transition: margin-left 0.2s;
}

.lc-movie-select__card:hover .lc-movie-select__arrow {
  margin-left: 4px;
}

@media (max-width: 760px) {
  .lc-contact-boost-inner {
    padding: 29px 10px;
  }

  .lc-movie-select {
    margin: 10px 0;
  }
}
@charset "utf-8";
/* -------------------------下の固定部分CSS　---------------------------*/
a{
	text-decoration: none;
}
body {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  font-size: 16px;
  line-height: 1.6;  /* 読みやすい基本設定 */
}
h1, h2, h3 {
  line-height: 1.3;  /* タイトに詰めると見出しっぽくなる */
}
img.im-100{
  width: 100%;
  height: auto;
}
img.im-70{
  width: 40%;
  height: auto;
}
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure,
footer, header, hgroup, menu, nav, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/*行の高さをフォントサイズと同じにしています*/
body {
  line-height: 1;
}

/*新規追加要素のデフォルトはすべてインライン要素になっているので、section要素などをブロック要素へ変更しています*/
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

/*nav要素内ulのマーカー（行頭記号）を表示しないようにしています*/
/*nav ul {
    list-style:none;
}*/
ol, ul {
 list-style: none;
    line-height: 1.5em;

}


/*引用符の表示が出ないようにしています*/
blockquote, q {
  quotes: none;
}

/*blockquote要素、q要素の前後にコンテンツを追加しないように指定しています*/
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}

/*a要素のフォントサイズなどをリセットしフォントの縦方向の揃え位置を親要素のベースラインに揃えるようにしています*/
a {
  margin: 0;
  padding: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
}

/* ins要素のデフォルトをセットし、色を変える場合はここで変更できるようにしています */
ins {
  background-color: #ff9;
  color: #000;
  text-decoration: none;
}

/* mark要素のデフォルトをセットし、色やフォントスタイルを変える場合はここで変更できるようにしています
また、mark要素とは、文書内の検索結果で該当するフレーズをハイライトして、目立たせる際に使用するようです。*/
mark {
  background-color: #ff9;
  color: #000;
  font-style: italic;
  font-weight: bold;
}

/*テキストに打ち消し線が付くようにしています*/
del {
  text-decoration: line-through;
}

/*IEではデフォルトで点線を下線表示する設定ではないので、下線がつくようにしています
また、マウスオーバー時にヘルプカーソルの表示が出るようにしています*/
abbr[title], dfn[title] {
  border-bottom: 1px dotted;
  cursor: help;
}

/*隣接するセルのボーダーを重ねて表示し、間隔を0に指定しています*/
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/*水平罫線のデフォルトである立体的な罫線を見えなくしています*/
hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #cccccc;
  margin: 1em 0;
  padding: 0;
}

/*縦方向の揃え位置を中央揃えに指定しています*/
input, select {
  vertical-align: middle;
}

/*画像を縦に並べた時に余白が出ないように*/
img {
  vertical-align: top;
  font-size: 0;
  line-height: 0;
}

/*box-sizingを全ブラウザに対応*/
*, *:before, *:after {
  -o-box-sizing: border-box;
  -ms-box-sizing: border-box;
  box-sizing: border-box;
}

a {
  text-decoration: none;
}




.header-logo {
  display: flex;
  align-items: center;
  padding: 10px 0;
  width: 30%;
}

.header-logo img {
  width: 75%;
}




.header-list i{
  margin-right: 5px;
}
.header-list, .header-right, .header-left {
  display: flex;
  align-items: center;
  height: 100%;
}
.header-list {
  padding-top: 10px;
  margin-left: 20px;
  width: 85%;
}
.header-list li {
  margin-right: 15px;
}
.header-list li a {
  color: gray;
}
.header-list li i {
  margin-left: 10px;
}



.header__mail, .header__line, .humberger {
  width: 75px;
  height: 100%;
  text-align: center;
  vertical-align: middle;
}

.header__line{
  width: 70px;
}
.header__line img{
  margin-top: 20px;
    max-width: 38px;
    margin-bottom: 4px;
}
.header__mail img, .humberger img {
	margin-top: 22px;
  max-width: 38px;
  margin-bottom: 4px;
}




.header__mail p, .header__line p, .humberger p {
  font-size: 12px;
  margin-top: 5px;
  color: black;
  -webkit-transform: scale(0.9);
}





.header__line i {
  color: #00B900;
  background: white;
}

#humberger {
  position: relative;
  height: 20px;
  width: 80px;
  display: inline-block;
  box-sizing: border-box;
  margin-top: 27px;
  right: 9px;
}



#humberger div {
  position: absolute;
  right: 10px;
  height: 4px;
  background-color: rgb(54, 54, 54);
  border-radius: 15px;
  display: inline-block;
  box-sizing: border-box;
}
#humberger div:nth-of-type(1) {
  width: 40px;
    bottom: 15px;
}
#humberger div:nth-of-type(2) {
  width: 33px;
    bottom: 3px;
}
#humberger div:nth-of-type(3) {
  bottom: -10px;
  width: 25px;
}



.header-nav {
  background: #f5f5f5;
  padding-bottom: 20px;
  position: fixed;
  right: 0;
  top: 0;
  height: 100vh;
  width: 100vw;
  z-index: 99999;
  overflow-y: auto;
  -ms-transform: translateX(-100vw); /* ← 古いIE用（無視可） */
  box-sizing: border-box;
  /* ↓ ここが「隠れた状態」 */
  transform: translate(100vw, 0); 
  transition: width 475ms ease-out, transform 450ms ease, border-radius .8s .1s ease;
  border-bottom-left-radius: 100vw;
}

/* .activeクラスでメニューが画面内に表示されるように設定 */
.header-nav.active {
  transform: translate(0, 0);
  border-radius: 0;
}
.herd_mna {
  position: absolute;
  top: 0; /* ← 上から表示 */
  left: 50%;
  transform: translateX(-50%); /* 横方向だけ中央に */
  width: 100%;
  box-sizing: border-box;
}


.active {
  transform: none;
  border-bottom-left-radius: 0;
}

.logo-close {
  display: flex;
  justify-content: space-between;
  margin: 10px;
  width: 98%;
  max-width: 600px;
  align-items: center;
}

.nav-logo img {
  width: 130px;
}

.nav-contents {
  margin: 0 auto;
  margin-top: 90px;
  text-align: center;
  width: 470px;
}

.search-movie {
  display: flex;
  justify-content: center;
  margin-left: -10px;
  margin-bottom: 17px;
}
.batsu {
  display: block;
  width: 25px;
  height: 26px;
  position: relative;
  margin-right: 8px;
  margin-top: 2px;
}

.batsu::before, .batsu::after {
  content: "";
  display: block;
  width: 100%;
  /*バツ線の長さ*/
  height: 5px;
  /*バツ線の太さ*/
  background: #363636;
  transform: rotate(45deg);
  transform-origin: 0% 50%;
  position: absolute;
  top: calc(14% - 5px);
  left: 14%;
}

.batsu::after {
  transform: rotate(-45deg);
  transform-origin: 100% 50%;
  left: auto;
  right: 14%;
}
/*
  新メニューCSS
*/
.main_menu{
  margin: 10px auto 0 auto;
  max-width: 600px;
  width: 98%;
}
.main_menu_ic_fre{
  display: flex;
  margin: 0 auto;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.main_menu_ic_fre a{
  width: 48%;
  margin: 1%;
  height: auto;
  border: solid 2px #c7c7c7;
  color: #343434;
  font-size: 13px;
  text-align: center;
  padding: 1em 0;
  border-radius: 10px;
}
.main_menu_ic_fre a img{
  width: 100%;
  height: auto;
  max-width: 37px;
  margin-bottom: 10px;
}


.fredaasa_cet{
  display: flex;
  justify-content: center;
  position: relative;
  max-width: 600px;
  width: 100%;
  margin: 0 auto;
}

.my_menu_nai{
  width: 40px;
  text-align: center;
  height: 30px;
  position: absolute;
  right: 70px;
  top: 17px;
}
.my_movie_mita{
  position: absolute;
  width: 52px;
  text-align: center;
  height: 30px;
  right: 122px;
  top: 17px;
}

.my_menu_nai img,.my_movie_mita img{
  width: 32px;
  height: auto;
  margin-bottom: 4px;
}
.my_menu_nai a, .my_movie_mita a{
  color: #333;
  font-size: 8px;
}



/* モーダルのスタイル */
.custom-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
}

.custom-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  padding: 20px 5px;
  border-radius: 10px;
  width: 90%;
  max-width: 400px;
  text-align: center;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.3);
}

.custom-modal-header {
  font-size: 15px;
  font-weight: bold;
  margin: 1em auto;
  letter-spacing: 2px;
  line-height: 22px;
}
.custom-modal-header span{
  color: #535353;
  font-size: 14px;
  letter-spacing: 0;
}

.custom-modal-close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 30px;
  color: black;
  cursor: pointer;
}
img.wish_addres{
  width: 100%;
  height: auto;
  max-width: 71px;
}

.adres_fre{
  display: flex;
  width: 100%;
  margin: 1em auto;
}
.adres_fre a{
  width: 31%;
  margin: 1%;
  font-size: 13px;
  color: #006ebc;
}
.adres_fre img{
  margin-bottom: 12px;
}
.margad p {
  margin: 1em auto;
  text-align: left;
  padding: 0 1em;
  line-height: 24px;
  color: #242424;
  font-size: 15px;
}
.margad p span{
  color: #585858;
}
/* ボタンのスタイル */
.online_soudan {
  display: inline-block;
  position: relative;
  background: #4a79a7; /* ボタンの色 */
  color: white;
  font-size: 16px;
  font-weight: bold;
  text-align: center;
  padding: 15px 30px;
  border-radius: 30px;
  text-decoration: none;
  transition: background 0.3s;
  width: 80%;
  margin: 1em auto;
}

.online_soudan:hover {
  background: #365c89; /* ホバー時の色 */
}

/* 上の小さいラベル */
.online_soudan::before {
  content: "今なら限定特典も！";
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: #dce5f1; /* ラベルの背景色 */
  color: #4a79a7; /* 文字色 */
  font-size: 12px;
  padding: 5px 10px;
  border-radius: 10px;
  white-space: nowrap;
}


.movie_under_menu{
  width: 100%;
  height: auto;
  display: flex;
  margin: 1em auto 0 auto;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.movie_under_menu a{
  color: #353535;
  width: 31%;
  margin: 1%;
  font-size: 13px;
  text-align: center;
  background: #e4e4e4;
  line-height: 28px;
  border-radius: 150px;
  padding: 3px 0;
}
.movie_under_menu {
  width: 100%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 2%; /* 均等な間隔を設定 */
}

.movie_under_menu a {
  color: #353535;
  flex-grow: 1; /* 均等な幅を確保 */
  width: 30%;
  font-size: 13px;
  text-align: center;
  background: #e4e4e4;
  line-height: 28px;
  border-radius: 150px;
  padding: 3px 10px;
  transition: all 0.3s ease-in-out; /* ホバー時のアニメーション */
}

.movie_under_menu a:hover {
  background: #d0d0d0; /* ホバー時に少し暗くする */
}

/* アコーディオン全体 */
.simple-accordion {
  width: 95%;
  margin: 20px auto;
  font-family: Arial, sans-serif;
}

/* 各アコーディオン項目 */
.accordion-item {
  border-bottom: 1px solid #ddd;
}

/* ヘッダー部分 */
.accordion-header {
  width: 100%;
  background: #ffffff;
  color: #333;
  font-size: 16px;
  font-weight: bold;
  padding: 12px 15px;
  text-align: left;
  border: none;
  outline: none;
  cursor: pointer;
  transition: background 0.3s ease-in-out;
  position: relative;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
/* ヘッダーのホバー時 */
.accordion-header:hover {
  background: #e4e4e4;
}

/* 矢印のデザイン */
.arrow {
  font-size: 16px;
  transition: transform 0.3s ease-in-out;
}
.accordion-item.active .arrow {
  transform: rotate(90deg);
}
/* コンテンツ（初期は非表示） */
.accordion-content {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
  background: #fff;
}
/* リストのデザイン */
.accordion-content li {
  padding: 10px 15px;
  border-top: 1px solid #ddd;
  position: relative;
}
/* リンクデザイン */
.accordion-content a {
  display: block;
  font-size: 14px;
  color: #383838;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}
/* ホバー時 */
.accordion-content a:hover {
  text-decoration: underline;
}
.accordion-content li i{
  position: absolute;
  top: 15px;
  right: 17px;
}
.menu_box_undex_wish {
  text-align: center;
  background: white;
  width: 95%;
  margin: 1em auto;
  padding: 1em 0;
  border-radius: 15px;
}
.menu_box_undex_wish_fre{
  display: flex;
  justify-content: center;
  align-items: center;
}
.menu_box_undex_wish_fre .custom-modal-header{
  margin: 1%;
  font-size: 17px;
}
.menu_box_undex_wish_fre img{
  width: 77%;
}
img.im-70-menu{
  width: 31%;
}
.btn-consultation {
  display: inline-block;
  text-decoration: none;
  background-color: #1cb4a7;
  color: #ffffff;
  font-size: 13px;
  font-weight: bold;
  padding: 13px 12px;
  border-radius: 30px;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.16);
  transition: all 0.3s ease;
}

.btn-consultation:hover {
  transform: translateY(-3px);
  box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}
.clear {
  clear: both;
  height: 0;
}
.menu_bana_erabu{
  width: 95%;
  border-radius: 10px;
  height: auto;
  margin: 1em auto;
}
.menu_bana_erabu img{
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.header__mail {
  position: relative;
}
.cart_num_maru {
  position: absolute;
  top: 11px;
  right: 5px;
  width: 22px;
  height: 22px;
  line-height: 22px;
  background-color: #52b2aa;
  border-radius: 50%;
  text-align: center;
}
.cart_num_maru p{
  color: #ffffff;
  margin: 2px !important;
}

.spheader{
  margin-top: 80px;
}
.cart_out{
  text-align: center;
  width: 100%;
  background-color: #f7f7f7;
  border-top: 0.5px solid #cfcfcf;
  border-bottom: 0.5px solid #cfcfcf;
  padding: 0.5em 0;
  line-height: 1.5em;
  font-size: 14px;
}
.cart_out span{
  color: red;
  font-weight: bold;
  font-size: 15px;
}
.cart_out_box{
  background-color: #305881;
  padding: 0.5em;
  width: 100%;
  max-width: 260px;
  margin: 0.5em auto;
  text-align: center;
  position: relative;
}
.cart_out_box a{color: white;}
.cart_out_box i{
  position: absolute;
  top: 11px;
  right: 8px;
}
.cart_out_setumei{
  margin: 1em auto;
  max-width: 600px;
  width: 95%;
  font-size: 14px;
  line-height: 1.21em;
  text-align: justify;
  color: #525252;
}

/* 〜425px（スマホ向け） */
@media (max-width: 425px) {
  header {
    height: 65px;
  }

  .header-logo img {
    width: 92%;
    max-width: 135px;
  }

  .header__mail, .header__line, .humberger {
    width: 53px;
    height: 65px;
  }

  .header__mail img, .header__line img, .humberger img {
    width: 32px;
  }

  .header__mail p, .header__line p, .humberger p {
    -webkit-transform: scale(0.8);
  }

  #humberger {
    width: 60px;
    margin-top: 28px;
    right: 6px;
  }

  #humberger div:nth-of-type(1) {
    width: 38px;
    bottom: 23px;
  }

  #humberger div:nth-of-type(2) {
    width: 29px;
    bottom: 12px;
  }

  #humberger div:nth-of-type(3) {
    width: 22px;
    bottom: 0;
  }

  .header-nav {
    padding-bottom: 0;
  }

  .nav-contents {
    width: 100vw;
  }

  .search-movie {
    justify-content: space-between;
    margin-left: 0;
  }

  .search-movie img {
    width: 90%;
  }

  .boo_a {
    width: 90%;
    margin-left: 5%;
  }

  .opening-movie {
    margin-right: 0;
  }
}

/* 〜700px（スマホ中・小） */
@media (max-width: 700px) {
  img.im-70-menu {
    width: 40%;
  }

  .fre_wasou_yous a span2,
  .fre_wasou_yous a span3 {
    font-size: 14px;
  }

  .fre_wasou_yous a {
    font-size: 12px;
    line-height: 16px;
    padding: 1em 0;
  }
}

/* 〜767px（タブレット縦） */
@media (max-width: 767px) {
  .header-logo {
    width: 100%;
  }

  .header-logo img {
    width: 92%;
    max-width: 135px;
  }
}

/* 〜768px（タブレット） */
@media (max-width: 768px) {
  .herd_mna {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    width: auto;
  }
}

/* 〜1178px（PC小・タブレット横） */
@media (max-width: 1178px) {
  .header-logo img {
    width: 170px;
  }

  .header-list {
    display: none;
  }
}

@media (min-width: 500px) {
  .cart_num_maru {
    width: 28px;
    height: 28px;
    line-height: 28px;
  }
}









/* フッター全体 */
.footer {
  background-color: #14243c;
  /* ダークブルー */
  color: white;
  padding: 40px 0 60px 0;
  font-family: 'Arial', sans-serif;
  line-height: 1.8em
}

/* フッターコンテナ */
.footer-container {
  display: flex;
  justify-content: space-between;
  max-width: 1100px;
  margin: auto;
  padding: 0 20px;
}

/* 左カラム（ロゴ・キャッチコピー） */
.footer-left {
  width: 30%;
  text-align: left;
}

.footer-left img {
  margin-top: 16px;
  margin-bottom: 14px;
}

.footer-logo {
  width: 100%;
  max-width: 250px;
}

.isum-logo {
  width: 100%;
  max-width: 62px;
  margin-top: 10px;
}

/* 中央カラム（サポート） */
.footer-center {
  width: 35%;
}

.footer-center h4,
.footer-right h4 {
  font-size: 18px;
  margin-bottom: 15px;
}

.footer-center ul,
.footer-right ul {
  list-style: none;
  padding: 0;
}

.footer-center ul li,
.footer-right ul li {
  margin-bottom: 8px;
}

.footer-center ul li a,
.footer-right ul li a {
  color: white;
  text-decoration: none;
  transition: color 0.3s;
}

.footer-center ul li a:hover,
.footer-right ul li a:hover {
  color: #5fc59e;
  /* オレンジ色に変化 */
}

/* 右カラム（SNS） */
.footer-right {
  width: 20%;
}

.footer-right ul li i {
  margin-right: 8px;
  font-size: 18px;
}

/* コピーライト部分 */
.footer-bottom {
  text-align: center;
  padding-top: 15px;
  font-size: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
  margin-top: 20px;
}
/* ページ全体を中央揃え */
.back-to-top-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 2em auto
}

/* リンク全体のデザイン */
.back-to-top {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  font-size: 16px;
  font-weight: bold;
  color: #363636;
  /* 落ち着いたブラウン系 */
  transition: color 0.3s;
  text-align: center;
}

/* ホバー時の色 */
.back-to-top:hover {
  color: #3c9481;
}

/* アイコンのデザイン */
.back-to-top .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px dashed #8a8a8a;
  border-radius: 50%;
  margin-left: 8px;
  transition: border-color 0.3s, transform 0.3s;
}

/* アイコンの矢印 */
.back-to-top .icon i {
  font-size: 14px;
  color: #4a3c1e;
}

/* ホバー時のアニメーション */
.back-to-top:hover .icon {
  border-color: #3c9481;
  transform: rotate(-45deg);
}

/* スマホ対応 */
@media screen and (max-width: 768px) {
  .footer-container {
    flex-direction: column;
    text-align: left;
  }

  .footer-left,
  .footer-center,
  .footer-right {
    width: 100%;
    margin-bottom: 20px;
  }

  .footer-logo,
  .isum-logo {
    margin: auto;
  }
}


.movie_name_23 h2 {
  color: #838584;
  font-size: 13px;
  font-weight: bold;
  line-height: 24px;
}

.movie_name_23 h2 i {
  margin-right: 4px;
}

.movie_name_price_fre {
  display: flex;
  margin: 12px 0;
  justify-content: flex-start;
  align-items: center;
  font-size: 19px;
  gap: 16px;
  font-family: 'Arial', 'Helvetica', sans-serif;
}

.ranking_cra_23 {
  font-weight: bold;
  color: #2d2d2d;
  font-family: 'Arial', 'Helvetica', sans-serif;
  font-weight: bold;
}

.ranking_cra_23 i {
  color: rgb(226, 185, 0);
  font-size: 30px;
  margin-top: -5px;
}

.fre_ranking_cra_23 {
  display: flex;
  align-items: center;
  gap: 3px;
}

.ranking_cra_23 span {
  position: relative;
}

.ranking_cra_23 h2 {
  position: absolute;
  top: 59%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-weight: bold;
  color: white;
  margin: 0;
  font-size: 15px;
}

/* EVENtPOP */
.popup-container {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1002;
  justify-content: center;
  align-items: center;
}

.popup-content {
  background: white;
  padding: 1em 10px;
  border-radius: 8px;
  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
  text-align: center;
  width: 90%;
  max-width: 700px;
  position: relative;
  max-height: 75%;
  overflow: auto;
  /* スクロール可能にする */
}

.close-btn {
  position: absolute;
  top: 0px;
  right: 1px;
  font-size: 31px;
  color: #5e5e5e;
  border: none;
  background: none;

}

.contact-container {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  margin: 2em 0;
  background: #0dada0;
  padding: 10px 6px;
  line-height: 22px;
  color: white;
  width: 100%;
  max-width: 600px;
  border-radius: 10px;
}

.speech-bubble {
  background-color: #ffffff;
  color: #0dada0;
  line-height: 20px;
  width: 41%;
  max-width: 120px;
  border-radius: 59px;
  padding: 5px 10px;
  font-size: 11px;
  font-weight: bold;
  display: inline-block;
  margin-right: 8px;
  position: relative;
  text-align: center;
}

.contact-text {
  display: flex;
  align-items: center;
}

.cp_23 {
  width: 100%;
}

.cp_23 img {
  width: 100%;
  height: auto;
}

.cp_23 h3 {
  margin: 1em auto;
  font-size: 15px;
  text-align: left;
  line-height: 23px;
}

.cp_23 p {
  text-align: left;
  line-height: 25px;
  margin: 1em auto;
}

.fressag {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1%;
}

.fressag div {
  width: 48%;
}

.fressag div button {
  width: 100%;
  height: auto;
}

button.fggadag {
  background: #0dada0;
  color: white;
  border: none;
  width: 90%;
  max-width: 250px;
  padding: 9px;
  margin: 1em auto 0 auto;
  position: relative;
  font-size: 16px;
}

button.fggadag i {
  position: absolute;
  top: 11px;
  right: 18px;
  font-size: 18px;
}

.cop_23_mese {
  display: block;
  padding: 18px;
  background: #0dada0f0;
  color: white;
  border-radius: 5px;
  font-size: 17px;
  position: fixed;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
  width: 270px;
  text-align: center;
  opacity: 1;
  transition: opacity 1.5s ease-out;
}

.cop_23_mese p {
  text-align: left;
  font-size: 15px;
  margin: 16px auto 0 auto;
  line-height: 22px;
  border-top: solid 1px white;
  border-bottom: solid 1px white;
  padding: 6px 0;
}


.ryoukin_23 h3 {
  color: #0dada0;
  font-size: 22px;
}

.ryoukin_23 h3 span {
  font-size: 15px;
}

p.title_text_23 {
  color: #404040;
  font-size: 12px;
}

span.souryou {
  color: #404040;
  font-weight: normal;
}

.movie_sita_23 {
  text-align: left;
  font-weight: normal;
  font-size: 13px;
  line-height: 2.5em;
  margin: 1em auto;
  color: #7b7878;
}

.movie_sita_23 i {
  font-size: 17px;
  color: #666;
  margin-right: 7px;
}

.movie_sita_23 span {
  color: #48968f;
  font-weight: bold;
}

.line-inquiry {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
  color: #15c967;
  text-decoration: none;
  border-bottom: 2px dotted #15c967;
  padding-bottom: 5px;
  transition: opacity 0.3s ease;
  text-align: center;
}

.line-inquiry span {
  font-weight: bold;
}

.line-inquiry:hover {
  opacity: 0.7;
}

.center {
  display: flex;
  margin: 1em auto;
  justify-content: center;
  align-items: center;
}

.recommend-container {
  font-family: 'Arial', 'Helvetica', sans-serif;
  font-weight: bold;
  font-size: 18px;
  line-height: 25px;
  padding: 0 7px;
  margin: 2em auto;
  padding: 15px 0;
  border-top: 2.5px solid #0dada0;
  /* 上線のアクセント */
  border-bottom: 2.5px solid #0dada0;
  /* 下線のアクセント */

}

.recommend-container span {
  color: #0dada0;
  margin-right: 9px;
  margin-left: 9px;
  font-size: 15px;
}

.recommend-container h3 {
  color: #2d2d2d;
  display: flex;
  font-size: 18px;
  justify-content: center;
}

.bogf_23 {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 1%;
}

.bogf_23 div {
  margin: 1em auto;
}

.bogf_23 div {
  width: 48%;
}

.bogf_23 img {
  width: 100%;
  height: auto;
  margin: 1em auto;
}

.yoyaku_SET {
  width: 100%;
}

.yoyaku_SET img {
  width: 100%;
  height: auto;
}

.yoyaku_SET h3 {
  margin: 1em auto;
}

.yoyaku_SET p {
  text-align: left;
  line-height: 22px;
  font-size: 14px;
}

.yoyaku_SET span {
  font-weight: 600;
  --tw-text-opacity: 1;
  color: rgb(100 216 220 / var(--tw-text-opacity));
}


.movie-details-content {
  background: white;
  border-radius: 8px;
  padding: 15px;
  text-align: left;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
}

.detail-item {
  padding: 10px 0;
  border-bottom: 1px solid #e0e0e0;
  line-height: 25px;
}

.detail-item:last-child {
  border-bottom: none;
}

.detail-item strong {
  font-size: 16px;
  color: #333;
  display: block;
  margin-bottom: 5px;
}

.detail-item i {
  margin-right: 8px;
  color: #666;
}


.sub-info {
  font-size: 12px;
  color: #777;
}

.note {
  font-size: 12px;
  color: #999;
}

/* 「もっと見る」クリック前は非表示 */
.additional-details {
  display: none;
}

.toggle-btn {
  display: block;
  margin: 15px auto 0;
  background: white;
  border: 1px solid #007bff;
  color: #007bff;
  padding: 8px 15px;
  border-radius: 20px;
  font-size: 14px;
  cursor: pointer;
  transition: background 0.3s, color 0.3s;
  width: 250px;
}

.fre_item_23 {
  display: flex;
  margin: 11px 0;
}

/* スマホ用（1列レイアウト） */
@media (max-width: 768px) {
  .bogf_23 div {
    width: 98%;
    margin: 0.4em auto;
  }
}

/* サムネイル画像 */
.lightbox-image {
  width: 100%;
  cursor: pointer;
  transition: transform 0.3s ease-in-out;
}

/* ライトボックスの背景 */
.lightbox-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  z-index: 1002;
}

/* 拡大画像 */
.lightbox-content {
  max-width: 900px;
  width: 90%;
  max-height: 90%;
}

/* 閉じるボタン */
.lightbox-close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 30px;
  color: white;
  cursor: pointer;
}

/* ボタンのスタイル */
.lightbox-controls {
  position: absolute;
  bottom: 20px;
  display: flex;
  gap: 15px;
}

.lightbox-btn {
  background-color: rgba(255, 255, 255, 0.8);
  border: none;
  padding: 10px 15px;
  font-size: 18px;
  cursor: pointer;
  border-radius: 5px;
}

.lightbox-btn:hover {
  background-color: rgba(255, 255, 255, 1);
}

.hikaku {
  width: 100%;
  height: auto;
  margin: 1em auto;
}

.hikaku img {
  width: 100%;
  height: auto;
}

.hikaku p {
  text-align: end;
  color: #007bff;
  font-size: 14px;
  margin: 0.5em auto;
  padding: 5px;
}

.hikaku i {
  margin-right: 6px;
  font-size: 17px;
}

.gallery-container {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 1em auto;
}

.gallery-item {
  width: calc(49.6% - 1%);
  /* 2列表示 */
  border-radius: 5px;
  overflow: hidden;
}

.gallery-item img {
  width: 100%;
  height: auto;
  border-radius: 5px;
}

.medium-zoom-image--opened {
  pointer-events: auto !important;
  /* 画像内でスクロールを可能にする */
  overflow-y: auto !important;
  /* 縦スクロールを有効化 */
  max-height: 90vh !important;
  /* 画面の90%の高さまで表示 */
  width: auto !important;
  /* 画像幅を自動調整 */
  -o-object-fit: contain !important;
     object-fit: contain !important;
  /* 画像を画面内に収める */
}

.change_23 {
  text-align: left;
  margin: 0em auto;
  font-size: 16px;
  font-weight: bold;
  line-height: 34px;
}

.change_23 h3 {
  background-color: #ffe820a3;
  color: #424242;
  padding: 0px 7px;
  display: inline-block;
}

.change_23 h4 {
  color: #cd9967;
}

.bana_line_de {
  width: 100%;
  height: auto;
  margin: 1em auto;
}



.rich_text_display p {
  margin: 0 0 1em;
}

.rich_text_display {
  overflow: hidden;
  word-break: break-word;
  line-height: 1.8;
}


.cart_moivie {
  margin: 2em auto 1em auto;
  width: 100%;
}

.cart_mo {
  width: 100%;
  font-size: 16px;
  /* 読みやすいサイズに調整 */
  padding: 15px 6px;
  /* バランスの取れたパディング */
  background: linear-gradient(45deg, #FF7F50, #FF4500);
  /* コーラルオレンジ → 濃いオレンジ */
  border-radius: 25px;
  /* 少し小さい丸み */
  text-align: center;
  color: white;
  border: none;
  font-weight: bold;
  /* 文字を強調 */
  cursor: pointer;
  /* ポインタを表示 */
  filter: drop-shadow(0px 5px 10px rgba(0, 0, 0, 0.15));
  /* 柔らかい影 */
  transition: all 0.3s ease;
  /* アニメーションを追加 */
}

.cta-glow {
  position: relative;
  overflow: hidden;
}

.cta-glow::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%;
  width: 50%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.0) 0%, rgba(255, 255, 255, 0.4) 50%, rgba(255, 255, 255, 0.0) 100%);
  animation: shine 2.5s infinite;
}

@keyframes shine {
  0% {
    left: -75%;
  }

  100% {
    left: 125%;
  }
}

.mov_frex {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
}

.mov_frex i {
  font-size: 20px;
  margin-top: 2px;
}

.cart_mo:hover {
  background: linear-gradient(45deg, #FF6347, #FF4500);
  /* トマト色 → オレンジレッド */
  transform: scale(1.02);
  /* 少し拡大 */
  filter: drop-shadow(0px 8px 15px rgba(0, 0, 0, 0.25));
  /* 影を強調 */
}

.cart_mo1 {
  width: 100%;
  font-size: 1em;
  padding: 1em 1.5em;
  background-color: #4daf8f;
  border-radius: 30px;
  text-align: center;
  color: white;
  border: none;
}

.cart_mo img {
  width: 35px;
  height: auto;
}

.cast_undex {
  text-align: center;
  margin: 1em auto;
  font-weight: bold;
  color: #ff4a08;
  font-size: 14px;
  line-height: 25px;
}

.keisai_movie_fotto {
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  max-width: 330px;
  margin: 0 auto;
  padding: .9em 3em .9em 2em;
  margin-bottom: -1.5em;
  width: 95%;
}

.keisai_movie_fotto::after {
  position: absolute;
  right: 2em;
  transform: translateY(-50%);
  transform-origin: left;
  width: 2em;
  height: .5em;
  background-color: #757575;
  clip-path: polygon(0 100%, 100% 100%, 70% 40%, 70% 90%, 0% 90%);
  content: '';
  transition: transform .3s;
}

.keisai_movie_fotto a {
  color: rgb(56, 56, 56);
}

.keisai_movie_fotto i {
  position: absolute;
  top: 16px;
  right: 25px;
  display: none;
}

.benefi {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.benefi div {
  width: 31%;
  height: auto;
  margin: 1%;
  background: #f3f3f3;
  border: solid 1px #e6e6e6;
  padding: 5px;
  text-align: center;
  border-radius: 50px;
}

.benefi p {
  font-size: 16px;
  margin: 0;
  letter-spacing: 0px;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
}


@media (max-width: 900px) {
  .benefi p {
    font-size: 12px !important;
  }

  .benefi div {
    padding: 8px 0;
  }
}

#reviews {
  padding: 3em 1em;
  background-color: #f9f9f9;
}

.recommend-container h3 {
  text-align: center;
  color: #333;
}

.recommend-container h3 span {
  display: block;
  font-size: 0.9em;
  color: #888;
  margin-bottom: 0.3em;
}

.pop_movie_voice_main {
  display: flex;
  flex-wrap: wrap;
  gap: 2em;
  justify-content: center;
}

.pop_movie_voice_in_fre {
  background: #fff;
  border-radius: 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  max-width: 800px;
  width: 100%;
  flex-direction: row;
  flex-wrap: wrap;
}


.img_pop img {
  width: 100%;
  height: auto;
  display: block;
  -o-object-fit: cover;
     object-fit: cover;
}

.moji_pop {
  padding: 1em;
  flex: 1;
}

.moji_pop h3 {
  margin-top: 0;
  font-size: 1.2em;
  color: #444;
}

.moji_pop h4 {
  margin: 0.5em 0;
  font-size: 0.95em;
  color: #666;
  line-height: 25px;
}

.moji_pop h4 a {
  color: #007BFF;
  text-decoration: none;
}

.moji_pop h4 a:hover {
  text-decoration: underline;
}

.moji_pop p {
  margin-top: 0.8em;
  font-size: 0.95em;
  color: #333;
  line-height: 1.6;
}

/* モバイル対応 */
@media (max-width: 768px) {
  .pop_movie_voice_in_fre {
    flex-direction: column;
    align-items: center;
  }

  .img_pop {
    max-width: 100%;
    width: 100%;
  }

  .moji_pop {
    padding: 1em;
  }

  .moji_pop h4 {
    font-size: 0.9em;
  }
}


/* 全体のレイアウト */
.wrapper {
  display: flex;
  align-items: flex-start;
  /* 上揃え */
  justify-content: space-between;
  gap: 20px;
  max-width: 1500px;
  /* 画面幅を適切に制限 */
  margin: 0 auto;
  padding-top: 20px;
  /* ちょっと余白 */
}

/* 左側の固定エリア（YouTube動画） */
.left_fixed {
  width: 50%;
  /* 幅を固定値に */
  max-width: 700px;
  /* 最大幅を制限 */
  padding: 10px;
  position: relative;
  /* 初期は通常の位置 */
}

/* 右側のスクロールエリア（価格やレビュー） */
.right_content {
  flex: 1;
  max-width: 50%;
  /* 左側に合わせて調整 */
  background: #fff;
  padding: 20px;
  margin-left: auto;
  padding-top: 40px;
  /* 少し余白 */
}

.fre_sda {
  width: 100%;
  height: auto;
  max-width: 1000px;
  margin-bottom: 0.5em;
  position: relative;
}

.fre_sda img {
  width: 100%;
  height: auto;
}

.iframe-wrapper {
  margin: 1em auto;
}

.fre_sda p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
  /* 必要に応じて余白をリセット */
  text-align: center;
  /* テキストを中央揃え */
  color: #fff;
  /* 必要に応じてテキストカラーを設定 */
}

.fre_sda p i {
  font-size: 50px;
  margin-bottom: 4px;
}

.iframe-container {
  margin-top: 3em;
}

.fre_movie_wasou_yousou {
  display: flex;
  gap: 13px;
  margin: 0.5em auto;
}

.fre_movie_wasou_yousou h5 {
  flex: 0 0 auto;
  padding: 10px 20px;
  border-radius: 999px;
  background: #fff;
  color: #333;
  font-size: 14px;
  text-decoration: none;
  font-weight: 500;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  transition: all 0.25s ease;
  position: relative;
  z-index: 0;
  overflow: hidden;
}

.fre_movie_wasou_yousou h5 i {
  margin-right: 6px;
  font-size: 15px;
}

.video-preview {
  display: flex;
  align-items: center;
  background: #f3f3f3;
  border: solid 1px #e6e6e6;
  border-radius: 8px;
  padding: 12px;
  gap: 16px;
  max-width: 420px;
  cursor: pointer;
  margin: 0.5em auto;
  position: relative;
}

.video-preview__thumbnail {
  position: relative;
  width: 128px;
  height: 72px;
  border-radius: 4px;
  overflow: hidden;
  flex-shrink: 0;
}

.video-preview__thumbnail img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}

.video-preview__play-icon {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0, 0, 0, 0.6);
  color: #fff;
  font-size: 22px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.video-preview__meta {
  flex: 1;
}

.video-preview__title {
  font-weight: 600;
  font-size: 14px;
  margin: 0 0 4px;
  color: #222;
  line-height: 22px;
  text-align: left;
}

.video-preview__details {
  font-size: 12px;
  color: #666;
  margin: 0;
  position: absolute;
  bottom: 5px;
  right: 5px;
}

.video-modal {
  display: none;
  position: fixed;
  z-index: 1000;
  inset: 0;
  align-items: center;
  justify-content: center;
}

.video-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
}

.video-modal__content {
  position: relative;
  border-radius: 10px;
  max-width: 95%;
  width: 800px;
}

.video-modal__content video {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

.video-modal__close {
  position: absolute;
  top: -46px;
  right: -7px;
  background: transparent;
  border: none;
  font-size: 47px;
  color: #ffffff;
  cursor: pointer;
}

.swiper-pagination-bullet {
  background-color: #2cb3a7a1 !important;
  opacity: 1 !important;
  width: 10px;
  height: 10px;
  margin: 0 4px;
  border-radius: 50%;
  transition: all 0.3s;
}

.swiper-pagination-bullet-active {
  background-color: #1cb4a7 !important;
  /* アクティブは指定色 */
  transform: scale(1.2);
  /* ほんの少し大きく */
}

.event_movie_page {
  width: 100%;
  height: auto;
}

.event_movie_page img {
  width: 100%;
  height: auto;
}

/* スマホ用（1列レイアウト） */
@media (max-width: 768px) {
  .wrapper {
    flex-direction: column;
    padding-top: 0;
    gap: 0px;
  }

  .left_fixed {
    width: 100%;
    position: static;
    text-align: center;
    max-width: 900px;
    padding: 5px;
  }

  .right_content {
    width: 100%;
    margin-left: 0;
    max-width: 900px;
    padding: 5px;
  }

  .left_fixed iframe {
    max-width: 100%;
    height: auto;
    aspect-ratio: 16 / 9;
  }

  .po_section {
    display: none;
  }

  .sp_segc {
    display: block;
  }
}

.ranking_cra_23 p span svg {
  width: 34px;
  height: auto;
}

.movie-popup {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  /* 背景を暗く */
  z-index: 1000;
  justify-content: center;
  align-items: center;
}

/* ポップアップの中身 */
.movie-popup-content {
  background-color: white;
  padding: 20px;
  border-radius: 10px;
  width: 95%;
  max-height: 70%;
  height: auto;
  max-width: 500px;
  overflow: auto;
  position: relative;
  line-height: 27px;
}

.movie-close-popup {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 30px;
  cursor: pointer;
}

button.show-popup-btn {
  border: none;
  background: #f5f5f5;
  font-size: 14px;
  color: #4c4c4c;
  margin: 0.5em auto;
}

.pop_tti {
  text-align: center;
  color: #369189;
  margin: 1.5em auto 0 auto;
  width: 100%;
  height: auto;
  padding: 0.5em;
  font-weight: bold;
}

.fastplan-table {
  width: 100%;
  border-collapse: collapse;
  margin: 2.5rem 0;
  font-size: .95rem;
  overflow: hidden;
  border-radius: 15px;
}

.fastplan-table thead {
  background: #0dada0;
  color: white;
}

.fastplan-table th,
.fastplan-table td {
  padding: 2rem 3px;
  text-align: center;
}

.fastplan-table tbody tr:nth-child(even) {
  background: #f2f2f2;
}

.slider_main_movie {
  width: 100%;
  max-width: 1000px;
  margin: 1em auto;
  display: flex;
  height: auto;
  flex-wrap: wrap;
}

.slider_main_movie>div {
  width: 23%;
  height: auto;
  margin: 1%;
}


.movie_image_pop {
  text-align: center;
  margin: 1em auto;
  max-width: 1000px;
  height: auto;
  width: 100%;
  position: relative;
}

.movie_image_pop img {
  width: 100%;
  height: auto;
  filter: brightness(65%);
  /* 明るさを70%に設定して暗くする */
}

.movie_image_pop p {
  position: absolute;
  top: 50%;
  /* 親要素の中央に縦位置 */
  left: 50%;
  /* 親要素の中央に横位置 */
  transform: translate(-50%, -50%);
  /* 中央揃えのために要素の幅と高さを補正 */
  color: white;
  font-size: 50px;
  line-height: 7px;
  font-family: serif;
}

.movie_image_pop p span {
  font-size: 15px;
}

@media screen and (max-width: 750px) {
  .movie_image_pop p {
    font-size: 36px;
    line-height: 7px;
  }

  .movie_image_pop p span {
    font-size: 13px;
  }

  .slider_main_movie>div {
    width: 48%;
    height: auto;
    margin: 1%;
  }

}

.movie_play_modal_content {
  padding: 10px;
  border-radius: 5px;
  width: 100%;
  max-width: 1000px;
  text-align: center;
  z-index: 1000;
  position: absolute;
  /* または `fixed` に変更可能 */
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* 必要に応じて追加 */
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* 閉じるボタン */
.close_movie {
  color: #ffffff;
  font-size: 38px;
  font-weight: bold;
  cursor: pointer;
  position: absolute;
  top: 10px;
  right: 10px;
}

.close_movie:hover,
.close_movie:focus {
  color: black;
  text-decoration: none;
  cursor: pointer;
}

/* モーダルを開いたときのアニメーション */
.movie_play_modal {
  animation: fadeIn 0.3s;
}

.slider_main_movie p i {
  color: white;
  font-size: 30px;
}

.slider_main_movie p span {
  color: white;
  font-size: 14px
}

@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

/* ムービーページ内　CSS */
.movie_play_modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  justify-content: center;
  align-items: center;
  display: none;
  z-index: 1000;
}

.movie_play_modal_content iframe {
  width: 90vw;
  height: 50vh;
  max-width: 1000px;
  border: none;
}


.movie_play_modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.8);
  display: none;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  padding: 20px;
  box-sizing: border-box;
  overflow: auto;
}

.movie_play_modal_content {
  width: 100%;
  max-width: 960px;
  background: transparent;
}



.tab-list {
  list-style-type: none;
  display: flex;
  flex-flow: row wrap;
  justify-content: space-btween;
  max-width: 1000px;
  margin: 0 auto;
}

.tab-list__item {
  text-align: center;
  flex: 0 0 33.33333%;
  background-color: #eee;
  padding: 10px 0;
  cursor: pointer;
  margin-bottom: -15px;
  z-index: 10;
}

.tab-list__item.active {
  background-color: #9bb9ca;
  color: white;
}

.tab-contents__item {
  display: none;
}

.tab-contents__item.show {
  display: block;
  animation: fadeIn 0.5s ease;
}

.play_mo {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: white;
  line-height: 35px;
}

.play_mo i {
  font-size: 45px;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  /* ドロップシャドウ */
}

.play_mo p {
  font-size: 30px;
  font-weight: bold;
  text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
  /* ドロップシャドウ */
}

.tab-contents {
  margin-top: -17px;
}


.sitei {
  text-align: center;
  font-size: 13px;
  color: #2a6293;
}

p.modol_movie_syouhin {
  margin: 0 auto;
  padding: 15px 20px;
  border-radius: 999px;
  background: #fff;
  color: #333;
  font-size: 14px;
  text-decoration: none;
  font-weight: 500;
  border: 1px solid #ddd;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.06);
  transition: all 0.25s ease;
  position: relative;
  z-index: 0;
  overflow: hidden;
  max-width: 400px;
}

p.modol_movie_syouhin i {
  position: absolute;
  top: 16px;
  right: 26px;
  color: #333;
  font-size: 15px;
}

.movie_ranking_moji {
  text-align: center;
  font-size: 1rem;
  margin: 1.5em 0 0.5em;
}

.movie_ranking_moji a {
  color: #007BFF;
}

.wish-offer {
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  padding: 20px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.03);
  margin: 1em auto;
}

.highlight {
  border-bottom: 2px solid #41f7e8;
  font-weight: 500;
  color: #1a1a1a;
}

.wish_icon_page_movie {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  padding: 20px 0;
}

.wish_icon_page_movie div {
  width: 30%;
  background: #f9f9f9;
  border-radius: 12px;
  text-align: center;
  padding: 15px 10px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease;
}

.wish_icon_page_movie div:hover {
  transform: translateY(-4px);
}

.wish_icon_page_movie img {
  width: 48px;
  height: auto;
  margin-bottom: 8px;
}

.wish_icon_page_movie p {
  color: #333;
  font-size: 14px;
  line-height: 1.5;
  font-weight: 500;
}

.wish_icon_page_movie p span {
  font-size: 11px;
  color: #888;
}

.wish_plan_notes {
  margin: 0 0 0.5em;
  font-size: 12px;
  color: #555;
  line-height: 1.6;
  text-align: end;
}

.m100 {
  width: 95%;
  height: auto;
  margin: 1em auto;
}

.m100 img {
  width: 100%;
  height: auto;
  border-radius: 8px;
}

/* モバイル最適化 */
@media screen and (max-width: 1100px) {
  .wish_icon_page_movie {
    justify-content: flex-start;
    gap: 16px;
  }

  .wish_icon_page_movie div {
    width: 47%;
    padding: 12px 8px;
  }

  .wish_icon_page_movie img {
    width: 40px;
  }

  .wish_icon_page_movie p {
    font-size: 13px;
  }

  .wish_icon_page_movie p span {
    font-size: 9px;
  }
}

.wish-offer-note {
  font-size: 12.5px;
  color: #777;
  margin-top: 12px;
}

.wish-offer-note .price {
  color: #e53935;
  font-weight: bold;
}

.blur_sanple {
  text-align: center;
  margin: 1em auto;
  font-size: 11px;
  line-height: 1.8em;
  color: #333;
}

.blur_sanple i {
  margin-left: 3px;
}

.blur_sanple a {
  color: blue;
  line-height: 3em;
  ;
  font-size: 13px;
}


/* ムービー再生CSS（画像タッチ再生・PIP） */
.movie_play_ja {
  width: 100%;
  height: auto;
  position: relative;
}

.video-container {
  width: 100%;
  height: auto;
  margin: 0 auto;
}

.video-container img {
  width: 100%;
  height: auto;
}

.movie_play_ja img {
  width: 100%;
  height: auto;
}

.play-icon-center {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(46, 46, 46, 0.69);
  color: #fff;
  font-size: 28px;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 12px rgba(0, 0, 0, 0.25);
  border: solid 3px white;
  box-sizing: border-box;
  cursor: pointer;
}

.play-icon-center i {
  font-size: 26px;
  transform: translateX(2px);
}

.movie_url {
  width: 100%;
  max-width: 1000px;
  margin: 2em auto;
  aspect-ratio: 16 / 9;
  position: relative;
  padding-bottom: 56.25%;
  height: 0;
  aspect-ratio: 16 / 9;
}

.movie_urls {
  width: 100%;
  max-width: 1000px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  position: relative;
  height: auto;
}

.movie_url iframe,
.movie_urls iframe {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  top: 0;
  border: none;
}


.pip-wrapper {
  position: relative;
  width: 100%;
}

.pip-mode {
  position: fixed !important;
  bottom: 95px;
  right: 15px;
  width: 250px;
  z-index: 9999;
  overflow: hidden;
  padding-bottom: 0;
}

.pip-wrapper iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
}

.pip-close {
  position: absolute;
  top: 6px;
  right: 2px;
  background: rgb(255 255 255 / 55%);
  color: #000;
  border: 1px solid #ccc;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 24px;
  line-height: 30px;
  text-align: center;
  cursor: pointer;
  display: none;
  z-index: 10000;
}


.line_frexde {
  display: flex;
  gap: 10px;
  align-items: center;
}

.line_frexde a img {
  width: 25px;
  height: auto;
  margin-top: -6px;
}

.carenda {
  width: 95%;
  height: auto;
  margin: 1em auto;
  text-align: center;
}

.carenda img {
  width: 100%;
  height: auto;
}

.carenda p {
  text-align: justify;
  font-size: 15px;
  color: #1b1b1b;
  line-height: 22px;
}

.calendar-buttons {
  margin: 13px 0 23px 0;
  text-align: center;
}

.calendar-tab-button {
  background: #eee;
  border: none;
  padding: 8px 16px;
  margin: 0 5px;
  border-radius: 6px;
  cursor: pointer;
  font-size: 14px;
}

.calendar-tab-button.active {
  background-color: #2db397;
  color: white;
}

.calendar-images img {
  max-width: 100%;
  height: auto;
  margin-top: 10px;
}


/* ===== フッター固定カートバー（スマホ用） ===== */
.fixed-cart-bar {
  position: fixed;
  bottom: 27px;
  left: 50%;
  transform: translateX(-50%);
  max-width: 420px;
  z-index: 9999;
  opacity: 0;
  width: 94%;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.fixed-cart-bar.show {
  opacity: 1;
  pointer-events: auto;
}

.fixed-cart-inner {
  display: flex;
  align-items: center;
  border-radius: 9999px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* 商品情報エリア */
.cart-info {
  flex-grow: 1;
  flex-basis: 65%;
  padding: 12px 16px;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}

.cart-title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.cart-price {
  font-size: 13px;
  color: #888;
  margin-top: 4px;
  white-space: nowrap;
}

.cart-price span {
  font-size: 10px;
}

/* カートボタン */
.cart-button {
  flex-shrink: 0;
  background: linear-gradient(45deg, #FF7F50, #FF4500);
  color: #fff;
  font-size: 15px;
  font-weight: bold;
  padding: 16px 20px;
  border: none;
  border-radius: 0 9999px 9999px 0;
  white-space: nowrap;
  height: 100%;
}

.cart-button i {
  margin-right: 6px;
}

/* PCでは非表示 */
@media screen and (min-width: 768px) {
  .fixed-cart-bar {
    display: none !important;
  }
}


.reason-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 24px;
  padding: 40px 16px;
}

.reason-card {
  background: #fff;
  border-radius: 20px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
  padding: 24px 20px;
  transition: all 0.3s ease;
  position: relative;
}

.reason-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(0, 0, 0, 0.12);
}

.reason-card h3 {
  font-size: 17px;
  font-weight: 700;
  color: #00796b;
  padding-left: 28px;
  margin-bottom: 12px;
  position: relative;
}

.reason-card h3::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  background-image: url('data:image/svg+xml;utf8,<svg fill="%2300b894" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg"><path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/></svg>');
  background-size: contain;
  background-repeat: no-repeat;
}

.reason-card p {
  font-size: 14.5px;
  color: #444;
  line-height: 1.6;
}

.section_title {
  font-family: 'Noto Sans JP', sans-serif;
  text-align: center;
  margin: 100px 0 60px;
}

.title_line {
  width: 1px;
  height: 40px;
  background-color: #aaa;
  margin: 0 auto 12px;
}

.title_en {
  font-family: 'Playfair Display', serif;
  font-size: 27px;
  font-weight: 700;
  letter-spacing: 0.1em;
  margin-bottom: 8px;
  color: #111;
}

.title_jp {
  font-size: 0.95rem;
  color: #666;
  margin-bottom: 4px;
}

@media (max-width: 768px) {
  .section_title {
    margin: 60px 0 40px;
  }

  .title_line {
    height: 30px;
  }
}

.campain_image_url_movie {
  width: 100%;
  max-width: 600px;
  /* 任意で追加 */
  margin: 1em auto;
  overflow: hidden;
  line-height: 22px;
  /* はみ出し防止 */
}

.campain_image_url_movie img {
  width: 100%;
  height: auto;
  display: block;
  border-radius: 15px;
}

.campain_image_url_movie p {
  font-size: 11px;
  text-align: center;
  margin-top: 1em;
  color: #108f84;
}

.campain_image_url_movie strong {
  color: red;
  font-size: 17px;
}



/* ── 親セクション ── */
.itudekiru_noka {
  background: #f9fcff;
  padding: 35px 20px;
  border-radius: 16px;
  max-width: 900px;
  margin: 0 auto;
  font-family: "Noto Sans JP", sans-serif;
  color: #333;
}

/* 見出し */
.itudekiru_noka>p {
  text-align: center;
  font-size: 1.25rem;
  font-weight: 600;
  margin-bottom: 32px;
  color: #005e8a;
}

/* ── タイムラインコンテナ ── */
.itudekiru_noka_fre {
  position: relative;
  display: flex;
  justify-content: space-between;
  gap: 24px;
}

/* 背景ライン */
.itudekiru_noka_fre::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 8%;
  right: 8%;
  height: 2px;
  background: #c4e3f8;
  transform: translateY(-50%);
  z-index: 1;
}

/* ── カードスタイル ── */
.itudekiru_noka_fre>div {
  position: relative;
  background: #ffffff;
  flex: 1 1 0;
  padding: 24px;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
  text-align: center;
  z-index: 2;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.itudekiru_noka_fre>div:hover {
  transform: translateY(-6px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}


/* ── 日付・説明 ── */
.itudekiru_noka_fre h4 {
  font-size: 1.375rem;
  font-weight: 700;
  margin-bottom: 8px;
  color: #005e8a;
}

.itudekiru_noka_fre h5 {
  font-size: 1rem;
  font-weight: 500;
  margin: 0;
  color: #555;
}

/* ── レスポンシブ対応 ── */
@media (max-width: 768px) {
  .itudekiru_noka_fre {
    flex-direction: column;
    align-items: center;
    gap: 10;
  }

  .itudekiru_noka_fre::before {
    display: none;
  }

  .itudekiru_noka_fre>div {
    width: 100%;
    max-width: 400px;
  }

  .itudekiru_noka_fre>div::after {
    top: -8px;
  }
}
#wishChatToggle {
  position: fixed;
  bottom: 24px;
  right: 8px;
  border: none;
  width: 60px;
  height: 60px;
  font-size: 26px;
  cursor: pointer;
  z-index: 9999;
  transition: transform 0.3s ease;
  background: none;
}

#wishChatToggle img {
  width: 100%;
  height: auto;
}

#wishChatToggle:hover {
  transform: scale(1.1);
}

#wishChatBox {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: calc(var(--vh, 1vh) * 100);
  background: #1f1f1f;
  color: #fff;
  font-family: sans-serif;
  z-index: 10000;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.4s ease, opacity 0.4s ease;
  opacity: 0;
  pointer-events: none;
}

#wishChatBox.visible {
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.wishChatHeader {
  display: flex;
  align-items: center;
  padding: 10px;
  background: #333;
}

.wishChatTitle {
  flex: 1;
  font-weight: bold;
}

.wishChatClose {
  background: transparent;
  border: none;
  color: #fff;
  font-size: 30px;
  cursor: pointer;
  transition: color 0.3s;
}

.wishChatClose:hover {
  color: #00c2cb;
}

.wishChatMessages {
  flex: 1;
  padding: 12px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.wishChatMessageBot {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.wishChatUserMessage {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  max-width: 556px;
  justify-content: flex-end;
  margin: 0 0 0 auto;
}

.wishChatBotMessage {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

img.wishChatUserIcon {
  width: 38px;
  height: auto;
  border-radius: 50px;
}

.wishChatBotIcon {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

.wishChatBotText {
  background: #3a3a3a;
  padding: 10px 14px;
  border-radius: 12px;
  color: #ffffff;
  line-height: 1.6;
  font-size: 14px;
}

.wishChatUserText {
  align-self: flex-end;
  color: #fff;
  padding: 10px 14px;
  border-radius: 12px;
  width: 90%;
  line-height: 1.6;
  white-space: pre-wrap;
  font-size: 14px;
  background: #ffffff;
  color: black;
}

.wishChatInputArea {
  display: flex;
  border-top: 1px solid #444;
  padding: 10px;
  background: #1f1f1f;
}

#wishChatInput {
  flex: 1;
  padding: 10px;
  border: none;
  outline: none;
  background: #2a2a2a;
  color: #fff;
  resize: none;
  font-family: inherit;
  font-size: 16px;
  /* 14px → 16px */
  line-height: 1.6;
  border-radius: 6px;
  max-height: 120px;
  overflow-y: auto;
}

.wishChatInputArea button {
  background: #1cb4a7;
  border: none;
  padding: 0 16px;
  color: #fff;
  cursor: pointer;
  transition: background 0.3s;
  margin-left: 8px;
  border-radius: 6px;
  height: 40px;
  align-self: flex-end;
  flex-shrink: 0;
}

.wishChatInputArea button:hover {
  background: #00a5ad;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

#wishChatPopup {
  display: none !important;
  position: fixed;
  bottom: 57px;
  right: 8px;
  width: 25px;
  height: 25px;
  background: red;
  color: white;
  font-size: 14px;
  font-weight: bold;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 10000;
  cursor: pointer;
}
#wishChatPopup.show {
  display: flex !important;
}
.wishChatBotText a,
.wishChatUserText a {
  color: #c3d3ff;
}

.chat_onlin {
  font-size: 14px;
}

.chat_line_de {
  font-size: 12px;
  color: white;
  line-height: 35px;
}

.chat_line_de a {
  color: #00a5ad;
  font-size: 14px;
}

#wishQuickReplies {
  display: flex;
  gap: 8px;
  padding: 12px;
  overflow-x: auto;
  white-space: nowrap;
  background-color: #2c2c2c;
  border-bottom: 1px solid #444;
  scrollbar-width: none;
  /* Firefox */
}

#wishQuickReplies::-webkit-scrollbar {
  display: none;
  /* Chrome, Safari */
}

#wishQuickReplies button {
  background: #444;
  color: #fff;
  border: none;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: 13px;
  white-space: nowrap;
  flex-shrink: 0;
  cursor: pointer;
  transition: background 0.2s ease;
}

#wishQuickReplies button:hover {
  background: #5c5c5c;
}