@charset "utf-8";

/**
 *
 *  ページ用CSS
 *　index
 */

/*--------------------------------------------------------------------------
   Overwright
---------------------------------------------------------------------------*/

/*--------------------------------------------------------------------------
   Content
---------------------------------------------------------------------------*/

/* Kv
-----------------------------------------------------------------*/
#Kv{
	height: 500px;
	padding-top: 120px;
	background: url(../image/bg_kv_pc.jpg) no-repeat center top;
	background-size: cover;
	text-align: center;
}
#Kv h1{
	margin-bottom: 30px;
}
#Kv .txt-lead{
	font-size: 1.8rem;
	font-weight: 500;
	color: #FFF;
	line-height:2.4;
  text-shadow:0 0 10px #3B79C7;
}
#Kv+.breadcrumb{
	padding:15px 30px;
	margin-bottom: 	45px; 
}

.page-nav{
	padding: 100px 0 170px;
}
.page-nav ul li{
	margin-bottom: 20px;
}
.page-nav ul li a{
	width: 470px;
	letter-spacing: 0;
}

/* theme
-----------------------------------------------------------------*/
.theme{
	position: relative;
	padding: 135px 0;
	text-align: center;
}
.theme h2.sec-center-ttl{
	line-height: 1.5;
	top: 2.1em;
}
.theme h2+.txt{
	margin-bottom: 50px;
	font-weight: bold;
	font-size: 1.8rem;
	line-height: 2.1;
}



/* sdgs
-----------------------------------------------------------------*/
.sdgs{
	padding: 135px 0 150px;
}
.sdgs h2{
	margin-bottom: 95px;
}
.sdgs .cont-intro-base{
	margin-bottom: 105px;
}
.sdgs .cont-intro-base > .layout-box .txt-area {
    background: #E9F6FE;
}
.sdgs .widebg-cont{
	padding: 95px 0 100px;
}
.sdgs .widebg-cont::before {
    background: #E9F6FE;
}
.sdgs .widebg-cont h2{
	margin-bottom: 30px;
	text-align: center;
	font-size: 3.6rem;
	color: #0068BA;
}
.sdgs .widebg-cont h2+.txt{
	font-size: 1.8rem;
	text-align: center;
}
.sdgs .sec-feature-item {
    padding: 50px 0;
}
.feature-item-nav li:nth-child(1):hover, 
.feature-item-nav li:nth-child(1).current {
    color: #009844;
    border-bottom-color: #009844;
}
.feature-item-nav._upper li:nth-child(1):hover::after,
.feature-item-nav._upper li:nth-child(1).current::after{
	border-top-color: #009844;
}
.feature-item-nav._bottom li:nth-child(1):hover::after,
.feature-item-nav._bottom li:nth-child(1).current::after{
	border-bottom-color: #009844;
}

.feature-item-nav li:nth-child(2):hover, 
.feature-item-nav li:nth-child(2).current {
    color: #F28900;
    border-bottom-color: #F28900;
}
.feature-item-nav._upper li:nth-child(2):hover::after,
.feature-item-nav._upper li:nth-child(2).current::after{
	border-top-color: #F28900;
}
.feature-item-nav._bottom li:nth-child(2):hover::after,
.feature-item-nav._bottom li:nth-child(2).current::after{
	border-bottom-color: #F28900;
}

.feature-item-nav li:nth-child(3):hover, 
.feature-item-nav li:nth-child(3).current {
    color: #FE5252;
    border-bottom-color: #FE5252;
}
.feature-item-nav._upper li:nth-child(3):hover::after,
.feature-item-nav._upper li:nth-child(3).current::after{
	border-top-color: #FE5252;
}
.feature-item-nav._bottom li:nth-child(3):hover::after,
.feature-item-nav._bottom li:nth-child(3).current::after{
	border-bottom-color: #FE5252;
}

.sdgs-cont-box{
	padding: 65px 5%;
	border-radius: 10px;
	background: #FFF;
}
.sdgs-cont-box+.sdgs-cont-box{
	margin-top: 70px;
}
.sdgs-cont-box .layout-box._rev{
	flex-direction: row-reverse;
}
.sdgs-cont-box .layout-box+.layout-box{
	margin-top: 60px;
}
.sdgs-cont-box h3{
	margin-bottom: 35px;
	text-align: center;
}
.sdgs-cont-box h3 .ja{
	display: block;
	font-size: 2.8rem;
}
.sdgs-cont-box h3 .en{
	font-size: 1.6rem;
}
.sdgs-cont-box .pic{
	max-width: 540px;
	width: 51.5%;
}
.sdgs-cont-box .pic img{
	border-radius: 10px;
}
.sdgs-cont-box .pic .caption{
	display: block;
	margin-top: 5px;
	font-size: 1.3rem;
	text-align: right;
}
.sdgs-cont-box .txt-area{
	max-width: 460px;
	width: 44.02%;
}
.sdgs-cont-box .txt-area .txt{
	font-size: 1.7rem;
	line-height: 2;
}
.sdgs-cont-box .txt-area .btn-ico-base{
	margin-top: 30px;
}
.sdgs-cont-box .txt-area .btn-ico-base+.btn-ico-base{
	margin-top: 20px;
}
.sdgs-cont-box .txt-area .btn-ico-base a{
	letter-spacing: 0;
}

