/*
Theme Name: エアコン修理
Theme URI: https://wordpress.org/themes/twentytwentyfive/
*/

/* 1. リセット・基本設定 */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* —————————————— */
/* PC画面でもスマホサイズ（480px）で表示 */
/* —————————————— */
@media screen and (min-width: 769px) {
  html, body {
    /* 横スクロールを防止 */
    overflow-x: hidden;
  }
  body {
    /* 最大幅をスマホサイズに固定 */
    max-width: 480px;
    /* ビューポート中央に寄せる */
    margin: 0 auto;
  }
}


body {
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 16px;
  line-height: 1.5;
  color: #333;
  background-color: #f9f9f9;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

/* ヘッダー内のコンテンツの配置 */
.header-inner {
  max-width: 100%;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 15px;
}


.site-header {
  background-color:#00D7E5;
}

/* ロゴエリア（左側） */
.logo img {
  width: 125px; /* ロゴを大きく */
  height: auto;
  display: block;
}
/* ヘッダー内の右側エリアを横並びに */
.header-right {
  display: flex;
  align-items: center;
}

/* 電話アイコンの隣に適度な余白を */
.header-right .cta-phone {
  margin-right: 16px; /* お好みで調整 */
}

/* ハンバーガーアイコン */
.hamburger {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
}
.hamburger img {
  display: block;
  width: 24px;   /* アイコンサイズをお好みで調整 */
  height: auto;
}

/* モバイルメニュー自体を画面右側に隠す */
.mobile-menu {
  position: fixed;
  top: 0;
  right: 0;
  width: 80%;
  max-width: 300px;
  height: 100%;
  background-color: #4abbca;
  box-shadow: -2px 0 8px rgba(0,0,0,0.2);
  transform: translateX(100%);
  transition: transform 0.3s ease;
  z-index: 9999;
  padding-top: 60px;  /* ヘッダー分だけ余白 */
}

/* open クラスでスライドイン */
.mobile-menu.open {
  transform: translateX(0);
}

/* メニュー項目 */
.mobile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
}
.mobile-menu li + li {
  margin-top: 1rem;
}
.mobile-menu a {
  display: block;
  padding: 0.75rem 1rem;
  color: #333;
  font-weight: bold;
  text-decoration: none;
}
.mobile-menu a:hover {
  background-color: #f0f0f0;
}



/* 右側情報エリア：右寄せにしつつ、相対配置を追加 */
.header-info {
  text-align: right;
  position: relative; /* 絶対配置の基準にする */
  /* もし不要なら flex プロパティは削除してもOK */
  /* display: flex;
     flex-direction: column;
     align-items: flex-end; */
}

/* 電話番号ボタンの画像サイズを小さく */
.cta-btn-head {
  width: 200px;  /* お好みのサイズに調整 */
  height: auto;  /* 縦横比を維持 */
  display: block; /* margin:auto など使いたい場合 */
}

/* webp画像上に重ねるテキスト */
.cta-btn-text-head {
  position: absolute;
  bottom: 0px;      /* 画像下部からの位置。必要に応じて調整 */
  right: 10px;       /* 画像右端からの位置 */
  font-size: 0.5rem; /* 8px相当をremで調整（ルートフォントサイズが16pxの場合） */
  color: #fff;
  padding: 0.125rem 0.3125rem; /* 2pxと5pxをremに変換 */
  border-radius: 3px;
  z-index: 10;
}

@media (max-width: 480px) {
  .cta-btn-text-head {
    font-size: 0.55rem; /* iPhoneなど小さな画面用に微調整 */
    right: 20px;
  }
}


/* ctaセクション */
.cta {
  background-color: #E4F6F9;
}

.cta img {
  max-width: 100%;
  height: auto;
  display: block;
}

/* fv@2x.webp を含むコンテナ */
.cta_appeal {
  width: 100%;
  position: relative; /* 絶対配置の基準にする場合に備えて */
  z-index: 2;
}


.cta_last img {
  position: relative;
  top: -180px; /* 必要に応じて値を調整してください */
  z-index: 3;
}

