div.loading { position:fixed; left:0; top:0; width:100%; height:100%; background:#F2EDD9; z-index:999; }
div.loading::after { content:''; position:absolute; left:0; right:0; top:0; bottom:0; width:306px; height:172px; margin:auto; background:url(../images/loading.png) center center no-repeat; -webkit-animation:blink 1.0s linear 0s infinite; animation:blink 1.0s linear 0s infinite; }

@-webkit-keyframes blink { 0% { opacity:1.0; } 50% { opacity:0.25; } 100% { opacity:1.0; }}
@keyframes blink { 0% { opacity:1.0; } 50% { opacity:0.25; } 100% { opacity:1.0; }}

div.cover { display:block; content:''; position:fixed; left:0; top:0; width:100%; height:100%; background:url(../images/cover.jpg) top center no-repeat; background-size:cover; }

div#page { position:relative; min-width:750px; overflow:hidden; }

div#page header.page { height:2934px; background:url(../images/page_header.jpg) center top no-repeat; }
div#page header.page div.header { padding:514px 0 0 0; }
div#page header.page div.header h1 { position:relative; width:750px; margin:0 auto; padding:0 0 30px 0; }
div#page header.page div.header h1 p { position:relative; left:-57px; width:864px; }
div#page header.page div.header h1 span { display:block; position:absolute; right:39px; top:-53px; width:198px; height:200px; }
div#page header.page div.header nav { position:fixed; left:0; top:0; z-index:3; }
div#page header.page div.header nav a { position:relative; width:180px; height:180px; background:url(../images/nav_of.png) center center no-repeat; }
div#page header.page div.header nav a.on { background:url(../images/nav_on.png) center center no-repeat; }
div#page header.page div.header section.catch { width:697px; margin:0 auto; padding:0 0 80px 0; }
div#page header.page div.header section.catch div.section { position:relative; }
div#page header.page div.header section.catch div.section header.catch { height:55px; background:url(../images/paper_1.png) center top no-repeat; }
div#page header.page div.header section.catch div.section div.catch { background:url(../images/paper_2.png) center center repeat-y; }
div#page header.page div.header section.catch div.section div.catch p { text-align:center; font-size:1.8rem; line-height:1.75em; font-weight:400; }
div#page header.page div.header section.catch div.section footer.catch { height:55px; background:url(../images/paper_3.png) center bottom no-repeat; }
div#page header.page div.header section.teaser { width:697px; margin:0 auto; padding:0 0 80px 0; }
div#page header.page div.header section.teaser div.section { position:relative; }
div#page header.page div.header section.teaser div.section header.teaser { height:55px; background:url(../images/paper_1.png) center top no-repeat; }
div#page header.page div.header section.teaser div.section header.teaser h1 { position:absolute; left:0; right:0; top:-61px; width:418px; margin:auto; }
div#page header.page div.header section.teaser div.section div.teaser { padding:55px 0 0 0; background:url(../images/paper_2.png) center center repeat-y; }
div#page header.page div.header section.teaser div.section div.teaser h2 { padding:0 0 20px 0; text-align:center; font-size:1.8rem; line-height:1em; font-weight:400; }
div#page header.page div.header section.teaser div.section div.teaser div.iframe { width:590px; height:320px; margin:0 auto; overflow:hidden; }
div#page header.page div.header section.teaser div.section div.teaser div.iframe a { position:relative; }
div#page header.page div.header section.teaser div.section div.teaser div.iframe a::after { content:''; position:absolute; left:0; right:0; top:0; bottom:0; width:80px; height:80px; margin:auto; background:url(../images/teaser_play.png) center center no-repeat; }
div#page header.page div.header section.teaser div.section div.teaser div.iframe a img { width:100%; height:100%; }
div#page header.page div.header section.teaser div.section footer.teaser { height:55px; background:url(../images/paper_3.png) center bottom no-repeat; }
div#page header.page div.header section.materials { width:697px; margin:0 auto; padding:0 0 80px 0; }
div#page header.page div.header section.materials div.section { position:relative; }
div#page header.page div.header section.materials div.section header.materials { height:55px; background:url(../images/paper_1.png) center top no-repeat; }
div#page header.page div.header section.materials div.section header.materials h1 { position:absolute; left:0; right:0; top:-61px; width:418px; margin:auto; }
div#page header.page div.header section.materials div.section div.materials { padding:65px 0 0 0; background:url(../images/paper_2.png) center center repeat-y; }
div#page header.page div.header section.materials div.section div.materials h2 { width:590px; margin:0 auto; padding:0 0 15px 0; }
div#page header.page div.header section.materials div.section div.materials p { padding:0 0 10px 0; text-align:center; font-size:1.6rem; line-height:1.75em; font-weight:400; }
div#page header.page div.header section.materials div.section div.materials ul { padding:0 0 35px 0; text-align:center; font-size:0; line-height:0; }
div#page header.page div.header section.materials div.section div.materials ul li { display:inline-block; }
div#page header.page div.header section.materials div.section div.materials ul li a { padding:0 0 0 45px; text-align:left; font-size:1.8rem; line-height:98px; font-weight:400; letter-spacing:0.05em; color:#FFFEF1; box-sizing:border-box; }
div#page header.page div.header section.materials div.section div.materials ul li a span { font-size:1.5rem; line-height:98px; letter-spacing:-0.1em; }
div#page header.page div.header section.materials div.section div.materials ul:nth-of-type(1) li a { width:305px; height:98px; background:url(../images/materials_btn_1.png) center center no-repeat; }
div#page header.page div.header section.materials div.section div.materials ul:nth-of-type(2) li a { width:393px; height:98px; background:url(../images/materials_btn_2.png) center center no-repeat; }
div#page header.page div.header section.materials div.section div.materials ul:nth-of-type(3) li a { width:203px; height:98px; background:url(../images/materials_btn_3_of.png) center center no-repeat; }
div#page header.page div.header section.materials div.section div.materials ul:nth-of-type(3) li a.on { background:url(../images/materials_btn_3_on.png) center center no-repeat; }
div#page header.page div.header section.materials div.section div.materials ul:nth-of-type(4) { padding:0 0 5px 0; }
div#page header.page div.header section.materials div.section div.materials ul:nth-of-type(4) li a { width:393px; height:98px; background:url(../images/materials_btn_2.png) center center no-repeat; letter-spacing:0; }
div#page header.page div.header section.materials div.section footer.materials { height:55px; background:url(../images/paper_3.png) center bottom no-repeat; }
/**/
div#page header.page div.header nav { -webkit-transform:translate(-100%,0); transform:translate(-100%,0); }
div#page header.page div.header nav.on { -webkit-transform:translate(0,0); transform:translate(0,0); transition:all 0.5s cubic-bezier(0.215,0.61,0.355,1); }

div#page nav.page { position:fixed; left:-100%; top:0; width:100%; height:100%; background:rgba(33,55,42,0.95); overflow:hidden; z-index:2; transition:all 0.5s cubic-bezier(0.215,0.61,0.355,1); }
div#page nav.page div.nav {  width:100%; height:100%; box-sizing:border-box; }
div#page nav.page div.nav div.table { display:table; width:100%; height:100%; }
div#page nav.page div.nav div.table div.table-cell { display:table-cell; width:100%; height:100%; text-align:center; vertical-align:middle; }
div#page nav.page div.nav div.table div.table-cell div.scroll {}
div#page nav.page div.nav div.table div.table-cell div.scroll section { width:530px; margin:0 auto; padding:40px 0 0 0; }
div#page nav.page div.nav div.table div.table-cell div.scroll section ul { padding:1px 0 0 0; background:url(../images/nav_separate.png) center top no-repeat; }
div#page nav.page div.nav div.table div.table-cell div.scroll section ul li { background:url(../images/nav_separate.png) center bottom no-repeat; }
div#page nav.page div.nav div.table div.table-cell div.scroll section ul li a { padding:39px 0 40px 0; }
div#page nav.page div.nav div.table div.table-cell div.scroll section ul li a img { margin:0 auto; }
div#page nav.page div.nav div.table div.table-cell div.scroll aside.link { width:530px; margin:0 auto; padding:0 0 40px 0; }
div#page nav.page div.nav div.table div.table-cell div.scroll aside.link ul {}
div#page nav.page div.nav div.table div.table-cell div.scroll aside.link ul li { background:url(../images/nav_separate.png) center bottom no-repeat; }
div#page nav.page div.nav div.table div.table-cell div.scroll aside.link ul li a { padding:39px 0 40px 0; }
div#page nav.page div.nav div.table div.table-cell div.scroll aside.link ul li a img { margin:0 auto; }
div#page nav.page.on { -webkit-transform:translate(100%,0); transform:translate(100%,0); }

div#page div.page {}

div#page aside.page { height:1972px; }
div#page aside.page div.aside { padding:156px 0 0 0; }
div#page aside.page div.aside section.period { width:697px; margin:0 auto; padding:0 0 130px 0; }
div#page aside.page div.aside section.period div.section { position:relative; }
div#page aside.page div.aside section.period div.section header.period { height:55px; background:url(../images/paper_1.png) center top no-repeat; }
div#page aside.page div.aside section.period div.section header.period h1 { position:absolute; left:0; right:0; top:-61px; width:418px; margin:auto; }
div#page aside.page div.aside section.period div.section div.period { padding:55px 0 0 0; background:url(../images/paper_2.png) center center repeat-y; }
div#page aside.page div.aside section.period div.section div.period p { width:551px; margin:0 auto; padding:0 0 25px 0; }
div#page aside.page div.aside section.period div.section footer.period { height:55px; background:url(../images/paper_3.png) center bottom no-repeat; }
div#page aside.page div.aside section.process { width:697px; margin:0 auto; padding:0 0 130px 0; }
div#page aside.page div.aside section.process div.section { position:relative; }
div#page aside.page div.aside section.process div.section header.process { height:55px; background:url(../images/paper_1.png) center top no-repeat; }
div#page aside.page div.aside section.process div.section header.process h1 { position:absolute; left:0; right:0; top:-61px; width:418px; margin:auto; }
div#page aside.page div.aside section.process div.section div.process { padding:55px 0 0 0; background:url(../images/paper_2.png) center center repeat-y; }
div#page aside.page div.aside section.process div.section div.process p { width:394px; margin:0 auto; padding:0 0 40px 0; }
div#page aside.page div.aside section.process div.section div.process ul:nth-of-type(1) { width:555px; margin:0 auto; padding:0 0 20px 0; }
div#page aside.page div.aside section.process div.section div.process ul:nth-of-type(1) li { font-size:1.6rem; line-height:1.5em; padding:0 0 0 1em; text-indent:-1em; }
div#page aside.page div.aside section.process div.section div.process ul:nth-of-type(1) li a { display:inline; }
div#page aside.page div.aside section.process div.section div.process ul:nth-of-type(2) {}
div#page aside.page div.aside section.process div.section div.process ul:nth-of-type(2) li { width:589px; margin:0 auto; }
div#page aside.page div.aside section.process div.section div.process ul:nth-of-type(2) li a { width:589px; height:120px; text-align:center; font-size:2.4rem; line-height:120px; font-weight:400; letter-spacing:0.1em; color:#FFFEF1; background:url(../images/process_btn.png) center center no-repeat; }
div#page aside.page div.aside section.process div.section footer.process { height:55px; background:url(../images/paper_3.png) center bottom no-repeat; }
div#page aside.page div.aside section.contact { width:697px; margin:0 auto; padding:0 0 130px 0; }
div#page aside.page div.aside section.contact div.section { position:relative; }
div#page aside.page div.aside section.contact div.section header.contact { height:55px; background:url(../images/paper_1.png) center top no-repeat; }
div#page aside.page div.aside section.contact div.section header.contact h1 { position:absolute; left:0; right:0; top:-61px; width:418px; margin:auto; }
div#page aside.page div.aside section.contact div.section div.contact { padding:55px 0 0 0; background:url(../images/paper_2.png) center center repeat-y; }
div#page aside.page div.aside section.contact div.section div.contact h2 { padding:0 0 20px 0; text-align:center; font-size:1.8rem; line-height:1em; }
div#page aside.page div.aside section.contact div.section div.contact p { padding:0 0 10px 0; text-align:center; font-size:1.8rem; line-height:1.75em; }
div#page aside.page div.aside section.contact div.section div.contact p a { display:inline; letter-spacing:0.1em; }
div#page aside.page div.aside section.contact div.section div.contact ul { padding:0 0 10px 0; }
div#page aside.page div.aside section.contact div.section div.contact ul li { text-align:center; font-size:1.6rem; line-height:1.5em; }
div#page aside.page div.aside section.contact div.section footer.contact { height:55px; background:url(../images/paper_3.png) center bottom no-repeat; }

div#page footer.page { height:567px; background:url(../images/page_footer.jpg) center top no-repeat; }
div#page footer.page div.footer { padding:70px 0 0 0; }
div#page footer.page div.footer aside.link {}
div#page footer.page div.footer aside.link ul { padding:0 0 43px 0; }
div#page footer.page div.footer aside.link ul li { width:404px; margin:0 auto; }
div#page footer.page div.footer aside.share {}
div#page footer.page div.footer aside.share ul { padding:0 0 40px 0; text-align:center; font-size:0; line-height:0; }
div#page footer.page div.footer aside.share ul li { display:inline-block; padding:0 13px 0 13px; }
div#page footer.page div.footer small { display:block; text-align:center; font-size:1.4rem; line-height:1em; }
div#page footer.page div.footer small a { display:inline; color:#21372A; }

section.chorus { background:url(../images/page_main1.jpg) center top no-repeat,url(../images/page_main3.jpg) center bottom no-repeat,url(../images/page_main2.jpg) center top repeat-y; }
section.chorus div.section {}
section.chorus div.section header.chorus {}
section.chorus div.section header.chorus h1 { width:750px; margin:0 auto; }
section.chorus div.section div.chorus {}
section.chorus div.section div.chorus ul { width:720px; margin:0 auto; padding:0 0 40px 0; font-size:0; line-height:0; }
section.chorus div.section div.chorus ul li { display:inline-block; width:344px; padding:0 8px 16px 8px; vertical-align:top; }
section.chorus div.section div.chorus ul li a {}
section.chorus div.section div.chorus ul li a span:nth-of-type(1) { display:block; padding:16px 0 1px 0; background:url(../images/chorus_box1.png) center top no-repeat; }
section.chorus div.section div.chorus ul li a span:nth-of-type(1) img { width:328px; height:188px; margin:0 auto; }
section.chorus div.section div.chorus ul li a span:nth-of-type(2) { display:block; padding:15px 25px 31px 25px; text-align:center; font-size:0; line-height:0; background:url(../images/chorus_box2.png) center bottom no-repeat; }
section.chorus div.section div.chorus ul li a span:nth-of-type(2) b { display:inline-block; padding:0 10px 0 40px; text-align:left; font-size:1.8rem; line-height:25px; font-weight:400; color:#21372A; background:url(../images/chorus_play.png) top 1px left no-repeat; }
section.chorus div.section div.chorus p { padding:108px 0 40px 0; text-align:center; font-size:1.6rem; line-height:1em; }
section.chorus div.section footer.chorus {}
section.chorus div.section footer.chorus ul { padding:0 0 108px 0; text-align:center; font-size:0; line-height:0; }
section.chorus div.section footer.chorus ul li { display:inline-block; padding:0 12px 0 12px; vertical-align:top; }
section.chorus div.section footer.chorus ul li a { display:block; width:86px; height:86px; text-align:center; font-size:1.8rem; line-height:86px; background:url(../images/chorus_of.png) center center no-repeat; }
section.chorus div.section footer.chorus ul li span { display:block; width:86px; height:86px; text-align:center; font-size:1.8rem; line-height:86px; color:#ffffff; background:url(../images/chorus_on.png) center center no-repeat; }
section.chorus div.section footer.chorus ul li a.back { background:url(../images/chorus_left.png) center center no-repeat, url(../images/chorus_of.png) center center no-repeat; }
section.chorus div.section footer.chorus ul li a.next { background:url(../images/chorus_right.png) center center no-repeat, url(../images/chorus_of.png) center center no-repeat; }

aside.movie { width:640px; padding:30px 40px 40px 40px; background:url(../images/page_main1.jpg) center top no-repeat,url(../images/page_main3.jpg) center bottom no-repeat,url(../images/page_main2.jpg) center top repeat-y; box-sizing:border-box; }
aside.movie h1 { padding:0 0 20px 0; text-align:center; font-size:2.4rem; line-height:1.5em; }
aside.movie div.iframe {}
aside.movie div.iframe { position:relative; width:100%; padding:56.25% 0 0 0; }
aside.movie div.iframe iframe { position:absolute; top:0; left:0; width:100% !important; height:100% !important; }
aside.movie p { padding:20px 0 0 0; text-align:center; font-size:1.4rem; line-height:1.5em; }

/* from */
div#page header.page div.header section.teaser div.section header.teaser h1 { opacity:0; transition:all 0.25s ease-out; }
div#page header.page div.header section.teaser div.section div.teaser div.iframe { opacity:0; transition:all 0.25s ease-out; }
div#page header.page div.header section.materials div.section header.materials h1 { opacity:0; transition:all 0.25s ease-out; }
div#page header.page div.header section.materials div.section div.materials h2 { opacity:0; transition:all 0.25s ease-out; }
div#page header.page div.header section.materials div.section div.materials p { opacity:0; transition:all 0.25s ease-out; }
div#page header.page div.header section.materials div.section div.materials ul li { opacity:0; transition:all 0.25s ease-out; }
div#page aside.page div.aside section.period div.section header.period h1 { opacity:0; transition:all 0.25s ease-out; }
div#page aside.page div.aside section.period div.section div.period p { opacity:0; transition:all 0.25s ease-out; }
div#page aside.page div.aside section.process div.section header.process h1 { opacity:0; transition:all 0.25s ease-out; }
div#page aside.page div.aside section.process div.section div.process p { opacity:0; transition:all 0.25s ease-out; }
div#page aside.page div.aside section.process div.section div.process ul { opacity:0; transition:all 0.25s ease-out; }
div#page aside.page div.aside section.contact div.section header.contact h1 { opacity:0; transition:all 0.25s ease-out; }
div#page aside.page div.aside section.contact div.section div.contact h2 { opacity:0; transition:all 0.25s ease-out; }
div#page aside.page div.aside section.contact div.section div.contact p { opacity:0; transition:all 0.25s ease-out; }
div#page aside.page div.aside section.contact div.section div.contact ul { opacity:0; transition:all 0.25s ease-out; }
section.chorus div.section header.chorus h1 { opacity:0; transition:all 0.25s ease-out; }
section.chorus div.section div.chorus ul li { opacity:0; transition:all 0.25s ease-out; }
section.chorus div.section div.chorus p { opacity:0; transition:all 0.25s ease-out; }
section.chorus div.section footer.chorus ul { opacity:0; transition:all 0.25s ease-out; }

/* to */
div#page header.page div.header section.teaser div.section header.teaser h1.on { opacity:1; }
div#page header.page div.header section.teaser div.section div.teaser div.iframe.on { opacity:1; }
div#page header.page div.header section.materials div.section header.materials h1.on { opacity:1; }
div#page header.page div.header section.materials div.section div.materials h2.on { opacity:1; }
div#page header.page div.header section.materials div.section div.materials p.on { opacity:1; }
div#page header.page div.header section.materials div.section div.materials ul li.on { opacity:1; }
div#page aside.page div.aside section.period div.section header.period h1.on { opacity:1; }
div#page aside.page div.aside section.period div.section div.period p.on { opacity:1; }
div#page aside.page div.aside section.process div.section header.process h1.on { opacity:1; }
div#page aside.page div.aside section.process div.section div.process p.on { opacity:1; }
div#page aside.page div.aside section.process div.section div.process ul.on { opacity:1; }
div#page aside.page div.aside section.contact div.section header.contact h1.on { opacity:1; }
div#page aside.page div.aside section.contact div.section div.contact h2.on { opacity:1; }
div#page aside.page div.aside section.contact div.section div.contact p.on { opacity:1; }
div#page aside.page div.aside section.contact div.section div.contact ul.on { opacity:1; }
section.chorus div.section header.chorus h1.on { opacity:1; }
section.chorus div.section div.chorus ul li.on { opacity:1; }
section.chorus div.section div.chorus p.on { opacity:1; }
section.chorus div.section footer.chorus ul.on { opacity:1; }

@media only screen and (min-width:769px) {

html { background:#F2EDD9; }
body { color:#21372A; font-size:12px; font-size:1.2em; line-height:1em; overflow-wrap:break-word; word-wrap:break-word; }

a { display:block; color:#E56B18; text-decoration:none; transition:all 0.125s linear; }
a:hover { opacity:0.5; }
img { display:block; max-width:100%; }

div#page nav.page div.nav div.table div.table-cell div.scroll { height:100vh; overflow:auto; }

}

@media only screen and (max-width:768px) {

html { background:#F2EDD9; }
body { color:#21372A; font-size:12px; font-size:1.2em; line-height:1em; -webkit-text-size-adjust:100%; text-size-adjust:100%; overflow-wrap:break-word; word-wrap:break-word; }

a { display:block; color:#E56B18; text-decoration:none; }
img { display:block; max-width:100%; }

}