.sdgs-mark{
	margin-bottom: 15px;
}
.sdgs-mark span{
	display: inline-block;
	max-width:60px;
	margin:0 3px 5px 0;
}

.area-cont > h3{
	margin-bottom: 20px;
	text-align: center;
	font-size: 2.8rem;
	color: #0068BA;	
}

.other-sdgs{
	margin-top: 85px;
}
.other-sdgs h3{
	margin-bottom: 20px;
	text-align: center;
	font-size: 2.8rem;
	color: #0068BA;		
}
.other-sdgs-list{
	display: flex;
	flex-wrap:wrap;
}
.other-sdgs-list li{
	max-width: 380px;
	width: calc((100% - 60px)/3);
	margin-left: 30px;
	padding-bottom: 40px;
	background: #FFF;
	border-radius: 10px;
	overflow: hidden;
}
.other-sdgs-list li:nth-child(3n+1){
	margin-left: 0;
}
.other-sdgs-list li:nth-child(n+4){
	margin-top: 30px;
}
.other-sdgs-list .pic{
	margin-bottom: 18px;
	transition: .3s;
}
.other-sdgs-list .sdgs-mark{
	padding: 0 6%;
}
.other-sdgs-list .sdgs-mark span{
	max-width: 50px;
}
.other-sdgs-list .txt{
	padding: 0 6%;
	font-weight: bold;
	font-size: 1.8rem;
}
.other-sdgs-list a:hover .pic{
	opacity: .7;
}

.bnr-area{
	max-width: 1200px;
	height: 234px;
	margin: 160px auto 0; 
}
.bnr-area a{
	background-image:url(../image/bg_bnr_sdgs_pc.jpg);
	line-height:1.3;
}
.bnr-area a[target="_blank"] span{
	padding-right: 0;
	background-position: right 0.3em bottom 0.5em;
}

/* .sdgs-cont01 */
.sdgs01{
	display: block;
}
.sdgs01 .box01_03{
	margin-bottom: 80px;
}
.sdgs01 .box01_04{
	padding: 45px 4%;
}
.sdgs01 .box01_04 .pic{
	flex-shrink: 0;
	margin-left: 15px;
	max-width: 300px;
	width: auto;
}
.sdgs01 .box01_04 .pic img{
	border: 1px solid #0068BA;
}
.sdgs01 .box01_04 .txt-area{
	max-width:785px;
	width: auto;
}
.sdgs01 .box01_04 h4{
	font-size: 2.2rem;
}

/* .sdgs-cont03 */
.sdgs03 .box03_01 .en{
	text-transform:none;
}
.sdgs03 .txt-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	margin-top: 40px;
}
.sdgs03 .txt-list > div{
	width: calc(50% - 10px);
	padding:30px 4%;
	background: #F8F8F8;
	border-radius: 10px;
}
.sdgs03 .txt-list > div:nth-child(n+3){
	margin-top: 25px;
}
.sdgs03 .txt-list dt{
	margin-bottom: 3px;
	font-size: 1.8rem;
	font-weight: bold;
}
.sdgs03 .txt-list dd{
	font-size: 1.8rem;
	line-height: 1.6;
}

/* modal
-----------------------------------------------------------------*/
.sdgs-modal{
	display: none;
}
.sdgs-modal-cont{
	max-width: 910px;
	width: 100%;
	margin: 0 auto;
	padding: 70px 8%; 
	background: #FFF;
	border-radius: 10px;
}
.sdgs-modal-cont > h3{
	margin-bottom: 20px;
	font-size: 2.2rem;
	line-height: 1.4;
	text-align: left;
}
.sdgs-modal-cont .sdgs-mark{
	margin-bottom: 0;
    text-align: left;
}
.sdgs-modal-cont .sdgs-mark span{
	display: inline-block;
	max-width:65px;
	margin:0 15px 20px 0;
}
.sdgs-modal-cont .pic-area{
	display: flex;
	justify-content: space-between;
	max-width: 670px;
	margin: 0 auto 25px;
}
.sdgs-modal-cont .pic+.pic{
	margin-left: 10px;
}
.sdgs-modal-cont .pic img{
	border-radius: 10px;
}
.sdgs-modal-cont .pic.photo1{
	width: 80%;
    margin: 0 auto;
}
.sdgs-modal-cont .pic .caption{
	display: block;
	margin-top: 3px;
	text-align: right;
	letter-spacing: 0;
	font-size: 1.3rem;
}
.sdgs-modal-cont .txt{
	margin-bottom: 25px;
	font-size: 1.7rem;
	text-align: left;
}
.sdgs-modal-cont .btn-sdgs-modal-close{
	max-width: 200px;
	margin: 0 auto;
	cursor: pointer;
	transition: .3s;
}
.sdgs-modal-cont .btn-sdgs-modal-close:hover{
	opacity: .7;
}

