@charset "utf-8";

@import url('https://fonts.googleapis.com/css2?family=Zen+Kaku+Gothic+New:wght@300;400;500;700;900&family=Rubik:wght@500;600;700&display=swap');

html, body {
	margin: 0;
  font-weight: 500;
  font-family: 'Zen Kaku Gothic New', sans-serif;
}
img {
  max-width: 100%;
  height: auto;
  vertical-align: bottom;
}
p {
  margin: 0;
}
a {
  color: inherit;
  text-decoration: none;
}

.rubik {
  font-family: 'Rubik', sans-serif;
}

@media screen and (min-width: 769px) {
  html, body {
    font-size: calc((var(--width) / 1104) * 10px);
  }
  :root {
    --width: 1104;
  }
  .sp {
    display: none!important;
  }
}
@media screen and (max-width: 1024px) {
  html, body {
    font-size: calc((var(--width) / 750) * 10px);
  }
  :root {
    --width: 750;
  }
  .pc {
    display: none!important;
  }
}

/*------------
  common
------------*/

.container {
  position: relative;
  width: min(110.4rem, 1104px);
  max-width: 1104px;
  margin: 0 auto;
  padding: 0 min(4.0rem, 40px);
}

.fade,
.fade-delay {
  transform: translateY(50px);
  opacity: 0;
  transition: transform 0.5s, opacity 0.5s;
}
.fade._in,
.fade-delay._in {
  transform: translateY(0);
  opacity: 1;
}

@media screen and (max-width: 1024px) {
  .container {
    width: 100%;
    padding: 0;
  }
}

/*
  page-top
------------*/

.page-top {
  position: fixed;
  z-index: 100;
  right: 30px;
  bottom: -200px;
  width: 50px;
  height: 50px;
  transition: bottom 0.8s;
  cursor: pointer;
}

@media screen and (min-width:1024px) {
  .page-top {
    position: fixed;
    width: 64px;
    height: 64px;
  }
}


/*------------
  header
------------*/

/* ヘッダー全体のスタイル */
.header {
  width: 100%;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05); /* 軽く影をつけると浮き出て綺麗です */
  position: sticky; /* 上部に固定する場合 */
  top: 0;
  z-index: 1000;
}

.header__inner {
  max-width: 1200px; /* サイトの最大幅に合わせて調整 */
  margin: 0 auto;
  padding: 15px 20px;
  display: flex;
  align-items: center; /* 縦方向の中央揃え */
}

/* ロゴ */
.header-logo img {
  max-width: 100%; /* 親要素からはみ出さないように */
  height: 30px;
  width: auto;
  display: block;
}

/* ナビゲーション */
.header-nav {
  margin-left: auto; /* ロゴとナビの間を広げる */
}

.header-nav__list {
  display: flex;
  list-style: none;
  gap: 30px; /* メニュー間の余白 */
  margin: 0;
  padding: 0;
}

.header-nav__list a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  font-size: 15px;
  transition: color 0.3s;
}

.header-nav__list a:hover {
  color: #37a2ab; /* ホバー時の色（サイトカラーに合わせて変更してください） */
}

/* お問い合わせボタン（画像を使わない） */
.header-contact {
  margin-left: 30px;
}

.header-contact__button {
  display: inline-block;
  background-color: #333; /* ボタンの背景色 */
  color: #fff !important;
  text-decoration: none;
  padding: 12px 25px;
  border-radius: 5px; /* 角丸 */
  font-weight: bold;
  font-size: 14px;
  transition: background-color 0.3s, transform 0.2s;
}

.header-contact__button:hover {
  background-color: #555; /* ホバー時に少し明るく */
  transform: translateY(-2px); /* 少し浮き上がる演出 */
}

/* スマホ対応（簡易） */
@media (max-width: 1024px) {
  .header-nav {
    display: none; /* スマホではハンバーガーメニューにするのが一般的ですが、一旦非表示 */
	  z-index: 999 !important;
	  
  }
  .header__inner {
    justify-content: space-between;
  }
}


/* --- PC/共通スタイル --- */
.pc-only { display: block; }
.sp-only { display: none; }

/* --- ハンバーガーボタンのスタイル --- */
.hamburger {
  display: none; /* PCでは隠す */
  width: 30px;
  height: 24px;
  position: relative;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1000 !important;
}

.hamburger span {
  display: block;
  position: absolute;
  width: 100%;
  height: 2px;
  background-color: #333;
  transition: all 0.3s;
}

