@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;300;400;500;700;900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Quicksand:wght@300;400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Titillium+Web:wght@700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@100;200;300;400;500&display=swap');


/* 汎用　margin　padding----------------------- */
.u-m5 {
  margin: 5px !important; }

.u-m10 {
  margin: 10px !important; }

.u-m20 {
  margin: 20px !important; }

.u-m30 {
  margin: 30px !important; }

.u-m40 {
  margin: 40px !important; }

.u-p5 {
  padding: 5px !important; }

.u-p10 {
  padding: 10px !important; }

.u-p20 {
  padding: 20px !important; }

.u-p30 {
  padding: 30px !important; }

.u-p40 {
  padding: 40px !important; }

.u-mt-10 {
  margin-top: -10px !important; }

.u-mt0 {
  margin-top: 0 !important; }

.u-mt5 {
  margin-top: 5px !important; }

.u-mt10 {
  margin-top: 10px !important; }

.u-mt15 {
  margin-top: 15px !important; }

.u-mt20 {
  margin-top: 20px !important; }

.u-mt25 {
  margin-top: 25px !important; }

.u-mt30 {
  margin-top: 30px !important; }

.u-mt40 {
  margin-top: 40px !important; }

.u-mt50 {
  margin-top: 50px !important; }

.u-mt60 {
  margin-top: 60px !important; }

.u-mb0 {
  margin-bottom: 0 !important; }

.u-mb5 {
  margin-bottom: 5px !important; }

.u-mb10 {
  margin-bottom: 10px !important; }

.u-mb15 {
  margin-bottom: 15px !important; }

.u-mb20 {
  margin-bottom: 20px !important; }

.u-mb25 {
  margin-bottom: 25px !important; }

.u-mb30 {
  margin-bottom: 30px !important; }

.u-mb40 {
  margin-bottom: 40px !important; }

.u-mb50 {
  margin-bottom: 50px !important; }

.u-mb60 {
  margin-bottom: 60px !important; }

.u-pb0 {
padding-bottom: 0px !important; }

.u-pb10 {
padding-bottom: 10px !important; }  

.u-pb20 {
  padding-bottom: 20px !important; }  

.u-pb30 {
  padding-bottom: 30px !important; }    


.u-pb40 {
  padding-bottom: 40px !important; }   

.u-pb50 {
  padding-bottom: 50px !important; }   

.u-pb60 {
  padding-bottom: 60px !important; }  

.u-pt0 {
  padding-top: 0px !important; }

.u-pt10 {
  padding-top: 10px !important; }

.u-pt20 {
  padding-top: 20px !important; }


.u-pt30 {
  padding-top: 30px !important; }

.u-pt40 {
  padding-top: 40px !important; }

.u-pt50 {
  padding-top: 50px !important; }

.u-pt60 {
  padding-top: 60px !important; }

.u-pl15 {
  padding-left: 15px !important; }

.u-mb12 {
  margin-bottom: 12px !important; }


.u-ml0{
    margin-left: 0px !important; 
}



/* --リストmargin用--- */

.u-mtb0{
    margin-top: 0px !important; 
  margin-bottom: 0px !important; 
}

/* --リストpadding用--- */

.u-ptb0{
   padding-top: 0px !important; 
  padding-bottom: 0px !important; 
}

.u-plr0{
  padding-left:0px !important;
  padding-right:0px !important; 
}

.u-plr8{
  padding-left:8px !important;
  padding-right:8px !important; 
}

.u-plr20{
  padding-left:20px !important;
  padding-right:20px !important; 
}

/* --リストpadding用--- */

.font-normal{
font-weight:normal !important; 
}






/* ■■■■ body設定 ■■■■ */
body {


  margin: 0 auto;
 min-width: 320px;  
  max-width: 768px;
color:#656565;
  font-family: "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic",  "メイリオ",'Noto Sans JP' , sans-serif;
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  vertical-align: baseline;
}



/* 編集用 */
li.aaa {
background-color: red;
}


/* ftop お客様の声　色替え */

.section-customer-voice{
	background:#fff; /*全体の色 */
}
.customer-content-item{
	background:#fff; /*各ボックスの背景 */
    margin: 5px;
}
.customer-voice{
	color:#2a4184; /* 各ボックスの文字色 */
}

/* 各セクション背景　色替え */
.section-ffirst{
	background:#ccc;  /* 全体の色 */
    background-color:#8d2355;
}

.section-fsecond{
	background:#fff;   /* 全体の色 */
}

.ftop_btn{
   width:70%;
   margin:auto;
}

