@charset "UTF-8";
/* CSS Document */

#plan{
	font-weight:bolder;
	line-height:1.3;
	}

#plan img{
	width:100%;
}

#plan_list_container{
	display: flex;
	flex-wrap: wrap; /* 必要なら折り返し */
	justify-content:center; /* 通常は中央揃え */
	border-width: 1px 1px 1px 1px;
  border-style: solid;
  border-color: rgb(200, 200, 200);
  border-radius: 10px 10px 10px 10px; /* 角を丸くする */
	padding: 10px 15px 10px 15px;
	margin-bottom: 2%;
	}

.houkatu_text_box {
	width:45%;
	min-width: 300px;
	margin-right: 1%;
}

.houkatu_txt1{
  color:#ce0101;
  font-size: clamp(16px, 2.4vw, 26px);
  letter-spacing: 0px;
	margin-bottom: 10px;
}

.houkatu_txt2{
	color:rgb(80, 80, 80);
  font-size: clamp(12px, 1.6vw, 18px);
}

.list_box {
  display: flex;  /* 横並びにする */
	justify-content: center; /* 左右中央 */
	max-width: 54%;
	min-width: 300px;
  justify-content: center;
}

.list_houkatu{
	display: flex;
	align-items: center; /* 上下中央 */
  justify-content: center; /* 左右中央 */
	width: 150px;
	background: linear-gradient(to top, rgb(163, 1, 1), rgb(255, 128, 128, 0.8));
	margin: 3% 2% 3% 0%;
	padding: 10px 3px 10px 3px;
	color:#ffffff;
  border-radius: 5px 5px 5px 5px; /* 角を丸くする */
}

.list_houkatu p {
	font-family: "Noto Sans JP", sans-serif;
	text-align: center;
	font-size: clamp(8px, 1.4vw, 14px);
	line-height:1.3;
}

#plan_tool{
	text-align: left;
	position: relative;
	width: 100%;
	background: linear-gradient(to top, rgb(169, 208, 107, 1) 0%, rgba(251, 253, 248, 1) 60%, rgba(225, 255, 255, 0) 100%);
	border-width: 1px 1px 1px 1px;
  border-style: solid;
  border-color: rgb(200, 200, 200);
  border-radius: 10px 10px 10px 10px; /* 角を丸くする */
	padding: 10px 15px 10px 15px;
	margin-bottom: 3%;
}

#tool_box1{
	width: 100%;
}

.tool_txt1{
	color:rgb(0, 180, 60, 0.7);
  font-size: clamp(10px, 2vw, 21px);
  letter-spacing: 2px;
	margin-bottom: 0px;
}

.tool_txt2{
	color:rgb(0, 180, 60);
  font-size: clamp(16px, 3.8vw, 40px);
  letter-spacing: 1px;
	margin-bottom: 10px;
	line-height:1;
	margin-bottom: 15px;
}

.tool_txt3{
	width: 43%;
	color:rgba(0, 180, 60, 0.8);
  font-size: clamp(10px, 2vw, 21px);
	margin-bottom: 10px;
}

.tool_txt4{
	width: 40%;
	color:rgba(0, 0, 0, 0.6);
  font-size: clamp(10px, 2vw, 18px);
	margin-bottom: 10px;
}

#tool_box2{
	width: 100%;
  background: linear-gradient(to top, rgba(0, 126, 10, 0.7), rgba(189, 255, 197, 0));	color:rgba(255, 255, 255, 1);
	border-radius: 10px 10px 10px 10px; /* 角を丸くする */
	margin-bottom: 10px;
}

.tool_txt5{
	padding: 15px 10px 10px 15px;
  font-size: clamp(10px, 1.5vw, 16px);
	text-align: center;
}

#plan_tool img{
	width:12%;
	min-width: 55px;
	}

.tool_img1{
  transition: 0.5s;
  position: absolute;
  top:9%;
  left:55%;
  animation-name:fadeDownAnime;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
  opacity:0;
}

.tool_img2{
  transition: 0.5s;
  position: absolute;
  top:34%;
  left:45%;
  animation-name:fadeDownAnime;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
  opacity:0;
}

.tool_img3{
  transition: 0.5s;
  position: absolute;
  top:34%;
  left:65%;
  animation-name:fadeDownAnime;
  animation-duration:1.5s;
  animation-fill-mode:forwards;
  opacity:0;
}

.tool_img_k1{
  transition: 2s;
  position: absolute;
  top:10%;
  left:55%;
  animation-name:fadeInAnime;
  animation-duration:3.5s;
  animation-fill-mode:forwards;
  opacity:0.1;
}

