@charset "UTF-8";

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, hgroup, menu, nav, section, summary,
time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    outline: 0;
    font-size: 100%;
    vertical-align: baseline;
    background: transparent;
}

body {
    line-height: 1;
    overflow-x: hidden;
}



*{
	font-family:"Roboto Slab" , Garamond , "Times New Roman" , "游明朝" , "Yu Mincho" , "游明朝体" , "YuMincho" , "ヒラギノ明朝 Pro W3" , "Hiragino Mincho Pro" , "HiraMinProN-W3" , "HGS明朝E" , "ＭＳ Ｐ明朝" , "MS PMincho" , serif; 
}	

.maxsize{
	width: 100%;
	max-width: 960px;
}


.pc{
	display: block;
}

.sp{
	display: none;
}

a:hover {
    opacity: 0.6;
}

#wrapper{
	width: 960px;
	margin: 100px auto 30px;
}


#logo h1{
	text-align: center;
}

#logo h1 img{
	width: 260px;
	height: 30px;
}



/* メニュー */

ul.pc-nav{
	width: 770px;
	margin: 85px auto 50px;
	list-style: none;
}


ul.pc-nav li{
	float: left;
	text-align: center;
	width: 13%;
}

ul.pc-nav li.wholesale-nav{
	width: 15%;
}

ul.pc-nav li.online-nav{
	width: 20%;
}

ul.pc-nav li a{
	font-size: 100%;
	font-family: 'Oswald', sans-serif;
	color: #000;
	padding:0 10px 5px;
	text-decoration: none;
	letter-spacing: 0.05em;
}

ul.pc-nav li a:hover{
	border-bottom: solid 1px #ccc;
}

ul.pc-nav li a img{
	margin-top: -5px;
}


ul.pc-nav:after { /*floatの解除、ここがポイント*/
	    display:block;
	    clear:both;
	    height:0px;
	    visibility:hidden;
	    content:".";
}


body#home ul.pc-nav li.top-nav a{
	border-bottom: solid 1px #ccc;
}

body#news ul.pc-nav li.news-nav a{
	border-bottom: solid 1px #ccc;
}

body#roastery ul.pc-nav li.roastery-nav a{
	border-bottom: solid 1px #ccc;
}

body#online ul.pc-nav li.online-nav a{
	border-bottom: solid 1px #ccc;
}

body#access ul.pc-nav li.access-nav a{
	border-bottom: solid 1px #ccc;
}

body#wholesale ul.pc-nav li.wholesale-nav a{
	border-bottom: solid 1px #ccc;
}
	

/* ボックススライダー設定 */

.top-slider{
	width: 700px;
	margin: 0 auto;
	position: relative;
}

.bx-wrapper .bx-pager {
	text-align: left;
    margin-top: 5px;
}

.bx-wrapper .bx-pager .bx-pager-item {
	display: inline-block;
	*zoom: 1;
	*display: inline;
}

.bx-wrapper .bx-controls-direction a {
	position: absolute;
	z-index: 9999;
}

.bx-prev {
	display: none;
}

.bx-wrapper .bx-next {
	display: none;
}

.bx-pager a {
	background: #CCC;
	text-indent: -9999px;/*数字表示をブラウザ外に押しやる*/
	display: block;
	width: 10px;
	height: 10px;
	margin: 0 5px;
}
.bx-pager a:hover,
.bx-pager a.active {
	background: #999;
}
.bx-prev {
	left: 17px;
}
.bx-next {
	right: 17px;
}
.bx-controls-direction a {
	position: absolute;
	margin-top: -16px;
	width: 35px;/*使用画像に応じて指定*/
	height: 35px;/*使用画像に応じて指定*/
	text-indent: -9999px;/*画像置換のためテキストを押しやる*/
	z-index: 9999;
}


/* hタグ */


h2.h2title {
    display: flex;
    align-items: center;
    text-align: center; /* for no-flexbox browsers */
    font-family:  'Oswald', sans-serif;
    font-size: 110%;
    font-weight: normal;
    letter-spacing: 0.2em;
    margin: 100px 0 ;
    padding-left:0;
    padding-right:0;
    border: none;
    background: #FFF;
    width: 2000px;
}

h2.h2title:before,
h2.h2title:after {
    border-top: 1px solid;
    content: "";
    display: inline; /* for IE */
    flex-grow: 1;
}

