@charset "UTF-8";
select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url(../img/ico_select_appearance.svg); background-repeat: no-repeat; background-position: 96% center; background-size: 1.5rem; }
@media (max-width: 990px){
    select { background-size: 2rem; }
}

.bl_nk { position: relative; display: inline-block; }
.bl_nk::before, .bl_nk::after { position: absolute; top: 50%; transform: translateY(-50%); font-size: 6.25rem; font-weight: 600; color: var(--pointdeepcolor); }
.bl_nk::before { content: '['; left: -6.25rem; }
.bl_nk::after { content: ']'; right: -6.25rem; }
@media (max-width:990px){
    .bl_nk::before, .bl_nk::after { font-size: 10rem;  }
}
@media (max-width:768px){
    .bl_nk::before, .bl_nk::after { font-size: 7.5rem;  }
    .bl_nk::before { content: '['; left: -3.125rem; }
    .bl_nk::after { content: ']'; right: -3.125rem; }
}

.hashes > * { display: inline-block; padding: .25rem .75rem; border-radius: 1rem; border: 1px solid var(--pointlightcolor); color: var(--pointlightcolor); }
.hashes > *:not(:first-child) { margin-left: .5rem; }
.hashes.deep > * { border-color: var(--pointcolor); color: var(--pointcolor); }
.card { padding: 2.5rem; }
.card_hover { border: 1px solid transparent; transition: .3s; }
.card_hover:hover { border-color: var(--pointcolor); }
.shadow { box-shadow: 0 0 .5rem rgba(0,0,0,.125); }
.shadow-light { box-shadow: 0 0 .5rem rgba(0,0,0,.0625); }
@media (max-width:1410px){
    .card { padding: 2.25rem; }
}
@media (max-width:990px){
    .card { padding: 2rem; }
    .hashes > * { font-size: 1.25rem; }
}

#mainslide { position: relative; overflow: hidden; width: 100%; height: 100vh; transition: transform .5s var(--ani); }
#mainslide .mainSwiper { position: relative;  opacity: 0; transform: scale(1.05); width: 100%; height: 100%; transition: all 2s var(--ani); }
#mainslide .mainSwiper.on { opacity: 1; transform: scale(1); }
#mainslide .mainSwiper .swiper-slide { height: 100%; overflow: hidden; -webkit-backface-visibility: hidden; backface-visibility: hidden; transition: transform .3s; }
#mainslide .mainSwiper .swiper-slide-active { transform: skew(0); }
#mainslide .bg { position: absolute; left: 0; top: 0; width: 100%; height: 100%; background: 80% no-repeat; background-size: cover;  background-position: center; }
#mainslide .bg::after { position: absolute; content: ''; width: 100%; height: 100%; background-color: rgba(0,0,0,.25); top: 0; left: 0; }
#mainslide .bg.bg-1 { background-image: url(../img/mainSlide01.webp); }
#mainslide .bg.bg-2 { background-image: url(../img/mainSlide02.webp); }
#mainslide .bg.bg-3 { background-image: url(../img/mainSlide03.webp); }
#mainslide .inner { position: relative; height: 100%; }
#mainslide .inner .txt { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 51; }
#mainslide .swiper-navigation-ctrl { position: absolute; left: calc((100% - var(--layoutwidthMini)) / 2); bottom: 30%; z-index: 51; }
#mainslide .swiper-navigation-ctrl .swiper-arrow { cursor: pointer; }
#mainslide .swiper-navigation-ctrl .swiper-pagination { position: static; }
#mainslide .progress-box { position: relative; width: 250px; height: auto; z-index: 52; }
#mainslide .autoplay-progress { position: absolute; left: 50%; top: 50%; transform: translate(-50%,-50%); z-index: 3; width: 100%; height: 5px; background-color: rgba(255, 255, 255, .5); }
#mainslide .autoplay-progress svg { --progress: 0; position: absolute; left: 0; top: 0; x: 11; width: 100%; height: 5px; stroke-width: 5px; stroke: #fff; fill: none; stroke-dashoffset: calc(250 * (1 - var(--progress))); stroke-dasharray: 250; }
#mainslide .scroll-down-mouse { position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%); z-index: 52; }
#mainslide .scroll-down-mouse .mousepoint { position: relative; width: 1.5rem; height: 3rem; border: 1px solid #fff; border-radius: 2rem; margin: 0 auto; }
#mainslide .scroll-down-mouse .mousewheel { position: absolute; width: .75rem; height: auto; aspect-ratio: 1/1; background-color: #fff; border-radius: 50%; left: 50%; top: .25rem; transform: translateX(-50%); animation: scroll-wheel 1.5s ease-out infinite; }
@keyframes scroll-wheel {
  0% { top: .25rem; opacity: 1; }
  70% { top: 1.75rem; opacity: 1; }
  100% { top: 2rem; opacity: 0; }
}

