@charset "utf-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+JP:wght@500&display=swap');
/*------------------------------------------------------------
	use
------------------------------------------------------------*/
.yugo {
	font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.fix_btn {
	position: fixed;
	top: 100px;
	right: 0;
	width: 50px;
	z-index: 10;
}
.fix_btn a:hover {
	opacity: 0.7;
}
.pageTitle {
	height: 439px;
	display: flex;
	align-items: center;
	justify-content: center;
	text-align: center;
	background: url(../img/common/movie_page_title_bg.jpg) no-repeat center center / cover;
}
.pageTitle h2 {
	margin-bottom: 10px;
	width: 100%;
	color: #fff;
	font-size: 2.5rem;
	font-weight: 500;
	font-family: 'Noto Serif JP', serif;
}
.pageTitle h2 .en {
	display: block;
	font-size: 4.2rem;
	letter-spacing: 0.15em;
}
#main {
	padding: 155px 0 0;
	font-family: 'Noto Serif JP', serif;
	font-weight: 500;
	background-color: #F4EAE4;
}
#main .recommend {
	margin-bottom: 140px;
}
#main .recommend .content{
width: 1002px;
    max-width: 95%;
}
.youtubebox{
    display: flex;
    justify-content: space-between;
	margin-bottom: 5%;
}
.youtube {
  width: 32%;
  aspect-ratio: 9 / 16;
}
.youtube iframe {
  width: 100%;
  height: 100%;
}

