/* ===================================
   Reset & Basic Settings
   =================================== */
html {
    box-sizing: border-box;
    font-size: 16px; /* 基本の文字サイズ */
}

*, *:before, *:after {
    box-sizing: inherit;
}

body {
    margin: 0;
    padding: 0;
    font-family: sans-serif; /* 基本のフォントファミリー */
    line-height: 1.6;
    background-color: #ffffff; /* ページの背景色（白） */
    color: #333333; /* 基本の文字色 */
}

/* ===================================
   LP Container
   =================================== */
.lp-container {
    max-width: 100%; /* コンテナの最大幅を親要素に合わせる */
    margin: 0 auto;  /* 中央寄せ */
    text-align: center; /* 内部の要素（特に画像）を中央寄せ */
}

/* 画像のスタイル */
.lp-container img {
    max-width: 100%; /* 画像が親要素の幅を超えないようにする */
    height: auto;    /* 高さを自動調整して画像の比率を保つ */
    vertical-align: top; /* 画像の下にできる謎の余白を消すおまじない */
    width: 100%; /* 基本的に画像を画面幅いっぱいに表示 */
}

/* 画像の最大幅を設定（PCでの閲覧時に広がりすぎないように） */
/* LPデザイン画像の実際の横幅に合わせて調整してください。例: 800px */
.lp-container > img {
    max-width: 800px; 
}


/* ===================================
   CTA (Call To Action) Buttons
   =================================== */
.cta-buttons {
    /* ボタンエリア全体のスタイル */
    padding: 40px 20px; /* ボタンエリアの上下左右の余白 */
    background-color: #ffffff; /* 背景色を白に設定 */
}

/* 各ボタンのリンク（aタグ）のスタイル */
.cta-buttons a {
    display: block; /* リンクをブロック要素にして、縦に積まれるようにする */
    margin: 0 auto; /* 中央寄せ */
    cursor: pointer; /* カーソルを指マークにする */
    transition: transform 0.2s ease-in-out; /* ホバー時のアニメーション */
    max-width: 500px; /* ボタンの最大幅を指定。デザインに合わせて調整してください */
}

/* 2つ目以降のボタン（ここでは電話ボタン）の上に余白を追加 */
.cta-buttons a + a {
    margin-top: 20px; /* ボタン間の垂直方向の隙間 */
}

/* PCでホバーした時に少しだけ拡大するエフェクト */
@media (hover: hover) {
    .cta-buttons a:hover {
        transform: scale(1.03); /* 少し拡大 */
        opacity: 0.9; /* 少し透明にする（ホバー効果が画像自体にあるので控えめに） */
    }
}


/* ===================================
   Responsive (for Smartphones)
   画面幅が600px以下の場合のスタイル
   =================================== */
@media (max-width: 600px) {
    .cta-buttons {
        padding: 30px 15px; /* スマートフォン用の余白 */
    }

    .cta-buttons a {
        max-width: 90%; /* スマホではボタン幅を画面に合わせる */
    }

    .cta-buttons a + a {
        margin-top: 15px; /* スマホでのボタン間の隙間を少し狭める */
    }
}

/* ===================================
   Footer
   =================================== */
footer {
    background-color: #f7f7f7; /* フッターの背景色（薄いグレー） */
    color: #333333; /* フッターの文字色 */
    padding: 30px 20px; /* フッターの上下左右の余白 */
    text-align: center; /* テキストを中央寄せ */
    border-top: 1px solid #e0e0e0; /* 上部に境界線 */
}

.footer-content p {
    margin: 8px 0; /* 段落の上下の余白 */
    font-size: 14px; /* 文字サイズを少し小さく */
    line-height: 1.5;
}

.footer-content a {
    color: #007bff; /* リンクの色を青に */
    text-decoration: none; /* リンクの下線を消す */
    transition: opacity 0.2s; /* ホバー時のトランジション */
}

@media (hover: hover) {
    .footer-content a:hover {
        text-decoration: underline; /* ホバー時に下線を表示 */
    }
}

.footer-content .copyright {
    margin-top: 20px; /* 上の要素との間に少し余白を追加 */
    font-size: 12px; /* コピーライトの文字をさらに小さく */
    color: #666666; /* 少し薄い文字色に */
}

/* スマホ用のフッタースタイル調整 */
@media (max-width: 600px) {
    footer {
        padding: 20px 15px;
    }
    .footer-content p {
        font-size: 13px;
    }
    .footer-content .copyright {
        font-size: 11px;
    }
}