@charset "UTF-8";
/*
 * top_layout.css
 *
 */

/* !Loading
---------------------------------------------------------- */
#loading {
  width: 100vw;
  height: 100vh;
  transition: all 1.8s 0.6s;
  background-color: #FFF;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10000;
}

.loaded {
  opacity: 0;
  visibility: hidden;
}

/* !mainvisual
---------------------------------------------------------- */
.main {
	position: relative;
	width:100%;
	height:100vh;
	padding:0 20px;
	background-color: #F3F3F3;
	overflow: hidden;
	z-index:0;
}
	.main div.inner {
		width:100%;
		height:calc(100vh - 180px);
		margin-top:160px;
		position: relative;
	}
		.main div.inner div.mainSlide {
			width: 100%;
			height:100%;
			background-repeat:no-repeat;
			background-position:50% 50%;
			background-size: cover;
			position: relative;
			border-radius: 20px;
			z-index:0;
		}
		.main div.inner div.mainSlide h2 {
			position: absolute;
			font-size:60px;
			font-weight: 700;
			color: #FFF;
			line-height: 1.5;
			letter-spacing: 0.04em;
			text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5);
			left:60px;
			bottom:60px;
			-webkit-animation: copyanimation 3.5s forwards;
			-moz-animation: copyanimation 3.5s forwards;
			animation: copyanimation 3.5s forwards;
		}

/* !アニメーション設定 */
@keyframes copyanimation {
	0% {
		opacity: 0;
		transform: translateX(-50px);
    }
	70% {
		opacity: 0;
		transform: translateX(-50px);
    }
	100% {
		transform: translateX(0);
    }
}

@media screen and (max-width:1039px){
.main {
	height:700px;
}
	.main div.inner {
		height:calc(700px - 130px);
		margin-top:110px;
	}
		.main div.inner div.mainSlide h2 {
			font-size:50px;
			left:50px;
			bottom:50px;
		}
}

@media screen and (max-width:767px){
.main {
	height:500px;
	padding:0 15px;
}
	.main div.inner {
		height:calc(500px - 105px);
		margin-top:90px;
	}
		.main div.inner div.mainSlide {
			border-radius: 16px;
		}
		.main div.inner div.mainSlide h2 {
			font-size:24px;
			left:25px;
			bottom:25px;
		}
}

@media screen and (max-width:359px){
		.main div.inner div.mainSlide h2 {
			font-size:21px;
			left:20px;
			bottom:25px;
		}
}

/* !日本地熱協会の概要
---------------------------------------------------------- */
.topOverview {
	width:auto;
	margin:100px 50px 20px 50px;
	position: relative;
}
	.topOverview div.inner {
		position: relative;
		width:100%;
		max-width:1200px;
		margin: 0 auto;
	}
		.topOverview div.inner p.enTit {
			font-family: "Roboto", serif;
			font-size: 30px;
			font-weight: 700;
			line-height: 1.4;
			letter-spacing: 0.04em;
		}
		.topOverview div.inner h2 {
			font-size:40px;
			font-weight: 700;
			line-height: 1.5;
			color: #00B4FF;
			letter-spacing: 0.04em;
			margin-bottom: 30px;
		}
		.topOverview div.inner p.read {
			margin-bottom: 40px;
		}
		.topOverview div.inner ul.overviewList {
			width:100%;
			display: flex;
			flex-wrap: wrap;
		}
			.topOverview div.inner ul.overviewList li {
				width:23%;
				margin-right: 2.66%;
				margin-bottom: 30px;
			}
			.topOverview div.inner ul.overviewList li:nth-child(4n) {
				margin-right: 0;
			}
				.topOverview div.inner ul.overviewList li a {
					display: block;
					width:100%;
					background: #FFF;
					border-radius: 10px;
					padding:40px 30px;
					box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
					transition: .6s;
					position:relative;
				}
						.topOverview div.inner ul.overviewList li a img {
							display:block;
							width:67px;
							margin: 0 auto 20px auto;
						}
						.topOverview div.inner ul.overviewList li a h3 {
							font-size:18px;
							font-weight: 700;
							text-align: center;
							line-height: 1.6;
							transition: .6s;
						}
					.topOverview div.inner ul.overviewList li a:hover {
						background: #EBF9FF;
					}
							.topOverview div.inner ul.overviewList li a:hover h3 {
								color: #00B4FF;
							}

