@charset "utf-8";
.toph1{
	width : 100%;
	padding : 0 0 0 5px;
	margin : 1em auto;
	font-size : 1.2em;
	font-weight : 400;
	color : #c40f8f;
	letter-spacing : .1em;
	a{
		display : block;
		float : right;
		padding : .5em 1em;
		font-size : .6em;
		color : #000;
		text-align : center;
		-webkit-text-decoration : none;
		text-decoration : none;
		background-color : #fff;
		border : 1px solid #000;
		-webkit-transition : all ease .5s;
		-moz-transition : all ease .5s;
		transition : all ease .5s;
	}
	a:hover{
		color : #fff;
		background-color : #fac1e9;
		border : 1px solid #fff;
	}
	@media screen and ( width <= 768px ){
		padding : 0;
		font-size : 1.3em;
		span{
			font-size : .5em;
		}
	}
}
@media screen and ( width <= 768px ){
	#area1{
		width : 100%;
		margin : 0 auto 3em;
		overflow : hidden;
		dl{
			float : none;
			width : 100%;
			min-height : auto;
			margin : 1% 0 .5em;
		}
	}
}
.news_box{
	float : left;
	width : 24%;
	max-width : 100%;
	margin-right : 1%;
}
.news_box_s{
	width : 100%;
	max-width : 50%;
	min-height : 240px;
	padding : 1em;
	margin : auto;
	background-color : rgb( 255 255 255 / .5 );
	@media screen and ( width <= 768px ){
		width : 100%;
		max-width : 100%;
		min-height : 100px;
		padding : 1em;
		background-color : rgb( 255 255 255 / .5 );
	}
}
.fb_box{
	float : left;
	width : 24%;
	max-width : 100%;
	margin-left : 1%;
}
.rss_box{
	float : left;
	width : 24%;
	max-width : 100%;
	margin-left : 1%;
	ul{
		min-height : 240px;
		padding : 1em;
		background-color : rgb( 255 255 255 / .5 );
	}
	ul li{
		padding : .5em;
		border-bottom : 1px solid #ab007f;
	}
	ul li a{
		color : #333;
		-webkit-text-decoration : none;
		text-decoration : none;
	}
	ul li a:hover{
		-webkit-text-decoration : underline;
		text-decoration : underline;
	}
	ul li small{
		display : block;
	}
	@media screen and ( width <= 768px ){
		.rss_box{
			width : 100%;
		}
	}
}
@media screen and ( width <= 768px ){
	.fb_iframe_widget{
		height : 280px;
	}
}
.tw_box{
	float : left;
	width : 24%;
	max-width : 100%;
	margin-left : 1%;
	@media screen and ( width <= 768px ){
		width : 100%;
	}
}
@media screen and ( width <= 768px ){
	.on.fadeinleft{
		width : 100%;
	}
	.on.fadeinright{
		width : 100%;
	}
}
.top3{
	display : flex;
	justify-content : center;
	width : 100%;
	padding : 25px 6.5%;
	overflow : hidden;
	background : url( "../images/new/bg_top03.jpg" ) no-repeat top center;
	background-attachment : fixed;
	background-size : cover;
	border-top : 1px solid #3c3636;
	border-bottom : 1px solid #3c3636;
	@media screen and ( width <= 768px ){
		display : block;
		.news_box ,
		.fb_box{
			width : 100%;
			overflow : hidden;
		}
	}
}
.top4{
	padding : 2em 0;
	background : url( "../images/new/bg_top04.png" );
	ul{
		width : 1200px;
		max-width : 95%;
		padding : 2em 0;
		margin : 0 auto;
		overflow : hidden;
	}
	li{
		float : left;
		width : 23.5%;
		margin-left : 2%;
		background-color : #fff;
	}
	li:nth-child( 1 ){
		margin : 0;
	}
	li dl{
		min-height : 350px;
	}
	li dd{
		padding : 1em;
	}
	li dt{
		padding : 1em;
		overflow : hidden;
		background : url( "../images/new/line_top4.png" ) repeat-x bottom left;
	}
	li dt img{
		float : left;
		max-width : 100%;
		height : auto;
		padding : .5em;
		margin-right : 1em;
		border : 1px solid #3c3636;
	}
	li dt p{
		font-size : 1.4em;
	}
	li dt a{
		display : inline-block;
		padding : .1em .5em;
		font-size : .8em;
		color : #3c3636;
		-webkit-text-decoration : none;
		text-decoration : none;
		border : 1px solid #3c3636;
	}
	.top4_point{
		width : 1200px;
		max-width : 95%;
		padding : 1em;
		margin : 0 auto;
		overflow : hidden;
		background : #fff url( "../images/new/top4_img.png" ) no-repeat right center;
	}
	.top4_point img{
		float : left;
		max-width : 100%;
	}
	.top4_point span{
		float : left;
		padding : 0 1em;
		font-size : 1.2em;
	}
	.top4_point p{
		padding : .5em 0;
	}
	@media screen and ( width <= 768px ){
		li{
			width : 90%;
			margin : 1rem 5% ! important;
		}
		li dl{
			min-height : 0;
		}
	}
	@media screen and ( width >= 980px ){
		li{
			width : 46%;
			margin : 1rem 2% ! important;
		}
		li dl{
			min-height : 320;
		}
	}
}
.top5{
	width : 1200px;
	max-width : 95%;
	margin : 2em auto;
	h2{
		float : left;
		width : 200px;
		font-weight : 400;
	}
	ul{
		display : block;
		width : 1100px;
		max-width : 100%;
		margin : 0 auto;
		overflow : hidden;
	}
	li{
		position : relative;
		float : left;
		width : 24%;
		margin-bottom : 1%;
		margin-left : 1%;
	}
	li span{
		position : absolute;
		top : 0;
		left : 0;
		width : 100%;
		height : auto;
		padding : 1em;
		margin-top : 25%;
		text-align : right;
		text-shadow : -1px -1px 0 #fff , 1px -1px 0 #fff , 1px 1px 0 #fff , -1px 1px 0 #fff;
	}
	li span p{
		font-size : .8em;
	}
	.top5_point{
		padding : 1em;
		overflow : hidden;
		color : #fff;
		background-color : #3c3636;
	}
	.top5_point h3{
		margin-bottom : .5em;
		text-align : center;
	}
	.top5_point a{
		float : right;
		padding : .2em 1em;
		margin-top : .5em;
		color : #fff;
		-webkit-text-decoration : none;
		text-decoration : none;
		border : 1px solid #fff;
	}
	.top5_list1 li{
		background-color : #fffbcb;
	}
	.top5_list2 li{
		background-color : #67f8cd;
	}
	.top5_list3 li{
		background-color : #69e0fc;
	}
	.top5_list4 li{
		background-color : #fa8885;
	}
	li a{
		display : block;
		width : 100%;
		height : 100%;
	}
	li a:hover{
		display : block;
	}
	li a:hover .mask{
		padding-top : 80px;
		opacity : 1;
	}
	@media screen and ( width <= 768px ){
		h2{
			float : none;
			width : 200px;
			margin : 0 auto;
			font-weight : 400;
			text-align : center;
		}
		li{
			width : 40%;
			margin : 5%;
		}
		.mask{
			overflow : scroll;
		}
		.top5_point a{
			display : block;
			float : none;
			width : 400px;
			max-width : 95%;
			padding : .2em 1em;
			margin : 1em auto;
			color : #fff;
			text-align : center;
			-webkit-text-decoration : none;
			text-decoration : none;
			border : 1px solid #fff;
		}
	}
}
.mask{
	position : absolute;
	top : 0;
	left : 0;
	width : 100%;
	height : 100%;
	padding : 1em;
	color : #fff;
	background-color : rgb( 0 0 0 / .4 );
	opacity : 0;
	-webkit-transition : all .6s ease;
	transition : all .6s ease;
}
.top6{
	width : 100%;
	padding : 2em 0;
	background : url( "../images/new/bg_top6.jpg" ) no-repeat center;

	/* border-top: 1px solid #3c3636; */
	background-attachment : fixed;
	background-size : cover;
	.top6_table{
		width : 1200px;
		max-width : 95%;
		margin : 0 auto;
		overflow : hidden;
		background-color : rgb( 255 255 255 / .5 );
	}
	.top6_td{
		display : table-cell;
		width : 25%;
		padding : 1em;
	}
	.top6_td:nth-child( 1 ){
		vertical-align : middle;
	}
	.top6_td:nth-child( odd ){
		background-color : rgb( 247 152 219 / .3 );
	}
	.top6_td h2{
		padding-left : 2em;
		font-weight : 400;
	}
	.top6_td span{
		display : inline-block;
		padding : 1em 0 1em 3em;
	}
	.top6_td h2 span{
		display : block;
		padding : 0;
		font-size : .6em;
	}
	.top6_td p{
		width : 40px;
		height : 40px;
		padding-top : .5em;
		color : #fff;
		text-align : center;
		background-color : #554646;
		border-radius : 50%;
	}
	.top6_td2{
		display : table-cell;
		width : 25%;
		padding : 1em;
	}
	.top6_td2:nth-child( even ){
		background-color : rgb( 247 152 219 / .3 );
	}
	.top6_td2 h2{
		font-weight : 400;
	}
	.top6_td2 span{
		display : inline-block;
		padding : 1em 0 1em 3em;
	}
	.top6_td2 h2 span{
		display : block;
		padding : 0;
		font-size : .6em;
	}
	.top6_td2 p{
		width : 40px;
		height : 40px;
		padding-top : .5em;
		color : #fff;
		text-align : center;
		background-color : #554646;
		border-radius : 50%;
	}
	@media screen and ( width <= 768px ){
		.top6_td ,
		.top6_td2{
			display : inline-block;
			width : 100%;
			padding : 1em;
		}
		.top6_td:nth-child( odd ){
			background-color : rgb( 247 152 219 / 0 );
		}
		.top6_td:nth-child( even ){
			background-color : rgb( 247 152 219 / .3 );
		}
		.top6_td2:nth-child( odd ){
			background-color : rgb( 247 152 219 / 0 );
		}
		.top6_td2:nth-child( even ){
			background-color : rgb( 247 152 219 / .3 );
		}
	}
}
.menu_text span{
	display : block;
	font-size : 1rem;
	font-weight : 400;
}

