@charset "UTF-8";

/* 両端のゲイリーとの前後関係を調整 */

@media (max-width: 1119px) {
	header .header_nav_sp {
		z-index: 3;
	}
}

@media (min-width: 1120px) {
    header {
		z-index: 3;
	}
}

/* 書体 */

.button,
.kv__lead-text,
.contents__lead-text,
.contents__spot-ttl,
.contents__midashi-text {
	font-family: "RocknRoll One", sans-serif;
	font-weight: bold;
	font-style: normal;
	font-optical-sizing: auto;
	font-feature-settings: "palt";
}

/* 文字詰め */

.txt-note,
.button,
.official-link > button,
.contents__lead-text,
.contents__spot-ttl,
.contents__date-ttl,
.contents__date-txt,
.contents__detail-txt,
.contents__cinema-txt {
	font-feature-settings: "palt";
}

.txt-note,
.button,
.official-link > button,
.contents__spot-ttl,
.contents__date-ttl,
.contents__date-txt,
.contents__detail-txt,
.contents__cinema-txt {
	letter-spacing: 0.05em;
}

.contents__lead-text {
	letter-spacing: 0;
}

/* 汎用書式 */

.alt {
	display: none;
}

.txt-note {
	font-size: 12px;
	line-height: 1.6;
	text-align: justify;
	word-break: break-all;
	color: #fff;
}

@media screen and (max-width: 767px) {
	.txt-note {
		font-size: 12px;
	}
}

.txt-copyright {
	font-size: 12px;
}

@media screen and (max-width: 1119px) {
	.txt-copyright {
		font-size: 10px;
	}
}

.contents .txt-copyright {
	padding-top: 25px;
	color: #fff;
	text-align: center;
}

.txt--fwb,
.txt--tal,
.txt--tar,
.txt--tac,
.txt--s,
.txt--l,
.txt--ll,
.txt-tsume,
.txt-tsume-kakko {
	font-size: inherit;
	font-family: inherit;
	font-optical-sizing: inherit;
	font-weight: inherit;
	font-style: inherit;
	font-feature-settings: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
}

.txt--fwb {
	font-weight: bold !important;
}

.txt--tal {
	text-align: left !important;
}

.txt--tar {
	text-align: right !important;
}

.txt--tac {
	text-align: center !important;
}

.txt--s {
	font-size: 80% !important;
}

.txt--l {
	font-size: 125% !important;
}

.txt--ll {
	font-size: 160% !important;
}

.txt--line {
	display: block !important;
}

.txt-mg {
	margin: 0 .1em;
}

.txt-tsume {
	letter-spacing: -.08em !important;
}

.txt-tsume-kakko {
	margin-left: -.55em !important;
	margin-right: -.40em !important;
}

/* 汎用代替テキスト */

.alt {
	display: none;
}

/* ズートピア場面写真 */

.zootopia {
	position: relative;
	border: 15px solid #fff;
	border-radius: 30px;
	background-repeat: no-repeat;
	background-position: center;
	background-size: cover;
	user-select: none;
	pointer-events: none;
	overflow: hidden;
	box-sizing: border-box;
}

@media screen and (max-width: 1119px) {
	.zootopia {
		max-width: none;
		border: 10px solid #fff;
	}
}

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

/* 汎用ボタン */

