@charset "UTF-8";

/* ==================================
 #section_mv
================================== */
#mv_swiper .swiper-pagination-bullet-active::before {animation: timebar 5.4s;}

/* ==================================
 #section_menu
================================== */
/*#section_menu {background-color: #1c8bdc;}*/
#section_menu > .main_wrap_a > .inner {padding-top: 0; padding-bottom: 32px;}
#section_menu > .main_wrap_a > .inner > .menu_wrap > * {margin: 0;}
#section_menu > .main_wrap_a > .inner > .menu_wrap {display: grid; gap: 16px; padding: 16px; border-radius: 16px; background-color: #1c8bdc;}

@media (min-width: 600px) {
    #section_menu > .main_wrap_a > .inner > .menu_wrap {gap: 24px; padding: 24px;}
}
@media (min-width: 960px) {
    #section_menu > .main_wrap_a > .inner > .menu_wrap {gap: 32px; padding: 32px; border-radius: 24px;}
}
/* contact_wrap */
#section_menu {
  .card_list_b._col2,
  .card_list_b._col3,
  .card_list_b._col4 {grid-template-columns: repeat(2, 1fr);}
  .contact_wrap {display: grid; grid-template-columns: repeat(1, 1fr); gap: 16px 32px; align-items: center;}
  .contact_wrap > * {margin: 0 !important;}
  .contact_wrap > .box_tel_a {display: flex; flex-direction: column; align-items: center; gap: 8px;}
  .contact_wrap > .box_tel_a * {margin: 0;}
  .contact_wrap > .box_tel_a p {color: #fff;}
  .contact_wrap > .box_tel_a p:not(.tel_icon_a) {opacity: 0.75;}
  .contact_wrap > .box_tel_a p.tel_icon_a em {font-size: 2.6rem; flex-shrink: 0;}
  .contact_wrap > .box_tel_a > div {display: flex; flex-direction: column; gap: 8px 32px;}

  .contact_wrap > .box_tel_a,
  .contact_wrap > .box_tel_a a,
  .contact_wrap > .box_tel_a a:link,
  .contact_wrap > .box_tel_a a:visited,
  .contact_wrap > .box_tel_a a:hover,
  .contact_wrap > .box_tel_a a:active,
  .contact_wrap > .box_tel_a a[href^="tel"] {color: #fff !important;}
}



@media (min-width: 600px) {
    #section_menu .card_list_b {gap: 24px;}
    #section_menu .card_list_b + .contact_wrap {margin-top: -8px;}
    #section_menu .contact_wrap > .box_tel_a {align-items: center;}
    #section_menu .contact_wrap > .box_tel_a > div {flex-direction: row; text-align: left;}
}

@media (min-width: 1024px) {
    #section_menu .card_list_b._col3 {grid-template-columns: repeat(3, 1fr);}
    #section_menu .card_list_b._col4 {grid-template-columns: repeat(4, 1fr);}
    #section_menu .contact_wrap {display: grid; grid-template-columns: repeat(2, 1fr);}
    #section_menu .contact_wrap > .box_tel_a {align-items: flex-start; gap: 4px;}
}

@media (min-width: 1200px) {
    #section_menu .contact_wrap > .box_tel_a p.tel_icon_a em {font-size: 3.2rem;}
}


/* ==================================
 #section_discover
================================== */
#section_discover {
    padding: 32px 16px;
    gap: 64px;
    background:
      url(/assets/home/img/bg_section_discover.png) repeat-y 50% 0% / cover,
      url(/assets/img/bg_img_a.png) repeat 50% 0% / 20%,
      linear-gradient(90deg, #3393DD 0%, #0078D4 90%, #0078D4 100%);
}

#section_discover > .main_wrap_a > .inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    gap: 32px !important;
}

#section_discover > .main_wrap_a > .inner > * {margin: 0; width: 100%;}
#section_discover > .main_wrap_a > .inner > .title_wrap {color: #fff; display: flex; flex-direction: column; gap: 8px;}
#section_discover > .main_wrap_a > .inner > .title_wrap > * {margin: 0;}
 
@media (min-width: 960px) {
  #section_discover {padding: 64px 16px; background-size: 100%, 20%, auto;}
}