.sdgs-modal-cont.sdgs-modal02_01 .pic .caption{
	position: absolute;
	left: 50%;
	transform: translateX(-3.5em);
}



/*--------------------------------------------------------------------------
   mobile
---------------------------------------------------------------------------*/
@media screen and (max-width: 768px) {

/* Kv
-----------------------------------------------------------------*/
	#Kv{
		height: 145.066vw;
		padding-top: 75px;
		background-image:url(../image/bg_kv_sp.jpg);
	}
	#Kv h1{
		width: 78vw;
		margin: 0 auto 25px;
	}
	#Kv .txt-lead{
		font-size: 1.3rem;
		line-height:2;
	}
	#Kv+.breadcrumb{
		display: none;
	}
	
	.page-nav{
		padding: 45px 0 60px;
	}
	.page-nav ul li{
		margin-bottom: 15px;
	}
	.page-nav ul li a{
		width: 315px;
	}
	.page-nav ul li:nth-child(1) a{
		padding-top: 10px;
		height: 55px;
		border-radius: 30px;
		line-height: 1.4;
	}
	.page-nav ul li:nth-child(1) a span::before,
	.page-nav ul li:nth-child(1) a:hover span::before {
    top: 17px;
	}
	
/* theme
-----------------------------------------------------------------*/
	.theme{
		position: relative;
		padding: 110px 0 80px;
		text-align: center;
	}
	.theme h2.sec-center-ttl{
		top: 3.2em;
		line-height: 1.3;
	}
	.theme h2+.txt{
		margin-bottom: 30px;
		font-size: 1.3rem;
		line-height: 2;
	}
	.theme .figure{
		max-width: 460px;
		margin: 0 auto;
	}


/* sdgs
-----------------------------------------------------------------*/
	.sdgs{
		padding: 70px 0 80px;
	}
	.sdgs h2{
		margin-bottom: 45px;
	}
	.sdgs .cont-intro-base{
		margin-bottom: 80px;
	}
	.sdgs .widebg-cont{
		padding: 45px 0 70px;
		background: #E9F6FE;
	}
	.sdgs .widebg-cont h2{
		margin-bottom: 20px;
		font-size: 2.1rem;
	}
	.sdgs .widebg-cont h2+.txt{
		font-size: 1.5rem;
	}
	.sdgs .feature-item-nav li {
		line-height:1.2;
	}
	.sdgs .sec-feature-item {
			padding: 25px 0;
	}
	
	.sdgs-cont-box{
		padding: 35px 20px 40px;
		border-radius: 10px;
		background: #FFF;
	}
	.sdgs-cont-box+.sdgs-cont-box{
		margin-top: 45px;
	}
	.sdgs-cont-box .layout-box{
		display: block;
	}
	.sdgs-cont-box .layout-box+.layout-box{
		margin-top: 40px;
	}
	.sdgs-cont-box h3{
		margin-bottom: 20px;
		line-height: 1.5;
	}
	.sdgs-cont-box h3 .ja{
		font-size: 1.9rem;
	}
	.sdgs-cont-box h3 .en{
		font-size: 1.1rem;
	}
	.sdgs-cont-box .pic{
		max-width: 540px;
		width: 100%;
		margin: 0 auto 15px;
	}
	.sdgs-cont-box .pic img{
		border-radius: 5px;
	}
	.sdgs-cont-box .pic .caption{
		margin-top: 3px;
		font-size: 1rem;
	}
	.sdgs-cont-box .txt-area{
		max-width: 540px;
		width: 100%;
		margin: 0 auto;
	}
	.sdgs-cont-box .txt-area .txt{
		font-size: 1.3rem;
		line-height: 1.8;
	}
	.sdgs-cont-box .txt-area .btn-ico-base{
		margin-top: 20px;
	}
	.sdgs-cont-box .txt-area .btn-ico-base+.btn-ico-base{
		margin-top: 15px;
	}
	.sdgs-cont-box .txt-area .btn-ico-base a{
		letter-spacing: 0;
	}
	
	.sdgs-mark{
		margin-bottom: 10px;
	}
	.sdgs-mark span{
		max-width:40px;
	}
	
	.area-cont > h3{
		margin-bottom: 15px;
		font-size: 1.9rem;	
	}
	
	.other-sdgs{
		margin-top: 45px;
	}
	.other-sdgs h3{
		margin-bottom: 15px;
		font-size: 1.9rem;		
	}
	.other-sdgs-list{
		justify-content: space-between;
	}
	.other-sdgs-list li{
		width: calc(50% - 7px);
		margin-left: 0;
		padding-bottom: 20px;
		border-radius: 5px;
	}
	.other-sdgs-list li:nth-child(3n+1){
		margin-left: 0;
	}
	.other-sdgs-list li:nth-child(n+3){
		margin-top: 20px;
	}
	.other-sdgs-list .pic{
		margin-bottom: 10px;
	}
	.other-sdgs-list .sdgs-mark{
		margin-bottom: 5px;
		padding: 0 10px;
	}
	.other-sdgs-list .sdgs-mark span{
		max-width: 27px;
		margin: 0 2px 5px 0;
	}
	.other-sdgs-list .txt{
		padding: 0 10px;
		font-size: 1.3rem;
		line-height:1.6;
	}
	.other-sdgs-list a:hover .pic{
		opacity: .7;
	}
	
	.bnr-area{
		height: 120px;
		margin: 80px 20px 0; 
	}
	.bnr-area a{
		background-image:url(../image/bg_bnr_sdgs_sp.jpg);
	}
	.bnr-area a[target="_blank"] span{
		background-position: right 0.2em bottom 0.5em;
	}