h2.h2title:before {
    margin-right: 0.8em;
    margin-left: -1040px;
}

h2.h2title:after {
    margin-left: 0.5em;
}


/* NEWS */


.whatsnew{
	width: 70%;
	margin: 0 auto;
}

div.wn-item {
	font-size: 110%;
    letter-spacing: 0.1em;
    margin:5px 0 30px;
}

div.wn-item .wn-date {
    width: 10em;
    float: left;
}

.wn-article a{
	color: #000;
	text-decoration: none;
}

div.wn-item:after {
    display:block;
	clear:both;
	height:0px;
	visibility:hidden;
	content:".";
}

.page-link{
	width: 720px;
	margin: -50px auto 50px;
}

.page-link ul{
	width:250px;
	margin: 0 auto;
	list-style: none;
}

.page-link ul li{
	float: left;
}

.page-link ul li a{
	text-decoration: none;
	color: #000;
	font-family: 'Oswald', sans-serif;
	letter-spacing: 0.05em;
}

.page-link ul li:first-child{
	margin:0 40px;
	padding-right: 30px;
	border-right:solid 1px #000;  
}

.page-link ul li:last-child{
	margin-right: 0;
}

.page-link ul:after {
    content: '';
    display: block;
    clear: both;
}


/* オンラインショップ */


.onlineshop ul{
	list-style: none;
	width: 700px;
	margin: 0 auto;
}

.onlineshop ul li {
	float: left;
	margin-right: 5px;
	width: 136px;
}

.onlineshop ul li a{
	display: block;
	
}

.onlineshop ul li:last-child{
	margin-right: 0px;	
}


.onlineshop ul:after {
    content: '';
    display: block;
    clear: both;
}

.online-all {
    display: block;
    margin: 60px auto;
    width: 14%;
    border: 1px solid #000;
    text-align: center;
    padding: 10px 0;
    text-decoration: none;
    color: #000;
}

.online-all:hover{
	color: #000;
	opacity: 0.6;
	background: #efefef;
}



#online .page-link{
	width: 720px;
	margin: -50px auto 50px;

}

#online .page-link ul{
	/* width:342px; */
	width:220px;
	margin: 0 auto;
	list-style: none;
}

#online .page-link ul li{
	float: left;
}

#online .page-link ul li a{
	text-decoration: none;
	color: #000;
	font-family: 'Oswald', sans-serif;
	letter-spacing: 0.05em;
}

#online .page-link ul li a:hover{
	text-decoration: underline;
}

#online .page-link ul li{
	margin:0 5px;
	padding-right: 8px;
	border-right:solid 1px #000;  
}

#online .page-link ul li:last-child{
	margin-right: 0;
	border-right:none;
}

#online .page-link ul:after {
    content: '';
    display: block;
    clear: both;
}

.online-all-list {
    width: 700px;
    margin: 15px auto 80px;
    padding-bottom: 30px;
    list-style: none;
}

.online-all-list li{
	width: 348px;
	margin-bottom: 1px;
	float: left;
}

.online-all-list li:nth-child(odd){
	margin-right: 4px;
}

.online-all-list:after {
    content: '';
    display: block;
    clear: both;
}

.spec-list{
	width: 700px;
    margin: 15px auto 0px;
    padding-bottom: 30px;
    list-style: none;
    text-align: center;
}

.spec-list li.photo{
	margin-bottom: 50px;
}

.spec-list li.name{
	font-size: 200%;
	line-height: 150%;
	margin-bottom: 10px;
}

.spec-list li.origin{
	font-size: 120%;
	margin-bottom: 30px;

}

.spec-list li.kana{
	font-size: 80%;
	margin-bottom: 30px;
}

.spec-list li.price{
	font-size: 150%;
	line-height: 140%;
	letter-spacing: 0.1em;
	margin-bottom: 30px;
}

.spec-list li.price-small{
	font-size: 150%;
	line-height: 140%;
	letter-spacing: 0.1em;
	margin-bottom: 30px;
}

.spec-list li.roast{
	font-size: 100%;
	margin-bottom: 30px;
}

.spec-list li.other{
	line-height: 150%;
	margin-bottom: 20px;
}

