.now_area {
    text-align: center;
    padding: 0;
    font-size: 2rem;
    margin: 10px 0;
}

.now_area h1 {
    margin: 10px;
}

.now_area h1 {
    text-align: center;
    padding: 0;
    font-size: 2rem;
    margin: 10px 0;
}

.area_chg {
    padding: 5px 0 10px 0;
    text-align: center;
}

.select_area {
    padding: 3px;
}

.tidedata {
    background: #e6e2db;
    padding: 10px 0;
}


/* select */

.cp_ipselect {
    overflow: hidden;
    width: 90%;
    margin: 0;
    text-align: center;
}

.cp_ipselect select {
    width: 100%;
    padding-right: 1em;
    cursor: pointer;
    text-indent: 0.01px;
    text-overflow: ellipsis;
    border: none;
    outline: none;
    background: transparent;
    background-image: none;
    box-shadow: none;
    -webkit-appearance: none;
    appearance: none;
}

.cp_ipselect select::-ms-expand {
    display: none;
}

.cp_ipselect.cp_sl01 {
    position: relative;
    border: 1px solid #bbbbbb;
    border-radius: 2px;
    background: #ffffff;
    display: inline-block;
    width: 200px;
    vertical-align: middle;
}

.cp_ipselect.cp_sl01::before {
    position: absolute;
    top: 0.8em;
    right: 0.9em;
    width: 0;
    height: 0;
    padding: 0;
    content: '';
    border-left: 6px solid transparent;
    border-right: 6px solid transparent;
    border-top: 6px solid #333;
    pointer-events: none;
}

.cp_ipselect.cp_sl01 select {
    padding: 5px 38px 5px 8px;
    color: #333;
    font-weight: 500;
    font-size: 1.5rem;
}


/* button */

form .select_area {
    font-family: "YakuHanJP", Lato, "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}

form .btn_area {
    color: #fff;
    display: inline-block;
    vertical-align: middle;
    margin: 0 10px;
    padding: 8px 15px;
    color: #fff;
    font-weight: bold;
    letter-spacing: 0.5pt;
    text-decoration: none;
    background-color: #191970;
    border: 1px solid #191970;
    cursor: pointer;
    transition-duration: 0.3s;
    -webkit-transition-duration: 0.3s;
    -moz-transition-duration: 0.3s;
    -o-transition-duration: 0.3s;
    -ms-transition-duration: 0.3s;
    font-family: "YakuHanJP", Lato, "Noto Sans JP", "游ゴシック体", YuGothic, "游ゴシック Medium", "Yu Gothic Medium", "游ゴシック", "Yu Gothic", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, Arial, "メイリオ", Meiryo, sans-serif;
}

form .btn_area:hover {
    color: #ffffff;
    background-color: #666;
}

.nav_date {
    text-align: center;
}

.nav_date .prev_date {
    display: inline-block;
    vertical-align: bottom;
}

.nav_date .now_date {
    display: inline-block;
    width: 160px;
    background: url(/img/midashi01_bg.png) center center;
    color: #ffffff;
    padding: 3px 5px 5px 5px;
    vertical-align: middle;
}

.now_date h3 span {
    font-size: 1.5rem;
}

.nav_date .next_date {
    display: inline-block;
    vertical-align: bottom;
}

#d_head {
    margin-top: 7px;
    padding: 5px 5px 0 5px;
}

#d_head table {
    width: 100%;
    font-size: 1.5rem;
    border-right: 1px solid #ccc;
    margin-bottom: 10px;
}

#d_head table td {
    text-align: center;
    padding: 2px 0;
    /* width: 20%; */
}

td.mancho,
td.kancho {
    width: 19%;
}

td.mancho {
    background: #a7c8fd !important;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    font-size: 1.5rem;
}

td.kancho {
    background: #fff36e !important;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    border-left: 1px solid #ccc;
    font-size: 1.5rem;
}

.detail {
    padding: 0 5px 5px 5px;
}

.detail table {
    width: 100%;
    font-size: 90%;
    border-top: 1px solid #ccc;
    border-left: 1px solid #ccc;
    margin-bottom: 10px;
}

.detail .kg {
    vertical-align: middle;
}

.detail table td {
    background: #ffffff;
    border-bottom: 1px solid #ccc;
    border-right: 1px solid #ccc;
    text-align: center;
    padding: 2px 0;
    /*width: 20%;*/
}

td.m,
td.k {
    width: 19%;
}

.age0 {
    background: url(/img/moon/moon0.png) center center no-repeat;
    background-size: contain;
}

.age1 {
    background: url(/img/moon/moon1.png) center center no-repeat;
    background-size: contain;
}

.age2 {
    background: url(/img/moon/moon2.png) center center no-repeat;
    background-size: contain;
}

.age3 {
    background: url(/img/moon/moon3.png) center center no-repeat;
    background-size: contain;
}

.age4 {
    background: url(/img/moon/moon4.png) center center no-repeat;
    background-size: contain;
}

.age5 {
    background: url(/img/moon/moon5.png) center center no-repeat;
    background-size: contain;
}

.age6 {
    background: url(/img/moon/moon6.png) center center no-repeat;
    background-size: contain;
}

.age7 {
    background: url(/img/moon/moon7.png) center center no-repeat;
    background-size: contain;
}

