@charset "UTF-8";
/* CSS Document */

/* -------------------------
	固定ヘッダ＋Gナビ
--------------------------- */
#fixed_box {width:100%; position:fixed; top:0; left:0; z-index:101; transition: all 0.25s ease;}
#fixed_box.is-fixed {box-shadow: 0 5px 5px 0 rgba(0,0,0,0.25);}
#fixed_box .scroll{box-shadow: 0 5px 5px -5px rgba(0,0,0,0.25);}

.title .babkbtn{ position: absolute; z-index: 100; float: left;font-size: 1.4em; left: 10px; margin: 20px 0 0;}
.title .babkbtn:before{ content: '<'; margin: 0 5px 0 0;}
/* Reset */
* {box-sizing: border-box;}

ul {list-style:none;}
ul,li {margin:0; padding:0; list-style:none;}
ol li{margin-bottom:10px;}

p{padding:0;margin:0;}

a {color:#6ec3ec; text-decoration:none; outline:none;}
img {vertical-align:middle;}

dl,dt,dd {margin:0;}

address,caption,em,th {font-style:normal;}

/* Fluid-img */
img {width:100%; height:auto;}
img.def {width:auto; height:auto;}

/* -------------------
	common
------------------- */
html {color:#333;
font-family: "Helvetica Neue",Arial,"Hiragino Kaku Gothic ProN","Hiragino Sans",Meiryo,sans-serif;
font-weight: 500;line-height:1.7;font-size:14px; height:100%;}

body{ margin:auto 0px; background:#f9f9f9; padding-top:80px; padding-bottom:100px;}
body#login{ margin:auto 0px; background:#f9f9f9; padding-top:80px;}

/* 表示・非表示 */
.sp{display: block;}
.pc{display: none!important;}

.blue{color:#09dbca;}
.pink{color:#e06983;}　
.red{color:#e13239;}
.green{color:#1EDBA1;}
.gray{color:#888;}
.orange{color:#FD8032;/*color:#e06983;*/}
.small{font-size:.75em;}
.center{text-align:center;}
i{margin-right:.4em; color:#6ec3ec; font-size:1.2em;}

em{font-size:1.1em;}

.wrap{width:100%;margin:0 auto;padding:1em 1em 3em;box-sizing:border-box;}
.col2_wrap{width:100%;/* margin:2em auto; */}
#main{width:100%;}

.section_wrap{width:100%; margin:3em auto;}
.white_wrap{width:100%;background:#fff; overflow:hidden;}

/* パンクズ */
#breadcrumb{width:100%;padding:0 1% 10px;}
#breadcrumb ul{ display: flex; justify-content: flex-start; align-items: center;}
#breadcrumb li{font-size:.9em; display:block;}
#breadcrumb li a:after {margin:0 .5em; content: ">"; color:#999;}
#breadcrumb li:nth-child(n+2){width: 300px; white-space: nowrap;overflow: hidden;text-overflow: ellipsis;}

/* 占い師詳細用パンクズリスト */
#breadcrumb02 {padding:1em 0 1em; margin: 17px 0 0; position: relative; top:25px; z-index: 1; }

/*　pager */
.pager{width:100%; margin:2em auto;}
.pager .pagination {
  text-align: center;
}

.pager .pagination a.prev,.pager .pagination a.next{ background:none;}

.pager .pagination a.num {
  margin: 0 2px;
  padding: 0.2% 1.8%;
  display: inline-block;
  color: #fff;
  background:#6ec3ec;
  text-align: center;
  position: relative;
  border-radius: 4px;
}

@media screen and (min-width: 1024px){
  .pager .pagination a.num {padding: 0.2% 0.8%;}
}

.pager .pagination li a:hover,
.pager .pagination li a.active,.pager .pagination a.current{
  color: #fff;
  background: #9cd9f3;
}

/* 占い師一覧MV */
.cast_main{
	width:100%; 
	height:100%; 
	min-height:180px;
	padding-top:1.4em; 
	background:url("../images/main_ttl_bg.png") no-repeat; 
	background-size:cover; 
	display:flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
    background-position:center; 
	}

.cast_main .cont_ttl{color:#fff; display: none;}
.cast_main .cont_ttl:before{ background: none;}

/* ボタン */
.btn,
a.btn,
button.btn {
  width:100%;
  max-width:350px;
  font-size: 1rem;
  margin:1.5em auto;
  line-height: 1.5;
  position: relative;
  display: block;
  padding: 1.2rem 2rem!important;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #fff!important;
  border: none;
  font-weight:normal;
  border-radius: 0;
  background-image: linear-gradient(to top, #6ec3ec 0%, #9cd9f3 100%);
  -webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, .1);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .1);
	border-radius: 6px;
}

a.btn-gradient {color: #fff!important;font-weight:normal;border-radius: 6px;
background: -moz-linear-gradient(top, #6ec3ec, #9cd9f3);
background: -webkit-linear-gradient(top, #6ec3ec, #9cd9f3);
background: linear-gradient(to top, #6ec3ec, #9cd9f3);
-webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, .1);
box-shadow: 3px 3px 6px rgba(0, 0, 0, .1);}

.btn:hover,.btn2:hover{opacity:.9;}

.btn:after,a.btn:after,button.btn:after{
  content: "";
  position: absolute;
  top: 50%;
  right: 1em;
  width: 7px;
  height: 7px;
  border-top: 1px solid #fff;
  border-right: 1px solid #fff;
  transform: rotate(45deg);
  margin-top: -5px;
}

.btn i, a.btn i, button.btn i { color: #fff;}

.btn2 {
 width:100%;
  max-width:350px;
  font-size: 1rem;
  margin:1em auto;
  line-height: 1.5;
  position: relative;
  display: block;
  padding: 1.2rem 2rem!important;
  cursor: pointer;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-transition: all 0.3s;
  transition: all 0.3s;
  text-align: center;
  vertical-align: middle;
  text-decoration: none;
  letter-spacing: 0.1em;
  color: #fff!important;
  font-weight:normal;border-radius: 6px;
  background: -moz-linear-gradient(top, #6ec3ec, #9cd9f3);
  background: -webkit-linear-gradient(top, #6ec3ec, #9cd9f3);
  background: linear-gradient(to top, #6ec3ec, #9cd9f3);
  -webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, .1);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .1);}

.btn3 {
 color: #FFF;
 display: block;
 margin: 15px auto;
 width: 180px;
 text-align: center;
 background: #00a4e3;
padding: 0.8em;
}

.btn4 {
 border:solid 1px #00a4e3;
 color: #00a4e3;
 display: block;
 margin: 15px auto;
 width: 180px;
 text-align: center;
 background: #FFF;
padding: 0.8em;
}

.btn5 {
 margin:65px auto 0;
 width:80%;
 color: #FFF;
 display: block;
 text-align: center;
 background: #d9b44f;
 padding: 0.8em;
}

/* 見出し */
.cont_ttl{width:100%; font-size:20px; font-weight:normal; text-align:center; line-height:1.5; margin-bottom:1em;font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; position: relative; padding: 0 50px; margin: 0 auto;}
.cont_ttl.long{padding: 0 40px !important;}

span.t02{display:block; font-size:.8em; color:#6ec3ec; letter-spacing:.2em; margin:0 auto 2em; text-align: center;font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";}

.cont_ttl:before {
  position: absolute;
  top: calc(50% - 1px);
  left: 0;
  width: 100%;
  height: 1px;
  content: '';
  background: #6ec3ec;
}

.cont_ttl span.t01 {position: relative; padding: 0 1em;background: #f9f9f9; display: block;}
.cont_ttl span.t011 {position: relative; padding: 0 1em;background: rgba( 255, 255, 255, 1 ); display: block;}

.border_ttl{width:100%; border-bottom:2px solid #bad6ff; margin-bottom:1.5em; padding:0 0 1%; text-align: center;
font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-size: 1.4em; font-weight: 500;position: relative;}
.border_ttl:after {
  position: absolute;
  content: " ";
  display: block;
  border-bottom: solid 2px #4a87e2;
  bottom: -2px;
  width: 20%;
}

.icon_ttl{margin:0 0 1em; font-size:1.1em;}

.title_a{
color:#0072ae; font-size:20px; text-align: center;}
.center3{margin-bottom:1.5em; text-align: center;}
.title_a23{font-size:1.2em; text-align: left; font-weight:normal; margin:1% auto;
padding: 1rem 2rem;
  border-left: 5px solid #9cd9f3;
  background: #e9f5f5;

}
.title_s{
 font-size:17px; margin:10px auto; font-weight:bold; text-align: center;}

.blue_img {
    display: flex;
    justify-content: center;
    align-items: center;
    position: absolute;
    top: 20px;
    left: 5%;
 width:90%;
}

.center_ttl{text-align:center; font-size:1em; margin-bottom:1.5em;}

/* 電話リンクスマホだけ */
@media (min-width: 751px) {
a[href*="tel:"] {
pointer-events: none;
cursor: default;
text-decoration: none;
}
}

/* ------------------------
	 header
------------------------ */

header{
	width:100%;
	height:0;
	box-sizing:border-box;
	position:relative;
	display:flex;
	flex-wrap:wrap;
	justify-content:space-between;
	align-items:center;
	background:#fff;
}
.bgw{position:relative;background:#fff;padding: 1% 3%;width: 100%;box-sizing: border-box;height:80px;
display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center; margin: 0 auto;
}

/* login_btn */
a.login_btn{/*position:absolute;*/ min-width:12%; max-width:100px;height:auto; color:#fff; font-weight:normal; left:.8em; top:1.2em; 
padding:.8em; border:none;border-radius: 4px; font-size:.8em; background-size:100% 100%; transition: all 0.3s;text-align: center;
background: -moz-linear-gradient(top, #6ec3ec, #9cd9f3);
background: -webkit-linear-gradient(top, #6ec3ec, #9cd9f3);
background: linear-gradient(to top, #6ec3ec, #9cd9f3);
box-shadow: 2px 2px 3px rgba(0,0,0,0.1);	
}
a.login_btn:hover{opacity:.9;}
a.login_btn i{display:block;color:#fff; font-size:1.3em; margin-left:.5em;}

/*.head_txtbar{background:#fe9fc1; color:#fff; padding:.5em; font-size:.9em; position:relative;}
.head_txtbar:after{content:"▼"; position:absolute; top:2em; left:3em; color:#fe9fc1; z-index:99;}*/

header h1{
	width:20%;
	margin:auto;
	position: absolute;
	top: 18%;
	bottom: 0;
	left: 0;
	right: 0;
}

header h1 a{ display: block;text-align: center;}

.a_logo {
 width:100%;
 max-width:80px;
 height:auto;
margin: 0 auto;
}


/* メニュートグル＆ハンバーガーアイコン */
.drawer_toggle {/*position:absolute;*/ position: relative;/*top:2em; right:2.8vw;*/ width:4vh; height:2vh; /*cursor:pointer; transform:translateY(-50%);*/ z-index: 1000;}
.drawer_toggle span {display:block; position:absolute; left:0;content:""; width:100%; height:2px; background-color:#4a87e2; transition: all 0.25s ease;}
.drawer_toggle span:nth-child(1) {top:0;}
.drawer_toggle span:nth-child(2) {top:50%;}
.drawer_toggle span:nth-child(3) {bottom:-3px;}
.drawer_toggle:after{ position: relative; top: 2vh; height:10px; background: transparent;color:#FFF; text-align: center; font-size:10px; }

/* メニュートグル＆クローズアイコン */
.open_menu {height:4.4vw;}
.open_menu.drawer_toggle {/*position:absolute;top:2.5em; right:.5em;*/ width:4vh; height:2vh;cursor:pointer;/*transform:translateY(-50%);*/z-index: 1000;}
.open_menu span {background-color: #4a87e2;}
.open_menu span:nth-child(1) {top:50%;transform: rotate(45deg);}
.open_menu span:nth-child(2) {display:none;}
.open_menu span:nth-child(3) {bottom:auto; top:50%;transform: rotate(-45deg);}

.point{color:#FFF; position:absolute; top:3vh; left:4vw;}
.point a {color:#FFF; font-weight:normal;}

/* -------------------------
	Gナビ アコーディオン
-------------------------- */
body#login #g_navi2{top:70px;}
#g_navi2 {display:none;position:fixed; /*top:104px;*/ top:70px; left:0; height: 100%; overflow-y:auto; text-align:center;z-index:98;width:100%;}
#g_navi2 .inner {position:relative; z-index:99; width:100%;}
#g_navi2 .layer {position:absolute; top:0; left:0; display:block; width: 100%; height:100%; background-color:#FFF; content:""; opacity: 1.0 !important;}
#g_navi2 .menu { position: relative; z-index: 100;}
#g_navi2 .menu{display:flex; flex-wrap:wrap; justify-content:space-around;}
#g_navi2 .menu li.half{width:50%; margin:0;}
#g_navi2 .menu li.half:first-child{border-right:1px solid #ddd;}
#g_navi2 .menu li.half a{background:#fff; margin:0 auto; border-top:1px solid #ddd;}
#g_navi2 li {width:100%; color:#222; border-bottom:1px solid #ddd; text-align: left; position: relative;}

#g_navi2 li a {
	display:block; 
	width:100%;
	line-height:2.8em;
	color: #222;
	font-weight:normal;
	font-size:.95em; 
	padding:.3em 1em; 
	margin:0 auto; 
	background:#fff; 
	height:100%;
	border-bottom: #ddd;
	}

#g_navi2 li a span{
  position: relative;
  display:block;
  width:100%;
}
#g_navi2 li a span::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 7px;
  height: 7px;
  border-top: 1px solid #78a6e9;
  border-right: 1px solid #78a6e9;
  transform: rotate(45deg);
  margin-top: -5px;
} 

#g_navi2 li.menu_member span::before{ 
  content: '';/*何も入れない*/
  display: inline-block;/*忘れずに！*/
  width: 14px;/*画像の幅*/
  height: 14px;/*画像の高さ*/
  background: url(../images/member.png) no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin-right:.5em;
  margin-top:-3px;
  }

#g_navi2 li.menu_login span::before{ 
  content: '';/*何も入れない*/
  display: inline-block;/*忘れずに！*/
  width: 14px;/*画像の幅*/
  height: 14px;/*画像の高さ*/
  background: url(../images/login.png) no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin-right:.5em;
  margin-top:0px;
  }  

#g_navi2 li.coin i{
 color:#0072ae;
  position:absolute;
  top:10px;
  left:5px;
  font-size:18px
}

#g_navi2 .menu li a .bdge{ display: block; border-radius: 22px; width: 22px; height: 22px; line-height: 22px; padding:1% 2% 0%; background:#09dbca ; color: #fff; position: absolute; right: 1vw; top:2.2vw; text-align: center; }

#g_navi2 li.full{
 width:100%;
 border-top:none;
 border-right:none;
 text-align:center;
 height:60px;
}

#g_navi2 .user_data{ padding: 20px; border-bottom: #ddd;}
#g_navi2 .user_data li {width:100%; border:none; text-align: left; position: relative;color: #222;}
#g_navi2 .user_data li:nth-child(1):before {
  content: '';/*何も入れない*/
  display: inline-block;/*忘れずに！*/
  width: 14px;/*画像の幅*/
  height: 14px;/*画像の高さ*/
  background: url(../images/member.png) no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin-right:.5em;
  margin-top:-3px;
}

#g_navi2 .user_data li:nth-child(2):before {
  content: '';/*何も入れない*/
  display: inline-block;/*忘れずに！*/
  width: 14px;/*画像の幅*/
  height: 14px;/*画像の高さ*/
  background: url(../images/onamae.png) no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin-right:.5em;
  margin-top:-3px;
}

#g_navi2 .user_data li:nth-child(3):before {
  content: '';/*何も入れない*/
  display: inline-block;/*忘れずに！*/
  width: 14px;/*画像の幅*/
  height: 14px;/*画像の高さ*/
  background: url(../images/wallet.png) no-repeat;
  background-size: contain;
  vertical-align: middle;
  margin-right:.5em;
  margin-top:-3px;
}


/* サポートセンター */
.support{width:100%; padding-bottom:120px; background:#fff;}
.support .title{background:#6ec3ec; padding:1.2em;}
.support .title .inner{width:70%!important; margin:auto;}
.support .reception_hours{width:100%; background:#fff; margin-top:.8em; padding:.5em 1em; font-size:.9em; text-align:center;}
.support .call{width:100%;}
.support .call .inner{width:100%; padding:1.5em .5em 0; display:flex; flex-wrap:wrap;}
.mobile_wrap{width:100%; order:1;}
.landline_wrap{width:100%; order:2;}
.call_img{position:relative; max-width:250px; margin:auto;}
.call_ruby{position:absolute; left:50%; font-size:.7em; text-align:center;}
.call_ruby2{position:absolute; left:76%; font-size:.7em; text-align:center;}
.call_ruby3{position:absolute; left:59%; font-size:.7em; text-align:center;}
.call_ruby4{position:absolute; left:65%; font-size:.7em; text-align:center; width:110px;}

.support .call a{padding:0!important;}
.support .call .notes{font-size:.85em; margin:2em 1em; text-align:center;}

#payment i {
 font-size:22px;
}
#payment p {
 font-size: 15px;
 padding-top:5px
}


/* ------------------------
	 top
------------------------ */
#login #mv{/*margin-top:-3.2em;*/}
#mv{
 margin-top:-2.4em;
 width:100%;
 height: auto;
 position: relative;
box-sizing:border-box;
overflow:hidden;
	background-color:#f9f9f9;
}
#mv .catch01{ position: absolute;left: calc(50% - 160px);top: calc(50% - 60px); z-index: 1; width: 54%;}
#mv .catch01 h2{ display: block; margin: 0 auto;color: #fff;font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; /*font-size: 1.7em; */font-weight: 500; text-align: center; line-height: 150%; font-size: clamp(18px, 22 / 375 * 100vw, 28px);
text-shadow:
            3px 3px 6px rgba(15, 137, 231,0.5), -3px -3px 6px rgba(15, 137, 231,0.5),
           -3px 3px 6px rgba(15, 137, 231,0.5),  3px -3px 6px rgba(15, 137, 231,0.5);
}
#mv .catch01 h1 {display: block; margin: .4em auto;}
#mv .catch01 h1 img{display: block; width: 54%; height: auto; margin: 0 auto;}


/* youtubeスライドショー */
.slider_wrap {width: 80%;margin: 8% auto 0;}
.slick li div {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.slick li div iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}   
.slick-prev:before,.slick-next:before{color:#4a87e2 !important; font-size:30px !important;} 
.slick-prev:before{ content: "<" !important;} 
.slick-next:before{ content: ">" !important;}           
 
@media screen and (min-width: 1024px){
  .slider_wrap {width: 800px; margin: 2% auto 0;}
  .slick-prev:before,.slick-next:before{font-size:34px !important;} 

}


/* Dots */
.slick-dotted.slick-slider
{
    margin-bottom: 0px;
}

.slick-dots
{
    position: absolute;
    margin-top:-30px;
    display: block;
    width: 100%;
    padding: 0;
    margin: 0;
    list-style: none;
    text-align: center;
    z-index:2;
}

.slick-dots li button{margin-top:-30px; z-index:2; position:absolute;}
.slick-dots li button:before
{
    font-family: 'slick';
    font-size: 30px;
    line-height: 20px;
    position: absolute;
    top: 0;
    left: 0;
    width: 20px;
    height: 20px;
    content: '•';
    text-align: center;
    opacity: .25;
    color: #222;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
.slick-dots li.slick-active button:before
{
    color: #6ec3ec;
}


.bg-slider {
 margin-top:0;
 height:340px;
 width: 100%;
 background-position: center;
 background-repeat: no-repeat;
 -webkit-background-size: cover;
 -moz-background-size: cover;
 -o-background-size: cover;
 background-size: cover;
 margin-bottom: 10px;
}


.bg-slider2 {
    height: 150px;
    width: 100%;
    background-color: #FFF;
    /*background-position: ;*/
    background-repeat: no-repeat;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
}

.bg-slider,.bg-slider2 {
    background-position: center top\9;
    background-repeat: repeat-x\9;
}

*+html .bg-slider,*+html .bg-slider2 {
    background-position: center top;
    background-repeat: repeat-x;
}

.bg-title{
 position:absolute;
 top:33%;
 width:100vw;
 text-align:center;
}

h2.bg-slider__title{
	width:50%;
	margin:0 auto 10px;
	padding-top:60px;
}

.yu_mincho{font-family: 游明朝,"Yu Mincho",YuMincho,メイリオ,Meiryo,serif;}

.bg-text2{
 color:#FFFF;
 font-size:18px;
 font-family: 游明朝,"Yu Mincho",YuMincho,メイリオ,Meiryo,serif;
}

.bg-title_nomember{
 position:absolute;
 top:40%;
 width:100vw;
 text-align:center; height:60px;
 color:#FFFF;
 font-family: 游明朝,"Yu Mincho",YuMincho,メイリオ,Meiryo,serif;
}

.catch1 {
 left:-17%;
 font-size:23px;
}
.catch2 {
 left:-17%;
 font-size:18px;
}

.top_banner{width:100%; margin:1em auto;}

/* introduction */
#introduction{width:100%; padding:14.5em 1.5em 1.5em; margin:0 auto 2em; position:relative; text-align:left; font-size:.95em;background-image: url("../images/introduction_bg_sp.jpg"); background-repeat: no-repeat; background-size:cover; background-position: top;}
#introduction h3{ font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; font-size: 1.31em; font-weight: 500;
text-shadow:
0px 0px 3px #fff, 0px 0px 3px #fff,
0px 0px 3px #fff, 0px 0px 3px #fff;
}
#introduction p{text-shadow:
0px 0px 3px #fff, 0px 0px 3px #fff,
0px 0px 3px #fff, 0px 0px 3px #fff;
}
/* top_category */
#top_category{width:100%; margin:3em auto;}
#top_category ul{width:100%; display:flex; flex-wrap:wrap; justify-content:space-between;}
#top_category li{width:32%; margin-bottom:1em;}
#top_category li a:hover{opacity:.8;}

/* top_keyword */
#top_keyword{width:100%; margin:3em auto;}
.keyword_list{width:100%; display:flex; flex-wrap:wrap; justify-content:space-between;}
.keyword_list li{width:48%; border:1px solid #ddd; text-align: center; position: relative; margin-bottom:1em;}

.keyword_list li a {
	display:block; 
	width:100%;
	line-height:2.8em;
	color: #222;
	font-weight:normal;
	font-size:.95em; 
	padding:.3em 1em; 
	margin:0 auto; 
	background:url("../images/btn_bg.png") no-repeat; 
	background-size:100% 100%; 
	height:100%;
	transition:.3s;
	}

.keyword_list li a span{
  position: relative;
  display:block;
  width:100%;
}
.keyword_list li a span::after{
  content: "";
  position: absolute;
  top: 50%;
  right: 0;
  width: 7px;
  height: 7px;
  border-top: 1px solid #6ec3ec;
  border-right: 1px solid #6ec3ec;
  transform: rotate(45deg);
  margin-top: -5px;
} 
.keyword_list li a:hover{color:#6ec3ec;}

#top_recommend{width:100%; margin:3em auto; display: none;}
#top_ranking{width:100%; margin:3em auto; display: none;}
#top_newcomer{width:100%; margin:3em auto;}
#top_review{width:100%; margin:3em auto;}
#top_column{width:100%; margin:3em auto;}

/* NEWS */
#news{width:100%; margin:3em auto;}
.news_list{border-bottom:1px solid #ddd; padding:1em;}
.news_list .tag{width:28%; min-width:80px; font-size:.8em; padding:6px; margin-bottom:.8em; border-radius:30px; background:#7aafe7; color:#fff;text-align:center;}
.news_list dl{display:flex;}
.news_list dt{font-size:.9em; color:#848484; width:30%;}
.news_list dd{font-size:.9em; color:#222;}

/* FAQ */
#FAQ{width:100%;/* margin:3em 0; */}
#faq01,#faq02,#faq03,#faq04,#faq05{margin-bottom:2em; margin-top:-100px; padding-top:100px;}
.faq_cate{width:100%; margin-bottom:1.5em; display:flex; flex-wrap:wrap; justify-content:center;}
.faq_cate li{margin-bottom:.5em;}
.faq_cate li a{color:#222;}
.faq_cate li a:hover{color:#6ec3ec; transition:.3s;}
.faq_cate li:after{content:"|"; color:#ccc; margin:1em;}
.faq_cate li:last-child:after{content:none;}

/* FAQアコーディオン */
#faq_ac{width:100%; margin-bottom:2em; font-size:1em;}
#faq_ac dt{
position:relative;
display:block;
width:100%;
border-bottom:#cccccc 1px solid;
cursor:pointer;
background:#fff;
padding:1.5em 3.5em 1.5em 3em;
text-indent:-1.5em;
}

#faq_ac dt:before{
	content:"";
	display:inline-block;
	width:1.4em;
	height:1.4em;
	margin-right:.5em;
	margin-bottom:-.3em;
	background:url(../images/q.png) no-repeat;
	background-size:100%;
}

#faq_ac dt span{
	position:absolute;
	display:block;
	/*border:1px solid #132237;*/
	padding:1em;
	right:1em;
	top:29%;
}

#faq_ac dt span:after{
	content:"";
  display:block;
  width:1em;
  height:1em;
  border-top: #6ec3ec 1px solid;
  border-right: #6ec3ec 1px solid;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  position:absolute;
  right: 1em;
  top: 0;
  bottom: 18%;
  margin: auto;
}

#faq_ac dt.active span:after{
	transform: rotate(-45deg);
  position:absolute;
  right: 1em;
  top: 18%;
  bottom: 0;}

#faq_ac dd{
background:#e3eee9;
padding:1.5em;
width:100%;
height:100%;
display:none;
padding-left:3em;
text-indent:-1.5em;}

#faq_ac dd:before{
	content:"";
	display:inline-block;
	width:1.4em;
	height:1.4em;
	margin-right:.5em;
	margin-bottom:-.3em;
	background:url(../images/a.png) no-repeat;
	background-size:100%;}

#faq_ac a{color:#6ec3ec;}




/* top_message */
#top_message{width:100%; margin:3em 0;}
#top_message .message{width:100%; display:flex; flex-wrap:wrap;}
#top_message .message_img{width:100%;}
#top_message .message_txt{width:100%; background:#6ec3ec; color:#fff; padding:1.5em; text-align: justify; text-justify: inter-ideograph;}


/* top_recruit */
#top_recruit{width:100%; margin:3em 0;}
#top_recruit .recruit_wrap{
	background:url("../images/recruit_img.png") no-repeat; 
	background-size:cover; 
	padding:2.5em 1.2em; 
	display: flex; 
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    }
#top_recruit .recruit_txt{color:#fff; text-align:center; font-size:1.1em;}

.news_p a {font-weight:normal; color:#000; }

.news_p a::before{
 font-family: "FontAwesome";
 content: '\f5bb'; /* アイコンのunicode */
 color: #0072ae;
 font-size:14px;
 padding-right:3px;
}


/* --------------------------------------------------
	#mutter
-------------------------------------------------- */

#mutter{
 box-sizing:border-box;
 margin:15px;
 padding:5px 8px;
 background:#FFF;
}

#mutter .box{
	width:100%;
	background:#fff;
	border-radius:5px;
	border:1px solid #eee;
	padding: 0;
}

.m_list{
 width:100%;
 padding:1%;
 box-sizing: border-box;
 border-top:1px solid #eee;
 display: flex;
 position:relative;
}

.m_list a{
 width:100%;
 box-sizing: border-box;
 display: flex;
 position:relative;
}

.m_list:first-child {
 border:none;
}

.m_list figure,.m_list a figure{width:20%; margin:10px;}

.m_list .txt,.m_list a .txt{width:55%; color: #333;}
.top_tsubuyaki .m_list .txt{width:100%;}

.m_list .txt h3,.m_list a .txt h3{ margin:10px 0 5px; font-size:1em;}
.m_list .txt p,.m_list a .txt p{margin:0; font-weight:normal;}

.m_list .time,.m_list a .time{
	position:absolute;
	top:5px;
	right:10px;
	font-weight:bold;
	font-size:.9em;
}

.m_list .status,.m_list a .status{
	position:absolute;
	bottom:12px;
	right:0px;
	font-size:.9em;
}


/* --------------------------------------------------
	#tabMenu
-------------------------------------------------- */

#tabMenu ul,#tabMenu2 ul,#tabMenu3 ul{
    width:100%;
    }
#tabMenu li{
    float:left;
    width:calc(100%/3);
    font-size:.9em;
	font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif";
    }
#tabMenu li,#tabMenu3 li{
 /* margin-bottom: 10px; */
}
#tabMenu2 li{
    float:left;
    width:calc(100%/3);
    font-size:.9em;
    }
/*追記0125*/   
#tabMenu3 li{
    float:left;
    width:calc(100%/3);
    font-size:.9em;
    }

#tabMenu li.half,
#tabMenu2 li.half,
#tabMenu3 li.half{
    float:left;
    width:50%;
    }            

#tabMenu li a,#tabMenu2 li a,#tabMenu3 li a,
#tabMenu li span,#tabMenu2 li span,#tabMenu3 li span{
    width:100%;
    height:55px;
    line-height:1.5;
    text-align:center;
    border-right:#fff 1px solid;
    border-left:#fff 1px solid;
    background: linear-gradient(to top, #4a87e2 0%, #7aafe7 100%);
    color:#fff;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor:pointer;
}

#tabMenu li:nth-child(-n+3){border-bottom:#fff 2px solid;}
#tabMenu li a.active,#tabMenu li span.active,
#tabMenu3 li a.active,#tabMenu3 li span.active{
	background:#fff;
	color:#000;
}	

#tabMenu2 li a.active,#tabMenu2 li span.active{
	background:#fff;
	color:#000;
}	


#tabMenu2 li a span,#tabMenu3 li a span{
	display:block;
	font-size:18px;
}
	
#tabBox1,#tabBox2,#tabBox3,#tabBox4,#tabBox5,#tabBox6{
    width:100%;
    height:auto;
    border-bottom:none;
    padding-bottom:15px;
    margin-top: 0px;
    }

.cast_p #tabBox1{
    width:100%;
    height:auto;
    border-bottom:none;
    padding-bottom:15px;
	margin-top: -50px;
    }

.cast_p #tabBox2,.cast_p #tabBox3,.cast_p #tabBox4,.cast_p #tabBox5,.cast_p #tabBox6{
    width:100%;
    height:auto;
    border-bottom:none;
    padding-bottom:15px;
	margin-top: -30px;
    }

#tabBox1{
    background:#fff;
    }
#tabBox2{
    background:#fff;
    display:none;
    }
#tabBox3{
    background:#fff;
    display:none;
    }
#tabBox4{
    background:#fff;
    /*display:none;　追記0125*/
    }
