* {
    padding: 0;
    margin: 0;
    font-size: 15px;
    color: #2e2e2c;
}

a {
    font-family: "Meirio";
    text-decoration: none
}

body {
    min-width: 900px
}

#wrap {
    position: relative
}

header {
    padding: 15px 0 10px 0;
    border-bottom: 3px #b7d45a solid
}

#header {
    position: relative;
    max-width: 1080px;
    margin: 0 auto
}

#header img {
    width: 320px
}

#header .cpx-sch {
    position: absolute;
    right: 0;
    bottom: 5px
}

#header .cpx-sch p span {
    font-size: 24px;
    color: #f9bd2c;
    line-height: 27px;
    margin-right: 2px;
    font-weight: bold
}

#header .cpx-sch p,
#header .cpx-sch span {
    float: left;
    margin-right: 10px;
    line-height: 30px
}

#header input[type=text] {
    float: left;
    margin-right: 5px;
    line-height: 25px;
    border-radius: 3px;
    border: 1px #dadbcd solid;
    padding-left: 10px
}

:placeholder-shown {
    color: #bbb
}

::-webkit-input-placeholder {
    color: #bbb
}

:-moz-placeholder {
    color: #bbb;
    opacity: 1
}

::-moz-placeholder {
    color: #bbb;
    opacity: 1
}

:-ms-input-placeholder {
    color: #bbb
}

#header button {
    padding: 5px 30px;
    border: 0;
    border-radius: 3px;
    background-color: #f9bd2c
}

#header button i {
    color: #fff
}

#hdr-menu {
    position: absolute;
    top: 15px;
    right: 0
}

#hdr-menu span {
    border-left: 1px #dfdfde solid
}

#hdr-menu span a {
    font-size: 12px;
    margin: 0 30px
}

#hdr-menu span a:hover {
    color: #b7d45a
}

#hdr-menu span:first-child {
    border-left: 1px #dfdfde solid
}

#hdr-menu span:last-child {
    border-right: 1px #dfdfde solid
}

.pk_bc {
    background-color: #f9ffe7;
    padding: 5px
}

.pankuzu {
    width: 1080px;
    margin: 0 auto
}

.pankuzu span {
    font-size: 12px;
    margin-right: 10px;
    padding-bottom: 1px
}

.pankuzu span:after {
    font-family: "Font Awesome 5 Free";
    content: "\f105";
    margin-left: 10px
}

.pankuzu span:last-child:after {
    content: none
}

.pankuzu span a {
    font-size: 12px;
    border-bottom: 1px #777672 solid
}

.pankuzu span a:hover {
    color: #b7d45a;
    border-bottom: 1px #b7d45a solid
}

#mv {
    margin: 0 auto 20px auto;
    background-color: #fefff9
}

#mv img {
    width: 1080px;
    height: 230px;
    margin: 0 auto;
    display: inherit
}

._mv img {
    border: 1px #eaece2 solid;
    width: 100%;
    border-radius: 3px
}

#contents {
    width: 1080px;
    margin: 0 auto;
    display: table;
    margin-top: 20px
}

.main-contents {
    width: 760px;
    float: left;
    margin-left: 20px
}

.tab_area{
    font-size: 0px;
}

.tab_area label {
    width: 32%;
    margin-right: 2%;
    display: inline-block;
    padding: 15px 0;
    color: #999;
    background: #f2f3ee;
    text-align: center;
    font-size: 15px;
    cursor: pointer;
    transition: ease .2s opacity;
}

.tab_area label:last-child {
    margin-right: 0
}

.tab_area label:hover {
    opacity: .5
}

.panel_area {
    background: #fff
}

.tab_panel {
    width: 100%;
    padding: 20px 0;
    background-color: #fefff3;
    display: none;
}

.tab_panel p {
    letter-spacing: 1px
}

.tab_area label.active {
    color: #fff
}

.tab_area label.genre1 {
    border-top: 2px #b7d45a solid
}

.tab_area label.genre2 {
    border-top: 2px #4ecfd4 solid
}

.tab_area label.genre3 {
    border-top: 2px #d750ae solid
}

.tab_area label.genre4 {
    border-top: 2px #d24e5b solid
}

.tab_area label.active.genre1 {
    background-color: #b7d45a
}

.tab_area label.active.genre2 {
    background-color: #4ecfd4
}

.tab_area label.active.genre3 {
    background-color: #d750ae
}

.tab_area label.active.genre4 {
    background-color: #d24e5b
}

.tab_panel.active {
    display: inline-block
}

.tab_panel.active#genre1 {
    border-top: 2px #b7d45a solid
}

.tab_panel.active#genre2 {
    border-top: 2px #4ecfd4 solid
}

.tab_panel.active#genre3 {
    border-top: 2px #d750ae solid
}

.tab_panel.active#genre4 {
    border-top: 2px #d24e5b solid
}

.tab_area2{
    font-size: 0px;
    margin-top: 30px;
}

.tab_area2 label {
    width: 49%;
    margin-right: 0;
    display: inline-block;
    padding: 15px 0 10px 0;
    margin-bottom: 15px;
    color: #999;
    text-align: center;
    font-size: 15px;
    cursor: pointer;
    transition: ease .2s opacity;
    border-bottom: 3px #ccc solid;
    font-weight: bold;
    position: relative;
}

.tab_area2 label:before{
    content: "";
    position: absolute;
    top: 50px;
    left: 50%;
    margin-left: -10px;
    border: 10px solid transparent;
    border-top: 12px solid #cccccc;
}

label.tab_label2:first-child{
    margin-right: 1%;
}
label.tab_label2:last-child{
    margin-left: 1%;
}

.tab_label2.active{
    color: #fff;
    background-color: #f9bd2c;
    border-bottom: 3px #f9bd2c solid;
}

.tab_area2 label.active:before{
    content: "";
    position: absolute;
    top: 50px;
    left: 50%;
    margin-left: -10px;
    border: 10px solid transparent;
    border-top: 12px solid #f9bd2c;
}

.panel_area {
    background: #fff
}

td.result_img{
    background-color: transparent;
    background: unset;
    border: none;
}

.result_img img {
    perspective: 800px;
}

.result_img img.front, .result_img2 img.front2{
    display: none;
}

.result_img img.front, .result_img img.back, .result_img2 img.front2, .result_img2 img.back2{
    height: 345px;
}

.result_img.sub img.front, .result_img.sub img.back, .result_img2.sub img.front2, .result_img2.sub img.back2{
    height: 250px !important;
}




.tarot_backdeco, .tarot0 .contents{
    position: relative;
    background-color: #fefff3;
    background-image: url(../img/flame_tarot2_1.png),url(../img/flame_tarot2_2.png),url(../img/flame_tarot_back.jpg);
    background-repeat: no-repeat, no-repeat, repeat-y;
    background-position: top left, bottom right;
    background-size: 50%, 50%, 100%;
    border: 2px #feae20 solid;
    box-sizing: border-box;
}

table.tarot_detail{
    background-color: #fefff3;
    border: 2px #dcddd1 solid;
}

table.tarot_detail td{
    text-align: left;
}

table.tarot_detail td.tit{
    border-right: 1px #dcddd1 solid;
    text-align: center;
    font-weight: bold;
    width: 20%;
    padding: 5px 0;
}



.contents.tab_panel2 {
    width: 100%;
    padding: 20px 0;
    display: none
}

.tab_panel2 p {
    letter-spacing: 1px;
}

.tab_area2 label.genre1 {
    border-top: 2px #b7d45a solid
}

.tab_area2 label.genre2 {
    border-top: 2px #4ecfd4 solid
}


.tab_area2 label.active.genre1 {
    background-color: #b7d45a
}

.tab_area2 label.active.genre2 {
    background-color: #4ecfd4
}


.tab_panel2.active {
    display: inline-block
}

.tab_panel2.active#genre1 {
    border-top: 2px #b7d45a solid
}

.tab_panel2.active#genre2 {
    border-top: 2px #4ecfd4 solid
}



.uranai #genre1 .item,
.uranai #genre2 .item,
.uranai #genre3 .item {
    width: 365px;
    float: left;
    margin: 0 0 15px 10px
}

.uranai #genre1 img,
.uranai #genre2 img,
.uranai #genre3 img {
    width: 78px;
    border: 1px #eee solid;
    border-radius: 3px;
    float: left
}

.uranai #genre1 .txt,
.uranai #genre2 .txt,
.uranai #genre3 .txt {
    float: left;
    width: 280px;
    display: block;
    margin-left: 5px
}

.uranai #genre1 .txt h3,
.uranai #genre2 .txt h3,
.uranai #genre3 .txt h3,
.new-uranai .txt h3,
.pop-uranai .txt h3,
.recommend .txt h3 {
    border-bottom: 1px #e4e5d9 solid
}