#login_caption a{
color:#fff; 
text-align:center;
font-size:16px;
}

/*--2/3追加分--*/

.wrap-sticky {
  height: auto!important;
  margin: 0!important;
}
#wrap-sticky-push {
  display: none!important;
}


.form-control label {
    display: block;
}

.form-control label:after{
    content:"";
    display:block;
}

.emg {
    border-radius: 4px;      
    background: rgb(242, 120, 120);   
    border: 1px solid rgb(226, 15, 15);   
    margin: 8px;   
    padding: 4px;
    font-size: 12px;
}

.emg a{
    color:#fff;
    text-decoration:none;
    display:block;
    width:100%;
}

/* 個別装飾 (2015/10/28追加)  */ 
li.kobetsu-year {
background-image: url("/image/ic/mupdate01-left.240.png"), url("/image/ic/mupdate01-right.240.png");
background-repeat: no-repeat;
background-position: 0 100%,100% 0;
background-size: 50px;
}
li.kobetsu-year span.pickup {
color: green;
font-size: 14px;
font-weight: bold;
}

/* FTOP用 (2016/02/19 追加)  */ 
.f_fs130 {
  font-weight: bold;
  font-size: 130%;
  margin:5px auto;
  text-align: center;
}
.f_fs140 {
  font-weight: bold;
  font-size: 140%;
  margin:5px auto;
  text-align: center;
}

.f_fs150 {
  font-weight: bold;
  font-size: 150%;
  margin:5px auto;
  text-align: center;
}
.f_fs170 {
  font-weight: bold;
  font-size: 170%;
  margin:5px auto;
  text-align: center;
}
.f_red{
    color: #EA2828;
}
/*  FTOP用背景 */
.f_bg {
 background-image: url("/image/ftop/f_bg_201602.sp.480.png");
 background-size: auto;
}
.fc_text{
  margin: 8px auto;
  text-align: center;
}
.fc_text2{
  font-weight:bold;
  font-size:15px;
  display:block;
  margin: 7px 10px;
  padding:7px 7px;
  background-color:#D3DEBD;
}
.f_img-ma01{
  margin-top: 30px;
  margin-bottom: 15px; 
}

/* バナーに文字入れ */
.f_cb {
  position:relative;
}
.f_cb .text {
  position:absolute;
  color: #FFF;
  z-index: 3;
  font-size:20px;
  top:50%;
  left:50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}
.flp_btn {
  width:220px;
  font-size:24px;
  font-weight:bold;
  text-decoration:none;
  display:block;
  text-align:center;
  padding:7px 0 5px;
  color:#fff;
  background-color:#ff8d00;
  border-radius:3px;
  box-shadow:2px 2px 2px #995400;
  text-shadow:-1px -1px #995400;
  margin : 10px auto 20px auto;    /* 上 右 下 左 */
}

/* 2016/3/1追加 個別課金キャプションの文字設定  */
.list_caption-special {
  color: #EC0000 !important;
  font-size: 12px !important;
}

/* ■■■■ 個別課金カテゴリ別アイコン ■■■■ */

.icon-1,.icon-2,.icon-3,.icon-4,.icon-5,.icon-6,.icon-7,.icon-8{
 background-repeat: no-repeat;
 background-size: 100%;
 height: 48px;
 width: 48px;
/*   float: left;   */
 margin-left:0px;
 display: block;
}

.icon-1{
 background-image: url("/image/kob/ic/1.sp.480.png");
}

.icon-2{
 background-image: url("/image/kob/ic/2.sp.480.png");
}

.icon-3{
 background-image: url("/image/kob/ic/3.sp.480.png");
}

.icon-4{
 background-image: url("/image/kob/ic/4.sp.480.png");
}

.icon-5{
 background-image: url("/image/kob/ic/5.sp.480.png");
}

.icon-6{
 background-image: url("/image/kob/ic/6.sp.480.png");
}

.icon-7{
 background-image: url("/image/kob/ic/7.sp.480.png");
}

.icon-8{
 background-image: url("/image/kob/ic/8.sp.480.png");
}

/* ■■■■ 個別課金紹介エリア ■■■■ */

.top-section-kobetsu {
/*     border-top: 2px solid #000;
    background-image: url("/image/kobetsu/bg.sp.480.png");
    background-size: auto; */
  background: #F8EDE6;
}

.kobetsu-caption{
  overflow:hidden;
  background-color: #F7F5E9;
}

.kansyu-photo{
  float: left;
  width: 30%;
  padding-right: 5px;
}

