@charset "UTF-8";

/* ====================================
	共通スタイル
 ==================================== */

article {
	font-size: 1em;
	line-height: 1.6;
}

/* ====================================
	スマートフォン専用スタイル
===================================== */
@media only screen and (max-width: 767px) {

	.sub:first-of-type {
		padding-top: 3rem;
	}

	/* title */
	#title {
		background: #fff;
	}

	#title .mainBox {
		margin: 2rem auto;
		text-align: center;
	}

	#title .text {
		font-size: 0.8em;
	}

	/* question */
	#question {
		background: #e5e5e5;
	}

	#question .head {
		background: #fff;
		padding: 2rem 0;
	}

	/* mottainai */
	#mottainai {
		background: url(images/bg-mottainai.png) repeat center top;
		text-align: center;
		padding: 0;
	}

	#mottainai .base-width {
		padding: 0;
	}

	/* answer */
	#answer {
		background: #e5e5e5;
		padding: 4rem 0 6rem;
	}

	/* サブセクション */
	.other-section,
	.sub-section {
		padding-top: 4rem;
		padding-bottom: 4rem;
		border-top: solid 1px #d9d9d9;
	}

	.sub-title-container {
		margin-bottom: 3rem;
	}

	.products-sub-title {
		margin-bottom: 3rem;
		flex-shrink: 0;
		font-size: 2.2rem;
	}

	.sub-section:first-of-type .products-sub-title {
		padding-top: 0;
		border-top: none;
	}

	.sub-title {
		margin-top: 6rem;
		margin-bottom: 2rem;
		padding: 0.25em 0;
		font-size: 1.8rem;
		text-align: center;
	}

	.sub-section .base-width > .sub-title:first-of-type {
		margin-top: 0;
	}

	/* フレックスコンテナ */
	.flex-container {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-between;
	}

	/* フレックスコンテナ：イメージテキスト */
	.flex-container.img-text>.img-container,
	.flex-container.img-text>.text-container {
		width: 48%;
	}

	/* フレックスコンテナ：ハーフ */
	.flex-container>.flex-item {
		width: 100%;
		margin-top: 3rem;
	}

	.flex-container>.flex-item:first-of-type {
		margin-top: 0;
	}

	/* フレックスコンテナ：スマホ2列 */
	.flex-container.sp-column2 {
		font-size: 1.5rem;
	}

	.flex-container.sp-column2 .ttl {
		margin-top: 0.5em;
		font-size: 1.6rem;
	}

	.flex-container.sp-column2 .text {
		margin-top: 0.5em;
		font-size: 1.4rem;
	}

	.flex-container.sp-column2 .category {
		margin-top: 0.5em;
		font-size: 1.2rem;
		line-height: 1.4;
	}

	.flex-container.sp-column2>.flex-item {
		width: 48%;
	}

	.flex-container.sp-column2>.flex-item:nth-of-type(-n+2) {
		margin-top: 0;
	}
}

