html,
body {
	margin: 0px;
	padding: 0px;
	font-family: 'BIZ UDPGothic', "Helvetica Neue", Arial, sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: #333;
	max-width: 800px;
	margin: 0 auto;
	background-color: #000;
}
h2{
	margin: 0px;!important
}

main {
	width: 100%;
	background-color: black;
	text-align: center;
	color: #FFF;
	font-family: "BIZ UDPGothic", sans-serif;
	font-weight: 400;
	font-style: normal;
	line-height: 0px;
	font-size: clamp(12px, 7.33px + 2.22vw, 24px);
}

main img {
	width: 100%;
}


section {
	width: 100%;
}



.top {
	width: 100%;
	max-width: 820px;
	margin: 0px auto;
	padding: 0px;
}

.top img {
	width: 100%;
}

.tarekomi_title {
	width: 100%;
	max-width: 750px;
	margin: auto;
	background-image:
		url(../img/bg_ex.png);
	background-repeat: no-repeat;
	background-size: cover;

}

.sub_title {
	width: 83%;
	max-width: 678px;
	margin: 2.2em auto 1em auto;
	display: block;
}

.example_title {
	width: 100%;
	max-width: 820px;
	display: block;
	margin: auto auto 0px auto;
}

.example_flex {
	width: 92%;
	max-width: 753px;
	display: inline-flex;
	justify-content: space-between;
	flex-wrap: wrap;
	padding-top: 0px;
}

.example_flex img {
	width: 49%;
	margin-top: 2%;
}

.example_flex img:nth-of-type(1),
.example_flex img:nth-of-type(2) {
	margin-top: 0px;
}

.tarekomu {
	background-image: url(../img/bg_btn.png);
	background-size: cover;
	background-position: center center;
	padding: 2em 0;
	width: 100%;
	max-width: 750px;
	margin: auto;
}

.btn_title {
	width: 58%;
	max-width: 445px;
	margin: 0px auto;
	display: block;
}

.btn_tarekomu {
	display: block;
	width: 88%;
	max-width: 721px;
	margin: 0px auto 0.4em auto;
}

.btn_tarekomu img {
	width: 100%;
}

.date {
	width: 84%;
	max-width: 624px;
	margin: 1.8em auto 0px auto;
	display: block;
}

.campaign_info {
	display: block;
	background-image: linear-gradient(0deg, #00505c, #008093);
	padding: 1.5em 0px;
	max-width: 750px;
	margin: auto;
}

.cp_info_title {
	width: 80%;
	max-width: 656px;
	display: block;
	margin: auto;
	margin-bottom: .5em;
}

.cp_info_cont {
	width: 91%;
	max-width: 747px;
	display: block;
	margin: auto auto 2em auto;
}

.campaign_kiyaku {
	padding-top: 2em;
}

.campaign_kiyaku img {
	width: 40%;
	max-width: 328px;
	margin: auto;
	display: block;

}

.kiyaku {
    background-color: #FFF;
    width: 87%;
    max-width: 714px;
    height: 450px;
    margin: auto;
    padding: 1em;
    overflow-y: scroll;
    color: black;
    box-sizing: border-box;
    
    /* 親要素(main)の一括指定を打ち消す */
    text-align: left;
    font-weight: normal;

    /* 👇 スマホ時12px 〜 PC時最大16px になる可変設定 */
    font-size: clamp(12px, 11.08px + 0.44vw, 16px);
    line-height: 1.6em; /* 行間を1.6倍にしっかり確保 */
}

/* 規約内の h2 */
.kiyaku h2 {
    font-size: 1.1em;   /* ベースの文字サイズに対して1.1倍 */
    line-height: 1em;
	margin: 0px 0px -0.3em 0px;!important

}

/* 規約内の p, li */
.kiyaku p,
.kiyaku li {
    font-size: 1em;     /* ベースの文字サイズ（12px〜16px可変）のまま */
    line-height: 1.6em;
}

/* 規約内の リスト全体 */
.kiyaku ul,
.kiyaku ol {
    margin: 1em 0 0.5em 1.25em;
    padding: 0;
}

/* 規約内の 各箇条書き項目 */
.kiyaku li {
    margin-bottom: 0.2em;
}

/* 規約内の リンク */
.kiyaku a {
    color: #0056b3;
    text-decoration: underline;
}

.kiyaku a:hover {
    text-decoration: none;
}

.site {
	background-color: #CCC;
	padding: 2em 0px 0.5em 0px;
}

.site a {
	display: block;
	margin: auto;
}

.web_site {
	width: 83%;
	max-width: 681px;
}

.sns_flex {
	width: 83%;
	max-width: 681px;
	display: flex;
	justify-content: space-between;
	margin: 0.8em auto;
}

.sns_flex a {
	width: 48%;
}

.sns_flex img {
	width: 100%;
}

.copy {
	width: 83%;
	max-width: 681px;
	margin-top: 1.5em;
	padding-bottom: env(safe-area-inset-bottom);
}

@media screen and (min-width: 751px) {
	html,body{
		max-width: 100%;
		margin: 0px;
	padding: 0px;
	}
	#main_contents {
		width: 100%;
		background-image: linear-gradient(to bottom,
				#000000 0%,
				#000000 10%,
				/* ここまで真っ黒 */
				transparent 30%,
				/* 10%〜30%の間でだんだん画像が見えてくる */
				transparent 70%,
				/* ここまでは画像が100%綺麗に見える */
				#000000 90%,
				/* 70%〜90%の間でだんだん黒くなっていく */
				#000000 100%
				/* ここから下は真っ黒 */
			),
			url(../img/bg_PC.png);
		background-size: 1500px auto;
		background-repeat: no-repeat;
		background-position: center;
	}


}