/* ---service配下Header----*/

#header_service {
width:100%;
margin:0 auto;
  position: relative;
  z-index: 999;
}
.service-hero{
height:50vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
@media screen and (min-width:600px) { 
.service-hero{
height:70vh;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}
}

.header_service_top{
box-sizing: border-box;
width:100%;
text-align:center;
position: fixed;
z-index: 2;
}

/* サイトロゴ */
.service_h_logo{
background-color: #ffffff;
border-radius: 0 0 10px 0px;
width: 50px;
margin:0px 0px 0px 0px;
padding:10px 10px;
}
.service_h_logo img{
display: inline-block;
width: 100%;
margin:0px auto;
}

@media screen and (min-width:600px) { 
/* サイトロゴ */
.service_h_logo{
background-color: #ffffff;
border-radius: 0 0 10px 0px;
width: 80px;
margin:0px;
padding:20px 10px;
}
.service_h_logo img{
display: inline-block;
width: 100%;
margin:0px auto;
}
}

.s-fade-wrap{
width:100%;

}

.mv_none{
padding:0px 0 0 0;
}


@media screen and (min-width:600px) { 
.mv_none{
padding:0px 0 0 0;
}
}


/* ハンバーガーアイコンの設置スペース */
.drawer_open {
display: flex;
height: 60px;
width: 60px;
justify-content: center;
align-items: center;
position:absolute;
top:5px;
right:0;
z-index: 100;/* 重なり順を一番上にする */
cursor: pointer;
}

/* ハンバーガーメニューのアイコン */
.drawer_open span,
.drawer_open span:before,
.drawer_open span:after {
content: '';
display: block;
height: 2px;
width: 25px;
border-radius: 3px;
background: #593c28!important;
transition: 0.5s;
position: absolute;
}

/* 三本線の一番上の棒の位置調整 */
.drawer_open span:before {
bottom: 8px;
}
/* 三本線の一番下の棒の位置調整 */
.drawer_open span:after {
top: 8px;
}
/* アイコンがクリックされたら真ん中の線を透明にする */
#drawer_input:checked ~ .drawer_open span {
background: rgba(255, 255, 255, 0)!important;
}
/* アイコンがクリックされたらアイコンが×印になように上下の線を回転 */
#drawer_input:checked ~ .drawer_open span::before {
bottom: 0;
transform: rotate(45deg);
}
#drawer_input:checked ~ .drawer_open span::after {
top: 0;
transform: rotate(-45deg);
}

/* ---title---*/

.page_tpl_service_box{
width:100%;
padding:0 0 2.5% 0;
}

.page_service_top01{
width: 90%;
margin: 0 auto;
padding:0 0 5% 0;
border-bottom: 2px solid #593c28;
}

.page_service_top01_title{
width:100%;
}
.page_service_top01_title h2{
text-align:center;
font-size:24px;
line-height:24px;
letter-spacing: 5px;
font-weight:600;
font-family:
"Hiragino Mincho ProN",   /* macOS */
"Hiragino Mincho Pro",
"MS PMincho",             /* Windows（明朝）*/
"MS Mincho",
"Yu Mincho",              /* Windows 10 以降 */
"YuMincho",
"Noto Serif JP",          /* Android / Web用 */
serif;                    /* 最終的に明朝系に寄せる */
}
.page_service_top01_title p{
text-align:center;
font-size:13px;
line-height:13px;
margin: 2.5% 0 0 0;
}

