@charset "UTF-8";
/* ------------------------------
固定ページ　私たちのブランドストーリー用css
------------------------------ */

/* --------------------------- brand-section01 */
.brand-section01{
	background:url(../img/brand_main_image_01.png) no-repeat 50% 100% ;
	background-size: cover;
	color: #fff;
	z-index: 1;
	height:calc(100vh - 65px);
	min-height: 760px;
	text-align: left;
	    max-width: 1180px;
    margin: auto;
    padding: 3%;
}
.brand-section01 .wrap{
	height:100%;
	max-width: 1180px;
}
.brand-section01 .main-title{
	padding: 18% 0 0 0;
	float: left;
	width: 50%;
}
.brand-section01 .main-read{
	width: 43%;
	padding: 18% 0 0 0;
	float: right;
}
.brand-section01 .main-read h3{
	line-height: 1.5;
	margin: 0 0 20px 0;
}
.brand-section01 .breadcrumb{
	margin-top:0px;
	position: absolute;
	left: 0%;
	bottom: 2%;
}
.brand-section01 .breadcrumb li a{
	color:#FFFFFF;
}
.brand-section01 .down-icon{
	position: absolute;
	left: 50%;
	bottom: 2%;
}

/* --------------------------- brand-section01 */
.brand-section02{
	background:url(../img/brand_main_image_02.png) no-repeat 50% 100% ;
	background-size: cover;
	color: #fff;
	z-index: 1;
	height:calc(100vh);
	text-align: left;
	    max-width: 1180px;
    margin: auto;
    padding: 3%;
}
.brand-section02 .wrap{
	height:100%;
	max-width: 1180px;
}
.brand-section02 .page-menu{
	list-style: none;
	font-weight: bold;
	text-align: left;
	position: absolute;
	top: 10%;
	right: 0%;
}
.brand-section02 .page-menu li{
	display: inline;
	margin-right:0.5em;
}
.brand-section02 .page-menu li a{
	color:#FFFFFF;
}
.brand-section02 .page-menu li.current span{
	text-decoration: underline;
}
.brand-section02 .page-menu li:after{
	content:'>';
	padding-left:0.5em;
}
.brand-section02 .page-menu li:last-child:after{
	content:' ';
}
.brand-section02 .content{
	width: 50%;
	position: absolute;
	top: 19%;
	left: 0%;
}
.brand-section02 .content h3{
	display: flex;
	align-items: center;
	margin: 0 1em 25px 0;
}
.brand-section02 .content h3:after {
	content: "";
	flex-grow: 1;
	height: 1px;
	background: #FFF;
	display: block;
}
.brand-section02 .content h3:after {
	margin-left: .4em;
}
.brand-section02 .content h4{
	line-height: 1.5;
	margin: 0 0 15px 0;
}
.brand-section02 .down-icon{
	position: absolute;
	left: 50%;
	bottom: 2%;
}

/* --------------------------- brand-section03 */
.brand-section03{
	background:url(../img/brand_main_image_03.png) no-repeat 50% 100% ;
	background-size: cover;
	color: #fff;
	z-index: 1;
	height:calc(100vh);
	text-align: left;
	    max-width: 1180px;
    margin: auto;
    padding: 3%;
}
.brand-section03 .wrap{
	height:100%;
	max-width: 1180px;
}
.brand-section03 .content{
	width: 44%;
	position: absolute;
	top: 19%;
	left: 0%;
}
.brand-section03 .content h3{
	display: flex;
	align-items: center;
	margin: 0 1em 25px 0;
}
.brand-section03 .content h3:after {
	content: "";
	flex-grow: 1;
	height: 1px;
	background: #FFF;
	display: block;
}
.brand-section03 .content h3:after {
	margin-left: .4em;
}
.brand-section03 .content h4{
	line-height: 1.5;
	margin: 0 0 15px 0;
}
.brand-section03 .down-icon{
	position: absolute;
	left: 50%;
	bottom: 2%;
}

/* --------------------------- brand-section04 */
.brand-section04{
	background:url(../img/brand_main_image_04.png) no-repeat 50% 100% ;
	background-size: cover;
	color: #fff;
	z-index: 1;
	height:calc(100vh);
	text-align: left;
	    max-width: 1180px;
    margin: auto;
    padding: 3%;
}
.brand-section04 .wrap{
	height:100%;
	max-width: 1180px;
}
.brand-section04 .content{
	width: 50%;
	position: absolute;
	top: 19%;
	right: 0%;
}
.brand-section04 .content h3{
	display: flex;
	align-items: center;
	margin: 0 1em 25px 0;
}
.brand-section04 .content h3:after {
	content: "";
	flex-grow: 1;
	height: 1px;
	background: #FFF;
	display: block;
}
.brand-section04 .content h3:after {
	margin-left: .4em;
}
.brand-section04 .content h4{
	line-height: 1.5;
	margin: 0 0 15px 0;
}
.brand-section04 .down-icon{
	position: absolute;
	left: 50%;
	bottom: 2%;
}

