@charset "utf-8";
html {
font-size: 62.5%;
line-height: 1.8;
}
@media screen and (max-width:767px){
html {
font-size: 53.5%;
}
}
html[lang="ja"] body, html[lang="ja"] button, html[lang="ja"] input, html[lang="ja"] select, html[lang="ja"] textarea {
font-family: YakuHanJP_Narrow, "游ゴシック Medium", "Yu Gothic Medium","游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic,'Lato','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
font-weight:500;
}
body{
color:#000;
font-size: 1.4rem;
background:#fff;
-webkit-text-size-adjust: 100%;
}
.robot{
font-family: 'Roboto', YakuHanJP_Narrow, "游ゴシック Medium", "Yu Gothic Medium","游ゴシック", "Yu Gothic", "游ゴシック体", "YuGothic", YuGothic,'Lato','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','メイリオ',Meiryo,'ＭＳ Ｐゴシック',sans-serif;
font-weight:400;
}
/*---------------------------------------*/
/* layout */
/*---------------------------------------*/
.loading{
top: 0;
left: 0;
height: 100vh;
width: 100%;
z-index: 100;
background: #fff;
}
.logoOuter{
width: 500px;
left: 50%;
top: 55%;
transform: translate(-50%,-50%);
}
@media screen and (max-width:767px){
.logoOuter{
width: 70%;
}
}
.logoOuter .logo2{
width: 19%;
top: 3.9%;
left: 31.5%;
opacity: 0;
transform: rotate(30deg) scale(1.2,1.2);

transform-origin: bottom right;
transition: all 0.2s ease 0.5s;
}
.loaded .logoOuter .logo2{
opacity: 1;
transform: rotate(0);
}
.logoOuter .logo3{
width: 19.5%;
top: 0.5%;
left: 48.5%;
opacity: 0;
transform: rotate(-10deg) scale(1.2,1.2);
transform-origin: bottom left;
transition: all 0.2s ease 0.6s;
}
.loaded .logoOuter .logo3{
opacity: 1;
transform: rotate(0);
}
.logoOuter .logo4{
width: 100%;
top: 0;
left: 0;
opacity: 0;
transform: scale(1.2,1.2);
transition: all 0.3s ease 0.2s;
}
.loaded .logoOuter .logo4{
transform: scale(1,1);
opacity: 1;
}
#index .topVisual{
height: 100vh;
min-height:890px;
}
@media screen and (max-width:767px){
#index .topVisual{
min-height:1000px;
}
}
.topVisual .bg{
top: 0;
left:50%;
transform: translate(-50%,0);
width: 100%;
max-width: 1054px;
height: 100%;
background: url("../images/bg-scroll.jpg") center top repeat;
background-size:100% auto;
opacity: 0;
transition: all 2s ease 0.8s;
}
@media screen and (max-width:767px){
.topVisual .bg{
background: url("../images/bg-scroll-s.jpg") center top repeat;
background-size:100% auto;
}
}
.fade .topVisual .bg{
opacity: 1;
animation: topbgscroll 100s linear infinite;
}
@media screen and (max-width:1054px){
.fade .topVisual .bg{
animation: topbgscroll-narrow 100s linear infinite;
}
}
@media screen and (max-width:767px){
.fade .topVisual .bg{
animation: topbgscroll-sp 50s linear infinite;
}
}
@keyframes topbgscroll {
0% {background-position: 0 0;}
100% {background-position:0 -1287px;}
}
@keyframes topbgscroll-narrow {
0% {background-position: 0 0;}
100% {background-position:0 -122.106261859vw;}
}
@keyframes topbgscroll-sp {
0% {background-position: 0 0;}
100% {background-position:0 -200vw;}
}
.topVisual .hukidashi{
width: 150px;
top: -150px;
right: -130px;
}
@media screen and (max-width:980px){
.topVisual .hukidashi{
width: 130px;
top: -130px;
right: -110px;
}
}
@media screen and (max-width:767px){
.topVisual .hukidashi{
width: 100px;
top: -100px;
right: -80px;
}
}
.topVisual .hukidashi-txt{
width: 150px;
top: -75px;
right: -130px;
transform: translate(0,-50%);
}
@media screen and (max-width:980px){
.topVisual .hukidashi-txt{
width: 130px;
top: -65px;
right: -110px;
}
}
@media screen and (max-width:767px){
.topVisual .hukidashi-txt{
width: 100px;
top: -50px;
right: -80px;
font-size: 1.4rem;
}
}
#mainBody .logo{
top: 36px;
left: 36px;
width: 92px;
opacity: 0;
transition: all 1s ease 1s;
z-index: 999;
}
@media screen and (max-width:767px){
#mainBody .logo{
top: 20px;
left: 20px;
width: 70px;
}
}
#mainBody.fade  .logo{
opacity: 1;
}
#mainBody .logo-txt{
top: 30%;
left: 50%;
transform: translate(-50%,-50%);
width: 670px;
}
@media screen and (max-width:767px){
#mainBody .logo-txt{
width: 80%;
top: 250px;
}
}
.baseContents .ttlArea{
width: 140px;
left: calc(50vw - 550px);
z-index: 10;
}
@media screen and (max-width:1222px){
.baseContents .ttlArea{
left: 5%;
}
}
@media screen and (max-width:980px){
.baseContents .ttlArea{
width: 90%;
position: static;
margin: 0 auto 30px;
}
}
@media screen and (max-width:767px){
.baseContents .ttlArea{
margin: 0 auto 20px;
text-align: center;
}
}
.baseContents .ttlArea .rollTxt{
font-size: 5.2rem;
width: 1em;
height: 1em;
white-space: nowrap;
}
@media screen and (max-width:980px){
.baseContents .ttlArea .rollTxt{
width: auto;
height: auto;
}
}
.baseContents .ttlArea .rollTxt .txtIn{
transform: rotate(90deg);
}
@media screen and (max-width:980px){
.baseContents .ttlArea .rollTxt .txtIn{
transform: rotate(0deg);
}
}
.baseContents .ttlArea .tate{
left: 50%;
transform: translate(-57%,0);
}
@media screen and (max-width:980px){
.baseContents .ttlArea .tate{
transform: translate(0,0);
    writing-mode: horizontal-tb;
    -webkit-writing-mode: horizontal-tb;
    -ms-writing-mode: horizontal-tb;
}
}
@media screen and (max-width:767px){
.baseContents .ttlArea .tate{
position: static;
}
}
.baseContents .mainContent{
margin-left: calc(50vw - 410px);
width: calc(100vw - (50vw - 410px));
}
@media screen and (max-width:1222px){
.baseContents .mainContent{
margin-left: calc(5% + 140px);
width: calc(100vw - (5% + 140px));
}
}
@media screen and (max-width:980px){
.baseContents .mainContent{
margin-left: 0;
width: 100%;
}
}
.baseContents .mainContentIn{
max-width: 960px;
margin-right: 5%;
}
@media screen and (max-width:980px){
.baseContents .mainContentIn{
width: 90%;
margin: 0 auto;
}
}

