@charset "utf-8";

#pointSCT .image img,
#attemptSCT .image,
#selectSCT .image,
#contents h2 {
opacity: 0;
}
#contents h2.activeView {
animation: head 0.7s ease forwards;
}
#attemptSCT .image.activeView,
#selectSCT .image.activeView {
animation: img_top 0.7s ease forwards;
}
#attemptSCT .block:first-child .image.activeView,
#selectSCT .block:first-child .image.activeView {
animation: img_top 0.7s ease forwards;
}
#attemptSCT .block:nth-of-type(2) .image.activeView,
#selectSCT .block:nth-of-type(2) .image.activeView {
animation-delay: 0.3s;
}
#attemptSCT .block:nth-of-type(3) .image.activeView,
#selectSCT .block:nth-of-type(3) .image.activeView {
animation-delay: 0.6s;
}
#pointSCT .image.activeView img {
animation: img_top 0.7s ease forwards;
}
#pointSCT .block:nth-of-type(even) .image.activeView img {
animation-delay: 0.3s;
}

#titleSCT {
padding-bottom: 13.5%;
}
#titleSCT .cont {
padding: 77px 0 0 0;
text-align: center;
}
#titleSCT.activeView h1,
#titleSCT.activeView .en {
animation: head 0.7s ease forwards;
}
#titleSCT .en {
color: var(--color-sub2);
font-weight: 700;
font-family: 'BIZ UDMincho', serif;
font-size: 48px;
letter-spacing: 0.1em;
line-height: 1.2;
opacity: 0;
}
#titleSCT h1 {
font-weight: 700;
font-family: 'BIZ UDMincho', serif;
font-size: 15px;
letter-spacing: 0.15em;
line-height: 1.2;
opacity: 0;
}
@media screen and (min-width: 768px) {
	#titleSCT {
	padding-bottom: 10%;
	}
	#titleSCT .cont {
	padding: 139px 0 0 0;
	text-align: center;
	}
	#titleSCT .en {
	font-size: 110px;
	}
	#titleSCT h1 {
	font-size: 18px;
	}
}

