@charset "UTF-8";
/* CSS Document */
/* レビューキャンペーン 2026/09 */

#review {
	--color_text: #404040;
	--color_navy: #273b56;
	--color_blue: #4864b3;
	--color_pink: #d94c9b;
	--color_bg: #d4dfff;

	background-color: #fff;
	color: var(--color_text);
	display: block;
	font-family: 'Noto Sans JP', sans-serif;
	margin: 0 auto;
	max-width: min(100%, 640px);
	width: 100%;

	/* 全体リセット・共通設定 */
	h1,
	h2,
	p,
	a,
	span,
	div,
	ul,
	li,
	section {
		-webkit-box-sizing: border-box;
		-moz-box-sizing: border-box;
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

	a {
		text-decoration: none;
	}

	ul {
		list-style: none;
	}

	img {
		display: block;
		width: 100%;
		height: auto;
	}

	/* セクション見出し（紺帯） */
	.sub_ttl {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		background-color: var(--color_navy);
		font-size: min(4.8958vw, 25px);
		padding: 3% 0;
        font-weight: 600;
		letter-spacing: .14em;
	}

	/* レビュー投稿ボタン */
	.review_btn {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		width: 100%;
		padding: 3% 0;
		color: #fff;
		background-color: var(--color_blue);
		font-size: min(4.8958vw, 26px);
		font-weight: 700;
		letter-spacing: .14em;
	}

	.review_btn::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 5%;
		width: 0.35em;
		height: 0.35em;
		border-top: 3.5px solid #fff;
		border-right: 3.5px solid #fff;
		transform: translateY(-50%) rotate(45deg);
	}

	.exp {
		margin: 3% 0 0 0;
		font-size: min(4.1667vw, 20px);
		font-weight: 500;
		letter-spacing: .16em;
		line-height: 1.4;
		text-align: center;
	}

	/* ヘッダー */
	.header_box {
		display: block;
	}

	/* ポイント獲得の流れ */
	.flow_box{
		width: 90%;
		margin: 0 auto;
	}
	.flow_box .main_frame {
		padding: 0;
	}

	.point_step {
		margin: 8.1% 0 0 0;
		text-align: center;
	}

	.point_step + .point_step {
		margin: 7.2% 0 0 0;
	}

	.flow_img {
		width: 45%;
		margin: 0 auto;
	}

	.flow_step {
		margin: 3.5% 0 0 0;
		color: var(--color_pink);
		font-size: min(5.2083vw, 28px);
		font-weight: 700;
		letter-spacing: .06em;
		line-height: 1.2;
	}

	.flow_ttl {
		margin: 1.5% 0 0 0;
		font-size: min(5.2083vw, 29px);
		font-weight: 700;
		letter-spacing: .1em;
		line-height: 1.3;
	}

	.flow_txt {
		margin: 2% 0 0 0;
		font-size: min(4.1667vw, 23px);
		font-weight: 500;
		letter-spacing: .08em;
		line-height: 1.45;
	}

	.flow_txt a {
		color: var(--color_text);
		text-decoration: underline;
		text-underline-offset: .2em;
	}

	.flow_box .btn_box {
		margin: 4.5% 0 0 0;
	}

	.howto_img {
		display: block;
		width: 90%;
		margin: 10% auto 0;
	}


	.model_1 {
		width: 51.2%;
		margin: 0 auto;
	}

	.link_btn {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		margin: 7.9% 0 0 0;
		padding: 3% 0;
		color: var(--color_text);
		background-color: #fff;
		border: 2px solid var(--color_text);
		font-size: min(4.1667vw, 20px);
		font-weight: 700;
		letter-spacing: .18em;
		line-height: 1.4;
		text-align: center;
	}

	.link_btn::after {
		content: "";
		position: absolute;
		top: 50%;
		right: 5%;
		width: 0.45em;
		height: 0.45em;
		border-top: 3.5px solid var(--color_text);
		border-right: 3.5px solid var(--color_text);
		transform: translateY(-50%) rotate(45deg);
	}

	/* レビュー投稿の手順 */
	.howto_box {
		margin: 6.9% 0 0 0;
	}

	/* キャンペーン概要 */
	.explain_box {
		padding: 6% 5% 13%;
		background-color: var(--color_bg);
	}

	.description {
		padding: 5% 5% 10%;
		background-color: #fff;
	}

	.explain_ttl {
		font-size: min(5.2083vw, 28px);
		font-weight: 700;
		letter-spacing: .14em;
		text-align: center;
	}

	.gaiyou_ttl {
		margin: 7% 0 0 0;
		font-size: min(3.9583vw, 19px);
		font-weight: 500;
		line-height: 1.56;
	}

	.explain_ttl + .gaiyou_ttl {
		margin: 5% 0 0 0;
	}

	.gaiyou_ul {
		font-size: min(3.9583vw, 19px);
		font-weight: 500;
		line-height: 1.56;
	}

	.gaiyou_ul li + li {
		margin: 4.5% 0 0 0;
	}

	.explain_box .btn_box {
		margin: 5% 0 0 0;
	}

	.model_3 {
		width: 76.7%;
		margin: 0 auto;
	}

	/* 吹き出し */
	.catch_txt {
		display: flex;
		align-items: center;
		justify-content: center;
		position: relative;
		width: 86.6%;
		height: min(11.3542vw, 73px);
		margin: 0 auto;
		background-color: #fff;
		border: .1875rem solid var(--color_text);
		border-radius: 10em;
		font-size: min(4.1667vw, 27px);
		font-weight: 500;
		letter-spacing: .14em;
	}

	/* しっぽ：::before が枠線、::after が白抜き */
	.catch_txt::before,
	.catch_txt::after {
		content: "";
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		border-style: solid;
		border-color: transparent;
	}

	.catch_txt::before {
		top: 100%;
		border-width: .8em .45em 0;
		border-top-color: var(--color_text);
	}

	.catch_txt::after {
		top: calc(100% - .25em);
		border-width: .75em .32em 0;
		border-top-color: #fff;
	}

	.explain_box .review_btn {
		margin: 3% 0 0 0;
	}

	.explain_box .exp {
		margin: 5.6% 0 0 0;
	}

	.explain_box .exp-sub {
		margin: 4.8% 0 0 0;
	}
}