@charset "utf-8";
/* ======================
main_visual
====================== */
.main_visual .mainvisual_title_secondary .mainvisual_title_header {
  width: 65%;
}
@media screen and (min-width: 768px) {
  .mainvisual_title_secondary .mainvisual_title_header {
    width: 100%;
  }
  .main_visual .mainvisual_title_secondary .mainvisual_title_header {
    width: 35%;
  }
}
@media screen and (min-width: 1024px) {
  .mainvisual_title_secondary .mainvisual_title_header {
    width: 80%;
  }
  .main_visual .mainvisual_title_secondary .mainvisual_title_header {
    width: 25%;
  }
}
@media screen and (max-width: 767px) {
  .main_visual .mainvisual_title_secondary .mainvisual_title_header {
    transform: translateY(13%);
  }
}
/* ======================
section.box 
====================== */
.section_wrap {
  margin-top: 48px;
}
.left_txt_box,
.right_txt_box {
  display: grid;
  gap: 20px;
}
.grid-area1 h2 {
  text-align: center;
}
.grid-area1 h2 span {
  display: inline-block;
}
.grid-area1 h2 .sub {
  font-size: 70%;
  margin: 0 0.2em;
}
.grid-area1 h2::after {
  content: "";
  display: block;
  background-image: url(../image/260227/ttl_line.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
  width: 100%;
  height: 0;
  padding-top: calc(26 / 690 * 100%);
}
@media screen and (min-width: 1024px) {
  .main_contents {
    width: 90%;
    margin: 0 auto;
    max-width: 1100px;
  }
  .main_contents .section_wrap {
    width: 100%;
  }
  .grid-area1 h2 {
    font-size: 3.2rem;
  }
  section.concept_section.section_wrap {
    margin-top: 48px;
  }
  section.box.section_wrap {
    margin-top: 64px;
  }
  .left_txt_box {
    display: grid;
    gap: 16px 5%;
    grid-template-rows: auto 1fr;
    grid-template-columns: 1fr 60%; /* 右側に画像を配置 */
    grid-template-areas:
      "title image"
      "text image";
  }
  .right_txt_box {
    display: grid;
    gap: 16px 5%;
    grid-template-rows: auto 1fr;
    grid-template-columns: 60% 1fr; /* 左側に画像を配置 */
    grid-template-areas:
      "image title"
      "image text";
  }
  /* 各エリアの設定 */
  .grid-area1 {
    grid-area: title; /* タイトル */
  }
  .grid-area2 {
    grid-area: image; /* 画像 */
  }
  .grid-area3 {
    grid-area: text; /* テキスト */
  }
  .grid-area3 a:hover{
    opacity: 0.7;
  }
  img.view_pc.ttl_2 {
    margin-top: 20px;
    width: 100%;
  }
  h2 img.view_pc {
    width: 70%;
    margin: 0 auto;
  }
}
/* ======================
.nss_btn
====================== */
.nss_btn {
  text-align: center;
  width: 80%;
  margin: 20px auto 0;
  background: #33335d;
  color: #fff;
  font-size: 1.4rem;
  padding: 3% 0%;
  border: double 3px #fff;
}
.nss_btn a {
  color: #fff;
}
/* ======================
.temperature_graph
====================== */
.temperature_graph_area {
  padding: 32px 6% 16px;
  box-sizing: border-box;
  background-color: rgba(240, 240, 240);
}
.temperature_graph_wrap {
  width: 100%;
  bottom: 0;
  max-width: 400px;
  margin: auto;
}
.temperature_graph {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  justify-content: center;
  column-gap: 4%;
  align-items: end;
}

.temperature_item {
  height: 180px;
  background: linear-gradient(to bottom, #b9d7f2 0%, #7cb0db 100%);
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  box-sizing: border-box;
  padding: 0 4px 20%;
  border-radius: 6px;
}
.temperature_item:nth-child(1) {
  height: 94%;
}
.temperature_item:nth-child(3) {
  height: 87%;
}
.temperature_month {
  font-size: 1.6rem;
  color: #ffffff;
  letter-spacing: 0.05em;
}

.temperature_value {
  font-size: 2rem;
  font-weight: bold;
  color: #ffffff;
}

.temperature_unit {
  font-size: 20px;
  margin-left: 4px;
}

.temperature_note {
  text-align: right;
  font-size: 12px;
  color: #333;
  margin-top: 10px;
}
@media screen and (min-width: 768px) {
  .temperature_graph {
    column-gap: 34px;
  }
}
@media screen and (min-width: 1024px) {
  .temperature_graph_wrap {
    margin-bottom: 16px;
  }
  .temperature_graph_area {
    background-color: inherit;
    padding: 0;
  }
}