html{
    scroll-behavior: smooth;
}
:root {
    --light-blue: #4db1ec;
    --blue: #1665cc;
    --purple: #c9c2e0;
    --pink: #f8ccd1;
    --orange: #ff9f67;
    --yellow: #ffd673;
    --light-green: #a2e29b;
    --green: #c2e2d2;
    --grey: #333;
    --white: #fff;
}
/* header{
    background: #333;
    padding: 1rem 0;
    position: fixed;
    width: 100%;
    z-index: 1;
} */

/* section{
    background-image:  url('../img/background.jpg') ;
    height: 100vh;
    background-size: cover;
    background-repeat: repeat;
    background-position: center center;
    background-image: url('../img/sasori.png'),url('../img/topright.png');
    background-position: left bottom, right bottom;
    background-repeat: no-repeat;
} */

/* .scroll{
    overflow: auto;
    scroll-snap-type: y mandatory;
    height: 100vh;
} */

#btn-space{
    margin: 20px 0 8px 0;
}

#sns-explain{
    border: 1px dashed #C2E2D2;
    border-radius: 8px;
    font-size: 0.7rem;
    padding: 4px;
    color: rgb(68, 68, 68);
}

#google_signin{
    color: black;
    font-family: 'Roboto';
    background-color: #FFFFFF;
    padding: 3px 26px 1px 8px;
    border-color: #1a1c1c3d
}
#google_signin:hover{
    background-color: transparent;
    border: 1px solid #4285F4;
    color: #4285F4;
}

#twitter_signin{
    color: black;
    font-family: 'Roboto';
    background-color: #FFFFFF;
    padding: 5px 27px 4px 14px;
    border-color: #1a1c1c3d
}
#twitter_signin:hover{
    background-color: transparent;
    border: 1px solid #00acee;
    color: #00acee;
}
#twitter_logo_img{
    margin-right: 10px;
}


#line_signin{
    width: 193px;
    height: 34px;
}

#line_signin{
    background-image:  url('../img/line_btn_login_base.png');
    background-repeat: no-repeat;
}

#line_signin:hover{
    background-image:  url('../img/line_btn_login_hover.png');
    background-repeat: no-repeat;
}
.line_logo_container a{
    padding-left: 30px;
}


.google_sign_container,.twitter_logo_container,.line_logo_container{
    margin: 10px 0px;
}



.hero{
    text-align: center;
    padding-top: 8px;
    padding-bottom: 1px;
}
.background_top{
    border-bottom-left-radius: 8px;
    border-bottom-right-radius: 8px;
}

/* navのところ */
.nav{
    position: relative;
}
.overlay.open-menu{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0.5;
    background-color: #333;
    z-index: 1;

}
.overlay{
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    opacity: 0;
    background-color: #333;
    pointer-events: none;
    z-index: 1;

}

#logo-img{
    vertical-align: middle;
    padding: 8px
}

.wrapper {
    /* max-width: 1200px; */
    width: 100%;
    /* margin: 0 auto;
    padding: 0 1rem; */
}
header {
    /* background: var(--green); */
    background-image:  url('../img/header_bg.jpg') ;
    background-repeat: repeat;
    /* padding: .5rem 0; */
    position: relative;
    width: 100%;
    z-index: 1;
}
header .wrapper {
    display: flex;
    height: 46px;
    /* justify-content: space-between; */
}
aside{
    width: 70px;
}
.menu-button{
    width: 80px;
}

header a,
#list_item {
    /* color: var(--white);
    font-size: 1.5rem; */
    font-family: 'Hachi Maru Pop', sans-serif;
    /* font-size: .8rem; */
    margin-bottom: 0rem;
    color: rgb(73, 73, 73);
    text-decoration: none;
}
#list_item{
    color: blue;
}
header a.logo {
    /* color: var(--white);
    font-size: 1.5rem; */
    font-family: 'Hachi Maru Pop';
    font-size: 1.5rem;
    font-weight: bolder;
    margin-bottom: 0rem;
    /* color: rgb(245, 243, 243); */
    text-decoration: none;
    flex: 1;
}

.login_box{
    flex-direction: column;
    font-size: 0.8rem;
}

.top_box1{
    text-align: center;
    color: white;
    font-weight: bold;
    height: 21px;
    padding-top: 3px;
}
.top_box2{
   height: 21px;
   text-align: center;
}
.top_box3{
    height: 3px;
}


.login{
    position: absolute;
    top: 4px;
    right: 100px;
    font-family: 'Hachi Maru Pop';
    font-size: 0.9rem;
    font-weight: bold;
    text-align: center;
    width: 60px;
    color: var(--white);
}

#top_avatar{
    margin-top: 10px;
    margin-right: 2px;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    object-fit: cover;
}

.btn-menu {
    position: absolute;
    font-family: 'Hachi Maru Pop';
    font-weight: bolder;
    font-size: 1.2rem;
    top: 4px;
    right: 2px;
    border: 1px solid rgb(255, 255, 255);
    color: var(--white);
    padding: 3px 5px;
    background: var(--black);
    border-radius: 6px;
    cursor: pointer;
}
.main-nav {
    background: var(--white);
    width: 300px;
    position: absolute;
    z-index: 2;
    top: 44px;
    right: 0;

    border: 1px solid rgba(87, 86, 86, 0.5);
    border-radius: 6px;
    /* overflow: hidden; */
    /* transition: .5s; */

    opacity: 0;
    pointer-events: none;
    /* display: none; */
}
#new_account{
    text-align: right;
    font-size: 0.8rem;
    /* text-decoration: none; */
}
.main-nav li {
    list-style: none;
    text-align: left;
    margin: 0.5rem 0;
}
.main-nav a {
    display: block;
}
.main-nav.open-menu {
    /* display: block; */
    opacity: 0.95;
    transition: opacity .2s;
    pointer-events: visible;
    z-index: 2;

}

/* ここから下の設定 */

 .bottom-nav-container{
    display: flex;
    justify-content: flex-end;
    position: fixed;
    bottom: 40;
    width: 100%;
 }
 @media (min-width: 600px) {
    /* 横幅が600px以上の場合に適用するスタイル */
    .bottom-nav-container{
        max-width:600px;
    }
 }
