@charset "utf-8";
body.top { background: #fff; min-width: 1200px; position: relative}

main{max-width: 1600px; margin: 0 auto;}
#global_header { background: rgba(255,255,255,0.5); position: absolute; z-index: 1000; width: 100%;}

/*---------------------------------- #fv ----------------------------------*/
#fv{width: auto; height: auto; position: relative;}
#fv h2{padding: 40vh 6.5%; position: relative; z-index: 1;}
#fv h2 a{display: inline-block;}
#fv .mover{position: absolute; top: 0px; left: 0px; width: 100%; height: 100%;}
#fv .mover video{position: absolute	; top: 0px; width: 100%; height: 100%;object-fit: cover;}

.flex_box{display: flex;}
.info-rela{padding: 80px 5.5% 92px;display: flex; justify-content: space-between; }
/* .info-rela h3{font-size: 16px;display: flex; align-items: flex-end; line-height: 130%;font-family: 'Noto-Sans-JP-Regular'; margin: 0 0 62px;} */
.info-rela h3 span{font-size: 38px; color: #c30f00;display: inline-block; padding: 0 16px 0 0; line-height: 100%;font-family: lato, sans-serif; font-weight: 800; font-style: normal; letter-spacing: 0.05em;}


/*---------------------------------- #informations ----------------------------------*/
#informations{width: 100%; max-width: 916px; padding: 0;}
#informations h3{ margin: 0 0 56px 15px;}
#informations .forecast{margin: 0 0 58px;}
#informations .forecast .box{border-bottom: 1px solid #dcdcdc; padding: 29px 5%;margin: 0px; }
#informations .forecast .box:first-child{border-top: 1px solid #dcdcdc;}
#informations .forecast .box a{ width: 100%; }

#informations .forecast h4{font-size: 16px; line-height: 188%;/* font-family: 'Noto-Sans-JP-Medium'; */ width: 135px;color: #000;}
#informations .forecast p{font-size: 16px; line-height: 188%; width: calc(100% - 180px); margin: 0px;/* font-family: 'Noto-Sans-JP-Regular'; */position: relative; padding: 0 0 0 34px; margin: 0 0 0 7%;color: #000;}
#informations .forecast p span{width: 18px; height: 18px; display: inline-block; background: #c30f00; border-radius: 100%; position: absolute; left: 0px; top: 6px;}
#informations .forecast p span:before{content: ""; border-bottom: 1px solid #fff; border-right: 1px solid #fff; display: block; position: absolute; top: 50%; left: 50%; transform: translate(-60%,-50%) rotateZ(-45deg); -webkit-transform: translate(-60%,-50%) rotateZ(-45deg); width: 4px; height: 4px;}
#informations a.view{display: block; background: #000; color: #fff; width: 163px; height: auto;position: relative; padding: 9px 0 9px 17px;font-family: lato, sans-serif; font-weight: 400; font-style: normal; letter-spacing: 0.06em; margin: 0 0 0 18px; font-size: 16px;}
#informations a.view:after{content: ""; display: block; width: 9px; height: 9px; border-bottom: 2px solid #fff; border-right: 2px solid #fff;position: absolute; right: 0px; top: 50%; transform: translateY(-50%) rotateZ(-45deg); -webkit-transform: translateY(-50%) rotateZ(-45deg); right: 15px; font-size: 16px;}


/*---------------------------------- #relatedsites ----------------------------------*/
#relatedsites {width: 100%; max-width: 500px; margin: 0px 0 0 4%;}
#relatedsites img{width: 100%; height: auto;}
#relatedsites ul{width: 75%; height: auto;margin: 0 auto 0 0 ;}
#relatedsites ul li:not(:last-child){margin: 0 0 19px;}
#relatedsites ul a{border: 1px solid #dcdcdc;display: block; padding: 5% 10%;}
#relatedsites ul li:nth-child(1) a{padding: 2.5% 10%;}
#relatedsites ul a .img_1{width: 36%; height: auto; margin: 0 auto;}


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

	body.top { background: #fff; min-width: auto;}
	#fv h2{ padding: 35vh 6.5%; width: 70%; margin: 0 auto;}
	#fv h2 img{width: 100%; height: auto;}
	#fv .mover {width: 100%; height: 100%;}
	#fv h2 a { display: block; width: 80%; margin: 0 auto;}
	
	.info-rela{padding:  43px 5.5% 46px;display: flex; flex-direction: column;}
	.info-rela h3{font-size: 12px;display: flex; flex-direction: row; margin: 0 0 31px;}
	.info-rela h3 span{font-size: 30px; padding: 0 8px 0 0; letter-spacing: 0.05em;}
	
	.flex_box {display: flex; flex-direction: column;}
	/*---------------------------------- #informations ----------------------------------*/
	#informations h3{ margin: 0 0 31px 7px; line-height: 120%;}
	#informations .forecast{margin: 0 0 29px;}
	#informations .forecast .box{ padding: 19px;margin: 0px; }
	
	#informations .forecast h4{font-size: 13px; width: auto; padding: 0px 0 5px;}
	#informations .forecast p{font-size: 13px; width: 100%; margin: 0px; padding: 0 0 0 28px; margin: 0;}
	#informations .forecast p span{width: 16px; height: 16px; left: 0px; top: 4px;}
	#informations .forecast p span:before{ width: 4px; height: 4px;}
	#informations a.view{width: 80%; margin: 0 auto; padding: 14px 0 14px 10px; font-size: 13px; text-align: center;}
	#informations a.view:after{width: 9px; height: 9px; border-bottom: 2px solid #fff; border-right: 2px solid #fff;top: 50%;  right: 15px;}
	#informations {padding: 0 0 50px;}
	

	/*---------------------------------- #relatedsites ----------------------------------*/
	#relatedsites {max-width: 100%; margin: 0 auto;}
	#relatedsites ul{margin: 0 auto 0 ;}
	#relatedsites ul li:not(:last-child){margin: 0 0 19px;}
	#relatedsites ul a{padding: 5% 10%;}
	
ze: 11px; background: url(../images/icn_1.png) no-repeat center right; background-size: 16px; padding: 0 22px 0 0;}

	
	
}