@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を記入していきましょう。*/

/* 追加cssここから */

/* ヘッダーaタグ分割調整 */
@media only screen and (max-width: 768px){
#logo {
    display: flex;
    justify-content: center;
    padding: 0;
}
#logo img {
    width: unset;
}
.new_header_link {
    display: flex !important;
    align-items: center;
}
.header-logo__link img{
    object-fit:contain;
}}
@media only screen and (max-width: 375px){
.header-logo__link{
   width:50%;
}}

.reference .video:before {
    display: block;
    color: #ffb36b;
    font-family: FontAwesome;
    font-size: 1.5em;
    content: "\f26c";
}

@media screen and (min-width: 769px)  {
.sp_only {
   display:none;
  }
}

/*SP時タイトル上PR調整*/
@media only screen and (max-width: 425px){
.entry-header .sponsored {
    position: unset;
    padding-right: 15px;
    margin-top: 15px;
}}

/*記事下PR表記調整*/
.sponsored.dfont{
	padding-right:15px;
}
@media only screen and (min-width: 481px){
.sponsored.dfont{
	padding-right:25px;
}}
@media only screen and (min-width: 1030px){
.sponsored.dfont{
	padding-right:40px;
}}

/* 前・次の記事削除 */
.prnx{
	display:none;
}

/* ヘッダーの高さ指定 */
.scroll-table table {
  display: block;
  overflow-x: scroll;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}

/* ヘッダーの高さ指定 */
.header {
	height: 62px;
   min-height: 62px;
}

#logo img {
	min-height: 50px;
}

/* 吹き出し */
.fukidashi {
  position: relative;
  display: inline-block;
  margin: 1.5em 0;
  padding: 10px;
  min-width: 200px;
  max-width: 100%;
  color: #fff;
  font-weight: bold;
  font-size: 16px;
  line-height: 24px;
  background: #ed8a70;
}

.fukidashi:before {
  content: "";
  position: absolute;
  top: 100%;
  left: 10%;
  border: 15px solid transparent;
  border-top: 15px solid #ed8a70;
}
.fukidashi p {
  margin: 0;
  padding: 0;
  text-align: center;
  color: #fff;
}
.home .header,
.mobile-nav ul,
.header-info a,
.post-tab,
.cardtype__article:nth-child(n+1),
.sidelong__article:nth-child(n+1),
#divheader {
animation:none;
}

/* 追加cssここまで */

.entry-content h2 {
   position: relative;
   padding: 0.5em;
   background: #ED8A70;/*背景色*/
   color: white;
}

.entry-content h2::before{
   position: absolute;
   content: '';
   top: 100%;
   left: 0;
   border: none;
   border-bottom: solid 15px transparent;
   border-right: solid 20px rgb(149, 158, 155)/*三角系の部分*/;
}

.entry-content h4 {
  position: relative;
  padding-left: 25px;
}

.entry-content h4:before {
  position: absolute;
  content: '';
  bottom: -3px;
  left: 0;
  width: 0;
  height: 0;
  border: none;
  border-left: solid 15px transparent;
  border-bottom: solid 15px #ED8A70;
}
.entry-content h4:after {
  position: absolute;
  content: '';
  bottom: -3px;
  left: 10px;
  width: 100%;
  border-bottom: solid 3px #ED8A70;
}

.entry-content p {
    margin: 1.6em 0 0.8em;
}

#logo a {
	font-size: 16px;
}

@media (max-width: 768px) {
#logo a {
	font-size: 14px;
}	
	#logo img {
		width: 170px;
        margin-top: 2px;
	}
	
}

