@charset "UTF-8";

/* ==========================================================================
   1. Foundation (ベーススタイル)
   ========================================================================== */

/* 基本的なリセット */
html, body, div, p, ul, li, table, tbody, tr, td, a, img, span, b {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    font: inherit;
    vertical-align: baseline;
}

table {
    border-collapse: collapse;
    border-spacing: 0;
}

/* 基本設定 */
html {
    /* 常にスクロールバーを表示し、レイアウトのガタつきを防ぐ */
    overflow-y: scroll;
}

body {
    line-height: 1.6;
    font-family: sans-serif;
    /* iOSでの文字サイズ自動調整を防止 */
    -webkit-text-size-adjust: 100%;
    /* フォントのアンチエイリアスを調整 */
    -webkit-font-smoothing: antialiased;
    /* 長い単語を折り返す */
    word-break: break-all;
}

img {
    border: 0;
    /* 画像下の余白を削除 */
    vertical-align: top;
}

a {
    color: #1e90ff;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}


/* ==========================================================================
   2. Project Styles (このページ固有のスタイル)
   ========================================================================== */

/* 全体を囲むラッパー */
.p-mfa-wrapper {
    max-width: 600px;
    margin: 0 auto;
}

/* ヘッダーセクション */
.p-mfa-header {
    background: #ffffff;
    padding: 0;
    margin: 0 auto;
}

.p-mfa-logo {
    width: 240px !important; /* メールクライアント対策で!importantを残す */
    max-width: 240px;
    height: auto;
}

/* メインコンテンツセクション */
.p-mfa-main {
    margin: 0 16px;
}

.p-mfa-main__lead {
    margin: 24px 0 0;
    font-size: 14px;
    line-height: 1.5;
}

.p-mfa-main__title {
    margin: 24px 0 0;
    font-size: 24px;
    font-weight: bold;
    line-height: 1.5;
    letter-spacing: 0.6px;
}

.p-mfa-main__description {
    margin: 24px 0 0;
    font-size: 14px;
    line-height: 1.5;
}

/* 詳細情報ボックス */
.p-mfa-details {
    margin: 24px 0 0;
    padding: 24px;
    font-size: 14px;
    line-height: 1.75;
    border-radius: 8px;
    border: solid 1px #d9d9d9;
}

.p-mfa-details__title {
    display: block;
    margin: 0;
    font-size: 16px;
    line-height: 1;
}

.p-mfa-details__heading {
    display: block;
    margin: 24px 0 0;
}

.p-mfa-details__text {
    display: block;
    margin: 0;
}

/* フッターセクション */
.p-mfa-footer {
    margin: 64px 16px 0;
    font-size: 14px;
}

/* 注意事項・コールセンターエリア */
.p-mfa-section-title {
    margin: 0 0 1em 0;
    padding: 4px 0;
    font-size: 18px;
    border-top: 1px solid #aaaaaa;
    border-bottom: 1px solid #aaaaaa;
}
.p-mfa-footer .p-mfa-section-title {
    margin-top: 2em; /* 2番目以降のタイトルに上のマージンを追加 */
}
.p-mfa-footer .p-mfa-section-title:first-child {
    margin-top: 0; /* 最初のタイトルはマージンなし */
}

.p-mfa-footer ul {
    margin: 0 0 0 1em;
    padding: 0;
}

.p-mfa-footer .p-mfa-footer-text {
    margin: 1em 0 0 0;
}

.p-mfa-footer .p-mfa-tel-info {
    margin: 24px 0 8px;
}

.p-mfa-footer .p-mfa-tel-primary {
    font-size: 24px;
}

.p-mfa-footer .p-mfa-tel-secondary {
    font-size: 18px;
}

.p-mfa-footer .p-mfa-contact-details {
    margin: 0;
}

/* 会社情報エリア */
.p-mfa-company-info {
    margin: 24px 0 2em 0;
    padding: 2em 0 0 0;
    font-family: sans-serif;
    font-size: 12px;
    color: #777777;
    border-top: 1px solid #aaaaaa;
}

/* トラッキングビーコン用 */
.p-mfa-beacon {
    width: 1px !important; /* 表示に影響を与えないように固定 */
}

/* ==========================================================================
   3. Responsive (レスポンシブスタイル)
   ========================================================================== */

@media screen and (max-width: 480px) {
    /* HTMLメールでは!importantが有効な場合があるため残す */
    .p-mfa-wrapper img {
        width: 100% !important;
        height: auto !important;
    }
    .p-mfa-logo {
        width: 180px !important; /* スマホではロゴを少し小さくする */
    }
}

/* エラーメッセージ用のタイトル色 */
.p-mfa-main__title--error {
    color: red;
}

/* 情報メッセージ用のタイトル色 */
.p-mfa-main__title--info {
    color: #3d6b99; /* 落ち着いた青色 */
}

/* 有効期限切れ・リンク無効画面の情報ボックス */
.p-mfa-message-box {
    margin: 24px 0 0;
    padding: 24px;
    font-size: 14px;
    line-height: 1.75;
    border-radius: 8px;
    border: solid 1px #d9d9d9;
}

.p-mfa-message-box__text {
    display: block;
    margin: 0;
    font-size: 16px;
    line-height: 1;
}

/* 連続するテキストの間に余白を追加 */
.p-mfa-message-box__text + .p-mfa-message-box__text {
    margin-top: 1.2em;
}

/* 詳細情報の下などに配置する、アクション/情報提供用のリンク */
.p-mfa-action-link {
    display: block;
    margin: 24px 0 0;
    font-size: 14px;
    line-height: 1.5;
}