@charset "utf-8";

.md_panel .copy { display: block; }
.md_lead .copy { display: none; }

/*============================
#leadArea
============================*/
#leadArea .voice { margin-bottom: 30px; }
#leadArea .voice ul { justify-content: center; display: flex; align-items: center; column-gap: 20px; }
#leadArea .voice ul li { display: block; width: 350px; background: #fff; padding: 15px 20px 14px; border-radius: 40px; text-align: center; font-weight: bold; font-size: 1.125em; }

/*============================
#supportHostArea
============================*/
#supportHostArea { padding: 100px 0 0; }
#supportHostArea .md_title_line {}
#supportHostArea .about { margin-top: 60px; display: flex; align-items: center; }
#supportHostArea .about .image { width: 400px; text-align: center; }
#supportHostArea .about .data { margin-left: 40px; flex: 1; }
#supportHostArea .about .data .subTitle { font-size: 1.25em; font-weight: bold; }
#supportHostArea .about .data .subText { margin-top: 20px; font-size: 0.9125em; line-height: 1.75; }
#supportHostArea .service { margin-top: 60px; }
#supportHostArea .service .md_title_sub {}
#supportHostArea .service .serviceContent { padding: 0 100px; }
#supportHostArea .service .serviceContent ul {}
#supportHostArea .service .serviceContent ul li { float: left; width: 20%; text-align: center; margin-top: 40px; }
#supportHostArea .service .serviceContent ul li .image { text-align: center;}
#supportHostArea .service .serviceContent ul li .image img {}
#supportHostArea .service .serviceContent ul li .name { text-align: center; margin-top: 10px; line-height: 1.5; }

/*============================
#reviewArea
============================*/
#reviewArea { margin-top: 60px; }
#reviewArea .md_title_sub {}
#reviewArea .content { margin-top: 40px; }
#reviewArea .content ul { display: flex; justify-content: space-between; column-gap: 50px; padding: 0 100px; }
#reviewArea .content ul li { width: 25%; }
#reviewArea .content ul li .subTitle { font-weight: bold; font-size: 3em; text-align: center; }
#reviewArea .content ul li .subText { margin-top: 20px; font-size: 0.875em; line-height: 1.75; }

/*============================
#stepArea
============================*/
#stepArea { margin-top: 60px; }
#stepArea .md_title_sub {}
#stepArea .content { margin-top: 40px; }
#stepArea .content ul { padding: 0 100px; }
#stepArea .content ul li { margin-top: 20px; display: flex; align-items: center; }
#stepArea .content ul li .subTitle { width: 200px; background: #555; color: #fff;  font-weight: bold; font-size: 1.125em; padding: 15px 15px 15px 30px; border-radius: 60px 0 0 60px; line-height: 50px; }
#stepArea .content ul li .subText { flex: 1; border: solid 1px #ccc; border-left: none; padding: 15px 25px; border-radius: 0 60px 60px 0; line-height: 1.5; }
#stepArea .content ul li:nth-child(1) { margin-top: 0; }
#stepArea .content ul li:nth-child(2) .subTitle { background: #444; }
#stepArea .content ul li:nth-child(3) .subTitle { background: #333; }
#stepArea .sub { padding: 0 110px; margin-top: 20px; line-height: 1.5; text-indent: -1.25em; font-size: 0.875em; text-align: center; }
#stepArea .button { margin-top: 40px; text-align: center; }
#stepArea .button a.md_btn_pageIn {}

/*============================
#storyArea
============================*/
#storyArea { margin-top: 100px; padding-top: 100px; border-top: solid 1px #ddd; }
#storyArea .md_mainTitle {}
#storyArea .md_mainTitle .sub {}
#storyArea .md_mainTitle h2.main {}
#storyArea .md_mainTitle .lead {}
#storyArea .content { margin-top: 40px; }
#storyArea .content ul {}
#storyArea .content ul li { width: 340px; float: left; margin-right: 70px; }
#storyArea .content ul li:nth-child(3n) { margin-right: 0; }
#storyArea .content ul li a {}
#storyArea .content ul li a .image { border: solid 1px #ddd; background: #eee; border-radius: 20px; overflow: hidden; }
#storyArea .content ul li a .image img { object-fit: cover; width: 100%; height: 100%; object-position: center; transition: 0.3s all; }
#storyArea .content ul li a:hover .image img { transform: scale(1.05); }
#storyArea .content ul li a .data { margin-top: 20px; }
#storyArea .content ul li a .data .subTitle { font-size: 1.125em; font-weight: bold; line-height: 1.5; }
#storyArea .content ul li a .data .subText { margin-top: 10px; font-size: 0.875em; line-height: 1.5; }

