@charset "utf-8";

/* wordArea
================================================== */
#wordArea {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
	padding-top: 70px;
}
@media screen and (max-width: 1100px) {
	#wordArea {
		padding-top: 60px;
	}
}

/* wordBox
================================================== */
.wordBox {
	background-color: #ea5205;
	max-width: 1100px;
	margin: 0 auto 10px;
	border-radius: 3px; 
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	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;
		border-radius: 0; 
		-webkit-border-radius: 0;
		-moz-border-radius: 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%;
	}
}

/* bannerArea
================================================== */
.bannerArea {
	max-width: 580px;
	margin: 0 auto 10px;
}
.bannerArea img {
    filter: drop-shadow(0 0 5px #b6b6b6);
	border: solid #fff 3px;
	border-radius: 6px;
}
@media screen and (max-width: 1100px) {
	.bannerArea {
		margin: 10px auto;
		padding: 0 10px
	}
}

/* topArea
================================================== */
#topArea {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
}
#mainBg {
	position: absolute;
	z-index: 0;
	width: 100%;
	top: 0;
	left: 0;
}
#mainCopy02 {
	position: absolute;
	z-index: 1;
	width: 26%;
	top: 46%;
	right: 1%;
}
@media screen and (max-width: 600px) {
	#mainCopy02 {
		position: relative;
		width: 40%;
		top: inherit;
		right: inherit;
		left: inherit;
		padding: 0;
		margin: -38% 0 0 10%;
	}
}
#mainCopy01 {
	position: relative;
	z-index: 2;
	width: 23%;
	padding: 3% 0 0 45%;
}
@media screen and (max-width: 600px) {
	#mainCopy01 {
		width: 40%;
		padding: 44% 0 0 59%;
	}
}
#topTit {
	position: relative;
	z-index: 3;
	width: 38%;
	padding: 4% 0 0 30%;
}
@media screen and (max-width: 600px) {
	#topTit {
		width: 60%;
		padding: 4% 0 0 20%;
	}
	#topTit h1{
		margin: 8% 0 0;
	}
}

#priceArea {
	position: relative;
	z-index: 3;
	width: 90%;
	top: 80%;
	left: 5%;
	padding: 15px 0;
}
.priceBlock {
	padding-bottom: 2%;
}
.priceBlock h2{
	padding: 0;
	margin: 0;
}
.priceBlock h2.priceL {
	float: left;
	width: 26.7%;
	padding: 4% 1% 0 0;
}
.priceR {
	float: right;
	width: 20%;
    padding: 7% 0 0 2%;
}
.priceBlock h2.priceC {
	float: right;
	width: 49%;
}
@media screen and (max-width: 600px) {
	.priceBlock {
		padding-bottom: 6%;
	}
	.priceBlock h2.priceL {
		width: 55%;
		padding: 0 0 5%;
	}
	.priceR {
		width: 33%;
		padding: 4% 4% 0 0;
	}
	.priceBlock h2.priceC {
		float: none;
		width: 90%;
		padding: 0 5%;
	}
}
.priceTxt {
	width: 90%;
	margin: 0 auto;
	border-bottom: solid 3px #ea5205;
}
.priceTxt h2{
	color: #ea5205;
	line-height: 100%;
	display: flex;
	align-items: center;
	line-height: 140%;
}
.priceTxt h2:after {
	border-top: 3px solid;
	content: "";
	flex-grow: 1;
	margin-left: 2%;
}
.priceTxt h2 br {
	display: none;
}
.priceTxt p{
	font-weight: bold;
	line-height: 180%;
	padding-bottom: 2%;
}
@media screen and (max-width: 600px) {
	.priceTxt {
		width: 100%;
		border-bottom: solid 3px #ea5205;
	}
	.priceTxt h2{
		font-size: 120%;
	}
	.priceTxt h2 br {
		display: block;
	}
	.priceTxt p{
		font-size: 100%;
		padding-bottom: 4%;
	}
}
#mainCopy03 {
	position: absolute;
	z-index: 3;
	width: 60%;
	top: 80%;
	left: 20%;
	border-top: solid 1px;
	border-bottom: solid 1px;
	padding: 15px 0;
}
@media screen and (max-width: 600px) {
	#mainCopy03 {
		position: absolute;
		z-index: 3;
		width: 90%;
		top: 84%;
		left: 5%;
		padding: 15px 0;
	}
}
@media screen and (max-width: 300px) {
	#mainCopy03 {
		top: 81%;
	}
}
#mainCopy03 p {
	text-align: center;
	font-weight: bold;
	color: #ea5205;
	font-size: 130%;
	line-height: 200%;
	border-radius: 3px; 
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
@media screen and (max-width: 1100px) {
	#mainCopy03 p {
		font-size: 1.9vw;
	}
}
@media screen and (max-width: 600px) {
	#mainCopy03 p {
		font-size: 3vw;
	}
}
@media screen and (max-width: 300px) {
	#mainCopy03 p {
		text-align: left;
	}
	#mainCopy03 p br{
		display: none;
	}
}
/* contentsTit
================================================== */
#contentsTit {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
	padding-top: 12%;
}
#contentsTit h2{
	padding: 0;
	margin: 0;
}
#mainCopy04 {
	width: 30%;
	margin: 0 auto;
	padding: 0;
}
@media screen and (max-width: 600px) {
	#mainCopy04 {
		width: 45%;
		margin: 0;
		padding: 0 0 35% 15%;
	}
}
#mainImg01 {
	position: absolute;
	z-index: 1;
	width: 29%;
	top: 10%;
	right: 2%;
}
@media screen and (max-width: 600px) {
	#mainImg01 {
		width: 45%;
		top: 20%;
		right: 8%;
	}
}


