@charset "UTF-8";


/*----------------------------------------------------
	☆for Tablet
----------------------------------------------------*/



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

	
	
	#allContents {
		width: 92%;
		margin: 0 4%;
	}
	
	
	
	

}



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


	.spImg{ max-width: 100%;}
	
/*-- MV --*/	
	
	.wrap h1 {
		text-align: left;
	}
	
	
	h1.mvtRight {
	top: 40%;
}

h1.mvtRight.aos-animate {
	top: 40%;
}

h1.mvtLeft {
	top: 40%;
}

h1.mvtLeftt.aos-animate {
	top: 40%;
}

p.mvtCenter {
	top: 40%;
}

p.mvtCenter.aos-animate {
	top: 40%;
}

	
	
	
	
	
	
	
	
	
	
	
	
h1.mvtWorks.aos-animate {
left: 2%;
}

	.mvMasuda h1 img,
	.wrap h1 img {
	max-width: 60%;
}

	.wrap h1.small01,
	.wrap h1.small02 {
			top: 15%;
	}
.wrap h1.small01 img {
	max-width: 46%;
}

.wrap h1.small02 img {
	max-width: 40%;
}
	
	
	
	
	
	
	
	
	
	
	
	
	

/*-- FOOTER --*/

 #footeInfo {
	text-align: center;
	}
	

#footerTop #footeInfo {
	padding:1em 0 0;
	}

.ftInfoLeft {
	float: none;
	width: 100%;
}

.ftInfoLeft p {
	float: none;
	width: 100%;
}

.ftInfoLeft ul {
	float: none;
	width: 100%;
	margin-top: 20px;
}

.ftInfoRight ul li {
	display: block;
	margin: 20px 0;
	text-align: center;
}

#footerTop .ftInfoRight {
	text-align:center;
}

#footerTop .ftInfoRight ul {
	margin:0 auto;
}

#footerTop .ftInfoRight ul li {
	display: inline;
	margin: 10px 0;
	text-align: left;
	font-size:1.2rem;
	letter-spacing:0;
}

.ftInfoRight {
	float: none;
	width: 100%;
}




#footerTop .ftInfoLeft img {
	width:100%;
}

#footerTop .ftInfoLeft {
	overflow:hidden;
	margin-bottom:0;
	padding-bottom:0;
}

#footerTop .ftInfoLeft p {
	float: left;
	width: 28%;
	margin-left:2%;
}

#footerTop .ftInfoLeft ul {
	float: left;
	width: 70%;
	margin-top:10px;
}

#footerTop .ftInfoLeft ul li{
	margin: 0 8px;
	font-size:1.3rem;
}


#footerTop p.copyRight {
	margin-top:10px;
	padding-bottom:0.6em;
}


/*-- Masuda --*/
	
	#mvStyle {
	background-attachment: scroll;
}
	
	.mvMasuda h1 {
	right: 5%;
	}
	
.bgMasuda02 {
	padding: 60px 0;
	background-attachment: scroll;
}	
	
	.bgMasuda03{
	background-position: 35% top ;
	background-attachment: scroll;
}

	.childhoodArea.plusImg {
		height: 190px;
}
	
	
/*-- Top --*/	
	
h1.mvtRight.aos-animate {
	text-align: right;
}
	
#section01 {
	background-position: 40% top;
	margin-top: -60%;
}
	
	#section05 {
	background-position: 35%;
}
	
.w39perRight {
	width: 40%;
}
	
	/*-- interChange --*/	
	h1.mvtWorks.aos-animate {
left: 10%;
}
	
.interchangePhotoArea .interChange02{
	position: absolute;
	top: 300px;
	right: 0px;
}
	

	/*-- Dream --*/	
h1.mvtDream.aos-animate {
	right: 8%;
}
	
	.spImgMax{ max-width: 100%;}
	
	
	

}





/*----------------------------------------------------
	☆for SP
----------------------------------------------------*/

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

.spDisp{ display: block!important;}
.spHide{ display: none!important;}


br.clear_noie.spHide,
div.clear_noie.spHide{
	 display: none!important;
}

