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%; scroll-behavior: smooth; } 
html { overflow-y: scroll; }

@media screen and (min-width: 601px) {
body { position: relative; margin: 0; padding: 0; width: 100%; }
body.index { height: 100vh; min-height: 860px; }
.background1 { background: url("../images/foot_bg01.png") no-repeat bottom center , url("../images/bg.jpg") top center ; background-size:100% auto , 1200px 1200px ;  }
.background2 { background: url("../images/foot_bg02.png") no-repeat bottom center , url("../images/bg.jpg") top center ; background-size:100% auto , 1200px 1200px ;  }
.background3 { background: url("../images/foot_bg03.png") no-repeat bottom center , url("../images/bg.jpg") top center ; background-size:100% auto , 1200px 1200px ;  }
.background4 { background: url("../images/foot_bg04.png") no-repeat bottom center , url("../images/bg.jpg") top center ; background-size:100% auto , 1200px 1200px ;  }
.background5 { background: url("../images/foot_bg05.png") no-repeat bottom center , url("../images/bg.jpg") top center ; background-size:100% auto , 1200px 1200px ;  }
.background6 { background: url("../images/foot_bg06.png") no-repeat bottom center , url("../images/bg.jpg") top center ; background-size:100% auto , 1200px 1200px ;  }
}
@media screen and (max-width: 600px) {
body { position: relative; margin: 0; padding: 0; width: 100%; }
.background1 { background: url("../images/foot_bg01.png") no-repeat bottom center , url("../images/bg.jpg") top right ; background-size: auto 250px , 1200px 1200px ;  }
.background2 { background: url("../images/foot_bg02.png") no-repeat bottom center , url("../images/bg.jpg") top right ; background-size: auto 250px , 1200px 1200px ;  }
.background3 { background: url("../images/foot_bg03.png") no-repeat bottom center , url("../images/bg.jpg") top right ; background-size: auto 250px , 1200px 1200px ;  }
.background4 { background: url("../images/foot_bg04.png") no-repeat bottom center , url("../images/bg.jpg") top right ; background-size: auto 250px , 1200px 1200px ;  }
.background5 { background: url("../images/foot_bg05.png") no-repeat bottom center , url("../images/bg.jpg") top right ; background-size: auto 250px , 1200px 1200px ;  }
.background6 { background: url("../images/foot_bg06.png") no-repeat bottom center , url("../images/bg.jpg") top right ; background-size: auto 250px , 1200px 1200px ;  }
}

.clear { width:100%; height:1px; clear: both; }

canvas { position: fixed; top:0; left: 0; width: 100%; height: 100%; z-index: -1; transition-duration:1s; opacity: 1; pointer-events: none; filter: blur(1px); }

a { outline: none; text-decoration: none; color:#0B0A6B; transition-duration: 0.3s; }

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; }

.clear { clear: both; width: 100%; }

#contents {height:600px;}

