@charset "UTF-8";

  /* ===============================
	style
=============================== */
 .capRed{
    color: #c7243a;
  }

/* ===============================
	PC / Tab
=============================== */
@media print , screen and (min-width: 481px) {
	/* メインイメージ - トップページ */
	.main-img-product {
		height: 470px;
		background: url(images/main-img.jpg) no-repeat center center;
		position: relative;
	}
	.main-img-product h2 {
		padding-top: 12rem;
		font-size: 3.4rem;
		line-height: 1.6;
		font-weight: 500;
		color: #303030;
		text-shadow: 0 0 10px #fff, 0 0 20px #fff, 0 0 20px #fff, 0 0 20px #fff;
	}
	.main-img-product h2 em {
		font-size: 5rem;
		line-height: 1.8;
		font-weight: bold;
		color: #000;
	}
	.main-img-product .visual {
		width: 410px;
		position: absolute;
		bottom: 20px;
		left: 50%;
		margin-left: 30px;
	}
	/* メイン・概要エリア */
	.link-detail {
		font-size: 1.8rem;
		line-height: 1;
		text-align: center;
	}
	.main-about {
		padding-top: 8rem;
	}
	/* ヘルシオの健康効果バナー */
	.link-banner-health {
		width: 670px;
		margin-top: 7rem;
		margin-left: auto;
		margin-right: auto;
	}
	.link-banner-health a {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
		color: #000;
		text-decoration: none;
		box-shadow:3px 3px 5px 0px #ccc;
	}
	.link-banner-health .img {
		width: 380px;
	}
	.link-banner-health .text-container {
		display: flex;
		flex-wrap: wrap;
		align-content: center;
		width: 290px;
		padding-left: 3rem;
	}
	.link-banner-health .text-container .ttl {
		font-size: 1.8rem;
	}
	.link-banner-health em {
		font-size: 2.4rem;
		font-weight: bold;
	}
	.main-specs {
		width: 750px;
		padding-top: 3rem;
		margin-left: auto;
		margin-right: auto;
		padding-bottom: 2rem;
		border-top: solid 1px #959595;
		border-bottom: solid 1px #959595;
		font-size: 1.6rem;
	}
	.main-specs .flex-box {
		display: flex;
	}
	.main-specs .flex-box .text-box {
		width: 50%;
	}
	.main-specs .flex-box .photo-box {
		width: 50%;
	}
	.main-specs .flex-box .photo-box ul.photos {
		display: flex;
	}
	.main-specs .flex-box .photo-box ul.photos li {
		width: 50%;
		padding: 3%;
	}
	.main-specs ul.basic-info li {
		margin-top: 0.5em;
	}
	.main-specs ul.basic-info li:first-child {
		margin-top: 0;
	}
	.main-specs ul.basic-info-icon {
		display: flex;
		margin-top: 2rem;
	}
	.main-specs ul.basic-info-icon li {
		padding: 0.2em 0.8em;
		margin-left: 0.5em;
		background: #e6002e;
		color: #fff;
	}
	.main-specs ul.basic-info-icon li:first-child {
		margin-left: 0;
	}
	.main-specs .link-detail {
		margin-top: 1em;
	}
	/* 特長一覧 */
	.feature-item {
		margin-top: 8rem;
	}
	.feature-item a {
		display: block;
		text-decoration: none;
	}
	.feature-item .sub-ttl {
		width: 23rem;
		padding: 0.5em 0;
		margin-left: auto;
		margin-right: auto;
		font-size: 1.8rem;
		line-height: 1;
		text-align: center;
	}
	.feature-item .ttl {
		padding-top: 1em;
		padding-bottom: 0.5em;
		font-size: 3.5rem;
		line-height: 1.4;
		font-weight: 500;
		text-align: center;
	}
	.feature-item .link-img {
		margin-top: 2rem;
	}
}

/* ===============================
	mobile
=============================== */
@media screen and (max-width: 480px) {
	/* メインイメージ - トップページ */
	.main-img-product {
		overflow: hidden;
	}
	.main-img-product h2 {
		padding-top: 3rem;
		padding-bottom: 2rem;
		font-size: 2rem;
		font-weight: 500;
		color: #303030;
	}
	.main-img-product h2 em {
		font-size: 3rem;
		line-height: 1.8;
		font-weight: bold;
		color: #000;
	}
	.main-img-product .visual {
		width: 720px;
		height: 320px;
		background: url(images/main-img.jpg) no-repeat center center;
		background-size: cover;
		position: relative;
		left: 50%;
		-moz-transform: translateX(-68.5%);
		-webkit-transform: translateX(-68.5%);
		-o-transform: translateX(-68.5%);
		-ms-transform: translateX(-68.5%);
		transform: translateX(-68.5%);
	}
	/* ヘルシオの健康効果バナー */
	.link-banner-health {
		padding-top: 4rem;
	}
	.link-banner-health a {
		display: block;
		color: #000;
		text-decoration: none;
		box-shadow:3px 3px 5px 0px #ccc;
	}
	.link-banner-health .text-container {
		padding: 1rem 3rem;
	}
	.link-banner-health em {
		font-size: 1.8rem;
		font-weight: bold;
	}
	/* メイン・概要エリア */
	.link-detail {
		font-size: 1.6rem;
		line-height: 1;
		text-align: center;
	}
	.main-about {
		padding-top: 3rem;
	}
	.main-about .link-banner {
		margin-top: 3rem;
	}
	.main-specs {
		padding-top: 3rem;
		padding-bottom: 2rem;
		border-top: solid 1px #959595;
		border-bottom: solid 1px #959595;
	}
	.main-specs .flex-box .photo-box {
		margin-top: 2rem;
	}
	.main-specs .flex-box .photo-box ul.photos {
		display: flex;
	}
	.main-specs .flex-box .photo-box ul.photos li {
		width: 50%;
		padding: 3%;
	}
	.main-specs ul.basic-info li {
		margin-top: 0.5em;
	}
	.main-specs ul.basic-info li:first-child {
		margin-top: 0;
	}
	.main-specs ul.basic-info-icon {
		display: flex;
		margin-top: 2rem;
	}
	.main-specs ul.basic-info-icon li {
		padding: 0.2em 0.8em;
		margin-left: 0.5em;
		background: #e6002e;
		color: #fff;
	}
	.main-specs ul.basic-info-icon li:first-child {
		margin-left: 0;
	}
	.main-specs .link-detail {
		margin-top: 1em;
	}
	/* 特長一覧 */
	.feature-item {
		margin-top: 6rem;
	}
	.feature-item a {
		text-decoration: none;
	}
	.feature-item .sub-ttl {
		width: 10em;
		padding: 0.5em 0;
		margin-left: auto;
		margin-right: auto;
		font-size: 1.4rem;
		line-height: 1.1;
		text-align: center;
	}
	.feature-item .ttl {
		padding-top: 1em;
		padding-bottom: 0.5em;
		font-size: 2.4rem;
		line-height: 1.4;
		font-weight: 500;
		text-align: center;
	}
	.feature-item .link-img {
		margin-top: 2rem;
		overflow: hidden;
	}
	.feature-item .link-img img {
		width: 150%;
		position: relative;
		left: -25%;
	}
}