/*--------------------------------------
  口コミボックス
--------------------------------------*/
.good, .ungood {/*ボックス共通部分*/
    border: 2px solid #f4f4f5;/*枠線*/
    color: #797979;/*文字色*/
    padding: 1.5em 1em;/*内側余白*/
    margin: 2em 0;/*外側余白*/
}
.good .box-title, .ungood .box-title {/*タイトル部分*/
    display: flex;/*配置しやすい種類に変更*/
    align-items: center;/*縦方向を真ん中に*/
    line-height: 1;/*行の高さ*/
    margin-bottom: 5px;/*外側　下の余白*/
}
.good .box-title, .good .box-title:before {/*タイトルとアイコンの色*/
    color: #fda359;/*文字色*/
}
.ungood .box-title, .ungood .box-title:before {/*タイトルとアイコンの色*/
    color: #4cb1bf;/*文字色*/
}
.good .box-title:before ,.ungood .box-title:before {/*アイコン*/
    font-family: "font awesome 5 free";/*種類*/
    margin-right: 5px;/*外側　右余白*/
    font-size: 1.7em;/*文字の大きさ*/
}
.good .box-title:before {/*メリットのアイコン*/
    content: "\f599";/*アイコンの種類*/
}
.ungood .box-title:before {/*デメリットのアイコン*/
    content: "\f5c8";/*アイコンの種類*/
}

/*太字*/
.bold {
	font-weight:bold;
}

/* 黄色マーカー*/
.ymarker {
	background: linear-gradient(transparent 60%, #FFF9C4 60%);
	padding: 0 2px;
}

/* 小文字にするとき用*/
.komoji {
	font-size: 14px;
}

/* ボックス用*/
.box28 .box-title {
  display: inline-block;
  line-height: 1.5;
  padding: 5px 9px 3px;
  border-radius: 5px 5px 0 0;
  background: #ED8A70;
  color: #fff;
  font-size: 17px;
}

.box28 .box-content {
  padding: 1.3em 1em;
  border: solid 3px #ED8A70;
}

.js-linktxt {
  color:#4f96f6;
  font-weight: bold;
  text-decoration: underline;
}

.m10 {
  margin-bottom: 10px;
}

.m20 {
  margin-bottom: 20px;
}

.related {
  text-align: center;
}
.related img {
  margin: 20px 0;
  width: 180px;
}

.entry-content table {
  margin-top: 1.5rem;
}

/* 目次デザイン 2019.2.25
---------------------------*/

#toc_container {
  font-family: "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
  margin-bottom: 40px;
  padding: 15px 20px;
  background: #fff!important;
  border: 5px solid #f2ecfb;
  border-radius: 2px;
  color: #ED8A70;
  width: 88%!important; }

#toc_container .toc_title {
  text-align: center;
  margin-bottom: 35px;
  margin-top: 0;
  padding-top: 0;
  color:#e2adc7;
  padding-bottom: 0px;
  font-size: 1.7em;
  border-bottom: 2px solid #e2adc7;
}
#toc_container span.toc_toggle a{
  font-size: 0.6em;
}

#toc_container .toc_list {
  list-style-type: none !important;
  counter-reset: li; }

#toc_container .toc_list > li {
  position: relative;
  margin-bottom: 15px;
  padding-top:2px;
  margin-left: 6px;
  line-height: 1.3em;
  font-size: 1em!important; }

#toc_container .toc_list > li:after {
  counter-increment: li;
  content: counter(li) ;
  position: absolute;
  left: -35px!important;
  top: 0px;
  background: none;
  font-size: 1.4em;
  letter-spacing: 0px;
  color: #e2adc7; }

#toc_container .toc_list > li a {
  text-decoration: none !important;
  color:#ED8A70; }

#toc_container .toc_list > li a:hover {
  text-decoration: underline !important; }

#toc_container .toc_list > li ul {
  list-style-type: disc;
  margin-top: 15px;
  padding-left: 20px;
  color: #e2adc7; }

#toc_container .toc_list > li > ul li {
  font-size: 1em;
  margin-bottom: 8px; }

