@charset "utf-8";


/***********************************************************
////////////////////////////////////////////////////////////

@ MOBILE SIZE

////////////////////////////////////////////////////////////
***********************************************************/

/****************************
  00 header
****************************/
#header {
	
}

/*** main ***/
#header .main {
	background: #eee;
}
#header .main .slide {
	
}
#header .main .slide .slick {
	
}
#header .main .slide .slick .item {
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
}

#header .main .slide .slick .item a {
	display: block;
	transition: all 0.2s linear;
	-webkit-backface-visibility: hidden;
}
#header .main .slide .slick .item a:hover {
	background: rgba(255,255,255,0.4);
}

#header .main .title {
	max-width: none;
	padding: 0;
}


/* slide style overwrite. */
#header .main .slide .slick ul.slick-dots {
	position: absolute;
	left: 0;
	bottom: 16px;
	width: 100%;
	text-align: center;
	pointer-events: none;
}
#header .main .slide .slick ul.slick-dots li {
	display: inline-block;
	margin: 0 4px;
	pointer-events: auto;
}
#header .main .slide .slick ul.slick-dots li button {
	position: relative;
	font-size: 0;
	line-height: 0;
	display: block;
	width: 20px;
	height: 20px;
	padding: 5px;
	cursor: pointer;
	color: transparent;
	border: 0;
	outline: none;
	background: transparent;
}
#header .main .slide .slick ul.slick-dots li button:hover,
#header .main .slide .slick ul.slick-dots li button:focus {
    outline: none;
}
#header .main .slide .slick ul.slick-dots li button:hover:before,
#header .main .slide .slick ul.slick-dots li button:focus:before {
    opacity: 1;
}
#header .main .slide .slick ul.slick-dots li button:before {
	content: "●";
	font-size: 16px;
	line-height: 20px;
	position: absolute;
	top: 0;
	left: 0;
	width: 20px;
	height: 20px;
	color: #fff;
	text-align: center;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
#header .main .slide .slick ul.slick-dots li.slick-active button:before {
	color: #3dff00;
}


/****************************
  02 content
****************************/
#content {
	padding: 40px 0 30px;
}




/****************************
  01 links
****************************/
#links {
	margin: 0 0 40px;
}

/*** list ***/
#links ul.list {
	font-size: 0;
	margin: 0 20px;
}
#links ul.list li {
	width: 100%;
	display: inline-block;
}



/****************************
  02 news
****************************/
#news {
	margin: 0 0 40px;
}

/*** title ***/
#news .title {
	width: 30%;
	max-width: 110px;
	margin: 0 auto 10px;
}

/*** list ***/
#news dl.list {
	max-width: 520px;
	margin: 0 auto 0;
	border-bottom: 1px dotted #1e7b00;
}
#news dl.list dt,
#news dl.list dd {
	font-size: 86%;
}
#news dl.list dt {
	
}
#news dl.list dd {
	margin: 0 0 1.0em;
}



/****************************
  03 pickup
****************************/
#pickup {
	margin: 0 0 80px;
	padding: 0 0 45%;
	
	background-size: 40% auto;
	background-repeat: no-repeat;
	background-position: 90% 100%;
	background-image: url(../img/pcup_background.png);
}

/*** item ***/
#pickup .item {
	display: table;
}
#pickup .item .box_photo,
#pickup .item .box_detail {
	display: table-cell;
	vertical-align: top;
}

/** box_photo **/
#pickup .item .box_photo {
	/*width: 42%;*/
	width:34%;
}
#pickup .item .box_photo .image {
	width: 96%;
}

/** box_detail **/
#pickup .item .box_detail {
	
}
#pickup .item .box_detail .detail {
	width: 98%;
}

/* title */
#pickup .item .box_detail .detail .title {
	width: 95%;
	margin: 0 0 30px;
}
#pickup .item .box_detail .detail .title .image {
	width: 90%;
	margin: 60px auto 0px;
}

/* text */
#pickup .item .box_detail .detail .text {
	/*width: 95%;*/
	width: 90%;
	margin: 10px auto 30px;
}
#pickup .item .box_detail .detail .text .image {
	
}

/** button **/
#pickup .item .box_detail .button {
	width: 95%;
	margin: 0 auto 30px;
}
#pickup .item .box_detail .button .label {
	width: 60%;
	margin: 0 auto;
}


