/* =====================================================
   共通パーツ（hero・本文幅・区切り線など、複数ページで使うもの）
   ※ heroのあるページ／service-pageの幅を使うページで読み込む
===================================================== */

/* ---- ヒーロー（画像＋タイトル） ---- */

/* ページ表示時、hero画像がふわっと浮き出るアニメーション */
@keyframes heroFadeUp{
    from{
        opacity:0;
        transform:translateY(40px);
    }
    to{
        opacity:1;
        transform:translateY(0);
    }
}

.service-hero{
    position:relative;
    width:100%;
    max-width:1920px;
    margin:0 auto;

    animation:heroFadeUp 1.2s ease-out both;
}

.service-hero img{
    width:100%;
    display:block;
}

/* テキストを画像に焼き込まず、CSSで重ねたい場合に使用 */

.service-hero-text{
    position:absolute;
    left:6%;
    top:26%;
    color:#fff;
}

.service-hero-text p{
    font-size:clamp(13px,1.4vw,20px);
    font-weight:700;
    margin-bottom:2px;
}

.service-hero-text h1{
    font-size:clamp(30px,4.6vw,58px);
}


/* ---- コンテンツ全体の幅 ---- */

.service-page{
    width:70.97%;
    max-width:1262px;
    margin:0 auto;
    padding:70px 0 40px;
}


/* ---- セクション区切り線 ---- */

.service-divider{
    width:100%;
    height:1px;
    background:#ccc;
    margin:40px 0;
}


/* ---- セクション見出し（英語大文字＋グレーの線＋日本語） ---- */

.page-heading{
    text-align:center;
    margin-bottom:40px;
}

.page-heading h2{
    font-size:clamp(36px,6vw,64px);
    color:#e4e4e4;
    font-weight:700;
    font-family: "Arial black", serif;
    letter-spacing:.02em;
}

.page-heading .line{
    width:100%;
    height:2px;
    background:#c8c8c8;
    margin:-14px 0 14px;
}

.page-heading p{
    font-size:clamp(16px,2vw,22px);
    font-weight:700;
    color:#111;
}

.page-section{
    margin-bottom:90px;
}


.page-section p.lead{
    font-size:clamp(14px,1.6vw,17px);
    line-height:2;
    color:#222;
    margin-bottom:24px;
}


/* ---- TOPへ戻るボタン ---- サイズはwidthとheightを変更する*/

.page-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  width: 60px;
  height: 60px;
  border: none;
  border-radius: 50%;
  background: #213269;
  color: #fff;
  font-size: 14px;
  letter-spacing: 0.1em;
  cursor: pointer;
  z-index: 100;
  overflow: hidden;

  /* 初期状態は非表示 */
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s, visibility 0.4s, background 0.3s;
}

/* 一定量スクロールしたら表示 */
.page-top.is-visible {
  opacity: 1;
  visibility: visible;
}

.page-top:hover {
  background: #354788;
}

/* ---- レスポンシブ ---- */

@media(max-width:600px){

    .service-hero{
        width:100%;
    }

    .service-page{
        width:78.85%;
    }

    .service-hero-text{
        top:14%;
    }

}