/* ==========================================================================
   2. レスポンシブ / メディアクエリ スタイル (ブレイクポイント順に統合)
   ========================================================================== */

@media screen and (min-width: 760px) and (max-width: 1360px) {
	.campaign-summary-bg {
		padding-top: 55px;
	}
}

/* --- 横幅 860px 以下の設定 --- */
@media screen and (max-width: 860px) {
	.bonus-inner {
		flex-direction: column;
	}

	.bonus-left-wing,
	.bonus-right-wing {
		display: none;
		/* スマホ時は左右の線を非表示にしてシンプルに */
	}

	.bonus-table-area {
		width: 100%;
	}

	.bonus-table th {
		font-size: 18px;
		height: 44px;
	}

	.bonus-table td {
		font-size: 22px;
		height: 48px;
	}

	.td-deposit::after {
		right: 12px;
		border-width: 6px 0 6px 8px;
	}
}

/* --- 横幅 768px 以下の設定 --- */
@media screen and (max-width: 760px) {

	.sp {
		display: block;
	}

	.pc {
		display: none !important;
	}

	#mainvisual {
		padding: 0;
	}

	header {
		padding: 15px;
	}

	header img {
		width: 45%;
	}

	/* =======================================
							キャンペーントップ
		======================================= */
	.present_wrap {
		display: block;
		padding: 15px;
	}

	.campaign-row {
		min-height: auto;
	}

	.campaign-label {
		width: 25%;
		min-width: 85px;
		font-size: 18px;
	}

	.campaign-content {
		width: 75%;
		padding: 12px;
	}

	.campaign-content.flex-align {
		flex-direction: column;
		align-items: flex-start;
		gap: 4px;
	}

	.main-text {
		font-size: 13px;
	}

	.note-asterisk {
		font-size: 13px;
	}

	.condition-item {
		font-size: 13px;
	}

	.amount-text,
	.period-text {
		font-size: 16px;
	}

	.content-note {
		font-size: 12px;
	}

	.inline-note {
		display: block;
		margin-left: 0;
		margin-top: 4px;
	}

	.sp-only {
		display: inline;
	}



	/* =======================================
						キャンペーン概要
	======================================= */
	.campaign-catch-container {
		display: block;
		padding: 20px 15px;
	}

	.illustration-left,
	.illustration-right {
		/* display: block;
		width: 100%;
		float: none;

		margin-bottom: 20px;
		text-align: center; */
		display: none;
	}

	.illustration-left img,
	.illustration-right img {
		display: block;
		margin: 0 auto;
		max-width: 50%;
	}

	.illustration-right {
		float: none;
	}

	.catch-text-content {
		display: block;
		width: 100%;
		clear: both;
	}

	.campaign-summary-bg .campaign-container {
		margin-top: 0;
	}

	.campaign-container p.title {
		font-size: 18px;
	}

	.campaign-container p.title span {
		position: absolute;
		left: -65px;
		top: 30px;
	}

	.campaign-container p.title span img {
		width: 35%;
	}

	.campaign_text {
		font-size: 17px;
	}

	.present_top_section {
		margin-bottom: 0;
	}

	.present_section {
		flex-wrap: wrap;
	}

	.present_section p {
		width: 100%;
		text-align: center;
		font-size: 20px;
	}

	/* テキストサイズをスマホ向けに縮小 */
	.campaign-catch-container .sub-title {
		font-size: 15px;
		margin-bottom: 8px;
	}

	.campaign-catch-container .main-message {
		font-size: 17px;
		margin-bottom: 12px;
	}

	.campaign-catch-container .benefit-text {
		font-size: 17px;
		margin-bottom: 8px;
	}

	.campaign-catch-container .highlight {
		font-size: 17px;
	}

	.campaign-catch-container .sub-message {
		font-size: 15px;
		margin-bottom: 24px;
	}

	.campaign-catch-container .lead-text {
		font-size: 17px;
	}

	.bonus_about_table table {
		table-layout: fixed;
		word-break: break-all;
	}

	.bonus_about_table table th {
		width: 35%;
		font-size: 14px;
		padding: 15px 10px;
	}

	.bonus_about_table table td {
		width: 65%;
		font-size: 14px;
		padding: 15px 10px;
	}

	.campaign_illust {
		margin: -40px auto 0 auto !important;
		width: 30%;
	}


	/* =======================================
					キャンペーン参加のメリット
		======================================= */
	.campaign_join {
		padding: 15px;
	}

	.campaign_join .colum {
		flex-wrap: wrap;
	}

	.campaign_join .colum .colum_text {
		width: 100%;
		flex: 0 0 100%;
	}

	.campaign_join .colum .colum_ph {
		width: 100%;
	}

	#colum_ph03 {
		flex: none;
		width: 35%;
		margin: 0 auto;
	}

	.campaign_illust2 {
		margin: 40px auto 25px auto;
		width: 30%;
	}

	.reward-row {
		padding: 0 25px;
	}

	/* =======================================
				シュミレーション
	======================================= */
	.bg-pink-curve {
		padding-top: 60px;
		padding-bottom: 30px;
		position: relative;
		z-index: 99;
	}

	.bg-pink-curve::before,
	.bg-pink-curve::after {
		border-radius: 0 0 50% 50% / 0 0 12% 12%;
		/* スマホ用に湾曲率を少し緩やかに */
	}

	.image-area img {
		max-width: 270px;
	}

	.tag-badge {
		font-size: 18px;
		padding: 10px 40px;
		bottom: 35%;
		max-width: 92%;
		width: 100%;
	}

	.content-body {
		margin-top: -60px;
	}

	.catch-phrase {
		flex-direction: column;
		gap: 15px;
	}

	.sub-text {
		text-align: center;
		font-size: 30px;
	}

	.badge-max {
		width: 80px;
		height: 80px;
		font-size: 26px;
	}

	.main-reward {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.amount {
		font-size: 60px;
	}

	.reward-sub {
		font-size: 18px;
		text-align: center;
	}

	.notice {
		font-size: 0.85rem;
	}

	.btn-detail {
		font-size: 1.15rem;
		padding: 14px 20px;
	}

	.simulation-section {
		padding: 30px 15px;
		background-size: cover;
		min-height: auto;
		/* スマホ時は比率を保って切り抜く方が崩れにくい */
	}

	.simulation-section .container {
		position: static;
		transform: none;
	}

	.sim-input-row {
		justify-content: flex-start;
	}

	.sim-title-main {
		font-size: 1.2rem;
	}

	.tab-btn {
		font-size: 0.9rem;
		padding: 10px 20px;
		width: 100%;
		/* スマホ時はボタンを縦に並べる */
	}

	.benefit-table th,
	.benefit-table td {
		padding: 10px 8px;
		font-size: 0.8rem;
	}

	.th-reward {
		width: 110px;
	}

	.td-reward {
		white-space: normal;
	}

	.sim-result-area {
		gap: 8px;
	}

	.result-unit {
		text-align: center;
	}

	.result-unit {
		font-size: 21px;
	}

	.campaign_illust3 {
		width: 30%;
	}

	/* =======================================
					JAマップ
		======================================= */
	.jamap {
		padding: 0 15px;
	}

	.footer_img {
		display: block;
		width: 30%;
		margin: -0 auto 40px auto;
		text-align: center;
	}

	.jamap p.title {
		font-size: 21px;
	}

	/* =======================================
							フッター
	======================================= */
	footer ul {
		flex-wrap: wrap;
	}

	footer ul li {
		font-size: 13px;
	}

	.copyright {
		background: #4593d0;
	}

	.copyright img {
		display: none;
	}


	.copyright p {
		position: static;
		transform: none;
		font-size: 16px;
		padding: 10px;
		text-align: center;
	}

}


