/* CSS Document */
html {
	-webkit-text-size-adjust: 100%;
	-ms-text-size-adjust: 100%;
	overflow-y: scroll;
	color: #222;
	font-weight: normal;
	font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
	scroll-behavior: smooth;
}

/* support iOS */
html{
  height: -webkit-fill-available;
  background: #e9e5e3;
}
body{
  min-height: 100vh;
  min-height: -webkit-fill-available;
}

/* --------------------------------------------- */
/* ▼モバイルファースト (全環境に共通のデザイン) */
/* --------------------------------------------- */

*{
  padding: 0;
  margin: 0;
  box-sizing: border-box;
}
h1,h2,h3,h4,h5,h6 { font-weight: normal;}
body,div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, form, fieldset, input, textarea, p, blockquote {
	margin: 0;
	padding: 0;
}
dd { margin-inline-start:0;}
li {list-style: none;}
p {
    margin-block-start: 0;
    margin-block-end: 0;
}
a { text-decoration: none; color: #222;}
a:hover,
a:hover span,
span a:hover{
    color: #222;
    pacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
}

a:hover img {
  opacity: 0.8;
  filter: alpha(opacity=80);
  -ms-filter: "alpha(opacity=80)";
}

img {width: 100%;/* font-size: 0; */}




/* --------------------------------------------- */
/* ▼TOP */
/* --------------------------------------------- */


/* --- 背景の指定 ------------------------------------------- */

.slide_a,.slide_a p {
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  height: 100vh;
  margin: 0;
  text-decoration: none;
}

@supports(-webkit-touch-callout: none){
/* iPhoneの表示のみ100vh指定を上書き */
.slide_a,.slide_a p{
  height: -webkit-fill-available;
  }
}
/* touch制御 */
.slide_a p { pointer-events: none;}


/* --- 背景画像 ----------------- */
.slide_a p.src01 { background-image: url( "/img/top_01.jpg"); background-position: top left;}
.slide_a p.src03 {background-image: url( "/img/top_03a.jpg");background-position: center;}
.slide_a p.src04 {background-image: url( "/img/top_04.jpg");background-position: right 45%;}
.slide_a p.src05 { background-image: url( "/img/top_05.jpg"); background-position: bottom right;}


#shop {position: relative; height: 100vh;}

#shop::before {
  background-image: url("/img/top_02.jpg");
  background-size: cover;
  background-position: 0px 40%;
  content: "";
  display: block;
  /* position: fixed; */
  top: 0;
  left: 0;
  z-index: -1;
  width: 100%;
  height: 100vh;
  background-repeat: repeat-y;
}


#shop .box_tit h1,
#shop .box_tit h2 {
    color: #FFF;
    font-size: 14px;
    position: absolute;
    z-index: 2;
    left: 50%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
}

#shop .box_tit h1{
    top:42%;
    background-image: url(/img/logo.png);
    background-repeat: no-repeat;
    background-size: contain;
    text-indent: 100%;
    white-space: nowrap;
    overflow: hidden;
    width: 160px;
    height: 27px;
}

#shop .box_tit h2{
    top:50%;
    font-size: 14px;
    width: 100%;
    text-align: center;
}

/* --------------------------------------------- */
/* ▼SHOP */
/* --------------------------------------------- */
@media screen and (max-width: 979px) {
#shop  {
    position: relative;
    height: 100vh;
    background-image: url( "/img/top_02.jpg");
    background-position: top center;
    background-repeat: no-repeat;
    background-size: cover;
}


}



@media screen and (min-width: 980px) {
    #shop {
    max-width: 1200px;
    padding: 30px;
    margin: 0 auto 40px;
    overflow: hidden;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
}
    .shop_pic {display: block;width: 50%;}
    #shop ul {
    margin-left: 2%;
    line-height: 3;
    height: 100%;
    vertical-align: bottom;
}

}

.slide_wrapper { position: relative; height: 100vh;}
.slide_wrapper ul {
    color: #fff;
    position: absolute;
    bottom: 8%;
    -ms-transform: translateY(-50%);
    left: 2%;
    padding: 10px;
}

.slide_wrapper ul a { color: #fff;}
.slide_wrapper li span  { font-size: 80%;} 
.link span {font-size: 100%!important;margin-left: 0.5em;}
.link { margin-bottom: 1em;}

/* -----Animation-----------*/
.fadein {
    opacity : 0;
    transform : translate(0, 50px);
    transition:all 0.5s;
}
.fadein.scrollin {
    opacity : 1;
    transform : translate(0, 0);
}



#sb_instagram .sbi_photo img{
width: 100%;
height: 100%; /*高さを指定*/
object-fit: cover; /*画像を表示範囲に合わせる*/
}

/* --- footer ----------------- */
footer  { font-size: 12px;text-align: center; padding: 20px 0; display: block;}

@media screen and (min-width: 1024px) {
    footer  {  padding: 50px 0; }
}