/* 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;
  }
}


/* =========================================================
   WISH – Movie Blocks  (save as: public/css/movie.css)
   シック × エッジィ を意識した “カッコイイ” テーマ
   ---------------------------------------------------------
   色味はモノトーンをベースに、ブランドのアクセント
   カラー #ff3b30（朱赤）を差し色に使用。
   フォントは Noto Sans / Noto Serif JP を想定。
   =======================================================*/

/* ------------- 基本リセット & 変数 --------------------- */
:root {
  --accent: #1cb4a7;
  --accent-dark: #0f9384;
  --blue: #2e79a5;
  --bg-light: #f7f9fa;
  --white: #ffffff;
  --radius: 1rem;
  --shadow: 0 6px 18px rgba(0, 0, 0, .08);
  --max-w: 1100px;
  --radius-lg: 1.2rem;
  --radius-md: .8rem;
  --shadow-lg: 0 14px 28px rgba(0, 0, 0, .18),
    0 10px 10px rgba(0, 0, 0, .12);
  --shadow-sm: 0 2px 8px rgba(0, 0, 0, .12);
  color: #333;
  line-height: 1.7;
}

.movie_title {
  font-size: 1.1em;
  line-height: 1.4em;
  text-align: center;
  margin: 1em auto;
}

.movie_title p span {
  color: #bdbdbd;
  font-size: 15px;
}

/* ------------- 汎用ユーティリティ ---------------------- */
.uix-movie-section {
  margin-bottom: 4rem;
}

.uix-movie-title {
  font-size: 20px;
  letter-spacing: .05em;
  margin: .5rem 0 1rem;
  position: relative;
}

.uix-movie-title::after {
  content: '';
  display: block;
  width: 60px;
  height: 3px;
  background: var(--accent);
  margin-top: .5rem;
}

.uix-movie-price {
  font-size: 1.1rem;
  color: var(--gray-700);
  margin: 0 0 1.5rem;
  line-height: 25px;
}


.uix-movie-price .uix-movie-note {
  font-size: .8rem;
  color: var(--gray-500);
}

.uix-movie-cta {
  display: inline-block;
  padding: .75rem 1.8rem;
  background: var(--accent);
  color: var(--white);
  font-weight: 700;
  border-radius: var(--radius-md);
  text-decoration: none;
  transition: transform .25s ease, box-shadow .25s ease;
}

.uix-movie-cta:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-sm);
}

.uix-movie-thumbnails {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
}

.uix-thumb {
  flex: 1;
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.uix-thumb img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform .5s cubic-bezier(.2, .8, .2, 1);
}

.uix-thumb:hover img {
  transform: scale(1.06);
}

/* ------------- 背景ブラーセクション -------------------- */
.movie_bacground_blur,
.movie_bacground_blure {
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  background: rgba(255, 255, 255, .5);
}

.movie_main {
  width: min(1100px, 95%);
  margin-inline: auto;
}

/* ------------- ファーストプランテーブル --------------- */
.fastplan-table {
  width: 100%;
  border-collapse: collapse;
  margin: 2.5rem 0;
  font-size: .95rem;
  overflow: hidden;
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.fastplan-table thead {
  background: var(--accent);
  color: var(--white);
}

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

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

/* ------- 4列プラン用テーブル ------- */
.plan-grid {
  display: flex;
  gap: 24px;
  justify-content: center;
  padding: 2rem 1rem;
  flex-wrap: wrap;
}

.plan-card {
  flex: 1 1 300px;
  border: 2px solid #ccc;
  border-radius: 10px;
  background: #fff;
  box-shadow: 0 2px 8px rgba(0,0,0,0.05);
  padding: 1.5rem;
  text-align: center;
  position: relative;
  transition: 0.3s ease;
}

.plan-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 16px rgba(0,0,0,0.1);
}

.plan-title {
  font-size: 1.3rem;
  font-weight: bold;
  color: #009688;
  margin-bottom: 1rem;
}

.plan-price {
  font-size: 25px;
  font-weight: bold;
  color: #222;
  margin-bottom: 1.2rem;
}

