@charset "utf-8";
/*
Theme Name: uranist
Description: うらニスト
Version: 1.0
*/

/*共通*/
.clearfix:after {content: ".";display: block;clear: both;height: 0;visibility: hidden;}
:focus {outline: 0;}

* html body{overflow: hidden;}
html {height:100%;}
body {
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;position: relative;height: 100%;-webkit-text-size-adjust: 100%; line-height: 1.6; font-size: 3.6vw;}


a[href^="tel:"] {pointer-events: none;}
a {color:inherit; text-decoration: none;}

img {max-width:100%; width: 100%;}
.sp-dsp{ display: inherit;}
.pc-dsp{display: none;}

.aligncenter {text-align:center;}
.alignright  {text-align:right; }
.alignleft   {text-align:left; }

.inner{ width: 95%; margin: 0 auto;}
.breadcrumbs{ font-size: .88em; padding: .5em;}

.wpcr3_review div.wpcr3_review_datePublished{ display: none;}
.wpcr3_review div.wpcr3_review_author{ padding-left: 1em;}

#content{ margin-bottom: 5vw;}
/*header*/
header{ border-bottom: 8px solid #e3e3e3; background: #fff; transition: all .3s; height: 65px; display: flex; align-items: center; z-index: 100;}
header.fixed{position: fixed;}
header > .inner{ padding-top: .5em;}

.head_logo{ background: url("./logo.png") no-repeat center left/auto 90%;
    font-family: 'Noto Sans JP', sans-serif; font-size: .85em; font-weight: 700; color: #57087c; line-height: 1.2;
    letter-spacing: -.025em;}
.head_logo a{ display: block; padding-left: 3.5em;}
.head_logo span{ font-size: 1.5em; padding-left: .25em; font-weight: 900; letter-spacing: normal;}

/*nav*/
.g-nav{ display: none;}
#sp-menu { position: fixed; right: 0; top: 0; display: block; margin: 0 auto; width: 52px;
    height: 52px; cursor: pointer; text-align: center; z-index: 999; background: rgba(255,255,255,.5);}

#sp-menu.fixed span { background: #57087c;}
#sp-menu span { display: block; width: 26px; height: 3px; background: #57087c;
    position: absolute; left: 18px; -webkit-transition: all .3s; transition: all .3s;
    -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;}
#sp-menu.open span {
    background: #57087c; -webkit-transform-origin: 50% 50%; transform-origin: 50% 50%;}

#sp-menu span:nth-child(1) { top: 20px;}
#sp-menu span:nth-child(2) { top: 28px;}
#sp-menu span:nth-child(3) { top: 36px;}

#sp-menu.open span:nth-child(1) { top: 30px;
    -webkit-transform: rotate(45deg); transform: rotate(45deg);}
#sp-menu.open span:nth-child(2) { opacity: 0;}
#sp-menu.open span:nth-child(3) {top: 30px;
    -webkit-transform: rotate(-45deg); transform: rotate(-45deg);}

#sp-menu-block {display: none; position: fixed; width: 100%; height: 100%; transition: all .3s;
    background: rgba(241, 236, 243,.95); left: 0; top: -100vh; bottom: 0; overflow-y: scroll; z-index: 99; padding: 1.5em 1em;}

#sp-menu-block.slide{top: 65px;}
#sp-menu-block-inner ul li{width: 100%; border-bottom: 1px solid; padding: 1em 0 .5em;}

#site-header h1 svg { width: 70vw; fill:#79b88f;}

#g-nav { display: none; z-index: 201; width: 100%;}
.pc-top-nav{ display: none;}

.g-nav-inner{ display: flex; flex-wrap: wrap; flex-direction: column-reverse;}
.g-nav-inner ul li{ padding: 0 .35em;}
.g-nav ul { display: block; height: auto; width: 100%;}

.g-nav li a {font-family: 'Oswald', sans-serif;font-weight: 600; letter-spacing: .15em; font-size: 1.15em; display: block;
    padding: 0 20px; -webkit-transition: color ease-in-out 0.3s; transition: color ease-in-out 0.3s; text-align: center;}

.g-nav li a span { display: block; font-weight: 400; font-family: sans-serif; font-size: .65em; letter-spacing: normal;}

