@charset "UTF-8";

/*!
Theme Name: Cocoon Child
Description: Cocoon専用の子テーマ
Theme URI: https://wp-cocoon.com/
Author: わいひら
Author URI: https://nelog.jp/
Template:   cocoon-master
Version:    1.1.3
*/
/* ================================ */
/* タグリンク画像 */
.tag_link_container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.telephone {
    margin: 0 40px 40px 0;
}
.telephone, .face {
    width: calc((100% - 260px) / 2);
}
/* 電話占い◎◎で本当に当たる先生◎選！口コミ評価・得意占術まで徹底調査しましたページ */
h3.uranaisi-name p {
    display: none;
}
h3.uranaisi-name .rating {
    float: right;
    display: flex;
    font-size: 1rem;
}
ol.toc-list.open .rating {
    display: none;
}
/* ===== 占い師比較表 ===== */
.table_container {
    position: relative;
    margin: 0;
    padding-bottom: 60px;
}
/* スクロール表示 */
.table_contents {
    overflow-x: scroll;
    overflow-y: hidden;
}
table.horizontal, table.vertical {
    min-width: 1000px;
    width: 100%;
    margin: 0;
}
/* 項目文字色 */
table.horizontal th,table.vertical th {
    color: #ff858e;
}
/* 先生の名前 */	
a.name_link_bt {
    color: #666;
}
/* リンクボタン色 */
a.ta_link_bt {
    display: block;
    background: -webkit-gradient(linear, left top, left bottom, from(#FF858E), to(#F64459), color-stop(.2, #FF858E));
    color: #fff;
    padding: 0 5px;
}
/* スクロール項目固定 */
td.teacher,th.teacher,table.horizontal th {
	position: sticky;
    left: 0;
    z-index: 2;
}
td.teacher::before,th.teacher::before,table.horizontal th::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border-left: solid 1px #ffb3a780;
  border-right: solid 1px #ffb3a780;
}
/* ------ 横 ----- */
table.horizontal th {
    width: 5%;
	background:#fff3f2;
}
table.horizontal td {
    padding: 10px;
    text-align: center;
}
/* ----- 縦 ----- */
th.teacher{
	background:#fff3f2;
}
td.link_bt {
    text-align: center;
}
table.vertical td {
    padding: 10px;
}
td.teacher,th.teacher {
	width: 15%;
	text-align:center;
	background: #fff;
}
th.teacher{
	background:#fff3f2;
}
td.teacher img {
    width: 60%;
}
/* 続きを見るボタン */
.table_container label {
    position: absolute;
    display: table;
    left: 50%;
    bottom: 0px;
    margin: 0 auto;
    width: 200px;
    padding: 5px 0;
    color: #fff;
    text-align: center;
    border-radius: 5px;
    background-color: #f74d60;
    transform: translateX(-50%);
    cursor: pointer;
    z-index: 1;
}

.table_container label::before{
  content: '続きを見る';
}

.table_container input[type="checkbox"]:checked ~ label::before {
  content: '元に戻す';
}

.table_container input[type="checkbox"]{
  display: none;
}

.readmore_bt{
    position: relative;
    height: 550px;
/*     overflow: hidden; */
}

.table_container input[type="checkbox"]:checked ~ .readmore_bt{
  height: auto;
}
/* ========================== */
a{
	text-decoration: none!important;
}
.mobile-category{
	display:none;
}
/* パンくず */
.breadcrumbs {
    font-size: 0.8rem;
    color: #999999;
}
.breadcrumbs a {
    color: #999;
}
span.breadcrumbs-icon {
    font-size: .8rem;
    margin: 0 10px;
}
.page.page-id-7504 .breadcrumbs{
	display:none;
}

/* ----- おすすめ占い師 ----- */
.best-uranaisi-list {
    display: flex;
    justify-content: center;
}
.best-uranaisi-list-contents {
    width: 100%;
}
.best-uranaisi-list-contents:nth-child(2n) {
    margin: 0 10px;
}
/* 画像 */
.best-uranaisi-list-image img {
/*     height: 150px; */
    object-fit: cover;
    width: 100%;
}
/* タグ */
/* 名前 */
.best-uranaisi-list-name {
    text-align: center;
    color: #f98c63;
    border-bottom: 2px solid;
    border-top: 2px solid;
}
/* 詳細リンク */
.best-uranaisi-detail-button a {
    display: block;
    text-align: center;
    background: #C88DFE;
    color: #fff;
    margin: 10px 0;
    padding: 5px 0;
    border-radius: 50px;
    border: 2px solid;
    transition: 0.3s;
}
.best-uranaisi-detail-button a:hover {
    background: #fff;
    color: #C88DFE;
}
/* 公式リンク */
.best-uranaisi-schedule-button a {
    display: block;
    text-align: center;
    background: linear-gradient(to bottom, #f8b3c7, #d36899);
    color: #fff;
    padding: 10px 0;
    border-radius: 5px;
    transition: 0.3s;
    border: 2px solid #f8b3c7;
}
.best-uranaisi-schedule-button a:hover {
    background: #fff;
    color: #d36899;
}

/* ----- こんな記事も読まれてます ----- */
.random-post {
    display: flex;
    flex-wrap: wrap;
}
.randam-section {
    width: calc(90%/3);
    margin: 10px;
    padding-bottom: 10px;
}
.randam-section  img {
    object-fit: cover;
    height: 150px;
    width: 100%;
}
h2.randam-section-title {
    padding: 5px 0px;
    margin: 0px 0 15px 0;
    font-size: 1.3em;
    background: none;
    border-bottom: 2px solid;
    color: #666;
}
p.post-title {
    margin: 0;
}
/* ================== フロントページ ================== */

.main {
  z-index: 1;
}
/* ピックアップ記事 */
h2.pickup-title {
    text-align: center;
    background: none;
    padding: 10px 0;
    border-top: 2px solid;
    border-bottom: 2px solid;
    color: #FFB3A7;
}
.pickup-contents {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    margin-top: 40px;
}
.post_home {
    /* border: 1px solid #ccc; */
    /* padding: 10px; */
    margin-bottom: 20px;
    width: calc(95% / 3);
}
.item1 img {
    object-fit: cover;
    height: 180px;
    width: 100%;
}
.post_home a:hover {
    opacity: 0.5;
    transition: 0.3s;
}
/* 記事タイトル */
.title{
	color:#666;
}
/* h2装飾 */
/* ベース */
.title-img {
    display: inline-block;
    position: relative;
    padding: 0px 95px 0px;
    height: 100%;
}
.title-img:before, .title-img:after {
    content: "";
    position: absolute;
    top: 2%;
    display: inline-block;
    width: 80px;
    height: 40px;
}
.title-img:before {
    left: 0px;
    background: url(https://spirichan.com/wp-content/uploads/2024/11/pickup装飾-左.png);
    background-repeat: no-repeat;
    background-size: contain;
}
.title-img:after {
    right: 0px;
    background: url(https://spirichan.com/wp-content/uploads/2024/11/pickup装飾-右.png);
    background-repeat: no-repeat;
    background-size: contain;
}
/* 新着記事タイトル装飾 */
h2.new-title {
    text-align: center;
    background: #FFB3A7;
    color: #fff;
    padding: 10px 0;
}
.title-img.new_articles:before {
    left: 0px;
    background: url(https://spirichan.com/wp-content/uploads/2024/05/pickup-装飾-白-左.png);
    background-repeat: no-repeat;
    background-size: contain;
}
.title-img.new_articles:after {
    right: 0px;
    background: url(https://spirichan.com/wp-content/uploads/2024/05/pickup-装飾-白-右.png);
    background-repeat: no-repeat;
    background-size: contain;
}
/* ランキングタイトル装飾 */
.title-img.ranking {
    padding: 0px 45px 0px;
}
.title-img.ranking:before,.title-img.ranking:after {
    width: 32px;
}
.title-img.ranking::before {
    left: 0px;
    background: url(https://spirichan.com/wp-content/uploads/2024/05/王冠.png);
    background-repeat: no-repeat;
    background-size: contain;
}
.title-img.ranking:after {
    right: 0px;
    background: url(https://spirichan.com/wp-content/uploads/2024/05/王冠.png);
    background-repeat: no-repeat;
    background-size: contain;
}
/* 目次ランキング装飾非表示 */
ol.toc-list.open li a .title-img.ranking::before,ol.toc-list.open li a .title-img.ranking::after{
	display:none;
}
ol.toc-list.open li a .title-img.ranking{
	padding:0;
}
/* トップおすすめタグ */
.tag-container {
    background: #fff5f3;
    padding: 10px;
    border-radius: 3px;
    /* box-shadow: 0 0 4px 1px #7f5d02; */
    border: 2px solid #FFB3A7;
}
h2.tag-title {
    font-size: 1.2em;
    border-bottom: 2px solid;
    margin-bottom: 10px;
    padding: 0px 0px 5px;
    color: #FFB3A7;
    /* display: inline-block; */
    background: none;
    /* border-radius: 5px; */
}
ul.tag-list {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
}
ul.tag-list li a {
    padding: 0 5px;
    margin: 0px 3px;
    color: #ff8571;
    border: 1px solid;
    display: inline-block;
    border-radius: 5px;
    background: #ffffff;
}
/* ----- 占い師ランキング ----- */
.uranaisi-ranking-wrapper {
    margin: 60px 0;
}
/*占い師*/
h2.uranaisi-ranking-title {
	padding:10px 0;
    text-align: center;
    background: none;
    border-top: 2px solid;
    border-bottom: 2px solid;
    color: #FFB3A7;
	margin:0;
}
.uranaisi-list {
    display: flex;
    overflow-x: auto;
    list-style: none;
}
.uranaisi-list-contents {
margin: 0 5px;
    position: relative;
}
/* 占い師画像サイズ */
.uranaisi-list-image img {
    height: 150px;
    object-fit: cover;
    width: 100%;
}
/*エンブレム*/
span.emblem {
    position: absolute;
    width: 2em;
	left: 5px;
    top: 5px;
}
span.emblem img {
    height: auto;
    box-shadow: none;
}
/*占い師の名前*/
.uranaisi-list-name {
    text-align: center;
    background: #FFB3A7;
    color: #fff;
    /* font-size: 15px; */
    padding: 2px 0;
}
/*占い師詳細*/
ul.uranaisi-detai-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
ul.uranaisi-detai-list li {
    border-bottom: 1px solid #FFB3A7;
}
/*PRテキスト*/
span.uranaisi-pr-text {
    text-align: center;
    width: 100%;
    display: block;
    margin: 15px auto;
    color: #FF7A6A;
}
/*所属会社*/
ul.uranaisi-detai-list li p {
    margin: 5px 0 5px 0;
    display: inline-block;
	color: #FFB3A7;
}
span.uranaisi-detail {
    color: #FFB3A7;
}
/*詳細ページリンクボタン*/
.detail-button a {
    display: block;
    text-align: center;
    background: #fff;
    color: #B3A7FF;
    margin: 10px 0;
    padding: 0px 0;
    border-radius: 50px;
    border: 2px solid;
    transition: 0.3s;
}
.detail-button a:hover {
    background: #B3A7FF;
    color: #fff;
}
/*スケジュールリンクボタン*/
.schedule-button a {
    display: block;
    width: 210px;
    text-align: center;
    background: linear-gradient(to bottom, #ff858e, #f64459);
    color: #fff;
    padding: 10px 0px;
    border-radius: 5px;
    margin-bottom: 20px;
    transition: 0.3s;
    border: 2px solid #ff858e;
    font-weight: bold;
}
.schedule-button a:after {
    content: "\f35d";
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    margin-left: 3px;
}
.schedule-button a:hover {
    background: #fff;
    color: #d36899;
}

/* ===== 占い師口コミページ =====*/
.schedule-button a.fortune_review {
    margin: auto;
    background: linear-gradient(to bottom, #ff858e, #f64459);
    font-weight: bold;
    font-size: 1em;
    width: 32%;
	position:relative;
}
.schedule-button a.fortune_review:hover{
	color:#f64459;
	background:#fff;
}
.schedule-button a.fortune_review:after {
    content: "\f04b";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    right: 13px;
    top: 22px;
}
/* スライダー 矢印 */
.uranaisi-list .prev.icochan.i-left.slick-arrow:after, .uranaisi-list .next.icochan.i-right.slick-arrow:after {
    text-align: center;
    background: #ffffff;
    color: #FFB3A7;
    width: 35px;
    border-radius: 50px;
    height: 35px;
    font-size: 0.7em;
    border: 2px solid;
}
/*新薬記事*/
.new-entry-cards.widget-entry-cards.no-icon.cf {
    display: flex;
    flex-wrap: wrap;
}
.new-entry-cards.widget-entry-cards.no-icon.cf a {
    width: calc(95% / 2);
    display: block;
    margin-right: 2%;
}
.new-entry-cards.widget-entry-cards.no-icon.cf a:nth-child(2n) {
    margin-right: 0;
}
/* ====================================== */
/* ------ カテゴリーページタイトル ------ */
.archive-title {
    color: #ffb3a7;
    border-bottom: 2px solid;
}
/* アイコン */
h1#archive-title:before {
    
    font-family: 'Font Awesome 6 Free';
    display: inline-block;
    margin-right: 5px;
}
/* 占い・スピリチュアル */
body.archive.category.category-fortune.category-3 h1#archive-title:before{
	content: "\f186";
}
/* 恋愛 */
body.archive.category.category-love.category-4 h1#archive-title:before{
	content: "\f004";
}
/* 美容・健康 */
body.archive.category.category-beautyhealth.category-5 h1#archive-title:before{
	content:"\f4d8";
}
/* おでかけ */
body.archive.category.category-spot.category-6 h1#archive-title:before{
	content: "\f5e4";
}
/* デフォルトのアイコン非表示 */
.archive-title span {
    display: none;
}
/* ====== 口コミの特徴 ====== */
.review-feature {
    display: flex;
    justify-content: center;
    text-align: center;
}
.review-feature-text {
    width: 100px;
    height: 6.5em;
    border-radius: 100%;
    margin: 0 10px;
    padding: 6px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 14px;
	font-weight: bold;
    box-shadow: 0 2px 5px 0 #bbb;
    color: #ffffff;
}
/* 各丸の色 左から01,02,03 */
.review-feature-text{
	background: linear-gradient(to bottom,#ffb8f1 10%,#ffb8b8 100%);
}
.review-feature-text.color02 {
}
.review-feature-text.color03 {
}
/* ====== 占い師の特徴 ====== */
.menubtn,.menubtn-coupon {
	width:100%;
    margin: 0 5px;
    box-shadow: 0 0 4px 0 #999;
    border-radius: 3px;
    cursor: pointer;
}
.menubtn img,menubtn-coupon img {
    object-fit: cover;
    height: 170px;
}
span.text {
    margin: 5px 5px 5px;
    display: block;
}
/* 画像 */
.feature-list {
    display: flex;
    justify-content: space-around;
}
/* ====== 占い師の特徴内容-スライダー ====== */
/* 特徴内容 非表示 */
.feature-wrap,.feature-coupon-wrap{
	/*opacity:0; */
/* 	 height:0; */
	display:none;
}

/* 画像をクリックで表示 */
.feature-indication,.feature-indication-coupon{
/*     opacity: 1;*/
/*     height: auto;  */
	display:block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 1;
    background: #00000080;
    margin: 0;
	overflow-y: scroll;
}

/* 枠 */
.feature-main-contents {
    top: 190px;
    position: relative;
    width: 100%;
}
/* 特徴リスト */
ul.feature-main-contents-list,ul.feature-coupon {
    /* display: flex; */
/*     align-items: center; */
    /* text-align: center; */
    width: 800px;
    margin: auto;    
	background: #fff;
	border-radius: 5px;
	padding-left:0px;
}
li.feature {
    padding: 30px;
}
/* 閉じるアイコン */
.feature-main-contents-close {
	width: 50px;
    position: absolute;
    top: 0;
    right: 0px;
    text-align: center;
    font-size: 1.5em;
    cursor: pointer;
    color:#777;
}
/* 特徴内容画像 */
.feature-photo {
    float: left;
    width: 55%;
}
.feature-photo img {
    object-fit: cover;
    height: 270px;
}
/* 特徴内容 */
.feature-explanation {
    float: right;
    width: calc(100% - 320px - 7rem);
}
/* タイトル */
.feature-title {
    border-bottom: 1px solid;
    font-weight: bold;
	margin-top:10px;
}
/* テキスト */
span.feature-text {
    display: block;
    margin-top: 10px;
}
/* スライダー */
#uranaisi-slider-content ul .slick-arrow {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: #e6b2be;
    color: #fff;
    position: absolute;
    top: 40%;
    z-index: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}
/* スライダー画像サイズ */
.uranaisi-slider-image img {
    object-fit: cover;
    width: 100%;
    height: 150px;
}
/* スライダー矢印 左 */
.prev.icochan.i-left.slick-arrow {
	width: 22%;
	height: calc(100% - 0.4rem);
	position: absolute;
	top: 0;
    left: -180px;
    font-size: 2.5em;
    color: #fff;
	cursor:pointer;
}
.prev.icochan.i-left.slick-arrow:after {
    content: "\f104";
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
	position: absolute;
    top: 140px;
    left: 2.5em;
}
.prev.icochan.i-left.slick-arrow:hover {
    color: #a57800;
}
/* スライダー矢印 右 */
.next.icochan.i-right.slick-arrow {
	width: 22%;
	height: calc(100% - 0.4rem);
	position: absolute;
	top: 0;
    right: -180px;
    font-size: 2.5em;
    color: #fff;
	cursor:pointer;
}
.next.icochan.i-right.slick-arrow:after {
    content: "\f105";
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
	position: absolute;
    top: 140px;
    right: 2.5em;
}
.next.icochan.i-right.slick-arrow:hover {
    color: #a57800;
}
/* ================ */
/* ====== 占い師クーポン-スライダー ===== */
/* 大きいタイトル文字 */
.coupon-title {
    text-align: center;
    font-size: 1.5em;
    font-weight: bold;
    color: #ed0d0d;
    margin-bottom: 20px;
    border-bottom: 2px solid #ed0d0d;
}
/* 小さいタイトル文字 */
.coupon-title1 {
    text-align: center;
    font-size: 1em;
    font-weight: bold;
    color: #ed0d0d;
	margin-bottom: 0px;
}
/* スライダー下の文字 */
span.text1 {
    margin: 5px 5px 5px;
    display: block;
    font-weight: bold;
    color: #f9860b;
	text-align:center;
}
/* 画像 */
.menubtn.js-navList.coupon img {
    height: auto;
}
/* 店舗名 */
span.top-text {
    display: flex;
    align-items: center;
    padding: 7px 0 8px 8px;
    border-bottom: 2px solid #ccc;
}
span.top-text p {
    display: inline-block;
    margin: 0;
    padding: 10px 0 0 5px;
/*     font-size: 1.1em; */
    font-weight: bold;
    color: #666;
}
img.crown {
    box-shadow: none;
/* 	display:none; */
}

/* --- クーポン詳細 --- */
/* 画像 */
.feature-photo.coupon {
    width: auto;
}
.feature-photo.coupon img {
    height: auto;
}
/* テキスト */
.feature-explanation.coupon {
    width: calc(100% - 175px - 7rem);
}
/* クーポンリンクボタン */
span.coupon-link {
    display: block;
    margin-top: 10px;
	padding-top: 10px;
    border-top: 1px solid;
}
span.coupon-link p {
	display: inline-block;
    margin: 0;
    font-weight: bold;
    color: #db4949;
}
span.coupon-link a {
    display: inline-block;
    color: #ffffff;
    background: linear-gradient(to bottom,#f17b7c 30%,#dd5252 100%);
    padding: 0 8px;
    border-radius: 3px;
    box-shadow: 0px 2px 0 0 #6d1213;
	font-weight:bold;
}
/* --------- クーポン誘導タイトル --------- */
.feature-title2 {
    border-bottom: 1px solid;
    font-weight: bold;
    margin-top: 10px;
    background: #ffd228;
}

/* ================================ */
/* ====== ランキング-TOP3 ====== */
.ranking-top3-box {
    width: 100%;
	margin-bottom: 30px;
}
.ranking-top3-header {
    align-items: center;
    border-bottom: 1px solid #ccc;
    margin-bottom: 20px;
    position: relative;
}
span.numeral-image {
    display: inline-block;
    position: absolute;
    bottom: -7px;
}
span.numeral-image img {
    box-shadow: none;
}

/* 先生の名前 */
.name {
    display: flex;
    justify-content: space-between;
    align-items: end;
}
span.name-text {
	display:inline-block;
    font-size: clamp(1.2rem, 1.109rem + 0.52vw, 1.5rem);
    font-weight: bold;
	margin-left:clamp(3.8rem, 2.727rem + 0.36vw, 3rem)
}
span.name-text p {
    margin: 0;
	line-height:1.2;
}
/* キャッチコピー */
span.catchcopy {
    display: inline-block;
	padding: 3px 5px 0;
    margin-bottom: 10px;
    background: #e1984b;
    color: #fff;
    border-radius: 3px;
    font-size: 0.8rem;
}
/* レーティング */
.rating {
    font-size: 13px;
    font-weight: bold;
}
/* ======レーティング星====== */
span.rating {
/*     font-weight: bold; */
    color: #666;
	display:inline-block;
}
span.rating:after{
	display:none;
}
.star5_rating{
    position: relative;
    z-index: 0;
    display: inline-block;
    white-space: nowrap;
    color: #CCCCCC; /* グレーカラー 自由に設定化 */
    /*font-size: 30px; フォントサイズ 自由に設定化 */
}

.star5_rating:before, .star5_rating:after{
    content: '★★★★★';
}

.star5_rating:after {
    position: absolute;
    margin: 0;
    z-index: 1;
    top: -1px;
    left: 0;
    overflow: hidden;
    white-space: nowrap;
    color: #ff8732;
}
.star5_rating[data-rate="5"]:after{ width: 100%; } /* 星5 */
.star5_rating[data-rate="4.5"]:after{ width: 90%; } /* 星4.5 */
.star5_rating[data-rate="4"]:after{ width: 80%; } /* 星4 */
.star5_rating[data-rate="3.5"]:after{ width: 70%; } /* 星3.5 */
.star5_rating[data-rate="3"]:after{ width: 60%; } /* 星3 */
/* 内容 */
.ranking-top3-contents {
    display: flex;
    justify-content: center;
}
/* 先生の画像 */
.ranking-top3-contents .image {
    margin-right: 20px;
}
/* 詳細 */
.detail {
    width: 70%;
}
.detail p {
    margin-bottom: 10px;
/* 	font-size:clamp(0.75rem, 0.674rem + 0.43vw, 1rem); */
}
/* 口コミ */
.review {
    margin-bottom: 10px;
    padding: 10px;
    background: #fde9e9;
}
span.review-title {
    display: inline-block;
    margin-bottom: 10px;
    padding: 0px 15px;
    border-radius: 3px;
    background: #f79bab;
    color: #fff;
    font-weight: bold;
/*     font-size:clamp(0.8rem, 0.739rem + 0.35vw, 1rem); */
}
/* 口コミ丸アイコン */
span.review-title:before {
    content: "\f4ad";
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    display: inline-block;
    margin-right: 5px;
}
.review p{
	margin-bottom:0;
}

/* 口コミ女性アイコン */
.icon2 {
    display: flex;
    align-items: start;
  /*  background: #fff0f0; */
    padding: 10px 10px 15px;
}
.name2 {
  /* font-weight:bold; */
	color:#666;
	font-size: 13px;
/* 	margin-top: 1em; */
/*     margin-left: 1em; */
}

.icon2 .text2 {
    position: relative;
    display: inline-block;
    margin: 0px 0 0 20px;
    padding: 10px 10px;
    min-width: 120px;
    max-width: 90%;
    color: #555;
    font-size: 16px;
    background: #fff;
    border-radius: 10px;
    border: 2px solid #aaa;
    width: 100%;
}

.icon2 .text2:before {
    content: "";
    position: absolute;
    top: 31px;
    left: -23px;
    margin-top: -13px;
    border: 12px solid transparent;
    border-right: 12px solid #ffffff;
    z-index: 2;
}

.icon2 .text2:after {
    content: "";
    position: absolute;
    top: 30px;
    left: -28px;
    margin-top: -14px;
    border: 14px solid transparent;
    border-right: 14px solid #aaa;
    z-index: 1;
}

.user {
    text-align: center;
    width: 90px;
}

.kakoi2 {
    margin-left: -10px;
    /* margin-bottom: 0px; */
}

/* リンクボタン */
.link-button {
    /* display: flex;
    justify-content: center; */
    margin-top: 20px;
    text-align: center;
}
.link-button a {
    position: relative;
    display: inline-block;
    border-radius: 50px;
    font-weight: bold;
    padding: 5px 35px 0px;
    box-shadow: 0px 2px 5px 0 #a1a1a1;
    transition: .3s;
}
.link-button a:hover {
    transform: translateY(3px);
    box-shadow: none;
}
/* リンクアイコン */
.link-button a:after {
    position: absolute;
    content: "\f054";
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    display: inline-block;
    right: 15px;
}
/* 左リンク */
a.detail-button {
    background: linear-gradient(to bottom,#ffffff 24%,#e9e9e9 90%);
    color: #6c7387;
    border: 1px solid;
    margin-right: 10px;
}
/* 右リンク */
.kousiki-button-link {
    display: inline-block;
}
/*ボタン上煽り*/
.aori {
    display: block;
    font-weight: bold;
    font-size: 15px;
    color: #f52525;
}
a.kousiki-button {
    background: linear-gradient(to bottom,#90aaf9 24%,#6889eb 90%);
    color: #fff;
}
a.kousiki-button span.fas.fa-external-link-alt.external-icon.anchor-icon {
    display: none;
}
/* ====================================================== */
/* --------- サイトマップ --------- */
ul.wsp-posts-list {
    list-style: none;
    padding: 0;
}
strong.wsp-category-title {
    /* border-bottom: 1px solid #a57800; */
    display: block;
    margin: 20px 0 10px 0;
	padding: 3px 10px 0;
    color: #ffffff;
    background: #b8b6f2;
}
strong.wsp-category-title a {
    color: #fff;
}
li.wsp-post {
	position: relative;
    border-bottom: 1px solid #ccc;
    padding: 10px 0px 10px 15px;
}
li.wsp-post:before {
	display: block;
	content: "";
	width: 5px;
    height: 5px;
	position: absolute;
	top: 40%;
    left: 0;
    border-radius: 50px;
    background: #666;
}
ul.wsp-posts-list li.wsp-post a {
    color: #666;
}
ul.wsp-posts-list li.wsp-post a:hover {
    color: #b8b6f2;
}
/************************************
** 新しいサイドバー
************************************/
a{
	text-decoration: none;
}
.sidebar h3 {
  background: none;
  font-size: 16px;
  letter-spacing: 2px;
  display: inline-block;
  position: relative;
  width: 100%;
  padding: 0;
  text-align: center;
  color: #FFB3A7; /* サイドバータイトルの色を指定 */
}
.sidebar h3::before,
.sidebar h3::after {
  content: "";
  position: absolute;
  top: 50%;
  width: 28%;
  border-top: 3px solid #FFB3A7; /* サイドバータイトル横のバーの色を指定 */
}
.sidebar h3::before {
  left: 0;
}
.sidebar h3::after {
  right: 0;
}
.widget_categories ul li a {
  color: #333;
  text-decoration: none;
  padding: 6px 0;
  display: block;
  padding-right: 4px;
  padding-left: 4px;
  border-top: 1px dotted #ccc;
  font-size: 16px;
}
.widget_categories ul li a::before {
  font-family: "Font Awesome 5 Free";
  content: "\f07b";
  padding-right: 10px;
}
.widget_categories > ul > li > a:first-child {
  border-top: none;
}
.widget_categories > ul > li > a:last-child {
  border-bottom: 1px dotted #b9b6f2;
}
.widget_categories ul li a .post-count {
  display: block;
  float: right;
  background: #fff;
  padding: 0 1em;
  font-size: 14px;
  margin-top: 0.2em;
  border-radius: 4px;
}
.widget_categories ul li a:hover {
  background: none;
  transition: 0.5s;
  color: #ffc679;
}
.widget_categories ul li a:hover .post-count {
  background: #ffc679;
  color: #fff;
  transition: 0.5s;
}
.widget_categories ul li ul {
  border-bottom: 1px dotted #ccc;
}
.widget_categories ul li ul li a {
  color: #333;
  text-decoration: none;
  padding: 0 4px 4px 4px;
  display: block;
  border: none;
}
.widget_categories ul li ul li a::before {
  font-family: "Font Awesome 5 Free";
  content: "\f105";
  padding-right: 0.45em;
  font-weight: bold;
}
.author-box .sns-follow-buttons a.follow-button {
  background-color: #fff;
  color: black;
  border: 0px;
}
.author-box {
  border: 0px;
}
.author-box p {
  margin-top: 0.3em;
  line-height: 1.6;
}
.author-box p a {
  text-decoration: none;
}
.author-box p a:hover {
  text-decoration: underline;
  color: #008cee; /* プロフィールにリンクを貼っている場合, ホバーした際の色指定 */
}
/* スマホサイドバー設定 */
#sidebar .author-box {
  border: none;
  border-radius: 4px;
  margin: 1em 0;
  line-height: 1.4;
  position: relative;
  padding: 1.4% 2% 1.8%;
}
#sidebar .author-thumb {
  float: none;
  width: 100%;
  margin: 9px auto 0;
  height: 0;
  padding-top: 75px;
  position: relative;
}
#sidebar .author-thumb img {
  border: 3px dashed #ffc679;
  width: 35%;
  padding: 6px;
  margin: 0 auto;
  position: absolute;
  left: 0;
  right: 0;
  bottom: -25%;
}
#sidebar .author-content {
  margin-top: 16%;
  font-size: 0.9em;
}

.box26 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #95ccff;
    border-radius: 8px;
}
.box26 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #95ccff;
    font-weight: bold;
}
.box26 p {
    margin: 0; 
    padding: 0;
}

.btn-square {
  display: inline-block;
  padding: 0.5em 1em;
  text-decoration: none;
  background: #ff9933;/*ボタン色*/
  color: #fff;
  border-bottom: solid 4px #ff9123;
  border-radius: 3px;
}
.btn-square:active {
  /*ボタンを押したとき*/
  -webkit-transform: translateY(4px);
  transform: translateY(4px);/*下に動く*/
  border-bottom: none;/*線を消す*/
}

/************************************
** 子テーマ用のスタイルを書く（追加CSS）
************************************/
/*必要ならばここにコードを書く*/
/* 関連記事 */
.a-wrap {
    border-bottom: 1px solid #ccc;
}
/* ページネーション */
span.page-numbers.current {
    background: #ffb3a7;
    color: #fff;
}
a.page-numbers:hover,a.pagination-next-link.key-btn:hover {
    background: #ffb3a7;
	color:#fff;
}
/* モバイル-navimenu */
li.menu-item.menu-item-type-custom {
	background:#ffb3a7;
}
ul.sub-menu {
    background: #fff;
    padding-bottom: 10px;
}
ul.sub-menu a {
    color:#666!important;
}
ul.sub-menu li {
    border-bottom: 1px dotted #a57800;
    padding: 5px 0;
}
/* モバイルカテゴリーメニュー */
.mobile-category {
    background:#a19ef7;
    padding: 7px 0;
    margin-top: 10px;
}
.mobile-category ul {
    display: flex;
    list-style: none;
    justify-content: space-around;
    text-align: center;
}
.mobile-category ul li {
    width: 100%;
    line-height: 1.2;
}
/* リンク */
.mobile-category ul li a {
    color: #fff;
    font-weight: bold;
}
/* テキスト */
.mobile-category ul li p {
    font-size: 12px;
    margin-top: 5px;
}
/* アイコン */
span.nav-icon {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: auto;
    background: #fff;
    color: #a19ef7;
    padding-top: 6px;
    border-radius: 99px;
}
.mobile-category ul li:first-child span.nav-icon, .mobile-category ul li:last-child span.nav-icon{
    padding-top: 4px;
}
/* -------------------------- */
/* #navi .navi-in > .menu-mobile li { 
    display: flex;
    padding-left: 15px;
}
.navi .item-label{
	margin-left:10px;
}
.hlt-tm-right .navi-in > ul li:before{
	color: #fff;
} */
/* sp メニューアイコン */
/* 月
ul.sub-menu .fa-moon:before {
    color: #d7a8f9;
}
/* ハート
ul.sub-menu  .fa-heart:before{
	color: #f9a8a8;
}
/* 植物 
ul.sub-menu  .fa-seedling:before{
	color: #a8f9af;
}
/* 車 
ul.sub-menu  .fa-car-side:before{
	color: #a8aaf9;
}*/
li.menu-item.menu-item-type-custom a {
    color: #fff;
    display: inline-block;
}
ul.sub-menu li a {
    font-weight: 100;
    line-height: 1.5;
}
/* モバイルヘッダー背景色 */
ul.mobile-header-menu-buttons.mobile-menu-buttons.has-logo-button {
    background: #FFB3A7;
}
/* モバイルメニュー アイコンカラー*/
li.search-menu-button.menu-button,.has-logo-button .menu-button {
    color: #fff;
} 
li.menu-item.menu-item-type-custom:before {
    color: #fff;
	padding-left:10px;
}
/* トップページ 記事 */
 div#list a:hover,.widget-entry-cards .a-wrap:hover { 
    opacity: 0.5;
}
/* カテゴリ-ラベル */
.cat-label {
	position:static;
}
a.entry-card-wrap.a-wrap.border-element.cf {
    border-bottom: 1px solid #cccc;
}
/* new設定 */
span.new {
    position: absolute;
    top: 0.3em;
    left: 0.3em;
    border: 1px solid #eee;
    font-size: 11px;
    color: var(--cocoon-white-color);
    background-color:#d72727;
    padding: 1px 5px;
    max-width: 80%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
/* ---------------------------------------- */
/* 	hタグcss */
.article h1{
	
}
.article h2{
	
}
.article h3{
	border-right:none;
	border-top:none;
}
.article h4{
	
}
.article h5{
	
}
.article h6{
	
}
/* ====== 投稿ページ====== */
/* 各タイトル設定 */
h2.title02{
	background: #cb964800;
  position: relative;
  padding: 0.25em 0;
}
h2.title02:after {
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, rgb(230, 90, 90), transparent);
	background: linear-gradient(to right, rgb(230, 90, 90), transparent);align-content
}

/* 各タイトル設定2 */
h2.title03 {
    background: #cb964800;
    position: relative;
    padding: 0.25em 0;
    text-align: center;
}
h2.title03:after {
  content: "";
  display: block;
  height: 4px;
  background: -webkit-linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
  background: linear-gradient(to right, rgb(255, 186, 115), #ffb2b2);
}

/* 羽 */
.pic {
    text-align: center;
    margin: 40px 0 0 0;
}
h3.pickup-gold {
    border: none;
    text-align: center;
    position: relative;
    display: inline-block;
    padding: 0 77px;
	margin:0;
}
h3.pickup-gold :after {
    content: "";
    position: absolute;
    top: -30px;
    right: -15px;
    background: url(https://spirichan.com/wp-content/uploads/2023/06/羽-右-ゴールド-影.png) no-repeat center center;
    display: inline-block;
    width: 90px;
    height: 90px;
    background-size: contain;
    /* color: #000; */
}
h3.pickup-gold :before {
    content: "";
    position: absolute;
    top: -31px;
    left: -15px;
    background: url(https://spirichan.com/wp-content/uploads/2023/06/羽-左-ゴールド-影-.png) no-repeat center center;
    display: inline-block;
    width: 90px;
    height: 90px;
    background-size: contain;
}
/* ---------------------------- */
h4{
	text-align:center;
	margin-top:20px;
}

/* ------ 特典項目 ------ */
.privilege dl {
    border: 2px solid #ffb3a7;
	background: #ffb3a7;
    border-radius: 5px;
    width: 50%;
    margin: auto;
}
/* 項目タイトル */
.privilege dl dt {
    float: left;
    width: 7em;
    padding: 5px 5px;
    font-weight: bold;
    color: #ffffff;
    background: #ffb3a7;
    border-top: 1px solid;
}
/* 項目内容 */
.privilege dl dd {
    padding: 5px 0px 5px 5px;
    border-bottom: 1px solid #ffb3a7;
    background: #fff;
    margin-left: 7em;
}
.privilege dl dt:first-child {
    border-top: none;
}
.privilege dl dd:last-child{
	border-bottom:none;
}
/* ----------------- 何選ページ ----------------- */
/* 羽 */
h3.pickup-vertical {
    background: #fff;
    border: none;
    position: relative;
    display: inline-block;
    padding: 0 65px;
}
h3.pickup-vertical :after {
    content: "";
    position: absolute;
    top: -15px;
    right: 11px;
    background: url(https://spirichan.com/wp-content/uploads/2023/06/羽縦-右-ゴールド.png) no-repeat center center;
    display: inline-block;
    width: 50px;
    height: 50px;
    background-size: contain;
    /* color: #000; */
}
h3.pickup-vertical :before {
    content: "";
    position: absolute;
    top: -15px;
    left: 10px;
    background: url(https://spirichan.com/wp-content/uploads/2023/06/羽縦-左-ゴールド.png) no-repeat center center;
    display: inline-block;
    width: 50px;
    height: 50px;
    background-size: contain;
}
/* ------------- リンクボタン ------------- */
/* 相談ボタン */
.soudan-botton {
	text-align: center;
    margin-bottom: 20px;
}
.soudan-botton a {
    display: inline-block;
    position: relative;
    text-align: center;
/*     font-size: 1.3em; */
    font-weight: bold;
    border-radius: 5px;
    background: #16d17d;
    color: #fff;
    padding: 5px 8%;
    text-decoration: none;
    /* border: 2px solid #168570; */
    box-shadow: 0 3px 8px 0 #979797;
    overflow: hidden;
}

/* 相談ボタン2 */
.soudan-botton2 {
	text-align: center;
    margin-bottom: 20px;
}
.soudan-botton2 a {
    display: inline-block;
    position: relative;
    text-align: center;
/*     font-size: 1.3em; */
    font-weight: bold;
    border-radius: 5px;
    background: #ff506f;
    color: #fff;
    padding: 5px 8%;
    text-decoration: none;
    /* border: 2px solid #168570; */
    box-shadow: 0 3px 8px 0 #979797;
    overflow: hidden;
}

/* 赤ボタン */
a.soudan-botton-red {
    background: #e91f2d;
	box-shadow:none;
}
.soudan-botton a:after {
    content: "\f04b";
    font-family: "Font Awesome 5 Free";
    position: absolute;
    right: 10px;
    top: 21px;
}

/* リンクボタン上 煽り */
.aori02 {
    text-align: center;
    font-weight: bold;
    font-size: 16px;
    color: #e70c0c;
    margin: 0;
    overflow: hidden;
    position: relative;
}

/* リンクボタン上 煽り灰色文字 */
.aori05 {
    text-align: center;
    font-weight: bold;
    font-size: 12px;
    color: #696969;
    margin: 0.2em;
}

/* リンクボタン上 煽り 文字サイズ大 */
.aori04 {
    text-align: center;
    font-weight: bold;
    font-size: 17px;
    color: #e70c0c;
    margin: 0;
    overflow: hidden;
    position: relative;
}

/* ボタン下煽り */
.aori03 {
    text-align: center;
   /* font-weight: bold; */
    color: #817d7d;
    margin: 1px auto;
}

/* 画像下の改行無効 */
.kakoi {
    margin-bottom: 0;
}
/* リンクボタン 角丸 */
/* solid015 */
.button_solid015 {
    text-align: center;
	margin:50px 0;
	margin-bottom: 0;
}
.button_solid015 a {
    position: relative;
    display: flex;
    justify-content: space-around;
    align-items: center;
    margin: 0 auto;
    max-width: 250px;
    padding: 10px 15px 10px 0;
    color: #FFF;
    transition: 0.3s ease-in-out;
    font-weight: 600;
    background: #e53d50;
    filter: drop-shadow(0px 2px 4px #bbb);
    border-radius: 50px;
}
.button_solid015 a:hover {
    transform: translateY(-2px);
    box-shadow: 0 15px 30px -5px rgb(0 0 0 / 15%), 0 0 5px rgb(0 0 0 / 10%);
}
 .button_solid015 a:after { 
    position: absolute;
    top: 50%;
    right: 20px;
    transition: 0.2s ease-in-out;
    content: "\f0da";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    transform: translateY(-54%);
}
span.button-text {
	display: block;
    margin-top: 10px;
    font-weight: bold;
    color: #e53d50;
	font-size:0.9em;
}
.button_solid015 a span.external-icon {
    position: absolute;
    right: 17px;
}
.button_solid015 span.external-icon,.privilege-button span.external-icon,.soudan-botton span.external-icon{
	display:none;
}
/* 次の記事へ リンク */
.next-link a {
    font-weight: bold;
    color: #f56aa3;
}
.next-link a:hover {
    opacity: 0.5;
}
/* 次の記事へ リンク2 */
.next-link2 a {
    font-weight: bold;
    color: #fb9889;
}
.next-link2 a:hover {
    opacity: 0.5;
}
/* リンクボタン四角 */
.button {
    text-align: center;
    display: flex;
}
.privilege-button{
    width: 100%;
    margin: auto 1%;
}

.privilege-button a {
    display: block;
    position: relative;
    padding: 3px 25px;
    color: #fff;
    font-size: 1.2em;
    overflow: hidden;
    box-shadow: 0 2px 5px 0 #999;
}
/* リンクアイコン */
.privilege-button a:before{
    content: "\f105";
    font-family: 'Font Awesome 5 Free';
    font-weight: bold;
    position: absolute;
    left: 15px;
    top: 30%;
}
.privilege-button a:hover{
	transition:0.3s;
}
/* ボタンキラキラアニメーション */
.button-animation:after,.aori02:before,a.soudan-botton-red:before,.aori04:before{
	position: absolute;
	content: '';
	display: inline-block;
	top: -180px;
	left: 0;
	width: 30px;
	height: 100%;
	background-color: #fff;
	animation: shiny-btn1 3s ease-in-out infinite;
}
@-webkit-keyframes shiny-btn1 {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}

/* 文字点滅アニメーション */
.blinking{
	-webkit-animation:blink 1.5s ease-in-out infinite alternate;
    -moz-animation:blink 1.5s ease-in-out infinite alternate;
    animation:blink 1.5s ease-in-out infinite alternate;
}
@-webkit-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@-moz-keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}
@keyframes blink{
    0% {opacity:0;}
    100% {opacity:1;}
}

/* リンクボタン立体 */

/* 縦バナー内ボックス */
.box16{
    padding: 10px 10px 5px;
    margin: 1em 0;
    background: -webkit-repeating-linear-gradient(-45deg, #f5f5f5, #f5f5f5 3px,#e6e6fa 3px, #e6e6fa 7px);
    background: repeating-linear-gradient(-45deg, #f5f5f5, #f5f5f5 3px,#e6e6fa 3px, #e6e6fa 7px);
}
.box16 p {
    margin: 0; 
    padding: 0;
}
/* ---------------------------------------------------------- */
/* 外部リンク ボタンカラー設定 */
/* ゴールド */
a#gold{
	background: #a57800;
	border: 2px solid #a57800;
}
a#gold:hover{
	background:#fff;
	color:#a57800;
}
/* ----------------- */
/* グリーン */
a#green{
	background: #6e9452;
	border: 2px solid #6e9452;
}
a#green:hover{
	background:#fff;
	color:#6e9452;
}
/* ----------------- */
/* 内部リンク ボタンカラー設定 */
/* レッド */
a#red{
	background: #cb1313;
	border: 2px solid #cb1313;
}
a#red:hover{
	background:#fff;
	color:#cb1313;
}
/* ----------------- */
/* ブルー */
a#blue{
	background: #525d94;
	border: 2px solid #525d94;
}
a#blue:hover{
	background:#fff;
	color:#525d94;
}
/* ----------------- */
/* 段落 */
span.br {
    display: block;
}
/* クーポン */
.coupon-text {
	padding:20px;
    border: 1px solid #eed13f80;
    background: #fefdf5;
}
/* ------------------------------------ */
/* 引用デザイン*/
blockquote {
    position: relative;
    padding: 10px 15px 10px 50px;
    box-sizing: border-box;
    font-style: italic;
    border: solid 2px #464646;
    color: #464646;
}

