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


/*--------------------------------------
  見出しh2
--------------------------------------*/
.entry-content h2{

}
.fa5 .entry-content h2:before {/*fontawesome5を使う場合*/
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
/*--------------------------------------
  見出しh3
--------------------------------------*/
.entry-content h3 {

}
.fa5 .entry-content h3:before {/*fontawesome5を使う場合*/
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}
/*--------------------------------------
  見出しh4
--------------------------------------*/
.entry-content h4 {

}
.fa5 .entry-content h4:before {/*fontawesome5を使う場合*/
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
}

/*--------------------------------------
  比較ボックス
--------------------------------------*/

.hikaku {
    justify-content: center;
    box-shadow: 0 3px 5px -1px rgba(0,0,0,0.2);
    margin: 2em 0;
}
p.hikaku-title {
    color: white;
    font-weight: 600;
    margin-bottom: 0;
    padding: .5em;
    text-align: center;
}

.my-bgc1 {
    background: #eb818f;
}

.my-bgc2 {
    background: #797979;
}

.my-bgc1-usume {
    background: #fef8f8;
}

.my-bgc2-usume {
    background: #f4f4f4;
}

@media (min-width: 600px){
.hikaku ul.my-bgc1-usume,　.hikaku ul.my-bgc2-usume {
    padding: 1em 1.5em;
}
}
	
.hikaku ul.my-bgc1-usume, .hikaku ul.my-bgc2-usume {
    padding: 0.5em 0.75em;
    margin: 0;
}


ul.is-style-sango-list-main-color>li, ul.is-style-sango-list-accent-color>li, .is-style-sango-list-main-color li ul>li, .is-style-sango-list-accent-color li ul>li {
    position: relative;
    padding: 0 0 0 18px;
    margin: 7px 0;
}

.hikaku .wp-block-column {
    margin-bottom: 0;
    flex-basis: 50%;
}

.hikaku-left {
    margin-left: 0!important;
}

/*--------------------------------------
  ココがポイントボックス
--------------------------------------*/
.kokoda {/*一番大外のグループ化ブロックの設定*/
    border-radius: 5px;/*角丸*/
    padding: 8px;/*内側上下左右の余白*/
    margin: 2em 0;/*外側上下の余白*/
}
.kokoda .wp-block-columns {/*カラムブロック全体の設定*/
    margin-bottom: 0;/*外側下の余白*/
}
.kokoda-1 {/*左のカラム*/
    flex-basis: auto;/*中の要素の幅になるように*/
    padding: 0 16px;/*内側左右の余白*/
    text-align: center;/*中央寄せ*/
}
.entry-content .kokoda-1 .wp-block-image {/*左のカラム内の画像のブロック*/
    margin: 0;/*外側の余白*/
}
.kokoda-1 .wp-block-image img {/*左のカラム内の画像*/
    max-width: 100px;/*最大の幅*/
    border-radius: 50%;/*丸く*/
    padding: 4px;/*内側の余白*/
}
.entry-content .kokoda-1 p {/*左カラムの段落ブロック*/
    margin: 8px 0;/*外側上下の余白*/
}
.kokoda-2 {/*右側のカラム*/
    flex: 1;/*横幅を可変*/
    background: white;/*背景色*/
    border-radius: 8px;/*角丸*/
}
body .kokoda-2  ul {/*右側のカラム内の箇条書き*/
    padding: 0;/*内側の余白*/
    list-style: none;/*箇条書きのマークを非表示*/
}
.kokoda-2 li {/*箇条書きの中身*/
    padding-left: 1.5em;/*内側左の余白*/
    position: relative;/*基準に設定*/
}
.kokoda-2 li:before {/*箇条書きのマーク*/
    content: "\f058";/*アイコン*/
    position: absolute;/*基準を元に位置を設定できるように*/
    font-family: "font awesome 5 free";/*アイコンの書式*/
    left: 0;/*左からの位置*/
}
.kokoda-2 ul li:not(:last-child) {/*箇条書きの中身について、ただし最後以外*/
    border-bottom: dotted 2px #f2f2f2;/*下線*/
}
.entry-content .kokoda-2 .is-style-sango-list-simple {/*箇条書きブロック（SANGO）*/
    border: none;/*線は無し*/
    padding: 0 1.2em;/*内側左右の夜はkう*/
    margin: 0.5em;/*外側の余白*/
}
@media (max-width: 599px){/*最大599pxまでの設定*/
.kokoda-1 {
    padding: 0;/*内側の余白*/
    display: flex;/*レイアウトを自由に設定できるように*/
    align-items: baseline;/*垂直方向の位置*/
    flex-direction: row-reverse;/*並び順を変更*/
    justify-content: flex-end;/*水平方向の位置*/
}
.entry-content .kokoda-1 p {
    margin: 8px 8px 16px;/*外側の余白*/
}
.kokoda-1 .wp-block-image img {
    max-width: 80px;/*最大の横幅*/
}}
@media (min-width: 782px){/*最小789pxまでの設定*/
.kokoda .wp-block-column:not(:first-child) {
    margin-left: 8px;/*外側左の余白*/
}}
.kokoda-2 li:before { color: #ff5353;}/*★★★箇条書きのマークの色★★★*/


/************************************
** スマホで見やすい比較表
************************************/
.comparison-table-wrap{
  width:100%;
  max-width:600px;
  margin: 0 auto 2em;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}
.comparison-table-title{
  background : linear-gradient(90deg, rgba(71, 206, 255, 1) 0%, rgba(56, 224, 248, 1) 100%);
  text-align: center;
   color: #fff;
   font-weight: bold;
   padding: 1em;
   letter-spacing: 1px;
  margin: 0;
  font-size:14px;
  box-shadow: 0 2px 5px rgba(100,100,100,0.1);
}
.comparison-table{
  background:#f8f9fb;
  margin:0;
  padding:0.3em 1em;
}
.comparison-table table{
  border-collapse: separate;
  border-spacing:5px 10px;
  border:none;
  margin-bottom: 0;
}
.comparison-table table th,.comparison-table table td {
  width:50%;
}
.comparison-table table thead th{
  background : #d1d1d1;
  border:none;
  color:#fff;
  box-shadow: 0 2px 5px rgba(100,100,100,0.1);
  padding: 0.8em 0.5em;
  line-height: 1.5;
  border-radius: 3px;
  font-size: 14px;
}
.comparison-table table tbody th{
  background : linear-gradient(90deg, rgba(71, 206, 255, 1) 0%, rgba(56, 224, 248, 1) 100%);
  text-align: center;
  color:#fff;
  border:none;
  border-radius:30px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  padding: 0.4em 1em;
  font-size: 14px;
  line-height: 1.3;
}
.comparison-table table tbody td{
  background:#fff;
  box-shadow: 0 2px 5px rgba(100,100,100,0.1);
  border-radius:3px;
  border:none;
  padding:1.2em;
  color: #555;
  line-height: 1.8;
  text-align:justify;
  vertical-align:top;
}
.comparison-table table tbody td p{
  margin:0;
  padding:0;
  margin-bottom:1em;
  font-size: 14px;
}
.comparison-table table tbody td .td-h{
  text-align:center;
  font-weight:bold;
  color:#33ccff;
  font-size: 16px;
  margin-bottom:7px;
}
@media screen and (max-width: 768px){
  .comparison-table{
    padding:7px;
  }
  .comparison-table table{
    border-spacing:3px 10px;
  }
  .comparison-table table thead th{
    position: -webkit-sticky;
    position: sticky;
    top:0px;
    z-index:100;
  }
}

/*アフィリエイトボタン用CSS*/
#inner-content .btn2{padding:0;margin:.5em .5em .5em 0}#inner-content .btn2 a{display:block;padding:.4em .8em}#inner-content .btn2 a:hover{display:block;text-decoration:none}.btn2.btntext a {color: inherit;}#inner-content .btn2.raised a{color:#fff}.btn2.flat1 a{color:#00bcd4}.btn2.flat1 a:hover{color:#fff}.btn2.flat2 a{color:#67c5ff}.btn2.flat2 a:hover{color:#fff}.btn2.flat3 a,.btn2.flat4 a,.btn2.flat5 a{color:#67c5ff}.btn2.flat4 a:hover{color:#679efd}.btn2.flat5 a:hover{color:#fff}.btn2.flat6 a{color:#668ad8}.btn2.flat6 a:hover{color:#fff}.btn2.flat7 a{color:#67c5ff}.btn2.flat8 a{color:#00bcd4}.btn2.flat9 a{color:#fff}.btn2.flat10 a{color:#ffa000}.btn2.flat10 a:hover{color:#fff}.btn2.flat11 a{color:#668ad8}.btn2.cubic1 a,.btn2.grad1 a,.btn2.grad2 a,.btn2.grad3 a,.btn2.grad4 a{color:#fff}#inner-content .btn2.emboss a{color:rgba(0,0,0,.4)}.btn2.text3d.blue-bc a{color:#4f9df4}.btn2.text3d.red-bc a{color:#f88080}.btn2.text3d.green-bc a{color:#90d581}.btn2.cubic2 a,.btn2.cubic3 a{color:#fff}.btn2 img{visibility:hidden;display:block;width:0;height:0;}/*END アフィリエイトボタン用CSS*/