/*
Theme Name:PORIPU tears for SANGO
Template:sango-theme
Theme Name:sango-theme-poripu
Theme URI:https://oldno07.com/poripu/
Author: マサオカ
Author URI:https://oldno07.com/
Description: SANGOの子テーマです。SANGO親テーマをインストールした状態で、本子テーマを適用してください。使い方は<a href="https://oldno07.com/poripu/">デモサイト</a>を御覧ください。
Version:1.23
/*--------------------------------------
ここから下にCSSを追加してください
poripu仕様の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;
}

/*-----------------------------------
 見出しデザイン変更h2
-----------------------------*/
.entry-content h2 {
  background: linear-gradient(transparent 80%, #6f4b3e 80%);
}
/*-----------------------------------
 見出しデザイン変更h3
-----------------------------*/
h3 {
  /*線の種類（二重線）太さ 色*/
  border-bottom: double 5px #6f4b3e;
}
.entry-content h3 {
border-left: none;
padding-left: 0;
}

/*-------------------
 吹き出し変更
-------------*/
/*--------------------------------------
  PORIPUtears　下に出る吹き出し
--------------------------------------*/
.saysprp {/*画像とふきだしを含めた全体*/
    position: relative;/*基準にする*/
}
.saysprp .faceicon span {/*名前部分*/
    position: absolute;/*自由に動けるように*/
    top: 80px;/*上から80px*/
    left: 100px;/*左から100px*/
    color: #999999;/*文字色*/
    font-size: 12px;/*文字のサイズ*/
    line-height: 20px;/*文字の高さ*/
    font-weight: 500;/*文字の太さ*/
}
.saysprp .fuki {/*吹き出し*/
    border: 2px solid #eaedf2;/*枠線*/
    margin: 1em 0 1.5em;/*外側の余白*/
}
.saysprp .fuki:before {/*吹き出しの三角部分*/
    left: 40px;/*左からの位置*/
}
.saysprp .fuki:after {/*吹き出しの尖ったアレ*/
    border-bottom-color: #eaedf2;/*枠線*/
    top: -11px;/*上からの位置*/
    left: 40px;/*左からの位置*/
}
@media only screen and (max-width: 480px){/*スマホ表示*/
.saysprp .faceicon span {/*名前の部分*/
    top: 60px;
    left: 80px;
}
.saysprp .fuki:before {/*吹き出しの三角部分*/
    left: 28px;
}
.saysprp .fuki:after {/*吹き出しの三角部分*/
    left: 28px;
}}
/*---Rinkerのデザイン変更---*/
div.yyi-rinker-contents {
    border: solid 2px #42424230;
    border-radius: 5px;
    box-shadow: none;
}
div.yyi-rinker-contents div.yyi-rinker-box {
    padding: .25em 0;
}
div.yyi-rinker-contents div.yyi-rinker-image {
    margin: 2%;
    width: 30%;
}
div.yyi-rinker-info {
    padding: 0 2%;
    width: 100%;
    margin: auto;
}
.yyi-rinker-title {
    font-size: 1em;
    margin-left: .5em;
}
div.yyi-rinker-contents div.yyi-rinker-title p {
    margin: 0;
}
div.yyi-rinker-contents div.yyi-rinker-detail {
    font-size: .8em;
    color: #42424280;
    padding-left: 0;
    margin-top: 0;
    margin-left: .5em;
}
div.yyi-rinker-contents div.yyi-rinker-detail .price-box {
    margin: .5em 0;
    margin-left: .5em;
}
div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price {
    letter-spacing: 0.1em;
    font-size: 1.2em;
    margin-right: .5em;
}
div.yyi-rinker-contents ul.yyi-rinker-links{
    display: inline-block;
}
div.yyi-rinker-contents ul.yyi-rinker-links li{
    width: 46%;
    padding: 0 .7em;
    margin: .5em .5em .4em .5em;
    font-size: .85em;
    display: inline-block;
    height: 40px;
    border-radius: 3px;
    box-shadow: 0 8px 10px -5px rgba(0,0,0,.25);
    font-weight: bold;
    vertical-align: middle;
    line-height: 40px;
    transition: .3s ease-in-out;
    text-align: center;
}

div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink {
    background: #FFC266;/*Amazonボタンの色*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li.amazonlink a {
    color: #3A4D66;/*Amazonボタン文字色*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li.rakutenlink{
    background: #ff7c74;/*楽天ボタンの色*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li.yahoolink {
    background: #95cad7;/*Yahoo!ショッピングボタンの色*/
}
div.yyi-rinker-contents ul.yyi-rinker-links li a{
    height: 40px;
    line-height: 40px;
    font-size: 0.95em;
    padding-left: 0px;
    padding-right: 0;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a:after{
    padding-left: 5px;
    font-family: "Font Awesome 5 Free";
    content: "\f138"!important; 
    right: auto;
}
@media screen and (max-width: 500px){/*スマホ表示用（ブレイクポイント500px）*/
div.yyi-rinker-contents div.yyi-rinker-box {
    padding: 0;
    display: block;
}
div.yyi-rinker-contents div.yyi-rinker-image {
    width: auto;
    max-width:50%;
    margin:2% auto;
}
div.yyi-rinker-contents div.yyi-rinker-box div.yyi-rinker-info {
    padding: 0;
    margin: auto;
    width: 87%;
    text-align: center;
}
.yyi-rinker-title {
    font-size: .95em;
　　text-align:left
}	
div.yyi-rinker-contents div.yyi-rinker-detail .price-box .price {
    display: block;
}
div.yyi-rinker-contents ul.yyi-rinker-links li {
	width: 85%;
	font-size: .9em;
        margin-top:2px;
}
body div.yyi-rinker-contents ul.yyi-rinker-links li a {
    padding: 0;
}
div.yyi-rinker-contents ul.yyi-rinker-links li a:after{
}}
@media screen and (min-width: 501px) and (max-width: 1239px){/*スマホとPCの中間くらい（ブレイクポイント501～1239px）*/
div.yyi-rinker-contents ul.yyi-rinker-links li{
    width:80%;
}}

/************************************
** 横長テーブルぽんひろスクロール表参考
************************************/
.p-sticky-table{
	white-space: nowrap;
	line-height:1.6;
}
.p-sticky-table table{
	border:none;
	border-left:1px solid #dedede;
	border-right:1px solid #dedede;
	border-bottom: 1px solid #dedede;
    border-collapse: collapse;
	word-break: break-all;
	table-layout: fixed;
	display:block;
	overflow:scroll;
}
.p-sticky-table th{
	background:#f0f9ff !important; /* 見出し背景色 */
	color: #666;/* 見出し文字色 */
	font-weight: 500 !important;/* 見出し文字太さ */
	font-size:13px !important; /* 見出し文字サイズ */
}
.p-sticky-table td{
	font-size: 13px !important; /* 文字サイズ */
	color:#555; /* 文字色 */
}
.p-sticky-table thead th:first-child,.p-sticky-table tbody th:first-child{
    position: -webkit-sticky;
    position: sticky;
    left: 0;
    z-index: 1;
	border:none;
}
.p-sticky-table tr{
	border-top:1px solid #dedede;
	border-bottom:none !important;
}
.p-sticky-table tr:last-child{
	border-bottom:1px solid #dedede;
}
.p-sticky-table th, .p-sticky-table td {
	vertical-align:middle !important;
	border: none !important;
	background:#fff;
	text-align:center;
	padding:12px !important;
}
.p-sticky-table img{
	margin:0;
	padding:0;
	max-width:70px !important; /* 画像最大サイズ */
}
/* スマホ */
@media screen and (max-width: 560px) {
	.p-sticky-table th{
		font-size:11px !important; /* スマホ見出し文字サイズ */
	}
	.p-sticky-table td{
		font-size: 11px !important; /* スマホ文字サイズ */
	}
	.p-sticky-table thead th:first-child,.p-sticky-table tbody th:first-child{
		white-space:normal;
		min-width:80px; /* スマホ見出し横幅 */
	}
	.p-sticky-table th, .p-sticky-table td {
		padding:8px !important;
	}
	.p-sticky-table img{
		max-width:50px !important; /* スマホ画像最大サイズ */
	}
}
/************************************
** 追加
************************************/
.p-sticky-table table {
  max-height: 80vh;
  border: 1px solid #dedede !important;
  word-wrap: break-word;
}
.p-sticky-table thead th:first-child {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  left: 0;
  z-index: 3;
}
.p-sticky-table thead th {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 2;
  text-align:center;
}
.p-sticky-table tbody th:first-child {
  white-space: normal;
  min-width: 130px;
}
.p-sticky-table th, .p-sticky-table td {
  min-width: 50px;
  text-align: left;
  font-size: 16px !important;
  position: relative;
  padding: 13px !important;
  color: #333;
  border: none !important;
  z-index: 0;
}
.p-sticky-table th {
  letter-spacing: 1px;
  color: #555 !important;
  font-weight:600 !important;
}
.p-sticky-table img {
  margin: 10px auto;
  display: block;
  padding: 0;
  max-width: 80% !important;
}
.p-sticky-table table th::before, .p-sticky-table table td::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  border-right: 1px solid #dedede;
  border-bottom: 1px solid #dedede;
  z-index: -1;
}
.p-sticky-table table, .p-sticky-table tr {
  border: none;
}
/* スマホ */
@media screen and (max-width: 560px) {
  .p-sticky-table table {
    max-height: 60vh;
  }
  .p-sticky-table thead th:first-child, .p-sticky-table tbody th:first-child {
    min-width: 25vw;
  }
  .p-sticky-table th, .p-sticky-table td {
    font-size: 12px !important;
    padding: 7px !important;
  }
}
/* 中央寄せ */
.pst-center td {
  text-align: center;
}
/*ぽんひろスクロール表終わり*/
/*コメント非表示設定20191127*/
.comment-form-email,.comment-form-url,.comment-notes{
	display:none;
}
/*終わり*/
/*for men 関連リンク横長*/
.linkto {
    position: relative;
    max-width: 1600px;
}
.linkto:before {
    position: absolute;
    content: "関連";
    top: 10px;
    left: 125px;
    display: inline-block;
    width: 47px;
    height: 27px;
    text-align: center;
    vertical-align: middle;
    background: #ff525290;
    font-size: 14px;
    line-height: 28px;
    color: white;
    letter-spacing: 3px;
    padding-left: 3px;
    border-radius: 2px;
}
.linkto:after {
    position: absolute;
    display: flex;
    height: 100%;
    padding: 0px 15px;
    content: "\f138";
    font-family: "Font Awesome 5 Free";
    top: 0px;
    right: 0px;
    font-size: 2.8em;
    color: #fff;
    background: #c0c0c0;
    align-items: center;
}
.linkto .tbtext {
    padding: 30px 62px 0px 14px;
    vertical-align: top;
    font-size: .95em;
	 background: #f5f5f5
}
/*--------------------------------------
  メリット・デメリット　BOX
--------------------------------------*/
.meritto, .demeritto {/*ブロックの枠*/
    position: relative;/*基準に設定*/
    padding: 0.8em 1em;/*内側の余白　上下0.8　左右1*/
    margin: 3em 0 2em;/*外側の余白　上3　左右0　下2*/
}
.meritto {/*メリットの枠線*/
    border: 3px solid #46bc63;
}
.demeritto {/*デメリットの枠線*/
    border: 3px solid #ff6e6e;
}
.meritto .box-title, .demeritto .box-title {/*タイトル部分*/
    position: absolute;/*基準をもとに自由に動かせるように*/
    top: -42px;/*上からの位置*/
    left: -3px;/*左からの位置*/
    color: white;/*文字色*/
    line-height: 32px;/*文字の高さ*/
    padding: 5px 13px 3px;/*内側の余白*/
    border-radius: 10px 10px 0 0;/*角丸　上2つだけ丸*/
}
.meritto .box-title {/*メリットのタイトル背景色*/
    background: #46bc63;
}
.demeritto .box-title {/*デメリットのタイトル背景色*/
    background: #ff6e6e;
}
.meritto .box-title:before, .demeritto .box-title:before {/*タイトルのアイコン*/
    margin-right: 10px;/*右側の余白*/
    font-size: 1.2em;/*アイコンの大きさ*/
}
.meritto .box-title:before {/*メリットのアイコン*/
    content: "\f599";
}
.demeritto .box-title:before {/*デメリットのアイコン*/
    content: "\f119";
}
.meritto ul, .demeritto ul {/*中の箇条書き*/
    list-style: none;/*●を消去*/
}
.meritto li, .demeritto li {/*中の箇条書きの中*/
    padding: .5em 0;/*上下の余白*/
}
.meritto li:before, .demeritto li:before {/*箇条書きの前にアイコン追加*/
    margin-left: -20px;/*左の余白*/
    margin-right: 10px;/*右の余白*/
}
.meritto li:before {/*メリットのアイコンと色*/
    content: "\f164";
    color: #46bc63;
}
.demeritto li:before {/*デメリットのアイコンと色*/
    content: "\f165";
    color: #ff6e6e;
}
.meritto li:before, .meritto .box-title:before, .demeritto li:before, .demeritto .box-title:before {/*アイコンの共通設定*/
    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;
}
.hikaku .wp-block-column {
    margin-bottom: 0;
    flex-basis: 50%;
}
.hikaku-left {
    margin-left: 0!important;
}
p.hikaku-title {
    color: white;
    font-weight: 600;
    margin-bottom: 0;
    padding: .5em;
    text-align: center;
}
.hikaku ul.my-bgc1-usume, .hikaku ul.my-bgc2-usume {
    padding: 0.5em 0.75em;
    margin: 0;
}
.hikaku p:empty {
    display: none;
}
@media (min-width: 600px){
.hikaku ul.my-bgc1-usume, .hikaku ul.my-bgc2-usume {
    padding: 1em 1.5em;
}}
.my-bgc1{ background: #ffc0cb}/*★変更場所★*/
.my-bgc2{ background: #afeeee}/*★変更場所★*/
.my-bgc1-usume{ background: #fffafa,}/*★変更場所★*/
.my-bgc2-usume{ background: #f8f8ff}/*★変更場所★*/