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

/* **********************************************************************************************
[1]common
************************************************************************************************ */
html{
	margin: 0;
	padding: 0;
}
body{
	line-height: 1.5;
	width: 100%;
	margin: 0 auto;
	padding: 0;
	font-size: 15px;
	font-family: 'Noto Sans JP', sans-serif;
	font-style: normal;
	font-variant: normal;
	font-weight: 400;
	color: #000;
	letter-spacing: 0.5px;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	min-width: 940px;
}
header {
	width: 100%;
	height: 120px;
	z-index: 99999999997;
	position: absolute;
	top: 0px;
	left: 0;
	/* background-color: #FFF; */
	box-sizing: border-box;
}


header.fixed {
	width: 100%;
	height: 70px;
	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: 70px;
	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-menu.png);
	background-repeat: no-repeat;
	background-position: center center;
	background-size: 248px 66px;
	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%;
	height: 100vh;
}

#sub #topContent {
	height: 70px;
}

#sliderbox {
	position: absolute;
	width: 100%;
	overflow: hidden;
	height: 100vh;
	padding: 0;
	top: 0px;
	box-sizing: border-box;
}
#sliderbox2 {margin-top: 60px;}
#sliderbox li.box,
#sliderbox2 li.box {
	position: relative;
	width: 100%;
	overflow: hidden;
}
#sliderbox li figure{
	position: relative;
	width: 100%;
	overflow: hidden;
	height: 100vh;
}

#sliderbox2 li.box figure{
	position: relative;
	width: 100%;
	overflow: hidden;
	padding-top: 35%;
}

#sliderbox li figure img,
#sliderbox2 li.box 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:200px;
	left: 12.5%;
	/* margin-top: -227px; */
	z-index: 999999999;
	width: 300px;
	height: 452px;
	text-align: left;
	font-family: 'Noto Serif JP', serif;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
.mainTxt p {
	font-size: 25px;
	font-weight: 300;
	letter-spacing: 1.5px;
	line-height: 1.8;
	
}
.mainTxt h2 {
	font-size: 40px;
	line-height: 1.2;
	font-weight: 300;
	padding-left: 30px;
}

.bx-wrapper .bx-prev {
	left: 20px;
	background-image: url(images/arrow-bigleft.png);
	background-position: 0 center;
	background-repeat: no-repeat;
	transition: left .2s;
}

.bx-wrapper .bx-next {
	right: 20px;
	background-image: url(images/arrow-bigright.png);
	background-position: 0 center;
	background-repeat: no-repeat;
	transition: right .2s;
}

.bx-wrapper .bx-prev:hover {
	left: 10px;
	transition: left .5s;
}

.bx-wrapper .bx-next:hover {
	right: 10px;
	transition: right .2s;
}


.scroll {
	position: absolute;
	bottom: 0;
	left: 80px;
	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;
}
.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;
}
.scroll a:hover:after{
	 bottom: 0px;
	 height: 55px;
	 transition:bottom .3s,height .3s;
}


/* **********************************************************************************************
[2]headerContainer
************************************************************************************************ */

.headerMain {position: fixed; top: 0; left: 0; width: 100%;}

header h1 {
	position: relative;
	left: 80px;
	width: 220px;
	height: 63px;
	top: 58px;
	text-align: center;
	z-index: 999999999;
	transition: top .3s;
}
header h1 a {
	display: block;
	background-repeat: no-repeat;
	background-position: left top;
	text-indent: 100%;
	overflow: hidden;
	white-space: nowrap;
	position:relative;
	width: 220px;
	height: 63px;
	background-size: contain;
	margin: 0 auto 0;
	box-sizing: border-box;
	background-image: url(images/logo.png);
	transition: opacity .3s,width .3s,height .3s,background-image .3s;
}

#sub header h1,
header.fixed h1 {
	top: 16px;
	transition: top .3s;
	width: 147px;
	height: 36px;
}