.spec-copy{
	width: 700px;
    margin: 0px auto 0px;
    padding-bottom: 30px;
	font-size: 80%;
	line-height: 170%;
	text-align: justify;
}

.order{
	width: 700px;
    margin: 10px auto 0px;
    padding-bottom: 30px;
}

.order input.cart-button{
	width: 285px;
	height: 50px;
	margin-top: 10px;
	padding-top: 5px;
	font-size: 100%;
	color: #FFF;
	background: #000;
	border: none;
}

.order form{
	width: 300px;
	float: left;
}

.order .order-right{
	width: 380px;
	float: left;
	font-size: 70%;
	line-height: 150%;
	margin-left: 20px;
}

.order:after{
	content: '';
    display: block;
    clear: both;
}

.order .order-right .howto-link{
	margin-top: 10px;
	list-style: none;
}

.order .order-right .howto-link li{
	margin-bottom: 5px;
}

.order input.cart-button:hover{
	opacity: 0.5;
}

.order-list {
	margin-bottom: 10px;
}

.order-list select {
	width: 200px;
	font-size: 100%;
	padding: 5px 0;
}

.order-list .D{
	font-style: normal;
}

.order-list input[type="text"]{
	padding: 5px 0;
}

#iship{
	border: 1px solid #eee;
	padding: 10px;
	margin-top: 20px;
}

#sship{
	font-style: bold;
	color:red;
	padding: 30px;
	margin-top: 0px;
	text-align: center;
}

/* ご注文について */


body#howto h2{
	margin: 50px 0;
}

body#howto h2:first-child{
	margin-top: 100px;
}

.howto{
	width: 700px;
    margin: 10px auto 0px;
    padding-bottom: 30px;
}

.howto h2{
	font-size: 110%;
	border-left:solid 3px #8adcff ;
	padding: 5px;
}

.howto h4{
	font-size: 100%;
}


.howto p.naiyou{
	font-size: 80%;
	line-height: 180%;
	text-align: justify;
	color:#333333;
	margin:0 0 15px 12px;
	padding:0 0 10px 0;
	border-bottom:dotted 1px #333;
}


.howto p.naiyou:last-child{
	border: none;
}


h3.title-b{
	font-size:100%;
	color:#000;
	background:url(../image/delta.gif) no-repeat left center;
	margin:0 0 8px 0;
	padding:0 0 0 12px;
}
h4{
	font-size:90%;
	color:#963;
	margin:0 0 5px 12px;
}


p a{
	/*color:blue;*/
	text-decoration:none;
	color:#999;
}
p a:hover{
	/*color:#36f;*/
	color:#999;
	text-decoration:none;
}
p a:visited{
	/*color:#36f;*/
	color:#999;
	text-decoration:none;
}
.howto table{
	color:#333333;
	border-collapse:collapse;
	margin:0 0 10px 12px;
}
.howto table th{
	font-size:75%;
	line-height:160%;
	background:#CCC;
	border:solid 1px #666;
	padding:5px;
	font-weight:normal;
}
.howto table td{
	font-size:75%;
	line-height:160%;
	border:solid 1px #666;
	padding:5px;
}


/* アクセス */

.map-illust{
	float: left;
}

.map-illust img{
	width: 430px;
	height: 397px;
}

#access_r{
	margin-top: 80px;
}
#access_r .map-illust img{
	width: 430px;
	height: 494px;
}


ul.address {
    list-style-type: none;
    margin-left: 30px;
    float: left;
}

ul.address li {
    margin-bottom: 0px;
    font-size: 110%;
    line-height: 150%;
    letter-spacing: 0.05em;
}

ul.address li a{
	color: #000;
	text-decoration: none;
}

ul.address li a:hover{
	color: #000;
	opacity: 0.6;
	background: #efefef;
}

.gmap a{
	margin-top: 10px;
	width: 45%;
    display: block;
    border: 1px solid #000;
    text-align: center;
    padding: 10px 0;
    text-decoration: none;
    color: #000;
}

.access:after{
	content: '';
    display: block;
    clear: both;
}

ul.address li.en-first{
	color: #999;
	margin-top: 50px;
}

ul.address li.en{
	color: #999;
}

ul.address li.en a{
	color: #999;
	text-decoration: none;
}



/* フッター */


footer {
	margin: 100px 0 50px;
	padding: 50px 0 0;
	text-align: center;
    border-top: 1px solid #000;
}

