/*
Theme Name: Twenty Twenty-Five
Theme URI: https://wordpress.org/themes/twentytwentyfive/
Author: the WordPress team
Author URI: https://wordpress.org
Description: Twenty Twenty-Five emphasizes simplicity and adaptability. It offers flexible design options, supported by a variety of patterns for different page types, such as services and landing pages, making it ideal for building personal blogs, professional portfolios, online magazines, or business websites. Its templates cater to various blog styles, from text-focused to image-heavy layouts. Additionally, it supports international typography and diverse color palettes, ensuring accessibility and customization for users worldwide.
Requires at least: 6.7
Tested up to: 6.8
Requires PHP: 7.2
Version: 1.3
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: twentytwentyfive
Tags: one-column, custom-colors, custom-menu, custom-logo, editor-style, featured-images, full-site-editing, block-patterns, rtl-language-support, sticky-post, threaded-comments, translation-ready, wide-blocks, block-styles, style-variations, accessibility-ready, blog, portfolio, news
*/

/*
 * Link styles
 * https://github.com/WordPress/gutenberg/issues/42319
 */
a {
  text-decoration-thickness: 1px !important;
  text-underline-offset: 0.1em;
}

/* Focus styles */
:where(.wp-site-blocks *:focus) {
  outline-width: 2px;
  outline-style: solid;
}

/* Increase the bottom margin on submenus, so that the outline is visible. */
.wp-block-navigation
  .wp-block-navigation-submenu
  .wp-block-navigation-item:not(:last-child) {
  margin-bottom: 3px;
}

/* Increase the outline offset on the parent menu items, so that the outline does not touch the text. */
.wp-block-navigation
  .wp-block-navigation-item
  .wp-block-navigation-item__content {
  outline-offset: 4px;
}

/* Remove outline offset from the submenus, otherwise the outline is visible outside the submenu container. */
.wp-block-navigation
  .wp-block-navigation-item
  ul.wp-block-navigation__submenu-container
  .wp-block-navigation-item__content {
  outline-offset: 0;
}

/*
 * Progressive enhancement to reduce widows and orphans
 * https://github.com/WordPress/gutenberg/issues/55190
 */
h1,
h2,
h3,
h4,
h5,
h6,
blockquote,
caption,
figcaption,
p {
  text-wrap: pretty;
}

/*
 * Change the position of the more block on the front, by making it a block level element.
 * https://github.com/WordPress/gutenberg/issues/65934
*/
.more-link {
  display: block;
}

/* ▼▼ 新型コロナ・インフルエンザ対策セクション ▼▼ */

.virus {
  width: 100%;
  background: #f8f8f8;
  padding: 60px 0;
}

.virus-area {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.virus-area h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 10px;
}

.virus-area p {
  font-size: 1rem;
  color: #555;
  margin-bottom: 40px;
}

/* ボックス並び */
.measures {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

/* 各対策ボックス */
.measures .box {
  width: 24%;
  background: #ffffff;
  border-radius: 10px;
  padding: 20px 10px;
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
}

.measures .box h3 {
  font-size: 1.1rem;
  margin-bottom: 10px;
  font-weight: 700;
}

.measures .box img {
  width: 60px;
  margin: 10px auto;
  display: block;
}

.measures .box p {
  font-size: 0.9rem;
  color: #444;
  line-height: 1.6;
}

/* ▼ SP調整 ▼ */
@media screen and (max-width: 768px) {
  .measures {
    flex-direction: column;
    align-items: center;
  }

  .measures .box {
    width: 90%;
    margin-bottom: 20px;
  }

  .virus-area h2 {
    font-size: 1.6rem;
  }
}

/* ===============================
   全体共通
   =============================== */

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

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Yu Gothic", "游ゴシック体",
    "Hiragino Sans", "ヒラギノ角ゴ ProN", Meiryo, sans-serif;
  line-height: 1.6;
  color: #333;
  background: #fff;
}

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

/* PC/SP切り替え用クラス */
.sp {
  display: none;
}
.pc {
  display: inline;
}

@media screen and (max-width: 768px) {
  .sp {
    display: inline;
  }
  .pc {
    display: none;
  }
}

/* 共通レイアウト */
section {
  padding: 60px 0;
}

.taC {
  text-align: center;
}

/* 見出し汎用 */
h2 {
  font-size: 2rem;
  text-align: center;
  margin: 0 0 30px;
}

/* ===============================
   ヘッダー & FV
   =============================== */

header {
  background: #fff;
  border-bottom: 1px solid #eee;
  z-index: 10;
}

.header-inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 10px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
}

.header-inner h1 {
  margin: 0;
  max-width: 260px;
}

.header_cta {
  display: flex;
  align-items: center;
  gap: 12px;
}

.header_cta img {
  height: auto;
}

/* FV画像 */
.change {
  width: 100%;
}

/* ===============================
   協力店募集ブロック
   =============================== */

