@charset "UTF-8";
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 100%;
	font: inherit;
	vertical-align: baseline;
	scroll-behavior: smooth;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
	display: block;
}
img {
	height: auto;
	vertical-align: bottom;
}
p {
	line-height: 120%;
}
a {
	text-decoration: none;
	color: #fffeef;
	word-break: break-all;
}
ol, ul {
	list-style: none;
}
body {
	background-attachment: fixed; /* 背景を固定してスクロールさせない */
}
input[type="submit"], input[type="button"], input[type="reset"] {
	-webkit-appearance: none;
	border-radius: 0;
}
.pc {
	display: block !important;
}
.sp {
	display: none !important;
}

/* ============================================================
   シェアページ共通レイアウト
   ============================================================ */

/* コンテンツ外（500pxより外）は共通背景を維持 */
body {
    margin: 0;
    padding: 0;
    /* 背景画像はメインサイトのものを継承（必要に応じて再定義） */
    background-image: url("../img/1st-anniversary/1st_bg_pc.png");
    background-repeat: no-repeat;
    background-position: center center;
    background-size: cover;
    background-attachment: fixed;
}

/* コンテナは透明にしてbodyの背景を見せる */
.main-container.share-page {
    background: transparent !important;
}

/* 500px幅のコンテンツエリア（内側のみ白） */
.share-wrapper {
    background-color: #ffffff;
    margin: 0 auto;
    min-height: 100vh;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.3);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* セクション1：メインビジュアル背景エリア */
.share-section-01 {
    width: 100%;
    position: relative;
    background-repeat: no-repeat;
    background-position: top center;
    background-size: contain;
    display: flex;
    flex-direction: column;
    justify-content: flex-end; /* ボタンを下端基準で配置 */
    align-items: center;
}

/* ボタン共通設定 */
.post-btn, .back-btn {
    display: block;
    transition: transform 0.3s ease;
    cursor: pointer;
    border: none;
    background: none;
    padding: 0;
    margin: 0 auto;
}

.post-btn:hover, .back-btn:hover {
    transform: scale(1.05);
}

.post-btn img, .back-btn img {
    width: 100%;
    height: auto;
    display: block;
}

/* ============================================================
   PC版の表示設定（画面幅 500px 以上）
   ============================================================ */
@media screen and (min-width: 500px) {
    .share-wrapper {
        width: 500px;
    }

    .share-section-01 {
        /* 1000x1796の比率（500x898） */
        height: 898px;
    }

    /* 投稿ボタン：画像下端から200pxの位置（130px余白 + 70px戻るボタン） */
    .post-btn {
        width: 406px; /* 812pxの半分 */
        margin-bottom: 40px; /* 下のボタンとの間隔 */
    }

    /* 戻るボタン：画像下端から70pxの位置 */
    .back-btn {
        width: 260px; /* 520pxの半分 */
        margin-bottom: 70px;
    }
}

/* ============================================================
   SP版の表示設定（画面幅 500px 未満）
   ============================================================ */
@media screen and (max-width: 499px) {
    .share-wrapper {
        width: 100%;
    }

    .share-section-01 {
        /* 比率を維持（179.6%） */
        height: 179.6vw; 
    }

    /* ボタンの幅と余白を画面幅(vw)に合わせて伸縮 */
    .post-btn {
        width: 81.2%; /* 406px / 500px */
        margin-bottom: 8vw; /* 130px / 898px相当 */
    }

    .back-btn {
        width: 52%; /* 260px / 500px */
        margin-bottom: 14vw; /* 70px / 898px相当（タップ領域確保のため少し広め） */
    }
}

/* ============================================================
   フッター（既存流用・調整）
   ============================================================ */
footer {
    background-color: #101920;
    width: 100%;
    margin-top: 0;
    color: #ffffff;
}

/* ============================================================
   背景画像出し分け（全デバイス共通）
   ============================================================ */
/* セクション1の背景画像 */
.ch-a { background-image: url("../img/1st-annniversary-share/1st_contents_05_share_a.png"); }
.ch-b { background-image: url("../img/1st-annniversary-share/1st_contents_05_share_b.png"); }
.ch-c { background-image: url("../img/1st-annniversary-share/1st_contents_05_share_c.png"); }
.ch-d { background-image: url("../img/1st-annniversary-share/1st_contents_05_share_d.png"); }
.ch-e { background-image: url("../img/1st-annniversary-share/1st_contents_05_share_e.png"); }
.ch-f { background-image: url("../img/1st-annniversary-share/1st_contents_05_share_f.png"); }
.ch-g { background-image: url("../img/1st-annniversary-share/1st_contents_05_share_g.png"); }

/* 投稿ボタン画像の出し分け（HTMLのimgタグに .post-img-src を付けてください） */
.ch-a .post-img-src { content: url("../img/1st-annniversary-share/1st_contents_05_share_a_btn.png"); }
.ch-b .post-img-src { content: url("../img/1st-annniversary-share/1st_contents_05_share_b_btn.png"); }
.ch-c .post-img-src { content: url("../img/1st-annniversary-share/1st_contents_05_share_c_btn.png"); }
.ch-d .post-img-src { content: url("../img/1st-annniversary-share/1st_contents_05_share_d_btn.png"); }
.ch-e .post-img-src { content: url("../img/1st-annniversary-share/1st_contents_05_share_e_btn.png"); }
.ch-f .post-img-src { content: url("../img/1st-annniversary-share/1st_contents_05_share_f_btn.png"); }
.ch-g .post-img-src { content: url("../img/1st-annniversary-share/1st_contents_05_share_g_btn.png"); }