@charset "utf-8";
.page-content{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
.page-content .wrap{
	position : relative;
	display : block;
	width : 1240px;
	height : auto;
	margin : 0 auto;
}
.page-content .wrap{
	padding : 100px 0 0;
}
.page-content:last-of-type .wrap{
	padding-bottom : 200px;
}


.page-header{
	position : relative;
	display : block;
	width : 100%;
}
.page-header figure{
	position : relative;
	display : block;
	width : 100%;
	height : 100%;
}
.page-header figure img{
	position : relative;
	display : block;
	width : 100%;
	height : 100%;
	object-fit : cover;
	object-position : center bottom;
}
/* # =================================================================
#### normal
# ================================================================= */
.header-normal{
	height : 380px;
}
.header-normal h2.headline{
	right : auto;
	left : 10%;
}
/* # =================================================================
#### large-top
# ================================================================= */
.header-large-top{
	width : 90%;
	height : 650px;
	margin-top : 100px;
}
.header-large-top h2.headline{
	top : auto;
	right : auto;
	bottom : 20%;
	left : 8%;
}
.header-large-top h2.headline span{
	color : #4199B5;
}
.header-large-top .title{
	position : absolute;
	display : block;
	width : 80%;
	height : auto;
	top : -55px;
	right : auto;
	bottom : auto;
	left : 30px;
	margin : auto auto;
	z-index : 1;
}
.header-large-top .title img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}
/* # =================================================================
#### large-bottom
# ================================================================= */
.header-large-bottom{
	width : 90%;
	height : 650px;
	margin-top : 100px;
}
.header-large-bottom h2.headline{
	top : 15%;
	right : auto;
	bottom : auto;
	left : 8%;
}
.header-large-bottom .title{
	position : absolute;
	display : block;
	width : 80%;
	height : auto;
	top : auto;
	right : 0;
	bottom : -65px;
	left : auto;
	margin : auto auto;
}
.header-large-bottom .title img{
	position : relative;
	display : block;
	width : 100%;
	height : auto;
}





/* # =================================================================
#### campaign-top
# ================================================================= */
.header-campaign-top{
	width : 100%;
	height : auto;
	margin-top: 135px;
}
.header-campaign-top figure{
	width : 90%;
	margin : 0 auto;
}
.header-campaign-top h2.headline{
	display : none;
}
.header-campaign-top .title{
	position : absolute;
	display : block;
	width : 90%;
	height : auto;
	top : -90px;
	right : 0;
	bottom : 0;
	left : 0;
	margin : auto auto;
}
.header-campaign-top .title img{
	position : relative;
	display : block;
	width : 1000px;
	height : auto;
}



/* # =================================================================
#### responsive
# ================================================================= */
/* # =================================================================
#### 1600px
# ================================================================= */
@media screen and (max-width: 1600px){

.page-content .wrap{
	width : 90%;
	padding-left : 15px !important;
	padding-right : 15px !important;
}







}/*** 1600px ***/
/* # =================================================================
#### 1240px
# ================================================================= */
@media screen and (max-width: 1240px){
/* # =================================================================
#### normal
# ================================================================= */
.header-normal h2.headline{
	top : auto;
	right : auto;
	bottom : 40px;
	left : 0;
}
/* # =================================================================
#### large-top large-bottom
# ================================================================= */
.header-large-top,
.header-large-bottom{
	width : 100%;
	height : auto;
	margin-top : 0;
}
.header-large-top .title,
.header-large-bottom .title{
	position : relative;
	width : 75%;
	top : min(1.69vw, 21px);
	left : 15px;
	margin : 0;
}
.header-large-top h2.headline,
.header-large-bottom h2.headline{
	display : block;
	top : min(25vw, 200px);
	right : auto;
	bottom : auto;
	left : 0;
	margin : 0;
	z-index : 1;
}
.header-large-top figure,
.header-large-bottom figure{
	height : 600px;
}
.header-large-bottom{
	display : flex;
	flex-wrap : wrap;
}
.header-large-bottom .title{
	order : 1;
}
.header-large-bottom figure{
	order : 2;
}
/* # =================================================================
#### large-bottom plan
# ================================================================= */
.plan .header-large-bottom{
	width : 95%;
	height : auto;
	aspect-ratio : 16 / 9;
	margin-top : 80px;
}
.plan .header-large-bottom figure{
	order : 1;
	width : 100%;
	height : auto;
	border-radius : 0 25px 25px 0;
	overflow : hidden;
}
.plan .header-large-bottom .title{
	order : 2;
	top : 0;
	left : 0;
	margin : 0 0 0 auto;
}
.plan h2.headline {
	position : absolute;
	display : flex;
	justify-content : center;
	align-items : center;
	top : 20%;
	right : auto;
	bottom : auto;
	left : 5%;
	margin : auto auto;
	width : fit-content;
	line-height : 1;
}
.plan h2.headline span {
	position : relative;
	display : block;
	width : 100%;
	height : auto;
	border-radius : 0 50px 0 50px;
	background-color : #FFFFFFCC;
	text-align : center;
	color : #F25700;
	font-size : 20px;
	font-weight : bold;
	padding : 15px 30px;
}



}/*** 1240px ***/
/* # =================================================================
#### 1024px
# ================================================================= */
@media screen and (max-width: 1024px){

}/*** 1024px ***/
/* # =================================================================
#### 896px
# ================================================================= */
@media screen and (max-width: 896px){
.page-content .wrap{
	width : 100%;
	padding-top : 100px;
}
.page-content:last-of-type .wrap{
	padding-bottom : 100px;
}
}/*** 896px ***/
/* # =================================================================
#### 600px
# ================================================================= */
@media screen and (max-width: 600px){
.plan .header-large-bottom{
	margin-top : 50px;
}
.page-content .wrap{
	padding : 50px 0 0;
}
.page-content:last-of-type .wrap{
	padding-bottom : 150px;
}
.header-normal{
	height : auto;
	aspect-ratio : 16 / 9;
}
.header-large-top figure,
.header-large-bottom figure{
	height : 450px;
}





}/*** 600px ***/
/* # =================================================================
#### 480px
# ================================================================= */
@media screen and (max-width: 480px){

}/*** 480px ***/
/* # =================================================================
#### 320px
# ================================================================= */
@media screen and (max-width: 320px){

}/*** 320px ***/