.tool_img_k2{
  transition: 2s;
  position: absolute;
  top:35%;
  left:45%;
  animation-name:fadeInAnime;
  animation-duration:3.5s;
  animation-fill-mode:forwards;
  opacity:0.1;
}

.tool_img_k3{
  transition: 2s;
  position: absolute;
  top:35%;
  left:65%;
  animation-name:fadeInAnime;
  animation-duration:3.5s;
  animation-fill-mode:forwards;
  opacity:0.1;
}

.link_banner{
	width: 17%;
	background: linear-gradient(to top, rgb(7, 162, 223, 0.3), rgba(21, 114, 255, 0.7));
	color:rgba(255, 255, 255, 1);
	border-radius: 10px 10px 10px 10px; /* 角を丸くする */
	padding: 13px 10px 10px 13px;
  font-size: clamp(10px, 1.5vw, 16px);
  position: absolute;
  top:30%;
	right: 2%;
  animation-name:fadeInAnime;
  animation-duration:3s;
  animation-fill-mode:forwards;
  opacity:0;

	transition: background-color 1.5s 1.5s; /* 3秒待ってから1.5秒かけて変化 */
	transition: 0.5s ease-in-out;

}

.link_banner:hover{
	  background: linear-gradient(to top, rgb(21, 114, 255, 0.9), rgba(7, 162, 223, 0.3));
		text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
		box-shadow: 0 7px 10px 0px rgb(170, 170, 170);
		top:29%;
}

#plan_hp{
	position: relative;
	border-width: 1px 1px 1px 6px;
  border-style: solid;
  border-color: rgb(121, 107, 175);
	padding: 3% 1% 1.5% 0%;
	text-align: left;
	width: 100%;
	height: 150%;
	margin-bottom: 2%;
}

.hp_txt1{
	position: relative;
  width: 50%;
  background-color: rgb(121, 107, 175);
	clip-path: polygon(0 0, 96.5% 0, 100% 100%, 100% 100%, 0 100%);
	/* グラデーションは不採用
	background: linear-gradient(74deg, rgb(121, 107, 175) 0%, rgba(121, 107, 175, 1) 90%, rgba(121, 107, 175, 0.1) 100%);
  */
	padding: 1.5% 1.5% 1% 1%;
	font-weight:100;
	color:rgb(255, 255, 255);
  font-size: clamp(12px, 2.6vw, 29px);
  letter-spacing: 3px;
	margin-bottom: 10px;
	line-height:1;
}

.hp_txt1::after {
  content: "";
  position: absolute;
  top: 0;
  left: 94%;
  width: 5%;
  height: 100%;
  background-color: rgba(154, 142, 195, 1); /* 右側をさらに薄く */
  transform: skewX(18deg);
	transform-origin: top left;
}

.hp_txt2{
  width: 50%;
	padding: 1.5% 1% 1% 2.5%;
	color:rgb(121, 107, 175);
  font-size: clamp(11px, 2.2vw, 23px);
	letter-spacing: 0.5px;
}

.hp_txt3{
  width: 50%;
	padding: 1.5% 1% 1% 2.5%;
	color:rgba(0, 0, 0, 0.6);
  font-size: clamp(10px, 1.7vw, 18px);
	letter-spacing: 0px;
}

#plan_hp img{
	width:28%;
	min-width: 55px;
	}

#hp_img1{
  transition: 0.5s;
  position: absolute;
  top:28%;
  left:50%;
}

#plan_Leaflet{
	position: relative;
	border-width: 1px 1px 1px 6px;
  border-style: solid;
  border-color: rgb(233, 96, 158);
	padding: 3% 1% 1.5% 0%;
	text-align: left;
	width: 100%;
	height: 150%;
	margin-bottom: 4%;
}

.Leaflet_txt1{
	position: relative;
  width: 50%;
  background-color: rgb(233, 96, 158);
	clip-path: polygon(0 0, 96.5% 0, 100% 100%, 100% 100%, 0 100%);
	padding: 1.5% 1.5% 1% 1%;
	font-weight:100;
	color:rgb(255, 255, 255);
  font-size: clamp(12px, 2.6vw, 29px);
  letter-spacing: -1px;
	margin-bottom: 10px;
	line-height:1;
}

.Leaflet_txt1::after {
  content: "";
  position: absolute;
  top: 0;
  left: 94%;
  width: 5%;
  height: 100%;
  background-color: rgba(233, 135, 179, 1); /* 右側をさらに薄く */
  transform: skewX(18deg);
	transform-origin: top left;
}