.footer-nav ul{
	width: 960px;
	margin: 0 auto 50px;
	list-style: none;
}


.footer-nav ul li {
    float: left;
}

.footer-nav ul li a {
	display: block;
    font-size: 110%;
    margin: 0 20px;
    color: #000;
    text-decoration: none;
}

.footer-nav ul:after{
	content: '';
    display: block;
    clear: both;
}

.copy-right{
	font-size: 90%;
	color: #666;
}

#pageTop {
  position: fixed;
  bottom: 0px;
  right: 0px;
}

 
#pageTop a {
  display: block;
  z-index: 999;
  padding: 20px;
  width: 50px;
  height: 20px;
  background-color: #666;
  color: #fff;
  text-decoration: none;
  text-align: center;
}

 
#pageTop a:hover {
  text-decoration: none;
}


/* ニュースのページ */

.news-list{
	list-style: none;
}

.news-list li img{
	margin-bottom: 20px;
}

.news-list li.days {
    font-size: 120%;
    text-align: center;
    background: none;
    font-weight: normal;
    letter-spacing: 0.05em;
    margin: 0;
    margin-bottom: 10px;
    padding: 0;
}

.news-list li.event-title {
    font-size: 140%;
    margin: 0;
    margin-bottom: 15px;
    padding: 0;
    color: #000;
    border-bottom: none;
    text-align: center;
    font-weight: normal;
    letter-spacing: 0.05em;
}

.news-list li.event-copy {
    font-size: 100%;
    line-height: 190%;
    width: 600px;
    margin: 30px auto 100px;
    border-bottom: 1px solid #000;
    padding-bottom: 50px;
}

.news-list li.event-copy:last-child{
	border-bottom: none;
}

.pastevent{
	list-style: none;
}

.pastevent li.pastopen{
	width: 100%;
	text-align: center;
	font-size: 120%;
	letter-spacing: 0.1em;
	padding: 3px 0;
	cursor: pointer;
}


.pastevent .pastlist{
	display: none;
	height: 100%;
}

/* コラムのページ */
#column h3 {
	font-size: 140%;
	margin: auto;
	margin-bottom: 15px;
	padding: 0;
	color: #000;
	border-bottom: none;
	text-align: center;
	font-weight: normal;
	letter-spacing: 0.05em;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
#column .copy {
	font-size: 90%;
	line-height: 190%;
	margin: 15px 18px 20px;
	padding-bottom: 30px;
	}
	
#column .page-link ul {
	width: 332px;
	margin: 0 auto;
	list-style: none;
}

#column .page-link ul li:first-child {
	padding-right: 38px;
}

#column .news-list{
	list-style: none;
}

#column .news-list li img{
	margin-bottom: 20px;
}

#column .news-list li.days {
    font-size: 120%;
    text-align: center;
    background: none;
    font-weight: normal;
    letter-spacing: 0.05em;
    margin: 0;
    margin-bottom: 10px;
    padding: 0;
}

#column .news-list li.event-title {
    font-size: 140%;
    margin: 0;
    margin-bottom: 15px;
    padding: 0;
    color: #000;
    border-bottom: none;
    text-align: center;
    font-weight: normal;
    letter-spacing: 0.05em;
}

#column .news-list li.event-copy {
}

#column .news-list li.event-copy:last-child{
}

#column .pastevent{
	list-style: none;
}

#column .pastevent li.pastopen{
	width: 600px;
	text-align: center;
	font-size: 120%;
	letter-spacing: 0.1em;
	padding: 3px 0;
	cursor: pointer;
	margin: auto;
}

#column .pastevent .pastlist{
	display: none;
	height: 100%;
}

#column .pastevent .pastopen .news-list li.event-copy {
	margin: auto;
	padding-bottom: 0px;
}

/* セレモニーのページ */
	#ceremony h3 {
	font-size: 140%;
	margin: auto;
	margin-bottom: 15px;
	padding: 0;
	color: #000;
	border-bottom: none;
	text-align: center;
	font-weight: normal;
	letter-spacing: 0.05em;
	-ms-writing-mode: tb-rl;
	writing-mode: vertical-rl;
}
#ceremony .copy {
	font-size: 90%;
	line-height: 190%;
	margin: 15px 18px 20px;
	padding-bottom: 30px;
	}
	
