@charset "UTF-8";

/*=================================================
Index
=================================================*/

#title img {
  width: 100%;
}

main {
  overflow-x: hidden;
}

main h1.top {
   margin-bottom: 5px;
}
#user {
  padding: 0 3%;late_payment
  background: #F8F7F4;
}

#user span {
  font-weight: bold;
}

#user .id {
  display: inline-table;
}

#user .inner {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  width: 100%;
  margin: 30px auto 20px;
}

#user .inner .prof {
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  width: 64%;
  position: relative;
  font-size: 16px;
}

#user .inner .prof_btn {
    font-size: 13px;
}

#user .inner .point {
  font-size: 13px;
  width: 100%;
  max-width: 120px;
  min-width: 120px;
}

#user .inner>div .prof_point {
    margin-left: 5px;
    position: absolute;
    right: 0;
}

#user .inner>div .prof_point span {
  font-size: 17px;
  color: #FD961D;
  margin: 0 3px;
}

#user .inner>div .prof_btn a {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  width: inherit;
  margin-left: auto;
  text-align: center;
  font-weight: bold;
  padding: 6px 0;
  line-height: 1.2em;
}

#user .inner>div .prof_btn a i {
  margin-right: 4px;
  font-size: 15px;
}

#user .inner>div .prof_point .p_limited {
    display: block;
    color: #9D9D9D;
    font-size: 11px;
    line-height: 1;
    margin-right: 10px;
    font-weight: 500;
}

#user .inner .user_p {
  float: right;
}

#user .inner .point span {
  color: #fa5e3f;
}

#user .favor {
  width: 65px;
}

#user .favor a {
  border-radius: 3px;
  color: #fff;
  font-weight: bold;
  text-align: center;
  height: 66px;
  display: table;
  width: 100%;
  font-size: 0.8em;
  line-height: 1.3em;
}

#user .favor a i {
  display: table-cell;
  vertical-align: middle;
}

#event {
    padding: 0 3%;
}
#event img{
  width: 100%;
}

#campaign li a {
    width: 243px;
    display: block;
}
#campaign li a img {
    box-shadow:0px 0px 5px #acacac;
    border-radius: 12px;
}

#campaign li span {
    width: 243px;
    display: block;
}
#campaign li span img {
    box-shadow: 0px 0px 5px #acacac;
    border-radius: 12px;
    margin-top: 5%;
}
.slick-slide {
        margin: 10px;
}
.slick-dots {
  bottom: -24px;
}

.slick-dots li {
  margin: 0;
}

.slick-dots li button:before {
  font-size: 40px;
  color: #D4D3D1;
  opacity: 1 !important;
}

.slick-dots > li:first-child:last-child {
    display: none;
}

#archive {
  margin-bottom: 20px;
}


#archive .info_none {
  padding: 20px 0;
  font-size: 1em;
  background: #F8F7F4;
  margin: 3%;
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  border-radius: 5px;

}

#archive .info_none:before {
  content: "";
  display: block;
  background: url(../img/common/icon-genre.png) no-repeat center center;
  background-size: 100%;
  width: 26px;
  height: 26px;
  margin: 0 0 0 8px;
  margin-right: 10px;
}


#archive .mail_none {
  padding: 20px 3%;
  font-size: 0.9em;
}

#archive>ul li {
  border-bottom: 1px solid #d1d1d1;
  position: relative;
}

#archive>ul li>a {
  padding: 10px 2%;
}

.thumb {
  width: 4em;
  height: 4em;
  overflow: hidden;
}

#ranking>ul li a>span {
  width: 80%;
  height: 80%;
  border-radius: 80%;
  overflow: hidden;
}

.thumb.l {
  width: 80px;
  height: 80px;
}

#archive>ul li a {
  display: flex;
  align-items: center;
  flex-wrap: inherit;
  padding: 15px 3%;
  background: #F8F7F4;
}

#archive>ul li:first-child a {
  border-top: 1px solid #d1d1d1;
}

#archive>ul li a .thumb {
  width: 60px;
  min-width: 60px;
  height: 60px;
  margin-right: 2%;
  overflow: hidden;
  border-radius: 60px;
}

#archive>ul li a .contet {
  width: 100%;
  margin-left: 5px;
  line-height: 1.5;
  right: 5px;
}

#archive>ul li a .contet p {
  line-height: 1.4;
  color: #868686;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

#archive>ul li a h2 {
  position: relative;
  display: flex;
  justify-content: space-between;
  width: 100%;
  margin-bottom: 8px;
  padding: 0;
  font-size: inherit;
  border-radius: 0;
  color: inherit;
}

#archive>ul li a h2 span {
  display: block;
  font-size: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  overflow: hidden;
  width: 70%;
}

#archive>ul li a h2 time {
  display: block;
  font-size: 13px;
  color: #868686;
  font-weight: normal;
  text-align: right;
}

#archive>ul li.new {
  position: relative;
}

#archive>ul li.new a h2 p:last-child {
  text-align: right;
  font-weight: normal;
  color: #888;
}

#archive>ul li.new a {
  color: #000;
  background: #fff;
}

#archive>ul li.new a h2 span {
  width: 50%;
}


#archive>ul li.new h2::before {
  content: "\672A\8AAD";
  position: absolute;
  top: 0;
  left: unset;
  right: 85px;
  font-weight: bold;
  border: none;
  color: #fff;
  border-radius: 20px;
  line-height: 1;
  font-size: 13px;
  padding: 2px 14px;
  background: #FD961D;
}

#banner {
  border-top: 1px solid #eff2f5;
  padding: 20px 0 10px;
  text-align: center;
}

#banner a {
  display: block;
  margin-bottom: 10px;
}

#banner h1 {
  margin-bottom: 5%;
}

#banner img {
  width: 94%;
}

#news {
  margin-bottom: 20px;
}

#topics {
  text-align: left;
  padding: 0 3%;
}

#topics a {
  position: relative;
  padding-right: 20px;
  line-height: 1.5em;
  margin-bottom: 1em;
  display: block;
}

#topics a:after {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  top: 50%;
  right: 0;
  margin-top: -5px;
  border-left: 2px solid #403D3D;
  border-top: 2px solid #403D3D;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

#topics .topics_date {
  font-size: 0.8em;
}

#topics .topics_title {
  color: #FD961D;
  text-decoration: underline;

}

.point_txt {
  padding: 10px;
  text-align: center;
  line-height: 1.6em;
  font-size: 0.9em;
}

.point_txt p {
  font-size: 0.9em;
}

#modal-content {
  display: none;
  position: fixed;
  width: 88%;
  max-width: 400px;
  top: 50%;
  left: 50% !important;
  /* margin-top: -125px; */
  z-index: 104;
  transform: translate(-50%, -50%);
}

#modal-content img {
  width: 100%;
  border-radius: 12px;
}

#modal-content.article-bnr {
  background: #fff;
  border-radius: 12px;
}

#modal-content.article-bnr img {
  border-radius: 12px 12px 0 0;
}

.article-bnr-txt {
  display: block;
  padding: min(3.6vw, 20px);
  color: #404040;
  font-size: min(3.8vw,16px);
  line-height: 1.6;
}

.article-bnr-btn {
  display: block;
  padding: 3vw;
  width: 90%;
  margin: 0 auto min(26px,4.8vw);
  font-size: min(3.8vw,16px);
  font-weight: 600;
  border-radius: 50px;
  padding: min(3.8vw, 16px) min(3.8vw, 16px);
  background: #d41819;
  color: #fff;
  text-align: center; 
}

#modal-overlay {
  z-index: 103;
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 120%;
  background-color: rgba(0, 0, 0, 0.75);
}

#modal-close {
  position: absolute;
  top: -15%;
  right: 0;
  color: #FFF;
  text-decoration: none;
  font-size: 35px;
}

#banner {
  border-top: 1px solid #eff2f5;
  padding: 20px 0 10px;
}

#banner a {
  display: block;
  margin-bottom: 10px;
}

#banner span {
  display: block;
  margin-bottom: 10px;
}

.out_b {
  background-color: #777777;
  position: relative;
  margin-bottom: 2%;
}

.out_b img {
  opacity: 0.2;
  display: block;
  width: 100% !important;
  pointer-events: none;
}

.out_b ::after {
  content: '購入者様特典';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  margin-top: -5px;
  color: #fff;
  text-align: center;
  font-weight: bold;
  font-size: 14px;
}

/* webpush */

.action-close {
    position: relative;
}
.action-close .btn {
    position: absolute;
    right: 11px;
    top: 13px;
    z-index: 200;
    width: 14px;
    height: 16px;
}

#webpush-permission {
    display: none;
  }

.webpush-inner {
    position: fixed;
    z-index: 101;
    bottom: 0;
    /* left: 0; */
    right: 0;
    text-align: left;
    width: 78%;
    max-width: 360px;
    line-height: 1.5;
    font-size: 14px;
    overflow: hidden;
    -webkit-box-shadow: 0 0 10px #bbbbbb;
    -moz-box-shadow:    0 0 10px #bbbbbb;
    box-shadow:         0 0 10px #bbbbbb;
  }

#webpush-permission .box{


    /* width: 78%; */
    background: rgba(248,247,244,0.95);
    padding: 12px 0 18px;
  }

#webpush-permission .c-icon__close {
    position: absolute;
    width: 14px;
    height: 15px;
}
#webpush-permission .c-icon__close:before {
    transform: translate(-50%, -50%) rotate(45deg);
}
#webpush-permission .c-icon__close:before, #webpush-permission .c-icon__close:after {
    position: absolute;
    top: 51%;
    left: 50%;
    width: 17px;
    height: 2px;
    background: #454545;
    content: "";
}


#webpush-permission .c-icon__close:after {
    transform: translate(-50%, -50%) rotate(-45deg);
}

#webpush-permission input {
    margin: 0;
}


.webpush-inner a.forward, .forward {
    width: 11rem;
    height: 38px;
    margin: 4px auto 8px;
    line-height: 36px;
    font-size: 12px;
}
.wp_toptext:before{
    content: "";
    background: url(../img/index/i-webppush.png) no-repeat center center;
    background-size: 100%;
    width: 18px;
    height: 20px;
    position: absolute;
    margin-left: -25px;
  }

.wp_toptext {
    margin-left: 30px;
    font-weight: 600;
    text-align: center;
    font-size: 12px;
    line-height: 20px;
    letter-spacing: 0.05rem;
}
.wp_topimg {
    text-align: center;
    padding: 12px 12px 7px;
}
#webpush-permission .c-btn__icon{
    margin: 10px auto;
}

#webpush-permission .c-btn__icon::before {
    display: none;
}


.webpush_ex {
    font-size: 12px;
    background: #fff;


    padding: 0 16px;
    margin: 0 12px;
    border-radius: 6px;
}

.webpush_ex p {
    max-width: 960px;
    margin: 0 auto;
}

.webpush_ex img {
    width: 48px;
    margin-right: 10px;
}

.webpush_ex strong {
    position: relative;
    font-size: 11px;
    padding: 6px 0;
    margin-bottom: 0;
    display: block;
    cursor: pointer;
}

.webpush_ex strong:after {
    /*content: "";
    position: absolute;
    top: 50%;
    right: 0;
    transform: translate(0,-50%) rotate(180deg);
    width: 20px;
    height: 20px;



    border-radius: 20px;
    transition-duration: 0.3s;*/
}

.webpush_ex strong:before {
    content: "詳細を見る";
    position: absolute;
    top: 49%;
    right: 0;
    font-size: 11px;
    line-height: 1.4;
    /* left: 3px; */
    /* width: 6px; */
    /* height: 6px; */
    /* transform: rotate(135deg); */
    transform: translate(0, -50%);
    padding: 2px 15px;
    border: 1px solid #4A847C;
    border-radius: 50px;
}

  .webpush_ex strong.active:before {
  /*transform: translate(0,-50%) rotate(0deg);*/
  content: "閉じる";
}

/*.webpush_ex strong:before {
  content: "";
  position: absolute;
  top: 42%;
  right: 7px;

  width: 6px;
  height: 6px;

  transform: rotate(-45deg);
}

.webpush_ex strong.active {
    margin-bottom: 10px;
}

.webpush_ex strong.active:after {
    transform: translate(0,-50%) rotate(0deg);
}

.webpush_ex strong.active:before {
    top: 29%;
    transform: rotate(135deg);

}*/

.webpush_ex span.desc {
    display: block;
    font-size: 12px;
    line-height: 1.5;
    padding: 12px 0;
}

.webpush_ex span.desc a {
    text-decoration: underline;
}

.wp_bottomtext {

    padding: 0 12px;
    font-size: 11px;
    text-align: left;
    margin-bottom: 15px;
    line-height: 1.2rem;
}



/*=================================================
*Teller_mailbox
*system-115
=================================================*/

#teller_cap {
  padding-top: 3%;
  padding-bottom: 3%;
}

#archive2 {

}

#archive2 .sender3 {
  font-weight: bold;
}

#archive2 .thumb {
  width: 0px;
  height: 0px;
  overflow: hidden;
}

#archive2 .thumb.l {
  width: 0px;
  height: 0px;
}

#archive2 h2{
  padding: 0;
}


#archive2>ul li {
  border-bottom: 1px solid #d1d1d1;
}

#archive2>ul li>a {
  padding: 10px 2vw;
}

#archive2>ul li a .contet {
  width: calc(100% - 75px);
  margin-left: 5px;
  font-size: 0.75em;
  line-height: 1.4em;
}

#archive2>ul li a h2 {
  display: table;
  width: 100%;
  margin-bottom: 5px;
}

#archive2>ul li a h2 p {
  display: table-cell;
}

#archive2>ul li a h2 p:first-child {
  width: 72%;
}

#archive2>ul li a h2 p:last-child {
  text-align: right;
  font-weight: normal;
  width: 28%;
  color: #555;
}

#archive2>ul li.new {
  position: relative;
}

#archive2>ul li a {
  color: #555;
  padding-left: 2%;
}

#archive2>ul li.new a h2 p:last-child {
  text-align: right;
  font-weight: normal;
  width: 28%;
  color: #888;
}

#archive2>ul li.new a {
  color: #000;
  background: #fff;
}

#archive2>ul li.new::before {
  content: "\672A\8AAD";
  position: absolute;
  top: 50%;
  left: 7px;
  font-size: .7rem;
  border: 1px solid #fa5e3f;
  color: #fa5e3f;
  line-height: 1;
  padding: 3px;
  margin-top: -8px;
}

#archive2 .date {
  font-weight: normal;
  display: inherit;
  font-size: 0.8em;
}

#archive2 .sender2 {
  position: relative;
  margin-bottom: 5px;
  border-bottom: #d3d3d3 1px dotted;
}


#teller_mailbox ul.mailbox_contents {
  border-top: none;
  margin-top: 0;
}


#teller_mailbox span.sender, #teller_mailbox span.receiver {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin: 0px 5px 5px 0px;
  width: 55px;
  color: #ffffff;
  text-align: center;
  display: inline-block;
  font-size: 13px;
}

#archive2 .receiver .fsz12 {
  margin: 0px 5px 5px 0px;
  width: 55px;
  color: #ffffff;
  line-height: 1.8rem;
  text-align: center;
  display: inline-block;
  background: #bfbfbf;
  font-size: 15px;
}

.more {
  margin: 30px auto 30px;
  width: 30%;
  min-width: 150px;
}

.more a {
  text-align: center;
  font-weight: bold;
  padding: 12px 0 11px;
  color: #fff;
  border-radius: 3px;
  margin: 0;
  line-height: 1em;
  display: block;
}

.more.load a {
  opacity: 1;
}

.more.load {
  background: url("img/ajax-loader.gif") no-repeat center center;
  background-size: auto 24px;
}

#ranking {
  margin-bottom: 0;
}

#ranking ul {
  display: flex;
  flex-wrap: wrap;
  padding: 10px 3%;
}

#ranking li {
  width: 33.3%;
}

#ranking li a {
  text-align: center;
  font-weight: bold;
  padding: 5px 0;
  font-size: 0.7em;
}

#ranking li a p {
  height: 17px;
  line-height: 18px;
  text-align: center;
  font-size: 1.2em;
}

#ranking li a p .icon-crown {
  font-size: 1.2em;
}

#ranking li:first-child a p {
  color: #907406;
}

#ranking li a span {
  font-size: 1.6em;
  margin: 0 2px;

}

#ranking li:nth-child(2) a p {
  color: #7c7c7c;
}

#ranking li:nth-child(3) a p {
  color: #a45f0e;
}

#ranking li:last-child a p {
  color: #a45f0e;
}

#ranking li a>span {
  margin: 12px auto 12px;
  display: block;
}

#ranking li a>.s_name {
  font-size: 15px;
  line-height: 1.3em;
}

#s_btn {
  font-size: 1em;
  padding-bottom: 5px;
}

#s_btn a.sodan_btn {
  width: 92%;
  border: 1px solid #5b8c21;
  color: #5b8c21;
  border-radius: 3px;
  margin: 0 auto;
  background: #fff;
}

.typeGenre {
  margin-bottom: 10px;
}

.typeGenre ul {
  display: flex;
  gap: 3%;
  padding: 0 3%;
}

.typeGenre ul li {
  width: calc(50% - 1.5%);
  min-height: 46px;
  margin-bottom: 4%;
  font-size: 16px;
}

.typeGenre ul li.large {
  width: 100%;
}

.typeGenre ul li a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-wrap: inherit;
  height: 100%;
  padding: 4% 12px;
  background: #fff;
  box-shadow: 0 0 5px 2px rgb(0 0 0 / 8%);
  border-radius: 8px;
  sfont-size: 16px;
}

.typeGenre ul li a i {
    margin-right: 8px;
    font-size: 20px;
    display: flex;
    justify-content: center;
    align-items: center;
}

#type.typeGenre .type1 a i {
  color: #f67285;
}

#type.typeGenre .type2 a i {
  color: #f67285;
}

#type.typeGenre .type3 a i {
  color: #fe9d83;
}

#type.typeGenre .type2 a i {
  color: #f67285;
}

#type.typeGenre .type4 a i {
  color: #f290b7;
}

#genre.typeGenre li a i {
  color: #b18bc4;
}

#genre.typeGenre li a i {
  color: #7f83cc;
}

#genre.typeGenre .genre3 a i {
  color: #b7a7de;
}

#genre.typeGenre .genre4 a i {
  color: #829cd6;
}

#genre.typeGenre .genre5 a i {
  color: #77c6cf;
}

.typeGenre ul li a p {
  font-weight: bold;
}

.typeGenre ul li a span {
  margin-left: 14px;
  font-size: 0.9em;
  font-weight: normal;
  vertical-align: middle;
  color: #9D9D9D;
}

#free ul {
  display: flex;
  gap: 4%;
  padding: 0 3%;
}