blockquote:before{
    display: inline-block;
    position: absolute;
    top: 20px;
    left: 15px;
    content: "\f10d";
    font-family: FontAwesome;
    color: #77c0c9;
    font-size: 25px;
    line-height: 1;
    font-weight: 900;
}

blockquote p {
    padding: 0;
    margin: 10px 0;
    line-height: 1.7;
}

blockquote cite {
    display: block;
    text-align: right;
    color: #888888;
    font-size: 0.9em;
}
blockquote.instagram-media:before, blockquote.instagram-media:after{
display:none;
}
/* --------------------------------- */
.box17{
    margin:2em 0;
    position: relative;
    padding: 0.5em 1.5em;
    border-top: solid 2px black;
    border-bottom: solid 2px black;
}
.box17:before, .box17:after{
    content: '';
    position: absolute;
    top: -10px;
    width: 2px;
    height: -webkit-calc(100% + 20px);
    height: calc(100% + 20px);
    background-color: black;
}
.box17:before {left: 10px;}
.box17:after {right: 10px;}
.box17 p {
    margin: 0; 
    padding: 0;
}

.box26 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #f0939f;
    border-radius: 8px;
}
.box26 .box-title {
    position: absolute;
    display: inline-block;
    top: -13px;
    left: 10px;
    padding: 0 9px;
    line-height: 1;
    font-size: 19px;
    background: #FFF;
    color: #f0939f;
    font-weight: bold;
}
.box26 p {
    margin: 0; 
    padding: 0;
}

