@charset "utf-8";
/*======================================
index TOPページ
========================================*/
/*------------------------------
ヘッダー
------------------------------*/
.header_area{
	display: block;
	font-size: clamp(1rem,0.93vw,1.8rem);
	width: 100%;
	position: relative;
	overflow: hidden;
}

.site_subttl{
	z-index: 2;
	opacity: 0;
	transform: translateY(-50%);
	animation-name: img_down;
	animation-delay: 1.5s;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
}
@keyframes img_down{
	0%{
		opacity: 0;
		transform: translateY(-50%);
	}
	100%{
		opacity: 1;
		transform: translateY(0);
	}
}

.site_ttl{
	display: inline-block;
	padding: 1em;
	background-color: #fffff8;
	box-shadow: 1em 1em 0 0 #ba0303;
	z-index: 2;
	opacity: 0;
	transform: translateX(-10%);
	animation-name: img_slide;
	animation-delay: 1s;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
}
@keyframes img_slide{
	0%{
		opacity: 0;
		transform: translateX(-10%);
	}
	100%{
		opacity: 1;
		transform: translateX(0);
	}
}

.logo20th{
	z-index: 2;
	opacity: 0;
	transform: translateY(-50%);
	animation-name: img_down;
	animation-delay: 1.5s;
	animation-duration: 1.5s;
	animation-fill-mode: forwards;
}

.btn_app_header{
	position: absolute;
	z-index: 2;
	opacity: 0;
	animation-name: img_fade;
	animation-delay: 2s;
	animation-duration: 1.2s;
	animation-fill-mode: forwards;
}
@keyframes img_fade{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}
.btn_app_header:hover{
	opacity: 0.5;
}

.top_img{
	z-index: 1;
	transform: scale(1.1,1.1);
	animation-name: img_scale;
	animation-delay: 0.5s;
	animation-duration: 3s;
	animation-fill-mode: forwards;
}

@keyframes img_scale{
	0%{
		transform: scale(1.1,1.1);
	}
	100%{
		transform: scale(1,1);
	}
}

/*グローバルナビのPC用*/
@keyframes pcnav_fixed{
	0%{
		opacity: 1;
	}
	20%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}


/*------------------------------
ナビ
------------------------------*/
/*------------------------------
セクション
------------------------------*/
.section_wrap{
	width: 100%;
}
.normal_section{
	font-size: clamp(1.6rem,1.8vw,1.8rem);
	width: 94%;
	max-width: 1000px;
	margin: 0 auto;
}

.index_bg{
	background-color: #fef5eb;
}

/*------------------------------
新着情報
------------------------------*/
.news_wrap{
	width: 100%;
	padding: 6em 0;
}
.news_section{
	font-size: clamp(1.6rem,1.5vw,1.8rem);
	line-height: 1.65;
	width: 92%;
	max-width: 1200px;
	margin: 0 auto;
}

.news_left{}
.ttl_news{
	font-size: clamp(2.8rem,2.5vw,3rem);
	font-weight: bold;
	line-height: 1.2;
	color: var(--red_color);
}
.ttl_news_sub{
	display: block;
	font-size: clamp(1.8rem,1.66vw,2rem);
}

.news_list{}
.news_list a{
	display: block;
	color: #333;
	text-decoration: none;
	padding: 1em 2em 3em 0;
	border-bottom: solid 1px #858585;
	background-image: url("../img/gray_arrow.svg");
	background-repeat: no-repeat;
	background-position: right center;
	background-size: 1.3em auto;
}

.news_date{
	display: inline-block;
	font-size: clamp(1.3rem,1.16vw,1.4rem);
	margin-bottom: 1.2em;
	padding: 0 0.85em;
	border: solid 1px #888;
	border-radius: 2em;
}


/*------------------------------
イントロ
------------------------------*/
.intro_section{
	width: 92%;
	max-width: 1200px;
	margin: 0 auto;
	font-size: clamp(1.6rem,1.83vw,2.2rem);
	line-height: 1.85;
}

.whats_img{}
.intro_box{}