/* cta_appeal@2x.webp の入ったコンテナに負のマージンを設定 */
.cta_wait {
  margin-top: -20px; /* 数値は画像サイズや好みに合わせて調整 */
  position: relative;
  z-index: 2; /* fv@2x.webpより前面に表示する場合 */
}


/* 親コンテナ */
.cta-container {
  position: relative;
  display: inline-block;
  width: 100%;
  margin-top: -8px;   /* 上側の余白を 8px 減らす */
  margin-bottom: -8px;   /* 上側の余白を 8px 減らす */
  background-color: 	#DEF8FD;
}

/* ベース画像 */
.cta-box {
  display: block;
  width: 100%;
  height: auto;
}

/* 中央に配置するテキスト */
.cta-text {
  position: absolute;
  top: 24%;
  left: 57%;
  transform: translate(-50%, -50%);
  font-size: 1.1rem;      /* お好みで調整 */
  font-weight: bold;      /* ここで太字にする */
  white-space: nowrap;
  color: #000000;         /* 背景とのコントラストに合わせて調整 */
  animation: blink 1s infinite;  /* 2秒周期の点滅アニメーション */
  z-index: 5;             /* ボタンよりも前面に表示する場合は適宜調整 */
}

/* 「今すぐご案内可能」だけ赤に */
.highlight-red {
  color: #FF0000;  /* お好みの赤に調整可 */
}


/* 点滅アニメーションの定義 */
@keyframes blink {
0%, 100% {
  opacity: 1;
}
50% {
  opacity: 0;
}
}

.cta-time {
position: absolute;
top: 82%;
left: 30%;
font-size: 1.05rem;      /* お好みで調整 */
color: #ffffff;          /* 背景とのコントラストに合わせて調整 */
z-index: 5;           /* ボタンよりも前面に表示する場合は適宜調整 */
overflow: hidden;
animation: poyopoyo2 2s ease-in-out infinite;
}

/* ボタン群のコンテナに明示的な幅を指定 */
.cta-btn-container {
  position: absolute;
  top: 75.00%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;         /* 30%から40%に変更して、コンテナ自体を大きく */
  max-width: none;    /* 必要に応じて、最大幅の制限を解除 */
  height: auto;
}

/* ボタン画像の配置 */
.cta-btn-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
}


/* 表示順を調整：上に表示したい画像の z-index を高くする */
.cta-btn-under {
  z-index: 1;
  transform: translate scale(2.0);
  overflow: hidden;
  animation: poyopoyo 2s ease-in-out infinite;
}

.cta-btn {
  z-index: 2;
  position: relative;
  transform: scale(2.0);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
  overflow: hidden;
  animation: poyopoyo 2s ease-in-out infinite;
}

/* 中央に配置するテキスト */
.area .cta-text {
  position: absolute;
  top: 61.5%;
  left: 57%;
  transform: translate(-50%, -50%);
  font-size: 1.1rem;      /* お好みで調整 */
  font-weight: bold;      /* ここで太字にする */
  white-space: nowrap;
  color: #000000;         /* 背景とのコントラストに合わせて調整 */
  animation: blink 1s infinite;  /* 2秒周期の点滅アニメーション */
  z-index: 5;             /* ボタンよりも前面に表示する場合は適宜調整 */
}

/* ボタン群のコンテナに明示的な幅を指定 */
.area-btn-container {
  position: absolute;
  top: 87.00%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40%;         /* 30%から40%に変更して、コンテナ自体を大きく */
  max-width: none;    /* 必要に応じて、最大幅の制限を解除 */
  height: auto;
}

/* ボタン画像の配置 */
.area-btn-container img {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: auto;
  display: block;
}


/* 表示順を調整：上に表示したい画像の z-index を高くする */
.area-btn-under {
  z-index: 1;
  transform: translate scale(2.0);
  overflow: hidden;
  animation: poyopoyo 2s ease-in-out infinite;
}

.area-btn {
  z-index: 2;
  position: relative;
  transform: scale(2.0);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.7);
  overflow: hidden;
  animation: poyopoyo 2s ease-in-out infinite;
}