.balloon2-left {
  position: relative;
  display: inline-block;
  margin: 1.5em 0 1.5em 15px;
  padding: 7px 10px;
  min-width: 120px;
  max-width: 100%;
  color: #555;
  font-size: 16px;
  background: #FFF;
  border: solid 3px #555;
  box-sizing: border-box;
  border-radius: 15px;
}

.balloon2-left:before {
  content: "";
  position: absolute;
  top: 50%;
  left: -24px;
  margin-top: -12px;
  border: 12px solid transparent;
  border-right: 12px solid #FFF;
  z-index: 2;
}

.balloon2-left:after {
  content: "";
  position: absolute;
  top: 50%;
  left: -30px;
  margin-top: -14px;
  border: 14px solid transparent;
  border-right: 14px solid #555;
  z-index: 1;
}

.balloon2-left p {
  margin: 0;
  padding: 0;
}

.box8 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #232323;
    background: #fff8e8;
    border-left: solid 10px #ffc06e;
}
.box8 p {
    margin: 0; 
    padding: 0;
}
/* amazon-リンクボタン */
.amazon-button{
	text-align:center;
}
.btn-square-pop {
  position: relative;
  display: inline-block;
  padding: 0.5em 0.5em;
  text-decoration: none;
  color: #FFF;
  background: #fd9535;/*背景色*/
  border-bottom: solid 2px #d27d00;/*少し濃い目の色に*/
  border-radius: 4px;/*角の丸み*/
  box-shadow: inset 0 2px 0 rgba(255,255,255,0.2), 0 2px 2px rgba(0, 0, 0, 0.19);
  font-weight: bold;
}

