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

/* =========================================
  お客様の声：h2（normal/h2_illust）調整
  ・センター寄せ
  ・下線なし
  ・右側のイラスト（dog/cat等）は右に残す
========================================= */

/* セクション見出しをセンター寄せに */
section h2.normal{
  width: 100%;
  max-width: none;       /* 既存の max-width を解除 */
  margin: 0 auto;
  padding: 0 90px;       /* 右イラスト分の余白（必要に応じて調整） */
  text-align: center;
  position: relative;
  display: block;
	border-bottom: none;	/*下線の幅、線種、色*/
}

/* 下線を消す（normalの見出しの下線だけ） */
section h2.normal::after{
  content: none !important;
}
/* h2直下の説明文も中央寄せにしたい場合（不要なら消してOK） */
section h2 + p{
  text-align: center;
}

/* スマホでは余白を減らす */
@media (max-width: 900px){
  section h2.normal{
    padding: 0 70px;
  }
}
@media (max-width: 480px){
  section h2.normal{
    padding: 0 56px;
  }
}

/* =========================================
  お客様の声：見た目改善ワンセット（追記用）
  既存HTMLは変更なしでOK
========================================= */

/* ---------- 見出し（ページタイトル） ---------- */
#service{
  padding: 70px 0 30px;
  text-align:center;
}

#service h2{
  font-size: 36px;
  letter-spacing: .06em;
  margin: 0;
  position: relative;
  display: inline-block;
  padding-bottom: 12px;
}

#service h2 span{
  display:block;
  font-size: 12px;
  letter-spacing: .18em;
  margin-top: 8px;
  opacity: .7;
}

#service h2::after{
  content:"";
  position:absolute;
  left:50%;
  bottom:0;
  transform:translateX(-50%);
  width: 72px;
  height: 3px;
  border-radius: 999px;
  background: rgba(180,120,200,.35);
}

/* ---------- セクション全体の余白と背景差 ---------- */
section{
  padding: 50px 0;
}

/* 2カラム部分を「見た目の箱」にする */
.list-grid1-parts_voice{
  display:grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  margin-top: 18px;
}

/* セクション説明文（h2直下のp） */
section > p{
  max-width: 980px;
  margin: 10px auto 0;
  line-height: 1.9;
  opacity: .85;
}

/* セクション毎にうっすら背景（今の色設計を壊さない） */
section:nth-of-type(2){
  background: linear-gradient(180deg, rgba(240,248,255,.75), rgba(255,255,255,0));
}
section:nth-of-type(3){
  background: linear-gradient(180deg, rgba(255,246,236,.75), rgba(255,255,255,0));
}
section:nth-of-type(4){
  background: linear-gradient(180deg, rgba(242,255,246,.75), rgba(255,255,255,0));
}
section:nth-of-type(5){
  background: linear-gradient(180deg, rgba(255,252,229,.75), rgba(255,255,255,0));
}
section:nth-of-type(6){
  background: linear-gradient(180deg, rgba(248,242,255,.75), rgba(255,255,255,0));
}

/* ---------- カード：立体感・吹き出し感 ---------- */
.list-parts{
  background: #fff; /* 既存bg_◯◯がある場合は後ろで調整 */
  border-radius: 18px;
  padding: 26px 26px 24px;
  box-shadow: 0 14px 34px rgba(0,0,0,.06);
  border: 1px solid rgba(0,0,0,.05);
  position: relative;
  overflow: hidden;
  transition: transform .18s ease, box-shadow .18s ease;
}

.list-parts:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 46px rgba(0,0,0,.09);
}

/* 上部に“薄い帯”を作って上品に（色は各bg_*で上書き） */
.list-parts::before{
  content:"";
  position:absolute;
  top:0;
  left:0;
  right:0;
  height: 10px;
  background: rgba(180,120,200,.20);
}

/* 吹き出しのしっぽ（控えめ） */
.list-parts::after{
  content:"";
  position:absolute;
  bottom:-14px;
  left: 46px;
  border-width: 14px 14px 0 14px;
  border-style: solid;
  border-color: #fff transparent transparent transparent;
  filter: drop-shadow(0 8px 10px rgba(0,0,0,.06));
}

/* h3（声の見出し） */
.list-parts h3{
  font-size: 18px;
  margin: 0 0 10px;
  line-height: 1.5;
}

/* 本文 */
.list-parts .text-parts p{
  margin: 0;
  line-height: 1.95;
  font-size: 15px;
}

