@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100;200;300;400;500;600;700;800;900&display=swap');
body{
	position: relative;
	background: rgb(56,115,183);
	background: linear-gradient(180deg, rgba(56,115,183,1) 0%, rgba(70,255,241,1) 100%);
	height: 100vh;
	background-attachment: fixed;
	background-repeat: no-repeat;
	font-family: "fot-tsukuardgothic-std", sans-serif;
	font-weight: 700;
	font-style: normal;
}
content{
	position: relative;
	display: block;
	width: min(100%, 500px);
	margin: auto;
	padding-bottom: 15px;
}
main{
	width: min(100%, 460px);
	margin: auto;
	background-color: #fff;
	padding-bottom: 10px;
	position: relative;
	color: #333;
}
picture{
	display: block;
	width: 100%;
}
#body_back{
	background: rgb(14,205,218);
	background: linear-gradient(180deg, rgba(14,205,218,1) 0%, rgba(249,244,158,1) 100%);
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	z-index: -1;
}
.left_line,.right_line,.left_cloud,.right_cloud{
	position: fixed;
}
.left_line{
	left: calc(38% - 640px);
	top: -1.7vw;
	z-index: -2;
	width: 28%;
}
.right_line{
	right: calc(38% - 640px);
	top: -1.7vw;
	z-index: -2;
	width: 28%;
}
.left_cloud{
	bottom: -70px;
	z-index: -2;
	left: calc(38% - 720px);
	width: 46%;
}
.right_cloud{
	bottom: -70px;
	z-index: -2;
	right: calc(38% - 720px);
	width: 46%;
}
.pc_none{
	display: none;
}
.sp_none{
	display: block;
}
a:hover{
	opacity: 0.7;
}

/*============================
#fv
============================*/
#fv{
	position: relative;
	background-image: url(../img/fv_top_back.png);
	background-repeat: no-repeat;
	background-position: top;
	background-size: 100%;
	height: 870px;
}
.top_logo{
	width: 30%;
	margin: auto;
	padding-top: 20px;
}
.left_balloon{
	position: absolute;
	left: -12%;
	top: 0;
	width: 40%;
}
.right_balloon{
	position: absolute;
	right: -15%;
	width: 35%;
}
.fv_text{
	width: 85%;
	margin: 20px auto 0;
	position: relative;
	z-index: 1;
}
.fv_img{
	position: absolute;
	top: 40px;
	left: 50%;
	width: 98%;
	transform: translateX(-50%);
}
.fv_campaign{
	width: 84%;
	margin: auto;
	position: absolute;
	bottom: 0;
	z-index: 9;
	left: 50%;
	transform: translateX(-50%);
}

/*============================
#chatbot
============================*/
#contact{
	width: 90%;
	margin: 70px auto 30px;
	position: relative;
	z-index: 1;
	font-size: 18px;
	font-family: 'Noto Sans JP', sans-serif;
}
.chatbot_title{
	text-align: center;
	font-size: 24px;
	position: relative;
	width: 80%;
	margin: auto;
}
.chatbot_title p::before,.chatbot_title p::after{
	content: "";
	display: block;
	width: 6%;
	height: 100%;
	background-position: center;
	background-size: 100%;
	background-repeat: no-repeat;
	position: absolute;
	bottom: 0;
}
.chatbot_title p,.reason_title p,.qa_title p{
	position: relative;
	line-height: 1.1;
	font-family: "fot-tsukuardgothic-std", sans-serif;
	font-weight: 700;
	font-style: normal;
}
.chatbot_title p::before{
	background-image: url(../img/title_side1.png);
	left: 20px;
}
.chatbot_title p::after{
	background-image: url(../img/title_side2.png);
	right: 20px;
}
.chatbot{
	border-radius: 25px;
	margin-top: 10px;
	background-color: #F1F1F1;
}