/* .btn-menu2 {
    position: absolute;
    font-family: 'Hachi Maru Pop';
    font-weight: bolder;
    font-size: 1.2rem;
    top: 4px;
    right: 2px;
    border: 1px solid rgb(255, 255, 255);
    color: var(--white);
    padding: 3px 5px;
    background: var(--black);
    border-radius: 6px;
    cursor: pointer;
} */
.main-nav2 {
    padding-bottom: 8px;
    background: var(--white);
    width: 300px;
    position: fixed;
    z-index: 2;
    /* top: 44px; */
    /* right: 0; */
    margin-left: auto;
    margin-right:0;
    bottom:40px;

    border: 1px solid rgba(87, 86, 86, 0.5);
    border-radius: 6px;
    /* overflow: hidden; */
    /* transition: .5s; */

    opacity: 0;
    pointer-events: none;
    /* display: none; */
}
#new_account{
    text-align: right;
    font-size: 0.8rem;
    /* text-decoration: none; */
}
.main-nav2 li {
    list-style: none;
    text-align: left;
    margin: 0.5rem 0;
}
.main-nav2 a {
    display: block;
}
.main-nav2.open-menu2 {
    /* display: block; */
    opacity: 0.95;
    transition: opacity .2s;
    pointer-events: visible;
    z-index: 2;

}





/* ここから下の設定 */

.premium_register{
    border: solid 2px;
    border-radius: 3px;
}



.title1{
    font-family: 'Dancing Script', cursive;
    font-size: 3rem;
    margin-bottom: 0em;
    color: rgb(68, 68, 68);
}

.title2{
    /* font-family: 'Dancing Script','Hachi Maru Pop', cursive; */
    font-family: 'Hachi Maru Pop', cursive;
    font-size: 1.5rem;
    font-weight: bold;
    padding-bottom: 8px;
    padding-top: 4px;
    margin: 0px 1px 5px 1px;
    /* color: rgb(73, 73, 73); */
    /* border: solid 1px #ff9f67; */
    border-top-left-radius: 8px;
    border-top-right-radius: 8px;
}

.title_Japanese{
    font-family: 'Hachi Maru Pop';
    font-size: 1rem;
    margin-top: 0em;
    margin-bottom: 15px;
    padding: 0 6px;
}

.title_Japanese_after{
    font-family: 'Hachi Maru Pop';
    text-align: left;
    font-size: 1rem;
    margin-top: 0em;
    margin-bottom: 1rem;
    padding: 0 16px;
}

.jumbotron{
    margin-top: 10px;
    background-image:  url('../img/background.jpg') ;
    background-repeat: repeat;
}

.newContainer1{

    /* background-image:  url('../img/background.jpg') ; */
    text-align: center;
    padding-top: 10px;
    /* background-repeat: repeat; */
    /* background-position: center center; */
    /* margin-bottom: -2vh; */

    font-family: 'Hachi Maru Pop';

}
.newContainer{
    /* background-image:  url('../img/background.jpg') ; */
    text-align: center;
    padding-top: 1px;
    padding-bottom: 2px;
    font-family: 'Hachi Maru Pop';
    border-radius: 8px;
    margin: 25px 1px 4px 1px;
    /* max-width: 600px; */
   }



p{
    /* font-family: 'Hachi Maru Pop'; */
    font-family: 'Kosugi Maru', sans-serif;
    margin-bottom: 1rem;
}

#calculate{
    margin-top: 16px;
    /* padding: 4px;
    text-align: center;
    margin: 4px; */
    width: 200px;
    font-size: 1.1rem;
    font-weight: bold;
    padding: 5px;
}

#calculate0{
    padding-top: 12px;
    padding-bottom: 12px;
    width: 280px;
    font-size: 1.1rem;
    font-weight: bold;
}

.form-container{
    /* width: 480px;
    margin-left: px;*/
    text-align: left;
    /* padding-bottom: 40px; */
    width: 95%;
    margin: 0 auto;
    max-width: 600px;
}

.first_brief{
    text-align: left;
    padding: 0 16px;
    font-family: 'Kosugi Maru', sans-serif;
    line-height: 1.5;
}

.max_width{
    max-width: 600px;
    margin: 0 auto;
}

/* dl{
    display:flex;
    flex-wrap: wrap;
    border-top: none;
    margin-left: 5%;
    margin-right: 5%;
    border-radius: 4px;
  }
  dt{
    text-align: right;
    background: #f2f3f2;
    opacity: .9;
    width: 40%;
    padding: 8px;
    box-sizing: border-box;
    border-top: 1px solid #F8CCD1;
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px;
    font-size: 0.8rem;

  }
  dd{
    padding: 8px;
    margin: 0;
    border-left: 1px solid #F8CCD1;
    border-top: 1px solid #F8CCD1;
    width: 55%;
    box-sizing: border-box;
    text-align: left;
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px;
    background: rgba(255, 255, 255, 0.8);
    font-size: 0.8rem;
  } */

  #asc,#sun,#moon,#mercury,#venus,#mars,#jupiter,#saturn,#rahu,#ketu{
      cursor: pointer;
  }

  #mask{
      background: rgba(0, 0, 0, 0.4);
      position: fixed;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
      z-index: 10;
  }

  #modal{
      background: #FFF;
      width: 270px;
      padding: 16px;
      border-radius: 4px;
      position: absolute;
      top: 800px;
      left: 0;
      right: 0;
      margin: 0 auto;
      z-index: 11;
      transition: transform 0.4s;
  }

  #modal > p {
      margin: 12px 0 16px;
      text-align: left;
  }

#mask.hidden,#sun1.hidden,#moon1.hidden,#mercury1.hidden,#venus1.hidden,#mars1.hidden,#jupiter1.hidden,#saturn1.hidden,#rahu1.hidden,#ketu1.hidden,#asc1.hidden{
    display: none;
}
#modal.hidden{
    transform: translate(-800px, 0);
}

  #close{
      cursor: pointer;
      width: 150px;
      border: 1px solid #CCC;
      border-radius: 4px;
      text-align: center;
      padding: 8px 0;
      margin: 12px auto;
  }

