@charset "utf-8";

html {
  font-size: 62.5%;
}

body {
  height: auto;
  font-size: 1.4rem;
  font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
  line-height: 1.6;
  color: var(--purple);
  margin: 0;
  padding: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
dt,
dd {
  margin: 0;
}

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
menu,
nav,
section {
  display: block;
}

hr {
  display: block;
  height: 1px;
  border: 0;
  border-top: 1px solid #ccc;
  margin: 1em 0;
  padding: 0;
}

ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

li {
  padding: 0;
}

input,
select {
  vertical-align: middle;
}

img {
  vertical-align: bottom;
}

a:link,
a:visited,
a:hover,
a:active {
  color: var(--raspberry);
}

.relative {
  position: relative;
}

/* clearfix */

/* For modern browsers */
.cf::before,
.cf::after {
  content: "";
  display: table;
}

.cf::after {
  clear: both;
}

.fL {
  float: left;
}

.fR {
  float: right;
}

/* root */
:root {
  --white: #fff;
  --black: #222f3e;
  --gray-light: #f9fafb;
  --gray-mid: #f0f1f4;
  --gray: #e5e9ed;
  --gray-dark: #b4bfcb;
  --gray-black: #576574;
  --purple-light: #f2f1f6;
  --purple: #441b52;
  --purple-dark: #29183f;
  --raspberry-dark: #460e25;
  --raspberry: #b53471;
  --gold-light: #efe6d2;
  --gold: #e0cda5;
  --lightblue: #eff6fa;
  --blue-light: #64bdd4;
  --blue-dark: #404176;
  --red: #eb3b5a;
  --pink: #ea7d85;
  --brown: #604d21;
  --gold-title: #e0ba7a;
  --line-green: #21b83c;
  --line-blue: #2accc1;
  --gradient-ppl: linear-gradient(-45deg, var(--purple), var(--raspberry));
  --gradient-warm: linear-gradient(-45deg, #e6c0c2, #fdeec8);
  --gradient-gold: linear-gradient(0deg, #d2a666, #eece8e);
  --gradient-status-standby: linear-gradient(-15deg, #623aa2, #29ccbe);
  --gradient-status-call: linear-gradient(-15deg, #623aa2, #f97794);
  --gradient-status-resv: linear-gradient(-15deg, #623aa2, #fdcb6e);
  --gradient-status-out: linear-gradient(-15deg, #623aa2, #d1d8e0);
  --fa-mincho: '游明朝', 'Yu Mincho', YuMincho, 'Hiragino Mincho Pro', serif;
  --fa_hiragino-maru-gothic: "Hiragino Maru Gothic ProN", "Hiragino Kaku Gothic ProN", Meiryo, sans-serif;
}

/* font */
.fa_hiragino-maru-gothic {
  font-family: var(--fa_hiragino-maru-gothic);
  font-weight: 700;
  letter-spacing: 0.05em;
}

.c {
  text-align: center !important;
}

.r {
  text-align: right !important;
}

.l {
  text-align: left !important;
}

.lr {
  font-size: larger;
}

.xr {
  font-size: x-large;
}

.xl {
  font-size: xx-large;
}

.sr {
  font-size: smaller;
}

.xm {
  font-size: x-small;
}

.weight {
  font-weight: bold;
}

.normal {
  font-weight: normal;
}

.none {
  text-decoration: none;
}

.nonetext {
  font-size: 1px;
  line-height: 1px;
  text-indent: -99999px;
  overflow: hidden;
  outline: none;
  text-align: center;
}

/* background */
.column__sec-purple {
  background-color: var(--purple);
}

.column__sec-purple-dark {
  background-color: var(--purple-dark);
}

.column__sec-ppl {
  background: url(../img/item/bg-ppl.png) repeat;
  background-size: 100% auto;
}

.column__sec-wht {
  background: url(../img/header/bg-wht.png) repeat;
  background-size: 100% auto;
}

.column__sec-star-ppl-dark {
  background: url(../img/header/bg-star-ppl-dark.jpg) repeat;
  background-size: 100% auto;
}

.column__sec-star-ppl-light {
  background: url(../img/header/bg-star-ppl-light.jpg) repeat;
  background-size: 100% auto;
}

/* text color */
.color_text-white {
  color: var(--white);
}

.red {
  color: var(--red);
}

.f {
  color: var(--pink);
}

.m {
  color: var(--blue-light);
}

.x {
  color: var(--gray-black);
}

/* marker */
.marker_warm span {
  background-image: linear-gradient(90deg, #fdeec8, #e6c0c2);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 40%;
  z-index: 1;
}

.marker_ppl-warm span {
  background-image: linear-gradient(90deg, #a88973, #8d596e);
  background-repeat: no-repeat;
  background-position: bottom;
  background-size: 100% 40%;
  z-index: 1;
}

.marker_yellow span {
  background: linear-gradient(transparent 60%, #ffff5f 60%);
  z-index: 1;
}

/* h-group */
h1.title-gold,
h2.title-gold {
  margin: 0 0 50px 0;
  padding: 15px 0 0 0;
  color: var(--gold-title);
  font-family: var(--fa-mincho);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-align: center;
  position: relative;
}

h1.title-ppl,
h2.title-ppl {
  margin: 0 0 50px 0;
  padding: 15px 0 0 0;
  color: var(--purple);
  font-family: var(--fa-mincho);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-align: center;
  position: relative;
}

h1.title-gold span,
h1.title-ppl span,
h2.title-gold span,
h2.title-ppl span {
  font-size: 1.2rem;
  font-weight: normal;
  position: absolute;
  top: 110%;
  left: 50%;
  transform: translate(-50%, -50%);
}

@media screen and (max-width: 320px) {

  h1.title-gold,
  h1.title-ppl,
  h2.title-gold,
  h2.title-ppl {
    font-size: 1.4rem;
  }
}

h1.title-gold::after,
h1.title-ppl::after,
h2.title-gold::after,
h2.title-ppl::after {
  position: absolute;
  bottom: -90%;
  left: 50%;
  transform: translate(-50%, -50%);
  content: "";
  display: inline-block;
  width: 150px;
  height: 18px;
  background-image: url(../img/header/line-dec.svg);
  background-size: contain;
}

h1.heading,
h2.heading {
  margin: 0;
  padding: 0 10px;
  height: 30px;
  line-height: 30px;
  color: var(--white);
  background-image: var(--gradient-ppl);
  font-family: var(--fa_hiragino-maru-gothic);
  font-style: normal;
  font-weight: 700;
  font-size: 1.4rem;
  text-align: center;
  letter-spacing: 1px;
  border-bottom: none;
}

h1.heading:before {
  display: none;
}

h3.subheading {
  margin-bottom: 10px;
}

h3.subheading::before {
  content: "";
  width: 20px;
  height: 20px;
  background: url(../img/item/cmn_icon_dia.svg);
  background-size: contain;
  top: 4px;
  left: 0;
  margin-right: 5px;
  position: relative;
  display: inline-block;
}

/* box */
.box_inner {
  margin: 15px 0;
  padding: 15px;
  border-radius: 8px;
  background-color: var(--white);
  filter: drop-shadow(0 1px 0.1px rgba(0, 0, 0, 0.1));
}

.box_inner-ppl-light {
  margin: 15px 0;
  padding: 15px;
  border-radius: 8px;
  background-color: var(--purple-light);
}

/* button */
.button_more,
.button_more-wht {
  text-align: right;
  padding: 10px 0;
}

.button_more::before {
  display: inline-block;
  content: url(../img/header/cmn_right-arrow-ppl.svg);
  width: 9px;
  height: 9px;
  position: relative;
  top: 0;
  right: 3px;
}

.button_more-wht a {
  color: var(--white);
}

.button_more-wht::before {
  display: inline-block;
  content: url(../img/header/cmn_right-arrow-wht.svg);
  width: 9px;
  height: 9px;
  position: relative;
  top: 0;
  right: 5px;
}

.right-arrow-ppl::before {
  display: inline-block;
  content: url(../img/header/cmn_right-arrow-ppl.svg);
  width: 8px;
  height: 8px;
  position: relative;
  top: 0;
  right: 5px;
}

.right-arrow-wht::before {
  display: inline-block;
  content: url(../img/header/cmn_right-arrow-wht.svg);
  width: 8px;
  height: 8px;
  position: relative;
  top: 0;
  right: 5px;
}

.button_size-small {
  display: block;
  margin: 10px 20px;
  padding: 8px 20px;
  color: var(--raspberry);
  font-size: 1.2rem;
  text-align: center;
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--raspberry);
  border-radius: 50px;
}

.button_size-small::before {
  display: inline-block;
  content: url(../img/header/cmn_right-arrow-ppl.svg);
  width: 9px;
  height: 9px;
  position: relative;
  top: 0;
  right: 5px;
}

.button_size-xs {
  margin: 12px auto 2px;
  padding: 5px 20px 7px 25px;
  color: var(--raspberry);
  font-size: 1rem;
  text-align: center;
  text-decoration: none;
  background: var(--white);
  border: 1px solid var(--raspberry);
  border-radius: 50px;
  display: inline-block;
}

#js-btn-more-ajax {
  display: block;
  position: relative;
  width: 75%;
  margin: 25px auto;
  padding: 20px 0;
  color: var(--white);
  background-image: var(--gradient-ppl);
  font-family: var(--fa_hiragino-maru-gothic);
  font-size: 1.4rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  letter-spacing: 1px;
  border: none;
  border-radius: 50px;
}

#js-btn-more-ajax::after {
  position: absolute;
  top: 35%;
  right: 7%;
  display: block;
  content: '';
  width: 10px;
  height: 10px;
  border-top: 1px solid var(--white);
  border-right: 1px solid var(--white);
  transform: rotate(135deg);
}

.btn_text_sm {
  font-size: 1.2rem;
}

/* bottom_color */
.button_area {
  padding: 10px;
}

.button_default {
  border-radius: 50px;
  position: relative;
}

a.button_default,
input.button_default,
label.button_default,
button.button_default,
.button_default a,
.button_default input {
  display: block;
  margin: 0 auto;
  padding: 13px 0 15px 0;
  color: var(--white);
  font-size: 1.6rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  border: none;
  border-radius: 50px;
  position: relative;
}

.button_default::after {
  position: absolute;
  top: 50%;
  right: 20px;
  display: block;
  content: '';
  width: 5px;
  height: 5px;
  margin-top: -4px;
  border-top: 1px solid var(--white);
  border-right: 1px solid var(--white);
  transform: rotate(45deg);
}

a.button_default-wht,
input.button_default-wht,
.button_default-wht a,
.button_default-wht input {
  display: block;
  border-radius: 50px;
  margin: 0 auto;
  padding: 13px 0 15px 0;
  background-color: var(--white);
  border: 1px solid var(--raspberry);
  color: var(--raspberry);
  font-size: 1.6rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  position: relative;
}

input.button_default,
button.button_default {
  width: 100%;
}

.theme_ppl,
.theme_ppl input {
  background-image: linear-gradient(-45deg, var(--purple), var(--raspberry));
  letter-spacing: 0.05em;
}

.theme_line,
.theme_line input {
  background-image: linear-gradient(103deg, #21b83c, #2accc1);
  letter-spacing: 0.05em;
}

.theme_ashen {
  background: var(--gray);
  color: var(--gray-mid);
}

.button_default.theme_blue.disabled input {
  background: var(--gray);
  pointer-events: none;
  box-shadow: 0 2px 3px rgba(0, 0, 0, 0.2);
}

.button__small-primary {
  display: block;
  margin: 10px 30px;
  padding: 5px;
  color: var(--white);
  font-size: 1.2rem;
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: none;
  border: 1px solid var(--white);
  border-radius: 50px;
}

@media screen and (max-width: 320px) {
  .button__small-primary {
    font-size: 1rem;
  }
}

/* box */
.ex_box {
  margin: 10px 0;
  padding: 15px;
  background-color: var(--gray-light);
  border-radius: 5px;
}

/* line */
.line_border-top {
  border-top: 0.5px solid #6d214f;
}

/* bubble box */
.bubble {
  position: relative;
  margin: 5px 0 0 60px;
  border: 1px solid var(--gold);
  border-radius: 10px;
  background: var(--white);
  word-wrap: break-word;
}

.bubble a {
  display: block;
  padding: 1.4rem;
  text-decoration: none;
}

.bubble a p {
  overflow: hidden;
  width: 100%;
}

.bubble a p span {
  color: var(--black);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.bubble::after,
.bubble::before {
  position: absolute;
  content: " ";
  height: 0;
  width: 0;
}

.bubble-half-left::after,
.bubble-half-left::before {
  right: 100%;
  top: 20px;
}

.bubble-half-left::after {
  border-top: 10px solid var(--white);
  border-left: 10px solid transparent;
}

.bubble-half-left::before {
  border-left: 12px solid transparent;
  border-top: 12px solid #e0d9ca;
  margin-top: -1px;
}

.bubble div.spec {
  font-size: 10px;
  color: var(--gray-dark);
  display: flex;
  flex-direction: row-reverse;
}

div.bubble div.spec div {
  margin: 10px 0 0 10px;
}

/* pager-cont */
#pager-cont {
  position: relative;
  overflow: hidden;
  padding: 10px;
}

ul.pager {
  position: relative;
  display: table;
  table-layout: fixed;
  width: 100%;
  text-align: center;
  filter: drop-shadow(0 1px 0.1px rgba(0, 0, 0, 0.1));
}

ul.pager li {
  display: table-cell;
  padding: 0 2px 0 2px;
}

ul.pager .pagerNums {
  left: 50%;
  width: 100px;
  margin-left: -50px;
}

ul.pager li.prev,
ul.pager li.next {
  margin: 0 10px;
}

ul.pager li a {
  padding: 5px 10px;
  background-color: var(--white);
  border-radius: 5px;
  color: var(--purple);
  text-decoration: none;
  position: relative;
  display: block;
}

ul.pager li a:link,
ul.pager li a:visited {
  text-decoration: none;
}

ul.pager li em {
  display: block;
  padding: 5px 10px;
  background: var(--white);
  color: var(--raspberry);
  font-weight: bold;
  font-style: normal;
}

ul.pager li b {
  color: var(--raspberry);
  font-size: larger;
}

/* page-top */
#page-top-sp {
  position: fixed;
  bottom: 120px;
  right: 10px;
  z-index: 2;
}

#page-top-sp a {
  display: block;
  opacity: 0.8;
  background-image: var(--gradient-ppl);
  color: var(--white);
  text-align: center;
  text-decoration: none;
  width: 50px;
  height: 50px;
  line-height: 33px;
  border-radius: 50px;
}

/* lazyload */
.lazyload {
  display: none;
}

/* etc */
.below {
  text-decoration: underline;
  text-underline-position: below;
}

img.thumb {
  float: left;
  margin-right: 10px;
  border: solid 1px var(--gray);
  padding: 2px;
}

ul.type-disc li {
  list-style-type: disc;
  margin: 0 0 0 20px;
  padding: 5px 0 5px 5px;
}

.cmt {
  font-size: 1rem;
  font-weight: 200;
}

.cmt::before {
  content: "※";
  font-size: 1rem;
  font-weight: 200;
}

.cmt-lr::before {
  content: "※";
  font-size: 1.4rem;
  font-weight: 200;
}

/* margin */
.mT2 {
  margin-top: 2px;
}

.mT5 {
  margin-top: 5px;
}

.mT10 {
  margin-top: 10px;
}

.mT15 {
  margin-top: 15px;
}

.mT20 {
  margin-top: 20px;
}

.mT30 {
  margin-top: 30px;
}

.mB2 {
  margin-bottom: 2px;
}

.mB5 {
  margin-bottom: 5px;
}

.mB10 {
  margin-bottom: 10px;
}

.mB15 {
  margin-bottom: 15px;
}

.mB20 {
  margin-bottom: 20px;
}

.mB30 {
  margin-bottom: 30px;
}

.pT2 {
  padding-top: 2px;
}

.pT5 {
  padding-top: 5px;
}

.pT10 {
  padding-top: 10px;
}

.pT15 {
  padding-top: 15px;
}

.pT20 {
  padding-top: 20px;
}

.pT30 {
  padding-top: 30px;
}

.pB2 {
  padding-bottom: 2px;
}

.pB5 {
  padding-bottom: 5px;
}

.pB10 {
  padding-bottom: 10px;
}

.pB15 {
  padding-bottom: 15px;
}

.pB20 {
  padding-bottom: 20px;
}

.pB30 {
  padding-bottom: 30px;
}

.pR15 {
  padding-right: 15px;
}

.pL15 {
  padding-left: 15px;
}

.pR25 {
  padding-right: 25px;
}

.pL25 {
  padding-left: 25px;
}

.mTB5 {
  margin: 5px 0;
}

.mTB10 {
  margin: 10px 0;
}

.mTB15 {
  margin: 15px 0;
}

.mTB20 {
  margin: 20px 0;
}

.mTB30 {
  margin: 30px 0;
}

.mLR10 {
  margin: 0 10px;
}

.pTB5 {
  padding: 5px 0;
}

.pTB10 {
  padding: 10px 0;
}

.pTB15 {
  padding: 15px 0;
}

.pTB20 {
  padding: 20px 0;
}

.pTB30 {
  padding: 30px 0;
}

.pLR10 {
  padding: 0 10px;
}

.m0 {
  margin: 0;
}

.m2 {
  margin: 2px;
}

.m5 {
  margin: 5px;
}

.m10 {
  margin: 10px;
}

.m15 {
  margin: 15px;
}

.m20 {
  margin: 20px;
}

.m30 {
  margin: 30px;
}

.p0 {
  padding: 0;
}

.p2 {
  padding: 2px;
}

.p5 {
  padding: 5px;
}

.p10 {
  padding: 10px;
}

.p15 {
  padding: 15px;
}

.p20 {
  padding: 20px;
}

.p30 {
  padding: 30px;
}


@media screen and (max-width: 415px) {
  .sec_scroll-content {
    border-left: none;
    border-right: none;
    box-shadow: none;
  }
}


/* header */
#exHeader {
  display: block;
  width: 100%;
  height: 45px;
  padding: 0;
  clear: both;
  overflow: hidden;
  position: relative;
  border-bottom: 1px solid var(--gray-mid);
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: var(--white);
}

#exHeader #exHeaderInner {
  display: flex;
  justify-content: flex-end;
  margin: 4px 3px 0 0;
}

#exHeader #siteLogo {
  position: absolute;
  top: 7px;
  left: 10px;
}

#exHeader .headerBtn {
  margin-left: 2px;
}

#exHeader .exSupportNumber {
  display: flex;
  justify-content: flex-end;
}

#exHeader .exSupportNumber .exPhoneNumber {
  margin: 4px 8px 0 0;
}

