/*
Theme Name: towalistコーポレートサイト
Description: towalistコーポレートサイト2026リニューアル
Version: 1.0.0
*/
@charset "UTF-8";


/*------------------------------------------------------------
Contact Form 7 の対応（.c-form配下限定）
------------------------------------------------------------*/
.c-form {
/* 親コンテナ */
  & .contact-btn-container {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 中央から左寄せに変更 */
    width: 60dvw;
    max-width: 300px;
    min-width: 220px;
    aspect-ratio: 4/1;
    margin: 0 auto;
  }

  @media (min-width: 768px) {
    & .contact-btn-container {
      aspect-ratio: 249/51;
    }
  }

  /* 本物の送信ボタン（透明） */
  & .wpcf7-submit.contact-submit-input {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
    z-index: 10;
    cursor: pointer;
    margin: 0;
  }

  /* 見た目用のダミーボタン */
  & .btn-01-dummy.btn-01 {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start; /* 文字を左寄せにする */
    
    /* 元のデザインに合わせた左側の余白 */
    padding-left: 1.5rem; 
    
    pointer-events: none;
    max-width: none;
    min-width: 0;
    
    /* テキスト自体のスタイル（必要に応じて） */
    & span {
      position: relative;
      z-index: 2;
    }
  }

  /* アイコンの位置固定（右端に強制配置） */
  & .ico-arw {
    position: absolute !important; /* 絶対配置を強制 */
    right: 1.2rem !important;    /* 右端からの距離を固定 */
    left: auto !important;       /* 左からの自動配置を解除 */
    top: 50%;
    transform: translateY(-50%);
    
    background: #fff;
    width: 1.5rem;
    height: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 8px;
    z-index: 5;
    transition: 0.6s;
  }

  /* ホバー連動（親をホバーしたらダミーの:afterを出す） */
  & .contact-btn-container:hover {
    & .btn-01-dummy:after {
      opacity: 1 !important;
    }
    & .ico-svg path {
      fill: #00A0D1 !important;
    }
  }

  /* スピナー（ボタンの右外に配置） */
  & .wpcf7-spinner {
    position: absolute;
    left: calc(100% + 15px);
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
  }

}