@charset "utf-8";

/* ============================================================
header
============================================================ */

/* h1 size adjust */

@media print, screen and (min-width:768px){
	body.lpg.delivery h1 {
		font-size: 4.6rem;
	}
	body.gas.use h1 {
		padding-left: 50px;
		font-size: 4.3rem;
	}
	body.hydrogen.use h1 {
		padding-left: 30px;
		font-size: 4.3rem;
	}
}
@media screen and (max-width:767px) {
	body.global-warming.cause h1 {
		padding-left: 9vw;
		font-size: min(6.2vw,3.6rem);
	}
	body.global-warming.clean h1 {
		padding-left: 7vw;
		font-size: min(6.3vw,3.6rem);
	}
	body.lpg.what h1 {
		padding-left: 10vw;
	}
	body.lpg.delivery h1 {
		padding-left: 8vw;
		font-size: min(6.2vw,3.6rem);
	}
	body.lpg.use h1 {
		padding-left: 8vw;
		font-size: min(6.2vw,3.6rem);
	}
	body.lpg.green h1 {
		padding-left: 12vw;
	}
	body.hydrogen.what h1 {
		padding-left: 8vw;
	}
	body.hydrogen.use h1 {
		padding-left: 10vw;
		font-size: min(6.4vw,3.6rem);
	}
	body.hydrogen.fuel-cell h1 {
		padding-left: 10vw;
	}
	body.gas.what h1 {
		padding-left: 16vw;
	}
	body.gas.how h1 {
		padding-left: 8vw;
		font-size: min(6.2vw,3.6rem);
	}
	body.gas.use h1 {
		padding-left: 8vw;
		font-size: min(6.4vw,3.6rem);
	}
	body.pickup.jiyukenkyu h1 {
		margin-bottom: 8vw;
		padding-left: 2vw;
		font-size: min(6.4vw,3.6rem);
	}
}

/* h1 icon adjust */

@media print, screen and (min-width:768px){
	body.lpg.use h1 img.icon {left: -80px;}
	body.lpg.green h1 img.icon {left: -90px;}
	body.gas.what h1 img.icon {top: 40px;left: -10px;}
	body.gas.how h1 img.icon {left: -90px;}
	body.gas.use h1 img.icon {top: 30px;left: -96px;}
	body.global-warming.clean h1 img.icon {left: -80px;}
	body.hydrogen.how h1 img.icon {left: -80px;}
	body.hydrogen.use h1 img.icon {left: -80px;}
	body.hydrogen.fuel-cell h1 img.icon {left: -80px;}
	body.pickup.suisoman h1 img.icon {top:-4px;left: -82px;}
	body.pickup.suisoman h1 img.icon.icon2 {top:-12px;left:auto;right:-72px;}
	body.pickup.jiyukenkyu h1 img.icon {top:-14px;left: -82px;}
	body.pickup.jiyukenkyu h1 img.icon.icon2 {top:-2px;left:auto;right:-72px;}
}
@media screen and (max-width:767px) {
	body.gas.what h1 img.icon {top: 6vw;left: -2vw;width: 26vw;}
	body.gas.how h1 img.icon {top: 6vw;left: -2vw;}
	body.lpg.delivery h1 img.icon {top: -1vw;left: 2vw;width: 16vw;}
	body.lpg.green h1 img.icon {top: 6vw;left: -2vw;width: 26vw;}
	body.gas.use h1 img.icon {top: 8vw;left: -3vw;}
	body.hydrogen.why h1 img.icon {top: 6vw;left: -2vw;}
	body.hydrogen.how h1 img.icon {top: -2vw;left: -2vw;}
	body.pickup.suisoman h1 img.icon {top:-3vw;left:-3vw;width:20vw;}
	body.pickup.suisoman h1 img.icon.icon2 {top:-3vw;left:auto;right:-5vw;width:20vw;}
	body.pickup.jiyukenkyu h1 img.icon {top:-3vw;left:-3vw;width:20vw;}
	body.pickup.jiyukenkyu h1 img.icon.icon2 {top:-3vw;left:auto;right:-5vw;width:20vw;}
}

/* ============================================================
main
============================================================ */

/* essential
-------------------------------------------------------------*/

/* h2 */

body article h2 {
	display: none;
}

/* nav.related */

body.sdgs main nav.related li.sdgs,
body.global-warming main nav.related li.global-warming,
body.lpg main nav.related li.lpg,
body.hydrogen main nav.related li.hydrogen,
body.gas main nav.related li.gas {
	display: none;
}
main nav.related {
	position: relative;
	background: #fffcea;
}
main nav.related::before {
	content: '';
	position: absolute;
	top: -6px;
	left: 0;
}
main nav.related dt {
	visibility: hidden;
}