.hamburger span:nth-child(1) { top: 0; }
.hamburger span:nth-child(2) { top: 11px; }
.hamburger span:nth-child(3) { bottom: 0; }

/* --- スマホ時のスタイル（1024px以下） --- */
@media (max-width: 1024px) {
  .pc-only { display: none !important; }
  .sp-only { display: block !important; }
  
  .hamburger {
    position: fixed;
    top: 20px;
    right: 20px;
    display: block;
   z-index: 1000 !important;
  }
	
  .header-logo img {
    height: 32px;
  }

.header-nav {
  display: block !important;
  position: fixed;
  top: 0;
  right: -100%;
  width: 80%;
  height: 100vh;
  
  /* 【修正】背景を少し透けさせる（最後の0.95が不透明度です） */
  background: rgba(255, 255, 255, 0.8); 
  
  /* 【追加】背景をぼかす（これを入れると高級感が出ます） */
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px); /* Safari用 */

  transition: all 0.3s ease;
  z-index: 999;
  padding-top: 80px; 
  box-shadow: -5px 0 15px rgba(0,0,0,0.1);
}

  .header-nav.is-active {
    right: 0;
  }

  .header-nav__list {
    flex-direction: column;
    align-items: center;
    gap: 30px; /* 余白を少し調整 */
    margin: 0;
    padding: 0;
  }

.header .header-contact__button {
    display: inline-block;
    background-color: #333;
    color: #fff !important;
    text-decoration: none;
    /* 【サイズ変更】上下12pxはそのまま、左右を35px（元は25px）に広げました */
    padding: 12px 35px; 
    border-radius: 5px;
    font-weight: bold;
    font-size: 15px; /* 文字も少しだけ大きくするとバランスが良いです */
    
    /* 【ふわっと動き】これですべての変化をなめらかにします */
    transition: all 0.3s ease; 
    
    opacity: 1 !important; 
    box-sizing: border-box; /* サイズ計算を安定させます */
}

  /* 【修正】スマホでもリンクのホバーや色設定をPCから引き継ぐ */
  .header-nav__list a {
    font-size: 18px; /* スマホでは少し大きめが押しやすい */
    padding: 10px;
    display: block;
    width: 100%;
    text-align: center;
   color: #333; /* 文字色 */
    
    /* 【ここに追加】これで色や背景の変化がなめらかになります */
    transition: all 0.3s;
  }
  
  /* スマホ独自のホバー（タップ時）演出が必要な場合 */
.header-nav__list a:active,
  .header-nav__list a:hover {
    color: #37a2ab;
    background-color: rgba(55, 162, 171, 0.05);
  }
	
/* ホバー・タップ時の挙動 */
.header .header-contact__button:hover,
.header .header-contact__button:active,
.header .header-contact__button:focus {
    background-color: #555 !important; /* ふわっとこの色に変わります */
    opacity: 1 !important;            /* 透けないように固定 */
    transform: scale(1.05);           /* 【追加】少しだけ大きくして「押した感」を演出 */
}

  /* ハンバーガーボタンのアニメーション */
  .hamburger.is-active span:nth-child(1) { transform: translateY(11px) rotate(45deg); }
  .hamburger.is-active span:nth-child(2) { opacity: 0; }
  .hamburger.is-active span:nth-child(3) { transform: translateY(-11px) rotate(-45deg); }
}


/*------------
 検索窓
------------*/

/* 検索窓の共通スタイル */
.header-search {
  position: relative;
}

.search-form {
  display: flex;
  align-items: center;
  background-color: #f5f5f5;
  border-radius: 20px;
  padding: 2px 5px 2px 15px;
  border: 1px solid #ddd;
}

.search-input {
  border: none;
  background: transparent;
  outline: none;
  height: 32px;
  width: 150px; /* PCでの幅 */
  font-size: 14px;
}

.search-submit {
  border: none;
  background-color: #37a2ab;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.3s;
}

/* 虫眼鏡アイコンのスタイル（中身は以前と同じ） */
.search-icon {
  width: 10px; height: 10px; border: 2px solid #fff; border-radius: 50%; position: relative; display: block;
}
.search-icon::after {
  content: ""; position: absolute; width: 2px; height: 6px; background: #fff; bottom: -4px; right: -3px; transform: rotate(-45deg);
}

/* --- レイアウト調整 --- */

/* PC版：ロゴとメニューの間に余白を作る */
.header-search.pc-only {
  margin-left: 30px;
}

