@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP&display=swap');
body {
  font-family: "Noto Sans Japanese", sans-serif;
}
p {
  font-style: normal;
  font-weight: 250;
  color: #2E2D2D;
  font-size: 16px;
  text-decoration: none;
  line-height: 1.8rem;
  letter-spacing: 0.03rem;
}
h1 {
  font-size: 20px;
  border-bottom: 3px solid #F7BC54;
  font-weight: 500;
  margin: 0;
  line-height: 1.7rem;
  letter-spacing: 0.1rem;
  color: #555555;
}
h2 {
  font-size: 20px;
  margin: 4rem 0 1.5rem;
  padding: 0rem 0.7rem;
  border-left: 10px solid #F7BC54;
  font-weight: 600;
  letter-spacing: 0.1rem;
  color: #e59e2c;
  line-height: 1.7rem;
}
h2.cate-ex {
  ont-size: 20px;
  margin: 0.5rem 0;
  padding: 0rem 0.7rem;
  border-left: 10px solid #F7BC54;
  font-weight: 600;
  letter-spacing: 0.1rem;
  color: #e59e2c;
  line-height: 1.7rem;
}
h3 {
    font-size: 16px;
    padding: 0.3rem 1.3rem;
    border: 2px solid #F7BC54;
    font-weight: 400;
    letter-spacing: 0.1rem;
    color: #626161;
    margin: 1.8rem 0 0.6rem;
    display: inline-block;
    line-height: 1.6rem;
    background-color: #FFF7EA;
}
h4 {
    font-size: 16px;
    padding: 0.2rem 0.4rem;
    border-left: 8px solid #F7BC54;
    font-weight: 400;
    letter-spacing: 0.1rem;
    margin: 1rem 0 0.3rem;
    color: #626161;
}
span {
    line-height: 1.6rem;
    letter-spacing: 0.08rem;
}


/*スペース*/

#content {
  max-width: 950px;
    margin: auto;
    padding: 0 5%;
}
#content #mainContent {
  max-width: 950px;
}
#content #mainContent .mt1 {
  margin: 0.8rem 0 0;
}
#content #mainContent .mt2 {
  margin: 2.3rem 0 0;
}
/*ヘッダー*/
#mainwrapper header {
  background-color: #F7BC54;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
}
#mainwrapper header .logo {
  padding: 0.7rem 0 0.7rem 4rem;
  display: block;
}
#mainwrapper header img {
  width: 83%;
}
/*ナビゲーション*/
#mainwrapper header nav ul {
  display: flex;
  align-items: center;
  padding: 0 4rem 0.7rem 0;
}
#mainwrapper header nav li {
  border-right: 1px solid #1D1D1D;
  padding: 0 1.5rem;
  letter-spacing: 0.1rem;
  color: #1D1D1D
}
#mainwrapper header nav li:last-child {
  border-right: none;
}
#mainwrapper header nav a {
  text-decoration: none;
  color: #1D1D1D;
}
/*メイン左寄せ、サイド右寄せ*/
#content {
  display: flex;
    justify-content: center;
    
}
#mainContent {
  justify-content: space-around;
  width: 75%;
  padding: 0 8% 0 0;
  margin: 1.5rem 0 4rem;
}
#sidebar {
  justify-content: space-around;
  width: 25%;
  margin: 1rem 0;
}
/*新着記事*/
#content #mainContent .shintyaku-kakoi img {
  width: 100%;
  height: auto;
}
#content #mainContent .topkizi-ex {
  border: thin solid #CCCCCC;
  padding: 1rem 1rem 0.5rem;
  margin: 0 0 1rem;
}
#content #mainContent .midashi {
  line-height: 1.7rem;
  color: #1A1A1A;
  font-size: 17px;
  padding: 0 0 1rem;
}

#content #mainContent .sintyakuImage {
  line-height: 0rem;
}
/*日付、カテゴリー*/
#content #mainContent .timecategory { /*新着記事の時間とカテゴリ*/
  font-size: 15px;
  color: #8A8A8A;
  display: flex;
  margin: 0;
  line-height: 0;
  padding: 0;
  align-items: center;
  justify-content: space-between;
}
#content #mainContent .timecategory-single { /*シングルページの日付、カテゴ*/
  font-size: 13px;
  color: #8A8A8A;
  display: flex;
  margin: 0;
  line-height: 0;
  padding: 0.5rem 0;
  align-items: center;
  justify-content: space-between;
}

