@charset "UTF-8";

/*
Theme Name: xeory_base_child
Theme URI: https://xeory.jp/base/
Template: xeory_base
Description: Xeoryベース子テーマ
Author: バズ部
Author URI: https://bazubu.com/
Version: 1.0.0
*/


/************************************
** 子テーマ用のスタイル
************************************/

/* ----------------------------------------
* 全体
---------------------------------------- */

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


html {
 font-size: 62.5%;
}

body {
 color: #333;
 font-size: 1.6rem;
 font-family: 'Noto Sans JP', sans-serif;
 letter-spacing: .05em;
 line-height: 1.8em;
 text-size-adjust: 100%;
 -webkit-text-size-adjust: 100%;
}

a:link {
 color: #333;
 text-decolation: none;
}

a:hover {
 color: #3380CC;
 text-decoration: none;
 -webkit-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}

/* ----------------------------------------
* 枠組み
---------------------------------------- */

.wrap {
 margin: 0 auto;
 width: 1100px;
}

/* ----------------------------------------
* header
---------------------------------------- */
#header {
 padding: 50px 30px;
 border-top: 10px solid #A8CCF0;
 border-bottom: 1px solid #DCDCDC;
}

#header #logo {
 font-size: 26px;
}

#header #logo a {
 color: #333;
}

#header #logo a:hover {
 color: #3380CC;
 text-decoration: none;
 -webkit-transition: all 0.3s ease-in-out;
 transition: all 0.3s ease-in-out;
}

/* ----------------------------------------
* breadcrumb
---------------------------------------- */
.breadcrumb {
 margin: 0 0 50px;
}

.breadcrumb li a:hover {
 text-decoration: none;
}

/* ----------------------------------------
* gloval nav
---------------------------------------- */
#gnav {
 margin: 0;
 background: #FFF;
 border-top: none;
 border-bottom: 1px #DCDCDC solid;
 font-size: 1em;
}

#gnav li {
 padding: 0 1px 0 0;
}

#gnav li a {
 display: block;
 border-top: none;
 margin-top: 0;
 padding: 20px 25px;
 color: #333;
 text-align: center;
}

#gnav li a:hover,
#gnav li.current-menu-item a {
 color: #333;
 border-top: none;
 background-color: #CCE6FF;
}

#gnav li .sub-menu li a {
 background: #336699;
 font-size: 14px;
}

#gnav li .sub-menu li a:hover {
 background: #6699CC;
}

/* ----------------------------------------
* main
---------------------------------------- */

.cat-content,
article.post,
article.page,
article.wp101,
article.seo101 {
 border: 1px #DCDCDC solid;
 padding: 30px;
}

.post-content {
  padding: 0 50px;
}

.post-loop-wrap .post-content {
  padding: 0 50px 42px;
}

.post-header {
 padding: 30px 40px;
}

.post-meta {
 margin: 0 0 20px;
 flex-direction: row-reverse;
}

.cat-content h1.post-title {
 margin: -10px;
 font-size: 1.2em;
 font-weight: normal;
}

.post-title {
 margin: 0 0 20px;
}

.post-title a:hover {
 color: #3380CC;
}

.post-content p,
.post-content pre {
 padding: 10px 40px;
 line-height: 1.8em;
}

/* 投稿記事内のイラスト用 */
.img-box {
 padding: 20px 0 50px;
 text-align: center;
}

/* not-foundページ内のコンテンツの位置調整 */
.nf-page-space {
 padding: 0 40px;
}

/* ----------------------------------------
* single
-------------------------------------- */

#single-pagination {
 margin: 5em 0 0;
 text-align: center;
 display: flex;
 flex-wrap: wrap;
 align-items: flex-start;
 justify-content: space-between;
}

#single-pagination .next-link,
#single-pagination .next-link-no,
#single-pagination .prev-link,
#single-pagination .next-link-no {
 text-align: center;
 width: 40%;
}

#single-pagination a {
 margin: 10px;
 display: block;
}

#single-pagination img {
 margin: 0 0 5px;
 box-shadow: 2px 2px 3px 3px rgb(0 0 0 / 15%);
}

#single-pagination img:hover {
 transform: scale(1.05);
 transition: 0.3s;
}

/* いいねボタン */
.form-clap {
 margin: 0 40px;
}

/* ----------------------------------------
* card
---------------------------------------- */

.card-wrap {
 width: 100%;
 display: flex;
 flex-wrap: wrap;
 justify-content: space-between;
}

.card-box {
 margin: 0 0 30px;
 padding: 20px 25px;
 background-color: #FFF;
 border: 1px #DCDCDC solid;
}

.card-ec {
 margin: 10px 0;
}

.card-ec img {
 box-shadow: 2px 2px 3px 3px rgb(0 0 0 / 15%);
}

.card-date {
 display: flex;
 flex-wrap: wrap;
 justify-content: flex-end;
}

.card-date ul {
 margin: 10px 0 0;
 padding: 0;
}

.card-title {
 padding: 10px 0;
 font-size: 1.2em;
}

.card-box a img:hover {
 transform: scale(1.05);
 transition: 0.3s;
}


/* ----------------------------------------
* side
---------------------------------------- */
.side-widget-area {
  padding: 0 0 0 10px;
}

/* サイドバーの自己紹介用 */

.side-profile {
 text-align: center;
}