.boshu {
  max-width: 900px;
  margin: 20px auto 40px;
  padding: 20px;
  background: #fffde7;
  border-radius: 8px;
  text-align: center;
  font-size: 0.95rem;
}

/* ===============================
   上部CTAエリア
   =============================== */

.cta-area {
  background: #fff3e0;
  padding: 30px 10px 40px;
  text-align: center;
}

.cta-area p {
  margin: 0 0 20px;
  font-size: 1rem;
}

.flash {
  display: inline-block;
  padding: 0.4em 0.8em;
  border-radius: 999px;
  background: #ffebee;
  color: #d32f2f;
  font-weight: 700;
}

/* ボタン共通 */
.btn {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: 10px;
}

.btn img {
  display: block;
}

/* ボタンの軽いアニメ感 */
.btn_anm span {
  display: inline-block;
  transition: transform 0.08s ease, box-shadow 0.12s ease;
}

.btn_anm span:hover {
  transform: translateY(-2px);
}

/* ===============================
   新型コロナ・インフルエンザ対策
   =============================== */

.virus {
  background: #f8f8f8;
  padding: 60px 0;
}

.virus-area {
  width: 90%;
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}

.virus-area h2 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 8px;
}

.virus-area > p {
  font-size: 1rem;
  color: #555;
  margin-bottom: 40px;
}

/* 対策ボックス群 */
.measures {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  gap: 20px;
}

.measures .box {
  width: 23%;
  background: #fff;
  border-radius: 10px;
  padding: 20px 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  text-align: center;
}

.measures .box h3 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0 0 10px;
}

.measures .box img {
  width: 60px;
  margin: 10px auto;
}

.measures .box p {
  font-size: 0.9rem;
  color: #444;
  line-height: 1.7;
}

/* ===============================
   施工費用一覧
   =============================== */

.kinds {
  padding: 50px 0 30px;
}

.kinds-area {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto 10px;
  text-align: center;
}

.kinds-area h2 {
  font-size: 1.8rem;
  margin-bottom: 20px;
}

/* ===============================
   選ばれる理由
   =============================== */

.select-area {
  width: 90%;
  max-width: 1100px;
  margin: 40px auto;
}

.select-area h2 {
  margin-bottom: 30px;
}

.card {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

/* 各理由カード */
.reason-card {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 20px;
  border-radius: 10px;
  background: #fafafa;
}

.reason-card:nth-child(odd) {
  flex-direction: row;
}
.reason-card:nth-child(even) {
  flex-direction: row-reverse;
}

.reason-card .txt {
  flex: 1;
}

.reason-card h3 {
  font-size: 1.3rem;
  margin: 0 0 10px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.reason-card h3 img {
  width: 40px;
}

.reason-card p {
  margin: 0;
  font-size: 0.95rem;
  line-height: 1.8;
}

/* ===============================
   口コミスライダー
   =============================== */

.voice-area {
  background: #f5f5f5;
  padding: 60px 0;
}

.voice-area h2 {
  margin-bottom: 30px;
}

.voice-area .slider {
  max-width: 1100px;
  margin: 0 auto;
}

/* slickの中身用カード */
.voice-card {
  background: #fff;
  border-radius: 10px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.08);
  padding: 20px;
  max-width: 340px;
  margin: 0 auto;
}

.voice-card_ttl {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
}

.voice-card_detail {
  display: flex;
  align-items: center;
  gap: 10px;
}

.voice-card_detail img {
  width: 40px;
}

.voice-card_detail p {
  font-size: 0.85rem;
  margin: 0;
}

.voice-card h3 {
  font-size: 1rem;
  margin: 0 0 8px;
}

.voice-card .comment {
  font-size: 0.9rem;
  line-height: 1.8;
  margin: 0;
}

.comment .mark {
  background: linear-gradient(transparent 60%, #fff9c4 60%);
}

/* ===============================
   決済・メーカー
   =============================== */

.maker-area {
  width: 90%;
  max-width: 1000px;
  margin: 40px auto;
  text-align: center;
}

.credit {
  margin: 20px 0 10px;
}

/* ===============================
   施工の流れ
   =============================== */

.step-area {
  background: #fafafa;
}

.step-area h2 {
  margin-bottom: 30px;
}

.step-inner {
  width: 90%;
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.step {
  display: flex;
  gap: 20px;
  background: #fff;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
}

.step > img {
  width: 70px;
  flex-shrink: 0;
}

.sp_style h3 {
  margin: 0 0 10px;
  font-size: 1.1rem;
}

.sp_style p {
  margin: 0 0 10px;
  font-size: 0.95rem;
}

/* ===============================
   対応エリア
   =============================== */

.map-area {
  width: 90%;
  max-width: 900px;
  margin: 40px auto;
  text-align: center;
}

.heading-025 {
  position: relative;
  display: inline-block;
  padding-bottom: 10px;
  margin-bottom: 30px;
}

.heading-025::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  width: 60px;
  height: 3px;
  background: #2196f3;
}

/* ===============================
   よくある質問
   =============================== */

.qa-area {
  width: 90%;
  max-width: 900px;
  margin: 40px auto 60px;
}

.qa-area h2 {
  margin-bottom: 20px;
}

.accordion-menu {
  margin: 0;
  padding: 0;
}

.accordion-menu dt,
.accordion-menu dd {
  margin: 0;
  padding: 0;
}

.accordion-menu dt {
  padding: 14px 16px;
  background: #f5f5f5;
  border-top: 1px solid #e0e0e0;
  cursor: pointer;
  font-weight: 700;
}

.accordion-menu dd {
  padding: 14px 16px;
  border-top: 1px solid #e0e0e0;
  background: #fff;
  display: none; /* JSで開閉 */
  font-size: 0.95rem;
}

/* ===============================
   お問い合わせフォーム
   =============================== */

#form {
  background: #f5f5f5;
  padding: 50px 10px 60px;
}

#form h3 {
  max-width: 900px;
  margin: 0 auto 10px;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  gap: 10px;
}

