@charset "utf-8";
/*
Theme Name:liberty
Theme URI:https://www.libertynet.jp/
Description:
Version:1.0
Author:Katayama
Author URI:https://www.libertynet.jp/
*/

/* 共通 ----------*/
section { padding:0; }
i { color:#e0b900; }

/* メインコンテンツ ----------*/
.conWrap { flex-direction:row-reverse; -webkit-flex-direction:row-reverse; padding-top: 30px; }
#mainImg { height: auto!important; padding: 20px 0 40px; }
#main { width:75%; padding-top:0; float:left; }
#main article { margin-bottom:100px; border: 1px solid #e0cfb0; }
#main .catBox { text-align:right; margin:15px 20px; }
#main .heading > * { display: block; padding-bottom: 10px; }
#main .conttl span:nth-last-child(2) { color:#d62a20; }
#main .entry-content { padding:0 20px; }
#main .entry-content p { margin-bottom:15px; }
#main i.fa { margin-left:20px; }
#main .conttl2 { font-size:17px; margin-top:0; }
.conttl4 { display: block; padding: 1em; font-weight: bold; background: #fdf5e6; }

.medama-list { margin-bottom:2em; }

/* サイドバー ----------*/
#side { width:20%; float: right; }
#side .widget-title { background-color:#975830; color: #fff; padding:3px 10px; text-align:center; margin:20px 0 5px; }
#side ul > li { position:relative; font-size:14px; padding-left:1em; }
#side ul > li:before { position: absolute; content: ""; left:2px; top: 8px; width: 7px; height: 7px; background-color: #fcd000; }
#side ul > li a:hover { color:#f56901; }
.widget_archive label { display:none; }
#archives-dropdown-3 { width:100%; }
.bnr_blogmura { margin-top:50px; }
.txt_blogmura { font-size:13px; text-align:right; }

/* ページ送り ----------*/
.navigation { display:flex; -webkit-display:flex; justify-content:space-between; -webkit-justify-content:space-between; margin-top:20px; }
.navigation span { position:relative; display:block; width:48%; max-width:300px; }
.navigation a { display:block; text-align:center; padding:5px 10px; transition:all 0.3s; border-radius:inherit; border:1px solid #f5a500; background-color:#fff; }
.navigation a:hover { color:#fff; background-color:#f5a500; }

/* 検索 ----------*/
#searchform > div { display:-webkit-flex; display:flex; -webkit-flex-wrap:wrap; flex-wrap:wrap; }
#searchform label { display:none; }
#searchform input { -webkit-appearance:none; }
#searchform #s { width:64%; display:block; border:1px solid #ccc; padding:5px; margin:0; border-radius:0; }
#searchform #searchsubmit { width:30%; display:block; color:#fff; text-align:center; padding:0 10px; transition:all 0.3s; background-color:#f56901; color:#fff; border:none; border-radius:0; }
#searchform #searchsubmit:hover { background-color:#fcd000; color:#3a3b3f; }

.wp-pagenavi a, .wp-pagenavi span { padding:5px 10px !important; }
.wp-pagenavi a:hover, .wp-pagenavi span:hover { border:1px solid #5a7eb9 !important; cursor:pointer; }
.wp-pagenavi .current { color:#fff; border:1px solid #5a7eb9 !important; background-color:#5a7eb9; }

/* アーカイブ ----------*/
.catttl { background-color:#5a7eb9 ; color:#fff; padding:5px 10px; font-size:18px; margin-bottom:30px; }

/* 404 ----------*/
#primary .page-content { width:100%; max-width:500px; margin:0 auto; }
#primary .txt { margin-bottom:20px; text-align:center; }

@media screen and (max-width: 782px) {
	html { margin-top: 0!important; }

}

@media screen and (max-width:750px){
	body { background: none!important; }
  .conWrap { padding-top: 0; }
	#mainImg { padding: 50px 0 10px; }
  #main { width:100%; }
  #main article { margin-top:10px; margin-bottom:0; }
  #main article:nth-child(n+2) { margin-top:50px; }
  #main .catBox { margin:10px 0 5px; }
  #main .heading { font-size: 17px; }
  #main .entry-content { padding:0 10px; }
  #side { width:100%; margin-top:50px; }

	#contents h1 { font-size: 1.3em;
    font-weight: bold;
    color: #f5a500;
    text-align: center; }
}

/* 関連記事 ----------*/
.related-post-wrap {
  margin: 2em 0;
}
 
.related-post-wrap h4 {
  font-size: 1.25em;
  margin-bottom: 1em;
}
 
.related-post-wrap ul {
  display: grid;
  list-style: none;
  gap: .875em;
  grid-template-columns: repeat(4, 1fr);
}
 
.related-post a {
  display: block;
  text-decoration: none;
  color: #000;
}
 
.related-post a:hover {
  opacity: .6;
}
 
.related-post img {
  display: block;
  width: 100%;
  aspect-ratio: 3/2;
  margin-bottom: .5em;
  object-fit: cover;
}
 
.related-post .text-wrap {
  font-size: .875em;
  font-weight: bold;
}
 
@media (max-width: 600px) {
  .related-post-wrap ul {
    grid-template-columns: repeat(2, 1fr);
  }
 .medama-list.slide { margin-left:-20px !important; margin-right:-10px; }
}