#exHeader #exHeaderInner_recruit {
  display: flex;
  justify-content: flex-end;
  margin: 3px 3px 0 0;
}

#headerComment {
  padding: 0 5px;
}

#headerComment h1 {
  color: var(--purple);
  font-size: 0.8rem;
  font-weight: normal;
}

hr.headerLine {
  margin: 0;
  height: 2px;
  border: none;
  background-color: var(--purple);
}

.scrollView {
  position: fixed;
  width: 100%;
  z-index: 99;
  top: 0;
}

/* Layout */
#wrapper {
  text-align: left;
  width: 100%;
}

#defaultHeader {
  top: 45px;
  width: 100%;
  z-index: 10;
}

#exHeader #logoSub {
  line-height: 0;
}

#headerWrapper {
  width: 100%;
  z-index: 2;
}

#commonHeader {
  z-index: 10;
  background-color: var(--white);
}

#mainContents {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  position: relative;
  background: var(--white);
}

#mainContents.noMenu {
  margin: 0;
}

.fixed {
  position: fixed;
  top: 0;
  z-index: 100;
}

/* global navi */
ul.globalNavi {
  margin: 0;
  width: 100%;
  display: table;
  table-layout: fixed;
  background: var(--purple);
  opacity: 0.9;
}

ul.globalNavi li {
  display: table-cell;
  width: 100%;
  position: relative;
}

