/* ============================================ 
m/top 用
/* ============================================ */


.m_top_header_box{
position: relative;
width:100%;    
}

.l-contents-mtop{
padding-left:30px;
padding-right:30px;
padding-top:20px;
background: #FFF4F6;
}



/* ===== サブ　ナビ===== */

@media only screen and (max-width: 376px) {
.mtop_sub_nav{
margin:10px 0px 24px;
display: flex;
justify-content: space-between;
}
}


@media only screen and (min-width: 377px) {
.mtop_sub_nav{
margin:10px 0px 24px;
display: flex;
justify-content: space-between;
}
}


.mtop_sub_nav .new,
.mtop_sub_nav .aisho,
.mtop_sub_nav .tenki,
.mtop_sub_nav .tarot,
.mtop_sub_nav .kobetsu
{
max-width:16%;
}

.mtop_sub_nav .image_box{
max-width:90%;
margin: auto;
}

.mtop_sub_nav {
  text-align: center;
  width: 88%;
  margin: auto;
  position: absolute;
  top: 63%;
  left: 50%;
  transform: translateX(-50%);
}

.mtop_sub_nav span{
color: #674286;    
width:6em;
font-size: 11px;
line-height: 16px;
display: block;
}

@media only screen and (max-width: 320px) {
.mtop_sub_nav .new,
.mtop_sub_nav .aisho,
.mtop_sub_nav .tenki,
.mtop_sub_nav .tarot,
.mtop_sub_nav .kobetsu{
max-width:16%;
}

.mtop_sub_nav .image_box {
max-width:45px;
min-width:45px;
margin: 0 5px 0px;
}



}

@media only screen and (max-width: 414px) {
.mtop_sub_nav .theme span{
width: 4.5em;
}

.mtop_sub_nav .type span{
width: 4.5em;
}

}

@media only screen and (min-width: 415px) {
.mtop_sub_nav span{
width: 7em;
font-size: 11px;
text-align: center;
display: block;
margin: auto;
}
}


/* ===== タイトル画像 ===== */

.mtop_news{
width: 22.3%;
height:auto;
margin:auto;
padding:16px 0;
}
.mtop_news img{
max-width:152px;
}

.mtop_new_nemu{
width: 23.7%;
height:auto;
margin:auto;
padding:16px 0;
}
.mtop_new_nemu img{
max-width:158px;
}

.mtop_today{
width: 28.1%;
height:auto;
margin:auto;
padding:16px 0;
}

.mtop_today img{
max-width:190px;
}

/* ===== イチオシ占い部分　イメージボックス ===== */
.mtop_card_box{
margin:0 5px;
background:#ffffff;
text-align:center;  
}

.mtop_card_box img{
width:100%;  
}

.mtop_card_text{
padding:10px 15px;  
min-height:40px;
font-size: 14px;
line-height: 18px;  
}
.mtop_card_text span{
font-style: normal;
font-weight: 400;
font-size: 11px;
line-height: 16px;
color: #787878;    
}



/* ===== 日運 ===== */


#slick-dates{
width: 100%;
margin:0 auto 0px;
padding:0px 10px 25px;
font-weight: 500;
font-size: 16px;
line-height: 1;
}

#slick-dates span{
font-style: normal;
font-weight: 500;
font-size: 21px;
line-height: 30px;
letter-spacing: 0.1em;
line-height: 1;
font-family: shippori-mincho, sans-serif;
}



/*  日運 dairy画像  */  
#slick-dates span.image_mark{
position: relative;    
width: 130px;
margin: auto;    
font-style: normal;
font-weight: 600;
font-size: 22px;
line-height: 20px;
letter-spacing: 0.05em;
line-height: 1;
font-family: shippori-mincho, sans-serif;
}


#slick-dates .image_mark img{
position: absolute;
left: 25%;
top: -30%;
width:64px;
height:46px;
}


.daybox_border{
margin-top:-16px;
/*   background: #FFFFFF;
border: 3px solid #C9E8E4;
box-sizing: border-box;
border-radius: 6px;
padding:25px 23px; */
}

.daybox_test{
font-weight: 400;
font-size: 14px;
line-height: 22px;
color: #000000;
}

.day_btn_box{
display: flex;
flex-wrap: wrap;
justify-content: space-between;
align-items: center;
font-size: 14px;
margin-bottom: 16px;  
}


.day_btn_box div{
}


.slick-prev:hover:before, .slick-prev:focus:before, .slick-next:hover:before, .slick-next:focus:before { opacity: 1; }

.slick-prev.slick-disabled:before, .slick-next.slick-disabled:before { opacity:  1; }


/* 
.slick-prev{
width: 36px;
height: 36px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #C8ECDA;
}


.slick-prev:before {
position: absolute;
top: 40%;
display: block;
content: "";
right: 10px;
width: 7px;
height: 7px;
border-right: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
-webkit-transform: rotate(135deg);

}

.slick-next{
width: 36px;
height: 36px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
border-radius: 50%;
background: #C8ECDA;
}


.slick-next:before {
position: absolute;
top: 40%;
display: block;
content: "";
right: 15px;
width: 7px;
height: 7px;
border-right: 2px solid #ffffff;
border-bottom: 2px solid #ffffff;
-webkit-transform: rotate(-45deg);

}
*/

