.article_inner_list{
  display: grid;
  grid-template-columns: repeat(auto-fill,316px);
  grid-gap: 28px 26px;
  flex-wrap: wrap;
  justify-content: flex-start;
  padding-top: 20px;
}
.article_inner_list .block_S {
  margin: 0 auto;
}

#base h1 {
  margin: 12px auto;
  padding: 20px 0 0;
  width: calc(100% - 80px);
}

h2.article_ttl_h1 {
  margin: 40px auto 16px !important;
}

.outer_block_S {
  padding-top: 0% !important;
}

.share_area {
  width: calc(100% - 40px);
  margin: 32px auto 40px;
  max-width: 400px;
}
.oc_tw_btn {
  width: calc(100% - 40px);
  margin: 0 auto 20px;
}


[class^="oc_btn_"] {
  height: 62px;
  padding: 16px 12px;
  border-radius: 30px;
  width: calc(100% - 80px);
  margin: 0 auto;
  cursor: pointer;
  box-shadow: 4px 4px 0px 0px rgba(0, 0, 0, 0.1);
}

.oc_btn_sky {
  padding: 8px 12px;
}


.bg_col_sky {
  background: #000000;
  width: 100%;
  margin-bottom: 20px;
  box-shadow: none;
  height: 40px;
}


.f_marumin {
  font-family: "kinuta-maruminkiso-stdn", serif;
  font-weight: 400;
  color: #000000;
}



[class^="oc_btn_"] P {
  display: flex;
  justify-content: center;
  align-items: center;
}

.oc_btn_sky P::before {
  position: relative;
  content: '';
  background: url(./../image/oc/icon_x.png) no-repeat scroll 0 0/20px 20px;
  width: 20px;
  height: 20px;
  left: -4px;
}

.col_white {
  color: #fff;
}



.f_serif {
  font-family: serif;
}

.copy_box [class^="oc_text"] {
  padding: 12px 16px;
  border: 1px solid #E9E9E9;
  border-radius: 8px 8px 0 0;
  overflow-y: scroll;
  scrollbar-color: #E9E9E9 #fff;
  scrollbar-width: thin;
  max-height: 8vh;
}

[class^="oc_button"] {
  cursor: pointer;
  background: #E9E9E9;
  border-radius: 0 0 8px 8px;
  text-align: center;
  height: 28px;
}

[class^="oc_button"] img {
  width: 13px;
  height: 16px;
  margin-right: 8px;
}


@media screen and (max-width: 599px){
  .article_inner_list{
      width: calc(100% - 40px);
      margin: 0 auto;
      grid-template-columns: repeat(auto-fill,335px);
      gap: 20px;
  }
  #sidemenus #ranking .slider::-webkit-scrollbar {display: none;-webkit-appearance: none;}
  #sidemenus #ranking .slider{
    display: flex;
    overflow-x: scroll;
    scroll-behavior: smooth;
    -ms-overflow-style: none;
    scrollbar-width: none;
  }
  #sidemenus #ranking .block_M {
    width: 146px;
    min-width: 146px;
    height: 196px;
    margin-top: 10px;
    box-sizing: content-box;
    padding-left: 16px;
  }
  #ranking .block_M .rank {
    left: 8px;
  }
  #sidemenus #ranking .block_M:last-child {
    padding-right: 20px;
  }
}
#ranking .block_M.slick-slide .rank {
  left:8px;
}
.block_M.slick-slide {
  width: 146px;
  height: 196px;
  margin-top: 10px;
  box-sizing: content-box;
  padding-left:16px;
}
.block_M.slick-slide:first-child {
  padding-left:20px;
}
.block_M img {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  width: 100%;
  object-fit: cover;
  object-position: center center;
  height: 111px;
}
.is_pc .mini_motif img {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}
.block_L {
  box-shadow: 0px 0px 8px 0px #0000000D;
}
.block_L .mini_summary {
  background-color: #fff;
  display: block;
  margin: 0;
  min-height: 82px;
  min-width: 70px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
  padding: 12px 15px 16px;
}
.block_L h4 {
  margin-bottom: 8px;
  line-height: 18px;
}
.block_M .mini_summary {
  background: #fff;
  min-height: 83px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}