.button {
	display: block;
	position: relative;
	width: 100%;
	max-width: 400px;
	margin: 60px auto 0;
	padding: 18px 0;
	border-radius: 500px;
	background: linear-gradient(#4dd5e9, #009ecf);
	font-size: 22px;
	font-weight: bold;
	line-height: 1;
	text-align: center;
	color: #fff;
	box-shadow: 0 4px 0 #7c44aa;
}

@media screen and (max-width: 767px) {
	.button {
		max-width: none;
		width: 70vw;
		margin: 9vw auto 0;
		padding: 4vw 0;
		font-size: calc(4px + 3vw);
	}
}

.button > .button__sub {
	display: block;
	font-size: 90%;
	font-family: inherit;
	font-optical-sizing: inherit;
	font-weight: inherit;
	font-style: inherit;
	font-feature-settings: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
	margin-top: .5em;
}

.button--hasicon {
	padding: 18px 30px 18px 0;
}

@media screen and (max-width: 767px) {
	.button--hasicon {
		padding: 4vw 2em 4vw 0;
	}
}

a.button:hover {
	opacity: 1;
}

@media screen and (min-width: 1120px) {
	a.button {
		opacity: 1;
	}
	
	a.button:hover {
		opacity: 1;
	}
}

/* 汎用ボタン - コンテンツごとの表示分け */

.official-link a.button {
	margin-top: 20px;
	max-width: 300px;
	margin: 20px auto 0;
	border: 1px solid #333;
	background: #fff;
	font-size: 18px;
	color: #333;
	box-shadow: none;
}

.official-link a.button > .icon {
	color: #333;
}

@media screen and (max-width: 767px) {
	.official-link a.button {
		max-width: 64vw;
		margin-top: 4vw;
		font-size: calc(3px + 3vw);
	}
}

@media screen and (min-width: 1120px) {
	.official-link a.button {
		opacity: 1;
		background: #fff;
		transition: background .8s;
	}
	
	.official-link a.button:hover {
		opacity: 1;
		background: #e6e6e6;
		transition: background .05s;
	}
}

.contents__spot .button {
	background: linear-gradient(#74eb28, #00c482, #00b4ac);
}

@media screen and (max-width: 767px) {
	.contents__spot .button {
	}
}

.contents__bgm .button {
	background: linear-gradient(#74eb28, #00c482, #00b4ac);
}

@media screen and (max-width: 767px) {
	.contents__bgm .button {
	}
}

.contents__bgm a.button {
	margin-top: 20px;
	max-width: 300px;
	margin: 20px auto 0;
	border: 1px solid #fff;
	background: transparent;
	font-size: 18px;
	color: #fff;
	box-shadow: none;
}

.contents__bgm a.button > .icon {
	color: #fff;
}

@media screen and (max-width: 767px) {
	.contents__bgm a.button {
		max-width: 64vw;
		font-size: calc(3px + 3vw);
	}
}

@media screen and (min-width: 1120px) {
	.contents__bgm a.button {
		opacity: 1;
		background: transparent;
		transition: background .8s;
	}
	
	.contents__bgm a.button:hover {
		opacity: 1;
		background: #006e9a;
		transition: background .05s;
	}
}

.contents__cinema a.button {
	margin-top: 20px;
	line-height: 1.6;
}

@media screen and (max-width: 767px) {
	.contents__cinema a.button {
		margin-top: 4vw;
		line-height: 1.6;
	}
}

@media screen and (min-width: 1120px) {
	.contents__cinema a.button {
		opacity: 1;
		filter: none;
		transition: filter .8s;
	}
	
	.contents__cinema a.button:hover {
		opacity: 1;
		filter: brightness(1.2);
		transition: filter .05s;
	}
}

/* 汎用ボタン - アイコン */

.button > .icon {
	display: none;
}

.button--hasicon > .icon {
	display: block;
	position: absolute;
	right: 15px;
	top: 50%;
	margin-top: -.4em;
	font-size: 15px;
	color: #fff;
}

.contents__bgm .button--hasicon > .icon {
	color: #fff;
}

@media screen and (max-width: 767px) {
	.contents__bgm .button--hasicon > .icon {
	}
}

/* 画面幅による表示分け */

.sp-only {
	display: none;
}
.tb-only {
	display: none;
}
.pc-only {
	display: inline;
}

@media screen and (max-width: 1119px) {
	.sp-only {
		display: none;
	}
	.tb-only {
		display: inline;
	}
	.pc-only {
		display: inline;
	}
}

@media screen and (max-width: 767px) {
	.sp-only {
		display: inline;
	}
	.tb-only {
		display: inline;
	}
	.pc-only {
		display: none;
	}
}

/* 全体 */

div.contents-wrp {
	position: relative;
	background-color: #09445e;
	overflow: hidden;
}

@media screen and (max-width: 1119px) {
	div.contents-wrp {
	}
}

@media screen and (max-width: 767px) {
	div.contents-wrp {
	}
}

.contents-wrp-inner {
	position: relative;
	max-width: 1120px;
	margin: 0 auto;
	background-color: #fff;
	box-shadow: 0 0 20px #001e2c;
}

@media screen and (max-width: 1119px) {
	.contents-wrp-inner {
		box-shadow: none;
	}
}

@media screen and (max-width: 767px) {
	.contents-wrp-inner {
		box-shadow: none;
	}
}

/* キービジュアル */

.kv {
	padding-bottom: 40px;
}

@media screen and (max-width: 767px) {
	.kv {
		padding-bottom: 10vw;
	}
}

.kv__logo {
	max-width: auto;
	margin: 0 auto;
	user-select: none;
	pointer-events: none;
}

.kv__logo--sp {
	display: none;
	user-select: none;
	pointer-events: none;
}

.kv__logo--pc {
	display: block;
	width: 100%;
	max-width: 1120px;
	height: auto;
	margin: 0 auto;
	user-select: none;
	pointer-events: none;
}

@media screen and (max-width: 767px) {
	.kv__logo {
		max-width: none;
	}

	.kv__logo--sp {
		display: block;
		width: 100%;
		height: auto;
	}

	.kv__logo--pc {
		display: none;
	}
}

.kv__copyright {
	
}

.kv__copyright .txt-copyright {
	color: #333;
	text-align: center;
}

/* コンテンツ */

.contents {
	position: relative;
}

/* コンテンツ：セクション */

.contents__section {
	position: relative;
	padding-top: 110px;
	padding-bottom: 80px;
}

@media screen and (max-width: 767px) {
	.contents__section {
		padding-top: 20vw;
		padding-bottom: 20vw;
	}
}

.contents__section--01 {
	background-image:
		url(../images/parts-bg-section01-top.png),
		url(../images/parts-bg-section01-surface-l.png),
		url(../images/parts-bg-section01-surface-r.png),
		linear-gradient(to bottom, #61c5e0, #107baa);
	background-repeat:
		no-repeat,
		repeat-y,
		repeat-y,
		no-repeat;
	background-position:
		center top,
		left -90px top,
		right -90px top,
		center top;
	background-size:
		100% 50px,
		60% auto,
		60% auto,
		auto;
}

@media screen and (max-width: 767px) {
	.contents__section--01 {
		background-position:
			center top,
			left -20vw top,
			right -20vw top,
			center top;
		background-size:
			100% auto,
			120% auto,
			120% auto,
			auto;
	}
}

.contents__section--02 {
	background-color: #fff;
	background-image:
		url(../images/parts-bg-section02-top.png);
	background-repeat:
		no-repeat;
	background-position:
		center top;
	background-size:
		100% 50px;
}

@media screen and (max-width: 767px) {
	.contents__section--02 {
		padding-top: 30vw;
		padding-bottom: 14vw;
		background-size:
			100% auto;
	}
}

.contents__section--03 {
	background-image:
		url(../images/parts-bg-section03-top.png),
		linear-gradient(to bottom, #7641a1, #4d2a60);
	background-repeat:
		no-repeat,
		no-repeat;
	background-position:
		center top,
		center top;
	background-size:
		100% 50px,
		auto;
}

@media screen and (max-width: 767px) {
	.contents__section--03 {
		padding-top: 20vw;
		padding-bottom: 18vw;
		background-size:
			100% auto,
			auto;
	}
}

/* コンテンツ：リード */

.contents__lead {
}

@media screen and (max-width: 767px) {
	.contents__lead {
	}
}

.contents__lead-text {
	margin: 0 auto;
	font-size: 26px;
	font-weight: bold;
	line-height: 1.8;
	text-align: center;
	color: #fff;
}

@media screen and (max-width: 1119px) {
	.contents__lead-text {
		font-size: 20px;
	}
}

@media screen and (max-width: 767px) {
	.contents__lead-text {
		font-size: calc(7px + 3vw);
	}
}

/* コンテンツ：アイテム */

.contents__spot {
	position: relative;
}

@media screen and (max-width: 767px) {
	.contents__spot {
		margin-top: 8vw;
	}
	.contents__spot + .contents__spot {
		margin-top: 9vw;
	}
}

.contents__spot-ttl {
	position: relative;
	z-index: 1;
}

.contents__bgm {
}

@media screen and (max-width: 767px) {
	.contents__bgm {
	}
}

/* コンテンツ：アイテムパーツ */

.contents__item {
	margin-top: 10px;
}

.contents__item + .contents__item {
	margin-top: 10px;
}

.contents__cinema .contents__item {
	margin-top: 10px;
}

.contents__item img {
	border-radius: 17px;
	overflow: hidden;
}

@media screen and (max-width: 767px) {
	.contents__item {
		margin-top: 1vw;
	}

	.contents__item + .contents__item {
		margin-top: 1vw;
	}

	.contents__item img {
		border-radius: 1.5vw;
	}

	.contents__cinema .contents__item {
		margin-top: 5vw;
	}
}

.contents__spot .contents__list {
	width: 540px;
	margin: -30px auto 0;
	padding: 0 10px 10px;
	border: 3px solid #fff;
	border-radius: 30px;
}

@media screen and (max-width: 767px) {
	.contents__spot .contents__list {
		width: auto;
		margin: -5.5vw 7vw 0;
		padding: 0 1vw 1vw;
		border-radius: 3vw;
	}
}

.contents__bgm .contents__list {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	max-width: 70%;
	margin: 40px auto 0;
}

@media screen and (max-width: 767px) {
	.contents__bgm .contents__list {
		max-width: none;
		margin: 10vw auto 0;
	}
}

.contents__bgm .contents__list .contents__item {
	flex-direction: row;
	width: calc(50% - 60px);
	margin: 0;
}

@media screen and (max-width: 767px) {
	.contents__bgm .contents__list .contents__item {
		width: 65vw;
	}
}

.contents__item-image {
	position: relative;
	margin: 0 auto;
}

.contents__item-image--tateichi {
	max-width: 350px;
}

.contents__item-image > img {
	display: block;
}

.contents__bgm .contents__item-image {
	width: auto;
}

.contents__cinema .contents__item-image {
	max-width: 520px;
	margin: 40px auto 0;
}

@media screen and (max-width: 767px) {
	.contents__item-image {
		max-width: none;
		width: auto;
	}

	.contents__item-image--tateichi {
	}

	.contents__cinema .contents__item-image {
		max-width: none;
		width: auto;
		margin: 40px 0 0;
	}
}

.contents__bgm .contents__list .contents__item-image {
	max-width: 100%;
	border-radius: 20px;
}

@media screen and (max-width: 767px) {
	.contents__bgm .contents__list .contents__item-image {
		margin-top: 0;
	}
}

.contents__item-image > img {
	display: block;
	width: 100%;
	height: auto;
}

@media screen and (max-width: 767px) {
	.contents__item-image > img {
	}
}

.contents__detail {
	margin: 12px auto 0;
}

.contents__lead .contents__detail {
	margin: 12px auto 0;
}

@media screen and (max-width: 767px) {
	.contents__detail {
		margin: 8px 0 0;
	}

	.contents__lead .contents__detail {
		margin: 20px auto 0;
	}
}

.contents__detail-txt {
	margin-top: 10px;
	font-size: 16px;
	font-weight: bold;
	line-height: 1.8;
	text-align: center;
	color: #fff;
}

.contents__cinema .contents__detail-txt {
	margin-top: 30px;
	color: #fff;
}

@media screen and (max-width: 767px) {
	.contents__detail-txt {
		margin-top: 10px;
		font-size: calc(6px + 2vw);
		text-align: justify;
		word-break: break-all;
	}
}

.contents__detail > .contents__detail-txt:first-child {
	margin-top: 0;
} 

.contents__date + .contents__detail-txt {
	margin-top: 25px;
} 

@media screen and (max-width: 767px) {
	.contents__detail > .contents__detail-txt:first-child {
		margin-top: 25px;
	} 

	.contents__date + .contents__detail-txt {
		margin-top: 25px;
	} 
}

.contents__date {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	text-align: center;
}

@media screen and (max-width: 767px) {
	.contents__date {
	}

	.contents__bgm .contents__date {
		display: block;
	}
}

.contents__date-ttl {
	position: relative;
	bottom: 0;
	display: inline-block;
	margin-right: .5em;
	padding: .4em .8em .3em;
	border-radius: 500px;
	border: 1px solid #fff;
	font-size: 16px;
	font-weight: bold;
	line-height: 1;
	text-align: center;
}

.contents__lead .contents__date-ttl {
	font-size: 18px;
	color: #fff;
}

.contents__spot .contents__date-ttl {
	color: #fff;
}

.contents__cinema .contents__date-ttl {
	color: #fff;
}

@media screen and (max-width: 767px) {
	.contents__date-ttl {
		bottom: .1em;
		padding: .6em .8em .5em;
		font-size: calc(0.5px + 3vw);
	}

	.contents__lead .contents__date-ttl {
		font-size: calc(3px + 3vw);
	}
}

.contents__date-txt {
	display: inline-block;
	margin-left: .2em;
	font-size: 18px;
	font-weight: bold;
	line-height: 1.8;
	letter-spacing: .05em;
}

.contents__lead .contents__date-txt {
	font-size: 24px;
	color: #fff;
}

.contents__spot .contents__date-txt {
	color: #fff;
}

.contents__cinema .contents__date-txt {
	color: #fff;
}

@media screen and (max-width: 767px) {
	.contents__date-txt {
		/* font-size: calc(4.5px + 3vw); */
		font-size: calc(6px + 3vw);
	}

	.contents__lead .contents__date-txt {
		font-size: calc(10px + 3vw);
	}

	.contents__bgm .contents__date-txt {
		margin-top: 5px;
	}
}

/* コンテンツ：見出しテキスト */

.contents__midashi {
	width: 100%;
	margin: 60px auto 0;
}

@media screen and (max-width: 767px) {
	.contents__midashi {
		max-width: none;
		width: auto;
		margin: 10vw 4vw 10vw;
	}
}

.contents__midashi-text {
	position: relative;
	width: 100%;
	padding: 10px 0;
	font-size: 36px;
	color: #fff;
	line-height: 1.6;
	text-align: center;
	text-shadow: 0 4px 0 #7c44aa;
	
}

@media screen and (max-width: 767px) {
	.contents__midashi-text {
		font-size: calc(3px + 6vw);
		text-align: left;
	}
}

.contents__midashi-text span {
	font-size: inherit;
	font-family: inherit;
	font-optical-sizing: inherit;
	font-weight: inherit;
	font-style: inherit;
	font-feature-settings: inherit;
	line-height: inherit;
	letter-spacing: inherit;
	color: inherit;
}

/* コンテンツ：期間限定BGM */

.contents__item-bgmbtn {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: center;
	margin-top: 10px;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
}

/* コンテンツ：シネマイクスピアリ */

.contents__cinema {
	position: relative;
	z-index: 1;
}

.contents__cinema-txt {
	font-size: 22px;
	font-weight: bold;
	line-height: 1.8;
	text-align: center;
	color: #fff;
}

.contents__item + .contents__cinema-txt {
	margin-top: 40px;
}

.note + .contents__cinema-txt {
	margin-top: 40px;
}

@media screen and (max-width: 767px) {
	.contents__cinema-txt {
		font-size: calc(8px + 3vw);
	}
}

.contents__cinema-image {
}

.contents__cinema-image > img {
	display: block;
	width: 26%;
	height: auto;
	margin: 20px auto;
}

@media screen and (max-width: 767px) {
	.contents__cinema-image > img {
		width: 60%;
		margin: 20px auto;
	}
}

/* 注釈 */

.note {
	position: relative;
	max-width: 1080px;
	width: 100%;
	margin: 20px auto 0;
}

.contents__lead .txt-note {
	text-align: center;
	color: #fff;
}

.contents__spot .txt-note {
	text-align: center;
	color: #fff;
}

.contents__cinema .txt-note {
	text-align: center;
	color: #fff;
}

@media screen and (max-width: 1119px) {
	.note {
		max-width: none;
		width: auto;
		margin: 20px 0 0;
		padding-right: 1em;
	}

	.contents__cinema .note {
		margin: 10px 0 0;
		padding-right: 0;
	}
}

/* アニメーション */

.js-fadein {
	opacity: 1;
	/* animation-name: fadeIn; */
	/* animation-duration: 3s; */
	transition: opacity .2s linear, transform .5s cubic-bezier(0.17,0.84,0.44,1);;
	transform: translateY(0) translateX(0) rotate(0);
	transform-origin: right top;
}

.js-fadein.is-standby {
	opacity: 0;
	transform: translateY(10px) translateX(10px) rotate(-20deg);
}

.contents__item:nth-child(odd) .contents__item-image.js-fadein {
	transform-origin: left top;
}

.contents__item:nth-child(odd) .contents__item-image.js-fadein.is-standby {
	transform: translateY(-10px) translateX(-10px) rotate(20deg);
}

.contents__item:nth-child(even) .contents__item-image.js-fadein {
	transform-origin: right top;
}

.contents__item:nth-child(even) .contents__item-image.js-fadein.is-standby {
	transform: translateY(10px) translateX(10px) rotate(-20deg);
}

@keyframes fadeIn {
	from, to {
		animation-timing-function: cubic-bezier(0.615, 0.810, 0.455, 1.000);
	}

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

.slick-slider div { transition: none; }