.btn-square-pop:active {
  border-bottom: solid 2px #fd9535;
  box-shadow: 0 0 2px rgba(0, 0, 0, 0.30);
}
.amazon-button a:hover {
    color: #814610;
}

/* ツインレイ関連記事 */

.kanren {
    display: flex;
    align-items: center;
    color: #333;
    font-size: 1.2em;
    font-weight: bold;
    margin: 0.6px;
}
.kanren::before,
.kanren::after {
content: "";
height:3px;
  flex-grow: 1;
  width:50px;
background-color:#f6f738;
/*   aline-items: center; */
  margin: 0 auto;
}
.kanren:before {
margin-right: 10px;
}
.kanren:after {
margin-left: 10px;
}


/* -------広告上の文字外部リンク----------- */

.koukoku {
    text-align: center;
    margin: 0;
    color: #0b082b;
    text-decoration: underline;
}

.koukoku2 {
    text-align: center;
    font-size: 15px;
    font-weight: bold;
    margin-bottom: 0;
	color: #696969;
}
/* ----------------------------- */
.box29 {
	margin: 2em 0em;
	background: #dcefff;
	padding: 0 0 40px;
}
.box29 .box-title {
    font-size: 1.2em;
    background: #5fb3f5;
    padding: 8px 4px;
    text-align: center;
    color: #FFF;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box29 p {
    padding: 15px 20px;
    margin: 0;
}
.box29 .box-image {
    text-align: center;
}
.box29 .button .privilege-button span.br{
	display:inline-block;
}
.box29 .button .privilege-button a:before {
    top: 10%;
}
img.alignleft {
    margin: 1em 1em 0;
}

