@charset "utf-8";
/* ベース設定 */
body {
  background-color: #fafafa; /* オフホワイト */
  color: #555; /* グレー文字 */
  font-family: "Klee One", cursive,sans-serif;
  font-weight: 400;
  font-style: normal;
}
/* フローティングボタン（PCは非表示） */
.floating-buttons {
  display: none;
}


/* ヘッダー */
.site-header {
  background-color: rgb(244, 239, 233);
  padding:  4px 12px 20px;
}

/* 水色のラインぼかし */
.gradient-line {
  height: 4px;       /* ラインの太さ */
  width: 100%;       /* 横幅いっぱい */
  background: linear-gradient(
    to right,
    rgba(129, 216, 220, 1) 0%,   /* 左端は濃い水色 */
    rgba(129, 216, 220, 0.2) 70%,/* 中間で少し薄く */
    rgba(129, 216, 220, 0) 100%  /* 右端は完全透明 */
  );
}
.header-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

/* 左寄せロゴ(作成後追加予定）とタイトル */
.header-left{
  display: flex;
  align-items: center;
  gap: 10px;
}
/* .logo {
  max-height: 50px;
} */

.site-title {
  font-size: 26px;
  font-weight: 700;
  color: #555; 
  margin: 0;
}

/* ナビゲーション */
.header-right{
  display: flex;
  align-items: center;
  gap:20px;
}
.main-nav ul {
  display: flex;
  gap: 20px;
  list-style: none;
  padding: 0;
  margin: 0;
}

