@charset "utf-8";
@import url(https://fonts.googleapis.com/css?family=Noto+Serif+JP);
@import url(https://fonts.googleapis.com/css?family=Noto+Serif);

#index-if_header nav a[href*='character']{pointer-events: none;}
#index-if .title {margin: 0 auto 70px; text-align: center; position: relative; z-index: 1000;}

#charamodal,
#charamodal h2{ font-family: "Noto Serif JP","Hiragino Mincho ProN","Hiragino Mincho Pro","ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;}

#character nav.ln{display: flex; justify-content: center; padding: 0 0 75px; position: relative; z-index: 1000;}
#character nav.ln a{display: block; height: 48px; width: 340px; margin: 0 10px; position: relative; transition: 0.2s;}
#character nav.ln a:hover{filter: brightness(1.3)}
#character nav.ln a::before{content: '';width: 100%; height: 100%; background:url("/index-if/images/character/ln.png") left top no-repeat; position: absolute; left: 0; top: 0; z-index: 10;}
#character nav.ln a::after{content: ''; background: linear-gradient(to right, #f6a061 0%,#e77f46 50%,#e34717 100%); width: 100%; height: 100%; position: absolute; left: 0; top: 0; opacity: 0.9; z-index: -1;}
#character nav.ln a ~ a::before{background-position: 0 -50px;}
#character nav.ln a ~ a::after{ background: linear-gradient(to right, #00a8ee 0%,#104dbe 100%); opacity: 0.85;}
#character nav.ln i {width: 48px; height: 48px; position: absolute; left: 0; top: 0; background: url("/index-if/images/character/arr_sidea.png") center center no-repeat; margin-left: 60px; transition: 0.1s cubic-bezier(0.165, 0.84, 0.44, 1);}
#character nav.ln a ~ a i {background-image: url("/index-if/images/character/arr_sideb.png");}
#character[data-category='kagaku'] nav.ln a:nth-child(1){pointer-events: none; cursor: default;}
#character[data-category='kagaku'] nav.ln a:nth-child(1) i{transform: rotate(90deg); transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);}
#character[data-category='majutu'] nav.ln a:nth-child(2){pointer-events: none; cursor: default;}
#character[data-category='majutu'] nav.ln a:nth-child(2) i{transform: rotate(90deg); transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);}

#character .archives {font-size: 0; line-height: 1; display: flex; flex-wrap: wrap; max-width: 1127px; margin: 0 auto;}
#character .archives li {margin: 0 10px 20px; position: relative;}
#character .archives li i{display: block; width: 141px; height: 141px; overflow: hidden;}
#character .archives li i a{display: block; overflow: hidden; background: #e76c46; transition:background 0.4s cubic-bezier(0.165, 0.84, 0.44, 1); position: relative;}
#character .archives li i a::after{content: ''; width: 100%; height: 100%; border:4px solid #e76c46; position: absolute; left: 0; top: 0; z-index: 10; border-top-width: 1px; border-left-width: 1px; transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);}
#character .archives li i a span{position: relative; display: block; overflow: hidden;background: -moz-linear-gradient(top left, #f6f6f6, #e2e2e2); background: -webkit-linear-gradient(top left, #f6f6f6, #e2e2e2); background: linear-gradient(to bottom right, #f6f6f6, #e2e2e2);}
/*#character .archives li i a span::after{content: ''; width: 200%; height: 200%; background:#e76c46; z-index: 1; position: absolute; right: -50%; bottom: -50%; transform: rotate(58deg) translate(-150%,0%); transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);}*/
#character .archives li i a span::before{content: ''; width: 200%; height: 200%; background:#e76c46; z-index: 1; position: absolute; left: -50%; top: -50%; transform: rotate(58deg) translate(150%,0%); transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);}
#character .archives li i a span img {position: relative; z-index: 5; transform-origin: center center; transform: scale(1); transition: 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);}
#character .archives li i a:hover span::after,
#character .archives li i a:hover span::before{transform: rotate(58deg) translate(0,0); transition: .7s cubic-bezier(0.165, 0.84, 0.44, 1);}
#character .archives li i a:hover span img {transform: scale(1.1); transition: 3s cubic-bezier(0.165, 0.84, 0.44, 1);}

#character[data-category='majutu']  .archives li i a span::before,
#character[data-category='majutu']  .archives li i a {background: #006ac7;}
#character[data-category='majutu']  .archives li i a::after{border-color: #006ac7;}

#character .swiper-pagination{position: fixed; left: -9999px;}
.swiper-slide {opacity: 0; transition: 600ms cubic-bezier(0.165, 0.84, 0.44, 1);}
.swiper-slide-active {opacity: 1;}

/*
#character .archives li i a{width: 0;}
.imgloaded #character .archives li i a{transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); width: 100%;}
#character .archives li i a span{width: 0;}
.windowloaded #character .archives li.imgload i a span{transition: 0.6s 0.6s cubic-bezier(0.165, 0.84, 0.44, 1); width: 100%;}
*/
/*
#charamodal .scroll::-webkit-scrollbar{
　　width: 10px;
}
*/

.noscroll .archives li {opacity: 0;}

@media screen and (min-width:641px){
/*

	PC STYLE

**************************************************************/
/*html.noscroll,body.noscroll {overflow: hidden; overflow-y: scroll; height: 100vh;}*/
.charamodalopen{overflow: hidden;}

#index-if_header nav a[href*='character']::after {opacity: 1; left: 0;}

#index-if #character { padding: 160px 0 120px;}

#index-if #character::after{content: ''; background: rgba(228,91,47,0.7); width: 2800px; height: 1400px; position: fixed; left: 50%; top: 0; transform: rotate(-30deg); margin: -988px  0 0 -2380px; z-index: 0; transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);}
#index-if #character::before{content: ''; background: rgba(228,91,47,0.7); width: 3800px; height: 1400px; position: fixed; right: 50%; bottom: -934px; transform: rotate(-30deg); margin: 489px -2804px 0 0; z-index: 0; transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);}
#index-if #character[data-category='majutu']::after{background: rgba(0,115,202,0.6);}
#index-if #character[data-category='majutu']::before{background: rgba(0,115,202,0.6);}

#imageloaded i{background: url("/index-if/images/character/bg_modal-majutu.png") left top #fff;}
#imageloaded i::after{content: ''; background: url("/index-if/images/character/bg_modal.png") no-repeat center center;}

/*
#index-if #character::after{left: -10%; transition: .6s cubic-bezier(0.165, 0.84, 0.44, 1);}
#index-if #character::before{right:-10%; transition: .6s cubic-bezier(0.165, 0.84, 0.44, 1);}
.windowloaded #index-if #character::after{left: 50%;}
.windowloaded #index-if #character::before{right: 50%;}
*/

}
@media screen and (min-width:1201px) and (max-width:1920px){}
@media screen and (min-width:1921px){}
@media screen and (max-width:640px){
/*

	SP STYLE

**************************************************************/

html.noscroll,body.noscroll {overflow: hidden;}

#index-if_header nav a[href*='character'] i::after,
#index-if_header nav a[href*='character'] i::before {opacity: 1;}

#index-if #character { padding: calc(174/640*100vw) 0 calc(140/640*100vw);}

#index-if .title {margin: 0 auto calc(90/640*100vw);}
#index-if .title img {height: calc(45/640*100vw); width: auto;}

#character nav.ln{padding: 0 0 calc(84/640*100vw); font-size: 0; line-height: 1;}

#character nav.ln a{height:calc(48/640*100vw); width:calc(270/640*100vw); margin: 0 calc(10/640*100vw); position: relative; transition: 0.2s;}
#character nav.ln a::before{background-position: center top; background-size: calc(340/640*100vw) auto;}
#character nav.ln a ~ a::before{background-position:center calc(-50/640*100vw);}
#character nav.ln i {width:calc(48/640*100vw); height:calc(48/640*100vw); margin-left: calc(30/640*100vw); background-size: calc(37/640*100vw) calc(43/640*100vw);}

#character .archives {max-width: calc(600/640*100vw); margin: 0 auto;}
#character .archives li {margin: 0 calc(10/640*100vw) calc(20/640*100vw);}
#character .archives li i{width: calc(130/640*100vw); height:calc(130/640*100vw);}
#character .archives li i a::after{border:calc(4/640*100vw) solid #e76c46; border-top-width: 1px; border-left-width: 1px;}
#character .archives li i a span img {width: 100%; height: 100%;}

#index-if #character::after{content: ''; background: rgba(228,91,47,0.7); width: 300vw; height: 112.5vw; position: absolute; left: 0; top: 0; transform: rotate(-30deg); margin:80.5vw 0 0 -50vw; z-index: 0; transition: 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);}
#index-if #character[data-category='majutu']::after{background: rgba(0,115,202,0.6);}

/*
#index-if #character::after{top: 0; left: 301vw; transition: .9s cubic-bezier(0.165, 0.84, 0.44, 1);}
.windowloaded #index-if #character::after{left:0; top: 0;}
*/

}

/* charamodalbg */
#charamodalbg {position: fixed; left: 0; top: 0; width: 100%; height: 100%; z-index: 100000; display:none ;}
@media screen and (min-width:641px){
#charamodalbg::after{content: ''; width: 100%; height: 100%; position: fixed; left: 0; top: 0; z-index: 0; background: url(/index-if/images/bg.gif) left top #fff; z-index: 0;}
#charamodalbg::before{content: ''; width: 100%; height: 100%; position: fixed; left: 0; top:---- 0; z-index: 0; background: url("/index-if/images/character/bg_modal.png") no-repeat center center; z-index: 10;}
}
#charamodal {position: fixed; left: 0; top: 0; width: 100%; height: 100%;  z-index: 110000; color: #fff; overflow: hidden; display:none;}
#charamodal .scroll {height: 100%;  overflow: auto; width: 100%; z-index: 1000; position: relative; }
#charamodal .close {position: fixed; right: 0; top: 0; z-index: 10000; transition: 0.2s;}
@media screen and (min-width:641px){
#charamodal .arr {position: fixed; top: 50%; height: 86px; margin-top: -43px; z-index: 10000; transition:filter 0.2s; width: 48px;}
}
#charamodal .arr.prev {left: -2px;}
#charamodal .arr.next {right: -2px;}

#charamodal .arr:hover,
#charamodal .close:hover{filter: brightness(1.2);}
#charamodal .effectbox {overflow: hidden; width: 100%; min-width: 1200px;}
#charamodal article {width: 100%; min-width: 1200px; margin: 0 auto; min-height: 640px; padding: 0 0 128px; position: relative; overflow-y: hidden; z-index: 100;}
#charamodal article .in {width: 1200px; min-height: 640px; padding: 0 50px 0; margin: 0 auto; position: relative; z-index: 100;}
#charamodal img.chara {position: absolute; left: 50%; top: 0; margin: 26px 0 0 55px; z-index: 10;}
#charamodal article header{padding: 124px 0 0;}
#charamodal article h2 {font-size: 105px; line-height:1.088; letter-spacing: 0.1em; margin-bottom: 11px;text-shadow: 0 0 2px #e76c46, 0 0 2px #e76c46, 0 0 2px #e76c46, 0 0 10px #e76c46; position: relative;}

#charamodal article h2 small{font-size: 84px; display: block; line-height: 92px; margin-bottom: 15px;}
#charamodal article h2 i {display: block; font-size: 25px; position: absolute; left: 0; top: -1.5em; letter-spacing: 0.1em;}
#charamodal article header p{font-family: 'Noto Serif', serif;; font-weight: 400; font-style: normal; font-size: 24px; line-height: 34px; text-transform:uppercase; letter-spacing: 0.12em;text-shadow: 0 0 2px #e76c46, 0 0 2px #e76c46, 0 0 2px #e76c46, 0 0 10px #e76c46;}
#charamodal article header ~ p {font-size: 18px; line-height: 40px; font-weight: 300; font-style: normal; text-shadow: 0 0 2px #e1440e, 0 0 2px #e1440e, 0 0 2px #e1440e, 0 0 10px #e1440e; letter-spacing: 0.1em; font-weight: 500;}
#charamodal article dl {color: #f77245; background: #fff; display: inline-block; margin: 35px 0 35px;}
#charamodal article dt {font-family: 'Noto Serif', serif;; font-weight: 400; font-style: normal; font-size: 32px; float: left; padding: 7px 15px;}
#charamodal article dd { font-weight: 500; font-style: normal; font-size: 32px; zoom:1; overflow: hidden; padding: 6px 25px 6px 10px;}


#charamodal ,
#charamodal article h2{font-family: kozuka-mincho-pr6n, serif;}

#charamodal img + img {display: none;}
#charamodal[data-category='majutu'] img {display:none;}
#charamodal[data-category='majutu'] img.chara{display: block;}
#charamodal[data-category='majutu'] img + img {display:block;}
#charamodal[data-category='majutu'] article dl {color: #006ac7;}
#charamodal[data-category='majutu'] article h2,
#charamodal[data-category='majutu'] article header p,
#charamodal[data-category='majutu'] article header ~ p { text-shadow: 0 0 2px #006ac7, 0 0 2px #006ac7, 0 0 2px #006ac7, 0 0 10px  #006ac7; }
@media screen and (min-width:641px){
#charamodalbg[data-category='majutu']::before{background: url("/index-if/images/character/bg_modal-majutu.png") no-repeat center center; z-index: 10;}
#charamodal img.chara.sp-item {display: none !important;}
}
@media screen and (min-width:1920px){
#charamodalbg[data-category='kagaku']::before,
#charamodalbg[data-category='majutu']::before{background-size: cover;}
}
.ie11 #charamodal,
.ie11 #charamodal h2{ font-family: 游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN","Hiragino Mincho Pro","ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif !important;}
.ie11 #charamodal dt {padding-top: 10px;}
.ie11 #charamodal dd {padding-top: 16px;}
.ie11 #charamodal h2 {margin-bottom: 0px;}
.ie11 #charamodal header{padding-top: 138px;}

#loader{width: 100vw;}
#loader .loader{width: 175px; height: 175px; position: fixed; right: 50vw; top: 50%; margin: -87px -87px 0 0; opacity:1;}
#loader .loader div{animation: rotate-anime 1.0s cubic-bezier(0.77, 0, 0.175, 1) infinite; background: url(/index-if/images/loading.png); width: 100%; height: 100%;}
#loader.modal::after{display: none;}
#loader[data-category='kagaku']::after{ display: none;
background: -moz-linear-gradient(left, #fdb558 0%, #de572d 100%);
background: -webkit-linear-gradient(left, #fdb558 0%,#de572d 100%);
background: linear-gradient(to right, #fdb558 0%,#de572d 100%);
}
#loader[data-category='kagaku'] .loader div{background: url("/index-if/images/character/loading.png");}
.imgloaded.charamodalopen #loader .loader {transform: scale(1); opacity: 1;}
#loader.nobg::after{opacity: 0;}

#charamodal .arr{transform: translate(-101%,0);}
#charamodal .arr.next{transform: translate(101%,0);}
#charamodal .close {transform: translate(101%,-101%);}
.modaluiin #charamodal .close,
.modaluiin #charamodal .arr{transform: translate(0,0); transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);}

@media screen and (min-width:1921px){
#charamodalbg::before{background-size: 100% auto;}
}

@media screen and (max-width:640px){
/*	SP STYLE **************************************************************/


#charamodalbg{background: url("/index-if/images/character/bg_modal.jpg") no-repeat center center / cover;}
#charamodalbg::after ,
#charamodalbg::before{display: none;}
#imageloaded i{background: url("/index-if/images/character/bg_modal-majutu.jpg") left top #fff;}
#imageloaded i::after{content: ''; background: url("/index-if/images/character/bg_modal.jpg") no-repeat center center;}

#charamodal .close img {width: calc(70/640*100vw);}
#charamodal .arr {position: fixed;  bottom: calc(0/640*100vw); height:auto; margin-top:0; line-height: 1; font-size: 0; z-index: 10000; width:15vw;}
#charamodal .arr.prev {left:calc(-2/640*100vw);}
#charamodal .arr.next {right:calc(-2/640*100vw); text-align: right !important;}
#charamodal .arr.next a{text-align: right;}
#charamodal .arr.next a::after{content: ''; clear: both; display: block;}
#charamodal .arr img {width: calc(48/640*100vw); height: auto;}
#charamodal .arr.next img {float: right;}

#charamodal .scroll{/*border: 1px solid blue;*/ overflow:visible !important; overflow-x: hidden; }
#charamodal .effectbox {min-width: inherit; overflow:visible !important; overflow-x: hidden;/* border: 1px solid green*/}
#charamodal article {min-width:inherit;  min-height: 100vw; padding: 0 0 calc(100/640*100vw); /*overflow: hidden;*/ /*border: 1px solid red;*/ overflow: visible !important; overflow-x: hidden !important;}
#charamodal article .in {width:100%; min-height: 100vw; padding: 0 calc(50/640*100vw) 0; margin: 0 auto; z-index: 10; position: relative;}
#charamodal img.chara {position: absolute; left: 0; top: 0; margin:0; z-index: 1 !important;}

#charamodal article header{padding:0; display: flex; height: calc(356/640*100vw);  flex-direction: column; flex-wrap: wrap; justify-content: flex-end; padding-bottom: calc(42/640*100vw);}

#charamodal article h2 {font-size: calc(79/640*100vw); line-height:1.088; margin-bottom: calc(15/640*100vw); letter-spacing: 0.05em;}
#charamodal article h2 small{font-size: calc(56/640*100vw); display: block; line-height:calc(63/640*100vw); margin-bottom:calc(0/640*100vw);}
#charamodal article h2 i {font-size: calc(22/640*100vw);}
#charamodal article header p{font-size: calc(21/640*100vw); line-height: calc(33/640*100vw);}
#charamodal article header ~ p {font-size: calc(21/640*100vw); line-height: calc(43/640*100vw);font-feature-settings: "palt" 1; width: calc(350/640*100vw);}
#charamodal article dl {margin: 0 0 calc(38/640*100vw);}
#charamodal article dt {font-size: calc(32/640*100vw); padding:calc(9/640*100vw) calc(15/640*100vw) calc(1/640*100vw); line-height: 1;}
#charamodal article dd {font-size: calc(32/640*100vw); padding:calc(0/640*100vw) calc(25/640*100vw) 0 calc(0/640*100vw);}

#charamodalbg[data-category='majutu']{background: url("/index-if/images/character/bg_modal-majutu.jpg") no-repeat center center / cover;}

#loader{width: 100vw;}

#charamodal .arr{transform: translate(-101%,0);}
#charamodal .arr.next{transform: translate(101%,0);}
#charamodal .close {transform: translate(101%,-101%);}
.modaluiin #charamodal .close,
.modaluiin #charamodal .arr{transform: translate(0,0); transition: 0.8s cubic-bezier(0.165, 0.84, 0.44, 1);}

html[class*='is-iphoneX'] #charamodal .arr{bottom: calc(30/640*100vw);}



}