@charset "UTF-8";
/*
    Template: swell
    Theme Name: SWELL CHILD
    Theme URI: https://swell-theme.com/
    Description: SWELLの子テーマ
    Version: 1.0.0
    Author: LOOS WEB STUDIO
    Author URI: https://loos-web-studio.com/

    License: GNU General Public License
    License URI: http://www.gnu.org/licenses/gpl.html
*/


/* 画像の位置を調整 */
img {
    vertical-align:top;
}

/* 外側テーブルだけ線を消す */
table.no-border {
  border: none !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
}

/* 外側テーブルの直下セルだけ枠なし */
table.no-border > tbody > tr > th,
table.no-border > tbody > tr > td {
  border: none !important;
  box-shadow: none !important;
}

/* 強制的に左寄せにする */
.force-left {
  text-align: left !important;
}



/*===============================================================
 スマホ向けのスタイルシート
===============================================================*/

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

    /* スマホではテーブルを拡大する */
    table {
        width: 100%;
        max-width: none;
    }

    /* スマホではフォーカス時の自動ズームはしない */
    input,
    select,
    textarea {
      font-size: 16px !important;
    }

    /* スマホではメールフォームのボタンを大きくする */
    input[type="submit"] {
      padding: 15px 20px;
      font-size: 16px;
      width: 100%;
      box-sizing: border-box;
    }

    /* スマホではメールフォームの横幅を広げる */
    input[type="text"], textarea {
      width: 100%;
      max-width: 100%;
      box-sizing: border-box;
    }

    /* スマホではファイルの横幅を広げる */
    input[type="file"] {
      width: 100%;
      box-sizing: border-box;
      max-width: 100%;
    }

    /* スマホではテーブルを縦に並べる */
    .responsive-table td {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }

    /* スマホでは行をブロック化してセルを縦並びにする */
    .responsive-table,
    .responsive-table tbody,
    .responsive-table tr {
        display: block;
        width: 100%;
    }

    /* スマホでは入力欄をはみ出さないようにする */
    .responsive-table input[type="text"],
    .responsive-table input[type="email"],
    .responsive-table textarea {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* 左のラベルセル（「確認コード」など）を画面いっぱいにする */
    table.responsive-table > tbody > tr > td:first-child,
    table.responsive-table > tbody > tr > th:first-child {
        display: block !important;
        width: 100% !important;
        box-sizing: border-box;
    }

    /* スマホではボタンを横幅100%にする */
    #contact-submit {
        display: block;
        width: 100%;
        box-sizing: border-box;
    }


    /* CAPTCHA部分が横に詰まって崩れないようにする */
    .tore-captcha__wrap {
        display: flex;
        flex-wrap: wrap; /* 横幅不足なら折り返し */
        gap: 6px;
    }
    .tore-captcha__img {
        height: 40px;
        max-width: 100%;
    }
    .tore-captcha__refresh,
    .tore-captcha__wrap input[type="text"] {
        max-width: 100%;
        box-sizing: border-box;
    }




}

/*===============================================================
 ここまでスマホ向けのスタイルシート
================================================================*/