@charset "utf-8";

/* reset */
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; font-weight: normal; font-size: 100%; vertical-align: baseline; background: transparent; border: 0; outline: 0; }
body { line-height: 1; -webkit-text-size-adjust: 100%; }
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section { display: block; }
nav, ul { list-style: none; }
table { border-collapse: collapse; border-spacing: 0; }
input, textarea, select { margin: 0; height: 0; vertical-align: middle; font: inherit; border: 0; outline: 0; }
hr { margin: 0; padding: 0; height: 0; border: 0; }
a, a:active, a:hover, a:visited, a:focus { border: 0; outline: 0; }
a { -webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
a img { border: 0; }
.clearfix:before, .clearfix:after { display: table; content: ""; }
.clearfix:after { clear: both; }

/* #wnb_common_hd */
#wnb_common_hd { background: #26303c; }
#wnb_common_hd p { width: 960px; margin: 0 auto; text-align: left; line-height: 0; }
#wnb_common_hd p a { display: block; width: 160px; }
#wnb_common_hd p a img { margin: 1px 0 0 2px; }
#wnb_common_hd p a.hover img { opacity: 0.7; filter: alpha(opacity=70); -ms-filter: "alpha(opacity=70)"; }
@media screen and (max-width: 767px) {
	#wnb_common_hd.sp_none { display: none; }
}

/* body */
body { margin: 0; padding: 0; width: 100%; font-family: "ヒラギノ角ゴ ProN", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size: 100%; color: rgb(10, 10, 10); line-height: 1; background: rgb(255, 255, 255) url("../images/common/main_bg.gif") center top repeat; }

/* malibu_contents, main */
#malibu_contents { position: relative; margin: 0 auto; width: 100%; max-width: 1164px; overflow: hidden; }
main { position: relative; margin: 0 auto; width: 100%; max-width: 1164px; }
main p { text-align: justify; }

/* onlineshop */
#div-gpt-ad-1469518796001-0-1:hover img { opacity: 0.6; transition: all 0.2s ease-in-out; }

/* end, to_top */
hr.end { position: relative; margin: 0 auto; width: 100%; max-width: 1164px; height: 2px; background-color: rgb(63, 32, 33); }
#to_top { position: relative; margin: 0 auto; width: 100%; max-width: 1164px; height: 50px; background-color: rgb(63, 32, 33); }
#to_top a { display: block; position: relative; width: 100%; height: 50px; font-size: 0; text-indent: -9999px; }
#to_top a:before { display: block; position: absolute; left: 50%; top: 50%; margin-left: -10px; margin-top: -2px; width: 18px; height: 10px; content: ""; border-top: 3px solid rgb(240, 240, 240); -webkit-transform: rotate(-43deg); transform: rotate(-43deg); }
#to_top a:after { display: block; position: absolute; left: 50%; top: 50%; margin-left: -5px; margin-top: -2px; width: 18px; height: 10px; content: ""; border-top: 3px solid rgb(240, 240, 240); -webkit-transform: rotate(43deg); transform: rotate(43deg); }
#to_top.enter { background-color: rgb(230, 218, 184); transition: all 0.3s ease-in-out; }
#to_top.enter a:before { border-top: 3px solid rgb(63, 32, 33); transition: all 0.3s ease-in-out; }
#to_top.enter a:after { border-top: 3px solid rgb(63, 32, 33); transition: all 0.3s ease-in-out; }
#to_top.leave { background-color: rgb(63, 32, 33); transition: all 0.3s ease-in-out; }
#to_top.leave a:before { border-top: 3px solid rgb(240, 240, 240); transition: all 0.3s ease-in-out; }
#to_top.leave a:after { border-top: 3px solid rgb(240, 240, 240); transition: all 0.3s ease-in-out; }

/* share */
article.share { width: 100%; }
article.share section.contents { margin: 60px auto; width: 94%; max-width: 240px; }
article.share section.contents p.tagline { position: relative; margin: 0 auto; width: 240px; height: 250px; background: url("../images/common/malibu_visual.png") 90px top no-repeat; background-size: 120px; }
article.share section.contents p.tagline img { position: absolute; top: 50%; margin-top: -55px; width: 100%; }
article.share section.contents ul { display: -webkit-box; -webkit-box-pack: center; -webkit-justify-content: center; -webkit-align-items: flex-start; -webkit-flex-wrap: nowrap; display: flex; justify-content: center; align-items: flex-start; flex-wrap: nowrap; margin: 20px auto 0 auto; width: 152px; }
article.share section.contents ul li a { display: block; margin: 0 13px; width: 50px; height: 50px; text-align: center; font-size: 125%; color: rgb(255, 255, 255); line-height: 50px; background-color: rgb(245, 145, 25); background-position: center; background-repeat: no-repeat; border-radius: 50%; }
article.share section.contents ul li a:hover { background-color: rgb(63, 32, 33); transition: all 0.3s ease-in-out; }

/* burger */
#burger { display: block; position: relative; width: 50px; height: 50px; background: rgb(245, 145, 25) url("../images/common/burger.png") left top no-repeat; background-size: 100%; overflow: hidden; }
#burger.enter { background-color: rgb(63, 32, 33); transition: all 0.3s ease-in-out; }
#burger.leave { background-color: rgb(245, 145, 25); transition: all 0.3s ease-in-out; }
#burger.closed { background-position: left 0; transition: all 0.3s ease-in-out; }
#burger.opened { background-position: left -50px; transition: all 0.3s ease-in-out; }
#burger img { width: 100%; }
#burger.abs { position:absolute; top: 0; right: 0; }
#burger.fixed { position: fixed; top: 0; right: 0; }
#overlayer { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgb(41, 30, 28); opacity: 0; }
#overlayer.opened { opacity: 0.95; z-index: 998; -webkit-animation: openOverlayer 0.4s ease-in-out; animation: openOverlayer 0.4s ease-in-out; }
@-webkit-keyframes openOverlayer {
	0% { opacity: 0; z-index: -1; }
	100% { opacity: 0.95; z-index: 998; }
}
@keyframes openOverlayer {
	0% { opacity: 0; z-index: -1; }
	100% { opacity: 0.95; z-index: 998; }
}
#overlayer.closed { opacity: 0; z-index: -1; -webkit-animation: closeOverlayer 0.2s ease-in-out; animation: closeOverlayer 0.2s ease-in-out; }
@-webkit-keyframes closeOverlayer {
	0% { opacity: 0.95; z-index: 998; }
	100% { opacity: 0; z-index: -1; }
}
@keyframes closeOverlayer {
	0% { opacity: 0.95; z-index: 998; }
	100% { opacity: 0; z-index: -1; }
}

/* nav.global */
nav.global { display: none; position: fixed; top: 0; left: 0; right: 0; margin: 0 auto; width: 100%; height: 100%; }
nav.global ul.basic { position: absolute; top: 60px; left: 0; right: 0; margin: 0 auto; }
nav.global ul.basic li { margin-top: 35px; font-family: "Viga", sans-serif; font-size: 160%; color: rgb(255, 255, 255); text-align: center; }
nav.global ul.basic li.logo { margin: 0 auto; width: 60px; }
nav.global ul.basic li.logo a img { width: 100%;	}
nav.global ul.basic li.sns { margin-top: 20px; }
nav.global ul.basic li a { display: inline-block; color: rgb(255, 255, 255); text-decoration: none; }
nav.global ul.basic li a:link { color: rgb(255, 255, 255); }
nav.global ul.basic li a:visited { color: rgb(255, 255, 255); }
nav.global ul.basic li a:hover { color: rgb(255, 255, 255); text-decoration: none; }
nav.global ul.basic li a:active { color: rgb(255, 255, 255); text-decoration: none; }
nav.global ul.sns { display: -webkit-box; -webkit-box-pack: center; -webkit-justify-content: center; -webkit-align-items: flex-start; -webkit-flex-wrap: nowrap; display: flex; justify-content: center; align-items: flex-start; flex-wrap: nowrap; margin: 0 auto; width: 100%; }
nav.global ul.sns li { margin: 0 20px; }
nav.global ul.sns li a { display: inline-block; font-size: 65%; }

/* lazy: fadeIn (unimplemented) */
.fadeIn.first { opacity: 0; }
.fadeIn.on { opacity: 1; -webkit-animation: fadeIn 0.7s ease-out; animation: fadeIn 0.7s ease-out; }
@-webkit-keyframes fadeIn {
	0% { opacity: 0; }
	10% { opacity: 0; }
	100% { opacity: 1; }
}
@keyframes fadeIn {
	0% { opacity: 0; }
	10% { opacity: 0; }
	100% { opacity: 1; }
}

/* depth */
#burger { z-index: 1000; }
nav.global { z-index: 999; }
#overlayer { z-index: -1; } /* z-index: 998; */
hr.end { z-index: 997; }
#to_top  { z-index: 996; }

/* icon */
.dec-icon { display: inline-flex; justify-content: center; align-items: center; width: 1em; height: 1em; }
.dec-icon.icon-x-twitter { vertical-align: -0.1em; background: url("../images/common/x-twitter.svg") left top no-repeat; }