/*
Theme Name:不動産
Text Domain:
Version:
Description:
Author:かねむー
*/

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    font-size: 62.5%;
}

ul {
    list-style-type: none;
}

p {
    font-size: 1.6rem;
}

body {
    font-family: "Helvetica Neue", Arial, "Hiragino Kaku Gothic ProN", "Hiragino Sans", Meiryo, sans-serif;
    line-height: 1.6;
    color: #333;
    margin: 0;
    padding: 0;
}

header {
    position: sticky;
    top: 0;
    width: 100%;
    background-color: #003366; /* 信頼感のあるネイビー */
    color: white;
    height: 10rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.header-name {
    margin-left: 4rem;
}

.header-name h1 {
    font-size: 2vw;
    display: flex;
    align-items: center;
}

.header-name h1::before {
    content: "";
    display: inline-block;
    width: 8rem;
    height: 8rem;
    background: url(./images/logo_fix.png) no-repeat center / contain;
}

.hero-text br {
    display: none;
}

.header__menu__pc {
    display: flex;
    align-items: center;

}

.header__menu__pc ul{
    display: flex;
    gap: 8rem;
    margin-right: 4rem;
}

.header__menu__pc a {
    font-size: 1.8rem;
    color: white;
    text-decoration: none;
}

.hamburger {
    display: none;
}

.drawer-menu {
    display: none;
}


/* ヘッダー以下の要素を真ん中に寄せる */
.container {
        width: 80%;
        max-width: 100rem;
        margin: auto;
        padding: 2rem;
    }


/* ヒーローエリア（一番上の目立つ部分） */
.hero {
    background-image: linear-gradient(rgba(222, 222, 222, 0.4)), url(./images/23938741_s.jpg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 6rem 2rem;
    text-align: center;
    border-bottom: solid 5px #003366;
}

.container-hero {
    background-color:#fff;
    width: inherit;
    height: 30rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
}

.hero h2 {
    font-size: 2.5rem;
    color: #003366;
}

.hero-text {
    margin: 3rem 0;
}

.container-hero span {
    color: #d9534f; /* 強調の赤 */
    font-weight: bold;
    font-size:3rem;
}



.line-container {
    text-align: center;
    margin-top: 5rem;
}

.line-btn {
    display: inline-block;     /* ボタンとして幅と高さを持たせる */
    background-color: #06C755; /* LINEのブランドカラー（緑） */
    color: white;              /* 文字色を白に */
    padding: 1.5rem 3rem;        /* 上下左右に余白を作る */
    text-decoration: none;     /* リンクの下線を消す */
    font-weight: bold;
    border-radius: 5rem;       /* ここで角を丸くする！ */
    box-shadow: 0 4px 0 #05a346; /* 少し立体感を出す（任意） */
    transition: 0.3s;          /* ホバー時の動きを滑らかに */
    font-size: 1.6rem;
}



/* 強みのセクション */
.features {
    display: flex;
    justify-content: space-around;
    padding: 4rem 0;
    flex-wrap: wrap;
}

.feature-box {
    background: #fff;
    border: 0.1rem solid #ddd;
    padding: 2rem;
    width: 40%;
    height: 20rem;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    text-align: center;
    box-shadow: 0 0.2rem 0.5rem rgba(0,0,0,0.1);
    margin-bottom: 2rem;
}

.feature-box h3 {
    font-size: 1.8rem;
    margin-bottom: 2rem;
}

.feature-box p {
    line-height: 1.5;
}


/* 会社概要テーブルのスタイル */
.company-info {
    width: 100%;
    margin-bottom: 2rem;
}

.company-info-title {
    display: flex;           /* 左右の線と文字を横並びにする */
    align-items: center;      /* 垂直方向を真ん中揃え */
    justify-content: center;  /* 全体を中央に寄せる */
    font-size: 2rem;
    margin-bottom: 4rem;
    color: #333;
}

.company-info-title::before,
.company-info-title::after {
    content: "";
    flex-grow: 1;            /* 線の長さを自動で伸ばす */
    height: 0.1rem;             /* 線の太さ */
    background-color: #555;  /* 線の色 */
    max-width: 50rem;         /* 線の最大長（お好みで調整してください） */
    opacity: 0.5;
}

.company-info-title::before {
    margin-right: 2rem;
}

.company-info-title::after {
    margin-left: 2rem;
}

.company-table {
    width: 100%;
    border-collapse: collapse; /* 線を一本にまとめる */
    border: 0.1rem solid #e0e0e0; /* 外枠の線 */
    font-size: 1.5rem;
    line-height: 1.6;
}

.company-table th,
.company-table td {
    padding: 1.5rem; /* 上下左右の余白 */
    text-align: left; /* 左揃え */
    border-bottom: 0.1rem solid #e0e0e0; /* 行ごとの区切り線 */
}

.company-table th {
    background-color: #f9f9f9; /* 項目側の背景色（画像に近い色） */
    width: 30%; /* 項目名の幅を固定 */
    font-weight: bold;
    color: #333;
    vertical-align: middle;
}

.company-table td {
    background-color: #fff;
    color: #555;
    vertical-align: middle;
}

/* 最後の行の線は外枠と重なるので消す、またはそのままでもOK */
.company-table tr:last-child th,
.company-table tr:last-child td {
    border-bottom: none;
}





/* お問い合わせフォーム */
.contact-form {
    background: #e9ecef;
    padding: 4rem 2rem;
    border-radius: 0.8rem;
}

.contact-form h2 {
    font-size: 2rem;
}

/* Contact Form 7 の自動生成されるメッセージ枠を調整 */
fieldset {
border: none !important; /* 枠線を消す */
margin: 0 !important;   /* 余計な余白を消す */
padding: 0 !important;  /* 余計な内余白を消す */
}

/* メッセージが表示された時（送信完了時など）だけ表示したい場合 */
fieldset {
display: none;
}

.form-group {
    margin-bottom: 1.5rem;
}

label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: bold;
}

input[type="text"], input[type="email"], textarea {
    width: 100%;
    padding: 1rem;
    border: 0.1rem solid #ccc;
    border-radius: 0.4rem;
    box-sizing: border-box; /* 幅をぴったり合わせる */
}

/* Contact Form 7 のボタンを今のデザインに合わせる */
.wpcf7-submit {
background: #003366;
color: white;
padding: 1.5rem 3rem;
border: none;
border-radius: 0.4rem;
cursor: pointer;
font-size: 1.6rem;
width: 100%;
}

footer {
    text-align: center;
    padding: 2rem;
    background: #003366;
    color: white;
    margin-top: 4rem;
}