@charset "UTF-8";

/* =================================================
	メグリア80年の歩み
================================================= */
/*============//共通//============*/
/*画像*/
.meglia80th__content img{ height:auto; }

/*============//デジタルブック//============*/
.meglia80th__intro{ position:relative; }
.meglia80th__intro-wrapper{overflow:hidden;padding-top: 40px;}
.meglia80th__intro-catch{
	margin-top:40px;
	font-family:var(--font-eng);
	line-height: 3.2rem;
}
.meglia80th__intro-accent{ color:var(--color-accent); }
.meglia80th__intro-lead{ position:relative; }
.meglia80th__intro-layout{
	width:var(--base-w);
	margin:0 auto;
	padding-bottom:80px;
	display:flex;
	gap:120px;
}
.meglia80th__intro-book{
	padding: 40px 0 80px;
	border-radius:24px;
	background:#fff9d8;
	overflow:hidden;
	box-shadow:var(--next-item-shadow);
	display: flex;
    justify-content: center;
    flex-direction: column;
}
.meglia80th__intro-book-button{
	margin:30px auto 0;
}

/*円周アニメーション*/
.meglia80th__circle {
	margin-top: 20px;
	width:150px;
	min-height:150px;
	position: absolute;
	left: -40px;
}
.meglia80th__circle-svg{
	width:240px;
	animation:rotateIt 10s linear infinite;
}
.meglia80th__circle-inner{ position:relative; }

@keyframes rotateIt {
	to {
		transform:rotate(-360deg);
	}
}
.meglia80th__circle-svg text {
	font-size:2.65rem;
	fill:var(--color-accent);
	font-weight:var(--font-bold);
}
.meglia80th__circle-svg textPath {
	letter-spacing:0.04rem;
	font-family:var(--font-eng);
}
.meglia80th__circle-icon{
	width:80px;
	height:64px;
	position:absolute;
	top:37%;
	left:57%;
}

/*背景のテキストスライドアニメーション*/
.meglia80th__ticker {
	width: 100%;
	overflow:hidden;
	white-space:nowrap;
	position:absolute;
	bottom: 180px;
	z-index:-1;
}
.meglia80th__ticker-track {
	display:inline-flex;
	gap: 90px;
	color:var(--color-bg-base);
	font-size:16rem;
	line-height: 16rem;
	font-family:var(--font-eng);
	animation:ticker 20s linear infinite;
	filter: blur(8px);
}
@keyframes ticker {
	0%   { transform:translateX(0); }
	100% { transform:translateX(-50%); }
}

@media (max-width:1240px) {
	.meglia80th__intro-layout{
		width:var(--content-width-med);
		gap: 60px;
	}
}
@media (max-width:1024px) {
	.meglia80th__intro-wrapper{ padding-top:0; }
	.meglia80th__intro-layout{flex-direction: column;padding-bottom: 40px;}
	.meglia80th__intro-heading-img{ width:300px; }
	.meglia80th__intro-lead{margin-right: 150px;}
	.meglia80th__circle {
		left: auto;
		right: -125px;
		bottom: -40px;
	}
	.meglia80th__circle-svg { width: 200px; }
	.meglia80th__circle-icon {
		width: 60px;
		height: 64px;
		position: absolute;
		top: 36%;
		left: 48%;
	}
}
@media (max-width:767px) {
	.meglia80th__intro-layout{
		width:var(--content-width-sm);
	}
}

@media (any-hover: hover) {
	.meglia80th__intro-book-link:hover .button--secondary {
		color: var(--color-accent);
		background: #fff;
	}
	.meglia80th__intro-book-link:hover .button--secondary .button-arrow::before {
		animation-name: transformRightLeft;
		animation-delay: 0s;
	}
	.meglia80th__intro-book-link:hover .button--secondary .button-arrow::after {
		animation-name: transformLeftRight;
		animation-delay: 0.1s;
	}
}


/*============//MEGLiA 80th Anniversary 紹介動画//============*/
.meglia80th__movie{
	padding: 160px 0;
	background: var(--color-bg-base);
}
.meglia80th__movie.u-rounded-top:before{
	top:auto;
	bottom:0;
}
.meglia80th__movie.u-rounded-bottom:after{
	content:"";
	width:100%;
	height:40px;
	display:block;
	border-radius:0 0 40px 40px;
	background:var(--color-bg-base2);
	position:absolute;
	box-shadow:var(--next-shadow-bottom);
	bottom:-40px;
	z-index:2;
}