ul.globalNavi li:last-child {
  display: table-cell;
  width: 100%;
  border-right: none;
}

ul.globalNavi li a,
ul.globalNavi li span {
  display: block;
  width: 100%;
  height: 50px;
  text-decoration: none;
}

ul.globalNavi li.nav a span,
ul.globalNavi li.nav span {
  display: block;
  padding-top: 30px;
  text-align: center;
  font-size: 1rem;
  color: var(--gold);
  height: 20px;
}

ul.globalNavi li.menu_icon-profsearch a::before {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  content: "";
  display: inline-block;
  width: 1.8em;
  height: 1.8em;
  background: url(../img/header/menu_icon_profsearch.svg) no-repeat;
  background-size: contain;
}

ul.globalNavi li.menu_icon-category a::before {
  position: absolute;
  top: 35%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  content: "";
  display: inline-block;
  width: 1.8em;
  height: 1.8em;
  background: url(../img/header/menu_icon_category.svg) no-repeat;
  background-size: contain;
}

ul.globalNavi li.menu_icon-ranking a::before {
  position: absolute;
  top: 33%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  content: "";
  display: inline-block;
  width: 1.8em;
  height: 1.8em;
  background: url(../img/header/menu_icon_ranking.svg) no-repeat;
  background-size: contain;
}

ul.globalNavi li.menu_icon-rev a::before {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  content: "";
  display: inline-block;
  width: 1.8em;
  height: 1.8em;
  background: url(../img/header/menu_icon_rev.svg) no-repeat;
  background-size: contain;
}

ul.globalNavi li.menu_icon-freemail a::before {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  content: "";
  display: inline-block;
  width: 1.8em;
  height: 1.8em;
  background: url(../img/header/menu_icon_freemail.svg) no-repeat;
  background-size: contain;
}

ul.globalNavi li.menu_icon-guide a::before {
  position: absolute;
  top: 37%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  content: "";
  display: inline-block;
  width: 1.6em;
  height: 1.6em;
  background: url(../img/header/menu_icon_guide.svg) no-repeat;
  background-size: contain;
}

ul.globalNavi li.menu_icon-mymenu span::before {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  content: "";
  display: inline-block;
  width: 2.5em;
  height: 2.5em;
  background: url(../img/header/menu_icon_mymenu.svg) no-repeat;
  background-size: contain;
}

ul.globalNavi li.menu_icon-coupon span::before {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  content: "";
  display: inline-block;
  width: 2.8em;
  height: 2.8em;
  background: url(../img/header/menu_icon_coupon.svg) no-repeat;
  background-size: contain;
}

ul.globalNavi li.menu_icon-sche span::before {
  position: absolute;
  top: 38%;
  left: 50%;
  transform: translate(-50%, -50%);
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  content: "";
  display: inline-block;
  width: 2.8em;
  height: 2.8em;
  background: url(../img/header/menu_icon_sche.svg) no-repeat;
  background-size: contain;
}

.new_badge {
  position: absolute;
  top: 5px;
  right: 18px;
  border-radius: 50%;
  background-color: var(--red);
  border: 5px solid var(--red);
  display: block;
}

/* mymenu */
#drawer .drawer-nav {
  z-index: 100;
}

#drawer .drawer-overlay {
  z-index: 99;
}

#drawer .drawer ul.drawer-menu li.my_menu_primary a {
  display: block;
  margin: 0;
  padding: 10px 8px;
  border-right: 1px solid var(--gold-light);
  border-bottom: 1px solid var(--gold-light);
  color: var(--purple);
  font-size: 1.1rem;
  text-decoration: none;
}

#drawer .drawer ul.drawer-menu li h2.heading {
  font-size: 1.2rem;
  font-weight: 700;
  text-align: left;
}

#drawer ul.drawer-menu-inner {
  display: flex;
  flex-wrap: wrap;
}

#drawer ul.drawer-menu-inner li {
  position: relative;
  width: calc(50% - 0px);
}

.drawer-close {
  position: absolute;
  top: 10px;
  right: -130px;
}

.drawer-close button {
  background-color: transparent;
  border: none;
  cursor: pointer;
  outline: none;
  padding: 0;
  appearance: none;
}

.user_status {
  padding: 15px 20px 10px 20px;
  text-align: center;
  letter-spacing: 0.05em;
}

.user_status_name,
.user_status_coin {
  color: var(--white);
  font-weight: 700;
}

.user_status_name span,
.user_status_coin span,
.user_status_myrank span {
  font-size: 1rem;
}

.user_id_name {
  margin: 0 0 10px 0;
  color: var(--white);
  font-size: 1rem;
  overflow-wrap: break-word;
}

.user_status_coin {
  position: relative;
  margin: 0 0 8px 0;
  padding: 7px 10px;
}

.user_status_coin a {
  color: var(--purple);
  text-decoration: none;
}

.user_status_coin p::before {
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../img/header/cmn_icon_coin_front_y.svg) no-repeat;
  background-size: contain;
  position: relative;
  top: 3px;
  right: 5px;
}

.user_status_coin p::after {
  position: absolute;
  top: 30%;
  right: 15px;
  content: " ";
  display: inline-block;
  width: 15px;
  height: 15px;
  background: url(../img/header/cmn_icon_plus.svg);
  background-size: contain;
}

.user_status_box {
  background: var(--white);
  border-radius: 50px;
}

/* .my_top a::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background: url(../img/header/my/drawer/icon_top.svg) no-repeat;
  background-size: contain;
  position: relative;
  top: 3px;
  margin-right: 7px;
}

.my_fav a::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background: url(../img/header/my/drawer/icon_rank.svg) no-repeat;
  background-size: contain;
  position: relative;
  top: 3px;
  margin-right: 7px;
} */

/* .my_web_push a {
  position: relative;
}

.my_web_push a::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background: url(../img/header/my/drawer/icon_push.svg) no-repeat;
  background-size: contain;
  position: relative;
  top: 3px;
  margin-right: 7px;
}

.my_mail a {
  position: relative;
}

.my_mail a::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background: url(../img/header/my/drawer/icon_mail.svg) no-repeat;
  background-size: contain;
  position: relative;
  top: 4px;
  margin-right: 5px;
}

.my_rev a::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background: url(../img/header/my/drawer/icon_rev.svg) no-repeat;
  background-size: contain;
  position: relative;
  top: 4px;
  margin-right: 7px;
}

.my_photo a::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background: url(../img/header/my/drawer/icon_photo.svg) no-repeat;
  background-size: contain;
  position: relative;
  top: 4px;
  margin-right: 7px;
}

.my_rank a::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background: url(../img/header/my/drawer/icon_rank.svg) no-repeat;
  background-size: contain;
  position: relative;
  top: 5px;
  margin-right: 7px;
}

.my_statement a::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background: url(../img/header/my/drawer/icon_statement.svg) no-repeat;
  background-size: contain;
  position: relative;
  top: 3px;
  margin-right: 7px;
}

.my_pay a {
  position: relative;
}

.my_pay a::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background: url(../img/header/my/drawer/icon_pay.svg) no-repeat;
  background-size: contain;
  position: relative;
  top: 3px;
  margin-right: 7px;
}

.my_coin a::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background: url(../img/header/my/drawer/icon_coin.svg) no-repeat;
  background-size: contain;
  position: relative;
  top: 3px;
  margin-right: 7px;
}

.my_card a::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background: url(../img/header/my/drawer/icon_card.svg) no-repeat;
  background-size: contain;
  position: relative;
  top: 5px;
  margin-right: 7px;
}

.my_prof a::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background: url(../img/header/my/drawer/icon_prof.svg) no-repeat;
  background-size: contain;
  position: relative;
  top: 3px;
  margin-right: 7px;
}

.my_line a::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background: url(../img/header/my/drawer/icon_line.svg) no-repeat;
  background-size: contain;
  position: relative;
  top: 3px;
  margin-right: 7px;
}

.my_logout a::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background: url(../img/header/my/drawer/icon_logout.svg) no-repeat;
  background-size: contain;
  position: relative;
  top: 3px;
  margin-right: 7px;
}

.my_phone a::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background: url(../img/header/my/drawer/icon_phone.svg) no-repeat;
  background-size: contain;
  position: relative;
  top: 3px;
  margin-right: 7px;
}

.my_app a::before {
  content: "";
  display: inline-block;
  width: 1.2em;
  height: 1.2em;
  background: url(../img/header/my/drawer/icon_app.svg) no-repeat;
  background-size: contain;
  position: relative;
  top: 3px;
  margin-right: 7px;
}

.my_present a::before {
  content: "";
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  background: url(../img/header/my/drawer/icon_present.svg) no-repeat;
  background-size: contain;
  position: relative;
  top: 3px;
  margin-right: 5px;
}

.my_coupon a::before {
  content: "";
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  background: url(../img/header/my/drawer/icon_coupon.svg) no-repeat;
  background-size: contain;
  position: relative;
  top: 3px;
  margin-right: 5px;
}

.my_help a::before {
  content: "";
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  background: url(../img/header/my/drawer/icon_help.svg) no-repeat;
  background-size: contain;
  position: relative;
  top: 3px;
  margin-right: 5px;
}

.my_charge a::before {
  content: "";
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  background: url(../img/header/my/drawer/icon_charge.svg) no-repeat;
  background-size: contain;
  position: relative;
  top: 3px;
  margin-right: 5px;
}

.my_concierge a::before {
  content: "";
  display: inline-block;
  width: 1.3em;
  height: 1.3em;
  background: url(../img/header/my/drawer/icon_concierge.svg) no-repeat;
  background-size: contain;
  position: relative;
  top: 3px;
  margin-right: 5px;
} */

