@charset "utf-8";
body {
	font: normal 18px/1.4 "Noto Sans JP", sans-serif;
	text-align: justify;
	overflow-x: hidden;
}

body .sp-item {
    display: none !important; }
  body .pc-item {
    display: block !important; }

  @media screen and (max-width: 640px) {
    body {
      min-width: inherit;
	  height:100%;
	  }
      body .sp-item {
        display: block !important; }
      body .pc-item {
        display: none !important; }
	  body .sp-item img {
		width:100%;}
}

@media screen and (max-width: 640px) {
	.sp img{
		max-width:90%;
}
	.sp02 img{
		max-width:100%;
}
.sp03 img{
		max-width:70%;
}
}

.fl_left {
	float: left;
}
.fl_right {
	float: right;
}
.ov_hd {
	overflow: hidden;
}
.bg_none {
	background-image: none!important;
}
a.rollover:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}
.rollover:hover {
	opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
}
.center {
	text-align: center;
}
.right {
	text-align:right;
}
.line_0 {
	line-height: 0;
}
.zindex {
	z-index: 200;
}
input[type=radio] {
	width: 15px;
	height: 15px;
	vertical-align: middle;
}
input[type=image]:hover{
		opacity: 0.7;
	filter: alpha(opacity=70);
	-ms-filter: "alpha( opacity=70 )";
	}


/* ----------------------------------------------------

    text

---------------------------------------------------- */
em {
	text-decoration: underline;
  font-style: normal;
}
.bd_red {
	border-bottom: 1px solid #FF0004;
	padding-bottom: 2px;
}
.bd_red02 {
	border-bottom: 3px solid #FF0004;
	padding-bottom: 0px;
}
.red {
	color: #ff0000;
}
.yellow {
	background-color: #ffff00;
}
.gray {
	color:#666666;
}
.bold {
	font-weight: bold;
}
strong {
	font-weight: bold;
}
.strike {
	text-decoration: line-through;
}
.ac {
	text-align: center !important;
}
.ar {
	text-align: right !important;
}
.al {
	text-align: left !important;
}
.bold {
	font-weight: bold !important;
}
.font10 {
	font-size: 10px !important;
}
.font11 {
	font-size: 11px !important;
}
.font12 {
	font-size: 12px !important;
}
.font13 {
	font-size: 13px !important;
}
.font14 {
	font-size: 14px !important;
}
.font15 {
	font-size: 15px !important;
}
.font16 {
	font-size: 16px !important;
}
.font17 {
	font-size: 17px !important;
	line-height:150%;
}
.font18 {
	font-size: 18px !important;
}
.font19 {
	font-size: 19px !important;
}
.font20 {
	font-size: 20px !important;
}
.font21 {
	font-size: 21px !important;
}
.font22 {
	font-size: 22px !important;
}
.font23 {
	font-size: 23px !important;
}
.font24 {
	font-size: 24px !important;
}
.font25 {
	font-size: 25px !important;
}
.font26 {
	font-size: 26px !important;
}
.font27 {
	font-size: 27px !important;
}
.font28 {
	font-size: 28px !important;
}
.font29 {
	font-size: 29px !important;
}
.font30 {
	font-size: 30px !important;
}
.font32 {
	font-size: 32px !important;
}
/* ----------------------------------------------------

    float

---------------------------------------------------- */
.fr {
	float: right !important;
}
.fl {
	float: left !important;
}
.clear {
	clear: both;
}
img {
	line-height: 0;
	padding: 0;
	margin: 0;
}
.clearfix:after {
	content: ".";
	display: block;
	clear: both;
	height: 0;
	visibility: hidden;
}
.clearfix {
	min-height: 1px;
}
* html .clearfix {
	height: 1px;/*¥*//*/
  height: auto;
  overflow: hidden;
  /**/
}

hr {
	height: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* ----------------------------------------------------
    clearfix の代用
    <div class="hr"><hr /></div>
---------------------------------------------------- */
.fv img{
  width:100%;
}
/* ヘッダー基本設定 */
.header {
  background-color: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  z-index: 1000;
}

.header-fixed {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
}

.header .inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  padding: 10px 20px;
  height: 80px;
  box-sizing: border-box;
}

/* ロゴ設定 */
.header .logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.header .logo img {
  height: 50px;
  width: auto;
}

/* ヘッダーボタンエリア */
.header-btn {
  display: flex;
  align-items: center;
  gap: 10px;
  height: auto;
}

/* ボタン共通設定 */
.header-btn > div {
  display: flex;
  align-items: center;
  height: auto;
}

.header-btn img {
  display: block;
  height: 50px;
  width: auto;
}

/* rolloverエフェクト */
.rollover {
  transition: opacity 0.3s ease;
}

.rollover:hover {
  opacity: 0.8;
}

/* レスポンシブ設定 */
.pc-item {
  display: block;
}

.sp-item {
  display: none;
}

/* スマホ版 */
@media screen and (max-width: 1024px) {
  .header .inner {
    height: 60px;
    padding: 0 15px; /* 上下パディングを0に */
  }
  
  .header .logo img {
    height: 35px;
  }
  
  .header-btn {
    gap: 5px;
    
  }
  
  .header-btn img {
    height: 45px; /* ヘッダー高さと同じに */
  }
  
  
  /* LINEボタンの余白なし設定 */
  .header-line.sp-item {
    display: flex;
    align-items: center;
    height: 60px; /* ヘッダー高さと同じ */
  }
  
  .header-line.sp-item a {
    display: flex;
    align-items: center;
    height: 100%;
    padding: 0; /* パディングを削除 */
    margin: 0; /* マージンを削除 */
  }
  
  .header-line.sp-item img {
    height: 60px; /* ヘッダー高さいっぱい */
    width: auto;
    object-fit: contain;
    display: block;
  }
}

/* より小さなスマホ画面 */
@media screen and (max-width: 640px) {
  /* スマホ版表示切り替え */
  .pc-item {
    display: none;
  }
  
  .sp-item {
    display: block;
  }
  
  .header .inner {
    height: 50px;
    padding: 0 ; /* 上下パディングを0に */
  }
  
  .header .logo img {
    height: 40px;
    padding: 0 4%;
  }
  
  .header-btn img {
    height: 50px; /* ヘッダー高さと同じ */
  }
  
  .header-line.sp-item {
    height: 50px;
  }
  
  .header-line.sp-item img {
    height: 50px;
  }
}
  @media screen and (max-width: 320px) {
 

  
  .header .inner {
    height: 35px;
    padding: 0 ; /* 上下パディングを0に */
  }
  
  .header .logo img {
    height: 30px;
    padding: 0 4%;
  }
  
  .header-btn img {
    height: 35px; /* ヘッダー高さと同じ */
  }
  
  .header-line.sp-item {
    height: 35px;
  }
  
  .header-line.sp-item img {
    height: 35px;
  }


}

/* ページコンテンツの上部マージン調整 */
body {
  padding-top: 80px;
}

