@charset "UTF-8";

#wrap{
	margin-top: 150px;
	position: relative;
}

.sub_nav{
	margin-top: 168px;
	background: #f97b28;
	height: 96px;
}

.sub_nav ul{
	width:946px;
	margin: 0 auto;
	text-align: center;
}

.sub_nav li{
	background: #fdfaf2;
	height: 44px;
	border-radius: 44px;
	line-height: 44px;
	display: inline-block;
	color: #f06c15;
	font-weight: 700;
	margin-right: 24px;
	padding: 0 24px;
	margin-top: 24px;
}

.sub_nav li a{
	color: #f06c15;
}

#about #wrap .inner{
	width: 946px;
	margin: 64px auto;
}

.pro_left{
	margin-right:56px;
	float: left;
}
.pro_left img{
	width: 390px;
}

.pro_right{
	margin-top: 32px;
	width: 496px;
	float: left;
}


/*  discipline
------------------------*/

#discipline .inner02 p{
	position: absolute;
	left:50%;
	margin-left: -408px;
	bottom:0;
}

#discipline .inner02{
	position:relative;
	background: url(../img/about/ttl_pat.png) repeat-x;
	height: 224px;
}

.ttl{
	background: #fff;
	width: 635px;
	box-shadow: 2px 2px 1px rgba(255,214,161,1.0);
	padding: 32px 40px;
	border-radius: 16px;
	position: absolute;
	top: 48px;
	left:50%;
	margin-left: -240px;
	font-weight: 600;
	line-height: 1.5;
}

.ttl span{
	font-size: 24px;
	color: #f06c15;
}


.block01 , .block02{
	width: 946px;
	margin: 64px auto 0;
}

.block01 p span , .block02 p span{
	color: #f97b28;
}

.block01 p:nth-child(1){ float: left;}
.block01 p:nth-child(2){ width: 490px; float:left; margin: 24px 0 0 48px; }

.block02 p:nth-child(1){ float: right;}
.block02 p:nth-child(2){ width: 490px; float:right; margin: 24px 48px 0 0; }


/* #friends
--------------------*/

#friends{
	text-align: center;

}

#friends ul.list{
	margin-bottom: 80px;
}

#friends .fri_title{
	background: url(../img/index/lead_bg_pat.png);
	width: 100%;
	color: #fff;
	text-align: center;
	padding-bottom: 96px;
}


#friends .fri_title h2{
	font-size: 40px;
	padding-top: 64px;
	padding-bottom: 16px;
	text-align: center;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1.0;
}

#friends ul.list li{
	width: 946px;
	margin: 0 auto 40px;
	margin-top: 64px;
	background: url(../img/index/fri_bg_pat.png) #fff;
	border: #fff solid 6px;
	border-radius: 16px;
	height: 402px;
}

#friends ul.list .fri_left{
	border-radius: 10px 0 0 10px;
	overflow: hidden;
	width: 505px;
	float:left;
}
#friends ul.list .fri_left img{
	border-radius: 12px 0 0 12px;
}
#friends ul.list .fri_right{
	float:left;
	width: 400px;
	padding-left: 56px;
}

#friends ul.list .fri_right{
	text-align: left;
}


#friends ul.list .fri_right h3{
	margin-top: 64px;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
}

#friends ul.list .fri_right span{
	font-size: 16px;
}

#friends ul.list .fri_right strong{
	color: #f06c15;
	font-weight: 600;
}

#friends ul.list .fri_right p{
	margin-top: 24px;
}

#friends ul.list .fri_right a{
	color: #f06c15;
	border: 2px #f06c15 solid;
	margin-top: 32px;
	line-height: 50px;
	display: inline-block;
	padding: 0 24px;
	font-weight: 500;
	border-radius: 40px;
}

#friends a.btn{
	width: 320px;
}


#friends_detail


/* #friends_detail
--------------------*/

#friends_detail{
	text-align: center;

}

#friends_detail .block{
	width:946px;
	margin: 64px auto;
	background: #fff;
	border-radius: 12px;
}

