@charset "utf-8";
/*----------------
[1]common
[2]headerContainer
[3]sideContainer
[4]footerContainer
[5]Container
[6]topContainer
[7]subContainer
[8]other
------------------ */

/* **********************************************************************************************
[1]common
************************************************************************************************ */
html{
	-webkit-text-size-adjust: 100%;
	font-size: 62.5%;
	margin: 0;
	padding: 0;
}
body{
	line-height: 1.5;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	font-size: 1.4rem;
	font-family: 'Noto Sans JP', sans-serif;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	color: #000;
	letter-spacing: 0.5px;
	font-weight: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
}

header {
	width: 100%;
	height: 40px;
	z-index: 99999999997;
	position: fixed;
	top: 0px;
	left: 0;
	box-sizing: border-box;
	/* background-color: #FFF; */
}


header.fixed {
	width: 100%;
	height: 40px;
	z-index: 99999999997;
	position: fixed;
	background-color: rgba(255,255,255,0.7);
	top: 0px;
	left: 0;
	box-sizing: border-box;
	/* box-shadow: 1px 2px 2px rgba(0,0,0,0.1); */
}

#sub header,
#sub header.fixed {
	width: 100%;
	height: 40px;
	z-index: 99999999997;
	position: fixed;
	background-color: rgba(255,255,255,1.0);
	top: 0px;
	left: 0;
	box-sizing: border-box;
	/* box-shadow: 1px 2px 2px rgba(0,0,0,0.1); */
}

#sub header {border-bottom: 1px solid #eee;}


#trns{
	position: fixed;
	top:0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: 99999999999999;
	background-image: url(images/logo-footer.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 165px 49px;
	background-color: #FFF;
}
#wrapper {
	width: 100%;
	position: relative;
	overflow: hidden;
}

/* clear
----------------------------------------------- */
.clear { clear: both; }
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix { min-height: 1px; }
* html .clearfix {
	height: 1px;
	/*\*//*/
	height: auto;
	overflow: hidden;
	/**/
}

/* a 
----------------------------------------------- */
a,a:link { text-decoration: none; }
a img, img {
	border: none;
	line-height: normal;
	vertical-align: top;
}

/* img 
----------------------------------------------- */
img{
    max-width: 100%;
    height: auto;
    width /***/:auto;
}
.imgText {
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
}
.object-fit-img {
	object-fit: cover;
	object-position: 50% 50%;
	font-family: 'object-fit: cover; object-position: 50% 50%;'
}

/* slide
----------------------------------------------- */
#topContent {
	position: relative;
	top: 0;
	left: 0;
	width: 100%;
}

#sliderbox {
	position: relative;
	width: 100%;
	overflow:  hidden;
	height: 60vh;
	padding: 0;
	top: 0px;
	box-sizing: border-box;
}

#sliderbox li.box,
#sliderbox2 li.box {
	position: relative;
	width: 100%;
	overflow: hidden;
}
#sliderbox li figure,
#sliderbox2 li figure{
	position: relative;
	width: 100%;
	overflow: hidden;
	height: 60vh;
}

#sliderbox2 li figure{
	height: 30vh;
}
#sliderbox li figure img,
#sliderbox2 li figure img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.slideBg {
position: absolute;
width: 100%;
height: 100%;
top:0;
left:0;
background-image: url(images/slidebg.png);
background-repeat: repeat;
background-size: container;
z-index: 9999999;
overflow: hidden;
}

.mainTxt {
	color: #fff;
	position: absolute;
	top:60px;
	left: 50%;
	margin-left: -80px;
	/* margin-top: -227px; */
	z-index: 999999999;
	width: 160px;
	height: 210px;
	text-align: left;
	font-family: 'Noto Serif JP', serif;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
.mainTxt p {
	font-size: 12px;
	font-weight: 300;
	letter-spacing: 1.0px;
	line-height: 1.8;
	
}
.mainTxt h2 {
	font-size: 20px;
	line-height: 1.2;
	font-weight: 300;
	padding-left: 15px;
}

.scroll {
	position: absolute;
	bottom: 0;
	left: 15px;
	color: #fff;
	width: 10px;
	height: 90px;
	font-size: 10px;
	z-index: 999999999;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-align: left;
	font-family: 'Lora', serif;
	display: none;
}
.scroll a{
	color: #fff;
	position: relative;
	width: 10px;
	height: 90px;
	display: block;
	box-sizing: border-box;
}
.scroll a:after {
	position: absolute;
	background-color: #FFF;
	width: 1px;
	height: 30px;
	left: 0px;
	margin: 0;
	bottom: 25px;
	content: "";
	transition:bottom .3s,height .3s;
}


/* **********************************************************************************************
[2]headerContainer
************************************************************************************************ */
header h1 {
	position: relative;
	left: 5px;
	width: 110px;
	height: 31.5px;
	top: 4.25px;
	text-align: center;
	z-index: 999999999;
}
header h1 a {
	display: block;
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	position:relative;
	width: 110px;
	height: 31.5px;
	background-size: contain;
	margin: 0 auto 0;
	box-sizing: border-box;
	background-image: url(images/logo.png);
	transition: opacity .3s;
}
#sub header h1 a,
header.fixed h1 a{
	background-image: url(images/logoS.png);
	transition: opacity .3s,width .3s,height .3s,background-image .3s;
}


.headerMain {position: fixed; top: 0; left: 0; width: 100%;}
.headerMainNav,
.shopnav {display: none;}


#_btn {
  overflow: hidden;
  background-color: rgba(255,255,255,0.7);
  height: 40px;
  width: 40px;
  position: fixed;
  top: 5px;
  right: 5px;
  z-index: 9999999999999;
  box-sizing:  border-box;
  border-radius: 50%;
  transition: background-color .3s,top .3s;
}
#sub #_btn,
#_btn.fixed2 {
  background-color: rgba(255,255,255,0);
  top: 0px;
  transition: background-color .3s,top .3s;
}

#_btn_nav {
  float: left;
  cursor: pointer;
  position: relative;
}
#nav_open {
  position: absolute;
  z-index: 2;
  top: 0;
  height: 40px;
  width: 40px;
transition:width .3s, height .3s;
}
#nav_close {
  position: relative;
  z-index: 2;
  top:  0px;
  height: 40px;
  width: 40px;
  transition:width .3s, height .3s;
}

#fadeLayer {
  position:absolute;
  top:0px;
  left:0px;
  width:100%;
  height:100%;
  background-color: rgba(0,0,0,0.6);
  visibility:hidden;
  z-index: 99999999998;
  cursor: pointer;
}
#menu {
  	position: relative;
  	z-index: 0;
  	top: 8px;
	margin: 0px auto 0;
 	height: 16px;
	width: 24px;
    cursor: pointer;
    font-family: 'Lora', serif;
	transition:top .3s;
}
#menu:after {
	content:"MENU";
	color: #000;
	font-size: 10px;
	position: absolute;
	bottom: -13px;
	left: -2px;
}
#menu.active:after {
	content:"CLOSE";
	color: #000;
	font-size: 10px;
	bottom: -13px;
	left: -4px;
} 
#menu .bar {
    display: inline-block;
    width: 24px;
    height: 2px;
    background-color: #000;
    position: absolute;
    left: 50%;
	margin-left: -12px;
    transition: .15s ease-in-out;
}
#bar01 {top: 0;}
#bar02 {top: 6px;}
#bar03 {top: 12px;}
.active #bar01 {
    top: 6px;
    transform: rotate(45deg);
}
.active #bar02 {width: 0;}
.active #bar03 {
    top: 6px;
    transform: rotate(-45deg);
}

/* **********************************************************************************************
[3]sideContainer
************************************************************************************************ */
.headerNav {
	width: 100%;
	height: 100%;
	position: fixed;
	top: -100%;
	left: 0;
	z-index: 99999999999;
	padding: 0px 0 0;
	box-sizing: border-box;
	background-color: #fff;
	overflow: auto;	
}

    .humber {
        /* height: 150px;
        overflow-y: scroll; */
        height: 100%;
        overflow: auto;
        -ms-overflow-style: none;    /* IE, Edge 対応 */
        scrollbar-width: none;       /* Firefox 対応 */
    }
    .humber::-webkit-scrollbar {  /* Chrome, Safari 対応 */
        display:none;
    }

.headerNav2 {
	width: 296px;
	height: 266px;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 99999999999;
	margin-top:-133px;
	margin-left:-148px;
	box-sizing: border-box;

}


