/*スマホ改行*/
.br-sp {
	display: none;
}
.br-pc {
	display: block;
}


@media (max-width: 768px) {
	.br-sp {
		display: block;
	}

	.br-pc {
		display: none;
	}

}

/* パソコンで見たときは"pc"のclassがついた画像が表示される */
.pc { 
	display: block !important;
	width: 100%; }
	.sp { display: none !important; }

/* スマートフォンで見たときは"sp"のclassがついた画像が表示される */
@media only screen and (max-width: 768px) {
	.pc { display: none !important; }
	.sp { 
		display: block !important;
		width: 100%; }
	}

/*utility*/

body, body * {
	font-family:"ヒラギノ角ゴ Pro W4", "Hiragino Kaku Gothic Pro","Yu Gothic Medium", "游ゴシック Medium", YuGothic, "游ゴシック体", sans-serif; }

	p{
		color: #333333;
	}

	.underline{
		text-decoration: underline solid;
	}

	.red {
		color: #c1272d;
	}

	.white{
		color: #fff;
	}

	.orange{
		color: #fb9214;
	}

	.center{
		text-align: center;
	}

	.mg{
		margin: 20px;
	}


	.mg_b{
		margin-bottom: 20px;
	}

	.mg_b120{
		margin-bottom: 120px;
	}

	.b{
		font-weight: 600;
	}

	.font_60{
		font-size: 60px;
	}

	.font_28{
		font-size: 28px;
	}

	.font_18{
		font-size: 18px;
	}

	.contents{
		margin: 20px 10px;
	}

	.explanation {
		margin: 20px;
		font-size: 22px;
		font-weight: 600;
	}

	.explanation a{
		border-bottom: 1px solid currentColor;
  padding-bottom: 2px;
	}


/*冒頭部分*/
.image-box {
	position: relative;
	width: 100%;
	height: 545px;
	background-image: url('https://www.spmarche.com/html/user_data/assets/img/gacha/title_img_pc.jpg');
	background-size: cover;
	background-position: center;
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
}

.text-background {
	position: absolute;
	top: 280px;
	left: 20px;
	width: 420px;
	background-color: white;
	border-radius: 20px;
	padding: 20px;
}

.overlay-text {
	margin: 0;
	font-size: 20px;
	color: #333;
	font-weight: 600;
	line-height: 1.5;
}

/*カンタン4ステップ*/
.title-text-1{
	font-size: 35px;
	font-weight: 600 !important;
	letter-spacing: 0.1em;
	text-align: center;
	margin-top: 80px;
}


.block1{
	background-color: #ffe4e0;
	padding: 20px;
	border-radius: 20px;
}

.step{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1.5%;
	padding: 0;
	margin: 0;
	list-style: none;
}

.step li{
	width: 23.5%;
	box-sizing: border-box;
	position: relative;
	text-align: center;
}

.step p{
	margin: 15px 0;
	font-size: 1.2em;
	text-align: center;
	font-weight: 600;
	line-height: 1.5;

}

/* 矢印（▶）をliの右側に表示 */
.step li::after {
	content: "";
	position: absolute;
	top: 35%;
	right: -19px;
	transform: translateY(-50%);
	width: 0;
	height: 0;
	border-top: 15px solid transparent;
	border-bottom: 15px solid transparent;
	border-left: 20px solid #333333;
}

/* 最後のliには矢印を表示しない */
.step li:last-child::after {
	content: none;
}


/*ガチャガチャタイプを選ぶ*/
.block2{
	padding: 10px;
	margin-bottom: 120px;
}


.title-text-2{
	position: relative;
	font-size: 35px;
	font-weight: 600 !important;
	letter-spacing: 0.1em;
	text-align: center;
	margin: 120px 0 60px;
}

.title-text-2::before {
	position: absolute;
	border-bottom: 5px solid #c1272d;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 100px;
	content: '';
}

.choice1{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1%;
	padding: 0;
	list-style: none;
}

.choice1 li{
	width: 23.5%;
	box-sizing: border-box;
	position: relative;
	text-align: center;
}

.choice1 .subtitle{
	margin: 15px 0;
	font-weight: 600;
	font-size: 1.2em;
	text-align: center;
	line-height: 1.5;

}

.choice1 p{
	height: 60px;
	margin: 15px 0;
	font-size: 1.1em;
	text-align: center;
	padding: 0 15px;

}

