@charset "utf-8";
/* reset */
* { padding: 0; margin: 0; box-sizing: border-box; }
table { border-collapse: collapse; border-spacing: 0; }
fieldset, img { border: 0; }
address, caption, cite, code, dfn, rem, var { font-style: normal; font-weight: normal; }
ol, ul { list-style: none; }
caption, th { text-align: left; }
h1, h2, h3, h4, h5, h6 { font-size: 100%; font-weight: normal; }
q:before, q:after { content: ''; }
abbr, acronym { border: 0; }
section, article { display: block; }
/* base */
html { -webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; }
body { word-wrap : break-word; overflow-wrap : break-word; font-kerning: normal; -webkit-font-kerning: normal; font-size: 16px; font-family:'Helvetica Neue', YuGothic, "Yu Gothic", "游ゴシック", "游ゴシック体", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, sans-serif; text-align: center; letter-spacing: 0.05em; box-sizing: border-box; background-color: #ecece8; color: #000; margin: 0px; padding: 0em; line-height: 2em; font-weight:bold; }
img { vertical-align: bottom; height: auto; width: 100%; }
::selection { background: #333333; color: #FFF; }
::-moz-selection { background: #333333; }
/* link */
a:link, a:visited, a:active { color: #333333; text-decoration: none; }
a:hover { color: #8b8b8b; text-decoration: none; transition: color 0.01s linear; -webkit-transition: color 0.05s linear; transition: border-color 0.05s linear; -webkit-transition: border-color 0.05s linear; transition: background-color 0.05s linear; -webkit-transition: background-color 0.05s linear; }
/* clear */
.clear { clear: both; }
.cbox { zoom: 100%; }
.cbox:after { content: " "; clear: both; height: 0; display: block; visibility: hidden; }
/* options */
.r { border-radius: 50%; -webkit-border-radius: 50%; -moz-border-radius: 50%; }
.rl { -webkit-writing-mode: vertical-rl; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; }
.fab { font-size:1.3em; margin-right:0.45em; line-height:1em; vertical-align:middle; }
.fas { margin-left:0.45em; vertical-align:middle; }
.en { font-size:1.05em; line-height:1.85em; }
/* wrapper */
#wrapper { width: 90%; min-width:1000px; margin-right:auto; margin-left:auto; }
#header { text-align: left; margin-top: 4em; width: 95%; margin-right:auto; margin-left:auto;  }
#header .logo { width: 17%; margin-right:30%; min-width:150px; display:inline-block; vertical-align:top; }
#header .address { width: 37%; display:inline-block; vertical-align:top; }
#header .sns { width: 15%; display:inline-block; vertical-align:top; text-align:right; }

/* slide */
#slide { margin-top:3em; }

/* contents */
#contents { font-size:1.1em; text-align: left; margin-top:4em; width:85%; margin-right:auto; margin-left:auto; }
#contents #left { display:inline-block; width:40%; margin-right:4%; vertical-align:top; }
#contents #left p { margin-bottom:2em; }
#contents #left #copy { font-size:1.1em; line-height:2.2em; letter-spacing: 0.08em; margin-bottom:0.8em; }
#contents #left #caption { font-size:0.85em; line-height:2.2em; letter-spacing: 0.08em; margin-bottom:3em; white-space:nowrap; }
#contents #right { display:inline-block; width:55%; vertical-align:top; text-align:right; }
#contents #right #map { width:100%; }
#contents #right #googlemap { font-size:0.85em; }
#contents #right .button { text-align: center !important; border: 1px solid #000; width: 40%; padding-top: 0.6em; padding-bottom: 0.6em; margin-top: 3em; margin-left:auto; }
#contents #right .button:hover { cursor: pointer; color: #FFF; background-color: #333; padding-top: 0.6em; padding-bottom: 0.6em; border: 1px solid #000; }

/* instagram */
#instagram { margin-top:4em; width:85%; margin-right:auto; margin-left:auto; font-size:1.2em; text-align:left; }
#timeline { margin-top:4em; text-align:left; }
#timeline li { width:21%; margin-right:5%; display:inline-block; vertical-align:top; text-align:justify; }
#timeline li:last-child { margin-right:0; }
#timeline li { width:21%; margin-right:5%; display:inline-block; vertical-align:top; text-align:justify; }
#timeline .thumb { width: 300px; height: 300px; position:relative; border-radius: 300px; overflow:hidden; margin-right:auto; margin-left:auto; }
#timeline .thumb img { max-width: 140%; min-width: 100%; width: auto; min-height: 100%; max-height: 140%; height: auto; position: absolute; top: -40%; right: -40%; bottom: -40%; left: -40%; margin: auto; }
#timeline .date { font-size: 0.9em; line-height:1.75em; margin-top:1em; margin-bottom:0.3em; }
#timeline .caption { font-size: 0.9em; line-height:1.75em; }
#timeline .instagram-like { display:none; }
#timeline .comments-count { display:none; }

/* footer */
#footer { margin-top: 6em; margin-bottom: 3em; font-size: 0.9em; }
#footer ul { float:left; }
#footer li { display:inline-block; margin-right:4em; text-align:left; }
#footer .sns { float:right; text-align:right; }

/* media screen */
@media screen and (min-width: 1451px) and (max-width: 1550px) {
body { font-size: 16px; }
#timeline .thumb { width: 270px; height: 270px; position:relative; border-radius: 300px; overflow:hidden; }
}
@media screen and (min-width: 1381px) and (max-width: 1450px) {
body { font-size: 15px; }
#timeline .thumb { width: 250px; height: 250px; position:relative; border-radius: 300px; overflow:hidden; }
}
@media screen and (max-width: 1380px) {
body { font-size: 14px; }
#timeline .thumb { width: 220px; height: 220px; position:relative; border-radius: 300px; overflow:hidden; }
}
@media screen and (min-width: 551px) and (max-width: 1000px) {
body { font-size: 13px; }
#timeline .thumb { width: 200px; height: 200px; position:relative; border-radius: 300px; overflow:hidden; }
}
@media screen and (max-width: 550px) {
body { font-size: 13px; }
.spbr {display:block;}
/* wrapper */
#wrapper { width: 93%; min-width:300px; margin-right:auto; margin-left:auto; }
#header { text-align: left; margin-top: 4em; width: 85%; margin-right:auto; margin-left:auto; position:relative;  }
#header .logo { width: 20%; margin-right:auto; min-width:150px; display:block; margin-bottom:2.5em; }
#header .address { width: 100%; display:block; margin-bottom:1em; font-size:1.1em; }
#header .sns { position:absolute; right:0; top:0; width: 100%; display:block; text-align:right; }
/* slide */
#slide { margin-top:3em; }
/* contents */
#contents { font-size:1.1em; text-align: left; margin-top:3em; width:90%; margin-right:auto; margin-left:auto; }
#contents #left { display:block; width:100%; margin-right:0; }
#contents #left p { margin-bottom:2em; }
#contents #left #copy { font-size:1.1em; line-height:2.2em; letter-spacing: 0.08em;  }
#contents #left #caption { font-size:0.8em; line-height:2.2em; letter-spacing: 0.08em; margin-bottom:3em; white-space:nowrap; }
#contents #right { display:block; width:100%; vertical-align:top; text-align:right; }
#contents #right #map { width:100%; }
#contents #right #googlemap { font-size:0.85em; }
#contents #right .button { text-align: center !important; border: 1px solid #000; width: 100%; padding-top: 0.6em; padding-bottom: 0.6em; margin-top: 3em; margin-left:auto; }
#contents #right .button:hover { cursor: pointer; color: #FFF; background-color: #333; padding-top: 0.6em; padding-bottom: 0.6em; border: 1px solid #000; }
/* instagram */
#instagram { margin-top:4em; width:90%; margin-right:auto; margin-left:auto; font-size:1.1em; text-align:left; }
#timeline { width:85%; margin-right:auto; margin-left:auto; margin-top:4em; text-align:left; }
#timeline li { width:100%; margin-right:5%; display:block; margin-top:3em; }
#timeline li:last-child { margin-right:0; }
#timeline .thumb { width: 300px; height: 300px; position:relative; border-radius: 300px; overflow:hidden; margin-right:auto; margin-left:auto; }
#timeline .date { font-size: 0.9em; line-height:1.75em; margin-top:1em; margin-bottom:0.3em; }
#timeline .caption { font-size: 0.9em; line-height:1.75em; }
#timeline .instagram-like { display:none; }
#timeline .comments-count { display:none; }
/* footer */
#footer { margin-top: 6em; margin-bottom: 4em; font-size: 0.9em; width:90%; margin-right:auto; margin-left:auto; }
#footer ul { float:none; }
#footer li { display:block; margin-right:0; text-align:left; }
#footer .sns { float:none; text-align:left; }
}
@media screen and (max-width: 375px) {
body { font-size: 13px; }
#header { text-align: left; margin-top: 3em; width: 90%; margin-right:auto; margin-left:auto; position:relative;  }
#header .logo { width: 40%; margin-right:auto; min-width:80px; display:block; margin-bottom:2.5em; }
#header .address { width: 100%; display:block; margin-bottom:1em; font-size:1em; }
#header .sns { position:absolute; right:0; top:0; width: 100%; display:block; text-align:right; font-size:1em; }
/* instagram */
#timeline .thumb { width: 270px; height: 270px; position:relative; border-radius: 300px; overflow:hidden; margin-right:auto; margin-left:auto; }
}
@media screen and (max-width: 320px) {
body { font-size: 12px; }
/* instagram */
#timeline .thumb { width: 250px; height: 250px; position:relative; border-radius: 300px; overflow:hidden; margin-right:auto; margin-left:auto; }
}