.my_mail_recv a {
  position: relative;
}

.my_msg a {
  position: relative;
}

.my_line span,
.my_web_push span,
.my_mail_recv span,
.my_msg span {
  display: block;
  padding-left: 25px;
}

.my_unpaid a {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  color: var(--white);
  background-color: #ee5253;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.05em;
  position: relative;
  padding: 5px 0;
}

.my_unpaid a::after {
  position: absolute;
  top: 50%;
  right: 10px;
  display: block;
  content: '';
  width: 5px;
  height: 5px;
  margin-top: -3px;
  border-top: 2px solid var(--white);
  border-right: 2px solid var(--white);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

.my_unpaid a span::before {
  content: "";
  display: inline-block;
  width: 1.4em;
  height: 1.4em;
  background: url(../img/header/my/drawer/icon_exclamation_circle.svg) no-repeat;
  background-size: contain;
  position: relative;
  top: 3px;
  margin-right: 5px;
}

.my_unpaid a .my_unpaid_total {
  color: #ee5253;
  background: var(--white);
  margin: 5px auto;
  padding: 2px 0;
  border-radius: 50px;
  width: 55%;
}

.my_concierge_bn {
  padding: 10px 10px 20px;
}

/* Parts */
ul.text_area li {
  border-bottom: 1px solid var(--gold-light);
}

ul.text_area li:last-child {
  border-bottom: none;
}

ul.text_area li.text_area_01 {
  padding: 10px;
}

ul.text_area li.text_area_01 .icon_fav::before {
  display: inline-block;
  background: url(../img/header/icon_fav_add.svg);
  content: "";
  width: 20px;
  height: 20px;
  background-size: contain;
  position: relative;
  top: 4px;
  right: 3px;
}

.fav_icon_group {
  position: relative;
  height: 25px;
}

.fav_icon {
  position: absolute;
  top: -10px;
  left: -5px;
}

.fav_icon::before {
  position: relative;
  top: 5px;
  left: 1px;
  content: "";
  display: inline-block;
  width: 1.5em;
  height: 1.5em;
  background: url(../img/header/icon_fav_add.svg) no-repeat;
  background-size: contain;
}

ul.list {
  margin: 0;
}

ul.list li {
  border-bottom: 1px solid var(--gray);
}

ul.list li:last-child {
  border-bottom: none;
}

ul.list li a {
  position: relative;
  display: block;
  padding: 10px 25px 10px 10px;
}

ul.list li a::after {
  position: absolute;
  top: 50%;
  right: 10px;
  display: block;
  content: '';
  width: 5px;
  height: 5px;
  margin-top: -4px;
  border-top: 1px solid var(--gold);
  border-right: 1px solid var(--gold);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

ul.list li i.fa-comment {
  margin-right: 5px;
  color: #dfcca7;
}

ul.featureList {
  margin: 0;
}

ul.featureList li {
  border-bottom: 1px solid var(--gray);
}

ul.featureList li:last-child {
  border-bottom: none;
}

ul.featureList li a {
  position: relative;
  display: block;
  padding: 15px 25px 15px 10px;
}

ul.featureList li a::after {
  position: absolute;
  top: 50%;
  right: 10px;
  display: block;
  content: '';
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-top: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

ul.featureList li img {
  float: left;
  width: 64px;
  height: 40px;
  margin-right: 10px;
  border: #d9d9d9 1px solid;
  padding: 2px;
}

ul.featureList li p {
  overflow: hidden;
}

ul.featureList li p.fortuneArticleTitle {
  min-height: 50px;
}

ul.fortune_list {
  margin: 0;
}

ul.fortune_list li a {
  position: relative;
  display: block;
  padding: 10px 25px 10px 10px;
  border-top: 1px solid var(--gray);
}

ul.fortune_list li a::after {
  position: absolute;
  top: 50%;
  right: 10px;
  display: block;
  content: '';
  width: 8px;
  height: 8px;
  margin-top: -4px;
  border-top: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}

ul.fortune_list li a div {
  display: table-cell;
  vertical-align: top;
  overflow: hidden;
  width: 60px;
  height: 60px;
  position: relative;
}

ul.fortune_list li a div img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: auto;
}

ul.fortune_list li a p {
  position: absolute;
  top: 10px;
  left: 80px;
  margin-right: 15px;
  overflow: hidden;
}

ul.fortune_list li a p span.date {
  display: block;
  font-size: 10px;
  color: #999;
}

ul.fortune_list li a p span.text {
  display: block;
  font-size: 14px;
  color: var(--black);
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

ul.list li a,
ul.featureList li a,
ul.navList li a:link {
  color: var(--purple);
  text-decoration: none;
}

/* footer */
.footer_nav_list {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  border-top: 1px solid #52385e;
}

.footer_nav_list>li {
  width: 50%;
  list-style: none;
  background: var(--purple-dark);
  box-sizing: border-box;
  border-right: 1px solid #52385e;
  border-bottom: 1px solid #52385e;
  position: relative;
}

.footer_nav_list>li:last-child {
  border-right: none;
  width: 100%;
}

.footer_nav_list>li a {
  display: block;
  padding: 10px;
  color: var(--white);
  text-align: center;
  text-decoration: none;
}

.footer_nav_list>li a::after {
  position: absolute;
  top: 50%;
  right: 10px;
  display: block;
  content: '';
  width: 5px;
  height: 5px;
  margin-top: -4px;
  border-top: 2px solid var(--gold);
  border-right: 2px solid var(--gold);
  transform: rotate(45deg);
}

#footer {
  background-color: #000b00;
}

#footer .ex_media_link {
  padding: 20px;
  background-color: #000b00;
}

#footer .ex_media_link ul {
  display: flex;
  justify-content: center;
}

#footer .ex_media_link ul li a {
  color: var(--white);
  font-size: 1rem;
  text-decoration: none;
  letter-spacing: 0.05em;
  padding: 5px;
}

#footer .footer_logo {
  padding: 15px 0 0 0;
  text-align: center;
}

#footer .footer_link {
  margin-top: 15px;
}

#footer .footer_link ul {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  padding: 10px 0;
}

#footer .footer_link ul>li {
  width: 50%;
  list-style: none;
  box-sizing: border-box;
  position: relative;
}

#footer .footer_link ul>li a {
  color: var(--white);
  font-size: 1.2rem;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.05em;
  padding: 5px 0;
  display: block;
}

/* 
#footer .footer_link ul li span::after {
  position: relative;
  top: 1px;
  left: 3px;
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  background: url(../img/header/cmn_icon_blank.svg) no-repeat;
  background-size: contain;
} */

#footer .footer_link .line_lame {
  padding: 0 10px;
  text-align: center;
}

#footer .footer_link .line_lame img {
  display: block;
  margin: 0 auto;
  width: 100% !important;
  height: auto !important;
}

#footer .d_display_mode {
  color: var(--white);
  font-size: 1rem;
  text-align: center;
  border-top: 1px solid #49555f;
  border-bottom: 1px solid #49555f;
  padding: 10px 0;
}

#footer .d_display_mode a {
  color: var(--gold);
}

#footer .d_display_mode ul {
  display: flex;
  justify-content: center;
}

#footer .d_display_mode ul li {
  padding: 0 5px;
}

#footer .d_display_mode ul li.border_right {
  border-right: 1px solid #49555f;
}

#footer .copyright {
  color: var(--white);
  font-size: 1rem;
  text-align: center;
  letter-spacing: 0.05em;
  padding: 15px 0;
}

#footer .copyright .address {
  padding-bottom: 5px;
}

#footer .copyright .address a {
  color: var(--white);
}

#footer .copyright .copyright {
  color: #5f6f7c;
  padding: 10px 0 15px 0;
}

.section__footer-content-inner {
  padding: 15px;
}

.footer-content-img {
  padding-top: 15px;
  text-align: center;
}

