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

#header_service {
width:100%;
height: 105vh;
max-width:2560px;
margin:0 auto;
}
.service-hero{
background-size: cover;
background-position: center;
background-repeat: no-repeat;
}

.header_service_top{
display:flex;
justify-content:space-between;
align-items:flex-start;
width:100%;
margin: 0px auto 0px auto;
padding:0px;
box-sizing: border-box;
}

.header_service_top_in_left{
display:flex;
}

/* サイトロゴ */
.service_h_logo{
background-color: #ffffff;
border-radius: 0 0 20px 20px;
display:flex;
align-items:center;
text-align:left;
width:145px;
margin:0px auto;
padding:20px 10px;
}
.service_h_logo a{
margin:0px auto;
}
.service_h_logo img{
width:90%;
margin:0 auto;
}
.service_h_logo h1{
font-size:14px;
color:#fff;
font-weight:normal;
}

.service_nav_list{
width: 33.3%;
display: flex;
gap: 10px;
align-items: flex-start;
margin: 5% 0 0 0;
}

.service_nav_list li{
writing-mode: vertical-lr;
text-orientation: upright;
display: inline-block;
letter-spacing: 5px;
font-size: 14px;
line-height: 14px;
font-weight: 500;
}

.s_slide-bg {
position: relative;
display: inline-block;
padding: 3px 10px;
color: #000000;
text-decoration: none;
overflow: hidden;
z-index: 0;
}

.s_slide-bg::before {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 0;              /* ← 高さゼロから */
background: #fff;       /* 好きな色に変更OK */
opacity: 0;             /* ← 最初は透明 */
transition:
height 0.7s ease,
opacity 0.7s ease;    /* ← フェードイン */
z-index: -1;
}

.s_slide-bg:hover::before {
height: 100%;   /* ← 上 → 下に広がる */
opacity: 1;    /* ← ふわっと現れる */

}
.s_slide-bg:hover{
color: #3f2d21;
}


.service_h_links{
margin: 0px 0px 0px 0px;
display:flex;
background-color: #ffffff;
border-radius: 0 0 0px 20px;
padding:20px;
}
.service_h_links_in{
display:flex;
align-items:flex-end;
}

.service_h_tel{
margin: 0 auto;
text-align: center;
}

.service_h_tel p{
font-size:12px;
line-height:12px;
text-align: center;
margin: 0 auto 5px auto;
}
.service_h_tel p span{
text-align: center;
font-size:12px;
line-height:12px;
font-weight:500;
color:#593c28;
letter-spacing:1px;
}
.service_h_tel div{
line-height:36px;
display:flex;
align-items:center;
font-size:36px;
letter-spacing: 2px;
font-family: 'arial',sans-serif;
font-weight:600;
color:#593c28;
}
.service_h_tel div img{
width: 30px;
margin: 0px 10px 0px 0px;
}

.service_h_sns{
display:flex;
align-items:center;
justify-content: flex-end;
margin: 0 0 5px 0;
text-align: center;
}

.service_h_sns p{width: 30px;margin: 0px 0 0 10px;}
.service_h_sns p img{width: 100%;}
.service_h_sns a{
-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;
}
.service_h_sns a:hover{opacity:0.6; }


/* ---title---*/

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

.page_service_top01{
width: 1100px;
margin: 0 auto;
padding:0 0 5% 0;
border-bottom: 2px solid #593c28;
display:flex;
align-items:center;
justify-content: space-between;
}

.page_service_top01_title{
width: 40%;
}
.page_service_top01_title h2{
text-align:left;
font-size:36px;
line-height:36px;
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:left;
font-size:13px;
line-height:13px;
margin: 5% 0 0 0;
}


.page_service_top01_navi{
  width: 55%;
  display: flex;
  justify-content: flex-end;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page_service_top01_navi li{
  margin-left: 15px;
  flex: 0 0 auto;
}

.page_service_top01_navi li p{
  margin: 0;
}

.page_service_top01_navi li p a{
  display: flex;
  justify-content: flex-start;
  align-items: center;
  box-sizing: border-box;

  writing-mode: vertical-rl;
  -webkit-writing-mode: vertical-rl;
  text-orientation: mixed;

  font-size: 16px;
  line-height: 16px;
  letter-spacing: 5px;
  font-weight: 500;

  background-color: #f3f1f0;
  border-radius: 100px;
  min-height: 300px;
  min-width: 70px; /* Safari安定用。必要に応じて調整 */
  padding: 25px 25px 35px 25px;

  background-image: url("../images/service_navi_icon.png");
  background-repeat: no-repeat;
  background-size: 10px;
  background-position: bottom 20px center;

  transition: 0.3s ease-in-out;
}

.page_service_top01_navi li p a:hover{
  opacity: 0.6;
}


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

/* 斜め線つき見出し（逆ハの字） */
.title-slash{
--color:#3f2d21;
--size:32px;
--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:22px;
--len:18px;
--gap:12px;
}
}

.page_service_top02_view{width: 100%;margin: 5% 0 0 0;}
.page_service_top02_view img{width: 90%;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: 1100px;
  margin: 0 auto;

}

/* =========================================
   HERO
========================================= */
.life-support__hero{
  display:flex;
  justify-content: space-between;
  padding:0;
}

.life-support__heroMedia{
width: 55%;
}
.heroStrip img{
  width: 100%;
  object-fit: cover;
  display: block;
}

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

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

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

/* ボタン */
.btn-consult{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 12px;

  padding: 18px 42px;
  border-radius: 999px;
  background: #3f2d21;
  color: #fff;
  text-decoration: none;
  font-weight: 500;
  font-size: 16px;
  line-height: 1;
  margin: 10% 0 0 0;
  box-sizing: border-box;

  writing-mode: horizontal-tb;
  -webkit-writing-mode: horizontal-tb;
  text-orientation: mixed;

  -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;

  transform: translateZ(0); /* Safari再描画対策 */
}

.btn-consult:hover{
  opacity: 0.6;
}

.btn-consult__label{
  display: block;
  line-height: 1.2;
  writing-mode: horizontal-tb;
  -webkit-writing-mode: horizontal-tb;
}

.btn-consult__icon{
  width: 25px;
  flex: 0 0 25px;
  line-height: 0;
}

.btn-consult__icon img{
  display: block;
  width: 100%;
  height: auto;
}


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

/* 背景ライン（カードエリアだけに敷く） */
.life-support__bgLine{
  position: absolute;
  left: 50%;
  top: -200px;                 /* ★ヒーローの直下から出したい位置はここで調整 */
  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: 50px;
}

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

.serviceCard__body{
width: 40%;
}

.serviceCard__title{
padding:0 0 15px 0;
margin: 0 0 0px;
font-size: 28px;
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: 32px;
display: inline-block;
vertical-align:text-bottom;
margin: 0 0px 0 0;
flex-shrink: 0;       /* アイコンを縮めない */
}

.serviceCard__text{
  margin:30px 0;
}

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

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

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



/* ---s_service---*/
.box_in_s{
width:90%;
max-width:1100px;
padding:5% 0 0 0;
margin: 0px auto;
text-align: left;
}

.s_service{
max-width:1100px;
margin:50px auto 0px auto;
}

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

/* ▼ 通常状態 */
.s_service_in div {
width: 19%;
border: 5px solid #593c28;
border-radius: 25px;
padding: 20px;
box-sizing: border-box;
margin: 0 0 20px 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: 18px;
line-height: 1.7;
letter-spacing: 1px;
font-weight: 500;
color:#593c28;
margin:0px auto 0px auto;
}