.sec { padding: var(--space-9) 0; }
@media screen and (max-width: 768px) {
  .sec { padding: var(--space-8) 0; }
}
.sec--gray { background: var(--c-tint); }
.sec-lead { max-width: var(--w-read); margin: 0 auto var(--space-7); text-align: left; }
.hero { position: relative; z-index: 0; height: var(--h-hero); background: url("../img/hero.jpg?v=12ef5943") no-repeat center / cover; background: image-set(url("../img/hero.webp?v=879200ff") type("image/webp"), url("../img/hero.jpg?v=12ef5943") type("image/jpeg")) no-repeat center / cover; overflow: hidden; }
@media screen and (max-width: 1024px) {
  .hero { height: var(--h-hero-sp); }
}
@media screen and (max-width: 768px) {
  .hero { background: url("../img/hero-sp.jpg?v=347b01d9") no-repeat center / cover; background: image-set(url("../img/hero-sp.webp?v=ed6a1c57") type("image/webp"), url("../img/hero-sp.jpg?v=347b01d9") type("image/jpeg")) no-repeat center / cover; }
}
.hero__lead { position: absolute; top: calc(100% * 0.14); left: 0; right: 0; max-width: var(--w-narrow); margin: 0 auto; padding: 0 var(--space-4); text-align: center; }
@media screen and (max-width: 1024px) {
  .hero__lead { top: var(--space-9); }
}
.hero__copy { position: relative; z-index: 0; font-family: var(--ff-serif); font-size: var(--fs-7); line-height: var(--lh-1); color: var(--c-bg); }
.hero__copy::before { content: ""; position: absolute; z-index: calc(var(--z-1) * -1); top: calc(100% * -0.12); bottom: calc(100% * -0.12); left: 50%; width: calc(100% + var(--space-7)); max-width: calc(var(--space-7) * 16); transform: translateX(-50%); background: var(--veil-hero-copy); pointer-events: none; }
@media screen and (max-width: 1024px) {
  .hero__copy { font-size: var(--fs-6); }
}
@media screen and (max-width: 768px) {
  .hero__copy { font-size: var(--fs-5); }
}
.hero__logo { margin-bottom: var(--space-5); }
.hero__logo img { display: inline-block; width: calc(var(--space-8) * 3); max-width: calc(100% * 0.6); }
@media screen and (max-width: 1024px) {
  .hero__logo img { width: calc(var(--space-5) * 6.5); }
}
.hero__text { margin-top: var(--space-5); font-size: var(--fs-4); }
.hero__ph { display: inline-block; }
@media screen and (max-width: 1024px) {
  .hero__text { font-size: var(--fs-3); }
  .hero__text br { display: none; }
}
.hero__mark { margin-top: var(--space-6); font-family: var(--ff-en); color: var(--c-bg); opacity: 0; transform: translateY(var(--space-5)); animation: sw-rise calc(var(--t-2) * 5) ease forwards var(--t-2); }
.hero__mark .en { display: block; font-size: var(--em-16); line-height: 1; letter-spacing: var(--ls-1); }
@media screen and (max-width: 1024px) {
  .hero__mark .en { font-size: var(--fs-6); }
}
.hero__mark .since { display: block; margin-top: var(--space-2); font-size: var(--fs-5); letter-spacing: var(--ls-3); }
@media screen and (max-width: 1024px) {
  .hero__mark .since { font-size: var(--fs-4); }
}
@keyframes sw-rise {
  to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .hero__mark { animation: none; opacity: 1; transform: none; }
}
.intro { padding: var(--space-8) 0 var(--space-9); text-align: center; }
@media screen and (max-width: 768px) {
  .intro { padding: var(--space-8) 0 var(--space-8); }
}
.intro__text { max-width: var(--w-read); margin: 0 auto; text-align: left; }
.intro__text p + p { margin-top: var(--em-7); }
.btn_area ul { display: flex; flex-wrap: wrap; }
.btn_area li { width: calc(100% / 3); }
@media screen and (max-width: 1024px) {
  .btn_area li { width: 50%; }
}
@media screen and (max-width: 768px) {
  .btn_area ul { flex-wrap: nowrap; gap: var(--space-4); padding: 0 0 0 var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-left: var(--space-4); scrollbar-width: none; overscroll-behavior-x: contain; }
  .btn_area ul::-webkit-scrollbar { display: none; }
  .btn_area li { flex: 0 0 var(--w-slide-sp); width: var(--w-slide-sp); scroll-snap-align: start; }
}
.btn_area a { position: relative; z-index: 0; display: block; height: 100%; padding: calc(100% * 0.42) calc(100% * 0.08); overflow: hidden; text-align: center; color: var(--c-bg); background: var(--c-ink); }
@media screen and (max-width: 768px) {
  .btn_area a { aspect-ratio: 4 / 3; padding: 0; }
}
.btn_area a:focus-visible { outline-offset: calc(var(--space-2) * -1); }
.btn_area a::before, .btn_area a::after { content: ""; position: absolute; z-index: var(--z-1); border: var(--bd-2) solid transparent; transition: top var(--t-2) ease, right var(--t-2) ease, bottom var(--t-2) ease, left var(--t-2) ease; }
.btn_area a::before { top: var(--space-5); left: var(--space-5); right: calc(100% * 0.8); bottom: calc(100% * 0.8); border-top-color: var(--c-bg); border-left-color: var(--c-bg); }
@media screen and (max-width: 1024px) {
  .btn_area a::before { top: var(--space-2); left: var(--space-2); }
}
.btn_area a::after { bottom: var(--space-5); right: var(--space-5); top: calc(100% * 0.8); left: calc(100% * 0.8); border-bottom-color: var(--c-bg); border-right-color: var(--c-bg); }
@media screen and (max-width: 1024px) {
  .btn_area a::after { bottom: var(--space-2); right: var(--space-2); }
}
.btn_area a:hover::before, .btn_area a:focus-visible::before { right: var(--space-5); bottom: var(--space-5); }
@media screen and (max-width: 1024px) {
  .btn_area a:hover::before, .btn_area a:focus-visible::before { right: var(--space-2); bottom: var(--space-2); }
}
.btn_area a:hover::after, .btn_area a:focus-visible::after { top: var(--space-5); left: var(--space-5); }
@media screen and (max-width: 1024px) {
  .btn_area a:hover::after, .btn_area a:focus-visible::after { top: var(--space-2); left: var(--space-2); }
}
.btn_area .bg_img { position: absolute; inset: 0; z-index: calc(calc(var(--z-1) * 2) * -1); width: 100%; height: 100%; object-fit: cover; }
.btn_area a > span.veil { position: absolute; inset: 0; z-index: calc(var(--z-1) * -1); background: var(--veil-tile); }

