@charset "utf-8";

:root {--text:#000000; --site_blue:#003E70;}

*:where(:not(html,iframe,canvas,img,svg,video,audio):not(svg *,symbol *)){all:unset;display:revert}*,*::before,*::after{box-sizing:border-box}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}a,button{cursor:revert}ol,ul,menu,summary{list-style:none}ol{counter-reset:revert}img{max-inline-size:100%;max-block-size:100%}table{border-collapse:collapse}input,textarea{-webkit-user-select:auto}textarea{white-space:revert}meter{-webkit-appearance:revert;appearance:revert}:where(pre){all:revert;box-sizing:border-box}::placeholder{color:unset}:where([hidden]){display:none}:where([contenteditable]:not([contenteditable="false"])){-moz-user-modify:read-write;-webkit-user-modify:read-write;overflow-wrap:break-word;-webkit-line-break:after-white-space;-webkit-user-select:auto}:where([draggable="true"]){-webkit-user-drag:element}:where(dialog:modal){all:revert;box-sizing:border-box}::-webkit-details-marker{display:none}

body {margin: 0;}
h1 {font-size: clamp(40px, calc(40px + (64 - 40) * ((100vw - 1200px) / (1920 - 1200))), 64px); font-weight:900; font-feature-settings:"palt";}
h1 span {font-size: clamp(18px, calc(18px + (28 - 18) * ((100vw - 1200px) / (1920 - 1200))), 28px); font-weight:800;}
h2 {color:var(--site_blue); font-size: clamp(28px, calc(28px + (40 - 28) * ((100vw - 1200px) / (1920 - 1200))), 40px); font-weight:700; margin: 0;}
h2 span {font-size:1.5rem;}
h3 {margin: 0}
p {font-size: 1rem;}
.bold {font-weight: 700;}

.container {max-width:1200px; width:100%; margin:0 auto;}
.br_pc {display: block;}
.br_sp {display: none;}

@media (max-width: 1200px) {
  h1 {font-size: clamp(30px, calc(30px + (40 - 30) * ((100vw - 980px) / (120 - 980))), 40px); font-weight:900; font-feature-settings:"palt";} 
}

@media (max-width: 640px) {
  h1 {font-size: clamp(28px, calc(28px + (48 - 28) * ((100vw  - 320px) / (980 - 320))), 48px);}
  h1 span {font-size: clamp(14px, calc(14px + (21 - 14) * ((100vw - 320px) / (980 - 320))), 21px); font-weight:800;}
  h2 {color:var(--site_blue); font-size: clamp(21px, calc(21px + (28 - 21) * ((100vw - 320px) / (640 - 320))), 28px);}
  h2 span {font-size:1.125rem;}
  .br_pc {display: none;}
  .br_sp {display: block;}
  p {font-size: 0.875rem;}
}