/****************************
  04 slides
****************************/
#slides {
	margin: 0 0 -15%;
	padding: 0 0 45%;
	
	background-size: 40% auto;
	background-repeat: no-repeat;
	background-position: 0% 90%;
	background-image: url(../img/slds_background.png);
}


/** box_drink **/
#slides .box_drink {
	position: relative;
	margin: 0 10px 60px;
	padding: 80px 0 20px;
	background: rgba(255,255,255,0.5);
	box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.3);
}

/* title */
#slides .box_drink .title {
	position: absolute;
	left: 0;
	top: -45px;
	width: 100%;
}
#slides .box_drink .title .image {
	max-width: 340px;
	margin: 0 auto 0;
}

/* read */
#slides .box_drink .read {
	width: 100%;
	margin: 0 auto 20px;
}
#slides .box_drink .read .text {
	color: #1e7b00;
	font-size: 92%;
	text-align: center;
	padding: 0 20px;
}


/** box_leaf **/
#slides .box_leaf {
	position: relative;
	margin: 0 10px 20px;
	padding: 80px 0 20px;
	background: rgba(255,255,255,0.5);
	box-shadow: 0px 0px 4px 2px rgba(0,0,0,0.3);
	z-index: 999;
}

/* title */
#slides .box_leaf .title {
	position: absolute;
	left: 0;
	top: -45px;
	width: 100%;
}
#slides .box_leaf .title .image {
	max-width: 340px;
	margin: 0 auto 0;
}

/* read */
#slides .box_leaf .read {
	width: 100%;
	margin: 0 auto 10px;
}
#slides .box_leaf .read .text {
	color: #1e7b00;
	font-size: 92%;
	text-align: center;
	padding: 0 20px;
}

/* tab */
#slides .box_leaf ul.tab {
	width: 100%;
	text-align: center;
	margin: 0 auto 20px;
}
#slides .box_leaf ul.tab li {
	display: inline-block;
	color: #1e7b00;
	font-size: 86%;
	padding: 0 0.2em;
	text-decoration: underline;
	cursor: pointer;
}
#slides .box_leaf ul.tab li.active {
	color: #73df50;
	text-decoration: none;
}



/*** slide ***/
#slides .slide {
	margin: 0 auto 0;
}
#slides .slide .slick {
	
}
#slides .slide .slick .item {
	
}
#slides .slide .slick .item .image {
	margin: 0 0 10px;
	padding: 20px 10px;
	/*transition: all .5s ease-out;*/
}
#slides .slide .slick .item .label {
	display: none;
	opacity: 0;
	margin: 0 -60px 10px;
	transition: all .5s ease-out;
}
#slides .slide .slick .item .detail {
	display: none;
	opacity: 0;
	margin: 0 -40px 0;
	transition: all .5s ease-out;
}


/* slide style overwrite. */
#slides .slide .slick button.slick-arrow {
	position: absolute;
	top: 40%;
	font-size: 0;
	border: none;
	background: none;
	width: 32px;
	height: 32px;
	margin: -16px 0 0;
	background-size: cover;
	background-repeat: no-repeat;
	background-position: center center;
	z-index: 999;
	outline: none;
	cursor: pointer;
}
#slides .slide .slick button.slick-prev {
	left: 28%;
	background-image: url(../img/slds_btn_prev.png);
}
#slides .slide .slick button.slick-next {
	right: 28%;
	background-image: url(../img/slds_btn_next.png);
}

#slides .slide .slick .slick-current .image {
	padding: 0;
}

#slides .slide .slick .slick-current .label,
#slides .slide .slick .slick-current .detail {
	display: block;
	opacity: 0;
}




/****************************
  05 about
****************************/
#about {
	position: relative;
	margin: 0 0 40px;
}

/*** title ***/
#about .title {
	/*margin: 0 0 -20px;*/
}
#about .title .image {
	width: 70%;
	max-width: 250px;
	margin: 0 auto 0;
}

/*** block_table ***/
#about .block_table {
	padding: 40px 5px 10px;
	margin: 0 auto;
	border: 1px dotted #1e7b00;
}
#about .block_table .block_row {
	
}
#about .block_table .block_row .block_col {
	padding: 5px 5px;
}
#about .block_table .block_row .block_col .block {
	
}



/****************************
  06 gallery
****************************/
#gallery {
	position: relative;
	margin: 0 0 50px;
}

