@charset "UTF-8";
/*
 Theme Name: SANGO Child
 Theme URI: https://saruwakakun.design
 Author: SARUWAKA
 Author URI: https://saruwakakun.com
 Template: sango-theme
 Version: 3.0
*/
/*こちらはSANGOの子テーマ用CSSです。以下にCSSを記入していきましょう。*/
/*ロゴ画像を横いっぱいに*/
#inner-header, #drawer + #inner-header, #logo {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
}
.header--center #logo img {
    padding: 0;
    height: auto;
    width: 100%;
    max-width: 1000px;
}
.header--center #logo {
    padding: 0;
    background: #28385e;
}

@media only screen and (min-width: 1030px) {
    .single #logo img, .page #logo img {
        max-width: 92%;
    }
}

@media only screen and (min-width: 1240px) {
    .single #logo img, .page #logo img {
        max-width: 1180px;
    }
}
/*END ロゴ画像を横いっぱいに*/

/*--------------------------------------
  目次　変更　参考：https://for-men.jp/mkj-custom-2/#CSS-2
--------------------------------------*/
#toc_container {/*目次全体*/
    margin: 0 0 2em 0;/*外側の余白設定*/
    padding: 0;/*内側の余白を0に*/
    border-color: #6a91c1!important;/*枠線の色*/
    border: solid 2px;/*枠線の種類と幅*/
    border-top: none;/*上線削除*/
    border-radius: 3px;/*角をちょっとだけ丸く*/
    background: var(--wp--preset--color--sango-pastel);/*背景色*/
    box-shadow: none;/*影を削除*/
}
#toc_container .toc_title {/*目次のタイトル*/
    display: block;/*段落に*/
    margin: 0;/*外側の余白を削除*/
    padding: 0;/*内側の余白を削除*/
    font-size: 18px;/*文字の大きさ*/
    line-height: 42px;/*行の高さ*/
    font-weight: bold;/*太文字*/
    background: #6a91c1;/*背景色*/
    text-align: center;/*中央揃え*/
    color: white!important;/*文字の色*/
}
#toc_container .toc_title:before {/*タイトル前のアイコン*/
    display: none;/*消し消し*/
}
#toc_container .toc_list {/*目次のコンテンツ*/
    margin: 0;/*外側の余白削除*/
    color: #424242de;/*文字の色*/
    padding: 1em 6% 1em 10%;/*内側の余白調整*/
    position: relative;/*基準に設定*/
}
#toc_container .toc_list li a {/*アンカーリンクの設定*/
    color: #424242b3;/*文字色*/
    display: block;/*横いっぱいまでリンクにする*/
}
#toc_container .toc_list li a:hover {/*マウスホバーしたとき*/
    text-decoration: none;/*下線を表示しない*/
    opacity: .5;/*うっすら透明に*/
}
#toc_container ul {/*箇条書き*/
    list-style-type: decimal;/*番号に変更*/
    color: #424242b3!important;/*文字の色*/
}
@media only screen and (min-width: 481px){/*PC表示*/
#toc_container {
    padding: 0;/*内側の余白を削除*/
}}
/*END 目次変更*/


/*FROM 見出し変更*/

.entry-content h2:not(.sgb-heading) {
    margin: 2.5em 0 0.7em;
    font-size: 1.2em;
    line-height: 1.6;
    background-color: var(--wp--preset--color--sango-main);
    padding: 0.5em;
    color: white;
}

.entry-content h3:not(.sgb-heading)  {
    background-color: #6b92c224;
}

.entry-content h4:not(.sgb-heading)  {
    font-size: 1.2em;
    padding: 0.25em 0;
    margin: 2.5em 0 1em;
    line-height: 1.4;
    display: block;
}

.entry-content h4:not(.sgb-heading):after {
    display: block;
    height: 4px;
    background: linear-gradient(to right, #6bb6ff, rgba(255, 255, 255, 0));
    content: "";
}

/*END見出し変更*/

/*FROM  sangoボックス内のul,olをまくりん風に変更*/
.sgb-box-simple__body ul li, .sgb-box-simple__body ol li {
    list-style-type: none !important;
    position: relative;
}

.sgb-box-simple__body ul li:before {
    font-family: 'Font Awesome 5 Free';
    position: absolute;
    top: 50%;
    left: -29.5px;
    transform: translateY(-50%);
    width: 25px;
    height: 25px;
    line-height: 1;
    background-position: center;
    background-repeat: no-repeat;
    background-size: 25px;
    content: '\f058';
    color: #F8BF39;
    font-size: 22px;
    font-weight: 900;
}

.sgb-box-simple__body ol li:before {
    position: absolute;
    content: counter(list-item);
    display: inline-block;
    background: #F8BF39;
    color: #fff;
    font-weight: 700;
    font-size: 15px;
    border-radius: 50%;
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    left: -31px;
    width: 23px;
    height: 23px;
    line-height: 22px;
    text-align: center;
}
/*TO sangoボックス内のul,olをまくりん風に変更*/

/*FROM ポチップのボタン文字を太文字に変更　まくりん風に*/
.pochipp-box .pochipp-box__btns {
    font-weight: 600;
}
/*TO ポチップのボタン文字を太文字に変更　まくりん風に*/