@charset "UTF-8";
#tech {
  --baseFontSize: 14px;
  --blue: #0d2089;
  --white: #fff;
}
#tech img {
  width: 100%;
  vertical-align: middle;
}
#tech p,
#tech h1,
#tech h2 {
  margin: 0;
}
#tech a {
  text-decoration: none;
}
#tech .l-inner {
  max-width: min(1280px, 100% - 40px);
  margin: 0 auto;
  width: 100%;
}
#tech .tech__title {
  font-size: 40px;
  font-weight: 900;
  line-height: 1.75;
  color: var(--blue);
}
@media screen and (max-width: 520px) {
  #tech .tech__title {
    font-size: 24px;
  }
}
#tech .tech__list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin: 0;
  margin-top: 64px;
  margin-bottom: 96px;
}
@media screen and (max-width: 768px) {
  #tech .tech__list {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media screen and (max-width: 520px) {
  #tech .tech__list {
    grid-template-columns: 1fr;
  }
}
#tech .tech__card {
  position: relative;
  display: block;
  border-radius: 30px;
  background: #e4f5fe;
  overflow: hidden;
}
#tech .tech__card:hover .tech__cardTitle:before {
  width: 12px;
  height: 12px;
}
#tech .tech__card:hover .tech__cardImage {
  transform: scale(1.05);
}
#tech .tech__cardImage {
  max-width: 90%;
  margin: 0 auto;
}
#tech.js-top .tech__cardImage {
  transition: all 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#tech.js-top .tech__cardImage img {
  transform: translateY(100%);
}
#tech .tech__cardImage {
  transition: all 1.5s cubic-bezier(0.215, 0.61, 0.355, 1);
}
#tech .tech__cardTitle {
  position: absolute;
  top: 10px;
  left: 10px;
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 16px;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.7);
  backdrop-filter: blur(2px);
  padding: 16px;
}
#tech .tech__cardTitle::before {
  content: "";
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 999px;
  background: var(--blue);
  transition: all 0.3s ease;
}
#tech .tech__head {
  padding: 96px 0;
}
@media screen and (max-width: 520px) {
  #tech .tech__head {
    padding: 32px 0;
  }
}
#tech .tech__main {
  background: var(--white);
  border-radius: 64px;
  overflow: hidden;
}
@media screen and (max-width: 520px) {
  #tech .tech__main {
    border-radius: 32px;
  }
}
#tech .tech__headImage {
  overflow: hidden;
  border-radius: 64px;
  background: var(--white);
}
@media screen and (max-width: 768px) {
  #tech .tech__headImage {
    border-radius: 32px;
  }
}
#tech .tech__headImage img {
  max-width: 100%;
  transform: translateY(100%);
}
#tech .tech__mainContainer {
  display: grid;
  gap: 64px;
  max-width: 980px;
  margin: 0 auto;
  padding: 0 20px;
}
#tech .tech__mainContent {
  display: flex;
  align-items: center;
  gap: 50px;
}
@media screen and (max-width: 768px) {
  #tech .tech__mainContent {
    flex-direction: column-reverse;
    gap: 24px;
  }
}
#tech .tech__mainContent:nth-of-type(2n) {
  flex-direction: row-reverse;
}
@media screen and (max-width: 768px) {
  #tech .tech__mainContent:nth-of-type(2n) {
    flex-direction: column-reverse;
    gap: 24px;
  }
}
#tech .tech__subTitle {
  font-size: 28px;
  font-weight: 700;
  color: var(--blue);
  text-align: start;
  margin: 0;
}
@media screen and (max-width: 520px) {
  #tech .tech__subTitle {
    font-size: 20px;
  }
}
#tech .tech__mainTitle {
  font-size: 40px;
  font-weight: 900;
  line-height: 1.75;
  color: var(--blue);
  padding: 48px 0 24px;
  margin: 0;
}
@media screen and (max-width: 520px) {
  #tech .tech__mainTitle {
    font-size: 20px;
    padding: 24px 0;
  }
}
#tech .tech__detail {
  flex: 1;
}
#tech .tech__text {
  margin-top: 20px;
}
#tech .tech__image {
  display: grid;
  place-items: center;
  max-width: 435px;
  width: 100%;
  border-radius: 32px;
  background: linear-gradient(185deg, #f2f6fa 4.22%, #c6e5f0 95.78%);
  overflow: hidden;
}
#tech .tech__mainFuture {
  padding: 20px;
}
#tech .tech__mainFuture-container {
  background: url(/assets/img/development/future-bg.webp) no-repeat center center/cover;
  max-width: 980px;
  margin: 0 auto;
  padding: 64px 20px;
  border-radius: 32px;
  margin-top: 64px;
}
@media screen and (max-width: 520px) {
  #tech .tech__mainFuture-container {
    padding: 32px 20px;
  }
}
#tech .tech__mainFuture-en {
  font-size: 64px;
  font-weight: 700;
  color: var(--blue);
  line-height: 1;
  font-style: italic;
  text-align: center;
  mix-blend-mode: color-burn;
}
@media screen and (max-width: 520px) {
  #tech .tech__mainFuture-en {
    font-size: 48px;
  }
}
#tech .tech__mainFuture-title {
  font-size: 40px;
  font-weight: 700;
  color: var(--blue);
  margin-top: 48px;
  line-height: 1.5;
}
@media screen and (max-width: 520px) {
  #tech .tech__mainFuture-title {
    font-size: 20px;
    margin-top: 32px;
  }
}
#tech .tech__mainFuture-text {
  max-width: 724px;
  margin: 0 auto;
  margin-top: 48px;
}
@media screen and (max-width: 520px) {
  #tech .tech__mainFuture-text {
    margin-top: 32px;
  }
}
#tech .tech__cards {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  margin-top: 64px;
}
@media screen and (max-width: 768px) {
  #tech .tech__cards {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
    padding: 0 20px;
  }
}
@media screen and (max-width: 520px) {
  #tech .tech__cards {
    grid-template-columns: repeat(1, 1fr);
  }
}
#tech .tech__cards .tech__cardTitle {
  top: 20px;
  left: 20px;
}
#tech .tech__cards .tech__card:nth-of-type(1) {
  border-radius: 64px 0 0 64px;
}
@media screen and (max-width: 768px) {
  #tech .tech__cards .tech__card:nth-of-type(1) {
    grid-area: 1/1/2/2;
    border-radius: 32px 0 0 32px;
  }
}
@media screen and (max-width: 520px) {
  #tech .tech__cards .tech__card:nth-of-type(1) {
    grid-area: 1/1/2/2;
    border-radius: 32px;
  }
}
#tech .tech__cards .tech__card:nth-of-type(3) {
  border-radius: 0 64px 64px 0;
}
@media screen and (max-width: 768px) {
  #tech .tech__cards .tech__card:nth-of-type(3) {
    grid-area: 1/2/2/3;
    border-radius: 0 32px 32px 0;
  }
}
@media screen and (max-width: 520px) {
  #tech .tech__cards .tech__card:nth-of-type(3) {
    grid-area: 2/1/3/2;
    border-radius: 32px;
  }
}
#tech .tech__back {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
@media screen and (max-width: 768px) {
  #tech .tech__back {
    grid-area: 2/1/3/3;
    padding: 64px 0;
  }
}
@media screen and (max-width: 520px) {
  #tech .tech__back {
    grid-area: 3/1/4/2;
  }
}
#tech .tech__back .tech__backIcon {
  max-width: 40px;
  width: 100%;
}
#tech .tech__back .tech__backText {
  font-size: 20px;
  font-weight: 700;
  margin-top: 20px;
}
@media screen and (max-width: 520px) {
  #tech .tech__back .tech__backText {
    font-size: 16px;
  }
}
#tech .tech__back:hover {
  color: var(--blue);
}