/* -----------ピュアリ用----------------- */

.box29-2 {
	margin: 2em 0em;
	background: #fdf2f2;
	padding: 0 0 35px;
}
.box29-2 .box-title {
    font-size: 1.1em;
    background: #ffd8f8;
    padding: 8px 4px;
    text-align: center;
    color: #ff0039;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box29-2 p {
    padding: 15px 20px;
    margin: 0;
    text-align: left;
}
.box29-2 .box-image {
    text-align: center;
}
.box29-2 .button .privilege-button span.br{
	display:inline-block;
}
.box29-2 .button .privilege-button a:before {
    top: 10%;
}
img.alignleft {
    margin: 1em 1em 0;
}

/* -----------すぴりちゃん編集部用------------------ */
.box29-1 {
    margin: 2em 0em;
    padding: 20px 0;
	text-align:center;
	background: #ffedea;
}
.box29-1 .box-title {
    font-size: 1.2em;
/*     padding: 8px 4px; */
    color: #5f5a5a;
    font-weight: bold;
    letter-spacing: 0.05em;
}
.box-contents {
    display: flex;
    justify-content: center;
/*     padding: 15px 0; */
}
.box-text {
    margin-left: 20px;
}
.box29-1 p {
    padding: 10px 0px;
    margin: 0;
    text-align: left;
}
.supirichan-1 {
    font-size: 1.2em;
    font-weight: bold;
    color: #5f5a5a;
    display: inline-block;
    position: relative;
    left: -12%;
}

