.trans{
  animation-name: fadein;
  animation-duration: 1s; 
  animation-delay: .5s;
  animation-fill-mode: forwards;
  position: relative;
  opacity: 0; 
}
@keyframes fadein {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

/*common*/
section{
}
.inner{
  width: 90%;
  max-width: 1052px;
  margin: 0 auto;
  position: relative;
}
.inner02{
  width: 90%;
  max-width: 1212px;
  position: relative;
  margin: 0 auto;
}
.inner03{
  width: 90%;
  max-width: 800px;
  position: relative;
  margin: 0 auto;
}
.inner_full{
  width: 100%;
  position: relative;
}
.flex{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.sp_none{
  display: block;
}
.pc_none{
  display: none;
}
/*head*/

.head01{
  max-width: 912px;
  margin: 0 auto 40px;
  font-size: 32px;
  letter-spacing: 0.05em;
  line-height: 150%;
  font-weight: 500;
}
html[lang="ja"] .head01,
html[lang="ja"] .head02,
html[lang="ja"] .head03{
  letter-spacing: 0.2em;
}
#top .head01{
  padding: 50px 0 30px;
}
.head01 span{
  font-size: 18px;
  font-weight: 600;
  margin-bottom: 10px;
  display: block;
  line-height: 1;
  letter-spacing: 0.05em;
}
.head02{
  font-size: 24px;
  font-weight: 500;
  line-height: 150%;
  letter-spacing: 0.05em;
  max-width: 912px;
  margin: 0 auto 30px;
}
.head02 span{
  margin-bottom: 10px;
  display: block;
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.05em;

}
.head03{
  font-size: 30px;
  font-weight: 500;
  letter-spacing: 0.05em;
  line-height: 180%;
  margin-bottom: 120px;
}
#contents_detail .head03{
  margin-bottom: 0;
}
/*ttl*/
.ttl01{
  font-size: 23px;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0.05em;
  margin-bottom: 30px;
}
/*txt*/
.txt01,
.detail_box01 p{
  font-size: 20px;
  line-height: 210%;
  font-weight: 300;
}
html[lang="ja"] .txt01,
html[lang="ja"] .detail_box01 p{
  text-align: justify;
}