/*============================
#companyArea
============================*/
#companyArea { margin-top: 100px; padding-top: 100px; border-top: solid 1px #ddd; }
#companyArea .md_mainTitle {}
#companyArea .md_mainTitle .sub {}
#companyArea .md_mainTitle h2.main {}
#companyArea .md_mainTitle .lead {}
#companyArea .map { margin-top: 40px; background: #fafafa; border-radius: 20px; border: solid 1px #ddd; position: relative; }
#companyArea .map .image { text-align: center; }
#companyArea .map .image img {}
#companyArea .map .image .md_btn { position: absolute; }
#companyArea .map .image .md_btn.hokkaido { right: 20%; top: 20%; }
#companyArea .map .image .md_btn.tohoku { right: 30%; top: 42%; }
#companyArea .map .image .md_btn.kyusyu { left: 18%; top: 74%; }
#companyArea .map .image .md_btn.kansai { left: 35%; top: 60%; }
#companyArea .map .image .md_btn.kanto { left: 55%; top: 75%; }
#companyArea .map .image .md_btn.chugoku { left: 35%; top: 82%; }
#companyArea .map .image .md_btn.chubu { left: 46%; top: 52%; }
#companyArea .map::after { content: ""; position: absolute; left: 50%; bottom: -80px; transform: translateX(-50%); display: block; width: 100px; height: 60px; background: url("../../../imageFile/forhosts/support_host/illust_result.svg") no-repeat center; background-size: 60px auto; }
#companyArea .content { margin-top: 100px; }
#companyArea .content .md_title_bar { margin-top: 40px; }
#companyArea .content .md_title_sub { margin-top: 30px; }
#companyArea .content .area { margin-top: 30px; 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 { display: block; padding: 30px; border: solid 1px #ccc; box-shadow: 10px 10px 10px 0 rgba(0, 0, 0, 0.04); border-radius: 20px; }
#companyArea .content .area ul li a .profile {}
#companyArea .content .area ul li a .profile .face { width: 100px; height: 100px; margin: 0 auto; overflow: hidden; border-radius: 100px; text-align: center; }
#companyArea .content .area ul li a .profile .face img { width: 100%; height: auto; }
#companyArea .content .area ul li a .profile .name { margin-top: 15px; font-size: 1.25em; font-weight: bold; text-align: center; line-height: 1.5; }
#companyArea .content .area ul li a .profile .text { margin-top: 15px; font-size: 0.875em; line-height: 1.5;
	  display: -webkit-box;          /* Flexboxのコンテナ化 */
      -webkit-box-orient: vertical;  /* 縦方向に並べる */
      -webkit-line-clamp: 4;         /* 3行に制限（任意の数値に変更） */
      overflow: hidden;              /* はみ出た部分を非表示 */
      text-overflow: ellipsis;
	  height: 80px; }
#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 { width: 100%; height: auto; }
#companyArea .content .area ul li a .can ul li .name { display: none; }
#tooltip {
    display: none; /* 最初は非表示 */
    position: absolute; /* 絶対位置で指定 */
    padding: 10px;
    background-color: #ff5a5f;
    color: #fff;
    border-radius: 5px;
    font-size: 0.75em;
    white-space: nowrap; /* テキストが折り返されないようにする */
    z-index: 99999; /* 他の要素より手前に表示 */ }
#companyArea .content .area ul li a .data { margin-top: 20px; padding-top: 20px; border-top: solid 1px #ddd; }
#companyArea .content .area ul li a .data ul { width: 100%; display: flex; align-items: center; justify-content: space-between; }
#companyArea .content .area ul li a .data ul li { text-align: center; }
#companyArea .content .area ul li a .data ul li .dataTitle { font-size: 0.75em; font-weight: bold; }
#companyArea .content .area ul li a .data ul li .number { margin-top: 10px; font-weight: bold; }
#companyArea .content .area ul li a .data ul li .number em { font-size: 1.375em; }
#companyArea .content .area.swiper { padding: 0 50px; }
#companyArea .content .area .swiper-wrapper {}
#companyArea .content .area .swiper-slide { padding: 15px; max-width: 350px; }
#companyArea .content .area .swiper-button-prev { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 60px!important; z-index: 9; background-image: none!important; }
#companyArea .content .area .swiper-button-prev::before { content: ""; position: absolute; left: 28px; top: -12px; width: 20px; margin-top: 30px; height: 20px; border-top: 1px solid #555; border-right: 1px solid #555; -webkit-transform: rotate(225deg); transform: rotate(225deg); pointer-events: none; }
#companyArea .content .area .swiper-button-prev::after { display: none; }
#companyArea .content .area .swiper-button-next { position: absolute; right: 0; top: 50%; transform: translateY(-50%); width: 60px!important; z-index: 9; background-image: none!important; }
#companyArea .content .area .swiper-button-next::before { content: ""; position: absolute; right: 26px; top: -12px; width: 20px; margin-top: 30px; height: 20px; border-top: 1px solid #555; border-right: 1px solid #555; -webkit-transform: rotate(45deg); transform: rotate(45deg); pointer-events: none; }
#companyArea .content .area .swiper-button-next::after { display: none; }