/* iCheck plugin Minimal skin, green
----------------------------------- */

input[type=radio],
input[type=checkbox] {
    display: inline-block;
    margin-right: 6px;
}
input[type=radio] + label,
input[type=checkbox] + label {
    position: relative;
     
    display: inline-block;
    margin-right: 12px;
     
    font-size: 14px;
    line-height: 30px;
     
    cursor: pointer;
}
 
@media (min-width: 1px) {
    input[type=radio],
    input[type=checkbox] {
        display: none;
        margin: 0;
    }
    input[type=radio] + label,
    input[type=checkbox] + label {
        padding: 0 0 0 24px;
    }
    input[type=radio] + label::before,
    input[type=checkbox] + label::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 0;
         
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
        width: 18px;
        height: 18px;
        margin-top: -9px;
         
        background: #FFF;
    }
    input[type=radio] + label::before {
        border: 1px solid #ccc;
        border-radius: 30px;
    }
    input[type=checkbox] + label::before {
        border: 1px solid #78A300;
    }

    input[type=radio] + label:hover::before {
        border: 2px solid #78A300;
        background: #FFF;
    }
    input[type=checkbox] + label:hover::before  {
        border: 2px solid #78A300;
        background: #FFF;
    }
    
    

    
    input[type=radio]:checked + label::after,
    input[type=checkbox]:checked + label::after {
        content: "";
        position: absolute;
        top: 50%;
         
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        display: block;
    }
    input[type=radio]:checked + label::after {
        left: 5px;
         
        width: 8px;
        height: 8px;
        margin-top: -4px;
         
        background: #E71063;
        border-radius: 8px;
    }
    input[type=checkbox]:checked + label::after {
        left: 2px;
         
        width: 14px;
        height: 8px;
        margin-top: -6px;
         
        border-left: 3px solid #78A300;
        border-bottom: 3px solid #78A300;
         
        -webkit-transform: rotate(-45deg);
        -ms-transform: rotate(-45deg);
        transform: rotate(-45deg);
    }
}



/* h9追加 */

input#name{
	width: 100%;
	height:1.4em;
}


.inq_com{
	display: block;
	font-size: 80%;
	display: inline-block;
}



input::placeholder, textarea::placeholder { color:#b3b3b3; }



.mark_essential{
	color: #cd0016;
	text-align: right;
}

.mod_form table tr th {
    padding: 0 40px 0 0;
}

.mod_form table {
    padding: 0 20px;
}


/* 姓名を上下レイアウトにするための設定 */
.name_set {
    display: flex !important;
    justify-content: space-between !important; /* gapを使わず両端配置 */
    width: 100% !important;
    box-sizing: border-box !important;
}

.name_block {
    /* 間の余白20pxを考慮し、全体の50%から10px引いた値を「固定幅」とする */
    width: calc(50% - 10px) !important;
    flex: 0 0 calc(50% - 10px) !important; /* 伸び縮みを禁止 */
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
}
.name_block input {
    width: 100% !important; 
    box-sizing: border-box !important;
}

/* 1カラム(other.html)でも幅が広がりすぎないように調整 */
#column1 .name_set {
    max-width: 412px; 
}

.name_block label {
    font-size: 14px;
    margin-bottom: 5px;    /* ラベルとテキストボックスの間の隙間 */
    padding: 0;
}

.name_block input {
    padding: 15px 10px !important; /* 他の項目(input#company等)と同じ余白に強制 */
    height: 1.4em;;        /* 万が一、固定高さが指定されている場合に解除 */
    box-sizing: border-box;         /* サイズ計算を揃える */
    width: 100% !important;         /* ブロック内で横幅いっぱいに広げる */
    margin-left: 0 !important;      /* 以前の横並び時の余白をリセット */
}



@media only screen and (min-width: 769px) {
   .name_block label {
        display: block;

        line-height: 1.4; /* 行高さを固定してズレを防止 */
        padding-top: 4px !important;
    }
}

/* モバイル対応：スマホで姓名を縦1列にする場合（必要に応じて） */
@media only screen and (max-width: 768px) {
    .name_set {
        flex-direction: column;
        gap: 0; /* 縦並び時はgapではなく個別のmarginで調整 */
        width: 100%;
    }
    .name_block label {
        font-size: 15px;
    }
    
    .name_block {
        width: 100% !important;
        flex: none;
    }

    /* 「姓」の入力欄と「名」のラベルの間にマージンを追加 */
    .name_block:first-child {
        margin-bottom: 20px; 
    }

    .name_block input {
        height: 1.4em;
    }
    /* スマホでは1カラムページでも横幅制限を解除して全幅にする */
    #column2.full_content .name_set {
        max-width: none;
    }
}