.outline {
	text-shadow: -1px -1px #FFF,1px -1px #FFF,-1px 1px #FFF,1px 1px #FFF;
 /* for IE */
 	filter:dropshadow(color=#FFFFFF,offX= 0,offY=-1)
    dropshadow(color=#FFFFFF,offX= 1,offY= 0)
    dropshadow(color=#FFFFFF,offX= 0,offY= 1)
    dropshadow(color=#FFFFFF,offX=-1,offY= 0);
}

#topcontrol a{
	height: 40px;
	width: 40px;
}

#contents {
	padding-top: 40px;
}

#contents section{
	margin-bottom: 50px;
}

p {
	font-size: 1.5rem;
}
	
	
	.wrap{
	overflow: hidden;
	position: relative;
	width: 100%;
	height: 40vh;
	background: linear-gradient(-45deg, rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.3));
}

#bg-video{
	position: absolute;
	top: 0;
	right: 0;
	bottom: 0;
	min-width: 100%;
	height: 40%;
	z-index: -100;
	left: 50%;
 transform: translateX(-50%);
}

	
	
/*----------------------------------------------------
	☆float
----------------------------------------------------*/

.fltL, .fltR{
	float: none;
}

.fltImgL,
.fltImgR {
	float:none;
	margin:0;
	text-align: center;
}

.fltImgL img,
.fltImgR img{
	max-width: 100%;
	margin-bottom: 5px;
}

/*----------------------------------------------------
	☆Form
----------------------------------------------------*/

p.subscribeBtn input{
	padding:15px 0 13px;
	margin-top: 5px;
	width: 100%;
}


input.wSS,
input.wS,
input.wM,
input.wL,
input.wLL {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.wSS { width: 30%;}
.wS { width: 50%;}
.wM { width: 100%;}
.wL { width: 100%;}
.wLL { width: 100%;}
.imeOn { ime-mode: active;}
.imeOff { ime-mode: disabled;}

textarea.txtarea {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	height: 200px;
	width: 100%;
}

select.timearea{
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
	width: 50%;

}
option {
	font-size:14px!important;
}

label {
	cursor: pointer;
}

label:hover {
	color:#999;
}

input[type="checkbox"], input[type="radio"] {
	margin-right:3px;
}

.formErr {
	color:#E54E52;
	font-weight:bold;
}

input.inputErr,
textarea.inputErr {
	background-color:#FADFDE;
}


#contents .redHissu {
	background-color:#FF2323;
	color:#FFF;
	font-size:10px;
	line-height:100%;
	margin-left:3px;
	padding:2px 5px;
	margin-right: 5px;
	vertical-align:middle;
}









/*----------------------------------------------------
	☆Header
----------------------------------------------------*/
	

div#pcHeader {
		display: none;
	}
	
header#spHeader {
	display: inline-block;
/*-	background-color: #fff;-*/
	height: 64px;
	z-index: 6;
}

	
	header {
	height: 56px;

}
	
h1.logoSp {
		position: absolute;
		top: 15px;
		left: 4%;
	}
	
	h1.logoSp img {
		max-width: 60%;
	}
	
/*-- SPNAV --*/
	
.cd-main-nav {
		z-index: 10;
	background: #000;
	}
	
.cd-main-nav a {
	border-bottom: 1px solid #333;
	color: #fff;
	font-weight: bold;
	-webkit-transition: -webkit-transform 0.3s, opacity 0.3s;
	-moz-transition: -moz-transform 0.3s, opacity 0.3s;
	transition: transform 0.3s, opacity 0.3s;
}
	
.cd-nav-trigger span {
	background-color: #fff;
	top: 30px;
}
	
.cd-nav-trigger span::before,
.cd-nav-trigger span::after {
	background-color: #fff;
}

/*----------------------------------------------------
	☆MV
----------------------------------------------------*/
	/*
#mv {
  margin-top: 62px;
}*/

#mv div.mvInr {
	margin:0 5%;
	width:90%;
	
	height:200px;/*-- delete --*/
}
/*-
	#bg-video {
	display: none;
	}
	-*/
	
#spMv{
	display: block;
	background-size: cover;
	width: 100vw;
	height: 100vh;
	}
	
.spWorks {
	background:url(../../img/mv-sp-works.jpg) ;
}
	
.spInterchange {
	background:url(../../img/mv-02.jpg) ;
}

.spBonds {
	background:url(../../img/mv-sp-bonds.jpg) ;
}
	
.spDream {
	background:url(../../img/mv-04.jpg) ;
}
	

	
	
	
	
	
	
	

