@charset "UTF-8";
/*
 Kamisama-Shibai, copyright 2018 KADOKAWA
 Last update: 2018.10.05
 */

/*
 common element
*/
html {
    color: #555555;
    font-size: 14px;
    line-height: 21px;
    font-family: Verdana, Geneva, "sans-serif";
}
html, body {
    min-height: 100%;
    height: 100%;
}
a {
    color: #555555;
}


/***************
 *
 * Tablet and Mobile
 * width < 768px
 *
 */

@media (max-width: 768px) {
    
    .hidden-small{
        display: none;
    }
   
    body {
        width: 100%;
        height: 100%;
        min-height: 100%;
        padding: 0;
        background: #FFF;
    }
    #content-wrapper {
        position: relative;
        background-color: transparent;
        max-width: 100%;
        min-height: 100%;
        overflow: hidden;
        margin: 0 auto;
    }
    
    /* header*/
    header#first-row-header-mobile {
        margin: 0;
        overflow: hidden;
        transition: height 0.5s;
    }
        .first-row-header{
            margin: 0.5rem 1rem;        
        }
    h1 {
        margin: 0;
        padding: 0;
        display: inline-block;
    }
    .menu-bars {
        width: 2rem;
        height: 2rem;
    }
    .menu-bars>svg {
        height: 100%;
        width: 100%;
    }
    .header-logo img {
        height: 46px;
    }
    .pulldown-menu-toggle {
        cursor: pointer;
    }
    .pulldown-menu {
        width: 100%;
        transition: height 0.3s;
        overflow: hidden;
        background: #CCC;
        box-shadow: 0 1px 10px rgba(100,100,100,0.5);
    }
    .pulldown-menu-div{
        height: 48px;
        text-align: center;
        margin-bottom: 1px;
    }
    .pulldown-menu-div a{
        display: block;
    }
    .pulldown-menu-div img{
        height: 14px;
        filter: brightness(10)
    }

    .pulldown-menu-div:hover{
        filter: brightness(0.9);
    }
    .pulldown-menu-div-color1{
        background: #ff82a0;
    }
    .pulldown-menu-div-color2{
        background: #01BED4;
    }

    .menu-hidden {
        height: 0;
    }
    .menu-visible {
        height: calc(50px*7);
    }
    .header-mobile{
        background: #727272;
        padding: 0.6rem 1rem 0.8rem;
        text-align: center;
    }
    .header-mobile img{
        height: 1rem;
        filter: brightness(10);
    }
    
    /* School name and emblem */

    .transition-wrapper{
        width: 100%;
        height: 888px;
        overflow: hidden;
        position: relative;
    }
    
   .school{
        width: 300px;
        overflow: visible;
        margin: 1.8rem auto 0;
        position: relative;
    }
    
    .school-emblem {
        text-align: center;
        width: 250px;
        margin: 0 auto;
        /* background: url(../../images/SVG/separator.svg) bottom center no-repeat; */
        /* background-size: 150px; */
    }

    .character-link-chevron-left{
        position: absolute;
        left: 62px;
        top: 23px;
        width: 12px;
    }
    .character-link-chevron-right{
        position: absolute;
        right: 62px;
        top: 23px;
        width: 12px;
    }
    .link-chevron-left{
        width: 20px;
        fill: #888;
    }
    .link-chevron-right{
        width: 20px;
        fill: #888;
    }
    
    
    /* NAKATSU*/
    .nakatsu-emblem{
        width: 75px;
    }
    .nakatsu-emblem-bg{
        fill: #FFF;
    }
    .nakatsu-emblem-main{
        fill: #555;
    }
    .nakatsu-name-center{
        fill: #FFF;
    }
    .school-link-nijikake-emblem-bg{
        fill: none;
    }
    .school-link-nijikake-emblem-main{
        fill: #555;
        opacity: 0.8;
    }
    .school-link-other-emblem-bg{
        fill: none;
    }
    .school-link-other-emblem-main{
        fill: #555;
        opacity: 0.8;
    }
    /* NIJIKAKE*/
    .nijikake-emblem{
        width: 70px;
    }
    .nijikake-emblem-bg{
        fill: #FFF;
    }
    .nijikake-emblem-main{
        fill: #555;
    }
    .nijikake-name-center{
        fill: #FFF;
    }
    .school-link-nakatsu-emblem{
        width: 28px !important;
    }
    .school-link-nakatsu-emblem-bg{
        fill: none;
    }
    .school-link-nakatsu-emblem-main{
        fill: #555;
        opacity: 0.9;
    }
    /* Other */
    .other-emblem{
        width: 70px;
    }
    .other-emblem-bg{
        fill: none;
    }
    .other-emblem-main{
        fill: #555;
    }
    .other-name-center{
        fill: #FFF;
    }
    

    .school-name{
        padding-top: 8px;
        text-align: center;
        height: 70px;
        position: relative;
    }
    .school-name>svg{
        height: 92px;
    }
    .school-name::before{
        position: absolute;
        top: 0;
        left:50%;
        transform: translate(-50%,0);
        content: "";
        display: block;
        width: 8rem;
        height: 0.3rem;
        background-color: #FFF;
        opacity: 0.8;
    }
    
    .school-link{
        margin: 13px 0;
        height: 22px;
    }
    .school-link>div{
        height: 24px;
        width: 24px;
        margin: 0 10px;
    }
    .school-link img{
        height: 40px;        
    }
    
    .school-outline{
        margin: 2rem 1rem 0;
        text-align: justify;
    }
    
    
    .character-top {
        padding-right: 10px;
        margin: 0 auto;
        width: 94%;
    }
    
    
    /*
     Footer
    */
    
    footer.mo-footer {
    margin-top: -26px;
    background: #666;
    color: #FFF;
    height: 25px;
    }
    
    
}

