/* CSS Document */
/*==============================================================================*/
/* mainimg
============================================================================== */
/**/
main h1 img{ margin: 0 auto; display: block; }


/*==============================================================================*/
/* 
============================================================================== */
a{ color: #250000; }
a:hover{ color:#590000 }

/*prev/next*/
#navBtn li a{ border-radius: 10px; 
    align-items: center; justify-content: center; display: flex;
    width: 100%; position: relative;}


/*icon*/
#navBtn li a i{ position: absolute; background-repeat: no-repeat; background-position: 0 center;
    height: 61px; left:20px; }


/* <- -> */
#prev a::before,#next a::before {
    bottom: 40%;
    width: 32px;
    transition: all .3s; }
  #prev a::before, #next a::after,#next a::before{ right: 20px; }

  #prev a::before, #prev a::after,
  #next a::before,#next a::after {
    position: absolute; content: "";
    background: #000; height: 2px; }

  #prev a::after,  #next a::after{  bottom: 43%; width: 8px;  }

  #prev a::after { transform: rotate(-35deg); transition: all .3s;  right: 44px; }
  #next a::after { transform: rotate(35deg); transition: all .3s; }

  #prev a:hover::before{right: 30px;  }
 #next a:hover::after,#next a:hover::before{ right: 13px; }
  #prev a:hover::after{ right: 52px; }


 #concept,
 #mv{ background-position: center 0; background-repeat:  no-repeat; background-size: cover;}

#concept,#mv h2,.mov01{ text-align: center; }


/*modal
--------------------------------------------------*/
.mov01{  margin:0 auto ; }


/*==============================================================================*/
/* mainarea
============================================================================== */
#mainarea img{ width: 100%; }


/*==============================================================================*/
/* kinsaya
============================================================================== */
#kinsaya,#ginsaya{  background-position: center 0;background-size: cover;}

#kinsaya{ background-repeat: no-repeat;}

.flame{ background-repeat: no-repeat;   background-position: center 0;
    margin-left:  auto;margin-right:  auto; text-align: center; }

.itemabout{ max-width: 1090px; margin: 0 auto; width: 100%; }
.itemabout li{ display: flex; }

.itemabout dl,
.kinsayaTitle, .ginsayaTitle{ display: flex; justify-content: center;}
.itemabout dl{ flex-wrap: wrap;}

.kinsayaTitle, .ginsayaTitle{ background-repeat: no-repeat; background-position: 0 0; 
   align-items: center; position: relative; z-index: 1; }

.itemabout dd{ z-index: 0;position: relative; }


/*==============================================================================*/
/* ginsaya
============================================================================== */
#ginsaya{ background-repeat: repeat;}

#ginsaya .flame{ margin-bottom: 20px; } 

/*==============================================================================*/
/* lineup
============================================================================== */
#lineup{ text-align: center; background: url(../image/bg.gif) center 0 repeat; }
#lineup ul{ display: flex; justify-content: center;}

#lineup dt{  border-bottom: double  #a59264; border-top: double #a59264;
    line-height: 1.5em;}
#lineup dd{ font-size: 0.9375em; }

/*sp*/
/*pc-----------------------------------------------------*/

@media screen and (min-width: 1025px) {
  .itemabout dl{  width: 50%; }
}

@media screen and (min-width: 751px) and (max-width: 1550px) {
  .left img,.right img{ width: 100%; }
  }
  
@media screen and (min-width: 1081px) and (max-width: 1550px) {
  .left, .right{ width: 20%; }
}

@media screen and (min-width: 751px) and (max-width: 1080px) {
  .left, .right { width: 19%;  }
}

@media screen and (min-width: 751px) and (max-width: 1024px) {
 .itemabout img{ width: 100%; } 
 .kinsayaTitle,.ginsayaTitle{ background-size: 100%; background-position: 0 center;}
 .itemabout dl{  width: 60%; }

 .itemabout .kinsayaTitle img,.itemabout .ginsayaTitle img{ width: 90%; padding-left: 12%;
  box-sizing: border-box;}
}

