/* --------------------------------------------------------------------------------------
   ヘッダー
--------------------------------------------------------------------------------------- */

header {
	position: relative;
	z-index: 10;
}

header nav {
	align-items: center;
	display: flex;
	justify-content: center;
	position: absolute;
	top: 35px;
	width: 100%;
	z-index: 1;
}

header nav ul {
	align-items: center;
	display: flex;
	justify-content: space-between;
	margin-left: 72px;
}

header nav li { margin-left: 24px; }
header nav li:first-child { margin-left: 0; }

header nav li a {
	color: #333;
	display: block;
	font-size: 1.6rem;
	font-weight: 600;
	letter-spacing: 0;
	line-height: 1;
}

header nav .lang a {
	background: url(../img/icon_eng.svg) no-repeat 10px center / 20px auto;
	border: 1px solid #000;
	border-radius: 6px;
	font-size: 1.2rem;
	padding: 9px 25px 9px 38px;
	position: relative;
	transition: all .3s ease-in-out;
}

header nav .lang a::before {
	border-bottom: 1px solid #000;
	content: '';
	display: inline-block;
	height: 6px;
	position: absolute;
	right: 6px;
	top: calc(50% - 8px);
	transform: rotate(45deg);
	vertical-align: middle;
	width: 6px;
}

header nav .lang a::after {
	border-bottom: 1px solid #000;
	content: '';
	display: inline-block;
	height: 6px;
	position: absolute;
	right: 10px;
	top: calc(50% - 4px);
	transform: rotate(-45deg);
	vertical-align: middle;
	width: 6px;
}

header nav .lang a:hover {
	opacity: .6;
	text-decoration: none;
}

header .head-catch {
	align-items: center;
	display: flex;
	flex-flow: column;
	flex-wrap: wrap;
	height: 100vh;
	justify-content: center;
	text-align: center;
}

header .head-catch h1 {
	color: #333;
	font-size: 11rem;
	font-weight: bold;
	letter-spacing: -8px;
	line-height: 1;
	width: 100%;
}

header .head-catch h2 {
	color: #0e3060;
	font-size: 3.8rem;
	font-style: italic;
	font-weight: 400;
	letter-spacing: 1px;
	line-height: 1;
	margin-top: 40px;
	max-width: 638px;
	width: 100%;
}

header .head-news {
	background-color: #f5f5f5;
	bottom: 0;
	display: flex;
	overflow: hidden;
	padding: 30px;
	position: absolute;
	width: 100%;
}

header .head-news h2 {
	align-items: center;
	border-right: 1px solid #ccc;
	display: flex;
	float: left;
	width: 180px;
}

header .head-news h2 strong {
	display: inline-block;
	font-size: 1.8rem;
	margin-right: 24px;
}

header .head-news h2 span { font-size: 1.3rem; }

header .head-news ul {
	float: left;
	margin-left: 50px;
	width: 770px;
}

header .head-news li a {
	align-items: center;
	display: flex;
	font-size: 1.3rem;
}

header .head-news li a time { letter-spacing: -1px; }

header .head-news li a div {
	margin: 0 30px;
	min-width: 60px;
	overflow: hidden;
}

header .head-news li a div img {
	float: left;
	height: 16px;
}

header .head-news li a p { letter-spacing: 0; }

header .head-news li a p.image-text { display: flex; }

header .head-news li a p.image-text img {
	margin-left: 30px;
	margin-right: 16px;
	max-height: 90px;
}

header .head-news li a.no-link:hover { text-decoration: none; }

header .head-news > div {
	float: right;
	position: absolute;
	right: 30px;
	top: 25px;
}

header .head-news > div a {
	align-items: center;
	border: 1px solid #ccc;
	border-radius: 100vw;
	display: flex;
	height: 36px;
	justify-content: center;
	width: 36px;
}

header .scroll {
	align-items: center;
	cursor: pointer;
	display: flex;
	font-size: 1.4rem;
	font-weight: 500;
	letter-spacing: 1px;
	position: absolute;
	right: -5%;
	top: 55%;
	transition: all .3s ease-in-out;
	writing-mode: vertical-rl;
}