@media only screen and (min-width: 641px) {
  #toc_container {
    padding: 25px 40px; }

  #toc_container .toc_title {
    font-size: 2em; }

  #toc_container .toc_list > li {
    margin-bottom: 18px;
    margin-left: 40px;
    font-size: 1em; }

  #toc_container .toc_list > li:after {
    left: -48px;
    top: 0px;
    font-size: 26px;
  }

  .pc{
    display: block;
  }
  .sp{
    display: none;
  }
}
@media only screen and (max-width: 640px) {
  #toc_container {
    width: 98%;
    padding: 15px 0px;
    margin: auto;
    margin-bottom: 20px;
  }
  #toc_container .toc_title {
    width: 95%;
    margin: auto!important;
  }
  #toc_container .toc_list > li {
    font-size: 1em!important;
  }
  #toc_container .toc_list > li:after {
    left: -25px!important;
  }
  #toc_container .toc_list > li {
    margin-left: 40px;
    margin-right: 10px;
  }
  #toc_container .toc_list > li ul {
    padding-left: 0px;
  }

  .pc{
    display: none;
  }
  .sp{
    display: block;
  }
	
	.related-box {
		flex-direction: column;
	}
}

.related-box {
	display: flex;
	justify-content: center;
}

.related img {
  margin: 8px 0;
  width: 160px;
}

.footer p {
	margin-right: 20px;
}

/* フッター */
@media screen and (max-width: 990px) {
#footer .pc {
  display: initial;
}
}
@media print, screen and (max-width:480px) {
#footer .pc {
  display: none;
}
}
@media screen and (max-width: 560px) {
#footer .sp {
  width: initial;
}
}
@media print, screen and (min-width:481px) {
#footer .sp {
  display: none;
}
}
#footer {
  font-family: "MyYuGothicM", MyYuGothicM, YuGothic, "Yu Gothic", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic ProN", -apple-system, BlinkMacSystemFont, Meiryo, sans-serif;
}
#footer ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
#footer.footer-container {
  margin-top: 20px;
  padding: 0 8px 8px;
  overflow: hidden;
}
@media print, screen and (min-width:481px) {
#footer .footer-inner.pc {
  overflow: hidden;
  width: 1162px;
  margin: 0 auto;
}
#footer .footer-about {
  font-size: 14px;
  min-width: 1164px;
  background: #0096db;
  line-height: 1.5;
}
#footer .about-inner {
  width: 1164px;
  margin: 0 auto;
  padding: 30px 0;
}
#footer .about-title {
  margin: 0 0 5px 30px;
}
#footer .list-link {
  transition: .2s ease;
  color: #fff;
  font-size: 11px;
  text-decoration: none;
}
#footer .about-title .list-link {
  font-size: 12px;
  font-weight: bold;
}
#footer .footer-list {
  display: table;
  width: 100%;
}
#footer .footer-list__box:first-child {
  border-left: 0;
}
#footer .footer-list__box--short {
  width: 231px;
}
#footer .footer-list__box {
  display: table-cell;
  position: relative;
  padding: 5px 0 5px 30px;
  border-left: #80cbed 2px dotted;
  box-sizing: border-box;
}
#footer .list-link {
  transition: .2s ease;
  color: #fff;
  font-size: 11px;
  text-decoration: none;
}
#footer .footer-sns {
  position: absolute;
  bottom: 5px;
  left: 30px;
}
#footer .footer-sns__item {
  margin-right: 3px;
  float: left;
}
#footer .footer-sns__btn {
  display: block;
  width: 70px;
  padding: 5px 0;
  transition: .2s ease;
  border-radius: 3px;
  background: #fff;
  color: #0096db !important;
  font-size: 10px;
  font-weight: bold;
  line-height: 1;
  text-align: center;
  text-decoration: none;
}
}
@media print, screen and (max-width:480px) {
#footer.footer-container {
  background-color: #f4f5f7;
  margin-top: 0;
  padding: 30px 16px 10px;
}
#footer .footer-inner.sp {
  display: block;
  margin-bottom: 30px;
  margin-top: 0;
  padding: 0;
  text-align: center;
  font-size: 12px;
}
#footer .footer-inner.sp ul {
  width: 350px;
}
#footer .footer-inner.sp ul li {
  display: inline;
  margin: 0 20px;
}
#footer .footer-inner.sp ul li a {
  color: #999;
  font-size: 11px;
}
}