@charset "utf-8";

@media print, screen and (min-width:768px) {
	footer {
		margin-top: -160px;
	}
}

@media print, screen and (min-width:1645px) {
	footer {
		margin-top: -9.6vw;
	}
}

@media screen and (max-width:767px) {
	footer {
		margin-top: -8.6vw;
	}
}

/* -------------------------------------------------
	#flow
------------------------------------------------- */

#flow .headline {
	margin-top: 62px;
}
#flow .headline {
	font-size: 26px;
	font-weight: bold;
	text-align: center;
}

#flow ol {
	margin-top: 45px;
}
#flow ol li .title {
	height: 90px;
	padding-left: 17px;
	border-radius: 45px 0 0 45px;
	display: flex;
	align-items: center;
	gap: 0 32px;
}
#flow ol li:nth-child(1) .title { background: linear-gradient(90deg, rgba(250,168,25,1) 0%, rgba(250,168,25,0.45) 100%); }
#flow ol li:nth-child(2) .title { background: linear-gradient(90deg, rgba(64,211,196,1) 0%, rgba(64,211,196,0.45) 100%); }
#flow ol li:nth-child(3) .title { background: linear-gradient(90deg, rgba(64,211,196,1) 0%, rgba(64,211,196,0.45) 100%); }
#flow ol li:nth-child(4) .title { background: linear-gradient(90deg, rgba(93,209,239,1) 0%, rgba(93,209,239,0.45) 100%); }
#flow ol li:nth-child(5) .title { background: linear-gradient(90deg, rgba(255,140,69,1) 0%, rgba(255,140,69,0.45) 100%); }
#flow ol li:nth-child(6) .title { background: linear-gradient(90deg, rgba(229,192,78,1) 0%, rgba(229,192,78,0.45) 100%); }

#flow ol li .title .num {
	width: 67px;
	height: 67px;
	background: #fff;
	border-radius: 50%;
	display: flex;
	justify-content: center;
	align-items: center;
	font-size: 50px;
	font-family: Roboto , 'Albert Sans';
	font-weight: 400;
}
#flow ol li:nth-child(1) .num { color: #FAA819; }
#flow ol li:nth-child(2) .num { color: #08BFAD; }
#flow ol li:nth-child(3) .num { color: #08BFAD; }
#flow ol li:nth-child(4) .num { color: #2CB7DA; }
#flow ol li:nth-child(5) .num { color: #FF8C45; }
#flow ol li:nth-child(6) .num { color: #E5C04E; }

#flow ol li .title .text {
	font-size: 22px;
	font-weight: bold;
}
#flow ol li .desc {
	padding: 16px 2em 25px 116px;
	font-size: 18px;
	line-height: calc(30 / 18);
	position: relative;
}
#flow ol li .desc::before {
	width: 0;
	height: 0;
	content: "";
	display: block;
	border-width: 26px 15px 0 15px;
	border-style: solid;
	position: absolute;
	left: 34px;
	top: 50%;
	transform: translateY(-50%);
}
#flow ol li .desc + ul{
	margin-top: -20px;
	margin-bottom:25px;
	padding-left:116px;
}
#flow ol li .notes li{
	font-size: 15px;
	line-height: calc(24 / 15);
	text-indent: -1em;
	margin-left: 1em;
}


#flow ol li:nth-child(1) .desc::before { border-color: #FAA819 transparent transparent transparent; }
#flow ol li:nth-child(2) .desc::before { border-color: #40D3C4 transparent transparent transparent; }
#flow ol li:nth-child(3) .desc::before { border-color: #40D3C4 transparent transparent transparent; }
#flow ol li:nth-child(4) .desc::before { border-color: #5DD1EF transparent transparent transparent; }
#flow ol li:nth-child(5) .desc::before { border-color: #FF8C45 transparent transparent transparent; }

#flow ol li:last-child .desc::before {
	display: none;
}

@media screen and (max-width:767px) {
	#flow .headline {
		margin-top: 40px;
	}
	#flow .headline {
		font-size: 20px;
	}

	#flow ol {
		margin-top: 35px;
	}
	#flow ol li .title {
		height: 63px;
		padding-left: 11px;
		border-radius: 33px 0 0 33px;
		gap: 0 12px;
	}

	#flow ol li .title .num {
		width: 45px;
		height: 45px;
		font-size: 30px;
	}

	#flow ol li .title .text {
		font-size: 18px;
	}
	#flow ol li .desc {
		padding: 16px 0 18px 68px;
		font-size: 16px;
		line-height: calc(25 / 16);
	}
	#flow ol li .desc::before {
		left: 19px;
		top: 21px;
		transform: translateY(0);
	}
	#flow ol li .desc + ul{
	padding-left:68px;
	}
	#flow ol li .desc + ul{
	margin-top: -12px;
	}
	#flow ol li .notes li{
		font-size: 13px;
		line-height: calc(22 / 14);
	}
}