#ceremony .page-link ul {
	width: 224px;
	margin: 0 auto;
	list-style: none;
}

#ceremony .page-link ul li:first-child {
	padding-right: 38px;
}

#ceremony .news-list{
	list-style: none;
}

#ceremony .news-list li img{
	margin-bottom: 20px;
}

#ceremony .news-list li.days {
    font-size: 120%;
    text-align: center;
    background: none;
    font-weight: normal;
    letter-spacing: 0.05em;
    margin: 0;
    margin-bottom: 10px;
    padding: 0;
}

#ceremony .news-list li.event-title {
    font-size: 140%;
    margin: 0;
    margin-bottom: 15px;
    padding: 0;
    color: #000;
    border-bottom: none;
    text-align: center;
    font-weight: normal;
    letter-spacing: 0.05em;
}

#ceremony .news-list li.event-copy {
	width: 700px;
}

#ceremony .news-list li.event-copy:last-child{
}

#ceremony .pastevent{
	list-style: none;
}

#ceremony .pastevent li.pastopen{
	text-align: center;
	font-size: 120%;
	letter-spacing: 0.1em;
	padding: 3px 0;
	cursor: pointer;
	margin: auto;
}


#ceremony .pastevent .pastlist{
	display: none;
	height: 100%;
}

/* ロースタリーのページ */

#roastery h2#our:before,
#roastery h2#our:after {
    border-top: none;
}
#roastery .page-link{
	width: 720px;
	margin: -50px auto 50px;

}

#roastery .page-link ul{
	width:556px;
	margin: 0 auto;
	list-style: none;
}

#roastery .page-link ul li{
	float: left;
}

#roastery .page-link ul li a{
	text-decoration: none;
	color: #000;
	font-family: 'Oswald', sans-serif;
	letter-spacing: 0.05em;
}

#roastery .page-link ul li a:hover{
	text-decoration: underline;
}

#roastery .page-link ul li{
	margin:0 15px;
	padding-right: 30px;
	border-right:solid 1px #000;  
}

#roastery .page-link ul li:last-child{
	margin-right: 0;
	border-right:none;
}

#online .page-link ul:after {
    content: '';
    display: block;
    clear: both;
}

.roastery-copy {
    font-size: 100%;
    line-height: 190%;
    width: 700px;
    margin: 15px auto 20px;
    padding-bottom: 30px;
}

.roastery-copy-en {
    font-size: 90%;
    line-height: 190%;
    width: 700px;
    margin: 15px auto 60px;
    padding-bottom: 30px;
    color: #999;
}

/* ホールセールのページ */


#wholesale h3 {
	font-size: 140%;
	margin: 0;
	margin-bottom: 15px;
	padding: 0;
	color: #000;
	border-bottom: none;
	text-align: center;
	font-weight: normal;
	letter-spacing: 0.05em;
}

.wholesale-copy-en {
    font-size: 64%;
    line-height: 190%;
    margin: 15px auto 20px;
    padding-bottom: 30px;
    color: #999;
}

#wholesale .page-link{
	width: 720px;
	margin: 30px auto 50px;
}

#wholesale .page-link ul{
	width:259px;
	margin: 0 auto;
	list-style: none;
}

#wholesale .page-link ul li{
	float: left;
}

#wholesale .page-link ul li a{
	text-decoration: none;
	color: #000;
	font-family: 'Oswald', sans-serif;
	letter-spacing: 0.05em;
}

#wholesale .page-link ul li a:hover{
	text-decoration: underline;
}

#wholesale .page-link ul li{
	margin:0 15px;
	padding-right: 30px;
	border-right:solid 1px #000;  
}

#wholesale .page-link ul li:last-child{
	margin-right: 0;
	border-right:none;
}

#wholesale .page-link ul:after {
    content: '';
    display: block;
    clear: both;
}


/* フォーム関連 */

.contact-form{
	width: 700px;
	margin: 15px auto 20px;
    padding-bottom: 30px;
}

.contact-form table{
	margin: 0;
	padding: 0;
	border-color:#eee ; 
}

.contact-form table th{
	vertical-align: top;
	background: #efefef;
}



/* 文字関連 */

