* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: "Noto Sans JP", sans-serif;
  -webkit-text-size-adjust: 100%;
  /* iOSの自動調整を無効化 */
}

/* 仮で書いている、ページ数長くなったら消す予定 */
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  overflow-x: hidden;
  /* 横スライドを防ぐ */
}

main {
  max-width: 100%;
  margin: 0 auto;
  flex: 1;
}

/* 会社のロゴ */
.logo img {
  width: 250px;
  height: auto;
}

/* 各コンテンツの見出し */
h1 {
  font-size: 64px;
  color: #4ba6a7;
}

h2 {
  font-size: 40px;
  color: #213e3c;
  text-align: center;
  margin: 60px 0;
}

.page-title {
  font-size: 120px;
  /* 例: 別のサイズ */
  color: #4ba6a7;
  /* ティールグリーン */
  font-weight: bold;
  text-align: center;
  margin-top: 40px;
  margin-bottom: 60px;
}

/*h2 span*/
.page-title_jp {
  font-size: 90px;
}

/*h3 */
h3 {
  font-size: 40px;
}

/*h4 footer*/
h4 {
  font-size: 40px;
}

/* aタグ */
a {
  text-decoration: none;
  color: inherit;
  outline: none;
  font-size: 20px;
  transition: color 0.3s, opacity 0.3s;
}

/* SVGボタン（.svg-buttonクラスを持つ要素）を含むaタグ以外に適用 */
a:not(:has(.svg-button)):hover {
  color: #213e3c;
  opacity: 0.7;
}

/* pタグ */
p {
  font-size: 20px;
  color: #213e3c;
}

dd {
  color: #213e3c;
}

dt {
  color: #213e3c;
}

/* 共通SVGボタンスタイル */
.svg-button {
  width: 315px;
  /* ボタンの幅（調整可能） */
  height: 62px;
  /* 高さを明示的に指定 */
  display: block;
  /* ブロック要素として表示 */
  transition: all 0.4s ease;
  /* スムーズなアニメーション */
  cursor: pointer;
  /* カーソルをポインターに */
  overflow: visible;
  /* SVGが切れないようにする */
}

/* SVGボタンのホバー効果（aタグとbuttonタグ両方に対応） */
a:hover .svg-button,
button:hover .svg-button {
  transform: translateY(-4px);
  /* 少し上に浮く */
  filter: drop-shadow(0 6px 16px rgba(95, 196, 197, 0.4));
  /* 影を追加 */
}

/* ホバー時に背景色を変更（aタグとbuttonタグ両方に対応） */
a:hover .svg-button rect,
button:hover .svg-button rect {
  fill: #f0fffe;
  /* サービス一覧と同じグラデーション色 */
  transition: fill 0.4s ease;
}

/* 矢印が左から右へ移動するアニメーション */
@keyframes arrowSlideIn {
  0% {
    opacity: 1;
    transform: translateX(-30px);
  }

  100% {
    opacity: 1;
    transform: translateX(0);
  }
}

/* 矢印は常に表示（初期状態の非表示設定は削除/コメントアウトのまま） */
/* .svg-button path[fill="#73E0E1"] {
  opacity: 0;
} */

/* ホバー時に矢印アニメーションを実行 */
a:hover .svg-button path[fill="#73E0E1"],
button:hover .svg-button path[fill="#73E0E1"] {
  animation: arrowSlideIn 0.8s ease-out;
}

/* ---------------------------------ヘッダー---------------------------------
------------------------------------------------------------------ */
header {
  position: fixed;
  /* FVの上に重ねる */
  top: 0;
  left: 0;
  width: 100%;

  z-index: 1000;
  /* 前面に表示 */
  background-color: #fff;
  /* 背景を白に */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
}

/* サブページ(ホーム以外)でヘッダー被りを防ぐ */
body:not(.home) {
  padding-top: 80px;
}

/* ナビ（ロゴとメニューを横並び） */
nav {
  display: flex;
  justify-content: space-between;
  /* 左：ロゴ、右：メニュー */
  align-items: center;
  padding: 16px 60px;
  max-width: 100%;
  margin: 0 auto;
  /* ページ中央に寄せる */
  background-color: rgba(149, 92, 92, 0.01);
}

