@charset "UTF-8";

/* ===============================
	utility
================================ */
sup {
	color: #fff;
}

.caption {
	font-size: 0.77em;
	line-height: 1.4em;
}

ul.caption {
	margin-top: 4em;
	text-align: left;
}

.textWindow em {
	color: #fff100;
	font-style: normal;
}

#tips08 em {
	color: #e05149;
}

/* ===============================
	style
================================ */
article {
	font-weight: 400;
	position: relative;
}

#top {
	background: url(images/header-line.png) repeat-x center top;
	position: relative;
}

#product {
	background: #f7cdcf url(images/header-line.png) repeat-x center top;
}

section {
	color: #fff;
	background-size: 65px auto !important;
}

#tips01 {
	background: #b4363b url(images/pattern01.png) repeat center top;
}

#tips02 {
	background: #de8892 url(images/pattern02.png) repeat center top;
}

#tips03 {
	background: #aea79b url(images/pattern03.png) repeat center top;
}

#tips04 {
	background: #e07b31 url(images/pattern04.png) repeat center top;
}

#tips05 {
	background: #18649e url(images/pattern05.png) repeat center top;
}

#tips06 {
	background: #b46588 url(images/pattern06.png) repeat center top;
}

#tips07 {
	background: #4b99a4 url(images/pattern07.png) repeat center top;
}

#tips08 {
	background: #cebe0f url(images/pattern08.png) repeat center top;
}

#tips09 {
	background: #77709e url(images/pattern09.png) repeat center top;
}

#tips10 {
	background: #7dc2d7 url(images/pattern10.png) repeat center top;
}

#tips01 .question .imgWindow .img {
	background-image: url(images/image1-1.gif);
}

#tips01 .answer .imgWindow .img {
	background-image: url(images/image1-2.gif);
}

#tips02 .question .imgWindow .img {
	background-image: url(images/image2-1.gif);
}

#tips02 .answer .imgWindow .img {
	background-image: url(images/image2-2.gif);
}

#tips03 .question .imgWindow .img {
	background-image: url(images/image3-1.gif);
}

#tips03 .answer .imgWindow .img {
	background-image: url(images/image3-2.gif);
}

#tips04 .question .imgWindow .img {
	background-image: url(images/image4-1.gif);
}

#tips04 .answer .imgWindow .img {
	background-image: url(images/image4-2.gif);
}

#tips05 .question .imgWindow .img {
	background-image: url(images/image5-1.gif);
}

#tips05 .answer .imgWindow .img {
	background-image: url(images/image5-2.gif);
}

#tips06 .question .imgWindow .img {
	background-image: url(images/image6-1.gif);
}

#tips06 .answer .imgWindow .img {
	background-image: url(images/image6-2.gif);
}

#tips07 .question .imgWindow .img {
	background-image: url(images/image7-1.gif);
}

#tips07 .answer .imgWindow .img {
	background-image: url(images/image7-2.gif);
}

#tips08 .question .imgWindow .img {
	background-image: url(images/image8-1.gif);
}

#tips08 .answer .imgWindow .img {
	background-image: url(images/image8-2.gif);
}

#tips09 .question .imgWindow .img {
	background-image: url(images/image9-1.gif);
}

#tips09 .answer .imgWindow .img {
	background-image: url(images/image9-2.gif);
}

#tips10 .question .imgWindow .img {
	background-image: url(images/image10-1.gif);
}

#tips10 .answer .imgWindow .img {
	background-image: url(images/image10-2.gif);
}

/* ===============================
	navi
================================ */
#tipsNavi a[href="#"].active {
	background-image: url(images/navi-num2-top.png);
}

#tipsNavi a[href="#tips01"].active {
	background-image: url(images/navi-num2-1.png);
}

#tipsNavi a[href="#tips02"].active {
	background-image: url(images/navi-num2-2.png);
}

#tipsNavi a[href="#tips03"].active {
	background-image: url(images/navi-num2-3.png);
}

#tipsNavi a[href="#tips04"].active {
	background-image: url(images/navi-num2-4.png);
}

#tipsNavi a[href="#tips05"].active {
	background-image: url(images/navi-num2-5.png);
}

#tipsNavi a[href="#tips06"].active {
	background-image: url(images/navi-num2-6.png);
}

#tipsNavi a[href="#tips07"].active {
	background-image: url(images/navi-num2-7.png);
}

#tipsNavi a[href="#tips08"].active {
	background-image: url(images/navi-num2-8.png);
}