#tabBox5{
    background:#fff;
    display:none;
    }
#tabBox6{
    background:#fff;
    display:none;
    }

#tabBox1 .inner,
#tabBox2 .inner,
#tabBox3 .inner,
#tabBox4 .inner,
#tabBox5 .inner,
#tabBox6 .inner
{width:100%; padding:4em 1em 1em; box-sizing:border-box;}

#tabBox1 .inner2,
#tabBox2 .inner2,
#tabBox3 .inner2,
#tabBox4 .inner2,
#tabBox5 .inner2,
#tabBox6 .inner2
{width:100%; padding:0 1em 1em; box-sizing:border-box;}

#tabBoxes .center,
#tabBoxes2 .center,
#tabBoxes3 .center,
#tabBoxes4 .center,
#tabBoxes5 .center,
#tabBoxes6 .center
{color:#666!important;}

#tabBoxes .review{padding:1em 0;}

/* ジャンル絞り込み */
#genre{width:100%; margin:0 auto; padding: 1em;}
#genre dt{
    display:block;
    width:100%;
    padding:1em;
    margin:1em auto;
    line-height:1.5;
    text-align:left;
    border-right:#fff 1px solid;
    border-left:#fff 1px solid;
    background-image: linear-gradient(to top, #4a87e2 0%, #7aafe7 100%);
    color:#fff;
    position:relative;
}

#genre dt:after{
  content:"";
  display:block;
  width:1em;
  height:1em;
  border-top: #fff 1px solid;
  border-right: #fff 1px solid;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  position:absolute;
  right: 1em;
  top: 0;
  bottom: 18%;
  margin: auto;
}

#genre dt.active:after{
  transform: rotate(-45deg);
  position:absolute;
  right: 1em;
  top: 18%;
  bottom: 0;
}

#genre dd{
width:100%;
text-align:center;
display:none;
}

.carousel2 {
width:100%;
-webkit-overflow-scrolling: touch;
  overflow-x: scroll;
white-space:nowrap;
}

.carousel2 li {
 margin: 2px 7px;
 text-align: center;
 display: inline-block;
 -ms-overflow-style: none;  scrollbar-width: none;
 width: 5rem;
 display: inline-block;
 vertical-align: top;
}
.carousel2::-webkit-scrollbar {display:none;}

.shibori{
display: flex;
 margin-bottom:0.5rem;
 justify-content: space-between;
 width:100%;
}

.carousel2 li a{
    display: block;
}
.carousel2 li img {
 width: 4rem;
 margin-bottom: 0.5rem;
 border-radius:50%;
}
.carousel2 li span {
    font-size: 0.8rem;
    color: #222;
}