.cta_apeal {
  background-color: #E4F6F9;
}

/* ① キーフレームアニメーションの定義 */
@keyframes shineEffect {
  0%, 100% {
    filter: brightness(1); /* 通常の明るさ */
  }
  50% {
    filter: brightness(1.5); /* 一時的に明るくする */
  }
}


.appeal-bg {
  transform: scale(0.5); /* 初期状態 */
  /* ※初めはアニメーションは付与していない */
}

/* animate-appeal クラスを付与すると、scaleAnimation で拡大して最終状態を維持 */
.animate-appeal {
  animation: scaleAnimation 2s forwards;
}

@keyframes scaleAnimation {
  0% {
    transform: scale(0.5);
  }
  50% {
    transform: scale(0.75); /* 必要に応じて拡大率を調整 */
  }
  75% {
    transform: scale(0.5); /* 必要に応じて拡大率を調整 */
  }
  100% {
    transform: scale(1);
  }
}


@keyframes poyopoyo {
  0%, 40%, 60%, 80% {
    transform: scale(2.0);
  }
  50%, 70% {
    transform: scale(2.3);
  }
}

@keyframes poyopoyo2 {
  0%, 40%, 60%, 80% {
    transform: scale(1.0);
  }
  50%, 70% {
    transform: scale(1.1);
  }
}

.container {
  position: relative; /* 子要素（画像）の絶対配置の基準にする */
  width: 100%;
  height: 400px;
  margin: 0 auto;       /* コンテナを中央寄せにする */
  overflow: hidden;     /* はみ出す部分を隠して横スクロールを防止 */
  margin-top: -160px; /* 必要に応じて値を調整してください */
  margin-bottom: -30px; /* 必要に応じて値を調整してください */
}

/* 内部の画像の共通スタイル */
.container img {
  position: absolute; /* コンテナ内で自由配置 */
  top: 0;           /* 縦方向の開始位置（必要に応じて変更可能） */
  max-width: 100%;  /* 親要素の幅を超えないようにする */
  height: auto;     /* アスペクト比を保つ */
}

/* 画像毎のスタイル */
.img1 {
  z-index: 3;
  left: 50%;
  transform: translateX(-50%); /* 画像の中央を left:50% に合わせる */
}

.img2 {
  z-index: 2;
  left: 80%; 
  transform: translateX(-60%) translateY(-5%); /* 画像サイズを80%に縮小 */
}

.img3 {
  z-index: 1;
  left: 20%; 
  transform: translateX(-50%) translateY(-20%) scale(0.45); /* 画像サイズを80%に縮小 */
}

/* appealセクション */
.appeal img {
  width: 100%;
  position: relative; /* 絶対配置の基準にする場合に備えて */
  z-index: 2;
}

.appeal_point_top {
  position: relative;  /* 相対位置指定を有効に */
  z-index: 5;          /* 他要素より手前に表示 */
  margin-top: -10px;   /* 上側の余白を 8px 減らす */
}

.appeal_point_bottom {
  position: relative;  /* 相対位置指定を有効に */
  z-index: 2;          /* 他要素より手前に表示 */
  margin-top: 3rem;   /* 上側の余白を 8px 減らす */
}

.scroll-container {
  width: 100%;
  height: 80px;       /* ↑ ここを156pxから300pxに変更 */
  overflow: hidden;
  position: relative;
  margin-top: -14rem;
  z-index: 10;
}

.scroll-container img {
  position: absolute;
  top: 0;
  left: 100%;
  height: 100%;
  width: auto;
  animation: scroll-left 20s linear infinite;
}

@keyframes scroll-left {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-100%); }
}




.appeal_trouble {
  position: relative;  /* 相対位置指定を有効に */
  z-index: 2;          /* 他要素より手前に表示 */
  margin-top: -10px;   /* 上側の余白を 8px 減らす */
}

.appeal_price {
  position: relative;  /* 相対位置指定を有効に */
  z-index: 2;          /* 他要素より手前に表示 */
  margin-top: -30px;   /* 上側の余白を 8px 減らす */
}

