@charset "UTF-8";
/* CSS Document */







@media(max-width:1500px) {
.chart .graph h3{font-size: 1.6vw;}
}






@media(max-width:1280px) {

body{font-size: 15px;}

header .title{width: 30%;}

.lead{padding: 24px;}
.lead .leadInner .textBox{width: 75%;padding: 14vw 0;}
.lead .leadInner .textBox h2{font-size: 40px;}
.lead .leadInner .textBox h3{font-size: 31px;}


.chart{width: calc(100% - 48px);}
.chart h2{font-size: 42px;}
.chart .graph{width: 82%;}
.chart .bottom{width: 82%;}

.category .categoryTop h2{font-size: 46px;}
.category .typeTitle .typeName h3{font-size: 5.8vw;}
.category .typeTitle .logo p{width: 55%;}


.category .itemSpec h3{font-size: 34px;}
.category .itemSpec .icon p{width: 80px;}

}



@media(max-width:1000px) {

.lead .leadInner .textBox{width: 85%;}

.chart h2{font-size: 39px;}
.chart .graph{width: 90%;}
.chart .graph h3{font-size: 2.0vw;}
.chart .bottom{width: 90%;}
.chart .bottom .lifaLogo{padding: 20px 0;}
.chart .bottom .dryWarm p{font-size: 20px;}

.category .categoryTop h2{font-size: 40px;}
.category .categoryTop h2::before{left: -40px;width: 30px;height: 4px;}
.category .categoryTop h2::after{right: -40px;width: 30px;height: 4px;}





.category .itemBox .itemSpec .specBox{width: 85%;}
.category .itemSpec h3{font-size: 29px;}
.category .itemSpec h4{font-size: 18px;}
.category .itemSpec .price{font-size: 15px;}
.category .itemSpec .text{font-size: 14px;line-height: 1.7;}
.category .itemSpec .icon{margin-top: 15px;}
.category .itemSpec .icon p{width: 70px;}
.category .itemSpec .icon p.wide{margin: 0 5px;}

.category .itemSpec .buy{margin-top: 20px;}
.category .itemSpec .buy a{font-size: 17px;}

.category .outerItems{width: 82%;}
.category .outerItems .item{width: 46%;}

footer .hh{width: 130px;}

}




@media(max-width:820px) {

body{font-size: 14px;}

.lead .leadInner .textBox h2{font-size: 36px;}
.lead .leadInner .textBox h3{font-size: 28px;}
.lead .leadInner .textBox p{line-height: 2.0;}

.chart h2{font-size: 36px;}
.chart .graph{width: 92%;}
.chart .bottom{width: 92%;}
.chart .itemAll .item span{font-size: 11px;}


.category .itemSpec h3{font-size: 25px;}
.category .itemSpec h4{font-size: 17px;}
.category .itemSpec .price{font-size: 14px;}
.category .itemSpec .text{font-size: 13px;}
.category .itemSpec .icon p{width: 65px;}

}




/*-------------------------------------------------------------------------*/