/* .sdgs-cont01 */
	.sdgs01 .box01_03{
		margin-bottom: 45px;
	}
	.sdgs01 .box01_04{
		padding: 25px 20px 10px;
	}
	.sdgs01 .box01_04 .pic{
		margin-left: 0;
		max-width: none;
		width: auto;
	}
	.sdgs01 .box01_04 .txt-area{
		max-width:none;
		margin-bottom: 20px;
	}
	.sdgs01 .box01_04 h4{
		margin-bottom: 5px;
		font-size: 1.8rem;
		text-align: center;
	}

/* .sdgs-cont03 */
.sdgs03 .txt-list{
	display: block;
	margin-top: 20px;
}
.sdgs03 .txt-list > div{
	width: 100%;
	padding:18px 20px;
	border-radius: 5px;
}
.sdgs03 .txt-list > div:nth-child(n+2){
	margin-top: 15px;
}
.sdgs03 .txt-list dt{
	font-size: 1.3rem;
}
.sdgs03 .txt-list dd{
	font-size: 1.3rem;
}


/* modal
-----------------------------------------------------------------*/
	.sdgs-modal-cont{
		padding: 30px 20px; 
		border-radius: 5px;
		text-align: left;
	}
	.sdgs-modal-cont > h3{
		margin-bottom: 10px;
		font-size: 1.6rem;
	}
	.sdgs-modal-cont .sdgs-mark{
		margin-bottom: 0;
	}
	.sdgs-modal-cont .sdgs-mark span{
		max-width:45px;
		margin:0 10px 10px 0;
	}
	.sdgs-modal-cont .pic-area{
		margin-bottom: 15px;
	}
	.sdgs-modal-cont .pic-area._spblock{
		display: block;
	}
	.sdgs-modal-cont .pic-area._spblock p+p{
		margin: 5px 0 0;
	}
	.sdgs-modal-cont .pic img{
		border-radius: 5px;
	}
	.sdgs-modal-cont .pic .caption{
		margin-top: 5px;
		font-size: 1rem;
		line-height:1.1;
	}
	.sdgs-modal-cont .txt{
		margin-bottom: 15px;
		font-size: 1.3rem;
	}
	.sdgs-modal-cont .btn-sdgs-modal-close{
		max-width: none;
		text-align: center;
		border-radius: 5px;
		background: #EEF0F6;
	}
	.sdgs-modal-cont .btn-sdgs-modal-close img{
		width: auto;
		height: 40px;
	}
	.sdgs-modal-cont .btn-sdgs-modal-close:hover{
		opacity: 1;
	}
	
	.sdgs-modal-cont.sdgs-modal03_04 .pic-area{
		flex-direction:column-reverse;
		flex-wrap:wrap;
	}
	.sdgs-modal-cont.sdgs-modal03_04 .pic-area p:nth-child(2){
		width: 100%;
	}
	.sdgs-modal-cont.sdgs-modal03_04 .pic-area p:nth-child(1){
		width: 50%;
	}

	
	
}