.uranai #genre1 .txt h3 a,
.uranai #genre2 .txt h3 a,
.uranai #genre3 .txt h3 a,
.new-uranai .txt h3 a,
.pop-uranai .txt h3 a,
.recommend .txt h3 a {
    font-family: Meirio;
    font-size: 16px;
    visibility: hidden
}

.ath-list p.name {
    font-family: Meirio;
    font-size: 16px;
    font-weight: bold;
    margin-left: 21px
}

.ath-list p.name:before {
    font-family: "Font Awesome 5 Free";
    content: "\f007";
    color: #b7d45a;
    margin-right: 20px
}

.ath-list p.intro {
    background-color: #f2f2f2;
    border-radius: 3px;
    padding: 10px;
    margin-top: 12px
}

.ath-list p.intro:before {
    content: "";
    position: absolute;
    top: 12px;
    left: 30px;
    margin-left: -15px;
    border: 15px solid transparent;
    border-bottom: 12px solid #f2f2f2
}

.ath-list p.more {
    position: absolute;
    right: 0;
    top: 0
}

.ath-list p.more a {
    padding: 3px 10px;
    background-color: #fff;
    color: #f9bd2c;
    border: 1px #f9bd2c solid;
    border-radius: 3px
}

.ath-list p.more a:hover {
    background-color: #f9bd2c;
    color: #fff;
    border-radius: 3px
}

.uranai #genre1 .txt h3 a:hover,
.uranai #genre2 .txt h3 a:hover,
.uranai #genre3 .txt h3 a:hover,
.ath-list p.name a:hover {
    color: #b7d45a
}

.uranai #genre1 .txt p,
.uranai #genre2 .txt p,
.uranai #genre3 .txt p {
    font-family: Meirio;
    font-size: 13px;
    line-height: 15px;
    margin-top: 5px
}

h2 {
    background-color: #b7d45a;
    padding: 15px 0 15px 15px;
    background-image: url(../img/leaf.png);
    background-size: 220px;
    background-repeat: no-repeat;
    background-position-x: 100%;
    background-position-y: -50px
}

h2 span {
    font-family: "Meirio";
    color: #fff;
    font-size: 18px;
    border-left: 2px #fff solid;
    padding-left: 15px;
    display: inline-block
}

h2#art_tit{
    position: relative;
    padding: 1em;
    background-image: none;
    background-color: transparent;
}
h2#art_tit:before,
h2#art_tit:after {
    position: absolute;
    left: 0;
    content: '';
    width: 100%;
    height: 5px;
    box-sizing: border-box;
}
h2#art_tit:before {
    top: 0;
    border-top: 2px solid #a7c139;
    border-bottom: 1px solid #a7c139;
}
h2#art_tit:after {
    bottom: 0;
    border-top: 1px solid #a7c139;
    border-bottom: 2px solid #a7c139;
}

h2#art_tit span{
    font-family: "Meirio";
    color: #50514c;
    font-size: 22px;
    border-left: 2px #fff solid;
    display: inline-block;
    border-left: none;
    padding-left: 0;
}


.contents{
    display: table;
    width: 100%
}



.contents p {
    padding: 20px 0;
    text-align: center
}

.contents .card img, .contents .card2 img {
    background-color: transparent!important
}

.tarot0 .card, .tarot0 .card2 {
    text-align: center;
    margin: 0 6%;
    position: relative;
    display: block;
    padding: 15% 0;
    width: 88%;
    margin-top: 40px
}

.tarot0 .card img, .contents .card2 img {
    width: 130px;
    margin: 0 auto;
    position: absolute;
    top: 0;
    left: 0
}

.tarot0 .card img .tarot0 p, .contents .card2 img .tarot0 p {
    text-align: center;
    padding: 20px 0
}

.tarot0 .contents{
    width: 100%;
    margin-top: 20px;
    padding: 30px 0;
}


.rune {
    background-color: #f9ffe7;
    margin-bottom: 20px
}

.rune .stone img {
    width: 70px;
    margin: 0 auto;
    position: absolute;
    top: 280px;
    left: 45.5%;
    z-index: 1
}

.rune .stone {
    text-align: center;
    margin: 0 6%;
    position: relative;
    display: block;
    padding: 30% 0;
    width: 88%;
    margin-top: 40px
}

.rune .stone img#hukuro {
    z-index: 4;
    width: 220px;
    left: 34.5%;
    top: 150px;
}

.rune .stone img#back {
    width: 500px;
    position: absolute;
    top: -4%;
    left: 84px;
    z-index: 0;
    border: 2px #000 solid
}

p#eleText, p#eleText2{
    margin-top: 20px
}

.rune .stone img#back2 {
    width: 500px;
    position: absolute;
    top: -4%;
    left: 84px;
    z-index: 0;
    border: 2px #000 solid;
    opacity: 0
}

.rune .stone img#back3 {
    width: 500px;
    position: absolute;
    top: -4%;
    left: 84px;
    z-index: 3;
    border: 2px #000 solid;
    opacity: 0
}

#result_rune_table{
    border: 2px #cacaca solid;
    border-right: none;
}

#result_card_table{
    border: 2px #cacaca solid;
    border-right: none;
    background-color: #f00;
}

#result_rune_table table, #result_card_table table{
    margin: 0;
}

#result_rune_table tr, #result_card_table tr{
    border-bottom: 2px #cacaca solid;
}

#result_rune_table tr:last-child, #result_card_table tr:last-child{
        border-bottom: none;
}

#result_rune_table tr td, #result_rune_table tr th, #result_card_table tr td, #result_card_table tr th{
    padding: 10px 0;
    text-align: center;
}
#result_rune_table tr th, #result_card_table tr th{
    background-color: #feffea;
    border-right: 2px #cacaca solid;
    width: 20%;
 }
#result_rune_table tr td, #result_card_table tr td{
    border-right: 2px #cacaca solid;
    width: 30%;
}

.dtl_area{
    clear: both;
    width: 100%;
    position: relative;
    display: inline-block;
}

.dtl_area table{
    width: 24%!important;
    margin: 0!important;
    float: left;
}

.dtl_area table td{
    text-align: center;
}

.dtl_area p.rst_dtl{
    width: 73%;
    float: right;
}

.name_ftn{
    padding-bottom: 20px;
    display: flow-root;
}

.name_ftn form{
    margin: -25px 0 0 0;
    display: flow-root;
}


.input_area{
    float: left;
    width: 40%;
}

form.name_input_type2 .input_area{
    width: 49%;
}

form.name_input_type2 .button_area {
    float: left;
    width: 44%;
}

form.name_input_type2 .button_area, .seiza_button_area{
    clear: both;
    width: 90%!important;
    margin: 0 5%!important;
}
form#name_fortune .button_area{
    width: 60%;
    margin: 10px 0%;
    float: left;
    clear: none;
}

form.name_input_type2 .button_area{

}

.name_ftn button#send{
    width: 60%;
    background-color: transparent;
    border: none;
    border: 1px #f9bd2c solid;
    color: #f9bd2c;
}

.name_ftn form.name_input_type2 button#send{
    width: 69%;
    float: right;
}

.name_ftn button#send:hover{
    background-color: #f9bd2c;
    color: #fff;
    border: 1px #f9bd2c solid;
}


.name_ftn input[type=text]{
    margin-left: 15px;
    line-height: 25px;
    border-radius: 3px;
    border: 1px #dadbcd solid;
    padding-left: 10px;
    width: 65%;
}


.name_ftn button{
    color: #b7d45a;
    font-size: 18px;
    font-weight: bold;
    margin-top: 20px;
    width: 30%;
    padding: 26px 0px;
    border: 0;
    border-radius: 3px;
    background-color: transparent;
    border: 1px #b7d45a solid;
}

.name_ftn button:hover{
    color: #fff;
    background-color: #b7d45a;
}

p.seiza_reset{
    color: #b7d45a;
    font-weight: bold;
    width: 30%;
    padding: 26px 0px;
    border: 0;
    border-radius: 3px;
    background-color: transparent;
    border: 1px #b7d45a solid;
    display: inline-block;
}

p.seiza_reset:hover{
    color: #fff;
    background-color: #b7d45a;
}

.seiza .seiza_submit{
    width: 60%!important;
    border: 1px #f9bd2c solid!important;
    color: #f9bd2c;
    border-radius: 3px;
    padding: 26px 0px;
    margin: 10% 1%;
    font-weight: bold;
}

.seiza .seiza_submit:hover{
    background-color: #f9bd2c;
    color: #fff;
}

.horoscope, .name_ftn{
    background-color: #feffea;
    margin-bottom: 20px;
}

.seiza p, .name_ftn p, .seinengappi p{
    margin: 30px 0;
    text-align: center;
}