@media screen and (max-width: 1024px) {
  body {
    padding-top: 60px;
  }
}

@media screen and (max-width: 640px) {
  body {
    padding-top: 50px;
  }
  @media screen and (max-width: 320px) {
    body{
      padding-top: 35px;
    }
  }
}

/* 追加：リンク要素のデフォルトスタイルをリセット */
.header-btn a {
  display: block;
  line-height: 1;
  padding: 0;
  margin: 0;
}



.slide{
	background: #4caf50;
	padding:40px 0 60px;
}
.slide h2{
	font-weight: bold;
	color:#fff;
	font-size: 1.4em;
	margin-bottom: 20px;
  padding:0 20px
}
.loopSliderWrap {

  top: 0;
  left: 0;
  height: 180px; /* 画像の実際の高さに合わせる */
  overflow: hidden;
  position: absolute;
}

.loopSlider {
  background-color: #4caf50;
  margin: 0 auto;

  height: 180px; /* 同じく画像高さに揃える */
  text-align: left;
  position: relative;
  overflow: hidden;
}

.loopSlider ul {
  margin: 0;
  padding: 0; /* padding-topを消す */
  height: 180px; /* 画像の高さに揃える */
  float: left;
  overflow: hidden;
}

.loopSlider ul li {
  margin: 0;
  padding:0 12px 0 0;
  width: 270px;
  height: 180px; /* 画像高さに合わせる */
  float: left;
  display: inline;
  overflow: hidden;
}
.loopSlider ul li:last-child { 
	padding-right: 0;
 }