#sun::before{
    content: '';
    display: inline-block;
    background-image:  url('../img/sun.png');
    background-size: contain;
    vertical-align: middle;
    width: 12px;
    height: 12px;
    /* content: url('../img/sun.png'); */
}
#moon::before{
    content: '';
    display: inline-block;
    background-image:  url('../img/moon.png');
    background-size: contain;
    vertical-align: middle;
    width: 12px;
    height: 12px;
}

#mercury::before{
    content: '';
    display: inline-block;
    background-image:  url('../img/mercury.png');
    background-size: contain;
    vertical-align: middle;
    width: 12px;
    height: 12px;
    /* content: url('../img/sun.png'); */
}
#venus::before{
    content: '';
    display: inline-block;
    background-image:  url('../img/venus.png');
    background-size: contain;
    vertical-align: middle;
    width: 12px;
    height: 12px;
    /* content: url('../img/sun.png'); */
}
#mars::before{
    content: '';
    display: inline-block;
    background-image:  url('../img/mars.png');
    background-size: contain;
    vertical-align: middle;
    width: 12px;
    height: 12px;
    /* content: url('../img/sun.png'); */
}
#jupiter::before{
    content: '';
    display: inline-block;
    background-image:  url('../img/jupiter.png');
    background-size: contain;
    vertical-align: middle;
    width: 12px;
    height: 12px;
    /* content: url('../img/sun.png'); */
}
#saturn::before{
    content: '';
    display: inline-block;
    background-image:  url('../img/saturn.png');
    background-size: contain;
    vertical-align: middle;
    width: 12px;
    height: 12px;
    /* content: url('../img/sun.png'); */
}
#rahu::before{
    content: '';
    display: inline-block;
    background-image:  url('../img/rahu.png');
    background-size: contain;
    vertical-align: middle;
    width: 12px;
    height: 12px;
    /* content: url('../img/sun.png'); */
}
#ketu::before{
    content: '';
    display: inline-block;
    background-image:  url('../img/ketu.png');
    background-size: contain;
    vertical-align: middle;
    width: 12px;
    height: 12px;
    /* content: url('../img/sun.png'); */
}

#sun_explain::before,#sun1::before,#Sun::before,#Sy1::before{content: url('../img/sun_s.png');position: relative;top: 3.5px;}
#moon_explain::before,#moon1::before,#Moon::before,#Ch1::before{content: url('../img/moon_s.png');position: relative;top: 3.5px;}
#mercury_explain::before,#mercury1::before,#Mercury::before,#Bu1::before{content: url('../img/mercury_s.png');position: relative;top: 3.5px;}
#venus_explain::before,#venus1::before,#Venus::before,#Sk1::before{content: url('../img/venus_s.png');position: relative;top: 3.5px;}
#mars_explain::before,#mars1::before,#Mars::before,#Ma1::before{content: url('../img/mars_s.png');position: relative;top: 3.5px;}
#jupiter_explain::before,#jupiter1::before,#Jupiter::before,#Gu1::before{content: url('../img/jupiter_s.png');position: relative;top: 3.5px;}
#saturn_explain::before,#saturn1::before,#Saturn::before,#Sa1::before{content: url('../img/saturn_s.png');position: relative;top: 3.5px;}
#rahu_explain::before,#rahu1::before,#Rahu::before,#Ra1::before{content: url('../img/rahu_s.png');position: relative;top: 3.5px;}
#ketu_explain::before,#ketu1::before,#Ketu::before,#Ke1::before{content: url('../img/ketu_s.png');position: relative;top: 3.5px;}

.hard_mode::before{content: "ハードモード";color:white;font-size:0.7rem;background-color: rgb(185, 104, 252);padding: 2px 2px;margin-left: 1px;margin-right: 1px;border-radius: 3px;}

/* #Ch1::after{content:'月';}
#Sy1::after{content:'太陽';}
#Bu1::after{content:'水星';}
#Ma1::after{content:'火星';}
#Gu1::after{content:'木星';}
#Sa1::after{content:'土星';}
#Ra1::after{content:'ラーフ';}
#Ke1::after{content:'ケートゥ';} */

#user{
    color:rgb(255, 0, 76);
}
#papachi{
    color:rgb(255, 0, 76);
}
#red{
    color:rgb(255, 17, 57);
}


img.house_meaning{
    width: 250px;
}

/* コンパネ メニュー */
.controlPanel{
    /* font-size: 14px; */
    min-height: 100px;
    border-radius: 8px;
    margin: 30px auto;
    width: 97%;
    text-align: left;
    padding: 4px;
    }


/* logoのところのdiv */
#logo_container{
    /* width: 200px; */
    /* background-color: #a2e29b; */
    display: flex;
    flex: 1;
}

#logo_left{width: 40px;}

#logo_right{ display: flex; width: 150px; flex-direction: column; position: relative;font-family: 'Hachi Maru Pop';}

#logo_right_top{ height: 36px;
    /* font-family: 'Hachi Maru Pop'; */
    font-size: 1.5rem;
    font-weight: bolder;
    margin-bottom: 0rem;
    /* color: rgb(245, 243, 243); */
    text-decoration: none;
    flex: 1;}
#logo_right_bottom{ height: 10px; width: 150px; font-size: 0.5rem !important; position: absolute; top: 32px;left: 25px;}



/* トップのメニュー関連↓ */

