@charset "utf-8";

/*
 * File    : sub-contact.css
 * Author  : STUDIO-JT (JSH)
 *
 * SUMMARY :
 * CONTACT
 * COMPLETE
 * HOVER
 */



/* **************************************** *
 * CONTACT
 * **************************************** */
.contact-inquiry__radiobox { display: flex; gap: 10rem; flex-wrap: wrap; }
.contact-inquiry__radiobox label { flex: 1; position: relative; display: block; padding: 16rem; background: var(--color-white); text-align: center; border-radius: 8rem; color: var(--color-gray-800); box-shadow: inset 0 0 0 1px var(--color-gray-400); cursor: pointer; overflow: hidden; transition: color .3s, box-shadow .3s; }
.contact-inquiry__radiobox input { position: absolute; opacity: 0; left: -9999rem; width: 1px; height: 1px; }
.contact-inquiry__radiobox label:has(input:checked) { color: var(--color-primary); box-shadow: inset 0 0 0 2rem var(--color-primary); }

.contact-inquiry__address input[type="text"] { pointer-events: none; }
.contact-inquiry__address-list { display: flex; position: relative; margin-top: 8rem; border: 1px solid var(--color-gray-400); border-radius: 8rem; background: var(--color-gray-300); overflow: hidden; }
.contact-inquiry__address-list label { position: relative; display: block; text-align: center; overflow: hidden; cursor: pointer; }
.contact-inquiry__address-list input { position: absolute; opacity: 0; left: -9999rem; width: 1px; height: 1px; }

.contact-inquiry__address-si { flex: 1; padding: 14rem 16rem; }
.contact-inquiry__address-si ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8rem; }
.contact-inquiry__address-si label { padding: 4rem 12rem; border: 2rem solid transparent; border-radius: 99rem; color: var(--color-gray-800); transition: color .3s, background .3s, border .3s; }
.contact-inquiry__address-si label:has(input:checked) { border-color: var(--color-primary); background: #E0EEF5; color: var(--color-primary); }

.contact-inquiry__address-gu { width: 500rem; background: var(--color-gray-100); padding: 14rem 16rem; }
.contact-inquiry__address-gu ul { display: none; grid-template-columns: repeat(4, minmax(0, 1fr)); align-content: start; gap: 8rem; }
.contact-inquiry__address-gu label { padding: 6rem 12rem; background: var(--color-gray-300); color: var(--color-gray-800); border-radius: 8rem; transition: color .3s, background .3s; }
.contact-inquiry__address-gu label:has(input:checked) { background: #E0EEF5; color: var(--color-primary); }

.contact-inquiry__address-gu ul:first-child { display: grid; }



/* **************************************** *
 * COMPLETE
 * **************************************** */
.complete-link__container { display: flex; flex-direction: column; gap: 20rem; }
.complete-link__item { display: flex; align-items: center; justify-content: space-between; gap: 80rem; min-height: 120rem; padding: 40rem; border-radius: 8rem; background: var(--color-gray-100); transition: background .3s; }
.complete-link__title { color: var(--color-gray-800); }
.complete-link__btn { display: flex; align-items: center; gap: 4rem; color: var(--color-secondary); padding: 4rem 0; }
.complete-link__btn .jt-icon { width: 16rem; }
.complete-link__btn .jt-icon path { fill: currentColor; }
.complete-link__btn.jt-share--url { box-shadow: 0 1px 0 0 currentColor; }

.complete-consulting.article__section { background: #F8F5E8; }
.complete-consulting .article__section-title span { display: block; }
.complete-consulting .article__section-title span:first-child { margin-bottom: 24rem; }
.complete-consulting .article__section-title span:first-child:before { background-image: url(../images/icon/icon-point-13.svg); width: 180rem; aspect-ratio: 1 / 0.6736; left: 50%; top: 50%; transform: translate(-47%, -50%); }
.complete-consulting__container { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30rem; }
.complete-consulting__item { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32rem; padding: 40rem; border-radius: 16rem; background: var(--color-white); aspect-ratio: 1 / 1; }
.complete-consulting__title { color: var(--color-gray-800); }
.complete-consulting__icon { width: 140rem; font-size: 0; }
.complete-consulting__icon svg { display: block; width: 100%; height: auto; }
.complete-consulting__control { text-align: center; margin-top: 80rem; }



/* **************************************** *
 * HOVER
 * **************************************** */
@media (hover: hover) and (pointer: fine) {

    /* CONTACT */
    .contact-inquiry__radiobox label:hover { box-shadow: inset 0 0 0 2rem var(--color-gray-500); }
    .contact-inquiry__address-list > li > label:hover { background: var(--color-gray-400); }
    .contact-inquiry__address-list > li > ul > li > label:hover { background: var(--color-gray-400); }

    /* COMPLETE */
    .complete-link__item:hover { background: #A4FF35; }

}