@charset "UTF-8";
/*
 Theme Name: SANGO Child
 Theme URI: https://saruwakakun.design
 Author: SARUWAKA
 Author URI: https://saruwakakun.com
 Template: sango-theme
 Version: 4.0
*/
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/




/*--------------------------------------
  見出し
--------------------------------------*/
.entry-content h2 {
  position: relative;
  padding: 0.5em;
  background: #ebebeb;/*カラー変更*/
  color: #626262;/*文字カラー変更*/
}
.entry-content h2:before {
  position: absolute;
  top: 100%;
  left: 0;
  border: none;
  border-right: solid 20px #d2d2d2;/*三角カラー変更*/
  border-bottom: solid 15px transparent;
  content: "";
}




.entry-content h3 {
border-left: none;
}


.entry-content h3 {
  padding: 0.5em;
  background: #ebebeb;/*背景カラー変更*/
  color: #626262;/*文字カラー変更*/
}


.entry-content h4 {
  padding: 0.5em;
  border-left: solid 5px #d2d2d2;/*左線カラー変更*/
  background: #ebebeb;/*背景カラー変更*/
  color: #626262;/*文字カラー変更*/
}


.entry-content h5 {
  padding: 0.5em 0;
  border-bottom: solid 3px #d2d2d2;/*下線カラー変更*/
  color: #626262;/*文字カラー変更*/
}






.footer-meta {
    display: none;
}

/*--------------------------------------
  アイコンの変更と位置調整
--------------------------------------*/
.sidebar .my_popular_posts .widgettitle:before {
    content: "\f201";/*アイコン変更*/
    padding-right: .7em;/*内側の余白（左）*/
    padding-left: .3em;/*内側の余白（右）*/
}

.sidebar .widget_archive .widgettitle:before {
    content: "\f017";/*アイコン変更*/
    padding-right: .7em;/*内側の余白（左）*/
    padding-left: .3em;/*内側の余白（右）*/
}

.sidebar .widget_recent_entries .widgettitle:before {
　content: "\f542";/*アイコン変更*/
    padding-right: .7em;/*内側の余白（左）*/
    padding-left: .3em;/*内側の余白（右）*/
}

.sidebar .widget_tag_cloud .widgettitle:before {
  content: "\f02c";/*アイコン変更*/
    padding-right: .7em;/*内側の余白（左）*/
    padding-left: .3em;/*内側の余白（右）*/
}

.sidebar .widget_categories .widgettitle:before {
    content: "\f542";/*アイコン変更*/
    padding-right: .7em;/*内側の余白（左）*/
    padding-left: .3em;/*内側の余白（右）*/
}

/*--------------------------------------
ウィジェットタイトルの文字サイズを変更
--------------------------------------*/
.widgettitle {
font-size: 17px ;
}

/*--------------------------------------
  ウィジェットアイコンを消す
--------------------------------------*/
.widgettitle:before {
    content: none!important;
}


/*--------------------------------------
  メニュー背景色変更
--------------------------------------*/

.desktop-nav ,.mobile-nav {
    background: #f55a22;
}
@media only screen and (min-width: 768px) {
  #inner-header {
    width: 100%;
  }
}

/*--------------------------------------
  コピーライト変更
--------------------------------------*/

#footer-menu:after {
    content: '© 2023 テストサイト All rights reserved.';
    display: block;
    color: #FFF;
    font-size: 0.9em;
}
.copyright.dfont {
    display: none;
}



/*--------------------------------------
  フッター色変更
--------------------------------------*/

.footer #footer-menu {
    background-color: #f55a22;
}

.footer #footer-menu a, .footer .copyright { color: #FFF; /* 文字色のコード */
}

/*ハンバーガーアイコン*/
#drawer .fa-bars{
 margin-top:0.8em;
 color: #f55a22;
}
#drawer .fa-bars:after {
 content: "メニュー ";
 font-size: 9px;
 padding-top:0.3em;
 font-weight: bold;
 display: block;
 letter-spacing:0.1em;
}

/*メニュー バッテンアイコンの色*/
.header .drawer__title .close span, .header .drawer__title .close span:before {
    background: #f55a22;
}



/*---スマホのハンバーガーMENUの文字の色---*/
.header .drawer__title {
color: #f55a22; /*「MENU」の文字色*/
}



/*---wd100と入れるとボタンが幅いっぱい---*/
#inner-content .wd100 {
    width: 100%;
    text-align: center;
}

/*---ボックス3の変更---*/
.box3 {
  margin: 2em 0;
  padding: 1em 1em 0.1em 1em;
  background: #edf6ff;
	  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.22);
  color: #2c2c2f;
	
	background:#ddd url(https://temporary-content20.work/wp-content/uploads/2020/03/test002.jpg) no-repeat center center;/*ここを追加しました*/
    background-size:cover;/*ここを追加しました(幅を合わせる)*/
}

/*---ボックスオリジナルの変更opacity: 0.5;---*/
.box14 {
  margin: 2em 0;
  padding: 1em 0.5em 0.5em 0.5em;
	
	background:#ddd url(https://temporary-content20.work/wp-content/uploads/2020/03/test002.jpg) no-repeat center center;/*ここを追加しました*/
    background-size:cover;/*ここを追加しました(幅を合わせる)*/
}


/*--------------------------------------
  トップページおすすめ(4コマセット)
--------------------------------------*/
#pickup{
  display:flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
  margin-top:0.5em;
  margin-bottom:2em;
}
#pickup .pickup_post{
  width:24%;
}
@media only screen and (max-width: 767px) {
  #pickup .pickup_post{
    width:48%;
    margin-bottom:1em;
  }
}
#pickup .pickup_post a img{
  box-shadow: 0 0 3px 0 rgba(0,0,0,.12), 0 2px 3px 0 rgba(0,0,0,.22);
  border-radius:2px;
  transition: .3s ease-in-out;
}
#pickup .pickup_post a img:hover{
  box-shadow: 0 13px 20px -3px rgba(0,0,0,.24);
}

/*トップページの見出し*/
h2.top_menu {
  border-left:none;
  background-color:#fff;
  color:#000;
  overflow: hidden;
  text-align: center;
}
h2.top_menu span {
  position: relative;
  display: inline-block;
  margin: 0 2.5em;
  padding: 0 1em;
  text-align: left;
}
h2.top_menu span::before,
h2.top_menu span::after {
  position: absolute;
  top: 50%;
  content: '';
  width: 400%;
  height: 1px;
  background-color: #000;
}
h2.top_menu span::before {
  right: 100%;
}
h2.top_menu span::after {
  left: 100%;
}
@media only screen and (max-width: 767px) {
  h2.top_menu {
    font-size:1em;
  }
}