@media screen and (max-width:1039px){
.topOverview {
	margin:80px 30px 20px 30px;
}
		.topOverview div.inner p.enTit {
			font-size: 24px;
		}
		.topOverview div.inner h2 {
			font-size:34px;
		}
			.topOverview div.inner ul.overviewList li {
				margin-bottom: 20px;
			}
				.topOverview div.inner ul.overviewList li a {
					padding:30px 20px;
				}
						.topOverview div.inner ul.overviewList li a img {
							width:60px;
						}
						.topOverview div.inner ul.overviewList li a h3 {
							font-size:16px;
						}
					.topOverview div.inner ul.overviewList li a:hover {
						background: #FFF;
					}
							.topOverview div.inner ul.overviewList li a:hover h3 {
								color: #111;
							}
}

@media screen and (max-width:767px){
.topOverview {
	margin:70px 25px 20px 25px;
}
		.topOverview div.inner p.enTit {
			font-size: 16px;
		}
		.topOverview div.inner h2 {
			font-size:22px;
			margin-bottom: 25px;
		}
		.topOverview div.inner p.read {
			margin-bottom: 30px;
		}
		.topOverview div.inner ul.overviewList {
			
		}
			.topOverview div.inner ul.overviewList li {
				width:48%;
				margin-right: 4%;
				margin-bottom: 20px;
			}
			.topOverview div.inner ul.overviewList li:nth-child(even) {
				margin-right: 0;
			}
			.topOverview div.inner ul.overviewList li:last-child {
				margin-bottom: 0;
			}
				.topOverview div.inner ul.overviewList li a {
					padding:30px 10px;
				}
						.topOverview div.inner ul.overviewList li a img {
							margin: 0 auto 10px auto;
						}
						.topOverview div.inner ul.overviewList li a h3 {
							font-size:14px;
						}
}

/* !地熱発電に関する情報
---------------------------------------------------------- */
.topInformation {
	width:auto;
	padding:100px 50px 30px 50px;
	position: relative;
}
	.topInformation div.inner {
		position: relative;
		width:100%;
		max-width:1200px;
		background: #FFF;
		border-radius: 10px;
		box-shadow: 0px 0px 16px rgba(0, 0, 0, 0.08);
		padding-bottom:60px;
		margin: 0 auto;
	}
		.topInformation div.inner div.box {
			position: absolute;
			width:50%;
			padding:60px 20px 60px 50px;
			background: #65B401;
			border-radius:10px;
			z-index: 2;
			top:-30px;
			left:-30px;
		}
			.topInformation div.inner div.box p.enTit {
				font-family: "Roboto", serif;
				font-size: 30px;
				font-weight: 700;
				line-height: 1.4;
				letter-spacing: 0.04em;
				color: #B2DA80;
			}
			.topInformation div.inner div.box h2 {
				font-size:40px;
				font-weight: 700;
				line-height: 1.5;
				color: #FFF;
				letter-spacing: 0.04em;
				margin-bottom: 30px;
			}
			.topInformation div.inner div.box p.read {
				color: #FFF;
			}
		.topInformation div.inner img.photo {
			display: block;
			width:80%;
			margin-left: 20%;
			margin-bottom: 20px;
			border-radius: 0 10px 0 0;
		}
		.topInformation div.inner ul.contentsLink {
			width:80%;
			margin-left: 20%;
			display: flex;
			flex-wrap: wrap;
			padding-right:60px;
		}
			.topInformation div.inner ul.contentsLink li {
				width:31%;
				margin-right: 3.5%;
			}
			.topInformation div.inner ul.contentsLink li:nth-child(3n) {
				margin-right: 0;
			}
				.topInformation div.inner ul.contentsLink li a {
					display: block;
					position: relative;
					padding:1em 0;
					border-bottom: 1px solid #E2E2E2;
					transition: .6s;
				}
					.topInformation div.inner ul.contentsLink li a:after {
						position: absolute;
						content:"";
						width:24px;
						height: 1px;
						background: #65B401;
						bottom:-1px;
						right:0;
						transition:.2s;
					}
					.topInformation div.inner ul.contentsLink li a span.arrow {
						position: absolute;
						display: block;
						width: 16px;
						height: 16px;
						background: #65B401;
						border-radius: 50%;
						top:50%;
						right:4px;
						margin-top: -7px;
						transition:.2s;
					}
						.topInformation div.inner ul.contentsLink li a span.arrow:before {
							content: "";
							width: 5px;
							height: 5px;
							border: 1px solid #FFF;
							position: absolute;
							box-sizing: border-box;
							border-left: 0;
							border-bottom: 0;
							transform: rotate(45deg);
							transform-origin: top right;
							top: 50%;
							right: 5px;
						}
				.topInformation div.inner ul.contentsLink li a:hover {
					color: #65B401;
				}
					.topInformation div.inner ul.contentsLink li a:hover:after {
						width:34px;
					}
					.topInformation div.inner ul.contentsLink li a:hover span.arrow {
						right:10px;
					}