#in_premium,#in_free,#in_super,#in_admin,#in_guest,#in_consult{
    margin-top: 2px;
    /* margin-left: 10px; */
    /* position: absolute; */
    font-weight: bolder;
    font-size: 0.8rem;
    color: white;
    line-height: 1.1;
    pointer-events: none;
}
/* #b_premium{
    margin-top: 2px;
    margin-right: -10px;
    position: absolute;
    font-size: 0.75rem;
    line-height: 1.3;
} */
#in_admin::after{
    content: "ADMIN";
    font-size: 9px;
    background: rgb(116, 49, 223);
    color: #fff;
    padding: 1px 3px;
    margin-left: 2px;
    border-radius: 3px;
    vertical-align: middle;
}
#in_super::after{
    content: "PARTNER";
    font-size: 9px;
    background: rgb(181, 74, 231);
    color: #fff;
    padding: 1px 3px;
    margin-left: 2px;
    border-radius: 3px;
    vertical-align: middle;
}
#in_premium::after{
    content: "PREMIUM";
    font-size: 9px;
    background: rgb(250, 135, 3);
    color: #fff;
    padding: 1px 3px;
    margin-left: 2px;
    border-radius: 3px;
    vertical-align: middle;
}
#in_puchipre::after{
    content: "PuchiPre";
    font-size: 9px;
    background: rgb(251, 183, 10);
    color: #fff;
    padding: 1px 3px;
    margin-left: 2px;
    border-radius: 3px;
    vertical-align: middle;
}
#in_free::after{
    content: "FREE";
    font-size: 9px;
    background: rgb(3, 213, 250);
    color: #fff;
    padding: 1px 3px;
    margin-left: 2px;
    border-radius: 3px;
    vertical-align: middle;
}
#in_guest::after{
    content: "GUEST";
    font-size: 9px;
    background: rgb(146, 146, 144);
    color: #fff;
    padding: 1px 3px;
    margin-left: 2px;
    border-radius: 3px;
    vertical-align: middle;
}

#in_consult::after{
    content: "RESEARCH";
    font-size: 9px;
    font-weight: normal;
    background: rgb(4, 172, 110);
    color: #fff;
    padding: 1px 3px;
    /* padding: 1px 3px 1px 3px; */
    margin-left: 2px;
    border-radius: 3px;
    vertical-align: middle;
}

#super_premium::after{
    content: " V.I.P. ";
    font-weight: normal;
    font-size: 9px;
    background: rgb(181, 74, 231);
    color: #fff;
    padding: 1px 3px;
    margin-left: 2px;
    border-radius: 3px;
    vertical-align: middle;
}
#master::after{
    content: "Advanced";
    font-weight: normal;
    font-size: 9px;
    background: rgb(148, 35, 200);
    color: #fff;
    padding: 1px 3px;
    margin-left: 2px;
    border-radius: 3px;
    vertical-align: middle;
}

#consult::after{
    content: "RESEARCH";
    font-size: 9px;
    font-weight: normal;
    background: rgb(4, 172, 110);
    color: #fff;
    padding: 1px 3px;
    /* padding: 1px 3px 1px 3px; */
    margin-left: 2px;
    border-radius: 3px;
    vertical-align: middle;
}

#premium::after{
    content: "PREMIUM";
    font-size: 9px;
    font-weight: normal;
    background: rgb(250, 135, 3);
    color: #fff;
    padding: 1px 3px;
    margin-left: 2px;
    border-radius: 3px;
    vertical-align: middle;
}
#certificate::after{
    content: "鑑定書";
    font-size: 9px;
    font-weight: normal;
    background: rgb(35, 9, 204);
    color: #fff;
    padding: 1px 3px;
    margin-left: 2px;
    border-radius: 3px;
    vertical-align: middle;
}
#puchipre::after{
    content: "PuchiPre";
    font-size: 9px;
    font-weight: normal;
    background: rgb(251, 183, 10);
    color: #fff;
    padding: 1px 3px;
    margin-left: 2px;
    border-radius: 3px;
    vertical-align: middle;
}

#free::after{
    /* content: url('../img/premium_logo.png'); */
    content: "FREE";
    font-size: 9px;
    font-weight: normal;
    background: rgb(3, 213, 250);
    color: #fff;
    padding: 1px 3px;
    margin-left: 2px;
    border-radius: 3px;
    vertical-align: middle;
}

#guest::after{
    /* content: url('../img/premium_logo.png'); */
    content: "GUEST";
    font-size: 9px;
    font-weight: normal;
    background: rgb(100, 105, 105);
    color: #fff;
    padding: 1px 3px;
    margin-left: 2px;
    border-radius: 3px;
    vertical-align: middle;
}

#advanced::after{
    /* content: url('../img/premium_logo.png'); */
    content: "PARTNER";
    font-size: 9px;
    font-weight: normal;
    background: rgb(144, 28, 179);
    color: #fff;
    padding: 1px 3px;
    margin-left: 2px;
    border-radius: 3px;
    vertical-align: middle;
}
#upgrade::after{
    /* content: url('../img/premium_logo.png'); */
    content: "UPGRADE";
    font-size: 9px;
    font-weight: normal;
    background: rgb(144, 28, 179);
    color: #fff;
    padding: 1px 3px;
    margin-left: 2px;
    border-radius: 3px;
    vertical-align: middle;
}

#simulation::after{
    content: "SIMULATION";
    font-size: 9px;
    font-weight: normal;
    background: rgb(248, 101, 194);
    color: #fff;
    padding: 1px 3px;
    margin-left: 2px;
    border-radius: 3px;
    vertical-align: middle;
}

.premium::after{
    content: "PREMIUM";
    font-size: 9px;
    font-weight: normal;
    background: rgb(250, 135, 3);
    color: #fff;
    padding: 1px 3px;
    margin-left: 2px;
    border-radius: 3px;
    vertical-align: middle;
}

.puchipre::after{
    content: "PuchiPre";
    font-size: 9px;
    font-weight: normal;
    background: rgb(251, 183, 10);
    color: #fff;
    padding: 1px 3px;
    margin-left: 2px;
    border-radius: 3px;
    vertical-align: middle;
}

.free::after{
    /* content: url('../img/premium_logo.png'); */
    content: "FREE";
    font-size: 9px;
    font-weight: normal;
    background: rgb(3, 213, 250);
    color: #fff;
    padding: 1px 3px;
    margin-left: 2px;
    border-radius: 3px;
    vertical-align: middle;
    font-family: 'Hachi Maru Pop';
}

