/*
Theme Name : monogatari kansou
Author : mm-monster
Description : 映画や小説や漫画やゲームの感想のサイト用テーマ
Version : 1.0
*/



@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&family=Yusei+Magic&display=Noto+Sans+JP:wght@300&display=swap');



html {
    font-size: 62.5%;
    background-color: black;
}

main {
   width: 80%;
   margin-left: auto;
   margin-right: auto;
}

article {
   width: 80%;
}

aside {
   width: 20%;
}

#content {
   width: 80%;
   margin-left: auto;
   margin-right: auto;
   margin-top: 30px;
}

.flex-box{
   display: flex;
   justify-content: center;
}

.breadcrumbs {
   color: white;
   margin-top: 10px;
}

.breadcrumbs a {
   text-decoration: none;
   color: white;
   font-size: 13px;
   font-size: 1.3rem;
}

.breadcrumbs a:hover {
   color: blue;
}

/*
header===============================================================================================================================
*/

.header-box {
   width: 80%;
   margin-left: auto;
   margin-right: auto;
   position: relative;
}

.header-img img {
   width: 100%;
   display: inline-block;
}

.header-img-sp {
   display: none;
}

.header-img {
   opacity: 0;
  
  /* アニメーション */
  animation: fadeIn 2s linear;
  animation-fill-mode: both;

}

@keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}


.header-text {
   position: absolute;
   top: 300px;
   left: 200px;
   color: white;
   font-size: 20px;
   font-size: 2.0rem;
}

.page-text {
   color: white;
   font-size: 15px;
   font-size: 1.5rem;
}

.current-item {
   font-size: 12px;
   font-size: 1.2rem;
}

/*
footer=================================================================================================================================
*/

.footer {
   color: white;
   height: 50px;
   font-size: 15px;
   font-size: 1.5rem;
   display: flex;
   align-items: center;
   justify-content: center;
}


/*
index.php============================================================================================================================
*/

.index-p  {
   color: white;
}

.page-navi {
   color: white;
}

.date {
   font-size: 15px;
   font-size: 1.5rem;
}

.blog-list a {
   margin-left: 20px;
}

.blog-list li {
   margin-bottom: 10px;
}

.blog-list a:hover{
   color: blue;
}

.center a {
   font-size: 15px;
   font-size: 1.5rem;
   color: white;
}

.center a:hover{
   color: blue;
}

.center {
   width: 90%;
   border-top: 1px solid white;
   padding-top: 10px;
}

.center a {
   text-decoration: none;
}

.span-title p{
   color: white;
}

.span-title{
   animation-iteration-count: infinite;
   color: white;
}

.my-element {
    --animate-duration: 5s;
}

.new-blog {
   text-align: left;
}

.blog-box-h2 a {
   color: white;
   text-decoration: none;
}

.blog-box-h2 a:hover{
   color: blue;
}

.wp-pagenavi {
   color: white;
   font-size: 13px;
   font-size: 1.3rem;
   height: 20px;
}

.page-navi-count {
   margin-top: 20px;
}

/*
sidebar=============================================================================================================================
*/

.sidebar {
   color: white;
   font-size: 12px;
   font-size: 1.2rem;
}

ul {
   padding-left: 0;
   text-decoration: none;
}

ul li {
   list-style: none;
   color: white;
   text-decoration: none;
}

ul li a {
   text-decoration: none;
   color: white;
   font-size: 15px;
   font-size: 1.5rem;
}

.cat-item a:hover {
   color: blue;
}

.cat-item {
   margin-bottom: 10px;
}

.widget-title {
   font-size: 15px;
   font-size: 1.5rem;
}

#calender_wrap {
   font-size: 15px;
   font-size: 1.5rem;
}

.widget-title {
   border-bottom: 1px solid white;
}

/*
single==============================================================================================================================
*/

.section-title {
   color: white;
}

.blog-body {
   color: white;
}

.blog-wrap {
   margin-top: 30px;
}

.blog-wrap {
   font-size: 15px;
   font-size: 1.5rem;
}

#respond {
   color: white;
   padding-top: 50px;
}

.date-single {
   color: white;
}

.section-title-single {
   font-size: 30px;
   font-size: 3.0rem;
   color: white;
}

.page-navi-single {
   border-top: 1px solid white;
   width: 90%;
   margin-top: 20px;
}

.page-navi-single a {
   font-size: 13px;
   font-size: 1.3rem;
   color: white;
}

.page-navi-single a:hover {
   color: blue;
}

#reply-title {
   border-top: 1px solid white;
   width: 90%;
   padding-top: 10px;
}

.blog-body a {
   color: white;
}

.blog-body a:hover {
   color: blue;
}

.wp-block-separator {
   width: 90%;
   margin-left: 0;
}

/*
レスポンシブ=========================================================================================================================
*/

@media(max-width: 376px)
{

#content {
   width: 100%;
}

article {
   width: 100%;
}

aside {
   display: none;
}

.header-box{
   width: 90%;
}

.header-img-sp img {
   width: 100%;
}

.header-img-sp {
   display: block;
   width: 95%;
   margin-left: auto;
   margin-right: auto;
   opacity: 0;
  
  /* アニメーション */
  animation: fadeIn 2s linear;
  animation-fill-mode: both;
}

@keyframes fadeIn{
	0%{
		opacity: 0;
	}
	100%{
		opacity: 1;
	}
}


.header-img {
   display: none;
}

.header-text {
   font-size: 10px;
   font-size: 1.0rem;
   top: 50px;
   left: 50px;
}

.section-title-single {
   font-size: 20px;
   font-size: 2.0rem;
}

} /*レスポンシブかっこ閉じ*/