株式会社Ｋ・テクノ

電話でのお問い合わせ
メールでのお問い合わせ

Contact

お気軽にお問い合わせください。

/* Blocks */ .ctcForm { margin-bottom: 2em; } .ctcForm input, .ctcForm textarea, .ctcForm select { display: block; } .formField { list-style: none; padding: 10px 15px; } .formField:not(:last-of-type) { margin-bottom: 10px; } .formItems { display: flex; align-items: flex-start; flex-direction: column; column-gap: 0; row-gap: .5rem; } .formHead { display: flex; align-items: center; justify-content: center; column-gap: 10px; row-gap: 7px; flex-shrink: 0; background-color: #eee; width: 100%; height: 3rem; } .formBody { display: block; border-bottom: 1px solid var(–wp–preset–color–blue); width: 100%; min-height: 3rem; } .only-screenReader { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } .formInput { width: 100%; height: 3rem; background-color: transparent; border: 1px solid transparent; padding: 0 1rem; } .formInput.form-txtArea { height: auto; min-height: 5rem; padding-top: .5rem; padding-bottom: .5rem; } .formInput:focus-visible { outline: 2px solid var(–wp–preset–color–light-blue); z-index: 1; } .formInput::placeholder { opacity: .5; } /* Select Box */ .customSelecWrap { display: block; position: relative; max-width: 10rem; margin: 0 auto; } .customSelecWrap::after { content: ”; display: block; background: var(–wp–preset–color–contrast); clip-path: polygon(0 0, 50% 100%, 100% 0); width: 1rem; height: .5rem; position: absolute; top: 50%; right: 10px; transform: translate(0, -50%); pointer-events: none; } .customSelecWrap select { -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; } /* Fonts */ .formTtl { font-size: var(–wp–preset–font-size–x-small); font-weight: 600; line-height: 1; } .mustMark { font-size: .65rem; font-weight: 400; color: #fff; line-height: 1; background-color: var(–wp–preset–color–blue); width: fit-content; padding: 5px 15px 5px; } .formInput { font-family: var(–wp–preset–font-family–noto-sans-horiz) !important; font-size: var(–wp–preset–font-size–x-small); } .notesOfInput { display: block; font-size: .75rem; text-align: center; padding: 0 1rem; } /* Validation */ .formField .formInput:has(+ .error) { border: 1px solid #dc5132f7 !important; background: #dc513240 !important; } .mw_wp_form .formField .error { font-size: 93%; color: #B70000; display: block; } /* Media Queries */ @media (min-width:782px) { .formItems { flex-direction: row; } .formHead { width: 15rem; justify-content: flex-start; padding: 0 2rem; } .formDivide { display: grid; grid-template-columns: 10rem 1fr; grid-column-gap: 10px; position: relative; } .formDivide::before { content: ‘／’; display: block; font-size: var(–wp–preset–font-size–medium); color: var(–wp–preset–color–contrast); position: absolute; top: 50%; left: calc(10rem + 5px); transform: translateY(-50%); } .formBody.formHasColumns .formInput { height: auto; min-height: auto; } .formInput.form-txtArea { padding: 0 1rem; } .notesOfInput { text-align: left; } }
‘use strict’; /* Additional ARIAs */ const formInputEmail = document.getElementById(‘formInput-email’); const formInputOrg = document.getElementById(‘formInput-org’); const formInputName = document.getElementById(‘formInput-name’); const formInputTel = document.getElementById(‘formInput-tel’); const formInputPostalCode = document.getElementById(‘formInput-postalCode’); const formInputPostalRegion = document.getElementById(‘formInput-postalRegion’); const formInputPostalAddr = document.getElementById(‘formInput-postalAddr’); const formInputInquiryDetails = document.getElementById(‘formInput-inquiryDetails’); const objAriasEmail = { ‘aria-labelledby’:’label-email’, ‘aria-describedby’:’description-email’, ‘inputmode’:’email’ } const objAriasOrg = { ‘aria-labelledby’:’label-org’, ‘aria-describedby’:’description-org’, } const objAriasName = { ‘aria-labelledby’:’label-name’, ‘aria-describedby’:’description-name’ } const objAriasTel = { ‘aria-labelledby’:’label-tel’, ‘aria-describedby’:’description-tel’, ‘inputmode’:’tel’ } const objAriasPostalCode = { ‘aria-labelledby’:’label-postalCode’, ‘aria-describedby’:’description-postalCode’, ‘inputmode’:’numeric’ } const objAriasPostalRegion = { ‘aria-describedby’:’description-postalRegion’, } const objAriasPostalAddr = { ‘aria-describedby’:’description-postalAddr’, } const objAriasInquiryDetails = { ‘aria-labelledby’:’label-inquiryDetails’, ‘aria-describedby’:’description-inquiryDetails’ } function ariasSet(elm,obj) { for(let i of Object.entries(obj)) { elm.setAttribute(i[0],i[1],i[2]); } } ariasSet(formInputEmail,objAriasEmail); ariasSet(formInputOrg,objAriasOrg); ariasSet(formInputName,objAriasName); ariasSet(formInputTel,objAriasTel); ariasSet(formInputPostalCode,objAriasPostalCode); ariasSet(formInputPostalRegion,objAriasPostalRegion); ariasSet(formInputPostalAddr,objAriasPostalAddr); ariasSet(formInputInquiryDetails,objAriasInquiryDetails);

Contact us

お問い合わせ

多彩な取扱商品ラインナップでお客様の要望にお応えいたします。お問い合わせはお電話またはメールにてお気軽にお寄せください。

電話でのお問い合わせ
メールでのお問い合わせ