@media(max-width:768px) {

.wideScreen{display: none;}

header{background-image: url("../images/main_sp.jpg");}

header .title{top: 65%;left: 50%;width: 50%;}
header .title h1{top: 3vw;}
header .title .hh{width: 30%;margin-top: 8%;top: 3vw;}



.contents{overflow: hidden;}


/*-------*/

.lead{padding: 20px;}
.lead .leadInner{
	background-image: url("../images/lead_bk_sp.jpg");
	background-attachment:scroll;
}

.lead .leadInner .textBox{width: 80%;padding: 17vw 0;}
.lead .leadInner .textBox p{line-height: 2.2;}

/*-------*/

.chart{width: calc(100% - 40px);padding: 14vw 0}

.chart .graph{width: 80%;margin-top: 8vw;}
.chart .graph .base span{padding-top: 50%;}
.chart .graph h3{font-size: 2.6vw;}
.chart .graph.view h3.active{top: 6%;}
.chart .graph.view h3.daily{bottom: 6%;}

.chart .bottom{width: 80%;}
.chart .bottom .lifaLogo p span{width: 45%;}

.chart .itemAll .item{width: 13%;}
.chart .itemAll .item.HH12360{top: 18%;left: 8%;}
.chart .itemAll .item.HH22361{top: 18%;left: 28%;}
.chart .itemAll .item.HE32380{bottom: 20%;right: 18%;}
.chart .itemAll.view .item span br{display:block;}

/*-------*/

.category .categoryTop{margin-top: 20vw;}
.category.outer .categoryTop{margin-top: 25vw;}


.category .typeTitle{display: block;padding: 18vw 0 14vw;}
.category .typeTitle .typeName{width: 80%;text-align: left;margin: 0 auto;	}
.category .typeTitle .typeName h3{font-size: 8.2vw;display: block;}
.category .typeTitle.warm .typeName h3{text-align: right;}
.category .typeTitle .logo{width: 80%;margin: 5vw auto;display: block;}
.category .typeTitle .logo p{width: 35%;}
.category .typeTitle.warm .logo p{margin-left: 65%;}


/*-------*/

.category .itemBox{display: block;margin-top: 17vw;}

.category .itemBox .imageSet{width: 80%;margin: 0 auto;}

.category .itemBox .itemSpec{width: 80%;padding: 0;margin: 50px auto 0;}
.category .itemBox .itemSpec .specBox{width: 100%;max-width: none; position:relative;top: 0%;}
.category .itemBox .itemSpec .specInner{
	width: 100%;
	text-align: left;
	position: relative;
	top: 3vw;
	margin-top:0;
	-webkit-transform:none;
	transform:none;
	-webkit-transition: top 1.0s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.0s;
	transition: top 1.0s cubic-bezier(0.33, 1, 0.68, 1), opacity 1.0s;
}

.category .itemBox .itemSpec .specInner.view{opacity:1;margin-top: 0;top: 0;}



.category .itemSpec h3{font-size: 30px;}
.category .itemSpec h4{font-size: 19px;}
.category .itemSpec .price{font-size: 16px;margin-top: 0.4em;}
.category .itemSpec .text{font-size: 14px;line-height: 2.0;margin-top: 1.5em;}

.category .itemSpec .icon{margin: 25px 0 0;}
.category .itemSpec .icon p{width: 80px;}

.category .itemSpec .buy{margin-top: 30px;}
.category .itemSpec .buy a{font-size: 20px;}


/*-------*/

.category .outerItems{width: 70%;margin-top: 0vw;display: block;}
.category .outerItems .item{width: 100%;margin-top: 15vw;}

/*-------*/


footer{margin-top:27vw;padding-bottom: 60px;}


}











@media(max-width:650px) {


header .title{width: 70%;}

.lead .leadInner .textBox{width: 88%;}
.lead .leadInner .textBox h2{font-size: 32px;}
.lead .leadInner .textBox h3{font-size: 25px;line-height: 1.3;margin-top: 0.5em;}
.lead .leadInner .textBox h3 br{display:block;}

.lead .leadInner .textBox p:first-of-type{margin-top: 2.5em;}


/*-------*/

.chart{width: 100%;padding: 0  0 7vw;}

.chart h2{font-size: 30px;padding: 12vw 0;}
.chart .graph{margin-top: 0;width: 100%;}
.chart .graph h3{font-size: 3.8vw;}
.chart .graph.view h3.active{top: 5%;}
.chart .graph.view h3.daily{bottom: 5%;}

.chart .graph .base span{padding-top: 55%;}

.chart .bottom{width: 100%;}
.chart .bottom .lifaLogo p span{width: 60%;}
.chart .bottom .dryWarm{margin-top: 3vw;padding-bottom: 1vw;}
.chart .bottom .dryWarm p{font-size: 3.8vw;padding: 0 4vw;}


.chart .itemAll .item{width: 17%;}

.chart .itemAll .item.HH12360{top: 16%;left: 5.5%;}
.chart .itemAll .item.HH22361{top: 16%;left: 27.5%;}
.chart .itemAll .item.HH32365{left: 5.5%;}
.chart .itemAll .item.HH32366{left: 27.5%;}

.chart .itemAll .item.HE32367{right: 27.5%;}
.chart .itemAll .item.HE22368{right: 5.5%;}
.chart .itemAll .item.HE32380{bottom: 18%;right: 16%;}

/*-------*/


.category .categoryTop{margin-top: 25vw;}
.category.outer .categoryTop{margin-top: 35vw;}

.category .categoryTop h2{font-size: 32px;}
.category .categoryTop h2::before{left: -30px;width: 20px;height: 3px;}
.category .categoryTop h2::after{right: -30px;width: 20px;height: 3px;}

/*-------*/

.category .typeTitle{display: block;padding: 20vw 0 14vw;}
.category .typeTitle.warm{padding-top: 25vw;}

.category .typeTitle .typeName{width: 90%;}
.category .typeTitle .typeName h3{font-size: 13.0vw;}
.category .typeTitle .logo{width: 90%;margin-top: 7vw;}
.category .typeTitle .logo p{width: 50%;}
.category .typeTitle.warm .logo p{margin-left: 50%;}

/*-------*/

.category .itemBox{margin-top: 25vw;}
.category .itemBox .imageSet{width: 100%;}

.category .itemBox .itemSpec{width: 90%;margin-top: 12vw}

/*-------*/

.category .outerItems{width: 85%;}
.category .outerItems .item{margin-top: 20vw;}

/*-------*/

footer{margin-top:35vw;}
footer .hh{width: 120px;}

}