/* 占い師募集バナー */
.footer_bnr {
  text-align: center;
  margin: 15px 0;
  padding: 10px;
}

.footer_bnr img {
  width: 100% !important;
  height: auto !important;
}

/* 鑑定手順バナー */
.bn-call-area img {
  margin: 5px 0;
}

/* status button */
#btn_area_card {
  display: block;
  width: 100%;
  position: absolute;
  top: 73%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#btn_area_card div.btn_status .btn_text_group {
  width: 100%;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  margin: 0 auto;
  line-height: 1.3;
}

#btn_area_card div.btn_status a {
  display: block;
  position: relative;
  width: 80%;
  height: 40px;
  line-height: 40px;
  margin: 0 auto;
  font-family: var(--fa_hiragino-maru-gothic);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-decoration: none;
  border-radius: 25px;
}

/* 
#btn_area_card .btn_status .icon_status_standby::before {
  position: relative;
  top: 3px;
  right: 3px;
  content: "";
  display: inline-block;
  width: 19px;
  height: 19px;
  background: url(../img/header/cmn_icon_status_standby.svg) no-repeat;
  background-size: contain;
} */

#btn_area_card div.btn_status a::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: -50%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
}

#btn_area_card .btn_status .icon_status_call::before {
  position: relative;
  top: 4px;
  right: 5px;
  content: "";
  display: inline-block;
  width: 19px;
  height: 19px;
  background: url(../img/header/cmn_icon_status_call.svg) no-repeat;
  background-size: contain;
}

#btn_area_card .btn_status .icon_status_resv::before {
  position: relative;
  top: 3px;
  right: 3px;
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  background: url(../img/header/cmn_icon_status_sche.svg) no-repeat;
  background-size: contain;
}

#btn_area_card .btn_status .icon_status_out::before {
  position: relative;
  top: 3px;
  right: 4px;
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../img/header/cmn_icon_status_wait.svg) no-repeat;
  background-size: contain;
}

#btn_area_list .btn_status .icon_status_standby::before {
  position: relative;
  top: 2px;
  right: 3px;
  content: "";
  display: inline-block;
  width: 19px;
  height: 19px;
  background: url(../img/header/cmn_icon_status_standby.svg) no-repeat;
  background-size: contain;
}

#btn_area_list .btn_status .icon_status_call::before {
  position: relative;
  top: 4px;
  right: 6px;
  content: "";
  display: inline-block;
  width: 20px;
  height: 20px;
  background: url(../img/header/cmn_icon_status_call.svg) no-repeat;
  background-size: contain;
}

#btn_area_list .btn_status .icon_status_resv::before {
  position: relative;
  top: 3px;
  right: 4px;
  content: "";
  display: inline-block;
  width: 19px;
  height: 19px;
  background: url(../img/header/cmn_icon_status_sche.svg) no-repeat;
  background-size: contain;
}

#btn_area_list .btn_status .icon_status_out::before {
  position: relative;
  top: 3px;
  right: 5px;
  content: "";
  display: inline-block;
  width: 17px;
  height: 17px;
  background: url(../img/header/cmn_icon_status_wait.svg) no-repeat;
  background-size: contain;
}

a.btn_status_call p.btn_text_status,
a.btn_status_out p.btn_text_status,
a.btn_status_resv p.btn_text_status,
a.btn_status_sch p.btn_text_status {
  color: var(--white);
}

a.btn_status_call p.btn_text_wait,
a.btn_status_out p.btn_text_wait,
a.btn_status_resv p.btn_text_wait,
a.btn_status_sch p.btn_text_wait {
  color: var(--white);
  font-size: 0.8rem;
  margin-bottom: 2px;
}

#btn_area_list a.btn_status_call .btn_text_group,
#btn_area_list a.btn_status_resv .btn_text_group,
#btn_area_list a.btn_status_sch .btn_text_group,
#btn_area_list a.btn_status_out .btn_text_group {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  margin: auto;
  line-height: 1.5;
}

#btn_area_list a.btn_status_call .btn_text_group p,
#btn_area_list a.btn_status_resv .btn_text_group p,
#btn_area_list a.btn_status_sch .btn_text_group p,
#btn_area_list a.btn_status_out .btn_text_group p {
  color: var(--white);
}

#btn_area_list a.btn_status_call .btn_text_group .btn_text_status,
#btn_area_list a.btn_status_resv .btn_text_group .btn_text_status,
#btn_area_list a.btn_status_sch .btn_text_group .btn_text_status,
#btn_area_list a.btn_status_out .btn_text_group .btn_text_status {
  font-size: 1.6rem;
  margin-bottom: -3px;
}

#btn_area_list a.btn_status_call .btn_text_group .btn_text_wait,
#btn_area_list a.btn_status_resv .btn_text_group .btn_text_wait,
#btn_area_list a.btn_status_sch .btn_text_group .btn_text_wait,
#btn_area_list a.btn_status_out .btn_text_group .btn_text_wait {
  display: block;
  font-size: 1rem;
}

a.btn_status_standby,
span.btn_status_standby {
  color: var(--white);
  background: var(--gradient-status-standby);
  border: solid 1px var(--white);
  outline: solid 1.5px var(--gold);
  z-index: 1;
}

a.btn_status_call {
  color: var(--white);
  background: var(--gradient-status-call);
  border: solid 1px var(--white);
  outline: solid 1.5px var(--gold);
  z-index: 1;
}

a.btn_status_resv {
  color: var(--white);
  background: var(--gradient-status-resv);
  border: solid 1px var(--white);
  outline: solid 1.5px var(--gold);
  z-index: 1;
}

a.btn_status_out {
  color: var(--white);
  background: var(--gradient-status-out);
  border: solid 1px var(--white);
  outline: solid 1.5px var(--gold);
  z-index: 1;
}

a.btn_status_standby::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  height: 45px;
  width: 100%;
  opacity: 0.5;
  border-radius: 50px;
  background: var(--gradient-status-standby);
  filter: blur(8px);
  z-index: -1;
}

a.btn_status_call::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  height: 45px;
  width: 100%;
  opacity: 0.5;
  border-radius: 50px;
  background: var(--gradient-status-call);
  filter: blur(8px);
  z-index: -1;
}

a.btn_status_resv::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  height: 45px;
  width: 100%;
  opacity: 0.5;
  border-radius: 50px;
  background: var(--gradient-status-resv);
  filter: blur(8px);
  z-index: -1;
}

a.btn_status_out::after {
  content: "";
  position: absolute;
  top: 6px;
  left: 0;
  height: 45px;
  width: 100%;
  opacity: 0.5;
  border-radius: 50px;
  background: var(--gradient-status-out);
  filter: blur(8px);
  z-index: -1;
}

/* アニメーション */
.animation_blinking {
  animation: flash 3s linear infinite;
}

@keyframes flash {

  0%,
  100% {
    opacity: 1;
  }

  50% {
    opacity: 0.5;
  }
}

/* ステータスボタン（リスト） */
#btn_area_list {
  display: flex;
  flex-direction: row;
  padding: 10px 25px;
}

#btn_area_list .btn_status a {
  display: block;
  position: relative;
  margin: 0;
  padding: 0;
  height: 50px;
  line-height: 50px;
  font-size: 1.6rem;
  font-weight: 700;
  font-family: var(--fa_hiragino-maru-gothic);
  letter-spacing: 0.05em;
  text-align: center;
  text-decoration: none;
  border-radius: 50px;
}

#btn_area_list .btn_status a::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: -50%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
}

.fg_1 {
  flex-grow: 1;
}

.fg_2 {
  flex-grow: 2;
}

.fg_3 {
  flex-grow: 3;
}

.modal_welcome_wrap #btn_area_list .btn_status a {
  height: 50px;
}

/* ステータスボタン（ミニ） */
.btn_status-small .btn_status a {
  display: block;
  position: relative;
  margin: 0 auto;
  padding: 0;
  width: 60px;
  height: 18px;
  line-height: 18px;
  font-family: var(--fa_hiragino-maru-gothic);
  font-size: 0.8rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border-radius: 50px;
  border: none;
}

.btn_status-small a.btn_status_standby::after,
.btn_status-small a.btn_status_call::after,
.btn_status-small a.btn_status_resv::after,
.btn_status-small a.btn_status_out::after {
  content: none;
}

/* 口コミ（ログイン時） */
#prf_area_list div.list_rev_group {
  position: relative;
  margin: 0 0 10px 0;
  padding: 5px 15px 5px 10px;
}

#prf_area_list div.list_rev_photo {
  margin: 5px 5px 5px 7px;
  position: relative;
  float: left;
}

#prf_area_list div.list-bubble {
  position: relative;
  margin: 5px 0 0 50px;
  border-radius: 10px;
  background: #f6f6f6;
  word-wrap: break-word;
}

#prf_area_list div.list-bubble a {
  display: block;
  padding: 10px;
  text-decoration: none;
}

#prf_area_list div.list-bubble a p {
  overflow: hidden;
  width: 100%;
  font-size: 10px;
}

#prf_area_list div.list-bubble a p span {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
}

#prf_area_list div.list-bubble::after,
.list-bubble::before {
  position: absolute;
  content: " ";
  height: 0;
  width: 0;
}

#prf_area_list div.list-bubble-half-left::after,
.list-bubble-half-left::before {
  right: 100%;
  top: 15px;
}

#prf_area_list div.list-bubble-half-left::after {
  border-top: 10px solid #f6f6f6;
  border-left: 10px solid transparent;
}

