@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; background: url("../images/careloop_lp_bottom_bg.png") center bottom repeat-x; padding: 80px 0 0;}

#careloop_contents{}

header{ text-align: center; width: 100%; margin: 0 auto 80px;}

.careloop_menu{ padding: 20px 60px; text-align: center; position: fixed; left: 0; top: 0; align-items: center; width: 100%; background: #ff7bac;}
.careloop_menu ul{ list-style: none; display: flex; justify-content: flex-end; margin: 0; padding: 0; font-size: 16px; align-items: center;}
.careloop_menu li{ max-width: 200px; margin: 0 20px; padding: 0; font-weight: 800; align-content: center;}
.careloop_menu li a{ color: #fff; text-decoration: none;}


h1{ text-align: center; font-size: 0; line-height: 0; margin: 0; padding: 0;}
h1 img{ margin: 0 auto; width: 100%;}
h2{ text-align: center; font-size: 24px; line-height: 1.6; margin: 0 auto 20px; padding: 0; font-weight: 800; color: #ff7bac;}
h2 span{ display: block; font-weight: 400; font-size: 16px; color: #777;}
h2 img{ margin: 0 auto;}
h3{ text-align: center; font-size: 0; line-height: 0; margin: 0 auto 40px; padding: 0;}
h3 img{ margin: 0 auto;}
h4{ text-align: center; font-size: 21px; line-height: 1.6; margin: 0 auto 20px; padding: 0; font-weight: 800; color: #ff7bac;}


.careloop_about{ width: 40%; margin: 0 auto;}
.careloop_top_img{ width: 70%; margin: 0 auto;}


.careloop_box{ width: 80%; margin: 0 auto 80px; padding: 150px 0 0;}
.careloop_color{ background: #fff8fb; padding: 80px 0;}
.careloop_box h2{ margin-bottom: 80px;}
.careloop_box h2 img{ width: 35%; margin: 0 auto;}
.careloop_about_box p{ width: 45%; margin: 0 auto;}

.careloop_beforeafter{ margin: 0 auto 120px;}
.careloop_beforeafter_imgs{ width: 80%; margin: 0 auto 60px;}
.careloop_svg_txts{ width: 60%; margin: 0 auto 80px; text-align: left; font-size: 16px;}

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


.careloop_theme_menu{ background: #fee4ee; padding: 20px 0;}
.careloop_theme_menu h4{ font-size: 21px;}
.careloop_theme_type{ display: flex; justify-content: space-between; text-align: center; width: 80%; margin: 0 auto;}
.careloop_theme_type div{ flex: 1; margin: 0 10px;}
.careloop_theme_type div a{ color: #777; text-decoration: none; font-weight: 800;}
.careloop_theme_type div ul{ list-style: none; margin: 0; padding: 0; text-align: left;}

.careloop_top_case{ padding: 80px 0;}
.careloop_top_case h4{ font-size: 21px;}

.case{ display: flex; justify-content: center; width: 60%; margin: 0 auto 80px;}
.case div{ margin:0 0 0 30px;}
.case div p{ margin-bottom: 30px; font-size: 14px;}
.case_btn{ display: block; border: 2px solid #ff7bac; color: #ff7bac; font-weight: 800; padding: 10px 0; text-align: center; text-decoration: none; font-size: 14px; border-radius: 8px;}

footer{ color: #fff; background: #ff7bac; font-size: 10px; padding: 0 0 15px;}
.careloop_footer{ display: flex; justify-content: center; align-items: center; margin-bottom: 20px;}
.careloop_footer .careloop_footer_contents01{ width: 200px; text-align: center;}
.careloop_footer .careloop_footer_contents02{ width: auto;}
.careloop_footer .careloop_footer_contents02 ul{ list-style: none; margin: 0 0 0 30px; padding: 30px 0 0; font-size: 12px;}
.careloop_footer .careloop_footer_contents02 ul li{ margin: 0 0 3px; padding: 0 0 0 20px; position: relative; line-height: 1.5;}
.careloop_footer .careloop_footer_contents02 ul li::before{ content: ''; position: absolute; top: 3px; left: 0; widows: 0; height: 0; border-style: solid; border-width: 6px 0 6px 6px; border-color: transparent transparent transparent #fff;}
.careloop_footer .careloop_footer_contents02 ul li a{ color: #fff; text-decoration: none;}

.careloop_footer .careloop_footer_contents01 .careloop_footer_login{ display: block; font-size: 13px; font-weight: 800; color: #66545b; text-decoration: none; margin: 0 auto; background: #fff; padding: 8px 0; border-radius: 8px; width: 80%;}
.careloop_footer .careloop_footer_contents01 .careloop_footer_login:hover{ opacity: 0.8;}

.careloop_footer_copy{ width: 90%; margin: 0 auto; text-align: center; line-height: 2.0;}
.careloop_footer_copy_link a{ color: #fff; text-decoration: none;}
.careloop_footer_copy_link a + a::before { content: "/"; margin: 0 10px;}

/* 「○○から探す」のリンクスタイル */
.accordion-toggle {
  display: block;
  position: relative;
  padding: 10px;
  text-decoration: none;
  color: #000;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s; /* 背景色のトランジション */
}

.accordion-toggle:hover {
  color: #ff7bac;
}

.accordion-toggle::after {
  content: '';
  width: 8px;
  height: 8px;
  border-top: solid 2px #777;
  border-right: solid 2px #777;
  position: absolute;
  right: 20px; /* 矢印の位置調整 */
  top: 40%;
  transform:  rotate(135deg);
}

.accordion-content {
  height: 0; /* 初期は高さ0 */
  overflow: hidden; /* はみ出しを隠す */
  opacity: 0; /* 初期は透明 */
  transition: height 0.3s ease, opacity 0.3s ease; /* 高さと透明度のトランジション */
}

.accordion.open .accordion-content {
  height: auto; /* アコーディオンが開いたときの高さを自動に */
  opacity: 1; /* 開いたときは表示 */
}

.accordion-content li {
  list-style: none;
}

.accordion-content li a {
  display: block;
  padding: 8px;
  text-decoration: underline;
  color: #777;
	font-size: 14px;

}

/*service*/
.careloop_movie{ width: 60%; margin: 0 auto 180px; padding: 80px 0 0;}
.careloop_movie h2{ color: #ff7bac; font-size: 24px; text-align: center; margin: 0 0 30px;}
.careloop_movie p{ width: 70%; margin: 0 auto 30px;}

.careloop_service_box{ width: 80%; margin: 0 auto; padding: 0; display: flex; justify-content: space-between;}
.careloop_service_box .service_box{ flex: 1; margin: 0 15px;}
.careloop_service_box h3 img{ height: 75px;}
.careloop_service_box h4{ color: #777;}
.careloop_service_img{ margin: 0 0 20px;}
.careloop_service_txt{ font-size: 14px; margin: 0 0 80px;}
.careloop_service_box .careloop_img_03 {
    display: flex;
    justify-content: flex-end;
    align-items: flex-end;
}

.only_pc{ display: block;}
.only_sp{ display: none;}

.careloop_flow{ display: flex; justify-content: flex-start; gap: 50px; margin: 0 auto 80px; padding: 0;}
.careloop_flow div{ flex: 1;}
.careloop_flow div p{ font-size: 12px; padding-top: 15px;}

.careloop_admin_img,.careloop_img_04{ width: 70%; margin: 0 auto 80px;}

/* モーダルのスタイル */
.modal {
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  z-index: 9999;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0,0,0,0.8);
}

.modal-content {
  position: relative;
  background-color: #fff;
  padding: 20px;
  border-radius: 10px;
  width: 80%;
  text-align: center;
}

/* モーダル内の画像 */
.modal-image {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

/* 閉じるボタンのスタイル */
.close {
  position: absolute;
  right: 10px;
  top: 10px;
  font-size: 30px;
  cursor: pointer;
  color: #333;
}

.close:hover {
  color: red;
}

/* ミニマル広告のスタイル */
.mini-ad {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: 0px;
  overflow: hidden;
  transition: height 0.3s ease-out;
  z-index: 9998;
}

/* ミニマル広告の画像 */
.mini-image {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}




/*@media screen and (min-width: 1300px){
	.careloop_top{ min-height: 1250px; background-size: cover;}
}*/
@media screen and (max-width: 480px){
	body{ padding-top: 80px;}

	h2{ margin: 0 0 50px; font-size: 18px;}
	h2 span{ font-size: 14px;}
	h3{ margin-bottom: 30px;}
	h4{ font-size: 18px;}
	
	.careloop_menu{ background: #ff7bac url("../images/careloop_logo_white.png") 40px 18px no-repeat; background-size: 40%;}

	.careloop_menu ul{ display: block; width: 100%; font-size: 16px; text-align: left;}
	.careloop_menu li{ width: 100%; max-width: none; margin: 10px 0;}
	
	.careloop_footer{ display: flex; margin-bottom: 20px; width: 100%; margin: 0 auto; justify-content: space-between;}
	.careloop_footer .careloop_footer_contents01{ width: 100%; text-align: center;}
	.careloop_footer .careloop_footer_contents02{ width: 100%;}
	.careloop_footer .careloop_footer_contents02 ul{ margin: 30px 0 0; padding: 0;}
	
	.careloop_footer .careloop_footer_contents01 .careloop_footer_login{ width: 60%;}
	
	.careloop_footer_copy{ display: block; width: 80%; margin-top: 30px;}
	.careloop_footer_copy_link{ margin-bottom: 5px;}
	
	.careloop_about_box{ width: 85%; margin: 0 auto;}
	.careloop_about{ width: 100%;}
	.careloop_top_img{ width: 100%;}
	

	/* ハンバーガーアイコンのデザイン */
	.menu-icon { width: 28px; cursor: pointer; margin: 0 0 0 auto;}
	.menu-icon span { display: block; height: 2px; background: #fff; margin: 6px 0;}
	/* メニュー初期状態 */
	.menu { height: 0; opacity: 0; overflow: hidden; list-style: none; padding: 0; transition: height 2s ease, opacity 2s ease;}
	/* メニューが表示された時 */
	.menu.active { height: auto; opacity: 1;}
	
	
	
	.careloop_top{ min-height: none; background: #ff7bac; padding: 30px 0; display: block;}
	.careloop_top img{ max-width: 100%; margin-bottom: 0;}
	.careloop_top h2{ margin: 0 30px;}
	
	.careloop_about_box p{ width: 100%;}
	
	
	.careloop_box{ width: 80%; margin: 0 auto 80px; padding-top: 60px;}
	.careloop_box h2{ margin-bottom: 60px;}
	.careloop_box h2 img{ width: 100%;}
	
	.careloop_beforeafter{ margin-bottom: 80px;}
	.careloop_beforeafter_imgs{ width: 100%; margin-bottom: 30px;}
	.careloop_svg_txts{ width: 100%; font-size: 14px;}
	
	.careloop_theme_type{ display: block;}
	
	.case{ display: block; width: 80%;margin: 0 auto 80px;}
	.case div{ margin:0;}
	
	/*service*/
	.careloop_movie{ width: 80%; margin-bottom: 100px; padding-top: 60px;}
	.careloop_movie h2{ font-size: 18px;}
	.careloop_movie p{ width: 100%;}
	
	.careloop_service_box{ width: 80%; display: block;}
	.careloop_service_box .service_box{ width: 100%; margin: 0;}
	.careloop_service_box h3 img{ height: auto;}
	
	.only_pc{ display: none;}
	.only_sp{ display: block;}
	
	.careloop_flow{ display: block;}
	.careloop_flow div{ margin-bottom: 80px;}
	.careloop_admin_img,.careloop_img_04{ width: 100%;}
	
	.careloop_header_logo{ margin: 0; padding: 0; width: 30%;}


	}