.ttl_index{
	font-size: clamp(3rem,3.33vw,4rem);
	font-weight: bold;
	line-height: 1.6;
	color: var(--red_color);
	margin-bottom: 1em;
}
.ttl_index .ttl_index_sub{
	display: block;
	font-size: clamp(1.6rem,1.58vw,1.9rem);
}

.point_area{
	margin: 4em 0 2em 0;
}
.point_box{
	font-size: 1.6rem;
	padding: 2em 1.5em 1.5em 1.5em;
	border-radius: 0.5em;
	background-color: #be302e;
}
.ttl_point{
	font-size: 2rem;
	font-weight: bold;
	line-height: 1.2;
	text-align: center;
	color: #fff;
	margin-bottom: 1em;
}
.ttl_point .point_num{
	display: inline-block;
	font-size: 5.4rem;
	margin-left: 0.15em;
}
.ttl_point::after{
	content: '';
	display: block;
	width: 60%;
	height: 0.85em;
	margin: 0 auto;
	border-radius: 1em;
	background-color: #e96f6e;
}

.point_text{
	font-weight: bold;
	text-align: justify;
	text-justify: inter-character;
	letter-spacing: 0.05em;
	padding: 0.5em;
	border-radius: 0.5em;
	background-color: #fff;
}

/*------------------------------
導入メリット
------------------------------*/
.merit_section{
	font-size: clamp(1.6rem,1.8vw,1.8rem);
	line-height: 1.6;
	width: 86%;
	max-width: 1000px;
	margin: 0 auto 3.5em auto;
	padding: 2em;
	border: solid 1px var(--shadow_color);
	background-color: #fff;
	box-shadow: 0.75em 0.75em 0 0 var(--shadow_color);
	position: relative;
}
.section_wrap .merit_section:last-of-type{
	margin-bottom: 0;
}

.merit_list{
	display: inline-block;
	font-size: clamp(1.6rem,1.8vw,2.4rem);
	font-weight: bold;
	letter-spacing: 0.1em;
	text-align: left;
	margin: 0 auto;
}
.merit_list li{
	padding-left: 1.5em;
	margin-bottom: 0.85em;
	background-image: url("../img/icon_check.svg");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 1em auto;
}

.merit_parrot{
	position: absolute;
}

.merit_textttl{
	font-size: clamp(1.6rem,2.2vw,2.2rem);
	font-weight: bold;
	line-height: 1.75;
	margin-bottom: 2em;
}
.merit_subttl{
	font-size: clamp(2.1rem,2.6vw,2.6rem);
	font-weight: bold;
}
.merit_subttl > span{
	position: relative;
	z-index: 2;
}
.merit_subttl::after{
	content: '';
	display: block;
	margin: 0 auto;
	width: 35%;
	height: 0.7em;
	border-radius: 1em;
	background-color: #faa2a2;
	transform: translateY(-0.5em);
	position: relative;
	z-index: 1;
}
.merit_target_area{}
.merit_target{
	font-size: clamp(1.4rem,1.6vw,1.6rem);
	padding: 1.5em;
}
.target_img{
	width: 45%;
	margin: 0 auto 0.5em auto;
}

/*------------------------------
動画
------------------------------*/
.movie_area{
	box-shadow: 0.75em 0.75em 0 0 var(--shadow_color);
}

/*------------------------------
トピックス
------------------------------*/
.topics_bg{
	background-image: url("../img/topics_bg.jpg");
	background-repeat: no-repeat;
	background-size: cover;
}
.topics_section{
	font-size: clamp(1.3rem,2vw,2rem);
	padding: 2em 0;
}
.topics_section .ttl_index{
	color: #fff;
}

.slide_area{}
/***swiper***/
.mainswipe{}
.mainswipe .swiper-wrapper{}
.mainswipe .swiper-slide{}
.mainswipe .swiper-slide a{
	display: block;
	text-align: center;
	text-decoration: none;
	color: var(--black_color);
	margin: 0 10%;
}
.mainswipe .swiper-slide a:hover{
	opacity: 0.65;
}
.slide_img{}
.slide_img img{
	border-radius: 0.5em 0.5em 0 0;
}
.slide_text{
	font-weight: bold;
	padding: 1em 1em 2em 1em;
	border-radius: 0 0 0.5em 0.5em;
	background-color: #fff;
}

