株式会社 高杉商店株式会社 高杉商店

お問い合わせ

お問い合わせ
ご注文はこちら。

高杉商店へのお問い合わせやご注文は、このページからお気軽に行えます。
新鮮で安全な卵製品や食材に関するお問い合わせから、お店へのご注文まで、どんなご相談でもお待ちしております。
お客様のご要望に真摯にお応えし、お店とお客様との良いコミュニケーションの橋渡しをさせていただきます。
ぜひお気軽にお知らせください。

/* Basics */ :root { –formBody-height: 3.25rem; } .formField textarea, .formField input, .formField select { border: 1px solid #666666; border-radius: 5px; padding: 0 1rem; } .formField textarea { padding-top: 1rem; padding-bottom: 1rem; } .formField select { cursor: pointer; } .formField textarea:active, .formField input:active, .formField select:active, .formField textarea:focus, .formField input:focus, .formField select:focus, .formField textarea:focus-within, .formField input:focus-within, .formField select:focus-within, .formField textarea:target, .formField input:target, .formField select:target, .formField textarea:focus-visible, .formField input:focus-visible, .formField select:focus-visible { border-color: #824121; border-width: 2px; border-radius: 5px; } /* Blocks */ #contactMain .ctcFormWrap { max-width: 600px; padding-bottom: 5rem; } .ctcForm { list-style: none; padding-left: 0; } .formField:not(:last-of-type) { margin-bottom: 2rem; } .dividedBodyItems { list-style: none; padding-left: 0; display: flex; justify-content: space-between; –divided-gap: 25px; gap: var(–divided-gap); } .inputAddrGroup > .dividedBodyItems { gap: 0; } .inputAddrGroup > .dividedBodyItems:not(:last-child) { margin-bottom: 20px; } .dividedBody-item { width: calc(50% – var(–divided-gap) / 2); } .inputAddrGroup > .dividedBodyItems > .dividedBody-item:nth-of-type(2) { margin-right: var(–divided-gap); } .formHead { display: flex; align-items: center; column-gap: 12px; margin-bottom: 12px; } .formItems { width: 100%; } .formBody { height: var(–formBody-height); width: 100%; } .formBody.form-txtArea { height: auto; min-height: 15rem; } .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; } .withDecoration { position: relative; } .withCustomSelec > .customSelecWrap { display: block; position: relative; } .withCustomSelec > .customSelecWrap > select { -webkit-appearance: none; -moz-appearance: none; appearance: none; padding-right: 40px; } .withCustomSelec > .customSelecWrap::before, .withCustomSelec > .customSelecWrap::after { position: absolute; content: ”; pointer-events: none; } .withCustomSelec > .customSelecWrap::before { display: inline-block; width: 40px; height: calc(var(–formBody-height) – 14px); top: calc(var(–formBody-height) / 2); right: 2px; transform: translate(0, -50%); border-left: 1px solid #cdcdcd; } .withCustomSelec > .customSelecWrap::after { width: 0; height: 0; border-style: solid; border-right: 5px solid transparent; border-left: 5px solid transparent; border-top: 10px solid #666666; border-bottom: 0; top: calc(var(–formBody-height) / 2); right: 22px; transform: translate(50%, -50%); } /* Checkbox – Bottom Submit button */ .beforeSubmit { margin: 1.5rem 0 2.5rem; } .checkBeforeSubmit { display: flex; flex-direction: column; align-items: center; row-gap: 10px; width: fit-content; margin: auto; } .checkBeforeSubmit > .inputWrap { cursor: pointer; } .checkBeforeSubmit .inputWrap #checkSubmit + .labelTxt { padding-left: 1.75em; position: relative; } .checkBeforeSubmit .inputWrap #checkSubmit + .labelTxt::before, .checkBeforeSubmit .inputWrap #checkSubmit + .labelTxt::after { content: ”; display: block; position: absolute; } .checkBeforeSubmit .inputWrap #checkSubmit + .labelTxt::before { display: block; width: 1.25em; height: 1.25em; background-color: #fff; border: 1px solid #666666; border-radius: 5px; left: 0; top: 50%; transform: translate(0, -50%); } .checkBeforeSubmit .inputWrap #checkSubmit:focus + .labelTxt::before { box-shadow: 0 0 0 1px #824121; } .checkBeforeSubmit .inputWrap #checkSubmit + .labelTxt::after { display: none; border-left: 2px solid #f7450f; border-bottom: 2px solid #f7450f; width: 1.5em; height: .5em; left: .3em; top: calc(50% – 0.2em); -webkit-transform: translate(0, -50%) rotate(-45deg); transform: translate(0, -50%) rotate(-45deg); } .checkBeforeSubmit .inputWrap #checkSubmit[checked] + .labelTxt::after { display: block; } /* Buttons */ .formBtn.btn-submit[disabled], .formBtn.btn-submit[disabled]:hover { background-color: #aaaaaa; color: #828282; box-shadow: 0 0 0 4px #aaaaaa; } /* Fonts */ .formField textarea, .formField input, .formField select { font-size: var(–wp–preset–font-size–medium); font-family: var(–wp–preset–font-family–noto-sans-horiz); color: #313131; letter-spacing: 0.025rem; } .formField .formTtl { font-size: var(–wp–preset–font-size–medium); font-weight: 500; color: #f7450f; line-height: 1; } .formField .mustMark { display: grid; place-content: center; width: fit-content; height: 1.125rem; background-color: #f7450f; border-radius: .75rem; font-size: .75rem; color: #fff; line-height: 1; padding: 0 15px; } .formField .formBody:has(+ .error) { border: 1px solid #dc5132f7 !important; background: #dc513240 !important; } .inputAddrGroup .dividedBody-item { display: flex; align-items: center; } .inputAddrGroup .dividedBody-item.withDecoration::before { font-size: var(–wp–preset–font-size–x-large); font-weight: 500; color: #f7450f; line-height: 1; position: absolute; top: calc(var(–formBody-height) / 2); transform: translate(0, -50%); } .inputAddrGroup .dividedBody-item.withDecoration:first-of-type { padding-left: 2.5em; } .inputAddrGroup .dividedBody-item.withDecoration:first-of-type::before { content: ‘〒’; left: 0; } .inputAddrGroup .dividedBody-item.withDecoration:nth-of-type(2) { padding-left: 2em; } .inputAddrGroup .dividedBody-item.withDecoration:nth-of-type(2)::before { content: ‘-‘; left: 0.175em; } .submitNotes { font-size: var(–wp–preset–font-size–medium); font-weight: 500; color: #f7450f; } @media (max-width:767.98px) { .inputAddrGroup .dividedBodyItems { flex-wrap: wrap; row-gap: 20px; } .inputAddrGroup .dividedBody-item:nth-child(3) { width: 100%; padding: 0 25px; } }
  • お名前（カナ）必須
  • お名前（漢字）必須
  • 配送先住所必須
    Japan
‘use strict’; /* Additional ARIAs */ const formInputNameKana1 = document.getElementById(‘formInput-name-kana-1’); const formInputNameKana2 = document.getElementById(‘formInput-name-kana-2’); const formInputNameKanji1 = document.getElementById(‘formInput-name-kanji-1’); const formInputNameKanji2 = document.getElementById(‘formInput-name-kanji-2’); const formInputCompany = document.getElementById(‘formInput-company’); const formInputEmail = document.getElementById(‘formInput-email’); const formInputTel = document.getElementById(‘formInput-tel’); const formInputPostalCode1 = document.getElementById(‘formInput-postalCode-1’); const formInputPostalCode2 = document.getElementById(‘formInput-postalCode-2’); const formInputPostalRegion = document.getElementById(‘formInput-postalRegion’); const formInputPostalLocality = document.getElementById(‘formInput-postalLocality’); const formInputPostalExtAddr = document.getElementById(‘formInput-postalExtAddr’); const formInputInquirySubject = document.getElementById(‘formInput-inquirySubject’); const formInputInquiryDetails = document.getElementById(‘formInput-inquiryDetails’); const objAriasNameKana1 = { ‘aria-describedby’:’description-name-kana-1′ } const objAriasNameKana2 = { ‘aria-describedby’:’description-name-kana-2′ } const objAriasNameKanji1 = { ‘aria-describedby’:’description-name-kanji-1′ } const objAriasNameKanji2 = { ‘aria-describedby’:’description-name-kanji-2′ } const objAriasCompany = { ‘aria-labelledby’:’label-company’, ‘aria-describedby’:’description-company’ } const objAriasEmail = { ‘aria-labelledby’:’label-email’, ‘aria-describedby’:’description-email’, ‘inputmode’:’email’ } const objAriasTel = { ‘aria-labelledby’:’label-tel’, ‘aria-describedby’:’description-tel’, ‘inputmode’:’tel’ } const objAriasPostalCode1 = { ‘aria-describedby’:’description-postalCode-1′, ‘inputmode’:’numeric’ } const objAriasPostalCode2 = { ‘aria-describedby’:’description-postalCode-2′, ‘inputmode’:’numeric’ } const objAriasPostalRegion = { ‘aria-describedby’:’description-postalRegion’ } const objAriasPostalLocality = { ‘aria-describedby’:’description-postalLocality’ } const objAriasPostalExtAddr = { ‘aria-describedby’:’description-postalExtAddr’ } const objAriasInquirySubject = { ‘aria-labelledby’:’label-inquirySubject’, ‘aria-describedby’:’description-inquirySubject’ } 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(formInputNameKana1,objAriasNameKana1); ariasSet(formInputNameKana2,objAriasNameKana2); ariasSet(formInputNameKanji1,objAriasNameKanji1); ariasSet(formInputNameKanji2,objAriasNameKanji2); ariasSet(formInputCompany,objAriasCompany); ariasSet(formInputEmail,objAriasEmail); ariasSet(formInputTel,objAriasTel); ariasSet(formInputPostalCode1,objAriasPostalCode1); ariasSet(formInputPostalCode2,objAriasPostalCode2); ariasSet(formInputPostalRegion,objAriasPostalRegion); ariasSet(formInputPostalLocality,objAriasPostalLocality); ariasSet(formInputPostalExtAddr,objAriasPostalExtAddr); ariasSet(formInputInquirySubject,objAriasInquirySubject); ariasSet(formInputInquiryDetails,objAriasInquiryDetails); /* Before submit Checkbox */ const befSubmitAgreed = document.querySelector(‘#checkSubmit’); const btnSubmit = document.querySelector(‘.js–btnSubmit’); btnSubmit.setAttribute(‘disabled’,”); befSubmitAgreed.addEventListener(‘change’, () => { befSubmitAgreed.toggleAttribute(‘checked’); befSubmitAgreed.checked = btnSubmit.toggleAttribute(‘disabled’); });