@charset "utf-8";
/*-----------------------------------------------
 * Loading
 * Main
 * First
 * News
 * About
 * World
 * Company
 * System
 * Movie
 * Twitter
-------------------------------------------------*/
/**
 * keyframes
 */
/* 回転 */
@keyframes rotate {
	from {
		transform:rotate(0deg);
	}
	to {
		transform:rotate(360deg);
	}
}

/* scroll down */
@keyframes scrollDown {
	0%{ top: -100%; }
	70%,100%{ top: 100%; }
}


/*-----------------------------------------------
 * Loading
-------------------------------------------------*/
.loading {
	background-color: #fff;
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 9999;
}

.loading:before {
	content: "";
	background: url(../img/common/logo/logo.svg) no-repeat center / 100%;
	width: min(calc(446 / var(--vw-min) * 100vw), 446px);
	height: min(calc(140 / var(--vw-min) * 100vw), 140px);
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
}


/*-----------------------------------------------
 * Main
-------------------------------------------------*/
.topMain {
	position: relative;
	z-index: 1;
}

/*-----------------------------------------------
 * First
-------------------------------------------------*/
.first {
	height: 100vh;
	min-height: var(--common-min-height);
	position: relative;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
	/* iPadが縦向き */
	.first {
		max-height: var(--common-min-height);
	}
}
@media (orientation: landscape) and (max-width: 767px){
	/* デバイスが横向き、画面の横幅が 767px 以下 */
	.first {
		height: calc(1220 / var(--vw-min) * 100vw);
	}
}

/**
 * firstLogoArea
 */
:root {
	/* ロゴエリアの横幅 */
	--logo-area: 500;
}

.firstLogoArea {
	width: calc(var(--logo-area) / var(--vw-min) * 100vw);
	max-width: 700px;
	position: absolute;
	top: 54%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	z-index: 2;
}
@media screen and (max-width:767px){
	.firstLogoArea {
		width: calc(630 / var(--vw-min) * 100vw);
		max-width: 100%;
		top: 50%;
	}
}

/* firstLogo */
.firstLogo {
	width: 100%;
}

/* parts */
.firstLogo__parts {
	display: block;
}
.firstLogo__parts img {
	width: 100%;
}
.firstLogo__parts__flex {
	display: flex;
}

/* 各parts */
.firstLogo__parts.is-parts1 {
	width: calc(272 / var(--logo-area) * 100%);
	overflow: hidden;
}
.firstLogo__parts.is-parts2 {
	width: calc(500 / var(--logo-area) * 100%);
	margin-top: calc(18 / var(--logo-area) * 100%);
	overflow: hidden;
}
.firstLogo__parts.is-parts3 {
	width: calc(124 / var(--logo-area) * 100%);
	margin-top: calc(18 / var(--logo-area) * 100%);
	overflow: hidden;
}
.firstLogo__parts.is-parts4 {
	width: calc(230 / var(--logo-area) * 100%);
	margin-top: calc(18 / var(--logo-area) * 100%);
	margin-left: calc(24 / var(--logo-area) * 100%);
	overflow: hidden;
}
.firstLogo__parts.is-date {
	width: calc(444 / var(--logo-area) * 100%);
	margin-top: calc(18 / var(--logo-area) * 100%);
	margin-right: auto;
	margin-left: auto;
	overflow: hidden;
}
@media screen and (max-width:767px){
	.firstLogo__parts.is-date {
		margin-top: calc(38 / var(--vw-min) * 100vw);
	}
}

/**
 * firstBottom
 */
.firstBottom {
	margin-top: calc(50 / var(--logo-area) * 100%);
}
@media screen and (max-width:767px){
	.firstBottom {
		margin-top: calc(64 / var(--vw-min) * 100vw);
	}
}

/* text */
.firstBottom__text {
	font-size: min(calc(24 / var(--vw-min) * 100vw), 24px);
	font-weight: 700;
	margin-bottom: 0.8em;
	text-align: center;
	white-space: nowrap;
}
@media screen and (max-width:767px){
	.firstBottom__text {
		font-size: calc(32 / var(--vw-min) * 100vw);
		margin-bottom: 2em;
	}
}

/* text2 */
.firstBottom__text2 > a {
	background-color: #fff;
	border: 2px solid rgb(var(--color-rightblue));
	border-radius: 2em;
	color: rgb(var(--color-rightblue));
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: min(calc(20 / var(--vw-min) * 100vw), 20px);
	font-weight: 700;
	text-align: center;
	text-decoration: none;
	padding: 0.4em 0;
}
.firstBottom__text2 > a:after {
	content: "";
	background-color: rgb(var(--color-rightblue));
	display: block;
	-webkit-mask: url(../img/common/icon/icon_dl.svg) no-repeat center / contain;
	mask: url(../img/common/icon/icon_dl.svg) no-repeat center / contain;
	width: min(calc(24 / var(--vw-min) * 100vw), 24px);
	height: min(calc(20 / var(--vw-min) * 100vw), 20px);
	margin-left: 1em;
}
/* hover */
.firstBottom__text2 > a {
	transition: color .3s ease,
				background-color .3s ease;
}
.firstBottom__text2 > a:hover {
	background-color: rgb(var(--color-rightblue));
	color: #fff;
}
.firstBottom__text2 > a:after {
	transition: background-color .3s ease;
}
.firstBottom__text2 > a:hover:after {
	background-color: #fff;
}

