@charset "utf-8";
/* ============================================================
「なりたい私」実現キャンペーン LP スタイルシート
対象HTML: narita_watashi_campaign_v3.html
使用フォント: Google Fonts "Klee One" / "Noto Sans JP"
ページの内に以下3行を追加してください:
※このファイルの構成について
- レイアウト（幅）は「外枠いっぱい（全幅）」方式（末尾「レイアウト幅の上書き」参照）。
- viewportを使わない前提のため、スマホ向けはタッチ端末判定で文字を拡大（末尾のメディアクエリ）。
- 見出し(h2)・講座タイトル(h3)は、サイト共通CSSの初期装飾（グレー背景・水色下線など）に
負けないよう、!important で campaign デザイン（ピンク下線・Kleeフォント）を固定しています。
============================================================ */
:root {
--pink-main: #ec5f8c;
--pink-deep: #d94577;
--pink-cta: #e0356e;
--pink-cta-dark: #c4245b;
--pink-light: #ffe6ee;
--pink-tag-bg: #fdeef3;
--pink-bg: #fff5f8;
--pink-petal-1: #f7a8bf;
--pink-petal-2: #f6c9d6;
}
.campaign-lp {
max-width: none; /* ← 幅の固定を解除。全幅に広がります */
width: 100%;
margin: 0 auto;
padding: 0 0 80px;
font-family: "Noto Sans JP", "Hiragino Kaku Gothic ProN", sans-serif;
color: #444;
line-height: 1.9;
background: var(--pink-bg);
}
.campaign-lp * { box-sizing: border-box; }
/* ===== ヘッダーバナー ===== */
.campaign-banner {
position: relative;
background: linear-gradient(160deg, #f2547f 0%, #ee6690 45%, #f38aa8 100%);
padding: 36px 24px 44px;
overflow: hidden;
text-align: center;
}
.petal {
position: absolute;
background: var(--pink-petal-2);
border-radius: 0 50% 50% 50%;
opacity: 0.6;
pointer-events: none;
}
.petal.p1 { width: 22px; height: 22px; top: 60px; right: 60px; transform: rotate(20deg); background: var(--pink-petal-1); }
.petal.p2 { width: 16px; height: 16px; top: 110px; left: 40px; transform: rotate(-40deg); }
.petal.p3 { width: 26px; height: 26px; bottom: 90px; left: 20px; transform: rotate(60deg); background: var(--pink-petal-1); }
.petal.p4 { width: 18px; height: 18px; top: 20px; right: 90px; transform: rotate(-15deg); }
.petal.p5 { width: 14px; height: 14px; bottom: 130px; right: 50px; transform: rotate(80deg); }
.banner-photo {
position: relative;
z-index: 1;
background: #fff;
border-radius: 6px;
padding: 10px;
margin: 0 auto 28px;
max-width: 600px; /* PCで横に広げても写真が大きくなりすぎないよう上限を設定 */
width: 90%;
box-shadow: 0 6px 18px rgba(0,0,0,0.12);
}
.banner-photo img {
display: block;
width: 100%;
aspect-ratio: 4 / 3;
object-fit: cover;
border-radius: 3px;
}
.banner-title {
position: relative;
z-index: 1;
font-family: "Klee One", "Noto Sans JP", sans-serif;
color: #fff;
font-size: 36px;
font-weight: 600;
margin: 0 0 4px;
text-shadow: 0 2px 6px rgba(0,0,0,0.15);
}
.banner-subtitle {
position: relative;
z-index: 1;
font-family: "Klee One", "Noto Sans JP", sans-serif;
color: #fff;
font-size: 22px;
margin: 0 0 22px;
text-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.banner-tagline {
position: relative;
z-index: 1;
display: inline-block;
background: rgba(255,255,255,0.16);
border: 1.5px solid rgba(255,255,255,0.7);
border-radius: 30px;
padding: 14px 28px;
color: #fff;
}
.banner-tagline .line1 { font-size: 18px; letter-spacing: 0.05em; }
.banner-tagline .line2 { font-size: 22px; font-weight: 700; margin-top: 4px; letter-spacing: 0.02em; }
/* ===== 導入文（イントロ） ===== */
.campaign-intro {
background: #fff;
border-radius: 12px;
padding: 30px 30px;
margin: -20px 20px 40px;
position: relative;
z-index: 2;
box-shadow: 0 4px 16px rgba(217,69,119,0.08);
}
.campaign-intro p { margin: 0 0 16px; font-size: 20px; }
.campaign-note { font-size: 16px; color: #b5849a; margin-top: 20px !important; }
/* ===== セクション見出し（h2）：共通CSSに負けないよう固定 ===== */
.campaign-lp h2.section-title {
background: none !important;
border: none !important;
box-shadow: none !important;
font-family: "Klee One", "Noto Sans JP", sans-serif !important;
font-size: 28px !important;
font-weight: 600 !important;
color: var(--pink-deep) !important;
text-align: center !important;
margin: 50px 20px 26px !important;
padding: 0 !important;
position: relative !important;
}
.campaign-lp h2.section-title::after {
content: "" !important;
display: block !important;
width: 60px !important;
height: 3px !important;
background: var(--pink-main) !important;
border-radius: 2px !important;
margin: 10px auto 0 !important;
}
/* ===== 講座ブロック ===== */
.course-block {
background: #fff;
border: 1px solid var(--pink-light);
border-radius: 12px;
padding: 26px 28px;
margin: 0 20px 22px;
box-shadow: 0 3px 10px rgba(217,69,119,0.06);
}
/* 対象ラベル（タグ） */
.course-target {
display: inline-block;
background: var(--pink-tag-bg);
color: var(--pink-deep);
font-size: 17px;
font-weight: 700;
padding: 6px 15px 6px 13px;
border-left: 4px solid var(--pink-deep);
border-radius: 3px;
margin: 0 0 12px;
letter-spacing: 0.02em;
}
.course-catch { font-size: 18px; color: #c47c94; margin: 0 0 6px; }
/* 講座タイトル（h3）：共通CSSのグレー背景・水色下線に負けないよう固定 */
.campaign-lp .course-block h3.course-name {
background: none !important;
border: none !important;
border-bottom: 3px solid var(--pink-main) !important; /* ← ピンクの下線 */
box-shadow: none !important;
font-family: "Klee One", "Noto Sans JP", sans-serif !important;
font-size: 25px !important;
font-weight: 600 !important;
color: #4a3540 !important;
margin: 0 0 18px !important;
padding: 0 0 10px !important;
line-height: 1.5 !important;
letter-spacing: 0.02em !important;
}
.course-detail { margin: 0; }
.course-detail dt {
font-weight: 700;
font-size: 17px;
color: var(--pink-deep);
margin-top: 14px;
letter-spacing: 0.05em;
}
.course-detail dd { margin: 4px 0 0; font-size: 19px; }
.course-detail dd.deadline { color: var(--pink-cta-dark); font-weight: 700; }
/* 講師（写真＋氏名の横並び） */
.instructor-row {
display: flex;
align-items: center;
gap: 12px;
margin-top: 4px;
}
img.instructor-photo {
width: 72px;
height: 72px;
min-width: 72px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--pink-light);
background: #fbeef2; /* 画像読み込み前の背景色 */
}
/* CTAボタン */
.course-cta {
display: inline-block;
margin-top: 12px;
background: linear-gradient(135deg, var(--pink-cta) 0%, var(--pink-cta-dark) 100%);
color: #fff !important;
font-size: 19px;
font-weight: 700;
padding: 13px 32px;
border-radius: 30px;
text-decoration: none !important;
box-shadow: 0 4px 10px rgba(196,36,91,0.35);
letter-spacing: 0.03em;
}
.course-cta::after { content: " \2192"; } /* → 矢印（以前の画面に合わせて → に。文字化け防止のためUnicodeエスケープで指定） */
/* =============================================
レイアウト幅の上書き（「全幅」方式）
・外枠(#contents_wrapper / #contents / #main_contents)の
幅制限・左右余白を解除し、ブラウザ幅いっぱいに表示します。
・このページ専用CSSなので、他ページには影響しません。
============================================= */
#contents_wrapper,
#contents,
#main_contents {
width: 100% !important;
max-width: 100% !important;
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
float: none !important;
box-sizing: border-box !important;
}
/* パンくず（HOME > ...）だけは端に寄りすぎないよう左右に余白を戻す */
#pankuzu {
padding: 10px 20px;
}
/* 右サイドバー要素があれば非表示（無ければ無害） */
#sub_contents,
#sidebar,
.side {
display: none !important;
}
/* =============================================
スマホ・タブレット（タッチ端末）のみ文字を拡大
・画面幅ではなく「タッチ操作かどうか」で判定するため、
viewport指定が無くても有効です。
・PC（マウス操作）の表示やグローバルメニューには影響しません。
・数字＝ピクセル。大きすぎ／小さすぎの場合はここの数値だけ調整すればOKです。
・見出し(h2)・講座タイトル(h3)は上の固定指定に合わせ、こちらも !important で拡大。
============================================= */
@media (pointer: coarse) {
.banner-title { font-size: 42px; }
.banner-subtitle { font-size: 26px; }
.banner-tagline .line1 { font-size: 21px; }
.banner-tagline .line2 { font-size: 26px; }
.campaign-intro p { font-size: 25px; }
.campaign-note { font-size: 19px; }
.campaign-lp h2.section-title { font-size: 33px !important; }
.course-target { font-size: 20px; }
.course-catch { font-size: 22px; }
.campaign-lp .course-block h3.course-name { font-size: 30px !important; }
.course-detail dt { font-size: 20px; }
.course-detail dd { font-size: 24px; } /* 講師名・日程・料金など */
.course-cta { font-size: 23px; }
}