.seiza{
    text-align: center;
    overflow: hidden;
    position: relative;
    width: 100%;
    padding-bottom: 120px;
}

.seiza input[type="image"], .blood_type img{
    width: 20%;
    margin: 10px 1%;
}

p.back_phase{
    width: 90%;
    padding: 20px 0;
    margin: 20px 5%;
    border: 1px #b7d45a solid;
    background-color: transparent;
    color: #b7d45a;
    font-size: 18px;
    font-weight: bold;
    border-radius: 3px;
}

p.back_phase:hover{
    background-color: #b7d45a;
    color: #fff;
}


#SubmitBtn.btn_gray{
    color: #aaa;
    border: 1px #aaa solid;
}

#SubmitBtn.btn_gray:hover{
    background-color: transparent;
}


.seiza form{
    display: contents;
}

.seiza button[type="submit"]{
    width: 20%;
    margin: 10px 1%;
    background-color: transparent;
    border-style: none;
}
.seiza button[type="submit"] img{
    width: 100%;
}

.horoscope #phase1{
    position: relative;
    top: 0;
    left: 0%;
    width: 100%;
}

.horoscope #phase2{
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
}

.horoscope #phase3{
    position: absolute;
    top: 0;
    left: 100%;
    width: 100%;
    margin-top: 50px;
}

.seiza label img{
    width: 20%;
    margin: 10px 1%;
    background-color: transparent;
    border-style: none;
    border: none;
}

.seiza label[data-icon] input{
    display: none;
}

.seiza label[data-icon] img{
    position: relative;
    left: 0px;
    top: 0px;
    z-index: 100;
    display: inline-block;
    background-position: center top;
    cursor: pointer;
    filter: grayscale(80%);
}

.seiza label[data-icon] input[type=radio]:checked+img{
     -webkit-filter: hue-rotate(1000deg);
     -moz-filter: hue-rotate(1000deg);
     -o-filter: hue-rotate(1000deg);
     -ms-filter: hue-rotate(1000deg);
     filter: hue-rotate(1000deg);
     filter: saturate(150%);
}

.select_seiza{
    width: 100%;
    text-align: center;
}

.select_seiza p{
    width: 45%;
    margin: 2%;
    display: inline-block;
    position: relative;
    margin-top: 50px;
}

.select_seiza p span{
    width: 80%;
    padding: 10px 0;
    margin-bottom: 40px;
    font-family: sans-serif;
    font-size: 18px;
    font-weight: bold;
    position: relative;
    top: 0;
    right: 0%;
    display: inline-block;
    color: #fff;
    border-radius: 3px;
}

.select_seiza p span.select1{
    background-color:#e52f52;
}
.select_seiza p span.select2{
    background-color:#605ee9;
}

#phase1 p span, #phase2 p span{
    margin: 0 5px;
}

#phase1 p span.select1{
    padding: 3px 10px;
    border-radius: 3px;
    color: #fff;
    background-color:#e52f52;
}
#phase2 p span.select2{
    padding: 3px 10px;
    border-radius: 3px;
    color: #fff;
    background-color:#605ee9;
}
.select_seiza img{
    width: 60%;
}

.select_seiza span{
    font-size: 50px;
    font-family: cursive;
    position: absolute;
    top: 45%;
    color: #d7d8b9;
    right: 48%;
}

.blood_type{
    text-align: center;
    margin-bottom: 30px;
}

.blood_type input[type="radio"]{
    display: none;
}

#month{
    padding: 20px 0;
}

#day{
    padding: 20px 0;
}
.birth, .birth #month, #day{
    font-size: 0;
}

#month input[type=radio], #day input[type=radio]{
    display: none;
}


#month span{
    padding: 10px 0px;
    width: 118px;
    border: 1px #777672 solid;
    background-color: transparent;
    color: #777672;
    border-radius: 3px;
    text-align: center;
    display: inline-block;
    font-size: 15px;
    margin: 5px 0;
}

#day span{
    padding: 10px 0px;
    width: 118px;
    border: 1px #777672 solid;
    background-color: transparent;
    color: #777672;
    border-radius: 3px;
    text-align: center;
    display: inline-block;
    margin: 5px 0;
    font-size: 15px;
}

#month span:hover, #day span:hover{
    background-color: #f9bd2c;
    border: 1px #f9bd2c solid;
    color: #fff;
}

#month input:checked + span{
    background-color: #f9bd2c;
    border: 1px #f9bd2c solid;
    color: #fff;
}

.birth{
    margin-bottom: 20px;
}

.birth label{
    margin: 5px 4px;
}

.birth label:first-of-type, .birth label:nth-of-type(6n+1){
    margin-left: 0;
}

.birth label:last-of-type, .birth label:nth-of-type(6n){
    margin-right:0;
}

#birth_result_img{
    position: relative;
}

#birth_result_img .js-animation {
  opacity: 0;
  visibility: hidden;
  transform: translateY(30px);
  transition: all 1s;
}
#birth_result_img .js-animation.is-show {
  opacity: 1;
  visibility: visible;
  transform: translateY(0px);
}

#birth_result_img #back{
    border: 3px #8c7641 solid;
    box-sizing: border-box;
}

#birth_result_img img{
    width: 80%;
    margin: 0 10%;
}

#birth_result_img img.num, #birth_result_img #ele1, #birth_result_img #ele2, #birth_result_img #ele3{
    top: 10px;
    position: absolute;
}

#birth_result_table table{
    border: 2px #e4e5d9 solid;
    box-sizing: border-box;
}

#birth_result_table table th{
    width: 20%;
    border-right: 2px #e4e5d9 solid;
}

#birth_result_table table td{
    padding: 10px;
    width: auto;
}

#birth_result_table table tr:first-child{
    border-bottom: 2px #e4e5d9 solid;
}

#birth_result_table table span{
    opacity: 0;
}

.seinengappi select{
    font-size: 30px;
    padding: 5px 10px;
    border-radius: 3px;
    height: 1.8em;
    background-color: #fff;
}

.seinengappi button, .bld_ftn button{
    width: 100%;
    background-color: transparent;
    border-radius: 3px;
    font-weight: bold;
    font-size: 16px;
    color: #f9bd2c;
    border: 1px #f9bd2c solid;
    padding: 20px 0;
}

.bld_ftn label[data-icon]{
    position: relative;
    display: inline-block;
    width: 20%;
    height: 80px;
}

.bld_ftn label[data-icon] input{
    position: absolute; z-index: 0;
}

.bld_ftn label[data-icon] img{
    position: absolute; left: 0px; top: 0px; z-index: 100;
    display: block;
    width: 100%;
    height: 100%;
    background-position: center top;
    background-color: #fee;
    cursor: pointer;
}

.bld_ftn label[ data-icon ] input[type=radio]:checked+img{
     -webkit-filter: hue-rotate(300deg);
     -moz-filter: hue-rotate(300deg);
     -o-filter: hue-rotate(300deg);
     -ms-filter: hue-rotate(300deg);
     filter: hue-rotate(300deg);
}

.seinengappi button:hover,  .bld_ftn button:hover{
    color: #fff;
    background-color: #f9bd2c;
}

.adjustment p{
    width: 99%;
    background-color: transparent;
    border-radius: 3px;
    font-weight: bold;
    font-size: 16px;
    color: #aaa;
    border: 1px #aaa solid;
    padding: 20px 0;
    text-align: center;
    margin-top: 20px;
}

.result{
    margin-bottom: 20px;
}

.result .kanji_word:first-of-type{
    margin-left: 0;
}

.result .kanji_word:last-of-type{
    margin-right: 0;
}

#kanji_name{
    text-align: center;
    display: block;
    width: 100%;
    position: relative;
}

.kanji_word{
    border: 2px #aaa solid;
    border-radius: 3px;
    text-align: center;
    display: inline-block;
    margin: 20px 5px;
}

.kanji_word img{
    width: 60%;
    padding: 10px 20px;
}

.kanji_word p{
    width: 100%;
    text-align: center;
    padding: 10px 0;
    background-color: #feffea;
    color: #3c3831;
}

p.kakusu{
    text-align: center;
    background-color: #feffea;
    padding: 20px 0;
    border: 2px #e0e2bb solid;
    font-size: 16px;
    font-weight: bold;
    color: #262623;
}

p.kanji_img{
    background-color: #ffffff;
    font-size: 355%;
    font-family: "ＭＳ 明朝";
    padding: 15px 0 17px 0;
    font-weight: bold;
}

.result table#name_fortune{
    border: 1px #999 solid;
    border-radius: 3px;
    text-align: center;
}

.result table#name_fortune th, .result table#name_fortune td{
    width: 15%;
}

.result table#name_fortune th{
    background-color: #b7d45a;
    color: #fff;
}


.result table#name_fortune tr{
    border-bottom: 1px #999 solid;
}

