@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　index
 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/
#Content {
    padding-top: 135px;
}


/* Kv
-----------------------------------------------------------------*/
#Kv{
/*	height: 71.875vw;*/
    height: 85vw;
	padding: 3.3854vw 0 0;
	background:url(../image/img_kv_pc.jpg) no-repeat center center;
	background-size: cover;
	color: #282828;
	text-align: center;
}
#Kv h1{
	margin-bottom: 1.56vw;
	font-size: 7.71vw;
	font-weight: normal;
	line-height: 1;
}
#Kv h1 small{
	font-size: 6.51vw;
}
#Kv h1 em{
	display: inline-block;
	transform: translateY(-0.3em);
	font-size: 4.166vw;
	margin: 0 -0.2em;
	font-style: normal;
}
#Kv h1 span{
	display: block;
	margin-bottom: 2.343vw;
}
#Kv h1 span img{
	width: 17.552vw;
}
#Kv .txt-area .txt-lead{
	margin-bottom: 2.343vw;
	font-size: 1.98vw;
	line-height: 1.4;
}
#Kv .txt-area .txt{
	font-size: 0.9375vw;
	line-height: 2.2;
}


/* point
-----------------------------------------------------------------*/
.point{
	padding: 160px 0 155px;
}
.point .inner{
	max-width: 1200px;
}
.point h2{
	min-height: 182px;
	margin-bottom: 170px;
	padding-top: 20px;
	background:url(../image/logo_intro.png) no-repeat center center;
	text-align: center;
	line-height: 1.6;
}
.point h2 small{
	display: block;
	font-size: 3.8rem;
}
.point h2 span{
	font-size: 5rem;
}
.point h2 sup{
	display: inline-block;
	font-size: 2rem;
	transform: translateY(-1em);
}
.point .cont02{
	margin-top: 165px;
}
.point .point-cont .layout-box h3{
	position: relative;
	max-width: 273px;
	width: 22.75%;
}
.point .cont01 h3::after{
	position: absolute;
	left: 50%;
	bottom: -70px;
	transform: translateX(-50%);
	display: block;
	width: 176px;
	height: 176px;
	content: "";
	background:url(../image/ico_times.svg) no-repeat;
	background-size: 100% auto;	
}
.point .point-cont .txt-area{
	max-width: 802px;
	width: 66.83%;
}
.point .point-cont .txt-lead{
	margin-bottom: 30px;
	line-height: 1.2;
	font-size: 4.6rem;
}
.point .point-cont .txt-lead span{
	color: #d2a616;
}
.point .point-cont .txt-lead strong{
	font-weight: normal;
	font-size: 8rem;
}
.point .point-cont .txt{
	margin-bottom: 35px;
	font-size: 1.6rem;
	line-height: 2.2;
}
.point .layout-list{
	display: flex;
	justify-content: space-between;
	margin: 70px 0 0;
}
.point .layout-list li{
	width: calc(50% - 0px);
	padding: 50px 20px 50px;
    text-align: center;
}
.point .layout-list li:nth-child(1){
	background: rgb(10, 69, 97);
}
.point .layout-list li:nth-child(2){
	background: rgb(185,154,52);
background: linear-gradient(337deg, rgba(185,154,52,1) 37%, rgba(210,166,22,1) 69%, rgba(217,182,69,1) 100%);
}

.point .layout-list h3{
	margin-bottom: 20px;
	padding-left: 28px;
/*	border-left: 1px solid #053e54;*/
	line-height: 1;
	color: #053e54;
}
.point .layout-list h3 .en{
	display: block;
	margin-bottom: 10px;
	font-size: 2.4rem;
}
.point .layout-list h3 .ja{
	font-size: 1.3rem;
}
.point .layout-list li:nth-child(1) h3{
	border-left-color: #d2a616;
}
.point .layout-list li:nth-child(1) h3 .en{
	color: #d2a616;
}
.point .layout-list li:nth-child(1) h3 .ja{
	color: #FFF;
}


/* green
-----------------------------------------------------------------*/
.green{
	padding: 95px 0 170px;
	background: url(../image/bg_green_pc.jpg) no-repeat;
	background-size: 100% 100%;
}
.green .layout-box{
	flex-direction: row-reverse;
	justify-content: flex-start;
	position: relative;
	margin-bottom: 45px;
	padding-bottom: 95px;
}
.green .layout-box h2{
	position: relative;
	z-index: 10;
	margin-left: 75px;
}
.green .layout-box .txt{
	position: relative;
	z-index: 10;
	color: #282828;
	font-size: 1.6rem;
	line-height: 3.125;
	writing-mode: vertical-rl;
}
.green .layout-box .txt span{
	display: inline-block;
	transform: rotate(-90deg);
}
.green .layout-box .txt span:first-of-type{
	margin-bottom: 10px;	
}
.green .layout-box .map{
	position: absolute;
	left: 0;
	bottom: 0;
}
.green .layout-box .map span{
    position: absolute;
    bottom: -30px; right: 0;
    color: #333;
    font-size: 1.1rem;
}
.green .spot-list li{
	display: flex;
	align-items: flex-end;
	width: 81.25%;
	color: #282828;
}
.green .spot-list li:nth-child(2){
	float: right;
	margin-top: 55px;
}
.green .spot-list .pic{
	flex-shrink: 0;
	width: 380px;
	margin-right: 7%;
}
.green .spot-list h3{
	margin-bottom: 10px;
	line-height: 1.4;
}
.green .spot-list h3 small{
	display: block;
	font-size: 1.6rem;
}
.green .spot-list h3 span{
	font-size: 2.4rem;
}
.green .spot-list .txt{
	font-size: 1.6rem;
	line-height: 2;
}



















