@charset "utf-8";
/* CSS Document */
.section {padding: 10px 0 30px;}
#content{width: 950px;}
#LeftCont{width:100%;}
#toc_container{display: none;}
.Main_Img{
    width: 95%;
    display: flex;
    justify-content: center;
    margin: 0 auto 30px;
}
.Main_Img img{}
.toc_list .icon_moon:before{display:none;}
.share{display:none;}
.post p {
	width: 95%;
	margin: 0 auto 30px;
	color: #000;
}

/*リセットcss*/
button {
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}
button:focus {
  outline: none;
}

/*見出し*/
#LeftCont .post.horoscope h2.pt2,h2.pt2{
    width: 95%;
    position: relative;
    padding: 20px 10px;
    text-align: center;
    border: 2px solid #5d3111 !important;
    background: #fff;
    margin: 70px auto 40px !important;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;	
    color: #5d3111;
}
#LeftCont .post.horoscope h2.pt2:before,h2.pt2:before{
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background: url(https://kizuna3.com/uranai/wp-content/themes/kizuna/img/ornament_0426.png), url(https://kizuna3.com/uranai/wp-content/themes/kizuna/img/ornament_0426_02.png)#fff;
    background-repeat: no-repeat;
    background-size: 6%;
    background-position: left 2px top 2px, right 2px top 2px;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
}
#LeftCont .post.horoscope h2.pt2:after,h2.pt2:after {
	content: "";
	top: -40px;
	left: calc(50% - 40px);
	width: 80px;
	height: 80px;
	border: 2px solid #5d3111;
	border-radius: 50%;
	background: #fff;
	position: absolute;
}
#LeftCont .post.horoscope h2.pt2 span,h2.pt2 span{
    position: relative;
    z-index: 2;
}
#LeftCont .post .zodiac_rank h2{
    width: 95%;
    color: #5d3111;
    font-size: 2rem;
    padding: 4px 15px 2px;
    border-left: 8px solid #ec5c9c;
    border-bottom: none;
    margin: auto;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    background-color: #f8f8f8;
}
h2.pt2 i.icon_moon:before{top: -50px;}
#LeftCont .post.horoscope h2.pt2 i.icon_moon:before{top:0px;}