.age8 {
    background: url(/img/moon/moon8.png) center center no-repeat;
    background-size: contain;
}

.age9 {
    background: url(/img/moon/moon9.png) center center no-repeat;
    background-size: contain;
}

.age10 {
    background: url(/img/moon/moon10.png) center center no-repeat;
    background-size: contain;
}

.age11 {
    background: url(/img/moon/moon11.png) center center no-repeat;
    background-size: contain;
}

.age12 {
    background: url(/img/moon/moon12.png) center center no-repeat;
    background-size: contain;
}

.age13 {
    background: url(/img/moon/moon13.png) center center no-repeat;
    background-size: contain;
}

.age14 {
    background: url(/img/moon/moon14.png) center center no-repeat;
    background-size: contain;
}

.age15 {
    background: url(/img/moon/moon15.png) center center no-repeat;
    background-size: contain;
}

.age16 {
    background: url(/img/moon/moon16.png) center center no-repeat;
    background-size: contain;
}

.age17 {
    background: url(/img/moon/moon17.png) center center no-repeat;
    background-size: contain;
}

.age18 {
    background: url(/img/moon/moon18.png) center center no-repeat;
    background-size: contain;
}

.age19 {
    background: url(/img/moon/moon19.png) center center no-repeat;
    background-size: contain;
}

.age20 {
    background: url(/img/moon/moon20.png) center center no-repeat;
    background-size: contain;
}

.age21 {
    background: url(/img/moon/moon21.png) center center no-repeat;
    background-size: contain;
}

.age22 {
    background: url(/img/moon/moon22.png) center center no-repeat;
    background-size: contain;
}

.age23 {
    background: url(/img/moon/moon23.png) center center no-repeat;
    background-size: contain;
}

.age24 {
    background: url(/img/moon/moon24.png) center center no-repeat;
    background-size: contain;
}

.age25 {
    background: url(/img/moon/moon25.png) center center no-repeat;
    background-size: contain;
}

.age26 {
    background: url(/img/moon/moon26.png) center center no-repeat;
    background-size: contain;
}

.age27 {
    background: url(/img/moon/moon27.png) center center no-repeat;
    background-size: contain;
}

.age28 {
    background: url(/img/moon/moon28.png) center center no-repeat;
    background-size: contain;
}

.age29 {
    background: url(/img/moon/moon29.png) center center no-repeat;
    background-size: contain;
}

.moon_age {
    padding-top: 9px;
    width: 50px;
    height: 47px;
    margin: 0 auto;
    color: #333;
    font-size: 1.6rem;
}

.saturday {
    color: #0000cd;
}

.sunday {
    color: #ff4500;
}

.holiday {
    padding: 0px 3px;
    position: absolute;
    bottom: 1px;
    width: 100%;
    text-align: center;
    line-height:1.3;
}

.holiday span {
    border-radius: 3px;
    display: inline-block;
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    background: #ff4500;
    padding: 1px 3px;
}

.link_day {
    display: block;
    position: relative;
    padding: 0 0 10px 0;
}

.detail table td .day {
    font-size: 2.5rem;
    font-weight: bold;
    line-height: 0.5px;
}

.detail table td.m {
    background: #ebf2ff;
    padding: 2px 0;
}

.detail table td.k {
    padding: 2px 0;
    background: #ffffd6;
}

.detail td ul li {
    float: left;
}

.detail td ul li.shio_name {
    padding-top: 5px;
    width: 24%;
    text-align: center;
    font-size: 17px;
}

.detail td ul li.sun {
    width: 25%;
    text-align: left;
    background: url(/img/ico_sun.png) left center no-repeat;
}

.detail td ul li.moon {
    width: 25%;
    text-align: left;
    background: url(/img/ico_moon.png) left center no-repeat;
}

.detail td ul li.sun p,
.detail td ul li.moon p {
    padding: 1px 2px 0px 24px;
}

.detail .event p {
    padding: 1px 0 0px 0;
}

.siohigari {
    color: #bf402f;
}

.siohigari span {
    font-size: 1.4rem;
}

#table_scroll {
    max-width: 790px;
    width: 100%;
    margin: 0 auto;
}

.thead_outer {
    position: fixed;
    top: 100px;
    left: 0;
    width: 100%;
}

#map {
    margin: 5px;
    width: auto;
    height: 400px;
}

@media screen and (max-width: 400px) {
    body {
        font-size: 1.35rem;
    }
    .moon_age {
        font-size: 1.5rem;
    }
    .detail table td .day {
        font-size: 2.1rem;
    }
    .holiday span {
        font-size: 0.95rem;
    }
}

@media screen and (max-width: 380px) {
    .holiday {
        position: static;
    }
    .holiday span {
        font-size: 0.95rem;
    }
}

@media screen and (max-width: 360px) {
    body {
        font-size: 1.25rem;
    }
    .detail td ul li.shio_name {
        width: 18%;
    }
    .nav_date .now_date {
        width: 130px;
    }
    td.m,
    td.k,
    td.mancho,
    td.kancho {
        width: 20%;
        width: 20%;
    }
    .detail td ul li.sun,
    .detail td ul li.moon {
        width: 26%;
    }
}

@media screen and (max-width: 330px) {
    body {
        font-size: 1.2rem;
    }
}