@charset "utf-8";
/*===========================
add
===========================*/
/* ===========================
   メインビジュアル完成形
=========================== */
#mainVisual {
    position: relative;
    width: 100%;
    height: 100vh;
    min-height: 500px;
    overflow: hidden;
    clip-path: polygon(0 30%, 100% 0%, 100% 70%, 0 100%);
}
.mainVisualBg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    clip-path: polygon(0 30%, 100% 0%, 100% 70%, 0 100%);
}
.mainVisualBg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#mainVisual img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
/* キャッチコピー */
/*#mainVisual .mainCatch {
  position: absolute;
  top: 18%;
  left: 6%;
  z-index: 2;

  font-size: 3.6vw;
  line-height: 1.5;
  font-weight: 900;
  letter-spacing: 0.15em;

  color: #333;
  text-shadow:
    0 0 2px #fff,
    0 0 6px #fff,
    0 0 12px #fff;
}*/
/* SP */
@media screen and (max-width: 768px) {
    #mainVisual {
        clip-path: polygon(0 15%, 100% 0%, 100% 85%, 0 100%);
    }
    .mainVisualBg {
        position: absolute;
        inset: 0;
        overflow: hidden;
        clip-path: polygon(0 15%, 100% 0%, 100% 85%, 0 100%);
    }
}
/* ===============================
   Our Service Tabs
================================ */
.serviceTabs {
    position: relative;
    margin-top: 80px;
}
/* 背景（画面全幅） */
.service-bg {
    position: absolute;
    top: 72px;
    left: 50%;
    transform: translateX(-50%);
    width: 100vw;
    height: calc(100% - 72px);
    background: #3290b3; /* ← 統一カラー */
    z-index: -1;
}
/* 中央寄せ */
.serviceTabs .inner {
    max-width: 1200px;
    margin: 0 auto;
}
/* タブ */
.tab-nav {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}
@media screen and (max-width: 768px) {
    .tab-nav {
        grid-template-columns: repeat(3, 1fr);
    }
}
.tab {
    background: #eef4fb;
    padding: 24px 16px;
    border-radius: 10px 10px 0 0;
    font-weight: 700;
    cursor: pointer;
    color: #333;
}
@media screen and (max-width: 768px) {
    .tab {
        font-size: 0.7em;
    }
}
.tab.active {
    background: #3290b3; /* 背景と同色 */
    color: #fff;
}
/* コンテンツ */
.tab-contents {
    padding: 80px 0;
}
.tab-content {
    display: none;
    color: #fff;
}
.tab-content.active {
    display: block;
}
.tab-contents h3 {
    font-size: 2.5em;
    text-align: left;
    font-weight: bold;
    margin-bottom: 0.5em;
}
.tab-contents h3:after {
    height: 0;
}
.tabs {
    position: relative;
    z-index: 2;
    margin-bottom: -5px;
}
.tab {
    background: #eef4fb;
    padding: 21px 16px;
    border-radius: 10px 10px 0 0;
    margin-bottom: 5px;
}
.tab.active {
    background: #3290b3;
    color: #fff;
    margin-bottom: 0;
}
.tab-content ul {
    margin: 1rem 0;
    padding: 0rem;
    list-style-type: none;
}
.tab-content ul li {
    border-radius: 5px;
    line-height: 2;
    margin: 5px 0px;
}
.tab-content ul li:before {
    font-family: "Font Awesome 5 Free";
    content: '\f0a9';
    padding: 10px;
    font-weight: 900;
    color: #fff;
}
.tab-content ul li a {
    color: #FFFFFF;
    text-decoration: none;
}
/* ===== リストを2列にする ===== */
.tab-content ul {
    margin: 1rem 0;
    padding: 0;
    list-style: none;
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 10px 20px; /* 縦 横 */
}
/* li の見た目はそのまま */
.tab-content ul li {
    border-radius: 5px;
    line-height: 2;
    margin: 0;
}
/* スマホでは1列 */
@media screen and (max-width: 768px) {
    .tab-content ul {
        grid-template-columns: 1fr;
    }
}
/* 1カラムにする専用クラス */
.tab-content ul li.full {
    grid-column: 1 / -1;
}
/* =========================
   News セクション
========================= */
.topNews {
    background: #3290b3;
    color: #fff;
    padding: 50px 10px;
}
.topNews-inner {
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 260px 1fr;
    gap: 60px;
}
/* 左側 */
.topNews-head .label {
    font-size: 0.9rem;
    opacity: 0.9;
}
.topNews-head h2 {
    font-size: 3rem;
    margin: 10px 0 30px;
    padding-left: 0;
}
.topNews-head h2:after {
    height: 0;
}
.newsBtn {
    display: inline-block;
    padding: 12px 26px;
    background: #fff;
    color: #3f77b8;
    border-radius: 30px;
    font-weight: bold;
    text-decoration: none;
}
/* 右側リスト */
.topNews-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.topNews-list li {
    display: grid;
    grid-template-columns: 110px 120px 1fr 30px;
    align-items: center;
    padding: 20px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.4);
}
.topNews-list .date {
    font-size: 0.9rem;
}
.topNews-list .cat {
    font-size: 0.75rem;
    border: 1px solid #fff;
    border-radius: 20px;
    padding: 4px 12px;
    text-align: center;
    margin-right: 15px;
}
.topNews-list .cat.other {
    opacity: 0.8;
}
.topNews-list .cat.recruit {
    background: #fff;
    color: #3f77b8;
}
.topNews-list .title {
    color: #fff;
    text-decoration: none;
    padding-right: 20px;
}
.topNews-list .arrow {
    width: 26px;
    height: 26px;
    border-radius: 50%;
    border: 1px solid #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}
/* hover */
.topNews-list li:hover .title {
    text-decoration: underline;
}
/* =========================
   SP
========================= */
@media (max-width: 768px) {
    .topNews-inner {
        grid-template-columns: 1fr;
        gap: 40px;
    }
    .topNews-list li {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    .topNews-list .arrow {
        display: none;
    }
}
/* =========================
   Footer
========================= */
.siteFooter {
    background: #1E7B9D;
    color: #fff;
}
.siteFooter a {
    color: #fff;
    text-decoration: none;
}
.siteFooter a:hover {
    text-decoration: none;
}
/* CTA */
.footerCta {
    display: grid;
    grid-template-columns: 1fr;
}
.ctaBox {
    padding: 70px 20px;
    text-align: center;
    color: #fff;
    text-decoration: none;
    position: relative;
}
.ctaBox.recruit {
    background: #1e7b9d;
}
.ctaBox.contact {
    background: #137093;
}
.ctaBox .jp {
    display: block;
    font-size: 1.4rem;
    font-weight: bold;
    margin-bottom: 15px;
}
.ctaBox .en {
    display: block;
    font-size: 3rem;
    font-weight: 700;
    margin-top: 5px;
    opacity: 0.9;
}
/* hover */
.ctaBox:hover {
    opacity: 0.9;
}
/* ナビ */
.footerNavWrap {
    background: #0a6486;
    padding: 40px 20px;
}
.footerNav {
    max-width: 1100px;
    margin: 0 auto;
    padding: 0;
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px 40px;
}
.footerNav li a {
    color: #fff;
    text-decoration: none;
    font-size: 0.95rem;
}
.footerNav li a:hover {
    text-decoration: underline;
}
/* コピーライト */
.footerCopy {
    background: #045573;
    text-align: center;
    padding: 15px;
    font-size: 0.8rem;
}
/* =========================
   SP
========================= */
@media (max-width: 768px) {
    .footerCta {
        grid-template-columns: 1fr;
    }
    .ctaBox .en {
        font-size: 2.2rem;
    }
    .footerNav {
        gap: 15px 20px;
    }
}
/* ローディング背景(白) */
#loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff; /* ← 背景色 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    transition: opacity 1.5s ease; /* ← 背景+ロゴをまとめて消す */
}
/* ロゴフェードイン */
.loading-logo {
    width: 350px; /* ← ロゴサイズ変更 */
    opacity: 0;
    animation: fadeIn 2s ease forwards;
}
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: scale(0.9);
    }
    to {
        opacity: 1;
        transform: scale(1);
    }
}
/* ローディング終了後：全体をフェードアウト */
#loading.hide {
    opacity: 0;
    pointer-events: none;
}
/* ==============================
   経営理念セクション
============================== */
.philosophy {
    background: linear-gradient(135deg, #f8f9fb 0%, #ffffff 100%);
    padding: 60px 20px;
}
.philosophy-inner {
    max-width: 900px;
    margin: 0 auto;
}
/*.philosophy-title {
  font-size: 36px;
  font-weight: bold;
  text-align: center;
  letter-spacing: 0.1em;
  margin-bottom: 70px;
  position: relative;
}

.philosophy-title::after {
  content: "";
  width: 60px;
  height: 3px;
  background: #1f3c88;
  display: block;
  margin: 20px auto 0;
}*/
/* リスト */
.philosophy-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.philosophy-list li {
    display: flex;
    align-items: flex-start;
    gap: 30px;
    margin-bottom: 40px;
    padding-left: 20px;
    border-left: 3px solid #3995B7;
}
.philosophy-list .num {
    font-size: 28px;
    font-weight: bold;
    color: #3995B7;
    min-width: 60px;
    letter-spacing: 0.05em;
    font-style: italic;
}
.philosophy-list p {
    font-size: 20px;
    line-height: 2;
    margin: 0;
    color: #333;
    font-family: "Noto Serif JP", sans-serif;
}
/* スマホ対応 */
@media (max-width: 768px) {
    .philosophy {
        padding: 0 20px;
    }
    .philosophy-title {
        font-size: 26px;
    }
    .philosophy-list li {
        flex-direction: column;
        gap: 10px;
    }
    .philosophy-list .num {
        font-size: 20px;
    }
    .philosophy-list p {
        font-size: 16px;
    }
}
/* ===============================
   フォーム全体の構造
=================================*/
.estimate-form {
    /*max-width: 1000px;
    margin: 0 auto;*/
    border-top: 1px solid #ccc;
}
.form-row {
    display: flex;
    border-bottom: 1px solid #ddd;
}
.form-label-area {
    width: 300px;
    background-color: #EFEFEF;
    padding: 25px;
    font-weight: bold;
    display: flex;
    align-items: center;
    flex-shrink: 0;
}
.form-input-area {
    flex-grow: 1;
    padding: 25px;
}
/* ===============================
   入力要素・パーツ
=================================*/
input[type="text"], input[type="email"], input[type="tel"], select, textarea {
    width: 100%;
    max-width: 500px;
    padding: 12px;
    border: 1px solid #ddd;
    border-radius: 4px;
    box-sizing: border-box;
    font-size: 16px;
}
.grid-2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    max-width: 500px;
}
/* 必須ラベル */
.required {
    background: #e60012;
    color: #fff;
    font-size: 11px;
    padding: 2px 6px;
    margin-right: 10px;
    border-radius: 3px;
    white-space: nowrap;
}
/* ===============================
   【重要】チェックボックス・ラジオのズレ解消
=================================*/
.radio-group, .checkbox-grid, .form-input-area label {
    display: flex;
    align-items: center; /* 垂直中央揃え */
    cursor: pointer;
}
.form-input-area label {
    gap: 8px; /* 記号と文字の距離 */
    line-height: 1.5;
    margin-bottom: 0;
    margin-right: 15px;
}
/* ブラウザ固有のマージンをリセット */
input[type="radio"], input[type="checkbox"] {
    margin: 0;
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    accent-color: #2b6cb0; /* モダンブラウザでの色調整 */
}
/* 検討場所のグリッド */
.checkbox-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 15px 10px;
}
/* ===============================
   レスポンシブ (スマホ)
=================================*/
@media (max-width: 768px) {
    .form-row {
        flex-direction: column;
    }
    .form-label-area {
        width: 100%;
        padding: 5px;
        font-size: 15px;
    }
    .form-input-area {
        width: 100%;
        padding: 5px;
        box-sizing: border-box;
        margin-bottom: 20px;
    }
    input[type="text"], select, textarea {
        max-width: 100%;
    }
    .checkbox-grid {
        grid-template-columns: repeat(2, 1fr); /* スマホ2カラム */
    }
    .radio-group {
        gap: 15px 25px;
    }
}
/* アニメーション用 */
#reformAddressFields {
    transition: all 0.3s ease-out;
    overflow: hidden;
}
#reformAddressFields.hide {
    max-height: 0;
    opacity: 0;
    margin-top: 0;
}
/* ===============================
   洗練されたボタンデザイン
=================================*/
.btn-area {
    text-align: center;
    margin: 60px 0;
}
.submit-btn {
    appearance: none;
    -webkit-appearance: none;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 15px; /* テキストと矢印の間隔 */
    /* カラー・サイズ */
    background: #333; /* 落ち着いたダークトーン（または企業のメインカラー） */
    color: #fff;
    width: 100%;
    max-width: 400px;
    padding: 20px 40px;
    /* 形状 */
    border: none;
    border-radius: 0; /* あえて角を丸めない、またはごく僅かな角丸(4px)が今風 */
    /* タイポグラフィ */
    font-size: 18px;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-decoration: none;
    /* アニメーション準備 */
    cursor: pointer;
    transition: all 0.3s ease;
    position: relative;
}
/* 矢印アイコンのスタイル */
.arrow-icon {
    transition: transform 0.3s ease;
}
/* ホバー時の挙動 */
.submit-btn:hover {
    background: #e47430; /* 差し色（オレンジ系）に変化 */
    opacity: 0.9;
    box-shadow: 0 10px 25px rgba(228, 116, 48, 0.3);
}
.submit-btn:hover .arrow-icon {
    transform: translateX(8px); /* 矢印が右にスッと動く */
}
/* クリックした時の沈み込み */
.submit-btn:active {
    transform: translateY(2px);
}
/* スマホ対応 */
@media (max-width: 768px) {
    .submit-btn {
        width: 90%;
        padding: 18px 30px;
        font-size: 16px;
    }
}