/* =========================================================
 * Smart Punch - Apply page
 * ========================================================= */

.apply-hero{
	padding:50px 20px 20px;
}

.apply-hero .section-heading{
	margin-bottom:0;
}

.apply-section{
	padding-top:30px;
}

.apply-section .section-inner{
	max-width:900px;
}


/* Card */
.apply-card{
	padding:42px 48px 48px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--radius-large);
	box-shadow:var(--shadow-medium);
}

.apply-intro{
	margin-bottom:42px;
	text-align:center;
}

.apply-intro h2{
	margin:0;
	color:var(--text);
	font-size:26px;
	font-weight:900;
}

.apply-intro p{
	margin:14px 0 0;
	color:var(--muted);
	font-size:15px;
	line-height:1.9;
}


/* Form */
.apply-form{
	display:grid;
	gap:34px;
}

.apply-form-section{
	display:grid;
	gap:26px;
	padding:30px;
	background:color-mix(in srgb,var(--surface) 64%,#fff);
	border:1px solid var(--line);
	border-radius:var(--radius-medium);
}

.apply-form-heading{
	display:flex;
	padding-bottom:22px;
	align-items:flex-start;
	gap:16px;
	border-bottom:1px solid var(--line);
}

.apply-form-number{
	display:flex;
	width:42px;
	height:42px;
	align-items:center;
	justify-content:center;
	flex:0 0 42px;
	background:var(--brand);
	color:#fff;
	border-radius:12px;
	font-size:12px;
	font-weight:900;
}

.apply-form-heading h3{
	margin:0;
	color:var(--text);
	font-size:20px;
	font-weight:900;
}

.apply-form-heading p{
	margin:7px 0 0;
	color:var(--muted);
	font-size:13px;
	line-height:1.7;
}

.apply-field{
	display:grid;
	gap:10px;
}

.apply-label{
	display:flex;
	align-items:center;
	gap:10px;
	color:var(--text);
	font-size:15px;
	font-weight:800;
}

.apply-required,
.apply-optional{
	display:inline-flex;
	min-height:22px;
	padding:2px 8px;
	align-items:center;
	justify-content:center;
	border-radius:999px;
	font-size:11px;
	font-weight:800;
	line-height:1;
}

.apply-required{
	background:color-mix(in srgb,var(--brand) 10%,#fff);
	color:var(--brand);
}

.apply-optional{
	background:var(--surface);
	color:var(--muted);
}


/* Inputs */
.apply-input,
.apply-select,
.apply-textarea{
	width:100%;
	background:#fff;
	color:var(--text);
	border:1px solid var(--line);
	border-radius:var(--radius-small);
	outline:none;
	transition:
		border-color .16s ease,
		box-shadow .16s ease,
		background .16s ease;
}

.apply-input,
.apply-select{
	height:54px;
	padding:0 16px;
}

.apply-textarea{
	min-height:160px;
	padding:15px 16px;
	resize:vertical;
	line-height:1.8;
}

.apply-input::placeholder,
.apply-textarea::placeholder{
	color:#a8afbc;
}

.apply-input:focus,
.apply-select:focus,
.apply-textarea:focus{
	border-color:color-mix(in srgb,var(--brand) 58%,var(--line));
	box-shadow:0 0 0 4px rgba(28,63,148,.08);
}

.apply-input.is-error,
.apply-select.is-error,
.apply-textarea.is-error{
	border-color:#d94b4b;
	box-shadow:0 0 0 4px rgba(217,75,75,.07);
}


/* Select */
.apply-select-wrap{
	position:relative;
}

.apply-select{
	padding-right:48px;
	appearance:none;
	-webkit-appearance:none;
	cursor:pointer;
}

.apply-select-wrap > i{
	position:absolute;
	top:50%;
	right:18px;
	color:var(--muted);
	font-size:14px;
	pointer-events:none;
	transform:translateY(-50%);
}


/* Grids */
.apply-address-grid,
.apply-time-grid{
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:18px;
}


/* Shop code */
.apply-shop-code{
	display:flex;
	align-items:center;
}

.apply-shop-code .apply-input{
	border-radius:var(--radius-small) 0 0 var(--radius-small);
}

.apply-shop-code > span{
	display:flex;
	height:54px;
	padding:0 16px;
	align-items:center;
	flex:0 0 auto;
	background:var(--surface);
	color:var(--muted);
	border:1px solid var(--line);
	border-left:0;
	border-radius:0 var(--radius-small) var(--radius-small) 0;
	font-size:13px;
	font-weight:700;
}


/* Help / Errors */
.apply-help{
	margin:0;
	color:var(--muted);
	font-size:12px;
	line-height:1.6;
}

.apply-error{
	min-height:0;
	margin:0;
	color:#c63f3f;
	font-size:13px;
	font-weight:700;
	line-height:1.5;
}

.apply-error:empty{
	display:none;
}

.apply-field:has(.is-error) .apply-label{
	color:#b53b3b;
}

.apply-error-summary{
	display:flex;
	gap:12px;
	margin:0 0 28px;
	padding:18px 20px;
	align-items:flex-start;
	background:#fff3f3;
	color:#b53b3b;
	border:1px solid #f2cccc;
	border-radius:var(--radius-small);
}

.apply-error-summary > i{
	margin-top:2px;
	font-size:20px;
}

.apply-error-summary strong{
	display:block;
}

.apply-error-summary p{
	margin:3px 0 0;
	font-size:13px;
	line-height:1.6;
}


/* Agreement */
.apply-agreement{
	padding:22px;
	background:var(--surface);
	border-radius:var(--radius-small);
}

.apply-check{
	display:flex;
	align-items:flex-start;
	justify-content:center;
	gap:10px;
	color:var(--text);
	font-size:14px;
	line-height:1.7;
	cursor:pointer;
}

.apply-check input{
	width:18px;
	height:18px;
	margin:3px 0 0;
	flex:0 0 18px;
	accent-color:var(--brand);
	cursor:pointer;
}

.apply-check input.is-error{
	outline:2px solid #d94b4b;
	outline-offset:2px;
}

.apply-check a{
	color:var(--brand);
	font-weight:800;
	text-decoration:underline;
	text-underline-offset:3px;
}

.apply-agreement-note{
	margin:16px 0 0;
	padding-top:16px;
	color:var(--muted);
	border-top:1px solid var(--line);
	font-size:12px;
	line-height:1.75;
	text-align:center;
}


/* Honeypot */
.apply-honeypot{
	position:absolute !important;
	left:-9999px !important;
	width:1px !important;
	height:1px !important;
	overflow:hidden !important;
	opacity:0 !important;
	pointer-events:none !important;
}


/* Message / Submit */
.apply-message{
	display:none;
	padding:14px 18px;
	border-radius:var(--radius-small);
	font-size:14px;
	font-weight:700;
	line-height:1.7;
	text-align:center;
}

.apply-message.is-error{
	display:block;
	background:#fff3f3;
	color:#b53b3b;
	border:1px solid #f2cccc;
}

.apply-message.is-success{
	display:block;
	background:#effaf7;
	color:var(--accent-dark);
	border:1px solid color-mix(in srgb,var(--accent) 26%,#fff);
}

.apply-actions{
	text-align:center;
}

.apply-submit{
	min-width:300px;
	border:0;
	cursor:pointer;
}

.apply-submit:disabled{
	opacity:.55;
	cursor:default;
	transform:none;
}


/* Complete */
.apply-complete{
	padding:44px 20px 28px;
	text-align:center;
}

.apply-complete-icon{
	display:flex;
	width:68px;
	height:68px;
	margin:0 auto 22px;
	align-items:center;
	justify-content:center;
	background:color-mix(in srgb,var(--accent) 13%,#fff);
	color:var(--accent-dark);
	border-radius:50%;
	font-size:30px;
}

.apply-complete h2{
	margin:0;
	color:var(--text);
	font-size:28px;
	font-weight:900;
}

.apply-complete p{
	margin:16px 0 0;
	color:var(--muted);
	font-size:15px;
	line-height:1.9;
}


@media(max-width:640px){

	.apply-card{
		padding:30px 20px 32px;
		border-radius:var(--radius-medium);
	}

	.apply-intro{
		margin-bottom:30px;
	}

	.apply-intro h2{
		font-size:22px;
	}

	.apply-intro p{
		font-size:14px;
	}

	.apply-form{
		gap:26px;
	}

	.apply-form-section{
		padding:22px 16px;
		gap:22px;
	}

	.apply-form-heading{
		gap:12px;
	}

	.apply-form-number{
		width:38px;
		height:38px;
		flex-basis:38px;
	}

	.apply-form-heading h3{
		font-size:18px;
	}

	.apply-address-grid,
	.apply-time-grid{
		grid-template-columns:1fr;
	}

	.apply-input,
	.apply-select{
		height:52px;
	}

	.apply-shop-code{
		align-items:stretch;
	}

	.apply-shop-code > span{
		height:52px;
		padding:0 10px;
		font-size:11px;
	}

	.apply-agreement{
		padding:18px 14px;
	}

	.apply-check{
		justify-content:flex-start;
	}

	.apply-agreement-note{
		text-align:left;
	}

	.apply-submit{
		min-width:0;
		width:100%;
	}

	.apply-complete{
		padding:34px 4px 20px;
	}

	.apply-complete h2{
		font-size:23px;
	}

	.apply-complete p{
		font-size:14px;
	}
}

.apply-copy-client {
	text-align: right;
}

.apply-copy-button {
	display: inline-flex;
	min-height: 42px;
	padding: 0 16px;
	align-items: center;
	justify-content: center;
	gap: 8px;
	background: #fff;
	color: var(--brand);
	border: 1px solid color-mix(in srgb, var(--brand) 30%, var(--line));
	border-radius: 999px;
	font-size: 13px;
	font-weight: 800;
	cursor: pointer;
	transition: background .16s ease, border-color .16s ease;
}

.apply-copy-button:hover {
	background: color-mix(in srgb, var(--brand) 5%, #fff);
	border-color: var(--brand);
}

/* =========================================================
 * Confirm
 * ========================================================= */

/* 確認画面は入力画面より情報密度を高める */
.apply-form-section:has(.apply-confirm-list){
	gap:0;
	padding:0;
	overflow:hidden;
	background:#fff;
}

.apply-form-section:has(.apply-confirm-list) .apply-form-heading{
	padding:22px 24px;
	align-items:center;
	background:color-mix(in srgb,var(--brand) 4%,#fff);
	border-bottom:1px solid var(--line);
}

.apply-form-section:has(.apply-confirm-list) .apply-form-number{
	width:38px;
	height:38px;
	flex-basis:38px;
	border-radius:10px;
	font-size:11px;
}

.apply-form-section:has(.apply-confirm-list) .apply-form-heading h3{
	font-size:18px;
}

.apply-form-section:has(.apply-confirm-list) .apply-form-heading p{
	margin-top:4px;
	font-size:12px;
}

.apply-confirm-list{
	margin:0;
	padding:0;
}

.apply-confirm-row{
	display:grid;
	grid-template-columns:190px minmax(0,1fr);
	min-height:58px;
	border-bottom:1px solid var(--line);
}

.apply-confirm-row:last-child{
	border-bottom:0;
}

.apply-confirm-row dt,
.apply-confirm-row dd{
	margin:0;
	padding:16px 20px;
	line-height:1.7;
}

.apply-confirm-row dt{
	dis:flex;
	align-items:center;
	background:color-mix(in srgb,var(--surface) 74%,#fff);
	color:var(--muted);
	border-right:1px solid var(--line);
	font-size:13px;
	font-weight:800;
}

.apply-confirm-row dd{
	dis:flex;
	min-width:0;
	align-items:center;
	background:#fff;
	color:var(--text);
	font-size:15px;
	font-weight:700;
	letter-spacing:.01em;
	overflow-wrap:anywhere;
}

.apply-confirm-url{
	color:var(--brand);
	font-weight:800;
}

/* 規約同意の確認 */
.apply-confirm-agreement{
	display:flex;
	max-width:680px;
	margin:2px auto 0;
	padding:18px 20px;
	align-items:flex-start;
	justify-content:center;
	gap:12px;
	background:color-mix(in srgb,var(--accent) 7%,#fff);
	color:var(--text);
	border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));
	text-align:left;
}

.apply-confirm-agreement > i{
	margin-top:1px;
	color:var(--accent-dark);
	font-size:20px;
}

.apply-confirm-agreement p{
	margin:0;
	font-size:13px;
	line-height:1.8;
}

/* 戻る / 申し込む */
.apply-confirm-actions{
	display:flex;
	margin-top:4px;
	align-items:center;
	justify-content:center;
	gap:16px;
}

.apply-confirm-back{
	min-width:240px;
	background:#fff;
	color:var(--brand);
	border:1px solid color-mix(in srgb,var(--brand) 28%,var(--line));
	cursor:pointer;
}

.apply-confirm-back:hover{
	background:color-mix(in srgb,var(--brand) 5%,#fff);
	border-color:var(--brand);
}

@media(max-width:640px){

	.apply-form-section:has(.apply-confirm-list) .apply-form-heading{
		padding:18px 16px;
		align-items:flex-start;
	}

	.apply-form-section:has(.apply-confirm-list) .apply-form-number{
		width:36px;
		height:36px;
		flex-basis:36px;
	}

	.apply-form-section:has(.apply-confirm-list) .apply-form-heading h3{
		font-size:17px;
	}

	.apply-confirm-row{
		grid-template-columns:1fr;
		min-height:0;
	}

	.apply-confirm-row dt{
		padding:12px 16px 3px;
		background:#fff;
		border-right:0;
		font-size:12px;
	}

	.apply-confirm-row dd{
		padding:3px 16px 13px;
		font-size:15px;
	}

	.apply-confirm-row + .apply-confirm-row{
		padding-top:3px;
	}

	.apply-confirm-agreement{
		margin-top:0;
		padding:16px;
	}

	.apply-confirm-actions{
		flex-direction:column-reverse;
		align-items:stretch;
	}

	.apply-confirm-back,
	.apply-confirm-actions .apply-submit{
		width:100%;
		min-width:0;
	}
}

/* =========================================================
 * Apply Complete
 * ========================================================= */

.apply-complete-notice{
    max-width:680px;
    margin:28px auto 0;
    padding:18px 20px;
    background:color-mix(in srgb,var(--accent) 7%,#fff);
    border:1px solid color-mix(in srgb,var(--accent) 20%,var(--line));
    border-radius:var(--radius-small);
    text-align:left;
}

.apply-complete-notice strong{
    display:block;
    margin-bottom:5px;
    color:var(--text);
    font-size:14px;
    font-weight:900;
}

.apply-complete-notice p{
    margin:0;
    color:var(--muted);
    font-size:13px;
    line-height:1.8;
}


/* 申込後の流れ */

.apply-complete-flow{
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    max-width:760px;
    margin:36px auto 0;
    padding:0;
    list-style:none;
    counter-reset:complete-flow;
}

.apply-complete-flow-item{
    position:relative;
    padding:0 20px;
    text-align:center;
    counter-increment:complete-flow;
}

.apply-complete-flow-item::before{
    content:counter(complete-flow);
    display:flex;
    width:44px;
    height:44px;
    margin:0 auto 14px;
    align-items:center;
    justify-content:center;
    position:relative;
    z-index:1;
    background:var(--brand);
    color:#fff;
    border-radius:50%;
    font-size:15px;
    font-weight:900;
}

.apply-complete-flow-item:not(:last-child)::after{
    content:"";
    position:absolute;
    top:21px;
    left:calc(50% + 22px);
    width:calc(100% - 44px);
    height:2px;
    background:var(--line);
}

.apply-complete-flow-item strong{
    display:block;
    margin-bottom:6px;
    color:var(--text);
    font-size:14px;
    font-weight:900;
}

.apply-complete-flow-item p{
    margin:0;
    color:var(--muted);
    font-size:12px;
    line-height:1.7;
}


/* 契約成立について */

.apply-complete .apply-complete-note{
    max-width:680px;
    margin:32px auto 0;
    padding:16px 20px;
    background:var(--surface);
    color:var(--muted);
    border-radius:var(--radius-small);
    font-size:13px;
    line-height:1.8;
    text-align:center;
}

.apply-complete-note strong{
    color:var(--text);
}


/* =========================================================
 * Responsive
 * ========================================================= */

@media(max-width:640px){

    .apply-complete-notice{
        margin-top:24px;
        padding:16px;
    }

    .apply-complete-flow{
        grid-template-columns:1fr;
        max-width:420px;
        margin-top:30px;
        gap:0;
    }

    .apply-complete-flow-item{
        display:grid;
        grid-template-columns:44px minmax(0,1fr);
        grid-template-rows:auto auto;
        column-gap:16px;
        padding:0 0 30px;
        text-align:left;
    }

    .apply-complete-flow-item::before{
        grid-row:1 / 3;
        margin:0;
    }

    .apply-complete-flow-item:not(:last-child)::after{
        top:44px;
        left:21px;
        width:2px;
        height:calc(100% - 44px);
    }

    .apply-complete-flow-item strong{
        align-self:end;
        margin:1px 0 3px;
    }

    .apply-complete-flow-item p{
        align-self:start;
    }

    .apply-complete-note{
        margin-top:24px;
        padding:14px 16px;
        text-align:left;
    }
}