@charset "utf-8";

/* =========================================
   準備中ページ（page-profile.html）用スタイル
   ※既存デザイン（#5e4b35, #fcfbf8など）に合わせて調整
   ========================================= */

.coming-soon-section {
    /* サイト共通の背景色 */
    background-color: #fcfbf8;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.coming-soon-inner {
    width: 100%;
    max-width: 700px;
    text-align: center;
    margin-bottom: 50px;
}

/* メッセージボックス（サービスカードのデザインを踏襲） */
.msg-box {
    background-color: #ffffff;
    padding: 60px 40px;
    border-radius: 20px;
    /* ヘッダーと同じふんわりした影 */
    box-shadow: 0 4px 15px rgba(0,0,0,0.05); 
    border: 1px solid #eaeaea; /* 薄い境界線 */
}

/* "Coming Soon..." の文字 */
.msg-title {
    font-size: 40px;
    font-weight: bold;
    color: #5e4b35; /* サイト共通の濃い茶色 */
    margin-bottom: 30px;
    letter-spacing: 0.1em;
    font-family: "Helvetica Neue", Arial, sans-serif;
}

/* 説明文 */
.msg-text {
    font-size: 16px;
    line-height: 2.2; /* コンセプトエリアと同じ行間 */
    margin-bottom: 50px;
    color: #5e4b35;
}

/* ホームへ戻るボタン（コンタクトボタンのデザインを踏襲） */
.btn-back-home {
    display: inline-block;
    background-color: #5e4b35; /* 濃い茶色 */
    color: #ffffff; /* 白文字 */
    padding: 15px 60px;
    border-radius: 50px; /* 角丸（Pill shape） */
    text-decoration: none;
    font-weight: bold;
    font-size: 16px;
    letter-spacing: 0.1em;
    box-shadow: 0 4px 6px rgba(0,0,0,0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background-color 0.3s;
}

/* ボタンのホバーアクション */
.btn-back-home:hover {
    background-color: #6A4E38; /* 少し明るい茶色（コンタクト枠の色） */
    transform: translateY(-3px); /* ふわっと浮く */
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

.btn-back-home .arrow {
    display: inline-block;
    margin-left: 10px;
    transition: transform 0.3s ease;
}

.btn-back-home:hover .arrow {
    transform: translateX(5px);
}

/* スマホ対応 */
@media (max-width: 768px) {
    .msg-box {
        padding: 40px 20px;
    }
    .msg-title {
        font-size: 28px;
    }
    .msg-text {
        font-size: 14px;
        text-align: left; /* スマホでは左寄せの方が読みやすい場合あり */
    }
    .btn-back-home {
        padding: 14px 40px;
        width: 100%; /* 幅いっぱいに */
        box-sizing: border-box;
        text-align: center;
    }
}