.button_orange{
	margin: 40px 0;
	font-weight: 600;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 50px;
	position: relative;
	background: #fb9214;
	border-radius: 30px;
	box-sizing: border-box;
	color: #fff;
	font-size: 1.2em;
	text-align: center;
	text-decoration: none;
	transition-duration: 0.3s;
}

.button_orange::before{
	content: "";
	position: absolute;
	top: 120%;
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 15px solid #ffdaa0;
}

.button_orange:hover {
	background: #ffdaa0;
	color: #fff;
}

.button_orange:hover:before {
	top: 130%;
}

.button_green{
	margin: 40px 0;
	font-weight: 600;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 50px;
	position: relative;
	background: #39b54a;
	border-radius: 30px;
	box-sizing: border-box;
	color: #fff;
	font-size: 1.2em;
	text-align: center;
	text-decoration: none;
	transition-duration: 0.3s;
}

.button_green::before{
	content: "";
	position: absolute;
	top: 120%;
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 15px solid #b7e3ae;
}

.button_green:hover {
	background: #b7e3ae;
	color: #fff;
}

.button_green:hover:before {
	top: 130%;
}

.button_blue{
	margin: 40px 0;
	font-weight: 600;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 50px;
	position: relative;
	background: #29abe2;
	border-radius: 30px;
	box-sizing: border-box;
	color: #fff;
	font-size: 1.2em;
	text-align: center;
	text-decoration: none;
	transition-duration: 0.3s;
}

.button_blue::before{
	content: "";
	position: absolute;
	top: 120%;
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 15px solid #d9f1f2;
}

.button_blue:hover {
	background: #d9f1f2;
	color: #fff;
}

.button_blue:hover:before {
	top: 130%;
}


/*ガチャガチャマシン スタートセット*/

.bg_orange{
	background-color: #fb9214;/*タイトルの*/
	padding: 20px;
}

.bg_orange2{
	position: relative;
	background-color: #fff4d6;/*薄い色の*/
	padding: 20px 20px 0px;
}

.bg_orange3{
	background-color: #fb9214;/*濃い色の*/
	padding: 20px;
}

.nextstep{
	position: relative;
	padding-top: 60px;
	color: #fb9214;
	font-weight: 600;
	font-size: 30px;
	text-align: center;
}

.nextstep::after{
	content: "";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	top: 100%;
	left: 50%;
	margin: 0 auto;
	z-index: 1;
	transform: translateX(-50%); /* 真ん中に寄せる */
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #fb9214;
}

.bg_orange2::after {
	content: "";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	top: 100%;
	left: 50%; /* 中央基準 */
	margin: 0 auto;
	transform: translateX(-50%); /* 真ん中に寄せる */
	border-left: 450px solid transparent;
	border-right: 450px solid transparent;
	border-top: 100px solid #fff4d6;
}
.title-3 {
	font-size: 2.5em;
	font-weight: 600;
	text-align: center;
	color: #fff;
}

.title-text-3{
	position: relative;
	font-size: 35px;
	font-weight: 600 !important;
	letter-spacing: 0.1em;
	text-align: center;
	padding-top: 20px;
}

.title-text-3::before {
	position: absolute;
	border-bottom: 5px solid #fb9214;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 100px;
	content: '';
}

.box {
	display: flex;
	align-items: center; /* 子要素を縦方向に中央揃え */
	margin: 40px 0;
	width: 100%;
}

.item1 {
	width: 100%;
	font-weight: 900;
}

.item1 img{
	width: 90%;
	margin: 0 auto;
	display: block;
}


.item2 {
	order: 1;
	width: 70%;
	padding: 10px 20px;

}

.text-background2 {
	line-height: 1.5;
	background-color: white;
	border-radius: 20px;
	padding: 20px;
}

.choice2{
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1%;
	padding: 0;
	margin-top: 40px;
	list-style: none;
}

.choice2 li{
	width: 23.5%;
	box-sizing: border-box;
	position: relative;
	text-align: center;
}

.choice2 .subtitle{
	margin: 15px 0;
	font-weight: 600;
	font-size: 1.2em;
	text-align: center;
	line-height: 1.5;

}

.choice2 p{
	margin: 15px 0;
	font-size: 1.1em;
	text-align: center;
	padding: 0 15px;

}

