@charset "UTF-8";
/* wordArea
================================================== */
#wordArea {
	position: relative;
	padding-top: 60px;
}
@media screen and (max-width: 400px) {
	#wordArea {
		padding-top: 40px;
	}
}
/* wordBox
================================================== */
.wordBox {
	background-color: #ea5205;
	margin: 0;
	background: linear-gradient(-45deg, #ff681b 25%, #ea5205 25%, #ea5205 50%, #ff681b 50%, #ff681b 75%, #ea5205 75%, #ea5205);
	background-size: 600px 600px;
	animation: anime_stripe_1 25s infinite linear;
}
@keyframes anime_stripe_1 {
	0% {
		background-position-x: 0;
	}
	100% {
		background-position-x: -600px;
	}
}
@media screen and (max-width: 1100px) {
	.wordBox {
		margin: 0;
	}
}
.wordBox h2 {
	color: #fff;
	font-size: 180%;
	text-align: center;
	padding: 1.5% 0;
	margin: 0;
	white-space: nowrap;
}
.wordBox h2 br {
	display: none;
}
@media screen and (max-width: 1100px) {
	.wordBox h2 {
		font-size: 2.5vw;
	}
}
@media screen and (max-width: 600px) {
	.wordBox h2 {
		font-size: 100%;
		display: inherit;
		text-align: center;
		white-space: normal;
	}
	.wordBox h2 br {
		display: block;
	}
}
@media screen and (max-width: 400px) {
	.wordBox h2 {
		font-size: 90%;
	}
}
/* pureWrapper
================================================== */
#pureWrapper {
}
/* mainArea
================================================== */
#mainArea {
	position: relative;
	max-width: 1400px;
	margin: 0 auto;
	padding-bottom: 5%;
}
#mainArea img {
	width: 100%;
}
#mainBox {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 0;
}
#mainTxt {
	position: absolute;
	z-index: 4;
	top: 4%;
	left: 7%;
	padding: 0;
	margin: 0;
	font-weight: 700;
	font-size: 200%;
	color: #fff;
	background-color: #ea5205;
	padding: 0.5em 5%;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