.top-section-kobetsu>.to-section-body>.btn-wrap-right{
  margin:0 0 0 auto;
}

.list-special .menu {
    -webkit-box-flex: 1;
    -webkit-flex: 1;
    -ms-flex: 1;
    flex: 1;
}

.list-special .thumbnail {
    -webkit-box-flex:0 0 48px;
    -webkit-flex:0 0 48px;
    -ms-flex: 0 0 48px;
    flex: 0 0 48px;
    margin:3px 10px 0 0;
}


/* ■■■■ NEWマーク表示 ■■■■ */

.list-special {
  position: relative;
/*   margin: 10px;*/

}
/*.list-special.new::after {
    content: "";
    display: block;
    position: absolute;
    width: 40px;
    height: 40px;
    top: 0;
    left: 0;
    background-image: url("/image/kobetsu/new.sp.480.png");
    background-size: 100%;
}*/

/* ■■■■ m/kobetsu/listアイコン幅調整 ■■■■ */

.list-base .list-special a {
    padding: 11px 0px 12px 0px;
}


/* ■■■■ floatの代用(共通) ■■■■ */
.flex-row {
 display: -webkit-box;
 display: -webkit-flex;
 display: -ms-flexbox;
 display: flex;
 -webkit-box-orient: horizontal;
 -webkit-box-direction: normal;
 -webkit-flex-direction: row;
 -ms-flex-direction: row;
 flex-direction: row;
}

.flex-row .item {
 -webkit-box-flex: 1;
 -webkit-flex: 1;
 -ms-flex: 1;
 flex: 1;
}
/*20160325*/
  .new-info-announcement {
    background: #F7F5E9;
    padding: 10px;
    font-size: 16px;
}

.new-info-announcement:before {
    content: "";
    position: absolute;
    top: -8px;
    left: 11%;
    margin-left: -9px;
    display: block;
    width: 0px;
    height: 0px;
    border-style: solid;
    border-width: 0 4px 9px 4px;
    border-color: transparent transparent #9E974C transparent;
    z-index: 0;
}
section#section-first {
    margin-bottom: 0px;
}
/*section#section-first .list-base .tip{
    border: 1px solid #ACC052;5
  
  }  */

/*日運*/
.top-section-dayly.hedding-type-dayly {
    height: 50px;
    padding-left: 12px;
    background-color: #A29845;
    background-image: url("../image/site/icon/top-section-hedding-1.sp.480.png");
    background-size: 100px;
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: 50%;
}

h4.top-section-title {
    color: #FFF;
    font-size: 16px;
    margin: 0;
    line-height: 50px;
}

/*2016/3/31 個別課金施策 佐々木追記*/

.kob_reccome_title {
    width: 100%;
    padding: 4px 12px;
    margin: 0;
    font-size: 16px;
    color: #FFF;
    font-weight: bold;
    background-color: #7F9B48;
}
.bg_kob {
    background-color: #F7F5E9;
    color: #E8DAC0;
    position: relative;
    margin-right: auto;
    margin-left: auto;
    box-sizing: border-box;
    padding: 0 0 10px 0;
}

　/*個別課金end日表示*/

.list-base li a .tip.kobetsu-end, 
.list-group li a .tip.kobetsu-end, 
.list-base li > div:not(.sub-info) .tip.kobetsu-end, 
.list-group li > div:not(.sub-info) .tip.kobetsu-end {
 background:#FF5722; /*カラーがあわなければサイトごとに調整してください。*/
 color: #fff; /*カラーがあわなければサイトごとに調整してください。*/
}

.list-base li a .tip.kobetsu-end,
.list-base li > div:not(.sub-info) .tip.kobetsu-end {
 background:#FF5722; /*カラーがあわなければサイトごとに調整してください。*/
 color: #fff;/*カラーがあわなければサイトごとに調整してください。*/
}

/*個別課金ランキング表示*/

h4.kobetsu-explain{
    border-left: solid 2px #9AAB4D;
font-weight: bold;
  color: #9AAB4D;
font-size: 14px;
    margin: 10px 0 0 20px;
    padding: 0px 0 0 8px;
      height: 17px;
    line-height: 17px;}





.kobetsu-period{
    font-size: 12px;
   color: #656565;
}

.list-special.kobetsu-ranking-item::after{
  content: "";
  display: block;
  position: absolute;
  width: 40px;
  height: 40px;
  top: 0;
  left: 0;
  background-size: 100%;  
}

.list-special.rank-1::after{
  background-image: url("/image/kobetsu/rank-1.sp.480.png");
}