/* contentsArea
================================================== */
.contentsArea {
	max-width: 1100px;
	margin: 0 auto;
}

/* titBlock
================================================== */
.titBlock {
	text-align: center;
	padding: 10% 5% 3%;
}
.titBlock p.noTxt {
	color: #ea5205;
	font-size: 600%;
	font-weight: bold;
	line-height: 100%;
}
.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;
}
.titBlock h3 {
	padding: 1% 0 0;
	margin: 0;
	font-size: 200%;
	line-height: 160%;
}
.titBlock h3 span{
	font-size: 60%;
}
.titBlock p {
	padding: 1% 0 0;
	font-size: 130%;
	font-weight: bold;
	line-height: 160%;
}
@media screen and (max-width: 1100px) {
	.titBlock p.noTxt {
		font-size: 8vw;
	}
	.titBlock h2 {
		font-size: 4vw;
	}
	.titBlock h3 {
		font-size: 3vw;
	}
	.titBlock p {
		font-size: 2.5vw;
	}
}
@media screen and (max-width: 500px) {
	.titBlock p.noTxt {
		text-align: center;
		font-size: 10vw;
	}
	.titBlock h2 {
		font-size: 6vw;
	}
	.titBlock h3 {
		font-size: 5vw;
	}
	.titBlock p {
		padding: 2% 0 0;
		text-align: left;
		font-size: 110%;
		text-align: justify;
	}
	.titBlock p br{
		display: none;
	}
}

/* slideArea
================================================== */
.slideArea {
	padding: 0 5% 50px;
}
.slideArea .fLeft{
	width: 49%;
}
.slideArea .fLeft h3{
	padding: 0;
	margin: 0;
}
.slideArea .slideBox{
	width: 49%;
}
@media screen and (max-width: 600px) {
	.slideArea {
		padding: 0 5% 15%;
	}
	.slideArea .fLeft{
		float: none;
		width: 100%;
		padding-bottom: 3%;
	}
	.slideArea .slideBox{
		float: none;
		width: 100%;
	}
}
/* item */
.item {
	position: relative;
	border-radius: 3px; 
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	overflow: hidden;
}