.block_M .mini_summary h4 {
  margin: 2px 12px 0;
  line-height: 1.4;
  font-size: 13px;
}
@media screen and (max-width: 599px) {
    .list_keyword .block_S .mini_summary h4 {
      margin-top: 0;
      margin-bottom: 8px;
      line-height: 14px;
    }
}
[class^="block"] P.caption {
  color: #72787A;
  font-size: 11px;
  width: auto;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-height: 14px;
}
.block_S .mini_summary {
  padding: 10px 20px 10px 12px;
}
.block_S .mini_summary_sp {
  padding: 2px 20px 10px 12px !important;
}
.block_S .mini_summary h4 {
  padding: 0 0 2px 0 !important;
}
SPAN.box_tag {
  padding: 6px 0 4px 0px !important;
}
.mini_summary SPAN.box_tag::before {
  top: 3px !important;
  left: -6px !important;
}
.mini_summary .right_block::after{
  content: '';
  background: url(./../image/common/points/arrow_right.svg) no-repeat scroll center center / 12px 12px;
  width: 12px;
  height: 12px;
  position: absolute;
  right: 20px;
  top: calc(50% - 6px);
}
@media screen and (max-width: 599px) {
    .other-series {
      margin-top: 80px;
      margin: 0 auto;
      width: calc(100% - 40px);
    }
}
.other-series-list {
  max-width: 520px;
  margin: auto;
  margin-top: 20px;
}
.other-series-list_li {
  background: #fff;
  border: 1px solid #EAE9E2;
  border-radius: 12px;
  position: relative;
  padding: 20px;
  min-height: 97px;
  z-index: 2;
  margin-top: -5px;
}
@media screen and (max-width: 599px) {
    .other-series-list_li {
      background: #fff;
      border: 1px solid #EAE9E2;
      border-radius: 12px;
      position: relative;
      padding: 17px !important;
      min-height: 106px;
      z-index: 2;
    }
}
@media screen and (max-width: 599px) {
    .other-series-list_link{
      gap: 16px;
    }
}
.other-series-list_li::after {
  content: '';
  display: block;
  width: 7px;
  height: 7px;
  border-top: 1px solid #1F2121;
  border-left: 1px solid #1F2121;
  transform: rotate(135deg);
  position: absolute;
  right: 15px;
  top: 47px;
}
.other-series-list_link {
  display: flex;
  align-items: center;
  font-size: 14px;
  gap: 16px;
}
.other-series-list_imgwrap{
  position: relative;
  width: 117px;
  height: 66px;
}
.other-series-list_img {
  border-radius: 5px;
  position: absolute;
  z-index: 3;
}
.other-series-list_imgback1 {
  background: #D6D6D6;
  width: 108px;
  height: 58px;
  position: absolute;
  z-index: 2;
  top: 5px;
  left: 6px;
  border-radius: 5px;
}
.other-series-list_imgback2 {
  background: #E6E6E6;
  width: 108px;
  height: 58px;
  position: absolute;
  z-index: 1S;
  top: 10px;
  left: 10px;
  border-radius: 5px;
}
@media screen and (max-width: 599px) {
    .other-series-list_title {
      max-width: 149px;
    }
}
.banner_under_shadow {
  background: radial-gradient(50% 50% at 50% 50%, #EFEEEC 0%, rgba(239, 238, 236, 0) 100%);
  width: 100%;
  height: 24px;
  position: relative;
  bottom: 12px;
  z-index: 1;
  margin: 0 auto;
}
#contents {
  background: #fff;
  padding-bottom: 40px;
}
#contents_inner {
/*  padding-bottom: 2em;*/
}
.divider_block{
  background: url("./../image/common/divider_block.svg") no-repeat scroll center center/36px 36px;
  width: 36px;
  height: 36px;
  margin: 2em auto;
}
.arrow_btm{
  background: url("./../image/tarot/arrow_btm.svg") no-repeat scroll center center/36px 36px;
  width: 36px;
  height: 36px;
  margin: 2em auto;
}
#for_more_detail{
  text-align: center;
  padding: 1em 0 0;
}

#for_more_detail P {
  font-size: 16px;
  position: relative;
  margin: 40px auto 0;
  display: flex;
  justify-content: center;
}

#for_more_detail P::before {
  position: absolute;
  content: '';
  background: url("./../image/common/line.svg") no-repeat scroll center center/80px 5px;
  width: 100%;
  height: 5px;
  top: -10px;
  margin: 0 auto;
}
#for_more_detail P::after {
  position: absolute;
  content: '';
  background: url("./../image/tarot/for_more_details.svg") no-repeat scroll center center/110px 13px;
  width: 100%;
  height: 13px;
  top: -30px;
  margin: 0 auto;
}
.telling{
  background: #F6F5EE;
  margin: 0 auto;
}


