/*
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.28
/*--------------------------------------
ここから下に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;
}
/*--------------------------------------
  見出しhhh1 hhh2 hhh3
--------------------------------------*/
.li-check {
    margin: 0;
}

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

.hhh1 {
  padding: 1rem 1.5rem;
  -webkit-transform: skew(-15deg);
  transform: skew(-15deg);
  color: #fff;
  background-image: -webkit-gradient(linear, left top, right top, from(#0099cc), to(#68e0cf));
  background-image: -webkit-linear-gradient(left, #0099cc 0%, #68e0cf 100%);
  background-image: linear-gradient(to right, #0099cc 0%, #68e0cf 100%);
}

.hhh2 {
  position: relative;
  padding: 1rem .5rem;
}

.hhh2:after {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 6px;
  content: '';
  border-radius: 3px;
  background-image: -webkit-gradient(linear, right top, left top, from(#2af598), to(#0099cc));
  background-image: -webkit-linear-gradient(right, #2af598 0%, #0099cc 100%);
  background-image: linear-gradient(to left, #2af598 0%, #0099cc 100%);
}

.hhh3 {
  position: relative;
  padding-left: 5.5em;
}

.hhh3 span {
  position: absolute;
  top: 0;
  left: 0;
  padding: 0 2rem;
  color: #fff;
  background: #0099cc;
}

.hhh3 span:after {
  position: absolute;
  top: calc(50% - 7px);
  right: -11px;
  width: 0;
  height: 0;
  content: '';
  border-width: 7px 0 7px 12px;
  border-style: solid;
  border-color: transparent transparent transparent #0099cc;
}
/*--------------------------------------
  フッターのリンクをボタン形式に変更
--------------------------------------*/
#footer-menu .footer-links a {
  font-size: 15px;
  background: #4b75d1;/*ボタンの色*/
  padding: 8px;/*ボタンの余白*/
  border-radius: 3px;
  text-decoration: none;
  color: #fff;/*ボタンの文字色*/
  box-shadow: 0 2px 3px rgba(0, 0, 0, .2), 0 2px 3px -2px rgba(0, 0, 0, .15);
  margin: -2px;
  font-weight: bold;
  text-decoration: none!important;
}
/*--------------------------------------
  アフィリエイトリンク用ボタン（赤）
--------------------------------------*/
.affilibtn-1 {
    background-color: #fb7d79; /* ボタン背景色 */
    color: #fff; /* ボタン文字色 */
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
    font-weight: bold;
    border-radius: 4px;
    max-width: 80%;
    margin: 0.5em auto;
    padding: 0;
    text-align: center;
    line-height: 1.4;
    transition: all .2s ease;
}

.affilibtn-1:hover {
    opacity: 0.8;
}

.affilibtn-1 a {
    text-decoration: none !important;
    color: #fff !important;
    display: block;
    margin: 0;
    padding: 0.5em;
    position: relative;
    overflow: hidden;
}

.affilibtn-1 a::before {
    display: block;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: scale(0) translateY(-50%) translateX(-50%);
    transform-origin: left top;
    border-radius: 50%;
    content: '';
    width: 10em;
    height: 10em;
    background-color: rgba(255, 255, 255, 50%);
    opacity: 0;
    animation: plzTap 3s ease-out 0s infinite;
}

@keyframes plzTap {
    from { transform: scale(0) translateY(-50%) translateX(-50%); opacity: 1; }
    15%, 100% { transform: scale(1) translateY(-50%) translateX(-50%); opacity: 0; }
}

.affilibtn-1 > img { float: left; }
.affilibtn-1::after{ content: ''; clear: left; }
/*--------------------------------------
  アフィリエイトリンク用ボタン（緑）
--------------------------------------*/
.affilibtn-2 {
    background-color: #61c359; /* ボタン背景色 */
    color: #fff; /* ボタン文字色 */
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
    font-weight: bold;
    border-radius: 4px;
    max-width: 80%;
    margin: 0.5em auto;
    padding: 0;
    text-align: center;
    line-height: 1.4;
    transition: all .2s ease;
}

.affilibtn-2:hover {
    opacity: 0.8;
}

.affilibtn-2 a {
    text-decoration: none !important;
    color: #fff !important;
    display: block;
    margin: 0;
    padding: 0.5em;
    position: relative;
    overflow: hidden;
}

.affilibtn-2 a::before {
    display: block;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: scale(0) translateY(-50%) translateX(-50%);
    transform-origin: left top;
    border-radius: 50%;
    content: '';
    width: 10em;
    height: 10em;
    background-color: rgba(255, 255, 255, 50%);
    opacity: 0;
    animation: plzTap 3s ease-out 0s infinite;
}

@keyframes plzTap {
    from { transform: scale(0) translateY(-50%) translateX(-50%); opacity: 1; }
    15%, 100% { transform: scale(1) translateY(-50%) translateX(-50%); opacity: 0; }
}

.affilibtn-2 > img { float: left; }
.affilibtn-2::after{ content: ''; clear: left; }
/*--------------------------------------
  アフィリエイトリンク用ボタン（青）
--------------------------------------*/
.affilibtn-3 {
    background-color: #516c9d; /* ボタン背景色 */
    color: #fff; /* ボタン文字色 */
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
    font-weight: bold;
    border-radius: 4px;
    max-width: 80%;
    margin: 0.5em auto;
    padding: 0;
    text-align: center;
    line-height: 1.4;
    transition: all .2s ease;
}

.affilibtn-3:hover {
    opacity: 0.8;
}

.affilibtn-3 a {
    text-decoration: none !important;
    color: #fff !important;
    display: block;
    margin: 0;
    padding: 0.5em;
    position: relative;
    overflow: hidden;
}

.affilibtn-3 a::before {
    display: block;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: scale(0) translateY(-50%) translateX(-50%);
    transform-origin: left top;
    border-radius: 50%;
    content: '';
    width: 10em;
    height: 10em;
    background-color: rgba(255, 255, 255, 50%);
    opacity: 0;
    animation: plzTap 3s ease-out 0s infinite;
}

@keyframes plzTap {
    from { transform: scale(0) translateY(-50%) translateX(-50%); opacity: 1; }
    15%, 100% { transform: scale(1) translateY(-50%) translateX(-50%); opacity: 0; }
}

.affilibtn-3 > img { float: left; }
.affilibtn-3::after{ content: ''; clear: left; }
/*--------------------------------------
  アフィリエイトリンク用ボタン（黄）
--------------------------------------*/
.affilibtn-4 {
    background-color: #ffbc61; /* ボタン背景色 */
    color: #fff; /* ボタン文字色 */
    box-shadow: 0 2px 5px 0 rgba(0,0,0,0.2);
    font-weight: bold;
    border-radius: 4px;
    max-width: 80%;
    margin: 0.5em auto;
    padding: 0;
    text-align: center;
    line-height: 1.4;
    transition: all .2s ease;
}

.affilibtn-4:hover {
    opacity: 0.8;
}

.affilibtn-4 a {
    text-decoration: none !important;
    color: #fff !important;
    display: block;
    margin: 0;
    padding: 0.5em;
    position: relative;
    overflow: hidden;
}

.affilibtn-4 a::before {
    display: block;
    position: absolute;
    z-index: 1;
    top: 50%;
    left: 50%;
    transform: scale(0) translateY(-50%) translateX(-50%);
    transform-origin: left top;
    border-radius: 50%;
    content: '';
    width: 10em;
    height: 10em;
    background-color: rgba(255, 255, 255, 50%);
    opacity: 0;
    animation: plzTap 3s ease-out 0s infinite;
}

@keyframes plzTap {
    from { transform: scale(0) translateY(-50%) translateX(-50%); opacity: 1; }
    15%, 100% { transform: scale(1) translateY(-50%) translateX(-50%); opacity: 0; }
}

.affilibtn-4 > img { float: left; }
.affilibtn-4::after{ content: ''; clear: left; }