.appeal_price_text {
  position: relative;  /* 相対位置指定を有効に */
  z-index: 5;          /* 他要素より手前に表示 */
  margin-top: -1rem;
  margin-bottom: 2rem;
  background-color: 		#DEF8FD;  
  color: #000000;
  white-space: nowrap;
  font-size: clamp(0.7rem, 1.5vw, 1.0rem);
  text-align: right;
}

.cta_container_appeal {
  position: relative;  /* 相対位置指定を有効に */
  z-index: 2;          /* 他要素より手前に表示 */
}



/* customerセクション */
.customer {
  background-color: #E4F6F9;
  padding-bottom: 40px;
}

.customer img{
  max-width: 100%;
}

.customer_title {
  text-align: center;
  padding-bottom: 10px;
}

.customer_title img {
  width: 60%;
  display: inline-block; /* インラインブロックにすることで親の text-align が適用される */
}

/* Swiper コンテナ */
.swiper-container {
width: 100%;
overflow: hidden;
position: relative;
padding-bottom: 50px; /* ここで必要な高さを確保 */
}


.swiper-wrapper {
  /* wrapperのサイズを調整 */
  width: 100%;
  height: 200px;
}

.swiper-slide {
  /* スライドのサイズを調整、中身のテキスト配置調整、背景色 */
  color: #ffffff;
  width: 100%;
  height: 100%;
  text-align: center;
  /*line-height: 300px;*/
}

.swiper-slide img {
  width: 90%;       /* スライド内で90%の幅に縮小 */
  height: auto;
  border-radius: 10px;  /* 角を丸める（数値はお好みで調整） */
  }

.swiper-pagination {
  bottom: 50px;   /*下端から50px離す */
  left: 0;
  right: 0;
  text-align: center;
  z-index: 10;
}

.swiper-pagination-bullet {
  width: 30px;   /* デフォルトより大きく設定 */
  height: 30px;
  background: #8a9dff; /* ページネーションの色 */
  opacity: 0.7;  /* お好みで透明度を調整 */
}



/* areaセクション */
.area {
  position: relative;
}

.customer_point {
  position: relative;
  display: inline-block;
  width: 100%;
  margin-top: -20px;   /* 上側の余白を 8px 減らす */
}
/* priceセクション内での cta-container の位置調整 */
/* ここでは価格画像の下部中央に配置する例です */
.price .cta-container {
  position: absolute;
  bottom: 1.5%;  /* 画像の下から5%上げた位置。数値はお好みに調整 */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;    /* 必要に応じて調整 */
  z-index: 10;   /* 背景画像より前面に表示するため */
  margin-bottom: 3rem;
}

.area_detail img {
  max-width: 100%;
  height: auto;
  display: block;
}

.area .cta-container {
  position: absolute;
  bottom: 1.5%;  /* 画像の下から5%上げた位置。数値はお好みに調整 */
  left: 50%;
  transform: translateX(-50%);
  width: 100%;    /* 必要に応じて調整 */
  z-index: 10;   /* 背景画像より前面に表示するため */
}

/*questionーセクション*/
.question_title {
  text-align: center;   /* 子要素の画像を中央に配置 */
  padding: 50px 0;      /* 上下に30pxの余白（お好みで調整） */
}

.question_title img {
  width: 45%;
  height: auto;
}

/* セクション全体 */
.contact-section {
padding: 40px 20px;
background-color: #f9f9f9;
}

/* 全体を囲むコンテナ：一体感のある丸いボックス */
.contact-box {
max-width: 500px;
margin: 0 auto;
background-color: #fff;
border: 2px solid #ebebeb; /* 輪郭がはっきり見えるように、ここは背景と違う色にする */
border-radius: 10px;
overflow: hidden; /* 内部の子要素の角丸が崩れないように */
}

/* ヘッダー部分：背景を水色 */
.contact-header {
background-color: #008DC6;
text-align: center;
padding: 20px;
}

/* かんたん1分で完了！の画像 */
.header-img {
max-width: 60%;
height: auto;
display: block;
margin: 0 auto 10px;
}