/* ----------------------------- */

.box20 {
    position: relative;
    padding: 0.25em 1em;
    margin: 2em 0;
    top: 0;
    background: #ffffff;
}
.box20:before, .box20:after{ 
    position: absolute;
    top: 0;
    content:'';
    width: 10px;
    height: 100%;
    display: inline-block;
    box-sizing: border-box;
}
.box20:before{
    border-left: dotted 2px #15adc1;
    border-top: dotted 2px #15adc1;
    border-bottom: dotted 2px #15adc1;
    left: 0;
}
.box20:after{
    border-top: dotted 2px #15adc1;
    border-right: dotted 2px #15adc1;
    border-bottom: dotted 2px #15adc1;
    right: 0;
}
.box20 p {
    margin: 0; 
    padding: 0;
}

.box22{
    padding: 0.5em 1em;
    margin: 2em 0;
    background: #fff799;
	border-left: solid 6px #f9d400;
    box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.33);
}
.box22 p {
    margin: 0; 
    padding: 0;
}

.box27 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #f4a460;
	margin-bottom: 1em;
}
.box27 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #f4a460;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box27 p {
    margin: 0; 
    padding: 0;
}

.box27-1 {
    position: relative;
    margin: 2em 0;
    padding: 0.5em 1em;
    border: solid 3px #FF7A6A;
	margin-bottom: 1em;
}
.box27-1 .box-title {
    position: absolute;
    display: inline-block;
    top: -27px;
    left: -3px;
    padding: 0 9px;
    height: 25px;
    line-height: 25px;
    font-size: 17px;
    background: #FF7A6A;
    color: #ffffff;
    font-weight: bold;
    border-radius: 5px 5px 0 0;
}
.box27-1 p {
    margin: 0; 
    padding: 0;
}

.box3 {
    padding: 0.5em 1em;
    margin: 2em 0;
    color: #2c2c2f;
    background: #cde4ff;/*背景色*/
}
.box3 p {
    margin: 0; 
    padding: 0;
}

.box3-1 {
    padding: 0.5em 1em;
    margin: 0.5em 0;
    color: #2c2c2f;
    background: #ffffe5;/*背景色*/
}
.box3-1 p {
    margin: 0; 
    padding: 0;
}

.box3-2 {
    padding: 0.5em 1em;
    margin: 1em 0;
    color: #2c2c2f;
    background: #fbeaec;
}
.box3-2 p {
    margin: 0; 
    padding: 0;
}

/*二重線*/
.box1-2 {
    margin: 2em auto;
    padding: 8px;
    background: #ffebfe;
    border: double 7px #333;
}

.box1-2 span {
    background: #ff4cae;
    font-size: 90%;
    font-weight: bold;
    display: inline;
    padding: 0.1em 0.3em;
    color: #ffffff;
}


/************************************
** リストデザインのCSS
************************************/

ul, ol {
  padding: 0;
}

.blue li {
  position: relative;
  list-style-type: none!important;/*ポチ消す*/
  padding: 0.5em 0.5em 0.5em 0.5em;
  margin-bottom: 5px;
  line-height: 1.5;
  background: #dbebf8;
  vertical-align: middle;
  color: #505050;
  border-radius: 15px 0px 0px 15px;/*左側の角丸く*/
}

.blue li:before{ 
  display:inline-block; 
  vertical-align: middle;
  /*以下白丸つくる*/
  content:'';
  width:1em;
  height: 1em;
  background: #fff;
  border-radius: 50%;
  margin-right: 8px;
}

ul, ol {
  padding: 0;
}

.pink li {
  position: relative;
  list-style-type: none!important;/*ポチ消す*/
  padding: 0.5em 0.5em 0.5em 0.5em;
  margin-bottom: 5px;
  line-height: 1.5;
  background: #ffb6c1;
  vertical-align: middle;
  color: #505050;
  border-radius: 15px 0px 0px 15px;/*左側の角丸く*/
}

.pink li:before{ 
  display:inline-block; 
  vertical-align: middle;
  /*以下白丸つくる*/
  content:'';
  width:1em;
  height: 1em;
  background: #fff;
  border-radius: 50%;
  margin-right: 8px;
}
.next-link {
    margin: 0;
}
/************************************
** タグ風タグのCSS
************************************/

.flexbox {
	display: flex;
	flex-wrap: wrap;
}
.centering {
	text-align: center;
}

/************************************
** 画像のシャドウを消すCSS
************************************/

.noshadow img {
    box-shadow: none;
}

/************************************
** 吹き出しのCSS
************************************/
.sb-id-11 .speech-person,.sb-id-12 .speech-person,.sb-id-14 .speech-person,.sb-id-15 .speech-person,.sb-id-16 .speech-person {
  width: 130px;
  min-width: 130px;
}
@media screen and (max-width: 480px){
.sb-id-11 .speech-person,.sb-id-12 .speech-person,.sb-id-14 .speech-person,.sb-id-15 .speech-person,.sb-id-16 .speech-person {
    width: 70px;
    min-width: 70px;
  }
}
/* 赤吹き出し */

.sb-id-11 .speech-balloon {
  background-color: #ffffff; /* 吹き出しメイン部分の背景色 */
  border: 2px solid #ffbf7f; /* 吹き出しメイン部分のボーダー */
  color: #000; /* セリフの文字色 */
}
.sb-id-11 .speech-balloon::before {
  border-right: 12px solid #ffbf7f; /* 三角部分の外側（ボーダー）の太さ・形状・色 */
}
.sb-id-11 .speech-balloon::after {
  border-right: 12px solid #ffffff; /* 三角部分の内側（背景）の色 */
}
@media screen and (max-width: 480px){
  .sb-id-11 .speech-balloon::before { border-right: 7px solid #ffbf7f; /* スマホでの三角部分の外側 */
  }
  .sb-id-11 .speech-balloon::after { border-right: 7px solid #ffffff; /* スマホでの三角部分の内側 */
  }
}

/* 青吹き出し */

.sb-id-12 .speech-balloon {
  background-color: #ffffff; /* 吹き出しメイン部分の背景色 */
  border: 2px solid #6495ed; /* 吹き出しメイン部分のボーダー */
  color: #000; /* セリフの文字色 */
}
.sb-id-12 .speech-balloon::before {
  border-right: 12px solid #6495ed; /* 三角部分の外側（ボーダー）の太さ・形状・色 */
}
.sb-id-12 .speech-balloon::after {
  border-right: 12px solid #ffffff; /* 三角部分の内側（背景）の色 */
}
@media screen and (max-width: 480px){
  .sb-id-12 .speech-balloon::before { border-right: 7px solid #6495ed; /* スマホでの三角部分の外側 */
  }
  .sb-id-12 .speech-balloon::after { border-right: 7px solid #fffafa; /* スマホでの三角部分の内側 */
  }
}
/* 緑線吹き出し */

.sb-id-14 .speech-balloon {
  background-color: #fffafa; /* 吹き出しメイン部分の背景色 */
  border: 2px solid #adff2f; /* 吹き出しメイン部分のボーダー */
  color: #000; /* セリフの文字色 */
}
.sb-id-14 .speech-balloon::before {
  border-right: 12px solid #adff2f; /* 三角部分の外側（ボーダー）の太さ・形状・色 */
}
.sb-id-14 .speech-balloon::after {
  border-right: 12px solid #fffafa; /* 三角部分の内側（背景）の色 */
}
@media screen and (max-width: 480px){
  .sb-id-14 .speech-balloon::before { border-right: 7px solid #adff2f; /* スマホでの三角部分の外側 */
  }
  .sb-id-14 .speech-balloon::after { border-right: 7px solid #fffafa; /* スマホでの三角部分の内側 */
  }
}

/* すぴ子吹き出し */