@media screen and (min-width: 761px) {
	.pc {
		display: block;
	}

	.sp {
		display: none !important;
	}

	header #logo img {
		max-width: 250px;
	}

	#mainvisual {
		width: 100%;
		max-width: calc(100vh * 16 / 9);
		aspect-ratio: 16 / 9;
		margin: 0 auto;
	}

	#mainvisual img {
		width: 90%;
		height: 95%;
		object-fit: cover;
	}

	.present_wrap .container:before {
		content: url("../images/present_before.svg");
		position: absolute;
		left: -30%;
		top: 0;
	}

	.present_wrap .container:after {
		content: url("../images/present_after.svg");
		position: absolute;
		right: -29%;
		top: -130px;
	}

	.campaign-summary .campaign-container:before {
		content: url("../images/campaign_summary_before.svg");
		position: absolute;
		left: -30%;
		top: 0;
	}

	.campaign-summary .campaign-container:after {
		content: url("../images/campaign_summary_after.svg");
		position: absolute;
		right: -33%;
		top: -225px;
	}

	.campaign_join .container:before {
		content: url("../images/campaign_join_before.svg");
		position: absolute;
		left: -30%;
		top: -38%;
		z-index: 99;
	}

	.campaign_join .container:after {
		content: url("../images/campaign_join_after.svg");
		position: absolute;
		right: -30%;
		top: -30%;
		z-index: 99;
	}

	.image-area:before {
		content: url("../images/present_logo_left.svg");
		display: inline-block;
	}

	.image-area:after {
		content: url("../images/present_logo_right.svg");
		display: inline-block;
	}

	.campaign-wrapper .text-area:before {
		content: url("../images/plus_present_before.svg");
		position: absolute;
		left: -30%;
		top: 0;
	}

	.campaign-wrapper .text-area:after {
		content: url("../images/plus_present_after.svg");
		position: absolute;
		right: -30%;
		top: 0;
	}

	.simulation-section .container:before {
		content: url("../images/simulation_before.svg");
		position: absolute;
		left: -36%;
		top: -20%;
	}

	.simulation-section .container:after {
		content: url("../images/simulation_after.svg");
		position: absolute;
		right: -30%;
		top: -76%;
	}

	.jamap .container:before {
		content: url("../images/map_before.svg");
		position: absolute;
		left: -30%;
		top: -6%;
	}

	.jamap .container:after {
		content: url("../images/map_after.svg");
		position: absolute;
		right: -30%;
		top: -25%;
	}

	.present_section img {
		max-width: 600px;
	}

}