.plan-points {
  list-style: none;
  padding: 0;
  margin: 0;
  text-align: left;
  font-size: 0.95rem;
  color: #444;
}

.plan-points li {
  margin: 0.5rem 0;
  border-top: 1px solid #eee;
  padding-top: 0.5rem;
}

.plan-card.popular {
  border-color: #00b894;
  background: #f0fcf8;
}

.plan-card.premium {
  border-color: #ffcc00;
  background: #fffdf0;
}

.ribbon {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background-color: #00b894;
  color: #fff;
  padding: 7px 20px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 12px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
}

/* ------------- オプションリスト ------------------------ */
.uix-option-wrapper {
  display: grid;
  gap: 1.2rem;
  margin-top: 2.5rem;
}

.uix-option-category {
  font-weight: 700;
  color: var(--accent);
  margin: .8rem 0 .3rem;
  font-size: 1.05rem;
}

.uix-option-item {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  padding: 1rem 1.4rem;
  background: var(--white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
}

.uix-option-label {
  font-weight: 500;
}

.uix-option-price {
  font-weight: 700;
  color: var(--black);
}

.uix-option-desc {
  width: 100%;
  font-size: .85rem;
  color: var(--gray-700);
  margin-top: .5rem;
  line-height: 20px;
}

.uix-option-link {
  color: var(--accent);
  text-decoration: none;
}

.uix-option-link:hover {
  text-decoration: underline;
}

/* ------------- 支払い・配送セクション ------------------ */
.movie_title {
  text-align: center;
  margin: 4.5rem 0 2.5rem;
}

.movie_title p {
  font-weight: 700;
  font-size: clamp(1.4rem, 1.5vw+1rem, 2rem);
  line-height: 25px;
  margin: 0;
}

.movie_title span {
  font-size: clamp(2.5rem, 2.5vw+1.2rem, 3.5rem);
  color: var(--accent);
  line-height: 1;
}

.syou_main {
  margin-bottom: 2.5rem;
  padding: 2rem;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.syou_title p {
  margin: 0;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--black);
}

.syou_messe {
  font-size: .95rem;
  color: var(--gray-700);
  margin-top: 1rem;
  line-height: 26px;
}

hr {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, .08);
  margin: 1rem 0 1.2rem;
}

/* ------------- レスポンシブ ----------------------------- */
@media (max-width:768px) {
  .uix-movie-thumbnails {
    gap: .6rem;
  }

  .uix-option-item {
    flex-direction: column;
    align-items: flex-start;
    gap: .3rem;
  }

  .uix-option-price {
    align-self: flex-end;
  }
}