.concepcArea .ttlArea .tate{
top: 215px;
}
@media screen and (max-width:980px){
.concepcArea .ttlArea .tate{
top: 10px;
left: 215px !important;
}
}
.concepcArea .bg{
width: 100%;
height: 512px;
background: url("../images/bg-concept.jpg") left center repeat-x;
background-size: 2862px auto;
animation: conceptSlide 150s linear infinite;
}
@media screen and (max-width:767px){
.concepcArea .bg{
height: 256px;
background-size:1431px auto;
}
}
@keyframes conceptSlide {
0% {background-position: 0 0;}
100% {background-position:-2862px 0;}
}
.itemArea .ttlArea .tate{
top: 345px;
}
@media screen and (max-width:980px){
.itemArea .ttlArea .tate{
top: 10px;
left: 345px !important;
}
}
.itemArea .itemCate .jp{
margin-left: 15px;
top: -5px;
}
.itemArea .itemListIn{
width: 29%;
margin-right: 6.5%;
}
@media screen and (max-width:767px){
.itemArea .itemListIn{
width: 49%;
margin-right: 2%;
}
}
.itemArea .itemListIn:nth-child(3n){
margin-right: 0;
}
@media screen and (max-width:767px){
.itemArea .itemListIn:nth-child(3n){
margin-right: 2%;
}
.itemArea .itemListIn:nth-child(2n){
margin-right: 0;
}
}
.itemArea .itemListIn .name{
width: calc(100% - 45px);
}
.itemArea .itemListIn .price{
width: 45px;
}
.mobOrder a{
width: 90%;
max-width: 678px;
height: 118px;
border: 2px solid #000;
}
@media screen and (max-width:767px){
.mobOrder a{
height: 130px;
}
}
.mobOrder a:hover{
background: #f6f6f6;
}
.mobOrder a .txtBox{
box-sizing: border-box;
padding-top: 30px;
}
@media screen and (max-width:767px){
.mobOrder a .txtBox{
padding-top: 15px;
}
}
.mobOrder a .txtBox .icon{
width: 49px;
margin-right: 60px;
}
@media screen and (max-width:767px){
.mobOrder a .txtBox .icon{
width:30px;
margin-right:0;
margin-bottom: 10px;
}
}
.mobOrder a .txtBox .txt{
padding-right: 80px;
}
@media screen and (max-width:767px){
.mobOrder a .txtBox .txt{
padding-right: 0;
width: 100%;
box-sizing: border-box;
line-height: 1;
}
}
.mobOrder a .arrow{
top: 45%;
right: 50px;
width: 10px;
height: 10px;
border-top: 2px solid #000;
border-right: 2px solid #000;
transform: rotate(45deg);
transition: all 0.3s ease;
}
.mobOrder a:hover .arrow{
right: 45px;
}
@media screen and (max-width:767px){
.mobOrder a .arrow{
top: auto;
bottom: 20px;
right: 50%;
transform: translate(50%,0) rotate(135deg);
}
.mobOrder a:hover .arrow{
right: 50%;
}
}
.infomation{
bottom: 0;
left: 0;
width: 100%;
background-size: auto auto;
background-color: rgba(255, 255, 255, 1);
background-image: repeating-linear-gradient(-45deg, transparent, transparent 9px, rgba(224, 224, 224, 1) 9px, rgba(224, 224, 224, 1) 11px );
padding: 40px 0 50px;
}
.infomationInner{
background: #fff;
padding: 55px 15px;
}
.infomationInner .info{
width:90%;
margin: 0 5% 30px;
}
@media screen and (max-width:980px){
.infomationInner .info:last-child{
margin-bottom: 0;
}
}
.infomationInner .info .ttl{
width: 40%;
}
@media screen and (max-width:980px){
.infomationInner .info .ttl{
width: 35%;
}
}
@media screen and (max-width:767px){
.infomationInner .info .ttl{
width: 100%;
margin-bottom: 15px;
}
}
.infomationInner .info .txtBox{
width: 60%;
}
@media screen and (max-width:980px){
.infomationInner .info .txtBox{
width: 65%;
}
}
@media screen and (max-width:767px){
.infomationInner .info .txtBox{
width: 100%;
}
}
.infomationInner .info .mappin a{
width: 10px;
margin-left: 5px;
top: -6px;
}
.infomationInner .info .mappin a:hover{
opacity: 0.6;
}
.infomationInner .info .newIcon{
width: 70px;
height: 70px;
line-height: 1.2;
background: #ffff00;
top: 0;
left: 0;
transform: translate(-50%,-62%)
}
.infomationInner .info .newIcon .txt{
top: 50%;
left: 50%;
transform: translate(-50%,-50%);
}
.infomationInner .info .ttl{
z-index: 10;
}
/*btn*/
.btn a{
width: 100%;
max-width: 340px;
height: 55px;
line-height: 55px;
border: 1px solid #000;
border-radius: 55px;
}
.btn a .arrow{
width: 5px;
height: 5px;
border-top: 1px solid #fff;
border-right: 1px solid #fff;
top: 50%;
right: 30px;
transform: translate(0,-50%) rotate(45deg);
}
.btn a:hover{
background: #fff;
}
.btn a:hover .arrow{
border-top: 1px solid #000;
border-right: 1px solid #000;
}
/*basePage*/
.basePage{
margin-top: 200px;
}
/*---------------------------------------*/
/* layout */
/*---------------------------------------*/
#container{
min-height:100vh;
}
/*---------------------------------------*/
/*fixBar*/
/*---------------------------------------*/
.fixBar{
display: none;
}
.fixBarIn{
bottom: 0;
left: 0;
width: 100%;
height: 70px;
border-top: 1px solid #000;
z-index: 999;
}
@media screen and (max-width:767px){
.fixBarIn{
height:50px;
}
}
.fixBar .bn{
width: 50%;
}
.fixBar .bn a{
height: 100%;
box-sizing: border-box;
padding-top: 15px;
}
@media screen and (max-width:767px){
.fixBar .bn a{
padding-top: 13px;
font-size: 1.3rem;
line-height: 1.4;
}
}
.fixBar .bn a:hover{
background: #f5f5f5;
}
.fixBar .bn a:after{
content: "";
position: absolute;
top: 0;
right: 0;
width: 1px;
height: 100%;
background: #000;
}
.fixBar .bn:last-child a:after{
display: none;
}
@media screen and (max-width:767px){
.fixBar .bn .telnum{
font-size: 1.5rem;
}
}
.fixBar .newIcon{
width: 180px;
height: 25px;
border-radius: 30px;
background: #ffff00;
top: 0;
left: 3%;
transform: translate(0,-70%);
z-index: 99;
}
@media screen and (max-width:767px){
.fixBar .newIcon{
height: 18px;
width: 150px;
transform: translate(0,-50%);
}
}
.fixBar .newIcon .txt{
top: 50%;
left: 50%;
white-space: nowrap;
transform: translate(-50%,-50%);
}
/*fixBnr*/
#fixBnr {
position: fixed;
bottom: 90px;
right: 10px;
width: 375px;
z-index: 99;
background: #fff;
}
@media screen and (max-width:767px){
#fixBnr {
width: 230px;
bottom: 60px;
}
}
#fixBnr .close{
position: absolute;
top: -30px;
left: 0;
width: 100%;
height: 30px;
line-height: 30px;
text-align: center;
background: #333;
color: #fff;
letter-spacing: 0.2em;
cursor: pointer;
transition: all 0.6s ease 0s;
}
#fixBnr .close:hover{
background: #aeaeae;
}
#fixBnr .close .closs{
display: inline-block;
width: 15px;
height: 15px;
position: relative;
transform: rotate(45deg);
top: 6px;
margin-right: 10px;
}
#fixBnr .close .closs:before{
content: "";
position: absolute;
top: 0;
left: 50%;
width: 1px;
height: 100%;
background: #fff;
transform: translate(-50%,0);
}
#fixBnr .close .closs:after{
content: "";
position: absolute;
left: 0;
top: 50%;
height: 1px;
width: 100%;
background: #fff;
transform: translate(0,-50%);
}
#fixBnr a:hover{
opacity: 0.7;
}
#fixBnr img{
width: 100%;
height: auto;
}