/* memo
font-family: 'Libre Baskerville', serif;
400,400italic,700
font-family: 'Lato', sans-serif;
400 700
color 
blue #1c7ec0
brown #422d0b
orange #F54D00
-------------------------------------------------------------- */

/* COMMON
-------------------------------------------------------------- */
br.clear{clear:both;}
.float-right{float:right;margin:0px 0px 8px 8px;}
.float-left{float:left;margin:0px 8px 8px 0px;}
.justify{text-align: justify;text-justify: inter-ideograph;-ms-text-justify: inter-ideograph;}
img{-ms-interpolation-mode: bicubic; }
.sans-serif_jp{ font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;}
.self_jp{font-family:"游明朝",YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Times New Roman",  "メイリオ", Meiryo, serif;}
a:focus {outline:none;}
a{text-decoration: none; outline:none; color: #1c7ec0;}
a:hover{ text-decoration: none; color: #F54D00;}
a:hover img {opacity: .5;-webkit-opacity: .5;-moz-opacity: .5;filter: alpha(opacity=50);-ms-filter: "alpha(opacity=50)";}
a img {-webkit-transition: opacity 1s ease-out;-moz-transition: opacity 1s ease-out;-ms-transition: opacity 1s ease-out;transition: opacity 1s ease-out;}


/* LAYOUT
-------------------------------------------------------------- */
body{ background: #fffff2; font-size: 13px; line-height: 1.8em; font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ ProN W3","Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif; color:#422d0b }
body,html{ height: 100%}

/* header */
/*
nav#menu ul{ width: 330px;margin: 0 auto;}
nav#menu ul li{ float: left; margin-left: 44px; vertical-align: middle; text-align: center;}
nav#menu ul li:first-child{ margin-left: 0}
*/
nav#menu ul{ margin: 0 auto; text-align: center;}
nav#menu ul li{ display: inline-block; vertical-align: middle; text-align: center; padding: 0 22px;}
nav#menu ul li a{font-family: 'Libre Baskerville', serif; color: #422d0b; font-size: 12px; font-weight: 700;}
nav#menu ul li a:hover{ color: #1c7ec0}
h1{ background: url(../images/logo.svg) no-repeat; background-size: 221px 191px;  text-indent: -99999px; width: 221px; height: 191px; margin: 0 auto 50px auto;}
header h1{ margin-top: 50px;}
div#sns{background: #422d0b; width: 100%; position: fixed; bottom: 0; height: 35px; position: relative; text-align: right; }
div#sns ul{ display: table; text-align: right; float: right; padding-right: 20px;}
div#sns ul li{ display: table-cell; height: 40px; vertical-align: middle; padding-left: 15px;}
div#sns ul li a{ font-size: 1.6em; color: #fffff2}
div#sns ul li a:hover{ color: #1c7ec0}

/* contents */
div#container{ width: 800px; margin: 0 auto; padding: 45px 0 100px 0;}
main#left_cont{ width: 550px; float: left}
aside#right_cont{ width: 200px; float: right;}

/* footer */
footer{ background: #422d0b; width: 100%; height: 35px;text-align: center;padding-top: 5px}
footer small{font-family: 'Lato', sans-serif; font-size: 10px; color: #fffff2; letter-spacing: 1px; }

/* Index
-------------------------------------------------------------- */
div#index_wrapper{ width: 100%; height: 100%; background: url(../images/pattern.png) }
section#index_logo{ width: 330px; height: 250px;position: absolute; top:0; left:0; right:0; bottom:0; margin:auto; }
footer#index_footer{ position: fixed; bottom: 0;  }
video { display: block; }
video#bgvid {position: fixed; right: 0; bottom: 0;min-width: 100%; min-height: 100%;width: auto; height: auto; z-index: -100;background: url(../polina.jpg) no-repeat;background-size: cover;}


/* Contents
-------------------------------------------------------------- */

/*------- Shop ----- */
section#shop_coffee{ margin-bottom: 60px;}
ul.slides{ padding-bottom: 40px;  width: 780px;}
ul.slides img{ width: 780px; width: auto; margin-bottom: 40px;}
h2.shop_title{ text-align: center; margin-bottom: 30px;}
p.shop_lead{ text-align: center;font-family:"游明朝",YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Times New Roman",  "メイリオ", Meiryo, serif;}
dl.cafe_menu{ float: left; margin-left: 80px;font-family:"游明朝",YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Times New Roman",  "メイリオ", Meiryo, serif;}
dl.cafe_menu dt{margin-bottom: 0.5rem;}
dl.cafe_menu dt span{ background: #422d0b;font-family: 'Lato', sans-serif; color: #fffff2; padding: 2px; font-size: 1rem; }
dl#cafe_menu_drink{margin-left: 60px;}
dl.cafe_menu dd ul li{ list-style: disc; list-style-position: inside; white-space: nowrap;}
section#shop_utsuwa{ margin-bottom: 60px;}
ul#artist_list{width: 696px; margin: 0 auto;}
ul#artist_list li{ display: inline-block; width: 192px; vertical-align: top; padding: 0 20px 35px 20px; outline: none;}
ul#artist_list li img{ max-width: 192px;outline: none;}
p#map{ float: left;}
div#access_box{ float: right; width: 380px;}
div#access_text{ background: #1c7ec0; color: #fffff2; padding: 10px 20px; width: 280px; margin-top: 1rem;}
address{ font-style: normal;}

/*------- Blog ----- */
article.blog_cont{ margin-bottom: 10rem;}
article.blog_cont h2{ border-bottom: 1px solid #422d0b; padding-bottom: 0.5rem; margin-bottom: 1rem;}
article.blog_cont h2 span{font-family: 'Lato', sans-serif; color:#422d0b; display: block;  font-size: 0.75rem;}
article.blog_cont h2{color:#422d0b;}
article.blog_cont h2 a{color:#422d0b;}
article.blog_cont h2 a:hover{color:#1c7ec0}
div.blog_body img{ max-width: 550px; height: auto; }
div.blog_body p{margin-bottom: 1.5rem;}
ul.right_list > li{ margin-bottom: 3rem;}
ul.right_list > li h3{ margin-bottom: 1rem; background: #422d0b; color: #fffff2; text-align: center; padding: 3px;font-family:"游明朝",YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "Times New Roman",  "メイリオ", Meiryo, serif;}
ul.right_list > li ul{ padding: 0 }
ul.right_list > li ul li{  border-bottom: 1px solid #422d0b;  text-align: center; font-size: 0.75rem;}
ul.right_list > li ul li a{ display: block; color:#422d0b; padding: 0.7rem 0rem ; }
ul.right_list > li ul li a:hover{background: #F54D00;color: #fffff2}
ul#blog_cat li{ border-bottom: none;}
ul#blog_link li{ margin-bottom: 0.7rem; }
ul#blog_link a{font-family: 'Lato', sans-serif; font-weight: 700; font-size: 1rem; display: block;}
ul#blog_link a span{ font-size: 1.5rem;}
ul#blog_link li#link_online{}
ul#blog_link li#link_online a{ display: block; background: url(../images/link_online.svg) no-repeat; width: 200px; height: 65px; text-indent: -99999px;}
ul#blog_link li#link_online a:hover{ background: url(../images/link_online2.svg) no-repeat}

/*------- Online store ----- */
section#online_news{ background: #e6dfd3; padding: 30px; margin-bottom: 3rem;}
section#online_news a{ color: #422d0b }
section#online_news a:hover{color: #1c7ec0}
section#online_news h2{ float: left}
div#news_cont{ float: right; width: 400px; height: 140px; overflow: auto;}
section#recommend h2{ text-align: center; margin-bottom: 1em;}

ul.online_list{ width: 555px; font-size: 0}
ul.online_list li{ width: 180px; display: inline-block; font-size: 13px;  margin-right: 5px; outline: none; border: none; margin-bottom: 30px; vertical-align: top;}
ul.online_list li:nth-child(3n){}
ul.online_list li a{ display: block; width: 180px; color: #422d0b}
ul.online_list li img {max-width: 180px; height: auto}
ul.online_list figure {position: relative;  margin: 0; padding: 0;}
ul.online_list figcaption {width: 180px;}
ul.online_list figcaption h3{ padding: 0px;}
ul.online_list figcaption p{ padding: 0px}

/* オンマウスで表示バージョン
ul.online_list{ width: 555px; margin-left: -5px;}
ul.online_list li{ width: 180px; height: 180px; float: left; margin-left: 5px; outline: none; border: none; margin-bottom: 5px;}
ul.online_list li a{ display: block; width: 180px; height: 180px;}
ul.online_list li img {max-width: 180px; height: auto}
ul.online_list li a:hover img {opacity: 1;-webkit-opacity: 1;-moz-opacity: 1;filter: alpha(opacity=100);	-ms-filter: "alpha(opacity=100)";}
ul.online_list figure {position: relative; overflow: hidden;width: 180px;height: 180px; margin: 0; padding: 0;}
ul.online_list figcaption {position: absolute;top: 0;left: 0;z-index: 2;width: 180px;height: 180px;background: rgba(28,126,192,.8);-webkit-transition: .3s;transition: .3s;opacity: 0;color:#fffff2}
ul.online_list figure:hover figcaption {opacity: 1; cursor: pointer;}
ul.online_list figcaption h3{ padding: 10px;}
ul.online_list figcaption p{ padding: 0 10px}
*/

li#bt_cart{margin-bottom: 1rem;}
li#bt_cart a{ display: block; background: url(../images/bt_cart.svg) no-repeat center center; height: 50px; text-indent: -99999px;}
li#bt_cart a:hover{ background: url(../images/bt_cart2.svg) no-repeat center center;}
li#search{ margin-bottom: 2rem; border: 2px solid #422d0b; width: 196px; padding: 3px 0px;}
li#search input[type="text"]{ font-size: 1em; border: none; padding: 0px 5px; width: 160px; height: 1rem; background: none; }
li#search input[type="image"]{ float: right; margin-top: 3px; display: block; margin-right: 8px;}
li#online_information{ background: #e6dfd3; padding: 15px 20px;}
li#online_information ul li{ list-style: disc; text-align: left; list-style-position: inside; border: none; margin: 0; padding: 3px 0;}
li#online_information ul li a {display: inline; background: none; font-size: 0.9em;}
li#online_information ul li a:hover{ color: #F54D00}
section#list_page h2{ font-size: 1rem; border-bottom: 1px solid #422d0b; color: #422d0b;padding-bottom: 0.5rem; padding-left: 5px;}
p#pankuzu a {color:#422d0b}
p#pankuzu a:hover {color:#1c7ec0}
section#list_page p#pankuzu{ font-size: 0.75rem; padding-left: 5px; margin-bottom: 2rem; padding-top: 3px;}
div#photo_container{ margin-bottom: 23px; position: relative; width: 550px; height: 440px;}
#thumbnail{position: absolute; top:0; right:-111px; width: 108px; height: 440px; overflow: hidden;}
#thumbnail li{ width: 108px; padding:0; margin-bottom: 3px; line-height: 0;}
#thumbnail li img{width: 108px; padding: 0; margin: 0; }
#thumbnail li.current img{opacity: 1; filter: alpha(opacity=100);}
#main_photo{ float: left; position: relative; width: 440px; }
#main_photo img{ position: absolute; top:0; width: 440px;  }
article#detail_page h2{ font-size: 1.1rem; color:#422d0b; border-bottom: 3px solid #422d0b; padding-bottom: 0.5em; }
article#detail_page p#pankuzu{ text-align: right; font-size: 0.7rem;color:#422d0b;}
div#online_detail_text{ margin-top: 1rem;}
div#online_detail_info{ background: #e6dfd3; padding: 30px 40px; margin-bottom: 5rem; margin-top: 1rem;}
ul#online_detail_info_left{ float: left; color:#422d0b }
ul#online_detail_info_left li{ margin-bottom: 5px;}
ul#online_detail_info_left li#option_link{}
ul#online_detail_info_left li#option_link a{background: #1c7ec0; color: #fffff2;padding: 6px 3px; font-size: 0.7rem;}
ul#online_detail_info_left li#option_link a:hover{background: #F54D00}
ul#online_detail_info_right{ float: right;}

li#cart input{ background: url(../images/bt_addtocart.svg) no-repeat; width: 210px; height: 57px; border: none; text-indent: -99999px; margin-bottom: 1em;}
li#cart input:hover{ cursor: pointer; opacity: 0.6;}
div#kosuu{ float: left;}
div#updw{ float: left; padding-left: 0.5em;}
div#updw a{ display: block;}

#payment{ margin-bottom: 6em;}
#delivery{ margin-bottom: 6em;}
#payment h2,#delivery h2,#tokutei h2{ font-size: 1.2em; margin-bottom: 0.5em; font-weight: bold;}

.pay_del{ background: #e6dfd3; padding: 20px; margin-bottom: 1em;}
.pay_del h3{ font-weight: bold;}

table.table_01{ border-top: 1px solid #422d0b; border-left:  1px solid #422d0b; width: 100%; }
table.table_01 th{ background: #1c7ec0; color: #fffff2;  border-right: 1px solid #422d0b; border-bottom: 1px solid #422d0b; text-align: center; vertical-align: middle; }
table.table_01 td{  border-right: 1px solid #422d0b; border-bottom: 1px solid #422d0b; text-align: center;}
#tokutei table{ width: 100%;border-top: 1px solid #422d0b; border-left:  1px solid #422d0b; }
#tokutei table th{ white-space: nowrap; background: #e6dfd3; padding: 10px;  border-right: 1px solid #422d0b; border-bottom: 1px solid #422d0b; text-align: center; vertical-align: middle; }
#tokutei table td{border-right: 1px solid #422d0b; border-bottom: 1px solid #422d0b; text-align: left;padding: 10px; }

p#sort{ text-align: center; margin-top: 3em;}
p#navi{ text-align: center;}
#slider{ width: 800px; height: 390px; background: #fffff2; box-shadow: none;}
#slider br{ display: none;}
/*------- Totop ----- */
#page-top {position: fixed;bottom: 20px;right: 20px;font-size: 77%;z-index: 100;line-height: 1.5em;}
#page-top a {font-family: 'Lato', sans-serif;text-decoration: none;color: #fffff2;text-align: center;display: block;font-weight: 700;width: 150px;height: 61px;background: url(../images/totop.svg) no-repeat;background-size: 150px 91px;padding-top: 40px;}
#page-top a:hover { -webkit-transition: all 1s;-moz-transition: all 1s;-ms-transition: all 1s;-o-transition: all 1s;transition: all 1s;text-decoration: none;opacity: .5;-webkit-opacity: .5;-moz-opacity: .5;filter: alpha(opacity=50);	-ms-filter: "alpha(opacity=50)"; }

p.soldout span{ color: #F54D00}

/* MARGIN PADDING
-------------------------------------------------------------- */
.mt05{margin-top: 0.5em;}
.mt1{margin-top: 1em;}
.mt15{margin-top: 1.5em;}
.mt2{margin-top: 2em;}
.mt25{margin-top: 2.5em;}
.mt3{margin-top: 3em;}
.mt35{margin-top: 3.5em;}
.mt4{margin-top: 4em;}
.mt45{margin-top: 4.5em;}
.mt5{margin-top: 4em;}
.mt55{margin-top: 5.5em;}
.mt6{margin-top: 6em;}
.mt65{margin-top: 6.5em;}
.mt7{margin-top: 7em;}
.mt75{margin-top: 7.5em;}
.mt8{margin-top: 8em;}
.mt85{margin-top: 8.5em;}
.mt9{margin-top: 9em;}
.mt95{margin-top: 9.5em;}
.mt10{margin-top: 10em;}

.mb05{margin-bottom: 0.5em;}
.mb1{margin-bottom: 1em;}
.mb15{margin-bottom: 1.5em;}
.mb2{margin-bottom: 2em;}
.mb25{margin-bottom: 2.5em;}
.mb3{margin-bottom: 3em;}
.mb35{margin-bottom: 3.5em;}
.mb4{margin-bottom: 4em;}
.mb45{margin-bottom: 4.5em;}
.mb5{margin-bottom: 4em;}
.mb55{margin-bottom: 5.5em;}
.mb6{margin-bottom: 6em;}
.mb65{margin-bottom: 6.5em;}
.mb7{margin-bottom: 7em;}
.mb75{margin-bottom: 7.5em;}
.mb8{margin-bottom: 8em;}
.mb9{margin-bottom: 9em;}
.mb10{margin-bottom: 10em;}
.mb11{margin-bottom: 11em;}
.mb12{margin-bottom: 12em;}
.mb13{margin-bottom: 13em;}
.mb14{margin-bottom: 14em;}
.mb15{margin-bottom: 15em;}

.mr05{margin-right: 0.5em;}
.mr1{margin-right: 1em;}
.mr15{margin-right: 1.5em;}
.mr2{margin-right: 2em;}
.mr25{margin-right: 2.5em;}
.mr3{margin-right: 3em;}
.mr35{margin-right: 3.5em;}
.mr4{margin-right: 4em;}
.mr45{margin-right: 4.5em;}
.mr5{margin-right: 5em;}
.mr55{margin-right: 5.5em;}
.mr6{margin-right: 6em;}

.ml05{margin-left: 0.5em;}
.ml1{margin-left: 1em;}
.ml15{margin-left: 1.5em;}
.ml2{margin-left: 2em;}
.ml25{margin-left: 2.5em;}
.ml3{margin-left: 3em;}
.ml35{margin-left: 3.5em;}
.ml4{margin-left: 4em;}
.ml45{margin-left: 4.5em;}
.ml5{margin-left: 4em;}
.ml55{margin-left: 5.5em;}
.ml6{margin-left: 6em;}

.mt_05{margin-top: -0.5em;}
.mt_1{margin-top: -1em;}
.mt_15{margin-top: -1.5em;}
.mt_2{margin-top: -2em;}
.mt_25{margin-top: -2.5em;}
.mt_3{margin-top: -3em;}
.mt_35{margin-top: -3.5em;}
.mt_4{margin-top: -4em;}
.mt_45{margin-top: -4.5em;}
.mt_5{margin-top: -4em;}
.mt_55{margin-top: -5.5em;}
.mt_6{margin-top: -6em;}

.pb1{padding-bottom: 1em;}
.pb15{padding-bottom: 1.5em;}
.pb2{padding-bottom: 2em;}
.pb25{padding-bottom: 2.5em;}
.pb3{padding-bottom: 3em;}
.pb35{padding-bottom: 3.5em;}
.pb4{padding-bottom: 3.5em;}
.pb45{padding-bottom: 4em;}
.pb5{padding-bottom: 4.5em;}
.pb55{padding-bottom: 5.5em;}
.pb6{padding-bottom: 6em;}
.pb7{padding-bottom: 7em;}
.pb8{padding-bottom: 8em;}

.pt1{padding-top: 1em;}
.pt15{padding-top: 1.5em;}
.pt2{padding-top: 2em;}
.pt25{padding-top: 2.5em;}
.pt3{padding-top: 3em;}
.pt35{padding-top: 3.5em;}
.pt4{padding-top: 3.5em;}
.pt45{padding-top: 4em;}
.pt5{padding-top: 4.5em;}
.pt55{padding-top: 5.5em;}
.pt6{padding-top: 6em;}

.pl1{padding-left: 1em;}
.pl15{padding-left: 1.5em;}
.pl2{padding-left: 2em;}
.pl25{padding-left: 2.5em;}
.pl3{padding-left: 3em;}
.pl35{padding-left: 3.5em;}
.pl4{padding-left: 3.5em;}
.pl45{padding-left: 4em;}
.pl5{padding-left: 4.5em;}
.pl55{padding-left: 5.5em;}
.pl6{padding-left: 6em;}

.pr1{padding-right: 1em;}
.pr15{padding-right: 1.5em;}
.pr2{padding-right: 2em;}
.pr25{padding-right: 2.5em;}
.pr3{padding-right: 3em;}
.pr35{padding-right: 3.5em;}
.pr4{padding-right: 3.5em;}
.pr45{padding-right: 4em;}
.pr5{padding-right: 4.5em;}
.pr55{padding-right: 5.5em;}
.pr6{padding-right: 6em;}
.pr7{padding-right: 7em;}
.pr8{padding-right: 8em;}


/* FLOAT
-------------------------------------------------------------- */
.fl1{ float: left; margin-right: 1em;}
.fl15{ float: left; margin-right: 1.5em;}
.fl2{ float: left; margin-right: 2em;}
.fl25{ float: left; margin-right: 2.5em;}
.fl3{ float: left; margin-right: 3em;}
.fl35{ float: left; margin-right: 3.5em;}
.fl4{ float: left; margin-right: 4em;}
.fl45{ float: left; margin-right: 4.5em;}
.fl5{ float: left; margin-right: 5em;}
.fl55{ float: left; margin-right: 5.5em;}

.fr1{ float: right; margin-left: 1em;}
.fr15{ float: right; margin-left: 1.5em;}
.fr2{ float: right; margin-left: 2em;}
.fr25{ float: right; margin-left: 2.5em;}
.fr3{ float: right; margin-left: 3em;}
.fr35{ float: right; margin-left: 3.5em;}
.fr4{ float: right; margin-left: 4em;}
.fr45{ float: right; margin-left: 4.5em;}
.fr5{ float: right; margin-left: 5em;}
.fr55{ float: right; margin-left: 5.5em;}

/* FLONT SIZE
-------------------------------------------------------------- */
.f08{ font-size: 0.8em;}
.f09{ font-size: 0.9em;}
.f11{ font-size: 1.1em;}
.f12{ font-size: 1.2em;}
.f13{ font-size: 1.3em;}

/* other
-------------------------------------------------------------- */
strong{font-weight: bold;}
.center{ text-align: center  !important;}
.left{ text-align: left !important;}
.right{ text-align: right !important;}