/*============================
#reason
============================*/
#reason{
	font-size: 18px;
	margin-top: 80px;
	position: relative;
	z-index: 1;
}
.reason_title{
	text-align: center;
	width: 60%;
	margin: 0 auto 40px;
}
.reason_content_title picture{
	position: absolute;
	left: -14px;
	top: -4px;
	width: 12%;
	background-color: #fff;
	padding: 8px;
	border-radius: 50%;
}
.reason_content_title p{
	display: table-cell;
	vertical-align: middle;
}
.reasons{
	width: 90%;
	margin: auto;
}
.reason{
	width: 90%;
	margin: 20px 17px;
	border: solid 1px #333;
	border-radius: 25px;
	font-family: 'Noto Sans JP', sans-serif;
	border-top: none;
}
.reason_content_title{
	position: relative;
	background-image: url(../img/reason_content_title_back.png);
	background-size: cover;
	text-align: center;
	font-size: 18px;
	color: #fff;
	line-height: 1.2;
	padding: 10px;
	border-radius: 25px 25px 0 0;
	display: table;
	width: 100%;
	height: 64px;
	font-family: fot-tsukuardgothic-std, sans-serif;
}
.reason_content{
	padding: 20px;
}
.reason_img{
	width: 55%;
	margin: 0px auto 10px;
}
.reason_content_sub_title{
	color: #F64DA0;
	margin-bottom: 10px;
}
.reason_content_text{
	letter-spacing: 0.1em;
	font-weight: 400;
	font-size: 14px;
}
.reason_img.second{
	width: 30%;
}
.reason_content_sub_title.second{
	width: auto;
	margin: 0 auto 10px;
	display: grid;
	place-items: center center;
}
.reason_img.third{
	width: 35%;
}
.reason_content_sub_title.third{
    text-align: center;
}
.slide-dots {
	margin: 0;
	padding: 0;
	text-align: center;
	position: absolute;
	top: -40px;
	left: 50%;
	transform: translateX(-50%);
}
.slide-dots li {
	display: inline-block;
	margin: 0 15px;
}
.slide-dots li button {
	position: relative;
	text-indent: -9999px;
}
.slide-dots li button::before {
	background-image: url(../img/dot.png);
	background-repeat: no-repeat;
	background-size: contain;
	content: "";
	cursor: pointer;
	height: 20px;
	left: 0;
	margin: auto;
	position: absolute;
	right: 0;
	top: 24px;
	width: 20px;
}
.slide-dots li.slick-active button::before {
	background-image: url(../img/dot_active.png);
}
.slide-arrow{
	width: 6%;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	z-index: 999;
	cursor: pointer;
}
.prev-arrow{
	left: 0;
}
.next-arrow{
	right: 0;
}
button {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	outline: none;
	padding: 0;
}

.form_btn{
	position: relative;
	margin: 0 -10px;
	height: 200px;
	display: block;
	overflow: hidden;
	z-index: 2;
}
.form_btn picture{
	position: absolute;
	top: 50%;
	left: 50%;
	-webkit-transform: translate(-50%, -50%);
	transform: translate(-50%, -50%);
	width: 100%;
	display: block;
	-webkit-transition: .4s ease-in-out;
	transition: .4s ease-in-out;
}
.form_btn:hover picture:nth-of-type(2){
	opacity: 0;
}
.form_btn a{
	position: absolute;
	width: 65%;
	height: 65px;
	top: 24px;
	left: 50%;
	transform: translateX(-50%);
}

/*============================
#qa
============================*/
#qa{
	margin-top: 30px;
	position: relative;
	z-index: 2;
}
.qa_title{
	text-align: center;
	margin: 0 auto 20px;
	width: 34%;
}
.qas{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	font-style: normal;
	width: 90%;
	margin: auto;
}
.qa{
	overflow: hidden;
	margin-bottom: 20px;
	border-radius: 15px;
	border: solid 1px #333;
}
.q,.a{
	position: relative;
	padding: 15px 15px 15px 50px;
}
.q{
	background-color: #F1F1F1;
	z-index: 2;
	cursor: pointer;
	padding: 15px 50px;
	font-weight: 700;
}
.a{
	background-color: #fff;
	z-index: 1;
	display: none;
	font-weight: 400;
}
.q::before,.a::before{
	content: "";
	width: 30px;
	height: 30px;
	position: absolute;
	left: 10px;
	top: 50%;
	transform: translateY(-50%);
	background-repeat: no-repeat;
	background-size: 100%;
	background-position: center;
}
.q::before{
	background-image: url(../img/q.png);
}
.q::after{
	content: "";
	position: absolute;
	width: 15px;
	height: 15px;
	right: 10px;
	top: 50%;
	transform: translateY(-50%);
	background-image: url(../img/plus.png);
	background-size: 100%;
	background-position: center;
	background-repeat: no-repeat;
}
.open .q::after{
	background-image: url(../img/minus.png);

}
.a::before{
	background-image: url(../img/a.png);
	top: 15px;
	transform: translateY(0);
}

/*============================
#attention
============================*/
#attention{
	width: 90%;
	margin: 10% auto;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	position: relative;
	z-index: 2;
}
.attention_title{
	width: 58%;
	margin: auto;
	padding: 10px;
	border-radius: 50px;
	position: relative;
	bottom: -3px;
	left: 3px;
	transform: translateY(50%);
	z-index: 1;
}