@media screen and (max-width:1179px){
			.topInformation div.inner div.box h2 {
				font-size:38px;
			}
}

@media screen and (max-width:1039px){
.topInformation {
	padding:80px 30px 30px 30px;
}
	.topInformation div.inner {
		padding-bottom:50px;
	}
		.topInformation div.inner div.box {
			width:56%;
			padding:45px 20px 45px 40px;
			top:-30px;
			left:-20px;
		}
			.topInformation div.inner div.box p.enTit {
				font-size: 24px;
			}
			.topInformation div.inner div.box h2 {
				font-size:32px;
			}
		.topInformation div.inner ul.contentsLink {
			padding-right:50px;
		}
				.topInformation div.inner ul.contentsLink li a:hover {
					color: #111;
				}
					.topInformation div.inner ul.contentsLink li a:hover:after {
						width:24px;
					}
					.topInformation div.inner ul.contentsLink li a:hover span.arrow {
						right:4px;
					}
}

@media screen and (max-width:767px){
.topInformation {
	padding:70px 25px 30px 25px;
}
	.topInformation div.inner {
		padding-bottom:30px;
	}
		.topInformation div.inner div.box {
			position: relative;
			width:100%;
			padding:30px 20px 30px 20px;
			border-radius:10px 10px 0 0;
			top:0;
			left:0;
		}
			.topInformation div.inner div.box p.enTit {
				font-size: 16px;
			}
			.topInformation div.inner div.box h2 {
				font-size:22px;
				margin-bottom: 20px;
			}
		.topInformation div.inner img.photo {
			display: block;
			width:100%;
			margin:0 0 20px 0;
			padding:0;
			border-radius: 0;
		}
		.topInformation div.inner ul.contentsLink {
			width:100%;
			margin: 0;
			padding:0 25px;
		}
			.topInformation div.inner ul.contentsLink li {
				width:100%;
				margin-right: 0;
			}
			.topInformation div.inner ul.contentsLink li:nth-child(3n) {
				margin-right: 0;
			}
				.topInformation div.inner ul.contentsLink li a {
					padding:0.8em 0;
				}
}