@media print, screen and (min-width:768px){
	main nav.related {
		margin: 0;
		padding: 0 0 20px;
	}
	main nav.related::before {
		width: 1176px;
		height: 12px;
		background: url(/jpn/consumer/kids/common/images/related_line.png) repeat-x;
		background-position: left 5px top 0;
	}
	main nav.related dt {
		top: -0.5em;
		left: 0.05em;
		margin: 0 0 50px;
		font-size: 3.8rem;
	}
	main nav.related ul {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
		width: 930px;
		margin: 0 auto;
	}
	main nav.related li {
		margin: 0 0 26px;
	}
}
@media screen and (max-width:767px) {
	main nav.related {
		margin: 0 -2.1vw 0 -3.2vw;
		padding: 0 8vw 0.1vw;
	}
	main nav.related::before {
		width: 100%;
		height: 3vw;
		background: url(/jpn/consumer/kids/common/images/related_line_sp.png) repeat-x left -1vw center;
		background-size: 4vw;
	}
	main nav.related dt {
		top: -0.6em;
		left: 0.05em;
		margin: 0 0 2vw;
		font-size: 7vw;
	}
	main nav.related ul {
		margin: 0 auto;
	}
	main nav.related li {
		margin: 0 0 4vw;
	}
	main nav.related li a {
		display: block;
	}
}

/* nav.links */

body.lpg.what li.what,
body.lpg.delivery li.delivery,
body.lpg.use li.use,
body.lpg.green li.green {
	display: none;
}
body.global-warming.cause li.cause,
body.global-warming.savings li.savings,
body.global-warming.clean li.clean {
	display: none;
}
body.hydrogen.what li.what,
body.hydrogen.why li.why,
body.hydrogen.how li.how,
body.hydrogen.use li.use,
body.hydrogen.fuel-cell li.fuel-cell {
	display: none;
}
body.gas.what li.what,
body.gas.how li.how,
body.gas.use li.use {
	display: none;
}

body.lpg nav.links li {background: url(/jpn/consumer/kids/lpg/images/btn_bg.png);}
body.global-warming nav.links li {background: url(/jpn/consumer/kids/global-warming/images/btn_bg.png);}
body.gas nav.links li {background: url(/jpn/consumer/kids/gas/images/btn_bg.png);}
body.hydrogen nav.links li {background: url(/jpn/consumer/kids/hydrogen/images/btn_bg.png);}

body.lpg nav.links li.prev {background: url(/jpn/consumer/kids/lpg/images/btn_bg_prev.png);}
body.global-warming nav.links li.prev {background: url(/jpn/consumer/kids/global-warming/images/btn_bg_prev.png);}
body.gas nav.links li.prev {background: url(/jpn/consumer/kids/gas/images/btn_bg_prev.png);}
body.hydrogen nav.links li.prev {background: url(/jpn/consumer/kids/hydrogen/images/btn_bg_prev.png);}

