/* ===== 共通 ===== */
html { font-size:62.5%; scroll-behavior:smooth; }
body {
  background-color: #FFFAEB;
}
img  { width:100%; }
.pc-only {
    display: block;
}
.sp-only {
    display: none;
}
.mt-1 {
    margin-top: 75px;
}
@media (max-width:797px){
    .pc-only {
        display: none;
    }
    .sp-only {
        display: block;
    }
    .mt-1 {
        margin-top: 50px;
    }
}



/*** ヘッダー ここから ***/

/* ロゴ画像 */
.header-img { width:100%; }
@media (max-width:797px){ .header-img { width:50%; margin-top: 5px; margin-left: 5px; }  }

/* ===== PC ナビ ===== */
.pc-header__nav{
  background: #FDD035;
  max-width:100%;
  margin:auto;
}
.pc-header__nav ul{
  display:flex;
  justify-content:center;
  list-style:none;
  padding:25px 0;
  margin-block-start: 1em;
  margin-block-end: 0;
}
.pc-header__nav li{
  margin:0; position:relative; padding:0 60px;
}
.pc-header__nav li:not(:first-child)::before{
  content:''; position:absolute;
  left:0; top:-6px; bottom:-6px; width:1px;
  background:rgba(255,255,255,0.45);
}
.pc-header__nav a{
  color:#fff; font-size:1.8rem;
  text-decoration:none; font-weight:500;
}
.pc-header__nav a:hover{ opacity:.8; }

@media (max-width:1400px){
    .pc-header__nav li{
      padding:0 25px;
    }
  }

@media (max-width:1200px){
  .pc-header__nav a{ font-size:1.2rem; }
}
@media (max-width:767px){ .pc-header__nav{ display:none; } }

/* ===== スマホ UI ===== */
.site-header{ position:relative; }

@media (max-width:767px){ .site-header{ position:relative; margin-bottom: 10px; } }

/* PC では SP パーツを隠す */
@media (min-width:768px){
  .sp-actions, .sp-nav{ display:none; }
}