/* tit02Area
================================================== */
.tit02Area {
	width: 90%;
	margin: 0 auto;
	background: url(../images/bg02.jpg) no-repeat bottom;
	background-size: contain;
}
@media screen and (max-width: 600px) {
	.tit02Area {
		width: 90%;
		margin: 0 auto;
		background: url(../images/bg02Sp.jpg) no-repeat bottom;
		background-size: contain;
	}
}
.tit02Area .img04{
	width: 13%;
	margin: 0 auto;
}
.tit02Area .img05{
	width: 5%;
	margin: 0 auto;
	padding: 3% 0;
}
@media screen and (max-width: 600px) {
	.tit02Area .img04{
		width: 20%;
	}
	.tit02Area .img05{
		width: 10%;
	}
}
.tit02Area .kakomi{
	width: 80%;
	margin: 0 auto;
	padding-bottom: 3%;
	background: url(../images/bg03.png) repeat;
	border: solid 10px #fff;
	border-radius: 10px; 
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
}
@media screen and (max-width: 600px) {
	.tit02Area .kakomi{
		width: 100%;
		border: none;
	}
}
.tit02Area .kakomi .clearfix{
	padding: 3% 3% 0;
}
.tit02Area .kakomi .clearfix .fLeft{
	width: 15%;
}
.tit02Area .kakomi .clearfix .fRight{
	width: 76%;
	background-color: #fff;
	border-radius: 3px; 
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	padding: 3%;
}
@media screen and (max-width: 600px) {
	.tit02Area .kakomi .clearfix .fLeft{
		width: 20%;
		float: none;
		margin: 0 auto;
		padding-bottom: 2%;
	}
	.tit02Area .kakomi .clearfix .fRight{
		width: 90%;
		float: none;
		margin: 0 auto;
	}
}
.tit02Area .kakomi .clearfix .fRight h4{
	padding: 0;
	margin: 0;
	font-size: 110%;
}
@media screen and (max-width: 600px) {
	.tit02Area .kakomi .clearfix .fRight h4{
		font-size: 100%;
	}
}
.tit02Area .kakomi .clearfix .fRight h4.color01{
	color: #bf1347;
}
.tit02Area .kakomi .clearfix .fRight h4.color02{
	color: #2da338;
}
.tit02Area .kakomi .clearfix .fRight h4.color03{
	color: #1475b6;
}
.tit02Area .kakomi .clearfix .fRight h5{
	padding: 1% 0 0;
	margin: 0;
	font-weight: bold;
}
.tit02Area .kakomi .clearfix .fRight p{
	padding-top: 2%;
}
.tit02Area .img09{
	width: 20%;
	margin: 0 auto;
}
@media screen and (max-width: 600px) {
	.tit02Area .img09{
		width: 35%;
	}
}
.tit02Area p.pointTxt {
	text-align: center;
	padding: 3% 0;
	font-size: 130%;
	font-weight: bold;
	line-height: 160%;
}
@media screen and (max-width: 1100px) {
	.tit02Area p.pointTxt {
		font-size: 2.5vw;
	}
}
@media screen and (max-width: 500px) {
	.tit02Area p.pointTxt {
		width: 80%;
		margin: 0 auto;
		padding: 2% 0;
		text-align: left;
		font-size: 110%;
		text-align: justify;
	}
	.tit02Area p.pointTxt br{
		display: none;
	}
}
.tit02Area .img10{
	width: 36%;
	margin: 0 auto;
}
@media screen and (max-width: 600px) {
	.tit02Area .img10{
		width: 50%;
	}
}

/* contentsBlock
================================================== */
.contentsBlock {
	width: 90%;
	max-width: 1100px;
	margin: 0 auto;
}
.contentsBlock .fLeft{
	width: 48%;
}
.contentsBlock .fRight{
	width: 48%;
}
@media screen and (max-width: 600px) {
	.contentsBlock .fLeft{
		float: none;
		width: 80%;
		margin: 0 auto;
		padding-bottom: 3%;
	}
	.contentsBlock .fRight{
		float: none;
		width: 80%;
		margin: 0 auto;
	}
}
.img15 {
	width: 70%;
	margin: 0 auto;
	padding: 0 0 10%;
}
@media screen and (max-width: 600px) {
	.img15 {
		width: 90%;
	}
}

/* contentsBlock02
================================================== */
.contentsBlock02 {
	width: 90%;
	margin: 0 auto;
}
.contentsBlock02 .fLeft{
	width: 38%;
	padding-left: 13%
}
.contentsBlock02 .fRight{
	width: 26%;
	padding-right: 17%
}
@media screen and (max-width: 600px) {
	.contentsBlock02 .fLeft{
		float: none;
		width: 70%;
		margin: 0 auto;
		padding: 0 0 3% 0;
	}
	.contentsBlock02 .fRight{
		float: none;
		width: 50%;
		margin: 0 auto;
		padding: 0;
	}
}