/* text3 */
@media screen and (max-width:767px){
	.firstBottom__text3 {
		background-color: #000;
		color: rgb(var(--color-rightblue));
		display: table;
		font-size: min(calc(28 / var(--vw-min) * 100vw), 28px);
		margin: 0 auto;
		line-height: 1;
		padding: 1px 1px 2px;
	}
}

/**
 * firstBottom__lists
 */
.firstBottom__lists {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: calc(20 / var(--logo-area) * 100%);
}
@media screen and (max-width:767px){
	.firstBottom__lists {
		margin-top: calc(40 / var(--vw-min) * 100vw);
	}
}

/* li */
.firstBottom__lists > li {
	margin-left: calc(10 / var(--logo-area) * 100%);
	margin-right: calc(10 / var(--logo-area) * 100%);
}
.firstBottom__lists > li.is-app {
	width: min(calc(216 / var(--logo-area) * 100%), 216px);
}
.firstBottom__lists > li.is-google {
	width: min(calc(242 / var(--logo-area) * 100%), 242px);
}
@media screen and (max-width:767px){
	.firstBottom__lists > li {
		margin-left: calc(20 / var(--vw-min) * 100vw);
		margin-right: calc(20 / var(--vw-min) * 100vw);
	}
	.firstBottom__lists > li.is-app {
		width: calc(218 / var(--vw-min) * 100vw)
	}
	.firstBottom__lists > li.is-google {
		width: calc(270 / var(--vw-min) * 100vw)
	}
}

/* img */
.firstBottom__lists > li img {
	width: 100%;
}

/**
 * deviseListsWrap
 */
.first__deviseListsWrap {
	position: absolute;
	right: 30px;
	bottom: 30px;
	z-index: 2;
}
.first__deviseLists {
	background-color: #fff;
	border-radius: min(calc(50 / var(--vw-min) * 100vw), 50px);
	display: flex;
	align-items: center;
	padding: min(calc(8.5 / var(--vw-min) * 100vw), 8.5px) min(calc(30 / var(--vw-min) * 100vw), 30px);
}
@media screen and (max-width:767px){
	.first__deviseListsWrap {
		width: calc(384 / var(--vw-min) * 100vw);
		margin: auto;
		right: 0;
		left: 0;
		bottom: calc(170 / var(--vw-min) * 100vw);
	}
	.first__deviseLists {
		justify-content: center;
		padding: 8px 20px;
	}
}

/* li */
.first__deviseLists > li {
	height: min(calc(33 / var(--vw-min) * 100vw), 33px);
}
.first__deviseLists > li:not(:first-child) {
	margin-left:min(calc(24 / var(--vw-min) * 100vw), 24px);
}
@media screen and (max-width:767px){
	.first__deviseLists > li {
		height: calc(54 / var(--vw-min) * 100vw);
	}
	.first__deviseLists > li:not(:first-child) {
		margin-left: calc(30 / var(--vw-min) * 100vw);
	}
}

/* img */
.first__deviseLists > li img {
	height: 100%;
	object-fit: contain;
	vertical-align: baseline;
}

/**
 * share
 */
.first__dlWrap {
	position: absolute;
	top: 50%;
	right: min(2vw, 24px);
	transform: translate(0%, -50%);
	z-index: 2;
}
.first__dl {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}

/* dt */
.first__dl > dt {
	font-size: min(calc(14 / var(--vw-min) * 100vw), 14px);
	letter-spacing: 0.01em;
	margin-bottom: 1em;
}

/**
 * shareLists
 */
.first__dl__share__item {
	width: min(calc(24 / var(--vw-min) * 100vw), 24px);
	height: min(calc(24 / var(--vw-min) * 100vw), 24px);
}
.first__dl__share__item:not(:first-child) {
	margin-top: min(calc(24 / var(--vw-min) * 100vw), 24px);
}

/* link */
.first__dl__share__link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	position: relative;
	text-decoration: none;
}
.first__dl__share__link:before {
	content: "";
	background-color: #000;
	display: block;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	width: 100%;
	height: 100%;
}

/* 各SNSパーツ */
.first__dl__share__item.is-twitter .first__dl__share__link:before {
	-webkit-mask-image: url(../img/common/icon/icon_tw.svg);
	mask-image: url(../img/common/icon/icon_tw.svg);
}
.first__dl__share__item.is-facebook .first__dl__share__link:before {
	-webkit-mask-image: url(../img/common/icon/icon_fb.svg);
	mask-image: url(../img/common/icon/icon_fb.svg);
}

/* hover */
.first__dl__share__link:before {
	transition: background-color .3s ease;
}
.first__dl__share__link:hover:before {
	background-color: rgb(var(--color-rightblue));
}

/**
 * tgs link
 */
.first__tgsLink {
	width: min(calc(360 / var(--vw-min) * 100vw), 360px);
	position: absolute;
	left: 30px;
    bottom: 30px;
	z-index: 2;
}
.first__tgsLink img {
	width: 100%;
}
@media screen and (max-width:767px){
	.first__tgsLink {
		width: 60%;
		margin: auto;
		left: 0;
		right: 0;
		bottom: calc(40 / var(--vw-min) * 100vw);
	}
}