nav.links li {
	position: relative;
	background-repeat: no-repeat !important;
}
nav.links li a {
	display: table-cell;
	vertical-align: middle;
	text-align: center;
	font-weight: 900;
	line-height: 1.5;
	color: #fff;
}
nav.links li:hover {
	opacity: 0.8;
	transition: opacity 0.1s;
}
nav.links li img {
	position: absolute;
	width: auto;
}
@media print, screen and (min-width:768px) {
	nav.links {
		width: 905px;
		margin: 0 auto 60px;
	}
	nav.links ul {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	nav.links li {
		width: 439px;
		height: 233px;
		margin: 0 0 30px;
	}
	body.lpg nav.links li.blank {
		background: none;
	}
	body.lpg nav.links li.first {
		position: relative;
		left: -240px;
	}
	nav.links li a {
		width: 439px;
		height: 233px;
		padding: 0 0 60px;
		font-size: 3.4rem;
		letter-spacing: 0.04em;
	}
	body.gas nav.links li.use a {
		font-size: 3.1rem;
	}
	nav.links li img {
		bottom:-18px;
	}
}
@media screen and (max-width:767px) {
	nav.links {
		margin: 0 auto 12vw;
	}
	nav.links li {
		width: 74vw;
		height: 40vw;
		margin: 0 auto 4vw;
		background-size: 100% !important;
		background-repeat: no-repeat !important;
	}
	body.lpg nav.links li.blank {
		display: none;
	}
	nav.links li a {
		width: 74vw;
		height: 40vw;
		padding: 0 0 12vw;
		line-height: 1.7;
		font-size: 2rem;
		letter-spacing: 0.04em;
	}
	nav.links li a ruby[data-ruby]::before {
		top: -1.2em;
	}
	nav.links li img {
		width:20vw;
		bottom:-1vw;
	}
}

/* nav.links (size adjust) */

@media print, screen and (min-width:768px) {
	body.gas nav.links li.use a {
		font-size: 3.1rem;
	}
	body.lpg nav.links li.delivery a,
	body.lpg nav.links li.use a {
		font-size: 3.1rem;
	}
	body.hydrogen nav.links li.use a {
		font-size: 3.2rem;
	}
}

@media screen and (max-width:767px) {
}

/* nav.links (icon adjust) */

body.gas.use li.how img {
	transform: rotate(20deg);
}


@media print, screen and (min-width:768px) {

	body.global-warming li.cause img {bottom:-30px;}
	body.global-warming li.savings img {bottom:-38px;}
	body.global-warming li.clean img {bottom:-18px;}
	/* ---------------- */
	body.global-warming.cause li.savings img {left:-64px;}
	body.global-warming.cause li.clean img {right:-80px;}
	/* -------- */
	body.global-warming.savings li.cause img {left:-64px;}
	body.global-warming.savings li.clean img {right:-80px;}
	/* -------- */
	body.global-warming.clean li.cause img {left:-64px;}
	body.global-warming.clean li.savings img {right:-54px;}

	body.lpg li.what img {bottom:7px;}
	body.lpg li.delivery img {bottom:7px;}
	body.lpg li.use img {bottom:-18px;}
	body.lpg li.green img {bottom:-60px;}
	/* ---------------- */
	body.lpg.what li.delivery img {left:-114px;}
	body.lpg.what li.use img {left:-80px;}
	body.lpg.what li.green img {right:-60px;}
	/* -------- */
	body.lpg.delivery li.what img {left:-64px;}
	body.lpg.delivery li.use img {left:-80px;}
	body.lpg.delivery li.green img {right:-60px;}
	/* -------- */
	body.lpg.use li.what img {left:-64px;}
	body.lpg.use li.delivery img {left:-80px;}
	body.lpg.use li.green img {right:-60px;}
	/* -------- */
	body.lpg.green li.what img {left:-64px;}
	body.lpg.green li.delivery img {left:-114px;}
	body.lpg.green li.use img {right:-80px;}

	body.hydrogen li.what img {bottom:7px;}
	body.hydrogen li.why img {bottom:-12px;}
	body.hydrogen li.how img {bottom:-18px;}
	body.hydrogen li.use img {bottom:-36px;}
	body.hydrogen li.fuel-cell img {bottom:-20px;}
	/* ---------------- */
	body.hydrogen.what li.why img {left:-32px;}
	body.hydrogen.what li.how img {right:-60px;}
	body.hydrogen.what li.use img {left:-90px;}
	body.hydrogen.what li.fuel-cell img {right:-40px;}
	/* ---------------- */
	body.hydrogen.why li.what img {left:-92px;}
	body.hydrogen.why li.how img {right:-60px;}
	body.hydrogen.why li.use img {left:-90px;}
	body.hydrogen.why li.fuel-cell img {right:-40px;}
	/* ---------------- */
	body.hydrogen.how li.what img {left:-92px;}
	body.hydrogen.how li.why img {right:-32px;}
	body.hydrogen.how li.use img {left:-90px;}
	body.hydrogen.how li.fuel-cell img {right:-40px;}
	/* ---------------- */
	body.hydrogen.use li.what img {left:-92px;}
	body.hydrogen.use li.why img {right:-32px;}
	body.hydrogen.use li.how img {left:-90px;}
	body.hydrogen.use li.fuel-cell img {right:-40px;}
	/* ---------------- */
	body.hydrogen.fuel-cell li.what img {left:-92px;}
	body.hydrogen.fuel-cell li.why img {right:-32px;}
	body.hydrogen.fuel-cell li.how img {left:-90px;}
	body.hydrogen.fuel-cell li.use img {right:-90px;}

	body.gas li.what img {bottom:-16px;}
	body.gas li.how img {bottom:-16px;}
	body.gas li.use img {bottom:-8px;}
	/* ---------------- */
	body.gas.what li.how img {left:-40px;}
	body.gas.what li.use img {right:-30px;}
	/* -------- */
	body.gas.how li.what img {left:-40px;}
	body.gas.how li.use img {right:-30px;}
	/* -------- */
	body.gas.use li.what img {left:-40px;}
	body.gas.use li.how img {right:-30px;}

}
@media screen and (max-width:767px) {

	body.global-warming li.cause img {width:20vw;bottom:-1vw;}
	body.global-warming li.savings img {width:20vw;bottom:-1vw;}
	body.global-warming li.clean img {width:24vw;bottom:-2vw;}
	/* ---------------- */
	body.global-warming.cause li.savings img {left:-8vw;}
	body.global-warming.cause li.clean img {right:-6vw;}
	/* -------- */
	body.global-warming.savings li.cause img {left:-8vw;}
	body.global-warming.savings li.clean img {right:-6vw;}
	/* -------- */
	body.global-warming.clean li.cause img {left:-8vw;}
	body.global-warming.clean li.savings img {right:-6vw;}

	body.lpg li.what img {width:22vw;bottom:1vw;}
	body.lpg li.delivery img {width:26vw;bottom:-2vw;}
	body.lpg li.use img {width:22vw;bottom:-2vw;}
	body.lpg li.green img {width:16vw;bottom:-2vw;}
	/* ---------------- */
	body.lpg.what li.delivery img {left:-8vw;}
	body.lpg.what li.use img {right:-6vw;}
	body.lpg.what li.green img {left:-6vw;}
	/* -------- */
	body.lpg.delivery li.what img {left:-8vw;}
	body.lpg.delivery li.use img {right:-6vw;}
	body.lpg.delivery li.green img {left:-6vw;}
	/* -------- */
	body.lpg.use li.what img {left:-8vw;}
	body.lpg.use li.delivery img {right:-6vw;}
	body.lpg.use li.green img {left:-6vw;}
	/* -------- */
	body.lpg.green li.what img {left:-8vw;}
	body.lpg.green li.delivery img {right:-6vw;}
	body.lpg.green li.use img {left:-6vw;}

	body.hydrogen li.what img {width:24vw;bottom:1vw;}
	body.hydrogen li.why img {width:20vw;bottom:-2vw;}
	body.hydrogen li.how img {width:20vw;bottom:-2vw;}
	body.hydrogen li.use img {width:22vw;bottom:-3vw;}
	body.hydrogen li.fuel-cell img {width:16vw;bottom:-2vw;}
	/* ---------------- */
	body.hydrogen.what li.why img {left:-8vw;}
	body.hydrogen.what li.how img {right:-8vw;}
	body.hydrogen.what li.use img {left:-9vw;}
	body.hydrogen.what li.fuel-cell img {right:-6vw;}
	/* ---------------- */
	body.hydrogen.why li.what img {left:-12vw;}
	body.hydrogen.why li.how img {right:-8vw;}
	body.hydrogen.why li.use img {left:-9vw;}
	body.hydrogen.why li.fuel-cell img {right:-6vw;}
	/* ---------------- */
	body.hydrogen.how li.what img {left:-12vw;}
	body.hydrogen.how li.why img {right:-8vw;}
	body.hydrogen.how li.use img {left:-9vw;}
	body.hydrogen.how li.fuel-cell img {right:-6vw;}
	/* ---------------- */
	body.hydrogen.use li.what img {left:-12vw;}
	body.hydrogen.use li.why img {right:-8vw;}
	body.hydrogen.use li.how img {left:-9vw;}
	body.hydrogen.use li.fuel-cell img {right:-6vw;}
	/* ---------------- */
	body.hydrogen.fuel-cell li.what img {left:-12vw;}
	body.hydrogen.fuel-cell li.why img {right:-8vw;}
	body.hydrogen.fuel-cell li.how img {left:-9vw;}
	body.hydrogen.fuel-cell li.use img {right:-6vw;}

	body.gas li.what img {width:16vw;bottom:-2vw;}
	body.gas li.how img {width:12vw;bottom:-1vw;}
	body.gas li.use img {width:12vw;bottom:-2vw;}
	/* ---------------- */
	body.gas.what li.how img {left:-4vw;}
	body.gas.what li.use img {right:-4vw;}
	/* -------- */
	body.gas.how li.what img {left:-6vw;}
	body.gas.how li.use img {right:-4vw;}
	/* -------- */
	body.gas.use li.what img {left:-6vw;}
	body.gas.use li.how img {right:-4vw;}

}


/* dl.column */

main dl.column {
	display: flex;
	justify-content: center;
	align-items: center;
	flex-direction: column;
	position: relative;
	text-align: center;
	color: #fff;
}
main dl.column dt {
	line-height: 1.4;
	font-family: 'M PLUS Rounded 1c', sans-serif;
}
main dl.column dd {
	line-height: 1.8;
	font-weight: 700;
}
main dl.column dd.line {
	background: url(/jpn/consumer/kids/common/images/column_line.png);
}
main dl.column img.i1,
main dl.column img.i2 {
	width: auto;
	position: absolute;
}

@media print, screen and (min-width:768px){
	main dl.column {
		width: 1025px;
		height: 371px;
		margin: 0 auto 120px;
		background: url(/jpn/consumer/kids/common/images/column_frame.png);
	}
	main dl.column dt {
		font-size: 3.8rem;
	}
	main dl.column dd.line {
		height: 9px;
		margin: 22px 0 18px;
	}
	main dl.column dd {
		width: 664px;
		font-size: 2.2rem;
	}
	main dl.column dd.line + dd {
		padding: 0 0.3em;
		text-align: justify;
	}
	main dl.column dd img {
		width: auto;
	}
}
@media screen and (max-width:767px) {
	main dl.column {
		width: 86vw;
		max-width: 21em;
		margin: 12vw auto 16vw;
		padding: 14vw 10vw 30vw;
		background: url(/jpn/consumer/kids/common/images/column_frame_sp_1.png) no-repeat;
		background-size: 100% 100% !important;
		font-size: 1.8rem;
	}
	main dl.column.large {
		background: url(/jpn/consumer/kids/common/images/column_frame_sp_2.png) no-repeat;
		padding: 14vw 10vw 14vw;
	}
	main dl.column dt {
		font-size: 2.4rem;
	}
	main dl.column dd.line {
		width: 68vw;
		max-width: 16em;
		height: 2.6vw;
		margin: 2.4vw 0 2vw;
		background-sie: 76vw !important;
		background-repeat: no-repeat;
	}
	main dl.column dd.line + dd {
		text-align: justify;
	}
	main dl.column img.i1,
	main dl.column img.i2 {
		width: 24vw;
		max-width: 6em;
		bottom: -2vw;
		right: -4vw;
	}
}

/* dl.column (icon adjust) */

@media print, screen and (min-width:768px){
	body.sdgs main dl.column img.i1 {
		bottom: 20px;
		left: -40px;
	}
	body.sdgs main dl.column img.i2 {
		bottom: 0;
		right: -20px;
	}
	body.lpg.what main dl.column img.i1 {
		bottom: -30px;
		left: -5px;
	}
	body.lpg.what main dl.column img.i2 {
		bottom: 0;
		right: -20px;
	}
	body.lpg.delivery main dl.column img.i1 {
		bottom: -30px;
		left: -15px;
	}
	body.lpg.delivery main dl.column img.i2 {
		bottom: 0;
		right: 5px;
	}
	body.lpg.use main dl.column img.i1 {
		bottom: -20px;
		left: 16px;
	}
	body.lpg.use main dl.column img.i2 {
		bottom: -11px;
		right: -11px;
	}
	body.lpg.green main dl.column img.i1 {
		bottom: -20px;
		left: 36px;
	}
	body.lpg.green main dl.column img.i2 {
		bottom: -21px;
		right: -16px;
	}
	body.global-warming.cause main dl.column img.i1 {
		bottom: -30px;
		left: -5px;
	}
	body.global-warming.savings main dl.column img.i1 {
		bottom: -30px;
		left: -35px;
	}
	body.global-warming.savings main dl.column img.i2 {
		bottom: 0;
		right: -6px;
	}
	body.global-warming.clean main dl.column img.i1 {
		bottom: -4px;
		left: -25px;
	}
	body.global-warming.clean main dl.column img.i2 {
		bottom: 0;
		right: -46px;
	}
	body.hydrogen.what main dl.column {
		margin: 0 auto 190px;
		padding: 0 0 10px;
	}
	body.hydrogen.what main dl.column dd {
		width: 620px;
	}
	body.hydrogen.what main dl.column dd.img_large {
		position: absolute;
		bottom: -100px;
		left: -40px;
		width: 1080px;
	}
	body.hydrogen.what main dl.column dd.img_large img {
		width: 1080px;
		height: 295px;
	}
	body.hydrogen.why main dl.column img.i1 {
		bottom: -40px;
		right: -4px;
	}
	body.hydrogen.how main dl.column img.i1 {
		bottom: 5px;
		right: -4px;
	}
	body.hydrogen.use main dl.column img.i1 {
		bottom: -40px;
		left: -4px;
	}
	body.hydrogen.use main dl.column img.i2 {
		bottom: 15px;
		right: -14px;
	}
	body.hydrogen.fuel-cell main dl.column img.i1 {
		bottom: -2px;
		left: 14px;
	}
	body.hydrogen.fuel-cell main dl.column img.i2 {
		bottom: 25px;
		right: 12px;
	}
	body.gas.what main dl.column img.i1 {
		bottom: 0;
		right: -20px;
	}
	body.gas.how main dl.column img.i1 {
		bottom: 0;
		left: -20px;
	}
	body.gas.use main dl.column img.i1 {
		bottom: -4px;
		left: 35px;
	}
	body.gas.use main dl.column img.i2 {
		bottom: 0;
		right: -4px;
	}
}
@media screen and (max-width:767px) {
	body.sdgs main dl.column img.i1 {
		width: 30vw;
		bottom: 8vw;
		left: -6vw;
	}
	body.sdgs main dl.column img.i2 {
		right: -4vw;
	}
	body.lpg.what main dl.column img.i1 {
		bottom: -8vw;
		left: 11vw;
	}
	body.lpg.what main dl.column img.i2 {
		bottom: -8vw;
		right: 11vw;
	}
	body.lpg.delivery main dl.column img.i1 {
		bottom: -8vw;
		left: -2vw;
	}
	body.lpg.delivery main dl.column img.i2 {
		width: 20vw;
		bottom: -8vw;
		right: -2vw;
	}
	body.lpg.use main dl.column img.i1 {
		width: 18vw;
		bottom: -8vw;
		left: 2vw;
	}
	body.lpg.use main dl.column img.i2 {
		bottom: -8vw;
		right: -2vw;
	}
	body.lpg.green main dl.column img.i1 {
		width: 17vw;
		bottom: -8vw;
		left: 4vw;
	}
	body.lpg.green main dl.column img.i2 {
		bottom: -8vw;
		right: -2vw;
	}
	body.global-warming.cause main dl.column img.i1 {
		width: 24vw;
		bottom: -6vw;
		left: 10vw;
	}
	body.global-warming.savings main dl.column img.i1 {
		width: 36vw;
		bottom: 4vw;
		left: -4vw;
	}
	body.global-warming.savings main dl.column img.i2 {
		right: 1vw;
	}
	body.global-warming.clean main dl.column img.i1 {
		width: 24vw;
		bottom: -4vw;
		left: -4vw;
	}
	body.global-warming.clean main dl.column img.i2 {
		width: 30vw;
		bottom: 4vw;
		right: -4vw;
	}
	body.gas.what main dl.column img.i1 {
		width: 24vw;
		bottom: -4vw;
		right: -4vw;
	}
	body.gas.how main dl.column img.i1 {
		width: 24vw;
		bottom: -4vw;
		left: -4vw;
	}
	body.hydrogen.what main dl.column dd.img_large {
		margin: 4vw 0 0;
	}
	body.gas.use main dl.column img.i1 {
		width: 14vw;
		bottom: -2vw;
		left: 6vw;
	}
	body.gas.use main dl.column img.i2 {
		right: 1vw;
	}
	body.hydrogen.why main dl.column img.i2 {
		right: 1vw;
	}
	body.hydrogen.use main dl.column img.i1 {
		left: 1vw;
		bottom: -6vw;
	}
	body.hydrogen.use main dl.column img.i2 {
		width: 34vw;
		bottom: 6vw;
		right: 1vw;
	}
	body.hydrogen.fuel-cell main dl.column img.i1 {
		bottom: -6vw;
		left: 1vw;
	}
	body.hydrogen.fuel-cell main dl.column img.i2 {
		width: 20vw;
		bottom: -3vw;
		right: -1vw;
	}
}

/* dl.column (size adjust) */

@media print, screen and (min-width:768px){
	body.gas.how main dl.column dd {
		width: 664px;
		font-size: 2rem;
	}
	body.gas.how main dl.column dd.line {
		margin: 10px 0 8px;
	}
}
@media screen and (max-width:767px) {
	body.hydrogen.why main dl.column dt {
		font-size: 2.2rem;
	}
}


/* block
-------------------------------------------------------------*/

/* dl.about */

dl.about dd.txt {
	text-align: justify !important;
}

/* ul.text */

main ul.text dd {
	font-weight: 700;
	color: #634e44;
}

@media print, screen and (min-width:768px){
	main ul.text {
		width: 1025px;
		margin: 0 auto;
	}
	main ul.text li {
		margin: 0 0 70px;
		overflow: hidden;
	}
	main ul.text dl {
		width: 486px;
		float: left;
	}
	main ul.text dt {
		margin: 0 0 25px;
	}
	main ul.text dd {
		line-height: 1.8;
		font-size: 2rem;
	}
	main ul.text p {
		float: right;
	}
	main ul.text li.t2 dl {
		float: right !important;
	}
	main ul.text li.t2 p {
		float: left !important;
	}

	main ul.text li.t3 dl {
		width: 1025px;
		text-align: center;
	}
	main ul.text li.t3 dl dt {
		display: inline-block;
	}
	main ul.text li.t3 dl dd {
		text-align: left;
	}
	main ul.text li.t3 p {
		margin: 25px 0 0;
		width: 1025px;
		text-align: center;
	}

	main ul.text li.t4 dl {
		width: 1025px;
		text-align: center;
	}
	main ul.text li.t4 dl dt {
		display: inline-block;
	}
	main ul.text li.t4 dl dd {
		float: left;
		width: 486px;
		text-align: left;
	}
	main ul.text li.t4 dl dd.img {
		float: right;
	}
}

@media screen and (max-width:767px) {
	main ul.text li {
		margin: 0 3.5vw 10vw 2vw;
	}
	main ul.text li p {
		width: 80vw;
		margin: 4vw auto 0;
	}
	main ul.text dt {
		margin: 0 0 0.5em;
	}
	main ul.text dd {
		margin: 0 0 1.5em;
		text-align: justify;
		line-height: 1.6;
		font-size: 1.8rem;
	}
	main ul.text dd.txt,
	main ul.text li.t3 dd {
	}
}

/* dl.topics */

dl.topics > dt {
	display: none;
}
dl.topics > dd {
	position: relative;
}
dl.topics > dd dt {
	font-weight: 700;
	color: #fdd80a;
}
dl.topics > dd dd {
	font-weight: 700;
	color: #fff;
}

@media print, screen and (min-width:768px) {
	dl.topics {
		width: 1113px;
		height: 383px;
		margin: 24px 0 80px 63px;
		background: url(/jpn/consumer/kids/common/images/topics_bg.png);
	}
	dl.topics > dd {
		padding: 120px 0 0 75px;
	}
	dl.topics > dd p {
		position: absolute;
		top: 26px;
		right: 40px;
	}
	dl.topics > dd dl {
		width: 580px;
	}
	dl.topics > dd dt {
		margin: 0 0 15px;
		line-height: 1.4;
		font-size: 2.4rem;
	}
	dl.topics > dd dd {
		line-height: 1.7;
		font-size: 2rem;
	}
	dl.topics.large {
		height: 530px;
		background: url(/jpn/consumer/kids/common/images/topics_bg_large.png);
	}
	dl.topics.large > dd {
		padding: 105px 0 0 75px;
	}
	dl.topics.large > dd p {
		position: static;
		margin: 10px 0 0;
	}
	dl.topics.large > dd dl {
		width: 950px;
	}
	dl.topics.large > dd dt {
		margin: 0 0 5px;
	}
}
@media screen and (max-width:767px) {
	dl.topics {
		position: relative;
		margin: 36vw 0 26vw;
		padding: 3vw 8vw 4vw;
		background: url(/jpn/consumer/kids/common/images/topics_bg_sp_2.png) repeat-y;
		background-size: 86vw;
	}
	dl.topics::before,
	dl.topics::after {
		content: '';
		position: absolute;
		left: 0;
		width: 86vw;
	}
	dl.topics::before {
		top: -20vw;
		height: 22vw;
		background: url(/jpn/consumer/kids/common/images/topics_bg_sp_1.png) no-repeat;
		background-position: left top;
		background-size: 86vw auto;
	}
	dl.topics::after {
		bottom: -11vw;
		height: 12vw;
		background: url(/jpn/consumer/kids/common/images/topics_bg_sp_3.png) no-repeat;
		background-position: left bottom;
		background-size: 86vw;
	}
	dl.topics > dd dt {
		margin: 0 0 3vw;
		line-height: 1.6;
		font-size: 2rem;
	}
	dl.topics > dd dd {
		margin: 0 0 8vw;
		line-height: 1.8;
		font-size: 1.8rem;
		text-align: justify;
	}
}

/* dl.topics (icon adjust) */

@media print, screen and (min-width:768px) {
	body.global-warming.cause dl.topics > dd p {
		top: 26px;
		right: 40px;
	}
	body.hydrogen.what dl.topics > dd p {
		top: 22px;
		right: 30px;
	}
	body.gas.what dl.topics > dd p {
		top: 32px;
		right: 80px;
	}
	body.gas.how dl.topics > dd p {
		top: 54px;
		right: 110px;
	}
	body.lpg.delivery dl.topics > dd p {
		right: 80px;
	}
	body.lpg.use dl.topics > dd p {
		right: 65px;
	}
	body.lpg.green dl.topics > dd p {
		top: 66px;
		right: 66px;
	}
	body.hydrogen.how dl.topics > dd p {
		top: 60px;
		right: 36px;
	}
	body.hydrogen.use dl.topics > dd p {
		top: 60px;
		right: 36px;
	}
	body.hydrogen.fuel-cell dl.topics > dd p {
		top: 60px;
		right: 60px;
	}
}

@media screen and (max-width:767px) {
	body.gas.how dl.topics > dd p {
		width: 36vw;
		margin: 0 auto;
	}
	body.gas.what dl.topics > dd p {
		width: 50vw;
		margin: 0 auto;
	}
}

/* dl.topics (adjust misc) */

@media print, screen and (min-width:768px) {
	body.global-warming.cause dl.topics > dd dl {
		width: 620px;
	}
	body.global-warming.clean dl.topics > dd dl {
		width: 620px;
	}
	body.global-warming.clean dl.topics > dd dl dt {
		margin: -20px 0 5px;
	}
	body.hydrogen.how dl.topics > dd dl {
		width: 600px;
	}
}

/* p.comment */

p.comment {
	display: flex;
	justify-content: center;
	align-items: center;
	position: relative;
	font-weight: 900;
	color: #634e44;
}
p.comment::before {
	content: '';
	position: absolute;
	background: url(/jpn/consumer/kids/common/images/comment_bubble.png);
	background-repeat: no-repeat !important;
	background-size: contain !important;
}
p.comment img.icon {
	position: absolute;
	width: auto;
}

@media print, screen and (min-width:768px) {
	p.comment {
		line-height: 1.4;
		font-size: 3rem;
		width: 858px;
		height: 140px;
		background: url(/jpn/consumer/kids/common/images/comment_frame_1.png);
		text-align: center;
	}
	p.comment.mini {
		width: 853px;
		height: 97px;
		background: url(/jpn/consumer/kids/common/images/comment_frame_2.png);
	}
	p.comment.R_1 {
		margin: 0 0 90px 80px;
	}
	p.comment.L_1 {
		margin: 0 0 90px 240px;
	}
	p.comment::before {
		bottom: -26px;
		z-index: -1;
		width: 101px;
		height: 65px;
	}
	p.comment.R_1::before {
		right: -40px;
	}
	p.comment.L_1::before {
		left: -40px;
		transform: scale(-1, 1);
	}
	p.comment img.icon {
		top: 0;
	}
	p.comment.R_1 img.icon {
		right: -174px;
	}
	p.comment.L_1 img.icon {
		left: -184px;
	}
	p.comment.mini img.icon {
		top: -20px;
	}
}
@media screen and (max-width:767px) {
	p.comment {
		margin: 0 18vw 43vw 2vw;
		padding: 6vw;
		line-height: 1.4;
		font-size: 2.2rem;
		background: url(/jpn/consumer/kids/common/images/comment_frame_sp.png);
		background-size: 100% 100%;
	}
	p.comment.L_1 {
		margin: 0 2vw 43vw 18vw;
	}
	p.comment::before {
		z-index: -1;
		bottom: -16vw;
		right: 16vw;
		width: 18vw;
		height: 65px;
	}
	p.comment.R_1::before {
		right: 16vw;
	}
	p.comment.L_1::before {
		left: 12vw;
		transform: scale(-1, 1);
	}
	p.comment img.icon {
		position: absolute;
		width: 30vw;
		bottom: -15vw;
		right: -17vw;
	}
	p.comment.R_1 img.icon {
		right: -17vw;
	}
	p.comment.L_1 img.icon {
		left: -20vw;
	}
	p.comment br {
		display: none;
	}
}

/* p.comment (icon adjust) */

@media print, screen and (min-width:768px) {
	body.lpg.delivery p.comment img.icon {
		top: -40px;
		right: -166px;
	}
	body.lpg.use p.comment img.icon {
		top: 40px;
		right: -200px;
	}
	body.gas.how p.comment img.icon {
		top: -40px;
		right: -180px;
	}
	body.hydrogen.why p.comment img.icon {
		top: 10px;
		left: -176px;
	}
	body.hydrogen.use p.comment img.icon {
		top: -30px;

	}
}
@media screen and (max-width:767px) {
	body.lpg.delivery p.comment img.icon {
		width: 26vw;
		bottom: -15vw;
		right: -17vw;
	}
	body.lpg.use p.comment img.icon {
		bottom: -15vw;
		right: -16vw;
	}
	body.gas.how p.comment img.icon {
		bottom: -17vw;
		right: -21vw;
	}
}

/* element
-------------------------------------------------------------*/

/* .ttl_y .ttl_b */

.ttl_b,.ttl_y {
	font-family: 'M PLUS Rounded 1c', sans-serif;
}
.ttl_b {
	color: #339fde;
	background: url(/jpn/consumer/kids/common/images/line_blue.svg) repeat-x left bottom;
}
.ttl_y {
	color: #ea8a00;
	background: url(/jpn/consumer/kids/common/images/line_orange.svg) repeat-x left bottom;
}

@media print, screen and (min-width:768px){
	.ttl_b,.ttl_y {
		padding: 0 0 14px;
		line-height: 1.4;
		font-size: 3.2rem;
	}
}
@media screen and (max-width:767px) {
	.ttl_b,.ttl_y {
		padding: 0 0 0.7em;
		line-height: 1.4;
		font-size: 2.4rem;
	}
}

/* .ttl_box */

.ttl_box {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	text-align: center;
	background: #309edd;
	border-radius: 16px;
	margin: 0 auto;
	line-height: 1;
	font-family: 'M PLUS Rounded 1c', sans-serif;
	color: #fff;
}
.ttl_box img {
	position: absolute;
	width: 6px;
	top: auto;

}
.ttl_box img:nth-of-type(1) {left:10px;top:10px;}
.ttl_box img:nth-of-type(2) {right:10px;top:10px;}
.ttl_box img:nth-of-type(3) {left:10px;bottom:10px;}
.ttl_box img:nth-of-type(4) {right:10px;bottom:10px;}


@media print, screen and (min-width:768px) {
	.ttl_box {
		height: 68px;
		font-size: 2.6rem;
	}
}
@media screen and (max-width:767px) {
	.ttl_box img {
		width: 5px;
	}

	.ttl_box {
		padding: 0.5em 0 0.5em;
		line-height: 1.4;
		font-size: 2rem;
	}
}

/* ============================================================
dubug
============================================================ */

/* debug (2022/06/01) (hide cache box)
-------------------------------------------------- */

/* div#onetrust-banner-sdk {display: none !important;} */