@charset "utf-8";



@keyframes modal-002-animation {
    0% {
        opacity: 0;
    }
    100% {
        opacity: 1;
    }
}

@media only screen and (max-width: 1400px) {
	.modal-content-wrap{
		width: 90%;
	}
	.modal-content{
		/*padding: 30px 35px 30px;*/
	}
}

@media only screen and (max-width: 768px) {
	.modal-wrap{
		/*padding: 50px 0;*/
		margin: 0 50px 0 0;
	}
	/* モーダル */
	.modal-wrap #modal-close,
	.modal-wrap .modal-open-input{
		display: none;
	}

	.modal-open-label,
	.modal-close-label {
		cursor: pointer;
	}

	.modal-open-label {
		display: flex;
		justify-content: center;
		align-items: center;
		width: 250px;
		margin:0 auto;
		padding: 0 2em;
		border: none;
		background-color: #FF8226;
		color: #ffffff;
		font-weight: 600;
		font-size: 2rem;
		border-radius: 30px;
		transition: 0.5s;
		height: 60px;
		line-height: 60px;
	}

	.modal-open-label i{
		padding: 0 5px 0 0;
	}

	.modal-open-label:hover {
		background-color: #fff;
		color: #FF8226;
		outline: 1px solid #FF8226;
			transition: 0.5s;
	}

	.modal-002 {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;
		display: none;
	}

	.modal-open-input:checked + label + input + .modal-002 {
		display: block;
		animation: modal-002-animation .6s;
	}

	.modal-content-wrap {
		position: absolute;
		left: 50%;
		top: 50%;
		transform: translate(-50%, -50%);
		width: 80%;
		max-width: 100%;
		background-color: #fefefe;
		z-index: 2;
		border-radius: 5px;
		border-radius: 40px;
	}

	.modal-close-label {
		background-color: #777;
		color: #fff;
		border: 2px solid #fff;
		border-radius: 20px;
		width: 36px;
		height: 36px;
		line-height: 1.6;
		text-align: center;
		display: table-cell;
		position: fixed;
		top: -10px;
		right: -1%;
		z-index: 99999;
		font-size: 1.3em;
	}

	.modal-content {
		max-height: 80vh;
		height: auto;
		overflow-y: auto;
		padding: 39px 45px 40px;
	}

	.modal-background {
		position: absolute;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		background-color: rgba(0, 0, 0, .45);
		z-index: 1;
	}	
	
	.modal-wrap{
		padding: 0;
	    margin: 0 auto;
	}
	
    .modal-open-label {
        max-width: 90%;
        padding: 0;
		height: 55px;
		line-height: 55px;
		width: 280px;
    }

    .modal-close-label {
        top: -17px;
        right: -4%;
    }

    .modal-content-wrap {
        width: 90vw;
		border-radius: 0;
    }
	
	.modal-content-wrap::before{
		width: 290px;
		height: 70px;
		right: auto;
		left: 0;
		top: -34px;
	}

    .modal-content {
        /*padding: 15px;*/
		padding: 0;
        max-width: 100%;
	}
	
	.fix-btn .modal-open-label{
		width: 60px;
		height: 60px;
		position: fixed;
		bottom: 0;
		z-index: 10;
		left: 10px;
		bottom: 10px;
	}
	.fix-btn .modal-open-label i{
		padding: 0;	
	}
}