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-size: 100%; font: inherit; vertical-align: baseline; }
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block;}

html,body { height: 100%; }

a { outline: none; text-decoration: none; }

ul li { list-style-type: none; }
ol, ul { list-style: none; }

blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after { content: ''; content: none; }
table { border-collapse: collapse; border-spacing: 0; }
img { vertical-align: bottom; }

* { margin:0; padding: 0; }

::selection {
    background: #f7b500;
    color: #433b37;
}

@media screen and (min-width: 601px) {
body{ margin: 0; padding: 0; width: 100%; min-width:1080px; min-height:100vh; background: url(../images/bg01.jpg);}
.content { position:relative; width: 100%; min-width:1080px; min-height: 980px; }
.content .menu_sp { position:absolute; top:0; left: 0; width: 240px; height:100%; z-index: 100000; pointer-events: none; }
}
@media screen and (max-width: 600px) {
body{ margin: 0; padding: 0; width: 100%; min-height:100vh; background: url(../images/bg01.jpg); }
.content { position:relative; width:600px; min-height: 980px; }
.content .menu_sp { display: none; }
}

.story_sec { opaciry:0; transition-duration: 1s; }

@media screen and (min-width: 1301px) {
.pc_r {}
.mb_r { display: none; }
}
@media all and (min-width: 601px) and (max-width: 1300px) {
.pc_r {}
.mb_r { display: none; }
}
@media screen and (max-width: 600px) {
.pc_r { display: none; }
.mb_r {}
}

/* MENU SECTION */

#menu_fl.index { position: absolute; top:0; left:0; width:240px; height:100vh; min-height:800px; transition-duration: 1s; z-index:100000; }
#menu_fl.sub { position: -webkit-sticky; position: sticky; float: left; top:0; left:0; width:240px; height:800px; transition-duration: 1s; z-index:100000; }

#sub_menu_fl { position: fixed; top:0; left:0; height:100vh;/* min-height:800px;*/ transition-duration: 1s; opacity:0; z-index: 99999; }
#menu_fl.index .sub_logo ,#menu_fl.index .sub_social_fl,#menu_fl.index .sub_social_mbfl { display:none; }
#sub_menu_fl .sub_social_fl { display:none; }

@media screen and (min-width: 1301px) {
.menu_sfl { display:none; }
#sub_menu_fl .sub_popbtm { position:absolute; top:50%; left:-60px; margin: -52px 0 0 0 ; width:60px; height: 104px; z-index:2; transition-duration:0.5s;  }
#sub_menu_fl .sub_popbtm2 { position:absolute; top:50%; left:-60px; margin: -52px 0 0 0 ; width:60px; height: 104px; background: url(../images/keru_sidebtm.png) no-repeat center center; background-position:100% auto; z-index:1; transition-duration:0.5s; transform: rotate(-180deg); }
#menu_fl.index .menu_cc     { position:absolute; top:50%; left:0px; margin: -250px 0 0 0 ; width:200px; height: 500px; padding:200px 0 0 0; transition-duration: 0.5s; z-index:100000;}
#menu_fl.sub .menu_cc       { position:absolute; top:50%; left:0px; margin: -235px 0 0 0 ; width:200px; height: 500px; padding:50px 0 0 0; transition-duration: 0.5s; z-index:100000;}
#sub_menu_fl .menu_cc { position:absolute; top:50%; left:-240px; margin: -250px 0 0 0 ; width:200px; height: 500px; transition-duration: 0.5s; z-index:3; }
#sub_menu_fl .sub_popbtm:hover + .menu_cc { position: absolute; left: 0; }
#sub_menu_fl .menu_cc:hover { left: 0; }
#sub_menu_fl .menu_cc:hover + .sub_popbtm2 { position: absolute; transition-duration: 0.5s; opacity:0; }
}
@media all and (min-width: 601px) and (max-width: 1300px) {
.menu_sfl { display:none; }
#sub_menu_fl .sub_popbtm { position:absolute; top:50%; left:-60px; margin: -52px 0 0 0 ; width:60px; height: 104px; z-index:2; transition-duration:0.5s; }
#sub_menu_fl .sub_popbtm2 { position:absolute; top:50%; left:-60px; margin: -52px 0 0 0 ; width:60px; height: 104px; background: url(../images/keru_sidebtm.png) no-repeat center center; background-position:100% auto;  transition-duration:0.5s; transform: rotate(-180deg); }
#menu_fl.index .menu_cc     { position:absolute; top:50%; left:0px; margin: -250px 0 0 0 ; width:200px; height: 500px; padding:200px 0 0 0; transition-duration: 0.5s; z-index:100000; }
#menu_fl.sub .menu_cc       { position:absolute; top:50%; left:0px; margin: -235px 0 0 0 ; width:200px; height: 500px; padding:50px 0 0 0; transition-duration: 0.5s; z-index:100000;}
#sub_menu_fl .menu_cc { position:absolute; top:50%; left:-240px; margin: -250px 0 0 0 ; width:200px; height: 500px; transition-duration: 0.5s; z-index:3; }
#sub_menu_fl .sub_popbtm:hover + .menu_cc { position: absolute; left: 0; }
#sub_menu_fl .menu_cc:hover { left: 0; }
#sub_menu_fl .menu_cc:hover + .sub_popbtm2 { position: absolute; transition-duration: 0.5s; opacity:0; }
}
@media screen and (max-width: 600px) {
.menu_sfl {}
#menu_fl { display:none; }
#sub_menu_fl { display:none; }
.menu_fl ul.menu_cc { position:absolute; top:50%; left:-200px; margin: -250px 0 0 0 ; width:200px; height: 500px; background: rgba(0,0,0,0.50); }
}

