html, body {
  overflow-x: hidden;
  margin: 0;
  padding: 0;
  width: 100%;
}



/* NEW INDEX TOP CSS */
.main_index_bac {
  width: 100%;
  height: 440px;
  margin: 0;
}

.promotion {
  width: 95%;
  max-width: 600px;
  margin: 2em auto 1em auto;
  aspect-ratio: 16 / 9;
}
.promotion iframe {
  width: 100%;
  height: 100%;
  color: white;
}
.promotion_box{
  text-align: center;
  line-height: 1.2em;
  color: #5d737f;
  margin-bottom: 2em;
  display: flex;
  max-width: 500px;
  margin: 0 auto 2em auto;
  align-items: center;
}
.promotion_box .a{
  width: 20%;
  height: auto;
}
.promotion_box .b{
  width: 70%;
  text-align: initial;
  height: auto;
}
.promotion_box div img{
  width: 50%;
  height: auto;
}
@media (max-width: 880px) {

  .promotion_box .a{
    width: 15%;
  }
  .promotion_box .b{
    width: 80%;
  }

}
.movie_text_main h4{
  font-size: 13px;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  color: #000000;
  margin-top: 1em;
  font-weight: normal;
  height: 20px;
}
.title_movie_g {
  margin: -1em auto 3em auto;
  text-align: center;
  font-size: 14px;
  line-height: 1.5em;
  width: 95%;
  height: auto;
  max-width: 900px;
}
hr.movie_title_naka{
  height: 1px;
  background-color: #bebebe;
  border: none;
  width: 180px;
  margin: 0.7em auto;
}
.title_movie_g h2{
  font-weight: 100;
  font-family: serif;
  padding: 0.7em 0;
}
.main_index_bac_in {
  max-width: 1350px;
  height: auto;
  width: 100%;
  margin: 0 auto;
  position: relative;
}
.human_img {
  width: 50%;
  height: auto;
  position: absolute;
  top: 0;
  right: 146px;
  z-index: 1;
}
.human_img img {
  width: 674px;
  height: auto;
}
.under_box_main {
  z-index: 2;
  position: absolute;
  top: 224px;
  left: 16px;
}
/* NEW INDEX TOP NO1 */
.no1_box {
  display: flex;
  align-items: center;
  width: 100%;
  height: auto;
  position: absolute;
  top: 7px;
  z-index: 2;
  left: 16px;
}
.no1_box .no1_box_text{
  width: 70%;
  height: auto;
}
.no1_box .no1_box_img{
  width: 10%;
  height: auto;
}
.no1_box img {
  width: 100%;
  height: auto;
}
.no1_box h1 {
  font-size: 23px;
  font-weight: normal;
  font-family: fot-udmarugo-small-pr6n,sans-serif;
  font-weight: 500;
  font-style: normal;
  line-height: 2em;
}
.no1_box h1 span{
  color: #5ea291;
}
/* INEDEX UNDER BOX */

.under_box_one, .under_box_two {
  display: flex;
  max-width: 500px;
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.under_box_one div {
  background-color: #94beb3;
  width: 98%;
  height: auto;
  display: flex;
  align-items: center;
  padding: 0.5em;
  margin: 1%;
  border-radius: 5px;
}
.under_box_two div {
  background-color: white;
  width: 100%;
  margin: 0.5%;
  padding: 0.8em;
  text-align: center;
  border-radius: 5px;
  border: solid 2px #a6e2d3;
}
.under_box_one div div:nth-child(1){
  width: 30%;
  height: auto;
}
.under_box_one div div:nth-child(2){
  width: 70%;
  height: auto;
}
.under_box_one a {
  color: white;
}
.under_box_two a{
  color: #356156;
}
.under_box_one div div p {
  line-height: 1.2em;
}
.under_box_one div div p span{
  font-weight: bold;
  font-size: 19px;
}
.under_box_one div div img {
  width: 85%;
  height: auto;
}

/* スライドバナー */
.slider_index_under {
  display: flex;
  width: 100%;
  height: auto;
  max-width: 1350px;
  margin: 1em auto;
  justify-content: center;
}
.slider_index_under div {
  width: 23%;
  height: auto;
  margin: 1%;
}
.slider_index_under img {
  width: 100%;
  height: auto;
}

@media (max-width: 1100px) {
  .human_img{
    right: 240px;
  }
  .under_box_main {
    top: 294px;
}
}
@media (max-width: 880px) {
  .main_index_bac_in, .under_box_main, .human_img, .no1_box {
    position: static;
  }
  .human_img img,  .main_index_bac, .human_img {
    width: 98%;
    height:auto;
    right: 0;
    margin: 0 auto;
  }
  .no1_box .no1_box_img{
    width: 25%;
    height: auto;
  }
  .no1_box .no1_box_text{
    width: 39%;
    height: auto;
  }
  .no1_box{
    justify-content: center;
  }
  .no1_box h1{
    font-size: 15px;
  }
  .under_box_one div div p span{
    font-size: 15px;
  }
  .under_box_one div div p{
    font-size: 12px;
    line-height: 1.5em;
  }
  .under_box_one div div:nth-child(1){
    width: 25%;
  }
  .under_box_one div div:nth-child(2){
    width: 75%;
  }
  .slider_index_under {
    overflow-x: scroll;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
    justify-content: normal !important;
  }
  .slider_index_under img {
    width: 450px;
    height: auto;
  }
  .slider_index_under div{
    width: 100%;
  }
}
@media (max-width: 733px) {
  .no1_box .no1_box_text{
    width: 50%;
  }
}
@media (max-width: 550px) {
  .no1_box .no1_box_text{
    width: 70%;
  }
  .no1_box{
    margin: 1em auto;
  }
  .slider_index_under img {
    width: 300px;
    height: auto;
  }
}
@media (max-width: 357px) {
  .under_box_one div div p span{
    font-size: 12px;
  }
  .under_box_one div div p{
    font-size: 9px;
  }
  .no1_box h1{
    font-size: 14px;
  }
}
/* エラーページCSS */
.erro {
  text-align: center;
  margin: 4em auto;
  color: #283462;
}
.erro_box {
  background-color: #83909d;
  color: white;
  padding: 1em;
  max-width: 300px;
  text-align: center;
  margin: 0 auto;
  width: 100%;
}
.erro_img{
  width: 100%;
  max-width: 600px;
  margin: 2em auto;
}
.erro_img img {
  width: 100%;
  height: auto;
}
.movie_mainb{
  margin: 5em auto;
    max-width: 1200px;
    width: 98%;
}
.erro_box a {color: white;}
/* 共通メインCSS */
input[type="text"] {
     -webkit-appearance: none;
  }
.movie_main {
  margin: 0 auto 2em auto;
  max-width: 1200px;
  width: 98%;
}
.mmm_main{
  max-width: 500px;
  width: 90%;
  height: auto;
  margin: -2em auto 1em auto;
}
.movie_title {
  font-size: 1.1em;
  line-height: 1.4em;
  text-align: center;
  font-family: serif;
  margin: 1em auto;
}
.movie_title p span{
  font-family: 'Bebas Neue', sans-serif;
  font-family: 'Zen Antique Soft', serif;
  color: #bdbdbd;
  font-size: 15px;
}

/* 料金システム */
.movie_bacground_blur , .movie_bacground_green {
  width: 100%;
  height: auto;
  padding: 2em 0;
  background-color: #f7fcff;
}
.movie_bacground_green {background-color: #f7f3eb;}
.movie_bacground_blure{
  width: 100%;
  height: auto;
  padding: 2em 0;
  background-color: #f7f3eb;
 }
.system_movie{
  margin: 2em auto;
  text-align: center;
  line-height: 1.7em;
  font-size: 18px;
}
.movie_name span5{
    font-size: 11px;
    padding: 0 4px;
}
.system_movie p span , .system_movie p span2 , .system_movie p span3 {
  font-size: 13px;
  color: #b4c6d0;
}

.tensen , .tensen2  {
    border-top: 1px dotted #6A6A6A;
    max-width: 550px;
    margin: 0.5em auto;
    text-align: center;
}
.tensen100 {
  border-top: 1px dotted #6A6A6A;
  margin: 0 auto;
  text-align: center;
}
.tensen2 {
  max-width: 550px;
  width: 95%;
}
p.system_link {
  text-align: center;
  color: #6A6A6A;
  font-size: 13px;
  margin: 1em auto;
}
.system_ran {
  margin: 2em auto;
  line-height: 4.5em;
  text-align: center;
}
.system_tyui {
  text-align: justify;
    color: #484848;
    font-size: 16px;
    max-width: 800px;
    margin: 1em auto;
    line-height: 1.7em;
    width: 95%;
}
.system_tyui_center {
  text-align: center;
  color: #484848;
  font-size: 15px;
  max-width: 375px;
  margin: 1em auto;
  line-height: 1.7em;
  width: 95%;
}
i.fas.fa-chevron-right {
    margin-top: 4px;
}
.system_ran2 {
  background-color: white;
  border-radius: 10px;
  margin: 1em auto;
  padding: 2em 1em;
  width: 90%;
  max-width: 500px;
  text-align: center;
  height: auto;
}
.system_bicou {
  text-align: center;
  width: 100%;
  color: #6A6A6A;
  font-size: 13px;
  line-height: 2em;
  margin-top: 1em;
}
.system_bicou a{
  color: blue;
}
.syou_main {
  max-width: 750px;
  width: 99%;
  margin: 3em auto;
}
.syou_title {
  margin: 1em 0;
  font-size: 1.1em;
  width: 98%;
  margin: 1em auto;
}
.syou_messe{
  text-align: justify;
  margin: 1em auto;
  width: 98%;
  line-height: 1.7em;
}
.bac_white {
  margin: 3em auto;
}


/* FLOW */


.flow_in{
  width: 46%;
  height: auto;
  margin: 2%;
}
.flow_in img {
  width: 100%;
  height: auto;
}
.flow_title {
  font-size: 1.1em;
  font-family: serif;
  color: #658ba0;
  margin: 1em 0;
}
.flow_under {
  text-align: justify;
  padding: 0.2em;
  line-height: 1.7em;
  color: #333333;
}
.flow_under span {
  background:linear-gradient(transparent 60%, #d4e0f8 60%);
}
@media (max-width: 750px) {
  .flow_in{
    width: 100%;
    margin: 5%;
  }
}
.fade-in01{ 
  font-size: 1.1em;
  font-family: serif;
  text-align: center;
  line-height: 2em;
  opacity:0;
  animation-name: sample01; 
  animation-duration: 2s; 
  animation-fill-mode: forwards; 
  margin: 0 auto;
}
@keyframes sample01 {
0% {
  opacity: 0;
  color:rgb(209, 211, 226);
}
90% {
 opacity: 1;
 color:rgb(162, 177, 194);
}
 100% {
  opacity: 1;
  color:rgb(124, 144, 167);
} 
}
.bac_yellow {
  background-color: #eef6fc;
  height: auto;
  width: 95%;
  max-width: 856px;
  border-radius: 11px;
  margin: 1.5em auto;
  padding: 2.5em 0;
}


/* FAST　CSS */
.fast_bac {
  background: linear-gradient(#eff4f7, #deebf3);
}
.fast_top_main {
  width: 100%;
  margin: 1em auto;
  height: auto;
  max-width: 800px;
  position: relative;
}
.fast_top_left {
  width: 100%;
  max-width: 500px;
  margin-left: auto;
  margin-right: 0;
}
.fast_top_left img {
  width: 100%;
  height: auto;
}
.fast_top_right {
  position: absolute;
  top: 43%;
  left: 0%;
  height: auto;
  line-height: 2em;
  font-size: 15px;
  text-align: justify;
  color: #6A6A6A;
}
.fast_top_right h2 {
  font-size: 15px;
  font-weight: bold;
  margin-bottom: 0.5em;
  color: #052e58;
  line-height: 2em;
}
.title_fast {
  line-height: 3em;
  text-align: center;
  margin: 3em auto 1.5em auto;
  color: #9399b0;
}
.title_fast img {
  width: 63px;
  height: auto;
}
.fastt_under {
  text-align: justify;
  line-height: 1.7em;
  margin: 1em auto;
  width: 98%;
  height: auto;
  max-width: 500px;
  border: solid 1px #68839b;
  padding: 2em;
}
.fastt_under p span{
  background:linear-gradient(transparent 60%, #d4e0f8 60%);
}
.tensen_fast {
  border-top: 1px dotted #6A6A6A;
  max-width: 1200px;
  margin: 3em auto;
  text-align: center;
  max-width: 500px;
}
@media (max-width: 750px) {
  .fast_top_right {
    position: relative;
    text-align: center;
    padding: 2em 0;
    background-color: #ffffff;
    line-height: 1.5em;
  }
  .fast_top_right h2 {
    font-size: 1.5em;
  }
  .fast_top_right p {
    font-size: 13px;
  }
}

/* 納品の形式　CSS */

.movie_messe {
  text-align: justify;
  margin: 1.5em auto;
  line-height: 1.7em;
  width: 98%;
  max-width: 650px;
}
.movie_messe p span {
  color: #5c5c5c;
  font-size: 76%;
}
.dvd_pac {
  text-align: center;
  width: 100%;
  max-width: 800px;
  height: auto;
  margin: 2em auto;
}
.dvd_pac p{
  margin: 1em auto;
  font-family: serif;
}
.dvd_pac img {
  width: 100%;
  height: auto;
}


/* 写真文章提出　CSS */

.title_box {
  position: relative;
  padding: .5em .7em .4em;
  border-bottom: 3px solid #83c9c0;
  color: #333333;
  font-weight: bold;
  max-width: 900px;
  margin: 3em auto 2em auto;
  font-size: 17px;
}

.title_box::before,
.title_box::after {
  position: absolute;
  left: 30px;
  bottom: -15px;
  width: 30px;
  height: 15px;
  clip-path: polygon(0 0, 100% 0, 50% 100%);
  content: '';
}

.title_box::before {
  background-color: #83c9c0;
}

.title_box::after {
  bottom: -11px;
  background-color: #fff;
}
.photo_frex {
  display: flex;
  align-items: center;
  width: 99%;
  max-width: 1000px;
  margin: 1em auto;
}
.photo_ma1 {
  width: 28%;
  margin: 0 1%;
}
.photo_ma1 img {
  width: 100%;
  height: auto;
}
.photo_ma2 {
  width: 68%;
  margin: 0 1%;
  text-align: justify;
  line-height: 2em;
}
.photo_ma2 h3 {
  color: rgb(56, 132, 138);
  font-family: serif;
  font-size: 1.2em;
}
.photo_ma2 h3 span{
  color: #8ac0b0;
}
.photo_ma2 p {
  padding: 0.5em;
}
@media (max-width: 750px) {
  .photo_frex {
    display: block;
  }
  .photo_ma1 {
    width: 50%;
    margin: 1em auto;
  }
  .photo_ma2 {
    width:95%;
    margin: 1em auto;
  }
  .photo_ma2 h3 {
   text-align: center;
  }
}


/*　サポート　CSS */

.su_main {
  display: flex;
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
}
.su1 {
  width: 60%;
  height: auto;
}
.su1 img {
  width: 100%;
  height: auto;
}
.su2 {
  width: 38%;
  padding: 1%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  line-height: 2em;
}
.su2_in {
  text-align: center;
}
.su2 h3 {
  font-family: serif;
  font-size: 1.5em;
}
.su2_in h2{
  font-size: 20px;
  line-height: 31px;
  color: #052e58;
}
.su2 h3 span {
  color: #696E7C;
}
.su2 p {
  font-size: 90%;
  line-height: 25px;
  margin: 8px auto;
}
.supo_fre {
  display: flex;
  margin: 3em auto;
}
.supo1 {
  width: 50%;
  height: auto;
  padding: 1em;
}
.supo1 img {
  width: 100%;
  height: auto;
}
.supo2 {
  width: 50%;
  padding: 1em;
  height: auto;
}
.supo2 h3 {
  font-family: serif;
  color: #5c5c5c;
  font-size: 14px;
  margin: 0.5em 0;
}
.supo2 h4 {
  color: #333333;
  margin: 1em auto;
  line-height: 1.1em;
  font-size: 2em;
  font-family: serif;
}
.supo2 h4 span {
  color: #388a71;
}
.supo2 h4 span2 {
  color: #385e8a;
}
.supo2 h4 span3 {
  color: #968f78;
}
.supo2 h5 {
  font-size: 1.3em;
  font-weight: normal;
  margin: 0.5em 0;
  line-height: 1.7em;
}
.supo2 p {
  line-height: 1.8em;
  text-align: justify;
  padding: 0.7em;
}
@media (max-width: 815px) {
  .su_main {
    display: block;
  }
  .su1 {
    width: 100%;
  }
  .su2 {
    width: 100%;
    margin: 3em auto 0em auto;
  }
  .supo_fre {
    display: block;
  }
  .supo1 , .supo2 {
    width: 100%;
    height: auto;
  }
  .supo2 p {
    padding: 0;
  }
}


/* 資料請求 CSS */

.send {
  width: 95%;
  margin: 1em auto;
  max-width: 1000px;
  border-radius: 30px;
  box-shadow: 0 0 7px rgb(0 0 0 / 20%);
  padding: 2em;
}
.send_fre {
  display: flex;
  align-items: center;
}
.send_laver {
  width: 40%;
  margin: 1em 1%;
}
span.send_required {
  background: #b28e7c;
  border: 1px solid #dabcad;
  font-size: 80%;
  color: white;
  padding: 0.5em;
  border-radius: 5px;
  margin-right: 2em;
}
span.send_free{
  background: #7f9dd2;
  border: 1px solid #adc6da;
  font-size: 80%;
  color: white;
  padding: 0.5em;
  border-radius: 5px;
  margin-right: 2em;
}
.send_form {
  width: 50%;
  margin: 1em 5%;
}
.send_form input[type="text"],input[type="password"] {
  width: 100%;
  padding: 1em;
}

.send_form input[type="date"] {
  padding: 1em;
  width: 100%;
  border: 1px solid #ccc;
}
.send_form textarea{
  width: 100%;
}

.tensen_form {
  border-top: 1px dotted #6A6A6A;
  max-width: 850px;
  width: 95%;
  margin: 1em auto;
  text-align: center;
}
.send_submit {
  text-align: center;
  margin:3em auto;
  width: 100%;
  filter: drop-shadow(3px 5px 6px rgba(0, 0, 0, 0.4));
}

.send_submit input.btn.btn-primary {
  background-color: #5675f1;
  border: 0;
  border-radius: 5px;
  color: white;
  padding: 1em;
  width: 100%;
  max-width: 146px;
  min-width: 100px;
  font-size: 16px;
}
  @media (max-width: 900px) {
    .send {
      padding: 0.5em;
      border-radius: 14px;
    }
    .send_fre {
      display: block;
      margin: 2em auto;
    }
    .send_laver , .send_form {
      width: 95%;
      margin: 2em auto;
    }
  }


/* サンクスページ */
.thanks {
  text-align: justify;
  max-width: 500px;
  width: 95%;
  margin: 3em auto;
  line-height: 1.8em;
}
.thanks h3 {
  color: #5675f1;
  text-align: center;
  margin: 1em auto;
  font-weight: normal;
  font-family: serif;
  font-size: 1.2em;
}
.thanks p span {
  color: #5db8a1
}
.tahnks_botan {
  width: 100%;
  max-width: 500px;
  padding: 1em;
  margin: 0 auto;
  background-color: #5675f1;
  color: white;
  text-align: center;
}
.tahnks_botan a {color: white;}
.tahnks_botan2 {
  width: 100%;
  max-width: 500px;
  padding: 1em;
  margin: 0 auto;
  background-color: #6db880;
  color: white;
  text-align: center;
}
.tahnks_botan2 a {color: white;}
.thanks2{
  margin: 1em auto;
  text-align: center;
  font-size: 15px;
  color: #5c5c5c;
}
.tahnks_name {
  text-align: center;
  margin: 2em auto;
  color: #7c929f;
  font-size: 1.2em;
  font-family: serif;
  line-height: 1.7em;
}


/* 式場様へ */

.messe_park {
  text-align: justify;
  max-width: 980px;
  width: 95%;
  margin: 2em auto;
  line-height: 1.8em;
}
.park_form {
  background-color: #385e8a;
  color: white;
  margin: 3em auto;
  padding: 2em 1em;
  width: 90%;
  max-width: 500px;
  text-align: center;
  border-radius: 5px;
}
.park_form a {color: white;}




/* 会社概要テーブルCSS */
table#table01 a {
  color: #7ca5a0;
}
table#table01 {
  width: 90%;
  max-width: 900px;
  margin: 1em auto;
}
#table01 tr {
  border-bottom: 1px solid #b5b1b1;

}

#table01 th,
#table01 td {
  padding: 24px 0;
  border: none;
  text-align: justify;
  line-height: 1.7em;
}

#table01 th {
  width: 30%;
}