#free ul li {
  width: calc(33.333% - 3%);
  min-height: 46px;
  margin-bottom: 6%;
  font-size: 15px;
}

#free ul li a {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  flex-direction: column;
  flex-wrap: inherit;
  height: 100%;
  padding: 15% 12px;
  background: #fff;
  box-shadow: 0 0 3px 3px rgba(0, 0, 0, 5%);
  border-radius: 8px;
}

#free ul li a p {
  font-weight: bold;
}

#vip {
  margin-bottom: 20px;
}

#vip .wrap {
  padding: 0 3%;
}

#vip .wrap a {
  margin-bottom: 2%;
}

#vip .wrap a img {
  width: 100%;
}

#other {
  margin-bottom: 30px;
}

#other .wrap {
  padding: 0 3%;
}

#other .wrap a {
  margin-bottom: 2%;
  display: block;
}

#other .wrap a img {
  width: 100%;
}

#career {
  margin-bottom: 5%;
}

#career .wrap {
  padding: 0 3%;
}

#career .wrap a {
  position: relative;
  display: block;
  width: 100%;
  margin-bottom: 2%;
  line-height: 51px;
  border: 1px solid #C9C6C0;
  border-radius: 4px;
  padding-left: 40px;
  font-size: 15px;
}

#career .wrap a:before {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  top: 50%;
  left: 14px;
  margin-top: -5px;
  border-left: 2px solid #C9C6C0;
  border-top: 2px solid #C9C6C0;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

#career .wrap li:last-child a {
  margin-bottom: 0;
}

#privacy {
    text-align: center;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    border: solid 1px #074098;
    padding: 5px 12px;
    margin: 5% auto 10%;
    max-width: 290px;

}

#privacy .p_img img {
  width: 200px;

}
#privacy .p_text{
    line-height: 15px;
    font-size: 11px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    color: #074098;
    padding-left: 5px;
}

/*=================================================
Archive
=================================================*/

#archive .info {
  background: #f5f5f5;
}

#archive .info>div:last-child {
  width: calc(100% - 80px);
  padding-left: 10px;
  font-size: .9rem;
  line-height: 1.2rem;
}

.pagenation {
  text-align: center;
  font-weight: bold;
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  font-size: 14px;
  margin: 10px 0 30px;
}

.pagenation li {
  height: 38px;
  line-height: 38px;
  width: 38px;
  margin-left: 15px;
  border-radius: 38px;
  color: #fff;
}

.pagenation li:first-child {
  margin-left: 0;
}

.pagenation li a {
  border-radius: 38px;
  background: #F8F7F4;
  display: block;
}

#archive.save>ul {
  padding: 0;
}

#archive.save .delete {
  font-size: 24px;
  color: #c1c1c1;
  width: 42px;
  text-align: right;
  padding: 8px 0;
}


/*=================================================
Single
=================================================*/

#single {
}

#single .info {
  padding: 5%;
  border-bottom: 1px #C9C6C0 solid;
}

#single h1.cap {
    font-weight: bold;
    padding-left: 5%;
    padding-top: 5%;
    line-height: 1;
    padding-bottom: 0;
    font-size: 1.2em;
}

#single .info .from p:first-child span {
  font-weight: bold;
}

#single .info .from p:last-child {
    width: 180px;
    position: absolute;
    right: 0;
    height: 45px;
}

#single .info .from p:last-child a {
  color: #fff;
  font-weight: bold;
  background: #fa5e3f;
  border-radius: 3px;
  text-align: center;
  padding: 5%;
  position: absolute;
  right: 0;
  width: 70%;
  font-size: 15px;
}

#single .info .from p:last-child a i {
  margin-right: 5px;
  padding: 5px 0;
}

#single .info .date {
  margin-top: 2%;
}

#single .info .date div:first-child {
  line-height: 1;
  width: calc(100% - 232px);
}

#single .info .date div:last-child {
  width: 232px;
  font-size: .9em;
  color: #868686;
}

#single .info .date .fontSize {
  padding: 0;
}

#single .content {
  padding: 5%;
}

#single .content .title {
  font-weight: bold;
  position: relative;
  line-height: 1.5em;
  font-size: 1.2em;
  margin-bottom: 5%;
}

#single .content .title p.save {
  color: #c1c1c1;
  font-size: 26px;
  padding: 10px;
  position: absolute;
  right: 5px;
  top: -2px;
}

#single .content .title p.save.on {
  color: #fa5e3f;
}

#single .content>p {

}

#single .photo {
  padding: 10px 2vw;
}

#single .photo a {
  border-radius: 3px;
  padding: 12px 0;
  position: relative;
  line-height: 1;
  font-weight: bold;
  text-align: center;
}

#single .photo a i {
  position: absolute;
  top: 50%;
  left: 3vw;
  margin-top: -.8rem;
}

#single .form {
  padding: 0 2vw 10px 2vw;
}

#single .form textarea {
  background: #f5f5f5;
  border: 1px solid #d7d7d7;
  padding: 10px;
  height: 185px;
}

#single .form input[type="submit"] {
  color: #fff;
  background: #fa5e3f;
  border: 0;
  padding: 10px 0;
  text-align: center;
  width: 70%;
  margin: 10px auto;
}

#single .detail {
  text-align: center;
  margin-bottom: 2em;
}

#single .detail>p {
  font-weight: bold;
  border-bottom: 1px solid #fff;
}

#single .detail ul {
  padding: 0 2vw;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

#single .detail li {
  width: calc((100% - 20px) / 3);
  margin-left: 10px;
}

#single .detail li:first-child {
  margin-left: 0;
}

#single .detail li a {
  background: #F8F7F4;
  padding: 16px 0;
  line-height: 1;
  border-radius: 5px;
  box-shadow: 0 2px 4px 2px rgb(159 159 159 / 12%);
  display: block;
}

#single .detail li a i {
  font-size: 26px;
}

#single .detail li a span {
  display: block;
  margin-top: 10px;
  font-weight: bold;
  font-size: 12px;
}

#reply p {
  line-height: 1.5em;
  padding: 5px;
}
#single .from {
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    position: relative;
}
#single .from p:first-child {
  width: 60%
}

.single_p .description {
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    margin-top: 5% !important;
    padding-top: 5% !important;
    padding-bottom: 5% !important;
    border-top: 2px solid #eae8e3;
    border-bottom: none !important;
}
/*=================================================
未送信メール・後払い告知表示
=================================================*/

.info_area {
  position: relative;
  margin: 4% 3%;
}

.info_area a.btn_base {
  line-height: 40px;
}

.headBox {
  background: #F5AB55;
  color: #fff;
  cursor: pointer;
  text-align: center;
  padding: 10px;
  position: relative;
  font-weight: bold;
  border-radius: 4px;
}

.headBoxFree {
  background: #F5AB55;
  color: #fff;
  cursor: pointer;
  text-align: center;
  padding: 10px;
  position: relative;
  font-weight: bold;
  border-radius: 4px;
}

.headBox2 {
  background: #F5AB55;
  color: #fff;
  cursor: pointer;
  text-align: center;
  padding: 10px;
  position: relative;
  font-weight: bold;
  border-radius: 4px;
}

.headBox3 {
  background: #F5AB55;
  color: #fff;
  cursor: pointer;
  text-align: center;
  padding: 10px;
  position: relative;
  font-weight: bold;
  border-radius: 4px;
}

.headBox4 {
  background: #F5AB55;
  color: #fff;
  cursor: pointer;
  text-align: center;
  padding: 10px;
  position: relative;
  font-weight: bold;
  border-radius: 4px;
}


.excl {
  position: absolute;
  top: 0.25em;
  z-index: 1;
  left: 1em;
}

.excl2 {
  position: absolute;
  top: 17px;
  z-index: 1;
  left: 16px;
  margin-top: -10px;
}

.excl3 {
  position: absolute;
  top: 0.25em;
  z-index: 1;
  left: 1em;
}

.excl4 {
  position: absolute;
  top: 0.25em;
  z-index: 1;
  left: 1em;
}

.txtBox {
  margin: 0;
  line-height: 1.8em;
}

.txtBox p {

}

.info_txt {
  border: solid 2px #F5AB55;
  padding: 3%;
  line-height: 1.5;
  border-top: 0px;
  border-radius: 0 0 4px 4px;
}

.headBox.active {
  border-radius: 4px 4px 0 0;
}

.headBox::before {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  top: 50%;
  right: 16px;
  margin-top: -8px;
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
  transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
}

.headBox.active::before {
  margin-top: -3px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.headBoxFree::before {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  top: 50%;
  right: 16px;
  margin-top: -8px;
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
  transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
}

.headBoxFree.active::before {
  margin-top: -3px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.headBox2.active {
  border-radius: 4px 4px 0 0;
}

.headBox2::before {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  top: 50%;
  right: 16px;
  margin-top: -8px;
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
  transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
}

.headBox2.active::before {
  margin-top: -3px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.headBox3.active {
  border-radius: 4px 4px 0 0;
}

.headBox3::before {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  top: 50%;
  right: 16px;
  margin-top: -8px;
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
  transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
}

.headBox3.active::before {
  margin-top: -3px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.headBox4.active {
  border-radius: 4px 4px 0 0;
}

.headBox4::before {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  top: 50%;
  right: 16px;
  margin-top: -8px;
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
  transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
}

.headBox4.active::before {
  margin-top: -3px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

.headBox5 {
    background: #F5AB55;
    color: #fff;
    cursor: pointer;
    text-align: center;
    padding: 10px;
    position: relative;
    font-weight: bold;
    border-radius: 4px;
}
.headBox5.active {
  border-radius: 4px 4px 0 0;
}

.headBox5::before {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  top: 50%;
  right: 16px;
  margin-top: -8px;
  border-left: 2px solid #fff;
  border-top: 2px solid #fff;
  transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
}

.headBox5.active::before {
  margin-top: -3px;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}


.headBox5_point{
    color: #FF5233;
    font-weight: bold;
    text-align: center;
    background: #F8F7F4;
    padding: 10px;
    margin: 10px auto;
}
/*=================================================
Payment_Top My Point
system-401
=================================================*/

#mypoint {
  -moz-border-radius: 7px;
  -webkit-border-radius: 7px;
  border-radius: 7px;
  padding: 0 0.5em 0.5em;
  font-size: 1.1em;
}

#mypoint h2 {
  padding-top: 15px;
}

#mypoint .str_clr{
    font-size: 1.5em;
    margin: 0 5px;
}

#mypoint .icon-point {
    margin-right: 8px;
    font-size: 1.1em;
}
#mypoint a.general3, .general3{
  margin: 0 3px;
  line-height: 1em;
}

#mypoint p.mypoint_area {
  padding-bottom: 15px;
  padding-top: 0;
}
p.mypoint_area {
  padding-top: 15px;
  text-align: center;
  letter-spacing: 0.03em;
}

#mypoint_area i {
  margin-right: 5px;
}
#mypoint a.forward_siteclr, .forward_siteclr{

}

#mypoint a.forward_siteclr, .forward_siteclr {
    background: #FD961D;
    border: 1px solid #FD961D;
}

#mypoint2 p.mypoint_area {
    font-size: 1.3em;
    padding-top: 0;
}
#mypoint2 p.mypoint_area .str_clr {
    font-weight: bold;
    font-size: 1.3em;
    margin: 0 5px;
}
#mypoint2 a.forward_siteclr, .forward_siteclr {
    background: #FD961D;
    border: none;
}
#mypoint2 .icon-point:before{
    margin-right: 0.5em;
    font-size: 1.3em;
}

.settle_list {
  display: flex;
  flex-wrap: wrap;
  gap: 3%;
}

.settle_list li {
  width: calc(33.333% - 2%);
  margin-bottom: 3%;
}

.settle_list li.large {
  width: 100%;
}

.settle_list li.harf {
  width: calc(50% - 1.5%);
}

.settle_attention {
  margin-top: 8px;
  font-size: .9em !important;
  margin-top: 5%;
  line-height: 1.5em;
}
.settle_list h4{
    font-size: 12px;
    text-align: center;
    height: 1.2em;
    line-height: 1.2em;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;   
    -ms-justify-content    : center;
    justify-content: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    align-items: center;
}

/*未成年注意喚起*/

.layer_board_bg,
.layer_board {
  position: absolute;
}

.layer_board_bg {
  position: fixed;
  width: 100%;
  height: 100%;
  z-index: 1000;  
  top: 0;
  left: 0;
  display: none;
  cursor: pointer;
  background: #000;
}

.layer_board {
    display: none;
    position: fixed;
    left: 0;
    top: 10%;
    right: 0;
    margin: 0 auto;
    width: 90%;
    z-index: 2000;
    margin: 0 auto;
    text-align: center;
    background: #fff;
    border-radius: 10px;
    padding: 5%;
}


.layer_board h3 {
    text-align: center;
    position: relative;
    margin: 5%;
    font-size: 18px;
}

.layer_board h3 span {
    background: linear-gradient(transparent 60%, #F8F5AC 60%);
}

.miseinen_txt {
    margin-bottom: 5%;
}

.layer_board a.action, .action{
    height: 40px;
    line-height: 40px;
}

@media (orientation: landscape){
.layer_board {
    position: absolute;
}
}

/*=================================================
Payment Bank Transfer
system-421
=================================================*/

h2.hurry_up{
  padding-left: 40px;
  font-size: 15px;
}
h2.hurry_up .icon-attention {
    position: absolute;
    left: 10px;
    top: 13px;
}

h2.hurry_up::after {

}

a.hurry_up {

}


/*=================================================
Payment Photo&Fax Bank Transfer
description-02
=================================================*/

div.bank_sample {
  margin-bottom: 15px;
}

div.bank_sample figure {
  float: left;
  width: 60%;
}

div.bank_sample figure img {
  width: 100%;
}

div.bank_sample div.check_list {
  float: right;
  width: 38%;
  margin-top: 10%;
  font-size: 10px;
}

div.bank_sample div.check_list p {
  font-size: 1.6em;
  margin-bottom: 5px;
  font-weight: bold;
  color: #FF5233;
  padding: 5px 0px 5px 5px;
}

table.tow_block td {
  background: #ffffff;
  border: none;
  padding: 5%;
  line-height: 1.5em;
}

table.tow_block td.fax_numer {
  font-weight: bold;
  text-align: center;
  padding: 0 2% 5%;
}

table.bank_account tr td:first-child {
  width: 50%;
}

div.bank_wrap {
  background: #ffffff;
  padding: 18px 2% 2%;
  border-radius: 3px;
  margin-bottom: 15px;
}

p.bank_txt {
  margin-top: 5%;
}

table.bank_account {
  border: 1;
  padding: 0;
  margin-bottom: 0px;
  border-collapse: collapse;
}

table.bank_account2 {
  border: 1;
  padding: 0;
  margin-bottom: 10px;
  border-collapse: collapse;
}


/*=================================================
Payment Late Payment
system-411
=================================================*/

.late_payment {
    padding: 20px 0 0;
    background: #F8F7F4;
}
.late_payment h2.cap {
    font-weight: bold;
    letter-spacing: 0.03rem;
    position: relative;
    font-size: 23px;
    text-align: center;
    display: block;
    margin: 0 auto;
    padding: 12px 3%;
}
.late_payment h2.cap::after {
    content: "";
    display: block;
    position: absolute;
    left: 12px;
    top: 52px;
    width: 45px;
    height: 2px;
    left: 0;
    margin: 0 auto;
    right: 0;
}
.late_payment h4{
    margin-top: 10%;
}

section.late_payment {
  margin-bottom: 0;
}

section.late_payment ol {
    padding: 8%;
}

section.late_payment ol span{
    font-weight: bold;
    font-size: 18px;
    display: block;
    margin-bottom: 10px;
}

section.late_payment li {
    font-size: 18px;
    font-weight: bold;
    text-align: center;
}
section.late_payment li .arrow_area {
    margin: 8% auto;
}
@media only screen and (max-width: 320px) {
  section.late_payment div.annot_area li {
    width: 32%;
  }
}

section.late_payment div.annot_area li:last-child {
  margin-right: 0px;
}


/*--  late_payment_list  --*/

table.late_payment_list {
  width: 100%;
  border: 2px solid #fff;
  border-collapse: collapse;

}

table.late_payment_list tr {
  background: #f5f4f2;
}

table.late_payment_list th {
  padding: 1em;
  color: #ffffff;
  text-align: center;
  font-size: 15px;
}

table.late_payment_list th.ttl_left {
  border-right: 2px solid #fff;
  line-height: 1em;
}

table.late_payment_list td {
  padding: 1em;
  line-height: 125%;
  letter-spacing: -0.01em;
  text-align: center;
  border: 2px solid #fff;
  font-size: 15px;
}

table.late_payment_list tr:nth-child(odd) td {
  background: #F8F7F4;
}

table.late_payment_list tr:nth-child(even) td {
  background: #F8F7F4;
}

table.late_payment_list td.point_left {
  width: 50%;
}


/*=================================================
Payment Late Payment
system-151
=================================================*/

.late_payment_btn_area .btn_short {
  float: left;
  margin: 15px 5% 15px 0;
  -moz-border-radius: 0.5em;
  -webkit-border-radius: 0.5em;
  border-radius: 0.5em;
  height: 51px;
  line-height: 52px;
}

.late_payment_btn_area .btn_short {}

.late_payment_btn_area .btn_half {
  float: right;
  width: 50%;
}


/*=================================================
Payment  VISA Master JCB Amex
description-08
=================================================*/

section#credit_visamaster a.icon_btn::before {
  background: url(../../members/sm/official_img/pay_visamaster.png) no-repeat;
  -moz-background-size: 100%;
  -webkit-background-size: 100%;
  background-size: 100%;
}

section#credit_jcb a.icon_btn::before {
  background: url(../../members/sm/official_img/pay_jcb.png) no-repeat;
  -moz-background-size: 100%;
  -webkit-background-size: 100%;
  background-size: 100%;
}

section#credit_amex a.icon_btn::before {
  background: url(../../members/sm/official_img/pay_amex.png) no-repeat;
  -moz-background-size: 100%;
  -webkit-background-size: 100%;
  background-size: 100%;
}



/*=================================================
Payment Convenience All
system-451 system-501
system-681 system-761
=================================================*/

div#buy {
  margin-top: -60px;
  padding-top: 60px;
}


/*=================================================
Payment  Convenience
description-03
description-05
=================================================*/

a.btn_other_cvs span {
  margin: 0 auto;
  text-align: center;
  display: block;
  font-size: 0.9em;
}

.accent_ribbon {
  width: 50px;
  position: absolute;
  left: 0;
  top: 0;
}


/*=================================================
Payment  Convenience_Prepaid
description-04
=================================================*/

section#smartpit a.icon_btn::before {
  background: url(../../members/sm/official_img/pay_smartpit.png) no-repeat;
  -moz-background-size: 100%;
  -webkit-background-size: 100%;
  background-size: 100%;
}

