/* @charset "utf-8"; */

/*
Theme Name: playful
Author: Horimoto Ken
Description: Horimoto's original thema.
Version: 1.9
*/

/*--------------------------------------
  ヨメレバ・カエレバ（レスポンシブ）
--------------------------------------*/


.booklink-box, .kaerebalink-box{
    padding:25px;
    margin-bottom: 10px;
    border:double #CCC;
    overflow: hidden;
    font-size:small;
}
.booklink-image, .kaerebalink-image{
    margin:0 15px 0 0;
    float:left;
    min-width: 160px;
    text-align: center;
}
.booklink-image img, .kaerebalink-image img{
    margin:0 auto;
    text-align:center;
}
.booklink-info, .kaerebalink-info{
    margin:0;
    line-height:120%;
    overflow: hidden;
}
.booklink-name, .kaerebalink-name{
    margin-bottom:24px;
    line-height:1.5em;
}
.booklink-powered-date, .kaerebalink-powered-date{
     font-size:8px;
     margin-top:10px;
     font-family:verdana;
     line-height:120%;
}
.booklink-detail, .kaerebalink-detail{font-size: 12px;}
.booklink-powered-date, .kaerebalink-detail{margin-bottom:15px;}
.booklink-link2, .kaerebalink-link1{margin-top:10px;}
.booklink-link2 a,
.kaerebalink-link1 a{
    width:30%;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    display:inline-block;
    margin:5px 2px 0 0;
    padding:10px 1px;
    text-align:center;
    float:left;
    text-decoration:none;
    font-weight:800;
    text-shadow:1px 1px 1px #dcdcdc;
    font-size:12px;
    color: #fff !important;
}
.booklink-link2 a:hover,
.kaerebalink-link1 a:hover{opacity: 0.6;}
.booklink-link2 a:active
.kaerebalink-link1 a:active{
    position:relative;
    top:1px;
}
/*ボタンを変えるときはここから*/
.shoplinkamazon a{background-color:#FF9901 !important;}
.shoplinkrakuten a{background-color:#c20004 !important;}
.shoplinkkindle a{background-color:#007dcd !important;}
.shoplinkkakakucom a{background-color:#314995 !important;}
.shoplinkyahoo a{background-color:#7b0099 !important;}
/*ここまでを変更*/
.shoplinkseven{display: none;}

.shoplinkyahoo img{display:none;}
.shoplinkyahoo a{font-size:10px;}
.booklink-footer{display: none;}

@media screen and (max-width: 680px) {
.booklink-box, .kaerebalink-box{padding:15px;}
.booklink-image, .kaerebalink-image{
    width: 100px !important;
    min-width: initial;
}
.booklink-name > a, .kaerebalink-name > a{
    font-size: 15px;
    font-weight: bold;
}
.booklink-name, .kaerebalink-name{margin-bottom:12px;}
.booklink-powered-date, .kaerebalink-powered-date{margin-top:5px;}
.booklink-link2 a,
.kaerebalink-link1 a{
    width:calc(100% - 4px);
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
    border-radius:5px;
    margin: 2px 0px;
    padding:10px 0px;
}
}

/*堀元独自のヨメレバカエレバ変更 */

.single-article .booklink-info img{
	width:1px;
}


.single-article .booklink-image img{
	display: inline-block;
}

.booklink-info a{
	line-height: 1.5em;
}

/*堀元独自の変更ここまで*/

/*amazletデザイン用ここから*/
.amazlet-box {
    background: #54595a;
    font-size: 16px;
    line-height: 1.5;
    margin-top:32px;
    margin-bottom:32px !important;
    padding: 26px 16px;
    border: 1px solid #eee;
    position: relative;
}
.amazlet-box a {
    box-shadow:none;
}
.amazlet-box a:hover {
    box-shadow:none;
}
.amazlet-image {
    margin: 0px 14px 1px 0px !important;
}
.amazlet-image img {
    margin: 0;
}
.amazlet-name a {
    color: #3f89ff;
}
.amazlet-name a:hover {
    color: #ffb83f;
}
.amazlet-powered-date {
    font-size: 10px !important;
}
.amazlet-detail {
    font-size: 12px;
}
.amazlet-link {
    margin-top: 10px !important;
}
.amazlet-link a {
    padding: 12px; /* ボタン内側の余白 */
    border-radius: 3px;
    border-bottom: 3px solid #FF9901;
    margin: 10px 0;
    background-color: #FFA01C;
    color: #fff;
    text-decoration: none;
    width: 278px; /* ボタンの幅 */
    display: block;
    text-align: center;
    font-size: 16px;
}
.amazlet-link a:hover {
    color: #fff !important;
}
/***  解像度480px以下のスタイル ***/
@media screen and (max-width:480px){
.amazlet-sub-info {
    width: 100%;
}
.amazlet-link a {
    width: 100%;
	box-sizing:border-box;
}
}

/*amazletデザイン用ここまで*/




*{
	margin:0px;
	padding:0px;
	max-width:100%;
}

body{
	/* background:#93867F; */
	 background: #281425;  /*濃い紫 */
	/* background: #2D2F30; */
	font-family:"Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", 'Hiragino Kaku Gothic Pro', "ヒラギノ角ゴ Pro W3", "メイリオ", Meiryo, sans-serif;
	color:#DCE2DF;
}

img{
	max-width:100%;
}

a{
	text-decoration:none;
}

.contents{
	width:90%;
	margin:auto;
}


.container{
	width:100%;
}

header{
	background-color:#54595a;
	width:100%;
	position: fixed;
}

.header-adjuster{
	height:60px;
}

.mudaso{
	height:45px;
	margin-left:50px;
	margin-top:5px;
	cursor: pointer;
}


.top-logo{
	/*
	position: -webkit-sticky;
	position:sticky;
	top:0;
	*/
	padding-left: 15px;
	width:50%;
	float:left;
}

.top-logo-sp{
	display: none;
}

header .fa-bars{
	color:#e7db96;

	font-size: 2.6em;
	padding-right:25px;
	padding-top:1px;
	float:right;
	cursor:pointer;
}

header{
	z-index: 1000;
}

#mudaso-box{
	display: inline-block;
	position: relative;
}

#mudaso-serif{
	display: none;
	transition: 0.5s;
	max-width: none;
}

#mudaso-input:checked ~ #mudaso-serif{
	transition: 0.5s;
	display: block;
	position: absolute;
	margin-left: -100px;
}

.balloon1-top {
	position: relative;
	display: inline-block;
	margin-top:10px;
	padding: 15px;
	width:380px;
 	color: #281425;
	font-size: 16px;
	background: #DCE2DF;
}

.balloon1-top:before{
	content: "";
	position: absolute;
	top: -30px;
	left: 140px;
	border: 15px solid transparent;
	border-bottom: 15px solid #DCE2DF;
}

.balloon1-top p {
	margin: 0;
	margin-bottom: 10px;
	font-size: 22px;
	font-weight: bold;
	padding: 0;
	display: inline-block;
	float: left;
}

#mudaso-close-btn{
	cursor: pointer;
	font-size: 30px;
	float:right;
	padding: 0;
	margin: 0;
	color: #281425;
	font-weight: bold;
}

.snsbtn34{margin:0 0 1em 0;}
.snsbtn34 a{
	display:inline-block;
	width:64px;
	height:64px;
	margin:0 8px 0 0;
	padding:2px 0 0 0;
	line-height:64px;
	color:#fff;
	text-align:center;
	border-radius:50%;
	transition:0.5s;
}

.snsbtn34 a i::before{
	margin:0 0 0 0;
	display:inline-block;
	font-size:20px;
	line-height:58px;
}

.snsbtn34 a i{
	display:inline-block;
	vertical-align:top;
	width:60px;
	height:60px;
	border:1px dashed #fff;
	border-radius:50%;
}

.icon-hatebu{
	font-size: 1.2em;
	font-weight: bold;
	font-style: normal;
}

.snsbtn34 a:hover{transform:rotate(360deg);}
.snsbtn34 .btn-fb{background:#365899;}
.snsbtn34 .btn-tw{background:#1b95e0;}
.snsbtn34 .btn-po{background:#EF4056;}
.snsbtn34 .btn-hb{background:#008fde;}
.snsbtn34 .btn-li{background:#00B900;}
.snsbtn34 .btn-fd{background:#2BB24C;}
.snsbtn34 .btn-fb:hover{background:#4166B0;}
.snsbtn34 .btn-tw:hover{background:#2EA1E9;}
.snsbtn34 .btn-po:hover{background:#F64F64;}
.snsbtn34 .btn-hb:hover{background:#009FF8;}
.snsbtn34 .btn-gp:hover{background:#db6d63;}
.snsbtn34 .btn-li:hover{background:#38ba38;}
.snsbtn34 .btn-fd:hover{background:#60b375;}
.snsbtn34 .btn-bl:hover{background:#505050;}

.mudaso-info{
  padding-top:15px;
}

.mudaso-info a{
  display:block;
  position: relative;
  background: #593C66;
  color: #DCE2DF;
  padding: 10px;
  padding-left: 40px;
  border-radius: 10px;
}

.mudaso-info a img{
  position: absolute;
  top: 50%;
  left: 10px;
  -ms-transform: translateY(-50%);
  -webkit-transform : translateY(-50%);
  transform : translateY(-50%);
}


#nav-drawer {
	float:right;
}

/*チェックボックス等は非表示に*/
.nav-unshown {
  display:none;
}

/*アイコンのスペース*/
#nav-open {
  display: inline-block;
  width: 30px;
  height: 22px;
  vertical-align: middle;
}



#nav-open span:before {
  bottom: -8px;
}
#nav-open span:after {
  bottom: -16px;
}

/*閉じる用の薄黒カバー*/
#nav-close {
  display: none;/*はじめは隠しておく*/
  position: fixed;
  z-index: 99;
  top: 0;/*全体に広がるように*/
  left: 0;
  width: 100%;
  height: 100%;
  background: white;
  opacity: 0;
  transition: .3s ease-in-out;
}

/*中身*/
#nav-content {
  overflow: auto;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9998;/*最前面に*/
  width: 90%;/*右側に隙間を作る（閉じるカバーを表示）*/
  max-width: 40vw;/*最大幅（調整してください）*/
  height: 100%;
  background: #54595a;/*背景色*/
  transition: .3s ease-in-out;/*滑らかに表示*/
  -webkit-transform: translateX(100vw);
  transform: translateX(100vw);/*右に隠しておく*/
	padding-left: 15px;
	font-family: "ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro", "HiraMaruProN-W4", "ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro", "HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO", Meiryo, メイリオ, sans-serif;
}

#nav-content h2{
	float: left;
	font-size:40px;
	padding-top: 20px;
	font-family: 'Luckiest Guy', cursive;
	font-weight: normal;
	color:#cc92e9;
}

#nav-input:checked ~ #nav-content #nav-close-button{
	float: right;
	display: block;
	font-size: 40px;
	padding-right:18px;
	color: #e7db96;
	cursor: pointer;
}


.menu-list div{
	margin-left:25px;
	margin-right:25px;
	padding-left: 10px;
	padding-top:10px;
	padding-bottom:10px;
	font-size:20px;
	background: #333;
	margin-bottom:10px;
}

.menu-list div img{
	padding-right:10px;
}


.menu-list a{
	color:#e7db96;
	background: #333;
}

.menu-list div:hover{
	background: #111;
}

/*チェックが入ったらもろもろ表示*/
#nav-input:checked ~ #nav-close {
  display: block;/*カバーを表示*/
  opacity: .8;
}

#nav-input:checked ~ #nav-content {
  -webkit-transform: translateX(57vw);
  transform: translateX(57vw);/*中身を表示（右へスライド）*/
  box-shadow: 6px 0 25px rgba(0,0,0,.15);
}

/*検索フォーム関連 */

/* Reset input[type="search"] */
input[type="search"] {
  -webkit-appearance: textfield;
  -webkit-box-sizing: content-box;
}
input[type="search"]:focus {
  outline-offset: -2px;
}
input[type="search"]::-webkit-search-decoration {
  display: none;
}


.screen-reader-text{
	display: none;
}

.search-form::before{
		font-family: "Font Awesome 5 Free";
	content: '\f002';
	font-weight: bold;
}

.search-form{
	text-align: center;
	max-width: 100%;
}

.search-field{
	font-size: 1em;
	padding:4px;
	background: #DCE2DF;
}


.search-submit{
	color: #DCE2DF;
	font-size: 1em;
	background: #54595a;
	border:0px;
	padding:4px;
	margin-top:6px;
}

.search-submit:hover{
	background: #333;
	cursor: pointer;
}

.search-box{
	margin-top:30px;
	padding: 10px;
}

/*検索フォームここまで */

#big-image-header{
	display: block;
	width:100%;
}

#big-image-header img{
	width:100%;
}

#big-image-header span{
	display: none;
}

.archive-list{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items:flex-start;
}

.archive-list li{
	background:#54595a;
	flex:1;
	margin:5px;
	flex-basis:22%;
	box-sizing: border-box;
}

.archive-list li::before{
	display: none;
}

#category-archive-list li::before{
	display: none;
}

#category-archive-list{
	border: 0px;
}