@media all and (min-width: 897px) {
	#main .useBox .tabList li:not(.current) a:hover {
		font-weight: bold;
		color: #fff;
		background: #B79F93;
	}
}
@media all and (max-width: 896px) {
.youtubebox{
    display: block;
    /*justify-content: space-between;*/
	
}
.youtube {
  width: 100%;
  aspect-ratio: 9 / 16;
  margin-bottom: 10%;
}





	.fix_btn {
		top: auto;
		bottom: 10px;
		width: 95%;
		padding: 0 10px;
	}
	.pageTitle {
		height: 160px;
	}
	.pageTitle h2 {
		margin-bottom: 7px;
		font-size: 1.25rem;
		letter-spacing: -0.05em;
	}
	.pageTitle h2 .en {
		margin-bottom: -1px;
		font-size: 2.1rem;
		letter-spacing: 0.13em;
	}
	#main {
		padding: 68px 0 0;
	}
	#main .recommend {
		margin-bottom: 67px;
	}
	#main .recommend .content {
		margin: 0 20px;
		padding: 0;
		max-width: inherit;
		border: none;
	}
	#main .h3Ttl01 {
		margin-bottom: 30px;
		font-size: 2rem;
	}
	#main .recommend .text01 {
		margin-bottom: 19px;
		font-size: 1.6rem;
		line-height: 1.8;
		letter-spacing: 0.05em;
	}
	#main .recommend .text01 .txt01 .imgtext {
		width: 30px;
		left: -32px;
		top: 3px;
	}
	#main .recommend .text02 {
		margin-bottom: 15px;
		font-size: 0.85rem;
		line-height: 1.4;
	}
	#main .recommend .text02 span {
		padding-bottom: 0;
	}
	#main .recommend .btnList {
		margin-bottom: 15px;
		width: 152px;
	}
	#main .recommend .btnList li {
		margin-bottom: 4px;
	}
	#main .recommend .btnList li:last-child {
		margin-bottom: 0;
	}
	#main .recommend .btnList li a {
		padding: 6px 5px 6px;
		font-size: 1.25rem;
	}
	#main .recommend .text03 {
		margin-bottom: 7px;
		padding-bottom: 9px;
		font-size: 0.85rem;
		background-size: 100px auto;
	}
	#main .recommend .lineBtn {
		margin-bottom: 6px;
		width: 152px;
	}
	#main .recommend .qr {
		width: 152px;
	}
	#main .useBox {
		margin-bottom: 82px;
	}
	#main .useBox .content {
		width: auto;
		max-width: initial;
	}
	#main .useBox .h3Ttl01 {
		margin-bottom: 36px;
	}
	#main .useBox .tabList {
		margin-bottom: 19px;
		border-bottom: 1px solid #B79F93;
	}
	#main .useBox .tabList li {
		width: calc(50% - 3px);
		min-height: 35px;
	}
	#main .useBox .tabList li a {
		padding: 2px 2px 0;
		font-size: 1.1rem;
		line-height: 1.2;
	}
	#main .useBox .tabArea {
		margin: 0 20px;
	}
	#main .useBox .subBox {
		margin-bottom: 36px;
		padding: 21px 18px 37px;
		display: block;
	}
	#main .useBox .subBox .ttlPhoto {
		margin-bottom: -5px;
		width: auto;
	}
	#main .useBox .subBox .imgBox {
		margin: 0;
		padding: 0;
		width: auto;
	}
	#main .useBox .subBox .slick-arrow {
		margin: 0;
		width: 29px;
		right: -18px;
		background-size: 11px;
	}
	#main .useBox .subBox .slick-arrow:hover {
		opacity: 1;
	}
	#main .useBox .subBox .swiper-button-next {
		background-position: center top 57%;
	}
	#main .useBox .subBox .swiper-button-prev {
		right: auto;
		left: -18px;
		background-position: center bottom 57.1%;
	}
	#main .useBox .subBox .imgBox02 .swiper-button-prev {
		left: -18px;
	}
	#main .useBox .subBox .imgList01 {
		margin: 0;
		padding: 0;
	}
	#main .useBox .subBox .imgList01 li {
		margin: 0;
		padding: 0;
		width: 100% !important;
	}
	#main .useBox .subBox .imgList01 li .imgtext {
		margin-bottom: 6px;
		width: 100px;
	}
	#main .useBox .subBox .imgList01 li .ttl {
		margin-bottom: 4px;
		font-size: 2rem;
		line-height: 1.4;
	}
	#main .useBox .subBox .imgList01 li .pho {
		margin-bottom: 4px;
	}
	#main .useBox .subBox .imgList01 li .text01 {
		margin-bottom: 8px;
		font-size: 1.2rem;
	}
	#main .useBox .subBox .imgList01 li .subTtl {
		margin-bottom: 5px;
	}
	#main .useBox .subBox .imgList01 li .subTtl span {
		font-size: 1rem;
		letter-spacing: 0.05em;
	}
	#main .useBox .subBox .imgList01 li .text02 {
		font-size: 1rem;
	}
	#main .useBox .subBox .imgList01 li p:last-child {
		margin-bottom: 0;
	}
	#main .useBox .subBox .imgList02 {
		margin-top: 0;
		padding: 0;
	}
	#main .useBox .subBox .imgList02 .slick-list {
		padding-right: 77px;
	}
	#main .useBox .subBox .imgList02 li {
		margin: 0;
		display: block;
		width: calc(100% - 77px) !important;
	}
	#main .useBox .subBox .imgList02 .item02 {
		width: calc(100% - 77px) !important;
	}
	#main .useBox .subBox .imgList02 .item03 {
		padding-right: 10px;
		width: calc(100% - 77px) !important;
	}
	#main .useBox .subBox .imgList02 .item04 {
		padding: 0;
		width: calc(100% - 77px) !important;
	}
	#main .useBox .subBox .imgList02 li .ttl {
		padding-left: 36px;
		font-size: 2rem;
		line-height: 1.4;
	}
	#main .useBox .subBox .imgList02 li .ttl .num {
		font-size: 2.7rem;
		left: 15px;
		top: -2px;
	}
	#main .useBox .subBox .imgList02 .item02 .ttl {
		padding-left: 21px;
	}
	#main .useBox .subBox .imgList02 .item02 .ttl .num {
		left: 0;
	}
	#main .useBox .subBox .imgList02 li .pho {
		padding: 0;
	}
	#main .useBox .subBox .imgList02 li .pho::after {
		width: 11px;
		top: 15px;
		right: -1px;
	}
	#main .useBox .subBox .imgList02 .item04 .textBox p {
		margin-bottom: 10px;
		font-size: 1.2rem;
		line-height: 1.5;
	}
	#main .useBox .subBox .imgList02 .item04 .textBox .note {
		margin-bottom: 0;
		font-size: 0.9rem;
		line-height: 1.3;
	}
	#main .useBox .sub02 {
		margin-bottom: 33px;
		padding-top: 30px;
		padding-bottom: 31px;
	}
	#main .useBox .sub02 .ttlPhoto {
		margin-bottom: 8px;
	}
	#main .useBox .subBox .imgBox02 .swiper-button-next {
		background-position: center top 52%;
	}
	#main .useBox .subBox .imgBox02 .swiper-button-prev {
		background-position: center bottom 52%;
	}
	#main .useBox .sub03 {
		padding-top: 19px;
		padding-bottom: 36px;
	}
	#main .useBox .sub03 .ttlPhoto {
		margin-bottom: 25px;
	}
	#main .useBox .sub03 .imgList02 {
		margin-top: 0;
	}
	#main .useBox .sub03 .imgList02 .slick-list {
		padding-right: 43px;
	}
	#main .useBox .sub03 .imgList02 li .ttl {
		margin-bottom: 2px;
	}
	#main .useBox .sub03 .imgList02 .item01 {
		width: calc(100% - 43px) !important;
		padding-right: 0;
	}
	#main .useBox .sub03 .imgList02 .item02 {
		width: calc(100% - 43px) !important;
	}
	#main .useBox .sub03 .imgList02 .item03 {
		width: calc(100% - 43px) !important;
	}
	#main .useBox .sub03 .imgList02 .item04 {
		width: calc(100% - 43px) !important;
	}
	#main .useBox .sub03 .imgList02 li .pho::after {
		top: 15px;
		right: 15px;
	}
	#main .useBox .sub03 .imgList02 .item03 .ttl {
		margin-left: 20px;
	}
	#main .useBox .sub03 .imgList02 .item04 .textBox p {
		margin-bottom: 10px;
	}
	#main .useBox .sub03 .imgList02 .item04 .textBox .text01 {
		font-size: 1rem;
		line-height: 2.26;
	}
	#main .useBox .sub03 .imgBox .swiper-button-next {
		background-position: center top 35%;
	}
	#main .useBox .sub03 .imgBox .swiper-button-prev {
		background-position: center bottom 35%;
	}
	#main .useBox .sub04 {
		padding-top: 25px;
		padding-bottom: 35px;
	}
	#main .useBox .sub04 .ttlPhoto {
		margin-bottom: -15px;
	}
	#main .useBox .sub04 .imgList01 {
		margin-bottom: 10px;
	}
	#main .useBox .sub04 .imgBox .swiper-button-next {
		background-position: center top 71%;
	}
	#main .useBox .sub04 .imgBox .swiper-button-prev {
		background-position: center bottom 71%;
	}
	#main .useBox .sub04 .text03 {
		margin: 0 20px;
		font-size: 0.85rem;
		line-height: 1.56;
	}
	#main .useBox .sub05 .ttlPhoto {
		margin-bottom: 15px;
	}
	#main .useBox .sub05 .ttlPhoto img {
		width: 160px;
	}
	#main .useBox .sub05 .pho01 img {
		width: 230px;
	}
	#main .useBox .movieList {
		margin: 0 2px;
		display: block;
	}
	#main .useBox .movieList li {
		margin: 0 0 18px;
		padding: 0;
		width: auto;
	}
	#main .useBox .movieList li:last-child {
		margin-bottom: 0;
	}
	#main .useBox .movieList li .movie {
		margin-bottom: 3px;
	}
	#main .useBox .movieList li .movie a {
		padding-bottom: 59.8%;
	}
	#main .useBox .movieList li p {
		font-size: 1.8rem;
	}
	#main .comContact {
		padding-top: 90px;
	}
}
@media all and (max-width: 359px) {
	#main .recommend .text01 .txt01 .imgtext {
		width: 80px;
		left: -70px;
	}
	#main .useBox .tabArea {
		margin: 0;
	}
	#main .useBox .subBox .slick-arrow {
		width: 21px;
	}
	#main .useBox .subBox .imgList02 .slick-list {
		padding-right: 50px;
	}
}
.mfp-fade.mfp-bg {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out;
	-moz-transition: all 0.15s ease-out;
	transition: all 0.15s ease-out;
}
.mfp-fade.mfp-bg.mfp-ready {
	opacity: 0.8;
}
.mfp-fade.mfp-bg.mfp-removing {
	opacity: 0;
}

.mfp-fade.mfp-wrap .mfp-content {
	opacity: 0;
	-webkit-transition: all 0.15s ease-out;
	-moz-transition: all 0.15s ease-out;
	transition: all 0.15s ease-out;
}
.mfp-fade.mfp-wrap.mfp-ready .mfp-content {
	opacity: 1;
}
.mfp-fade.mfp-wrap.mfp-removing .mfp-content {
	opacity: 0;
}