@charset "UTF-8";/* Reset CSS.-------------------------------------------------------- */
#main-content1 table {border: 1px solid #ccc;border-collapse: collapse;margin: 0px auto 50px;width: 100%;}
#main-content1 thead tr:first-child {width: 50px;text-align: center;}
#title {color: #ffffff;background-color: #2c7eb9;font-size: 21px;padding: 2px 0 3px;}
#footer_title {color: #ffffff;background-color: #2c7eb9;font-size: 21px;padding: 0px 0 0px;}
#footer_title a {color: #ffffff;}
.prev a, .next a{color: #ffffff;text-decoration: none;}
#main-content1 thead tr:nth-child(2) {width: 50px;height: 30px;text-align: center;line-height: 30px;}
#main-content1 tfoot th,
#main-content1 thead th {border: 1px solid #ccc;white-space: nowrap;position: relative;text-align: center;}
#prev,#next {border: 0px none;cursor: pointer;user-select: none;font-size: 31px;color: #ffffff;background-color: #2c7eb9;position: absolute;top: 5px;}
tfoot #prev,tfoot #next {top: 14px;}
#prev {left: 5px;}
#next {right: 5px;}
.next span,.prev span {font-size: 15px;position: absolute;top: 10px;}
.next span {right: 34px;}
.prev span {left: 34px;}
button{background-color: #fff;}
#main-content1 tbody td {border: 1px solid #ccc;position: relative;height: 80px;width: 80px;text-align: center;}
#main-content1 tbody td.blue,
.blue {background-color: #e9f4fe;}
th.blue,#main-content1 tbody td.blue p {color: #1d39c0;}
#main-content1 table .holiday,#main-content1 tbody td.red,.red {background-color: #ffdddd;}
#main-content1 .r_color0,#main-content1 th.red,#main-content1 tbody td.red p {color: red;}
#main-content1 tbody .schedules {margin-top: 25px;}
#main-content1 tbody .schedule {margin: 0 auto 5px;text-align: center;}
#main-content1 tbody button {border: none;background-color: transparent;font-weight: bold;text-decoration: underline;}
#main-content1 tbody button:hover {background-color: #EEFFFF;}
#main-content1 tbody p {position: absolute;top: 3px;left: 3px;font-weight: bold;font-family: Arial, 'Hiragino Kaku Gothic ProN', 'Osaka', sans-serif;font-size: 17px}
#main-content1 .keta1{left: 8px;}
tfoot {font-weight: bold;text-align: center;}
tfoot tr {width: 50px;height: 50px;text-align: center;line-height: 50px;}
td.today {background-color: #FFFFCC !important;}
#today {cursor: pointer;user-select: none;font-size: 16px;border: 0px none;}
.prev,.next{color: #ffffff;background-color: #2c7eb9;}
.sunrise_title{margin: 32px 0 0 0;font-size: 11px;background-color: #f0f0f0;}
.sunset_title {font-size: 11px;background-color: #f0f0f0;}
.sunrise_time,.sunset_time {font-weight: bold;}
.Weather img{border: none;width: 50px;height: auto;margin-top: 22px;}
#main-content1 .Weather p.temp {top:66px;font-weight: normal;font-size: 12px;right: 0;left: 0;margin: auto;white-space: nowrap;color: #000;}
#main-content1 .Weather .sunrise_title {margin-top: 30px;}
#main-content1 .temp .max {color: #FF0000;font-size: 15px;font-weight: bold;}
#main-content1 .temp .min {color: #0096FF;font-size: 15px;font-weight: bold;}
#main-content1 .tani {padding-left: 2px;}
#main-content1 .weatherName {font-size: 10px;top: 53px;font-weight: normal;right: 0;left: 0;margin: auto;color: #000 !important}
#main-content1 .rokuyou{position: absolute;top: 9px;left: 24px;font-size: 10px;white-space: nowrap;}
.r_color1,.r_color2,.r_color3,.r_color4,.r_color5{color: #000 !important;}
.moon_age,.solar_terms,.times_day,.pardon,.tiger,.snake,.unsuccessful{font-size: 10px;display: block;}
.moon_age{font-size: 12px;}
.button-container {display: flex;justify-content: center;gap: 10px;margin-bottom: 11px;}
.button {padding: 5px 20px;background-color: #f0f0f0;border: none;border-radius: 5px;cursor: pointer;transition: background-color 0.3s;}
.button.active {background-color: #FFA500;color: white;}
#main-content1 .sun_detail tbody td {height: auto;vertical-align: middle;}
#main-content1 .sun_detail tbody td:last-child,
#main-content1 .sun_detail tbody td:first-child {background-color: inherit;}
#main-content1 .sun_detail tbody p,
#main-content1 .sun_detail .rokuyou {position: inherit;top: -6px;left: 0;}
tr.today {background-color: #FFFFCC !important;}
.detail-table-wrapper {width: 100%;overflow-x: auto;margin-bottom: 1em;display: none;}
#sunTable {width: auto;min-width: 100%;border-collapse: collapse;}
#sunTable th,#sunTable td {border: 1px solid #ccc;white-space: nowrap;}
#sunTable thead {background-color: #f0f0f0;}
/* Region Accordion Styles (SUUMO-like) */
.region-accordion-list {display: block !important;position: relative !important;margin: 20px 0;border-top: 1px solid #e0e0e0;}
.region-item {border-bottom: 1px solid #e0e0e0;}
.region-header {display: flex;justify-content: space-between;align-items: center;padding: 10px 20px;background-color: #f8f8f8;cursor: pointer;font-weight: bold;font-size: 16px;color: #333;transition: background-color 0.2s;position: relative;}
.region-header:hover {background-color: #f0f0f0;}
.region-header.active {background-color: #e3f2fd;}
.region-icon {width: 25px;height: 25px;border-radius: 50%;background-color: #2c7eb9;display: flex;align-items: center;justify-content: center;transition: transform 0.3s;flex-shrink: 0;}
.region-icon::after {content: '';width: 0;height: 0;border-left: 6px solid transparent;border-right: 6px solid transparent;border-top: 8px solid white;}
.region-header.active .region-icon {transform: rotate(180deg);}
.prefecture-list {display: none;background-color: #fff;padding: 0;margin: 0;list-style: none;}
.prefecture-list.active {display: block;}
.prefecture-list li {border-bottom: 1px solid #f0f0f0;}
.prefecture-list li:last-child {border-bottom: none;}
.prefecture-list li a {display: flex;justify-content: space-between;align-items: center;padding: 5px 20px 5px 20px;text-decoration: none;color: #333;font-size: 15px;transition: background-color 0.2s;}
.prefecture-list li a:hover {background-color: #f8f8f8;}
.prefecture-list li a::after {content: '›';color: #2c7eb9;font-size: 24px;font-weight: bold;flex-shrink: 0;}
[class*="accordion"] span {background-color: inherit;border-bottom: inherit;}
/* Twilight Chart Styles */
.twilight-chart-container {width: 100%;max-width: 100%;background: white;border-radius: 8px;padding: 10px 0px 20px;margin-bottom: 20px;position: relative;overflow: hidden;box-sizing: border-box;}
#twilightCanvas {display: block;width: 100%;max-width: 100%;height: auto;cursor: crosshair;}
.twilight-tooltip {position: fixed;background: rgba(0, 0, 0, 0.85);color: white;padding: 10px;border-radius: 4px;font-size: 12px;pointer-events: none;opacity: 0;transition: opacity 0.2s;z-index: 1000;white-space: nowrap;box-shadow: 0 2px 8px rgba(0,0,0,0.3);}
.twilight-tooltip.show {opacity: 1;}
.twilight-legend {display: flex;flex-wrap: wrap;justify-content: center;gap: 15px;padding-bottom: 10px;font-size: 12px;margin: -5px 0 -11px 0;}
.twilight-legend-item {display: flex;align-items: center;gap: 5px;}
.twilight-legend-color {width: 15px;height: 15px;border-radius: 3px;flex-shrink: 0;}
.trivia-content{padding: 15px 10px;}
.trivia-content strong{padding: 10px 10px;color: #2c7eb9;}

@media(max-width:550px) {
#prev {left: 0;  right: 0;}
.next span,.prev span{display: none;}
.twilight-legend {  font-size: 10px;gap: 10px;}
.twilight-legend-color {  width: 10px;height: 10px;}
}

@media(max-width:470px){
#main-content1 .Weather p.temp {font-size: 10px;}
#main-content1 .temp .min,
#main-content1 .temp .max { font-size: 14px;}
#main-content1 .temp .min {padding-left: 3px;}
#main-content1 .temp .max {padding-right: 3px;}
#main-content1 .tani {display: none;}
#main-content1 .weatherName {white-space: nowrap;  overflow: hidden;}
#main-content1 .rokuyou {left: 22px;}
#sunTableHead #prev,#sunTableHead #next {top: 0px;}
#sunTableHead th{font-size: 12px;}
.weekday{font-size: 10px;}
}

/* h1内の年月表示（小さめ） */
.h1-date {
	display: block;
	font-size: 70%;
	font-weight: normal;
	color: #666;
}