/* MENU SECTION */
.menu_btm_01 { width:240px; height:40px; background:url(../images/menu_btm/menu_btm01.png) no-repeat, rgba(74,65,60,0.8); background-size:90% auto; background-position: 20px center; border-radius: 0 30px 30px 0; margin: 0 0 5px 0; transition-duration: 0.5s; }
.menu_btm_02 { width:240px; height:40px; background:url(../images/menu_btm/menu_btm02.png) no-repeat, rgba(74,65,60,0.8); background-size:90% auto; background-position: 20px center; border-radius: 0 30px 30px 0; margin: 0 0 5px 0; transition-duration: 0.5s;  }
.menu_btm_03 { width:240px; height:40px; background:url(../images/menu_btm/menu_btm03.png) no-repeat, rgba(74,65,60,0.8); background-size:90% auto; background-position: 20px center; border-radius: 0 30px 30px 0; margin: 0 0 5px 0; transition-duration: 0.5s; }
.menu_btm_04 { width:240px; height:40px; background:url(../images/menu_btm/menu_btm04.png) no-repeat, rgba(74,65,60,0.8); background-size:90% auto; background-position: 20px center; border-radius: 0 30px 30px 0; margin: 0 0 5px 0; transition-duration: 0.5s; }
.menu_btm_05 { width:240px; height:40px; background:url(../images/menu_btm/menu_btm05.png) no-repeat, rgba(74,65,60,0.8); background-size:90% auto; background-position: 20px center; border-radius: 0 30px 30px 0; margin: 0 0 5px 0; transition-duration: 0.5s; }
.menu_btm_06 { width:240px; height:40px; background:url(../images/menu_btm/menu_btm06.png) no-repeat, rgba(74,65,60,0.8); background-size:90% auto; background-position: 20px center; border-radius: 0 30px 30px 0; margin: 0 0 5px 0; transition-duration: 0.5s; }
.menu_btm_07 { width:240px; height:40px; background:url(../images/menu_btm/menu_btm07.png) no-repeat, rgba(74,65,60,0.8); background-size:90% auto; background-position: 20px center; border-radius: 0 30px 30px 0; margin: 0 0 5px 0; transition-duration: 0.5s; }
.menu_btm_08 { width:240px; height:40px; background:url(../images/menu_btm/menu_btm08.png) no-repeat, rgba(74,65,60,0.8); background-size:90% auto; background-position: 20px center; border-radius: 0 30px 30px 0; margin: 0 0 5px 0; transition-duration: 0.5s; }
.menu_btm_09 { width:240px; height:40px; background:url(../images/menu_btm/menu_btm09.png) no-repeat, rgba(74,65,60,0.8); background-size:90% auto; background-position: 20px center; border-radius: 0 30px 30px 0; margin: 0 0 5px 0; transition-duration: 0.5s; }
.menu_btm_10 { width:240px; height:40px; background:url(../images/menu_btm/menu_btm10.png) no-repeat, rgba(74,65,60,0.8); background-size:90% auto; background-position: 20px center; border-radius: 0 30px 30px 0; margin: 0 0 5px 0; transition-duration: 0.5s; }