/* ------------- ふわっと出現アニメ（任意） --------------- */
@keyframes slideFadeIn {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

.uix-movie-section,
.fastplan-table,
.uix-option-wrapper,
.syou_main {
  opacity: 0;
  animation: slideFadeIn .8s ease forwards;
}

/* ---------- 1) カード全体 ---------------------------------- */
.element {
  margin-bottom: 3rem;
  animation: fadeVoice .8s ease forwards;
  opacity: 0;
}

.movie_voice_main {
  gap: 1.4rem;
  background: #fff;
  padding: 0 0 1.6rem 0;
  box-shadow: 0 4px 15px rgba(0, 0, 0, .08);
  align-items: flex-start;
  border-radius: 15px 15px 0 0;
}

/* ---------- 2) アイコン画像 -------------------------------- */
.movie_voice1 img {
  width: 100%;
  border-radius: 15px 15px 0 0;
  height: auto;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}

/* ---------- 3) テキスト側 --------------------------------- */
.movie_voice2 {
  flex: 1;
  padding: 1em;
}

/* 名前＋日付 */
.movie_voice2 h3 {
  font-size: 1.05rem;
  color: #484848;
  margin: 0 0 .6rem;
  font-weight: 700;
}

/* リンク (返信を見る) */
.movie_voice2 h5 {
  font-size: 14px;
  line-height: 22px;
  color: var(--accent);
  margin: 0 0 .8rem;
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.movie_voice2 h5 i {
  transition: transform .25s;
}

.movie_voice2 h5:hover i {
  transform: translateX(3px);
}

/* 購入ムービー名 */
.movie_voice2 h4 {
  color: var(--text-main);
  line-height: 1.5;
  margin-bottom: .6rem;
  font-size: 13px;
  line-height: 22px;
}

.movie_voice2 h4 a {
  color: var(--accent);
  text-decoration: none;
}

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

/* 仕切り線 */
.movie_voice_sen {
  border: none;
  border-top: 1px solid rgba(0, 0, 0, .08);
  margin: .8rem 0 1rem;
}

/* コメント本文 */
.movie_voice2 p {
  font-size: .95rem;
  color: var(--text-sub);
  line-height: 1.7;
  white-space: pre-line;
  /* nl2br の改行を保持 */
}

/* ---------- 4) レスポンシブ ------------------------------- */
@media(max-width:760px) {
  .movie_voice_main {
    flex-direction: column;
    align-items: center;
    text-align: left;
  }

  .movie_voice2 {
    width: 100%;
  }
}

/* ---------- 5) ふわっとフェード --------------------------- */
@keyframes fadeVoice {
  0% {
    opacity: 0;
    transform: translateY(40px);
  }

  100% {
    opacity: 1;
    transform: translateY(0);
  }
}

/* この .sfdsafda の中の .pagination にだけ適用 */
.scrollable-pagination {
  overflow-x: auto;
  overflow-y: visible;
  /* ← 重要：上の切れ防止 */
  padding: 10px 0;
  /* 上下に余白追加 */
  -webkit-overflow-scrolling: touch;
}

.scrollable-pagination ul.pagination {
  display: inline-flex;
  gap: 6px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.scrollable-pagination .page-link {
  display: inline-block;
  padding: 8px 12px;
  /* 十分な上下padding */
  font-weight: 600;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: #fff;
  color: var(--accent);
  text-decoration: none;
  transition: 0.2s ease-in-out;
  line-height: 1.2;
  /* 高さの安定化 */
}

.scrollable-pagination .page-item.active .page-link {
  background: var(--accent);
  color: #fff;
}

.scrollable-pagination .page-item.disabled .page-link {
  color: #ccc;
}

@media (min-width: 768px) {
  .scrollable-pagination {
    justify-content: center;
    display: flex;
    overflow-x: visible;
  }
}

.count {
  text-align: end;
  color: #585858;
  font-size: 14px;
  margin-bottom: 1em;
}

.flow_main_bac {
  background-color: #e4f6f4;
  width: 100%;
  height: auto;
}
.m60fg{
  width: 100%;
  height: auto;
  margin: 0 auto;
  padding: 1em auto;
  background-color: #7cc2b3;
  text-align: center;
}
.m60fg img{
  width: 100%;
  height: auto;
  max-width: 500px;
  text-align: center;
}

/* ---------- 1) HERO ------------------------------------ */
.wedding_movie_bg {
  position: relative;
  height: 45vw;
  /* モバイルに合わせた比率 */
  max-height: 480px;
  background-size: cover;
  background-position: top;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

.wedding_movie_bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .15) 0%, rgba(0, 0, 0, .45) 100%);
}

.othe_tit {
  position: relative;
  z-index: 2;
  color: #2f2f2f;
  padding: 1em;
  background: #ffffffc7;
  border-radius: 12px;
  top: 86px;
}

.othe_tit h2 {
  font-size: clamp(1.8rem, 2.5vw + 1rem, 3rem);
  margin-bottom: .6rem;
}

.othe_tit h2 span {
  color: var(--accent);
}

.othe_tit h2 span2 {
  font-size: .8em;
}

.othe_tit p {
  font-size: clamp(.9rem, 1vw + .6rem, 1.1rem);
  line-height: 1.6;
}

/* ---------- 2) セクション共通 --------------------------- */
.bg_fr,
.bac_set {
  background: #f5fffe;
  padding: 3rem 0;
}

.movie_main {
  width: min(var(--max-w), 94%);
  margin-inline: auto;
}

.camp_box_tit p {
  font-size: 1.4rem;
  font-weight: 700;
  border-left: 6px solid var(--accent);
  padding-left: .6rem;
  margin: 2.8rem 0 1.6rem;
  line-height: 28px;
}

.camp_bana img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* ---------- 3) CTAリンク ------------------------------- */
/* =========================================================
   WISH – Campaign Page Styles
   ---------------------------------------------------------
   メインカラー   : #1cb4a7   ( --accent )
   サブカラー     : #2e79a5   ( --blue )
   フォント       : Noto Sans JP / Noto Serif JP
   =======================================================*/

