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

html #main{
	width:100%;
	float:none;
	margin:0;
}

#main h1,
#main h2,
#main h3,
#main article{
	border:none;
	background:none;
	padding:0;
	margin:0;
	position:relative;
}

section{	position:relative;}

#main article{	height:750px;}

 .col-left{	 float:left;}

.col-right{	float:right;}

/* katsuyo*/

#main .page-katsuyo{
	background:url(../-images/about-katsuyo-bg.jpg) no-repeat center top;
	background-size:cover;
	/*padding:100px 0 100px 0;*/
	padding:30px 0 100px 0;
	height:420px;
	color:#595757;
	z-index:5;
}

.page-katsuyo .col,
.page-by .col{
	width:970px;
	padding:50px 40px 30px 40px;
	margin:0 auto;
	background-color: rgba(255, 255, 255, 0.8);
    background: rgba(255, 255, 255, 0.8);
}

.page-katsuyo .col .col-left,
.page-by .col .col-left{
	width:480px;
	padding:60px 0 0 0;
}

.page-katsuyo .col .col-right,
.page-by .col .col-right{
	width:470px;
	padding:0 0 0 20px;
}

/* page-pro */

#main .page-pro{
	background:url(../-images/about-pro-bg.jpg) no-repeat fixed!important;
	background-size:cover!important;
	position:relative;
}

#main .page-pro .col{
	width:1200px;
	margin:0 auto;
	position:relative;
}

.page-pro .tab{
	position:absolute;
	top:0;
	left:0;
	z-index:1;
}

.page-pro .col-right{
	width:510px;
	position:fixed;
	/*top:173px;*/
	top:200px;
	z-index:2;
	margin:0 0 0 560px;
	}
	
#main .page-pro h2{
	margin:0 0 15px 0;
}

#main .page-20th{
	z-index:10;
	background:url(../-images/about-20th.jpg) no-repeat center top;
	background-size:cover;
}

/* page-20th */

#main .page-20th .col{
	width:900px;
	margin:0 auto;
	padding:100px 0;
	color:#FFF;
}

#main .page-20th .col h3{	margin:0 0 20px 0;}

#main .page-by{
	z-index:15;
	background:url(../-images/about-bg-500yen.jpg) no-repeat fixed;
	background-size:cover;
	padding:200px 0 0 0;
}

/*　footer-campaign　*/

#footer-campaign .inner{
	padding:0;
}
#footer-campaign{
	z-index:20;
	position:relative;
	top:-62px;
}

footer{
	z-index:20;
	position:relative;
	margin:-62px 0 0 0;
}

article .button{
	min-width:300px;
}

@media screen and (min-width: 1200px) {
	
#main p{
	font-size:110%;
}

}

@media screen and (min-width: 320px) and (max-width: 1199px) {

#main article{
	min-height:700px!important;
	}

#main .page-katsuyo{
	padding:100px 0 0 0;
}
	
.page-katsuyo .col,
.page-by .col{
	width:90%;
	padding:5%;
}
.page-katsuyo .col .col-left,
.page-by .col .col-left,
.page-katsuyo .col .col-right,
.page-by .col .col-right{
	float:none;
	width:inherit;
	padding:0;
}

#main .page-pro .tab{
	position:relative;
	width:320px!important;
	left:0;
	top:-40px;
	margin:0 auto!important;
	padding:0!important;
}

#main .page-pro h2:nth-of-type(1) img{
	width:32%;
}

#main .page-pro h2:nth-of-type(2) img{
	width:55%;
}

#main .page-20th .col{
	width:90%;
	margin:0 auto;
	padding:80px 0 0 0;
	color:#FFF;
}

/* page-by */

#main .page-by{
	background-size:cover;
}

#main .page-by h3{
	margin:0 0 10px 0;
}


html #footer-campaign .inner{
	margin:0 auto;
	padding:20px 0 0 0;
}

}


@media screen and (min-width: 769px) and (max-width: 1199px) {
	
#main{
	overflow:hidden;
}

#main .page-katsuyo h1{
	margin:0 0 20px;
}

#main .page-pro .tab{
	width:300px!important;
}

#main .page-pro img{
	width:100%;
}

.page-pro .col-right{
	width:90%;
	float:none;
	padding:5%;
	position:fixed;
	top:200px;
	left:0px;
	z-index:2;
	margin:0;
	}

section#main .page-20th{
	min-height:600px!important;
	height:600px!important;
	padding:0;
}

#main .page-pro,
#main .page-by{
	-webkit-transform: translate3d(0,0,0);
}


}

@media screen and  (min-width: 320px) and (max-width: 768px) {
	
#main{
	overflow:hidden;
}

.page-katsuyo .col,
.page-by .col{
	width:96%;
	padding:2%;
}

#main .page-pro .col{
   width:100%;
}

#main .page-pro .col-right{
	float:none;
	padding:2%;
	margin:0%;
	margin-top: 50px;
	position:relative;
	top:-130px;
	left:0;
	z-index:2;
	width:96%;
	}


#main article.page-20th{
	min-height:450px;
	height:500px;
}

#main .page-pro h2{
	margin:0 0 5px 0;
}

#main .page-pro{
	height:830px;
}

#main .page-pro .tab{
	left:0px;
}

#main .page-by{
	padding:100px 0 0 0;
	background-position:center bottom;
}

#main .page-by p{
	margin-left:0;
}

html #main .button{
	min-width:70%;
	width:70%;
}

}

/*オートパースとはページ　パンくずリスト*/

.breadcrum_wrapper{
	width:100%;
}
.breadcrum_inner{
	max-width:1200px;
	margin:0 auto;
}