.shopnav {
	position: fixed;
	left: 227px;
	top: 16px;
	height: 36px;
}
.shopnav li {float: left;}
.shopnav li a{
	color: #000;
	display: block;
	padding: 10px;
	box-sizing: border-box;
}

.shopnav li li {float: none;}
.shopnav li span {
	position: relative;
	display: inline-block;
	width: 4px;
	height: 4px;
}

.shopnav li span:before {
	position: absolute;
    width: 4px;
    height: 4px;
    border-top: 1px solid #000;
    border-right: 1px solid #000;
    -webkit-transform: rotate(135deg);
    transform: rotate(135deg);
	top: -5px;
	right: -10px;
	margin: 0;
	content:"";
}

.shopnav li div {
	background-color: #FFF;
	border: 1px solid #eee;
	padding: 30px;
	box-sizing: border-box;
	display: none;
	position: relative;
}

.shopnav li div:after {
	position: absolute;
	width: 13px;
	height: 15px;
	top: -14px;
	left: 50%;
	margin-top:-px;
	content:"";
	background-image: url(images/yaji.png);
	background-repeat: no-repeat;
	background-position: left top;
	background-size: contain;
}


#sub header h1 a,
header.fixed h1 a{
	width: 147px;
	height: 36px;
	background-image: url(images/logo-scroll.png);
	transition: opacity .3s,width .3s,height .3s,background-image .3s;
}

.headerMainNav {
	position: absolute;
	bottom:50px;
	right: 80px;
	z-index: 999999999;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
	text-align: left;
}

.headerMainNav li a{
	display: block;
	color: #FFF;
	padding: 0 10px;
	box-sizing: border-box;
	font-family: 'Noto Serif JP', serif;
	font-size: 18px;
	letter-spacing: 1.5px;
}


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

.headerMainNav li a span:before{
position: absolute;
top:0;
left:0;
right: 0;
margin:0 auto;
background-color: rgba(255,255,255,0.7);
width: 1px;
height: 6px;
content:"";
transition: height .3s;
}

.headerMainNav li a:hover span:before{
height: 100%;
transition: height .3s;
}


#_btn {
  overflow: hidden;
  background-color: rgba(255,255,255,0.7);
  height: 60px;
  width: 60px;
  position: fixed;
  top: 60px;
  right: 80px;
  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: 5px;
  transition: background-color .3s,top .3s;
}


#_btn:hover {
  background-color: rgba(255,255,255,0.8);
  transition: background-color .3s;
}

#_btn_nav {
  float: left;
  cursor: pointer;
  position: relative;
}
#nav_open {
  position: absolute;
  z-index: 2;
  top: 0;
  height: 60px;
  width: 60px;
  transition:width .3s, height .3s;
}
#nav_close {
  position: relative;
  z-index: 2;
  top:  0px;
  height: 60px;
  width: 60px;
  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: 12px;
	margin: 0px auto 0;
 	height: 24px;
	width: 24px;
    cursor: pointer;
    font-family: 'Lora', serif;
	transition:top .3s;
}
#menu:after {
	content:"MENU";
	color: #000;
	font-size: 10px;
	position: absolute;
	bottom: -14px;
	left: -2px;
}
#menu.active:after {
	content:"CLOSE";
	color: #000;
	font-size: 10px;
	bottom: -14px;
	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: 4px;}
#bar02 {top: 10px;}
#bar03 {top: 16px;}
.active #bar01 {
    top: 10px;
    transform: rotate(45deg);
}
.active #bar02 {width: 0;}
.active #bar03 {
    top: 10px;
    transform: rotate(-45deg);
}

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


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

.headerNav2 {
	width: 464px;
	height: 464px;
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 99999999999;
	margin-top:-232px;
	margin-left:-232px;
	box-sizing: border-box;
	background-color: #fff;
	/* overflow: auto; */
	overflow: hidden;
}

.navlogo {
	position: relative;
	margin: 0 auto 80px;
	width: 248px;
	height:66px;
	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: 248px;
	height:66px;
	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;
}

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


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

}

