@charset "utf-8";
/*
theme Name: アスコットオフィシャルウェブサイト
Author: TeamKrama@ayupopo
Description: ASCOT:Demon'sWaltz - theme
version： 1.0.1
*/

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

各ブラウザが自動で出力するCSSをリセット

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

/*cssのリセット*/
html,body,div,span,object,iframe,h1,h2,h3,h4,h5,h6,p,
blockquote,pre,abbr,address,cite,code,del,dfn,em,img,
ins,kbd,q,samp,small,strong,sub,sup,var,b,i,dl,dt,dd,
ol,ul,li,fieldset,form,label,legend,table,caption,
tbody,tfoot,thead,tr,th,td,article,aside,canvas,details,
figcaption,figure,footer,header,hgroup,menu,nav,section,
summary,time,mark,audio,video {
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  border: 0;
  outline: 0;
  background: transparent;
  
}
a {outline:none;}
a img {outline:none;}
.hover_img2{
	display:block;
	position:relative;
}
.hover_img2 img {
	display:block;
	margin:0 auto;
}
.hover_img2::before{
	background-color: rgba(255,255,255,0);
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    content: ' ';
	width:100%;
}
.hover_img2:hover::before{
	background-color: rgba(255,255,255,0.3);
}
body { line-height: 1;}
.pc{display:block;}
.sp{display:none;}
.sphead_logo{display:none;}
@media(max-width: 750px) {
	.pc{display:none;}
	.sp{display:block;}
	.sphead_logo{
		display:block;
		position:relative;
		padding-bottom: 19vw;
		margin-top: -2vw;
	}
	.sphead_logo img{
		display:block;
		text-align:center;
		position:absolute;
		top:0;
		left:0;
		right:0;
		margin:auto;
		width: 37vw;
	}
}
 
 
.drawer--right .drawer-hamburger{display:none;}
article,aside,details,figcaption,figure,
footer,header,hgroup,menu,nav,section {
  display: block;
}
header{
	position:relative;
	z-index:9999999999;
}
 
nav ul {
  list-style: none;
  margin: 0 auto;
  width: 62.5vw;
  margin-left: 18.5vw;
  background-image:;
}
 blockquote,q {  quotes: none;}
 
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: '';
  content: none;
}
 
a {
  font-size: 100%;
  margin: 0;
  padding: 0;
  vertical-align: baseline;
  background: transparent;
}
 
ins {
  text-decoration: none;
  color: #000;
  background-color: #ff9;
}
 
mark {
  font-weight: bold;
  font-style: italic;
  color: #000;
  background-color: #ff9;
}
 
del {
  text-decoration: line-through;
}
 
abbr[title],
dfn[title] {
  cursor: help;
  border-bottom: 1px dotted;
}
 
table {
  border-spacing: 0;
  border-collapse: collapse;
}
 
hr {
  display: block;
  height: 1px;
  margin: 1em 0;
  padding: 0;
  border: 0;
  border-top: 1px solid #ccc;
}



html {  font-size: 16px;}
body {
  font-family: 'メイリオ', 'Meiryo', 'ヒラギノ角ゴ Pro', 'Hiragino Kaku Gothic Pro', 'Noto Sans Japanese', Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
  line-height: 1.4;
  margin: 0;
  padding: 0;
}
 
h1, h2, h3, h4, h5, h6 {
  font-weight: bold;
  color: #000;
}
img {
  max-width: 100%;
  height: auto;
}

.header-inner,
.container,
.footer-inner {
  box-sizing: border-box;
  max-width: 1200px;
  margin-right: auto;
  margin-left: auto;
  padding: 1.25rem;
  position:relative;
  z-index:999;
}
.container,
.header-inner{
  max-width: 100%;
}
.container .contents{
	margin:0 auto;
	max-width:1200px;
}
.container {
  padding: 2rem 1.25rem;
}
.container:after {
  display: block;
  clear: both;
  content: '';
}
.contents {
  width: 100%;
}

.site-title-wrap {
	text-align:center;
	background-image: url(./img/header-menu-bg1.png);
	height: 6.302083vw;
	max-height: 121px;
	width: 100%;
	max-width: 100vw;
	background-size: cover;
	}
 
.site-title{
	position:absolute;
	left: 2.5vw;
	top: 0.5vw;
	z-index:999;
	width:10vw;
}
.site-title a {
  font-weight: bold;
  line-height: 1;
  display: inline-block;
  text-decoration: none;
}
 