/* hover */
@media screen and (min-width:768px){
	.first__tgsLink img {
		transition: transform .6s var(--easing-outquart);
	}
	.first__tgsLink a:hover img {
		transform: scale(1.08);
	}
}

/**
 * scroll
 */
@media screen and (max-width:767px){
	.first__scrollWrap {
		width: calc(60 / var(--vw-min) * 100vw);
		position: absolute;
		bottom: 0;
		right: 0;
		z-index: 2;
	}
	.first__scroll {
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		width: 100%;
		text-decoration: none;
	}
	.first__scroll--text {
		font-size: calc(20 / var(--vw-min) * 100vw);
		letter-spacing: 0.05em;
		line-height: 1;
		margin-bottom: 0.5em;
		white-space: nowrap;
		-webkit-writing-mode: vertical-rl;
		writing-mode: vertical-rl;
	}
	.first__scroll--line {
		background-color: rgba(0, 0, 0, 0.4);
		display: block;
		width: 2px;
		height: calc(60 / var(--vw-min) * 100vw);
		overflow: hidden;
		position: relative;
	}
	.first__scroll--line:before {
		content: "";
		background-color: #000;
		display: block;
		width: 100%;
		height: 100%;
		position: absolute;
		animation: scrollDown 2s ease-in-out infinite;
	}
}

/**
 * background
 */
.first__bgWrap{
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	pointer-events: none;
}

/* cover */
.first__bgWrap:before {
	content: "";
	display: inline-block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 2;
	background-image: url(../img/top/firstv/firstv_bg.png);
	background-repeat: repeat;
}
.first__bgWrap:after {
	content: "";
	display: inline-block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 3;
	background-color: rgba(255, 255, 255, 0.6);
}

/* bg */
.first__bg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
	background: url(../img/top/firstv/firstv_vis.jpg) no-repeat center center/cover;
}
@media screen and (max-width:767px){
	.first__bg {
		background-image: url(../img/top/firstv/firstv_vis_small.jpg);
	}
}

/**
 * first animation
 */
/* ani-first-logo */
.ani-first-logo {
	opacity: 0;
	transform: translateY(101%);
	transition: transform .8s ease,
				opacity .8s ease;
}
.ani-first-logo.is-ani {
	opacity: 1;
	transform: translateY(0);
}
.ani-first-logo.is-two {
	transition-delay: .1s;
}
.ani-first-logo.is-three {
	transition-delay: .2s;
}

/* ani-first-date */
.ani-first-date {
	opacity: 0;
	transition: opacity .8s ease;
	transition-delay: .5s;
}
.ani-first-date.is-ani {
	opacity: 1;
}

/* ani-first-fade */
.ani-first-fade {
	transform: translateY(30%);
	opacity: 0;
	transition: transform .8s ease,
				opacity .8s ease;
}
.ani-first-fade.is-ani {
	transform: translateY(0);
	opacity: 1;
}

/* ani-first-fade2 */
.ani-first-fade2 {
	opacity: 0;
	transition: opacity .8s ease;
}
.ani-first-fade2.is-ani {
	opacity: 1;
}

/* ani-first-bg */
.ani-first-bg {
	transform: scale(1.3);
	opacity: 0;
	transition: transform 5s cubic-bezier(0.16, 1, 0.3, 1),
				opacity .8s ease;
}
.ani-first-bg.is-ani {
	transform: scale(1);
	opacity: 1;
}

/* ani-first-header */
@media screen and (min-width:768px){
	.ani-first-header {
		transform: translateY(-100%);
		opacity: 0;
		transition: transform 1s ease,
					opacity 1s ease;
	}
	.ani-first-header.is-ani {
		opacity: 1;
		transform: translateY(0);
	}
}
@media screen and (max-width:767px){
	.ani-first-header {
		opacity: 0;
		transition: opacity 1s ease;
	}
	.ani-first-header.is-ani {
		opacity: 1;
	}
}


/*-----------------------------------------------
 * News
-------------------------------------------------*/
.news {
	padding-top: min(calc(100 / var(--vw-min) * 100vw), 100px);
}
@media screen and (max-width:767px){
	.news {
		padding-top: calc(80 / var(--vw-min) * 100vw);
	}
}

/* inner */
.news__inner {
	width: min(calc(850 / var(--vw-min) * 100vw), 850px);
	margin: 0 auto;
	position: relative;
}
@media screen and (max-width:767px){
	.news__inner {
		width: 100%;
	}
}

/* title */
.news__title {
	margin-bottom: min(calc(40 / var(--vw-min) * 100vw), 40px);
	position: relative;
	z-index: 1;
}
@media screen and (max-width:767px){
	.news__title {
		margin-bottom: calc(50 / var(--vw-min) * 100vw);
	}
}

/**
 * twlink
 */
.news__twlink {
	width: min(calc(40 / var(--vw-min) * 100vw), 40px);
	height: min(calc(40 / var(--vw-min) * 100vw), 40px);
	margin: auto;
	position: absolute;
	top: min(calc(6 / var(--vw-min) * 100vw), 6px);
	right: 0;
	left: min(calc(170 / var(--vw-min) * 100vw), 170px);
	z-index: 2;
}
.news__twlink > a {
	background-color: #fff;
	border-radius: 50%;
	border: 2px solid rgb(var(--color-rightblue));
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	position: relative;
}
@media screen and (max-width:767px){
	.news__twlink {
		width: calc(56 / var(--vw-min) * 100vw);
		height: calc(56 / var(--vw-min) * 100vw);
		top: 2vw;
		left: 36vw;
	}
	.news__twlink > a {
		background-color: rgb(var(--color-rightblue));
	}
}

