/*このCSS（common.css）は全ページ共通のベースコードです*/


/*全体設定*/
body{
    font-family:'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color:#FFF5E4;
    margin:0;
    position:relative;
}
.clear{
    clear:both;
}


/*ヘッダーについて*/
header{
    height:65px;
    width:100%;
    background-color:rgb(255, 148, 148);
    border-radius:5px;
    opacity:0.9;
    position:fixed;
    z-index:3;
}
@media(max-width:1000px){
    header{
        height:150px;
    }
}


/*ロゴについて*/
.logo img{
    height:65px;
    border-radius:5px;
    float:left;
}
.logo img:hover{
    opacity:0.9;
    filter:saturate(500%);
}
@media(max-width:1000px){
    .logo img{
        height:150px;
    }
}


/*ヘッダーのリストについて*/
.toplists{
    padding-left:20px;
    float:left;
}
.toplist{
    color:black;
    font-weight:bold;
    float:left;
    height:64px;
    line-height:63px;
    padding-left:30px;
    padding-right:30px;
    border-radius:5px;
}
.toplist:hover{
    background-color: lavender;
    color:rgb(66, 46, 46,);
    text-decoration: underline;
    box-shadow:1px 1px grey;
}
.toplist:active{
    position:relative;
    top:1px;
    left:1px;
    box-shadow:none;
}
@media(max-width:1000px){
    .toplist{
        display:none;
    }
}


/*メニューアイコン*/
.Menu{
    float:right;
    margin-top:40px;
    margin-right:40px;
    display:none;
}
/*#menu:hover{
    color:grey;
}*/
#menu:active{
    color:grey;
}
@media(max-width:1000px){
    .Menu{
        display:block;
    }
}

/*ハイドリスト*/
#hidelists{
    border:1px solid black;
    background-color:lavender;
    border-radius:7px;
    opacity:0.95;
    z-index:3;
    width:99%;
    position:absolute;
    position:fixed;
    /*画面小→大にした時用*/
    top:67px;/*ヘッダーにくっつかないようにするため65+2、responsiveでは150+3*/
    left:3px;
    box-sizing:border-box;
    display:none;
    box-shadow:7px 7px rgb(45, 41, 41);
}
@media(max-width:1000px){
    #hidelists{
        top:153px;
    }
}
#hidelists a{
    text-decoration:none;
    color:black;
    font-size:30px;
    font-weight:bold;
    text-align:center;
    height:70px;
    line-height:70px;
    border-bottom:1px solid black;
    display:block;
}
#hidelists a:hover{
    background-color:rgb(210, 210, 255);
    text-decoration: underline;
    box-shadow:1px 1px grey;
}
#hidelists a:active{
    position:relative;
    top:1px;
    left:1px;
    box-shadow:none;
}


/*中心80%の記事とサイドの部分*/
.content{
    width:80%;
    margin:0 auto;
    padding-top:100px;
    padding-bottom:50px;  
    box-sizing:border-box;
}
@media(max-width:1000px){
    .content{
        width:90%;
        padding-top:200px;
    }
}


/*記事全体*/
.core{
    width:70%;
    padding:20px;
    float:left;
    background-color:white;
    border-radius:5px;
    box-sizing:border-box;
    border:0.5px solid rgb(174, 162, 162);
}
@media(max-width:1300px){
    .core{
        width:65%;
    }
}
@media(max-width:1000px){
    .core{
        width:100%;
        font-size:27px;
        border-bottom:none;
        float:none;
    }
}


/*記事本文*/
.core h2{
    border-left: 5px solid rgba(239,239,239,0.9);
    padding-left:20px;
    margin-bottom:50px;
}
.core img{ 
    height:200px;
    width:30%;
    display:block;
}
.article h3{
    background-color: rgb(160, 237, 237);
    padding:5px 20px;
    border-radius:5px;
}
.RECTANGLE{
    border:1px solid black;
}
.QUOTE{
    font-size:5px;
}
.SMALL{
    font-size:8px;
}
.LIST{
    background-color:rgba(173, 167, 167,0.3);
    border-radius:5px;
    padding:20px;
    border:5px dashed rgb(159, 158, 158);
}

/*＜前＞＜次＞リンク*/
.PageLink{
    margin-top:30px;
    padding-top:30px;
    border-top:2px solid rgba(239,239,239,0.9);
}
.PageLink h3{
    font-size:20px;
}
.PageLink img{
    width:20px;
}
.PageLink a{
    text-decoration:none;
    color:black;
}
/*box(padding20px、上下のmargin20px、1px-bclackborder、radius)の共通設定→基本的にリンクで使用、の共通設定*/
.box{
    width:95%;
    padding:20px;
    margin:20px 0px;
    border:1px solid black;
    border-radius:20px;
    box-sizing: border-box;

}
.box img{
    width:13%;
    height:auto;
    margin:10px;
    float:left;
    border-radius:3px;
}
/*@media(max-width:400px){
    .box img{
        width:18%;
        height:auto;
        margin:40px;
    }
}*/
.boxarticle{
    float:left;
    width:80%;
}
.box:hover{
    opacity:0.8;
    box-shadow:2px 2px black;
}
.box:active{
    box-shadow:none;
    position:relative;
    top:10px;
    left:10px;
}
/*広告のaタグの装飾除去*/
.ad{
    text-decoration:none;
    color:black;
}

/*サイド*/
.side{
    width:25%;
    float:right;

}
@media(max-width:1300px){
    .side{
        width:28%;
    }
}
@media(max-width:1000px){
    .side{
        float:none;
        width:100%;
    }
}
/*サイドのボックス共通設定*/
.SideBox{
    background-color:white;
    padding:20px;
    border-radius:5px;
    margin-bottom:30px;
    box-sizing:border-box;
    border:0.5px solid rgb(174, 162, 162);
}
@media(max-width:1000px){
    .ranking{
        border-top:none;
    }
}

/*ランキング*/
.ranking h3{
    margin:0 auto;
    text-decoration:underline;
}
.crown{
    font-size:14px;
    color:rgb(225, 131, 18);
}


/*プロフィール*/
.profile{
    padding:20px;
    border:2px double silver ;

}
.profile img{
    width:100px;
    height:auto;
    border-radius:50%;
    display:block;
    margin:0 auto;
    filter:invert(100%);
    filter:saturate(120%);
    filter: drop-shadow(3px 3px 5px #000);
}
@media(max-width:1000px){
    .profile img{
        width:20%;
        height:auto;
    }
}
/*他サイトから導入*/
.fuwafuwa {
    animation: fuwafuwa 3s infinite ease-in-out .8s alternate;
    background: url(../img/ico-apple.svg) no-repeat center center / 60px auto;
    display: inline-block;
    transition: 1.5s ease-in-out;
    width: 70px;
    height: 70px;
    margin-top: 15px;
}
@keyframes fuwafuwa {
    0% {
      transform:translate(0, 0) rotate(-7deg);
    }
    50% {
      transform:translate(0, -7px) rotate(0deg);
    }
    100% {
      transform:translate(0, 0) rotate(7deg);
    }
}
/*ここまで他サイトから導入*/
.profile span{
    font-size:17px;
    font-weight:bold;
}


/*フッター*/
footer{
    background-color:rgb(255, 148, 148);
    width:100%;
    text-align:center;
}