.site-title a img {
  display: inline-block;
  width: 9.5vw;
  max-width: 240px;
  max-height: 160px;
}
.header-inner {
  position: relative;
  margin:0 auto;
  padding:0;
}
 
.navbutton {
  display: none;
}
 
.header-nav-wrap {
  text-align: center;
  width: 100%;
  max-width: 1053px;
  margin: 0 auto;
}
 
.header-nav {
  font-size: 0;
  position: absolute;
  left: 0;
  top: 0.96vw;
  width: 100%;
  max-width: 1920px;
}
.header-nav li {
  font-size: 0;
  display: inline-block;
  margin-right: 1rem;
  height: 3vw;
  line-height: 0;
  width: 8.653167vw;
  height:3.125vw;
  margin: 0 auto;
  margin-right: 0;
  background-size:cover;
  margin: 0px 0.08780991341vw;
}
/* PCヘッダーメニューボタン */
   	.header-nav li:nth-child(1){
		background-image:url(img/header-menu-01-news.png);
		}
 	.header-nav li:nth-child(2){
		background-image:url(img/header-menu-02-intro.png);
		}
 	.header-nav li:nth-child(3){
		background-image:url(img/header-menu-03-story.png);
		}
 	.header-nav li:nth-child(4){
		background-image:url(img/header-menu-04-character.png);
		}
 	.header-nav li:nth-child(5){
		background-image:url(img/header-menu-05-system.png);
		}
 	.header-nav li:nth-child(6){
		background-image:url(img/header-menu-06-product.png);
		}
 	.header-nav li:nth-child(7){
		background-image:url(img/header-menu-07-gallery.png);
		}

   	.header-nav li:nth-child(1):hover{
		background-image:url(img/header-menu-01-news-h.png);
		}
 	.header-nav li:nth-child(2):hover{
		background-image:url(img/header-menu-02-intro-h.png);
		}
 	.header-nav li:nth-child(3):hover{
		background-image:url(img/header-menu-03-story-h.png);
		}
 	.header-nav li:nth-child(4):hover{
		background-image:url(img/header-menu-04-character-h.png);
		}
 	.header-nav li:nth-child(5):hover{
		background-image:url(img/header-menu-05-system-h.png);
		}
 	.header-nav li:nth-child(6):hover{
		background-image:url(img/header-menu-06-product-h.png);
		}
 	.header-nav li:nth-child(7):hover{
		background-image:url(img/header-menu-07-gallery-h.png);
		}

.header-nav li a {
  font-weight: bold;
  display: block;
  text-decoration: none;
  width: 100%;
  height: 100%;
 }
 

@media(max-width: 750px) {
	.drawer--right .drawer-hamburger{
		display:block;
	}
  .contents,
  .sidebar {
    float: none;
    width: 100%;
    margin-right: 0;
  }

  .contents {
    margin-bottom: 1.5rem;
  }

 .sphead{
	 position: relative;
	 height: 14vh;
	 top: 4vh;
	 margin: 0 auto;
	 padding: 0;
	 text-align: center;
	 vertical-align: middle;
}
#header-nav{
	height: 74vh;
	padding-top: 0vh;
	position:static;
}
 
 .site-title a img {
	 height:40px; 
 }
  .navbutton {
    font-size: 2rem;
    position: absolute;
    z-index: 999;
    top: 5vw;
    right: 1.25rem;
    display: block;
    cursor: pointer;
    transform: translateY(-50%);
    border: 0;
    background-color: transparent;
  }
 
  .navbutton:focus {
    outline: 0;
  }
 
  .header-nav-wrap {
    z-index: 999;
    top: 86px;
    right: auto;
    left: 0;
    display: none;
    width: 100%;
    margin-left: 0;
    transform: none;
    background-color: #03162f;
  }

  .header-nav ul {
		max-width: 100%;
		margin-left: 0;
		width: 100%;
		background: rgba(255,255,255,0.04);
} 

