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


/**総部**/

@font-face {
font-family: "NotoSansJP-Medium";
src: url("fonts/NotoSansJP-Medium.otf");
}


*{
	margin: 0px;
	box-sizing: border-box;
	text-decoration: none;
}

body{
	font-family: urw-din, "NotoSansJP-Medium", sans-serif;
	color: #404040;
	font-size: 16px;	
}

img{
	object-fit: cover;
}

h1{
	font-size: 1.8em;
}

.box{
	display: flex;
	flex-direction: column;
	padding: 0 10%;
}
.card{
	border-left: 1px solid;
}

/**ヘッダー部**/
#hd{
	display: flex;
	width: 100%;
	height: 80px;
	padding: 5px 10%;
	align-items: center;
}
#hd-logo{
	height: 50px;
}
#hd-logo img{
	height: 50px;
}

/**ヒーロー部**/
#hero {
	display: grid;
  	grid-template-columns: minmax(200px, 1fr) 3fr;
  	grid-template-rows: 30% auto 5% 1fr;
  	grid-template-areas: ". ." "hero-logo ." ". ." "border .";
	width: 100%;
	height: 100vh;
	padding: 0px 10%;
	background-image: url("img/hero.webp");
	background-size: cover;
	background-position: center;
	
}
#hero::before{
	filter: brightness(0.8);
}

#logo{
	grid-area: hero-logo;
}

#hero .border{
	position: relative;
	grid-area: border; 
	border-left:#fff 1px solid;
}
.border{
	position: relative;
	grid-area: border; 
	border-left: #404040 1px solid;
}
#scroll-mark{
	position: absolute;
		bottom:10%;
		left:10%;
	color: #fff;
	letter-spacing: 0.1em;
}

/**イントロ部**/

.card.intro{
	display: grid;
	border-left-color: #404040;
	grid-template-columns: 100%;
  	grid-template-rows: auto 10px auto  ;
  	grid-template-areas: "title" "." "txt"  ;
	width: 100%;
	padding: 20px 0;
}
.card.intro h2{
	grid-area: title;
	padding-left: 20px;
	border-left: #404040 2px solid;
}
.card.intro p{
	grid-area: txt;
	padding-left:30px;
}

/**データリンク部**/
.box.extra{
	background-color: #c84040;
	color: #fff;
}

.box.normal{
	background-color: #4096c8;
	color: #fff;
}
.card.link{
	display: grid;
	border-left-color: #404040;
	grid-template-columns: 100%;
  	grid-template-rows: auto 10px auto 20px auto ;
  	grid-template-areas: "link-tit" "." "link-txt" "." "link-but" ;
	padding: 20px 0;
}
.card.link.white{
	border-left-color: #fff;
}
.card.link h2{
	border-left: #404040 2px solid;
	padding-left: 20px;
	grid-area: link-tit;
}
.card.link p{
	padding-left: 30px;
	grid-area: link-txt;
}
.card.link.white h2{
	border-left: #fff 2px solid;
	padding-left: 20px;
	grid-area: link-tit;
}
.card.link.white p{
	padding-left: 30px;
	grid-area: link-txt;
}
.card .link-card-but{
	grid-area: link-but;
}
.card .link-card-but .but{
	display: flex;
	padding: 10px 20px;
	border: #404040 1px solid;
	margin: 5px 30px;
	font-size: 20px;
	justify-content: center;
	align-items: center;
}

.card .link-card-but .but{
	background-color: rgba(64,64,64,0.2);
	color: #404040;
}
.card .link-card-but .but:hover{
	background-color: #404040;
	color: #fff;
}
.card .link-card-but.white .but{
	border: #fff 1px solid;
}

.card .link-card-but.white .but{
	background-color: rgba(255,255,255,0.2);
	color: #fff;
}
.card .link-card-but.white .but:hover{
	background-color: #fff;
	color: #404040;
}

/**データ部**/
.box.data-intro{
	background-color: #404040;
}
.box.data-intro h1{
	display: flex;
	padding: 20px 0px;
	color: #fff;
}

.box.data-intro.extra{
	background-color: #c84040;
}
.box.data-intro.extra h1{
	display: flex;
	padding: 20px 0px;
}

.box.data-intro.normal{
	background-color: #4096c8;
}
.box.data-intro.normal h1{
	display: flex;
	padding: 20px 0px;
}

.card.data{
	display: grid;
	border-left-color: #404040;
	grid-template-columns: 100%;
  	grid-template-rows: auto 20px 100vw 20px auto ;
  	grid-template-areas: "title" "." "over"  "." "txt"  ;
	width: 100%;
	padding: 20px 0;
}
.card.data h2{
	grid-area: title;
	padding-left: 20px;
	border-left: #404040 2px solid;
}
.card.data img{
	grid-area: over;
	padding-left: 20px;
	height: 100%;
}
.card.data p{
	grid-area: txt;
	padding-left:30px;
}
.card.data .link-card-but{
	grid-area: data-but;
}
.card.data .link-card-but .but{
	display: flex;
	padding: 10px 20px;
	border: #fff 1px solid;
	margin: 5px 30px;
	font-size: 20px;
	width: 100%;
	justify-content: center;
	align-items: center;
}

.card.data .link-card-but .but{
	background-color: rgba(64,64,64,0.20);
	color: #404040;
}
.card.data .link-card-but .but:hover{
	background-color: #404040;
	color: #fff;
}

.card.data.map img{
	padding-left: 0px;
}
.card.data.map{
	display: grid;
	border-left-color: #404040;
	grid-template-columns: 100%;
  	grid-template-rows: auto 20px 90vh;
  	grid-template-areas: "title" "." "map" ;
	width: 100%;
	padding: 20px 0;
}
.card.data.map #leafletMap{
	grid-area: map;
	width: 100%;
    height: 90vh;
	margin-left: 20px;
}

/**便利な情報部**/
.card.useful{
	display: grid;
	border-left-color: #404040;
	grid-template-columns: 100%;
  	grid-template-rows: auto 20px 100vh 20px auto 10px auto 10px auto;
  	grid-template-areas: "title" "." "pict"  "." "txt1" "." "txt2" "." "txt3";
	width: 100%;
	padding: 20px 0;
}
.card.useful h2{
	grid-area: title;
	padding-left: 20px;
	border-left: #404040 2px solid;
}
.card.useful img{
	grid-area: pict;
	padding-left: 20px;
	height: 100%;
	width: 100%;
}
.card.useful p.c1{
	grid-area: txt1;
	padding-left:30px;
}
.card.useful p.c2{
	grid-area: txt2;
	padding-left:30px;
}
.card.useful p.c3{
	grid-area: txt3;
	padding-left:30px;
}
.card.useful .link-card-but{
	grid-area: data-but;
}
.card.useful .link-card-but .but{
	display: flex;
	padding: 10px 20px;
	border: #fff 1px solid;
	margin: 5px 30px;
	font-size: 20px;
	width: 100%;
	justify-content: center;
	align-items: center;
}

/**フッター部**/
#ft {
	display: grid;
  	grid-template-columns: 100%;
  	grid-template-rows: 1fr 20px auto 10px auto 1fr;
  	grid-template-areas: "border" "." "ft-logo" "." "copy" ".";
	width: 100%;
	height: 30vh;
	padding: 0px 10%;
	background-color: #404040;
	color: #808080;
}
#ft .border{
	position: relative;
	grid-area: border; 
	border-left:#808080 1px solid;
}
#ft-logo{
	grid-area: ft-logo;
}
#ft-logo img{
	height: 28px;
}
#copy{
	grid-area: copy;
}