@charset "utf-8";
/*
=======================================
	Reset CSS
=======================================
*/
html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, figcaption, figure, 
footer, header, main, menu, nav, section, summary,
time, mark, audio, video{
	margin:0;
	padding:0;
}

article,aside,details,figcaption,figure,
footer,header,main,menu,nav,section{
	display:block;
}

html{
	-webkit-text-size-adjust: 100%;
}

body{
	font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", HelveticaNeue, "Segoe UI", "游ゴシック体", YuGothic, "Yu Gothic M", "游ゴシック Medium", "Yu Gothic Medium", "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN W3", HiraKakuProN-W3, "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	background: #FFFFE0;
	-webkit-animation: fadeIn 2s ease 0s 1 normal;
}

@keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}

@-webkit-keyframes fadeIn {
    0% {opacity: 0}
    100% {opacity: 1}
}


img{
	border: 0;
	max-width: 100%;
	height: auto;
}

ul,ol{
	list-style-type: none;
}

table {
	border-collapse: collapse; 
	border-spacing: 0;
}

img, input, select, textarea { 
	vertical-align: middle;
}

a{
	text-decoration:none;
	transition : all 0.5s linear 0s;
	}

a:hover img{
	opacity:0.8;}


/*
=========================================
	Base Layout
=========================================
*/
/*ALL and Smart Phone*/

.cd-container{
	max-width:940px;
	padding-left: 10px;
	padding-right: 10px;
	margin: 0 auto;
}

.cd-container:after{
	content:"";
	display: block;
	clear:both;
	}

/*
=========================================
	Modules（Block）
=========================================
*/

/*背景を切り替える*/

.cd-fixed-bg {
	min-height: 100%;
	background-size: cover;
	background-attachment: fixed;
	background-repeat: no-repeat;
	background-position: center center;
}

.cd-fixed-bg.cd-bg-1 {
	background-image: url("img/cafe_t.jpg");
	background-size:cover;
}
.cd-fixed-bg.cd-bg-2 {
	background-image: url("item/penstand.jpg");
	background-size:cover;
}
.cd-fixed-bg.cd-bg-3 {
	background-image: url("img/shop_out.jpg");
	background-size:cover;
}
.cd-fixed-bg.cd-bg-4 {
	background-image: url("img/tanpopo.jpg");
	background-size:cover;
	height:400px;
	width:100%;
}

.cd-scrolling-bg {
	min-height: 100%;
}

/* スライドショー */

	.bxslider4 .bxslider {
		max-width: 1000px;
		width: 100%;
		margin: 0 auto;
	}
	.bxslider4 ul li img {
		width: 100%;
		height: auto;
	}
	.bxslider4 .bxslider_caption {
		opacity: 0;
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		background: rgba(0,0,0,0.8);
		color: #fff;
	}
	.bxslider4 .bxslider_caption > div {
		padding: 10px;
		font-size:0.8em;
	}
	.bxslider4 .bxslider_caption h4 {
		font-size: 1.1em;
		font-weight: bold;
	}

/*header
--------------------*/
#header{
	position:relative;
	overflow:hidden;
	text-align:center;
	}

/*上部ドロップメニューボタン*/

ul#menu {
	width:960px; height:100%; 	/*メインメニュー部分の幅と高さ*/
	text-align:center;
	margin:0 auto;
	margin-top:32px;
	margin-bottom:32px;
	}

#menu li {
	list-style-type:none;		/*リストマーカー無しにする*/
	display:inline;			/*リスト項目をインライン表示にする*/
	float:left;			/*リスト項目を横に並べる*/
}
#menu li a {
	color:#ffffff;			/*文字色*/
	font-family:'Yu Gothic','YuGothic';
	font-size:1.1em;
	display:block;			/*リンク部分をブロック表示にする*/
	width:240px; height:82px;	/*幅と高さ*/
	padding:8px 0px 0px 0px;	/*上パディング*/
	text-align:center;		/*テキストをセンター揃えにする*/
	text-decoration:none;		/*リンク部分を下線無しにする*/
	line-height:80px;
	font-weight:bold;}

#menu .kitchen a{
	background:url(item/cap_A.jpg) no-repeat;
	background-size:150%;
	}

#menu .stationary a{
	background:url(item/magnet_03..jpg) no-repeat;
	background-size:150%;
	}

#menu .goods a{
	background:url(item/candle_01.jpg) no-repeat;
	background-size:150%;
	}

#menu li a:hover {
	opacity:0.6;}

#menu li a{
	background:#708090;}


/*ドロップダウンメニューここまで*/

/*タイトル画像*/

#title h1{
	font-family:'Yu Gothic','YuGothic';
	font-size: 1em;
	}