.navlogo {
	position: relative;
	margin: 0 auto 20px;
	width: 124px;
	height:33px;
	z-index: 9999999999;
}
.navlogo a {
	display: block;
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	position:relative;
	width: 124px;
	height:33px;
	margin: 0 auto 0;
	box-sizing: border-box;
	background-image: url(images/logo-menu.png);
	background-size: contain;
	transition: opacity .3s;
}

.navBox ul.side001 {
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-align: left;
	width: 293px;
	line-height: 1.65;
}

.navBox ul.side001.side004 {
	width: 130px;
	margin: 0 auto;
}

.navBox ul.side001 a{
	display: block;
	color: #000;
	padding: 0 4px;
	box-sizing: border-box;
	font-family: 'Noto Serif JP', serif;
	font-size: 15px;
	letter-spacing: 1.2px;
	

}

.navBox ul.side001 a span{
	display: inline-block;
	position: relative;
	padding: 10px 0;
	box-sizing: border-box;
}

.navBox ul.side001 a span:before{
position: absolute;
top:0;
left:0;
right: 0;
margin:0 auto;
background-color: rgba(0,0,0,0.7);
width: 1px;
height: 6px;
content:"";
transition: height .3s;
}
.navBox ul.side002,
.navBox ul.side003 {text-align: center;}
.navBox ul.side002 li {
	display: inline-block;
	padding: 10px;
	box-sizing: border-box;
	border-left: 1px solid #ccc;
}

.navBox ul.side003 li {
	display: block;
	padding: 5px 10px;
	box-sizing: border-box;
	border-top: 1px solid #eee;
}
.navBox ul.side003 li a{display: block; color: #000;}
.navBox ul.side002 li:first-child {
	border-left: none;
}

.side002 {margin-top: 40px;}
.side003 {margin-top: 30px;}
.side002 li a img{ width: 25px;}
.side002 li a{
	color: #000;
	display: block;
	font-family: 'Lora', serif;
	position: relative;
	font-size: 13px;
	padding: 10px;
	box-sizing: border-box;
	border-radius: 80px;
	font-weight: 300;
	text-align: center;
	transition: opacity .3s;
}

.navlogo a:hover,
.navBox ul.side002 li a:hover {transition: opacity .3s;opacity:0.7; filter: alpha(opacity=70); -ms-filter: "alpha( opacity=70 )";}

.side002 li a span {
	display: inline-block;
	padding-top: 5px;
}
.side002 li a img{vertical-align: top;}


/* add */
.navBox ul.side002 li {padding: 0px 10px;}
.side002 {margin-top: 5px;}
.side002 li a img{ width: 18px; vertical-align: middle;}
.side002 li a{padding: 5px 10px;}
.side002 li a span {padding-left: 5px;}


/* **********************************************************************************************
[4]footerContainer
************************************************************************************************ */
footer {
	position: relative;
	width: 100%;
	padding: 20px 10px 40px;
	box-sizing:  border-box;
	color: #000;
}


.footerCompany dl { box-sizing: border-box; text-align: center; margin-bottom: 10px;}
.footerCompany dt {
width: 82.5px;
height: 24.5px;
margin: 0px auto 0;
box-sizing: border-box;
}
.footerCompany dt a{
	display: block;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	background-image: url(images/logo-footer.png);
	background-repeat: no-repeat;
	background-size: contain;
width: 82.5px;
height: 24.5px;
}
.footerCompany dd {text-align: center; font-size: 12px; margin: 5px 0 0 0; font-family: 'Noto Sans JP', sans-serif;}

.mailBtn {
	position: fixed;
	left: 0;
	bottom: 0px;
	width: 100%;
	height: 40px;
	z-index: 99999999999;
	box-sizing: border-box;
	text-align: center;
	font-family: 'Lora', serif;
	background-color: rgba(255,255,255,0.7);
}

.mailBtn li {display: inline-block; vertical-align: top;}

.mailBtn li:nth-of-type(1){
	font-size: 20px;
	color: #000;
	transition: color .3s;
	padding-top: 6px;
	box-sizing: border-box;
}
.mailBtn.mailBtn2 li:nth-of-type(1){
	font-size: 14px;
	color: #000;
	transition: color .3s;
	padding-top: 2px;
	box-sizing: border-box;
}
.mailBtn li:nth-of-type(2),
.mailBtn.mailBtn2 li:nth-of-type(3) {
	padding-top: 2px;
	box-sizing: border-box;
}


.mailBtn li:nth-of-type(1) .teltxt{
	font-size: 12px;
}

.mailBtn li:nth-of-type(1) a{
	color: #000;
	border-right: 1px solid #aaa;
	box-sizing: border-box;
	padding-right: 0;
}
.mailBtn li:nth-of-type(2) a,
.mailBtn.mailBtn2 li:nth-of-type(1) a,
.mailBtn.mailBtn2 li:nth-of-type(3) a{
	display: block;
	height: 40px;
	padding: 5px 0 5px 10px;
	box-sizing: border-box;
	position: relative;
	font-size: 14px;
	color: #000;
	vertical-align: top;
}

.mailBtn.mailBtn2 li:nth-of-type(2) a {border-right: 1px solid #aaa;}

.mailBtn.mailBtn2 li:nth-of-type(2) a,
.mailBtn.mailBtn2 li:nth-of-type(1) a,
.mailBtn.mailBtn2 li:nth-of-type(3) a{
	padding: 5px 10px 5px 10px;
}

.mailBtn li:nth-of-type(2) a span,
.mailBtn.mailBtn2 li:nth-of-type(1) a span,
.mailBtn.mailBtn2 li:nth-of-type(3) a span {
display: inline-block;
padding-top: 4px;
box-sizing: border-box;
}


/* copyright
----------------------------------------------- */
.copyright {
	font-size: 10px;
	text-align: center;
	padding: 10px 0;
	position: relative;
	box-sizing: border-box;
	font-family: 'Ubuntu', sans-serif;
	color: #000;
}

/* pageTop
----------------------------------------------- */
#pageTop {
	position: fixed;
	bottom: 50px;
	right: 5px;
	color: #FFF;
	width: 40px;
	height: 40px;
	text-align: center;
	font-size: 10px;
	z-index: 999999999;
}
#pageTop a{
	color: #000;
	position: relative;
	width: 40px;
	height: 40px;
	display: block;
	box-sizing: border-box;
	font-family: 'Lora', serif;
	background-color: rgba(255,255,255,0.7);
	border-radius: 50%;
	padding-top: 30px;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
}
#pageTop a:after {
	position: absolute;
	background-image: url(images/pagetop.png);
	background-repeat: no-repeat;
	background-size: 23.1px 11.9px;
	width: 23.1px;
	height: 11.9px;
	top: 13px;
	left: 0;
	right: 0;
	margin: 0 auto;
	content: "";
	transition: top .3s;
}

/* **********************************************************************************************
[5]Container
************************************************************************************************ */
#container {
	width: 100%;
	box-sizing: border-box;
	padding: 0;
	position: relative;
	z-index:99999999;
	margin-top: 1px;
	top: 0px;
}

#container section{position: relative;}




/* Ttl
----------------------------------------------- */

.mainTtlM {
	position: relative;
	font-size: 18px;
	color: #000;
	font-weight: 300;
	text-align: center;
	line-height: 1.0;
	margin-bottom: 0px;
	display: inline-block;
	box-sizing: border-box;
	font-family: 'Noto Serif JP', serif;
	float: left;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	width: 24px;
	margin-right: 30px;
}

.mainTtlM2 {
	position: relative;
	font-size: 20px;
	color: #000;
	font-weight: 300;
	text-align: center;
	line-height: 1.3;
	margin-bottom: 0px;
	display: inline-block;
	box-sizing: border-box;
	font-family: 'Noto Serif JP', serif;
	float: left;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	width: 50px;
	margin-right: 30px;
	padding-top: 40px;
	background-repeat: no-repeat;
	background-size: 30px 30px;
	background-position: right top;
}


.mainTtlM2 span{
	font-size: 10px;
	font-family: 'Lora', serif;
	font-weight: 300;
	text-align: right;
	line-height: 1.0;
	display: block;
	box-sizing: border-box;
	color: #a0a0a0;
}


.mainTtlS {
	font-size: 20px;
	font-family: 'Lora', serif;
	text-align: center;
	margin-bottom: 10px;
}

/* Btn
----------------------------------------------- */



/* **********************************************************************************************
[6]topContainer
************************************************************************************************ */
.top001 {margin-top:1px;}