.slick-prev, .slick-next {
font-size: 0;
line-height: 0;
position: absolute;
top: 50%;
display: block;
width: 43px;
height: 7px;
padding: 0;
margin-top: -10px\9;
-webkit-transform: translate(0, -50%);
transform: translate(0, -50%);
cursor: pointer;
color: transparent;
border: none;
outline: none;
background: transparent;
}    




/* ==== �߂�@�{�^�� ===== */

/* 
.slick-prev:hover, .slick-prev:focus{
width: 24px;
height: 24px;
background-image: url(../image/icon/btn_left_off.sp.480.png);
background-size: cover;
background-position: center;
background-color: #ffffff;
} 
*/


.slick-prev {
width: 6px;
height: 11px;
background-image: url(../image/btn_left_on.sp.480.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}


.slick-prev.slick-disabled {
position: absolute;
opacity: 1;
/* display: none; */
width: 43px;
height: 7px;
left: 0px;
top: 50%;
z-index: 10;
background-image: none;
background-size: cover;
background-position: center;
background-position: center;
}


/* ==== ���ց@�{�^�� ===== */
/*
.slick-next:hover, .slick-next:focus {
width: 24px;
height: 24px;
background-image: url(../image/icon/btn_right_off.sp.480.png);
background-size: cover;
background-position: center;
background-color: #ffffff; }
*/

.slick-next {
width: 6px;
height: 11px;
background-image: url(../image/btn_right_on.sp.480.png);
background-size: contain;
background-position: center;
background-repeat: no-repeat;
}


.slick-next.slick-disabled {
position: absolute;
opacity: 1;
width: 43px;
height: 7px;
right: 0px;
top: 50%;
z-index: 10;
background-image: none;
background-size: cover;
background-position: center;
background-position: center;
}


#slick-dates {
text-align: center;
}



#slick-dates { text-align: center }
.radiobutton {
display: none;
}


/* ==== mtopページ内メニュー ===== */

.day_btn_box label {
background: #FFF4F6;
cursor: pointer;
font-weight: 400;
font-size: 14px;
line-height: 21px;
border-top:   1px solid #D698AD;
border-bottom:   1px solid #D698AD;
color: #C46E8A;
width: 20%;
height: 35px;
/* margin: 0 4px 20px 4px!important; */
transform: scale(1,1);
transition: all 150ms ease;
display: flex;
justify-content: center;
align-items: center;
}

.radiobutton:checked + label {
background: #D698AD;
color: #FFFFFF;
border-bottom:1px solid #D698AD;
}


/* .day_btn_box .rdbtn-1{
margin: 0px 4px 20px 0px !important;
}

.day_btn_box .rdbtn-2,.day_btn_box .rdbtn-3,.day_btn_box .rdbtn-4,{
margin: 0 4px 20px 4px!important;
}

.day_btn_box .rdbtn-5{
margin: 0px 0px 20px 4px !important;
}*/

/* ==== mtopページ内メニュー 320px　以内===== */

@media screen and (max-width: 320px) {
.day_btn_box label{
font-size: 12px;
}
.radiobutton:checked + label {
font-size: 12px;
}  
}

/*
.day_btn_box .rdbtn-1{
margin: 0px 4px 20px 0px !important;
}

.day_btn_box .rdbtn-5{
margin: 0px 0px 20px 4px !important;
}

.day_btn_box .rdbtn-2,.day_btn_box .rdbtn-3,.day_btn_box .rdbtn-4,{
margin: 0 4px 20px 4px!important;
}  
*/  
/*  
.radiobutton:checked + label {
margin: 0 4px 20px 4px!important;
width: 46px;
}*/



/* ============================================ 
日運結果
/* ============================================ */


.unsei_daily{
position: relative;
width: 100px;
text-align: center;
font-weight: 400;
font-size: 17px;
line-height: 25px;
font-family: shippori-mincho, sans-serif;
margin: -10% auto;
}


.day_result-box{
}

.day_result-box h4{
text-align: center;        
font-weight: 600;
font-size: 16px;
line-height: 24px;
font-family: shippori-mincho, sans-serif;
margin-bottom:4px;
}    


.day_result-box p{
font-weight: 400;
font-size: 15px;
line-height: 165%;
text-align: justify;  
}


/* ============================================ 
生まれ持ったあなたの性格
/* ============================================ */

.persona_box{
display: flex;
justify-content: center;
}

.persona_box div:nth-of-type(2){
margin:0 23px;
}

.persona_box img{
max-width: 186px;
max-height: 237px;
}

/* ============================================ 
あの人との相性
/* ============================================ */

.affinity_box{
display: flex;
justify-content: space-between;
}

.affinity_box div.corner_bn{
width:calc(50% - 15px);
}