.btn_area h3 { position: absolute; top: 50%; left: 50%; width: calc(100% * 0.9); transform: translate(-50%, -50%); font-size: var(--fs-3); }
@media screen and (max-width: 1024px) {
  .btn_area h3 { font-size: var(--fs-1); }
}
.btn_area h3 .en { display: block; font-family: var(--ff-en); font-size: var(--em-10); }
@media screen and (max-width: 1024px) {
  .btn_area h3 .en { line-height: var(--lh-1); }
}
.btn_area h3 .ja { display: block; }
.ibox { position: relative; overflow: hidden; padding: var(--space-8) calc(100% * 0.06); background: var(--c-accent-pale); }
@media screen and (max-width: 768px) {
  .ibox { padding: var(--space-7) var(--space-5); }
}
.ibox__bg { position: absolute; right: calc(100% * -0.01); bottom: calc(var(--em-1) * -1); font-family: var(--ff-en); font-size: var(--em-18); line-height: 1; white-space: nowrap; color: var(--c-bg); pointer-events: none; }
@media screen and (max-width: 768px) {
  .ibox__bg { font-size: var(--em-14); }
}
.ibox__in { position: relative; max-width: var(--em-19); }
.ibox__en { margin-bottom: var(--space-2); font-family: var(--ff-en); font-size: var(--fs-2); letter-spacing: var(--ls-2); color: var(--c-accent); }
.ibox__ttl { font-family: var(--ff-serif); font-size: var(--fs-5); line-height: var(--lh-1); word-break: keep-all; }
@media screen and (max-width: 768px) {
  .ibox__ttl { font-size: var(--fs-4); }
}
.service_box { margin-top: var(--space-9); }
@media screen and (max-width: 768px) {
  .service_box { margin-top: var(--space-7); }
}
.service_box > li { position: relative; display: flex; align-items: center; margin-bottom: var(--space-8); }
@media screen and (max-width: 1024px) {
  .service_box > li { flex-direction: column; }
}
.service_box > li::before { content: attr(data-en); position: absolute; top: calc(var(--space-8) * -1); z-index: calc(var(--z-1) * -1); color: var(--c-line); font-size: var(--em-17); font-family: var(--ff-en); line-height: 1; background: var(--shine-biz) no-repeat; background-size: calc(100% * 3) 100%; background-position: 100% 0; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.service_box > li.is-shine::before { animation: sw-shine var(--t-3) ease-in-out var(--t-1) 1 both; }
@media (prefers-reduced-motion: reduce) {
  .service_box > li.is-shine::before { animation: none; }
}
@media screen and (max-width: 768px) {
  .service_box > li::before { display: none; }
}
.service_box > li:nth-child(odd)::before { right: 0; }
.service_box > li:nth-child(even)::before { left: 0; }
.service_box > li:nth-child(even) { flex-direction: row-reverse; }
@media screen and (max-width: 1024px) {
  .service_box > li:nth-child(even) { flex-direction: column; }
}
.service_box .thum { position: relative; width: calc(100% * 0.6); flex: none; }
@media screen and (max-width: 1024px) {
  .service_box .thum { width: 100%; }
}
.service_box .thum img { aspect-ratio: 3 / 2; object-fit: cover; }
.service_box .leadBox { position: relative; z-index: var(--z-1); margin-left: calc(calc(100% * 0.08) * -1); padding: calc(100% * 0.05); background: var(--c-bg); box-shadow: var(--shadow); }
@media screen and (max-width: 1024px) {
  .service_box .leadBox { width: calc(100% * 0.9); margin: calc(var(--space-7) * -1) 0 0; }
}
.service_box > li:nth-child(even) .leadBox { margin-left: 0; margin-right: calc(calc(100% * 0.08) * -1); }
@media screen and (max-width: 1024px) {
  .service_box > li:nth-child(even) .leadBox { margin: calc(var(--space-7) * -1) 0 0; }
}
.service_box .num { font-family: var(--ff-en); font-size: var(--fs-5); line-height: 1; }
.service_box .service_name { margin-top: var(--space-2); font-size: var(--em-9); color: var(--c-accent); line-height: var(--lh-1); }
.service_box .service_name::after { content: ""; display: block; width: var(--space-7); height: var(--bd-3); margin-top: var(--space-2); background: var(--c-accent); }
.service_box .leadBox p { margin-top: var(--space-3); }
.co-tbl dd a { transition: color var(--t-1); }
.co-tbl dd a:hover { color: var(--c-accent); }
.tbl_layout { display: flex; flex-wrap: wrap; }
.tbl_layout dt { width: calc(100% * 0.22); padding: var(--space-5); color: var(--c-accent); border-top: 1px solid var(--c-accent); }
@media screen and (max-width: 768px) {
  .tbl_layout dt { width: 100%; padding: var(--space-3) var(--space-2) var(--space-1); }
}
.tbl_layout dd { width: calc(100% - calc(100% * 0.22)); padding: var(--space-5); border-top: 1px solid var(--c-line); }
@media screen and (max-width: 768px) {
  .tbl_layout dd { width: 100%; padding: var(--space-1) var(--space-2) var(--space-3); border-top: 0; }
}
.access__addr { margin-bottom: var(--space-3); }
.access__gmap { margin-top: var(--space-6); }
.access__gmap iframe { display: block; width: 100%; height: calc(var(--space-7) * 8); border: 0; }
.access__gmap.is-focus { outline: var(--bd-3) solid var(--c-focus); outline-offset: var(--bd-2); }
.grp-sec { overflow-x: clip; }
.group_list { display: grid; grid-template-columns: repeat(3, 1fr); column-gap: var(--space-6); }
@media screen and (max-width: 1024px) {
  .group_list { column-gap: var(--space-5); }
}
@media screen and (max-width: 768px) {
  .group_list { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: var(--w-slide-sp); column-gap: var(--space-4); margin-right: calc(var(--space-4) * -1); padding-bottom: var(--space-2); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; }
  .group_list::-webkit-scrollbar { display: none; }
}
.group_list > li { display: grid; grid-row: span 6; grid-template-rows: subgrid; row-gap: 0; align-content: start; }
@media screen and (max-width: 768px) {
  .group_list > li { scroll-snap-align: start; }
}
.group_list__img { position: relative; }
.group_list__img img { display: block; aspect-ratio: 16 / 10; object-fit: cover; border: 1px solid var(--c-line); }
.group_list__img--bottom img { object-position: 50% 100%; }
.group_list .suboffice_name { margin-top: var(--space-3); padding: 0 0 var(--em-3); border-bottom: 1px solid var(--c-accent); font-size: var(--fs-4); }
.group_list__lead { padding: var(--space-2) 0 var(--space-3); font-size: var(--fs-2); }
.group_list__row { display: flex; gap: var(--space-3); padding: var(--space-1) 0; border-top: 1px solid var(--c-line); font-size: var(--fs-2); }
.group_list__row .k { flex: none; width: var(--em-14); color: var(--c-accent); }
.group_list .suboffice_name a { color: var(--c-accent); }
.group_list .suboffice_name a:hover { text-decoration: underline; }
.bussiness_list { font-size: var(--fs-2); }
.bussiness_list li { position: relative; padding-left: var(--space-5); }
.bussiness_list li::before { content: "■"; position: absolute; top: var(--space-1); left: 0; font-size: var(--em-3); color: var(--c-accent); }
.nf { text-align: center; }
.nf__code { font-family: var(--ff-en); font-size: var(--em-15); line-height: 1; color: var(--c-accent); }
.nf ul { display: inline-block; margin: var(--space-5) 0; text-align: left; }
.cta { padding: var(--space-9) 0; background: var(--pattern-cta), var(--c-accent-pale); text-align: center; }
@media screen and (max-width: 768px) {
  .cta { padding: var(--space-8) 0; }
}
.cta__tel { margin-top: var(--space-3); font-family: var(--ff-en); font-size: var(--fs-6); line-height: var(--lh-1); }
.cta__tel-note { margin-top: var(--space-1); font-size: var(--fs-2); }
.cta__btns { display: grid; grid-template-columns: minmax(0, calc(var(--space-6) * 10)); justify-content: center; gap: var(--space-5); margin-top: var(--space-6); }
.prose h2 { margin: var(--space-6) 0 var(--space-3); padding: var(--em-2) var(--em-4); background: var(--c-accent-pale); color: var(--c-accent); font-size: var(--fs-3); }
.prose > p:first-child { margin-bottom: var(--space-4); }
.prose p + p { margin-top: var(--em-5); }
.prose ul, .prose ol { margin: var(--space-2) 0; }
.prose ul li { position: relative; padding-left: var(--space-4); }
.prose ul li::before { content: "■"; position: absolute; top: var(--space-1); left: 0; font-size: var(--em-3); color: var(--c-accent); }
.prose .tbl { width: 100%; margin: var(--space-3) 0; border-collapse: collapse; font-size: var(--fs-2); }
.prose .tbl th, .prose .tbl td { padding: var(--em-5) var(--em-6); border-top: var(--bd) solid var(--c-line); text-align: left; vertical-align: top; }
.prose .tbl th { color: var(--c-accent); border-top-color: var(--c-accent); font-weight: var(--fw-medium); white-space: nowrap; }
.prose .tbl thead th { background: var(--c-accent-pale); }
.prose .date { margin-top: var(--space-6); text-align: right; }
@media screen and (max-width: 768px) {
  .prose .tbl th { white-space: normal; }
  .prose .tbl--stack thead { position: absolute; width: var(--bd); height: var(--bd); overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .prose .tbl--stack, .prose .tbl--stack tbody, .prose .tbl--stack tr, .prose .tbl--stack th, .prose .tbl--stack td { display: block; }
  .prose .tbl--stack tr { padding: var(--space-2) 0 var(--space-3); border-top: var(--bd) solid var(--c-accent); }
  .prose .tbl--stack th, .prose .tbl--stack td { padding: var(--space-1) 0; border-top: 0; }
  .prose .tbl--stack td::before { content: attr(data-label); display: block; font-size: var(--fs-1); color: var(--c-accent); }
}
