@charset "utf-8";
/*--
中 font-size:96%;
小 font-size:88%;
--*/

/*---------------------------------------*/
/* loading */
/*---------------------------------------*/
#loading {
position: fixed;
width: 100%;
height: 100%;
top: 0px;
left: 0px;
background:#fff;
z-index: 9999;
}
#loading .bar{
position:absolute;
top:50%;
left:50%;
width:150px;
height:2px;
margin:-1px 0 0 -75px;
-webkit-transition: all 0.1s ease 2s;
-moz-transition: all 0.1s ease 2s;
-o-transition: all 0.1s ease 2s;
transition: all 0.1s ease 2s;
}
@media screen and (max-width:767px){
#loading .bar{
width:100px;
margin:-1px 0 0 -50px;
}
}
#loading.animation .bar{
opacity:0;
}
#loading .bar .barIn{
display:block;
position:absolute;
top:0;
left:0;
width:0%;
height:100%;
background:#b1272d;
}
#loading .bar .barIn:first-child{
-webkit-transition:all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;
-moz-transition:all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;
-o-transition:all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;
transition:all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) 0.4s;
}
#loading .bar .barIn:last-child{
z-index:11;
-webkit-transition:all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1) 1.2s;
-moz-transition:all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1) 1.2s;
-o-transition:all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1) 1.2s;
transition:all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1) 1.2s;
}
#loading.animation .bar .barIn{
width:100%;
}
#loading .bar .barIn:after{
display:block;
position:absolute;
top:-1px;
left:0;
width:0%;
height:4px;
background:#fff;
content:"";
z-index:10;
}
#loading .bar .barIn:first-child:after{
-webkit-transition:all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) 0.6s;
-moz-transition:all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) 0.6s;
-o-transition:all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) 0.6s;
transition:all 0.3s cubic-bezier(0.075, 0.82, 0.165, 1) 0.6s;
}
#loading .bar .barIn:last-child:after{
-webkit-transition:all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1) 1.5s;
-moz-transition:all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1) 1.5s;
-o-transition:all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1) 1.5s;
transition:all 0.4s cubic-bezier(0.075, 0.82, 0.165, 1) 1.5s;
}
#loading.animation .bar .barIn:after{
width:100%;
}

