@charset "utf-8";

.sub_page { overflow:hidden; background:#fff; }
.sub_top_visual { position:relative; display:flex; height:240px; padding:0 20px; align-items:center; justify-content:center; overflow:hidden; background-position:center; background-size:cover; color:#fff; }
.sub_top_visual::before { position:absolute; inset:0; background:rgba(0,0,0,.55); content:""; }
.sub_top_visual h1 { position:relative; z-index:1; font-size:50px; font-weight:700; line-height:1.5; text-align:center; }
.sub_visual_company { background-image:url(/dlrmf2000/img/sub/sub_visual_company.webp); background-position:center 54%; }
.sub_visual_gallery { background-image:url(/dlrmf2000/img/sub/sub_visual_gallery.webp); background-position:center 50%; }
.sub_visual_certificate { background-image:url(/dlrmf2000/img/sub/sub_visual_certificate.webp); background-position:center 42%; }
.sub_visual_inquiry { background-image:url(/dlrmf2000/img/sub/sub_visual_inquiry.webp); background-position:center 50%; }
.sub_content_title { color:#111; font-size:44px; font-weight:700; line-height:1.5; }
.sub_content_title em { color:var(--primary_color); }

/* company */
.sub_company_section { padding:110px 20px; }
.sub_company_inner { position:relative; width:100%; max-width:1440px; margin:0 auto; }
.sub_company_content { display:flex; margin-top:20px; gap:40px; }
.sub_company_column { display:flex; min-width:0; width:100%; flex-direction:column; }
.sub_company_column p { color:#111; font-size:18px; font-weight:500; line-height:1.6; }
.sub_company_description { margin-top:12px; }
.sub_company_image { width:100%; border-radius:20px; object-fit:cover; }
.sub_company_image_01 { height:378px; margin-top:30px; }
.sub_company_image_02 { height:320px; }
.sub_company_material { margin-top:30px; }
.sub_company_promise { margin-top:12px; }
.sub_company_promise strong {position:relative;z-index:1;color:#fff;font-weight:700;white-space:nowrap;margin-left: -3px;}
.sub_company_promise strong::before {position:absolute;z-index:-1;right:0;bottom: -2px;left:0;height: 25px;background:var(--primary_color);content:"";}
.sub_company_worker { position:absolute; bottom:-60px; left:-93px; width:130px; height:216px; }

/* certificates */
.sub_certificate_section { padding:110px 20px; }
.sub_certificate_inner { position:relative; width:100%; max-width:1440px; margin:0 auto; text-align:center; }
.sub_certificate_description { margin-top:20px; color:#111; font-size:18px; font-weight:500; line-height:1.6; }
.sub_certificate_text { width:100%; margin-top:5px; }
.sub_certificate_list { position:relative; z-index:1; display:flex; max-width:876px; margin:-82px auto 0; gap:40px; }
.sub_certificate_list figure { position:relative; width:100%; padding:0 20px 20px 0; }
.sub_certificate_list figure::after {position:absolute;z-index:-1;right:0;bottom:0;width:calc(100% - 20px);height:calc(100% - 20px);content:"";background: rgba(1.90, 30.05, 56.39, 0.08);border-radius: 20px;filter: blur(12px);}
.sub_certificate_list span { display:block; width:100%; height:261px; border-radius:20px; overflow:hidden; background:#fff; box-shadow:0 4px 12px rgba(3,31,58,.12); }
.sub_certificate_list img { width:100%; height:100%; object-fit:cover; }

/* embedded boards */
.sub_board_section { padding:110px 20px 120px; }
.sub_board_inner { width:100%; max-width:1440px; margin:0 auto; }
.sub_a11y_text { position:absolute; overflow:hidden; width:1px; height:1px; clip:rect(0 0 0 0); white-space:nowrap; }
.sub_board_tools { display:flex; align-items:center; justify-content:center; gap:8px; }
.sub_search_type { position:relative; display:block; width:100px; height:40px; }
.sub_search_type::after { position:absolute; top:14px; right:13px; width:9px; height:9px; border-right:2px solid #111; border-bottom:2px solid #111; content:""; transform:rotate(45deg); pointer-events:none; }
.sub_search_type select { width:100%; height:100%; padding:0 35px 0 12px; border:1px solid #d1dadf; border-radius:8px; outline:0; background:#fff; color:#111; font-size:16px; font-weight:500; line-height:1.6; appearance:none; }
.sub_search_field { display:flex; width:260px; height:40px; border:1px solid #d1dadf; border-radius:8px; align-items:center; background:#fff; }
.sub_search_field input { min-width:0; width:100%; height:100%; padding:0 5px 0 12px; border:0; outline:0; background:transparent; color:#111; font-size:16px; font-weight:500; line-height:1.6; }
.sub_search_field input::placeholder { color:#b2b2b2; opacity:1; }
.sub_search_field button { display:flex; width:40px; height:40px; flex:none; align-items:center; justify-content:center; }
.icon_search { width:24px; height:24px; background:url(/dlrmf2000/img/svg/icon_search.svg) center/contain no-repeat; }
.sub_write_button { display:flex; width:110px; height:40px; border-radius:8px; align-items:center; justify-content:center; background:#111; color:#fff; font-size:16px; font-weight:500; line-height:1.6; }
.sub_board_empty { display:flex; min-height:220px; margin-top:40px; border-top:2px solid var(--primary_color); border-bottom:1px solid #d1dadf; align-items:center; justify-content:center; color:#888; font-size:16px; }

.sub_gallery_list { display:flex; margin-top:40px; flex-wrap:wrap; gap:40px 20px; }
.sub_gallery_item { width:calc((100% - 60px) / 4); }
.sub_gallery_item a { display:flex; width:100%; min-width:0; flex-direction:column; }
.sub_gallery_thumbnail { display:flex; width:100%; aspect-ratio:345 / 200; border-radius:20px; align-items:center; justify-content:center; overflow:hidden; background:#e9ecef; }
.sub_gallery_thumbnail img { width:100%; height:100%; object-fit:cover; transition:transform .25s ease; }
.sub_gallery_no_image { color:#888; font-size:14px; font-weight:700; }
.sub_gallery_item strong { overflow:hidden; margin-top:7px; color:#111; font-size:18px; font-weight:500; line-height:1.6; text-align:center; text-overflow:ellipsis; white-space:nowrap; }
.sub_gallery_item time { margin-top:1px; color:#888; font-size:16px; font-weight:500; line-height:1.6; text-align:center; }

.sub_pagination { display:flex; margin-top:40px; justify-content:center; }
.sub_pagination ol { display:flex; align-items:center; gap:8px; }
.sub_pagination li { display:flex; width:40px; height:40px; align-items:center; justify-content:center; }
.sub_pagination li:first-child { margin-right:16px; }
.sub_pagination li:last-child { margin-left:16px; }
.sub_pagination a { position:relative; display:flex; width:100%; height:100%; border:1px solid transparent; border-radius:50%; align-items:center; justify-content:center; color:#111; font-size:16px; font-weight:500; line-height:1; }
.sub_pagination a.active { border-color:var(--primary_color); color:var(--primary_color); }
.sub_pagination a.pagination_arrow { color:transparent; font-size:0; }
.sub_pagination a.pagination_arrow::before { width:8px; height:8px; border-top:1.5px solid #111; border-right:1.5px solid #111; content:""; }
.sub_pagination a.pagination_prev::before { transform:rotate(-135deg); }
.sub_pagination a.pagination_next::before { transform:rotate(45deg); }
.sub_pagination a.is_disabled { opacity:.35; pointer-events:none; }

.sub_inquiry_section { padding-bottom:130px; }
.sub_list { margin-top:40px; border-top:2px solid var(--primary_color); }
.sub_list_head,
.sub_list_row { display:flex; width:100%; align-items:center; }
.sub_list_head { height:50px; border-bottom:1px solid #d1dadf; color:#111; font-size:16px; font-weight:500; text-align:center; }
.sub_list_head span:nth-child(1),
.sub_list_number { width:80px; flex:none; }
.sub_list_head span:nth-child(2),
.sub_list_subject { min-width:0; width:100%; }
.sub_list_head span:nth-child(3),
.sub_list_head span:nth-child(4),
.sub_list_meta span,
.sub_list_meta time { width:160px; flex:none; }
.sub_list_row { min-height:50px; border-bottom:1px solid #d1dadf; }
.sub_list_number { color:#888; font-size:16px; font-weight:500; text-align:center; }
.sub_list_subject { display:flex; padding:0 20px; align-items:center; gap:8px; overflow:hidden; color:#111; }
.sub_list_subject .icon_lock { width:20px; height:20px; flex:none; }
.sub_list_subject strong { overflow:hidden; font-size:16px; font-weight:500; line-height:1.6; text-overflow:ellipsis; white-space:nowrap; }
.sub_list_meta { display:flex; color:#888; font-size:16px; font-weight:500; line-height:1.6; text-align:center; }

/* hover */
@media (hover:hover) and (pointer:fine) {
  .sub_write_button { transition:background-color .2s ease; }
  .sub_write_button:hover { background:var(--primary_color); }
  .sub_gallery_item a:hover .sub_gallery_thumbnail img { transform:scale(1.03); }
  .sub_list_subject strong { transition:color .2s ease; }
  .sub_list_subject:hover strong { color:var(--primary_color); }
  .sub_pagination a:not(.is_disabled) { transition:border-color .2s ease, color .2s ease; }
  .sub_pagination a:not(.is_disabled):hover { border-color:var(--primary_color); color:var(--primary_color); }
}

@media (max-width:1024px) {
  .sub_top_visual { height:160px; }
  .sub_top_visual h1 { font-size:30px; }
  .sub_visual_company { background-position:center 54%; }
  .sub_visual_gallery { background-position:center 50%; }
  .sub_visual_certificate { background-position:center 42%; }
  .sub_visual_inquiry { background-position:center 50%; }
  .sub_content_title { font-size:24px; line-height:1.5; }

  .sub_company_section { padding:60px 20px; }
  .sub_company_inner { max-width:100%; }
  .sub_company_content { margin-top:12px; flex-direction:column; gap:0; }
  .sub_company_column { display:contents; }
  .sub_company_column p { font-size:15px; line-height:1.6; }
  .sub_company_intro { order:1; }
  .sub_company_description {order:2;margin-top: 8px;}
  .sub_company_image_01 { order:3; height:auto; margin-top:20px; aspect-ratio:320 / 169; }
  .sub_company_material { order:4; margin-top:20px; }
  .sub_company_promise { order:5; margin-top:8px; }
  .sub_company_image_02 { order:6; height:auto; margin-top:20px; aspect-ratio:320 / 130; }
  .sub_company_image { border-radius:10px; }
  .sub_company_promise strong { margin-left:0; padding:0 1px; background:var(--primary_color); color:#fff; white-space:normal; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
  .sub_company_promise strong::before { display:none; }
  .sub_company_worker { display:none; }

  .sub_certificate_section { padding:60px 20px; }
  .sub_certificate_inner { max-width:100%; }
  .sub_certificate_description { margin-top:12px; font-size:15px; line-height:1.6; }
  .sub_certificate_description br { display:none; }
  .sub_certificate_text { display:none; }
  .sub_certificate_list {margin: 20px 0 0;flex-direction:column;gap:20px;}
  .sub_certificate_list figure { padding:0; }
  .sub_certificate_list figure::after { display:none; }
  .sub_certificate_list span { height:auto; border-radius:10px; aspect-ratio:320 / 200; box-shadow:0 4px 12px rgba(3,31,58,.12); }

  .sub_board_section { padding:60px 20px; }
  .sub_board_inner {max-width: 100%;}
  .sub_board_tools { flex-wrap:wrap; gap:5px; }
  .sub_search_type { width:100px; }
  .sub_search_field {width: calc(100% - 105px);}
  .sub_search_type select,
  .sub_search_field input { font-size:14px; }
  .sub_write_button { width:100%; font-size:14px; }
  .sub_board_empty { min-height:160px; margin-top:30px; font-size:14px; }

  .sub_gallery_list { margin-top:30px; gap:40px 10px; }
  .sub_gallery_item { width:calc((100% - 10px) / 2); }
  .sub_gallery_thumbnail { border-radius:10px; aspect-ratio:155 / 110; }
  .sub_gallery_item strong { margin-top:7px; font-size:15px; }
  .sub_gallery_item time { margin-top:0; font-size:14px; }

  .sub_pagination { margin-top:40px; }
  .sub_pagination li { width:32px; height:32px; }
  .sub_pagination li:first-child { margin-right:8px; }
  .sub_pagination li:last-child { margin-left:8px; }
  .sub_pagination a { font-size:14px; }

  .sub_list { margin-top:30px; }
  .sub_list_head { display:none; }
  .sub_list_row {position:relative;min-height: 75px;padding: 12px 0;align-items:flex-start;flex-direction:column;justify-content:center;}
  .sub_list_number { display:none; }
  .sub_list_subject { padding:0; gap:5px; }
  .sub_list_subject .icon_lock { width:16px; height:16px; }
  .sub_list_subject strong { font-size:15px; }
  .sub_list_meta {padding-left: 0;margin-top: 4px;gap:10px;font-size: 14px;}
  .sub_list_meta span,
  .sub_list_meta time { width:auto; }
  .sub_list_meta time::before { margin-right:10px; content:"·"; }
}