h2.article_h2 {
  font-size: 18px;
  text-align: left;
  border-bottom: 1px solid #1F2121;
  position:relative;
}
h2.article_h2 P{
  z-index: 10;
  position: relative;
}
.articles h2::before {
  position: absolute;
  left: -23px;
  height: 80px;
  font-size: 80px;
  top: -60px;
  font-family: stencil-creek, sans-serif;
  color:#F6F5EE;
}

.articles h2:nth-of-type(1)::before { content: "01"; }
.articles h2:nth-of-type(2)::before { content: "02"; }
.articles h2:nth-of-type(3)::before { content: "03"; }
.articles h2:nth-of-type(4)::before { content: "04"; }
.articles h2:nth-of-type(5)::before { content: "05"; }
.articles h2:nth-of-type(6)::before { content: "06"; }
.articles h2:nth-of-type(7)::before { content: "07"; }
.articles h2:nth-of-type(8)::before { content: "08"; }
.articles h2:nth-of-type(9)::before { content: "09"; }
.articles h2:nth-of-type(10)::before { content: "10"; }
.articles h2:nth-of-type(11)::before { content: "11"; }
.articles h2:nth-of-type(12)::before { content: "12"; }
.articles h2:nth-of-type(13)::before { content: "13"; }
.articles h2:nth-of-type(14)::before { content: "14"; }
.articles h2:nth-of-type(15)::before { content: "15"; }
.articles h2:nth-of-type(16)::before { content: "16"; }
.articles h2:nth-of-type(17)::before { content: "17"; }
.articles h2:nth-of-type(18)::before { content: "18"; }
.articles h2:nth-of-type(19)::before { content: "19"; }
.articles h2:nth-of-type(20)::before { content: "20"; }


.articles ul{
  margin: 1em auto;
}
.articles ul.dot {
  width: 100%;
  margin: 1em auto;
}
.articles ul.dot li{
  position: relative;
  padding-left: 15px;
}

.articles ul.dot li:before {
  content: "";
  position: absolute;
  top: 0.5em;
  left: 0;
  width: 7px;
  height: 7px;
  background-color: #1F2121;
  border-radius: 50%;
}
.articles ul.checked li{
  position: relative;
  padding-left: 10px;
}
.articles ul.checked li:before {
  content: "";
  position: absolute;
  top: 0.3em;
  left: 0;
  -webkit-transform: rotate(50deg);
  -ms-transform: rotate(50deg);
  transform: rotate(50deg);
  width: 5px;
  height: 10px;
  border-right: 3px solid #1F2121;
  border-bottom: 3px solid #1F2121;
  margin-left: 4px;
}
.articles ol.number{
  margin: 1em auto;
}
.articles ol.number li{
  list-style: decimal;
  margin-left: 1em;
}
.articles P.text_sub{
  background: #F6F5EE;
  margin: 1em auto;
  padding: 1em;
  font-size: 0.8em;
}