.sb-id-15 .speech-balloon {
  background-color: #ffd9ff; /* 吹き出しメイン部分の背景色 */
  border: 2px solid #ffd9ff; /* 吹き出しメイン部分のボーダー */
  color: #000; /* セリフの文字色 */
}
.sb-id-15 .speech-balloon::before {
  border-right: 12px solid #ffd9ff; /* 三角部分の外側（ボーダー）の太さ・形状・色 */
}
.sb-id-15 .speech-balloon::after {
  border-right: 12px solid #ffd9ff; /* 三角部分の内側（背景）の色 */
}
@media screen and (max-width: 480px){
  .sb-id-15 .speech-balloon::before { border-right: 7px solid #ffd9ff; /* スマホでの三角部分の外側 */
  }
  .sb-id-15 .speech-balloon::after { border-right: 7px solid #ffd9ff; /* スマホでの三角部分の内側 */
  }
}

/* すぴネコ吹き出し */

.sb-id-16 .speech-balloon {
  background-color: #ffe0c5; /* 吹き出しメイン部分の背景色 */
  border: 2px solid #ffe0c5; /* 吹き出しメイン部分のボーダー */
  color: #000; /* セリフの文字色 */
}
.sb-id-16 .speech-balloon::before {
  border-right: 12px solid #ffe0c5; /* 三角部分の外側（ボーダー）の太さ・形状・色 */
}
.sb-id-16 .speech-balloon::after {
  border-right: 12px solid #ffe0c5; /* 三角部分の内側（背景）の色 */
}
@media screen and (max-width: 480px){
  .sb-id-16 .speech-balloon::before { border-right: 7px solid #ffe0c5; /* スマホでの三角部分の外側 */
  }
  .sb-id-16 .speech-balloon::after { border-right: 7px solid #ffe0c5; /* スマホでの三角部分の内側 */
  }
}
/* ========== 占い相談ページ ==========*/
/* ------- 相談者 -------*/
section.Counselor {
    margin-bottom: 80px;
}
h2.consultation_page_title{
    padding: 10px;
    background: #ffb3a7;
    color: #fff;
}
/* 相談タイトル */
h3.consultation_title {
    padding: 0;
    border-left: none;
    border-color: #666;
    color: #666;
}
/* 名前 */
span.counselor {
    font-size: 1rem;
    margin-left: 10px;
}
/* アイコン画像 */
.consultation_icon {
    width: 90px;
    max-width: 90px;
}
.consultation_icon img {
    width: 100%;
}
/* 吹き出し */
.speech-wrap.sbs-stn.sbis-cn.consultation {
    justify-content: space-between;
}
/* 吹き出し線の色 */
.speech-balloon.consultation {
    background-color: #fff5f5;
    border: 2px solid #ffb3a7;
}
/* 吹き出し三角 */
.speech-balloon.consultation:before{
	border-right-color:#ffb3a7;
	top:20px;
}
.speech-balloon.consultation:after{
	top:20px;
}
/* ------- 占い師結果 ------*/
/* 結果タイトル */
h3.consultation_title.result {
    text-align: right;
}
/* アイコン画像 */
.consultation_icon {
    width: 10%;
    max-width:10%;
}
/* 吹き出し線の色 */
.speech-balloon.result {
    background-color:#fff5f5;
    border: 2px solid #ffb3a7;
}
/* 吹き出し、アイコン並び替え */
.speech-wrap.sbs-stn.sbis-cn.result {
    flex-direction: row-reverse;
    justify-content: space-between;
}
/* 吹き出し三角 */
.speech-balloon.result:after {
    right: -11px;
    top: 20px;
    left: inherit;
	border-left: 12px solid #fff5f5;/*中の色*/
	border-right: none;
}
.speech-balloon.result:before {
    right: -14px;
    top: 20px;
    left: inherit;
	border-left: 12px solid #ffb3a7;/*線の色*/
	border-right: none;
}
/************************************
** レスポンシブデザイン用のメディアクエリ
************************************/
/*1023px以下*/
@media screen and (max-width: 1023px){
  /*必要ならばここにコードを書く*/
	
}
/*950px以下*/
@media screen and (max-width: 950px){
  /*必要ならばここにコードを書く*/
	.feature-main-contents {
    top: 450px;
}
	.next.icochan.i-right.slick-arrow {
    right: -140px;
}
	.prev.icochan.i-left.slick-arrow{
		left:-140px;
	}
}
/* 834px以上*/
@media screen and (min-width: 834px){
/* 続きを読む */
	.contents {
    position: relative;
}
span.continuation {
	position:absolute;
    bottom: 0;
    right: 0;
}
/* モバイルカテゴリーメニューpc非表示 */
.mobile-category{
	display:none;
}
}
/*834px以下*/
@media screen and (max-width: 834px){
/*必要ならばここにコードを書く*/
	ul.feature-coupon {
    width: 100%;
}
	/* 占い師ページ 鑑定のポイント */
	ul.feature-main-contents-list {
    width: 100%;
}
	.feature-main-contents {
    top: 400px;
}
			/* スライダー矢印 右 */
.next.icochan.i-right.slick-arrow {
    width: 9%;
    top: 50px;
    right: 0px;
    font-size: 2em;
    z-index: 3;
    color: #777;
    height: calc(100% - 9rem);
}
.next.icochan.i-right.slick-arrow:after {
    top: 70px;
    right: 5px;
}
	/* スライダー矢印 左 */
	.prev.icochan.i-left.slick-arrow {
    width: 9%;
    top: 50px;
    left: 0px;
    font-size: 2em;
    z-index: 3;
    color: #777;
    height: calc(100% - 9rem);

}
	.prev.icochan.i-left.slick-arrow:after {
    top: 70px;
    left: 5px;
}
}

ul.blue {
    padding: 0;
}

ul.pink {
    padding: 0;
}

/*600px以下*/
@media screen and (max-width: 600px){
  /*必要ならばここにコードを書く*/
/*  	span.button-text{  
		font-size:0.8em;
	}*/
/* =========== フロント ===========*/
/* トップページランキングタイトル	 */
.title-img.ranking {
    padding: 0px 30px 0px;
    font-size: 0.96em;
}
/* トップページランキングタイトル画像	 */
.title-img.ranking:before,.title-img.ranking:after {
    width: 25px;
}
.supirichan {
    font-size: 1.2em;
    font-weight: bold;
    color: #1a1919;
	text-align: center;
}
	.schedule-button a {
    width: 100%;
	font-size: 0.8em;
}
	span.uranaisi-pr-text,ul.uranaisi-detai-list li p{
		font-size:0.9em;
	}
/* ピックアップタイトル */
	.title-img {
    padding: 0px 85px 0px;
}
	.title-img:before, .title-img:after {
    width: 65px;
}
	.pickup-contents {
    margin-top: 0px;
}
	.post_home {
    width: calc(95% / 2);
}
	.new-entry-cards.widget-entry-cards.no-icon.cf a {
    width: auto;
}
	.item1 img {
    height: 125px;
}
/* ---------------- */
	.box29 .button .privilege-button a:before {
    top: 30%;
}
	.alignleft {
    float: none;
}
	h2.pickup-navy :before {
    top: -5px;
}
	h2.pickup-navy :after {
    top: -5px;
}
	.button{
		display:block;
	}
.privilege-button {
    width: 100%;
    margin: 0;
}
a#gold {
    margin-bottom: 20px;
}
	.registration-button{
		width:100%;
	}
	.privilege dl {
    width: 100%;
}
	.tagline{
		display:none;
	}
	/* 占い師ページ 鑑定のポイント */
	.feature-photo,.feature-explanation,.feature-photo.coupon,.feature-explanation.coupon{
	clear: both;
	width:100%;
	}
	.feature-list{
		width:600px;
	}
.feature-contents-wrap {
    /* overflow: scroll hidden; */
    overflow-x: scroll;
}
	.feature-main-contents{
		top:80px;
	}
/* クローズアイコン */
	.feature-main-contents-close {
    right: -7px;
}
		/* スライダー矢印 右 */