@media (max-width: 1024px) {
  /* PC用を消して、スマホ用（メニュー内）を表示する設定を活かす */
  .pc-only { display: none !important; }
  .sp-only { display: block !important; }

  /* スマホメニュー内の検索窓の見た目 */
  .header-nav__list .header-search {
    width: 100%;
    max-width: 250px; /* メニュー内で広がりすぎないように */
    margin: 0 auto 10px;
  }
  
  .header-nav__list .search-input {
    width: 100%;
  }
}

/* --- リセットボタンの調整 --- */
.table-controls {
    margin: 10px 0;
    text-align: right; /* 右寄せにすることで表の端と揃える */
}

.reset-button {
    background-color: #f8f8f8;
    border: 1px solid #ddd;
    color: #666;
    padding: 6px 12px;
    border-radius: 20px; /* 角を丸くすると「補助ボタン」感が出てスッキリします */
    font-size: 13px;
    cursor: pointer;
    transition: 0.2s;
}

/* スマホ用の微調整 */
@media screen and (max-width: 768px) {
    .reset-button {
        padding: 4px 10px; /* 上下左右の余白を少し削る */
        font-size: 11px;    /* 文字を一段階小さく */
        background-color: #fff; /* 背景を白にして軽く見せる */
    }
}


/*------------
  footer
------------*/

.footer {
  background-color: #f9f9f9; /* 薄いグレーで上品に */
  color: #333;
  padding: 60px 0 30px;
  border-top: 1px solid #eee;
}

.footer-container {
  max-width: 1100px; /* MVの幅と合わせると綺麗です */
  margin: 0 auto;
  padding: 0 20px;
}

.footer-wrapper {
  display: flex;
  justify-content: space-between;
  align-items: flex-end; /* 下揃えにすることでスッキリします */
}

/* 会社情報 */
.footer-info__logo img {
  height: 30px; /* 少し小ぶりに */
  width: auto;
  margin-bottom: 20px;
}

.footer-info__address {
  font-style: normal;
  font-size: 14px;
  line-height: 1.8;
  color: #666;
}

.footer-info__tel {
  font-weight: bold;
  font-size: 16px;
  color: #666;
}

.footer-info__btn {
  margin-top: 20px;
}

.footer-info__btn a {
  font-size: 13px;
  color: #37a2ab;
  text-decoration: none;
  font-weight: bold;
}

/* コピーライト */
.copyright {
  font-size: 12px;
  color: #999;
}

/* --- スマホ対応 --- */
@media (max-width: 768px) {
  .footer {
    padding: 40px 0 20px;
    text-align: center; /* スマホは中央寄せがスッキリします */
  }

  .footer-wrapper {
    flex-direction: column;
    align-items: center;
    gap: 30px;
  }

  .footer-bottom {
    margin-top: 20px;
    border-top: 1px solid #eee;
    width: 100%;
    padding-top: 20px;
  }
}


/*------------
  page
------------*/

/*
  page-kv
------------*/

.page-kv {
  position: relative;
  margin-top: min(8.0rem, 80px);
}
.page-kv .kv-bg {
  position: relative;
  height: min(25.0rem, 250px);
}
.page-kv .kv-bg::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #004FA180;
}
.page-kv .kv-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.page-kv .kv-ttl {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  font-size: min(1.8rem, 18px);
  font-weight: 700;
  color: #ffffff;
}
.page-kv .kv-ttl p {
  font-size: min(4.2rem, 42px);
  font-weight: 600;
}
.page-kv .kv-breadcrumb {
  display: flex;
  align-items: center;
  margin-top: min(1.4rem, 14px);
  font-size: min(1.6rem, 16px);
  list-style: none;
}
.page-kv .kv-breadcrumb li {
  position: relative;
}
.page-kv .kv-breadcrumb li + li {
  padding-left: min(2.6rem, 26px);
}
.page-kv .kv-breadcrumb li + li::before {
  content: '';
  position: absolute;
  top: 50%;
  left: min(1.0rem, 10px);
  transform: translateY(-50%);
  width: min(0.5rem, 5px);
  height: min(0.9rem, 9px);
  background: url("../img/common/breadcrumb_arrow.png") no-repeat center/contain;
}

@media screen and (max-width: 1190px) {
  .page-kv {
    margin-top: min(10.0rem, 100px);
  }
}