/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {

	
	#Content {
			padding-top: 65px;
	}


/* Kv
-----------------------------------------------------------------*/
	#Kv{
		height: auto;
		padding: 45px 0 100vw;
		background:url(../image/img_kv_sp.jpg) no-repeat center bottom;
		background-size: cover;
	}
	#Kv h1{
		margin-bottom: 15px;
		font-size: 5.6rem;
	}
	#Kv h1 small{
		font-size: 4.8rem;
	}
	#Kv h1 em{
		transform: translateY(-0.3em);
		font-size: 3.1rem;
		margin: 0 -0.2em;
	}
	#Kv h1 span{
		margin-bottom: 15px;
	}
	#Kv h1 span img{
		width: 165px;
	}
	#Kv .txt-area{
		padding: 0 20px;
	}
	#Kv .txt-area .txt-lead{
		margin-bottom: 30px;
		font-size: 2.5rem;
		line-height: 1.5;
	}
	#Kv .txt-area .txt{
		font-size: 1.4rem;
		line-height: 2;
		text-align: justify;
	}


/* point
-----------------------------------------------------------------*/
	.point{
		padding: 80px 0 55px;
	}
	.point .inner{
		max-width: 1200px;
	}
	.point h2{
		min-height: 98px;
		margin-bottom: 80px;
		padding-top: 10px;
		background-size: 98px auto;
		line-height: 1.6;
	}
	.point h2 small{
		font-size: 2rem;
	}
	.point h2 span{
		font-size: 2.6rem;
	}
	.point h2 sup{
		font-size: 1.1rem;
	}
	.point .cont02{
		margin-top: 220px;
	}
	.point .point-cont{
		position: relative;
	}
	.point .point-cont .layout-box{
		display: block;
	}
	.point .point-cont .layout-box h3{
		position: static;
		max-width: none;
		width: auto;
		margin-bottom: 25px;
	}
	#Page .point .point-cont .layout-box h3 img{
		width: auto;
		height: 125px;
	}
	.point .cont01 h3::after{
		display: none;
	}
	.point .cont01::after{
		position: absolute;
		left: 50%;
		bottom: -180px;
		transform: translateX(-50%);
		display: block;
		width: 140px;
		height: 140px;
		content: "";
		background:url(../image/ico_times.svg) no-repeat;
		background-size: 100% auto;	
	}
	.point .point-cont .txt-area{
		max-width: none;
		width: 100%;
	}
	.point .point-cont .txt-lead{
		margin-bottom: 15px;
		font-size: 2.6rem;
	}
	.point .point-cont .txt-lead strong{
		font-size: 4.6rem;
	}
	.point .point-cont .txt{
		margin-bottom: 30px;
		font-size: 1.3rem;
		line-height: 2;
		text-align: justify;
	}
	.point .cont01 .pic{
		width: calc(100% + 20px);
	}
	.point .layout-list{
		display: block;
		margin: 20px 0 0;
	}
	.point .layout-list li{
		margin: 0 auto;
		width: 100%;
		padding: 15px 10px 18px;
	}
	.point .layout-list li:nth-child(n+2){
		margin-top: 20px;
	}
	.point .layout-list h3{
		margin-bottom: 15px;
		padding-left: 14px;
	}
	.point .layout-list h3 .en{
		margin-bottom: 5px;
		font-size: 1.8rem;
	}
	.point .layout-list h3 .ja{
		font-size: 1.1rem;
	}


/* green
-----------------------------------------------------------------*/
	.green{
		padding: 50px 0;
		background: url(../image/bg_green_sp.jpg) no-repeat;
		background-size: 100% 100%;
	}
	.green .layout-box{
		display: block;
		margin-bottom: 40px;
		padding-bottom: 0;
	}
	.green .layout-box h2{
		margin: 0 0 25px;
	}
	#Page .green .layout-box h2 img{
		width: auto;
		height: 150px;
	}
	.green .layout-box .txt{
		margin-bottom: 20px;
		font-size: 1.3rem;
		line-height: 2;
		writing-mode: inherit;
		text-align: justify;
	}
	.green .layout-box .txt span{
		display: inline;
		transform: none;
	}
	.green .layout-box .txt span:first-of-type{
		margin-bottom: 0;	
	}	
	.green .layout-box .map{
		position: static;
		width: calc(100% + 40px);
		margin-left: -20px;
	}
	.green .spot-list li{
		display: block;
		width: 100%;
	}
	.green .spot-list li:nth-child(2){
		margin-top: 40px;
	}
	.green .spot-list .pic{
		width: auto;
		margin: 0 0 15px;
	}
	.green .spot-list h3{
		margin-bottom: 10px;
		line-height: 1.6;
	}
	.green .spot-list h3 small{
		font-size: 1.3rem;
	}
	.green .spot-list h3 span{
		font-size: 2rem;
	}
	.green .spot-list .txt{
		font-size: 1.3rem;
		line-height: 2;
		text-align: justify;
	}


}