.txt02{
  font-size: 18px;
}
.txt03{
  font-size: 15px;
}
.txt04{
  font-size: 14px;
}
.txt05{
  font-size: 17px;
}
.txt06{
  font-size: 16px;
  letter-spacing: 0.05em;
  font-synthesis-weight: 600;
  line-height: 150%;
}
.txt_gray{
  color: var(--color-txt01);
  text-decoration: underline;
  letter-spacing: 0.2em;
  line-height: 170%;
}
.txt_gold{
  color: var(--color-gold);
}
.txt_box01{
  /*max-width: 912px;*/
  margin: 0 auto;
  padding: 0 70px;
}
.txt_box01 .cat{
  margin-bottom: 10px;
}
/*font*/
.sans{
  font-family: "Noto Sans JP", sans-serif;
}
/*bottom*/
.btm0{
  margin-bottom: 0!important;
}
.btm40{
  margin-bottom: 40px;
}
.btm100{
  margin-bottom: 100px;
}
/*btn*/
.btn01{
  width: 100%;
  display: block;
  color: var(--color-txt01);
  font-size: 18px;
  position: relative;
  transition: var(--transition);
  overflow: visible !important;
}
.btn01::before,
.btn01::after{
  content: '';
  position: absolute;
  left: 0;
  width: 100%;
  height: 1px;
  transition: var(--transition);
  background-color: var(--color-txt01);
}
.btn01::after{
  top: 5px;
}
.btn01::before{
  bottom: 5px;
}
.btn01:hover::after{
  top: 0;
}
.btn01:hover::before{
  bottom: 0;
}
.btn01:hover{
}
button.btn01{
  color: var(--color-txt01);
  font-family: "Noto Serif JP", serif;
  font-weight: 400;
}
.btn01 span{
  height: 75px;
  width: 100%;
  position: relative;
  display: flex;
  padding: 0 30px;
  align-items: center;
  transition: var(--transition);
}
.btn01 span::after,
.btn01 span::before{
  content: '';
  position: absolute;
  background-color: var(--color-txt01);
  width: 1px;
  height: 100%;
  top: 0;
  transition: var(--transition);
}
.btn01 span::after{
  right: 5px;
}
.btn01 span::before{
  left: 5px;
}
.btn01:hover span::after{
  right: 0;
}
.btn01:hover span::before{
  left: 0;
}
.btn01:hover span{
/*  background-color: var(--color-txt01);
  color: var(--color-black);*/
}
.btn02{
  font-size: 17px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  transition: var(--transition);
  width: fit-content;
}
.content_list01 .btn02{
  font-size: 14px;
}
button.btn02{
  color: var(--color-txt01);
  font-family: "Noto Serif JP", serif;
  font-weight: 500;
}
.btn02:hover,
.content_list01 li:hover .btn02,
.movie_list01 li:hover .btn02{
  color: var(--color-logo);
  padding-left: 10px;
}
.btn02 span{
  width: 20px;
  height: 20px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
  background-image: url(../icon/icon_detail_white.svg);
  transition: var(--transition);
  margin-right: 10px;
}
.list_box01{
  align-items: center;
}
.list_box01 .btn02 span,
.vr_box01 .btn02 span,
#movie .btn02 span{
  background-image: url(../icon/icon_detail_white.svg);
}
.btn02:hover span{
  background-image: url(../icon/icon_detail_hover.svg)!important;
}
.list_box01 .btn02:hover span,
.content_list01 li:hover .btn02 span,
#movie .movie_list01 li:hover .btn02 span{
  background-image: url(../icon/icon_detail_hover.svg);
}
.btn03{
  min-width: 138px;
  height: 38px;
  color: #fff;
  border: 1px solid #fff;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  transition: var(--transition);
}
.btn03:hover,
.slide_box01:hover .btn03{
  background-color: var(--color-gold);
  border-color: var(--color-gold);
}
/*btn box*/
.btn_list01{
  margin: 100px 0;
}
#contents_detail .btn_list01{
  margin-bottom: 150px;
}
#top .btn_list01.clm01{
  margin: 150px 0 100px;
}
.open_box01 .btn_list01{
  margin-top: 0;
}
.open_box01 .txt02{
  line-height: 170%;
  color: var(--color-logo);
}
.btn_list01.clm01{
  margin-top: 100px;
}
.btn_list01 li{
  width: calc((100% - 10px) / 2);
  margin-bottom: 10px;
}
.btn_list01.clm01 li{
  width: 100%;
}
.btn_list01.clm03 li{
  width: calc((100% - 40px) / 3);
  margin-bottom: 0;
}
.btn_list01.clm04 li{
  width: calc((100% - 60px) / 4);
  margin-bottom: 0;
}
.open_box01 .btn_list01 li{
  width: calc((100% - 20px) / 2);
}
.btn_list01 li:nth-last-child(1),
.btn_list01 li:nth-last-child(2){
  margin-bottom: 0;
}
#main_contents{
  margin-top: var(--top);
  z-index: 1;
}
.section_top{
  padding-top: 150px;
}
.section_btm{
  padding-bottom: 150px;
}
.section_all{
  padding: 150px 0;
}
/*padding box*/
.pad_box01{
  width: 100%;
  max-width: 652px;
  margin: 0 0 0 auto;
}
/*top*/
/* スマホだけロック */

.mv{
  position: relative;
}
/* ===== スクロールバー非表示（見た目だけ） ===== */

/* Chrome / Edge / Safari */
::-webkit-scrollbar {
  width: 0;
  height: 0;
}

/* Firefox */
html {
  scrollbar-width: none;
}

/* IE / 古いEdge（念のため） */
body {
  -ms-overflow-style: none;
}
/* MVの中だけがスナップスクロール */
.mv_box_in{
  height: var(--mv-h);
  overflow-y: scroll;                 /* auto より iOS で安定しやすい */
  -webkit-overflow-scrolling: touch;
  scroll-snap-type: y mandatory;
}

/* 1枚＝1画面 */
.mv_img_box{
  scroll-snap-stop: always;
  height: var(--mv-h);
  scroll-snap-align: start;
  position: relative;
}

/* 背景画像（今の作りに合わせて） */
.mv .img{
  position:absolute;
  inset:0;
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.mv .img::after{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, .1);
  pointer-events: none;
}
/* ★これがあると高さが壊れるので外す（重要） */
/*
.mv_img_box .img{
  width: 100%;
  height: auto;
  padding-top: 100vh;
  position: relative;
}
*/

/* afterMvは“本文の開始位置”の目印なので高さ0でOK */
#afterMv{ height: 0; }

