/*
Theme Name: ja-toyamashi Child
Theme URI: 
Template: ja-toyamashi
Description: 
Author: 
Tags: 
Version: 0.6.0
*/
/**********基本構成**********/
/*はみ出し禁止*/
* {
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  -o-box-sizing: border-box !important;
  -ms-box-sizing: border-box !important;
  box-sizing: border-box !important;
}

img {
  display: block;
}

p {
  font-size: 16px;
}
@media screen and (max-width: 767px) {
  p {
    font-size: 16px;
  }
}

body a {
  text-decoration: none;
}

a {
  color: #333333;
}

a:hover {
  color: #666666;
}

h1,
h2,
h3,
h4,
h5 {
  border: none;
  margin: 0 0 16px 0;
  padding: 0 0 0 0;
}

h1::after,
h2::after,
h3::after,
h4::after,
h5::after {
  border-bottom: none;
}

ul {
  margin: 0;
  padding: 0;
  list-style-type: none;
}

li {
  margin-bottom: 16px;
  font-size: 16px;
}

dl {
  margin: 0;
  padding: 0;
}
dt {
  margin: 0;
  padding: 0;
  border: none;
  line-height: 1.7;
  font-size: 16px;
}
dd {
  margin: 0;
  padding: 0;
  border: none;
  line-height: 1.7;
  font-size: 16px;
}

table tbody tr th {
  font-size: 16px;
  border-color: #ccc;
  background-color: #00a75b;
  color: #fff;
}

table tbody tr td {
  font-size: 16px;
  border-color: #ccc;
}

figure {
  margin: 0;
}

/*プライバシーポリシー*/
.pp-content {
  margin-top: 50px;
}

.pp-content h3 {
  font-size: 34px;
  font-weight: bold;
  padding: 0;
  margin: 0;
  margin-bottom: 25px;
}

@media screen and (max-width: 767px) {
  .pp-content h3 {
    font-size: 26px;
  }
}

/*リンク先の幅の調整*/
/* section:before {
  content: "";
  display: block;
  height: 100px;

  margin-top: -100px;

  visibility: hidden;
} */

.box {
  padding-bottom: 50px;
  /* padding-bottom: 50px; */
}
@media screen and (max-width: 767px) {
  .box {
    padding-bottom: 25px;
  }
}

/*画面幅いっぱい*/
.full_screen {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
}

.harf_screen {
  margin-right: calc(50% - 45vw);
  margin-left: calc(50% - 45vw);
}

/*背景色のはみ出し*/
.over_wide {
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  padding-right: calc(50vw - 50%);
  padding-left: calc(50vw - 50%);
}

.page-header {
  display: none;
}

.site-footer-copyright p:nth-of-type(2) {
  display: none;
}

.site-header.site-header--layout--nav-float {
  display: none;
}
/**********メインcss**********/
/* --- スライドショー設定 --- */
.img-frame {
  position: relative;
  width: 100vw;
  aspect-ratio: 1920 / 920;
  margin: 0 auto;
  overflow: hidden;
  background-color: #000;
}

@media screen and (max-width: 767px) {
  .img-frame {
    aspect-ratio: 920 / 1920;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .img-frame {
    aspect-ratio: 1024 / 1366;
  }
}

/* 1. aタグ自体を「スライドの箱」にする */
.img-frame a.img-00 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block; /* リンクを全面に広げる */
  opacity: 0; /* 最初は透明 */
  z-index: 1;
  transition: opacity 0.8s ease-in-out;
  pointer-events: none;
}

/* 2. activeが付いたaタグだけを表示 */
.img-frame a.img-00.active {
  opacity: 1 !important;
  z-index: 5 !important;
  pointer-events: auto; /* クリックを有効化 */
}

/* 3. 中の画像は常に「100%表示」に固定 */
/* これでimgタグにクラスを付ける必要がなくなります */
.img-frame a.img-00 img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover;
  display: block;
  opacity: 1 !important; /* 親(a)がactiveなら必ず見える */
}

/* 4. 矢印ボタンを最前面へ */
.img-frame .prev-btn,
.img-frame .next-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 20;
  padding: 15px 20px;
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: none;
  cursor: pointer;
}
.img-frame .prev-btn {
  left: 10px;
}
.img-frame .next-btn {
  right: 10px;
}

/**/

.top-slide .full_screen {
  position: relative;
}

