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

body{
background-color: #fffdfa;
}

#bread{
color: #000000!important;
padding:20px!important;
}

#bread a,#bread a:visited{
	
color: #000000!important}

.item li.photo,.item li.txt{background-color: #000}

#copy{color: #000000;}

.title_sppage_02{
	width: auto!important;
}

.item_contents{
	padding-top: 120px;}

.item_contents_inner{
 padding-top: 120px;
 margin-top:-120px;}
	
.cellar_txtbox {
    width: 79%;
    margin: 30px auto;
	padding:30px;
    text-align: justify;
    position: relative;
    border: 1px solid #000;
}

.cellar_txt {
	color:#000;
	font-family: YuMincho, 'Yu Mincho', 'Hiragino Mincho ProN', 'serif';
    line-height: 2.0;
    position: relative;
    padding: 5px;
}

.QA {
	font-size:1.2em;
}

.QA_box img {
	width: auto;
	height: 300px;
	margin-top: 20px;
	margin-right: 30px;
	padding: 0;
	position: relative;
}

.QA_txt {
	display: flex;
}


h1 {
	font-size:2.0em;
	line-height: 1.5;
}

h2 {
	color: #000;
}

hr {
border-color: #000;
}


/* PC */
.img-box {
    position: relative;
	margin: 0 auto;
    width: 100%;
	max-width:1920px;
    height: 400px;
    overflow: hidden;
}

.img-box>div{
  position: absolute;
  top: 0;
  left: 0;
  width: 2000px;
  height: 400px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 10;
  opacity: 0;
  animation-name: fade;
  animation-duration: 12s;
  animation-iteration-count: infinite;
 }

.img-box>div:first-of-type{
  background-image: url(../../img/liquor_foods/cellar/head_img01.jpg);}

.img-box>div:nth-of-type(2){
  background-image: url(../../img/liquor_foods/cellar/head_img02.jpg);
 animation-delay: 4s;}

.img-box>div:last-of-type{
  background-image: url(../../img/liquor_foods/cellar/head_img03.jpg);
 animation-delay: 8s;}
 
 
 @keyframes fade {
  0%{
    opacity: 0;
  }
  20%{
    opacity: 1;
  }
  60%{
    opacity: 1;
  }
  80%{
    opacity: 0;
  }
  100%{
    opacity: 0;
    transform: translate(-20px);
    z-index: 0;
  }
}



/* PC inline */
.cellar_imgbox {
	width:100%;
	text-align: center;
}

.cellar_imgbox ul{
	width:100%;
	padding-inline-start: 0px;
}

.cellar_imgbox li{
	display: inline;
}


.cellar_imgbox img{
	width: 100%;
	max-width: 300px;
}


@media screen and (max-width: 767px){

#bread{
margin-top:20px!important;
padding-top:20px!important;
}

.cellar_txt h1 {
	font-size:1.2em;
}

/* SP */
.img-box {
    position: relative;
	margin: 0 auto;
    width: 100%;
	max-width:450px;
    height: 200px;
    overflow: hidden;
}

.img-box>div{
  position: absolute;
  top: 0;
  left: 0;
  width: 600px;
  height: 200px;
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  z-index: 10;
  opacity: 0;
  animation-name: fade;
  animation-duration: 12s;
  animation-iteration-count: infinite;
 }

.img-box>div:first-of-type{
  background-image: url(../../img/liquor_foods/cellar/img01.jpg);}

.img-box>div:nth-of-type(2){
  background-image: url(../../img/liquor_foods/cellar/img02.jpg);
 animation-delay: 4s;}

.img-box>div:last-of-type{
  background-image: url(../../img/liquor_foods/cellar/img03.jpg);
 animation-delay: 8s;}

.QA_box img {
	width: 100%;
	display: block;
	height: auto;
}

.QA_txt {
	display: block;
}



/* SP スワイプスライダ */
.cellar_imgbox {
	width:100%;
	height:100%;
	margin: 0 auto;
	position:relative;
}

.cellar_imgbox ul {
	padding:0;
	margin:0;
	width:100%;
	height:100%;
	overflow:hidden;
	white-space:nowrap;
	scroll-snap-type:x mandatory;
	scroll-behavior:smooth;
	overflow-x:auto;
}

.cellar_imgbox img {
	width:100%;
	height:100%;
	object-fit:contain;
}

.cellar_imgbox li {
	list-style:none;
	display:inline-block;
	scroll-snap-align:center;
	width:100%;
	height:100%;
}
.arrow {
	top:10px;
	position:absolute;
	width:5%;
	height:100%;
	background:rgba(255,255,255,0);
	cursor:pointer;
}
.arrow:before {
	content:'';
	position:absolute;
	width:7px;
	height:7px;
	border-left:3px solid gray;
	border-bottom:3px solid gray;
}
.left {
	left:0px;
}
.left:before {
	top:calc(50% - 10px);
	left:calc(50% - 4px);
	transform:rotate(45deg);
}
.right {
	right:0;
}
.right:before {
	top:calc(50% - 10px);
	right:calc(50% - 6px);
	transform:rotate(-135deg);
}

}