/* contactArea
================================================== */
.contactArea {
	padding-top: 8%;
}
.contactBlock {
	position: relative;
	max-width: 1100px;
	margin: 0 auto;
}
.contactImg {
	position: absolute;
	z-index: 1;
	width: 40%;
	top: -58%;
	right: 5%;
}
@media screen and (max-width: 900px) {
	.contactImg {
		display: none;
	}
}
.contactImgS {
	padding: 3% 0;
	width: 80%;
	max-width: 600px;
	margin: 0 auto;
	display: none;
}
@media screen and (max-width: 900px) {
	.contactImgS {
		display: block;
	}
}
.contactBox {
	background-color: #ea5205;
	border-radius: 3px; 
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
}
@media screen and (max-width: 1100px) {
	.contactBox {
		border-radius: 0px; 
		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
	}
}
.contactBox .contact {
	float: left;
	width: 45%;
	padding: 5%;
}
@media screen and (max-width: 900px) {
	.contactBox .contact {
		float: none;
		width: 60%;
		margin: 0 auto;
	}
}
@media screen and (max-width: 600px) {
	.contactBox .contact {
		width: 90%;
	}
}
.contactBox .contact h3{
	color: #ea5205;
	padding: 2% 0;
	margin: 0;
	line-height: 100%;
	text-align: center;
	background-color: #fff;
	display: block;
	border-radius: 50px; 
    -webkit-border-radius: 50px;
    -moz-border-radius: 50px;
}
.contactBox .contact h2{
	color: #fff;
	line-height: 100%;
	padding: 2% 0 4%;
	margin: 0;
	text-align: center;
	font-size: 200%;
}
@media screen and (max-width: 400px) {
	.contactBox .contact h2{
		font-size: 160%;
	}
}
.contactBox .contact h2 span{
	font-size: 70%;
}
.contactBox .contactBtn p a{
	display: block;
	color: #ea5205;
	padding: 0;
	margin: 0;
	font-size: 160%;
	line-height: 200%;
	text-align: center;
	background-color: #fff;
	font-weight: bold;
	border-radius: 3px; 
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.1);
}
.contactBox .contactBtn p a:hover{
	transition: .3s;
	display: block;
	padding: 0;
	margin: 0;
	background-color: #f38d5a;
	border-radius: 3px; 
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	box-shadow: 5px 5px 5px 0 rgba(0,0,0,0.1);
}
@media screen and (max-width: 600px) {
		.contactBox .contactBtn p a{
			font-size: 130%;
	}
}

/* specArea
================================================== */
.specArea {
	background-color: #222;
	border-radius: 3px; 
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	color: #fff;
	padding: 3%;
}
@media screen and (max-width: 1100px) {
	.specArea {
		border-radius: 0px; 
		-webkit-border-radius: 0px;
		-moz-border-radius: 0px;
	}
}
@media screen and (max-width: 600px) {
	.specArea {
		padding: 5%;
	}
}
.specArea .fLeft{
	width: 48%;
}
.specArea .fRight{
	width: 48%;
}
@media screen and (max-width: 600px) {
	.specArea .fLeft{
		float: none;
		width: 100%;
		padding-bottom: 5%;
	}
	.specArea .fRight{
		float: none;
		width: 100%;
	}
}
.specArea dt{
	padding: 0 0 3%;
	margin: 0;
	font-weight: bold;
	background-color: #222;
	font-size: 100%;
}
.specArea dd{
	font-size: 80%;
	padding: 2% 0;
	border-bottom: dotted 1px #444;
}
@media screen and (max-width: 600px) {
	.specArea dt{
		font-size: 80%;
	}
}

/* flowArea
================================================== */
#flowArea {
	max-width: 500px;
	margin: 0 auto;
	padding: 0 5%;
}
.flowBox {
	background-color: #ea5205;
	border-radius: 3px; 
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
	color: #fff;
	padding: 1.5% 5%;
}
@media screen and (max-width: 600px) {
	.flowBox {
		padding: 3% 5%;
	}
}
.flowBox h4{
	text-align: center;
	font-size: 150%;
	padding: 0;
	margin: 0;
	line-height: 130%;
    display: flex;
    align-items: center;
}
.flowBox h4:before,
.flowBox h4:after {
    content: "";
    height: 1px;
    flex-grow: 1;
    background-color: #fff;
}
.flowBox h4:before {
    margin-right: 1rem;
}
.flowBox h4:after {
    margin-left: 1rem;
}
@media screen and (max-width: 1100px) {
	.flowBox h4{
		font-size: 2.3vw;
	}
}
@media screen and (max-width: 600px) {
	.flowBox h4{
		font-size: 110%;
	}
}
#flowArea .img05{
	width: 5%;
	margin: 0 auto;
	padding: 2% 0;
}
@media screen and (max-width: 600px) {
	#flowArea .img05{
		width: 10%;
	}
}
.flowBox p{
	text-align: center;
}

/* voiceArea
================================================== */
.voiceArea {
	padding-bottom: 3%;
}
@media screen and (max-width: 600px) {
	.voiceArea {
		padding-bottom: 5%;
	}
}
.voiceBlock {
	width: 90%;
	margin: 0 auto;
}
.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: 18%;
}
.voiceBgBox .fRight{
	width: 78%;
}
@media screen and (max-width: 800px) {
	.voiceBgBox .fLeft{
		float: none;
		width: 40%;
		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{
		float: none;
		text-align: center;
	}
	.voiceBgBox h3{
		font-size: 100%;
	}
	.voiceBgBox h4{
		padding: 2% 5%;
		font-size: 100%;
	}
}