/***************
 *
 * PC
 * width > 768px
 *
 */

@media (min-width: 769px) {

    .visible-small{
        display: none;
    }
    
    body {
        width: 100%;
        height: 100%;
        padding: 0;
        background: #FFF;
    }
    #content-wrapper {
        position: relative;
        background: #FFFFFF;
        max-width: 1200px;
        min-height: 100%;
        overflow: hidden;
        margin: 0 auto;
    }
    
    /* 
        First Row 
    */
    
    .first-row {
        width: 100%;
        height: 70rem;
        position: relative;
    }
    
    
    /* header */
    .header {
        height: 4.5rem;
        background-color: #FFF;
    }
    .header-r{
        padding-right: 1.5rem;
    }
    .header-r>div {
        margin-left: 2rem;
        position: relative;
    }
    .header-r img{
        height: 11px;   
    }
    .header-l{
        padding-left: 1.5rem;
    }
    
    .header-l h1{
        margin:0;
        padding:0;
    }
    
    .header-logo img {
        width: 12rem;
        height: auto;
    }
    

    
    /* character */
    
    .transition-wrapper{
        width: 100%;
        height: 1930px;
        overflow: hidden;
        position: relative;
    }

    .characters {
        width: 100%;
    }
    
    .character-section{
        margin: 4rem 0;                
    }
    

    /* school */
    

    
    .school{
        width:800px;
        height: 355px;
        margin: 2.5rem auto;
        position: relative;
    }
    
    .school-emblem {
        text-align: center;
        width: 250px;
        height: 106px;
        margin: 0 auto;
        padding-bottom: 21px;
        /* background: url(../../images/SVG/separator.svg) bottom center no-repeat; */
        /* background-size: 150px; */
    }

    .character-link-chevron-left{
        position: absolute;
        left: 240px;
        top: 50px;
        width: 20px;
    }
    .character-link-chevron-right{
        position: absolute;
        right: 240px;
        top: 50px;
        width: 20px; 
    }
    .link-chevron-left{
        width: 20px;
        fill: #999;
    }
    .link-chevron-right{
        width: 20px;
        fill: #999;
    }
    
    
    /* NAKATSU*/
    .nakatsu-emblem{
        width: 136px;
    }
    .nakatsu-emblem-bg{
        fill: #FFF;
    }
    .nakatsu-emblem-main{
        fill: #555;
    }
    .nakatsu-name-center{
        fill: #FFF;
    }
    .school-link-nijikake-emblem-bg{
        fill: none;
    }
    .school-link-nijikake-emblem-main{
        fill: #555;
        opacity: 0.8;
    }
    .school-link-other-emblem-bg{
        fill: none;
    }
    .school-link-other-emblem-main{
        fill: #555;
        opacity: 0.8;
    }
    /* NIJIKAKE*/
    .nijikake-emblem{
        width: 128px;
    }
    .nijikake-emblem-bg{
        fill: #FFF;
    }
    .nijikake-emblem-main{
        fill: #555;
    }
    .nijikake-name-center{
        fill: #FFF;
    }
    .school-link-nakatsu-emblem{
        width: 45px !important;
    }
    .school-link-nakatsu-emblem-bg{
        fill: none;
    }
    .school-link-nakatsu-emblem-main{
        fill: #555;
        opacity: 0.9;
    }
    /* Other */
    .other-emblem{
        width: 128px;
    }
    .other-emblem-bg{
        fill: none;
    }
    .other-emblem-main{
        fill: #555;
    }
    .other-name-center{
        fill: #FFF;
    }
    

    .school-name{
        padding-top: 50px;
        text-align: center;
        height: 50px;
        position: relative;
    }
    .school-name>svg{
        height: 92px;
    }
    .school-name::before{
        position: absolute;
        top: 0;
        left:50%;
        transform: translate(-50%,0);
        content: "";
        display: block;
        width: 13rem;
        height: 0.4rem;
        background-color: #FFF;
        opacity: 0.8;
    }
    
    .school-link{
        margin: 24px 0;
        height: 40px;
    }
    .school-link>div{
        height: 40px;
        width: 40px;
        margin: 0 15px;
    }
    .school-link img{
        height: 40px;        
    }
    
    
    

    .character-section {

    }

 
    .school-outline{
        width: 519px;
        margin: 0 auto;
        text-align: justify;
    }
    .character-group {
        margin-top: 4rem;
        position: relative;
        height: 900px;
    }
    
    .charcter{

    }
    /* nakatsu gakuin */
    
    #ch01-loki{
        position: absolute;
        left: 30%;
        bottom: 4rem;
        height: calc(997px*0.77);
    }
    #ch01-loki>a>image{
        filter: url(#brightness);
    }
    #ch01-loki>a>image:hover{
        filter: none;
    }
    #ch02-mahiro{
        position: absolute;
        right: 33%;
        bottom: 31px;
        height: calc(1061px*0.75);
    }
    #ch02-mahiro>a>image{
        filter: url(#brightness);
    }
    #ch02-mahiro>a>image:hover{
        filter: none;
    }
    #ch03-akira{
        position: absolute;
        left: 16%;
        bottom: 30px;
        height: calc(1055px*0.76);
    }
    #ch03-akira>a>image{
        filter: url(#brightness);
    }
    #ch03-akira>a>image:hover{
        filter: none;
    }
    #ch04-sosuke{
        position: absolute;
        left: 1%;
        bottom: 2.8rem;
        height: calc(1054px*0.76);
    }
    #ch04-sosuke>a>image{
        filter: url(#brightness);
    }
    #ch04-sosuke>a>image:hover{
        filter: none;
    }
    #ch05-itsuki{
        position: absolute;
        right: 17%;
        bottom: 26px;
        height: calc(1112px*0.76);
    }
    #ch05-itsuki>a>image{
        filter: url(#brightness);
    }
    #ch05-itsuki>a>image:hover{
        filter: none;
    }
    #ch06-ritsu{
        position: absolute;
        right: 1%;
        bottom: 8px;
        height: calc(1032px*0.78);
    }
    #ch06-ritsu>a>image{
        filter: url(#brightness);
    }
    #ch06-ritsu>a>image:hover{
        filter: none;
    }

    
    /* nijikake */
    
    #kamiya-heimdall{
        position: absolute;
        left: 11%;
        bottom: 0;
        height: calc(861px*0.96);
    }
    #kamiya-heimdall>a>image{
        filter: url(#brightness);
    }
    #kamiya-heimdall>a>image:hover{
        filter: none;
    }
    #jinguji-thor{
        position: absolute;
        left: 25%;
        bottom: 1rem;
        height: calc(926px*0.95);
    }
    #jinguji-thor>a>image{
        filter: url(#brightness);
    }
    #jinguji-thor>a>image:hover{
        filter: none;
    }
    #kagura-yukito{
        position: absolute;
        left: 43%;
        bottom: 11px;
        height: calc(893px*0.95);
    }
    #kagura-yukito>a>image{
        filter: url(#brightness);
    }
    #kagura-yukito>a>image:hover{
        filter: none;
    }
    #shirakami-balder{
        position: absolute;
        right: 26%;
        bottom: 1rem;
        height: calc(850px*0.97);
    }
    #shirakami-balder>a>image{
        filter: url(#brightness);
    }
    #shirakami-balder>a>image:hover{
        filter: none;
    }
    #shirakami-bragi{
        position: absolute;
        right: 11%;
        bottom: 30px;
        height: calc(835px*0.96);
    }
    #shirakami-bragi>a>image{
        filter: url(#brightness);
    }
    #shirakami-bragi>a>image:hover{
        filter: none;
    }

    /* OTHER */
    
    #odin{
        position: absolute;
        left: 11%;
        bottom: 9px;
        height: calc(935px*0.96);
    }
    #odin>a>image{
        filter: url(#brightness);
    }
    #odin>a>image:hover{
        filter: none;
    }
    #ryuzaki-iku{
        position: absolute;
        left: 38%;
        bottom: 27px;
        height: calc(3224px * 0.265);
    }
    #ryuzaki-iku>a>image{
        filter: url(#brightness);
    }
    #ryuzaki-iku>a>image:hover{
        filter: none;
    }
    #kusaka-shintaro{
        position: absolute;
        left: 57%;
        bottom: 47px;
        height: calc(3098px * 0.25);
    }
    #kusaka-shintaro>a>image{
        filter: url(#brightness);
    }
    #kusaka-shintaro>a>image:hover{
        filter: none;
    }
    #takaoka-ko{
        position: absolute;
        left: 72%;
        bottom: 41px;
        height: calc(3324px * 0.25);
    }
    #takaoka-ko>a>image{
        filter: url(#brightness);
    }
    #takaoka-ko>a>image:hover{
        filter: none;
    }    
    #many-others{
    position: absolute;
    left: 20%;
    width: 828px;
    top: 910px;
    }
    .many-others>a>image{
        filter: url(#brightness);
    }
    .many-others>a>image:hover{
        filter: none;
    } 
    
    #other-hebikawa{
        position: absolute;
        left: 241px;
        top: 917px;
    }
    
    #other-rin{
        position: absolute;
        left: 390px;
        top: 969px;
    }
    
    #other-daido{
        position: absolute;
        left: 521px;
        top: 910px;
    }
    
    #other-montaro{
        position: absolute;
        left: 841px;
        top: 914px;    
    }
    
    #other-norppa{
        position: absolute;
        left: 964px;
        top: 1344px;
    }
    
    /*
     Footer
    */
    
    footer.pc-footer {
        background: #666;
        color: #FFF;
        padding: 1rem;
    }    
    
    
    
    /* common */

    .button-more {
        
    }
    .button-more>a {
        display: inline-block;
        position:relative;
        z-index:1;
        padding: 0.5rem 7rem 0.7rem;
        background: white;
        border: 2px solid #ff82a0;
        border-radius: 1.6rem;
        overflow:hidden;
        text-align: center;
    }
    .button-more>a>img {
        height: auto;
        width: 6rem;
    }
    .button-more>a:hover {
        background: #ff82a0;
        border: 2px solid #FFA0B6;
        transition-property: background-color;
    }
    .button-more-img-hover {
        filter: brightness(100);
    }


     .button-radio {
        
    }
    .button-radio>a {
        display: inline-block;
        position:relative;
        z-index:1;
        padding: 0.5rem 7rem 0.7rem;
        background: white;
        border: 2px solid #00bed2;
        border-radius: 1.6rem;
        overflow:hidden;
        text-align: center;
    }
    .button-radio>a>img {
        height: auto;
        width: 7rem;
    }
    .button-radio>a:hover {
        background: #00bed2;
        border: 2px solid #00bed2;
        transition-property: background-color;
    }
    .button-radio-img-hover {
        filter: brightness(100);
    }
    
    /*
     Footer
    */
    
    footer.pc-footer {
        background: #666;
        color: #FFF;
        padding: 1rem;
    }    
    
    

    
}/* end pc*/


 

