@charset "utf-8";

@media only screen and (max-width: 640px) {
	
.md_panel .copy { display: none; }
.md_panel img { object-position: left; }	
.md_lead .copy { display: block; line-height: 1.75; font-size: 1em; }
.md_lead .copy br { display: none; }
	
/*============================
#leadArea
============================*/
#leadArea .voice { margin-bottom: 20px; }
#leadArea .voice ul { display: block; }
#leadArea .voice ul li { margin-top: 10px; width: 100%; padding: 12px 14px 11px; font-size: 1em; }

/*============================
#supportHostArea
============================*/
#supportHostArea { padding: 40px 0 0; }
#supportHostArea .md_title_line {}
#supportHostArea .about { margin-top: 20px; display: block; }
#supportHostArea .about .image { width: 100%; text-align: center; }
#supportHostArea .about .image img { width: 50%; height: auto; }
#supportHostArea .about .data { margin-top: 20px; margin-left: 0; }
#supportHostArea .about .data .subTitle { font-size: 1.125em; }
#supportHostArea .about .data .subText { margin-top: 15px; font-size: 1em; line-height: 1.5; }
#supportHostArea .service { margin-top: 30px; }
#supportHostArea .service .md_title_sub {}
#supportHostArea .service .serviceContent { padding: 0; }
#supportHostArea .service .serviceContent ul {}
#supportHostArea .service .serviceContent ul li { float: left; width: 48.5%; margin-right: 3%; margin-top: 20px; display: flex; align-items: center; }
#supportHostArea .service .serviceContent ul li:nth-child(2n) { margin-right: 0; }	
#supportHostArea .service .serviceContent ul li .image { width: 50px; margin-right: 15px; }
#supportHostArea .service .serviceContent ul li .image img { width: 100%; height: auto; }
#supportHostArea .service .serviceContent ul li .name { flex: 1; font-size: 1em; text-align: left; }
#supportHostArea .service .serviceContent ul li .name br { display: none; }

/*============================
#reviewArea
============================*/
#reviewArea { margin-top: 40px; }
#reviewArea .md_title_sub {}
#reviewArea .content { margin-top: 0; }
#reviewArea .content ul { display: block; padding: 0; }
#reviewArea .content ul li { margin-top: 20px; float: left; width: 48.5%; margin-right: 3%; }
#reviewArea .content ul li:nth-child(2n) { margin-right: 0; } 
#reviewArea .content ul li .subTitle { font-size: 2em; }
#reviewArea .content ul li .subText { font-size: 0.875em; line-height: 1.5; }

/*============================
#stepArea
============================*/
#stepArea { margin-top: 40px; }
#stepArea .md_title_sub {}
#stepArea .content { margin-top: 20px; }
#stepArea .content ul { padding: 0; }
#stepArea .content ul li { margin-top: 20px; display: block; }
#stepArea .content ul li .subTitle { width: 100%; font-size: 1em; padding: 8px 12px; border-radius: 5px 5px 0 0; line-height: 1.5; }
#stepArea .content ul li .subText { border: solid 1px #ccc; border-top: none; padding: 15px; border-radius: 0 0 5px 5px;font-size: 0.875em; }
#stepArea .content ul li:nth-child(1) {}
#stepArea .content ul li:nth-child(2) .subTitle {}
#stepArea .content ul li:nth-child(3) .subTitle {}
#stepArea .sub { padding: 0 0 0 15px; margin-top: 20px; text-align: left; }
#stepArea .button { margin-top: 30px; }
#stepArea .button a.md_btn_pageIn {}

/*============================
#storyArea
============================*/
#storyArea { margin-top: 40px; padding-top: 40px; }
#storyArea .md_mainTitle {}
#storyArea .md_mainTitle .sub {}
#storyArea .md_mainTitle h2.main {}
#storyArea .md_mainTitle .lead {}
#storyArea .content { margin-top: 0; }
#storyArea .content ul {}
#storyArea .content ul li { width: 100%; float: inherit; margin-right: 0; margin-top: 20px; }
#storyArea .content ul li:nth-child(3n) { margin-right: 0; }
#storyArea .content ul li .image { border-radius: 10px; text-align: center; }
#storyArea .content ul li .image img { object-fit: cover; height: 160px; width: auto; }
#storyArea .content ul li .data { margin-top: 20px; }
#storyArea .content ul li .data .subTitle { font-size: 1em; }
#storyArea .content ul li .data .subText { font-size: 0.875em; }

/*============================
#companyArea
============================*/
#companyArea { margin-top: 40px; padding-top: 40px; }
#companyArea .md_mainTitle {}
#companyArea .md_mainTitle .sub {}
#companyArea .md_mainTitle h2.main {}
#companyArea .md_mainTitle .lead {}
#companyArea .map { margin-top: 30px; }
#companyArea .map .image { padding: 20px; }
#companyArea .map .image img { width: 100%; height: auto; }
#companyArea .map .image .md_btn {}
#companyArea .map .image .md_btn.hokkaido { right: 2%; top: 10%; }
#companyArea .map .image .md_btn.tohoku { right: 32%; top: 30%; }
#companyArea .map .image .md_btn.kyusyu { left: 1%; top: 65%; }
#companyArea .map .image .md_btn.kansai { left: 24%; top: 50%; }
#companyArea .map .image .md_btn.kanto { left: 55%; top: 72%; }
#companyArea .map .image .md_btn.chugoku { left: 22%; top: 82%; }
#companyArea .map .image .md_btn.chubu { left: inherit; right: 10%; top: 52%; }
#companyArea .map::after { bottom: -70px; transform: translateX(-50%); display: block; width: 80px; height: 48px; background: url("../../../imageFile/forhosts/support_host/illust_result.svg") no-repeat center; background-size: 50px auto; }
#companyArea .content { margin-top: 80px; }
#companyArea .content .md_title_bar { margin-top: 30px; }
#companyArea .content .md_title_sub { margin-top: 20px; }
#companyArea .content .area { margin-top: 15px; position: relative; }
#companyArea .content .area ul {}
#companyArea .content .area ul li {}
#companyArea .content .area ul li:nth-child(3n) { margin: 0; }
#companyArea .content .area ul li a {}
#companyArea .content .area ul li a .profile {}
#companyArea .content .area ul li a .profile .face {}
#companyArea .content .area ul li a .profile .face img {}
#companyArea .content .area ul li a .profile .name { margin-top: 15px; font-size: 1.125em; font-weight: bold; text-align: center; line-height: 1.5; }
#companyArea .content .area ul li a .profile .text { margin-top: 15px; font-size: 0.9125em; height: 60px; }
#companyArea .content .area ul li a .can { margin-top: 15px; }
#companyArea .content .area ul li a .can .canTitle { display: inline-block; background: #555; color: #fff; padding: 6px 12px 5px; font-size: 0.75em; border-radius: 3px; }
#companyArea .content .area ul li a .can ul { height: 90px; }
#companyArea .content .area ul li a .can ul li { margin-top: 15px; float: left; width: 30px; margin-right: 15px; }
#companyArea .content .area ul li a .can ul li .serviceImage {}
#companyArea .content .area ul li a .can ul li .serviceImage img {}
#companyArea .content .area ul li a .can ul li .name {}
#tooltip {}
#companyArea .content .area ul li a .data { margin-top: 15px; padding-top: 15px; }
#companyArea .content .area ul li a .data ul {}
#companyArea .content .area ul li a .data ul li {}
#companyArea .content .area ul li a .data ul li .dataTitle { font-size: 0.75em; }
#companyArea .content .area ul li a .data ul li .number {}
#companyArea .content .area ul li a .data ul li .number em { font-size: 1.25em; }
#companyArea .content .area.swiper { padding: 0; }
#companyArea .content .area .swiper-wrapper {}
#companyArea .content .area .swiper-slide { padding: 15px; max-width: inherit; }
#companyArea .content .area .swiper-button-prev { left: -22px; }
#companyArea .content .area .swiper-button-prev::before {}
#companyArea .content .area .swiper-button-prev::after {}
#companyArea .content .area .swiper-button-next { right: -22px; }
#companyArea .content .area .swiper-button-next::before {}
#companyArea .content .area .swiper-button-next::after {}

}