input#product, input#product_med, input#company, input#position, input#kana, input#email, input#emailcheck, input#address02, input#address03, input#place, input#tel1,input, textarea{
    width: 100%;
    border: solid 1px #CCCCCC;
    border-radius: 3px;
    box-sizing: border-box;
    padding: 15px 10px;
}

input#unit_med{
    padding: 8px 10px;
}

input.med_ip{
    padding: 8px 10px;
}



input#submitbutton{
    width: auto;
    border:none;
}

select{
    padding: 7px;
}



div#column2.full_content {
    width: 100%;
}


@media only screen and (max-width: 768px) {
/* --- 郵便番号と住所検索（スマホ用） --- */
    .zip_set {
        display: flex !important;
        flex-wrap: wrap !important; /* 画面が極端に狭い場合はボタンを安全に改行させる */
        align-items: center !important;
        gap: 10px !important;       /* 入力枠とボタンの間の隙間 */
        width: 100% !important;
    }

    /* PC版で設定した幅指定（50%や196px）をスマホではリセット */
    .zip_set > div.left,
    .zip_set > div.sa_add {
        display: flex !important;
        align-items: center !important;
        width: auto !important;
        flex: 0 1 auto !important;
        height: auto !important;
        margin: 0 !important;
    }

    span#zipcode {
        display: flex !important;
        align-items: center !important;
        width: auto !important;
    }

    /* スマホでのテキストボックスの高さ・余白統一 */
    .zip_set input[type="text"] {
        padding: 15px 10px !important;
        height: 1.4em !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    input#zipcode1 {
        width: 60px !important;
        flex: 0 0 60px !important; /* 固定幅 */
    }

    .zip_set .mr5 {
        display: block !important;
        margin: 0 5px !important;
    }

    /* ★ここが一番重要！スマホでは下4桁が伸びないように固定幅でストップさせる */
    input#zipcode2 {
        width: 80px !important;
        flex: 0 0 80px !important; /* PC版の flex: 1 (限界まで伸びる) を強制キャンセル */
    }

    /* 検索ボタンのサイズ固定 */
    .zip_set > div.sa_add img {
        width: 100px !important;
        height: auto !important;
    }

    .formError {
        position: relative !important;   /* 浮かせずに配置（これで下の項目が下がります） */
        /* display: block !important;    ← ★この行を削除しました（JSの表示制御を有効にするため） */
        
        top: auto !important;
        left: auto !important;
        margin-top: 0px;      /* 入力欄との隙間 */
        margin-bottom: 10px !important;  /* 下の要素との隙間 */
        width: auto !important;
        z-index: 100;
        box-shadow: none !important;     /* スマホで変な影が出ないようにリセット（任意） */
    }
    
    /* 吹き出しの矢印位置などの微調整（必要であれば） */
    .formError .formErrorArrow {
        margin-left: 10px !important;
    }
}

.name_block label {
    cursor: text;
}



/* カレンダー用の隠し要素に色がつくのを防ぐ */
input.dp_obj.is-selected {
    background-color: transparent !important;
    border: none !important;
}

/* --- green.css 末尾 --- */

/* レンタル期間の外枠：全体を横並びにする */
.rental_set {
    display: flex;
    align-items: flex-start; /* 上揃えにして、エラーが出てもプルダウンの位置がズレないようにする */
}

/* 入力欄の囲み：ここは縦並び（ブロック）にして、エラーを下に落とす */
.rental_input_box {
    display: block;
    position: relative;
    width: 100px; /* input#rentalterm の幅に合わせる */
    margin-right: 10px; /* プルダウンとの余白 */
}

/* 入力欄自体の幅指定（念のため継承） */
.rental_input_box input#rentalterm {
    width: 100% !important;
    min-height: 30px;
}

/* プルダウン側の調整 */
.rental_set .ex_comment {
    white-space: nowrap;    /* 改行禁止 */
    margin-left: 0;         /* 余白は .rental_input_box 側でとったので0にする */
}

