/* common
 * ========================================================================== */
.see_all{
  border: 1px solid #1F2121;
  border-radius: 16px;
  font-size: 13px;
  width: 118px;
  margin: 20px auto 0;
  text-align: center;
  height: 32px;
  line-height: 32px;
}
.go_premium{
  width: 100%;
}


[class^="box"]{
  position: relative;
}
.block6 P.box_tag {
  color: #72787A;
}
P.box_tag ,
P.box_tag_moon {
  font-size: 12px;
  margin: 0;
}
#pickup P.box_tag ,
#pnk_grp P.box_tag {
  z-index: 1;
}
SPAN.box_tag_moon::before,
SPAN.box_tag::before,
P.box_tag::before{
  position: absolute;
  content: '';
  width: 16px;
  height: 16px;
  background:#EEE4BA;
  border-radius:50px;
  top: -3px;
  left: -5px;
  z-index: -1;
}
SPAN.box_tag_moon::before{
  background:#DAE2E2;
}
SPAN.box_tag_moon::before,
SPAN.box_tag::before{
  left: 5px;
  top: 7px;
}

.box_title{
  -webkit-line-clamp: 1;
  font-size: 14px;
}
.box_tag h4{
  font-size: 15px;
  -webkit-line-clamp: 2;
}
SPAN.box_tag,
SPAN.box_tag_moon{
  font-size: 11px;
  display: block;
  padding:10px 0 0 12px;
  z-index: 1;
}
SPAN.box_tag B{
  font-weight: normal;
  display: inline-block;
  position: relative;
  padding-left: 1em;
  color:#838179;
}
SPAN.box_tag B::before{
  position: absolute;
  content: '｜';
  width: 16px;
  height: 16px;
  z-index: -1;
  left: 0;
}

.box_bottom{
  background-color: #fff;
  display: block;
  margin: 0;
  padding: 10px;
  min-width: 70px;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;  
}
[class^="box"] span.icon {
  position: absolute;
  top: -10px;
  left: 10px;
  font-size: 10px;
  background-color: #1F2121;
  color: #fff;
  border-radius: 50px;
  width: 45px;
  text-align: center;
  line-height: 16px;
  height: 16px;
}
/* .block6 
 * ========================================================================== */

.block6 [class^="box"] img{
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  width: 100%;
  object-fit: cover;
  object-position: center center;
}


/* #today .block4
 * ========================================================================== */
#today {margin: 0 auto;}
.block4{
  border-radius: 12px;
  overflow: hidden;
  margin: 0 auto;
}
[class^="block_"]{
  position: relative;
}
.block4 .block_L,
.block4 .block_R{
  min-height: 210px;
  background-color: #fff;
}
.block4 h3 {
  text-align: center;
  padding: 5px 0;
  font-size: 14px;
}
.block4 .rank {font-size: 0.8em;}
.block4 .score {font-size: 12px;line-height: 12px;}
.block4 .rank ,
.block4 .score {
  text-align: center;
  margin: 0 auto;
  height: 18px;
  line-height: 18px;
  color:#5D5F5F;
}
.block4 .motif {
  width:80px;
  height: 80px;
  margin: 0 auto;
}
.block4 .card_ura img{
  transform-origin: center top 0px;
}
.block4 .tarot1_card1 {
  margin:2px auto 30px;
  width: 36px;
  height: 56px;
  padding-top: 10px;
}
.block4 .tarot1_box .txt_card {
  position: absolute;
  top: 40%;
  text-align: center;
  width: 150%;
  color: #F18D8D;
  text-shadow: 0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;
  display: none;
  left: -25%;
}

.block4 .tarot1_box .goto.first ,
.block4 .tarot1_box .goto.second {
  position: absolute;
  left: 75px;*/
}
.block4 .tarot1_box .goto.second {
  display: none;
}

.block4 .tarot1_box .goto.second a{
  color:#fff;
}

.block4 .tarot1_box [class^="card_"] {
  width: 36px;
  height: 54px;
  position: absolute;
  text-align: left;
}