.cast_q{margin:1em auto; display:flex; flex-wrap:wrap; justify-content:center; align-items:center;}
.cast_q:after{content:">"; margin-left:.5em; margin-top:-.2em; color:#6ec3ec;}

.price_a{
 /*position: absolute;*/
 bottom: 10px;
 font-weight: bold;
 font-size:14px;
 color:#000;
}
.price_b{
 /*position: absolute;*/
 /*bottom: 28px;*/
margin-top:10px;
 font-weight: normal;
 font-size:10px;
 color:#000;
}
.sen{
 font-size:12px;
 font-weight: normal;
 color:#3a6ad0;
}

.price_c{
 position: absolute;
 bottom: 10px;
 right: 15px;
}
.price_d{
 position: absolute;
 right: 15px;
 top: 45px;
 font-weight: bold;
 font-size:18px;
 color:#000;
}
.price_d span{font-size:12px; color:#000; font-weight:normal;}
.price_e{
 position: absolute;
 right: 15px;
 top: 33px;
 font-weight: normal;
 font-size:10px;
 color:#000;
}
.price_f{
 position: relative;
 text-align:right;
 color:#000;
 font-weight:normal;
 right: 5px;
}
.price_f .states_txt_on{
 -webkit-animation: 1s linear 0s alternate none infinite running blink;
 -moz-animation: 1s linear 0s alternate none infinite running blink;
 animation: 1s linear 0s alternate none infinite running blink;
}

.augur,.augur a{
	width:100%;
	box-sizing: border-box;
	/*border-top:1px solid #ccc;*/
	display: flex;
	position:relative;
	color:#222;
}

#tabBox1 .augur, #tabBox2 .augur, #tabBox3 .augur, #tabBox4 .augur, #tabBox5 .augur, #tabBox6 .augur {
 height:auto;
 padding:1em;
}
.cast_p #tabBox2 .augur{ padding: 1em 0.2em;}

/* 占い師一覧 */
.augur{width:100%; border-top:1px solid #ccc; padding:1em 1em 1.2em; box-sizing:border-box;}
.augur:first-child{border-top:none;}
.augur:last-child,.augur a:last-child{border-bottom:none;}

.augur_inner{width:100%;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;}
.augur a figure{width:25%;margin:0 0 0 0;}
.augur_info{width:43%; padding: 0;}
.augur_info .cast_name{margin: 0;}
.augur_info .name_wrap{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;}
.augur_info .name_wrap .sratus{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;}
.augur_info .price{display:flex; flex-wrap:wrap; align-items:center; margin: .4em 0;}
.augur_info .price dt{font-size:.7em; margin-right:.1em; border-radius: 50px; background:#e1e2e2; font-weight: normal; padding: .24em .8em;}
.augur_info .price dd{font-weight:bold; font-size: 1em;}
.augur_txt{width:100%; margin-top:1em;}
.sratus_wrap{width:27%;}
.augur a .txt{max-width:55%;width:40%;}
.augur a .txt .debutdate{ font-size:1em; color: #2BB3C0; font-weight: bold;}
.augur a .txt .debutdate em{ font-size:0.8em; padding: 1%; background:#2BB3C0; color: #fff; border-radius: 4px;}

.augur a .txt h3{ margin:0px 0px 0px; font-size:1em; color: #333;}
.augur a .txt p{/*margin:0 0 15px;*/ margin: 0; color: #333;}

.augur a .fav,.augur .fav{
	width:20px;
	font-weight:bold;
	font-size:.9em;
}
.augur a .fav img,.augur .fav img{width:20px;}

.augur a .special{
	position:absolute;
	top:3px;
	right:40px;
	width:22px;
	font-weight:bold;
	font-size:.9em;
}

.myp_msg09{ position: absolute; right: 5px;}
.myp_msg09 a{
	position: relative;
	display: block !important;
	top:2px;
	right:2px;
	font-size:.9em;
	font-weight:bold;
	width:auto;
	border-radius:5px;
	padding:10px;
	box-sizing:border-box;
	color:#fff !important;
	text-align:center;
	margin-bottom: 0 !important;
	height:auto;
	display: flex;
	justify-content: center;
	align-items: center;
	background: #09dbca;
	border: none;
}


#blog3 .augur a .txt{ width: 60%;}
#blog3 .augur a .txt p{ font-size: 0.8em}

.augur a .status_tag {
    font-weight: bold;
    margin-right: -.5em;
    font-size:.85em;
}
/*.augur a .status_tag.off span,.augur a .status_tag.on span,.augur a .status_tag.reserve span,.augur a .status_tag.rest span{
 display:none;
}*/

.nextsche{
 display:none;
}

.augur a .status_tag.on::before {
 color: #e06983;
 content: '●';
 display:inline-block;
 padding-right:.4em;
}
.augur.mail a .status_tag.on::before {
 color: #e06983;
 content: '●';
 display:inline-block;
 padding-right:.4em;
}
.augur a .status_tag.off::before {
 color: #f08c22;
/*color: #e06983;*/
 content: '●';
 display:inline-block;
 padding-right:.2em;
}

.augur a .status_tag.rest::before {
 /*color: #ccc;*/
 color: #e06983;	
 content: '●';
 display:inline-block;
 padding-right:.4em;
}
.augur a .status_tag.offwait::before {
 color:#45c4a2;
 content: '●';
 display:inline-block;
 padding-right:.4em;
}
/*.augur a .status_tag.offwait .blinking2::before {
 color:#45c4a2;
 content: '●';
 display:inline-block;
 padding-right:.4em;
}*/
.augur.mail a .status_tag.offwait::before {
 color: #45c4a2;
 content: '●';
 display:inline-block;
 padding-right:.4em;
}
.augur a .status_tag.offline::before {
 color:#CCC;
 content: '●';
 display:inline-block;
 padding-right:.4em;
}
.augur a .status_tag.reserve::before {
 color: #fece00;
 content: '●';
 display:inline-block;
 padding-right:.4em;
}


/*文字横スライド*/
/*.augur a .status_tag.off::after{
 animation: key1 .3s ease infinite alternate;
 display:inline-block;
 color:#000;
 margin-right:10px;
 content: '鑑定OK';
}*/
/* メール鑑定 */
/*.augur.mail a .status_tag.on::after {
 display:inline-block;
 color:#000;
 margin-right:10px;
 content: '鑑定OK';
 animation: key1 .3s ease infinite alternate;
}*/
@keyframes key1{
  0% {transform: translateY(0px);}
  100% {transform: translateY(-5px);}
}




/* 文字点滅（ゆっくり） */
/*.augur a .status_tag.on::after {
 display:inline-block;
 color:#000;
 margin-right:15px;
 content: '鑑定中';
    -webkit-animation: 1s linear 0s alternate none infinite running blink;
    -moz-animation: 1s linear 0s alternate none infinite running blink;
    animation: 1s linear 0s alternate none infinite running blink;
}*/
.augur.mail a .status_tag.offwait::after {
 display:inline-block;
 color:#000;
 content: '予約満杯';
 font-size:14px;
 margin-right:5px;
    -webkit-animation: 1s linear 0s alternate none infinite running blink;
    -moz-animation: 1s linear 0s alternate none infinite running blink;
    animation: 1s linear 0s alternate none infinite running blink;
}
@-webkit-keyframes blink {
    0% { opacity: 0; }
    19.9% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}
@-moz-keyframes blink {
    0% { opacity: 0; }
    19.9% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes blink {
    0% { opacity: 0; }
    19.9% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}


/* 文字点滅（ゆっくり） */
.augur a .status_tag.reserve::after {
 display:inline-block;
 color:#000;
 margin-right:15px;
 content: '予約中';
    -webkit-animation: 1s linear 0s alternate none infinite running blink;
    -moz-animation: 1s linear 0s alternate none infinite running blink;
    animation: 1s linear 0s alternate none infinite running blink;
}
@-webkit-keyframes blink {
    0% { opacity: 0; }
    19.9% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}
@-moz-keyframes blink {
    0% { opacity: 0; }
    19.9% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes blink {
    0% { opacity: 0; }
    19.9% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}

/* 文字点滅（ゆっくり） */
/*休憩中*/
/*.augur a .status_tag.rest::after {
 display:inline-block;
 color:#000;
 content: '休憩中';
 margin-right:15px;
    -webkit-animation: 1s linear 0s alternate none infinite running blink;
    -moz-animation: 1s linear 0s alternate none infinite running blink;
    animation: 1s linear 0s alternate none infinite running blink;
}*/
@-webkit-keyframes blink {
    0% { opacity: 0; }
    19.9% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}
@-moz-keyframes blink {
    0% { opacity: 0; }
    19.9% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes blink {
    0% { opacity: 0; }
    19.9% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}

.augur a .free_tag{
 position: absolute;
/* min-width: 50px;
 width: 6%;*/
 min-width: 82px;
 width: 10%;
 right: -10px;
 text-align: center;
 margin: 0.4rem 0 0;
 padding: 0.3rem 0.1rem;
 border:none;
 border-radius: 8px;
 color: #fff;
 font-weight:bold;
 font-size: 12px;
 background: #7aafe7;
}
.augur a .free_tag span{ display:block; width: 100%;font-weight: normal;}	

.augur a .kdate{ font-size: .9em; margin: 0;}
.augur a .kdate:before{ font-family: "FontAwesome"; content: "\f017"; margin-right:3px;display: inline-block;transform: translateX(-50%);}


/* 占い師一覧ステータスにくっついた待ち人数表記 */
.nextsche{ color: #000; /*visibility:hidden;*/}
.nextsche:before{ font-family: "FontAwesome"; content: "\f017"; margin-right:3px;/*display: inline-block;transform: translateX(-50%);*/}
.more{cursor:pointer; margin-top: 0px;}
.cast_p .more{cursor:pointer; margin-top: -40px;}
.more .open{
  width:90%;
  max-width:350px;
  font-size: 1rem;
  margin:1.5em auto;
  text-align:center;
  line-height: 1.5;
  position: relative;
  display: block;
  padding: 1rem 2rem!important;	
  color: #fff!important;
  font-weight:normal;
  border-radius: 6px;
  background: -moz-linear-gradient(top, #6ec3ec, #9cd9f3);
  background: -webkit-linear-gradient(top, #6ec3ec, #9cd9f3);
  background: linear-gradient(to top, #6ec3ec, #9cd9f3);
  -webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, .1);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .1);}
.more .close{
  width:90%;
  max-width:350px;
  font-size: 1rem;
  margin:1.5em auto;
  text-align:center;
  line-height: 1.5;
  position: relative;
  display: block;
  padding: 1rem 2rem!important;	
  color: #fff!important;
  font-weight:normal;
  border-radius: 6px;
  background: -moz-linear-gradient(top, #6ec3ec, #9cd9f3);
  background: -webkit-linear-gradient(top, #6ec3ec, #9cd9f3);
  background: linear-gradient(to top, #6ec3ec, #9cd9f3);
  -webkit-box-shadow: 3px 3px 6px rgba(0, 0, 0, .1);
  box-shadow: 3px 3px 6px rgba(0, 0, 0, .1);}

/* pagetop */
.pagetop{
	width:100%;
	display:block;
	padding:20px 0 10px;
	box-sizing:border-box;
	text-align:center;
	font-size:1.1em;
	background:#f7f7f7;
}

.pagetop a{
	width:100%;
	display:block;
}

.seisan_price{ color: #000; font-weight:bold;}
.seisan_kigen{ color: #E55052; font-weight:bold;}

.author figure{ width: 40%; margin: 0 auto 10px;}
.author p{text-align: center; font-size: 1.1em; font-weight: bold;}

.augur a .status_tag span.wait01 {display: none;}



/* --------------------------------------------------
	 占い師プロフィール　augur_plof
-------------------------------------------------- */

.videoBox{width:100%; position:relative; height:auto; max-height:200px; margin-bottom:2em;}
.videoBox .play{position:absolute; top:30%; left:42%;}
.videoBox .play img{width:50%;}
.state{width:auto; position:absolute; bottom:10px; right:10px; padding:5px; box-sizing:border-box; color:#fff; border-radius:4px; background:rgba(0,0,0,0.5); font-size:.9em; text-align:center;}
.videoBox img{min-height:200px; min-width:200px; object-fit: cover;}

.p_box02{ position: absolute; width: 45%; top: 12%; right: 1em; font-size:.9em;}
.plof_tag{background: #8ad1f7; margin:0 8px .5em 0;padding:5px; box-sizing:border-box;color:#fff; border-radius: 4px; /*opacity: 0.8;*/ text-align:center;}
.plof_tag02{background: rgba(110, 195, 236,0.7); margin:0 8px .5em 0; padding:5px;box-sizing:border-box; color:#fff; border-radius: 4px; opacity: 0.95; display: block; width: 100%; text-align:center; font-size:.9em}

.videoBox .state{width:100%; padding: 5px 0; right:0; bottom:-2.5em;}

.plof_wrap{width:100%; position: relative;}
.prof_dtl_wrap{width:100%; position: relative;}
.plof_wrap h2{width:50%;font-size:1.4em; margin:1.5em auto 0;}
.plof_wrap .text02{width:90% !important; margin:10px auto; border:1px solid #3388c5; padding:10px; box-sizing:border-box; border-radius:5px; font-size:.9em;}

.plof_wrap .price{ 
display: flex;
width:100%;
margin:1em auto;
justify-content: center;
 align-items: center;
}

.plof_wrap .price dt{width:50%; background:#6ec3ec; color:#fff; text-align:center; padding:.5em; font-weight:bold;}
.plof_wrap .price dd{width:50%; background:#fff; color:#222; text-align:center; padding:.5em; font-weight:bold;}
.plof_wrap .price i{color:#fff; margin-right:.5em;}
.plof_wrap .price dt img{ width: 10%; height: auto; margin: -4px 4% 0 0;}
.plof_wrap .fav{
	position:absolute;
	top:-10px;
	right:10px;
	font-weight:bold;
	font-size:.8em;
 border-radius:50%;
 background:#FFF;
 text-align:center;
 width:60px;
 height:60px;
 padding:5px;
  -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
}/*追記20180424*/

.plof_wrap .chat{
 position:absolute;
 top:-10px;
 left:10px;
 font-weight:normal;
 border-radius: 50%;
 background:#FFF;
 text-align:center;
 width:60px;
 height:60px;
 padding:5px;
 float:right;
 -webkit-box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
}

.plof_wrap .chat i{font-size:1.7em; margin:.55em;}

.chat_count{
 font-weight:normal;
 margin-right:2px;
 margin-top:-2px;
 color:#000;
 font-size:11px;
 display:block;
}

.plof_wrap .fav img{height: auto; margin:1.3em 1.2em; width:25px;}
.plof_wrap .fav span{font-weight:normal; margin-right:7px; color:#000; padding: 0 0 0 5px; }
.plof_wrap .fav p a{ display: block; padding: 2% 3%; border: 1px solid #09dbca; border-radius: 4px; margin: 3px 0 0; text-align: center;}
.plof_wrap .fav p.off a{ display: block; padding: 2% 3%; color: #fff; background:#09dbca; border-radius: 4px; margin: 3px 0 0; text-align: center;}

.plof_wrap .mail_status a{
	/*float: right;*/
	position:absolute;
	top:-10px;
	left:10px;
	font-size:.8em;	
	text-align: center;
	display: block; padding: 1.4%; border-radius: 50px;
    background: #fff;
    width: 60px;
    height: 60px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
	display: flex;
  justify-content: center;
  align-items: center;
}/*0625*/

.plof_wrap .mail_status i{
	font-size: 2.4em;
	color:#F98D8F;margin: auto;
}/*0625*/

.plof_wrap .mail_status span{
	display: block;
}/*0625*/

.kakomi_area{margin:2em auto; font-weight:normal; color:#222;}
.yotei_ttl{font-size:1em; color:#222; display:flex; align-items:center;}
.yotei_ttl i{color: #6ec3ec; font-size:1.4em;}

.yotei3{background:#fff; padding:1.5em; border-radius:5px; font-weight:bold; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;}
.yotei_text{display:inline-block; width:45%;}
.yotei3 .btn_wrap{width:55%;}
.yotei3 .btn_wrap .btn{margin:0;}

.yotei_maru{margin-top:5px; border-radius: 50%; border: solid 1px #eee; background: #FFF; text-align: center; width: 60px; height: 60px;}
.yotei4{padding-left:10px; font-size:24px;}

.p_box{border-bottom:1px solid #ddd; padding-bottom:1em;}
.p_box:last-child{border-bottom:none; padding-bottom:0;}
.p_box .plof{margin-bottom:.5em;}
.p_box .plof:before{ content: "●"; color:#6ec3ec; margin-right: 1%;}

.info3{background:#fff; padding:0.5em 1.5em 1.5em; border-radius:5px;}

/* --------------------------------------------------
	 #message
-------------------------------------------------- */
.message_list{width:100%; margin:1em 0;}
.message_list .message_cast{border-bottom:1px solid #ddd; padding:1em; background: #fff;}
.message_list .message_cast:first-child{/* border-top:1px solid #132237; */}
.message_list .message_cast a{width:100%;display:flex;flex-wrap:wrap;align-items:center;text-decoration:none;}

.message_cast{width:100%; display:flex; flex-wrap:wrap; align-items:center;}
.message_cast .message_image{width:40%; max-width:150px; margin-right:1em;}
.message_cast .message_wrap{width:55%;}
.message_cast .message_wrap .date{display:flex; flex-wrap:wrap; justify-content:flex-end;color:#aaa;}
.message_cast .message_wrap .date li{font-size:.85em;}
/*.message_cast .message_wrap .date li:first-child:before{content:"◆";}*/
.message_cast .message_wrap .date li.unread{background:#4a87e2; color:#fff; padding:2px 5px; font-size:.8em; width:40px; text-align:center; margin-left: 2%;}
.message_cast .message_wrap h2{margin:0; font-size:1.1em; font-weight:bold;}
.message_cast .message_wrap .message_tag{width:100%; font-size:.9em; background:#4a87e2; color:#fff; padding:5px; margin:1em 0; text-align:center;}
.whitewrap{width:100%; background: #fff; border-radius: 4px; padding: 1em;}

.message_cast .message_wrap .btn2{width:100%;}
.message_cast .message_wrap .btn2 span{text-align:center; margin:auto;}

/* --------------------------------------------------
	 #blog
-------------------------------------------------- */
/* blog_detail */
#blog{
	width:100%;
	margin:2em auto;
	/*border-bottom:1px solid #ccc;*/
}

.blog_ttl{width:100%; font-size:1.1em; margin-bottom:.5em;text-align: justify;
  text-justify: inter-ideograph;}
.blog_date{text-align:right; font-size:.9em; color:#848484;}

#blog figure{width:100%; margin:2em 0;}
.blog_txt{width:100%; margin-bottom:2em;}
.blog_txt p{margin-bottom:1.5em;}

.writer{width:100%; display:flex; flex-wrap:wrap; justify-content:space-around; align-items:center; background:#fff; padding:0 .5em;}
.writer figure{width:20%; max-width:100px;}
.writer .writer_dtl{width:60%;}
.writer .writer_dtl p{font-size:1.1em; font-weight:bold;}
.writer .btn{margin:.5em 0;}


/* blog_list */
.blog_list a{
 width:100%;
 padding:1em;
 box-sizing: border-box;
 display: flex;
 position:relative;
border-bottom:1px solid #eee;
}

.blog_list a:last-child{border-bottom:none;}

.blog_list a .more{border-top:1px solid #ccc;}

.blog_list a figure{width:30%;max-width:100px;margin:0 10px 0 0;}

.blog_list a .txt{width:100%; display:flex; flex-wrap:wrap; flex-direction: column;}
.blog_list a .txt h3{margin:0; font-size:1.1em; color:#222;}
.blog_list .blog_title{font-size:.9em; color:#e8427c;}
.blog_list a .txt .date{
	color:#848484;
	font-size:.8em;
	text-align: right;
	margin-top:auto;
	}

.blog_list a .kname{
	position:absolute;
	bottom:10px;
	right:10px;
	font-size:.9em;
}

.author figure{ width: 40%; margin: 0 auto 10px;}
.author p{text-align: center; font-size: 1.1em; font-weight: bold;}


/* ----------------------
    .top_review_area
----------------------- */
.top_review_area{ margin: 0 0 20px;}
.top_review_area .review{ padding: 10px; border-bottom: 1px dotted #ccc; height: auto !important;}
.top_review_area .review:last-child{ border-bottom: none !important;}
.top_review_area .r_more{ display: none !important;}

/* ------------------------
	 #important
------------------------- */
#important{
	width:100%;
	overflow:hidden;
	background:url(../images/important_img.png) no-repeat center;
	background-size:cover;
	padding:10px;
	box-sizing:border-box;
	margin:0;
}

#important h2{
	color:#09dbca;
	text-align:center;
	margin:20px 0;
}

#important p{
	width:100%;
}


/* ------------------
	 footer
--------------------- */

footer{
	width:100%;
	margin-bottom:0px;
}

footer#footer2{
	width:100%;
	margin:0;
}

#f_nav_wrap{width:100%; background:#fff; display:flex; flex-wrap:wrap; justify-content:space-between; padding:1.5em;}
#f_nav_wrap .f_logo{width:100%; margin:1em auto;}
#f_nav_wrap .f_logo img{width:30%; margin:auto; display:block; text-align:center;}

#f_nav_wrap .f_bnr{width: 100%; margin: 0 auto 2.0em;}

/* f_nav */

.f_nav{
	width:100%;
	margin:0;
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    align-items: center;
}

.f_nav li{
	width:50%;
	list-style:none;
	padding:5px;
	box-sizing:border-box;
	text-align:left;
	padding-left: 24px;
	line-height: 1.6em;
	background: url(../images/list_icon.png) left 0px top .6em no-repeat;
	background-size: 5px auto;
}

.f_nav li a{
	text-decoration:none;
	width:100%;
	display:block;
	color:#222;
	font-weight:normal;
	font-size:.9em;
	transition:.3s;
}
.f_nav li a:hover{color:#6ec3ec;}


/* footer_support */
#f_support{padding:1em 0 2em; background:#6ec3ec;}
#f_support .call{color:#fff; text-align:center;}
.support_txt{text-align:center; color:#fff; font-size:.9em; line-height:1.7;}

.sub_nav_wrap{background:#222; color:#fff; padding:1.5em;}
.sub_nav{display:flex; flex-wrap:wrap; justify-content:center; width:80%; margin:0 auto 1em;}
.sub_nav li{font-size:.9em; margin-bottom:10px;}
.sub_nav li a{color:#fff;}
.sub_nav li a:hover{color:#6ec3ec;}
.sub_nav li:after{content:"|"; color:#ccc; margin:10px;}
.sub_nav li:nth-child(even):after{content:none;}

.copyright {
 text-align:center;
 font-size:.8em;
 box-sizing:border-box;
}

/* pagetop */
#pagetop{
    position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    z-index: 10;
    width:50px;
    height:50px;
}

#pagetop img{
width:100%;
}


/* 固定ボタン */
.fix_btnarea{
	position:fixed;
	bottom:0;
	width:100%;
	background-color: #fff;
	padding:0;
	box-sizing:border-box;
   display: flex;
  flex-wrap:         wrap;
  justify-content:space-between;
  z-index:999;
	box-shadow: 0 -3px 10px rgba(0,0,0,0.2);
}

.fix_btnarea .beginner_btn{
	width:45%;
	border: none;
  font-weight:normal;
  background-image: linear-gradient(to top, #6ec3ec 0%, #9cd9f3 100%);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);
	color:#fff;
	text-align:center;
	padding:13px 3px;
	box-sizing:border-box;
	font-size:.95em;
	margin-left:auto;
	border-radius: 6px;
}

.fix_btnarea .tel_btn{
	width:100%;
	border: none;
	background-color: #e81313;
 /* background-image: linear-gradient(to top, #6ec3ec 0%, #9cd9f3 100%);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);*/
	color:#fff;
	text-align:center;
	padding:20px 3px;
	box-sizing:border-box;
	font-size:1.1em;
	/*border-radius: 6px;*/
	font-weight: normal;
}

.fix_btnarea .soft_btn{ display: none;}

.fix_btnarea .login_btn2{
	width:49.9%;
	border: none;
	background-color: #4a87e2;
/*  background-image: linear-gradient(to top, #6ec3ec 0%, #9cd9f3 100%);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);*/
	color:#fff;
	text-align:center;
	padding:14px 3px;
	box-sizing:border-box;
	font-size:.95em;
	/*border-radius: 6px;*/
	font-weight: normal;
}
.fix_btnarea .login_btn2 span{ display:inline-block;font-size:1em;font-weight:bold;}
.fix_btnarea .login_btn2 span:before{	
	content:"";
	display:inline-block;
	width:1.4em;
	height:1.4em;
	margin-right:.3em;
	margin-bottom:-.3em;
	background:url(../images/fix_btn_login.png) no-repeat;
	background-size:100%;}


.fix_btnarea .signup_btn{
	width:49.9%;
	border: none;
	background-color: #4a87e2;
/*  background-image: linear-gradient(to top, #6ec3ec 0%, #9cd9f3 100%);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);*/
	color:#fff;
	text-align:center;
	padding:14px 3px;
	box-sizing:border-box;
	font-size:.95em;
	/*border-radius: 6px;*/
	font-weight: normal;
}
.fix_btnarea .signup_btn span{ display:inline-block;font-size:1em;font-weight:bold;}
.fix_btnarea .signup_btn span:before{	
	content:"";
	display:inline-block;
	width:1.4em;
	height:1.4em;
	margin-right:.3em;
	margin-bottom:-.3em;
	background:url(../images/fix_btn_user.png) no-repeat;
	background-size:100%;}


.beginner_btn a,
.login_btn a,
.button{
	width:100%;
	display:block;
}

.fix_btnarea .button{
	width:100%;
	border: none;
	background-color: #4a87e2;
 /* background-image: linear-gradient(to top, #6ec3ec 0%, #9cd9f3 100%);
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
  box-shadow: 0 5px 10px rgba(0, 0, 0, .2);*/
	color:#fff;
	text-align:center;
	padding:20px 3px;
	box-sizing:border-box;
	font-size:.95em;
	/*border-radius: 6px;*/
	font-weight: normal;
}

.fix_btnarea .button i{	color:#fff;}
/*.fix_btnarea .button.narabu{width:49.9% !important;}*/
/*250127*/
.fix_btnarea .button.narabu{width:100% !important;}
.fix_btnarea .button.narabu.sitei{display: none;}


/* -------------------------------
	 占い師一覧　augur
------------------------------- */
.ura_name{font-size:15px; font-weight:bold;}

.free{box-sizing:border-box;display:inline; /*margin-right:5px;*/
 position: absolute;
 min-width: 90px;
 width: 10%;
 right: 0;
 text-align: center;
 margin: 0.1rem 0 0;
 padding: 0.4rem 0.5rem;
 border:none;
 border-radius: 10px;
 color: #fff;
 font-weight:bold;
 font-size: 12px;
 background: #7aafe7;
}
.free span{ display:block; width: auto;font-weight: normal; margin-right: 4%;}
.free b{font-size: 120%;}	

/*.new{position:absolute; top:5px; left:70%; font-weight:bold; color:#fece00 !important;}*/

.ribbon20-wrapper {  
 display: block;
 position: relative;
z-index:1;
}
.new {
  display: inline-block;
  position: absolute;
  left: 0;
  top: 75px;
  box-sizing: border-box;
  padding: 0 4px;
  margin: 0;
  line-height: 20px;
  font-size: 12px;
  letter-spacing: 0.1em;
  /*background: #021a5f;*/
  background: #0072ae;
 color:#FFF;
  box-shadow: 0 2px 2px rgba(0, 0, 0, 0.12);
  border-radius:0 3px 3px 0;
}
.new span {font-size: 11px;}
.new:before {
  position: absolute;
  content: '';
  top: 0;
  left: -4px;
  border: none;
  height: 22px;
  width: 5px;
  background: #0072ae;
  border-radius: 3px 0 0 3px;
}
.new:after {
  position: absolute;
  content: '';
  bottom: -2px;
  left: -2px;
  border: none;
  height: 2px;
  width: 2px;
  background: #1c5497;
  border-radius: 3px 0 0 3px;
}



/* 文字点滅 */
.blinking2 {
    animation: 0.5s linear 0s alternate none infinite running blink;
}
@-webkit-keyframes blink {
    0% { opacity: 0; }
    19.9% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}
@-moz-keyframes blink {
    0% { opacity: 0; }
    19.9% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}
@keyframes blink {
    0% { opacity: 0; }
    19.9% { opacity: 0; }
    20% { opacity: 1; }
    100% { opacity: 1; }
}


/* 文字点滅 */
.blinking span{
    /*animation: 0.5s linear 0s alternate none infinite running blink;*/
}


/* 上下揺れ */
.fluffy{
 animation: fluffy1 2s ease infinite;
}
@keyframes fluffy1 {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-10px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-10px) }
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
}

@-moz-keyframes fluffy1 {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-10px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-10px) }
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
}

@-webkit-keyframes fluffy1 {
  0% { transform:translateY(0) }
  5% { transform:translateY(0) }
  10% { transform:translateY(0) }
  20% { transform:translateY(-10px) }
  25% { transform:translateY(0) }
  30% { transform:translateY(-10px) }
  50% { transform:translateY(0) }
  100% { transform:translateY(0) }
}

/* -------------------------------
	 占い師プロフィール　augur_plof
------------------------------- */

/* 評価星 */
.rate {
  position: relative;
  display: inline-block;
  width: 80px;
  height: 16px;
  font-size: 16px;
  margin:0 10px 0 0!important;
}
.rate:before, .rate:after {
  position: absolute;
  top: 0;
  left: 0;
  content: '★★★★★';
  display: inline-block;
  height: 16px;
  line-height: 16px;
}
.rate:before {
  color: #ddd;
}
.rate:after {
  color: #ffc53d;
  overflow: hidden;
  white-space: nowrap;
}

.rate0:after {
  width: 0;
}

.rate1:after {
  width: 16px;
}

.rate1-5:after {
  width: 24px;
}

.rate2:after {
  width: 32px;
}

.rate2-5:after {
  width: 40px;
}

.rate3:after {
  width: 48px;
}

.rate3-5:after {
  width: 56px;
}

.rate4:after {
  width: 64px;
}

.rate4-5:after {
  width: 72px;
}

.rate5:after {
  width: 80px;
}

.rate_wrap {
  width: 80px;
  margin-right:10px;
}

.rating{
  display: flex;
  flex-wrap:wrap;
  align-items:center;
  justify-content: space-between;
  }

.rating .rate_wrap{ margin: 0 10px 0 0; display: flex; flex-wrap:wrap; align-items:center;}
.rating span{ margin-right: 0px;color:#848484;}



/* レビュー */
.review {width:100%; margin:10px 0; text-align: justify; text-justify: inter-character; height: auto !important; border-top:1px #eee solid; padding:1em;}
.review:first-child { border-top: none;}
.review .blog_detail{display:flex; flex-wrap:wrap; align-items:center;}
.review .blog_detail figure{width:15%; margin:0 1em 0 0;}
.review .blog_detail .castname a{font-size:1.1em; font-weight:bold; color:#222;}
.review .blog_detail .review_rating{width:80%;}
.review .blog_detail .review_name{font-size:.8em;}
.review .blog_detail .date{color:#848484;}

.review_bottom{width:100%; margin-top:1em;}
.review .review_bottom .review_ttl{margin-bottom:.4em;}

.r_more{/*display:block; height:20px; margin:5px 0 20px;text-align:right; font-weight:bold;*/display: none !important;}

.all a{display:block; width:100%; height:100%; text-align:center; padding:20px 0; box-sizing:border-box; border-top:1px solid #ccc; position:relative; font-size:1.1em;}
.all a::after {
  display: block;
  content: '';
  position: absolute;
  top: 40%;
  right: 0;
  width: 8px;
  height: 8px;
  border-right: 3px solid #67d9cb;
  border-bottom: 3px solid #67d9cb;
  transform: rotate(-45deg);
}

/* recommend */
#recommend{
  width:100%;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
  margin:4em auto;
  box-sizing:border-box;
  overflow:hidden
}

#recommend .rec_box{width:24%;}
#recommend .rec_box figure{margin:0; width:100%;}
#recommend .rec_txt{width:100%; text-align:center; margin:.5em 0;}


/*精算*/
.sensan-alert {color:red;font-size:14px;}
.sensan-price {font-size:14px;}


/*パンくず他*/

.bg-mask {
  height: 100%;
  background: rgba(255,255,255,0.8);
  padding:10px 5px;}

.category_area { display: table; width: 100%;}
.category_title { display: table-cell; text-align: left; padding-left:10px; }
.category_link { display: table-cell; text-align: right; padding-right:10px; }

coupon_main { display: flex; flex-wrap: wrap;}
.premium { width: calc(48%); margin:3px; padding:0 5px 5px 5px; border-radius:5%; height:225px;}
.premium2 {width: calc(48%); margin:3px; padding:0 5px 5px 5px; border-radius:5%; height:255px; background:#eee;}
.premium2 .text {font-size:14px; padding:5px;}
premium_main{ background:#FFF; color:#000; display: flex; flex-direction: row; flex-wrap: wrap;}
.premium0{ margin: 5px 5px 0 5px; padding:10px; width:160px; color:#2BB3C0; font-weight:bold;}
.pic{text-align:center; height:90px;}
.pic img{ border-radius:50%; width:120px; height:90px; object-fit: cover;}
premium_main div.premium { width: calc(33.3%); margin: 0px; padding:5px; border:none;}


.inline { font-size:17px; display: table-cell; /* IE8から使用可能 */ vertical-align: middle;}

/*よくある質問*/
.cp_actab {
position: relative;
overflow: hidden;
width: 100%;
margin: 0 auto;
color: #222;
}
.cp_actab input {
position: absolute;
z-index: -1;
opacity: 0;
}
.cp_actab label {
font-size: 14px;
line-height: 1.5;
position: relative;
display: block;
padding: 1em 2.5em 1em 1em;
cursor: pointer;
margin: 0;
background:url("../images/btn_bg.png") no-repeat; 
background-size:100% 100%;
border:1px solid #ddd;
}

.cp_actab label:before{
	content:"";
	display:inline-block;
	width:1.4em;
	height:1.4em;
	margin-right:.5em;
	margin-bottom:-.3em;
	background:url(../images/q.png) no-repeat;
	background-size:100%;
}


.cp_actab .cp_actab-content {
font-size: 1em;
overflow: hidden;
max-height: 0;
-webkit-transition: max-height 0.35s;
transition: max-height 0.35s;
background: #FFF;
border-right:1px solid #ddd;
border-left:1px solid #ddd;
}
.cp_actab:last-child .cp_actab-content{border-bottom:1px solid #ddd;}

.cp_actab .cp_actab-content p {margin: 1.5em;}
.cp_actab input:checked ~ .cp_actab-content {max-height: 50em;}
.cp_actab label::after {
line-height: 3;
position: absolute;
top: 13px;
right: 10px;
display: block;
width: 3em;
height: 3em;
-webkit-transition: all 0.35s;
transition: all 0.35s;
text-align: center;
}

/*閉じた状態の矢印描画*/
.cp_actab input[type=checkbox] + label::after {
 content:"";
  display:block;
  width:1em;
  height:1em;
  border-top: #ea4f85 1px solid;
  border-right: #ea4f85 1px solid;
  -webkit-transform: rotate(135deg);
  -ms-transform: rotate(135deg);
  transform: rotate(135deg);
  position:absolute;
  right: 1em;
  top: 0;
  bottom: 18%;
  margin: auto;
}

/*開いた状態の矢印描画*/
.cp_actab input[type=checkbox]:checked + label::after {
	transform: rotate(-45deg);
  position:absolute;
  right: 1em;
  top: 18%;
  bottom: 0;
 }

/* list */
.circle_list{width:100%; padding:0 1.5em 1.5em; line-height:1.5;}
.circle_list li{margin-bottom:.8em; padding-left: 1em; text-indent: -1em;}
.circle_list li:before{content:"●"; font-size:.4em; margin-right:1em; color:#6ec3ec;}


/*リボン帯*/
.texts{
 width: 100%;
 height: 25px;
 overflow-y: hidden;
 text-align: left;
}
.texts span{
 position: relative;
 display: inline-block;
 width: 100%;
 height: 100%;
 font-size: calc(70% + 1vw)
}
#tabBoxes .text{
 padding:0 1em;
}
/* アニメーション */
.texts span{
 animation: ShiftText 10s linear infinite;
}
@keyframes ShiftText{
 0%{ opacity: 0; }
 1%,25%{
 top: 0;
 opacity: 1;
}
26%,50%{
 top: -2.2em;
}
51%,75%{
 top: -4.4em;
}
76%,100%{
 top: -6.6em;
}}

.font{
 color:#000;
 font-size:16px;
 font-family:"ヒラギノ丸ゴ Pro W4","ヒラギノ丸ゴ Pro","Hiragino Maru Gothic Pro";}

.center2{
 text-align:center;
 font-size:17px;
 font-weight:bold;
 margin:20px auto;
}
.trouble_img{
 width:140px;
 height:80px;
 object-fit: cover;

}
.case_center{
 text-align:center;
 margin-left:8%;
 width:85%;
}
.step{
 text-align:center;
 background:#2BB3C0;
 color:#FFF;
 font-size:15px;
 line-height:15px; padding:5px;
 width:80px;
}

.title_center{
  text-align:center;
  font-weight:bold;
  font-size:30px;
  padding-bottom:10px;
}
.coments{
 text-align:center;
 font-size:15px;
 margin:10px auto;
}

#feature{
 width:100%;
 margin:30px 0;
}
.f_list a{
 width:100%;
 padding:1%;
 box-sizing: border-box;
 border-top:1px solid #ccc;
 display: -webkit-flex; /* Safari */
 display: flex;
 position:relative;
}
.f_list a:last-child{border-bottom:1px solid #ccc;}
.f_list a figure{width:35%; margin:10px;}
.f_list a .txt{width:58%;}
.f_list a .txt h3{ margin:8px 0 5px; font-size:1.2em; color:#09dbca;}
.f_list a .txt p{margin:0; color: #333;}
#feature h3{font-size:13px;}
.arrow2{
  position: relative;
  display: inline-block;
 color: #09dbca;
 }
.arrow2::before{
  content: '';
  width: 8px;
  height: 8px;
  border: 0px;
  border-top: solid 2px #09dbca;
  border-right: solid 2px #09dbca;
  transform: rotate(135deg);
  position: absolute;
  top: 65%;
  left: 49%;
  margin-top: 6px;
}

/*ジャンル*/

.carousel {
width:100%;
padding:12px 0;
overflow-x:scroll;
-webkit-overflow-scrolling:touch;
overflow-scrolling:touch;
white-space:nowrap;
}

.carousel li {
background: #fff;
margin: 2px;
text-align: center;
display: inline-block;
 width:85%;
}

.carousel li img{
width:100%;
text-align:center;
padding:10px;
}
.carousel li p{
white-space:normal !important;
text-align:left;
padding:0 10px 10px;
}
.text_s{
font-weight:normal;
}
.carousel a{
color:#000;
}

.dblist {
 padding-bottom: 15px;
 padding-top: 5px;
 background: #FFF;
}


/* --------------------------------------------------
	 日にちを選ぶ　schedule_list
-------------------------------------------------- */
#schedule_list{width:100%;}
.center_txt{width:100%; text-align:center; margin-bottom:1em;}

/*スケジュール可否*/
.sche_color{width:100%; display:flex; justify-content:center;}
.sche_color li{margin-right:2em; display:flex; align-items:center;}
.sche_color li.available:before{content:"■"; color:#f2d5e3; margin-right:.3em; font-size:1.5em;}
.sche_color li.reserved:before{content:"■"; color:#f5d6b0; margin-right:.3em; font-size:1.5em;}
.sche_color li.impossible:before{content:"■"; color:#ddd; margin-right:.3em; font-size:1.5em;}

/*スケジュール内容*/
.schedule{width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; margin:1em auto;}
.schedule dt{width:25%; padding:10px; text-align:center; margin-bottom:.5em; background:#6ec3ec; color:#fff;}
.schedule dd{width:75%; padding:10px; margin-bottom:.5em; background:#fff;}


/*スケジュール一覧*/
.sche_head{
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 1em; 
 width: 100%; 
 z-index: 100;
 /*background:#fcf5f5;*/
 padding-bottom:10px;
}

.sche_head .today00{font-size:1.1em; color:#6ec3ec;}
.sche_head .preday00{
 display: block;
 background: linear-gradient(to top, #6ec3ec 0%, #9cd9f3 100%);
 border: none;
 border-radius: 6px;	
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
 color:#fff;
 padding: 5px 10px;
}
.sche_head .preday00 a{color:#fff;}
.sche_head .preday00:before{
 content: '<';
 margin: 0 5px 0 0;
 font-wheight:bold;
 color:#fff;
}

.sche_head .nextday00{
 display: block;
 background: linear-gradient(to top, #6ec3ec 0%, #9cd9f3 100%);
 border: none;
 border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
 color:#fff;
 padding: 5px 10px;
}
.sche_head .nextday00 a{color:#fff;}
.sche_head .nextday00:after{
 content: '>';
 margin: 0 0 0 5px;
 font-wheight:bold;
 color:#fff;
}

/* スケジュール表 */

.sticky_table{
	width:100%;
	border: 1px solid #ddd;
	border-collapse: collapse;
	}

.sticky_table thead th {
  /* 縦スクロール時に固定する */
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
  /* tbody内のセルより手前に表示する */
  z-index: 1;
  background:#fff;
}

.sticky_table thead th {
	border: 1px solid #fff;
	background:#4a87e2;
	color:#fff;
	font-size:.9em;
	line-height:1.5;
	padding:2% 1%;
	box-sizing:border-box;
}
.sticky_table th{
	border: 1px solid #fff;
	padding:5px;
	font-size:.9em;
	background:#dfecf2;
	color:#4a87e2;
}
.sticky_table td{
	border: 1px solid #fefefe;
	background:#eee;
	padding:1em;
}

.sticky_table td.available{
	background:#f2d5e3;
}

.sticky_table td.reserved{
	background:#f5d6b0;
}

.sche_table{border: 1px solid #ccc; width: 1000px;}
.sche_table .nonactive{ background: #e1e1e1;}

.sche_table th{ background: #6ec3ec;border: 1px solid #ccc; padding: .2%; color: #fff;}
.sche_table th:first-child{ position: -webkit-sticky;position: sticky;left: 0;}

.sche_table td{border: 1px solid #ccc; padding:0; color: #6ec3ec; text-align: center; width: 1.77%;}
.sche_table td:first-child{ width: 15%;position: -webkit-sticky;position: sticky;left: 0; background: #fff;}

.sche_table td:first-child div{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-start;}
.sche_table td:first-child div figure{ width: 40%; margin: 0;}
.sche_table td:first-child div p{ font-size: 0.9em; color: #6ec3ec; padding: 0.5%; display: block; width: 60%; text-align: center;}

.sche_table_txt{ padding: 2%; font-size: 0.9em;}
.table_wrap{width: 100%; overflow-x: scroll;}

#tabBox2 .p_box .sche_flex{display:flex; flex-wrap:wrap; justify-content:flex-start; align-items:flex-start; font-size: 0.85em; margin-bottom: 1%;}
#tabBox2 .p_box .sche_date{ margin-right: 2%;}
#tabBox2 .p_box{padding: 2% 0 0;}

@media screen and (min-width: 768px){
  .sche_table{border: 1px solid #ccc;width: 100%;}
  .sche_table td:first-child{ width: 15%;}
  .sche_table_txt{ padding: 1%;}
}

/* ------------------------
	 ログイン/お問い合わせ
------------------------ */

.msgarea{
	width:100%;
	margin:10px auto;
	box-sizing:border-box;
	border:1px solid #eee;
	background-color: rgba( 255, 255, 255, 0.8 );
	padding:1em 1.5em;
}

/* フォーム */
.type01 dt{margin-bottom:.8em; display:flex; flex-wrap:wrap; align-items:center;}
.type01 dd{margin-bottom:.5em;}
.required{background:#6ec3ec; color:#fff; font-size:.7em; padding:.4em; margin-left:.5em;}

input[type="text"],
input[type="email"],
input[type="e_mail"]{
 border: 1px solid #eee;
 padding: 10px 5px;
 border-radius: 2px;
 width:100%;
 margin-bottom:1em;
}

input[type="password"]{
	width:100%;
	border:1px solid #eee;
	padding:10px;
	margin-bottom:1em;
}

input[type=checkbox] {
    display: none;
}
.loginchk00{
    box-sizing: border-box;
    cursor: pointer;
    display: inline-block;
    padding: 5px 30px;
    position: relative;
    width: auto;
    margin:auto;
}
.loginchk00::before {
    background: #fff;
    border: 1px solid #ccc;
    border-radius: 50%;
    content: '';
    display: block;
    height: 16px;
    left: 5px;
    margin-top: -8px;
    position: absolute;
    top: 50%;
    width: 16px;
}
.loginchk00::after {
    background: #6ec3ec;
    border-radius: 50%;
    content: '';
    display: block;
    height: 8px;
    left: 10px;
    margin-top: -3px;
    opacity: 0;
    position: absolute;
    top: 50%;
    width: 8px;
}
input[type=checkbox]:checked + .loginchk00::before {
    border-color: #ccc;
}
input[type=checkbox]:checked + .loginchk00::after {
    opacity: 1;
}

input,textarea {-webkit-appearance: none; background-color:#fff; border:1px solid #eee; border-radius:0; padding:0.25em 0.5em; width:100%;}
textarea {height:6.5em;}

.reregister{width:100%; margin:1.5em 0;}


/* 時間を決める */
.sche_reserve{display:flex; flex-wrap:wrap; align-items:center;}
.sche_reserve dt{width:35%; padding:.5em; position:relative; margin-bottom:.5em; font-weight:600;} 
.sche_reserve dd{width:65%; padding:.5em; margin-bottom:.5em;}

.cp_ipselect {
	overflow: hidden;
	width: 100%;
	margin: auto;
	text-align: center;
}
.cp_ipselect select {
	width: 100%;
	padding-right: 1em;
	cursor: pointer;
	text-indent: 0.01px;
	text-overflow: ellipsis;
	border: none;
	outline: none;
	background: transparent;
	background-image: none;
	box-shadow: none;
	-webkit-appearance: none;
	appearance: none;
}
.cp_ipselect select::-ms-expand {
    display: none;
}
.cp_ipselect.cp_sl01 {
	position: relative;
	border: 1px solid #eee;
	border-radius: 2px;
	background: #ffffff;
}
.cp_ipselect.cp_sl01::before {
	position: absolute;
	top: 1.2em;
	right: 0.9em;
	width: 0;
	height: 0;
	padding: 0;
	content: '';
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 5px solid #6ec3ec;
	pointer-events: none;
}
.cp_ipselect.cp_sl01 select {
	padding: 8px 38px 8px 8px;
	color: #222;
}

/* --------------------------------------------------
	 順番待ち予約
-------------------------------------------------- */
.tel_cast{width:70%; padding:2em;margin:2em auto;}
.tel_cast_name{text-align:center; margin-top:.5em; font-size:1.5em;}
.wait_count{font-weight:700; font-size:1.5em; margin:.5em;}

/* --------------------------------------------------
	 beginner
-------------------------------------------------- */
#beginner{width:100%;}

.cont_wrap{width:100%; margin-bottom:3em;}
.article_intro{width:100%; display:flex; flex-wrap:wrap; justify-content:space-between;}
.article_intro figure{width:100%; margin:0 auto 1.5em;}
.article_intro .text{width:100%; margin:0 auto 1em;}

.left_border_ttl{border-left:4px solid #6ec3ec; padding-left:.5em; margin:0 0 1em 0;}
.list_wrap{width:100%; margin-bottom:1em;}

.cont_txt{width:100%; margin-bottom:2em;}
.num_ttl{width:100%; display:flex; flex-wrap:wrap; align-items:center; font-size:1.1em; margin:0 0 1em;}
.circle_num {
 height:30px;
 width:30px;
 border-radius:50%;
 line-height:30px;
 text-align:center;
 background:#6ec3ec;
 color:#fff;
 font-weight:normal;
 margin-right:.5em;
}

.num_ttl .ttl_text{width:85%;}


/* --------------------------------------------------
	 about
-------------------------------------------------- */
.reason{width:100%; display:flex; flex-wrap:wrap; justify-content:space-between;}
.reason_dtl{width:47%; margin-bottom:2em;}
.reason_dtl .text{width:100%; margin:1em auto;text-align:center;}
.arrow{
    position: relative;
    display: inline-block;
    padding: 0 1.5em 0 0;
    color: #222;
    vertical-align: middle;
    text-decoration: none;
    font-size:.9em;
}

.arrow:hover{color:#6ec3ec; transition:.3s;}

.arrow::before,
.arrow::after{
    position: absolute;
    top: 0;
    bottom: 0;
    right: 0;
    margin: auto;
    content: "";
    vertical-align: middle;
}

.right_arrow::before{
    width: 14px;
    height: 14px;
    background: #6ec3ec;
}
.right_arrow::after{
    right: 6px;
    width: 3px;
    height: 3px;
    border-top: 1px solid #fff;
    border-right: 1px solid #fff;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

/* --------------------------------------------------
	 company
-------------------------------------------------- */
.company_dtl{width:100%;}
.company_dtl dt{width:100%;
font-size: 1.2em;
text-align: left;
font-weight: normal;
padding: 1rem 2rem;
border-left: 5px solid #9cd9f3;
background: #e9f5f5;
}
.company_dtl dd{padding: 1rem 2rem; background:#fefefe;}

/* --------------------------------------------------
	 guide
-------------------------------------------------- */
.dot_ttl{margin:0 0 .5em; font-size:1em;}
.dot_ttl:before{content:"●"; color:#e94b82; font-size:.8em; margin-right:.5em;}
#guide{width: 100%; margin: 0 auto;}
#guide .center_ttl{ font-weight: normal;}
/* フロー */
.flow {
    margin: 0 auto 50px;
}

.flow .box {
    margin: 0 auto 4.5em;
    width: 90%;
    position: relative;
	background: #fff;
	padding: 0 0 4%;
}

.flow .box img{width:100%; margin:auto; display:block;}
.flow .box .text{padding: 0 10%;}

.flow .box a.btn{ width: 80%; margin: 3% auto 6%;}

.flow .box:after {
   border-bottom: solid 2px #132237;
   border-right: solid 2px #132237;
  width: 20px;
  height: 20px;
  transform: rotate(45deg);
    content: "";
    position: absolute;
    bottom: -38px; /* 三角形の高さ＋ボックスのボーダーをマイナスに */
    left: 50%;/* 中央寄せに使用 */
    margin-left: -15px; /* 中央寄せに使用 */
}

.flow .box:last-child:after {
    border: none; /* 最後のボックスだけ三角形を表示しない */
}

.step_ttl{text-align:center;  font-size:1.2em; margin-bottom:.5em;}
.step_ttl span{display:block; font-size:.75em; border-radius: 50px; padding: 2% 6%; background:#f2d5e3 ; width: 50%; margin: 0 auto 4%; font-weight: normal;}

.em_txt{margin-bottom:1em; text-align:center;}


/* 料金案内 */
.tool{width:100%; margin:2em auto;}
.tool_type{width:100%; display:flex; flex-wrap:wrap; justify-content:space-around;}
.tool_type .box {
    margin: 0 auto 1em;
    width: 90%;
    position: relative;
}
.tool_type .box img{width:100%; margin:1.5em auto .5em; display:block;}
.tool_type .box span{width:100%; margin:0 auto 1.5em; display:block; text-align: center;}
.cash_logo img{ width: 50% !important; height: auto; margin: 0 auto;}
.tool_img img{width:20%; max-width:150px;}
.tool_type .box .text{width:100%; margin:1em auto;}

.store_btn{display:flex; flex-wrap:wrap; justify-content:space-around; align-items:center;}
.store_btn li{width:50%;}
.store_btn li.app_img img{width:80%;}
.store_btn li img{max-height:70px;}

/* 設定方法 */
.setting{width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; margin-bottom:1.5em;}
.setting h4{width:100%;}
.setting .box{width:47%; margin-bottom:2em;}
.setting .setting_img{width:80%; margin:auto; margin-bottom:1em;}


/* --------------------------------------------------
	 special contents
-------------------------------------------------- */
.sc_index{ width: 94%; margin: auto; background: #fff; padding: 8% 8%; border: 1px solid rgba(110, 195, 236,0.8);}
.sc_index h4{ text-align: center; margin: 0 0 1%;}
.sc_index li a{ display: block; color: #333; position: relative;width: 100%; padding: 2% 0; border-bottom:1px solid rgba(204, 204, 204,0.7); font-size: 1.2em;}
.sc_index li a:hover{color: rgba(110, 195, 236,1);}

.sc_index li:nth-child(2) a:before{content: "1."; margin-right: 2%;}
.sc_index li:nth-child(3) a:before{content: "2."; margin-right: 2%;}
.sc_index li:nth-child(4) a:before{content: "3."; margin-right: 2%;}
.sc_index li a:after{
  content: "";
  position: absolute;
  top: 50%;
  right: 1em;
  width: 10px;
  height: 10px;
  border-top: 1px solid rgba(204, 204, 204,1);
  border-right: 1px solid rgba(204, 204, 204,1);
  transform: rotate(45deg);
  margin-top: -5px;
}
@media screen and (min-width: 1025px){
    .sc_index{ width: 80%; margin: auto; background: #fff; padding: 4% 8%; border: 1px solid rgba(110, 195, 236,0.8);}
}


/* -------------------------
	汎用パーツ
--------------------------- */
/* メイン画像 */
.main_image{width:100%; margin-bottom:2em;}
.main_image figure{margin:0;}


/* 注意書き */
.notice{width:100%; background:#fff; padding:1.5em; margin:2em auto; border-radius:10px;}

/* 画像左+テキスト */
.f_left_box{width:100%; margin:2em auto; overflow:hidden;}
.f_left_box figure{width: 45%; margin:0 1em 1em 0; float:left;}
.f_left_box .text{width:100%;}


/* 画像左+テキスト */
.f_right_box{width:100%; margin:2em auto; overflow:hidden;}
.f_right_box figure{width: 45%; margin:0 0 1em 1em; float:right;}
.f_right_box .text{width:100%;}


/* 画像3列 */
.col3_img{display:flex; flex-wrap:wrap; justify-content:space-between; margin:2em auto;}
.col3_img .img_box{width:100%; margin:0 auto 1.5em;}
.col3_img .img_box figure{margin:0 0 1em;}

/* 画像２列 */
.col2_img{display:flex; flex-wrap:wrap; justify-content:space-between; margin:2em auto;}
.col2_img .img_box{width:46%; margin-bottom:1em;}
.col2_img .img_box figure{margin:0 0 1em;}

.img_box figcaption{text-align:center;}



/* --------------------------------------------------
	 テキストチャット
-------------------------------------------------- */
#message_page .msgarea { padding: 1.4em !important;}
#message_page .msgarea i { color: #f0b1c2;}
.message_cast h2.list_title{ text-align: center; display: block; width: 100%;}

#message_page h2.t110 {margin-bottom:0;}
#msg_area {background:#6ec3ec;padding:20px 0;font-size:16px;}
#msg_area h3 {font-size:18px; margin-bottom:0.3em;}
#message_page #backToTop {bottom:100px;}

/* ユーザー */
#msg_area .user {position:relative; margin:0 0 30px 20px; overflow:hidden;}
#msg_area .user:before {position:absolute; top:-16px; left:0; display:block; content:""; width: 33px; height: 33px; border-radius: 50%; box-shadow: 5px 10px 0 0 #fff;}
#msg_area .user .msg {max-width:50%; margin-left:16px; background-color:#fff; padding:20px; border-radius:14px; position:relative; z-index:1;}
#msg_area .user .log {display:block; position:absolute; bottom:5px; left:calc(100% + 10px); font-size:12px; color:#666;}


/* ユーザ左　使用中　メール鑑定結果 */
#msg_area .user2  {display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; position:relative; margin:0 20px 30px 0; overflow:hidden;}
#msg_area .user2:before {position:absolute; top:-16px; left:50px; display:block; content:""; width: 33px; height: 33px; border-radius: 50%; box-shadow: 5px 10px 0 0 #fff;}
#msg_area .user2 .msg{/*max-width:calc(68% - 80px);*/ width: 100%; background-color:#fff; padding:20px; /*border-radius:14px;*/ position:relative; z-index:1;}
#msg_area .user2 .log {display:block; position:absolute; bottom:5px; right:calc(100% + 10px); font-size:12px; color:#666; text-align:right;}

#msg_area .user2 .avatar { display: none; /*width:80px; height:80px;*/ overflow:hidden; position:relative; margin-right:16px;}
#msg_area .user2 .avatar .wrap01 img {position:absolute; margin:auto; top:-100%; bottom:-100%; left:-100%; right:-100%; width:100%; height:auto;}
#msg_area .user2 .msg .comment .sodannaiyo{font-size: 1.1em; font-weight: bold;}
#msg_area .user2 .msg .comment{ word-break: break-all;}


/* ユーザ左　使用中　メッセージボックス＞メッセージページ */
#msg_area .user3  {display: -webkit-flex; display: flex; -webkit-flex-direction: row; flex-direction: row; position:relative; margin:0 20px 30px 0; overflow:hidden;}
#msg_area .user3:before {position:absolute; top:-16px; left:50px; display:block; content:""; width: 33px; height: 33px; border-radius: 50%; box-shadow: 5px 10px 0 0 #fff;}
#msg_area .user3 .msg{max-width:calc(68% - 80px); background-color:#fff; padding:20px; border-radius:14px; position:relative; z-index:1;}
#msg_area .user3 .log {display:block; position:absolute; bottom:5px; right:calc(100% + 10px); font-size:12px; color:#666; text-align:right;}

#msg_area .user3 .avatar {width:80px; height:80px; overflow:hidden; position:relative; margin-right:16px;}
#msg_area .user3 .avatar img {position:absolute; margin:auto; top:-100%; bottom:-100%; left:-100%; right:-100%; width:100%; height:auto;}


/* キャスト右 　使用中　メール鑑定結果*/
#msg_area .cast {/*display: -webkit-flex; display: flex; -webkit-flex-direction: row-reverse; flex-direction: row-reverse;*/ position:relative; margin:0 20px 30px 0; overflow:hidden; background: #fff;}
#msg_area .cast:before {position:absolute; top:-16px; right:80px; display:block; content:""; width: 33px; height: 33px; border-radius: 50%; box-shadow: -5px 10px 0 0 #fff;}
#msg_area .cast .msg {/*max-width:calc(68% - 80px);*/ width: 100%; background-color:#fff; padding:10px; border-radius:14px; position:relative; z-index:1;}
#msg_area .cast .avatar { display: -webkit-flex; display: flex; align-items: center;/*width:80px; height:80px;*/ overflow:hidden; position:relative; /*margin-left:16px;*/ padding: 0; margin: 10px;}
#msg_area .cast .avatar .wrap01 img {position:absolute; margin:auto; top:-100%; bottom:-100%; left:-100%; right:-100%; width:100%; height:auto;}
#msg_area .cast .log {display:block; position:absolute; bottom:5px; right:calc(100% + 10px); font-size:12px; color:#666; text-align:right;}
#msg_area .cast .msg .comment .kanteikekka,#msg_area .cast .avatar .kanteikekka{font-size: 1.1em; font-weight: bold;}
#msg_area .cast .msg .comment{ word-break: break-all;}

/* ユーザー右 */
#msg_area .cast2 {display: -webkit-flex; display: flex; -webkit-flex-direction: row-reverse; flex-direction: row-reverse; position:relative; margin:0 20px 30px 0; overflow:hidden;}
#msg_area .cast2:before {position:absolute; top:-16px; right:80px; display:block; content:""; width: 33px; height: 33px; border-radius: 50%; box-shadow: -5px 10px 0 0 #fd71a7;}
#msg_area .cast2 .msg {max-width:calc(78% - 80px); background-color:#fd71a7; color:#fff; padding:20px; border-radius:14px; position:relative; z-index:1;margin-right: 16px;}
#msg_area .cast2 .log {display:block; position:absolute; bottom:5px; right:calc(100% + 10px); font-size:12px; color:#666; text-align:right;}
#msg_area .cast2 .avatar {width:80px; height:80px; overflow:hidden; position:relative; margin-left:16px;}
#msg_area .cast2 .avatar img {position:absolute; margin:auto; top:-100%; bottom:-100%; left:-100%; right:-100%; width:100%; height:auto;}


/* キャスト右 　使用中　　メッセージボックス＞メッセージページ*/
#msg_area .cast3 {display: -webkit-flex; display: flex; -webkit-flex-direction: row-reverse; flex-direction: row-reverse; position:relative; margin:0 20px 30px 0; overflow:hidden;}
#msg_area .cast3:before {position:absolute; top:-16px; right:80px; display:block; content:""; width: 33px; height: 33px; border-radius: 50%; box-shadow: -5px 10px 0 0 #fff;}
#msg_area .cast3 .msg {max-width:calc(68% - 80px); background-color:#fff; padding:20px; border-radius:14px; position:relative; z-index:1;}
#msg_area .cast3 .avatar {width:80px; height:80px; overflow:hidden; position:relative; margin-left:16px;}
#msg_area .cast3 .avatar img {position:absolute; margin:auto; top:-100%; bottom:-100%; left:-100%; right:-100%; width:100%; height:auto;}
#msg_area .cast3 .log {display:block; position:absolute; bottom:5px; right:calc(100% + 10px); font-size:12px; color:#666; text-align:right;}


/* 画像送信 */
#msg_area .photo:before {box-shadow: -5px 10px 0 0 #fff;}
#msg_area .photo .photo_box {max-width:calc(68% - 80px); position:relative; background-color:#fff; padding:20px; text-align:center; border-radius:14px;}
#msg_area .photo .photo_box.pre button {display:inline-block; background-color:#f09528; font-size:16px; color:#fff; line-height:1; padding:0.75em 1em; border-radius:2em; border:none; cursor:pointer; vertical-align:middle;}

/* 画像送信2 */
#msg_area .photo2:before {box-shadow: 5px 10px 0 0 #fff;}
#msg_area .photo2 .photo_box {max-width:calc(68% - 80px); position:relative; background-color:#fff; padding:20px; text-align:center; border-radius:14px;}
#msg_area .photo2 .photo_box.pre button {display:inline-block; background-color:#f09528; font-size:16px; color:#fff; line-height:1; padding:0.75em 1em; border-radius:2em; border:none; cursor:pointer; vertical-align:middle;}

/* 投稿BOX */
#msg_area .post_box {display:table; width:996px; margin:2px; padding:20px; background-color:#e3f6ff; box-sizing:border-box; border-top: 1px solid #ccc;}
#msg_area .post_box.static {position:static; width:996px; margin:2px; box-shadow:none;}
#msg_area .post_box.fixed {position:fixed; bottom:0; left:50%; margin:0 0 0 -498px; z-index:10; box-shadow:0 -2px 5px 0 rgba(0,0,0,0.15);}
#msg_area .post_box > div {display:table-cell; vertical-align:middle;}
#msg_area .post_box .input_box {padding:0 10px 0 20px; width:100%;}
#msg_area .post_box .input_box input { margin-bottom: 0;}
#msg_area .post_box .submit_btn { margin: 0; padding: 0;}
#msg_area .post_box .submit_btn button {display:inline-block; font-size:14px; color:#fff; line-height:1; padding:0.75em 1em; border-radius:4px; border:none; cursor:pointer; white-space:nowrap;
background: -moz-linear-gradient(top, #6ec3ec, #9cd9f3);
background: -webkit-linear-gradient(top, #6ec3ec, #9cd9f3);
background: linear-gradient(to top, #6ec3ec, #9cd9f3);
box-shadow: 2px 2px 3px rgba(0,0,0,0.1);}
#msg_area .post_box .user_btn{ width: 10%;}
#msg_area input {font-size: 16px;}


#message_page #page {padding:0; margin:0;}
#message_page #main {display:block;}
#message_page h2.t110 {padding:0 0 10px 55px; background-position:left 20px top;}
#msg_area {font-size:14px;}
#msg_area h3 {font-size:15px;}
#message_page #backToTop {bottom:90px;}

/* ユーザー */
#msg_area .user {margin:0 0 20px 10px;}
#msg_area .user .msg {max-width:60%; padding:12px 14px;}
#msg_area .user .log {left:calc(100% + 5px); font-size:10px;}
	
/* ユーザ左　使用中　メール鑑定結果 */
#msg_area .user2 {margin:0 10px; border: 1px solid #ccc; border-bottom: none;}
#msg_area .user2 .msg {/*max-width:calc(90% - 50px);*/ max-width: 100%; padding:12px 14px;}
#msg_area .user2 .log {left:calc(100% + 5px); font-size:10px;}
#msg_area .user2 .avatar {width:50px; height:auto; max-height: 120px;}
#msg_area .user2 .avatar .wrap01 { position: relative; width:50px; height:50px;}


/* ユーザ左　使用中　メッセージボックス＞メッセージページ */
#msg_area .user3 {margin:0 0 20px 10px;}
#msg_area .user3 .msg {max-width:calc(68% - 50px); padding:12px 14px;}
#msg_area .user3 .log {left:calc(100% + 5px); font-size:10px;}
#msg_area .user3 .avatar {width:50px; height:50px;}	


/* キャスト右 　使用中　メール鑑定結果*/
#msg_area .cast {margin:0 10px; border: 1px solid #ccc; border-top:none;}
#msg_area .cast:before {right:50px;}
#msg_area .cast .msg {/*max-width:calc(80% - 20px);*/ width: 100%; padding:10px;}
#msg_area .cast .avatar {width:100%; height:50px; }
#msg_area .cast .avatar .wrap01 { position: absolute; width:100px; height:50px; max-height: 50px; right: 20px;}
#msg_area .cast .log {right:calc(100% + 5px); font-size:10px;}
	
/* ユーザー右 */	
#msg_area .cast2 {margin:0 10px 20px 0;}
#msg_area .cast2:before {right:0px;}
#msg_area .cast2 .msg {max-width:calc(68% - 50px); padding:12px 14px;}
#msg_area .cast2 .avatar { position: relative; width:50px; height:50px;}
#msg_area .cast2 .log {right:calc(100% + 5px); font-size:10px;}	

/* キャスト右 　使用中　　メッセージボックス＞メッセージページ*/
#msg_area .cast3 {margin:0 10px 20px 0;}
#msg_area .cast3:before {right:50px;}
#msg_area .cast3 .msg {max-width:calc(68% - 50px); padding:12px 14px;}
#msg_area .cast3 .avatar {width:50px; height:50px;}
#msg_area .cast3 .log {right:calc(100% + 5px); font-size:10px;}
	
/* 画像送信 */
#msg_area .photo .photo_box {max-width:calc(68% - 50px); padding:14px;}
#msg_area .photo .photo_box.pre button {font-size:14px;}
	
#msg_area .photo2 .photo_box {max-width:calc(68% - 50px); padding:14px;}
#msg_area .photo2 .photo_box.pre button {font-size:14px;}	

/* 投稿BOX */
#msg_area .post_box {width:100%; margin:0; padding:15px 10px;}
#msg_area .post_box.static {width:calc(100% - 2px); margin:1px;}
#msg_area .post_box.fixed {width:100%; left:0; margin:0; box-shadow:0 -2px 5px 0 rgba(0,0,0,0.15);}
#msg_area .post_box {padding:15px 10px;}
#msg_area .post_box .input_box {padding:0 5px;}
#msg_area .post_box .submit_btn button {font-size:14px;}

.moji_date,.time_box{ display: block; width: 30%; margin: 10px auto;background:#e3f6ff; text-align: center; border-radius: 10px;}
.moji_tel{ text-align: center; color: #EFEFEF;}
#msg_area  .time{ display: none; color: #EFEFEF; font-size: 80%; padding: 5% 0 0;}
#msg_area  .kidoku{ display: none; color: #EFEFEF; font-size: 80%; padding: 0;}


/* ------------------
	 口コミ一覧
--------------------- */
#main #review .review_area{width:100%; background: #fff;}


/* タブレット */
/*--------------------------------------------------------------------- */
@media screen and (min-width: 600px){
body{padding-bottom:0;}

/*.head_txtbar{background:#fe9fc1; color:#fff; padding:.5em; font-size:.9em; position:relative;}
.head_txtbar:after{content:"▼"; position:absolute; top:2em; left:4em; color:#fe9fc1; z-index:99;}	*/

/* login_btn */
a.login_btn{/*position:absolute;*/ width:12%; max-width:100px; height:auto; color:#fff; font-weight:normal;/* left:.8em; top:1.2em;*/padding:1em; font-size:.85em;}
a.login_btn i{color:#fff; font-size:1.3em;}

/* 固定ボタン */
/*.fix_btnarea{display:none;}*/

/* ------------------
	 footer
--------------------- */
footer{width:100%;margin-bottom:0;}
footer#footer2{width:100%;margin:0;}
#f_nav_wrap{width:100%; background:#fff; display:flex; flex-wrap:wrap; justify-content:space-between; padding:3em;}
#f_nav_wrap .inner{width:1200px; margin:auto;  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;}
#f_nav_wrap .f_logo{width:30%;margin:1em 0;}
#f_nav_wrap .f_logo img{width:35%; margin:auto; display:block; text-align:center;}
#f_nav_wrap nav{width:70%;}

/* f_nav */
.f_nav{
	width:100%;
	margin:0;
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    align-items: center;
}

.f_nav li{
	width:50%;
	list-style:none;
	padding:5px;
	box-sizing:border-box;
	text-align:left;
	padding-left: 24px;
	line-height: 1.6em;
	background: url(../images/list_icon.png) left 0px top .6em no-repeat;
	background-size: 5px auto;
}

.f_nav li a{
	text-decoration:none;
	width:100%;
	display:block;
	color:#222;
	font-weight:normal;
	font-size:1em;
	transition:.3s;
}
.f_nav li a:hover{color:#6ec3ec;}

/* footer_support */
#f_support{padding:1em 0 2em; background:#6ec3ec;}
#f_support .inner{max-width:800px; margin:auto; display:flex; flex-wrap:wrap; justify-content:center; align-items:center;}
#f_support .title{width:60%;}
#f_support .call{width:75%; color:#fff; text-align:center; display:flex; flex-wrap:wrap; justify-content:center; align-items:center;}
#f_support .call .mobile_wrap,#f_support .call .landline_wrap{width:50%;}
.support_txt{text-align:center; color:#fff; font-size:1em; line-height:1.7;}

.sub_nav_wrap{background:#222; color:#fff; padding:3em;}
.sub_nav{display:flex; flex-wrap:wrap; justify-content:center; width:80%; margin:0 auto 1em;}
.sub_nav li{font-size:1em; margin-bottom:10px;}
.sub_nav li a{color:#fff; transition:.3s;}
.sub_nav li a:hover{color:#6ec3ec;}
.sub_nav li:after{content:"|"; color:#ccc; margin:10px;}
.sub_nav li:nth-child(even):after{content:"|"; color:#ccc; margin:10px;}
.sub_nav li:last-child:after{content:none;}

.copyright {
 text-align:center;
 font-size:.8em;
 box-sizing:border-box;
}

/* pagetop */
#pagetop{
    position:fixed;
    right:10px;
    bottom:10px;
    cursor:pointer;
    z-index: 10;
    width:50px;
    height:50px;
}

#pagetop img{
width:100%;
}

/* ------------------------
	 TOP
------------------------ */
/* top_message */
#top_message{width:100%; margin:6em 0;}
#top_message .message{width:100%; display:flex; flex-wrap:wrap;}
#top_message .message_img{width:45%;}
#top_message .message_txt{width:55%; background:#6ec3ec; color:#fff; padding:3em; text-align: justify; text-justify: inter-ideograph;}

/* mv */
#mv{margin-top:-2.4em;width:100%;height: auto;position: relative;box-sizing:border-box;overflow:hidden;}
#mv .catch01{ position: absolute;left: calc(50% - 200px);top: calc(64% - 100px); z-index: 1;width:auto;}
#mv .catch01 h2{ display: block; margin: 0 auto;color: #fff;font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; /*font-size: 1.9em;*/ font-weight: 500; text-align: center;
text-shadow:
3px 3px 6px rgba(15, 137, 231,0.5), -3px -3px 6px rgba(15, 137, 231,0.5),
-3px 3px 6px rgba(15, 137, 231,0.5),  3px -3px 6px rgba(15, 137, 231,0.5);	}
#mv .catch01 h1 {display: block; margin: .6em auto 0;}
#mv .catch01 h1 img{display: block; width: 35%; height: auto; margin: 0 auto;}
#mv	img.sp{display: none!important;}
#mv	img.pc{display: block!important;}	
	
/* introduction */
#introduction{width:100%; font-size:1em; background-image: url("../images/introduction_bg_pc.jpg"); background-repeat: no-repeat; background-size:cover;padding: 1em 2em; background-position: left;}
#introduction .inner{ width: 68%; margin: auto 0 auto auto; text-align:left;}
#introduction .inner .two_btnarea{display:flex; flex-wrap:wrap; justify-content:space-between;}
#introduction .inner .two_btnarea a{width:48%;}	
	
.top_banner	img.sp{display: none!important;}
.top_banner	img.pc{display: block!important;}
	
/* --------------------------------------------------
	 about
-------------------------------------------------- */
.reason{width:100%; display:flex; flex-wrap:wrap; justify-content:space-between;}
.reason_dtl{width:30%; margin-bottom:2em; align-items:flex-start;}
.reason_dtl .image{width:50%; margin:auto;}
.reason_dtl .text{width:100%; margin:1em auto;}
.howto_ttl{font-size:1.2em; margin-bottom:1em; text-align:center;}

/* おすすめ */
.rec_cast{width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; border-bottom:1px solid #132237; padding:1em;}
.rec_cast figure{width:20%; max-width:200px; margin-right:1.5em;}
.rec_cast .name{width:40%;}
.rec_cast .main_name{margin-bottom:.0em; font-size:1.2em;}
.rec_cast .text{width:100%; margin:1em auto;}
.rec_cast a.btn-flat{margin-right:auto;}

.request{width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;}
.request figure{width:25%; margin:auto;}
.request .text{width:65%; margin:1em auto;}
	
/* --------------------------------------------------
	 guide
-------------------------------------------------- */
/* 設定方法 */
.setting{width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; margin-bottom:2em;}
.setting h4{width:100%;}
.setting .box{width:30%; margin-bottom:2em;}
.setting .setting_img{width:50%; margin:auto; margin-bottom:1em;}

#priceguide{
   margin-top:-100px;/*headerの高さが100pxの場合*/
   padding-top:100px;
}

/* --------------------------------------------------
	 augur
-------------------------------------------------- */
.augur a .free_tag{
 position: absolute;
/* min-width: 50px;
 width: 6%;*/
 min-width: 90px;
 width: 10%;
 right: 0;
 text-align: center;
 margin: 0.8rem 0 0;
 padding: 0.4rem 0.5rem;
 border:none;
 border-radius: 10px;
 color: #fff;
 font-weight:bold;
 font-size: 12px;
 background: #7aafe7;
}
.augur a .free_tag span{ display:block; width: 100%;font-weight: normal;}		

.augur_info{width:60%; padding: 0;}	
.sratus_wrap{ width: 10%;}
}


/* PC */
/*--------------------------------------------------------------------- */
@media screen and (min-width: 1025px){

body{ margin:auto 0px; background:#f9f9f9; padding-top:80px;}
body#login{ margin:auto 0px; background:#f9f9f9; padding-top:80px;}
	
/* ------------------------
	 header
------------------------ */
header{
	width:100%;
	height:auto;
	box-sizing:border-box;
	position:relative;
	display:flex;
	flex-wrap:wrap;
	justify-content:center;
	align-items:center;
}
.bgw{ padding: 1% 2%;/*margin: 0;padding: 1% 0;width: 100%;box-sizing: border-box; height:80px;border-bottom: none;text-align:center;*/}	
	
header h1{
	width:40%;
	max-width:200px;
	margin:0 auto;
}
	
/* login_btn */
a.login_btn{/*position:absolute;*/ width:12%; max-width:100px; height:auto; color:#fff; font-weight:normal;/* left:.8em; top:1.2em;*/padding:1em; font-size:.85em; text-align: center;}
a.login_btn i{display:inline-block; color:#fff; font-size:1.3em;}	

/* メニュートグル＆ハンバーガーアイコン */
/*.drawer_toggle {display:none;}*/


/* -------------------------
	Gナビ
-------------------------- */
body#login #g_navi2 {top:80px;}
#g_navi2 { /*display: none;*/ /*display:block;*/ /*position:fixed; top:80px; left:0; height: auto!important; width:100%; background:rgba(255,255,255,0.9);*/}	
/*#g_navi2 .inner {width:1200px; margin:auto;}
#g_navi2 .layer {display:none;}
#g_navi2 .menu { position: relative; z-index: 100;}
#g_navi2 .menu{display:flex; flex-wrap:wrap; justify-content:space-around;}

#g_navi2 .menu li.half a{display:none;}
#g_navi2 li {width:200px;color:#222;border-bottom:none;text-align: left;position: relative;text-align:center;padding:.8em;box-sizing:border-box;}
#g_navi2 li a{background:none; width:100%; transition:.3s;}
#g_navi2 li a:hover{color:#6ec3ec;}
#g_navi2 li a span::after{
  content: none;
} 
#g_navi2 .support{display:none;}	*/


/* ------------------
	 footer
--------------------- */

footer{width:100%;margin:0;}

footer#footer2{width:100%;margin:0;}

#f_nav_wrap{width:100%; background:#fff; display:flex; flex-wrap:wrap; justify-content:space-between; padding:3em;}
#f_nav_wrap .inner{width:1200px; margin:auto;  display:flex; flex-wrap:wrap; justify-content:center; align-items:center;}
#f_nav_wrap .f_logo{width:30%; max-width:400px; margin:1em auto;}
#f_nav_wrap .f_logo img{width:35%; margin:auto; display:block; text-align:center;}
	
#f_nav_wrap .f_bnr{width: 60%; margin: 0 auto 2.5em;}	

/* f_nav */
.f_nav{
	width:100%;
	margin:0;
    display: flex;
    flex-wrap: wrap;
    justify-content:space-between;
    align-items: center;
}

.f_nav li{
	width:50%;
	list-style:none;
	padding:5px;
	box-sizing:border-box;
	text-align:left;
	padding-left: 24px;
	line-height: 1.6em;
	background: url(../images/list_icon.png) left 0px top .6em no-repeat;
	background-size: 5px auto;
}

.f_nav li a{
	text-decoration:none;
	width:100%;
	display:block;
	color:#222;
	font-weight:normal;
	font-size:1em;
	transition:.3s;
}
.f_nav li a:hover{color:#6ec3ec;}

/* footer_support */
#f_support{padding:1em 0 2em; background:#6ec3ec;}
#f_support .inner{max-width:1100px; margin:auto; display:flex; flex-wrap:wrap; justify-content:center; align-items:center;}
#f_support .title{width:30%;}
#f_support .call{width:70%; color:#fff; text-align:center; display:flex; flex-wrap:wrap; justify-content:center; align-items:center;}
#f_support .call .mobile_wrap,#f_support .call .landline_wrap{width:50%;}
.support_txt{text-align:center; color:#fff; font-size:1em; line-height:1.7;}

.sub_nav_wrap{background:#222; color:#fff; padding:3em;}
.sub_nav{display:flex; flex-wrap:wrap; justify-content:center; width:80%; margin:0 auto 1em;}
.sub_nav li{font-size:1em; margin-bottom:10px;}
.sub_nav li a{color:#fff; transition:.3s;}
.sub_nav li a:hover{color:#6ec3ec;}
.sub_nav li:after{content:"|"; color:#ccc; margin:10px;}
.sub_nav li:nth-child(even):after{content:"|"; color:#ccc; margin:10px;}
.sub_nav li:last-child:after{content:none;}

.copyright {
 text-align:center;
 font-size:.8em;
 box-sizing:border-box;
}

/* ------------------------
	 common
------------------------ */
/* 表示・非表示 */
.sp{display: none!important;}
.pc{display: block!important;}

.top_banner{margin:1em auto 2em;width: 96%;max-width: 1200px;}
	
.wrap{width:100%; margin:0em auto; padding:1em 0 3em;}
#main{ width: 96%; max-width:1200px; margin:0em auto; }	
.col2_wrap{width:100%;height:100%;display:flex; margin:1em auto;}
.col2_wrap #sticy_wrap{width:20%;}
.col2_wrap #side{width:100%; max-width:250px; position: -webkit-sticky; /* safari用 */ position: sticky; top: 200px;}
.col2_wrap #main{width:calc(100%-280px); max-width:900px; margin-left:5%;}	

.cast_main{
	width:100%; 
	height:100%; 
	min-height:350px;
	background:url("../images/main_ttl_bg.png") no-repeat; 
	background-size:cover; 
	background-position: center;
	display:flex;
	flex-direction: column;
    justify-content: center;
    align-items: center;
    padding-top:7em;
	}	
	
/* 見出し */
.cont_ttl{width:40%; font-size:30px;font-weight:normal; text-align:center; line-height:1.5;}
span.t02{display:block; font-size:.8em; letter-spacing:.2em; margin:0 auto 2em;}
.border_ttl{font-size: 1.8em; /*width:100%; border-bottom:2px solid #4a87e2; margin-bottom:2em; font-size:1.2em; padding:5px;*/}
.center_ttl{text-align:center; font-size:1.2em; margin-bottom:1.5em;}
.cont_ttl.long{width:80% !important;}
	
/* tab */
#tabBox1 .inner,
#tabBox2 .inner,
#tabBox3 .inner,
#tabBox4 .inner,
#tabBox5 .inner,
#tabBox6 .inner
{width:100%; padding:4em 2em 1em; box-sizing:border-box;}

#tabBox1 .inner2,
#tabBox2 .inner2,
#tabBox3 .inner2,
#tabBox4 .inner2,
#tabBox5 .inner2,
#tabBox6 .inner2
{width:100%; padding:0 2em 1em; box-sizing:border-box;}

#tabBox1 .augur, #tabBox2 .augur, #tabBox3 .augur, #tabBox4 .augur, #tabBox5 .augur, #tabBox6 .augur {
 height:auto;
 padding:1.5em 2em;
}
	
/* ------------------------
	 top
------------------------ */
#mv{margin-top:-1.8em;width:100%;height: auto;position: relative;box-sizing:border-box;overflow:hidden;}
#mv .catch01{ position: absolute;left: calc(50% - 200px);top: calc(58% - 100px); z-index: 1;width:auto;}
#mv .catch01 h2{ display: block; margin: 0 auto;color: #fff;font-family: YuMincho, "Yu Mincho", "Hiragino Mincho ProN", "serif"; /*font-size: 1.9em;*/ font-weight: 500; text-align: center;
text-shadow:
            3px 3px 6px rgba(15, 137, 231,0.5), -3px -3px 6px rgba(15, 137, 231,0.5),
           -3px 3px 6px rgba(15, 137, 231,0.5),  3px -3px 6px rgba(15, 137, 231,0.5);	
	}
#mv .catch01 h1 {display: block; margin: 1em auto;}
#mv .catch01 h1 img{display: block; width: 35%; height: auto; margin: 0 auto;}

/* introduction */
#introduction{width:100%; font-size:1em; background-image: url("../images/introduction_bg_pc.jpg"); background-repeat: no-repeat; background-size:cover;padding: 1em 2em;}
#introduction .inner{ width: 68%; margin: auto 0 auto auto; text-align:left;}
#introduction .inner .two_btnarea{display:flex; flex-wrap:wrap; justify-content:space-between;}
#introduction .inner .two_btnarea a{width:48%;}	
	
/* top_category */
#top_category{width:100%; margin:6em 0;}
#top_category ul{width:700px; margin:auto; display:flex; flex-wrap:wrap; justify-content:space-between;}
#top_category li{width:32%; margin-bottom:1.5em;}
#top_category li a:hover{opacity:.8; transition:.3s;}

/* top_keyword */
#top_keyword{width:100%; margin:6em auto;}
.keyword_list{width:100%; display:flex; flex-wrap:wrap; justify-content:space-between;}
.keyword_list li{width:19%; border:1px solid #ddd; text-align: center; position: relative; margin-bottom:1em;}

/* NEWS */
#news{width:100%; margin:6em auto;}
.news_list{border-bottom:1px solid #ddd; padding:1.5em 1em;}
.news_list .tag{width:12%; min-width:80px; font-size:.8em; padding:8px; margin-bottom:1em; border-radius:30px; background:#7aafe7; color:#fff;text-align:center;}
.news_list dl{display:flex;}
.news_list dt{font-size:.9em; color:#848484; width:12%;}
.news_list dd{font-size:1em; color:#222;}

/* FAQ */
#FAQ{width:100%;/* margin:6em 0; */}
#faq01,#faq02,#faq03,#faq04,#faq05{margin-bottom:2em; margin-top:-180px; padding-top:180px;}

/* top_recruit */
#top_recruit{width:100%; margin:6em 0;}
#top_recruit .recruit_wrap{
	background:url("../images/recruit_img.png") no-repeat; 
	background-size:cover;
	min-height:400px;
	padding:2.5em 1.2em; 
	display: flex; 
    flex-direction: column; 
    justify-content: center;
    align-items: center;
    }
#top_recruit .recruit_txt{color:#fff; text-align:center; font-size:1.1em;}

/* -------------------------------
	 レビュー
------------------------------- */
/* レビュー */
.review {width:100%; margin:10px 0; text-align: justify; text-justify: inter-character; height: auto !important; border-top:1px #eee solid; padding:2em;}
.review:first-child { border-top: none;}
.review .blog_detail{display:flex; flex-wrap:wrap; align-items:center;}
.review .blog_detail figure{width:5%; margin:0 1em 0 0;}
.review .blog_detail .castname a{font-size:1.1em; font-weight:bold; color:#222;}
.review .blog_detail .review_rating{width:93%;}
.review .blog_detail .review_name{font-size:.8em;}

/* --------------------------------------------------
	 #blog
-------------------------------------------------- */
/* blog_detail */
#blog{width:90%; max-width: 800px; margin:2em auto;}

.blog_ttl{width:100%; font-size:1.2em; margin-bottom:.5em;text-align: justify;
  text-justify: inter-ideograph;}
.blog_date{text-align:right; font-size:.85em; color:#aaa;}

#blog figure{width:70%; margin:2em auto;}
.blog_txt{width:100%; margin-bottom:2em;}
.blog_txt p{margin-bottom:1.5em;}

.writer{width:70%; display:flex; flex-wrap:wrap; justify-content:space-around; align-items:center; background:#fff; padding:0 2em; margin:3em auto;}
.writer figure{width:20%; max-width:150px;}
.writer .writer_dtl{width:65%; margin-left:2em;}
.writer .writer_dtl p{font-size:1.1em; font-weight:bold;}
.writer .btn{margin:.5em 0;}


/* blog_list */
.blog_list a{
 width:100%;
 padding:2em;
 box-sizing: border-box;
 display: flex;
 position:relative;
border-bottom:1px solid #eee;
}

.blog_list a:last-child{border-bottom:none;}
.blog_list a .more{border-top:1px solid #ccc;}
.blog_list a figure{width:20%; max-width:150px; height:150px; margin:0 10px 0 0;}
.blog_list a .txt{width:100%; display:flex; flex-wrap:wrap; flex-direction: column;}
.blog_list a .txt h3{margin:0; font-size:1.1em; color:#222;}
.blog_list .blog_title{font-size:.9em; color:#e8427c;}

/* -------------------------------
	 占い師一覧　augur
------------------------------- */
.augur_inner{width:100%; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:flex-start; padding:0;}
.augur a figure{width:15%; /*max-width:150px;*/ margin:0 0 0 0;}
.augur_info{width:72%;}
.augur_info .name_wrap{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;}
.augur_info .name_wrap .sratus{display:flex; flex-wrap:wrap; align-items:center; justify-content:flex-end;}
.augur_info .price{display:flex; flex-wrap:wrap; align-items:center;}
.augur_info .price dt{font-size:.8em; margin-right:1em;}
.augur_info .price dd{font-weight:bold;}
.augur_txt{width:100%; margin-top:1em;}
.sratus_wrap{width:9%;}
.augur a .status_tag {font-weight:bold;margin-right: -.5em;font-size:1em; margin-bottom: 1em;}


.augur a .free_tag{
 position: absolute;
 min-width: 100px;
 width: 12%;
 right: 0;
 text-align: center;
 margin-bottom: 0.3rem;
 padding: 0.6rem 0.5rem;
 border:none;
 border-radius: 50px;
 color: #fff;
 font-weight:bold;
 font-size: 12px;
 background: #7aafe7;
}
.augur a .free_tag span{ display:inline-block; width: auto;font-weight: normal; margin-right: 4%;}
.augur a .free_tag b{font-size: 120%;}	
	
.free{box-sizing:border-box;display:inline; /*margin-right:5px;*/
 position: absolute;
 min-width: 100px;
 width: 12%;
 right: 0;
 text-align: center;
 margin-bottom: 0.3rem;
 padding: 0.6rem 0.5rem;
 border:none;
 border-radius: 50px;
 color: #fff;
 font-weight:bold;
 font-size: 12px;
 background: #7aafe7;
}
.free span{ display:inline-block; width: auto;font-weight: normal; margin-right: 4%;}
.free b{font-size: 120%;}		
	
/* --------------------------------------------------
	 占い師プロフィール　augur_plof
-------------------------------------------------- */

.videoBox{width:100%; position:relative; margin-bottom:2em; max-height:275px;}
.state{width:auto; position:absolute; bottom:10px; right:10px; padding:5px; box-sizing:border-box; color:#fff; border-radius:4px; background:rgba(0,0,0,0.5); font-size:.9em; text-align:center;}
.videoBox img{height:auto; max-height:275px;}

.p_box02{ position: absolute; width: 22%; top: 20%; right: 3em;}
.plof_tag{background: #8ad1f7; margin:0 8px .5em 0;padding:5px; box-sizing:border-box;text-align:center;color:#fff; border-radius: 4px; /*opacity: 0.8;*/ text-align:center;}
.plof_tag02{background: rgba(110, 195, 236,0.7); margin:0 8px .5em 0; padding:.5em; box-sizing:border-box; color:#fff; border-radius: 4px; opacity: 0.95; display: block; text-align:center; font-size:1em}

.videoBox .state{width:100%; padding: .5em; font-size:1em; bottom:-2.7em;}
.prof_dtl_wrap{width:90%; position: relative; margin: 0 auto;}
.plof_wrap .price{width:50%; margin:2em auto; font-size:1.1em;}
.plof_wrap .price dt{width:50%; background:#6ec3ec; color:#fff; text-align:center; padding:1em; font-weight:bold;}
.plof_wrap .price dd{width:50%; background:#fff; color:#222; text-align:center; padding:1em; font-weight:bold;}	

.yotei_ttl{font-size:1.1em; color:#222; display:flex; align-items:center;}
.yotei3{background:#fff; padding:1.5em; border-radius:5px; font-weight:bold; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center;}
.yotei_text{display:inline-block; width:75%;}
.yotei3 .btn_wrap{width:25%;}	
	
#recommend{width: 90%;}	s
	
/* --------------------------------------------------
	 #message
-------------------------------------------------- */
.message_list .message_cast{width:75%; border-bottom:1px solid #ddd; padding:1em; background: #fff;}

.message_cast{width:60%; display:flex; margin:auto; justify-content: space-between;}
.message_cast .message_image{width:20%; max-width:150px;}
.message_cast .message_wrap{width:75%;}
.message_cast .message_wrap .message_tag{/* width:40%; */font-size:.9em; color:#fff;padding:10px;margin:1em 0;text-align:center;}
	
.message_cast .message_wrap .btn2{display:flex; width:100%; max-width:100%; margin-left:0;}	

/* --------------------------------------------------
	 日にちを選ぶ　schedule_list
-------------------------------------------------- */
#schedule_list{width:100%;}
.center_txt{width:100%; text-align:center; margin-bottom:1em;}

/*スケジュール可否*/
.sche_color{width:100%; display:flex; justify-content:center;}
.sche_color li{margin-right:2em; display:flex; align-items:center;}
.sche_color li.available:before{content:"■"; color:#f2d5e3; margin-right:.3em; font-size:1.5em;}
.sche_color li.reserved:before{content:"■"; color:#f5d6b0; margin-right:.3em; font-size:1.5em;}
.sche_color li.impossible:before{content:"■"; color:#ddd; margin-right:.3em; font-size:1.5em;}

/*スケジュール内容*/
.schedule{width:70%; display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; margin:1em auto;}
.schedule dt{width:25%; padding:10px; text-align:center; margin-bottom:.5em; background:#6ec3ec; color:#fff;}
.schedule dd{width:75%; padding:10px; margin-bottom:.5em; background:#fff;}


/*スケジュール一覧*/
.sche_head{
 display: flex;
 align-items: center;
 justify-content: space-between;
 margin-bottom: 1em; 
 width: 100%; 
 z-index: 100;
 /*background:#fcf5f5;*/
 padding-bottom:10px;
}

.sche_head .today00{font-size:1.1em; color:#6ec3ec;}
.sche_head .preday00{
 display: block;
 background-image: linear-gradient(to top, #6ec3ec 0%, #9cd9f3 100%);
 border: none;
 border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
 color:#fff;
 padding: 5px 10px;
}
.sche_head .preday00 a{color:#fff;}
.sche_head .preday00:before{
 content: '<';
 margin: 0 5px 0 0;
 font-wheight:bold;
 color:#fff;
}

.sche_head .nextday00{
 display: block;
 background-image: linear-gradient(to top, #6ec3ec 0%, #9cd9f3 100%);
 border: none;
 border-radius: 6px;
  -webkit-box-shadow: 0 5px 10px rgba(0, 0, 0, .1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .2);
 color:#fff;
 padding: 5px 10px;
}
.sche_head .nextday00 a{color:#fff;}
.sche_head .nextday00:after{
 content: '>';
 margin: 0 0 0 5px;
 font-wheight:bold;
 color:#fff;
}

/* スケジュール表 */

.sticky_table{
	width:100%;
	border: 1px solid #ddd;
	border-collapse: collapse;
	}

.sticky_table thead th {
  /* 縦スクロール時に固定する */
  position: -webkit-sticky;
  position: sticky;
  top: 100px;
  /* tbody内のセルより手前に表示する */
  z-index: 1;
  background:#fff;
}

.sticky_table thead th {
	border: 1px solid #fff;
	background:#4a87e2;
	color:#fff;
	font-size:.9em;
	line-height:1.5;
	padding:2% 1%;
	box-sizing:border-box;
}
.sticky_table th{
	border: 1px solid #fff;
	padding:5px;
	font-size:.9em;
	background:#dfecf2;
	color:#4a87e2;
}
.sticky_table td{
	border: 1px solid #fefefe;
	background:#eee;
	padding:1.2em;
}

.sticky_table td.available{
	background:#f2d5e3;
}
	
.sticky_table td.reserved{
	background:#f5d6b0;
}	

/* ------------------------
	 ログイン/問い合わせ
------------------------ */

.msgarea{
	width:100%;
	margin:10px auto;
	box-sizing:border-box;
	border:1px solid #eee;
	background-color: rgba( 255, 255, 255, 0.8 );
	padding:3em 4em;
}

.msgarea form{width:80%; margin:auto;}


/* 時間を決める */
.sche_reserve{display:flex; flex-wrap:wrap; align-items:center;}
.sche_reserve dt{width:25%; padding:.5em; position:relative; margin-bottom:.5em; font-weight:600;} 
.sche_reserve dd{width:65%; padding:.5em; margin-bottom:.5em;}


/* --------------------------------------------------
	 順番待ち予約
-------------------------------------------------- */
.tel_cast{width:30%; padding:2em; margin:2em auto;}
.tel_cast_name{text-align:center; margin-top:.5em; font-size:1.5em;}
.wait_count{font-weight:700; font-size:1.5em; margin:.5em;}

/* --------------------------------------------------
	 beginner
-------------------------------------------------- */
#beginner{width:100%;}

.cont_wrap{width:100%; margin-bottom:5em;}
.article_intro{width:100%; display:flex; flex-wrap:wrap; justify-content:space-between;}
.article_intro figure{width:40%; margin:0 0 1em;}
.article_intro .text{width:56%; margin:0 0 1em;}

.consultation{display:flex; flex-wrap:wrap; justify-content:space-around;}
.left_border_ttl{border-left:4px solid #6ec3ec; padding-left:.5em; margin:0 0 1em 0; font-size:1.1em;}
.list_wrap{width:46%; margin-bottom:2em;}

.cont_txt{width:100%; margin-bottom:3em;}
.num_ttl{width:100%; display:flex; flex-wrap:wrap; align-items:center; font-size:1.1em; margin:0 0 1em;}
.circle_num {
 height:30px;
 width:30px;
 border-radius:50%;
 line-height:30px;
 text-align:center;
 background:#6ec3ec;
 color:#fff;
 font-weight:normal;
 margin-right:.5em;
}

.num_ttl .ttl_text{width:85%;}


/* --------------------------------------------------
	 about
-------------------------------------------------- */
.reason{width:100%; display:flex; flex-wrap:wrap; justify-content:space-between;}
.reason_dtl{width:30%; margin-bottom:2em;}
.reason_dtl .text{width:100%; margin:1em auto;text-align:center;}
.arrow{
    position: relative;
    display: inline-block;
    padding: 0 1.5em 0 0;
    color: #222;
    vertical-align: middle;
    text-decoration: none;
    font-size:.95em;
}

/* --------------------------------------------------
	 company
-------------------------------------------------- */
.company_dtl{width:100%; display:flex; flex-wrap:wrap; align-items: center;}
.company_dtl dt{width:20%; margin-bottom:1em; display:flex; flex-wrap:wrap; align-items:center;}
.company_dtl dd{width:80%; margin-bottom:1em;}



/* --------------------------------------------------
	 guide
-------------------------------------------------- */
.dot_ttl{margin:0 0 .5em; font-size:1em;}
.dot_ttl:before{content:"●"; color:#e94b82; font-size:.8em; margin-right:.5em;}
#guide .center_ttl{ font-weight: normal;}
#guide{ width: 80%; margin: 0 auto;}	
/* フロー */
.flow {
	display:flex; 
	flex-wrap:wrap;
	 justify-content:space-around;
    margin: 0 auto 50px;
    overflow:hidden;
}

.flow .box {
    margin: 0 auto 4.5em;
    width: 28%;
    position: relative;
	background: #fff;
}

.flow .box img{width:100%; height:auto; margin:auto; display:block;}
.flow .box .text{min-height:16vh;}

.flow .box:after {
    top: 50%;/* 中央寄せに使用 */
    left: 108%;
    transform:rotate(-45deg);
	position: absolute;
	right: 0;
	bottom: 0;
}

.flow .box:last-child:after {
    border: none; /* 最後のボックスだけ三角形を表示しない */
}

.step_ttl{text-align:center; font-size:1.2em; margin-bottom:.5em;}
.step_ttl span{display:block; font-size:.75em; border-radius: 50px; padding: 2% 6%; background:#f2d5e3 ; width: 50%; margin: 0 auto 4%; font-weight: normal;}

.em_txt{margin-bottom:1em; text-align:center;}

/* 支払い方法 */
.cont_wrap .payment_item:first-child{width:100%; padding: 1em 2em;}

/* 料金案内 */
.tool{width:100%; margin:4em auto;}
.tool_type{width:100%; display:flex; flex-wrap:wrap; justify-content:space-around;}
.tool_type .box {
    margin: 0 auto;
    width: 100%;
    position: relative;
}
.tool_type .box img{width:100%; margin:1.5em auto 0.5em; display:block;}
.cash_logo img{}
.tool_img img{width:20%; max-width:150px;}
.tool_type .box span{width:100%; margin:0 auto 1.5em; display:block; text-align: center;}


/* --------------------------------------------------
	 week
-------------------------------------------------- */
.horoscope{display:flex; flex-wrap:wrap; justify-content:space-between;}
.horoscope .box{width:28%; margin-bottom:2.5em;}
.horoscope .box .horo_img{width:180px; height:180px; margin:auto; display:flex; flex-wrap:wrap; align-items:center; justify-content:center;}
.horoscope .box img{width:80%;}
.horoscope .box .text{margin-bottom:1em;}


/* -------------------------
	汎用パーツ
--------------------------- */
/* メイン画像 */
.main_image{width:100%; margin-bottom:3em;}
.main_image figure{margin:0;}


/* 注意書き */
.notice{width:100%; background:#fff; padding:1.5em; margin:2em auto; border-radius:10px;}

/* 画像左+テキスト */
.f_left_box{width:100%; margin:4em auto; display:flex; flex-wrap:wrap; justify-content:space-between;}
.f_left_box figure{width: 40%; margin:0;}
.f_left_box .text{width:57%;}


/* 画像左+テキスト */
.f_right_box{width:100%; margin:4em auto; display:flex; flex-wrap:wrap; justify-content:space-between;}
.f_right_box figure{width: 40%; margin:0; order:2;}
.f_right_box .text{width:57%; order:1;}


/* 画像3列 */
.col3_img{display:flex; flex-wrap:wrap; justify-content:space-between; margin:4em auto;}
.col3_img .img_box{width:30%; margin:0 auto 1.5em;}
.col3_img .img_box figure{margin:0 0 1em;}

/* 画像２列 */
.col2_img{display:flex; flex-wrap:wrap; justify-content:space-between; margin:4em auto;}
.col2_img .img_box{width:46%; margin-bottom:1em;}
.col2_img .img_box figure{margin:0 0 1em;}

.img_box figcaption{text-align:center;}
	
}