.list-special.rank-2::after{
  background-image: url("/image/kobetsu/rank-2.sp.480.png");
}



.list-special.rank-3::after{
  background-image: url("/image/kobetsu/rank-3.sp.480.png");
}

.list-special.rank-4::after{
  background-image: url("/image/kobetsu/rank-4.sp.480.png");
}

.list-special.rank-5::after{
  background-image: url("/image/kobetsu/rank-5.sp.480.png");
}

/*2017/02/09 佐々木追記*/
.section-tokushu{
    margin-top: 32px;
}
.section-tokushu ul.list-base {
    border-top: none;
}
.section-tokushu ul.list-base li {
    position: relative;
    margin: 10px;
    background-image: url(/image/kobetsu/bg.sp.480.png);
    background-size: auto;
    1px solid rgba(0, 0, 0, 0.1);
}
.section-tokushu ul.list-base li a .menu-name {
    
}

.section-tokushu ul.list-base li a:not(.disabled):after {
    position: absolute;
    display: list-item;
    content: "";
    color: #63793f;
    right: -4px;
    top: 94%;
    margin-top: -.5em;
    display: block;
    border: 9px solid transparent;
    border-left: 9px solid;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}


/*20190918追記*/


.topnewbackcolor{
    color:#ffffff;
    background:#9E974C;
    font-weight:bold;
}

/*-----------------------20210803リニューアル追記 ------------------------*/


.tip_gentei{
display: block;
    float: left;
  font-weight: bold;
    font-size: 12px;
    border-radius: 2px;
    padding: 1px 4px;
    margin: 0 4px 0 0;
    background:none;
    color: #9AAB4D;
    border: 1px solid transparent;}

.drawer-nav-list li{
padding-left:20px;
padding-right:20px;}



.header-main .brand-logo > a .title-img {
position: absolute;
      margin:0;
    top: 15%;
    left: 30%;
    width: 100% !important;
    height: auto !important;
    background: url(/image/site/brand.sp.480.png);
 /*-   padding-top: 76.3%;-*/
background-repeat: no-repeat;
    background-size: contain;
}
  
  .header-main {
    position: relative;
    width:100%;
    background-image: url(../image/mtop/202402/header.sp.480.png);
    background-size: contain;
    background-repeat-x: no-repeat;
    background-repeat-y: no-repeat;
    background-attachment: initial, initial;
    background-origin: initial, initial;
    background-clip: initial, initial;
    background-repeat: no-repeat;
    background-size: cover;
padding-top: 16.27%;
}
  
  

.header-main_inner{
position: absolute;
    display: flex;
    justify-content: space-between;
    padding-right: 20px;
    top: 0;
    width: 100%;  
}


    .header-main .col1-5{
        width: 38px;
 
  }  

  
  
  .header-main .menu-icon a [class^=sp-], .header-main .menu-icon button [class^=sp-] {
    display: block;
    margin: auto;
    width: 41px;
    height: 30px;
    background-position: center;
    background-size: 100%;
}
  ::selection {
    background: #FAF9F7;
    color: #FFF;
    text-shadow: none;
}
  


.searchArea .searchArea-icon__on {
    width: 27px;
    height: 30px;
    background-image: url(/image/mtop/202402/icon_search.sp.480.png);
    background-size: 27px;
    background-repeat: no-repeat;
    background-position: 50%;
}


.btn-wrap .cs06 {
    background: #E98885;
}


.list-base li.kobetsu{
      background: #F8EDE6;
} 


/* おしらせ見出し */

.top-new-info {
font-weight: bold;
color: #9AAB4D;
font-size: 14px;
line-height:14px;  
/* margin: 20px 0 10px 20px; */
margin: 0px 0 0 20px;
padding-top:20px;  
display: flex;
align-items:center;  
}


.top-kovetsu-info {
font-weight: bold;
color: #E36E6A;
font-size: 14px;
line-height:14px;  
/* margin: 20px 0 10px 20px; */
margin: 0px 0 0 20px;
padding-top:20px; 
display: flex;
align-items:center;  
}


.top-new-info img,.top-kovetsu-info img {
height:20px;
}

.left-frame{
display:inline-block;  
margin-right:5px;}

.right-frame{
display:inline-block;  
margin-left:5px;}

/* おしらせ見出し */


.used{
display: block;
float: left;
font-size: 12px;
border-radius: 2px;
padding: 1px 4px;
margin: 0 4px 0 6px;
    background: #ffffff !important;
    color: #9AAB4D !important;
    border: 1px solid #ACC052 !important;
}



}

.btn-wrap{
margin:0 20px;}