.campa_mese {
  text-align: justify;
  line-height: 2em;
  width: 95%;
  max-width: 900px;
  margin: 1em auto;
}
/* sp */
@media only screen and (max-width: 480px) {
  #table01 th,
  #table01 td {
    width: 100%;
    display: block;
    text-align: justify;
  }

  #table01 th {
    width: 100%;
    color: #576a7f;
  }

  #table01 td {
    padding-top: 0;
  }
}


/* 著作権フリー楽曲一覧 */

table.free_music{
  box-sizing: border-box;
  border-collapse:collapse;
  margin: 0 auto;
  text-align: center;
  width: 90%;
  margin: 2em auto;
}
table.free_music th,
table.free_music td{
  border: 1px solid #999;
  padding: .5em 1em;
}
table.free_music th{
  background: #eee;
}
table.free_music　th span {
	font-size: 0.8em;
	color: #220001;
}
table.free_music　th {
	line-height: 1.4em;
}
table.free_music　td {
		text-align: left;
}
.ongen {
  text-align: center;
  margin: 1em auto;
}
@media (max-width: 650px) {
    table.free_music{
      width: 95%;
    }
    table.free_music th,
    table.free_music td{
      display: block;
    }
    table.free_music th {
		text-align: left;
	}
  table.free_music td {
		text-align: right;
	}
}

/* 口コミ　CSS */

.movie_voice_main {
  display: flex;
  flex-direction: row;
  background: #fff;
  border-radius: 16px;
  overflow: hidden;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
  margin-bottom: 32px;
  font-family: 'Noto Sans JP', sans-serif;
}

.movie_voice1 {
  flex: 0 0 370px;
  max-width: 370px;
  overflow: hidden;
}

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

.movie_voice2 {
  flex: 1;
  padding: 16px 20px;
  color: #333;
}

.movie_voice2 h3 {
  font-size: 16px;
  margin-bottom: 6px;
  font-weight: 600;
}

.movie_voice2 h4 {
  font-size: 14px;
  margin-bottom: 12px;
  line-height: 1.6;
}

.movie_voice2 h4 a {
  color: #007acc;
  text-decoration: none;
}

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

.movie_voice2 h5 {
  font-size: 13px;
  margin-bottom: 10px;
  color: #555;
}

.movie_voice_sen {
  border: none;
  border-top: 1px solid #eee;
  margin: 12px 0;
}

.movie_voice2 p {
  font-size: 14px;
  line-height: 1.7;
  white-space: pre-wrap;
}
  @media (max-width: 1000px) {
    .movie_voice_main {
      display: block;
    }
    .movie_voice1 , .movie_voice2 {
      width: 95%;
      margin: 1em auto;
    }
}



/* 掲載動画　CSS */

.publish_main {
  max-width: 800px;
  width: 95%;
  margin: 2em auto;
}
.publish_main h2 {
  font-size: 17px;
  margin: 1em 0;
  font-family: serif;
  font-weight: normal;
  text-align: center;
  color: #5c5c5c;
}
.publish_main h3 {
  font-weight: normal;
  margin: 1em 0;
  font-size: 17px;
  color: #70837d;
}
.publish_main h4 {
  font-weight: normal;
  margin: 1em 0;
  font-size: 90%;
  color: #6879a8;
}
.publish_main p {
  line-height: 1.7em;
}
.publish_main p span {
  font-size: 12px;
  color: #5c5c5c;
}


/* クエスチョン　CSS */
.question_main {
  max-width: 1000px;
  margin: 0 auto;
}
.question_main_in {
  margin: 4em auto;
}
.question_category {
  display: inline-block;
  text-align: end;
  padding: 15px 1.2em;
  background: linear-gradient(135deg, #6c90b9, #a7bfdc);
  color: white;
  font-size: 15px;
  font-weight: 600;
  border-radius: 20px;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.06);
}
.contents{
  max-width: 400px;
  padding: 0 40px;
  margin: 0 auto;
}

.accordion-single  {
  border-bottom: 1px solid #efefef;
  margin-top: 10px;
}

.accordion-single-title {
  border-top: 1px solid #efefef;
  padding: 21px 39px 20px 5px;
  cursor: pointer;
  position: relative;
  font-size: 15px;
  color: #5a6677;
  margin: 0;
}

.accordion-single-title::after{
  content: "";
  position: absolute;
  right: 25px;
  top: 50%;
  transition: all 0.2s ease-in-out;
  display: block;
  width: 8px;
  height: 8px;
  border-top: solid 2px #999;
  border-right: solid 2px #999;
  transform: translateY(-50%) rotate(135deg);
}

.accordion-single-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height .3s ease-in-out;
}

.accordion-single-content p {
  padding: 20px;
  line-height: 1.6em;
  text-align: justify;
}

.accordion-single-item.is-open .accordion-single-content  {
  min-height: 0;
  height: auto;
  max-height: fit-content;

}

.accordion-single-item.is-open .accordion-single-title::after  {
  transform: translateY(-50%) rotate(315deg);
}



/* 音源変更　CSS */

.music_free {
  width: 100%;
  padding: 3em 0;
  background-color: #c7d4e2;
  text-align: center;
  line-height: 1.8em;
  margin: 1em auto;
}
.music_free h3 {
  font-weight: normal;
  color: #647297;
}
.music_free h4 {
  color: red;
  font-weight: normal;
  font-size: 80%;
}
.ongesetu ,.ongesetu2 {
	width: 100%;
	height: auto;
	text-align: center;
	margin: 1.5em 0;
	background: #D6E3E7;
	padding: 1.5em 0;
	line-height: 1.5em;
}
.ongesetu2 span2 {font-size: 12px;color: #FF8082;}
.ongesetu2 {text-align: center;}
.ongesetu2 p span {
	font-size: 12px !important;
	color: #474747 !important;
	text-align: center!important;
}
.ongesetu p , .ongesetu2 p{
	color: #647E86;
	font-size: 16px;
}
@media (max-width:800px) {
.ongesetu {
	text-align: justify;
}
.ongesetu p{
	width: 95%;
	margin: 0 auto;
	color: #647E86;
	font-size: 16px;
	line-height: 1.3em;
}}
.ongen {
	text-align: center;
	width: 90%;
	max-width: 1000px;
	line-height: 2em;

}
.ongen_notes {
	text-align: justify;
	width: 90%;
	max-width: 1000px;
	font-size: 13px;
	margin: 1em auto;
	line-height: 2em;

}
.free_tyuui {
  text-align: justify;
  margin: 1.5em auto;
  line-height: 1.6em;
}
#myInput {
  background-image: url('/css/searchicon.png'); /* Add a search icon to input */
  background-position: 10px 12px; /* Position the search icon */
  background-repeat: no-repeat; /* Do not repeat the icon image */
  width: 90%; /* Full-width */
	max-width: 1000px;
	 display: grid;
  place-content: center;
  gap: 1ch;
	margin: 1em auto;
  font-size: 12px; /* Increase font-size */
  padding: 20px 6px;
  border: 2px solid #98cad9; /* Add a grey border */
  margin-bottom: 12px; /* Add some space below the input */
}

#myUL {
  /* Remove default list styling */
  list-style-type: none;
  padding: 0;
  margin: 0;
	line-height: 1.7em;
}
#myUL li span {
	font-size: 14px;
	padding: 1em;
}
#myUL li  {
  border: 1px solid #ddd; /* Add a border to all links */
  margin-top: -1px; /* Prevent double borders */
  background-color: #f6f6f6; /* Grey background color */
  padding: 12px; /* Add some padding */
  text-decoration: none; /* Remove default text underline */
  font-size: 18px; /* Increase the font-size */
  color: black; /* Add a black text color */
  display: block; /* Make it into a block element to fill the whole list */
}
#myUL li  a {
	color: black; /* Add a black text color */
}
#myUL li  span {
	font-size: 12px;
}
.lite {
	text-align: right;
	font-size: 13px;
}
.music_count {
  text-align: center;
  line-height: 1.5em;
  color: #385e8a;
  font-size: 1.2em;
  margin: 2em auto;
}
.music_count p span {
  color: #333333;
  text-align: center;
  font-size: 16px;
}

/* バリデーション　CSS */
.alart {
  font-size: 14px;
  color: red;
  text-align: end;
  padding: 0 3.2em 0 0;
  margin: -0.5em 0 0 0;
}
@media (max-width: 600px) {
  .alart {
    padding: 0 1em 0 0;
  }
}


/* キャンペーン情報　CSS */

.camp_box_tit {
  margin:2em auto 0 auto;
  padding: 0.7em;
  width: 98%;
  font-size: 17px;
  font-weight: bold;
  max-width: 800px;
  text-align: center;
  line-height: 1.5em;
  position: relative;
 }
 .camp_box_tit::after {
  position: absolute;
  bottom: -1px;
  left: 50%;
  transform: translateX(-50%); /* 左右方向を正確に中央揃え */
  width: 80px;
  height: 3px;
  content: '';
  border-radius: 3px;
  background: #2ea59b;
}


 .camp_bana {
   margin: 1em auto;
   max-width: 800px;
   width: 98%;
 }
 .camp_bana img {
   width: 100% !important;
   height: auto;
 }
 .camp_mese {
   width: 95%;
   padding: 0.5em;
   max-width: 800px;
   margin: 1em auto;
   text-align: justify;
   line-height: 1.7em;
 }
 .tit_set , .tit_set2 {
   text-align: center;
   margin: 2em auto;
   color: #388a6b;
   font-size: 1.2em;
   font-family: serif;
 }
 .tit_set2 {
   color:  #678e99;
 }

.set_fre {
  display: flex;
  margin: 1em auto;
  max-width: 800px;
  width: 95%;
}
.set_fre_im {
  width: 50%;
  padding: 0.2em;
}
.set_fre_im img {
  width: 100%;
  height: auto;
}
p.set_fre_und , .set_fre_und2 {
  background-color: #9ebcb1;
  font-size: 13px;
  padding: 0.5em;
  color: white;
  text-align: center;
  line-height: 1.5em;
}
.set_fre_und2 {
  background-color: #b5c5ca;
}
.set_camp {
  text-align: justify;
  margin: 0 auto;
  max-width: 800px;
  width: 95%;
  line-height: 1.8em;
}
.set_camp h3 , .set_camp h3 span.hh {
  color:#9ebcb1;
  font-size: 50px;
  margin: 0.8em auto 0.2em auto;
  padding-left: 5%;
  font-weight: normal;
  font-family: 'Condiment', cursive;
}
.set_camp h3 span.hh {
  color:#9eb6bc;
}
.set_camp h3 span {
  color: #333333;
  font-size: 17px;
  font-family: serif;
  margin-left: 2px;
}
.set_camp p {
  text-align: justify;
  color: #333333;
  font-size: 15px;
  padding: 0 1em;
}
.bac_set {
  background-color: #fffef5;
  width: 100%;
  height: auto;
  padding: 2em 0;
}
.set_link {
  text-align: justify;
  margin: 0.5em auto;
  width: 95%;
  padding: 0.5em;
  line-height: 2em;
  max-width: 800px;
}
.set_link i {
  padding: 0 0.5em;
}
.set_link a {
  color: #5c7592;
}
.koumoku_shear {
  max-width: 800px;
  width: 95%;
  padding: 1em;
  text-align: justify;
  background-color: #f3f3f3;
  margin: 2em auto;
}
.koumoku_shear_under {
  max-width: 800px;
  padding: 0.3em;
  width: 95%;
  margin: 0 auto;
  line-height: 1.8em;
}
.koumoku_shear_under p span{
  color: #4065d6;
  font-size: 14px;
}
.koumoku_shear_under p strong{
  color: #2f3db6;
  font-size: 18px;
}
/* コラム　CSS */

.coram_tit {
  text-align: center;
  margin: 2em auto;
  font-style: serif !important;
  line-height: 1.5em;
    max-width: 327px;
}
.coram_tit h1 {
  font-weight: normal;
  font-size: 1em;
}
.coram_tit h1 span {
  color: #385e8a;
  font-size: 1.2em;
}
.coram_frex {
  display: flex;
  margin: 2em auto;
  width: 100%;
  flex-wrap: wrap;
  align-items: center;
  max-width: 1000px;
}
.coram_frex_in {
  width: 50%;
  height: auto;
  padding: 0.4em;
}
.coram_frex_in img {
  width: 100%;
  height: auto;
}
.coram_motto , .coram_motto2{
  background: #829dbc;
  color: white;
  max-width: 200px;
  padding: 0.2em;
  margin: 1em 0 1em auto;
  text-align: center;
}
.coram_motto2{
  background: #b9c5ab;
}
.coram_in p {
  text-align: center;
  font-size: 1.1em;
  line-height: 1.6em;
  margin: 0.5em auto;
  text-align: -webkit-match-parent;
}
.coram_motto p {
  font-size: 15px !important;
}
.coram_motto p a ,.coram_motto2 p a{
  color: white;
}
.coram_bac {
  background-color: #f6fafc;
  width: 100%;
  margin: 2em auto;
  padding: 2em 0;
  height: auto;
}
.coram_im {
  width: 100%;
  padding: 0.5em;
  max-width: 1000px;
  margin: 1em auto;
}
.coram_im img {
  width: 100%;
  height: auto;
}
.coram_im2 {
  width: 100%;
  padding: 0.5em;
  max-width: 1000px;
  margin: 0 auto;
}
.coram_im2 img {
  width: 100%;
  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;
}
.page_im {
  max-width: 500px;
  width: 95%;
  margin: 1em auto;
}
.page_im img {
  width: 100%;
  height: auto;
}
.messe_coram {
  width: 95%;
  margin: 2em auto;
  text-align: justify;
  line-height: 1.8rem;
}
.messe_coram img {
  width: 100%;
  height: auto;
}
.time_coram {
  text-align: end;
  max-width: 800px;
  width: 100%;
  padding: 1em;
  margin: 1em auto;
}
.time_coram p span {
  color: #7c7c7c;
  font-size: 12px;
}
  @media (max-width: 750px) {
    .coram_frex {
      display: block;
    }
    .coram_frex_in {
      width: 100%;
      margin: 1em auto;
      padding: 0 1em;
    }
  }



  /* ムービー　インデックスCSS */
.frex_movie {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 1em 0.2em;
  max-width: 1000px;
  margin: 1em auto;
}
.frex_movie2 {
  display: flex;
  width: 100%;
  padding: 1em 0.2em;
  max-width: 1000px;
  margin: 1em auto;
}

