@charset "UTF-8";

html {
	scroll-behavior: smooth;
}

@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

.font-noto {
	font-family: 'Noto Sans Japanese', sans-serif;
}

/*#breadcrumb,.sns-bottun-sp{display:none !important;}*/
/* @group contents */
.clear:after {
	content: ".";
	display: block;
	height: 0;
	clear: both;
	visibility: hidden;
}

#container {
	overflow: hidden;
}

#breadcrumb {
	display: none !important;
}

#contents {
	color: #333;
	text-align: left;
	font-family: "Noto Sans Japanese", "游ゴシック", "Yu Gothic", Verdana, "游ゴシック体", "YuGothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "Meiryo UI", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	line-height: 1.75;
	padding-bottom: 0;
}

#contents br {
	font-size: 0;
}

@media print,
screen and (min-width:768px) {
	#contents .sp {
		display: none !important;
	}
}

@media print,
screen and (max-width:767px) {
	#contents {
		font-size: 4vw;
		line-height: 1.5;
	}

	#contents .pc {
		display: none !important;
	}
}

.bold {
	font-weight: bold;
}

#main_title div:after {
	display: none;
}

#contents img {
	width: 100%;
}

.palt1 {
	font-feature-settings: 'palt' 1;
}

#contents .sec-inner {
	margin: 0 auto;
	max-width: 1140px;
	width: 95%;
}

@media print,
screen and (max-width:767px) {
	#contents .sec-inner {
		width: 92%;
	}
}

#mv {
	background: #AB9253;
}

.main-area {
	background: #000;
	color: #fff;
}

.intro {
	text-align: center;
	padding: 31px 0 39px;
}

.intro p{
	padding-top: 16px;
    line-height: 1.7;
}
@media print,
screen and (max-width:767px) {
	.intro p{
		font-size: 3.3vw;
	}
}

h2,
h3 {
	font-size: 2.25rem;
	font-weight: bold;
	text-align: center;
}
@media print,
screen and (max-width:767px) {
	h2{
		font-size: 6vw;
	}
	h3 {
		font-size: 5.3vw;
		padding: 2px 0;
	}
}

h3 {
	line-height: 1.4;
	border-top: 2px solid;
	border-bottom: 2px solid;
	margin-left: calc(-50vw + 50%);
	margin-right: calc(-50vw + 50%);
}
@media print,
screen and (max-width:767px) {
	h3 {
		border-top: 1px solid;
		border-bottom: 1px solid;
	}
}

.movie-detail{
	position: relative;
	padding-top: 52px;
}

.movie-detail::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 22%;
	width: 14px;
	background: #fff;
	z-index: 0;
}
@media print,
screen and (max-width:767px) {
	.movie-detail::before {
		left: 51%;
		width: 2vw;
	}
}

.movie-detail-inner {
	color: #fff;
	display: flex;
	justify-content: space-between;
	padding-top: 5px;
}
@media print,
screen and (max-width:767px) {
	.movie-detail-inner {
		flex-direction: column;
	}
}
.movie-detail-inner:hover{
	color: #fff;
}

.movie-detail__left {
	position: relative;
	z-index: 1;
    width: 38%;
    padding: 0 0 0 63px;
}
@media print,
screen and (max-width:767px) {
	.movie-detail__left {
		padding: 0;
		width: 100%;
	}
}

.movie-detail__left::before{
	content: "";
	position: absolute;
	top: 0;
    left: 0;
    width: 292px;
    height: 292px;
	background: url(../img/year_circle.svg) no-repeat center / contain;
	z-index: -1;
}
@media print,
screen and (max-width:767px) {
	.movie-detail__left::before{
        left: 0;
        width: 53vw;
        height: 53vw;
        top: -4vw;
	}
}

.movie-year {
	font-family: 'Bodoni URW', serif;
	font-size: 3.5rem;
	font-weight: bold;
	font-style: italic;
	margin-top: -27px;
    margin-left: -35px;
}

.movie-year img {
	width: 100%;
	max-width: 100%;
}
@media print,
screen and (max-width:767px) {
	.movie-year {
		font-size: 10vw;
		margin-left: 6vw;
	}
}

figure{
	margin-top: -5px;
}
figure img{
	max-width: 410px;
}
figcaption {
	font-size: .9rem;
	padding-top: 5px;
}
@media print,
screen and (max-width:767px) {
	figure{
		width: 90%;
		margin-left: auto;
	}
	figure img{
		max-width: 100%;
	}
	figcaption {
		font-size: 2.8vw;
	}
}

.movie-detail__right {
	background: #fff;
	color: #000;
	width: 56%;
	z-index: 1;
}

@media print,
screen and (max-width:767px) {
	.movie-detail__right {
		width: 100%;
		margin-top: 7px;
	}
}

.movie-info{
	padding: 10px 20px;
}

.movie-info__title {
	font-size: 1.5rem;
	line-height: 1.4;
	font-weight: bold;
}

.movie-info__date {
	font-weight: bold;
}

.movie-info__other {
	font-size: .7rem;
	padding-top: 8px;
}

.movie-description {
	border-top: 1px solid #000;
	padding: 6px 22px 20px;
}

.movie-description__feature {
	font-size: 1.15rem;
	font-weight: bold;
}
.movie-description__feature p{
	font-size: 1rem;
}
@media print,
screen and (max-width:767px) {
	.movie-description__feature p{
		line-height: 1.5;
		font-size: 4vw;
	}
}

h4 {
	position: relative;
	background: linear-gradient(transparent 63%, rgba(253,144,76,.9) 53%);
	display: inline-block;
	line-height: 1.4;
	padding-left: 28px;   /* アイコン分スペース */
	/* padding-right: 2.3em; */
	margin-top: 20px;
	font-weight: bold;
}
@media print,
screen and (max-width:767px) {
	h4{
		font-size: 4vw;
	}
}

.movie-description__feature h4::before {
	content: "";
	position: absolute;
	left: 0;
	bottom: 5px; /* オレンジ線に重ねる調整 */
	width: 19.4px;
	height: 16px;
	background: url("../img/icon_check.png") no-repeat center / contain;
}

.bnr-skyper{
	background: #AB9253;
    padding: 50px 150px;
	text-align: center;
}
.bnr-skyper img{
	max-width: 100%;
	width: auto !important;
}
@media print,
screen and (max-width:767px) {
	.bnr-skyper{
		padding: 17px 40px;
	}
}