/*
 * 参考
 * https://github.com/Andy-set-studio/modern-css-reset/blob/master/src/reset.css
*/

/* Box sizing rules */

*,
*::before,
*::after {
	box-sizing: border-box;
}

/* Remove default margin */

body,
h1,
h2,
h3,
h4,
h5,
h6,
p,
figure,
blockquote,
dl,
dd,
ul {
	margin: 0;
}

/* Remove list styles on ul, ol elements with a list role, which suggests default styling will be removed */

ul,
ol {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Set core root defaults */

html:focus-within {
	scroll-behavior: smooth;
}

/* Set core body defaults */

body {
	line-height: 1.5;
	min-height: 100vh;
	text-rendering: optimizeSpeed;
}

/* A elements that don't have a class get default styles */

a:not([class]) {
	-webkit-text-decoration-skip: ink;
	text-decoration-skip-ink: auto;
}

/* Make images easier to work with */

img,
picture {
	display: block;
	max-width: 100%;
}

/* Inherit fonts for inputs and buttons */

input,
button,
textarea,
select {
	font: inherit;
}

/* Remove all animations and transitions for people that prefer not to see them */

/*****************************************
 * 数値から単位を取り除く
 * 参考
 * https://css-tricks.com/snippets/sass/
******************************************/

/*****************************************
 * px→remの計算
 * 参考
 * https://webdou.net/sass-rem/
 * Sassではmath.div関数の使用が推奨のため、スラッシュ(/)演算子から変更
******************************************/

/*****************************************
 * vwの計算
 * 参考
 * https://webdou.net/sass-vw/
 * Sassではmath.div関数の使用が推奨のため、スラッシュ(/)演算子から変更
******************************************/

html {
	font-size: 16px;
}

body {
	color: #4D4D4D;
	font-family: "Noto Sans JP", sans-serif;
	font-weight: 400;
}

a {
	color: inherit;
	text-decoration: none;
	transition: opacity 0.3s;
}

.br-sp {
	display: block;
}

.inner {
	margin-inline: auto;
	padding: 0 2.6315789474vw;
	width: 84.2105263158vw;
}

.lead__inner {
	padding: 0;
}

.cast__inner {
	margin-inline: auto;
	padding: 0 3.1578947368vw;
	width: 100%;
}

.footer__inner {
	margin-inline: auto;
	width: 100%;
}

.header {
	height: 12.3684210526vw;
	left: 0;
	overflow: hidden;
	position: relative;
	top: 0;
	width: 100%;
	z-index: 1000;
}

.header__logo {
	position: absolute;
	right: 1.5789473684vw;
	top: 2.8947368421vw;
}

.fv {
	margin-bottom: 7.3684210526vw;
	margin-right: 8.4210526316vw;
	margin-top: 6.5789473684vw;
	position: relative;
}

.fv__img {
	border-radius: 0 5.2631578947vw 5.2631578947vw 0;
	overflow: hidden;
}

.fv__title {
	bottom: -7.6315789474vw;
	height: 28.9473684211vw;
	left: 0;
	position: absolute;
	width: 81.3157894737vw;
}

.fv__title img {
	height: 100%;
	width: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

.lead {
	background: linear-gradient(0deg, rgb(220, 235, 255) 0%, rgb(255, 255, 255) 75%);
	padding-top: 28.1578947368vw;
	position: relative;
	z-index: 1;
}

.lead::before {
	background: url(../img/bg_img-cylinder-sp@2x.png) no-repeat top center/cover;
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}

.lead__wrap {
	display: grid;
}

.lead__logo {
	height: 35.2631578947vw;
	margin-top: 6.5789473684vw;
	width: 68.4210526316vw;
}

.lead__logo img {
	height: 100%;
	width: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

.lead__img {
	height: 88.9473684211vw;
	margin-top: 5.2631578947vw;
	overflow: hidden;
	width: 77.6315789474vw;
}

.lead__img img {
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: top center;
	object-position: top center;
}

.movie {
	background: linear-gradient(0deg, rgb(0, 122, 190) 50%, rgb(100, 175, 220) 100%);
	clip-path: polygon(0 4.4973544974%, 100% 0%, 100% 95.5026455026%, 0% 100%);
	margin-top: -15.2631578947vw;
	overflow: hidden;
	padding-top: 25.5263157895vw;
	position: relative;
	position: relative;
	z-index: 1;
}

.movie::before {
	background: url(../img/bg_img-scope-sp@2x.png) no-repeat top center/cover;
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}

.movie__wrap {
	display: grid;
}

.movie__list {
	display: flex;
	flex-direction: column;
	row-gap: 7.2368421053vw;
}

.movie__item {
	height: 44.4736842105vw;
	position: relative;
	width: 78.9473684211vw;
}

.movie__item a {
	aspect-ratio: 600/338;
	border-radius: 2.6315789474vw;
	display: inline-block;
	height: 100%;
	overflow: hidden;
	position: relative;
	transition: all 0.3s ease-out;
	width: 100%;
}

.movie__item a::after {
	background: url(../img/icon_play.svg) no-repeat center center/cover;
	content: "";
	height: 15.7894736842vw;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: all 0.3s ease-out;
	width: 15.7894736842vw;
}

.movie__item a:hover {
	opacity: 1;
}

.movie__item p {
	position: absolute;
	right: -6.5789473684vw;
	top: 50%;
	transform: translateY(-50%);
	width: -moz-fit-content;
	width: fit-content;
	writing-mode: vertical-lr;
	z-index: 1;
}

.movie__img {
	height: 78.9473684211vw;
	margin-top: -2.1052631579vw;
	position: relative;
	width: 71.5789473684vw;
	z-index: 2;
}

.movie__img img {
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: top center;
	object-position: top center;
}

body.modal-open {
	height: 100%;
	overflow: hidden;
	position: fixed;
}

.modal-video-movie-wrap {
	border-radius: 2.6315789474vw;
}

.modal-video-movie-wrap iframe {
	border-radius: 2.6315789474vw;
}

.whats {
	background: linear-gradient(0deg, rgb(220, 235, 255) 0%, rgb(255, 255, 255) 100%);
	padding-bottom: 77.6315789474vw;
	padding-top: 7.1052631579vw;
}

.whats__upper {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	-moz-column-gap: 3.2894736842vw;
	column-gap: 3.2894736842vw;
	row-gap: 3.2894736842vw;
}

.whats__upper__img.txt-whats {
	align-self: end;
	height: 6.5789473684vw;
	justify-self: end;
	width: 28.2894736842vw;
}

.whats__upper__img.txt-ube {
	align-self: end;
	height: 8.5526315789vw;
	width: 21.7105263158vw;
}

.whats__upper__img img {
	height: 100%;
	width: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

.whats__upper__video {
	grid-column: 1/3;
	height: 44.4736842105vw;
	width: 78.9473684211vw;
}

.whats__upper__video img {
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	background: #bebebe;
	object-fit: cover;
}

.whats__upper__video a {
	aspect-ratio: 600/338;
	border-radius: 2.6315789474vw;
	display: inline-block;
	height: 100%;
	overflow: hidden;
	position: relative;
	transition: all 0.3s ease-out;
	width: 100%;
}

.whats__upper__video a::after {
	background: url(../img/icon_play.svg) no-repeat center center/cover;
	content: "";
	height: 15.7894736842vw;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	transition: all 0.3s ease-out;
	width: 15.7894736842vw;
}

.whats__upper__video a:hover {
	opacity: 1;
}

.whats__lower {
	margin-top: 7.6315789474vw;
	position: relative;
}

.whats__lower__menu {
	display: grid;
	grid-template-columns: repeat(2, auto);
	justify-content: space-around;
	row-gap: 2.6315789474vw;
}

.menu-link {
	display: block;
	height: 48.4210526316vw;
	position: relative;
	width: 28.9473684211vw;
	z-index: 1;
}

.menu-link a {
	display: block;
	height: 100%;
	width: 100%;
}

.menu-link a:hover {
	opacity: 1;
}

.menu-link::after {
	background: url(../img/img_menu-shadow@2x.png) no-repeat center/cover;
	content: "";
	height: 100%;
	left: 1rem;
	position: absolute;
	top: 1rem;
	width: 100%;
	z-index: -1;
}

.menu-link:hover {
	cursor: pointer;
}

.menu-link:hover::before {
	opacity: 1;
}

.menu-link img {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: cover;
	object-position: cover;
	transition: opacity 0s;
}

.menu-img-hover {
	opacity: 0;
}

.menu-link:hover .menu-img-hover {
	opacity: 1;
}

.whats__lower__img {
	height: 86.3157894737vw;
	width: 79.2105263158vw;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: top center;
	left: -6.5789473684vw;
	object-position: top center;
	position: absolute;
	top: 92.1052631579vw;
	z-index: 3;
}

.whats__lower__img img {
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: top center;
	object-position: top center;
}

.cast {
	background: linear-gradient(0deg, rgb(0, 122, 190) 50%, rgb(54, 150, 204) 100%);
	clip-path: polygon(0 3.4391534392%, 100% 0%, 100% 96.5608465608%, 0% 100%);
	margin-top: -15.2631578947vw;
	overflow: hidden;
	padding-bottom: 36.0526315789vw;
	padding-top: 43.4210526316vw;
	position: relative;
	z-index: 5;
}

.cast::before {
	background: url(../img/bg_img-circle-sp@2x.png) no-repeat top center/cover;
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}

.cast__content {
	display: grid;
	position: relative;
	row-gap: 38.1578947368vw;
}

.cast__name {
	/* left: 10.5263157895vw; */
	left: 8.526316vw;
	position: absolute;
	top: 23.1578947368vw;
}

.cast__name__img {
	border-radius: 50%;
	height: 52.6315789474vw;
	margin-inline: auto;
	overflow: hidden;
	width: 52.6315789474vw;
}

.cast__name__img img {
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: top;
	object-position: top;
}

.cast__description {
	margin-inline: auto;
	width: 81.8421052632vw;
}

.footer {
	background: linear-gradient(0deg, rgb(220, 235, 255) 0%, rgb(255, 255, 255) 100%);
	overflow: hidden;
	padding-bottom: 78.4210526316vw;
	padding-top: 6.0526315789vw;
	position: relative;
	z-index: 1;
}

.footer::before {
	background: url(../img/bg_img-txt-sp@2x.png) no-repeat top center/cover;
	content: "";
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
	z-index: -1;
}

.footer__inner {
	position: relative;
}

.footer__content {
	position: relative;
	text-align: center;
}

.footer__content__bg {
	margin-inline: auto;
	width: 84.2105263158vw;
}

.footer__content__wrap {
	left: 50%;
	position: absolute;
	top: 72.1052631579vw;
	/* transform: translateX(-50%); */
	transform: translateX(-43%);
}

.footer__sns-list {
	align-items: center;
	display: grid;
	/* grid-template-columns: repeat(3, 1fr); */
	grid-template-columns: repeat(2, 1fr);
	-moz-column-gap: 7.8947368421vw;
	column-gap: 7.8947368421vw;
	margin-top: 4.7368421053vw;
}

.footer__sns-icon {
	height: 10.5263157895vw;
	width: 10.5263157895vw;
}

.footer__sns-icon img {
	display: block;
	height: 100%;
	width: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

.footer__copyright {
	margin-top: 7.8947368421vw;
}

.footer__img {
	height: 88.9473684211vw;
	width: 115%;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: top center;
	bottom: -78.4210526316vw;
	left: 50%;
	object-position: top center;
	position: absolute;
	transform: translateX(-50%);
}

.footer__img img {
	height: 100%;
	width: 100%;
	-o-object-fit: cover;
	object-fit: cover;
	-o-object-position: top center;
	object-position: top center;
}

.sns__title {
	color: #007ABE;
	display: inline-block;
	font-size: 2.6315789474vw;
	font-weight: 700;
	letter-spacing: 0.01em;
	text-align: center;
}

.lead__text {
	font-feature-settings: "halt";
	font-size: 4.2105263158vw;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 2;
}

.movie__item p {
	color: #fff;
	font-size: 5.5263157895vw;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.cast__name {
	color: #fff;
	font-size: 4.2105263158vw;
	font-weight: 700;
	letter-spacing: 0.15em;
}

.cast__name::before {
	color: #B4DEF0;
	content: "CAST";
	font-size: 9.4736842105vw;
	font-weight: 700;
	left: -7.8947368421vw;
	letter-spacing: 0;
	position: absolute;
	top: -11.8421052632vw;
}

.cast__name .fc-blue {
	color: #007ABE;
}

.cast__name .sp {
	display: block;
}

.cast__description {
	color: #fff;
	font-feature-settings: "halt";
	font-size: 3.6842105263vw;
	letter-spacing: 0.04em;
	line-height: 1.7142857143;
	text-align: justify;
}

.footer__sns-title {
	color: #fff;
	font-size: 3.6842105263vw;
	font-weight: 700;
	letter-spacing: 0.1em;
}

.footer__copyright {
	color: #fff;
	font-size: 2.1052631579vw;
	letter-spacing: 0.1em;
	line-height: 1.8125;
}

.logo {
	height: 10.5263157895vw;
	width: 35.2631578947vw;
}

.logo a {
	display: inline-block;
	height: 100%;
	width: 100%;
}

.logo img {
	height: 100%;
	width: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

.sns {
	align-items: center;
	bottom: 3.9473684211vw;
	display: flex;
	flex-direction: column;
	position: fixed;
	right: 3.9473684211vw;
	z-index: 1000;
}

.sns__title {
	margin-bottom: 2.6315789474vw;
}

.sns__title img {
	height: 100%;
	width: 100%;
}

.sns__icon + .sns__icon {
	margin-top: 4.7368421053vw;
}

.sns__icon {
	height: 10.5263157895vw;
	width: 10.5263157895vw;
}

.sns__icon a {
	display: inline-block;
	height: 100%;
	width: 100%;
}

.sns__icon img {
	display: block;
	height: 100%;
	width: 100%;
	-o-object-fit: contain;
	object-fit: contain;
}

.js-fadeIn {
	opacity: 0;
	transform: translateY(30px);
	will-change: auto;
}

.loading {
	background: linear-gradient(0deg, rgb(220, 235, 255) 0%, rgb(255, 255, 255) 100%);
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100vw;
	z-index: 9999;
}

.loading__logo {
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 50%;
	z-index: 10000;
}

.loading__logo img {
	margin-inline: auto;
}

@media (prefers-reduced-motion: reduce) {

html:focus-within {
	scroll-behavior: auto;
}

*,
*::before,
*::after {
	animation-duration: 0.01ms !important;
	animation-iteration-count: 1 !important;
	scroll-behavior: auto !important;
	transition-duration: 0.01ms !important;
}

}

@media (hover: hover) {

.movie__item a:hover::after {
	transform: translate(-50%, -50%) scale(1.3);
}

.whats__upper__video a:hover::after {
	transform: translate(-50%, -50%) scale(1.3);
}

}

@media screen and (min-width: 768px) {

html {
	font-size: 1.3333333333vw;
}

a:hover {
	opacity: 0.8;
}

.br-sp {
	display: none;
}

.inner {
	padding: 0 2.5rem;
	width: 67.5rem;
}

.cast__inner {
	padding: 0 2.5rem;
	width: 67.5rem;
}

.footer__inner {
	padding: 0 2.5rem;
	width: 67.5rem;
}

.header {
	height: 5.875rem;
}

.header__logo {
	left: 1rem;
	top: 1.25rem;
}

.fv {
	margin-bottom: 4.8333333333vw;
	margin-right: 6.25rem;
	margin-top: -2.25rem;
}

.fv__img {
	border-radius: 0 3.75rem 3.75rem 0;
}

.fv__title {
	bottom: -3.625rem;
	bottom: -4.8333333333vw;
	height: 7.375rem;
	height: 9.8333333333vw;
	left: 2.5rem;
	left: 3.3333333333vw;
	width: 63.875rem;
	width: 85.1666666667vw;
}

.lead {
	padding-bottom: 3.3333333333vw;
	padding-top: 5.1666666667vw;
}

.lead::before {
	background: url(../img/bg_img-cylinder@2x.png) no-repeat top center/cover;
}

.lead__wrap {
	grid-template-columns: repeat(2, auto);
	position: relative;
}

.lead__content {
	display: flex;
	flex-direction: column;
	left: 9.375rem;
	margin-top: 6.25rem;
	position: relative;
}

.lead__logo {
	height: 8.25rem;
	margin-top: 2.5rem;
	width: 25.375rem;
}

.lead__img {
	height: 49rem;
	left: 4.375rem;
	margin-top: 0;
	position: relative;
	width: 27.5rem;
}

.movie {
	clip-path: polygon(0 13.5353535354%, 100% 0%, 100% 86.4646464646%, 0% 100%);
	padding-top: 9.375rem;
}

.movie::before {
	background: url(../img/bg_img-scope@2x.png) no-repeat center/cover;
}

.movie__wrap {
	grid-template-columns: repeat(2, auto);
}

.movie__list {
	grid-column: 2/3;
	row-gap: 3rem;
}

.movie__item {
	height: 17.25rem;
	width: 30.75rem;
}

.movie__item.window-small {
	height: 12.25rem;
	width: 21.625rem;
}

.movie__item.window-small a {
	border-radius: 0.625rem;
}

.movie__item a {
	border-radius: 1.25rem;
}

.movie__item a::after {
	height: 5.625rem;
	width: 5.625rem;
}

.movie__item p {
	right: -1.875rem;
	top: 0.625rem;
	transform: none;
}

.movie__img {
	grid-row: 1/2;
	height: 47.25rem;
	width: 28.875rem;
}

.movie__img img {
	margin-top: 0;
}

.modal-video-movie-wrap {
	border-radius: 1.25rem;
}

.modal-video-movie-wrap iframe {
	border-radius: 1.25rem;
}

.whats {
	padding-bottom: 21.6666666667vw;
	padding-top: 2.25rem;
}

.whats__upper {
	grid-template-columns: repeat(3, 1fr);
	justify-content: center;
	-moz-column-gap: 0;
	column-gap: 0;
}

.whats__upper__img.txt-whats {
	align-self: center;
	height: 2.25rem;
	margin-right: 1.25rem;
	width: 8rem;
}

.whats__upper__img.txt-ube {
	align-self: center;
	height: 3rem;
	margin-left: 1.25rem;
	width: 6.5rem;
}

.whats__upper__video {
	grid-column: 2/3;
	grid-row: 1/2;
	height: 14.625rem;
	width: 26rem;
}

.whats__upper__video a {
	border-radius: 1.25rem;
}

.whats__upper__video a::after {
	height: 5.625rem;
	width: 5.625rem;
}

.whats__lower {
	margin-top: 2.25rem;
}

.whats__lower__menu {
	grid-template-columns: auto auto 18.75rem auto auto;
	justify-content: space-evenly;
}

.menu-link {
	height: 15.3125rem;
	width: 9.25rem;
}

.menu01 {
	grid-column: 1/2;
}

.menu02 {
	grid-column: 2/3;
}

.menu03 {
	grid-column: 4/5;
}

.menu04 {
	grid-column: 5/6;
}

.whats__lower__img {
	height: 36.625rem;
	left: calc(50% - 1.25rem);
	top: -5rem;
	transform: translateX(-50%);
	width: 29.875rem;
	z-index: 0;
}

.cast {
	clip-path: polygon(0 11.1203319502%, 100% 0%, 100% 88.8796680498%, 0% 100%);
	padding-bottom: 16.5rem;
	padding-top: 16.5rem;
}

.cast::before {
	background: url(../img/bg_img-circle@2x.png) no-repeat center center/contain;
	height: 75.25rem;
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 122rem;
}

.cast__content {
	grid-template-columns: repeat(3, 1fr);
	-moz-column-gap: 1.25rem;
	align-items: center;
	column-gap: 1.25rem;
}

.cast__name {
	grid-column: 1/2;
	position: static;
	text-align: right;
}

.cast__name__img {
	height: 25rem;
	width: 25rem;
}

.cast__description {
	width: -moz-fit-content;
	width: fit-content;
}

.footer {
	overflow: visible;
	padding-bottom: 10.25rem;
}

.footer::before {
	background: url(../img/bg_img-txt@2x.png) no-repeat top center/cover;
	min-height: 55.625rem;
	top: -5.625rem;
}

.footer__content__bg {
	margin-right: 3.25rem;
	width: 24.625rem;
}

.footer__content__wrap {
	bottom: 3.75rem;
	left: auto;
	/* right: 8.75rem; */
	right: 9.85rem;
	top: auto;
	transform: none;
}

.footer__sns-list {
	-moz-column-gap: 2rem;
	column-gap: 2rem;
	margin-top: 1.25rem;
}

.footer__sns-icon {
	height: 3.125rem;
	width: 3.125rem;
}

.footer__copyright {
	margin-top: 2.25rem;
}

.footer__img {
	bottom: -10.25rem;
	height: 49.375rem;
	left: 0;
	transform: none;
	width: 43.125rem;
}

.sns__title {
	font-size: 0.8125rem;
}

.lead__text {
	font-size: 1.125rem;
	line-height: 2.3333333333;
}

.movie__item p {
	font-size: 1.75rem;
}

.cast__name {
	font-size: 2.5rem;
}

.cast__name::before {
	color: #149BD2;
	font-size: 5.625rem;
	left: 0;
	top: calc(50% - 3.125rem);
	transform: translateY(-50%);
	z-index: -1;
}

.cast__name .fc-blue {
	color: inherit;
}
.cast__name .sp{
	display: none;
}

.cast__description {
	font-size: 0.75rem;
	line-height: 1.6666666667;
}

.footer__sns-title {
	font-size: 1rem;
}

.footer__copyright {
	font-size: 0.625rem;
	letter-spacing: 0.06em;
	line-height: 1.8;
}

.logo {
	height: 4.625rem;
	width: 15.5rem;
}

.sns {
	bottom: 1.75rem;
	right: 1.75rem;
}

.sns__title {
	margin-bottom: 0.625rem;
}

.sns__icon + .sns__icon {
	margin-top: 1.125rem;
}

.sns__icon {
	height: 2.5rem;
	width: 2.5rem;
}

.loading__logo {
	width: 30%;
}

}

@media (min-width: 1200px) {

html {
	font-size: 16px;
}

}

@media (max-width: 375px) {

html {
	font-size: 4.2666666667vw;
}

}