.Leaflet_txt2{
  width: 50%;
	padding: 1.5% 1% 1% 2.5%;
	color:rgb(233, 96, 158);
  font-size: clamp(11px, 2.2vw, 23px);
	letter-spacing: -1px;
}

.Leaflet_txt3{
  width: 50%;
	padding: 1.5% 1% 1% 2.5%;
	color:rgba(0, 0, 0, 0.6);
  font-size: clamp(10px, 1.7vw, 18px);
	letter-spacing: 1px;
}

#plan_Leaflet img{
	width:28%;
	min-width: 55px;
	}

#Leaflet_img1{
  transition: 0.5s;
  position: absolute;
  top:18%;
  left:50%;
}

.divider{
	display: flex;
	width: 100%;
  background: linear-gradient(to bottom, rgba(100, 100, 100, 0.7) 0%, rgba(100, 100, 100, 0.6) 60%, rgba(100, 100, 100, 0.4) 80%, rgba(100, 100, 100, 0.2) 100%);
	color:rgba(255, 255, 255, 1);
	border-radius: 5px 5px 5px 5px; /* 角を丸くする */
	padding: 1% 2% 1% 2%;
	font-size: clamp(14px, 1.7vw, 20px);
	letter-spacing: 2px;
	margin-bottom: 4%;
}

.service_txt1{
	text-align: left;
	width: 50%;
}

.service_txt2{
	text-align: right;
	width: 50%;
}

.servicebox{
  display: flex;  /* 横並びにする */
	float:left;
  flex-wrap: wrap; /* 必要なら折り返し */
  justify-content: center; /* 通常は中央揃え */
  gap: 2%;  /* 要素間の余白 */
	row-gap: 20px;
	text-align: center;
	margin-bottom: 5%;
}

.service_list{
	width:45%;
	min-width:370px;
  display: flex;  /* 横並びにする */
	float:none;
	padding-right:25px;
}

.servicebox img{
	width: clamp(120px, 18vw, 185px);
	height: auto;
	float:left;
}

h3{
	font-weight: bold;
	font-size: 17px;
	margin-bottom:4%;
	color:#FF0000;
}

.servicetext{
	padding: 0% 0% 0% 5%;
	font-size: clamp(12px, 1.6vw, 14px);
	text-align:left;
	line-height:1.3;
}

#link_box {
	width: 100%;
  display: flex;  /* 横並びにする */
  flex-wrap: wrap; /* 必要なら折り返し */
  justify-content: center; /* 通常は中央揃え */
  gap: 8%;  /* 要素間の余白 */
	text-align: center;
	margin-bottom: 5%;
}

.link_kaisha{
	width: 100%;
	border-radius: 5px 5px 5px 5px; /* 角を丸くする */
	padding: 7% 0% 3% 0%;
	background: linear-gradient(to top, rgba(233, 85, 31, 1) 0%, rgba(233, 85, 31, 0.8) 30%, rgba(236, 108, 42, 0.8) 60%, rgba(241, 153, 117, 0.8) 100%);

}

.link_tenji {
	width: 100%;
	border-radius: 7px 5px 5px 5px; /* 角を丸くする */
	padding: 7% 0% 3% 0%;
	background: linear-gradient(to top, rgba(0, 149, 61, 1) 0%, rgba(0, 149, 61, 0.8) 30%, rgba(26, 166, 76, 0.8) 60%, rgba(146, 207, 163, 0.8) 100%);

}

#link_box a {
	width: 35%;
	min-width: 160px;
	min-height: 200%;
  text-decoration: none;  /* 下線を削除 */
	display: flex; /* 内部要素を伸ばすため */
	margin:2% 0% 3% 0%;
}

.link_txt1{
	color:rgb(255, 240, 0);
	font-size: clamp(20px, 3vw, 30px);
	letter-spacing: 1px;
}

.link_txt2{
	width: 85%;
	margin-left: auto;
	margin-right: auto;
	color:rgb(255, 255, 255);
	font-size: clamp(11px, 1.7vw, 14px);
	letter-spacing: 1px;
	line-height:1.4;
	margin-bottom: 2%;
}

.link_kaisha:hover{
	  background: linear-gradient(to top, rgb(21, 114, 255, 0.9), rgba(7, 162, 223, 0.3));
		text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
		box-shadow: 0 7px 10px 0px rgb(170, 170, 170);
}

.link_tenji:hover{
	  background: linear-gradient(to top, rgb(21, 114, 255, 0.9), rgba(7, 162, 223, 0.3));
		text-shadow: 3px 3px 5px rgba(0, 0, 0, 0.5);
		box-shadow: 0 7px 10px 0px rgb(170, 170, 170);
}