@charset "UTF-8";


/* common.cssから上書き
–––––––––––––––––––––––––––––––––––––––––––––––––– */



/* indexのみ
–––––––––––––––––––––––––––––––––––––––––––––––––– */


/* header –––––––––––––––––––––– */
header br {
	display: none;/* 改行させない */
}
h1.lead {
	font-size: calc(0.4vw + 2.4rem);
	line-height: 1.3em;
	margin-bottom: 0.2em;
	font-weight: 100;
	font-feature-settings: "palt";
}
p.sub-lead {
	font-size: calc(0.2vw + 1rem);
	line-height: 1.6em;
	/* font-feature-settings: "palt"; */
}


@media (max-width: 1000px) {    
	header br {
		display: block;/* 改行させる */
	}
	h1.lead {
		margin-bottom: 0.4em;
	}
}


@media (max-width: 750px) {
	h1.lead {
		font-size: 7.5vw;
		margin-bottom: 0.4em;
	}
	p.sub-lead {
		font-size: 0.9rem;
	}
}



/* .mv –––––––––––––––––––––– */

.mv {
	display: flex;
	align-items: stretch;
	justify-content: center;
	max-width: 1200px;
	margin: 0 auto var(--margin-l) auto;
	padding: 0 var(--margin-m);
}
.mv .img-area {
	flex: 1;
}
.mv .img-area figure {
	height: 100%;
	position: relative;
	overflow: hidden;
}
.mv .img-area img {
	position: absolute;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	animation: change-img-anim 24s linear infinite;
}

.mv .img-area img:nth-of-type(1) {
	animation-delay: -2s;/* 透明状態を避ける */
}
.mv .img-area img:nth-of-type(2) {
	animation-delay: 6s;
}
.mv .img-area img:nth-of-type(3) {
	animation-delay: 14s;
}
@keyframes change-img-anim {
	0% { opacity: 0;}
	4.16% { opacity: 1;}
	33.33% { opacity: 1;}
	41.66% { opacity: 0;scale: 1.1;}
	100% { opacity: 0;}
}


.mv .txt-area {
	width: 300px;
	margin: 0 0 0 var(--margin-m);
}
.mv .beginner {
	text-align: center;
	background-color: var(--color-sub);
	padding: var(--margin-s);
	margin-bottom: var(--margin-m);
}
.mv .beginner img {
	vertical-align: middle;
	margin-right: 3px;
}


@media (max-width: 1000px) {
	.mv {
		flex-direction: column;
		width: auto;
		padding: 0;
	}
	.mv .txt-area {
		width: auto;
		margin: 0;
	}
	.mv .txt-area-inner {
		margin: var(--margin-l) var(--margin-m) 0 var(--margin-m);
	}
	.mv .img-area figure {
		height: 320px;
	}
}


@media (max-width: 750px) {
	.mv {
		margin-bottom: var(--margin-m);
	}
	.mv .txt-area-inner {
		margin: var(--margin-m) var(--margin-s) 0 var(--margin-s);
	}
	.mv .img-area figure {
		height: 280px;
	}
}


/* .infobar –––––––––––––––––––––– */

.infobar {
	margin-bottom: var(--margin-l);
	padding: 15px 0;
	width: 100%;
	background-color: var(--color-main);
	overflow: hidden;
}
.infobar ul {
	margin: 0;
	display: inline-block;
	padding-left: 100%;
	white-space: nowrap;
	font-size: 1rem;
	line-height: 1em;
	animation: scroll-infobar 20s linear infinite;
}
.infobar ul li {
	display: inline;
	position: relative;
	margin-right: 10em;
	padding-left: 30px;
}
.infobar ul li::before {
	content: "";
	position: absolute;
	width: 30px;
	height: 30px;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	background-image: url("../img/common/ic_infobar.svg");
	background-repeat: no-repeat;
}
.infobar li , .infobar li a {
	color: var(--color-bg);
}
@keyframes scroll-infobar {
	0% {
		transform: translateX(0)
	}
	100% {
		transform: translateX(-100%)
	}
}


@media (max-width: 750px) {
	.infobar {
		margin-bottom: var(--margin-m);
	}
}


/* .agetter –––––––––––––––––––––– */

.agetter {
	width: 100%;
	height: 400px;
	overflow-y: auto;
	border: var(--border);
	margin-bottom: var(--margin-s);
}
.agetter div {
	position: relative;
	border-bottom: var(--border);
	margin: 0;
	padding: 15px;
	box-sizing: border-box;
	line-height: 1.5em;
}
.agetter div:last-of-type {
	border-bottom: none;
}
.agetter .posted {
	margin-bottom: 5px;
	max-width: 100%;
	align-items: center;
}
.agetter p strong {
	padding: 5px 0;
	display: block;
}
@media (max-width: 750px) {
	.agetter {
		margin-bottom: var(--margin-ss);
	}
}