@keyframes header-nav-anime {
    0% {
		background-position: 70% 50%;
		width:100%;
		opacity:0;
    }
    100% {
		background-position: 50% 50%;
		width:100%;
		opacity:1;
    }
}
/* SPハンバーガーメニュー背景 */
#header-nav{
		background-image: url(img/sp/humb-bg-mahoujin.jpg) !important;
		background-size: 100vw auto;
		background-position: 0vw 1vw;
}
  .header-nav li {
		display: block;
		margin-right: 0;
		width:100%;
		line-height: 0;
		font-size: 0;
		background-color:initial;
		max-width: 100%;
		max-height: 10.5vh;
		border-bottom: 1px solid #888;
		background-size: auto 10vw;
		background-position: 50% 50%;
		background-repeat: no-repeat;
		height: 10.5vh;
	}
/* SPハンバーガーメニューボタン */
 	.header-nav li:nth-child(1){
		border-top: 1px solid #888;
		background-image:url(img/sp/humb-btn-01-news-text.png);
		}
 	.header-nav li:nth-child(2){
		background-image:url(img/sp/humb-btn-02-intro-text.png);
		}
 	.header-nav li:nth-child(3){
		background-image:url(img/sp/humb-btn-03-story-text.png);
		}
 	.header-nav li:nth-child(4){
		background-image:url(img/sp/humb-btn-04-character-text.png);
		}
 	.header-nav li:nth-child(5){
		background-image:url(img/sp/humb-btn-05-system-text.png);
		}
 	.header-nav li:nth-child(6){
		background-image:url(img/sp/humb-btn-06-product-text.png);
		}
 	.header-nav li:nth-child(7){
		background-image:url(img/sp/humb-btn-07-gallery-text.png);
		}

	.drawer--right.drawer-open .drawer-nav .header-nav li:nth-child(1){
		background-image:url(img/sp/humb-btn-01-news-text.png);
		animation:header-nav-anime 660ms ease ;
		
		}
 	.drawer--right.drawer-open .drawer-nav .header-nav li:nth-child(2){
		background-image:url(img/sp/humb-btn-02-intro-text.png);
		animation:header-nav-anime 660ms 60ms ease both;
		}
 	.drawer--right.drawer-open .drawer-nav .header-nav li:nth-child(3){
		background-image:url(img/sp/humb-btn-03-story-text.png);
		animation:header-nav-anime 660ms 120ms ease both;
		}
 	.drawer--right.drawer-open .drawer-nav .header-nav li:nth-child(4){
		background-image:url(img/sp/humb-btn-04-character-text.png);
		animation:header-nav-anime 660ms 180ms ease both;
		}
 	.drawer--right.drawer-open .drawer-nav .header-nav li:nth-child(5){
		background-image:url(img/sp/humb-btn-05-system-text.png);
		animation:header-nav-anime 660ms 240ms ease both;
		}
 	.drawer--right.drawer-open .drawer-nav .header-nav li:nth-child(6){
		background-image:url(img/sp/humb-btn-06-product-text.png);
		animation:header-nav-anime 660ms 300ms ease both;
		}
 	.drawer--right.drawer-open .drawer-nav .header-nav li:nth-child(7){
		background-image:url(img/sp/humb-btn-07-gallery-text.png);
		animation:header-nav-anime 660ms 360ms ease both;
		}


  .header-nav li a {
    position: relative;
    padding: .8rem 1.25rem;
    color: #fff;
  }
 
  .header-nav li a:after {
    font-family: 'Font Awesome 5 Free';
    font-weight: 900;
    position: absolute;
    top: 50%;
    right: 1.25rem;
    display: block;
    content: '\f105';
    transform: translateY(-50%);
  }
  
 
html {font-size: 15px;}

