@charset "utf-8";

/*ブラウザリセット */
*{
    margin: 0;
    padding: 0;
    list-style: none;
    text-decoration: none;
}



/*cssは下に書いた方が優先になる */
/* りんくをつかいIDgasaikyou  */
/* 共通のスタイリング */
#container{
   background-image: url(../images/morning.jpg);
   background-size: cover;
   background-attachment: fixed;
}

/* ヘッダーのスタイル */
/* ロゴの背景にあたる部分 */
#header{
   position: fixed;
   top: 0;
   width: 100%;
   height: 60px;
   background-color: white;
   backdrop-filter: blur(10px);
   z-index: 100;
}
#header-inner{
   /* 子要素であるh1とnavを横並びにする */
   display: flex;
   justify-content: space-between;/* 子要素であるh1とnavを左右に引き離す */
   align-items: center;/* フレックスアイテムをコンテナの縦方向に中央揃え */
   position: fixed;
    inset: 0; /*headerの位置を中央に配置*/
   margin: 0 0 0 270px ;
   width: 1000px;/*headerを中央寄せ*/
   height: 60px;/*headerの高さ*/

   
   
   
}

/* header-logoの設定 */
.header-logo a img {
    justify-content: flex-start;
    height: 80px;
    vertical-align: middle;
    color:green;
    font-family: whale,sans-serif;
    margin-right: 80px;
    

 }
/* ヘッダーナビゲーションの設定 */

.header-nav{
    width: 400px; /*間隔*/
   display: flex;
    margin-left: auto;
   
   
}
/* ul（unordered list)は項目に順番がなくてもよいリストの事 */
.header-nav ul{
   display: flex;
   justify-content: space-between;
   margin: 0 auto;
   
   
}
.header-nav a{
    padding: 0 30px;
   color:green;
   font-family: whale,sans-serif;
   
}

/* メインのスタイル */

#main{
        /* 画像の設定 */
        width: 100%;
        min-width:960px ;
        margin: 0 auto;
        padding: 100px 0 200px 0;
        background-color: white;
}

    section{
        width: 100%;
        min-width: 960px;
        margin:0 auto;
        justify-content: center;
        /* background-color: burlywood; */
}

    
    
    /* フッターのスタイル、一番下に書いてある終わりの文 */
    #footer{
   width: 100%;
   height: 60px;
   background-color: black;
   text-align: center;
}

#footer p{
   padding: 20px 0;
   color: aliceblue;
   font-size: 12px;
}



    /* 共通のスタイリング */

    /* メニュー各ページのスタイリング */

    /* アイテムカード共通のスタイリング */
    #menu{
        display: flex;
        flex-wrap: wrap;
        
    }

    .card{
        width: 350px;
        height: 650px;
        /* background-color: rgba(0, 0, 0, .1);
        backdrop-filter: blur(10px); */
        margin-bottom: 100px; 


    }

    .img-card{
        width: 100%;
        aspect-ratio: 1/1;
        background-color:azure
        
    }
    /* カフェの名前の下に表示される点線 */
    h3{
        margin:10px 0 20px 0 ;
        text-align: center;
        border-bottom: 5px dotted;
    }

    .img-card{
        background-size:cover
    }
    /* center centerは50％の事 */
    .img-card1{
        
        background-image: url(../images/img-card1.jpg);
        background-position:center center ;

    }
    .img-card2{
        background-image: url(../images/img-card2.jpg);
        background-position:center center ;
        
    }
    .img-card3{
        background-image:url(../images/img-card3.jpg) ;
        background-position: center;
        
    }
    .img-card4{
        background-image:url(../images/img-card4.jpg) ;
        background-position: center;
        
    }
    .img-card5{
        background-image:url(../images/img-card5.jpg) ;
        background-position: center;
    }
    .img-card6{
        background-image:url(../images/img-card6.jpg) ;
        background-position: center;
        
    }
    .img-card7{
        background-image:url(../images/img-card7.jpg) ;
        
        
    }
    .img-card8{
        background-image:url(../images/img-card8.jpg) ;
        
        
    }
    .img-card9{
        background-image:url(../images/img-card9.jpg) ;
        
        
    }

    .card1,.card2,.card3,.card4,.card5,.card7,.card8
    {
        margin-right: 30px;
    }
 .text-card p{
   color:black;
 }
 /*インデックス、キャスト、ストーリー  */