/* -------------------------------------------------
	#rule
------------------------------------------------- */

#rule {	
	margin-top: 80px;
}
#rule ul li {
	padding: 25px 2.6% 28px;
	background: #fff;
	border-radius: 14px;
}
#rule ul li .title {
	padding-top: 56px;
	text-align: center;
	font-size: 18px;
	line-height:1.4;
	font-weight: bold;
	position: relative;
}
#rule ul li:nth-child(1) .title { background: url("../../shared/img/ico_17.svg") no-repeat 50% 2px / 39px auto; }
#rule ul li:nth-child(2) .title { background: url("../../shared/img/ico_18.svg") no-repeat 50% 0 / 37px auto; }
#rule ul li:nth-child(3) .title { background: url("../../shared/img/ico_19.svg") no-repeat 50% 0 / 34px auto; }
#rule ul li:nth-child(4) .title { background: url("../../shared/img/ico_21.svg") no-repeat 50% 0 / 35px auto; }
#rule ul li:nth-child(5) .title { background: url("../../shared/img/ico_22.svg") no-repeat 50% 0 / 33px auto; }
#rule ul li:nth-child(6) .title { background: url("../../shared/img/ico_25.svg") no-repeat 50% 0 / 47px auto; }
#rule ul li:nth-child(7) .title { background: url("../../shared/img/ico_26.svg") no-repeat 50% 0 / 47px auto; }
#rule ul li:nth-child(8) .title { background: url("../../shared/img/ico_27.svg") no-repeat 50% 0 / 47px auto; }
#rule ul li .desc {
	margin-top: 0.9em;
	font-size: 15px;
	line-height: 1.6;
}

@media print, screen and (min-width:768px) {
	#rule {
		padding-bottom: 220px;
		background: url("../../shared/img/bg_05.png") no-repeat fixed center center / cover;
	}
	#rule ul {
	display: flex;
    flex-wrap: wrap;
    justify-content: flex-start; 
    gap: 26px 20px;
}
	#rule ul li {
		width: calc(324 / 1020 * 100%);
	}
}

@media screen and (max-width:767px) {
	#rule {
		margin-top: 50px;
		padding-bottom: 95px;
		background: url("../../shared/img/bg_05_sp.png") no-repeat fixed center center / cover;
	}
	#rule ul {
		max-width: 400px;
		margin-left: auto;
		margin-right: auto;
		display: block;
	}
	#rule ul li {
		min-height: 189px;
		padding: 25px 6% 28px;
	}
	#rule ul li + li {
		margin-top: 22px;
	}
}
/*  追加 */
#rule .title {
	font-size: 20px;
	font-weight: bold;
	text-align: center;
	margin-bottom: 15px;
}

/* 説明文：左寄せ */
#rule .desc {
	font-size: 16px;
	line-height: 1.6;
	text-align: left;
	margin-bottom: 5px; 
	width: 100%;
}

/* カード自体のスタイル（親のli） */
#rule > ul > li {
    padding: 25px 2.6% 28px;
    background: #fff;
    border-radius: 14px;
    text-align: center; /* タイトル用 */
}

/* 箇条書きリスト（中のli）の干渉をリセット */
#rule .notes li {
    display: block;
    width: 100%;
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 5px; /* 項目間の余白 */
    text-align: left;
    list-style: none;
    
    /* 親(カード)のpadding設定を打ち消す */
    padding: 0 0 0 1em !important; 
    background: none !important;    /* 背景白を解除 */
    border-radius: 0 !important;    /* 角丸を解除 */
    /* インデント調整 */
    text-indent: -1em;
}
#rule li .notes{
    gap:0!important;
}

/* 最後の子要素の余白を消す */
#rule .notes li:last-child {
    margin-bottom: 0;
}

@media screen and (max-width:767px) {
#rule .notes li {
    min-height: 0;
}
#rule .notes li + li{
	margin-top:5px;
}
}