@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@300;700&family=Noto+Serif+JP:wght@300;500&display=swap');
/* CSS Document */

body {
	margin:0;
	padding:0;
font-size:16px; 
font-family:'Noto Sans JP', 'メイリオ', Meiryo,'ヒラギノ角ゴシック','Hiragino Sans',sans-serif;
line-height:1.5;
background: #000;
background-image: url(images/bg.jpg);
color:#fff;
}


a{
	text-decoration: none;
	border:none;
    color:#dda0dd;
}

a:hover{color:#ff0000;}

a:hover img{
    opacity: 0.6;
  filter: alpha(opacity=60);
  -moz-opacity: 0.6;
  -webkit-transition: 0.3s ease-in-out;
  -moz-transition: 0.3s ease-in-out;
  -o-transition: 0.3s ease-in-out;
  transition: 0.3s ease-in-out;
   position: relative; top: 2px;
}

h1,h2{margin:0; padding:0;}
section{display: block;}


.pc{display: block;}
.smp{display:none;}

#head{width:100%; background: #000;　height:auto;}
.main_title, #info, #story, #charactors, #twitter{width:100%; max-width: 1366px; margin:0 auto; padding:0;}


.main_title{position: relative; height:780px; z-index:0;}
.main_title img{position: absolute;}
.main_title .main_illust{width:100%; height:auto; top:0;}

.main_title .maincatch{display: block; width:9%; height:auto; top:5%; left:45%;}
.main_title .logo{display: block; width:62%; height:auto; top:42%; left:23%;}
.main_title .icon_20th{display: block; width:16%; height:auto; top:30%; right:10%}
.main_title .auther{display: block; width:20%; height:auto; bottom:12%; left:38%;}




#info{position: relative; z-index:100; max-width:1024px; top:-50px}
#info p{font-family: 'Noto Sans JP', sans-serif; font-weight:500;}
#info p.series_start{
    background:linear-gradient(to right, #c7212f, #eca3ff); 
    margin:1em auto; color:#000; font-size:1.4em;
    text-align: center; padding:.5em}
#info p.series_start span{font-size:.7em}

#info p.series_start a{color:#fff}
#info p.series_start a:hover{color:#000}

#info .comics{display: flex; align-items: center; flex-wrap: wrap; justify-content: center}

#info .comics-cover{display: block; width:86%; max-width: 380px; height:auto; margin:1em auto; border:solid 1px #f00;}


#story{background: url(images/story_bg.png) center / contain no-repeat; position: relative; z-index:200}
#story h2 img{display: block; width:280px; height:auto; margin:2em auto 0 auto;}
#story>div{
display: flex;
 justify-content: center;
 align-items: center;}
#story p{font-family: 'Noto Serif JP', serif; font-size:1.2em; font-weight:300; text-align: center;
margin:4em auto 2em auto;}

.btn_tameshiyomi{display: block; width:80%; max-width:380px; height:auto; margin:0 auto;}


#charactors{}
#charactors h2 img{
    display: block;
    height:auto;
    width:320px;
    margin:2em auto 0 auto;}
#charactors>div{max-width:1024px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; margin:auto;}
#charactors>div img{width:46%; max-width:240px; height:auto; display: block; margin-bottom:1em}


#twitter{width:100%; max-width:680px; margin:auto;}
#twitter h2 img{display: block; width:80%; max-width: 420px; height:auto; margin:2em auto 1em auto;}
#twitter>div{display: flex; justify-content: space-around;}
#twitter div div img{display: block; width:90%; max-width:320px; height:auto; margin:10px auto;}
.twitter_import{text-align: center; background: #355566; padding-bottom:10px; margin:0 auto;}

.twitter-timeline{margin:auto;}

#home {
	text-align: center;
	font-size: 14px;
}

#home a {
	color: #666;
	text-decoration: none;
}




#additional{display: flex}

.works_copyright{margin:1em; font-size:10px; text-align: center;}


.sns{
	text-align:right;
	margin-top: 60px;
	margin-right: auto;
	margin-bottom: 5px;
	margin-left: auto;
}

.sns span{ display:inline-block; width:82px;}
	

.page_top{
	position:fixed;
	bottom:50px;
	right:20px;
}


@media screen and (max-width: 1112px){
    .main_title{width: 100%; height:600px;}
}

@media screen and (max-width: 1024px){
    .main_title{height:620px;}
}
    
@media screen and (max-width: 768px){
    .main_title{height:460px;}
    #story h2 img{width:180px}
    #story p{margin:2em auto 2em auto;}
    #charactors h2 img{width:200px}
    #charactors>div{justify-content: space-around;}
    #charactors>div img{max-width:280px;}
}

@media screen and (max-width: 480px){

background-image: url(images/bg_smp.jpg);
.pc{display: none;}
.smp{display:block;}
    
body {
font-size:12px; 
}   
.main_title{height:600px;}
.main_title .maincatch{width:20%; height:auto; top:5%; left:41%;}
.main_title .logo{display: block; width:100%; height:auto; top:48%; left:0;}
.main_title .icon_20th{display: block; width:30%; height:auto; top:35%; right:2%}
.main_title .auther{display: block; width:50%; height:auto; bottom:20%; left:22%;}
#charactors>div img{max-width:200px;}
#twitter>div{display: block;} 
.twitter_import{width:90%;}
    
}



footer {
	font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
	color: #999;

	width: 100%;
	text-align: center;
}
  @media screen and (min-width: 768px) {
    footer {
      width: 100%;
      margin: -2px auto 0; } }
  @media screen and (max-width: 767px) {
    footer {
      margin-top: -2px; } }
  footer .footer_nav {
	background-color: #fff;
}
    footer .footer_nav ul {
      text-align: center;
      padding: 15px 0; }
      footer .footer_nav ul li {
        display: inline-block;
        font-size: 13px;
        padding: 0 10px;
        border-left: 1px solid #666; }
        footer .footer_nav ul li:last-child {
          border-right: 1px solid #666; }
        @media screen and (max-width: 767px) {
          footer .footer_nav ul li:nth-child(1) {
            margin-bottom: 10px; }
          footer .footer_nav ul li:nth-child(2) {
            margin-bottom: 10px;
            border-right: 1px solid #666; } }
        footer .footer_nav ul li a {
	color: #666;
	text-decoration: none;
	cursor: pointer;
}


  footer .copyright {
    font-size: 9px;
    text-align: center;
    padding-top: 20px;
    padding-bottom: 20px; }