@charset "UTF-8";

/*****************************************************************
    weather page only 2026.03.16
*****************************************************************/


/* base
================================================= */
.block_weather {
  margin-bottom: 14%;
}
.weather_main_area,
.weather_sub_area {
  width: 100%;
}
@media print, screen and (min-width: 520px) {
  .block_weather { display: flex; justify-content: space-between; margin-bottom: 9%; }
  .weather_main_area { width: 58%; }
  .weather_sub_area { width: 35%; }
}
@media print, screen and (min-width: 600px) {
}
@media print, screen and (min-width: 960px) {
  .block_weather { margin-bottom: 6%; }
}
@media print, screen and (min-width: 1200px) {
  .weather_main_area { width: 65%; max-width: 912px; }
  .weather_sub_area { width: 28%; max-width: 392px; }
}
@media print, screen and (min-width: 1280px) {
  .block_weather { margin-bottom: 96px; }
}


/* 各要素ブロック（section,aside）
================================================= */
/* 各部上下余白 */
.weather_main_area > section,
.weather_main_area > aside,
.weather_sub_area > section,
.weather_sub_area > aside {
  margin: 14% auto 0;
}
.weather_main_area > section:first-child,
.weather_main_area > aside:first-child {
  margin-top: 0;
}
@media print, screen and (min-width: 520px) {
  .weather_sub_area > section:first-child,
  .weather_sub_area > aside:first-child { margin-top: 0; }
}
@media print, screen and (min-width: 960px) {
  .weather_main_area > section, .weather_main_area > aside,
  .weather_sub_area > section, .weather_sub_area > aside { margin: 13% auto 0; }
}
@media print, screen and (min-width: 1366px) {
  .weather_main_area > section, .weather_main_area > aside,
  .weather_sub_area > section, .weather_sub_area > aside { margin: 12% auto 0; }
}

/* 左カラム広告（main_area内のaside）*/
.weather_main_area aside {
  margin-top: 9%;
}
@media print, screen and (min-width: 960px) {
  .weather_main_area aside { margin-top: 7%; }
}
@media print, screen and (min-width: 1366px) {
  .weather_main_area aside { margin-top: 6%; }
}

/* 右カラム広告（sub_area内のaside） */
.weather_sub_area aside {
  margin-top: 9%;
}
@media print, screen and (min-width: 960px) {
  /*.weather_sub_area aside { margin-top: 7%; }*/
}
@media print, screen and (min-width: 1366px) {
  /*.weather_sub_area aside { margin-top: 6%; }*/
}


/* お知らせ
================================================= */
.notice {
  margin-bottom: 10%;
  padding: min(4%, 25px);
  border: 3px solid #B20000;
  background: #ffffff;
  color: #B20000;
  font-weight: bold;
}


/* 天気メニュー
================================================= */
.weather_menu {
  width: 100%;
  margin-bottom: -8%;
}
.weather_menu ul {
  display: flex;
  flex-wrap:wrap;
  justify-content: flex-start;
  width: 102%;
  margin-left: -2%;
  background: none;
}
.weather_menu li {
  margin-left: 2%;
  margin-bottom: 2%;
}
.weather_menu li a,
.weather_menu li span.current {
  display: flex;
  align-items: center;
  width: 100%;
  margin: inherit;
  padding-top: inherit;
  letter-spacing: 0.05em;
  line-height: 1.2;
}
.weather_menu li a {
  text-decoration: none;
}
.weather_menu li span.current {
  background-color: #d70b24;
  color: #ffffff;
  background-size: 0 auto , 13px auto;
}
@media print, screen and (min-width: 520px) {
  .weather_menu li a, .weather_menu li span.current { height: 38px; }
}
@media print, screen and (min-width: 960px) {
  .weather_menu { margin-bottom: -9%; }
  .weather_menu li a, .weather_menu li span.current { height: 50px; }
}
@media print, screen and (min-width: 1200px) {
}


/* 天気予報（main_area内のsection）
================================================= */
.weather_main_area section h2 {
  margin-top: -0.5em;
}
.weather_main_area section img + img {
  margin-top: 4%;
}
.weather_main_area .page-transition {
  margin-top: 10%;
}
.weather_main_area .page-transition > a {
  margin-inline: auto;
}


/* 情報カメラ・関連リンクバナー
================================================= */
.weather_sub_area h3.contents_h3 {
  font-size: 2.2rem;
}
.weather_sub_area h3.contents_h3.h_icon_dotte_ss::before {
  top: calc(0.65em - 3px);
}
section.info-cam,
section.related-pages {
  box-sizing: border-box;
  width: 96%;
  padding: 6% 7%;
  border-radius: 10px;
  background-color: #ffffff;
}
@media print, screen and (min-width: 960px) {
  .weather_sub_area h3.contents_h3 { font-size: 2.6rem; }
}