section#aiw_conveni a.icon_btn::before {
  background: url(../../members/sm/official_img/pay_aiw.png) no-repeat;
  -moz-background-size: 100%;
  -webkit-background-size: 100%;
  background-size: 100%;
}

section#prepaid a.icon_btn::before {
  background: url(../../members/sm/official_img/pay_prepaid.png) no-repeat;
  -moz-background-size: 100%;
  -webkit-background-size: 100%;
  background-size: 100%;
}


/*=================================================
Payment  Convenience Prepaid card
description-05
=================================================*/

section#securitymoney a.icon_btn::before {
  background: url(../../members/sm/official_img/pay_securitymoney.png) no-repeat;
  -moz-background-size: 100%;
  -webkit-background-size: 100%;
  background-size: 100%;
}

section#bitcash a.icon_btn::before {
  background: url(../../members/sm/official_img/pay_bitcash.png) no-repeat;
  -moz-background-size: 100%;
  -webkit-background-size: 100%;
  background-size: 100%;
}


/*=================================================
Payment Webmoney
system-681
=================================================*/

article#payment_header #container_inner{
  padding-bottom: 0;
}


/*=================================================
Payment Content ConvenienceStore
system-451
system-501
=================================================*/

ul#conveni {
  text-align: center;
}

ul#conveni, ul#conveni li {
    margin-top: 5px;
}

ul#conveni li {
  display: inline-block;
  width: 32%;
}


/*=================================================
Payment Bitcash Flow
description-200 description-210
description-221 description-237
description-248 description-243
=================================================*/

#selection1, #selection2 {
  margin-top: -45px;
  padding-top: 45px;
}

ol.flow_list .selection_bar {
    background: #fff;
    font-size: 1em;
    font-size: 1.1em;
}

a.next_btn {
  margin-top: 15px;
}

.bitcash_input {
    font-size: 15px;
    border: none;
    display: block;
    margin-top: 5px;
    background: #F5F5F5;
    padding: 5%;
    border-radius: 0px;

}
.bitcash_input {
    font-size: 15px;
    border: none;
    display: block;
    margin-top: 5px;
    background: #F5F5F5;
    padding: 15px;
    border-radius: 0px;
    margin-bottom: 15px;

}

/*=================================================
Payment Content Confirmation(1)
system-441
system-571
system-741
=================================================*/

section#select_wrap {
  margin-bottom: 15px;
}

section#select_wrap input {
  margin-bottom: 0px;
}


/*=================================================
Payment Content Confirmation(2)
system-572 system-592
system-712 system-742
system-762
=================================================*/

#content_conf2 {
    background: #F8F7F4;
    padding: 5%;
    margin-bottom: 5%;
}
#content_conf2 b {
    margin-bottom: 10px;
    display: block;
}
#content_conf2 p{
    font-size: .9em;
}
section#content_conf table.conf th.ttl_left {
  line-height: 1em;
  border-bottom: 2px solid #fff;
  width: 42%;
  vertical-align: middle;
  font-size: 15px;
}

section#content_conf table.conf td {
  text-align: right;
  background: #F8F7F4;
  font-size: 15px;
}

section#content_conf ol li {
  list-style-type: none;
  font-size: 1.4em;
  padding-left: 1.4rem;
  text-indent: -1.3rem;
  line-height: 145%;
}

/*=================================================
Howto  Beginner Guide
system-121
=================================================*/



.guid_point {
  margin: 5% 0;
}

.guid_point li{
  margin-bottom: 10px;
}

article#guide_header {

}


article#guide_header h1 {
  text-align: center;
  margin-bottom: 15px;
}

#step_flow {
  -moz-border-radius: 0.3em;
  -webkit-border-radius: 0.3em;
  border-radius: 0.3em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  margin-bottom: 5%;
  height: auto !important;
  min-height: 560px;
  background: #F8F7F4;
  padding: 5%;
  border-radius: 5px;
}

@media screen and (max-width: 320px) {
  #step_flow {
    min-height: 520px;
  }
}

#step_flow h1.cap {
  font-weight: bold;
  letter-spacing: 0.03rem;
  position: relative;
  font-size: 23px;
  text-align: center;
  display: block;
  margin: 0 auto;
}




#step_flow h1.cap::after {
  content: "";
  display: block;
  position: absolute;
  left: 12px;
  top: 52px;
  width: 45px;
  height: 2px;
  left: 0;
  margin: 0 auto;
  right: 0;
}

#step_flow h1::after {

}

#review {
  margin: 0 auto;
  width: 100%;
  text-align: center;
}
#review .action{
  padding: 20px;
  margin-top: 15px;
}

#step_flow div.flow_top {
  background: #ffffff;
  -moz-border-radius: 0.3em;
  -webkit-border-radius: 0.3em;
  border-radius: 0.3em;
  padding-top: 5%;
}

#step_flow div.flow_top article.flow_wrap {
  position: relative;
  margin: 2%;
  padding: 5% 12px 0 12px;
}

#step_flow div.flow_top article.flow_wrap h2{
    display: block;
    padding: 0 0 5%;
    text-align: center;
}

#step_flow div.flow_top p.description {
    width: 100%;
    margin: 0 auto;
    padding: 15px 0px;
    line-height: 145%;
    text-align: left;

}

.flex-control-nav {
  bottom: 4.5%;
}

.flex-direction-nav .flex-prev {

}

.flex-direction-nav .flex-next {

}

.flex-control-paging li a {

}

.flex-control-paging li a.flex-active {
  background: #8d8c8c !important;
}

.acordion {
  margin-bottom: 5px;
}

.trigger {

}

.trigger.active {

}
#guide_anchor .acordion {
    margin-top: 0;
    margin-bottom: 10px;
}

/*=================================================
Price List
system-402,411
=================================================*/

section#charge_list {
    margin: 5% 0;
}


/*=================================================
Support  Contact Form(1)
system-201
=================================================*/

#contact_mail hr {
  display: none;
}

#contact_mail h1.cap {
  font-weight: bold;
  position: relative;
  padding: 0;
  font-size: 20px;
}

#contact_mail .aside{
    position: absolute;
    right: 0;
    font-size: 12px;
    font-weight: initial;
}

#contact_mail .note {
    margin-top: 10px;
}

#contact_mail .forward {
  text-align: center !important;
  padding: 0 !important;
  border: none !important;

}
#contact_mail .btn_base {
    text-align: left;
    display: block;
    margin: 5% 0 0;
    padding-left: 40px;
    position: relative;
    display: block;
    width: 100%;
    border: 1px solid #C9C6C0;
    border-radius: 4px;
}

#contact_mail h2.cap {
  padding: 15px 5px 15px 35px;
}

#contact_mail #career {
  margin-top: 5%;
}
#contact_mail #career .wrap {
  padding: 0;
}

#contact_mail #career{
    margin-bottom: 0;s
}
#contact_tel {

}
#contact_tel h2 {
  padding: 15px 5px 15px 45px;
}

#contact_tel h1.cap {
    font-weight: bold;
    position: relative;
    padding: 0;
    font-size: 20px;
}

#contact_tel .aside {
    font-size: 12px;
    font-weight: initial;
    display: block;
    line-height: 1.5em;
    margin-left: 5px;
}
#contact_mail h2.cap::after {
  top: 5px;
}

#contact_tel h2.cap::after {
  top: 4px;
}

#contact_mail h2::after {
  background: url(../../members/sm/img/form_caption.png) no-repeat;
}

#contact_tel h2::after {
  background: url(../../members/sm/img/tel_caption.png) no-repeat;
}



section.contact h2 span {
  display: block;
  font-size: 1.0em;
  font-weight: normal;
  margin-top: 10px;
  line-height: 1.3;
}

section.contact h2 span.aside {
  display: inline;
  font-size: 1.0em;
  color: #ffffff;
}

section.contact div.cta_txt {
    padding: 10px 0;
}

section.contact div.tel_area {

}

@media screen and (max-width: 320px) {
  #contact_tel h2.annot1 span:before {
    content: "\A";
    white-space: pre;
  }
}


/*=================================================
Support  Mail box
system-140
system-141
=================================================*/

#support_mailbox {

}
#support_mailbox .btn_base {
    text-align: left;
    display: block;
    margin: 5% 0 0;
    padding-left: 40px;
    position: relative;
    display: block;
    width: 100%;
    border: 1px solid #C9C6C0;
    border-radius: 4px;
}

#support_mailbox ul.mailbox_contents li a{
    padding: 15px;
}


#support_mailbox .sender span{
  font-size: 13px;
  font-weight: initial;
}

#support_mailbox .receiver span{
  font-size: 13px;
  font-weight: initial;
}

#support_mailbox h1.cap {
    font-size: 1.3em;
    font-weight: bold;
    padding-left: 5%;
    padding-top: 5%;
    line-height: 1.4em;
    padding-bottom: 0;
}

#support_mailbox h1.cap .icon-history{
  margin-left: 5px;
}
#support_mailbox h1.cap::after {
  content: "";
  display: block;
  position: absolute;
  left: 18px;
  top: 11px;
  width: 40px;
  height: 40px;
  background-size: 66% !important;
}

#support_mailbox h1::after {

}

#support_mailbox li a p.sender {
  width: 60%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -moz-text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;

}


ul.mailbox_contents {
    border-top: 1px solid #F0EFEC;
    margin-top: 5%;
}

ul.mailbox_contents li a {
  display: block;
  padding: 15px;
  min-height: 75px;
  height: auto !important;
}

ul.mailbox_contents li a p, article.mail_body div#mail_caption p.subject {
  font-weight: bold;
  text-align: left;
}


ul.mailbox_contents li a .support_text {
  font-weight: normal;
}

ul.mailbox_contents li a .support_text::after {
  content: '…';
}


article.mail_body div#mail_caption p.subject {

}

ul.mailbox_contents li a span.sender, ul.mailbox_contents li a span.receiver {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin: 0px 10px 0 0px;
  width: 61px;
  text-align: center;
  display: inline-block;
  color: #ffffff;
}

ul.mailbox_contents li a span{

}

ul.mailbox_contents li a span.sender {

}

ul.mailbox_contents li a span.receiver {
}

ul.mailbox_contents li a time {

}

.mailbox_navi::after {

}

ol.generalclr {
  border-bottom: 0px;
}

ol.pager_list {
  border-top: 1px solid #ffffff;
  padding: 0px 0px;
  text-align: center;
}

ol.pager_list li.pager_btn {
  list-style-type: none;
  display: inline-block;
  font-size: 1.2em;
  margin: 10px 5px;
}

ol.pager_list li.pager_btn>a>p {
  display: inline-block;
  padding: 5px 12px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
}

ol.pager_list li.pager_btn>p {
  display: inline-block;
  padding: 4px 10px;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  font-weight: bold;
}

#support_mailbox article.mail_body {
    border-top: 1px solid #F0EFEC;
    margin-top: 5%;
}

article.mail_body div#mail_caption {
  min-height: 65px;
  height: auto !important;
  height: 65px;

}

article.mail_body div#mail_caption span {
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  margin: 0px 5px 5px 0px;
  width: 61px;
  text-align: center;
  display: inline-block;
  color: #ffffff;
}

article.mail_body div#mail_caption span.sender {
    padding: 2px !important;
}


div#mail_caption p.sender {
  display: inline;
}

div#mail_caption p.date {
  display: inline;
}

 #support_mailbox .pagenation{
    padding-top: 10%;
 }

/*=================================================
FAQ
description-010
=================================================*/

section.faq_area {
    margin: 5% 0;
}

section.faq_area ul li:first-child {
  margin-top: -12px;
}

h2.faq_cap {
    color: #564f4e;
    padding: 15px 0px 15px 0;
}

section.faq_area .acordion_top {

}

section.faq_area .acordion {

}

section.faq_area .trigger {
    font-weight: normal;
}

section.faq_area .trigger.active {
  border-bottom: 1px solid #bebdbd;
}

section.faq_area .acordion_tree {
  padding: 15px;
  background: #F8F7F4;
}

section.faq_area .open-close {

}

section.faq_area .trigger.active .open-close {

}

/*=================================================
占い用語集
description-011
=================================================*/

section.faq_area.term_area h2.faq_cap {
  padding: 24px 0px 11px 0;
}

section.faq_area.term_area h2.faq_cap {
  color: var(--accent-color);
}

section.faq_area.term_area .acordion_top {
  margin-top: 16px;
}

section.faq_area.term_area .trigger  {
  border-radius: 0.3em;
  font-weight: 500;
}

section.faq_area.term_area .trigger.active {
  border-radius: 0.3em 0.3em 0 0;
}

section.faq_area.term_area .acordion_tree {
  padding: 20px;
  border-radius: 0 0 0.3em 0.3em;
  border: 1px solid #bebdbd;
  border-top: 0;
}

section.faq_area.term_area .open-close {
  top: 50%; 
  width: 26px;
  height: 26px;
  border-radius: 40px;
  margin-top: 0;
  border: 1px solid #bebdbd;
  transform: rotate(0deg) translate(0, -50%);
}

section.faq_area.term_area .open-close:before {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  top: 54%;
  right: 7px;
  margin-top: -8px;
  border-left: 2px solid #C9C6C0;
  border-top: 2px solid #C9C6C0;
  transform: rotate(225deg);
  -webkit-transform: rotate(225deg);
}

section.faq_area.term_area .trigger.active .open-close:before {
  top: 70%;
  transform: rotate(45deg);
  -webkit-transform: rotate(45deg);
}

/*=================================================
WEBPUSH通知
description-045
=================================================*/

#webpush #container_inner {
  padding: 0 5%;
}

#webpush .footer_contents #pagetop {
  margin-top: 0;
}

section.webpush {
    margin: 5% 0 0;
}

.webpush_desc {
}

.webpush_note {
  margin: 5% 0 10%;
  padding: 5%;
  background: #f5f1dc;
  line-height: 1.8em;
  text-align: center;
}

.webpush_note h4 {
  font-size: 17px;
  line-height: 1.2;
  color: #ff5233; 
  text-align: center;
}

.webpush_note p {
  font-size: 14px;
  line-height: 1.6;
  text-align: center;
}

.webpush_link {
  display: flex;
  flex-direction: column;
  gap: 15px;
  margin-bottom: 20px;
}

.webpush_link li.ios h5 {
  padding: 6px 0;
  background: #295f9b;
  color: #fff;
  font-size: 15px;
  text-align: center;
}

.webpush_link li.android h5 {
  padding: 6px 0;
  background: #299b4f;
  color: #fff;
  font-size: 15px;
  text-align: center;
}

.webpush_link li a {
  position: relative;
  display: flex;
  padding: 3% 5%;
  font-size: 14px;
  line-height: 1.5;
  background: #f8f7f3;
}

.webpush_link li a:before {
  content: "";
  display: inline-block;
  margin-right: 6px;
  margin-top: 5px;
  background: #454545;
  height: calc(tan(60deg)* 16px / 2);
  width: 10px;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
  vertical-align: middle;
}

.webpush_link li a span {
  text-decoration: underline;
}

.webpush_flow {
  padding-bottom: 40px;
  max-width: 864px;
  margin: 0 auto; 
  background: #f8f7f3;
}

@media screen and (max-width:864px) {
  .webpush_flow {
    padding-bottom: 10%;
    width: 100vw;
    margin-right: calc(50% - 50vw);
    margin-left: calc(50% - 50vw);
    background: #f8f7f3;
  }
}
.webpush_flowtop {
  padding: 14px 5%;
  text-align: center;
  color: #fff;
}

.webpush_flowtop.ios {
  background: #386da9;
}

.webpush_flowtop.android {
  background: #38a45c;
}

.webpush_flowtop h3 {
  margin-bottom: 8px;
  font-size: 18px;
}

.webpush_flowtop small {
  display: block;
  font-size: 14px;
}

.webpush_flowlist {
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding: 5%;
}

.webpush_flowlist li {
  background: #fff;
  box-shadow: 0px 2px 3px 2px rgb(199 199 199 / 40%);
}

.webpush_flowdesc {
  display: flex;
  gap: 10px;
  padding: 3% 4%;
}

.webpush_flownum {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  min-width: 24px;
  height: 24px;
  font-size: 14px;
  color: #fff;
  font-weight: 700;
} 

#ios .webpush_flownum {
  background: #386da9;
}

#android .webpush_flownum {
  background: #38a45c;
}

.webpush_flow p {
  font-size: 14px;
  font-weight: bold;
  line-height: 1.4;
}


/*=================================================
With draw (1)
description-040
=================================================*/

table.usr_prof td {
  width: 15%;
}

form .outbtn_area {

}

div.outbtn_inner {

}

div.outbtn_area a.btn_short, div.outbtn_area .btn_short {
  float: left;
  margin-right: 2%;
  height: 54px;
  line-height: 54px;
  font-size: .9em;
}

div.outbtn_area a.btn_short, div.outbtn_area .btn_short {
    float: left;
    margin-right: 2%;
    width: 35%;
    background: #fff;
}
div.outbtn_area input.btn_short {

}

div.outbtn_area input.btn_short2 {
  height: 54px;
  line-height: 50px;
  width: 38%;
  float: left;
  margin-right: 2%;
  width: 35%;
  background: #fff;
  border-radius: 5px;
}

div.outbtn_area a.btn_half, div.outbtn_area .btn_half {
  float: right;
  width: 62%;
  height: 54px;
  line-height: 54px;
}

div.outbtn_area a.btn_half2, div.outbtn_area .btn_half2 {
  float: right;
  width: 62%;
  height: 54px;
  line-height: 54px;
}

ul.index_contents li a {
  display: block;
  padding: 22px 25px 22px 63px;
  font-size: .8em;
  font-weight: bold;
}

.four_f, .name_f, .tarot_f {
  position: relative;
}

.four_f::after, .name_f::after, .tarot_f::after {
  content: "";
  display: block;
  position: absolute;
  right: 12px;
  top: 23px;
  width: 10px;
  height: 28px;
  background-size: 70% !important;
  background-position: center;
  background: url(../../members/sm/img/navi_arrow.png) no-repeat;
}

#free_contents {
  margin-top: 15px;
  margin-bottom: 30px;
  border: 1px solid #F0EFEC;
  -moz-border-radius: 7px 7px 7px;
  -webkit-border-radius: 7px 7px 7px;
  border-radius: 7px 7px 7px;
}

#free_contents ul {}

#free_contents ul li {
  border-bottom: 1px solid #F0EFEC;
  position: relative;
  background: #f5f5f5;
  background: -moz-linear-gradient(top, #f5f5f5 0%, #f9f8f8 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #f5f5f5), color-stop(100%, #f9f8f8));
  background: -webkit-linear-gradient(top, #f5f5f5 0%, #f9f8f8 100%);
}

#free_contents ul li:first-child {
  -moz-border-radius: 7px 7px 0px 0px;
  -webkit-border-radius: 7px 7px 0px 0px;
  border-radius: 7px 7px 0px 0px;
}