.newsBox {float: left; width: calc(100% - 54px);}

.newsBox li {padding: 0 0 20px; box-sizing: border-box;}
.newsBox li dt {font-size: 12px; /* float: left; width: 100px; */ font-family: 'Ubuntu', sans-serif;}
.newsBox li dd {/* float: left; width: calc(100% - 100px); */ font-size: 13px; }
.newsBox li dd a{color: #000; display: block; position: relative;}

.newsBox.newsBox2 {float: none; width: 100%; border-top: 1px solid #eee;}
.newsBox.newsBox2 li {padding: 20px 10px 20px; box-sizing: border-box; border-bottom: 1px solid #eee;}
.subTtl3 {font-size: 20px;}
.newsdaySub {color: #aaa; font-size: 12px;}
.newsDetail {padding: 20px 10px; box-sizing: border-box;}

.pager {
	text-align: center;
	margin-top: 30px;
}

.pager1 {
	text-align: center;
	margin: 30px auto 0;
	/* max-width: 1080px; */
	border-top: 1px dashed #ccc;
	padding-top:  20px;
}
.pager1 span,
.pager span,
.pager a{
	background-color: #000;
	color: #fff;
	cursor: pointer;
	padding: 5px 8px;
	font-size: 13px;
	letter-spacing: 0.5px;
	transition: background-color .3s;
}

.prev{ float: left; }
.next{ float: right; }
.pager span:hover,.pager1 span:hover,.pager a:hover{
	background-color: #aaa;
	transition: background-color .3s;
}


.newsBtn {
	clear: both;
	/* position: absolute;
	bottom: 20px;
	right: 0; */
	width: 180px;
	/* margin-left: 22px; */
	text-align:center;
	margin: 0 auto;
	float: right;
}

.newsBtn a{
	border: 1px solid #000;
	display: block;
	padding: 5px 23px 5px 10px;
	box-sizing: border-box;
	color: #000;
	font-size: 13px;
	font-family: 'Noto Serif JP', serif;
	text-align: center;
	position: relative;
}
.newsBtn a:after{
	position: absolute;
	top:0;
	bottom:0;
	right: 10px;
	background-image: url(images/icon-yajirushi.png);
	width: 17px;
	height: 15px;
	content:"";
	margin: auto 0;
}

.top003 .pickup {margin: 40px 0 40px; box-sizing: border-box;}

.pickupBg{
position: absolute;
top:0;
left: 0;
width: 100%;
height: auto;
display: none;
}

.pickupBg span{
display: block;
position: relative;
width: 100%;
height: 624px;
overflow: hidden;
}

.pickup figure {
	/* width: 48%;
	height: 624px; */
	width: 100%;
	padding-top:65.6%;
	position: relative;
	overflow: hidden;
	/* float: left; */
}

/* .top003 .pickup figure {
	float: right;
} */

.pickupBg {
transition: background-image 4.0s ease 5s;
-webkit-transition: background-image 3.0s ease 3s;
-moz-transition: background-image 3.0s ease 3s;
-ms-transition: background-image 3.0s ease 3s;
-o-transition: background-image 3.0s ease 3s;

opacity:0;
transition: opacity .8s;
}
a:hover .pickupBg {
opacity:1.0;
transition: opacity .8s;
}

.pickupBox {
/* float: right; */
height: 313px;
/* width: 52%;
padding: 164.5px 12.5% 164.5px 5%; */
padding: 30px 10px;
box-sizing: border-box;
background-repeat: no-repeat;
background-size: 625px 369px;
background-position: right center;
position: relative;
}

.top003 .pickupBox {
/* float: left;
padding: 164.5px 5% 164.5px 12.5%; */
padding: 30px 10px;
background-position: left center;
background-image: url(images/bg-top002-gara.png);
}

.top002 .pickupBox {background-image: url(images/bg-top001-gara.png);}
.top004 .pickupBox {background-image: url(images/bg-top003-gara.png);}

.top002 .mainTtlM2 {background-image: url(images/icon-top001.png);}
.top003 .mainTtlM2 {background-image: url(images/icon-top002.png);}
.top004 .mainTtlM2 {background-image: url(images/icon-top003.png);}

.pickupTxt {
	position: relative;
	height: 253px;
}
.pickupTxt div {padding: 40px 0 0; box-sizing: border-box; color: #000;}

.pickupBtn {
	position: absolute;
	bottom: 0;
	left: 50%;
	text-align: center;
	margin-left: -45px;
}

.pickupBtn span{
	display: inline-block;
	padding: 10px 23px 10px 36px;
	box-sizing: border-box;
	color: #000;
	font-size: 14px;
	font-family: 'Noto Serif JP', serif;
	text-align: center;
	border: 1px solid #000;
	width: 170px;
	position: relative;
	transition: color .3s, border .3s;
}
.pickupBtn span:after{
	position: absolute;
	top:0;
	bottom:0;
	left: 23px;
	background-image: url(images/icon-yajirushi.png);
	width: 17px;
	height: 15px;
	content:"";
	margin: auto 0;
	transition: background-image .3s;
}

.top005 ul li {/* float: left; width: 33.333%; */ position: relative;}

.top005 ul li figure {
	width: 100%;
	position: relative;
	overflow: hidden;
	padding-top: 71.875%;
}

.blackbg{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-color:rgba(0,0,0,0.3);
}


.top005 ul li img{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
    -moz-transition: -moz-transform 0.3s linear;
    -webkit-transition: -webkit-transform 0.3s linear;
    -o-transition: -o-transform 0.3s linear;
    -ms-transition: -ms-transform 0.3s linear;
    transition: transform 0.3s linear;	
}

.bnrttl {
	position: absolute;
	top:50%;
	left:50%;
	width: 38px;
	margin-left: -19px;
}


.top005 ul li:nth-of-type(1) .bnrttl{
height: 120px;
margin-top: -60px;
}

.top005 ul li:nth-of-type(2) .bnrttl{
height: 147px;
margin-top: -73.5px;
}

.top005 ul li:nth-of-type(3) .bnrttl{
height: 87px;
margin-top: -43.5px;
}


.top005 ul h3{
	position: relative;
	font-size: 20px;
	color: #FFF;
	font-weight: 300;
	text-align: center;
	line-height: 1.3;
	margin-bottom: 0px;
	display: inline-block;
	box-sizing: border-box;
	font-family: 'Noto Serif JP', serif;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	width: 38px;
}


.top005 ul h3 span{
	font-size: 10px;
	font-family: 'Lora', serif;
	font-weight: 300;
	text-align: right;
	line-height: 1.0;
	display: block;
	box-sizing: border-box;
	color: #FFF;
}

.top006 {
background-image: url(images/bg-contact.jpg);
background-repeat: repeat;
}

.contact {text-align: center;}
.contactBox {
	/* display: inline-block;
	padding-right: 30px;
	border-right: 1px solid #666; */
	border-bottom: 1px solid #666;
	box-sizing: border-box;
	padding-bottom: 20px;
	width: 100%;

}
.snsBox {
	display: inline-block;
	/* padding-left: 30px; */
	padding-top: 20px;
	box-sizing: border-box;
}

.contactBox li,
.snsBox li {/* display: inline-block; */ vertical-align: middle; padding: 10px 0; box-sizing: border-box;}

.contactBox li:nth-of-type(1) {/* border-right: 1px solid #ccc; */ border-bottom: 1px solid #ccc;}
.contactBox li:nth-of-type(2) {font-family: 'Noto Serif JP', serif; font-size: 20px;}

.contactTel {
font-family: 'Lora', serif;
font-size: 35px;
line-height: 1.1;
}

.contactTel.contactFax {
font-family: 'Lora', serif;
font-size: 25px;
line-height: 1.1;
}


.ctelText {
display: inline-block;
font-size: 14px;
}

.contactTime {
font-family: 'Noto Serif JP', serif;
font-size: 12px;
}

.timeText {
display: inline-block;
font-size: 10px;
}

.contactBox a,
.snsBox a {display: block; color: #000;}
.contactBox .contactTel a{
display: inline-block;
}
.contactBox ul,
.snsBox ul {margin-top: 0px;}

.snsBox ul li {font-size: 12px;font-family: 'Lora', serif;}

.contT {font-size: 12px;}

/* **********************************************************************************************
[7]subContainer
************************************************************************************************ */

/* common
---------------------------------------------- */

.mainSubTtl {
	padding: 60px 10px 0px;
	box-sizing: border-box;
	text-align: center;
	font-size: 25px;
	line-height: 1.2;
	font-family: 'Noto Serif JP', serif;
}

.mainSubTtl span{
	display: block;
	font-size: 12px;
	font-family: 'Lora', serif;
}

.bread {padding: 5px 10px; box-sizing: border-box; font-size: 10px; position: relative; top: 40px;}
.bread a{color: #000;}

.contactTelFax {text-align: center;}
.contactTelFax a {color: #000;}
.subTtlS,
.subTtlS2 {
	font-size: 18px;
	font-family: 'Lora', serif;
	text-align: center;
	margin-bottom: 10px;
}
.subTtlS2 {
font-family: 'Noto Serif JP', serif;
}
.subTtlS span,
.subTtlS2 span {
	display: inlin-block;
	position: relative;
}

.subTtlS2 span img {width: 20px; height: 20px; vertical-align: middle; margin-right: 2px;}
.subTtlS2 .spimgsize {width: 30px; height: 30px; vertical-align: middle; margin-right: 2px;}
.subTtlS span:before {
	position: absolute;
	content:"";
	top:0;
	bottom:0;
	left: -40px;
	background-color: #000;
	height: 1px;
	width: 30px;
	margin: auto 0;
}

.subTtlS span:after {
	position: absolute;
	content:"";
	top:0;
	bottom:0;
	right: -40px;
	background-color: #000;
	height: 1px;
	width: 30px;
	margin: auto 0;
}

.bottomB {border-bottom: 1px solid #eee; padding-bottom: 40px;}

.companyBox {border-top: 1px solid #eee; margin-bottom: 40px;}
.companyBox li {border-bottom: 1px solid #eee; padding: 20px; box-sizing: border-box;}
.companyBox li dt {/* float: left; width: 200px; padding-right: 20px; */ box-sizing: border-box;}
.companyBox li dd {/* float: left; width: calc(100% - 240px); border-left: 1px solid #eee; padding-left: 20px; */ box-sizing: borde-box;}

.companyBox dt span {
	font-size: 10px;
	background-color: #F00;
	color: #FFF;
	display: inline-block;
	float: right;
	padding: 0 3px;
	margin-top: 5px;
}

.btn_area{ text-align:  center; }
.btn_area {margin: 30px auto;}

.btn_area a,
.btn_area input[type=submit] {
	font-size: 15px;
	font-weight: 500;
	display: inline-block;
	box-sizing: border-box;
	padding: 13px 20px 10px;
	cursor: pointer;
	color: #000;
	position: relative;
	box-shadow: none;
	background-color: #eee;
	width: 300px;
	text-align: center;
	border-radius: 5px;
	border: none;
	/* font-family: 'Ubuntu', sans-serif; */
}

.btn_area a:hover,
.btn_area input[type=submit]:hover {background-color: #ccc;}

.btn_area li{ display: inline-block; }

.contacttxt {text-align: center; margin-bottom: 20px;}
.subBgColor {
	background-image: url(images/bg-contact.jpg);
	background-repeat: repeat;
}
.privacyBox {margin-top: 20px;}
.privacyBox li{ padding: 10px 0; box-sizing: border-box; }
.privacyBox li dt {float: left; width: 20px;}
.privacyBox li dd {float: left; width: calc(100% - 20px); font-size: 12px;}

.ggmap {
position: relative;
padding-top: 50%;
height: 0;
overflow: hidden;
margin-bottom: 20px;
}
 
.ggmap iframe,
.ggmap object,
.ggmap embed {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}

.access dt {
	clear:both;
	background-color: #eee;
	/* float: left;
	width: 150px; */
	padding: 5px;
	box-sizing: border-box;
	text-align: center;
	/* margin-bottom: 5px; */
}

.access dd {
	/* float: left;
	width: calc(100% - 150px); */
	padding: 5px;
	box-sizing: border-box;
	margin-bottom: 5px;
}

.companyImg img {height: 100px; border-radius: 15px; margin: 0 5px;}


.birthedayTxt {
	box-sizing: border-box;
	position: relative;
}

.birthedayTxt1{
	/* float: left;
	width: 400px; */
	position: relative;
}

.birthedayImg1 {
	/* float: right;
	width: calc(100% - 400px); */
	padding-right: 10px;
	box-sizing: border-box;
	margin-top: 20px;
}

.birthedayImg1 figure {
	position: relative;
	overflow: hidden;
	box-sizing: border-box;
}

.birthdayBg {
	position: absolute;
	top: 80px;
	left: 0;
}
.birthdayBg2 {
	position: absolute;
	top: 80px;
	right: 0;
}
.birthdaysubtxt {
	width: 100%;
	/* height: 522px;
	position: absolute;
	top: 50%;
	margin-top: -261px;
	padding-right: 50px; */
	padding-right: 10px;
	box-sizing: border-box;
}

.mainTtlM3 {
	position: relative;
	font-size: 18px;
	color: #000;
	font-weight: 300;
	text-align: left;
	line-height: 1.3;
	display: block;
	box-sizing: border-box;
	font-family: 'Noto Serif JP', serif;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	width: 50px;
	padding-top: 32px;
	background-repeat: no-repeat;
	background-size: 30px 30px;
	background-image: url(images/icon-top003.png);
	background-position: right top;
	margin: 0 auto 30px;
}

.mainTtlM3 span {
	display: inline-block;
	padding-top: 14px;
}

.mainTtlM3 span.minitext {padding-top: 0; font-size: 15px;}

.imgM {width: calc(100% - 4px); padding-top: 60%; margin-left: 4px; margin-bottom: 4px;}
.imgL {float: left; width: calc(25% - 4px); padding-top: 30%; margin-left: 4px;}
.imgL.imgL2 {float: left; width: calc(50% - 4px); padding-top: 30%; margin-left: 4px;}

.abtoumainImg {
	position: relative;
	width: 100%;
	overflow: hidden;
	padding-top: 33%;
	margin-top: 30px;
}
#sliderbox2 {margin-top: 30px;}
.aboutTxt {/* padding-right: 12.5%; */ width: 100%;}

.aboutTxt1 {
	/* float: right;
	width: 70%; */
	width: 300px;
	margin: 0 auto;
}

.aboutImg1 {
	/* float: left;
	width: 30%; */
	position: relative;
	/* max-width: 500px; */
	clear: both;
	width: 280px;
	height: 280px;
	margin: 0 auto;
}
.aboutsubtxt {/* width: 550px; */ margin: 0 auto;}
.aboutsubtxt .mainTtlM3 {
	background-image: url(images/icon-top001.png);
	float: right;
	margin-right: 10px;
	height: 470px;
}
.aboutsubtxt p {
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	float: right;
	margin-right: 20px;
	font-size: 14px;
	font-family: 'Noto Serif JP', serif;
	padding-top: 50px;
	line-height: 1.4;
	height: 470px;
}

.aboutsubtxt p span{display: inline-block;}

.imgAbout1 {width:200px; position: relative; }
.imgAbout2 {width: 150px; position: absolute; bottom: 0; right: 0; z-index: 9999999;}
.imgAbout1 img {display: block; z-index: 99999;}
/* .imgAbout1:before {
	position: absolute;
	top: 20%;
	left: 100%;
	background-image: url(images/bg-top001-gara1.png);
	background-repeat: no-repeat;
	background-size: contain;
	background-position: left top;
	content:"";
	width: 625px;
	height: 369px;
	z-index: 999;
}*/

.submaintext {text-align: left; font-size: 16px; font-family: 'Noto Serif JP', serif; padding: 20px 10px 0; box-sizing: border-box;}
.submaintext span{ font-size: 12px; font-family: 'Noto Sans JP', sans-serif;}

.dorayakiBox li{
	float: left;
	padding: 2px;
	box-sizing: border-box;
}
.dorayakiBox.col5 li,
.item.col5 li{
	width: 20%;
}
.dorayakiBox.col4 li,
.item.col4 li{
	/* width: 25%; */
	width: 50%;
}
.dorayakiBox.col3 li,
.item.col3 li{
	width: 33.333%;
}

.item.col3 li{
	/* width: 33.333%; */
	width: 50%;
}
.dorayakiBox.col2 li,
.item.col2 li{
	width: 50%;
}

.dorayakiBox.col2 li:nth-of-type(2n+1),
.item.col2 li:nth-of-type(2n+1),
.dorayakiBox.col3 li:nth-of-type(3n+1),
.item.col3 li:nth-of-type(2n+1),
.dorayakiBox.col4 li:nth-of-type(2n+1),
.item.col4 li:nth-of-type(2n+1),
.dorayakiBox.col5 li:nth-of-type(5n+1),
.item.col5 li:nth-of-type(5n+1){
	clear: both;
}



.dorayakiBox li figure{
position: relative;
overflow: hidden;
width: 100%;
padding-top: 60%;

}

.btn {text-align: center; margin-top: 30px;}

.btn a{
	display: inline-block;
	padding: 10px 23px 10px 36px;
	box-sizing: border-box;
	color: #000;
	font-size: 16px;
	font-family: 'Noto Serif JP', serif;
	text-align: center;
	border: 1px solid #000;
	width: 280px;
	transition: color .3s, border .3s;
	position: relative;
}
.btn a:after{
	position: absolute;
	top:0;
	bottom:0;
	left: 23px;
	background-image: url(images/icon-yajirushi.png);
	width: 17px;
	height: 15px;
	content:"";
	margin: auto 0;
	transition: left .3s;
}

.btn a:hover:after{
	left: 30px;
	transition: left .3s;
}

.item li{
	float: left;
	padding: 20px 5px;
	box-sizing: border-box;
}

.item li figure{
	position: relative;
	width: 100%;
	padding-top: 100%;
	overflow: hidden;
	margin-bottom: 5px;
}
.item li dl {margin-bottom: 15px;}
.item li dt{
	font-size: 15px;
}

.item li dd{
	font-size: 13px;
}

.item li dd span{
	font-size: 12px;
}

.item li p{
	font-size: 12px;
}

.prolist {text-align: center; margin-top: 40px;}
.prolist li {display: inline-block; margin: 0 0.2px;}
.prolist li a {
	color: #000;
	display: block;
	padding: 10px 5px 10px 15px;
	box-sizing: border-box;
	font-size: 14px;
	border: 1px solid #000;
	position: relative;
}
.prolist li a:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 5px;
    width: 4px;
    height: 4px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
    margin: auto;
    content: "";
    vertical-align: middle;
}

.subTtl {
	text-align: center;
	font-size: 30px;
	font-family: 'Noto Serif JP', serif;
}

.subproductstext {text-align: left; margin: 5px 0 30px; font-size: 14px;}

.subproductsimg {margin-top: 20px; width: 100%;}
.subproductsimg figure{
position: relative;
overflow: hidden;
width: 100%;
padding-top: 35.72%;
}

.tableList {
	border-top: 1px solid #eee;
	border-left: 1px solid #eee;
	width: 100%;
	margin-bottom: 30px;
}

.tableList th,
.tableList td{
	border-bottom: 1px solid #eee;
	border-right: 1px solid #eee;
	padding: 5px 2px;
	box-sizing: border-box;
	text-align: center;
	font-size: 13px;
}

.tableList th {background-color: #fafafa; font-weight: 700; }


/* **********************************************************************************************
[7]shop
************************************************************************************************ */

.itemBox li{
	float: left;
	width: 50%;
	padding: 0 5px 20px;
	box-sizing: border-box;
}

.itemBox li:nth-of-type(5) {display: none;}
.itemBox3 {padding: 0 10px; box-sizing: border-box;}
.itemBox3 li {padding: 0 10px 20px; box-sizing: border-box;}
.itemBox li figure,
.itemBox3 li figure{
position: relative;
width: 100%;
padding-top: 100%;
overflow: hidden;

}
.itemBox3 li figure {
padding-top: 75%;
}

.itemBox dt,
.itemBox dd { color: #000; font-size: 13px; line-hegiht: 1.3;}
.itemBox dd span{ font-size: 11px;}
.itemBox3 p{ text-align: center; margin-top: 5px; font-size: 15px; color: #000; font-family: 'Noto Serif JP', serif;}
.shop002 .swiper-wrapper li figure {
	position: relative;
	width: 100%;
	padding-top: 100%;
	overflow: hidden;
}

.shop002 .swiper-wrapper li figure span{
	position: absolute;
	bottom:0;
	left: 0;
	color: #fff;
	background-color: rgba(0,0,0,0.4);
	width: 100%;
	font-size: 10px;
	padding: 5px;
	box-sizing: border-box;
}

.privacybox {margin: 20px auto;}
.privacybox li {margin: 10px 0;}
.privacybox li dt {font-weight: 700;}
.privacybox li dd {padding: 5px 13px; box-sizing: border-box; }
.privacybox li dd a {color: #000; text-decoration: underline;}

.table col {display: none;}

.table {
	border-top: 1px solid #eee;
	border-left: 1px solid #eee;
	width: 100%;
	margin: 5px 0;
}
.table td,
.table th {
	border-bottom: 1px solid #eee;
	border-right: 1px solid #eee;
	padding: 15px;
	box-sizing: border-box;
}
.table th {background-color: #fafafa; font-weight: bold;}
.table td a {color: #000; text-decoration: underline;}
.table #quantity_level {/* text-align: center; */}
.table #quantity_level li{
	border-bottom: none;
	padding: 2px;
	display: inline-block;
	box-sizing: border-box;
}
.table td .zipimg a,
.table td a.tablebtn{text-decoration:  none; }

.tablebtn,
.table td .zipimg a{
	border: 1px solid #aaa;
	color: #aaa;
	display: inline-block;
	line-height: 1.0;
	padding: 5px;
	margin: 2px;
	font-size: 12px;
	border-radius: 5px;
	text-decoration:  none;
}

.tablebtn input[type=submit] {
	border: none;
	color: #aaa;
	display: inline-block;
	line-height: 1.0;
	padding: 0 5px;
	margin: 2px ;
	font-size: 12px;
	border-radius: 5px;
	text-decoration:  none;
	background-color:  inherit;
}

.tablebtn:hover,
.table td .zipimg a:hover,
.tablebtn input[type=submit]:hover { background-color: #aaa; color: #FFF; }

.btn_area{ text-align:  center; }
.btn_area {margin: 30px auto;}

.btn_area a,
.btn_area input[type=submit] {
	font-size: 15px;
	font-weight: 500;
	display: inline-block;
	box-sizing: border-box;
	padding: 13px 20px 10px;
	cursor: pointer;
	color: #000;
	position: relative;
	box-shadow: none;
	background-color: #eee;
	/* width: 300px; */
	text-align: center;
	border-radius: 5px;
	border: none;
	/* font-family: 'Ubuntu', sans-serif; */
}

.btn_area a:hover,
.btn_area input[type=submit]:hover {background-color: #ccc;}



.btn_area li{ display: inline-block; margin: 2px 0; }
.attention {color: #F00;}

.mini {font-size: 11px;}
.mini a{color: #000; text-decoration: underline;}

.guideBox .subTtlO {margin-top: 0;}
.guideBox.guideBox2 { margin-top:  60px; }
.guideTtl { margin-top: 20px; margin-bottom: 5px; font-weight: 700; font-size: 15px;}
.guideTtl span{
	font-size: 14px;
	position: relative;
	padding: 0 0px;
	font-weight:  bold;
}

.contactSubBox {
	margin-bottom: 40px;
}

.contactSubBox span{
	font-size: 30px;
	font-weight: 700;
}
.contactSubBox a{
	color: #000;
}

.message_area {border: 4px solid #eee; background-color: #FFF; padding: 20px 20px 0; box-sizing: border-box;}
.message2_area {margin-bottom: 20px;}
.message2_area,
.message3_area {border: 4px solid #eee; background-color: #FFF; padding: 20px; box-sizing: border-box;}

/* .pageLink {text-align: center; width: 100%; padding: 10px 5px; box-sizing: border-box; margin: 0 auto 20px; border: 1px solid #000;}
.pageLink li {display: inline-block; margin: 0 10px; }

.pageLink li a{display: block; font-size: 14px; color: #000; position: relative; padding-left: 10px;}
.pageLink li a::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}
.pageLink li a::after{
    left: 0px;
    box-sizing: border-box;
    width: 5px;
    height: 5px;
    border: 5px solid transparent;
    border-left: 5px solid #000;
}
.pageLink li a:hover {color: #aaa;} */




.nav-wrap {
  position: relative;
}
.scroll-nav {
  width: 100%;
  background: #fff; /* メニューの背景色 */
  overflow-x: auto;
  border: 1px solid #aaa;
  -webkit-overflow-scrolling: touch; /* 慣性スクロール */
}
.scroll-nav ul {
  max-width: 1060px; /* メニューの最大幅 */
  min-width: 770px; /* メニューの最小幅 */
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  list-style: none;
  padding-right: 15px; /* 右側の固定分余白を空ける */
}
.scroll-nav ul li {
  float: left;
  width: 154px; /* メニューの個別の幅 */
  text-align: center;
}
.scroll-nav ul li:hover {
  background: #fff; /* マウスホバー時の背景色 */
}
.scroll-nav ul li a {
  display: inline-block;
  color: #000; /* メニューの文字色 */
  text-decoration: none;
}
.next-btn { /* 右側に固定する部分 */
  position: absolute;
  top: 1px;
  right: -1px;
  width: 25px; /* 固定部分の幅 */
  height: 40px; /* メニューの高さに合わせる */
  line-height: 40px;
  background: #fff;
  color: #555;
  text-align: center;
  border-left: 1px solid #aaa;
}
@media only screen and (min-width: 771px) { /* PCサイズでの指定 */
.scroll-nav ul {
  padding: 0;
}
.scroll-nav ul li {
  width: 20%; /* メニューの個別の幅 */
}
.next-btn {
  display: none; /* 右側の固定部分を非表示 */
}
}

.pageLink li a{display: block; font-size: 14px; color: #000; position: relative; padding-left: 10px;}
.pageLink li a::after{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}
.pageLink li a::after{
    left: 0px;
    box-sizing: border-box;
    width: 5px;
    height: 5px;
    border: 5px solid transparent;
    border-left: 5px solid #000;
}
.pageLink li a:hover {color: #aaa;}

.mypageBox {margin-top: 40px;}

.pagenumber_area {margin-top: 40px; font-size: 12px; text-align: center;}
.pagenumber_area a {color: #000; background-color: #eee; padding: 2px 10px; box-sizing: border-box; display: inline-block; margin: 0 2px;}
.pagenumber_area strong {color: #000; border: 1px solid #eee; padding: 2px 10px; box-sizing: border-box; display: inline-block; margin: 0 2px;}
.pagenumber_area .page_next {
text-align: right;
float: right;
font-size: 12px;
}

.pagenumber_area .page_prev {
text-align: left;
float: left;
font-size: 12px;
}

/* detail */
/* .shopdetailBox { margin-bottom: 60px;} */
.detailphotobloc { /* width: 50%; float: left; margin-bottom: 30px; */ }
div.detailphotobloc .bx-wrapper,
div.detailphotobloc2 .bx-wrapper {
	position: relative;
	margin: 0 auto 10px;
	padding: 0;
	*zoom: 1;
}

div.detailphotobloc .bx-wrapper li,
div.detailphotobloc2 .bx-wrapper li,
div.detailphotobloc5 figure{
	position: relative;
	width: 100%;
	padding-top: 100%;
	overflow: hidden;
}

div.detailphotobloc .bx-wrapper li img,
div.detailphotobloc2 .bx-wrapper li img,
div.detailphotobloc5 figure img{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	object-fit: cover;
	width: auto;
	height: 100%;
  object-position: center;
  font-family: 'object-fit: cover; object-position: center;'
}

div.detailphotobloc .bx-wrapper li img.h,
div.detailphotobloc2 .bx-wrapper li img.h{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	object-fit: cover;
	width: 100%;
	height: auto;
  object-position: center;
  font-family: 'object-fit: cover; object-position: center;'
}

div.detailphotobloc .bx-wrapper li img.hv,
div.detailphotobloc2 .bx-wrapper li img.hv{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	object-fit: cover;
	width: 100%;
	height: 100%;
  object-position: center;
  font-family: 'object-fit: cover; object-position: center;'
}


div.detailphotobloc ul.thumbnail li,
div.detailphotobloc2 ul.thumbnail li {
    float: left;
	display: inline;
    width: 20%;
	padding: 20% 0 0;
	position: relative;
	overflow: hidden;
	 box-sizing: border-box;
}

div.detailphotobloc ul.thumbnail li img,
div.detailphotobloc2 ul.thumbnail li img{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	object-fit: cover;
	width: 95%;
	height: 95%;
  object-position: center;
  font-family: 'object-fit: cover; object-position: center;'
}

div.detailphotobloc ul.thumbnail li a.active,
div.detailphotobloc2 ul.thumbnail li a.active{
opacity:0.6; filter: alpha(opacity=60); -ms-filter: "alpha( opacity=60 )";
}

div.detailphotobloc ul.thumbnail li:nth-of-type(4n),
div.detailphotobloc2 ul.thumbnail li:nth-of-type(4n)  {
	margin-right: 0; 
}
.detailBox{ margin-top: 30px; /* width: 50%; padding-left: 30px; */ box-sizing:  border-box; /* float: right; margin-bottom: 30px; */ }
.detailBox .cartBox{ background-color: #fafafa; padding: 20px; box-sizing: border-box; font-size: 14px;  margin-top: 20px; position: relative;}
.detailBox h3 { font-size: 20px; margin: 0px auto 10px; font-weight: 600; border-bottom: 1px solid #000; padding-bottom: 10px; line-height: 1.0; color: #000;}
.detailBox h3 span {font-size: 12px; font-weight: 400; color: #000; display: inline-block;}
.price { font-size: 16px; margin-bottom: 2px; }
.price .red{ font-size: 12px; color: #F00; }
.priceBox {margin: 10px 0;}
.detailBox .btncart { /* float: left; width: 60%; */ padding: 1px 0px; box-sizing: border-box; text-align: center; }
.detailBox .btncart a{
	display: block;
	padding: 15px;
	width: 100%;
	background-color: #000;
	color: #FFF;
	text-align: center;
	font-weight: 200;
	box-sizing: border-box;
}
.favorit { /* float: left; width: 40%; */ padding: 1px 0; box-sizing: border-box; }
.favorit a span.iconTxt { border: 1px solid #000; display: block; padding: 15px 15px; font-size: 13px; color: #000;
background-image: url(images/icon-favorit_off.png);
background-repeat: no-repeat;
background-position: 10px center;
text-align: center;
}

.listTxt { font-size: 15px; margin: 30px auto; }

.listTxt span{
	font-size: 18px;
	display: block;
	font-weight: bold;
	margin-bottom: 10px;
}

.detailinfo table { border-top: 1px solid #eee; margin-bottom: 20px;}
.detailinfo table th,
.detailinfo table td {
	border-bottom: 1px solid #eee;
	padding: 10px;
	box-sizing: border-box;
	vertical-align: top;
	font-size: 14px;
}
.detailinfo table th { width: 25%; background-color: #fafafa;}

.detailinfo table td { widows: 75%; }

.detailBox .cartBox p{ margin-bottom: 10px; }

.detailBox .cartBox ul{ margin-top: 0px;}
.detailBox .cartBox li { margin-bottom: 2px; color: #717171; }
.detailBox .cartBox li a{ color: #717171; font-size: 12px; }


.detailphotobloc .bx-wrapper .bx-controls-direction a,
.detailphotobloc2 .bx-wrapper .bx-controls-direction a {
	position: absolute;
	top: 50%;
	margin-top: -5.5px;
	outline: 0;
	width: 7px;
	height: 11px;
	border:none;
	border-radius: 0px;
	z-index: 9997;
	text-indent: 100%;
	overflow:  hidden;
	white-space: nowrap;
	background-repeat: no-repeat;
	background-size: 7px 11px;
	
}

.detailphotobloc .bx-wrapper .bx-prev,
.detailphotobloc2 .bx-wrapper .bx-prev {
	left: 10px;
	background-image: url(images/icon-prev.png);
	background-position: right center;
	transition: background-position .2s;
}

.detailphotobloc .bx-wrapper .bx-next,
.detailphotobloc2 .bx-wrapper .bx-next {
	right: 10px;
	background-image: url(images/icon-next.png);
	background-position: left center;
	transition: background-position .2s;
}

.classlist li { float: left;}
.classlist ul li:first-child { padding-top: 7px; }

.soldout { color: #F00; font-weight:  bold;}

.status span {font-size: 11px; display: inline-block; color: #aaa; border:1px solid #aaa; padding: 2px 5px; box-sizing: border-box;}



table { width: 100%; }
.table td,
.table th {
	display: block;	
}

   /* 隕句��縺苓｡後ｒ豸医☆ */
    table.sptable001 th,
    table.sptable002 th,
    table.sptable003 tr:nth-of-type(1) th,
    table.sptable004 tr:nth-of-type(1) th,
    table.sptable005 tr:nth-of-type(1) th,
    table.sptable006 tr:nth-of-type(1) th,
	table.privederivary tr:nth-of-type(1) th {
        display: none;
    }
    
    
    table.sptable001,table.sptable002,table.sptable003,table.sptable004,table.sptable005,table.sptable006,table.privederivary { border: 1px solid #eee; }
 
    /* 繧ｻ繝ｫ繧偵ヶ繝ｭ繝��け縺ｨ縺励※陦ｨ遉ｺ */
    table.sptable001 td,
    table.sptable002 td,
    table.sptable003 td,
    table.sptable004 td,
    table.sptable005 td,
    table.sptable006 td,
	table.privederivary td {
        display: block;
        text-align: left;
        padding: 2px 10px;
        border-bottom: none;
        border-right: none;
    }
    
    table.sptable003 tr:last-child th,
    table.sptable004 tr:nth-last-of-type(4) th,
    table.sptable004 tr:nth-last-of-type(3) th,
    table.sptable004 tr:nth-last-of-type(2) th,
    table.sptable004 tr:nth-last-of-type(1) th,
    table.sptable006 tr:nth-last-of-type(1) th,
    table.sptable006 tr:nth-last-of-type(2) th,
    table.sptable006 tr:nth-last-of-type(3) th,
    table.sptable006 tr:nth-last-of-type(4) th {
        display: block;
        border-top: 1px solid #eee;
        border-right: none;
        text-align: center;
        background-color: #fafafa;
        padding: 5px 10px;
    }
    
    /* 譛�蛻昴��鬆��岼縺ｫ閭梧勹濶ｲ繧剃ｻ倥￠繧� */
    table.sptable001 td:nth-child(1),
    table.sptable002 td:nth-of-type(1),
    table.sptable003 td:nth-of-type(1),
    table.sptable004 tr td:nth-child(1),
    table.sptable005 td:nth-child(1),
    table.sptable006 td:nth-child(1),
	table.privederivary td:nth-child(1) {
		border-top: 1px solid #eee;
		border-right: none;
        padding: 5px 10px;
    }
	table.sptable003 td:nth-of-type(1) {
		padding: 5px 10px 0;	
	}
    table.sptable005 td:nth-child(1) {
    padding: 10px;
    text-align: center;
    }
 
    /* セルに見出し代わりの文字を付加 */
    table.sptable001 td:nth-child(2):before {
        content: '注文番号：';
    }
 
    table.sptable002 td:nth-child(2) {
        padding: 10px;
        font-weight: bold;
    }
 
    table.sptable001 td:nth-child(3):before {
        content: 'お支払方法：';
    }
 
    table.sptable001 td:nth-child(4):before {
        content: '合計金額：';
    }
 
    table.sptable001 td:nth-child(5):before {
        content: 'ご注文状況：';
    }

    table.sptable003 tr td:nth-of-type(4):before {
        content: '単価：';
    }
    table.sptable003 tr td:nth-of-type(5):before {
        content: '数量：';
    }
    table.sptable003 tr td:nth-of-type(6):before {
        content: '小計：';
    }
    
    table.sptable004 tr td:nth-of-type(4):before {
        content: '単価：';
    }
    table.sptable004 tr td:nth-of-type(5):before {
        content: '数量：';
    }
    table.sptable004 tr td:nth-of-type(6):before {
        content: '小計：';
    }

    table.sptable006 tr td:nth-of-type(3):before {
        content: '単価：';
    }
    .sptable006 tr td:nth-of-type(4):before {
        content: '数量：';
    }
    table.sptable006 tr td:nth-of-type(5):before {
        content: '小計：';
    }
	table.privederivary tr td:nth-of-type(1):before {
        content: '北海道：';
    }
	table.privederivary tr td:nth-of-type(2):before {
        content: '東北：';
    }
	table.privederivary tr td:nth-of-type(3):before {
        content: '関東/信越：';
    }
	table.privederivary tr td:nth-of-type(4):before {
        content: '北陸/東海：';
    }
	table.privederivary tr td:nth-of-type(5):before {
        content: '近畿：';
    }
	table.privederivary tr td:nth-of-type(6):before {
        content: '中国：';
    }
	table.privederivary tr td:nth-of-type(7):before {
        content: '四国：';
    }
	table.privederivary tr td:nth-of-type(8):before {
        content: '九州：';
    }
	table.privederivary tr td:nth-of-type(9):before {
        content: '沖縄：';
    }

    table.sptable003 tr:last-child td:nth-of-type(1),
    table.sptable003 tr:last-child td,
    table.sptable004 tr:nth-last-of-type(4) td,
    table.sptable004 tr:nth-last-of-type(3) td,
    table.sptable004 tr:nth-last-of-type(2) td,
    table.sptable004 tr:nth-last-of-type(1) td,
    table.sptable006 tr:nth-last-of-type(1) td,
    table.sptable006 tr:nth-last-of-type(2) td,
    table.sptable006 tr:nth-last-of-type(3) td,
    table.sptable006 tr:nth-last-of-type(4) td {
        padding: 10px;
        text-align: right;
        background-color: none;
        border: none;
        display: block;
        content: '';
    }

table.sptable003 tr:nth-of-type(3),
table.sptable003 tr:nth-of-type(4) {

}


table.sptable003 tr:nth-of-type(4) th {
border-right: none;
border-bottom: none;
text-align: center;
        padding: 5px 10px;
		border-bottom: 1px solid #eee;	
}
table.sptable003 tr:nth-of-type(3) th{
border-right: none;
border-bottom: none;
text-align: center;
        padding: 5px 10px;	
}
table.sptable003 tr:nth-of-type(3) th:nth-of-type(1) {
		border-top: 1px solid #eee;	
}

table.sptable003 tr:nth-of-type(3) td,
table.sptable003 tr:nth-of-type(4) td {
text-align: right;	
}

		table.delivname th,
		table.delivname td {
			display: block;
		}

.tiikiSp tr:nth-of-type(1){
display:  none;
}

.telShop {border-top: 1px solid #aaa; padding-top: 60px; box-sizing: border-box;}

.pagenumber_area {text-align: right; padding: 0 10px 30px; box-sizing: border-box;}


/* .floatLImg {float: left; width: 40%; margin: 0 20px 20px 0;}
.floatRImg {float: right; width: 40%; margin: 0 0 20px 20px;}
.floatCImg {display: block; text-align: center; width: 80%; margin: 0 auto;} */

.floatLImg,
.floatRImg,
.floatCImg {display: block;}
.subDetailBox2 {margin: 0 auto 60px; width: 94%;}
.subDetailBox2 p:last-child { clear:both; display: block;}
.subDetailBox2 a {
display: block;
padding: 15px 10px;
box-sizing:border-box;
background-color: #000;
color: #fff;
text-align: center;
width: 70%;
margin: 10px auto;
font-size: 15px;
}

.subDetailBox2 a:hover {
background-color: #aaa;
}

.priceBox .price {font-size: 25px;}
.daihyo {display: block; margin-top: 40px; text-align: right;}


.shopsubfnav {
	text-align: center;
	margin-bottom: 30px;
}

.shopsubfnav li{
	display: inline-block;
	margin: 0 10px;
}

.shopsubfnav li a{
	color: #000;
	font-size: 12px;
	display: block;
}

/* **********************************************************************************************
[8]other
************************************************************************************************ */
/* common
----------------------------------------------- */
.pickup figure img,
.pickupBg span img,
.birthedayImg img,
.birthedayImg1 figure img,
.abtoumainImg img,
.dorayakiBox li figure img,
.item li figure img,
.subproductsimg figure img,
.itemBox li figure img,
.itemBox3 li figure img {
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	-ms-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	object-fit: cover;
	width: 100%;
	height: 100%;
}

/* form
---------------------------------------------- */
	input[type=text],textarea,input[type=password] {
			background-color: #fff;
			padding: 8px;
			width: 100%;
			-webkit-box-sizing: border-box;
			-moz-box-sizing: border-box;
			box-sizing: border-box;
			border: 1px solid #ddd;
			margin: 1px 0;
	}
	input.boxShort,input.box60 {width: 28%;}
	input.box120 {width: 38%;}
	input.box140 {width: 68%;}
	input[type=text].keyBox {
	width: calc(100% - 24px);
	border-top: none;
	border-left: none;
	border-right: none;
	font-size: 11px;
	color: #a0a0a0;
	font-family: 'Noto Sans JP', sans-serif;
	}
	input.boxMiddle,input.box380,input.box300 {width: 100%;}
	input.boxLong,input.box1000 {width: 100%;}
	.box95,textarea.box380 {width: 100%;}
	input[type=checkbox] {width: 25px; height: 25px; background-color: #fff; }
	/* input[type=radio] {width: 25px; height: 25px; background-color: #fff; } */
	.vertical-align input{
	vertical-align:middle;
	}
	select {
		-webkit-appearance:none;
		-moz-appearance:none;
			text-indent: .01px;
			text-overflow: "";
		appearance:none;
		width: auto;
		height: 40px;
		padding: 5px 20px 5px 5px;
		background-color: #fff;
		background-image: url(images/select.png);
		background-repeat: no-repeat;
		background-size: 7px 10px;
		background-position: right 5px center;
		cursor: pointer;
		border: 1px solid #ddd;
		margin: 0 5px 5px 0;
	}
	.detailshopping select { width: 150px; }
	.selectV select {width: 20%;}

.subHeader li select{
	background-image: url(images/icon-world.png);
	background-size: 13px 13px;
	background-position: right 2px center;
	height: 30px;
	border: none;
}

	
	@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
		select:not(:target) {
			padding-right:0;
			background-image: none;
		}
	}
	input[type="submit"],input[type=text],textarea,input[type=password]{
	-webkit-appearance: none;
	}
	
	.red {font-size: 1.0rem; color: #F00;}

	textarea.kiyaku_text {
	height: 1000px;
	width:  100%;
	overflow: auto;
	
	}

/* font 
--------------------------------------------- */
.f10 { font-size: 1.0rem; }
.f11 { font-size: 1.1rem; }
.f12 { font-size: 1.2rem; }
.f13 { font-size: 1.3rem; }
.f14 { font-size: 1.4rem; }
.f15 { font-size: 1.5rem; }
.f16 { font-size: 1.5rem; }
.f17 { font-size: 1.5rem; }
.f18 { font-size: 1.6rem; }
.f19 { font-size: 1.6rem; }
.f20 { font-size: 1.8rem; }
.f25 { font-size: 2.0rem; }
.f30 { font-size: 2.5rem; }
.f35 { font-size: 3.0rem; }
.f40 { font-size: 3.5rem; }
.f45 { font-size: 4.0rem; }
.f50 { font-size: 4.5rem; }
.f55 { font-size: 5.0rem; }
.f60 { font-size: 5.5rem; }
.f65 { font-size: 6.0rem; }
.f70 { font-size: 6.5rem; }

.txtC,.alignC { text-align: center; }
.txtR,.alignR { text-align: right; }
.txtL,.alignL { text-align: left; }

a.txtD { text-decoration: underline; color: #000; }

.pb80 { padding: 40px 0;}
.pb80t { padding: 40px 0 0;}
.pb60 { padding: 30px 0;}
.pb30 { padding: 30px 0;}
.mb30 { margin-bottom: 30px; }
.mb10 { margin-bottom: 10px; }
.mt10 { margin-top: 10px; }

.gryTxt { color: #a0a0a0; }
.borderB { border-bottom: 1px dashed #e5e5e5; }
.borderR { border-right: 1px dashed #e5e5e5; }
.borderL { border-left: 1px dashed #e5e5e5; }

.fontB { font-weight: bold; }
.notoserifjp {font-family: 'Noto Serif JP', serif;}
.lora {font-family: 'Lora', serif;}
.notosansjp {font-family: 'Noto Sans JP', sans-serif;}
.asap {font-family: 'Asap', sans-serif;}
.ubuntu {font-family: 'Ubuntu', sans-serif;}
.bgBrown  {
	background-image: url(images/bg-matrix.png);
	background-repeat: repeat;
	background-position: left top;
}


.box10 {
	width: 100%;
	/* max-width: 1580px; */
	margin: 0 auto;
	padding: 40px 10px;
	box-sizing: border-box;
	position: relative;
}

.box10N {
	width: 100%;
	/* max-width: 1580px; */
	margin: 40px auto 0;
	padding: 0px;
	box-sizing: border-box;
	position: relative;
}

.box10S {
	width: 100%;
	/* max-width: 1580px; */
	margin: 0 auto;
	padding: 40px 10px 0;
	box-sizing: border-box;
	position: relative;
}

.box10S2 {
	width: 100%;
	/* max-width: 1580px; */
	margin: 0 auto;
	padding: 40px 0 40px 10px;
	box-sizing: border-box;
	position: relative;
}

.posiR {position: relative;}
.spno { display: none; }
.pcno.pcno3{ display: none; }
.dis {display: none;}



@media all and (min-width: 480px) {
	br.pcno,
	br.spno2 { display: none;}
	br.pcno2,br.pcno.pcno2 { display: block;}
	br.pcno.pcno3 { display: block;}
	.txtC.txtLsp { text-align: center; }
	.txtC.txtSL { text-align: left; }
	
#sliderbox,
#sliderbox li figure {height: 100vh;}
.scroll {display: block;}
.pickupBox {height: 273px;}
.pickupTxt {height: 213px;}

.contactBox {
	display: inline-block;
	padding-right: 10px;
	border-right: 1px solid #666;
	border-bottom: none;
	box-sizing: border-box;
	padding-bottom: 0px;
	width: auto;
}
.snsBox {
	display: inline-block;
	padding-left: 10px;
	padding-top: 0px;
	box-sizing: border-box;
	vertical-align: top;
}
.snsBox ul {margin-top: 30px;}

.newsBox li dt {float: left; width: 80px;}
.newsBox li dd {float: left; width: calc(100% - 80px); }


.access dt {
	float: left;
	width: 150px;
	margin-bottom: 5px;
}

.access dd {
	float: left;
	width: calc(100% - 150px);
}
#sliderbox2 li figure{
	height: 60vh;
}

.itemBox3 li{float: left; width: 33.333%; padding: 0 5px;}

}

@media all and (min-width: 560px) {
.item.col3 li {width: 33.333%;}
.item.col3 li:nth-of-type(2n+1) {clear:none;}
.item.col3 li:nth-of-type(3n+1) {clear:both;}

}
@media all and (min-width: 600px) {
.aboutTxt {width: 580px; margin: 0 auto;}

.aboutTxt1 {
	float: right;
}

.aboutImg1 {
	clear: none;
	float: left;
	margin-top: 80px;
}
}

@media all and (min-width: 660px) {
.top005 ul li {float: left; width: 33.333%;}

.pickupBg{
	height: 273px;
	display: block;
}

.pickupBg span{
	display: block;
	position: relative;
	width: 100%;
	height: 273px;
	overflow: hidden;
}

.pickup figure {
	width: 48%;
	height: 273px;
	padding-top:0;
	position: relative;
	overflow: hidden;
	float: left;
}

.top003 .pickup figure {float: right;}
.pickupBox {
	float: right;
	width: 52%;
}
.top003 .pickupBox {float: left;}

.dorayakiBox.col4 li,
.item.col4 li{
	width: 25%;
}

.dorayakiBox.col4 li:nth-of-type(2n+1),
.item.col4 li:nth-of-type(2n+1) {
	clear: none;
}

.dorayakiBox.col4 li:nth-of-type(4n+1),
.item.col4 li:nth-of-type(4n+1) {
	clear: both;
}

.detailphotobloc {width: 50%; float: left; margin-bottom: 30px; }
.detailBox{ margin-top: 0px; width: 50%; padding-left: 30px; box-sizing:  border-box; float: right; margin-bottom: 30px; }

}

@media all and (min-width: 800px) {

.contactBox li,
.snsBox li {display: inline-block; vertical-align: middle; padding: 10px 5px; box-sizing: border-box;}
.contactBox li:nth-of-type(1) {border-right: 1px solid #ccc; border-bottom: none;}

.contactBox ul {margin-top: 30px;}
.snsBox ul {margin-top: 20px;}


}

@media only screen and (min-device-width: 768px) and (max-device-width: 1024px) and (orientation:portrait) {
#sliderbox,
#sliderbox li figure {height: 40vh;}
}

@-webkit-keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInDown {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, -10%, 0);
    transform: translate3d(0, -10%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@keyframes fadeInUp {
  from {
    opacity: 0;
    -webkit-transform: translate3d(0, 10%, 0);
    transform: translate3d(0, 10%, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}
@-webkit-keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInLeft {
  from {
    opacity: 0;
    -webkit-transform: translate3d(-10%, 0, 0);
    transform: translate3d(-10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@-webkit-keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}

@keyframes fadeInRight {
  from {
    opacity: 0;
    -webkit-transform: translate3d(10%, 0, 0);
    transform: translate3d(10%, 0, 0);
  }

  to {
    opacity: 1;
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
}