.sub_title{
  text-align: center;
  font-size: 12px;
  margin: 2em auto 3em;
}
.sub_title b{
  font-size: 14px;
  font-weight: normal;
  display: block;
  padding-bottom: 0.5em;
}
.telling {
  padding: 1px 20px 20px;
  background: #F6F5EE;
  margin: 0 auto;
}
.telling li{
  font-size: 14px;
  line-height: 2;
  padding-left: 2em;
  position: relative;
}
.telling span{
  font-size: 14px;
  line-height: 2;
  padding-left: 4em;
  position: relative;
  display: block;
  padding-left: 50px;
}
.telling span::before{
  content: '';
  width: 8px;
  height: 8px;
  border: 0px;
  border-top: solid 2px #000;
  border-right: solid 2px #000;
  -ms-transform: rotate(180deg);
  -webkit-transform: rotate(180deg);
  transform: rotate(180deg);
  position: absolute;
  top: 65%;
  left: 0;
  margin-top: -8px;
  margin-left: 37px;
}
.telling li.number::before{
  position: absolute;
  left: 0;
  width: 2em;
  height: 16px;
  top:0;
  color: #B49A2E;
  font-family: stencil-creek, sans-serif;
  font-size: 16px;
}
.telling li.number:nth-of-type(1)::before{  content: '01'; }
.telling li.number:nth-of-type(2)::before{  content: '02'; }
.telling li.number:nth-of-type(3)::before{  content: '03'; }
.telling li.number:nth-of-type(4)::before{  content: '04'; }
.telling li.number:nth-of-type(5)::before{  content: '05'; }
.telling li.number:nth-of-type(6)::before{  content: '06'; }
.telling li.number:nth-of-type(7)::before{  content: '07'; }
.telling li.number:nth-of-type(8)::before{  content: '08'; }
.telling li.number:nth-of-type(9)::before{  content: '09'; }
.telling li.number:nth-of-type(10)::before{  content: '10'; }
.telling li.number:nth-of-type(11)::before{  content: '11'; }
.telling li.number:nth-of-type(12)::before{  content: '12'; }
.telling li.number:nth-of-type(13)::before{  content: '13'; }
.telling li.number:nth-of-type(14)::before{  content: '14'; }
.telling li.number:nth-of-type(15)::before{  content: '15'; }
.telling li.number:nth-of-type(16)::before{  content: '16'; }
.telling li.number:nth-of-type(17)::before{  content: '17'; }
.telling li.number:nth-of-type(18)::before{  content: '18'; }
.telling li.number:nth-of-type(19)::before{  content: '19'; }
.telling li.number:nth-of-type(20)::before{  content: '20'; }

P.topic {
  text-align: center;
}
/*.c_keyword4, .c_keyword2, .c_keyword {
  margin: 1em auto;
  display: flex;
  align-items: center;
  justify-content: center;
}
.c_keyword::before {
  margin-right: 1em;
}
.c_keyword::before, .c_keyword::after {
  border-top: 1px solid;
  content: "";
  width: 1em;
}
.c_keyword::after {
  margin-left: 1em;
}
.c_keyword::before, .c_keyword::after {
  border-top: 1px solid;
  content: "";
  width: 1em;
}
.c_keyword5{
  border: 1px solid #1F2121;
  width: 100%;
  font-size: 14px;
  border-radius: 50px;
  width: 113px;
  padding: 4px 12px;
  text-align: center;
}
.c_keyword6{
  font-weight: bold;
  padding: 10px 0;
}
h1 span,h2 span,h3 span,h4 span{display:block;}
*/

.i_card_txt{line-height:170%;}
P.text_main {
  margin: 0 auto;
  line-height:170%;
  font-size: 15px;
}

.article_h3.sub  {
  margin: 1em auto;
  display: flex;
  align-items: center;
}
.article_h3.sub:after {
  content: "";
  background: url("./../image/tarot/sub_right.svg") no-repeat scroll center right/5px 24px;
  width: 15px;
  height: 24px;
}
.article_h3.sub:before{
  content: "";
  background: url("./../image/tarot/sub_left.svg") no-repeat scroll center left/5px 24px;
  width: 15px;
  height: 24px;
}
.article h4 {
  border-bottom: 1px dashed #1F2121;
  line-height: 2em;
  margin: 2em auto 0;
  font-weight: 500;
}
.article.interpretation h4 {
  border-bottom: 1px dashed #1F2121;
  line-height: 2em;
  font-weight: 500;
  margin: 0 auto;
}

