@charset "UTF-8";

/* ===============================
	PC/Tab/Mobile共通
=============================== */
article {
	color: #000;
}

.color-blue {
	color: #00a0e9;
}

.bold {
	font-weight: bold;
}

.wh {
	color: #fff;
}
.capRed{
  color: #bc0001;
}

/* ===============================
	PC / Tab
=============================== */
@media print , screen and (min-width: 481px) {
	article {
		padding-bottom: 8rem;
	}
	.mts {
		margin-top: 4rem !important;
	}
	/* メインビジュアル */
	.main-img {
		padding-top: 3rem;
	}
	.main-img .textHikaku {
		border: 0.5px solid #bc0001;
		padding: 1rem;
		margin-top: 6rem;
		font-size: 1.2rem;
		color: #bc0001;
	}
	.main-img h2 {
		font-size: 5.6rem;
		line-height: 1.4;
		font-weight: bold;
		text-align: center;
	}
	.main-img .text {
		margin-top: 2rem;
		font-size: 1.8rem;
		line-height: 1.8;
		text-align: center;
	}
	.main-img .visual {
		padding-top: 2rem;
		overflow: hidden;
		position: relative;
	}
	.main-img .visual img {
		position: relative;
		left: 50%;
		-moz-transform: translateX(-50%);
		-webkit-transform: translateX(-50%);
		-o-transform: translateX(-50%);
		-ms-transform: translateX(-50%);
		transform: translateX(-50%);
	}
	/* メイン・概要エリア */
	.main-about {
		padding-top: 6rem;
		padding-bottom: 8rem;
		font-size: 1.6rem;
		line-height: 1.8;
		background: #bc0001;
		color: #fff;
		text-align: center;
	}
	.main-title {
		font-size: 3.8rem;
		line-height: 1.6;
		font-weight: bold;
		text-align: center;
	}
	.main-sub-title {
		margin-top: 10rem;
		font-size: 2.4rem;
		line-height: 1.6;
		font-weight: 500;
	}
	.main-text {
		margin-top: 4rem;
	}
	/* サブエリア */
	.sub-section {
		padding-top: 0rem;
		padding-bottom: 7rem;
	}
	.sub-item {
		padding-top: 5rem;
		padding-bottom: 4rem;
	}
	.sub-item .sub-title {
		padding: 0.25em 0.5em;
		font-size: 2.4rem;
		font-weight: 500;
		letter-spacing: 0.2em;
		background: #bc0001;
		color: #fff;
		text-align: center;
	}
	.sub-container {
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
		margin-top: 2rem;
		font-size: 1.6rem;
		line-height: 1.8;
	}
	.sub-container .sub-photo {
		width: 400px;
		overflow: hidden;
	}
	.sub-container .sub-text-container {
		width: 520px;
	}
	.sub-photo img {
		width: 150%;
		position: relative;
		left: -25%;
	}
	/* 効果・対応機種 */
	.effect-container {
		padding-left: 0.5em;
		margin-top: 2rem;
		font-size: 1.8rem;
		border-left: solid 5px #bc0001;
	}
	.effect-container .models {
		display: flex;
		flex-wrap: wrap;
	}
	.effect-container .models .ttl {
		margin-right: 0.5em;
		font-weight: 500;
		color: #bc0001;
	}
	.effect-container .models .ttl span {
			font-size: 1.2rem;
	}
	.effect-container .text {
		font-size: 1.4rem;
	}
	.effect-container .effect-text {
		font-weight: bold;
	}
	ul.list-models {
	}
	ul.list-models li {
		display: inline-block;
		padding: 0.25em 0.5em;
		margin-left: 0.25em;
		font-size: 0.7em;
		line-height: 1;
		background: #535353;
		color: #fff;
	}
	ul.list-models li:first-child {
		margin-left: 0;
	}

	/* ヘルシオエンジン */
	#engine {
		padding-top: 8rem;
		padding-bottom: 6rem;
		background: #f7f7f7;
		font-size: 1.6rem;
		line-height: 1.8;
	}
	#engine .sub-title {
		font-size: 2.8rem;
		line-height: 1.4;
		font-weight: bold;
		text-align: center;
	}
	#engine ul.list-feature {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}
	#engine ul.list-feature li {
		width: 47%;
		margin-top: 1em;
	}
	#engine ul.list-feature .ttl {
		font-size: 1.8rem;
		font-weight: 500;
		color: #bc0001;
	}
	#engine ul.list-feature .text {
		margin-top: 0.25em;
	}
	#engine .cap-img {
		margin-top: 4rem;
		margin-bottom: 8rem;
	}
	.engine-container {
		display: flex;
		justify-content: space-between;
		flex-wrap: wrap;
	}
	.engine-item {
		width: 47%;
	}
	.engine-item .ttl {
		padding: 0.25em 0.5em;
		margin-top: 6rem;
		font-size: 2rem;
		background: #bc0001;
		color: #fff;
		text-align: center;
	}
	.engine-item .text {
		margin-top: 1em;
	}
	.caption-container {
		padding-top: 3rem;
	}
	.cap-img {
		position: relative;
	}
	.cap-img span {
		padding: 0.25em 0.5em;
		font-size: 1.4rem;
		line-height: 1;
		border: solid 1px #000;
		position: absolute;
		bottom: 0;
		right: 0;
	}
	.link-movie {
		text-align: center;
	}
}