/* ---------- 0) 変数／リセット --------------------------- */
:root {
  --accent: #1cb4a7;
  --accent-dark: #0f9384;
  --blue: #2e79a5;
  --bg-light: #f7f9fa;
  --white: #fff;
  --radius: 1rem;
  --shadow: 0 6px 18px rgba(0, 0, 0, .08);
  --max-w: 1100px;
  font-family: "Noto Sans JP", "Helvetica Neue", sans-serif;
  color: #333;
  line-height: 1.7;
}


/* ========================================================
   1) HERO
   =======================================================*/
.wedding_movie_bg {
  position: relative;
  height: 45vw;
  max-height: 480px;
  background-size: cover;
  background-position: top;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
}

@media(min-width:992px) {
  .wedding_movie_bg {
    height: 420px
  }
}

.wedding_movie_bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0, 0, 0, .15)0%, rgba(0, 0, 0, .45)100%);
}

.othe_tit {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: #ffffffe6;
  box-shadow: 0 8px 25px rgba(0, 0, 0, .12);
  border-radius: 14px;
  padding: 1.2rem 2rem;
  width: min(90%, 520px);
  color: #2f2f2f;
}

.othe_tit h2 {
  font-family: "Noto Serif JP", serif;
  font-size: clamp(1.6rem, 2vw+1rem, 2.6rem);
  margin: .2rem 0 .5rem;
}

.othe_tit h2 span {
  color: var(--accent)
}

.othe_tit h2 span2 {
  font-size: .8em
}

.othe_tit p {
  font-size: .95rem;
  line-height: 1.55
}

/* ========================================================
   2) セクション共通
   =======================================================*/
.bg_fr,
.bac_set {
  background: var(--bg-light);
  padding: 4rem 0
}

.movie_main {
  width: min(var(--max-w), 94%);
  margin-inline: auto
}


.camp_box_tit p {
  margin: 2.4rem auto 1.4rem;
  font-family: "Noto Serif JP", serif;
  font-size: 1.35rem;
  font-weight: 700;
  position: relative;
  padding-left: 0;
}

.camp_mese {
  line-height: 22px;
}

.camp_box_tit p::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 100%;
  background: var(--accent);
  border-radius: 4px;
  margin-right: .6rem;
}

.camp_bana img {
  width: 100%;
  border-radius: var(--radius);
  box-shadow: var(--shadow)
}

/* CTAリンク */
.campgad a {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: 1rem;
  font-weight: 600;
  color: var(--accent);
  text-decoration: none;
}

.campgad a:hover {
  text-decoration: underline
}

/* ========================================================
   3) SET 割引カード
   =======================================================*/
.tit_set,
.tit_set2 {
  text-align: center;
  font-family: "Noto Serif JP", serif;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 2.5rem 0 1.6rem;
}

.set_fre {
  display: flex;
  gap: 1.2rem;
  justify-content: center;
  flex-wrap: wrap;
  max-width: 1000px;
  margin: 1em auto;
}

.set_fre_im {
  width: 47%;
  text-align: center
}
.set_fre_im a{
  color: #222;
}

.set_fre_im img {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  width: 100%;
}

.set_fre_und,
.set_fre_und2 {
  font-size: 12px;
  margin: 0.5em auto;
}

.set_camp {
  text-align: center;
  margin: 1.8rem 0 0
}

.set_camp h3 {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--accent);
  letter-spacing: .03em
}

.set_camp h3 span {
  font-size: .55em
}

.set_camp p {
  font-size: 11px;
  line-height: 22px;
  margin: 1em auto;
}

.bac_set {
  background: #e4f6f4
}