.moon_phase{
  display: flex;
  justify-content: space-between;
}
.moon_phase [class^="color_line"] {
  position: absolute;
  width: 1px;
  height: 100%;
  top: 1px;
  left: 25px;
}
.moon_phase.tarot [class^="color_line"] {
  left: 37px;
  height: 150%;
}
.c_keyword_txt{
  display: table;
  margin: auto;
  text-align: left;
}
.moon_phase.tarot .color_line{
  background-image: linear-gradient(to bottom, #C4D6D4 0%, #C4D6D4 100%);
}
.article .moon_phase.tarot  h4{
  margin-top:0;
  line-height: 25.5px;
  padding-bottom: 5px;
  margin-bottom:20px;
}
.article .moon_phase.tarot  P{
  line-height: 22.5px;
}

.moon_phase .color_line1{
  background-image: linear-gradient(to bottom, #C4D6D4 0%, #D2D0A6 100%);
}
.moon_phase .color_line2{
  background-image: linear-gradient(to bottom, #D2D0A6 0%, #DDCB80 100%);
}
.moon_phase .color_line3{
  background-image: linear-gradient(to bottom, #DDCB80 0%, #D2D0A6 100%);
}
.moon_phase .color_line4{
  background-image: linear-gradient(to bottom, #D2D0A6 0%, #C4D6D4 100%);
}
.moon_phase .left_box{
}
.article .moon_phase .left_box{
  width:50px;
  position: relative;
}
.article .moon_phase.tarot .i_card_img{
  z-index: 0;
  position: relative;
}
.article .moon_phase.tarot .left_box{
  width:75px;
  position: relative;
}
.article .moon_phase .right_box{
  width:270px;
}
.article .moon_phase.tarot .right_box{
  width:210px;
}

.first_quarter_moon{  
  background: url("./../image/moon/first_quarter_moon.svg") no-repeat scroll center center/50px 50px;  
  width:50px;
  height:50px;
  display: block;
}
.new_moon{  
  background: url("./../image/moon/new_moon.svg") no-repeat scroll center center/50px 50px;  
  width:50px;
  height:50px;
  display: block;
}
.full_moon{  
  background: url("./../image/moon/full_moon.svg") no-repeat scroll center center/50px 50px;  
  width:50px;
  height:50px;
  display: block;
}
.warning_moon{  
  background: url("./../image/moon/warning_moon.svg") no-repeat scroll center center/50px 50px;  
  width:50px;
  height:50px;
  display: block;
}
h1#todaysmoon P {
  position: relative;
  display: inline-block;
}
h1#todaysmoon P::before {
  position: absolute;
  content: '';
  background: url("./../image/common/line.svg") no-repeat scroll center center/80px 5px;
  width: 100%;
  height: 5px;
  top: -10px;
  left: 0;
}
h1#todaysmoon P::after {
  position: absolute;
  content: '';
  background: url("./../image/moon/todaysmoon.svg") no-repeat scroll center center/89px 15px;
  width: 100%;
  height: 15px;
  top: -30px;
  left: 0;
}

.articles P.text_sub{
  background: #F6F5EE;
  margin: 1em auto;
  padding: 1em;
  font-size: 0.8em;
}


@media screen and (max-width: 599px){
  .moon_phase.tarot{
    width:313px;
  }
  #for_more_detail{
    text-align: center;
    padding: 2em 0 0;
  }
  .article.interpretation, .article.interpretation h3, .articles .article, .telling,   #ez-toc-container,#for_more_detail P, #for_more_detail {
    width: 90%;
    margin: 0 auto;
  }
  h2.article_h2 {
    width: 90%;
    margin: 3em auto 1em;
  }
  #sidemenus .week.bg_white{
    width:calc(100% - 20px);
    margin:0 auto;
  }
  .article.sign_interpretation {
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-template-areas: 
                "a  a"
                "b  c"
                "d  d";
    column-gap: 20px;
    row-gap: 20px;
    margin: 2em auto 0;
  }
  .article.sign_interpretation h3{
    grid-area: a;
    width: 100%;
    margin: 0 auto;
  }
  .article.sign_interpretation .i_card_img{
    grid-area: b;
    width: 120px;
    height: 120px;
  }
  .article.sign_interpretation .i_card_img.mini{
    width: 70px;
    height: 70px;
  }
  .article.sign_interpretation .i_card_img img{
    width: 100%;
    height: auto;
  }

  .article.sign_interpretation .i_card_txt:nth-of-type(2){
    grid-area: c;
    width: 100%;
  }
  .article.sign_interpretation .i_card_txt:nth-of-type(3){
    grid-area: d;
    width: 100%;
    font-size: 15px;
    text-align: justify;
  }


}
@media screen and (min-width: 600px) {
  #for_more_detail{
    text-align: center;
    padding: 1em 0 0;
  }
  .article.interpretation ,
  .article.sign_interpretation,
  .article.interpretation h3,
  .articles .article,
  .topic_img ,
  P.text_main ,
  h2.article_h2 ,
  .telling,
  #ez-toc-container,
  #for_more_detail P ,
  #for_more_detail{
    width: 540px;
    margin: 0 auto;
  }
  .article.motif .right P{
    width: 280px;
    padding-left: 10px;
  }
  #for_more_detail P, #for_more_detail {
    margin: 2em auto 0;
  }
  .article.motif {
    display:flex;
  }
  .article.interpretation {
    display: grid;
    grid-template-areas: 
                "a  a"
                "b  c"
                "b  d";
    column-gap: 20px;
    row-gap: 20px;
    margin: 2em auto 0;
  }
  .article.interpretation h3{
    grid-area: a;
    margin: 0 auto;
  }
  .topic_img{
    margin: 1em auto;
  }
  .articles h2{
    margin: 4em auto 1em;
  }
  .article.advice {
    margin: 3em auto 0;
  }
  .topic_img{
    margin: 1em auto ;
  }
  #for_more_detail P{
    margin: 2em auto 0;
  }
  h2#main {
    width: 90%;
  }
  .about_author {
    width: 90%;
  }
  .telling {
    padding: 1px 40px 20px;
  }

  .article .moon_phase .right_box{
    width:450px;
  }
  .article .moon_phase.tarot .right_box{
    width:437px;
  }

  .article.sign_interpretation {
    display: grid;
    grid-template-columns: 120px 1fr;
    grid-template-areas: 
                "a  e"
                "b  c"
                "b  d";
    column-gap: 20px;
    row-gap: 20px;
    margin: 2em auto 0;
  }

  .article.sign_interpretation h3{
    grid-area: a;
    margin: 0 auto;
  }
  .article.sign_interpretation .i_card_img{
    grid-area: b;
    width: 120px;
    height: 120px;
  }
  .article.sign_interpretation .i_card_img.mini{
    width: 70px;
    height: 70px;
  }

  .article.sign_interpretation.mini .i_card_txt:nth-of-type(2){
    width: 100%;
  }
  .article.sign_interpretation .i_card_txt:nth-of-type(2){
    grid-area: c;
    width: 400px;
    height: 120px;
  }

}
.keyword_inner{
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
}
#ranking .rank {
  width: 30px;
  height: 30px;
  border-radius: 50px;
  background: #DDCB80;
  color: #fff;
  text-align: center;
  line-height: 30px;
  position: absolute;
  left: -8px;
  top: -8px;
}
.koyomi_box{
  width: 255px;
  height: 255px;
  margin: 20px auto;
}