header .scroll::after {
	animation: scroll 2s forwards infinite;
	background-color: #babfcc;
	content: '';
	display: block;
	height: 180px;
	margin-top: 10px;
	transition: all .3s ease-in-out;
	width: 1px;
}

header .scroll a:hover { text-decoration: none; }

@keyframes scroll {
	0% { height: 0; }
	50% { height: 180px; }
	100% { height: 0; }
}

/* --------------------------------------------------------------------------------------
   共通部分
--------------------------------------------------------------------------------------- */

main {
	position: relative;
	z-index: 2;
}

.box {
	margin-left: auto;
	margin-right: auto;
	position: relative;
	text-align: left;
	width: 1100px;
}

.over { transition: all .3s ease-in-out; }

.box-size {
	align-items: center;
	display: flex;
	flex-direction: column;
	flex-wrap: wrap;
	justify-content: center;
	min-height: 100vh;
	padding: 100px 0;
	z-index: 1;
}

.ttl {
	font-size: 4.8rem;
	font-weight: 500;
	letter-spacing: 4px;
	line-height: 1;
	position: relative;
	width: 100%;
}

.ttl span {
	display: block;
	font-size: 1.8rem;
	font-weight: 600;
	left: 0;
	letter-spacing: 1px;
	margin-top: 30px;
	position: relative;
}

.ttl span::before {
	background-color: #000;
	border-radius: 100vw;
	content: '';
	display: block;
	height: 8px;
	left: -50px;
	position: absolute;
	top: calc(50% - 4px);
	width: 8px;
}

.ttl span::after {
	background-color: #000;
	content: '';
	display: block;
	height: 1px;
	left: calc(-60vw - 50px);
	position: absolute;
	top: 50%;
	width: 60vw;
}

.fixed-background {
	height: 100%;
	left: 0;
	position: fixed;
	top: 0;
	width: 100%;
}

.fixed-background > div {
	height: 100%;
	left: 0;
	position: absolute;
	top: 0;
	width: 100%;
}

.scroll .box-timer { animation: no-fixed-loading 7s ease-in-out both; }
.scroll.no-fixed .box-timer { animation: loading 7s ease-in-out both; }

.fade-top,
.fade-bottom { opacity: 0; }

.fade-top-animate { animation: fade-animate-top .5s cubic-bezier(0, .8, .56, 1) both; }
.fade-bottom-animate { animation: fade-animate-bottom .5s cubic-bezier(0, .8, .56, 1) both; }

.slide-left { opacity: 0; transform: translateX(150px); }
.slide-right { opacity: 0; transform: translateX(100vw); }

.slide-left-animate { animation: fade-animate-left .5s cubic-bezier(0, .8, .56, 1) both; }
.slide-right-animate { animation: fade-animate-right .5s cubic-bezier(0, .8, .56, 1) both; }

.slide-image-left,
.slide-image-right {
	overflow: hidden;
	position: relative;
}

.slide-image-left::before,
.slide-image-right::before {
	background-color: #0099b5;
	content: '';
	height: 100%;
	position: absolute;
	right: 0;
	top: 0;
	transition: all 2s cubic-bezier(0, .8, .56, 1);
	width: 100%;
	z-index: 100;
}

.slide-image-right::before {
	left: 0;
	right: auto;
}

.slide-image-left-animate::before { right: -100%; }
.slide-image-right-animate::before { left: -100%; }

@keyframes fade-animate-top {
	0% { opacity: 0; transform: translateY(-150px); }
	100% { opacity: 1; transform: translateY(0); }
}

@keyframes fade-animate-bottom {
	0% { opacity: 0; transform: translateY(150px); }
	100% { opacity: 1; transform: translateY(0); }
}

@keyframes fade-animate-left {
	0% { opacity: 0; transform: translateX(-100px); }
	100% { opacity: 1; transform: translateX(0); }
}