/* エラーメッセージ（チップ）の位置調整 */
.rental_set .formError {
    position: relative !important; /* 絶対配置だと浮いてしまう場合があるので相対配置に */
    margin-top: 5px; /* 入力欄との隙間 */
    z-index: 100;
}
@media only screen and (max-width: 768px) {
    /* フォーム内のすべての入力要素の幅計算を変更し、はみ出しを防ぐ */
    .mod_form input,
    .mod_form select,
    .mod_form textarea,
    .mod_form table {
        box-sizing: border-box !important; /* paddingとborderを幅に含める */
        max-width: 100% !important;        /* 親要素より大きくならないように制限 */
    }

    /* テーブル自体の余分な幅指定をリセット */
    .mod_form table tr td {
        width: autot; /* sp_2022.cssの width:96% 等を解除 */
        display: block; /* スマホではセルを縦積みにするのが安全 */
    }
}

@media only screen and (max-width: 768px) {
    /* 1. フォーム外枠の右余白確保 */
    div.mod_form {
        padding-right: 12px !important; 
        box-sizing: border-box !important;
    }

    /* 2. 入力欄とプルダウンを「横並び」かつ「上揃え」にする */
    .rental_set {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: flex-start !important; /* ★ここを変更：エラーが出ても位置が下がらないように上端で固定 */
    }

    /* 3. 左側の入力欄（数値）の幅固定 */
    .rental_input_box {
        width: 100px !important;
        flex-shrink: 0 !important;
        margin-right: 10px !important;
        margin-bottom: 0 !important;
    }

    /* 4. 右側のプルダウン＋注釈エリアの調整 */
    .rental_set .ex_comment {
        white-space: normal !important;
        display: block !important;
        flex: 1 !important;
        line-height: 1.4;
    }
    
    /* プルダウン自体の幅調整 */
    .rental_set select#kibo_my {
        width: auto !important;
        display: inline-block !important;
    }
}


/* =========================================================
   #column2 専用：入力フォームの高さ・余白統一（PC/SP共通）
   ========================================================= */

/* 1. 全てのテキスト入力欄・プルダウン・テキストエリアの高さを統一 */
#column2 .mod_form input[type="text"],
#column2 .mod_form input[type="tel"],
#column2 .mod_form input[type="email"],
#column2 .mod_form input[type="number"],
#column2 .mod_form input[type="password"] {
    height: 1.4em;           /* 1.4emなどの固定高さを解除 */
    padding: 15px 10px !important;     /* 余白を統一して高さを揃える */
    box-sizing: border-box !important; /* 線や余白を幅・高さに含める */
    line-height: 1.4 !important;       /* 行の高さを統一 */
    margin: 0 0 10px 0 !important;     /* 下の余白も統一 */
    font-size: 100%;                   /* フォントサイズを統一 */
}
/* 2. セレクトボックス（ここを分離して調整） */
#column2 .mod_form select {
    height: auto !important;          /* 高さは中身に合わせる */
    padding: 7px!important;     /* ★余白を15pxから7pxに減らす */
    box-sizing: border-box !important;
    line-height: 1.4 !important;
    margin: 0 0 10px 0 !important;
    font-size: 100%;
    vertical-align: middle;           /* 位置合わせ */
}
/* 2. 郵便番号入力欄（小さい枠）の調整 */
/* 上記設定で幅が100%になってしまうのを防ぎ、横並びにする */
#column2 input#zipcode1 {
    width: 60px !important;
    display: block !important;
    flex-shrink: 0 !important;
}
#column2 input#zipcode2 {
    width: auto !important;     /* 100px固定を解除 */
    display: block !important;
    flex: 1 !important;         /* ★これで姓の右端までピタリと伸びます */
    min-width: 0 !important;
}

/* 郵便番号のハイフン調整 */
#column2 .zip_set .mr5 {
    display: block !important; /* Flexアイテムとして配置 */
    margin: 0 8px 9px 8px !important;  /* 左右の隙間だけ確保 */
    padding: 0 !important;     /* ★重要：古いpadding-topの10pxをリセット */
    flex-shrink: 0 !important; /* ハイフンが潰れるのを防ぐ */
}

/* 3. 住所検索ボタンの位置調整 */
/* テキストボックスが高くなった分、ボタンも垂直位置を合わせる */
#column2 .sa_add img {
    width: auto !important;
    vertical-align: top !important;
    margin-bottom: 10px;
}

