@charset "UTF-8";

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

アプリ購入応援キャンペーン

========================================================= */
#app-purchase-support {
	word-wrap: normal;
	/* 改行指定を初期化（MD） */
	width: 100%;
	max-width: 755px;
	margin: 0 auto;
	background: #FFF;
	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
		font-family: "YakuHanJP_Noto", "Roboto", "Noto Sans JP", sans-serif;
	}

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

	em {
		font-style: normal;
	}

	a {
		text-decoration: none;
		opacity: 1;
	}

	a:hover{
		transition: all .5s;
		opacity: .8;
	}

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

	/* ヘッダー
	------------------------------------ */
	.mv {
		display: block;
		width: 100%;
		max-width: 500px;
		height: auto;
	}

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

	/* クーポン
	------------------------------ */
	.coupon_area {
		margin: 0 auto ;
		padding: 5% 0 0;
		background: #1c6689;
	}

	.coupon_inner {
		width: 90%;
		margin: 0 auto ;
	}

	.coupon {
		margin: 0 auto ;
	}

	.coupon_wrap + .coupon_wrap {
		margin: 5% auto 0;
	}

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

	/* クーポン
	------------------------------ */
	.note_area {
		margin: 0 auto ;
		padding: 2% 0 7%;
		background: #1c6689;
	}
	.note_inner {
		width: 90%;
		margin: 0 auto ;
	}
	.note_area ul{
		margin: 5% auto 0;
		color: #fff;
	}

	.note_area ul.point{
		margin: 0 auto ;
		padding-left: 1rem;
	}

	.note_area ul li{
		font-size: min(4.5vw, 11px);
		font-weight: 500;
		letter-spacing: 0.05em;
		margin: 0 auto;
		line-height: 1.5;
	}

	/* ボタン
	------------------------------------ */
	.coupon_btn {
		background-color: #ff6e53;
		border-radius: 100vh;
		color: #fff;
		display: block;
		font-size: min(4.4vw, 18px);
		font-weight: 700;
		letter-spacing: 0.2em;
		line-height: 1;
		padding: 6% 1em;
		position: relative;
		text-align: center;
		text-decoration: none;
		width: auto;
		margin: 5% auto 0;
		z-index: 0;
	}

	.coupon_btn:after {
		content: "▶";
		font-size: min(2.6vw, 14px);
		position: absolute;
		right: 5%;
		top: 41%;
	}

	/* タイプ
	------------------------------ */
	.banner_area {
		width: 90%;
		margin: 5% auto 0;
		padding: 0 0 2%;
		text-align: center;
		background: #FFF;
	}

	.banner_box {
		margin: 2% 0 0;
	}

	.banner_box.camp {
		margin: 7% 0 0;
	}

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

	.catch_ttl .line {
		font-size: min(6vw, 30px);
	}
	.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: #003360;
		content: "";
		font-weight: normal;
	}

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

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


	.coupon_ttl {
		width: 93%;
		margin: 0 auto 6%;
	}

	/* タイプ
	------------------------------ */
	.type_area {
		margin: 10% auto 0;
		padding: 5% 0;
		background: #fbf99d;
	}

	.type {
		margin: 5% auto 0;
	}

	.type_btn_wrap {
		display: flex;
		flex-wrap: wrap;
		justify-content: space-evenly;
		width: 95%;
		margin: 0 auto;
	}

	.type_ttl {
		display: block;
		width: 60%;
		margin: 0 auto;
	}

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

	.type_btn {
		background-color: #ff6e53;
		border-radius: 100vh;
		color: #fff;
		display: block;
		font-size: min(4.4vw, 18px);
		font-weight: 700;
		letter-spacing: 0.06em;
		line-height: 1;
		padding: 4% 1em;
		position: relative;
		text-align: center;
		text-decoration: none;
		width: 47%;
		margin: 4% 0 0;
		z-index: 0;
	}

	.t01 {
		background: #fd7b51;
	}
	.t02 {
		background: #c5d31f;
	}
	.t03 {
		background: #3db0d7;
	}
	.t04 {
		background: #fe9f1f;
	}



	.u-app,
	.u-web {
		display: none;
	}


}