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


body {
  font-family: "Helvetica", sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.8;
  color: #222;
}


		h1 span {
  font-size: 1rem;
  color: #999;
  font-style: italic;
  letter-spacing: 0.05em;
}


h1 {
  font-size: 2em;
  font-weight: bold;
}
.main-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* 上から配置 */
  height: 100vh; /* 画面全体 */
  padding-top: 150px; /* h1とpの位置調整 */
  text-align: center;
  background-image: url('../../img/bizdev_top.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  color: white;
}


.header-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  margin-top: 80px; /* ← ここで下げる量を調整 */
  margin-bottom: 30px;
}


.header-text h1,
.header-text p {
  background-color: rgba(255, 255, 255, 0.6); /* 薄い背景 */
  color: #000;
  display: inline-block;
  padding: 10px 20px;
  border-radius: 8px;
  margin: 0;
}



	.header-buttons {
  margin-top: 20px;
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

		.btn a {
  color: inherit;
  text-decoration: none;
  display: block;
}

		
		
.btn {
  padding: 10px 20px;
  border: none;
  margin: 5px;
  font-weight: bold;
  cursor: pointer;
}

.btn.white {
  background: #fff;
  border: 1px solid #ccc;
}

.btn.orange {
  background: orange;
  color: #fff;
}
		
		.intro {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0px 20px;
  gap: 0px;
  flex-wrap: wrap; /* スマホ対応 */
	background: none;
}

.intro-text {
  flex: 1;
  min-width: 250px;
}

.intro-text p {
  text-align: left;
  font-size: 1rem;
  line-height: 1.8;
}

.intro-image {
  flex: 2; /* 画像に多めのスペースを割り当て */
  text-align: right;
  min-width: 300px;
}

.icon-graphic {
  max-width: 100%;
  height: auto;
  display: block;
}

		
		

.pain-points {
  background: #e6f0fb;
  text-align: center;
  padding: 30px 20px;
}

.pain-message p {
  margin-bottom: 20px;
  font-weight: bold;
}

	
		
.points {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  margin-top: 20px;
  flex-wrap: wrap; /* スマホ対応するなら追加 */
}

.point {
  flex: 1;
  background: #fff;
  padding: 15px;
  border: 1px solid #ccc;
  text-align: center;
  box-shadow: 0 0 5px rgba(0,0,0,0.1);
  min-width: 200px;
}

	.arrow-down {
  text-align: center;
  font-size: 2rem;
  color: #888;
  margin: 20px 0;
  animation: bounce 1.5s infinite;
}

/* 矢印アニメーション（オプション） */
@keyframes bounce {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(8px);
  }
}
		
.feature-image-block,
.feature-text-block {
  flex: 1;
  min-width: 200px;
}


.feature-image-block img {
  max-width: 70%;
  height: auto;
  border-radius: 8px;
	
}

		
.feature {
  display: flex;
  flex-wrap: wrap;
	
  padding: 40px 20px;
}
.feature.reverse {
  display: flex;
  flex-direction: row-reverse;
}


.case {
  text-align: center;
  background: #f4f4f4;
  padding: 40px 20px;
}

.plans {
  text-align: center;
  padding: 40px 20px;
}
	.plan-cards {
  display: flex;
  gap: 20px;
  justify-content: center;
  flex-wrap: wrap; /* スマホでも縦並びになる */
  margin-top: 20px;
}

.card {
  border: 1px solid #ccc;
  padding: 20px;
  text-align: left;
  max-width: 400px;
  width: 100%;
  box-sizing: border-box;
  flex: 1 1 300px;
}
		.card ul li{
			list-style-type: none;
			
		}
.card-help {
  background: #3a2d20;
  color: #fff;
}

.card-help h3 {
  border-bottom: 1px solid #fff;
}

.card.light {
  background: #cbb065;
  color: #fff;
}
		
		.animal_img {
			width:auto;
			height: 5vh;
			display: block;
			margin: 0 auto;
		}


.contact-section {
  background: #cbb065;
  text-align: center;
  padding: 30px 20px;
	color:#fff;
	
}

.contact-btn {
  background: #3a2d20;
  color: #fff;
  padding: 15px 30px;
  display: inline-block;
  margin-top: 10px;
  text-decoration: none;
}

/* スマホ対応 */
@media (max-width: 768px) {
  .feature,
  .feature.reverse {
    flex-direction: column;
    text-align: center;
  }

  .feature-image-block {
    text-align: center;
  }

  .feature-text {
    text-align: left;
  }
	
	.main-header {
    text-align: center;
  }

  .header-buttons {
    justify-content: center;
  }
	
	
	h4{
		width: 100%;
		text-align: center;
	}
	
	
	
}