#title{
	height:315px;}

#main{
	clear:both;}

h2{ /*見出し2　背景切り替え*/
	height:240px;
	width:100%;
	text-align: center;
	padding-top: 190px;
	font-family:'Hiragino Kaku Gothic Pro','Meiryo';
	font-size:2em;
	letter-spacing: 1.5em;
	white-space: nowrap;
	background:rgba(255,255,255,0.2);
	}

.shiro{
	text-align: center;
	padding:15px 0 10px 50px;
	border-radius: 15px;
	background:rgba(255,255,255,0.7)
	}

.cd-container{
	padding:50px;
	margin:0 auto;
	width: 800px;
	letter-spacing: 8px;
	}

p{
	padding-top:20px;
	padding-bottom:30px;
	font-family:'Yu Gothic','YuGothic';
	font-size:1.2em;
	}

p a{
	font-weight:bold;
	transition : all 1s linear 0s;
	color:#708090;
	}

p a:hover{
	color:#fff;
}

#first_comment{
	margin:0 auto;
	text-align: center;
	}


#info{
	margin-top:20px;
	overflow:hidden;
	}

#info p{
	width: 550px;
	float:left;
	padding:20px;
	margin-top:20px;
	}

#info p span{
	font-weight:bold;
	padding: 0.5em;/*文字周りの余白*/
	color: #494949;/*文字色*/
	border-left: solid 5px #ffaf58;/*左線（実線 太さ 色）*/
	}

#info img{
	float:left;
	margin-right:40px;
	}

#google{
	float:right;
	}

#google iframe{
	width:100%;
	height:100%;}

#last_comment{
	margin-top:50px;
	text-align:center;
	}

#footer{
	clear: both;
	margin-top:30px;
	}

#footer_menu{
	position: fixed;
	right:0;
	bottom:0;
	}

#logo_bottom{
	padding:0;
	margin-bottom:20px;
	text-align:center;
	}

#copyright{
	font-size: 1.1em;
	text-align:center;
	}
	

/*商品一覧アイテムリスト*/
ul{
	overflow:hidden;
	text-align:center;
	margin:0 auto;
	}

.itemlist {
max-width: 1024px;
margin: 0 auto;
}

.itemlist li {
float: left;
width: 400px;
margin:0 26px 0 26px;
padding: 30px;
}
.itemlist dl,
.itemlist dd {
margin: 0;
}
.itemlist dl {
text-align: right;
}
.itemlist dt,
.itemlist .txt {
text-align: left;
	font-family:'Yu Gothic','YuGothic';
}
.itemlist dt {
font-size: 1.5em;
font-weight: 700;
}
.itemlist dd {
margin-top: .2em;
font-size: 1em;
padding-top:10px 10px 20px 10px;
}
.itemlist img {
width: 100%;
height: auto;
max-width:100%;
height:auto;
}
.itemlist{
	list-style:none;
	}

.itemlist li{
	float:left;}

.itemlist li:nth-child(2n+1){
	clear: left;
	}

.itemlist li img{
	width:400px;
	height:320px;}


.itemlist{
	text-align:center;}

dt span{
	font-size: 0.5em;/*フォントサイズ*/
	color:#cc0066;}


.ribbon {
    display: inline-block;
    position: relative;
    height: 60px;
    width:400px;
    line-height: 60px;
    vertical-align: middle;
    text-align: center;
    padding: 0;
    font-size: 2em;/*フォントサイズ*/
    background: #62c1ce;/*背景色*/
    color: #FFF;/*文字色*/
    box-sizing: border-box;
}

.ribbon h3 {
    vertical-align: middle;
    margin:auto 0;
    border-top: dashed 1px #FFF;/*上の破線*/
    border-bottom: dashed 1px #FFF;/*下の破線*/
    line-height: 46px;
}

.ribbon:before, .ribbon:after{
  position: absolute;
  content: '';
  width: 0px;
  height: 0px;
  z-index: 2;
}

.ribbon:before{/*左端の山形*/
  top: 0;
  left: 0;
  border-width: 30px 0px 30px 15px;
  border-color: transparent transparent transparent #FFFFE0;
  border-style: solid;
}

.ribbon:after{/*右端の山形*/
  top: 0;
  right: 0;
  border-width: 30px 15px 30px 0px;
  border-color: transparent #FFFFE0 transparent transparent;
  border-style: solid;
}

.checkpoint {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #62c1ce;
    width:100%;
    
}
.checkpoint .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    vertical-align: middle;
    font-size: 17px;
    background: #62c1ce;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.checkpoint p {
    margin: 0; 
    padding: 0;
    text-align:left;
    font-size: 0.9em;

}