.red{color: #C00;}

.blue{color: #3366cc;}

.gold{color: #a67c19;}

.gray{color: #333;}

.white{color: #fff;}

.dot{background: url(../image/bg-dot.png) repeat;}

.back-bg{background: url(../image/back-bg.png) repeat;}

.fe-bg{background: #ffffee;}

.pink-bg{background: #ffe8e9;}

.brown-bg{background: #2d0005;}

.blue-bg{background: #99ccff;}

.y-bg{background: #ffcc00;}

.ly-bg{background: #ffffe2;}

.h2-10-bg{background: url(../image/h2-10-bg.png) repeat-x;}

.h2-13-bg{background: url(../image/h2-13-bg.png) repeat-x;}

.h2-bg{background: url(../image/back-bg.png) repeat;}

.hituyou-bg{background: url(../image/hituyou-bg.png) repeat-x;}

.gold-bg100{background: #a67c19;}

.winered-bg{background: #C00;}

.form-bg{background: url(../image/form-bg.png) repeat; padding: 40px 0;}

.hogan-bg{background: url(../image/bg-hogan.png) repeat;}

.center{text-align: center;}

.bold{font-weight: bold;}

.size70{font-size: 70%;line-height: 120%;}

.size80{font-size: 80%;line-height: 140%;}

.size90{font-size: 90%;line-height: 140%;}

.size120{font-size: 120%;line-height: 160%;}

.size130{font-size: 130%;line-height: 140%;}

.size140{font-size: 140%;line-height: 180%;}

.size150{font-size: 150%;line-height: 190%;}

.size160{font-size: 160%;line-height: 200%;}

.size170{font-size: 170%;line-height: 210%;}

.size180{font-size: 180%;line-height: 220%;}

.size190{font-size: 190%;line-height: 230%;}

.size200{font-size: 200%;line-height: 240%;}

.bordertopnone{border-top: none;}

.wd30{width: 33.333%;}

.wd100{width: 700px;}

.maxsize{width:100%;max-width: 960px;}

.border-blue{border: 10px solid  #1b478e;}

.border-red-all{border: 10px solid  #C00;}

.border-red{border: 10px solid  #C00;border-bottom: none;}

.border-red2{border-left: 10px solid  #C00;border-right: 10px solid  #C00;}

.border-red3{border: 10px solid  #C00;border-top: none;}

.border-white{border: 10px solid  #FFF;}


/* マージン関係 */

.mt-50{margin-top: 50px;}

.ml-50{margin-left: 50px;}

.mr-50{margin-right: 50px;}

.mb-50{margin-bottom: 50px;}

.mt-15{margin-top: 15px;}

.ml-15{margin-left: 15px;}

.mr-15{margin-right: 15px;}

.mb-15{margin-bottom: 15px;}


.pt-50{padding-top: 50px;}

.pl-50{padding-left: 50px;}

.pr-50{padding-rigt: 50px;}

.pb-50{padding-bottom: 50px;}

.pt-15{padding-top: 15px;}

.pl-15{padding-left: 15px;}

.pr-15{padding-rigt: 15px;}

.pb-15{padding-bottom: 15px;}





@media screen and (max-width: 480px) {
   /* 600px以上の場合 */
   
.maxsize{
	width: 100%;
}

.pc{
	display: none;
}

.sp{
	display: block;
}

#logo{
	margin: 8px 0 5px;
}

#wrapper{
	width: 100%;
	margin: 0 auto 30px;
	overflow: hidden;
}

.acordion-nav{
		width:100%;
		margin:0 auto;
}

.trigger{
		color:#000; 
		text-align:center;
		cursor:pointer;
		padding: 5px 0;
}

.trigger p span.op i.fa-bars{
	color: #000;
}

.acordion-tree{
		display:none;
}

.acordion-tree ul{
		margin:0;
		list-style: none;
}

.acordion-tree ul li{
	padding: 8px 0;
	background: #efefef;

}

.acordion-tree ul li a{
	display: block;
	color: #000;
	font-size: 100%;
	font-family: 'Oswald', sans-serif;
	text-decoration: none;
	padding-bottom: 5px;
	border-bottom: solid 1px #ddd;
}

.acordion-tree ul li img{
	width: 25px;
	height: 18px;
}


.acordion-tree ul li:last-child a{
	padding-bottom: 6px;
}


.top-slider{
	width: 100%;
}

h2.h2title {
    margin: 20px 0 ;
    width: 100%;
}

h2.h2title:before,
h2.h2title:after {
    border-top: 1px solid;
    content: "";
    display: inline; /* for IE */
    flex-grow: 1;
}

h2.h2title:before {
    margin-right: 0.8em;
    margin-left: 0%;
}

h2.h2title:after {
    margin-left: 0.5em;
}

/* セレモニー */


#ceremony .news-list{
	width: 90%;
    margin: auto ;
	
}

#ceremony .news-list li.event-copy {
	width:auto;
}

/* NEWS */


.whatsnew{
	width: 90%;
}


div.wn-item .wn-date {
	display: block;
    float: none;
    margin-bottom: 5px;
    font-size: 80%;
}

.wn-article a{
	font-size: 80%;
}

.page-link{
	width: 100%;
	font-size: 80%;
	margin: 20px auto 20px;
	margin-left: 60px;
}

.page-link ul, #column .page-link ul, #ceremony .page-link ul{
	width:100%;
}

.news-list{
	list-style: none;
	font-size: 80%;
}

.news-list li img{
	margin-bottom: 20px;
}

.news-list li.days {
    font-size: 130%;
}

.news-list li.event-title {
    margin-bottom: 10px;
}

.news-list li.event-copy {
    width: 100%;
    text-align: justify;
    margin: 20px auto 20px;
    border-bottom: 1px solid #000;
    padding-bottom: 10px;
}

#column .pastevent li.pastopen {
    width: 100%;
}

.news-list li.event-copy:last-child{
	border-bottom: none;
}


/* ホールセールのページ */

#wholesale .page-link{
	width: 100%;
	margin: 20px auto 20px;
}

#wholesale .page-link ul{
	width: 100%;
    text-align: center;
	margin: 30px 0px;
}

#wholesale .page-link ul li{
	float: none;
    display: inline-block;
	margin: 0px;
    padding: 0px 30px;
	font-weight: bold;
}

/* ロースタリーのページ */


.roastery-copy {
    font-size: 80%;
    line-height: 190%;
    width: 90%;
    margin: 15px auto 10px;
    padding-bottom: 10px;
    text-align: justify;
}

#roastery .page-link{
	width: 100%;
	margin: 20px auto 20px;
}

#roastery .page-link ul{
	width: 100%;
    text-align: center;
	margin: 30px 0px;
}

#roastery .page-link ul li{
	float: none;
    display: inline-block;
	margin:6px 0px;
    padding: 0px 8px;
	font-weight: bold;
}


.roastery-copy-en {
    font-size: 70%;
    line-height: 190%;
    width: 90%;
    margin: 15px auto 10px;
    padding-bottom: 10px;
    text-align: justify;
}

/* オンラインショップ */


#home .onlineshop ul{
	list-style: none;
	width: 100%;
	margin: 0 auto;
}

#home .onlineshop ul li {
	float: left;
	margin-right: 0px;
	margin-bottom: -4px;
	width: 50%;
}


#home .onlineshop .online-all {
	width: 50%;
	padding-top: 15px;
}


/* アクセス */

.map-illust{
	float: none;
	margin-bottom: 10px;
}

.map-illust img{
	width: 100%;
	height: 100%;
}
	
#access_r .map-illust img{
	width: 100%;
	height: 100%;
}

ul.address {
    margin-left: 5px;
    float: none;
}

ul.address li {
	text-align: center;
    margin-bottom: 20px;
    font-size: 90%;
}

ul.address li a{
	display: block;
	margin: 0 auto;
	width: 50%;
	color: #000;
	text-decoration: none;
}

ul.address li a:hover{
	color: #000;
	opacity: 0.6;
	background: #efefef;
}

.gmap a{
	width: 50%;
    display: block;
    border: 1px solid #000;
    text-align: center;
    margin: 10px auto 30px;
    padding: 10px 0;
    text-decoration: none;
    color: #000;
}

.access:after{
	content: '';
    display: block;
    clear: both;
}


ul.address li.en-first{
	margin-top: 30px;
	margin-bottom: 0px;
}

ul.address li.en{
	color: #999;
	margin-bottom: 0px;
}

ul.address li.en a{
	color: #999;
	text-decoration: none;
}


/* フッター */


footer {
	margin: 50px 0 20px;
	padding: 20px 0 0;
}

.footer-nav ul{
	width: 100%;
	margin-bottom: 20px;
}


.footer-nav ul li {
    float: none;
    margin-bottom: 5px;
}

.footer-nav ul li a {
    font-size: 80%;
 }

.copy-right{
	font-size: 80%;
	color: #666;
}

#pageTop a {
  padding: 10px 20px;
  width: 10px;
  height: 20px;
}

/* オンラインショップ */


#online .onlineshop ul{
	list-style: none;
	width: 700px;
	margin: 0 auto;
}

#online .onlineshop ul li {
	float: left;
	margin-right: 5px;
	width: 136px;
}

#online .onlineshop ul li a{
	display: block;
	
}

