@charset "UTF-8";
/*-------------------------
 * 
 * FV
 * 
-------------------------*/

#fv {
	position: relative;
	z-index: 2;
}

#fv > .inner {
	width: var(--inner-width);
	display: flex;
	flex-direction: column;
	align-items: center;
	position: relative;
	margin-bottom: 48px;
}

#catch .catch_main {
	font-size: var(--fontSizeHeading);
	line-height: 1.5;
	color: var(--mainColor01);
	display: flex;
	flex-direction: column;
	align-items: center;
	white-space: nowrap;
	margin-bottom: 16px;
}

#catch .catch_sub {
	font-size: 18px;
	line-height: 1.75;
	margin-bottom: 24px;
}

#catch .catch_sub  p {
	display: flex;
	flex-direction: column;
	align-items: center;
	white-space: nowrap;
}

/*-------------------------
 * 
 * Screenshot
 * 
-------------------------*/

#screenshots {
	padding: 120px 0 48px;
	position: relative;
	z-index: 1;
}

#screenshots > .inner {
	width: var(--inner-width);
	height: 900px;
	overflow: hidden;
}

#screenshots #iphone {
	width: var(--content-width);
	height: 683px;
	margin: 0 auto;
	position: relative;
}

#screenshots .iphone_frame {
	width: var(--content-width);
	height: 683px;
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: url(../images/iphone_frame.png) no-repeat center center / cover;
}

#screenshots .screenshot_container {
	width: 313px;
	height: 677px;
	background: #000;
	border-radius: 40px;
	overflow: hidden;
	position: absolute;
	top: 3px;
	left: 11px;
	z-index: 0;
}

#screenshots .screenshot:not(#screenshot_01) {
	position: absolute;
	top: 0;
	left: 0;
}

@media (max-width: 640px) {

	#screenshots {
		padding-top: 96px;
	}

}

/*-------------------------
 * 
 * Sub Container
 * 
-------------------------*/

#sub_container {
    width: 100%;
    background: var(--white);
    position: relative;
    border-radius: 24px;
    overflow: hidden;
}

/*-------------------------
 * Sub Page Title
-------------------------*/

#sub_title {
	position: relative;
}

#sub_title > .inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 56px 0 40px;
	position: relative;
}

#sub_title .sub_title_text {
	color: var(--mainColor01);
	font-size: var(--fontSizeHeading);
	line-height: 1;
}

@media (max-width: 640px) {

	#sub_title > .inner {
		width: 86%;
		padding: 48px 0 36px;
	}

	#sub_title .sub_title_text {
		font-size: 20px;
	}

}

/*-------------------------
 * Sub Page Body
-------------------------*/

#sub_body > .inner {
	width: var(--content-width);
}

@media (max-width: 640px) {

	#sub_body > .inner {
		width: 86%;
	}

}

/*-------------------------
 * Documents
-------------------------*/

.docs_sec {
	margin-bottom: 28px;
}

.docs_sec:last-of-type {
	margin-bottom: 0;
}

.docs_sec_hl {
	font-size: var(--documentTextHeading);
	line-height: 1.5;
	margin-bottom: 12px;
}

.docs_sec_lead {
	font-size: var(--documentTextDefault);
	margin-bottom: 20px;
}

.docs_sec_item {
	font-size: var(--documentTextDefault);
	margin-bottom: 20px;
}

.docs_sec_item_hl {
	font-size: var(--documentTextDefault);
	line-height: 1.5;
	margin-bottom: 1em;
}

.docs_sec_item_desc > * > li {
	margin-bottom: .5em;
}

.docs_sec_item_desc > * > li > * > li {
	margin-top: .25em;
}

.counter_01 {
	counter-reset: num1 0;
}

.counter_01 .docs_sec_item_hl {
	position: relative;
	padding-left: 16px;
}

.counter_01 .docs_sec_item_hl::before {
	display: block;
	counter-increment: num1 1;
	content: counter(num1)'.';
	position: absolute;
	top: -1px;
	left: 0;
}

.counter_01 .docs_sec_item:nth-of-type(n+10) .docs_sec_item_hl::before {
	left: -.4em;
}

.counter_01 .docs_sec_item_desc {
	padding-left: 16px;
}

.counter_02 {
	list-style-type: none;
	counter-reset: num2 0;
}

.counter_02 > li {
	position: relative;
	padding-left: 16px;
}

.counter_02 > li:before {
	counter-increment: num2 1;
	content: counter(num2)'.';
	position: absolute;
	left: 0;
	top: 0;
	letter-spacing: .1em;
}

.counter_02 > li:nth-of-type(1)::before {
	letter-spacing: .2em;
	padding-left: .2em;
}

.counter_02 > li:nth-of-type(n+10)::before {
	left: -.4em;
}

.counter_03 {
	list-style-type: none;
	counter-reset: num3 0;
}

.counter_03 > li {
	position: relative;
	padding-left: 24px;
}

.counter_03 > li:before {
	counter-increment: num3 1;
	content: '('counter(num3)')';
	position: absolute;
	left: 0;
	top: 0;
	letter-spacing: .1em;
}

.counter_03 > li:nth-of-type(1):before {
	letter-spacing: .2em;
}

.counter_03 > li:nth-of-type(n+10)::before {
	left: -.5em;
}

.docs_sec_item_desc > * {
	margin-bottom: 1em;
}

.docs_footer {
	margin: 24px auto 48px;
}

.docs_date {
	font-size: var(--documentTextDefault);
	margin-bottom: 24px;
}

.docs_date_terms {
	margin-bottom: 0;
}

.docs_contact {
	width: 100%;
	font-size: var(--documentTextHeading);
	padding: 20px;
	background: var(--white);
	border: 1px solid var(--gray);
    position: relative;
    border-radius: 8px;
    overflow: hidden;
}

.docs_contact_hl {
	font-size: var(--documentTextDefault);
	line-height: 1.5;
	margin-bottom: 8px;
}

.docs_contact_desc {
	font-size: var(--documentTextDefault);
}

.docs_contact_desc p {
	display: flex;
	flex-direction: column;
}

.docs_notes {
	font-size: var(--documentTextDefault);
}

.docs_notes p {
	display: flex;
	align-items: flex-start;
	gap: .25em;
}

.docs_notes p::before {
	display: block;
	content: '※';
}