/* --- スマホ用 --- */
@media (max-width:767px){

  /* 右上アイコン */
  .sp-actions{
    position:absolute; top:9px; right:16px;
    display:flex; align-items:center; gap:16px;
    z-index:1000;
  }
  .sp-mail{
    width:48px; height:48px; border-radius:10px;
    background:#7472B5; color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-size:24px; text-decoration:none;
  }
  /* 修正後 */
  .sp-hamburger{
    width:48px; height:65px;
    display:flex; flex-direction:column; justify-content:center;
    align-items:center;
    cursor:pointer;
  }
  /* 追加 */
  .hamburger-lines{
    display:flex; flex-direction:column;
    gap:6px;
  }

  .hamburger-lines span{
    display:block; height:4px; border-radius:2px; background:#CE2D2D;
    width:48px; /* 幅を明示的に指定 */
  }
  
  .menu-text{
    font-size: 1.2rem;
    color: #FF9824;
    margin-top: 2px;
    font-weight: 500;
    text-transform: uppercase;
  }
  .sp-hamburger span{
    display:block; height:4px; border-radius:2px; background:#FF9824;
  }

  /* スライドメニュー */
  .sp-nav{
    display:block;
    position:fixed; inset:0;
    background:transparent;    
    transform:translateX(100%);
    transition:transform .3s ease;
    z-index:999;
  }
  .sp-nav ul{
    background:#fff;
  }
  /* === 開いたらメニュー表示 & sp-actions 非表示 === */
  #sp-nav-toggle:checked ~ .site-header .sp-actions{ display:none; }
  #sp-nav-toggle:checked ~ .sp-nav       { transform:translateX(0); }

  /* × ボタン */
  .sp-close{
    position:absolute; top:18px; right:16px;
    width:48px; height:48px;
    border:3px solid #FF9824; border-radius:50%;
    display:flex; align-items:center; justify-content:center;
    font-size:26px; color:#FF9824; cursor:pointer;
  }

  /* リスト */
  .sp-nav ul{ 
    margin-block-start: 0em;
    padding-inline-start: 0px;
    padding-top: 100px;
    list-style: none;
  }
  .sp-nav li{ border-top:1px solid #FF9824; }
  .sp-nav li:last-child{ border-bottom:1px solid #FF9824; }
  .sp-nav a{
    display:block; padding:20px 24px;
    font-size:20px; color:#FF9824; text-decoration:none;
  }

  .header-sp-text {
    width: 95%;
    margin: 10px auto 10px;
  }
}

/*** ヘッダー ここまで ***/



/*** 電話ボタン ***/
.tel-img {
    width: 58%;
    margin: 50px auto 5px;
    display: block;
}

@media (max-width:767px){
    .tel-img {
        width: 100%;
        margin: 0 auto 0;
    }
}

/*** 違和感 ***/
.iwakan-img {
  width: 100%;
  margin: 100px auto 0px;
  display: block;
}

@media (max-width:767px){
  .iwakan-img {
      width: 95%;
      margin: 75px auto 50px;
  }
}

/*** 選ばれる理由 ***/
.reason-img {
  width: 58%;
  margin: 100px auto 0px;
  display: block;
}

@media (max-width:767px){
  .reason-img {
      width: 100%;
      margin: 75px auto 0;
  }
}

/*** 料金画像 ***/
.price-img {
  width: 100%;
  margin: 100px auto 0px;
  display: block;
}

@media (max-width:767px){
  .price-img {
      width: 100%;
      margin: 75px auto 0;
  }
}

/*** ご利用の流れ ***/
.flow-img {
  width: 75%;
  margin: 100px auto 0px;
  display: block;
}

@media (max-width:767px){
  .flow-img {
      width: 90%;
      margin: 75px auto 50px;
  }
}

/*** お客様の声 ***/
.voice-img {
  width: 58%;
  margin: 100px auto 0px;
  display: block;
}

@media (max-width:767px){
  .voice-img {
      width: 90%;
      margin: 75px auto 50px;
  }
}

/*** よくある質問画像 ***/
.faq-img {
  width: 48%;
  margin: 100px auto 100px;
  display: block;
}

@media (max-width:767px){
  .faq-img {
      width: 90%;
      margin: 75px auto 30px;
  }
}



/*** メールボタン ***/
.mail-img {
    width: 58%;
    margin: 10px auto 100px;
    display: block;
}

@media (max-width:767px){
    .mail-img {
        width: 95%;
        margin: 0 auto 50px;
    }
}


/*** フッター画像 ***/
.footer-img {
    width: 100%;
    margin: 75px auto 0;
    display: block;
}

@media (max-width:767px){
    .footer-img {
        width: 100%;
        margin: 50px auto 0;
    }
}




/*** フッター ***/
.site-footer{
    background:#FF9824;           /* 紫ベース */
    padding:30px 0 22px;
    text-align:center;
    color:#fff;
    font-family:inherit;
  }
  
  /* ナビゲーション（横並び） */
  .footer-nav ul{
    margin:0; padding:0;
    list-style:none;
    display:flex;
    justify-content:center;
    gap:0;                       /* 余白は li 内で */
  }
  .footer-nav li{
    position:relative;
    padding:0 40px;
  }
  .footer-nav li:not(:first-child)::before{
    content:'';
    position:absolute; left:0; top:50%;
    width:1px; height:18px;
    background:rgba(255,255,255,.45);
    transform:translateY(-50%);
  }
  .footer-nav a{
    color:#fff;
    text-decoration:none;
    font-size:1.6rem;
    font-weight:500;
  }
  
  /* コピーライト */
  copyright{
    display:block;
    margin-top:14px;
    font-size:1.2rem;
    line-height:1;
    opacity:.85;
  }

  small {
    font-size: 1.6rem;
    margin-top: 30px;
    display: block;
  }
  
  /* モバイルで少し文字サイズを下げる */
  @media (max-width:767px){
    .footer-nav a{ font-size:1.4rem; }
    .footer-nav li{ padding:0 24px; }
    small {
        font-size: 1.4rem;
        margin-top: 0px;
    }
  }




 /*** モーダルスタイル ***/
.modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 9999;
    overflow-y: auto;
  }
  
  .modal-content {
    background: white;
    max-width: 600px;
    margin: 20px auto;
    padding: 30px;
    border-radius: 10px;
    position: relative;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
  }
  
  .modal-close {
    position: absolute;
    top: 15px;
    right: 20px;
    font-size: 28px;
    color: #aaa;
    cursor: pointer;
    background: none;
    border: none;
  }
  
  .modal-close:hover {
    color: #000;
  }
  
  /* ===== フォームスタイル ===== */
  .contact-form h2 {
    text-align: center;
    font-size: 2.4rem;
    color: #373C63;
    margin-bottom: 30px;
    margin-top: 0;
  }
  
  .form-group {
    margin-bottom: 20px;
  }
  
  .form-group label {
    display: block;
    font-size: 1.6rem;
    color: #373C63;
    margin-bottom: 8px;
    font-weight: 500;
  }
  
  .required {
    color: #e74c3c;
  }
  
  .form-group input,
  .form-group select,
  .form-group textarea {
    width: 100%;
    padding: 12px 16px;
    border: 2px solid #ddd;
    border-radius: 8px;
    font-size: 1.6rem;
    box-sizing: border-box;
    transition: border-color 0.3s;
  }
  
  .form-group input:focus,
  .form-group select:focus,
  .form-group textarea:focus {
    outline: none;
    border-color: #7472B5;
  }
  
  .form-group textarea {
    resize: vertical;
    min-height: 120px;
  }
  
  .form-submit {
    text-align: center;
    margin-top: 30px;
  }
  
  .submit-btn {
    background: #7472B5;
    color: white;
    padding: 15px 40px;
    border: none;
    border-radius: 8px;
    font-size: 1.8rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.3s;
  }
  
  .submit-btn:hover {
    background: #5d5a9e;
  }
  
  @media (max-width: 767px) {
    .modal-content {
      margin: 10px;
      padding: 20px;
    }
    
    .contact-form h2 {
      font-size: 2.0rem;
    }
    
    .form-group label {
      font-size: 1.4rem;
    }
    
    .form-group input,
    .form-group select,
    .form-group textarea {
      font-size: 1.4rem;
    }
    
    .submit-btn {
      font-size: 1.6rem;
      padding: 12px 30px;
    }
  }