.btn-wrap .cs01{
background: #ACC052;}

.btn-wrap .cs06{
background: #E98885;}



.btn-wrap a {
font-size:15px;
width: 100%;
text-decoration: none;
text-align: center;
min-height: 40px;
display: flex;
color:#ffffff;
justify-content: center;
align-items: center;
border-radius: 5px;
}





/* 運命鑑定　tip */ 

.btn-row > .col1-2 {
float: left;
padding: 7.5px 0; }
.btn-row > .col1-2:nth-child(odd) {
padding-right: 7.5px; }
.btn-row > .col1-2:nth-child(even) {
padding-left: 7.5px }  


.top-section-aisho{
background-image: url(../image/202108/aisho/bg/1.sp.480.png);
background-size: cover;
}


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


}



.mtop_aisho_btn_box{
margin:0 28px;
display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}



.aisho_btn_1,
.aisho_btn_2,
.aisho_btn_3,
.aisho_btn_4{
width:47%;
margin-bottom:10px;
 
}

.aisho_btn_1 .image_box,
.aisho_btn_2 .image_box,
.aisho_btn_3 .image_box,
.aisho_btn_4 .image_box{
   width:100%;  
   position:relative;
   z-index:1;}
 
.aisho_btn_1 .image_box{
width: 100%;
    background: url(/image/mtop/202402/aisho_btn_2.sp.480.png);
    background-size: contain;
  background-repeat: no-repeat;
    padding-top: 28%;
}

.aisho_btn_2 .image_box{
width: 100%;
    background: url(/image/mtop/202402/aisho_btn_3.sp.480.png);
    background-size: contain;
  background-repeat: no-repeat;
    padding-top: 28%;
}

.aisho_btn_3 .image_box{
width: 100%;
    background: url(/image/mtop/202402/aisho_btn_1.sp.480.png);
    background-size: contain;
  background-repeat: no-repeat;
    padding-top: 28%;
}

.aisho_btn_4 .image_box{
width: 100%;
    background: url(/image/mtop/202402/aisho_btn_4.sp.480.png);
    background-size: contain;
  background-repeat: no-repeat;
    padding-top: 28%;
}

   
   .aisho_btn_1 .image_box::after{
   position:absolute;
top: 4px;
    left: 3px;
    content: "";
    width: calc(100%);
    height: calc(100%);
    /* background: rgb(0 0 0 / 10%); */
    border-bottom: solid 4px rgb(0 0 0 / 10%);
    border-right: solid 3.5px rgb(0 0 0 / 10%);
    border-radius:4px;
   }   

   .aisho_btn_2 .image_box::after{
   position:absolute;
top: 4px;
    left: 3px;
    content: "";
    width: calc(100%);
    height: calc(100%);
    /* background: rgb(0 0 0 / 10%); */
    border-bottom: solid 4px rgb(0 0 0 / 10%);
    border-right: solid 3.5px rgb(0 0 0 / 10%);
    border-radius:4px;
   }   

   .aisho_btn_3 .image_box::after{
   position:absolute;
top: 4px;
    left: 3px;
    content: "";
    width: calc(100%);
    height: calc(100%);
    /* background: rgb(0 0 0 / 10%); */
    border-bottom: solid 4px rgb(0 0 0 / 10%);
    border-right: solid 3.5px rgb(0 0 0 / 10%);
    border-radius:4px;
   }   

   .aisho_btn_4 .image_box::after{
   position:absolute;
top: 4px;
    left: 3px;
    content: "";
    width: calc(100%);
    height: calc(100%);
    /* background: rgb(0 0 0 / 10%); */
    border-bottom: solid 4px rgb(0 0 0 / 10%);
    border-right: solid 3.5px rgb(0 0 0 / 10%);
    border-radius:4px;
   }   


.aisho_btn_5 .image_box{
width:100%;  
box-shadow: 5px 5px 0px -2px rgb(0 0 0 / 10%);  
border-radius: 6px;
}


.aisho_btn_5{
width:100%;
}


.aisho_btn_1 button,
.aisho_btn_2 button,
.aisho_btn_3 button,
.aisho_btn_4 button,
.aisho_btn_5 a{
position:relative;
width:100%;  
font-weight:700;
font-size:15px;
display: inline-block;
    align-items: center;
    justify-content: center;
margin: 0;
    padding: 0;}

.aisho_btn_1 button .text,
.aisho_btn_2 button .text,
.aisho_btn_3 button .text,
.aisho_btn_4 button .text,
.aisho_btn_5 a .text{
position: absolute;
    width: 100%;
    top: calc(50% - 15px);
    text-align: center;  
     z-index: 1; 
}



.js-change-aisho2{
width:66.6%;
  margin:auto;
padding:0;  
}


.clear-decoration {
border: none;  /* 枠線を消す */
outline: none; /* クリックしたときに表示される枠線を消す */
background: transparent; /* 背景の灰色を消す */
}



/*相性キャプション */ 

.top_aisho_caption{
display:block;
text-align: center;   
font-weight: bold;
font-size: 18px;
line-height: 181%;
letter-spacing: -0.04em;
}


.top_aisho_caption_small{
display:block;     
font-style: normal;
font-weight: bold;
font-size: 12px;
line-height: 140%;
text-align: center;
letter-spacing: -0.07em;
} 

/* 結婚編 */


.mtop_marriage_table_box{
padding:40px 20px 30px;
background: #E1E4D5;
}

.mtop_marriage_table{
font-weight: bold;
font-size: 21px;
line-height: 30px;
text-align: center;
color: #656565; 
width:100%;   
box-sizing: border-box;
}

.mtop_marriage_table td{
text-align: center;
}

.mtop_marriage_table img{
width:135px;
margin-right:15px;}


.mtop_marriage_table .image_box{
width:150px;}


.mtop_marriage_table_link{
color: #9AAB4D;
font-weight: bold;
font-size: 18px;
text-decoration: underline #9AAB4D solid;
text-underline-offset: 0.3em;
}


/* タブ */  


.top-section-tab-content .top-section-tabs > li.active > a {
-webkit-tap-highlight-color: transparent;
color: #BC9964;
font-weight: bold;
}

.top-section-tab-content .top-section-tabs > li.active {
-webkit-transform: none;
transform: none;
border-bottom: 2px solid #BC9964;
}

.top-section-tab-content .top-section-tabs > li > a {
color: #656565;
font-size: 16px;
}


.top-section-tab-content .top-section-tabs > li {
border-bottom: 2px solid #E5E5E5;
}


.top-section-tab-content .top-section-tabs {
margin: 0 20px 15px;
padding-top: 2px;
}


.top-section-tabs_2 li.active a {
-webkit-tap-highlight-color: transparent;
color: #BC9964;
font-weight: bold;
}

.top-section-tabs_2 li.active {
-webkit-transform: none;
transform: none;
border-bottom: 2px solid #BC9964;
}

.top-section-tabs_2 li a {
color: #656565;
font-size: 16px;
}


.top-section-tabs_2 li {
padding-bottom:8px;  
border-bottom: 2px solid #E5E5E5;
}


.top-section-tabs_2 {
margin: 0 20px 0px;
padding-top: 2px;
} 



.custom-form label {
-webkit-tap-highlight-color: transparent;
font-size: 12px;
display: block;
line-height: 0;
}




.top_new_comname_bg{
background: #F7FBE9;
padding-bottom: 50px;
}



/* タブキャプション */ 

.top_tab_caption{
padding:23px 20px 24px;  
font-weight: bold;
font-size: 18px;
line-height: 21px;
text-align: center;}

.top_tab_more{
text-align:right;
}


.top_tab_more span{
text-decoration: underline #656565 solid;
text-underline-offset: 0.3em;
font-weight: bold;
font-size: 14px;
line-height: 21px;
}

/* タブキャプション */ 


/* 日々変わるあの人の気持ち */ 

.top_day_caption_box{
margin: 0 35px;}  


.top_day_caption{
font-weight: bold;
font-size: 18px;
line-height: 24px;
text-align: center;}

/* 日々変わるあの人の気持ち */ 


/* 風角とは */ 

.list-base.list-develop li a {
padding: 12px 0px 0 0px;
}


/* topのアイコンとselectのボックス */ 
.top_item-body{
display: flex;
justify-content: space-between;}  


.select-affinity-area .item-add > a.icon-add-3 {
background-image: url(../image/202108/ic/add/2.sp.480.png);
}
/* topのアイコンとselectのボックス */ 



.w_100 {
width: 100% !important;
}

/* topのフォームのボックス */ 

.top_custom-form {
padding: 0 0px;
max-width: 100%;
}
.top_select-category{
margin-right:20px;
margin-left:20px;} 


/* topのフォームのボックス */ 

h4.kobetsu-explain_pink{
    border-left: solid 2px #E98885;
font-weight: bold;
  color: #E98885;
font-size: 14px;
    margin: 10px 0 0 20px;
    padding: 0px 0 0 8px;
      height: 17px;
    line-height: 17px;
}


.top_right_btn{
      width: 120px;
    margin-left: auto !important;
}


/* 個別特別鑑定　tip */ 
  
  
  .top_kobetsu_bg{
  background:#F8EDE6;
  }

  .top_bg_white{
  background:#ffffff;
  }
  
  
  .list-base li a .tip_kobetsu, .list-base li > div:not(.sub-info) .tip_kobetsu {
    display: block;
    float: left;
    font-size: 12px;
    border-radius: 2px;
    padding: 1px 4px;
    margin: 0 4px 4px 0;
    background: #E98885;
    color: #FFF;
    border: 1px solid #E98885;
box-sizing: border-box;
border-radius: 2px;
}
  
  .tip_kobetsu_price{
    display: block;
     background: #ffffff;
    float: left;
    font-size: 12px;
    border-radius: 2px;
    padding: 1px 4px;
    margin: 0 4px 4px 6px;
border: 1px solid #E98885;
box-sizing: border-box;
border-radius: 2px;
    color: #E36E6A;}   

  /* 個別特別鑑定　tip */   
    


  /* マイリストページ */   

    .my_list_allbox{
      width:100%;
      box-sizing: border-box;
      display:flex;
      align-items: center;
      justify-content: space-between;}   

.rows-tip-area_box{
  /*width: 133px !important;*/  
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    flex-direction: column;
    align-items: flex-end;
}

/*ーーーーー 下層ページ用ーーーーーーーーーー */ 
 /* 友達選択部分 */ 
.basic-text-style, .sel-fid  {
    padding-left: 20px;
    padding-right: 20px;
}

.sel-fid:not(:last-child){
border-bottom: none;
} 

.custom-form,.sel-fid{
max-width:100%;}
/* 友達選択部分 */ 

/* リストの一番上ボーダー */ 
.list-base{
border-top:none;
}

/* この占いもあなたにおすすめ！帯 */
.list-header{
border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
/*ーーーーー 下層ページ用ーーーーーーーーーー */ 

/* m/kobetsu/list 20220408 */
.menu-name{
  font-family: 'Hiragino Kaku Gothic Pro', sans-serif;
  font-style: normal;
  font-weight: 400;
  font-size: 12px;
  line-height: 19px;
  color: #656565;
}
.category_block_box{
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  margin: 20px;    
}
.category_block_box span{
  font-family: 'YuGothic', sans-serif;
  font-style: normal;
  font-weight: 700;
  font-size: 13px;
  line-height: 16px;
  padding: 4px 12px;
  border-radius: 14px;
  margin: 6px 4px;
  box-shadow: 4px 4px 0px -2px rgb(0 0 0 / 5%);
}
.category_tip_act{
  background: #F3B6B4;
  color: #FFFFFF;
}
.category_tip_act a{
  color: #FFFFFF;
}
.category_tip{
  background: #FFF;
}
.category_tip a{
  color: #F3B6B4;
}

/* m/kobetsu/top */
.kobetsu-bg{
  background: #F8EDE6;
}
.kobetsu-head{
  background: #FFFFFF;
  border-radius: 2px;
  margin-top: 30px;
  margin-bottom: 20px;
  padding: 20px 17px;
}
.kobetsu-title,.caption,.kobetsu-price,.expired{
  font-family: 'YuGothic', sans-serif; 
  font-style: normal;
  color: #656565;
}
.kobetsu-title{
  font-weight: 700;
  font-size: 16px;
  line-height: 21px;
  display: flex;
  align-items: center;
}
.caption{
  font-weight: 500;
  font-size: 14px;
  line-height: 140%;
}
.expired{
  font-weight: 500;
  font-size: 13px;
  line-height: 140%; 
}
.tip-area{
  text-align: right;
  margin: 12px auto;
}
.purchased,.not-purchased{
  font-family: 'YuGothic', sans-serif; 
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
  padding: 2px 8px;
  border-radius: 2px;    
}
.not-purchased{
  color: #E98885;
  background: #F8EDE6;
}
.purchased{
  background: #E36E6A;
  color: #FFFFFF;
}  
.kobetsu-price{
  text-align: right;
  font-weight: 700;
  font-size: 13px;
  line-height: 140%;
  align-items: center;
}
.kobetsu-li{
  background: #FFFFFF;
  border: 1px solid #AEAEAD !important;
  box-sizing: border-box;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.15);
  border-radius: 2px;
  margin-top: 10px;
  padding: 10px 17px 10px 12px; 
}
.kobetsu-li span{
  font-family: 'YuGothic', sans-serif; 
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;    
  color: #656565;
}
.list-part{
  display: flex;
}

.kobetsu-li a::after,
.arrow-parts::after{
  position: inherit;
  content: "\f105";
  font-family: 'FontAwesome';
  color: inherit;
  font-size: 16px;
  line-height: 1;
  right: 30px;
  top: 56% !important;
  margin-top: -0.5em;
}

.buy-btn{
  font-family: 'YuGothic', sans-serif; 
  font-style: normal;
  font-weight: 700;
  font-size: 14px;
  line-height: 16px;
}

.rireki-btn{
  font-family: 'Yu Gothic', sans-serif; 
  font-style: normal;
  font-weight: 700;
  font-size: 15px;
  line-height: 19px;
  color: #E98885;
}


/* m/kobetsu/shichu/result */
.kobetsu-title{
  background: #FCCFCE !important;
}

.kobetsu-title p{
  font-family: 'YuGothic', sans-serif; 
  font-style: normal;
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
  color: #E36E6A;
  padding-right: 12px;
  padding-left: 12px;    
}


/*  ーーーーーーー20220524追加　 バナー　きらりんの指定ーーーーーーー　*/

.mtop_banner_box {
    max-width: 670px;
    margin: 0px auto 0px auto;
    padding: 0 15px;
}

.reflection-img{
    width: auto;
    height      :100%;
    position    :relative;
    overflow    :hidden;
	box-shadow: 5px 5px 0px -2px rgb(0 0 0 / 10%);
}
 
.reflection {
    height      :100%;
    width       :30px;
    position    :absolute;
    top         :-180px;
    left        :0;
    background-color: #fff;
    opacity     :0;
    transform: rotate(45deg);
    animation: reflection 2s ease-in-out infinite;
    -webkit-transform: rotate(45deg);
    -webkit-animation: reflection 2s ease-in-out infinite;
    -moz-transform: rotate(45deg);
    -moz-animation: reflection 2s ease-in-out infinite;
    -ms-transform: rotate(45deg);
    -ms-animation: reflection 2s ease-in-out infinite;
    -o-transform: rotate(45deg);
    -o-animation: reflection 2s ease-in-out infinite;
}
 
/* バナー　光が強い方のアニメーション指定　*/
@keyframes reflection {
    0% { transform: scale(0) rotate(45deg); opacity: 0; }
    80% { transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { transform: scale(4) rotate(45deg); opacity: 1; }
    100% { transform: scale(50) rotate(45deg); opacity: 0; }
}
@-webkit-keyframes reflection {
    0% { -webkit-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -webkit-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -webkit-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -webkit-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-moz-keyframes reflection {
    0% { -moz-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -moz-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -moz-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -moz-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-ms-keyframes reflection {
    0% { -ms-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -ms-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -ms-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -ms-transform: scale(50) rotate(45deg); opacity: 0; }
}
@-o-keyframes reflection {
    0% { -o-transform: scale(0) rotate(45deg); opacity: 0; }
    80% { -o-transform: scale(0) rotate(45deg); opacity: 0.5; }
    81% { -o-transform: scale(4) rotate(45deg); opacity: 1; }
    100% { -o-transform: scale(50) rotate(45deg); opacity: 0; }
}
/*  ーーーーーーー20220524追加　 バナー　きらりんの指定ーーーーーーー　*/

/*  ーーーーーーー202402　mtop　修正ーーーーーーー　*/

.sp-new{
background-image: url(../image/mtop/202402/navi_new.sp.480.png) !important;
}
.sp-affinity{
background-image: url(../image/mtop/202402/navi_kihon.sp.480.png) !important;
}

.list-base li a::after{
position: absolute;
content: "";
right: 8px;
width: 10px;
height: 10px;
border-right: 1px solid #656565;
border-bottom: 1px solid #656565;
-webkit-transform: rotate( -45deg);
top: 70% !important;
}

#tech-cate3-list .list-base li a::after,
.drawer-nav-list.list-base li a::after{
content: none;
}

.drawer-nav-list.list-base li a{
padding:10px 0px 10px 0px;
}

.list-base .menu-name,
.list-special .menu,
.list-special .menu-name{
padding-right: 15px;
}


.list-base li.list-special a::after{
top: 70%;
}

/*  ボタン　シャドウ　*/
    .btn-wrap a,
    .result a.btn,
    .btn-wrap .btn{
  box-shadow: 5px 5px 0px -2px rgb(0 0 0 / 10%);  
}


    .btn-wrap .btn a{
box-shadow: none;
}