/* Page-specific layout adapted from the KOI Thé reference. */
.contactWrap{padding:150px 95px 100px}
@media print, screen and (max-width: 99.99875em){.contactWrap{padding:100px 95px 80px}
}
@media print, screen and (max-width: 64.06125em){.contactWrap{padding:120px 20px 0px}
}
@media print, screen and (max-width: 39.99875em){.contactWrap{padding:90px 20px 0px}
}
.contactWrap .head-area{margin-bottom:250px;overflow:hidden}
@media print, screen and (max-width: 99.99875em){.contactWrap .head-area{margin-bottom:200px}
}
@media print, screen and (max-width: 64.06125em){.contactWrap .head-area{margin-bottom:65px}
}
.contactWrap .head-area .en{font-family:"Red Hat Display",sans-serif;font-size:335px;font-weight:900;letter-spacing:3px;-webkit-transform-origin:left;-ms-transform-origin:left;transform-origin:left;-webkit-transform:translateY(100%) rotate(10deg);-ms-transform:translateY(100%) rotate(10deg);transform:translateY(100%) rotate(10deg)}
@media print, screen and (max-width: 99.99875em){.contactWrap .head-area .en{font-size:17vw}
}
@media print, screen and (max-width: 64.06125em){.contactWrap .head-area .en{font-size:19vw;letter-spacing:1px}
}
@media print, screen and (max-width: 39.99875em){.contactWrap .head-area .en{font-size:66px}
}
.contactWrap .overseas{text-align:center;margin-top:-152px;margin-bottom:230px}
@media print, screen and (max-width: 99.99875em){.contactWrap .overseas{margin-top:-150px;margin-bottom:110px}
}
.contactWrap .overseas img{zoom:0.95}
.contactWrap .contact-area{max-width:1400px;margin:0 auto}
@media print, screen and (max-width: 99.99875em){.contactWrap .contact-area{max-width:1100px}
}
@media print, screen and (max-width: 64.06125em){.contactWrap .contact-area{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:start;-ms-flex-pack:start;justify-content:flex-start;padding:0 60px}
}
@media print, screen and (max-width: 39.99875em){.contactWrap .contact-area{padding:0}
}
.contactWrap .article-area{max-width:600px;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;font-family:"Red Hat Display",sans-serif;font-size:50px;font-weight:900;letter-spacing:1px;margin-right:180px}
@media print, screen and (max-width: 99.99875em){.contactWrap .article-area{margin-right:120px}
}
@media print, screen and (max-width: 74.99875em){.contactWrap .article-area{margin-right:100px}
}
@media print, screen and (max-width: 64.06125em){.contactWrap .article-area{font-size:33px;margin-right:0;-webkit-box-flex:initial;-ms-flex:initial;flex:initial;margin-bottom:25px}
}
.contactWrap .article-area .change .inner{position:relative;width:-webkit-fit-content;width:-moz-fit-content;width:fit-content;height:-webkit-fit-content;height:-moz-fit-content;height:fit-content;background-color:#fff}
@media print, screen and (max-width: 64.06125em){.contactWrap .article-area .change .inner{line-height:1.2}
}
.contactWrap .article-area .orange{color:#ff4d00}
@media print, screen and (max-width: 64.06125em){.contactWrap .article-area .orange{color:#000}
}
.contactWrap .article-area .note{font-family:"Red Hat Display",sans-serif;font-size:20px;font-weight:600;letter-spacing:1px;margin-top:65px;line-height:1.5}
@media screen and (min-width: 75em) and (max-width: 99.99875em){.contactWrap .article-area .note{max-width:370px;text-align:justify}
}
@media print, screen and (min-width: 64.0625em) and (max-width: 74.99875em){.contactWrap .article-area .note{max-width:360px;text-align:justify}
}
@media print, screen and (max-width: 64.06125em){.contactWrap .article-area .note{margin-top:12px;color:#606060;letter-spacing:0px;font-size:15px;font-weight:500}
}
.contactWrap .article-area .other{font-family:"Red Hat Display",sans-serif;font-size:16px;font-weight:500;letter-spacing:1px;margin-top:50px;color:#ff4d00;line-height:1.5}
@media screen and (min-width: 75em) and (max-width: 99.99875em){.contactWrap .article-area .other{max-width:370px;text-align:justify}
}
@media print, screen and (min-width: 64.0625em) and (max-width: 74.99875em){.contactWrap .article-area .other{max-width:360px;text-align:justify}
}
@media print, screen and (max-width: 64.06125em){.contactWrap .article-area .other{font-size:13px;letter-spacing:0px;margin-top:12px}
}
.contactWrap .form-area{position:relative;width:100%;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0}
@media print, screen and (max-width: 64.06125em){.contactWrap .form-area{-webkit-box-flex:initial;-ms-flex:initial;flex:initial}
}
@media print, screen and (max-width: 39.99875em){.contactWrap .form-area{-webkit-box-flex:initial;-ms-flex:initial;flex:initial}
}
.contactWrap .form-area .contact-form{width:100%}
@media print, screen and (max-width: 99.99875em){.contactWrap .form-area .contact-form{top:100px}
}
@media print, screen and (max-width: 64.06125em){.contactWrap .form-area .contact-form{top:0}
}
.contactWrap .form-area .contact-form.is-show{opacity:1;pointer-events:all;z-index:6}
.contactWrap .form-area .contact-form .title-area{margin-bottom:60px}
@media print, screen and (max-width: 64.06125em){.contactWrap .form-area .contact-form .title-area{margin-bottom:25px}
}
.contactWrap .form-area .contact-form .title-area .line{width:6px;background-color:#f7e0c0;margin-right:15px}
@media print, screen and (max-width: 64.06125em){.contactWrap .form-area .contact-form .title-area .line{margin-right:9px}
}
.contactWrap .form-area .contact-form .title-area .en{font-family:"Red Hat Display",sans-serif;font-size:30px;letter-spacing:1px;color:#0c131b;font-weight:900;margin-bottom:7px}
@media print, screen and (max-width: 99.99875em){.contactWrap .form-area .contact-form .title-area .en{font-size:26px}
}
@media print, screen and (max-width: 64.06125em){.contactWrap .form-area .contact-form .title-area .en{font-size:24px;margin-bottom:0;letter-spacing:0}
}
.contactWrap .form-area .contact-form .title-area .ch{font-family:"Noto Sans SC",sans-serif;font-size:24px;letter-spacing:10px;color:#0c131b;font-weight:800}
@media print, screen and (max-width: 99.99875em){.contactWrap .form-area .contact-form .title-area .ch{font-size:22px}
}
@media print, screen and (max-width: 64.06125em){.contactWrap .form-area .contact-form .title-area .ch{font-size:16px;letter-spacing:5px}
}
.contactWrap .form-area .contact-form .item{margin-bottom:58px;position:relative}
@media print, screen and (max-width: 64.06125em){.contactWrap .form-area .contact-form .item{margin-bottom:30px}
}
.contactWrap .form-area .contact-form .item.required::before{position:absolute;left:-10px;top:-2px;content:"*";font-family:"Noto Sans SC",sans-serif;color:#606060}
.contactWrap .form-area .contact-form .title{font-size:20px;letter-spacing:0.5px;font-weight:700;margin-bottom:30px;font-family:"Red Hat Display",sans-serif;line-height:1.4}
@media print, screen and (max-width: 64.06125em){.contactWrap .form-area .contact-form .title{font-size:16px;margin-bottom:12px}
}
.contactWrap .form-area .contact-form .title .little{color:#727171;font-size:15px}
@media print, screen and (max-width: 64.06125em){.contactWrap .form-area .contact-form .title .little{font-size:13px}
}
.contactWrap .form-area .contact-form .inner-title{font-size:16px;letter-spacing:1px;font-weight:700;margin-bottom:15px;margin-top:20px;font-family:"Red Hat Display",sans-serif}
@media screen and (min-width: 75em) and (max-width: 99.99875em){.contactWrap .form-area .contact-form .inner-title{font-weight:600}
}
@media print, screen and (max-width: 64.06125em){.contactWrap .form-area .contact-form .inner-title{font-size:13px;margin-bottom:8px;margin-top:12px}
}
.contactWrap .form-area .contact-form input:is([type="text"],[type="email"],[type="tel"],[type="url"]){width:100%;height:64px;padding:12px 16px;background-color:#fff;border:2px solid #231815;border-radius:0;-webkit-box-shadow:none;box-shadow:none;font-family:"Red Hat Display",sans-serif;color:#606060;font-size:16px;letter-spacing:2px;font-weight:500}
@media print, screen and (max-width: 99.99875em){.contactWrap .form-area .contact-form input:is([type="text"],[type="email"],[type="tel"],[type="url"]){letter-spacing:1px}
}
@media print, screen and (max-width: 64.06125em){.contactWrap .form-area .contact-form input:is([type="text"],[type="email"],[type="tel"],[type="url"]){height:40px;font-size:13px;letter-spacing:1px}
}
.contactWrap .form-area .contact-form input:is([type="text"],[type="email"],[type="tel"],[type="url"])::-webkit-input-placeholder{color:#606060;opacity:0.5}
.contactWrap .form-area .contact-form input:is([type="text"],[type="email"],[type="tel"],[type="url"])::-moz-placeholder{color:#606060;opacity:0.5}
.contactWrap .form-area .contact-form input:is([type="text"],[type="email"],[type="tel"],[type="url"])::-ms-input-placeholder{color:#606060;opacity:0.5}
.contactWrap .form-area .contact-form input:is([type="text"],[type="email"],[type="tel"],[type="url"])::placeholder{color:#606060;opacity:0.5}
.contactWrap .form-area .contact-form input[type="date"]{width:100%;height:64px;padding:12px 16px;background-color:#fff;border:2px solid #231815;border-radius:0;-webkit-box-shadow:none;box-shadow:none;font-family:"Red Hat Display",sans-serif;color:#606060;font-size:16px;letter-spacing:2px;font-weight:500}
@media print, screen and (max-width: 64.06125em){.contactWrap .form-area .contact-form input[type="date"]{height:40px;font-size:13px;letter-spacing:1px}
}
.contactWrap .form-area .contact-form input[type="date"]::-webkit-input-placeholder{color:#606060;opacity:1}
.contactWrap .form-area .contact-form input[type="date"]::-moz-placeholder{color:#606060;opacity:1}
.contactWrap .form-area .contact-form input[type="date"]::-ms-input-placeholder{color:#606060;opacity:1}
.contactWrap .form-area .contact-form input[type="date"]::placeholder{color:#606060;opacity:1}
.contactWrap .form-area .contact-form input[type="radio"]{display:none}
.contactWrap .form-area .contact-form input[type="radio"]+label{font-family:"Red Hat Display",sans-serif;font-size:18px;letter-spacing:1px;font-weight:500px}
@media print, screen and (max-width: 64.06125em){.contactWrap .form-area .contact-form input[type="radio"]+label{font-size:14px}
}
.contactWrap .form-area .contact-form input[type="radio"]+label.left{margin-right:10px}
.contactWrap .form-area .contact-form .radio{width:14px;height:14px;border-radius:50%;border:1px solid #000;position:relative;margin-right:5px;margin-top:2px}
@media print, screen and (max-width: 64.06125em){.contactWrap .form-area .contact-form .radio{width:10px;height:10px}
}
.contactWrap .form-area .contact-form .radio::after{position:absolute;content:"";width:8px;height:8px;border-radius:50%;background-color:#000;left:2px;top:2px;opacity:0}
@media print, screen and (max-width: 64.06125em){.contactWrap .form-area .contact-form .radio::after{width:4px;height:4px}
}
.contactWrap .form-area .contact-form input[type="radio"]:checked+label .radio::after{opacity:1}
.contactWrap .form-area .contact-form .experience{margin-bottom:20px}
.contactWrap .form-area .contact-form textarea{width:100%;height:216px;padding:12px 16px;background-color:#fff;border:2px solid #231815;border-radius:0;font-family:"Red Hat Display",sans-serif;color:#606060;font-size:16px;letter-spacing:2px;font-weight:500;resize:none}
@media print, screen and (max-width: 64.06125em){.contactWrap .form-area .contact-form textarea{height:120px;padding:6px 8px;font-size:13px;letter-spacing:1px}
}
.contactWrap .form-area .contact-form .note{font-family:"Red Hat Display",sans-serif;font-size:16px;letter-spacing:1px;line-height:1.4;color:#ff4d00;font-weight:600;margin-top:20px}
@media print, screen and (max-width: 64.06125em){.contactWrap .form-area .contact-form .note{font-size:12px;letter-spacing:0px;margin-top:12px}
}
.contactWrap .form-area .contact-form .submit{margin-top:145px;cursor:pointer}
@media print, screen and (max-width: 99.99875em){.contactWrap .form-area .contact-form .submit{margin-top:100px}
}
@media print, screen and (max-width: 64.06125em){.contactWrap .form-area .contact-form .submit{margin-top:25px}
}
.contactWrap .form-area .contact-form .submit .arrow{-webkit-transition:0.5s all;transition:0.5s all}
.contactWrap .form-area .contact-form .submit .d{fill:#0c131b;-webkit-transition:0.5s all;transition:0.5s all}
.contactWrap .form-area .contact-form .submit .e{fill:none;stroke:#0c131b;stroke-miterlimit:10;stroke-width:3px;-webkit-transition:0.5s all;transition:0.5s all}
@media print, screen and (max-width: 64.06125em){.contactWrap .form-area .contact-form .submit .e{stroke-width:1.85px}
}
.contactWrap .form-area .contact-form .submit:hover .d{fill:#ea5406}
.contactWrap .form-area .contact-form .submit:hover .e{stroke:#ea5406}
.contactWrap .form-area .contact-form .submit:hover .arrow{-webkit-transform:translateX(20px);-ms-transform:translateX(20px);transform:translateX(20px)}
.contactWrap .form-area .contact-form button{cursor:pointer}
.contactWrap .formList{margin-bottom:85px}
@media print, screen and (max-width: 99.99875em){.contactWrap .formList{margin-bottom:75px}
}
@media print, screen and (max-width: 64.06125em){.contactWrap .formList{margin-bottom:55px}
}
@media print, screen and (max-width: 64.06125em){.contactWrap .formList li:nth-child(1) .title::after{bottom:-20px}
}
@media print, screen and (max-width: 64.06125em){.contactWrap .formList li:nth-child(2) .title{max-width:135px}
}
.contactWrap .formList li .title{position:relative;font-size:26px;font-weight:1000;letter-spacing:1px;color:#0c131b;font-family:"Red Hat Display",sans-serif}
@media print, screen and (max-width: 99.99875em){.contactWrap .formList li .title{font-size:20px}
}
@media print, screen and (max-width: 64.06125em){.contactWrap .formList li .title{font-size:20px;letter-spacing:0px}
}
@media print, screen and (max-width: 39.99875em){.contactWrap .formList li .title{font-size:18px}
}
.contactWrap .formList li .title::after{position:absolute;content:"";width:0%;height:5px;bottom:-10px;left:0;background-color:#ff4d00;-webkit-transition:0.5s all;transition:0.5s all}
@media print, screen and (max-width: 64.06125em){.contactWrap .formList li .title::after{height:8px}
}
.contactWrap .formList li .radio{width:36px;height:36px;border-radius:50%;border:1px solid #231815;margin-right:20px;position:relative}
@media print, screen and (max-width: 99.99875em){.contactWrap .formList li .radio{width:30px;height:30px}
}
@media print, screen and (max-width: 74.99875em){.contactWrap .formList li .radio{width:28px;height:28px;margin-right:10px}
}
@media print, screen and (max-width: 64.06125em){.contactWrap .formList li .radio{width:21px;height:21px;margin-right:5px}
}
.contactWrap .formList li .radio::before{position:absolute;content:"";width:11px;height:11px;border-radius:50%;background-color:#231815;left:50%;top:50%;-webkit-transform:translate(-50%, -50%);-ms-transform:translate(-50%, -50%);transform:translate(-50%, -50%);opacity:0;-webkit-transition:0.5s all;transition:0.5s all}
@media print, screen and (max-width: 64.06125em){.contactWrap .formList li .radio::before{width:6px;height:6px}
}
.contactWrap .formList li label{cursor:pointer;opacity:0.35;-webkit-transition:0.5s all;transition:0.5s all}
.contactWrap .formList input[type="radio"]{display:none}
.contactWrap .formList input[type="radio"]:checked+label{opacity:1}
.contactWrap .formList input[type="radio"]:checked+label .radio::before{opacity:1}
.contactWrap .formList input[type="radio"]:checked+label .title::after{width:100%}

/* Keep the shared page layout independent of the reference's global reset. */
body:has(.contact-page-content) { background: #fff; }
.contactWrap { line-height: 1; overflow-anchor: none; }
.contactWrap .form-area .contact-form .title { display: block; }
.contactWrap .form-area .contact-form input,
.contactWrap .form-area .contact-form textarea { box-sizing: border-box; }
.contactWrap .form-area .contact-form input[type="date"] { min-width: 0; }
.contactWrap .form-area .contact-form .ask-select {
    appearance: none; width: 100%; height: 64px; padding: 12px 55px 12px 16px;
    border: 2px solid #231815; border-radius: 0; color: #231815;
    font: 500 16px/1 'Red Hat Display', sans-serif; letter-spacing: 2px;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14'%3E%3Cpath d='m2 4 5 5 5-5' fill='none' stroke='%230c131b' stroke-width='2'/%3E%3C/svg%3E") no-repeat right 28px center;
}
.contactWrap .formList input[type="radio"],
.contactWrap .form-area .contact-form input[type="radio"] {
    display: block; position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none;
}
.contactWrap input[type="radio"]:focus-visible + label { outline: 3px solid var(--orange); outline-offset: 6px; }
.contactWrap .formList .radio { flex-shrink: 0; }
.contactWrap .form-area .contact-form .submit { cursor: default; }
.contactWrap .form-area .contact-form .submit button:disabled { opacity: .45; cursor: default; }
.contactWrap .form-area .contact-form .submit:hover .arrow { transform: none; }
.contactWrap .form-area .contact-form .submit:hover .d { fill: #0c131b; }
.contactWrap .form-area .contact-form .submit:hover .e { stroke: #0c131b; }
.contactWrap .form-preview-note, .contactWrap .verification-note { margin-top: 16px; font-size: 14px; line-height: 1.5; color: #606060; }
.contactWrap .form-area .contact-form #captcha { background: #f2f2f2; }
.contactWrap .overseas img { display: inline; max-width: 100%; }
.contactWrap .overseas[hidden] { display: none !important; }
@media (max-width: 1024px) {
    .contactWrap .form-area .contact-form .ask-select { height: 40px; padding: 6px 35px 6px 15px; font-size: 13px; letter-spacing: 1px; background-position: right 13px center; background-size: 11px; }
    .contactWrap .form-preview-note, .contactWrap .verification-note { font-size: 12px; }
}
@media (max-width: 359px) {
    .contactWrap .head-area .en { font-size: 17vw; }
    .contactWrap .formList li .title { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
    .contactWrap .head-area .en { transform: none; }
}
.contactWrap .overseas img { vertical-align: middle; }
/* Preserve the inactive state while keeping its label readable. */
.contactWrap .formList li label { opacity: 1; }
.contactWrap .formList li .title { color: inherit; }
.contactWrap .formList input[type="radio"]:not(:checked) + label { color: #6d6d6d; }
.contactWrap .formList input[type="radio"]:not(:checked) + label .radio { opacity: .55; }
.contactWrap .article-area .other,
.contactWrap .form-area .contact-form .note { color: #c23a00; }