#prf_area_list div.list-bubble-half-left::before {
  border-top: 10px solid #f6f6f6;
  border-left: 12px solid transparent;
  margin-top: -1px;
}

/* TOPスライダー */
#top_slider_sp {
  margin-bottom: 35px;
}

.slider {
  position: relative;
  width: 100%;
  overflow: hidden;
}

.slider_arrow {
  position: absolute;
  display: block;
  margin-bottom: -10px;
  padding: 10px;
}

.slider_arrow img {
  width: 20px;
}

.slider_arrow_right {
  bottom: 4%;
  right: 0;
}

.slider_arrow_left {
  bottom: 4%;
}

.posR {
  position: relative;
}

.posA {
  position: absolute;
}

.pick_up {
  position: absolute;
  top: 0;
  left: 0;
}

/* 横スクロールテーブル */
.mAuto {
  margin: 0 auto;
}

.both {
  clear: both;
}

.dNone {
  display: none;
}

ol#disclaimer li {
  list-style-type: none;
}

ol#disclaimer ol {
  padding: 0 15px;
  list-style-type: none;
}

#usage.c img {
  width: 100%;
  max-width: 640px;
  margin: 5px 0;
}

#spRegExid.btnBlue a,
#spRegExid .btnYellow a {
  font-size: 13px;
}

#spRegAgreement ul {
  list-style-type: disc;
  padding-left: 15px;
}

.formAround {
  margin: 5px;
  padding: 5px;
  border: solid 2px #eee;
}

#exDescription {
  padding: 15px 0 0 0;
  font-size: 13px;
  text-align: center;
  background: #fcfcfc;
}

.loading {
  margin: 15px;
}

/* ヘッダーメッセージ */
a.header_msg {
  display: block;
  margin: 0;
  padding: 12px 20px 12px 55px;
  color: var(--purple);
  font-family: var(--fa_hiragino-maru-gothic);
  font-size: 1.2rem;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: 0.05em;
  position: relative;
}

a.header_msg-present {
  display: block;
  margin: 0;
  padding: 12px 20px 12px 50px;
  font-family: var(--fa_hiragino-maru-gothic);
  color: var(--white);
  font-size: 1.4rem;
  font-weight: 700;
  text-decoration: none;
  position: relative;
}

@media screen and (max-width: 375px) {
  a.header_msg {
    font-size: 1rem;
  }
}

@media screen and (max-width: 360px) {
  a.header_msg-present {
    font-size: 1.3rem;
  }
}

a.header_msg::after {
  position: absolute;
  top: 40%;
  right: 10px;
  display: block;
  content: '';
  width: 5px;
  height: 5px;
  border-top: 2px solid var(--purple);
  border-right: 2px solid var(--purple);
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

a.header_msg-present::after {
  position: absolute;
  top: 40%;
  right: 10px;
  display: block;
  content: '';
  width: 5px;
  height: 5px;
  border-top: 2px solid var(--white);
  border-right: 2px solid var(--white);
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

a.color_white {
  color: #fff;
}

a.size_lg {
  padding: 10px 30px 10px 55px;
}

a.header_msg-color-red {
  background-color: #ffe7e5;
}

a.header_msg-color-yellow {
  background-color: #faf0da;
  border-bottom: 1px solid #ffecc8;
}

a.header_msg-color-purple {
  background-color: #f7edff;
}

a.header_msg-color-raspberry {
  background-color: #d73570;
}

.icon_header_cert::before {
  display: inline-block;
  content: "";
  width: 28px;
  height: 28px;
  background: url(../img/header/icon_header_cert.svg) no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 14px;
  margin: auto;
}

.icon_header_call::before {
  display: inline-block;
  content: "";
  width: 24px;
  height: 24px;
  background: url(../img/header/icon_header_call.svg) no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 17px;
  margin: auto;
}

.icon_header_present::before {
  display: inline-block;
  content: "";
  width: 26px;
  height: 26px;
  background: url(../img/header/icon_header_present.svg) no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 15px;
  margin: auto;
}

.icon_header_coin::before {
  display: inline-block;
  content: "";
  width: 24px;
  height: 24px;
  background: url(../img/header/icon_header_coin.svg) no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 15px;
  margin: auto;
}

.icon_header_wait::before {
  display: inline-block;
  content: "";
  width: 35px;
  height: 35px;
  background: url(../img/header/icon_header_wait.svg) no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10px;
  margin: auto;
}

.icon_header_talk::before {
  display: inline-block;
  content: "";
  width: 35px;
  height: 35px;
  background: url(../img/header/icon_header_talk.svg) no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 10px;
  margin: auto;
}

.icon_header_exclamation::before {
  display: inline-block;
  content: "";
  width: 25px;
  height: 25px;
  background: url(../img/header/icon_header_exclamation.svg) no-repeat;
  background-size: contain;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 15px;
  margin: auto;
}

/* マイメニュー用バッジ */
.my_menu_new_badge {
  position: absolute;
  top: 12%;
  right: 28%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background-color: #ff4757;
  border: 3px solid #ff4757;
}

.mail_box_new_badge {
  position: absolute;
  top: 20%;
  left: 45%;
  border-radius: 50%;
  background-color: #ff4757;
  border: 5px solid #ff4757;
}

/* ドロワー用バッジ */
.new_badge-mail {
  position: absolute;
  top: 27%;
  left: 11%;
  border-radius: 50%;
  background-color: var(--red);
  border: 4px solid var(--red);
}

.new_badge-message {
  position: absolute;
  top: 27%;
  left: 11%;
  border-radius: 50%;
  background-color: var(--red);
  border: 4px solid var(--red);
}

.new_badge-coupon {
  position: absolute;
  top: 27%;
  left: 11%;
  border-radius: 50%;
  background-color: var(--red);
  border: 4px solid var(--red);
}

.unpaid_new_badge {
  position: absolute;
  top: 27%;
  left: 11%;
  border-radius: 50%;
  background-color: var(--red);
  border: 4px solid var(--red);
}

.unpaid_new_coupon {
  position: absolute;
  top: 27%;
  left: 11%;
  border-radius: 50%;
  background-color: var(--red);
  border: 4px solid var(--red);
}

/************************
*        共通パーツ       *
*************************/

/* モーダル */
#modal_overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.75);
  z-index: 150;
}

.modal_content {
  display: none;
  position: fixed;
  z-index: 200;
}

.modaal-container {
  border-radius: 8px;
}

.modal_cert-box {
  display: flow-root;
  margin: 0;
  padding: 30px 20px 20px 20px;
  border-radius: 10px;
  background-color: var(--purple-light);
  text-align: center;
  position: relative;
}

.modal_cert-box .modal_cert-box-inner {
  padding: 15px 10px 20px 10px;
  border-radius: 8px;
  background-color: var(--white);
  text-align: center;
  letter-spacing: 0.05em;
  position: relative;
}

.modal_cert-box .box_item_app_wh::before {
  position: absolute;
  top: -20px;
  left: 50%;
  right: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  content: "";
  display: inline-block;
  width: 40px;
  height: 40px;
  background-image: url(../img/header/icon-call-app-wh.svg);
  background-size: contain;
}

.modal_cert-box .modal_cert-box-inner .method_title_phone {
  margin: 5px 0;
  font-size: 2.2rem;
  font-weight: bold;
}

.modal_cert-box .modal_cert-box-inner .button_link a {
  display: inline-block;
  margin: 15px auto 0;
  padding: 1.8vw 5vw;
  background-color: var(--white);
  color: var(--raspberry);
  font-size: 1rem;
  text-decoration: none;
  border: 1px solid var(--raspberry);
  border-radius: 50px;
}

.modal_cert-box .modal_cert-box-inner .button_link a::before {
  display: inline-block;
  content: url(../img/header/cmn_icon_mobile_b.svg);
  width: 12px;
  height: 12px;
  position: relative;
  top: 2px;
  right: 3px;
}

/* album */
div.album_mini {
  padding-top: 10px;
}

div.album_mini div.album_line {
  display: flex;
  justify-content: center;
}

div.album_mini div.album_line div.album_cell {
  background: var(--white);
  width: 90px;
  height: 90px;
  border: 1px solid var(--gray);
  margin: 0 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
}

div.album_mini div.album_line div.album_cell p.photo_slot {
  display: block;
}

div.album_mini div.album_line label.album_upload {
  position: absolute;
  width: 100%;
  height: 100%;
  z-index: 1;
}

div.album_mini div.album_line label.album_delete {
  position: absolute;
  top: -11px;
  right: -7px;
  z-index: 2;
}

/* プライバシーチェック */
.form-privacy-check {
  text-align: center;
  margin-bottom: 20px;
}

.form-privacy-check label {
  display: flex;
  align-items: flex-start;
}

.form-privacy-check label:hover {
  cursor: pointer;
}

.form-privacy-check input {
  display: block !important;
  width: 18px;
  height: 18px;
}

.form-privacy-check span {
  font-weight: bold;
  text-align: left;
  margin-left: 5px;
}

/* radio_btn */
div.radiobox01 {
  width: 100%;
  margin: 10px 0;
  display: inline-block;
}

div.radiobox01 label {
  display: inline-block;
  float: left;
  cursor: pointer;
  min-width: 50%;
  margin: 0;
  padding: 15px 0;
  background: var(--gray);
  color: var(--gray-dark);
  font-size: 16px;
  text-align: center;
  line-height: 1;
  transition: 0.2s;
}

div.radiobox01 input[type=radio] {
  display: none;
}

div.radiobox01 input[type=radio]:checked+label {
  background-image: var(--gradient-ppl);
  color: var(--white);
}

div.radiobox01 label:first-of-type {
  border-radius: 8px 0 0 8px;
}

div.radiobox01 label:last-of-type {
  border-radius: 0 8px 8px 0;
}

/* guideline */
.guideline_group {
  background: var(--purple-light);
  margin: 0;
  padding: 15px 15px 5px 15px;
}

.guideline_group .annotation {
  background: var(--white);
  border-radius: 8px;
  margin-bottom: 15px;
  padding: 20px;
}

.guideline_group .annotation h3 {
  text-align: center;
}

.guideline_group .annotation h3::before {
  display: inline-block;
  content: url(../img/header/cmn_icon_exclamation-circle.svg);
  width: 18px;
  height: 18px;
  position: relative;
  top: 3px;
  right: 5px;
}

.guideline_group .annotation ul li {
  margin: 10px 0 10px 10px;
  font-size: 1.2rem;
  font-weight: 400;
  line-height: 1.8;
  list-style: disc;
}

.guideline_group .annotation p {
  margin: 5px 0;
}

/* コインについて(モーダル) */
#about_coin {
  padding: 25px;
}