/* --------------------------------------------
VOICE
--------------------------------------------- */
#voice{
	width : 1400px;
	max-width : 95%;
	padding : 3% 3% 0 3%;
	margin : 0 auto;
	@media screen and ( width <= 768px ){
		.uvoice{
			display : block;
		}
		.uvoice dt{
			width : 100%;
		}
		.uvoice dd{
			width : 100%;
		}
	}
}
#voice h2{
	margin : 1rem 0 1.5rem;
	color : #e073bf;
	text-align : center;
}
#voice h2 span{
	display : block;
	font-size : 1rem;
	font-weight : 400;
}
.voice_inner{
	display : flex;
	flex-wrap : wrap;
}
.uvoice{
	display : flex;
	justify-content : center;
	width : 50%;
	padding : 1rem;
}
.uvoice dt{
	width : 25%;
	text-align : center;
}
.uvoice dt img{
	width : 110px;
}
.uvoice_txt{
	font-size : .9rem;
}
.uvoice dd{
	width : 75%;
}
@media screen and ( width <= 768px ){
	.uvoice{
		display : block;
	}
	.uvoice dt{
		width : 100%;
	}
	.uvoice dd{
		width : 100%;
	}
}
.arrow_box{
	position : relative;
	display : inline-block;
	min-width : 120px;
	max-width : 100%;
	padding : 7px 10px;
	margin : 1.5em 0 1.5em 15px;
	color : #555;
	background : #dbedff;
	border : 2px solid #5289c0;
	border-radius : 10px;
}
.arrow_box::before{
	position : absolute;
	top : 15%;
	left : -30px;
	margin-top : -15px;
	content : "";
	border : 15px solid transparent;
	border-right : 15px solid #5289c0;
}
.arrow_box::after{
	position : absolute;
	top : 15%;
	left : -30px;
	margin-top : -17px;
	content : "";
	border : 17px solid transparent;
	border-right : 17px solid #dbedff;
}
.arrow_box p{
	padding : 1rem;
	margin : 0;
	font-size : .9rem;
	line-height : 1.7rem;
	color : #333;
}
.arrow_box .request{
	padding-top : 1rem;
	font-size : 1.2rem;
	font-weight : 700;
	color : #e3513d;
	text-align : center;
}