.bg-blue {
  background: #daf5ff;
}

.mg-0 {
  margin: 0 !important;
}

#tech.bg-blue {
  padding-bottom: 96px;
}

/* ===== Loader base ===== */
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  display: block;
  background: #0d2089;
  transition: all 0.3s ease;
  /* 進捗％で可変（--progress: 0〜100） */
}
.loader__text {
  display: grid;
  place-items: center;
  width: 100%;
  height: 100%;
}
.loader span {
  color: #fff;
  grid-area: 1/1/-1/-1;
  font-size: 3vw;
  font-weight: 700;
  padding: 10px;
  line-height: 1.75;
}
.loader .js-defo,
.loader .js-load {
  -webkit-mask: linear-gradient(90deg, black 50%, transparent 50%);
  mask: linear-gradient(90deg, black 50%, transparent 50%);
  -webkit-mask-size: 200% 100%;
  mask-size: 200% 100%;
  transition: -webkit-mask-position 0.6s ease, mask-position 0.6s ease;
}
.loader .loader__text .js-defo {
  /* 0% → -100% にスライドして消える */
  -webkit-mask-position: calc(0% - var(--progress, 0%)) 0%;
  mask-position: calc(0% - var(--progress, 0%)) 0%;
}
.loader .loader__text .js-load {
  /* 100% → 0% にスライドして現れる */
  -webkit-mask-position: calc(100% - var(--progress, 0%)) 0%;
  mask-position: calc(100% - var(--progress, 0%)) 0%;
}
.loader .js-defo {
  position: relative;
  z-index: 1;
  color: #000a4b;
}
.loader .js-load {
  color: #fff;
}

.loader.is-hide {
  opacity: 0;
  pointer-events: none;
}

.is-sp {
  display: none;
}
@media screen and (max-width: 768px) {
  .is-sp {
    display: block;
  }
}

/* まずは色の定義。外側は白(=表示)、中央は透明(=穴) */
/* マスク（外側=白=表示、中央=transparent=穴） */
.js-mask {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  z-index: 1000;
  background: transparent;
  --mask: 0%;
  --cx: 50%;
  --cy: 50%;
  --mask-bg: #0d2089;
}

.js-mask::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mask-bg);
  -webkit-mask: radial-gradient(circle at var(--cx) var(--cy), transparent var(--mask), #fff var(--mask));
  mask: radial-gradient(circle at var(--cx) var(--cy), transparent var(--mask), #fff var(--mask));
}

.js-mask--close {
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: transparent;
  display: none;
  pointer-events: auto; /* 開始～終了までクリックをブロック */
  --mask: 0%;
  --cx: 50%;
  --cy: 50%;
  --mask-bg: #0d2089;
}

.js-mask--close::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--mask-bg);
  -webkit-mask: radial-gradient(circle at var(--cx) var(--cy), transparent var(--mask), #fff var(--mask));
  mask: radial-gradient(circle at var(--cx) var(--cy), transparent var(--mask), #fff var(--mask));
}

/* フォールバック（mask非対応） */
@supports not (mask: radial-gradient(circle at 50% 50%, transparent 0, #fff 100%)) {
  .js-mask--close::before {
    -webkit-mask: none;
    mask: none;
    clip-path: circle(var(--mask) at var(--cx) var(--cy));
  }
}