body{
background-color: #e5e5e5;
background-image: url("https://www.transparenttextures.com/patterns/redox-02.png");
/* This is mostly intended for prototyping; please download the pattern and re-host for production environments. Thank you! */
}


#content{
max-width:1000px;
background-color:#fff;
margin:0 auto;
}



/* フレーム設定-------------------------------------------------------------------------------- */

#adspecial_hisol_shion_backnumber_2021{
padding: 0;
}

#adspecial_hisol_shion_backnumber_2021.adspecial_type1{
max-width:none !important;
width:100% !important;
position:relative;
}

footer{
margin-top:0;
}


.block_sponsored {
padding: 5% 0;
text-align: center;
/*background-color:#48b6cd;*/
color:#050505;
font-weight:bold;
}

.block_sponsored a{
color:#0b6bc4;
}








/* headline-------------------------------------------------------------------------------- */


/*anime setting*/


@keyframes fade{
  0% {
    opacity: 0;}

  100% {
    opacity: 1;}
}

@keyframes fade-scale{
  0% {
    opacity: 0;
transform:scale(0.95,0.95);
}

  100% {
    opacity: 1;
transform:scale(1,1);
}
}



@keyframes line {
  0% {width:0;}
  100% {width:100%;}
}



@keyframes blue{
  0% {
color:#0264e9;
}
  33.3% {
color:#00a9f0;
}
  66.6% {
color:#00ced5;
}
  100% {
color:#0264e9;
}
}

.header-area{
padding:10% 0 3%;
background:url(/extra/hisol_shion_backnumber_2021/media/illust_detective.png) center 10px no-repeat;
}


.header-area h1{
font-size:280%;
text-align:center;
color:#444;
}

.header-area h1 span{
display:block;
font-size:70%;
position:relative;
}


.header-area h1 span:before{
content:"";
position:absolute;
top:50%;
left:200px;
width:50px;
height:1px;
background-color:#444;
}


.header-area h1 span:after{
content:"";
position:absolute;
top:50%;
right:200px;
width:50px;
height:1px;
background-color:#444;
}






/* contents-------------------------------------------------------------------------------- */



.contents-area{
margin:0 auto;
padding:0 45px;
}



.btn-backnumber a{
border-radius:10px;
margin:0 auto 40px;
padding:2% 3%;
display:block;
background-color:#e0e0e0;
font-size:120%;
text-align:center;
/*color:#cf071d;*/
/*color:#f55100;*/
color:#009bf4;
font-weight:bold;
transition:0.5s;
width:100%;
position:relative;
}

.btn-backnumber a:hover{
/*background-color:#f55100;*/
background-color:#009bf4;
color:#fff !important;
}


.btn-backnumber a:after{
content:"";
position:absolute;
top:15px;
right:13px;
width:50px;
height:50px;
background:url(/extra/hisol_shion_backnumber_2021/media/icon_glass.png) no-repeat;
}


.btn-backnumber a:hover:after{
top:15px;
right:3px;
transition:0.5s;
}




/* responsive -------------------------------------------------------------------------------- */




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


.header-area{
padding:13% 0 3%;
}



.header-area h1{
font-size:200%;
}


.header-area h1 span:before{
content:"";
position:absolute;
top:50%;
left:100px;
width:50px;
height:1px;
background-color:#444;
}


.header-area h1 span:after{
content:"";
position:absolute;
top:50%;
right:100px;
width:50px;
height:1px;
background-color:#444;
}



.btn-backnumber a:after{
display:none;
}



}




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


.header-area{
padding:3% 0;
background:none;
}


.header-area h1{
font-size:160%;
}



.header-area h1 span:before{
content:"";
position:absolute;
top:50%;
left:50px;
width:50px;
height:1px;
background-color:#444;
}


.header-area h1 span:after{
content:"";
position:absolute;
top:50%;
right:50px;
width:50px;
height:1px;
background-color:#444;
}


.contents-area{
padding:0 20px;
}



.btn-backnumber a{
font-size:100%;
padding:4%;
}



}