@charset "utf-8";
/* 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;
}

/* ---reset.css--- */
html, body{	
	font-family:'Noto Serif TC', "微軟正黑體","Microsoft JhengHei",Helvetica,Verdana, Arial, sans-serif;
	-webkit-text-size-adjust:none;
}

html{
	
}
body{ 
	background:url("../images/bg.jpg") top center repeat;
/*	background: #e9bf64;*/
	
}

* {
  -webkit-box-sizing: border-box;
     -moz-box-sizing: border-box;
          box-sizing: border-box;
	      line-height:1;
}

:focus { outline: 0; }

li{ list-style:none;} 
a { text-decoration:none;}






/* 滑鼠動態效果 */
.container li , .more a {  
	-webkit-transition-duration:.3s;
	        transition-duration:.3s;
	-webkit-transition-property:transform;
	        transition-property:transform;
	-webkit-transition-timing-function:ease-out;
	        transition-timing-function:ease-out}
.container li:hover,.more a:hover{
	-webkit-transform: scale(0.98);;
		    transform: scale(0.98);}


/* 導覽頁籤 */
/*.sidenav { position: fixed; left: 0; top: 80px; z-index: 99; width: 90px; border-radius:25px; overflow: hidden; background:url("../images/bg_05.jpg")top center repeat;   }
.sidenav ul { overflow: hidden;  padding: 20px 0; }
.sidenav ul li { font-size: 18px; line-height: 22px; text-align: center; color:#f9ef4d; }
.sidenav ul li a { display: block; color: #fff; font-size: 15px; line-height: 40px;}
.sidenav hr { margin: 12px; padding: 0; border: #f9ef4d 0.5px solid;}

.sidenav li { 
	-webkit-transition-duration:.3s;
	        transition-duration:.3s;
	-webkit-transition-property:transform;
	        transition-property:transform;
	-webkit-transition-timing-function:ease-out;
	        transition-timing-function:ease-out}
.sidenav li:hover a {  background-color:#fff; }
.sidenav li:hover a { color:var(--font-color) ; }*/

/*收*/
/*.nav_block{position: fixed; z-index:99;}
	@media screen and ( max-width: 768px ){.nav_block { display: none; }}
.sidenav_pc{ position: fixed; z-index:99;}*/
.side-menu{
	position: fixed;
	width: 160px;
	top:6%;
	padding:10px;
	border-radius:20px 0 20px 20px;
	box-sizing: border-box;
	background:#15524e;
	opacity:0.95; 
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	transition: .3s;
	text-align:center;
	z-index:99;
	font-size:15px;
}
/*.side-menu form{
	display: flex;
	margin: 0 10px 50px;
	border-radius: 100px;
	border:1px solid rgb(255,255,255,.4);
}
.side-menu form input,
.side-menu form button{
	border:none;
	background-color: transparent;
	color: #fff;
	padding: 5px 10px;
}
.side-menu form input{
	width: 230px;
}
.side-menu form button{
	width: 50px;
}
.side-menu form input:focus,
.side-menu form button:focus{
	outline: none;
}*/
.side-menu label{
	position: fixed;
	width: 40px;
	height: 150px;
	background:#15524e;
	opacity:0.95; 
	color: #ffffff;
	right: -40px;
	top: 0%;
	/*bottom: 0;
	margin: auto;*/
	line-height: 28px;
	text-align: center;
	font-size: 24px;
	border-radius: 0 10px 10px 0;
	padding:18px 8px 10px 8px;
	font-weight:500;
}
#side-menu-switch{
	position: absolute;
	opacity: 0;
	z-index: -1;
}
#side-menu-switch:checked + .side-menu{
	transform: translateX(0);
}
/*#side-menu-switch:checked + .side-menu label .fa{
	transform: scaleX(-1);
} */
nav a{
	display: block;
	padding: 6px 5px;
	color: #ffffff;
	text-decoration: none;
	position: relative;
	font-size:14px;	
	font-weight: 300;
}
	