.h2_wrap{
    display: flex;
    flex-wrap: wrap;
    position: relative;
    margin: 0 0 30px;
    align-items: center;	
}
.h2_wrap h2{}
.h2_wrap i{
    width: 12%;
    aspect-ratio: 248 / 43;
    display: block;
	position: absolute;
    left: 13%;	
}
.h2_wrap i.star5{
    background: url(https://kizuna3.com/uranai/wp-content/themes/kizuna/img/star5.png);
    background-size: 100%;
}
.h2_wrap i.star4{
    background: url(https://kizuna3.com/uranai/wp-content/themes/kizuna/img/star4.png);
    background-size: 100%;
}
.h2_wrap i.star3{
    background: url(https://kizuna3.com/uranai/wp-content/themes/kizuna/img/star3.png);
    background-size: 100%;
}
.h2_wrap i.star2{
    background: url(https://kizuna3.com/uranai/wp-content/themes/kizuna/img/star2.png);
    background-size: 100%;
}
.h2_wrap i.star1{
    background: url(https://kizuna3.com/uranai/wp-content/themes/kizuna/img/star1.png);
    background-size: 100%;
}
/*ul*/
ul.custom{
    width: 90%;
    padding: 0;
    margin: 50px auto;	
}
ul.custom li{
    font-size: 17px;
    margin: 0 0 10px;	
}
/*今週の順位*/
.Ranking_text{
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}
.Ranking_text .Ranking{
    font-size: 40px;
    font-weight: bold;
    color: #5d3111;
}
.Ranking_text .Ranking.no1{color: #cda61f;}
.Ranking_text .Ranking.no2{color: #999a9a;}
.Ranking_text .Ranking.no3{color: #8f5b27;}

.Ranking_text .day{
    font-size: 22px;
    color: #5d3111;
    font-weight: bold;	
}
.Ranking_text .star{
    width: 18%;
    aspect-ratio: 248 / 43;
    display: block;
    background: url(https://kizuna3.com/uranai/wp-content/themes/kizuna/img/star5.png);
    background-size: 100%;
    margin: 0 0 5px;	
}
.description i{
    width: 40%;
    aspect-ratio: 248 / 43;
    display: block;
    margin: 0 0 5px;
}
.description i.star5{
    background: url(https://kizuna3.com/uranai/wp-content/themes/kizuna/img/star5.png);
    background-size: 100%;	
}
.description i.star4_5{
    background: url(https://kizuna3.com/uranai/wp-content/themes/kizuna/img/star4_5.png);
    background-size: 100%;	
}
.description i.star4{
    background: url(https://kizuna3.com/uranai/wp-content/themes/kizuna/img/star4.png);
    background-size: 100%;	
}
.description i.star3_5{
    background: url(https://kizuna3.com/uranai/wp-content/themes/kizuna/img/star3_5.png);
    background-size: 100%;	
}
.description i.star3{
    background: url(https://kizuna3.com/uranai/wp-content/themes/kizuna/img/star3.png);
    background-size: 100%;	
}
.description i.star2_5{
    background: url(https://kizuna3.com/uranai/wp-content/themes/kizuna/img/star2_5.png);
    background-size: 100%;	
}
.description i.star2{
    background: url(https://kizuna3.com/uranai/wp-content/themes/kizuna/img/star2.png);
    background-size: 100%;	
}


/*記事のチラ見せ*/
#Content.collapsed {
  max-height: 150px; /* チラ見せする高さを調整 */
  overflow: hidden;
  position: relative;
}
#Content.collapsed::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 50px;
  background: linear-gradient(to bottom, rgba(255,255,255,0), white); /* フェード効果 */
}
#Content.expanded {
  max-height: none;
}
#toggleButton{
    width: 90%;
    font-size: 20px;
    color: #fff;
    background: #ec5c9c;
    box-shadow: rgb(179 67 117) 0px 3px 0px;
    margin: 10px auto 20px;
    padding: 10px;
    border-radius: 100px;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}
#toggleButton:after{
    content: "";
    background: url(https://kizuna3.com/uranai/wp-content/themes/kizuna/img/arrow_w.png);
    background-size: 100%;
    width: 13px;
    aspect-ratio: 30 / 46;
    position: absolute;
    margin: auto;
    right: 30px;
    transform: rotate(90deg);
}
#toggleButton.active:after{transform: rotate(270deg);}

/*週間12星座占いランキング*/
#Ranking_list {
    width: 90%;
    counter-reset: ranking;
    list-style: none;
    padding: 0;
    margin: auto;
    /* display: flex; */
    flex-wrap: wrap;
    column-count: 2;
    column-gap: 20px;
}
#Ranking_list li {
    break-inside: avoid;
    width: 95%;
    counter-increment: ranking;
    position: relative;
    margin: 0 0 20px;
    padding: 0 0 0 35px;
}
#Ranking_list li::before {
    content: counter(ranking);
    position: absolute;
    font-weight: bold;
    font-size: 30px;
    left: 0;
    display: flex;
    align-items: center;
    height: 100%;
    font-family: "游明朝体", "Yu Mincho", YuMincho, serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}
#Ranking_list li:nth-child(1)::before{color: #cda61f;}
#Ranking_list li:nth-child(2)::before{color: #999a9a;}
#Ranking_list li:nth-child(3)::before{color: #8f5b27;}
#Ranking_list li a{
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    justify-content: space-between;
    color: #000;
}
#Ranking_list li img{width:100px; height:auto;}
#Ranking_list li .description{width: calc(100% - 110px);}
#Ranking_list li .description h3{
    font-size: 20px;
    margin: 0 0 5px;	
}
#Ranking_list li .description .star{
    width: 40%;
    aspect-ratio: 248 / 43;
    display: block;
    background: url(https://kizuna3.com/uranai/wp-content/themes/kizuna/img/star5.png);
    background-size: 100%;
    margin: 0 0 5px;
}
#Ranking_list li .description p{font-size: 15px;}

@media (max-width: 991px) {
#content {width: 100%;}
.section {
    padding: 0;
}
.Main_Img{
    margin: 0 auto 5vw;
    aspect-ratio: 715 / 330;
    overflow: hidden;
}
.Main_Img img{
    height: 100%;
    width: auto;
    max-width: unset;
}
#Ranking_list {
    width: 90%;
    column-count: 1;
    column-gap: 0;
}
#Ranking_list li img {
    width: 30%;
    height: auto;
}
#Ranking_list li::before {
    font-size: 8vw;
}	
#LeftCont .post.horoscope h2.pt2, h2.pt2 {
    width: 97%;
    padding: 3vw 1vw;
    margin: 8vw auto 8vw !important;
    font-size: 3.5vw;
}
#LeftCont .post.horoscope h2.pt2:after, h2.pt2:after {
    top: -6vw;
    left: calc(50% - 10%);
    width: 15vw;
    height: 15vw;
}	
h2.pt2 i.icon_moon:before {
    top: -7vw;
    transform: translate(-1vw);
    width: 5vw;
}
#Ranking_list li {
    margin: 0 0 3vw;
    padding: 0 0 0 10vw;
}
#Ranking_list li .description {
    width: calc(100% - 35%);
}
#Ranking_list li .description h3 {
    font-size: 4vw;
}	
#Ranking_list li .description p {
    font-size: 3.5vw;
}	
#toggleButton {
    font-size: 4vw;
    margin: 5vw auto 3vw;
    padding: 2vw;
}
ul.custom {
    width: 90%;
    padding: 0;
    margin: 3vw auto 3vw 8vw;
}
ul.custom li {
    color: #000;
    font-size: 3.7vw;
    margin: 0 0 2vw;
}	
#toggleButton:after {
    width: 4%;
    aspect-ratio: 30 / 46;
    right: 5vw;
}	
.h2_wrap i{
    width: 27%;
    left: 27%;
}
.description i {
    width: 50%;
    margin: 0 0 1vw;
}
.Ranking_text .Ranking{
    font-size: 7vw;
}	
.Ranking_text .day {
    font-size: 4vw;
}	
	
}