.main-nav a {
  text-decoration: none;
  font-size: 17px;
  color: #555; 
  padding: 6px 10px;
  border-radius: 4px;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* 通常のナビリンクには水色背景 */
.main-nav a:hover {
  background-color: #81d8dc;
  color: #fff;
}
/* ソーシャルアイコンは背景色を消す */
.nav-social a:hover {
  background-color: transparent; /* 背景色なし */
  color: inherit;                /* 色も変えない */
}

/* ボタンエリア */
.header-buttons {
  display: flex;
  gap: 12px;
  align-items: center;
}

/* ボタン内テキスト */
.btn-content {
  font-size: 16px;
  font-weight: bold;
  display:flex;
  align-items: center;
  justify-content: center;
}

.main-text {
  font-size: 16px;
  font-weight: bold;
}
/* 
.sub-text {
  font-size: 13px;
  opacity: 0.9;
} */
.main-nav ul {
  display: flex;
  gap: 16px;           /* 項目の間隔 */
  align-items: center; /* 縦位置を揃える */
}

/* ソーシャルアイコン共通 */
.icon-instagram,
.icon-line {
  width: 30px;   /* アイコンサイズ */
  height: 30px;
  display: block;
  background-color: #fff;   /* 白背景を追加 */
  border-radius: 6px;
  padding: 4px;
}

/* ホバー時の色変化（ブランドカラーに近づける） */
.nav-social a:hover .icon-instagram {
  filter: drop-shadow(0 0 2px #E1306C);
}
.nav-social a:hover .icon-line {
  filter: drop-shadow(0 0 2px #06C755);
}

/* 電話ボタン */
.nav-btn.tel{
  display: flex;
  align-items: center;
  justify-content: center;
  background-color:transparent;
  color: #555;
  padding: 8px 12px;
  border-radius: 4px;
  font-size: 15px;
  text-decoration: none;
  transition: background-color 0.3s, color 0.3s;
}
.nav-btn.tel:hover {
   background-color:  #81d8dc; 
  color: #fff; ;
}
/* ヒーローセクション全体 */
.hero-block {
  display: flex;
  position: relative;
  height: 80vh;          /* 全体の高さを決める */
  align-items: stretch;  /* 左右の高さを揃える */
  margin-bottom: 4rem;
  background-color:rgb(244, 239, 233);
}

/* 左側：キャッチコピー */
.hero-catchcopy {
  flex: 1;
  padding:  7rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-size: 2.2rem;       /* 文字を大きめに */
  line-height: 1.9;      /* 行間を広めに */
  font-weight: bold;     /* 強調 */
}
.hero-catchcopy p {
 font-size: 1.7rem;
 font-weight: normal;
}
/* 右側：写真 */
.hero-image {
  flex: 1;
  overflow: hidden;
  clip-path: polygon(18% 0, 100% 0, 100% 100%, 0% 100%); /* 左端を斜めにカット */
  position: relative;
}

.hero-image img {
  width: 110%;           /* 写真を少し拡大して迫力を出す */
  height: 100%;
  object-fit: cover;      /* 枠いっぱいにフィット */
  object-position: center top;   /* 上の空を優先的に表示 */
  display: block;
  transform: translateX(-5%);
}

.info-section {
  font-size: 20px; 
}

.info-block {
  width: 100%;
  margin: 5rem auto 5rem; 
  padding: 0 1.5rem;
  line-height: 1.7;
  text-align: center;
}

.info-block h2 {
  font-size: 28px; 
}
.info-block li {
  font-size: 17px;
}
.info {
  width: 100%;
  max-width: 900px;
  margin: 0 auto;
  border-collapse: collapse;
  margin-bottom: 5rem;
}

.info td,
.info th{
  font-size: 17px;
  border-bottom: 1px dotted #533a34;
  padding: 1rem;
  text-align: left;
  vertical-align: middle;
}

.info th{
  text-align: justify;
  padding-left: 4rem;
  font-weight: bold;
  width: 30%;
}

.license-number {
  white-space: nowrap;
}
footer {
  background-color: #444;
  color: #fff;
  text-align: center; 
  padding: 20px;
  font-size: 14px;
}
/* PC用フッターリンク */
.footer-links {
  display: flex;
  justify-content: center;
  gap: 24px;
  margin-bottom: 30px;
}

.footer-links a {
  color: #fff;
  text-decoration: none;
  font-size: 0.9rem;
}

.footer-links a:hover {
  text-decoration: underline;
}

/* お客様の声ページ装飾 */

.trouble {
  margin: 4rem auto;
  max-width: 900px;
}
.trouble h2 {
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  margin: 2rem 0;
  color: #333; 
  border-bottom: 2px solid #ccc;
  padding-bottom: 0.5rem;
}
.trouble-block{
  display: flex;
  align-items: center;
  margin-bottom: 2rem;
}
.trouble-block:nth-child(even) {
  flex-direction: row-reverse; 
}

.trouble-block img {
  width: 200px;
  height: auto;
  margin: 0 1rem;
  border-radius: 8px;
  box-shadow: 0 0 20px rgba(0,0,0,0.15);
  mask-image: radial-gradient(circle, rgba(0,0,0,1) 95%, rgba(0,0,0,0) 100%);
  -webkit-mask-image: radial-gradient(circle, rgba(0,0,0,1) 95%, rgba(0,0,0,0) 100%);
}

.trouble-block p {
  flex: 1; 
  line-height: 1.6; 
}
/* お問合せページ */

.contact {
  margin: 4rem auto;
  max-width: 900px;
}
.contact h2 {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  margin: 2rem 0;
  color: #333; 
  border-bottom: 2px solid #ccc;
  padding-bottom: 0.5rem;
}
/* 不動産業者様向けページ */
.real-estate {
  margin: 4rem auto;
  max-width: 900px;
}
.real-estate {
  width: 100%;            /* 各項目は親幅に合わせる */
  max-width: 800px;       /* 最大幅を制御 */
  text-align: left;
}
  
.real-estate h2 {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  margin: 2rem 0;
  color: #333; 
  border-bottom: 2px solid #ccc;
  padding-bottom: 0.5rem;
}
.real-estate p {
  text-align: left;
  margin-bottom: 2rem;
  line-height: 1.9;        /* 行間を広めにして読みやすく */
  font-size: 1.2rem;         /* 本文サイズ */
}


.flow-image {
  background-color: #fff;
  border-radius: 8px;
  /* box-shadow: 0 4px 12px rgba(228, 213, 195, 0.9); */
  padding: 20px;
  margin: 20px auto;
  max-width: 600px; /* PCでは中央寄せ */
}
/* 解体業者様向けページ */
.demolition h2 {
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  margin: 2rem 0;
  color: #333; 
  border-bottom: 2px solid #ccc;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.catch-copy  p {
  font-family: "Yu Gothic", "Meiryo", sans-serif;
  color: #06C755;
  font-size: 30px;
  font-weight:bold;
  text-align: center;
  border-bottom: none;
  margin: 1rem 0;       /* 上下に余白を追加 */
  line-height: 1.6;     /* 行間を広げる */
}
.service-points {
  display: flex;
  flex-direction: column; /* 縦並び */
  align-items: center;    /* 横方向を中央寄せ */
  width: auto;            /* 固定幅を外す */
  margin: 0 auto;
}
.service-points li {
  width: 100%;            /* 各項目は親幅に合わせる */
  max-width: 800px;       /* 最大幅を制御 */
  text-align: left;
}
.service-points li {
  margin-bottom: 1.5rem; /* 各項目の間に余白 */
  line-height: 1.0;      /* 行間を広げる */
}

.point-title {
  font-weight: bold;   /* 太文字 */
  font-size: 25px;
  display: block;      /* 改行して見出しっぽくするなら */
  color:   #5b4d06;      /* ティファニーブルーなどアクセントカラー */
}

.point-desc {
  font-size: 17px;
  font-weight: normal; /* 普通の文字 */
  color: #333;         /* 落ち着いた本文色 */
  display: block;
  margin-top: 0.5rem;
}

/* PCではハンバーガーを隠す */
@media (min-width: 769px) {
  .menu-toggle,
  .nav-links { 
    display: none; }

  .license-number {
    margin: 0 1rem;
  }
  .note {
  display: block;       /* 改行扱いにする */
  padding-top: 1rem;   /* 上に余白を追加 */
}
/* TOPへ戻るボタンはPCでは非表示*/
  .back-to-top {
    display: none;
  }
}

/* スマホ用：768px以下で適用 */
  
@media (max-width: 768px) {
/* タイトル */
.header-inner {
  display: flex;
  flex-direction: row;          /* 横並びにするなら row */
  justify-content: space-between; /* 左右に分ける */
  align-items: center;          /* 縦方向中央揃え */
  height: 60px;                 /* ヘッダーの高さを指定 */
}

.site-title {
  font-size: 22px;
  margin: 0;                    /* 余白をリセット */
  text-align: center;
  line-height: 1.2;             /* 行間を調整 */
}

/* ナビ */
/* スマホではPCナビを隠す */
.main-nav { display: none; }
.mobile-nav { 
  display: block; 
}

/* SNSアイコンと電話ボタンを非表示 */
.nav-social,
.icon-instagram,
.icon-line,
.nav-btn.tel {
  display: none !important;
}

.nav-links {
  display: none;          /* 初期は非表示 */
  flex-direction: column; /* 縦並び */
  background: #fff;
  padding: 20px;
  width: 100%;
  z-index: 3000;
  position: fixed;        /* 画面に固定 */
  top: 60px;              /* ヘッダーの高さ分ずらす */
  left: 0;
}
.nav-links li a {
  font-size: 15px;
  padding: 16px 12px;
  line-height: 1.8;
  display: block;
}

.nav-links li {
  border-bottom: 1px dashed #666;
}

.nav-links li:first-child {
  border-bottom: none;
}

.nav-links li:last-child {
  border-bottom: none;
}

.nav-links.show {
  display: flex;          /* アイコンタップで表示 */
}

/* オーバーレイ */
.overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(55, 55, 55, 0.5);
  z-index: 2000;
}
.overlay.show {
  display: block;
}

/* 閉じるボタン */
.menu-close {
  position: absolute;
  top: 10px;
  right: 16px;
  font-size: 24px;
  background: none;
  border: none;
  cursor: pointer;
}
.menu-toggle {
  position: absolute;
  top: 10px;
  right: 10px;
  font-size: 18px;
  cursor: pointer;
  color: #533a34;
  background: transparent;
  padding: 8px;
  z-index: 2000;
}
.main-nav ul {
  flex-direction: row;
  gap: 10px;
  justify-content: center;
}
.main-nav a {
  font-size: 14px;
  padding: 10px 8px;
}

.floating-buttons {
  position: fixed;
  bottom: 40px;
  left: 0;
  width: 100%;                /* 画面いっぱい */
  display: flex;
  justify-content: space-between;
  z-index: 1000;
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.floating-buttons .btn {
  flex: 1;                     /* 均等に3分割 */
  text-align: center;
  padding: 12px;
  background: #fff;
  border-radius: 12px 12px 0 0; /* 上だけ角丸でタブ風 */
  font-size: 14px;
  text-decoration: none;
  box-shadow: 0 -2px 6px rgba(0,0,0,0.1);
  margin-bottom: 20px; /* フッターとの距離を確保 */
}

/* 色分け例 */
.btn.instagram { background: #fff; color: #fff; }
.btn.line { background: #fff; color: #fff; }
.btn.tel { background: #fff; color: #555; }

/* アイコン画像を中央に */
.floating-buttons img {
  width: 24px;
  height: 26px;
  display: block;
  margin: 0 auto;
}

/* ヒーローセクション */
.hero-block {
  flex-direction: column;
  height: auto;
}
.hero-catchcopy h2 {
  padding: 1rem;
  font-size: 1.6rem;
  line-height: 1.6;
}
.hero-image {
  clip-path: none;
}
.hero-image img {
  width: 100%;
  transform: none;
}

.hero-catchcopy {
  padding: 2rem;
  font-size: 1rem;
  line-height: 1.4;
}
.hero-catchcopy p {
    font-size: 1.2rem;   /* 少し小さめにして読みやすく */
    line-height: 1.6;    /* 行間を広げて詰まりを防ぐ */
    font-weight: normal; /* 強調は不要ならそのまま */
}

.hero-image::before {
  content: none;   /* 疑似要素を消す */
  background: none;
}

.hero-image img {
  width: 100%;
  height: auto;
  object-fit: cover;
  transform: none;
  border-radius: 8px;      /* 少しだけ角丸にする */
}
/* Information */
.info-block {
  text-align: left;     /* 左揃えに変更 */
  font-size: 0.9rem;      /* 少し小さめにして自然な改行 */
  line-height: 1.7;     /* 行間を広めにして読みやすく */
}

.info-block h2 {
  text-align: center;   /* 見出しは中央揃えのままでもOK */
  font-size: 1.2rem;
  margin-bottom: 1rem;
}

.info-block ul {
  padding:  0.5rem;   /* 左余白を少し広げて整える */
}

.info td, .info th {
  font-size: 0.9rem;
  padding: 0.5rem;
  line-height: 1.6;
}

.license-number {
  font-size: 14px;   /* スマホ用に文字を少し小さく */
}

/* お客様の声ページ */
.trouble-block {
  display: block;
  padding: 0 15px;
}
.trouble-block img {
  width: 100%;
  margin: 0 0 15px 0;
  border-radius: 5px;
}
.trouble-block p {
  width: 100%;
  margin-bottom: 15%;
  line-height: 1.8;
}
  /* お客様の声ページ */
.trouble-block {
  display: block;
  padding: 0 15px;
}
.trouble-block img {
  width: 100%;
  margin: 0 0 15px 0;
  border-radius: 5px;
}
.trouble-block p {
  width: 100%;
  margin-bottom: 15%;
  line-height: 1.8;
}
/* 不動産業者様向けページレスポンシブ */
.real-estate h2 {
  font-size: 1.2rem;   /* 見出しを少し小さめに */
}
.real-estate p {
 font-size: 0.85rem;
 padding: 0 1.5rem;
}

/*解体業者様向けページレスポンシブ */
.demolition h2 {
  font-size: 1.2rem;   /* 見出しを少し小さめに */
}

.catch-copy p {
  font-size: 0.9rem;     /* キャッチコピーも縮小 */
}
.service-points {
  padding: 0 18px;   /* 左右に16pxの余白 */
  box-sizing: border-box; /* 内側余白を含めて幅を計算 */
}
.service-points
.point-title {
  font-size: 0.85rem;
}

.service-points
.point-desc {
  font-size: 0.8rem;
}
/*不動産：解体業者向けフロー画像 */
.flow-image img {
  width: 100%;
  margin: 0 0 15px 0;
}

 /* お問い合せページ*/
 .contact-block {
  padding: 0 18px;   /* 左右に16pxの余白 */
  box-sizing: border-box; /* 内側余白を含めて幅を計算 */
 }
/* トップへ戻るボタン装飾 */
  .back-to-top {
    position: fixed;
    right: 16px;
    bottom: 140px; /* フローティングボタンと重ならない高さ */
    width: 55px;
    height: 55px;
    background: rgba(255, 255, 255, 0.95);
    color: #533a34;
    border-radius: 50%;
    text-align: center;
    font-size: 16px;
    font-weight: bold;
    text-decoration: none;
    line-height: 1.2;
    padding-top: 8px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.25);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
    z-index: 999;
  }

  .back-to-top span {
    font-size: 12px;
    display: block;
    margin-top: 2px;
  }

  .back-to-top.show {
    opacity: 1;
    pointer-events: auto;
  }

 /*スマホ用 会社情報の下の余白 */
  .company-block {
    margin-bottom: 220px;
  }
/* フッターのリンクはスマホで非表示 */
  .footer-links {
    display: none;
  } 
}