::selection { background: #f7b500; color: #fff; }

/* header */

@media screen and (min-width: 601px) {
#header { width:100%; min-width: 1200px; position: fixed; top:0; left: 0; z-index: 100; transition-duration: 1s; height:110px; padding:20px 20px; box-sizing: border-box; overflow: hidden; }
#header .logo_fl { float: left; width:330px; height: 70px; background: url( ../images/logo.png) top center no-repeat; background-size:auto 100%  ; }
#header .logo_fl .link_sp { width:330px; height: 70px; }
#header ul.menu_fl { float: left; width: 560px; margin: 0 0 0 15px; }
#header ul.menu_fl li { float: left; height:35px; padding:2px 0 0 0; box-sizing: border-box; }
#header ul.menu_fl li a { font-family: 'Spartan', sans-serif; font-size: 18px; font-weight:700; color:#575757; transition-duration:0.5s; }
#header ul.menu_fl li div.btm { float: left; width:100%;}
.m_logo_fl { display: none; }
.menu_tit01 { width:110px; } .menu_tit02 { width:190px; } .menu_tit03 { width:150px; }.menu_tit04 { width:100px; }
.menu_tit05 { width:110px; } .menu_tit06 { width:190px; } .menu_tit07 { width:150px; } .menu_tit08 { width:100px; }
li.menu_tit01 a:hover div { color:#e85298; transition-duration:0.5s; }
li.menu_tit02 a:hover div { color:#f39950; transition-duration:0.5s; }
li.menu_tit03 a:hover div { color:#abcd03; transition-duration:0.5s; }
li.menu_tit04 a:hover div { color:#00b4e6; transition-duration:0.5s; }
li.menu_tit05 a:hover div { color:#b062a4; transition-duration:0.5s; }
li.menu_tit06 a:hover div { color:#ec6e74; transition-duration:0.5s; }
li.menu_tit07 a:hover div { color:#fcc800; transition-duration:0.5s; }
li.menu_tit08 a:hover div { color:#61c1bd; transition-duration:0.5s; }
#header ul.social_fl { float: right; width: 120px; margin: 0 0 0 0px; }
#header ul.social_fl li { float: right; width: 38px; height:36px; margin: 0 0 0 20px; }
#header ul.social_fl li.twi_btm .btm { width: 44px; height:38px; background: url("../images/twi_ico.png") no-repeat center center ; background-size: auto 90%; }
#header ul.social_fl li.insta_btm .btm { width: 40px; height:38px; background: url("../images/insta_ico.png") no-repeat center center ; background-size: auto 90%; }
.head_bg { width:100%; min-width: 1200px; position: absolute; top:-100px; left: 0; z-index: -1; transition-duration: 1s; height:100px; background:rgba(255,255,255,0.7); }

nav.mb_menu { display:none; }
.navToggle { display:none; }

.pc_r {}
.mb_r { display: none; }
}
@media screen and (max-width: 600px) {
#header { width:100%; position: fixed; top:0; left: 0; z-index: 100; transition-duration: 1s; height:110px; padding:20px 20px; box-sizing: border-box; }
.head_bg { display: none; opacity: 0; }
#header ul.menu_fl { display: none; }

#header .m_logo_fl { position:absolute; top:15px; left:20px; width:430px; height: 65px; background: url( ../images/logo.png) top left no-repeat; background-size:auto 100%  ; }
#header .m_logo_fl .link_sp { width:430px; height: 65px; }

nav.mb_menu { position: absolute; z-index: 102; top: 0; left: 0; background: #65d0f6; color: #317DE3; text-align: center; transform: translateY(-100%); transition: all 0.6s; width: 600px; height: 100vh; padding:90px 0 0 0; box-sizing: border-box; }
nav.mb_menu ul { background: #FFF; margin: 0 auto; padding: 0; width: 100%; }
nav.mb_menu ul li { font-family: 'Spartan', sans-serif; font-weight:600; font-size: 1.25em; list-style-type: none; padding: 0; width: 100%; border-bottom: 1px dotted #65d0f6; }
nav.mb_menu ul li:last-child { padding-bottom: 0; border-bottom: none; }
nav.mb_menu ul li a { display: block; color: #000; padding: 1.25em 0; }
nav.mb_menu.active { transform: translateY(0%); }

.navToggle { display: block; position: absolute; right: 13px; top: 12px; width: 64px; height: 64px; border-radius: 32px; box-sizing: border-box; cursor: pointer; z-index: 103; background: #65d0f6; text-align: center; }
.navToggle span { display: block; position: absolute; width: 30px; height: 3px; background: #FFF;  border-radius:3px;  -webkit-transition: .35s ease-in-out; -moz-transition: .35s ease-in-out; transition: .35s ease-in-out; left: 18px; }
.navToggle span:nth-child(1) { top: 18px; }
.navToggle span:nth-child(2) { top: 30px; }
.navToggle span:nth-child(3) { top: 42px; }
.navToggle span:nth-child(4) { border: none; color: #317DE3; font-size: 9px; font-weight: bold; top: 46px; }
.navToggle.active span:nth-child(1) { top: 30px; left: 18px; -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); transform: rotate(-45deg); }
.navToggle.active span:nth-child(2),
.navToggle.active span:nth-child(3) { top: 30px; -webkit-transform: rotate(45deg); -moz-transform: rotate(45deg); transform: rotate(45deg); }

.social_sp { position: relative; width: 300px; height:100px; margin: 0 auto; }
.social_sp .twi_btm .btm { position: absolute; top:20px; left:50%; width: 64px; height:64px; background: url("../images/twi_ico.png") no-repeat center center , #FFF ; background-size: auto 38px; border-radius:50%; margin: 0 0 0 -67px; }
.social_sp .insta_btm .btm { position: absolute; top:20px; left:50%; width: 64px; height:64px; background: url("../images/insta_ico.png") no-repeat center center , #FFF ; background-size: auto 38px; border-radius:50%; margin: 0 0 0 17px;  }

.pc_r { display: none; }
.mb_r {}
}

.no_link , .no_link a { pointer-events:none; }
.no_link div { opacity:0.5; }

.cate_link_fl .no_link { display:none; }

#head_menu .logo_fl { width:100%; height:120px; background: url(../images/pierrot_logo.png) center center no-repeat, #F1F1F1; background-size:120px auto, auto auto;  }

/* content */
@media screen and (min-width: 601px) {
#content_fl { position: relative; width: 100%; min-width: 1200px; margin: 0 auto; box-sizing: border-box; }
#content_fl.index { position: relative; height:100%; min-height: 860px;}
#content_fl.content { padding:110px 0  0; min-height: 100vh; }
#content_fl.chara { padding:110px 0 150px  0; min-height: 100vh; }

.cate_title { font-family: 'M PLUS 1p', sans-serif; font-size:60px; font-weight:700; color:#524e4e; padding: 10px 30px; }
.cate_title2 { font-family: 'Noto Sans JP', sans-serif; font-size:60px; font-weight:700; color:#524e4e; padding: 10px 30px; }
}
@media screen and (max-width: 600px) {
#content_fl.index { position: relative; width: 600px; padding:80px 0 300px 0;  margin: 0 auto; box-sizing: border-box;}
#content_fl.content { position: relative; width: 600px; padding:80px 0 150px 0;  margin: 0 auto; box-sizing: border-box;}
#content_fl.chara { position: relative; width: 600px; padding:80px 0 150px 0;  margin: 0 auto; box-sizing: border-box;}

.cate_title { font-family: 'M PLUS 1p', sans-serif; font-size:50px; font-weight:700; color:#524e4e; padding: 10px 20px; }
.cate_title2 { font-family: 'Noto Sans JP', sans-serif; font-size:45px; font-weight:700; color:#524e4e; padding: 10px 20px; }
}

@media screen and (min-width: 601px) {
#page_top{ width: 50px; height: 50px; position: fixed; right: -100px; bottom: 40px; border:5px solid #492618;  background: #f39950; opacity: 1; border-radius: 50%; transform: rotate(0deg); transition-duration: 1s; }
#page_top a{ position: relative; display: block; width: 50px; height: 50px; text-decoration: none; }
#page_top a::before { font-family: 'Noto Sans JP', sans-serif; font-weight: 900; content: '▲'; font-size: 30px; color: #492618; position: absolute; width: 30px; height: 30px; top: -20px; bottom: 0; right: 0; left: 0; margin: auto; text-align: center; }
#page_top:hover { transform: rotate(360deg); transition-duration: 1s; background: #e85297; }
}
@media screen and (max-width: 600px) {
#page_top{ width: 75px; height: 75px; position: fixed; right: -100px; bottom: 40px; border:5px solid #492618;  background: #f39950; opacity: 1; border-radius: 50%; transform: rotate(0deg); transition-duration: 1s; }
#page_top a{ position: relative; display: block; width: 75px; height: 75px; text-decoration: none; }
#page_top a::before { font-family: 'Noto Sans JP', sans-serif; font-weight: 900; content: '▲'; font-size: 45px; color: #492618; position: absolute; width: 45px; height: 45px; top: -30px; bottom: 0; right: 0; left: 0; margin: auto; text-align: center; }
#page_top:hover { transform: rotate(360deg); transition-duration: 1s; background: #e85297; }
}
/* footer */

@media screen and (min-width: 601px) {
#footer { position: absolute;  bottom:0; width:100%; min-width: 1200px; height: 90px; overflow:hidden; }
.foot_fl { font-family: 'Noto Sans JP', sans-serif; position: relative; width: 100%; margin: 0 auto; height: 90px; }
.foot_fl ul.foot_logo_sp { position: absolute; top:10px; left: 50%; margin: 0 0 0 -160px; width:320px; height: 60px; }
.foot_fl .copy_fl { position: absolute; bottom:15px; right:30px; width:300px; text-align: right; }
.foot_fl .co_links { position: absolute; bottom:15px; left:30px; width:360px; text-align: left; }
.foot_fl .copy_fl , .foot_fl .co_links a { font-size:0.86em; font-weight:400; color:#1b1b1b; }
}
@media screen and (max-width: 600px) {
#footer { position: absolute;  bottom:0; width:600px; height: 240px; overflow:hidden; }
.foot_fl { font-family: 'Noto Sans JP', sans-serif; position: relative;  width: 560px; margin: 30px auto 0 auto; height: 90px;}
.foot_fl ul.foot_logo_sp { position: absolute; top:0; left: 50%; margin: 0 0 0 -160px; width:320px; height: 60px; }
.foot_fl .copy_fl { position: absolute; top:75px; left:50%; width:300px; margin: 0 0 0 -150px; text-align: center; }
.foot_fl .co_links { position: absolute; top:115px; left:50%; width:360px; margin: 0 0 0 -180px; text-align: center; }
.foot_fl .copy_fl , .foot_fl .co_links a { font-size:1em; font-weight:400; color:#1b1b1b; }
}

.foot_fl ul.foot_logo_sp .sub_logo01 { float: left; width:120px; height:60px; }
.foot_fl ul.foot_logo_sp .sub_logo02 { float: left; width:190px; height:60px; }
.foot_fl ul.foot_logo_sp .sub_logo01 .link { width:120px; height:60px; background: url("../images/bn01_pierrot.png") no-repeat center center; background-size: auto 50px; }
.foot_fl ul.foot_logo_sp .sub_logo02 .link { width:190px; height:60px; background: url("../images/bn03_toiro.png") no-repeat center center; background-size: auto 50px; }

.foot_fl .co_links span { padding: 0 10px; }