.frex_movie_in{
  width: 31%;
  margin: 1em 1%;
  height: auto;
  padding-bottom: 16px;
  border-radius: 13px;
  box-shadow: 2px 2px 8px rgba(124, 124, 124, 0.15), 
  -2px -2px 8px rgba(255, 255, 255, 0.6);
  position: relative;

}
.frex_movie_in20 {
  width: 300px;
  margin: 1em 1%;
  height: auto;
  padding-bottom: 0.5em;
}
.frex_movie_in30{
  width: 280px;
}
.frex_movie_in img {
  width: 100%;
  height: auto;
  border-top-left-radius: 13px;  /* 左上 */
  border-top-right-radius: 13px; /* 右上 */
  border-bottom-left-radius: 0;  /* 左下なし */
  border-bottom-right-radius: 0; /* 右下なし */
}
.frex_movie_in h3 {
  border: solid 1px #2ea59b;
  border-radius: 4px;
  padding: 0.7em;
  margin: 1em auto;
  text-align: center;
  font-size: 15px;
  color: #2ea59b;
  width: 100%;
}
.frex_movie_in h3 span{
  font-size: 16px;
}
.frex_movie_in20 img {
  width: 100%;
  height: auto;
}
.movie_text_main {
  margin: 0.5em auto 0 auto;
  padding: 16px 7px;
  white-space: normal;
}
.movie_text_main2 {
  margin: 0.5em auto;
  padding: 16px;
}
.movie_name {
  font-size: 1.2em;
  font-family: serif;
  margin: 0 auto;
  color: #385e8a;
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", sans-serif;
  height: 50px;
}
.movie_name p a{color: #585858;font-size: 16px;}
.movie_name p span {
  font-size: 0.9em;
  margin-left: 1.2em;
  color: #333333;
}
.movie_name p span2 {
  font-size: 0.9em;
  margin-left: 0.5em;
  color: #333333;
}
.movie_mese  {
  width: 100%;
  margin:  0.5em 0;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
  text-align: justify;
  line-height: 1.5em;
}
.movie_name span3{
  width: 100px;
  padding: 8px 10px;
  font-size: 11px;
  background-color: #2ea59b;
  color: white;
  margin: 0 0 10px 0;
  text-align: center;
  line-height: 3em;

}
.movie_text_main span3{
  width: 100px;
  padding: 8px 10px;
  font-size: 13px;
  background-color: #4dd1c6;
  color: white;
  margin: 0 0 10px 0;
  text-align: center;
  line-height: 3em;

}
.movie_name span3 a{color: white;}

.movie_mese p{
  overflow-wrap: break-word;
  word-wrap: break-word;
}
.states1 , .states2 , .states3 {
  width: 95%;
  text-align: center;
  margin: 1em 0 1em auto;
  padding: 0.5em;
  max-width: 140px;
}
.states1 {
  color: #c9bca1;
  border: 1px solid #a08165;
  background: #fffbf0;
}
.states2 {
  color: #c7c7c7;
  margin: 1.5em auto 0 auto;
  border-radius: 8px;
  border: 1px solid #c7c7c7;
}
.states2 a {color: #131313;}
.states3 {
  color: #9ac4b6;
  border: 1px solid #99b19b;
  background: #edf9f0;
}


.states3 a {color: #9ac4b6;}
.rnan{
  height: 65px;
}
br.sp{display: none;}
  @media (max-width: 1000px) {
    .frex_movie_in {
      width: 48%;
    }

  }
  @media (max-width: 500px) {
    .movie_text_main h4{
      line-height: 1.3em;
      margin-top:5px
    }
    .movie_mese{
      display: none;
    }
    .movie_name p a{
      font-size: 17px;
    }
    .movi_frel div{
      margin: 0;
    }
    .movie_name p span{
      font-size: 15px;
      margin-left: 0;
    }
    .movie_text_main{
      padding: 16px;
    }
    .movie_mese{
      font-size: 14px;
    }
    .movie_name {
      font-weight: bold;
      font-size: 16px;
      margin: -3px 0 0 0;
      line-height: 1.3em;
    }
    br.sp{display: block;}
    .frex_movie_in {
      width: 98%;
      height: auto;
      margin: 24px auto;
    }
    .type_flex > div:nth-child(1),
    .type_flex > div:nth-child(2),
    .type_flex > div:nth-child(3),
    .movie_fret {
        display: none;
    }
    .movie_fret{
      display: none !important;
    }
    .movi_frel{
      flex-wrap: wrap;
      line-height: 1.2em;
      justify-content: flex-start !important;
      margin-left: -11px; /* 必要に応じて調整 */
    }
    .review_index{
      display: none !important;
    }
    .movie_nai_box i{
      top: 16px;
      right: 7px;
    }
  }

  /* ムービーページ内　CSS */

.movie_url {
  width: 100%;
  max-width: 1000px;
  margin: 2em auto;
  aspect-ratio: 16 / 9;
}
.movie_url iframe {
  width: 100%;
  height: 100%;
}
.movie_mussic{
  width: 90%;
  max-width: 600px;
  margin: 1em auto;
}
.movie_mussic img {
  width: 100%;
  height: auto;
}
p.movie_mussic_under {
  text-align: center;
  background-color: #c4baa9;
  color: white;
  font-size: 13px;
  padding: 1em;
}
.movie_mussic_link {
  text-align: center;
  line-height: 1.7em;
  margin: 1em auto;
}
.movie_mussic_link p span {
  color: #333333;
  font-size: 90%;
}
.movie_mussic_link p a {
  color: #648baf;
}
.system_movie_page {
  margin: 1em auto 0 auto;
  text-align: center;
  width: 98%;
  font-size: 25px;
  font-family: serif;
  line-height: 1em;
}
.system_movie_page p span {
  font-size: 17px;
  color: #333333;
}
.system_movie_page p span.souryou {
  font-size: 17px;
  color: #a15a5c;
}
.movie_share_movie {
  width: 95%;
  max-width: 333px;
  margin: 0.5em auto;
  padding: 1em;
  color: white;
  background-color: #a2bad7;
  text-align: center;
}
.horizontal-items {
  display: flex;
  max-width: 1000px;
  height: auto;
  width: 98%;
  margin: 2em auto;
}
.item {
  padding: 0 10px;
  width: 33%;
}
.movie_osussume {
  width: 300px;
}
.movie_osussume img {
  width: 100%;
  height: auto;
}
.movie_osussume h2 {
  margin: 0.8em 0;
  font-family: serif;
  font-weight: normal;
  color: #2b3970;
  font-size: 1.2em;
}
.movie_osussume p {
  text-align: justify;
  line-height: 1.5em;
}
.movie_feature {
  text-align: center;
  font-family: ibm-plex-sans-jp, sans-serif;
  font-weight: 200;
  font-size: 15px;
  font-style: normal;
  margin: 3em auto;
  width: 100%;
  max-width: 700px;
  height: auto;
  line-height: 1.5em;
  padding: 1em 0;
  border-top: solid 1px #dbdbdb;
  border-bottom: solid 1px #dbdbdb;
}
.movie_feature p {
  max-width: 500px;
  margin: 0 auto;
}
table.movie_syousai{
  box-sizing: border-box;
  border-collapse:collapse;
  margin: 2em auto;
  text-align: center;
  width: 95%;
  max-width: 1000px;
}
table.movie_syousai th,
table.movie_syousai td{
  border: 0.1px solid #c5c5c5;
  padding: 1em 1em;
  text-align: justify;
}
table.movie_syousai td p span {
  font-size: 13px;
  line-height: 1.5em;
}
table.movie_syousai td{
  line-height: 1.6em;
}
table.movie_syousai th{
  background: #eeeeee;
  font-weight: normal;
  color: #4b4b4b;
  border-top: 0.1px solid #c5c5c5;
  border-bottom: 0.1px solid #c5c5c5;
  font-size: 90%;
}
.movie_highlight{
  width: 95%;
  max-width: 1000px;
  margin: 1em auto;
  display: flex;
}
.movie_highlight_in {
  width: 33%;
  padding: 0.5em;
}
.movie_highlight_in img {
  width: 100%;
  height: auto;
}
.movie_highlight_in h3 {
  font-family: 'Abril Fatface', cursive;
  margin: 0.5em auto;
  font-weight: normal;
  font-size: 1.6em;
  color: #96b6a4;
}
.movie_highlight_in h4 {
  margin: 0.5em auto;
  text-align: justify;
  line-height: 1.6em;
  font-family: serif;
}
.movie_highlight_in p {
  line-height: 1.4em;
  color: #333333;
  text-align: justify;
}



/* アコーディオンメニュー全体のサイズ・位置 */
.ac {
  width: 95%;
  max-width: 1000px;
  margin: 0 auto;
  margin: 2em auto;
}
.ac2 {
  width: 95%;
  max-width: 837px;
  margin: 0 auto;
}
.ac a {
  color: #5675f1;
}
/* クリックしたら表示される領域 */
.ac-child {
  display: none;
  padding: 1em 0.5em;
  line-height: 1.6em;
  text-align: justify;
}
.ac-parent {
  position: relative;
  height: auto;
  border-bottom: 1px solid rgb(197, 197, 197);
  color: rgb(80 80 80);
  text-align: justify;
  padding: 0px 4em 8px 1em;
  line-height: 24px;
  cursor: pointer;
  font-size: 15px;
  margin: 1.8em auto;
}

/* 擬似要素で下三角形を作成 */
.ac-parent:after {
	content: "";
	display: inline-block;
	position: absolute;
	top: 25%;
	right: 30px;
	width: 10px;
	height: 10px;
	border-right: 3px solid rgb(124, 124, 124);
	border-bottom: 3px solid rgb(109, 109, 109);
	transform: translateY(-50%) rotate(45deg);
	transition: .3s;
}

/* オープン時にopenクラスを付与 */
.ac-parent.open:after {
	transform: rotate(225deg);
}

.ac-parent2 {
	position: relative;  /* 追加 */
	height: 75px;
	border-bottom: 1px dotted #6A6A6A;
	color: rgb(80 80 80);
	text-align: justify;
  padding: 0 1em;
	line-height: 50px;
	cursor: pointer;
  font-size: 15px;
  margin: 1.2em auto;
}

/* 擬似要素で下三角形を作成 */
.ac-parent2:after {
	content: "";
	display: inline-block;
	position: absolute;
	top: 45%;
	right: 30px;
	width: 10px;
	height: 10px;
	border-right: 3px solid rgb(124, 124, 124);
	border-bottom: 3px solid rgb(109, 109, 109);
	transform: translateY(-50%) rotate(45deg);
	transition: .3s;
}

/* オープン時にopenクラスを付与 */
.ac-parent2.open:after {
	transform: rotate(225deg);
}
.frex_movie_in2{
  width: 100%;
  margin: 1em 1%;
  height: auto;
  padding-bottom: 0.5em;
  position: relative;
}
img.sns_ico_wadai{
  position: absolute;
  top: -27px;
  right: -6px;
  z-index: 1;
  width: 100px !important;
  height: auto;
}
.frex_movie_in2 img {
  width: 100%;
  height: auto;
}
@media (max-width: 800px) {
  table.movie_syousai th,
  table.movie_syousai td{
    display: block;
    border-bottom: none;
  }
  .movie_highlight_in {
    width: 95%;
    margin: 1em auto;
  }
  .movie_highlight{
    overflow-x: scroll;
  }
  .movie_highlight2{
    width: 300px;
  }
}
/* ムービー検索CSS */
.plan_movie_fre {
  display: flex;
  justify-content: center;
  align-items: center;
}
.plan_movie_fre_in1 , .plan_movie_fre_in2 {
  width: 28%;
  height: auto;
  border: 1px solid #6a8573;
  text-align: center;
  padding: 4px 0.5em;
  color: #6a8573;
  font-size: 13px;
  position: relative;
}
.plan_movie_fre_in1 p a , .plan_movie_fre_in2 p a {
  color: #6a8573;
}
.plan_movie_fre_in2 {
  margin-left: 1em;
}
.plan_movie_fre_in1 i , .plan_movie_fre_in2 i {
  position: absolute;
  top: 6px;
  right: 8px;
}
.besiicc_movie {
  color: #6a8573;
  font-size: serif !important;
}
  @media (max-width: 700px) {
    .plan_movie_fre_in1 , .plan_movie_fre_in2 {
      width: 50%;
    }
  }
/* INDEX CSS */
.index_movie h1 {
  text-align: center;
  font-size: 1.1em;
  font-weight: normal;
  line-height: 1.5em;
  font-family: serif;
  width: 95%;
  margin: -10px auto 1em auto;
}
.index_movie h1 span {
  color: #2e6ca5;
}
.bac_yellow_index{
  padding: 2em 0;
  width: 100%;
  height: auto;
  background-color: #f0fff7;
}
.plan_movie_index {
  text-align: center;
  width: 90%;
  max-width: 750px;
  background-color: #acc9c3;
  padding: 1.5em 0;
  margin: 1em auto;
  color: white;
}


table.plan_hikaku_movie {
  border-collapse: collapse;
  width: 95%;
  max-width: 1000px;
  margin: 2em auto;
}
table.plan_hikaku_movie th,
table.plan_hikaku_movie td {
  padding: 1rem 2rem;
  text-align: center;
  border-bottom: 1px solid #ddd;
}
table.plan_hikaku_movie td span {
  color: red;
}
table.plan_hikaku_movie th {
  font-weight: normal;
  font-size: .875rem;
  color: #666;
  background: rgb(220, 231, 225);
  position: sticky;
  top: 0;
}
table.plan_hikaku_movie img {
  width: 80px;
  display: block;
  margin: 0 auto;
  margin-bottom: .5rem;
}
@media(max-width: 500px) {
  .heading {
    display: none;
  }
  table.plan_hikaku_movie td {
    display: block;
  }
  .car-name {
    background: rgb(220, 231, 225);
  }
  td::before {
    content: attr(data-label);
    font-size: .875rem;
    color: #666;
    display: block;
    margin-bottom: 0.5rem;
  }
  .movie_feature p {
    max-width: 350px;
    text-align: justify;
  }
}

.index_bac_brrow {
  padding: 0;
  width: 100%;
  height: auto;
  background: #f7f7f7;
  padding: 1em 0;
  margin-top: 2em;
}
.index_bac_gree {
  padding: 2.5em 0;
  width: 100%;
  margin-bottom: 2em;
  height: auto;
  background-color: #f7f7f7;

}
.index_bac_gree_two {
  width: 100%;
  margin: 1em auto;
}
.index_bac_pinc {
  padding: 2.5em 0;
  width: 100%;
  height: auto;
}

.horizontal-list {
  overflow-x: auto;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
  text-align: center;
  width: 100%;
  margin: 2em auto;
   /* IE, Edge 対応 */
  -ms-overflow-style: none;
  /* Firefox 対応 */
  scrollbar-width: none;
}
.horizontal-list::-webkit-scrollbar {
  display:none;
 }
.item11 {
  /* 横スクロール用 */
  display: inline-block;
  width: 100%;
  max-width: 320px;
  margin: 0.7em;
}
.osusume_frex img {
  width: 100%;
  height: auto;
}

.osusume_frex h2 {
  font-size: 33px;
    margin-top: -0.6em;
    font-weight: bold;
    margin-bottom: 29px;
    top: -9px;
    right: 42%;
    position: relative;
    color: #ffffff;
    text-shadow: 2px 1px 11px #1f1f1f;
}
.osusume_frex h3 {
  text-align: justify;
  font-style: 1em;
  margin-bottom: 0.5em;
  font-weight: normal;
  margin-top: -19px;
}
.osusume_frex p {
  text-align: justify;
  line-height: 1.6em;
  white-space: normal;
  color: #535353;
  font-size: 95%;
}

/* FOOTER共通CSS */
.movie_voice_frex {
  display: flex;
  margin: 3em auto;
  width: 100%;
  height: auto;
  max-width: 1000px;
}
.movie_voice {
  width: 33%;
  padding: 0.5em;
  height: auto;
}
.movie_voice img {
  width: 300px;
  height: auto;
}
.movie_voice h3 {
  margin: 0.5em 0;
  font-weight: normal;
}
.movie_voice h4 {
  font-weight: normal;
}
.movie_voice p {
  line-height: 1.5em;
  text-align: justify;
  margin: 0.5em auto;
  padding: 0.2em;
  display: -webkit-box;
  overflow: hidden;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.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;
}
.fade {
  width: 100%;
  border: none;
  border-top: dashed 1px #333;
  margin: 1em auto;
}
.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;
}
.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: #658ba0;
  text-align: center;
  padding: 1em;
  width: 48%;
  margin: 0 1%;
  border-radius: 20px;
}
.form_under2 {
  background-color: #6ab366;
  text-align: center;
  padding: 1em;
  width: 48%;
  margin: 0 1%;
  border-radius: 20px;
}
.footer_unde_bana {
  width: 95%;
  max-width: 1000px;
  margin: 2em auto 0 auto;
}
.footer_unde_bana img {
  width: 47%;
  height: auto;
  margin: 1%;
}

.footer_unde_bana2 {
  width: 95%;
  max-width: 1000px;
  margin: 2em auto 0 auto;
}
.footer_unde_bana2 img {
  width: 30%;
  height: auto;
  margin: 1%;
}
.form_under1 a , .form_under2 a {color: white;}
.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: 4em auto;
      /* IE, Edge 対応 */
      -ms-overflow-style: none;
      /* Firefox 対応 */
      scrollbar-width: none;
    }
    .movie_voice {
      /* 横スクロール用 */
      display: inline-block;
      width: 100%;
      max-width: 320px;
      margin: 0.7em;
    }
    .movie_voice p {
      -webkit-line-clamp: 1;
    }
    .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;
    }
  }

.moo{
  background-color:white;
}
  /* カートページ　CSS */
  .cart_frex_main{
    display: flex;
    width: 95%;
    margin: 0 auto;
  }
  .cart_frexx {
    width: 60%;
    height: auto;
    padding: 1em;
  }
  .cart_frex2 {
    width: 40%;
    height: auto;
    padding: 1em;
  }
  .cart_flex{
    display: flex;
    width: 100%;
    height: auto;
    align-items: center;
    flex-wrap: wrap;
    margin: 1.5em auto;
  }
  .cart_img {
    width: 50%;
    padding: 0.5em;
    height: auto;
  }
  .cart_img img {width: 100%; height: auto;}
  .cart_text {
    width: 50%;
    height: auto;
    padding: 0.5em;
  }
  .cart_text p {
    line-height: 1.5em;
    text-align: justify;
  }
  .cart_text p span {
    color: rgb(126, 126, 126);
  }
  .cart_main{
    position: relative;
  }
  button.deleate_cart {
    background-color: #FFF;
    border: none;
    color: #818181;
    position: absolute;
    top: 1px;
    right: 1px;
  }
  .cart_frexx2 {
    width: 40%;
    height: auto;
    padding: 2em 1em;
    background-color: #e9e9e9;
    border-radius: 15px;
    line-height: 1.8em;
    position: relative;
  }
.cart_lavel{
  background: #7792b0;
  color: white;
  padding: 0.7em;
  margin: 0.5em 1em;
}
.cart_flex_ubder_select2 {
  width:45%;
  margin-right: auto;
  padding: 1em;
}
.cart_flex_ubder {
  display: flex;
}
select.cart_select {
  padding: 0.5em;
}
h2.cart_omitumori {
  font-weight: normal;
  font-size: 1.1em;
  margin-bottom: 1em;
  color: #485b6c;
}
.cart_under_next_zou{
  display: flex;
  width: 100%;
  max-width: 500px;
  justify-content: center;
  align-items: center;
  margin: 2em auto;
}
.cart_under_next_zou a{
  width: 100%;
  color: white;
  position: relative;
  filter: drop-shadow(3px 5px 6px rgba(0, 0, 0, 0.4));
}
.cart_under_next_zou a i{
  position: absolute;
  top: 24px;
  right: 30px;
}

.cart_under_next {
  display: flex;
  width: 95%;
  height: auto;
  max-width: 400px;
  margin: 2em auto;
}
.cart_under_next1,.cart_under_next_zou1{
  background-color: #a2b3ca;
  padding: 1.5em 0.2em;
  width: 46%;
  text-align: center;
  margin: 0 2%;
  font-size: 14px;
}
.cart_under_next2, .cart_under_next_dazou {
  background-color: #2ea59b;
  padding: 1.5em 0.2em;
  width: 46%;
  text-align: center;
  margin: 0 2%;
  font-size: 14px;
}
.cart_under_next_zou1, .cart_under_next_dazou{
  width: 95% !important;
  padding: 1.5em 0;
  font-size: 18px;
}

.cart_under_next2 a{
  width: 100%;
}
.cart_under_next1 a ,
.cart_under_next2 a {
  color: white;
}
h4.cart_sum{
  position: absolute;
  bottom: 0;
  bottom: 10px;
  right: 20px;
  font-weight: normal;
  font-size: 1.2em;
  color: #485b6c;
}
.cart_frexx2 p {
  color: #333;
  line-height: 2em 0;
  text-align: justify;
}
@media(max-width: 833px) {
  .cart_frex_main {
    display: block;
  }
  .cart_frexx {
    width: 100%;
    padding: 0;
    margin: 1em auto;
  }
  .cart_img{
    width: 62%;
    padding: 0;
  }
  .cart_text {
    width: 38%;
  }
  .cart_text p {
    font-size: 14px;
  }
  .cart_frexx2 {
    width: 100%;
    height: auto;
  }
  h2.cart_omitumori {
    margin-bottom: 0.5em
  }
  .cart_frexx2{
    padding: 1em;
  }
  h4.cart_sum{
    position: initial;
    margin: 1em auto;
    text-align: end;
  }
  .cart_frexx2 p {
    line-height: 1.5em;
  }
  .cart_under_next {
    width: 99%;
    font-size: 95%;
  }
  .cart_under_next_zou1, .cart_under_next_dazou{
    font-size: 15px;
  }

}








/* オーバーレイ */
.overlay {
  /* 位置を固定 */
  position: fixed;
  top: 0;
  left: 0;
  /* 画面いっぱいに広がるようにする */
  width: 100%;
  height: 100vh;
  /* rgbaを使って60%の黒いオーバーレイにする */
  background: rgba(0, 0, 0, 0.6);  
  /* デフォルトでは見えないようにする */
  opacity: 0;
  visibility: hidden;
  /* 表示する際の変化の所要時間 */
  transition: .3s;
}