.consult::after{
    content: "RESEARCH";
    font-size: 9px;
    font-weight: normal;
    background: rgb(4, 172, 110);
    color: #fff;
    padding: 1px 3px;
    /* padding: 1px 3px 1px 3px; */
    margin-left: 2px;
    border-radius: 3px;
    vertical-align: middle;
}

.simulation::after{
    content: "SIMULATION";
    font-size: 9px;
    font-weight: normal;
    background: rgb(248, 101, 194);
    color: #fff;
    padding: 1px 3px;
    margin-left: 2px;
    border-radius: 3px;
    vertical-align: middle;
}

.small_letter{
    font-size: 0.7rem;
}

/* P段落の下のスペース減らす。 */
.short_space{
    margin-bottom: 2px;
}

/* 下にまあまあなスペース */
.middle_space{
    margin-bottom: 10px;
}

/* 上下のスペースを増やす */
.updown_space{
    margin-top: 20px;
    margin-bottom: 5px;
}

/* 上下のスペースをさらに増やす */
.updown_longspace{
    margin-top: 30px;
    margin-bottom: 10px;
}

.top_box{
    padding: 10px;
    width: 300px;
    margin: 0 auto;
}

.pad{
    padding: 3px;
}

/* はちまるでいきたいとき用 */
.soft_font{
    font-family: 'Hachi Maru Pop', sans-serif;
}

    /* 水平線 */
    hr.line {
        height: 2px;
        border: none;
        border-top: 2px #FFF dotted;
        }

    #line-bottom{
        width: 80%;
        border-bottom: 1px solid #777;
        padding-bottom: 4px;
    }
    #line-top{
        width: 80%;
        border-top: 1px dotted #777;
        padding-top: 12px;
    }

    /* @keyframes fadeInAnime{
        0%,100%{
          color:#ff1493;
        }

        25%{
          color:#7fff00;
        }

        50%{
          color:#0091EA;
        }

        75%{
          color:#9400d3;
        }
      } */

/*
footer
================================================ */
.footer {
    /* background-image: url('../img/background.jpg'); */
    /* background-color: rgb(238, 238, 235); */
    text-align: center;
    height: 200px;
    /* padding-top: 2vh; */
}
/* .btn {
    background: #555;
    font-size: 1rem;
    color: #fff;
    padding: .5rem 1.5rem;
    border-radius: 6px;
    display: inline-block;
    margin: 2rem 0 2.25rem;
    text-decoration: none;
} */
/* .btn:hover {
    background: #777;
} */
.footer-sns {
    display: flex;
    justify-content: center;
}
.footer-sns a {
    /* background: #fff; */
    width: 3rem;
    height: 3rem;
    margin: 0 .5rem;
    /* border-radius: 50%; */
    font-size: 2rem;
    padding: .5rem 0 0 .6rem;
    display: flex;
    text-decoration: none;
  /* justify-content: center; */
  /* align-items: center; */
}
.footer-sns a:hover {
    background: rgba(255,255,255,.5);
}

.copyright{
    font-size: 10px;
    color: rgb(105, 104, 104);
}

.newContainer2 ul{
    list-style: none;
}


.footer_container{
    width: 350px;
    margin: 0 auto;
    text-align: left;
    font-size: 0.8rem;
}
.footer_container h6{
    font-size: 0.8rem;
    border-bottom: 1px dotted rgba(94, 91, 91, 0.966);
    margin-bottom: 10px;
}


