@charset "UTF-8";

/* 共通部分------------------------------*/

html{ font-size: 100%;}

body{
    font-family: "Yu Gothic Medium","游ゴシック Medium","YuGothic","游ゴシック体","ヒラギノ角ゴ Pro W3",sans-serif;
    line-height: 1.7;
    color: rgb(255, 255, 255);
}

a{text-decoration: none;}
img{max-width: 100%;}
   
/*さなぎ箱タイトル----------*/
h1{font-size: 3rem; 
        font-family: "Zen Kurenaido", sans-serif;
        font-weight: 400;
        font-style: normal;
    }
h1 a{color: #ffffff;}

    
/*ナビ------*/
.main-nav{
    display: flex; font-size: 1.25rem; text-transform: uppercase; margin-top: 34px; list-style: none;
}

.main-nav li{ margin-left: 36px;}

.main-nav a{color: rgb(246, 246, 246);}

.main-nav a:hover{ color: rgb(255, 98, 0);}

.page-header{ display: flex; justify-content: space-between; align-items: flex-end;

}

.wrapper{ max-width: 1100px; margin: 0 auto; padding: 0 4%;}


/* Home
---------------------------------------------------------- */
.home-content{
  text-align: center; margin-top: 10%;  
}

.home-content p{font-size: 1.125rem; margin: 10px 0 42px;}

/* 見出し　*/
.page-title{
    font-size: 5rem; 
    font-family: "Zen Kurenaido", sans-serif;
    text-transform: uppercase; 
    font-weight: normal; 
    align-items: center;
}


/* 大きな背景画像　*/
.big-bg{
    background-size: cover; background-position: center top;
}

#home{background-image: url(images/ホーム絵.jpg); 
    min-height: 100vh;
}
#home .page-title{ text-transform: none;}

/*NEWS
-------------------------------------*/

#news{
    background-color: #fff; height: 100px; margin-bottom: 40px;
}

#news .page-title{
    text-align: center; 
    color: #6873d4; 
}


/*フッター
-------------------------------*/
footer{
    background: rgb(98, 107, 144);
    text-align: center;
    padding: 26px 0; }

footer p{color: #fff; font-size: 0.875rem;}




/*記事部分　---------------------------------------------------------*/
article{
    width: 100%; color: black;
}

.post-info{position: relative; padding-top: 4px; margin-bottom: 40px;}
.post-date{
    background: rgb(208, 184, 26); border-radius: 50%; color: #fff; 
    width: 100px; height: 100px; font-size: 1.625rem; text-align: center; 
    position: absolute; top: 0; padding-top: 10px;
}
.post-date span{
    font-size: 1rem; border-top: 1px rgba(255,255, 255, 0.5) solid; padding-top: 6px; 
    display: block; width: 60%; margin: 0 auto;
}

.post-title{
    font-family: "Yu Mincho","YuMincho",serif; font-size: 2rem; font-weight: normal;
}
.post-title,
.post-cat{margin-left: 120px;}

article img{margin-bottom: 20px; justify-content: center;}
article p{margin-bottom: 1rem;}

.item2{
    background: rgb(255, 252, 222); color: #fff; margin: 50px; padding: 10px;
}



/*サイドバー　--------------------------------------------*/
aside{
    width: 22%; color: black;
}

.news-contents{
    display: flex;flex-direction: column-reverse;
     justify-content: space-between; margin-bottom: 100px;
}

.sub-title{
    font-size: 1.375rem; padding: 0 8px 8px; border-bottom: 2px #0bd solid; font-weight: normal;
}
aside p{padding: 12px; 10px}

.sub-menu{
    margin-bottom: 60px; list-style: none;
}
.sub-menu li{
    border-bottom: 1px #ffffff solid;
}
.sub-menu a{
    color: #432; padding: 10px; display: block;
}
.sub-menu a:hover{
    color: rgb(221, 188, 0);
}

/*bio----------------------------------------------------*/
#bio{
    background-image: url(images/bio見出し.png); min-height: 100vh;
    
}
.bio-content{
    max-width: 700px; margin-top: 10%; color: #ffffff;
}
.page-title{
    text-align: center; padding: 20px; margin: 20px;
}
.bio-content h2{text-align: center; color: rgb(255, 255, 255);}