/* 情報カメラ */
section.info-cam ul.cam-list {
  margin-top: 2%;
  margin-inline: auto;
}
section.info-cam ul.cam-list li + li {
  margin-top: 5%;
}
section.info-cam ul.cam-list li a {
  color: #222222;
}
section.info-cam ul.cam-list li a .place {
  display: block;
  margin-top: 0.2em;
  text-align: center;
  font-weight: bold;
}
section.info-cam .page-transition a.btn_s {
  display: flex;
  align-items: center;
  width: 100%;
  min-width: inherit;
  max-width: 250px;
  margin-top: 5%;
  margin-inline: auto;
  padding: 0 35px 0 17px;
  border-radius: 100vh;
  line-height: 1.2;
}
@media print, screen and (min-width: 520px) {
  section.info-cam ul.cam-list { width: 90%; }
  section.info-cam .page-transition a.btn_s { height: 50px; }
}

/* 関連リンクバナー */
section.related-pages ul.banner-list {
  margin-top: 2%;
}
section.related-pages ul.banner-list li + li {
  margin-top: 8%;
}


/* ==============================================
 ウェザーセンター
================================================= */
/* about */
.weather_main_area > section.weathercenter {
  margin-top: 8%;
}
section.weathercenter > * {
  width: 96%;
  margin-inline: auto;
}
section.weathercenter h2 {
  margin-top: 0;
}
section.weathercenter .about {
  margin-top: 5%;
}
section.weathercenter .about .ttl {
  margin-bottom: 0.4em;
  color: #0f9ec2;
  font-size: 1.8rem;
  font-weight: bold;
  line-height: 1.5;
}
section.weathercenter .about .photo-gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  width: 100%;
  margin-top: -2%;
}
section.weathercenter .about .photo-gallery * {
  box-sizing: border-box;
}
section.weathercenter .about .photo-gallery > img {
  width: 48%;
  margin-top: 3%;
  border: 3px solid #C4E4ED;
}
section.weathercenter .about .original-forecast {
  margin-top: 8%;
}
section.weathercenter .about .original-forecast p + p {
  margin-top: 0.8em;
}
@media print, screen and (min-width: 520px) {
  .weather_main_area > section.weathercenter { margin-top: 0; }
  section.weathercenter > * { width: 100%; }
  section.weathercenter .about .original-forecast { margin-top: 6%; }
}
@media print, screen and (min-width: 960px) {
  section.weathercenter .about .ttl { font-size: 2.0rem; }
  section.weathercenter .about .photo-gallery { margin-top: 0; }
  section.weathercenter .about .photo-gallery > img { width: 31%; margin-top: 2%; }
  section.weathercenter .about .original-forecast { margin-top: 5%; }
}
@media print, screen and (min-width: 1280px) {
  section.weathercenter .about .original-forecast { margin-top: 4%; }
}

/* forecaster */
section.weathercenter .forecaster {
  margin-top: 12%;
}
section.weathercenter .forecaster h3 {
  padding: 0.1em 0.6em;
  background-color: #0f9ec2;
  border-radius: 5px;
  color: #ffffff;
  font-size: 2.1rem;
  font-weight: bold;
}
section.weathercenter .forecaster ul.caster-list * {
  box-sizing: border-box;
}
section.weathercenter .forecaster ul.caster-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: -2%;
  font-size: 1.5rem;
}
section.weathercenter .forecaster ul.caster-list li {
  margin-top: 7%;
  padding: 5% 6%;
  border: 1px solid #ababab;
  border-radius: 10px;
  background-color: #ffffff;
}
section.weathercenter .forecaster ul.caster-list li img {
  width: 80%;
  margin: 0.4em auto;
}
section.weathercenter .forecaster ul.caster-list li .name {
  text-align: center;
}
section.weathercenter .forecaster ul.caster-list li span {
  display: block;
  line-height: 1.2;
}
section.weathercenter .forecaster ul.caster-list li .name span.ja {
  margin-bottom: 0.1em;
  color: #0f9ec2;
  font-size: 2.3rem;
  font-weight: bold;
}
section.weathercenter .forecaster ul.caster-list li .name span.en {
  color: #ababab;
  font-size: 1.3rem;
}
section.weathercenter .forecaster ul.caster-list li .comment {
  border-block: 1px dashed #ababab;
  margin-block: 0.5em;
  padding-block: 0.5em;
}
@media print, screen and (min-width: 520px) {
  section.weathercenter .forecaster h3 { font-size: 2.3rem; }
  section.weathercenter .forecaster ul.caster-list { justify-content: space-between; margin-top: -1%; }
  section.weathercenter .forecaster ul.caster-list li { width: 47.5%; margin-top: 5%; padding: 2% 3%; }
  section.weathercenter .forecaster ul.caster-list li img { width: 90%; }
  section.weathercenter .forecaster ul.caster-list li .name span.ja { font-size: 2.0rem; }
}
@media print, screen and (min-width: 960px) {
  section.weathercenter .forecaster h3 { font-size: 2.5rem; }
}
@media print, screen and (min-width: 1280px) {
  section.weathercenter .forecaster h3 { font-size: 2.7rem; }
  section.weathercenter .forecaster ul.caster-list { margin-top: -2%; }
  section.weathercenter .forecaster ul.caster-list li { width: 31%; }
  section.weathercenter .forecaster ul.caster-list li img { width: 100%; }
  section.weathercenter .forecaster ul.caster-list li:nth-child(3n+2):last-child { margin-right: 34.5%; }
}