/* icon */
.news__twlink > a:before {
	content: "";
	background-color: rgb(var(--color-rightblue));
	display: block;
	-webkit-mask: url(../img/common/icon/icon_tw.svg) no-repeat center / contain;
	mask: url(../img/common/icon/icon_tw.svg) no-repeat center / contain;
	width: min(calc(22 / var(--vw-min) * 100vw), 22px);
	height: min(calc(18 / var(--vw-min) * 100vw), 18px);
}
@media screen and (max-width:767px){
	.news__twlink > a:before {
		background-color: #fff;
		width: calc(32 / var(--vw-min) * 100vw);
		height: calc(26 / var(--vw-min) * 100vw);
	}
}

/* hover */
.news__twlink > a {
	transition: background-color .3s ease;
}
.news__twlink > a:hover {
	background-color: rgb(var(--color-rightblue));
}
.news__twlink > a:before {
	transition: background-color .3s ease;
}
.news__twlink > a:hover:before {
	background-color: #fff;
}

/**
 * newsLists
 */
.newsLists {
	display: flex;
	flex-wrap: wrap;
}
@media screen and (max-width:767px){
	.newsListsWrap {
		padding: 0 calc(60 / var(--vw-min) * 100vw);
	}
	.newsLists {
		display: block;
	}
}

/* item */
.newsLists__item {
	width: calc((100% - min(calc(100 / var(--vw-min) * 100vw), 100px)) / 3);
	margin-bottom: min(calc(40 / var(--vw-min) * 100vw), 40px);
	transition: opacity 0.5s ease;
}
.newsLists__item:not(:nth-child(3n + 1)) {
	margin-left: min(calc(50 / var(--vw-min) * 100vw), 50px);
}
@media screen and (max-width:767px){
	.newsLists__item {
		width: 100%;
		margin-bottom: 0;
	}
	.newsLists__item:not(:nth-child(3n + 1)) {
		margin-left: 0;
	}
}

/* is-hd */
.newsLists__item.is-hd {
	opacity: 0;
}

/* a */
.newsLists__item > a {
	display: block;
	padding-bottom: min(calc(22 / var(--vw-min) * 100vw), 22px);
	position: relative;
	text-decoration: none;
	min-height: 100%;
}
@media screen and (max-width:767px){
	.newsLists__item > a {
		padding-top: calc(18 / var(--vw-min) * 100vw);
		padding-bottom: calc(28 / var(--vw-min) * 100vw);
	}
}