.box {
    width: 345px;       /* 適当な幅を指定 */
    height: 250px;      /* 適当な高さを指定 */
    position: relative; /* 基準位置とする */
    margin: 0 auto;
    margin-left: -11px;
    padding-left: 0px;
  }

  /* 共通するCSS */
  .box img{

    position: absolute; /* 相対位置に指定 */

  }



  .box .img_chart {
    /* 左上に固定 */
    width: 345px;
    height: 250px;
    top: 0;
    left: 0;
    border-radius: 4px;

  }



  /* チャート作成 */
  .box .img_position1-1-1 {top: 20%;left: 46%;}
  .box .img_position1-2-1 {top: 20%;left: 41%;}
  .box .img_position1-2-2 {top: 20%;left: 51%;}
  .box .img_position1-3-1 {top: 20%;left: 38%;}
  .box .img_position1-3-2 {top: 20%;left: 46%;}
  .box .img_position1-3-3 {top: 20%;left: 53%;}
  .box .img_position1-4-1 {top: 20%;left: 35%;}
  .box .img_position1-4-2 {top: 20%;left: 43%;}
  .box .img_position1-4-3 {top: 20%;left: 50%;}
  .box .img_position1-4-4 {top: 20%;left: 57%;}
  .box .img_position1-5-1 {top: 11%;left: 46%;}
  .box .img_position1-5-2 {top: 23%;left: 35%;}
  .box .img_position1-5-3 {top: 23%;left: 43%;}
  .box .img_position1-5-4 {top: 23%;left: 50%;}
  .box .img_position1-5-5 {top: 23%;left: 57%;}

  .box .img_position2-1-1 {top: 5%;left: 21%;}
  .box .img_position2-2-1 {top: 5%;left: 17%;}
  .box .img_position2-2-2 {top: 5%;left: 25%;}
  .box .img_position2-3-1 {top: 4%;left: 14%;}
  .box .img_position2-3-2 {top: 4%;left: 22%;}
  .box .img_position2-3-3 {top: 4%;left: 29%;}
  .box .img_position2-4-1 {top: 1%;left: 11%;}
  .box .img_position2-4-2 {top: 1%;left: 19%;}
  .box .img_position2-4-3 {top: 1%;left: 25.5%;}
  .box .img_position2-4-4 {top: 1%;left: 32%;}
  .box .img_position2-5-1 {top: 1%;left: 9%;}
  .box .img_position2-5-2 {top: 1%;left: 16%;}
  .box .img_position2-5-3 {top: 1%;left: 22%;}
  .box .img_position2-5-4 {top: 1%;left: 29%;}
  .box .img_position2-5-5 {top: 1%;left: 35%;}

  .box .img_position3-1-1 {top: 20%;left: 6%;}
  .box .img_position3-2-1 {top: 20%;left: 2%;}
  .box .img_position3-2-2 {top: 20%;left: 10%;}
  .box .img_position3-3-1 {top: 9%;left: 3%;}
  .box .img_position3-3-2 {top: 20%;left: 3%;}
  .box .img_position3-3-3 {top: 31%;left: 3%;}
  .box .img_position3-4-1 {top: 14%;left: 1%;}
  .box .img_position3-4-2 {top: 25%;left: 1%;}
  .box .img_position3-4-3 {top: 14%;left: 8%;}
  .box .img_position3-4-4 {top: 25%;left: 8%;}
  .box .img_position3-5-1 {top: 9%;left: 1%;}
  .box .img_position3-5-2 {top: 20%;left: 1%;}
  .box .img_position3-5-3 {top: 31%;left: 1%;}
  .box .img_position3-5-4 {top: 14%;left: 8%;}
  .box .img_position3-5-5 {top: 25%;left: 8%;}

  .box .img_position4-1-1 {top: 45%;left: 21%;}
  .box .img_position4-2-1 {top: 45%;left: 16%;}
  .box .img_position4-2-2 {top: 45%;left: 26%;}
  .box .img_position4-3-1 {top: 45%;left: 13%;}
  .box .img_position4-3-2 {top: 45%;left: 21%;}
  .box .img_position4-3-3 {top: 45%;left: 28%;}
  .box .img_position4-4-1 {top: 45%;left: 10%;}
  .box .img_position4-4-2 {top: 45%;left: 18%;}
  .box .img_position4-4-3 {top: 45%;left: 25%;}
  .box .img_position4-4-4 {top: 45%;left: 32%;}
  .box .img_position4-5-1 {top: 36%;left: 21%;}
  .box .img_position4-5-2 {top: 48%;left: 11%;}
  .box .img_position4-5-3 {top: 48%;left: 18%;}
  .box .img_position4-5-4 {top: 48%;left: 25%;}
  .box .img_position4-5-5 {top: 48%;left: 32%;}

  .box .img_position5-1-1 {top: 68%;left: 6%;}
  .box .img_position5-2-1 {top: 68%;left: 2%;}
  .box .img_position5-2-2 {top: 68%;left: 10%;}
  .box .img_position5-3-1 {top: 58%;left: 3%;}
  .box .img_position5-3-2 {top: 69%;left: 3%;}
  .box .img_position5-3-3 {top: 80%;left: 3%;}
  .box .img_position5-4-1 {top: 64%;left: 1%;}
  .box .img_position5-4-2 {top: 75%;left: 1%;}
  .box .img_position5-4-3 {top: 64%;left: 8%;}
  .box .img_position5-4-4 {top: 75%;left: 8%;}
  .box .img_position5-5-1 {top: 58%;left: 1%;}
  .box .img_position5-5-2 {top: 69%;left: 1%;}
  .box .img_position5-5-3 {top: 80%;left: 1%;}
  .box .img_position5-5-4 {top: 64%;left: 8%;}
  .box .img_position5-5-5 {top: 75%;left: 8%;}

  .box .img_position6-1-1 {top: 85%;left: 21%;}
  .box .img_position6-2-1 {top: 85%;left: 18%;}
  .box .img_position6-2-2 {top: 85%;left: 26%;}
  .box .img_position6-3-1 {top: 85%;left: 14%;}
  .box .img_position6-3-2 {top: 85%;left: 22%;}
  .box .img_position6-3-3 {top: 85%;left: 29%;}
  .box .img_position6-4-1 {top: 89%;left: 10%;}
  .box .img_position6-4-2 {top: 89%;left: 18%;}
  .box .img_position6-4-3 {top: 89%;left: 24.5%;}
  .box .img_position6-4-4 {top: 89%;left: 31%;}
  .box .img_position6-5-1 {top: 89%;left: 9%;}
  .box .img_position6-5-2 {top: 89%;left: 16%;}
  .box .img_position6-5-3 {top: 89%;left: 22%;}
  .box .img_position6-5-4 {top: 89%;left: 29%;}
  .box .img_position6-5-5 {top: 89%;left: 35%;}

  .box .img_position7-1-1 {top: 70%;left: 46%;}
  .box .img_position7-2-1 {top: 70%;left: 41%;}
  .box .img_position7-2-2 {top: 70%;left: 51%;}
  .box .img_position7-3-1 {top: 70%;left: 38%;}
  .box .img_position7-3-2 {top: 70%;left: 46%;}
  .box .img_position7-3-3 {top: 70%;left: 53%;}
  .box .img_position7-4-1 {top: 70%;left: 35%;}
  .box .img_position7-4-2 {top: 70%;left: 43%;}
  .box .img_position7-4-3 {top: 70%;left: 50%;}
  .box .img_position7-4-4 {top: 70%;left: 57%;}
  .box .img_position7-5-1 {top: 61%;left: 46%;}
  .box .img_position7-5-2 {top: 73%;left: 36%;}
  .box .img_position7-5-3 {top: 73%;left: 43%;}
  .box .img_position7-5-4 {top: 73%;left: 50%;}
  .box .img_position7-5-5 {top: 73%;left: 57%;}

  .box .img_position8-1-1 {top: 85%;left: 70%;}
  .box .img_position8-2-1 {top: 85%;left: 67%;}
  .box .img_position8-2-2 {top: 85%;left: 75%;}
  .box .img_position8-3-1 {top: 85%;left: 62%;}
  .box .img_position8-3-2 {top: 85%;left: 70%;}
  .box .img_position8-3-3 {top: 85%;left: 77%;}
  .box .img_position8-4-1 {top: 88%;left: 60%;}
  .box .img_position8-4-2 {top: 88%;left: 68%;}
  .box .img_position8-4-3 {top: 88%;left: 74.5%;}
  .box .img_position8-4-4 {top: 88%;left: 81%;}
  .box .img_position8-5-1 {top: 89%;left: 58%;}
  .box .img_position8-5-2 {top: 89%;left: 65%;}
  .box .img_position8-5-3 {top: 89%;left: 71%;}
  .box .img_position8-5-4 {top: 89%;left: 78%;}
  .box .img_position8-5-5 {top: 89%;left: 84%;}

  .box .img_position9-1-1 {top: 68%;left: 86%;}
  .box .img_position9-2-1 {top: 68%;left: 82%;}
  .box .img_position9-2-2 {top: 68%;left: 90%;}
  .box .img_position9-3-1 {top: 58%;left: 90%;}
  .box .img_position9-3-2 {top: 69%;left: 90%;}
  .box .img_position9-3-3 {top: 80%;left: 90%;}
  .box .img_position9-4-1 {top: 64%;left: 84%;}
  .box .img_position9-4-2 {top: 75%;left: 84%;}
  .box .img_position9-4-3 {top: 64%;left: 91%;}
  .box .img_position9-4-4 {top: 75%;left: 91%;}
  .box .img_position9-5-1 {top: 58%;left: 91%;}
  .box .img_position9-5-2 {top: 69%;left: 91%;}
  .box .img_position9-5-3 {top: 80%;left: 91%;}
  .box .img_position9-5-4 {top: 64%;left: 84%;}
  .box .img_position9-5-5 {top: 75%;left: 84%;}

  .box .img_position10-1-1 {top: 45%;left: 71%;}
  .box .img_position10-2-1 {top: 45%;left: 66%;}
  .box .img_position10-2-2 {top: 45%;left: 76%;}
  .box .img_position10-3-1 {top: 45%;left: 63%;}
  .box .img_position10-3-2 {top: 45%;left: 71%;}
  .box .img_position10-3-3 {top: 45%;left: 78%;}
  .box .img_position10-4-1 {top: 45%;left: 60%;}
  .box .img_position10-4-2 {top: 45%;left: 68%;}
  .box .img_position10-4-3 {top: 45%;left: 75%;}
  .box .img_position10-4-4 {top: 45%;left: 82%;}
  .box .img_position10-5-1 {top: 36%;left: 71%;}
  .box .img_position10-5-2 {top: 48%;left: 61%;}
  .box .img_position10-5-3 {top: 48%;left: 68%;}
  .box .img_position10-5-4 {top: 48%;left: 75%;}
  .box .img_position10-5-5 {top: 48%;left: 82%;}

  .box .img_position11-1-1 {top: 20%;left: 86%;}
  .box .img_position11-2-1 {top: 20%;left: 82%;}
  .box .img_position11-2-2 {top: 20%;left: 90%;}
  .box .img_position11-3-1 {top: 10%;left: 90%;}
  .box .img_position11-3-2 {top: 21%;left: 90%;}
  .box .img_position11-3-3 {top: 32%;left: 90%;}
  .box .img_position11-4-1 {top: 14%;left: 84%;}
  .box .img_position11-4-2 {top: 25%;left: 84%;}
  .box .img_position11-4-3 {top: 14%;left: 91%;}
  .box .img_position11-4-4 {top: 25%;left: 91%;}
  .box .img_position11-5-1 {top: 10%;left: 91%;}
  .box .img_position11-5-2 {top: 21%;left: 91%;}
  .box .img_position11-5-3 {top: 32%;left: 91%;}
  .box .img_position11-5-4 {top: 16%;left: 84%;}
  .box .img_position11-5-5 {top: 27%;left: 84%;}

  .box .img_position12-1-1 {top: 5%;left: 71%;}
  .box .img_position12-2-1 {top: 5%;left: 67%;}
  .box .img_position12-2-2 {top: 5%;left: 75%;}
  .box .img_position12-3-1 {top: 4%;left: 64%;}
  .box .img_position12-3-2 {top: 4%;left: 72%;}
  .box .img_position12-3-3 {top: 4%;left: 79%;}
  .box .img_position12-4-1 {top: 2%;left: 61%;}
  .box .img_position12-4-2 {top: 2%;left: 69%;}
  .box .img_position12-4-3 {top: 2%;left: 75.5%;}
  .box .img_position12-4-4 {top: 2%;left: 82%;}
  .box .img_position12-5-1 {top: 1%;left: 59%;}
  .box .img_position12-5-2 {top: 1%;left: 66%;}
  .box .img_position12-5-3 {top: 1%;left: 72%;}
  .box .img_position12-5-4 {top: 1%;left: 79%;}
  .box .img_position12-5-5 {top: 1%;left: 85%;}



  .box .sign_position1 {position: absolute; top: 33%;left: 48%; margin-top: 1rem;}
  .box .sign_position2 {position: absolute; top: 10%;left: 23.5%; margin-top: 1rem;}
  .box .sign_position3 {position: absolute; top: 15%;left: 18%; margin-top: 1rem;}
  .box .sign_position4 {position: absolute; top: 39%;left: 43%; margin-top: 1rem;}
  .box .sign_position5 {position: absolute; top: 63%;left: 18%; margin-top: 1rem;}
  .box .sign_position6 {position: absolute; top: 69%;left: 23.5%; margin-top: 1rem;}
  .box .sign_position7 {position: absolute; top: 44%;left: 48%; margin-top: 1rem;}
  .box .sign_position8 {position: absolute; top: 69%;left: 72.5%; margin-top: 1rem;}
  .box .sign_position9 {position: absolute; top: 64%;left: 77.5%; margin-top: 1rem;}
  .box .sign_position10 {position: absolute; top: 39%;left: 52.5%; margin-top: 1rem;}
  .box .sign_position11 {position: absolute; top: 15%;left: 77%; margin-top: 1rem;}
  .box .sign_position12 {position: absolute; top: 10%;left: 72.5%; margin-top: 1rem;}

  .chart-box {
    margin: 0 auto;
    position: relative;
    /* width:80vw; height:50vh */
    /* width:75vw; */
    /* width: 350px; */
    height: 500px;
}


