section {
 position: relative;
 width: 100%;
}

.bg {
 position: relative;
 z-index: 2;
 -webkit-mask-image: url(/common/img/arch.png);
         mask-image: url(/common/img/arch.png);
 -webkit-mask-repeat: no-repeat;
         mask-repeat: no-repeat;
 -webkit-mask-position: center bottom;
         mask-position: center bottom;
 -webkit-mask-size: 100% auto;
         mask-size: 100% auto;
 margin-bottom: calc(-100vw / var(--aspect-ratio));
 padding: 40px 0 140px;
 background: linear-gradient(to top, #fbfbfb, transparent 50%) bottom center/100% 100%, url(/common/img/common_bg.webp) center top;

 --width: 1500;
 --height: 110;
 --aspect-ratio: calc(var(--width) / var(--height));
}
@media screen and (max-width: 600px) {
 .bg {
  -webkit-mask-size: 100% 100%;
          mask-size: 100% 100%;
  margin-bottom: -10%;
  padding-top: 0;
 }
}

.bg2 {
 padding-bottom: 90px;
 background: url(/common/img/common_bg.webp) center top;
}
@media screen and (max-width: 1024px) {
 .bg2 {
  padding-bottom: 45px;
 }
}

.kv {
 height: 897px;
 overflow: hidden;
}
@media screen and (max-width: 1024px) {
 .kv {
  height: 598.5px;
 }
}
@media screen and (max-width: 600px) {
 .kv {
  height: auto;
  padding-top: 30%;
 }
}
@media screen and (max-width: 600px) {
 .kv {
  padding-top: 70%;
 }
}
.kv >.inner {
 display: flex;
 position: relative;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
 flex-direction: column;
}
@media screen and (max-width: 600px) {
 .kv >.inner {
  position: absolute;
  top: 80px;
  left: 0;
 }
}
.kv--base {
 position: absolute;
 top: 0;
 left: 50%;
 width: 2216px;
 translate: -50% 0;
}
@media screen and (max-width: 1024px) {
 .kv--base {
  top: 150px;
  width: 1108px;
 }
}
@media screen and (max-width: 600px) {
 .kv--base {
  display: flex;
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  align-items: center;
  translate: none;

  aspect-ratio: 750/600;
 }
}
.kv--base .video--deco {
 position: absolute;
 top: 0;
 left: 50%;
 width: 54.06%;
 translate: -50% 0;
}
@media screen and (max-width: 600px) {
 .kv--base .video--deco {
  width: 100%;
 }
}
.kv--base .video {
 position: absolute;
 top: 5.8528%;
 left: 50%;
 width: 47.3826%;
 translate: -50% 0;

 aspect-ratio: 1050/671;
}
@media screen and (max-width: 600px) {
 .kv--base .video {
  position: static;
  width: 100%;
  translate: 0;

  aspect-ratio: 750/540;
 }
}
.kv--base .video--mask {
 width: 100%;
 height: 100%;
 -webkit-mask-image: url(/index/img/mv_mask.png);
         mask-image: url(/index/img/mv_mask.png);
 -webkit-mask-repeat: no-repeat;
         mask-repeat: no-repeat;
 -webkit-mask-position: center;
         mask-position: center;
 -webkit-mask-size: cover;
         mask-size: cover;
 background: url(/index/img/mv_bg.webp) center/cover;
 background-color: transparent;
 transition: background-color 0.3s;
}
@media screen and (max-width: 600px) {
 .kv--base .video--mask {
  -webkit-mask-image: url(/index/img/mv_mask_sp.png);
          mask-image: url(/index/img/mv_mask_sp.png);
 }
}
.kv--base .video--mask video {
 position: relative;
 z-index: 2;
 width: 100%;
 height: 100%;
 object-fit: cover;
}
@media screen and (max-width: 600px) {
 .kv--base .base_img {
  display: none;
 }
}
.kv--txt {
 position: absolute;
 top: 0;
 left: 5%;
 z-index: 2;
 line-height: 1;
 font-size: 20px;
 letter-spacing: 0.2em;
}
@media screen and (max-width: 1024px) {
 .kv--txt {
  top: 0;
  left: 3%;
  font-size: 14px;
 }
}
@media screen and (max-width: 600px) {
 .kv--txt {
  top: 20px;
  font-size: 11px;
 }
}
.kv--ttl {
 display: flex;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 gap: 20px;
}
.kv--ttl_logo img {
 width: 165px;
}
.kv--ttl h1 {
 display: flex;
 flex-direction: row-reverse;
 align-items: flex-start;
 gap: 5px;
}
@media screen and (max-width: 600px) {
 .kv--ttl h1 {
  visibility: visible !important;
  opacity: 1 !important;
 }
}
.kv--ttl h1 span {
 display: inline-block;
 writing-mode: vertical-rl;
 text-orientation: upright;
 line-height: 1;
 padding: 15px 10px 10px;
 background: #ffffff;
 font-weight: 600;
 font-size: 30px;
 font-feature-settings: normal;
 letter-spacing: 0.1em;
}
@media screen and (max-width: 1024px) {
 .kv--ttl h1 span {
  font-size: 20px;
 }
}

.lead {
 margin-top: -80px;
}
@media screen and (max-width: 1024px) {
 .lead {
  margin-top: 40px;
 }
}
.lead >.inner {
 display: flex;
 flex-direction: row-reverse;
 justify-content: center;
 align-items: flex-start;
 gap: 70px;
}
@media screen and (max-width: 1024px) {
 .lead >.inner {
  gap: 30px;
 }
}
@media screen and (max-width: 600px) {
 .lead >.inner {
  flex-direction: column;
  align-items: center;
 }
}
.lead >.inner p {
 writing-mode: vertical-rl;
 text-orientation: upright;
 line-height: 3.3333333333;
 font-size: 18px;
 font-feature-settings: normal;
 letter-spacing: 0.2em;
}
@media screen and (max-width: 600px) {
 .lead >.inner p.pc-txt {
  display: none;
 }
}
.lead >.inner p.sp-txt {
 display: none;
}
@media screen and (max-width: 600px) {
 .lead >.inner p.sp-txt {
  display: flex;
 }
}
@media screen and (max-width: 1024px) {
 .lead >.inner p {
  line-height: 2.8125;
  font-size: 16px;
  letter-spacing: 0.15em;
 }
}
@media screen and (max-width: 600px) {
 .lead >.inner p {
  display: flex;
  width: 80%;
  line-height: 2.3333333333;
  font-size: 15px;
  letter-spacing: 0.1em;
 }
}
.lead >.inner p >span {
 display: contents;
}
@media screen and (max-width: 600px) {
 .lead >.inner p >span {
  display: inline-block;
  word-break: auto-phrase;
 }
 .lead >.inner p >span:nth-of-type(2) {
  margin-top: 30px;
  padding-top: 30px;
  border-top: 1px solid #dcdcdc;
 }
}
.lead >.inner p >span .sp-img {
 display: none;
}
@media screen and (max-width: 600px) {
 .lead >.inner p >span .sp-img {
  display: block;
  position: absolute;
  top: 0;
  left: -13%;
  width: 163.25px;
 }
}
.lead >.inner p span.tate {
 writing-mode: horizontal-tb;
 line-height: 1.5;
 letter-spacing: 0;
}
.lead--links {
 display: flex;
 align-items: flex-start;
 gap: 20px;
}
@media screen and (max-width: 600px) {
 .lead--links {
  width: 80%;
  flex-direction: column;
  justify-content: flex-start;
 }
}
.lead--links a {
 display: flex;
 writing-mode: vertical-rl;
 text-orientation: upright;
 line-height: 1;
 justify-content: center;
 align-items: center;
 gap: 10px;
 font-size: 20px;
 font-feature-settings: normal;
 letter-spacing: 0.2em;
}
@media screen and (max-width: 1024px) {
 .lead--links a {
  font-size: 18px;
 }
}
@media screen and (max-width: 600px) {
 .lead--links a {
  writing-mode: horizontal-tb;
 }
}

.characteristic {
 padding-top: 180px;
 padding-bottom: clamp(23.125rem, 11.406rem + 12.5vw, 26.875rem);
 background: url(/common/img/common_bg.webp) center top/100%;

 --width: 2034;
 --height: 2020;
 --aspect-ratio: calc(var(--width) / var(--height));
}
@media screen and (max-width: 1024px) {
 .characteristic {
  padding-bottom: 240px;
 }
}
@media screen and (max-width: 600px) {
 .characteristic {
  padding: calc(100vw / var(--aspect-ratio) * 0.75) 0 200px;

  --width: 1382;
  --height: 1581;
 }
}
.characteristic >.inner {
 width: 100%;
 margin: calc(-100vw / var(--aspect-ratio) / 3.3) auto 0;
}
@media screen and (max-width: 1024px) {
 .characteristic >.inner {
  margin: calc(-100vw / var(--aspect-ratio) / 3) auto 0;
 }
}
@media screen and (max-width: 600px) {
 .characteristic >.inner {
  margin: 20px auto 0;
 }
}
.characteristic--ttl {
 display: flex;
 position: absolute;
 top: -130px;
 left: 0;
 z-index: 3;
 flex-direction: column;
 justify-content: center;
 align-items: center;
}
@media screen and (max-width: 1024px) {
 .characteristic--ttl {
  top: -100px;
  left: -5%;
 }
}
@media screen and (max-width: 600px) {
 .characteristic--ttl {
  top: -30px;
  left: -10%;
  width: 90%;
 }
}
.characteristic--ttl .logo {
 width: 44vw;
 max-width: 659px;
}
@media screen and (max-width: 1024px) {
 .characteristic--ttl .logo {
  width: 100vw;
  max-width: 376.5714285714px;
 }
}
@media screen and (max-width: 600px) {
 .characteristic--ttl .logo {
  width: 100%;
  max-width: 100%;
 }
}
.characteristic--ttl hgroup {
 display: flex;
 position: relative;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 gap: 40px;
 margin-top: -170px;
}
@media screen and (max-width: 1024px) {
 .characteristic--ttl hgroup {
  gap: 20px;
  margin-top: -150px;
 }
}
@media screen and (max-width: 600px) {
 .characteristic--ttl hgroup {
  margin-top: -120px;
 }
}
.characteristic--ttl hgroup h2 {
 line-height: 1;
 font-weight: 600;
 font-size: 22px;
 letter-spacing: 0.2em;
}
@media screen and (max-width: 1024px) {
 .characteristic--ttl hgroup h2 {
  font-size: 20px;
 }
}
.characteristic--ttl hgroup p {
 writing-mode: vertical-rl;
 text-orientation: upright;
 line-height: 1.6666666667;
 color: var(--c_bl);
 font-weight: 500;
 font-size: 60px;
 font-feature-settings: normal;
 letter-spacing: 0.18em;
}
@media screen and (max-width: 1024px) {
 .characteristic--ttl hgroup p {
  font-size: 42px;
 }
}
@media screen and (max-width: 600px) {
 .characteristic--ttl hgroup p {
  font-size: 42px;
  letter-spacing: 0.1em;
 }
}
.characteristic--main {
 width: 67.8vw;
 margin-left: auto;
}
@media screen and (max-width: 1024px) {
 .characteristic--main {
  max-width: 508.5px;
 }
}
@media screen and (max-width: 768px) {
 .characteristic--main {
  width: 64%;
 }
}
@media screen and (max-width: 600px) {
 .characteristic--main {
  width: 90%;
 }
}
.characteristic--lead {
 display: flex;
 width: 38%;
 flex-direction: column;
 align-items: flex-start;
 padding-left: clamp(2.5rem, -19.013rem + 33.61vw, 12.5rem);
}
@media screen and (max-width: 600px) {
 .characteristic--lead {
  width: 90%;
  margin: 0 auto;
  padding: 0;
 }
}
.characteristic--lead p {
 line-height: 2;
 font-size: 16px;
 letter-spacing: 0.18em;
}
@media screen and (max-width: 1024px) {
 .characteristic--lead p {
  font-size: 14px;
 }
}
.characteristic--lead a {
 display: flex;
 line-height: 1;
 align-items: center;
 gap: 10px;
 margin-top: 20px;
 font-weight: 600;
 font-size: 20px;
 letter-spacing: 0.2em;
}
@media screen and (max-width: 1024px) {
 .characteristic--lead a {
  font-size: 18px;
 }
}
.characteristic--img {
 width: 90%;
 margin: 100px auto 0;
}
@media screen and (max-width: 1024px) {
 .characteristic--img {
  width: 80%;
  margin: 30px auto 0;
 }
}
@media screen and (max-width: 600px) {
 .characteristic--img {
  width: 100%;
 }
}
.characteristic--img img {
 width: 73%;
}
@media screen and (max-width: 1024px) {
 .characteristic--img img {
  width: 100%;
 }
}
.characteristic--illust {
 width: 90%;
 margin: -120px auto 0;
 text-align: right;
}
@media screen and (max-width: 1024px) {
 .characteristic--illust {
  margin-top: -5%;
 }
}
@media screen and (max-width: 600px) {
 .characteristic--illust {
  display: none;
 }
}
.characteristic--illust img {
 width: 82.18%;
}

.service {
 margin-top: calc(-100vw / var(--aspect-ratio));
 padding-bottom: 80px;
 background: url(/index/img/service_wave.webp) center top/contain no-repeat, linear-gradient(to bottom, transparent calc(100vw / var(--aspect-ratio) - 2px), var(--white) 0 100%) center top/100% no-repeat;

 --width: 1500;
 --height: 118;
 --aspect-ratio: calc(var(--width) / var(--height));
}
@media screen and (max-width: 1024px) {
 .service {
  padding-bottom: 40px;
 }
}
.service hgroup {
 display: flex;
 position: relative;
 top: -150px;
 flex-direction: column;
 justify-content: center;
 align-items: center;
 gap: 40px;
}
@media screen and (max-width: 1024px) {
 .service hgroup {
  top: -100px;
  gap: 20px;
 }
}
.service hgroup h2 {
 line-height: 1;
 font-weight: 600;
 font-size: 22px;
 letter-spacing: 0.2em;
}
@media screen and (max-width: 1024px) {
 .service hgroup h2 {
  font-size: 20px;
 }
}
.service hgroup p {
 writing-mode: vertical-rl;
 text-orientation: upright;
 line-height: 1.6666666667;
 color: var(--c_bl);
 font-weight: 500;
 font-size: 42px;
 font-feature-settings: normal;
 letter-spacing: 0.18em;
}
@media screen and (max-width: 1024px) {
 .service hgroup p {
  font-size: 32px;
 }
}
.service--lead {
 display: block;
 width: 90%;
 max-width: 700px;
 line-height: 1.8125;
 margin: -100px auto 30px;
 font-size: 16px;
 letter-spacing: 0.06em;
}
@media screen and (max-width: 1024px) {
 .service--lead {
  margin-top: -80px;
  font-size: 14px;
 }
}
@media screen and (max-width: 600px) {
 .service--lead {
  margin-top: -100px;
 }
}
.service--lists {
 width: 90%;
 max-width: 1100px;
 margin: 0 auto;
}
.service--lists_items {
 display: grid;
 width: 100%;
 grid-template-columns: 32% 1fr;
 gap: 10px 3%;
 padding: 20px;
 background: #f9f9fa;
}
@media screen and (max-width: 1024px) {
 .service--lists_items {
  grid-template-columns: 28% 1fr;
 }
}
@media screen and (max-width: 600px) {
 .service--lists_items {
  grid-template-columns: 35% 1fr;
  gap: 20px 5%;
 }
}
.service--lists_items:not(:last-child) {
 margin-bottom: 20px;
}
.service--lists_tmb img {
 border-radius: clamp(0.625rem, -1.25rem + 3.91vw, 1.25rem);
}
.service--lists_link {
 padding-top: 20px;
}
@media screen and (max-width: 1024px) {
 .service--lists_link {
  padding-top: 10px;
 }
}
@media screen and (max-width: 600px) {
 .service--lists_link {
  display: contents;
 }
}
.service--lists_link h3 {
 display: flex;
 justify-content: flex-start;
 margin-bottom: 40px;
}
@media screen and (max-width: 1024px) {
 .service--lists_link h3 {
  margin-bottom: 20px;
 }
}
@media screen and (max-width: 600px) {
 .service--lists_link h3 {
  margin: 0;
 }
}
.service--lists_link h3 a {
 display: flex;
 line-height: 1;
 justify-content: flex-start;
 align-items: center;
 gap: 10px;
 font-weight: 500;
 font-size: 32px;
 letter-spacing: 0.18em;
}
@media screen and (max-width: 1024px) {
 .service--lists_link h3 a {
  font-size: 24px;
 }
}
@media screen and (max-width: 600px) {
 .service--lists_link h3 a {
  line-height: 1;
  font-size: 20px;
  letter-spacing: 0.1em;
 }
}
.service--lists_link ul {
 display: grid;
 grid-template-columns: repeat(2, 1fr);
 gap: 10px;
}
@media screen and (max-width: 600px) {
 .service--lists_link ul {
  grid-column: span 2;
 }
}
.service--lists_link ul li {
 display: grid;
 height: 90px;
 align-items: center;
 grid-template-columns: 1fr 105px;
 padding: 0 20px 0 30px;
 border-radius: 20px;
 background: var(--white);
}
@media screen and (max-width: 1024px) {
 .service--lists_link ul li {
  grid-template-columns: 1fr 80px;
 }
}
@media screen and (max-width: 600px) {
 .service--lists_link ul li {
  height: auto;
  grid-template-columns: 1fr !important;
  gap: 20px;
  padding: 20px 0;
  text-align: center;
 }
}
.service--lists_link ul li p {
 line-height: 1.3333333333;
 font-weight: 500;
 font-size: 18px;
 letter-spacing: 0.18em;
}
@media screen and (max-width: 1024px) {
 .service--lists_link ul li p {
  font-size: 16px;
 }
}
@media screen and (max-width: 600px) {
 .service--lists_link ul li p {
  line-height: 1;
  font-size: 14px;
  letter-spacing: 0.1em;
 }
}
.service--lists_link ul li span {
 text-align: center;
}
@media screen and (max-width: 600px) {
 .service--lists_link ul li img {
  width: 70px;
 }
}
.service--more {
 display: flex;
 justify-content: center;
 align-items: center;
 margin-top: 40px;
}
.service--more a {
 display: flex;
 line-height: 1;
 align-items: center;
 gap: 10px;
 font-size: 20px;
 letter-spacing: 0.2em;
}
@media screen and (max-width: 1024px) {
 .service--more a {
  font-size: 18px;
 }
}

.deliver {
 -webkit-mask-image: url(/common/img/arch2_invert.png);
         mask-image: url(/common/img/arch2_invert.png);
 -webkit-mask-repeat: no-repeat;
         mask-repeat: no-repeat;
 -webkit-mask-position: center bottom;
         mask-position: center bottom;
 -webkit-mask-size: 100% auto;
         mask-size: 100% auto;
 padding-top: 100px;

 --width: 1500;
 --height: 110;
 --aspect-ratio: calc(var(--width) / var(--height));
}
@media screen and (max-width: 1024px) {
 .deliver {
  padding-top: 50px;
 }
}
.deliver--ttl {
 display: flex;
 justify-content: center;
 margin-bottom: 60px;
}
@media screen and (max-width: 1024px) {
 .deliver--ttl {
  margin-bottom: 30px;
 }
}
.deliver--ttl >.inner {
 display: flex;
 position: relative;
 gap: 40px;
 margin: 0 auto;
 padding: 0 0 20px 120px;
}
@media screen and (max-width: 1024px) {
 .deliver--ttl >.inner {
  gap: 20px;
  padding: 0 0 20px 80px;
 }
}
@media screen and (max-width: 600px) {
 .deliver--ttl >.inner {
  padding: 0 0 0 40px;
 }
}
.deliver--ttl h2 {
 position: relative;
 writing-mode: vertical-rl;
 text-orientation: upright;
 line-height: 1.6666666667;
 order: 2;
 margin-top: -0.5em;
 color: var(--c_bl);
 font-weight: 500;
 font-size: 30px;
 font-feature-settings: normal;
 text-indent: 0.5em;
 letter-spacing: 0.1em;
}
@media screen and (max-width: 1024px) {
 .deliver--ttl h2 {
  font-size: 24px;
 }
}
.deliver--ttl p {
 position: relative;
 z-index: 2;
 writing-mode: vertical-rl;
 text-orientation: upright;
 line-height: 2;
 font-size: 16px;
 font-feature-settings: normal;
 letter-spacing: 0.1em;
}
@media screen and (max-width: 1024px) {
 .deliver--ttl p {
  font-size: 14px;
 }
}
.deliver--ttl .circle {
 position: absolute;
 bottom: 0;
 left: 0;
}
@media screen and (max-width: 600px) {
 .deliver--ttl .circle {
  width: 130px;
 }
}
.deliver--slide {
 overflow: hidden;
 margin-bottom: 20px;
}
@media screen and (max-width: 600px) {
 .deliver--slide {
  width: 90%;
  margin: 0 auto 20px;
 }
}
.deliver--slide .swiper-wrapper .swiper-slide {
 overflow: hidden;
 border-radius: 20px;
}
.deliver--bottom {
 position: relative;
}
.deliver--bottom img {
 width: 100%;
}

@media screen and (max-width: 600px) {
 .recruit {
  margin-top: 30px;
 }
}
.recruit >.inner {
 position: relative;
 width: 90%;
 max-width: 1100px;
 margin: 0 auto;
}
.recruit--base {
 text-align: center;
}
@media screen and (max-width: 1024px) {
 .recruit--base {
  text-align: right;
 }
}
@media screen and (max-width: 600px) {
 .recruit--base {
  position: absolute;
  top: 0;
  left: 0;
 }
}
.recruit--base img {
 width: 100%;
 max-width: 985.5px;
}
@media screen and (max-width: 1024px) {
 .recruit--base img {
  width: 90%;
 }
}
@media screen and (max-width: 600px) {
 .recruit--base img {
  width: 100%;
 }
}
.recruit--text {
 position: absolute;
 top: 115px;
 left: 0;
 width: 100%;
}
@media screen and (max-width: 1024px) {
 .recruit--text {
  top: 50px;
 }
}
@media screen and (max-width: 600px) {
 .recruit--text {
  position: relative;
  top: 0;
  padding-top: 50px;
 }
}
.recruit--text h2 {
 display: inline-block;
 line-height: 1;
 margin-bottom: 40px;
 padding: 15px 20px;
 color: var(--white);
 background: var(--c_bl);
 font-weight: bold;
 font-size: 22px;
 letter-spacing: 0.2em;
}
@media screen and (max-width: 1024px) {
 .recruit--text h2 {
  margin-bottom: 25px;
  font-size: 18px;
 }
}
@media screen and (max-width: 1024px) {
 .recruit--text h3 {
  width: 295.3333333333px;
 }
}
@media screen and (max-width: 600px) {
 .recruit--text h3 {
  width: 260.5882352941px;
 }
}
.recruit--text p.lead {
 line-height: 2;
 margin: 20px 0 50px;
 font-size: 16px;
 letter-spacing: 0.2em;
}
@media screen and (max-width: 1024px) {
 .recruit--text p.lead {
  margin: 15px 0 30px;
  font-size: 14px;
 }
}
.recruit--text p.link {
 display: flex;
 justify-content: flex-start;
}
.recruit--text p.link a {
 display: flex;
 line-height: 1;
 align-items: center;
 gap: 20px;
 font-size: 20px;
 letter-spacing: 0.2em;
}
@media screen and (max-width: 1024px) {
 .recruit--text p.link a {
  font-size: 18px;
 }
}
.recruit--sp_img {
 display: none;
}
@media screen and (max-width: 600px) {
 .recruit--sp_img {
  display: block;
 }
}
/*# sourceMappingURL=layout.css.map */