.block4 .goto {
  font-size: 0.8em;
  background-color: #DDCB80;
  border-radius: 50px;
  margin: 15px auto;
  text-align: center;
  color: #fff;  
  display: block;
  width: 120px;
  height: 28px;
  line-height: 28px;
  cursor: pointer;
}

/* .block_S
 * ========================================================================== */

.block_S .mini_motif{
  width: 100px;
  height: 76px;
  float: left;
  margin: 0;
}
.block_S .mini_motif img{
  width:100%;
  height:100%;
  border-top-left-radius: 8px;
  border-bottom-left-radius: 8px;
  object-fit: cover;
  object-position: center center;
}
.more_tarot .block_S .mini_motif img{
  border-radius: 8px;
}  
.block_S {
  margin: 16px auto 0;
}
.block_S .mini_summary{
  border-top-right-radius: 8px;
  border-bottom-right-radius: 8px;
  background: #fff;
  height: 76px;
  float: left;
  width: calc(100% - 100px);
}
.block_S h4.box_summary{
  padding: 0 12px 0;
  font-size: 13px;
  margin: 0;
  font-weight: 400;
  line-height: 1.3;
  border: none;
}
@media only screen and (min-width: 600px) {
  #sidemenus .block_S h4.box_summary{
    font-size: 13px;
  }  
}

/* .week
 * ========================================================================== */
#schedule_grp .week,
#schedule_grp .keyword{
  width: 90%;
  margin: 0 auto;
}
#schedule_grp .title_section{
  margin: 2em auto;
}

.week .title_section{
  position: relative;
}
.week h3 {
  position: relative;
  font-size: 1.1em;
  text-align: center;
  margin: 0 auto;
  line-height: 3em;
}
.week h3 P{
  position:relative;
  display: inline-block;
}

.week h3 P::before {
  position: absolute;
  content: '';
  background: url("./../image/schedule_point.svg") no-repeat scroll 0 0/50px 24px;
  width: 50px;
  height: 24px;
  left: -45px;
}

.week .next-prev-button {
  position: absolute;
  top: 1rem;
}
.week .next-prev-button button{
  cursor: pointer;
  color: #1F2121;
  font-size: 1rem;
  background: none;
  border: none;
}
.week .next-prev-button.left {
  left: 1rem;
}
.week .next-prev-button.right {
  right: 1rem;
}
.day_box .left_block{
  width: 50px;
}
.day_box .right_block{
  width: 83%;
  background-color: #fff;
  min-height: 50px;
  box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.05);
  border-radius: 12px;
}
.day_box .right_block P{
  font-size: 0.8em;
  vertical-align: top;
  display: inline-block;
  padding: 10px;
}
.day_box .left_block P{
  font-size: 0.8em;
}
.day_box {
  margin-bottom: 16px;
}

/* #pickup
 * ========================================================================== */

#pickup [class^="box"] img{
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  width: 100%;
  object-fit: cover;
  object-position: center center;
}
#pickup .boxM{
  margin-top: 10px;
}
#pickup .boxL{
  margin-top: 10px;
}
#pickup .boxL img{
  /*height: 21.7vh;*/
  height: 176px;
}
#pickup .boxM img{
  /*height: 16.5vh;*/
  height: 120px;
}
#pnk_grp,
#pickup{
  width: 90%;
  margin: 3.5em auto 0;
}

#pickup .boxL{
  grid-area: b;
  width: 100%;
}
#pickup .boxM:nth-child(1) {
  grid-area: a;
  width: 100%;
}
#pickup .boxM:nth-child(3) {
  grid-area: c;
  width: 100%;
}
#pickup .article_inner {
  display: grid;
  grid-template-rows: 1fr ;
  column-gap: 10px;
  row-gap: 10px;
}




/* #keyword_grp (#today, #popular, #related, #news)
 * ========================================================================== */


#keyword_grp {
  margin-top: 3em;
  width: 90%;
  margin: 0 auto;
}
#today h2{
  text-align: center;
}
#today h2 P{
  position:relative;
  display: inline-block;
  font-size: 20px;
}