/***************
 *
 * Utilities
 *
 */

/* animate-underline */

.animate-underline:before,
.animate-underline:after{
  position: absolute;
  content: "";
  display: inline-block;
  width: 0;
  bottom: -2px;
  height: 1px;
  background: #777;
  transition: 0.3s;
}

.animate-underline:before{
  left: 50%;
}

.animate-underline:after{
  right: 50%;
}

.animate-underline:hover:before,
.animate-underline:hover:after{
  width: 50%;
}

.static-underline:before{
  position: absolute;
  content: "";
  display: inline-block;
  width: 100%;
  bottom: -2px;
  height: 1px;
  background: #777;
}
.notactive {
    opacity: 0.5;
}


/* Transition */

.nakatsu{
    z-index: 102;
}
.nijikake{
    z-index: 101;
}
.other{
    z-index: 100;
}


.school-transition{
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left:0;
  background: #FFF;
}

.page-uncurrent{
  transform: translateX(100%);
}
.page-current{
  display: block;
}
.move-to-left {
	animation: moveToLeft .8s ease both;
}
.move-from-right {
	animation: moveFromRight .8s ease both 0.2s;
}
.move-to-right {
	animation: moveToRight .8s ease both;
}
.move-from-left {
	animation: moveFromLeft .8s ease both 0.2s;
}
@keyframes moveToLeft {
	from { }
	to { transform: translateX(-100%); }
}
@keyframes moveFromRight {
	from { transform: translateX(100%); }
    to { transform: translateX(0%); }
}
@keyframes moveToRight {
	from { }
	to { transform: translateX(100%); }
}
@keyframes moveFromLeft {
	from { transform: translateX(-100%); }
    to { transform: translateX(0%); }
}