#form .explanation {
  max-width: 900px;
  margin: 0 auto 20px;
  font-size: 0.9rem;
}

.must {
  display: inline-block;
  margin-right: 4px;
  padding: 2px 6px;
  font-size: 0.75rem;
  color: #fff;
  background: #e53935;
  border-radius: 3px;
}

.form_tbl {
  max-width: 900px;
  margin: 0 auto;
  overflow-x: auto;
}

.form_tbl table {
  width: 100%;
  border-collapse: collapse;
  background: #fff;
}

.form_tbl th,
.form_tbl td {
  border: 1px solid #e0e0e0;
  padding: 10px;
  vertical-align: top;
  font-size: 0.9rem;
}

.form_tbl th {
  width: 28%;
  background: #fafafa;
}

.form_tbl input[type="text"],
.form_tbl input[type="tel"],
.form_tbl input[type="email"],
.form_tbl input[type="date"],
.form_tbl select,
.form_tbl textarea {
  width: 100%;
  padding: 6px 8px;
  font-size: 0.9rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  outline: none;
}

.form_tbl textarea {
  min-height: 120px;
}

.zip-wrapper {
  display: flex;
  align-items: center;
  gap: 4px;
}

.suc {
  margin-top: 20px;
  padding: 10px;
  font-size: 0.8rem;
  background: #fff;
  border-radius: 6px;
  max-height: 300px;
  overflow: auto;
}

.submitbtn {
  text-align: center;
  margin-top: 20px;
}

.chbtn {
  display: inline-block;
  padding: 10px 30px;
  font-size: 1rem;
  color: #fff;
  background: #ff9800;
  border: none;
  border-radius: 30px;
  cursor: pointer;
}

.chbtn:hover {
  opacity: 0.9;
}

/* ===============================
   フッター
   =============================== */

footer {
  background: #222;
  color: #eee;
  text-align: center;
  padding: 30px 10px 40px;
  font-size: 0.85rem;
}

footer img {
  margin: 0 auto 10px;
}

footer a {
  color: #90caf9;
  text-decoration: underline;
}

/* ===============================
   追従CTA (#follow_cta)
   =============================== */

#follow_cta {
  width: 100%;
  background: #fff;
  box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.2);
  z-index: 999;
}

.follow_inner {
  max-width: 1100px;
  margin: 0 auto;
  padding: 8px 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  font-size: 0.9rem;
}

.follow_inner_icon {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ===============================
   レスポンシブ調整
   =============================== */

@media screen and (max-width: 1024px) {
  .header-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media screen and (max-width: 768px) {
  section {
    padding: 40px 0;
  }

  .header-inner {
    align-items: center;
    text-align: center;
  }

  .header_cta {
    justify-content: center;
    flex-wrap: wrap;
  }

  .measures {
    flex-wrap: wrap;
  }

  .measures .box {
    width: 100%;
  }

  .reason-card {
    flex-direction: column !important;
  }

  .step {
    flex-direction: column;
  }

  .step > img {
    width: 60px;
  }

  .follow_inner {
    flex-direction: column;
    text-align: center;
  }

  .form_tbl th {
    width: 35%;
  }
}
/* =====================================
   CTA 三連ボタン（見本サイト再現）
   ===================================== */

.btn {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
  margin-top: 20px;
}

.btn img {
  width: 260px; /* 見本サイトのボタン幅に寄せる */
  max-width: 100%;
  height: auto;
  display: block;
}

/* 電話ボタンの “浮く感じ” を再現 */
.btn_anm span {
  display: inline-block;
  transition: transform 0.08s ease, box-shadow 0.12s ease;
}

.btn_anm span:hover {
  transform: translateY(-3px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* スマホ時（見本サイトのように縦並び） */
@media screen and (max-width: 768px) {
  .btn {
    flex-direction: column;
    gap: 10px;
  }

  .btn img {
    width: 100%;
    max-width: 420px;
  }
}