/*----------------------------------------------------
	☆BREADCHUMBS
----------------------------------------------------*/

#breadChumbs {
	display: none;
}



/*----------------------------------------------------
	☆CONTENTS
----------------------------------------------------*/

#contents {
	margin:0 auto;
	width:100%;
}

#main {
	float:none;
	margin: 0 5% 60px; 
	width:auto;
}


#sideNav {
	float:none;
	width:100%;
}



/*----------------------------------------------------
	☆FOOTER
----------------------------------------------------*/

#footer {
	margin-top: 0;
	width:100%;
	
}

#footer div.ftInr {
	margin:0 5%;
	width:auto;
}
	
#footer #footerBtm {
	padding: 2.5em 0 1.5em;
}
	
#footer #footerBtm div {
	width: 45%;
	margin: 0.6em 2.5%;
}

#footer #footerBtm div dl dt,
#footer #footerBtm div dl dd {
margin-bottom: 1.5em;
}
	

	


/*-- COPYRIGHT --*/

small#copyright {
	background-color:#000;
	color:#FFF;
	display:block;
	font-size:1.0rem!important;
	padding:10px 0;
	text-align:center;
	width:100%;
}





/*----------------------------------------------------
	☆Btn
----------------------------------------------------*/

.bscBtn01 a {
	padding: 20px 5%;
	text-align: center;
	width: 100%;
}





/*----------------------------------------------------
	☆Table
----------------------------------------------------*/

#contents div.bscTbl01 table th,
#contents div.bscTbl01 table td,
#contents table.bscTbl01 th,
#contents table.bscTbl01 td {
	display: block;
	font-size: 1.1rem;
	padding:10px 3%;
	width: 100%!important;
}



/*----------------------------------------------------
	☆Top
----------------------------------------------------*/
	
	
	/*-----------
	☆bxSlider
-----------*/

.bx-wrapper .bx-viewport {
	background: none!important;
	border: none!important;
	box-shadow: none!important;
	left: 0!important;
	z-index: -2;
}
#slider {
		display: block;
}

#slider li {
	width:100vw!important;
	height: 100vh!important;
}

#slider .mvIndex01 {
	background: url(../../img/mv-01.jpg) no-repeat;
	background-position:  center top;
	background-size:cover!important;
	width:100%;
}

#slider .mvIndex02 {
	background: url(../../img/mv-02.jpg) no-repeat;
	background-position:  center top;
	background-size:cover!important;
	width:100%;
}
	
#slider .mvIndex03 {
	background: url(../../img/mv-03.jpg) no-repeat;
	background-position:  center top;
	background-size:cover!important;
	width:100%;
}
	
#slider .mvIndex04 {
	background: url(../../img/mv-04.jpg) no-repeat;
	background-position:  center top;
	background-size:cover!important;
	width:100%;
}
	
	
	
	
	
	

	h1.mvtRight {
	top: 46%;
	right: -20px;
	margin-top: -100px;
	text-align: right;
}

h1.mvtRight.aos-animate {
	top: 53%;
	right: 0;
	margin-top: -100px;
}

h1.mvtLeft {
	top: 53%;
	left: -1%;
	margin-top: -100px;
}

h1.mvtLeftt.aos-animate {
	top: 46%;
	left: -3%;
	margin-top: -100px;
}
	
h1.mvtRight img,
h1.mvtLeft img{
	max-width: 35%;
}

	p.mvtCenter img {
		max-width: 70%;
	}

p.mvtCenter {
	top: 50%;
	left: 50%;
	margin-top: -80px;
	margin-left: -10px;
}

p.mvtCenter.aos-animate {
	top: 50%;
	left: 50%;
	margin-top: -80px;
	margin-left: -10px;
}


#section01 {
	background-position: 38% top;
}
	
#section02 {
	background-position: 44% top;
}
	
#section03 {
	background-position: 26% 20%;
}

#section05 {
	background-size: cover;
	background: url(../../img/mv05-sp.jpg);
	position: relative;
	background-position: left 62% top 50%;
}

	
	#fullPage .section .w1200 img {
		max-width: 100%;
	}	
	
#fullPage .section .w1200 .tlInterchange img {
		max-width: 66%;
}	

#fullPage .section .w1200 .tlBonds img{
		max-width: 62%;
}	
	