.button_green2{
	margin-bottom: 10px;
	padding: 10px;
	font-weight: 600;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	position: relative;
	background: #39b54a;
	border-radius: 50px;
	box-sizing: border-box;
	color: #fff;
	text-align: center;
	text-decoration: underline;
	transition-duration: 0.3s;
	line-height: 1.5;
}



.button_green2:hover {
	background: #b7e3ae;
	color: #fff;
}


.title-text-4{
	position: relative;
	font-size: 35px;
	font-weight: 600 !important;
	letter-spacing: 0.1em;
	text-align: center;
	padding-top: 100px;
	color: #fff;
}

.title-text-4::before {
	position: absolute;
	border-bottom: 5px solid #fff;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 100px;
	content: '';

}

.text-background3 {/* リスト用 */
	line-height: 1.5;
	background-color: white;
	border-radius: 20px;
	padding: 20px;
}

/*くじガチャガチャマシン スタートセット*/
.bg_green {
	background-color: #39b54a;
	padding: 20px;
}


.bg_green2 {
	position: relative;
	background-color: #eaf7ec;
	padding: 20px 20px 0px;
}

.bg_green2::after {
	content: "";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	top: 100%;
	left: 50%;
	margin: 0 auto;
	transform: translateX(-50%);
	border-left: 450px solid transparent;
	border-right: 450px solid transparent;
	border-top: 100px solid #eaf7ec;
}

.bg_green3 {
	background-color: #39b54a;
	padding: 20px;
}

.title-text-5 {
	position: relative;
	font-size: 35px;
	font-weight: 600 !important;
	letter-spacing: 0.1em;
	text-align: center;
	padding-top: 20px;
}

.title-text-5::before {
	position: absolute;
	border-bottom: 5px solid #39b54a;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 100px;
	content: '';
}

.button_orange2 {
	margin-bottom: 10px;
	padding: 10px;
	font-weight: 600;
	display: flex
	;
	justify-content: center;
	align-items: center;
	width: 100%;
	position: relative;
	background: #fb9214;
	border-radius: 50px;
	box-sizing: border-box;
	color: #fff;
	text-align: center;
	text-decoration: underline;
	transition-duration: 0.3s;
	line-height: 1.5;
}

.button_orange2:hover {
	background: #ffdaa0;
	color: #fff;
}

.nextstep_green {
	position: relative;
	padding-top: 60px;
	color: #39b54a;
	font-weight: 600;
	font-size: 30px;
	text-align: center;
}

.nextstep_green::after {
	content: "";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	top: 100%;
	left: 50%;
	margin: 0 auto;
	z-index: 1;
	transform: translateX(-50%);
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #39b54a;
}


/*オリジナルガチャ*/
.bg_blue {
	background-color: #29abe2;
	padding: 20px;
}


.bg_blue2 {
	position: relative;
	background-color: #d9f1f2;
	padding: 20px 20px 0px;
}

.bg_blue2::after {
	content: "";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	top: 100%;
	left: 50%;
	margin: 0 auto;
	transform: translateX(-50%);
	border-left: 450px solid transparent;
	border-right: 450px solid transparent;
	border-top: 100px solid #d9f1f2;
}

.bg_blue3 {
	background-color: #29abe2;
	padding: 20px;
}

.title-text-6 {
	position: relative;
	font-size: 35px;
	font-weight: 600 !important;
	letter-spacing: 0.1em;
	text-align: center;
	padding-top: 20px;
}

.title-text-6::before {
	position: absolute;
	border-bottom: 5px solid #29abe2;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 100px;
	content: '';
}


.nextstep_blue {
	position: relative;
	padding-top: 60px;
	color: #29abe2;
	font-weight: 600;
	font-size: 30px;
	text-align: center;
}

.nextstep_blue::after {
	content: "";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	top: 100%;
	left: 50%;
	margin: 0 auto;
	z-index: 1;
	transform: translateX(-50%);
	border-left: 20px solid transparent;
	border-right: 20px solid transparent;
	border-top: 20px solid #29abe2;
}

.bg_blue img{
	width: 95%;
	margin: 10px auto;
	display: block;
}

/*単品*/
.bg_red {
	background-color: #c1272d;
	padding: 20px;
}

.title-text-7 {
	position: relative;
	font-size: 35px;
	font-weight: 600 !important;
	letter-spacing: 0.1em;
	text-align: center;
	padding-top: 100px;
	margin-bottom: 100px;
}