/* !最新情報
---------------------------------------------------------- */
.topNewsWrap {
	width:100%;
	background: #F7FBF2;
	position: relative;
}
.topNewsWrap div.bgTop {
	display: block;
	width:100%;
	position: absolute;
	top:0;
	left:0;
}
.topNews {
	width:auto;
	padding:200px 50px 100px 50px;
	position: relative;
}
	.topNews div.inner {
		position: relative;
		width:100%;
		max-width:1200px;
		display: flex;
		justify-content: space-between;
		margin: 0 auto;
	}
		.topNews div.inner div.left {
			width:40%;
		}
			.topNews div.inner div.left p.enTit {
				font-family: "Roboto", serif;
				font-size: 30px;
				font-weight: 700;
				line-height: 1.4;
				letter-spacing: 0.04em;
			}
			.topNews div.inner div.left h2 {
				font-size:40px;
				font-weight: 700;
				line-height: 1.5;
				color: #F55523;
				letter-spacing: 0.04em;
				margin-bottom: 30px;
			}
			.topNews div.inner div.left p.read {
				margin-bottom: 50px;
			}
			.topNews div.inner div.left a.btn {
				display: inline-block;
				height: 60px;
				font-weight: 700;
				color: #FFF;
				line-height: 60px;
				letter-spacing: 0.04em;
				background: #F55523;
				border-radius: 30px;
				padding:0 60px;
				position: relative;
				transition: .6s;
			}
				.topNews div.inner div.left a.btn:hover {
					background: #F9AF28;
				}
		.topNews div.inner div.right {
			width:55%;
		}
			.topNews div.inner div.right div.newsList {
				display:block;
				width:100%;
			}
					.topNews div.inner div.right div.newsList a dl {
						width:100%;
						line-height:1.8;
						display:flex;
						flex-wrap:wrap;
						padding-right: 40px;
						position: relative;
						border-bottom:1px solid #E2E2E2;
					}
					.topNews div.inner div.right div.newsList a dl:before {
						position: absolute;
						content:"";
						width:24px;
						height: 1px;
						background: #F55523;
						bottom:-1px;
						right:0;
						transition:.2s;
					}
						.topNews div.inner div.right div.newsList a dl dt {
							width:100%;
							padding:1.3em 0 0 0;
							transition: .6s;
						}
						.topNews div.inner div.right div.newsList a dl dd {
							width:100%;
							padding:0.4em 0 1.3em 0;
							transition: .6s;
						}
							.topNews div.inner div.right div.newsList a:hover dl dt {
								color:#F55523;
							}
							.topNews div.inner div.right div.newsList a:hover dl dd {
								color:#F55523;
							}
						.topNews div.inner div.right div.newsList a dl dd span.arrow {
							position: absolute;
							display: block;
							width: 20px;
							height: 20px;
							background: #F55523;
							border-radius: 50%;
							top:50%;
							right:2px;
							margin-top: -10px;
							transition:.2s;
						}
							.topNews div.inner div.right div.newsList a dl dd span.arrow:before {
								content: "";
								width: 5px;
								height: 5px;
								border: 1px solid #FFF;
								position: absolute;
								box-sizing: border-box;
								border-left: 0;
								border-bottom: 0;
								transform: rotate(45deg);
								transform-origin: top right;
								top: 50%;
								right: 7px;
							}
					.topNews div.inner div.right div.newsList a:hover dl:before {
						width:34px;
					}
						.topNews div.inner div.right div.newsList a:hover dl dd span.arrow {
							position: absolute;
							display: block;
							width: 20px;
							height: 20px;
							background: #F55523;
							border-radius: 50%;
							top:50%;
							right:7px;
							margin-top: -10px;
							transition:.2s;
						}

.topBanner {
	width:auto;
	padding:0 50px 100px 50px;
	position: relative;
}
	.topBanner div.inner {
		position: relative;
		width:100%;
		max-width:1200px;
		margin: 0 auto;
	}
		.topBanner div.inner p.read {
			text-align: center;
			margin-bottom: 40px;
		}
		.topBanner div.inner ul.banners {
			width:100%;
			display: flex;
			justify-content: center;
		}
			.topBanner div.inner ul.banners li {
				width: 100%;
				max-width:320px;
				margin-right: 30px;
			}
			.topBanner div.inner ul.banners li:last-child {
				margin-right: 0;
			}
				.topBanner div.inner ul.banners li a img {
					display: block;
					width:100%;
					transition: .6s;
				}
					.topBanner div.inner ul.banners li a:hover img {
						opacity:.7;
					}