/** header **/
header {height:80px; padding:0 20px;}
header .container {max-width:1200px; width:100%; height:100%; margin: 0 auto; display:flex; justify-content:space-between; align-items:center;}
header .logo {max-width: 131px; width: 100%; height: auto;}
header .header-button {max-width:280px; width:100%;}
header .header-button a {max-width:280px; width:100%; height:44px; background: #FFEA01; background: linear-gradient(235deg, rgba(255, 234, 1, 1) 0%, rgba(235, 176, 15, 1) 100%); border-radius:44px; display: flex; justify-content: center; align-items: center; text-align: center; color: var(--site_blue); font-weight: 700;}
header .header-button span {
    background-color: var(--site_blue); padding: 2px 5px; color:#FFEA01; font-size: 0.875rem; margin-left:5px; border-radius:2px;}

@media (max-width: 640px) {
header {height:48px;}
header .logo {max-width:72px;}
header .header-button {max-width:160px; width:100%;}
header .header-button a {font-size: 0.875rem; max-width:180px; width:100%; height:32px;}
header .header-button a span {font-size: 0.75rem; padding: 1px 5px;}
}

/** mainvisual **/
.p-mv-wrapper {aspect-ratio: 16 / 7; background: url(../images/mainvisual_bgimg.webp); background-size: cover; overflow: hidden;}
.mv-container {display:flex; height:100%; justify-content:center; gap:10px; align-items:center; padding-block:40px; padding-inline:100px;padding-inline:clamp(70px, calc(70px + (100 - 70) * ((100vw - 1200px) / (1920 - 1200))), 100px); max-width: 1800px; margin: 0 auto;}
.mv-content {min-width:650px; height:100%; display: flex; justify-content: center; align-items: center; z-index:10;}
.mv-title {color: var(--site_blue);position: relative; bottom: 50px;}
.mv-title span {display:inline-block; position:relative; color:#FFF; padding:8px 10px; background: url(../images/mv-title_subcatch_bgimg.svg) no-repeat left center; background-size:contain; width:80%; aspect-ratio: 285 / 28; display:flex; justify-content:flex-start; align-items: center;}
/*.mv-title span::after {
    position: absolute;
    content: '';
    height: 100%;
    aspect-ratio: 15 / 28;
        right: -5.7%;
    bottom: 0;
    background: transparent;
    clip-path: polygon(0 0, 100% 100%, 0% 100%);
    background-color: #003E70;
}*/
.slide-content {display:flex; justify-content:center; align-items:center; gap:20px; margin-top:20px;}
.slide-logo {width:158px; height:auto; display: flex; justify-content: center; align-items: center; }
.slide-text {color: var(--site_blue); font-size:clamp(14px, calc(14px + (22 - 14) * ((100vw - 1201px) / (1920 - 1201))), 22px); font-weight:700; text-align:left;}
.slick-slide {-webkit-transition: 0.3s ease-in-out; transition: 0.3s ease-in-out; transform: scale( .75 );}
.is--active {transform: scale( 1 );}

@media (max-width: 1200px) {
  .mv-content {width:55%; height:30%; min-width:initial;}  
  .mv-container {padding: 40px; justify-content:flex-start; flex-direction:column; gap:10px;}
  .mv-title {width: 100%; letter-spacing:1px; bottom:initial;}
  .p-mv-wrapper {min-height:initial; aspect-ratio: 4 / 3;}
  /*.mv-title span {width:40vw;}
  .mv-title span::after {right: -22px;}*/
  .slide-text{text-align:left; font-size: clamp(10px, calc(10px + (24 - 10) * ((100vw - 320px) / (1200 - 320))), 24px);}
}
@media (max-width: 980px) {
  .mv-content {width:75%; height:auto;}
  .mv-container {padding:20px; justify-content: flex-start; max-width: initial;}
  .slider-wrapper {height: auto;}
  .p-mv-wrapper {aspect-ratio:1;}
  .slide-content {gap:10px; margin-top:5px;}
}
@media (max-width: 640px) {
  .p-mv-wrapper {height: initial; overflow: visible; aspect-ratio: 2 / 2.9;}
  .mv-container {padding:30px 20px; gap:20px;}
  .mv-content {width:100%;}
  .mv-title {width:90%;}
  /*.mv-title span {width:70vw;}
  .mv-title span::after {right:-19.5px;}*/
  .slide-logo {width: 80px;}
}
/** service area **/
.p-service-wrapper {background: #ACD7EA; background: linear-gradient(0deg,rgba(172, 215, 234, 1) 0%, rgba(228, 242, 248, 1) 100%); padding: 100px 40px;}
.p-service-item__button {display:flex; justify-content:center; align-items:flex-start;}
.p-service-item__button a {position: relative; max-width:420px; width:100%; height:40px; display:flex; justify-content:center; align-items:center; border:1px solid var(--site_blue); border-radius:40px; color:var(--site_blue); font-weight:700; transition: 0.5s ease;}
.p-service-item__button a:hover {background-color:var(--site_blue);color:#FFF; font-weight: 700;}
.p-service-item__button a span {position: relative; padding-right:16px;}
.p-service-item__button a span::after {position:absolute; content:''; background:url(../images/external_link_icon_blue.svg) no-repeat center center; width:11px; height:11px; top:50%; right:0; transform: translateY(-50%);}
.p-service-item__button a:hover span::after {background:url(../images/external_link_icon.svg) no-repeat center center;}
.p-service-itemlist {display: grid; grid-template-columns: 1fr 1fr; gap: 40px;}
.p-service-item__content {display: grid; background-color: #FFF; justify-content: flex-start; align-items: stretch; gap: 0; grid-template-columns: 63px 1fr;}
.p-service-title {position:relative; width:64px; background: var(--site_blue); background: linear-gradient(0deg, rgba(0, 62, 112, 1) 0%, rgba(12, 89, 161, 1) 100%); color:#FFF; padding: 20px 5px; display: flex; justify-content: flex-start; align-items: center; flex-direction: column; gap:20px;}
.p-service-title::after {position:absolute; content:''; width:0; height:0; border-style:solid; border-width:6px 0 6px 10px; border-color: transparent transparent transparent #0C59A1; right:-10px; top:50px;}
.p-service-title h3 {font-size:1.375rem; font-weight:700; writing-mode: vertical-rl; text-orientation:upright; letter-spacing:2px;}
.p-service-item__body {padding: 30px 20px 30px 40px; display:flex; align-items:stretch; flex-direction:column; gap:20px;box-shadow:0 1px 3px rgb(0 0 0 / 30%);}
.p-service-item__image {width:100%; height:200px; display:flex; justify-content:center; align-items:center; object-fit:contain;}
.p-service-item__logo-body {display:grid; grid-template-columns:155px 1fr; gap: 10px;}
.p-service-item__logo { max-width: 155px; height: 48px; display: flex; justify-content: center; align-items: center; border: 1px solid #ccc; object-fit: contain;}

@media (max-width: 980px) {
  .p-service-wrapper {padding:40px 20px;}
  .p-service-item__content {grid-template-columns:56px 1fr;}
  .p-service-item__logo-body {grid-template-columns:1fr; place-items: center;}
  .p-service-title {width:100%;}
  .p-service-itemlist {gap:20px;}
  .p-service-item__image {height:auto;}
  .p-service-item__logo {height:auto;}
}

@media (max-width: 640px) {
  .p-service-itemlist {grid-template-columns:1fr; gap:10px;}
  .p-service-item__body {padding:20px; gap:15px;}
}

/** usecase area **/
.p-usecase-wrapper {background: url(../images/top_usecase_bgimage.webp)no-repeat center top; padding: 100px 40px;}
.p-usecase-wrapper .container {}
.p-usecase-title {text-align:center; margin-bottom:20px;}
.p-usecase-description {font-size:1rem; color: var(--site_blue); text-align: center; font-weight: 700; margin-bottom: 40px;}
.p-entry-listbox {background:#FFF; border-radius:12px; box-shadow:0 5px 20px rgb(25 142 219 / 20%); display:grid; grid-template-columns: 240px 1fr; justify-content:flex-start; align-items:stretch; gap: 50px; transition: 0.5s ease;}
.p-entry-listbox__header {position: relative; width:240px; background: #2D8AE2; background: linear-gradient(0deg, rgba(45, 138, 226, 1) 0%, rgba(69, 162, 249, 1) 100%); color: #FFF; border-radius: 12px 0 0 12px; padding: 60px 10px 0 30px;}
.p-entry-listbox__title {font-size:2.5rem; font-weight:700; line-height: 0.7;}
.p-entry-listbox__title span {font-size:0.75rem; font-weight:500;}
.p-entry-listbox__header img {position: absolute; bottom:20px; left: 50%; transform:translateX(-50%); max-width:300px; height: auto;}
.p-entry-listbox__content {padding: 40px 40px 40px 0;}
.p-usecase-button-list-wrapper {margin-bottom: 40px;}
.p-usecase-button-list {display: flex; gap: 10px; justify-content: center; align-items: center;}
.p-usecase-button-list button {max-width: 240px; width: 100%; height: 50px; cursor: pointer; transition: 0.5s ease; text-align: center;}
.js-category-label {color: var(--site_blue); border:1px solid var(--site_blue); font-size:1.125rem; font-weight:700; background: none; border-radius: 4px;}
.js-category-label:hover {background-color: var(--site_blue); color:#FFF;}
.js-category-label.is-active {background: #2D8AE2; background: linear-gradient(0deg, rgba(45, 138, 226, 1) 0%, rgba(69, 162, 249, 1) 100%); color:#FFF; border:none;}

.usecase-table { display: grid; gap: 12px; }
.usecase-row--head { display: grid; grid-template-columns: 54px 1fr 170px 1fr; gap: 12px; align-items: center;}
.usecase-row--head .usecase-cell--head {color:var(--site_blue); font-weight:700; text-align:center; padding:14px 12px; border-radius: 8px;}
.usecase-row--head .usecase-cell--head:nth-child(1) {background:none;}
.usecase-row--head .usecase-cell--head:nth-child(2) {border-radius:8px 0 0 0; background:#EBF5FA;}
.usecase-row--head .usecase-cell--head:nth-child(3) {background:#CBE6F2; border-radius:0;}
.usecase-row--head .usecase-cell--head:nth-child(4) { border-radius:0 8px 0 0; background: #EBF5FA; }
.usecase-cell__subtitle_sp {display:none; color: var(--site_blue); font-weight:700;}
.usecase-row { display: grid; grid-template-columns: 54px minmax(170px, 1fr) 170px minmax(200px, 1fr); gap:0; align-items: center; border-radius: 12px; align-items: stretch; line-height: 1.8;}
.usecase-cell {background:#EBF5FA; padding:20px;}
.usecase-cell.case-tag-cell {display: inline-flex; flex-direction: column; align-items: center; justify-content: center; background:#3B98EF; color: #fff; max-width:54px; width: 100%; height: 100%; padding: 12px 8px; border-radius: 8px 0 0 8px; text-align: center; line-height: 1.4;}
.usecase-empty-cell {background:initial;}
.case-tag span {font-size:0.75rem; letter-spacing:1px;}
.case-tag strong {display:block; font-size:1.5rem; font-weight:700; line-height:1;}
.usecase-cell--service {background: #CBE6F2; max-width:170px; width:100%; display:flex; justify-content: center; align-items: center;}
.usecase-cell--service .service-logo {display:flex; justify-content:center; align-items:center; border-radius:8px;}
.usecase-cell--service img {max-width:100%; height:auto; display:block;}


/* ----- Responsive ----- */
@media (max-width: 980px) {
  .p-usecase-wrapper {padding:40px 20px;}
  .usecase-row--head { grid-template-columns: 72px 1fr;}
  .usecase-row--head .usecase-cell--head {display:none;}
  .usecase-row { grid-template-columns:1fr; grid-auto-rows: auto;}
  .usecase-cell__subtitle_sp {display:block;}
  .usecase-cell--service {grid-column: 1 / -1; justify-self:center; max-width:initial;}
  .usecase-cell.case-tag-cell {max-width:initial; border-radius:8px 8px 0 0;}
  .usecase-cell:last-child {border-radius: 0 0 8px 8px;}
  .p-entry-listbox {grid-template-columns:1fr;}
  .p-entry-listbox {flex-direction:column; gap:20px;}
  .p-entry-listbox__title {font-size:clamp(20px, calc(20px + (32 - 20) * ((100vw - 320px) / (980 - 320))), 32px); line-height:1; text-align:center;}
  .p-entry-listbox__title span {display:none;}
  .p-entry-listbox__header {width:100%; border-radius: 12px 12px 0 0; padding:20px;}
  .p-entry-listbox__header img {bottom:50%; left:20px; transform:translateY(40%); max-width:initial; width:90px; height:auto; max-inline-size:initial; max-block-size:initial;}
  .p-entry-listbox__content {padding:20px;}
  .usecase-row--head {display:none;}
  .case-tag {display:flex; align-items:center; gap:5px; justify-content:center; line-height:1;}
  .usecase-cell.sp-col2 {display:grid; grid-template-columns:150px 1fr; gap:10px; align-items:center; line-height:1.5;}
  .usecase-cell--service .service-logo img {max-width:200px; width:100%;}
}

@media (max-width: 640px) {
  .p-usecase-wrapper {padding:40px 10px;}
  .p-usecase-button-list {gap:5px;}
  .p-entry-listbox {flex-direction:column; gap:10px;}
  .p-entry-listbox__content {padding:10px;}
  .p-entry-listbox__header {padding: 13px;}
    .p-entry-listbox__header img {width:70px;}
  .usecase-cell.sp-col2 {display:grid; grid-template-columns:85px 1fr; gap:10px; padding:10px;}
    .usecase-cell--service .service-logo img {max-width:150px; width:100%;}
}

/* --- Slider 3D Style --- */
.slider-wrapper {
  max-width: 750px;
  height: 100%;
  width: 100%;
  min-height: 700px;
  margin: 0 auto;
  position: relative;
  perspective: 1200px;
  display: flex;
  justify-content: center;
  align-items: center;
}
.slider-container {position:relative; width:100%; height:100%;}
.slide {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 600px;
  max-width: 90vw;
  height: auto;
  opacity: 0;
  transform: translateX(-50%) scale(0.8);
  transition: 
      opacity 0.5s, 
      transform 0.5s, 
      filter 0.5s, 
      z-index 0s 0.5s;
  z-index: 1;
  filter: blur(6px) brightness(0.8);
  pointer-events: none;
}
.slide.active {
  opacity: 1;
  width: 100%;
  transform: translateX(-50%) scale(1) translateZ(40px) translateY(-50%);
  z-index: 3;
  filter: none;
  pointer-events: auto;
  transition: opacity 0.5s, transform 0.5s, filter 0.5s, z-index 0s;
}
.slide.left, .slide.right {
    opacity: 0.2;
    z-index: 2;
    filter: blur(6px) brightness(0.8);
    pointer-events: none;
    width: 600px;
    max-width: 90vw;
    height: 500px;
    top: 20%;
}
.slide.left {
  /* -120% → -100% で内側に詰める */
  transform: translateX(-80%) scale(0.9) rotateY(18deg);
}
.slide.right {
  /* 20% → 100px右に詰める（800px基準で12.5%） */
  transform: translateX(-20%) scale(0.9) rotateY(-18deg);
}
.slide:not(.active):not(.left):not(.right) {
  opacity: 0;
  z-index: 1;
  filter: blur(10px) brightness(0.7);
  pointer-events: none;
}

.slider-nav {
  position: absolute;
  top: 50%;
  width: 44px;
  height: 44px;
  background: rgba(255,255,255,0.8);
  border: none;
  border-radius: 50%;
  z-index: 10;
  cursor: pointer;
  transform: translateY(-50%);
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  transition: background 0.2s;
}
.slider-nav.prev { left: -10px; }
.slider-nav.next { right: -10px; }
.slider-nav::before {
  content: '';
  position: absolute;
  background: url(../images/left_arrow.svg)no-repeat center center;
  display: block;
  width: 20px;
  height: 20px;
  left: 50%;
  height: 50%;
  transform: translateX(-50%) translateY(-50%);
}
.slider-nav.prev::before {
}
.slider-nav.next::before {
    transform: rotate(180deg) translateX(50%) translateY(50%);
}
.slider-nav:active { background: #eee; }
@media (max-width: 1200px) {
  .slider-wrapper {
    align-items: flex-start;
    min-height: 70%;
  }
  .slide {top: 0;}
  .slide.active {height:80%; text-align:center; transform:translateX(-50%) scale(1) translateZ(40px) translateY(0%);}
  .slide.left, .slide.right {
    height: 400px;
  }
}
@media (max-width: 980px) {
  .slider-wrapper {
    width: 100%;
    max-width: 100%;
    min-height: initial;
  }
  .slider-container, .slide {
    height: 100%;
  }
  .slide, .slide.left, .slide.right {
    width: 260px;
    max-width: 90vw;
    height: 220px;
    /*top: 40%;*/
  }
  .slide.active { width:80%; max-width:initial; height:auto; text-align:center;
  }
  .slider-nav.prev { left: 10px; }
  .slider-nav.next { right: 10px; }
  .slide.left {
    transform: translateX(-100%) scale(0.9) rotateY(18deg);
  }
  .slide.right {
    transform: translateX(0%) scale(0.9) rotateY(-18deg);
  }
}

@media (max-width: 640px) {
  .slider-wrapper {
    width: 100%;
    max-width: 100%;
    height: 100%;
    min-height: initial;
  }
  .slider-container, .slide {
    height: -webkit-fill-available;
    height: 100%;
  }
  .slide,
  .slide.left,
  .slide.right {
    width: 140px;
    max-width: 95vw;
    height: 150px;
    opacity: 0;
  }
  .slide.active {width:90%; max-width:100%; height:auto; opacity:1; transform: translateX(-50%) scale(1.05) translateZ(40px) translateY(0); }
  .slider-nav {
    width: 32px;
    height: 32px;
  }
  .slider-nav.prev { left: -10px; }
  .slider-nav.next { right: -10px; }
}

/** cta area **/
.p-contact-wrapper {background: var(--site_blue); background: linear-gradient(180deg, rgba(10, 62, 111, 1) 0%, rgba(4, 33, 59, 1) 100%); color: #FFF; height: 300px; padding: 80px 40px;}
.p-contact-subtitle {text-align: center; margin-bottom: 10px;}
.p-contact-title {color:#FFF; text-align: center; font-weight: 700; margin-bottom: 40px;}
.p-contact-link-wrapper {display: flex; justify-content:center; align-items:flex-start;}
.p-contact-link-wrapper .p-contact-link {max-width:380px; width:100%; height:60px; background: #FFEA01;
background: linear-gradient(235deg, rgba(255, 234, 1, 1) 0%, rgba(235, 176, 15, 1) 100%); border-radius:60px; display: flex; justify-content: center; align-items: center; text-align: center; color: var(--site_blue); font-weight: 700; transition: 0.5s ease;}
.p-contact-link-wrapper .p-contact-link span {background-color: var(--site_blue); padding: 2px 5px; color:#FFEA01; font-size: 0.875rem; margin-left:5px; border-radius:2px;}
.p-contact-link-wrapper .p-contact-link:hover {background: #FFEA01; background: linear-gradient(235deg, rgba(255, 234, 1, 1) 0%, rgba(255, 234, 1, 1) 100%); transition: 0.5s ease;}
/** footer area **/
footer {background-color: #FFF;}
footer .container {max-width:initial;}
footer .p-footer-inner {padding: 20px 32px; display: flex; justify-content:flex-start; align-items: center; gap:40px;}
footer .p-footer-logo {display: flex; justify-content: flex-start; align-items: center; gap:10px;}
footer .p-footer-desc {font-size:0.75rem;}
footer .p-footer-links {font-size:0.75rem; display: flex; justify-content: flex-end; align-items: center; gap: 20px;}
footer .p-footer-links li img {margin-left:5px;}

@media (max-width: 980px) {
  .p-contact-wrapper {height:auto; padding:40px 20px;}
  .p-contact-subtitle {margin-bottom:20px;}
  .p-contact-title {margin-bottom:20px;}
} 

@media (max-width: 600px) {
  footer .p-footer-inner {padding:40px 20px; flex-direction:column; gap:20px; }
  footer .p-footer-links {justify-content:center; align-items:flex-start; gap:10px 20px; flex-wrap: wrap;}
}
.js-category-item.is-hide {display:none;}