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

#Page__level2.stage .HeadingPrimary .Heading,
#Page__level2.style .HeadingPrimary .Heading{
	margin: 0;
	padding-bottom:0.2em;
	border-bottom:1px solid;
	border-color:var(--kblue);
	
	color:var(--kblue);
	font-size: 60px;
	font-weight: 800;
	letter-spacing: 0;
	text-align: center;
} 
#Page__level2.stage .HeadingPrimary  .Heading__sub,
#Page__level2.style .HeadingPrimary .Heading__sub{
	display: block;
	font-size: 18px;
	font-weight: 400;
} 
#Page__level2.stage .HeadingPrimary .Text,
#Page__level2.style .HeadingPrimary .Text{
	font-size: 20px;
	line-height: 30px;
	font-weight: 700;
	text-align: center;
	color:#333;
	margin: 1em auto 0 auto;
} 
	@media only screen and (max-width: 559px) {
		#Page__level2.stage .HeadingPrimary .Text,
		#Page__level2.style .HeadingPrimary .Text{
			font-size: 16px;
			line-height: 24px;
		} 
	}
#Page__level2.stage .Section__heading,
#Page__level2.style .Section__heading{
max-width:1300px;
display: block;
margin: 0 auto 0 auto;
padding: 0 100px;
background: #FFF;
} 
	@media only screen and (min-width: 560px) and (max-width: 959px) {
		#Page__level2.stage .Section__heading,
		#Page__level2.style .Section__heading{
		padding: 0 5rem;
		}
	}
	@media only screen and (max-width: 559px) {
	   #Page__level2.stage .Section__heading,
		#Page__level2.style .Section__heading{
		padding: 0 2rem;
		/*margin-bottom: 20px;*/
		}
	}
#Page__level2.stage .Section__heading h2,
#Page__level2.style .Section__heading h2{
	color: var(--kblue-deep);
	font-size: 2rem;
	 background: #FFF;
	 margin: 0;
}
	@media only screen and (min-width: 560px) and (max-width: 959px){
		#Page__level2.stage .Section__heading h2,
		#Page__level2.style .Section__heading h2{
		font-size: 1.8rem;
		}
	}
	@media only screen and (max-width: 559px) {
		#Page__level2.stage .Section__heading h2,
		#Page__level2.style .Section__heading h2{
		font-size: 1.6rem;
		}
	}



/*______Stage______*/
.StageTopCard{
width:100%;
height: auto;
margin:0;
background:var(--kblue);
position: relative;
border-bottom:10px solid;
border-color:var(--kblue);

color:#FFF;

display: flex;
justify-content: flex-end;
align-items: flex-start;
position: relative;
}
	@media only screen and (max-width: 959px) {
	   .StageTopCard{
		flex-direction: column-reverse;
		justify-content: center;
		padding-bottom:1.5em;
		}
	}
.StageTopCard.-Card02{
justify-content: flex-start;
color:#222;
}
.StageTopCard.-Card03{
justify-content: space-between;
}
.StageTopCard.-Card04{
color:#222;
}

.StageTopCard:nth-child(even){
background:#cccccc;
border-color:#cccccc;
}
.StageTopCard:first-child{
margin-top:60px;
}
	@media only screen and (min-width: 560px) and (max-width: 959px) {
		.StageTopCard:first-child{
		margin-top:40px;
		}
	}
	@media only screen and (max-width: 559px) {
	   .StageTopCard:first-child{
		margin-top:30px;
		}
	}
/*.StageTopCard a{
width:100%;
color:#FFF;
position: relative;

display: flex;
justify-content: flex-end;
align-items: flex-start;
position: relative;
}
	@media only screen and (max-width: 959px) {
	   .StageTopCard a{
		flex-direction: column-reverse;
		justify-content: center;
		padding-bottom:1.5em;
		}
	}
.StageTopCard.-Card02 a{
justify-content: flex-start;
color:#222;
}
.StageTopCard.-Card03 a{
justify-content: space-between;
}
.StageTopCard.-Card04 a{
color:#222;
}
.StageTopCard a:hover{
opacity: 0.7;
}
*/
.StageTopCard__Image{
width:55%;
width:calc(100% - 460px);
max-width:calc((100% - 1100px)/2 + 740px);
max-height: 700px;
position: relative;
z-index: 1;
}
	@media only screen and (min-width: 560px) and (max-width: 959px) {
		.StageTopCard__Image{
		width:100%;
		max-width: 100%;
		margin: 1.5em auto 0 auto;
		padding: 0 50px;
		position: relative;
		z-index: 1;
		}
	}
	@media only screen and (max-width: 559px) {
	   .StageTopCard__Image{
		width:100%;
		max-width: 100%;
		margin: 1.5em auto 0 auto;
		padding: 0 20px;
		position: relative;
		z-index: 1;
		}
	}
