@charset "utf-8";
/* CSS Document */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@100..900&display=swap');
html{ scroll-behavior: smooth;}
body{ font-family: "Noto Sans JP", sans-serif; font-optical-sizing: auto; padding: 0; background-image: linear-gradient(90deg, rgba(158, 216, 245, 0.2), rgba(0, 174, 235, 0.2));}

#careloop_zoom_contents{}

header{ display: flex; justify-content: center; padding: 20px 60px; text-align: center; position: fixed; left: 0; bottom: 0; align-items: center; width: 100%; background-image: linear-gradient(90deg, #0026b7, #2758e0);}
header ul{ list-style: none; display: flex; justify-content: flex-end; margin: 0; padding: 0; font-size: 18px; align-items: center;}
header li{ margin: 0 20px; padding: 0; font-weight: 800; align-content: center;}
header li a{ color: #fff; text-decoration: none;}
.careloop_zoom_btn02 img{ max-width: 300px;}
.careloop_zoom_txt02{ max-width: 400px;}

h1{ text-align: center; font-size: 0; line-height: 0; margin: 0; padding: 0; max-width: 200px;}
h1 img{ margin: 0 auto; width: 100%;}
h2{ line-height: 0; margin: 0 auto 30px; padding: 0;}
h2 img{ margin: 0 auto;}
h3{ margin: 20px auto; padding: 0; color: #0012a8;}


.session_icon{ padding: 8px 30px; font-size: 12px; font-weight: 700; color: #3183ff; background: #fff; border-radius: 32px; margin: 0 0 10px; display: inline-block; border: 3px solid #3183ff;}

.careloop_zoom_top{ padding: 0; margin: 0 auto 80px;}

.careloop_zoom_btnbox{ margin: 0 auto 80px; padding: 0; width: 800px;}
.careloop_zoom_btnbox p{ margin: 0; padding: 0; display: flex; justify-content: center;}
.careloop_zoom_btnbox a img{ width: 60%;}

.careloop_zoom_toptxt{ width: 100%; margin: 0 auto 80px; font-size: 28px; font-weight: 500; line-height: 1.6;}



.careloop_zoom_mc{ background: #fff; box-shadow: 0px 0px 15px -5px #bababa; border-radius: 16px; margin: 0 auto 80px; padding: 50px; width: 800px; display: flex; justify-content: space-between; gap: 50px; align-items: flex-start;}
.careloop_zoom_mc img{ width: 250px; height: auto; object-fit: contain;}
.careloop_zoom_mc span,.careloop_zoom_mc strong{ display: block; margin: 0 0 5px; font-size: 13px;}
.careloop_zoom_mc h4{ font-size: 21px; margin: 0 0 15px; padding: 0 0 10px; border-bottom: 1px solid #ccc;}
.careloop_zoom_mc p{ margin: 0; padding: 0; font-size: 14px; line-height: 1.4;}

.careloop_zoom_session{ width: 800px; margin: 0 auto 80px; padding: 0;}

.careloop_zoom_menu{ background: url("../images/careloop_to_c_pink_bg.png") 0 0 repeat; text-align: center; padding: 80px 0 0;}

.careloop_zoom_box{ width: 845px; border: 10px solid #f6c2d5; border-radius: 21px; background: #fff; margin: 0 auto 80px; padding: 60px; text-align: center;}
.careloop_zoom_box p{ text-align: center; margin: 0 auto 60px;}
.careloop_zoom_box p img{ margin: 0 auto;}

.careloop_zoom_loginbtn{ text-align: center; padding: 0 0 80px;}
.careloop_zoom_loginbtn a img{ margin: 0 auto; max-width: 500px;}

footer{ font-size: 10px; padding: 15px 0; margin: 0 0 120px;}
footer a{ color: #0228b9; text-decoration: none;}
footer a:hover{ text-decoration: underline;}
.careloop_zoom_footer{ margin: 0 0 10px;}
.careloop_zoom_footer a{ font-size: 13px; font-weight: 800; text-decoration: none; margin: 0 10px;}
.careloop_zoom_footer a:hover{ text-decoration: underline;}

.careloop_color{ color: #777; line-height: 2.4;}


.careloop_maintenance p{ margin: 100px 0 0; text-align: center;}

.careloop_zoom_only_sp{ display: none;}
.careloop_zoom_only_pc{ display: block;}

@media screen and (max-width: 480px){
	
	header{ padding: 10px 30px; flex-wrap: wrap;}
	.careloop_zoom_login{ padding: 8px 20px; font-size: 16px;}
	h1{ max-width: 150px;}
	h2{ margin: 0 auto 50px;}
	h3{ margin-bottom: 30px;}
	
	
	header ul{ display: block; width: 100%;}
	header li{ text-align: center; width: 100%; max-width: none; margin: 10px 0;}

	.careloop_zoom_btnbox{ width: 100%; margin-bottom: 50px;}
	.careloop_zoom_top{ margin-bottom: 0;}
	
	.careloop_zoom_session,
	.careloop_zoom_mc{ width: 80%;}
	
	.careloop_zoom_btnbox a img{ width: 100%;}
	
	.careloop_zoom_mc{ display: block; padding: 35px;}
	.careloop_zoom_mc img{ width: 100%; margin: 0 0 15px;}
	
	.careloop_zoom_menu{ padding-top: 60px;}
	.careloop_zoom_box{ width: 80%; margin: 0 auto 60px; padding: 30px; border-width: 5px;}
	.careloop_zoom_box p{ margin-bottom: 30px;}
	.careloop_zoom_img03{ width: 50%;}
	
	.careloop_zoom_loginbtn{ padding-bottom: 60px;}
	.careloop_zoom_loginbtn a img{ max-width:none; width: 70%;}
	
	.careloop_maintenance p{ width: 80%; margin: 80px auto;}
	
	.careloop_zoom_only_sp{ display: block;}
	.careloop_zoom_only_pc{ display: none;}
	
	.careloop_zoom_btn02 img{ max-width: 250px; margin: 0 auto;}
	.careloop_zoom_txt02{ max-width: 100%; margin: 10px 0 0;}
	
	footer{ margin-bottom: 170px;}

	}