.next.icochan.i-right.slick-arrow {
    width: 9%;
    top: 50px;
    right: 0px;
    font-size: 2em;
    z-index: 3;
    color: #777;
    height: calc(100% - 9rem);
}
.next.icochan.i-right.slick-arrow:after {
    top: 70px;
    right: 5px;
}
	/* スライダー矢印 左 */
	.prev.icochan.i-left.slick-arrow {
    width: 9%;
    top: 50px;
    left: 0px;
    font-size: 2em;
    z-index: 3;
    color: #777;
    height: calc(100% - 9rem);

}
	.prev.icochan.i-left.slick-arrow:after {
    top: 70px;
    left: 5px;
}
/* ----------------	 */
	.feature-contents-list {
    width: 600px;
}
	.feature-contents {
	display:block;
    top: 170px;
    width: 90%;
}
	div#gnav-first, div#gnav-second, div#gnav-third{
		display:block;
		top:160px;
	}
	span.sentence-title {
    margin-top: 10px;
}
	.test {
    margin: 0px;
}
/* ===== ランキング-TOP3 ===== */
	.ranking-top3-contents {
    display: block;
}
/* 画像 */
.ranking-top3-contents .image {
    margin-right: 0px;
    text-align: center;
}
/* 詳細 */
	.detail {
    width: 100%;
}
.name {
    flex-direction: column;
    align-items: baseline;
}
.rating {
    margin-left: 3.8rem;
}
	.link-button a,span.catchcopy{
	padding-top:0px;
	}
	/* ----- こんな記事も読まれてます ----- */
	.randam-section {
    border-bottom: 1px solid;
	width:auto;
}
	.randam-section article {
    display: flex;
}
.randam-section article figure {
    width: 50%;
}
.randam-section article figure img {
    height: 100px;
}
p.post-title {
    margin: 0 0 0 10px;
    width: 100%;
}
/* -----おすすめ占い師 ----- */
	.best-uranaisi-list-contents {
    font-size: 0.8em;
}
	.best-uranaisi-detail-button a {
    padding: 0px 0;
}
	.best-uranaisi-schedule-button a {
    padding: 5px 0;
}
	/* -----------すぴりちゃん編集部用------------------ */
	.box-contents {
    display: block;
}
	.supirichan-1 {
    left: 0;
}
	.box-text {
    margin-left: 0px;
}
}
/*480px以下*/
@media screen and (max-width: 480px){
		/* ========== 占い相談ページ ==========*/
/* ------- 相談者 -------*/
section.Counselor {
    margin-bottom: 30px;
}
/* 相談タイトル */
h3.consultation_title {
    width: 83%;
    float: right;
    line-height: 1.6;
    margin: 10px 0 20px;
}
/* 名前 */
span.counselor {
    display: block;
    margin: 0;
}
.speech-wrap.sbs-stn.sbis-cn.consultation {
    display: block;
}
/* アイコン画像 */
.consultation_icon {
    width: 45px;
    max-width: 45px;
}
/* 吹き出し */
.speech-balloon.consultation {
    clear: both;
    max-width: 100%;
}
/* 吹き出し三角 */
.speech-balloon.consultation:after {
	border-bottom: 10px solid #f5fdff;
    border-right: 10px solid #ff000000;
    border-left: 10px solid #f5000000;
    top: -15px;
    left: 16px;
}
.speech-balloon.consultation:before {
    border-bottom: 10px solid #ffb3a7;
    border-right: 10px solid #ff000000;
    border-left: 10px solid #f5000000;
    top: -18px;
    left: 16px;
}
/* ------- 占い師結果 ------*/
.speech-wrap.sbs-stn.sbis-cn.result {
    display: block;
}
/* 結果タイトル */
h3.consultation_title.result {
    float: left;
    width: 78%;
    margin: 27px 2.5% 40px 0;
}
/* アイコン画像 */
	.consultation_icon.result {
    float: right;
    width: 60px;
    max-width: 60px;
}
.speech-balloon.result {
    clear: both;
    max-width: 100%;
}
/* 吹き出し三角 */
.speech-balloon.result:after {
	border-bottom: 10px solid #f5fdff;
    border-right: 10px solid #ff000000;
    border-left: 10px solid #f5000000;
    top: -15px;
    right: 16px;
}
.speech-balloon.result:before {
    border-bottom: 10px solid #ffb3a7;
    border-right: 10px solid #ff000000;
    border-left: 10px solid #f5000000;
    top: -18px;
    right: 16px;
}
	.schedule-button a.fortune_review {
    width: 100%;
}
}
/*300px以下*/
@media screen and (max-width: 300px){	

	.link-button {
	text-align:center;
	flex-direction: column;
}
	a.detail-button {
    margin: 0 0 10px 0;
}
	.link-button a{
		padding-top:0px;
	}
}

/************************************
** 評価グラフ
************************************/
.pb-rating-graph {
  box-shadow: 0 3px 5px rgba(0, 0, 0, .07);
  max-width: 700px;
  margin: 0 auto 2em !important;
  padding: 2.5em 2em!important;
  color: #333;
  background: #fafafa;
}
.pb-rating-graph ul {
  margin: 0!important;
  padding: 0!important;
  border: none!important;
}
.pb-rating-graph ul li {
  list-style: none!important;
  margin: 0 !important;
  padding: 0 !important;
}
.pb-rating-graph ul li:before {
  content: unset !important;
}
.pb-rating-graph__label {
  background: #71828A;
  color: #fff;
  display: inline-block;
  padding: 6px 15px;
  font-weight: 600;
  font-size: 14px;
  line-height: 1.2;
}
.pb-rating-graph__wrap {
  display: flex;
  margin: 20px 0;
}
.pb-rating-graph li:last-child .pb-rating-graph__wrap {
  margin: 20px 0 0;
}
.pb-rating-graph__axis {
  width: 70%;
  margin-top: 10px;
  position: relative;
  display: flex;
  justify-content: space-between;
}
.pb-rating-graph__axis:before {
  content: "";
  display: inline-block;
  height: 5px;
  background: #E3E6E7;
  width: 100%;
  position: absolute;
}
.pb-rating-graph__basis {
  width: 15%;
  color: #71828A;
  font-weight: 600;
  font-size: 16px;
  line-height: 1.5;
}
.pb-rating-graph__basis-inner {
  display: inline-block;
  text-align: left;
}
.pb-rating-graph__wrap .pb-rating-graph__basis:first-of-type {
  text-align: right;
  padding-right: 15px;
}
.pb-rating-graph__wrap .pb-rating-graph__basis:last-of-type {
  text-align: left;
  padding-left: 15px;
}
.pb-rating-graph__scale {
  display: flex;
  flex-direction: column;
  align-items: center;
  z-index: 1;
  width: 20px;
  margin-top: 0 !important;
}
.pb-rating-graph__scale:before {
  content: "";
  display: block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-top: -7px;
  margin-bottom: 10px;
  background: #E3E6E7;
}
.pb-rating-graph__axis:after, .pb-rating-graph__scale:after {
  content: unset !important;
}
.pb-rating-graph .pb-rating-graph__scale .pb-rating-graph__item {
  width: 42px;
  display: block;
  font-weight: 600;
  font-size: 14px;
  color: #777;
  text-align: center;
  padding-top: 5px;
  margin-top: -10px !important;
}
@media screen and (max-width:600px) {
  .pb-rating-graph {
    padding: 2em 1em !important;
  }
  .pb-rating-graph__axis {
    width: 60%;
  }
  .pb-rating-graph__basis {
    width: 20%;
    font-size: 13px;
    letter-spacing: 0px;
    line-height: 1.8;
  }
  .pb-rating-graph__wrap .pb-rating-graph__basis:first-of-type {
    padding-right: 7px;
  }
  .pb-rating-graph__wrap .pb-rating-graph__basis:last-of-type {
    padding-left: 7px;
  }
  .pb-rating-graph__scale {
    width: 16px;
  }
  .pb-rating-graph__scale:before {
    width: 16px;
    height: 16px;
  }
  .pb-rating-graph .pb-rating-graph__scale .pb-rating-graph__item {
    font-size: 12px;
  }
  .pb-rating-graph__scale[data-check='true']:before {
    font-size: 20px;
  }
	/* 比較表 */
td.teacher, th.teacher {
    width: 10%;
}
/* 続きを見るボタン */
	.readmore_bt {
    height: 390px;
}
	/* 電話占い◎◎で本当に当たる先生◎選！口コミ評価・得意占術まで徹底調査しましたページ */
h3.uranaisi-name .rating {
    float: none;
	margin:0;
}
	/* 　タグリンク画像 */
.telephone, .face {
    width: calc((100% - 70px) / 2);
}
	.telephone {
    margin: 0 20px 20px 0;
}
}
.pb-rating-graph__scale[data-check='true']:before{
  content: '';
  display: inline-block;
  background-color: unset;
  background-image: url(https://spirichan.com/wp-content/uploads/2024/03/すぴりちゃん（臨時）300.png);
  background-size: contain;
  background-repeat: no-repeat;
  transform: scale(1.75, 1.75);
  border-radius: 0;
}
/************************************
** 検索欄のCSS
************************************/

.search-form-1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    overflow: hidden;
    border-radius: 3px;
}

.search-form-1 input {
    width: 250px;
    height: 45px;
    padding: 5px 15px;
    border: none;
    box-sizing: border-box;
    font-size: 1em;
    outline: none;
	margin-bottom: 1.5em;
}

.search-form-1 input::placeholder{
    color: #777777;
}

.search-form-1 button {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 50px;
    height: 45px;
    border: none;
    background-color: #ffb3a7;
    cursor: pointer;
}

.search-form-1 button::after {
    width: 24px;
    height: 24px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M18.031 16.6168L22.3137 20.8995L20.8995 22.3137L16.6168 18.031C15.0769 19.263 13.124 20 11 20C6.032 20 2 15.968 2 11C2 6.032 6.032 2 11 2C15.968 2 20 6.032 20 11C20 13.124 19.263 15.0769 18.031 16.6168ZM16.0247 15.8748C17.2475 14.6146 18 12.8956 18 11C18 7.1325 14.8675 4 11 4C7.1325 4 4 7.1325 4 11C4 14.8675 7.1325 18 11 18C12.8956 18 14.6146 17.2475 15.8748 16.0247L16.0247 15.8748Z' fill='%23fff'%3E%3C/path%3E%3C/svg%3E");
    background-repeat: no-repeat;
    content: '';
}


/************************************
** 追従ボタンCSS
************************************/

/*追従ボタン*/

.fix-btn {
    position: fixed;
    z-index: 1;
    background: #ffb3a7;
    width: 150px;
    border-radius: 15px;
    text-decoration: none;
    font-size: 14px;
    text-align: center;
    color: #333;
    padding: 10px 0;
    right: 10px;
    bottom: 50px;
    box-shadow: 1px 1px 5px #aaa;
}



/************************************
** ボックスとか以外のCSS
************************************/

.video-container{
margin: 0px auto;
}

.marker-orange {
background: linear-gradient(transparent 60%, #ffa500 0%);
}

.marker-yellow {
background: linear-gradient(transparent 60%, #ffff7f 0%);
}

.marker-pink{
background:linear-gradient(transparent 50%, #ffccff 0%);
}

.marker-purple{
background:linear-gradient(transparent 50%, #ccccff 0%);
}

.marker-blue{
background:linear-gradient(transparent 50%, #A7F3FF 0%);
}


.kakoi3 {
    text-align: center;
}


.uranaisi-shortchord {
    box-shadow: 0 0 5px 0 #ffc9c9;
    padding: 15px 10px;
    border-radius: 4px;
    background-image: url(https://spirichan.com/wp-content/uploads/2025/07/728761-1.png);
    background-size: contain;
    margin-bottom: 40px;
}