.header-inner,
.container,
.footer-inner {
	padding: .8rem;
}
.site-title-wrap{
	display:none;
}
  .contents {
    margin-bottom: 1rem;
  }

  .site-title a {
    font-size: 2rem;
  }
 
  .site-title a img {
    height: 32px;
  }
 
  .navbutton {
    right: .8rem;
  }
 
  .header-nav-wrap {
    top: 62px;
  }
 
  .header-nav li a {
    height: 100%;
    display: block;
    padding: 0;
  }
 
  .header-nav li a:after {
    right: .8rem;
  }
  
  
  .drawer--right .drawer-hamburger{
	  right:0vw !important;
	  padding: 1vw 3vw !important;
	 }
  .fa{
	  font-size:11vw!important;
	 }
  .drawer-hamburger{
	  width:11vw !important;
	  color:#ffffff;
	}
  .drawer--right.drawer-open .drawer-nav{
	  right:0vw !important;
	  width:100vw!important;
}
  
  .drawer--right.drawer-close .drawer-nav{
	  right:-100vw!important;
}
  
  .drawer-menu{
	  height:100%;
		background-image:url(img/sp/bg-hm-mahoujin.png) !important;
		background-size:168vw auto;
		background-position:-11vw 1vw
	 }
  
  .drawer-menu li{
	  display:block;
	  text-align:center;
	  height:100%;
	 }
  
  .page_item a{
	  display:inline-block;
	  /* padding:5vh !important; */
	  width:100%;
	  height:100%;
	}
	.drawer-nav{
		background-color:#000000 !important;
		overflow:auto !important;
	}
	
	
}
@font-face {
	font-family: "korolev-compressed";
	src: url("//db.onlinewebfonts.com/t/106350bd481458cdc913db0147696f77.eot");
	src: url("//db.onlinewebfonts.com/t/106350bd481458cdc913db0147696f77.eot?#iefix") format("embedded-opentype"),
	url("//db.onlinewebfonts.com/t/106350bd481458cdc913db0147696f77.woff2") format("woff2"),
	url("//db.onlinewebfonts.com/t/106350bd481458cdc913db0147696f77.woff") format("woff"),
	url("//db.onlinewebfonts.com/t/106350bd481458cdc913db0147696f77.ttf") format("truetype"),
	url("//db.onlinewebfonts.com/t/106350bd481458cdc913db0147696f77.svg#Korolev") format("svg");
}



@media (max-width: 750px) {
  .hide {transform: none}}

footer {
	margin-top:0!important;
  overflow: hidden;
  width: 100%;
  height: 60px;
  background-color: #000;
  font-family: "korolev-compressed";
  color: #ffffff;
  position: relative
}

footer img {
  float: left;
  width: 100px;
  top: 50%;
  left: 55px;
  transform: translateY(-50%);
  position: absolute
}

footer .pp_email {
  float: left;
  position: absolute;
  top: 50%;
  left: 180px;
  transform: translateY(-50%)
}

footer .pp_email .pp, footer .pp_email .email {
  margin: 5px
}

footer .sansSerif {
  font-family: korolev-compressed, sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 110%
}

footer .pp_mobile, footer .email_mobile, footer .contact_mobile {
  display: none
}

footer .copyright {
  position: relative;
  right: 55px;
  float: right;
  line-height: 60px
}

footer .share {
  position: absolute;
  right: 190px
}

footer .share_icon {
  float: right;
  margin-right: 10px;
  width: 60px;
  left: auto;
  transform: translateY(calc(-50% + 30px));
  position: inherit
}


@media (max-width: 750px) {
  footer {
    height: 90px;
  }
  footer img {
    position: absolute;
    bottom: 30px;
    top: auto;
    left: 10px;
    width: 75px;
  }
  footer .contact_mobile {
    height: 240px;
    display: block;
    font-family: korolev-compressed, sans-serif
  }
  footer .contact_mobile h3 {
    margin: 0 0 40px 0;
    text-align: center;
    width: 100%;
    padding-top: 30px;
    color: #797979
  }
  footer .contact_mobile div {
    margin: 0;
    width: 100%;
    font-size: 120%
  }
  footer .contact_mobile div dl {
    display: flex;
    flex-wrap: wrap
  }
  footer .contact_mobile div dl dt {
    width: 30%;
    text-align: right;
    margin-bottom: 40px
  }
  footer .contact_mobile div dl dd {
    width: calc(70% - 50px);
    margin: 0 0 40px 50px;
    color: #B5B5B5;
    transform: translateY(-2px)
  }
  footer .pp_email {
    display: none
  }
  footer .pp_mobile {
    display: block;
    position: absolute;
    right: 10px;
    transform: translateY(-50%);
    top: 250px
  }
  footer .copyright {
    position: absolute;
    bottom: 5px;
    line-height: inherit;
    width: 100%;
    text-align: center;
    right: inherit;
    float: none
  }
  footer .fab {
    transform: translate(-17px, -60px);
    position: inherit;
    margin-right: 20px;
    font-size: 150%
  }
  footer .share {
    text-align: center;
    transform: translate(-50%, -50%);
    left: 50%;
    top: auto;
    bottom: 37px;
    right: inherit;
    position: absolute;
  }
  footer .share_icon {
    width: 60px;
    position: inherit;
    margin: 0 5px;
    transform: none
  }
}