.meglia80th__movie-layout{
	width:var(--base-w);
	margin:0 auto;
	display:flex;
	justify-content:space-between;
	gap:40px;
}
.meglia80th__movie-button{ margin-top:70px; }
.meglia80th__movie-wrap{
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.meglia80th__movie-player{
	width:560px;
	height:315px;
}
.meglia80th__movie-wrap iframe{
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}
@media (max-width:1240px) {
	.meglia80th__movie-layout{
		width:var(--content-width-med);
	}
	.meglia80th__ticker {
		bottom: auto;
		top:10%;
	}
}
@media (max-width:1024px) {
	.meglia80th__movie { padding:100px 0; }
	.meglia80th__movie-layout{ flex-direction: column; }
	.meglia80th__movie-layout iframe{ width:100%; }
	.meglia80th__movie-button{ margin-top:20px; }
	.meglia80th__movie-player{ width:100%; height:100%; }
}
@media (max-width:767px) {
	.meglia80th__movie-layout{
		width:var(--content-width-sm);
	}
}


/* =================================================
	メグリア80年の歩み
================================================= */
/*============//共通//============*/
/*画像*/
.vision__content img{ height:auto; }

/*============//デジタルブック//============*/
.vision__intro{ position:relative; }
.vision__intro-wrapper{overflow:hidden;padding-top: 40px;}

.vision__intro-heading{
	border-top:1px solid var(--color-accent);
	border-bottom:1px solid var(--color-accent);
	font-size:4rem;
	line-height:7.2rem;
	margin-top:30px;
	margin-bottom:30px;
	padding-top: 20px;
	padding-bottom: 20px;
}
.vision__intro-catch{
	margin-top:40px;
	font-family:var(--font-eng);
	line-height: 3.2rem;
}
.vision__intro-accent{ color:var(--color-accent); }
.vision__intro-lead{
	color:var(--color-accent);
	position:relative;
}
.vision__intro-layout{
	width:var(--base-w);
	margin:0 auto;
	padding-bottom:80px;
	display:flex;
	justify-content: space-between;
	gap:120px;
}
.vision__intro-book{
	padding: 40px 0 80px;
	border-radius:24px;
	background: #ffebe3;
	overflow:hidden;
	box-shadow:var(--next-item-shadow);
	display: flex;
	justify-content: center;
	flex-direction: column;
}
.vision__intro-book-button{
	margin:30px auto 0;
}
.vision__intro-book-figure{ text-align:center; }

/*背景のテキストスライドアニメーション*/
.vision__ticker {
	width: 100%;
	overflow:hidden;
	white-space:nowrap;
	position:absolute;
	top: 180px;
	z-index:-1;
}
.vision__ticker-track {
	display:inline-flex;
	gap: 90px;
	color:rgba(245,109,21,0.2);
	font-size:16rem;
	line-height: 16rem;
	font-family:var(--font-eng);
	animation:ticker 20s linear infinite;
	filter: blur(8px);
}
@keyframes ticker {
	0%   { transform:translateX(0); }
	100% { transform:translateX(-50%); }
}

@media (max-width:1240px) {
	.vision__intro-layout{
		width:var(--content-width-med);
		gap: 60px;
	}
}
@media (max-width:1024px) {
	.vision__intro-wrapper{ padding-top:0; }
	.vision__intro-layout{ flex-direction: column;padding-bottom:40px; }
	.vision__intro-heading-img{ width:300px; }
	.vision__intro-heading{
		font-size: 2.8rem;
		line-height: 5.8rem;
		margin-top:20px;
		margin-bottom:20px;
		padding-top: 10px;
		padding-bottom: 10px;
	}
	.vision__ticker {
		top:20%;
	}
}
@media (max-width:767px) {
	.vision__intro-layout{
		width:var(--content-width-sm);
	}
}

@media (any-hover: hover) {
	.vision__intro-book-link:hover .button--secondary {
		color: var(--color-accent);
		background: #fff;
	}
	.vision__intro-book-link:hover .button--secondary .button-arrow::before {
		animation-name: transformRightLeft;
		animation-delay: 0s;
	}
	.vision__intro-book-link:hover .button--secondary .button-arrow::after {
		animation-name: transformLeftRight;
		animation-delay: 0.1s;
	}
}



/*============//MEGLiA 100th Anniversary 紹介動画//============*/
.vision__movie{
	padding: 160px 0;
	background: var(--color-bg-base);
}
.vision__movie.u-rounded-top:before{
	top:auto;
	bottom:0;
}
.vision__movie.u-rounded-bottom:after{
	content:"";
	width:100%;
	height:40px;
	display:block;
	border-radius:0 0 40px 40px;
	background:var(--color-bg-base2);
	position:absolute;
	box-shadow:var(--next-shadow-bottom);
	bottom:-40px;
	z-index:2;
}
.vision__movie-layout{
	width:var(--base-w);
	margin:0 auto;
	display:flex;
	justify-content:space-between;
	gap:40px;
}
.vision__movie-button{ margin-top:70px; }
.vision__movie-wrap{
	position: relative;
	width: 100%;
	padding-top: 56.25%;
}
.vision__movie-player{
	width:560px;
	height:315px;
}
.vision__movie-wrap iframe{
	position: absolute;
	top: 0;
	right: 0;
	width: 100%;
	height: 100%;
}
@media (max-width:1240px) {
	.vision__movie-layout{
		width:var(--content-width-med);
	}
}
@media (max-width:1024px) {
	.vision__movie { padding:100px 0; }
	.vision__movie-layout{ flex-direction: column; }
	.vision__movie-layout iframe{ width:100%; }
	.vision__movie-button{ margin-top:20px; }
	.vision__movie-player{ width:100%; height:100%; }
}
@media (max-width:767px) {
	.vision__movie-layout{
		width:var(--content-width-sm);
	}

}