@charset "UTF-8";
/* sp(320px) */

#wrapper {
	display: block;
	block-size:100%;
	max-inline-size: 1040px;
	block-size:auto;
	min-block-size:100%;
	overflow: hidden;
	position:relative;
}

#wrapperSecond {
	display: block;
	block-size:100%;
	max-inline-size: 1040px;
	margin-inline: auto;
	block-size:auto;
	min-block-size:100%;
	overflow: hidden;
	position:relative;
/*	border: 1px solid #000;*/
}

#wrapper #primary {
	max-inline-size: 1040px;
	position: relative;
/*	background-color: #dbe2ff;*/
}
#wrapper #secondary {
	block-size: 100%;
	inline-size: 300px;
	position: fixed;
	inset-block-start: 0;
	inset-inline-end: -300px;
	inset-inline-start: auto;
	transition: all 300ms 0s ease;
	background-color: #fff;
/*	border: 1px solid red;*/
}
#wrapper #secondary .inner {
	position: sticky;
	inset-block-start: 0;
	inset-inline-start: 0;
/*	border: 1px solid #000;*/
}
#wrapper #secondary .form {
/*	inline-size: 260px;*/
	margin-inline: auto;
	block-size: 100vh;
	overflow-y: auto;
	padding-inline: 15px;

/*	border: 1px solid blue;*/
}
#wrapper #secondary #fcheck {
	display: block;
	inline-size: 40px;
	block-size: 120px;
/*	background-color: #fff;*/
	position: absolute;
	inset-block-start: 30px;
	inset-inline-start: -40px; 
/*	border: 1px solid #000;*/
}
/*#wrapper #secondary:has(#fcheck_ck:checked) {
	inset-inline-end: 0;
}*/

#wrapper #secondary #fcheck input[type='checkbox'] {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	border: none;
	inline-size: 40px;
	block-size: 120px;
	background-image: url(../img/form/btn_sec_open.png);
	background-size: 40px 120px;
}
#wrapper #secondary #fcheck input[type='checkbox']:checked {
	background-image: url(../img/form/btn_sec_close.png);
}

#wrapper #secondary #btm_padding {
	padding-block-start: 100px;
}


#wrapper #primary #bg_focus {
	display: none;
	background-color: rgba(0, 0, 0, 0.6);
	inline-size: 100%;
	block-size: 100%;
	position: absolute;
	inset-inline-start: 0;
	inset-block-start: 0;
	transition: all 300ms 0s ease;
	z-index: 2;
}


@media handheld, print, screen and (min-width: 620px) {
/* iPad */

#wrapper #secondary #fcheck {
	inset-block-start: 100px;
}


/* end of media query(iPad) */	
}




@media handheld, print, screen and (min-width: 835px) {
/* pc */



/* end of media query(pc) */
}


@media handheld, print, screen and (min-width: 1049px) {

#wrapper {
	display: grid;
	grid-template-columns: auto 400px;
	grid-template-rows: auto;
	max-inline-size: 100%;
	block-size:auto;
	min-block-size:100%;
	overflow: clip;
	position:relative;
}

#wrapper #primary {
	max-width: auto;
	max-inline-size: 100%;
	position: relative;
}
#wrapper #secondary {
	height: 100%;
	width: 400px;
	position: relative;
	inset-block-start: auto;
	inset-inline-end: auto;
	inset-inline-start: 0;
}
#wrapper #secondary .inner {
	position: sticky;
	inset-block-start: 0;
	inset-inline-start: 0;
}
#wrapper #secondary .form {
/*	inline-size: 360px;*/
	margin-inline: auto;
	padding-inline: 20px;
}
#wrapper #secondary #fcheck {
	display: none;
}
#wrapper #secondary #btm_padding {
	padding-block-start: 50px;
}

/* end of media query */	
}