/* ========================================================
   4) メッセージボックス
   =======================================================*/
.koumoku_shear p {
  font-size: 15px;
  margin-bottom: .6rem;
}

.koumoku_shear_under {
  background: var(--white);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: 1.2rem 1.6rem;
  margin-bottom: 2.2rem;
  line-height: 1.65
}

.koumoku_shear_under p {
  font-size: .93rem
}

.koumoku_shear_under i {
  color: var(--accent);
  margin-right: .4rem
}
.yoyakuwari-box ul {
  list-style: none;
  margin: 1.2rem 0 0;
  background: #fdfdfd;
  border-radius: 12px;
}

.yoyakuwari-box li {
  margin-bottom: 1.2rem;
  line-height: 1.6;
  font-size: 0.96rem;
}

.yoyakuwari-box .discount {
  color: #e53935;
  font-weight: bold;
  margin-left: 0.5em;
}

.yoyakuwari-box .condition {
  display: block;
  margin-top: 0.3em;
  color: #666;
  font-size: 0.9rem;
}

/* ========================================================
   5) 青系ボタン
   =======================================================*/
.btn_blue {
  display: inline-block;
  background: var(--accent);
  color: #fff;
  padding: .85rem 2.1rem;
  border-radius: 9999px;
  font-weight: 700;
  text-decoration: none;
  transition: background .25s ease, transform .25s ease;
}

.btn_blue:hover {
  background: var(--accent-dark);
  transform: translateY(-2px)
}

.bl__text {
  white-space: nowrap
}

/* ========================================================
   6) アニメーション
   =======================================================*/
@keyframes fadeUp {
  0% {
    opacity: 0;
    transform: translateY(40px)
  }

  100% {
    opacity: 1;
    transform: translateY(0)
  }
}

.camp_box_tit,
.camp_bana,
.set_fre,
.set_camp,
.koumoku_shear,
.koumoku_shear_under,
.btn_blue {
  opacity: 0;
  animation: fadeUp .8s ease forwards
}

@media(prefers-reduced-motion:reduce) {

  .camp_box_tit,
  .camp_bana,
  .set_fre,
  .set_camp,
  .koumoku_shear,
  .koumoku_shear_under,
  .btn_blue {
    opacity: 1;
    animation: none
  }
}

/* ========================================================
   7) モバイル
   =======================================================*/
@media(max-width:768px) {
  .wedding_movie_bg {
    height: 220px
  }

  .tit_set,
  .tit_set2 {
    margin-top: 1.6rem
  }
}

.camp_box_tit_gente {
  text-align: center;
  line-height: 22px;
  color: #007e70;
  font-weight: bold;
  margin: 1em auto;
  font-size: 17px;

}

/* 小見出し（カテゴリ：納品についてなど） */
.faq-subtitle {
  font-size: 1.1rem;
  font-weight: 600;
  color: #666;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.delivery-info-container {
  max-width: 1000px;
  margin: 3rem auto;
  padding: 1rem;
}

.delivery-header {
  text-align: center;
  margin-bottom: 2rem;
}

.delivery-header p {
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1.6;
}

.delivery-header span {
  font-size: 2.5rem;
  color: var(--accent);
}

.delivery-description p {
  font-size: 1rem;
  line-height: 1.8;
  color: #444;
  text-align: center;
}

.delivery-description .note {
  font-size: 0.85rem;
  color: #888;
}

.delivery-block {
  margin-top: 2rem;
  padding: 1.5rem;
  border-left: 5px solid var(--accent);
  background: #f9f9f9;
  border-radius: 8px;
}

.delivery-block h4 {
  margin: 0 0 0.5rem;
  font-size: 1.1rem;
  color: #222;
  font-weight: 600;
}

.delivery-block p {
  margin: 0;
  font-size: 0.95rem;
  color: #333;
  line-height: 1.6;
}

.delivery-package {
  text-align: center;
  margin-top: 3rem;
}