@media screen and (max-width: 1400px) {
	#mainTxt {
		font-size: 2.4vw;
	}
}
@media screen and (max-width: 600px) {
	#mainTxt {
		width: 80%;
		top: 3%;
		left: 5%;
		font-size: 5.2vw;
		text-align: center;
		padding: 0.3em 5%;
	}
}
#mainTit {
	position: absolute;
	z-index: 4;
	top: 13%;
	left: 7%;
	width: 54%;
	padding: 0;
	margin: 0;
}
@media screen and (max-width: 600px) {
	#mainTit {
		top: 12%;
		left: 10%;
		width: 80%;
	}
}
#mainItem {
	position: relative;
	z-index: 3;
	padding: 2% 0 0 65%;
	margin: 0;
	width: 30%;
}
@media screen and (max-width: 600px) {
	#mainItem {
		padding: 45% 0 20% 55%;
		margin: 0;
		width: 40%;
	}
}
#mainBg {
	position: absolute;
	top: 0;
	left: 0;
	z-index: 0;
	padding: 0;
	margin: 0;
	width: 100%;
}
#mainPrice {
	position: absolute;
	z-index: 4;
	top: 32%;
	left: 7%;
	width: 48%;
	padding: 0;
	margin: 0;
}
@media screen and (max-width: 600px) {
	#mainPrice {
		top: 25%;
		left: 10%;
		width: 58%;
		padding: 0;
		margin: 0;
	}
}
#mainCampaign {
	position: absolute;
	z-index: 4;
	top: 55%;
	left: 4%;
	width: 23%;
	padding: 0;
	margin: 0;
    filter:drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.15));
}
@media screen and (max-width: 600px) {
	#mainCampaign {
		top: 37%;
		left: 4%;
		width: 26%;
	}
}
#mainCopy02 {
	position: absolute;
	z-index: 4;
	top: 57.5%;
	left: 29%;
	width: 16%;
	padding: 0;
	margin: 0;
    filter:drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.15));
}
@media screen and (max-width: 600px) {
	#mainCopy02 {
		top: 53.8%;
		left: 4%;
		width: 26%;
	}
}
#mainCopy01 {
	position: absolute;
	z-index: 16;
	top: 1%;
	right: 18%;
	width: 13%;
	padding: 0;
	margin: 0;
    filter:drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.15));
}
@media screen and (max-width: 600px) {
	#mainCopy01 {
		top: 75%;
		left: 31%;
		width: 26%;
	}
}
#mainCopy03 {
	position: absolute;
	z-index: 16;
	top: 1%;
	right: 31%;
	width: 13%;
	padding: 0;
	margin: 0;
    filter:drop-shadow(5px 5px 5px rgba(0, 0, 0, 0.15));
}
@media screen and (max-width: 600px) {
	#mainCopy03 {
		top: 75%;
		left: 4%;
		width: 26%;
	}
}
/* centerArea
================================================== */
.centerArea {
	position: relative;
	padding: 65% 5% 0;
    max-width: 1000px;
    margin: 0 auto;
}
@media screen and (max-width: 600px) {
	.centerArea {
		padding: 145% 5% 0;
	}
}
/* topArea
================================================== */
.topArea {
	margin: 40px auto;
	max-width: 1100px;
	padding: 3% 5% 4%;
	background-color: #fff;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border: solid #ea5205;
    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, .1);
}
@media screen and (max-width: 600px) {
	.topArea {
		margin: 40px 0;
		padding: 10%;
	}
}
/* topBlock
================================================== */
.topBlock {
	padding: 20px 0 0;
}
.topBlock:first-child {
	padding: 0;
}
.topBlockTit {
	font-size: 140%;
	line-height: 130%;
	padding-bottom: 10px;
	margin: 0;
	border-bottom: solid 3px;
	margin: 0 0 20px;
}
@media screen and (max-width: 600px) {
	.topBlockTit {
		font-size: 100%;
	}
}
.topBlockImg {
	float: left;
	width: 25%;
	padding-right: 5%;
}
.topBlockImgS {
	width: 80%;
	margin: 0 auto;
}
.topBlockTxt {
	float: right;
	width: 70%;
}
@media screen and (max-width: 1300px) {
	.topBlockImg {
		width: 30%;
	}
	.topBlockTxt {
		width: 65%;
	}
}
@media screen and (max-width: 1100px) {
	.topBlockImg {
		width: 40%;
	}
	.topBlockTxt {
		width: 55%;
	}
}
@media screen and (max-width: 800px) {
	.topBlockImg {
		float: none;
		width: 60%;
		padding: 0;
		margin: 0 auto;
	}
	.topBlockTxt {
		float: none;
		width: 100%;
		padding: 20px 0 0;
	}
}
@media screen and (max-width: 600px) {
	.topBlockImg {
		width: 100%;
	}
}
.topBlockTxt h3 {
	font-size: 100%;
	line-height: 130%;
	padding-bottom: 10px;
	margin: 0;
}
@media screen and (max-width: 600px) {
	.topBlockTxt h3 {
		font-size: 100%;
	}
}
.topBlockTxt p {
	padding-bottom: 15px;
	margin: 0;
}
/* priceArea
================================================== */
.priceArea {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0;
}
.priceArea h2 {
	padding: 1% 0 0;
	margin: 0 0 2%;
	line-height: 120%;
	font-size: 180%;
	text-align: center;
}
@media screen and (max-width: 1100px) {
	.priceArea h2 {
		font-size: 2.4vw;
	}
}
@media screen and (max-width: 600px) {
	.priceArea h2 {
		padding: 3% 0 3%;
		font-size: 110%;
	}
}
.priceArea p {
	padding: 0 3% 1%;
	margin: 0;
	line-height: 150%;
	font-size: 150%;
	font-weight: bold;
	text-align: center;
}
.priceArea p .txt01 {
	font-size: 60%;
}
.priceArea p .txt02 {
	font-size: 160%;
}
.priceArea p br {
	display: none;
}
@media screen and (max-width: 1100px) {
	.priceArea p {
		font-size: 2.4vw;
	}
}
@media screen and (max-width: 600px) {
	.priceArea p {
		font-size: 110%;
		padding-bottom: 20px;
		line-height: 140%;
		border-radius: 3px;
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
		border: solid 1px #ea5205;
		background-color: #fff;
		padding: 3% 0;
		margin-bottom: 5%;
	}
	.priceArea p .txt01 {
		font-size: 80%;
	}
	.priceArea p .txt02 {
		font-size: 160%;
	}
	.priceArea p br {
		display: block;
	}
}
/* tableTit
================================================== */
.tableTit h2 {
	padding: 5% 0 1%;
	margin: 0 0 2%;
	line-height: 120%;
	font-size: 180%;
	text-align: center;
}
@media screen and (max-width: 1100px) {
	.tableTit h2 {
		font-size: 2.4vw;
	}
}
@media screen and (max-width: 600px) {
	.tableTit h2 {
		padding: 20% 0 5%;
		font-size: 110%;
	}
}
/* table
================================================== */
table {
	border-collapse: collapse !important;
}
table th,
table td {
	padding: 1em;
	font-size: 100%;
	line-height: 140%;
}
#table01 sup{
	font-size: 70%;
}
#specArea p{
	padding-top: 10px;
	font-size: 70%;
}
td {
	background-color: #eee;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	border: solid #fff 2px;
	font-weight: bold;
	text-align: center;
}
td span {
	font-size: 80%;
}
td.tableBg01 {
	background-color: #008ed0;
	color: #fff;
}
td.tableBg02 {
	background-color: #efefef;
	color: #ea5205;
}
td.tableBg03 {
	background-color: #efefef;
}
.tableTxt {
	font-size: 70%;
	line-height: 120%;
	padding-top: 5px;
}
@media (max-width: 1100px) {
    .table-scroll {
        overflow-x: scroll;
    }
	.table-scroll::-webkit-scrollbar {
		height: 10px;
	}
	.table-scroll::-webkit-scrollbar-track { 
		margin: 0 2px;
		background: #ccc;
		border-radius: 5px;
	} 
	.table-scroll::-webkit-scrollbar-thumb { 
		border-radius: 5px;
		background: #666;
	}
}
@media (max-width: 600px) {
	#table01 {
		min-width: 600px!important;
	}
}
td p{
	font-size: 70%!important;
}
/* tableBottom
================================================== */
.tableBottom {
}
.tableBottom h3 {
	color: #ea5205;
	text-align: center;
	line-height: 130%;
	font-size: 180%;
}
@media screen and (max-width: 1100px) {
	.tableBottom h3 {
		font-size: 2.4vw;
	}
}
@media screen and (max-width: 700px) {
	.tableBottom h3 {
		padding: 3% 0 3%;
		font-size: 110%;
		text-align: left;
	}
	.tableBottom h3 br {
		display: none;
	}
}
.tableBottom p {
	font-weight: 700;
	text-align: center;
	padding-bottom: 0.5em;
}
.tableBottom p span {
    background: linear-gradient(transparent 70%, #ffe400 30%);
    margin: 0 0.2em;
}
@media screen and (max-width: 700px) {
	.tableBottom p {
		text-align: left;
	}
}


/* linkBtn
================================================== */
.linkBtn {
	position: relative;
	z-index: 10;
	width: 60%;
	max-width: 600px;
	margin: 2% auto 0;
}
@media screen and (max-width: 600px) {
	.linkBtn {
		width: 100%;
		margin: 2% auto 0;
	}
}
.linkBtn a {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	text-indent: -999px;
	z-index: 11;
}
/* zoomBtn
================================================== */
.zoomBtn {
	border: solid 1px #fff;
	background-color: #ea5205;
	box-shadow: 0 0 15px #ccc;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	color: #fff;
	display: block;
	transition-duration: 0.3s; /*変化に掛かる時間*/
}
.zoomBtn h3 {
	font-weight: bold;
	text-align: center;
	margin: 0;
	padding: 5% 0;
	line-height: 100%;
	font-size: 130%;
}
@media screen and (max-width: 1200px) {
	.zoomBtn h3 {
		font-size: 1.8vw;
	}
}
@media screen and (max-width: 800px) {
	.zoomBtn h3 {
		font-size: 100%;
	}
}
@media screen and (max-width: 600px) {
	.zoomBtn h3 {
		padding: 7% 0;
	}
}
.zoomBtn:hover {
	transform: scale(1.05); /*画像の拡大率*/
	transition-duration: 0.3s; /*変化に掛かる時間*/
}
/* ieaskinArea
================================================== */
#ieaskinArea {
	margin: 0 auto;
	max-width: 1100px;
	padding: 0 5%;
	background-color: #ea5205;
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	color: #fff;
    border: solid #fff;
    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, .15);
}
@media screen and (max-width: 600px) {
	#ieaskinArea {
		padding: 3% 5% 4%;
	}
}
.ieaskinBox {
	max-width: 1100px;
	margin: 1% auto 0;
	padding: 2% 3%;
}
@media screen and (max-width: 600px) {
	.ieaskinBox {
		margin: 1% auto 0;
		padding: 2% 5%;
	}
}
.ieaskinBox h3 {
	padding: 0;
	margin: 0;
	padding: 2% 0;
	line-height: 100%;
	font-size: 180%;
}
@media screen and (max-width: 1100px) {
	.ieaskinBox h3 {
		font-size: 2.4vw;
	}
}
@media screen and (max-width: 600px) {
	.ieaskinBox h3 {
		padding: 3% 0 6%;
		font-size: 110%;
	}
}
.ieaskinBox h4 {
	padding: 1.5% 3%;
	margin: 0 0 2%;
	background-color: #fff;
	border-radius: 2px;
	-webkit-border-radius: 2px;
	-moz-border-radius: 2px;
	color: #ea5205;
	line-height: 130%;
	font-size: 130%;
}
@media screen and (max-width: 1200px) {
	.ieaskinBox h4 {
		font-size: 2.2vw;
	}
}
@media screen and (max-width: 600px) {
	.ieaskinBox h4 {
		margin: 0 0 3%;
		padding: 3%;
		font-size: 100%;
	}
}
/* contentsArea
================================================== */
#contentsArea {
	position: relative;
	background-color: #afe9f6;
	padding-bottom: 3%;
}
/* movieBox
================================================== */
#movieBox {
	position: absolute;
	z-index: 0;
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}
#movieBox video {
	width: 100%;
	height: auto;
	padding: 0;
	margin: 0;
}
#movieCover {
	position: absolute;
	z-index: 1;
	top: 0;
	left: 0;
	width: 100%;
}
/* contentsBox
================================================== */
#contentsBox {
	position: relative;
	z-index: 2;
}
#contentsTit {
	width: 90%;
	max-width: 700px;
	margin: 0 auto;
	padding: 10% 0;
}
/* conCArea
================================================== */
.conCArea {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 5% 2%;
}
@media screen and (max-width: 600px) {
	.conCArea {
		padding: 0 5% 5%;
	}
}
/* flexbox
================================================== */
.flexbox {
	padding: 2% 0;
	display:flex;
	align-items: center;
	justify-content: space-evenly;
	background: rgba(255,255,255,0.85);
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, .1);
	font-weight: 400;
}
.flexbox .flexbox01 {
	width: 16%;
}
.flexbox .flexbox02 {
	width: 55%;
}
.flexbox .flexbox03 {
	width: 30%;
}
@media screen and (max-width: 600px) {
	.flexbox {
		padding: 5%;
		display: inherit;
		align-items: baseline;
		margin: 0;
	}
	.flexbox .flexbox01 {
		width: 40%;
		margin: 0 auto;
	}
	.flexbox .flexbox02 {
		width: 100%;
	}
	.flexbox .flexbox03 {
		width: 70%;
		margin: 0 auto;
	}
}
.conC {
	padding: 2% 0;
	background: rgba(255,255,255,0.85);
	border-radius: 3px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, .1);
}
/* kakomi
================================================== */
.kakomi {
	width: 90%;
	padding: 2%;
	margin: 0 auto;
	border: #008ed0 dotted 4px;
	-webkit-border-radius: 10px;
	-moz-border-radius: 10px;
	border-radius: 10px;
}
/* flexboxB
================================================== */
.flexboxB {
	padding: 2% 0;
	display:flex;
	align-items: center;
	justify-content: space-evenly;
}
.flexboxB .flexbox04 {
	width: 17%;
}
.flexboxB .flexbox05 {
	width: 60%;
}
@media screen and (max-width: 600px) {
	.flexboxB {
		padding: 0 5% 5%;
		display: inherit;
		align-items: baseline;
		margin: 0;
	}
	.flexboxB .flexbox04 {
		width: 50%;
		margin: 0 auto;
	}
	.flexboxB .flexbox04 h3 {
		margin: 0;
	}
	.flexboxB .flexbox05 {
		width: 100%;
	}
}
/* midArea
================================================== */
.midArea {
	max-width: 1100px;
	margin: 0 auto;
	padding: 0 5%;
}
/* titBlock
================================================== */
.titBlock {
	text-align: center;
	padding: 5%;
}
@media screen and (max-width: 600px) {
	.titBlock {
		padding: 10% 0;
	}
}
.titBlock h2 {
	padding: 3% 0 0;
	margin: 0;
	font-size: 300%;
	line-height: 130%;
}
.titBlock h2 span{
	color: #ea5205;
}
.titBlock h2.head-border:before,
.titBlock h2.head-border:after {
    content: "";
    height: 2px;
    flex-grow: 1;
    background-color: #ea5205;
}
@media screen and (max-width: 1100px) {
	.titBlock h2 {
		font-size: 4vw;
	}
}
@media screen and (max-width: 500px) {
	.titBlock h2 {
		font-size: 6vw;
	}
}
/* voiceArea
================================================== */
.voiceArea {
	padding-bottom: 3%;
}
@media screen and (max-width: 600px) {
	.voiceArea {
		padding-bottom: 5%;
	}
}
.voiceBlock {
	width: 90%;
	margin: 0 auto;
}
@media screen and (max-width: 600px) {
	.voiceBlock {
		width: 100%;
		margin: 0;
	}
}
.voiceBgBox {
	padding: 3%;
	border-radius: 3px; 
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	background: linear-gradient(-45deg,#f7fcff 25%, #e7f4fc 25%,#e7f4fc 50%, #f7fcff 50%,#f7fcff 75%, #e7f4fc 75%,#e7f4fc);
	background-size: 600px 600px;
	animation: anime_stripe_1 25s infinite linear;
	border: solid 1px #e7f4fc;
}
@keyframes anime_stripe_1 {
	0% {  background-position-x: 0;}
	100% {  background-position-x: -600px;}
}
@media screen and (max-width: 600px) {
	.voiceBgBox {
		padding: 5%;
	}
}
.voiceBgBox .fLeft{
	width: 30%;
}
.voiceBgBox .fRight{
	width: 67%;
}
@media screen and (max-width: 800px) {
	.voiceBgBox .fLeft{
		float: none;
		width: 100%;
		margin: 0 auto;
		padding-bottom: 5%;
	}
	.voiceBgBox .fRight{
		float: none;
		width: 100%;
	}
}
.voiceBgBox h4{
	float: left;
	color: #ea5205;
	padding: 2%;
	margin: 0;
	line-height: 100%;
	background-color: #fff;
	border-radius: 50px; 
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
	border: solid 1px #ea5205;
}
@media screen and (max-width: 800px) {
	.voiceBgBox h4{
		padding: 2% 5%;
		font-size: 100%;
		float: none;
		border-radius: 3px; 
		-webkit-border-radius: 3px;
		-moz-border-radius: 3px;
	}
	.voiceBgBox h4 span{
		font-size: 80%;
	}
	.voiceBgBox h3{
		font-size: 100%;
	}
}
/* bottomArea
================================================== */
.bottomArea {
	max-width: 1000px;
	margin: 0 auto;
	padding: 0 5%;
}