/* メニューリスト */
nav ul {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

/* メニューのリンク */
nav ul li a {
  display: inline-block;
  padding: 8px 12px;
  font-weight: 450;
  color: #213e3c;
}

/* ハンバーガーメニューボタン */
.hamburger-menu {
  display: none;
  /* デフォルトで非表示 */
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  z-index: 1001;
}

.hamburger-menu span {
  display: block;
  width: 30px;
  height: 3px;
  background-color: #213e3c;
  margin: 6px 0;
  transition: 0.3s;
  border-radius: 2px;
}

/* モバイルメニューオーバーレイ */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  right: 0;
  width: 100%;
  height: 100vh;
  background-color: #4ba6a7;
  z-index: 999;
  transform: translateX(100%);
  /* 初期状態ではtransitionなし（ページ読み込み時のアニメーション防止） */
}

.mobile-menu-overlay.menu-open {
  transform: translateX(0);
  transition: transform 0.3s ease-in-out;
  /* 開く時だけアニメーション */
}

.mobile-menu-content {
  position: relative;
  width: 100%;
  height: 100%;
  padding: 40px;
}

/* 閉じるボタン */
.close-menu {
  position: absolute;
  top: 20px;
  right: 30px;
  background: none;
  border: none;
  color: white;
  font-size: 48px;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  font-weight: 300;
}

/* モバイルメニューリスト */
.mobile-menu-list {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 25px;
  list-style: none;
  margin: 0;
  padding: 0;
  height: 100%;
}

/* WordPress可能生成的子ul也要移除樣式 */
.mobile-menu-list,
.mobile-menu-list>li,
.mobile-menu-list li {
  list-style-type: none;
  list-style: none;
}

.mobile-menu-list li {
  width: 100%;
  text-align: center;
}

.mobile-menu-list li a {
  color: white;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  display: block;
  padding: 10px 20px;
  transition: opacity 0.3s;
}

.mobile-menu-list li a:hover {
  opacity: 0.7;
}

/* ---------------------------------ヘッダー終わり---------------------------------
------------------------------------------------------------------ */

/* ---------------------------------フッター上のお問いわせ---------------------------------
------------------------------------------------------------------ */
/* お問い合わせセクション全体 */
.Contact-section {
  position: relative;

  max-width: 90%;
  margin: 0 auto;
  min-height: 300px;
  /* ボタンが表示されるための最小の高さ */
}

.Contact-text-p {
  position: absolute;
  left: 3%;
  /* 左からの位置を自由に調整可能 */
  bottom: 40%;
  font-size: 18px;
  font-weight: bold;
}

/* ページしたのお問い合わせ */
.Contact-text-contact {
  position: absolute;
  bottom: 40%;
  right: 3%;
}

/* ---------------------------------フッター上のお問いわせ終わり---------------------------------
------------------------------------------------------------------ */
/* ---------------------------------フッター---------------------------------
------------------------------------------------------------------ */

