@charset "UTF-8";
/* CSS Document */

/*=========================================
=========================================
*/
.tablet_on{
		display: none;
	}
.sp_on{
	display: none;
}
.sp_topImg{
/*max-width: initial;*/
	height:360px;
}
.top-img{
    width: 100%;
    height: 500px;
    background-image: url(../imgs/top/top_bg.jpg);
    background-size: cover;
    background-attachment: fixed;
    margin: 50px auto 0;
    /* position: relative; */
    /* top: 120px; */
    /* z-index: 1; */
}
.top-area{
	width:1200px;
	height:500px;
	margin: 0 auto;
		
}
.top-text{
	width:400px;
	height:500px;
	background-color:rgba(255, 255, 255, 0.8);
	/*margin-left:10%;*/
}

h2{
	padding-top: 80px !important;
	text-align: center;
	margin:0;
}
.h2_sub{
	text-align: center;
	font-weight: bold;
	font-size:0.9em !important;
}
.top-text p{
	padding:6%;
	font-size: 1em;
}

/*=========================================
=========================================
*/
#contents_wrap{
	width:100%;
	
}
.main_1{
	width:1200px;
	margin: 0 auto;
}
.left1{
	width:400px;
	height:566px;
	float: left;
}
.right1{
	width:800px;
	height:566px;
	float:left;
	color:#303030;
	background-color:#fff;
	padding: 0 6%
}
h3{
	/*text-align: center;*/
	margin:50px auto 30px !important;
	font-size:28px;
	color:#373737;
	line-height: 1em;
	
}
.right1 p{
	width:100%;
	font-size: 1em;
	margin:0 auto;
}

.main_2{
	width:1200px;
	margin: 0 auto;
	height:auto;
	position:relative;
	/*top:120px;*/
}
.left2{
	width:500px;
	height:708px;
	float: left;
}
.right2{
	width:700px;
	height:708px;
	float:left;
	background-color:#f5f5f5;
	padding-bottom: 4%;
	padding: 0% 6% 6% 6%;
}
h4{
	/*text-align: center;*/
	margin:50px auto 30px;
	font-size:1.3em;
}
.right2 p{
	width:100%;
	font-size: 1em;
	margin:20px auto;
	color:#2E2E2E;
	font-weight: normal;
}


.main_3{
	width:1200px;
	height:668px;
	margin: 0 auto;
	position:relative;
	/*top:120px;*/
}
.left3{
    width: 500px;
    height: auto;
    overflow: hidden;
    display: inline-block;
	float: left;
}
.left3_img1{
	width:100%;
	height:auto;
	float: left;
}
.left3_img2{
	width:100%;
	height:auto;
	float: left;
	display: inline;
}

.right3{
	width:700px;
	height:666px;
	float:left;
	background-color:#fff;
	padding: 0 6% !important;
}

.right3 p{
	width:100%;
	font-size: 1em;
	margin:20px auto;
	color:#4D4D4D;
}
/*@media only screen and ( max-width : 768px ) {
	}
.top-img {
    height: auto;
}
	.top-area {
    width: 100%;
    height: auto;
}
}*/
@media screen and (max-width: 768px) {
	/*max-width:770px*/
	.tablet_on{
		display: block;
		width:100%;
		height:300px;
	}
	.sp_on{
		display: none;
	}
	h2 {
	padding-top: 8% !important;
	}
h4{
	text-align: left;
	}
.top-img {
    width: 100%;
    height: auto;
    background-image: none; 
    margin: 50px auto 0;
}
	.top-area {
    width: 100%;
	height:auto;
	}
	.top-text {
    width: 100%;
	height:auto;
	padding: 4% 0;
	}
.main_1 {
    width: 100%;
	}
	.left1 {
    width: 100%;
	float: inherit;	
	    height: auto;
	/*    padding: 2% 2% 10%;*/
	}
	.right1 {
    width: 100%;
	float: inherit;
	padding: 2% 4% 12%;
	background-color: #fff;
	height:auto;
	}
.right1 p {
    width: 100%;
    font-size: 1em;
	}
	.left2 {
		display: none;
	}
	.left3 {
		 float: inherit;
		width: 100%;
	}
	.right2 {
    width: 100%;
    padding: 4%;
	    overflow: hidden;
    height: auto;
	}
	.right2 p {
    width: 100%;
    font-size: 1em;
	}
	.right3 {
    width: 100%;
    height: auto;
    float: inherit;
    background-color: #fff;
    overflow: hidden;
    padding: 4%;
	}
	.right3 p {
    width: 100%;
    margin: 2% auto;
	}
	.main_2 {
    width: 100%;
	}
	.main_3 {
    width: 100%;
	height: auto;
	}
	.sp_none{
	display: none;
	}
}
@media screen and (max-width: 414px) {
	.h2_sub{
	padding: 5% 0;
	}
	h3{
		font-size:1.7em;
		line-height: 1.2em;
	}
	.tablet_on{
		display: none;
	}
	.sp_on{
		display: block;
		width:100%;
		height:300px;
	}
}