.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.side001 a:hover span:before{
height: 100%;
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: inline-block;
	padding: 10px;
	box-sizing: border-box;
	border-left: 1px solid #ccc;
}

.navBox ul.side002 li:first-child,
.navBox ul.side003 li:first-child {
	border-left: none;
}

.navBox ul.side003 li a{
	display: block;
	color: #aaa;
	font-size: 12px;
}

.side002,
.side003 {margin-top: 40px;}
.side002 li a{
	color: #000;
	display: block;
	font-family: 'Lora', serif;
	position: relative;
	font-size: 15px;
	padding: 10px 20px;
	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;}

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


.footerCompany dl { box-sizing: border-box; text-align: center; margin-bottom: 20px;}
.footerCompany dt {
width: 165px;
height: 49px;
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;
	width: 165px;
	height: 49px;
}
.footerCompany dd {text-align: center; font-size: 14px; margin: 5px 0 0 0; font-family: 'Noto Sans JP', sans-serif;}


.mailBtn {
	position: fixed;
	right: 145px;
	top: 70px;
	width: 380px;
	height: 40px;
	z-index: 99999999999;
	box-sizing: border-box;
	/* text-align: center; */
	font-family: 'Lora', serif;
	transition: top .3s;
	display: flex;
	justify-content: flex-end;
}

.mailBtn.mailBtn2 {
	width: 330px;
	text-align: center;
	justify-content: center;
}

.mailBtn li {/* float: left; */}

.mailBtn li:nth-of-type(1){
	font-size: 25px;
	color: #FFF;
	margin-right: 10px;
	transition: color .3s;
}
.mailBtn li:nth-of-type(1) .teltxt{
	font-size: 15px;
}
.mailBtn li:nth-of-type(2) a{
	background-color: rgba(255,255,255,0.7);
	display: block;
	height: 40px;
	padding: 5px 10px;
	box-sizing: border-box;
	position: relative;
	font-size: 15px;
	color: #000;
	transition: background-color .3s,border .3s;
	vertical-align: top;
}
.mailBtn li:nth-of-type(2) a span {
display: inline-block;
padding-top: 4px;
box-sizing: border-box;
}

.mailBtn li:nth-of-type(2) a:hover{
	background-color: rgba(255,255,255,0.8);
	transition: background-color .3s,border .3s;
}


#sub .mailBtn,
.mailBtn.fixed3 {
	top: 15px;
	transition: top .3s;
}
#sub .mailBtn li:nth-of-type(1),
.mailBtn.fixed3 li:nth-of-type(1){
	color: #000;
	transition: color .3s;
}
#sub .mailBtn li:nth-of-type(2) a,
.mailBtn.fixed3 li:nth-of-type(2) a{
	background-color: rgba(255,255,255,0);
	border: 1px solid rgba(0,0,0,1);
	transition: background-color .3s,border .3s;
}

.mailBtn.fixed3 li:nth-of-type(2) a:hover{
	background-color: rgba(255,255,255,0.8);
	border: 1px solid rgba(255,255,255,0.8);
	transition: background-color .3s,border .3s;
}

#sub .mailBtn.mailBtn2 li:nth-of-type(1){
	font-size: 15px;
}
#sub .mailBtn.mailBtn2 li:nth-of-type(1) a,
#sub .mailBtn.mailBtn2 li:nth-of-type(3) a,
#sub .mailBtn.mailBtn2 li:nth-of-type(2) a {
	background-color: rgba(255,255,255,0);
	display: block;
	height: 40px;
	padding: 5px 10px;
	box-sizing: border-box;
	position: relative;
	font-size: 15px;
	color: #000;
	transition: background-color .3s,border .3s;
	vertical-align: top;
	border: none;
}

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

#sub .mailBtn.mailBtn2 li:nth-of-type(1) a:hover,
#sub .mailBtn.mailBtn2 li:nth-of-type(3) a:hover,
#sub .mailBtn.mailBtn2 li:nth-of-type(2) a:hover{
	background-color: rgba(255,255,255,0);
	border: none;
	transition: background-color .3s,border .3s;
}