.-Card03 .StageTopCard__Image{
display: none;
}
	@media only screen and (max-width: 959px) {
	   .-Card03 .StageTopCard__Image{
		display: block;
		}
	}
.StageTopCard__Image01{
width:15.45%;
max-height: 700px;
position: relative;
z-index: 1;
}
.StageTopCard__Image02{
width:41%;
max-height: 700px;
position: relative;
z-index: 1;
}
	@media only screen and (max-width: 959px) {
	   .StageTopCard__Image01,
		.StageTopCard__Image02{
		display: none;
		}
	}
.StageTopCard__Image img,
.StageTopCard__Image01 img,
.StageTopCard__Image02 img{
width:100%;
max-height: 700px;
object-fit: cover; 
object-position: center;
}
	@media only screen and (min-width: 560px) and (max-width: 959px) {
		.StageTopCard__Image img{
		max-height: 460px;
		}
	}
	@media only screen and (max-width: 559px) {
	   .StageTopCard__Image img{
		max-height: 260px;
		}
	}
.StageTopCard_body{
width:100%;
height: 100%;
position: absolute;
left:0;
top:0;
z-index: 2;
}
	@media only screen and (min-width: 560px) and (max-width: 959px) {
		.StageTopCard_body{
		height: auto;
		position: relative;
		padding-top:30px;
		}
	}
	@media only screen and (max-width: 559px) {
	   .StageTopCard_body{
		height: auto;
		position: relative;
		padding-top:30px;
		}
	}
.StageTopCard .SiteContent__sectionInner{
height: 100%;
display: flex;
flex-direction: column;
align-items:  flex-start;
justify-content:center;
}
	@media only screen and (min-width: 560px) and (max-width: 959px) {
		.StageTopCard .SiteContent__sectionInner{
		height: auto;
		display: block;
		}
	}
	@media only screen and (max-width: 559px) {
	   .StageTopCard .SiteContent__sectionInner{
		height: auto;
		display: block;
		}
	}
.StageTopCard.-Card02 .SiteContent__sectionInner{
height: 100%;
display: flex;
flex-direction: column;
align-items:  flex-end;
justify-content:center;
}
	@media only screen and (max-width: 959px) {
	  .StageTopCard.-Card02 .SiteContent__sectionInner{
		height: auto;
		display: block;
		}
	}
.StageTopCard.-Card03 .inner{
margin-left: 15%;
}
	@media only screen and (max-width: 959px) {
	  .StageTopCard.-Card03 .inner{
		margin-left: 0;
		}
	}
.StageTopCard_body .Heading{
width: 390px;
font-size: 42px;
font-weight: 600;
border-bottom:2px solid #CCC;
}
	@media only screen and (min-width: 560px) and (max-width: 959px) {
		.StageTopCard_body .Heading{
		width: 100%;
		font-size: 36px;
		}
	}
	@media only screen and (max-width: 559px) {
	   .StageTopCard_body .Heading{
		width: 100%;
		font-size: 30px;
		}
	}
.StageTopCard.-Card02 .StageTopCard_body .Heading{
border-bottom:2px solid #00a8a9;
padding-left: 60px;
}
	@media only screen and (max-width: 959px) {
	   .StageTopCard.-Card02 .StageTopCard_body .Heading{
		padding-left: 0;
		}
	}
.StageTopCard.-Card04 .StageTopCard_body .Heading{
border-bottom:2px solid #00a8a9;
}
.StageTopCard_body .Text__catch{
margin-top:1em;
font-weight: 600;
}
.StageTopCard_body .Text.-small{
margin-top:3em;
}
.StageTopCard.-Card02 .StageTopCard_body .Text__catch,
.StageTopCard.-Card02 .StageTopCard_body .Text.-small{
padding-left: 60px;
}
	
	@media only screen and (max-width: 959px) {
	   .StageTopCard.-Card02 .StageTopCard_body .Text__catch,
		.StageTopCard.-Card02 .StageTopCard_body .Text.-small{
		padding-left: 0;
		}
	}