#content #mainContent .catego {
  color: #8A8A8A;
  display: flex;
  align-items: center;
}
#content #mainContent .catego3 {/*カテゴリー*/
    color: #8A8A8A;
    line-height: 1rem;    
}

#content #mainContent .catego3 a {
    color: #8A8A8A;
}
#content #mainContent .hizuke { 
  font-size: 15px;
  color: #8A8A8A;
}
/*一覧ページへ誘導*/
#content #mainContent .list p {
  background-color: #E8E8E8;
  padding: 0.5rem 1rem 0.3rem;
  display: inline-block;
  margin: 0;
}
#content #mainContent .list {
  display: flex;
  justify-content: flex-end;
    
}
#content #mainContent .list p:hover {
  text-decoration: underline;
}
#content #mainContent .shintyaku {
  margin: 0 0 2rem;
}
/*ここまで新着の記事*/
/*ここからそれぞれの記事*/
/*カテゴリー説明文*/
#content #mainContent .explanation { /*カテゴリー説明の枕*/
  background-color: #FFF2DE;
  margin: 3rem 0 1rem;
}
#content #mainContent .explanation2 { /*カテゴリー説明の枕（index）*/
  background-color: #FFF2DE;
  margin: 0 0 1rem;
}
#content #mainContent .ex-ex { /*カテゴリー説明文の囲い*/
  padding: 0.5rem 0 0;
}
#content #mainContent .ex-ex p { /*カテゴリー説明文の囲い*/
  padding: 0rem 1.3rem 0.5rem;
  line-height: 1.3rem;
  color: #8B8B8B;
  font-size: 15px;
}
/*記事２列*/
#content #mainContent .kizi {
  display: flex;
  border: thin solid #CCCCCC;
  margin: 1rem 0;
}
#content #mainContent .nakakiziImage {
  line-height: 0;
  width: 250px;
  height: 165px;
  object-fit: cover;
}
#content section .nakakiziImage img {
  width: 250px;
  height: 165px;
  object-fit: cover;
}
#content .nakakizi-flex { /*画像と見出しのflex*/
  display: flex;
  margin: 0 0 0.8rem;
}
#content #mainContent section .nakakizi-ex { /*中記事見出しの枠*/
  border: thin solid #CCCCCC;
    width: 100%;
}
#content #mainContent .nakakizi-ex-flex { /*中記事見出しと日付のflex*/

  display: flex;
  flex-direction: column;
  padding: 1rem 1rem 0.5rem;
  justify-content: space-between;
}

#content #mainContent .nakakizi-ex p { /*中記事のｐ設定*/
  line-height: 1.3rem;
}
/*singleの記事*/
#content #mainContent .naiyou a img {
  max-width: 100%;
  height: auto;
    padding: 0.3rem 0 0.3rem;
}
#content #mainContent .socialicons {/*SNSアイコンの位置指定*/
  display: flex;
  margin: 5rem 0 1rem;
  width: auto;
  justify-content: center;
    column-gap: 2rem;
    
}
#content #mainContent .social img {
  width: 100%;
}
#content #mainContent .social {
  width: 8%;

}
#content #mainContent .sen {
  border-top: 3px solid #F7BC54;
  margin: 2rem 0 3rem;
}
/*関連記事*/
#content #mainContent .kanren-flex {
  display: flex;
}

#content #mainContent .related-posts li {
  padding: 0.5rem 0;
}
#content #mainContent .related-posts a {
    font-size: 15px;
  line-height: 1.8rem;
   color: #8A8A8A;
}
/*ここからサイド*/
/*検索*/
#content #sidebar form {
  display: flex;
  margin: 1rem 0 1.5rem;
  
}
#content #sidebar input {
width: 80%;
    height: 32px;
    border-bottom: medium solid #F7BC54;
      border-right: medium solid #F7BC54;
      border-top: medium solid #F7BC54;
    border-left: none;
}
#content .searchImage img {
  background-color: #F7BC54;
  padding: 0.37rem 0.6rem;
}
#content .searchImage {
    display: block;
}