#today h2 P::after {
  position: absolute;
  content: '';
  background: url("./../image/today/today_point.svg") no-repeat scroll 0 0/50px 24px;
  width: 50px;
  height: 24px;
  top: -10px;
  right: -40px;
}

.keyword{
  margin: 2em auto;
  position: relative;
}
.panel #related h2,
.panel #popular h2,
.panel #news h2{
  display:none;
}
.panel{
  display:none;
  position: relative;
}
.panel.is-show{
  display:block;
}
ul[class^="choice_btn"] {
  margin: 0 auto 1em;
  cursor:pointer;
}
ul[class^="choice_btn"] .left_block{
  border-top-left-radius: 12px;
  border-bottom-left-radius: 12px;
  background: #fff;
}
ul[class^="choice_btn"] .right_block{
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  background: #fff;
}
#pnk_grp ul[class^="choice_btn"] li{
  width: 49%;
  text-align: center;
  padding: 0.2em;
}
#pnk_grp ul[class^="choice_btn"] li.is-active{
  background: #EEE4BA;
  transition: all 0.2s ease-out;
}


/*****************************/

.keyword h3 .senjutsu ,
.keyword h3 .onayami ,
.keyword h3 .author ,
.keyword  h3 P.koyomi ,
.keyword  h3 P.tentai   {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1em;
}
.keyword  h3 P.senjutsu:before{
  background: url("./../image/keywords_point1.svg") no-repeat scroll center left/26px 18px;
  width: 26px;
  height: 18px;
  content: "";
  margin-right: 1em;
}
.keyword  h3 P.onayami:before{
  background: url("./../image/keywords_point2.svg") no-repeat scroll center left/26px 18px;
  width: 26px;
  height: 18px;
  content: "";
  margin-right: 1em;
}
.keyword  h3 P.author:before{
  background: url("./../image/keywords_point3.svg") no-repeat scroll center left/26px 18px;
  width: 26px;
  height: 18px;
  content: "";
  margin-right: 1em;
}

.keyword  h3 P.tentai:after {
  content: "";
  background: url("./../image/planet_point2.svg") no-repeat scroll center right/18px 18px;
  width: 18px;
  height: 18px;
  margin-left: 1em;
}
.keyword  h3 P.tentai:before{
  background: url("./../image/planet_point1.svg") no-repeat scroll center left/26px 18px;
  width: 26px;
  height: 18px;
  content: "";
  margin-right: 1em;
}

.keyword  h3 P.koyomi:after {
  content: "";
  background: url("./../image/calendar_point2.svg") no-repeat scroll center right/18px 18px;
  width: 18px;
  height: 18px;
  margin-left: 1em;
}
.keyword  h3 P.koyomi:before{
  background: url("./../image/calendar_point1.svg") no-repeat scroll center left/26px 18px;
  width: 26px;
  height: 18px;
  content: "";
  margin-right: 1em;
}


.keyword span{
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  background: #fff;
  border-radius: 20px;
  padding: 8px 15px;
  margin-bottom: 7px;
  font-size: 13px;
  line-height: 13px;
}



/* #tarot 
 * ========================================================================== */
#tarot h2 P.tarot   {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1em;
  font-size: 18px;
}

#tarot  h2 P.tarot:after {
  content: "";
  background: url("./../image/tarot/tarot_point2.svg") no-repeat scroll center right/28px 26px;
  width: 28px;
  height: 26px;
  margin-left: 1em;
}
#tarot  h2 P.tarot:before{
  background: url("./../image/tarot/tarot_point1.svg") no-repeat scroll center left/52px 40px;
  width: 52px;
  height: 40px;
  content: "";
  margin-right: 0.5em;
  top: -10px;
  position: relative;
}