.mv_txt_box{
  position: absolute;
  left: 150px;
  bottom: 70px;
  max-width: 600px;
}
.mv_txt_box p{
  color: #fff;
}
.mv_ttl01{
  font-size: 32px;
  font-weight: 600;
  line-height: 150%;
  letter-spacing: 0.2em;
  margin-bottom: 36px;
}
html[lang="en"] .mv_ttl01{
  letter-spacing: 0.05em;
}
.txt_link01{
  font-size: 23px;
  font-weight: 600;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
  transition: var(--transition);
  color: #fff;
}
.txt_link01:hover{
  padding-left: 10px;
}
.txt_link01 span{
  width: 25px;
  height: 25px;
  background-size: contain;
  background-image: url(../icon/icon_detail_white.svg);
  background-repeat: no-repeat;
  background-position: center center;
  display: inline-block;
  margin-right: 10px;
  transition: var(--transition);
}
.txt_link01:hover span{
}
.mv_txt01{
  line-height: 150%;
  margin-bottom: 36px;
}
.mvCount{
  position: absolute;
  right: 150px;
  bottom: 70px;
  z-index: 3;
  font-size: 25px;
  letter-spacing: .005em;
  color: #fff;
  pointer-events: none;
  font-weight: bold;
  transition: var(--transition);
}
.mv.is-inactive {
  pointer-events: none;
}

/*top01*/
#top01{
}
#top01 .inner{
  padding-bottom: 100px;
  border-bottom: 1px solid var(--color-gray02);
  position: relative;
}

/*top02*/
#top02{
  padding-top: 50px;
  padding-bottom: 100px;
}
.contents_slide01 {
  overflow: visible;
}
.contents_slide01 .img{
  width: 100%;
  height: auto;
  padding-top: 144.6%;
  background-size: cover;
  background-position: center center;
  position: relative;
}
/*.contents_slide01 .img::after{
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  transition: var(--transition);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, 0.9) 100%);
  background-blend-mode: multiply;
}*/
.contents_slide01 .swiper-slide:hover .img::after{
  opacity: 0.4;
}
/* 標準の矢印（::after）を消す */
.contents_slide01 .swiper-button-prev::after,
.contents_slide01 .swiper-button-next::after {
  display: none;
}

/* 共通設定 */
.contents_slide01 .swiper-button-prev,
.contents_slide01 .swiper-button-next {
  width: 28px;
  height: 28px;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
  position: relative;
}

/* 左矢印 */
.contents_slide01 .swiper-button-prev {
  background-image: url("../icon/arrow_prev.svg");
}

/* 右矢印 */
.contents_slide01 .swiper-button-next {
  background-image: url("../icon/arrow_next.svg");
}
.contents_slide01 .swiper-button-next, .swiper-button-prev {
  svg {
    display: none;
  }
}
.swiper-wrapper{
  height: auto!important;
}
.arrow_box01{
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 40px;
}
.arrow_box01 .swiper-pagination{
  position: relative;
  width: fit-content;
  font-size: 18px;
  font-weight: 500;
  margin: 0 50px;
}
.contents-slide-num .sep-line {
  display: inline-block;
  width: 1px;
  height: 26px;
  background: var(--color-txt01);
  margin: 0 20px;
  vertical-align: middle;
}
.contents_slide01 .txt_box{
  position: absolute;
  left: 50px;
  bottom: 50px;
  width: calc(100% - 100px);
}
.contents_slide01 .cat.txt02{
  line-height: 1;
  margin-bottom: 10px;
  font-weight: 500;
  color: #fff;
}
.contents_slide01 .ttl{
  font-size: 32px;
  color: #fff;
  font-weight: 500;
  letter-spacing: 0.2em;
  line-height: 1.3;
  margin-bottom: 20px;
}
.contents_slide01 .swiper-slide:hover .ttl,
.contents_slide01 .swiper-slide:hover .cat{
  /*color: var(--color-black);*/
}
#top02 .btn_list01.clm01{
  margin-bottom: 0;
}