/* activeクラスのついたオーバーレイ */
.overlay.active {
  /* activeクラスがついたときにオーバーレイを表示する */
  opacity: 1;
  visibility: visible;
}







/*モーダル本体の指定 + モーダル外側の背景の指定*/
.modal-container{
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-align: center;
	background: rgba(0,0,0,50%);
	padding: 40px 20px;
	overflow: auto;
	opacity: 0;
	visibility: hidden;
	transition: .3s;
  box-sizing: border-box;
}
/*モーダル本体の擬似要素の指定*/
.modal-container:before{
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: 100%;
}
/*モーダル本体に「active」クラス付与した時のスタイル*/
.modal-container.active{
	opacity: 1;
	visibility: visible;
}
/*モーダル枠の指定*/
.modal-body{
	position: relative;
	display: inline-block;
	vertical-align: middle;
	max-width: 500px;
	width: 90%;
}
/*モーダルを閉じるボタンの指定*/
.modal-close{
	position: absolute;
	display: flex;
  align-items: center;
  justify-content: center;
	top: -40px;
	right: -40px;
	width: 40px;
	height: 40px;
	font-size: 40px;
	color: #fff;
	cursor: pointer;
}
/*モーダル内のコンテンツの指定*/
.modal-content{
	background: #fff;
	text-align: left;
	padding: 30px;
  border-radius: 10px;
}
.cp_ipselect {
	overflow: hidden;
	width: 90%;
	margin: 1em auto;
	text-align: center;
}
.cp_ipselect select {
	width: 100%;
	padding-right: 1em;
	cursor: pointer;
	text-indent: 0.01px;
	text-overflow: ellipsis;
	border: none;
	outline: none;
	background: transparent;
	background-image: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.cp_ipselect select::-ms-expand {
    display: none;
}
.cp_ipselect.cp_sl01 {
	position: relative;
	border: 1px solid #bbbbbb;
	border-radius: 2px;
	background: #ffffff;
}
.cp_ipselect.cp_sl01::before {
	position: absolute;
	top: 0.8em;
	right: 0.9em;
	width: 0;
	height: 0;
	padding: 0;
	content: '';
	border-left: 6px solid transparent;
	border-right: 6px solid transparent;
	border-top: 6px solid #666666;
	pointer-events: none;
}
.cp_ipselect.cp_sl01 select {
	padding: 8px 38px 8px 8px;
	color: #666666;
}
.modal_text {
  padding: 11px 1.2em;
  background: #dbeeff;
  margin: 1em auto;
  width: 93%;
  color: #5b7891;
}
.modal_tyuui {
  text-align: center;
  font-size: 12px;
  color: #333;
  margin: 1em auto;
}
.no_cart {
  text-align: center;
}
.cart_no {
  width: 95%;
  max-width: 300px;
  text-align: center;
  background-color: #8aa3b8;
  padding: 1em;
  margin: 2em auto;
}
.cart_no a {color: white;}
.movie_list {
  margin: 0.5em auto;
}
.flash_message{
  text-align: center;
  margin: 1em auto;
  color: #333;
  line-height: 1.5em;
}


/* CART STORE PAGE CSS */


.cart_img_store {
  width: 100%;
  height: auto;
  padding: 0.2em;
  
}
.cart_img_store img {
  width: 100%;
  height: auto;
}
.cart_text_store {
  width: 100%;
  display: flex;
  padding: 1em;
  height: auto;
  padding: 0.2em;
  line-height: 1.4em;
}
.cart_text_store p {
  margin: 1%;
  font-size: 14px;
}
.cart_text_store p span {
  font-size: 80%;
  color: rgb(165, 165, 165);
}
.store_sum{
  line-height: 1.5em;
  text-align: center;
  background: #4e4e4e;
  color: white;
  padding: 1em;
  max-width: 350px;
  margin: 0 auto;
  z-index: 12;
}
.store_scedule {
  text-align: justify;
  line-height: 27px;
  padding: 1em 1.5em;
  font-size: 14px;
  margin: 1em auto;
  max-width: 500px;
}
.cart_store_flee {
  display: flex;
  width: 95%;
  max-width: 800px;
  margin: 1em auto;
  flex-wrap: wrap;
}
.cart_flex_store {
  width: 33%;
  padding: 0.2em;
}
  @media(max-width: 630px) {
    .cart_flex_store{
      display: block;
      width: 50%;
    }
    .cart_text_store {
      display: block;
      line-height: 22px;
      font-size: 14px;
    }
    .cart_text_store p {
      padding: 0.1em;
      display: flex;
    }
    .cart_text_store p span{
      padding: 0 0.2em;
      margin-right: 5px;
    }
    .store_sum{
      position: fixed; /* 要素の位置を固定する */
      bottom: 0; /* 基準の位置を画面の一番下に指定する */
      right: 0; /* 基準の位置を画面の一番右に指定する */
      width: 100%;
      max-width: 1000px;
    }
  }


/* カートSTORECSS */
input.date_cart {
    width: 100%;
    height: auto;
    border: 1px solid #ccc;
    padding: 1em;
}
input {
  border: 1px solid #ccc;
}
input.zip_cart {
  width: 50% !important;
  height: auto;
  max-width: 200px;
}
textarea {
  border: 1px solid #ccc;
}
select {
  width: 100%;
  height: auto;
  padding: 0.7em;
  border: 1px solid #ccc;
}



/* THNAKS PAGE */
.siryou {
  width: 95%;
  margin: 1em auto;
  line-height: 1.5em;
  height: auto;
  max-width: 1000px;
  text-align: justify;
}
.siryou p span {
  color: #67719b;
  font-size: 1.1em;
  font-family: serif;
}
.line_thanks {
  margin: 1em auto;
  text-align: center;
}



/* クーポン適用CSS */
.cart_botan {
  width: 71%;
  margin: 1em 0 1em 0;
  padding: 1em 0.5em;
}
input.couppon{
  padding: 1em;
  border: 1px solid #ccc;
  width: 48%;
}
button.couppon_botan {
  padding: 0.85em;
  margin: 0;
  border: 1px solid #ccc;
  width: 50%;
  color: black;
}
.sheare_botan {
  margin: 1.5em auto;
  width: 99%;
  padding: 1em;
  border: solid 1px #ccc;
  color: black;
}
.cart_botan p {
  color: #333;
  font-size: 14px;
}
  @media(max-width: 830px) {
    .cart_botan {
      width: 90%;
      margin: 1em auto;
    }
  }
  @media(max-width: 630px) {
    .cart_botan {
      width: 98%;
    }
  }

.index_top_campain{
  text-align: center;
  font-size: 13px;
  margin: 0 auto 0.5em auto;
  height: auto;
  width: 100%;
  line-height: 1.5em;
  background-color: #dee6e9;
  padding: 0.5em 0;
  color: #1e1e1e;
  display: block;
}
.index_top_campain a{
  color: #1e1e1e;
}

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

.box_pub {
  background-color: #5a91be;
  color: white;
  width: 100%;
  max-width: 400px;
  padding: 1em;
  margin: 1em auto;
  text-align: center;
}
.box_pub a {
  color: white;
}

.fadeIn {
  transition: 1s;
  opacity: 0;
}

.fadeIn.animated {
  opacity: 1;
}

.group_wari {
  line-height: 1.5em;
  margin: 1em 0;
  font-size: 15px;
}

p.movie_op1 {
  margin-top: 0.4em;
  padding-left: 1em;
  font-size:13px;
  color: gray;
}
p.movie_op_cart{
  margin-top: 0.4em;
  padding-left: 7px;
  font-size:11px;
  color: gray;
  margin: 11px 0;
  text-align: left;
}
.couppon_error {
  margin: 0.9em auto;
  padding-left: 0.2em;
}

ul.mutio li:nth-of-type(n+1){ display: none; }
ul.mutio2 li:nth-of-type(n+1){ display: none; }
ul.mutio3 li:nth-of-type(n+1){ display: none; }

.send_img_mitumori {
  width: 100%;
  height: auto;
  margin: 1em auto;
  max-width: 400px;
}
.send_img_mitumori img {
  width: 100%;
  height: auto;
}

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



.nouhin_main {
  width: 95%;
  max-width: 500px;
  margin: 1em auto;
  border-radius: 30px;
  box-shadow: 0 0 7px rgb(0 0 0 / 20%);
  padding: 1.5em;
  line-height: 1.5em;
}
.nouhin_fre{
  display: flex;
  align-items: center;
  margin: 1em auto;
  justify-content: center;
}
.nouhin, .nouhin2 {
  background: #82b9a4;
  color: white;
  padding: 0.5em;
  text-align: center;
  width: 100%;
  max-width: 100px;
}
.nouhin2{
  background-color: #cdaaab;
}
.nouihn_an{
  margin: 0 1em;
}

.sentaku{
  width: 95%;
  max-width: 500px;
  margin: 2em auto;
}
.sentaku_in {
  display: flex;
  justify-content: center;
  align-items: center;
  line-height: 1.5em;
}
.sentaku_in img {
  width: 50%;
  height: auto;
}
.sentaku_in p{
  width: 45%;
  margin-left: 5%;
  color: #303030;
}
.sentaku_in p span{
  font-size: 13px;
  color: #969696;
}
.sum{
  background-color: #9dabe3;
  color: white;
  text-align: center;
  max-width: 500px;
  width: 95%;
  padding: 1em;
  margin: 1em auto;
}
.setu {
  text-align: center;
  color: #303030;
  margin: 2em auto;
  line-height: 1.5em;
}
p.seisaku{
  text-align: center;
  line-height: 2em;
}
p.seisaku span {
  font-size: 12px;
  color: #333;
}

select {
  -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: 1px solid #ccc;
    background: #fafafa;
    font-size: 90%;
}
input[type="date"]{
  -webkit-appearance: none;
  border: 1px solid #ccc;
  background: #fafafa;
  font-size: 90%;
}
input[type="text"]{
  border: 1px solid #ccc;
  background: #fafafa;
  font-size: 90%;
}

.syurui {
  text-align: center;
  color: #303030;
  font-size: 14px;
}
.syurui h2 {
  font-weight: normal;
}


.pub_movie_main{
  overflow-x: scroll;
  padding: 10px;
  max-width: 1000px;
  margin: 1em auto;
  width: 100%;
  display: flex;
  -webkit-overflow-scrolling: touch; /* Lets it scroll lazy */
}
.pub_movie>div{
  /*コレ*/width: 700px;
  display: flex;
  margin: 1.5em 0.5em;
}
.pub_movie p {
  text-align: center;
  margin: 0.5em auto;
}

@media(max-width: 700px) {
  .pub_movie>div{
    width: 300px;
  }
}


.plan_muryou{
  color: #2e6ca5;
  text-align: center;
  line-height: 1.3em;
}
.plan_muryou_under {
  color: #474747;
  text-align: center;
  font-size: 14px;
  margin: 1em auto;
  line-height: 1.2em;
}

.present{
  margin: 1em auto;
  text-align: center;
  line-height: 1.5em;
  color: white;
  max-width: 530px;
  width: 98%;
  background-color: #2e6ca594;
  padding: 0.5em;
  border-radius: 5px;
}
p.present_memo{
  text-align: center;
  font-size: 14px;
  color: #333;
  max-width: 530px;
  margin: 0.5em auto;
  width: 98%;
  line-height: 1.5em;
}
.store_present{
  color: #333;
  font-size: 12px;
}
.plan_muryou_img{
  max-width: 700px;
  width: 95%;
  margin: 1em auto;
}
.plan_muryou_img img {
  width: 100%;
  height: auto;
}
@media(max-width: 530px) {
  .present{
    max-width: 303px;
    padding: 1em;
  }
  p.present_memo{
    max-width: 258px;
  }
}


.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;
}

.estima_sell{
  text-align: center;
  line-height: 1.5em;
  background-color: #fff0f0;
  padding: 1em;
  max-width: 500px;
  width: 95%;
  border-radius: 5px;
  margin: 1em auto;
}
.estima_sell h3 {
  color: rgb(245, 107, 107);
  font-weight: normal;
}
.estima_sell p {
  color: #333333;
  font-size: 11px;
}

.coram_line{
  width: 95%;
  max-width: 700px;
  margin: 1em auto;
}
.coram_line p {
  text-align: center;
  margin: 1em auto;
  color: #283462;
  font-size: 15px;
}
.coram_line img {
  width: 100%;
  height: auto;
}
.cam_cam2{
  max-width: 800px;
  height: auto;
  width: 95%;
  margin: 1em auto;
  line-height: 1.5em;
}
/* 要素に動きを出すCSS */

.js-animation {
  opacity: 0;
  visibility: hidden;
  transform: translateY(40px);
  transition: all 1s;
}
.js-animation.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}


/* レビューCSS */
.star5_rating{
  position: relative;
  z-index: 0;
  font-size: 21px;
  display: inline-block;
  white-space: nowrap;
  color: #CCCCCC; /* グレーカラー 自由に設定化 */
  /*font-size: 30px; フォントサイズ 自由に設定化 */
}

.star5_rating:before, .star5_rating:after{
  content: '★★★★★';
}

.star5_rating:after{
  position: absolute;
  z-index: 1;
  top: 0;
  left: 0;
  overflow: hidden;
  white-space: nowrap;
  color: #ffcf32; /* イエローカラー 自由に設定化 */
}

.star5_rating[data-rate="5"]:after{ width: 100%; } /* 星5 */
.star5_rating[data-rate="4.9"]:after{ width: 100%; } /* 星5 */
.star5_rating[data-rate="4.8"]:after{ width: 100%; } /* 星5 */
.star5_rating[data-rate="4.7"]:after{ width: 100%; } /* 星5 */
.star5_rating[data-rate="4.6"]:after{ width: 100%; } /* 星5 */
.star5_rating[data-rate="4.5"]:after{ width: 90%; } /* 星4.5 */
.star5_rating[data-rate="4.4"]:after{ width: 90%; } /* 星4.5 */
.star5_rating[data-rate="4.2"]:after{ width: 90%; } /* 星4.5 */
.star5_rating[data-rate="4.3"]:after{ width: 90%; } /* 星4.5 */
.star5_rating[data-rate="4.1"]:after{ width: 90%; } /* 星4.5 */
.star5_rating[data-rate="4"]:after{ width: 80%; } /* 星4 */
.star5_rating[data-rate="3.9"]:after{ width: 80%; } /* 星4 */
.star5_rating[data-rate="3.8"]:after{ width: 80%; } /* 星4 */
.star5_rating[data-rate="3.7"]:after{ width: 80%; } /* 星4 */
.star5_rating[data-rate="3.6"]:after{ width: 80%; } /* 星4 */
.star5_rating[data-rate="3.5"]:after{ width: 80%; } /* 星4 */
.star5_rating[data-rate="3.4"]:after{ width: 60%; } /* 星3.5 */
.star5_rating[data-rate="3.3"]:after{ width: 60%; } /* 星3.5 */
.star5_rating[data-rate="3.2"]:after{ width: 60%; } /* 星3.5 */
.star5_rating[data-rate="3.1"]:after{ width: 60%; } /* 星3.5 */
.star5_rating[data-rate="3"]:after{ width: 60%; } /* 星3 */
.star5_rating[data-rate="2.5"]:after{ width: 50%; } /* 星2.5 */
.star5_rating[data-rate="2"]:after{ width: 40%; } /* 星2 */
.star5_rating[data-rate="1.5"]:after{ width: 30%; } /* 星1.5 */
.star5_rating[data-rate="1"]:after{ width: 20%; } /* 星1 */
.star5_rating[data-rate="0.5"]:after{ width: 10%; } /* 星0.5 */
.star5_rating[data-rate="0"]:after{ width: 0%; } /* 星0 */

