@charset "UTF-8";
/* CSS Document */
html {
  scroll-behavior: smooth;
}
@media all and (-ms-high-contrast: none){
  main,.footer{
    font-family: "メイリオ", Meiryo, sans-serif;
  }
}
/****************************************************/
/*全体
/****************************************************/
.pc{
	display: none;
}
.ctvTab{
/* height: 115px;*/
/* background-color: #eee;*/
}
body{

}
/*チェックボックス*/
input[type="checkbox"] {
  display : none;
}
/*チェックボックスのラベル*/
label {
  display: block;
}
main,.footer{
 font-family: 'Kaisei Decol', serif;
 word-break: break-all;
 font-size: 14px;
}

.iflame-wrap {
  position: relative;
  width: 100%;
  padding-top: 56.25%;
}
.iflame-wrap iframe {
  position: absolute;
  top: 0;
  right: 0;
  width: 100% !important;
  height: 100% !important;
}

.flex{
 display: flex;
 flex-wrap: wrap;
}
/****************************************************/
/*装飾
/****************************************************/
.fs-s{
 font-size: .8em!important;
}
.fs-ss{
 font-size: .5em!important;
}
.fs-l{
  font-size: 1.2em!important;
}
.fs-xl{
 font-size: 1.6em!important;
}
.fw-b{
  font-weight: 500!important;
}
.fw-n{
 font-weight: 300!important;
}
.pink{
 color: #ea4b84!important;
}
.skyblue{
 color: #62cdf0!important;
}
.blue{
 color: #36aaef!important;
}
.shadow-blue{
  text-shadow: .03em .05em 1px #1c4e84;
}
.strong{
 color: #ea4b84!important;
 background-color: rgba(255,255,255,.5)!important;
 margin: 0 .2em .3em;
 padding: 0 .2em;
 display: inline-block;
 border-radius: .2em;
}
.strong-green{
 background-color: #a4bf5c;
 color: #fff;
 margin: 0 .2em .3em;
 padding: 0 .2em;
 text-shadow: 0em .1em .1em rgba(0,0,0,.3);
 display: inline-block;
 border-radius: .2em;
}
.strong-orange{
 background-color: #e28932;
 color: #fff;
 margin: 0 .2em .3em;
 padding: 0 .2em;
 text-shadow: 0em .1em .1em rgba(0,0,0,.3);
 display: inline-block;
 border-radius: .2em;
}
.under-pink{
 text-decoration: underline #ea4b84;
}
/****************************************************/
/*bg
/****************************************************/

.bg{
 position: fixed;
 width: 100%;
 height: 100vh;
 top: 0;
 left: 0;
 background-image: url("../img/bg-2.png");
 background-size: cover;
 background-position: left top;
 background-repeat: no-repeat;
 z-index: -3;
}
.bg-star{
 position: fixed;
 width: 100%;
 height: 100vh;
 top: 0;
 left: 0;
 background-image: url("../img/star-2.png");
 background-size: cover;
 background-position: left top;
 background-repeat: no-repeat;
 z-index: 10000;
 opacity: 0;
 pointer-events: none;
 transition: .3s;
}
.bg-star-open{
 opacity: 1;
}

.zodiacpage .bg-star{
 z-index: -1;
}


main{
/* height: 200vh;*/
}
/****************************************************/
/*title
/****************************************************/
.title{
 width: 100%;
 height: calc(100vh - 115px);
 overflow: hidden;
 background-image: url("../img/onda.png");
 background-size: contain;
 background-position: bottom -2vh center;
 background-repeat: no-repeat;
}
.title > *{
 transition: .3s;
}
.title-close > *{
 opacity: 0;
 pointer-events: none;
}

