/*
Theme Name: TSK総研　オリジナルテーマ
Theme URI: https://example.com
Author: 株式会社チイキモリ
Author URI: https://example.com
Description: 塗装会社専門広告代理店めけに制作したオリジナルテーマ
Version: 1.0.0
*/



body {
    font-family: 'Noto Sans JP', sans-serif;
  }
  
  header {
      width: 100%;
      height: auto;
      margin-top: 20px;
      z-index: 9999;
      position: fixed;
      top:10px;
    }
    
    .header-inner {
      background-color: rgba(255, 255, 255, 0.8);
      display: flex;
      align-items: center;
      justify-content: space-between;
      width: calc(100% - 60px); /* ← 左右30pxずつ */
      max-width: 1380px;
      height: 82px;
      margin: 0 auto;
      box-sizing: border-box;
      box-shadow: 0px 5px 25px -5px rgba(0, 0, 0, 0.2);
      border-radius: 4px;
      padding: 0 40px;
      backdrop-filter: blur(15px);
    }
    .header-inner-logo {
      width: 299px;
      height: 69px;
    }
    /* --- ロゴ部分 --- */
    .logo {
      display: flex;
      align-items: center;
      text-decoration: none;
      color: black;
      font-weight: bold;
      font-size: 20px;
    }
    .header-inner img {
      width: 103px;
      height: auto !important;
    }
    .logo img {
      height: 40px;
      margin-right: 10px;
    }
    
    /* --- ナビゲーション --- */
    .nav {
      display: flex;
      gap: 30px;
      list-style: none;
      margin: 0;
      padding: 0;
    }
    
    .nav li a {
      text-decoration: none;
      font-size: 14px;
      color: #222222;
      letter-spacing: 0.05em;
      line-height: 1.4;
      font-weight: 500;
      position: relative;
    }
    
    .nav li a:hover {
      color: grey;
    }
    /* ▼親メニュー（サービス） */
  .menu-item.services {
      position: relative;
    }
    
    .menu-item.services .dropdown {
      display: none;
      position: absolute;
      top: 100%; /* 親メニューの下に表示 */
      left: 0;
      background: #fff;
      box-shadow: 0px 5px 25px -5px rgba(0,0,0,0.15);
  
      width: 280px;
      padding: 15px 0;
      z-index: 100;
      border-top: 1px solid #000;
    }
    
    /* ▼カーソルを合わせたとき表示 */
    .menu-item.services:hover .dropdown {
      display: block;
    }
    
    .dropdown li {
      list-style: none;
      padding: 12px 20px 0 20px;
      position: relative;
  }
  
  .dropdown li::after {
      content: "";
      position: absolute;
      left: 20px;
      right: 20px;
      bottom: 0;
      height: 1px;
      background-color: #eee;
  }
  /* ▼1つ目（SERVICE）だけ右寄せレイアウト */
  .dropdown li:first-child a {
      justify-content: flex-end;
      text-align: right;
    }
    
    .dropdown li:first-child .service-box {
      align-items: flex-end;
    }
  /* 2つ目以降の全体レイアウト（左文字＋右矢印） */
  .dropdown li:not(:first-child) a {
      display: flex;
      justify-content: space-between;
      align-items: center;
      text-align: left;
    }
    
    /* 文字ブロックは縦並び（すでにOKだが念のため） */
    .dropdown li:not(:first-child) .service-box2 {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
    }
    
    .dropdown li:last-child {
      border-bottom: none;
    }
    .dropdown li:last-child::after {
      display: none;
  }
    .dropdown a {
      text-decoration: none;
      color: #333;
      display: flex;
      justify-content: space-between;
      align-items: center;
      transition: all 0.3s ease;
    }
    li a .service-box {
      display: flex;
      flex-direction: column; /* SERVICEとサービストップを縦並び */
      text-align: right;
      margin-bottom: 20px;
    }
    li a .service-box2 {
      display: flex;
      flex-direction: column; /* SERVICEとサービストップを縦並び */
      margin-top: 10px;
      margin-bottom: 20px;
    }
    .dropdown .title1 {
      font-weight: 900;
      font-size: 17px;
      display: block;
    }
    
    .dropdown .desc1 {
      font-size: 13px;
      font-weight: 700;
      display: block;
      margin-top: 5px;
    }
    
    .dropdown .icon1 {
      margin-left: 30px;
      transition: transform 0.3s ease;
      font-weight: bold;
      width: 30px;
      height: 30px;
      background-color: white;
      border: 2px solid black;
      border-radius: 50%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
      /* ▼カーソルを合わせたとき矢印を右に動かす */
      .dropdown li:hover .icon1 {
          transform: translateX(5px);
        }
    .dropdown .title {
      font-weight: 800;
      font-size: 14px;
      display: block;
    }
    
    .dropdown .desc {
      font-size: 10px;
      font-weight: 500;
      color: #666;
      display: block;
      margin-top: 5px;
    }
    
    .dropdown .icon {
      margin-left: 30px;
      transition: transform 0.3s ease;
      font-weight: bold;
    }
    
    /* ▼カーソルを合わせたとき矢印を右に動かす */
    .dropdown li:hover .icon {
      transform: translateX(5px);
    }
    
    
    /* --- メールボタン --- */
    .contact .mail-btn {
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: #000000;
      color: #fff;
      font-size: 1.2rem;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      text-decoration: none;
      transition: background 0.3s;
    }
    
    .contact .mail-btn:hover {
      background-color: gray;
    }
    
     @media (min-width: 1081px) {
      .hamburger {
        display: none !important;
      }
      .mobile-menu {
        display: none !important;
      }
    }
    
    @media (max-width: 1080px) {
    
      header {
        top: 0;
        height: 90px;
        background: transparent;
        position: fixed;
        width: 100%;
        z-index: 9999;
      }
      .header-inner {
        max-width: 100%;
        height: 80px;
        padding: 0 40px;
        background: rgba(255,255,255,0.9);
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    /* ✖ ボタン（閉じるボタン） */
      .close-btn {
    position: absolute;
    top: 10px;
    right: 40px;
    font-size: 25px;
    color: #fff;
    cursor: pointer;
    z-index: 9999;
      }
  
      /* ▼ 既存の nav とメールアイコンを消す */
      .nav,
      .contact {
        display: none !important;
      }
    
    
      /* ▼ ハンバーガー（右寄せ） */
      .hamburger {
        width: 32px;
        height: 24px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        cursor: pointer;
        z-index: 20000;
        padding-right: 30px;
      }
      .hamburger span {
        width: 100%;
        height: 2px;
        background: #000;
        border-radius: 2px;
      }
    
    
      /* ▼ スマホメニュー本体 */
      .mobile-menu {
        position: fixed !important;
        top: 0px;
        right: 0;
        width: 270px;
        height: calc(100vh - 1px);
        background: #333;
        color: #fff;
        display: none;
        flex-direction: column;
        padding: 50px 30px 0 30px;
        z-index: 999999 !important;
        overflow-y: auto;
      }
    
      .mobile-menu.active {
        display: flex;
      }
    
      /* ▼ メニュー（テキスト白・スマホ用サイズ） */
      .mobile-nav {
        list-style: none;
        padding: 0;
        margin: 20px 0 20px 10px;
      }
    
      .mobile-nav > li {
        margin-bottom: 18px;
      }
    
      .mobile-nav a {
        color: #fff;
        text-decoration: none;
        font-size: 15px;
        font-weight: 400;
      }
      /* ▼ サービスのサブメニュー（常時展開版） */
      .mobile-nav .services-menu {
        margin-top: 30px;
        margin-left: 10px;
        padding-left: 25px;
        padding-right: 10px;
        border-left: 0.5px solid white;
        list-style: none;
      }
    
      .mobile-nav .services-menu li {
        margin-bottom: 14px;
      }
  
    .title1080 {
      font-size: 13px;
    }
    .desc1080 {
      font-size: 10px;
      color: lightgray;
      padding-bottom: 40px;
    }
    .service-box1080 {
      gap: 20px;
    }
    
      /* ▼ 資料請求・お問い合わせ */
      .mobile-buttons {
        display: flex;
        flex-direction: column;
        gap: 12px;
        text-align: center;
      }
    
      .mobile-btn {
        padding: 12px;
        text-align: center;
        font-size: 17px;
        border-radius: 6px;
        text-decoration: none;
        color: #fff;
      }
      .mobile-btn.shiryo { 
        background: white;
        color: #000;
        font-size: 15px;
        font-weight: 600;
        letter-spacing: 0.2em;
       }
      .mobile-btn.toiawase {
         background: #000;
         font-size: 15px;
         font-weight: 600;
        }
    
    
      /* ▼ SNS アイコン（白・横並び） */
      .mobile-sns {
        display: flex;
        gap: 20px;
        font-size: 24px;
        justify-content: center;
        margin-top: auto;
        padding-bottom: 20px;
        margin-top: 40px;
      }
    
      .mobile-sns i {
        color: white;
      }
    }
    @media (max-width: 840px) {
    
      header {
        top: -10px;
        height: 60px;
        background: transparent;
        position: fixed;
        width: 100%;
        z-index: 9999;
      }
      .header-inner {
        max-width: 100%;
        height: 60px;
        padding: 0 10px;
        background: rgba(255,255,255,1);
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
        /* ✖ ボタン（閉じるボタン） */
        .close-btn {
          position: absolute;
          top: 10px;
          right: 40px;
          font-size: 25px;
          color: #fff;
          cursor: pointer;
          z-index: 9999;
            }
        
            /* ▼ 既存の nav とメールアイコンを消す */
            .nav,
            .contact {
              display: none !important;
            }
          
          
            /* ▼ ハンバーガー（右寄せ） */
            .hamburger {
              width: 32px;
              height: 24px;
              display: flex;
              flex-direction: column;
              justify-content: space-between;
              cursor: pointer;
              z-index: 20000;
              padding-right: 30px;
            }
            .hamburger span {
              width: 100%;
              height: 2px;
              background: #000;
              border-radius: 2px;
            }
            @media (max-width: 840px) {
                .hamburger {
                    padding-right: 10px;
                }
            }
          
            /* ▼ スマホメニュー本体 */
            .mobile-menu {
              position: fixed !important;
              top: 0px;
              right: 0;
              width: 270px;
              height: calc(100vh - 1px);
              background: #333;
              color: #fff;
              display: none;
              flex-direction: column;
              padding: 50px 30px 0 30px;
              z-index: 999999 !important;
              overflow-y: auto;
            }
          
            .mobile-menu.active {
              display: flex;
            }
          
            /* ▼ メニュー（テキスト白・スマホ用サイズ） */
            .mobile-nav {
              list-style: none;
              padding: 0;
              margin: 20px 0 20px 10px;
            }
          
            .mobile-nav > li {
              margin-bottom: 18px;
            }
          
            .mobile-nav a {
              color: #fff;
              text-decoration: none;
              font-size: 15px;
              font-weight: 400;
            }
            /* ▼ サービスのサブメニュー（常時展開版） */
            .mobile-nav .services-menu {
              margin-top: 30px;
              margin-left: 10px;
              padding-left: 25px;
              padding-right: 10px;
              border-left: 0.5px solid white;
              list-style: none;
            }
          
            .mobile-nav .services-menu li {
              margin-bottom: 14px;
            }
        
          .title1080 {
            font-size: 13px;
          }
          .desc1080 {
            font-size: 10px;
            color: lightgray;
            padding-bottom: 40px;
          }
          .service-box1080 {
            gap: 20px;
          }
          
            /* ▼ 資料請求・お問い合わせ */
            .mobile-buttons {
              display: flex;
              flex-direction: column;
              gap: 12px;
              text-align: center;
            }
          
            .mobile-btn {
              padding: 12px;
              text-align: center;
              font-size: 17px;
              border-radius: 6px;
              text-decoration: none;
              color: #fff;
            }
            .mobile-btn.shiryo { 
              background: white;
              color: #000;
              font-size: 15px;
              font-weight: 600;
              letter-spacing: 0.2em;
             }
            .mobile-btn.toiawase {
               background: #000;
               font-size: 15px;
               font-weight: 600;
              }
          
          
            /* ▼ SNS アイコン（白・横並び） */
            .mobile-sns {
              display: flex;
              gap: 20px;
              font-size: 24px;
              justify-content: center;
              margin-top: auto;
              padding-bottom: 20px;
              margin-top: 40px;
            }
          
            .mobile-sns i {
              color: white;
            }
    }

    .header-inner-logo img {
      width: auto;
      height: auto;
      max-height: 55px; /* 通常サイズの上限 */
    }
    
    @media screen and (max-width: 359px) {
      .header-logo {
        font-size: 12px;
      }
      .header-inner-logo img {
        transform: scale(0.9);
        transform-origin: left center;
      }
    }

  









    .link-box {
        display: flex;
        gap: 20px;
        width: 100%;
    }
    .link-box a {
        display: block;     /* これ絶対必要（インラインからブロックに） */
        flex: 1;            /* 2つを均等に横並び */
        text-decoration: none;
    
    }
    .item {
        width: 100%;
        height: 220px;
        padding: 40px 20px;
        position: relative;
        overflow: hidden; /* はみ出しを防ぐ */
    }
    
    /* ▼ 背景画像を擬似要素に移す */
    .item::before {
        content: "";
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
    
        filter: brightness(0.5); /* ← 通常時の暗さ */
        transition: transform 0.3s ease, filter 0.3s ease;
    
        z-index: 1;
    }
    
    /* ▼ テキストなどの内容は前面へ */
    .item > * {
        position: relative;
        z-index: 2;
    }
    
    /* ▼ hover 時：背景だけ拡大、明るさ控えめ */
    .item:hover::before {
        transform: scale(1.03);  /* ← 背景だけ拡大！ */
        filter: brightness(0.8); /* ← 明るさ控えめで調整 */
    }
    
    /* ▼ 浮き上がり演出（枠は動かないので安全） */
    .item:hover {
        box-shadow: 0 10px 20px rgba(0,0,0,0.25);
    }
    
    /* ▼ 個別の背景画像設定（そのまま使えます） */
    .item-company::before {
        background-image: url("img/fcompany.jpeg");
    }
    
    .item-request::before {
        background-image: url("img/frequest.jpeg");
    }
    
    
    /* ▼ 背景画像の個別設定 */
    .item-company {
        background-image: url("img/fcompany.jpeg");
    }
    
    .item-request {
        background-image: url("img/frequest.jpeg");
    }
    .footerlink {
        font-family: 'Noto Sans JP', sans-serif;
        line-height: 1.4;
        font-size: 32px;
        font-weight: 800;
        color: white;
        text-align: center;
    }
    .footerlinks {
        font-family: 'Noto Sans JP', sans-serif;
        letter-spacing: 0.2;
        line-height: 1.4;
        font-size: 14px;
        font-weight: 800;
        color: white;
        text-align: center;
        margin-top: -30px;
    }
    .footerbar {
        font-family: 'Yu Gothic', sans-serif;
        line-height: 1.4;
        font-size: 30px;
        font-weight: 200;
        color: white;
        text-align: center;
        margin-top: -10px;
    }
    .footer-circle {
        width: 44px;
        height: 44px;
        background-color: none;
        border: 2px solid white;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        text-align: center;
        /* ▼ 中央寄せのポイント */
        margin: 0px auto 0 auto;
        position: relative;
        color: white;
    }
    .footer-circle i {
      font-family: 'Yu Gothic', sans-serif;
    }
    /* ================================
       フッター全体（背景は画面幅100%）
    ================================ */
    .footer-end {
      width: 100%;
      background-color: #002C5D;
      display: flex;
      justify-content: center;
      padding: 80px 30px;  /* 上下だけに余白を入れる */
      margin: 0;
      box-sizing: border-box;
    }
    
    /* 中身は最大1380pxに中央揃え */
    .footer-end-inner {
      width: 100%;
      max-width: 1380px;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      gap: 50px; /* 左カラムと右カラムの隙間 */
      padding: 0 20px; /* 画面が狭い時の余白 */
      box-sizing: border-box;
    }
    
    /* ================================
     左カラム
    ================================ */
    .footer-end-1 {
      flex: 1;
      color: white;
      font-family: 'Noto Sans JP', sans-serif;
      display: flex;
      flex-direction: column;
      gap: 22px;
      margin: 0;
      padding: 0;
    }
    
    .footer-tk img{
      width: 99px;
      margin-bottom: 22px;
    }
    
    .footer-end-p1 {
      line-height: 1.7;
      font-size: 14px;
      font-weight: 800;
    }
    
    .footer-end-p2 {
      line-height: 1.4;
      font-size: 12px;
      font-weight: 400;
      margin: 0;
    }
    
    /* お問い合わせボタン */
    .footer-end-p3 {
    font-family: 'Noto Sans JP', sans-serif;
    padding: 15px 70px;
    align-self: flex-start;
    margin-top: 20px;
    display: inline-block;
    text-decoration: none;
    background: #002C5D;        /* 紺色 */
    border: 2px solid #fff;     /* 白線 */
    text-align: center;
    color: #fff;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.4;
    transition: transform 0.25s ease, background 0.25s ease;
    white-space: nowrap;
    }
    
    .footer-end-p3:hover {
      color: lightgray;
    }
    
    .footer-end-p3 p {
      margin: 0;
      padding: 0;
      font-size: 15px;
      font-weight: 800;
      line-height: 1;
    }
    
    /* ================================
     右カラム
    ================================ */
    .footer-right {
      flex: 2;
      display: flex;
      flex-direction: column;
      gap: 40px;
      align-items: flex-start; /* 左揃え */
    }
    
    /* 上のメニューページリンク */
    .footer-list {
      list-style: none;
      display: flex;
      gap: 40px;
      padding: 0;
      margin: 0;
    }
    
    .footer-list a {
      font-size: 12px;
      font-weight: 400;
      color: white;
      text-decoration: none;
    }
    
    .footer-list a:hover {
      color: lightgray;
    }
    
    /* サービス欄 */
    .footer-end-3 {
      display: flex;
      gap: 40px;
    }
    
    .footer-service {
      font-size: 18px;
      font-weight: 800;
      color: white;
    }
    .footer-service p {
      white-space: nowrap;
    }
    
    .footer-service-naiyo ul {
      list-style: none;
      padding: 0;
      margin: 0;
    }
    
    .footer-service-list {
      font-size: 14px;
      font-weight: 800;
      color: white;
    }
    
    .footer-service-listul li:hover p {
      color: lightgray;
    }
    
    .footer-service-lists {
      font-size: 10px;
      font-weight: 500;
      line-height: 1.5;
      color: grey;
      padding-bottom: 10px;
    }
    .footer-service p,
    .footer-service-list {
       margin: 0;
    }

    /* ================================
     SNS（右端の縦アイコン）
    ================================ */
    .footer-sns {
      display: flex;
      flex-direction: column;
      gap: 16px;
      margin-left: 40px;
    }
    
    .footer-sns .sns-link img {
      width: 28px;
      height: 28px;
      fill: white;
      transition: opacity .3s;
    }
    
    .footer-sns .sns-link:hover svg {
      opacity: 0.7;
    }
    
    .copyright {
        line-height: 1.4;
        font-size: 11px;
        font-weight: 500;
        color: white;
        margin-top: 0;
        padding-top: 0;
    }
    .hyperlink {
        padding: 0 100px;
    }
    .hyperlink a {
      text-decoration: none;
    }
    
    .kanrengaisha {
        line-height: 1.4;
        font-size: 10px;
        font-weight: 400;
        color: white;
    }
    .yutasaka {
        line-height: 1.4;
        font-size: 10px;
        font-weight: 400;
        color: white;
    }
    .kojyokaishu {
        line-height: 1.4;
        font-size: 10px;
        font-weight: 400;
        color: white;
    }
    .seo {
        line-height: 1.4;
        font-size: 20px;
        font-weight: 400;
        color: navy;
    }
    /* ================================
     下の白い隙間を完全になくす
    ================================ */
    footer, .footer-end, .footer-sns {
      margin-bottom: 0 !important;
      padding-bottom: 0 !important;
    }
    
    .footer-copyright {
        background-color: #002C5D;
        text-align: center;
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    @media (max-width: 840px) {
    
      /* 右側（メニュー・サービス）を非表示 */
      .footer-right {
        display: none;
      }
        .link-box {
          display: flex;
          flex-direction: column;
          align-items: center;
          gap: 0;
        }
      
        .link-box a {
          display: block;
          width: 100%;
          margin: 0;
          padding: 0;
        }
      
        /* 各ボックスを中央揃え */
        .link-box .item {
          margin: 0;
          padding: 24px 0;           /* ← 高さを作る */
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;   /* ← 縦中央 */
          text-align: center;
        }
      
        /* テキスト余白の最適化 */
        .link-box .item p {
          margin: 4px 0;
        }
      
        /* 矢印・装飾の位置崩れ防止 */
        .footer-circle,
        .footerbar {
          margin-top: 8px;
        }  
      /* フッター中段を中央寄せ */
      .footer-end-inner {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
      }
    
      /* テキスト類を中央寄せ */
      .footer-end-p1,
      .footer-end-p2,
      .footer-end-p3 {
        text-align: center;
      }
      .footer-end-3 {
        margin-bottom: 20px;
      }
      /* SNSを必ず横並びにする */
      .footer-sns {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center;
        align-items: center;
        gap: 20px;
      }
    
      .footer-sns a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        padding-bottom: 50px;
      }
      .hyperlink {
        display: flex;
        align-items: center;
        justify-content: center;
        padding-top: 50px;
    
      }
    }
    
    @media (max-width: 430px) {
    .footer-sns {
     margin: 0 auto;
    }
  }
    
    
    html, body {
        margin: 0;
        padding: 0;
        overflow-x: hidden;
    }
    .container {
        max-width: 1380px;  /* サイトの横幅 */
        margin: 0 auto;     /* 左右中央揃え */
        padding: 0 20px;    /* スマホで左右に余白をつける（任意） */
        box-sizing: border-box;
    }
    

/* ==========================
   CONTACT PAGE LAYOUT
========================== */

.page-content {
  width: 100%;
}

/* --- 上部ビジュアル --- */
.contact-top {
  position: relative;
  width: 100%;
  height: 360px;          /* ★ 高さを必ず持たせる */
  background: url("https://images.unsplash.com/photo-1484807352052-23338990c6c6?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w2MzQ2fDB8MXxzZWFyY2h8MjN8fGNvbnRhY3R8ZW58MHx8fHwxNjk4MTI3NDI1fDA&ixlib=rb-4.0.3&q=80&w=1080") center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}


/* --- 説明文 --- */
.contact-ex {
  max-width: 720px;
  margin: 80px auto 60px;
  padding: 0 20px;
}

.tantosama {
  font-size: 24px;
  line-height: 2.2;
  font-weight: 300;
  margin-bottom: 24px;
  text-align: center;
}

.tantosama-kome {
  font-size: 16px;
  line-height: 2.2;
  font-weight: 300;
  color: black;
  text-align: center;
}

/* --- フォーム --- */
.page-form {
  max-width: 800px;
  margin: 0 auto;
  padding: 0 20px;
  box-sizing: border-box;
}
@media (max-width: 840px) {
  .tantosama {
    font-size: 15px;

  }
  
  .tantosama-kome {
    font-size: 12px;
  }
}  
.form-attention {
  color: #c40000;
  font-size: 14px;
  text-align: right;
  margin-top: -10px;
  margin-bottom: 30px;
}
/* お問い合わせ内容（textarea） */
.page-form textarea,
.wpcf7 textarea {
  width: 100%;
  max-width: 100%;
  height: 300px;
  padding: 16px;
  font-size: 16px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  resize: vertical;
}
textarea[name="your-message"] {
  width: 100%;
  height: 300px;
  padding: 16px;
  font-size: 14px;
}
/* テキスト入力・メール入力を大きくする */
.page-form input[type="text"],
.page-form input[type="email"],
.wpcf7 input[type="text"],
.page-form input[type="tel"],
.wpcf7 input[type="email"] {
  width: 100%;
  height: 50px;
  padding: 16px;
  font-size: 14px;
  box-sizing: border-box;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-top: 8px;
}
.page-form input,
.page-form textarea {
  font-family: inherit;
}

/* プライバシーポリシー */
.page-form .privacy-check {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  margin-bottom: 20px;
}
.page-form .privacy-check input[type="checkbox"] {
  width: 18px;
  height: 18px;
}
/* 送信ボタン */
.page-form input[type="submit"],
.wpcf7 input[type="submit"] {
  display: block;
  width: 100%;
  max-width: 400px;
  height: 80px;
  margin: 0 auto;
  background-color: #002C5D;
  color: #ffffff;
  font-size: 24px;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

@media screen and (max-width: 840px) {

  /* フォーム全体 */
  .page-form {
    padding: 0 16px;
  }

  /* テキスト・メール入力 */
  .page-form input[type="text"],
  .page-form input[type="email"],
  .wpcf7 input[type="text"],
  .page-form input[type="tel"],
  .wpcf7 input[type="email"] {
    height: 56px;
    font-size: 15px;
  }

  /* テキストエリア */
  .page-form textarea,
  .wpcf7 textarea {
    height: 240px;
    font-size: 15px;
  }

  /* 注意書き（赤文字） */
  .form-attention {
    font-size: 13px;
    text-align: left;
    margin-top: 4px;
  }

  /* プライバシーポリシー */
  .page-form .privacy-check {
    font-size: 15px;
    flex-wrap: wrap;
    text-align: center;
    margin-top: 10px;
  }

  /* 送信ボタン */
  .page-form input[type="submit"],
  .wpcf7 input[type="submit"] {
    max-width: 100%;
    height: 64px;
    font-size: 18px;
  }
}
.privacy-check {
  display: inline-flex;
  align-items: center;
  flex-wrap: nowrap;
  gap: 4px;
}

.privacy-check input[type="checkbox"] {
  margin: 0 4px 0 0;
}




.request-top {
  position: relative;
  width: 100%;
  height: 360px;          /* ★ 高さを必ず持たせる */
  background: url("https://images.unsplash.com/photo-1542744173-05336fcc7ad4?crop=entropy&cs=tinysrgb&fit=max&fm=jpg&ixid=M3w2MzQ2fDB8MXxzZWFyY2h8NzF8fGRvY3VtZW50fGVufDB8fHx8MTY5ODIxODg5M3ww&ixlib=rb-4.0.3&q=80&w=1080") center / cover no-repeat;
  display: flex;
  align-items: center;
  justify-content: center;
}
.required {
  color: red;
  font-size: 12px;
  margin-left: 6px;
}
/* requestページ 送信ボタン上書き */
.page-request .wpcf7 input[type="submit"] {
  max-width: 400px;
  width: 100%;
  height: 80px;
  background-color: #000;
  color: #fff;
  font-size: 24px;
  font-weight: bold;
  border: none;
  border-radius: 4px;
  margin: 0 auto;
  display: block;
}

.privacy {
  margin: 0 60px;
}

@media screen and (max-width: 840px) {
  .privacy-detail {
    font-size: 13px;
  }

  .privacy {
    margin: 0 20px;
  }
  
}