footer {
  background: #4ba6a7;
  /* ティールグリーン */
  color: white;
  padding: 60px 0 0;
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 上部: サービスカテゴリー */
.footer-services {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* 4列 */
  gap: 40px;
  /* カラム間の余白 */
  padding-bottom: 20px;
  margin-left: 40px;
  /* 右側に移動（この値を変更して位置調整可能） */
}

.footer-title {
  font-size: 18px;
  font-weight: bold;
  margin-bottom: 20px;
  color: white;
}

.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links li p {
  font-size: 14px;
  color: white;
  transition: opacity 0.3s;
}

.footer-links li a:hover {
  opacity: 0.7;
}

/* 中部: ロゴとナビゲーション */
.footer-nav {
  display: flex;
  align-items: center;
  padding: 35px 0;
  gap: 8%;
  /* ロゴとナビの間隔を調整（この値を変更して調整可能） */
}

.footer-menu {
  display: flex;
  gap: 32px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.footer-menu li a {
  font-size: 16px;
  color: white;
  transition: opacity 0.3s;
}

.footer-menu li a:hover {
  opacity: 0.7;
}

/* 下部: Copyright */
.footer-copyright {
  text-align: center;
  padding: 30px 0;
}

.footer-copyright p {
  font-size: 20px;
  color: white;
  margin: 0;
}

/* ---------------------------------フッター終わり---------------------------------
------------------------------------------------------------------ */

/* ---------------------------------style_1300px---------------------------------
------------------------------------------------------------------ */

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

  nav {
    padding: 23px 60px;
  }

  nav ul li a {
    padding: 8px 5px;
  }

  .logo img {
    width: 200px;
  }

  /* 各コンテンツの見出し */

  h1 {
    font-size: 52px;
  }

  h2 {
    font-size: 36px;
  }

  /*h2 span*/
  .page-title_jp {
    font-size: 60px;
  }

  .page-title {
    font-size: 80px;
    /* 例: 別のサイズ */
  }

  h3 {
    font-size: 20px;
  }

  /* pタグ */
  p {
    font-size: 18px;
  }

  /* お問い合わせ */

  .svg-button {
    width: 250px;
  }

  .Contact-text-p {
    left: 8%;

    font-size: 16px;
  }

  .Contact-text-contact {
    right: 6%;
  }
}

/* ---------------------------------style_1288px---------------------------------
------------------------------------------------------------------ */

@media screen and (max-width: 1288px) {
  .svg-button {
    width: 250px;
  }
}

/* ---------------------------------style_1288px終わり---------------------------------
------------------------------------------------------------------ */

/* ---------------------------------style_1172px---------------------------------
------------------------------------------------------------------ */

@media screen and (max-width: 1172px) {
  .footer-nav {
    padding: 35px 15px;
  }

  .footer-menu {
    gap: 15px;
  }
}

/* ---------------------------------style_1172px終わり---------------------------------
------------------------------------------------------------------ */

/* ---------------------------------style_1024px---------------------------------
------------------------------------------------------------------ */

@media screen and (max-width: 1024px) {
  .logo img {
    width: 150px;
  }

  nav ul {
    gap: 12px;
  }

  /* 各コンテンツ見出し */

  h1 {
    font-size: 42px;
  }

  .fv-text_Tel {
    font-size: 32px;
  }

  .fv-text_Time {
    font-size: 32px;
  }

  h2 {
    font-size: 32px;
  }

  /* フッター */
  .footer-nav {
    padding: 35px 47px;
  }

  .footer-menu {
    gap: 20px;
  }

  .footer-services {
    gap: 5px;
    margin-left: 73px;
  }

  .svg-button {
    width: 230px;
    height: 48px;
  }
}

/* ---------------------------------style_961px---------------------------------
------------------------------------------------------------------ */

@media screen and (max-width: 961px) {
  .footer-menu li a {
    font-size: 14px;
  }

  .footer-title {
    font-size: 16px;
  }

  .footer-links li p {
    font-size: 12px;
  }
}

/* ---------------------------------style_961px終わり---------------------------------
------------------------------------------------------------------ */

/* ---------------------------------style_827px---------------------------------
------------------------------------------------------------------ */

@media screen and (max-width: 827px) {
  .footer-menu {
    gap: 15px;
  }
}

/* ---------------------------------style_827px終わり---------------------------------
------------------------------------------------------------------ */

/* ---------------------------------style_900px---------------------------------
------------------------------------------------------------------ */

@media screen and (max-width: 900px) {
  a {
    font-size: 14px;
  }

  .logo img {
    width: 105px;
  }

  /* 各コンテンツ見出し */

  .page-title {
    font-size: 68px;
  }

  .page-title_jp {
    font-size: 48px;
  }
}

/* --------------------------------- style_768px---------------------------------
------------------------------------------------------------------ */
/* --------------------------------- ハンバーガーメニュー---------------------------------
------------------------------------------------------------------ */
@media screen and (max-width: 768px) {

  /* PCメニューを非表示 */
  nav ul.pc-menu {
    display: none;
  }

  /* ハンバーガーボタンを表示 */
  .hamburger-menu {
    display: block;
  }

  /* ロゴのサイズを調整 */
  .logo img {
    width: 180px;
  }

  /* ナビゲーションのパディング調整 */
  nav {
    padding: 16px 20px;
  }

  /* 共通SVGボタンスタイル */
  .svg-button {
    width: 225px;
    /* ボタンの幅（調整可能） */
    height: 47px;
  }

  /* --------------------------------- ハンバーガーメニュー終わり---------------------------------
------------------------------------------------------------------ */

  /* --------------------------------- 下のお問い合わせ---------------------------------
------------------------------------------------------------------ */

  .Contact-section {
    display: flex;
    flex-direction: column;

    min-height: auto;
    padding: 40px 0;
  }

  .Contact-text-p {
    position: static;
    /* absoluteを解除 */
    margin-bottom: 30px;
    align-self: flex-start;
    /* テキストのみ左揃え */
    margin-left: 5%;
    /* 左側の余白（この値を変更して位置調整可能） */
    font-size: 16px;
    text-align: left;
    /* テキストを左揃え */
  }

  .Contact-text-contact {
    position: static;
    /* absoluteを解除 */
    align-self: flex-end;
    /* 右側に配置 */
    margin-right: 5%;
    /* 右側の余白（この値を変更して位置調整可能） */
  }

  /* --------------------------------- 下のお問い合わせ終わり---------------------------------
------------------------------------------------------------------ */

  /* --------------------------------- フッタースマホ---------------------------------
------------------------------------------------------------------ */

  .footer-nav {
    flex-direction: column;
    /* ロゴとナビを縦並び */
    align-items: flex-start;

    gap: 20px;
  }

  .footer-menu li a {
    font-size: 16px;
  }

  .footer-menu {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    /* 3列 */
    gap: 10px 5px;
    /* 縦10px、横5px（この値を変更して余白調整可能） */
    width: 100%;
  }

  .footer-menu li {
    text-align: center;
    /* 中央揃え */
  }

  /* 3つ目の項目の後で改行の疑似要素を削除 */
  .footer-menu li:nth-child(3)::after {
    content: none;
  }

  .footer-services {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-left: 0;
    padding: 20px 0;
    padding-left: 30%;
    /* 左側に余白を追加（この値を変更して位置調整可能） */
  }

  /* 各サービスカテゴリーを横並びに */
  .footer-column {
    display: flex;
    flex-direction: row;
    gap: 15px;
    align-items: flex-start;
  }

  .footer-title {
    flex-shrink: 0;
    min-width: 80px;
    margin: 0;
  }

  .footer-links {
    flex: 1;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .footer-links li {
    margin-bottom: 5px;
  }

  .footer-links li p {
    margin: 0;
    font-size: 16px;
  }

  .footer-copyright {
    text-align: center;
    padding: 20px 0;
  }

  .footer-copyright p {
    font-size: 12px;
  }
}

/* --------------------------------- フッタースマホ終わり---------------------------------
------------------------------------------------------------------ */

/* --------------------------------- style_768px終わり---------------------------------
------------------------------------------------------------------ */

/* --------------------------------- style_535px---------------------------------
------------------------------------------------------------------ */
@media screen and (max-width: 535px) {
  /* フッター */

  .footer-services {
    padding-left: 23%;
  }
}

/* --------------------------------- style_535px終わり---------------------------------
------------------------------------------------------------------ */
/* --------------------------------- style_430px---------------------------------
------------------------------------------------------------------ */

/* 
iPhone14 Pro Max  */

@media screen and (max-width: 430px) {

  /* 各セクション */
  h1 {
    font-size: 32px;
  }

  .page-title {
    font-size: 36px;
  }

  .page-title_jp {
    font-size: 36px;
  }
}

@media screen and (max-width: 460px) {

  /* 各セクション */
  h1 {
    font-size: 32px;
  }

  .page-title {
    font-size: 32px;
  }

  .page-title_jp {
    font-size: 32px;
  }

  /* フッター */
  .footer-nav {
    padding: 35px 0px;
  }
}

/* --------------------------------- style_430px終わり---------------------------------
------------------------------------------------------------------ */

/* ---------------------------------TOP-375px以下---------------------------------
------------------------------------------------------------------ */

@media screen and (max-width: 375px) {
  /* 各セクション */

  .page-title {
    font-size: 26px;
  }

  .page-title_jp {
    font-size: 26px;
  }

  /* フッター */
  .footer-menu li a {
    font-size: 14px;
  }
}

/* ---------------------------------TOP-375px以下終わり---------------------------------
------------------------------------------------------------------ */

/* h2からh1に変更した際のスタイル調整 */
h1.service-title {
  color: #213e3c !important;
  /* h2と同じ深緑色 */
  text-align: center !important;
  /* 中央揃え */
  font-size: 35px !important;
  /* サイズ調整 */
  font-weight: 700 !important;
  margin: 70px 0 24px !important;
  /* 余白調整 */
  width: 100%;
  display: block;
}

/* --------------------------------- Desktop Width Restriction --------------------------------- */
@media screen and (min-width: 1025px) {
  main {
    max-width: 100%;
    margin: 0 auto;
  }

  /* Limit all direct children of main to 1200px */
  main>* {
    max-width: 1200px;
    margin-left: auto;
    margin-right: auto;
  }

  /* EXCEPTION: First View (fv-section) remains full width */
  main>.fv-section {
    max-width: 100%;
  }

  /* Also ensure full width background sections (if any) can span full width 
     but their inner content is restricted. 
     Currently applied to all sections directly. 
     If user wants background to extend, they need inner wrappers. 
     Based on current request "limit width", this is the safest direct implementation.
  */
}