@charset "UTF-8";

/* ====================================
	共通スタイル
 ==================================== */
/* サブセクション */
.sub-header {
	font-weight: bold;
	text-align: center;
}

.sub-title {
	font-weight: inherit;
}

.sub-title em {
	border-bottom: solid #942d3a 4px;
}

.sub-catch {
	display: inline-block;
	padding: 0 1em;
	margin-bottom: .5em;
	position: relative;
}

.sub-catch::before {
	content: '';
	display: block;
	width: 1px;
	height: 1.5em;
	background: #942d3a;
	position: absolute;
	top: 0;
	left: 0;
	transform: rotate(-30deg);
}

.sub-catch::after {
	content: '';
	display: block;
	width: 1px;
	height: 1.5em;
	background: #942d3a;
	position: absolute;
	top: 0;
	right: 0;
	transform: rotate(30deg);
}

/* リンク集 */
.link-item a {
	display: block;
	text-decoration: none;
}

.list-item-bottom .no {
	display: flex;
	justify-content: center;
	align-items: center;
	color: #fff;
	text-align: center;
}

.list-item-bottom .lead {
	color: #808080;
}

/* メインセクション */
.main-img .main-img-koma {
	padding-top: 92.75%;
	background-image: url(images/main-anime.png);
}

/* ====================================
	1023px以下専用スタイル
===================================== */
@media only screen and (max-width: 1023px) {

	/* メインビジュアル */
	.mv-title-container {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		padding: 0 16%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.mv-title {
		max-width: 750px;
	}
	
	/* メインセクション */
	.main-section {
		padding: 2rem 0 0;
	}

	.main-text {
		line-height: 1.8;
	}
	.main-img {
		width: 40%;
	}

	/* サブセクション */
	.sub-section {
		padding: 8rem 0 0;
	}

	.sub-title {
		margin-bottom: 4rem;
		font-size: 2.6rem;
		line-height: 1.4;
	}

	.sub-catch {
		font-size: 1.6rem;
	}

	/* リンク集 */
	.links-container {
		border-bottom: solid #000 4px;
	}

	.link-item {
		border-top: solid #000 4px;
	}

	.list-item-top {
		padding: 0 5%;
	}

	.list-item-bottom {
		padding: 4rem 5%;
	}

	.list-item-inner {
		max-width: 540px;
		margin: 0 auto;
		flex-grow: 1;
		position: relative;
	}

	.list-item-bottom .no {
		width: 100px;
		height: 30px;
		font-size: 1.4rem;
		position: absolute;
		top: -55px;
	}

	.list-item-bottom .lead {
		font-size: 1.5rem;
	}

	.list-item-bottom .ttl {
		margin-top: .5em;
		font-size: 2rem;
	}

}


/* ====================================
	568px以上1023px以下専用スタイル
===================================== */
@media only screen and (min-width: 568px) and (max-width: 1023px) {

}

/* ====================================
	567px以下専用スタイル
===================================== */
@media only screen and (max-width: 567px) {

	/* メインセクション */
	.main-img {
		width: 50%;
	}

}

/* ====================================
	1024px以上印刷専用スタイル
===================================== */
@media print,
screen and (min-width: 1024px) {

	/* メインビジュアル */
	.mv-title-container {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 100%;
		height: 100%;
		padding: 0 20%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 1;
	}

	.mv-title {
		max-width: 680px;
	}

	/* メインセクション */
	.main-section {
		padding: 8rem 0 0;
	}

	.main-text {
		font-size: 1.8rem;
		line-height: 2.5;
		text-align: center;
	}

	.main-text em {
		font-size: 1.8em;
		font-weight: bold;
	}

	.main-img {
		width: 300px;
	}

	/* サブセクション */
	.sub-section {
		padding: 16rem 0 0;
	}

	.sub-title {
		margin-bottom: 8rem;
		font-size: 4rem;
	}

	.sub-catch {
		font-size: 2rem;
	}

	/* リンク集 */
	.links-container {
		display: flex;
		flex-wrap: wrap;
		border-top: solid #000 4px;
		border-bottom: solid #000 4px;
	}

	.link-item {
		width: 50%;
		border-bottom: solid #000 4px;
	}

	.link-item:last-child {
		border-bottom: none;
	}

	.link-item:nth-child(odd) {
		border-right: solid #000 4px;
	}

	.list-item-top,
	.list-item-bottom {
		display: flex;
	}

	.link-item:nth-child(odd) .list-item-top,
	.link-item:nth-child(odd) .list-item-bottom {
		justify-content: center;
	}

	.link-item:nth-child(even) .list-item-top,
	.link-item:nth-child(even) .list-item-bottom {
		justify-content: center;
	}

	.list-item-top {
		padding: 3rem 5rem;
	}

	.list-item-bottom {
		padding: 6rem 5rem;
	}

	.list-item-inner {
		flex-grow: 1;
		width: 100%;
		max-width: 500px;
		position: relative;
	}

	.list-item-bottom .no {
		width: 140px;
		height: 30px;
		position: absolute;
		top: -75px;
	}

	.list-item-bottom .ttl {
		margin-top: .5em;
		font-size: 2.2rem;
	}

}

/* ====================================
	1024px以上1199px以下専用スタイル
===================================== */
@media print,
screen and (min-width: 1024px) and (max-width: 1199px) {}

/* ====================================
	1200px以上専用スタイル
===================================== */
@media screen and (min-width: 1200px) {


}