#tipsNavi a[href="#tips09"].active {
	background-image: url(images/navi-num2-9.png);
}

#tipsNavi a[href="#tips10"].active {
	background-image: url(images/navi-num2-10.png);
}

#prodImg {
	background: url(images/product-img.png) no-repeat center bottom;
	background-size: contain;
}

/* ===============================
	PC/Tab setting
================================ */
@media print , screen and (min-width: 1080px) {
	article img {
		width: auto;
	}
	.table {
		display: table;
		width: 100%;
	}
	.tableCell {
		display: table-cell;
		width: 50%;
		vertical-align: top;
	}
	.tableCell.left {
		padding-right: 20px;
	}
	.tableCell.right {
		padding-left: 50px;
		padding-right: 50px;
	}
	#top {
		padding-top: 20px;
		padding-bottom: 50px;
	}
	#top .visual {
		max-width: 1200px;
		margin: 0 auto;
		height: -webkit-calc(100vh - 173px);
		height: calc(100vh - 173px);
		text-align: center;
		background: url(images/main-visual.jpg) no-repeat center;
		background-size: contain;
	}
	#product {
		padding-top: 120px;
		padding-bottom: 120px;
	}
	.tipsBox {
		display: table;
		width: 100%;
	}
	.question .ttl img {
		max-width: 100%;
	}
	.textWindow {
		display: table-cell;
		width: 50%;
		padding: 10px 10px 10px 45px;
		font-size: 1.8rem;
		line-height: 2.8;
		text-align: center;
		vertical-align: middle;
	}
	.textWindow em {
		font-size: 2.4rem;
		line-height: 2.2;
	}
	.imgWindow {
		display: table-cell;
		width: 50%;
		padding: 4%;
		text-align: center;
		vertical-align: middle;
		background-color: #fff;
	}
	.imgWindow .img {
		width: 100%;
		background-color: #fff;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}

	/* フッターラインアップ */
	#footLineup {
		margin-top: 0;
		padding-top: 6rem;
	}

}

@media screen and (min-width: 1080px) {
	#scroll {
		display: block;
		width: 60px;
		height: 40px;
		background: url(images/scroll.gif) no-repeat center;
		background-size: contain;
		position: absolute;
		bottom: 5px;
		left: 50%;
		transform: translate(-50%, 0);
	}
	#topNavi {
		position: absolute;
		top: 50%;
		left: 0;
		margin-top: -250px;
	}
	#topNavi li {
		position: relative;
	}
	#topNavi li img {
		position: absolute;
		top: -45px;
		left: 45px;
		display: none;
	}
	#topNavi a {
		display: block;
		width: 45px;
		height: 45px;
		background-image: url(images/navi-dot-b.png);
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		text-decoration: none;
		text-indent: 100%;
		overflow: hidden;
	}
	#topNavi a[href="#"].active {
		background-image: url(images/navi-num1-top.png);
	}
	#topNavi a[href="#tips01"].active {
		background-image: url(images/navi-num1-1.png);
	}
	#topNavi a[href="#tips02"].active {
		background-image: url(images/navi-num1-2.png);
	}
	#topNavi a[href="#tips03"].active {
		background-image: url(images/navi-num1-3.png);
	}
	#topNavi a[href="#tips04"].active {
		background-image: url(images/navi-num1-4.png);
	}
	#topNavi a[href="#tips05"].active {
		background-image: url(images/navi-num1-5.png);
	}
	#topNavi a[href="#tips06"].active {
		background-image: url(images/navi-num1-6.png);
	}
	#topNavi a[href="#tips07"].active {
		background-image: url(images/navi-num1-7.png);
	}
	#topNavi a[href="#tips08"].active {
		background-image: url(images/navi-num1-8.png);
	}
	#topNavi a[href="#tips09"].active {
		background-image: url(images/navi-num1-9.png);
	}
	#topNavi a[href="#tips10"].active {
		background-image: url(images/navi-num1-10.png);
	}
	#tipsNavi {
		position: fixed;
		top: 50%;
		left: 0;
		margin-top: -250px;
		display: none;
	}
	#tipsNavi li {
		position: relative;
	}
	#tipsNavi li img {
		position: absolute;
		top: -45px;
		left: 45px;
		display: none;
	}
	#tipsNavi a {
		display: block;
		width: 45px;
		height: 45px;
		background-image: url(images/navi-dot-w.png);
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		text-decoration: none;
		text-indent: 100%;
		overflow: hidden;
	}
	#tipsOuterBox {
		position: relative;
	}
	#pcImgWindow {
		width: 50%;
		height: 100vh;
		padding: 4%;
		position: absolute;
		right: 0;
		background-color: #fff;
	}
	#pcImgWindow .img {
		width: 100%;
		height: 100%;
		background-color: #fff;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		-webkit-transition: background 500ms ease-out;
		-moz-transition: background 500ms ease-out;
		-o-transition: background 500ms ease-out;
		transition: background 500ms ease-out;
	}
	#pcImgWindow.top {
		top: 0;
	}
	#pcImgWindow.fix {
		position: fixed;
		top: 0;
	}
	#pcImgWindow.bottom {
		bottom: 0;
	}
	.textWindow {
		height: 100%;
	}
	.imgWindow {
		height: 100%;
	}
	.imgWindow .img {
		height: 100%;
	}
	.question {
		height: 150vh;
	}
	.answer {
		height: 125vh;
	}
	.question .textWindow {
		padding-bottom: 50vh;
		position: relative;
	}
	.question .line {
		width: 100%;
		height: 40vh;
		position: absolute;
		top: 100vh;
		left: 0;
	}
	.answer .textWindow {
		padding-bottom: 50vh;
	}
	.answer .text {
		min-height: 70rem;
	}
	.answer .text .fade {
		display: none;
	}
	/* SVGスタイル */
	.path {
		fill: #fff;
		stroke: #fff;
		stroke-width: 2;
		display: none;
	}
}