.result table#name_fortune tr.back_gray{
    background-color: #aaa!important;
}

.result table#name_fortune tr.back_gray td.tit{
    background-color: #abac9d!important;
}

.result table#name_fortune tr.back_gray td span{
    color: #666!important;
}

.result table#name_fortune tr:last-child{
    border-bottom: none;
}

.result table#name_fortune td.tit{
    font-weight: bold;
    background-color: #feffea;
}

p#name_ftn_notice{
    text-align: center;
    padding: 10px 0;
    width: 100%;
    color: #f00;
    border: 1px #f00 solid;
    border-radius: 3px;
}

table#rokusei{
    border: 1px #aaa solid;
    border-collapse: collapse;
}

table#rokusei td{
    padding: 10px;

}
table#rokusei td.w30p{
    width: 12%;
    background-color: #fff9c0;
    text-align: center;
    border-right: 1px #aaa solid;
}


.name_ftn form.name_input_type2{
    margin: 20px 0!important;
}


#mei_name, #sei_name{
    display: inline-block;
}

#mei_name{
    margin-left: 10px;
}

.result table#name_fortune td.detail{
    text-align: left;
}

.result table#name_fortune td.detail, .result table#name_fortune th.detail{
    width: 55%!important;
}

.result table#name_fortune td span{
    font-weight: bold;
}

.result table#name_fortune td span.red{
    color: #e92222;
}

.result table#name_fortune td span.pin{
    color: #ff3ae3;
}

.result table#name_fortune td span.ore{
    color: #ff9219;
}

.result table#name_fortune td span.gre{
    color: #9bc023;
}

.result table#name_fortune td span.cia{
    color: #00b2df;
}

.result table#name_fortune td span.blu{
    color: #5c30d7;
}

.kanji_word.back_gray{
    background-color: #aaa!important;
}

.kanji_word.back_gray p.kanji_img{
    background-color: #aaa!important;
}

.kanji_word.back_gray p{
    background-color: #d2d3c2!important;
}

.display_switch{
    width: 100%;
    margin-bottom: 20px;
}

.display_switch p{
    width: 49%;
    padding: 20px 0;
    text-align: center;
    border: 1px #d1970b solid;
    border-radius: 3px;
    background-color: transparent;
    color: #d1970b;
    font-weight: bold;
    display: inline-block;
    clear: both;
}

.display_switch p.open{
    border: 1px #f9bd2c solid;
    background-color: #f9bd2c;
    color: #fff;
}

#name_result_type2{
    width: 100%;
    padding: 20px 0;
    margin: 20px 0;
    border: 2px #aaa solid;
    border-radius: 3px;
    background-color: #feffea;
}

#name_result_type2 p{
    width: 49%;
    text-align: center;
    display: inline-block;
    font-size: 18px;
    font-weight: bold;
}

#name_result_type2 p#row2{
    float: right;
    position: relative;
}

#name_result_type2 p#row2:before{
    content: "X";
    left: 0;
    position: absolute;
    color: #aaa;
}

#name_result_type2 span{
    font-size: 20px;
}

#name_result_type2 span.red{
    color: #e92222;
}

#name_result_type2 span.pin{
    color: #ff3ae3;
}

#name_result_type2 span.ore{
    color: #ff9219;
}

#name_result_type2 span.gre{
    color: #9bc023;
}

#name_result_type2 span.cia{
    color: #00b2df;
}

#name_result_type2 span.blu{
    color: #5c30d7;
}

.display_switch p#switch2{
    float: right;
}

.name_contents1, .name_contents2, .birth_contents1, .birth_contents2{
    display: none;
}

.name_contents1.open, .birth_contents1.open{
    display: inline-block;
    width: 100%;
}

.name_contents2.open, .birth_contents2.open{
    display: inline-block;
    width: 100%;
}

#today_fortune_result{
    margin: 0 20px;
    display: inherit;
}

#today_fortune_result p.result_tit {
    border: none;
    background-image: url(../img/tarot_result_tit_bar1.png), url(../img/tarot_result_tit_bar2.png);
    background-repeat: no-repeat, no-repeat;
    background-position: top, bottom;
    background-size: 100%, 100%;
    font-weight: bold;
    font-size: 25px;
    margin: 20px 0;
    padding: 50px 5px;
    text-align: center;
}

#today_fortune_result img{
    float: left;
    width: 28%;
}

#today_fortune_result .txt_area{
    margin-left: 3%;
    width: 69%;
    float: left;
}

 .ftn_notice p.red{
    display: inline-block;
    text-align: center;
    font-size: 13px;
    width: 90%;
    padding: 10px 0;
    color: #E0595C;
    border: 1px #E0595C solid;
    border-radius: 3px;
    margin-bottom: 24px;
    margin: 0 5%;
 }

#today_fortune_result .txt_area p.notice{
    text-align: center;
    font-size: 13px;
    width: 100%;
    padding: 10px 0;
    color: #E0595C;
    border: 1px #E0595C solid;
    border-radius: 3px;
    margin-bottom: 24px;
}


#today_fortune_result p.detail{
    text-align: left;
    float: left;
    padding: 10px 0;
}

.omikuji{
    width: 100%;
    position: relative;
    height: 700px;
    background-color: #feffea;
    margin-bottom: 30px;
}

.omikuji form{
    display: inline-block;
}
.omikuji button{
    position: absolute;
    width: 80%;
    margin: 0 10%;
    bottom: 20px;
    padding: 20px 0;
    background-color: transparent;
    outline: 2px #b7d45a solid;
    border: none;
    font-weight: bold;
}

.omikuji button:hover{
    background-color: #b7d45a;
    color: #fff;
}

.kuji img{
    position: absolute;
    width: 80%;
    margin: 30px 10%;
    outline: 2px #000 solid;
    display: inline-block;
}

.kuji img.kuji_main{
    outline: none;
    width: 12%;
    transform: rotate( 11deg );
    margin: 24% 43% 0 45%;
}

.kuji img.kuji_num.kuji_main{
    width: 4%!important;
    margin:31.5% 30% 23% 70%;
    transform: rotate( 11deg );
    visibility: hidden;
}

#kuji_tutu2{
    visibility: hidden;
}

#result_kuji{
    height: 20%;
    margin: 25% 10%;
    width: 0%;
    background-color: #101020;
    opacity: 0.5;
    position: absolute;
    z-index: 4;
    text-align: center;
    font-size: 50px;
    color: #fff;
}

.res_kuji{
    width: 300px;
    margin: 30px auto;
    outline: 2px #eaeaea solid;
    height: 1510px;
    position: relative;
}

.front_kuji{
    outline: 2px #b7d45a solid;
    position: absolute;
    top: 0;
    width: 94%;
    margin: 10px 3%;
}

.front_kuji img{
    width: 100%;
}

.result_omikuji{
    outline: 2px #b7d45a solid;
    width: 94%;
    position: relative;
    top: 105px;
    margin: 5px 3%;
    height: 1395px;
}

p.kuji_number{
    font-family: "HG行書体","HGP行書体","STKaiti", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
    width: 100%;
    position: relative;
    border-bottom: 2px #b7d45a solid;
    padding: 10px 0;
    font-size: 30px;
    text-align: center;
}

p.main_kuji{
    font-family: "HG行書体","HGP行書体","STKaiti", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
      writing-mode: vertical-rl;
    padding: 20px 3%;
    position: relative;
    width: 94.5%;
    line-height: 43px;
    border-bottom: 2px #b7d45a solid;
    font-size: 20px;
}

.unsei{
    width: 100%;
    position: relative;
    border-bottom: 2px #b7d45a solid;
}
.unsei span{
    font-family: "HG行書体","HGP行書体","STKaiti", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
    width: 48%;
    border-left: 2px #b7d45a solid;
    font-size: 30px;
    padding: 10px 0;
    display: inline-block;
    text-align: center;
}

.unsei span:first-child {
    border-left: none;
}

.main_means{
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    width: 84.5%;
    position: relative;
    padding: 8%;
    border-bottom: 2px #b7d45a solid;
    height: 300px;
    left: 0;
    line-height: 27px;
}
.detail_kuji1{
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    position: relative;
    width: 84.5%;
    padding: 8%;
    padding-top: 15px;
    border-bottom: 2px #b7d45a solid;
    height: 260px;
    line-height: 27px;
}

.detail_kuji1 dl, .detail_kuji2 dl{
    position: relative;
    height: 220px;
}
.detail_kuji1 dt, .detail_kuji2 dt{
    float: left;
    position: absolute;
    font-weight: bold;
}

.detail_kuji1 dd, .detail_kuji2 dd{
    display: table;
    top: 50px;
    position: relative;
    margin-left: 10px;
}

 .detail_kuji2 dd{
    margin-left: 5px !important;
    }