/* ====================================
	PC&タブレット、印刷専用スタイル
===================================== */
@media print , screen and (min-width: 768px) {

	/* main-img */
	.main-img {
		background-color: #fff;
		overflow: hidden;
		position: relative;
	}

	.main-img img {
		position: relative;
		left: 50%;
		transform: translateX(-50%);
		width: auto;
		height: auto;
	}

	/* title */
	#title {
		background: #fff;
	}

	#title .mainBox {
		max-width: 840px;
		margin: 40px auto;
		text-align: center;
	}

	/* question */
	#question {
		background: #e5e5e5;
	}

	#question .head {
		background: #fff;
		padding: 40px 0;
	}

	#question .mainBox {
		max-width: 960px;
		margin: 0 auto;
		padding-top: 60px;
	}

	#question .sub {
		padding-bottom: 60px;
	}

	/* mottainai */
	#mottainai {
		background: url(images/bg-mottainai.png) repeat center top;
		text-align: center;
	}

	#mottainai .mainBox {
		max-width: 960px;
		margin: 0 auto;
	}

	/* answer */
	#answer {
		padding: 60px 0 80px;
		background: #e5e5e5;
	}

	#answer .img {
		position: relative;
	}

	#answer .btnDetail {
		display: block;
		position: absolute;
		top: 464px;
		right: 68px;
	}

	#answer .mainBox {
		max-width: 960px;
		margin: 0 auto;
	}

	#answer h2 {
		text-align: center;
	}

	#answer h2 img {
		width: auto;
	}

	/* サブセクション */
	.sub-section {
		padding-top: 6rem;
	}

	.products-sub-title {
		margin-bottom: 5rem;
		font-size: 2.8rem;
	}

	.sub-title {
		margin-top: 6rem;
		margin-bottom: 3rem;
		padding: 0.2em 0;
		font-size:1.8rem;
		text-align: center;
	}

	.sub-section .base-width > .sub-title:first-of-type {
		margin-top: 4rem;
	}

	/* その他エリア */
	.other-section {
		padding-top: 6rem;
	}

	.other-section .base-width {
		padding-top: 5rem;
		position: relative;
	}

	.other-section .base-width::before {
		content: '';
		display: block;
		width: 100%;
		border-top: solid 1px #d9d9d9;
		position: absolute;
		top: 0;
		left: 0;
	}

	/* フレックスコンテナ */
	.flex-container {
		display: flex;
		flex-wrap: wrap;
	}

	/* フレックスコンテナ：ハーフ */
	.flex-container.half {
		justify-content: space-between;
	}
	.flex-container.half>.flex-item {
		width: 48%;
		margin-top: 4rem;
	}
	.flex-container.half>.flex-item:nth-of-type(-n+2) {
		margin-top: 0;
	}

	/* フレックスコンテナ：イメージテキスト */
	.flex-container.img-text {
		justify-content: space-between;
	}

	.flex-container.img-text>.img-container, .flex-container.img-text>.text-container {
		width: 48%;
	}

	/* フレックスコンテナ：3列 */
	.products-sub-title + .flex-container.column3 {
		margin-top: 5rem;
	}

	.flex-container.column3 {
		font-size: 1.5rem;
	}

	.flex-container.column3 .ttl {
		font-size: 1.8rem;
	}

	.flex-container.column3>.flex-item {
		width: 31%;
		margin-left: 3.5%;
		margin-top: 2rem;
	}

	.flex-container.column3>.flex-item:nth-of-type(3n-2) {
		margin-left: 0;
	}

	.flex-container.column3>.flex-item:nth-of-type(-n+3) {
		margin-top: 0;
	}

	/* フレックスコンテナ：4列 */
	.flex-container.column4 {
		margin-top: 5rem;
	}

	.flex-container.column4 {
		font-size: 1.5rem;
	}

	.flex-container.column4 .ttl {
		margin-top: 0.5em;
		font-size: 1.6rem;
	}

	.flex-container.column4 .text {
		margin-top: 0.5em;
		font-size: 1.4rem;
	}

	.flex-container.column4 .category {
		margin-top: 0.5em;
		font-size: 1.2rem;
		line-height: 1.4;
	}

	.flex-container.column4>.flex-item {
		width: 23.5%;
		margin-left: 2%;
		margin-top: 2rem;
	}

	.flex-container.column4>.flex-item:nth-of-type(4n-3) {
		margin-left: 0;
	}

	.flex-container.column4>.flex-item:nth-of-type(-n+4) {
		margin-top: 0;
	}

	/* 発売予定 */
	.yotei {
		font-size: 0.9em;
		color: #e6000d;
	}

	.flex-container.column4 .category {
		color: #a0a0a0;
	}

	.flex-container.column4 .flex-item .img {
		border: solid 1px #d9d9d9;
	}
}

/* ====================================
	IE印刷専用スタイル
===================================== */
@media print and (-ms-high-contrast: none) {
	.flex-container.half {
		display: block;
	}

	.flex-container.half .flex-item {
		margin-left: 3.5%;
		display: inline-block;
		vertical-align: top;
	}

	.flex-container.half .flex-item:nth-child(odd) {
		margin-left: 0;
	}
}