/*______Style______*/
.StyleTopCard{
width:100%;
position: relative;
margin-top:60px;
padding-bottom:10px;
}
	@media only screen and (min-width: 560px) and (max-width: 959px){
		.StyleTopCard{
		margin-top:40px;
		}
	}
	@media only screen and (max-width: 559px) {
		.StyleTopCard{
		margin-top:40px;
		}
	}
.StyleTopCard__Image{
width:100%;
position: relative;
}
.StyleTopCard__Image .Image{
position: relative;
z-index: 1;
}
.StyleTopCard__Image .Image img{
width:100%;
max-height: 600px;
object-fit: cover; 
object-position: top;
}
.StyleTopCard__Image .Heading__wrap{
position: absolute;
width:100%;
height: 100%;
left: 0;
top:0;
z-index: 2;

display: flex;
justify-content: center;
align-items:center; 
}
.StyleTopCard__Image .Heading{
font-size: 50px;
font-weight: 700;
text-align: center;
color:#FFF;
padding:90px 20px 0 20px;
}
	@media only screen and (min-width: 560px) and (max-width: 959px){
		.StyleTopCard__Image .Heading{
		font-size: 40px;
		line-height: 50px;
		padding:50px 50px 0 50px;
		}
	}
	@media only screen and (max-width: 559px) {
		.StyleTopCard__Image .Heading{
		font-size: 30px;
		line-height: 36px;
		padding:40px 20px 0 20px;
		}
	}
.StyleTopCard_body{
max-width:680px;
margin: 35px auto 0 auto;
}
	@media only screen and (min-width: 560px) and (max-width: 959px){
		.StyleTopCard_body{
		margin-top:25px;
		}
	}
	@media only screen and (max-width: 559px) {
		.StyleTopCard_body{
		margin-top:20px;
		}
	}
.StyleTopCard_body .Text__catch{
font-size: 18px;
line-height: 26px;
font-weight: 600;
color:#222;
}
	@media only screen and (min-width: 560px) and (max-width: 959px){
		.StyleTopCard_body .Text__catch{
		font-size: 16px;
		line-height: 22px;
		}
	}
	@media only screen and (max-width: 559px) {
		.StyleTopCard_body .Text__catch{
		font-size: 16px;
		line-height: 22px;
		}
	}

.StyleTopCard_body .Link__list{
margin-top:1em;
}
.StyleTopCard_body .Link__list li{
display: inline-block;
position: relative;
padding-left:1em;
padding-right: 0.5em;
margin-right: 0.5em;
border-right:1px solid #ccc;
font-size: 12px;
}
	@media only screen and (max-width: 559px) {
		.StyleTopCard_body .Link__list li{
		border-right:none;
		}
	}
.StyleTopCard_body .Link__list li::before{
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);  
border: 5px solid transparent;
border-left: 8px solid #4ba5a8; 
}
.StyleTopCard_body .Link__list li:last-child{
border-right:none;
}


.StyleTopCard_body .Link__list li:last-child{
border-right:none;
}



.StageStyle__more{
border-bottom: 1px solid;
border-color: var(--kblue);
margin-top:150px;
text-align: center;
}
	@media only screen and (min-width: 560px) and (max-width: 959px) {
		.StageStyle__more{
		margin-top:100px;
		}
	}
	@media only screen and (max-width: 559px) {
	   .StageStyle__more{
		margin-top:60px;
		}
	}
.StageStyle__more .Text__shoulder{
font-size: 14px;
line-height: 20px;
font-weight: 600;
color:#222;
}
.StageStyle__more .heading{
margin-top:0.2em;
padding-bottom: 0.5em;
font-size: 24px;
color: var(--kblue);
}
.StageStyle__more .heading a{
color: var(--kblue);
}
.StageStyle__more .heading a:hover{
opacity: 0.7;
}
.StageStyle__more .heading span{
position: relative;
padding-left: 15px;
margin-left: 0.5em;
display: inline-block;
font-size: 40px;
font-weight: 700;
}

	@media only screen and (max-width: 559px) {
	   .StageStyle__more .heading span{
		padding-right: 15px;
		margin-right: 0.5em;
		}
	}
.StageStyle__more .heading span::before{
content: "";
position: absolute;
top: 50%;
left: 0;
transform: translateY(-50%);  
border: 8px solid transparent;
border-left: 12px solid #4ba5a8; 
}