/*
紅掛空色 べにかけそらいろ #8491c3 R:132 G:145 B:195
退紅 あらぞめ #d69090 R:214 G:144 B:144
紅掛花色 べにかけはないろ #68699b R:104 G:105 B:155
*/
body {
    background: linear-gradient(0deg, rgba(132,145,195,1) 0%, rgba(214,144,144,1) 50%, rgba(104,105,155,1) 100%);
    margin: 0;
    padding: 0 20px 0 20px;
}
body.mono {
    background: #FFF;
}
a {
    color: #666;
}
#mode_switch a {
    font: normal 600 16px/20px "Gemunu Libre", sans-serif;
    letter-spacing: 0.1em;
}
#wrapper {
    margin: 0 auto 0 auto;
    max-width: 1280px;
    width: 100%;
    padding: 20px 0 20px 0;
}
h1 {
    display: block;
    margin: 0 auto 20px auto;
    width: 320px;
    text-align: center;
    font: normal 800 40px/40px "Gemunu Libre", sans-serif;
    font-optical-sizing: auto;
}
header {
    display: flex;
    margin: 0 0 10px 0;
}
#logo {
    margin-right: auto;
}
h1 {
    width: 320px;
    height: 28px;
}
h1 img {
    width: 320px;
    height: 28px;
}
#stats {
    position: relative;
    margin-right: 10px;
    width: 320px;
    border: 3px solid rgba(214,144,144,1);
    border-radius: 15px;
    background-color: rgba(214,144,144,0.5);
}
body.mono #stats {
    border: 3px solid #000;
    background-color: #fff;
}
#stats_inner {
    padding: 5px;
    font: 400 14px/20px "Gemunu Libre", sans-serif;
}
#stats_label {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 10px 0 10px;
    background-color: rgba(214,144,144,1);
    color: #fff;
    height: 20px;
    border-radius: 0 10px 0 10px;
}
body.mono #stats_label {
    background-color: #000;
    color: #fff;
}
.clock {
    font: 400 20px/26px "Gemunu Libre", sans-serif;
    vertical-align: middle;
}
.direction {
    display: inline-block;
    width: 90px;
}
.altitude {
    display: inline-block;
    width: 35px;
}
#condition {
    position: relative;
    width: 320px;
    border: 3px solid rgba(214,144,144,1);
    border-radius: 15px;
    background-color: rgba(214,144,144,0.5);
}
body.mono #condition {
    border: 3px solid #000;
    background-color: #fff;
}
#condition_inner {
    padding: 5px;
    font: 400 14px/20px "Gemunu Libre", sans-serif;
}
#condition_label {
    position: absolute;
    top: 0;
    right: 0;
    padding: 0 10px 0 10px;
    background-color: rgba(214,144,144,1);
    color: #fff;
    height: 20px;
    border-radius: 0 10px 0 10px;
}
body.mono #condition_label {
    background-color: #000;
    color: #fff;
}
#prefs {
    margin-bottom: 5px;
}
#ym {
    margin-bottom: 5px;
}
#calendar_header {
    position: relative;
    border-bottom: 1px solid #1c305c;
    text-align: center;
    margin: 0 0 10px 0;
}
body.mono #calendar_header {
    border-bottom: 1px solid #000;
}
#label_date {
    position: absolute;
    left: 0;
    bottom: 0;
    display: inline-block;
    font: 400 12px/20px "Gemunu Libre", sans-serif;
    height: 20px;
    color: #fff;
    padding: 0 10px 0 10px;
    border: 0;
    border-radius: 10px 10px 0 0;
    background-color: #1c305c;
    text-align: center;
}
body.art #label_date ,
body.mono #label_date {
    display: none;
}
#label_moonphase {
    position: absolute;
    right: 0;
    bottom: 0;
    display: inline-block;
    font: 400 12px/20px "Gemunu Libre", sans-serif;
    height: 20px;
    color: #fff;
    padding: 0 10px 0 10px;
    border: 0;
    border-radius: 10px 10px 0 0;
    background-color: #1c305c;
    text-align: center;
}
body.art #label_moonphase ,
body.mono #label_moonphase {
    display: none;
}
#calendar_month {
    display: inline-block;
    font: 800 20px/30px "Gemunu Libre", sans-serif;
    height: 30px;
    color: #fff;
    padding: 0 15px 0 15px;
    border: 0;
    border-radius: 15px;
    background-color: #1c305c;
    text-align: center;
}
body.mono #calendar_month {
    background-color: #000;
}
#calendar {
    color: #fff;
    font: 14px/14px "Gemunu Libre";
    min-height: 1809px;
}
.item {
    position: relative;
    min-height: 37px;
    margin: 0 0 20px 0;
    border: 1px solid transparent;
    animation: fade-in 1s;
    animation-fill-mode: forwards;
    cursor: pointer;
}
@keyframes fade-in {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}
.today {
    box-shadow: 0 0 30px #d3381c, 0 0 10px #d3381c;
    border: 1px solid #fff;
}
body.art .today ,
body.mono .today {
    box-shadow: none;
    border: 1px solid transparent;
}
.date {
    position: absolute;
    top: 3px;
    left: 3px;
}
body.art .date ,
body.mono .date {
    display: none;
}
.day {
    font: 800 16px/16px "Gemunu Libre", sans-serif;
    margin-right: 5px;
}
.dayofweek {
    font: 400 14px/14px "Gemunu Libre";
}
.dayofweek.sat {
    color: #CCF;
}
.dayofweek.sun {
    color: #FCC;
}
.moon {
    position: absolute;
    top: 3px;
    right: 3px;
    font: 400 16px/16px "Gemunu Libre", sans-serif;
}
body.art .moon ,
body.mono .moon {
    display: none;
}
.sunblock {
    position: absolute;
    top: 5px;
    width: 100%;
}
body.art .sunblock ,
body.mono .sunblock {
    top: 7px;
}
.sunline {
    position: relative;
    height: 7px;
    color: #000;
    padding: 0;
    border-radius: 3px;
    background: rgba(252,200,0,1);
}
body.mono .sunline {
    background: #fff;
}
.sunrise, .sunset {
    position: absolute;
    display: inline-block;
    top: -3px;
    height: 14px;
    background: rgba(252,200,0,1);
    padding: 0 7px 0 7px;
    border-radius: 7px;
}
.sunrise {
    border-left: 2px solid #d3381c;
    left: 0;
}
.sunset {
    border-right: 2px solid #d3381c;
    right: 0;
}
body.art .sunrise, body.art .sunset ,
body.mono .sunrise, body.mono .sunset {
    display: none;
}
.moonblock {
    position: relative;
    top: 25px;
    width: 100%;
}
body.art .moonblock ,
body.mono .moonblock {
    top: 23px;
}
.moonline {
    position: relative;
    height: 7px;
    color: #000;
    padding: 0;
    border-radius: 3px;
    background: rgba(234,244,252,1);
}
body.mono .moonline {
    background: #CCC;
}
.moonsetline {
    position: absolute;
    left: 0;
    height: 7px;
    color: #000;
    border-right: 2px solid #d3381c;
    padding: 0;
    background: rgba(234,244,252,1);
}
body.art .moonsetline ,
body.mono .moonsetline {
    border-right: 0;
    border-radius: 0 3px 3px 0;
}
.moonriseline {
    position: absolute;
    right: 0;
    height: 7px;
    color: #000;
    border-left: 2px solid #d3381c;
    padding: 0;
    background: rgba(234,244,252,1);
}
body.art .moonriseline ,
body.mono .moonriseline {
    border-left: 0;
    border-radius: 3px 0 0 3px;
}
body.mono .moonsetline ,
body.mono .moonriseline {
    background: #CCC;
}
.moonrise, .moonset {
    position: absolute;
    display: inline-block;
    top: -4px;
    height: 14px;
    color: #000;
    background: rgba(255,255,255,0.8);
    padding: 0 7px 0 7px;
    border-radius: 7px;
}
body.art .moonrise, body.art .moonset ,
body.mono .moonrise, body.mono .moonset {
    display: none;
}
.moonline .moonrise {
    border-left: 2px solid #d3381c;
    left: 0;
    background: rgba(234,244,252,1);
}
.moonline .moonset {
    border-right: 2px solid #d3381c;
    right: 0;
    background: rgba(234,244,252,1);
}
i{ background-image:url('img/moon_splite.png');background-repeat:no-repeat;display:inline-block;width:16px;height:16px;text-align:center; vertical-align: middle; margin-left: 5px; }
i.moon_0{ background-position: 0 0; }
i.moon_1{ background-position: -16px 0; }
i.moon_2{ background-position: -32px 0; }
i.moon_3{ background-position: -48px 0; }
i.moon_4{ background-position: -64px 0; }
i.moon_5{ background-position: -80px 0; }
i.moon_6{ background-position: -96px 0; }
i.moon_7{ background-position: -112px 0; }
i.moon_8{ background-position: -128px 0; }
i.moon_9{ background-position: -144px 0; }
i.moon_10{ background-position: -160px 0; }
i.moon_11{ background-position: -176px 0; }
i.moon_12{ background-position: -192px 0; }
i.moon_13{ background-position: -208px 0; }
i.moon_14{ background-position: -224px 0; }
i.moon_15{ background-position: -240px 0; }
i.moon_16{ background-position: -256px 0; }
i.moon_17{ background-position: -272px 0; }
i.moon_18{ background-position: -288px 0; }
i.moon_19{ background-position: -304px 0; }
i.moon_20{ background-position: -320px 0; }
i.moon_21{ background-position: -336px 0; }
i.moon_22{ background-position: -352px 0; }
i.moon_23{ background-position: -368px 0; }
i.moon_24{ background-position: -384px 0; }
i.moon_25{ background-position: -400px 0; }
i.moon_26{ background-position: -416px 0; }
i.moon_27{ background-position: -432px 0; }
i.moon_28{ background-position: -448px 0; }
i.moon_29{ background-position: -484px 0; }
i.fa-solid { 
    background: none;
    color: #fff;
    margin: 0 5px 0 0;
}
i.fa-up-long ,
i.fa-down-long {
    display: inline-block;
    border-radius: 50%;
    height: 16px;
    width: 16px;
    line-height: 16px;
    text-align: center;
    vertical-align: middle;
    color: #333;
    background: yellow;
}
body.mono i.fa-solid { color: #000; }
.clock i {
    vertical-align: middle;
    width:20px;
    height:26px;
    line-height: 26px;
}

/* モーダルの背景 */
.modal-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    display: none; /* 初期状態は非表示 */
    justify-content: center;
    align-items: center;
}