/* 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: 20px;
	right: 80px;
	color: #FFF;
	width: 60px;
	height: 60px;
	text-align: center;
	font-size: 10px;
	z-index: 999999999;
}
#pageTop a{
	color: #000;
	position: relative;
	width: 60px;
	height: 60px;
	display: block;
	box-sizing: border-box;
	font-family: 'Lora', serif;
	background-color: rgba(255,255,255,0.7);
	border-radius: 50%;
	padding-top: 30px;
}
#pageTop a:after {
	position: absolute;
	background-image: url(images/pagetop.png);
	background-repeat: no-repeat;
	background-size: 33px 17px;
	width: 33px;
	height: 17px;
	top: 13px;
	left: 0;
	right: 0;
	margin: 0 auto;
	content: "";
	transition: top .3s;
}

#pageTop a:hover:after {
	top: 10px;
	transition: top .3s;
}



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

}

#container section{position: relative;}

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

.mainTtlM {
	position: relative;
	font-size: 25px;
	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: 28px;
	margin-right: 50px;
}

.mainTtlM2 {
	position: relative;
	font-size: 30px;
	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: 60px;
	margin-right: 50px;
	padding-top: 46px;
	background-repeat: no-repeat;
	background-size: 42px 42px;
	background-position: right top;
}


.mainTtlM2 span{
	font-size: 12px;
	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: 30px;
	font-family: 'Lora', serif;
	text-align: center;
	margin-bottom: 10px;
}




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


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


.newsBox {float: left; width: calc(100% - 312px);}
.newsBox li {padding: 0 0 20px; box-sizing: border-box;}

.newsBox li dt {font-size: 14px; float: left; width: 100px; font-family: 'Ubuntu', sans-serif;}
.newsBox li dd {float: left; width: calc(100% - 100px); font-size: 14px; }
.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; 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 {
	/* float: right; */
	position: absolute;
	bottom: 20px;
	right: 0;
	width: 212px;
	margin-left: 22px;
}

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

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

.pickupBg{
position: absolute;
top:0;
left: 0;
width: 100%;
height: 624px;
}

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

.pickup figure {
	width: 48%;
	height: 624px;
	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: 624px;
width: 52%;
padding: 164.5px 12.5% 164.5px 5%;
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%;
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;
}
.pickupTxt div {padding: 48px 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: 16px;
	font-family: 'Noto Serif JP', serif;
	text-align: center;
	border: 1px solid #000;
	width: 200px;
	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;
}


/* .top002 a:hover .pickupBtn span{
	background-color: #f8eaea;
	border: 1px solid #f8eaea;
	transition: background-color .3s, border .3s;
}
.top003 a:hover .pickupBtn span{
	background-color: #e3ecdb;
	border: 1px solid #e3ecdb;
	transition: background-color .3s, border .3s;
}
.top004 a:hover .pickupBtn span{
	background-color: #c5d8e4;
	border: 1px solid #7db4dc;
	transition: background-color .3s, border .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;	
}

.top005 ul li a:hover img{
    -webkit-transform: scale(1.02);
    -moz-transform: scale(1.02);
    -o-transform: scale(1.02);
    -ms-transform: scale(1.02);
    transform: scale(1.02);
}

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


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

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

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


.top005 ul h3{
	position: relative;
	font-size: 25px;
	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: 55px;
}


.top005 ul h3 span{
	font-size: 11px;
	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;
	box-sizing: border-box;

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

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

.contactBox li:nth-of-type(1) {border-right: 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: 45px;
line-height: 1.1;
}

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


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

.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 ul,
.snsBox ul {margin-top: 20px;}

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




/* **********************************************************************************************
[7]subContainer
************************************************************************************************ */
/* common
---------------------------------------------- */
.mainSubTtl {
	padding: 60px 12.5% 0px;
	box-sizing: border-box;
	text-align: center;
	font-size: 40px;
	line-height: 1.2;
	font-family: 'Noto Serif JP', serif;
}