@media screen and (min-width: 751px) {
  #concept{ padding:120px 0; background-image: url(../image/welcomearea.jpg) }
  #mv{ background-image: url(../image/mvarea.jpg) ; padding:25px 0 60px}
  #mv h2{ text-align: center; margin-bottom: 20px; }

  #kinsaya,#ginsaya{  padding:100px 0  80px;}
  #kinsaya .flame{ margin-bottom: 30px; } 
  #kinsaya .flame h2{ margin: -125px 0 50px; }

  #kinsaya .itemabout li:first-child figure{ margin-left:30px }
  #kinsaya .itemabout li:last-child figure{ margin-right:50px }
 
.itemabout li:first-child{ margin-bottom: 20px; }
#kinsaya{ background-image: url(../image/kinsayaarea.png)  ; }
#kinsaya,#ginsaya{  position: relative; }

.kinsayaTitle, .ginsayaTitle{ width: 448px; height: 116px;}
.kinsayaTitle{ background-image: url(../image/kinsayaitemtitle.png) ; }

.left,.right{ position: absolute; }
.left{ left:0 }
.right{right:0 }
#kinsaya .left{ top:0 }
#kinsaya .right{ top:50px }

.flame{ background-image: url(../image/flame.png) ; height: 419px;  padding-top: 80px;}

.itemabout li:first-child .kinsayaTitle{ margin:5px 0 0 50px; }
.itemabout li:last-child .kinsayaTitle{ margin:20px 0 0 -50px; }

#kinsaya .itemabout li:first-child dd{ margin-top: -66px; }
#kinsaya .itemabout li:last-child dd{ margin-top: -26px; }


.ginsayaTitle{ background-image: url(../image/ginsayaitemtitle.png); }
#ginsaya{  background-image: url(../image/ginsayabg.png) ; }
#ginsaya .left,#ginsaya .right{ top:50px }

#ginsaya .flame h2{ margin: -145px 0 50px; }

.itemabout dt.ginsayaTitle:first-child{ margin-top: 10px; }
#ginsaya .itemabout li:first-child dd{ margin-top: -70px;  }
#ginsaya .itemabout li:first-child figure{ margin-left:-7px }

#ginsaya .itemabout li:last-child figure{ margin: 0 30px }
#ginsaya .itemabout li:last-child  dd{  margin-top: -5px; }
#lineup{padding:60px 0 144px;}
#lineup h2{ margin-bottom: 60px; }

#lineup li:not(:last-child){ margin-right: 35px; }
#lineup dt{ font-size: 1.125em; padding: 6px 0 7px; margin:12px 0;}
}

@media screen and (min-width: 751px) and (max-width: 850px) {
  #lineup dt{ font-size: 1em; }
}

@media screen and (max-width: 750px) {
#concept{ padding:8% 6% 21vw; background-image: url(../image/welcomearea_sp.jpg) ; }
#conceptWrap{ background: url(../image/welcome_sp.png) 0 0 no-repeat; padding:10vw 0 5vw; background-size: 100%; }
#conceptWrap dd:first-child{ margin-bottom: 5% }
#conceptWrap dd:first-child img{ max-width: 220px; width: 50%; }
#shop img{ max-width: 529px; width: 78%; }
#conceptWrap dt{ padding: 3.7vw 0 12vw; }
#conceptWrap dt img{ max-width: 395px; width: 58%; }

#conceptWrap p img{ max-width: 509px; width: 72%; }

#conceptBtn{ display: flex; justify-content: center; align-items: center; padding:14vw 0 7vw}
#conceptBtn li:first-child{ margin-right: 30px; }
#conceptBtn li { width: 26%;  }


#mv{ background-image: url(../image/mvarea_sp.jpg) ; padding:4vw 0 6%}
#mv h2{ margin: 0 auto 2%; width: 40%; max-width: 219px; }

#aboutmeal{ background: #000; display: flex; padding: 5% 13% 6%; justify-content: space-between;}
#aboutmeal li:first-child{ margin-right: 4%;}
#aboutmeal li img{max-width: 395px; width: 100%; }
#aboutmeal li { width: 58%; }
#kinsaya{  background-image: url(../image/kinsayabg_sp.png) ;  padding:60px 0 100px;}

#kinsaya .flame h2{ margin: -35px 0 25px; }
.flame h2 img{ width: 80%; }

.kinsayaTitle, .ginsayaTitle{ width: 537px; height: 139px; background-position: center; }
.kinsayaTitle{ background-image: url(../image/kinsayaitemtitle_sp.png) ;
  background-size: 100%; }

.kinsayaTitle img, .ginsayaTitle img{margin: 0 auto;  display: block; }

#kinsaya .flame{ background-image: url(../image/flame_sp.png) ; height: 64vw; margin-bottom: 3%; }
.flame{  padding-top: 4%;background-size: 100%; box-sizing: border-box; }
#kinsaya .flame img{ width: 88%; }


.itemabout li:first-child{ margin-bottom: 30px; }
.itemabout li:first-child .kinsayaTitle{ margin:0 20px 0 30px; }
.itemabout li:last-child .kinsayaTitle{ margin:0 20px 0 20px; }

.itemabout li{flex-wrap: wrap; justify-content: center;}
.itemabout li figure{ margin-bottom: 4vw; width: 62%; }

.itemabout li:first-child figure{ order:1;  }
.itemabout li:first-child dl{ order:2 }
.itemabout dl{ width: 96%; }

#kinsaya .itemabout li:first-child dd{ margin-top: -25px; }
#kinsaya .itemabout li:last-child dd{ margin-top: -16px; }

#ginsaya{  background-image: url(../image/ginsayabg_sp.png) ; position: relative; padding:60px 0;}
#ginsaya::before,#ginsaya::after{ position: absolute; content:""; width: 100%; height: 15px; background-repeat: repeat-x;}
#ginsaya::before{ top: 0; background-image :url(../image/abouvshadow.png)  ; }
#ginsaya::after{ bottom: 0; background-image: url(../image/undershadow.png)  ;}

#ginsaya .itemabout li:first-child figure{ margin-left: 3vw; }
#ginsaya .flame{ background-image: url(../image/ginsayaflame_sp.png) ; height: 71.5vw; margin-bottom: 25px; }
#ginsaya .flame h2{ margin: -50px 0 10px; }
.ginsayaTitle{ background-image: url(../image/ginsayaitemtitle_sp.png);  background-size: 100%; }

#ginsaya .flame img{ width: 79%; }
#ginsaya .itemabout li:first-child .ginsayaTitle{ margin:0 40px 0 40px }


#ginsaya .itemabout li:last-child .ginsayaTitle{ margin: 0 10px 0 20px; }


#lineup{padding:50px 0 44px;}
#lineup h2{ margin: 0 auto 40px; width: 86%;}

#lineup ul{ flex-wrap: wrap;  margin: 0 auto;}
#lineup li{ margin-bottom: 10vw; width: 46%;}
#lineup li:nth-child(odd) { margin-right: 6%; }
#lineup li img{ width: 86%; }
#lineup dt{ font-size: 3.2vw;padding: 5% 0 5%;  margin: 3vw 0 4%;  line-height: 1.3em; line-height: 1.3em;} 
#lineup dd{ font-size: 2.8vw; margin: 0 4% 0 5%}

}