/*about*/
#about01{
  padding-bottom: 180px;
}
.intro.txt_box01{
  margin-bottom: 130px;
}
.about_box01{
  margin-bottom: 100px;
}
.about_box01 .txt01,
.detail_box01 p{
  max-width: 562px;
  margin: 0 0 0 auto;
}
.about_box01 .img{
  margin-bottom: 100px;
}
.img_list01{
}
.img_list01 li{
  margin-bottom: 10px;
}
.img_list01 li .img{
  margin-bottom: 0;
}
.img_list01 li:last-child{
  margin-bottom: 0;
}
body.about .section_btm{
  padding-bottom: 100px;
}
/*movie area*/
#movie_area{
}
body.about #movie_area{
  display: none;
}
#movie_area .inner02{
  padding: 50px 0 180px;
  border-top: 1px solid var(--color-main);
  border-bottom: 1px solid var(--color-main);
}
#contents_detail #movie_area .inner02{
  border-bottom: none;
  padding-bottom: 0;
}
#contents_detail.about #movie_area .inner02{
  border-bottom: 1px solid var(--color-main);
  padding-bottom: 180px;
}
.movie_box01 .box_in{
  width: calc((100% - 50px) / 2);
}
.movie_box01 .box_in img{
  width: 100%;
}
.movie_box01 .txt01{
  font-weight: 400;
  line-height: 150%;
  letter-spacing: 0.05em;
  margin-bottom: 30px;
}
.modal_box02.remodal{
  width: 90%;
  max-width: 1212px;
  padding: 0;
  background-color: transparent;
}
.modal_box02 .close_btn02{
  position: fixed!important;
  right: -50px;
  top: -50px;
}
.modal-close-fixed{
  position: fixed;
  top: 16px;
  right: 16px;
  z-index: 10001;
  display: none;
}
/* iframe外側のdiv */
.vimeo_box {
  position: relative;
  height: 0;
  padding: 0 0 56.25%;
  overflow: hidden;
  margin-bottom: 20px;
}
 
/* iframe */
.vimeo_box iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  max-width: 100%;
}
#about02{
  padding-top: 50px;
}
#about02 .ttl01.center{
  margin-bottom: 80px;
}
.about_box02{
  margin-bottom: 50px;
}
.about_box02 .ttl01{
  margin-bottom: 5px;
}
.about_box02 .txt01{
  line-height: 150%;
}

/*other area*/
.other_box01 .img{
  width: 100%;
  height: auto;
  padding-top: 49.6%;
  background-size: cover;
  background-position: center center;
  position: relative;
}
.other_box01 .img::after{
  content: '';
  background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 100%);
  background-blend-mode: multiply;
  width: 100%;
  height: 100%;
  position: absolute;
  left: 0;
  top: 0;
}
.other_box01 p,
.other_box01 a{
  color: #fff;
}
.other_box01 .inner{
  position: absolute;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1;
}
.other_box01 .ttl01{
  font-weight: 400;
  margin-bottom: 18px;
}
.other_ttl02{
  font-weight: 600;
  font-size: 32px;
  letter-spacing: 0.05em;
  line-height: 150%;
  margin-bottom: 18px;
}

/*contents*/
.contents_ttl01.txt01{
  line-height: 1;
  font-weight: 500;
  margin-bottom: 40px;
}
html[lang="ja"] .contents_ttl01.txt01{
  letter-spacing: 0.2em;
}
.contents_ttl02.head01{
  max-width: 100%;
  /*font-size: 20px;*/
}
.ttl_box01{
  padding: 0 30px;
  margin-bottom: 60px;
}
.content_list01{
}
.content_list01 li{
  width: calc((100% - 30px) / 2);
  border-top: 1px solid var(--color-gray);
  padding: 25px 35px;
}
.content_list01 li:nth-last-child(1),
.content_list01 li:nth-last-child(2){
  border-bottom: 1px solid var(--color-gray);
}
.list_box01 .box_l,
.list_box01 .box_r{
  width: calc((100% - 20px) / 2);
}
.list_box01 .img{
  width: 100%;
  height: auto;
  padding-top: 85.7%;
  background-size: cover;
  background-position: center center;
}
.list_box01 .cat,
.list_box01 .txt{
  font-size: 14px;
  letter-spacing: 0.2em;
  font-weight: 500;
}
.list_box01 .cat{
  margin-bottom: 10px;
  line-height: 1;
}
.list_box01 .txt{
  line-height: 150%;
  margin-bottom: 20px;
}
.list_box01 .ttl{
  line-height: 150%;
  letter-spacing: 0.2em;
  font-size: 17px;
  font-weight: 500;
  margin-bottom: 20px;
}
#contents .btn_list01{
  margin-top: 0;
}

/*content detail*/
.txt_box01 .info_txt01{
  line-height: 170%;
  letter-spacing: 0.2em;
  margin-bottom: 40px;
}
#detail02{
  padding-bottom: 180px;
}
.detail_box01{
}
.detail_box01 p{
  line-height: 210%;
  letter-spacing: 0.1em;
  max-width: 562px;
  padding-right: 70px;
  margin: 100px 0 100px auto;
}
.detail_box01 a{
  text-decoration: underline;
  color: var(--color-link);
  text-decoration-thickness: from-font;
}
.detail_box01 em{
  font-style: italic;
}
.detail_box01 img{
  margin-bottom: 10px;
  width: 100%;
}
.detail_box01 ul{
}
.detail_box01 ul li{
  width: calc((100% - 10px) / 2);
}
#contents_detail #movie_area{
}
/*contents audio*/
#contents_detail .audio_bar{
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  border: none;
  z-index: 100;
}
.audio_bar .txt01.txt_gold{
  position: absolute;
  left: 25px;
  top: 50%;
  font-weight: 500;
  font-size: 14px;
  letter-spacing: 0.05em;
  transform: translateY(-50%);
  color: var(--color-txt01);
}
.js-audio-toggle .icon-pause { display: none; }
.js-audio-toggle.is-playing .icon-play { display: none; }
.js-audio-toggle.is-playing .icon-pause { display: inline-block; }