nav a:hover{
	color: #fff;
	background-color:#ef5986;
	border-radius:0;
}
/*
nav a + a::before{
	content: '';
	position: absolute;
	border-top: 1px solid rgb(255,255,255,.4);
	left: 10px;
	right: 10px;
	top: 0;
}
nav a .fa{
	margin-right: -1.1em;
	transform: scale(0);
	transition: .3s;
}
nav a:hover .fa{
	margin-right: 0em;
	transform: scale(1);
}*/
nav p.name_menu{ padding:5% 0 3% 0; font-size:1rem; line-height:1.2rem; border-bottom:1px solid; color:#fff373;}
nav ul.area1{ margin-bottom:150px;}
nav ul.area1 li{ width:50%; float:left; border-bottom:1px dotted #aaa293;}
nav ul.area1 li:nth-child(even){ border-right:1px dotted #aaa293;}
nav ul.area2 li{ border-bottom:1px dotted #aaa293;}
nav ul.area1 li:nth-last-child(1), nav ul.area1 li:nth-last-child(2), nav ul.area2 li:nth-last-child(1){ border-bottom:none;}

/*sidemanu for mobile*/

.sidenav, .icon_sidenav { display: none;}
@media screen and ( max-width: 768px ){
	.side-menu {display: none;}
	.icon_sidenav{ 
		display: inherit; 
		position: fixed;
		z-index: 999;
		bottom: 10%;
		right: 0px;
		max-width: 15%;
		padding: 2%;
		background:#15524e;
		color:#ffffff;
		border-radius: 8px 0 0 8px;
		line-height:1.1em;
		font-size:1.2em;
	}
	.icon_sidenav img{
		max-width: 100%;
		padding: 15% 18%;
		border-top-left-radius: 10px;
		border-bottom-left-radius: 10px;
		background:rgba(0, 0, 0, 1);
	}
	.sidenav {
		display: inherit;
		height: 100%;
		width: 0;
		position: fixed;
		z-index: 9999;
		top: 0;
		right: 0;
		background-color:#15524e;
		overflow-x: hidden;
		transition: 0.3s;
		padding-top: 60px;
	  }
	  .sidenav span {
		padding: 8px 8px 8px 32px;
		font-size: 26px;
		color: #fff373;
		font-weight: 500;
	  }
	  .sidenav a {
		padding: 5px 8px 5px 32px;
		text-decoration: none;
		font-size: 18px;
		color: #ffffff;
		display: block;
		transition: 0.3s;
		margin: 1% 0;
		font-weight: 300;
	  }
	  
	  .sidenav a:hover {
		color: #fffcd4;
	  }
	  
	  .sidenav .closebtn {
		position: absolute;
		top: 0;
		right: 25px;
		font-size: 36px;
		margin-left: 50px;
	  }
	  
	  @media screen and (max-height: 450px) {
		.sidenav {padding-top: 15px;}
		.sidenav a {font-size: 18px;}
	  }
}




/* PC */
.WRAPPER{ position:relative; width:100%; min-width:1200px; margin:0 auto; overflow:hidden;}
 	@media screen and ( max-width: 768px ){
		.WRAPPER{ min-width:100%;}
		
	}
.container { overflow: hidden; max-width: 1920px; margin: auto;}
.topbox { position: relative; width: 1200px; margin: auto;}
.title01{ top: 20px; left: 920px; position: absolute;}
.title02{ top: 282px; left: 110px; position: absolute;}
.title03{ top: 463px; left: -35px; position: absolute;}
.title04{ top: 413px; left: 1021px; position: absolute;}


@keyframes shake1 {
	0% {transform:rotate(-2deg);}
	50% {transform:rotate(2deg);}
}
@keyframes shake2 {
	0% {transform:rotate(2deg);}
	50% {transform:rotate(-2deg);}
}


.kv_pc {width: 100%;  position: relative; text-align:center; background:url("../images/kv.jpg") top center no-repeat;}
.kv_pc img { display: block; text-align: center; }
.kv_m { display: none; }
.kv_m img { display: block; }
.kv_m a {font-size: 0; display: block; }
.for_pc{ display: block; }
.for_m { display: none; }




/* m */
@media screen and ( max-width: 768px ){
	.kv_m { display: block; width: 100%; }
	.kv_m img {  width: 100%; }
	.kv_pc { display: none; }
	.container {width: 100%; min-width: auto; }
	.for_pc{ display: none; }
	.for_m { display: block; }

}



/* bg */
.bg00 { background:url("../images/01.png")  center  53px no-repeat,url("../images/bg05.jpg") top center repeat; }
.bg01 { background:url("../images/bg01-1.png") top center no-repeat,url("../images/bg0.jpg") top center repeat; }
.bg02 { background:url("../images/bg02-1.png")  center 35px no-repeat,url("../images/star.png") top center repeat-y,url("../images/bg.jpg") top center repeat; padding-bottom: 30px;}
.bg03 { background:url("../images/08ti.png")  center  40px no-repeat,url("../images/bookcase3.png") top center repeat-y,url("../images/bg.jpg") top center repeat;}
.bg04 { background:url("../images/06ti.png") center 45px no-repeat,url("../images/bookcase2.png") center 130px repeat-y,url("../images/bg03.jpg") top center repeat; }
.bg05 { background:url("../images/06ti.png")  center 45px  no-repeat,url("../images/bookcase2.png") center 30px repeat-y,url("../images/bg03.jpg") top center repeat; }
.bg06 { background:url("../images/bookcase.png") top center repeat-y,url("../images/05ti.png")  center  -30px no-repeat,url("../images/bg05.jpg") top center repeat; }
.bg06-l { background:url("../images/bookcase.png") top center repeat-y,url("../images/03ti.png") top center no-repeat,url("../images/bg05.jpg") top center repeat; }
.bg07 { background:url("../images/bookcase.png") top center repeat-y,url("../images/04ti.png") top center no-repeat,url("../images/bg05.jpg") top center repeat; }
.bg08 { background:url("../images/07ti.png") center 30px no-repeat,url("../images/bookcase3.png")  center 10px repeat-y,url("../images/bg.jpg") top center repeat; }
/*.bg05 .half ul{border: double 8px #0da493;}*/
.bg06 .banner {padding: 0;}
.bg06 .banner ul{border: double 6px #8dd3cf; margin: 0;}
/*.bg08 .half ul{border: double 8px #ef5e2e;}*/
@media screen and ( max-width: 768px ){
/*	.bg01,.bg02,.bg03,.bg04,.bg05,.bg06,.bg07,.bg08{background-size: 270%;background-position: -69vw 0vw;}*/
	.bg00,.bg06,.bg07 { background:url("../images/bg05.jpg") top center repeat; }
	.bg01 { background:url("../images/bg03.jpg") top center repeat; }
	.bg02 { background:url("../images/bg04.jpg") top center repeat;padding-bottom: 0;}	
	.bg03 { background:url("../images/bg.jpg") top center repeat;}
.bg04 { background:url("../images/bg03.jpg") top center repeat; }
	.bg05 { background:url("../images/bg03.jpg") top center repeat; }
.bg08 { background:url("../images/bg.jpg") top center repeat; }
	.bg06 .banner ul{padding: 1vw;}

}

/* Public Version 公版顏色設定 */
:root {
	--PV-font: #323232; /* 文字色-灰 */
	--PV-main: #96300f; /* 公版主色-橘紅 */
	--PV-price: #a62d33; /* 價格顏色-紅 */
	--PV-eslite: #a7212f; /* 誠品線上標準色 */
}

/* 文字樣式設定 */
html,body{font-family: Verdana,'Noto Sans TC','Microsoft JhengHei',sans-serif; font-size: 16px;}
h2{font-size: 3rem; text-align: center;font-weight: 500;line-height: 2.8rem;}/* 區塊大標 */
h3{font-size: 2.2rem; text-align: center;font-weight: 500;}/* 區塊小標 */
h4{font-size: 1.2rem; text-align: center;font-weight: 500;line-height: 1.4rem;}/* 特色標 */
p{font-size: 1rem; font-weight: 300;line-height: 1.4rem;}/* 內文 */
small{font-size: 60%;}
big{font-size: 140%;color:var(--PV-eslite);font-weight: bold;}
.price{font-size: 0.9rem;font-weight: 500;color:var(--PV-font);display: block;}/* 價格 */
.font{color:var(--PV-font);}/* 文字顏色 */
.sm-pic{display: none;}



h2{padding: 45px 0 40px 0px; width: 1000px; margin: auto; color: #fff; position: relative;}
h2 span{font-size: 1.6rem;line-height: 1.6rem;}
.h2tag{  margin: auto; text-align: center; margin-bottom: 50px;}
.h2tag li{font-size: 1.6rem;line-height: 1.6rem; border: solid 1px #ffe374; color: #ffe374; padding: 8px 12px; left: 0;text-align: center;margin: 0px 10px; display: inline-block;}


.bg01 h2,.bg02 h2,.bg04 h2,.bg05 h2,.bg08 h2{ color:#083835; } 
.bg01 .h2tag li,.bg02 .h2tag li,.bg04 .h2tag li,.bg05 .h2tag li,.bg08 .h2tag li{border: solid 1px #d63856;color: #d63856; }
	@media screen and ( max-width: 768px ){
		html,body{font-size: 14px;}
		h3{font-size: 1.6rem;}
		
		h2{padding: 5% 8% 3% 8%; width: 100%; margin: auto;font-size: 1.85rem;line-height: 2.3rem; }
		h2 span{ width: 24vw; height: auto; font-size: 1.2rem;line-height: 1.2rem; padding: 1.2vw ; left: 0;border-radius: 10px;}
		h2 span br{ display: none;}
		h2 .tag01{left: 36vw; top: 25vw;}
		h2 .tag02{left: 62vw; top: 25vw;}
.h2tag{  margin: auto; text-align: center; margin-bottom: 3%;flex-wrap:wrap; padding: 0 5%; align-items: center;}
.h2tag li{font-size: 18px;line-height:20px; border: solid 1px #ffe374; color: #ffe374; padding:2px 4px; left: 0;text-align: center;margin: 5px 5px;}
		



	}
	@media screen and ( max-width: 360px ){
		h3{font-size: 1.6rem;}
		h2{font-size: 1.6rem;line-height: 2rem; }
		h2 span{ font-size: 1rem;line-height: 1rem; }
		h2 .tag01{ top: 25.5vw;}
		h2 .tag02{ top: 25.5vw;}
	}





/* 4-6 circle */
.circle{ width: 1160px; margin:20px auto;  }
.circle ul { display: flex; justify-content: center;flex-wrap: wrap;}
.circle h3{ width: 1160px;margin: 4px 8px;}
.circle li { width: 260px; background: #fff; margin: 136px 8px 8px;border-radius: 0 0 10px 10px; white-space: nowrap; }
.circle li a { }
.circle .font { display: block; text-align: center;  }
.circle .font h4 { width: 230px; padding: 8px 0; color: var(--PV-eslite); margin: auto;overflow: hidden;}
.circle .font p { margin: 0;margin: 0 20px;overflow: hidden; height: 45px;}
.circle .font .price { padding: 10px 30px 10px 10px; margin: 15px 30px 25px;border: var(--PV-eslite) 1px solid; color:var(--PV-eslite);border-radius:10px;  position: relative;overflow: hidden; white-space: nowrap;}
.circle .font .price:after { content: 'GO';position: absolute;right: 0;top: -14px;background-color: var(--PV-eslite);color: #fff;line-height: 63px;padding: 5px;font-size: 0.8rem; }
.circle .font .price big {    }
.circle img { border-radius:30px;margin: -132px auto 0 auto;display: block; width: 260px; height: 260px; object-fit: contain; border: solid 5px #f1f1f1;background: #ffffff;} 
	@media screen and ( max-width: 768px ){
		.circle{width: 100%; margin: 2vw auto;}
		.circle ul {flex-wrap: wrap;}
		.circle h3{ width: 96vw;margin: 1vw;}
		.circle li {width: 46vw;  margin: 1vw; padding: 1vw 1vw 2vw; border-radius: 0;}
		.circle a {  }
		.circle .font {  margin: 1vw 0;}
		.circle .font h4 {width: 44vw; padding: 1vw;}
		.circle .font p { }
		.circle .font .price { margin: 0 2vw 2vw; padding: 1vw 6vw 1vw 1vw;}
		.circle .font .price:after { top: -4px;line-height: 2rem;padding: 3px;font-size: 0.5rem; }
		.circle .font .price big { font-size: 1rem; }
		.circle img { width: 43vw; height: 43vw; margin: auto; border-radius: 0; border: 0px;}
	}


/* 4-4 hightlight */
.hightlight{ width: 1160px; margin:20px auto;  }
.hightlight ul { display: flex; justify-content: center;flex-wrap: wrap;border-radius: 20px; }
.hightlight h3{ width: 1160px;margin: 4px 8px;}
.hightlight li { width: 250px; background: #fff; margin: 4px 8px;  padding: 0; }
.hightlight li a { }
.hightlight .font { display: block; text-align: center;  }
.hightlight .font h4 { padding: 6px 10px; margin: 0 0 5px; color:#fff; background: #083835;white-space: nowrap; overflow: hidden;text-overflow: ellipsis;}
.hightlight .font p { margin: 0; }
.hightlight .font .price { margin: 10px 0 15px; }
.hightlight .font .price big {    }
.hightlight img { display: block; width: 250px; height: 250px; object-fit: contain; }
	@media screen and ( max-width: 768px ){
		.hightlight{width: 100%; margin: 2vw auto;}
		.hightlight ul {flex-wrap: wrap;}
		.hightlight h3{ width: 96vw;margin: 1vw;}
		.hightlight li {width: 46vw; padding: 0; margin: 1vw; }
		.hightlight a {  }
		.hightlight .font {  margin: 0 0 3vw 0;}
		.hightlight .font h4 { padding: 1vw;font-size: 1rem;}
		.hightlight .font p { }
		.hightlight .font .price { margin: 1vw 0;}
		.hightlight img { width: 46vw; height: 46vw;}
	}

/* inner-bn */
.hightlight .inner-bn{ background: none; width: auto;}
.hightlight .inner-bn img{ width: 508px; height: auto;}
	@media screen and ( max-width: 768px ){
		.hightlight .inner-bn{ width: 86vw; }
		.hightlight .inner-bn img{ width: 100%; height: auto;}
	}

/* more */
.hightlight .more{ width: 560px;text-align: right;}
.hightlight .more a{ font-size: 1.4rem; color: #083835;padding: 0 20px; display: block;}
	@media screen and ( max-width: 768px ){
		
		
	}







/* 2-6 various half */
.half{ display: flex; flex-wrap: wrap;justify-content: center;}
.half ul{width: 570px;flex-wrap: wrap; margin: 4px;background:url("../images/bg04.jpg") top center repeat;border: double 6px #d63856;padding: 20px 0px;}
.half ul h3{ width: 560px; color: #083835; white-space: nowrap;}
.half ul h3:before,.half ul h3:after{ content: ' ●●● '; color: #ef5986;}
.half ul li{  margin: 4px; }
	@media screen and ( max-width: 768px ){
		.half{ }
		.half ul{width: 100%; margin: 2vw; padding: 2vw 0;}
		.half ul h3{ width: 100%; }
		.half ul li{  margin: 1vw; width: 42vw; }
		.half img{ width: 42vw; height: 42vw; }
	}






/* 3-1 rectangle_3p */
.rectangle_3p{ width: 1045px; margin:20px auto;  background: url("../images/bg02.jpg") top center repeat;border: double 6px #8dd3cf;border-radius: 20px;padding: 20px;}
.rectangle_3p ul { display: flex; justify-content: center;flex-wrap: wrap;}
.rectangle_3p h3{ width: 1160px;margin: 4px 8px;}
.rectangle_3p li { width: 320px; background: #fff; margin: 4px;  padding: 20px 20px 10px; text-align: center;border-radius: 10px; }
.rectangle_3p li a { display: flex;flex-wrap: wrap; justify-content: center;}
.rectangle_3p .font {  margin: auto; }
.rectangle_3p .font h4 {  margin: 10px 0;border-radius: 20px; color: var(--PV-eslite); padding: 2px 16px;font-size: 1.4rem;}
.rectangle_3p .font p {  }
.rectangle_3p .font .price { margin: 10px 0; }
.rectangle_3p .font .price big {    }
.rectangle_3p img { width: 266px; height: 266px; object-fit: contain; }
.book{ padding: 10px;}
	@media screen and ( max-width: 768px ){
		.rectangle_3p{width: 100%; margin: 3vw auto; padding: 2vw 0;}
		.rectangle_3p ul {flex-wrap: wrap;}
		.rectangle_3p h3{ width: 96vw;margin: 1vw;}
		.rectangle_3p li {width: 44vw; padding: 3vw; margin: 1vw; }
		.rectangle_3p a {  }
		.rectangle_3p .font {padding: 1vw; }
		.rectangle_3p .font h4 { padding: 1vw;width: 40vw;white-space: nowrap;overflow: hidden; font-size: 1.2rem; }
		.rectangle_3p .font p { }
		.rectangle_3p .font .price { margin: 1vw;}
		.rectangle_3p img { width: 40vw; height: 40vw;}
		.rectangle_3p ul li:first-child {width: 94vw; padding: 3vw; margin: 1vw 3vw; }
		.rectangle_3p ul li:first-child a { flex-wrap: nowrap; }
		.rectangle_3p ul li:first-child .font {padding: 1vw 0vw 1vw 3vw; }

	}

/* 2-5 triple */
.triple{width: 1160px; margin:20px auto; }
.triple ul{ display: flex; justify-content: center;}
.triple li{ width: 560px; background: #fff; margin: 4px; padding: 10px;}
.triple a { display: flex; }
.triple .font {  margin: 0 auto;padding: 0px 0px 0px 6px;width: 320px; text-align: center; display: flex;flex-direction: column;justify-content: space-between;height: 260px; overflow: hidden;}
.triple .font h4 { padding: 8px 0; background:#00bab9; color: #fff;}
.triple .font p {   }
.triple .font .price {  }
.triple .font img {  width: 134px; height: 134px; vertical-align: bottom;}
.triple .sm-pic {display: block;}
.triple img {height: 260px;width: 260px; object-fit: contain; margin: auto;}
	@media screen and ( max-width: 768px ){
		.triple{width: 100%; margin: 2vw auto;}
		.triple ul{flex-wrap: wrap;}
		.triple li{ width: 96vw; margin: 1vw; padding: 3vw;}
		.triple a {  }
		.triple .font { width: 44vw; height: 46vw; padding: 0 0 0 1.5vw;}
		.triple .font h4 { padding: 1vw 0;}
		.triple .font p { }
		.triple .font .price {  }
		.triple .font img {  width: 20vw; height: 20vw;}
		.triple img { height: 46vw; width: 46vw;margin:auto;}
	}



/* keyword + ad + bt*/
.keyword3{ width:1200px; margin:0 auto 20px auto; padding:20px 25px; display:inline-flex; align-items:center; text-align:center; background:url(../images/m/mbg_1.png) repeat; border-radius:2px;}

.kword{ flex:1.2; z-index:2; }
.kword ul{ }
.kword ul li{ height:52px; font-size:1.5em; line-height:2.2em; font-weight:bold;  }
.kword ul li a{ color:#083835;}
.kword ul li:nth-of-type(odd){background:#e1fcfa;}
.kword ul li:nth-of-type(even){background:#9fe0db;}

.bn{ flex:2; z-index:2; }
.bn img{ max-width:90%; margin:1%;}
.container1200 { max-width:1200px; margin:0 auto; padding:0 0; position:relative; }
.bt{ z-index:2; }
.bt ul{ display:inline-grid; justify-content:center; align-content:center;   }
.bt ul li{ display:grid; width:195px; height:118px; margin:3.8% auto; font-size:1.2em; line-height:1.5em; padding:1em;  background:#005453; border-radius:10px; border:4px double #8dd3cf;}
.bt a{ color:#ffffff; }
.bt a big{ color:#ffe374;}
	@media screen and ( max-width: 768px ){	
		.keyword3{ width:100%; height:auto; margin:0 auto; padding:1vw 0 4vw 0; display:block; border-radius:10px;}	.container1200, .container1920{ max-width:100vw; min-width:320px; padding:2vw; text-align:center; }
		.container1200{ padding:0;}

		.kword ul li{ display:inline-block; width:45vw; height:13vw; font-size:1em; line-height:13vw; margin:0 -0.6vw; letter-spacing:-1.5px; }
		.kword ul li a{ font-size:1rem;}
		.kword ul li:nth-child(1), .kword ul li:nth-child(4), .kword ul li:nth-child(5), .kword ul li:nth-child(8), .kword ul li:nth-child(9){background:#e1fcfa;}
		.kword ul li:nth-child(2), .kword ul li:nth-child(3), .kword ul li:nth-child(6), .kword ul li:nth-child(7), .kword ul li:nth-child(10) {background:#9fe0db;}

		.banner{ padding:2vw 0; }
		.banner img{ max-width:94vw; margin:1% auto 0.5% auto; }
v
		.bt{ padding:0 2vw;}
		.bt ul{ display:inline-block;}
		.bt ul li{ display:inline-grid; flex-wrap:wrap; justify-content:center; align-items:center; width:46vw; height:28vw; font-size:1em; margin:0 auto 1vw auto; background-size:100%; border:1px solid #fffeee; }
		.bt a{ font-size:1rem;}
	}
	@media screen and ( max-width: 375px ){	
		.bt img{ width:4vw;}
		
	}
/* rectangle */
.rectangle{ width: 1160px; margin:10px auto; /*background:#d14a0f url(../images/texture.png);*/ padding:0 0 30px 0; border-radius: 20px; }
.rectangle ul { display: flex; justify-content: center;flex-wrap: wrap; margin: 0 auto;}
.rectangle h3{ margin:4px auto; font-size: 22px; color:var(--PV-main);}
.rectangle li { width: 260px; background: #fff; margin: 4px 8px;  padding: 10px; text-align: center; }
.rectangle li a { display: flex;flex-wrap: wrap; justify-content: center;}
.rectangle .font {  margin: auto; }
.rectangle .font h4 {  margin: 5px 0;}
.rectangle .font p {  }
.rectangle .font .price { margin: 10px 0; }
.rectangle .font .price big {    }
.rectangle img { width: 240px; height: 240px; object-fit: contain; }
	@media screen and ( max-width: 768px ){
		.rectangle{width: 100%; margin: 2vw auto; padding-bottom: 0;}
		.rectangle ul {flex-wrap: wrap;}
		.rectangle h3{ width: auto; margin: 1vw; font-size:1rem;}
		.rectangle li {width: 46vw; padding: 3vw 1vw; margin: 1vw; }
		.rectangle a {  }
		.rectangle .font {padding: 1vw 0.5vw; width:100vw; }
		.rectangle .font h4 { }
		.rectangle .font p { font-size: 0.8rem; line-height: 1rem;}
		.rectangle .font .price { margin: 1vw;}
		.rectangle img { width: 40vw; height: 40vw;}

	}


/* AD */
.banner-title{ padding: 20px 0 10px; text-align: center;}
.banner-title:before,.banner-title:after{ content:url(../images/bn-t.png); padding: 10px 20px;}
.banner {width: 1160px; display: flex;justify-content: center; margin: 0 auto 20px;}
.banner ul{ display: flex; flex-wrap: wrap; justify-content: center;background: url(../images/bg02.jpg) top center repeat;border: double 6px #8dd3cf;border-radius: 20px;padding: 20px;margin: 6px;}
.banner ul li{ margin: 4px}
.banner ul li img { width: 538px; }
.banner-nobg { width: 1200px;}
.banner-nobg ul{ background: none;border: double 0px #ef5e2e;padding:0px  20px;margin: 6px;}
.banner-nobg ul li{ margin: 10px}
.banner-nobg ul li img { width: 554px;}
@media screen and ( max-width: 768px ){	
/* AD */
.banner-title:before,.banner-title:after{ content: ' ⧫⧫⧫⧫⧫ '; color: #f8c119; padding: 0;}
.banner { margin: 0; padding: 0; overflow: hidden;background:none; padding-bottom:0px; width: 100%; min-width: 100%;}
.banner ul{ margin: 0; padding: 1vw 1vw;}
.banner ul li {overflow: hidden; float: none; }
.banner ul li {width: 96%; margin: 0.5vw; }
.banner ul li img {width: 100%; }	
}




/*--goto top--*/
#gotop {
  display: inline-block;
  background-color: #000;
  opacity:0.3;
  width: 40px;
  height: 40px;
  text-align: center;
  border-radius: 100%;
  position: fixed;
  bottom: 0px;
  right: 0px;
  transition: background-color .3s, 
    opacity .5s, visibility .5s;
  opacity: 0;
  visibility: hidden;
  z-index: 1000;
  margin: 30px;
}
@media screen and ( max-width: 768px ){
#gotop {
  bottom: 2vw;
  right: 0;
  margin: 2vw;	
	}
  	
}

#gotop::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:50%;background-position:50% 20%;
}
#gotop:hover {
  cursor: pointer;
  background-color: #666;
}
#gotop:active {
  background-color: #666;
}
#gotop.show {
  opacity: 0.4;
  visibility: visible;
}