#free_contents ul li:last-child {
  border-bottom: 0px;
  -moz-border-radius: 0px 0px 7px 7px;
  -webkit-border-radius: 0px 0px 7px 7px;
  border-radius: 0px 0px 7px 7px;
}

#free_contents ul li::after {
  content: "";
  display: block;
  position: absolute;
  left: 7px;
  top: 5px;
  width: 55px;
  height: 55px;
  -moz-background-size: 64% !important;
  -webkit-background-size: 64% !important;
  background-size: 64% !important;
}

#free_contents ul li:nth-child(1)::after {
  background: url(../../members/sm/img/four_f.png) no-repeat;
}

#free_contents ul li:nth-child(2)::after {
  background: url(../../members/sm/img/name_f.png) no-repeat;
}

#free_contents ul li:last-child::after {
  background: url(../../members/sm/img/tarot_f.png) no-repeat;
}


/*=================================================
With draw (4)
system-205
=================================================*/

div.rewrite_area {
  position: relative;
  height: 51px;
}

div.rewrite_area button {
  position: absolute;
  top: 0;
  right: 0;
  /*padding-top: 4px;*/
  font-size: 1em;
  color: #454545;
}


/*=================================================
My account  Profile change(1)
system-351
=================================================*/

#prof_change {


}
#prof_change a.icon_btn i{
    width: 2.5em;
    margin: 0 auto;
    text-align: center;
    font-size: 42px;
}
#prof_change .prof_type{
  padding: 0;
  margin: 0;
  margin-bottom: 5px;
}

#email_change {


}
#email_change a.icon_btn{

}
#email_change .prof_type{
  padding: 0;
  margin: 0;
  margin-bottom: 5px;
}



section#prof_change a.icon_btn::before {

}
section#email_change a.icon_btn::before {

}

/*=================================================
My account  Profile change(2)
system-352
=================================================*/

section#form_acc {
    padding: 20px 0 10px;
    width: 100%;

}

section#form_acc .defult_input{
    background: #F5F5F5;
    line-height: 22px;
    border-radius: 0;
    height: 44px;
    font-size: 15px;
}
section#form_acc .form_field {
    background: #F5F5F5;
    line-height: 22px;
    border-radius: 0;
    height: 44px;
    font-size: 15px;
}

section#form_acc .defult_select select {
    background: #F5F5F5;
    line-height: 22px;
    border-radius: 0;
    height: 44px;
    font-size: 15px;
}
section#form_acc .forward{
    font-size: 1em;
}


.form_title {
  margin-bottom: 10px;
  font-weight: bold;
  text-shadow: #ffffff 0 1px 0;
  position: relative;
}
.form_title span{
  position: absolute;
  top: -4px;
}
.form_field, .defult_input, ul.sm {
  margin-bottom: 20px;
}

.form_field, .defult_input {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-border-radius: 3px;
  -moz-border-radius: 3px;
  border-radius: 3px;
  -webkit-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(000, 000, 000, 0.7) 0 0px 0px;
  -moz-box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(000, 000, 000, 0.7) 0 0px 0px;
  box-shadow: rgba(255, 255, 255, 0.4) 0 1px 0, inset rgba(000, 000, 000, 0.7) 0 0px 0px;
  padding: 10px;
  width: 100%;
  display: block;
}

.defult_input {
    background: #F5F5F5;
    line-height: 1.5em;
    border-radius: 0;
}

.form_field {
  border: 1px solid #c2c2bf;
  background: #F8F7F4;
  color: #96908f;
  margin-top: 7px;
  height: 2.5em;
}

.form_field:focus {
  background: #fff;
  color: #564f4e;
}


/* :::::: 地域登録セレクトボックス用 :::::: */

.defult_select select {
    width: 100%;
    padding: 10px;
    margin-bottom: 20px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border: none;
    background: #F5F5F5;
    color: #564f4e;
    font-size: 1em;
    line-height: 1.5em;
    border-radius: 0;
}

.defult_select .select_box{
  position: relative;
  display: block;
}

.defult_select .select_box::before {
  border-bottom: 4.5px solid #454545;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  content: "";
  position: absolute;
  right: 15px;
  top: 15px;
  width: 0;
}
.defult_select .select_box::after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4.5px solid #454545;
  content: "";
  position: absolute;
  right: 15px;
  top: 25px;
  width: 0;
}

/* :::::: radio button design :::::: */

ul[class^="sm"] input[type="radio"] {
  opacity: 0;
  position: absolute;
  height: 20px;
  padding: 0;
}

ul.sm li {
  margin: 0;
  position: relative;
  float: left;
  width: 50%;
}

ul[class^="sm"] li label {
    background: #fdfcfa;
    display: block;
    padding: 8px;
    border-radius: 0;
    border: 1px solid #c2c2bf;
    text-align: center;
    line-height: 15px;
}

ul[class^="sm"] li:first-child label {
  -webkit-border-radius: 5px 0 0 5px;
  -moz-border-radius: 5px 0 0 5px;
  border-radius: 5px 0 0 5px;
  border-right: 0.5px solid #c2c2bf;
}

ul[class^="sm"] li:last-child label {
  -webkit-border-radius: 0 5px 5px 0;
  -moz-border-radius: 0 5px 5px 0;
  border-radius: 0 5px 5px 0;
  border-left: 0.5px solid #c2c2bf;
}

ul[class^="sm"] input[type="radio"]:checked+label {
  background: #fff5cf;
}


/*=================================================
My account Mail Address change
system-354
=================================================*/

span.add_change_step {
  float: left;
}

p.add_change_step {
    overflow: auto;
    margin: 0;
    padding-top: 10px;
    width: 100%;
    line-height: 1.5em;

}


/*=================================================
*Domain
description-300 description-301
description-304 description-308
description-307
=================================================*/

div#step_inner figure.step01 {
  float: left;
  margin: 0px 10px 0px 0px;
  width: 60px;
  height: 75px;
}

div#step_inner figure.docomo {
  height: 50px;
}

div#step_inner figure {
  display: block;
  width: 60%;
  margin: 15px auto;
}

ol.flow_list li#step_wrap:last-child div#step_inner figure {
  margin: 15px auto;
}


/*=================================================
Completion of Registration
description-999
=================================================*/

body.reg {
    background: #F8F7F4;
}

body.reg div#container {
  margin-top: 15px;
}

body.reg div#container_inner {
  margin-bottom: 15px;
  padding: 0 5%;

}

body.reg div.formbg_center {
  width: 100%;
  height: auto;
  margin: 0px;
}

body.reg div.formbg_center div.wrap {
  padding: 0 5%;
}

body.reg h1, body.reg p {
  text-align: center;
}

body.reg h1 {
  font-size: 1.8em;
}

body.reg a.sub_forward {

}

body.reg small {

}
body.reg .s_footer {
  position: fixed;
  width: 100%;
  bottom: 0;
}

/*=================================================
Favorite Teller List
description-999
=================================================*/

.prelude {
  background-color: #FFF7F1;
  border-radius: 8px;
  -webkit-border-radius: 8px;
  -moz-border-radius: 8px;
  padding: 10px;
  margin-top: 10px;
}

.consent_page h2 {
  padding: 0.8em 0 0.8em .75em;
  border-left: 6px solid #FFACAC;
  font-size: 1.8em;
  margin-top: 15px;
  margin-bottom: 10px;
  color: #564f4e;
  border-radius: 0px;
}

input[type=checkbox] {
  -moz-transform-origin: center;
  -moz-transform: scale( 1.3, 1.3);
  -webkit-transform-origin: center;
  -webkit-transform: scale( 1.3, 1.3);
  vertical-align: baseline;
}


/*=================================================
説明ページP41（退会するには）
=================================================*/

#container_inner .s_txt {
  line-height: 1.1;
  display: block;
  margin-top: 5%;
  margin-bottom: 5px;
}


/*=================================================
ミライバライform
=================================================*/

.form_mirai {
  border-radius: 8px;
  margin-top: 5px;
}

.form_mirai input {
  width: 97%;
  font-size: 15px;
  background: #F5F5F5;
  border: none;
  border-radius: 0;
  margin-bottom: 10px;
  -webkit-appearance: none !important;
  appearance: none !important;
  padding: 15px;
}

.form_mirai input::placeholder {
  font-size: 15px;
}

.form_mirai .mirai_str {
  color: #FD961D;
  float: right;
  margin-top: 10px;
  font-size: 15px;
}


/*===========================
*home Teller Slider
*system-01
===========================*/

.flexslider {
  margin-bottom: 0px;
  border: 0px !important;
}

.flexslider:hover .flex-direction-nav .flex-prev {
  opacity: 1 !important;
  left: 6% !important;
}

.flexslider:hover .flex-direction-nav .flex-next {
  opacity: 1;
  right: 6% !important;
}

.flexslider:hover .flex-direction-nav .flex-prev:hover {
  opacity: 1;
}

.flexslider:hover .flex-direction-nav .flex-next:hover {
  opacity: 1;
}

.flex-direction-nav {
  opacity: 1 !important;
}

.flex-control-paging li a {
  width: 8px;
  height: 8px;
}

.flex-control-paging li a {
  box-shadow: none !important;
}

.flex-control-paging li a.flex-active {}


/*===========================
*home fortune Area Ribbon
*system-01
===========================*/

.teller_wrap h2, .teller_list h2 {
  display: block;
  position: relative;
  width: 84%;
  padding: 16px 3px;
  margin: 0 auto;
  font-size: 1.6em;
  letter-spacing: 0.1rem;
  text-align: center;
  font-weight: bold;
  text-transform: uppercase;
  border-radius: 1px;
  /*iPhone6 Plus huck*/
  z-index: 3;
  outline: none;
}

.teller_wrap h2::after, .teller_list h2::after {
  content: '';
  display: block;
  width: 100%;
  margin: 0 auto;
  position: absolute;
  height: 3px;
  top: 4px;
  margin-left: -50%;
  left: 50%;
}

.teller_wrap h2:before, .teller_list h2:before {
  content: '';
  display: block;
  width: 100%;
  margin: 0 auto;
  position: absolute;
  height: 3px;
  bottom: 4px;
  margin-left: -50%;
  left: 50%;
}

.ribbon_bg {
  content: '';
  position: absolute;
  top: 40px;
  left: 50%;
  z-index: 0;
  width: 96%;
  height: 0;
  margin-left: -48%;
}

@media (min-width:588px) {
  .teller_wrap .ribbon_shadow, .teller_list .ribbon_shadow {
    display: none;
  }
}

.teller_wrap .ribbon_shadow, .teller_list .ribbon_shadow {
  content: '';
  width: 85%;
  height: 0;
  position: relative;
  top: -1px;
  left: 50%;
  z-index: 2;
  margin-left: -42%;
}

.teller_wrap h2, .teller_list h2, .ribbon_bg {
  -moz-background-size: 3px 3px;
  -webkit-background-size: 3px 3px;
}

.teller_wrap h2, .teller_list h2, .ribbon_bg, .ribbon_shadow {
  box-sizing: border-box;
  background-origin: border-box;
}


/* :::::: flexslider add library :::::: */

@font-face {
  font-family: 'flexslider-icon';
  src: url('fonts/flexslider-icon.eot');
  src: url('fonts/flexslider-icon.eot?#iefix') format('embedded-opentype'), url('fonts/flexslider-icon.woff') format('woff'), url('fonts/flexslider-icon.ttf') format('truetype'), url('fonts/flexslider-icon.svg#flexslider-icon') format('svg');
  font-weight: normal;
  font-style: normal;
}


/*-- reset --*/

.flex-container a:hover, .flex-slider a:hover, .flex-container a:focus, .flex-slider a:focus {
  outline: none;
}

.slides, .slides>li, .flex-control-nav, .flex-direction-nav {
  margin: 0;
  padding: 0;
  list-style: none;
}

.flex-pauseplay span {
  text-transform: capitalize;
}


/*-- base style --*/

.flexslider {
  margin: 0;
  padding: 0;
}

.flexslider .slides>li {
  display: none;
  -webkit-backface-visibility: hidden;
}

.flexslider .slides img {
  width: 100%;
  display: block;
}

.flexslider .slides::after {
  content: "\0020";
  display: block;
  clear: both;
  visibility: hidden;
  line-height: 0;
  height: 0;
}

html[xmlns] .flexslider .slides {
  display: block;
}

* html .flexslider .slides {
  height: 1%;
}

.no-js .flexslider .slides>li:first-child {
  display: block;
}


/*-- default theme --*/

.flexslider {
  background: #ffffff;
  border: 4px solid #ffffff;
  position: relative;
  zoom: 1;
  -webkit-border-radius: 4px;
  -moz-border-radius: 4px;
  border-radius: 4px;
  -webkit-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  -moz-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  -o-box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
  box-shadow: '' 0 1px 4px rgba(0, 0, 0, 0.2);
}

.flexslider .slides {
  zoom: 1;
}

.flexslider .slides img {
  height: auto;
}