.btn_next,
.btn_prev{
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: 50%;
	border: solid 1px #fff;
	background-color: rgba(0,0,0,0.2);
	background-image: url("../../img/arrow_white.svg");
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 50% auto;
	position: absolute;
	top: 50%;
	z-index: 20;
	cursor: pointer;
}
.btn_next{
	transform: translateY(-50%) rotate(180deg);
}
.btn_prev{
	transform: translateY(-50%);
}


/*------------------------------
関連リンク
------------------------------*/
.bn_section{
	width: 94%;
	max-width: 1200px;
	margin: 0 auto;
}
.bn_area{}
.bn_area ul{
	display: flex;
	flex-wrap: wrap;
}

/*------------------------------
フッターお問い合わせボタン
------------------------------*/
.index_contact{
	display: none;
	max-width: 200px;
	position: fixed;
	z-index: 999;
}


/* ===========================================
	MediaQueries
=========================================== */
/* PC----------------------------- */
@media (min-width: 768px){
	/*------------------------------
	ヘッダー
	------------------------------*/
	.header_area{
		aspect-ratio: 2560 / 990;
	}
	
	.site_subttl{
		width: 31%;
		max-width: 594px;
		position: absolute;
		top: 4%;
		left: 2%;
	}
	.site_ttl{
		width: 37%;
		max-width: 706px;
		position: absolute;
		top: 22%;
		left: 0;
	}
	.logo20th{
		width: 7.5%;
		max-width: 193px;
		position: absolute;
		top: 4%;
		right: 20px;
	}
	.btn_app_header{
		width: 11.5%;
		max-width: 220px;
		position: absolute;
		bottom: 20px;
		right: 20px;
	}
	.top_img{
		position: absolute;
		top: 0;
		left: 0;
	}
	
	
	/*------------------------------
	ナビ
	------------------------------*/
	/***追加されたBoxを非表示***/
	.add_box{
		display: none;
	}
	/******/
	
	#index_header #header_gnav{
		justify-content: center;
		font-size: clamp(1.4rem,1.28vw,1.8rem);
	}
	#header_gnav.gnav_fixed{
		position: fixed;
		top: 0;
		left: 0;
		animation-name: pcnav_fixed;
		animation-delay: 0;
		animation-duration: 1.5s;
		animation-fill-mode: forwards;
	}
	
	#nihongo_logo{
		display: none;
	}
	
	.gnav_box{
		width: 100%;
		max-width: 1100px;
	}
	
	.gnav_btn_area{
		width: 25%;
	}
	
	.btn_for_contact{
		display: none;
	}
	
	.sub_drop{
		font-size: clamp(1.4rem,1.15vw,1.6rem);
	}
	
	/*------------------------------
	セクション
	------------------------------*/
	.section_wrap{
		padding: 10em 0;
	}
	
	/*------------------------------
	新着情報
	------------------------------*/
	.news_section{
		display: flex;
		justify-content: space-between;
		position: relative;
	}
	
	.news_left{
		width: 25%;
	}
	.news_list{
		width: 70%;
		padding: 0 0 1.5em 4%;
		border-left: solid 1px #888;
	}
	
	.news_list a:hover{
		text-decoration: underline;
	}
	
	.news_list a:hover .news_date{
		text-decoration: none;
	}
	
	.news_btn_area{
		width: 20%;
		position: absolute;
		top: 6em;
		left: 0;
	}
	.news_btn_area .btn_normal{
		width: 100%;
		max-width: 235px;
	}
	
	/*------------------------------
	イントロ
	------------------------------*/
	.whats_img{
		width: 44%;
	}
	
	.intro_box{
		width: 60%;
		margin-left: -4%;
	}
	
	.point_area{
		display: flex;
		justify-content: space-between;
	}
	.point_box{
		width: 22.5%;
	}
	
	.point_text{
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		font-size: clamp(1.2rem,1.22vw,1.6rem);
		min-height: 245px;
	}
	.point_text .btn_normal{
		font-size: 0.85em;
	}
	
	/*------------------------------
	導入メリット
	------------------------------*/
	.merit_parrot{
		width: 17%;
		top: 0;
		right: 1em;
		transform: translateY(-35%);
	}
	
	.merit_target_area{
		display: flex;
		justify-content: space-between;
		margin-top: 2em;
	}
	.merit_target{
		width: calc(100% / 3);
		border-right: solid 1px #aaa;
	}
	.merit_target_area .merit_target:last-of-type{
		border-right: none;
	}
	
	/*------------------------------
	動画
	------------------------------*/
	/*------------------------------
	トピックス
	------------------------------*/
	.slide_area{
		width: 90%;
		margin: 0 auto;
	}
	/***swiper***/
	.btn_next,
	.btn_prev{
		width: 3%;
		max-width: 60px;
	}
	.btn_next{
		left: 32%;
	}
	.btn_prev{
		right: 32%;
	}
	
	/*------------------------------
	関連リンク
	------------------------------*/
	.bn_area ul li{
		width: 23.5%;
		margin: 1em 1.5% 1em 0;
	}
	.bn_area ul li:nth-of-type(4n){
		margin-right: 0;
	}
	
	/*------------------------------
	フッターお問い合わせボタン
	------------------------------*/
	.index_contact{
		width: 20%;
		left: 20px;
		bottom: 100px;
	}
}

