/* /css/page_top.css：トップページ専用スタイル */
/* ----------------------------
	日本語版の一時閉鎖用
---------------------------- */
.closure h2{
	font-size: 1.6rem;
	font-weight: 500;
}
.closure{
	display: block;
	margin: 240px 0 0 0;
	text-align: center;
}

@media screen and (max-width: 480px) {
    .closure{
	margin: 140px 0 0 0;
}
}

/* ----------------------------
	hero
---------------------------- */
.hero{
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: 50% 50%;
	gap: 20px;
	margin: 240px 0 0 0;
	padding: 0 5% 0  40px;
	overflow: hidden;
}
/* タブレット（1024px以下） */
@media screen and (max-width: 1024px) {
	.hero{
		display: grid;
		grid-template-rows: auto 400px;
		grid-template-columns: 100%;
		margin-top: 100px;
		padding: 40px 5% 40px 40px;
		row-gap: 60px;
		gap: 0px;
	}	
}
/* スマートフォン（480px以下） */
@media screen and (max-width: 480px) {
    .hero {
        grid-template-columns: 1fr;
        margin: 100px 0 100px 0;
		padding: 0;
		row-gap: 40px;
	}
}

/* ----------------------------
	キャッチコピー部分
---------------------------- */
.cathcopy{
	font-size: 550%;
	line-height: 1.45;
	font-weight: var(--font-weight-heavy);
	color: var(--color-primary);
}

.cathcopy_container{
	padding-left: 10%;
	display: grid;
  	place-content: center;
  	place-items: center;
}
/* タブレット（1024px以下） */
@media screen and (max-width: 1024px) {
    .cathcopy{
		font-size: 5.5rem;
		line-height: 1.5;
	}

	.cathcopy_container{
		grid-row: 1 / 2;
  		grid-column: 1 / 3;
		padding-left: 5%;
		padding-bottom: 40px;
		place-content: normal;
    	place-items: normal;
	}
}
/* スマートフォン（480px以下） */
@media screen and (max-width: 480px) {
    .cathcopy{
		font-size: 3.8rem;
		line-height: 1.5;
	}

	.cathcopy_container{
		margin-top: 40px;
		padding: 0 5%;
		place-content: normal;
    	place-items: normal;
	}
}

/* ----------------------------
	トップのスライダー
---------------------------- */
.swiper {
	width: 100%;
	height: 100%;
}

.swiper-slide {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
}

.swiper-button-prev,
.swiper-button-next {
	display: none;
	pointer-events: none;
}

.swiper-pagination {
	display: block;
}

.swiper-pagination-bullet {
	background: var(--color-whit);
	opacity: 0.5;
}

.swiper-pagination-bullet-active {
	background: var(--color-primary);
	opacity: 1;
}

.img01, .img02, .img03, .img04, .img05 {
	width: 100%;
	height: 100%;
}

.img01 img, .img02 img, .img03 img, .img04 img, .img05 img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .9;
}
/* スマートフォン（480px以下） */
@media screen and (max-width: 480px) {
 	.swiper-pagination {
		display: none !important;
		pointer-events: none;
	}

	.swiper-slide {
		height: auto;
		aspect-ratio: 16/9;
	}

	.img01, .img02, .img03, .img04, .img05 {
        height: 100%;
		object-fit: cover;
    }
}

/* ----------------------------
	feature
---------------------------- */
.feature_img{
	align-self: center;
	opacity: .7;
}

.feature_list{
	display: inline-block;
	margin: 1rem 0;
}

.feature_ttl{
    font-size: var(--font-size-lg);
	font-weight: var(--font-weight-bold);
	margin-bottom: 1rem;
}

.feature_article_container{
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: 1fr 200px 3fr;
	column-gap: 40px;
	font-size: var(--font-size-sm);
}

.feature_container {
	display: block;
	margin-top: -40px;
	margin-bottom: -40px;
    padding: 2rem 4rem;
    color: var(--color-gray-100);
    border-radius: 8px;
    background-image: url(/img/common/pattern/pattern_02_L.png);
	background-size: cover;
	background-repeat: no-repeat;
}

/* スマートフォン（480px以下） */
@media screen and (max-width: 480px) {
	.feature_article_container{
		display: grid;
		grid-template-rows: auto;
		grid-template-columns: auto;
		column-gap: 0px;
		row-gap: 20px;
	}

	.feature_container:hover{
		opacity: 1;
	}

	.feature_container {
		padding: 2rem;
	}
}

/* ----------------------------
	おしらせ
---------------------------- */
.info_txt_container{
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: 5fr 1fr;
	column-gap: 20px;
	font-weight: var(--font-weight-normal);
	color: var(--color-gray-300);
	border-bottom: 1px solid var(--color-gray-200);
	padding-bottom: 5px;
	align-items: center;
}

.info_txt_container:hover{
	color: var(--color-primary);
	border-bottom: 1px solid var(--color-primary);
	transition: all 0.3s;
}

.info_container:hover{
	color: var(--color-primary);
	transition: all 0.3s;
}

.info_txt_container:hover .arrow_01{
    background-image: url(/img/common/arrow/arrow_90_prime.png);
}

.info_container{
	display: grid;
	grid-template-rows: auto;
	grid-template-columns: 10% 90%;
	color: var(--color-gray-300);
	margin: 20px 0 20px 0;
}

/* タブレット（1024px以下） */
@media screen and (max-width: 1024px) {
    .info_container{
		grid-template-columns: 20% 80%;
	}
}

/* スマートフォン（480px以下） */
@media screen and (max-width: 480px) {
	.info_container {
        grid-template-columns: 1fr;
		column-gap: 10px;
		font-size: var(--font-size-sm);
		margin: 20px 0 40px 0;
    }

	.info_txt_container{
		display: block;
	}

	.info_txt_container .arrow_01{
		display: none;
	}
}

/* ----------------------------
	セクション間のvideo
---------------------------- */
.visual_video_container {
	margin: 100px 0;
	position: relative;
	width: 100%;
	height: 500px;
	overflow: hidden;
}

.parallax_video {
	position: absolute;
	top: 50%;
	left: 50%;
	min-width: 100%;
	min-height: 100%;
	transform: translate(-50%, -50%);
	object-fit: cover;
	z-index: 0;
	will-change: transform;
}

/* スマートフォン（480px以下） */
@media screen and (max-width: 480px) {
	.parallax_video {
		margin: 80px 0 0;
		position: static;
		transform: none;
		width: 100%;
		height: auto;
		min-width: unset;
		min-height: unset;
	}

	.visual_video_container {
		height: 400px;
	}
}

/* ----------------------------
	出版
---------------------------- */
.syuppan_group{
	color: var(--color-accent-2nd);
    background-image: url(/img/common/pattern/pattern_01_S.png);
	background-size: cover;
	background-repeat: no-repeat;
}

.syuppan_group .intro{
	color: var(--color-accent-2nd);
}

.syuppan_group .summary{
	color: var(--color-accent-2nd);
}

/* ----------------------------
	hover効果（マウス環境のみに適用）
---------------------------- */
@media (hover: hover) and (pointer: fine) {
    .feature_container:hover{
        opacity: .8;
    }
}