a:hover .menu_btm_01 { width:320px; height:40px; background:url(../images/menu_btm/menu_btm01.png) no-repeat, rgba(236,174,65,0.8); background-size:90% auto; background-position: 20px center; border-radius: 0 30px 30px 0; margin: 0 0 5px 0; transition-duration: 0.5s; }
a:hover .menu_btm_02 { width:320px; height:40px; background:url(../images/menu_btm/menu_btm02.png) no-repeat, rgba(236,174,65,0.8); background-size:90% auto; background-position: 20px center; border-radius: 0 30px 30px 0; margin: 0 0 5px 0; transition-duration: 0.5s; }
a:hover .menu_btm_03 { width:320px; height:40px; background:url(../images/menu_btm/menu_btm03.png) no-repeat, rgba(236,174,65,0.8); background-size:90% auto; background-position: 20px center; border-radius: 0 30px 30px 0; margin: 0 0 5px 0; transition-duration: 0.5s; }
a:hover .menu_btm_04 { width:320px; height:40px; background:url(../images/menu_btm/menu_btm04.png) no-repeat, rgba(236,174,65,0.8); background-size:90% auto; background-position: 20px center; border-radius: 0 30px 30px 0; margin: 0 0 5px 0; transition-duration: 0.5s; }
a:hover .menu_btm_05 { width:320px; height:40px; background:url(../images/menu_btm/menu_btm05.png) no-repeat, rgba(236,174,65,0.8); background-size:90% auto; background-position: 20px center; border-radius: 0 30px 30px 0; margin: 0 0 5px 0; transition-duration: 0.5s; }
a:hover .menu_btm_06 { width:320px; height:40px; background:url(../images/menu_btm/menu_btm06.png) no-repeat, rgba(236,174,65,0.8); background-size:90% auto; background-position: 20px center; border-radius: 0 30px 30px 0; margin: 0 0 5px 0; transition-duration: 0.5s; }
a:hover .menu_btm_07 { width:320px; height:40px; background:url(../images/menu_btm/menu_btm07.png) no-repeat, rgba(236,174,65,0.8); background-size:90% auto; background-position: 20px center; border-radius: 0 30px 30px 0; margin: 0 0 5px 0; transition-duration: 0.5s; }
a:hover .menu_btm_08 { width:320px; height:40px; background:url(../images/menu_btm/menu_btm08.png) no-repeat, rgba(236,174,65,0.8); background-size:90% auto; background-position: 20px center; border-radius: 0 30px 30px 0; margin: 0 0 5px 0; transition-duration: 0.5s; }
a:hover .menu_btm_09 { width:320px; height:40px; background:url(../images/menu_btm/menu_btm09.png) no-repeat, rgba(236,174,65,0.8); background-size:90% auto; background-position: 20px center; border-radius: 0 30px 30px 0; margin: 0 0 5px 0; transition-duration: 0.5s; }
a:hover .menu_btm_10 { width:320px; height:40px; background:url(../images/menu_btm/menu_btm10.png) no-repeat, rgba(236,174,65,0.8); background-size:90% auto; background-position: 20px center; border-radius: 0 30px 30px 0; margin: 0 0 5px 0; transition-duration: 0.5s; }

/* FOOTER SECTION */

@keyframes footbg { 0% {background-position: 0 0;} 100% {background-position:300px 0;}}