@charset "UTF-8";

/* お問い合わせページ専用CSS */

#labelContact {
    font-weight: bold; 
    color: #417d92 !important;
}

.column {
    padding-top: 8px !important;
    padding-bottom: 5px !important;
    padding-right: 0px !important;
    padding-left: 5px !important;
}

.complink {
    text-decoration: underline;
    color: #33658A !important;
    font-weight: bold;
    font-size: 14px !important;
}

.labelCont {
    padding-left: 10px !important;
    background-color: #F3F9F9 !important;
    border-bottom: 2px solid white !important;
    border-top: 0px !important;
}

.eleven.wide.column { 
    border-top: 0px !important;
    border-left: none !important;
    border-bottom: 2px solid white !important;
    background-color: #FAFCFC !important;
}

.compItem {
    padding-top: 5px;
    padding-bottom: 5px;
    margin-bottom: -20px !important;
}

/* --- 追加：緑色の電話番号ボタン用デザイン --- */
.phone-btn-wrap {
    margin-bottom: 15px; /* スマホで押しやすいように下に余白を追加 */
}

.phone-btn {
    background-color: #27ae60; /* 安心感のある緑色 */
    color: #ffffff !important; /* 文字色は白で読みやすく */
    padding: 10px 20px;
    border-radius: 5px; /* 角を少し丸くして柔らかい印象に */
    font-size: 18px; /* 番号を少し大きく */
    font-weight: bold;
    display: inline-block; /* ボタンのように振る舞わせる */
    text-decoration: none; /* 下線を消す */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1); /* 少し影をつけて立体感 */
    transition: background-color 0.3s ease; /* ホバー時のアニメーション */
    cursor: pointer;
}

.phone-btn:hover {
    background-color: #219150; /* マウスを乗せた時に少し濃くする */
}

.phone-icon {
    margin-right: 8px;
}

/* --- レスポンシブ対応（画面サイズごとの切り替え） --- */
@media screen and (max-width: 780px) {
    #homemain {
        font-size: 5vmin;
    }
    #callOrmail {
        margin-top: 20px; 
        margin-bottom: -10px;	    
    }
    .mapCol {
        padding-top: 10px !important;
    }
    #inquirylink {
        display: block;
    }
}

@media screen and (min-width: 780px) {
    #callOrmail {
        margin-top: 20px; 
        margin-bottom: 15px;	    
    }
    .mapCol {
        padding: 35px !important;
        padding-top: 0px !important;
    }	
    #inquirylink {
        display: none;
    }	
}

@media screen and (min-width: 1150px) {
    .contGrid {
        width: 87%;
    }
}

/* --- 追加：お問い合わせ送信ボタン用デザイン --- */
/* --- 修正版：お問い合わせ送信ボタン用デザイン --- */
/* --- 修正版：スマホでも改行させない送信ボタンデザイン --- */
.submit-btn-custom {
    background: linear-gradient(to right, #6ec5c1, #5ca0e3) !important;
    color: #ffffff !important;
    border-radius: 30px !important;
    border: none !important;
    padding: 15px 25px !important; /* 左右の余白を少し調整 */
    font-size: 16px !important;    /* スマホで1行に収まりやすいサイズに調整 */
    font-weight: bold !important;
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
    transition: background 0.3s ease !important;
    
    /* 改行を防ぐための重要設定 */
    white-space: nowrap !important; /* 絶対に改行させない */
    width: auto !important;         /* 文字数に合わせて幅を自動調整 */
    min-width: 280px !important;    /* ボタンとしての存在感を出す最小幅 */
    max-width: 90% !important;      /* 画面からはみ出さないように制限 */
    
    margin: 0 auto !important;
    cursor: pointer;
}

.submit-btn-custom:hover {
    background: linear-gradient(to right, #5ca0e3, #6ec5c1) !important;
}

.submit-btn-custom i {
    font-size: 1.2em !important;
    margin-right: 8px !important;
    margin-bottom: 0 !important;
}

/* メインテキストのスタイル（「この内容で送信する」） */
.submit-btn-custom .btn-text-main {
    font-size: 1em;
    margin-bottom: 3px;
}

/* サブテキストのスタイル（「今すぐお問い合わせを送信」） */
.submit-btn-custom .btn-text-sub {
    font-size: 0.8em;
    font-weight: normal; /* サブテキストは普通の太さ */
}