.daytime::before{content: "昼間";font-size: .7rem;background: rgb(248, 227, 110);padding: 2px 2px;margin-left: 1px;margin-right: 1px;border-radius: 3px;}
.morning::before{content: "朝";font-size: .7rem;background: rgb(177, 238, 247);padding: 2px 6px;margin-left: 1px;margin-right: 1px;border-radius: 3px;}
.earlymorning::before{content: "早朝";font-size: .7rem;background: rgb(183, 221, 218);padding: 2px 2px;margin-left: 1px;margin-right: 1px;border-radius: 3px;}
.evening::before{content: "夕方";font-size: .7rem;background: rgb(247, 144, 96);padding: 2px 2px;margin-left: 1px;margin-right: 1px;border-radius: 3px;}
.night::before{content: "夜";color: white;font-size: .7rem;background: rgb(59, 59, 105);padding: 2px 6px;margin-left: 1px;margin-right: 1px;border-radius: 3px;}
/* .latenight::before{content: "深夜";color: white;font-size: .6rem;background: rgb(33, 33, 59);padding: 1px 2px;margin-left: 1px;margin-right: 1px;border-radius: 3px;} */
.latenight::before{content: "深夜";color: white;font-size: .7rem;background: rgb(33, 33, 59);padding: 2px 2px;margin-left: 1px;margin-right: 1px;border-radius: 3px;}
/* padding: 2px 2px;margin-left: 1px;margin-right: 1px;border-radius: 3px; */
.north::before{content: "北緯";margin-right: 1px;}
.south::before{content: "南緯";margin-right: 1px;}
.east::before{content: "東経";margin-right: 1px;}
.west::before{content: "西経";margin-right: 1px;}

