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

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

.l-contents-mtop {
  padding-top: 20px;
  background: #f9f9f9;
}

.page_width28 {
  padding-left: 28px;
  padding-right: 28px;
}

.page_width24 {
  padding-left: 24px;
  padding-right: 24px;
}

/* =====カレンダー　過去・未来　ページ幅===== */
.page_width22 {
  padding-left: 22px;
  padding-right: 22px;
}

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

@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: 22.1%;
  width: 22.1%;
}

.mtop_sub_nav .image_box img {
  max-width: 73%;
  min-width: 73%;
  margin: auto;
}

.mtop_sub_nav {
  text-align: center;
  width: 76%;
  margin: auto;
  position: absolute;
  top: 42%;
  left: 12%;
}

.mtop_sub_nav span {
  text-align: center;
  font-family: fot-tsukubrdgothic-std, sans-serif;
  font-size: 10px;
  font-weight: 700;
  line-height: 120%; /* 12px */
  letter-spacing: -0.6px;
  display: block;
  padding-bottom: 4px;
}

@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 {
    width: 63px;
  }

  .mtop_sub_nav {
    min-width: 285px;
    width: 285px;
    left: 17.5px;
    top: 38%;
  }

  .mtop_sub_nav .image_box img {
    width: 46px;
  }
}

@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_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;
}

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

.lucky_day_title {
  width: 64%;
  min-width: 241px;
  margin: auto;
}

.lucky_day_box {
  width: 100%;
  min-height: 96px;
  position: relative;
}

.lucky_day_box .image_box {
  width: 63px;
  position: absolute;
}

.lucky_day_box img {
  width: 63px;
  min-width: 63px;
}

.lucky_day {
  position: absolute;
  width: calc(100% - 60px);
  left: 60px;
  min-height: 96px;
  border-radius: 0px 20px 0px 0px;
  background: #fff;
  padding: 10px;
  font-size: 14px;
  font-weight: 400;
  line-height: 180%;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.lucky_day .summary {
  color: #87785b;
  font-weight: 700;
}

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

#slick-dates span {
  text-align: center;
  font-family: fot-tsukubrdgothic-std, sans-serif;
  font-size: 22px;
  font-style: normal;
  font-weight: 700;
  line-height: 100%;
}

#slick-dates span.day_of_w {
  font-size: 16px;
}

/*  日運 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, .slick-next {
	width: inherit;
	height: inherit;
}
  
.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,
.slick-next {
  font-size: 0;
  line-height: 0;
  position: absolute;
  top: 10px;
  display: block;
  width: 40px;
  height: 40px;
  padding: 0;
  -webkit-transform: translate(0, -50%);
  transform: translate(0, -50%);
  cursor: pointer;
  color: transparent;
  border: none;
  outline: none;
  background: transparent;
}

/* ==== slick　日運　prev矢印 ===== */


.slick-prev {
  width: 40px;
  height: 40px;
  background-image: url(../image/common/arrow_back.sp.480.png);
  background-size: 24px;
  background-position: center;
  cursor: pointer;
  background-repeat: no-repeat;
  left: 0;
    z-index: 10;
}

.slick-prev.slick-disabled {
  position: absolute;
  opacity: 0.4;
  /* display: none; */
  width: 40px;
  height: 40px;
  left: 0px;
  z-index: 10;
  background-image: url(../image/common/arrow_back.sp.480.png);
  background-size: 24px;
  background-position: center;
  cursor: pointer;
  background-repeat: no-repeat;
}

/* ==== slick　日運　next矢印 ===== */
/*
.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: 40px;
  height: 40px;
  background-image: url(../image/common/arrow_more.sp.480.png);
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
    right: 0;
    z-index: 10;
}

.slick-next.slick-disabled {
  position: absolute;
  opacity: 0.4;
   width: 40px;
  height: 40px;
  background-image: url(../image/common/arrow_more.sp.480.png);
  background-size: 24px;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 10;
}

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

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

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

.day_btn_box label {
  background: #fff4f6;
  cursor: pointer;
  font-weight: 500;
  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 {
    padding: 0 8px;
}

.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-size: 14px;
  font-weight: 400;
  line-height: 180%;
  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);
}

/* ============================================ 
Attention!!
/* ============================================ */

.attention_block {
  background-image: url(../image/mtop/mtop_title01.sp.480.png);
  background-size: 100%;
  padding: 32px 0px;
  background-repeat: no-repeat;
}

/* ============================================ 
見出し　画像
/* ============================================ */

h2.midashi_title_image img {
  width: 64.3%;
  min-width: 241px;
  margin: auto;
}

/* ============================================ 
ホロスコープ
/* ============================================ */

.horoscope_block {
  background-size: 100%;
  background-repeat: no-repeat;
}

.horoscope_base {
  width: 74.4%;
  min-width: 279px;
  margin: auto;
}

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

.mtop_corner_head_horoscope h2 {
  position: absolute;
  top: 47%;
  width: 100%;
}