#fullPage .section .w1200 .tlDream img {
		max-width: 57%;
}	
	
	.w39perRight {
	width: 55%;
	text-align: right;
	right: 10%;
	top: 10%;
}
	
.w39perLeft {
	width: 55%;
	left:10%;
	top: 10%;
}
	
	.w39perRight.topChange {
	width: 60%;
	right: 10%;
	top: 4%;
}
	
	

	.w39perRight.topChange img {
		width: 60%;
	}
	
	.whitePara {
		font-size: 1.6rem;
	}
	

/*----------------------------------------------------
	☆Masuda
----------------------------------------------------*/
	
.mvMasuda h1 {
	position: absolute;
	top: 35%;
	right: 3%;
	text-align: right;
}
	
.bgMasuda01 {
 height: 700px;
	background: url(../../img/bg-masuda03-sp.jpg) no-repeat;
	background-position: right center;
	padding-top: 30px;
}
	
.bgMasuda01 h2 {
	width: 60%;
	margin: 0 3%;
	padding: 20px 2%;
 background: rgba(0,0,0,0.9);
}
		
.bgMasuda01 h2 img {
	width: 90%;
}
	
	
	
	/*-----------
	☆history
-----------*/

	
.childhood {
padding: 0 20px;
margin-bottom: 0px;
right: 0px;
}
	
	.childhoodLine.woodLine {
transform: scaleY(1) translateX(0);
}
	
.childhoodLine {
margin: 0;
height: calc(100% + 25px);
left: 55px;
transform: scaleY(0) translateX(0);
}
	
.childhoodLast
.childhoodFirst {
	margin: 0;
	left: 0;
	width: 6em;
	font-size: 1.2rem;
}
	
.childhoodLine.woodLine {
	transform: scaleY(1) translateX(0);
}
	
.childhoodLine:before {
	width: 11px;
	height: 11px;
	transform: translateX(-5px);
}	
	
.childhoodArea {
	margin-bottom:60px;
}
	
.childhoodArea:nth-child(2n+1) {
	right: 0;
	padding-left: 0;
}
	
.childhoodArea:nth-child(2n+1) .childhoodYear:after {
	left: 70px;
}
	
	.childhoodArea:nth-child(2n) {
	text-align: left;
	left: 0;
	padding-right: 0;
}
	
.childhoodYear {
	font-size: 17px;
	padding-left: 85px;
}
	
.childhoodArea:nth-child(2n):nth-child(2n) .childhoodYear:before {
	transform-origin: left center;
}
	
.childhoodArea:nth-child(2n) .childhoodYear:after {
	right: auto;
	left: 70px;
}
	
.childhoodPara,
.childhoodParaRight{
	font-size: 14px;
	padding-left: 85px;
	margin-left: 0;
	width: 100%;
}

	.childhoodArea:nth-child(2n+1) .childhoodYear:before {
	right: auto;
	left: 35px;
}
	
.childhoodYear:before {
	width: 35px;
}	
	
	
.childhoodImg {
	padding-left: 85px;
	width: auto;
}
	
.childhoodImg img {
	width: 100%;
	height: auto;
}
	
.childhoodArea:nth-child(2n) .childhoodYear:before {
	right: auto;
	left: 35px;
}
	
	.childhoodArea.plusImg,
	.childhoodArea.plusImg02 {
    height: auto;
}

.bgMasuda03 h2 {
	width:97%;
	margin: 0 3% 0 0;
	text-align: right;
	padding: 115px 0 0 0;
}

.bgMasuda03 h2 img {
		max-width: 60%;
}
	

	
	/*----------------------------------------------------
	☆Works
----------------------------------------------------*/
	
.worksArea01,
.worksArea02,
.worksArea03,
.worksArea04,
.worksArea05 {
	margin: 30px auto;
}
	
.worksArea01 img,
.worksArea02 img,
.worksArea03 img,
.worksArea04 img,
.worksArea05 img {
	width: 100%;
	padding: 10px 0;
}
	
	
.worksArea01 .worksArea01Left {
	float: none;
	width: 100%;
	margin-right: 0;
}
.worksArea01 .worksArea01Right {
	float: none;
	width: 100%;
	margin: 40px 0 0 0;
}
	
.worksArea01 .worksArea01Right h2 {
	margin-left: 0;
	text-align: center;
}	
	
	.worksArea01 .worksArea01Right h2 img {
		width: 35%;
	}
	