.bio-article{
    background-color: #ffffff; min-height: 60vh; text-align: center;
    margin: 10rem;
}

.bio-article h3{ font-family:  "Yu Mincho","YuMincho",serif; font-size: 2rem
     ;color: #432; }
.bio-article p{color: #432;
    font-size: 1.125rem; margin: 10px 0 0; 
}


/*works-----------------------------------------------------*/

#works{
    background-image: url(images/works見出し.jpg); min-height: 100vh;
}
.works-content{
    max-width: 700px; margin-top: 10%;
}
.works-content .page-title{
    text-align: center; color: #ffffff;
}
.works-content p{
    font-size: 1.125rem; margin: 10px 0 0; text-align: center;  color: #ffffff;
}
.works-content a{color: #ffffff;}
.works-content a:hover{color: #ff1a8d;}

.grid{
    display: grid; gap: 26px; grid-template-columns: repeat(auto-fit,minmax(240px,1fr));
    margin-top: 6%; margin-bottom: 50px;
}
.grid p{color: #432;}


/*comic------------------------------------------------------*/
#works-comic{
    background-image: url(images/comic/クリスマス_006.jpg); min-height: 100vh;
}

/*illust------------------------------------------------------*/
#works-illust{
    background-image: url(images/illust見出し.jpg); min-height: 100vh;
}

/*book--------------------------------------------------------*/
#works-book{
    background-image: url(images/book/book見出し.jpg); min-height: 100vh;
}


/*drawing-------------------------------------------------*/
#works-drawing{
    background-image: url(images/drawing\ 見出し.png); min-height: 100vh;
}

/*picture diary-------------------------------------------------*/
#works-diary{
    background-image: url(images/にっき見出し.jpg); min-height: 100vh;
}

/*other-------------------------------------------------*/
#works-other{
    background-image: url(images/other/181188.jpg); min-height: 100vh;
}


/*contact----------------------------------------------------*/
#contact{
    background-image: url(images/contact見出し.jpg);
    min-height: 100vh;
}
.contact-content{
    max-width: 700px; margin-top: 10%;
}
.contact-content .page-title{
    text-align: center; color: #ffffff;
}
.contact-content p{
    font-size: 1.125rem; margin: 10px 0 0; text-align: center;  color: #ffffff;
}


/*sns*/
#sns{
    background: #bacbac;
    padding:  2% 0;
    color: #432;
    text-align: center;
}

#sns .sub-title{
    margin-bottom: 30px;
}

.sns-box{margin: 5%;}






/*　モバイル版　
------------------------------------------*/
@media(max-width:620px)
{
　　　


/*header*/
.main-nav{
    font-size: 1rem; margin-top: 10px;
}
.main-nav li{
    margin: 0 20px;
}

/*home*/

#home{
    max-width: 620px;
    margin: 0 auto; align-items: center;
}

.home-content{
    margin: 0 auto;
    
}
.home-content h2{font-size: 3.5rem; }
.page-header{
    flex-direction: column;
}

/*news*/
.news-contents{
    flex-direction: column; 
}
article,aside{width: 100%;}

#news .page-title{margin-top: 2rem;}

aside{margin-top: 60px;}

.post-info{margin-bottom: 30px;}

.post-date{width: 70px; height: 70px; font-size:1rem ;}

.post-date span{font-size: 0.875rem; padding-top: 2px;}

.post-title{font-size: 1.375rem;}

.post-cat{font-size: 0.875rem; margin-top: 10px;}

.page-title,.post-cat{margin-left: 80px;}


/*bio*/
#bio{min-width: auto;}

.bio-content{
    margin-top: 20%;
}
.bio-content h2{font-size: 3.5rem; align-items: center;}

.bio-article{
    margin: 20% 0;
}

/*works*/
#works .page-title{font-size: 3.5rem; align-items: center;}

.menu-content{
    margin-top: 20%;
}

/*contact*/
#contact .page-title{
    margin-top: 20px;
}
.contact-content{
    margin-top: 20%;
}
.contact-content h2{font-size: 3.5rem; align-items: center;}
.contact-content p{align-items: center;}

/*フォーム*/
input[type="text"],input[type="email"],textarea{
    max-width: 100%;
}

}