#tarot{
  margin: 0 auto;
}
#tarot P.box_title{
  padding: 20px 0 0 20px;
  font-size: 20px;
}
#tarot .summary b{
  font-size: 16px;
  font-weight: 400;
}
#tarot .summary{
  font-size: 12px;
  padding: 20px 0 0 20px;
}
#tarot [class$="_box"] img{
  width:80px;
  height:112px;
}
#tarot .txt_card {
  position: absolute;
  top: 175px;
  font-size: 0.8em;
  text-align: center;
  width: 80px;
  color: #F18D8D;
  text-shadow: 0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff,0 0 3px #fff;
  display: none;
}
#tarot .goto.second {
  display: none;
}
#tarot .goto.second a{
  color:#fff;
}

#tarot [class^="card_"] {
  width: 80px;
  height: 112px;
  position: absolute;
  text-align: left;
}
#tarot .goto {
  width: 100%;
  margin:0 auto;
}
#tarot .goto P{
  background-color: #1F2121;
  border-radius: 50px;
  margin: 8px auto;
  text-align: center;
  font-size: 14px;
  color: #fff;  
  display: block;
  width: 118px;
  height: 28px;
  line-height: 28px;
  cursor: pointer;
}
#tarot .choice {
  text-align: center;
  font-size: 0.8em;
}
#tarot [class$="_inner"] [class$="_block"]{
  width: 80px;
  height: 112px;
}
#tarot .rec_card {
  text-align: center;
  font-size: 0.9em;
  color: #F18D8D;
  opacity:0;
  position: absolute;
  width: 100%;
  top: 230px;
}

#tarot .slick-initialized .slick-slide {
  margin: 0 10px 0;
  min-height: 292px !important;
}
.slick-track {
  display: flex;
}
/* #tarot .card2_box
 * ====================== */
.tarot2_box{
  background: #FFF;
  border-radius: 10px;
  width: 274px;
  vertical-align: top;
  height: 292px;
  position: relative;
  width: 275px;
}
.tarot2_inner{
  width: 192px;
  height: 155px;
  margin: 0 auto;
}

.tarot2_box .goto.first ,
.tarot2_box .goto.second {
  position: absolute;
  top: 245px;
}


/* #tarot .tarot3_box
 * ====================== */

#tarot .tarot3_box{
  background: #FFF;
  border-radius: 10px;
  width: 344px;
  vertical-align: top;
  height: 292px;
}

.tarot3_inner{
  width: 280px;
  height: 155px;
  margin: 0 auto;
}
.tarot3_inner .center_block{
  float:left;
}
.tarot3_inner .left_block {
  margin-right: 20px;
}
.tarot3_box {
  position: relative;
  width: 250px;
}
.tarot3_box .goto.first ,
.tarot3_box .goto.second {
  position: absolute;
  top: 245px;
}

/* #moonphase
 * .week
 * ========== */

.button{
  width: 60%;
  margin: 1em auto;
  text-align: center;
  font-weight: bold;
  color: #fff;
  background: #1F2121;
  border-radius: 50px;
  padding: 4px 0;
}

/* #moonphase
 * ========================================================================== */

.moon_grp .article_inner {
  display: -webkit-flex;
  display: flex;
  -webkit-justify-content: space-between;
  justify-content: space-between;
}
.moon_grp #moonphase{
  -webkit-box-ordinal-group:2;
  -ms-flex-order:2;
  -webkit-order:2;
  order:2;
  width: 90%;
  margin: 0 auto;
  vertical-align: top;
}
.moon_grp .go_premium{
  -webkit-box-ordinal-group:1;
  -ms-flex-order:1;
  -webkit-order:1;
  order:1;
}

#calendar{
  position: relative;
  background-color: #fff;
  border-radius: 10px;
  padding: 1rem 0;
}
#cal_top {
  font-size:16px;
  text-align: center;
  width: 94%;
  margin: 0 auto 24px;
}
#cal_data {
    text-align: center;
    width: 100%;
}
table {
  width: 308px;
  margin: 0 auto;
}
.dayOfWeek th {
  color: #72787A;
  font-size: 14px;
}
#cal_data td {
  font-size: 12px;
  width: 44px;
  height: 60px;
}
#cal_data td span {
  height: 20px;
  display: block;
  line-height: 20px;
}
#cal_data td span.day {color: #72787A;}
#cal_data td.disabled span.day {color: #E0DCD4;}

