/* 基本的なリセットと設定 */
body {
    margin: 0;
    padding: 0;
    font-family: serif;
    line-height: 1.6;
    color: #333;
    background-color: #f8f8f8;
}

/* ヘッダー */
header {
    height: 670px; /* ★デフォルト(PC)の高さを670pxに固定 */
    width: 100%;
    position: relative;
    overflow: hidden; /* はみ出しを隠す */
    background-image: url('images/background.jpg'); /* 背景画像 */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

/* オーバーレイ画像共通スタイル */
.overlay-image {
    position: absolute;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    display: block; /* display:blockは不要な場合が多いが念のため */
}

/* オーバーレイ画像 (PC用) */
.overlay-image-pc {
    width: 720px;
    height: 670px;
    object-fit: contain; /* または cover */
    /* PCではこちらが表示される */
    display: block;
}

/* オーバーレイ画像 (SP用) */
.overlay-image-sp {
    width: 100%; /* ★SPでは幅100% */
    height: auto; /* ★SPでは高さ自動でアスペクト比維持 */
    position: static; /* ★SPでは通常配置に戻す */
    transform: none; /* ★SPではtransform解除 */
    /* デフォルトでは非表示 */
    display: none;
}

/* メインコンテンツ (シングルカラム) */
main {
    /* ↓↓ カラム幅を720pxに固定 ↓↓ */
    width: 720px;  /* 幅を720pxに固定 */
    max-width: 100%; /* 画面幅が720pxより狭い場合、はみ出さないように */
    margin: 0 auto 0 auto; /* 上下に40px、左右は自動で中央寄せ */
    padding: 20px 40px; /* 内側の余白 */
    background-color: #fff;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    box-sizing: border-box; /* paddingを含めて幅を計算 */
}

/* 見出し */
main h1 {
    text-align: center;
    margin-bottom: 30px;
    color: #555;
}

/* 段落 */
main p {
    margin-bottom: 1em;
}

/* 署名 */
main .signature {
    text-align: right;
    margin-top: 40px;
}

/* --- 画面幅が768px以下になった場合の調整 --- */
@media (max-width: 768px) {
    /* ★ヘッダーの高さを自動調整に変更 */
    header {
        height: auto;
        /* SPでは背景画像も上部に合わせるなど調整が必要なら追記 */
        /* background-position: top center; */
    }

    /* ★PC用オーバーレイを非表示 */
    .overlay-image-pc {
        display: none;
    }

    /* ★SP用オーバーレイを表示 */
    .overlay-image-sp {
        display: block; /* 表示する */
        position: relative; /* 背景の上に載せるため relative に変更 */
        left: 0;            /* 位置調整をリセット */
        transform: none;      /* transform をリセット */
    }

    /* メインコンテンツの調整 */
    main {
        width: 90%;
        padding: 20px;
    }
}

/* --- メールマガジン登録フォーム --- */
.newsletter-form-container {
    background-color: #252E4c; /* 黒っぽい半透明背景 */
    padding: 30px;
    /* box-shadow: 0 4px 15px rgba(0,0,0,0.3); */ /* 影は少し弱めるか削除してもOK */
    box-shadow: 0 2px 8px rgba(0,0,0,0.15); /* 少し弱めた影 */
    color: #fff; /* 基本文字色を白に */
    box-sizing: border-box; /* paddingを含めて幅を計算 */

    /* ▼▼ PC・SP共通の基本配置 (ヘッダーの下) ▼▼ */
    width: 720px;       /* PCでの幅をメインカラムに合わせる */
    max-width: 100%;     /* 画面幅が狭い場合の最大幅 (主にSPで効く) */
    margin: 0 auto;  /* 上下マージン0px、左右autoで中央寄せ */
}

/* フォームの見出し */
.newsletter-form h3 {
    margin-top: 0;
    margin-bottom: 25px; /* 見出し下の余白 */
    text-align: center;
    font-size: 1.4em;
    font-weight: bold;
    color: #fff; /* 見出しの色 */
}

/* フォームグループ (ラベルと入力欄のセット) */
.newsletter-form .form-group {
    margin-bottom: 18px; /* 各グループ下の余白 */
}

/* ラベル */
.newsletter-form label {
    display: block;
    margin-bottom: 6px;
    font-weight: bold;
    font-size: 0.9em;
    color: #eee; /* ラベルの色 */
}

/* 入力欄 */
.newsletter-form .form-control {
    width: 100%;
    padding: 12px;
    border: 1px solid #777; /* 境界線の色を少し濃く */
    border-radius: 4px;
    background-color: #fff; /* 入力欄の背景色を白に */
    color: #333; /* 入力欄の文字色 */
    font-size: 1em;
    box-sizing: border-box; /* paddingを含めて幅を計算 */
}
/* 入力欄のプレースホルダー */
.newsletter-form .form-control::placeholder {
    color: #888;
}
/* 入力欄フォーカス時のスタイル (任意) */
.newsletter-form .form-control:focus {
    outline: none;
    border-color: #aaa;
    box-shadow: 0 0 5px rgba(200, 200, 200, 0.5);
}

/* 送信ボタン */
.newsletter-form .submit-button {
    width: 100%;
    padding: 15px;
    border: none;
    border-radius: 4px;
    background-color: #dd3f39; /* 目立つボタン色 (例: オレンジ) */
    color: #fff;
    font-size: 1.1em;
    font-weight: bold;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, transform 0.1s ease; /* 変形のアニメーションを追加 */
    margin-top: 10px; /* 上の要素との間に少し余白 */
}

/* 送信ボタンのホバー時 */
.newsletter-form .submit-button:hover {
    background-color: #bc312c; /* ホバー時の色を少し濃く */
}
/* 送信ボタンのアクティブ時 (クリック中) */
.newsletter-form .submit-button:active {
    transform: scale(0.98); /* クリック時に少し縮小 */
}


/* --- 画面幅が768px以下になった場合の調整 --- */
@media (max-width: 768px) {

    /* ▼▼ SP表示時のフォーム調整 ▼▼ */
    .newsletter-form-container {
        width: 100%; 
        margin: 0 auto; /* SP用の上下マージン */
        padding: 25px;     /* SP用のパディング */
    }

    /* フォーム内要素のSP調整 */
    .newsletter-form h3 {
        font-size: 1.3em;
        margin-bottom: 20px;
    }
    .newsletter-form .submit-button {
        padding: 14px;
        font-size: 1.05em;
    }
    
}

/* --- メインコンテンツ内 レタースタイル --- */

main {
    padding: 40px 50px; /* main内の左右パディングを少し広げる */
    background-color: #ffffff; /* 背景色を白に */
}

main h2 {
    text-align: center;
    margin-top: 0; /* セクション見出しの上のマージン */
    margin-bottom: 30px; /* セクション見出しの下のマージン */
    font-size: 2em; /* 見出しサイズ調整 */
    font-weight: bold;
    color: #333;
    line-height: 1.4;
}
main h2:first-child {
    margin-top: 10px; /* main内の最初のh2のマージンを調整 */
}


main h3 {
    font-weight: bold;
    color: #444;
}

main p {
    margin-bottom: 1em; /* 段落下のマージン */
    line-height: 1.8; /* 行間 */
    font-size: 16px; /* 基本フォントサイズ (px指定も可能) */
    color: #333;
}

/* main内の特定のテキストを中央揃えにしたい場合など */
.text-center {
    text-align: center;
}

/* 動画スクショ画像 */
.video-screenshot {
    margin: 35px auto　10px auto; /* 上下のマージンと中央揃え */
    text-align: center;
}

.video-screenshot img {
    max-width: 100%;
    height: auto;
    border: 1px solid #ddd;
    box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* 影を少し濃く */
    display: block; /* 中央揃えにしやすくする */
    margin-left: auto;
    margin-right: auto;
}

/* プレゼント強調エリア */

.present-highlight strong {
    font-size: 1.3em; /* 文字サイズ */
    color: #c0392b; /* 強調色 (赤系) */
    display: block;
    font-weight: bold;
    text-align: center;
    margin-bottom: 0;
}

/* プロフィールセクション */
.profile-section {
    margin-top: 50px; /* プロフィールセクションの上のマージン */
}
.profile-section h2 {
    margin-bottom: 20px; /* profile見出し下の余白 */
    font-size: 1.8em; /* profile見出しサイズ */
}

.profile-content {
    /* display: flex; PCでは横並び */
    align-items: flex-start; /* 上端揃え */
    gap: 40px; /* 画像とテキストの間隔 */
    background-color: #f9f9f9; /* プロフィール背景を少し変える (任意) */
    padding: 60px; /* 内側余白 (任意) */
    border-radius: 8px; /* 角丸 (任意) */
}

.profile-content img {
    max-width: 100%;
}

.profile-image {
    flex-shrink: 0;
    width: 180px; /* 画像の幅 */
    text-align: center;
}

.profile-image img {
    width: 100%;
    height: auto;
    border-radius: 50%; /* 円形に */
    border: 4px solid #fff; /* 白い枠線 */
    box-shadow: 0 2px 6px rgba(0,0,0,0.1); /* 円形に影 */
}

.profile-text {
    flex-grow: 1; /* 残りのスペースをテキストが取る */
}

.profile-text h3 {
    text-align: left; /* 名前は左揃え */
    margin-top: 5px; /* 画像との高さ微調整 */
    margin-bottom: 20px; /* 名前下の余白 */
    font-size: 1.5em; /* 名前サイズ */
    color: #333;
}

.profile-text p {
    line-height: 1.7;
    font-size: 15px; /* プロフィール本文フォントサイズ */
}


/* --- メインコンテンツ SP表示調整 --- */
@media (max-width: 768px) {
    main {
        width: 100%; 
        padding: 30px 20px; /* SPではmainのpaddingを狭める */
    }

    main h2 {
        font-size: 1.6em;
        margin-top: 40px;
        margin-bottom: 25px;
    }
    main p {
        font-size: 15px; /* SPでのフォントサイズ */
    }

    .present-highlight {
        padding: 20px;
        margin: 40px auto;
    }
    .present-highlight strong {
        font-size: 1.2em;
    }

    hr.section-divider {
        margin: 50px auto;
    }

     /* プロフィール部分 SP */
     .profile-content {
        flex-direction: column;
        align-items: center;   /* 一応残しておきます */
        gap: 5px;
        padding: 25px 15px;
    }

    .profile-image {
        width: 150px;          /* 幅は固定 */
        margin-bottom: 5px;    /* 下マージン */
        margin-left: auto;     /* 左マージンを自動に */
        margin-right: auto;    /* 右マージンを自動に */
    }

    .profile-text p:first-child { /* .profile-text 内の最初のpタグを対象 */
        margin-top: 0;            /* "profile"の上の余白をなくす */
        margin-bottom: 8px;       /* "profile"の下（名前の上）の余白を少し設定 */
        font-size: 1.3em;
        font-weight: bold;        /* 少し太字に (任意) */
        text-align: center;       /* 中央揃えに */
        color: #555;              /* 色を少し濃く (任意) */
        /* 必要であれば font-size も調整 */
    }

    .profile-text h3 {
        text-align: center; /* SPでは名前も中央揃え */
        font-size: 1.5em;
        margin-bottom: 15px;
    }
    .profile-text p {
        font-size: 14px; /* SPでのプロフィール本文フォントサイズ */
        text-align: left; /* 本文は左揃え */
    }
}

/* --- フッター --- */
.site-footer {
    padding: 25px 20px; /* 上下のパディング */
    margin-top: 60px;   /* mainコンテンツとの間のスペース */
    text-align: center; /* テキストを中央揃え */
    background-color: #f8f8f8; /* 背景色 (bodyと同じか少し変えてもOK) */
    border-top: 1px solid #e0e0e0; /* 上部に細い境界線 */
}

.site-footer p {
    margin: 0; /* pタグのデフォルトマージンを削除 */
    font-size: 13px; /* 文字サイズを小さめに */
    color: #777;    /* 文字色をグレー系に */
    line-height: 1.5; /* 行間 */
}

.site-footer a {
    color: #555; /* リンクの色を少し濃いグレーに */
    text-decoration: none; /* 下線をデフォルトで非表示に */
    transition: color 0.2s ease, text-decoration 0.2s ease;
}

.site-footer a:hover {
    color: #111; /* ホバー時に色を濃く */
    text-decoration: underline; /* ホバー時に下線を表示 */
}