@media (max-width:1410px){
    #mainslide .swiper-navigation-ctrl { left: 7.5%; bottom: 10%; }
    #mainslide .scroll-down-mouse { display: none; }
}

@media (max-width:990px){
    #painPoint .card:not(:first-child) { margin-top: 1.25rem; }
}

#Operate .flexList { --x-gap: 2rem; --y-gap: 2rem; }
#Operate .flexList .box { aspect-ratio: 1/1; padding: 2.5rem 2rem; }
#Operate .flexList .box:first-child, #Operate .operateSwiper .swiper-slide:first-child { position: relative; background-image: linear-gradient(to bottom, #EB844C, #F7D0B1); }
#Operate .flexList .box:first-child img, #Operate .operateSwiper .swiper-slide:first-child img { position: absolute; right: 1.5rem; bottom: 1.5rem; }
@media (max-width:990px){
    #Operate .operateSwiper { padding: .5rem 0; }
    #Operate .operateSwiper .swiper-slide { aspect-ratio: 1/1; padding: 1.25rem; height: auto; }
    #Operate .operateSwiper .swiper-slide img { max-width: 100%; }
}
@media (max-width:768px){
    #Operate .operateSwiper .swiper-slide { aspect-ratio: auto; padding: 1.75rem; }
    #Operate .operateSwiper .swiper-slide.operateCore { aspect-ratio: 1/.75; }
    #Operate .operateSwiper .swiper-slide img { max-width: 60%; margin-bottom: .5rem; }
    #Operate .operateSwiper .swiper-slide.operateCore img { max-width: 25%; margin-bottom: 0; }
}

#Service .servicesList li[data-order='1'] { background-color: var(--backcolor); }
#Service .servicesList li[data-order='2'] { background-color: #DAEAFF; }
#Service .servicesList li[data-order='3'] { background-color: #BDDAFF; }
#Service .servicesList li[data-order='4'] { background-color: var(--pointlightcolor); }
#Service .servicesList li[data-order='5'] { background-color: #1E5FF1; }
#Service .servicesList li[data-order='6'] { background-color: var(--pointcolor); }
#Service .servicesList li .inner:not(.color-white) { color: #152456; }
@media (max-width:990px){
    #Service .Tit { text-align: center; margin-bottom: 4rem; }
    #Service .servicesList li:not(:first-child){ margin-top: 1rem; } 
}

#Planning .planList { --x-gap: 2.5rem; --y-gap: 2.5rem; }
#Planning .planList .card { position: relative; aspect-ratio: .6/1; border-color: var(--light-gray); background-color: #fff; }
#Planning .planList .card:hover { border-color: var(--pointcolor); }
#Planning .planList .card.bestplan::before { position: absolute; content: 'Best Plan'; left: 0; top: -2.5rem; width: 100%; height: auto; padding: .5rem 0 2rem; font-size: 1.125rem; text-align: center; color: #fff; background-image: linear-gradient(to right, #90C4FF, #3580FC); z-index: -1; border-radius: 2rem 2rem 0 0; }
#Planning .planChecklist li:not(:first-child) { margin-top: .5rem; }
#Planning .planList .card .planChecklist li svg { transition: .3s; }
#Planning .planList .card:hover .planChecklist li svg { fill: var(--pointlightcolor); }
#Planning .planList .card .extraList { position: absolute; left: 2.5rem; bottom: 2.5rem; }
#Planning .planList .card .extraList li { color: #999; }
@media (max-width:1410px){
    #Planning .planList { --x-gap: 1.5rem; --y-gap: 1.5rem; align-items: stretch; }
    #Planning .planList .card { aspect-ratio: auto; }
    #Planning .planList .card .extraList { position: relative; left: auto; bottom: auto; margin-top: 2rem; }
}
@media (max-width:990px){
    #Planning .planList .card:hover { border-color: var(--light-gray); }
    #Planning .planList .card:hover .planChecklist li svg { fill: var(--light-gray); }
}
@media (max-width:768px){
    #Planning .planList .card.bestplan { margin-top: 4rem; }
    #Planning .planList .card.bestplan::before { font-size: 1.75rem; font-weight: 700; padding: 1rem 0 4rem; top: -4rem; }
    #Planning .planList .card .extraList { font-size: 1.25rem; }
}

