@charset "UTF-8";
/* ????F ?™ã?? ???? */

/* ----???Z?b?gCSS---- */
/* ------------------------   ??{??CSS   ------------------------ */
html { background-color: rgba(45, 45, 45, 0.9); /* ????kuro */ }

/* ??HTML?y?[?W???M?L */
body { /*  margin: 0 auto;  position: relative;  background-size: contain;  */ }

/*???X?N???[???o?[*/
::-webkit-scrollbar { width: 12px; }

::-webkit-scrollbar-track { box-shadow: 0 0 5px rgba(0, 0, 0, 0.1) inset; background: rgba(97, 97, 97, 0.5); }

::-webkit-scrollbar-thumb { background-color: #56374d; box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.3) inset; }

@-moz-document url-prefix(https://animort.xyz/),url-prefix(https://animort.xyz/) { scrollbar { -moz-appearance: none !important; background: rgba(97, 97, 97, 0.5) !important; }
  thumb, scrollbarbutton { -moz-appearance: none !important; background-color: #56374d !important; box-shadow: 0 0 0 0.5px rgba(255, 255, 255, 0.3) inset; }
  thumb:hover, scrollbarbutton:hover { -moz-appearance: none !important; background-color: red !important; }
  scrollbarbutton { display: none !important; }
  scrollbar[orient="vertical"] { min-width: 12px !important; } }
.wrapper { background-color: transparent; overflow: hidden; }

/* ?? %%%%   ALL/??????{?????N?i???L???y?[?W?j    %%%% */
a { text-decoration: none; cursor: pointer; }
a:link { color: #50FCFD; }
a:hover { color: #50FCFD; text-shadow: none; }

@keyframes hurueru { 0% { transform: rotate(0deg) translate(0, 0); }
  12.5% { transform: rotate(0.4deg) translate(1px, -1px); }
  25% { transform: rotate(0.8deg) translate(0px, 1px); }
  37.5% { transform: rotate(0.4deg) translate(-1px, 0); }
  50% { transform: rotate(0deg) translate(0, 0); }
  62.5% { transform: rotate(-0.4deg) translate(1px, 0); }
  75% { transform: rotate(-0.8deg) translate(0, 1px); }
  87.5% { transform: rotate(-0.4deg) translate(-1px, -1px); }
  100% { transform: rotate(0deg) translate(0, 0); } }

table {
    border-collapse: collapse;
    border-spacing: 0;
    width: 100%;
}


/* ?t?@?C?A?t?H?b?N?X???overflow: hidden; ??K?v */
/* ---  ?????@?\ ---- */
#page-top { display: none; position: fixed; right: 10px; bottom: 10px; z-index: 99999; }
#page-top p { margin: 0; padding: 0; text-align: center; -webkit-transition: all 0.2s; -moz-transition: all 0.2s; transition: all 0.2s; }
#page-top span { height: 30px; width: 30px; display: block; border-radius: 60px; padding: 5px; cursor: pointer; border: 3px solid rgba(250, 250, 250, 0.8); background: rgba(202, 39, 39, 0.4); }
#page-top #move-page-top { color: #fff; line-height: 50px; text-decoration: none; display: block; cursor: pointer; }
#page-top #move-page-top .ue { overflow: hidden; }
#page-top #move-page-top .ue:before { display: block; content: ""; height: 20px; width: 20px; border: 5px solid #F3F3F3; border-left-width: 0; border-bottom-width: 0; transform: rotate(-45deg); -webkit-transform: rotate(-45deg); -moz-transform: rotate(-45deg); -o-transform: rotate(-45deg); -ms-transform: rotate(-45deg); position: absolute; top: 15px; left: 10.5px; }
#page-top #move-page-top .ue:hover { background: rgba(202, 39, 39, 0.7); }

@media screen and (min-width: 360px) { .not { background-color: rgba(74 5 5 / 23%); background:none;/* background: left -3% top repeat-y url(sintou.png), right repeat-y url(kamon.png) rgb(74 5 5 / 23%);*/ } }
@media screen and (min-width: 1600px) { .not { background:none;/* background: left -3% top repeat-y url("sintou.png"), right repeat-y url("kamon.png") rgba(74, 5, 5, 0.6);*/ } }


.bg-f333 { overflow: hidden; position: absolute; top: 0; right: 0; bottom: 0; left: 0; }
@media screen and (min-width: 480px) { .bg-f333 { height: 500px;  border-bottom: 1px solid #a1a1a1; background: linear-gradient(rgb(255 255 255), rgb(0 0 0), rgb(255 255 255 / 0%)); } }
.background-layer { background: none;
    position: static;
    background-color: transparent; }


.anime-centor-col2 { display: block; max-height: 600px; text-align: center; background-size: contain; background: url("https://animort.xyz/images/tennbin.png") center center no-repeat; position: absolute; top: 0px;  right: 0; bottom: 0; left: 0; margin: auto; }
@media screen and (min-width: 200px) { .anime-centor-col2 {  top: -1350px; } }
@media screen and (min-width: 480px) { .anime-centor-col2 {  top: 0 } }
@media screen and (min-width: 600px) { .anime-centor-col2 {  top: 0; } }

#slogan { display: none; font-size: 24px; color: #f3f3f3; text-shadow: 1px 1px 2px #333, -1px 1px 2px #333, 1px -1px 2px #333, -1px -1px 2px #333; }
#slogan .komoji { font-size: 64%; color: #4defff; margin-bottom: 9px; font-style: oblique; text-indent: 1em;  margin-top: 6px; }
#slogan:after { position: absolute; content: ''; width: 0px; height: 0px; right: 100%; top: -11px; border: 47px solid transparent; border-right-color: rgba(0, 0, 0, 0.5535); }
@media screen and (min-width: 480px) { #slogan {  display: none; } }
@media screen and (min-width: 767px) { #slogan { position: absolute; TOP: 423PX; right: -369px; bottom: 7px; z-index: 1; box-shadow: 0px 0px 0px 1000px rgba(0, 0, 0, 0.5535) inset; padding: 16px 55px 12px 6%; text-align: left; font-style: oblique; display: block;  padding-right: 410px; } }
@media screen and (min-width: 1200px) { #slogan { font-size: 25px;  right: -520px;   padding-right: 540px; } }

.top-left-460 { display: none; }
@media screen and (min-width: 320px) { .top-left-460 { display: none; } }
@media screen and (min-width: 600px) { .top-left-460 { display: block; position: relative; left: 110px; top: 70px; z-index: 1; height: 100%;  background-size: contain; background: url("/images/ish-index.png") no-repeat; } }
@media screen and (min-width: 700px) { .top-left-460 {  left: 45px;  } }


@media screen and (min-width: 600px) { .top-right-460 {  display: none  } }
@media screen and (min-width: 700px) { .top-right-460 {  display: block; position: relative; left: 350px; bottom: 390px; z-index: 0; height: 100%;  background-size: contain; background: url("/images/rowdelika-hp.png") no-repeat; } }
@media screen and (min-width: 750px) { .top-right-460 {   left: 400px;  } }
@media screen and (min-width: 1150px) { .top-right-460 { left: 550px;  } }


.anime-photo { display: none;  top: 0px; }
@media screen and (min-width: 800px) { .anime-photo  {
 display: block;  background: url("/IMG_1555.png") center center no-repeat;
 position: absolute;  top: -220px;  right: 0; bottom: 0; left: -700px;   }
 }

.anime-kao { display: none;  top: 0px; }
@media screen and (min-width: 800px) { .anime-kao  {
 display: block;  background: url("/kao.png") center center no-repeat;
 position: absolute;  top: 0px;  right: -740px; bottom: -21px; left: 0;   }
 }

.hero { display: none; }

@media screen and (min-width: 800px) { .hero { display: block; }
  .hero::before, .hero::after { position: absolute; top: 0; z-index: 2; content: ''; display: block; width: 100%; height: 100%; }
  .hero::before { right: 0; background: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0)) 0 0/300% no-repeat; -webkit-animation: misty1 16s ease infinite alternate; animation: misty1 16s ease infinite alternate; }
  .hero::after { left: 0; background: linear-gradient(-90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0)) 0 0/150% no-repeat; -webkit-animation: misty2 8s ease infinite alternate; animation: misty2 8s ease infinite alternate; }
  @-webkit-keyframes misty1 { 0% { background-position: 100% 0; }
    50% { background-position: 50% 0; }
    100% { background-position: 0 0; } }
  @-webkit-keyframes misty2 { 0% { background-position: 0 0; }
    50% { background-position: 50% 0; }
    100% { background-position: 100% 0; } }
  @keyframes misty1 { 0% { background-position: 100% 0; }
    50% { background-position: 50% 0; }
    100% { background-position: 0 0; } }
  @keyframes misty2 { 0% { background-position: 0 0; }
    50% { background-position: 50% 0; }
    100% { background-position: 100% 0; } } }
/* HTML?y?[?W?? */
.page-body { margin: 0 auto; max-width: 1300px; }
.page-body h4 { text-align: center; color: #3ed2d2; }

.blur-container { margin: 0; position: absolute; width: 100%; height: 100%; background: url("https://animort.xyz/images/earth_lights7.jpg") center center no-repeat; background-size: cover; background-attachment: fixed; top: 0; z-index: -1; background: none; }

/* fit-sidebar */
.fit-sidebar-fixed { margin-top: 0 !important; margin-bottom: 0 !important; position: fixed; z-index: 999; }
.fit-sidebar-blank { z-index: 0; background-color: transparent; visibility: hidden; }
.tool { margin-top: 0 !important; margin-bottom: 0 !important; z-index: 100000; }

/*! ??  ???????????? ?h?????[?@?\ ????????????  */
#r-box { position: fixed; right: 3px; top: 3px; z-index: 99999; }
#r-box .drawer-toggle { float: right; padding: 22px 10px 22px; text-align: center; width: 35px; margin: 5px; background-color: rgba(15, 7, 41, 0.4); box-shadow: 0 0 0 1px rgba(165, 165, 165, 0.8); border-top: none; }
#r-box .drawer-toggle:hover { background-color: rgba(20, 7, 62, 0.8); cursor: pointer; }

/*! ??  ???????????? ?T?[?o?[????E???X?|???V?u ????????????  */
.wrap-video { position:relative;  padding: 0 3% 1px; background: #333; }
@media screen and (min-width: 480px) { .wrap-video .text p{ padding: 0; } }

.wrap-video video{ width: 100%; height:100%; }
.wrap-video .text{ position: absolute;  top: 50%;  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%); /*?????E??????*/  text-align: left; }

@media screen and (min-width: 200px) { .wrap-video .text p{ display: none;  } }
@media screen and (min-width: 480px) { .wrap-video .text p{ display: block; font-size: 16px;  color: white;   position: relative; top: 95px;
    right: 105px; } }
@media screen and (min-width: 600px) { .wrap-video .text p{ display: none;  } }
@media screen and (min-width: 1200px) { .wrap-video .text p{ display: block; font-size: 19px;  color: white;   position: relative; top: 135px;
    right: 190px; text-shadow: 1px 1px 2px #333, -1px 1px 2px #333, 1px -1px 2px #333, -1px -1px 2px #333;   } }
/* ---  ??{??CSS ---- */
/* ?g?„„?Java?X?N???v?g?L?????Z????w?b?_?[?????????????? background: url(images/tennbin.png) center center no-repeat; */
#header .box-rule { width: 100%; margin: 0 auto; position: relative; left: -2px; }
@media screen and (min-width: 200px) { #header .box-rule { } }
@media screen and (min-width: 480px) { #header .box-rule { left: auto; } }


#header .box-rule .graphic { position: relative; height: 417px; visibility: visible; }
@media screen and (min-width: 480px) { #header .box-rule .graphic { height: 500px; } }

#header .box-rule .graphic2 { position: relative; height: 417px; overflow: hidden; }
@media screen and (min-width: 800px) { #header .box-rule .graphic2 { height: auto; } }




.logo { width: 100%; position: absolute; color: #f3f3f3; bottom: 40%; z-index: 999; text-shadow: 1px 1px 2px #333, -1px 1px 2px #333, 1px -1px 2px #333, -1px -1px 2px #333; }
.logo .since { text-align: center; position: relative; bottom: 0; }
.logo .name { text-align: center; font: bold 200%/1.2em Times New Roman,Helvetica, Arial,"???C???I", sans-serif; text-transform: uppercase; /*????????S?????  */ /* text-transform: capitalize; ??????????????*/ }
.logo:before { position: absolute; top: 47px; left: 11px; content: none; opacity: .5; }
.logo a { margin-top: -2px; color: #e6e6e6; display: block; }
.logo a:hover { color: #50FCFD; text-shadow: 1px 1px 2px #2e93ff, -1px 1px 2px #2e93ff, 1px -1px 2px #2e93ff, -1px -1px 2px #2e93ff; }

@media screen and (min-width: 480px) { .logo .name { font: bold 220%/1.3em Times New Roman,Helvetica, Arial,"???C???I", sans-serif; margin-top: 5px; } }
@media screen and (min-width: 800px) { .logo { padding: 10px; font-size: 100%; width: 240px; margin-top: 0; top: 0; }
  .logo .name { font: 210%/.8em Times New Roman,Helvetica, Arial, serif; margin-top: 0; }
  .logo .name:before { content: url("/images/hp-line-white2.png"); } }
.menu-ruby { font-size: 55%; text-align: center; margin-top: -13px; }

/* ?????C???J????(800px ????X?|???V?u)  ????   background-color: rgb(53 0 0 / 96%); color: rgb(53 0 0 / 96%);*/
@media screen and (min-width: 960px) { .main { width: 77%; display: inline-block; vertical-align: top; } }
@media screen and (min-width: 1050px) { .main { width: 79%; } }
@media screen and (min-width: 1100px) { .main { width: 80%; } }
.ext { display: none; z-index: 1; }

@media screen and (min-width: 960px) { .ext { margin: 0 auto; float: right; display: inline-block; vertical-align: top; width: 24%; background-color: rgb(0 0 0 / 47%); padding-bottom: 32767px; margin-bottom: -32767px; box-shadow: 0 0 0 1px rgba(193, 193, 193, 0.2); z-index: 1; }
  .ext .contents { padding-bottom: 55px; }
  .ext .drawer-menu { padding: 0; }
  .ext .drawer-menu #s-menu{  z-index: 1000;   position: relative;  }
  .ext .drawer-menu h1 { text-align: center; font-size: 16px; margin: 8px 0 0;  color: #efefef; }
  .ext .drawer-menu a { color: #f3f3f3; text-decoration: none; display: inline; }
  .ext .drawer-menu a .z-menu { border: 1px solid rgba(204, 204, 204, 0.53); width: 39%; height: 20px; display: inline-block; box-shadow: 0px 0px 0px 200px rgba(109, 68, 125, 0.24) inset; }
  .ext .drawer-menu a .z-menu li { list-style: none; position: relative; z-index: 1; }
  .ext .drawer-menu a .z-menu:hover { color: whitesmoke; text-shadow: 1px 1px 2px #454545, -1px 1px 2px #454545, 1px -1px 2px #454545, -1px -1px 2px #454545; background: rgba(0, 180, 250, 0.2); border-color: aqua; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s; }
  .ext .drawer-menu a .z-menu2 { border: 1px solid rgba(24, 93, 19, 0.9); width: 85.5%; height: 20px; display: inline-block; padding: 11px 8px; margin-bottom: 8px; box-shadow: 0px 0px 0px 1000px rgba(173, 150, 151, 0.5) inset; text-align: right; overflow: hidden; position: relative; }
  .ext .drawer-menu a .z-menu2:hover { color: whitesmoke; text-shadow: 1px 1px 2px #454545, -1px 1px 2px #454545, 1px -1px 2px #454545, -1px -1px 2px #454545; background: rgba(0, 180, 250, 0.2); border-color: aqua; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s; }
  .ext .drawer-menu a .z-menu2 li { list-style: none; position: relative; z-index: 1; }
  .ext .drawer-menu a .z-menu2 .pass-i { font-size: 10px; position: relative; cursor: pointer; }
  .ext .drawer-menu a .z-menu2 .pass-i:before { background: #eee; border-radius: 50%; box-shadow: 1em 0 0 #eee, -1em 0 0 #eee; -webkit-box-shadow: 1em 0 0 #eee, -1em 0 0 #eee; content: ""; height: 0.6em; left: 0.6em; position: absolute; top: 0.5em; width: 0.6em; }
  .ext .drawer-menu a .home-i { cursor: pointer; }
  .ext .drawer-menu a .home-i:before { left: -6px; border-style: solid; border-color: transparent; border-width: 10px 15px; border-bottom-color: #fff; margin-top: -14px; background: transparent; }
  .ext .drawer-menu a .home-i:after { left: -1px; width: 8px; height: 8px; border-style: solid; border-color: #fff #fff transparent; border-width: 8px 6px 0; margin-top: 5px; background: transparent; }
  .ext .drawer-menu .buttom { list-style: none; background-color: rgba(155, 153, 165, 0.25); display: inline-block;  padding-bottom: 13px; padding-top: 13px;  width: 100%; overflow: hidden; text-align: center; } }
  .ext .drawer-menu  .width-97 dt a:hover { border-color: aqua; }
@media screen and (min-width: 950px) { .ext { width: 23%; } }
@media screen and (min-width: 1050px) { .ext { width: 21%; } }
@media screen and (min-width: 1100px) { .ext { width: 20%; } }
.information { background: transparent; width: 100%;  z-index: 2;  margin: 0 auto;  position: relative;/*??HTML?y?[?W????M?L border: none; background: none;  width: 80%;  margin: 0 auto;  overflow: hidden;*/ }

@media screen and (min-width: 320px) { .information { margin-top: 40px; } }
@media screen and (min-width: 600px) { .information { margin-top: 0; background: transparent; margin-bottom: 30px; } }
.sub { display: none; }

.section { position: relative; /* ?? blur-container ??abs??u?w?????? */ }
.section h2 {  display: none; }
@media screen and (min-width: 200px) { .section h2 {  display: none; } }
@media screen and (min-width: 600px) { .section h2 { display: block; font-size: 110%; text-align: center; margin-top: 0; } }

.section a { color: #47e2f1; }

.rule2 { margin: 0 auto; width: 98%; overflow: hidden;  background-color: #00000080;  margin-top: 30px; }

.animort { padding-left: 0; color: #fff; font-size: 15px;  line-height: 1.8; }
@media screen and (min-width: 800px) { .animort { padding-left: 3em;  } }

.animort p {   background-color: rgb(0 0 0 / 55%);  padding: 1em; }

.section2 { display: none; overflow: hidden; position: relative; /* ?? blur-container ??abs??u?w?????? */ }
.section2 a { text-shadow: none; text-decoration: underline; color: rgba(47, 47, 47, 0.91); text-decoration: none; }
.section2 a:hover, .section2 a:active, .section2 a:focus { color: rgba(226, 226, 226, 0.91); text-shadow: 1px 1px 2px #f3f3f3, -1px 1px 2px #f3f3f3, 1px -1px 2px #f3f3f3, -1px -1px 2px #f3f3f3; }

@media screen and (min-width: 480px) { .section2 { display: block; } }
.headline { width: 80%; margin: 60px auto 100px; }
.headline h1 { font-size: 90%; text-align: center; color: #f3f3f3; text-shadow: 1px 1px 2px #454545, -1px 1px 2px #454545, 1px -1px 2px #454545, -1px -1px 2px #454545; }
.headline .headline-r { float: left; width: 99.5%; display: inline-block; margin-bottom: 10px; padding: 10px 0; height: 300px; overflow: hidden; background: url("/_ibez-img/wg_destroyed_screen-0.png") #4a0710 no-repeat 50% 50%; }
.headline .headline-l { display: none; }

@media screen and (min-width: 767px) { .headline .headline-l { float: left; width: 99.5%; display: inline-block; margin-bottom: 10px; padding: 10px 0; display: block; width: 48.5%; margin-right: 1%; background: rgba(255, 255, 255, 0.31); }
  .headline .headline-l h2 { font-size: 20px; text-align: center; }
  .headline .headline-l .blogroll-channel { margin: 20px 0; padding: 20px 10px; height: 200px; overflow: scroll; overflow-x: hidden; font: bold 50%/1.8em Times New Roman,"?q???M?m???? ProN W3",Hiragino Mincho ProN,"???C???I",Meiryo,"Meiryo UI"; }
  .headline .headline-r { width: 48.5%; } }

/* script ?g?p?????A????????q??????I */
.flex, .flex1 { margin-bottom: 10px; overflow: hidden; }
@media screen and (min-width: 800px) { .flex, .flex1 { margin-bottom: 0; overflow: hidden; } }


@media screen and (min-width: 800px) { .brock { padding: 10px; display: block; background-color: rgba(103, 27, 27, 0.5); margin-bottom: 10px; overflow: hidden; }
  .brock h2 { font-size: 128%; padding: 18px 0; }
  .brock h3 { font-size: 120%; text-align: center; margin: 15px; }
  .brock p { padding-bottom: 15px; font-size: 90%; text-align: left; }
  .brock li { list-style: none; }
  .brock img { box-shadow: 0 0 0 1px #333, 0px 0px 0px 1000px rgba(255, 255, 255, 0.64) inset; }
  .brock .margin { font-size: 80%; color: #8995D4; display: inline-block; }
  .brock .small { font-size: 80%; olor: #efaaaa; } }
@media screen and (min-width: 800px) { .brock2 { margin-bottom: 10px; overflow: hidden; color: #dcdcdc; }
  .brock2 h2 { line-height: 2; font-size: 90%; }
  .brock2 li { list-style-type: none; margin-top: 8px; line-height: 4.5em; width: 100%; font-size: 70%; text-align: center; box-shadow: -1px 0px 0 1px rgba(134, 134, 134, 0.5), 0px 0px 0px 1000px rgba(152, 152, 152, 0.15) inset; }
  .brock2 li a { display: block; text-align: right; }
  .brock2 li a:hover { color: #50FCFD; box-shadow: 0px 0px 0px 1000px rgba(230, 230, 230, 0.3) inset; } }
@media screen and (min-width: 800px) and (min-width: 800px) { .brock2 li { width: 100%; float: none; display: block; line-height: 1.7em; font-size: 80%; } }

@media screen and (min-width: 200px) { .main-nav { margin-bottom: 0px; }
  .main-nav a { text-align: center; box-shadow: none; }
  .main-nav a:hover { color: #50FCFD; box-shadow: 0px 0px 0px 1000px rgba(230, 230, 230, 0.3) inset; text-shadow: none; color: #50FCFD; }
  .main-nav li {   position: relative;
        text-align: center; color: #efefef;
        display: block;
        box-shadow: none;
        padding: 0;
        border-bottom: solid 1px #1f7c86;
        margin-top: 10px; text-align: right; right: 1em;
        font-size: 100%; }
  .main-nav li:hover { border-color: aqua; }
  .main-nav rb { font: bold 132%/1.5em Arial,"Times New Roman", Georgia,'?q???M?m???? ProN W3', Hiragino Mincho ProN,'????????', ????????, ??????, YuMincho, Roboto, "Droid serif", ???S?V?b?N, "Yu Gothic", "?q???M?m???? ProN W3", "Hiragino Mincho ProN"; position: relative; z-index: 2; }
  .main-nav ruby { position: relative; right: 7%; }
  .main-nav .en-ruby { margin: 5px 0 0 7px; color: rgba(61, 127, 255, 0.6); position: absolute; z-index: -1; top: 0; bottom: 0; left: 0; font: 135%/1.5em  Arial,Impact,Times New Roman, san-serif; text-shadow: 1px 1px 2px #333, -1px 1px 2px #333, 1px -1px 2px #333, -1px -1px 2px #333; }
  .main-nav .en-ruby2 { color: rgb(234 241 255 / 21%); position: absolute; z-index: 1; bottom: 3px; left: 1em; font: 18px / 1.0em Arial, Impact, Times New Roman, san-serif; } }

@media screen and (min-width: 480px) { .width-97 { display: block; width: 100%; float: none;  /* ?? margin???w?????T?C?h?o?[?????????????????? */  } }
@media screen and (min-width: 800px) { .width-97 { width: 97%; float: right;   position: relative;  z-index: 1001; } }
@media screen and (min-width: 800px) { .width-97-2 { width: 97%; float: right; margin-bottom: 10px; }
  .width-97  dl {margin: 0; }
  .width-97  dt {margin:2px 0px ; border: 1px solid rgba(250, 250, 250, 0.5); width: 96%;  overflow: hidden; }
  .width-97  dt:hover { border-color: aqua; }

  .width-97-2 a { text-align: center; box-shadow: -1px 0px 0 1px rgba(165, 165, 165, 0.13), 0px 0px 0px 1000px rgba(230, 230, 230, 0.11) inset; }
  .width-97-2 a:hover { color: #50FCFD; box-shadow: 0px 0px 0px 1000px rgba(230, 230, 230, 0.3) inset; border-color: aqua; }
  .width-97-2 h1 { color: #f3f3f3; line-height: 2; text-align: right; padding-right: 5%; font-size: 130%; }
  .width-97-2 p { display: block; margin-bottom: 10px; overflow: hidden; line-height: 4.5em; width: 100%; font-size: 90%; list-style-type: none; } }
@media screen and (min-width: 800px) and (min-width: 800px) { .width-97-2 p { overflow: hidden; width: 100%; float: none; line-height: 1.7em; font-size: 100%; } }

/* ?T?C?h?o?[??J?? (?S?????o?C?????????????)*/
@media screen and (min-width: 200px) { #acMenu1 dt { overflow: hidden; border: 1px solid rgba(250, 250, 250, 0.5); width: 96%;  }
  #acMenu1 dd { margin-bottom: 13px; }
  #acMenu1 dd li { width: 100%; float: none; display: block; line-height: 1.2em; font-size: 80%; list-style-type: none; margin-top: 10px; text-align: center; list-style: none; /* ?c??? */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* ?c??? */ }
  #acMenu dt { display: block; height: 50px; line-height: 50px; box-shadow: 0 0 0 1px rgba(165, 165, 165, 0.5); text-align: center; color: #f3f3f3; background: url("https://animort.xyz/_ibez-img/i_swich.png") 10px -69px no-repeat; border: 1px solid rgba(250, 250, 250, 0.5); width: 96%; overflow: hidden; }
  #acMenu dt.active { background: url("https://animort.xyz/images/i_swich.png") 10px 18px no-repeat; }

  #acMenu  dt:hover { border: 1px solid rgba(250, 250, 250, 0.5); }
  #acMenu3 dt.active { background: url("https://animort.xyz/images/i_swich2.png") RGBA(230, 230, 230, 0.73) 50% 8px no-repeat; }
  #acMenu3 a:hover { border-color: aqua; }
 #acMenu dd { display: none; }
  
  #acMenu dd li { width: 100%; float: none; display: block; line-height: 1.7em; font-size: 80%; list-style-type: none; margin-top: 10px; text-align: center; list-style: none; margin-top: 13px; box-shadow: -1px 0px 0 1px rgba(165, 165, 165, 0.9), 0px 0px 0px 1000px rgba(230, 230, 230, 0.3) inset; }
  .folder-col { height: 100%; padding: 10px 0; font-size: 130%; }
  .folder-col:before { display: none; }
  .folder-col .folder-i { display: none; }
  .folder-col .folder-p { display: none; }
 }
@media screen and (min-width: 800px) and (min-width: 420px) { .folder-col { height: 100%; padding: 11px; font-size: 120%; overflow: hidden; max-height: 23.5px; color: #f3f3f3; text-align: center; }
  .folder-col:hover { border-color: aqua; color: #ddd; box-shadow: 0px 0px 0px 200px rgba(109, 68, 125, 0.24) inset; border-color: aqua;  } 

  .folder-col:before { width: 4px; height: 3px; margin-top: -10px; margin-left: -98px; background: #f3f3f3; border-radius: 0 0 1px 1px; }
  .folder-col .folder-i { cursor: pointer; margin: 6px 0 0 10px; position: absolute; width: 26px; height: 19px; background: #f3f3f3; border-radius: 1px 1px 0 0; display: block; }
  .folder-col .folder-p { margin-top: 4px; margin-left: 13px; position: absolute; width: 4px; height: 3px; background: #f3f3f3; border-radius: 0 0 1px 1px; display: block; } }
@media screen and (min-width: 800px) and (min-width: 550px) { .folder-col { padding: 11px; font-size: 120%; } }


#drawer {
    position: fixed;
    top: 0;
     right: -280px; 
    height: 100%;
    width: 280px;
    background: none repeat scroll 0% 0% rgb(109 109 109 / 67%);
    box-shadow: none;
    border-left: 1px solid rgba(204, 204, 204, 0.5);
    overflow-x: hidden;
    overflow-y: scroll;

    -webkit-transition: all, 0.3s;
    -moz-transition: all, 0.3s;
    -o-transition: all, 0.3s;
    transition: all 0.3s;
}

#drawer.open {
    -webkit-transform: translate3d(-280px, 0, 0);
    -moz-transform: translate3d(-280px, 0, 0);
    -ms-transform: translate3d(-280px, 0, 0);
    -o-transform: translate3d(-280px, 0, 0);
    transform: translate3d(-280px, 0, 0);
    list-style: none;
}



form { margin: 0; padding: 0; border: 0; outline: 0; font-size: 100%; vertical-align: baseline; background: transparent; }

input { display: inline-block; background-color: rgba(255, 255, 255, 0.38); border: 1px solid rgba(255, 255, 255, 0.5); padding: 10px; color: #f3f3f3; line-height: 2; margin: 15px 0 0; font-family: -apple-system,BlinkMacSystemFont,'?q???M?m???? ProN W3',Hiragino Mincho ProN,????????,???m????,'Noto Serif Japanese','??????',YuMincho,Roboto,'Droid serif','???C???I','Meiryo'; }
input:hover { color: whitesmoke; text-shadow: 1px 1px 2px #454545, -1px 1px 2px #454545, 1px -1px 2px #454545, -1px -1px 2px #454545; background: rgba(0, 180, 250, 0.2); }

input[type="checkbox"], input[type="radio"] { border: none; top: -9px; top: 0\9; margin-right: 2px; margin-right: 0\9; width: 20px; }

select, input, textarea { vertical-align: middle; position: relative; width: 70%; }

@media screen and (min-width: 480px) { input { width: auto; } }
.submit-button { text-align: center; color: #000;
    overflow: hidden;
    background-color: #00000073;}

.transmit { width: 110px; max-height: 45px; border-radius: 8px; font-size: 18px; color: #1c2494; text-shadow: none; background-color: rgba(101, 170, 248, 0.27); padding: 7px; margin: 5px; font-weight: bold; border-color: rgba(18, 33, 107, 0.8); }
.transmit:hover { color: whitesmoke; text-shadow: 1px 1px 2px #454545, -1px 1px 2px #454545, 1px -1px 2px #454545, -1px -1px 2px #454545; background: rgba(0, 180, 250, 0.2); border-color: aqua; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s; }


form { min-height: 0px; }
input { display: inline-block;  background-color: rgba(255, 255, 255, 0.38);  
    padding: 10px;  width: 20%;  line-height: 2;  margin: 0;  color: #0a0a0a;
}
@media screen and (min-width: 767px) { input {  margin: 10px 0 0; } }


.post .cont-head2 { display: block; }

 .post .cont-head2 .text_right2 .Google { padding: 8px 20px;  background: #333; }
@media screen and (min-width: 600px) { .post .cont-head2 .text_right2 .Google {  text-align: right;  overflow: hidden;   padding: 5px 20px;  } }


   .post .cont-head2 .text_right2 .osirase { width: 100%; padding: 0; background-color: transparent;/* ???^?C?g???g?? */ /* ???{???g??background: url("dezainn01.png") center center no-repeat; */ /* ???{???? */ }
@media screen and (min-width:767px) { .post .cont-head2 .text_right2 .osirase {  background-color: transparent;  border: none; } }

@media screen and (min-width: 480px) { .updata { display:none; } }
@media screen and (min-width: 600px) { .updata { display:block; } }
@media screen and (min-width: 600px) {  .post .cont-head2 .updata {  width: 100%;   height: 61px;   margin: 20px 0px;   background-color: rgba(0, 0, 0, 0.5);  }  }

@media screen and (min-width: 767px) {
.post .cont-head2 { display: block;  overflow: hidden; white-space: normal; min-height: 400px; max-width: 980px; margin: 0 auto; color: #3e3e3e; }
  .post .cont-head2 form { float: left; }
  .post .cont-head2 .input-text { padding: 0 8px; border: 1px solid #c0c0c0; }
  .post .cont-head2 .input-search { padding: 0 8px; border: none; color: #3c3c3c; font-family: ????????,???m????,'Noto Serif Japanese',Roboto,'Droid serif','???C???I','Meiryo'; }
  .post .cont-head2 .input-check { top: -9px; }
  .post .cont-head2 .img_left2 { float: left; padding: 0 0 0 10px; width: 24%; position: relative; overflow: visible; }

  .post .cont-head2 .updata { display: block; width: 100%; height: 61px; margin: 20px 0px; background-color: rgb(217 217 217 / 20%); width: 94%; padding: 70px 0; border: 1px solid rgba(97, 97, 97, 0.49); }
  .post .cont-head2 .updata rb { line-height: 1.4; font-size: 140%; color: rgb(148 189 201 / 83%); }
  .post .cont-head2 .updata rt {  color: rgb(0 231 255 / 75%); }
  .post .cont-head2 .updata .board-ruby { font-size: 80%; text-align: center; }
  .post .cont-head2 .text_right2 { float: right; width: 74%; padding: 10px 0 0 0; overflow: hidden; display: block; }
  .post .cont-head2 .text_right2 .time { margin:10px 0 0 30px;
        float: left;
        text-align: left;
        color: rgb(255 255 255 / 60%);
        font: 210% / 1.7em Arial, Impact, Times New Roman, san-serif;
        display: block;
        z-index: 1;
        position: absolute; }
  .post .cont-head2 .text_right2 .Google { text-align: right; color: rgba(22, 97, 93, 0.6); overflow: hidden; position: absolute;  z-index: 10; right: 30px; padding: 0; background: transparent; }
 .post .cont-head2 .text_right2 .osirase h2 { width: 100%; float: none; line-height: 1.7em; font-size: 100%; }
 .post .cont-head2 .text_right2 .osirase { display: block; }
 .post .cont-head2 .text_right2 .osirase .CollapsibleBox { overflow: hidden; }
  .post .cont-head2 .text_right2 .osirase .CollapsibleBox .CollapsibleBoxTitle { position: relative; }
  .post .cont-head2 .text_right2 .osirase .CollapsibleBox .CollapsibleBoxTitle p.cBoxTitle { font-size: 130%; }
  .post .cont-head2 .text_right2 .osirase .CollapsibleBox .CollapsibleBoxBody { display: none; overflow-x: scroll; max-height: 100px; padding: 10px 0; /*?X?N???[???o?[?S??*/ /*?X?N???[???o?[??O??*/ /*?X?N???[???o?[?????????*/ }
  .post .cont-head2 .text_right2 .osirase .CollapsibleBox .CollapsibleBoxBody ::-webkit-scrollbar { width: 10px; }
  .post .cont-head2 .text_right2 .osirase .CollapsibleBox .CollapsibleBoxBody ::-webkit-scrollbar-track { border-radius: 10px; box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.1); }
  .post .cont-head2 .text_right2 .osirase .CollapsibleBox .CollapsibleBoxBody ::-webkit-scrollbar-thumb { background-color: #27587b; border-radius: 10px; }
  .post .cont-head2 .text_right2 .osirase .CollapsibleBox .cBoxTitle2 { float: right; DISPLAY: inline-flex; padding: 20px; }
  .post .cont-head2 .text_right2 .osirase div.CollapsibleBox div.CollapsibleBoxTitle { text-align: center; color: whitesmoke; text-shadow: 1px 1px 2px #454545, -1px 1px 2px #454545, 1px -1px 2px #454545, -1px -1px 2px #454545; }
  .post .cont-head2 .text_right2 .osirase div.CollapsibleBox div.CollapsibleBoxTitle p.cBoxTitle:hover { color: whitesmoke; text-shadow: 1px 1px 2px #454545, -1px 1px 2px #454545, 1px -1px 2px #454545, -1px -1px 2px #454545; background: rgba(0, 180, 250, 0.2); border-color: aqua; -webkit-transition: 0.5s; -moz-transition: 0.5s; -o-transition: 0.5s; -ms-transition: 0.5s; transition: 0.5s; }
  .post .cont-head2 .text_right2 .osirase div.CollapsibleBox div.CollapsibleBoxTitle p.cBoxButtons { margin: 0px; text-align: center; }
  .post .cont-head2 .text_right2 .osirase div.CollapsibleBox div.CollapsibleBoxTitle p.cBoxButtons a img { border-width: 0px; }
  .post .cont-head2 .text_right2 .osirase div.CollapsibleBoxBody { display: none; /* ???????o???????? on/off?wdisplay: none;?x?t?????{?????????? */ }
  .post .cont-head2 .text_right2 .osirase div.CollapsibleBoxBody p { overflow: hidden; text-align: left; }
  .post .cont-head2 .text_right2 .osirase div.CollapsibleBoxBody img { border: solid 1px #999; }
  .post .cont-head2 .text_right2 .osirase .cBoxTitle2 { float: right; }
 }
@media screen and (min-width: 1100px) {  .post .cont-head2 .work { display: block;  float: left; text-align: center;  width: 217px;   height: 160px;   z-index: 100;    position: absolute;   background: url("/dezain02.png") no-repeat;   top: 230px;   margin: 0 0 0 10px
    } }
@media screen and (min-width: 1100px) { .post .cont-head2 .text_right2 .Google { right: 50px;   padding: 0;  } }
@media screen and (min-width: 1300px) { .post .cont-head2 { color: #ececec; } }
@media screen and (min-width: 1300px) {  .post .cont-head2 .updata { background-color: rgb(217 217 217 / 20%);  } }





#update-board0 { width: 100%; display: block; margin-bottom: 0; top: -40px;   position: relative; }
@media screen and (min-width: 480px) { #update-board0 { display: block; width: 100%; margin-bottom: 0; top: -40px;   position: relative; } }
@media screen and (min-width: 767px) { #update-board0 {  display: none;  } }

#update-board0 hr { display: block; }
#update-board0 ruby { margin: 0; }
#update-board0 .fade2 { display: block; border-width: 0 0 1px; border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%) 0 0 100%; border-style: solid;  border-style: solid;
    top: 50px;  position: relative; } }

#update-board0 rb { position: relative; top: 18px; font-size: 20px; }
@media screen and (min-width: 480px) { #update-board0 rb { top: 5px; font-size: 160%; color: #efefef;  text-shadow: 1px 1px 2px #000000, -1px 1px 2px #000000, 1px -1px 2px #000000, -1px -1px 2px #000000; } }
#update-board0 rt { display: none; }

#update-board0 h1 { color: #efefef; text-shadow: none;  position: relative; text-align: center; width: 100%; overflow: visible; z-index: 10; background-color: rgb(197 197 197 / 24%); }
#update-board0 h1:before { content: url("https://animort.xyz/images/ct3.png"); z-index: -1; position: absolute; top: -50px; left: 50%; margin-left: -233px; -webkit-transform: scale(0.6); transform: scale(0.6); }
@media screen and (min-width: 480px) { #update-board0 h1:before { -webkit-transform: scale(0.7); transform: scale(0.7); top: -60px; } }
@media screen and (min-width: 800px) { #update-board0 h1:before { content: url("https://animort.xyz/images/ct3.png"); -webkit-transform: scale(0.75); transform: scale(0.75); top: -55px; } }
@media screen and (min-width: 800px) { #update-board0 h1 { font-size: 130%; margin-top: 0; display: none; color: #454545; } }

#update-board0 .board-ruby { color: whitesmoke; text-shadow: 1px 1px 2px #454545, -1px 1px 2px #454545, 1px -1px 2px #454545, -1px -1px 2px #454545; font-size: 105%; text-align: center; position: relative; top: 25px; }
@media screen and (min-width: 480px) { #update-board0 .board-ruby { top: 8px; top: -3px; }
  #update-board0 ruby { margin: 5px 0;    top: -6px;   position: relative;} }


 


/* @include absPosition(5px, 20px, 10px, 15px); */
/* HR ???????????? */
.hr-text { line-height: 1em; position: relative; outline: 0; border: 0; text-align: center; height: 1.5em; opacity: .8; }
.hr-text:before { content: ''; background: -webkit-linear-gradient(left, transparent, #818078, transparent); background: linear-gradient(to right, transparent, #818078, transparent); position: absolute; left: 0; top: 50%; width: 100%; height: 1px; }
.hr-text:after { content: attr(data-content); position: relative; display: inline-block; padding: 0 .5em; line-height: 1.5em; }

.fade { border-width: 0 0 1px; border-image: linear-gradient(90deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5) 50%, rgba(255, 255, 255, 0) 100%) 0 0 100%; border-style: solid; }

/*--- ?t?b?^?[??O?g   ----*/
#footer { position: relative;  z-index: 1;     background-color: rgb(0 0 0 / 44%);
    text-align: center;/* ?? blur-container ??abs??u?w?????? */ 
    box-shadow: 0px 0px 0px 1000px #1b0b2d26 inset }
#footer .about-bg { padding: 15px 0; }
#footer .about-bg .about-site { margin: 0 auto; overflow: hidden;  }
#footer .about-bg .about-site h1 { font-size: 18px; text-align: center; padding: 20px 0px 20px 0px; background-color: transparent; }
@media screen and (min-width: 767px) { #footer .about-bg .about-site h1 { background-color: transparent; } }
@media screen and (min-width: 767px) { #footer .about-bg .about-site { width: 90%;
        max-width: 1300px;
overflow: auto;
     } }
#footer .box-rule .about { width: 92%; margin: 0px auto 30px; overflow: hidden; }
@media screen and (min-width: 420px) { #footer .box-rule .about { width: 80%; } }

.foot_window { overflow: hidden;   }

.foot_center { clear: both; overflow: hidden; }
.foot_center h1 { padding: 20px 0px 0px; font-size: 90%; text-align: center; }

.foot_window ul li { float: left; width: 49.0%; text-align: center; margin-bottom: 10px; border: 1px solid rgba(0, 0, 0, 0.7); font-size: 90%; line-height: 3em; background: rgba(222, 222, 222, 0.4); -webkit-transition: all .3s; transition: all .3s; }
.foot_window ul li a { color: whitesmoke; text-shadow: 1px 1px 2px #454545, -1px 1px 2px #454545, 1px -1px 2px #454545, -1px -1px 2px #454545; text-decoration: none; }
.foot_window ul li a:hover { text-shadow: 1px 1px 2px white, -1px 1px 2px white, 1px -1px 2px white, -1px -1px 2px white; text-decoration: underline; color: white; text-decoration: none; position: relative; display: block; color: #fff; background: rgba(43, 15, 16, 0.72); text-decoration: none; -webkit-transition: all .3s; transition: all .3s; }
.foot_window ul li a:hover:hover, .foot_window ul li a:hover:active, .foot_window ul li a:hover:focus { color: white; }
.foot_window ul li a:hover:hover, .foot_window ul li a:hover:active, .foot_window ul li a:hover:focus { background-color: rgba(119, 41, 44, 0.72); }

@media screen and (min-width: 767px) { .foot_window ul li { width: 33%; font-size: 100%; line-height: 2.6em; border: 1px solid rgba(68, 68, 68, 0.7); margin-bottom: 13px; } }
@media screen and (min-width: 1023px) { .foot_window ul li { width: 24.7%; font-size: 90%; line-height: 2.3em; margin-bottom: 0px; } }
@media screen and (min-width: 1200px) { .foot_window ul li { width: 19.8%; } }
.picture-item__description { font: normal 95%/220% Times New Roman,"???C???I", sans-serif; }

.rss { float: left; text-align: center; display: block; margin-left: 1%; font: normal 130%/200% Times New Roman,"???C???I", sans-serif; background: rgba(222, 222, 222, 0.4); width: 80px; }
.rss a:hover { text-shadow: 1px 1px 2px white, -1px 1px 2px white, 1px -1px 2px white, -1px -1px 2px white; text-decoration: underline; color: white; text-decoration: none; position: relative; display: block; color: #fff; background: rgba(43, 15, 16, 0.72); text-decoration: none; -webkit-transition: all .3s; transition: all .3s; }
.rss a:hover:hover, .rss a:hover:active, .rss a:hover:focus { color: white; }
.rss a:hover:hover, .rss a:hover:active, .rss a:hover:focus { background-color: rgba(119, 41, 44, 0.72); }

#copyright {   padding: 10px 0 10px 0; text-align: center; -webkit-box-shadow: 0px 0px 0px 1000px rgba(27, 20, 21, 0.7)inset; -moz-box-shadow: 0px 0px 0px 1000px rgba(27, 20, 21, 0.7)inset; box-shadow: 0px 0px 0px 1000px rgba(27, 20, 21, 0.7)inset; clear: both; }
#copyright #foot-text { margin-bottom: 10px; font-size: 80%; line-height: 1.6em; padding: 10px 10%; }
@media screen and (min-width: 767px) { #copyright #foot-text { font-size: 90%; padding: 0; } }
#copyright #foot { border-top: 1px solid #999; border-bottom: 1px solid #999; -webkit-box-shadow: 0px 0px 0px 1000px rgba(41, 41, 41, 0.2)inset; -moz-box-shadow: 0px 0px 0px 1000px rgba(41, 41, 41, 0.2)inset; box-shadow: 0px 0px 0px 1000px rgba(41, 41, 41, 0.2)inset; background-image: url("https://animort.xyz/_ibez-img/kusa.png"); background-position: left bottom; background-repeat: repeat-x; padding: 10px 0; font-size: 77%; line-height: 1.6em; }
#copyright #foot a { color: whitesmoke; display: inline-block; }
@media screen and (min-width: 767px) { #copyright #foot { font: normal bold 100%/130% Times New Roman,"???C???I", sans-serif; padding: 5px 0; } }





#maso-wrap { position: relative; overflow: hidden; position: relative;  margin: 0 auto 30px; padding-bottom:20px; }
@media screen and (min-width: 480px) { #maso-wrap { width: 100%; background-color: rgba(0, 0, 0, 0.2); } }

#maso-cont { width: 100%; margin: 0 auto;  }

.maso-item { margin: 20px auto 0; width: 151px; overflow: hidden; position: relative; list-style: none; box-shadow: 0 0 0 1px #4a4a4a; border-radius: 100px; background-color: #efefef; }
.maso-item img:hover { transform: scale(1.1); -webkit-transition: 0.2s; -moz-transition: 0.2s; -o-transition: 0.2s; -ms-transition: 0.2s; transition: 0.2s; opacity: .5; }
.maso-item a { display: block; }
.maso-item a:link { color: #50FCFD; }
.maso-item a:hover { color: #50FCFD; text-shadow: 1px 1px 2px #2e93ff, -1px 1px 2px #2e93ff, 1px -1px 2px #2e93ff, -1px -1px 2px #2e93ff; border-radius: 100px; }
.maso-item a:active { color: #8888ff; font-weight: bold; }
.maso-item h1 { position: absolute; right: 0px; padding: 6px 15px 4px; font-size: 120%; /* ???o?? column-span:none;  ????g?????*/ box-shadow: 0 0 0 1px #4a4a4a; background-color: #26738c99; z-index: 1; }
.maso-item h2 { font-size: 20px; text-align: center; position: relative; padding: 10px; }
.maso-item h2:before { content: url(https://animort.xyz/_ibez-img/h2-line.png); position: absolute; bottom: -9px; left: 50%; margin-left: -75px; /* Half of my width. */ }
.maso-item p { text-align: center; display: block; position: absolute; right: 0px; bottom: 0px; width: 100%; }
.maso-item p a { box-shadow: 0 0 0 1px #4a4a4a; background-color: rgba(14, 28, 60, 0.76); font-size: 94%; line-height: 2.6em; /* ?c??? */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* ?c??? */ }
.maso-item li { text-align: center; line-height: 1.8; font-size: 86%; background-color: #6c6c6c; box-shadow: 0 0 0 1px #373737; }
.maso-item .maso-item.kuro { box-shadow: 0 0 0 1px rgba(165, 165, 165, 0.5); filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.8)); background-color: rgba(255, 255, 255, 0.29); }
.maso-item .date { left: 0; top: 0; padding: 10px 0 0 15px; width: 20px; z-index: 1; }

@media screen and (min-width: 480px) { .maso-item { width: 145px; float: left; /*Lazy Load */ background-color: #efefef; } }
.maso-item.x2 { height: 100px; width: 100%; border-radius: 0;   text-shadow: none; }
.maso-item.x2 h1 img { width: auto; }
.maso-item.x2 li, .maso-item.x2 img { display: block; top: -1px; position: relative; }
.maso-item.x2 li:hover, .maso-item.x2 img:hover { transform: none; }

@media screen and (min-width: 480px) { .maso-item.x2 { width: 300px; height: auto; } }
.maso-item.x3 { height: auto; width: 100%; box-shadow: 0 0 0 1px rgba(250, 250, 250, 0.2); background-color: rgba(0, 0, 0, 0.2); text-shadow: 1px 1px 2px #333, -1px 1px 2px #333, 1px -1px 2px #333, -1px -1px 2px #333; }
.maso-item.x3 h1 img { width: auto; }
.maso-item.x3 li, .maso-item.x3 img { display: block; }
.maso-item.x3 li:hover, .maso-item.x3 img:hover { transform: none; }

@media screen and (min-width: 480px) { .maso-item.x3 { width: 300px; min-height: 170px; } }
.maso-item.x2.siro { box-shadow: 0 0 0 1px rgba(165, 165, 165, 0.5); filter: drop-shadow(0px 1px 2px rgba(0, 0, 0, 0.8)); background-color: rgba(255, 255, 255, 0.29); }

.maso-item.x2 li { text-align: left; text-indent: 1em; box-shadow: 0 0 0 1px rgba(165, 165, 165, 0.5); margin-top: 5px; font: 96%/3em Times New Roman,"Hiragino Maru Gothic W4 JIS2004",'???S?V?b?N??', 'Yu Gothic', YuGothic,"???C???I", serif; }

@media screen and (min-width: 480px) { .maso-item.x2 li { font: 88%/2.0em "Hiragino Maru Gothic W4 JIS2004",'???S?V?b?N??', 'Yu Gothic', YuGothic,"???C???I", serif; } }
.black { background-color: #52ad98; padding: 0 0 10px; }



/*! ??  ???????????? ?|?b?v?A?b?v???[?_???E?B???h?@?\ ????????????  */
#open01, #open02 { display: none; width: 100%; height: 100%; position: absolute; top: 0; left: 0; }

.close_overlay { display: block; text-indent: -9999px; position: fixed; left: 0px; right: 0px; top: 0px; bottom: 0px; background: #000; opacity: 0.5; z-index: 999998; }

.modal_window { margin: 40px 20px; text-align: center; overflow: hidden; display: block; z-index: 999999; position: absolute; top: 0%; left: 0%; right: 0%; -webkit-transform: scale(0); }
.modal_window .book-block { box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.9); margin: 30px 0 0; border-radius: 8px; overflow: hidden; }
.modal_window .contents { display: block; }
.modal_window .contents .content2-0 { width: 100%; overflow: hidden; font-size: smaller; background-color: rgba(0, 0, 0, 0.6); border: none;}
.modal_window .contents .content2-0 .img_left2 { float: none; width: auto; }
@media screen and (min-width: 767px) { .modal_window .contents .content2-0 .img_left2 { float: left; width: 55%; } }
.modal_window .contents .content2-0 .text_right2 h1 { text-shadow: none; margin: 5px 0 5px;  }
.modal_window .contents .content2-0 .text_right2 p { text-align: left; background-color: #e7e7e7;
  margin-top: 8px;  padding: 20px 15px 20px; color: #333;
    font-size: 15px; }
@media screen and (min-width: 480px) { .modal_window .contents .content2-0 .text_right2 { width: auto; float: none; display: block; color: aqua; } }
@media screen and (min-width: 767px) { .modal_window .contents .content2-0 .text_right2 { width: 44.5%; float: right; display: block; } }
.modal_window h1 { overflow: hidden; width: 100%; line-height: 30px; font-size: 150%;
    color: #efefef;
    background-color: rgb(3 3 3 / 69%);
    padding: 3px; }
.modal_window h1 li{ font-size: 73%; list-style: none;
    color: #de7cef; }
.modal_window h2 { overflow: hidden; width: 100%; padding: 10px 0;  line-height: 30px; font-size: 120%; text-align: left; background: none; display: inline-block; color: #454545; text-shadow: none; }
.modal_window h2 a { float: right; margin-right: 20px; text-shadow: none; padding: 15px; text-indent: 0; text-align: center;  font-size: 35px; background-color: #333; border-radius: 80px; }
.modal_window h3 { overflow: hidden; width: 100%;  line-height: 40px; font-size: 110%; text-indent: 15px; display: inline-block; text-shadow: none; color: #454545; }
.modal_window p { padding: 0 15px 40px; font-size: 96%; line-height: 160%; }
@media screen and (min-width: 767px) { .modal_window p { padding: 0 15px 20px; } }
.modal_window ul { background-color: #e8e8e8; overflow: hidden; padding: 10px; }
.modal_window ul li {float: right;width: 100%;text-align: center;margin: 8px 0;box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.9);background-color: rgba(17, 57, 72, 0.75);font: 100%/3em Georgia, Hiragino Mincho ProN,YuMincho, Roboto,'Droid serif',serif;color: #f9f9f9;text-shadow: none;}
.modal_window ul li a { text-decoration: none; -webkit-transition: 0.3s; -moz-transition: 0.3s; -o-transition: 0.3s; -ms-transition: 0.3s; transition: 0.3s; cursor: pointer; }
.modal_window ul li a:link { display: block; color: #50FCFD; }
.modal_window ul li a:visited { color: #f3f3f3; text-shadow: none; }
.modal_window ul li a:hover { box-shadow: 0px 0px 3px rgba(26, 18, 72, 0.8); opacity: 1; background-color: #5F1515; height: 100%; }
@media screen and (min-width: 380px) { .modal_window ul li { width: 50%; } }
@media screen and (min-width: 767px) { .modal_window ul li { width: 33%; } }
@media screen and (min-width: 1023px) { .modal_window ul li { width: 25%; } }
@media screen and (min-width: 1100px) { .modal_window ul li { width: 20%; } }
@media screen and (min-width: 1200px) { .modal_window ul li { width: 16.6%; } }
@media screen and (min-width: 767px) { .modal_window ul { padding: 10px 50px; } }
.modal_window .img-reset { width: 100%; padding: 10px 0 0; overflow: hidden; }
.modal_window .img-reset input { float: right; width: 48%; display: inline-block; font-size: 120%; padding: 2px 10px; }
.modal_window .img-reset input:hover { box-shadow: 0px 0px 3px rgba(26, 18, 202, 0.3); opacity: 1; background-color: #5F1515; height: 100%; }
@media screen and (min-width: 767px) { .modal_window .img-reset input { margin: 0; width: auto; } }

@media screen and (min-width: 767px) { .modal_window { margin: 40px; } }
@media screen and (min-width: 1200px) { .modal_window { margin: 30px 100px; } }
@-webkit-keyframes modalFadeIn { 0% { opacity: 0; display: block; }
  100% { opacity: 1; } }
div#modal div:target { opacity: 1; display: block; }

@-webkit-keyframes modalScale { 0% { opacity: 0; display: block; -webkit-transform: scale(0); }
  100% { opacity: 1; -webkit-transform: scale(1); } }
div#modal div:target .modal_window { background-color: rgb(2 2 2 / 27%); opacity: 1; display: block; -webkit-animation-name: modalScale; -webkit-animation-duration: 1s; -webkit-animation-iteration-count: 1; -webkit-transform: scale(1); }



.youtube iframe { width: 96%;  aspect-ratio: 16 / 9;  padding: 0 2%; }
.entry p {
    max-width: 970px;
    margin: 3em auto;
    font-size: 20px;
    line-height: 1.8;
}

.p-container{ margin:0 auto; text-align:center; clear:both; padding:0; min-height: 1200px;
    overflow: hidden; }
.p-container img{ max-width:100%; height:auto; }
.masonry-container{ width:100%; margin:0 auto; text-align:center; }

.masonry{ background-color: rgb(121 121 121 / 98%); display:inline-block; margin:5px 5px; border-radius: 7px;  position: relative; list-style: none; box-shadow: 0 0 0 1px #4a4a4a; overflow: hidden; }


.masonry img:hover { transform: scale(1.1); -webkit-transition: 0.2s; -moz-transition: 0.2s; -o-transition: 0.2s; -ms-transition: 0.2s; transition: 0.2s;  }
.masonry a { display: block; }
.masonry a:link { color: #50FCFD; }
.masonry a:hover { color: #50FCFD; text-shadow: 1px 1px 2px #2e93ff, -1px 1px 2px #2e93ff, 1px -1px 2px #2e93ff, -1px -1px 2px #2e93ff;  }
.masonry a:active { color: #8888ff; font-weight: bold; }
.masonry h1 { position: absolute; right: 0px; padding: 6px 15px 4px; font-size: 120%; /*???o?? */  column-span:none;  box-shadow: 0 0 0 1px #4a4a4a; background-color: #26738c99; z-index: 1; }
.masonry h2 { font-size: 20px; text-align: center; position: relative; padding: 10px; }
.masonry h2:before { content: url(https://animort.xyz/_ibez-img/h2-line.png); position: absolute; bottom: -9px; left: 50%; margin-left: -75px; /* Half of my width. */ }

.masonry .date { left: 0;    top: 0;
    padding: 5px 10px 5px 10px;
    z-index: 1; position: absolute;
    background-color: rgba(14, 28, 60, 0.76);
    color: #efefef; font-size: 18px;
    border-radius: 3px; }


.ww1{ width:320px; }
.ww2{ width:650px; }

@media screen and (min-width: 320px) and (max-width: 480px){
.ww1{ width:160px; }
.ww2{ width:160px; }
}

.ov { box-shadow: 0 0 0 1px #4a4a4a; background-color: rgb(14, 28, 60); font-size: 85%; line-height: 2.1em; /* ?c??? */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* ?c??? */
    position: relative;  padding: 7px 10px; z-index: 1; color: rgb(255 255 255 / 76%); }
.ov2 { box-shadow: 0 0 0 1px #4a4a4a; background-color: rgb(14, 28, 60); font-size: 85%; line-height: 2.1em; /* ?c??? */ overflow: hidden; text-overflow: ellipsis; white-space: nowrap; /* ?c??? */
    position: relative;  padding: 20px 10px 7px; z-index: 1; color: rgb(255 255 255 / 76%); }
.ov-box {  }
.ov-box>p { font-size: 1.4rem; color: rgb(255 255 255 / 76%); text-align:left; }

.box-inner:hover .ov{ opacity:1; background: rgba(0, 0, 0, 0.5);  }
.box-inner:hover img{  }


@media screen and (min-width: 319px) and (max-width: 768px){
.ww2{ width:320px; }
}



.flex0 {  display: block; width: 100%;  align-items: center;  justify-content: space-around; }

@media screen and (min-width: 800px) {
 .flex0 {  display: flex;  justify-content: space-around; align-items: flex-start; }
}

.box0 { display: block; 
  text-align: center; background-color: rgb(30 97 107 / 57%); 
    padding: 10px;
   flex-direction: column; /* ??????v?f???c???? */
}

@media screen and (min-width: 800px) {
 .flex0 {  display: flex; /* ??????v?f?????? */ background-color: none; }
.box0 { background-color: transparent; }
}

.box0 img {  max-width:248px; margin-bottom: 10px; }
.box0 .bg img {  max-width:712px; border: 1px solid rgba(255, 255, 255, 0.2); width: 100%; }

.box_inner {
  /* flex-grow: 1; ?????w?? */
  display: flex; /* ??????v?f?????? */
  flex-direction: column; /* ??????v?f???c???? */
}


.box_inner h2{
    position: relative;
    top: -1em;
    color: aqua;
    font-size: 14px;
}

.box_inner2 {  display: flex; /* ??????v?f?????? */  flex-direction: column; /* ??????v?f???c???? */ }
.box_inner2 h2{ position: relative;  top: -1em;  color: aqua;  font-size: 14px; }

.box0 p { padding: 1em 0; display: block; 
  text-align: center; 
  font-size: 16px;
  line-height: 1.7em; background-color: rgb(173 174 187 / 8%);
   /* flex-grow: 1;?????w?? */border-radius: 7px;
}




.modal0 {
  display: none;
  overflow: hidden;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999;
  width: 100%;
  height: 100%;
  background-color: rgb(0 0 0 / 15%);
}

.modal_img {
  cursor: pointer;
}

.modal_content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 1300px;
  height: 83%;
}

.modal_content img {
  width: 100%;
 height: 100%;
  object-fit: contain;
}


.modal_close {
  display: block;
  width: 40px;
  height: 40px;
  position: absolute;
  top: -50px;
  right: 0px;
  transition: 0.3s; z-index: 99999;
}

.modal_close:hover {
  opacity: 0.7;
}

.modal_close::before, .modal_close::after {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  width: 100%;
  height: 2px;
  margin-top: -1px;
  margin-left: -50%;
  background-color: #fff; z-index: 99999;
}

.modal_close::before {
  transform: rotate(45deg);
}

.modal_close::after {
  transform: rotate(-45deg);
}

.modal_close_box {
  position: relative;
}


#comment_form   {  background-color: rgb(255 254 254 / 63%); padding: 2em 10%; }
#comment_form td  { width: 35px; }
.comment_body p {
    margin: 13px 0 0;
    font-size: 90%;
    line-height: 1.4em;
    color: azure;
    text-align: center;
}