.detail_kuji2{
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    position: relative;
    width: 84.5%;
    padding: 8%;
    padding-top: 15px;
    line-height: 27px;
}

p.result{
    color: #999;
}

.main-contents .main_img{
    margin-bottom: 20px;
}

.main-contents .main_img img{
    width: 100%;
}


.uranai,
.tarot0,
.new-uranai,
.pop-uranai,
.recommend,
.bld_ftn {
    margin-bottom: 50px
}

.new-uranai .item,
.pop-uranai .item,
.recommend .item {
    display: inline-block;
    border-bottom: 1px #e4e5d9 solid;
    padding: 10px 0 20px 0
}

.new-uranai .item .thum,
.pop-uranai .item .thum,
.recommend .item .thum,
.ath-list .thum {
    width: 150px;
    overflow: hidden;
    border-radius: 3px;
    float: left
}

.new-uranai .item img,
.pop-uranai .item img,
.recommend .item img,
.ath-list .thum img {
    width: 100%;
    transition: .3s;
    display: block;
    transition-duration: .3s
}

.new-uranai .item img:hover,
.pop-uranai .item img:hover,
.recommend .item img:hover,
/*
.ath-list .thum img:hover*/
{
    transform: scale(1.1);
    transition-duration: .3s
}

.new-uranai h2,
.ath h2,
#contact h2 {
    clear: both;
    margin-bottom: 10px
}

.pop_uranai h2,
.recommend h2 {
    clear: both;
    margin-bottom: 0;
}

.new-uranai .item img,
.new-uranai .item .txt,
.pop-uranai .item img,
.pop-uranai .item .txt,
.recommend .item img,
.recommend .item .txt,
.ath-list .txt {
    float: left
}

.new-uranai .item .txt,
.pop-uranai .item .txt,
.recommend .item .txt,
.ath-list .txt {
    width: 600px;
    margin-left: 10px;
    position: relative;
    height: 150px
}

.new-uranai .item .txt p,
.pop-uranai .item .txt p,
.recommend .item .txt p {
    font-style: 18px;
    line-height: 17px;
    font-family: Meirio;
    margin-top: 5px;
    visibility: hidden
}

.new-uranai .item .tags,
.new-uranai .item .author,
.pop-uranai .item .tags,
.pop-uranai .item .author,
.recommend .item .author,
.recommend .item .tags {
    position: absolute
}

.new-uranai .item .tags,
.pop-uranai .item .tags,
.recommend .item .tags {
    left: 0;
    bottom: 0
}

.new-uranai .item .author,
.pop-uranai .item .author,
.recommend .item .author {
    right: 0;
    bottom: 0
}

.new-uranai .item .tags,
.pop-uranai .item .tags,
.recommend .item .tags {
    display: inline-block
}

.new-uranai .item .tags span,
.pop-uranai .item .tags span,
.recommend .item .tags span,
.article_tags span {
    padding: 1px 12px;
    border-radius: 3px;
    font-size: 12px;
    background-color: #fff;
    border: 1px solid #f9bd2c;
    color: #f9bd2c
}

.new-uranai .item .tags a,
.pop-uranai .item .tags a,
.recommend .item .tags a {
    margin-right: 10px
}

.new-uranai .item .tags span:hover,
.pop-uranai .item .tags span:hover,
.recommend .item .tags span:hover,
.article_tags span:hover {
    background-color: #f9bd2c;
    color: #fff;
    border: 1px solid #fff
}

.article_tags {
    display: block;
    margin: 10px 0;
    text-align: right
}

.new-uranai h3 span,
.pop-uranai h3 span,
.recommend h3 span,
.uranai h3 span.new{
    margin-right: 10px;
    color: #fff;
    background-color: #df5a5b;
    padding: 0 10px;
    font-size: 13px;
    font-family: Meirio;
    position: relative;
    top: -2px
}

.new-uranai .item a:hover,
.pop-uranai .item a:hover,
.recommend .item a:hover {
    color: #b7d45a
}

.new-uranai .new-list,
.pop-uranai .new-list,
.recommend .new-list {
    width: 49%;
    margin-right: 2%
}

.new-uranai .new-list:nth-child(even),
.pop-uranai .new-list:nth-child(even),
.recommend .new-list:nth-child(even) {
    margin-right: 0
}

.new-uranai .new-list .thum,
.pop-uranai .new-list .thum,
.recommend .new-list .thum {
    width: 30%
}

.new-uranai .new-list .txt,
.pop-uranai .new-list .txt,
.recommend .new-list .txt {
    height: auto;
    width: 65%
}

.new-uranai .new-list .tags,
.new-uranai .new-list .author,
.pop-uranai .new-list .tags,
.pop-uranai .new-list .author,
.recommend .new-list .tags,
.recommend .new-list .author {
    position: relative;
    margin: 10px 0 0 0;
    font-size: 12px
}

.new-list {
    float: left
}

.new-list .item {
    padding: 10px 0;
    height: 120px
}

.new-uranai .new-list .txt h3,
.pop-uranai .new-list .txt h3,
.recommend .new-list .txt h3 {
    font-size: 15px;
    height: 48px
}

.new-list .tags span {
    font-size: 13px
}

.new-uranai a.more,
.pop-uranai a.more,
.recommend a.more,
.back_page a,
#today_fortune_result a,
.page404 a{
    clear: both;
    display: inline-block;
    width: 100%;
    text-align: center;
    padding: 20px 0 20px 0;
    margin: 10px 0;
    border: 1px #b7d45a solid;
    border-radius: 3px;
    font-weight: bold
}

.back_page a{
    margin: 0px 0px 20px 0;
}


.new-uranai a.more:hover,
.pop-uranai a.more:hover,
.recommend a.more:hover,
.back_page a:hover,
#today_fortune_result a:hover,
.page404 a:hover{
    background-color: #b7d45a;
    color: #fff
}



.ath-list {
    clear: both;
    display: table;
    padding: 10px 0 20px 0;
    border-bottom: 1px #e4e5d9 solid
}

.bgn {
    margin-bottom: 30px
}

.bgn .des {
    border: 1px #b7d45a solid;
    border-radius: 3px;
    margin: 10px 0
}

.bgn .des h3 {
    font-size: 18px;
    border-bottom: 1px #e4e5d9 dotted;
    padding: 10px;
    margin: 10px
}

.bgn .des h3:before {
    font-family: "Font Awesome 5 Free";
    content: "\f05a";
    color: #b7d45a;
    margin-right: 10px
}

.bgn .det {
    clear: both;
    margin: 20px 0
}

.bgn .des .thum {
    margin: 0 1% 0 2%;
    width: 47%;
    border-radius: 3px;
    float: left
}

.bgn .des .thum img {
    width: 100%;
    border-radius: 3px
}

.bgn .des .txt {
    font-size: 13px;
    display: inline-block;
    margin: 0 2% 0 1%;
    background-color: #f2f2f2;
    border-radius: 3px;
    width: 45%;
    padding: 1%
}

.main-contents .intro {
    margin-bottom: 20px;
    display: inline-block;
    clear: both
}

.main-contents .main_thum {
    width: 48%;
    margin-right: 2%;
    float: left
}
.intro_1column{
    width: 100%;
    display: inline-block;
}

.intro_1column .main_thum{
    width: 100%;
    margin: 20px 0;
}

.main-contents .main_thum img {
    width: 100%
}

.main-contents p.dpn {
    float: left;
    width: 50%
}

.intro_1column p.dpn{
    width: 100%;
    margin-bottom: 20px;
}

#side_nav {
    width: 300px;
    float: left
}

#side_nav .con {
    margin-bottom: 20px;
    border: 1px #b7d45a solid
}

#side_nav h2 {
    background-color: #b7d45a;
    padding: 15px 0 15px 15px;
    background-image: url(../img/leaf.png);
    background-size: 220px;
    background-repeat: no-repeat;
    background-position-x: 160px;
    background-position-y: -50px
}

#side_nav h2 span {
    font-family: "Meirio";
    color: #fff;
    font-size: 18px;
    border-left: 2px #fff solid;
    padding-left: 15px
}

#side_nav ul {
    list-style: none
}

#side_nav .con li a {
    padding: 15px 0;
    border-bottom: 1px #a6a7a0 dotted;
    background-color: #feffea;
    padding-left: 10px;
    display: inherit;
    text-decoration: none
}

#side_nav .con li a:hover {
    background-color: #f9bd2c;
    color: #fff
}

#side_nav li a:before {
    font-family: "Font Awesome 5 Free";
    content: "\f138";
    color: #b7d45a;
    margin-right: 10px
}

#side_nav li a:hover:before {
    color: #fff
}

#side_nav .con li:last-child a {
    border-bottom: 0
}

.child {
    display: none;
}