.top-slide .header {
  display: grid;
  grid-template-columns: min(19.63vw, 260px) 1fr auto;
  position: absolute;
  z-index: 20;

  width: 100vw;
  width: 95%;

  top: 0;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

@media screen and (max-width: 767px) {
  .top-slide .header {
    display: block;
    width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .top-slide .header {
    align-items: center;
  }
}

.top-slide .header h1 {
  margin: 0;
  background: #ffffffcf;
}

@media screen and (max-width: 767px) {
  .top-slide .header h1 {
    display: flex;
    align-items: center;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .top-slide .header h1 {
    display: flex;
    align-items: center;
    height: 100%;
  }
}

.top-slide .header h1 p {
  display: none;
}

@media screen and (max-width: 767px) {
  .top-slide .header h1 p {
    display: block;
    margin: 0;
    background: #db691c;
    color: #fff;
    padding: 0.5em;
  }
}

.top-slide .header h1 img {
  padding-left: 0.5em;
  padding-right: 0.5em;
}
@media screen and (max-width: 767px) {
  .top-slide .header h1 img {
    width: 30%;
    padding: 0.5em;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .top-slide .header h1 img {
  }
}

.top-slide .header nav {
  /* grid-column: 3 / 4; */
}

@media screen and (max-width: 767px) {
  .top-slide .header nav {
    display: none;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .top-slide .header nav {
    grid-column: auto;
  }
}

.mv-banner {
  position: absolute;
  bottom: -20px;
  left: 0;
  z-index: 15;
  width: 100%;
  padding-inline: clamp(1.6rem, 0.7578947368rem + 3.5929824561vw, 4.8rem);
  display: none;
}

.mv-banner hr {
  border: 1px solid #e5e5e5;
  margin-bottom: 25px;
}

.mv-banner > ul {
  display: flex;
  justify-content: space-between;
  align-items: stretch;
  display: grid;
  grid-auto-flow: column;
  grid-template-columns: repeat(5, 20%);
  gap: 10px;
}

.mv-banner > ul > li {
  border-radius: 10px;
  border-top-left-radius: 48px;
  background-color: #fff;
  /* width: 18%; */
  margin: 0;
  padding: 25px;

  transition: all 0.3s ease;
}

.mv-banner > ul > li:hover {
  transform: translateY(-20px);
}

.mv-banner > ul > li:hover .mv-bnr-item .mv-bnr-content p {
  color: #00b050;
}

/* 1. アニメーションの定義 */
@keyframes color-flash {
  /* アニメーション開始時 (0%) と終了時 (100%) は黒 */
  0% {
    border-color: #000; /* 黒 */
  }
  /* アニメーションの中間点 (50%) は緑 */

  100% {
    border-color: #00b050;
  }
}

.mv-banner > ul > li:hover .mv-bnr-content div.stickarrow {
  border-color: #00b050;
}

.mv-banner > ul > li:hover .mv-bnr-content div.stickarrow::after {
  border-color: #00b050;
  /* border-color: #ff9100; */
  opacity: 0.2;
}

.mv-banner > ul > li > a {
  display: block;
  height: 100%;
  text-decoration: none;
}

.mv-banner .mv-bnr-item {
  display: flex;
  flex-direction: column;

  height: 100%;
  /* align-items: center; */
}

.mv-banner .mv-bnr-item > div.pic01 {
  /* background: url(http://nannaru1.xsrv.jp/ja-toyamashi/wp-content/uploads/ico-topics.png)
    left 5px top 15px no-repeat; */
  background-size: 55px auto;
  height: 85px;
  flex-shrink: 0;
  width: 100%;
}

.mv-banner .mv-bnr-content > div.pic02 {
  /* background: url(http://nannaru1.xsrv.jp/ja-toyamashi/wp-content/uploads/arrow-g_03.png)
    left 5px top 15px no-repeat; */
  background-size: 90px auto;
  height: 110px;
  flex-shrink: 0;
  width: 100%;
}

.mv-banner .mv-bnr-content div.stickarrow {
  width: 25px;
  height: 10px;
  border-bottom: 2px solid #000;
  border-right: 2px solid #000;
  transform: skew(45deg);
  margin: 1em;

  /* 擬似要素の基準点とする */
  position: relative;
  /* 矢印（境界線）の色が擬似要素の枠線の上に表示されるように、z-indexを設定 */
  z-index: 2;
}

/* 擬似要素で四角い枠を作成 */
.mv-banner .mv-bnr-content div.stickarrow::after {
  content: "";
  position: absolute;
  top: -10px;
  left: -10px; /* 左方向への調整 */
  width: 45px; /* 矢印(25px) + 左右の余白 */
  height: 30px; /* 矢印(10px) + 上下の余白 */

  /* 枠線自体のスタイル */
  border: 1px solid #000; /* 枠線の色と太さ */
  border-radius: 5px; /* 角丸 (任意) */

  /* 矢印に適用しているskewを打ち消す、または異なる形にするために transform: none; を指定 */
  /* ここでは四角い枠にしたいので skew を解除 */
  transform: skew(-45deg);

  background-color: #00b050;
  opacity: 0;

  /* 矢印の境界線の下に隠す */
  z-index: 1;

  /* 枠線の色をアニメーションさせるためのトランジション */
  transition: border-color 0.3s ease-in-out, opacity 0.3s ease-in-out;
}

.mv-bnr-content {
  display: flex;
  flex-direction: column;
  /* align-items: center;  */

  /* p要素の行数変化を吸収するために、残りのスペースを全て確保 */
  flex-grow: 1;

  justify-content: space-around;
}

.mv-banner .mv-bnr-content > p {
  /* ★ セレクタ修正済み */
  margin: 0;
  /* padding: 5px 10px;  */
  text-align: center;

  /* p要素の行数が変わっても全体が崩れないように設定 */
  flex-shrink: 0; /* p要素の基本の高さから縮小しない */
  flex-grow: 1; /* p要素を拡大して高さを均一にしたい場合はこれを設定 */
  font-size: 20px;
}

/**/
.top-sec {
  padding: 0 50px;
  margin-top: 80px;
}

@media screen and (max-width: 767px) {
  .top-sec {
    margin-top: 50px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .top-sec {
    margin-top: 50px;
    padding: 0;
  }
}

.top-sec > .top-sec-box {
  padding: 50px;
  padding-top: 80px;
  background-color: #f7f3eb;
  border-radius: 16px;
}

@media screen and (max-width: 767px) {
  .top-sec > .top-sec-box {
    padding: 50px 15px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .top-sec > .top-sec-box {
    padding: 50px;
  }
}

/**/
.top-look .top-sec {
  padding: 0;
  margin-top: 0;
}

.top-sec > .top-sec-box.top-look-box {
  display: grid;
  grid-template-columns: 350px 1fr;
  padding: 5em 50px;
}

@media screen and (max-width: 767px) {
  .top-sec > .top-sec-box.top-look-box {
    display: flex;
    flex-wrap: wrap;
    padding: 50px 15px;
    border-radius: 0;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .top-sec > .top-sec-box.top-look-box {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .top-look-box {
    grid-template-columns: minmax(20%, 200px) 1fr;
  }
}

@media screen and (max-width: 767px) {
  .top-look-box > div {
    width: 100%;
  }
}

.top-look-box div h2 {
  text-align: center;
}

@media screen and (max-width: 767px) {
  .top-look-box .top-look-icon-wrapper {
    display: none;
  }
}

.top-look-box > ul {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  align-items: stretch;
  justify-content: space-between;
}

@media screen and (max-width: 767px) {
  .top-look-box > ul {
    display: block;
    width: 100%;
  }
}

.top-look-box > ul > a,
.top-look-box > ul > span {
  width: calc((100% - 32px) / 3);
}

.look-box-lst > a > li,
.look-box-lst > span > li {
  margin: 0;
  height: 100%;
}

@media screen and (max-width: 767px) {
  .look-box-lst > a > li,
  .look-box-lst > span > li {
    margin: 0;
    height: auto;
  }
}

@media screen and (max-width: 767px) {
  .look-box-lst :not(li:last-child) {
    margin-bottom: 10px;
  }
}

.look-box-lst a li .look-item,
.look-box-lst span li .look-item {
  padding: 15px 25px;
  background-color: #fff;
  border-radius: 10px;
  min-height: 12vh;
  height: 100%;
}

.look-box-lst li:active .look-item {
  background-color: #efefef;
  transition: background-color 0.1s;
}

.look-box-lst li p {
  margin: 0;
}

.look-box-lst li:hover div > p.num,
.look-box-lst li:hover div > h3 {
  color: #00a75b;
}

.look-box-lst li a:hover h3 {
  color: #00a75b;
}

.look-box-lst li:hover h3 span {
  color: #000;
}

.look-box-lst .look-item h3 {
  font-size: 16px;
  margin: 0;
}

.look-box-lst .look-item .ttl {
  font-size: 14px;
}

.exception .look-item :not(a:last-child) h3 {
  margin-bottom: 0.5em;
}

.top-look-icon-wrapper {
  position: relative;
  width: 100%;
  height: 100%;
}

.top-look-icon-wrapper,
.top-look-icon {
  pointer-events: none; /* マウスイベントを透過させて下のリストに届かせる */
}

/* アイコン自体の初期スタイル */
.top-look-icon {
  width: 100%;
  height: 100%;
  /* 初期状態は非表示 */
  opacity: 0;
  transition: opacity 0.3s ease;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.top-look-icon.icon-01 {
  background-image: url("https://ja-toyamashi.or.jp/wordpress/wp-content/uploads/icon-oshirase.png");
}
.top-look-icon.icon-02 {
  background-image: url("https://ja-toyamashi.or.jp/wordpress/wp-content/uploads/icon-okane.png");
}
.top-look-icon.icon-03 {
  background-image: url("https://ja-toyamashi.or.jp/wordpress/wp-content/uploads/icon-bud.png");
}
.top-look-icon.icon-04 {
  background-image: url("https://ja-toyamashi.or.jp/wordpress/wp-content/uploads/icon-ine.png");
}
.top-look-icon.icon-05 {
  background-image: url("https://ja-toyamashi.or.jp/wordpress/wp-content/uploads/icon-gs.png");
}
.top-look-icon.icon-06 {
  background-image: url("https://ja-toyamashi.or.jp/wordpress/wp-content/uploads/icon-phone.png");
}

.top-look-icon.is-active {
  opacity: 1;
}

/**/

/**/
.ftrd-bnr .filter {
  position: relative;
  z-index: 0;
  overflow: hidden;

  /* display: grid; */
  grid-template-columns: 1fr 8fr;
  padding: 5em 10em;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .ftrd-bnr .filter {
    display: block;
    padding: 2.5em 5em;
  }
}

@media screen and (max-width: 767px) {
  .ftrd-bnr .filter {
    padding: 50px 15px;
    display: block;
  }
}

.ftrd-bnr .filter:before {
  content: "";
  /* background-image: url(http://nannaru1.xsrv.jp/ja-toyamashi/wp-content/uploads/ae6aee31178f0a747c6587693ae67dd7.png);
  background-image: url(http://ja-toyamashi.or.jp/wordpress/wp-content/uploads/ひまわり畑2-1.png); */
  background-image: url(https://ja-toyamashi.or.jp/wordpress/wp-content/uploads/ひまわり畑2-1.png);
  position: absolute;
  top: -3px;
  bottom: -3px;
  left: -3px;
  right: -3px;
  filter: blur(10px);
  z-index: -1;
}

.ftrd-bnr .filter .ttl {
  color: #fff;
}

.ftrd-bnr-box {
  display: flex;
  border-radius: 16px;
  overflow: hidden;
  align-items: stretch;
}

@media screen and (max-width: 767px) {
  .ftrd-bnr-box {
    display: block;
    border-radius: 0;
  }
}

.ftrd-bnr-box > li {
  margin: 0;
  width: 50%;
  display: flex;
  flex-direction: column;
}

@media screen and (max-width: 767px) {
  .ftrd-bnr-box > li {
    width: 100%;
    border-radius: 16px;
    overflow: hidden;
  }
  .ftrd-bnr-box > li:first-child {
    margin-bottom: 1em;
  }
}

.ftrd-bnr-box > li > a {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .ftrd-bnr-box > li > a {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
}

.ftrd-bnr-box .unit-heading {
  background-color: #fff;
  margin-bottom: 0;
  font-size: 1.25em;
}

.ftrd-bnr-box .pds-txt {
  background-color: #fff;
  padding: 1em;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

@media screen and (max-width: 767px) {
  .ftrd-bnr-box .pds-txt div p {
    margin: 0;
  }
}

.ftrd-bnr-box .pds-txt p > span {
  margin: auto;
  display: block;
  text-align: center;
  width: 50%;
}

.ftrd-bnr-box > li figure {
  overflow: hidden;
}

.ftrd-bnr-box > li figure img {
  transition: all cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.4s;
  transform: scale(1);
}

.ftrd-bnr-box > li:hover figure img {
  transform: scale(1.04);
}

/**/

/**/

.top-sec.topic3 {
  margin-top: 0;
  padding: 0;
  /* background: #f7f3eb; */
  /* padding-top: 5em; */
}

@media screen and (max-width: 767px) {
  .top-sec.topic3 {
    padding-top: 0;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .top-sec.topic3 > div {
    height: 100%;
  }
}

@media screen and (max-width: 767px) {
  .top-sec.topic3 > div {
    height: 100%;
  }
}

.top-sec.topic3 .filter {
  position: relative;
  z-index: 0;
  overflow: hidden;

  /* display: grid; */
  /* grid-template-columns: 1fr 4fr; */
  padding: 5em;
  background-color: #f7f3eb;
  margin-right: calc(50% - 50vw);
  margin-left: calc(50% - 50vw);
  border-radius: 16px;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .top-sec.topic3 .filter {
    display: block;
    padding: 4.5em 5em;
    border-radius: 0;
  }
}

@media screen and (max-width: 767px) {
  .top-sec.topic3 .filter {
    padding: 50px 15px;
    display: block;
    border-radius: 0;
  }
}

.top-sec.topic3 .filter .ttl {
  /* border: 1px solid #00000008; */
  /* background: #eee9df; */
  border-radius: 10px;
  text-align: center;
  /* margin: auto; */
  /* width: 20%; */
  /* margin-bottom: 2em; */
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  .top-sec.topic3 .filter .ttl {
    width: 100%;
  }
}

.top-sec.topic3 .filter .ttl > p {
  margin: 0;
}

.top-sec.topic3 .filter .ttl > p:first-child {
  font-size: 30px;
  /* font-weight: bold; */
}

@media screen and (max-width: 767px) {
  .top-sec.topic3 .filter .ttl > p:first-child {
    font-size: 22px;
  }
}

.top-sec.topic3 .top-sec-box {
  /* padding-top: 80px; */
  /* padding-bottom: 80px; */
}

@media screen and (max-width: 767px) {
  .top-sec.topic3 .top-sec-box {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .top-sec.topic3 .top-sec-box {
    padding-top: 50px;
    padding-bottom: 50px;
  }
}

.top-sec.topic3 .top-sec-box {
  display: flex;
  justify-content: space-between;
  margin-right: calc(50% - 44vw);
  margin-left: calc(50% - 44vw);
}

@media screen and (max-width: 767px) {
  .top-sec.topic3 .top-sec-box {
    flex-direction: column;
    padding: 0;
  }
}

@media screen and (max-width: 767px) {
  .top-sec.topic3 > ul {
    display: block;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .top-sec.topic3 > ul {
    justify-content: space-between;
  }
}

.top-sec.topic3 .top-sec-box > li {
  width: 30%;
  border-radius: 16px;
  background-color: #fff;
  margin: 0;
}

@media screen and (max-width: 767px) {
  .top-sec.topic3 .top-sec-box > li {
    width: 100%;
  }
}

.top-sec.topic3 .top-sec-box > li > div {
  display: flex;
  flex-direction: column;
}

.top-sec.topic3 .top-sec-box > li .img-box {
  overflow: hidden;
  border-radius: 16px 16px 0 0;
}

.top-sec.topic3 .top-sec-box > li .img-box img {
  transition: all cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.4s;
  transform: scale(1);
}

@media (hover: hover) {
  .top-sec.topic3 .top-sec-box > li:hover .img-box img {
    transform: scale(1.04);
  }
}

.top-sec.topic3 .top-sec-box > li .exp-box {
  padding: 1em;
}

@media (hover: hover) {
  .top-sec.topic3 .top-sec-box > li .exp-box p.subttl {
    transition: all cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.4s;
    transform: scale(1);
  }
}

@media (hover: hover) {
  .top-sec.topic3 .top-sec-box > li:hover .exp-box p.subttl {
    transition: all cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.4s;
    transform: scale(1.04);
  }
}

.top-sec.topic3 .top-sec-box > li .exp-box > p {
  margin-bottom: 16px;
}

.top-sec.topic3 .top-sec-box > li .subttl {
  text-align: center;
  border-radius: 16px;
  padding: 0.5em 0;
  font-weight: bold;
}

.top-sec.topic3 .top-sec-box > li.gas .subttl {
  background: #c00;
}

.top-sec.topic3 .top-sec-box > li.sns .subttl {
  background: #fff;
  color: #000;
}

@media (hover: hover) {
  .top-sec.topic3 .top-sec-box > li.gas:hover .btn-flow,
  .top-sec.topic3 .top-sec-box > li.sns:hover .btn-flow,
  .top-sec.topic3 .top-sec-box > li.emg:hover .btn-flow {
    color: #fff;
  }
}

@media (hover: hover) {
  .top-sec.topic3 .top-sec-box > li.gas:hover .btn-flow::before,
  .top-sec.topic3 .top-sec-box > li.sns:hover .btn-flow::before,
  .top-sec.topic3 .top-sec-box > li.emg:hover .btn-flow::before {
    width: 100%;
    left: 0;
    right: auto;
  }
}

@media (hover: hover) {
  .top-sec.topic3 .top-sec-box > li.gas .btn-flow::before,
  .top-sec.topic3 .top-sec-box > li.sns .btn-flow::before,
  .top-sec.topic3 .top-sec-box > li.emg .btn-flow::before {
    left: auto;
    right: 0;
  }
}

.top-sec.topic3 .top-sec-box > li.sns .subttl {
  background: #fff;
}

@media (hover: none) {
  .top-sec.topic3 .top-sec-box > li.sns .sns-link-box:active {
    background-color: #efefef;
    transition: background-color 0.1s;
  }
}

.top-sec.topic3 .top-sec-box > li.emg .subttl {
  background: #ff6700;
}

.top-sec.topic3 .top-sec-box > li.gas p.adress {
  font-size: 16px;
  padding: 0 2em;
  margin-bottom: 1em 0;
}

.top-sec.topic3 .top-sec-box > li.gas p.note {
  color: red;
  text-align: center;
  font-weight: bold;
}

.top-sec.topic3 .top-sec-box > li.sns {
  background: #fff;
  background: linear-gradient(
    180deg,
    rgba(255, 255, 255, 1) 0%,
    rgba(181, 158, 136, 1) 100%
  );
  /* position: relative; */
}

.top-sec.topic3 .top-sec-box > li.sns > p {
  position: absolute;
  margin: 0;
  background: #fff;
  border-radius: 50%;
  width: 120px;
  top: 20%;
  left: 50%;
  transform: translateX(-50%);
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
}

@media screen and (max-width: 767px) {
  .top-sec.topic3 > ul > li.sns > p {
    top: 10%;
    width: 90px;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .top-sec.topic3 > ul > li.sns > p {
    width: 40%;
  }
}

.top-sec.topic3 .top-sec-box > li.sns > div {
  /* display: flex; */
  flex-direction: column;

  /* display: grid; */
  /* flex-direction: column; */
  /* grid-template-rows: 1fr 2fr; */
  /* grid-auto-flow: column; */
}

.top-sec.topic3 .top-sec-box > li.sns div.img-box > img {
  /* height: 168px; */
  width: 100%;
  object-fit: cover;
  /* border-radius: 16px 16px 0 0; */
}

@media screen and (max-width: 767px) {
  .top-sec.topic3 .top-sec-box > li.sns div.img-box > img {
    height: auto;
  }
}

.top-sec.topic3 .top-sec-box > li.sns div.sns-link {
  padding: 1em;
  /* display: flex; */
  flex-direction: column;
  justify-content: center;
}

@media screen and (max-width: 767px) {
  .top-sec.topic3 .top-sec-box > li.sns div.sns-link {
    display: block;
  }
}

ul > li.sns div.sns-link > p {
  /* margin-bottom: 2em;
  text-align: center;
  font-size: 22px; */
}

.top-sec.topic3 .top-sec-box > li.sns .sns-link-box {
  display: flex;
  align-items: center;
  margin-bottom: 1em;
  background: #fff;
  border-radius: 16px;
  padding: 5px;
}

.top-sec.topic3 .top-sec-box > li.sns .sns-link-box div:first-child {
  /* margin: 2em 0; */
  text-align: center;
  font-size: 22px;
  width: 80%;
}

.top-sec.topic3 .top-sec-box > li.sns .sns-link-box div:last-child {
  width: 20%;
}

.top-sec.topic3 .top-sec-box > li.sns .sns-link > ul > li img {
  width: 50px;
  margin: 0 0 0 auto;
}

.top-sec.topic3 > ul > li.emg a {
  color: #000;
}

li.emg > div {
  /* background-color: #363d42; */
  /* padding: 1em; */
  /* height: 100%; */
  border-radius: 16px;
  color: #db691c;
  color: #fff;
  /* display: flex; */
  flex-direction: column;
}

li.emg .img-box {
  /* margin: auto; */
  /* width: 100px; */
}

li.emg > div > p {
  text-align: center;
}

li.emg ul li {
  /* background: #ff6700; */
  padding: 10px;
  border-radius: 10px;
  margin: 0;
  color: #000;
}

@media (hover: none) {
  li.emg ul li:active {
    background-color: #efefef;
    transition: background-color 0.1s;
  }
}

li.emg ul li dl {
  border-bottom: 1px dashed #000;
  padding-bottom: 0.5em;
}

li.emg ul li dt {
  margin-bottom: 5px;
  margin-bottom: 5px;
  background: #ff6700;
  color: #fff;
  padding: 5px;
  border-radius: 10px;
}

/**/
/*various information*/
.top-sec.topic3 > div {
  position: relative;
}

.top-sec.topic3 > div:before {
  /* background-image: url(http://nannaru1.xsrv.jp/ja-toyamashi/wp-content/uploads/da64e8a710f70aa1a01f2dfe3292ad92.png);
  background-image: url(http://ja-toyamashi.or.jp/wordpress/wp-content/uploads/景色3-1.png); */
  background-image: url(https://ja-toyamashi.or.jp/wordpress/wp-content/uploads/景色3-1.png);
  background-size: cover;
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  filter: blur(3px);
  z-index: -1;
}
.var-info-cnt {
  display: grid;
  grid-template-columns: 1fr 4fr;
}

@media screen and (max-width: 767px) {
  .var-info-cnt {
    grid-template-columns: 1fr;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .var-info-cnt {
    grid-template-columns: 1fr;
  }
}

.var-info-main {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-radius: 10px;
  background: #fff;
  overflow: hidden;
  display: flex;
  align-items: stretch;
}

@media screen and (max-width: 767px) {
  .var-info-main {
    display: block;
    padding: 1em 0;
  }
}

.var-info-main > a,
.var-info-main > a > div,
.var-info-main > div {
  display: flex;
  flex-direction: column;
  height: 100%;
  flex: 1;
}

@media screen and (max-width: 767px) {
  .var-info-main > a,
  .var-info-main > a > div,
  .var-info-main > div {
    height: auto;
  }
}

@media screen and (max-width: 767px) {
  .var-info-main > :not(*:last-child) {
    margin-bottom: 1em;
  }
}

.var-info-main figure > img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.var-info-main .txt {
  padding: 0 1em;
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.var-info-main > a > div > .icon,
.var-info-main > div > .icon {
  margin: 1em 0;
}

.var-info-main div .icon {
  display: flex;
  justify-content: center;
  align-items: anchor-center;
}

.var-info-main div .icon h3 {
  color: #00a75b;
  text-align: center;
  margin: 0 1em;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .var-info-main div .icon h3 {
    margin: 0;
  }
}

.var-info-main div .icon img {
  width: 40px;
  margin: 0 10px;
}

.var-info-main .txt ul {
  height: 100%;
  display: flex;
  flex-direction: column;
  /* justify-content: space-between; */
  margin: 0;
}

.var-info-main div .txt ul li {
  color: #404040;
  border-left: solid 6px #00a75b;
  border-bottom: solid 2px #dadada;
  background: whitesmoke;
  margin-bottom: 5px;
  line-height: 1.5;
  padding: 0.5em;
  font-weight: bold;
}

.var-info-main .sns .txt ul li a {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.var-info-main .sns .txt ul li a .icon {
  width: 20%;
}

/**/

.home-atn > ul.top-sec-box {
  display: flex;
  /* justify-content: space-between; */
  display: grid;
  grid-auto-flow: column;
  /* ここで「30% 30% 30% 30% 30%」と書くか、repeat() を使います */
  grid-template-columns: repeat(3, 30%);
  gap: 10px;
}

.home-atn > ul.top-sec-box > li {
  /* width: 30%; */
  margin: 0;
  background: #fff;
  padding: 30px;
  border-radius: 16px 16px;
}

.home-atn > ul.top-sec-box > li p.ttl {
  text-align: center;
  color: #00a75b;
}

@media screen and (max-width: 767px) {
  .topnews .top-sec {
    padding: 0;
  }
}

.top-sec-box.top-news {
  background-color: #f7f3eb;
  /* background-color: #6b9dd1; */
  background-color: #fff;
  padding-top: 5em;
}

.top-sec-box.top-news > div {
  border-bottom: 1px solid #e2e2e2;
  position: relative;
  margin-bottom: 15px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topnews h5.ttl-heading {
  margin-bottom: 0;
}

.top-sec-box.top-news > div > p.ichiran {
  font-size: 14px;
  margin: 0;
}

.top-sec-box.top-news > div:after {
  /* content: "";
  position: absolute;
  bottom: -1px;
  left: 0;
  width: 7%;
  height: 3px;
  background: #00a75b; */
}

@media screen and (max-width: 767px) {
  .top-sec-box.top-news > div:after {
    width: 20%;
  }
}

/*投稿表示*/
.top-post-list {
  display: flex;
  justify-content: space-between;
  font-size: 14px;
}

@media screen and (max-width: 767px) {
  .top-post-list {
    display: block;
  }
}

.top-post-list li {
  width: 32%;
  margin: 0;
}

@media screen and (max-width: 767px) {
  .top-post-list li {
    width: 100%;
  }
}

.top-post-list li > a {
  display: flex;
  flex-direction: column;
  height: 100%;
}

@media screen and (max-width: 767px) {
  .top-post-list li > a {
    flex-direction: initial;
    border-bottom: 1px dotted;
    padding: 1em 0;
    height: 200px;
  }
}

.top-post-list a:hover .top-post-meta {
  /* background: #00000005; */
  -webkit-transition: all 0.3s ease;
  transition: all 0.3s ease;
}

.top-post-list a:hover .top-post-title {
  color: #00a75b;
}

.top-post-img {
  margin: auto;
  height: 300px;
  overflow: hidden;
}

@media screen and (max-width: 767px) {
  .top-post-img {
    margin: 0;
    height: auto;
    width: 35%;
  }
}

.top-post-img img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: center;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .top-post-img img {
    object-fit: contain;
  }
}

@media screen and (max-width: 767px) {
  .top-post-img img {
    object-fit: contain;
  }
}

.top-post-list a .top-post-img img {
  transition: all cubic-bezier(0.445, 0.05, 0.55, 0.95) 0.4s;
  transform: scale(1);
}

.top-post-list a:hover .top-post-img img {
  transform: scale(1.04);
}

.top-post-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  padding: 0 10px;
  border-bottom: 1px dotted;
  margin-top: 1em;
  font-size: 16px;
  justify-content: space-between;
  flex-grow: 1;
}

@media screen and (max-width: 767px) {
  .top-post-meta {
    flex-wrap: wrap;
    padding: 0 0 0 10px;
    width: 65%;
    margin-top: 0;
    border-bottom: none;
    font-size: 14px;
    flex-grow: 0;
  }
}

.top-post-meta .category {
  text-align: center;
  /* border: 1px solid; */
  border-radius: 16px;
  padding: 5px 20px;
  color: #fff;
}

@media screen and (max-width: 767px) {
  .top-post-meta .category {
    width: 100%;
  }
}

.top-post-meta .category.cat_info {
  background-color: #1b85fb;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .top-post-meta .category.cat_info {
    width: initial;
  }
}

.top-post-meta .category.cat_finance {
  background-color: #ff70aa;
}

.top-post-meta .data {
  /* width: 50%; */
}

@media screen and (max-width: 767px) {
  .top-post-meta .data {
    width: 100%;
  }
}

.top-post-meta .top-post-title {
  width: 100%;
  margin: 1em 0;
  font-weight: bold;
}
@media screen and (max-width: 767px) {
  .top-post-meta .top-post-title {
    width: 100%;
    padding-left: 0;
    font-size: 16px;
    margin: 0.5em 0 0 0;
  }
}

.top-post-list li a div img {
}

/*SDGs*/
@media screen and (max-width: 767px) {
  .sdgs .full_screen {
    margin-right: initial;
    margin-left: initial;
  }
}

@media screen and (max-width: 767px) {
  .sdgs .top-sec {
    padding: 0;
  }
}

.sdgs-decl {
  text-align: center;
}

@media screen and (max-width: 767px) {
  .sdgs-decl {
    padding-top: 5em;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .sdgs-decl {
    padding-top: 1em;
  }
}

.sdgs-decl p.ttl {
  font-size: 30px;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  .sdgs-decl p.ttl {
    font-size: 16px;
  }
}

.sdgs-decl p img {
  height: 200px;
  margin: auto;
}

.sdgs-decl p.dtl {
  text-align: left;
}

.sdgs-box {
  font-size: 16px;
}

@media screen and (max-width: 767px) {
  .sdgs-box {
    font-size: 15px;
  }
}

.sdgs-box > li {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  margin: 0;
}

@media screen and (max-width: 767px) {
  .sdgs-box > li {
    display: block;
  }
}

.sdgs-box > li:nth-of-type(2n) {
  background-color: #0eb3704f;
}

.sdgs-box > li:last-child {
  border-bottom: 2px solid #00a75b;
}

.sdgs-box > li.headline {
  text-align: center;
  border-top: 2px solid #00a75b;
  border-bottom: 2px solid #00a75b;
  padding: 0.5em 0;
  margin: 0;
  font-weight: bold;
}

@media screen and (max-width: 767px) {
  .sdgs-box > li.headline {
    display: grid;
  }
}

.sdgs-box > :not(li.headline) {
  padding: 1em;
  min-height: 200px;
  align-items: center;
}

@media screen and (max-width: 767px) {
  .sdgs-box > :not(li.headline) {
    height: auto;
    padding: 1.5em 1em;
  }
}

@media screen and (max-width: 767px) {
  .sdgs-box > li.sdgs-box-cnt > :not(div:last-child) {
    margin-bottom: 1em;
  }
}

.sdgs-box > li > div.sdgs-icon {
  display: flex;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  align-items: center;
  justify-content: space-evenly;
}

@media screen and (max-width: 767px) {
  .sdgs-box > li > div.sdgs-icon {
    gap: 50px;
  }
}

.sdgs-box-cnt-ttl-sp {
  display: none;
}

@media screen and (max-width: 767px) {
  .sdgs-box-cnt-ttl-sp {
    display: block;
    font-weight: bold;
  }
}

.sdgs-box > li > div.sdgs-icon > p {
  margin: 0;
  width: 25%;
}

/*下バナー*/

@media screen and (max-width: 767px) {
  .btm-banner .full_screen {
    margin-right: initial;
    margin-left: initial;
  }
}

@media screen and (max-width: 767px) {
  .btm-banner .top-sec {
    padding: 0;
  }
}

.btm-banner .top-sec > .top-sec-box {
  background: #fff;
  padding: 0 0 0 0;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .btm-banner .top-sec > .top-sec-box {
    padding: 0;
  }
}

@media screen and (max-width: 767px) {
  .btm-banner .top-sec > .top-sec-box {
    padding: 0;
  }
}

.btm-banner-list {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 15px;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .btm-banner-list {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media screen and (max-width: 767px) {
  .btm-banner-list {
    grid-template-columns: repeat(1, 1fr);
    gap: 10px;
  }
}

.btm-banner-list > li {
  margin: 0;
  border-radius: 10px;
  overflow: hidden;
}

.btm-banner-list > li > img {
  border-radius: 15px;
  width: 100%;
}

/*サイトマップ*/
.sitemap .top-sec {
  padding: 0;
}

.top-sec > .top-sec-box.sitemap-box {
  padding: 80px 100px;
}

@media screen and (max-width: 767px) {
  .top-sec > .top-sec-box.sitemap-box {
    padding: 50px 15px;
    display: block;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .top-sec > .top-sec-box.sitemap-box {
    padding: 50px;
    gap: 30px;
  }
}

ul.sitemap-cnt {
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 1em;
  font-size: 14px;
  align-items: center;
}

ul.sitemap-cnt:last-child {
  margin-bottom: 0;
}

ul.sitemap-cnt > p {
  width: 100%;
  margin-bottom: 0.5em;
  border-left: 4px solid #00a75b;
  padding-left: 1em;
}

ul.sitemap-cnt > li {
  /* width: 20%; */
  margin: 0;
  margin-bottom: 0;
  padding: 0 0.5em;
  border-right: 1px solid #5b5b5b;
}

/**********メインcss_ここまで**********/

/**********汎用css**********/

/*tableのスクロール↓*/
.table-wrap {
  /*tableの親につける*/
  overflow-x: scroll;
}

.table-wrap table {
  white-space: nowrap;
}

/*画面サイズの100％にする↓*/
.wide_box {
  padding: 0 0 0 0 !important;
  margin-right: calc(((100vw - 100%) / 2) * -1);
  margin-left: calc(((100vw - 100%) / 2) * -1);
  padding: 0 calc((100vw - 100%) / 2);
  -webkit-box-sizing: border-box !important;
  -moz-box-sizing: border-box !important;
  -o-box-sizing: border-box !important;
  -ms-box-sizing: border-box !important;
  box-sizing: border-box !important;
}

@media screen and (max-width: 767px) {
  .wide_box {
    margin: auto 0em;
  }
}

/*スマホのみで改行↓*/
.sp-br {
  display: none;
}

@media screen and (max-width: 767px) {
  .sp-br {
    display: block;
  }
}

/*pcのみで改行↓*/
.pc-br {
  display: none;
}

@media screen and (min-width: 1025px) {
  .pc-br {
    display: block;
  }
}

/*タブレットのみで改行*/
.tb-br {
  display: none;
}

@media (min-width: 768px) and (max-width: 1024px) {
  .tb-br {
    display: block;
  }
}

/* スマホのみ表示 */
@media (min-width: 768px) {
  .only-sp {
    display: none !important;
  }
}

/* タブレットのみ表示 */
@media (max-width: 767px), (min-width: 1025px) {
  .only-tb {
    display: none !important;
  }
}

/* PCのみ表示 */
@media (max-width: 1024px) {
  .only-pc {
    display: none !important;
  }
}

/* PC・タブレットのみ表示 */
@media (max-width: 767px) {
  .only-pc-tb {
    display: none !important;
  }
}

.ta-c {
  text-align: center;
}

.ta-r {
  text-align: right;
}

.fw-b {
  font-weight: bold;
}

.fc-red {
  color: red;
}

.fc-00b050 {
  color: #00b050;
}

.fc-0070c0 {
  color: #0070c0;
}

.fc-eabb00 {
  color: #eabb00;
}

/**/
/*注1、注2…*/
ol.note-list-style {
  list-style-type: none;
  counter-reset: note-counter;
  padding-left: 0;
}

ol.note-list-style li {
  counter-increment: note-counter;
  display: flex;
  margin-bottom: 8px;
}

ol.note-list-style li::before {
  content: "(注" counter(note-counter) ")";
  white-space: nowrap;
  margin-right: 10px;
}
/**/

ul.list-style-disc {
  list-style-type: disc;
  margin-left: 1em;
}

ul.list-style-disc > li {
  margin: 0.5em 0;
}

.bullet-points {
  border: 1px solid #00a75b;
}

.bullet-points > li {
  margin: 0.5em 1em;
}

.bullet-points > p {
  margin: 0;
  padding: 0.5em 0;
  font-weight: bold;
  border-bottom: #00a75b 1px solid;
}

/**/
.bb1bk {
  border-bottom: 2px solid #000;
  padding-bottom: 2px;
}

/**/
.top-map-area {
  grid-template-columns: 1fr 1fr;
  display: flex;
  gap: 3em;
}

@media screen and (max-width: 767px) {
  .top-map-area {
    display: block;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .top-map-area {
    gap: 2em;
  }
}

.top-map-area > div {
  width: 50%;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

@media screen and (max-width: 767px) {
  .top-map-area > div {
    width: 100%;
  }
}

.top-map-area h6 {
  background: #fff;
  padding: 1em;
  display: flex;
  flex-grow: 1;
  justify-content: space-evenly;
  border-left: 4px solid #00a75b;
  border-right: 4px solid #00a75b;
  align-items: center;
}

@media screen and (max-width: 767px) {
  .top-map-area h6 {
    flex-direction: column;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .top-map-area h6 {
    flex-direction: column;
  }
}

@media screen and (max-width: 767px) {
  .top-map-area .right-side h6 > span:first-child {
    margin-bottom: 1em;
  }
}

@media (min-width: 768px) and (max-width: 1024px) {
  .top-map-area .right-side h6 > span:first-child {
    margin-bottom: 0.5em;
  }
}

.top-map-area iframe {
  border-radius: 16px;
  overflow: hidden;
}