@charset "UTF-8";

/* ==================================================
   test/form 共通スタイル（PHP/元サイトCSS非依存）
   - ページ枠(header/main/card/footer)は test/index.html に合わせる
   - フォーム部品は元の form/inc/css/contact.css・error.css から
     必要部分を移植（画像参照は img/ へ）
   ================================================== */

*{box-sizing:border-box}
body{margin:0;background:#f4f6f9;color:#333;font-family:"Hiragino Kaku Gothic ProN","Meiryo",sans-serif;font-size:15px;line-height:1.8}
img{border:0;max-width:100%;height:auto}
ul,ol{margin:0;padding:0;list-style:none}
p{margin:0 0 12px}
a{color:#0068b7}
header{background:#fff;border-bottom:3px solid #0068b7;padding:16px 20px}
header .in{max-width:900px;margin:0 auto}
header img{height:52px;width:auto;display:block}
main{max-width:900px;margin:32px auto;padding:0 20px}
.card{background:#fff;border-radius:8px;box-shadow:0 1px 4px rgba(0,0,0,.08);padding:36px 32px}
.card h2.ptitle{margin:0 0 20px;padding:0 0 10px;font-size:1.6rem;line-height:1.4;color:#0068b7;border-bottom:2px solid #0068b7}
.card h3{margin:28px 0 14px;padding:2px 0 2px 10px;font-size:1.1rem;line-height:1.5;border-left:5px solid #0068b7}
.card h4{margin:24px 0 12px;padding-bottom:4px;font-size:1rem;border-bottom:2px dotted #b9c6d6}
.card h4:before{content:"\25CF";padding-right:5px;color:#0068b7}
.card h5{margin:0 0 5px;font-size:1rem;color:#0068b7}
.back{margin-top:28px;text-align:center}
footer{margin-top:24px;background:#fff;border-top:3px solid #0068b7;color:#555;padding:28px 20px 32px;text-align:center;font-size:.85rem}
footer img{height:44px;width:auto;display:block;margin:0 auto 12px}
footer a{color:#0068b7}
@media(max-width:600px){.card{padding:24px 16px}.card h2.ptitle{font-size:1.3rem}main{padding:0 12px}}

/* - - - 汎用 - - - */
.cf:after{content:".";display:block;clear:both;height:0;visibility:hidden}
.flex{display:flex;justify-content:space-between;flex-wrap:wrap}
.mgb20{margin-bottom:20px!important}
.mgb30{margin-bottom:30px!important}
.maT40{margin-top:40px!important}
.mgL20{margin-left:20px}
.fwb,.bold{font-weight:bold}
.hidden{display:none;visibility:hidden}
.smalltxt,.small{font-size:.85em}
.black{color:#000}
.txtlink{color:#0068b7;text-decoration:underline}
a.arrowlink{display:inline-block;padding:6px 10px 6px 15px;color:#0068b7;text-decoration:underline;background:url(img/arrow_r.png) no-repeat left 50%;background-size:8px}
ul.disc li{list-style:disc;margin-left:20px}
.txt_list li{padding-left:1em;text-indent:-1.3em;margin-bottom:10px}
.txt_list li:before{content:"・ ";color:#0068b7}
.contact{margin:0}
.contact h3,.contact h4{font-size:1rem}

/* - - - お問い合わせの前に／お問い合わせについて（inquiry） - - - */
.trouble_box{border:solid 2px #0068b7;border-radius:5px}
.trouble_box h4{margin:0;padding:10px;color:#fff;background:#0068b7;border-bottom:0;font-size:1rem}
.trouble_box h4:before{content:none}
.trouble_box .txt_list{padding:10px}
.trouble_box .anklink{padding-left:1em}
.contact-notice{color:#c52631;font-weight:bold;padding-left:1em;text-indent:-1em}
.chatbot-link-block{margin-left:1em;margin-bottom:10px}
a.chatbot-btn{display:flex;align-items:center;width:360px;max-width:100%;border:none;border-radius:6px;justify-content:center;font-weight:600;padding:7px;color:#fff;background-color:#0068b7;text-decoration:none}
.chatbot-btn-icon{display:inline-block;width:0;height:0;margin-left:6px;border:6px solid transparent;border-left:9px solid #fff}
form#mailformpro .form_attention a,.trouble_box a{color:#0068b7}

/* - - - 申込みの流れ（trial / inquiry見積） - - - */
.num_list_side{margin-bottom:20px}
.num_list_side li{width:32%;border:1px solid #cdcdcd;position:relative}
.num_list_4_inq li{width:24%}
.num_list_side li:not(:last-child):after{content:"";border:12px solid transparent;border-left:12px solid #0068b7;position:absolute;right:-25px;bottom:50%;margin-bottom:-12px;z-index:1}
.num_list_side li figure{margin:0;text-align:center}
.num_list_side li dl{display:flex;flex-wrap:nowrap;align-items:center;padding:10px;min-height:70px;margin:0}
.num_list_side li dt{flex:0 0 30px;width:30px;height:30px;text-align:center;line-height:30px;background:#fff;border-radius:100px;color:#0068b7;font-weight:bold;margin-right:5px}
.num_list_side li dd{margin:0;font-weight:bold;width:84%}
.num_list_side li.num01 dl{background:#b7d3ec}
.num_list_side li.num02 dl{background:#8fb9de}
.num_list_side li.num03 dl{background:#5e9bd0}
.num_list_side li.num04 dl{background:#3a85c6}
.num_list_side li p{padding:10px;margin-bottom:0;font-size:.9rem}
@media(max-width:600px){
  .num_list_side li,.num_list_4_inq li{width:100%;margin-bottom:10px}
  .num_list_side li:not(:last-child):after{border:12px solid transparent;border-top:12px solid #0068b7;right:50%;bottom:-20px;margin-right:-12px;margin-bottom:0}
  .num_list_side li dl{min-height:0}
}

/* - - - table まわり - - - */
.contact table{width:100%;border-collapse:collapse;border-spacing:0;border-top:1px dashed #b9c6d6;table-layout:fixed;text-align:left}
.contact table th{width:32%;font-weight:bold;text-align:left;vertical-align:middle;background:#eef3f9}
.contact table td{width:68%;display:table-cell!important;text-align:left;vertical-align:middle}
.contact table th,.contact table td{padding:10px;border:0;border-bottom:1px dashed #b9c6d6}
.contact table p{margin-bottom:0}
.contact table#tab05_2 th,.contact table#tab06_2 th,.contact table#tab01 th{width:32%}
.contact table ul{padding-left:0}
.contact table ul li{margin-bottom:5px;line-height:1.4;list-style:none}
.contact table ul li input{margin-right:5px}
.contact table th span{font-size:.9em}
.contact table th .small01{font-size:.8rem;line-height:1rem;font-weight:normal;padding-bottom:.5rem}
.contact table th img{vertical-align:middle}
.contact table .neo li{margin-bottom:0}
.contact table.form,.contact table.entry{margin-bottom:0}

/* 任意・必須・複数選択マーク */
.contact table th.any{padding-right:50px;background:url(img/ico_any.gif) no-repeat right 10px top 50% #eef3f9;background-size:35px}
.contact table th.required{padding-right:50px;background:url(img/ico_required.gif) no-repeat right 10px top 50% #eef3f9;background-size:35px}
.contact table th.multiple{padding-right:50px;background:url(img/ico_multiple.gif) no-repeat right 10px top 50% #eef3f9;background-size:75px}
.contact table th.required-multiple{padding-right:50px;background-image:url(img/ico_required.gif),url(img/ico_multiple.gif);background-size:35px,75px;background-repeat:no-repeat;background-position:right 10px top 50%,right 10px top 66%;background-color:#eef3f9}
.contact table th.no_ico{padding-right:10px;background:#eef3f9}

.entry_sup01{padding:.2em 1em;background:#f0f7ff;border:dashed 2px #5b8bd0}
.entry_sup002{margin-top:1rem;font-weight:bold;margin-bottom:.5rem;background:#0068b7;color:#fff;border-radius:50px;padding:3px 10px;display:inline-block}
.entry_sup002_1{font-weight:bold;color:#0068b7;line-height:1.2rem;margin-bottom:1rem!important}

/* note */
p.note{color:#c52631}
p.note.small{font-size:.8em}
table p.note.small{margin-top:5px}
.update_text{margin-top:5px;font-size:13px;line-height:1.4}

/* - - - input等 - - - */
.email,.digits,.telnum,.postcode,.post_code,.mail_address,.mail_address_again,.tel,.id,.lot{-ms-ime-mode:disabled;ime-mode:disabled}
.clear{clear:both}
.contact input,.contact textarea{margin:1px 0;padding:5px;resize:vertical;border:1px solid #a4a4a4;font-size:inherit;font-family:inherit}
.contact input:focus,.contact textarea:focus,.contact select:focus{background-color:#fffbe8}
.contact input[type="file"]{border:0}
.contact input[type="file"]:focus{background-color:#fff}
.contact textarea{width:85%;font-family:"Hiragino Kaku Gothic ProN","Meiryo",sans-serif;font-size:100%;height:138px}
.contact select{padding:5px;border:1px solid #a4a4a4;font-size:inherit;font-family:inherit;max-width:100%}
.contact input[type="radio"],.contact input[type="checkbox"]{margin:0 5px 0 0;width:auto!important}
.textarea p+p{display:none}
.post_mark{float:left;padding:3px 5px 0 0}
.name_width input{width:40%}
.name_sei,.name_mei,.post_code,.trigger_other{margin-left:5px}
.name_sei{margin-right:10px}
span.name_sei{margin-left:0}
.control-group input,.control-group textarea{margin-right:5px}
.control-group input.postcode{width:30%;min-width:150px}
.contact .control-group.email label{margin-top:4px}
.contact table td.email.conf{border-bottom:1px dashed #b9c6d6!important}
.contact table td.email input{margin-top:3px}
td.textarea{position:relative}
input.know_text{position:relative;z-index:0;margin-top:3px}
.files input{color:#555;border:none;background:#fff;width:100%}
input.hidden{display:none!important}
.hide{display:none!important}
.contact select option{padding:5px;padding-top:0}
.contact select option.color1{background:#fdeef5}
.contact select option.color2{background:#fdede4}
.contact select option.color3{background:#eaf6fd}
.contact select option.color4{background:#eeefef}
.contact select option.color5{background:#ebf5ec}
.contact select option.color6{background:#e6ffe9}
.contact table .trial_reason td{font-size:.9rem}
.entry li label{font-size:.9rem}
div.list{margin-top:10px;padding-bottom:10px;text-indent:-1em;margin-left:1.5em;font-weight:bold}
p.line{border-top:2px dashed #b9c6d6;padding-bottom:10px}
.ico_001_app,.ico_002_app,.ico_004_app{padding-left:55px;min-height:2rem;background-repeat:no-repeat;background-position:left top;background-size:50px}
.ico_001_app,.ico_002_app{background-image:url(img/ico_app_01.png)}
.ico_004_app{background-image:url(img/ico_app_04.png)}
.ico_005_wol{padding-left:38px;background:url(img/ico_wol.png) no-repeat left top;min-height:2.5rem;background-size:40px;margin-top:.5rem}
.ico_001{padding-left:55px;background:url(img/ico_usb_a.png) no-repeat left top;min-height:2.1rem;background-size:30px}
.ico_002{padding-left:55px;background:url(img/ico_usb_a.png) no-repeat left top;min-height:2.1rem;background-size:35px}

/* trial 動的テーブル（OS別） */
.contact table#tr1 tbody,.contact table#tr1 tr,
.contact table#choose_windowsios tbody,.contact table#choose_windowsios tr,
.contact table#choose_macios tbody,.contact table#choose_macios tr{width:100%;display:block!important}
.contact table#tr1,.contact table#choose_windowsios,.contact table#choose_macios{table-layout:auto;display:table}
.contact table#tr1 th,.contact table#choose_windowsios th,.contact table#choose_macios th{width:362px!important}
.contact table#tr2 img{max-width:100%;height:auto}
.contact table#choose_windowsios img{width:100%;max-width:400px;height:auto}

/* - - - 注意事項・案内ボックス - - - */
p.form_attention{padding-top:30px}
.form_ConfirmBox{margin:30px auto;padding:10px;border:1px solid #f00;background:#fdf3ed}
div.yellow_box{width:100%;margin:30px auto;padding:10px;background:#ffeea6;border:2px solid #f5ac30;line-height:1.5}
div.yellow_box ul li{list-style:disc;margin-top:8px;margin-left:30px}
.error_list{width:100%;margin:20px 0;padding:20px;color:#c52631;border:1px solid #c52631;background:#fcebeb}
.error_list.hidden{display:none}
.error_list li{list-style:none}
.error_text{font-weight:bold;display:block;clear:both;width:100%;margin:5px 0;padding:3px 9px;color:#fff;background:#c52631}
summary{display:block;font-size:.9rem;color:#0068b7;text-decoration:underline;margin-bottom:10px;cursor:pointer}
summary:before{content:url("img/arrow_r.png");padding-left:20px}
summary:hover{opacity:.7}
div.phone{margin-bottom:40px}
div.phone p{margin-top:10px;line-height:1.5}

/* - - - タブ（お問い合わせ種別 inquiry） - - - */
.tab_group .tabs{clear:both;overflow:hidden;margin-top:30px}
#tab01,#tab02{margin:0 auto}
.form_type_tab{border:2px solid #0068b7;padding:10px;margin:5px 2px 20px;background:#eef3f9;overflow:hidden}
.form_type_tab ul{display:flex;flex-wrap:wrap}
.form_type_tab1{display:block;margin:0 5px 10px;width:270px;padding:10px 5px;background:#fff;border-radius:5px;cursor:pointer}
.form_type_tab1_text{display:block;margin:6px 10px 0;font-size:small;cursor:pointer}
.form_type_tab1 label{font-weight:bold;cursor:pointer}
@media(max-width:600px){.form_type_tab1{width:100%;margin:0 0 10px}}

/* - - - 送信・確認ボタン（mailformpro含む） - - - */
#send_support,#send,#mfp_button_send,#mfp_button_cancel{margin:10px auto;cursor:pointer;border:none;background:#0068b7 url(img/arrow_w.png) no-repeat right 10px bottom 50%;background-size:15px;display:block;min-width:100px;padding:10px 30px 10px 10px;font-size:1.2rem;color:#fff;font-weight:bold;text-decoration:none!important;text-align:center;text-shadow:none;border-radius:0}
#mfp_button_send,#mfp_button_cancel{display:inline-block}
#mfp_button_cancel{margin-left:10px;padding:10px;background:#ccc;color:#333}
#send_support:hover,#send:hover,#mfp_button_send:hover,#mfp_button_cancel:hover{opacity:.8}
.contact.confirm table th{width:340px;padding-right:0;background:#eef3f9}
.contact.confirm .btnarea{text-align:center}
form#mailformpro label.mfp_not_checked{padding:0!important;border:0!important}
input[type="checkbox"]{outline:none!important}

/* 郵便番号ガイダンス（mailformpro） */
#autozip{padding:5px 10px!important;border:1px solid #0068b7;background:#fff!important}
#autozip span{display:inline-block;padding:7px 2px 5px!important;font-weight:bold!important;color:#0068b7!important;white-space:nowrap}
#autozip a{font-size:12px!important;line-height:1.4;color:#333!important;background:#fff!important}
#autozip a:hover{color:#0068b7!important;text-decoration:underline!important}

/* 送信完了ページ */
.contact.complete p,.contact.confirm p{margin-bottom:12px}

@media(max-width:480px){
  .contact table th,.contact table td{width:100%!important;display:block!important}
  .contact table td input,.contact table textarea,.contact select{width:100%!important}
  .contact table td input.mfp_element_checkbox,.contact table td input[type="radio"],.contact table td input[type="checkbox"]{width:auto!important}
  .contact table#tr1 th,.contact table#choose_windowsios th,.contact table#choose_macios th{width:100%!important}
  .contact table th.required,.contact table th.any,.contact table th.multiple{padding-right:50px}
  .control-group input,.control-group textarea{float:none}
  a.chatbot-btn{width:100%}
  input,select,textarea{font-size:16px!important}
}

/* 狭い画面で入力欄がはみ出さないようにする */
.contact table td input:not([type="radio"]):not([type="checkbox"]):not([type="file"]),.contact table td textarea,.contact table td select{max-width:100%;box-sizing:border-box}
@media(max-width:600px){
  .contact table th,.contact table td{width:100%!important;display:block!important}
  .contact table td input:not([type="radio"]):not([type="checkbox"]),.contact table textarea,.contact select{width:100%!important}
}

/* 表示切り替え(JS)で display:block にされた table を、表として表示する（契約ID欄のずれ対策） */
.contact table[style*="display: block"],.contact table[style*="display:block"]{display:table!important}

/* チャットボットのボタン文字色（.contact a の青で上書きされて見えなくなるのを防ぐ） */
.contact a.chatbot-btn,.contact a.chatbot-btn:hover,.contact a.chatbot-btn:visited{color:#fff!important;text-decoration:none}

/* お問い合わせ種別（3つのラジオボタン）を1行に並べる */
.form_type_tab ul{flex-wrap:nowrap;gap:10px;margin:0;padding:0}
.form_type_tab1{flex:1 1 0;min-width:0;width:auto;margin:0}
@media(max-width:800px){
  .form_type_tab ul{flex-direction:column}
  .form_type_tab1{width:100%;margin:0}
}
.form_type_tab1 > label:not(.form_type_tab1_text){white-space:nowrap}
form#mailformpro .form_type_tab1 label.mfp_checked{padding:4px 6px}

/* ラジオボタンの選択肢（ul の無い li を含む）の先頭の「・」を消す */
.contact table td li{list-style:none}