#category-archive-list ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items:flex-start;
}

#category-archive-list li{
	padding:10px;
}

.categories::before{
	display: none;
}

.category-archive-list ul{
	border: 0px;
}


.each-article{
	position: relative;
	z-index: 2;
	overflow: hidden;
	background:#54595a;
	margin-top: 15px;
	color:#DCE2DF;
	display: flex;
	flex-wrap: nowrap;
	justify-content: flex-start;
	align-items: stretch;
}

.each-article::before,
.each-article::after,
.related-article::after{
  position: absolute;
  z-index: -2;
  display: block;
	content:'';
}

.each-article,
.each-article::before,
.each-article::after ,
.related-article,
.related-article::after{
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.each-article::after,
.related-article::after {
  top: -100%;
  width: 100%;
  height: 100%;
}


.each-article:hover::after,
.related-article:hover::after{
  top: 0;
	background-color: #333;
	/* background-image: url(images/article_hover.jpg); */
	/* content:url(images/article_hover2.png); */
	text-align: right;
	z-index: 10;
	opacity:0.6;
}

.count0:hover::after{
		background-image:url(images/article_hover_tongue.png);
		background-repeat: no-repeat;
		background-size: contain;
		/* padding-top: calc(243 / 1000 * 100%);  calc(画像高さ ÷ 画像横幅 × 100%) */
}

.count1:hover::after{
			background-image:url(images/article_hover_bite.png);
			background-repeat: no-repeat;
			background-size: contain;
}

.count2:hover::after{
			background-image:url(images/article_hover_mudabanashi.png);
			background-repeat: no-repeat;
			background-size: contain;
}


.each-article h2{
	/* color:#e7db96; */ /*おれ黄色*/
	color: #DCE2DF;
	padding-bottom:8px;
	font-size:22px;
}

.article-date{
	font-size:12px;
	color:#cc92e9;
	padding-bottom:15px;
}

.each-article .thumnail-container{
	flex-basis: 400px;
}

.each-article img{
	display: block;
	height:100%;
	object-fit: contain;
}

.text{
	flex-basis: 600px;
	padding-left:15px;
	padding-top:13px;
	padding-bottom:10px;
}

.text p{
	font-size:12px;
}

.cat-data{
	font-size: 26px;
	color:#cc92e9;
	padding-left:18px;
	text-decoration:none;
	font-family:  "HiraMaruProN-W4", "HG丸ｺﾞｼｯｸM-PRO","HGMaruGothicMPRO", Meiryo, メイリオ, sans-serif;
	font-weight: bold;
	align-self: flex-end;
	flex-basis:101px;
	flex-shrink: 0;
}

.cat-name{
	padding:4px;
	background:#281425;
	border-radius: 5px;
	-webkit-writing-mode: vertical-rl;
		-ms-writing-mode: tb-rl;
				writing-mode: vertical-rl;
	max-height: 110px;
}

.cat-data img{
	height:64px;
}


.clear{
	clear:both;
}

.addition{
	width:10%;
	float:right;
}

.pagination{
	text-align: center;
	margin-top: 20px;
	margin-bottom:30px;

}

.pagination li{
	list-style: none;
	display: inline-block;
	font-size: 26px;
	font-weight: bold;
	background: #54595a;
	color: #cc92e9;
	padding:0;
	border: 1px solid #333;
}


.pagination li > span {
	display: inline-block;
	background: #F0F7F4;
	color:#54595a;
	padding:15px;
}

.pagination li .dots {
  padding: 15px;
	color:#cc92e9;
  border-color: transparent;
  background-color: transparent;
}

.pagination a{
	display: inline-block;
	text-decoration: none;
	color: #cc92e9;
	padding: 15px;
}

/*-------------single.php用の記述ここから----------*/



.kiji-img{
	position: relative;
}

.cat-single-data{
	float: right;
}

.cat-single-data a{
	display: block;
	background: #222;
	padding:15px;
	border-radius: 5px;
	color:#F0F7F4;
	box-sizing: border-box;
}

.cat-single-data a:hover{
	background: #54595a;
	color:#cc92e9;
}

.kiji-date{
	float:left;
	display: inline-block;
	margin-top:15px;

}

.kiji-img img{
	width:100%;
	object-fit: cover;
	display: inline-block;
}

.kiji-img::after{
	position: absolute;
	display: block;
	content: "";
	top:0;
	left:0;
	width:100%;
	height:100%;
	background: -moz-linear-gradient(rgba(40,20,37,0) 50%, #281425 100%);
	background: -webkit-linear-gradient(rgba(40,20,37,0) 50%, #281425 100%);
	background: linear-gradient(rgba(40,20,37,0) 50%, #281425 100%);
}

.title-box{
	background: #54595a;
	margin-top:70px;
	color:#F0F7F4;
	padding:30px;
}

.title-box h1{
	margin-block-end: 0;
	padding: 0;
}

.kiji-info{
	width:750px;
	max-width:80vw;
	margin:auto;
}

.article-contents{
	margin-bottom:40px;
}

.single-article{
	width:800px;
	max-width:80vw;
	margin:auto;
	margin-top:30px;
	margin-bottom:40px;
	padding:20px;
	font-size:19px;
	word-wrap:break-word;
}

.single-article p{
	margin-bottom:1.5em;
	margin-top:1.5em;
	margin-left:0.5em;
}

.single-article a{
	color: #F0F7F4;
	border-bottom: solid 2px #78FECF;
	margin-left: 3px;
	margin-right: 3px;
}

.single-article strong{
	background: linear-gradient(transparent 60%, #BF4E30 60%); /*暫定いい感じの赤*/
	color:#F0F7F4;
	font-size: 24px;
}

.single-article img{
	display: block; /* captionに変なすき間ができるのでその対策 */
	height:auto;
}

.single-article .size-full{
	width:100%;
}

.single-article blockquote{
	/* background: #37283F;*/
	background: #54595a;
	color: #F0F7F4;
	padding: 10px;
	border-radius: 4px;
	margin:20px 0;
	border:2px dashed #cc92e9;
}

.single-article blockquote:before{
	display: inline-block;
	font-family: "Font Awesome 5 Free";
	    content: "\f10d";
	font-weight: bold;
	font-size: 1.4em;
	color: #cc92e9;
	text-rendering: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	margin-bottom: 1em;
}

.single-article blockquote cite{
	display: block;
	text-align: right;
	font-size: 0.8em;
	font-style: normal;
}

.single-article blockquote cite::after{
	content:"より引用";
}


.single-article h2{
	font-size:1.7em;
	background: #584066;
	color: #F0F7F4;
	margin-bottom: 1em;
	padding:20px;
	font-weight: bolder;
	border-radius: 6px;
	margin-top:2em;

	margin-left: -33px;
	padding-left:42px;
	position: relative;
	z-index:-1;
}

.single-article h2::before{
	position: absolute;
content: '';
left: -2px;
top: -2px;
border: none;
border-left: solid 40px #281425;
border-bottom: solid 79px transparent;
z-index:-2
}

.single-article h3, .raa-header{
	margin-left:0.4em;
	background: #37283F;
	padding: 0.5em;/*文字周りの余白*/
	border-left: solid 6px #cc92e9;/*左線（実線 太さ 色）*/
	margin-bottom:1em;
	margin-top:2em;
}

.single-article h4{
	color:#F0F7F4;
	font-size: 1.2em;

	position: relative;
	padding: 0.25em 1em;
	border-top: solid 2px #F0F7F4;
	border-bottom: solid 2px #F0F7F4;
	margin-bottom:1em;
	margin-top:2em;
}

.single-article h4:before, .single-article h4:after {
	content: '';
	position: absolute;
	top: -7px;
	width: 2px;
	  height: -webkit-calc(100% + 14px);
	height: calc(100% + 14px);
	background-color: #F0F7F4;
}

.single-article h4:before{
	left: 7px;
}

.single-article h4:after{
	right: 7px;
}

.wp-caption-text{
	font-size: 0.7em;
	color: #e7db96;
	background: #54595a;
	padding:6px;
}

.single-article ul , .single-article ol{
  border: double 5px #cc92e9;/*二重線 太さ 色*/
  padding: 0.5em 0.5em 0.5em 1em;
	list-style-type: none;
	position: relative;
	margin:1em 0.5em;
}

.single-article ul li {
  line-height: 1.5;
  padding: 0.5em 0;
	padding-left: 2em;
	position: relative;
}

.single-article ul li:before {/*疑似要素*/
  font-family: "Font Awesome 5 Free";
	font-weight:bold;
  content: "\f138";/*アイコンの種類*/

  color: #cc92e9;/*アイコン色*/
	width:1em;

	position: absolute;
	left:0;
	/*以下 上下中央寄せのため*/
	top: 50%;
	-moz-transform: translateY(-50%);
		-webkit-transform: translateY(-50%);
		-o-transform: translateY(-50%);
		-ms-transform: translateY(-50%);
		transform: translateY(-50%);
}

ol{
  counter-reset:number; /*数字をリセット*/
  list-style-type: none!important; /*数字を一旦消す*/
}

ol li{
  position: relative;
  line-height: 1.5em;
  padding: 0.5em 0.5em 0.5em 40px;
}

ol li:before{
  /* 以下数字をつける */
  position: absolute;
  counter-increment: number;
  content: counter(number);
  /*以下数字のデザイン変える*/
  display:inline-block;
  background: #cc92e9;
  color: #281425;
  font-family: 'Avenir','Arial Black','Arial',sans-serif;
  font-weight:bold;
  font-size: 15px;
  border-radius: 50%;
  left: 0;
  width: 25px;
  height: 25px;
  line-height: 25px;
  text-align:center;
  /*以下 上下中央寄せのため*/
  top: 50%;
  -moz-transform: translateY(-50%);
  	-webkit-transform: translateY(-50%);
  	-o-transform: translateY(-50%);
  	-ms-transform: translateY(-50%);
  	transform: translateY(-50%);

}

.kakokiji-link img{
	border-radius: 20px;
}

.kakokiji-link img:hover{
	opacity:0.6;
}

.author{
	background: #54595a;
	position: relative;
	padding:10px;
	margin-top:6em;
	margin-bottom: 15px;
}

.author img{
	position: absolute;
	top:50%;
	left:10px;
	transform: translate(0, -50%);
	width:20%;
	border-radius: 50%;
	border: solid 4px #BF4E30;
	height: auto;
}

.author-text{
	width: 75%;
	float: right;
}

.author-text p{
	margin-top:0.3em;
	margin-bottom:0.3em;
}

.author-name{
	color: #F0F7F4;
}

.author-header{
	position: absolute;
	background-color: #BF4E30;
	padding:8px;
	border-radius: 4px;
	font-family: 'Luckiest Guy', cursive;

}

.single-article .snsbtn34 a{
	border-bottom: none;
}


/* ----------ショートコード用ここから------- */

.voice img{
	display: inline-block;
	width:80px;
	border-radius: 50%;
}

.icon_red img{
	border:#BF4E30 3px solid;
}

.icon_blue img{
	border: #cc92e9 solid;
}

.icon_yellow img{
	border: yellow solid;
}

.voice{
	margin-bottom:3em;
	position: relative;
}



.icon_red .voice-name{
	color:#BF4E30;
}

.icon_blue .voice-name{
	color:#cc92e9;
}

.icon_yellow .voice-name{
	color:yellow;
}

.serif-img{
	max-width: 25%;
	margin-bottom:10px;
}

.serif{
	background: #54595a;
	color: #F0F7F4;
	border-radius: 4px;
	padding:8px;
	font-size: 0.9em;
	margin-bottom:2em;
}

.serif p{
	padding-left:0;
	padding-right:0;
	margin-left: 0;
}

.aside{
	font-size: 0.8em;
	margin-bottom:2em;
	padding:20px;
	padding-left: 3em;
	border-radius: 4px;
	position: relative;
}

.aside p{
	margin-left: 0;
}

.warning{
	background: #BF4E30;
}

.warning::before{
	font-family: "Font Awesome 5 Free";
	content:'\f071';
	font-weight: bold;
	font-size: 2.2em;
	margin-right:0.8em;
	color: #F0F7F4;
	position: absolute;
	top:-10px;
	left:-10px;

}

.normal{
	background: #5B5916;
}

.normal::before{
	font-family: "Font Awesome 5 Free";
	content:'\f4ad';
	font-weight: 400;
	font-size: 2.5em;
	margin-right:0.8em;
	color: #F0F7F4;
	position: absolute;
	top:-10px;
	left:-10px;
}

.related-article{
	background: #54595a;
	position: relative;
	z-index: 2;
	overflow: hidden;
	background:#54595a;
}

.related-article img{
	float:left;
	width:40%;
	margin-right: 1em;
}

.related-article p{
	padding:10px;
	padding-bottom: 0;
	margin:0px;
}

.kanren{
	background: #BF4E30;
	margin:10px;
	padding:5px;
	border-radius: 4px;
}

.related-after-articles{
	padding: 0;
}


a.raa-inner{
	display: block;
	float: left;
	width:33%;
	margin: 0;
	height:242px;
	border-right: 10px solid #281425;
	border-bottom: 10px solid #281425;
	background-color: #54595a;
	box-sizing: border-box;
	word-wrap:break-word;
	overflow: hidden;
}

a.raa-inner:hover{
	opacity: 0.6;
}


.raa-date{
	float:right;
	font-size: 0.7em;
	color: #F0F7F4;
	margin-right: 5px;
}

.raa-text{
	font-size: 0.8em;
	color: white;
	font-weight: bold;
	padding:6px;
}




@media(max-width:770px){
	header .fa-bars{
	font-size: 2.6em;
	padding-right:25px;
	padding-bottom:10px;
	float:right;
	cursor:pointer;
	}

	.mudaso{
		margin-left:20px;
	}

	#mudaso-input:checked ~ #mudaso-serif{
		width: 90vw;
		margin-left: 20px;
	}

	.balloon1-top {
		position: relative;
		display: inline-block;
		box-sizing: border-box;
		width: 100%;
		margin-top:10px;
		padding: 15px;
	}

	.balloon1-top:before{
		content: "";
		position: absolute;
		top: -30px;
		left: 10px;
	}


	.top-logo{
		width:100%;
		box-sizing: border-box;
		padding-right: 20px;
	}

	.header-adjuster{
		height:120px;
	}

	.each-article{
		display: block;
	}

	.each-article img{
		width:100%;
	}

	.text{
		width:70%;
		float:left;
	}

	.cat-data{
		float:right;
		position: static;
		width:20%;
		text-align: right;

	}
	.cat-data img{
		position: static;
		display: inline-block;
		width:101px;
		height:64px;
		float: none;
	}

	.cat-name{
		padding:0;
		position: static;
		writing-mode:horizontal-tb;
		background: none;
	}

	.cat-name span{
		display: inline-block;
		padding: 10px;
		border-radius: 4px;
		background: #333;
	}

	.title-box{
		margin-top: 55px;
	}

	.single-article{
		font-size: 16px;
	}

	.single-article h2{
		font-size: 1.5em;
	}

	.serif-img{
		max-width: 30%;
	}

	.author img{
		position: relative;
		top: 0;
		left: 0;
		transform: none;
		width:70%;
		max-width: 400px;
		margin: auto;
	}

	.author-text{
		float: none;
		width:100%;
		box-sizing: border-box;
	}


}

@media(max-width:480px){

	.serif-img{
		max-width: 35%;
	}

	.top-logo-sp{
		display: block;
		width:50%;
		margin:auto;
		margin-bottom:0;
		padding-bottom:0;
		float:none;
	}

	.top-logo-sp img{
		width:100%;
		height:auto;
		margin-bottom:0;
		padding-bottom:0;
		vertical-align:bottom;
	}

	.top-logo{
		display: none;
	}

	#mudaso-box{
		position: absolute;
		top:0px;
		width:30px;
		height:30px;
	}

	#mudaso-input:checked ~ #mudaso-serif{
		top:80px;
	}

	.mudaso{
		max-width: none;
		position: absolute;
		top:15px;
	}

	header .fa-bars{
		position: absolute;
		top:15px;
		right:3vw;
	}


	#nav-drawer{
		height:0;
	}

	.cat-data{
		display: none;
	}
	.text{
		width:90%;
	}

	.header-adjuster{
		height:125px;
	}

	#nav-content {
	  z-index: 9999;/*最前面に*/
	  max-width: 80vw;/*最大幅（調整してください）*/
	}

	#nav-content h2{
		font-size:45px;
		padding-bottom:10px;
		padding-left: 23px;

	}

	.menu-list div{
		margin-left:25px;
		margin-right:25px;
		padding-left: 10px;
		padding-top:10px;
		padding-bottom:10px;
		font-size:20px;
		background: #333;
		margin-bottom:10px;
	}

	.menu-list div img{
		padding-right:10px;
	}


	#nav-input:checked ~ #nav-content {
	  -webkit-transform: translateX(16vw);
	  transform: translateX(16vw);/*中身を表示（右へスライド）*/
	  box-shadow: 6px 0 25px rgba(0,0,0,.15);
	}

	.single-article{
		max-width:100%;
		box-sizing: border-box;
	}

	.kiji-info h1{
		font-size: 1.6em;
	}

	.title-box{
		font-size:16px;
	}

	.kanren{
		position: absolute;
		top:0;
		opacity: 0.8;
	}

	.related-article img{
		width:95%;
		float: none;
		margin:auto;
		margin-top:10px;
	}

	.related-article p{
		padding-bottom:10px;
	}

	.single-article p{
		margin-left: 0;
	}

	.single-article h2{
		margin-left:0;

	}


	.single-article h3, .raa-header{
		margin-left:0;
	}

	.single-article{
		padding:0;
	}

	.single-article strong{
		font-size:23px ;
	}

	.single-article blockquote::before{
		margin-bottom:2px;
	}

	a.raa-inner{
		width:50%;
		height: 210px;
	}

}