@charset "UTF-8";
/* CSS Document */

@media screen and (max-width: 750px) {
	html {
		font-size: clamp(10px, 2.56px + 2.33vw, 20px);
		font-family: YakuHanRP, "M PLUS Rounded 1c", sans-serif;
		font-weight: 400;
		font-style: normal;
		font-feature-settings: "palt" 1, "halt" 1, "kern" 1;
	}

	body {
		overflow-x: hidden;
		font-size: 1em;
		container-type: inline-size;
		animation: width-calc 0s linear infinite;
		animation-timeline: allow-end;
	}

	/* 💡 画面幅表示（デバッグ用：本番公開時に不要であれば body::before ごと削除してください） */
	body::before {
		display: block !important;
		position: fixed !important;
		top: 10px !important;
		left: 10px !important;
		background: #000000 !important;
		color: #ffffff !important;
		padding: 8px 15px !important;
		font-size: 14px !important;
		font-family: sans-serif !important;
		font-weight: bold !important;
		z-index: 999999 !important;
		border-radius: 5px !important;
		pointer-events: none !important;
	}

	.sp {
		display: block;
	}

	.pc {
		display: none;
	}

	main {
		overflow-x: hidden;
		overflow-y: hidden;
		min-width: 320px;
	}

	/* --- TOPへ戻るボタン --- */
	.top_btn {
		position: fixed;
		bottom: 10px;
		right: 10px;
		width: 23%;
		min-width: 73px;
		max-width: 120px;
		z-index: 100;
		border: none;
		background: none;
		opacity: 0;
		/* 初期状態は非表示（JSで制御） */
		transition: opacity 0.3s ease;
	}

	/* --- TOPヘッダー・波背景 --- */
	.top {
		width: 100%;
		min-width: 320px;
		position: relative;
	}

	.top img {
		width: 100%;
	}

	.top::after{
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(50, 50, 50, 0.8); /* 黒の半透明（不透明度50%） */
		z-index: 1; /* 画像より上に配置 */
}
.comingsoon{
	position: absolute;
	z-index: 3;
	top: 40%;
	left: 50%;
    transform: translateX(-50%);
	width: 80% !important;

}

.title {
    width: 100%;
    height: auto;
    aspect-ratio: 750 / 109;
    padding-top: 0.7rem;
    background-color: #EA5964;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 41.76 109' shape-rendering='geometricPrecision'%3E%3Cpath d='M0,0 H41.76 V85 A24,24 0 0,1 0,85 Z' fill='black'/%3E%3C/svg%3E");
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 41.76 109' shape-rendering='geometricPrecision'%3E%3Cpath d='M0,0 H41.76 V85 A24,24 0 0,1 0,85 Z' fill='black'/%3E%3C/svg%3E");
    -webkit-mask-repeat: repeat-x;
    mask-repeat: repeat-x;
    -webkit-mask-size: auto 100%;
    mask-size: auto 100%;
    -webkit-mask-position: left top;
    mask-position: left top;
	margin-bottom: calc(1em - 1px) !important;  /* 下のブロックに1pxだけ重ねて、フチの隙間を完全に隠す */
    padding-bottom: 1px !important;
    
}

	.title img {
		width: 60%;
	}

	/* --- キャンペーンフレーム情報 --- */
	.CpFrame {
		position: relative;
		background: #FFF0F2;
	}

	.cpframe_in_01 {
		width: 90%;
		margin: auto;
		text-align: right;
	}

	.cpframe_in_01 .m-logo {
		width: 40%;
		margin: 0px -1em 0.5em auto;
	}

	.cpframe_in_02 {
		margin: 0px auto;
		color: #9C2B00;
	}

	.cpfr_in_02 {
		position: relative;
	}

	.cpframe_in_in {
		position: relative;
		margin: 2.5em auto auto auto;
		background-color: #FFFFE6;
		padding: 0px 0px 1em 0px;
	}

	.CpFrame-title {
		width: 90%;
	}

	.date {
		color: #9C2B00;
		text-decoration: solid 3px #fff;
		font-size: clamp(15px, -0.5px + 5.17vw, 38.25px);
		font-feature-settings: "palt" 1;
		margin: 0px auto 0.5em;
		text-align: center;
		font-weight: 700;
	}

	.date_num {
		font-size: clamp(20px, -0.67px + 6.89vw, 51px);
		font-weight: 800;
	}

	p.CpFrame_text {
		color: #9C2B00;
		font-size: clamp(14px, 6.56px + 2.33vw, 24px);
		line-height: 1.7em;
	}

	.CpFrame_text span:not([class]) {
		font-size: 1.5em;
	}

	.CpFrame_text .marker {
		background-color: #F7C2CE;
		padding: 0px 0.2em;
		margin-right: 0.1em;
		font-weight: 800;
	}

	.cpframe_in_title {
		width: 100%;
		margin: auto;
		background-color: #FFD800;
		font-size: 1.5em;
	}

	.cpframe_in_title p {
		color: #652116;
		padding: 0.2em 0px;
		font-weight: 700;
	}

	/* --- オブジェクト・スタンプ等のフレックスレイアウト --- */
	.CpFrame_flex {
		width: 90%;
		margin: 2em auto 1em auto;
		display: flex;
		text-align: center;
		justify-content: space-between;
	}

	.CpFrame_flex_in {
		width: 33%;
		text-align: center;
	}

	.CpFrame_flex_in img {
		width: 85%;
	}

	.cpframe_in_in .CpFrame_flex_in p {
		color: #9C2B00;
		font-size: 1em;
		line-height: 1.4em;
		width: 108%;
		letter-spacing: -0.05em;
		margin-left: -4%;
	}

	.CpFrame_flex .CpFrame_flex_in p span:not([class]),
	.method .CpFrame_flex_in p span:not([class]) {
		font-size: 0.8em !important;
		display: inline-block !important;
		line-height: 1.1 !important;
	}

	.CpFrame_flex_in .red {
		color: #E60044;
		font-size: 1em;
	}

	/* --- 注意書き見出し（下三角付き） --- */
	.cpframe_att_title {
		background-color: #FFD800;
		width: 75%;
		max-width: 578px;
		margin: auto auto 1em auto;
		color: #652116;
		font-size: 1.6em;
		text-align: center;
		position: relative;
		padding-top: 0.3em;
		padding-bottom: 0.3em;
	}

	.cpframe_att_title>* {
		margin: 0;
		padding: 0;
	}

	.cpframe_att_title::after {
		content: "";
		position: absolute;
		bottom: -0.9em;
		left: 50%;
		transform: translateX(-50%);
		width: 1.08em;
		height: 0.9em;
		background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 12' preserveAspectRatio='none'><polygon points='0,0 24,0 12,12' fill='%23FFD800'/></svg>");
		background-size: 100% 100%;
		background-repeat: no-repeat;
	}

	.cpframe_att_title p {
		color: #652116;
		font-weight: 500;
		letter-spacing: 0.15em;
		font-weight: 700;
	}

	/* --- 注記テキスト・装飾キャラクター（浮遊） --- */
	.cpframe_att_text {
		color: #E60044;
		font-size: 1em;
		font-weight: 600;
		margin: 0px auto 1em auto;
		line-height: 1.3em;
	}

	.cpframe_att_text:nth-of-type(1) {
		font-size: 1.25em;
		margin-bottom: 0.8em;
		margin-top: 1.5em;
	}

	.cpframe_att {
		position: relative;
		-webkit-text-size-adjust: 100% !important;
		text-size-adjust: 100% !important;
	}

	.cpframe_att .cpfr_in_02_img {
		width: 80%;
		margin: 1em auto;
	}

	.chara_float {
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		width: 100%;
	}

	.cpframe_att .chara_float img:nth-of-type(1) {
		position: absolute;
		width: clamp(83px, -11.42px + 29.51%, 210px);
		height: auto;
		top: 3.5%;
		left: -1.8%;
	}

	.cpframe_att .chara_float img:nth-of-type(2) {
		position: absolute;
		width: clamp(83px, -11.42px + 29.51%, 210px);
		height: auto;
		top: 5%;
		right: -3.5%;
	}

	.cpframe_att .chara_float img:nth-of-type(3) {
		position: absolute;
		width: clamp(28px, -0.28px + 8.84%, 66px);
		height: auto;
		top: 43%;
		left: 3%;
	}

	.cpframe_att .chara_float img:nth-of-type(4) {
		position: absolute;
		width: clamp(27px, 0.23px + 8.37%, 63px);
		height: auto;
		top: 38%;
		right: 2%;
	}

	.cpframe_att .chara_float img:nth-of-type(5) {
		position: absolute;
		width: clamp(87px, -12.7px + 31.16%, 221px);
		/* 元のサイズに戻しました */
		height: auto;
		bottom: 1%;
		left: 0px;
	}

	.cpframe_att .chara_float img:nth-of-type(6) {
		position: absolute;
		width: clamp(87px, -12.7px + 31.16%, 221px);
		/* 元のサイズに戻しました */
		height: auto;
		bottom: 0.5%;
		right: 1%;
	}

	/* --- 対象商品ブロック --- */
	.item {
		width: 100%;
		margin: auto;
		background-color: #FFF0F2;
	}

	.item_inner {
		width: 90%;
		margin: 0px auto;
		padding-bottom: 3em;
	}

	.item .item_text {
		width: max-content;
		background-color: #fff;
		border: solid 2px #EA5964;
		border-radius: 15px;
		margin: 1.5em auto 1.5em;
		text-align: left;
		padding: 1em 0px;
	}

	.item .item_text p {
		color: #EA5964;
		width: 89%;
		margin: auto 2em;
		line-height: 2;
		white-space: nowrap;
	}

	.item .item_text p span {
		font-size: 1.5em;
	}

	.item .item_text p:nth-of-type(2) {
		margin-bottom: 0.7em;
	}

	.item .item_text .att {
		color: #808080;
		line-height: 1.5;
	}

	.item .item_text .att span {
		font-size: 0.85em;
	}

	/* --- パッケージ共通装飾テキスト類 --- */
	.pkg_title {
		margin-bottom: -1em;
	}

	.pkg_in_st .drink_title_st {
		background-color: #f06c84;
		color: #fff !important;
		width: 80%;
		border-radius: 1em;
		padding: 0;
		margin: 2em auto 0em;
		font-size: 1.3em;
	}

	.drink_title_houji {
		background-color: #d3a12a;
		color: #fff !important;
		width: 80%;
		border-radius: 1em;
		padding: 0;
		margin: 2em auto 0em;
		font-size: 1.3em;
	}

	.drink_name {
		font-size: 1.1em;
		margin: 1em auto 1em;
		line-height: 1.2em;
	}

	.pkg_inner_01 .pkg_in_st p,
	.pkg_inner_02 .pkg_in_st p {
		color: #E73656;
	}

	.pkg_inner_01 .pkg_in_hou p,
	.pkg_inner_02 .pkg_in_hou p {
		color: #9C2B00;
	}

	.pkg_open_text {
		font-size: 1em !important;
		margin: 1em auto 2em;
		line-height: 1.2em;
	}

	/* --- パッケージ全体（大枠） --- */
	.pkg_inner_01,
	.pkg_inner_02 {
		position: relative;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		align-items: center;
		width: 100%;
		max-width: 751px;
		margin: 5em auto;
		border-radius: 20px;
		padding-top: 0px;
	}

	.pkg_inner_01 .pkg_in_title,
	.pkg_inner_02 .pkg_in_title {
		position: absolute;
		width: 31%;
		top: -10vw;
		left: -5%;
		z-index: 3 !important;
	}

	.pkg_inner_01 img,
	.pkg_inner_02 img {
		width: 90%;
	}

	/* 初期状態で表示されている商品画像 */
	.pkg_in_pkg {
		margin-top: 6em;
	}

	/* ★★★ パッケージ開閉コンテンツ（アコーディオン領域） ★★★ */
	.pkg_in_open {
		width: 90%;
		max-height: 0px;
		/* 初期状態は閉じる */
		margin: auto;
		opacity: 0;
		overflow: hidden;
		transition: max-height 0.5s ease-out, opacity 0.5s ease-out;
		text-align: center;
		background-color: #fff;
		border-radius: 15px;
	}

	/* 【整理】元のすぐ真下に配置（JSでmax-heightをピタッと動かす仕様） */
	.pkg_in_open.is-visible {
		max-height: none;
		opacity: 1;
		padding-bottom: 2em;
	}

	.pkg_in_open img {
		width: 80%;
	}

	.pkg_open {
		width: 60%;
		margin: auto;
	}

	.pkg_open img {
		width: 100%;
	}

	/*  1. テキストの初期設定：最初は透明にして隠しておく */
	.pkg_in_text {
		opacity: 0;
		display: none;

		/* ふわっと表示・非表示を切り替えるアニメーション */
		transition: opacity 0.5s ease, visibility 0.5s ease;
	}

	/*  2. ボタンが押されて「is-visible」がついたら最優先で表示する */
	.pkg_in_text.is-visible {
		opacity: 1 !important;
		display: block;
		!important;

		/* 元々入っていた余白や幅の設定があればここに記述します */
		margin-top: 2.5em;
		width: 70%;
		display: block;
		/* 念のためブロック要素化 */
	}

	.pkg_in_pkg.is-visible {
		margin-top: 1em;
	}


/* ---  第1弾：ピンクパッケージ背景・ボタン定義 --- */
    .pkg_inner_01 {
        border: solid 0.5em #F0919B;
        box-shadow: 0.5em 0.5em 0px #f5b6c2;
        
        /* 左右が20%ずつ綺麗に見切れるように、全体の開始位置と横幅を「12.4個分」で厳密に計算した1枚絵です！ */
        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 517.82 3500'%3E%3Cpath d='M-8.35,0 A24,24 0 0,0 33.41,0 A24,24 0 0,0 75.17,0 A24,24 0 0,0 116.93,0 A24,24 0 0,0 158.69,0 A24,24 0 0,0 200.45,0 A24,24 0 0,0 242.21,0 A24,24 0 0,0 283.97,0 A24,24 0 0,0 325.73,0 A24,24 0 0,0 367.49,0 A24,24 0 0,0 409.25,0 A24,24 0 0,0 451.01,0 A24,24 0 0,0 492.77,0 A24,24 0 0,0 534.53,0 L517.82,3500 L0,3500 Z' fill='%23f9d2d4'/%3E%3C/svg%3E"),
            repeating-linear-gradient(-251deg, #FDF0F2, #FDF0F2 3.72vw, #fff 3.72vw, #fff 7.44vw);
        
        background-position: left 8em, center;
        background-size: 100% auto, 100% auto;
        background-repeat: no-repeat, repeat;

        position: relative;
        z-index: 0;
        border-radius: 20px;
		
    }

/* --- 第2弾：水色パッケージ背景・ボタン定義 --- */
    .pkg_inner_02 {
        margin: 0 auto;
        border: solid 0.5em #ADDCFA;
        box-shadow: 0.5em 0.5em 0px #e5e5f0;
        
        /* 水色も全く同じ見切れ比率で統一し、すっきり綺麗な元のぷっくりサイズに直しました！ */
        background-image:
            url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 517.82 3500'%3E%3Cpath d='M-8.35,0 A24,24 0 0,0 33.41,0 A24,24 0 0,0 75.17,0 A24,24 0 0,0 116.93,0 A24,24 0 0,0 158.69,0 A24,24 0 0,0 200.45,0 A24,24 0 0,0 242.21,0 A24,24 0 0,0 283.97,0 A24,24 0 0,0 325.73,0 A24,24 0 0,0 367.49,0 A24,24 0 0,0 409.25,0 A24,24 0 0,0 451.01,0 A24,24 0 0,0 492.77,0 A24,24 0 0,0 534.53,0 L517.82,3500 L0,3500 Z' fill='%23E9F8FF'/%3E%3C/svg%3E"),
            repeating-linear-gradient(-251deg, #D6EDFD, #D6EDFD 3.72vw, #fff 3.72vw, #fff 7.44vw);
        
        background-position: left 8em, center;
        background-size: 100% auto, 100% auto;
        background-repeat: no-repeat, repeat;

        position: relative;
        z-index: 0;
        border-radius: 20px;
    }

	/* 【整理】開いている（is-visible）時の背景位置の調整（元のすぐ下へ集約） */
	.pkg_inner_01.is-visible,
	.pkg_inner_02.is-visible {
		position: relative;
		width: 100%;
		max-width: 751px;
		background-position: left 12.8em, center;
	}

	/* --- パッケージ用開閉ボタン共通ベース --- */
	.pkg_btn-01,
	.pkg_btn-02 {
		z-index: 1;
		position: relative;
		margin: 1.5em auto;
		background-size: contain;
		border: none;
		background-color: transparent;
		background-repeat: no-repeat;
		width: 80%;
		height: 5em;
		background-position: center;
		cursor: pointer;
	}

	/* 各種ボタンの画像切り替え背景 */
	.pkg_inner_01 .pkg_btn-01 {
		background-image: url("../img/pkg_btn_open-01.png");
	}

	.pkg_inner_02 .pkg_btn-02 {
		background-image: url("../img/pkg_btn_open-02.png");
	}

	/* 【整理】クリックされた状態（is-clicked）をそれぞれの通常ボタンの直下に集約 */
	.pkg_inner_01 .pkg_btn-01.is-clicked {
		background-image: url("../img/pkg_btn_close-01.png");
	}

	.pkg_inner_02 .pkg_btn-02.is-clicked {
		background-image: url("../img/pkg_btn_close-02.png");
	}

	/* 内蔵用のバツ印閉じるボタン */
	.pkg_btn_close {
		position: absolute;
		top: 10px;
		right: 10px;
		background: none;
		border: none;
		cursor: pointer;
		padding: 0;
	}

	.pkg_btn_close img {
		width: 30px;
		height: auto;
	}

	.pkg_att {
		color: #9C2B00;
		margin-top: 2em;
	}

	/* --- 賞品（景品）セクション --- */
	.prize {
		background-color: #FCE7EC;
		background-image: repeating-linear-gradient(289deg, #fce7ec, #fce7ec 28px, #fad9e0 28px, #fad9e0 56px);
		padding-bottom: 3em;
	}

	.prize_img {
		width: 87%;
		margin-bottom: 3em;
		margin-left: -3.4%;
	}

	.prize_text {
		margin-top: -3em;
	}

	.prize_text_title {
		background-color: #9C2B00;
		width: 55%;
		margin: 2.5em auto auto;
		color: #FFF;
		font-size: 1.5em;
		border-radius: 1.1em;
		padding: 0.1em;
	}

	.prize_text_text {
    color: #9C2B00;
    font-size: 1.8em;
    font-weight: 800;
    line-height: 1.1em; /* 行間が詰まりすぎて文字が被るのを防ぐため、少し広げました */
    
    /* 1. 外側のメインのフチを少し細く（0.35em → 0.22em） */
    -webkit-text-stroke: 0.3em #FFF;
	paint-order: stroke fill;
}

	.prize_text_text span {
		font-size: 1.3em;
		font-weight: 900;
	}

	.prize_text p:nth-of-type(7) {
		color: #9C2B00;
		background-color: #FFF;
		width: 82%;
		margin: 2em auto auto;
		padding: 1em 0px;
		font-size: 1.2em;
		border: solid 0.2em #9C2B00;
		border-radius: 12px;
		font-weight: 500;
	}

	/* ★★★ method（応募方法）アコーディオンセクション ★★★ */
	.method {
		width: 100%;
		margin: auto;
		background-color: #FFFFE6;
		padding-bottom: 2em;
	}

	.method .step {
		width: 80%;
		margin: auto;
	}

	.method .step img {
		width: 100%;
	}

	.method .step p {
		font-size: 1.35em;
		font-weight: 500;
		color: #9C2B00;
	}

	.method .step p span {
		font-size: 0.71em;
		line-height: 1.3em !important;
		text-align: left;
		margin-top: 0.7em;
		display: inline-block;
	}

	.method .method_arrow {
		width: 8%;
		margin: 0.5em auto 2em auto;
	}

	/* 応募方法用開閉ボタン */
	.method_btn {
		background-image: url("../img/method_btn_open.png");
		width: 80%;
		height: 100px;
		background-color: transparent;
		background-position: center;
		background-repeat: no-repeat;
		background-size: contain;
		border: none;
		cursor: pointer;
		z-index: 1;
		position: relative;
		font-size: 0;
		line-height: 0;
		text-indent: -9999px;
		transition: background-image 0.3s ease;
	}

	/* 【整理】クリックされた状態（is-clicked）をすぐ下に配置 */
	.method_btn.is-clicked {
		background-image: url("../img/method_btn_close.png");
	}

	/* 応募方法の内包アコーディオン領域 */
	.method_inner {
		width: 90%;
		border: solid 3px #E60044;
		border-radius: 20px;
		padding-bottom: 20px;
		box-sizing: border-box;
		margin: 2em auto;
		display: none;
		/* 初期状態は非表示 */
	}

	/* 【整理】開いた状態（is-visible）をすぐ下に配置 */
	.method_inner.is-visible {
		display: block;
	}

	.method_in_title {
		background-color: #E60044;
		margin: 0px auto 2em;
		padding: 0.1em 0px;
		font-size: 1.7em !important;
		color: #fff !important;
		border-radius: 15px 15px 0px 0px;
	}

	.method_inner p {
		font-size: 1.2em;
		color: #9C2B00;
		font-weight: 500;
	}

	.method_inner .CpFrame_flex_in {
		width: 60%;
		margin: 3em auto 0px auto;
		text-align: center;
	}

	.method_inner .CpFrame_flex_in p {
		font-size: 1.25em;
		font-weight: 500;
		width: 100%;
		margin: 1em auto;
	}

	.method_inner .cpframe_att_title {
		margin-top: 2em;
		width: 85%;
	}

	

	.method_inner .cpfr_in_02_img {
		width: 80%;
		margin: 1em auto 0px;
	}

	.method_inner_att {
		color: #E60044 !important;
		margin: 2em auto 0px auto;
		font-size: 1.3em !important;
		font-weight: 500 !important;
	}

	/* --- レシート・注意画像セクション --- */
	.receipt {
		background-color: #FFF0F2;
		padding-bottom: 4em;
	}

	.receipt_inner {
		width: 76%;
		background-color: #FFF;
		margin: 1.5em auto;
		padding: 3em 0px 0.5em;
		border-radius: 15px;
	}

	.receipt_img {
		width: 95%;
		margin: auto;
		display: block;
	}

	.receipt .receipt_inner p {
		font-size: 1.2em;
		font-weight: 500;
		color: #9C2B00;
		margin-bottom: 2em;
	}

	.receipt_NG_title {
		font-size: 1.3em;
		color: #E60044;
		margin: 2em auto auto;
	}

	.NG_flex {
		display: flex;
		width: 85%;
		margin: auto auto 0px auto;
		flex-wrap: wrap;
		justify-content: space-around;
	}

	.NG_flex img {
		width: 45%;
		margin-bottom: 0.2em;
	}

	.NG_flex img:nth-of-type(5) {
		margin-bottom: 0px;
	}

	/* --- フッターエリア・応募規約遷移など --- */
	.go_btn {
		width: 64%;
		margin: 0px auto 1em;
	}

	footer {
		background-color: #fff0f2;
		padding-bottom: 0.5em;
		text-align: center;
		border-bottom: solid 1.5em #007130;
		padding-bottom: env(safe-area-inset-bottom); 
	}

	.chara_footer {
		width: 95%;
		margin: auto;
	}

	.footer_in {
		width: 90%;
		margin: auto;
		justify-content: space-around;
		text-align: center;
	}

	.footer_in img {
		width: 95%;
		margin: auto;
	}

	.footer_in p {
		color: #007130;
		line-height: 0em;
		margin-top: 2em;
		font-size: 13px;
	}

	.sns_flex {
		display: flex;
		justify-content: space-around;
	}

	.sns_flex a {
		margin: 0px;
	}

	.Mlogo {
		width: 40%;
		display: block;
		margin: 0.8em auto 0.5em 0px;
	}

	.Mlogo img {
		width: 100%;
	}

	.footer_other {
		width: 90%;
		text-align: left;
	}

	.num {
		width: 60% !important;
		margin: 10em 0px auto auto;
	}
}

/*  画面幅表示計算用プロパティ */
@property --w {
	syntax: '<integer>';
	inherent-value: 0;
	initial-value: 0;
}