.title-text-7::before {
	position: absolute;
	border-bottom: 5px solid #c1272d;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	width: 100px;
	content: '';
}

.button_blue2 {
	margin-bottom: 10px;
	padding: 10px;
	font-weight: 600;
	display: flex
	;
	justify-content: center;
	align-items: center;
	width: 100%;
	position: relative;
	background: #29abe2;
	border-radius: 50px;
	box-sizing: border-box;
	color: #fff;
	text-align: center;
	text-decoration: underline;
	transition-duration: 0.3s;
	line-height: 1.5;
}

.button_blue2:hover {
	background: #d9f1f2;
	color: #fff;
}

.inquiry{
	  margin: 120px auto;
    display: block;
    text-align: center;
}


#kuji_startset{
  scroll-margin-top: 80px !important; /* 固定ヘッダーの高さに合わせて調整 */
}

#normal_startset{
  scroll-margin-top: 80px !important; /* 固定ヘッダーの高さに合わせて調整 */
}

#original_startset{
  scroll-margin-top: 80px !important; /* 固定ヘッダーの高さに合わせて調整 */
}

/*==========================================================================================
====================================　　　　　　SP　　　　　　==================================
==========================================================================================*/
@media screen and (max-width: 768px) {




	.font_28 {
		font-size: 1.2em!important;
		line-height: 1.1;
	}

	.red{
		line-height: 1.1;
		font-size: 0.8em;
	}

/*冒頭部分*/

.overlay-text {
	margin: 20px 10px;
	font-size: 16px;
	color: #333;
	font-weight: 600;
	line-height: 1.5;
}

/*カンタン4ステップ*/
.title-text-1{
	font-size: 2em;
	font-weight: 600 !important;
	letter-spacing: 0.1em;
	text-align: center;
	margin-bottom: 20px;
	line-height: 1.5;
}

.title-text-1 span {
	display: contents;
	line-height: 1;
	margin-top: -10px; /* ← 必要に応じて上に引き寄せる */
}


.step {
	display: block;
	padding: 0;
	margin: 0;
	list-style: none;
}

.step li {
	width: 100%;
	box-sizing: border-box;
	display: flex;
	flex-wrap: wrap;
	justify-content: normal;
	gap: 1.5%;
	align-items: center;
	margin-bottom: 20px;
	overflow: hidden; /* テキストがはみ出さないように */
}

.step p {
	margin: 0 0 0 15px;
	text-align: left;
	flex: 1 1 0;
	min-width: 0;
	overflow-wrap: break-word;
	word-break: break-word;
}

.step img{
	max-width: 40%;
}

.step li {
	width: 100%;
	overflow: visible;
}

.step li::after {
	top: 100%;
	left: 50%;
	right: auto;
	transform: translateX(-50%);
	border-left: 15px solid transparent;
	border-right: 15px solid transparent;
	border-top: 15px solid #333333;
}


/*ガチャガチャタイプを選ぶ*/
.title-text-2{
	position: relative;
	font-size: 2em;
	font-weight: 600 !important;
	text-align: center;
	margin: 60px 0;
	letter-spacing: 0;
}

.block2 {
	margin-bottom: 120px;
}

.contents {
	margin: auto;
}

.choice1 {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 1%;
	padding: 0;
	margin: 0;
	list-style: none;
}

.choice1 li {
	width: 30.5%;
	box-sizing: border-box;
	position: relative;
	text-align: center;
	letter-spacing: -0.1em;
}

.choice1 .subtitle {
	margin: 10px 0;
	font-weight: 600;
	font-size: 0.8em;
	text-align: center;
	line-height: 1.2;
}

.choice1 p {
	height: 60px;
	margin: 15px 0;
	font-size: 0.9em;
	text-align: center;
	padding: 0 5px;
	line-height: 1.5;
}



.button_orange {
	margin: 20px 0;
	font-weight: 600;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 50px;
	position: relative;
	background: #fb9214;
	border-radius: 30px;
	box-sizing: border-box;
	color: #fff;
	font-size: 0.8em;
	text-align: center;
	text-decoration: none;
	transition-duration: 0.3s;
	line-height: 1.5;
}

.button_green {
	margin: 20px 0;
	font-weight: 600;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 50px;
	position: relative;
	background: #39b54a;
	border-radius: 30px;
	box-sizing: border-box;
	color: #fff;
	font-size: 0.8em;
	text-align: center;
	text-decoration: none;
	transition-duration: 0.3s;
	line-height: 1.5;
}

.button_blue {
	margin: 20px 0;
	font-weight: 600;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 50px;
	position: relative;
	background: #29abe2;
	border-radius: 30px;
	box-sizing: border-box;
	color: #fff;
	font-size: 0.8em;
	text-align: center;
	text-decoration: none;
	transition-duration: 0.3s;
	line-height: 1.5;
}


/*ガチャガチャタイプを選ぶ*/

.title-3 {
	font-size: 1.5em;
	font-weight: 600;
	text-align: center;
	color: #fff;
	line-height: 1.2;
}

.bg_orange {
	background-color: #fb9214;
	padding: 20px;
	margin: 80px -15px 0px;
}

.bg_orange2 {
	position: relative;
	background-color: #fff4d6;
	padding: 20px 20px 0px;
	margin: 0 -15px;
}

.bg_orange3{
	background-color: #fb9214;/*濃い色の*/
	padding: 20px;
	margin: 0px -15px;
}


.title-text-3 {
	font-size: 2em;
}

.box {
	display: block;
}

.item2 {
	order: 1;
	width: 100%;
	margin: 40px 0px;
	padding: 0;
}

.explanation {
	margin: 20px 5px 30px;
	font-size: 1.1em;
	font-weight: 600;
}

.bg_orange2::after {
	content: "";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	top: 100%;
	left: 50%; /* 中央基準 */
	transform: translateX(-50%); /* 真ん中に寄せる */
	border-left: 50vw solid transparent;
	border-right: 50vw solid transparent;
	border-top: 10vw solid #fff4d6; /* 三角の色・高さもvwに */
}

.choice2 li {
	width: 48%;
}

.choice2 li:not(:nth-last-child(-n+2)) {
	margin-bottom: 80px;
}

.choice2 .subtitle{
height: 60px;

}

.nextstep {
	padding-top: 40px;
}

.title-text-4 {
	font-size: 2em;
	padding: 50px 0 10px;
	line-height: 1.2;
  margin-bottom: 40px;

}

.text-background3 {/* リスト用 */
	line-height: 1.5;
	background-color: white;
	border-radius: 20px;
	padding: 30px 10px;
}

/*くじガチャタイプを選ぶ*/


.bg_green {
	padding: 20px;
	margin: 0px -15px 0px;
}

.bg_green2 {
	position: relative;
	padding: 20px 20px 0px;
	margin: 0 -15px;
}

.bg_green3{
	padding: 20px;
	margin: 0px -15px;
}



.bg_green2::after {
	content: "";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	top: 100%;
	left: 50%; /* 中央基準 */
	transform: translateX(-50%); /* 真ん中に寄せる */
	border-left: 50vw solid transparent;
	border-right: 50vw solid transparent;
	border-top: 10vw solid #eaf7ec; /* 三角の色・高さもvwに */
}

.nextstep_green {
	padding-top: 40px;
}

.title-text-5 {
	font-size: 2em;
	padding-top: 25px;
}

/*オリジナルガチャを選ぶ*/


.bg_blue {
	padding: 20px;
	margin: 0px -15px 0px;
}

.bg_blue2 {
	position: relative;
	padding: 20px 20px 0px;
	margin: 0 -15px;
}

.bg_blue3{
	padding: 20px;
	margin: 0px -15px;
}



.bg_blue2::after {
	content: "";
	display: block;
	position: absolute;
	width: 0;
	height: 0;
	top: 100%;
	left: 50%; /* 中央基準 */
	transform: translateX(-50%); /* 真ん中に寄せる */
	border-left: 50vw solid transparent;
	border-right: 50vw solid transparent;
	border-top: 10vw solid #d9f1f2; /* 三角の色・高さもvwに */
}

.nextstep_blue {
	padding-top: 40px;
}

.title-text-6 {
	font-size: 2em;
	padding-top: 25px;
	line-height: 1.2;
}

.title-text-6::before {
	top: 120%;
}

.bg_red {
	padding: 20px;
	margin: 0px -15px 0px;
}

.title-text-7 {
	font-size: 2em;
	padding-top: 50px;
}

}