.flex-viewport {
  max-height: 2000px;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.loading .flex-viewport {
  max-height: 300px;
}

.carousel li {
  margin-right: 5px;
}

.flex-direction-nav {
  *height: 0;
}

.flex-direction-nav a {
  text-decoration: none;
  display: block;
  width: 40px;
  height: 40px;
  margin: -20px 0 0;
  position: absolute;
  top: 50%;
  z-index: 10;
  overflow: hidden;
  opacity: 0;
  cursor: pointer;
  color: rgba(0, 0, 0, 0.8);
  text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.3);
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

.flex-direction-nav a:before {

}

.flex-direction-nav a.flex-next:before {

}

.flex-direction-nav .flex-prev {
  left: -50px;
}

.flex-direction-nav .flex-next {
  right: -50px;
  text-align: right;
}

.flexslider:hover .flex-direction-nav .flex-prev {
  opacity: 0.7;
  left: 10px;
}

.flexslider:hover .flex-direction-nav .flex-prev:hover {
  opacity: 1;
}

.flexslider:hover .flex-direction-nav .flex-next {
  opacity: 0.7;
  right: 10px;
}

.flexslider:hover .flex-direction-nav .flex-next:hover {
  opacity: 1;
}

.flex-direction-nav .flex-disabled {
  opacity: 0!important;
  filter: alpha(opacity=0);
  cursor: default;
}

.flex-pauseplay a {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  bottom: 5px;
  left: 10px;
  opacity: 0.8;
  z-index: 10;
  overflow: hidden;
  cursor: pointer;
  color: #000;
}

.flex-pauseplay a:before {
  font-family: "flexslider-icon";
  font-size: 1em;
  display: inline-block;
  content: '\f004';
}

.flex-pauseplay a:hover {
  opacity: 1;
}

.flex-pauseplay a.flex-play:before {
  content: '\f003';
}

.flex-control-nav {
  width: 100%;
  padding-bottom: 5%;
  text-align: center;

}

.flex-control-nav li {
  margin: 0 6px;
  display: inline-block;
  zoom: 1;
  *display: inline;
}

.flex-control-paging li a {
  width: 8px;
  height: 8px;
  display: block;
  background: #D4D3D1;
  cursor: pointer;
  text-indent: -9999px;
  -webkit-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -o-box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  box-shadow: inset 0 0 3px rgba(0, 0, 0, 0.3);
  -webkit-border-radius: 20px;
  -moz-border-radius: 20px;
  border-radius: 20px;
}

.flex-control-paging li a:hover {
  background: #333;
  background: rgba(0, 0, 0, 0.7);
}

.flex-control-paging li a.flex-active {
  background: #000;
  background: rgba(0, 0, 0, 0.9);
  cursor: default;
}

.flex-control-thumbs {
  margin: 5px 0 0;
  position: static;
  overflow: hidden;
}

.flex-control-thumbs li {
  width: 25%;
  float: left;
  margin: 0;
}

.flex-control-thumbs img {
  width: 100%;
  height: auto;
  display: block;
  opacity: .7;
  cursor: pointer;
  -webkit-transition: all 1s ease;
  -moz-transition: all 1s ease;
  -ms-transition: all 1s ease;
  -o-transition: all 1s ease;
  transition: all 1s ease;
}

.flex-control-thumbs img:hover {
  opacity: 1;
}

.flex-control-thumbs .flex-active {
  opacity: 1;
  cursor: default;
}


/*-- responsive --*/

@media screen and (max-width:860px) {
  .flex-direction-nav .flex-prev {
    opacity: 1;
    left: 10px;
  }
  .flex-direction-nav .flex-next {
    opacity: 1;
    right: 10px;
  }
}


/* :::::: acordion add library :::::: */

.acordion {
  position: relative;
  line-height: 51px;
  margin: 0 auto;
  margin-top: -1px;
  background: #F8F7F4;
}

.trigger {
  font-weight: bold;
  position: relative;
  border: 1px solid #C9C6C0;
  padding: 0 5%;
  background: #fff;
  -moz-border-radius: 0.3em;
  -webkit-border-radius: 0.3em;
  border-radius: 0.3em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  font-size: 15px;
}

.trigger.active {

}
.acordion table.price_list tr:nth-child(even) td{
    background: #fff;
    border: 2px solid #F8F7F4;
}

.acordion table.price_list tr:nth-child(odd) td {
    background: #fff;
    border: 2px solid #F8F7F4;
}
.acordion table .str_clr {
    color: #FD961D;
}
.acordion table th {
    border: solid 2px #F8F7F4;
}

.acordion table.late_payment_list {
    border: solid 2px #F8F7F4;
}
.acordion table.late_payment_list tr {
    background: #fff;
}
.acordion table.late_payment_list tr:nth-child(even) td {
    background: #fff;
    border: 2px solid #F8F7F4;
}
.acordion table.late_payment_list tr:nth-child(odd) td {
    background: #fff;
    border: 2px solid #F8F7F4;
}
.acordion a.action2, .action2 {
    font-size: 15px;
}


.acordion .list_type {
    width: auto;
}
.acordion .list_type .ttl_left,point_left {
    width: 60%;
}
.acordion_tree {
  font-size: .9em;
  padding: 5%;
}
.acordion_tree a.btn_base {
    height: auto;
}
.open-close {
    width: 8px;
    height: 8px;
    position: absolute;
    top: 54%;
    right: 16px;
    margin-top: -8px;
    border-left: 2px solid #C9C6C0;
    border-top: 2px solid #C9C6C0;
    transform: rotate(225deg);
    -webkit-transform: rotate(225deg);
}

.trigger.active .open-close {
    margin-top: -3px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
}

.acordion_title{
    font-weight: bold;
    font-size: 1.1em; 
}

/* :::::: pager general design :::::: */

ol.generalclr {
  background: #dcd8d5;
  border-top: 1px #a2a2a2;
  border-bottom: 1px solid #a2a2a2;
  /*-moz-border-radius:0px 0px 6px 6px;
  -webkit-border-radius:0px 0px 6px 6px;
  border-radius:0px 0px 6px 6px;*/
}

ol.generalclr li.pager_btn>a>p {
  background: #7e7c7a;
  color: #ffffff;
}


/*--  unselected  --*/

ol.generalclr li.pager_btn>p {
  background: #bcb9b7;
  color: #ffffff;
  border: 2px solid #bcb9b7;
}


/*--  selected  --*/


/* :::::: mordal add library :::::: */


/* Hide scroll bar */

html.remodal-is-locked {
  overflow: hidden;
}


/* Anti FOUC */

.remodal, [data-remodal-id] {
  visibility: hidden;
}


/* Necessary styles of the overlay */

.remodal-overlay {
  position: fixed;
  z-index: 9999;
  top: -5000px;
  right: -5000px;
  bottom: -5000px;
  left: -5000px;
  display: none;
}


/* Necessary styles of the wrapper */

.remodal-wrapper {
  position: fixed;
  z-index: 10000;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  display: none;
  overflow: auto;
  text-align: center;
  -webkit-overflow-scrolling: touch;
}

.remodal-wrapper:after {
  display: inline-block;
  height: 100%;
  margin-left: -0.05em;
  content: "";
}


/* Fix iPad, iPhone glitches */

.remodal-overlay, .remodal-wrapper {
  -webkit-transform: translateZ(0px);
}


/* Necessary styles of the modal dialog */

.remodal {
  position: relative;
  display: inline-block;
}


/* Default theme font */

.remodal, .remodal * {
  text-align: center;
  line-height: 1.3em;
}

/* Default theme font */

.remodal span{
  display: block;
}



/* Background for effects */

.remodal-bg {
  -webkit-transition: -webkit-filter 0.2s ease-out;
  -moz-transition: -moz-filter 0.2s ease-out;
  transition: filter 0.2s ease-out;
}

body.remodal-is-active .remodal-bg {
  -webkit-filter: blur(3px);
  -moz-filter: blur(3px);
}


/* Default theme styles of the overlay */

.remodal-overlay {
  -webkit-transition: opacity 0.2s ease-out;
  -moz-transition: opacity 0.2s ease-out;
  transition: opacity 0.2s ease-out;
  opacity: 0;
  background-color: rgba(0, 0, 0, 0.75);
}

body.remodal-is-active .remodal-overlay {
  opacity: 1;
}


/* Default theme styles of the modal dialog */

.remodal {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  border: 1px solid #aeaeae;
  max-width: 90%;
  width: 90%;
  -webkit-transition: -webkit-transform 0.2s ease-out, opacity 0.2s ease-out;
  -moz-transition: -moz-transform 0.2s ease-out, opacity 0.2s ease-out;
  transition: transform 0.2s ease-out, opacity 0.2s ease-out;
  -webkit-transform: scale(0.95);
  -moz-transform: scale(0.95);
  transform: scale(0.95);
  background: #fff;
  opacity: 0.3;
  color: #564f4e;
  background-position: center top;
  background-clip: padding-box;
  -webkit-border-radius: 10px;
  -moz-border-radius: 10px;
  border-radius: 10px;
}

.remodal div.txt_Area {
    padding: 2em;
}

.remodal div.btn_Area {
  height: 84px;
  -webkit-border-radius: 0px 0px 20px 20px;
  -moz-border-radius: 0px 0px 20px 20px;
  border-radius: 0px 0px 20px 20px;
}

.remodal div.btn_Area div.outbtn_area {
  text-align: center;
  background: #F8F7F4;
  width: 100%;
  margin: 0;
  padding: 0;
  -webkit-border-radius: 0px 0px 20px 20px;
  -moz-border-radius: 0px 0px 20px 20px;
  border-radius: 0px 0px 20px 20px;
}

.remodal div.btn_Area div.outbtn_area div.outbtn_inner {
  padding: 0 15px;
}

body.remodal-is-active .remodal {
  -webkit-transform: scale(1);
  -moz-transform: scale(1);
  transform: scale(1);
  opacity: 1;
}


/* Vertical align of the modal dialog */

.remodal, .remodal-wrapper:after {
  vertical-align: middle;
}


/* Close button */

.remodal-close:after {
    content: '×';
    position: absolute;
    top: -12%;
    right: 0;
    color: #FFF;
    text-decoration: none;
    font-size: 35px;
}

.remodal-close h2 {
  line-height: 60px;
}



.remodal-close:hover, .remodal-close:active {
  background: #aaaaaa;
}

.remodal-close:hover.remodal-close:after, .remodal-close:active.remodal-close:after {
  color: #ffffff;
}


/* Dialog buttons */

.remodal-cancel {
  font-size: 1em;
  display: inline-block;
  width: 120px;
  margin: 0 0 5px 0;
  padding: 9px 0;
  cursor: pointer;
  -webkit-transition: all 0.2s ease-out;
  -moz-transition: all 0.2s ease-out;
  transition: all 0.2s ease-out;
  text-align: center;
  text-decoration: none;
  background-clip: padding-box;
}

.remodal-cancel {
  color: #c0392b;
  border: 2px solid #c0392b;
  background: #f4f4f4;
}

.remodal-cancel:hover, .remodal-cancel:active {
  color: #f4f4f4;
  background: #c0392b;
}


/* :::::: frame_Btn design :::::: */
a.favorite_btn , a.pencil_btn{
  display:block;
  float:right;
  margin:10px 0px 0px 0px;
  padding: 0.5em;
  width:130px;
  -moz-border-radius:5px;
  -webkit-border-radius:5px;
  border-radius:5px;
  font-weight:bold;
  line-height:1.4;
  text-align:center;
}
a.favorite_btn{
  border:2px solid #FF5233;
  color:#FF5233;
  font-size: 15px;
}
a.small{
  width:100%;
  border:1px solid #FF5233;
}
a.pencil_btn{
  width:100%;
  font-size: 15px;

}
a.favorite_btn img , a.pencil_btn img{
  width:22px;
  height:20px;
  padding-right:5px;
}
a.favorite_btn i{
    margin-right: 5px;
}
a.pencil_btn i{
    margin-right: 5px;

}
/* :::::: side by side_Btn design :::::: */
#favorite_tellerbox div.btn_area ,
#consultation_form div.btn_area ,
#consultation_form div.form_note{
  width:95%;
  margin:0 auto;
  padding-bottom: 5%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-justify-content: center;
  -ms-justify-content: center;
  justify-content: center;
  align-items: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
}
#favorite_tellerbox div.btn_area ,
#consultation_form div.btn_area{
  margin-top:-15px;
}
#favorite_tellerbox a.btn_short{
  float:left;
  margin:15px 5% 15px 0;
  border: 1px solid #C9C6C0;
  border-radius: 4px;
}
#consultation_form a.btn_short{
    margin: 0px 10px 0 5%;
    padding-left: 1.5em;
    -moz-border-radius: 0.5em;
    -webkit-border-radius: 0.5em;
    border-radius: 0.5em;
    font-size: 13px;
    border: 1px solid #C9C6C0;
    border-radius: 4px;
    width: 42%;
    background: #fff;
    font-weight: unset;
    box-shadow: none;
}
#favorite_tellerbox a.btn_short{
  padding-left:0px;
  font-size: 15px;
}
#consultation_form a.action::before{
  left:7%;
}
#favorite_tellerbox a.btn_half ,
#consultation_form input.btn_half{
  float:right;
  width:50%;
  font-size: 15px;
}
#consultation_form input.btn_half{
    margin-top: 0;
    padding: 0;
    height: auto;
    font-size: 15px;
}


/*===========================
*home main visual
*system-01
===========================*/
#main_visual {
  margin:15px 0px;
}
#main_visual img {
  width:100%;
}

/*===========================
*home vip visual
*system-01
===========================*/
#vip_visual img {
  width:100%;
}
/*===========================
*home Segment Area
*system-01
===========================*/
div.info_area{
  background:#ffffff;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  -moz-border-radius:8px 8px 7px 7px;
  -webkit-border-radius:8px 8px 7px 7px;
  border-radius:8px 8px 7px 7px;
  margin-bottom: 15px;
}
div.info_area .info_txt{
  padding:12px;
}
div.info_area h2.cap {
  padding:15px 15px 15px 55px;
  -moz-border-radius:4px 4px 0px 0px;
  -webkit-border-radius:4px 4px 0px 0px;
  border-radius:4px 4px 0px 0px;
  font-size:1.6em;
  font-weight:bold;
  letter-spacing:0.03rem;
  position:relative;
  color:#ffffff;
}
div.info_area h2.cap::after {
  content:"";
  display:block;
  position:absolute;
  left:10px;
  top:3px;
  width:55px;
  height:55px;
  background-size:66% !important;
}
h2.caution{
  background:#f32f20; /*red*/
}

h2.caution_0pt{
  background:#E09537; /*red*/
}

h2.caution::after {
  background:url(../img/caution_caption.png) no-repeat;
}

h2.info::after {
  background:url(../img/info_caption.png) no-repeat;
}
div.caution_frame{
}

div.caution_frame_0pt{

}

div.syugo_btn {
  margin-bottom: 20px;
}

div.syugo_btn a {
  display:block;
  font-weight:bold;
  background:#F18FD9; /* Old browsers */
  background:-moz-linear-gradient(top,  #feca5d 0%, #D244B9 100%); /* FF3.6+ */
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#F18FD9), color-stop(100%,#D244B9)); /* Chrome,Safari4+ */
  background:-webkit-linear-gradient(top,  #F18FD9 0%,#D244B9 100%); /* Chrome10+,Safari5.1+ */
  -webkit-border-radius:0.5em;
  -moz-border-radius:0.5em;
  border-radius:0.5em;
  border:1px solid #E152C5;
  box-shadow:inset 0 1px 0 rgba(255,255,255, 0.8),
  inset 1px 0 0 rgba(255,255,255, 0.3),
  inset -1px 0 0 rgba(255,255,255, 0.3),
  inset 0 -1px 0 rgba(255,255,255, 0.2);
  width:85%;
  text-align:center;
  text-decoration:none;
  color:#fff;
  text-shadow:1px 1px 1px #751161;
  height:49px;
  line-height:51px;
  font-size:1.5em;
  margin:0 auto;
}

/*===========================
*home Mymenu Area
*system-01
===========================*/
#mymenu {
  border:1px solid #F0EFEC;
  -moz-border-radius:8px 8px 7px 7px;
  -webkit-border-radius:8px 8px 7px 7px;
  border-radius:8px 8px 7px 7px;
}
#mymenu h1::after {
  background:url(../img/menu_caption.png) no-repeat;
}
#mymenu ul {
  background:#f8f7f7;
}
#mymenu ul li {
  border-bottom:1px solid #F0EFEC;
  position:relative;
}
#mymenu ul li:first-child {
  position:relative;
  padding:22px 12px 22px 12px;
}
#mymenu ul li::after {
  content:"";
  display:block;
  position:absolute;
  left:7px;
  top:9px;
  width:76px;
  height:76px;
  -moz-background-size:53% !important;
  -webkit-background-size:53% !important;
  background-size:53% !important;
}

#mymenu ul li:nth-child(2)::after{
  background:url(../img/newmail_icon.png) no-repeat;
  top:11px;
}

#mymenu ul li:nth-child(3) a {
  padding: 9px 25px 10px 63px;
  font-size: 1.4em;
}

#mymenu ul li:nth-child(3)::after{
  background:url(../img/news_icon.png) no-repeat;
}

#mymenu ul li:nth-child(4)::after{
  background:url(../img/readmail_icon.png) no-repeat;
}

#mymenu ul li:last-child::after{
  background:url(../img/favorite_icon.png) no-repeat;
}

#mymenu ul li div.mydata p.id {
  display:inline-block;
  padding-bottom:5px;
  margin-bottom:10px;
  width:130px;
  border-bottom:1px dotted #666;
}
#mymenu ul li p.prof {
  position:absolute;
  right:12px;
  top:30px;
}
#mymenu ul li p.prof a {
  font-size:1.2em;
  font-weight:bold;
  display:block;
  text-align:center;
  border:1px solid #a8a6a6;
  box-shadow:inset 0 1px 0 rgba(255,255,255, 0.8),
  inset 1px 0 0 rgba(255,255,255, 0.3),
  inset -1px 0 0 rgba(255,255,255, 0.3),
  inset 0 -1px 0 rgba(255,255,255, 0.2) !important;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  padding:8px 12px 8px 12px;
  text-decoration:none;
  display:inline-block;
  text-shadow:1px 1px 1px rgba(0, 0, 0, 0.6);
  color:#fff;
  background-color:#c2c1c1;
  background-image:-webkit-gradient(linear, left top, left bottom, from(#d4d4d4), to(#aeaeae));
  background-image:-webkit-linear-gradient(top, #d4d4d4, #aeaeae);
  background-image:-moz-linear-gradient(top, #d4d4d4, #aeaeae);
}

#mymenu ul li b {
  font-size: 1.2em;
}

#mymenu ul li small {
  display: block;
  width: 67px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border-radius: 3px;
  background: none;
  border: 1px solid #EC7A60;
  color: #EC7A60;
  margin-bottom: 7px;
  text-align: center;
  font-size: 1.1em;
  padding: 4px 5px 3px;
}

#mymenu ul li span {
  display:inline-block;
  font-size:1.2em;
  margin-left:10px;
  padding:4px 15px;
  -moz-border-radius:7px;
  -webkit-border-radius:7px;
  border-radius:7px;
}
#mymenu div.edit_address {
  background:#fff;
  height:48px;
  padding:10px;
  border-top:0px;
  -moz-border-radius:0px 0px 7px 7px;
  -webkit-border-radius:0px 0px 7px 7px;
  border-radius:0px 0px 7px 7px;
}
#mymenu div.edit_address p a {
  display:inline-block;
  width:86%;
  padding:6px 7%;
  font-size:1.2em;
  line-height:1.4;
  font-weight:bold;
  color:#ffffff;
  text-align:left;
  text-decoration:none;
  text-shadow:1px 1px 1px rgba(0,0,0,0.5);
  background-color:#c5c3c3;
  background-image:-webkit-gradient(linear, left top, left bottom, from(#c5c3c3), to(#acacac));
  background-image:-webkit-linear-gradient(top, #c5c3c3, #acacac);
  border:1px solid #a8a6a6;
  box-shadow:inset 0 1px 0 rgba(255,255,255, 0.8),
  inset 1px 0 0 rgba(255,255,255, 0.3),
  inset -1px 0 0 rgba(255,255,255, 0.3),
  inset 0 -1px 0 rgba(255,255,255, 0.2) !important;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
}
#mymenu div.edit_address p.edit_email {
  float:left;
  width:48%;
  position:relative;
}
#mymenu div.edit_address p.edit_email::after {
  content:"";
  display:block;
  position:absolute;
  right:12px;
  top:19px;
  width:9px;
  height:11px;
  background:url(../img/btn_arrow.png) no-repeat;
  -moz-background-size:100%;
  -webkit-background-size:100%;
  background-size:100%;
}
#mymenu div.edit_address p.edit_model {
  float:right;
  width:48%;
  position:relative;
}
#mymenu div.edit_address p.edit_model::after {
  content:"";
  display:block;
  position:absolute;
  right:12px;
  top:19px;
  width:9px;
  height:11px;
  background:url(../img/btn_arrow.png) no-repeat;
  -moz-background-size:100%;
  -webkit-background-size:100%;
  background-size:100%;
}

/*===========================
*home Beginner Area
*system-01
===========================*/
#beginner {
  margin-bottom:25px;
}
#beginner p {
  width:90%;
  margin:0 auto;
  margin-bottom:10px;
}
#beginner p:last-child {
  margin-bottom:0px;
}
#beginner p a {
  display:block;
}
#beginner p img {
  width:100%;
}

/*===========================
*home fortune Area
*system-01
===========================*/
#fortune {
  border:1px solid #b3b5b5;
  -moz-border-radius:8px 8px 7px 7px;
  -webkit-border-radius:8px 8px 7px 7px;
  border-radius:8px 8px 7px 7px;
  min-height:1100px;
  height:auto !important;
  height:1100px;
}
#fortune div.teller_top {
  background:#ffffff;
  -moz-border-radius:0px 0px 7px 7px;
  -webkit-border-radius:0px 0px 7px 7px;
  border-radius:0px 0px 7px 7px;
}
#fortune div.teller_top article.teller_wrap {
  background: none !important;
  position:relative;
  margin:2%;
  padding: 5% 35px 15px 35px;
  border:1px solid #b3b5b5;
  -moz-border-radius:7px;
  -webkit-border-radius:7px;
  border-radius:7px;
  z-index: 2;
}
#fortune div.teller_top article.teller_wrap div.teller_data{
  margin-top:20px;
  padding-top: 2px;
}
#fortune div.teller_top article.teller_wrap div.teller_data figure {
  float:left;
  width:35%;
  margin-right: 3%;
}
#fortune div.teller_top article.teller_wrap div.teller_data figure img {
  width:100%;
}
#fortune div.teller_top article.teller_wrap div.teller_data div.teller_data_prof {
  float: none;
  width: auto;
  margin-top: 0px;
  margin-bottom: 10px;
}
#fortune div.teller_top article.teller_wrap div.teller_data div.teller_data_prof h3 {
  font-size:1.6em;
  margin-bottom:10px;
}
#fortune div.teller_top p.description {
  width:auto;
  margin:0 auto;
  height:100px;
  padding:7px 3px 20px;
  display:inline;
  vertical-align:middle;
  line-height:145%;
}


#fortune div.teller_top p.genre {
  margin-bottom: 9px;
}