#cal_data td span.moon_name {
  font-size: 10px;
  line-height: 20px;
}
/*th, td {
  padding-top: 15px;
  padding-bottom: 15px;
  text-align: center;
}*/
/*日曜日
td:first-child {
  color: red;
}*/
/*土曜日
td:last-child {
    color: blue;
}*/
/*前後月の日付*/
td.disabled {
    color: #ccc;
}
/*本日*/
td.today {
  background-color: #F0EBD7;
  color: #B89D50;
}

/*ボタン*/
#calendar .next-prev-button {
  position: absolute;
  top: 1rem;
}
#calendar .next-prev-button.right {
  right: 1rem;
}
#calendar .next-prev-button.left {
  left: 1rem;
}
#calendar .next-prev-button button{
  cursor: pointer;
  color: #1F2121;
  font-size: 1rem;
  background: none;
  border: none;
}
#prev {
    float: left;
}
#next {
    float: right;
}

/* video
 * ========================================================================== */

[class^="box"] a.video{
  position: relative;
  display: block;
}
 
[class^="box"] a.video::before {
  position: absolute;
  z-index: 10;
  content: "";
  display: block;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid #fff;
  width: 40px;
  height: 40px;
}

[class^="box"] a.video::after {
  position: absolute;
  content: "";
  z-index: 10;
  display: block;
  top: 40%;
  left: 50%;
  transform: translate(-40%, -50%);
  border-style: solid;
  border-color: transparent transparent transparent #fff;
  border-width: 15px 0 15px 25px;
}
.video .container {
  position: relative;
/*  height: 16.5vh;*/
  height: 120px;
}

.video .image {
  position: absolute;
  width: 100%;
  opacity: 0;
  animation: change-img-anim 3s 3 backwards;
}

.video .image:nth-of-type(1) {
  animation-delay: 0s;
  opacity: 1;
}
.video .image:nth-of-type(2) {
  animation-delay: 1s;
}
.video .image:nth-of-type(3) {
  animation-delay: 2s;
}
@keyframes change-img-anim {
  0%{ opacity: 0;}
  10%{ opacity: 0;}
  15%{ opacity: 1;}
  50%{ opacity: 1;}
  55%{ opacity: 0;}
  100%{ opacity: 0;}
}



.block4 .block_L:nth-child(1) a,
.block4 .block_R:nth-child(2) a,
.inner_block_L,
.block4 .block_R:nth-child(4) a{
  display: block;
  width: 135px;
  height: 190px;
  position: absolute;
}
.block4 .block_L:nth-child(1) a{
  bottom: 0;
  right: 16px;
}
.block4 .block_R:nth-child(2) a{
  bottom: 0;
  left: 16px;
}
.inner_block_L{
  top: 10px;
  right: 16px;
}
.block4 .block_R:nth-child(4) a{
  top: 10px;
  left: 16px;
}

.block4 .block_L:nth-child(1){
  grid-area: a;
  width: 100%;
}

.block4 .block_R:nth-child(2){
  grid-area: b;
  width: 100%;
}
.block4 .block_L:nth-child(3){
  grid-area: c;
  width: 100%;
  background-color: #fff;
}