#friends_detail div.main{
	margin-bottom: 80px;
}

#friends_detail .fri_title{
	background: url(../img/index/lead_bg_pat.png);
	width: 100%;
	color: #fff;
	text-align: center;
	padding-bottom: 96px;
}


#friends_detail .fri_title h2{
	font-size: 40px;
	padding-top: 64px;
	padding-bottom: 16px;
	text-align: center;
	font-weight: 700;
	letter-spacing: 2px;
	line-height: 1.0;
}

#friends_detail div.main{
	width: 946px;
	margin: 0 auto 40px;
	background: url(../img/index/fri_bg_pat.png) #fff;
	border: #fff solid 6px;
	border-radius: 16px;
	height: 402px;

	float:left;
}

#friends_detail div.main .fri_left{
	border-radius: 10px 0 0 10px;
	overflow: hidden;
	width: 505px;
	float:left;
}
#friends_detail div.main .fri_left img{
	border-radius: 12px 0 0 12px;
}
#friends div.main .fri_right{
	float:left;
	width: 400px;
	padding-left: 56px;
}

#friends_detail div.main .fri_right{
	text-align: left;
	float: left;
	margin-top:80px;
	margin-left: 40px;
}


#friends_detail div.main .fri_right h2{
	margin-top: 48px;
	font-size: 32px;
	font-weight: 700;
	line-height: 1.2;
}

#friends_detail div.main .fri_right span{
	font-size: 16px;
}

#friends_detail div.main .fri_right strong{
	color: #f06c15;
	font-weight: 600;
}

#friends_detail div.main .fri_right p{
	margin-top: 24px;
}

#friends_detail div.main .fri_right a{
	color: #f06c15;
	border: 2px #f06c15 solid;
	margin-top: 32px;
	line-height: 50px;
	display: inline-block;
	padding: 0 24px;
	font-weight: 500;
	border-radius: 40px;
}

#friends_detail a.btn{
	width: 320px;
}

#friends_detail .content{
	text-align: center;
	margin-bottom: 64px;
}


#friends_detail .content h3{
	font-size:28px;
	font-weight: 700;
	position: relative;
	z-index:1;
	margin-bottom: 40px;
}

#friends_detail .content h3:before{
	position:absolute;
	content:"";
	height: 24px;
	background: #fcf1b2;
	width: 0px;
	left:50%;
	bottom: 4px;
	margin-left: -250px;
	z-index:1;
	animation: bar 0.3s ease-in-out forwards;
	animation-delay: 0.5s;
	vertical-align: middle;
	z-index:-1;
}


#friends_detail .point{
	background: #fff7e6;
	width: 946px;
	border: 6px solid #fff;
	border-radius: 0 0 12px 12px;
	position: relative;
}

#friends_detail .point .point_left{
	width: 298px;
	height: 100%;
	float:left;
	margin-top:40px;
	line-height: 1.3;
	position: relative;
}

#friends_detail .point .point_right:before{
	position: absolute;
	content:"";
	background: url(../img/about/point_line.png);
	left:0px;
	width: 4px;
	height: calc(100% - 40px);
}

#friends_detail .point .point_right{
	float:left;
	width: 568px;
	margin-top:40px;
	position: relative;
	padding-left: 48px;
	padding-bottom: 8px;
}

#friends_detail .point .point_right dt:before{
	content:"●";
	color: #f06c15;
	margin-right: 8px;
}

#friends_detail .point .point_right dt{
	font-weight: 700;
}

#friends_detail .point .point_right dd{
	font-size: 14px;
	margin-bottom: 24px;
}


#friends_detail .point h3{
	color: #f97b28;
	font-size: 28px;
	text-align: center;
	font-weight: 700;
	padding-top:32px;
}

#friends_detail .point h3:before{
	content:"";
	background: url(../img/about/friends_point_icon.png) no-repeat;
	width: 121px;
	height: 127px;
	position: absolute;
	left:90px;
	top: 0px;
	
}

@keyframes bar{
	0% {width:0;}
	100% {width: 500px;}
}