@charset "utf-8";
/* =============================================
	二次トレ
============================================= */
.font_red{
 color: #E60012;
}
.font_purple{
	color: #67519E;
}

.bg_red{
	background-color: #E60012;
}
.bg_yell{
	background-color: #f37e00;
}

/*---------------------------------------------
	ナビゲーション
---------------------------------------------*/
.page_nav{
	border-top: solid 1px #e6e6e6;
	background-image: linear-gradient(to bottom, #fff 0%,#ebeff0 100%);
}
.page_nav ul{
	display: flex;
	justify-content: center;
	text-align: center;
	width: 100%;
	max-width: 970px;
	margin: 0 auto;
}
.page_nav ul li{
	font-size: 1.6rem;
	font-weight: bold;
	padding: 0.5em;
	border-right: dotted 1px #d4d4d4;
}
.page_nav ul li:last-of-type{
	border-right: none;
}
.page_nav ul li a{
	display: flex;
	align-items: center;
	color: #464646;
	height: 100%;
	padding: 0.5em 1em;
	border-bottom: solid 3px #e6e6e6;
}
.page_nav ul li a:hover{
	text-decoration: none;
	color: #E60012;
	border-bottom: solid 3px #E60012;
}

/*---------------------------------------------
	ページヘッダー
---------------------------------------------*/
#page_header{
	padding-bottom: 2em;
	background-image: url("../img/header_bg.jpg");
	background-repeat: no-repeat;
	background-position: center top;
	background-size: cover;
}

.page_header{
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
	position: relative;
}
.page_header h1{
	text-align: center;
}

.page_other{
	text-align: center;
	width: 94%;
	margin: 0 auto;
	padding: 0;
	border: solid 2px #000;
	border-radius: 1em;
	background-color: rgba(255,255,255,0.5);
}
.page_other .ttl_pipe2ji{
	display: inline-block;
	font-size: 2.2rem;
	color: #fff;
	margin: 0 auto 1em auto;
	padding: 0.5em 1em;
	border-radius: 0 0 1em 1em;
	background-color: #000;
}
.page_other .btn_set{
	font-size: 1.8rem;
	font-weight: bold;
	width: 46%;
}

.anim_fadein{
	opacity: 0;
	animation-name: anim_fadein;
	animation-duration: 2s;
	animation-delay: 2s;
	animation-iteration-count: 1;
	animation-fill-mode: forwards;
}


/*****
タイトルアニメーション設定
*****/
@keyframes anim_fadein{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}

/*---------------------------------------------
	section
---------------------------------------------*/
.section_wrap{
	margin: 0 auto;
	padding: 4em 0;
}

.normal_section{
 font-size: 1.6rem;
	line-height: 1.6;
	width: 970px;
 margin: 0 auto;
}

.ttl_wrap{
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 2.5em;
	padding: 0.5em 2em;
	border: solid 4px #289A9C;
	border-radius: 1em;
	position: relative;
}
.ttl_wrap::after{
	content: '';
	display: block;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 2em 1em 0 1em;
	border-color: #289A9C transparent transparent transparent;
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
}

.ttl_wrap .ttl_2jitore{
	text-align: center;
}
.ttl_2jitore h2{
	font-size: 2rem;
	color: #fff;
	margin-bottom: 0.5em;
	padding: 0.5em;
	border-radius: 0.25em;
	background-color: #289A9C;
}
.ttl_2jitore h3{
	font-size: 3.2rem;
}

.ttl_wrap .ttl_img{
	flex-shrink: 0;
	margin-left: 2em;
}

.ttl_type01{
	font-size: 2.4rem;
	color: #67519E;
	margin-bottom: 0.5em;
	padding: 0.2em 0 0 0.5em;
	border-left: solid 4px #67519E;
}

/***配信期間***/
.tbl_period{
	width: auto;
	margin: 1em auto;
}
.tbl_period th,
.tbl_period td{
	padding: 0.5em 1em;
	border-bottom: solid 1px #67519E;
}
.tbl_period th{
	text-align: left;
	color: #67519E;
	background-color: #e9f0f0;
	white-space: nowrap;
}
.tbl_period td{}

.tbl_period th.ttl_period{
	text-align: center;
	color: #fff;
	border-radius: 0.5em 0.5em 0 0;
	background-color: #67519E;
}

/***概要紹介***/
.detail_area{
	margin-top: 3em;
}

.ttl_detail{
	margin-top: 2em;
	margin-bottom: 0.5em;
}

.txt_detail{
	width: 100%;
	max-width: 520px;
}
.img_detail{
	flex-shrink: 0;
	text-align: center;
}

.sticky_red{
	color: #fff;
	background-color: #f16886;
}
.sticky_blue{
	color: #fff;
	background-color: #84abff;
}
.sticky_yell{
	background-color: #ffff88;
}
.sticky_red,
.sticky_blue,
.sticky_yell{
	display: inline-block;
	line-height: 1;
	margin: 0.25em;
	padding: 0.25em 0.5em;
	border: solid 1px #666;
}

/* ===========================================
	MediaQueries
=========================================== */
/* PC----------------------------- */
@media screen and (min-width: 768px){
	
}

/* スマホ----------------------------- */
@media screen and (max-width: 767px){
	
	/*---------------------------------------------
 	ナビゲーション
 ---------------------------------------------*/
	.page_nav ul li{
		font-size: 1.2rem;
	}
	.page_nav ul li a{
		padding: 0.25em;
	}
	
 /*---------------------------------------------
 	ページヘッダー
 ---------------------------------------------*/
	#page_header{
		background-size: auto 100%;
	}
	.page_header{}
	
	.page_other{
		margin-top: 1em;
		padding: 0 1em;
		border-radius: 0 0 1em 1em;
	}
	.page_other .ttl_pipe2ji{
		font-size: 1.6rem;
	}
	.page_other .btn_set{
		font-size: 1.6rem;
		width: 100%;
	}
 
 /*---------------------------------------------
	section
	---------------------------------------------*/
 .section_wrap{
		padding: 2em 0;
	}
	
	.normal_section{
		font-size: 1.4rem;
		width: 94%;
	}
	
	.ttl_wrap{
		display: block;
	}
	
	.ttl_2jitore h2{
		font-size: 1.4rem;
	}
	.ttl_2jitore h3{
		font-size: 1.8rem;
	}
	.ttl_wrap .ttl_img{
		margin: 1em auto 0 auto;
	}
	
	.ttl_type01{
		font-size: 1.8rem;
	}
	
	/***配信期間***/
	.tbl_period th,
	.tbl_period td{
		padding: 0.5em;
	}
	
	/***概要紹介***/
	.img_detail{
		margin-top: 0.5em;
	}
 
}