.mtop_corner_head_horoscope h2.midashi_title_image img {
  width: 64%;
  min-width: 241px;
  margin: auto;
}

.mtop_corner_head_horoscope p {
  position: absolute;
  top: 90%;
  top: 95%;
  width: 74.3%;
  left: 50%;
  transform: translate(-50%, -90%);
  font-size: 14px;
  font-weight: 400;
  line-height: 180%;
  line-height: 160%;
  font-size: clamp(14px, 3vw, 28px);
}

@media screen and (max-width: 320px) {
.mtop_corner_head_horoscope p{
	top: 98%;
    width: 90%;
    line-height: 140%;
  }

}



/* ============================================ 
yes_no
/* ============================================ */

.yes_no_block {
  background-size: 100%;
  background-repeat: no-repeat;
}

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

.mtop_corner_head_yes_no h2 {
  position: absolute;
  top: 50%;
  width: 100%;
}

.mtop_corner_head_yes_no h2.midashi_title_image img {
  width: 64%;
  min-width: 241px;
  margin: auto;
}

.mtop_corner_head_yes_no p {
  position: absolute;
  top: 90%;
  width: 74.3%;
  left: 50%;
  transform: translate(-50%, -90%);
  font-size: 14px;
  font-weight: 400;
  line-height: 180%;
  font-size: clamp(14px, 3vw, 28px);
}

@media screen and (max-width: 320px) {
.mtop_corner_head_yes_no p  {
	top: 95%;
    width: 90%;
  }
}


  
/* ============================================ 
タロット
/* ============================================ */

.tarot_block {
  background-size: 100%;
  background-repeat: no-repeat;
}

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

.mtop_corner_head_tarot h2 {
  position: absolute;
  top: 53%;
  width: 100%;
}

.mtop_corner_head_tarot h2.midashi_title_image img {
  width: 64%;
  min-width: 241px;
  margin: auto;
}

.mtop_corner_head_tarot p {
  position: absolute;
  top: 90%;
  width: 74.3%;
  left: 50%;
  transform: translate(-50%, -90%);
  font-size: 14px;
  font-weight: 400;
  line-height: 180%;
  font-size: clamp(14px, 3vw, 28px);
}

@media screen and (max-width: 320px) {
.mtop_corner_head_tarot p  {
	top: 95%;
    width: 90%;
  }
}


/* ============================================ 
situation
/* ============================================ */

.situation_block {
  background-size: 100%;
  background-repeat: no-repeat;
}

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

.mtop_corner_head_situation h2 {
  position: absolute;
  top: 49%;
  width: 100%;
}

.mtop_corner_head_situation h2.midashi_title_image img {
  width: 64%;
  min-width: 241px;
  margin: auto;
}

.mtop_corner_head_situation p {
  position: absolute;
  top: 91%;
  width: 74.3%;
  left: 50%;
  transform: translate(-50%, -90%);
  font-size: 14px;
  font-weight: 400;
  line-height: 180%;
  font-size: clamp(14px, 3vw, 28px);
}

@media screen and (max-width: 320px) {
.mtop_corner_head_situation p  {
	top: 95%;
    width: 90%;
  }
}

/* ============================================ 
人気記事 popular
/* ============================================ */
.popular_block {
  background-size: 100%;
  background-repeat: no-repeat;
}

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

.mtop_corner_head_popular h2 {
  position: absolute;
  top: 55%;
  width: 100%;
}

.mtop_corner_head_popular h2.midashi_title_image img {
  width: 64%;
  min-width: 241px;
  margin: auto;
}

.mtop_corner_head_popular p {
  position: absolute;
  top: 91%;
  width: 74.3%;
  left: 50%;
  transform: translate(-50%, -90%);
  font-size: 14px;
  font-weight: 400;
  line-height: 180%;
}

/* ============================================ 
mtop 日運　幸運日
/* ============================================ */
.mtop_timeline_bg {
  padding: 0px 0px 0px 55px;
  background-image: url(../image/mtop/cal_arrow_1.sp.480.png),
    url(../image/mtop/cal_arrow_3.sp.480.png),
    url(../image/mtop/cal_arrow_2.sp.480.png);
  background-size: 12px, 12px, 12px;
  background-repeat: no-repeat, no-repeat, repeat-y;
  background-position: left 12px top 0px, left 12px bottom 0px,
    left 12px top 52px;
  min-height: 96px;
}

.mtop_timeline_date_bg {
  display: flex;
  align-items: center;
  position: absolute;
  width: 55px;
  height: 40px;
  top: 0%;
  bottom: 0;
  margin: auto;
  left: -55px;
}
.mtop_timeline_parent_box {
  position: relative;
  width: 100%;
  border-radius: 0px 20px 0px 0px;
  background: #fff;
  font-size: 14px;
  line-height: 180%;
  padding: 10px;
  font-weight: 400;
  margin-bottom: 16px;
  min-height: 96px;
}

.mtop_timeline_month {
  color: #87785b;
  font-weight: 700;
}