/* date, title */
.newsLists__item--date {
	color: rgb(var(--color-rightblue));
	font-size: min(calc(14 / var(--vw-min) * 100vw), 14px);
	line-height: 1;
	letter-spacing: 0.01em;
}
.newsLists__item--title {
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	line-height: 2;
	letter-spacing: -0.001em;
	margin-top: min(calc(8 / var(--vw-min) * 100vw), 8px);
	display: -webkit-box;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
@media screen and (max-width:767px){
	.newsLists__item--date {
		font-size: calc(20 / var(--vw-min) * 100vw);
	}
	.newsLists__item--title {
		font-size: calc(20 / var(--vw-min) * 100vw);
		-webkit-line-clamp: 2;
	}
}

/* arrow */
.newsLists__item > a:before {
	content: "";
	background-color: #000;
	-webkit-mask: url(../img/common/icon/icon_arrow.svg) no-repeat center / contain;
	mask: url(../img/common/icon/icon_arrow.svg) no-repeat center / contain;
	width: min(calc(10 / var(--vw-min) * 100vw), 10px);
	height: min(calc(10 / var(--vw-min) * 100vw), 10px);
	position: absolute;
	bottom: 0;
	right: 0;
}

/* line */
.newsLists__line {
	background-color: #000;
	width: calc(100% - 1em);
	height: 1px;
	position: absolute;
	bottom: min(calc(4 / var(--vw-min) * 100vw), 4px);
	left: 0;
}

/* hover */
.newsLists__item > a:before {
	transition: background-color .3s ease;
}
.newsLists__item > a:hover:before {
	background-color: rgb(var(--color-rightblue));
}
.newsLists__line:before {
	content: "";
	background-color: rgb(var(--color-rightblue));
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	transform: scale(0, 1);
	transform-origin: right top;
	transition: transform .3s ease;
}
.newsLists__item > a:is(:hover, .is-active) .newsLists__line:before {
	transform-origin: left top;
	transform: scale(1, 1);
}

/**
 * moreLink
 */
.news__moreLink {
	width: min(calc(250 / var(--vw-min) * 100vw), 250px);
	height: min(calc(32 / var(--vw-min) * 100vw), 32px);
	margin: 0 auto;
}
@media screen and (max-width:767px){
	.news__moreLink {
		width: calc(240 / var(--vw-min) * 100vw);
		height: calc(56 / var(--vw-min) * 100vw);
		margin: calc(50 / var(--vw-min) * 100vw) auto 0;
	}
}

/* a */
.news__moreLink > a {
	background-color: #fff;
	border-radius: min(calc(32 / var(--vw-min) * 100vw), 32px);
	border: 2px solid rgb(var(--color-rightblue));
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	position: relative;
	text-decoration: none;
}
@media screen and (max-width:767px){
	.news__moreLink > a {
		border-radius: calc(56 / var(--vw-min) * 100vw);
	}
}

/* text, arrow */
.news__moreLink > a > span {
	color: rgb(var(--color-rightblue));
	font-size: min(calc(14 / var(--vw-min) * 100vw), 14px);
	letter-spacing: 0.01em;
	margin-top: -0.1em;
	position: relative;
	z-index: 1;
}
.news__moreLink > a:before {
	content: "";
	width: min(calc(5 / var(--vw-min) * 100vw), 5px);
	height: min(calc(5 / var(--vw-min) * 100vw), 5px);
	border-top: solid 2px rgb(var(--color-rightblue));
	border-right: solid 2px rgb(var(--color-rightblue));
	margin: auto;
	position: absolute;
	top: -0.2em;
	bottom: 0;
	right: 1em;
	transform: rotate(135deg);
}
@media screen and (max-width:767px){
	.news__moreLink > a > span {
		font-size: calc(24 / var(--vw-min) * 100vw);
	}
	.news__moreLink > a:before {
		width: calc(8 / var(--vw-min) * 100vw);
		height: calc(8 / var(--vw-min) * 100vw);
	}
}

/* hover */
@media screen and (min-width:768px){
	.news__moreLink > a {
		transition: background-color .3s ease;
	}
	.news__moreLink > a:hover {
		background-color: rgb(var(--color-rightblue));
	}
	.news__moreLink > a > span {
		transition: color .3s ease;
	}
	.news__moreLink > a:hover > span {
		color: #fff;
	}
	.news__moreLink > a:before {
		transition: border-color .3s ease;
	}
	.news__moreLink > a:hover:before {
		border-color: #fff;
	}
}

/**
 * scroll animation
 */
.ani-fade-3lists > li {
	transform: translateY(30%);
	opacity: 0;
	transition: transform .6s ease,
				opacity .6s ease;
}
.ani-fade-3lists.is-ani > li {
	transform: translateY(0);
	opacity: 1;
}
.ani-fade-3lists.is-ani > li:nth-child(2) {
	transition-delay: 0.1s;
}
.ani-fade-3lists.is-ani > li:nth-child(3) {
	transition-delay: 0.2s;
}


/*-----------------------------------------------
 * About
-------------------------------------------------*/
.about {
	padding-top: min(calc(90 / var(--vw-min) * 100vw), 90px);
}

/* inner */
.about__inner {
	width: min(calc(850 / var(--vw-min) * 100vw), 850px);
	margin: min(calc(30 / var(--vw-min) * 100vw), 30px) auto 0;
	position: relative;
}
@media screen and (max-width:767px){
	.about__inner {
		width: 100%;
		margin: calc(40 / var(--vw-min) * 100vw) auto 0;
		padding: 0 calc(40 / var(--vw-min) * 100vw);
	}
}

/* topText */
.about__topText {
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	line-height: 2;
	margin-bottom: min(calc(50 / var(--vw-min) * 100vw), 50px);
	text-align: center;
}
@media screen and (max-width:767px){
	.about__topText {
		font-size: calc(20 / var(--vw-min) * 100vw);
	}
}

/**
 * aboutBgWrap
 */
.aboutBgWrap {
	width: 100%;
	padding-top: 56.25%;
	position: relative;
}
.aboutBgWrap a {
	display: block;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}

/* icon */
.aboutBg__icon {
	width: min(calc(110 / var(--vw-min) * 100vw), 110px);
	height: min(calc(110 / var(--vw-min) * 100vw), 110px);
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
}
@media screen and (max-width:767px){
	.aboutBg__icon {
		width: calc(130 / var(--vw-min) * 100vw);
		height: calc(130 / var(--vw-min) * 100vw);
	}
}

/* icon parts */
.aboutBg__icon:before {
	content: "";
	width: 100%;
	height: 100%;
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: url(../img/common/icon/icon_play.svg) no-repeat 0 0/100%;
	animation: rotate 10s linear infinite;
}
.aboutBg__icon::after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 16px solid transparent;
	border-bottom: 16px solid transparent;
	border-left: 28px solid #ffffff;
	border-right: 0;
	position: absolute;
	top: 50%;
	left: calc(50% + 5px);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
@media screen and (max-width:767px){
	.aboutBg__icon::after {
		left: calc(50% + 3px);
		border-top: 12px solid transparent;
		border-bottom: 12px solid transparent;
		border-left: 20px solid #ffffff;
	}
}

/* aboutBg */
.aboutBg {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}
.aboutBg:after {
	content: "";
	background: #000;
	width: 100%;
	height: 100%;
	opacity: .4;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

/* inner */
.aboutBg__inner {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%,-50%);
	z-index: 0;
}

/* hover */
.aboutBg__icon {
	transition: transform .3s ease;
}
.aboutBgWrap a:hover .aboutBg__icon {
	transform: scale(1.15);
}

/* bottomLink */
.about__bottomLink{
	width: min(calc(500 / var(--vw-min) * 100vw), 500px);
	margin: min(calc(50 / var(--vw-min) * 100vw), 50px) auto 0;
}
@media screen and (max-width:767px){
	.about__bottomLink{
		width: calc(590 / var(--vw-min) * 100vw);
	}
}

/*-----------------------------------------------
 * World
-------------------------------------------------*/
.world {
	padding-top: min(calc(100 / var(--vw-min) * 100vw), 100px);
}

/* inner */
.world__inner {
	max-width: 1400px;
	margin: 0 auto;
	padding-top: min(calc(100 / var(--vw-min) * 100vw), 100px);
	position: relative;
}
.world__cont {
	max-width: min(calc(850 / var(--vw-min) * 100vw), 850px);
	margin: 0 auto;
	padding-bottom: min(calc(100 / var(--vw-min) * 100vw), 100px);
	position: relative;
	z-index: 2;
}

/**
 * textArea
 */
.world__textAreaWrap {
	width: 100%;
}
.world__textArea {
	width: calc(50% + min(calc(50 / var(--vw-min) * 100vw), 50px));
	margin-top: min(calc(50 / var(--vw-min) * 100vw), 50px);
	margin-left: auto;
}
@media screen and (max-width:767px){
	.world__textAreaWrap {
		overflow: hidden;
	}
	.world__textArea {
		width: calc(50% + calc(60 / var(--vw-min) * 100vw));
		margin-top: calc(60 / var(--vw-min) * 100vw);
		padding-right: calc(30 / var(--vw-min) * 100vw);
	}
}

/* catch */
.world__catch {
	font-size: min(calc(24 / var(--vw-min) * 100vw), 24px);
	letter-spacing: -0.01em;
}
.world__catch small {
	font-size: 60%;
}
@media screen and (max-width:767px){
	.world__catch {
		margin-left: -24vw;
	}
}

/* text */
.world__text {
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	letter-spacing: -0.01em;
	line-height: 2.5;
	margin-top: min(calc(30 / var(--vw-min) * 100vw), 30px);
}
@media screen and (max-width:767px){
	.world__text {
		font-size: calc(20 / var(--vw-min) * 100vw);
		margin-top: calc(50 / var(--vw-min) * 100vw);
	}
}

/**
 * worldLinkLists
 */
.worldLinkLists {
	width: min(calc(500 / var(--vw-min) * 100vw), 500px);
	margin: min(calc(80 / var(--vw-min) * 100vw), 80px) auto 0;
}
@media screen and (max-width:767px){
	.worldLinkLists {
		width: calc(590 / var(--vw-min) * 100vw);
	}
}

/* li */
.worldLinkLists > li:not(:first-child) {
	margin-top: min(calc(20 / var(--vw-min) * 100vw), 20px);
}
@media screen and (max-width:767px){
	.worldLinkLists > li:not(:first-child) {
		margin-top: calc(40 / var(--vw-min) * 100vw);
	}
}

/**
 * bg
 */
.world__bg {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 1;
}

/* cont */
.world__bg__cont {
	width: 50%;
	height: 100vh;
	overflow: hidden;
	position: sticky;
	top: 0;
}
.world__bg__cont--vs {
	background: url(../img/top/world/world_vis.jpg) no-repeat center / cover;
	width: 100vw;
	max-width: 1400px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
}
@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
	/* iPadが縦向き */
	.world__bg__cont {
		height: 100%;
	}
}
@media screen and (max-width:767px){
	.world__bg__cont--vs {
		/* width: 330vw; */
		width: 220vw;
		left: auto;
		right: 0;
	}
}