/*** title ***/
#gallery .title {
	margin: 0 0 20px;
}
#gallery .title .image {
	max-width: 480px;
	margin: 0 auto;
}

/*** block_table ***/
#gallery .block_table {
	
}
#gallery .block_table .block_row {
	
}
#gallery .block_table .block_row .block_col {
	
}
#gallery .block_table .block_row .block_col .block {
	margin: 0 0 20px;
}
#gallery .block_table .block_row .block_col .block .thumb {
	
}
#gallery .block_table .block_row .block_col .block .capt {
	color: #1e7b00;
	font-size: 86%;
	padding: 10px 0;
	text-align: center;
}



/****************************
  07 discover
****************************/
#discover {
	position: relative;
	margin: 0 0 60px;
}

/*** title ***/
#discover .title {
	margin: 0 0 20px;
}
#discover .title .image {
	max-width: 480px;
	margin: 0 auto;
}

/*** block_table ***/
#discover .block_table {
	display: block;
}
#discover .block_table .block_row {
	display: table;
	width: 100%;
}
#discover .block_table .block_row .block_col {
	display: table-cell;
	vertical-align: top;
	border-right: 1px dotted rgba(30,123,0,0);
}
#discover .block_table .block_row .block_col:nth-child(odd) {
	border-right: 1px dotted #1e7b00;
}
#discover .block_table .block_row .block_col .block {
	
}
#discover .block_table .block_row .block_col .block .label {
	
}



/****************************
  08 like
****************************/
#like {
	position: relative;
	margin: 0 0 80px;
}

/*** title ***/
#like .title {
	margin: 0 0 20px;
}
#like .title .image {
	max-width: 480px;
	margin: 0 auto;
}

/*** block_table ***/
#like .block_table {
	display: block;
}
#like .block_table .block_row {
	display: table;
	width: 100%;
}
#like .block_table .block_row .block_col {
	display: table-cell;
	vertical-align: top;
	border-right: 1px dotted rgba(30,123,0,0);
}
#like .block_table .block_row .block_col:nth-child(odd) {
	border-right: 1px dotted #1e7b00;
}
#like .block_table .block_row .block_col .block {
	
}
#like .block_table .block_row .block_col .block .label {
	
}



/****************************
  09 poem
****************************/
#poem {
	position: relative;
	margin: 0 0 30px;
}
#poem .label {
	max-width: 700px;
	margin: 0 auto;
}

#poem .label a {
	display: block;
	color: #333;
}
#poem .label li {
	list-style: none;
	position: relative;
	text-align: center;
}
#poem .label li img {
	width: 100%;
	height: auto;
	display: block;
}
#poem .label .t.title {
	position: relative;
}
#poem .label .t.title span {
	height: 32px;
	line-height: 1;
    position: absolute;
    display: block;
    text-align: center;
    width: 100%;
    vertical-align: middle;
    left: 0;
    top: 25%;
    font-size: 1.2em;
}
#poem .label .t.body {
	position: relative;
}
#poem .label .t.body span {
	height: 32px;
	line-height: 1;
    position: absolute;
    display: block;
    text-align: center;
    width: 100%;
    vertical-align: middle;
    left: 0;
    top: 25%;
    font-size: 0.8em;
}



/****************************
  10 banners
****************************/
#banners {
	margin: 0 0 30px;
}

/*** block_table ***/
#banners .block_table {
	display: block;
}
#banners .block_table .block_row {
	display: table;
	width: 100%;
}
#banners .block_table .block_row .block_col {
	display: table-cell;
	padding: 5px 5px;
}
#banners .block_table .block_row .block_col .block {
	
}
#banners .block_table .block_row .block_col .block .label {
	
}









/***********************************************************
////////////////////////////////////////////////////////////

@ MIDDLE MOBILE DEVICES

////////////////////////////////////////////////////////////
***********************************************************/
@media only screen and (min-width: 321px) {
	
	
	
}





/***********************************************************
////////////////////////////////////////////////////////////

@ LARGER MOBILE DEVICES

////////////////////////////////////////////////////////////
***********************************************************/
@media only screen and (min-width: 481px) {
	
	
	
}