.attention_content{
	border: solid 1px #333;
	box-shadow: 7px 7px #E4C9F5;
	border-radius: 20px;
	padding: 20px;
	padding-top: 40px;
	position: relative;
	font-size: 14px;
	line-height: 1.6;
}
.attention_content::before,.attention_content::after{
	content: "";
	width: 20px;
	height: 20px;
	position: absolute;
	top: 15px;
	background-color: #E4C9F5;
	border-radius: 50%;
	border: solid 1px #333;
}
.attention_content::before{
	left: 15px;
}
.attention_content::after{
	right: 15px;
}
h3{
	margin-top: 20px;
}
.hr{
	height: 2px;
	margin: 20px 0;
	border-top: dashed 1px #E4C9F5;
}
.footer_logo{
	width: 30%;
	margin: auto;
}
.footer_links{
	text-align: center;
	font-size: 14px;
	display: flex;
	justify-content: space-between;
	width: 80%;
	margin: auto;
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 700;
}
.footer_links a{
	display: block;
}
.copy{
	font-family: 'Noto Sans JP', sans-serif;
	font-weight: 400;
	text-align: center;
	padding: 20px;
	font-size: 14px;
}
.pc_text{
	position: fixed;
	top: 200px;
	left: calc(50% - 650px);
	color: #fdfeff;
	text-align: center;
	width: 250px;
}
.pc_text picture{/* width: 160px; *//* margin: auto; */}
.pc_text p{}
.balloons {
	position: fixed;
	width: 100%;
	height:100%;
	bottom: 0;
	z-index: -1;
}

.balloons .balloon {
	position: fixed;
	top: -10%;
	left: 0;
	width: 4vw;
	opacity: 1;
	animation: snow-anim 10s 0s linear infinite;
}

.balloons .balloon:nth-child(1) {left: calc(50% - 630px);}
.balloons .balloon:nth-child(2) {left: calc(50% - 450px);}
.balloons .balloon:nth-child(3) {right: calc(50% - 430px);left: unset;}
.balloons .balloon:nth-child(5) {right: calc(50% - 760px);left: unset;}
.balloons .balloon:nth-child(4) {right: calc(50% - 640px);left: unset;}

