/* reset */
* {
	margin: 0;
	padding: 0;
	background: none;
	border: none;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	line-height: 1;
}
a,
a:link,
a:visited {
	text-decoration: none;
}
li {
	list-style: none;
}
button,
select {
	-webkit-appearance: none;
	appearance: none;
	background-color: transparent;
	border: none;
}
input,
textarea,
select,
button {
	font-family: inherit;
}

/* common */
:root {
	--fc2-primary-25: #ec3947;
	--fc2-primary-50: #EF5763;
	--fc2-primary-75: #f8b1b7;
	--fc2-primary-100: #fde5e7;
	--fc2-payment-25: #f28609;
	--fc2-payment-50: #F7931F;
	--fc2-secondary-50: #2F86ED;
	--fc2-secondary-75: #9fc7f7;
	--fc2-link-50: #2E5CB4;
	--neutral-neutral-20: #333333;
	--neutral-neutral-40: #808080;
	--neutral-neutral-90: #F6F6F6;
	--neutral-neutral-100: #ffffff;
	--neutral-neutral-60: #D3D3D3;
	--neutral-neutral-70: #E7E7E7;
	--neutral-10alpha-25: #0000007a;
	--live-green-50: #43b3ae;
	--color-border-primary-default: var(--fc2-primary-50);
	--color-border-emphasis: var(--neutral-neutral-60);
	--color-border-input-focus: var(--neutral-neutral-60);
	--color-border-default: var(--neutral-neutral-70);
	--color-border-input-default: var(--neutral-neutral-70);
	--color-border-secondary-default: var(--fc2-secondary-50);
	--color-background-primary-default: var(--fc2-primary-50);
	--color-background-primary-emphasis: var(--fc2-primary-25);
	--color-background-control-activated-subtle: var(--fc2-secondary-75);
	--color-background-payment-emphasis: var(--fc2-payment-25);
	--color-background-payment-default: var(--fc2-payment-50);
	--color-background-primary-faint: var(--fc2-primary-100);
	--color-background-subtle: var(--neutral-neutral-70);
	--color-background-faint: var(--neutral-neutral-90);
	--color-background-surface: var(--neutral-neutral-100);
	--color-background-scrim: var(--neutral-10alpha-25);
	--color-background-neutral10alpha-emphasis: var(rgba(255, 255, 255, 0.48));
	--color-background-tertiary-default: linear-gradient(0deg, var(--neutral-neutral-90) 0%, var(--neutral-neutral-100) 100%);
	--color-background-input: linear-gradient(0deg, var(--neutral-neutral-90) 0%, var(--neutral-neutral-100) 100%);
	--color-text-link-default: var(--fc2-link-50);
	--color-text-default: var(--neutral-neutral-20);
	--color-text-on-tertiary: var(--neutral-neutral-20);
	--color-text-subtle: var(--neutral-neutral-40);
	--color-text-primary-default: var(--fc2-primary-50);
	--color-text-on-primary: var(--neutral-neutral-100);
	--color-text-on-payment: var(--neutral-neutral-100);
	--color-icon-subtle: var(--neutral-neutral-40);
	--button-hover-animation: 0.2s ease-in;
	--weight-normal: 400;
	--weight-bold: 700;
	--font-family: arial, 'Hiragino kaku Gothic Pro', Meiryo, 'Yu Gothic', sans-serif;
	--contents-max: 768px;
}
body {
	font-family: var(--font-family);
	overflow-wrap: break-word;
}
a {
	color: var(--color-text-link-default);
	text-decoration: underline;
	cursor: pointer;
}
a:hover:not(.primary-btn):not(.tertiary-btn) {
	text-decoration: underline;
}
button,
input[type="checkbox"],
label {
	cursor: pointer;
	font-family: var(--font-family);
}
input[type="text"] {
	border-radius: 4px;
	border: 1px solid var(--neutral-neutral-70);
	background: var(--color-background-surface);
	padding: 0 16px;
	font-size: 13px;
	color: var(--color-text-default);
}
input[type="text"]::placeholder {
	color: var(--color-text-subtle);
}
input[type="text"]:focus {
	border-color: var(--color-border-input-focus);
	outline: none;
}
input[type="checkbox"] {
	position: relative;
	border-radius: 4px;
	border: 1px solid var(--color-border-input-default);
	background: var(--color-background-input);
	-webkit-appearance: none;
	appearance: none;
}
input[type="checkbox"]:checked {
	background-color: var(--color-background-control-activated-subtle);
	border: none;
}
.checkbox-wrap > .checkbox:checked:before {
	position: absolute;
	top: 2px;
	left: 5px;
	transform: rotate(50deg);
	width: 4px;
	height: 8px;
	border-right: 2px solid var(--color-border-secondary-default);
	border-bottom: 2px solid var(--color-border-secondary-default);
	border-radius: 1px;
	content: "";
}
input[type="text"]:invalid,
.input-wrap > input.error {
	border: 2px solid var(--fc2-primary-75);
	background: var(--neutral-neutral-100);
}
select {
	width: 100%;
	height: 40px;
	padding: 0 12px 0 16px;
	border-radius: 4px;
	border: 1px solid var(--color-border-input-default);
	background: var(--color-background-input);
	font-size: 14px;
	font-weight: var(--weight-bold);
	color: var(--color-text-default);
	cursor: pointer;
}
dialog {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
	width: 100%;
	height: 100%;
	background: var(--color-background-scrim, rgba(0, 0, 0, 0.48));
	backdrop-filter: blur(12px);
	z-index: 10000;
}
.dialog-inner {
	width: fit-content;
	padding: 24px 24px 32px;
	border-radius: 8px;
	background-color: var(--color-background-faint);
	box-shadow: 0px 32px 12px -16px rgba(0, 0, 0, 0.10);
}
.dialog-title {
	position: relative;
	padding-left: 20px;
	font-size: 16px;
	font-weight: var(--weight-bold);
	color: var(--color-text-default);
}
.dialog-title::before {
	position: absolute;
	top: 50%;
	bottom: 0;
	left: 0;
	transform: translate3d(0, -50%, 0);
	width: 12px;
	height: 0;
	border-top: 4px solid var(--color-icon-subtle);
	background-color: var(--color-icon-subtle);
	border-radius: 2px;
	content: "";
}
.primary-btn,
.payment-btn,
.tertiary-btn {
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	height: 56px;
	padding: 0px 16px;
	border-radius: 4px;
	font-size: 15px;
	font-weight: var(--weight-bold);
	box-sizing: border-box;
	text-decoration: none;
}