@media screen and (max-width: 1024px) {
  .page-kv .kv-bg {
    height: min(50.0rem, 500px);
  }
  .page-kv .kv-ttl {
    font-size: min(2.0rem, 20px);
  }
  .page-kv .kv-ttl p {
    font-size: min(5.6rem, 56px);
  }
  .page-kv .kv-breadcrumb {
    margin-top: min(2.0rem, 20px);
    padding: 0 min(4.0rem, 40px);
    font-size: min(2.2rem, 22px);
  }
  .page-kv .kv-breadcrumb li + li {
    padding-left: min(4.9rem, 49px);
  }
  .page-kv .kv-breadcrumb li + li::before {
    left: min(2.0rem, 20px);
    width: min(0.6rem, 6px);
    height: min(1.1rem, 11px);
  }
}


/*------------
  about
------------*/

/*
  about-info
------------*/

#about-info {
  margin-top: min(3.2rem, 32px);
  padding-top: min(3.2rem, 32px);
}
#about-info .info-ttl {
  margin-bottom: min(4.0rem, 40px);
  font-size: min(2.6rem, 26px);
  font-weight: 700;
}
#about-info .info-list {
  margin-bottom: min(4.3rem, 43px);
}
#about-info .info-list__row {
  display: flex;
  font-size: min(1.8rem, 18px);
  line-height: 2;
}
#about-info .info-list__row dt {
  flex-shrink: 0;
  width: min(12.4rem, 124px);
  border-right: 1px solid #000000;
}
#about-info .info-list__row dd {
  padding-left: min(5.0rem, 50px);
}
#about-info .info-mark {
  display: flex;
  align-items: center;
  margin-left: max(-1.8rem, -18px);
}
#about-info .info-mark__item.item01 {
  width: min(12.5rem, 125px);
  margin-right: min(0.9rem, 9px);
}
#about-info .info-mark__item.item02 {
  width: min(8.8rem, 88px);
  margin-right: min(2.3rem, 23px);
}
#about-info .info-mark__item.item03 {
  width: min(9.4rem, 94px);
}

@media screen and (max-width: 1024px) {
  #about-info {
    margin-top: min(4.0rem, 40px);
    padding: min(4.0rem, 40px) min(4.0rem, 40px) 0;
  }
  #about-info .info-ttl {
    margin-bottom: min(3.7rem, 37px);
    font-size: min(3.6rem, 36px);
  }
  #about-info .info-list {
    margin-bottom: min(4.4rem, 44px);
  }
  #about-info .info-list__row {
    font-size: min(2.4rem, 24px);
  }
  #about-info .info-list__row dt {
    width: min(14.8rem, 148px);
  }
  #about-info .info-list__row dd {
    padding-left: min(5.2rem, 52px);
  }
  #about-info .info-mark {
    margin-left: max(-2.7rem, -27px);
  }
  #about-info .info-mark__item.item01 {
    width: min(17.8rem, 178px);
    margin-right: min(1.3rem, 13px);
  }
  #about-info .info-mark__item.item02 {
    width: min(12.6rem, 126px);
    margin-right: min(3.4rem, 34px);
  }
  #about-info .info-mark__item.item03 {
    width: min(13.4rem, 134px);
  }
}


/*
  about-map
------------*/

#about-map {
  margin-top: min(2.8rem, 28px);
  padding: min(2.8rem, 28px) 0 min(10.0rem, 100px);
}
#about-map iframe {
  width: 100%;
  height: min(39.0rem, 390px);
}

@media screen and (max-width: 1024px) {
  #about-map {
    margin-top: min(3.1rem, 31px);
    padding: min(3.1rem, 31px) 0 0;
  }
  #about-map iframe {
    height: min(50.0rem, 500px);
  }
}


/*------------
  itsubsidy
------------*/

/*
  itsubsidy-kv
------------*/

/* PCサイズ */
#itsubsidy-kv {
  /* margin-topを0にし、padding-topでヘッダー分を確保する */
  margin-top: 0;
  padding-top: 0px; 
}

#itsubsidy-kv .kv-contact {
  position: relative;
  width: min(40.0rem, 400px);
  margin: min(4.3rem, 43px) auto 0;
}

/* タブレット・スマホサイズ（1190px以下） */
@media screen and (max-width: 1190px) {
  #itsubsidy-kv {
    margin-top: 0;
    /* スマホなどでヘッダーが低くなる場合は、その高さに合わせる */
    padding-top: 0px; 
  }
}