/* animation-duration */
.balloons .balloon:nth-child(1) {
	animation-duration: 20s;
}
.balloons .balloon:nth-child(2) {
	animation-duration: 15s;
}
.balloons .balloon:nth-child(3) {
	animation-duration: 7s;
}
.balloons .balloon:nth-child(4) {
	animation-duration: 30s;
}
.balloons .balloon:nth-child(5) {
	animation-duration: 20s;
}
.snows span:nth-child(1) {
	animation-delay: 0s;
}
.snows span:nth-child(2) {
	animation-delay: 12s;
}
.snows span:nth-child(3) {
	animation-delay: 7s;
}
.snows span:nth-child(4) {
	animation-delay: 4s;
}
.snows span:nth-child(5) {
	animation-delay: 10s;
}
.thanks_header_logo{
	width: 10%;
	position: absolute;
	top: 0px;
	left: 40px;
}
thanks{
	display: block;
	width: min(800px, 100%);
	margin: 60px auto 20px;
	text-align: center;
	font-family: 'Noto Sans JP', serif;
	letter-spacing: 2px;
}
.thanks_top_text{color: #fff;font-size: 1.2vw;font-weight: 400;margin-bottom: 40px;}
.thanks_top_text2{color: #fff;font-size: 1.3vw;font-weight: 700;}
.thanks_content{background-color: #ffffffa9;padding: 5%;position: relative;border-radius: 30px;margin: 50px 0;}
.thanks_content_title{position: absolute;top: 0;left: 50%;transform: translate(-50%, -50%);width: 64%;}
.thanks_content_coffee{
}
.thanks_content_arrow{width: 23%;margin: 20px auto;}
.thanks_content_line{width: 60%;margin: auto;}
.hr2{width: 100%;height: 2px;margin: 30px 0;border-top: dashed 1px #fff;}
.thanks_content_text{font-size: 1.1vw;font-weight: 700;}
.thanks_content_30{width: 30%;margin: 30px auto 15px;}
.thanks_content_calendar{width: 75%;margin: auto;}
.thanks_bottom_text{font-size: 1vw;font-weight: 400;}
.back_link{
	margin: 50px auto;
	font-size: 1.2vw;
	font-weight: 700;
}
.thanks_left_line{
	transform: scale(-1, -1);
	top: 5vw;
	left: unset;
	right: -5vw;
}
.thanks_right_line{}

.red_fumidas{
font-size: 5.1vw;font-weight: 700;color: #ff5673;}

@media screen and (max-width: 500px) {
	main{
		overflow-x: hidden
	}
	content{
		padding: 0;
	}
	footer{
		position: relative;
		z-index: 2
	}
	.pc_none{
		display: block;
	}
	.sp_none{
		display: none;
	}
	.balloons {
		position: fixed;
		width: 100%;
		height:100%;
		bottom: 0;
		z-index: 1;
	}
	.reason_content_title{
	}
	.reason_content_sub_title.second {
	}
	.sp_font75{
		font-size: 0.75em
	}
	.reason_content_title picture{
		width: 12vw;
		top: -4px;
		left: -16px;
	}
	.balloons .balloon {
		top: -10%;
		width: 13vw;
		animation: snow-anim2 10s 0s linear infinite;
	}

	.balloons .balloon:nth-child(1) {left: 2vw;}
	.balloons .balloon:nth-child(2) {left: 24vw;}
	.balloons .balloon:nth-child(3) {left: 50vw;}
	.balloons .balloon:nth-child(5) {left: 75vw;}
	.balloons .balloon:nth-child(4) {left: 65vw;}
	.thanks_header_logo{
		width: 31vw;
		top: -12vw;
		left: 50%;
		transform: translateX(-50%);
	}
	thanks{margin: 18vw auto 2vw;}
	.thanks_top_text{
		font-size: 4.5vw;
		margin-bottom: 5vw;
	}
	.thanks_top_text2{
		font-size: 4vw;
	}
	.thanks_content{
		margin: 7vw auto;
		width: 90%;
	}
	.thanks_content_title{
	}
	.thanks_content_coffee{
	}
	.thanks_content_arrow{
		width: 35%;
		margin: 2.5vw auto;
	}
	.thanks_content_line{
		width: 80%;
	}
	.hr2{
		margin: 4vw 0;
	}
	.thanks_content_text{
		font-size: 4vw;
	}
	.thanks_content_30{
		width: 45%;
		margin: 3vw auto 0vw;
	}
	.thanks_content_calendar{
		width: 100%;
	}
	.thanks_bottom_text{
		font-size: 2.5vw;
	}
	.back_link{
		font-size: 4.5vw;
		margin: 9vw auto 0vw;
	}
	.thanks_footer{
		font-size: 10px;
	}
	.copy{
	}
	.left_line{
	}
	.right_line{
	}
	.left_cloud{
		bottom: 0;
		left: 0;
		width: 56vw;
	}
	.right_cloud{
		bottom: 0vw;
		right: 0;
		width: 58vw;
	}
	.thanks_left_line{
		top: 6vw;
		right: -8vw;
	}
	.thanks_right_line{
		top: 0vw;
		right: 0;
	}
	.thanks_body{
		overflow: hidden;
	}
}
@keyframes snow-anim {
	0% {
		top: 100%;
		transform: translateX(0);
	}

	35% {
		transform: translateX(3vw);
	}

	65% {
		transform: translateX(-3vw);
		opacity: 1;
	}

	100% {
		top: 30%;
		transform: translateX(0);
		opacity: 0;
	}
}
@keyframes snow-anim2 {
	0% {
		top: 100%;
		transform: translateX(0);
	}

	35% {
		transform: translateX(3vw);
	}

	65% {
		transform: translateX(-3vw);
		opacity: 1;
	}

	100% {
		top: 0%;
		transform: translateX(0);
		opacity: 0;
	}
}

.popup-area {
            display:none;
            width:80vw;
            background:#fff;
            padding:20px;
            position: fixed;
            z-index: 9999;   
            top: 50%;
            left: 50%;
            transform: translateY(-50%) translateX(-50%);
            text-align: center;
            border-radius:8px;
            box-shadow: 0 0 4px 4px rgba(0,0,0,0.4);
        }
@media screen and (min-width: 980px) {
                .popup-area {
                width:auto;
                max-width: 460px;
            }
        }
.popup-area button {
            margin:30px auto 0;
        }
        .popup-area .icon{
            font-size:3em;
            color:red;
        }
        /* 背景色 */
.cover-eml {
            background:rgba(0,0,0,0.3);
            width: 100%;
            height: 100%;
            position: fixed;
            z-index: 999;   
            top:0;
            right:0;
            bottom:0;
            left:0;
        }