@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,nav,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: #000; -webkit-transition: all 0.2s ease-out; transition: all 0.2s ease-out; text-decoration: none;}
a:hover { opacity: 0.5!important;}


/*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: #000;}


/*LAYOUT*/
/*******************************************************************/
html { -webkit-overflow-scrolling: touch;}
body { background: #231815; font-weight: 400; line-height: 2; color: #231815;}
html[lang="en"] body { font-size: 14px; font-family: 'Noto Sans', sans-serif; word-break: keep-all;}
html[lang="zh-tw"] body { font-size: 16px; letter-spacing: 0.1em; font-family: 'Noto Sans TC', sans-serif; word-break: break-all;}
#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 { position: relative;}
#top h1 { position: absolute; top: 5%; left: 5%; z-index: 10; pointer-events: none;}
#top div img { width: 100%; height: auto;}
.min { font-size: 12px; color: #727171;}
#header { background: url(../images/header.jpg)  center center no-repeat; background-size: cover;}
#header h1 { padding: 1%;}
#header h1 img { height: 280px;}


/*CONTENTS*/
/*******************************************************************/
.article { padding: 4%;}
.article::after { content: ''; display: block; clear: both;}
.article.bread { padding-top: 1%;}
.contents { max-width: 960px; margin: 0 auto;}
.contents h2 { position: relative; padding: 10px; text-align: center; background: #000; border-radius: 4px; font-size: 30px; line-height: 1.4; color: #FFF;}
.contents h2::before { position: absolute; content: ''; top: 5px; left: 5px; right: 5px; bottom: 5px; border: 1px solid #FFF; border-radius: 4px;}
.contents h3 { margin-bottom: 4%; padding-bottom: 20px; background: url(../images/bar.png) 0 bottom repeat-x; font-size: 28px; line-height: 1.4;}
.contents h2, .contents p { margin-bottom: 4%;}
.contents p:last-child { margin-bottom: 0;}
.contents .brackets { text-align: center;}
.contents .brackets h3 { position: relative; display: inline-block; margin: 1% 0 4%; padding: 1% 3%; text-align: center; background: none; font-size: 28px; line-height: 1.3;}
.contents .brackets h3::before, .contents .brackets h3::after{ content: ''; position: absolute; display: inline-block; width: 20px; height: 30px;}
.contents .brackets h3::before { top: -8px; left: -8px; border-left: 1px solid #422b19; border-top: 1px solid #422b19;}
.contents .brackets h3::after { bottom: -8px; right: -8px; border-right: 1px solid #422b19; border-bottom: 1px solid #422b19;}
.contents figure { margin-bottom: 4%; text-align: center;}
.contents header h2 img, .contents figure img { border-radius: 4px;}
.box { max-width: 1100px; margin: 0 auto; padding: 4% 4% 1%; background: #FFF;}
.box2 { margin-bottom: 4%; padding: 4% 4% 1%; background: #EFE4D4; border-radius: 4px;}
.box2.alt { background: #E5E8E5;}
.box3 { margin-bottom: 4%; padding: 2%; background: rgba(255,255,255,.3); border-radius: 4px;}
.box3 h3 { font-size: 20px;}
.box3 .half { margin-bottom: 0;}
.contents .box3 p, .contents .box3 figure { margin-bottom: 0;}
.box4 { padding: 4% 4% 1%; border: 1px solid #231815; border-radius: 4px;}
.box4 dl { background: #F0F1F1; padding: 2%;}
.half { display: -webkit-flex; display: flex; -webkit-justify-content: space-between; justify-content: space-between; align-items: center; margin-bottom: 3%;}
.item { -webkit-flex-basis: 48%; flex-basis: 48%; min-width: 48%;}
.item:first-child .box2 { background-image: url(../images/bg1.png);}
.item:last-child .box2 { background-image: url(../images/bg2.png);}
.contents dl { margin-bottom: 4%; line-height: 1.4;}
.contents dl::after { content: ''; display: block; clear: both;}
.contents dt { float: left; clear: left; width: 80px; margin: 5px 0; text-align: center; background: #900000; color: #FFF;}
.contents dd { padding: 5px 0 5px 90px; word-break: break-all;}
.mt { margin-bottom: 8%;}

#catch { background: url(../images/bg.png) 0 0 repeat; color: #FFF;}

#heading { background: #D3C8B2;}
#heading .item:first-child { -webkit-flex-basis: 49%; flex-basis: 49%; min-width: 49%;}
#heading .item:last-child { -webkit-flex-basis: 49%; flex-basis: 49%; min-width: 49%;}
#heading .box3 .item:first-child { -webkit-flex-basis: 71%; flex-basis: 71%; min-width: 71%;}
#heading .box3 .item:last-child { -webkit-flex-basis: 25%; flex-basis: 25%; min-width: 25%;}

#memories { padding: 0 4%; background: #484800;}

#access { background: #EFE4D4;}
#access .box { text-align: center; margin-bottom: 0;}
#mapwrap { width: 100%; max-width: 1100px; margin: 0 auto; padding: 4%; background: #231815;}
#map { width: 100%; height: 600px;}

.date { display: -webkit-flex; display: flex; -webkit-align-content: center; align-content: center; width: 313px; height: 91px; margin: 0 auto; text-align: center; background: url(../images/box.png) 0 0 no-repeat; line-height: 1.4;}
.date span { -webkit-align-self: center; align-self: center; margin: 0 auto;}

.baloon { margin-bottom: 20px; text-align: center;}
.baloon span { position: relative; display: inline-block; margin: 0 auto; text-align: center; padding: 6px 20px; background: #000; border-radius: 4px; line-height: 1.4; color: #FFF;}
.baloon span::before { content: ''; position: absolute; top: 100%; right: 10%; margin-left: -10px; border: 10px solid transparent; border-top: 10px solid #000;}

.back { padding-top: 60px; text-align: center;}
.back a { display: inline-block; padding: 10px 40px; background: #900000; border: 5px solid #FFF; border-radius: 10px; font-size: 20px; color: #FFF;}


/*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: 1200px){
#top h1 img { height: 280px;}
}


@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 h1 { position: relative; top: 0; left: 0; padding-top: 4%; text-align: center; background: url(../images/bg.png) 0 0 repeat;}
#top h1 img { width: 80%; height: auto;}

.contents h2 { font-size: 24px;}
.contents h3 { font-size: 22px;}
.contents .brackets h3 { font-size: 22px;}
.contents p { margin-bottom: 8%;}
.contents figcaption { padding: 2% 10%;}

.box3 { padding: 4% 4% 1%;}

.half { display: block;}
.item { display: block; width: 100%!important; margin-bottom: 8%;}

#access .contents p.sp { display: inline-block; margin-bottom: 4%; padding: 1% 5%; background: #EEE; border-radius: 30px; font-weight: 700;}
#map { width: 100%; height: 450px;}

#pagetop { right: 10px; bottom: 10px;}
.pc { display: none;}
.sp { display: inline-block!important;}
}


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