/* --------------------------- brand-section05 */
.brand-section05{
	background:url(../img/brand_main_image_05.png) no-repeat 50% 100% ;
	background-size: cover;
	color: #fff;
	z-index: 1;
	height:calc(100vh);
	text-align: left;
	    max-width: 1180px;
    margin: 0 auto 100px;
    padding: 3%;
}
.brand-section05 .wrap{
	height:100%;
	max-width: 1180px;
}
.brand-section05 .content{
	width: 44%;
	position: absolute;
	top: 19%;
	left: 0%;
}
.brand-section05 .content h3{
	display: flex;
	align-items: center;
	margin: 0 1em 25px 0;
}
.brand-section05 .content h3:after {
	content: "";
	flex-grow: 1;
	height: 1px;
	background: #FFF;
	display: block;
}
.brand-section05 .content h3:after {
	margin-left: .4em;
}
.brand-section05 .content h4{
	line-height: 1.5;
	margin: 0 0 15px 0;
}
.brand-section05 .down-icon{
	position: absolute;
	left: 50%;
	bottom: 2%;
}

/* --------------------------- brand-section06 */
.brand-section06{
	padding: 80px 0 90px;
}
.brand-section06 .icon{
	margin: 0 0 35px 0;
}
.brand-section06 h3{
	line-height: 1.5;
	margin: 0 0 15px 0;
}
.brand-section06 .morelink-blue p{
	margin: 35px 0 0 0;
}
.brand-section06 .morelink-blue p a{
	text-decoration: underline;
}
.brand-section06 .morelink-blue p a:after{
	content:'→';
	padding-left:0em;
}


/* ---------------------------------------------------------------------------- 

▼▼▼ ウィンドウサイズ1140px以下にのみ適用されるcss ▼▼▼

---------------------------------------------------------------------------- */
@media only screen and (max-width: 1140px) {

	.brand-section01{
		padding: 0 3%;
	}
	.brand-section02{
		padding: 0 3%;
	}
	.brand-section03{
		padding: 0 3%;
	}
	.brand-section04{
		padding: 0 3%;
	}
	.brand-section05{
		padding: 0 3%;
	}
	.brand-section06{
		padding: 80px 3%;
	}

}



/* ---------------------------------------------------------------------------- 

▼▼▼ ウィンドウサイズ768px以下にのみ適用されるcss ▼▼▼

---------------------------------------------------------------------------- */

@media screen and (max-width: 768px){
	
	.fullsize{
		margin-bottom:0px;
	}
	.brand-section01{
		height:calc(100vh - 40px);
	}
	.brand-section01 .main-title{
		padding: 6% 0 0 0;
		float: none;
		width: 100%;
	}
	.brand-section01 .main-title h2{
		font-size: 28px;
	}
	.brand-section01 .main-title p{
		font-size: 20px;
	}
	.brand-section01 .main-read{
		width: 100%;
		padding: 5% 0 0 0;
		float: none;
	}
	.brand-section01 .main-read h3{
		font-size: 20px;
	}
	.brand-section02 .content h3,
	.brand-section03 .content h3,
	.brand-section04 .content h3
	.brand-section05 .content h3{
		font-size: 20px;
	}
	.brand-section02 .content h4,
	.brand-section03 .content h4,
	.brand-section04 .content h4,
	.brand-section05 .content h4
	{
		font-size: 24px;
	}
	.brand-section02 .content p,
	.brand-section03 .content p,
	.brand-section04 .content p,
	.brand-section05 .content p
	{
		font-size: 12px;
	}
	.brand-section01 .down-icon img,
	.brand-section02 .down-icon img,
	.brand-section03 .down-icon img,
	.brand-section04 .down-icon img
	{
		width: 30px;
	}
	.brand-section02{
		height:calc(100vh);
	}
	.brand-section02 .page-menu{
		top: 5%;
		left: 0%;
	}
	.brand-section02 .page-menu li{
		display: block;
		line-height: 1.5;
	}
	.brand-section02 .page-menu li:before{
		content: "・";
	}
	.brand-section02 .page-menu li:after{
		content:'';
	}
	.brand-section02 .content{
		width: 100%;
		position: absolute;
		top: 7%;
		left: 0%;
	}
	.brand-section03{
		height:calc(100vh);
	}
	.brand-section03 .content{
		width: 100%;
		top: 7%;
	}
	.brand-section04{
		height:calc(100vh);
	}
	.brand-section04 .content{
		width: 100%;
		top: 7%;
	}
	.brand-section05{
		height:calc(100vh);
	}
	.brand-section05 .content{
		width: 100%;
		top: 7%;
	}
	.brand-section06{
		padding: 20px 3%;
	}
	.brand-section06 .icon{
		margin: 0 0 20px 0;
	}
	.brand-section06 .icon img{
		max-width: 20%;
	}
	.brand-section06 h3{
		font-size: 24px;
	}
	.brand-section06 h3{
		font-size: 12px;
	}
	.brand-section06 .morelink-blue p{
		font-size: 14px;
		margin: 20px 0 0 0;
	}
	
}