.page_service_top01_navi{
width:100%;
margin:7.5% 0 0 0;
}
.page_service_top01_navi li{
margin: 0 0 2.5% 0;
}
.page_service_top01_navi li p{
text-align:left;
font-size:14px;
line-height:14px;
letter-spacing:3px;
font-weight:500;
}
.page_service_top01_navi li p a{
width:100%;
box-sizing: border-box;
display: block;
background-color: #f3f1f0;
border-radius: 100px;
background-image:url("../images/service_navi_icon.png");
background-repeat:no-repeat;
background-size:10px;
background-position:center right 20px;
padding: 25px;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.page_service_top01_navi li p a:hover{opacity:0.6; }



.page_service_top02{
width: 90%;
margin: 0 auto;
padding:10% 0;
border-bottom: 2px solid #593c28;
}

/* 斜め線つき見出し（逆ハの字） */
.title-slash{
  --color:#3f2d21;
  --size:28px;
  --stroke:3px;
  --len:26px;
  --gap:18px;
  --tilt:60deg;

  display:flex;
  align-items:center;
  justify-content:center;
  gap: var(--gap);
  margin:0;
  color:var(--color);
  font-size:var(--size);
  font-weight:600;
  letter-spacing:.06em;
  line-height:1.2;
  text-align:center;
}

.title-slash::before,
.title-slash::after{
  content:"";
  width: var(--len);
  height: var(--stroke);
  background: var(--color);
  border-radius: 999px;
  flex: 0 0 auto;
}

/* ★ ここが重要：逆ハの字 */
.title-slash::before{
  transform: rotate(var(--tilt));      /* 左：＼ */
}
.title-slash::after{
  transform: rotate(calc(var(--tilt) * -1)); /* 右：／ */
}

.title-slash > span{
  display:inline-block;
}

/* スマホ */
@media (max-width: 480px){
  .title-slash{
    --size:18px;
    --len:18px;
    --gap:12px;
  }
}

.page_service_top02_view{width: 100%;margin: 5% 0 0 0;}
.page_service_top02_view img{width:100%;margin: 0 auto;}


.page_service_top03{

}


/* =========================================
   Life Support 全体
========================================= */
.life-support{
  position: relative;
  background: #fff;
  padding: 5% 0;
  overflow: hidden;
}
.life-support::after{
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 120px; /* フェードの高さ：調整可 */
  background: linear-gradient(
    to bottom,
    rgba(255,255,255,0),
    rgba(255,255,255,1)
  );
  pointer-events: none;
}
.life-support__inner{
  width:90%;
  margin: 0 auto;

}

/* =========================================
   HERO
========================================= */
.life-support__hero{padding:0;}

.life-support__heroMedia{width:100%;}
.heroStrip{width:100%;}
.heroStrip img{width: 100%;}

.life-support__heroBody{
width:100%;
}
/* 右：テキスト */
.life-support__title{
  margin:5% 0 0 0;
  font-size: 18px;
  line-height: 2;
  letter-spacing:3px;
  font-weight: 500;
  color: #3f2d21;
}

.life-support__lead{
  margin: 5% 0 0;

}
.life-support__lead p{
  font-size: 14px;
  line-height: 2.0;
  color: #5a4a40;
  margin: 2.5% 0 0;
  }

/* ボタン */
.btn-consult{
width: 100%;
box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 12px;
  padding:5% 0%;
  border-radius: 999px;
  background: #3f2d21;
  color: #fff;
  text-decoration: none;
  font-weight:500;
  font-size: 16px;
  margin:10% 0 0 0;
-webkit-transition: 0.3s ease-in-out;
-moz-transition: 0.3s ease-in-out;
-o-transition: 0.3s ease-in-out;
transition: 0.3s ease-in-out;
}
.btn-consult:hover{
opacity:0.6;
}

.btn-consult__label{
}
.btn-consult__icon{width: 25px;}
.btn-consult__icon img{width: 100%;}


/* =========================================
   CARDS WRAP（ここから下だけ背景ライン）
========================================= */
.life-support__cardsWrap{
  position: relative;
  margin-top: 100px;
  padding-top:0px;  /* hero直下に少し余白 */  
}

/* 背景ライン（カードエリアだけに敷く） */
.life-support__bgLine{
  position: absolute;
  left: 50%;
  top: -80px;                 /* ★ヒーローの直下から出したい位置はここで調整 */
  transform: translateX(-50%);
  width: min(2100px, 200vw);  /* ★横幅を広めに */
  height: auto;
  pointer-events: none;
  user-select: none;
  z-index: 0;                 /* カードより後ろ */
}

/* カードは背景より前面 */
.life-support__cards{
  position: relative;
  z-index: 2;
  display: grid;
  gap: 30px;
}

/* =========================================
   SERVICE CARD
========================================= */
.serviceCard{
  padding:5%;
  width: 100%;
  border-radius: 20px;
  background: #f3f1ec;
  box-sizing: border-box;
}

.serviceCard__body{
width:100%;
}

.serviceCard__title{
padding:0 0 15px 0;
margin: 0 0 0px;
font-size: 18px;
line-height: 1.5;
letter-spacing:3px;
font-weight: 500;
color: #3f2d21;
border-bottom: 2px dotted #3f2d21;
display: flex;
align-items: center;
gap: 0.5em;           /* アイコンと文字の間隔 */
}

.serviceCard__title img{
width: 26px;
display: inline-block;
vertical-align:text-bottom;
margin: 0 0px 0 0;
flex-shrink: 0;       /* アイコンを縮めない */
}

.serviceCard__text{
  margin:20px 0;
}

.serviceCard__text p{
  font-size: 14px;
  line-height: 2;
  color: #5a4a40;
    margin:15px 0;
}
.serviceCard__text p span{
font-weight: 600;
color:#cc0000;
}

.serviceCard__media{
  margin: 0;
  width: 100%;
}

.serviceCard__media img{
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  display: block;
  border-radius: 15px;
}



/* ---s_service---*/

.box_in_s{
width:90%;
padding: 10% 0 0% 0;
margin: 0px auto;
text-align: left;
}

.s_service{
width:100%;
margin:7% auto 0 auto;
}

.s_service_in{
display:flex;
justify-content:space-between;
flex-wrap: wrap;
margin:0px auto 0px auto;
}

/* ▼ 通常状態 */
.s_service_in div {
width: 48%;
border: 5px solid #593c28;
border-radius: 25px;
padding: 20px;
box-sizing: border-box;
margin: 0 0 5% 0;
transition: background-color 0.3s ease; /* ← これが重要 */
}

/* ▼ ホバーしたときの背景 */
.s_service_in div:hover {
background-color:#f2f1ec; /* ← 少し明るくなる */
}

/* ▼ 通常の画像 */
.s_service_in div img {
width: 90%;
margin: 0 auto;
transition: transform 0.3s ease;
}

/* ▼ ホバー時に画像を拡大 */
.s_service_in div:hover img {
transform: scale(1.08);
}

/* 枠内に収めたい場合はこの1行も有効 */
.s_service_in div {
overflow: hidden;
}


.s_service_in div img{
width: 90%;
margin:0px auto 0px auto;
}
.s_service_in div p{
text-align: center;
font-size: 14px;
line-height: 1.7;
letter-spacing: 1px;
font-weight: 500;
color:#593c28;
margin:0px auto 0px auto;
}

.grecaptcha-badge {
    visibility: hidden;
}