html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video { margin: 0; padding: 0; border: 0; font: inherit; font-size: 100%; vertical-align: baseline; }

html { line-height: 1; }

ol, ul { list-style: none; }

table { border-collapse: collapse; border-spacing: 0; }

caption, th, td { text-align: left; font-weight: normal; vertical-align: middle; }

q, blockquote { quotes: none; }
q:before, q:after, blockquote:before, blockquote:after { content: ""; content: none; }

a img { border: none; }

article, aside, details, figcaption, figure, footer, header, hgroup, main, menu, nav, section, summary { display: block; }

.sample { overflow: hidden; *zoom: 1; }

body { background: url('../images/content_bg_01.gif?1512468451') center top; background-size: 800px; }

.lateIe { background: white; color: black; text-align: center; font-size: 10px; line-height: 1.6; padding: 1em 0; }

section { width: 800px; margin: 60px auto; overflow: hidden; *zoom: 1; }
section img { max-width: 800px; }

.movie { position: relative; }
.movie .movie_button { width: 700px; height: 394px; position: absolute; margin: auto; top: 120px; left: 0; right: 0; }

.story { position: relative; }
.story .okarin_right { width: 120px; position: absolute; top: 140px; right: 65px; }

.chara { position: relative; }
.chara .okarin_run { width: 80px; position: absolute; top: 160px; left: 50px; }

hr { width: 800px; height: 38px; border: none; }

.head { width: 100%; margin-top: 0; padding: 0 0 50px; text-align: center; background: #efeae2 url('../images/section_head_bg.png?1513052741') repeat-x center bottom; }
.head .head_bar { width: 100%; background: #e60012; text-align: center; }
.head .head_bar h1 { max-width: 800px; margin: auto; text-align: left; }
.head .head_bar h1 img { max-width: 800px; margin: auto; display: block; }
.head .main_window { margin-top: -35px; }

.check { position: relative; }
.check .link01 { position: absolute; background: red; top: 60px; left: 32px; width: 600px; height: 30px; background: url('../images/section_05_link.png?1513157148') no-repeat; background-size: 1200px; background-position: 0 0; text-indent: 100%; white-space: nowrap; overflow: hidden; }
.check .link01:hover { background-position: -600px 0; }

.check .link02 { 
    position: absolute;
    top: 267px;
    left: 80px;
    width: 640px;
}
.check .link02 img {
    display: block;
    width: 100%;
    height: auto;
}
.check .link02:hover {
    animation-name: BLINK;
    animation-duration: 400ms;
    animation-iteration-count: 1;
}
@keyframes BLINK {
	0% { opacity: 0;	}
    100% { opacity: 1;	}
}

.booking { position: relative; }
.booking ul { width: 92%; position: absolute; margin: auto; top: 150px; right: 0; bottom: 0; left: 0; color: white; }
.booking ul .link01, .booking ul .link02, .booking ul .link03, .booking ul .link04, .booking ul .link05, .booking ul .link06, .booking ul .link07, .booking ul .link08, .booking ul .link09 { width: 224px; margin-right: 20px; margin-bottom: 40px; float: left; text-indent: 100%; white-space: nowrap; overflow: hidden; }
.booking ul .link01 a, .booking ul .link02 a, .booking ul .link03 a, .booking ul .link04 a, .booking ul .link05 a, .booking ul .link06 a, .booking ul .link07 a, .booking ul .link08 a, .booking ul .link09 a { display: block; width: 224px; height: 33px; }
.booking ul .link03, .booking ul .link06, .booking ul .link09 { margin-right: 0; }
.booking ul .link01 { width: 224px; height: 30px; background: url('../images/section_06_link.png?1513156523'); background-size: 448px; background-position: 0 0; }
.booking ul .link01:hover { background-position: 223px 0; }
.booking ul .link02 { width: 224px; height: 30px; background: url('../images/section_06_link.png?1513156523'); background-size: 448px; background-position: 0 -30px; }
.booking ul .link02:hover { background-position: 223px -30px; }
.booking ul .link03 { width: 224px; height: 30px; background: url('../images/section_06_link.png?1513156523'); background-size: 448px; background-position: 0 -60px; }
.booking ul .link03:hover { background-position: 223px -60px; }
.booking ul .link04 { width: 224px; height: 30px; background: url('../images/section_06_link.png?1513156523'); background-size: 448px; background-position: 0 -90px; }
.booking ul .link04:hover { background-position: 223px -90px; }
.booking ul .link05 { width: 224px; height: 30px; background: url('../images/section_06_link.png?1513156523'); background-size: 448px; background-position: 0 -120px; }
.booking ul .link05:hover { background-position: 223px -120px; }
.booking ul .link06 { width: 224px; height: 30px; background: url('../images/section_06_link.png?1513156523'); background-size: 448px; background-position: 0 -150px; }
.booking ul .link06:hover { background-position: 223px -150px; }
.booking ul .link07 { width: 224px; height: 30px; background: url('../images/section_06_link.png?1513156523'); background-size: 448px; background-position: 0 -180px; }
.booking ul .link07:hover { background-position: 223px -180px; }
.booking ul .link08 { width: 224px; height: 30px; background: url('../images/section_06_link.png?1513156523'); background-size: 448px; background-position: 0 -210px; }
.booking ul .link08:hover { background-position: 223px -210px; }
.booking ul .link09 { width: 224px; height: 30px; background: url('../images/section_06_link.png?1513156523'); background-size: 448px; background-position: 0 -240px; }
.booking ul .link09:hover { background-position: 223px -240px; }

.sns ul { width: 36%; margin: auto; display: table; }
.sns ul li { display: table-cell; vertical-align: middle; text-align: center; width: 25%; color: white; }
.sns ul li img { width: 40px; }

footer { padding: 60px 0; text-align: center; background: black url('../images/footer_bg.png?1512726441') repeat-x center top; }
footer img { 
    margin: 0 auto;
    max-width: 600px; 
    height: auto;
    display: block;
}
footer small {
    color: #fff;
    font-size: 90%;
}

.walk_left { background: url('../images/okarin_walk_01.gif?1513054992') repeat-x center bottom; background-size: 76px; }

.walk_right { background: url('../images/okarin_walk_02.gif?1513054945') repeat-x center bottom; background-size: 76px; }