#pointSCT {
position: relative;
background-color: var(--color-sub3);
margin-bottom: -100px;
padding-bottom: 100px;
opacity: 0;
}
#pointSCT.activeView {
animation: sct_bottom_sp 0.7s ease forwards;
}
#pointSCT .cont {
padding: 22px 0 53px 0;
}
#pointSCT::before {
content: '';
display: block;
position: absolute;
left: 0;
bottom: calc(100% - 1px);
background: url("../../common/img/lin_wave.svg") no-repeat center center;
background-size: 100% auto;
width: 100%;
padding-top: 18.0433%;
}
#pointSCT .lead {
margin-bottom: 60px;
font-size: 14px;
line-height: 2.29;
text-align: center;
}
#pointSCT h2 {
margin-bottom: 49px;
color: var(--color-sub1);
font-weight: 700;
font-family: 'BIZ UDMincho', serif;
font-size: 26px;
letter-spacing: 0.15em;
line-height: 1.2;
text-align: center;
}
#pointSCT h2 span {
display: inline-block;
margin-bottom: 8px;
font-size: 18px;
}
#pointSCT .list {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 40px;
}
#pointSCT .block {
position: relative;
width: 335px;
}
#pointSCT .block .category {
margin-bottom: 10px;
color: var(--color-sub1);
font-weight: 700;
font-family: 'BIZ UDMincho', serif;
font-size: 13px;
letter-spacing: 0.15em;
line-height: 1.2;
text-align: center;
}
#pointSCT .block .category span {
font-size: 26px;
}
#pointSCT .block h3 {
position: relative;
margin-bottom: 27px;
color: var(--color-sub1);
font-weight: 700;
font-family: 'BIZ UDMincho', serif;
font-size: 26px;
letter-spacing: 0.15em;
line-height: 1.2;
text-align: center;
z-index: 2;
}
#pointSCT .block h3::before {
transform: translate(-50%,-34%);
content: '';
display: block;
position: absolute;
left: 50%;
top: 50%;
background:url("../img/bg_ribbon.svg") no-repeat center center;
background-size: contain;
width: 100%;
height: 62px;
z-index: -1;
}
#pointSCT .block .image {
position: relative;
margin-bottom: 14px;
padding-bottom: 38px;
z-index: 1;
}
#pointSCT .block .image::before {
transform: translate(-50%,0);
content: '';
display: block;
position: absolute;
left: 50%;
bottom: 0;
background:url("../img/bg_stand.svg") no-repeat center center;
background-size: contain;
width: 297px;
height: 47px;
z-index: -1;
}
#pointSCT .block .image img {
display: block;
margin: 0 auto;
border-radius: 50%;
width: 100%;
height: auto;
}
@media screen and (min-width: 768px) {
	#pointSCT.activeView {
	animation: sct_bottom_pc 0.7s ease forwards;
	}
	#pointSCT .cont {
	padding: 15px 0 92px 0;
	}
	#pointSCT .lead {
	margin-bottom: 93px;
	font-size: 16px;
	line-height: 2.37;
	}
	#pointSCT h2 {
	margin-bottom: 34px;
	font-size: 42px;
	}
	#pointSCT h2 span {
	margin-bottom: 23px;
	font-size: 28px;
	}
	#pointSCT .list {
	flex-direction: row;
	align-items: flex-start;
	margin: 0 auto;
	width: 970px;
	gap: 50px 70px;
	}
	#pointSCT .block {
	width: 450px;
	}
	#pointSCT .block .category {
	margin-bottom: 14px;
	font-size: 18px;
	}
	#pointSCT .block .category span {
	display: inline-block;
	margin-top: -2px;
	font-size: 36px;
	}
	#pointSCT .block h3 {
	margin-bottom: 37px;
	font-size: 36px;
	}
	#pointSCT .block h3::before {
	transform: translate(-50%,-34%);
	width: 280px;
	height: 83px;
	}
	#pointSCT .block .image {
	position: relative;
	margin-bottom: 14px;
	padding-bottom: 54px;
	z-index: 1;
	}
	#pointSCT .block .image::before {
	width: 400px;
	height: 62px;
	}
	#pointSCT .block .image img {
	display: block;
	margin: 0 auto;
	border-radius: 50%;
	width: 100%;
	height: auto;
	}
	#pointSCT .block p {
	margin: 0 auto;
	width: 320px;
	font-size: 14px;
	}
}

#attemptSCT {
transform: translateY(50px);
position: relative;
background-color: var(--color-main);
}
#attemptSCT.activeView {
animation: sct_bottom_sp2 0.7s ease forwards;
}
#attemptSCT .cont {
padding: 52px 0 59px 0;
}
#attemptSCT::before {
content: '';
transform: translateY(50%);
display: block;
position: absolute;
left: 0;
bottom: 100%;
background: url("../../common/img/lin_wave2.svg") repeat-x center center;
background-size: auto 18px;
width: 100%;
height: 18px;
}
#attemptSCT h2 {
margin-bottom: 16px;
color: var(--color-sub1);
font-weight: 700;
font-family: 'BIZ UDMincho', serif;
font-size: 26px;
letter-spacing: 0.15em;
line-height: 1.2;
text-align: center;
}
#attemptSCT h2 span {
display: inline-block;
margin-bottom: 8px;
font-size: 18px;
}
#attemptSCT .lead {
margin-bottom: 44px;
font-size: 14px;
line-height: 2.29;
text-align: center;
}
#attemptSCT .list {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 20px;
}
#attemptSCT .block {
box-sizing: border-box;
background-color: #fff;
border-radius: 18px;
padding: 23px 20px 20px 20px;
width: 335px;
}
#attemptSCT .block h3 {
margin-bottom: 11px;
font-weight: 700;
font-size: 18px;
line-height: 1.2;
text-align: center;
}
#attemptSCT .block p {
margin-bottom: 15px;
}
#attemptSCT .block .image img {
display: block;
width: 100%;
height: auto;
}
@media screen and (min-width: 768px) {
	#attemptSCT {
	transform: translateY(100px);
	}
	#attemptSCT.activeView {
	animation: sct_bottom_pc2 0.7s ease forwards;
	}
	#attemptSCT .cont {
	padding: 96px 0 118px 0;
	}
	#attemptSCT::before {
	background-size: auto 36px;
	height: 36px;
	}
	#attemptSCT h2 {
	margin-bottom: 43px;
	font-size: 42px;
	}
	#attemptSCT h2 span {
	margin-bottom: 14px;
	font-size: 28px;
	}
	#attemptSCT .lead {
	margin-bottom: 49px;
	font-size: 16px;
	line-height: 2.37;
	}
	#attemptSCT .list {
	flex-direction: row;
	align-items: flex-start;
	gap: 40px;
	margin: 0 auto;
	width: 1080px;
	}
	#attemptSCT .block {
	border-radius: 30px;
	padding: 36px 40px 40px 40px;
	width: 520px;
	}
	#attemptSCT .block h3 {
	margin-bottom: 18px;
	font-size: 24px;
	}
	#attemptSCT .block p {
	margin-bottom: 30px;
	font-size: 14px;
	}
}