#loading .logo{
position:absolute;
top:50%;
left:50%;
width:150px;
margin:-110px 0 0 -75px;
opacity:0;
-moz-transform:scale(1.5,1.5);
-webkit-transform: scale(1.5,1.5);
-o-transform:scale(1.5,1.5);
-ms-transform:scale(1.5,1.5);
transform:scale(1.5,1.5);
-webkit-filter: blur(10px);
filter: blur(10px);
-webkit-transition:opacity 2.5s cubic-bezier(0.075, 0.82, 0.165, 1) 2.4s,transform 2.5s cubic-bezier(0.075, 0.82, 0.165, 1) 2.4s,filter 3s ease 2.4s;
-moz-transition:opacity 2.5s cubic-bezier(0.075, 0.82, 0.165, 1) 2.4s,transform 2.5s cubic-bezier(0.075, 0.82, 0.165, 1) 2.4s,filter 3s ease 2.4s;
-o-transition:opacity 2.5s cubic-bezier(0.075, 0.82, 0.165, 1) 2.4s,transform 2.5s cubic-bezier(0.075, 0.82, 0.165, 1) 2.4s,filter 3s ease 2.4s;
transition:opacity 2.5s cubic-bezier(0.075, 0.82, 0.165, 1) 2.4s,transform 2.5s cubic-bezier(0.075, 0.82, 0.165, 1) 2.4s,filter 3s ease 2.4s;
}
@media screen and (max-width:767px){
#loading .logo{
width:100px;
margin:-90px 0 0 -50px;
}
}
#loading.animation .logo{
opacity:1;
-webkit-filter:none;
filter: none;
-moz-transform:scale(1,1);
-webkit-transform:scale(1,1);
-o-transform:scale(1,1);
-ms-transform:scale(1,1);
transform:scale(1,1);
}
#loading .logo img{
width:150px;
height:150px;
}
@media screen and (max-width:767px){
#loading .logo img{
width:100px;
height:100px;
}
}
#loading .concept{
position:absolute;
top:50%;
left:0;
width:100%;
text-align:center;
font-size:193%;
margin-top:80px;
}
@media screen and (max-width:767px){
#loading .concept{
font-size:13pt;
margin-top:40px;
}
}
@media screen and (max-width:374px){
#loading .concept{
font-size:12pt;
}
}
/*-------------------------------------*/
/* topArea */
/*-------------------------------------*/
#topArea{
position:relative;
overflow:hidden;
opacity:0;
-webkit-transition:opacity 1s ease 0.1s;
-moz-transition:opacity 1s ease 0.1s;
-o-transition:opacity 1s ease 0.1s;
transition:opacity 1s ease 0.1s;
}
#topArea.animation{
opacity:1;
}
#topArea .grade{
position:absolute;
bottom:0;
left:0;
width:100%;
height:175px;
background:url(../images/common/slide-grade.png) left bottom;
background-repeat:repeat-x;
background-size:auto 175px;
z-index:100;
}
@media screen and (max-width:767px){
#topArea .grade{
height:87px;
background:url(../images/common/slide-grade.png) left bottom;
background-repeat:repeat-x;
background-size:auto 87px;
}
}
#photo_area{
position:relative;
height:1055px;
width:100%;
transform: scale(1.1);
}
@media screen and (max-width:980px){
#photo_area{
height:650px;
}
}
@media screen and (max-width:767px){
#photo_area{
height:300px;
}
}
/*フェード*/
.crossfader{
position:relative;
height:1055px;
width:100%;
}
@media screen and (max-width:980px){
.crossfader{
height:650px;
}
}
@media screen and (max-width:767px){
.crossfader{
height:300px;
}
}
.crossfader ul li{
position:absolute;
top:0;
left:0;
z-index:8;
opacity:0;
text-indent:-9999px;
}
.crossfader .active{
z-index:10;
opacity:1.0;
}
.crossfader .last-active{
z-index:9;
}
#photo_area{
width:100%;
margin:0 auto;
top:0;
_display: inline;
_zoom:1;
z-index:1 !important;
position:relative;
}
#photo_area .photo{
background-repeat:no-repeat;
background-size:cover;
background-attachment: scroll;
width:100%;
height:100%;
text-indent:-9999px;
}
/* PC用背景固定 */
#photo_area .photo.bgslide{
background-attachment: fixed;
}
#photo_area #photo01{
background-image:url(../images/common/slide01.jpg);
background-position:center top;
padding:0 0 50px;
background-size:cover;
}
#photo_area #photo02{
background-image:url(../images/common/slide02.jpg);
background-position:center top;
padding:0 0 50px;
background-size:cover;
}
#photo_area #photo03{
background-image:url(../images/common/slide03.jpg);
background-position:center top;
padding:0 0 50px;
background-size:cover;
}
@media screen and (max-width:767px){
#photo_area #photo01,
#photo_area #photo02,
#photo_area #photo03{
padding-bottom:40px;
}
}
#photo_area #photo01.active,
#photo_area #photo02.active,
#photo_area #photo03.active{
-webkit-animation: bgscroll 12s linear infinite;
animation: bgscroll 12s linear infinite;
}
@media screen and (max-width:767px){
#photo_area #photo01.active,
#photo_area #photo02.active,
#photo_area #photo03.active{
-webkit-animation: bgscroll-sp 12s linear infinite;
animation: bgscroll-sp 12s linear infinite;
}
}
@-webkit-keyframes bgscroll {
0% {transform: translate3d(0,0,0);}
100% {transform: translate3d(0,-50px,0);}
}
@keyframes bgscroll {
0% {transform: translate3d(0,0,0);}
100% {transform: translate3d(0,-50px,0);}
}
@-webkit-keyframes bgscroll-sp{
0% {transform: translate3d(0,0,0);}
100% {transform: translate3d(0,-30px,0);}
}
@keyframes bgscroll-sp {
0% {transform: translate3d(0,0,0);}
100% {transform: translate3d(0,-30px,0);}
}
/*-------------------------------------*/
/* logoArea */
/*-------------------------------------*/
.logoArea{
position:absolute;
top:0;
left:0;
width:100%;
height:360px;
z-index:990;
}
@media screen and (max-width:980px){
.logoArea{
position:relative;
margin-top:-300px;
}
}
@media screen and (max-width:767px){
.logoArea{
height:200px;
margin-top:-95px;
}
}
.logoArea .logo{
position:absolute;
top:50%;
left:50%;
width:150px;
margin:-110px 0 0 -75px;
opacity:0;
-webkit-transition:opacity 1s ease 1s;
-moz-transition:opacity 1s ease 1s;
-o-transition:opacity 1s ease 1s;
transition:opacity 1s ease 1s;
}
@media screen and (max-width:767px){
.logoArea .logo{
width:100px;
margin:-90px 0 0 -50px;
}
}
.logoArea.animation .logo{
opacity:1;
}
.logoArea .logo img{
width:150px;
height:150px;
}
@media screen and (max-width:767px){
.logoArea .logo img{
width:100px;
height:100px;
}
}
.logoArea .concept{
position:absolute;
top:50%;
left:0;
width:100%;
text-align:center;
font-size:193%;
margin-top:80px;
opacity:0;
-webkit-transition:opacity 1s ease 1.5s;
-moz-transition:opacity 1s ease 1.5s;
-o-transition:opacity 1s ease 1.5s;
transition:opacity 1s ease 1.5s;
}
@media screen and (max-width:767px){
.logoArea .concept{
font-size:13pt;
margin-top:40px;
}
}
@media screen and (max-width:374px){
.logoArea .concept{
font-size:12pt;
}
}
.logoArea.animation .concept{
opacity:1;
}
/*-------------------------------------*/
/* conceptArea */
/*-------------------------------------*/
#conceptArea{
position:relative;
z-index: 110;
}
/* 画像動き */
#palla{
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
#palla .img-outer{
height:100%;
}
#palla .img-outer .palla-img01{
position:absolute;
left:18%;
width:82px;
height:100%;
transform:matrix(1, 0, 0, 1, 0, 0);
background:url(../images/common/img-palla01.png) top left no-repeat;
background-size:82px auto;
top:28%;
margin-left:auto;
margin-right:auto;
}
@media screen and (max-width:980px){
#palla .img-outer .palla-img01{
left:5%;
top:10%;
}
}
@media screen and (max-width:767px){
#palla .img-outer .palla-img01{
top:-3%;
width:41px;
background-size:41px auto;
}
}
#palla .img-outer .palla-img02{
position:absolute;
right:20%;
width:266px;
height:100%;
transform:matrix(1, 0, 0, 1, 0, 0);
background:url(../images/common/img-palla02.png) top left no-repeat;
background-size:266px auto;
top:20%;
margin-left:auto;
margin-right:auto;
}
@media screen and (max-width:980px){
#palla .img-outer .palla-img02{
right:0%;
}
}
@media screen and (max-width:767px){
#palla .img-outer .palla-img02{
width:133px;
background-size:133px auto;
}
}