/* 4. チェックボックス・ラジオボタンは高さ変更の対象外にする */
/* これを入れないとチェックボックスまで巨大化してしまいます */
#column2 .mod_form input[type="checkbox"],
#column2 .mod_form input[type="radio"] {
    height: auto !important;
    width: auto !important;
    padding: 0 !important;
    margin: 0 5px 0 0 !important;
    display: inline-block !important;
}

/* =========================================================
   郵便番号と住所検索ボタンのレイアウト
   ========================================================= */
/* 1. 郵便番号とボタンを囲む大枠を、姓名(.name_set)と全く同じ設定にする */
td.zip_set {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important; /* ★ centerをやめて「上揃え」に完全固定（エラーで下がらないようにする） */
    width: 100% !important;
}

/* ★ 1カラム(#column1)の時は、姓名と同じ 412px の制限をかける */
#column1 td.zip_set {
    max-width: 412px !important;
}

/* 2. 郵便番号エリア(左)と、ボタンエリア(右)を、姓名(.name_block)と全く同じ幅にする */
td.zip_set > div.left,
td.zip_set > div.sa_add {
    width: calc(50% - 10px) !important; /* 姓名の半分サイズとピタリと一致 */
    flex: 0 0 calc(50% - 10px) !important;
    margin: 0 !important; /* 既存のmr10(右余白10px)を完全に消す */
    padding: 0 !important;
}

/* 3. 郵便番号の入力枠の調整（長すぎるのを防ぐ） */
span#zipcode {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
}
input#zipcode1 {
    width: 60px !important; /* 3桁用は固定幅 */
    flex-shrink: 0 !important;
}
.zip_set .mr5 {
    display: block !important;
    margin: 0 8px !important;
    padding: 0 !important;
    flex-shrink: 0 !important;
}
input#zipcode2 {
    flex: 1 !important; /* ★残りの空間だけを埋める＝姓の右端でピタリと止まる */
    width: auto !important; 
}

/* 4. 住所検索ボタンの拡大防止（名ブロックの左端に揃う） */
td.zip_set > div.sa_add {
display: flex !important;
    height: 42px !important; /* ★ テキストボックスとほぼ同じ高さ(52px)の枠を作る */
    align-items: center !important; /* ★ その52pxの枠内で画像を上下中央に（これで上付きが直ります） */
    justify-content: flex-start !important;
}
td.zip_set > div.sa_add img {
    width: auto !important; /* ★ここが100%になっていたのが巨大化の原因でした！ */
    max-width: 100% !important;
    height: auto !important;
}


/* #column2内の「町名・番地」と「電話番号」の高さのみを修正 */
#column2 #address03,
#column2 input[name="tel"] {
    height: 1.4em;           /* 固定高さを解除 */
    padding: 15px 10px !important;     /* 他の項目（会社名など）と同じ余白を強制適用 */
    box-sizing: border-box !important; /* 枠線や余白をサイズ計算に含める */
}
/* 検索ボタン等の画像ボタン（type="image"）のスタイルをリセット */
input[type="image"] {
    border: none !important;       /* 枠線を消す */
    width: auto !important;        /* 幅100%を解除 */
    padding: 0 !important;         /* 余白(15px 10px)を解除 */
    background: none !important;   /* 背景色などを解除 */
    box-shadow: none !important;   /* 影があれば解除 */
    box-sizing: content-box !important;
}



/* =========================================================
   エラーメッセージ（チップ）の幅を「姓名」に完全に合わせる
   ========================================================= */
/* 1. 全体共通のベース設定（改行ルールなど） */
.formError .formErrorContent {
    white-space: normal !important;   /* 長い文章は枠内で綺麗に折り返す */
    line-height: 1.4 !important;      /* 行間を少し開けて読みやすくする */
    box-sizing: border-box !important;
}

/* 2. 1カラム（#column1）の場合は 196px に固定 */
#column1 .formError .formErrorContent {
    width: 196px !important;
    max-width: 196px !important;
}

/* 3. 2カラム（#column2）の場合は 191.64px に固定（★ご指摘の通り） */
#column2 .formError .formErrorContent {
    width: 191.64px !important;
    max-width: 191.64px !important;
}

/* =========================================================
   数量（how_many）だけは現在のままにする例外指定
   ========================================================= */