/* ==============================================
 専門天気図
================================================= */
.weather_main_area > section.pro-weather {
  margin-top: 8%;
}
section.pro-weather > * {
  width: 96%;
  margin-inline: auto;
}
section.pro-weather h2 {
  margin-top: 0;
}
@media print, screen and (min-width: 520px) {
  .weather_main_area > section.pro-weather { margin-top: 0; }
  section.pro-weather > * { width: 100%; }
}

/* intro */
section.pro-weather .intro {
  margin-top: 5%;
}
section.pro-weather .intro p + p {
  margin-top: 0.8em;
}

/* 天気図リスト */
section.pro-weather > section {
  margin-top: 12%;
}
section.pro-weather > section h3 {
  margin-bottom: 0.7em;
  padding: 0.1em 0.6em;
  background-color: #0f9ec2;
  border-radius: 5px;
  color: #ffffff;
  font-size: 2.1rem;
  font-weight: bold;
}
section.pro-weather > section ul.chart-list {
  margin-top: 25px;
  border-top: 1px solid #999999;
}
section.pro-weather > section h3 + ul.chart-list {
  margin-top: 15px;
}
section.pro-weather > section ul.chart-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  padding-block: 15px;
  border-bottom: 1px solid #999999;
}
section.pro-weather > section ul.chart-list li .ttl {
  width: 100%;
}
section.pro-weather > section ul.chart-list li .ttl::before {
  content: "";
  display: inline-block;
  width: 0.8em;
  height: 0.8em;
  margin-right: 0.25em;
  border-radius: 3px;
  background-color: #222222;
}
section.pro-weather > section ul.chart-list li .links {
  display: flex;
  justify-content: flex-start;
  width: 100%;
}
section.pro-weather > section ul.chart-list li .links a.chart-btn {
  display: block;
  padding: 0.1em 0.5em;
  border-radius: 3px;
  color: #ffffff;
  text-decoration: none;
  margin-block: 0.4em;
}
section.pro-weather > section ul.chart-list li .links a.chart-btn:hover,
section.pro-weather > section ul.chart-list li .links a.chart-btn:active {
  opacity: 0.7;
}
section.pro-weather > section ul.chart-list li .links a.chart-btn.blue {
  background-color: #2A5CB0;
}
section.pro-weather > section ul.chart-list li .links a.chart-btn.black {
  background-color: #666666;
}
section.pro-weather > section ul.chart-list li .links a.chart-btn + a.chart-btn {
  margin-left: 0.5em;
}
section.pro-weather > section ul.chart-list li a:not(.chart-btn) {
  color: #222222;
  text-decoration: none;
}
section.pro-weather > section ul.chart-list li a:not(.chart-btn):hover,
section.pro-weather > section ul.chart-list li a:not(.chart-btn):active {
  text-decoration: underline;
}
section.pro-weather > section.chart-archive p.attention {
  margin-top: 40px;
  padding: min(4%, 25px);
  border: 2px solid #d70b24;
  background: #ffffff;
}
@media print, screen and (min-width: 520px) {
  section.pro-weather > section h3 { font-size: 2.3rem; }
}
@media print, screen and (min-width: 960px) {
  section.pro-weather > section h3 { font-size: 2.5rem; }
  section.pro-weather > section ul.chart-list li { justify-content: space-between; }
  section.pro-weather > section ul.chart-list li .ttl {  width: calc(100% - 240px); }
  section.pro-weather > section ul.chart-list li .links { justify-content: flex-end; width: 240px; }
}
@media print, screen and (min-width: 1280px) {
  section.pro-weather > section { margin-top: 10%; }
  section.pro-weather > section h3 { font-size: 2.7rem; }
}


/* ==============================================
 あなたの街はどの地域？
================================================= */
section.place > img {
  width: 100%;
}