#QnA .faqList { border-top: 1px solid var(--dark-gray); }
#QnA .faqList .question,
#QnA .faqList .answer { border-bottom: 1px solid var(--dark-gray); }
#QnA .faqList .question { position: relative; display: flex; align-items: center; padding: 2rem 5rem; cursor: pointer; }
#QnA .faqList .question::before { position: absolute; content: 'Q.'; font-size: 1.5rem; font-weight: 500; color: var(--subcolor); left: 1rem; top: 50%; transform: translateY(-50%); }
#QnA .faqList .question svg { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%) rotate(0); transition: .25s; }
#QnA .faqList .question.open svg { transform: translateY(-50%) rotate(90deg); }
#QnA .faqList .answer { display: none; position: relative; padding: 2rem 6rem 2rem 5rem; background-color: var(--backcolor); color: #152456; }
#QnA .faqList .answer::before { position: absolute; content: 'A.'; font-size: 1.5rem; font-weight: 500; color: var(--pointcolor); left: 1rem; top: 2rem; }
@media (max-width:768px){
    #QnA .faqList .question::before, #QnA .faqList .answer::before { font-size: 2.5rem; }
}

#Contact {background-color: rgba(239, 246, 255, 0.5);}
#Contact .card { padding: 2.5rem; border: 1px solid var(--super-light-gray); }
#Contact form .box.required { position: relative; }
#Contact form .box.required::after { position: absolute; content: '*'; color: var(--subcolor); font-size: 1.25rem; left: 1.5rem; top: 50%; transform: translateY(-50%); }
#Contact form input[type=text],
#Contact form input[type=tel],
#Contact form input[type=email],
#Contact form input[type=url],
#Contact form select, 
#Contact form textarea { height: auto; padding: 1rem 1.5rem; border: 1px solid #BDDAFF !important; outline: none; box-shadow: none !important; transition: .3s; }
#Contact form textarea { min-height: 100px; resize: none; }
#Contact form textarea.text-lg { min-height: 270px; }
#Contact form input[type=text]::placeholder,
#Contact form input[type=tel]::placeholder,
#Contact form input[type=email]::placeholder,
#Contact form input[type=url]::placeholder,
#Contact form textarea::placeholder { color: #8C8C8C; }
#Contact form input[type=text]:required,
#Contact form input[type=tel]:required,
#Contact form input[type=email]:required,
#Contact form input[type=url]:required,
#Contact form textarea:required { padding: 1rem 1.5rem 1rem 3rem; }
#Contact form input[type=text]:focus,
#Contact form input[type=tel]:focus,
#Contact form input[type=email]:focus,
#Contact form input[type=url]:focus,
#Contact form select:focus,
#Contact form textarea:focus { border-color: var(--pointlightcolor) !important; }
#Contact form input[type=radio] { accent-color: var(--pointlightcolor); transform: scale(2); }
#Contact form button[type=submit] { padding: 1.5rem; background-color: #1E5FF1; }
@media (max-width:768px){
    #Contact form input[type=text],
    #Contact form input[type=tel],
    #Contact form input[type=email],
    #Contact form input[type=url],
    #Contact form select, 
    #Contact form textarea { padding: 1.5rem 2rem; }
    #Contact form input[type=text]:required,
    #Contact form input[type=tel]:required,
    #Contact form input[type=email]:required,
    #Contact form input[type=url]:required,
    #Contact form textarea:required { padding: 1.5rem 2rem 1.5rem 3rem; }
    #Contact form input[type=radio] { transform: scale(1.25); }
    #Contact form .buttonBox { flex-wrap: wrap; }
    #Contact form .buttonBox > * { width: 100%; }
    #Contact form .buttonBox > *:not(:first-child) { margin-top: 1rem; }
    #Contact form button[type=submit] { padding: 2rem; font-weight: 700; }
    #Contact form button[type=submit] span { font-size: 2rem; }
    #Contact form button[type=submit] svg { width: 3.5rem; height: 3.5rem; }
}

#Ours {position: relative; background-image: url(../img/bg_ours.webp); background-position: center; background-repeat: no-repeat; background-size: cover;}
#Ours::before { position: absolute; content: ''; width: 100%; height: 100%; background-color: rgba(5,32,77,.25); top: 0; left: 0; }
#Ours .flexList { --x-gap: 2rem; --y-gap: 2rem; }
#Ours .flexList .card { padding: 3rem; border: 1px solid rgba(218, 234, 255, 0.3); background-color: rgba(255, 255, 255, .125); backdrop-filter: blur(10px); transition: .5s; }
#Ours .flexList .card:hover {border: 1px solid #fff;}
@media (max-width:768px){
    #Ours .flexList .card { display: block; }
    #Ours .flexList .card a { margin-top: 2rem; font-size: 1.5rem; padding: 1rem 1.5rem; }
    #Ours .flexList .card a svg { width: 2.5rem; height: 2.5rem; }
}