/* スマホサイズ（1024px以下） */
@media screen and (max-width: 1024px) {
  #itsubsidy-kv .kv-contact {
    /* 670pxはスマホにしては大きすぎる可能性があるため、
       画面幅いっぱいにしたいなら 100% や 90% が安全です */
    width: min(90%, 670px);
    margin: min(0.9rem, 9px) auto 0;
  }
}


/*
  itsubsidy-howto
------------*/

#itsubsidy-howto {
  margin-top: min(3.0rem, 30px);
  padding-top: min(3.0rem, 30px);
	margin-bottom: min(3.0rem, 30px);
  padding-bottom: min(3.0rem, 30px);
}
#itsubsidy-howto .howto-ttl {
  position: relative;
  text-align: center;
}
#itsubsidy-howto .howto-ttl::before {
  content: '';
  position: absolute;
  bottom: max(-1.5rem, -15px);
  left: 50%;
  transform: translateX(-50%);
  width: min(11.9rem, 119px);
  height: min(0.9rem, 9px);
  background: url("../img/common/ttl_icon.png") no-repeat center/contain;
}
#itsubsidy-howto .howto-ttl span {
  font-size: min(1.4rem, 14px);
  font-weight: 700;
  color: #004FA1;
}
#itsubsidy-howto .howto-ttl p {
  margin-top: min(1.1rem, 11px);
  font-size: min(3.9rem, 39px);
  font-weight: 600;
}
#itsubsidy-howto .howto-wrapper {
  display: flex;
  margin-top: min(6.6rem, 66px);
}
#itsubsidy-howto .howto-txt {
  font-size: min(1.6rem, 16px);
  line-height: 1.75;
}
#itsubsidy-howto .howto-txt__ttl {
  font-size: min(2.4rem, 24px);
  font-weight: 700;
  line-height: 1.5;
}
#itsubsidy-howto .howto-txt__ttl span {
  color: #004FA1;
}
#itsubsidy-howto .howto-image {
  flex-shrink: 0;
  width: min(45.0rem, 450px);
  margin-left: min(4.1rem, 41px);
}

@media screen and (max-width: 1024px) {
  #itsubsidy-howto {
    margin-top: min(4.0rem, 40px);
    padding-top: min(4.0rem, 40px);
  }
  #itsubsidy-howto .howto-ttl::before {
    bottom: max(-3.5rem, -35px);
    width: min(17.0rem, 170px);
    height: min(1.3rem, 13px);
    background: url("../img/common/sp/ttl_icon.png") no-repeat center/contain;
  }
  #itsubsidy-howto .howto-ttl span {
    font-size: min(2.0rem, 20px);
  }
  #itsubsidy-howto .howto-ttl p {
    margin-top: min(1.6rem, 16px);
    font-size: min(5.6rem, 56px);
  }
  #itsubsidy-howto .howto-wrapper {
    display: block;
    margin-top: min(7.5rem, 75px);
    padding: 0 min(4.0rem, 40px);
  }
  #itsubsidy-howto .howto-txt {
    font-size: min(2.4rem, 24px);
    line-height: 1.5;
  }
  #itsubsidy-howto .howto-txt__ttl {
    margin-bottom: min(2.0rem, 20px);
    text-align: center;
    font-size: min(3.6rem, 36px);
    line-height: 1.33;
  }
  #itsubsidy-howto .howto-image {
    width: 100%;
    margin: min(3.0rem, 30px) auto 0;
  }
}




/* ボタン本体 */
.page-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
  width: 50px;
  height: 50px;
  background-color: #37a2ab; /* サイトのアクセントカラー */
  border-radius: 50%;       /* 丸いボタン */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
  opacity: 0;               /* 最初は隠しておく（JSで制御） */
  visibility: hidden;
}

/* ボタンが表示された時のクラス */
.page-top.is-active {
  opacity: 1;
  visibility: visible;
}

/* 上向き矢印（CSSで描画） */
.page-top__arrow {
  display: block;
  width: 12px;
  height: 12px;
  border-top: 3px solid #fff;
  border-left: 3px solid #fff;
  transform: rotate(45deg); /* 45度回して「上」に向ける */
  margin-top: 6px;          /* 微調整 */
}

/* ホバー時の動き */
.page-top:hover {
  background-color: #2e8a91;
  transform: translateY(-5px); /* ふわっと浮き上がる */
}

/* スマホでは少し小さくする */
@media (max-width: 1024px) {
  .page-top {
    width: 40px;
    height: 40px;
    right: 15px;
    bottom: 15px;
  }
  .page-top__arrow {
    width: 10px;
    height: 10px;
  }
}