@charset "utf-8";

/* ------------------------------------------------------------------ */


[data-modal] {
	position: fixed;
	right: 0;
	left: 0;
	top: 0;
	bottom: 0;
	width: calc(100% - 40px);
	height: 100vh;
	max-width: 800px;
	max-height: calc(100vh - 140px);
	margin: auto;
	padding: 0;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s cubic-bezier(.22,.61,.36,1);
	z-index: 1000;
	background-color: rgba(255,255,255,1);
	
	box-shadow: 10px 10px 30px rgba(0, 0, 0, 0.2);
	border-radius: 20px;
}

[data-modal].-show {
	opacity: 1;
	pointer-events: auto;
	z-index: 1002;
}

[data-modal].-hide {
	opacity: 0;
	pointer-events: none;
}

@media screen and (min-width: 768px) {
	[data-modal] .w-state,
	[data-modal] .w-state--s {
		width: calc(100% - 100px);
	}
}

@media screen and (min-width: 1280px) {
	[data-modal] .w-state,
	[data-modal] .w-state--s {
		width: calc(100% - 160px);
	}
}

.modal-scroll-container {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100%;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
	overflow-y: auto;
	overflow-x: hidden;
	/* overscroll-behavior: contain; */
	vertical-align: middle;
	-webkit-overflow-scrolling: touch;
	        overflow-scrolling: touch;
}


.modal-scroll-container__outer {
	position: relative;
	box-sizing: border-box;
	overflow: auto;
	overflow-x: hidden;
	width: 100%;
	height: 100%;
}

.modal-scroll-container__inner {
	position: relative;
	left: 0;
	top: 0;
	display: flex;
	justify-content: center;
	flex-direction: column;
	width: 100%;
	margin: 0 auto;
	padding: 30px 0;
	box-sizing: border-box;
}

@media all and (min-width: 768px) {
	.modal-scroll-container__inner {
		padding: 60px 0;
	}
}

@media all and (min-width: 1280px) {
	
	[data-modal] {
		overflow-y: hidden;
		max-height: calc(100vh - 160px);
	}
	
	[data-modal].-show {
		overflow-y: auto;
	}
	
	.modal-scroll-container__inner {
		padding: 80px 0;
	}
	
	
	html.-show-modal .layout__body {
		transform: translate3d(calc(-100vw / 2 + 30%), 0, 0);
	}
	
	html.msie .layout__body {
		transform: translate3d(0, 0, 0);
	}
	
	html.msie.-show-modal .layout__body {
		transform: translate3d(-150%, 0, 0);
	}
	
	.layout__kv {
		transform: translate3d(0, 0, 0);
	}
	
	html.-show-modal .layout__kv {
		transform: translate3d(-33.333%, 0, 0);
	}
}


/* --------------------------------- */


[data-modal-close] {
	position: absolute;
	top: 5px;
	right: 5px;
	cursor: pointer;
	z-index: 5;
	border-radius: 64% 36% 58% 42% / 38% 55% 45% 62%;
}

[data-modal-close] i {
	
}

[data-modal-close] svg {
	width: 48px;
	height: 48px;
	stroke-width: 1;
	transition: stroke-width 0.2s ease;
}

[data-modal-close]:hover svg {
	stroke-width: 2.5;
}

.modal__close-txt {
	padding-bottom: 3px;
	border-bottom: 2px solid currentColor;
}

@media all and (min-width: 1280px) {
	
	[data-modal-close] {
		top: 20px;
		right: 20px;
	}
	
	[data-modal-close] svg {
		width: 64px;
		height: 64px;
	}
}


/* --------------------------------- */


[data-modal-overlay] {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh;
	opacity: 0;
	background-color: rgba(0,0,0,0.4);
	transition: opacity 1s ease-out;
	z-index: 999;
	display: none;
	pointer-events: none;
}

[data-modal-overlay] {
	display: block;
}

.-show-modal [data-modal-overlay] {
	opacity: 1;
	pointer-events: auto;
}


/* --------------------------------- */



[data-toggle] {
	cursor: pointer;
}

html.-show-modal body {
	/*overflow: hidden;*/
}



/* --------------------------------- */

[data-modal] img {
	display: block;
	width: 100%;
	border-radius: 5px;
}



.modal__ttl {
	font-size: 140%;
	font-weight: bold;
}

.modal__img {
	
}

@media all and (min-width: 1280px) {
	
}

/* --------------------------------- */
/* 次回以降 */

.from-next-time {
	position: absolute;
	bottom: 0;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	padding: 20px;
	box-sizing: border-box;
	background-color: #fff;
}

.from-next-time__p {
	
}

.from-next-time__input {
	
}