@charset "UTF-8";

/* =========================================================

ハロウィンキャンペーン

========================================================= */

#halloween {
	background: #ffedda;
	word-wrap: normal;
	/* 改行指定を初期化（MD） */
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		font-family: "corporate-logo-ver2", sans-serif;
	}

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

	em {
		font-style: normal;
	}

	a {
		text-decoration: none;
	}

	img {
		max-width: 100%;
		vertical-align: bottom;
	}

	table {
		border-collapse: collapse;
	}

	.test {
		font-size: min(4vw, 20px);
		font-weight: 700;
	}

/* ヘッダー
------------------------------------ */
	.header {
		position: relative;
		display: block;
		width: auto;
		max-width: 960px;
		height: auto;
		margin: 0 auto;
	}

	.mainvisual {
		margin: 6% 0 0;
		padding: 0;
	}

	.mainvisual img {
		display: block;
		width: auto;
		max-width: 100%;
		height: auto;
		margin: 0 auto;
	}

	.header img {
		display: block;
		width: auto;
		max-width: 100%;
		height: auto;
		margin: 0 auto;
	}

	.prize_title {
		color: #fe9528;
		font-size: min(4.2667vw, 27px);
		text-align: center;
		letter-spacing: 0.06em;
		margin: 5% 0 0;
	}

	.prize_card {
		width: 90%;
		margin: 3% auto 0;
	}

	.prize_miss {
		margin: 4% auto 0;
		width: 60%;
	}

	.cta_area {
		background: #fe9528;
		color: #fe9528;
		padding: 5% 0;
		margin: 5% 0 0;
		&.bottom {
			margin: 0;
		}
	}

	.cta {
		width: min(100%, 953px);
		margin: 0 auto;
	}
	.cta + .cta {
		margin: 6% auto 0 auto;
	}

	/* 上の吹き出し文言 「＼ ○○ ／」 */
	.cta_lead {
		display: flex;
		justify-content: center;
		align-items: center;
		gap: .8em;
		margin: 0;
		color: #fff;
		font-size: min(4.7vw, 24px);
		font-weight: 800;
		line-height: 1.4;
		letter-spacing: 0.04em;
		&.bottom {
			font-size: min(4.2vw, 20px);
		}
	}
	.cta_lead::before,
	.cta_lead::after {
		content: "";
		flex-shrink: 0;
		width: 0.1em;
		height: 1.1em;
		background: currentColor;
		border-radius: 0.05em;
	}
	.cta_lead::before {
		transform: rotate(-25deg);
	}
	.cta_lead::after {
		transform: rotate(25deg);
	}

	/* ボタン本体 */
	.cta_btn {
		position: relative;
		display: flex;
		justify-content: center;
		align-items: center;
		margin: 1% auto 0;
		padding: 3% 0;
		background: #fff;
		border-radius: 999em;
		color: #fe9528;
		font-size: min(6vw, 29px);
		font-weight: 900;
		letter-spacing: 0.08em;
		line-height: 1;
		text-decoration: none;
		transition: opacity 0.2s;
		width: 90%;
	}

	.cta_btn:hover {
		opacity: 0.85;
	}

	/* 右の三角 */
	.cta_btn::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 6.3%;
		width: min(2.4vw, 12px);
		height: min(3.3vw, 15px);
		background: currentColor;
		clip-path: polygon(0 0, 100% 50%, 0 100%);
		transform: translateY(-50%);
	}

	.cta_note {
		font-size: min(3.3vw, 16px);
		color: #fff;
		margin: 2% 0 0;
		text-align: center;
	}

	/* ---------- 遊び方 ---------- */
	.howto {
		padding: 7% 6% ;
		background: #fff;
	}
	.howto_title {
		font-size: min(5.3333vw, 24px);
		text-align: center;
		letter-spacing: 0.06em;
		line-height: 1;
	}
	.howto_list {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: min(3.2vw, 12px);
		margin: 6% 0 0 0;
	}
	.howto_item {
		display: flex;
		flex-direction: column;
		width: calc((100% - min(3.2vw, 12px)) / 2);
		padding: 4% 3% 8% 3%;
		background: #ffedda;
		border-radius: min(2.1333vw, 15px);
		text-align: center;
	}
	.howto_step {
		font-family: "Dela Gothic One", sans-serif;
		font-size: min(3.2vw, 12px);
		letter-spacing: 0.08em;
	}
	.howto_item_title {
		margin: 4% 0 0 0;
		color: #fe9528;
		font-size: min(4.2667vw, 24px);
		white-space: nowrap;
		line-height: 1.2;
	}
	.howto_item_sub {
		font-size: min(2.9333vw, 15px);
		font-weight: 700;
		color: #290e47;
	}
	/* STEPごとに見出しの行数が違っても、画像と下の文言の位置を揃える */
	.howto_item .step {
		margin: auto auto 0 auto;
	}
	.howto_item > :has(+ .step) {
		padding: 0 0 8% 0;
	}
	.howto_item_text {
		margin: 8% 0 0 0;
		font-size: min(3.4vw, 15px);
		font-weight: 700;
		color: #290e47;
        line-height: 1.5;
	}

	.column_zone{
		margin: 0 auto;
		padding: 8% 5% ;
		background: #fff;
	}

	.column_zone_ttl{
		width: 100%;
		padding: 0;
		background: #290e47;
		color: #fff;
		font-weight: 700;
		font-size: min(5.5vw, 25px);
		letter-spacing: .1em;
		text-align: center;
		position: relative;
		line-height: 1.7;
	}

	.catch_ttl {
		width: max-content;
		margin: 0 auto 3%;
		color: #290e47;
		font-weight: 700;
		font-size: min(4.3vw, 21px);
		letter-spacing: 0.04em;
		line-height: 2;
		text-align: center;
	}
	.catch_ttl .line {
		background: linear-gradient(transparent 70%, #fff770 60%);
	}
	.catch_ttl .deco {
		display: inline-block;
		position: relative;
	}

	.catch_ttl .deco::before,
	.catch_ttl .deco::after {
		display: block;
		position: absolute;
		bottom: 0.1em;
		width: 0.1em;
		height: 1.2em;
		background: #111111;
		content: "";
		font-weight: normal;
	}

	.catch_ttl .deco::before {
		-webkit-transform: rotate(-28deg);
		left: -0.8em;
		top: 0.5em;
		transform: rotate(-28deg);
	}

	.catch_ttl .deco::after {
		-webkit-transform: rotate(28deg);
		right: -0.8em;
		top: 0.5em;
		transform: rotate(28deg);
	}
	.banner{
		margin: 0 auto 8%;
	}
	.content_area {
		position: relative;
		max-width: 960px;
		height: auto;
		margin: 0 auto ;
		padding: 0 0 ;
		background: #b15c2e;
	}
}