/***********************************************************
////////////////////////////////////////////////////////////

@ TABLET & SMALLER LAPTOPS

////////////////////////////////////////////////////////////
***********************************************************/
@media only screen and (min-width: 768px) {
	
	/****************************
	  01 links
	****************************/
	#links {
		
	}
	#links .inner {
		max-width: 1024px;
	}
	
	/*** list ***/
	#links ul.list {
		display: table;
	}
	#links ul.list li {
		display: table-cell;
		/*width: 33.33%;*/
		width: 25%;
	}
	
	
	/****************************
	  02 news
	****************************/
	#news {
		margin: 0 0 -30px;
	}
	
	/*** title ***/
	#news .title {
		margin: 0 auto 20px;
	}
	
	/*** list ***/
	#news dl.list {
		
	}
	#news dl.list dt,
	#news dl.list dd {
		display: inline-block;
		font-size: 86%;
	}
	#news dl.list dt {
		width: 15%;
	}
	#news dl.list dd {
		width: 85%;
	}
	
	
	/****************************
	  03 pickup
	****************************/
	#pickup {
		background-size: 25% auto;
		margin: 0 0 -10%;
		padding: 0 0 15%;
	}
	
	/*** item ***/
	#pickup .item {
		
	}
	#pickup .item .box_photo,
	#pickup .item .box_detail {
		
	}
	
	/** box_photo **/
	#pickup .item .box_photo {
		/*width: 30%;*/
		width: 30%;
	}
	#pickup .item .box_photo .image.pc {
		width: 100%;
	}
	
	/** box_detail **/
	#pickup .item .box_detail {
		vertical-align: middle;
	}
	#pickup .item .box_detail .detail {
		display: table;
		width: 100%;
	}
	
	/* title */
	#pickup .item .box_detail .detail .title {
		display: table-cell;
		width: 45%;
		vertical-align: middle;
	}
	#pickup .item .box_detail .detail .title .image.pc {
		
	}
	
	/* text */
	#pickup .item .box_detail .detail .text.pc {
		display: table-cell;
		width: 55%;
		vertical-align: middle;
	}
	#pickup .item .box_detail .detail .text .image {
		padding: 0 20px;
	}
	
	/** button **/
	#pickup .item .box_detail .button {
		width: 80%;
		padding: 40px 0 0;
	}
	#pickup .item .box_detail .button .label {
		width: 40%;
		margin: 0 auto;
	}
	
	
	/****************************
	  04 slides
	****************************/
	#slides {
		margin: 0 0 -20%;
		padding: 0 0 35%;
	}


	/** box_drink **/
	#slides .box_drink {
		float: left;
		width: 49%;
		margin: 0;
		padding: 110px 0 30px;
		z-index: 999;
	}

	/* title */
	#slides .box_drink .title {
		
	}
	#slides .box_drink .title .image {
		max-width: 420px;
	}

	/* read */
	#slides .box_drink .read {
		
	}
	#slides .box_drink .read .text {
		font-size: 86%;
	}


	/** box_leaf **/
	#slides .box_leaf {
		float: right;
		width: 49%;
		margin: 15% 0 0;
		padding: 110px 0 30px;
	}

	/* title */
	#slides .box_leaf .title {
		
	}
	#slides .box_leaf .title .image {
		max-width: 420px;
	}

	/* read */
	#slides .box_leaf .read {
		
	}
	#slides .box_leaf .read .text {
		font-size: 86%;
	}

	/* tab */
	#slides .box_leaf ul.tab {
		margin: 0 auto 30px;
	}
	#slides .box_leaf ul.tab li {
		
	}
	#slides .box_leaf ul.tab li.active {
		
	}
	
	/*** slide ***/
	#slides .slide {
		
	}
	#slides .slide .slick {
		
	}
	#slides .slide .slick .item {
		
	}
	#slides .slide .slick .item .image {
		
	}
	#slides .slide .slick .item .label {
		margin: 0 -60px 10px;
	}
	#slides .slide .slick .item .detail {
		margin: 0 -20px 0;
	}



	/****************************
	  05 about
	****************************/
	#about {
		margin: 0 0 60px;
	}

	/*** title ***/
	#about .title {
		/*margin: 0 0 -20px;*/
	}
	#about .title .image {
		max-width: 340px;
	}

	/*** block_table ***/
	#about .block_table {
		padding: 40px 10px 10px;
		display: table;
	}
	#about .block_table .block_row {
		display: table-row;
	}
	#about .block_table .block_row .block_col {
		display: table-cell;
	}
	#about .block_table .block_row .block_col .block {
		
	}
	
	
	/****************************
	  06 gallery
	****************************/
	#gallery {
		margin: 0 0 60px;
	}

	/*** title ***/
	#gallery .title {
		
	}
	#gallery .title .image {
		
	}

	/*** block_table ***/
	#gallery .block_table {
		display: table;
		width: 100%;
	}
	#gallery .block_table .block_row {
		display: table-row;
	}
	#gallery .block_table .block_row .block_col {
		display: table-cell;
		border-right: 1px dotted #1e7b00;
	}
	#gallery .block_table .block_row .block_col:last-child {
		border-right: 1px dotted rgba(30,123,0,0);
	}
	#gallery .block_table .block_row .block_col .block {
		margin: 0;
	}
	#gallery .block_table .block_row .block_col .block .thumb {
		
	}
	#gallery .block_table .block_row .block_col .block .capt {
		font-size: 86%;
	}
	
	
	/****************************
	  07 discover
	****************************/
	#discover {
		margin: 0 0 60px;
	}

	/*** title ***/
	#discover .title {
		margin: 0 0 30px;
	}
	#discover .title .image {
		
	}

	/*** block_table ***/
	#discover .block_table {
		display: table;
		width: 100%;
	}
	#discover .block_table .block_row {
		float: left;
		/*display: block;*/
		width: 50%;
	}
	#discover .block_table .block_row .block_col {
		border-right: 1px dotted #1e7b00;
	}
	#discover .block_table .block_row:last-child .block_col:last-child {
		border-right: 1px dotted rgba(30,123,0,0);
	}
	#discover .block_table .block_row .block_col:nth-child(odd) {
		
	}
	#discover .block_table .block_row .block_col .block {
		
	}
	#discover .block_table .block_row .block_col .block .label {
		
	}
	
	
	
	/****************************
	  08 like
	****************************/
	#like {
		margin: 0 0 100px;
	}

	/*** title ***/
	#like .title {
		margin: 0 0 30px;
	}
	#like .title .image {
		
	}

	/*** block_table ***/
	#like .block_table {
		display: table;
		width: 100%;
	}
	#like .block_table .block_row {
		float: left;
		/*display: block;*/
		width: 50%;
	}
	#like .block_table .block_row .block_col {
		border-right: 1px dotted #1e7b00;
	}
	#like .block_table .block_row:last-child .block_col:last-child {
		border-right: 1px dotted rgba(30,123,0,0);
	}
	#like .block_table .block_row .block_col:nth-child(odd) {
		
	}
	#like .block_table .block_row .block_col .block {
		
	}
	#like .block_table .block_row .block_col .block .label {
		
	}
	
	
	/****************************
	  09 poem
	****************************/
	#poem {
		margin: 0 0 40px;
	}
	
	#poem .label .t.title span {
		font-size: 1.5em;
	}
	#poem .label .t.body span {
		font-size: 1.0em;
	}
	
	
	/****************************
	  10 banners
	****************************/
	#banners {
		margin: 0 0 80px;
	}

	/*** block_table ***/
	#banners .block_table {
		display: table;
		width: 100%;
	}
	#banners .block_table .block_row {
		float: left;
		display: block;
		width: 50%;
	}
	#banners .block_table .block_row .block_col {
		padding: 5px 15px;
	}
	#banners .block_table .block_row .block_col .block {
		
	}
	#banners .block_table .block_row .block_col .block .label {
		
	}
	
	
	
}





/***********************************************************
////////////////////////////////////////////////////////////

@ DESKTOP

////////////////////////////////////////////////////////////
***********************************************************/
@media only screen and (min-width: 1030px) {
	
	
	
}





/***********************************************************
////////////////////////////////////////////////////////////

@ LARGE VIEWING SIZE

////////////////////////////////////////////////////////////
***********************************************************/
@media only screen and (min-width: 1240px) {
	
	
	
}





/***********************************************************
////////////////////////////////////////////////////////////

@ RETINA (2x RESOLUTION DEVICES)

////////////////////////////////////////////////////////////
***********************************************************/
@media only screen and (-webkit-min-device-pixel-ratio: 1.5),
       only screen and (min--moz-device-pixel-ratio: 1.5),
	   only screen and (min-device-pixel-ratio: 1.5) {
	
	
	
}





/***********************************************************
////////////////////////////////////////////////////////////

@ PRINT STYLESHEET

////////////////////////////////////////////////////////////
***********************************************************/
@media print {
	
	
	
}