.primary-btn {
	background-color: var(--color-background-primary-default);
	color: var(--color-text-on-primary);
	transition: background-color var(--button-hover-animation);
}
.primary-btn:hover {
	background-color: var(--color-background-primary-emphasis);
}
.payment-btn {
	background-color: var(--color-background-payment-default);
	color: var(--color-text-on-payment);
	transition: background-color var(--button-hover-animation);
}
.payment-btn:hover {
	background-color: var(--color-background-payment-emphasis);
}
.tertiary-btn {
	position: relative;
	border: 1px solid var(--color-border-input-default);
	background-image: var(--color-background-tertiary-default); 
	background-color: var(--color-background-surface);
	color: var(--color-text-on-tertiary);
	overflow: hidden;
	z-index: 1; 
}
.tertiary-btn::before {
	position: absolute;
	top: 0;
	left: 0;
	display: block;
	width: 100%;
	height: 100%;
	border-radius: inherit;
	background-color: var(--color-background-surface); 
	opacity: 0;
	z-index: -1;
	transition: opacity var(--button-hover-animation);
	content: "";
}
.tertiary-btn:hover::before {
	opacity: 1;
}
.page-heading {
	position: relative;
	padding-left: 32px;
	font-size: 20px;
	font-weight: var(--weight-bold);
	color: var(--color-text-default);
}
.page-heading::before {
	position: absolute;
	top: 50%;
	bottom: 0;
	left: 0;
	transform: translate3d(0, -50%, 0);
	width: 16px;
	height: 0;
	border-top: 4px solid var(--color-border-primary-default);
	border-radius: 2px;
	content: "";
}
.security-wrap {
	display: flex;
	align-items: center;
	column-gap: 12px;
	position: relative;
	margin-top: 30px;
	padding: 16px 24px 16px 16px;
	border-radius: 8px;
	background-color: var(--neutral-neutral-100);
	box-shadow: 0px 24px 8px -20px rgba(0, 0, 0, 0.10);
}
.security-wrap::before {
	position: absolute;
	top: 50%;
	bottom: 0;
	left: 0;
	transform: translate3d(0, -50%, 0);
	height: 52px;
	border: 2px solid var(--live-green-50);
	border-radius: 0 2px 2px 0;
	content: "";
}
.security-wrap > svg {
	flex-shrink: 0;
}
.security-text {
	font-size: 14px;
	font-weight: var(--weight-normal);
	line-height: 20px;
	color: var(--color-text-default);
}
.security-text > .strong {
	font-weight: var(--weight-bold);
}
.external-link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	column-gap: 4px;
	font-size: 14px;
	font-weight: var(--weight-bold);
}
.external-link-icon{
	position: relative;
}
.external-link-icon:after{
	content: "";
	display: inline-block;
	width: 17px;
	height: 17px;
	background-color: var(--fc2-link-50);
	mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNyIgaGVpZ2h0PSIxNiIgdmlld0JveD0iMCAwIDE3IDE2IiBmaWxsPSJub25lIj4KCQkJCTxwYXRoIGQ9Ik05LjEwMDIyIDcuMzk5OTNMMTQuMDIwMSAyLjQ3OTk4IiBzdHJva2U9IiMyRTVDQjQiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiLz4KCQkJCTxwYXRoIGQ9Ik0xNC40OTk3IDQuODc5OTdWMkgxMS42MTk4IiBzdHJva2U9IiMyRTVDQjQiIHN0cm9rZS13aWR0aD0iMS41IiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9lZz0icm91bmQiLz4KCQkJCTxwYXRoIGQ9Ik03Ljg5OTg0IDJINi42OTk4N0MzLjY5OTk2IDIgMi41IDMuMTk5OTkgMi41IDYuMTk5OTZWOS43OTk5MkMyLjUgMTIuNzk5OSAzLjY5OTk2IDEzLjk5OTkgNi42OTk4NyAxMy45OTk5SDEwLjI5OThDMTMuMjk5NyAxMy45OTk5IDE0LjQ5OTYgMTIuNzk5OSAxNC40OTk2IDkuNzk5OTJWOC41OTk5NCIgc3Ryb2tlPSIjMkU1Q0I0IiBzdHJva2Utd2lkdGg9IjEuNSIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIi8+CgkJCQk8L3N2Zz4=");
	mask-repeat: no-repeat;
	mask-position: center;
}