.audio-time-row{
  display:flex;
  justify-content:space-between;
  margin-top:3px; /* 好みで */
  font-size:13px; /* 好みで */
  line-height:1;
  padding: 0 15px;
  font-family: "Noto Sans JP", sans-serif;
}

.audio-time-row span{
}


/*sns*/
#sns_area{
  padding-bottom: 180px;
}
.other .inner{
  max-width: 800px;
}
.sns_box01.flex{
  align-items: center;
  height: 85px;
  justify-content: center;
  margin-bottom: 20px;
}
.sns_box01 .txt02{
  margin-right: 30px;
}
.sns_list01 li{
  width: 45px;
  margin-right: 15px;
  transition: var(--transition);
  border-radius: 50%;
}
.sns_list01 li:last-child{
  margin-right: 0;
}
.sns_list01 li:hover{
  background-color: var(--color-gold);
}

/*questionnaire area*/
#questionnaire_area{
  background-color: var(--color-survey);
  padding: 100px 0;
}
#questionnaire_area .txt02{
  font-weight: 500;
  letter-spacing: 0.1em;
  margin-bottom: 15px;
  color: #fff;
}
#questionnaire_area .txt03{
  font-weight: 500;
  margin-bottom: 35px;
  letter-spacing: 0.1em;
  color: #fff;
}
#questionnaire_area .btn01{
}
/*audio*/
/*.audio_box01{
  opacity: 0;
  position: absolute;
  pointer-events: none;
  visibility: hidden;
}*/
.remodal-overlay{
  background: #101010E6!important;
}
.modal_box01.remodal{
  max-width: 512px;
  background-color: #fff;
  padding: 60px 50px;
  position: relative;
}
.modal_box01.audio_box01.remodal{
  padding-bottom: 140px;
}
.modal_box01.remodal p{
  text-align: left;
  font-weight: 600;
}
.modal_ttl01.txt01{
  letter-spacing: 0.05em;
  margin-bottom: 20px;
  padding-bottom: 20px;
  line-height: 1;
  border-bottom: 1px solid var(--color-black);
}
.modal_box01 .img{
  margin-top: 25px;
}
.modal_box01 .img:empty{
  display: none;
}
.audio_box01 .txt04{
  letter-spacing: 0.2em;
  margin-bottom: 10px;
}
.audio_box01 .txt05{
  line-height: 150%;
  letter-spacing: 0.2em;
  margin-bottom: 20px;
}
.audio_bar{
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 96px;
  background-color: var(--color-bg);
  /*border: 1px solid var(--color-logo);*/
}
.remodal-cancel{
  background: none!important;
  background-color: transparent!important;
  width: 35px!important;
  height: 35px!important;
  background-image: url(../icon/icon_close.svg)!important;
  background-size: contain!important;
  background-position: center center!important;
  min-width: 35px!important;
  position: absolute!important;
  right: 20px;
  top: 20px;
}
.modal-close-fixed{
  width: 35px;
  height: 35px;
  top: max(16px, env(safe-area-inset-top));
  right: max(16px, env(safe-area-inset-right));
  z-index: 10001;
  background-image: url(../icon/icon_close.svg)!important;
  background-size: contain!important;
  background-position: center center!important;
  min-width: 35px;
  position: fixed;
  display: none;
  pointer-events: none;
}

.js-audio-toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  background: none;
  border: none;
}

.js-audio-toggle .icon-play,
.js-audio-toggle .icon-pause {
  width: 28px;
  height: 32px;
  fill: var(--color-txt01);
}

/* 再生 / 一時停止 切り替え */
.js-audio-toggle .icon-pause {
  display: none;
}
.js-audio-toggle.is-playing .icon-play {
  display: none;
}
.js-audio-toggle.is-playing .icon-pause {
  display: block;
}