.menu:after {
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -14px;
    content: '>';
    font-size: 14px;
    font-weight: bold;
    -moz-transform: rotate(90deg);
    -ms-transform: rotate(90deg);
    -webkit-transform: rotate(90deg);
    transform: rotate(90deg);
    -moz-transition: all, 0.25s, linear;
    -o-transition: all, 0.25s, linear;
    -webkit-transition: all, 0.25s, linear;
    transition: all, 0.25s, linear;
}
 
.menu.active:after {
    -moz-transform: translate(0, 50%);
    -ms-transform: translate(0, 50%);
    -webkit-transform: translate(0, 50%);
    transform: translate(0, 50%);
    -moz-transform: rotate(-90deg);
    -ms-transform: rotate(-90deg);
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

p.result_tit {
    border-top: 3px #777672 solid;
    border-bottom: 3px #777672 solid;    font-weight: bold;
    font-size: 25px;
    margin: 20px 0;
    padding: 20px 5px;
    text-align: center;
}



.result_img {
    margin: 0 auto;
    text-align: center;
    margin-bottom: 30px;
    background-color: #fefff3;
    padding: 20px 0;
    border-radius: 3px;
    background-image: url(../img/footer_leaf1.png), url(../img/footer_leaf2.png);
    background-repeat: no-repeat, no-repeat;
    background-position: right bottom, left bottom;
    background-size: 30%, 30%
}

.result_img.seiza_2{
    position: relative;
    width: 100%;
}

.result_img.seiza_2 img{
    width: 30%!important;
    margin: 5%;
}

.result_img.seiza_2 span{
    font-size: 50px;
    font-family: cursive;
    position: absolute;
    top: 45%;
    color: #d7d8b9;
    right: 48%;
}

p.rst_sml_tit, p.com_sml_tit{
    border-bottom: 1px #a6a7a0 solid;
    margin-top: 20px;
    padding: 0;
    text-align: left;
}

p.rst_sml_tit span, p.com_sml_tit span {
    font-size: 18px;
    font-weight: bold
}

.result table{
    width: 100%;
    margin: 30px 0;
    border-collapse: collapse;
}

.result table th{
    text-align: center;
    padding: 10px 0;
    background-color: #feffea;
}


.result table td{
    width: 50%;
    padding: 10px;
    padding-bottom: 0;
    padding-left: 0;
    position: relative;
}

.result table td ul{
    margin-left: 30px;
    padding: 10px 0px;
}


p.rst_sml_tit span:before, p.com_sml_tit span:before {
    font-family: "Font Awesome 5 Free";
    content: "\f05a";
    color: #b7d45a;
    margin-right: 10px
}

p.rst_dtl {
    padding: 10px;
    margin: 10px 0;
    background-color: #f2f2f2;
    border-radius: 3px
}

p.commentary{
    padding: 10px;
    margin: 10px 0;
    border-radius: 3px
}

p.commentary span{
    font-weight: bold;
    background-color: #FEFFEA;
    padding: 2px 0;
}

p.commentary span.red{
    color: #ef0000;
}

.notice_box{
    padding: 10px;
    margin: 10px 0;
    background-color: #ffffcc;
    border: 2px #eee solid;
}
.notice_box span.red{
    color: #f00;
    font-weight: bold;
}

 .mokuji{
    margin: 50px 0 30px;
}

.mokuji a{
    margin-left: 0.5em;
}

.mokuji a:hover{
    color: #F9BD2C;
}

.mokuji ul {
  border: solid 2px #F9BD2C;
  border-radius: 0px 5px 5px 5px;
  padding: 0.5em 1em 0.5em 2.3em;
  position: relative;
  margin: 0!important;
}

.mokuji ul li {
  line-height: 1.5;
  padding: 0.5em 0;
  list-style-type: none!important;
}

.mokuji ul li.ml5{
    margin-left: 5px;
}


.mokuji ul li.ml5:before{
  font-family: "Font Awesome 5 Free";
  content: "\f0da";/*アイコンの種類*/
  position: absolute;
  left : 2em;/*左端からのアイコンまでの距離*/
  color: #F9BD2C;/*アイコン色*/
}


.mokuji ul li:before {/*疑似要素*/
  font-family: "Font Awesome 5 Free";
  content: "\f138";/*アイコンの種類*/
  position: absolute;
  left : 1em;/*左端からのアイコンまでの距離*/
  color: #F9BD2C;/*アイコン色*/
}

.mokuji ul li:after {/*タイトルタブ*/
    background: #F9BD2C;
    color: #fff;
    font-weight: bold;
    position: absolute;
    left: -2px;
    bottom: 100%;
    padding:5px 30px;
    content: "目次";/*タブの文字*/
    letter-spacing: 0.3em;/*字間*/
    border-radius: 5px 5px 0 0;
  }


  table.list_deco_none ul li{
    list-style: none;
  }


#contact form input[type=text] {
    padding: 1%;
    width: 98%;
    border-radius: 3px;
    border: 1px #d5d5d5 solid
}

#contact form textarea {
    width: 98%;
    max-width: 98%;
    height: 200px;
    border-radius: 3px;
    margin-bottom: 20px;
    border: 1px #d5d5d5 solid;
    padding: 1%
}

#contact h3 {
    width: 100%;
    padding: 10px 0 5px 0
}

#contact h3:before {
    font-family: "Font Awesome 5 Free";
    content: "\f05a";
    color: #b7d45a;
    margin-right: 10px
}

#contact button,
#contact a {
    width: 100%;
    border-radius: 3px;
    border: 1px #b7d45a solid;
    background-color: #fff;
    color: #b7d45a;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    padding: 20px 0
}

#contact button:hover,
#contact a:hover {
    color: #fff;
    background-color: #b7d45a
}

#contact p {
    margin-bottom: 20px
}

.check {
    border: 1px #d5d5d5 solid;
    border-radius: 3px;
    padding: 15px 20px;
    margin: 20px 0
}

.check p {
    margin-bottom: 10px;
    padding: 10px;
    background-color: #f2f2f2;
    border-radius: 3px
}

.check_button {
    width: 100%;
    display: inline-block;
    text-align: center
}

.check_button button,
.check_button a {
    width: 30%!important;
    border-radius: 3px;
    border: 1px #b7d45a solid;
    background-color: #fff;
    color: #b7d45a;
    font-weight: bold;
    font-size: 15px;
    text-align: center;
    padding: 20px 10px;
    margin: 0 20px
}

.check_button a,
#contact a {
    display: inherit;
    padding: 20px 0
}

#check_button button[type=submit]:hover,
#check_button a:hover {
    color: #fff;
    background-color: #b7d45a;
}


.animal_category{
    margin: 10px 0;
}

.animal_category a:hover{
    opacity: 0.5;
}


.animal_category img{
    width: 49%;
    margin-left: 1%;
    margin-top: 10px;
}

.animal_category img:nth-child(odd){
    margin-left: 0;
}

.category_main_img img{
    width: 100%;
}

.animal_num_table{
    margin: 20px 0px;
}

.animal_num_table,.animal_num_table img{
    width: 100%;
}

.yume_form{
    clear: both;
    display: flow-root;
}

.yume_form form{
    margin-bottom: 20px;
}

.yume_form input[type="text"]{
    width: 80%;
    padding: 10px 0 8px 10px;
    border-radius: 3px;
    border: 1px #A6A7A0 solid;
}

.yume_form button{
    width: 16%;
    text-align: center;
    padding: 6px 0 7px 0;
    border: 1px #F9BD2C solid;
    border-radius: 3px;
    font-weight: bold;
    background-color: transparent;
    float: right;
}

.yume_form button:hover{
    background-color: #F9BD2C;
    color: #fff;
}


.category_select{
    clear: both;
    display: flow-root;
    margin-bottom: 20px;
}

.category_select a{
    width: 49%;
    float: left;
    padding: 20px 0;
    margin-bottom: 5px;
    border: 1px #b7d45a solid;
    background-color: #FEFFEA;
    font-weight: bold;
    text-align: center;
    border-radius: 3px;
}
.category_select a:last-of-type{
    float: right;
}

.category_select a:hover{
    background-color: #b7d45a;
    color: #fff;
}
ul.search_result_list{
    margin: 30px 0 30px 30px;
    list-style: none;
}

ul.search_result_list li{
    margin: 5px 0;
}

ul.search_result_list li:before{
    font-family: "Font Awesome 5 Free";
    content: "\f0da";
    color: #b7d45a;
    margin-right: 10px;
}

.large_table{
    width: 100%;
    margin-bottom: 20px;
}

.large_table tr:nth-child(even){
    background-color: #f5ffd4;
}

.large_table td{
    padding: 5px 0 5px 5px;
}

.large_table td.num{
    width: 6%;
    text-align: center;
    padding: 0;
}