/* ========= select_wrap ========= */
.select_wrap {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

/* select_list */
.select_wrap .select_list {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    gap: 16px;
    font-size: 24px;
    line-height: 150%;
    letter-spacing: 0.02em;
    width: 100%;
     color: #fff;
}

.select_wrap .select_list .select_item_group {display: flex; flex-direction: column; justify-content: flex-start; align-items: flex-start; gap: 16px;}
.select_wrap .select_list .select_item_group .select_item {display: flex; justify-content: center; align-items: center; gap: 16px; flex-wrap: wrap;}
.select_wrap .select_list .select_item_group .select_item .list_select_a .list_select {font-size: 2rem;}
.select_wrap .select_list .select_item_group .select_item:nth-child(1) .list_select_a .list_select {min-width: 12.5em;}
.select_wrap .select_list .select_item_group .select_item:nth-child(2) .list_select_a .list_select {min-width: 16.5em;}

@media (max-width: 465px) {
    .select_wrap .select_list .select_item_group {align-items: center;}
}

@media (min-width: 1024px) {
    .select_wrap .select_list {flex-direction: row; align-items: center;}
    .select_wrap .select_list .select_item_group {flex-direction: row; align-items: center;}
}

/* select_content */
.select_content {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 32px 16px;
  gap: 32px;
  min-height: 147px;
  background: var(--c-sub);
  border-radius: 16px;
  position: relative;
  z-index: 1;
}

.select_content::before {
  content: "";
  position: absolute;
  top: -2px;
  right: -2px;
  bottom: -2px;
  left: -2px;
  border: 3px dotted var(--c-main);
  border-radius: 18px;
  pointer-events: none;
  z-index: 0;
}
.select_content * {margin: 0 !important;}

.select_content .select_before,
.select_content .select_after {display: grid; gap: 32px;}
    
.select_content .select_before > .title,
.select_content .select_after  > .title {
    color: var(--c-main);
    font-weight: bold;
    text-align: center;
    line-height: 1.75;
    letter-spacing: 0.03em;
}

.select_content .select_before .image {
    position: absolute;
    width: 146px;
    height: 148px;
    left: calc(50% - 146px/2 - 0.5px);
    bottom: -1px;
    background: url(/assets/home/img/img_announce_dc.png) no-repeat center / contain;
}

.select_content .select_before > .title {padding-bottom: 120px;}
.select_content .select_after  > .title {font-size: 2.4rem; line-height: 1.5; letter-spacing: 0.03em;}

@media (min-width: 960px) {
    .select_content {padding: 32px;}
    .select_content .select_before > .title {padding-bottom: 0;}
    .select_content .select_before > .image {left: 128px;}
}

/* .card_list_a  > a */
.select_content {
  .card_list_a > a {display: block; text-decoration: none; color: var(--c-text); height: 100%;}
  .card_list_a > a .card_item {height: inherit;}
  .card_list_a > a .card_item:hover {background-color: var(--bg-hover-b); transition: background-color .3s ease;}
  .card_list_a > a .card_item:hover .img_wrap img {transform: scale(1.1);}
  .card_list_a > a .card_item .inner {display: grid; grid-template-rows: auto 1fr;}
  .card_list_a > a .card_item .inner .txt_wrap {padding-top: 16px; gap: 8px; display: grid; grid-template-rows: auto 1fr auto;}
  .card_list_a > a .card_item .inner .txt_wrap .biz_info {
    display: flex;
    flex-direction: column;
    padding: 8px 0 0;
    gap: 8px;
    border-top: 1px solid var(--c-gry-l);
    font-size: 1.2rem;
    line-height: 1.75;
    letter-spacing: 0.03em;
    color: var(--c-blk-xl);
}

  .card_list_a > a .card_item.label_a::before {left: 16px; padding: 8px 6px; line-height: 1.35; min-height: 36px;}
  .card_list_a._col4 > a .card_item .inner .txt_wrap .title {font-size: 1.8rem;}
  .card_list_a._col4 > a .card_item .inner .txt_wrap .title._lclamp3 {max-height: 4.5em;}
  .card_list_a + .card_list_a {margin-top: -16px !important;}

@media (max-width: 599px) {
    .card_list_a > a .card_item .inner .img_wrap {padding: 16px 16px 0;}
    .card_list_a > a .card_item .inner .txt_wrap {padding: 16px;}
    .card_list_a > a .card_item .inner .txt_wrap .biz_info {padding: 8px 0 0; gap: 4px;}
    .card_list_a._col4 {grid-template-columns: repeat(2, 1fr); gap: 16px 8px;}
    .card_list_a._col4 > a .card_item .inner .img_wrap {padding: 8px 8px 0;}
    .card_list_a._col4 > a .card_item .inner .txt_wrap {padding: 8px; gap: 8px;}
    .card_list_a._col4 > a .card_item .inner .txt_wrap .biz_info {padding: 8px 0 0; gap: 4px;}
}

@media (min-width: 600px) {
    .card_list_a._col2 {grid-template-columns: 1fr !important;}
}

@media (min-width: 960px) {
    .card_list_a._col2 {grid-template-columns: repeat(2, 1fr) !important;}
    .card_list_a + .card_list_a {margin-top: 0 !important;}
}

}

/* ==================================
#section_service
================================== */
#section_service {background: url(/assets/img/bg_img_a.png), url(/assets/home/img/bg_section_service.png) no-repeat 50% 0% / cover; padding: 0;}
#section_service > .main_wrap_a > .inner {display: flex; flex-direction: column; gap: 64px;}

@media (min-width: 600px) {
    #section_service > .main_wrap_a > .inner {gap: 96px;}
}

/* ==================================
#section_keyword
================================== */
#section_keyword {display: flex; flex-direction: column; gap: 16px;}
#section_keyword > * {margin: 0;}
    
@media (min-width: 600px) {
    #section_keyword {gap: 32px;}
}
 
/* _form_l */
.form_search_b._search_service input[type="search"] {min-height: 56px !important;}
.form_search_b._search_service button {min-width: 56px !important; min-height: 56px !important;}

@media (min-width: 600px) {
    .form_search_b._search_service input[type="search"] {max-width: 580px !important; height: 64px !important; font-size: 2rem !important;}
}

/* ==================================
#section_category
================================== */

/* ========= card_list_ctg_serach ========= */
.card_list_ctg_serach {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 16px;
    list-style: none;
    padding: 0;
    margin: 0;
}

.card_list_ctg_serach > li > .toggle_ctg_btn {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
    gap: 16px 0;
    width: 100%;
    height: 100%;
    text-decoration: none;
    border-radius: 16px;
    padding: 16px;
    color: var(--c-link);
    background-color: #fff;
    border: 1px solid var(--c-gry-l);
    box-shadow: var(--box-shadow-a), var(--box-shadow-b);
    position: relative;
    cursor: pointer;
}
.card_list_ctg_serach > li > .toggle_ctg_btn:hover {color: var(--c-hover); background-color: var(--bg-hover-b); transition: 0.3s ease;}
.card_list_ctg_serach > li > .toggle_ctg_btn:hover::after {background-color: var(--c-hover); transform: none;}
.card_list_ctg_serach > li > .toggle_ctg_btn > .txt_wrap {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    gap: 16px;
    width: 100%;
    height: 100%;
}
.card_list_ctg_serach > li > .toggle_ctg_btn > .txt_wrap * {margin: 0 !important;}
.card_list_ctg_serach > li > .toggle_ctg_btn > .txt_wrap .title {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 100%;
    font-size: 1.6rem;
    line-height: 1.35;
    font-weight: bold;
    color: var(--c-text);
    padding: 0;
}
.card_list_ctg_serach > li > .toggle_ctg_btn > .txt_wrap > i {flex-shrink: 0; width: 64px; height: 64px;}
.card_list_ctg_serach > li > .toggle_ctg_btn > .txt_wrap > i img {object-fit: contain;width: 100%; height: 100%;}

/* button */
.card_list_ctg_serach > li > button.toggle_ctg_btn::after {
    content: "";
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-color: var(--c-link);
    mask: var(--ui-icon-plus) center bottom / 24px no-repeat;
    transition: transform 0.3s, mask-image 0.3s;
}

.card_list_ctg_serach > li > button.toggle_ctg_btn.is_active {background: var(--bg-main-g);}
.card_list_ctg_serach > li > button.toggle_ctg_btn.is_active::after {mask: var(--ui-icon-minus) center bottom / 24px no-repeat; background-color: #fff;}
.card_list_ctg_serach > li > button.toggle_ctg_btn.is_active > div .title {color: #fff;}
.card_list_ctg_serach > li > button.toggle_ctg_btn.is_active > div > i img {filter: brightness(0) invert(1);}

/* icon */
.card_list_ctg_serach > li > .toggle_ctg_btn > div > span {display: flex; flex-direction: column; gap: 16px;}
.card_list_ctg_serach > li > .toggle_ctg_btn > div > span::before {
  content: "";
  display: inline-block;
  width: 48px;
  height: 48px;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
.card_list_ctg_serach > li > .toggle_ctg_btn.is_active > div > span::before {
  mask-repeat: no-repeat;
  mask-position: center;
  mask-size: contain;
}
.card_list_ctg_serach > li > .toggle_ctg_btn._phone > div > span::before {background-image: url(/assets/img/icon/icon_service_phone_large.svg);}
.card_list_ctg_serach > li > .toggle_ctg_btn._internet > div > span::before {background-image: url(/assets/img/icon/icon_service_internet_large.svg);}
.card_list_ctg_serach > li > .toggle_ctg_btn._cloud > div > span::before {background-image: url(/assets/img/icon/icon_service_cloud_large.svg);}
.card_list_ctg_serach > li > .toggle_ctg_btn._outresorcing > div > span::before {background-image: url(/assets/img/icon/icon_service_outresorcing_large.svg);}
.card_list_ctg_serach > li > .toggle_ctg_btn._security > div > span::before {background-image: url(/assets/img/icon/icon_service_security_large.svg);}
.card_list_ctg_serach > li > .toggle_ctg_btn._hardware > div > span::before {background-image: url(/assets/img/icon/icon_service_hardware_large.svg);}
    
.card_list_ctg_serach > li > .toggle_ctg_btn._phone.is_active > div > span::before {mask-image: url(/assets/img/icon/icon_service_phone_large_hover.svg); background: #fff;}
.card_list_ctg_serach > li > .toggle_ctg_btn._outresorcing.is_active > div > span::before {mask-image: url(/assets/img/icon/icon_service_outresorcing_large_hover.svg); background: #fff;}
.card_list_ctg_serach > li > .toggle_ctg_btn._security.is_active > div > span::before {mask-image: url(/assets/img/icon/icon_service_security_large_hover.svg); background: #fff;}
.card_list_ctg_serach > li > .toggle_ctg_btn._internet.is_active > div > span::before,
.card_list_ctg_serach > li > .toggle_ctg_btn._cloud.is_active > div > span::before,
.card_list_ctg_serach > li > .toggle_ctg_btn._hardware.is_active > div > span::before{filter: brightness(0) invert(1); mask-image: none;}

/* a */
.card_list_ctg_serach > li > a.toggle_ctg_btn::after {
    content: "";
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    background-color: var(--c-link);
    mask: var(--ui-link-arrow) center bottom / 24px no-repeat !important;
    transition: transform 0.3s, background-color 0.3s;
}
.card_list_ctg_serach > li > a.toggle_ctg_btn:hover::after {background-color: var(--c-hover); transform: translateX(2px) !important;}
.card_list_ctg_serach > li > a.toggle_ctg_btn[target="_blank"]::after {mask-image: var(--ui-link-blank) !important;}

@media (min-width: 600px) {
    .card_list_ctg_serach {gap: 24px;}
    .card_list_ctg_serach > li > .toggle_ctg_btn {flex-direction: row;}
    .card_list_ctg_serach > li > .toggle_ctg_btn::after {position: absolute; right: 1em; bottom: 1em;}
    .card_list_ctg_serach > li > .toggle_ctg_btn > .txt_wrap .title {font-size: 1.8rem; padding: 0 24px;}
    .card_list_ctg_serach > li > .toggle_ctg_btn > .txt_wrap > i {width: 48px; height: 48px;}
}

@media (min-width: 960px) {
    .card_list_ctg_serach {grid-template-columns: repeat(3, 1fr); gap: 32px;}
}

/* ========= ctg_search_content ========= */
#ctg_search_content {display: none;}
#ctg_search_content.is_active {display: block; max-height: 2000px; opacity: 1;}

.ctg_search_content_wrap {
    overflow: hidden;
    width: 100%;
    grid-column: 1 / -1;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
    align-content: flex-start;
    padding: 24px 16px;
    gap: 32px;
    background: #fff;
    border: 1px solid var(--c-gry-l);
    box-shadow: var(--box-shadow-a), var(--box-shadow-b);
    border-radius: 16px;
}

.ctg_search_content_inner {opacity: 0; transition: opacity 0.3s ease;}
.ctg_search_content_inner.is_active {opacity: 1;}
.toggle_ctg_content {display: none;}

@media (min-width: 600px) {
    .ctg_search_content_wrap {padding: 32px;}
}

/* ==================================
 #section_case
================================== */
#section_case {padding: 0 16px 96px;}

#section_case > .section_inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
}

#section_case .case_wrap {
  position: relative;
  background: var(--bg-main-g);
  border-radius: 24px;
  padding: 32px 16px;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
}

#section_case .case_wrap > * {margin: 0;}

#section_case .case_wrap .swiper_container01._idx_case {
  width: 100vw;
  margin-left: calc(50% - 50vw);
  position: relative;
  z-index: 2;
  padding-inline: 40px;
}

#section_case .case_wrap .swiper_container01._idx_case .card_list_a .swiper-slide {opacity: 1 !important;transform: scale(1) !important;}
#section_case .case_wrap .swiper_container01._idx_case .card_list_a .swiper-slide {margin: 0 40px 20px !important;}

@media (min-width: 600px) {
  #section_case .case_wrap .swiper_container01._idx_case {padding-inline: 0;}
  #section_case .case_wrap .swiper_container01._idx_case .card_list_a .swiper-slide {max-width: calc(100% - 80px);}
  #section_case .case_wrap .swiper_container01._idx_case .card_list_a .swiper-slide .inner .img_wrap {width: 270px; flex-shrink: 0;}
  #section_case .case_wrap .swiper_container01._idx_case .card_list_a .swiper-slide .inner .txt_wrap {width: auto;}
  #section_case .case_wrap .swiper_container01._idx_case .card_list_a .swiper-slide .txt_wrap > .tit .title {font-size: 2.4rem;}
}

@media (min-width: 960px) {
  #section_case .case_wrap .swiper_container01._idx_case .card_list_a .swiper-slide {max-width: calc(100% - 120px);}
  #section_case .case_wrap .swiper_container01._idx_case .card_list_a .swiper > .swiper-button-prev {left:  calc((100% - 84vw) / 2 - 50px);}
  #section_case .case_wrap .swiper_container01._idx_case .card_list_a .swiper > .swiper-button-next {right: calc((100% - 84vw) / 2 - 50px);}
}

@media (min-width: 1024px) {
  #section_case .case_wrap {padding: 64px 16px;}
  #section_case .case_wrap .swiper_container01._idx_case .card_list_a .swiper-slide {max-width: 800px; margin: 20px 40px !important;}
  #section_case .case_wrap .swiper_container01._idx_case .card_list_a .swiper > .swiper-button-prev {left:  calc((100% - 800px) / 2 - 68px);}
  #section_case .case_wrap .swiper_container01._idx_case .card_list_a .swiper > .swiper-button-next {right: calc((100% - 800px) / 2 - 68px);}
}

/* ==================================
#section_support
================================== */
#section_support {background: url(/assets/home/img/bg_section_support.png) no-repeat left top / auto 100% #fff;}
#section_support > .inner {display: flex; flex-direction: column; gap: 32px;}
#section_support > .inner > * {margin: 0;}
#section_support .lead {color: var(--c-blk-l) !important;}

@media (max-width: 959px) {
    #section_support .hd_wrap_b .sub {text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff, 0 0 3px #fff;}
    #section_support .hd_wrap_b h2.hd_a {text-shadow: 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff, 0 0 6px #fff;}
    #section_support .lead {text-shadow: 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff, 0 0 4px #fff;}
}

@media (max-width: 599px) {
    #section_support .lead { color: var(--c-blk) !important;}
}

/* ==================================
#section_faq
================================== */
#section_faq ul.btn_list_a._hash > li > * {box-shadow: none;}

.form_search_b._search_faq input[type="search"] {min-height: 56px !important;}
.form_search_b._search_faq button {min-width: 56px !important; min-height: 56px !important;}

@media (min-width: 600px) {
    .form_search_b._search_faq input[type="search"] {max-width: 580px !important;}
}