@charset "Shift_JIS";
/* BASIC
--------------------------------------------------------- */
html { overflow-y: scroll; }

body { color: #fff; min-width: 320px; background-color: #000; background-image: url("../images/c-bg.jpg"); -moz-background-size: 100% auto; background-size: 100% auto; background-repeat: no-repeat; background-position: left top; }

body.top { background-image: none; background-color: #000; }

h1, h2, h3, h4, h5, h6, strong, .bold, .strong { font-weight: bold; font-family: 'HiraKakuProN-W6', 'Hiragino Kaku Gothic ProN', 'ヒラギノ角ゴ ProN W6', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', sans-serif; }

a { color: #000; text-decoration: none; font-weight: bold; }

a:link { -webkit-tap-highlight-color: rgba(255, 231, 70, 0.45); }

.container { display: block; width: 100%; max-width: 736px; margin: 0 auto; overflow: hidden; }

.contents-container { padding-bottom: 1em; }

/* TOP
--------------------------------------------------------- */
#top-bg { display: block; position: fixed; z-index: 1; width: 100%; height: 100%; left: 0; top: 0; max-width: 736px; }

@media only screen and (orientation: landscape) { #top-bg { position: absolute; } }

#top-bg img { width: 100%; height: auto; -webkit-filter: saturate(60%) brightness(3); filter: saturate(60%) brightness(3); opacity: 0; -webkit-transition: opacity 0.4s, -webkit-filter 1.0s 0.3s; transition: opacity 0.4s, -webkit-filter 1.0s 0.3s; transition: opacity 0.4s, filter 1.0s 0.3s; transition: opacity 0.4s, filter 1.0s 0.3s, -webkit-filter 1.0s 0.3s; }

@media only screen and (min-width: 737px) { #top-bg { left: 50%; margin-left: -368px; } }

.no-effect img { -webkit-filter: none !important; filter: none !important; opacity: 1 !important; }

#top-header { display: block; position: relative; z-index: 2; width: 100%; max-width: 736px; }

#top-header #top-back { display: block; width: 100%; max-width: 736px; position: relative; }

#top-header #top-back img { width: 100%; height: auto; opacity: 0; }

#top-header #top-catch { display: block; position: absolute; width: 100%; left: 0; top: 0; text-align: center; }

#top-header #top-catch img { margin-top: 10%; margin-left: auto; margin-right: auto; display: inline; position: relative; width: 86%; height: auto; -webkit-filter: saturate(60%) brightness(3); filter: saturate(60%) brightness(3); opacity: 0; -webkit-transition: opacity 0.9s, -webkit-filter 1.5s 0.4s; transition: opacity 0.9s, -webkit-filter 1.5s 0.4s; transition: opacity 0.9s, filter 1.5s 0.4s; transition: opacity 0.9s, filter 1.5s 0.4s, -webkit-filter 1.5s 0.4s; }

#top-header nav { display: block; position: absolute; z-index: 5; top: 8px; right: 5px; width: 100%; text-align: right; }

#top-header nav a { display: block; width: 25%; margin-left: auto; }

#top-header nav a img { width: 100%; max-width: 177px; height: auto; }

.fadeIn { opacity: 1 !important; -webkit-filter: none !important; filter: none !important; }

#top-menu-wrapper { display: block; position: relative; margin-top: 0; z-index: 20; text-align: center; background-color: #000000; padding-bottom: 2em; }

#top-menu-wrapper #top-menu-back { display: block; position: absolute; z-index: 21; left: 0; top: -11.5%; width: 100%; height: 100%; background: transparent url("../images/rock_ttl.png") no-repeat left top; -moz-background-size: 100% auto; background-size: 100% auto; }

#top-menu-wrapper h1 { display: block; position: absolute; overflow: hidden; text-indent: -100%; }

#top-menu-wrapper ul { width: 100%; margin-right: auto; margin-left: auto; display: inline-block; position: relative; padding: 0 2%; z-index: 30; margin-top: 7%; }

@media only screen and (min-width: 350px) { #top-menu-wrapper ul { margin-top: 9%; } }

@media only screen and (min-width: 460px) { #top-menu-wrapper ul { margin-top: 12%; } }

@media only screen and (min-width: 600px) { #top-menu-wrapper ul { margin-top: 15%; } }

#top-menu-wrapper ul li { display: inline-block; position: relative; width: 48%; text-align: center; vert-align: top; line-height: 0; }

#top-menu-wrapper ul li a { display: inline-block; width: 96%; position: relative; text-align: center; line-height: 0; }

#top-menu-wrapper ul li a img { width: 100%; height: auto; line-height: 0; }

#info { display: block; position: relative; z-index: 40; width: 91%; margin: 5.5% auto 0; padding: 13px 2px; -moz-border-radius: 1px; border-radius: 1px; background: #000000; border: 1px solid #888053; }

#info p { text-align: center; font-weight: bold; font-size: 20px; margin-left: auto; margin-right: auto; line-height: 0; margin-bottom: 0.3em; width: 20%; max-width: 100px; }

#info p img { text-align: center; display: inline-block; width: 100%; height: auto; }

#info ul { margin: 0px 10px 0px; font-size: 13px; }

#info ul li { display: inline-block; position: relative; padding-top: 4px; color: #fff; width: 100%; }

#info ul li dl dt { float: left; width: 5em; }

#info ul li dl dd { margin-left: 6em; }

#social { margin: 0px 0 14px; text-align: center; padding-bottom: 0px; }

#social a { display: inline-block; margin: 0 6px; line-height: 0; }

#social a img { display: inline-block; width: 50px; height: auto; line-height: 0; }

#copyright { padding-top: 1em; padding-bottom: 2em; font-size: 10px; font-family: Helvetica, Arial; text-align: center; }

#copyright p { text-align: center; margin: 0 auto; color: #fff; text-shadow: 0px 1px 7px 10px #22893d; }

#copyright p img { display: inline-block; position: relative; text-align: center; width: 90%; max-width: 500px; height: auto; }

#footer { position: relative; z-index: 50; padding-top: 40px; clear: both; background-color: #000; }

#footer #pagetop { width: 100%; text-align: center; }

#footer #pagetop a { display: inline-block; text-align: center; margin: 0 auto 7%; }

#footer #pagetop a img { display: inline-block; width: 75%; max-width: 492px; height: auto; }

#footer .copy { text-align: center; margin: 10px 0 0; }

#footer .copy img { width: 190px; height: auto; }

/* CONTENTS
--------------------------------------------------------- */
#c-head-bg { display: block; width: 100%; height: 96px; position: absolute; z-index: 2; left: 0; top: 0; background: url("../images/header-bg.png?v=1") center bottom; -moz-background-size: 820px auto; background-size: 820px auto; background-repeat: repeat-x; }

#contents-header { display: block; position: relative; width: 100%; position: relative; z-index: 3; }

#contents-header ul { position: relative !important; display: table; height: auto; padding: 15px 0px 9px; width: 100%; min-width: 100%; top: auto; left: auto; }

#contents-header ul li { display: table-cell; width: auto; vertical-align: middle; }

#contents-header ul li img { display: inline-block; height: 22px; width: auto; }

@media only screen and (orientation: landscape) { #contents-header ul li img { height: 30px; } }

#contents-header ul li.sanyo-cell { width: 31%; }

#contents-header ul li.sanyo-cell img { height: 26px; width: auto; }

#contents-header ul li a { text-align: center; display: block; }

#contents-header ul .ch-logo { text-align: left; padding-left: 6px; }

#contents-header ul .ch-menu { text-align: center; }

#contents-header ul .ch-open { display: none; }

#contents-header ul .ch-sanyo { text-align: right; padding-right: 5px; }

#modal-menu { position: absolute; top: -800px; width: 100%; max-width: 736px; z-index: 100; background: none; }

#modal-menu ul { width: 100%; margin-right: auto; margin-left: auto; display: inline-block; position: relative; padding: 0 2%; z-index: 30; margin-top: 0%; }

#modal-menu ul li { display: inline-block; position: relative; width: 48%; text-align: center; vert-align: top; line-height: 0; }

#modal-menu ul li a { display: inline-block; width: 100%; position: relative; text-align: center; line-height: 0; }

#modal-menu ul li a img { width: 100%; height: auto; line-height: 0; }

#modal-menu ul li a.selected { cursor: default !important; pointer-events: none !important; background: none !important; }

#modal-menu ul li a.selected img { -webkit-filter: saturate(150%) brightness(1.4) !important; filter: saturate(150%) brightness(1.4) !important; opacity: 1 !important; }

#modal-menu nav { padding-top: 6%; padding-bottom: 3%; background: rgba(24, 20, 40, 0.74); -moz-box-shadow: 0px 5px 10px 8px rgba(0, 0, 0, 0.4); box-shadow: 0px 5px 10px 8px rgba(0, 0, 0, 0.4); }

#modal-menu em { display: block; position: relative; padding: 4% 0; text-align: center; width: 100%; }

#modal-menu em a { display: inline-block; position: relative; text-align: center; width: 100%; }

#modal-menu em a img { width: 30%; max-width: 210px; height: auto; }

.contents { display: block; position: relative; line-height: 0; padding-top: 10%; }

@media only screen and (min-width: 460px) { .contents { padding-top: 8%; } }

@media only screen and (min-width: 600px) { .contents { padding-top: 6%; } }

.contents h1, .contents h2, .contents p { display: block; position: relative; width: 100%; margin: 0; padding: 0; line-height: 0; }

.contents h1 img, .contents h2 img, .contents p img { display: inline-block; position: relative; width: 100%; height: auto; line-height: 0; }

.contents h1 { padding-bottom: 4%; }

.contents h1, .contents h2 { max-width: 530px; margin-left: auto; margin-right: auto; }

#spec_btn { width: 100%; max-width: 600px; display: table; position: relative; margin: 13px auto -11px; }

#spec_btn li { display: table-cell; position: relative; width: 50%; max-width: 265px; vertical-align: top; text-align: center; }

#spec_btn li em, #spec_btn li a { display: inline-block; position: relative; width: 97%; }

#spec_btn li em img, #spec_btn li a img { display: inline; width: 100%; height: auto; }

#spec_btn li a img { margin-bottom: 1px; margin-top: 0px; display: inline-block; position: relative; line-height: 0; -webkit-transition: opacity 0.3s, -webkit-filter 0.3s; transition: opacity 0.3s, -webkit-filter 0.3s; transition: opacity 0.3s, filter 0.3s; transition: opacity 0.3s, filter 0.3s, -webkit-filter 0.3s; }

#spec_btn li em { padding-top: 4px; }

#spec-table { display: block; width: 95%; margin: 0 auto; text-align: center; }

#spec-table em { display: inline-block; width: 97%; margin: 0 auto; }

#spec-table #kyoutai { padding-top: 1.5%; padding-left: 5%; padding-right: 5%; }

#spec-table #banmen { padding-top: 4%; padding-bottom: 10px; }

#spec-table #btn_banmen, #spec-table #btn_kyoutai { display: inline-block; line-height: 0; width: 75%; max-width: 411px; margin: 2% auto 7%; text-align: center; }

#spec-table #btn_banmen img, #spec-table #btn_kyoutai img { display: inline-block; position: relative; line-height: 0; }

.youtube { display: block; position: relative; width: 100%; min-height: 200px; margin-left: auto; margin-right: auto; background-color: rgba(0, 0, 0, 0.76); }

.youtube iframe { margin-left: auto; margin-right: auto; display: block; position: relative; width: 97%; height: 100%; min-height: 200px; }

.search { display: block; position: relative; width: 100%; text-align: center; }

.search form { display: block; position: relative; }

.search img { width: 98%; max-width: 100%; text-align: center; margin-left: auto; margin-right: auto; }

.search .search_pworld { width: 60%; max-width: 100%; }

.search .area { display: block; width: 100%; text-align: center; margin-top: 10%; margin-bottom: 2%; }

.search #select2 { display: block; width: 100%; text-align: center; }

.search select { width: 62%; margin: 0 auto 3%; display: block; min-height: 30px; font-size: 90%; vertical-align: middle; opacity: 1; }

@media only screen and (orientation: landscape) { .search select { min-height: 45px; font-size: 160%; } }

.search .btn { display: block; width: 74%; margin: 0 auto; }

.search .btn input { width: 100%; height: auto; }