#fortune div.teller_top article.teller_wrap h3,#fortune div.teller_top article.teller_wrap p{
  font-family:"メイリオ",Meiryo,"ヒラギノ角ゴ Pro W3","Hiragino Kaku Gothic Pro",Osaka,"ＭＳ Ｐゴシック","MS PGothic",sans-serif !important;
  color:#564f4e;
}
#fortune div.teller_top div.btn a  {
  display:block;
  font-weight:bold;
  background:#fcd971; /* Old browsers */
  background:-moz-linear-gradient(top,  #feca5d 0%, #feca5d 100%); /* FF3.6+ */
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#fcd971), color-stop(100%,#feca5d)); /* Chrome,Safari4+ */
  background:-webkit-linear-gradient(top,  #fcd971 0%,#feca5d 100%); /* Chrome10+,Safari5.1+ */
  -webkit-border-radius:0.5em;
  -moz-border-radius:0.5em;
  border-radius:0.5em;
  border:1px solid #f5b64d;
  box-shadow:inset 0 1px 0 rgba(255,255,255, 0.8),
  inset 1px 0 0 rgba(255,255,255, 0.3),
  inset -1px 0 0 rgba(255,255,255, 0.3),
  inset 0 -1px 0 rgba(255,255,255, 0.2);
  width:80%;
  text-align:center;
  text-decoration:none;
  color:#824219;
  text-shadow:1px 1px 1px #ffdba5;
  height:49px;
  line-height:51px;
  font-size:1.4em;
  margin:0 auto;
}
/* --- flexslider -- */

.slides {
  z-index: 2;
}

.flex-viewport {
  z-index: 0;
}

.flex-control-nav {
  z-index: 999;
  bottom: -5%;
}
.flex-direction-nav .flex-prev {
    display: block;
    content: "";
    width: 12px;
    height: 12px;
    position: absolute;
    top: 50%;
    left: 14px;
    margin-top: -5px;
    border-left: 3px solid #454545;
    border-top: 3px solid #454545;
    transform: rotate(135deg);
    -webkit-transform: rotate(315deg);
    text-indent: -9999px !important;
}
.flex-direction-nav .flex-next {
    display: block;
    content: "";
    width: 12px;
    height: 12px;
    position: absolute;
    top: 50%;
    right: 14px;
    margin-top: -5px;
    border-left: 3px solid #454545;
    border-top: 3px solid #454545;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
    text-indent: -9999px !important;
}

.flexslider:hover .flex-direction-nav .flex-prev {
    opacity:0.7;
    left:2% !important;
}

.flexslider:hover .flex-direction-nav .flex-next {
    opacity:0.7;
    right:2% !important;
}

.flex-direction-nav a {
  height: 150px;
  margin: -75px 0 0;
  z-index: 999;
  opacity:1 !important;
}

#fortune {
  min-height: 990px;
  height: auto !important;
  height: 990px;
}

#fortune h1::after {
  background:url(../img/judge_caption.png) no-repeat;
}

#fortune div.teller_list {
  position:relative;
  border: 0px !important;
  -moz-border-radius:7px;
  -webkit-border-radius:7px;
  border-radius:7px;
  margin: 0px 2% 0% 2% !important;
  padding: 15px 0px 15px 0px;
  z-index:100;
}
#fortune div.teller_list div.teller_list_inner {
  margin-top:5%;
}
#fortune div.teller_list div.teller_list_inner hr {
  display:block;
  height:3px;
  border:0;
  border-top:3px solid #bfb9ba;
  margin-bottom:-3px;
  padding:0;
}
#fortune div.teller_list img, span.number img,
span.icon img{
  width:100%;
}

/* -- ▼ teller list Btn_design ▼ -- */
article.fortune_category ul,
article.teller_genre ul,
article.teller_ranking ul{
  display:table;
  width:100%;
  margin:0 auto;
  border-collapse:separate;
  border-spacing:5px 0;
}
article.fortune_category li,
article.teller_genre li,
article.teller_ranking li{
  display:table-cell;
  vertical-align:middle;
  padding-top:10px;
  -moz-box-sizing:border-box;
  -webkit-box-sizing:border-box;
  box-sizing:border-box;
  position:relative;
}
ul.tow_section li:first-child{
  width:35%;
}
ul.tow_section li:last-child a, ul.three_section li a{
  display:block;
  background:#ffffff;
  -moz-border-radius:9px;
  -webkit-border-radius:9px;
  border-radius:9px;
  border: 1px solid #CFCFCF;
  box-shadow:0px 3px 0px rgba(185, 185, 185, 1);
  width:100%;
  line-height:30px;
  min-height:58px;
  height:auto !important;
  height:58px;
  color:#564f4e;
  font-size:1.2em;
  font-weight:bold;
  text-align:center;
  letter-spacing:-0.08rem;
}

ul.three_section li{
  width:33.33%;
}
ul.three_section li a{
  min-height:70px;
  height:auto !important;
  height:70px;
}
article.teller_ranking ul.three_section li a{
  min-height:84px;
  height:auto !important;
  height:84px;
  line-height:0;
}

ul.tow_section li a:last-child::before,
ul.three_section li a::before{
  content:"";
  display:block;
  position:absolute;
  -moz-background-size:100% !important;
  -webkit-background-size:100% !important;
  background-size:100% !important;
}
article.fortune_category ul.tow_section li a:last-child::before{
  background:url(../img/love.png) no-repeat;
  left:10px;
  top:50%;
  margin-top:-26px;
  width:70px;
  height:70px;
}
article.fortune_category ul.three_section li:first-child a::before{
  background:url(../img/health.png) no-repeat;
}
article.fortune_category ul.three_section li:nth-child(2) a::before{
  background:url(../img/money.png) no-repeat;
}
article.fortune_category ul.three_section li:last-child a::before{
  background:url(../img/spiritual.png) no-repeat;
}
ul.three_section li a::before{
  left:50%;
  margin-left:-32px;
  top:50%;
  margin-top:-27px;
  width:70px;
  height:70px;
}
article.teller_genre ul.three_section li.upper:nth-child(2) a::before{
  background:url(../img/spiritual02.png) no-repeat;
}
article.teller_genre ul.three_section li.upper:last-child a::before{
  background:url(../img/horoscope.png) no-repeat;
}
article.teller_genre ul.three_section li.lower:nth-child(1) a::before{
  background:url(../img/trot.png) no-repeat;
}
article.teller_genre ul.three_section li.lower:nth-child(2) a::before{
  background:url(../img/palm.png) no-repeat;
}
article.teller_genre ul.three_section li.lower:last-child a::before{
  background:url(../img/special.png) no-repeat;
}

article.teller_ranking ul.three_section li a::before{
  content:"";
  display:block;
  position:absolute;
  -moz-background-size:100% !important;
  -webkit-background-size:100% !important;
  background-size:100% !important;
  left:50%;
  margin-left:-20px;
  top:50%;
  margin-top:-30px;
  width:37px;
  height:37px;
}
article.teller_ranking ul.three_section li.upper:nth-child(2) a::before{
  background:url(../img/rank01.png) no-repeat;
}
article.teller_ranking ul.three_section li.upper:last-child a::before{
  background:url(../img/rank02.png) no-repeat;
}
article.teller_ranking ul.three_section li.lower:nth-child(1) a::before{
  background:url(../img/rank03.png) no-repeat;
}
article.teller_ranking ul.three_section li.lower:nth-child(2) a::before{
  background:url(../img/rank04.png) no-repeat;
}
article.teller_ranking ul.three_section li.lower:last-child a::before{
  background:url(../img/rank05.png) no-repeat;
}

ul.tow_section li span.love{
  display:block;
  font-size:1.4em;
  font-weight:bold;
  margin:0px 0px 15px 35px;
  padding-top:25px;
  line-height:0;
}
ul.three_section li span.caption{
  display:block;
  font-weight:bold;
  padding:57px 1px 0px 1px;
  line-height:0;
}
article.teller_ranking ul.three_section li span.caption{
  /*padding-top:45px;*/
  line-height:1.3rem;
}
#fortune div.teller_list img.number_big{
  width:50px;
  position:absolute;
  right:0;
}
#fortune div.teller_list img.number{
  width:35px;
  position:absolute;
  right:0;
}

/*===========================
*home main fortune US
*system-01
===========================*/
#fortune div.teller_list_us {
  position:relative;
  border:1px solid #b3b5b5;
  -moz-border-radius:7px;
  -webkit-border-radius:7px;
  border-radius:7px;
  margin:20px 2% 10px 2%;
  padding:5% 5px 5% 5px;
  z-index:100;
}
/*===========================
*home
*system-01
===========================*/
#free_contents {
  border:1px solid #F0EFEC;
  -moz-border-radius:7px 7px 7px;
  -webkit-border-radius:7px 7px 7px;
  border-radius:7px 7px 7px;
}
span#free_contents_anchor {
  position:relative;
  display:block;
  top:0px;
  height:100px;
  margin-top:-100px;
}
#free_contents h1::after {
  background:url(../img/free_caption.png) no-repeat;
}
#free_contents ul li {
  border-bottom:1px solid #F0EFEC;
  position:relative;
  background:#f5f5f5; /* Old browsers */
  background:-moz-linear-gradient(top, #f5f5f5 0%, #f9f8f8 100%); /* FF3.6+ */
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#f9f8f8)); /* Chrome,Safari4+ */
  background:-webkit-linear-gradient(top, #f5f5f5 0%,#f9f8f8 100%); /* Chrome10+,Safari5.1+ */
}
#free_contents ul li:last-child{
  border-bottom:0px;
  -moz-border-radius:0px 0px 7px 7px;
  -webkit-border-radius:0px 0px 7px 7px;
  border-radius:0px 0px 7px 7px;
}
#free_contents ul li::after {
  content:"";
  display:block;
  position:absolute;
  left:7px;
  top:7px;
  width:76px;
  height:76px;
  -moz-background-size:64% !important;
  -webkit-background-size:64% !important;
  background-size:64% !important;
}
#free_contents ul li:nth-child(1)::after{
  background:url(../../members/sm/img/four_f.png) no-repeat;
}
#free_contents ul li:nth-child(2)::after{
  background:url(../../members/sm/img/name_f.png) no-repeat;
}
#free_contents ul li:last-child::after{
  background:url(../../members/sm/img/tarot_f.png) no-repeat;
}
div#footer_anchor{
  position:relative;
  top:-40px;

}

/*===========================
*home Domain Area
*system-01
===========================*/
#domain {
    background: #fff;
    border: 1px solid #F0EFEC;
    -moz-border-radius: 8px 8px 7px 7px;
    -webkit-border-radius: 8px 8px 7px 7px;
    border-radius: 8px 8px 7px 7px;
}
#domain h1::after {
    background: url(../img/caution_caption.png) no-repeat;
    background-position: center;
    top: -5px;
    left: 3px;
}
#domain h1 img.arrow{
  display:block;
  position:absolute;
  right:8px;
  top:10px;
  width:30px;
  height:25px;
}
#domain h1 span {
  display:block;
  font-size: .6em;
  margin-top:5px;
}
#domain ul li img {
  width:100%;
}
#domain p {
  display:block;
  position:relative;
  background:#f5f5f5; /* Old browsers */
  background:-moz-linear-gradient(top, #f5f5f5 0%, #f9f8f8 100%); /* FF3.6+ */
  background:-webkit-gradient(linear, left top, left bottom, color-stop(0%,#f5f5f5), color-stop(100%,#f9f8f8)); /* Chrome,Safari4+ */
  background:-webkit-linear-gradient(top, #f5f5f5 0%,#f9f8f8 100%); /* Chrome10+,Safari5.1+ */
  font-size:1.6em;
  font-weight:bold;
  border-bottom: 1px solid #F0EFEC;
  margin: 0;
}
#domain p::after {
    background: url(../../../members/sm/img/domain_icon.png) no-repeat;
    -moz-background-size: 74%;
    -webkit-background-size: 74%;
    background-size: 74%;
    content: "";
    display: block;
    position: absolute;
    left: 7px;
    top: 10px;
    width: 60px;
    height: 60px;
}
#domain p a {
  display:block;
  padding:22px 0px 22px 63px;
}
#domain ul li a {
  display:block;
}


/* -- home Only Design -- */
#domain a.toplink{color:#564f4e;}
#domain a.toplink:link{color:#564f4e;}
#domain a.toplink:visited {color:#564f4e;}
#domain a.toplink:active {color:#564f4e;}


/*===========================
*New arrival Mail box
*system-111
===========================*/
ul.mailbox_contents li {
  border-bottom:1px solid #F0EFEC;
  position:relative;
  height: 7.5em;
}

ul.mailbox_contents li {
  border-bottom:1px solid #F0EFEC;
  position:relative;
  height: 7.5em;
}


ul.mailbox_contents li a{
  display:block;
  min-height:78px;
  height:auto !important;
  line-height: 1.5em;
}
ul.mailbox_contents li a p.sender{
  width:50%;
  display:inline-block;
  font-weight:bold;
  text-align:left;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  -moz-text-overflow:ellipsis;
  -webkit-text-overflow:ellipsis;
}
ul.mailbox_contents li a div.subject{
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  margin:0px 5px 5px 0px;
  width:55px;
  line-height: 1.8em;
  text-align:center;
  display:inline-block;
}
ul.mailbox_contents li a time{
    position: absolute;
    right: 15px;
    bottom: 15px;
}
}
ul.mailbox_contents li a div.subject_area{
  margin-top:10px;
}
ul.mailbox_contents li a p.subject_stc{
  display:inline;
}
ol.pager_list{
  border-top:1px solid #ffffff;
  padding:0px 0px;
  text-align:center;
}
ol.pager_list li.pager_btn{
  list-style-type:none;
  display:inline-block;
  font-size:1.2em;
  margin: 10px 5px;
}
/* -- ▼ unselected design ▼ -- */
ol.pager_list li.pager_btn > a > p{
  display:inline-block;
  padding:5px 12px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
}
/* -- ▼ selected design ▼ -- */
ol.pager_list li.pager_btn >p{
  display:inline-block;
  padding:4px 10px;
  -webkit-border-radius:3px;
  -moz-border-radius:3px;
  border-radius:3px;
  font-weight:bold;
}
#arrival_mailbox {
    margin-bottom: 5%;
}
#arrival_mailbox h1::after {
  background:url(../img/newmail_caption.png) no-repeat;
}
#arrival_mailbox .mailbox_contents li a{
    padding: 15px 20px 15px 15px;
}

#arrival_mailbox li a div.subject {
    font-size: 13px;
}

#arrival_mailbox .pagenation {
    padding-top: 5%;
}

#arrival_mailbox ul.mailbox_contents {
    border-top: none;
    margin-top: 0;
}
aside#mail_save{
  margin: 5%;
}

aside#mail_save .sub_clr {
    padding-top: 0;
    line-height: 25px;
}
aside#mail_save .sub_clr {
    padding-top: 0;
    line-height: 25px;
}
aside#mail_save .sub_clr span{
    border: 2px solid;
    border-radius: 30px;
    padding: 0 3.5px;
    font-weight: bold;
    margin-right: 5px;
    font-size: 13px;
}
#domain_link {
  margin-top:-75px;
  padding-top:75px;
}

#domain h1 {
    padding: 7px 15px 6px 55px;
    font-size: 1.4rem;
    font-weight: bold;
    color: #fff;  
}


/*===========================
*Already read Mail box
*system-112
===========================*/
#read_mailbox {
    margin-bottom: 5%
}
#read_mailbox h1::after {
  background:url(../img/openmail_caption.png) no-repeat;
}

#read_mailbox ul.mailbox_contents {
    border-top: none;
    margin-top: 0;
}

#read_mailbox .mailbox_contents li a{
    padding: 15px 20px 15px 15px;
}

#read_mailbox li a div.subject {
    font-size: 13px;
}

#read_mailbox .pagenation {
    padding-top: 5%;
}
/*===========================
*Mail detail
*system-113
===========================*/
#read_mailbox article.mail_body{
  padding:15px 10px;
}
#read_mailbox h1.mail_detail::after {
  background:url(../img/readmail_caption.png) no-repeat;
}
article.mail_body div#mail_caption{
    padding: 15px 15px 0;
    position: relative;
}
article.mail_body div#mail_caption div.sender{
  padding: 3px 1px 1px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  margin:0px 5px 5px 0px;
  width:55px;
  background:#5b8c21;
  color:#ffffff;
  line-height: 1.8rem;
  text-align:center;
  display:inline-block;
}

div#mail_caption p.sender{

  padding: 0px !important;

}

div#mail_caption p.receiver{

  padding: 0px !important;
}

div#mail_caption p.date{
  display:inline;
}
div#mail_caption time{
    position: absolute;
    right: 15px;
    top: 15px;
}
div#mail_caption div.subject_area{
  min-height:45px;
  height:auto !important;
  height:45px;
}
div#mail_caption div.subject_area p.subject_stc{
  width:100%;
  font-weight:bold;
  line-height:1.5;
}
div#mail_caption div.subject_area a.responce_btn{
  display:block;
  padding:5px 7px;
  -moz-border-radius:7px;
  -webkit-border-radius:7px;
  border-radius:7px;
  font-size:1.4em;
  line-height: 1.4;
  width:83px;
  margin:5px 0px 10px auto;
}
div#mail_caption div.subject_area a.responce_btn img{
  width:20px;
  height:20px;
  padding-right:5px;
}
article.mail_txt{
    background: #ffffff;
    padding: 15px 15px;
    overflow: hidden;
    padding-top: 0;
}
article.mail_txt p {
}
#responce_form{
  border:1px solid #F0EFEC;
  -moz-border-radius:7px 7px 7px;
  -webkit-border-radius:7px 7px 7px;
  border-radius:7px 7px 7px;
}
#responce_form h1 {
  margin-bottom:15px;
}
#responce_form h1::after {
  background:url(../img/form_caption.png) no-repeat;
}
#responce_form a.btn_large{
  margin-bottom:-7px;
}
aside#teller_about{
  width:100%;
  margin:15px auto;
  padding:10px 0px;
}
#responce_link {
  margin-top:-75px;
  padding-top:75px;
}

#responce_form div.form_note {
  padding:2%;
}

/*===========================
*Teller_mailbox
*system-115
===========================*/
#teller_mailbox {
  -moz-border-radius:7px 7px 7px;
  -webkit-border-radius:7px 7px 7px;
  border-radius:7px 7px 7px;

}

#teller_mailbox ul.mailbox_contents li a time {
    top: unset;
    bottom: 15px;
}
#teller_mailbox h1::after {

}
#teller_mailbox p.point_leader{
  width:60%;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
  -moz-text-overflow:ellipsis;
  -webkit-text-overflow:ellipsis;
}
#teller_mailbox span.sender,
#teller_mailbox span.receiver{
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  margin:0px 10px 5px 0px;
  width:55px;
  color:#ffffff;
  text-align:center;
  display:inline-block;
  font-weight: initial;

}
.clipmail {
}
.clipmail_txt {
  color:#564f4e;
  vertical-align:middle;
}
.clipmail_img img{
  height:18px;
  vertical-align:midsdle;
}

#teller_mailbox {
  -moz-border-radius:7px 7px 7px;
  -webkit-border-radius:7px 7px 7px;
  border-radius:7px 7px 7px;

}

ul.mailbox_contents li.new::before {
    content: "\672A\8AAD";
    position: absolute;
    top: 15px;
    left: unset;
    right: 15px;
    font-weight: bold;
    border: none;
    color: #fff;
    border-radius: 20px;
    line-height: 1;
    font-size: 13px;
    padding: 2px 14px;
    background: #FD961D;
}
#teller_mailbox div#mail_caption{
  padding-bottom: 15px;
}

/*===========================
*Teller_mailbox
*system-115
*system-116
===========================*/
#teller_mailbox ul.mailbox_contents li a p,
article.mail_body div#mail_caption p.subject{

}