/* scroll animation */
.world__bg__cont--vs {
	opacity: 0;
	transition: opacity .6s ease-in-out;
}
.world__bg__cont--vs.is-ani {
	opacity: 1;
}


/*-----------------------------------------------
 * Company
-------------------------------------------------*/
.company {
	padding-top: min(calc(90 / var(--vw-min) * 100vw), 90px);
}

/* inner */
.company__inner {
	width: min(calc(850 / var(--vw-min) * 100vw), 850px);
	margin: 0 auto;
}
@media screen and (max-width:767px){
	.company__inner {
		width: 100%;
		padding: 0 calc(40 / var(--vw-min) * 100vw);
	}
}

/* text */
.company__text {
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	margin-top: 1em;
	margin-bottom: min(calc(40 / var(--vw-min) * 100vw), 40px);
	text-align: center;
}
@media screen and (max-width:767px){
	.company__text {
		font-size: calc(20 / var(--vw-min) * 100vw);
	}
}

/* link */
.company__link {
	width: min(calc(500 / var(--vw-min) * 100vw), 500px);
	margin: min(calc(40 / var(--vw-min) * 100vw), 40px) auto 0;
}
@media screen and (max-width:767px){
	.company__link {
		width: calc(590 / var(--vw-min) * 100vw);
	}
}

/**
 * companyLists
 */
.companyLists {
	display: flex;
	flex-wrap: wrap;
}