/* ===============================
	Mobile setting
================================ */
@media screen and (max-width: 1079px) {
	img {
		width: 100%;
	}
	#top {
		padding-top: 2rem;
		padding-bottom: 6rem;
	}
	#top .visual {
		max-width: 640px;
		height: 80vh;
		margin: 0 auto;
		text-align: center;
		background: url(images/main-visual@sp.jpg) no-repeat center;
		background-size: contain;
	}
	#scroll {
		display: block;
		width: 4rem;
		height: 4rem;
		background: url(images/scroll.gif) no-repeat center;
		background-size: contain;
		position: absolute;
		bottom: 2rem;
		left: 50%;
		margin-left: -2rem;
	}
	#product {
		padding-top: 4rem;
		padding-bottom: 4rem;
	}
	.tableCell.right {
		margin-top: 2rem;
		padding-bottom: 48%;
	}
	#topNavi {
		display: none;
	}
	#tipsNavi {
		position: fixed;
		top: 50%;
		left: 0;
		margin-top: -24rem;
		display: none;
	}
	#tipsNavi li img {
		display: none;
	}
	#tipsNavi a {
		display: block;
		width: 4rem;
		height: 4rem;
		background-image: url(images/navi-dot-w.png);
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		text-decoration: none;
		text-indent: 100%;
		overflow: hidden;
	}
	.textWindow {
		padding: 6rem;
	}
	.imgWindow .img {
		padding-bottom: 60%;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
	}
	.question .imgWindow:BEFORE {
		content: "";
		display: block;
		width: 100%;
		padding-bottom: 5%;
		background: url(images/bg-q-t@sp.png) no-repeat left bottom;
		background-size: contain;
	}
	.question .imgWindow:AFTER {
		content: "";
		display: block;
		width: 100%;
		padding-bottom: 5%;
		background: url(images/bg-q-b@sp.png) no-repeat left top;
		background-size: contain;
	}
	.question .img {
		background-color: #fff;
	}
	.answer {
		padding-bottom: 10%;
	}
	.answer .imgWindow {
		background: url(images/bg-a@sp.png) no-repeat center top;
		background-size: contain;
		padding: 3%;
	}
	.question .line {
		display: none;
	}
}

@media screen and (min-width: 481px) {
	.pcTabNl:BEFORE {
		content: "\A";
		white-space: pre;
	}
}

@media screen and (min-width: 481px) and (max-width: 1079px) {
	html {
	}
	article {
		font-size: 2.54vw;
		line-height: 2;
	}
	.textWindow {
		text-align: center;
	}
	.question .ttl {
		padding: 10% 25%;
	}
}

@media screen and (max-width: 480px) {
	article {
		font-weight: 500;
	}
}

@media print {
	#pcImgWindow, .line, .pageing {
		display: none !important;
	}
	.question .ttl img {
		width: 100%;
	}
	.imgWindow .img {
		min-height: 320px;
	}
	.text .fade {
		display: block !important;
	}
	section {
		page-break-after: always;
	}
}