@media screen and (max-width:1039px){
.topNews {
	padding:150px 30px 80px 30px;
}
		.topNews div.inner div.left {
			width:45%;
		}
			.topNews div.inner div.left p.enTit {
				font-size: 24px;
			}
			.topNews div.inner div.left h2 {
				font-size:34px;
			}
				.topNews div.inner div.left a.btn:hover {
					background: #F55523;
				}
		.topNews div.inner div.right {
			width:50%;
		}
							.topNews div.inner div.right div.newsList a:hover dl dt {
								color:#111;
							}
							.topNews div.inner div.right div.newsList a:hover dl dd {
								color:#111;
							}
					.topNews div.inner div.right div.newsList a:hover dl:before {
						width:24px;
					}
						.topNews div.inner div.right div.newsList a:hover dl dd span.arrow {
							right:2px;
						}
	
.topBanner {
	padding:0 30px 80px 30px;
}
		.topBanner div.inner p.read {
			text-align: center;
			margin-bottom: 30px;
		}
		.topBanner div.inner ul.banners {
			width:100%;
			display: flex;
			justify-content: center;
		}
			.topBanner div.inner ul.banners li {
				width: 100%;
				max-width:320px;
				margin-right: 30px;
			}
			.topBanner div.inner ul.banners li:last-child {
				margin-right: 0;
			}
				.topBanner div.inner ul.banners li a img {
					display: block;
					width:100%;
					transition: .6s;
				}
					.topBanner div.inner ul.banners li a:hover img {
						opacity:1;
					}
}

@media screen and (max-width:767px){
.topNews {
	padding:70px 25px 70px 25px;
}
	.topNews div.inner {
		flex-wrap: wrap;
	}
		.topNews div.inner div.left {
			width:100%;
			margin-bottom: 30px;
		}
			.topNews div.inner div.left p.enTit {
				font-size: 16px;
			}
			.topNews div.inner div.left h2 {
				font-size:22px;
				margin-bottom: 25px;
			}
			.topNews div.inner div.left p.read {
				margin-bottom: 30px;
			}
			.topNews div.inner div.left a.btn {
				display: inline-block;
				height: 50px;
				font-weight: 700;
				color: #FFF;
				line-height: 50px;
				letter-spacing: 0.04em;
				background: #F55523;
				border-radius: 30px;
				padding:0 40px;
				position: relative;
				transition: .6s;
			}
				.topNews div.inner div.left a.btn:hover {
					background: #F55523;
				}
		.topNews div.inner div.right {
			width:100%;
		}
			.topNews div.inner div.right div.newsList {
				display:block;
				width:100%;
			}
					.topNews div.inner div.right div.newsList a dl {
						padding-right: 35px;
					}
						.topNews div.inner div.right div.newsList a dl dt {
							padding:1.1em 0 0 0;
						}
						.topNews div.inner div.right div.newsList a dl dd {
							padding:0.4em 0 1.1em 0;
						}
	
.topBanner {
	padding:0 25px 70px 25px;
}
		.topBanner div.inner p.read {
			text-align: left;
			margin-bottom: 30px;
		}
		.topBanner div.inner ul.banners {
			max-width: 280px;
			flex-wrap: wrap;
			margin: 0 auto;
		}
			.topBanner div.inner ul.banners li {
				max-width:280px;
				margin-right: 0;
				margin-bottom: 20px;
			}
			.topBanner div.inner ul.banners li:last-child {
				margin-bottom: 0;
			}
}

/* !アニメーション
---------------------------------------------------------- */
.fadeIn_up {
  opacity: 0;
  transform: translateY(70px);
  transition: 1s .4s;
}
.fadeIn_up.is-show {
  transform: translateY(0);
  opacity: 1;
}

.fadeIn_right {
  opacity: 0;
  transform: translateX(-50px);
  transition: 1s .4s;
}
.fadeIn_right.is-show {
  transform: translateX(0);
  opacity: 1;
}

@media screen and (max-width:767px){
.fadeIn_up {
  opacity: 0;
  transform: translateY(50px);
  transition: 1s .4s;
}
.fadeIn_up.is-show {
  transform: translateY(0);
  opacity: 1;
}
}