#selectSCT {
position: relative;
background-color: var(--color-sub3);
opacity: 0;
}
#selectSCT.activeView {
animation: sct_bottom_sp2 0.7s ease forwards;
}
#selectSCT .cont {
padding: 52px 0 100px 0;
}
#selectSCT::before {
content: '';
transform: translateY(50%);
display: block;
position: absolute;
left: 0;
bottom: 100%;
background: url("../../common/img/lin_wave3.svg") repeat-x center center;
background-size: auto 18px;
width: 100%;
height: 18px;
}
#selectSCT h2 {
margin-bottom: 16px;
color: var(--color-sub1);
font-weight: 700;
font-family: 'BIZ UDMincho', serif;
font-size: 26px;
letter-spacing: 0.15em;
line-height: 1.2;
text-align: center;
}
#selectSCT h2 span {
display: inline-block;
margin-bottom: 8px;
font-size: 18px;
}
#selectSCT .lead {
margin-bottom: 44px;
font-size: 14px;
line-height: 2.29;
text-align: center;
}
#selectSCT .list {
display: flex;
flex-direction: column;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 30px;
box-sizing: border-box;
background-color: #fff;
border-radius: 18px;
margin: 0 auto;
padding: 20px 20px 24px 20px;
width: 335px;
counter-reset: number 0;
}
#selectSCT .block h3 {
position: relative;
display: flex;
align-items: center;
margin-bottom: 10px;
padding-left: 62px;
height: 54px;
font-weight: 700;
font-size: 16px;
line-height: 1.5;
}
#selectSCT .block h3::before {
counter-increment: number 1;
content: counter(number) "";
display: block;
position: absolute;
left: 0;
top: 0;
background-color: var(--color-sub1);
border-radius: 50%;
width: 54px;
height: 54px;
color: #fff;
font-weight: 700;
font-family: 'BIZ UDMincho', serif;
font-size: 28px;
line-height: 54px;
text-align: center;
}
#selectSCT .block .image img {
display: block;
width: 100%;
height: auto;
}
#selectSCT .block p {
margin-top: 10px;
}
@media screen and (min-width: 768px) {
	#selectSCT.activeView {
	animation: sct_bottom_pc2 0.7s ease forwards;
	}
	#selectSCT .cont {
	padding: 96px 0 120px 0;
	}
	#selectSCT::before {
	background-size: auto 36px;
	height: 36px;
	}
	#selectSCT h2 {
	margin-bottom: 43px;
	font-size: 42px;
	}
	#selectSCT h2 span {
	margin-bottom: 14px;
	font-size: 28px;
	}
	#selectSCT .lead {
	margin-bottom: 49px;
	font-size: 16px;
	line-height: 2.37;
	}
	#selectSCT .list {
	flex-direction: row;
	align-items: flex-start;
	gap: 40px;
	border-radius: 30px;
	padding: 40px 40px 32px 40px;
	width: 1080px;
	}
	#selectSCT .block {
	width: 305px;
	}
	#selectSCT .block h3 {
	margin-bottom: 22px;
	padding-left: 71px;
	height: 60px;
	font-size: 18px;
	line-height: 1.56;
	}
	#selectSCT .block h3::before {
	width: 60px;
	height: 60px;
	font-size: 32px;
	line-height: 60px;
	}
	#selectSCT .block p {
	margin-top: 15px;
	font-size: 14px;
	}
}