@charset "utf-8";
img {
    display: block;
    width: 100%;
}
/* 下層ヘッダー */
#yumenta .under {
    position: relative;
    background: url("../../img/header_under_back.jpg") no-repeat 25% 65% / 100%;
    background-size: cover;
    padding: 20px 0 150px 0;
}
#yumenta .under:after {
    content: "";
    position: absolute;
    background: url("../../img/header_border.png") no-repeat left top / 100%;
    width: 100%;
    height: 4vw;
    bottom: -1px;
    left: 0;
}
#yumenta .under h1 {
    position: relative;
    width: 1000px;
    margin: 0 auto;
    padding: 0 150px;
}
#yumenta .under h1:before {
    position: absolute;
    content: '';
    background: url("../../img/moon_yumenta.png") no-repeat left top / 100%;
    width: 130px;
    height: 130px;
    top: 0;
    left: 0;
}
#yumenta .under h1:after {
    position: absolute;
    content: '';
    background: url("../../img/moon_chuckl.png") no-repeat right top / 100%;
    width: 130px;
    height: 130px;
    top: 0;
    right: 0;
}
/* トップ＆下層　共通ナビ部分 */
#yumenta nav {
    position: absolute;
    width: 100%;
    margin-top: 0;
    z-index: 1;
    bottom: -35px;    
}
#yumenta nav .menu_btn {
    display: none;
}
#yumenta nav ul {
    /*width: 1000px;*/
    width: 865px;
    margin:  0 auto 0 auto;
}
#yumenta nav ul li {
    display: inline-block;
    width: 135px;
    font-size: 85%;
    font-weight: bold;
}
#yumenta nav ul li a {
    position: relative;
    text-align: center;
    display: block;
    padding-top: 110px;
}
#yumenta nav ul li a:hover {
    opacity: 0.8;
}
#yumenta nav ul li a br {
    display: none;
}
#yumenta nav ul li a:before {
    content: "";
    display: block;
    position: absolute;
    width: 100%;
    height: 110px;
    top: 0;
}
#yumenta nav ul .character a,
#yumenta nav ul .mail a {
    font-size: 85%;
}
#yumenta nav ul .character a:before {background: url("../../img/nav_character.png") no-repeat top center;}
#yumenta nav ul .writer a:before {background: url("../../img/nav_writer.png") no-repeat top center;}
#yumenta nav ul .distribution a:before {background: url("../../img/nav_distribution.png") no-repeat top center;}
#yumenta nav ul .reply a:before {background: url("../../img/nav_reply.png") no-repeat top center;}
#yumenta nav ul .gift a:before {background: url("../../img/nav_gift.png") no-repeat top center;}
#yumenta nav ul .qa a:before {background: url("../../img/nav_qa.png") no-repeat top center;}
#yumenta nav ul .mail a:before {background: url("../../img/nav_mail.png") no-repeat top center;}

/* article */
#yumenta article {
    background: #fffff4;
    position: relative;
    padding-top: 80px;
}
/*
#yumenta article:before {
    content: "";
    position: absolute;
    background: url("../../img/header_border.png") no-repeat left top / 100%;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
}

/* フッター */
#yumenta {
    background: url("../../img/footer_back.jpg") no-repeat center bottom;
    background-size: 100% auto;
    background-color: #fffff3;
    padding-bottom: 40%;
    margin-bottom: 20px;
}

@media (max-width: 812px) {
/* 下層ヘッダー */
#yumenta .under {
    padding: 20px 0 90px 0;
}
#yumenta .under h1 {
    width: 95%;
    margin: 0 auto;
    padding: 0 85px;
}
#yumenta .under h1:before {
    position: absolute;
    content: '';
    background: url("../../img/moon_yumenta.png") no-repeat left top / 100%;
    width: 80px;
    height: 80px;
    top: 0;
    left: 0;
}
#yumenta .under h1:after {
    position: absolute;
    content: '';
    background: url("../../img/moon_chuckl.png") no-repeat right top / 100%;
    width: 80px;
    height: 80px;
    top: 0;
    right: 0;
}
/* トップ＆下層　共通ナビ部分 */
#yumenta nav {
    position: absolute;
    width: 100%;
    margin-top: 0;
    bottom: 0;
}
#yumenta nav .menu_btn {
    display: block;
    width: 20%;
    margin: 0 auto;
    cursor: pointer;
}
#yumenta nav ul {
    display: none;
    width: 90%;
    background: rgba(254, 252, 9, 0.9);
    padding: 15px 15px 10px 15px;
    border-radius: 10px;
    position: absolute;
    top: 120%;
    left: 5%;
}
#yumenta nav ul li {
    display: table;
    float: left;
    width: calc(50% - 3px);
    margin: 0 0 5px 0;
}
#yumenta nav ul li:nth-child(2n) {
    margin-left: 6px;
}
#yumenta nav ul li:last-child {
    /* お問合せがあるとき復活
    width: 100%;
    ******************/
}
#yumenta nav ul li a {
    display: table-cell;
    width: 100%;
    height: 45px;
    vertical-align: middle;
    background-color: #b0e3ff;
    padding: 0 10px 0 35px;
    font-size: 100%;
    border: 3px #fff solid;
    text-align: left;
    line-height: 120%;
}
#yumenta nav ul li a:before {
    content: "";
    display: none;
    position: absolute;
    width: 25px;
    height: 25px;
    top: 0;
}
#yumenta nav ul .character a {
    background: #b0e3ff url("../../img/nav_sp_character.png") no-repeat left center / 100%;
    background-size: 30px 30px;
}
#yumenta nav ul .writer a {
    background: #b0e3ff url("../../img/nav_sp_writer.png") no-repeat left center / 100%;
    background-size: 30px 30px;
}
#yumenta nav ul .distribution a {
    background: #b0e3ff url("../../img/nav_sp_distribution.png") no-repeat left center / 100%;
    background-size: 30px 30px;
}
#yumenta nav ul .reply a {
    background: #b0e3ff url("../../img/nav_sp_reply.png") no-repeat left center / 100%;
    background-size: 30px 30px;
}
#yumenta nav ul .gift a {
    background: #b0e3ff url("../../img/nav_sp_gift.png") no-repeat left center / 100%;
    background-size: 30px 30px;
}
#yumenta nav ul .qa a {
    background: #b0e3ff url("../../img/nav_sp_qa.png") no-repeat left center / 100%;
    background-size: 30px 30px;
}
#yumenta nav ul .mail a {
    background: #b0e3ff url("../../img/nav_sp_mail.png") no-repeat left center / 100%;
    background-size: 30px 30px;
}
#yumenta article {
    padding-top: 30px;
}


}

@media (max-width: 480px) {
#yumenta .under h1 {
    width: 95%;
    padding: 0;
}
#yumenta .under h1:before {
    position: static;
    content: '';
    background: none;
    width: auto;
    height: auto;
    top: inherit;
    left: inherit;
}
#yumenta .under h1:after {
    position: static;
    content: '';
    background: none;
    width: auto;
    height: auto;
    top: inherit;
    right: inherit;
}
#yumenta nav ul li a {
    font-size: 90%;
}
#yumenta .under nav {
    bottom: 0;
}
#yumenta nav .menu_btn {
    width: 30%;
}

}