.review{
  margin: 1em auto;
  text-align: center;
}
.review p span2{
 color: rgb(72, 114, 177);
 font-size: 13px;
}
.review div {
  font-size: 12px;
  margin: 0.7em auto;
  color: #747474;
}
.revi_movie{
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 2em auto;
  height: auto;
  max-width: 550px;
  box-shadow: 0 0 6px grey;
  border-radius: 15px 15px 10px 10px;
}
.revi_movie>div{
  width: 50%;
  height: auto;
}
.revi_movie>div>img{
  width: 100%;
  height: auto;
  border-radius: 15px 0px 0px 10px;
}
.revi_movie>div>p{
  padding: 1em;
  line-height: 1.5em;
}
.revi_movie>div>p>span{
  font-size: 15px;
  color: gray;
}
.revie_aicon{
  display: flex;
  margin: 1em auto;
  justify-content: center;
  align-items: center;
}
.revie_aicon>div{
  width: 50%;
  text-align: center;
  height: auto;
}
.revie_aicon>div>h3{
  text-align: left;
  margin: 0.5em auto;
}
.revie_aicon>div>h3>span{
  font-size: 15px;
  font-weight: normal;
}
.revie_aicon>div>p {
  text-align: left;
  color: gray;
  font-size: 13px;
}
.revie_aicon img {
  width: 50%;
  text-align: center;
  height: auto;
}
.review_star{
  text-align: center;
  font-size: 18px;
  margin-bottom: 1em;
}
.review_star>h2{
  color: #f5673c;
  font-size: 1.2em;
  margin: 0 0.1em;
}
.review_star{
  display: flex;
  align-items: center;
  justify-content: center;
}
p.kounyuu_review{
  margin: 0.5em auto;
  color: gray;
  font-size: 14px;
}
.review_text{
  text-align: justify;
  line-height: 1.6em;
  padding: 0.3em;
}
.review_main{
  max-width: 500px;
  width: 95%;
  margin: 1em auto;
  padding: 2em 0;
  border-bottom: solid 1px #6d6d6d;
}
.max_300px{
  display: block;
  width: 100px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.review_index{
  display: flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0.5em;
}
.review_index h2{
  font-size: 13px;
  font-weight: normal;
  color: gray;
  margin-left: 2px;
}
.review_index2{height: 37px; width: 100%;}

@media(max-width: 530px) {
  .review_index2{height: 0;}
}


.wedding_movie{
  width: 100%;
  max-width: 723px;
  height: auto;
  line-height: 1.5rem;
  margin: 0 auto 1em auto;
  padding: 1em;
  border-radius: 10px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  color: white;
}
.wedding_movie h1, .wedding_movie_ra h1{
  text-align: center;
  font-family: serif;
  font-weight: normal;
  margin: 1em auto;
}
.wedding_movie h2 , .wedding_movie h2{
  width: 100%;
  text-align: justify;
  font-size: 16px;
  font-weight: normal;
  line-height: 1.8em;
  color: white;
}
.wedding_movie p, .wedding_movie_ra p{
  text-align: justify;
  line-height: 1.7em;
  font-size: 15px;
  color: #333;
}
.wedding_movie_ra{
  background-color: #c8e0dd;
  padding: 1em;
  width: 100%;
  height: auto;
  line-height: 1.5rem;
  margin: 0 auto;
  padding:3em 1em 6em 1em;
}
.wedding_movie_ra div{
  width: 100%;
  height: auto;
  max-width: 700px;
  background-color: white;
  border-radius: 15px;
  margin: 0 auto;
  padding: 1.5em 0.5em;
}
.wedding_movie_ra i{
  text-align: center;
    font-size: 44px;
    display: flex;
    align-content: center;
    justify-content: center;
    align-items: center;
    margin-bottom: -10px;
    margin-top: -11px;
    color: #c8e0dd;
}

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

.wedding_movie_bg {
  background-size: cover;
  background-position: top;
  height: 500px;
  margin: 0 auto;
  position: relative;
}
.wedding_movie h1{
  font-size: 20px;
  font-weight: bold;
}
.wedding_movie h2{
  text-align: center;
}
.othe_tit{
  position: absolute;
  bottom: -45px;
  left: 50%;
  transform: translate(-70%, 0%);
  width: auto;
  background-color: white;
  color: #333;
  line-height: 2em;
  padding: 2em ;
  opacity: 0.9;
}
.othe_tit h2{
  font-size:17px;
  font-weight: normal;
}
.othe_tit h2 span{
  font-weight: bold;
  color: rgb(236, 67, 67);
  font-size: 25px;
}
.othe_tit h2 span2{
  font-size: 20px;
  color: rgb(236, 67, 67);
}
.othe_tit p{
  color: #4d4a4a;
  font-size: 15px;
  margin: 0.5em auto;
  line-height: 1.6em;
}
.bg_fr{
    width: 100%;
    background-color: #fcf9f3;
    padding-top: 107px;
    margin-top: -83px;
    padding-bottom: 20px;
}
.movie_ryoukin_in{
  width: 90%;
  height: auto;
  max-width: 500px;
  background-color: #f7fcff;
  position: absolute;
  top: 100%;         /* 上から50% */
  left: 50%;        /* 左から50% */
  transform: translate(-50%, -50%); /* 完全な中央に移動 */
}
.movie_ryoukin_in_whit{
  background-color: white;
  width: 95%;
  padding: 1%;
  margin: 2.5%;
}
@media(max-width: 1000px) {
  .wedding_movie_bg {
    height: 400px;
  }
  .othe_tit{
    left: 0;  /* 左端に固定 */
    transform: translate(0, 21%);  /* 横方向の調整をなしにして、縦方向だけ調整 */
    width: 90%;
  }
  .bg_fr{
    padding-top: 140px;
  }
}
@media(max-width: 700px) {
  .wedding_movie_bg {
    height: 300px;
  }
  .wedding_movie h2 , .wedding_movie h2{
    font-size: 14px
  }
  .wedding_movie h2{
    text-align: justify
  }
  .wedding_movie h1{
    font-size: 17px;
  }
  .movie_ryoukin_in{
    top: 110%;         /* 上から50% */
  }
}
@import url('https://fonts.googleapis.com/css2?family=Josefin+Sans:wght@300;400&display=swap');

.scroll_down{
  position:absolute;
  bottom:1%;
  right:50%;
  animation: arrowmove 2s ease-in-out infinite;
}

.scroll_down a{
  position: absolute;
  left: -19px;
  bottom: 6px;
  color: #ffffff;
  font-size: 9px;
  font-family: 'Josefin Sans', sans-serif;
  letter-spacing: .2em;
  writing-mode: vertical-rl;
  text-decoration: none;
  text-transform: uppercase;
}

.scroll_down:before {
    content: "";
    position: absolute;
    bottom: 5px;
    right: -6px;
    width: 2px;
    height: 20px;
    background: #ffffff;
    transform: skewX(-31deg);
}

.scroll_down:after{
  content:"";
  position: absolute;
  bottom: 5px;
  right: 0;
  width: 2px;
  height: 47px;
  background:#ffffff;
}

@keyframes arrowmove{
   0%{bottom:1%;}
   50%{bottom:4%;}
   00%{bottom:1%;}
}


.slider_main_movie img {
  width: 100%;
  height: auto;
}
.word-break {
  word-break: break-all;
}
.slider_main_movie>div>div>h3{
  margin: 0.5em 0;
  padding: 0 8px;
  font-weight: normal;
}
.slider_main_movie>div>div>p{
  line-height: 1.2rem;
  font-size: 14px;
  color: #303030;
  width: 95%;
  margin: 0 auto;
}

@media(max-width: 1025px) {
  .frex_movie2, .horizontal-items, .slider_main_movie {
    overflow-x: scroll;
  }
  .item {
    width: 100%;
    margin: 2em auto;
  }
  .slider_main_movie>div>div{
  width: 300px;
  }
  .slider_main_movie>div{
    width: 100%;
    margin: 1em 1% 2em 1%;
  }
}


.flow_main_bac{
  background-color: #dee8f1;
  width: 100%;
  height: auto;
  padding: 2em;
}
.flow_main_bac_in {
  max-width: 900px;
  height: auto;
  display: flex;
  flex-wrap: wrap;
  margin: 1em auto;
}
.flow_main_bac_in>div{
  width: 32%;
  margin: 1% 0.5%;
  background-color: white;
  border-radius: 10px;
  text-align: center;
  padding: 1em;
  max-width: 370px;
  height: auto;
}
.flow_main_bac_in>div h2{
  font-weight: normal;
  font-size: 15px;
  margin: 1em auto;
  line-height: 1.5em;
}
.flow_main_bac_in>div h2 span{
  color: #ababab;
  margin: 0.5em 0;
}
.flow_main_bac_in>div h3 {
  font-size: 12px;
  margin: 1em auto;
  border: solid 1px #7690a8;
  width: 150px;
  border-radius: 10px;
  padding: 0.5em;
  font-weight: normal;
  bottom: 2px;
  right: 11px;
  color: #7690a8;
}
.flow_main_bac_in>div p{
  margin-bottom: 2em;
  margin-top: 2em;
  padding: 0.5em;
  line-height: 1.4em;
  text-align: justify;
  font-size: 15px;
  color: #3d3d3d;
}

@media(max-width: 860px){
  .flow_main_bac_in>div{
    width: 49%;
  }
}
@media(max-width: 600px){
  .flow_main_bac_in>div{
    width: 100%;
    margin: 1em auto;
  }
  .flow_main_bac{
    padding: 1em;
  }
}

.mou_flow_bow{
  text-align: center;
  background-color: #0ad09e;
  padding: 1.5em;
  border-radius: 10px;
  width: auto;
  max-width: 200px;
  margin: 1em auto;
}
.mou_flow_bow a {
  color: white;
}
.mou_flow{
  width: 95%;
  max-width: 600px;
  text-align: justify;
  line-height: 1.4em;
  margin: 1em auto;
  color: #303030;
}

.sakusei_sc{
  width: 95%;
  max-width: 500px;
  background-color: #6998bb;
  text-align: center;
  color: white;
  padding: 1em;
  margin: 1em auto;
}


.tyosakuken_movie{
  text-align: center;
  font-size: 13px;
  margin: 1em auto;
  width: 95%;
  max-width: 500px;
  line-height: 1.6em;
  color: gray;
}

.review_first{
  width: 95%;
  max-width: 1000px;
  margin: 1em auto;
  line-height: 1.6em;
  border-top: solid 1px #dbdbdb;
  padding: 2em 0;
}
.review_first div {
  margin: 0em 10px 0px 0;
  font-size: 12px;
}
.review_first h2 {
  color: #79aaa5;
  margin-bottom: 0.2em;
  font-size: 11px;
}
.review_first p span.format{
  font-size: 12px;
  color: #303030;
  margin-right: 5px;
}
.review_first h5 {
  font-weight: normal;
  text-align: justify;
  margin: 0.5em auto;
  font-size: 15px;
}

.review_first_fle{
  display: flex;
  align-items: center;
}
.review_under{
  text-align: center;
  color: #a39c9c;
  border: solid 1px #b6b6b6;
  border-radius: 20px;
  padding: 1em;
  margin: 1em auto;
  width: 220px;
  font-size: 16px;
}
.review_under a{
  color: #747373;
}

.syumiresyon{
  max-width: 750px;
  width: 98%;
  height: auto;
  margin: 2em auto;
  line-height: 1.7em;
}
.syumiresyon p span{
  color: #fa7979;
  font-size: 90%;
}
.syumiresyon h4 {
  margin: 0.5em 0;
}

.waribiki_estimate{
  text-align: center;
  color: red;
  margin: 1em auto;
}
.waribiki_estimate p span {
  color: #220001;
  font-size: 80%;
}



/* 診断ページ */
.dia_title {
  text-align: center;
  max-width: 385px;
  height: auto;
  line-height: 1.5rem;
  margin: 1em auto;
  width: 99%;
}
.dia_main_box{
  margin: 1em auto;
  width: 100%;
  padding: 5em 1em;
}
.dia_box{
  background-color: #66b8a4;
  padding: 1.5em 1em;
  margin: 1em auto;
  max-width: 300px;
  width: 95%;
  height: auto;
  position: relative;
  text-align: center;
  border-radius: 8px;
  font-size: 1.1rem;
}
.dia_box a{color: white;}
.dia_box p i {
  position: absolute;
  top: 27px;
  right: 24px;
}
.dia_under {
  text-align: center;
  font-size: 90%;
  color: #6d6d6d;
  margin-bottom: 2em;
  line-height: 1.5em;
}
@media(max-width: 800px){
  .dia_main_box{
    padding: 1em;
  }
}
@media(max-width: 400px){
  .dia_title {
    font-size: 85%;
  }
}

.progressbar {
  display: flex;
  flex-wrap: wrap;
  max-width: 987px;
  margin: 1em auto;
}
.progressbar .item {
    position: relative;
    width: 33%;
    text-align: center;
    position: relative;
    align-items: center;
    justify-content: center;
    padding: 13px 0;
    line-height: 1.5;
    background: #F5F5F5;
    color: #999999;
}
.progressbar .item:not(:last-child)::before,
.progressbar .item:not(:last-child)::after {
    position: absolute;
    z-index: 2;
    top: 0;
    bottom: 0;
    left: 100%;
    content: '';
    border: 37px solid transparent;
    border-left: 20px solid #F5F5F5;
    margin: auto;
}
.progressbar .item:not(:last-child)::before {
    margin-left: 1px;
    border-left-color: #FFF;
}

@media screen and (max-width: 767px) {
.progressbar .item {
    font-size: 11px;
    line-height: 1.4;
    padding: 10px 0;
}
.progressbar .item:not(:last-child)::before,
.progressbar .item:not(:last-child)::after {
    border-width: 25px;
    border-left-width: 12px;
}
}

/* active */

.progressbar .item.active {
    z-index: 1;
    background: #0070BD;
    color: #FFF;
}
.progressbar .item.active:not(:last-child)::after {
    border-left-color: #0070bd;
}
.progressbar .item.active:not(:last-child)::before {
    border-left: none;
}

.di_titl{
  text-align: center;
  margin: 1em auto;
  font-size: 1.1rem;
  color: #307a68;
}

.dl_movie_fre {
  display: flex;
  margin: 1em auto;
  width: 95%;
  height: auto;
  flex-wrap: wrap;
  max-width: 1165px;
}
.dl_movie_fre h2{
  font-weight: normal;
  margin: 1em auto 0.5em auto;
}
.dl_movie_fre h2 span{
  font-size: 90%;
  margin-left: 1em;
}
.dl_movie_fre h3{
  font-size: 90%;
  font-weight: normal;
  text-align: end;
  margin: 1em auto;
}
.dl_movie_fre div {
  width: 31%;
  margin: 1%;
}
.dl_movie_fre div img {
  width: 100%;
  height: auto;
}
.dl_movie_fre a {
  color: black;
}

.dl_movie_fre div h5{
  background: #dfecf3;
  text-align: center;
  padding: 0.5em;
  border: solid 1px #cadae3;
  border-radius: 6px;
  margin: 0.5em 0 0 auto;
  width: 60%;
  font-weight: normal;
  margin: 1em 0 1em auto;
}
.box_log {
  width: 100%;
  height: auto;
  padding: 1em;
  max-width: 263px;
  background: #58ce98;
  margin: 2em auto;
  border: solid 1px #739f8b;
  border-radius: 8px;
  text-align: center;
  position: relative;
}
.box_log i {
  position: absolute;
  top: 27px;
  right: 36px;
}
.box_log a{
  color: white;
}
.may_dd{
  max-width: 948px;
  width: 95%;
  line-height: 1.7em;
  height: auto;
  margin: 1em auto;
}
.tuuzyou{
  text-align: center;
  font-weight: normal;
  line-height: 1.5em;
}
.tuuzyou h3 {
  font-weight: normal;
}
.sale_re {
  text-align: center;
  color: red;
  margin: 2em auto;
  line-height: 1.5em;
}
.movi_frel{
  display: flex;
  width: 100%;
  height: auto;
  padding: 0.3em;
  justify-content: flex-end;
  align-items: center;
}
.movi_frel div {
  margin: 0 9px;
  color: #757575;
  font-size: 11px;
  background-color: #e6e6e6;
  padding: 3px 10px;
}
.movi_frel div span{
  padding-left: 5px;
}
.movie_fret{
  display: flex;
  width: 100%;
  height: auto;
  margin: 1em 0 1em auto;
  justify-content: center;
  align-items: center;
}

.movie_fret div {
  margin: 1%;
  width: 31%;
  border: solid 1px #0070BD;
  border-radius: 5px;
  text-align: center;
  padding: 0.4em;
}
.movie_fret .one{
  font-size: 73%;
  background-color: #b2cbda;
  border: solid 1px #a2b7c6;
  text-align: center;
  color: white;
  border-radius: 0;
  line-height: 1.2em;
}

.movie_fret .two{
  color: #75ce65;
  border: solid 1px #75ce65;
  font-size: 13px;
}
.movie_fret .tree{
  color: #e48589;
  border: solid 1px #e48589;
  font-size: 13px;
}
.movie_fret .for{
  color: #75abce;
  border: solid 1px #75abce;
  font-size: 13px;
}
.movie_fret .five{
  color: #898989;
  border: solid 1px #898989;
  font-size: 13px;
}

p.publish_in{
  font-size: 12px;
}
a p.publish_in  {
  color: #303030;
}

.pub_title{
  text-align: center;
  margin: 3em auto;
}
.pub_title h2 {
  font-weight: normal;
}
.pub_fre{
  width: 98%;
  max-width: 800px;
  margin: 0 auto 10em auto;
  height: auto;
  flex-wrap: wrap;
}
.pub_fre div {
  width: 100%;
  margin: 1%;
}
p.center_buv{
  text-align: center;
  margin: 1em auto;
}
a p.center_buv{
  color: #303030;
}

.wish_hensin{
  max-width: 800px;
  width: 95%;
  height: auto;
  margin: 2em auto;
  padding: 2em;
  background-color: #ddf1ff;
  border-radius: 5px;
  line-height: 1.7em;
}
.wish_hensin h5 {
  font-weight: normal;
  font-size: 17px;
  margin: 0.5em auto;
}
.voice_fre{
  display: flex;
  width: 100%;
  max-width: 800px;
  margin: 0 auto 10em auto;
  height: auto;
  flex-wrap: wrap;
}
.voice_fre div{
  width: 31%;
  margin: 1%;
}
.voice_fre div img{
  width: 100%;
  height: auto;
}
.voice_fre div p {
  margin: 1em auto;
  font-size: 11px;
  text-align: center;
}
.voice_fre div a {
  color: #303030;
}
.migi{
  text-align: end;
  font-size: 13px;
  margin-top: 1em;
}
.migi a{
  color: #303030;
}
.bacc_to{
  background-color: #fdffef;
  padding: 2em 1em;
}
.movie_rank {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  width: 95%;
  margin: 2em auto;
  padding: 19px 2em;
  border: none;
  border-radius: 5px;
  box-shadow: 0 4px 6px rgb(0 0 0 / 10%);
  background-color: #fff;
  color: #333;
  font-size: 1em;
  transition: transform .3s, box-shadow .3s;
  border-top: solid 1px #e2e2e2;
  border-right: solid 1px #e2e2e2;
  border-left: solid 1px #e2e2e2;
  max-width: 400px;
}

.movie_rank:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 10px rgb(0 0 0 / 15%);
}
.movie_rank i {
  position: absolute;
  top: 19px;
  right: 14px;
}
.movie_rank a{
  color: rgb(0, 0, 0);
}
p.movie_link_hyouki{
  text-align: right;
  font-size: 11px;
  margin: 0.5em 0;
  color: rgb(129, 129, 129);
}
@media screen and (max-width: 767px) {
  .dl_movie_fre div {
    width: 98%;
  }
  .dl_movie_fre div h5{
    width: 100%;
  }
  .voice_fre div{
    width: 48%;
  }
}
@media screen and (max-width: 355px) {
  .movie_fret .one{
    font-size: 11px;
  }
}
@media screen and (max-width: 330px) {
  .movie_rank{
    font-size: 14px;
  }
  .item11{
    max-width: 266px;
  }
  .states1, .states2, .states3{
    padding: 0.1em;
  }
  .movie_voice img{
    width: 230px;
  }
}
.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;}
.type_flex{
  display: flex;
  width: 100%;
  margin: 0 auto 1em auto;
  max-width: 500px;
  justify-content: center;
  align-items: center;
}
.type_flex div {
  background-color: #9c9c9c;
  border: solid 1px #868686;
  color: white;
  margin: 1%;
  padding: 0.5em 1em;
  font-size: 12.5px;
}

h6.sakusei_movie_show{
  text-align: end;
    padding: 9px 0em;
    font-size: 14px;
    font-weight: normal;
    color: #4d4d4d;
    max-width: 185px;
    border-bottom: solid 1px #bcbcbc;
    margin: 0 1em 0 auto;
}

.review_fre_ma{
  display: flex;
  justify-content: center;
  align-items: center;
}
.review_fre_ma div h2{
  font-family: serif;
  font-weight: normal;
  font-size: 2.5em;
  margin-right: 10px;
}
.review_fre_ma div h5{
  font-weight: normal;
  font-size: 13px;
  margin-left: 5px;
}
.pop_movie_voice_main{
  max-width: 1000px;
  width: 98%;
  margin: 1em auto;
  height: auto;

}
.pop_movie_voice_main img{
  width: 100%;
  height: auto;
}
.pop_movie_voice_in_fre {
  display: flex;
  margin: 2em auto;
  background-color: white;
  border-radius: 10px;
  padding: 1.5em;
}
.pop_movie_voice_in_fre h2{
 font-weight: normal;
 font-size: 12px;
 color: #808080;
}
.pop_movie_voice_in_fre h3{
  font-weight: normal;
  margin: 0.5em 0;
}
.pop_movie_voice_in_fre p{
  line-height: 1.7em;
  color: #414141;
  text-align: justify;
  font-size: 14px;
}
.img_pop{
  width: 40%;
}
.bac_voi{
  background-color: #ebf7f5;
  padding: 4px 0 2.5em 0;
  margin: 2em auto;
}
.moji_pop{
  width: 52%;
  margin: auto;
}
.pop_movie_voice_in_fre h4 span{
  font-size: 10px;
  color: #63553d;
}
.pop_movie_voice_in_fre h4 {
  font-size: 13px;
  line-height: 1.5em;
  margin: 0 0 1.2em 0;
  font-weight: normal;
}
.pop_movie_voice_in_fre h4 a{
  color: rgb(87, 87, 87);
}