#about_coin h3.subject {
  margin: 15px 0;
}

#about_coin ul {
  list-style: initial;
  margin-top: 5px;
  margin-bottom: 5px;
  margin-left: 20px;
}

#about_coin ul li div.about_coin_txt {
  padding: 10px;
}

/* 相談員一覧 表示切り替え */
.ans_display_mode_buttons {
  padding: 10px;
  display: flex;
  flex-direction: row;
  justify-content: flex-end;
}

.ans_display_mode_buttons>* {
  padding: 0 10px 0 10px;
}

.ans_display_mode_buttons i {
  color: #bfbec4;
  font-size: 18px;
}

.ans_display_mode_buttons .active_mode {
  opacity: 0.2;
}

/* キーワードレコメンド */
.keyword_recommend {
  text-align: center;
  margin: 0 auto;
  padding: 15px 20px;
}

.keyword_recommend .keywordCarouselSp {
  margin-bottom: 15px;
}

.keyword_recommend .keywordCarouselEl {
  margin: 0 auto;
}

.keyword_recommend .btn_status {
  padding: 0 10px;
}

/* レコメンドスライド共通パーツ */
.crsl_photo {
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  border: 5px solid var(--gray-mid);
  margin: 0 8px 10px 8px;
  z-index: 1;
}

.crsl_photo img {
  position: absolute;
  top: 0;
  left: 0;
}

.crsl_name {
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
}

.crsl_price {
  font-size: 1rem;
  margin-bottom: 5px;
  text-align: center;
}

/* 閲覧履歴、お気に入りアコーディオン */
.content_box {
  border-radius: 8px;
  background-color: var(--white);
  text-align: left;
  margin: 15px 0;
  padding: 12px 15px 5px 15px;
  filter: drop-shadow(0 1px 0.1px rgba(0, 0, 0, 0.1));
}

.content_box h2.sub_heading,
.accordion_content_box h2.sub_heading {
  font-size: 1.2rem;
  font-weight: 700;
  border-bottom: 1px solid var(--gray);
  padding-bottom: 0.5em;
  letter-spacing: 0.05em;
}

.content_box h2.sub_heading span,
.accordion_content_box h2.sub_heading span {
  margin-left: 4px;
}

.accordion_content_box {
  position: relative;
  border-radius: 8px;
  background-color: var(--white);
  text-align: left;
  margin: 15px 0;
  padding: 10px 15px 15px 15px;
  filter: drop-shadow(0 1px 0.1px rgba(0, 0, 0, 0.1));
}

.accordion_content_box label {
  height: 40px;
  cursor: pointer;
  text-align: center;
  font-size: 1.4rem;
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  background: linear-gradient(180deg, rgb(255, 255, 255, 0) 0%, rgb(255, 255, 255, 1) 50%);
  z-index: 1;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
}

.accordion_content_box input:checked+label {
  background: inherit;
  /* 開いた時には背景グラデーションを消す */
}

.accordion_content_box label::after {
  display: inline-block;
  content: url(../img/header/cmn_bottom-arrow-ppl.svg);
  width: 15px;
  height: 15px;
  position: absolute;
  bottom: 5px;
  left: 50%;
}

.accordion_content_box input {
  display: none;
}

.accordion_content_box .accordion-container {
  overflow: hidden;
  height: 135px;
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  -ms-transition: all 0.1s;
  -o-transition: all 0.1s;
  transition: all 0.1s;
}

.accordion_content_box input:checked+label::after {
  display: inline-block;
  content: url(../img/header/cmn_icon_arr_u_b.svg);
  width: 15px;
  height: 15px;
  position: absolute;
  bottom: 5px;
  left: 50%;
}

.accordion_content_box input:checked~.accordion-container {
  height: auto;
  padding-bottom: 15px;
  -webkit-transition: all 0.1s;
  -moz-transition: all 0.1s;
  -ms-transition: all 0.1s;
  -o-transition: all 0.1s;
  transition: all 0.1s;
}

/* アコーディオン内サムネイル */
.accordion_content_box .accordion_content_inner {
  display: flex;
  justify-content: center;
  margin: 12px 0 20px 0;
}

.accordion_content_box .content_inner_box {
  margin: 0 5px;
  text-align: center;
}

.accordion_content_box .content_inner_box .photo-circle-mini {
  position: relative;
  display: inline-block;
  vertical-align: top;
  overflow: hidden;
  border-radius: 50%;
  border: 2px solid var(--gold);
  margin: 0 0 5px 0;
  width: 50px;
  height: 50px;
}

@media screen and (max-width: 320px) {
  .accordion_content_box .content_inner_box .photo-circle-mini {
    width: 42px;
    height: 42px;
  }
}

.accordion_content_box .content_inner_box .photo-circle-mini img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

/* 悩みから占い師を捜す */
.section__category {
  margin: 0;
  padding: 15px;
  font-family: var(--fa_hiragino-maru-gothic);
}

.section__category ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.section__category ul li {
  width: calc(33% - 1px);
}

.section__category ul li a {
  display: block;
  vertical-align: top;
  overflow: hidden;
  position: relative;
  margin: 3px;
  padding: 0;
  height: 50px;
  border-radius: 5px;
  text-decoration: none;
}

.section__category ul li a::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
}

.section__category ul li a span {
  width: 100%;
  color: var(--white);
  font-size: 1.2rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.05em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  margin: auto;
  z-index: 1;
}

.section__category ul li a img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: auto;
}

/* 占星術から占い師を捜す */
.section__divination {
  margin: 0;
  padding: 15px;
  font-family: var(--fa_hiragino-maru-gothic);
}

.section__divination ul {
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
}

.section__divination ul li {
  width: calc(33% - 1px);
}

.section__divination ul li a {
  margin: 3px;
  padding: 8px 5px;
  color: var(--white);
  border: 1px solid var(--white);
  font-size: 1rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  border-radius: 5px;
  display: block;
  position: relative;
}

.section__divination ul li a::before {
  position: relative;
  top: 1px;
  left: -3px;
  content: "";
  display: inline-block;
  width: 1em;
  height: 1em;
  background: url(../img/header/cmn_icon_hashtag.svg) no-repeat;
  background-size: contain;
}

/* PC版 */
@media screen and (min-width: 450px) {
  main {
    background: var(--white);
  }

  ul.globalNavi {
    width: 400px;
  }
}

@media screen and (max-width: 414px) {
  .sec_scroll-content {
    margin: 0 auto;
    width: 100%;
  }

  #section-reason {
    margin-top: -1px;
  }

  .section_hero picture img,
  .worries picture img,
  .reason picture img,
  .cmnpart img {
    width: 100% !important;
    height: auto !important;
  }
}

@media screen and (max-width: 374px) {

  .section_hero picture img,
  .worries picture img,
  .reason picture img,
  .cmnpart img,
  .message li.instructor img,
  .plan-list img {
    width: 100% !important;
    height: auto !important;
  }
}

/* おすすめランキング */
.section__ranking {
  margin: 0;
  padding: 15px;
}

.section__ranking ul li {
  padding: 10px 0 5px 0;
  border-bottom: 1px solid var(--gray);
  position: relative;
}

.section__ranking ul li:last-child {
  border-bottom: none;
}

.section__ranking .list__rank_detail {
  display: flex;
  position: relative;
  align-items: center;
  justify-content: space-between;
}

.section__ranking a {
  display: block;
  text-decoration: none;
  color: var(--purple);
}

.section__ranking .list__rank-photo {
  position: relative;
  margin: 0 15px 0 10px;
}

.section__ranking .list__rank-photo .flame_circle {
  position: absolute;
  top: 45%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  z-index: 1;
}

.section__ranking .list__rank-photo .ans_date_photo {
  vertical-align: top;
  overflow: hidden;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  margin: 0 0 5px 0;
  position: relative;
}