#online .onlineshop ul li:last-child{
	margin-right: 0px;	
}


#online .onlineshop ul:after {
    content: '';
    display: block;
    clear: both;
}

#online .online-all {
    display: block;
    margin: 60px auto;
    width: 14%;
    border: 1px solid #000;
    text-align: center;
    padding: 10px 0;
    text-decoration: none;
    color: #000;
}

#online .online-all:hover{
	color: #000;
	opacity: 0.6;
	background: #efefef;
}



#online .page-link{
	width: 100%;
	margin: 20px auto 20px;
	margin-left: 20px;

}

#online .page-link ul{
	width:100%;
}

.online-all-list {
    width: 100%;
    margin: 15px auto 20px;

}

.online-all-list li{
	width: 50%;
	margin-bottom: -4px;
	float: left;
}


.online-all-list li:nth-child(odd){
	margin-right: 0px;
}



.spec-list{
	width: 100%;
    margin: 0px auto 0px;
    padding-bottom: 10px;
    font-size: 80%;
}

.spec-list li.photo{
	margin-bottom: 10px;
}

.spec-list li.name{
	font-size: 150%;
	margin-bottom: 10px;
}

.spec-list li.origin{
	margin-bottom: 10px;
}

.spec-list li.kana{
	margin-bottom: 10px;
}