/*人気記事*/
 #content .side-3 .wpp-post-title {
    font-size: 14px;
    line-height: 1.2rem;
    
}
#content .side-3 .wpp-thumbnail {
    margin: 0.2rem 0 0.5rem;
    width: 100%;
    height: auto;
}
#content .side-3 a:link {
    color: #6F6F6F;
}

/*サイド筆者紹介*/
#content .sidelogo {
  text-align: center;
  margin: 2.5rem 0 1rem;
}
#content .sidelogo-image img {
  margin: 0.5rem 0;
  width: 100%;
}
#content .kao img {
  width: 60%;
}
#content .kao {
  text-align: center;
}
#content .kao-ex p {
  line-height: 1.3rem;
  margin: 0.5rem 0.7rem;
  font-size: 15.5px;
}
/*ここからフッター*/
#mainwrapper footer .footer-yell {
  background-color: #F7BC54;
  padding: 1.7rem 0;
}
#mainwrapper footer .footer-yell-logo {
  text-align: center;
}
#mainwrapper footer .footer-yell-logo p {
  padding: 1rem 0;
}
#mainwrapper footer .footer-yell-logo img {
  margin: 0.4rem 1rem;
}
#mainwrapper footer .footer-abilogo {/*アビロゴ*/
  text-align: center;
  padding: 1.3rem 0;
  background-color: #222222;

}
#mainwrapper footer .footer-abilogo img {
    width: 237px;
    height: auto;
}
/*ハンバーガーメニュー*/
.menu-btn {
  position: fixed;
  top: 10px;
  right: 10px;
  height: 60px;
  width: 60px;
  justify-content: center;
  align-items: center;
  z-index: 90;
  display: flex;
  background-color: #F7BC54;
}
.menu-btn span, .menu-btn span:before, .menu-btn span:after {
  content: '';
  display: block;
  height: 3px;
  width: 25px;
  border-radius: 3px;
  background-color: #565656;
  position: absolute;
}
.menu-btn span:before {
  bottom: 8px;
}
.menu-btn span:after {
  top: 8px;
}
#menu-btn-check:checked ~ .menu-btn span {
  background-color: rgba(255, 255, 255, 0); /*メニューオープン時は真ん中の線を透明にする*/
}
#menu-btn-check:checked ~ .menu-btn span::before {
  bottom: 0;
  transform: rotate(45deg);
}
#menu-btn-check:checked ~ .menu-btn span::after {
  top: 0;
  transform: rotate(-45deg);
}
#menu-btn-check {
  display: none;
}
/*ハンバーガー中のカテゴリー*/
.menu-content ul {
  padding: 5rem 2rem 0;
}
.menu-content ul li {
  list-style: none;
}
.menu-content ul li a {
  display: block;
  width: 100%;
  font-size: 18px;
  box-sizing: border-box;
  color: #3E3E3E;
  text-decoration: none;
  padding: 9px 15px 10px 0;
  position: relative;
}
.menu-content ul li a::before {
  content: "";
  width: 7px;
  height: 7px;
  border-top: solid 2px #565656;
  border-right: solid 2px #565656;
  transform: rotate(45deg);
  position: absolute;
  right: 11px;
  top: 16px;
}
/*ハンバーガーメニューの動き*/
.menu-content {
  width: 200px;
  height: 320px;
  position: fixed;
  top: 0;
  right: -100%; /*leftの値を変更してメニューを画面外へ*/
  z-index: 80;
  background-color: #F7BC54;
  transition: all 0.5s; /*アニメーション設定*/
}
#menu-btn-check:checked ~ .menu-content {
  right: 0; /*メニューを画面内へ*/
}
/*改行*/
.br-sp {
  display: none;
}
/*＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝*/
/* レスポンシブ */
/*PC画面でのいらない部分消去*/
@media screen and (min-width:950px) {/*ハンバーガーメニュー消す*/
  .hamburger-menu {
    display: none;
  }
  #content .kao2 {/*横並び3人の顔消す*/
    display: none;
  }
}
@media screen and (max-width:950px) {
  /*ナビ*/
  #mainwrapper header nav {/*ナビ消す--ハンバーガーに変更*/
    display: none;
  }
  #mainwrapper header img {
    width: 90%;
  }
  /*メイン、サイド縦並びに*/
  p {
  font-style: normal;
  font-weight: 250;
  color: #2E2D2D;
  font-size: 15px;
  text-decoration: none;
  line-height: 1.5rem;
  letter-spacing: 0.03rem;
}
	#content {
	  
    flex-direction: column;
    margin: auto;
      padding: 0 5%;
  }
  #mainContent {
    width: 100%;
    height: auto;
  }
  #sidebar {
    width: 100%;
    height: auto;
    margin: 1rem 0;
  }
  /*サイドの中の横並び*/
  /*検索*/
  #content #sidebar .search {
    display: flex;
    margin: 0 auto 1rem;
      align-items: center;
  }
    
  #content .searchImage img {
    background-color: #F7BC54;
      display: block;
      padding: 0.45rem 0.6rem;
  }
  #content #sidebar input {