/* 無料お見積りはコチラから の見出し */
.contact-heading {
  font-size: 1.6rem;
  color: #ffffff;
  margin: 0;
  white-space: nowrap;
}

/* 「無料お見積り」だけ黄色に */
.highlight {
  color: #FFD700;       /* お好みの黄色に */
}


/* 問い合わせフォーム部分：パディングのみで調整 */
.contact-form-box {
padding: 20px;
}


/* Contact Form 7 の要素に対する一例 */
.wpcf7 form p {
margin-bottom: 1em;
}

.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 input[type="url"],
.wpcf7 textarea,
.wpcf7 select {
width: 100%;
box-sizing: border-box;
padding: 10px;
margin-top: 5px;
border: 1px solid #ccc;
border-radius: 4px;
}

.wpcf7 .required-text {
  color: red;
}




/* FAQ全体のスタイル（任意でセクションや背景色など調整） */
.faq {
  max-width: 450px;
  margin: 0 auto;
  display: flex;          /* 追加 */
  flex-direction: column; /* 追加 */
  gap: 16px;              /* ← これだけで項目間に 16px */
  text-decoration: none; /* アンダーラインを消す */
}

/* 各Q&A項目の外側の余白 */
.faq-item {
margin-bottom: 5px;
}

/* トグル用のチェックボックスは非表示にしておく */
.faq-toggle {
display: none;
}

/* 質問ラベル部分 */
.faq-question {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #ffffff; /* 質問部分の背景色 */
color: #000000;               /* 文字色 */
padding: 15px 20px;        /* 内側余白 */
border-radius: 8px;        /* 角を丸める */
cursor: pointer;
position: relative;
border: 1px solid #000000; /* 黒い枠線 */
text-decoration: none; /* アンダーラインを消す */
}

/* Qアイコン画像のサイズや余白を調整 */
.faq-q-icon {
width: 24px;     /* お好みのサイズに変更 */
height: auto;
margin-right: 10px; /* 文字との間隔 */
}

/* 質問テキストをフレックスレイアウトで伸縮させる */
.faq-question-text {
  font-weight: bold;
  flex-grow: 1;      /* 画像の次に余白を取る */
  font-size:12px;   /* お好みのサイズに調整 */
  text-decoration: none; /* アンダーラインを消す */
}


/* 矢印アイコン。CSSで描画している例 */
.arrow {
display: inline-block;
width: 12px;
height: 12px;
border-right: 2px solid #008DC6;
border-bottom: 2px solid #008DC6;
transform: rotate(45deg); /* ↘方向の矢印 */
transition: transform 0.3s ease; /* 開閉時の回転アニメーション */
}

/* 回答部分はデフォルトで非表示 */
.faq-answer {
display: none;
padding: 15px 20px;
background-color: #f9f9f9;  /* 回答部分の背景色 */
border-radius: 0 0 8px 8px; /* 下側だけ角を丸める */
color: #333;
}

/* チェックが入ったら回答を表示 */
.faq-toggle:checked ~ .faq-answer {
display: block;
}

/* チェックが入ったら矢印を回転させる（上向きに） */
.faq-toggle:checked ~ .faq-question .arrow {
transform: rotate(-135deg);
}

@media screen and (max-width: 768px) {
  .faq-question {
    width: 80%;
    margin: 0 auto;
  }

  .faq-answer {
    width: 80%;
    margin: 0 auto;
    }
}


/* inquiryセクション全体の背景やレイアウト */
#inquiry-banner {
  display: none;
}

.inquiry-text {
position: absolute;
top: 18%;
left: 55.5%;
font-size: 1.7rem;      /* お好みで調整 */
font-weight: bold; 
color: #fc943a;          /* 背景とのコントラストに合わせて調整 */
animation: blink 2s infinite;  /* 2秒周期の点滅アニメーション */
z-index: 5;           /* ボタンよりも前面に表示する場合は適宜調整 */
}