/* 画像系のCSS */
#asc_img{
    width: 320px;
    height: 240px;
}
#nak_img{
    width: 360px;
    height: 180px;
}
#title_img{
    width: 320px;
    height: 120px;
    border-radius: 8px;
    margin: -12px 0px -25px 0px;
}
#title2_img{
    width: 320px;
    height: 120px;
    border-radius: 8px;
    /* margin: -12px 0px -25px 0px; */
}
#present_img{
    width: 320px;
    height: 240px;
    border-radius: 8px;
    /* margin: -12px 0px -25px 0px; */
}
#today_img{
    width: 160px;
    height: 120px;
    border-radius: 8px;
    margin-top: -10px;
}
#premium_img{
    width: 320px;
    height: 240px;
    border-radius: 4px;
}
#house_img{
    width: 320px;
    height: 213.3px;
    border-radius: 8px;
}

#icon_img{
    width: 80px;
    height: 80px;
    border-radius: 8px;
}
/* .nakshatra{
    border: 5px solid;
    border-radius: 120px;
    border-color: #4285F4;
} */

/* 更新情報のところ */
.latest_explain{
    text-align: left;
    font-family: 'Kosugi Maru', sans-serif;
    font-size: 0.7rem;
    border-radius: 4px;
}

.latest_left{width: 30px;}

.latest_left_column{text-align: center;}

.answer_column{font-size: 0.7rem;}

/* Kosugi Maruにしたいとき */
.normal_font{
    font-family: 'Kosugi Maru', sans-serif;
}

/* Hachi Maruにしたいとき */
.maru{
    font-family: 'Hachi Maru Pop', sans-serif;
}

.notice{
    border: solid 1px;
    padding: 3px;
    border-color: rgb(178, 178, 178);
}

/* リンクの下線を消す */
.no_line{
    text-decoration: none;
    color: inherit;
}

.twitter{
    color: #1DA1F2;
}

.facebook{
    color:  #4267B2;
}
.line_color{
    color:  #06C755;
}

/* カラバリのとこ */
#color_theme_select_box{
    padding-left: 10px;
}

/* テーマの２つずつ並べるいれもの */
.color_container{
    display: flex;
}
.left_color_container{
    /* background-color: #0c4128; */
    flex: 1;
}
.right_color_container{
    /* background-color: #31d2f2; */
    flex: 1;
}

.kadomaru{
    border-radius: 8px;
}

.table_width{
    max-width: 500px;
}

/* 統計テーブル */
.statistics_table td{
    padding: 4px;
    border: solid 1px;
}

.large{
    font-size: x-large;
    font-weight: bold;
}

.alittle_small_letter{
    font-size: 0.85rem;
}

.small_letter{
    font-size: 0.7rem;
}
.very_small_letter{
    font-size: 0.5rem;
}

.last_name{
    display: none;
}

/* チェックテスト */
#check_test{
    /* border: solid 1px; */
}
#check_test td,th{
    border: none;
    border-left: 1px solid;
    border-top: 1px solid;
}
#check_test td:first-child,th:first-child{
    border-left:none;
}
#check_test tr:first-child td,tr:first-child th{
    border-top:none;
}
#last_td{
    border-left:none !important;
}

.return_container{
    display: flex;
    justify-content: flex-end;
    margin-right:6px;
}



#sl5::after {
        content: "♌しし座";
       color:inherit;
        position: relative;
        /* border-radius: 12px; */
        /* top: -10px; */
        /* right: -0px; */
        font-size: 0.7rem;
        /* padding: 1px 8px 2px 7px; */
}

.asc_ranking {
    position: relative;
    width:80px;
    height:80px;
    text-align: center;
}

.asc_ranking p {
    font-size:0.6rem;
    position: absolute;
  color: inherit;
  /* font-weight: bold; 太字に */
  font-family :inherit;
  bottom: 0;
  right: 0;
  left:0;
  margin: auto;
}

.asc_ranking img{
    width:100%;
}




/* 星の時期の開閉 */
.switchdsp input {
    display: none;
    }

    .switchdsp .dsp {
    padding: 0px 1px 0px 1px;
    height: 0;
    overflow: hidden;
    transition: 0.9s;
    opacity: 0;
    }

    .switchdsp input:checked ~ .dsp {
    padding: 0px 4px 0px 4px;
    height: auto;
    opacity: 1;
    }

    .switchdsp2 input {
        display: none;
        }

    .switchdsp2 .dsp2 {
    padding: 0px 4px 0px 4px;
    height: 0;
    overflow: hidden;
    transition: 0.9s;
    opacity: 0;
    }

    .switchdsp2 input:checked ~ .dsp2 {
    padding: 0px 8px 0px 8px;
    height: auto;
    opacity: 1;
    }