/* login */
.login-section {
	width: var(--contents-max);
	margin: 16px auto 16px;
	padding: 24px 24px 32px;
	background-color: var(--neutral-neutral-90);
	border-radius: 8px;
	box-sizing: border-box;
}
.login-heading-wrap {
	padding: 8px 0;
}
.login-btn-wrap {
	display: grid;
	row-gap: 8px;
	width: 400px;
	margin: 30px auto 0;
}
.login-note {
	margin-top: 30px;
	font-size: 14px;
	font-weight: var(--weight-normal);
	color: var(--color-text-default);
	text-align: center;
}

/* step1 */
.purchase-section {
	width: var(--contents-max);
	margin: 16px auto 0;
	padding: 24px 24px 32px;
	background-color: var(--color-background-faint);
	border-radius: 8px;
	box-sizing: border-box;
}
.purchase-heading-wrap {
	padding: 8px 0;
}
.purchase-btn-wrap {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 8px;
	margin-top: 30px;
}
.purchase-btn-wrap > .tertiary-btn > .strong {
	font-size: 18px;
	font-weight: var(--weight-bold);
	color: var(--color-text-primary-default);
}
.purchase-btn-wrap > .tertiary-btn > svg {
	margin-left: 4px;
}
.purchase-note {
	margin-top: 30px;
	text-align: center;
}
.purchase-note > .external-link {
	margin-top: 12px;
}
.note-heading {
	font-size: 14px;
	font-weight: var(--weight-bold);
	color: var(--color-text-default);
}
.note-heading + .note {
	width: 400px;
	margin: 6px auto 0;
	font-size: 13px;
	font-weight: var(--weight-normal);
	line-height: 19px;
	color: var(--color-text-default);
}
.ad-section {
	display: grid;
	justify-content: center;
	row-gap: 12px;
	margin: 32px 0;
}
.ad-link {
	width: fit-content;
	margin-inline: auto;
	font-size: 12px;
	font-weight: var(--weight-normal);
}
.dialog-confirm-outer {
	margin-top: 24px;
	min-width: 320px;
	border: 2px solid var(--color-border-default);
	border-radius: 8px;
	overflow: hidden;
}
.dialog-confirm-inner {
	display: flex;
	justify-content: space-between;
	padding: 12px 16px;
	background-color: var(--color-background-surface);
}
.dialog-confirm-inner:nth-of-type(even) {
	background-color: var(--color-background-faint);
}
.dialog-confirm-inner > dt {
	font-size: 13px;
	font-weight: var(--weight-normal);
	color: var(--color-text-default);
}
.dialog-confirm-inner > dd {
	font-size: 16px;
	font-weight: var(--weight-bold);
	color: var(--color-text-default);
}
.dialog-confirm-inner > .number {
	color: var(--color-text-primary-default);
}
.dialog-confirm-inner > .number > .unit {
	font-size: 12px;
}
.dialog-action-btn {
	margin-top: 24px;
	text-align: center;
}
.dialog-action-btn > .payment-btn {
	height: 40px;
	font-size: 14px;
}
.other-card-btn {
	margin-top: 16px;
	font-size: 14px;
	font-weight: var(--weight-bold);
	color: var(--color-text-link-default);
}
.dialog-confirm-inner > dd.credit-number {
	display: flex;
	align-items: baseline;
	font-size: 14px;
}
.masked-number {
	font-size: 8px;
}