.inquiry-time {
position: absolute;
top: 76.5%;
left: 72%;
font-size: 0.8rem;      /* お好みで調整 */
color: #ffffff;          /* 背景とのコントラストに合わせて調整 */
animation: shineEffect 3s infinite;
z-index: 10;           /* ボタンよりも前面に表示する場合は適宜調整 */
}

.inquiry_bg img {
width: 100%;
}

.minute_flash {
  position: absolute;
  top: 24%;
  left: 34%;
  /* translate と scale を組み合わせ */
  transform: translate(-50%, -50%) scale(0.5);  /* 80%縮小 */
  animation: blink 1s infinite;
  z-index: 5;
}


/* メール画像の位置調整 */
.inquiry-email {
position: absolute;
top: 60%;          
left: 25%;         /* 左から25%の位置 */
width: 35%;        /* メール画像の幅。お好みで調整 */
transform: translate(-50%, -50%);  /* 自身のサイズ分シフト */
z-index: 2;
}

/* 電話画像の位置調整 */
.inquiry-tel {
position: absolute;
top: 60%;          /* 女性画像の上から30%の位置 */
right: 32%;        /* 右から25%の位置 */
width: 55%;        /* 電話画像の幅 */
transform: translate(50%, -50%);   /* 位置微調整 */
animation: shineEffect 3s infinite;
z-index: 2;
}

/*Footerセクション*/

.footer-section {
  background-color: #47ADD6;
}  

.footer-logo {
  text-align: center;
}

.footer-logo img {
  display: inline-block; /* または block */
  margin: 50px;
}

.footer-links {
  display: flex;
  flex-direction: column; /* 横並びから縦に並べる */
  align-items: center;    /* 子要素を中央に配置 */
  gap: 10px;              /* 各要素間の隙間（必要に応じて調整） */
  margin-bottom: 150px;
  color: #ffffff;        /* 文字色を白に */
  text-decoration: none; /* アンダーラインを消す */
  font-weight: bold;     /* 太字に */
}

.footer-links a {
  color: inherit;       /* 親の白色を使う */
  text-decoration: none;/* 下線を消す */
}

.footer-links p {
  text-align: center; /* pタグのテキストを中央寄せ */
}



.footer-bottom-bar {
  background-color: #ffffff; /* 好みの背景色に変更 */
  height: 30px;              /* バーの高さ */
  width: 100%;               /* 横幅は画面いっぱい */
  margin: 0;
  padding: 0;
}

.fixed-footer {
  position: fixed;   /* 画面に固定 */
  bottom: 0;         /* 画面の下端に配置 */
  left: 0;
  width: 100%;       /* 横幅いっぱい */
  z-index: 9999;     /* 他の要素より前面に表示 */
  padding: 10px;     /* 必要に応じて内側の余白を設定 */
}

/* プライバシーポリシー全体のスタイル */
.privacy-policy {
background-color: #fff;
border: 1px solid #ddd;
border-radius: 8px;
padding: 30px 20px;
max-width: 800px;
margin: 40px auto;
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

/* 見出しのスタイル */
.privacy-policy h1 {
font-size: 2rem;
text-align: center;
color: #333;
margin-bottom: 20px;
}

.privacy-policy h2 {
font-size: 1.4rem;
color: #333;
margin-top: 30px;
margin-bottom: 10px;
border-bottom: 1px solid #eee;
padding-bottom: 5px;
}

/* 本文のスタイル */
.privacy-policy p,
.privacy-policy address {
font-size: 16px;
line-height: 1.6;
color: #555;
margin-bottom: 15px;
}

/* リンクのスタイル */
.privacy-policy a {
color: #0073aa;
text-decoration: none;
}

.privacy-policy a:hover {
text-decoration: underline;
}

/* address のスタイル */
.privacy-policy address {
font-style: normal;
line-height: 1.8;
}

/* 戻るボタンのスタイル */
.back-button {
text-align: center;
margin: 20px 0;
}

.back-button a {
display: inline-block;
padding: 10px 20px;
background-color: #080080;
color: #fff;
text-decoration: none;
border-radius: 4px;
transition: background-color 0.3s ease;
}

.back-button a:hover {
background-color: #3333cc;
}