@charset "UTF-8";

/* CSS Document */
/* Qietoに乗り換えよう！202502改修*/
#sakura-campaign {
	display: block;
	width: 100%;
	max-width: 950px;
	margin: 0 auto 40px;
	background-color: #ffffff;
	color: #222;
	font-family: "Noto Sans JP", "メイリオ", Meiryo, "ヒラギノ角ゴ Pro", "ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro", "メイリオ", Meiryo, "ＭＳ ゴシック", "MS Gothic", sans-serif;
}

#sakura-campaign {
	div,
	p,
	h1,
	h2,
	h3,
	ul,
	li,
	a {
		-webkit-box-sizing: border-box;
		box-sizing: border-box;
		margin: 0px;
		padding: 0px;
		line-height: 2;
		letter-spacing: 0.1em;
		text-decoration: none;
	}

	.main {
		width: 100%;
	}

	.main_visual {
		position: relative;
		width: auto;
		margin: 0 auto;
	}

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

	.join{
		color: #62321b;
		font-weight: 900;
		font-size: min(6.9vw, 35px);
		text-align: center;
        line-height: 1;
	}

	.block {
		padding: 10% 0;
	}

	.block.mt0 {
		padding: 0 0 10%;
	}

	.mt10 {
		margin: 10% 0 0;
	}

	.block.bg {
		background: #f0f7fc;
	}

	.cont_wrap {
		width: auto;
		margin: 0 auto;
		padding: 0 0 10%;
		background: url(../img/bg.png) no-repeat center center;
		background-size: cover;
	}

	.btn_wrap{
		margin: 10% auto 0;
	}

	.btn_coupon{
		display: block;
		width: 85%;
		margin: 3% auto 0;
	}

	.mark{
		width: 78%;
		margin: 7% auto 0;
	}

	.coupon_ttl {
		position: relative;
		width: 85%;
		margin: 0 auto;
	}

	.coupon_ttl img {
		display: block;
		width: auto;
		max-width: 100%;
		margin: 0 auto;
	}
	.coupon_text {
		margin-top: 3%;
		color: #62321b;
		font-weight: 900;
        font-size: min(3.6vw, 18px);
		text-align: center;
	}

	.coupon_limited {
		margin-top: 6%;
		color: #62321b;
		font-weight: 900;
		font-size: min(4.3vw, 22px);
		text-align: center;
		line-height: 1.5;
	}

	.coupon_limited span{
		color: #ff407a;
	}

	.note{
		margin-top: 6%;
		color: #62321b;
		font-weight: 500;
		font-size: min(3.1vw, 14px);
		text-align: center;
	}

	.hint{

	}

	.catch_ttl {
		width: max-content;
		margin: 0 auto 3%;
		color: #fff;
		font-weight: bold;
		font-size: min(4.3vw, 21px);
		letter-spacing: 0.04em;
		line-height: 2;
		text-align: center;
	}

	.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: #fff;
		content: "";
		font-weight: normal;
	}

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

	.catch_ttl .deco::after {
		-webkit-transform: rotate(28deg);
		right: -0.8em;
		transform: rotate(28deg);
	}

	.banner_area {
		width: 100%;
		margin: 0 auto;
		padding: 10% 0;
		text-align: center;
		background: #45b4f0;
	}

	.banner_box {
		margin: 0 auto;
		padding: 2% 0 5%;
		width: 80%;
	}

	.banner{
		margin: 7% auto 0;
	}

	.cate_wrap{
		display: flex;
		margin: 7% auto 0;
	}

	.cate_wrap a{
		display: block;
		width: 31%;
		letter-spacing: 0.02em;
		margin: 0 1%;
		padding: 1% 0;
		background: #fff;
		color: #45b4f0;
		border-radius: 2em;
		font-size: min(4.9vw, 21px);
		font-weight: bold;
	}
}