.delivery-package p {
  font-size: 1.1rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.delivery-package img {
  width: 100%;
  max-width: 800px;
  border-radius: 8px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}

a.green {
  color: #1cb4a7 !important
}

.camp_bana {
  max-width: 916px;
  margin: 1em auto;
}

.campgad {
  text-align: center;
}

/* ===== 公開ムービー一覧のスタイル ===== */

.fre_div_pub {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 1em auto;
  text-align: center;
}

.fre_div_pub div {
  background-color: #f3f3f3;
  border-radius: 30px;
  padding: 10px 7px;
  transition: background-color 0.3s, transform 0.3s;
  width: 31%;
  margin: 1em auto;
}

.fre_div_pub div:hover {
  background-color: #e0e0e0;
  transform: translateY(-2px);
}

.fre_div_pub a {
  font-size: 13px;
  color: #333;
  font-weight: bold;
  text-decoration: none;
}

.fre_div_pub i {
  margin-left: 5px;
}

.element {
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
  transition: all 0.3s ease-in-out;
}

.publish_main h2 {
  font-size: 15px;
  color: #444;
  margin-bottom: 10px;
  text-align: center;
}

.youtube {
  margin: 1em 0;
  text-align: center;
}

.publish_main h3 {
  font-size: 16px;
  color: #2b2b2b;
  margin-bottom: 10px;
}

.publish_in {
  font-size: 14px;
  color: #1cb4a7;
  font-weight: bold;
  margin: 0.5em 0;
  text-align: right;
}

.publish_main h4 {
  font-size: 14px;
  font-weight: bold;
  color: #555;
  margin-top: 1em;
}

.publish_main p {
  font-size: 14px;
  color: #555;
  line-height: 1.6;
  margin-top: 0.5em;
}

.publish_main span {
  color: #999;
  font-size: 13px;
}

.box_pub {
  margin-top: 1em;
  text-align: left;
}

.box_pub a {
  display: inline-block;
  padding: 8px 12px;
  margin: 5px 0;
  border-radius: 6px;
  background-color: #f0f0f0;
  color: #333;
  font-size: 13px;
  text-decoration: none;
  transition: background-color 0.3s;
}

.box_pub a:hover {
  background-color: #d4f3f0;
}

hr {
  border: none;
  border-top: 1px solid #e0e0e0;
  margin: 2em 0 0;
}

.youtube {
  position: relative;
  padding-bottom: 56.25%;
  /* 16:9 */
  height: 0;
  overflow: hidden;
  margin: 1em 0;
  border-radius: 10px;
}

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



/* 全額返金保証セクション */
.guarantee-section {
  background-color: #fff;
  padding: 20px 20px;
}

.guarantee-inner {
  max-width: 1080px;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
}

.guarantee-image {
  width: 48%;
}

.guarantee-image img {
  width: 100%;
  height: auto;
  border-radius: 12px;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08);
}

.guarantee-text {
  width: 48%;
  font-size: 16px;
  line-height: 1.9;
  color: #444;
  text-align: justify;
}

.guarantee-text h2 {
  font-size: 24px;
  color: #333;
  margin-bottom: 12px;
}

.guarantee-text .highlight {
  font-size: 28px;
  font-weight: bold;
  color: #f5a623; /* ゴールド風カラー */
  margin-right: 6px;
}

.guarantee-text strong {
  color: #1cb4a7;
  font-weight: bold;
  font-size: 17px;
}

.zengaku_image {
  width: 100%;
  height: auto;
  margin: 1.5em 0;
  max-width: 300px;
}

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

.zengaku_image2 {
  width: 100%;
  height: auto;
  margin-bottom: 1em;
}

.zengaku_image2 img {
  width: 100%;
  height: auto;
}
@media (max-width: 768px) {
  .guarantee-inner {
    flex-direction: column;
    text-align: center;
  }

  .guarantee-image, .guarantee-text {
    width: 100%;
  }

  .guarantee-text {
    font-size: 15px;
  }

  .guarantee-text .highlight {
    font-size: 24px;
  }
  .guarantee-inner {
    gap: 6px;
  }
}

.guarantee-comparison {
  background: #fdf8f8;
  padding: 20px 20px;
}

.guarantee-flex {
  display: flex;
  flex-wrap: wrap;
  max-width: 1080px;
  margin: 0 auto;
  gap: 40px;
  align-items: center;
}