width: 90%;
    height: 33px;
    }
  /*人気記事*/

  #content .side-3 .wpp-post-title {
       display: none;  
  }
    #content .side-3 ul {
        background: #FFF2DE;
    padding: 1rem 0 1rem; 
        display: flex;
        justify-content: space-around;
column-gap: 3%;
    }
    #content .side-3 li {
        margin: 0;
    }
  #content h4 {
    font-size: 18px;
    padding: 0.2rem 0.4rem;
    border-left: 8px solid #F7BC54;
    font-weight: 400;
    letter-spacing: 0.1rem;
      color: #555555;
      
  }
  /*サイド筆者紹介*/
  #content .sidelogo {
    text-align: center;
    margin: 2.5rem 0 1rem;
  }
  #content .sidelogo-image img {
    width: auto;
  }
  #content .kao {
    display: none;
  }
  #content .kao2 {
    text-align: center;
    margin: 0.5rem;
  }
  #content .kao2 img {
    width: 70%;
  }
  #content .kao-ex p {
    line-height: 1.3rem;
    max-width: 60%;
    margin: 0 auto 3rem;
    font-size: 15.5px;
  }

}
@media screen and (max-width:700px) {
  /*改行*/
  .br-pc {
    display: none;
  }
  .br-sp {
    display: inline-block;
  }
  footer .footer-yell p {
    line-height: 1.3rem;
    padding: 0 1rem;
  }
  #mainwrapper header img {
    width: 75%;
  }
  #content #mainContent .midashi {
    line-height: 1.5rem;
    padding: 0 0 1rem;
    color: #1A1A1A;
    font-size: 17px;
  }
    
}
@media screen and (max-width:500px) {
  #mainwrapper header .logo {
    padding: 0.7rem 0 0.7rem 10%;
    display: block;
  }
  #content .nakakizi-flex {
    display: flex;
    flex-direction: column;
  }
    #content #mainContent section .nakakizi-ex { /*中記事見出しの枠*/
  border: thin solid #CCCCCC;
    width: auto;
}
    /*spの検索*/
  #content #sidebar .search {
    display: flex;
    margin: 0 auto 1rem;
    width: 90%;
      align-items: center;
  }
    
    
  #content .side-3 ul {/*人気の記事フレックス*/
    display: flex;
    flex-direction: column;
    align-items: center;
  }
    #content .side-3 .wpp-thumbnail {
    margin: 0.2rem 0 0.5rem;
    width: 100%;
    height: auto;
}
  #content .sideimage {
    width: 80%;
  }
  #content .kao2 img {
    width: 90%;
  }
  #content #mainContent .social {
    width: 15%;
  }
  #content #mainContent .nakakiziImage {
    line-height: 0;
    width: 100%;
    height: auto;
  }
  #content section .nakakiziImage img {
    width: 100%;
    height: auto;
  }
}