.tit-wrap{
 width: 100%;
 height: 100%;
 position: relative;
}
.logo{
 background-image: url("../img/logo.png");
 background-size: contain;
 background-position: center center;
 background-repeat: no-repeat;
 
 position: absolute;
 width: 45%;
 
 bottom: 55%;
 left: 0;
 right: 0;
 margin: auto;

}
.logo-btn{
 width: 100%;
 height: 100%;
 object-fit: contain;
 object-position: center center;
 cursor: pointer;
 
 animation-name: pikapika;
 animation-duration: 1s;
 animation-direction: alternate;
 animation-fill-mode: both;
 animation-iteration-count: infinite;
 animation-timing-function: ease-in-out;
 
}
@keyframes huyuhuyu{
 0%{
  transform: translateY(1vh);
 }
 100%{
  transform: translateY(0);
 }
}
@keyframes pikapika{
 0%{
  filter: hue-rotate(0deg);
 }
 100%{
  filter: hue-rotate(-30deg);
 }
}
/****************************************************/                       
/*zodieac
/****************************************************/
.zodiac{
 position: fixed;
 top: 0;
 left: 0;
 z-index: 10001;
 width: 100%;
 height: 100vh;
 
 transform: translateY(-100vh);
 pointer-events: none;
 transition: .5s;
}
.zodiac-open{
 transform: translateY(0);
 pointer-events: visible;
}
.zodiac-header{
 height: calc(10% - 2vh);
 padding: 1vh 2em;
 text-align: center;
 background-color: rgba(0,0,0,.5);
}
.zodiac-header img{
 display: inline-block;
 vertical-align: middle;
 filter: drop-shadow(0 2px 2px rgba(0,0,0,.5));
}
.zodiac-header img:nth-child(1){
 width: auto;
 height: 70%;
}
.zodiac-header img:nth-child(2){
 margin-left: 1em;
 width: auto;
 height: 100%;
 border-radius: 50%;
 background-color: #fff;
}
.zodiac .date{
 padding: 1em;
}
.zodiac .date p{
 background-color: #000;
 color: #efad5e;
 border-radius: 5em;
 padding: 1em 2em;
 font-size: 3.2vw;
 font-weight: bold;
 box-shadow: 0 10px 15px 0 rgba(0,0,0,.1);
}
.zodiac .flex{
 width: 100%;
 height: 65%;
 display: flex;
 flex-wrap: wrap;
}
.zodiac .item{
 width: calc(100% / 3 - 20px);
 height: calc(100% / 4 - 20px);
 padding: 10px;
}
.zodiac .item img{
 width: 100%;
 height: 100%;
 object-fit: contain;
 object-position: center center;
 filter: drop-shadow(0 5px 5px rgba(0,0,0,.7));
 opacity: 0;
 transform: scale(2) translateY(100%);
 
 transition: 1.5s .1s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.zodiac-open .item img{
 transform: scale(1) translateY(0);
 opacity: 1;
}

/****************************************************/
/*sns
/****************************************************/
.sns-archive{
 background-color: rgba(255,255,255,.3);
/* box-shadow: 0 2px 5px 0 rgba(0,0,0,.1);*/
 margin: 1em!important;
 border-radius: 1em;
}
.snstitle{
 margin-bottom: 1em!important;
}
.snstitle{
 color: #1c4e84;
}
/****************************************************/
/*footer-sub
/****************************************************/
.footer-sub{
}
.link-flex{
 display: flex;
 flex-wrap: wrap;
 max-width: 960px;
 margin: 0 auto;
}
.footer-sub a{
 text-align: center;
 width: calc(100% / 1 - 6em);
 margin: 0 1em 1em;
 padding: .5em 2em;
 font-size: .8em;
 color: #333;
 background-color: rgba(255,255,255,.5);
 border-radius: 2em;
}
.footer-sub a i{
 color: #999;
}
/****************************************************/
/*zodiacpage
/****************************************************/
.zodiacpage .bg-star{
 opacity: 1;
}
/****************************************************/
/*zodiac-content
/****************************************************/
.zodiac-contents{
 background-image: url("../img/deco-tl.png"),url("../img/deco-tr.png"),url("../img/deco-br.png"),url("../img/deco-bl.png"),url("../img/bg-paper.jpg");
 background-size: 30% auto,30% auto,30% auto,30% auto,400px auto;
 background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,repeat;
 background-position: top left,top right, bottom right,bottom left,center center;
 width: calc(100% - 4em);
 max-width: 960px;
 margin: 0 auto;
 padding: 2em;
}


.zodiac-contents .item{
 width: 100%;
}
.zodiac-tit{
 color: #000;
 font-size: 1.5em;
 font-weight: bold;
 line-height: 2;
 background-image: url("../img/txtline.png");
 background-size: auto 2em;
 text-align: center;
}
.zodiac-onda{
 margin-top: 1em;
 margin-bottom: 1em;
 text-align: center;
}
.zodiac-onda img{
 border:solid 2px #c1b08e;
 width: 90%;
 box-shadow: 1em 1em .1em 0 rgba(0,0,0,.1)
}
.zodiac-txt{
 padding: 2em 1em;
 position: relative;
}
.zodiac-txt p{
 line-height: 2.5;
 background-image: url("../img/txtline.png");
 background-size: auto 2.5em;
}
.zodiac-txt p *{
 font-size: 1em!important;
 font-family: 'Kaisei Decol', serif!important;
}
.zodiac-txt:after{
 position: absolute;
 content: "占い監修 的中王 海龍";
 right: 1em;
 bottom: 0;
 font-size: .8em;
}
.thumb{
 margin-top: 1em;
 text-align: center;
}
.thumb a{
 background-color: #fff;
 box-shadow: 0 .5em .5em 0 rgba(0,0,0,.3);
}
.thumb a img{
 width: 100%;
 max-width: 480px;
}

/****************************************************/
/*zodiac-ranking
/****************************************************/
.bg-ranking{
 position: fixed;
 z-index: 10000;
 width: 100%;
 height: 100vh;
 top: 0;
 left: 0;
 background-color: rgba(0,0,0,.7);
 
 opacity: 0;
 pointer-events: none;
 transition: .3s;
}
.bg-ranking-open{
 pointer-events: visible;
 opacity: 1;
}

.zodiac-ranking{
 position: fixed;
 z-index: 10001;
 top: 0;
 right: 0;
 width: 80vw;
 height: 100vh;
 background-color: rgba(255,255,255,.9);
 box-shadow: -.5em 0 .5em 0 rgba(0,0,0,.3);
 
 transform: translateX(calc(100% + 1em));
 transition: .5s;
}

.zodiac-ranking-open{
 transform: translateX(0);
}

.btn-ranking{
 position: fixed;
 z-index: 2;
 width: 10vw;
 right: 0;
 top: 20vh;
 border-radius: 2vw 0 0 2vw;
 box-shadow: 0 .5em .5em 0 rgba(0,0,0,.3);
}
.zodiac-ranking-wrap{
 padding: 2em 1em;
}
.zodiac-ranking li{
 font-size: 3vh;
 padding: 0 1em;
 margin: 0 auto .5vh auto;
 line-height: 2;
 background-color: #000;
 border-radius: 5em;
}
.zodiac-ranking li *{
 color: #fff;
}
.zodiac-ranking li a{
 border-bottom: dashed .05em #fff;
}

/*１位*/
.zodiac-ranking li:nth-child(1){
 background-color: gold;
}
.zodiac-ranking li:nth-child(1) *{
 color: #000;
}
.zodiac-ranking li:nth-child(1) a{
 border-bottom: dashed .05em #000;
}

/*２位*/
.zodiac-ranking li:nth-child(2){
 background-color: silver;
}
.zodiac-ranking li:nth-child(2) *{
 color: #000;
}
.zodiac-ranking li:nth-child(2) a{
 border-bottom: dashed .05em #000;
}

/*3位*/
.zodiac-ranking li:nth-child(3){
 background-color: coral;
}
.zodiac-ranking li:nth-child(3) *{
 color: #000;
}
.zodiac-ranking li:nth-child(3) a{
 border-bottom: dashed .05em #000;
}

/*最下位*/
.zodiac-ranking li:last-child{
 background-color: darkmagenta;
}
@media screen and (min-height:690px) {
 .logo{
  width: 55%;
  bottom: 50%;
 }
}
@media screen and (min-height:920px) {
 .logo{
  width: 40%;
  bottom: 65%;
 }
}

/*【PC】*/
@media screen and (min-width: 960px) {
  .sp{
  display: none!important;
 }
 .pc{
  display: unset!important;
 }
}
@media (orientation: landscape){
/****************************************************/
/*全体
/****************************************************/
 .under-line{
  text-decoration: underline;
 }
 .ctvTab{
/* height: 158px;*/
}
 
main,.footer{
 font-size: 18px;
}
 
#page-top{
 bottom: 10px;
 right: 10px;
 width: 80px;
 height: 80px;
 font-size: 40px;
 line-height: 80px;
}
 
 .bg{
  background-image: url("../img/bg-1.png");
  background-repeat: repeat;
  background-size: contain;
  background-position: center center;
 }
 .bg-star{
  background-image: url("../img/star-1.png");
  background-repeat: repeat;
  background-size: contain;
  background-position: center center;
 }
/****************************************************/
/*title
/****************************************************/
.title{
 height: calc(100vh - 158px);
 background-image: url("../img/onda-pc.png");
 background-size: cover;
 background-position: top 3vh center;
 background-repeat: no-repeat;
}
 .tit-wrap{
  
 }
 .logo{
  width: 40vmin;
  height: 40vmin;
  top: 0;
  bottom: 10vmin;
  right: auto;
  left: 10vmax;
 }
 
 /****************************************************/
/*zodiac
/****************************************************/ 
 .zodiac-header{
/*  text-align: left;*/
 }
 .zodiac .date p{
 text-align: center;
  font-size: 3vmin;
}
 
 .zodiac .item{
 width: calc(100% / 4 - 20px);
 height: calc(100% / 3 - 20px);
}
 /****************************************************/
/*footer
/****************************************************/
 .footer{
   display: block!important;
   text-align: center;
   background-color: #000;
   padding: 1em 0;
   width: 100%;
  }
  .footer a,.footer p{
   color: #fff;font-weight: bold;
 }
 /****************************************************/
/*zodiac-content
/****************************************************/
.zodiac-contents{
 background-size: 15% auto,15% auto,15% auto,15% auto,400px auto;
}
 .zodiac-contents .flex{
 
 }
.zodiac-contents .item:nth-child(1){
 width: calc(40% - 1em);
 padding-right: 1em;
}
.zodiac-contents .item:nth-child(2){
 width: 60%;
}
/****************************************************/
/*zodiac-ranking
/****************************************************/
.zodiac-ranking{
 width: 30vw;
}

 .btn-ranking{
  width: 50px;
  border-radius: 10px 0 0 10px;
 }

}