/* ===============================
	mobile
=============================== */
@media screen and (max-width: 480px) {
	article {
		padding-bottom: 4rem;
		line-height: 1.6;
	}
	article img {
		width: 100%;
	}
	.mts {
		margin-top: 2rem !important;
	}
	/* メインビジュアル */
	.main-img {
		padding-top: 2rem;
		text-align: center;
		overflow: hidden;
	}
	.main-img .tc {
		text-align: left;
	}
	.main-img .textHikaku {
		text-align: left;
		border: 0.5px solid #bc0001;
		padding: 1rem;
		margin-top: 3rem;
		font-size: 80%;
		color: #bc0001;
	}
	.main-img h2 {
		line-height: 1.4;
		font-weight: 500;
		font-size: 2.8rem;
		margin-top: 2rem;
	}
	.main-img .text {
		margin-top: 2em;
		line-height: 1.8;
	}
	.main-img .visual {
		width: 150%;
		padding-top: 2rem;
		position: relative;
		left: -25%;
	}
	/* サブエリア */
	.sub-section {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
	.sub-item {
		padding-top: 3rem;
		padding-bottom: 3rem;
	}
	.sub-item .sub-title {
		padding: 0.25em 0.5em;
		font-weight: 500;
		letter-spacing: 0.2em;
		background: #bc0001;
		color: #fff;
		text-align: center;
	}
	.sub-text {
		margin-top: 1em;
	}
	.sub-photo {
		margin-top: 1rem;
	}
	.sub-img {
		margin-top: 2rem;
	}
	/* 効果・対応機種 */
	.effect-container {
		padding-left: 0.5em;
		margin-top: 2rem;
		border-left: solid 5px #bc0001;
	}
	.effect-container .models {
		display: flex;
		flex-wrap: wrap;
		font-size: 1.6rem;
	}
	.effect-container .models .ttl {
		margin-right: 0.5em;
		font-weight: 500;
		color: #bc0001;
	}
	.effect-container .models .ttl span {
			font-size: 1.2rem;
	}
	.effect-container .effect-text {
		font-weight: bold;
	}
	ul.list-models {
	}
	ul.list-models li {
		display: inline-block;
		padding: 0.25em 0.5em;
		margin-left: 0.25em;
		font-size: 0.8em;
		line-height: 1;
		background: #535353;
		color: #fff;
	}
	ul.list-models li:first-child {
		margin-left: 0;
	}
	/* ヘルシオエンジン */
	#engine {
		padding-top: 3rem;
		padding-bottom: 3rem;
		background: #e5e5e5;
	}
	#engine .sub-title {
		font-size: 1.8rem;
		font-weight: bold;
		text-align: center;
	}
	#engine ul.list-feature {
		margin-top: 3rem;
	}
	#engine ul.list-feature li {
		margin-top: 1.5rem;
	}
	#engine ul.list-feature .ttl {
		font-size: 1.6rem;
		font-weight: 500;
		color: #bc0001;
	}
	#engine ul.list-feature .text {
		margin-top: 0.25em;
	}
	.engine-item .ttl {
		padding: 0.25em 0.5em;
		margin-top: 3rem;
		background: #bc0001;
		color: #fff;
		text-align: center;
	}
	.engine-item .text {
		margin-top: 1em;
		font-size: 1.4rem;
		line-height: 1.6;
	}
	.caption-container {
		padding-top: 3rem;
	}
	.cap-img {
		text-align: right;
	}
	.cap-img span {
		padding: 0.25em 0.5em;
		font-size: 1rem;
		line-height: 1;
		border: solid 1px #000;
	}
}