.section__ranking .list__rank-photo .ans_date_photo img {
  position: absolute;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

.section__ranking .list_prof_date {
  display: block;
  width: 100%;
  margin-bottom: 20px;
}

.section__ranking .list__rank-name {
  margin: 5px 0;
  width: 95%;
  line-height: 1.2;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  text-decoration: underline;
}

@media screen and (max-width: 360px) {
  .section__ranking .list__rank-name {
    width: 80%;
  }
}

.section__ranking .list__rank-name span.marker_line {
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: 1px;
}

.section__ranking .list__rank-name span.tiny {
  font-size: 1.2rem;
  font-weight: 700;
}

.section__ranking .date_price {
  margin: 0;
  font-size: 1.2rem;
}

.section__ranking .date_price::before {
  display: inline-block;
  content: url(../img/header/cmn_icon_phone_square.svg);
  width: 15px;
  height: 15px;
  position: relative;
  top: 3px;
  margin: 0 3px 0 0;
}

.section__ranking .btn_profile,
.section__ranking .btn_status {
  display: block;
  font-family: var(--fa_hiragino-maru-gothic);
  font-size: 1rem;
  font-weight: 700;
  text-decoration: none;
  text-align: center;
  letter-spacing: 0.05em;
  position: absolute;
  top: 68%;
  right: 2%;
  transform: translateY(-50%);
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
}

.section__ranking .btn_profile div,
.section__ranking .btn_status a {
  width: 100px;
  padding: 4px 0 5px 0;
  border-radius: 50px;
  color: var(--white);
  position: relative;
}

.section__ranking .btn_profile div::after,
.section__ranking .btn_status a::after {
  height: 25px;
  filter: blur(3px);
}

.section__ranking .btn_profile div::before,
.section__ranking .btn_status a::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: -50%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
}

.section__ranking .btn_profile div.btn_profile-xs {
  color: var(--white);
  background: var(--gradient-ppl);
  border: solid 1px var(--white);
  outline: solid 1.5px var(--gold);
}

.section__ranking .btn_profile div.btn_profile-xs::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: -50%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
}

.section__ranking .icon_ranking {
  position: absolute;
  top: 10px;
  left: 0;
  z-index: 5;
}

/* 特集 */
.section__column {
  margin: 0;
  padding: 0 10px 10px 10px;
}

.section__column ul {
  display: flex;
  overflow-x: scroll;
}

.section__column ul li {
  position: relative;
  display: inline-block;
  white-space: normal;
  width: 200px;
  margin: 15px 5px;
  padding: 0;
  text-align: left;
  border-radius: 8px;
  background-color: var(--white);
  filter: drop-shadow(0 1px 0.1px rgba(0, 0, 0, 0.1));
  flex-shrink: 0;
}

.section__column .column__list .column__list-img {
  position: relative;
  display: block;
  vertical-align: top;
  overflow: hidden;
  height: 110px;
  border-radius: 8px 8px 0 0;
}

.section__column .column__list .column__list-img img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  margin: auto;
}

.section__column .column__list .column__list-new {
  position: absolute;
  top: -3px;
  left: -3px;
  z-index: 1;
}

.section__column .column__list .column__list-inner {
  margin: 0;
  padding: 10px 10px 15px 10px;
}

.section__column .column__list a {
  text-decoration: none;
}

.section__column .column__list .column__list-inner .column__list-date {
  color: var(--gray-dark);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.section__column .column__list .column__list-inner .column__list-title {
  color: var(--purple);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* 占いメディア */
.section__media {
  padding: 0 10px 10px 10px;
}

.section__media ul li+li {
  margin-top: 10px;
}

.section__media ul li a {
  display: flex;
  align-items: center;
  background: var(--white);
  border-radius: 10px;
  text-decoration: none;
  padding: 0 7px 0 0;
}

.section__media .column__list-img {
  width: 80px;
  margin-right: 12px;
}

.section__media .column__list-img img {
  width: 80px;
  height: 80px;
  display: block;
  object-fit: cover;
  border-radius: 10px 0 0 10px;
}

.section__media .column__list-inner .column__list-date {
  color: var(--gray-dark);
  font-size: 1.2rem;
  font-weight: 700;
  letter-spacing: 0.05em;
}

.section__media .column__list-inner .tag_new {
  position: relative;
}

.section__media .column__list-inner .tag_new img {
  width: 28px;
  height: auto;
  position: absolute;
  top: 0;
  left: 5px;
}

.section__media .column__list-inner .column__list-title {
  color: var(--purple);
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

/* お知らせ */
#information {
  margin-top: 0;
  color: var(--purple);
}

#information h2.ttl_information::before {
  position: relative;
  top: 3px;
  left: 0;
  content: "";
  display: inline-block;
  width: 16px;
  height: 16px;
  background: url(../img/header/cmn_icon_news.svg) no-repeat;
  background-size: contain;
}

#information ul li {
  border-bottom: 1px solid var(--gray);
  position: relative;
  letter-spacing: 0.05em;
  padding: 10px 30px 10px 4px;
}

#information ul li:last-child {
  border-bottom: none;
}

#information ul li a {
  display: -webkit-box;
  font-size: 1.2rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
  overflow: hidden;
}

#information ul li p {
  display: -webkit-box;
  padding: 0 0 0 4px;
  font-size: 1.2rem;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}

#information ul li p.info_day {
  font-size: 1rem;
  font-weight: 700;
  padding: 0 20px 0 3px;
}

#information .tag_new {
  position: absolute;
  top: 50%;
  right: -3%;
  transform: translateY(-50%) translateX(-50%);
  -webkit-transform: translateY(-50%) translateX(-50%);
  margin: auto;
}

#information .tag_new img {
  width: 25px !important;
  height: 12px !important;
}

/* バナー */
.bn-section {
  padding: 5px 15px;
}

.bn-section+.bn-section {
  padding: 0 15px 15px;
}

.bn-section img {
  vertical-align: bottom;
}

/* お知らせ */
.section__footer-info {
  margin: 0;
  padding: 20px 15px 5px 15px;
}

/* TOP・電話占いルチア・おすすめの占い師 */
.section__recom-category {
  margin: 0;
  padding: 15px;
}

.box__recom-category {
  display: flex;
  overflow-x: scroll;
}

.box__recom-category li {
  position: relative;
  display: inline-block;
  width: 250px;
  margin: 15px 5px;
  padding: 0;
  text-align: left;
  border-radius: 8px;
  background-color: var(--white);
  filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
  flex-shrink: 0;
}

.box__recom-category .ttl__recom-category {
  position: relative;
  display: block;
  vertical-align: top;
  overflow: hidden;
  height: 60px;
  border-radius: 8px 8px 0 0;
}

.box__recom-category .ttl__recom-category span {
  width: 100%;
  color: var(--white);
  font-family: var(--fa_hiragino-maru-gothic);
  font-size: 1.6rem;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  letter-spacing: 0.05em;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  margin: auto;
  z-index: 1;
}

.box__recom-category .ttl__recom-category img {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  margin: auto;
}

.box__recom-category .ttl__recom-category::after {
  content: "";
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.3);
}

.list__recom-category {
  margin: 0;
  padding: 0 10px 10px 10px;
}

.list__recom-category .list__recom-category-inner {
  position: relative;
  border-top: 1px solid var(--gray);
}

.list__recom-category a {
  display: flex;
  flex-direction: row;
  text-decoration: none;
  margin: 0;
  padding: 15px 0;
}

.list__recom-category .list__recom-category-photo {
  position: relative;
  width: 110px;
  padding: 0 10px;
}

.list__recom-category .list__recom-category-photo-img {
  vertical-align: top;
  overflow: hidden;
  width: 80px;
  height: 80px;
  border-radius: 50%;
  margin: 5px 0;
}

.list__recom-category .list__recom-category-photo .flame_circle {
  position: absolute;
  top: 50%;
  left: 50%;
  -ms-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
  width: 100%;
  z-index: 1;
}

.list__recom-category .list__recom-category-date .list__recom-category-name {
  width: 120px;
  color: var(--purple-dark);
  font-size: 1.8rem;
  font-family: var(--fa-mincho);
  font-weight: 700;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: underline;
}

.list__recom-category .list__recom-category-date .list__recom-category-price {
  color: var(--black);
  font-size: 1.2rem;
  padding: 0 0 0 3px;
}

.list__recom-category .list__recom-category-date .list__recom-category-price::before {
  display: inline-block;
  content: url(../img/header/cmn_icon_phone_square.svg);
  width: 15px;
  height: 15px;
  position: relative;
  top: 3px;
  right: 3px;
}

.list__recom-category .btn_status a {
  position: absolute;
  top: 70px;
  left: 105px;
  width: 52%;
  margin: 0;
  padding: 7px 0;
  font-size: 1.1rem;
  font-family: var(--fa_hiragino-maru-gothic);
  text-align: center;
  border-radius: 50px;
  display: inline-block;
  border: solid 1px var(--white);
  outline: solid 1.5px var(--gold);
  color: var(--white);
}

.list__recom-category .btn_status a::before {
  content: '';
  position: absolute;
  z-index: 0;
  top: -50%;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(120deg, rgba(255, 255, 255, 0.3), rgba(255, 255, 255, 0));
}

.list__recom-category .btn_status a.btn_status_standby::after,
.list__recom-category .btn_status a.btn_status_call::after,
.list__recom-category .btn_status a.btn_status_resv::after,
.list__recom-category .btn_status a.btn_status_out::after {
  top: 3px;
  height: 35px;
  filter: blur(3px);
}

.list__recom-category .list__recom-category-more::before {
  display: inline-block;
  content: url(../../img/header/cmn_icon_arr_r_b.svg);
  width: 10px;
  height: 10px;
  position: relative;
  top: 0;
  right: 4px;
}

/* 追加 */
#commonHeader .scrollView {
  display: none;
}