@charset "UTF-8";

.fadein {
	opacity: 0;
	transform: translateY(20px);
	transition: all 1s;
}

.fadeinnop {
	opacity: 0;
	transform: translateY(0);
	transition: all 1s;
}

.fadein2 {
	transition-delay: 0.5s;
}

.fadein3 {
	transition-delay: 1s;
}

.fadein4 {
	transition-delay: 1.5s;
}

.fadeinpos {
	transform: translateY(0);
}

.pc {
	display: block;
}

.sp {
	display: none;
}

.pop-flx .pop-flx-it {
	flex: 0 0 50%;
}

body {
	font-family: 'HondaGlobalFontEN-Regular', "ヒラギノ角ゴ W3 JIS2004", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", Meiryo, sans-serif;
	color: #333;
	background: rgb(239, 249, 255);
	background: linear-gradient(180deg, rgba(239, 249, 255, 1) 0%, rgba(240, 249, 255, 1) 23%, rgba(175, 193, 214, 1) 63%, rgba(40, 88, 145, 1) 100%);


}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 1.5em;
	margin-bottom: 1em;
}

img {
	max-width: 100%;
}

a:hover {
	opacity: 0.8;
}

.main-area {
	padding: 0;
}

.main-area .mainInner {
	background: #dff2fa;
}

.main-area .youtubeInner {
	position: relative;
	background: url(../img/movie.jpg) no-repeat;
	background-size: cover;
	overflow: hidden;
	aspect-ratio: 1400 / 400;
	padding-top: 125px;
}

#loading {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	font-family: 'HondaGlobalFontEN-Bold', "ヒラギノ角ゴ W6 JIS2004", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", Meiryo, sans-serif;
}

#loading.disappear {
	display: none;
}

#youtube-area {
	/*position: fixed;*/
	z-index: 1;
	/*最背面に設定*/
	top: 0;
	right: 0;
	left: 0;
	bottom: 0;
	overflow: hidden;
	opacity: 0;
}

.AnotherPagePopup {
	position: fixed;
	bottom: 40%;
	right: -1em;
	z-index: 3;
	opacity: 0;
	transition-duration: 0.3s;
}

.AnotherPagePopup.popup2 {
	bottom: auto;
	cursor: pointer;
	top: 2%;
	z-index: 99999;
	opacity: 0;
	right: -100%;
	transition-duration: 1s;

}

.AnotherPagePopup.popup2 a {
	color: #222;
}

.AnotherPagePopup.popup2 .Popupimg {
	opacity: 0;
	transition-duration: 0.5s;
	transition-delay: 0.5s;
}

.AnotherPagePopup.popup2 .blue {
	color: #0a7798;
}

.AnotherPagePopup.ss {
	opacity: 1;
	right: 0;
}

.AnotherPagePopup.popup2.ss {
	opacity: 1;
	right: 1%;
}

.AnotherPagePopup:hover {
	right: 0;
}

.AnotherPagePopup.popup2.ss {
	opacity: 1;
	right: 1%;
	display: block;
	z-index: 0;
}

.AnotherPagePopup.popup2.ss .Popupimg {
	opacity: 1;
}

.AnotherPagePopup a:hover {
	bottom: 2.5em;
	opacity: 1;
}

.AnotherPagePopup .Popupimg {}

.AnotherPagePopup .Popupimg a {
	width: 14em;
	height: 7em;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 1em 2em 1em 1em;
	font-family: 'HondaGlobalFontEN-Bold', "ヒラギノ角ゴ W6 JIS2004", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", Meiryo, sans-serif;
	background: #0a7798;
	color: #fff;
	border-radius: 10em;
	box-shadow: 0px 5px 10px 0px rgb(204 219 233 / 70%);
	transition-duration: 0.1s;
	border-radius: 1em 0 0 1em;
	border-top: solid 3px #0a7798;
	border-bottom: solid 3px #0a7798;
	border-left: solid 3px #0a7798;
}

.AnotherPagePopup.popup2 .Popupimg a {
	background: #fff;
	border: none;
	width: 14em;
	padding: 1em;
	border-radius: 1em;
	color: #333;
	display: block;
	height: auto;
}

.AnotherPagePopup.popup2 .Popupimg a .image {
	margin: 1em 0;
}

.AnotherPagePopup.popup2 .Popupimg a .image img {
	border-radius: 0.5em;
}

.AnotherPagePopup.popup2 .Popupimg a:hover {
	opacity: 0.8;
}