.mainSubTtl span{
	display: block;
	font-size: 14px;
	font-family: 'Lora', serif;
	color: #a0a0a0;
}

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

.contactTelFax {text-align: center;}

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

.subTtlS span,
.subTtlS2 span {
	display: inlin-block;
	position: relative;
}
.subTtlS2 {
font-family: 'Noto Serif JP', serif;
}
.subTtlS2 span img {width: 30px; height: 30px; vertical-align: middle; margin-right: 5px;}

.subTtlS span:before {
	position: absolute;
	content:"";
	top:0;
	bottom:0;
	left: -60px;
	background-color: #000;
	height: 1px;
	width: 50px;
	margin: auto 0;
}

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

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

.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.companyBox2 li dt {width: 100px;}
.companyBox.companyBox2 li dd {width: calc(100% - 140px);}

.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);}


.col2L {float: left; width: 60%; padding-right: 30px; box-sizing: border-box;}
.col2R { float: right; width: 40%;}
.pcnov1 {display: block;}

.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%;
}

@media all and (max-width: 1227px) {
	.pcnov1 {display: none;}
	.col2L {float: none; width: 100%; padding-right: 0px; box-sizing: border-box;}
	.col2R { float: none; width: 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 li {
	width: 33.333%;
	float: left;
}

.companyImg li figure{
	width: 100%;
	position: relative;
	overflow: hidden;
	padding-top: 75%;
} */

.companyImg img {height: 300px; border-radius: 20px; margin: 0 20px;}

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

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

.birthedayImg1 {
	float: right;
	width: calc(100% - 400px);
}

.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;
	box-sizing: border-box;
}

.mainTtlM3 {
	position: relative;
	font-size: 30px;
	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: 80px;
	padding-top: 46px;
	background-repeat: no-repeat;
	background-size: 42px 42px;
	background-image: url(images/icon-top003.png);
	background-position: right top;
	margin: 0 auto 30px;
}

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

.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: 60px;
}

.aboutTxt {padding-right: 12.5%; width: 100%;}

.aboutTxt1 {
	float: right;
	width: 70%;
}

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

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

.imgAbout1 {width: 80%; position: relative; max-width: 400px; }
.imgAbout2 {width: 70%; position: absolute; bottom:-75%; right: 0; max-width: 350px; 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: center; font-size: 18px; font-family: 'Noto Serif JP', serif; padding: 40px 0 0;}
.submaintext span{ font-size: 13px; 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%;
}
.dorayakiBox.col3 li,
.item.col3 li{
	width: 33.333%;
}
.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(3n+1),
.dorayakiBox.col4 li:nth-of-type(4n+1),
.item.col4 li:nth-of-type(4n+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;
	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: 18px;
}

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

.item li dd span{
	font-size: 12px;
}
.prolist {text-align: center; margin-top: 40px;}
.prolist li {display: inline-block; margin: 0 2px;}
.prolist li a {
	color: #000;
	display: block;
	padding: 10px 20px 10px 35px;
	box-sizing: border-box;
	font-size: 18px;
	border: 1px solid #000;
	position: relative;
}
.prolist li a:before {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 20px;
    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: center; margin: 5px 0 50px; font-size: 16px;}

.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: 15px;
	box-sizing: border-box;
	text-align: center;
}

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

.aboutBg {display: none;}

/* **********************************************************************************************
[7]shop
************************************************************************************************ */
.itemBox li{
	float: left;
	width: 20%;
	padding: 0 10px;
	box-sizing: border-box;
	margin-bottom: 20px;
}

.itemBox3 li{
	float: left;
	width: 33.333%;
	padding: 0 10px;
	box-sizing: border-box;
	margin-bottom: 20px;
}

