@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Noto+Sans:400,700);
@import url(http://fonts.googleapis.com/earlyaccess/notosanstc.css);


/*reset*/
/*******************************************************************/
body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,form,fieldset,input,select,textarea,p,blockquote,th,td,a,article,figure,img { margin: 0; padding: 0; -webkit-box-sizing: border-box; box-sizing: border-box;}
main,article,aside,details,figcaption,figure,footer,header,hgroup,menu,nav,section { display: block;}
address,caption,cite,code,dfn,em,strong,th,var { font-style: normal;}
table { border-collapse: collapse; border-spacing: 0;}
object,embed { vertical-align: top;}
hr,legend { display: none;}
h1,h2,h3,h4,h5,h6 { font-size: 100%; font-weight: 700;}
img { width: auto; max-width: 100%; height: auto; border: 0; vertical-align: middle;}
li { list-style: none;}
a { color: #4b4b4b; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; text-decoration: none;}
a:hover { opacity: 0.5;}


/*GLOBAL*/
/*******************************************************************/
#globalheader { background: #FFF; border-bottom: 1px solid #808080;}
#globalheader ul { display: table; width: 100%; max-width: 960px; margin: 0 auto;}
#globalheader li { display: table-cell; padding: 10px 5px; vertical-align: middle;}
#gcentrair { width: 25%;}
#glogo { text-align: center;}
#gtitle { width: 25%; text-align: right;}
#gback { text-align: center;}
#gback a { display: inline-block; padding-right: 24px; background: url(../images/gback.png) right center no-repeat; font-size: 12px; text-decoration: none; color: #4b4b4b;}


/*LAYOUT*/
/*******************************************************************/
body { background: #590D08; font-weight: 400; line-height: 2; word-break: break-all; color: #422B19;}
html[lang="en"] body { font-size: 14px; font-family: 'Noto Sans', sans-serif;}
html[lang="zh-tw"] body { font-size: 14px; font-family: 'Noto Sans TC', sans-serif;}
#container { position: relative; width: 100%; max-width: 1600px; margin: 0 auto; background: #FFF; box-shadow: 0 0 5px rgba(0,0,0,.3); overflow: hidden;}


/*HEADER*/
/*******************************************************************/
#top { padding: 4% 0; text-align: center; background: #231815 url(../images/bg1.png) center top repeat; overflow: hidden;}
#top h1 { padding: 2% 0;}
#top h1 + p { max-width: 960px; margin: 0 auto 4%; padding: 0 4%; font-size: 18px; color: #FFF;}
#top p { text-align: left;}


/*CONTENTS*/
/*******************************************************************/
#scene1 { background: url(../images/bg2.png) 0 0 repeat;}
#scene2 { background: url(../images/bg3.png) 0 0 repeat;}
#scene3 { background: url(../images/bg4.png) 0 0 repeat;}
#scene4 { background: url(../images/bg5.png) 0 0 repeat;}
.article { padding: 5%;}
.article::after { content: ''; display: block; clear: both;}
.contents { max-width: 960px; margin: 0 auto 4%;}
#main .contents header { margin-bottom: 3%; padding-bottom: 1px; background: url(../images/line.png) center bottom no-repeat;}
.contents header::after { content: ''; display: block; clear: both;}
.contents header p { text-align: left;}
.mark { float: right; margin-left: 10px; padding: 1px 20px; background: #E35514; border-radius: 6px; font-size: 20px; color: #FFF;}
.contents h2 { margin-bottom: 4%; padding-bottom: 10px; font-size: 46px; line-height: 1.2; color: #590D08;}
.contents h2 img { margin-left: 20px;}
.box .contents h2 { padding-bottom: 30px; background: url(../images/bar.png) center bottom no-repeat; font-size: 34px;}
.contents p { margin-bottom: 4%;}
.contents figure { text-align: center;}
.contents figcaption { display: table; margin: 5% auto 0; padding: 2% 4%; text-align: center; background: #FFF; border-radius: 30px; line-height: 1.2; letter-spacing: 0.2em; text-indent: 0.2em; color: #000;}
.contents figcaption span { display: table-cell; vertical-align: middle;}
.contents figure img { border: 6px solid #FFF;}
.contents table { width: 100%;}
.contents tr { border-bottom: 1px dotted #231815;}
.contents th { width: 180px; padding: 10px 0 10px 35px; text-align: left; background-position: 0 center; background-repeat: no-repeat; color: #E35514;}
.contents th.date { background-image: url(../images/clock.png);}
.contents th.holiday { background-image: url(../images/calender.png);}
.contents th.tel { background-image: url(../images/phone.png);}
.contents th.place { background-image: url(../images/map.png);}
.contents th.access { background-image: url(../images/train.png);}
.contents th.site { background-image: url(../images/site.png);}
.contents td { padding: 10px 0; word-break: break-all;}
.contents tr:last-child { border-bottom: none;}
.box { max-width: 1100px; margin: 0 auto; padding: 3% 4% 1%; background: #FFF;}
.box2 { padding: 4%; background: #231815; border-radius: 6px 6px 0 0; color: #FFF;}
.box2 h3 { margin-bottom: 10px; padding-bottom: 10px; text-align: center; border-bottom: 2px solid #FFF; font-size: 30px;}
.box2 h4 { position: relative; display: inline-block; margin-top: 30px; padding: 1px 20px; background: #E35514; color: #FFF;}
.box2 h4::after { position: absolute; top: 100%; left: 50%; border: solid transparent; content: ''; width: 0; height: 0; margin-left: -10px; border-color: rgba(227, 85, 20, 0); border-top-color: #e35514; border-width: 10px;}
.contents .box2 tr { border-color: #FFF;}
.contents .box2 th { padding-left: 0;}
.contents p.comment { margin-bottom: 0; padding: 3%; background: #FFF; color: #E35514;}
.box3 { padding: 4%; background: #FFF; border-radius: 0 0 6px 6px;}
.box3 h3 { margin-bottom: 10px; text-align: center; border-bottom: 2px solid #E35514; font-size: 20px; color: #E35514}
.half { display: table; table-layout: fixed; width: 100%; margin-bottom: 3%;}
.item { display: table-cell; vertical-align: top;}
.item:first-child { padding-right: 2%;}
.item:last-child { padding-left: 2%;}
.contents .item p { margin-top: 2%;}
.flex { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; margin-bottom: 4%;}
.flex img { width: 96%;}
.map a { display: inline-block; margin-left: 20px; padding: 1px 10px 1px 25px; background: #E35514 url(../images/arr.png) 10px center no-repeat; border-radius: 6px; font-size: 12px; font-weight: 700; color: #FFF;}
.mb { margin-bottom: 4%;}
.mt { margin-top: 4%;}



/*FOOTER*/
/*******************************************************************/
#footer { position: relative; padding: 25px 0; text-align: center; background: #FFF; border-top: #D8D9D9 solid 1px; color: #333;}
#footer p { padding: 5px 0; font-size: 11px;}
#pagetop { display: none; position: fixed; right: 20px; bottom: 20px;}
#pagetop a { display: block; font-size: 50px; color: #19448a; text-shadow: 0 0 10px rgba(255,255,255,1.00);}
.sns { display: inline-block; padding: 5px; background: #FFF; -moz-border-radius: 4px; -webkit-border-radius: 4px; border-radius: 4px;}
.a2a_default_style a, .a2a_default_style .a2a_img, .a2a_default_style .a2a_dd, .a2a_default_style .a2a_svg, .a2a_default_style .a2a_counter img { float: none!important;}
.a2a_default_style a { display: inline-block; vertical-align: middle;}
.sp { display: none!important;}


@media only screen and (max-width: 767px){
#globalheader ul { display: block;}
#globalheader li { display: block; padding: 5px 10px;}
#gcentrair { width: 24%;}
#glogo { border-top: 1px dashed #CCC;}
#glogo img { width: 50%;}
#gtitle { position: absolute; top: 0; right: 0; width: 40%;}
#gback { text-align: right;}

#top { padding: 0;}
#top h1 { padding: 6% 1%;}
#top h1 + p { font-size: 16px;}

.mark { float: none; margin: 0 0 10px; text-align: center; font-size: 16px;}
.contents h2 { text-align: center; font-size: 26px;}
.contents h2 img { margin-left: 0;}
.box .contents h2 { font-size: 26px;}
.contents p { margin-bottom: 8%;}
.contents figcaption { padding: 2% 10%;}
.contents th { display: block; width: 100%; border-bottom: none;}
.contents td { display: block; padding-top: 0;}
.box2 h3 { font-size: 24px;}

.half { display: block;}
.item { display: block; margin-bottom: 8%;}
.item:first-child { padding-right: 0;}
.item:last-child { padding-left: 0;}
.flex { display: block;}
.flex img { width: 100%; margin-bottom: 5px;}

.sp { display: inline-block!important;}
}


@media print {
#container { width: 1060px;}
}