.AnotherPagePopup .Popupimg a:hover {
	background: #fff;
	color: #0a7798;
}

.AnotherPagePopup .Popupimg a figure {
	width: 40px;
	position: absolute;
	top: -0.5em;
	left: -0.5em;
	background: #0a7798;
	padding: 2px;
	border-radius: 6px;
}

.AnotherPagePopup .Popupimg a p {
	margin: 0;
	opacity: 1;
}

.AnotherPagePopup.popup2 .Popupimg span {
	line-height: 1em;
	display: flex;
	align-items: center;
	justify-content: center;
}


/*jQueryで付与されたappearクラスがついたらYoutubeエリアをふわっと表示*/
#youtube-area.appear {
	animation-name: PageAnimeAppear;
	animation-duration: .5s;
	animation-fill-mode: forwards;
}

@keyframes PageAnimeAppear {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

#youtube {
	/*天地中央配置*/
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	/*縦横幅指定*/
	width: 177.77777778vh;
	/* 16:9 の幅→16 ÷ 9＝ 177.77% */
	height: 56.25vw;
	/* 16:9の幅 → 9 ÷ 16 = 56.25% */
	min-height: 100%;
	min-width: 100%;
}

/*youtubeがクリックされないためのマスク*/
#youtube-mask {
	position: absolute;
	z-index: 2;
	/*下から2番目に表示*/
	top: 0;
	width: 100%;
	height: 100%;
}

/*全共通*/
.lineue {
	transition-duration: 1s;
}

@-moz-document url-prefix() {
	.lineue {
		max-width: 200px;
		z-index: -1;
	}

	.suiso .graph {
		margin: 0 auto;
	}

	.popup_item1 .lineue {
		top: 160px !important;
		right: -60px !important;
	}

	.popup_item2 .lineue {
		top: 160px !important;
		left: -60px !important;
	}

	.popup_item3 .lineue {
		top: 40px !important;
		right: -60px !important;
	}

	.popup_item4 .lineue {
		top: 40px !important;
		left: -60px !important;
	}
}

.bgh3 {
	margin: 0 auto;
	max-width: 100%;
	width: 1200px;
}

.bgh3 {
	font-size: 40px;
	color: #285891;
	font-family: 'HondaGlobalFontEN-Bold', "ヒラギノ角ゴ W6 JIS2004", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", Meiryo, sans-serif;
	text-align: left;
	position: relative;
	margin-bottom: 40px;
}

.bgextend {
	animation-name: bgextendAnimeBase;
	animation-duration: 0s;
	animation-fill-mode: forwards;
	position: relative;
	overflow: hidden;
	/*　はみ出た色要素を隠す　*/
	opacity: 0;
	margin-bottom: 30px;
}