/* モーダル本体 */
.modal {
    background: white;
    padding: 20px;
    border-radius: 8px;
    width: 320px;
    text-align: center;
    box-shadow: 0 0 20px rgba(255,255,255,1);
    background-color: #333;
    color: #fff;
}

/* 閉じるボタン */
.close-button {
    margin-top: 10px;
    padding: 5px 10px;
    background: #d69090;
    color: white;
    border: 0;
    border-right: 1px solid #d3381c;
    border-bottom: 1px solid #d3381c;
    border-radius: 4px;
    cursor: pointer;
}

.close-button:hover {
    background-color: #d3381c;
}

.modal h2 {
    font: bold 20px/24px sans-serif;
    margin: 10px 0 0 0;
    padding: 0;
}
.modal p {
    font: normal 12px/18px sans-serif;
    margin: 5px 0 5px 0;
    padding: 0;
}
#modal-contents {
    position: relative;
}
#modal-next {
    position: absolute;
    top: 0;
    right: 0;
}
#modal-prev {
    position: absolute;
    top: 0;
    left: 0;
}
.modal table {
    background: #666;
    width: 100%;
    border-spacing: 1px;
}
.modal th ,
.modal td {
    font: normal 12px/20px sans-serif;
    padding: 0 3px 0 3px;
}
.modal th {
    font: bold 12px/20px sans-serif;
    background-color: #666;
}
.modal td b {
    font: bold 12px/20px sans-serif;
    padding: 0 3px 0 3px;
}
tr.bg-nightEnd { background-color: rgba(28,48,92,1); }
tr.bg-nauticalDawn { background-color: #8491c3; }
tr.bg-dawn { background-color: #d69090; }
tr.bg-sunrise { background-color: #d3381c; }
tr.bg-solarnoon { background-color: #d3381c; }
tr.bg-sunset { background-color: #d3381c; }
tr.bg-dusk { background-color: #d69090; }
tr.bg-nauticalDusk { background-color: #8491c3; }
tr.bg-night { background-color: rgba(28,48,92,1); }
tr.bg-midnight { background-color: rgba(0,0,0,1); }
td.moon-condition {background-color: #333; text-align: left;}

@media (max-width: 1020px) and (min-width: 768px) {
    header {
        display: block;
    }
    #stats {
        margin: 0 auto 10px auto;
    }
    #condition {
        margin: 0 auto 0 auto;
    }
}
@media (max-width: 767px) {
    header {
        display: block;
    }
    #stats {
        margin: 0 auto 10px auto;
    }
    #condition {
        margin: 0 auto 0 auto;
    }
}