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

/*//////////----- BREADCRUMB -----//////////*/

#breadcrumb{
	background-color:#fafafa;
	color:#212121;
	
	width:100%;
}

#breadcrumb ul{
	width:100%;
	margin:0 auto;
	max-width: 960px;
	
	box-sizing: border-box;
	padding:0 25px;
	
	display:flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: flex-start;
}

#breadcrumb ul li{
	display:block;
	
	font-size:1.0rem;
	line-height:30px;
	
	width:auto;
	
	box-sizing: border-box;
	padding-right:15px;
	
	position: relative;
}

#breadcrumb ul li:after{
	display:block;
	content:"";
	
	width:5px;
	height:1px;
	
	background-color:#212121;
	
	position: absolute;
	top:0;
	right:5px;
	bottom:0;
	
	margin:auto;
}

#breadcrumb ul li:last-child:after{
	display:none;
}

#breadcrumb ul li a{
	display:block;
	color:#212121;
	
	transition:0.25s;
}

#breadcrumb ul li a:hover{
	color:#ff934c;
}

@media only screen and (min-width: 960px){
	
	#breadcrumb ul li{
		font-size:0.6rem;
		line-height:50px;
	}
	
}

/*//////////----- PAGE-HEADER -----//////////*/

.page-header{
	width:100%;
	height:180px;
	
	background-color:#fff;
	color:#212121;
	
	position: relative;
}

.page-header span.cover{
	display:block;
	
	width:50%;
	height:100%;
	
	background-color:#000;
	
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center right;
	
	position: absolute;
	top:0;
	right:0;
}

.page-header span.cover:after{
	display:block;
	content:"";
	
	width:0;
	height:100%;
	
	/*background-color:#fff;*/
	
	position: absolute;
	top:0;
	left:0;
	
	box-sizing: border-box;
	border-left: 30px solid #fff;
	border-bottom: 180px solid transparent;
}

.page-header div.inner{
	display:flex;
	flex-flow: row wrap;
	align-items: center;
	justify-content: flex-start;
	
	width:100%;
	height:100%;
	margin:0 auto;
	max-width: 960px;
	
	box-sizing: border-box;
	padding:0 15px;
	
	/*background-color:#000;*/
}

.page-header h2{
	font-size:3.6rem;
	line-height:40px;
	color:#ff934c;
	
	/*background-color:#000;*/
}

.page-header p.note{
	font-size:1.8rem;
	line-height:40px;
	
	/*background-color:#f00;*/
}

.page-header p.page-caption-pc{
	display:none;
	
	font-size:1.0rem;
	line-height:2.0em;
	
	margin-top:20px;
}

@media only screen and (min-width: 960px){
	
	.page-header{
		height:360px;
	}
	
	.page-header span.cover:after{
		border-left: 60px solid #fff;
		border-bottom: 360px solid transparent;
	}
	
	.page-header div.inner{
		padding:0 25px;
	}
	
	.page-header h2{
		font-size:3.0rem;
		line-height:70px;
	}
	
	.page-header p.note{
		font-size:1.2rem;
		line-height:45px;
	}

	.page-header p.page-caption-pc{
		display:block;
	}
}

@media only screen and (min-width: 1440px){
	
	.page-header{
		height:480px;
	}
	
	.page-header span.cover:after{
		border-left: 60px solid #fff;
		border-bottom: 480px solid transparent;
	}
	
}

@media only screen and (min-width: 1920px){
	
	.page-header{
		height:560px;
	}
	
	.page-header span.cover:after{
		border-left: 60px solid #fff;
		border-bottom: 560px solid transparent;
	}
	
}

.page-caption-sp{
	display:block;
	
	text-align: center;
	
	font-size:1.8rem;
	line-height:1.5em;
	
	box-sizing: border-box;
	padding:20px 0;
}

@media only screen and (min-width: 960px){
	
	.page-caption-sp{
		display:none;
	}
	
}

/*//////////----- CHILD-HEADER -----//////////*/

.child-header{
	width:100%;
	margin:0 auto;
	max-width: 960px;
	
	box-sizing: border-box;
	padding:20px 0;
	
	/*background-color:#f0f0f0;*/
}

.child-header h3{
	font-size:2.6rem;
	line-height:30px;
	
	position: relative;
}

.child-header h3:before{
	display:block;
	content:"";
	
	width:60px;
	height:5px;
	
	background:linear-gradient(left, #ff934c 0%, #fc686f 100%);
	background: -webkit-linear-gradient(left, #ff934c 0%, #fc686f 100%);
	background: -moz-linear-gradient(left, #ff934c 0%, #fc686f 100%);
	background: -o-linear-gradient(left, #ff934c 0%, #fc686f 100%);
	background: -ms-linear-gradient(left, #ff934c 0%, #fc686f 100%);
	
	position: absolute;
	top:-20px;
	left:2.5px;
	
	transform:skewX(-30deg);
}

.child-header p.note{
	font-size:1.6rem;
	line-height:30px;
}

@media only screen and (min-width: 960px){
	
	.child-header{
		padding:40px 0;
	}
	
	.child-header h3{
		font-size:2.2rem;
		line-height:60px;
	}
	
	.child-header h3:before{
		width:120px;
		height:10px;
		
		top:-40px;
		left:5px;
	}
	
	.child-header p.note{
		font-size:1.2rem;
		line-height:40px;
	}
	
}