footer{ text-align: center; background: #e3e3e3;}
footer p{font-size: .75em; padding: .88em 0 1.5em;}

@media screen and (min-width: 769px) {

    body{ font-size: 15px;}
    header{ display: flex; align-items: center; height: auto;}
    header.fixed{ position: inherit;}
    header > .inner{ width: 1100px; display: flex; justify-content: space-between; align-items: flex-end;}
    .head_logo{width: auto; font-size: .95em; padding:1em 0 .5em 0; font-weight: 600; line-height: 1.2; background-size: auto 80%;}
  .head_logo a{ padding-left: 5em;}
    #sp-menu{ display: none;}
    #g-nav{ width:100%; left: auto; top: auto;}
    .g-nav-inner{ flex-wrap: nowrap; width: 100%; justify-content: center; background: #57087c; flex-direction: inherit;}

    .pc-top-nav{display: flex;}
    .pc-top-nav a{ padding: 0 .5em; font-size: .88em;}
    .pc-top-nav a p::before{content: "\f0da"; font-family: "Font Awesome 5 Free"; font-weight: bold; padding-right: .5em; color: #7a4d8f;}

    .g-nav-inner ul{ width: 1100px; display: flex;}
    .g-nav-inner ul li{ width: 25%; padding:1em 0; text-align: center; align-items: center;}
    .g-nav-inner ul li:not(:nth-child(n+4)) a{ border-right: 1px solid;}
    .g-nav-inner ul li:nth-child(n+5){ display: none;}
    .g-nav-inner ul li a{ display: block;color: #fff; transition: all .3s;}
}

#content.under{ padding-top: 2.5vh;}

/*===============================
 index
================================*/

section + section{ padding-top: 2.5vh;}

.main-column{ margin-bottom: 2.5vh;}
.main-column h3{ background: #57087c;}
.main-column h3 p{ color: #fff; padding: .5em .88em; letter-spacing: -.005em;}

/*検索*/
.top-search{ padding-top: 3vh;}
.top-search .inner{ display: flex; justify-content: space-around;}
.top-search .inner a{ display: flex; justify-content: center; align-items: center; flex-wrap: wrap; width: 30%; border: 6px solid #9f7cb0; border-radius: 10px; text-align: center; background: -moz-linear-gradient(top, #fff, #f1ebf3);
    background: -webkit-linear-gradient(top, #fff, #f1ebf3); background: linear-gradient(to bottom, #fff, #f1ebf3);
    box-shadow: 0 4px #57087c; padding: 1em 0 .88em;
}
.top-search .inner a p:nth-child(1){ width: 45%; max-height: 99px; display: flex; align-items: center;}
.top-search .inner a p:nth-child(2){ font-family: 'Noto Sans JP', sans-serif; font-weight: 700; color: #57087c;}

.top-vis > .inner{ width: 100%; display: flex; flex-wrap: wrap;}
.top-vis .intxt{ padding-bottom: 1em;}
.top-vis .intxt p{ padding: 0 1em; text-align: justify;}
.top-vis .inttl{ width: 100%; background: url("images/index/key.jpg") no-repeat  0 60%/100%;}
.top-vis .inttl p{ font-size: 1.35em; padding: 1em .5em; font-family: 'Noto Sans JP', sans-serif; font-weight: 900; color: #57087c;}

/* サイトランキング*/
.ranking-list{ width: 95%; margin: 0 auto;}
.ranking-list dd{ padding: 1.5em 0;}
.ranking-list dd:not(:last-child){ border-bottom: 1px solid #e8deeb;}

/* --サイトランキング new*/
.rank-entry-box{}
.rank-entry-head {
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  padding-bottom: .88em;
}
.rank-entry-head p.site-name {
  font-size: 1.24em;
  font-weight: bold;
  padding: .25em 0 0 1.66em;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: 1.25em auto;
}
.rank-entry-head p.pic-tag{margin-left: auto;}
.rank-entry-head p.pic-tag span{
  padding: .5em 1em .35em;
  /*color: #fff;
  background: #d1187d;*/
  font-size: .78em;
  line-height: 1;
  border-radius: 3px;
  overflow: hidden;
  display: block;
  position: relative;

}
.rank-entry-head p.pic-tag span::before{
  animation: shine 3s ease-in-out infinite;/*数字を変更することで光る間隔が変更*/
  background-color: #fff;
  content: "";
  height: 100%;
  left: 0;
  opacity: 0;
  position: absolute;
  top: -50px;
  transform: rotate(45deg);
  width: 5px;
}
.rank-entry-head p.pic-tag.pc_01 span
,.rank-entry-head p.pic-tag.pc_04 span
,.rank-entry-head p.pic-tag.pc_13 span
,.rank-entry-head p.pic-tag.pc_10 span
,.rank-entry-head p.pic-tag.pc_09 span{
  background: #F3D443;
  color: #C8181B;
}
.rank-entry-head p.pic-tag.pc_02 span
,.rank-entry-head p.pic-tag.pc_12 span
,.rank-entry-head p.pic-tag.pc_05 span
,.rank-entry-head p.pic-tag.pc_08 span
,.rank-entry-head p.pic-tag.pc_11 span{
  color: #F3D443;
  background: #AE0000;
}
.rank-entry-head p.pic-tag.pc_03 span
,.rank-entry-head p.pic-tag.pc_06 span
,.rank-entry-head p.pic-tag.pc_07 span{
  background: #00ae63;
  color: #fff;
}

@keyframes shine {
  0% {
    transform: scale(0) rotate(45deg);
    opacity: 0;
  }
  80% {
    transform: scale(0) rotate(45deg);
    opacity: 0.5;
  }
  81% {
    transform: scale(4) rotate(45deg);
    opacity: 1;
  }
  100% {
    transform: scale(50) rotate(45deg);
    opacity: 0;
  }
}

.rank01{ background-image: url("./rank1.png"); background-size: auto 80%!important; padding-left: 2.24em!important; font-size: 1.3em!important;}
.rank02{ background-image: url("./rank2.png"); background-size: auto 80%!important; padding-left: 2.24em!important; font-size: 1.3em!important;}
.rank03{ background-image: url("./rank3.png"); background-size: auto 80%!important; padding-left: 2.24em!important; font-size: 1.3em!important;}
.rank04{ background-image: url("images/common/rank-icon/rank4.svg");}
.rank05{ background-image: url("images/common/rank-icon/rank5.svg");}
.rank06{ background-image: url("images/common/rank-icon/rank6.svg");}
.rank07{ background-image: url("images/common/rank-icon/rank7.svg");}
.rank08{ background-image: url("images/common/rank-icon/rank8.svg");}
.rank09{ background-image: url("images/common/rank-icon/rank9.svg");}
.rank10{ background-image: url("images/common/rank-icon/rank10.svg");}
.rank11{ background-image: url("images/common/rank-icon/rank11.svg");}
.rank12{ background-image: url("images/common/rank-icon/rank12.svg");}
.rank13{ background-image: url("images/common/rank-icon/rank13.svg");}
.rank14{ background-image: url("images/common/rank-icon/rank14.svg");}
.rank15{ background-image: url("images/common/rank-icon/rank15.svg");}
.rank16{ background-image: url("images/common/rank-icon/rank16.svg");}
.rank17{ background-image: url("images/common/rank-icon/rank17.svg");}
.rank18{ background-image: url("images/common/rank-icon/rank18.svg");}
.rank19{ background-image: url("images/common/rank-icon/rank19.svg");}
.rank20{ background-image: url("images/common/rank-icon/rank20.svg");}

.rank-entry-body{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
}
.rank-entry-box {
  padding: .5em 0;
}
.rank-entry-box > a{
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}
.rank-entry-box > a::after{
  content: '';
  width: 10px;
  height: 10px;
  border: 0px;
  border-top: solid 3px #00ae63;
  border-right: solid 3px #00ae63;
  -ms-transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
  position: absolute;
  top: 55%;
  right: -.5%;
}
.rank-entry-body .rank-thum{
  width: 30%;
}
.rank-entry-body .rank-thum a{
  display: block;
}
.rank-entry-body .rank-thum a img{
  height: auto;
}
.rank-site-deta{
  width: 65%;
  padding-left: 1em;
}
.rank-site-deta .instar{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: row-reverse;
  -moz-flex-direction: row-reverse;
  -ms-flex-direction: row-reverse;
  -o-flex-direction: row-reverse;
  flex-direction: row-reverse;
  -ms-align-items: center;
  align-items: center;
  font-size: 1.25em;
  color: #f70650;
  font-weight: bold;
}
.rank-site-deta .instar::after {
    content: "口コミ満足度";
    font-size: .7em;
  padding-right: .65em;}

.rank-site-deta .instar .star{
  max-width: 42%;
  padding-right: .5em;
}
.rank-site-deta .fst-cam span{
  font-size: .85em;
  background: #ff9e9e;
  color: #fff;
  padding: .25em .5em .25em;
}
.rank-site-deta .intxt{
  font-size: .95em;
  padding-top: .85em;
  text-align: justify;
}
.rank-entry-link{
  display: none;
  width: 100%;
  margin-top: 1em;
  z-index: 2;
}
.rank-entry-link a{
  width: 48%;
  background: #7a4d8f;
  border-radius: 5px;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  box-shadow: 0 4px #57087c;
  padding-top: .25em;
}
.rank-entry-link a p{
  padding: 1em 0 .85em;
  line-height: 1;
}
.rank-entry-link a::before{
  content: "＞";
  position: absolute;
  right: .5em;
  font-size: .88em;
  font-weight: normal;
  line-height: 1;
  transform: scale(.6, 1);
}


/*--サイトランキング new　ここまで*/

.rank-entry{ display: flex; flex-wrap: wrap;}

.site-deta .site-name{ font-size: 1.1em; font-weight: bold; padding-left: 1.5em; background-repeat: no-repeat; background-position: left center; background-size: 1.25em auto;}
.rank-entry .site-thum{ width: 29%;}
.rank-entry > .site-thum img{ border: 1px solid #f1ecf3; height: auto;}

.site-deta { font-weight: bold;}
.site-point{ display: flex; align-items: center; flex-direction: row-reverse;font-size: 1.25em; color: #f70650; font-weight: bold;}
.site-point::after{ content: "口コミ満足度"; font-size: .7em; padding-right: .75em;}

.site-point p.star{ padding-right: .5em; width: 45%;}
.rank-entry > .site-deta{ width: 71%; padding-left: 1em;}

.rank-deta p.fst-cam {padding-top: .88em;}
/*.rank-deta p.fst-cam.front {padding-top: 0; margin-top: -.98em;}*/
.rank-deta p.fst-cam span{ font-size: .85em; /*letter-spacing: -.025em;*/ background: #ff9e9e; color: #fff; padding: .25em .5em .25em;}

.rank-deta p.sp-txt{ font-weight: normal; font-size: .88em; text-align: justify;}

.rank-entry > .rank-cmnt{ padding: 1em 0;}
.rank-entry > .link{ width: 100%; display: flex; justify-content: space-around;}
body.home .site-ranking .rank-entry > .link{display: none;}
.rank-entry > .link a{ width: 45%; background: #7a4d8f; border-radius: 5px; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold; box-shadow: 0 4px #57087c; padding-top: .25em;}
.rank-entry > .link a::before{ content: "＞";position: absolute; right: .5em; font-size: .88em; font-weight: normal; line-height: 1; transform: scale(.6, 1);}
.rank-entry > .link a p{ padding: 1em 0 .85em; line-height: 1;}



.btn-lanking{ display: flex; justify-content: center; padding: 5vw 0;}
.btn-lanking a{width: 90%; background: #7a4d8f; border-radius: 5px; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold; box-shadow: 0 4px #57087c; padding: 1em 0 .88em;}

body.home .rank-deta{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -webkit-flex-direction: column-reverse;
  -moz-flex-direction: column-reverse;
  -ms-flex-direction: column-reverse;
  -o-flex-direction: column-reverse;
  flex-direction: column-reverse;
}
body.home .rank-deta p.fst-cam{ padding-top: .25em;}
body.home .rank-deta p.sp-txt{ padding-top: .5em;}

/*鑑定師ランキング*/
.kts-rank .acv-post{ border-bottom: none;}
.kts-rank .jmp-kts{ border-top: none;}
.kts-rank .intxt{ text-align: center; padding-top: 2.5vh; font-size: .88em;}
.kts-rank .intxt span{display: block; font-weight: bold; font-size: 1.15em; padding-bottom: .75em;}

.kts-rank .acv-post h4{ font-weight: bold; font-size: 1.15em; padding-bottom: .88em; color: #57087c;}
.kts-rank .acv-post h4::before{ content: "\f0da"; font-family: "Font Awesome 5 Free"; font-weight: bold; padding-right: .5em;}

.genre-nav {display: flex; flex-wrap: wrap; justify-content: center; padding-top: 1em;}
.genre-nav a{ width: 30%; display: flex; justify-content: center; flex-wrap: wrap; color: #7a4d8f;}
.genre-nav a p img{ width: 70px; height: 70px;}
.genre-nav a span{ width: 100%; display: block; padding: 0 0 1em; text-align: center; font-size: .88em; font-weight: bold;}

.kts-cmnt{ text-align: justify; padding: 1em .5em;}
.kts-rank-ttl { margin-top: 1em;}
.kts-rank-ttl p.icn{ position: absolute; left: .5em; top: 40%;  transform: translate(0,-50%); width: 50px; height: 50px; border-radius: 50%; border: 5px solid #9f7cb0; z-index: 1;}
.kts-rank-ttl p.inttl{ border-bottom: 10px solid #7a4d8f; padding-left: 70px; color: #57087c; letter-spacing: .015em; font-weight: bold; font-size: 1.15em;}

.kts-rank-incmnt{ padding: 1.5em 1em 1em;}
.kts-rank-incmnt p{ text-align: justify;}

.ranking-entry{ width: 100%; margin: 0 auto 2em;}

.jmp-kts{ display: flex; justify-content: center; width: 90%; margin: 0 auto; border-top: 2px solid #e2e2e2; padding-top: 2em;}
.jmp-kts a{ width: 75%; background: #7a4d8f; border-radius: 5px; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold; box-shadow: 0 4px #57087c;}
.jmp-kts a::before{ content: "＞";position: absolute; right: .25em; font-size: .88em; font-weight: normal; line-height: 1;}
.jmp-kts a p{ padding: 1em 0 .85em; line-height: 1; letter-spacing: .05em;}

/*占い師紹介*/

.bs-entry{ display: flex; flex-wrap: wrap;}

.bs-thum{ width: 35%;}
.bs-thum img{ height: auto;}
.bs_deta{ width: 65%; padding-left: 1em;}
.bs-name{ font-size: 1.25em; font-weight: bold;}
.bs01{ padding-top: .5em;}
.bs01 p{display: flex; justify-content: space-between;}
.bs01 p span:nth-child(1){border-left: 5px solid #57087c; padding-left: .5em; }
.bs01 p:nth-child(3){ display: none;}
.bs01 p + p,.bs02 p + p{ margin-top: .25em;}

.bs01 p span:nth-child(1){ font-weight: bold;}

.bs_deta2{ width: 100%;}
.bs02 { margin-top: 1em;}
.bs02 p{ display: flex; flex-direction: column;}
.bs02 p > span{ padding-left: .5em;}
.bs02 p > span:nth-child(1){ border-left: 5px solid #57087c; margin-bottom: .5em; font-weight: bold;}
.bs02 p > span > span + span::before{ content: "／";}

.bs-entry > .link{ width: 100%; display: flex; justify-content: center; margin-top: 1em;}
.bs-entry > .link a{ background: #7a4d8f; border-radius: 5px; color: #fff; display: flex; align-items: center; justify-content: center; font-weight: bold; box-shadow: 0 4px #57087c; padding: .25em 2em 0em 1em;}
.bs-entry > .link a::before{ content: "＞";position: absolute; right: .5em; transform: scale(.6, 1); font-size: .88em; font-weight: normal; line-height: 1;}
.bs-entry > .link a p{ padding: 1em 0 .85em; line-height: 1;}

.foot_acv h3 { font-size: 1.15em; margin: 1em 0; font-weight: bold;}
.post-archives{ display: flex; width: 95%; margin: 0 auto; justify-content: space-around;}
.post-archives > div.acv-thum{ width: 46%;}
div.acv-thum img{ height: auto;}

/*口コミ最上部削除*/
body.single div.wpcr3_aggregateRating{ display: none!important;}
body.single div.wpcr3_dotline{ border-bottom: none!important; margin-bottom: 30px!important;}


/*口コミレイアウト*/
.entry_main .wpcr3_in_content{ padding-top: 30px!important;}

.wpcr3_review div.wpcr3_content{ width: 100%; padding:.5em 0 0;}

.wpcr3_review div.wpcr3_content p{ display: block!important; line-height: 1.6!important;}
.wpcr3_content p{ padding: .5em!important;}

body.single div.wpcr3_item_name{ width: 105%; font-size: 1.25em; font-weight: 900; background:#57087c; padding: .5em; margin: auto -2.5%; color: #fff; font-style: normal;}

body.single div.wpcr3_item_name::before{ content: "\f086"; font-family: "Font Awesome 5 Free"; padding-right: .5em;}
.wpcr3_review div.wpcr3_review_author{font-style: normal; }
.wpcr3_item{ border-bottom: dotted 1px #eee;}
.wpcr3_div_2{ width: 100%; padding: 1em;}
.wpcr3_leave_text{ padding-bottom: .5em;}

.wpcr3_button_1{ width: 80%; margin: 0 auto; display: block; padding: 1em 0;}
.wpcr3_submit_btn,.wpcr3_cancel_btn{ width: 45%; display: inline-block;}

.wpcr3_review div.wpcr3_review_datePublished{ font-style: normal;}

.wpcr3_table_2 td{ padding-bottom: 1em;}

.wpcr3_respond_2 textarea{ display: block; background: #f8f8f8; border: #ccc 1px solid; min-width: auto; width: 100%; margin: .5em auto; font-size: 16px; height: auto!important;}
.wpcr3_respond_2 input[type="text"]{-webkit-appearance:none;-webkit-rtl-ordering: none; border-style: none; border: 1px solid#ccc; min-width: auto; padding: .5em; background: #f8f8f8; box-shadow: none; font-size: 16px; width: 100%; box-sizing: border-box;}

.wpcr3_review{ padding: 1em 0; border-bottom: 1px dotted #ccc;
  display: flex; flex-wrap: wrap;
}

div.wpcr3_review span{ font-size: .88em;}
.wpcr3_item_name{ min-width: 50%; font-weight: bold;}
.wpcr3_review_datePublished{ padding-right: 1em;}

.wpcr3_review_ratingValue{ display: flex; align-items: flex-start; margin-left: auto;}
.wpcr3_review_ratingValue::before{content: "総合評価：";}

/*pagetop*/
a.pagetop {
	width: 50px;
	height: 25px;
	border-radius:3px 3px 0 0;
	overflow: hidden;
	display:block;
}
a.pagetop:hover { height:28px;}


/*search*/

.search label.txt::before{ content: "\f002"; font-family: "Font Awesome 5 Free"; font-weight: 900; color: #ccc;
    position: absolute; left: .5em; top: 50%; transform: translate(0,-50%);}

.search input.txt{ padding: .5em .5em .5em 2.25em; width: 250px; font-size: 16px;}

/*pickup*/
.pickup-banner{ background: #9f7cb0; margin: 3.5vh 0;}
.pickup-banner p.inttl{ text-align: center; padding: 1em 0 .5em; color: #fff; letter-spacing: .025em; font-size: 1.05em;}
.pickup-banner ul{ padding-bottom: 3.5vh;}
.slick-slide{ padding: 0 .5em;}
.slick-dots li{ margin: 0;}
.slick-dots li button{ width: 15px; height: 15px; padding: 0}
.slick-dots li button:before{ color: #c6aad3; width: 15px; height: 15px; padding: 0;}
.slick-dots li.slick-active button:before{ opacity: 1; color: #fff;}

.pager{ display: flex; justify-content: center; padding: 1em 0 0;}

/*===============================
 sidebar
================================*/

#sidebar{font-size: .9em;}
#sidebar h3{background: #57087c; margin: 0 -2.5%;}
#content.under #sidebar h3{background: #57087c;}

#sidebar h3 p{color: #fff; padding: .5em .88em; font-size: 1.15em;}
.sidebar-inner{ width: 95%; margin: 0 auto;}

#sidebar ul{ margin: 1em auto;}
#sidebar div.wpcr3_review div.wpcr3_content{ padding-bottom: 0;}
#sidebar .wpcr3_review div.wpcr3_review_author{ margin-left: auto;}
#sidebar .wpcr3_pagination{display: none;}

#sidebar .side_new-post li,#sidebar .post-list li{padding: 1em 0;}
#sidebar .side_new-post li:not(:last-child){border-bottom: 1px dotted #ccc; }
#sidebar .post-list li:not(:last-child){border-bottom: dotted 1px #ccc;}
#sidebar .post-list li a{ display: flex; flex-direction: column;}
#sidebar .post-list li a span{ color: #666;}

/*アーカイブ*/
body.single h1{ font-size: 1.15em; font-weight: bold; font-family: 'Noto Sans JP', sans-serif; padding-bottom: 1em;}

#content.under h1{ font-size: 1.5em; padding: .25em 0; font-weight: bold; font-family: 'Noto Sans JP', sans-serif; border-bottom: 2px solid #57087c;}
#content.under.rank-love h1{ padding-left: 1.6em; font-size: 1.35em; background: url("images/common/rank-icon/renai-icn.svg") no-repeat left center/1.25em;}
#content.under.rank-kazoku h1{ padding-left: 1.6em; font-size: 1.35em; background: url("images/common/rank-icon/family-icn.svg") no-repeat left center/1.25em;}
#content.under.rank-fukuen h1{ padding-left: 1.6em; font-size: 1.35em; background: url("images/common/rank-icon/fukuen-icn.svg") no-repeat left center/1.25em;}
#content.under.rank-shigoto h1{ padding-left: 1.6em; font-size: 1.35em; background: url("images/common/rank-icon/money-icn.svg") no-repeat left center/1.25em;}
#content.under.rank-deai h1{ padding-left: 1.6em; font-size: 1.3em; background: url("images/common/rank-icon/en-icn.svg") no-repeat left center/1.25em;}

#content.under h3{ background-color: inherit; color: inherit;}

.acv-post{ width: 95%; margin: 0 auto; padding: 1.5em 0;}
.acv-post{ border-bottom: 1px solid #e8deeb;}
.acv-post .site-deta .site-name{ background-repeat: no-repeat; background-size: 1.25em;}

div.acv-post .site-name.rank01{ background-image: url("images/common/rank-icon/rank1.svg");}
div.acv-post .site-name.rank02{ background-image: url("images/common/rank-icon/rank2.svg");}
div.acv-post .site-name.rank03{ background-image: url("images/common/rank-icon/rank3.svg");}
div.acv-post .site-name.rank04{ background-image: url("images/common/rank-icon/rank4.svg");}
div.acv-post .site-name.rank05{ background-image: url("images/common/rank-icon/rank5.svg");}
div.acv-post .site-name.rank06{ background-image: url("images/common/rank-icon/rank6.svg");}
div.acv-post .site-name.rank07{ background-image: url("images/common/rank-icon/rank7.svg");}
div.acv-post .site-name.rank08{ background-image: url("images/common/rank-icon/rank8.svg");}
div.acv-post .site-name.rank09{ background-image: url("images/common/rank-icon/rank9.svg");}
div.acv-post .site-name.rank10{ background-image: url("images/common/rank-icon/rank10.svg");}

/*占い師アーカイブ*/
body.post-type-archive-uranaishi .acv-post .bs-name.ranktag{ background-repeat: no-repeat; background-size: 1.4em; background-position: left top;}
body.post-type-archive-uranaishi .acv-post:first-of-type .bs-name.ranktag{background-image: url("images/common/rank-icon/rank1.svg"); padding-left: 1.6em;}
body.post-type-archive-uranaishi .acv-post:nth-of-type(2) .bs-name.ranktag{background-image: url("images/common/rank-icon/rank2.svg"); padding-left: 1.6em;}
body.post-type-archive-uranaishi .acv-post:nth-of-type(3) .bs-name.ranktag{background-image: url("images/common/rank-icon/rank3.svg"); padding-left: 1.6em;}
body.post-type-archive-uranaishi .acv-post:nth-of-type(4) .bs-name.ranktag{background-image: url("images/common/rank-icon/rank4.svg"); padding-left: 1.6em;}
body.post-type-archive-uranaishi .acv-post:nth-of-type(5) .bs-name.ranktag{background-image: url("images/common/rank-icon/rank5.svg"); padding-left: 1.6em;}

/*相談別ランキング*/
body.tax-soudan div.acv-post .bs-name{ background-repeat: no-repeat; background-size: 1.24em; background-position: left center;}
body.tax-soudan div.acv-post .bs-name.love01{ background-image: url("images/common/rank-icon/rank1.svg"); padding-left: 1.5em;}
body.tax-soudan div.acv-post .bs-name.love02{ background-image: url("images/common/rank-icon/rank2.svg");}
body.tax-soudan div.acv-post .bs-name.love03{ background-image: url("images/common/rank-icon/rank3.svg");}
body.tax-soudan div.acv-post .bs-name.love04{ background-image: url("images/common/rank-icon/rank4.svg");}
body.tax-soudan div.acv-post .bs-name.love05{ background-image: url("images/common/rank-icon/rank5.svg");}


/*ページャー*/
#pagination{ margin-top: 40px; padding: 0 2em;}
#pagination::after{ content: ""; display: block; clear: both;}
#pagination li.next{ float: right;}
#pagination li.prev{ float: left;}


/*===============================
 search
================================*/

.page-search{ width: 95%; margin: 2em auto;}

.page-search > .form{ margin-top: 1em;}
#feas-searchform-0{display: flex; flex-wrap: wrap;}
#feas-searchform-0 p{ width: 100%; background: #f1ecf3; padding: .5em; font-weight: bold;}
#feas-searchform-0 label{ width: 50%; margin: .5em 0;}

.form-pra,.form-free{ width: 100%; display: flex; flex-wrap: wrap; align-items: center; margin-bottom: 1em;}
.form-pra > p,.form-free > p{ width: 100%; margin-bottom: 1em;}
#feas-searchform-0 input[type="text"]{ border: 1px solid #ccc; padding: .5em; font-size: 16px; width: 38%; vertical-align: middle; margin-right: .15em;}

#feas-searchform-0 .form-free input{ width: 80%; margin: 0 auto;}

#feas-searchform-0 input.feas-submit-button{-webkit-appearance: none; -moz-appearance: none; appearance: none;
     width: 80%; border-color: none; border: none; display: block; margin: 2em auto; background: #7a4d8f; border-radius: 5px; color: #fff; align-items: center; justify-content: center; font-size: 1em; font-weight: bold; box-shadow: 0 4px #57087c; padding: .8em 0 .5em;}

/*検索結果*/

#feas-sort-menu { display: none;}

  dl.site-result dd{ display: flex; flex-wrap: wrap; border-bottom: 1px solid #ccc; padding: 1em .5em;}
dl.site-result dd > div{ width: 25%;}
dl.site-result dd > div > p{ text-align: center;}
dl.site-result dd > div.list-kantei > p{ display: flex;  flex-direction: column-reverse; align-items: center;}

  dl.site-result dd > div{ display: flex;flex-direction: column; justify-content: center; padding:.5em;}
  dl.site-result div.list-thum{ font-weight: bold; flex-direction: column;}
dl.site-result div.list-thum p.name{ width: 90vw; font-size: 1.44em; text-align: left; padding-bottom: .5em;}
  dl.site-result div.list-thum img{ height: auto; border: 1px solid #efefef;}

dl.site-result div.list-kantei p::after{ content: "鑑定方法"; display: block; font-weight: bold;}
dl.site-result div.list-price p::before{content: "鑑定料金"; display: block; font-weight: bold; margin-top: -1.5em;}
dl.site-result div.list-nop p::before{content: "在籍人数"; display: block; font-weight: bold; margin-top: -1.5em;}

dl.site-result div.list-star{ width: 90%; margin: -.5em auto 0; display: flex; flex-direction: row-reverse; align-items: center;}
div.list-star{ color: #f70650;}
dl.site-result div.list-star p.star{ display: flex; align-items: center;}
dl.site-result div.list-star p.star img{ width: 40%;}
dl.site-result div.list-star p.star::before{content: "口コミ満足度　:"; font-size: 1.15em; padding-right: .5em; font-weight: bold;}
dl.site-result div.list-star p:nth-child(1){ font-weight: 900; font-size: 1.5em;}

dl.site-result div.list-btn{ width: 90%; margin: 0 auto;}
dl.site-result div.list-btn a{ background: #7a4d8f; border-radius: 5px; color: #fff; display: flex;
    align-items: center; justify-content: center; font-weight: bold; box-shadow: 0 4px #57087c;}
dl.site-result div.list-btn a p{ line-height: 1; padding: 1em 0 .65em;}

/*口コミ一覧*/
.page-voice{ padding: 1em;}
.wpcr3_pagination {display: flex; padding: 2em 0; justify-content: center;}


/*記事ページ*/
#toc_container a{ font-weight: normal;}
#toc_container.have_bullets li{ padding-left: 0;}
#toc_container .toc_list > li > a{ font-size: 1.12em; padding-top: .5em; display: block;}

.entry_main{width: 95%; margin: 0 auto; padding-top: 2em;}
.entry_main h2{font-family: 'Noto Sans JP', sans-serif; font-size: 1.24em; font-weight: 700; padding: .5em; margin: .5em 0 1em; background: none; border-bottom: 2px dashed; color: #57087c;}

h3 {
  position: relative;
  padding: 0.5em;
  background: #a6d3c8;
  color: white;
}

h3::before {
  position: absolute;
  content: '';
  top: 100%;
  left: 0;
  border: none;
  border-bottom: solid 15px transparent;
  border-right: solid 20px rgb(149, 158, 155);
}

.entry_main h4{ font-size: 1.1em; font-weight: bold;}
.entry_main h3 + h4{ margin-top: 1.25em;}
.entry_main strong,.entry_main b{ font-weight: bold; font-size: 1.05em; }

.entry_main a { text-decoration: underline; font-weight: bold;}

.entry_main p{ line-height: 1.8;}
.entry_main p + p,.entry_main h3 + p{ padding: 1.5em 0 0;}
.entry_main p + h3{ margin-top: 1.5em;}

.entry_main table{ display: flex; max-width: 100%; height: auto!important;}
.entry_main table tr{ height: auto!important;}
.entry_main table td{ padding: .5em; height: auto!important}
.entry_main table td p{ text-align: justify; line-height: 1.4; font-size: .95em;}
.entry_main table td p + p{ padding-top: .88em;}
.entry_main table img{ height: auto;}

div#toc_container{ margin: 1.5em 0; width: 100%!important;}

.entry .review.inner{ width: 105%; background: #f1ecf3; padding: 1em .5em; margin-left: -2.5%;}
.entry .review.inner .revew-ttl > span,.entry .review.inner .revew-ttl > span.rank01,.entry .review.inner .revew-ttl > span.rank02,.entry .review.inner .revew-ttl > span.rank03{ font-size: 1em!important; padding-left: 2em;}


.post-head{ width: 95%; margin: 0 auto;}

.review{display: flex; padding-bottom: .5em;}
.review p.thum{ width: 35%;}
.review p.thum img{height: auto;}

.review-rank { width: 65%; padding-left: 1em;}
.revew-ttl{ width: 100%; font-family: 'Noto Sans JP', sans-serif; font-weight: 900; font-size: 1.15em; }

body.single-uranaishi h1.revew-ttl{ width: 100%; font-family: 'Noto Sans JP', sans-serif; font-weight: 900; font-size: 1.15em; }

.single-uranaishi .entry .review.inner h2.revew-ttl,.post-type-archive-uranaishi .bs-name{ font-size: 1.24em;}

.single-uranaishi .entry .review.inner span.ranktxt,.post-type-archive-uranaishi .bs-head span.ranktxt{ display: block; padding-left: 0; font-size: .85em!important; color: #57087c; font-weight: bold;}

.revew-ttl span{ padding-right: .5em; font-size:.88em; background-repeat: no-repeat;}

.review-rank .point{ display: flex; justify-content: space-between; align-items: center;}
.review-rank .point > p{ display: flex; font-size: .88em;}
.review-rank .point > p span{ color: #A51013; font-weight: 900;}
.review-rank p.star{ width: 40%;}
.review-rank .incmnt{ font-size: .8em; padding-top: .5em;}

.review-graph{ display: none;}

/*ページ内レビュー*/
.in-voice{ display: flex; margin: 2.5em auto;}
.in-voice .img{ width: 20%; display: flex;}
.in-voice .img > p{ width: 80%;}

.in-voice .comment{ width: 80%; padding:.5em 0 0 1em;}
.in-voice__content > div{position: relative; display: inline-block; padding: 1em;; color: #555;
    width: 90%;font-size: .95em;background: #FFF; border: solid 2px #cfacdf; border-radius: 10px; text-align: justify;}
.in-voice__content > div p{ padding: .5em 0;}
.in-voice__content > div::before{content: ""; position: absolute; top: 20px; left: -13px; margin-top: -8px; border: 5px solid transparent;
	border-right: 10px solid #FFF; z-index: 2;}
.in-voice__content > div::after{ content: ""; position: absolute; top: 20px; left: -17px; margin-top: -8px; border: 5px solid transparent;
	border-right: 10px solid #cfacdf; z-index: 1;}

.in-voice__deta{ width: 90%; display: flex; justify-content: flex-end; font-size: .75em; padding: .5em 0;}
.in-voice__deta a{ text-decoration: underline;}

/*記事内バナー*/
.entry_main .post-banner,.site_link_btn{display: flex; justify-content: center; align-items: center; margin: 2em 0;}
.entry_main .post-banner a,.site_link_btn a{ width: 90%; /*background: #7a4d8f;*/background: -moz-linear-gradient(top, #52CC00,#338000);
  background: -webkit-linear-gradient(top, #52CC00,#338000);　background: linear-gradient(to bottom, #52CC00,#338000); text-decoration: none; color: #fff; font-weight: bold; padding: 1em 0 .85em; box-shadow: 0 4px #143300; text-align: center; border-radius: 5px; font-size: 1.15em; position: relative;}
.post-banner a::before{ content: "＞"; position: absolute; right: .5em; font-size: .88em; font-weight: normal;transform: scale(.6, 1);}

/*記事内キャンペーンバナー*/
.cam_banner_box.inner{ width: 90%;}
.cam_banner_box + .post_site_deta{ margin-top: 5%;}

/*サイト情報：記事内テーブル*/
.post_site_deta{ width: 90%; margin: 10% auto 5%;}
.post_site_deta dl{ border: 1px solid #c9addc;}
.post_site_deta dl dd{ display: flex; border-bottom: 1px solid #c9addc}
.post_site_deta dl dd:last-child{ border-bottom: none;}
.post_site_deta dl dd p{ padding: .5em;}
.post_site_deta dl dd p.ttl{ width: 30%; font-weight: bold; border-right: 1px solid #c9addc;}
.post_site_deta dl dd p.deta{ width: 70%; display: flex; align-items: center;}
.post_site_deta dl dd p.deta a{ margin-left: auto; font-size: .88em; color: #57087c; font-weight: bold;}
.post_site_deta dl dd p.deta a::after{ content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: bold; padding-left: .5em;}
.post_site_deta dl dd:nth-child(1) p,.post_site_deta dl dd:nth-child(5) p{padding: .4em; font-weight: bold; font-size: 1.15em; width: 100%;background: #f1ecf3;}

/*占い師情報記事内テーブル*/
.post_bs_deta{ width: 90%; margin: 10% auto 5%;}
.post_bs_deta dl{ border: 1px solid #c9addc;}
.post_bs_deta dl dd{ display: flex; border-bottom: 1px solid #c9addc}
.post_bs_deta dl dd:last-child{ border-bottom: none;}
.post_bs_deta dl dd p{ padding: .5em;}
.post_bs_deta dl dd p.ttl{ width: 30%; font-weight: bold; border-right: 1px solid #c9addc;}
.post_bs_deta dl dd p.deta{
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flex;
  display: -o-flex;
  display: flex;
  -ms-align-items: center;
  align-items: center;
  -webkit-flex-wrap: wrap;
  -moz-flex-wrap: wrap;
  -ms-flex-wrap: wrap;
  -o-flex-wrap: wrap;
  flex-wrap: wrap;
  width: 70%;}
.post_bs_deta dl dd p.deta span + span::before{content: "／";}
.post_bs_deta dl dd p.deta a{ margin-left: auto; font-size: .88em; color: #57087c; font-weight: bold;}
.post_bs_deta dl dd p.deta a::after{ content: "\f105"; font-family: "Font Awesome 5 Free"; font-weight: bold; padding-left: .5em;}
.post_bs_deta dl dd:nth-child(1) p{padding: .4em; font-weight: bold; font-size: 1.15em; width: 100%;background: #f1ecf3;}

/*おすすめポイント*/
.cam_banner_box + .post_pick{
  margin-top: 20px;
}
.post_pick{ width: 95%; margin: 0 auto;}
p.pic-ttl{ font-weight: bold; font-size: 1.44em; text-align: center; padding-bottom: .5em; color: #57087c;}

.post_pick ul li p{ padding:0 0 1em 1.5em; font-size: 1.15em; font-weight: bold;}

/*占いコラム*/
.column-key { background: url("images/common/column-key.jpg") no-repeat top/100%; margin-top: -5vw;}
#content.under .column-key h1.inttl{font-size: 1.88em; padding: 14vw .5em 18vw; font-family: 'Noto Sans JP', sans-serif; font-weight: 900; border-bottom: none; text-align: center; color: #fff;}
.column-key > img{ display: none;}
.column-key p.intxt{ padding: 0 2em; text-align: justify; color: #fff;}

.main-column .blog-card{ padding: 5vw 5vw 0;}
.main-column .blog-card figure{ display: flex;}

.column-archive h3{ background: none;}
.column-archive .entry{ width: 92%; margin: 0 auto; padding: 5vw 0;}
.column-archive .entry:first-of-type{ margin-top: 5vw;}
.column-archive .entry + .entry{ border-top: 1px solid #ccc;}

.column-archive{ margin-top: 5vw;}
.column-archive h2{ width: 100%; font-size: 1.5em; padding: .25em .5em; font-weight: bold; font-family: 'Noto Sans JP', sans-serif; border-bottom: 2px solid #57087c;}
.column-archive .post_head h3{ font-weight: bold; font-size: 1.15em;}

/*コラム投稿ページ*/
.post-block .entry{ padding: 5vw 0 10vw;}
.post-block h2{ font-weight: bold; font-size: 1.44em; line-height: 1.4;}
.post-block .post-head .state{ display: block; color: #666; font-size: .88em; padding-top: 1em; text-align: right;}
.post-block .post-head .state span{ padding-left: 1em;}
.post-block .post-head{ border-bottom: 1px solid #57087c; padding-bottom: .25em;}

/*会社概要*/
#content.under.about{ padding-top: 0;}
#content.about .main-column{ margin: 0 auto 20vw;}
div.page-about{ width: 92%; margin: 0 auto; padding-top: 5vw;}
div.page-about dl{ margin-bottom: 5vw;}
div.page-about dl dd{ display: flex; flex-direction: column;}

div.page-about dl dd p:nth-child(1){ background: #ECECEC; font-weight: bold; padding: .25em .5em;}
div.page-about dl dd p:nth-child(2){ padding: .5em;}

div.page-about dl dd p.flx{ display: flex;}
div.page-about dl dd p.flx .mark{ width: 18%; margin-right: .5em;}

div.page-about > div + div{ margin-top: 5vw;}
div.page-about > div h2{ font-size: 1.14em; font-weight: bold; padding-bottom: .25em; border-bottom: 1px solid #57087c;}
div.page-about > div p.txt{ text-align: justify; padding: 1em 0 0;}


/*お問い合わせ*/

.form{ width: 92%; margin: 5vw auto 10vw; display: flex; flex-direction: column;}
.form input,.form textarea{ border: 1px solid #ccc; max-width: 100%; padding: .5em; font-size: 16px; box-sizing: border-box;}
.form label:nth-child(even){ padding-top: 1em;}
.form ::placeholder{ font-size: .8em; color: #BABABA;}

.form .wpcf7-not-valid-tip{ font-size: .85em;}
div.wpcf7-validation-errors, div.wpcf7-acceptance-missing{ border:none; color: #f00;font-size:.85em; text-align: center;}
div.wpcf7-validation-errors::before, div.wpcf7-acceptance-missing::before{content: "※";}
.form .send{ display: flex; justify-content: center; margin-top: 5vw;}

.form input[type="submit"]{ width: 60%;}
.form .wpcf7c-btn-back{ margin-right: auto;}

input:-webkit-autofill.wpcf7c-conf {
  -webkit-box-shadow: 0 0 0px 1000px #fff inset !important;
  border: none !important;
  background: #fff !important; }
  input:-webkit-autofill.wpcf7c-conf:focus {
    border: none !important; }

.wpcf7c-conf { background: #fff !important; border-color: #fff !important; }
.wpcf7c-conf:focus { border-color: transparent !important; }

.content.thanks #page_wrap{ margin: 8vw auto 15vw; width: 92%; min-height: 68vh;}
.content.thanks #page_wrap #title_page{ text-align: center; width: 80%; margin: 5vw auto; font-weight: bold;}

/*追加*/
.main-column > .site-ranking{ padding-top: 0;}
.main-column .ranking-list dd{ padding: .6em 0;}

.main-column .site-deta > a{ position: relative; display: inline-block; padding-right: 5vw;}
.main-column .site-deta > a::after{ content: ''; width: 10px; height: 10px; border: 0px; border-top: solid 3px #00ae63; border-right: solid 3px #00ae63; -ms-transform: rotate(45deg); -webkit-transform: rotate(45deg); transform: rotate(45deg); position: absolute; top: 50%; right: 2%;}


/* 調査概要 */
.page-survey {
  width: 92%;
  margin: 0 auto;
}
.survey{
  margin-bottom: 40px;
}
.survey > h2 {
  font-size: 1.14em;
  font-weight: bold;
  padding-bottom: .25em;
  border-bottom: 1px solid #57087c;
  margin-bottom: 1em;
}


.survey dl dt{
  width: 100%;
  background: #fafafa;
  color: #57087d;
  font-weight: 600;
  padding: .5em;
}

.survey dl dd{
  width: 100%;
  padding: .5em;
  margin-bottom: .5em;
}

.survey ul li{
  padding: .5em;
}

.survey ul li:nth-child(2n+1){
  background: #fafafa;
}

.survey-result table{
  width: 100%;
}
.survey-result td, .survey-result th{
  line-height: 1.2;
  padding: .5em;
  vertical-align: middle;
  text-align: center;
}
.survey-result .name{
  background: #d1c4e9;
  font-size: .8em;
}
.survey-result .name.head{
  width: 30%;
  padding: 0 6vw;
}
.survey-result .name.other{
  width: 10%;
  padding: 0.5em 1.2em;
}
.survey-result tr:nth-child(2n+1){
  background: #fafafa;
}
.survey-result td.total{
  font-weight: 600;
  color: #57087d;
}
.scroll-table table {
  display: block;
  overflow-x: scroll;
  white-space: nowrap;
  -webkit-overflow-scrolling: touch;
}


.balloon5 {
  width: 100%;
  margin: 1.5em 0;
  overflow: hidden;
}

.balloon5 .faceicon {
  float: left;
  margin-right: -90px;
  width: 80px;
}

.balloon5 .faceicon img{
  width: 100%;
  height: auto;
  border: solid 3px #f1ecf3;
  border-radius: 50%;
}

.balloon5 .chatting {
  width: 100%;
}

.says {
  display: inline-block;
  position: relative; 
  margin: 5px 0 0 105px;
  padding: 17px 13px;
  border-radius: 12px;
  background: #f1ecf3;
}

.says:after {
  content: "";
  display: inline-block;
  position: absolute;
  top: 18px; 
  left: -24px;
  border: 12px solid transparent;
  border-right: 12px solid #f1ecf3;
}

.says p {
  margin: 0;
  padding: 0;
}