@charset "UTF-8";


/******************************************************

 body
 
******************************************************/

#head{
}

.head_border{
	background: -webkit-gradient(linear, left top, right top, color-stop(1.00, #1800ff), color-stop(0.80, #ff00f6), color-stop(0.59, #ff0600), color-stop(0.39, #fff000), color-stop(0.20, #00ff1e), color-stop(0.00, #00e4ff));
	background: -webkit-linear-gradient(left, #00e4ff 0%, #00ff1e 20%, #fff000 39%, #ff0600 59%, #ff00f6 80%, #1800ff 100%);
	background: -moz-linear-gradient(left, #00e4ff 0%, #00ff1e 20%, #fff000 39%, #ff0600 59%, #ff00f6 80%, #1800ff 100%);
	background: -o-linear-gradient(left, #00e4ff 0%, #00ff1e 20%, #fff000 39%, #ff0600 59%, #ff00f6 80%, #1800ff 100%);
	background: -ms-linear-gradient(left, #00e4ff 0%, #00ff1e 20%, #fff000 39%, #ff0600 59%, #ff00f6 80%, #1800ff 100%);
	background: linear-gradient(to right, #00e4ff 0%, #00ff1e 20%, #fff000 39%, #ff0600 59%, #ff00f6 80%, #1800ff 100%);
	width:100%;
	height:2px;
}


.img_auto{
	width:100%;
	height:auto;
}

.thumb img,
.main_img img,
.story_title_main img,
.story_title_cpd img{
	width:100%;
	height:auto;
}


/******************************************************

 main
 
******************************************************/




/******************************************************

 section01
 
******************************************************/


.section01{
	margin:auto;
	width:90%;
	max-width:1100px;
	padding:5% 0px;
	overflow:hidden;
}









/******************************************************

 data
 
******************************************************/

#data{
	float:left;
	width:22.272727272%;
}

.thumb{
	max-width:245px;
	text-align:center;
}
.thumb_btn{
	padding:0px 20px 20px 20px;
}
.thumb_title{
	text-align:center;
	padding:15px 6px 15px 6px;
	font-size:105%;
	font-weight:bold;
}
.thumb_btn a{
	text-align:center;
	border:1px solid #000;
	font-size:10px;
	line-height:16px;
	padding:5px 10px;
	margin:auto;
	text-decoration:none;
	width:80%;
	max-width:100px;
	display:inline-block;
	*display: inline;
	*zoom: 1;
	color:#000;
}
.thumb_btn a:hover{
	background:#000;
	color:#fff;
}
.data_txt{
	max-width:245px;
}
.data_title{
	margin-top:40px;
}
.data_list{
	padding-top:20px;
}
.data_list li{
	font-size:12px;
	line-height:18px;
	padding-left:15px;
	margin-top:20px;
	background: url(../images/share/data_list_bg.png) no-repeat 0px 3px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.data_list li{
	background: url(../images/share/data_list_bg@2x.png) no-repeat 0px 3px;
	background-size:10px 10px;
}
}

@media screen and (max-width: 800px){
#data{
	overflow:hidden;
}
.thumb{
	float:left;
	width:35%;
}
.data_txt{
	float:right;
	width:60%;
}
.data_title{
	margin-top:0px;
}
.data_list li{
	margin-top:15px;
	display:inline-block;
	*display: inline;
	*zoom: 1;
	vertical-align:top;
	padding-right:30px;
}
.thumb{
	margin:auto;
}
}

@media screen and (max-width: 500px){
.thumb,
.data_txt{
	float:none;
	width: auto;
}
.data_txt{
	margin-top:10%;
}
}

/******************************************************

 story
 
******************************************************/

#story{
	float:right;
	width:74.09090909%;
}



.ourworks_title{
	font-size:220%;
	font-weight:lighter;
	padding-bottom:20px;
}



.main_img img{
	max-width:815px;
}
.main_txt{
	background:#f5f5f5;
	padding:30px;
}
.main_txt p{
	font-size:16px;
	line-height:30px;
}


@media screen and (max-width: 500px){
.ourworks_title{
	font-size:170%;
	padding-top:15px;
}
.main_txt{
	padding:15px;
}
}


.story_title{
	position:relative;
	margin-top:8%;
}
.story_title_txt{
	border-bottom:1px dotted #ccc;
	width:100%;
}
.story_title_txt h4{
	padding:20px 0px;
	font-size:20px;
	line-height:26px;
	width:66.871165644%;
}
.story_c .story_title_txt h4{
	color:#4a9285;
}
.story_p .story_title_txt h4{
	color:#457bab;
}
.story_d .story_title_txt h4{
	color:#a9945c;
}
.story_title_main{
	position:absolute;
	z-index:10;
	top:0px;
	width:25.644171779%;
	right:3.680981595%;
}
.story_title_main img{
	max-width:209px;
}
.story_title_cpd{
	text-align:center;
	width:66.871165644%;
	margin-top:30px;
}
.story_title_cpd img{
	max-width:400px;
}
.read_copy{
	margin-top:5%;
}
.story_point{
	margin-top:8%;
	background:#f2f2f2;
	padding:25px 30px;
}
.story_point h5{
	text-align:center;
}
.story_point ul{
	padding-top:10px;
}
.story_point li{
	font-size:14px;
	line-height:20px;
	padding-left:28px;
	padding-top:20px;
}
.story_c .story_point li{
	background: url(../images/share/c_check_txt.png) no-repeat 0px 12px;
}
.story_p .story_point li{
	background: url(../images/share/p_check_txt.png) no-repeat 0px 12px;
}
.story_d .story_point li{
	background: url(../images/share/d_check_txt.png) no-repeat 0px 12px;
}

@media only screen and (-webkit-min-device-pixel-ratio: 2) {
.story_c .story_point li{
	background: url(../images/share/c_check_txt@2x.png) no-repeat 0px 12px;
	background-size:24px 24px;
}
.story_p .story_point li{
	background: url(../images/share/p_check_txt@2x.png) no-repeat 0px 12px;
	background-size:24px 24px;
}
.story_d .story_point li{
	background: url(../images/share/d_check_txt@2x.png) no-repeat 0px 12px;
	background-size:24px 24px;
}
}

.story_c .story_point{
	border:5px solid #b6d7d1;
}
.story_p .story_point{
	border:5px solid #b3c9dd;
}
.story_d .story_point{
	border:5px solid #e7dfc9;
}


@media screen and (max-width: 500px){

.story_title_txt h4{
	width:72%;
}
.story_title_main{
	right:0%;
}
.story_title_cpd{
	width:100%;
}
.read_copy{
	margin-top:10%;
}

.story_point{
	padding:25px 20px;
}

}
@media screen and (max-width: 400px){

.story_title_main{
	top:10px;
}

.story_point h5 img{
	height:15px;
	width:auto;
}

}


/******************************************************

 media screen
 
******************************************************/


@media screen and (max-width: 800px){
#data,
#story{
	float:none;
	width:auto;
}
#data{
	margin-top:5%;
	padding-top:5%;
	border-top:1px dotted #ccc;
}
}

@media screen and (max-width: 500px){

#data{
	margin-top:10%;
	padding-top:10%;
}
}








/******************************************************

 section02
 
******************************************************/


.section02{
	margin:auto;
	width:90%;
	max-width:1100px;
	padding:3% 0px 3% 0px;
	overflow:hidden;
	border-top: 1px dotted #ccc;
}




/******************************************************

 return_btn
 
******************************************************/

.return_btn{
	margin:auto;
	width:70%;
	max-width:300px;
	margin-bottom:5%;
}
.return_btn a{
	display: block;
	background:#000;
	color:#fff;
	font-size:12px;
	line-height:20px;
	text-align:center;
	text-decoration:none;
	padding:10px;
}
.return_btn a:hover{
	background:#666;
}


@media screen and (max-width: 500px){

.section02{
	padding:10% 0px;
}
.return_btn{
	margin-bottom:10%;
}

}



/******************************************************

 return_btn
 
******************************************************/

.ilmh{
	background:#eaeaea;
	padding:50px;
}

.ilmh p a{
	display:block;
	margin:auto;
	width:100%;
	max-width:1100px;
	background:#fff;
}
.ilove_btn01{
	width:48.181818181%;
	margin-left:4.545454545%;
}
.ilove_btn02{
	width:47.272727272%;
}

.ilove_btn01,
.ilove_btn02{
	height:auto;
}

@media screen and (max-width: 800px){

.ilmh{
	padding:30px;
}

}

@media screen and (max-width: 500px){

.ilmh{
	padding:20px;
}

.ilove_btn01{
	width:100%;
	margin-left:0%;
}
.ilove_btn02{
	width:100%;
}

}



/******************************************************

 return_btn
 
******************************************************/

.madoribtn {
	text-align:right;
	padding:0px 15px;
}
.madoribtn a{
	display: inline-block;
	background:#14306A;
	color:#fff;
	font-size:12px;
	line-height:20px;
	text-align:center;
	text-decoration:none;
	padding:10px 0px;
	width:230px;
}
.madoribtn a:hover{
	background:#3c5b9b;
}


@media screen and (max-width: 800px){

.madoribtn {
	text-align: center;
	margin-bottom:20px;
}

}


.madori_img{
	text-align:center;
	border-top:1px dotted #ccc;
	width:90%;
	max-width:1100px;
	margin:auto;
	padding:3% 0px 5% 0px;
}
.madori_img img{
	width:100%;
	height:auto;
}


/******************************************************

 clear fix
 
******************************************************/

.section01:after {
  display : block;
  clear : both;
  content : '';
}

.section01{
	zoom : 1;
}