@media screen and (max-width: 900px) {
  .pop_movie_voice_in_fre {
    display: block;
  }
  .moji_pop{
    width: 98%;
    margin: 6px auto;
  }
  .img_pop{
    width: 100%;
    margin: 1% 1% 1em 1%;
  }
  .pop_movie_voice_in_fre{
    padding: 1em;
  }
}

.under_menu_movie{
  background-color: #749eb5;
}
.under_menu_movie img{
  width: 32px;
  height: auto;
}
.unde_menu_movie_fre{
  display: flex;
}
.unde_menu_movie_fre>div{
  text-align: center;
  width: 25%;
}
.unde_menu_movie_fre>div>a{
  margin: 6px 0;
  font-size: 11px;
  color: white;
}
.unde_menu_movie_fre>div{
  margin: 6px 0;
  line-height: 1.2em;
  border-left: 1px solid white;
  padding: 2px 0;
}
.new_botan{
  border-radius: 0px !important;
  width: 44%;
  height: auto;
  position: relative;
}

.unde_fre{
  display: flex;
  border-top: 1px solid white;
   /* 子要素のはみ出し防止 */
   overflow: hidden;
   width: 100%;
   box-sizing: border-box;
}

.new_botan button{
  background-color: #2ea59b;
  padding: 1.3em 0;
  color: white;
  border: none;
  text-align: center;
  font-size: 14px;
  width: 100%;
  height: 100%;
  filter: drop-shadow(3px 5px 6px rgba(0, 0, 0, 0.4));
}.movie_fre_in_name{
  text-align: left;
  background-color: #749eb5;
  color: white;
  width: 40%;
  padding-top: 10px;
  padding-left: 11px;
  font-size: 13px;
  line-height: 1.5em;
}
#page_top a::before{
  font-family: 'Font Awesome 5 Free';
  font-weight: 900;
  content: '\f102';
  font-size: 25px;
  color: #749eb5;
  position: absolute;
  width: 25px;
  height: 25px;
  top: -40px;
  bottom: 146px;
  right: 19px;
  left: auto;
  margin: auto;
  text-align: center;
}
#page_top a::after{
  content: 'PAGE TOP';
  font-size: 13px;
  color: #fff;
  position: absolute;
  top: -15px;
  bottom: 93px;
  right: 3px;
  left: auto;
  margin: auto;
  text-align: center;
  color: #749eb5;
}
.question_movie_koko{
  width:95%;
  max-width: 800px;
  margin: 1em auto;
  background-color: white;
  border-radius: 10px;
  padding:2em 1em;
  font-weight: normal;
}
.question_movie_koko span{
  font-family: serif;
  margin-right: 5px;
}
.question_movie_koko div h2{
  font-size: 15px;
  font-weight: normal;
  margin-bottom: 20px;
}
.question_movie_koko div h3{
  font-weight: normal;
  line-height: 1.6em;
  color: #5a5a5a;
  font-size: 14px;
}
.question_movie_koko div h3 span{
  color: #c3a66c;
}



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

/* 見出しのデザイン */
.seo_title {
  margin-bottom: 1em;
  font-weight: bold;
  font-family: serif;
  font-size: 18px;
  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;
  -webkit-backface-visibility: hidden;
  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);
}


.event_movie_page{
  margin: 1em auto;
  width: 98%;
  height: auto;
  max-width: 600px;
}
p.emvegga_target{
  color: #1564c9;
  margin: 1em auto;
  text-align: center;
  font-size: 13px;
  line-height: 1.5em;
}
.event_movie_page img{
  width: 100%;
  height: auto;
}
.event_movie_page h4 {
  text-align: center;
  font-size: 16px;
  font-weight: normal;
  margin: 0.2em auto;
  color: #696969;
}
.event_movie_page a p{
  color: blue;
  margin-top: 13px;
  text-align: center;
  font-size: 12px;
}
.line_under{
  width: 56px;
  height: auto;
  margin: 0 5px 0.5em auto;
}
.line_under img {
  width: 100%;
  height: auto;
}
.fre_div_pub{
  display: flex;
  width: 100%;
  height: auto;
  margin: 1em auto;
  max-width: 600px;
}
.fre_div_pub div{
  width: 31%;
  margin: 1%;
  padding: 1em;
  height: auto;
  background-color: #f8f8f8;
  border: solid 1px #d8d8d8;
  font-size: 13px;
  text-align: start;
  line-height: 1.5em;
  position: relative;
}
.fre_div_pub div i{
  position: absolute;
  top: 16px;
  right: 11px;
}
.fre_div_pub a {
  color: #635c5c;
}



.wedding_right h2
{
  font-family: "mrsheffield-pro", sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 90px;
  margin-top: 20px;
}

.top_main_new_fre{
  width: 97%;
  height: auto;
  max-width: 1500px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.wedding_right{
  width: 45%;
  height: auto;
  margin: 0 auto;
}

.movie_play{
  width: 55%;
}
.movie_play p{
  font-size: 15px;
  margin: 1em auto;
  font-size: 13px;
}
.movie_play a{
  color: #4a4a4a;
}
.movie_play_fre{
  display: flex;
  max-width: 500px;
  margin: 0em auto 4em auto;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.movie_play_fre div{
  width: auto;
  margin: 1%;
}
.movie_play h2{
  font-size: 10px;
  background-color: #e8e8e8;
  color: #333;
  text-align: center;
  padding: 10px 15px;
  width: 100%;
  height: auto;
  max-width: 212px;
  font-weight: normal;
  margin: 0 auto;
  border-radius: 27px;
}
.movie_play video{
  width: 100%;
  height: auto;
}
.wedding_moji{
  display: flex;
  width: 100%;
  height: auto;
  align-items: center;
}
.wedding_moji div img{
  width: 60%;
  height: auto;
}
.wedding_moji div{
  padding: 1em;
}
.wedding_right p{
  font-size: 24px;
  line-height: 1.8em;
  margin: 1em auto;
  font-family: serif;
  letter-spacing: 7px;
}
.movie_play>iframe{
  width: 100%;
  height: auto;
}
.blue_index_top{
  padding-bottom: 4em;
  font-family: serif;
}

.blue_index_xx{
  width: 95%;
  height: auto;
  max-width: 1500px;
  margin: 0 auto;
}
.blue_index_xx p{
  margin: 1em auto;
  margin-left: 1em;
  color: #2b2b2b;
  line-height: 2em;
  font-size: 17px;
  font-family: Arial, Helvetica, sans-serif;
}
.blue_index_top h3{
  font-size: 23px;
  margin-bottom: 1em;
  font-weight: normal;
  color: #052e58;
  letter-spacing: 8px;
}
.index_top_movieurl{
  display: flex;
  width: 45%;
  height: auto;
}
.index_top_movieurl div{
  padding: 1em;
  height: auto;
  width: 48%;
  margin: 1%;
  background-color: white;
  text-align: center;
  position: relative;
}
.index_top_movieurl a, .index_top_moviesita a{
  color: black;
}
.yazirusi {
  display: flex;
  top: 1px;
  position: absolute;
  right: -1px;
}
.yazirusi::after {
  content: '';
  width: 31px;
  height: 10px;
  border-bottom: solid 1px;
  border-right: solid 1px;
  transform: skew(45deg);
}
.index_top_moviesita{
  display: flex;
  width: 48%;
  height: auto;
  margin: 1em auto;
  margin: 1em;
}
.index_top_moviesita div{
  margin: 0 1em;
}
.bana_index{
  display: flex;
  width: 100%;
  height: auto;
  max-width: 1500px;
  margin: -5em auto 0 auto;
}
.bana_index a{
  width: 32%;
  margin: 1%;
  height: auto;
}
.bana_index img{
  width: 100%;
  height: auto;
}
.sp_wedding, .wedding_text, .sp_wedding_oukan{
  display: none;
}
.sp-wedding-ba{
  display: none !important;
}

.sumahobr{
  display: none;
}
.ranking{
  margin: 1em auto;
  width: auto;
  max-width: 130px;
  color: white;
  background-color: #2ea59b;
  padding: 0.5em;
  text-align: center;
  font-size: 13px;
}
/* ムービーおすすめSETCSS */

.fre_movie_otoku{
  display: flex;
  margin: 3em auto;
  width: 100%;
  height: auto;
  max-width: 1000px;
  align-items: center;
  flex-wrap: wrap;
}
.otoku_one, .otoku_two{
  width: 29%;
  height: auto;
  margin: 1%;
  text-align: center;
  line-height: 1.7em;
  color: #333;
}
.otoku_one iframe{
  width: 100%;
}
.otoku_two p{text-align: center;}
.otoku_two span{
  font-size: 10px;
}
.otoku_two h6{
  background-color: #868686;
  color: white;
  padding: 5px 10px;
  text-align: center;
  font-size: 13px;
  font-weight: normal;
  margin-bottom: 1em;
}
.otoku_two h4{
  border: solid 2px #eb5f5f;
  color: #eb5f5f;
  display:inline-block;
  text-align: center;
  margin: 0.5em auto;
  border-radius: 30px;
  font-weight: normal;
  padding: 5px 15px;
  font-size: 13px;
}
.otoku_one h5{
 font-size: 14px;
 line-height: 1.5em;
 margin: 0.5em auto;
 color: #333;
 text-align: left;
 font-weight: normal;
}
.otoku_one img{
  width: 100%;
  height: auto;
}
.otoku_plus{
  width: 3%;
  font-size: 25px;
  color: #333;
  text-align: center;
}
@media screen and (max-width: 1200px) {
  .wedding_moji{
    text-align: end;
  }
  .blue_index_top {
    margin-top: -9em;
    padding-top: 12em;
  }
  .yazirusi::after {
    width: 20px;
  }
  .fre_bana_six{
    margin: 0 auto !important;
  }
}
@media screen and (max-width: 960px) {
  .top_main_new_fre{
    display: block;
  }
  .wedding_right{
    display: none
  }
  .movie_play{
    width: 100%;
    margin: 6px auto;
  }
  .blue_index_xx{
    text-align: center;
  }
  .blue_index_xx p{
    margin: 1em auto;
  }
  .index_top_movieurl, .index_top_moviesita {
    width: 95%;
    max-width: 550px;
    margin: 1em auto;
    text-align: center;
  }
  .index_top_moviesita{
    justify-content:center;
  }
  .wedding_text{
    display: block;
    font-family: "mrsheffield-pro", sans-serif;
    font-weight: 400;
    font-style: normal;
    font-size: 105px;
    margin: -27px 33px -50px auto;
    text-align: end;
  }
  .sp_wedding_oukan{
    display: block;
  }
  .sp-wedding-ba{
    display: flex !important;
  }
  .sp_wedding{
    display: block;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: auto;
    margin: 0.5em auto;
  }
  .sp_wedding p{
  font-family: serif;
    font-size: 17px;
    line-height: 1.5em;
    color: #333333;
    text-align: center;
  }
  .sp_wedding img{
    width: 100%;
    height: auto;
    max-width: 117px;
  }
  .blue_index_top{
    padding-bottom: 3em;
  }
  .bana_index{
    margin: -41px auto 0 auto;
  }
  .movie_play_fre div{
    height: auto;
  }
  .movie_play_fre{
    margin: 0em auto -1em auto;
  }
}

@media screen and (max-width: 700px) {
  .blue_index_top h3{
    font-size: 18px;
  }
  .index_top_movieurl, .index_top_moviesita{
    width: 100%;
  }
  .index_top_movieurl div, .index_top_moviesita{
    font-size: 14px;
  }
  .yazirusi{
    top: 0px;
  }
  .bana_index{
    flex-wrap: wrap;
    width: 95%;
  }
  .bana_index a:first-child{
    width: 100%;
    height: auto;
  }
  .bana_index a:not(:first-child){
    width: 48%;
    height: auto;
  }
  .sp_wedding p{
    font-size: 16px;
    line-height: 1.7em;
    margin-left: 10px;
  }
  .wedding_text{
    font-size: 80px;
    margin: 21px 7px -59px auto;
  }
  .top_main_new_fre{
    width: 100%;
  }
  .blue_index_xx p{
    margin: 1em auto;
    line-height: 32px;
    font-size: 15px;
  }

  .sumahobr{
    display: block;
  }
  .otoku_one{
    width: 45%;
  }
  .otoku_plus{
    width: 6%;
  }
  .otoku_two{
    width: 100%;
  }
  .pc_booo{
    display: none;
  }
  .blue_index_top {
    padding-top: 9em;
  }
}

.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%;
  }
}





.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: -29px;
  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;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
}







/* movie_menu_popの設定 */
.movie_menu_pop {
  width: 16%;  /* 横幅を63px */
  height: auto; /* 高さ50px */
  display: flex;
  justify-content: center; /* 水平中央揃え */
  align-items: center; /* 垂直中央揃え */
  cursor: pointer;
  background-color: #E0E0E0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
  flex-direction: column; /* 縦方向に配置 */
  gap: 5px; /* 線の間隔 */
}

/* 3本線のスタイル */
.movie_menu_pop div {
  width: 25px;
  height: 2px;
  background-color: #333;
  transition: 0.4s;
}
.movie_menu_pop p{
  font-size: 7px;
  text-align: center;
  position: absolute;
  bottom: 6px;
}
/* ポップアップの設定 */
.popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 500px;
  padding: 50px 0 0 0;
  background-color: white;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
  text-align: center;
  display: none;
  z-index: 1000;
}

.popup button {
  color: #444444;
  border: none;
  cursor: pointer;
  position: absolute;
  right: 11px;
  top: 10px;
  background: none;
  font-size: 18px;
}

.popup button:hover {
  background-color: #555;
}

/* 背景のオーバーレイ */
.overlay_movie {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
  display: none;
  z-index: 999;
}



.poup_innai{
  border-bottom: 1px solid #e0e0e0; /* 項目の区切り線 */
  padding: 1.2em 1em;
  text-align: justify;
  position: relative;
  font-size: 14px;
}
.poup_innai i{
  position: absolute;
  right: 20px;
  top: 17px;
  color: #a0a0a0;
}

/* スライダー全体の幅と高さを設定 */
.swiper {
  width: 100%;  /* 親要素の幅を100%に設定 */
  height: 100%; /* 親要素の高さも設定（必要に応じて調整） */
}

/* スライド要素の設定 */
.swiper-slide {
  width: 100%;   /* スライド幅を設定（この場合、1スライドで画面いっぱい） */
  height: auto;  /* 高さは自動で調整（必要に応じて固定することも可能） */
}


.movie_ranking_moji{
  margin: 2em auto;
  text-align: center;
  border-bottom: solid 1px #d5d5d5;
  padding-bottom: 9px;
  max-width: 363px;
  width: 95%;
}
.movie_ranking_moji i{
  color: #DAAF08;
  font-size: 21px;
  margin-right: 5px;
}
.movie_ranking_moji a{
  color: #333;
}

/* スライダー本体 */
.swiper-container.menu-swiper {
  width: 100%;
  position: relative;
  max-width: 1500px;
  margin: -1em auto;
  overflow: hidden;
}
.menu-swiper.div{
  background-color: none;
  background: none;
}

.menu-swiper .swiper-slide{
  opacity: 0.5;
  transition: opacity 1s;
  background: none;
}

  /* 中央スライドには透明度なし */
  .swiper-slide.swiper-slide-active {
    opacity: 1;
  }
/* スライド画像のサイズ調整 */
.swiper-container.menu-swiper .swiper-slide img {
  width: 100%;
  height: auto;
  border-radius: 10px;
}

/* 矢印ボタンのスタイル */
.swiper-container.menu-swiper .swiper-button-next,
.swiper-container.menu-swiper .swiper-button-prev {
  color: #000; /* ボタンの色を指定 */
}


.fre_bana_six{
  display: flex;
  max-width: 1500px;
  width: 100%;
  margin:-3em auto 4em auto;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}
.fre_bana_six div{
  width: 15%;
  margin: 0.5%;
  height: auto;
  border-radius: 10px;
}
.fre_bana_six img{
  width: 100%;
  height: auto;
  border-radius: 10px;
}

.sp_slidd{
  display: none;
}
@media screen and (max-width: 960px){
  .fre_bana_six{
    margin:-3em auto 0em auto;
  }
}
@media screen and (max-width: 700px) {
  .sp_slidd{
    display: block;
  }
  .fre_bana_six{
    display: none;
  }
}
.movie_liter_fre_im_system {
  display: flex;
  justify-content: center; /* コンテナ内で中央揃え */
  align-items: center;
  gap: 10px; /* 画像間のスペース */
  flex-wrap: wrap; /* 小さな画面では折り返し */
  margin: 1em auto;
  max-width: 1000px; /* 全体の最大幅を制限 */
}

.movie_liter_fre_im_system div {
  flex: 1 1 auto; /* 各画像が縮小して横並び */
  max-width: 200px; /* 各画像の最大幅を設定 */
  display: flex;
  width: 30%;
  justify-content: center;
}

.movie_liter_fre_im_system img {
  width: 100%;
  height: auto;
  border-radius: 8px; /* 画像の角を丸める */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* 画像にシャドウ効果 */
  transition: transform 0.3s ease; /* ホバーアニメーション */
}

.movie_liter_fre_im_system img:hover {
  transform: scale(1.05); /* ホバー時に少し拡大 */
}

.white_system{
  background-color: white;
  margin: 1em auto;
  padding: 1em;
  border-radius: 15px;
  width: 90%;
}

/*
  ファーストページ
*/

.fast_main_vs{

  width: 100%;
  height: auto;
  position: relative;
  max-width: 1500px;
  width: 100%;
  margin: 0 auto;
}
.fast_main_vs_im img{
  width: 100%;
  height: auto;
}
.fast_main_vs_im {
  width: 80%;
  height: auto;
  margin: 0px 0 0 auto;

}
.fast_main_vs_tex {
  position: absolute;
  top: 37%;
  left: 19px;
  width: 500px;
}
.fast_main_vs_tex img, .fast_main_vs_ri img{
  width: 100%;
  height: auto;
}
.fast_main_vs_ri{
  display: flex;
  width: 100%;
  height: auto;
  margin: 2em auto;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  max-width: 1500px;
}
.fast_main_vs_ri_im {
  width: 60%;
  height: auto;
  margin: 0 auto 0 0;
}
.fast_main_vs_ri_tex{
  width: 40%;
  height: auto;
}
.fast_main_vs_ri_tex{
  width: 35%;
  height: auto;
  margin: 0 auto;
}
.fast_main_vs_ri_tex h2{
  color: #4eae8c;
  font-size: 17px;
  line-height: 2em;
  margin-bottom: 1em;
  text-align: center;
}
.fast_main_vs_ri_tex p{
  line-height: 1.7em;
  color: #333;
  text-align: justify;
}
.fast_ti{
  margin: 3em auto;
}
.fast_ti h3{
  font-family: serif;
  text-align: center;
  font-size: 20px;
  font-weight: normal;
}
.fast_ti p{
  color: #4eae8c;
  text-align: center;
  margin: 0.5em auto;
  font-size: 15px;
}
.point_fast_ri, .point_fast_lef{
  width: 100%;
  height: auto;
  max-width: 1000px;
  margin: 2em auto;
}
.point_fast_ri div{
  width: 95%;
  margin: 0 auto 0 0;
  background: #f4f4f4;
  position: relative;
  padding: 2em 10px;
}