/* PC表示（デフォルト）: 右に移動し、幅を元の設定(auto)に戻す */
div[id^="err_how_many_"] {
    margin-left: 44px !important;
}
div[id^="err_how_many_"] .formErrorContent {
    width: auto !important;           /* 196pxや191.64pxの強制固定を解除 */
    max-width: 220px !important;      /* システムの初期値に戻す */
}

/* SP表示（スマホ）: 左に移動し、幅を100pxに */
@media only screen and (max-width: 768px) {
    /* 1. 位置を左に移動 */
    div[id^="err_how_many_"] {
        margin-left: -16px !important;
    }

    /* 2. チップの幅を100pxに変更 */
    div[id^="err_how_many_"] .formErrorContent {
        width: 100px !important;
        max-width: 100px !important; /* スマホ時は100pxで固定 */
    }
    
    /* 3. 吹き出しの矢印（ツノ）の位置調整 */
    div[id^="err_how_many_"] .formErrorContent::after,
    div[id^="err_how_many_"] .formErrorContent::before {
        left: 62px !important; 
    }
}

/* 矢印の位置ズレ防止（念のため） */
.formError  .formError {
    width: 100% !important;       /* コンテナ自体の幅も入力欄に合わせる */
}
}
/* =========================================================
   iPhoneでの数字入力時のカクつき（下に下がる現象）の防止
   ========================================================= */
@media only screen and (max-width: 768px) {
    /* レンタル期間の入力欄の高さを「完全固定」にして変動を防ぐ */
    .rental_input_box input#rentalterm {
        height: 30px !important;       /* autoを解除し、他の項目と高さを合わせる固定値に */
    }
}

textarea {
  resize: vertical;
}

/* =========================================================
   1カラム(#column1)専用の最終調整：テーブルの拡張を無視して絶対値(px)で固定
   ========================================================= */
@media only screen and (min-width: 769px) {
    /* テーブルセルを左寄せにし、姓名と同じ 20px の隙間を強制する */
    #column1 td.zip_set {
        display: flex !important;
        justify-content: flex-start !important; 
        gap: 20px !important;
    }

    /* 郵便番号枠と検索ボタン枠を、姓名枠の横幅(196px)と1ミリの狂いもなく一致させる */
    #column1 td.zip_set > div.left,
    #column1 td.zip_set > div.sa_add {
        width: 196px !important;
        flex: 0 0 196px !important;
        max-width: 196px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    /* 郵便番号の下4桁(zipcode2)が 196px の枠内で右端までピタリと伸びるようにする */
    #column1 input#zipcode2 {
        width: auto !important;
        display: block !important;
        flex: 1 !important;
        min-width: 0 !important;
    }
}
/* =========================================================
   【重要】スマホ専用の最終上書き（絶対に一番下に記述してください）
   ========================================================= */
@media only screen and (max-width: 768px) {
    /* 1カラム・2カラム共通：スマホでは「限界まで伸ばす(flex:1)」を完全に無効化する */
    #column1 input#zipcode2,
    #column2 input#zipcode2,
    input#zipcode2 {
        flex: 0 0 80px !important; /* 伸びるのを強制ストップ */
        width: 80px !important;    /* 80pxの固定幅にする */
        min-width: 80px !important;
    }
    /* ▼▼▼ 追加：郵便番号のエラーチップのズレ解消 ▼▼▼ */
    /* 1. 位置の基準点を「郵便番号の枠（td）」に設定する */
    td.zip_set {
        position: relative !important;
    }
    
    /* 2. 郵便番号のエラーチップだけは割り込ませず、絶対配置で下に浮かせる */
    #column1  div[id^="err_zipcode"] {
        position: absolute !important;
        top: 50% !important;        /* テキストボックス群のすぐ下 */
        left: 0 !important;          /* 左端に揃える */
        margin-top: 5px !important;  /* 少しだけ下に隙間をあける */
    }
    #column2  div[id^="err_zipcode"] {
        position: absolute !important;
        top: 66% !important;        /* テキストボックス群のすぐ下 */
        left: 0 !important;          /* 左端に揃える */
        margin-top: 5px !important;  /* 少しだけ下に隙間をあける */
    }
    /* ▲▲▲ 追加ここまで ▲▲▲ */
    
    /* 念のため、画面が極端に狭い端末(iPhone SE等)ではボタンを下に逃がす設定 */
    #column1 td.zip_set,
    #column2 .zip_set,
    td.zip_set {
        flex-wrap: wrap !important; 
    }
}