#palla .img-outer .palla-img03{
position:absolute;
right:5%;
width:247px;
height:100%;
transform:matrix(1, 0, 0, 1, 0, 0);
background:url(../images/common/img-palla03.png) top left no-repeat;
background-size:247px auto;
top:60%;
margin-left:auto;
margin-right:auto;
}
@media screen and (max-width:980px){
#palla .img-outer .palla-img03{
right:-5%;
}
}
@media screen and (max-width:767px){
#palla .img-outer .palla-img03{
top:50%;
width:123px;
background-size:123px auto;
}
}
#palla .img-outer .palla-img04{
position:absolute;
left:5%;
width:244px;
height:100%;
transform:matrix(1, 0, 0, 1, 0, 0);
background:url(../images/common/img-palla04.png) top left no-repeat;
background-size:244px auto;
top:100%;
margin-left:auto;
margin-right:auto;
}
@media screen and (max-width:980px){
#palla .img-outer .palla-img04{
left:0%;
}
}
@media screen and (max-width:767px){
#palla .img-outer .palla-img04{
width:122px;
background-size:122px auto;
}
}
#conceptArea .areaInner{
max-width:690px;
padding-top:55px;
}
@media screen and (max-width:980px){
#conceptArea .areaInner{
padding-top:35px;
}
}
#conceptArea .ttl{
font-size:286%;
margin-bottom:30px;
}
@media screen and (max-width:767px){
#conceptArea .ttl{
font-size:16pt;
}
}
#conceptArea .note{
max-width:650px;
margin-bottom:1.5em;
}
#conceptArea .img01{
margin:58px 0 0 58px;
width:163px;
}
@media screen and (max-width:767px){
#conceptArea .img01{
margin:20px 0 0 0;
width:35%;
}
}
#conceptArea .img01 img{
width:100%;
height:auto;
}
#conceptArea .img02{
margin:-80px 0 0 50%;
width:334px;
}
@media screen and (max-width:767px){
#conceptArea .img02{
margin:-80px 0 0 40%;
width:60%;
}
}
#conceptArea .img02 img{
width:100%;
height:auto;
}
/*-------------------------------------*/
/* itemArea */
/*-------------------------------------*/
#itemArea{
	z-index: 999;
	margin-top:160px;
}
@media screen and (max-width:767px){
#itemArea{
	margin-top:70px;
}
}
#itemArea .ttl{
text-align:center;
font-size:193%;
}
@media screen and (max-width:767px){
#itemArea .ttl{
font-size:15pt;
}
}
#itemArea .itemList{
margin-top:100px;
position:relative;
}
@media screen and (max-width:767px){
#itemArea .itemList{
margin-top:50px;
}
}
#itemArea .itemList .itemEn{
position:absolute;
z-index:10;
top:20px;
right:0;
width:1em;
height:1em;
overflow:visible;
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
@media screen and (max-width:767px){
#itemArea .itemList .itemEn{
top:10px;
}
}
#itemArea .itemList .itemEn .txt{
white-space:nowrap;
}
#itemArea .itemList .tate{
position:absolute;
top:0;
right:50px;
z-index:10;
}
@media screen and (max-width:980px){
#itemArea .itemList .tate{
right:30px;
}
}
@media screen and (max-width:767px){
#itemArea .itemList .tate{
right:20px;
}
}
#itemArea .itemList .tate .itemName{
font-size:271%;
white-space:nowrap;
display:block;
-webkit-transition: opacity 1.5s ease 0.5s;
-moz-transition: opacity 1.5s ease 0.5s;
-o-transition: opacity 1.5s ease 0.5s;
transition: opacity 1.5s ease 0.5s;
}
@media screen and (max-width:980px){
#itemArea .itemList .tate .itemName{
font-size:200%;
}
}
@media screen and (max-width:767px){
#itemArea .itemList .tate .itemName{
font-size:13pt;
}
}
#itemArea .itemList .tate .kikan{
font-size:107%;
color:#b1272d;
margin-top:10px;
}
@media screen and (max-width:767px){
#itemArea .itemList .tate .kikan{
font-size:8pt;
margin-top:5px;
}
}
#itemArea .itemList .img{
margin-right:170px;
}
@media screen and (max-width:980px){
#itemArea .itemList .img{
margin-right:100px;
}
}
@media screen and (max-width:767px){
#itemArea .itemList .img{
margin-right:0;
}
}
#itemArea .itemList .img img{
width:100%;
height:auto;
}
@media screen and (max-width:767px){
#itemArea .itemList .img img{
transform:scale(1.1,1.1);
}
}
#itemArea .itemList .txtBox{
margin:-220px 180px 0 50%;
background:#fff;
padding:32px 0 0 32px;
position:relative;
}
@media screen and (max-width:980px){
#itemArea .itemList .txtBox{
margin:-170px 130px 0 50%;
}
}
@media screen and (max-width:767px){
#itemArea .itemList .txtBox{
margin:20px 0 0 0;
padding:0;
background:none;
}
}
#itemArea .itemList .txtBox .icon{
font-size:93%;
color:#fff;
background:#b1272d;
height:22px;
line-height:24px;
padding:0 10px;
display:inline-block;
margin-bottom:15px;
}
/*EDGE用記述 */
@supports (-ms-ime-align: auto) {
#itemArea .itemList .txtBox .icon{
line-height:20px;
}
}
@media screen and (max-width:767px){
#itemArea .itemList .txtBox .icon{
font-size:9pt;
margin-bottom:10px;
}
}
#itemArea .itemList .txtBox .note{
line-height:2;
margin-bottom:15px;
}
@media screen and (max-width:767px){
#itemArea .itemList .txtBox .note{
margin-bottom:5px;
}
}
#itemArea .itemList .txtBox .price{
white-space:nowrap;
line-height:1;
}
@media screen and (max-width:767px){
#itemArea .itemList .txtBox .price{
}
}
#itemArea .itemList .txtBox .price .num{
font-size:350%;
padding-right:5px;
}
@media screen and (max-width:767px){
#itemArea .itemList .txtBox .price .num{
font-size:20pt;
padding-right:0;
}
}
#itemArea .itemList .txtBox .price .unit{
font-size:178.5%;
}
@media screen and (max-width:767px){
#itemArea .itemList .txtBox .price .unit{
font-size:11pt;
}
}
#itemArea .itemList .txtBox .price .zei{
font-size:114%;
}
@media screen and (max-width:767px){
#itemArea .itemList .txtBox .price .zei{
font-size:9pt;
}
}
/* videoOuter */
#itemArea .itemList .videoOuter{
position:absolute;
top:30%;
right:200px;
z-index:11
}
@media screen and (max-width:980px){
#itemArea .itemList .videoOuter{
right:120px;
}
}
@media screen and (max-width:767px){
#itemArea .itemList .videoOuter{
top:48%;
right:75px;
}
}
#itemArea .itemList .videoOuter .video video{
width:100%;
height:auto;
position:relative;
z-index:10;
}
#itemArea .itemList .videoOuter .video video.none{
display:none;
}
#itemArea .itemList .videoOuter .video{
width:210px;
height:110px;
margin:0 auto;
position:relative;
}
@media screen and (max-width:767px){
#itemArea .itemList .videoOuter .video{
width:133px;
height:70px;
margin:0 auto;
position:relative;
}
}
#itemArea .itemList .videoOuter .video .bg{
background:none;
position:absolute;
top:0;
left:0;
width:100%;
height:100%;
}
#itemArea .itemList .videoOuter .video .bg.premium.on{
background:url(../images/common/premium.png) top no-repeat;
background-size:210px auto;
}
@media screen and (max-width:767px){
#itemArea .itemList .videoOuter .video .bg.premium.on{
background-size:133px auto;
}
}
#itemArea .itemList .videoOuter .video .bg.standard.on{
background:url(../images/common/standard.png) top no-repeat;
background-size:210px auto;
}
@media screen and (max-width:767px){
#itemArea .itemList .videoOuter .video .bg.standard.on{
background-size:133px auto;
}
}
/*-------------------------------------*/
/* blogList */
/*-------------------------------------*/
.blogList li{
padding: 30px 0;
border-bottom: 1px solid #aeaeae;
}
@media screen and (max-width:767px){
.blogList li{
padding: 15px 0;
}
}
.blogList li:first-child{
border-top: 1px solid #aeaeae;
}
.blogList .date{
width: 15%;
font-size: 128.5%;
margin-top: 5px;
}
@media screen and (max-width:767px){
.blogList .date{
width: 20%;
font-size: 10pt;
margin-top:1px;
}
}
.blogList .ttl{
width: 80%;
font-size: 157%;
line-height: 1.4;
}
@media screen and (max-width:767px){
.blogList .ttl{
width:75%;
font-size: 11pt;
}
}
/*shopLink*/
.shopLink{
	max-width: 688px;
	margin-left: auto;
	margin-right: auto;
}
.shopLink img{
width: 100%;
height: auto;
transition: all 0.3s ease;
}
.shopLink a:hover img{
	opacity: 0.7;
}
/*btnBlock*/
.btnBlock{
display: flex;
flex-wrap: wrap;
margin-left: auto;
margin-right: auto;
justify-content: center;
}
.btnBlock .btnIn{
width: 32%;
margin-right: 2%;
}
@media screen and (max-width:980px){
.btnBlock .btnIn{
width: 47.5%;
margin-right: 5%;
margin-bottom: 20px;
}
}
@media screen and (max-width:767px){
.btnBlock .btnIn{
margin-bottom: 10px;
}
}
.btnBlock .btnIn a:hover{
opacity: 0.7;
}
.btnBlock .btnIn:last-child{
margin-right: 0;
}
@media screen and (max-width:980px){
.btnBlock .btnIn:nth-child(2),
.btnBlock .btnIn:last-child{
margin-right: 0;
}
}
.btnBlock .btnIn img{
width: 100%;
height: auto;
}
/* btn */
.btn a{
display:block;
margin:100px auto 0;
width:100%;
max-width:690px;
height:90px;
line-height:90px;
border:2px solid #000;
text-align:center;
font-size:157%;
letter-spacing:0.1em;
}
@media screen and (max-width:767px){
.btn a{
margin:50px auto 0;
height:60px;
line-height:60px;
font-size:12pt;
}
}
.btn a:hover{
background:#000;
}
/*bnArea*/
#bnArea{
margin:155px auto;
}
@media screen and (max-width:767px){
#bnArea{
margin: 70px auto;
}
}
#bnArea .img{
float: left;
width: 49%;
margin-right: 2%;
margin-bottom: 10px;
}
#bnArea .img:nth-child(2n){
margin-right: 0;
}
#bnArea .img img{
width: 100%;
height: auto;
transition: all 0.3s ease;
}
#bnArea .img a:hover img{
opacity: 0.7;
}