.point_fast_lef div{
  width: 95%;
  margin: 0 0 0 auto;
  background: #f4f4f4;
  position: relative;
  padding: 2em 10px;
}
.point_fast_ri img, .point_fast_lef img{
  width: 50px;
  height: auto;
  text-align: center;
  margin: 1em auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
.point_fast_ri h4,.point_fast_lef h4{
  font-size: 18px;
  font-weight: normal;
  font-family: serif;
  text-align: center;
  margin-top: 20px;
  color: #333;
}
.point_fast_ri p,.point_fast_lef p{
  font-size: 15px;
  text-align: justify;
  margin: 1em auto;
  line-height: 1.7em;
  color: #333;
  width: 90%;
}
.point_fast_ri h3{
  position: absolute;
  top: -13px;
  left: 10px;
  font-size: 40px;
  color: #4eae8c;
}
.point_fast_lef h3{
  position: absolute;
  top: -13px;
  right: 10px;
  font-size: 40px;
  color: #4eae8c;

}
.point_fast_ri h4, .point_fast_ri h3, .point_fast_ri img,
.point_fast_lef h4, .point_fast_lef h3, .point_fast_lef img{
  text-align: center;
}

.mods{
  width: 100%;
  height: auto;
  margin: 1em auto;
  background-color: #ebf7f5;
  padding: 2em 0;
}
.mods div{
  text-align: justify;
  line-height: 1.8em;
  font-size: 16px;
  color: #333;
  width: 95%;
  max-width: 1200px;
  background-color: white;
  margin: 1em auto;
  padding: 1em;
  border-radius: 10px;
}
@media screen and (max-width: 900px) {
  .fast_main_vs_tex {
    position: static;
    width: 75%;
    margin: 1em auto;
  }
  .fast_main_vs_im, .fast_main_vs_ri_im{
    width: 90%;
    z-index: 4;
  }
  .fast_main_vs_ri_tex{
    width: 100%;
    background: #f8f8f8;
    padding: 50px 2%;
    margin-top: -2em;
    z-index: 0;
  }
  .fast_main_vs_ri_tex h2{
    margin: 1em auto;
  }
}

.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: 85px;
}

.ranking_cra{
  font-size: 15px;
  margin-top: 5px;
  font-family: Arial, sans-serif;
  font-weight: bold;
}
.ranking_cra i{
  margin-right: 5px;
  color: rgb(226, 185, 0);
  font-size: 18px;
}
@media (max-width: 1200px) {
  .question_category {
    margin: 2em auto;
  }
  .movie_play_fre{
    margin: 0 auto 2em auto;
  }
}
@media screen and (max-width: 960px) {
  .for_step_fre div{
    width: 48%;
  }
  .fre_bana_six div{
    width: 32%;
  }
  .movie_play_fre{
    margin: 0 auto;
  }
}

.fre_op_pm{
  margin: 1em auto;
  max-width: 750px;
  width: 80%;
  height: auto;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
}
.fre_op_pm a{
  width: 48%;
  margin: 1%;
  height: auto;
  padding: 1em;
  position: relative;
  color: #ffffff;
  background-color: #4daf8f;
  text-align: center;
}
.fre_op_pm a i{
  position: absolute;
  top: 16px;
  right: 15px;
}
@media screen and (max-width: 750px) {
  .fre_op_pm a{
    width: 90%;
    margin: 0.5em auto;
  }
  .fre_op_pm{
    width: 100%;
  }
}



.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;
}


/* ポップアップ背景（暗くする部分） */
.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;
}



/* おすすめムービー診断 */

.type_tit_fast{
  text-align: center;
  margin: 1em auto;
  width: 95%;
  max-width: 1200px;
}

.type_tit_fast h2{
  font-size: 25px;
  font-weight: bold;
  color: #2ea59b;
  line-height: 34px;
  margin-bottom: 16px;
}
.type_tit_fast h2 span{
  font-size: 14px;
  color: #333;
}
.type_tit_fast p{
  text-align: justify;
  max-width: 800px;
  margin: 0 auto;
  line-height: 1.8em;
  font-size: 15px;
  color: #474646;
  margin-bottom: 20px;
}
.movie_ski{
  text-align: center;
  max-width: 500px;
  width: 99%;
  height: auto;
  margin: 1em auto;
  font-size: 14px;
  background-color: #2ea59b;
  color: white;
  padding: 1em 0;
}

.ttl_center2 {
  font-weight: bold;
  padding-bottom: 0.5em;
  text-align: center;
  position: relative;
  font-size: 20px;
  margin: 2em auto;
  color: #2ea59b;
}
.ttl_center2 span{
  font-size: 13px;
  line-height: 2em;
  color: #ffbc07;
}
.ttl_center2::before, .ttl_center2::after {
  content: '';
  position: absolute;
  margin:auto;
  left: 0;
  bottom: 0;
  width: 2em;
  background-color: #e3e3e3;
  height: 5px;
  right: 2em; 
}
.ttl_center2::before {
  background-color:#2ea59b;
  left:2em;
  width:4em;
}


.type_fre_sup{
  display: flex;
  width: 100%;
  height: auto;
  max-width: 1200px;
  margin: 2em auto;
  flex-wrap: wrap;
  justify-content: center;
}
.type_fre_sup_one{
  width: 31%;
  margin: 1%;
  height: auto;
  position: relative;
  border: solid 1px #000;
  border-top-left-radius: 100px; /* 左上角を丸くする */
  text-align: center;
}
.type_fre_sup_one h2{
  position: absolute;
  top: -33px;
  left: -4px;
  font-size: 45px;
  font-weight: bold;
}
.type_fre_sup_one h3{
  background: aqua;
  padding: 1em 0;
  width: 87%;
  margin: 2em 6px 13px auto;
  font-size: 14px;
  color: white;
  text-align: center;
}
.type_fre_sup img{
  width: 96%;
  height: auto;
}
.type_fre_sup_one p{
  margin: 2em auto;
  text-align: justify;
  font-size: 15px;
  line-height: 28px;
  width: 95%;
  color: #2c9bb2;

}
.bg_type01{
  background-color: #e9f6fa;
  margin: 1em auto 0 auto;
  padding: 1em 0;
}
.type_info_bg{
  background-color: #f4f4f4;
  margin: 0 auto 1em auto;
  padding: 1em 10px;
  width: 100%;
}
.type_info{
  font-weight: normal;
  width: 98%;
  max-width: 500px;
  line-height: 2em;
  margin: 0 auto;
  color: #333;
}
.type_info_bg i{
  margin-right: 9px;
    font-size: 22px;
    color: #68807e;
}
.type_info h1, .type_info h2, .type_info h3, .type_info h4, .type_info p{
  font-weight: normal;
  border-bottom: dotted  1px #adadad;
  padding: 7px 0;
}
.type_info h5{
  font-size: 12px;
  color: #4e4e4e;
  text-align: end;
  font-weight: normal;
}
.type_info h5 a{
  color: blue;
}
.pop_ttoe{
  max-width: 500px;
  width: 100%;
  height: auto;
  text-align: end;
  margin: 1em auto;
}
.pop_ttoe button.show-popup-btn{
  background-color: white;
}

.type_movoie_fre{
  display: flex;
  max-width: 1200px;
  width: 95%;
  height: auto;
  margin: 2em auto;
  flex-wrap: wrap;
}
.type_movoie_fre_in{
  width: 23%;
  margin: 1%;
  font-size: 80%;
}
.type_movoie_fre img{
  width: 100%;
  height: auto;
}
.type_movoie_fre_in>.movie_name{
  margin: 1em auto;
  color: #717171;
}
.type_sityou {
  display: flex;
  align-items: center;
  margin-bottom: 1em;
  grid-gap: 0 .7em;
  margin: 10px auto 1em auto;
  padding: 1em;
  border-radius: 5px;
  background-color: #fafafa;
  width: 100%;
  color: #4d4d4d;
  font-size: 12px;
}

.type_sityou::before {
  width: 16px;
  height: 8px;
  border-bottom: 3px solid #2bb17d;
  border-left: 3px solid #2bb17d;
  transform: rotate(-45deg) translate(2.5px, -2.5px);
  content: '';
}

.type_sityou p {
  margin: 0;
  padding: 0 0 0 .7em;
  border-left: 1px solid #2bb17d;
}
button.show-popup-btn_two {
  width: 100%;
  background: none;
  border: none;
}
.movie-popup-content h6{
  text-align: center;
  font-size: 16px;
  color: #2ea59b;
}
.mese_type{
  margin: 1em auto;
  max-width: 979px;
  text-align: justify;
  line-height: 1.9em;
  color: #333;
  width: 95%;
  font-size: 15px;
}
@media screen and (max-width: 750px) {
  .type_fre_sup_one{
    width: 95%;
    margin: 2em auto;
  }
  .type_sityou{
    font-size: 11px;
  }
}
@media screen and (max-width: 1200px) {
  .type_movoie_fre_in{
    width: 48%;
    margin: 0 1%;
  }
}


.botan_sita_type{
  text-align: end;
  font-size: 13px;
}
.botan_sita_type a{
  color: #7d8bc2;
}
.box-012 {
  max-width: 400px;
  margin: 0 auto;
  border: 2px solid #92cec4;
  border-radius: 3px;
  overflow: hidden;
  width: 95%;
  margin: 1em auto;
}

.box-012 span {
  padding: 6px .8em;
  background-color: #92cec4;
  color: #fff;
  line-height: 33px;
}

.box-012 p {
  margin: 0;
  padding: 1em 13px;
  font-size: 15px;
  color: #333;
  line-height: 2em;
  font-weight: normal;
}
.box-012 p i{
  color: #477a72;
    margin-right: 15px;
    font-size: 17px;
}

.alert.alert-success {
  margin: 1em auto;
  text-align: center;
  max-width: 300px;
  width: 100%;
  background: #2ea59b;
  padding: 1em;
  color: white;
}
.tyuui_type{
  text-align: justify;
  font-size: 13px;
  color: #5b5b5b;
  line-height: 23px;
  margin: 1em auto;
  max-width: 500px;
}

.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;
}

.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;
  }
}

 /* モーダルの背景 */
 .movie_play_modal {
  display: none; /* 初期状態は非表示 */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color:rgba(0, 0, 0, 0.5);
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

/* モーダルのコンテンツ */
.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;
  }
}

.story_ima_fa{
  margin: 1em auto;
  width: 100%;
  height: auto;
  max-width: 800px;
}
.story_ima_fa img{
  width: 100%;
  height: auto;
}
.story_ima_fa h1{
  line-height: 37px;
  font-size: 22px;
  color: #292929;
  padding: 0.2em;
}
.story_ima_fa p{
  line-height: 27px;
  margin: 1em auto;
  color: #393939;
  padding: 0.5em;
  font-size: 17px;
  text-align: justify;
}
.story_fa{
  margin: 1em auto;
  width: 100%;
  max-width: 1000px;
  text-align: justify;
  padding: 0.5em;
  font-size: 17px;
  line-height: 34px;
}
.story_tit{
  font-family: serif;
  font-size: 30px;
  color: #000;
  margin: 2em auto;
  padding: 0.2em;
}
.story_tit p{
  font-size: 15px;
  color: #333;
  margin-top: 0.5em;
}
.story_fa p{
  color: #393939;
}
.fre_story{
  display: flex;
  max-width: 1200px;
  width: 100%;
  margin: 1em auto;
  flex-wrap: wrap;
  justify-content: center;
}
.fre_story div{
  width: 48%;
  margin: 1em 1%;
}
.fre_story div img{
  width: 100%;
  height: auto;
}
.fre_story div h3{
  margin: 1em auto;
  font-size: 20px;
  font-weight: normal;
  font-family: serif;
}
.fre_story p{
  font-size: 15px;
  line-height: 26px;
  color: #333;
  padding: 0.5em;
}
.story_last{
  text-align: center;
  line-height: 2em;
  font-family: serif;
  font-size: 25px;
  margin: 2em auto;
  font-weight: bold;
}
.movie_index_btn{
  display: none;
}
.button012{
  display: none;
}
.button012 a {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  max-width: 310px;
  padding: 15px 25px 15px 50px;
  color: #313131;
  transition: 0.3s ease-in-out;
  font-weight: 600;
  background: #eee;
  border-radius: 50px;
  z-index: 0;
  overflow: hidden;
  font-size:15px;
}
.button012 a:before {
  font-family: "Font Awesome 5 Free";
  content: "\f005";
  line-height: 1;
  position: absolute;
  left: 5px;
  background: #FFF;
  padding: 12px 11px;
  border-radius: 60px;
  z-index: 2;
}
.button012 a:after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 0;
  display: block;
  background: #ccc;
  transition: .3s;
  left:0;
}
.button012 a:hover:after {
  width: 100%;
  z-index: -1;
}

.version_wa{
  display: flex;
  margin: 1em auto;
  width: 100%;
  height: auto;
  max-width: 70px;
}
.version_wa img{
  width: 50%;
  height: auto;

}


.fre_movie_wasou_yousou{
  display: flex;
  max-width: 1020px;
  margin: -8px auto 0px auto;
}
.fre_movie_wasou_yousou a{
  width: 37%;
  height: auto;
  margin: 1%;
  padding: 12px 14px;
  border: solid 1px #999999;
  position: relative;
  max-width: 140px;
}
.fre_movie_wasou_yousou a h5{
  color: #434242;
  font-size: 13px;
  font-weight: normal;
  text-align: start;
}
.fre_movie_wasou_yousou a h5 i.fa-sharp-duotone.fa-solid.fa-play{
  position: absolute;
  top: 12px;
  right: 12px;
}


.wasou_setumei {
  font-size: 14px;
  color: #595959;
  margin: 0.5em auto;
  padding: 0.5em;
  max-width: 1000px;
}
@media screen and (max-width: 750px) {
  .story_fre_fa div{
    width: 100%;
    margin: 1em auto;
    padding: 0.5em;
  }
  .story_tit{
    margin: 1em auto;
  }
  .fre_story div{
    width: 92%;
    margin: 1em 0 1em auto;
  }
  .fre_story p{
    padding: 0 5px 0 0;
  }
  .story_last{
    font-size: 15px;
  }
  .movie_index_btn{
    display: flex;
    max-width: 400px;
    margin: 1em auto;
    width: 100%;
    justify-content: center;
    align-items: center;
  }
  .movie_index_btn a{
    width: 48%;
    height: auto;
    margin: 1%;
    padding: 9px 13px;
    background-color:#3da8a0e3;
    border: solid 1.5px #3da8a0e3;
    color: white;
    position: relative;
    font-size: 15px;
    line-height: 21px;
  }
  .movie_index_btn a span{
    font-size: 19px;
    font-weight: bold;
  }
  .movie_index_btn i{
    position: absolute;
    top: 15px;
    right: 12px;
    font-size: 29px;
  }
  a.moive_inde_btn_whi{
    border: solid 1.5px #3da8a0;
    color: #3da8a0;
    background: white;
  }
  /* 012 */
  .button012{
    display: block;
  }
  .wasou_setumei {
    font-size: 11px;
  }
}


.wasouname {
  text-align: center;
  font-weight: bold;
  color: white;
  font-size: 20px;
  margin-top: -20px;
  margin-bottom: 20px;
  line-height: 26px;
}
.wasouname_ma{
  margin: 15px 0 -15px 0;
  color: white;
  font-size: 13px;
}
.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;
}

.sitei {
  text-align: center;
  font-size: 13px;
  color: #2a6293;
}
.movie_h1_tit{
  text-align: center;
  font-size: 14px;
  margin-top: 10px;
  font-weight: normal;
  margin-bottom: -16px;
}
.retc_img{
  width: 100%;
  height: auto;
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}
.retc_img img{
  width: 100%;
  height: auto;
}
.retd_po_ab_p{
  position: absolute;
  bottom: 1px;
  right:1px;
  text-align: end;
}
.retd_po_ab_p h1, .retd_po_ab_p h2{
  display: inline-block; /* テキストにぴったり合わせる */
  background-color: #ffffffd9;
  font-size: 40px;
  font-weight: bold;
  font-weight: normal;
  padding: 5px 10px;
  margin: 6px 0;
  font-family: serif;
  color: #333;
}
.retc_unde_p{
  text-align: center;
  font-family: serif;
  font-size: 18px;
  color: #333;
  line-height: 1.8em;
  margin: 1em auto;
  width: 94%;
}
.retc_unde_p p span{
  background: linear-gradient(transparent 70%, #fff500 70%);
  font-size: 21px;
}
.setumei_retc{
  width: 98%;
  height: auto;
  margin: 0 auto;
  max-width: 800px;
  color: #333;
  line-height: 1.6em;
}
.retc_graf{
  max-width: 1000px;
  margin: 1em auto;
  width: 100%;
}
.retc_graf img{
  width: 100%;
  height: auto;
}
@media screen and (max-width: 750px) {
  .retd_po_ab_p h1, .retd_po_ab_p h2{
    font-size: 24px;
  }
  .retc_unde_p{
    font-size: 17px;
  }
}
.campgad{
  text-align: center;
  margin: 1em auto;
  color: blue;
}
.campgad a{
  color: #516ec1;
    font-weight: bold;
    font-size: 15px;
}
.campgad i{
  margin-right: 4px;
}
.movie_line{
  text-align: center;
  width: 100%;
  margin: 1em auto;
  text-align: center;
}
.movie_line img{
  width: 100%;
  max-width: 152px;
}
.movie_line h1{
  font-size: 20px;
  font-family: 'Anton', sans-serif; /* フォントを設定 */
  font-weight: bold; /* 太字 */
  margin: 5px 0 11px 0;
  color: #353535;
}
.movie_line p{
  font-size: 13px;
  color: #535353;
  line-height: 22px;
  width: 90%;
  margin: 0 auto;
}
.frec_mggg{
  width: 100%;
  height: auto;
  margin: 1em auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.movie_nai_box{
  border: solid 1px #22b590;
  color: #0ad09e;
  padding: 8px 40px 8px 6px;
  text-align: left;
  position: relative;
}
.movie_nai_box i{
  position: absolute;
  top: 4px;
  right: 6px;
  font-size: 17px;
}
.movie_nai_box a{
  font-size: 13px;
  color: #22b590;
}

.h1_fa{
  font-size: 13px;
  background-color: #dee6e9;
  padding: 8px 0;
  text-align: center;
}
.h1_fa h1{
  color: #545454;
    font-weight: normal;
}

.tig_movie{
  text-align: center;
  line-height: 2em;
  margin: 1.5em auto;
  font-weight: normal;
}
.tig_movie h1{
  font-weight: normal;
  font-size: 13px;
  color: #565353;
}
.tig_movie h2{
  font-family: serif;
  font-weight: bold;
  font-size: 20px;
  text-align: center;
  color: #2f2f2f;
  letter-spacing: 1px;
}
.tig_movie h3{
  font-weight: normal;
  font-size: 13px;
  color: #565353;
}
.fress{
  display: flex;
  justify-content: center;
    align-items: center;
}
.fress div{
  margin: 0 1%;
}


/* スマホで動画を再生一覧CSS */
video.video_atc{
  width: 100%;
  height: auto;
  border-top-left-radius: 13px;
    border-top-right-radius: 13px;
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
}

.video-thumbnail {
  width: 100%;
  height: auto;
  display: block !important; /* 画像を最初に表示 */
}

.noa {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px;
  max-width: 1100px;
  margin: 0 auto;
  padding: 20px 0;
}

@media (max-width: 768px) {
  .noa {
    flex-wrap: nowrap;
    overflow-x: auto;
    justify-content: flex-start;
    -webkit-overflow-scrolling: touch;
  }

  .noa.scroll-disabled {
    overflow-x: hidden;
    justify-content: center;
  }
}

.noa a {
  flex: 0 0 auto;
  width: 97%;
  max-width: 500px;
  margin: 0 5px;
  color: blue;
}

.noa img {
  width: 100%;
  height: auto;
  display: block;
}


.fagaadd{
  margin: 2em auto;
  text-align: center;
  width: 98%;
}
.fagaadd h1{
  font-size: 25px;
  font-weight: bold;
}
.fagaadd p{
  margin-top: 2em;
  line-height: 26px;
}


/* 背景オーバーレイ（暗くする） */
#remarketing-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.6); /* 背景を暗くする */
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

/* ポップアップウィンドウ */
#remarketing-popup {
  background: white;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
  text-align: center;
  max-width: 400px;
  width: 90%;
  display: none; /* JavaScript で制御するため、初期状態は非表示 */
}

/* ポップアップのコンテンツ */
.remarketing-popup-content h2 {
  font-size: 20px;
  margin-bottom: 10px;
  padding: 1em;
  background: #ff4081;
  color: white;
  width: 100%;
  border-radius: 10px 10px 0 0; /* 左上・右上のみ角丸 */
}

.remarketing-popup-content h3{
  color: #ff4081;
  margin: 1em auto;
  font-size: 14px;
}
.remarketing-popup-content p {
  font-size: 17px;
  text-align: justify;
  margin: 19px 0;
  line-height: 22px;
}

/* 閉じるボタン */
#remarketing-popup-close {
  display: inline-block;
  padding: 10px 20px;
  background: #ff4081;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
}

