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

body { font-family:'Roboto','M PLUS 1p', -apple-system, BlinkMacSystemFont, "Helvetica Neue", YuGothic, "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif; margin:0px; margin: 0; padding: 0; width: 100%; height: 100%; background: #F8F8F4 fixed;}

@media all and (min-width: 601px) and (max-width: 940px) {
body, #header { min-width:940px; }
}

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

.nsj { font-family:Arial, Helvetica, 'Noto Sans Japanese', '游ゴシック', 'Yu Gothic', '游ゴシック体', 'YuGothic', 'ヒラギノ角ゴ Pro W3', 'Hiragino Kaku Gothic Pro', 'Meiryo UI', 'メイリオ', Meiryo, sans-serif; font-weight: 300; }
.hmc {font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", serif; }

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

#contents {height:600px;}
.content_fl { color:#1b1b1b; }

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

/* header */

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

#header { width:100%; /* background: #FEFEFE; */ background: #f7b500; position: fixed; top:0; left: 0; z-index: 100000; transition-duration: 1s; height:52px; filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3)); }
#header .logo_fl { float: left; width:140px; height: 52px; background: url( ../images/pierrot_logo.png) center center no-repeat; background-size:100px auto; filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.3)); }
#header .logo_fl .link_sp { width:140px; height: 52px; }
#header ul.menu_fl { float: left; }
#header ul.menu_fl li { float: left; width:100px;/* height: 30px;*/ padding:25px 0; text-align: center; font-size:16px; font-weight: 600; background: #999;}
#header ul.menu_fl li ul li { float: left; width:25%; max-width:197px; padding:10px 0; text-align: center; font-size:16px; font-weight: 600; background:#1C1F5B; color: #FFF; margin:0 3px 3px 0;}

#header .twi_fl { float: right; width:70px; height: 52px; }
#header .twi_fl .link_sp { width:38px; height: 38px; margin:8px 12px 0 0; background: url(../images/ico_x.png) no-repeat center center , #1b1b1b ; background-size: 38px auto; border-radius: 50%; }

#header .cg_word { float: right; width:70px; height: 52px; }
#header .cg_word a .link_sp { width:70px; height: 52px; box-sizing:border-box; padding:15px 0 0 0;  background: #BB4712; color:#FFF; font-weight: 800; text-align: center; }

#header .eg_title { font-size:15px; }
#header a:hover { color:#08a47d; transition-duration: 0.3s; }

.mb_menu { display:none; }
#head_menu { display: none; }

#content { width:100%; height:800px; background:#FFF; }
}
@media screen and (max-width: 600px) {

#header { width:600px; background: #f7b500; }
#header .logo_fl {  position:relative;  width:600px; height: 120px; background: url(../images/pierrot_logo.png) center center no-repeat; background-size:200px auto;  }
#header .logo_fl .link_sp {  position:absolute; top:0; left: 50%;  width:240px; height: 120px; margin: 0 0 0 -120px; }
#header ul.menu_fl { display: none; }

#header .twi_fl { display: none; }

.mb_title { padding: 10px 10px; background:#f7b500; color:#fff; }
.mb_menu {}
#head_menu {}
#head_menu ul { padding: 0; margin: 0; }
#head_menu ul li { padding: 0; margin: 0; background: #f7b500; }
#head_menu ul li.cg_word { padding: 0; margin: 0; background: #BB4712; }
#head_menu li li { font-size:22px; background: #FFF; }
#head_menu li li.mini { float: left; min-width:160px; }
#head_menu a { font-size:22px; color:#FFF; background: #f7b500; }
#head_menu li li a { font-size:22px; color:#f7b500; }
#head_menu .eg_title { font-size:26px; font-weight: 900; }
#head_menu .li_btm { padding:15px 20px; }
ul#ac_menu { padding: 50px 0;}
#ac_menu .inner {display: none;}

#content { width:600px; height:800px; background:#FFF; }
}

@media screen and (max-width: 940px) {
#header .twi_fl { display: none; }
#header .cg_word { 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: 1240px) {
.content_topfl { width: 100%; min-width: 1240px; max-width:1400px; padding:10px 30px 50px 30px; margin: 0 auto; }
.content_fl { width: 100%; min-width: 1240px; max-width:1400px; padding:70px 30px 50px 30px; margin: 0 auto; box-sizing: border-box; }
}
@media all and (min-width: 601px) and (max-width: 1239px) {
.content_topfl { width: 100%; min-width: 1080px; max-width:1239px; padding:10px 30px 50px 30px; margin: 0 auto; }
.content_fl { width: 100%; min-width: 1080px; max-width:1239px; padding:70px 30px 50px 30px; margin: 0 auto; box-sizing: border-box; }
}
@media screen and (max-width: 600px) {
.content_topfl { width: 560px; padding:0 20px 50px 20px;  margin: 0 auto;}
.content_fl { width: 560px; padding:0 20px 50px 20px;  margin: 0 auto;  box-sizing: border-box;}
}

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

#swip_contents { padding:20px 0; margin: 30px 0 0 0;}
#arc2015_swip { padding:20px 0;}

ul.cg_btmbox { width:900px; margin:0 auto; }
ul.cg_btmbox li.btm { width:160px; float:right; }
ul.cg_btmbox li.clear { width:100%; height:1px; clear: both; }
a .cg_catebtm { width:160px; padding:6px 0; text-align: center; font-size:14px; color:#001133; transition-duration: 0.5s; background:#f7b500; }
a:hover .cg_catebtm { width:160px;  padding:6px 0; text-align: center; font-size:14px; color:#001133; transition-duration: 0.5s; background:#f49a20; }

a .side_catem_btm { padding: 3px 5px; background:#001133; color:#FFF; font-size:16px; transition-duration: 0.5s; margin:0 0 3px 0; }
a:hover .side_catem_btm { padding: 3px 5px; background:#FFF; color:#001133; font-size:16px; transition-duration: 0.5s; }

#overlay { position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.7); z-index: 999998; display: none;  }

#mb_btm { display:none; }
}
@media screen and (max-width: 600px) {

ul.cg_btmbox { width:100%; margin:0 auto; }
ul.cg_btmbox li.btm { width:160px; float:right; }
ul.cg_btmbox li.clear { width:100%; height:1px; clear: both; }
a .cg_catebtm { width:160px; padding:6px 0; text-align: center; font-size:14px; color:#001133; transition-duration: 0.5s; background:#f7b500; }
a:hover .cg_catebtm { width:160px;  padding:6px 0; text-align: center; font-size:14px; color:#001133; transition-duration: 0.5s; background:#f49a20; }

a .side_catem_btm { padding: 3px 5px; background:#001133; color:#FFF; font-size:16px; transition-duration: 0.5s; margin:0 0 3px 0; }
a:hover .side_catem_btm { padding: 3px 5px; background:#FFF; color:#001133; font-size:16px; transition-duration: 0.5s; }

#overlay { position: fixed; top: 0; left: 0; bottom: 0; right: 0; width: 100%; height: 100%; background: rgba(255,255,255,0.0); z-index: 999998; display: none;  }

#mb_btm { position: fixed; top:20px; right:0; width:80px; height: 80px; background: rgba(255,255,255,0.0); z-index: 1000000; }
}

/* footer */
@media screen and (min-width: 601px) {
#footer { width:100%; }
}
@media screen and (max-width: 600px) {

}

#footer { background: #1C1F5B; }
@media screen and (min-width: 1240px) {
#footer { width:100%; min-width: 1240px; height: 120px; overflow:hidden; }
.foot_fl { position: relative; width: 1240px; margin: 30px auto 0 auto; }
.foot_fl .copy_fl { position: absolute; right:30px; width:300px; text-align: right; font-weight:11px; color: #FFF; font-size: 0.9em; }
.foot_fl .co_links { position: absolute; left:30px; width:360px; text-align: left; font-weight:11px; color: #FFF; font-size: 0.9em; }
}
@media all and (min-width: 601px) and (max-width: 1239px) {
#footer { width:100%; min-width: 1080px; height: 120px; overflow:hidden; }
.foot_fl { position: relative; width: 1080px; margin: 30px auto 0 auto; }
.foot_fl .copy_fl { position: absolute; right:30px; width:300px; text-align: right; font-weight:11px; color: #FFF; font-size: 0.9em; }
.foot_fl .co_links { position: absolute; left:30px; width:360px; text-align: left; font-weight:11px; color: #FFF; font-size: 0.9em; }
}
@media screen and (max-width: 600px) {
#footer { width:600px; height: 120px; overflow:hidden; }
.foot_fl { position: relative; width: 560px; margin: 30px auto 0 auto;}
.foot_fl .copy_fl { position: absolute; top:0px; left:50%; width:300px; margin: 0 0 0 -150px; text-align: center; font-weight:11px; color: #FFF;  }
.foot_fl .co_links { position: absolute; top:32px; left:50%; width:360px; margin: 0 0 0 -180px; text-align: center; font-weight:11px; color: #FFF; }
}
.foot_fl .co_links a , .foot_fl .co_links a:hover { color:#FFF; }

.sidr-open #overlay { display: block;}

#archive_box .arc_number span { display: none; }

.content_fl .img { filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.1)); }

/* scroll bar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}
::-webkit-scrollbar-track {
  border-radius: 8px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, .1);
}
::-webkit-scrollbar-thumb {
  background-color: rgba(125, 125, 125, .6);
  border-radius: 8px;
  box-shadow:0 0 0 1px rgba(0, 0, 0, .3);
}


/* menu */
.mb_menu { position:fixed; top:27px; right:0px; z-index: 999999;width: 66px; height: 67px; padding:15px; background: rgba(0,0,0,0.5); }
.menu-trigger, .menu-trigger span { display: inline-block; transition: all .4s; box-sizing: border-box; }
.menu-trigger { position: relative; width: 42px; height: 38px; }
.menu-trigger span { position: absolute; left: 0; width: 100%; height: 6px; background-color: #ccc; border-radius: 6px;}
.menu-trigger span:nth-of-type(1) { top: 0; }
.menu-trigger span:nth-of-type(2) { top: 16px; }
.menu-trigger span:nth-of-type(3) { bottom: 0; }

.menu-trigger span:nth-of-type(2)::after { position: absolute; top: 0; left: 0; content: ''; width: 100%; height: 6px; background-color: #ccc; border-radius: 6px; transition: all 0.1s; -webkit-transition: all 0.1s; }

.menu-trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(15px) scale(0);
  transform: translateY(15px) scale(0);
}
.menu-trigger.active span:nth-of-type(2) {
  -webkit-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
.menu-trigger.active span:nth-of-type(2)::after {
  -webkit-transform: rotate(90deg);
  transform: rotate(90deg);
}
.menu-trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-15px) scale(0);
  transform: translateY(-15px) scale(0);
}

/* news_close */
#old_news .close_btm { position:absolute; top:27px; right:0px; z-index: 999999;  width: 66px; height: 67px; padding:15px; background: rgba(0,0,0,0.5); }
.close_btm span { position: absolute; width: 100%; height: 4px; background-color: #ccc; border-radius: 4px; display: inline-block; box-sizing: border-box; }
.close_btm span:nth-of-type(1) { top: 47%; left: 0; width: 100%; height: 4px; border-radius: 4px; background-color: #ccc; -webkit-transform: rotate(-45deg); transform: rotate(-45deg); }
.close_btm span:nth-of-type(2) { top: 47%; left: 0; width: 100%; height: 4px; border-radius: 4px; -webkit-transform: rotate(45deg); transform: rotate(45deg); }

#loading{ position: absolute; left: 50%; top: 50%; margin:-60px 0 0 -30px; }
#loader-bg { position: fixed; width: 100%; height: 100%; top: 0px; left: 0px;/* background: #F8F8F4;*/ z-index: 999999; pointer-events: none; }
.sk-folding-cube { margin: 30px auto; width: 60px; height: 60px; position: relative; transform: translate3d(0,0,0); -webkit-transform: rotateZ(45deg); transform: rotateZ(45deg); }
.sk-folding-cube .sk-cube { float: left; width: 50%; height: 50%; position: relative; transform: translate3d(0,0,0); -webkit-transform: scale(1.1); -ms-transform: scale(1.1); transform: scale(1.1); }
.sk-folding-cube .sk-cube:before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-color: #f7b500; transform: translate3d(0,0,0); -webkit-animation: sk-foldCubeAngle 2.4s infinite linear both; animation: sk-foldCubeAngle 2.4s infinite linear both; -webkit-transform-origin: 100% 100%; -ms-transform-origin: 100% 100%; transform-origin: 100% 100%; }
.sk-folding-cube .sk-cube2 { -webkit-transform: scale(1.1) rotateZ(90deg); transform: scale(1.1) rotateZ(90deg); }
.sk-folding-cube .sk-cube3 { -webkit-transform: scale(1.1) rotateZ(180deg); transform: scale(1.1) rotateZ(180deg); }
.sk-folding-cube .sk-cube4 { -webkit-transform: scale(1.1) rotateZ(270deg); transform: scale(1.1) rotateZ(270deg); }
.sk-folding-cube .sk-cube2:before { -webkit-animation-delay: 0.3s; animation-delay: 0.3s; }
.sk-folding-cube .sk-cube3:before { -webkit-animation-delay: 0.6s; animation-delay: 0.6s; }
.sk-folding-cube .sk-cube4:before { -webkit-animation-delay: 0.9s; animation-delay: 0.9s; }
@-webkit-keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  } 
}

@keyframes sk-foldCubeAngle {
  0%, 10% {
    -webkit-transform: perspective(140px) rotateX(-180deg);
            transform: perspective(140px) rotateX(-180deg);
    opacity: 0; 
  } 25%, 75% {
    -webkit-transform: perspective(140px) rotateX(0deg);
            transform: perspective(140px) rotateX(0deg);
    opacity: 1; 
  } 90%, 100% {
    -webkit-transform: perspective(140px) rotateY(180deg);
            transform: perspective(140px) rotateY(180deg);
    opacity: 0; 
  }
}
/*
#line { position: absolute; top:0; left:0; width:100%; height:12px; margin:0 auto; background:#F8F8F4; transform: translate3d(0,0,0); }
#loader-bg .expand { width:100%; height:12px; margin:0; background:#f7b500; position:absolute; animation:fullexpand 1s ease; -moz-animation:fullexpand 1s ease; -webkit-animation:fullexpand 1s ease; transform: translate3d(0,0,0); }

@keyframes fullexpand { 0%  { width:0px;} 100%{ width:100%;} }
@-moz-keyframes fullexpand { 0%  { width:0px;} 100%{ width:100%;} }
@-webkit-keyframes fullexpand { 0%  { width:0px;} 100%{ width:100%;} }
*/
#loader-bg .expand { display:none; }

.spinner {
  position: absolute;
  top:50%;
  left: 50%;
  margin: -60px 0 0 -60px;
  width: 120px;
  height: 120px;
  background: url(../images/pierrot_icon.png);
  background-size:100% auto; 
  filter: drop-shadow(2px 2px 1px rgba(0,0,0,0.1));
  animation: sk-rotateplane 2s infinite ease-in-out;
  -webkit-animation: sk-rotateplane 2s infinite ease-in-out;
}

@-webkit-keyframes sk-rotateplane {
  0% { opacity:0; }
  50% { opacity:1; }
  100% { opacity:0; }
}

@keyframes sk-rotateplane {
  0% { opacity:0; }
  50% { opacity:1; }
  100% { opacity:0; }
}
/*
@-webkit-keyframes sk-rotateplane {
  0% { width: 120px; height: 120px; transform: perspective(0); -webkit-transform: perspective(0); }
  50% { width: 120px; height: 120px; transform: perspective(0) rotateY(180deg); -webkit-transform: perspective(0) rotateY(180deg); }
  100% { width: 120px; height: 120px; transform: perspective(0) rotateY(360deg); -webkit-transform: perspective(0) rotateY(360deg); }
}

@keyframes sk-rotateplane {
  0% {  width: 120px; height: 120px;
    transform: perspective(0) rotateX(0deg) rotateY(0deg);
    -webkit-transform: perspective(0) rotateX(0deg) rotateY(0deg);
  } 50% {  width: 120px; height: 120px;
    transform: perspective(0) rotateY(180deg) rotateY(0deg);
    -webkit-transform: perspective(0) rotateY(180deg) rotateY(0deg); 
  } 100% {  width: 120px; height: 120px;
    transform: perspective(0) rotateY(360deg) rotateY(0deg);
    -webkit-transform: perspective(0) rotateY(360deg) rotateY(0deg);
  }
}
*/