/* スマホ----------------------------- */
@media (max-width: 767px){
	/*------------------------------
	ヘッダー
	------------------------------*/
	#index_header #header_gnav{
		position: fixed;
		top: 0;
		left: 0;
	}
	
	.header_area{
		aspect-ratio: 760 / 970;
		text-align: center;
	}
	
	.site_subttl{
		width: 75%;
		margin: 1.5em auto 3em auto;
		position: relative;
	}
	.site_ttl{
		width: 90%;
		position: relative;
	}
	.logo20th{
		width: 25%;
		position: absolute;
		bottom: 3em;
		left: 2em;
		filter: drop-shadow(0 0 4px rgba(0,0,0,0.95));
	}
	.btn_app_header{
		width: 25%;
		bottom: 2em;
		right: 2em;
	}
	.top_img{
		position: absolute;
		bottom: 0;
		left: 0;
	}
	
	
	/*------------------------------
	ナビ
	------------------------------*/
	/*------------------------------
	セクション
	------------------------------*/
	.section_wrap{
		padding: 6em 0;
	}
	
	/*------------------------------
	新着情報
	------------------------------*/
	.news_left{}
	.ttl_news{
		text-align: center;
	}
	
	.news_list{
		margin: 1.5em 0;
		border-top: solid 1px #bbb;
	}
	
	/*------------------------------
	イントロ
	------------------------------*/
	.whats_img{
		width: 90%;
		margin: 0 auto;
	}
	.intro_box{
		margin-top: 2em;
	}
	
	.point_box{
		width: 84%;
		margin: 0 auto 2em auto;
	}
	.point_text{
		font-size: clamp(1.2rem,4.26vw,1.6rem);
	}
	
	/*------------------------------
	導入メリット
	------------------------------*/
	.merit_parrot{
		width: 25%;
		bottom: 100%;
		right: 1em;
		transform: translateY(2em);
	}
	
	.merit_target_area{}
	.merit_target{
		border-bottom: solid 1px #aaa;
	}
	.merit_target_area .merit_target:last-of-type{
		border-bottom: none;
	}
	
	/*------------------------------
	動画
	------------------------------*/
	.movie_area{
		width: 94%;
		margin: 0 auto;
	}
	
	/*------------------------------
	トピックス
	------------------------------*/
	.btn_next,
	.btn_prev{
		width: 10%;
		max-width: 60px;
	}
	.btn_next{
		left: 4%;
	}
	.btn_prev{
		right: 4%;
	}
	
	/*------------------------------
	関連リンク
	------------------------------*/
	/*------------------------------
	フッターお問い合わせボタン
	------------------------------*/
	.index_contact{
		width: 25%;
		right: 4.5em;
		bottom: 20px;
	}
	
	#footer{
		padding: 4em 0 0.5em 0;
	}
	#copy{
		padding: 6em 0.5em 0 0.5em;
	}
}