/* li */
.companyLists > li {
	border: 1px solid #ccc;
	width: calc((100% - min(calc(30 / var(--vw-min) * 100vw), 30px)) / 4);
	margin-bottom: 10px;
}
.companyLists > li:not(:nth-child(4n + 1)) {
	margin-left: min(calc(10 / var(--vw-min) * 100vw), 10px);
}
@media screen and (max-width:767px){
	.companyLists > li {
		width: calc((100% - calc(20 / var(--vw-min) * 100vw)) / 2);
	}
	.companyLists > li:not(:nth-child(4n + 1)) {
		margin-left: 0;
	}
	.companyLists > li:not(:nth-child(2n + 1)) {
		margin-left: calc(20 / var(--vw-min) * 100vw);
	}
}

/* img */
.companyLists > li img {
	width: 100%;
}

/**
 * company__dl
 */
.company__dl {
	margin-top: min(calc(20 / var(--vw-min) * 100vw), 40px);
}

/* dt dd */
.company__dl > dt {
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	font-weight: 700;
	margin-bottom: min(calc(20 / var(--vw-min) * 100vw), 20px);
	text-align: center;
}
.company__dl > dt:not(:first-of-type) {
	margin-top: min(calc(40 / var(--vw-min) * 100vw), 40px);
}
.company__dl > dd {
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	display: flex;
	justify-content: center;
}
@media screen and (max-width:767px){
	.company__dl > dt {
		font-size: calc(20 / var(--vw-min) * 100vw);
	}
	.company__dl > dd {
		font-size: calc(20 / var(--vw-min) * 100vw);
	}
}


/*-----------------------------------------------
 * System
-------------------------------------------------*/
.system {
	padding-top: min(calc(100 / var(--vw-min) * 100vw), 100px);
}

/* text */
.system__text {
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	line-height: 2;
	margin-top: min(calc(50 / var(--vw-min) * 100vw), 50px);
	margin-bottom: min(calc(50 / var(--vw-min) * 100vw), 50px);
	text-align: center;
}
@media screen and (max-width:767px){
	.system__text {
		font-size: calc(20 / var(--vw-min) * 100vw);
		padding: 0 calc(40 / var(--vw-min) * 100vw);
	}
}

/**
 * systemSlide
 */
.systemSlide {
	position: relative;
}

/**
 * systemSlideLists
 */
.systemSlideLists {
	display: flex;
	position: relative;
}
.systemSlideLists.swiper-wrapper{
	transition-timing-function:linear;
}

/* li */
.systemSlideLists > li {
	width: 50%;
}
.systemSlideLists > li > a {
	display: block;
	overflow: hidden;
	position: relative;
}
@media screen and (max-width:767px){
	.systemSlideLists > li {
		width: 80%;
	}
}

/* img */
.systemSlideLists > li img {
	width: 100%;
	position: relative;
	z-index: 1;
}

@media screen and (max-width:767px){
	.systemSlideLists > li > a:before {
		content: "";
		background-color: rgba(0, 0, 0, 0.4);
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
	}
	.systemSlideLists > li > a:after {
		content: "";
		background-color: #fff;
		-webkit-mask: url(../img/common/icon/icon_detail.svg) no-repeat center / contain;
		mask: url(../img/common/icon/icon_detail.svg) no-repeat center / contain;
		width: calc(96 / var(--vw-min) * 100vw);
		height: calc(96 / var(--vw-min) * 100vw);
		margin: auto;
		position: absolute;
		top: 0;
		right: 0;
		bottom: 0;
		left: 0;
		z-index: 3;
	}
}

/* hover */
@media screen and (min-width:768px){
	.systemSlideLists > li > a:before {
		content: "";
		background-color: rgba(0, 0, 0, 0.4);
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 2;
		transform: translateY(100%);
		transition: transform .5s var(--easing-outquart);
	}
	.systemSlideLists > li > a:hover:before {
		transform: translateY(0);
	}
}

/*-----------------------------------------------
 * Movie
-------------------------------------------------*/
.movie {
	padding-top: min(calc(100 / var(--vw-min) * 100vw), 100px);
}

/* title */
.movie__title {
	margin-bottom: min(calc(50 / var(--vw-min) * 100vw), 50px);
}

/**
 * movieLists
 */
.movieLists__item {
	width: 50%;
	position: relative;
	margin: 0 auto;
}
@media screen and (max-width:767px){
	.movieLists__item {
		width: 80%;
	}
}

/* a */
.movieLists__item > a {
	display: block;
	text-decoration: none;
}

/* thumb */
.movieLists__thumbWrap {
	width: 100%;
	padding-top: 56.25%;
	overflow: hidden;
	position: relative;
	z-index: 1;
}
.movieLists__thumb {
	background-color: #000;
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center;
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
}

/* cover */
.movieLists__thumbWrap:after {
    content: "";
    background: #000;
    width: 100%;
    height: 100%;
    opacity: .4;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}

/* icon */
.movieLists__icon {
	width: min(calc(110 / var(--vw-min) * 100vw), 110px);
	height: min(calc(110 / var(--vw-min) * 100vw), 110px);
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: 2;
}
@media screen and (max-width:767px){
	.movieLists__icon {
		width: calc(130 / var(--vw-min) * 100vw);
		height: calc(130 / var(--vw-min) * 100vw);
	}
}