.block4 .block_R:nth-child(4){
  grid-area: d;
  width: 100%;
  background-color: #fff;
}
.block4 .score {
  margin: 5px auto 0;
}
.block4 .rank{
  z-index: 2;
  background: #DDCB80;
  border-radius: 50%;
  color: #fff;
  position: absolute;
  width: 30px;
  height: 30px;
  line-height: 30px;
  font-size: 9px;
}
.block4 .goto {
  margin: 0px auto;
}
.block4 .tarot1_box .score {
  line-height: 12px;
}
.inner_block_L{
  width: 135px;
  margin: 0 auto;
}
.block4 .tarot1_box .goto.first, .block4 .tarot1_box .goto.second {
  bottom: 15px;
  left: 9px;
}
.tarot_bg{
  width: 80px;
  height: 80px;
  background: #F8F5E6;
  border-radius: 50px;
  position: absolute;
  left: 29px;
}
.block4{position: relative;}
.block4::before{
  content: "";
  display: block;
  width: 90%;
  background-image : linear-gradient(to right, #1F2121 2px, transparent 2px);
  background-size: 10px 2px;
  background-repeat: repeat-x;
  background-position: left bottom;
  height: 2px;
  position: absolute;
  top: 50%;
  left: 5%;
  z-index: 100;
}
.block4::after{
  content: "";
  display: block;
  height: 90%;
  background-image: linear-gradient(to bottom, #1F2121 2px, transparent 2px);
  background-size: 2px 10px;
  background-repeat: repeat-y;
  background-position: center center;
  position: absolute;
  top: 5%;
  left: 50%;
  z-index: 100;
  width: 2px;
}
.block6{
  width: 90%;
  margin: 0 auto;
}
.block6 .left_block,
.block6 .right_block{
  float: none;
}
.block6 .pos_top,
.block6 .pos_bottom {
  display: grid;
  grid-template-areas: "a b";
  grid-template-rows: 1fr;
  grid-template-columns: 1fr 1fr;
  column-gap: 18px;
  row-gap: 10px;
  margin: 1em auto;
}
.block6 .pos_top .left_block,
.block6 .pos_bottom .right_block{
  grid-area: a;
  width: 100%;
}
.block6 .pos_top .right_block,
.block6 .pos_bottom .left_block{
  grid-area: b;
  width: 100%;
}
.boxM2 img {
/*  height: 16.5vh;*/
  height: 120px;
}
.boxML img {
  height: 176px;
}




#pnk_grp .keyword h2 P{
  position:relative;
  display: inline-block;
}

#pnk_grp .keyword h2 P::after {
  position: absolute;
  content: '';
  background: url("./../image/keyword/keywords_point2.svg") no-repeat scroll 0 0/42px 30px;
  width: 42px;
  height: 30px;
  top: -15px;
  right: -35px;
}
#pnk_grp .keyword h2 P::before {
  position: absolute;
  content: '';
  background: url("./../image/keyword/keywords_point1.svg") no-repeat scroll 0 0/28px 28px;
  width: 28px;
  height: 28px;
  top: -5px;
  left: -30px;
}
#moonphase h2 P{
  position:relative;
  display: inline-block;
  font-size: 18px;
}

#moonphase  h2 P::after {
  position: absolute;
  content: '';
  background: url("./../image/calendar/moonphases_point.svg") no-repeat scroll center center/64px 16px;
  width: 100%;
  height: 16px;
  top: -20px;
  left: 0;
}
h2#tarot_h P{
  position:relative;
  font-size: 18px;
  display: inline-block;
}
h2#tarot_h P::after {
  position: absolute;
  content: '';
  background: url("./../image/tarot/tarot_point2.svg") no-repeat scroll 0 0/28px 26px;
  width: 28px;
  height: 26px;
  top: 0px;
  right: -40px;
}
h2#tarot_h P::before {
  position: absolute;
  content: '';
  background: url("./../image/tarot/tarot_point1.svg") no-repeat scroll 0 0/52px 40px;
  width: 52px;
  height: 40px;
  top: -10px;
  left: -54px;
}
h2#seiza_h P{
  position:relative;
  font-size: 18px;
  display: inline-block;
}
h2#seiza_h P::after {
  position: absolute;
  content: '';
  background: url("./../image/horoscope_point2.svg") no-repeat scroll 0 0/28px 21px;
  width: 28px;
  height: 21px;
  top: -5px;
  right: -35px;
}
h2#seiza_h P::before {
  position: absolute;
  content: '';
  background: url("./../image/horoscope_point1.svg") no-repeat scroll 0 0/25px 18px;
  width: 25px;
  height: 18px;
  top: -5px;
  left: -30px;
}
#keyword_grp h2 P{
  position: relative;
  display: inline-block;
  font-size: 18px;
}