/* step2 */
.payment-section {
	width: var(--contents-max);
	margin: 16px auto 0;
	padding: 24px 24px 32px;
	background-color: var(--color-background-faint);
	border-radius: 8px;
	box-sizing: border-box;
}
.payment-section > form {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-areas:
		"heading heading"
		"input confirmation"
		"submit submit";
	gap: 24px;
}
.payment-heading-wrap {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-area: heading;
}
.payment-heading-wrap > .tertiary-btn {
	column-gap: 4px;
	height: 40px;
	font-size: 14px;
}
.payment-heading-wrap > .page-heading {
	line-height: 40px;
}
.credit-card-section {
	grid-area: input;
}
.confirmation-section {
	grid-area: confirmation;
}
.credit-card-wrap {
	padding: 24px 24px 32px;
	border-radius: 8px;
	background: var(--color-background-surface);
}
.section-heading {
	margin-bottom: 24px;
	font-size: 14px;
	font-weight: var(--weight-bold);
	color: var(--color-text-subtle);
}
.payment-title {
	font-size: 13px;
	font-weight: var(--weight-bold);
	color: var(--color-text-default);
}
.input-section {
	display: grid;
	row-gap: 8px;
}
.input-section + .input-section {
	margin-top: 24px;
}
.input-wrap {
	display: grid;
	grid-template-columns: 1fr auto;
	position: relative;
	height: 40px;
}
.input-wrap > input {
	padding-right: 100px;
}
.credit-card-icon {
	display: flex;
	column-gap: 8px;
	align-items: center;
	position: absolute;
	top: 50%;
	right: 12px;
	transform: translate3d(0, -50% ,0);
}
.credit-card-wrap .note {
	font-size: 12px;
	font-weight: var(--weight-normal);
	color: var(--color-text-subtle);
}
.credit-card-wrap .error-text {
	display: flex;
	align-items: center;
	column-gap: 4px;
	font-size: 13px;
	font-weight: var(--weight-normal);
	line-height: 16px;
	color: var(--color-text-primary-default);
}
.payment-expiration-date {
	display: grid;
	grid-template-rows: auto auto;
	grid-template-columns: 104px 104px;
	grid-template-areas:
		"selectMonth selectYear"
		"labelMonth labelYear";
	column-gap: 8px;
}
.select-wrap {
	position: relative;
	grid-area: selectMonth;
}
.label-month + .select-wrap {
	grid-area: selectYear;
}
.label-month,
.label-year {
	margin-top: 8px;
	font-size: 12px;
	font-weight: var(--weight-normal);
	color: var(--color-text-subtle);
}
.label-month {
	grid-area: labelMonth;
}
.label-year {
	grid-area: labelYear;
}
.arrow-bottom {
	position: absolute;
	top: 50%;
	right: 10px;
	transform: translate3d(0, -50%, 0);
}
.input-wrap.input-ccv {
	width: 104px;
}
.input-wrap.input-ccv > input {
	padding-right: 16px;
}
.ccv-note {
	display: flex;
	column-gap: 8px;
	align-items: baseline;
}
.ccv-note .external-link {
	font-size: 12px;
}
.confirmation-wrap {
	padding: 24px;
	border-radius: 8px;
	background: var(--color-background-primary-faint);
}
.confirmation-wrap > dl > dt {
	font-size: 13px;
	font-weight: var(--weight-bold);
	color: var(--color-text-default);
}
.confirmation-wrap > dl > dd {
	margin-top: 2px;
	font-size: 24px;
	font-weight: var(--weight-bold);
	line-height: 29px;
	color: var(--color-text-primary-default);
}
.confirmation-wrap > dl > dd + dt {
	margin-top: 12px;
}
.confirmation-note {
	margin-top: 24px;
}
.confirmation-note > li {
	position: relative;
	padding-left: 20px;
	font-size: 13px;
	font-weight: var(--weight-normal);
	line-height: 19px;
	color: var(--color-text-default);
}
.confirmation-note > li:before {
	position: absolute;
	top: 8px;
	left: 8px;
	border: 2px solid var(--color-border-emphasis);
	border-radius: 50%;
	content: "";
}
.confirmation-note > li + li {
	margin-top: 8px;
}
.confirmation-note > li > .strong {
	font-weight: var(--weight-bold);
}
.confirmation-note > li > .strong > .rate {
	color: var(--color-text-primary-default);
}
.submit-section {
	grid-area: submit;
	padding-top: 8px;
	text-align: center;
}
.submit-note {
	font-size: 13px;
	font-weight: var(--weight-normal);
	line-height: 19px;
	color: var(--color-text-default);
}
.submit-action {
	width: 378px;
	margin: 16px auto 0;
}
.checkbox-wrap {
	display: flex;
	justify-content: center;
	align-items: center;
	margin-bottom: 16px;
}
.checkbox-wrap > .checkbox {
	flex-shrink: 1;
	width: 16px;
	height: 16px;
}
.checkbox-wrap > .label {
	padding-left: 9px;
	font-size: 14px;
	font-weight: var(--weight-bold);
	color: var(--color-text-default);
}
.company-info-wrap {
	display: flex;
	column-gap: 64px;
	width: var(--contents-max);
	margin: 16px auto 16px;
	padding: 32px;
	border-radius: 8px;
	background-color: var(--color-background-subtle);
	box-sizing: border-box;
}
.company-info {
	display: grid;
	grid-template-rows: auto 1fr;
	row-gap: 16px;
}
.company-info + .company-info {
	position: relative;
}
.company-info + .company-info::before {
	position: absolute;
	left: -32px;
	border-left: 1px solid var(--color-border-emphasis);
	width: 1px;
	height: 100%;
	content: "";
}
.company-info > dt {
	position: relative;
	padding-left: 20px;
	font-size: 16px;
	font-weight: var(--weight-bold);
	color: var(--color-text-default);
}
.company-info > dt::before {
	position: absolute;
	top: 50%;
	bottom: 0;
	left: 0;
	transform: translate3d(0, -50%, 0);
	width: 12px;
	height: 0;
	border-top: 4px solid var(--color-icon-subtle);
	background-color: var(--color-icon-subtle);
	border-radius: 2px;
	content: "";
}
.company-info-left {
	display: grid;
	grid-template-rows: auto 1fr auto;

}
.company-info .description {
	margin-top: 6px;
	font-size: 13px;
	font-weight: var(--weight-normal);
	line-height: 19px;
	color: var(--color-text-default);
}
.company-info .external-link {
	margin-right: auto;
}
.company-info .name {
	margin-bottom: 6px;
	font-size: 18px;
	font-weight: var(--weight-bold);
	color: var(--color-text-default);
}
.company-info .description-list-wrap {
	margin: 16px 0;
	padding: 16px;
	border-radius: 8px;
	background-color: rgba(255, 255, 255, 0.48);
}