@media screen and (min-width: 581px)  and (max-width: 750px) {
#ginsaya .itemabout li:first-child dd{ margin-top: -10px; }
}

@media screen and (max-width: 580px) {
  #conceptWrap dt {  padding: 2vw 0px 10vw; }
  .kinsayaTitle img{ max-width: 407px; width: 78%; }

  #ginsaya .itemabout li:first-child .ginsayaTitle img{ max-width: 379px; width: 70%; }
  #ginsaya .itemabout li:last-child .ginsayaTitle img{ max-width: 301px; width: 85%;}
  #ginsaya .itemabout li:first-child dd{ margin-top: -10vw; }
  #ginsaya .itemabout li:last-child dd{ margin-top: -40px; }

}

/**/
@media screen and (max-width: 480px)  {
  #kinsaya{ padding-bottom: 13%; }
  .flame, .itemabout li:first-child{ margin-bottom: 3%; }
  .itemabout li figure{ margin-bottom: 0vw; }
  #kinsaya .itemabout li:first-child dd { margin-top: -35px; }
  #kinsaya .itemabout li:last-child dd { margin-top: -32px;}

  #ginsaya{ padding-bottom: 7%; }
  #ginsaya .itemabout li:last-child .ginsayaTitle{ margin: 2% 30px 0 40px; }
  #ginsaya .itemabout li:first-child dd { margin-top: -14vw; }
  #ginsaya .itemabout li:last-child dd { margin-top: -20px; }
}

@media screen and (max-width: 375px) {
#conceptWrap dd:first-child { margin-bottom: 3%;  }
#conceptWrap dt {  padding: 3vw 0 9vw;}

.itemabout li:first-child .kinsayaTitle,#ginsaya .itemabout li:first-child .ginsayaTitle { margin-top: -15px ;}
#kinsaya .itemabout li:first-child dd { margin-top: -41px; margin-bottom: 1%;}

.kinsayaTitle img{ width: 76%; }
.itemabout li:last-child .kinsayaTitle{ margin-top: -10px ;}
#kinsaya .itemabout li:last-child dd { margin-top: -39px;}
#ginsaya .itemabout li:first-child dd {  margin-top: -18vw;}

#ginsaya .itemabout li:last-child .ginsayaTitle{  margin-top: -5px ; }
#ginsaya .itemabout li:first-child .ginsayaTitle{  margin-right: 20px ; }
#ginsaya .itemabout li:last-child dd { margin-top: -10vw;}
#ginsaya .itemabout li:first-child .ginsayaTitle img,
#ginsaya .itemabout li:last-child .ginsayaTitle img{ width: 70%; }
#ginsaya .itemabout li:last-child .ginsayaTitle { margin-left: 30px; margin-right: 20px;}
#ginsaya .itemabout li:last-child dd{ margin-top: -40px; }
}

@media screen and (max-width: 320px) {
  #conceptWrap dd:first-child { margin-bottom: 1%;  }
  #conceptWrap dt{ padding-top: 1.5vw;padding-bottom: 10vw; }
}