/*
.js-audio-toggle .icon-pause { display: none; }
.js-audio-toggle.is-playing .icon-play { display: none; }
.js-audio-toggle.is-playing .icon-pause { display: inline-block; }*/

.js-audio-rate-cycle{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border: 1px solid #ccc;
  background: #fff;
  cursor: pointer;
}
.audio-rate{
  position: absolute;
  right: 25px;
  top: 50%;
  transform: translateY(-50%);
}
.audio-seek{
  position: absolute;
  left: -2px;
  top: -3px;
  /*top: -10px;*/
  width: 100%;
}
/* range本体 */
.js-audio-range {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 3px;
  background: transparent;
  outline: none;

  /* JSで更新する進捗（0%〜100%） */
  --played: 0%;
}

/* Chrome / Safari / Edge: トラックをグラデで塗り分け */
.js-audio-range::-webkit-slider-runnable-track {
  height: 3px;
  border-radius: 0;
  overflow: hidden;
  background: linear-gradient(
    to right,
    var(--color-main) 0%,
    var(--color-main) var(--played),
    var(--color-txt01) var(--played),
    var(--color-txt01) 100%
  );
}

/* Firefox: ベース */
.js-audio-range::-moz-range-track {
  height: 3px;
  border-radius: 0;
  background: #ffffff;
}

/* Firefox: 進捗部分 */
.js-audio-range::-moz-range-progress {
  height: 3px;
  border-radius: 0;
  background: #0a84ff;
}

/* 丸（thumb）を消す */
.js-audio-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 0;
  height: 0;
  background: transparent;
  border: 0;
  box-shadow: none;
}
.js-audio-range::-moz-range-thumb {
  width: 0;
  height: 0;
  background: transparent;
  border: 0;
}

.js-audio-toggle{
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}
.js-audio-rate-cycle{
  width: 58px;
  height: 28px;
  border-radius: 5px;
  border: 2px solid var(--color-txt01);
  color: var(--color-txt01);
  display: flex;
  font-size: 13px;
  letter-spacing: 0.05em;
  background-color: var(--color-bg);
  transition: var(--transition);
}
.js-audio-rate-cycle:hover{
  background-color: var(--color-txt01);
  color: var(--color-black);
}
#other_area{
  padding-bottom: 96px;
}

/*movie*/
.movie_list01 li{
  width: calc((100% - 50px) / 2);
  margin-bottom: 50px;
  padding: 25px 30px;
}
.movie_list01 li:nth-last-child(1),
.movie_list01 li:nth-last-child(2){
  margin-bottom: 0;
}
.movie_list01 .img{
  margin-bottom: 15px;
}
.movie_list01 li .img img{
  width: 100%;
}
.movie_list01 .ttl{
  font-weight: 500;
  line-height: 150%;
  margin-bottom: 10px;
}
.movie_list01 .cat{
  display: block;
  margin-bottom: 10px;
}
.movie_list01 .txt{
  margin-bottom: 10px;
}
.remodal-wrapper:has([data-remodal-id="modal-movie"]) {
  padding: 0 !important;
}

#movie #btn_area,
#vr #btn_area{
  padding-bottom: 100px;
}
/*vr*/
.vr_box01{
  padding: 50px 35px;
  align-items: center;
  border-top: 1px solid var(--color-gray);
  border-bottom: 1px solid var(--color-gray);
}
.vr_box01 .box_l{
  width: 33%;
}
.vr_box01 .box_r{
  width: 67%;
}
.vr_box01 .ttl{
  margin-bottom: 25px;
}

/*アンケート*/
.remodal-wrapper:has(.surveyRemodal) {
  padding: 0 25px!important;
}

.survey__choices { display:flex; flex-direction:column; gap:10px; }
.survey__choices button,
.survey__closeBtn{
  width:100%;
  padding:15px;
  line-height: 1;
  height: 45px;
  font-size: 15px;
  font-weight: 600;
  display: flex;
  align-items: center;
  color: var(--color-black);
  border:1px solid var(--color-black);
  background:transparent;
  text-align:left;
  cursor:pointer;
  border-radius: 5px;
  font-family: "Noto Serif JP", serif;
}
.survey__progress{ text-align:center; margin-top:40px; font-size:18px; font-weight:600; }
.survey__thanks p{ margin-bottom:40px; text-align:left; font-weight:600; font-size:16px;
line-height:150%; letter-spacing:0.05em; }
/*.survey__closeBtn{ margin-top:12px; width:100%; padding:10px; }*/

/* hidden属性は最優先で非表示にする */
[hidden] { display: none !important; }