.guarantee-image {
  flex: 1 1 45%;
}
.guarantee-image img {
  width: 100%;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.guarantee-text {
  flex: 1 1 50%;
  font-size: 16px;
  color: #333;
}

.guarantee-text h2 {
  font-size: 26px;
  margin-bottom: 12px;
  color: #222;
}

.guarantee-text p {
  line-height: 1.8;
  margin-bottom: 20px;
}

.comparison-table table {
  width: 100%;
  border-collapse: collapse;
  margin-bottom: 16px;
  font-size: 14px;
}
.comparison-table th,
.comparison-table td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
  font-size: 12px;
}
.comparison-table .blue {
  background-color: #e0f7ff;
  color: #007acc;
}
.comparison-table .pink {
  background-color: #ffe0ef;
  color: #e91e63;
}

.note {
  font-size: 13px;
  color: #666;
  margin-bottom: 20px;
}

.guarantee-buttons {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
}


@media (max-width: 768px) {
  .guarantee-flex {
    flex-direction: column;
    text-align: center;
  }
  .guarantee-buttons {
    flex-direction: column;
    align-items: center;
  }
}

.simple-caution {
  background: #f9f9f9;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 20px;
  margin-top: 30px;
  font-size: 14px;
  color: #333;
  line-height: 1.8;
  max-width: 1000px;
  margin: 1em auto;
}

.simple-caution h4 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 16px;
  color: #222;
  font-weight: bold;
}

.simple-caution ul {
  padding-left: 20px;
  margin: 0;
}

.simple-caution li {
  list-style-type: disc;
  margin-bottom: 6px;
}
.kiyaku_zengaku{
  text-align: end;
  margin: 0.5em auto;
}
.kiyaku_zengaku a{
  color: #2691ff;
}


/* -------------資料請求 ------------------------ */

.wish-request-form-2025-section {
  background: #fdfdfd;
  padding: 40px 20px;
  display: flex;
  justify-content: center;
}

.wish-request-form-2025-container {
  max-width: 420px;
  width: 100%;
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.05);
  padding: 30px 24px;
  text-align: center;
  font-family: 'Helvetica Neue', sans-serif;
}

.wish-request-form-2025-container h2 {
  font-size: 22px;
  margin-bottom: 10px;
  color: #222;
}

.wish-request-form-2025-container p {
  font-size: 14px;
  color: #666;
  margin-bottom: 20px;
}

.wish-request-form-2025-container form input {
  width: 100%;
  padding: 12px;
  margin-bottom: 16px;
  border: 1px solid #ddd;
  border-radius: 8px;
  background: #f9f9f9;
  font-size: 14px;
  transition: border-color 0.3s;
}

.wish-request-form-2025-container form input:focus {
  border-color: #1cb4a7;
  background: #fff;
  outline: none;
}

.wish-request-form-2025-container .g-recaptcha {
  margin: 16px 0;
  display: flex;
  justify-content: center;
}

.wish-request-form-2025-container form button {
  background: #1cb4a7;
  color: #fff;
  font-weight: bold;
  border: none;
  padding: 12px;
  border-radius: 8px;
  width: 100%;
  cursor: pointer;
  font-size: 16px;
  transition: background 0.3s;
}

.wish-request-form-2025-container form button:hover {
  background: #179e94;
}


.faq-search {
  text-align: center;
  margin-bottom: 30px;
}

#faqSearchInput {
  width: 80%;
  max-width: 400px;
  padding: 10px 16px;
  font-size: 16px;
  border: 1px solid #ccc;
  border-radius: 8px;
}
#faqSearchInput:focus {
  outline: none;
  border-color: #17c2a4; /* 枠線色を強調色に */
  box-shadow: 0 0 5px rgba(23, 194, 164, 0.5); /* ほんのり影 */
}

.faq-item {
  margin-bottom: 20px;
  padding: 12px;
  border: 1px solid #eee;
  border-radius: 8px;
  background-color: #fafafa;
  transition: all 0.2s ease;
}

.faq-item.hide {
  display: none;
}
#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;
}