#remarketing-popup-close:hover {
  background: #d8376d;
}

p.gfagafafdadadada{
  text-align: left;
  margin: 1em auto;
  padding: 10px;
  background-color: #f3efef;
  color: #606060;
  font-size: 15px;
  line-height: 22px;
  border-radius: 10px;
}
/* 全体のレイアウト */
.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; /* 少し余白 */
}

.po_section{
  display: block;
}
video-card {
  display: flex;
  align-items: center;
  border: 1px solid #ddd;
  border-radius: 8px;
  padding: 10px;
  max-width: 500px;
  background: #f9f9f9;
}
.video-thumbnail {
  width: 120px;
  height: 70px;
  border-radius: 5px;
  overflow: hidden;
  margin-right: 10px;
}
.video-thumbnail img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.video-info {
  flex: 1;
}
.video-info h4 {
  margin: 0;
  font-size: 14px;
}
.video-info p {
  margin: 3px 0;
  font-size: 12px;
  color: #555;
}
.frex_movie_jisai{
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  align-items: center;
}
.movie_jisai_nai{
  width: 24%;
  height: auto;
}
.frex_movie_jisai .movie_image_pop i{
  font-size: 25px;
}
.zisasi h2{
  font-size: 17px;
  color: #243653;
  margin: 1em auto 0 auto;
  font-weight: bold;
  display: flex;
  align-items: center;
  gap: 5px;
}
.zisasi h2 img{
  width: 30px;
  height: auto;
}
.sp_segc{
  display: none;
}
@media (max-width: 1050px) {
  .movie_jisai_nai{
    width: 49%;
    height: auto;
  }
  .zisasi h2{
    font-size: 16px;
  }
}
/* スマホ用（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;
  }
}


.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;
}

a.insta_aaa {
  color: #0070bd;
  font-weight: normal !important;
  font-size: 13px;
}


/* LP CSS NEW */
.oukan_tree{
  display: flex;
  width: 100%;
  height: auto;
  justify-content: space-evenly;
  align-items: center;
  max-width: 600px;
  margin: 1em auto;
}
.oukan_tree img{
  width: 30%;
  margin: 1%;
}
.oukan_under_text {
  width: 100%;
  height: auto;
  margin: 2em auto;
  text-align: center;
}
.oukan_under_text h2{
  font-size: 28px;
  font-family: "Arial", "Helvetica", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
  font-weight: bold;
  color: #454545;
  line-height: 31px;
}
.oukan_under_text span{
  color: #0ba17b;
}
.oukan_under_text p{
  font-size: 11px;
  color: #797979;
  letter-spacing: 0;
  font-family: "Arial", "Helvetica", "Hiragino Kaku Gothic ProN", "Meiryo", sans-serif;
}
 /* ボタン全体のデザイン */
 .button_lp_movie {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #3A9087, #5FC9B4);
  border-radius: 50px;
  padding: 10px;
  font-size: 16px;
  font-weight: bold;
  color: #fff;
  text-decoration: none;
  transition: 0.3s ease-in-out;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.15);
  position: relative;
  overflow: hidden;
  border: none;
  width: 98%;
  max-width: 500px;
  margin: 2em auto 1em auto;
}

/* ホバー時のエフェクト */
.button_lp_movie:hover {
  background: linear-gradient(135deg, #2E7D74, #4AB39F);
  box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.2);
  transform: translateY(-2px);
}

/* 丸アイコンのデザイン */
.circle {
  background: linear-gradient(135deg, #266D64, #3A9087);
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  padding: 10px 15px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 15px;
  min-width: 55px;
  min-height: 55px;
  box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1);
}

/* 矢印のデザイン */
.arrow_lp_movie {
  font-size: 20px;
  color: #fff;
  margin-left: 15px;
  transition: transform 0.3s ease-in-out;
}

/* ホバー時の矢印アニメーション */
.button_lp_movie:hover .arrow_lp_movie {
  transform: translateX(5px);
}
a.lp_movie_link{
  text-align: center;
  margin: 1em auto;
  color: #3A9087;
  font-weight: bold;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 16px;
}
/* ポップアップのスタイル */
.modal_popup_abcXYZ {
  display: none;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.7);
  backdrop-filter: blur(5px);
  justify-content: center;
  align-items: center;
}

.modal_content_abcXYZ {
  background: #fff;
  padding: 40px 10px;
  border-radius: 10px;
  max-width: 90%;
  max-height: 80vh; /* ビューポートの80%以内に制限 */
  text-align: center;
  position: relative;
  overflow: auto; /* はみ出した場合にスクロールを許可 */
}

.modal_content_abcXYZ img {
  max-width: 100%;
  max-height: 70vh;
  border-radius: 8px;
}

/* 閉じるボタン */
.modal_close_abcXYZ {
  position: absolute;
  top: 10px;
  right: 15px;
  font-size: 24px;
  cursor: pointer;
  color: #333;
}

/* サムネイル画像 */
.thumbnail_img_abcXYZ {
  cursor: pointer;
  transition: 0.3s;
  border-radius: 8px;
}

.thumbnail_img_abcXYZ:hover {
  opacity: 0.8;
}
.modal_content_abcXYZ p, .modal_content_abcXYZ h3{
  text-align: start;
  margin: 1em auto;
  line-height: 22px;
}
.flash-message_lpmovie {
  position: fixed;
  top: 85px;
  left: 50%;
  transform: translateX(-50%);
  background: rgb(63 180 121 / 92%);
  color: #fff;
  padding: 15px 10px;
  border-radius: 40px;
  font-size: 15px;
  width: 100%;
  max-width: 302px;
  font-weight: bold;
  text-align: center;
  z-index: 1000;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  animation: fadeOut 3s ease-in-out forwards;
}

/* 3秒後にフェードアウト */
@keyframes fadeOut {
  0% { opacity: 1; }
  70% { opacity: 1; }
  100% { opacity: 0; }
}
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;
}


.campaing_gao, .sp_wedding_motto_lp{
  display: none;
}
@media (max-width: 960px) {
  .sp_wedding_motto_lp{
    display: block;
  }
  .campaing_gao{
    display: block;
    margin: 1em auto;
    width: 100%;
    max-width: 500px;
    line-height: 22px;
    text-align: center;
  }
  .campaing_gao p{
    font-size: 15px;
    color: #131313;
  }
  .campaing_gao p span{
    font-size: 18px;
    color: #eb6868;
    font-weight: bold;
  }
  .campaing_gao h3{
    margin: 0.5em auto;
    color: #5b5b5b;
    background-color: #f9f9f9;
    border: solid 1px #dcdcdc;
    font-size: 16px;
    font-weight: bold;
    text-align: center;
    font-family: 'Arial', sans-serif;
    padding: 10px 0;
    border-radius: 20px;
    max-width: 337px;
  }
  .oukan_under_text h2 {
    font-size: 19px;
    margin: 0.5em auto;
  }
  .oukan_under_text h3{
    font-size: 14px;
  }
  .button_lp_movie{
    padding: 10px 7px;
    font-size: 13px;
  }
  .circle{
    margin-left: -18px;
        margin-right: 4px;
  }
  a.lp_movie_link{
    font-size: 14px;
  }
}
.iframe-container {
  position: relative;
  transition: transform 0.3s ease-in-out, top 0.3s ease-in-out, right 0.3s ease-in-out;
}

.iframe-container.fixed-pip {
  position: fixed;
  top: -34px;
  right: 0px;
  width: 80%;
  max-width: 312px;
  height: auto;
  z-index: 1000;
  border-radius: 10px;
  transform: scale(0.9);
  margin: 0 !important;
}

.iframe-container.fixed-pip iframe{
  border-radius: 15px;
}

.submit_movie_store {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  max-width: 350px;
  padding: 15px 20px;
  font-size: 18px;
  font-weight: bold;
  color: #fff;
  background: linear-gradient(45deg, #3a8dde, #1a73e8);
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  position: relative;
}

.submit_movie_store:hover {
  background: linear-gradient(45deg, #1a73e8, #0d47a1);
  box-shadow: 0 6px 10px rgba(0, 0, 0, 0.2);
}

.submit_movie_store i {
  position: absolute;
  top: 21px;
  right: 29px;
  transition: transform 0.3s ease;
}

.submit_movie_store:hover i {
  transform: translateX(5px);
}

.ope_sele {
    display: flex;
    margin: 1em auto;
    max-width: 1000px;
    justify-content: flex-end;
    align-items: center;
    width: 98%;
}
.ope_sele h2 {
  font-size: 15px;
  font-weight: normal;
  margin: 1%;
}

.ope_sele div:last-child {
  display: flex;
  justify-content: flex-end; /* 右寄せ */
}

.select-wrapper {
  position: relative;
  display: inline-block;
}

.select-wrapper select {
  -webkit-appearance: none; /* iOSのデフォルトデザインを解除 */
  -moz-appearance: none;
  appearance: none;
  width: 200px; /* お好みで変更 */
  padding: 12px 30px 12px 10px;
  font-size: 14px;
  border: 1px solid #ccc;
  border-radius: 5px;
  background-color: white;
  cursor: pointer;
  margin-left: 7px;
  text-align: center;
}
/* スライダー全体のコンテナ */
.unique-slider-container {
  width: 100%;  /* 横幅100% */
  overflow-x: auto;  /* 横スクロールを有効にする */
  scroll-snap-type: x mandatory;  /* 横スクロールのスナップを設定 */
  -webkit-overflow-scrolling: touch; /* スムーズなスクロールを有効にする（特にモバイル） */
  display: flex;
  justify-content: center;  /* 中央寄せ */
  margin: 1em auto;
}

/* スライダーのラッパー */
.unique-slider {
  display: flex;
  flex-wrap: nowrap;  /* 横並びにスライドを並べる */
  scroll-snap-align: start;  /* スクロール位置が一致した際にその位置で止まる */
  width: auto;  /* 自動幅調整に変更 */
}

/* 各スライドのスタイル */
.unique-slide {
  flex: 0 0 auto;  /* 幅は自動で決まるが、縮むことはない */
  width: 50%;  /* 幅50%で表示 */
  height: auto;  /* 高さを指定 */
  scroll-snap-align: center;  /* スナップ時に中央に表示されるように設定 */
  position: relative;
  margin: 0 10px; /* スライド間に少し隙間を作る */
}

.unique-slide img {
  width: 100%;  /* 画像の幅を100%に */
  height: auto;  /* 画像の高さを自動に */
  object-fit: cover;  /* 画像がスライド領域をカバーするように */
  border-radius: 10px;
}

.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;
  }
}


.fastplan-wrapper {
  background: #fff;
  border-radius: 12px;
  padding: 24px;
  font-family: 'Noto Sans JP', sans-serif;
  max-width: 500px;
  margin: 0 auto;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.fastplan-title {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 8px;
  text-align: center;
  color: #444;
}

.fastplan-note,
.fastplan-normal {
  font-size: 14px;
  color: #666;
  text-align: center;
  margin: 4px 0;
}

.fastplan-normal strong {
  color: #e60033;
}

.fastplan-table {
  width: 100%;
  border-collapse: collapse;
  margin-top: 16px;
  margin: 1em auto;
  max-width: 800px;
}

.fastplan-table th,
.fastplan-table td {
  border: 1px solid #ddd;
  padding: 10px;
  text-align: center;
  font-size: 14px;
}

.fastplan-table th {
  background-color: #f8f8f8;
  color: #333;
  font-weight: bold;
}

.movie-block__wrapper.uix-movie-section {
  background: #fff;
  border-radius: 12px;
  padding: 24px 10px;
  margin-bottom: 32px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05);
  max-width: 800px;
  margin: 1em auto;
}
.movie-block__title.uix-movie-title {
  font-size: 20px;
  margin-bottom: 8px;
  color: #333;
}
.movie-block__price.uix-movie-price {
  font-size: 14px;
  color: #555;
  margin-bottom: 8px;
  line-height: 22px;
}
.movie-block__note.uix-movie-note {
  font-size: 12px;
  color: #999;
}
.movie-block__cta-link.uix-movie-cta {
  display: inline-block;
  font-size: 14px;
  color: #007BFF;
  margin-bottom: 16px;
  text-decoration: none;
}
.movie-block__cta-link.uix-movie-cta:hover {
  text-decoration: underline;
}
.movie-block__thumb-group.uix-movie-thumbnails {
  display: flex;
  gap: 1%;
  justify-content: center;
  align-items: center;
}
.movie-thumb__item.uix-thumb {
  display: block;
  width: 31%;
  min-width: 100px;
  transition: transform 0.2s;
  border-radius: 8px;
  overflow: hidden;
}
.movie-thumb__item.uix-thumb img {
  width: 100%;
  height: auto;
  display: block;
}
.movie-thumb__item.uix-thumb:hover {
  transform: scale(1.03);
}




.uix-option-wrapper {
  font-family: 'Noto Sans JP', sans-serif;
  max-width: 700px;
  margin: 1em auto;
}

.uix-option-category {
  font-size: 16px;
  font-weight: bold;
  margin: 2em auto;
  color: #333;
}

.uix-option-item {
  background: #fff;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.05);
  display: flex;
  flex-direction: column;
  gap: 4px;
  line-height: 25px;
}

.uix-option-label {
  font-size: 15px;
  color: #222;
  font-weight: 500;
}

.uix-option-price {
  font-size: 15px;
  color: #1cb4a7;
  font-weight: bold;
  align-self: flex-end;
}

.uix-option-desc {
  font-size: 13px;
  color: #666;
  line-height: 22px;
}

.uix-option-link {
  font-size: 13px;
  color: #0066cc;
  text-decoration: underline;
}

@media screen and (max-width: 600px) {
  .uix-option-wrapper {
    padding: 20px;
  }
  .uix-option-item {
    padding: 12px;
  }
  .uix-option-price {
    align-self: flex-start;
  }
}


.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;
  }
}



.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;
}
.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;
}

/* セクション全体 */
.hero-section {
  background-color: #f9f9f4;
  padding: 10px 4px;
}

/* コンテナ中央揃え */
.hero-container {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  max-width: 1500px;
  margin: 0 auto;
}

/* 左側イメージ */
.hero-image {
  flex: 1 1 45%;
  text-align: center;
  display: block;
}
.hero-image-sp{
  display: none;
}
.hero-image img {
  width: 100%;
  max-width: 500px;
  height: auto;
  border-radius: 10px;
}



.highlight {
  color: #00b894;
}

.btn-primary {
  background: #ffffff;
  border: 2px solid #00b894;
  color: #00b894;
  padding: 17px 9px;
  border-radius: 30px;
  text-decoration: none;
  width: 48%;
  margin: 1%;
  font-size: 15px;
  transition: all 0.3s;
  position: relative;
}

.btn-primary:hover {
  background: #00b894;
  color: #ffffff;
}
.btn-primary span{
  position: absolute;
  top: 14px;
  font-size: 18px;
  font-weight: bold;
  right: 17px;
  transform: rotate(-42deg);
}
/* LINE特典エリア */
.hero-line-section {
  margin-top: 20px;
}


.hero-badges{
  display: flex;
  justify-content: center;
  align-items: center;
  max-width: 1000px;
  margin: 1em auto;
}
.hero-badges div{
  width: 31%;
  margin: 1%;
}
.hero-badges img{
  width: 100%;
  height: auto;
}

@font-face {
  font-family: 'ZenMaruGothic';
  src: url('/fonts/ZenMaruGothic-Regular.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ZenMaruGothic';
  src: url('/fonts/ZenMaruGothic-Bold.ttf') format('truetype');
  font-weight: bold;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ZenMaruGothic';
  src: url('/fonts/ZenMaruGothic-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ZenMaruGothic';
  src: url('/fonts/ZenMaruGothic-Medium.ttf') format('truetype');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ZenMaruGothic';
  src: url('/fonts/ZenMaruGothic-Black.ttf') format('truetype');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

.chiku {
  font-family: 'ZenMaruGothic', sans-serif;
  font-weight: 700;
}

@media(max-width: 880px) {
  .gfadatab {
      font-size: 20px;
  }
  .gfadatab1 {
    font-size: 14px;
  }
}
@media(max-width: 750px) {
  .gfadatab1 {
    font-size: 15px;
  }
  .gfadatab {
    font-size: 21px;
  }
  .hero-image {
    display: none;
  }
  .hero-image-sp{
    display: block;
    width: 100%;
    height: auto;
  }
  .hero-image-sp img{
    width: 100%;
    height: auto;
  }
  .hero-section{
    padding: 0;
  }
  p.tyuuifafga{
    display: none;
  }
  .btn-primary{
    text-align: left;
  }
  .btn-primary span{
    right: 9px;
  }
  p.hero-line {
    background: #ffffff;
    padding: 2px 8px;
    display: inline-block;
    line-height: 45px;
    margin: 10px 0 0 0; /* marginは初期化 */
    text-align: right;
    float: right; /* ←これ！右にピタッとくっつける魔法 */
  }
  .hero-badges{
    margin: 0.1em auto;
  }
}

.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;
}

.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%;
  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;
}

.video-preview__details {
  font-size: 12px;
  color: #666;
  margin: 0;
}

/* モーダル */
.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: 90%;
  width: 600px;
}

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

.video-modal__close {
  position: absolute;
  top: 8px;
  right: 12px;
  background: transparent;
  border: none;
  font-size: 24px;
  color: #333;
  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);          /* ほんの少し大きく */
}