.loopSlider ul li img {
  width: 100%;
  height: 100%; /* 親要素の高さにフィットさせる */
  object-fit: cover; /* 念のため比率維持したまま収める */
  display: block;
}
@media screen and (max-width: 640px) {
.slide{
	padding:20px 0;
}
.slide h2{
	font-size: 1em;
  font-size: 1em;
}
}
.campaign{
background: url(../images/campaign-bg.jpg);
padding:60px 0;
}
.campaign h2{
	font-weight: bold;
	font-size: 1.4em;
	color:#2e7d32;
	background: #fff;
	width:fit-content;
	margin:0 auto;
	padding:0 40px;
}
.campaign-content img{
	width:800px;
	max-width: 70%;
	margin-top: 40px;
}
@media screen and (max-width: 640px) {
	.campaign{
		padding:40px 0;
	}
	.campaign h2{
	font-size: 17px;
	padding:0 8px;
	}
	.campaign-content img{
	width:96%;
	max-width: 96%;
	margin-top: 20px;
}
}
.cta{
	background: #4caf50;
	padding:60px 0;
}
.cta-box{
	width:600px;
	max-width: 82%;
	background: #fff;
	padding:20px 40px;
	margin:0 auto;
}
.cta-title{
	width:500px;
  max-width: 100%;
	margin:0 auto;
}
.cta-title img{
	width:100%;
  
}
.cta-box h2{
	color:#00853c;
	font-weight: bold;
	margin: 10px 0;
}
.cta-box p{
	font-weight: bold;
}
strong{
	font-size: 1.2em;
}
.copy{
	display: flex;
	justify-content: center;
}
.copy-text{
	color:#00853c;
	font-weight: bold;
	background: #fffdb3;
	border: #00853c 2px solid;
	padding:4px 10px;
	margin:14px 10px;
	font-size: 22px;
}
.cta-text{
	color:#f15a24;
	font-weight: bold;
	font-size: 20px;
}
.cta-tel img{
	width:500px;
  max-width: 100%;
}
.cta-btn{
	display: flex;
	justify-content: center;
  width:100%;
}
.cta-line img,
.cta-mail img{
width:100%;
padding:10px;
}
@media screen and (max-width: 640px) {
	.cta{
	padding:40px 0;
}
.cta-box{
	width:90%;
 max-width: 90%;
	padding:4%;
	margin:0 auto;
}
.cta-title{
	width:100%;
	margin:0 auto;
}
.cta-title img{
	width:100%;
}

.cta-box p{
	font-weight: bold;
  font-size: 15px;
}
.cta h2{
  font-size: 15px;
}
.cta strong{
	font-size: 17px;
  font-weight: bold;
 
}
.copy{
	flex-direction: column;
	margin:8px;
}
.copy-text{
width:90%;

	padding:4px 6px;
	margin:4px auto;
	font-size: 16px;
}
.cta-text{
	color:#f15a24;
	font-weight: bold;
	font-size: 14px;
}
.cta-tel img{
	width:100%;
}
.cta-btn{
	flex-direction: column;
	margin:2% 0;
}
.cta-line img,
.cta-mail img{
width:80%;
padding:6px;
}
.cta-text2{
	font-size: 14px;
}
}
.area1{
	background: url(../images/area1-bg.jpg);
	background-size: 100%;
	background-attachment: fixed; 
	padding:40px 0 60px;
}
.area1-box{
	background: #f9f7d4;
	width:800px;
	max-width:90%;
	margin:60px auto 0;
	padding:40px 40px 60px;

	border-radius: 30px;
}
.area1 h2{
	width:100%;
	max-width: 400px;
	margin:0 auto;
}
.area1 h2 img{
	width:100%;
}
.area1-pic {
	width:400px;
	margin:20px auto;
}
.area1-pic img{
	width:400px;
} 
.area1-arrow{
  margin-top: -20px;
  text-align: center;
}
:root{
  --inner-green:#b7e084;   /* 内側のライトグリーン */
  --text-green:#0b6b2b;    /* 文字色(濃い緑) */
}
@media (max-width:640px){
  .area1{
    padding: 40px 0;
  }
.area1-box{
	width:90%;
	margin:20px auto 0;
	padding:40px 2%;
}
.area1-text{
font-size: 16px;
}
.area1 strong{
  font-size: 18px;
}
.area1 h2 img{
	width:100%;

}
.area1-pic {
	width:90%;
}
.area1-pic img{
	width:90%;
} 

}
/* 2列→スマホで1列 */
.worrys{
  display:grid;
  gap:18px;
  grid-template-columns:1fr;
}
@media (min-width:768px){
  .worrys{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}


/* 内側の緑のカプセル */
.worry__inner{
  position:relative;
  background:var(--inner-green);
  border-radius:50px;
  padding:22px 24px 22px 60px; 
	  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	  min-height:60px;
  display:flex;
  align-items:center; /* テキストを中央寄せ */
}

/* チェック画像（白丸＋緑枠入りのPNG想定） */
.worry__icon{
  position:absolute;
  left:20px;
  top:50%;
  transform:translateY(-50%);
  width:44px;      /* 画像の見た目に合わせて調整 */
  height:auto;
  display:block;
}

/* テキスト */
.worry__text{
  margin:0 auto;
  color:var(--text-green);
  font-weight:700;
  line-height:1.6;
  text-align:center;
  font-size:18px;

}
@media (max-width:640px){
  .worry__icon{
    width:30px;
  }
	.worry__inner{
padding:10px 24px 10px 60px; 
	}
  .worry__text{ font-size:16px; }
}


.area1-text{
	margin:40px auto 20px;
	text-align: center;
	font-weight: bold;
  line-height: 1.8;
}
.area1 p{
width:100%;
max-width: 500px;
margin:0 auto;
}
.area1 span img{
  width:100%;
}
@media (max-width:640px){
.area1-text{
	margin-top: 20px;
  font-size: 15px;
  line-height: 1.7;
  padding:0 20px;
}


}
.area2{
	position: relative;
	line-height: 1.8;
	font-weight: bold;
	padding:60px 20px ;
	background: #CEEF00;
background: linear-gradient(90deg,rgba(206, 239, 0, 1) 0%, rgba(145, 227, 89, 0.53) 100%);
}
ul{
	text-align: left;
	
}
.area2-box{
background: #0b6b2b;
max-width: 86%;
width:540px;
padding:20px 40px;
color:#fff;
margin:40px auto ;

position: relative;
}
.area2-pic{
	position: absolute;
	top:-10%;
	right: -8%;
}
.area2-pic img{
	width:80%;
}
.area2 .green{
	color:#0b6b2b;
	font-size: 1.2em;
}
.area2-image{
	margin:40px 0;
}
.area2-image img{
	max-width: 90%;
}
.area2-text3{
	color:#0b6b2b;
	width:600px;
	margin:0 auto 40px;
}
.area2-text3 ul{
	list-style: disc;
	margin-bottom: 8px;
}
small {
	font-size: 12px;
	line-height: 1.4;
	
}
.area2-copy{
  width:600px;
  margin:0 auto;
}
.area2-copy img{
  width:100%;
}
.area2-arrow{
width:200px;
margin:0 auto;

}
.area2-arrow img{

  width:100%;
}
@media screen and (max-width: 640px) {
	.area2{
		padding:40px 16px ;
		line-height: 1.7;
	
	}
	.area2-text1,.area2-text2{
text-align-last: left;
    font-size: 14px;
	}
	.area2-box{
		width:fit-content;
		max-width:fit-content;
		padding:6% 100px 6% 6%;
		line-height: 1.8;
    font-size: 14px;
    font-weight: normal;
	}
  .area2 li{
    padding:2.4% 0;
    line-height: 1.5;
  }
	.area2-pic{

	top:30%;
	right:-8%;
}
.area2-pic img{
width:50%;
}
.area2-text3{
	width:90%;
  font-size: 15px;
}
.area2-text3 li{
  margin-bottom: 6px;
}
p small{
	line-height: 1.0!important;
}
.area2-copy {

width: 100%;
}



.area2-arrow img{
  width:100%;
}

}
.area3{
	padding:60px 0;

}
h2 img{
	max-width: 85%;
}
.area3-text{
	margin:40px 10px 60px;
	font-weight: bold; 
}
.area3-box-wrapper{
	margin:0 auto;
}
.area3-box{
	position: relative;
	display: flex;
	padding:24px 36px;
	margin:0 auto 40px;
	width:800px;
	max-width: 80%;
	background: #e8f2d7;
 transition: transform 0.3s ease, box-shadow 0.3s ease;
 border-radius: 10px;
 align-items: center;
   box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.area3-box:hover{
    transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.reason{
	position: absolute;
	top:-30px;
	left:-40px;
  
}
.area3-pic{
	margin-right: 20px;
}
.area3-pic img{
  border-radius: 10px;
}
.area3-box-title{
text-align: center;
position: relative;	
color:#0b6b2b;
font-size: 1.1em;
margin-bottom: 10px;
font-weight: bold;
}
.border{
	border: 1px solid #0b6b2b;
	margin-bottom: 10px;
}
.area3-box-text{
  font-size: 16px;
}
.area3-box-text small{
	line-height: 1.4!important;
	font-size: 12px;;
}
@media screen and (max-width: 640px) {
	.area3{
	padding:20px 0px 20px;

}
.area3-text{
  font-size: 15px;
}
	.area3-box{
	flex-direction: column;
	padding:40px 20px;
	margin:0 auto 48px;
  max-width: 90%;
	}
	.reason{
		top:-30px;
		left:0;
	}
  .reason img{
    width:80%;
  }

	.area3-pic{
		margin:0 auto 20px;

	}
	.area3-pic img{
		width:100%;
	}
.area3-box-text{
  font-size: 15px;
}
}
.area4{
	background: url(../images/area4-bg.png) no-repeat center/cover ;
  clip-path: polygon(0 0, 100% 0, 100% 95%, 50% 100%, 0 95%);
height:fit-content;
	padding:60px 20px;
}
.area4 h2{
	width:100%;
max-width: 500px;
margin:0 auto 40px;
}

.area4 h2 img{
	max-width: 100%!important;
}
:root{
  --container-max: 1000px;
  --gap: 28px;
  --radius: 12px;
  --shadow: 0 6px 20px rgba(0,0,0,.08);
  --green: #3bb66b;
}

* { box-sizing: border-box; }

.voices__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.card {
  background: white;
  border-radius: 10px;
  padding: 20px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
}

.card:hover {
  transform: translateY(-5px);
}

.card__icon {
  flex-shrink: 0;
}

.card__icon img {
  width: 70px;


  margin-bottom: 15px;
}

.card__hdg {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 15px;
  color: #0b6b2b;
  line-height: 1.4;
  flex-shrink: 0;
}

.card__txt {
  font-size: 17px;
  line-height: 1.6;
  text-align: left;
  flex-grow: 1;
}
.area4-text{
	font-weight: bold;
	margin-top: 40px;
	color:#0b6b2b;
	font-size: 1.2em;
	letter-spacing: 2.4px;
}
.area4 .border{
	width:44%;
	margin:18px auto 40px;
	border: 1px dotted #0b6b2b;
}
/* PC表示（デスクトップ）: 3列→2列配置 */
@media screen and (min-width: 769px) {
  .card {
    width: calc(33.333% - 14px);
    max-width: 350px;
  }
  
  /* 4番目と5番目のカードを2列目に */
  .card:nth-child(4),
  .card:nth-child(5) {
    width: calc(50% - 10px);
  }
}

/* タブレット表示: 3列 */
@media screen and (min-width: 640px) and (max-width: 768px) {
  .voices__grid {
    gap: 15px;
    padding: 15px;
  }
  
  .card {
    width: calc(33.333% - 10px);
    padding:30px 15px;
  }

}

/* モバイル表示: 1列 */
@media screen and (max-width: 640px) {
  .voices__grid {
    gap: 15px;
    padding: 15px;
  }
  
  .card {
    width: 100%;
  }
    .card__hdg {
    font-size: 17px;
  }
  .card__txt {
    font-size: 15px;
  }
  .area4-text{
    font-size: 16px;
    margin-top: 20px;
  }
}
.area5{
	background: url(../images/area5-bg.jpg);
	background-attachment: fixed;
	padding:200px 0 80px; 
  margin-top: -130px;
}
:root{
  --green-100:#e7f7ef;
  --green-300:#bfe9d7;
  --ink:#2a2a2a;
  --shadow: 0 12px 30px rgba(0,0,0,.12);
  --radius: 14px;
  --maxw: 1200px;
}

/* 内側幅 */
.container{
  max-width: var(--maxw);
  margin-inline:auto;

}

/* 各ケース */
.case{
  width:1000px;
	max-width: 90%;
  backdrop-filter: blur(2px);

  padding: 28px 28px 36px;
  margin: 30px auto;
}
.case-label{
	white-space: nowrap;
}
.case-title {
  display: flex;
  align-items: stretch;
  
 font-weight: 700;
  line-height: 1.4;
}


.case-label {
  background-color: #2b772f;
  color: #fff;
  padding: 10px 60px 10px 40px ;
  clip-path: polygon(0 0, 80% 0, 100% 50%, 80% 100%, 0 100%);
  font-size: 22px;
  letter-spacing: 0.05em;
  display: flex;
  align-items: center;
}

.case-heading {
  color: #2b772f;
  border: 2px solid #2b772f;
  border-radius: 0 999px 999px 0;
  padding: 10px 40px 10px 80px;
  margin-left: -60px;
  font-size: 22px;
  background-color: #fff;
 
  display: flex;
  align-items: center;
	width:fit-content;
}


@media (max-width: 640px) {
  .case-title {
    flex-direction: row;
  }

  .case-label {
    font-size: 20px;
    padding: 10px 36px 10px 20px;
  }

  .case-heading {
    font-size: 20px;
    padding:6px 30px 6px 70px;
    line-height: 1.4;
  }
}


.case__gallery {
  display: flex;
 
  justify-content: center;  
  margin-bottom: 20px;
}
.case__card{
width:50%;
padding:20px ;
margin:20px 10px 10px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.case__card img{
  display:block;
  width:100%;
  margin:0 auto;
}
.before{
	background: #808080;
}
.after{
	background: #ffc68d;
}
.case__caption{
  color: var(--ink);
 
  padding: 20px 0;
	font-weight: bold;
	font-size: 17px;
}
.before .case__caption{
	color:#fff;
	font-weight: normal;
}

/* お客様の声（吹き出し + イラスト） */
.case__voice{
  position: relative;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 12px;
  align-items: center;
  margin-top: 8px;
}
.case__voice-illust{
  width:72px;
  height:auto;
  filter: drop-shadow(0 6px 16px rgba(0,0,0,.12));
}
.case__voice-text{
  background:#7dd8b3;
  border-radius: 12px;
  padding: 16px 18px;
  width:80%;
  position: relative;
  box-shadow: 0 8px 20px rgba(0,0,0,.10);
}
.case__voice-text::before{
  content:"";
  position:absolute;
  left:-20px; 
	top:36px;
  border:10px solid transparent;
  border-right-color:#7dd8b3;
}

@media (max-width: 640px) {
	.area5{
		 margin-top: -160px;
		 padding:200px 0 60px;
	}
	.case{
		margin:20px 0;
		max-width: 100%;
		padding:4% 2%;
	}
	.case-label,
	.case-heading{
		font-size: 16px;
		margin-bottom: 10px;
	}
  .case__gallery {
    flex-direction: column;
		margin: 0 auto;
  }
  .case__card {
    width:96%;
		margin:10px auto;
  }
	.case__caption{
  font-size: 14px;
  line-height: 1.6;
  padding: 10px 0 0 ;
  }
.case__voice-text{
width:96%;
font-size: 14px;
}
}
.more-cases {
  display: none;
  opacity: 0;
  transform: translateY(-10px);
  transition: all 0.4s ease;
}

/* 開いた状態 */
.more-cases.open {
  display: block;
  opacity: 1;
  transform: translateY(0);
}

/* ボタンデザイン */
.more-btn {
  display: block;
  margin: 40px auto 0;
  background-color: #2b772f;
  color: #fff;
  border: none;
  padding: 14px 80px;
 
  font-size: 16px;
  font-weight: 700;
  cursor: pointer;
  transition: 0.3s;
}

.more-btn:hover {
  background-color: #216225;
}
.case-point{
	background: #fff;
	border:2px solid #0b6b2b;
	width:fit-content;
	padding:20px 40px 30px;
	border-radius: 20px;
  margin-top: 20px;
}
.point{
	margin-bottom: 10px;
}
.check li{
	line-height: 1.8;
  
}
.check img{
	width:7%;
	margin-right: 2%;
	margin-bottom: 1%;
}
@media (max-width: 640px) {
	.point img{
		width:40%;
	}
	.case-point{
		padding:2% 4% 4%;
		margin:20px auto 0; 
		font-size: 16px;
	}
  .check li{
font-size: 14px;
  }
}
.area6{
	padding:60px 0;
	background: #CEEF00;
  background: linear-gradient(90deg,rgba(206, 239, 0, 1) 0%, rgba(145, 227, 89, 0.53) 100%);
	position: relative;
}
.worker-wrapper{
	width:800px;
	max-width: 90%;
	display: flex;
	padding:40px 0;
	justify-content: center;
	margin:0 auto;
}
.worker{
	width:70%;
margin-right: 10px;

}
.worker-image{
	margin-bottom: 20px;
}
.worker-image img{
	width:100%;
}
.worker ul{
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
}
.worker li{
	color:#fff;
	font-weight: bold;
	padding:4px 16px;
	background: #39b66b;
	margin:6px 10px;
	font-size: 1em;
white-space: nowrap;

}
.worker-pic{
	width:20%;
}
.worker-pic img{
	width:100%;
}
h4{
	font-weight: bold;
	border:3px solid #f7931e;
	padding:4px 24px;
	background: #fff;
	color:#f7931e;
	width:fit-content;
	margin:0 auto;
	font-size: 22px;
}
.area6-arrow{
	position: absolute;
	bottom:-115px;
	left:50%;
	transform: translate(-50%,-50%);
}
@media (max-width: 640px) {
.worker-wrapper{
	flex-direction: column;
	justify-content: center;
	padding:20px 0;
}
.worker{
	width:100%;
}
.worker-pic{
	margin:20px auto 0;
	width:24%;
}
.worker li{
	font-size: 16px;
	padding:2px 8px;
	margin:2px 4px;
}
h4{
	font-size: 18px;
}
}
  .video-container {
            display: flex;
            justify-content: center;
            gap: 40px;
            max-width: 800px;
            margin: 0 auto;
						padding:80px 0 60px
        }

        .video-item {
            flex: 1;
            max-width: 300px;
        }

        video {
            width: 100%;
            height: auto;
            border-radius: 10px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
        }

        /* スマホ対応 */
        @media (max-width: 640px) {
            .video-container {
                flex-direction: column;
                align-items: center;
            }
            
            .video-item {
                max-width: 250px;
            }
        }
.area7{
	background: url(../images/area7-bg.jpg);
padding:60px 0;
}				
.area7 h2 img{
	max-width: 90%;
}
.area7-text{
	font-weight: bold;
line-height: 1.7;
  padding:0 10px;
	margin-top: 40px;
}
         .cards-container {
             display: flex;
             justify-content: center;
           
            width: 1000px;
            gap: 24px;
           max-width: 90%;
             margin: 60px auto;
         }
 
         .service-card {
            width: 500px;
            border-radius: 20px;
         max-width: 90%;
            border-radius: 15px;
             overflow: hidden;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
         
             position: relative;
         }
 
         .card-personal {
            background: linear-gradient(135deg, #ff9500 0%, #ff7b00 100%);
           background: #ff8c42;
         }
 
         .card-corporate {
            background: linear-gradient(135deg, #0078d4 0%, #005a9f 100%);
            background: #1e88e5;
         }
 
         .card-header {
             text-align: center;
            padding: 40px 20px 0px;
            
             color: white;
         }
 
         .card-category {
             display: inline-block;
            background: rgba(255, 255, 255, 0.9);
            background: #ffffff;
             color: #333;
            padding: 8px 20px;
        
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 10px;
            padding: 6px 18px;
       
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 12px;
         }
				 .orange{
           color:#ff7b00;
				 }
				 .blue{
					color:#0078d4;
				 }
        .card-title {
            font-size: 20px;
            font-weight: bold;
            margin-bottom: 20px;
           
           font-weight: 600;
            margin-bottom: 15px;
            line-height: 1.3;
         }
 
         .card-image {
            width:100%;
            
    
             object-fit: cover;
         }
 
         .card-description {
             color: white;
             text-align: center;
            padding: 10px;
            font-size: 15px;
            line-height: 1.4;
         }
 
         .card-content {
           
            padding: 25px 20px;
          
         }
 

         .service-item {
             display: flex;
            align-items: center;
            align-items: flex-start;
            margin-bottom: 10px;
            font-size: 14px;
            color: #333;
            line-height: 1.4;
						background: #fff;
						padding:1.5% 4%;
		
        }

        .leaf-icon {
            width: 16px;
            height: 16px;
            margin-right: 10px;
            margin-top: 2px;
            flex-shrink: 0;
        }

        .maintenance-section {
            margin-top: 20px;
            padding-top: 18px;
    text-align: center;
        }
        .leaf-icon {
           width: 20px;
            height: 20px;
            margin-right: 12px;
            flex-shrink: 0;
        }


        .maintenance-title {
            font-size: 16px;
            font-weight: bold;
            margin-bottom: 10px;
            padding:0 10px;
             color: #fff;
         }
 
         .maintenance-item {
             display: flex;
            align-items: center;
        
            justify-content: center;
            align-items: flex-start;
            
            font-size: 14px;
             color: #fff;
            line-height: 1.4;
         }
 
         .bullet {
            width: 8px;
            height: 8px;
            width: 6px;
            height: 6px;
             border-radius: 50%;
            margin-right: 10px;
            margin-right: 8px;
            margin-top: 4px;
             flex-shrink: 0;
         }
 
        
@media (max-width: 768px) {
	.area7{
		padding:40px 0 20px;
	}
  .area7-text{
    font-size: 14px;
  }
.cards-container{
flex-direction: column;
}

         .card-header {
            padding: 24px 18px 0px;
         }
         .card-content{
          padding:10px 10px ;
         }
.service-card{
	width:100%;
	max-width: 100%;
}
.maintenance-section{
padding-top: 0;
margin:20px auto;
}
}
.area8{
	padding:60px 0;
	background: #fff8e1;
}
.area8 h2{
	width:200px;
	margin:0 auto;
	max-width: 40%;
}
.area8-wrapper{
	width:900px;
	max-width: 90%;
	display: flex;
	border-radius: 30px;
	border: 3px solid #f15a24;
	background: #fff;
	padding:40px;
	margin:40px auto;
	align-items: center;
}
.area8-text{
	width:60%;
}
.area8-text img{
	width:360px;
	max-width: 100%;
}
.area8-pic {
	width:40%;
}
.area8-pic img{
	width:100%;
}
.area8-text1,.area8-text2{
	margin:20px auto;
	
}
.area8 strong{
	font-size: 24px;
	color:#0b6b2b;
}
@media (max-width: 768px) {
.area8{
	padding:30px 0;
}
	.area8-wrapper{
	flex-direction: column;
	padding:20px 10px;
}
.area8-text,.area8-text1,.area8-text2{
	font-size: 14px;
	width:100%;
}
.area8-pic{
	width:60%;
}
}
.area9{
	padding:60px 0;
	background: #CEEF00;
background: linear-gradient(90deg,rgba(206, 239, 0, 1) 0%, rgba(145, 227, 89, 0.53) 100%);
}
.area9 h2{
		width:260px;
	margin:0 auto;
	max-width: 70%;
}
.area9 .border{
	border :1px dotted #0b6b2b;
	margin: 20px auto;
	width:300px;
}
.features__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
  max-width: 1200px;
  margin: 40px auto;
  padding: 20px;
}

.feature-card {
  background: white;
  border-radius: 15px;
  padding: 25px 20px;
  box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1);
  text-align: center;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.feature-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.15);
}

.feature-card__icon {
  flex-shrink: 0;
  margin-bottom: 15px;
}

.feature-card__icon img {
  width: 90px;
  height: 90px;
  object-fit: contain;
}

.feature-card__title {
  font-size: 16px;
  font-weight: bold;
  color: #2d5a27;
  margin-bottom: 12px;
  line-height: 1.4;
  flex-shrink: 0;
}

.feature-card__description {
  font-size: 14px;
  line-height: 1.6;

  flex-grow: 1;
  display: flex;
  align-items: center;
  text-align: left;
}

/* PC表示（デスクトップ）: 4列→3列配置 */
@media screen and (min-width: 769px) {
  .feature-card {
    width: calc(25% - 15px);
    max-width: 280px;
  }
  
  /* 5番目、6番目、7番目のカードを3列の2行目に */
  .feature-card:nth-child(5),
  .feature-card:nth-child(6),
  .feature-card:nth-child(7) {
    width: calc(33.333% - 14px);
  }
}

/* タブレット表示: 3列 */
@media screen and (min-width: 640px) and (max-width: 820px) {
  .features__grid {
    gap: 15px;
    padding: 15px;
  }
  
  .feature-card {
    width: calc(33.333% - 10px);
    padding: 20px 15px;
  }
  
  .feature-card__icon img {
    width: 80px;
    height: 80px;
  }
  
  .feature-card__title {
    font-size: 14px;
  }
  
  .feature-card__description {
    font-size: 12px;
  }
}

/* モバイル表示: 1列 */
@media screen and (max-width: 640px) {
	.area9{
		padding:60px 0 20px;
	}
  .features__grid {
    gap: 15px;
    padding: 15px;
  }
  
  .feature-card {
    width: 80%;
    padding: 25px 20px;
  }
  
  .feature-card__icon img {
    width: 80px;
    height: 80px;
  }
}
.area10{
	padding:60px 0;
}
.area10 h2{
	width:150px;
	max-width: 40%;
	margin:0 auto;
}
.price-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: stretch;
  gap: 20px;
  max-width: 1000px;
  margin: 40px auto 20px;
  padding: 20px;
}

.price-item {
  box-shadow: 0 3px 15px rgba(0, 0, 0, 0.1);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  display: flex;
  align-items: stretch;
  padding: 25px 20px;
  position: relative;
}

.price-item:hover {
  transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

.price-item__image {
  flex-shrink: 0;
  width: 100px;
  height: 100px;
  margin-right: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.price-item__image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.price-item__details {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.price-item__name {
  font-size: 20px;
  font-weight: bold;
  color: #2e7d32;
  margin-bottom: 8px;
  line-height: 1.3;
}

.price-item__cost {
  font-size: 18px;
  font-weight: bold;
  color: #d32f2f;
  margin-bottom: 12px;
  line-height: 1.2;
}

.price-item__info {
  font-size: 14px;
  line-height: 1.6;
  color: #333;
	font-weight: bold;
  flex-grow: 1;
}

/* PC表示（デスクトップ）とタブレット: 2列 - 互い違い配色 */
@media screen and (min-width: 640px) {
  .price-item {
    width: calc(50% - 10px);
    max-width: 450px;
  }
  
  /* 左列（1,3,5,7,9番目）- 奇数行は黄色背景 */
  .price-item:nth-child(4n+1) {
    background-color: #fffed7;
  }
  
  /* 左列（1,3,5,7,9番目）- 偶数行は緑色背景 */
  .price-item:nth-child(4n+3) {
    background-color: #eeffd9;
  }
  
  /* 右列（2,4,6,8,10番目）- 奇数行は緑色背景 */
  .price-item:nth-child(4n+2) {
    background-color: #eeffd9;
  }
  
  /* 右列（2,4,6,8,10番目）- 偶数行は黄色背景 */
  .price-item:nth-child(4n) {
    background-color: #fffed7;
  }
}

/* タブレット調整 */
@media screen and (min-width: 640px) and (max-width: 1024px) {
  .price-list {
    gap: 15px;
    padding: 15px;
    margin:20px auto;
  }
  
  .price-item {
    padding: 20px 15px;
  }
  
  .price-item__image {
    width: 90px;
    height: 90px;
    margin-right: 15px;
  }
  
  .price-item__name {
    font-size: 18px;
  }
  
  .price-item__cost {
    font-size: 15px;
  }
  
  .price-item__info {
    font-size: 13px;
  }
}

/* モバイル表示: 1列 - 通常の奇数偶数配色 */
@media screen and (max-width: 640px) {

  .price-list {
    gap: 15px;
    padding: 15px;
  }
  
  .price-item {
    width: 100%;
    padding: 20px 15px;
  }
  
  /* モバイルでは通常の奇数偶数配色 */
  .price-item:nth-child(odd) {
    background-color: #fffed7;
  }
  
  .price-item:nth-child(even) {
    background-color: #eeffd9;
  }
  
  .price-item__image {
    
    margin-right: 15px;
  }
  
  .price-item__name {
    font-size: 18px;
  }
  
  .price-item__cost {
    font-size: 15px;
  }
  
  .price-item__info {
    font-size: 14px;
  }
  .area10 h4{
    max-width: 96%;
    font-size: 15px;
    padding:4px 18px;
  }
}
.area10-customer{
  margin: 40px auto;
  max-width:96%;
  width:600px;
}
.area10-customer img{
  width:100%;
}
.green-circle {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background-color: #2e7d32;
  margin-bottom: 10px;
}

.vertical-lights {
  display: flex;
  flex-direction: column;
  align-items: center;
margin:0 auto;
  padding: 15px;
  border-radius: 10px;
  width: fit-content;
}
.area10-text-wrapper{
  width:500px;
  max-width: 90%;
  margin:0 auto;
  display: flex;
  align-items: center;
}
.area10-text{
  font-weight: bold;
  color:#0b6b2b;
  width:80%;
  margin-right: 10px;
  font-size: 17px;
}
.area10-pic{
  width:25%;
  min-width: 80px;
}
.area10-pic img{
  width:100%;
}
@media screen and (max-width: 640px) {
  .area10-customer{
  margin: 40px auto 20px;
}
.area10-text{
  font-size: 14px;
  line-height: 1.6;
}
}
.area11{
  padding:60px 0;
  background: url(../images/area11-bg.jpg);
}
.area11 h2{
  width:300px;
  max-width: 50%;
  margin:0 auto;

}
.area11 h4{
  position: relative;
  margin: 40px auto;
    padding-left: 70px;
}
.area11-pic{
  position: absolute;
  top:-50px;
  left:-40px;
  width:100px;
}
.area11-pic img{
  width:100%;
}
.flow-wrapper{
  width:600px;
  max-width: 90%;
  margin:60px auto 40px;
}
.flow{
  background: #fff;
  border-radius: 20px;
  display: flex;
  padding:20px 40px ;
  align-items: center;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
      transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.flow:hover{
    transform: translateY(-5px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}
.flow-pic{
  padding:0 20px;
   width:30%;
   min-width: 120px;
}
.flow-pic img{
  width:100%;
}
.flow-text{
  font-weight: bold;
  color:#0b6b2b;
  width:50%;
}
.area11-arrow{
  margin: 10px 0 20px;
}
.area11-arrow img{
  width:30px;
}
.area11 small{
  font-size: 15px;
  font-weight: normal;
  line-height: 1.2;
  
}
@media screen and (max-width: 640px) {
  .area11{
    padding:40px 0;
  }
  .area11-pic{

  top:-40px;
  left:-40px;
  width:100px;
}
  .flow{
    padding:10px 20px;
  }
  .flow-pic{
    padding:0 10px;
  }
.number img{
  width:30px;
}
.flow-text{
  font-size: 15px;
}
.area11-arrow{
  margin: 4px 0 10px;
}
.area11 small{
  font-size: 12px;
}
}
.area12{
  background: url(../images/area12-bg.jpg);
  padding:60px 0;
}
.area12-wrapper{
  background: #ffffffc2;
  border-radius: 30px;
  padding:40px;
  width:800px;
  max-width: 90%;
  margin:0 auto;
}
.area12 h2{
  font-weight: bold;
  color:#f15a24;
  font-size: 24px;
}
.tree{
  width:100%;
  margin-bottom: 20px;
}
.tree img{
  width:100%;
}
.area12-text{
  color:#0b6b2b;
  font-weight: bold;
  font-size: 16px;
}
@media screen and (max-width: 640px) {
.area12-wrapper{
padding:30px 16px;
}
.area12-text{
  line-height: 1.7;
  font-size: 14px;
}
}
.area13{
 padding:60px 20px;
 background: url(../images/area13-bg.jpg);
 background-size:cover; 
}
.area13 h2{
  color:#c1272d;
  font-weight: bold;
  background: #fff;
  font-size: 24px;
  padding:2px 20px;
  width:fit-content;
  margin:0 auto;
}
.area13 p{
  margin: 40px auto;
  font-size: 16px;
}

        .issues-container {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(5, 1fr);
            gap: 20px;
            justify-items: center;
        }

        .issue-tag {
            background: #006837;
            color: white;
            padding: 8px 16px;
            
            font-size: 18px;
            font-weight: 600;
            margin-bottom: 15px;
            white-space: nowrap;
            box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
        }

        .issue-image {
       width:200px;
            margin-bottom: 15px;
        }

        .issue-description {
            
            font-size: 16px;
            line-height: 1.6;
            text-align: left;
            max-width: 180px;
        }
        .issue-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            max-width: 200px;
            text-align: center;
            padding:20px 10px;
        }


        .issue-image {
            width: 180px;
            margin-bottom: 20px;
        }

  .area13-text{
    color:#006837;
    font-weight: bold;
    margin-top: 20px;
    padding: 0 10px;
  }
        @media (max-width: 1024px) {
            .issues-container {
                grid-template-columns: repeat(3, 1fr);
                gap: 0px;
            max-width: 80%;
            }

            .issue-item:nth-child(4),
            .issue-item:nth-child(5) {
                grid-column: span 1;
              
            }

            /* 4番目と5番目を中央に配置するため */
            .issue-item:nth-child(4) {
                grid-column: 1 / 2;
            
            
            }

            .issue-item:nth-child(5) {
                grid-column: 2 / 3;
            
            }

            .issue-tag {
                font-size: 18px;
                padding: 7px 14px;
            }

            .issue-image {
                width: 100%;
                
            }

            .issue-description {
                font-size: 16px;
            }
        }
 @media (max-width: 640px) {
  .area13{
    padding:40px 10px;
  }
 .area13 h2{
  font-size: 18px;
 } 
.area13 p{
  margin:20px auto;
  font-size: 14px;
  text-align: left;
}
    .issues-container {
        display: grid;
        grid-template-columns: repeat(2, 1fr); /* 1fr → 2frに変更 */
        grid-template-rows: auto auto auto;
        gap: 10px; /* 0px → 10pxに変更（任意） */
       width:100%;
       margin:0;
        justify-items: center;
        max-width: 100%;
    }

    /* 1番目と2番目：1行目 */
    .issue-item:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
    }

    .issue-item:nth-child(2) {
        grid-column: 2;
        grid-row: 1;
    }

    /* 3番目と4番目：2行目 */
    .issue-item:nth-child(3) {
        grid-column: 1;
        grid-row: 2;
    }

    .issue-item:nth-child(4) {
        grid-column: 2;
        grid-row: 2;
        margin-left: 0;
        margin-right: 0;
    }

    /* 5番目：3行目中央 */
    .issue-item:nth-child(5) {
        grid-column: 1 / 3;
        grid-row: 3;
        justify-self: center;
        margin: 0 auto;
    }

    .issue-item {
        padding: 10px 5px; /* 余白を調整 */
    }

    .issue-tag {
        font-size: 14px; /* 16px → 14pxに縮小 */
        padding: 6px 10px; /* パディングを縮小 */
        margin-bottom: 10px;
    }

    .issue-image {
        width: 120px; /* 150px → 120pxに縮小 */
        height: auto; /* heightの固定を削除 */
        margin-bottom: 10px;
    }

    .issue-description {
        font-size: 13px; /* 15px → 13pxに縮小 */
        line-height: 1.5;
    }
    .area13-text{
      font-size: 14px;
      line-height: 1.7;
    }
}

/* 超小型スマホ対応 (360px以下) */
@media (max-width: 360px) {
    .issue-tag {
        font-size: 12px; /* 14px → 12pxに縮小 */
        padding: 5px 8px;
    }

    .issue-image {
        width: 100px; /* 110px → 100pxに縮小 */
        height: auto;
    }

    .issue-description {
        font-size: 12px; /* 13px → 12pxに縮小 */
        max-width: 110px; /* 120px → 110pxに縮小 */
    }
}
        .area14{
          padding:60px 0 ;
        }
        .area14 h2{
          width:260px;
          margin:0 auto 40px;
          max-width: 50%;
        }
.qa-list{
  padding: 1% 0;;
}
        .qa-container {
	margin: 40px auto 0;
	max-width: 800px;
	width: 90%;
	padding-bottom: 40px;
}

.question-title {
	background: #7dd8b3;
	cursor: pointer;
	font-size: 18px;
	padding: 3% 12% 3% 10%;
	position: relative;
 color:#0b6b2b;
	font-weight: bold;
	line-height: 1.3;
}
.question-title:before {
	position: absolute;
	display: block;
	content: url(../images/area14-q.png) ;
	top: 50%;
	transform: translate(-50%, -50%);
	left: 5%;
	
}
.question-title:after {
	position: absolute;
	display: block;
	content: '';
	top: 30%;
	right: 5%;
	width: 14px;
	height: 14px;
	border-top: 2px solid #006837;
	border-right: 2px solid #006837;
	transform: rotate(135deg);
	transition: all .1s ease-in-out;
}
.question-title.open:after {
	transform: rotate(-45deg);
	top: 45%;
}
.answer-text {
	display: none;
	padding: 16px 4%;
	position: relative;
	background: #fff;
  border: 2px solid #7dd8b3;
	line-height: 1.4;
	margin-top: 0px;
	font-size: 16px;
	color: #333;
}
@media screen and (max-width: 1200px) {
	.qa-list {
			padding: 1% 0;
	}
	.qa-container {
			max-width: 76%;
		margin:0 auto;
	}
	.question-title:after {
			width: 10px;
			height: 10px;
	}
	.answer-text:before {
			font-size: 120%;
			font-weight: bold;
	}
}
@media screen and (max-width: 640px) {
	.qa-container {
			width: 90%;
			max-width: 90%;
padding-bottom: 0;
	}
	.qa-list {
			padding: 2% 0 ;
	}
	.question-title {
			font-size: 16px;
			padding: 4% 14% 4% 18%;
	}
	.question-title:before {
			left: 9%;
	}
	.answer-text {
			font-size: 14px;
			padding: 4% 5%;
			margin-top: 0px;
	}
	.answer-text p {
			padding-left: 50px;
	}
}
  :root {
      --bg: #ffffff;
      --text: #333333;
      --muted: #666666;
      --brand: #4caf50;
      --brand-light: #c8e6c9;
      --card-border: #a5d6a7;
      --card-hover: #e8f5e9;
      --focus: #81c784;
    }
   
  
    .area15 { 
      max-width: 980px;
      margin: 0 auto; 
      padding:60px 20px;
   
    }

    h2 { 
      font-size: 22px;
      
        letter-spacing: .02em; 
        font-weight: bold;
        color:#006837;
      }

      form { 
        background: #ecfaf0;
         border: 1px solid #ddd; 
         border-radius: 16px;
          padding: 40px; 
          box-shadow: 0 3px 10px rgba(0,0,0,.1);
          
         }
    fieldset { 
      border: 0;
       margin: 20px;
        padding: 0;
       }
    legend {
       font-weight: 700;
        margin: 20px 0 10px;
        color:#333;
       }
   
    .grid {
       display:grid;
         gap: 12px;
         }
    .grid.cols-3 { 
      grid-template-columns: repeat(3, minmax(0,1fr));
     }
    @media (max-width: 1024px){ 
      .grid.cols-3 { 
        grid-template-columns: repeat(2, minmax(0,1fr)); 
      }
     }
    @media (max-width: 640px){
    form{
      padding:40px 20px;
    }
       .grid.cols-3 { 
        grid-template-columns: 1fr; 
      }
          legend,.control label {
     font-size: 15px;
       }
     }

    .option-radio { 
      position: relative;
     }
    .option-radio input {
       position: absolute; 
       inset: 0;
        opacity: 0;
         pointer-events: none; }
    .option-box {
      display: grid;
       grid-template-columns: 56px 1fr;
        align-items: center;
         gap: 12px;
      background: hsl(143, 73%, 83%); 
      border: 2px solid var(--option-border);
      border-radius: 14px; 
      padding: 12px;
       cursor: pointer;
      transition: transform .08s ease, border-color .2s ease, box-shadow .2s ease, background .2s ease;
    }
    .option-box:hover { 
      opacity: 0.7;
       border-color: var(--focus); 
       transform: translateY(-1px); 
      }
    .option-box:focus-within { 
      outline: 2px solid var(--focus); 
      outline-offset: 2px;
     }
    .option-box .title {
       font-weight: 600;
       color:#006837;
       }
    .option-box .hint {
       font-weight: bold;
       font-size: 13px;
       }

    .option-radio input:checked + .option-box {
       border-color: var(--brand); 
       box-shadow: 0 0 0 3px rgba(76,175,80,.2); 
       background: var(--brand-light);
       }

    .icon { 
      width: 48px;
       height: 48px; 
       display: inline-block;
       background: #fff;
       border-radius: 50px;
       }
    .icon svg { 
      width: 100%;
       height: 100%;
        display: block;
       }

    .row { 
      display: grid;
       grid-template-columns: 1fr 1fr; 
       gap: 12px;
       }
   
    .control {
       margin: 12px 0;
       }
    .control label {
       display: block;
        font-weight: 600;
         margin-bottom: 6px;
         color:#333;
         }
    .control input[type="text"], 
    .control input[type="tel"], 
    .control input[type="email"], 
    .control textarea {
      width: 100%; padding: 12px 14px;
       border-radius: 10px; 
       border: 1px solid #ccc; 
       background: #fff;
        color: var(--text);
      transition: border-color .2s ease, box-shadow .2s ease;
    }
    .control textarea {
       min-height: 120px;
        resize: vertical;
       }
    .control input:focus, .control textarea:focus {
       border-color: var(--brand); 
       box-shadow: 0 0 0 3px rgba(76,175,80,.15);
        outline: none;
       }

    .note {
       color: var(--muted);
        font-size: 13px;
       }

    .actions {
       display: flex;
        justify-content: center; 
        margin-top: 30px;
       }
       .readonly{
        width:50%;
       height:200px;
       font-size: 14px;
       line-height: 1.4;
       margin-top: 20px;
       border-color: var(--brand); 
       }
    .btn-submit {
      width: 400px;
       max-width: 90%;
      padding: 18px 24px;
       font-size: 18px; 
       font-weight: 700;
      border-radius: 14px;
       border: none;
      background: #f7794c; 
      color: #fff;
      cursor: pointer; 
       box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
      transition: transform .1s ease, box-shadow .2s ease, filter .2s ease;
    }
    .btn-submit:hover { 
      filter: brightness(1.08); 
      box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2);
       transform: translateY(-1px);
       }
        @media (max-width: 680px){
          fieldset{
            margin:20px 0;;
          }
       .row { 
        grid-template-columns: 1fr;
        gap:8px;
       }
        .readonly{
width:100%;
       }
       }
       footer{
        background: #006837;
        padding:40px 0;
       }
       footer p{
        color:#fff;
        font-size: 12px;
       }
       .law{
        padding-bottom: 20px;
       }
       footer a{
        text-decoration: none;
        color:#fff;
        font-size: 12px;
        
       }
/* 下部固定ボタン */
.fixed-bottom-buttons {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100%;
  display: flex;
  z-index: 999;
  box-sizing: border-box; /* 追加 */
}

.fixed-bottom-buttons a {
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  transition: opacity 0.3s ease;
  overflow: hidden;
}

.fixed-bottom-buttons a:hover {
  opacity: 0.8;
}

.fixed-bottom-buttons img {
  width: 100%;
  object-fit: contain;
  display: block;
  max-width: 100%;
}

/* メールボタン（30%の幅） */
.btn-mail img{
  flex: 3;
}

/* 電話ボタン（70%の幅） */
.btn-tel img {
  flex: 7;
}

/* PC版では非表示 */
.sp-only {
  display: none;
}

/* スマホ版で表示 */
@media screen and (max-width: 640px) {
  .sp-only {
    display: flex;
  }
  
  /* 下部固定ボタン分のマージンをbodyに追加 */
  body {
    padding-bottom: 12%;
    overflow-x: hidden; /* 追加：横スクロール防止 */
  }
  
  html {
    overflow-x: hidden; /* 追加：横スクロール防止 */
  }
}

/* スマホ版で表示 */
@media screen and (max-width: 640px) {
  .sp-only {
    display: flex;
  }
  
  /* 下部固定ボタン分のマージンをbodyに追加 */
  body {
    padding-bottom: 12%; /* ボタン高さに合わせて調整 */
    
  }
}


	/*特商法*/
	.law-title{
		font-size: 24px;
		padding:20px 0;
		color:#006837;
		font-weight: bold;
	}
	table{
		width:600px;
		max-width:90%;
		margin:0 auto;
		padding-bottom: 60px;
		border:2px solid #fff;
		background:#dbfdda;
	}
	td{
	width:10%;
	border: #fff 2px solid;
	padding:2%;
	
	color: #333;
		text-align: left;
	}
	.bold{
		font-weight: bold;
	}
  .totop{
    margin-top: 40px;
  }
	@media screen and (max-width: 640px) {
		.law-title{
			font-size: 20px;
		
			padding:20px 0 ;
		}
		table{
			max-width: 96%;
			font-size: 12px;
			line-height: 1.4;
			margin:0 auto;
		}
		td{
			width:16%;
			
		}
	}