@keyframes fade-animate-right {
	0% { opacity: 0; transform: translateX(100vw); }
	100% { opacity: 1; transform: translateX(0); }
}

.fadeIn { opacity: 1 !important; }

.sp { display: none; }


/* --------------------------------------------------------------------------------------
   フッター
--------------------------------------------------------------------------------------- */

footer {
	background-color: #000;
	color: #fff;
	padding: 60px 0 75px;
	position: relative;
	z-index: 2;
}

footer .box { text-align: center; width: 100%; }

footer .box ul {
	display: flex;
	justify-content: center;
}

footer .box li {
	border-left: 1px solid #fff;
	line-height: 1.2;
	margin-left: 15px;
	padding-left: 15px;
}

footer .box li:first-child {
	border-left: none;
	margin-left: 0;
	padding-left: 0;
}

footer .box li a { color: #fff; }

footer small {
	display: block;
	margin-top: 20px;
}

/* --------------------------------------------------------------------------------------
   ios用のリンク対策
--------------------------------------------------------------------------------------- */

@media (min-width: 1024px) {



}

/* --------------------------------------------------------------------------------------
   スマホ
--------------------------------------------------------------------------------------- */

@media (max-width: 1024px) {


	.pc { display: none; }

	.sp { display: block; }

	.box { width: auto; }

	header { padding: 0 6.666666666666667vw; }

	header nav {
		top: 5.066666666666666vw;
		width: auto;
	}

	header nav div { width: 26.666666666666668vw; }

	header nav ul {
		background-color: rgba(255,255,255,.9);
		display: block;
		height: 100%;
		left: 0;
		margin-left: 0;
		opacity: 0;
		padding: 15.666667vw 6.666666666666667vw 0;
		position: fixed;
		top: 0;
		transition: all .3s ease-in-out;
		visibility: hidden;
		width: 100%;
		z-index: -10;
	}

	header nav ul.open {
		opacity: 1;
		visibility: inherit;
		z-index: 10;
	}

	header nav li {
		margin-left: 0;
		margin-top: 3.2vw;
	}

	header nav li:first-child { margin-top: 0; }

	header nav li a {
		font-size: 4vw;
		line-height: 1.8;
		text-align: left;
		/* white-space: nowrap; */
	}

	header nav .lang a {
		font-size: 4vw;
	}

	header .head-catch h1 {
		font-size: 18.666666666666668vw;
		letter-spacing: -5px;
	}

	header .head-catch h2 {
		font-size: 6.133333333333333vw;
		letter-spacing: 0;
		line-height: 1.3;
		margin-top: 5.333333vw;
		text-align: left;
		width: 80%;
	}

	header .head-news {
		bottom: auto;
		display: block;
		margin-left: -6.666666666666667vw;
		padding: 10.666666666666666vw 6.666666666666667vw;
		position: relative;
		width: calc(100% + 13.333333333333334vw);
	}

	header .head-news h2 {
		border-right: none;
		display: block;
		float: none;
		text-align: center;
		width: auto;
	}

	header .head-news h2 strong {
		display: block;
		font-size: 6.666666666666667vw;
		margin-right: 0;
	}

	header .head-news h2 span { font-size: 4.266666666666667vw; }

	header .head-news ul {
		float: none;
		margin-left: 0;
		margin-top: 4vw;
		width: 100%;
	}

	header .head-news li a {
		display: block;
		overflow: hidden;
		padding-bottom: 10.666666666666666vw;
		position: relative;
	}

	header .head-news li a time {
		float: left;
		font-size: 3.7333333333333334vw;
		letter-spacing: 0;
		width: 21.333333333333332vw;
	}

	header .head-news li a div {
		clear: both;
		float: left;
		margin: 4vw auto 0;
		text-align: center;
		width: 21.333333333333332vw;
	}

	header .head-news li a div img {
		float: none;
		height: 4vw;
	}

	header .head-news li a p {
		font-size: 3.7333333333333334vw;
		position: absolute;
		right: 0;
		width: 57.333333333333336vw;
	}

	header .head-news > div {
		float: none;
		margin: 5.333vw auto auto;
		position: relative;
		right: auto;
		text-align: center;
		top: auto;
	}

	header .head-news > div a {
		height: 12.533333333333333vw;
		margin: auto;
		width: 12.533333333333333vw;
	}

	header .head-news li a.no-link { padding-bottom: 0; }

	header .head-news li a.no-link p.image-text {
		float: none;
		font-size: 3.466666666666667vw !important;
		margin-top: 2.6666666666666665vw;
		position: relative;
		width: 100%;
	}

	header .head-news li a.no-link time {
		display: inline-block;
		float: none;
		vertical-align: middle;
		width: auto;
	}

	header .head-news li a.no-link div {
		display: inline-block;
		float: none;
		margin-left: 2.333vw;
		margin-top: 0;
		vertical-align: middle;
		width: auto;
	}

	header .head-news li a p.image-text img {
		margin-right: 0;
		max-height: 100px;
	}


	header .scroll {
		right: -3.333333vw;
		top: 30.333333vw;
	}

	header .scroll::after {
		height: 24.53333333333333vw;
		margin-top: 1.3333333333333333vw;
	}

	.box-size {
		min-height: inherit;
		padding: 18.666666666666668vw 0;
	}

	.ttl {
		display: block;
		font-size: 7.733333333333333vw;
		letter-spacing: 0;
		line-height: 1.5;
		margin-left: 6.666666666666667vw;
		margin-right: 6.666666666666667vw;
	}

	.ttl span {
		display: block;
		font-size: 4.266666666666667vw;
		left: auto;
		margin-top: 3.2vw !important;
		position: relative;
	}

	.ttl span::before { left: -4vw; }

	.ttl span::after {
		left: -13vw;
		width: 10vw;
	}

	@keyframes scroll {
		0% { height: 0; }
		50% { height: 24.53333333333333vw; }
		100% { height: 0; }
	}

	.panel-btn {
		background-color: transparent;
		cursor: pointer;
		height: 10.666666666666666vw;
		position: fixed;
		right: 6.666666666666667vw;
		top: 5.066666666666666vw;
		transition: all .3s ease-in-out;
		width: 10.666666666666666vw;
		z-index: 10001;
	}

	.panel-btn-icon {
		background-color: #000;
		display: block;
		height: .5333333333333333vw;
		left: 0;
		position: absolute;
		top: 0;
		transition: all .3s ease-in-out;
		width: 100%;
	}

	.panel-btn-icon::before,
	.panel-btn-icon::after {
		background-color: #000;
		content: '';
		display: block;
		height: .5333333333333333vw;
		left: 0;
		position: absolute;
		top: 50%;
		transition: .3s;
		width: 100%;
	}

	.panel-btn-icon::before { margin-top: 2.8vw; }

	.panel-btn-icon::after { margin-top: calc(5.6vw + .5333333333333333vw); }

	.close .panel-btn-icon { background: transparent; }

	.close .panel-btn-icon::before,
	.close .panel-btn-icon::after {
		background-color: #000;
		margin-top: 10px;
	}

	.close .panel-btn-icon::before {
		transform: rotate(-45deg);
		width: 100%;
	}

	.close .panel-btn-icon::after {
		transform: rotate(-135deg);
		width: 100%;
	}

	footer { padding: 10.666666666666666vw 6.666666666666667vw 6.666666666666667vw; }

	footer .box { display: block; }

	footer .box ul {
		display: block;
		text-align: left;
	}

	footer .box li {
		border-left: none;
		margin-left: 0;
		margin-top: 4.666666666666667vw;
		padding-left: 0;
	}

	footer .box li:first-child { margin-top: 0; }

	footer .box li a { font-size: 4.266666666666667vw; }

	footer small {
		display: block;
		font-size: 3.2vw;
		margin-top: 10vw;
		text-align: center;
	}
}