/* 20220728 �m���C���㏑���������� */

/* /article/ */
@media only screen and (max-width: 599px){
    .block_S{
    padding: 0;
    width: 100% !important;
}
}

@media only screen and (min-width: 600px){

.block_S {
    margin: 10px auto 10px;
    width: 316px;
    /*float: left;*/
}
#sidemenus .block_S {
  width: auto;
}
#contents_inner{
padding: 0;
}

/* flex→gridに変更 20220802
#contents_inner article.block_S:nth-of-type(3n-1) {
    margin-left: 14px;
    margin-right: 14px;
}*/
}

.radius12{
  border: 1px solid #1F2121;
  border-radius: 12px;
  width: 73px;
  padding: 8px;
}
.bg_black_radius{
  background: #1F2121;
  color: #fff;
  font-size: 10px;
  line-height: 18px;
  padding: 3px;
  width: 73px;
  display: block;
  text-align: center;
  border-radius: 50px;
  margin-bottom: 20px;
}

@media only screen and (max-width: 599px){
  .fortune_cornerA_bg{
    width:295px;
    margin: 0 auto;
  }
  .fortune_cornerA .card_ura{
    width: 85px;
    height: 140px;
  }
  .fortune_cornerA{min-height:200px;    background: #F6F5EE;    padding: 10px 0;}
  .fortune_cornerB .card_ura ,
  .fortune_cornerB .card_omote{
    width: 300px;
    height: auto;
    position: absolute;
    text-align: left;
  }

  .fortune_cornerB img {
    width: 300px;
    height: auto;
  }
  .fortune_cornerB_inner {
    height: 181px;
    width: 295px;
    margin: 0 auto;
  }
  .fortune_cornerA .article.interpretation {
    margin: 1em auto;
  }
  .fortune_cornerB {
    width: 335px;
    margin: 0 auto;
    background: #F6F5EE;
    padding: 20px ;
  }
  .fortune_cornerB .first_txt{
    padding-bottom: 10px;
  }

}
@media only screen and (min-width: 600px){
  .fortune_cornerA_bg{
    width:392px;
    margin: 0px auto;
  }
  .fortune_cornerA .card_ura{
    width: 118px;
    height: 199px;
  }
  .fortune_cornerA{
    min-height:140px;
    background: #F6F5EE; 
    padding: 20px 0;
    width: 540px;
  }
  .fortune_cornerB .card_ura ,
  .fortune_cornerB .card_omote{
    width: 400px;
    height: auto;
    position: absolute;
    text-align: left;
  }
  .fortune_cornerA .article.interpretation{
    width: 500px;
    margin: 0 auto ;
  }

  .fortune_cornerB img {
    width: 400px;
    height: auto;
  }
  .fortune_cornerB_inner {
    height: 242px;
    width: 400px;
    margin: 0 auto;
  }
  .fortune_cornerB {
    width: 540px;
    margin: 0 auto;
    background: #F6F5EE;
    padding: 20px ;
  }
  .fortune_cornerB .first_txt{
    padding-bottom: 20px;
  }
}
.fortune_cornerA span.choice{
  background: #fff;
  width: 50px;
  height: 50px;
  display: block;
  font-size: 0.9em;
  line-height: 50px;
  text-align: center;
  border-radius: 50px;
  left: calc( 50% - 25px);
  top: 10px;
  position: relative;
}
.u-mr20{margin-right: 20px;}
.fortune_cornerA .card_ura{
  position: relative;
  cursor: pointer;
}
.fortune_cornerA .center_block {
  float: left;
}
.fortune_cornerA [class^="choice_txt"]{display: none;}
.fortune_cornerA [class^="choice_txt"].active {
    display: block;
    animation: appear 1.5s ease;
}
.fortune_cornerA .fortune_cornerA_bg.none{
//  visibility: hidden;
  display: none;
  opacity: 0;
  transition: 0.5s;
}
@keyframes appear {
  0%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}
.fortune_cornerB .card_ura img {
  transform-origin: center top 0px;
  cursor: pointer;
}
.fortune_cornerB .first_txt.none{
  display: none!important;
}
.fortune_cornerB .c_keyword2,
.fortune_cornerB .c_keyword,
.fortune_cornerB .text_main{
  display: none;
}
.fortune_cornerB .c_keyword2.active ,
.fortune_cornerB .c_keyword.active ,
.fortune_cornerB .text_main.active {
    display: flex;
    animation: appear 1.5s ease;
}

@media screen and (min-width: 600px){
  #today_fortune .article_inner {
      display: flex;
      gap: 39px;
  }
  #tarot_today_3 {
    width: 540px;
    margin: 0px auto 0;
  }
  #tarot_today_3 #tarot_today_inner {
    display: flex;
    gap: 12px;
  }
  #today_fortune .article_inner #tarot_today_3 .box {
    width: 164px;
    position: relative;
  }
  #today_fortune .article_inner #tarot_today_3 .box img {
    width: 164px;
    height: 125px;
  }
  #today_fortune .box img {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    width: 100%;
    object-fit: cover;
    object-position: center center;
  }
  #today_fortune .box P.caption {
    color: #72787A;
    font-size: 11px;
    width:auto;
  }
  #today_fortune .box .box_bottom {
    min-height: 77px;
    padding: 12px 16px;
  }
  .box_bottom {
    background-color: #fff;
    display: block;
    margin: 0;
    padding: 4px 16px 12px;
    min-height: 65px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }
}
@media screen and (max-width: 599px){
  #today_fortune .article_inner #tarot_today_inner {
    grid-template-columns: repeat(auto-fill,335px);
    display: grid;
    gap: 10px;
    padding-top: 20px;
  }
  .article_inner #tarot_today_inner {
    width: calc(100% - 40px);
    margin: 0 auto;
  }
  #tarot_today_inner .box {
    position: relative;
  }

  #tarot_today_inner .box .box_bottom {
    border-top-right-radius: 8px;
    border-bottom-right-radius: 8px;
    border-bottom-left-radius: 0;
    background: #fff;
    height: 76px;
    float: left;
    width: calc(100% - 100px);
    padding: 12px 16px;
  }
  .box_bottom {
    background-color: #fff;
    display: block;
    margin: 0;
    padding: 4px 16px 12px;
    min-height: 65px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
  }
  #today_fortune .box P.caption {
    color: #72787A;
    font-size: 11px;
    line-height: 1.3;
    margin-top: 4px;
  }
  #today_fortune img {
    border-top-left-radius: 8px;
    border-bottom-left-radius: 8px;
    width: 100%;
    object-fit: cover;
    object-position: center center;
  }
  #tarot_today_inner img {
    width: 100px;
    height: 76px;
    float: left;
  }
}
.col_gray{color:#72787A;}