.side-profile img,
.side-profile-text img {
 border: 1px #F0F0F0 solid;
}

.side-profile-text {
 margin: 20px 0 0;
 padding: 1em;
 font-size: 1.4rem;
 line-height: 1.8em;
 color: #666;
}

.side-profile-x a {
 margin: 5px 0 0;
 padding: 1px 7px 3px;
 color: #F0F0F0;
 background-color: #666;
 text-align: center;
 border-radius: 5px;
 display: inline-block;
}

.side-profile-x a:hover {
 background-color: #3380CC;
}

/* ----------------------------------------
* footer
---------------------------------------- */

#footer {
 color: #333;
 background-color: #FFF;
 border-top: 1px #DCDCDC solid;
}

.footer-01 {
 padding: 0 0 0 10px;
 border-top: 1px #DCDCDC solid;
 font-size: 1em;
}

/* フッターのポリシー用 */
.footer-03 {
 margin: 0 auto;
 padding: 20px 0 20px 10%;
}

#footer .footer-03 a {
 margin: 0 30px 0 0;
}

/* ----------------------------------------
* icon
---------------------------------------- */
.published:before {
  width: 13px;
  height: 13px;
  left: 0;
  top: 9px;
  background-color: #999;
}

.fa-home:before,
.fa-folder:before,
.fa-tag:before,
.fa-file:before,
.fa-file-text:before {
 background-color: #999;
 top: 3px;
}

.breadcrumb li,
.breadcrumb span {
 margin: 0 5px 0 0;
}

/* いいねボタン用 */
.archive-iine .ifw_wrap button.ifw_btn,
.archive-iine .ifw_wrap div.ifw_btn {
 padding: 0;
 color: #999;
 font-family: inherit;
 font-weight: normal;
 border: none;
}

.archive-iine .ifw_wrap {
 margin: 0 0 0 10px;
}

.archive-iine .ifw_wrap button.ifw_btn:hover {
 color: #ff5e78;
}

/* ----------------------------------------
* pagetop
---------------------------------------- */
.pagetop span {
  background: #A8CCF0;
}

/* ----------------------------------------
* レスポンシブ（タブレット用）
---------------------------------------- */

@media screen and (max-width: 991px) {

 body {
  font-size: 1.4rem;
  letter-spacing: .05em;
  line-height: 1.6em;
 }

 #header #logo {
  font-size: 20px;
 }

 #header {
  padding: 30px 10px;
 }

 #gnav ul li a {
  margin: 0;
  padding: 10px;
  color: #333;
 }

 #gnav li a:hover,
 #gnav ul li.current-menu-item a {
  margin: 0;
  padding: 10px;
  color: #333;
  border-bottom: 1px #DCDCDC solid;
  background-color: #F5F5F5;
 }

 .published::before {
  top: 6px;
 }

 .wrap {
  max-width: 90%;
  padding: 10px;
 }

 #single-pagination .next-link,
 #single-pagination .next-link-no,
 #single-pagination .prev-link,
 #single-pagination .next-link-no {
  width: 35%;
 }

 .card-box {
  width: 48%;
 }

 .side-widget-area {
  margin: 20px 0 0;
  padding: 50px 0 0;
  border-top: 1px #DCDCDC solid;
  display: flex;
  flex-wrap: wrap;
  justify-content: start;
 }

 .side-profile-text {
  margin: 0 0 0 30px;
  padding: 0 0 0 30px;
  border-left: 1px #DCDCDC solid;
 }
}

/* ----------------------------------------
* レスポンシブ（スマホ用）
---------------------------------------- */

@media screen and (max-width: 767px) {

 #single-pagination {
  margin: 4em 0 0;
  justify-content: center;
 }

 #single-pagination .next-link,
 #single-pagination .next-link-no,
 #single-pagination .prev-link,
 #single-pagination .next-link-no {
  text-align: center;
  width: 60%;
 }

 .cat-content,
 article.post,
 article.page,
 article.wp101,
 article.seo101 {
  padding: 10px;
 }

 .cat-content h1.post-title {
  margin: 10px;
 }

 .post-header {
   padding: 20px 10px 10px;
  }

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

 .post-content p {
  padding: 10px;
  line-height: 1.6em;
 }
 
 .form-clap {
  margin: 0 10px;
 }
 
 .post-meta li,
 .card-date,
 .ifw_wrap button.ifw_btn span.ifw_count,
 .ifw_wrap div.ifw_btn span.ifw_count,
 .ifw_wrap button.ifw_btn span.material-symbols-rounded,
 .ifw_wrap div.ifw_btn span.material-symbols-rounded {
  font-size: 1.2rem;
 }

 .card-box {
  width: 100%;
  padding: 10px;
 }

 .card-ec {
  margin: 0 15px 0 0;
  width: 40%;
  float: left;
 }

 .card-info {
  width: 55%;
  height: 100%;
  position: relative;
  float: right;
 }

 .card-title {
  padding: 0 0 5px;
  font-size: 1.3rem;
 }

 .card-date ul {
  position: absolute;
  bottom: 0;
 }

 .side-widget-area {
  margin: 20px 0 0;
  padding: 50px 0 0;
  border-top: 1px #DCDCDC solid;
  display: block;
 }

 .side-profile-text {
  margin: 0;
  padding: 40px 10px 10px;
  border: none;
}

 .wrap {
  max-width: 100%;
  padding: 10px;
 }
}