.worksArea02 .worksArea02Left {
	float: none;
	width: 100%;
	margin: 45px 0 0 0;
}
.worksArea02 .worksArea02Right {
	float: none;
	width: 100%;
}
	
.worksArea03 {

	margin-top: 20px;
}

.worksArea03 .worksArea03Left {
	float: none;
	width: 100%;
	margin-right: 0;
}

.worksArea03 .worksArea03Right {
	float: none;
	width: 100%;
	padding: 0 0 0 0;
}	
	
.worksArea05 div {
		margin: 25px auto;
}	
	
	
	.worksArea05 {
	background-attachment: scroll;
}
	
	
	
	/*----------------------------------------------------
	☆Interchange
----------------------------------------------------*/
	
	
	.interchangeBg {
	background-color: #C6E8F2;
	background-position: center 92% ;
	background-size: contain;
	height: 100%;
		min-height: 1300px;
	padding: 0;
	margin: 0 0 -70px 0;
}
	
	.interchangePhotoArea{
	position: relative;
	margin: 40px 0 0;
}
	
	.interchangePhotoArea .interChange01{
	position: absolute;
	top: 0;
	left: 0;
}

.interchangePhotoArea .interChange02{
	position: absolute;
	top: 280px;
	right: 0;
}

	.narrowTx {
		font-size: 4.4rem;
		letter-spacing: 0;
	}
	.narrowTx span {
 font-size: 3.4rem;
}
	
	
	/*----------------------------------------------------
☆Bonds
----------------------------------------------------*/
	
.bonds01,
.bonds02,
.bonds03,
.bonds04 {
	margin: 0 auto;
	overflow: hidden;
}
	
	.bondsArea01Left p {
    margin: 15% 0 5% 5%;
    width: 90%;
}
	
.bonds01{
	padding-top: 60px;
}
	
.bonds02 h2 {
	margin: 0 20% -50px 0;
	}
	
.bonds02 h2 img {
	width: 20%;
	}
	
	
.bonds02 p {
	padding: 3% 5% 0;
	margin: -8% 0 10% 5%;
}
	
.bondsArea03Left {
	float: none;
	width: 90%;
}

.bondsArea03Right {
	float: none;
	width: 80%;
}

.bondsArea03Right p {
	margin: 5% 0 15%;
}
	
.bonds04 h2 {
	margin: -50px 0 0 10%;
}
	
	
	.bonds04 h2 img {
		width: 50%;
	}
	
	
	/*----------------------------------------------------
	☆Dream
----------------------------------------------------*/

h1.mvtDream {
	left: -3%;
}

h1.mvtDream.aos-animate {
	left: 7%;
}


#roadArea {
	background-position:3% top;
	margin: 0 auto;
	padding:0 0 100px;
}

	

	
.dreamLeft01,
.dreamRight01 {
	float:none;
	width:70%;
	margin-left:27%;
	margin-right:3%;
	text-align:right;
}




.dream02,
.dream03 {
	margin:60px 0 0 27%;
	text-align:right;
}

.mtDreamCon01 {
	margin: 40px 0 0;
}

.mtDreamCon02 {
	margin: 20px 0;
}


.dream02 p {
	margin: 0 0 40px 0;
	font-size:1.5rem;
	line-height:2.2;
}


.dream03 p {
	margin: 40px 0 0 0;
	font-size:1.5rem;
	width:140%;
	text-align:left;
	line-height:2.2;
}

.streetMasuda,
.street {
	position:absolute;
	top:0;
	left:0;
	text-align:left;
}

.streetMasuda img {
	width:20%;
}



.street img {
	width:32%;
}




/*スクロールマーカー*/
.scrollDown {
display: none;

}
	
	
	
	
}
/**/



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

.whitePara {
	font-size: 1.4rem;
	margin-top: 1.6em;
	line-height: 1.8;
}

#footerTop .ftInfoRight ul li {
    display: block;
    margin: 20px 0 ;
    text-align: center;
    font-size: 1.2rem;
    letter-spacing: 0;
}
		
a.btnLink {
		margin: 0.5em 0 0 0;
	}		
		
		.w39perRight {
    top: 6%;
}
		
		.w39perLeft {
    top: 6%;
}

}
/**/