/*この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:100%;
    margin:0 auto;
    padding:20px;
    background-color:white;
    border-radius:5px;
    box-sizing:border-box;
    border:0.5px solid rgb(174, 162, 162);
}
@media(max-width:1000px){
    .core{
        width:100%;
        font-size:27px;
        border-bottom:none;
        float:none;
    }
}
/*記事内容*/
.SM{
    border-bottom:5px solid rgb(152, 147, 147);
    margin-top:100px;
}
.container{
    padding-top:100px;
    width:100%;
}
@media(max-width:1000px){
    .container{
        padding-top:150px;
    }
}
.container h3{
    /*text-align:center;*/
    padding-left:30px;
    margin:0 auto;
    width:90%;
    border-radius:5px;
    background-color: rgb(189, 198, 236);
    box-sizing:border-box;
}
.Icontainer{
    width:80%;
    padding-left:80px;
}

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

}
.PRO{
    margin-bottom:100px;
}
@media(max-width:1000px){
    .PRO{
        margin-bottom:150px;
    }
}
.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;
}
/*写真の入れ替わり*/
.slide{
    position:relative;
    /*overflow:hidden;*/
    width:100%;
    height:300px;
    margin:0 auto;
    background:white;
}
.slide img{
    display:block;
    position:absolute;
    width:inherit;
    height:inherit;
    opacity:0;
    animation:slideAnime 8s ease infinite;
}
@keyframes slideAnimation{
    0%{ 
        opacity:0;
        transform:scale(0.1,0.1);
        transform:scale(1.1);

    }
}
/*写真の入れ替わりここまで*/

/*=== 画像の表示エリア ================================= */
.slide {
    position   : relative;
    overflow   : hidden;
                      /* 画像のサイズに合わせて変更ください */
    width      :100%;
    height:500px;
    margin     :0 auto;      /* サンプルは中央寄せの背景：白 */
    background : #fff;
  }
   
   /*=== 画像の設定 ======================================= */
  .slide img {
    display    : block;
    position   : absolute;
                        /* 画像のサイズを表示エリアに合せる */
    width      : inherit;
    height     : inherit;
    opacity    : 0;
    animation  : slideAnime 15s ease infinite;
    border-radius:5px;
    filter:contrast(200%);
  }
 
   /*=== スライドのアニメーションを段差で開始する ========= */
  .slide img:nth-of-type(1) { animation-delay: 0s }
  .slide img:nth-of-type(2) { animation-delay: 3s }
  .slide img:nth-of-type(3) { animation-delay: 6s }
  .slide img:nth-of-type(4) { animation-delay: 9s }
  .slide img:nth-of-type(5) { animation-delay: 12s }
   
   /*=== スライドのアニメーション ========================= */
  @keyframes slideAnime{
     0% { opacity: 0; transform: scale(.1, .1)}
     2% { opacity: 1; transform: scale(1, 1)  }
    18% { opacity: 1; transform: scale(1, 1)  }
    20% { opacity: 0; transform: scale(2, 2)  }
   100% { opacity: 0; transform: scale(2, 2)  }
  }