#keyword_grp  h2 P::before {
  position: absolute;
  content: '';
  background: url("./../image/icon_search.svg") no-repeat scroll 0 0/18px 18px;
  width: 18px;
  height: 18px;
  top: 7px;
  left: -1.3em;
}
[class^="panel_week"] {
  display: none;
}
[class^="panel_week"].is-show {
  display: block;
}
.block4 .motif span{
  font-size: 11px;
  line-height: 16px;
  text-align: center;
  display: flex;
  align-items: center;
}
.block4 .motif {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}
.block4 .motif img{
  width: 50px;
  height: 42px;
}
.block4 .motif::before{
  position: absolute;
  content:"";
  width: 80px;
  height: 80px;
  background: #F8F5E6;
  border-radius: 50px;
  z-index: -1;
}

.block4 .block_R:nth-child(4) .motif{
  width: 100px;
  min-height: 100px;
}
.block4 .block_R:nth-child(4) .motif::before{
  width: 100px;
  height: 100px;
}
.daily_block4 img{
  height: auto;
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
  width: 100%;
  object-fit: cover;
  object-position: center center;
}
.today_txt{
  width: 295px;
  height: 131px;
  border-radius: 8px;
  border: 1px solid #1F2121;
}
.daily_block4 .right_block{
  margin: 2em auto;
}

P.today_summary{
  position:relative;
  font-size: 18px;
  display: inline-block;
}
P.today_summary::after {
  position: absolute;
  content: '';
  background: url("./../image/calendar/right.svg") no-repeat scroll 0 0/5px 24px;
  width: 5px;
  height: 24px;
  top: 0px;
  right: -20px;
}
P.today_summary::before {
  position: absolute;
  content: '';
  background: url("./../image/calendar/left.svg") no-repeat scroll 0 0/5px 24px;
  width: 5px;
  height: 24px;
  top: 0;
  left: -20px;
}

.today_txt .goto{
  font-size: 12px;
  text-align: center;
  color: #fff;
  background: #1F2121;
  border-radius: 30px;
  width: 100px;
  margin: 0 auto;
  height: 26px;
  line-height: 26px;
}
.today_txt{
  display: grid;
  grid-template-areas: 
              "a"
              "b"
              "c";
  column-gap: 30px;
  align-items: center;
  justify-content: center;
  padding: 10px;
}
.today_txt .todaysmoon{grid-area: a;width: 100%;}
.today_txt .line{grid-area: b;width: 100%;}
.today_txt .today_summary{grid-area: c;width: 100%;}

#calendar_outer #calendar {
  grid-area: a;
  width: 100%;
}
#calendar_outer .today_txt {
  grid-area: b;
  width: 295px;
}

#for_smart_from{}
.today_inner {
  min-height: 115px;
}
.daily_block4 .boxM {
  margin-bottom: 24px;
}
.daily_block4{
  width: 90%;
  margin: 0 auto;
}
  #calendar_outer .today_txt {
    margin: 0 auto;
  }
#calendar_outer {
  background: #fff;
  border-radius: 10px;
  padding: 20px 0;
}

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


@media screen and (max-width: 599px){
  #today {width: 90%; }
  #today h2{
    font-size: 1.1em;
  }
  #pickup .article_inner {
    grid-template-areas: 
                "b  b"
                "a  c";
    grid-template-columns: 1fr 1fr;
  }
  #today .article_inner {
    display: grid;
    grid-template-areas: 
                "a  b"
                "c  d";
    grid-template-rows: 1fr 1fr;
    grid-template-columns: 1fr 1fr;

  }
  .block4 .rank{
    top: 28px;
    left: 24px;
  }
}

.block4 .rank b{
  font-weight: normal;
  font-size: 14px;
}
.block4 .today_inner.moon .motif {
  color: #DDCB80;
  font-size: 16px;
  flex-flow: column;
}
.block4 .today_inner .motif .cal_1{}
.block4 .today_inner .motif [class^="cal_"]{
  background-size: 27px 27px;
  background-position: center center;
  width: 27px;
  height: 27px;
  display: block;
  position: relative;
  top: 13px;
}
.block4 .today_inner.moon .motif P.moon_name{
  position: relative;
  top: 16px;
}