.dreem_list h3{
    border: 1px #B7D45A solid;
    border-radius: 3px;
    background-color: #FEFFEA;
    padding: 10px 0 10px 10px;
    margin: 10px 0;
    position: relative;
}

.dreem_list p span.r{
    font-weight: bold;
    color: #fb2f2f;
}

.dreem_list p span.b{
    font-weight: bold;
}



.dreem_list h3 span:after{
    font-family: "Font Awesome 5 Free";
    content: "\f139";
    color: #b7d45a;
    margin-right: 10px;
    position: absolute;
    right: 0;
    font-size: 22px;
}

.dreem_list h3.open span:after{
    font-family: "Font Awesome 5 Free";
    content: "\f13a";
    color: #b7d45a;
    margin-right: 10px;
    position: absolute;
    right: 0;
    font-size: 22px;
}


.dreem_list p{
    padding: 10px;
    margin: 10px 0;
    background-color: #f7f7f7;
}

.dreem_category_list{
    width: 49%;
    float: left;
}


.dreem_category_list button{
    border: 0px;
    border-radius: 3px;
    background-color: #fff;
    padding: 5px 10px 5px 40px;
    margin: 5px 0;
    position: relative;
    font-weight: bold;
    text-align: left;

}

form.category_list{
    clear: both;
    display: inline-block;
    width: 100%;
    margin-bottom: 30px;
}

.dreem_category_list button span:before{
    font-family: "Font Awesome 5 Free";
    content: "\f07b";
    color: #b7d45a;
    margin-right: 10px;
    position: absolute;
    left: 10px;
    font-size: 22px;
    top: 3px;
}


p.no_result{
    padding: 15px 20px;
    border: 1px #a6a7a0 solid;
    border-radius: 3px;
    background-color: #FEFFEA;
    color: #fb2f2f;
    font-weight: bold;
    margin: 10px 0 40px 0;
}

.count{
    text-align: right;
    font-size: 14px;
    color: #2e2e2c;
}

.count span{
    font-family: sans-serif;
    font-size: 20px;
    letter-spacing: 3px;
}
.dreem_fortune_list{
    margin-bottom: 30px;
}



#page-top {
    position: fixed;
    bottom: 20px;
    right: 20px;
    font-size: 77%
}

#page-top a {
    background: #b7d45a;
    text-decoration: none;
    color: #fff;
    width: 100px;
    padding: 30px 0;
    text-align: center;
    display: block;
    border-radius: 5px
}

#page-top a:hover {
    text-decoration: none;
    background: #99b01a
}

#footer {
    clear: both;
    width: 100%;
    padding: 40px 0;
    background-color: #fefff3;
    display: table;
    background-image: url(../img/footer_leaf1.png), url(../img/footer_leaf2.png);
    background-repeat: no-repeat, no-repeat;
    background-position: right bottom, left bottom;
    background-size: 20%, 20%
}

#footer .content {
    width: 1080px;
    margin: 0 auto
}

#footer .content .list {
    float: left;
    width: 23.5%;
    margin-right: 2%
}

#footer .content .list:last-child {
    margin-right: 0
}

#footer .content h3 {
    border-bottom: 1px #e0e1cf solid
}

#footer .content .list ul, #sitemap ul{
    list-style: none;
    margin: 10px 0 0 20px
}

#footer .content .list ul li, #sitemap ul li {
    margin: 5px 0
}

#footer .content .list ul li a:hover, #sitemap ul li a:hover{
    color: #b7d45a
}

#footer .content .list ul li:before, #sitemap ul li:before{
    font-family: "Font Awesome 5 Free";
    content: "\f0da";
    color: #b7d45a;
    margin-right: 10px
}

#copyright {
    clear: both;
    width: 100%;
    background-color: #b7d45a;
    color: #fff;
    font-size: 13px;
    display: inline-block;
    text-align: center;
    padding: 20px 0
}

.page404{
    text-align: center;
}

.page404 p{
    margin: 30px 0;
}

p#day_upd{
    margin: 0 0 10px 0;
    text-align: right;
    color: #ff3131;
    font-size:13px;
}

#test a{
    position: fixed;
    left: 10px;
    top: 10px;
    background-color: #FF0099;
    font-weight: bold;
    color: #fff;
    text-decoration: none;
    font-size: 15px;
    padding: 10px 20px;
    text-align: center;
    border-radius: 3px;
    z-index: 10000000;
}

/*ページング設定*/

p.page_area{
    text-align: center;
    width: 100%;
    margin-bottom: 80px;
}

p.page_area a{
    padding: 5px 10px;
    background-color: #b7d45a;
    color: #fefff3;
    font-weight: bold;
    border-radius: 3px;
    border: 1px #a2bb52 solid;
}

p.page_area span.now_page{
    padding: 5px 10px;
    background-color: #fefff3;
    color: #b7d45a;
    font-weight: bold;
    border-radius: 3px;
    border: 1px #b7d45a solid;
}

p#search_sum{
    text-align: right;
    margin: 10px 0;
    padding-bottom: 10px;
    border-bottom: 1px #e4e5d9 solid;
}

.sns_link_area{
    width: 100%;
    margin: 10px 0 20px 0;
    border-radius: 3px;
    box-sizing: border-box;
    display: inline-block;
    position: relative;
}

.sns_link_area #sns_post{
    width: 25%;
    border-radius: 3px;
    margin: 0 10px 0 0;
    display: inline-block;
    background-color: #fff;
    border: 2px #eee solid;
    float: left;
}

 #sns_post p{
    font-size: 11px;
    padding: 5px 0;
    margin: 0 2px;
 }

.sns_link_area #sns_post img{
    border-radius: 3px 3px 0 0;
}

.sns_link_area .link{
    margin: 0 1px 5px 0;
    display: inline-block;
}

.sns_link_area #sns_post img, #sns_post p{
    width: 100%;
}

.sns_link_area a.link_animal_top{
    position: absolute;
    right: 0;
    bottom: 0;
    padding: 1px 12px;
    border-radius: 3px;
    font-size: 12px;
    border: 1px solid #f9bd2c;
    color: #f9bd2c;
}

.sns_link_area a.link_animal_top:hover{
    color: #fff;
    background-color: #f9bd2c;
}

#lucky_item_img{
    width: 80%;
    margin: 0 10%;
}

#lucky_item_img img{
    width: 100%;
    border: 2px #aaa solid;
    box-sizing: border-box;
}

#horoscope_result_img{
    position: relative;
    width: 100%;
    display: inline-block;
}

#horoscope_result_img p#blk_notice{
    width: 70%;
    margin: 0px 15%;
    color: #fff;
    position: absolute;
    z-index: 5;
    background: rgba(0, 0, 0, 0.5);
    opacity: 1;
    text-align: center;
    padding: 10px 0;
    bottom: 20px;
}

#horoscope_result_img #back_img img{
    border: 2px #555 solid;
    box-sizing: border-box;
}

#horoscope_result_img #back_img_animate{
    opacity: 0;
    z-index: 2;
    width: 100%;
    display: inline-block;
    position: relative;
}

 #horoscope_result_img .back_img_light{
    opacity: 0;
    z-index: 1;
    width: 100%;
    display: inline-block;
    position: absolute;
    top: 0;
 }

#horoscope_result_img img{
    width: 70%;
    margin: 20px 15%;
}

#sun img, #moon img, #venus img, #horoscope_result_img #back_img img{
    position: absolute;
    top: 0;
}

#sun img{
    transform: rotate(0deg);
    transition: transform 10s;
    z-index: 3;
}

#moon img{
    transform: rotate(0deg);
    transition: transform 12s;
    z-index: 3;
}

#venus img{
    transform: rotate(0deg);
    transition: transform 12s;
    z-index: 3;
}

#horoscope_rst_tbl td#sun_sign, #horoscope_rst_tbl td#moon_sign, #horoscope_rst_tbl td#venus_sign{
    opacity: 0;
}

#horoscope_rst_tbl{
    border: 2px #ccc solid;
    box-sizing: border-box;
    border-collapse: collapse;
}

#horoscope_rst_tbl tr td.w15p{
    width: 15%!important;
    text-align: center;
}
table#horoscope_rst_tbl tr td{
    padding: 10px!important;
}

td.sun{
    background-color: #ffdd94;
}
td.moon{
    background-color: #a7e3ff;
}
td.venus{
    background-color: #feff9b;
}


.res_kuji2{
    width: 300px;
    margin: 30px auto;
    border: 2px #eaeaea solid;
    position: relative;
    height: auto;
    padding: 0px;
}

.res_kuji2 .front_kuji2{
    border: 2px #b7d45a solid;
    position: relative;
    width: 96%;
    margin: 10px auto;
    box-sizing: border-box;
}

.res_kuji2 .front_kuji2 img{
    width: 100%;
}