@media(max-width:460px) {

body{font-size: 14px;}

header .title{width: 85%;}

/*-------*/

.lead{padding: 15px;}
.lead .leadInner .textBox{padding: 20vw 0;}
.lead .leadInner .textBox h2{font-size: 6.8vw;}
.lead .leadInner .textBox h3{font-size: 5.7vw;}
.lead .leadInner .textBox p{line-height: 2.0;}
.lead .leadInner .textBox p:first-of-type{margin-top: 2.0em;}

/*-------*/

.chart{padding: 0  0 10vw;}
.chart h2{font-size: 7.0vw;padding: 15vw 0;}

.chart .graph h3{font-size: 4.7vw;}
.chart .graph .base span{padding-top: 70%;}

.chart .bottom .lifaLogo p span{width: 70%;}
.chart .bottom .dryWarm p{font-size: 5.0vw;}

.chart .itemAll .item{width: 19.4%;}
.chart .itemAll .item span{font-size: 10.5px;}

.chart .itemAll .item.HH12360{left: 4%;}
.chart .itemAll .item.HH22361{left: 27%;}
.chart .itemAll .item.HH32365{left: 4%;}
.chart .itemAll .item.HH32366{left: 27%;}

.chart .itemAll .item.HE32367{right: 27%;}
.chart .itemAll .item.HE22368{right: 4%;}
.chart .itemAll .item.HE32380{right: 15%;}


/*-------*/

.category .categoryTop{margin-top: 28vw;}
.category.outer .categoryTop{margin-top: 40vw;}


.category .categoryTop h2{font-size: 29px;}
.category .categoryTop h2::before{margin-top: -1px;}
.category .categoryTop h2::after{margin-top: -1px;}

/*-------*/

.category .typeTitle{padding: 22vw 0 16vw;}
.category .typeTitle.warm{padding-top: 30vw;}

.category .typeTitle .typeName h3{font-size: 14.4vw;}

.category .typeTitle .logo p{width: 55%;}
.category .typeTitle.warm .logo p{margin-left: 45%;}

/*-------*/

.category .itemBox{margin-top: 30vw;}

.category .itemBox .itemSpec{margin-top: 15vw}

.category .itemSpec h3{font-size: 28px;}
.category .itemSpec h4{font-size: 18px;}
.category .itemSpec .price{font-size: 15px;}
.category .itemSpec .price span{padding-left: 0.8em;}


.category .itemSpec .icon{margin: 20px 0 0;}
.category .itemSpec .icon p{width: 75px;}
.category .itemSpec .buy{margin-top: 25px;}
.category .itemSpec .buy a{font-size: 18px;padding: 0.7em 0.9em;}

/*-------*/

.slick-dots{padding-right: 6px;}
.slick-dots li{margin: 0 10px 0 0;}
.slick-dots li button{width: 8px;height: 8px;}

/*-------*/

.category .outerItems{width: 88%;}

.category .outerItems .item{margin-top: 20vw;}
.category .outerItems .item#HH22361{margin-top: 26vw;}
.category .outerItems .item .photo{margin-bottom: 14vw;}


/*-------*/

footer{margin-top:40vw;}
footer .hh{width: 110px;}
footer .copyright{margin-top: 30px;}



}