.remodal.surveyRemodal{
  max-width: 512px;
  background-color: var(--color-txt01);
  padding: 50px 35px;
}
.survey__title{
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 25px;
  padding-bottom: 25px;
  color: var(--color-black);
  position: relative;
  border-bottom: 1px solid var(--color-black);
}
.survey__lead{
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 150%;
  text-align: left;
  margin-bottom: 40px;
}
.survey__qTitle{
  font-size: 20px;
  font-weight: 600;
  letter-spacing: 0.05em;
  line-height: 1;
  margin-bottom: 20px;
  text-align: left;
}
.surveyRemodal .survey__closeBtn{
  position: relative;
  bottom: auto;
  left: auto;
}
.survey__stage {
  transition: opacity .25s ease;
  opacity: 1;
}

.survey__stage.is-fading {
  opacity: 0;
}

/*map*/
.map_img{
  margin: 100px 0;
}
.map_list01 li{
  width: calc((100% - 30px) / 2);
  border-top: 1px solid var(--color-gray);
  font-size: 17px;
  line-height: 150%;
  letter-spacing: 0.2em;
  font-weight: 500;
}
.map_list01 li:nth-last-child(2),
.map_list01 li:nth-last-child(1){
  border-bottom: 1px solid var(--color-gray);
}
.map_list01 li a{
  padding: 25px 75px 25px 35px;
  position: relative;
  display: block;
  letter-spacing: 0.05em;
  font-size: 17px;
  line-height: 150%;
  transition: var(--transition);
}
.map_list01 li a:hover{
  color: var(--color-logo);
}
.map_list01 li a span.arrow{
  width: 20px;
  height: 20px;
  background-image: url(../icon/icon_detail_white.svg);
  background-size: contain;
  background-position: center center;
  background-repeat: no-repeat;
  display: inline-block;
  position: absolute;
  right: 35px;
  top: 50%;
  transform: translateY(-50%);
  transition: var(--transition);
}
.map_list01 li a:hover span.arrow{
  right: 25px;
  background-image: url(../icon/icon_detail_hover.svg);
}
#map .btn_list01{
  margin: 150px 0 0;
}
#map .clm01_box{
  display: none;
}
@media screen and (max-width: 1024px) {
#main_contents{
  margin-top: 90px;
}
/*inner*/
.inner,
.inner02,
.inner03{
  width: calc(100% - 50px);
}
.txt01{
  font-size: 15px;
}
.txt02{
  font-size: 13px;
}
/*btn*/
.open_box01 .btn_list01 li,
.open_box01 .btn_list01 li:nth-last-child(2){
  width: 100%;
  margin-bottom: 20px;
}

/*section*/
.section_top{
  padding-top: 50px;
}
/*mv*/
.mv_txt_box{
  left: 25px;
  bottom: 70px;
}
.mv_ttl01{
  font-size: 24px;
  margin-bottom: 35px;
}

.txt_link01{
  font-size: 17px;
}
.txt_link01 span{
  width: 20px;
  height: 20px;
}
.mvCount{
  right: 25px;
  font-size: 20px;
}
#top01.section_top{
  padding-top: 0;
}
.head01{
  font-size: 24px;
}
.head01 span{
  font-size: 15px;
  margin-bottom: 10px;
}
.contents_ttl02.head01{
  font-size: 20px;
}
.head03{
  font-size: 20px;
  margin-bottom: 60px;
}

.pad_box01{
  padding-left: 75px;
}
#top01 .inner{
  padding-bottom: 80px;
}
.contents_slide01 .txt_box{
  left: 12px;
  bottom: 22px;
  width: calc(100% - 24px);
}
.contents_slide01 .cat.txt02{
  font-size: 11px;
}
.contents_slide01 .ttl{
  font-size: 20px;
}
#top02 .head02{
  margin-bottom: 50px;
  text-align: left;
}
.btn03{
  min-width: 108px;
  height: 33px;
  font-size: 13px;
}
.btn_list01{
  margin: 50px 0 100px;
}
#top .btn_list01.clm01{
  margin-top: 100px;
}
.btn_list01 li,
.btn_list01.clm03 li,
.btn_list01.clm04 li{
  width: 100%;
}
.btn_list01 li:nth-last-child(2){
  margin-bottom: 10px;
}
.btn_list01.clm03 li,
.btn_list01.clm04 li,
.btn_list01 li:nth-last-child(2){
  margin-bottom: 10px;
}
.btn_list01.clm03 li:last-child,
.btn_list01.clm04 li:last-child{
  margin-bottom: 0;
}