@keyframes bgextendAnimeBase {
	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/*中の要素*/
.bgappear {
	animation-name: bgextendAnimeSecond;
	animation-duration: 0.4s;
	animation-delay: 0.6s;
	animation-fill-mode: forwards;
	opacity: 0;
}

@keyframes bgextendAnimeSecond {
	0% {
		opacity: 0;
	}

	100% {
		opacity: 1;
	}
}

/*左から右*/
.bgLRextend::before {
	animation-name: bgLRextendAnime;
	animation-duration: 1s;
	animation-fill-mode: forwards;
	content: "";
	position: absolute;
	width: 100%;
	height: 100%;
	background-color: #285891;
	/*伸びる背景色の設定*/
}

@keyframes bgLRextendAnime {
	0% {
		transform-origin: left;
		transform: scaleX(0);
	}

	50% {
		transform-origin: left;
		transform: scaleX(1);
	}

	50.001% {
		transform-origin: right;
	}

	100% {
		transform-origin: right;
		transform: scaleX(0);
	}
}

/* スクロールをしたら出現する要素にはじめに透過0を指定　*/

.bgLRextendTrigger {
	opacity: 0;
}

.bgappearTrigger {
	opacity: 0;
	background: #fff;
}

.main-area .vis {
	text-align: center;
	margin-bottom: 0;
	z-index: 2;
	position: absolute;
	top: 5%;
    left: 2vw;
    max-width: 40vw;
}

.main-area .mainInner {
	background: #dff2fa;
}

.main-area .vis img {
	width: 300px;
}

.main-area .read {
	max-width: 100%;
	margin: 0 auto;
	text-align: center;
	font-family: 'HondaGlobalFontEN-Regular', "ヒラギノ角ゴ W3 JIS2004", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", Meiryo, sans-serif;
	font-size: 17px;
	line-height: 1.8em;
	padding: 100px 0;
	background-image: url(/hydrogen/images/common/readbg.png);
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
}

.main-area .read .boc {
	width: 900px;
	max-width: 100%;
	padding: 1em;
	margin: 0 auto;
}

.main-area .read p {
	line-height: 2em;
	font-family: 'HondaGlobalFontEN-Bold', "ヒラギノ角ゴ W6 JIS2004", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", Meiryo, sans-serif;
	text-shadow: 0px 0px 7px #fff, 0px 0px 7px #fff, 1px 1px 0px #fff, -1px 1px 0 #fff, 1px -1px 0 #fff, -1px -1px 0 #fff;
}

.merit {
	/*background: rgba(255,255,255,70%);*/
	padding: 0 0 130px;
}

.merit .meritInner {
	max-width: 70%;
	margin: 0 auto;
	text-align: center;
}

.merit .meritInner .bgh3 {
	top: -30px;
}

.scrl {
	text-align: center;
	font-size: 25px;
	display: inline-block;
	text-align: center;
	color: #0a7798;
	padding: 0;
	overflow: hidden;
}

.merit .mds {
	text-align: center;
	font-size: 25px;
	display: block;
	text-align: center;
	padding: 10px;
	overflow: hidden;
	opacity: 0;
	border-bottom: 3px solid #fff;
}

.merit .mds span {
	font-family: 'HondaGlobalFontEN-Bold', "ヒラギノ角ゴ W6 JIS2004", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", Meiryo, sans-serif;
	transform: translate(100%, 0);
	transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
}

.scrl span {
	font-family: 'HondaGlobalFontEN-Bold', "ヒラギノ角ゴ W6 JIS2004", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", Meiryo, sans-serif;
	transform: translate(100%, 0);
	transition: transform cubic-bezier(0.215, 0.61, 0.355, 1) 0.3s;
}

.fuel .scrl span {
	background: #fff;
}

.title.-visible,
.scrl.-visible span {
	transform: translate(0, 0);
}

.merit .meritInner .merit_fl {
	display: flex;
	justify-content: space-between;
	width: 900px;
	margin: 0 auto;
}

.merit .meritInner .merit_fl .merit_item {
	flex: 0 0 30%;
}

.merit .meritInner .merit_fl .merit_item figure {
	margin-bottom: 10px;
}

.merit .meritInner .merit_fl .merit_item figure img {
	width: 100%;
}

.merit .meritInner .merit_fl .merit_item h4 {
	color: #0a7798;
	font-size: 20px;
	font-family: 'HondaGlobalFontEN-Bold', "ヒラギノ角ゴ W6 JIS2004", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", Meiryo, sans-serif;
	margin-bottom: 0.5em;
	text-align: center;
}

.suiso {
	/*padding: 0 0 187px;*/
}

.suiso .suisoInner {
	padding: 0 0 120px;
	background-image: url(/hydrogen/images/common/suisobg.jpg);
	background-size: cover;
	background-position: top;
}

.suiso .suisoInner h3 {
	position: relative;
	top: -30px;
	width: 1200px;
}

.suiso .suisomain {
	max-width: 100%;
	width: 1200px;
	margin: 0 auto;
	position: relative;
}

.suiso .suisomain h4 {
	color: #fff;
	text-shadow: 0px 0px 7px #065fd4, 0px 0px 7px #065fd4, 1px 1px 0px #065fd4, -1px 1px 0 #065fd4, 1px -1px 0 #065fd4, -1px -1px 0 #065fd4;
	font-size: 13px;
	position: absolute;
	font-family: 'HondaGlobalFontEN-Bold', "ヒラギノ角ゴ W6 JIS2004", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", Meiryo, sans-serif;
}

.suiso .suisomain .txt1 {
	top: 50%;
}

.suiso .suisomain .txt2 {
    top: 23%;
    right: 20%;
}

.suiso .suisomain .txt3 {
    top: 45%;
    right: -7%;
    text-align: center;
    line-height: 1em;
}

@media screen and (max-width: 1200px) {
	.suiso .suisomain h4 {
		font-size: 13px;
	}

	.suiso .suisomain .txt1 {
		top: 49%;
		right: 40vw;
	}

	.suiso .suisomain .txt2 {
		top: 20%;
		right: 13vw;
	}

	.suiso .suisomain .txt3 {
		top: 45%;
		right: -5vw;
		text-align: center;
	}
}

.suiso .suisomain img {
	width: 100%;
}

.suiso .suisoread {
	max-width: 100%;
	width: 900px;
	margin: 0 auto;
	text-align: center;
	font-family: 'HondaGlobalFontEN-Regular', "ヒラギノ角ゴ W3 JIS2004", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", Meiryo, sans-serif;
	font-size: 28px;
}

.suiso .suisoread h2 {
	color: #0a7798;
	text-align: center;
	font-size: 50px;
	font-family: 'Noto Serif JP';
	font-family: 'HondaGlobalFontEN-Bold', "ヒラギノ角ゴ W6 JIS2004", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", Meiryo, sans-serif;
}

.suiso .suisoread p {
	text-align: center;
	font-family: 'HondaGlobalFontEN-Regular', "ヒラギノ角ゴ W3 JIS2004", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", Meiryo, sans-serif;
	font-size: 25px;
	line-height: 2em;
}

.suiso .domain {
	position: relative;
	padding: 0 0 0;
}

.suiso .graph {
	width: 340px;
	margin: 0 auto;
	max-width: 100%;
	position: relative;
	text-align: center;
	z-index: 2;
}

.popuparea {
	/*position: absolute;*/
	width: 100%;
	padding: 0 0 100px;
	/* position: relative; */
	top: 0;
	background: #daf4ff;
	background: radial-gradient(circle, rgba(225, 248, 255, 1) 0%, rgba(80, 203, 255, 1) 92%, rgba(41, 171, 226, 1) 100%);
}

.popuparea .bgh3 {
	top: -30px;
}

.popuparea .flx {
	width: 1100px;
	max-width: 100%;
	margin: 0 auto;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
	position: relative;
}

.popuparea .flx div {
	position: relative;
	flex: 0 0 34%;
	margin-bottom: 20px;
	cursor: pointer;
	top: 0;
	transition-duration: 0.3s;
	margin-bottom: 40px;
}
.suiso .popuparea .fuel {
		position: absolute;
    top: 25%;
    left: 36%;
    width: 28%;
	}
.popuparea .flx div:hover {
	opacity: 0.8;
}

.popuparea .flx div .popup_pls {}

.popuparea .flx div .popup_pls span {
	font-family: "Gothic MB101 Bold", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ ProN W3", "Hiragino Sans", "ヒラギノ角ゴシック", "メイリオ", Meiryo, sans-serif;
	color: #fff;
	font-size: 15px;
	padding: 8px;
	border-radius: 50px;
	background-color: #6B6B6B;
	cursor: pointer;
	vertical-align: middle;
	display: inline-block;
	line-height: 1em;
	position: absolute;
	bottom: 10px;
	right: 10px;
	font-family: 'HondaGlobalFontEN-Bold', "ヒラギノ角ゴ W6 JIS2004", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", Meiryo, sans-serif;
}

.popuparea .flx div .popup_pl:hover span {
	background-color: #0b4bfe;
}

.popuparea .flx .popup_item5 {
opacity: 1;
    transform: translateY(0px);
    flex: 0 0 100%;
    margin: 0;

}

.popup_item5:hover {
	opacity: 0.5;
}

.zoom {
	position: absolute;
	bottom: 50px;
	right: 0;
	width: 30px;

}

.popuparea .flx .zoom {
	margin: 0;
	position: absolute;
	bottom: 35px;
	right: 30px;
}

.popuparea .flx .zoom img {
	position: absolute;
	bottom: 0;
	right: 0;
	width: 30px;

}

.popuparea .popup div {
	display: none;
}

.popup div {
	display: none;
}

.popup_over1,
.popup_over2,
.popup_over3,
.popup_over4,
.popup_over5 {
	overflow-y: scroll;
}

.pop_txtarea {
	padding: 20px;
}

.pop_txtarea h3 {
	font-size: 24px;
	font-family: 'HondaGlobalFontEN-Bold', "ヒラギノ角ゴ W6 JIS2004", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", Meiryo, sans-serif;
	color: #285891;
	text-align: center;

}

.pop_txtarea .str {
	padding: 20px;
	background: #f0f4f9;
	margin: 0;
}

.pop-flx {
	display: flex;
	justify-content: space-between;
}

.pop-flx p {
	font-size: 20px;
	font-family: 'HondaGlobalFontEN-Bold', "ヒラギノ角ゴ W6 JIS2004", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", Meiryo, sans-serif;
	text-align: center;
}

.news {
	padding: 100px 0;
}
.bg-news {
	background: rgba(255, 255, 255, 70%);
}
.news .newsflx {
	width: 900px;
	margin: 0 auto;
	max-width: 100%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.news .newsflx .newsitem {
	flex: 0 0 100%;
	background: #fff;
	padding: 0%;
	margin-bottom: 2em;
	box-shadow: 0px 5px 10px 0px rgb(204 219 233 / 70%);
	transition-duration: 0.2s
}
.news .newsflx .newsitem.movie {
    cursor: pointer;
}
.news .newsflx .newsitem:hover {
	background: #f4f7fa;
	box-shadow: 0px 5px 10px 2px rgb(204 219 233 / 100%);
}
.news .newsflx .newsitem.nolink:hover {
	background: #fff;
	box-shadow: 0px 5px 10px 0px rgb(204 219 233 / 70%);
}

.news .newsflx .newsitem a {
	display: flex;
}

.news .newsflx .newsitem a.nolink {
	cursor: none;
}

.news .newsflx .newsitem a:hover {
	opacity: 1;
}

.news .newsflx .newsitem .article-inner .article-title {
	font-family: 'HondaGlobalFontEN-Bold', "ヒラギノ角ゴ W6 JIS2004", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", Meiryo, sans-serif;
	font-size: 15px;
	margin-bottom: 1em;
}

.news .newsflx .newsitem .article-inner .article-detail {
	color: #777;
	margin-bottom: 0;
	font-size: 11px;
}
.news .newsflx .newsitem.nolink .article-inner .article-detail {
	color: #000;
}

.news .newsflx .newsitem .article-inner p {
	font-size: 13px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
.news .newsflx .newsitem.nolink .article-inner p {
	font-size: 13px;
	display: -webkit-box;
	-webkit-box-orient: horizontal;
	-webkit-line-clamp: 3;
	overflow: auto;
}

.news .newsflx .newsitem figure {
	position: relative;
	flex: 0 0 38%;
}

.news .newsflx .newsitem figure span {
	position: absolute;
	top: 0;
	left: 0;
	background: #041d41;
	padding: 5px 15px;
	color: #fff;
}

.news .newsflx .newsitem .article-inner {
	padding: 1em;
}

.news .newsflx .newsitem .article-inner dl {
	margin-bottom: 10px;
}

.news .newsflx .newsitem .article-inner dl span {
	font-size: 14px;
}

.bottomlink {
	padding: 100px 0 100px;
}

.bottomlink h3 {
	text-align: center;
	font-size: 25px;
	font-family: 'HondaGlobalFontEN-Bold', "ヒラギノ角ゴ W6 JIS2004", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", Meiryo, sans-serif;
}

.bnrL {
	text-align: center;
	width: 600px;
	margin: 0 auto 50px;
	max-width: 100%;
}

.bnrL img {
	width: 100%;
}

.bottomflx {
	margin: auto;
	width: calc(340px + 340px + 340px + 30px + 30px + 20px);
	display: grid;
	grid-gap: 42px 30px;
	grid-template-columns: repeat(auto-fit, 340px);
	padding-top: 0;
	padding-left: 10px;
	padding-right: 10px;
	list-style: none;
	max-width: 100%;
	width: 730px;
	text-align: center;
}

.bottomflx a {
	overflow: hidden;
}

.bottomflx a img {
	transform: scale(1.0);
	transition: all 0.4s cubic-bezier(0.215, 0.610, 0.355, 1);
	opacity: 1;
}

.news .newsflx .newsitem .article-inner dl span span {
	color: #919191;
	margin-left: 1em;
}




.ecosystem {
	background: rgba(255, 255, 255, 70%);
}

.ecosystem .ecoInner {
	padding: 0 0 100px;
}

.ecosystem .bgh3 {
	top: -30px;
}

.ecosystem .block1fl {
	width: 900px;
	margin: 0 auto 30px;
	display: flex;
	justify-content: space-between;
	max-width: 100%;
}

.ecosystem .block1fl .bl01 {
	flex: 0 0 48%;
	background: #fff;
	padding: 20px;
	border-radius: 10px;
}

.ecosystem .block1fl .bl01 h3 {
	font-size: 22px;
	text-align: center;
	font-family: 'HondaGlobalFontEN-Bold', "ヒラギノ角ゴ W6 JIS2004", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", Meiryo, sans-serif;
	border-bottom: 2px solid #e4eaf1;
	padding-bottom: 2px;
}

.ecosystem .block1fl .bl01fl {
	display: flex;
	justify-content: space-between;
}

.ecosystem .block1fl .bl01item {
	flex: 0 0 45%;
}

.ecosystem .block1fl .bl01 .bl01item h3 {
	font-size: 20px;
	text-align: center;
	font-family: 'HondaGlobalFontEN-Bold', "ヒラギノ角ゴ W6 JIS2004", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", Meiryo, sans-serif;
	border-bottom: none;
	margin-bottom: 0.501em;
}

.ecosystem .block1fl .bl01 .bl01item figure {
	width: 80%;
	margin: 0 auto 10px;
	box-shadow: 0px 5px 10px 0px rgb(204 219 233 / 70%);
}

.ecosystem .block1fl .bl01 .bl01item p {
	font-size: 16px;
	font-family: 'HondaGlobalFontEN-Bold', "ヒラギノ角ゴ W6 JIS2004", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", Meiryo, sans-serif;
	text-align: center;
}

.ecosystem .block1fl .bl01 .bl01_img {
	width: 90%;
	margin: 0 auto;
}

.ecosystem .block2 {
	background: #fff;
	padding: 20px;
	border-radius: 10px;
	width: 900px;
	margin: 0 auto;
	max-width: 100%;
}

.ecosystem .block2 h3 {
	font-size: 22px;
	text-align: center;
	font-family: 'HondaGlobalFontEN-Bold', "ヒラギノ角ゴ W6 JIS2004", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", Meiryo, sans-serif;
	border-bottom: 2px solid #e4eaf1;
	padding-bottom: 2px;
}

.ecosystem .block2 p {
	font-size: 16px;
	font-family: 'HondaGlobalFontEN-Bold', "ヒラギノ角ゴ W6 JIS2004", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", Meiryo, sans-serif;
	text-align: center;
}

.ecosystem .block2 .bl02fl {
	display: flex;
	justify-content: space-between;
}

.ecosystem .block2 .bl01item {
	flex: 0 0 48%;
}

.ecosystem .block2 .bl01item h3 {
	font-size: 20px;
	text-align: center;
	font-family: 'HondaGlobalFontEN-Bold', "ヒラギノ角ゴ W6 JIS2004", "Hiragino Kaku Gothic ProN", "Hiragino Sans", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", Meiryo, sans-serif;
	border-bottom: none;
	margin-bottom: 0.501em;
}


@media screen and (max-width: 768px) {
	.pc {
		display: none;
	}

	.sp {
		display: block;
	}

	.main-area .mainInner {
		background: #cee5f3;
	}

	.bgh3 {
		font-size: 25px;
	}

	.bgappearTrigger {
		padding-left: 10px;
	}

	.main-area {
		max-width: 100%;
		margin: 0 auto;
		/*padding: 65px 0 0;*/
	}

	.main-area .youtubeInner {
		aspect-ratio: 1.3 / 1;
		margin-top: 0;
	}

	.main-area .vis {
		left: 5vw;
		bottom: 30px;
	}

	.main-area .read {
		font-size: 16px;
		padding: 50px 0 250px;
		background-image: url(/hydrogen/images/common/readbgSP.png);
		background-size: contain;
		background-position: bottom;
		background-repeat: no-repeat;
	}

	.news {
		padding: 50px 0 70px;
	}

	.news .newsflx .newsitem a {
		display: flex;
		flex-wrap: wrap;
	}

	.news .newsflx .newsitem {
		flex: 0 0 90%;
		margin-bottom: 1em;
	}

	.news .newsflx .newsitem figure {
		flex: 0 0 100%;
	}

	.merit .meritInner .merit_fl .merit_item {
		flex: 0 0 33%;
		margin: 0 auto 30px;
	}

	.news .newsflx .newsitem .article-inner .article-title {
		margin-bottom: 0;
	}

	.news .newsflx .newsitem .article-inner .article-detail {
		display: none;
	}

	.merit {
		padding: 50px 0 50px;
	}

	.merit .meritInner .merit_fl .merit_item h4 {
		font-size: 3vw;
	}

	.suiso .graph {
		margin: 0 auto;
		width: 100vw;
	}

	.suiso .graph .flx {
		width: 100% !important;
		justify-content: center;
	}

	.main-area .mainInner {
		background: #cee5f3;
	}

	.suiso .suisoread h2 {
		font-size: 23px;
	}

	.suiso .suisoread p {
		font-size: 16px;
	}

	.suiso .suisoInner {
		padding: 0 0 50px;
	}

	.suiso .suisomain h4 {
		position: unset;
		text-align: center;
		font-size: 20px;
	}

	.suiso .suisomain img {
		margin-bottom: 30px;
	}

	/*.suiso .domain {
		padding: 50px 0 0;
	}*/
	
	.merit .meritInner {
    max-width: 100%;
	}
	.scrl {
		font-size: 15px;
		margin-bottom: 0;
	}

	.suiso .graph {
		margin: 150px auto 0;
		width: 40vw;
	}

	.graph .flx {
		max-width: 100%;
	}

	.merit .meritInner .merit_fl {
		flex-wrap: wrap;
		width: 100%;
		margin: 0 auto;
	}

	.popuparea {
		position: inherit;
	}

	.popuparea .flx div {
		flex: 0 0 48%;
		margin-bottom: 20px;
	}

	.popuparea .flx .graph {
		flex: 0 0 100%;
		margin: 0;
	}
	.suiso .popuparea .fuel {
    position: relative;
    top: auto;
    left: auto;
    flex: 0 0 100%;
}
	.suiso .popuparea .fuel div {
    width: 50%;
    margin: 0 auto;
}
	.pop_txtarea h3 {
		font-size: 17px
	}

	.pop-flx p {
		font-size: 15px;
	}

	.popuparea .flx .lineue {
		display: none;
	}

	.popuparea .flx .zoom {
		bottom: 0;
		right: 0;
	}

	.popuparea .flx .popup_item5 {
		width: 100%;
		position: initial;
	}

	.bnrL {
		max-width: 85%;
	}

	.news .newsflx {
		justify-content: center;
	}

	.bottomflx {
		justify-content: center;
	}

	.bottomlink {
		padding: 70px 0 100px;
	}

	.ecosystem .ecoInner {
		padding: 0 0 100px;
		max-width: 90%;
		margin: 0 auto;
	}

	.ecosystem .block1fl {
		flex-wrap: wrap;
	}

	.ecosystem .block1fl .bl01 {
		margin-bottom: 20px;
		flex: 0 0 100%;
	}

	.ecosystem .block1fl {
		margin-bottom: 0;
	}

	.ecosystem .block2 .bl02fl {
		flex-wrap: wrap;
	}

	.ecosystem .block2 .bl01item {
		flex: 0 0 100%;
	}

	.ecosystem .block2 .bl01item:nth-child(1) {
		border-bottom: 1px solid #e4eaf1;
		margin-bottom: 20px;
	}

	.ecosystem .block1fl .bl01 h3 {
		font-size: 18px;
	}

	.ecosystem .block1fl .bl01 .bl01item h3 {
		font-size: 16px;
	}

	.ecosystem .block1fl .bl01 .bl01_img {
		width: 100%;
		margin: 0 auto;
	}

	.ecosystem .block2 .bl01item h3 {
		font-size: 16px;
	}

	.suiso {
		padding: 0;
	}

	.AnotherPagePopup {
		bottom: 0;
		right: auto;
		width: 100%;
	}

	.AnotherPagePopup .Popupimg a {
		width: 100%;
		height: 12em;
		font-size: 0.5em;
		border-radius: 0;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.AnotherPagePopup .Popupimg a figure {
		max-width: 40px;
		position: inherit;
		flex: 0 0 10%;
		display: block;
		/* top: 40%; */
		left: 2em;
		opacity: 1;
		margin-right: 20px;
		/* top: 50%; */
		/* transform: translate(-0%, -50%);*/
	}

	.AnotherPagePopup .Popupimg a p {
		margin: 0;
		opacity: 1;
		font-size: 2em;
		display: inline-block;
	}

	.AnotherPagePopup.popup2.ss {
		opacity: 1;
		right: 1%;
		width: 30vw;
		bottom: 1%;
		top: auto;
	}

	.AnotherPagePopup.popup2 .Popupimg a {
		background: #fff;
		border: none;
		width: 100%;
		padding: 1em;
		border-radius: 1em;
		color: #333;
		display: block;
		height: auto;
	}
}