@charset "UTF-8";

/* ==================================================
トップ
================================================== */
/* visual
============================== */
#visual {
	color:#fff;
	background:#000 url(../images/top/mainvisual.jpg) no-repeat center top;
	height:450px;
	position:relative;
}
#visual_catch {
	position:absolute;
	top:50%;
	margin-top:-1.2em;
	text-align:center;
	width:100%;
}
#visual_catch p {
	font-size:237.5%;
	padding:10px 0;
	font-weight:bold;
	background:url(../images/top/catch_bg.png) repeat-y top center;
}
/* info
============================== */
#info {
	clear:both;
	margin:0 0 80px;
}
#info_ttl_wrap {
	float:left;
	width:40%;
	padding-right:40px;
}
#info_ttl {
	position:relative;
	padding:40px;
	color:#fff;
	background-color:#FF6699;
	background: -webkit-gradient(linear, left top, right bottom, from(#FF6699), to(#CC0033));
	background: -moz-linear-gradient(left, #FF6699, #CC0033);
	background:linear-gradient(to left, #FF6699, #CC0033);
	height:220px;
}
#info_ttl::before {
	content:"";
	position:absolute;
	z-index:-1;
	top:35px;
	left:40px;
	width:100%;
	height:220px;
	background:#FAE5EA;
}
#info_ttl::after {
	content:"";
	position:absolute;
	z-index:1;
	right:-25px;
	bottom:-30px;
	background:url(../images/top/info_en.png) no-repeat;
	width:280px;
	height:110px;
}
#info_ttl h2 {
	font-size:212.5%;
	position: absolute;
	top: 50%;
	left:40px;
	-webkit-transform: translate(0, -50%);
	transform: translate(0, -50%);
}
#info_cnt {
	float:right;
	width:60%;
	padding:30px 0 0 40px;
}
#info_cnt h3 {
	font-size:112.5%;
	margin:1em 0 0.4em;
	position:relative;
}
#info_cnt h3::before {
	content:"";
	position:absolute;
	left:-40px;
	top:0.6em;
	width:30px;
	height:2px;
	background:#CC0033;
}
#info_cnt p {
	margin:0 0 1em;
}
/* cate_list
============================== */
#cate_list {
	margin:0 -10px;
}
#cate_list .box_cate_wrap {
	float:left;
	width:33.3%;
	width:calc(100% / 3);
	padding:0 20px;
	margin:0 0 20px;
}
#cate_list .box_cate {
	padding:270px 20px 0 0;
	position:relative;
}
#cate_list #cate_list_store .box_cate {
	background:url(../images/top/cate1_img.jpg) no-repeat top center;
}
#cate_list #cate_list_initiation .box_cate {
	background:url(../images/top/cate2_img.jpg) no-repeat top center;
}
#cate_list #cate_list_member .box_cate {
	background:url(../images/top/cate3_img.jpg) no-repeat top center;
}
#cate_list .box_cate::after {
	content:"";
	position:absolute;
	left:0;
	top:0;
	z-index:1;
	width: 0;
	height: 0;
	border-style: solid;
	border-width: 30px 30px 0 0;
}
#cate_list #cate_list_store .box_cate::after {
	border-color: #7E318C transparent transparent transparent;
}
#cate_list #cate_list_initiation .box_cate::after {
	border-color: #FF3000 transparent transparent transparent;
}
#cate_list #cate_list_member .box_cate::after {
	border-color: #00AEEB transparent transparent transparent;
}
#cate_list .box_cate_main {
	background-color:rgba(0, 0, 0, 0.8);
	color:#ffffff;
	padding:25px;
	margin-left:-20px;
}
#cate_list .box_cate_main h2 {
	font-size:175%;
	line-height:1.2;
	font-weight:400;
	padding-bottom:15px;
	position:relative;
	margin:0 0 15px;
}
#cate_list .box_cate_main h2::after {
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:70px;
	height:2px;
}
#cate_list #cate_list_store .box_cate_main h2::after {
	background:#7E318C;
}
#cate_list #cate_list_initiation .box_cate_main h2::after {
	background:#FF3000;
}
#cate_list #cate_list_member .box_cate_main h2::after {
	background:#00AEEB;
}
/* more_btn */
#cate_list .more_btn {
	font-weight: bold;
	margin-top:15px;
}
#cate_list .more_btn a {
	position:relative;
	display:block;
	padding:8px 15px;
	text-decoration:none;
	color:#fff;
	background-color:#000;
	border:1px solid #666;
	transition: 0.3s;
}
#cate_list #cate_list_store .more_btn a:hover {
	background-color:#7E318C;
}
#cate_list #cate_list_initiation .more_btn a:hover {
	background-color:#FF3000;
}
#cate_list #cate_list_member .more_btn a:hover {
	background-color:#00AEEB;
}
#cate_list .more_btn a::after {
	content:"";
	position:absolute;
	right:-15px;
	top:12px;
	width:94px;
	height:10px;
	background:url(../images/main/arrow_r.png) no-repeat;
	transition: 0.3s;
}
#cate_list .more_btn a:hover::after {
	right:10px;
}
/* ==================================================
clearfix
================================================== */
#info:after,
#cate_list:after {
	content: ""; 
	display: table;
	clear: both;
}