#teller_mailbox .pagenation {
    -webkit-box-pack: center;
    -ms-flex-pack: center;
    justify-content: center;
    /*padding-top: 10%;*/
}

/*===========================
*Teller_mailbox
*system-116
===========================*/
#teller_mailbox article.mail_body{
  background:#ffffff;
  -moz-border-radius:7px 7px 7px;
  -webkit-border-radius:7px 7px 7px;
  border-radius:7px 7px 7px;

}



#teller_mail h1::after {
  background:url(../img/readmail_caption.png) no-repeat;
}
#teller_mailbox article.mail_body div#mail_caption p.subject{
    font-size: 1.2em;
}

article.mail_body div#mail_caption span.receiver {
    border: 1px solid #C9C6C0;
    color: #454545 !important;
}

#teller_mailbox div#mail_caption time{
  margin: 5px 0px 5px 0px;
}
#teller_mailbox div#mail_caption span{
  padding: 1px;
  -moz-border-radius:3px;
  -webkit-border-radius:3px;
  border-radius:3px;
  margin:0px 5px 5px 0px;
  width:55px;
  color:#ffffff;
  line-height: 1.8em;
  text-align:center;
  display:inline-block;

}
#teller_mailbox div.mail_img {
  margin-top:10px;
}

#teller_mailbox article.mail_txt {
  border-top: 1px solid #F0EFEC;
  padding-top: 15px !important;
}



/*===========================
*Fortune teller list(genre)
*system-011 *system-012
*system-013 *system-014
*system-015 *system-051
*system-052 *system-053
*system-054 *system-101
===========================*/

h1.fortune_cap {

}

ul.tellerlist_contents {
  width: 100%;
  margin-top: 5%;
}

@media screen and (min-width: 481px) { 
ul.tellerlist_contents {

}
}

ul.tellerlist_contents li {
  width: 50%;
  display: inline-block;
  list-style-type: none;
  box-sizing: border-box;
  float: left;
  margin-bottom: 5%;
}

ul.tellerlist_contents li{
  width: 50%;
  display: inline-block;
  list-style-type: none;
  box-sizing: border-box;
  float: left;
  margin-bottom: 5%;
}

ul.tellerlist_contents li:nth-child(odd) figure{
  margin-right: 0;
}
ul.tellerlist_contents li:nth-child(even) figure{
  margin-left: 0;
}

ul.tellerlist_contents li a {

}

ul.tellerlist_contents li figure{
  margin: 5px 10px 0;
  text-align: center;
}

ul.tellerlist_contents li p{
  text-align: center;
  vertical-align:middle;
  line-height:1.5;
  margin: 0 auto;
  font-size: 14px;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
}

ul.tellerlist_contents .teller_f{
    height: 4em;
    overflow: hidden;
    font-weight: bold;
    width: 82%;
}

ul.tellerlist_contents li figure img{
  border-radius: 50%;
  width: 150px;
  height: 150px;
  object-fit: cover;
}

#container .clear {

    clear:both;　/*floatの解除*/
}

#container .more {
    padding: 10px 0;
    border-radius: 5px;
    line-height: 1em;
    margin: 0 auto;
    display: block;
    font-weight: bold;
}


/*===========================
*Fortune teller list(genre)
*system-051 *system-052
*system-053 *system-054
*system-101
===========================*/
#fortune_genre article{
    margin-top: 8%;
}
#fortune_genre div.formbg_center{
  background:url(../img/formBg_center.jpg) repeat-y;
  -webkit-background-size:100% auto;
  -moz-background-size:100% auto;
  background-size:100% auto;
}
#fortune_genre  h2 {
  font-weight:unset;
  line-height:1.5;
  text-align:center;
  padding: 0;
  /*font-family: "Times New Roman", "游明朝", YuMincho, "Hiragino Mincho ProN", Meiryo, serif;*/
}

h2.category{
  color: #454545;
}
.ranking {
  color:#8d8d8d;
  font-weight:bold;
}
ul li:nth-child(1) .ranking{
  color:#eabc02;
}
ul li:nth-child(2) .ranking{
  color:#90a9c1;
}
ul li:nth-child(3) .ranking{
  color:#c67a3d;
}

ul.tellerlist_contents #rank_t{
  width: 100%;
  display: block;
  list-style-type: none;
  box-sizing: border-box;
  float: none;
  background: #f3f3f3;
  border: 1px solid #fff;
  padding-bottom: 10px;

}
ul.tellerlist_contents #rank_t:first-child{
  width: 100%;
  display: block;
  list-style-type: none;
  box-sizing: border-box;
  float: none;
  background: #f3f3f3;
  border: 1px solid #fff;
  padding-bottom: 10px;

}

#tellerlist_rank{

  margin-bottom: 0;

}

/*===========================
*Teller profile
*system-107
===========================*/

#teller_profile h1.cap {
    font-size: 1.3em;
    font-weight: bold;
    padding-left: 5%;
    padding-top: 5%;
    line-height: 1;
    padding-bottom: 0;
    line-height: 1.4em;
}

#teller_profile h1 span.name{
  display:table-cell;
  vertical-align:middle;
  line-height: 1.3;
}
#teller_profile h1 span.genre {
  font-weight:bold;
  text-align:left;
  font-family: "Times New Roman", "游明朝", YuMincho, "Hiragino Mincho ProN", Meiryo, serif;
}
#teller_profile h1 span.ribbon {
  display:table-cell;
  width:85px;
  padding-left:5px;
}
#teller_profile h1 span.ribbon img{
  width:76px;
  height:62px;
}

#teller_profile .teller_prof {
    font-weight: bold;
    padding-bottom: 0 !important;
}
#teller_profile article.profile_body p{
  padding: 5%;

}
#teller_profile div.description{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  padding: 0 5% 10%;
  border-bottom: 2px solid #eae8e3;
}
#teller_profile div.description figure {
    width: 50%;
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    padding-right: 5%;

}
#teller_profile div.description figure img {
    border-radius: 150px;
    width: 150px;
    height: 150px;
    object-fit: cover;
}

#teller_profile div.description_text {
  width: 50%;
}
#teller_profile div.description_text span{
  display: block;
  font-weight: bold;
}
#teller_profile div.description_text .genre{
    font-size: 13px;
    margin-bottom: 5px;
    background: #FFFAEA;
    padding: 5px;
    width: 101px;
    text-align: center;
}
#teller_profile div.description_text .name{
    font-size: 1.3em;
    line-height: 1.3em;
}


#consultation_form .icon-type{
  padding: 20px;
  margin-left: 0;
}
#consultation_form form {
  position: relative;
  margin: 0 5% 0;
}
#consultation_form .count_wrap {


}
#consultation_form h1.cap {
    font-size: 1.3em;
    font-weight: bold;
    padding-left: 5%;
    padding-top: 5%;
    line-height: 1.4em;
    padding-bottom: 0;
}
#consultation_form h1::after {
  background:url(../img/form_caption.png) no-repeat;
}
span#consultation_form_anchor{
  position:relative;
  top:-60px;
  display:block;
}

#consultation_form .fsz_free{
  font-size: 1.5em;
}

#consultation_form textarea.form_area{
  margin: 5px auto 15px;
}

.teller_prof {
  padding: 0 5% !important;
}
.teller_prof li{
    width: 100% !important;
}
/*===========================
*Teller Consult Form Confirmation(2)
*system-118
===========================*/
div.rewrite_area {

}
div.rewrite_area button {

}

/*===========================
*Completion of Registration
*system-301
===========================*/
body.reg div#container {
  margin-top:15px;
}
body.reg div#container_inner {
  margin-bottom:15px;
  padding:0 5%;
}
body.reg div.formbg_center {
  width:100%;
  height: auto;
  margin:0px;
  padding-bottom:15px;
  padding-top: 3em;
}
body.reg div.formbg_center div.wrap {
  padding:0 5%;
}
body.reg h1, body.reg p{
  text-align:center;
}
body.reg h1 {
  font-size:1.8em;
  background-image: none;
  color: #564f4e;
}
body.reg a.sub_forward {

}
body.reg small {


}

body.reg article{
  background: #fff;
  border-radius: 5px;  
  margin-top: 2em;
  position: relative;
}

body.reg article img{
    position: absolute;
    top: -4em;
    left: 0;
    right: 0;
    width: 60%;
    margin: 0 auto;
    max-width: 230px;
}

body.reg article h3 {
    text-align: center;
    position: relative;
    margin: 10% 0 7%;
    font-size: 18px;
}

body.reg article h3 span {
    background: linear-gradient(transparent 60%, #F8F5AC 60%);
}

body.reg article .note {
    text-align: left;
    margin-bottom: 5%;
}
/*===========================
*Favorite Teller List
*system-102
===========================*/

#favorite_tellerbox .tellerlist_contents {
  margin-top: 0;
}

#favorite_tellerbox ul.tellerlist_contents li {
  margin-bottom: 0;
  border-bottom: #F8F7F4 solid 4px;

}

#favorite_tellerbox ul.tellerlist_contents li:nth-child(odd){
    border-right: #F8F7F4 solid 2px;
}

#favorite_tellerbox ul.tellerlist_contents li:nth-child(even){
    border-left: #F8F7F4 solid 2px;
}


#favorite_tellerbox ul.tellerlist_contents li a{

}

#favorite_tellerbox ul.tellerlist_contents li .btn_prof_teller{
  font-weight: bold;
  font-size: 15px;
}

#favorite_tellerbox ul.tellerlist_contents li .tellerlist_text {
  height: 4.5em;
  position: relative;
}

#favorite_tellerbox ul.tellerlist_contents li p {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
  -webkit- transform: translateY(-50%) translateX(-50%);
  display: block;
  width: 85%;
}
#favorite_tellerbox ul.tellerlist_contents li p b{
    display: block;
    text-align: center;
    line-height: 1.2em
}


#favorite_tellerbox ul.tellerlist_contents li p span{
  font-size: 12px;
}


#favorite_tellerbox ul.tellerlist_contents li figure{
    margin: 15px 15px 0;
}

.tellerlist_btn_area{
  display:-webkit-box;
  display:-ms-flexbox;
  display:flex;
  vertical-align: middle;
  padding: 0 15px 15px;
}

.tellerlist_btn_area .btn_delete {
  background: none;
  font-size: 25px;
  padding: 0 0 0 10px;
  color: #a5a29b;
  border: none;
}


/*===========================
*Favorite Teller
*system-103
===========================*/
div.favo_teller{
    display:-webkit-box;
    display:-ms-flexbox;
    display:flex;
    margin-bottom: 8%;
    margin-top: 8%;
}
div.favo_teller figure{
    width: 35%;
    text-align: center;
}
div.favo_teller p{
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    line-height:1.5;
    width: 65%;
    padding-left: 5px;
}
div.favo_teller figure img{
    border-radius: 100px;
    width: 100px;
    height: 100px;
    object-fit: cover;
}


/*===========================
*with photo
*system-134
===========================*/

div.address_area {
    background: #F8F7F4;
    width: 100%;
    border-radius: 5px;
    font-weight: bold;
    letter-spacing: 0.1em;
    font-size: 13px;
    padding: 0 5%;
    margin: 5% 0;
    box-shadow: 0 2px 4px 2px rgb(159 159 159 / 12%);
    text-align: left;
}

div.address_area a.btn_normal, .btn_normal{
    line-height: 1.2em;
}


/*===========================
*Favorite Teller add
*Favorite Teller delete
*system-104
*system-106
===========================*/
#favorite_tellerbox h1{

}
#favorite_tellerbox h1::after {
line-height: 1.5;
font-size: 2em;
}


#favorite_tellerbox h3{
    font-size: 1.4em;
    line-height: 1.5em;

}

#favorite_tellerbox .btn_normal{
    color: #fff;
    box-shadow: none;
}


/*===========================
*Favorite Teller add
*Favorite Teller delete
*Point presents
*system-104
*system-106
*system-414
===========================*/
div.finish_wrap {
  padding:0px 2% 15px;
}

/*===========================
*Limited Picture
*system-120
===========================*/
.limit_pic_path {
  text-align:center;
  margin:0 auto;
  margin-bottom: 5%;
  margin-top: 5%;
}

/*===========================
*News Box
*system-125
*system-126
===========================*/

#newsbox .newsbox_contents {
     margin: 0 5%;
}

#newsbox #error_form {
  margin-left: 5%;

}

#newsbox #topics  {
  padding: 0;
}

#newsbox #topics a {
}

#newsbox .news_type_01,
#newsbox .news_type_02 {
  border-radius: 20px;
  margin: 0px 5px 5px 0px;
  padding: 0 10px;
  text-align: center;
  display: inline-block;
  font-weight: bold;
}

#newsbox .news_type_01 {
    background: #FF5233;
    color: #FFF;
}
#newsbox .news_type_02 {
  background: #eda01b;
  color: #ffffff;
}

#newsbox .date {
  float: right;
}

#newsbox .news_title p {
  margin-top: 10px;
  font-weight: bold;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

#newsbox .topics_title {
    color: #564f4e;
}

#newsbox .newsbox_contents li {
  border-bottom: 1px solid #F0EFEC;
  position: relative;
}

#newsbox .newsbox_contents .cf{
  display: flex;
  justify-content: space-between;
  font-size: .9em;
  margin-bottom: 0.35em;
}
#newsbox .newsbox_contents .cf:after{
  display: none;
}
#newsbox_contents .newsbox_navi {
  position: relative;
}
#newsbox_contents .newsbox_navi:after {
    content: "";
    width: 8px;
    height: 8px;
    position: absolute;
    top: 50%;
    right: 0;
    margin-top: -5px;
    border-left: 2px solid #403D3D;
    border-top: 2px solid #403D3D;
    transform: rotate(135deg);
    -webkit-transform: rotate(135deg);
}

#newsbox .newsbox_contents li a {
    display: block;
    padding: 5% 8% 5% 0;
    min-height: 78px;
    height: auto !important;
    margin: 0;
    padding-left: 18%;
}

#newsbox .newsbox_contents li.is-campaign a:before { 
  content: "";
  position: absolute;
  left: 0;
  top: 53%;
  transform: translate(0, -50%);
  width: 17%;
  padding-top: 17%;
  background: url(/m999/img/new_2024/img/index/campaign_img.png) no-repeat;
  background-size: 90%;
  background-position: center left;
}

#newsbox .newsbox_contents li.is-news a:before { 
  content: "";
  position: absolute;
  left: 0;
  top: 53%;
  transform: translate(0, -50%);
  width: 17%;
  padding-top: 17%;
  background: url(/m999/img/new_2024/img/index/support_img.png) no-repeat;
  background-size: 90%;
  background-position: center left;
}

#newsbox .newsbox_contents li.is-campaign .news_type:before {
  display: inline-block;
  content: "キャンペーン"; 
  font-weight: 600;
  color: #d23226;
}

#newsbox .newsbox_contents li.is-news .news_type:before {
  display: inline-block;
  content: "ニュース"; 
  font-weight: 600;
  color: #eda01b;
}

#newsbox .newsbox_contents li.is-news a:before { 
  position: absolute;
  left: 0;
  top: 53%;
  transform: translate(0, -50%);
  width: 17%;
  padding-top: 17%;
  background: url(/m999/img/new_2024/img/index/support_img.png) no-repeat;
  background-size: 90%;
  background-position: center left;
}

#newsbox .newsbox_contents .newsbox_navi {
  position: relative;
}

#read_newsbox {

}

#read_newsbox article.news_body {

}

article.news_body div#news_caption {
  height: auto !important;
  height: 65px;
 /* border-bottom: 1px solid #F0EFEC;*/
  padding: 5% 0;
}

div#news_caption div.subject_area p.subject_stc {
  font-size: 1.3em;
  line-height: 1.5;
}

div#news_caption time {
    display: block;
    float: left;
    font-size: .9em;
    margin-bottom: 1em;
}
div#news_caption .cf {

}

article.news_txt {
  background: #FFF;
  padding: 5% 0;
  overflow: hidden;
}


.news_btn a {
    height: 51px;
    line-height: 51px;
    background: -moz-linear-gradient(top, #BEBEBE 0%, #A5A5A5 100%);
    border: 1px solid #C9C6C0;
    position: relative;
    margin-bottom: 5%;
    font-size: 1em;
}
/*===========================
*Point presents
*system-414
===========================*/
h1.point_present_cap {
  text-align:center;
  padding:15px;
}
/* ::::::  プレゼントポイント受領画面のh1用 :::::: */
#point_present h1{
  color: #fff;
  font-weight: bold;
  line-height: 1.3;
  padding: 6px 0;
  font-size: 2em;
  text-align: center;
  position: relative;
}


#point_present h1:after{
  content:'';
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0.1;
}

/*===========================
*Customer Review
*description-30
===========================*/
#container section.review_box {
  border-bottom:none;
  background:transparent;
}
#container .review_box h1.cap {
  padding:10px 0;
  margin-top:0px;
  margin-bottom:15px;
  border-radius:0px;
  font-size:1.8em;
  font-weight:bold;
  text-align:center;
  position:relative;
  line-height:125%;
}
#teller_profile .review_ribbon {
  position:absolute;
  top:0%;
  left:2%;
  width:76px;
  height:62px;
}
article.review_body {
  margin: 15px 0;
}
article.review_body h2 {
  padding:0;
  text-align: center;
  font-weight:normal;
  line-height:1.4;
  letter-spacing:0.03rem;
  position:relative;
  padding:10px;
  color:#FFFFFF;
  border-radius: 5px;
}
article.review_body h2:after{
    border: solid transparent;
    content:'';
    height:0;
    width:0;
    pointer-events:none;
    position:absolute;
    border-color: rgba(106, 90, 205, 0);
    border-top-width:10px;
    border-bottom-width:10px;
    border-left-width:10px;
    border-right-width:10px;
    margin-left: -10px;
    top:100%;
    left:50%;
}
.review_icon {
  position:absolute;
  bottom:0;
  left:0;
  width:80px;
  height:63px;
}
.review_area {
    background-image: url(../img/common/bluedash_g.png);
    margin: 0 auto;
    line-height: 40px;
    font-size: 14px;
    margin-bottom: 10%;
}
.review_area span {
    background: linear-gradient(transparent 60%, #F8F5AC 60%);
}
@media screen and (max-width: 320px) {
  .review_body h2 span.device_style:before{
    content: "\A";
    white-space: pre;
  }
}

/*===========================
*Anjel
*description-50
===========================*/
#angel {
  padding: 10px 2%;
  -webkit-box-shadow: 1px 1px 3px #cfcfcf;
  -moz-box-shadow: 1px 1px 3px #cfcfcf;
  box-shadow: 1px 1px 3px #cfcfcf;
}