.res_kuji2 table{
    width: 96%;
    margin: 10px auto;
    border-collapse: collapse;
    position: relative;
    /* top: 110px; */
    border: 2px #b7d45a solid;
    /* padding: 20px 0; */
    box-sizing: border-box;
}

.res_kuji2 table tr td.num{
    font-family: "HG行書体","HGP行書体","STKaiti", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
    font-size: 30px;
    text-align: center;
}

.res_kuji2 table tr td{
    width: auto;
    text-align: center;
    border-bottom: 2px #b7d45a solid;
    padding: 10px;
}

.res_kuji2 table tr td p{
    text-align: left;
    font-size: 20px;
    padding: 0px 10px;
    margin: 20px auto;
}

.res_kuji2 table tr td.unsei_tit{
    border-right: 2px #b7d45a solid;
}

.res_kuji2 table tr td span{
    font-family: "HG行書体","HGP行書体","STKaiti", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
    font-size: 25px;
}

.res_kuji2 table tr td.effect{
    font-family: "HG行書体","HGP行書体","STKaiti", "ヒラギノ明朝 Pro W3", "Hiragino Mincho Pro", serif;
}

.res_kuji2 .dtl_kuji1{
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    position: relative;
    padding-top: 15px;
    border-bottom: 2px #b7d45a solid;
    line-height: 27px;
}

.res_kuji2 .dtl_kuji1 dl, .res_kuji2 .dtl_kuji2 dl{
    position: relative;
}
.res_kuji2 .dtl_kuji1 dt, .res_kuji2 .dtl_kuji2 dt{
    float: left;
    font-weight: bold;
}

.res_kuji2 .dtl_kuji1 dd, .res_kuji2 .dtl_kuji2 dd{
    margin-left: 10px;
}

 .res_kuji2 .dtl_kuji2 dd{
    margin-left: 5px !important;
    }

.res_kuji2 .dtl_kuji2{
    -webkit-writing-mode: vertical-rl;
    -ms-writing-mode: tb-rl;
    writing-mode: vertical-rl;
    position: relative;
}


.charactor{
    text-align: center;
    margin: 20px 0;
    border: 1px #acacac solid;
    box-sizing: border-box;
}

.charactor p{
    padding: 10px 0;
}
.charactor p.tit{
    background-color: #f9ffe7;
    border-bottom: 1px #acacac solid;
}

.charactor p span {
    opacity: 0;
}

.kenmin_aisyou a, .nof_aisyou a{
    width: 100%;
    display: inline-block;
    text-align: center;
    margin: 10px 0 20px;
    color: #fd9535;
    padding: 10px 0;
    border-radius: 3px;
    border: 1px #fd9535 solid;
    box-sizing: border-box;
    background-color: transparent;
}

.kenmin_aisyou a:hover, .nof_aisyou a:hover{
    background-color: #fd9535;
    color: #fff;
}

.result ul{
    margin: 30px 0 30px 30px;
}

.result span.etc{
    display: inline-block;
    width: 100%;
    text-align: right;
}



.kenmin_category{
    margin: 10px auto;
}

.kenmin_category a:hover{
    opacity: 0.5;
}


.kenmin_category a{
    width: 32%;
    margin-left: 1%;
    margin-top: 10px;
    display: inline-block;
}

.kenmin_category a img{
    width: 100%;
}


.kenmin_category a:nth-child(3n+1){
    margin-left: 0;
}

table img.rank{
    position: absolute;
    top: 10%;
    left: 10%;
    width: 25%;
}

.ul_2column{
    position: relative;
    display: inline-block;
    width: 100%;
}

p.commentary.man{
    text-align: center;
    background-color: #d8eeff;
    border-radius: 3px;
}

p.commentary.man:before{
    font-family: "Font Awesome 5 Free";
    content: "\f183";
    color: #2196f3;
    margin-right: 10px;
    font-weight: 900;
}

p.commentary.woman{
    text-align: center;
    background-color: #fbe6ff;
    border-radius: 3px;
}

p.commentary.woman:before{
    font-family: "Font Awesome 5 Free";
    content: "\f182";
    color: #f098ff;
    margin-right: 10px;
    font-weight: 900;
}

.ul_2column .left, .ul_2column .right{
    width: 49%;
    float: left;
    margin-top: 20px;
}

.ul_2column .right{
    margin-left: 2%;
}

.countUp{
    width: 70%;
    margin: 40px 15%;
    box-sizing: border-box;
    position: relative;
    overflow: hidden;
    border: 3px #651937 solid;
}

.countUp p{
    width: 100%;
    position: absolute;
    bottom: 50%;
    z-index: 3;
    text-align: center;
    font-size: 40px;
    font-family: fantasy;
    color: #95224f;;
}

.countUp p:after{
    content: "%";
}

.countUp img{
    width: 100%;
    display: block;
}

.countUp img#heart_meter{
    z-index: 2;
    position: relative;
}

.countUp img#heart_meter_efc{
    z-index: 3;
    position: absolute;
    opacity: 0;
    top: 0;
}

.countUp img#heart_percent{
    z-index: 1;
    position: absolute;
    top: 95%;
}

#ftn_num_list{
    width: 100%;
    border: 2px #999 solid;
    margin-bottom: 20px;
}

#ftn_num_list ol{
    list-style: none;
}

#ftn_num_list li{
    border-bottom: 1px #999 solid;
    padding: 10px 0;
    padding-left: 10px;
}

#ftn_num_list li:last-child{
    border-bottom: none;
}

li#ftn_num1{
    background-color: #ffcccc;
}

li#ftn_num1:before{
    content: "1";
    background-color: #ff8989;
    border-radius: 60px;
    color: #fff;
    padding: 3px 10px;
    margin-right: 10px;
}
li#ftn_num2{
    background-color: #fafaff;
}
li#ftn_num2:before{
    content: "2";
    background-color: #fafaff;
    border-radius: 60px;
    color: #333;
    padding: 3px 10px;
    margin-right: 10px;
    border: 1px #ccc solid;
}
li#ftn_num3{
    background-color: #ffffcc;
}
li#ftn_num3:before{
    content: "3";
    background-color: #fbfb31;
    border-radius: 60px;
    color: #333;
    padding: 3px 10px;
    margin-right: 10px;
}
li#ftn_num4{
    background-color: #cce5ff;
}
li#ftn_num4:before{
    content: "4";
    background-color: #84c1ff;
    border-radius: 60px;
    color: #fff;
    padding: 3px 10px;
    margin-right: 10px;
}
li#ftn_num5{
    background-color: #ccffcc;
}
li#ftn_num5:before{
    content: "5";
    background-color: #84ff84;
    border-radius: 60px;
    color: #fff;
    padding: 3px 10px;
    margin-right: 10px;
}
li#ftn_num6{
    background-color: #ffccff;
}
li#ftn_num6:before{
    content: "6";
    background-color: #ff84ff;
    border-radius: 60px;
    color: #fff;
    padding: 3px 10px;
    margin-right: 10px;
}
li#ftn_num7{
    background-color: #ccccff;
}
li#ftn_num7:before{
    content: "7";
    background-color: #8484ff;
    border-radius: 60px;
    color: #fff;
    padding: 3px 10px;
    margin-right: 10px;
}
li#ftn_num8{
    background-color: #ffe5cc;
}
li#ftn_num8:before{
    content: "8";
    background-color: #ffc184;
    border-radius: 60px;
    color: #fff;
    padding: 3px 10px;
    margin-right: 10px;
}
li#ftn_num9{
    background-color: #e5ccff;
}
li#ftn_num9:before{
    content: "9";
    background-color: #c184ff;
    border-radius: 60px;
    color: #fff;
    padding: 3px 10px;
    margin-right: 10px;
}

#ftn_num_rst img{
    width: 100%;
}

#ftn_num_artist ul{
    margin: 20px 0;
    border: 2px #999 solid;
}

#ftn_num_artist ul li.tit{
    background-color: #e5e5e5;
}

#ftn_num_artist ul li{
    padding: 8px 0;
    list-style: none;
    border-bottom: 1px #999 solid;
    background-color: #fffff4;
    position: relative;
    padding-left: 20px;
}

#ftn_num_artist ul li:last-child{
    border-bottom: none;
}

#ftn_num_artist ul li span{
    position: absolute;
    right: 10px;
    display: inline-block;
}

.adc_list_area{
    border-bottom: 1px #e4e5d9 solid;
}


#fortune_title{
	padding:5px 10px;
	font-size:18px;
	color:white;
	border-radius:3px 3px 0 0;
	display:inline-block;
	font-weight:bold; background-color:#f9bd2c;
}


#fortune_explain{
	padding:5px 10px;
	background-color:#fff3d4;
	border: 1px #f9bd2c solid;
}

#horizon{
	border-bottom: 1px #e4e5d9 solid;
	
}