.btn01,
html[lang="ja"] .btn01{
  font-size: 15px;
}
.btn02{
  font-size: 14px;
}
.txt_box01{
  padding: 0 10px;
}
.intro.txt_box01{
  margin-bottom: 70px;
}
.about_box01{
  margin-bottom: 40px;
}
.about_box01 .img{
  margin-bottom: 60px;
}
.detail_box01 p{
  max-width: 637px;
  padding: 0 10px;
  margin-top: 40px;
  margin-bottom: 40px;
}
.about_box01 .txt01, .detail_box01 p{
  padding-left: 75px;
  font-size: 16px;
}
#about .about_box01 .img{
  margin-bottom: 40px;
}
.btm100{
  margin-bottom: 40px!important;
}
#about .about_box01 .img_list01 li .img{
  margin-bottom: 10px;
}
#about01{
  padding-bottom: 80px;
}
.inner02 .inner{
  width: 100%;
}
.head02{
  /*font-size: 15px;*/
  margin-bottom: 15px;
  text-align: center;
}
#movie_area .head02{
  font-size: 15px;
}
.ttl01{
  font-size: 15px;
  margin-bottom: 15px;
}
.movie_box01 .txt01{
  margin-bottom: 15px;
}
#movie_area .inner02,
#contents_detail.about #movie_area .inner02{
  padding-bottom: 80px;
}
#about02 .ttl01.center{
  margin-bottom: 30px;
}
.about_box02{
  margin-bottom: 30px;
}
.about_box02 .ttl01{
  font-size: 18px;
}
.other_box01 .img{
  padding-top: 76.33%;
}
.other_box01 .inner{
  left: 15px;
  bottom: 30px;
  transform: translateX(0);
}
.other_ttl02{
  font-size: 24px;
}
/*section*/
.section_all{
  padding: 50px 0;
}
/*contents*/
.ttl_box01{
  padding: 0;
  /*padding: 0 15px;*/
}
#contents01{
  overflow: hidden;
}

.list_box01 .img{
  padding-top: 119%;
}
.list_box01 .ttl{
  letter-spacing: 0.05em;
}
#detail02{
  padding-bottom: 80px;
}
#sns_area.section_top{
  padding-top: 100px;
}
.sns_box01.flex{
  border: none;
  justify-content: flex-start;
}
.other .inner{
  max-width: 100%;
}
#questionnaire_area{
  padding: 45px 10px;
}
#questionnaire_area .txt02{
  font-size: 18px;
}
#movie #btn_area,
#vr #btn_area{
  padding-bottom: 50px;
}
.modal_box01.remodal{
  padding: 60px 35px;
}
.remodal-wrapper{
  padding: 0 55px!important;
}
.map_list01{
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.map_list01 li{
  width: 100%;
}
.map_list01 li:last-child{
  border-bottom: 1px solid var(--color-gray);
}
.map_list01 li:nth-last-child(2){
  border-bottom: none;
}
.map_list01 li a{
  padding: 20px 75px 20px 35px;
}
#map .btn_list01{
  margin-top: 100px;
}
.section_btm{
  padding-bottom: 50px;
}
/*sns*/
#sns_area{
  padding-bottom: 100px;
  border-bottom: 1px solid var(--color-gray);
}
.sns_box01 .txt02{
}
/*aduio*/
.audio_box01 .txt05{
  letter-spacing: 0.05em;
}
.list_box01 .cat, .list_box01 .txt{
  letter-spacing: 0.05em;
}
}
@media screen and (max-width: 768px) {
#main_contents{
}
.pc_none{
  display: block;
}
.sp_none{
  display: none;
}
.inner{
}
.movie_box01 .box_in{
  width: 100%;
}
.movie_box01 .box_in:first-child{
  margin-bottom: 15px;
}
#vr{
  overflow-x: hidden;
}
.content_list01,
.vr_box01{
  width: 100vw;
  margin-left: calc(50% - 50vw);
}
.content_list01 li{
  width: 100%;
}
.movie_list01 li{
  width: 100%;
  padding: 0;
}
.movie_list01 li:nth-last-child(2){
  margin-bottom: 50px;
}
.modal_box02 .close_btn02{
  right: 0;
  top: -40px;

}
.modal_box02.remodal{
  width: 100%;
}
.vr_box01{
  padding: 25px 35px;
}
.vr_box01 .box_l,
.vr_box01 .box_r{
  width: calc((100% - 20px) / 2);
}
.vr_box01 .box_r .img img{
  margin: 0 0 0 auto;
}
.map_img{
  margin: 10px 0 50px;
}
.sns_list01{
  width: calc(100% - 95px);
  justify-content: flex-end;
}
}