#angel h2.angel_caption {
margin-bottom: 5px;
padding: 5px 0px 5px 10px;
border-left: 5px solid #A18C9E;
font-size: 1.6em;
}

#angel article {
  margin-top: 20px;
  padding: 0px 20px 20px;
}

#angel figure {
  margin-bottom: 20px;
}

#angel figure img {
  width: 100%;
}

/*===========================
*Pickup Teller Interview
*description-150
===========================*/
#teller_interview {
  -webkit-box-shadow:1px 1px 3px #cfcfcf;
  -moz-box-shadow:1px 1px 3px #cfcfcf;
  box-shadow:1px 1px 3px #cfcfcf;
}
#teller_interview .summary {
  margin-bottom:15px;
}
#teller_interview h1{
  padding:25px 15px 10px 40px;
  width:56%;
  margin:25px 0px 15px 2%;
  font-size:1.8em;
  font-weight:bold;
  letter-spacing:0.03rem;
  position:relative;
}
#teller_interview h1::after , #teller_interview h2::after {
  content:"";
  display:block;
  position:absolute;
  left:0px;
  top:15px;
  width:55px;
  height:55px;
  -moz-background-size:66% !important;
  -webkit-background-size:66% !important;
  background-size:66% !important;
}
div.outline_wrap {
  padding:0px 2% 15px;
}
#teller_interview article.teller_area {
  -webkit-border-radius:0.7em;
  -moz-border-radius:0.7em;
  border-radius:0.7em;
  padding:10px;
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
}
#teller_interview article.teller_area figure {
  float:left;
  width:35%;
}
#teller_interview article.teller_area figure img {
  width:100%;
}
#teller_interview article.teller_area div.teller_data_prof {
  float:right;
  width:60%;
  margin-top:5%;
}
#teller_interview article.teller_area div.teller_data_prof h3 {
  font-size:1.6em;
  margin-bottom:10px;
}
#teller_interview article.teller_area p.description {
  width:100%;
  margin:0 auto;
  height:100px;
  padding:7px 3px;
  display:table-cell;
  vertical-align:middle;
  line-height:145%;
}
/*  ▼ botton ▼ */
a.interview, .interview{
  position:relative;
}

#teller_interview article.interview_area h2.first_cap,
#teller_interview article.interview_area h2.last_cap{
  padding:7px 15px 7px 55px;
  font-size:1.6em;
  font-weight:bold;
  -webkit-border-radius:6px 6px 0px 0px;
  -moz-border-radius:6px 6px 0px 0px;
  border-radius:6px 6px 0px 0px;
  letter-spacing:0.03rem;
  position:relative;
  margin:10px 0px 15px;
}
#teller_interview article.interview_area h2.last_cap{
  padding:15px 15px 15px 55px;
}
#teller_interview article.interview_area h2.first_cap::after {
  top:8px;
  left:8px;
  background:url(../img/interview_caption.png) no-repeat;
}
#teller_interview article.interview_area h2.last_cap::after {
  top:5px;
  left:8px;
  background:url(../img/interview2_caption.png) no-repeat;
}
#teller_interview article.interview_area h2.first_cap span {
  display:block;
  font-size:1.6em;
  margin-top:5px;
}
#teller_interview article.interview_area h3{
  margin:0 0 15px 0;
  font-size:1.6em;
  line-height:145%;
  padding:5px 8px;
}
#teller_interview p.interviewer{
  margin-bottom:25px;
}
#teller_interview p.interviewee{
  margin-bottom:25px;
}
#teller_interview p.interviewee span{
  font-weight:bold;
}


/*===========================
new_domain
===========================*/

#new_domain img{
  margin-bottom: 5px;

}

#new_domain ul{
  margin-bottom: 5%;

}
#new_domain p{
  margin-bottom: 10px;

}

#new_domain #career {
}

#new_domain #career .wrap {
  padding: 0;
}

/*===========================
*Free Fortune genre
*shichu suimei
*tarot
*seimei handan
===========================*/

.fortune_bg {
}
.fortune_bg #ranking {
  margin-bottom: 10%;
  margin-top: 5%;
}

.fortune_bg #ranking ul {
  padding-top: 0;

}

.fortune_bg #ranking>ul li a>span {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.fortune_bg #ranking li a {
    margin: 0 10px;
    padding: 0;
    display: block;
}

.fortune_bg #ranking>ul li a>span img {

}

.fortune_bg .no_color {
    background: none;
}



.fortune_bg #ranking h1{
    padding-top: 0;
    padding-left: 5%;
}


#free_fortune{

}

#free_fortune p{

}

#free_fortune h1.fortune_cap {
    text-align: center;
    display: block;
    font-size: 38px;
    color: #000;
    font-family: serif;
    letter-spacing: .05em;
}

#free_fortune h1.fortune_cap span{
  font-size: 15px;
  display: block;
  margin-top: 10px;
}

h2.fortune_cap , h3.fortune_cap{
    margin-bottom: 0;
    font-weight: unset;
    margin-top: 5px;
    color: #000;
}
h2.fortune_cap, h3.fortune_cap {
    margin-bottom: 0;
    font-weight: unset;
    margin-top: 5px;
    color: #000;
    text-align: center;
    padding: 0;
    margin-top: 1em;
    font-size: 1.1em;
}

#free_fortune .select_design {
    width: 50%;
}

#free_fortune .select_box {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;   
    -ms-justify-content: center;
    justify-content: center;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;

}

#free_fortune  input.btn_normal {
    margin-top: 10%;
    box-shadow: none;
    border: none;
    color: #fff;
    height: 51px;
}
#free_fortune .result {
    margin: 0 auto;
    text-align: center;
    font-size: 1em;
    color: #fff;
    width: 30%;
    padding: 0.2em;
}


#free_fortune .result_text {
    box-shadow: 0 0 3px 3px rgb(159 159 159 / 10%);
    margin: 5% 0 0;
    padding: 5%;
    background: #fff;
}


/*===========================
*Free Fortune genre (1)
*shichu suimei
===========================*/

.suimei_bg {
  background: url(../img/common/fortune_bg.png) no-repeat;
  background-size: 100%;

}

#free_fortune .suimei{
    margin: 5% 0;
}
.suimei .select_box{
  position: unset;
}

#free_fortune .suimei span{
    margin-bottom: 1em;
    display: block;
}
#free_fortune .select_design_short {
    margin: 0 1%;
    padding: 1em;
    border: #fff;
    background: #F5F5F5;
    border-radius: 0px;
    display: block;
}


#free_fortune .select_design_short .select_box::before {
  border-bottom: 4.5px solid #454545;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  content: "";
  position: absolute;
  right: 15px;
  top: 17px;
  width: 0;
}
#free_fortune .select_design_short .select_box::after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4.5px solid #454545;
  content: "";
  position: absolute;
  right: 15px;
  top: 26px;
  width: 0;
}

.suimei .select_box::before {
  display: none;
}
.suimei .select_box::after {
  display: none;
}
/*===========================
*Free Fortune genre (2)
*tarot
===========================*/

.tarot_bg {
  background: url(../img/common/fortune_bg3.png) no-repeat;
  background-size: 100%;

}


#free_fortune .tarot{
    margin: 5% 0;

}


#free_fortune .tarot span{
    margin-bottom: 1em;
    display: block;
}


#free_fortune .tarot2 {
  font-size: .9em;
}

div.result_card{
  width:40%;
  margin:0 auto 15px;
  text-align:center;
}


/*===========================
*Free Fortune genre (3)
*seimei handan
===========================*/

.name_bg {
  background: url(../img/common/fortune_bg2.png) no-repeat;
  background-size: 100%;

}


#free_fortune .name {
    margin: 5% 0;
    font-size: .9em;

}

#free_fortune .name2 {
  margin: 10px;

}

#free_fortune .name .select_design {
  margin-left: 3%;
  font-size: 1em;
}

#free_fortune .name input{
  margin-bottom: 0;
}


#free_fortune .name_cap{
    text-align: left;
    font-size: .9em;
}


input.form_field{
  -webkit-box-sizing:border-box;
  -moz-box-sizing:border-box;
  box-sizing:border-box;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  font-size:1em;
  -webkit-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
  -moz-box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
  box-shadow: rgba(255,255,255,0.4) 0 1px 0, inset rgba(000,000,000,0.7) 0 0px 0px;
  line-height:1;/* huck */
  padding:7px 6px 6px;/* huck */
  display:inline-block;
}

input.form_field {
    border: none;
    background: #F5F5F5;
    padding: 1.5em 10px;
    margin: 0;
    margin-bottom: 20px;
}
input.form_field:focus {
  background: #F5F5F5;
  color:#564f4e;
}


/*===========================
  　ブログページ
===========================*/

#fortune_blog {

}

#fortune_blog .blog_list a{
  border-bottom: solid 1px #F0EFEC;
  position: relative;
    display: flex;
    display: -webkit-box;
    display: -ms-flexbox;
    -webkit-justify-content: center;
    -ms-justify-content: center;
    justify-content: center;
    align-items: center;
    -webkit-box-align: center;
    -ms-flex-align: center;
    padding: 5%;
}

#fortune_blog .blog_img{
    width: 30%;
    margin-right: 5%;
}

#fortune_blog .blog_img img{
  border-radius: 10px;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    height: 100px;
    width: 100%;
    object-fit: cover;
}

#fortune_blog .blog_main{

  width: 65%;
  line-height: 1.3em;

}

#fortune_blog .blog_day{

}

#fortune_blog .blog_txt {
    margin-right: 0;
    margin-top: 0;
    line-height: 1.3em;
    word-break: break-all;

}




#fortune_blog .blog_btn a {
    width: 40%;
    text-align: center;
    padding: 3% 0;
    color: #fff;
    font-size: 1.5em;
    margin-left: 10px;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    font-weight: bold;
    position: absolute;
    bottom: 12%;
    display: block;
}

#fortune_blog .clear {
  clear:both;
}


#fortune_blog2 {

}

#fortune_blog2 .blog_title {
    line-height: 1.5;
    border-bottom: solid 1px #F0EFEC;
    padding: 5%;
}

#fortune_blog2 .blog_day{
    margin: 0;
    margin-bottom: 1%;
}

#fortune_blog2 .blog_txt{
margin: 0;
line-height: 1.5em;
word-break: break-all;
font-weight: bold;
font-size: 1.1em;
}

#fortune_blog2 .blog {
  padding: 5%;
  line-height: 1.8em;
}

#fortune_blog2 .blog_img{
    margin: 5% 0;
}

#fortune_blog2 .blog_img img{
    width: 100%;
    border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
}

#fortune_blog2 .main_txt{
    margin: 0;
}

#fortune_blog2 .blog_btn a{
    width: 80%;
    margin: 0 auto;
    text-align: center;
    padding: 8% 0;
    background: #888888;
    color: #fff;
    margin: 10% auto;
    border-radius: 3px;
    -webkit-border-radius: 3px;
    -moz-border-radius: 3px;
    font-weight: bold;
}


#fortune_blog2 .blog_btn a{
  color: #fff !important;
}

#fortune_blog .pagenation{
  padding-bottom: 5%;
  margin-top: 10%;
}

/*=================================================
退会　説明40,41
=================================================*/

#free_point #free .wrap {
  padding: 0;

}

/*=================================================
配信停止・退会手続き（メール配信用）　説明63 
=================================================*/

 .btn_taikai {
    padding: 1em 1em 1em 2.8em;
    line-height: 1.5em !important;
    text-align: left !important;
    justify-content: left !important;
}
 .btn_taikai small{
     font-size: .9em;
}
 .btn_taikai strong{
     display: block;
}

.btn_taikai {
      margin: 0 5% 10px !important;
}
/*=================================================
select.select_design
=================================================*/

select.select_design {
    width: 100%;
    padding: 15px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background: #F5F5F5;
    border-radius: 0px;
}
/*=================================================
PC
=================================================*/
@media only screen and (min-width: 750px) {
  
#campaign li a {
    width: 100%;
}
#campaign li span {
    width: 100%;
}
#teller_profile div.description figure img {
    border-radius: 50%;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
}
/*=================================================
UNDER 320 DEVICE
=================================================*/
@media only screen and (max-width: 320px) {

#archive>ul li.new h2::before {
    top: 2px;
    right: 74px;
    font-size: 11px;
    padding: 2px 9px;
}
#user .inner .prof {
    width: 55%;
}
.typeGenre ul li a p {
    font-size: .8em;
}

#career .wrap a {
    font-size: 13px;
}
#fortune_blog .blog_main{

  font-size: 1em;

}

#fortune_blog .blog_img img{

　　 border-radius: 5px;
    -webkit-border-radius: 5px;
    -moz-border-radius: 5px;
    height: 120px;
    width: 100%;
    object-fit: cover;
}

#teller_profile div.description figure img {
    border-radius: 130px;
    width: 130px;
    height: 130px;

}
ul.tellerlist_contents li figure img{
    width: 130px;
    height: 130px;
}
#favorite_tellerbox ul.tellerlist_contents li p b {
    font-size: .88em;
}
}

/*=================================================
Auto Campaign
system-171
=================================================*/

.auto_campaign {
  color: #000;
}

.auto_campaign_top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 5%;
  padding: 14px 0 18px;
}

.auto_campaign_top h4 {
  font-size: 1em;
  font-weight: 400;
  line-height: 1.3;
  color: #ffa41d;
  text-align: center;
}

.auto_campaign_top h4 small {
  font-size: 0.875em;
}

.auto_campaign_top p {
  font-size: 1.8em;
  font-weight: 700;
  line-height: 1.6;
  color: #ffa41d;
}

.auto_campaign_list {
  display: flex;
  flex-direction: column;
  gap: 20px;
  margin-top: 5%;
}

.auto_campaign_box {
  border: 1px solid #c9c6c0;
  border-radius: 6px;
}

.auto_campaign_ttl {
  padding: 16px 2%;
  font-size: 1em;
  line-height: 1.4;
  text-align: center;
  border-bottom: 1px solid #c9c6c0;
}

.auto_campaign_dl {
  padding: 16px 2%;
  line-height: 1.4;
  text-align: center;
  padding: 0;
  border-bottom: 1px solid #c9c6c0;
}

.auto_campaign_dl dt {
  position: relative;
}

.auto_campaign_dl dt:before {
  display: block;
  padding: 16px 2%;
  content: "キャンペーン詳細はこちら";
  font-size: 1em;
  line-height: 1.4;
}

.auto_campaign_dl dt.is-active:before {
  content: "キャンペーン詳細を折りたたむ";
}

.auto_campaign_dl dt i {
  position: absolute;
  right: 5%;
  top: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 28px;
  border: 1px solid #c9c6c0;
  transform: translate(0,-50%);
}

.auto_campaign_dl dt i:after {
  content: "";
  width: 8px;
  height: 8px;
  border-left: 2px solid #C9C6C0;
  border-top: 2px solid #C9C6C0;
  margin-top: -4px;
  transform: rotate(225deg);
  transform-origin: center;
}

.auto_campaign_dl dt.is-active i:after {
  margin-top: 2px;
  transform: rotate(45deg);
}

.auto_campaign_dl dd {
  display: none;
  padding: 16px 5%;
  text-align: left;
  line-height: 1.8;
  font-size: 1em;
  background: #f8f7f4;
  border-top: 1px solid #c9c6c0;
}

.auto_campaign_btm {
  padding: 16px 4%;
}

.auto_campaign_btm .btn_base {
  padding: 2px 0;
  font-size: 1em;
  color: #000;
}

.auto_campaign_status {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  margin-bottom: 4%;
  gap: 3%;
}

.auto_campaign_status i {
  padding: 0.2% 4%;
  border-radius: 20px;
  font-size: 0.875em;
  line-height: 1.4;
  color: #fff;
  background: #ffa134;
}

.auto_campaign_status i.disabled {
  background: #c9c6c0;
}

.auto_campaign_status span {
  font-weight: 700;
}

.auto_campaign_link {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 8%;
  font-size: 1em;
}

.auto_campaign_link li {
  border: 1px solid #c9c6c0;
  border-radius: 6px;
}

.auto_campaign_link li a {
  position: relative;
  display: block;
  padding: 20px 5%;
  text-align: left;
  font-size: 1em;
  font-weight: 700;
  color: #000;
}

.auto_campaign_link li a:after {
  content: "";
  width: 8px;
  height: 8px;
  position: absolute;
  top: 50%;
  right: 14px;
  margin-top: -5px;
  border-left: 2px solid #C9C6C0;
  border-top: 2px solid #C9C6C0;
  transform: rotate(135deg);
  -webkit-transform: rotate(135deg);
}

.auto_campaign_complete {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding: 20px 5%;
  text-align: center;
  background: #f8f7f4;
}

.auto_campaign_complete h4 {
  margin-bottom: 16px;
  color: #ffa134;
  font-weight: 400;
  font-size: 1.2em;
  text-align: center;
}

.auto_campaign_complete p {
  font-size: 1em;
  line-height: 1.6;
  text-align: center;
}

.auto_campaign_point {
  padding: 8% 0 6%;
  text-align: center;
}

.auto_campaign_point h5 {
  margin-bottom: 12px;
  text-align: center;
  font-size: 1.1em;
}

.auto_campaign_point p {
  font-size: 1em;
  text-align: center;
}

.auto_campaign_point p strong {
  font-size: 1.7em;
  letter-spacing: 0.07em;
}

.auto_campaign_confirm .btn_base {
  padding: 2px 5%;
  color: #000;
  font-size: 1em;
}

.auto_campaign_note {
  display: block;
  line-height: 1.6;
  margin-top: 8%;
}

.auto_campaign_term {
  margin: 20px 0;
}

.auto_campaign_term h3 {
  position: relative;
  margin-bottom: 20px;
  padding-left: 20px;
  font-size: 1em;
} 

.auto_campaign_term h3:before {
  display: inline-block;
  position: absolute;
  top: 50%;
  left: 0;
  content: "";
  width: 12px;
  height: 1px;
}

.auto_campaign_term h3.is-orange {
  color: #ffa134;
}

.auto_campaign_term h3.is-orange:before  {
  background: #ffa134;
}

.auto_campaign_term h3.is-red {
  color: #ff5233;
}

.auto_campaign_term h3.is-red:before  {
  background: #ff5233;
}

.auto_campaign_term p {
  margin: 20px 0;
  padding: 0 0 0 20px;
  font-size: 1em;
  line-height: 1.6;
}

.auto_campaign_term ul li {
  position: relative;
  margin-bottom: 18px;
  line-height: 1.6;
  font-size: 1em;
}

.auto_campaign_term ul.is-num {
  padding: 0 0 0 20px;
  counter-reset: number 0;
}

.auto_campaign_term ul.is-num li {
  counter-increment: number 1;
}

.auto_campaign_term ul.is-num li:before {
  position: absolute;
  left: -20px;
  content: counter(number) "."; 
}