@charset "utf-8";
@import url(https://fonts.googleapis.com/earlyaccess/cwtexyen.css);
/*{ box-sizing:border-box;border:1px  #268A28 solid;}
/* CSS Document */
/* ---reset.css--- */
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {margin: 0;padding: 0;border: 0;font-size: 100%;font: inherit;}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, 
footer, header, hgroup, menu, nav, section {display: block;}
a {text-decoration:none;}
/* ---reset.css--- */

html, body{	
	font-family:'Noto Ssrif JP','Noto Serif TC','Microsoft JhengHei','Helvetica','verdana','Georgia','apple LiGothic Medium','arial','Courier','Times','Heiti TC';
	font-size:20px;
	line-height:20px;
	-webkit-text-size-adjust:none;
	box-sizing: border-box;
	scroll-behavior: smooth;}
@media screen and ( max-width: 768px ){
   html, body{ 
	background: url(../images/m/mbg_1.png) repeat;
    min-width: 320px;
	max-width: 768px;
		width: 100%; padding-bottom: 10px; }
	}


*{-webkit-box-sizing:border-box;box-sizing:border-box;}

:focus { outline: 0; }
h1{ text-indent:-9999px; position:absolute;}
a{text-decoration:none;}
img{ vertical-align:top;}

/*
header{ width:100%; position:relative; z-index:999;display:block; background-color:#323232;}	
#tob {font-size: 12px;text-align:right;color:#fff;padding-right:5px;}
#tob a {color: #fff;text-decoration:none;border-bottom:0px;}
#tob a:hover {color:#fff;text-decoration:none;border-bottom:1px solid;}
.header_m{ display:none;}
	@media screen and ( max-width: 768px ){
		.eslite_footer{margin-bottom: 50px;}
		header{display:none;}
		.header_m{ width:100%; height:auto; position:relative; top:0; display:block; padding:5px 0; background-color:#323232;}
		.header_m img{ width:120%; height:auto; display:block; }
		#tob{ width:50%; font-size:70%}}
footer{ width:100%; position:relative; z-index:990; background-color:#093164;}*/

/* --通用-- */
.container{ max-width:1920px; overflow:hidden; min-width:1200px; margin:0 auto; background:url(../images/bg_wood.png) repeat center top fixed, url(../images/m/mbg_1.png) repeat;}
.box_content{ width:1200px; margin:0 auto; padding:0 20px;}
.item_pc{ display:block;}
.item_m{ display:none;}
ul{ display:inline-block; overflow:hidden;}
li{ list-style:none; float:left; overflow:hidden;}
.title{margin:0 auto; text-align:center; color:#093164; /* border-bottom:1px #053644 solid;*/ height:4rem; margin-bottom:8px; background:url(../images/bg_theme1.png) no-repeat center;}
.box2 .box_content .title, .box4 .box_content .title{ background:url(../images/bg_theme2.png) no-repeat center;}
.title ul{ overflow:visible; padding:30px 0;/*background: url(../images/bg_content1.png) center top repeat;*/}
.title ul li{ font-size:2.2rem; font-weight:bold; padding:0 15px;overflow:visible; border-right:#053644 1px solid;}
.title ul li:last-child{border-right:none;}
h2{ text-align:center; font-size:1rem; font-family:'Noto Serif TC','Microsoft JhengHei','Heiti TC'; font-weight:500; letter-spacing:0.5px; padding:10px 10px; line-height:1.1rem; height:66px; align-items:center; vertical-align:middle; display:table-cell;}
.proname{font-family:'Noto Serif TC','Microsoft JhengHei','Heiti TC'; font-weight:normal;color:#777; font-size:0.75rem; padding:10px 10px 15px 10px;}	
.number{ color:#882c33; font-size:1.4rem; font-family:'Noto Serif TC',Arial, Helvetica, sans-serif; font-weight:bold;}	
	@media screen and ( max-width: 768px ){
		.container{ width:100%; max-width:768px; min-width:320px; max-width:100vw; background:url(../images/bg_wood.png) repeat center top /140%, url(../images/m/mbg_1.png) repeat;}
		.box_content{ width:96vw; padding:0px; }
		.item_pc{ display:none;}
		.item_m{ display:block;}
		.item_m img{ margin:0 auto; width:100%;}
		h2{font-size:0.8rem;}
		.title{ padding-top:2vw;}
		.proname{font-size:0.6rem;}	
        .number{font-size:1.2rem;}
		.title{ height:12vw; margin-bottom:5px; }
		.title ul li{ font-size:1.6rem;padding:0 10px;}
		.title ul{  padding:20px 0;}
		}
	@media screen and ( max-width: 540px ){	
			.title{  }
			.title ul li{ font-size:1.4rem;padding:0 8px;}
					.title ul{  padding:10px 0;}
}



/* --誠品獨家-- */	
.ex_text{ position:absolute; top:5px; left:25px; font-size:0.9rem; width:1.8rem; color:#ffe970; font-weight:500;}
.ex_tag{ position:absolute; width:70px; top:-8px; left:15px;}
	@media screen and ( max-width: 768px ){
		.ex_tag{ position:absolute; width:72px; top:-8px; left:15px;}}
	@media screen and ( max-width: 540px ){
				.ex_tag{ position:absolute; width:60px; top:-8px; left:13px;}
				.ex_text{top:5px; left:23px; font-size:0.7rem; width:1.4rem; line-height:0.9rem;}}



/* --主視覺-- */
.kv{width:100%;background: url(../images/kv_1026.png) center top no-repeat; height:660px; display:block;}	
.kv_content{ position:relative; max-width:1200px; margin:0 auto; height:660px;}
.kv_m{ display:none;}

.kv_title{ position:absolute; top:68px; left:291px;}
.sp_1015-6{ position:absolute; top:298px; left:620px;}
.sp_1015-1388{ position:absolute; top:342px; left:318px;}
.sp_1026{ position:absolute; top:322px; left:453px;}
	@media screen and ( max-width: 768px ){
		.kv{ width:100vw;background:none; background-size:100%;height:auto;}
		.kv_content{ height:auto; max-width:100%;}
		.kv_pc{ display:none;}
		.kv_m{ display:block;width: 100%;}
		.kv_m img{ display:block;width: 100%;}
		.sale,.promo01,.promo02,.promo03{ display:none;}
		.sale_m{ width:100vw; display: block;}
		.sale_m img{ width:100%;}
	}






/* --background-- */
#a{ background:none; height:1100px; padding-top:10px;}
#b{ background:url(../images/bg_06.png) center top repeat; height:965px;}
#c{ background:url(../images/bg_06.png) center top repeat; height:1070px;}
#d{ background:none; height:auto; padding:0 0 10px 0;}
#e{ background:none; height:1080px; padding-top:10px;}
#f{ background:url(../images/bg_09.png) repeat center top; padding-bottom:20px; }
#g{ background:url(../images/bg_10.png) repeat center top; padding-bottom:20px;}
#h{ background:none; height:auto;}
	@media screen and ( max-width: 768px ){
		#a{ background:url(../images/m/mbg_1.png) center top repeat; height:auto; padding-top:0px;}
		#b{background: url(../images/bg_06.png) center top repeat; height:auto;}
		#c{background: url(../images/bg_06.png) center top repeat; height:auto;}
		#d{ background: url(../images/m/mbg_1.png) center top repeat; height:auto;}
		#e{ background: url(../images/m/mbg_1.png) center top repeat; height:auto; padding-top:0px;}
		#f, #g{ background:url(../images/m/mbg_3.png) repeat; }
	}




/* -- 1x3 -- */	
.box1 h2{ background-color:#f3f97f; color:#000; padding:5px 20px; height:1.5rem; position:relative; top:-25px;}
.box1 h3{ color:#353531; margin-top:-20px; padding:0px 10px; font-weight:600; line-height:1.3rem; font-size:1rem;}

.box3 h2{ background-color:#f3f97f; color:#000; padding:3px 10px; height:1.5rem; font-size:1rem;  position:relative; top:-25px;}
.box3 h3{ color:#353531; margin-top:-20px; padding:0px 10px; font-weight:600; line-height:1.3rem; font-size:1rem;}

.box_1x3 li{ width:370px; background-color:#f3f97f; margin:0 25px 15px 0; text-align:center; border-radius: 10px; }
.box_1x3 li:nth-child(3n){ margin-right:0px;}
.box_1x3 .box2_block{ overflow:hidden;}
.box_1x3 li img{ max-height:370px; max-width:370px; transition:all 0.5s; vertical-align: middle; margin:0 auto; padding:10px;}
.box_1x3 li img:hover{ transform:scale(1.1);}		

	@media screen and ( max-width: 768px ){
		.box1 .box_content { width:90vw;}
		.box3 .box_content { width:90vw;}

		.box_1x3{ width:90vw;}
		.box_1x3 li{ width:90vw; margin:0 3vw 5% 3vw;}
		.box_1x3 li img{ max-height:90vw; max-width:90vw; vertical-align:top;}
	}	
	@media screen and ( max-width: 490px ){
		.box_1x3{ width:90vw; }
		.box_1x3 li{ width:90vw; margin:0 0 3vw 0; margin-right:0;}
	}	





/* -- 1x4 -- */
.block2{ padding:0 0 0 0; min-width:1160px;margin:0 auto; display:flex; flex-wrap:wrap; align-items:stretch;}
.block2 li {width:280px; background-color:#fff; text-align:center;padding:8px; overflow:hidden; margin-right:13px; display:inline-block; vertical-align:top; margin-bottom:13px; border-radius:10px;}
/*.block2 li:hover{box-shadow:0 3px 5px 0 rgba(0, 0, 0, 0.2), 1px 4px 8px rgba(0, 0, 0, 0.2);}*/
.block2 li:nth-child(4n){margin-right:0px;}
.block2 li div{width:264px;height:264px;overflow:hidden; vertical-align:middle;line-height:264px; margin-bottom:8px;}
.block2 li img{ max-width:100%; max-height:100%; margin:0 auto; vertical-align:middle;transition:all 0.5s;}
.block2 li img:hover{ transform:scale(1.1);}
.block2 li h2{ height:auto; font-size:1rem; line-height:1.2rem; color:#000; text-align:center; font-weight:600; position:relative;overflow: hidden;  margin:10px 0px 5px 0px; background-color:#f3f97f; padding:5px; width:264px;}
.block2 li p{ height:auto; font-size:18px; line-height:22px; color:#353531; text-align:center; font-weight:500; position:relative;overflow: hidden; z-index:10; padding-bottom:8px; padding-top:8px;}
.block2 li h4{ height:auto; font-size:0.75rem; line-height:1.5rem; color:#777; text-align:center; font-weight:500; position:relative;padding-top:0px;}
.block2 li h4 span{  height:auto; font-size:1.4rem; line-height:1.5rem; color:#882c33; text-align:center; font-weight:900; position:relative;font-family:'notos-serif';}

	@media screen and ( max-width: 768px ){
		.block2{ padding:2% 0 2% 0; min-width:100vw;margin:0 auto;}
		.block2 li {width:47vw; padding:1vw; overflow:hidden; margin-right:1vw; margin-bottom:2vw;}
		.block2 li:hover{box-shadow:none;}
		.block2 li:nth-child(2n){margin-right:0px;}
		.block2 li:nth-child(4n){margin-right:0px;}
		.block2 li div{width:45vw;height:45vw;overflow:hidden;vertical-align:middle; margin:0 auto; line-height:45vw;margin-bottom:2vw;}
		.block2 li img{line-height:0; vertical-align:top; transition:all 0.5s;vertical-align:middle;}
		.block2 li h2{ font-size:0.8rem; line-height:1rem; margin:0px 0px 0px 0px; padding:5px 2px; letter-spacing:0px;}
		.block2 li p{font-size:0.8rem; line-height:1.1rem; padding-bottom:0;}
		.block2 li h4{font-size:0.5rem; line-height:1.5rem;padding-top:2%;}
		.block2 li h4 span{  font-size:1.2rem; line-height:1.5rem; }
	}







/* -- 1x2 -- */
.box5_ul{ width:570px; background:#fff; display:inline-block; margin-right:13px; padding:10px; margin-bottom:25px;transition:all 0.5s; position:relative; overflow: visible;}
.b4display{ display:inline-block;}
.box5_ul a{ display:block;float:left;}
.box5_ul:hover{ transform: translateY(-8px);}
.box5_ul2{ margin-right:0px;}
.box5_ul li{ text-align:center;}
.box5_ul li:nth-child(1){ width:264px; height:264px; vertical-align:middle; display:inline-block; margin-right:7px; border:1px #ccc solid; line-height:258px;}
.box5_ul li:nth-child(1) img{ max-height:264px; max-width:264px;vertical-align:middle;}
.box5_ul li:nth-child(2){width:278px; margin:0 auto; text-align:center;/* border-top:1px #261003 solid; border-right:1px #261003 solid;*/ margin-bottom:4px; padding-top:0px;}
.box5_ul li:nth-child(2) h2{ width:278px; padding:4px 10px; height:36px; background-color: #f3f97f; color:#000; font-weight:600;}
.box5_ul li:nth-child(2) h3{ width:278px; color: #353531; padding:10px 8px;font-weight:600;}
.box5_ul li:nth-child(2) .proname{ font-size:0.7rem; padding:1px 12px 7px 12px;}
.box5_ul li:nth-child(3){ width:136px; height:136px; overflow:hidden; display:inline-block; margin:0px 6px 0 0; border:1px #ccc solid; line-height:128px;}
.box5_ul li:nth-child(3) img{ max-width:100%; max-height:100%;vertical-align:middle; }
.box5_ul li:nth-child(4){ width:136px; height:136px;overflow:hidden; display:inline-block; border:1px #ccc solid;vertical-align:middle;line-height:128px;}
.box5_ul li:nth-child(4) img{ max-width:100%; max-height:100%;vertical-align:middle; }
	@media screen and ( max-width: 768px ){
		.box5_ul{ width:96vw;}
		.b4display{ width:96vw;}
		.box5_ul li:nth-child(1){ width:44vw; height:44vw; text-align:center;line-height:44vw; margin-bottom:1vw;}
		.box5_ul li:nth-child(1) img{ max-width:100%; max-height:100%;}
		.box5_ul li:nth-child(4) img{ max-width:100%; max-height:100%;}
		.box5_ul li:nth-child(3) img{ max-width:100%; max-height:100%;}
		.box5_ul li:nth-child(2){ width:47vw; height:20.8vw; margin-bottom:1vw; }
		.box5_ul li:nth-child(2) h2{ width:47vw;padding:2vw 0; margin-top:2vw;font-size:1.1rem;}
		.box5_ul li:nth-child(2) h3{ width:47vw; padding:1vw 0;}
		.box5_ul li:nth-child(3),.box5_ul li:nth-child(4){ width:22vw; height:22vw; line-height: inherit;}
		.box5_ul li:nth-child(2) .proname{ font-size:0.70rem; padding:3px 0px 3px 0px;}
	}
	@media screen and ( max-width: 540px ){
		.box5_ul{ width:96vw; margin:0 auto;}
		.b4display{ width:96vw; margin-bottom:5vw;}
		.box5_ul li:nth-child(1){ width:90vw; height:auto;}
		.box5_ul li:nth-child(2){ width:90vw; height:auto; margin-bottom:1vw; border:none;}
		.box5_ul li:nth-child(2) h2{ width:90vw;}
		.box5_ul li:nth-child(2) h3{width:90vw;padding:2vw 0;}
		.box5_ul li:nth-child(3),.box5_ul li:nth-child(4){ width:43vw; height:auto;line-height: inherit;}
	}






/* --AD-- */
.boxAD{ background:url(../images/m/mbg_2.png) repeat center top; padding:0px 0px 0px 0px;}
.contenAD{ padding:0 20px;}
.boxAD ul{ padding-top:25px;}
.boxAD ul a{ display:block;float:left;}
.boxAD ul li:nth-child(1),.boxAD ul li:nth-child(4){ width:1160px; transition:all 0.5s;}
.boxAD .item_pc{ width:1152px; margin-bottom:22px;}
.boxAD ul li:nth-child(2),.boxAD ul li:nth-child(3),.boxAD ul li:nth-child(5),.boxAD ul li:nth-child(6){ width:565px; margin-right:22px; overflow:hidden;transition:all 0.5s;margin-bottom:22px;}
.boxv ul li:hover{ transform: translateY(-8px);}
.boxAD ul li img{ width:100%;}
.boxAD ul li:nth-child(3n){margin-right:0px;}
	@media screen and ( max-width: 768px ){
		.contenAD{ padding:0 0 10px 0;}
		.boxAD .item_m{ width:96vw; margin-bottom:0;}
		.boxAD ul{ padding-top:3vw; display:block;}
		.boxAD ul li{ width:96vw; margin:0 auto 2vw auto;}	
		.boxAD ul li img{ width:96vw;}
		.boxAD .item_pc{ display:none;}
		.boxAD ul li:nth-child(1),.boxAD ul li:nth-child(2),.boxAD ul li:nth-child(3),.boxAD ul li:nth-child(4),.boxAD ul li:nth-child(5),.boxAD ul li:nth-child(6){ width:96vw;margin-right:0; margin-bottom:2vw;}
	}


/*--navigationfor mobile--*/
menu{display:none;}
menu ul{
	position:fixed;
	bottom:0;
	left:0;
	margin:0;
	width:100%;
	display: inline-flex; justify-content:center; text-align:center;
	flex-wrap: wrap;
	list-style: none;
	background-color:rgba(13,121,112,0.95);
	z-index:1000;
	padding:2px 0;
	border-top:none;
}
menu ul li{
	border-right:1px solid #dfdaad;
	padding:2px 0;
	width:25%;
	box-sizing:border-box;
	text-align:center;
	font-size:13px;
	letter-spacing:1px;
	border-bottom:1px solid #dfdaad;
}
menu ul li a{
		font-size:12px;
}
menu ul li:nth-child(4n){
	border-right:none;
}
menu ul li:nth-child(5), menu ul li:nth-child(6), menu ul li:nth-child(7), menu ul li:nth-child(8){
	border-bottom:none;
}
menu a{
	color:#fffbe4 !important;
	text-decoration:none;
}

	@media screen and ( max-width: 768px ){
		.side-menu{ display:none;}
		menu{ display:block;}
	}

	
/*--goto top--*/
#button {
  display: inline-block;
  background-color: #000;
  opacity:0.3;
  width: 35px;
  height: 35px;
  text-align: center;
  border-radius: 100%;
  position: fixed;
  bottom: 15px;
  right: 15px;
  transition: background-color .3s, 
 opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;

}
@media screen and ( max-width: 768px ){
#button {
  bottom: 10%;
  right: 10px;}
}

#button::after {
  font-family: FontAwesome;
  content:'　';
  font-weight: normal;
  font-style: normal;
  font-size: 2em;
  line-height: 50px;
  color: #fff;
    opacity:0.5;
	background: url(../images/top.png) center no-repeat; background-size:45%;background-position:40% 22%;
}
#button:hover {
  cursor: pointer;
  background-color: #666;
}
#button:active {
  background-color: #666;
}
#button.show {
  opacity: 0.4;
  visibility: visible;
}