.spec-list li.price{
	margin-top: 0px;
	margin-bottom: 10px;
}

.spec-list li.price-small{
	font-size: 120%;
	line-height: 140%;
	margin-top: 0px;
	margin-bottom: 10px;
}

.spec-list li.roast{
	margin-bottom: 20px;
}

.spec-list li.other{
	margin-bottom: 10px;
}

.spec-copy{
	width: 90%;
}

.order{
	width: 100%;
    margin: 10px auto 0px;
    padding-bottom: 0px;
}

.order input.cart-button{
	display: block;
	margin: 20px auto;
	width: 90%;
}

.order form{
	width: 100%;
	float: none;
}

.order .order-right{
	width: 90%;
	float: none;
	font-size: 70%;
	line-height: 150%;
	margin-left: 20px;
	margin-bottom: 10px;
}

.order:after{
	content: '';
    display: block;
    clear: both;
}

.order .order-right .howto-link{
	margin-top: 10px;
	list-style: none;
}

.order .order-right .howto-link li{
	margin-bottom: 5px;
}

.order input.cart-button:hover{
	opacity: 0.5;
}

.order-list {
	display: block;
	width: 100%;
	margin: 0 auto;
	margin-left: 20px;
	margin-bottom: 20px;
	font-size: 90%;
}

.order-list p{
	width: 90%;
}

.order-list select {
	width: 60%;
	font-size: 100%;
	padding: 10px 0;
}

.order-list .D{
	font-style: normal;
}

.order-list input[type="text"]{
	padding: 5px 0;
} 

/* ご注文について */


body#howto h2{
	margin: 30px 0;
}

body#howto h2:first-child{
	margin-top: 20px;
}

.howto{
	width: 90%;
    margin: 10px auto 0px;
    padding-bottom: 0px;
}

.howto h2{
	font-size: 110%;
	border-left:solid 3px #8adcff ;
	padding: 5px;
}

.howto h4{
	margin: 0;
	margin-bottom: 10px;
	padding: 0;
}


.howto p.naiyou{
	margin:0;
	margin-bottom: 20px;
}


.howto p.naiyou:last-child{
	border: none;
}


.howto table{
	width: 100%;
	margin:0 0 10px 0px;
	padding: 0;
}





}