.itemBox2 li{
	float: left;
	width: 16.666%;
	padding: 0 5px;
	box-sizing: border-box;
}
.itemBox li a {color: #000;}
.subShop .itemBox li{
	margin-bottom: 30px;
}

.itemBox li figure,
.itemBox2 li figure,
.itemBox3 li figure {
position: relative;
width: 100%;
padding-top: 100%;
overflow: hidden;

}

.itemBox3 li figure {
padding-top: 75%;
}
.itemBox dt,
.itemBox dd,
.itemBox2 dt,
.itemBox2 dd { color: #000; font-size: 15px;}
.itemBox dd span,
.itemBox2 dd span{ font-size: 11px;}
.itemBox3 p{ text-align: center; margin-top: 5px; font-size: 18px; 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: 12px;
	padding: 10px;
	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 {
	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; }
.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: 16px; }
.guideTtl span{
	font-size: 16px;
	position: relative;
	padding: 0 0px;
	font-weight:  bold;
}

.contactSubBox {
	margin-bottom: 40px;
}
.contactSubBox li {display: inline-block; margin-right: 20px;}
.contactSubBox span{
	font-size: 30px;
	font-weight: 700;
}

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

.pageLink {text-align: center; width: 100%; padding: 10px; 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;}
.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;
}

.next-btn {
  display: none; /* 右側の固定部分を非表示 */
}

/* detail */
.detailphotobloc { width: 30%; float: left; /* margin-bottom: 30px; */ }
.detailphotobloc.detailphotobloc3 { width: 45%; 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 li,
div.detailphotobloc2 li {
	margin-bottom: 10px;
}

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

div.detailphotobloc3 figure img{
	width: 100%;
}
div.detailphotobloc3 figure{
	margin: 0 auto;
	text-align: center;
}
div.detailphotobloc3 figure img.v{
	width: 92.5%;
	margin: 0 auto;
	text-align: center;
}

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.detailphotobloc ul.thumbnail li a:hover,
div.detailphotobloc2 ul.thumbnail li a.active,
div.detailphotobloc2 ul.thumbnail li a:hover{
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{ width: 70%; padding-left: 30px; box-sizing:  border-box; float: right; box-sizing: border-box; margin-bottom: 30px; }
.detailBox.detailBox3{ width: 55%; padding-left: 30px; box-sizing:  border-box; float: right; box-sizing: border-box; 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: 18px; margin-bottom: 2px; }
.price .red{ font-size: 14px; 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: 500;
	box-sizing: border-box;
}
.detailBox .btncart a:hover{ background-color: #aaa; }
.favorit { /* float: left; width: 40%; */ padding: 1px 0; box-sizing: border-box; }
.favorit a span.iconTxt { border: 1px solid #000; display: block; padding: 5px 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;
}

.favorit a:hover span.icon{ background-color: #000; color: #fff; }
.favorit a:hover span.iconTxt { background-color: #000; color: #fff; background-image: url(images/icon-favorit_on2.png); }
.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; }
.detailBox .cartBox li a:hover{ color: #2f4881; text-decoration: underline; }

.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-controls-direction a:hover,
.detailphotobloc2 .bx-wrapper .bx-controls-direction a:hover {
background-color: inherit;
}

.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;
}

.detailphotobloc .bx-wrapper .bx-prev:hover,
.detailphotobloc2 .bx-wrapper .bx-prev:hover {
	background-position: right center;
	transition: background-position .5s;
}

.detailphotobloc .bx-wrapper .bx-next:hover,
.detailphotobloc2 .bx-wrapper .bx-next:hover {
	transition: background-position .5s;
	background-position: left center;
}
.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;}


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

.pagenumber_area {text-align: right; padding: 0 20px 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;}
.subDetailBox2 {margin-bottom: 60px;}
.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;}

.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 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%;
}


header h1 a:hover,
footer dt a:hover,
.newsBox a:hover,
.contact a:hover,
.prolist li a:hover,
.shopnav li a:hover,
.shopsubfnav li a:hover,
#sub .mailBtn.mailBtn2 li a:hover {opacity:0.7; filter: alpha(opacity=70); -ms-filter: "alpha( opacity=70 )";}



/* **********************************************************************************************
[3]sideContainer
************************************************************************************************ */

/* btn
----------------------------------------------- */



/* 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 #a0a0a0;
	margin: 1px 0;
}
input.boxShort,input.box60 {width: 10%;}
input.box120 {width: 20%;}
input.box140 {width: 40%;}
input[type=text].keyBox {
	width:159px;
	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: 70%;}
input.boxLong {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: 6px 7px;
	background-position: right 5px center;
	cursor: pointer;
	border: 1px solid #a0a0a0;
	margin: 0 5px 5px 0;
}
.detailshopping select { width: 150px; }
.selectV select {width: 20%;}

@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none) {
	select:not(:target) {
		padding-right:0;
		background-image: none;
	}
}
	textarea.kiyaku_text {
	height: 1000px;
	width:  100%;
	overflow: auto;
	
	}


/* font 
----------------------------------------------- */
.f10 { font-size: 10px; }
.f11 { font-size: 11px; }
.f12 { font-size: 12px; }
.f13 { font-size: 13px; }
.f14 { font-size: 14px; }
.f15 { font-size: 15px; }
.f16 { font-size: 16px; }
.f17 { font-size: 17px; }
.f18 { font-size: 18px; }
.f19 { font-size: 19px; }
.f20 { font-size: 20px; }
.f25 { font-size: 25px; }
.f30 { font-size: 30px; }
.f35 { font-size: 35px; }
.f40 { font-size: 40px; }
.f45 { font-size: 45px; }
.f50 { font-size: 50px; }
.f55 { font-size: 55px; }
.f60 { font-size: 60px; }
.f65 { font-size: 65px; }
.f70 { font-size: 70px; }
.txtC,.alignC { text-align: center; }
.txtR,.alignR { text-align: right; }
.txtL,.alignL { text-align: left; }
a.txtD { text-decoration: underline; color: #000; }

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

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

.box10S {
	width: 100%;
	/* max-width: 1580px; */
	padding: 80px 12.5% 0;
	box-sizing: border-box;
	position: relative;
}

.box10S2 {
	width: 100%;
	/* max-width: 1580px; */
	margin: 0 auto;
	padding: 80px 0 80px 12.5%;
	box-sizing: border-box;
	position: relative;
}
@media all and (max-width: 1770px) {
.aboutImg1 {
	margin-top: 5%;
}
}

@media all and (max-width: 1190px) {
.contactBox {
	padding-right: 20px;
}
.snsBox {
	padding-left: 20px;
}
}
@media all and (max-width: 1165px) {
	.box10 {padding: 80px 20px;}
	.pickupBox {padding: 164.5px 5% 164.5px 5%;}
	.top003 .pickupBox {padding: 164.5px 5% 164.5px 5%;}

	header h1,
	#sub header h1 {left: 20px;}
	footer {padding: 30px 20px 0;}
	.mailBtn {right: 85px;}
	#_btn {right: 20px;}
	.scroll {left: 20px;}
	#pageTop {right: 20px;}
	.headerMainNav {right: 20px;}
	.bread {padding: 5px 20px; }


.shopnav {
	left: 167px;
}

	.box10S {
		padding: 80px 20px 0;
	}
}

@media all and (max-width: 1138px) {
.birthedayTxt1{
	width: 250px;
}

.birthedayImg1 {
	width: calc(100% - 250px);
}
.birthdaysubtxt {
	padding-right: 20px;
	height: 642px;
	margin-top: -321px;
}

}

.posiR { position: relative; }
.pb80 { padding: 80px 0;}
.pb80t { padding-top: 80px; padding-bottom: 0; }
.pb80b { padding-bottom: 80px; padding-top: 0; }
.pb60 { padding: 60px 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;}


:hover { transition:background-color .3s, color .3s, opacity .3s;}
.pcno,
.pcno2 { display: none; }



@-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);
  }
}