/* 長文でも読みやすいよう、行幅を若干抑える */
.list-parts .text-parts{
  max-width: none;
}

/* ---------- 既存の bg_* クラスを “上品な薄色” に寄せる ---------- */
/* 既存bg_*がすでにある場合、これで上書きされます（嫌なら外してOK） */
.bg_blue{   background: rgba(235,245,255,.85); }
.bg_orange{ background: rgba(255,242,230,.85); }
.bg_green{  background: rgba(236,255,244,.85); }
.bg_yellow{ background: rgba(255,252,224,.88); }
.bg_purple{ background: rgba(246,240,255,.85); }

/* 帯色も合わせる（カード上部の帯） */
.bg_blue::before{   background: rgba( 80,150,220,.28); }
.bg_orange::before{ background: rgba(240,150, 60,.25); }
.bg_green::before{  background: rgba( 80,190,140,.22); }
.bg_yellow::before{ background: rgba(220,190, 60,.22); }
.bg_purple::before{ background: rgba(170,120,220,.22); }

/* 吹き出しのしっぽも背景色に合わせる */
.bg_blue::after{   border-color: rgba(235,245,255,.85) transparent transparent transparent; }
.bg_orange::after{ border-color: rgba(255,242,230,.85) transparent transparent transparent; }
.bg_green::after{  border-color: rgba(236,255,244,.85) transparent transparent transparent; }
.bg_yellow::after{ border-color: rgba(255,252,224,.88) transparent transparent transparent; }
.bg_purple::after{ border-color: rgba(246,240,255,.85) transparent transparent transparent; }

/* ---------- セクションh2を“見出しらしく” ---------- */
/* 既存の .normal .h2_illust を尊重しつつ、余白と下線を追加 */
section h2{
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 20px;
  position: relative;
}

section h2 + p{
  padding: 0 20px;
}

/* セクション見出しの薄い区切り線 */
section h2::after{
  content:"";
  display:block;
  margin-top: 12px;
  height: 1px;
  background: rgba(0,0,0,.10);
}

/* ---------- レスポンシブ ---------- */
@media (max-width: 900px){
  .list-grid1-parts_voice{
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .list-parts{
    padding: 22px 18px 20px;
  }
  .list-parts::after{
    left: 34px;
  }
  #service h2{
    font-size: 30px;
  }
}

@media (max-width: 480px){
  #service{
    padding: 56px 0 22px;
  }
  #service h2{
    font-size: 26px;
  }
  .list-parts h3{
    font-size: 17px;
  }
  .list-parts .text-parts p{
    font-size: 14px;
  }
}

/* ふわっと表示（CSSのみ・対応ブラウザではスクロール連動） */
@media (prefers-reduced-motion: no-preference){
  section{
    opacity: 0;
    transform: translateY(18px);
    transition: opacity .8s ease, transform .8s ease;
    will-change: opacity, transform;

    /* 対応ブラウザでだけ発動（未対応でも普通に表示される） */
    animation: voiceFade linear both;
    animation-timeline: view();
    animation-range: entry 10% cover 25%;
  }

  @keyframes voiceFade{
    to{
      opacity: 1;
      transform: translateY(0);
    }
  }
}

/* h2右端イラストが消えた対策 */
h2.h2_illust{
  overflow: visible !important; /* これで切れてたら復活 */
}

/* もし疑似要素でイラスト出しているなら、消してしまってないか確認用 */
h2.h2_illust::before,
h2.h2_illust::after{
  display: block;
}

.list-parts{
  position: relative !important;
  overflow: visible !important;
}

.list-parts::after{
  content:"" !important;
  position:absolute !important;
  bottom:-14px !important;
  left:46px !important;
  border-width:14px 14px 0 14px !important;
  border-style:solid !important;
  border-color:#fff transparent transparent transparent !important;
}
/* しっぽの色をカード背景に合わせる（最終上書き） */
.bg_blue::after{
  border-color: rgba(235,245,255,.85) transparent transparent transparent !important;
}
.bg_orange::after{
  border-color: rgba(255,242,230,.85) transparent transparent transparent !important;
}
.bg_green::after{
  border-color: rgba(236,255,244,.85) transparent transparent transparent !important;
}
.bg_yellow::after{
  border-color: rgba(255,252,224,.88) transparent transparent transparent !important;
}
.bg_purple::after{
  border-color: rgba(246,240,255,.85) transparent transparent transparent !important;
}