.movieLists__icon:before {
	content: "";
	width: 100%;
	height: 100%;
	margin: auto;
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	background: url(../img/common/icon/icon_play.svg) no-repeat 0 0/100%;
	animation: rotate 10s linear infinite;
}
.movieLists__icon::after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-top: 16px solid transparent;
	border-bottom: 16px solid transparent;
	border-left: 28px solid #ffffff;
	border-right: 0;
	position: absolute;
	top: 50%;
	left: calc(50% + 5px);
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
}
@media screen and (max-width:767px){
	.movieLists__icon::after {
		left: calc(50% + 3px);
		border-top: 12px solid transparent;
		border-bottom: 12px solid transparent;
		border-left: 20px solid #ffffff;
	}
}

/* title */
.movieLists__title {
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	margin-top: min(calc(24 / var(--vw-min) * 100vw), 24px);
	text-align: center;
}
@media screen and (max-width:767px){
	.movieLists__title {
		font-size: calc(20 / var(--vw-min) * 100vw);
		margin-bottom: calc(10 / var(--vw-min) * 100vw);
	}
}

/* hover */
.movieLists__icon,
.movieLists__thumb {
	transition: transform .3s ease;
}
.movieLists__item > a:hover .movieLists__icon,
.movieLists__item > a:hover .movieLists__thumb {
	transform: scale(1.15);
}

/*-----------------------------------------------
 * Twitter
-------------------------------------------------*/
.twitter {
	padding-top: min(calc(100 / var(--vw-min) * 100vw), 100px);
}

/* inner */
.twitter__inner {
	width: min(calc(850 / var(--vw-min) * 100vw), 850px);
	margin: 0 auto;
	position: relative;
}
@media screen and (max-width:767px){
	.twitter__inner {
		width: 100%;
	}
}

/* title */
.twitter__title {
	margin-bottom: min(calc(40 / var(--vw-min) * 100vw), 40px);
	position: relative;
	z-index: 1;
}
@media screen and (max-width:767px){
	.twitter__title {
		margin-bottom: calc(10 / var(--vw-min) * 100vw);
	}
}

/**
 * twLink
 */
.twitter__twlink {
	width: min(calc(160 / var(--vw-min) * 100vw), 160px);
	height: min(calc(32 / var(--vw-min) * 100vw), 32px);
	position: absolute;
	top: min(calc(10 / var(--vw-min) * 100vw), 10px);
	right: 0;
}
@media screen and (max-width:767px){
	.twitter__twlink {
		width: calc(200 / var(--vw-min) * 100vw);
		height: calc(48 / var(--vw-min) * 100vw);
		margin: 0 auto calc(50 / var(--vw-min) * 100vw);
		position: relative;
		top: auto;
		right: auto;
	}
}

/* a */
.twitter__twlink > a {
	background-color: rgb(var(--color-rightblue));
	border-radius: min(calc(32 / var(--vw-min) * 100vw), 32px);
	color: #fff;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	font-size: min(calc(16 / var(--vw-min) * 100vw), 16px);
	letter-spacing: 0.01em;
	text-decoration: none;
}
@media screen and (max-width:767px){
	.twitter__twlink > a {
		border-radius: calc(48 / var(--vw-min) * 100vw);
		font-size: calc(22 / var(--vw-min) * 100vw);
	}
}

/* icon */
.twitter__twlink > a:after {
	content: "";
	background-color: #fff;
	display: block;
	-webkit-mask: url(../img/common/icon/icon_tw.svg) no-repeat center / contain;
	mask: url(../img/common/icon/icon_tw.svg) no-repeat center / contain;
	width: min(calc(22 / var(--vw-min) * 100vw), 22px);
	height: min(calc(16 / var(--vw-min) * 100vw), 16px);
	margin-left: min(calc(10 / var(--vw-min) * 100vw), 10px);
}
@media screen and (max-width:767px){
	.twitter__twlink > a:after {
		width: calc(29 / var(--vw-min) * 100vw);
		height: calc(24 / var(--vw-min) * 100vw);
	}
}

/* hover */
@media screen and (min-width:768px){
	.twitter__twlink > a {
		transition: background-color .3s ease,
					color .3s ease;
	}
	.twitter__twlink > a:hover {
		background-color: #fff;
		color: rgb(var(--color-rightblue));
	}
	.twitter__twlink > a:after {
		transition: background-color .3s ease;
	}
	.twitter__twlink > a:hover:after {
		background-color: rgb(var(--color-rightblue));
	}
}

/**
 * widget
 */
.twitter__widgetWrap {
	width: min(calc(480 / var(--vw-min) * 100vw), 480px);
	margin: 0 auto;
}
@media screen and (max-width:767px){
	.twitter__widgetWrap {
		width: calc(590 / var(--vw-min) * 100vw);
	}
}

.twitter__widgetWrap a {
	color: #fff;
}

.twitter__widget {
	border: 2px solid rgb(var(--color-rightblue));
	background: #000;
	height: min(calc(450 / var(--vw-min) * 100vw), 450px);
	margin-bottom: min(calc(40 / var(--vw-min) * 100vw), 40px);
	overflow-y: scroll;
	position: relative;
}
.twitter__widget .twitter-timeline {
	width: 100%;
	height: 100%;
	position: absolute !important;
	top: 0;
}
@media screen and (max-width:767px){
	.twitter__widget {
		height: calc(800 / var(--vw-min) * 100vw);
	}
}