/* css only lightbox */

.lightbox-wrap label, .lightbox-wrap label * { box-sizing:border-box; } /* cssに元々入っていたら不要 */
.lightbox-wrap label{ /* クリックできるエリアをlabelで囲む */
	display:block;
	padding:0;
	margin:0;
}
.lightbox{ /* ライトボックスの地の部分 */
	position:fixed; left:0; right:0; top:0; bottom:0; /* fixedと天地左右0で画面全体に敷く */
	display:flex; align-items:center; justify-content:center; /* flex, align-items, justify-contentで子要素を上下左右センター合わせにする */
	background:rgba(100,100,100,0.8); /* 透明度をつけたグレーを敷く */
	z-index:10000;
	transition:opacity ease-in-out 0.3s; /* 透明度にtransitionをつける */
	padding-top:min(50px, 7vh);
	cursor:pointer;
}
.lightbox:before,
.lightbox:after{ /* 閉じる表示の×印 beforeとafterで横長の矩形を作りrotateで回転させて×を描く。どこを押しても閉じるので、×印なくても問題ないが不親切なので */
	content:"";
	display:inline-block;
	background-color:#fff;
	position:absolute;
	right:min(50px,5vw); /* デザインに合わせて位置調整 */
	top:min(50px, 5vh); /* デザインに合わせて位置調整 */
	width:min(50px, 8vw); /* デザインに合わせて大きさ調整 */
	height:min(5px, 1vw); /* デザインに合わせて大きさ調整 */
}
.lightbox:before{ /* 閉じる表示の×印 rotateで右回転45度 */
	transform:rotate(45deg);
}
.lightbox:after{ /* 閉じる表示の×印 rotateで左回転45度 */
	transform:rotate(-45deg);
}

.switch{ /* チェックボックス absoluteで左上に飛ばし、透明度を0にして表示させない。 */
	position:absolute;
	width:0;
	height:0;
	opacity:0;
}
.switch + .lightbox{ /* チェックボックスの直後にライトボックスの地を置く。ソース上でチェックボックスと離れていると作動しないので注意 */
	opacity:0;
	pointer-events:none; /*透明な時はクリックできないようにする*/
}
.switch:checked + .lightbox{ 
	opacity:1;
	pointer-events:auto; /*ライトボックスが開いている時は、どこを押しても閉じるようにする*/
}

/* ライトボックスで表示するものを格納するbox */
.lightbox .lightbox-inner{
	transition:transform ease-in-out 0.3s; /* 表示・非表示のときにちょっとだけtransformで拡大・縮小の動きをつける */
	text-align:center;
	width:auto;
	max-width:90vw;
	max-height:calc(90vh - min(50px, 5vw)); /* 閉じる表示の×印に合わせて適宜調整 */
	height:auto;
	padding:3vw 2vw;
	background-color:#fff;
	overflow:auto;
	overscroll-behavior: contain; /* これを入れるとスクロール時に下層が動かない */
}

.switch + .lightbox .lightbox-inner{ /* 非表示のときは少し縮小 ダイナミックに飛び出す感じにするならもっと数値を小さく */
	transform:scale(0.9);
}
.switch:checked + .lightbox .lightbox-inner{ /* 表示されるときに通常の大きさに戻す */
	transform:scale(1);
}

.lightbox .lightbox-inner img{ /* 画像の大きさ指定 */
	height:auto !important; width:auto !important; /* widthとheightをautoにすることで、原寸以上に拡大しない(ぼやけない) */
	max-height:70vh; max-width:80vw !important; /* vw と vh を100以下にすると、どんな画面サイズでもはみ出さない */
}
.lightbox .lightbox-inner > *:last-child{ /* いちばん下に変な隙間ができないようにする */
	padding-bottom:0;
	margin-bottom:0;
}

.lightbox-wrap label .lightbox + span{ /* ライトボックスが閉じているときに、クリックする部分のボタン */
	display:inline-block;
	background:#eff;
	border:1px solid #9ff;
	padding:0.5em 1em;
	cursor:pointer;
	margin-right:1em;
	float:left;
	border-radius:5px;
}








#inquiry_form label .cap{
	text-decoration:underline !important;
	cursor:pointer !important;
}