/*
Theme Name: My first Theme1.3
Theme URI: https://example.com/
Author: 山田
Author URI: https://example.com/
Description: 自作の勉強記録ブログ用テーマ！
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: my-first-theme
*/


body{
    width: 100%;
    background-color: rgba(175, 175, 175, 0.562);
}

header{
    height: 100px;
    width: 100%;
    background-color: aliceblue;
}

.hb{
    display: flex;
    justify-content: center;
    align-items: center;

    height: 100%;
    width: 100%;
    border-bottom: 3px solid black;
}




.nc{
    display: block;

    display: flex;
    justify-content: center;
    align-items: center;

    gap: 10%;
    height: 80px;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: aquamarine;
}


.first-hide{
    display: none;
}

.first-show{
    display: block;
}

.show{
    display: block;
}

.hide{
    display: none;
}



main{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.sc{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.mb{
    width: 100%;
    width: 60%;
    height: 100%;
    margin: 40px;
}

.mcb1{
    display: flex;
    justify-content: center;
    align-items: center;

    border: 2px solid black;
    width: 100%;
    height: 100%;
    background-color: aliceblue;

}

.mc1{
  display: flex;
  flex-direction: column; /* 子を縦方向に並べる */
  align-items: center;    /* 横方向の中央揃え */
  width: 100%;
  height: 100%;
}

.mc1-title{
    display: flex;
    flex-direction: column; /* 子を縦方向に並べる */
    align-items: center;    /* 横方向の中央揃え */
    background-color: aliceblue;
    width: 100%;

}

.article-border{
    display: flex;
    border-top: 2px solid rgb(0, 0, 0);
    width: 100%;
    background-color: aliceblue;
}

.article-contents{
  display: flex;
  flex-direction: column; /* 子を縦方向に並べる */
  height: 150px;
  width: 100%;
}

.thumb img {
  width: 170px;
  height: 150px;
  object-fit: cover; /* はみ出しても中央を表示 */
  border-radius: 8px; /* 角丸にしたい時 */
}


.article-title{
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid rgb(114, 114, 114);
    width: 100%;
    height: 30px;
}

.article-item{
    border-bottom: 1px solid rgb(114, 114, 114);
    width: 100%;
    height: 90px;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4; /* 3行でカット */
    overflow: hidden;
    text-overflow: ellipsis;
}


.article-tags{
    display: flex;
    align-items: left;
    height: 30px;
    border-bottom: 1px solid rgb(114, 114, 114);
}

.pagination{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: rgba(175, 175, 175, 0.562);
    gap: 10px;
}



.mcb2{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    border: 2px solid black;
    width: 100%;
    height: 100%;
    background-color: aliceblue;

}

.mc2{
  display: flex;
  flex-direction: column; /* 子を縦方向に並べる */
  align-items: center;    /* 横方向の中央揃え */
  width: 100%;
  height: 100%;
}







footer{
    display: flex;
    justify-content: center;
    align-items: center;

    height: 100px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.397);
}

















@media screen and (max-width: 768px) {
  /* スマホだけに反映されるCSS */
  

body{
    font-size: 12px;
    width: 100%;
    background-color: rgba(175, 175, 175, 0.562);
}

header{
    height: 80px;
    width: 100%;
    background-color: aliceblue;
}

.hb{
    display: flex;
    justify-content: center;
    align-items: center;

    height: 100%;
    width: 100%;
    border-bottom: 3px solid black;
}




.nc{
    display: none;
}


.nav-mobile{
    font-size: 30px;
    display: block;
    position: fixed;
    right: 3px;
    top: 0px;
    z-index: 1000;
}


.nc-mobile{
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    gap: 10%;
    list-style: none;
    padding: 0;
    margin: 0;
    background-color: aquamarine;
}



.first-hide{
    display: none;
}

.first-show{
    display: block;
}

.show{
    display: block;
}

.hide{
    display: none;
}



main{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
}

.sc{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 20px;
}

.mb{
    width: 80%;
    height: 100%;
    margin: 20px;
}

.mcb1{
    display: flex;
    justify-content: center;
    align-items: center;

    border: 2px solid black;
    width: 100%;
    height: 100%;
    background-color: aliceblue;

}

.mc1{
  display: flex;
  flex-direction: column; /* 子を縦方向に並べる */
  align-items: center;    /* 横方向の中央揃え */
  width: 100%;
  height: 100%;
}

.mc1-title{
    display: flex;
    flex-direction: column; /* 子を縦方向に並べる */
    align-items: center;    /* 横方向の中央揃え */
    background-color: aliceblue;
    width: 100%;

}

.article-border{
    display: flex;
    border-top: 2px solid rgb(0, 0, 0);
    width: 100%;
    background-color: aliceblue;
}

.article-contents{
  display: flex;
  flex-direction: column; /* 子を縦方向に並べる */
  height: 80px;
  width: 100%;
}

.thumb img {
  width: 80px;
  height: 80px;
  object-fit: cover; /* はみ出しても中央を表示 */
  border-radius: 8px; /* 角丸にしたい時 */
}


.article-title{
    display: flex;
    justify-content: center;
    align-items: center;
    border-bottom: 1px solid rgb(114, 114, 114);
    width: 100%;
    height: 15px;
}

.article-item{
    border-bottom: 1px solid rgb(114, 114, 114);
    width: 100%;
    height: 50px;

    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4; /* 3行でカット */
    overflow: hidden;
    text-overflow: ellipsis;
}


.article-tags{
    display: flex;
    align-items: left;
    height: 15px;
    border-bottom: 1px solid rgb(114, 114, 114);
}


.pagination{
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    background-color: rgba(175, 175, 175, 0.562);
    gap: 10px;
}



.mcb2{
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    border: 2px solid black;
    width: 100%;
    height: 100%;
    background-color: aliceblue;

}

.mc2{
  display: flex;
  flex-direction: column; /* 子を縦方向に並べる */
  align-items: center;    /* 横方向の中央揃え */
  width: 100%;
  height: 100%;
}







footer{
    display: flex;
    justify-content: center;
    align-items: center;

    height: 80px;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.397);
}


}