/*mainvisual animation*/
.mainVisual {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 540px;
  overflow: hidden;
  background:
    url("../images/main_bg.webp")
    center / cover no-repeat;
}

.mainVisual__network {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.mainVisual__inner {
  position: relative;
  z-index: 1;
  width: min(1200px, calc(100% - 40px));
  text-align: center;
}

.mainVisual__title span,
.mainVisual__lead strong {
  color: #f4514a;
}

@media (max-width: 767px) {
  .mainVisual {
    min-height: 480px;
  }
}

/*各セクションの背景*/
section.faq{
	background-image:url("../images/faq_bg.webp");
	background-position: center;
	background-repeat: no-repeat;
	background-size:cover;
	position: relative;
	z-index: 0;
	padding:40px 0 40px;
}
section.faq.original{
	background-image:none;
}
section.faq::after{
	content: "";
	width:100%;
	height: 100%;
	position: absolute;
	background:rgba(255,255,255,.6);
	margin:auto;
	top:0;
	bottom:0;
	right:0;
	left:0;
	z-index: 1;
}


.header {
	position: fixed;
	z-index: 1000;
	top: 0;
	left: 0;
	width: 100%;
	background-color: #fff;
	box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
body {
	padding-top: 81px;
}
/* 980pxのヘッダー本体 */
.header__inner {
	position: relative;
	z-index: 1;

	width: 100%;
	max-width: 1100px;
	height: 80px;
	margin-inline: auto;
	/*padding-left:50px;
	padding-right: 50px;*/
	background-color: #fff;
	display: flex;
	align-items: center;
}

/* 左右のグラデーション */
.header::before,
.header::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;

	/* 画面幅から980pxを引いた残りの半分 */
	width: max(0px, calc((100vw - 1200px) / 2));

	pointer-events: none;
}

/* 左側 */
.header::before {
	left: 0;
	background: linear-gradient(
	to right,
	var(--color-red) 0%,
	#fff 100%
  );
}

/* 右側 */
.header::after {
	right: 0;
	background: linear-gradient(
	to left,
	var(--color-blue) 0%,
	#fff 100%
  );
}
.header__logo {
  flex-shrink: 0;
}

.header__logo img {
  display: block;
  width: 120px;
  height: auto;
}

.header__nav {
  margin-left: auto;
}

.header__nav ul {
	display: flex;
	align-items: center;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.header__nav ul li{
	position: relative;

}

.header__nav a {
	color: #111;
	font-size: 1.6rem;
	font-weight: 700;
	text-decoration: none;
	position: relative;
	display: inline-block;
}
@media(min-width:768px){
	.header__nav a::after{
		content: "";
		display: block;
		width:0%;
		height: 3px;
		background:var(--color-red);
		margin:auto;
		left:0;
		right:0;
		bottom:0;
		transition: width 0.2s;
	}
	.header__nav a:hover::after,
	li.active a::after{
		width:100%;
		transition: width 0.2s;
	}
}
.header__nav li.new::before {
	content: "NEW !";
	font-style: italic;
	width:4em;
	display: block;
	color: var(--color-red);
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	position: absolute;
	right:-1em;
	top:-1em;
}
@media(max-width:767px){
	.header__nav li.new::before {
		top:2em;
	}
}
.header__scsk {
  flex-shrink: 0;
  margin-left: 32px;
}

.header__scsk img {
  display: block;
  width: 90px;
  height: auto;
}

/* PCではハンバーガー非表示 */
.header__menu {
  display: none;
}
@media (max-width: 1100px) {

  .header__inner {
    height: 72px;
    padding-inline: 24px;
  }

  /* PCナビをモバイルメニュー化 */
  .header__nav {
    position: fixed;
    top: 73px;
    right: 0;

    width: 100%;
    height: calc(100dvh - 73px);

    margin: 0;
    padding: 32px 24px;

    background-color: #fff;

    visibility: hidden;
    opacity: 0;
    transform: translateX(100%);

    transition:
      transform 0.3s ease,
      opacity 0.3s ease,
      visibility 0.3s;
  }

  .header__nav.is-open {
    visibility: visible;
    opacity: 1;
    transform: translateX(0);
  }

  .header__nav ul {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
  }

  .header__nav li {
    border-bottom: 1px solid #ddd;
  }

  .header__nav a {
    display: block;
    padding: 18px 8px;

    font-size: 16px;
  }

  /* SCSKロゴ */
  .header__scsk {
    margin-left: auto;
    margin-right: 24px;
  }

  /* ハンバーガー */
  .header__menu {
    position: relative;

    display: block;

    width: 40px;
    height: 40px;
    padding: 0;

    background: none;
    border: 0;

    cursor: pointer;
  }

  .header__menu span {
    position: absolute;
    left: 8px;

    display: block;

    width: 24px;
    height: 2px;

    background-color: #111;

    transition:
      transform 0.3s ease,
      opacity 0.3s ease;
  }

  .header__menu span:nth-child(1) {
    top: 11px;
  }

  .header__menu span:nth-child(2) {
    top: 19px;
  }

  .header__menu span:nth-child(3) {
    top: 27px;
  }

  /* ×に変形 */
  .header__menu.is-open span:nth-child(1) {
    top: 19px;
    transform: rotate(45deg);
  }

  .header__menu.is-open span:nth-child(2) {
    opacity: 0;
  }

  .header__menu.is-open span:nth-child(3) {
    top: 19px;
    transform: rotate(-45deg);
  }
}
/********************
mainvisual
********************/
    .mainVisual {
      position: relative;
      isolation: isolate;
      display: grid;
      place-items: center;
      min-height: var(--hero-min-height);
      overflow: hidden;
      background-color: #d9eef5;
      background-image: url("../images/main_bg.webp");
      background-repeat: no-repeat;
      background-position: center;
      background-size: cover;
    }

    .mainVisual__inner {
      width: min(100% - 40px, 980px);
      /*padding: 56px 0 64px;*/
      text-align: center;
    }

    .mainVisual__title {
      margin: 0;
	  font-size: clamp(2rem, 1.014rem + 2.629vw, 4.8rem);


      font-weight: 800;
      line-height: 1.35;
      letter-spacing: .02em;
    }

    .mainVisual__lead {
      margin: 20px 0 0;
	  font-size: clamp(1.6rem, 1.424rem + 0.469vw, 2.1rem);

	  font-weight: 700;
      line-height: 1.75;
    }

    .mainVisual__accent {
      color: var(--color-red);
    }

    @media (max-width: 767px) {
      :root {
        --hero-min-height: 390px;
      }

      .mainVisual {
        background-position: center;
      }

      .mainVisual__inner {
        width: min(100% - 32px, 560px);
        padding: 64px 0;
      }

      .mainVisual__title {
		font-size: clamp(2rem, 1.014rem + 2.629vw, 4.8rem);
        line-height: 1.45;
      }

      .mainVisual__titleText {
        display: block;
      }

      .mainVisual__lead {
        margin-top: 24px;
        line-height: 1.9;
		font-size: clamp(1.6rem, 1.424rem + 0.469vw, 2.1rem);
      }

      .mainVisual__leadBreak {
        display: none;
      }
    }

    @media (prefers-reduced-motion: reduce) {
      *,
      *::before,
      *::after {
        scroll-behavior: auto !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
      }
    }
	
h2.section-title {
	display: flex;
	align-items: center;
	gap: 22px;
	margin: 2em auto 1em;
	font-size: clamp(2.4rem, 1.907rem + 1.315vw, 4.8rem);
	font-weight: 700;
	line-height: 1.4;
	white-space: nowrap;
	position: relative;
	z-index: 2
}
.section-title.red{
	color: var(--color-red);
}
.section-title.blue{
	color: var(--color-blue);
}
.section-title.white{
	color: #fff;
}
.section-title::before,
.section-title::after {
	content: "";
	flex: 1;
	height: 3px;
}
.section-title.red::before,
.section-title.red::after{
	background-color: var(--color-red);
}
.section-title.blue::before,
.section-title.blue::after{
	background-color: var(--color-blue);
}
.section-title.white::before,
.section-title.white::after{
	background-color: #fff;
}
.about__lead p,
.about__description p{
	text-align: center;
	margin:auto auto 1em;
	max-width:980px;
	padding:0 2em;
}
.about__lead p{
	font-size: clamp(1.8rem, 1.589rem + 0.563vw, 2.4rem);
	color:var(--color-blue);
	font-weight: bold;
	text-align: left;
}
.about__description p{
	font-size:clamp(1.6rem, 8vw, 1.8rem);
}
/* ========================================
Why Denodo / Why SCSK
======================================== */

.whyArea {
  width: 100%;
}


/* -------------------------
section
------------------------- */

.whySection {
  margin: 0;
}

.whySection--denodo {
  --why-color: #f4514a;
  --why-accent: #f4514a;

  background-color: var(--why-color);
}

.whySection--scsk {
  --why-color: #192c98;
  --why-accent: #192c98;

  background-color: var(--why-color);
}


/* -------------------------
summary
------------------------- */

.whySection__heading {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 16px;
	width: 100%;
	min-height: 82px;
	padding: 50px 70px;
	color: #fff;
	font-family: Arial, sans-serif;
	font-size: clamp(2.4rem, -0.135rem + 6.761vw, 9.6rem);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
	transition:	background-color 0.3s,opacity 0.3s,font-size 0.25s;
}
.whySection__heading span.small{
	font-size: clamp(1.4rem, 1.048rem + 0.939vw, 2.4rem);
	padding-bottom:1em;
}
.whySection__heading::-webkit-details-marker {
	display: none;
}

.whySection__heading:hover {
	font-size: clamp(2.6rem, -0.135rem + 7vw, 9.8rem);
	transition: font-size 0.25s;
}
.whySection[open] .whySection__heading:hover,
.whySection[open] .whySection__heading{
	font-size: clamp(2.6rem, -0.135rem + 7vw, 9.8rem);
}

/* + アイコン */

.whySection__icon {
	position: absolute;
	right:0;
	left:0;
	bottom:20px;
	margin:auto;
	width: 40px;
	height: 40px;
	border: 4px solid rgba(255, 255, 255, 0.7);
	border-radius: 50%;
}

.whySection__icon::before,
.whySection__icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 18px;
	height: 3px;
	background-color: #fff;
	transform: translate(-50%, -50%);
	transition: transform 0.25s;
}

.whySection__icon::after {
	transform:
		translate(-50%, -50%)
		rotate(90deg);
}

.whySection[open] .whySection__icon::after {
	transform:
		translate(-50%, -50%)
		rotate(0deg);
}


/* -------------------------
body
------------------------- */

.whySection__body {
	overflow: hidden;
}

.whySection__inner {
	width: min(calc(100% - 40px), 1200px);
	margin: 0 auto;
	padding: 50px 60px 70px;
	background-color: #fff;
	border-radius: 10px;
	margin-bottom:100px;
}


.whySection[open] .whySection__body {
	animation: whyOpen 0.4s ease both;
}

@keyframes whyOpen {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* -------------------------
title
------------------------- */

.whySection__title {
  margin: 0 0 36px;

  color: #222;

  font-size: clamp(2rem, 1.437rem + 1.502vw, 3.6rem);
  font-weight: 700;
  line-height: 1.6;
  text-align: center;
}

.whySection__lead {
	margin: -15px 0 35px;
	font-size: clamp(1.6rem, 1.318rem + 0.751vw, 2.4rem);
	line-height: 1.8;
	text-align: center;
}
.whySection__lead span.bigred{
	font-size: clamp(2.4rem, -0.135rem + 6.761vw, 9.6rem);
	color:var(--color-red);
	font-weight: bold;
	padding-right:10px;
}


/* ========================================
Why Denodo
======================================== */

.whyProblems,
.whyBenefits {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.whyProblems__item,
.whyBenefits__item {
  position: relative;

  min-width: 0;
  padding: 28px 20px 24px;

  text-align: center;

  background-color: #fff;

  border: 1px solid #ddd;
  border-radius: 4px;

  box-shadow:
    0 5px 12px rgba(0, 0, 0, 0.12);
}

.whyProblems__number,
.whyBenefits__number {
	margin: 0 0 10px;
	font-size: clamp(2rem, 1.648rem + 0.939vw, 3rem);
	font-weight: 700;
	border-radius: 3em;
	width:2em;
	height: 2em;
	display: block !important;
	margin:auto !important;
	color:#fff;
	
}

.whyProblems__number {
	background:var(--color-red);
	color: #fff;
}

.whyBenefits__number {
	background:var(--color-blue);
	color: #fff;
}

.whyProblems__icon,
.whyBenefits__icon {
  display: flex;
  justify-content: center;
  align-items: center;

  height: 65px;
  margin-bottom: 16px;
}

.whyProblems__icon img,
.whyBenefits__icon img {
  width: auto;
  max-width: 75px;
  max-height: 65px;
}

.whyProblems__title,
.whyBenefits__title {
  margin: 28px 0 14px;

  font-size: 2rem;
  line-height: 1.55;
  background-repeat: no-repeat;
  background-position: center top;
  background-size:70%;
  padding-top:40%;
}
.whyProblems__title.wd01{
	background-image:url("../images/wd01.svg");
}
.whyProblems__title.wd02{
	background-image:url("../images/wd02.svg");
}
.whyProblems__title.wd03{
	background-image:url("../images/wd03.svg");
}
.whyBenefits__title.wd04{
	background-image:url("../images/wd04.svg");
}
.whyBenefits__title.wd05{
	background-image:url("../images/wd05.svg");
}
.whyBenefits__title.wd06{
	background-image:url("../images/wd06.svg");
}
.whyProblems__text,
.whyBenefits__text {
  margin: 0;
	font-size: clamp(1.2rem, 1.059rem + 0.376vw, 1.6rem);
  line-height: 1.5;
  text-align: left;
}
.whyBenefits__result{
	color:var(--color-blue);
	font-weight: bold;
	font-size: clamp(1.6rem, 1.037rem + 1.502vw, 3.2rem);
	font-size: clamp(1.6rem, 0.685rem + 2.441vw, 4.2rem);
	margin-top:1em;
	position: relative;
	z-index: 1;
}
.whyBenefits__result::after{
	content: "";
	width:40%;
	height: 10px;
	margin:auto;
	left:0;
	right:0;
	bottom:10px;
	background:#f4514a;
	opacity: 0.4;
	position: absolute;
	z-index: -1;
	
	display: none;
}
/* arrow */

.whyDenodo__arrow {
  position: relative;

  width: 0;
  height: 0;

  margin: 28px auto;

  border-right: 20px solid transparent;
  border-left: 20px solid transparent;
}

.whyDenodo__arrow--red {
  border-top: 24px solid #f4514a;
}

.whyDenodo__arrow--blue {
  border-top: 24px solid #192c98;
}


/* Denodo solution */

.whyDenodo__solution {
	display: grid;
	grid-template-columns: 190px 1fr;
	align-items: center;
	border: 5px solid transparent;
	border-radius: 10px;
	background:
		linear-gradient(#fff, #fff) padding-box,
		linear-gradient(to top, #192c98, #f4514a) border-box;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
	width:80%;
	margin:auto;
}
@media(max-width:1100px){
	.whyDenodo__solution {
		width:100%;
	}
}
.whyDenodo__logo {
  display: flex;
  align-items: center;

  height: 100%;
  padding: 25px;

  border-right: 1px solid #ddd;
}

.whyDenodo__logo img {
  width: 120px;
}

.whyDenodo__solutionText {
  padding: 24px 28px;

  color: #e94843;

  font-size: clamp(1.6rem, 1.424rem + 0.469vw, 2.1rem);

  font-weight: 600;
  line-height: 1.9;
}


/* summary */

.whyDenodo__summary {
  width: min(100%, 680px);
  margin: 45px auto 0;
}

.whyDenodo__summaryTitle {
  margin-bottom: 20px;

  color: #192c98;

  font-size: clamp(1.8rem, 1.307rem + 1.315vw, 3.2rem);


  font-weight: 700;
  text-align: center;
}

.whyDenodo__list {
  display: grid;
  gap: 12px;

  margin: 0;
  padding: 0;

  list-style: none;
}

.whyDenodo__list li {
	position: relative;
	padding-left: 32px;
	font-size: clamp(1.6rem, 1.318rem + 0.751vw, 2.4rem);
	line-height: 1.7;
	background:url("../images/wd_check.svg") left top .4em no-repeat;
	background-size:clamp(1.6rem, 1.318rem + 0.751vw, 2.4rem);
	font-weight: bold;
	color:var(--color-blue);
}
.whyDenodo__list li span{
	color:#111;
	display: block;
	font-size: clamp(1.4rem, 1.259rem + 0.376vw, 1.8rem);
	font-weight: normal;
}



/* button */

.whySection__button {
  margin: 40px 0 0;
  text-align: center;
}

.whySection__button a,
.whySection__buttons a {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 220px;
	min-height: 46px;
	padding: 10px 30px;
	color: #fff;
	font-size: clamp(1.6rem, 1.53rem + 0.188vw, 1.8rem);
	font-weight: 700;
	text-decoration: none;
	background-color: #f4514a;
	border-radius: 100px;
	transition:opacity 0.25s,transform 0.25s;
}

.whySection__button a:hover,
.whySection__buttons a:hover {
  opacity: 0.85;
  transform: translateY(-2px);
}


/* ========================================
Why SCSK
======================================== */

.scskStrength {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 30px;
}

.scskStrength__item {
  overflow: hidden;

  background-color: #fff;

  border-radius: 12px;

  box-shadow:
    0 6px 12px rgba(0, 0, 0, 0.35);
}

.scskStrength__number {
	margin: 0;
	padding: 9px 15px 3px;
	color: #d1d4e9;
	font-size: clamp(2.4rem, 0.992rem + 3.756vw, 6.4rem);
	font-weight: 700;
	text-align: center;
	font-family: impact;
	background-color: #192c98;
	letter-spacing: 0.1em
}

.scskStrength__title {
	margin: 0;
	padding: 0 20px 13px;
	color: #fff;
	font-size: clamp(1.8rem, 1.589rem + 0.563vw, 2.4rem);
	line-height: 1.5;
	text-align: center;
	background-color: #192c98;
}

.scskStrength__text {
  margin: 0;
  padding: 22px 24px 28px;
  font-size: clamp(1.4rem, 1.259rem + 0.376vw, 1.8rem);
  line-height: 1.8;
}

.scskSolution {
  margin-top: 45px;
}

.scskSolution img {
  display: block;
  width: 100%;
  height: auto;
}

.whySection__buttons {
  display: flex;
  justify-content: center;
  gap: 20px;
  margin-top: 30px;
}

.whySection--scsk .whySection__buttons a {
  background-color: #192c98;
}


/* ========================================
Tablet
======================================== */

@media screen and (max-width: 900px) {

  .whySection__inner {
    padding: 45px 35px 60px;
  }

  .whyProblems,
  .whyBenefits {
    gap: 15px;
  }

}


/* ========================================
SP
======================================== */

@media screen and (max-width: 767px) {

  .whySection__heading {
    min-height: 64px;
    padding: 15px 55px 40px 20px;
    font-size: 2.2rem;
  }

  .whySection__icon {
    right: 20px;
    width: 26px;
    height: 26px;
  }

  .whySection__inner {
    width: calc(100% - 30px);
    padding:
      35px 20px
      45px;
  }

  .whySection__title {
    margin-bottom: 28px;
    font-size: 1.8rem;
  }

  .whyProblems,
  .whyBenefits,
  .scskStrength {
    grid-template-columns: 1fr;
  }

  .whyProblems,
  .whyBenefits {
    gap: 20px;
  }

  .whyDenodo__solution {
    grid-template-columns: 1fr;
  }

  .whyDenodo__logo {
    justify-content: center;

    border-right: none;
    border-bottom: 1px solid #ddd;
  }

  .whyDenodo__solutionText {
    padding: 20px;
    font-size: 1.4rem;
	text-align: center;
  }

  .whySection__buttons {
    flex-direction: column;
    align-items: center;
  }

  .whySection__buttons a {
    width: 100%;
  }

}

/* ========================================
導入事例
======================================== */

.caseStudies {
	padding: 80px 0 90px;
	background-color: #fff;
}

.caseStudies__inner {
	width: min(100%, 1120px);
	margin-inline: auto;
}


/* ----------------------------------------
title
---------------------------------------- */

.sectionTitle {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 0 45px;
	text-align: center;
}

.sectionTitle__en {
	color: var(--color-blue);
	font-size: 1.2rem;
	font-weight: 700;
	letter-spacing: 0.15em;
}

.sectionTitle__ja {
	margin-top: 5px;
	color: var(--color-blue);
	font-size: clamp(2.8rem, 2.2vw, 3.6rem);
	font-weight: 700;
	line-height: 1.4;
}


/* ----------------------------------------
list
---------------------------------------- */

.caseStudies__list {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 30px;
}


/* ----------------------------------------
card
---------------------------------------- */

.caseCard {
	min-width: 0;
}

.caseCard__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
	background-color: #fff;
	border: 1px solid #d9dce8;
	box-shadow:0 5px 14px rgba(0, 0, 0, 0.12);
	transition:	transform 0.3s ease,box-shadow 0.3s ease;
}

@media (hover: hover) {

	.caseCard__link:hover {
		transform: translateY(-6px);
		box-shadow:0 10px 24px rgba(0, 0, 0, 0.18);
	}

}


/* ----------------------------------------
logo
---------------------------------------- */

.caseCard__logo {
	display: flex;
	justify-content: center;
	align-items: center;
	height: 210px;
	padding: 25px 35px;
	background-color: #fff;
}

.caseCard__logo img {
	display: block;
	width: auto;
	max-width: 100%;
	max-height: 150px;
	object-fit: contain;
}


/* ----------------------------------------
body
---------------------------------------- */

.caseCard__body {
	position: relative;
	display: flex;
	flex: 1;
	flex-direction: column;
	min-height: 220px;
	padding: 25px 25px 22px;
	color: #fff;
	background-color: var(--color-blue);
}


/* category */

.caseCard__category {
	align-self: flex-start;
	margin: 0 0 13px;
	padding: 4px 10px;
	color: var(--color-blue);
	font-size: 1.6rem;
	font-weight: 700;
	background-color: #fff;
	border-radius: 4px;
}


/* title */

.caseCard__title {
	margin: 0 0 18px;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.65;
}


/* company */

.caseCard__company {
	margin: auto 0 0;
	font-size: 1.2rem;
	line-height: 1.6;
	opacity: 0.85;
}


/* more */

.caseCard__more {
	position: relative;
	display: inline-flex;
	align-items: center;
	align-self: flex-end;
	margin-top: 14px;
	padding-right: 26px;
	font-size: clamp(1.4rem, 1.259rem + 0.376vw, 1.8rem);
	font-weight: 700;
}

.caseCard__more::before {
	content: "";
	position: absolute;
	top: 50%;
	right: 0;
	width: 18px;
	height: 18px;
	border: 1px solid rgba(255, 255, 255, 0.8);
	border-radius: 50%;
	transform: translateY(-50%);
}

.caseCard__more::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 7px;
	width: 5px;
	height: 5px;
	border-top: 1px solid #fff;
	border-right: 1px solid #fff;
	transform:translateY(-50%)	rotate(45deg);
}


/* ----------------------------------------
hover
---------------------------------------- */

@media (hover: hover) {

	.caseCard__link:hover .caseCard__body {
		background-color: #10227d;
	}

	.caseCard__link:hover .caseCard__more {
		text-decoration: underline;
	}
}


/* ----------------------------------------
button
---------------------------------------- */

.caseStudies__button {
	margin: 45px 0 0;
	text-align: center;
}

.caseStudies__button a {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 250px;
	min-height: 50px;
	padding: 12px 55px 12px 35px;
	color: #fff;
	font-size: clamp(1.6rem, 1.53rem + 0.188vw, 1.8rem);
	font-weight: 700;
	text-decoration: none;
	background-color: #f4514a;
	border-radius: 100px;
	transition:opacity 0.25s ease,transform 0.25s ease;
}

.caseStudies__button a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 24px;
	width: 7px;
	height: 7px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform:translateY(-50%) rotate(45deg);
}

@media (hover: hover) {

	.caseStudies__button a:hover {
		opacity: 0.85;
		transform: translateY(-2px);
	}

}


/* ========================================
Tablet
======================================== */

@media screen and (max-width: 900px) {

	.caseStudies {
		padding-top: 65px;
		padding-bottom: 70px;
	}

	  .caseStudies__list {
		gap: 20px;
	  }

	.caseCard__body {
		padding: 22px 20px;
	}

}


/* ========================================
SP
======================================== */

@media screen and (max-width: 767px) {

  .caseStudies {
    padding:
      55px 20px
      60px;
  }

  .caseStudies__list {
    grid-template-columns: 1fr;

    gap: 25px;
  }

  .caseCard__link {
    width: min(100%, 420px);
    margin-inline: auto;
  }

  .caseCard__logo {
    height: 115px;
  }

  .caseCard__body {
    min-height: 190px;
  }

  .caseCard__title {
    font-size: 1.5rem;
  }

  .caseStudies__button {
    margin-top: 35px;
  }

}

/* ========================================
Awards
======================================== */
section.awards{
	padding:80px 0 90px;
	background-image:url("../images/awards_bg.webp");
	background-repeat: no-repeat;
	background-position: center;
	background-size:cover;
}
.awards__inner {
	width: min(94%, 1200px);
	margin-inline: auto;
	position: relative;
	z-index: 2;
	background:#fff;
	padding:2em;
	border-radius: 20px;
}
.awards h3{
	position: relative;
	margin: 0 0 28px;
	padding-bottom: 14px;
	font-size: 2rem;
	font-weight: 700;
	color: #222;
}
ul.awards + h3{
	margin-top:2em;
}
.awards h3::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 32px;
	height: 3px;
	background: #e60012;
}
ul.awards{
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}
@media(max-width:767px){
	ul.awards{
		grid-template-columns: repeat(3, minmax(0, 1fr));
		gap: 12px;
	}
}
.certificationList--readiness {
	grid-template-columns: repeat(6, minmax(0, 1fr));
}

ul.awards li {
	display: grid;
	place-items: center;
}

ul.awards li img {
	display: block;
	width: 100%;
	max-width: 150px;
	height: auto;
}
/* ========================================
FAQ
======================================== */

.faq {
  padding: 80px 0 90px;

  background-color: #fff;
}

.faq__inner {
  width: min(100%, 960px);
  margin-inline: auto;
  position: relative;
  z-index: 2;
}
a.faqlink{
	text-indent: 100%;
	white-space: nowrap;
	overflow: hidden;
	width:20px;
	height: 20px;
	display: block;
	background:url("../images/icon_link.svg") no-repeat center;
	background-size:20px;
	float: right;
}

/* ----------------------------------------
heading
---------------------------------------- */

.faq__heading {
  display: flex;
  flex-direction: column;
  align-items: center;

  margin: 0 0 40px;

  color: var(--color-blue);
  text-align: center;
}

.faq__headingEn {
  font-size: clamp(2.8rem, 2.4vw, 3.8rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.05em;
}

.faq__headingJa {
  margin-top: 6px;

  font-size: 1.3rem;
  font-weight: 500;
}


/* ----------------------------------------
list
---------------------------------------- */

.faq__list {
  display: grid;
  gap: 10px;
}


/* ========================================
FAQ item
======================================== */

.faqItem {
  overflow: hidden;

  background-color: #fff;
}


/* details標準アイコンを削除 */

.faqItem__question {
  list-style: none;
}

.faqItem__question::-webkit-details-marker {
  display: none;
}


/* ----------------------------------------
question
---------------------------------------- */

.faqItem__question {
  position: relative;

  display: grid;
  grid-template-columns: 48px 1fr 40px;
  align-items: center;

  min-height: 58px;

  padding: 10px 14px 10px 20px;

  color: #fff;

  background-color: var(--color-blue);

  cursor: pointer;
border-radius: 8px;
  transition:
    all 0.25s ease;
}
.faqItem[open] .faqItem__question {
	border-bottom-left-radius: 0;
	border-bottom-right-radius: 0;
}

@media (hover: hover) {

  .faqItem__question:hover {
    background-color: #10227b;
  }

}


/* Q */

.faqItem__label {
  font-family: Arial, sans-serif;
  font-size: 3rem;
  font-weight: 700;
}


/* 質問 */

.faqItem__questionText {
  padding-right: 20px;

  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1.6;
}


/* ----------------------------------------
+ icon
---------------------------------------- */

.faqItem__icon {
  position: relative;

  width: 30px;
  height: 30px;

  justify-self: end;
}

.faqItem__icon::before,
.faqItem__icon::after {
  content: "";

  position: absolute;
  top: 50%;
  left: 50%;

  width: 16px;
  height: 2px;

  background-color: #fff;

  transform:
    translate(-50%, -50%);

  transition:
    transform 0.25s ease;
}

.faqItem__icon::after {
  transform:
    translate(-50%, -50%)
    rotate(90deg);
}


/* 開いたとき「－」にする */

.faqItem[open] .faqItem__icon::after {
  transform:
    translate(-50%, -50%)
    rotate(0deg);
}


/* ========================================
answer
======================================== */

.faqItem__answer {
  border-right: 1px solid #d9ddec;
  border-bottom: 1px solid #d9ddec;
  border-left: 1px solid #d9ddec;

  background-color: #fff;
}

.faqItem__answerInner {
  display: grid;
  grid-template-columns: 48px 1fr;

  padding: 24px 30px 27px 20px;
}
.faqItem[open] .faqItem__answer {
	border-bottom-left-radius: 8px;
	border-bottom-right-radius: 8px;
}

/* A */

.faqItem__answerLabel {
  color: #e94b45;

  font-family: Arial, sans-serif;
  font-size: 3rem;
  font-weight: 700;
}


/* answer text */

.faqItem__answerText {
  color: #333;

  font-size: 1.8rem;
  line-height: 1.9;
}

.faqItem__answerText p {
  margin: 0;
}

.faqItem__answerText p + p {
  margin-top: 1em;
}


/* ----------------------------------------
open animation
---------------------------------------- */

.faqItem[open] .faqItem__answer {
  animation: faqOpen 0.3s ease both;
}

@keyframes faqOpen {

  from {
    opacity: 0;
    transform: translateY(-8px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }

}


/* ========================================
button
======================================== */

.faq__button {
  margin: 35px 0 0;
  text-align: center;
}

.faq__button a {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 240px;
	min-height: 48px;
	padding:
	11px 55px
	11px 35px;
	color: #fff;
	font-size: clamp(1.6rem, 1.53rem + 0.188vw, 1.8rem);
	font-weight: 700;
	text-decoration: none;
	background-color: var(--color-blue);
	border-radius: 100px;
	transition:opacity 0.25s ease,transform 0.25s ease;
}

.faq__button a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 24px;
	width: 7px;
	height: 7px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform:translateY(-50%)	rotate(45deg);
}

@media (hover: hover) {

  .faq__button a:hover {
    opacity: 0.85;

    transform: translateY(-2px);
  }

}


/* ========================================
SP
======================================== */

@media screen and (max-width: 767px) {

  .faq {
    padding:
      55px 15px
      60px;
  }

  .faq__heading {
    margin-bottom: 30px;
  }

  .faqItem__question {
    grid-template-columns:
      36px
      1fr
      30px;

    min-height: 60px;
	margin:auto;
	width:94%;
    padding:
      11px 10px
      11px 15px;
  }

  .faqItem__label {
    font-size: 1.8rem;
  }

  .faqItem__questionText {
    padding-right: 10px;

    font-size: 1.4rem;
    line-height: 1.55;
  }

  .faqItem__icon {
    width: 26px;
    height: 26px;
  }

  .faqItem__answerInner {
    grid-template-columns:
      36px
      1fr;

    padding:
      20px 18px
      22px 15px;
  }

  .faqItem__answerLabel {
    font-size: 1.8rem;
  }

  .faqItem__answerText {
    font-size: 1.3rem;
    line-height: 1.8;
  }

}

/* ========================================
News
======================================== */

.news {
	padding: 80px 0 90px;
	background-color: #fff;
}

.news__inner {
  width: min(100%, 960px);
  margin-inline: auto;
}


/* ----------------------------------------
heading
---------------------------------------- */

.news__heading {
	display: flex;
	flex-direction: column;
	align-items: center;
	margin: 0 0 40px;
	color: var(--color-blue);
	text-align: center;
}

.news__headingEn {
	font-size: clamp(2.8rem, 2.4vw, 3.8rem);
	font-weight: 700;
	line-height: 1.2;
}

.news__headingJa {
	margin-top: 6px;
	font-size: 1.3rem;
	font-weight: 500;
}


/* ========================================
News list
======================================== */

.news__list {
	border-top: 1px solid #d9d9d9;
}


/* ----------------------------------------
item
---------------------------------------- */

.newsItem {
	border-bottom: 1px solid #d9d9d9;
}

.newsItem__link {
  display: grid;
  grid-template-columns:
	130px
	110px
	minmax(0, 1fr)
	30px;
  align-items: center;
  min-height: 80px;
  padding: 15px 10px;
  color: #333;
  text-decoration: none;
  transition:background-color 0.25s ease;
}

@media (hover: hover) {

	.newsItem__link:hover {
		background-color: #f6f7fb;
	}

}


/* ========================================
Date
======================================== */

.newsItem__dateArea {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 3px;
}


/* NEW */

.newsItem__new {
	font-size: 1.2rem;
	font-weight: 700;
	line-height: 1;
	text-align: center;
	letter-spacing: 0.05em;
	display: block;
	color:#fff;
	padding:2px 12px;
	border-radius: 20px;
	background:linear-gradient(to right,#ed7e55,#ce131b);
}

.newsItem__new[hidden] {
  display: none;
}


/* date */

.newsItem__date {
	color: #333;
	font-size: 1.3rem;
	font-weight: 500;
	white-space: nowrap;
}


/* ========================================
Category
======================================== */

.newsItem__category {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	width: 90px;
	min-height: 25px;
	margin: 0;
	padding: 3px 8px;
	color:#fff;
	background: var(--color-blue);
	font-size: 1.4rem;
	font-weight: 500;
}


/* ========================================
Title
======================================== */

.newsItem__title {
	margin: 0;
	padding: 0 25px;
	font-size: clamp(1.6rem, 1.53rem + 0.188vw, 1.8rem);
	font-weight: 500;
	line-height: 1.7;
	text-decoration: none !important;
}
.newsItem__title:hover{
	text-decoration: none !important;
	box-decoration-break: none;
}

/* ========================================
Arrow
======================================== */

.newsItem__arrow {
	position: relative;
	display: block;
	width: 24px;
	height: 24px;
	border: 1px solid var(--color-blue);
	border-radius: 50%;
}

.newsItem__arrow::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 46%;
	width: 6px;
	height: 6px;
	border-top: 1px solid var(--color-blue);
	border-right: 1px solid var(--color-blue);
	transform:translate(-50%, -50%) rotate(45deg);
}


/* ========================================
Hover
======================================== */

@media (hover: hover) {

  .newsItem__link:hover .newsItem__title {
    color: var(--color-blue);
    text-decoration: underline;
  }

  .newsItem__link:hover .newsItem__arrow {
    background-color: var(--color-blue);
  }

  .newsItem__link:hover .newsItem__arrow::after {
    border-color: #fff;
  }

}


/* ========================================
Button
======================================== */

.news__button {
	margin: 35px 0 0;
	text-align: center;
}

.news__button a {
	position: relative;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 240px;
	min-height: 48px;
	padding:11px 55px 11px 35px;
	color: #fff;
	font-size: clamp(1.6rem, 1.53rem + 0.188vw, 1.8rem);
	font-weight: 700;
	text-decoration: none;
	background-color: #f4514a;
	border-radius: 100px;
	transition:
		opacity 0.25s ease,
		transform 0.25s ease;
}

.news__button a::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 24px;
	width: 7px;
	height: 7px;
	border-top: 2px solid #fff;
	border-right: 2px solid #fff;
	transform:translateY(-50%) rotate(45deg);
}

@media (hover: hover) {

	.news__button a:hover {
		opacity: 0.85;
		transform: translateY(-2px);
	}

}


/* ========================================
SP
======================================== */

@media screen and (max-width: 767px) {

  .news {
    padding:
      55px 20px
      60px;
  }

  .news__heading {
    margin-bottom: 30px;
  }

  .newsItem__link {
    position: relative;

    display: grid;

    grid-template-columns:
      auto
      1fr;
    gap:
      8px
      15px;
    min-height: auto;
    padding:
      20px 40px
      20px 5px;
  }

  .newsItem__dateArea {
    grid-column: 1;
    grid-row: 1;
  }

  .newsItem__category {
    grid-column: 2;
    grid-row: 1;

    align-self: end;

    width: auto;
    min-width: 80px;

    justify-self: start;
  }

  .newsItem__title {
    grid-column: 1 / 3;
    grid-row: 2;

    padding: 0;

    font-size: 1.4rem;
  }

  .newsItem__arrow {
    position: absolute;
    top: 50%;
    right: 5px;

    transform: translateY(-50%);
  }

}

/* ========================================
Bottom CTA
======================================== */

.bottomCta {
	padding: 60px 20px;
	background:linear-gradient(135deg,#f4f77d 0%,#eef16c 100%);
}

.bottomCta__item {
	width: min(100%, 1120px);
	margin-inline: auto;
	background-color: #fff;
	border-radius: 20px;
	box-shadow:0 5px 15px rgba(0, 0, 0, 0.35);
	overflow: hidden;
}

.bottomCta__item + .bottomCta__item {
	margin-top: 16px;
}

.bottomCta__content {
	display: grid;
	grid-template-columns:
		minmax(0, 1.25fr)
		minmax(0, 1.5fr)
		minmax(260px, 0.9fr);

	align-items: center;
	gap: 35px;
	padding: 35px 45px;
}


/* ========================================
Title / Lead
======================================== */

.bottomCta__title {
	margin: 0 0 12px;
	color: #242424;
	font-size: clamp(2rem, 1.5vw, 2.8rem);
	font-weight: 700;
	line-height: 1.5;
}

.bottomCta__lead {
	margin: 0;
	color: #333;
	font-size: clamp(1.6rem, 1.53rem + 0.188vw, 1.8rem);
	line-height: 1.8;
}
.bottomCta__item h2{
	font-size: clamp(1.8rem, 1.166rem + 1.69vw, 3.6rem);
	text-align: center;
	margin: 1em;
}
.bottomCta__item h2 + p{
	text-align: center;
}
ul.cta_contents2{
	padding-right:50%;
	background:url("../images/doc_cover.webp") right center no-repeat;
	background-size:30%;
}
div.cta_separate{
	display: flex;
	margin:5%;
	align-items: center;
}
@media(max-width:1100px){
	div.cta_separate{
		flex-direction: column;
		gap:10%;
	}
}
div.cta_separate ul.cta_contents{
	width:60%;
	display: flex;
	justify-content: space-between;
	gap:5%;
	list-style: none;
}
@media(max-width:1100px){
	div.cta_separate ul.cta_contents{
		width:80%;
	}
}
@media(max-width:768px){
	div.cta_separate ul.cta_contents{
		width:90%;
	}
}
div.cta_separate ul.cta_contents li{
	width:30%;
	background-repeat: no-repeat;
	background-position: center top;
	background-size:60%;
	padding-top:20%
}
div.cta_separate ul.cta_contents li.cta04{
	background-image:url("../images/cta04.svg")
}
div.cta_separate ul.cta_contents li.cta05{
	background-image:url("../images/cta05.svg")
}
div.cta_separate ul.cta_contents li.cta06{
	background-image:url("../images/cta06.svg")
}
div.cta_separate a{
/*	display: block;
	width:40%;
	text-align: center;
	margin:auto 3%;
	line-height: 4em;
	border-radius: 4em;
	color:#fff;
	background-image:url("../images/arrow_cta.svg");
	background-repeat: no-repeat;
	background-position: right 5% center;
	background-size:4%;*/
}
.bottomCta__item h3{
	font-size: clamp(1.6rem, 1.424rem + 0.469vw, 2.1rem);
	text-align: center;
}
.bottomCta__item h3 + p{
	text-align: center;
	font-size: clamp(1.4rem, 1.33rem + 0.188vw, 1.6rem);
}
.bottomCta__item--seminar h3{
	color:var(--color-red);
	font-size: clamp(1.6rem, 1.53rem + 0.188vw, 1.8rem);
}
.bottomCta__item--contact h3{
	color:var(--color-blue);
	font-size: clamp(1.6rem, 1.53rem + 0.188vw, 1.8rem);
}
div.cta_separate a {
	display: block;
	width: 40%;
	height: 80px;
	margin: auto 3%;
	font-size: clamp(1.6rem, 1.53rem + 0.188vw, 1.8rem);
	color: #fff;
	line-height: 80px;
	text-align: center;
	text-decoration: none;

	border-radius: 4em;

	/* 1層目：矢印、2層目：ホバー用グラデーション */
	background-repeat: no-repeat;
	background-position:
		right 5% center,
		left center;
	background-size:
		4% auto,
		200% 100%;

	transition:
		background-position 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.15s ease,
		transform 0.15s ease;
}
@media(max-width:1100px){
	div.cta_separate a{
		margin-top:50px;
		width:60%;
	}
}
@media(max-width:768px){
	div.cta_separate a{
		width:80%;
		height: 64px;
		line-height: 64px;
	}
}
/* セミナー・ハンズオン */
.bottomCta__item--seminar a {
	background-color: var(--color-red);
	background-image:
		url("../images/arrow_cta.svg"),
		linear-gradient(
			90deg,
			var(--color-red) 0%,
			var(--color-red) 50%,
			#ff8a20 100%
		);
}

/* お問い合わせ */
.bottomCta__item--contact a {
	background-color: var(--color-blue);
	background-image:
		url("../images/arrow_cta.svg"),
		linear-gradient(
			90deg,
			var(--color-blue) 0%,
			var(--color-blue) 50%,
			#168cff 100%
		);
}

/* ホバー・キーボード操作時 */
.bottomCta__item--seminar a:hover,
.bottomCta__item--seminar a:focus-visible,
.bottomCta__item--contact a:hover,
.bottomCta__item--contact a:focus-visible {
	background-position:
		right 4% center,
		right center;

	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
	/*transform: translateY(-2px);*/
}

/* キーボード操作時 */
div.cta_separate a:focus-visible {
	outline: 3px solid rgba(255, 255, 255, 0.9);
	outline-offset: -6px;
}

/* アニメーションを減らす設定に対応 */
@media (prefers-reduced-motion: reduce) {
	div.cta_separate a {
		transition: none;
	}
}
/*.bottomCta__item--contact a{
	background-color:var(--color-blue);
}
.bottomCta__item--contact a:hover{
	background-color:var(--color-red);
}
*/
/* ========================================
Seminar points
======================================== */

.bottomCta__points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);

  margin: 0;
  padding: 0;

  list-style: none;
}

.bottomCta__point {
  padding: 0 15px;

  text-align: center;
}

.bottomCta__point + .bottomCta__point {
  border-left: 1px solid #d9d9d9;
}

.bottomCta__pointIcon {
  display: flex;
  justify-content: center;
  align-items: center;

  height: 45px;
  margin-bottom: 8px;
}

.bottomCta__pointIcon img {
  width: auto;
  max-width: 48px;
  max-height: 44px;
}

.bottomCta__pointTitle {
  margin: 0 0 5px;

  color: var(--color-blue);

  font-size: clamp(1.6rem, 1.53rem + 0.188vw, 1.8rem);

  font-weight: 700;
}

.bottomCta__pointText {
  margin: 0;

  color: #555;

  font-size: clamp(1.4rem, 1.259rem + 0.376vw, 1.8rem);

  line-height: 1.6;
}


/* ========================================
Action
======================================== */

.bottomCta__action {
  text-align: center;
}

.bottomCta__actionNote {
  margin: 0 0 8px;

  color: var(--color-blue);

  font-size: 1.15rem;
  font-weight: 700;
}


/* button */

.bottomCta__button {
  position: relative;

  display: grid;

  grid-template-columns:
    30px
    1fr
    20px;

  align-items: center;

  gap: 10px;

  min-height: 72px;

  padding:
    14px 20px;

  color: #fff;

  font-size: 1.4rem;
  font-weight: 700;
  line-height: 1.5;
  text-align: left;
  text-decoration: none;

  background:
    linear-gradient(
      135deg,
      #1736b4,
      #0865da
    );

  border-radius: 100px;

  box-shadow:
    0 5px 12px rgba(17, 56, 170, 0.25);

  transition:
    transform 0.25s ease,
    box-shadow 0.25s ease;
}

.bottomCta__buttonIcon {
  display: flex;
  justify-content: center;
  align-items: center;
}

.bottomCta__buttonIcon img {
  width: 24px;
  height: 24px;
}


/* arrow */

.bottomCta__arrow {
  position: relative;

  width: 20px;
  height: 20px;

  border: 1px solid rgba(255, 255, 255, 0.7);
  border-radius: 50%;
}

.bottomCta__arrow::after {
  content: "";

  position: absolute;
  top: 50%;
  left: 45%;

  width: 5px;
  height: 5px;

  border-top: 1px solid #fff;
  border-right: 1px solid #fff;

  transform:
    translate(-50%, -50%)
    rotate(45deg);
}

@media (hover: hover) {

  .bottomCta__button:hover {
    transform: translateY(-3px);

    box-shadow:
      0 9px 18px rgba(17, 56, 170, 0.32);
  }

}


/* ========================================
Contact CTA
======================================== */

.bottomCta__content--contact {
  grid-template-columns:
    220px
    minmax(0, 1fr)
    300px;
}

.bottomCta__contactVisual img {
  display: block;

  width: 100%;
  height: auto;
}

.bottomCta__contactList {
  display: grid;
  grid-template-columns: repeat(4, 1fr);

  margin: 25px 0 0;
  padding: 0;

  list-style: none;
}

.bottomCta__contactList li {
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 8px;

  padding: 0 12px;

  color: #444;

  font-size: clamp(1.4rem, 1.259rem + 0.376vw, 1.8rem);

  text-align: center;
}

.bottomCta__contactList li + li {
  border-left: 1px solid #ddd;
}

.bottomCta__contactList img {
  width: 30px;
  height: 30px;

  object-fit: contain;
}


/* ========================================
Footer
======================================== */

.footer {
  background-color: #fff;

  border-top: 1px solid #ddd;
}

.footer__inner {
  display: flex;
  align-items: center;

  width: min(calc(100% - 40px), 1200px);
  margin-inline: auto;
}


/* main */

.footer__main {
  padding: 28px 0;
}


/* brand */

.footer__brand {
  flex-shrink: 0;
}

.footer__brand img {
  display: block;

  width: 130px;
  height: auto;
}


/* navigation */

.footer__nav {
  margin-left: auto;
}

.footer__nav ul {
  display: flex;
  align-items: center;

  margin: 0;
  padding: 0;

  list-style: none;
}

.footer__nav li {
  position: relative;
}

.footer__nav li + li {
  margin-left: 22px;
  padding-left: 22px;
}

.footer__nav li + li::before {
  content: "";

  position: absolute;
  top: 50%;
  left: 0;

  width: 1px;
  height: 14px;

  background-color: #ccc;

  transform: translateY(-50%);
}

.footer__nav a {
  position: relative;

  display: inline-block;

  padding-right: 16px;

  color: #333;

  font-size: 1.4rem;
  line-height: 1.5;
  text-decoration: none;
}

.footer__nav a::after {
  content: "";

  position: absolute;
  top: 50%;
  right: 2px;

  width: 5px;
  height: 5px;

  border-top: 1px solid #333;
  border-right: 1px solid #333;

  transform:
    translateY(-50%)
    rotate(45deg);
}

@media (hover: hover) {

  .footer__nav a:hover {
    color: var(--color-blue);

    text-decoration: underline;
  }

}


/* ========================================
Copyright
======================================== */

.footer__bottom {
  padding: 14px 0;

  background-color: #f5f5f5;

  border-top: 1px solid #e5e5e5;
}

.footer__copyright {
  width: 100%;
  margin: 0;
  color: #333;
  font-size: 1.2rem;
  text-align: right;
}


/* ========================================
Tablet
======================================== */

@media screen and (max-width: 1000px) {

  .bottomCta__content {
    grid-template-columns: 1fr;
  }

  .bottomCta__intro {
    text-align: center;
  }

  .bottomCta__action {
    width: min(100%, 420px);
    margin-inline: auto;
  }

  .bottomCta__content--contact {
    grid-template-columns:
      180px
      1fr;
  }

  .bottomCta__content--contact .bottomCta__action {
    grid-column: 1 / -1;
  }

  .footer__inner {
    flex-direction: column;

    gap: 22px;
  }

  .footer__nav {
    margin-left: 0;
  }

}


/* ========================================
SP
======================================== */

@media screen and (max-width: 767px) {

  .bottomCta {
    padding:
      40px 15px;
  }

  .bottomCta__content {
    gap: 28px;

    padding:
      30px 20px;
  }

  .bottomCta__title {
    font-size: 2rem;
    text-align: center;
  }

  .bottomCta__lead {
    font-size: 1.3rem;
  }


  /* seminar */

  .bottomCta__points {
    grid-template-columns: 1fr;

    gap: 18px;
  }

  .bottomCta__point {
    display: grid;

    grid-template-columns:
      50px
      1fr;

    align-items: center;

    gap: 15px;

    padding: 0;

    text-align: left;
  }

  .bottomCta__point + .bottomCta__point {
    padding-top: 18px;

    border-top: 1px solid #ddd;
    border-left: none;
  }

  .bottomCta__pointIcon {
    margin: 0;
  }


  /* contact */

  .bottomCta__content--contact {
    grid-template-columns: 1fr;
  }

  .bottomCta__contactVisual {
    width: min(70%, 260px);
    margin-inline: auto;
  }

  .bottomCta__contactList {
    grid-template-columns:
      repeat(2, 1fr);

    gap: 20px 0;
  }

  .bottomCta__contactList li:nth-child(3) {
    border-left: none;
  }

  .bottomCta__contactList li:nth-child(n + 3) {
    padding-top: 15px;

    border-top: 1px solid #ddd;
  }

  .bottomCta__button {
    min-height: 64px;

    font-size: 1.3rem;
  }


  /* footer */

  .footer__main {
    padding:
      30px 0;
  }

  .footer__inner {
    width: calc(100% - 30px);

    align-items: flex-start;
  }

  .footer__brand img {
    width: 115px;
  }

  .footer__nav {
    width: 100%;
  }

  .footer__nav ul {
    display: grid;

    grid-template-columns: 1fr;

    width: 100%;
  }

  .footer__nav li + li {
    margin: 0;
    padding: 0;

    border-top: 1px solid #ddd;
  }

  .footer__nav li + li::before {
    display: none;
  }

  .footer__nav a {
    display: block;

    padding:
      13px
      25px
      13px 0;
  }

  .footer__copyright {
    text-align: center;
  }

}


/* PCのみ改行を残す場合 */

@media screen and (max-width: 767px) {

  .spNone {
    display: none;
  }

}
.about__figure {
	max-width:1100px;
	margin:auto auto 3%;
	padding-left:3%;
	padding-right: 3%;
}
.about__figure h3{
	text-align: center;
	padding-top:5%;
	border-bottom:3px solid var(--color-red);
	margin-bottom:2.5%;
	font-size: clamp(1.8rem, 1.554rem + 0.657vw, 2.5rem);

}
.about__figure em{
	color:var(--color-red);
	font-style: normal;

}
.pageTop {
	position: fixed;
	right: 50px;
	bottom: 50px;
	z-index: 1000;

	display: grid;
	place-items: center;

	width: 50px;
	height: 50px;
	padding: 0;

	border: 0;
	border-radius: 50%;
	background-image:url("../images/totop.svg");
	background-repeat: no-repeat;
	background-size:50px;
	background-position: center top;
	cursor: pointer;

	/* 初期状態は非表示 */
	visibility: hidden;
	opacity: 0;
	transform: translateY(10px);
	pointer-events: none;

	transition:
		background-color 0.3s,
		opacity 0.3s,
		transform 0.3s,
		visibility 0.3s;
	overflow: hidden;
}

.pageTop img {
	display: block;
	width: 50px;
	height: auto;
	object-position: top;
}
.pageTop:hover {
	background-position: center bottom;
}

/* 50vhスクロール後 */
.pageTop.is-visible {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
}



.pageTop:focus-visible {
  outline: 3px solid rgba(25, 44, 152, 0.35);
  outline-offset: 3px;
}

/* スマートフォンでは画面端からの距離を調整 */
@media (max-width: 767px) {
	.pageTop {
		right: 20px;
		bottom: 20px;
	}
}

/* アニメーションを減らす設定への配慮 */
@media (prefers-reduced-motion: reduce) {
  .pageTop {
    transition: none;
  }
}

div.cta--side {
	width: 300px;
	height: 240px;
	border: 5px solid #fff;
	border-right: none;
	border-radius: 12px 0 0 12px;
	position: fixed;
	z-index: 1000;
	margin: auto;
	top: 0;
	bottom: 0;
	right: -300px;
	background-image:
			url("../images/side_cta.svg"),
			linear-gradient(90deg, var(--color-red), #ff8a20);
	background-repeat: no-repeat;
	background-position:
		left 18px center,
		center;
	background-size: 
		18px,
		100%;
	box-shadow: -3px 3px 9px rgba(0, 0, 0, 0.35);
	transition:
		right 0.7s cubic-bezier(0.22, 1, 0.36, 1),
		background-color 0.25s;
}

div.cta--side.is-visible {
	right: -240px;
	cursor: pointer;
}

div.cta--side.is-visible.is-open {
	right: 0;
	cursor: default;
}

/* 背景の縦書きラベルに重ねる開閉ボタン */
.cta--side-toggle {
  position: absolute;
  inset: 0 auto 0 0;
  width: 55px;
  height: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 7px 0 0 7px;
  background: transparent;
  appearance: none;
  cursor: pointer;
  touch-action: manipulation;
}
.cta--side-toggle:focus-visible {
  outline: 2px solid #fff;
  outline-offset: -4px;
}

ul.cta--side-inner {
	margin-left:60px;
	margin-right: 10px;
	display: flex;
	justify-content: center;
	flex-direction: column;
	gap:20px;
	height: 100%;
}
ul.cta--side-inner li{
	list-style: none;
	text-align: center;
}

ul.cta--side-inner a{
	display: block;
	background:#fff;
	color:var(--color-darkblue);
	font-size:1.6rem;
	line-height: 1.25em;
	font-weight: bold;
	border-radius: 4px;
	padding-top:1em;
	padding-bottom:1em;
}
ul.cta--side-inner a:hover{
	background:var(--color-blue);
	color:#fff;
	box-shadow: 3px 3px 9px rgba(0,0,0,.35);
}

/* ========================================
   上段：資料ダウンロードCTAのみ調整
======================================== */


/* 上段のレイアウトだけ変更 */
.bottomCta__item--seminar .cta_separate {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 40%;
	align-items: center;
	gap: 6%;

	width: 86%;
	margin: 50px auto 60px;
}


/* 上段ボタンのみ調整 */
.bottomCta__item--seminar .cta_separate > a {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 80px;
	margin: 0;

	padding: 0 60px 0 30px;

	box-sizing: border-box;

	border-radius: 9999px;

	color: #fff;
	background-color: var(--color-red);

	/* 1層目：矢印、2層目：hover用グラデーション */
	background-image:
		url("../images/arrow_cta.svg"),
		linear-gradient(
			90deg,
			var(--color-red) 0%,
			var(--color-red) 50%,
			#ff8a20 100%
		);
	background-repeat: no-repeat;
	background-position:
		right 24px center,
		left center;
	background-size:
		18px auto,
		200% 100%;

	font-size: clamp(1.6rem, 1.4rem + 0.4vw, 2rem);
	font-weight: 500;
	line-height: 1.4;

	text-align: center;
	text-decoration: none;

	transition:
		background-position 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.15s ease;
}


/* hover・キーボード操作時 */
.bottomCta__item--seminar .cta_separate > a:hover,
.bottomCta__item--seminar .cta_separate > a:focus-visible {
	background-position:
		right 18px center,
		right center;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18);
}

.bottomCta__item--seminar .cta_separate > a:focus-visible {
	outline: 3px solid rgba(255, 255, 255, 0.9);
	outline-offset: -6px;
}

@media (prefers-reduced-motion: reduce) {
	.bottomCta__item--seminar .cta_separate > a {
		transition: none;
	}
}


/* ========================================
   左側：箇条書き＋資料画像
======================================== */

.bottomCta__item--seminar .cta_contents2 {
	position: relative;

	display: flex;
	flex-direction: column;
	justify-content: center;

	min-height: 330px;

	margin: 0;
	padding: 20px 45% 20px 0;

	list-style: none;

	/* 実際の画像名に変更してください */
	background-image: url("../images/doc_cover.webp");
	background-repeat: no-repeat;
	background-position: right center;

	/*
	画像全体を表示。
	トリミングされません。
	*/
	background-size: 48% auto;
}


/* 箇条書き */
.bottomCta__item--seminar .cta_contents2 li {
	position: relative;
	color:var(--color-red);
	margin: 0 0 12px;
	padding-left: 1.4em;

	font-size: clamp(1.4rem, 1.189rem + 0.563vw, 2rem);
	line-height: 1.6;
	list-style: none !important;
	background:url("../images/check_red.svg") left top 0.2em no-repeat;
	background-size:clamp(1.4rem, 1.189rem + 0.563vw, 2rem);
}


/* 最後だけmarginなし */
.bottomCta__item--seminar .cta_contents2 li:last-child {
	margin-bottom: 0;
}




/* ========================================
   タブレット
======================================== */

@media screen and (max-width: 1100px) {

	.bottomCta__item--seminar .cta_separate {
		grid-template-columns: minmax(0, 1fr) 40%;
		gap: 4%;

		width: 90%;
	}

	.bottomCta__item--seminar .cta_contents2 {
		padding-right: 52%;
		background-size: 46% auto;
	}

}


/* ========================================
   モバイル
======================================== */

@media screen and (max-width: 767px) {

	.bottomCta__item--seminar .cta_separate {
		display: block;

		width: auto;
		margin: 35px 20px 40px;
	}


	.bottomCta__item--seminar .cta_contents2 {
		min-height: 0;

		padding:
			0
			0
			210px;

		background-size: 40%;
		background-position: center bottom;
	}


	.bottomCta__item--seminar .cta_separate > a {
		height: 64px;

		margin-top: 30px;

		padding:
			0
			50px
			0
			20px;

		background-position:
			right 20px center,
			left center;
		background-size:
			15px auto,
			200% 100%;
		width:80%;
		margin-inline:auto;
	}

	.bottomCta__item--seminar .cta_separate > a:hover,
	.bottomCta__item--seminar .cta_separate > a:focus-visible {
		background-position:
			right 15px center,
			right center;
	}

}
/* ========================================
   下層ページ
======================================== */
section.h1__wrapper{
	width:100%;
	height: 200px;
	box-shadow: 0 3px 12px rgba(0,0,0,0.35);
}

/*div.h1__inner{
	width:100%;
	width: min(92%, 1400px);
	margin-inline: auto;
}
div.h1__inner h1{
	line-height: 150px;
}*/
.h1__wrapper {
	padding: 20px 0;
}
.h1__wrapper.product {
	background:
	linear-gradient(
		to right,
		rgba(255, 255, 255, 1) 0%,
		rgba(255, 255, 255, 0.3) 100%
	),
	url("../images/bg_product.webp") center center / cover no-repeat;
}
.h1__wrapper.service {
	background:
	linear-gradient(
		to right,
		rgba(255, 255, 255, 1) 0%,
		rgba(255, 255, 255, 0.3) 100%
	),
	url("../images/bg_service.webp") center center / cover no-repeat;
}
.h1__wrapper.case {
	background:
	linear-gradient(
		to right,
		rgba(255, 255, 255, 1) 0%,
		rgba(255, 255, 255, 0.3) 100%
	),
	url("../images/bg_case.webp") center center / cover no-repeat;
}
.h1__wrapper.blog {
	background:
	linear-gradient(
		to right,
		rgba(255, 255, 255, 1) 0%,
		rgba(255, 255, 255, 0.3) 100%
	),
	url("../images/bg_blog.webp") center center / cover no-repeat;
}
.h1__wrapper.document {
	background:
	linear-gradient(
		to right,
		rgba(255, 255, 255, 1) 0%,
		rgba(255, 255, 255, 0.3) 100%
	),
	url("../images/bg_document.webp") center center / cover no-repeat;
}
.h1__wrapper.faqcontents {
	background:
	linear-gradient(
		to right,
		rgba(255, 255, 255, 1) 0%,
		rgba(255, 255, 255, 0.3) 100%
	),
	url("../images/bg_faq.webp") center center / cover no-repeat;
}
.h1__wrapper.newsheader {
	background:
	linear-gradient(
		to right,
		rgba(255, 255, 255, 1) 0%,
		rgba(255, 255, 255, 0.3) 100%
	),
	url("../images/bg_news.webp") center center / cover no-repeat;
}

.h1__inner {
	/*width: min(1100px, calc(100% - 40px));*/
	width: min(92%, 1400px);
	margin-inline: auto;
}

.h1__heading {
	position: relative;
	padding-left: 28px;
	/*max-width: 560px;*/
}

/* 左の縦ライン */
.h1__heading::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 4px;
	height: 150px;
	border-radius: 999px;
	background: linear-gradient(
		to bottom,
		#f2554a 0%,
		#a54fc4 52%,
		#2144c7 100%
	);
}

/* PRODUCT */
.h1__eyebrow {
	margin: 0 0 14px;
	font-size: 1.4rem;
	font-weight: 700;
	letter-spacing: 0.32em;
	line-height: 1;
	display: inline-block;
	background: linear-gradient(
		90deg,
		#f2554a 0%,
		#a54fc4 52%,
		#2144c7 100%
	);
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
}

/* 製品情報 */
.h1__heading h1 {
  margin: 0;
  color: #222b36;
  font-size: clamp(2.4rem, 1.555rem + 2.254vw, 4.8rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: 0.04em;
}

/* リード文 */
.h1__lead {
  margin: 10px 0 0;
  color: #4d5662;
  font-size: 1.5rem;
  line-height: 1.5;
  font-weight: 500;
}

/* タブレット以下 */
@media screen and (max-width: 768px) {
  .h1__wrapper {
    padding: 32px 0;
  }

  .h1__inner {
    width: calc(100% - 32px);
  }

  .h1__heading {
    padding-left: 20px;
  }

  .h1__heading::before {
    width: 3px;
    height: 130px;
  }

  .h1__eyebrow {
    margin-bottom: 12px;
    font-size: 1.2rem;
    letter-spacing: 0.24em;
  }

  .h1__lead {
    margin-top: 16px;
    font-size: 1.5rem;
    line-height: 1.7;
  }
}

/* スマホ */
@media screen and (max-width: 480px) {
  .h1__heading h1 {
    font-size: clamp(3.2rem, 8vw, 4.4rem);
  }

  .h1__lead {
    font-size: 1.4rem;
  }
}
section.second__header,
section.second__header-inner{
	width:min(92%,1400px);
	margin-top:100px;
	margin-bottom:100px;
	margin-inline:auto;
	padding: 40px 45px 45px;
	border: 1px solid var(--dn-line);
	border-radius: 18px;
	background:
		linear-gradient(
			135deg,
			rgba(239, 80, 72, .035) 0%,
			#fff 35%,
			rgba(32, 44, 153, .045) 100%
		);
	font-size: clamp(1.6rem, 1.318rem + 0.751vw, 2.4rem);
}
section.second__header span,
section.second__header-inner span{
	font-weight: bold;
}
.productLead__catch {
	margin-bottom: .5em;
	font-size: clamp(1.8rem, 1.025rem + 2.066vw, 4rem);
	font-weight: 700;
	line-height: 1.5;
	text-align: center;
	margin-bottom:1em;
}

.productLead__catch .red {
	color: var(--color-red);
}
/* ==========================================================
   Denodo Data Flow
   つなぐ → 整える → 届ける
========================================================== */

.dnDataFlow {
	/* サイト側に変数があればそちらを使用 */

	width: 100%;
	padding: 60px 0 80px;
	background: #fff;
	color: var(--dn-text);
}


.dnDataFlow *,
.dnDataFlow *::before,
.dnDataFlow *::after {
	box-sizing: border-box;
}


/* ==========================================================
   inner
========================================================== */

.dnDataFlow__inner {
	width: min(92%, 1400px);
	margin-inline: auto;
}


/* ==========================================================
   title
========================================================== */

.dnDataFlow__title {
	margin: 0 0 40px;

	color: var(--dn-text);

	font-size: clamp(20px, 2.1vw, 32px);
	font-weight: 700;
	line-height: 1.5;
	letter-spacing: .02em;
}


/* ==========================================================
   steps
========================================================== */
.dnDataFlow__steps--wrapper{
	padding:clamp(2rem, 1.014rem + 2.629vw, 4.8rem);
	background:#efefef;
	border-radius: clamp(1rem, 0.648rem + 0.939vw, 2rem);
	box-shadow: 3px 3px 12px rgba(0,0,0,.35);
}
header + .dnDataFlow__steps--wrapper{
	margin-top:50px;
}
.dnDataFlow__steps {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}
.step_red .dnDataFlow__steps,
.step_purple .dnDataFlow__steps,
.step_blue .dnDataFlow__steps{
	align-items: center;
}
div.section--description{
	display: grid;
	grid-template-columns: repeat(3,minmax(0,1fr));
	background:#fff;
	margin-top:clamp(2rem, 1.014rem + 2.629vw, 4.8rem);
	border-radius: clamp(0.5rem, 0.648rem + 0.939vw, 1rem);
	padding: 20px;
	gap:1em;
}
@media(max-width:767px){
	div.section--description{
		grid-template-columns: 1fr;
	}
}
div.section--description.active01 > div,
div.section--description.active02 > div,
div.section--description.active03 > div{
	background:#fff;
}
div.section--description.active01{
	background:var(--color-red);
}
div.section--description.active02{
	background:var(--dn-purple);
}
div.section--description.active03{
	background:var(--color-blue);
}
div.section--description > div{
	padding:10px;
	border:1px solid;
	border-radius: 6px;
}
.step_red div.section--description > div{
	border-color: var(--color-red);
}
div.section--description > div h4{
	border-radius: 4px;
	text-align: center;
	color:#fff;
	font-size: clamp(1.4rem, 1.33rem + 0.188vw, 1.6rem);
}
.step_red div.section--description > div h4{
	background:var(--color-red);
}
.step_purple div.section--description > div h4{
	background:var(--dn-purple);
}
.step_blue div.section--description > div h4{
	background:var(--color-blue);
}
div.section--description > div ul{
	margin:1em 1em 0 2em;
}
/* ----------------------------------------------------------
   step
---------------------------------------------------------- */

.dnDataFlow__step {
	min-width: 0;
}


/* ==========================================================
   step title
========================================================== */

.dnDataFlow__stepTitle {
	display: flex;
	align-items: center;
	width: 100%;
	height: 120px;
	margin: 0;
	padding: 0 40px;
	color: #fff;
	font-size: clamp(2rem, 1.014rem + 2.629vw, 4.8rem);
	font-weight: 700;
	line-height: 1;

	position: relative;
}
.dnDataFlow__stepTitle.top{
	height: 140px;
}
.dnDataFlow__stepTitle a{
	position: absolute;
	font-size:14px;
	color:#fff;
	bottom:8px;
	right:40px;
}
.dnDataFlow__stepTitle.second + a{
	position: absolute;
    font-size: clamp(1.2rem, 1.13rem + 0.188vw, 1.4rem);
    color: #fff;
    bottom: 5px;
    right: 40px;
}
@media(max-width:767px){
	.dnDataFlow__stepTitle.second + a{
		right: 65px;
	}
}
.step_red .dnDataFlow__step--connect h3,
.step_purple .dnDataFlow__step--organize h3,
.step_blue .dnDataFlow__step--deliver h3{
	height: 140px;
}
@media(max-width:767px){
	.step_red .dnDataFlow__step--connect h3,
	.step_purple .dnDataFlow__step--organize h3,
	.step_blue .dnDataFlow__step--deliver h3{
		height: 80px;
	}
}
.step_red .dnDataFlow__step--connect h3::before,
.step_purple .dnDataFlow__step--organize h3::before,
.step_blue .dnDataFlow__step--deliver h3::before{
	content: "";
	height: 2px;
	background:#fff;
	width:80%;
	position: absolute;
	top:10px;
}
.step_red .dnDataFlow__step--connect h3::after,
.step_purple .dnDataFlow__step--organize h3::after,
.step_blue .dnDataFlow__step--deliver h3::after{
	content: "";
	height: 2px;
	background:#fff;
	width:80%;
	position: absolute;
	bottom:10px;
}
/* 数字 */

.dnDataFlow__stepTitle span {
	margin-right: 5px;
	font-weight: 800;
	color:rgba(255,255,255,.35);
	position: absolute;
	right:1em;
	font-size: clamp(2rem, 0.169rem + 4.883vw, 7.2rem);
}


/* ----------------------------------------------------------
   01 つなぐ
---------------------------------------------------------- */

.dnDataFlow__step--connect .dnDataFlow__stepTitle {
	padding-left: 20px;
	position: relative;
	background: var(--dn-red);

	clip-path: polygon(
		0 0,
		calc(100% - 25px) 0,
		100% 50%,
		calc(100% - 25px) 100%,
		0 100%
	);
}
.dnDataFlow__step--connect{
	position: relative;
}
.dnDataFlow__step--connect.active::after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-right: 25px solid transparent;
	border-left: 25px solid transparent;
	border-top: 30px solid var(--dn-red);
	border-bottom: 0;
	position: absolute;
	margin:auto;
	left:0;
	right:0;
	bottom:-40px;
}


/* ----------------------------------------------------------
   02 整える
---------------------------------------------------------- */

.dnDataFlow__step--organize .dnDataFlow__stepTitle {
	background: var(--dn-purple);
	position: relative;
	clip-path: polygon(
		0 0,
		calc(100% - 25px) 0,
		100% 50%,
		calc(100% - 25px) 100%,
		0 100%,
		25px 50%
	);
}
.dnDataFlow__step--organize{
	position: relative;
}
.dnDataFlow__step--organize.active::after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-right: 25px solid transparent;
	border-left: 25px solid transparent;
	border-top: 30px solid var(--dn-purple);
	border-bottom: 0;
	position: absolute;
	margin:auto;
	left:0;
	right:0;
	bottom:-40px;
}
@media(max-width:767px){
	.dnDataFlow__step--connect.active::after,
	.dnDataFlow__step--organize.active::after,
	.dnDataFlow__step--deliver.active::after {
		border-right: 15px solid transparent;
		border-left: 15px solid transparent;
		bottom: -28px;
	}
	.dnDataFlow__step--connect.active::after{
		border-top: 20px solid var(--dn-red);
	}
	.dnDataFlow__step--organize.active::after{
		border-top: 20px solid var(--dn-purple);
	}
	.dnDataFlow__step--deliver.active::after{
		border-top: 20px solid var(--dn-blue);
	}
}

/* ----------------------------------------------------------
   03 届ける
---------------------------------------------------------- */
.dnDataFlow__step--deliver{
	position: relative;
}
.dnDataFlow__step--deliver .dnDataFlow__stepTitle {
	background: var(--dn-blue);
	position: relative;
	clip-path: polygon(
		0 0,
		calc(100% - 25px) 0,
		100% 50%,
		calc(100% - 25px) 100%,
		0 100%,
		25px 50%
	);
}
.dnDataFlow__step--deliver.active::after{
	content: "";
	width: 0;
	height: 0;
	border-style: solid;
	border-right: 15px solid transparent;
	border-left: 15px solid transparent;
	border-top: 20px solid var(--dn-blue);
	border-bottom: 0;
	position: absolute;
	margin:auto;
	left:0;
	right:0;
	bottom:-28px;
}

/* ==========================================================
   step list
========================================================== */

.dnDataFlow__stepList {
	margin: 24px 0 0;
	padding: 0 35px 0 12px;

	list-style: none;

	font-size: clamp(16px, 1.35vw, 21px);
	line-height: 1.55;
}


.dnDataFlow__stepList li {
	margin: 0;
	padding-left: 20px;

	position: relative;
}


.dnDataFlow__stepList li + li {
	margin-top: 10px;
}


.dnDataFlow__stepList li::before {
	content: "";

	display: block;

	width: 9px;
	height: 9px;

	background: var(--dn-blue);

	position: absolute;
	top: .65em;
	left: 0;
}


/* 色分け */

.dnDataFlow__step--connect .dnDataFlow__stepList li::before {
	background: var(--dn-red);
}


.dnDataFlow__step--organize .dnDataFlow__stepList li::before {
	background: var(--dn-purple);
}


.dnDataFlow__step--deliver .dnDataFlow__stepList li::before {
	background: var(--dn-blue);
}


/* ==========================================================
   Down Arrow
========================================================== */

.dnDataFlow__downArrow {
	display: flex;
	justify-content: center;

	margin: 65px 0 40px;
}


.dnDataFlow__downArrow span {
	display: block;

	width: 48px;
	height: 48px;

	border-right: 10px solid var(--dn-blue);
	border-bottom: 10px solid var(--dn-blue);

	transform: rotate(45deg);
}


/* ==========================================================
   Result
========================================================== */

.dnDataFlow__result {
	padding: 40px 45px 45px;

	border: 1px solid var(--dn-line);
	border-radius: 18px;

	background:
		linear-gradient(
			135deg,
			rgba(239, 80, 72, .035) 0%,
			#fff 35%,
			rgba(32, 44, 153, .045) 100%
		);
}


/* ==========================================================
   Result title
========================================================== */

.dnDataFlow__resultTitle {
	display: flex;
	align-items: center;
	justify-content: center;

	gap: 25px;

	margin-bottom: 35px;
}


/* logo */

.dnDataFlow__logo {
	display: block;

	width: min(190px, 25%);
	height: auto;

	flex-shrink: 0;
}


/* headline */

.dnDataFlow__resultTitle h3 {
	margin: 0;

	color: var(--dn-blue);

	font-size: clamp(21px, 2vw, 30px);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: .01em;
}


/* PCでは強制改行しない */

.dnDataFlow__spBr {
	display: none;
}


/* ==========================================================
   result body
========================================================== */

.dnDataFlow__resultBody {
	display: grid;

	grid-template-columns:
		minmax(150px, 220px)
		minmax(0, 1fr);

	gap: 45px;

	align-items: center;
}


/* ==========================================================
   visual
========================================================== */

.dnDataFlow__visual {
	display: flex;
	align-items: center;
	justify-content: center;
}


.dnDataFlow__visual img {
	display: block;

	width: 100%;
	max-width: 210px;
	height: auto;
}


/* ==========================================================
   Benefits
========================================================== */

.dnDataFlow__benefits {
	margin: 0;
	padding: 0;

	list-style: none;
}


.dnDataFlow__benefits li {
	display: grid;

	grid-template-columns: 48px minmax(0, 1fr);

	gap: 18px;

	align-items: center;
}


.dnDataFlow__benefits li + li {
	margin-top: 22px;
}


/* ==========================================================
   check
========================================================== */

.dnDataFlow__check {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 46px;
	height: 46px;

	border-radius: 50%;

	background: rgba(239, 80, 72, .09);

	color: var(--dn-red);

	font-family: Arial, sans-serif;
	font-size: 25px;
	font-weight: bold;
	line-height: 1;
}


/* ==========================================================
   Benefit Text
========================================================== */

.dnDataFlow__benefits p {
	margin: 0;

	font-size: clamp(15px, 1.25vw, 19px);
	line-height: 1.65;
}


.dnDataFlow__benefits strong {
	display: inline;

	margin-right: .15em;

	color: var(--dn-blue);
	font-weight: 700;
}


.dnDataFlow__benefits strong::after {
	content: "：";
}


.dnDataFlow__benefits span {
	font-weight: 400;
}


/* ==========================================================
   tablet
========================================================== */

@media screen and (max-width: 1024px) {

	.dnDataFlow {
		padding: 50px 0 65px;
	}


	.dnDataFlow__title br {
		display: none;
	}


	.dnDataFlow__stepTitle {
		padding-right: 30px;
	}


	.dnDataFlow__stepList {
		padding-right: 20px;
	}


	.dnDataFlow__stepList br {
		display: none;
	}


	.dnDataFlow__result {
		padding: 35px 30px;
	}


	.dnDataFlow__resultBody {
		grid-template-columns: 150px minmax(0, 1fr);
		gap: 30px;
	}


	.dnDataFlow__visual img {
		max-width: 150px;
	}

}


/* ==========================================================
   Smartphone
========================================================== */

@media screen and (max-width: 767px) {

	.dnDataFlow {
		padding: 40px 0 50px;
	}


	.dnDataFlow__inner {
		width: 90%;
	}


	/* title */

	.dnDataFlow__title {
		margin-bottom: 30px;

		font-size: 20px;
		line-height: 1.6;
	}


	/* steps */

	.dnDataFlow__steps {
		display: block;
	}


	.dnDataFlow__step + .dnDataFlow__step {
		margin-top: 30px;
	}


	.dnDataFlow__stepTitle,
	.dnDataFlow__step--connect .dnDataFlow__stepTitle,
	.dnDataFlow__step--organize .dnDataFlow__stepTitle,
	.dnDataFlow__step--deliver .dnDataFlow__stepTitle {

		height: 48px;

		padding: 0 20px;

		clip-path: polygon(
			0 0,
			calc(100% - 22px) 0,
			100% 50%,
			calc(100% - 22px) 100%,
			0 100%
		);
	}


	.dnDataFlow__stepList {
		margin-top: 16px;
		padding: 0;

		font-size: 16px;
	}


	.dnDataFlow__stepList br {
		display: none;
	}


	/* arrow */

	.dnDataFlow__downArrow {
		margin: 45px 0 35px;
	}


	.dnDataFlow__downArrow span {
		width: 36px;
		height: 36px;

		border-width: 7px;
	}


	/* result */

	.dnDataFlow__result {
		padding: 30px 20px;

		border-radius: 12px;
	}


	.dnDataFlow__resultTitle {
		flex-direction: column;

		gap: 15px;

		margin-bottom: 25px;

		text-align: center;
	}


	.dnDataFlow__logo {
		width: 145px;
		max-width: none;
	}


	.dnDataFlow__resultTitle h3 {
		font-size: 20px;
	}


	.dnDataFlow__spBr {
		display: block;
	}


	/* result body */

	.dnDataFlow__resultBody {
		display: block;
	}


	.dnDataFlow__visual {
		width: 140px;

		margin: 0 auto 30px;
	}


	.dnDataFlow__visual img {
		max-width: 100%;
	}


	/* benefits */

	.dnDataFlow__benefits li {
		grid-template-columns: 38px minmax(0, 1fr);

		gap: 12px;

		align-items: flex-start;
	}


	.dnDataFlow__benefits li + li {
		margin-top: 22px;
	}


	.dnDataFlow__check {
		width: 38px;
		height: 38px;

		font-size: 21px;
	}


	.dnDataFlow__benefits p {
		font-size: 15px;
		line-height: 1.7;
	}


	.dnDataFlow__benefits strong {
		display: block;
		margin: 0 0 2px;
	}


	.dnDataFlow__benefits strong::after {
		content: "";
	}

}
/* =========================================================
   Phase Section
========================================================= */

.phaseSection {
	--phase-blue: var(--color-blue, #202f9d);
	--phase-light-blue: #5ba1df;
	--phase-pale-blue: #e5f1ff;
	--phase-text: #292929;
	--phase-line: #d8e0e9;
	--phase-orange: var(--color-red, #f26122);

	width: 100%;
	padding: 60px 0 80px;

	color: var(--phase-text);
	background: #f5f5f5;
}


.phaseSection *,
.phaseSection *::before,
.phaseSection *::after {
	box-sizing: border-box;
}
.phaseSection.white{
	background:#fff;
}

/* =========================================================
   Inner
========================================================= */

.phaseSection__inner {
	width: min(92%, 1400px);
	margin-inline: auto;
}


/* =========================================================
   Main Title
   01.つなぐ
========================================================= */

.phaseSection__mainTitle {
	display: flex;
	align-items: baseline;
	gap: .25em;

	margin: 0 0 35px;

	color: var(--phase-blue);

	font-size: clamp(28px, 3vw, 44px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .02em;
}


.phaseSection__mainTitle span {
	color: var(--phase-orange);
	font-size: .65em;
	font-weight: 700;
}


/* =========================================================
   Accordion
========================================================= */

.phaseSection__accordion {
	overflow: hidden;

	margin: 0;

	border-radius: 18px;

	background: #fff;
}


/* =========================================================
   Summary
========================================================= */

.phaseSection__summary {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 30px;

	min-height: 150px;

	padding: 30px 70px;

	color: #fff;
	background: var(--color-red);

	cursor: pointer;
	list-style: none;
}


/* Chrome / Safari */

.phaseSection__summary::-webkit-details-marker {
	display: none;
}


/* Firefoxなど */

.phaseSection__summary::marker {
	display: none;
	content: "";
}


.phaseSection__summaryText {
	min-width: 0;
}


/* Phase 1 */

.phaseSection__phase {
	display: block;

	margin-bottom: 8px;

	color: #fff;

	font-size: clamp(15px, 1.3vw, 18px);
	font-weight: 700;
	line-height: 1.3;
}


/* h3 */

.phaseSection__summary h3 {
	margin: 0;

	color: #fff;

	font-size: clamp(22px, 2.2vw, 32px);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .01em;
}


.phaseSection__divider {
	font-weight: 400;
}




/* =========================================================
   Content
========================================================= */

.phaseSection__content {
	padding: 70px;
	background: #fff;
}


/* =========================================================
   Phase Map
========================================================= */

.phaseMap {
	padding: 48px;
	border-radius: 20px;
	background: #fdeaeb;
}


/* =========================================================
   Phase Flow
========================================================= */

.phaseMap__flow {
	display: grid;

	grid-template-columns:
		1.3fr
		1fr
		1fr;

	gap: 7px;

	margin-bottom: 28px;
}


/* ---------------------------------------------------------
   Flow item
--------------------------------------------------------- */

.phaseMap__flowItem {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	min-width: 0;
	min-height: 100px;

	padding: 12px 30px;

	position: relative;

	color: #fff;
	background: #f36b68;

	clip-path: polygon(
		0 0,
		calc(100% - 30px) 0,
		100% 50%,
		calc(100% - 30px) 100%,
		0 100%,
		30px 50%
	);
}


/* 最初だけ左側の切り込みなし */

.phaseMap__flowItem:first-child {
	clip-path: polygon(
		0 0,
		calc(100% - 30px) 0,
		100% 50%,
		calc(100% - 30px) 100%,
		0 100%
	);
}


/* アクティブ */

.phaseMap__flowItem--active {
	background: #c2152c;
}


.phaseMap__flowItem span {
	font-size: 15px;
	font-weight: 700;
	line-height: 1.3;
}


.phaseMap__flowItem strong {
	display: block;

	margin-top: 3px;

	font-size: clamp(18px, 1.7vw, 24px);
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
}


.phaseMap__flowItem small {
	display: block;

	margin-top: 6px;

	font-size: 11px;
	font-weight: 700;
	line-height: 1.3;
}


/* =========================================================
   Phase Map Body
========================================================= */

.phaseMap__body {
	display: grid;

	grid-template-columns:
		minmax(0, 3fr)
		minmax(130px, .75fr);

	gap: 20px;
}


/* =========================================================
   Main Area
========================================================= */

.phaseMap__main {
	min-width: 0;

	padding: 24px;

	border-radius: 14px;

	background: #fff;
}


.phaseMap__row {
	display: grid;

	grid-template-columns: repeat(2, minmax(0, 1fr));

	gap: 24px;
}
.phaseMap__row h4{
	text-align: center;
	background:#f36b68;
	color:#fff;
	border-radius: 4px;
	margin-bottom:1em;
}


/* =========================================================
   Box
========================================================= */

.phaseMap__box {
	min-width: 0;
	padding: 14px 15px 18px;
	border: 2px solid #fcd6da;
	border-radius: 12px;
	background: #fff;
}
.phaseMap__box h4{
	text-align: center;
	background:#f36b68;
	color:#fff;
	border-radius: 4px;
	margin-bottom:1em;
}
/* box title */

.phaseMap__box h3 {
	margin: 0 0 14px;

	padding: 7px 15px;

	border-radius: 7px;

	color: #fff;
	background: var(--phase-blue);

	font-size: clamp(13px, 1.2vw, 17px);
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}


/* list */

.phaseMap__box ul {
	width: fit-content;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}


.phaseMap__box li {
	margin: 0;
	padding-left: 14px;
	position: relative;
	font-size: clamp(1.4rem, 1.33rem + 0.188vw, 1.6rem);
	font-weight: 600;
	line-height: 1.7;
}


/* dot */

.phaseMap__box li::before {
	content: "";

	display: block;

	width: 5px;
	height: 5px;

	border-radius: 50%;

	background: var(--phase-orange);

	position: absolute;
	top: .7em;
	left: 0;
}


/* =========================================================
   Governance
========================================================= */

.phaseMap__governance {
	width: 52%;

	margin: 26px auto 0;
}


/* =========================================================
   Future Area
========================================================= */

.phaseMap__future {
	display: flex;
	flex-direction: column;

	gap: 20px;

	padding: 18px;

	border-radius: 12px;

	background: #f7cdce;
}


.phaseMap__futureBox {
	display: flex;
	flex-direction: column;
	padding: 14px;
	border-radius: 10px;
	background: #fcdcdc;
	opacity: .45;
}


.phaseMap__futureBox strong {
	display: block;
	margin-bottom: 10px;
	padding: 5px;
	border-radius: 5px;
	color: #fff;
	background: #ed9294;
	font-size: 12px;
	font-weight: 700;
	line-height: 1.4;
	text-align: center;
}


.phaseMap__futureBox span {
	display: block;
	color: #f08c8c;
	font-size: 12px;
	line-height: 1.6;
}


/* =========================================================
   Phase Navigation
========================================================= */

.phaseNav {
	display: grid;

	grid-template-columns: repeat(3, 1fr);

	gap: 15px;

	margin: 65px 0 70px;
}


.phaseNav__item {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	min-width: 0;
	min-height: 110px;

	padding: 15px;

	border: 1px solid #d3dce7;
	border-radius: 12px;

	color: var(--phase-text);
	background: #fff;

	text-align: center;
	text-decoration: none;

	transition:
		border-color .25s ease,
		box-shadow .25s ease;
}


.phaseNav__item span {
	display: block;

	margin-bottom: 5px;

	color: var(--phase-blue);

	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
}


.phaseNav__item strong {
	display: block;

	font-size: 16px;
	font-weight: 700;
	line-height: 1.4;
}


.phaseNav__item i {
	display: block;

	margin-top: 5px;

	color: var(--phase-blue);

	font-size: 20px;
	font-style: normal;
	line-height: 1;

	transition: transform .25s ease;
}


/* hover可能なデバイスのみ */

@media (hover: hover) {

	.phaseNav__item:hover {
		border-color: var(--phase-blue);

		box-shadow:
			0 8px 20px rgba(32, 47, 157, .08);
	}


	.phaseNav__item:hover i {
		transform: translateY(4px);
	}

}


/* =========================================================
   Detail
========================================================= */

.phaseDetail {
	scroll-margin-top: 120px;
}


/* =========================================================
   Detail Header
========================================================= */

.phaseDetail__header {
	margin-bottom: 35px;

	text-align: center;
}


/* 英字見出し */

.phaseDetail__en {
	margin: 0 0 8px;

	color: var(--phase-blue);

	font-size: clamp(16px, 1.4vw, 21px);
	font-weight: 600;
	line-height: 1.4;
}


/* h3 */

.phaseDetail__header h3 {
	margin: 0;

	color: var(--phase-text);

	font-size: clamp(30px, 4vw, 48px);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .01em;
}


/* =========================================================
   Lead
========================================================= */

.phaseDetail__lead {
	margin-bottom: 60px;

	padding: 30px;

	border-radius: 12px;

	background: #f5f5f5;

	text-align: center;
}


.phaseDetail__lead p {
	margin: 0;

	font-size: clamp(16px, 1.5vw, 21px);
	line-height: 1.7;
}


.phaseDetail__lead strong {
	font-weight: 700;
}


/* =========================================================
   Detail Body
========================================================= */

/* h4 */

.phaseDetail__body h4 {
	margin: 0 0 25px;

	padding-bottom: 12px;

	border-bottom: 2px solid var(--phase-blue);

	color: var(--phase-text);

	font-size: clamp(18px, 1.8vw, 24px);
	font-weight: 700;
	line-height: 1.5;
}


.phaseDetail__body p {
	margin: 0;

	font-size: clamp(14px, 1.2vw, 17px);
	line-height: 1.9;
}


/* 次の項目 */

.phaseDetail--sub {
	margin-top: 100px;
}


/* =========================================================
   Tablet
========================================================= */

@media screen and (max-width: 1024px) {

	.phaseSection {
		padding: 50px 0 65px;
	}


	/* ------------------------------
	   Main title
	------------------------------ */

	.phaseSection__mainTitle {
		margin-bottom: 30px;
	}


	/* ------------------------------
	   Accordion
	------------------------------ */

	.phaseSection__summary {
		min-height: 130px;

		padding: 28px 45px;
	}


	.phaseSection__content {
		padding: 50px 40px;
	}


	/* ------------------------------
	   Phase Map
	------------------------------ */

	.phaseMap {
		padding: 35px;
	}


	.phaseMap__body {
		grid-template-columns: 1fr;
	}


	/* 次フェーズ部分を非表示 */

	.phaseMap__future {
		display: none;
	}


	.phaseMap__governance {
		width: 60%;
	}

}


/* =========================================================
   Smartphone
========================================================= */

@media screen and (max-width: 767px) {

	.phaseSection {
		padding: 40px 0 50px;
	}


	.phaseSection__inner {
		width: 92%;
	}


	/* =====================================================
	   Main Title
	===================================================== */

	.phaseSection__mainTitle {
		margin-bottom: 22px;

		font-size: 28px;
	}


	.phaseSection__mainTitle span {
		font-size: .65em;
	}


	/* =====================================================
	   Content
	===================================================== */

	.phaseSection__content {
		padding: 35px 20px;
	}


	/* =====================================================
	   Phase Map
	===================================================== */

	.phaseMap {
		padding: 20px;

		border-radius: 14px;
	}


	/* =====================================================
	   Flow
	===================================================== */

	.phaseMap__flow {
		display: block;

		margin-bottom: 20px;
	}


	.phaseMap__flowItem {
		min-height: 70px;

		padding: 12px 20px;

		border-radius: 8px;

		clip-path: none;
	}


	.phaseMap__flowItem:first-child {
		clip-path: none;
	}


	.phaseMap__flowItem + .phaseMap__flowItem {
		margin-top: 8px;
	}


	/* モバイルではActiveのみ */

	.phaseMap__flowItem:not(.phaseMap__flowItem--active) {
		display: none;
	}


	.phaseMap__flowItem strong {
		font-size: 18px;
	}


	/* =====================================================
	   Map Body
	===================================================== */

	.phaseMap__body {
		display: block;
	}


	.phaseMap__main {
		padding: 15px;
	}


	.phaseMap__row {
		display: block;
	}


	.phaseMap__box + .phaseMap__box {
		margin-top: 15px;
	}


	.phaseMap__box {
		padding: 12px 12px 15px;
	}


	.phaseMap__box h3 {
		font-size: 14px;
	}


	.phaseMap__box li {
		font-size: 13px;
	}


	/* Governance */

	.phaseMap__governance {
		width: 100%;

		margin-top: 15px;
	}


	/* =====================================================
	   Navigation
	===================================================== */

	.phaseNav {
		grid-template-columns: 1fr;

		gap: 10px;

		margin: 40px 0 55px;
	}


	.phaseNav__item {
		min-height: 85px;
	}


	.phaseNav__item strong {
		font-size: 15px;
	}


	/* =====================================================
	   Detail
	===================================================== */

	.phaseDetail {
		scroll-margin-top: 90px;
	}


	.phaseDetail__header {
		margin-bottom: 25px;
	}


	.phaseDetail__en {
		font-size: 15px;
	}


	.phaseDetail__header h3 {
		font-size: 30px;
	}


	/* Lead */

	.phaseDetail__lead {
		margin-bottom: 45px;

		padding: 24px 18px;
	}


	.phaseDetail__lead p {
		font-size: 16px;
	}


	.phaseDetail__lead br {
		display: none;
	}


	/* Body */

	.phaseDetail__body h4 {
		margin-bottom: 20px;

		font-size: 19px;
	}


	.phaseDetail__body p {
		font-size: 15px;
		line-height: 1.8;
	}


	.phaseDetail--sub {
		margin-top: 70px;
	}

}

/* ==========================================================
   01.つなぐ
   Data Source Connectivity
========================================================== */

.connectSource {
	width: 100%;
	padding: 0 0 80px;
	color: var(--connect-text);
	background: #f5f5f5;
}
.connectSource *,
.connectSource *::before,
.connectSource *::after {
	box-sizing: border-box;
}


/* ==========================================================
   Inner
========================================================== */

.connectSource__inner {
	width: min(92%, 1400px);
	margin-inline: auto;
    padding: 50px;
    border: 1px solid var(--deliver-line);
    border-radius: 18px;
    background: #fff;
    box-shadow: 0 8px 30px rgba(30, 45, 100, .045);
}
.connectSource__inner + .connectSource__inner{
	margin-top:80px;
}
/* ==========================================================
   01.つなぐ
========================================================== */


.connectSource__mainTitle {
	display: flex;
	align-items: center;
	gap: 0.5em;
	margin: 0;

	color: var(--connect-blue);
	font-size: clamp(2rem, 1.014rem + 2.629vw, 4.8rem);
	font-weight: 700;
	line-height: 1.25;
	letter-spacing: .02em;
}
.connectSource__mainTitle.t00{
	color:var(--dn-text);
}
.connectSource__mainTitle.t01{
	color:var(--color-red);
}
.connectSource__mainTitle.t02{
	color:var(--dn-purple);
}
.connectSource__mainTitle.t03{
	color:var(--color-blue);
}
.connectSource__mainTitle span {
	display: flex;
	align-items: center;
	gap: 18px;

	color: #cfcfcf;
	font-size: clamp(5rem, 2.535rem + 6.573vw, 12rem);
	font-weight: bold;
	line-height: 1;
	letter-spacing: -.04em;
}

.connectSource__mainTitle span::after {
	content: "";
	width: 2px;
	height: 1em;
	background: #cfcfcf;
}

/* ==========================================================
   Intro
========================================================== */

.connectSource__intro {
	display: grid;
	grid-template-columns:
		minmax(0, 1fr)
		230px;
	gap: 60px;
	align-items: center;
	margin-bottom: 55px;
	padding: 45px 50px;
	position: relative;
	overflow: hidden;
	border-radius: 18px;
	background:
		linear-gradient(
			135deg,
			#f7f8fc 0%,
			#fff 58%,
			#f3f5ff 100%
		);
}


/* 左側のアクセントライン */

.connectSource__intro::before {
	content: "";
	width: 6px;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	background:
		linear-gradient(
			to bottom,
			var(--connect-red) 0%,
			var(--connect-blue) 100%
		);
}


/* ==========================================================
   English
========================================================== */

.connectSource__en {
	margin: 0 0 8px;
	color:#666;
	font-size: clamp(1.2rem, 1.13rem + 0.188vw, 1.4rem);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .06em;
}


/* ==========================================================
   h3
========================================================== */

.connectSource__intro h3 {
	margin: 0 0 22px;

	color: var(--color-red);

	font-size: clamp(24px, 2.7vw, 38px);
	font-weight: 700;
	line-height: 1.45;
}


/* ==========================================================
   Intro paragraph
========================================================== */

.connectSource__introText > p:not(.connectSource__en) {
	margin: 0;

	font-size: clamp(1.4rem, 1.259rem + 0.376vw, 1.8rem);
	font-weight: 400;
	line-height: 1.9;
}


.connectSource__introText > p:not(.connectSource__en) + p {
	margin-top: 8px;
}


/* ==========================================================
   150+
========================================================== */

.connectSource__number {
	display: flex;
	flex-direction: column;

	align-items: center;
	justify-content: center;

	min-height: 170px;

	padding: 20px;

	border-left: 1px solid var(--connect-line);

	text-align: center;
}


/* 数字 */

.connectSource__number strong {
	display: flex;

	align-items: flex-end;
	justify-content: center;

	color: var(--connect-red);

	font-weight: 700;
	line-height: 1;
}


.connectSource__number strong span {
	font-size: clamp(56px, 6vw, 80px);
	line-height: .85;
}


/* + */

.connectSource__number strong em {
	margin: 0 0 5px 4px;

	font-size: 30px;
	font-style: normal;
	font-weight: 700;
	line-height: 1;
}


/* 下の文章 */

.connectSource__number p {
	margin: 14px 0 0;
	color: #666;
	font-size: clamp(1.2rem, 1.094rem + 0.282vw, 1.5rem);
	font-weight: 700;
	line-height: 1.55;
}


/* ==========================================================
   Grid
========================================================== */

.connectSource__grid {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 22px;

	align-items: start;
}


/* ==========================================================
   Column
========================================================== */

.connectSource__column {
	display: flex;
	flex-direction: column;

	gap: 22px;

	min-width: 0;
}


/* ==========================================================
   Card
========================================================== */

.connectSource__card {
	overflow: hidden;

	border: 1px solid var(--connect-line);
	border-radius: 14px;

	background: #fff;

	box-shadow:
		0 6px 22px rgba(22, 36, 88, .045);
}


/* ==========================================================
   Card Header
========================================================== */

.connectSource__cardHeader {
	display: grid;

	grid-template-columns:
		48px
		minmax(0, 1fr);

	gap: 15px;

	align-items: center;

	min-height: 92px;

	padding: 20px 22px;

	border-bottom: 1px solid var(--connect-line);

	background:
		linear-gradient(
			135deg,
			#f7f8ff,
			#fff
		);
}


/* ==========================================================
   Number
========================================================== */

.connectSource__index {
	display: flex;

	align-items: center;
	justify-content: center;

	width: 40px;
	height: 40px;

	border-radius: 4px;

	color: #fff;
	background: var(--color-red);

	font-size: 15px;
	font-weight: 700;
	line-height: 1;
}


/* ==========================================================
   Card Title
========================================================== */

.connectSource__cardTitle {
	min-width: 0;
}


/* English */

.connectSource__cardTitle p {
	margin: 0 0 3px;
	color:#666;
	font-size: clamp(1.2rem, 1.13rem + 0.188vw, 1.4rem);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .04em;
}


/* h4 */

.connectSource__cardTitle h4 {
	margin: 0;

	color: var(--connect-red);

	font-size: clamp(16px, 1.4vw, 20px);
	font-weight: 700;
	line-height: 1.45;
}


/* ==========================================================
   Card Body
========================================================== */

.connectSource__cardBody {
	padding: 24px 22px 26px;
}


/* ==========================================================
   JDBC Label
========================================================== */

.connectSource__label {
	display: inline-block;
	margin: 0 0 20px;
	padding: 5px 12px;
	border-radius: 30px;
	color: var(--connect-blue);
	background: #eef1ff;
	font-size: clamp(1.2rem, 1.13rem + 0.188vw, 1.4rem);
	font-weight: 700;
	line-height: 1.4;
}


/* ==========================================================
   Subtitle
========================================================== */

.connectSource__subTitle {
	margin: 0 0 12px;
	color: var(--connect-text);
	font-size: clamp(1.4rem, 1.259rem + 0.376vw, 1.8rem);
	font-weight: 700;
	line-height: 1.5;
}


/* ==========================================================
   Source List
========================================================== */

.connectSource__sourceList {
	margin: 0;
	padding: 0;
	list-style: none;
}


.connectSource__sourceList li {
	margin: 0;
	padding: 8px 0 8px 17px;
	position: relative;
	border-bottom: 1px solid #edf0f4;
	font-size: clamp(1.3rem, 1.194rem + 0.282vw, 1.6rem);
	font-weight: 400;
	line-height: 1.55;
}


.connectSource__sourceList li:last-child {
	border-bottom: 0;
}


/* dot */

.connectSource__sourceList li::before {
	content: "";

	width: 6px;
	height: 6px;

	position: absolute;

	top: 1.15em;
	left: 0;

	border-radius: 50%;

	background: var(--connect-red);
}


/* ==========================================================
   Note
========================================================== */

.connectSource__note {
	margin-top: 18px;
	padding: 14px 16px;
	border-radius: 8px;
	color: #555;
	background: var(--connect-gray);
	font-size: clamp(1.2rem, 1.13rem + 0.188vw, 1.4rem);
	font-weight: 400;
	line-height: 1.75;
}


/* ==========================================================
   Group
========================================================== */

.connectSource__group {
	margin: 0;
}


.connectSource__group + .connectSource__group {
	margin-top: 30px;

	padding-top: 25px;

	border-top: 1px solid var(--connect-line);
}


/* ==========================================================
   h5
========================================================== */

.connectSource__group h5 {
	margin: 0 0 15px;

	padding-left: 12px;

	border-left: 3px solid var(--connect-blue);

	color: var(--connect-text);

	font-size: 15px;
	font-weight: 700;
	line-height: 1.45;
}


/* ==========================================================
   Definition
========================================================== */

.connectSource__definition {
	margin: 0;
}


.connectSource__definition > div + div {
	margin-top: 22px;
}


/* dt */

.connectSource__definition dt {
	margin: 0 0 8px;
	color: var(--connect-blue);
	font-size: clamp(1.2rem, 1.13rem + 0.188vw, 1.4rem);
	font-weight: 700;
	line-height: 1.4;
}


/* dd */

.connectSource__definition dd {
	margin: 0;
}


/* ul */

.connectSource__definition ul {
	margin: 0;
	padding: 0;

	list-style: none;
}


/* li */

.connectSource__definition li {
	margin: 0;
	padding: 4px 0 4px 15px;
	position: relative;
	font-size: clamp(1.3rem, 1.194rem + 0.282vw, 1.6rem);
	font-weight: 400;
	line-height: 1.6;
}


/* bullet */

.connectSource__definition li::before {
	content: "・";

	position: absolute;

	top: 4px;
	left: 0;

	color: var(--connect-red);
}


/* ==========================================================
   Access
========================================================== */

.connectSource__access {
	display: flex;
	flex-wrap: wrap;

	gap: 7px;

	margin-top: 22px;

	padding-top: 18px;

	border-top: 1px solid var(--connect-line);
}


/* title */

.connectSource__access strong {
	width: 100%;

	margin-bottom: 2px;

	color: var(--connect-text);

	font-size: 13px;
	font-weight: 700;
	line-height: 1.4;
}


/* badge */

.connectSource__access span {
	display: inline-block;
	padding: 5px 10px;
	border-radius: 5px;
	color: var(--connect-blue);
	background: #eef1ff;
	font-size: clamp(1.2rem, 1.13rem + 0.188vw, 1.4rem);
	font-weight: 700;
	line-height: 1.4;
}


/* ==========================================================
   Tablet
========================================================== */

@media screen and (max-width: 1100px) {

	/* ------------------------------------------------------
	   Intro
	------------------------------------------------------ */

	.connectSource__intro {
		grid-template-columns:
			minmax(0, 1fr)
			180px;

		gap: 35px;

		padding: 40px;
	}


	/* ------------------------------------------------------
	   3列 → 2列
	------------------------------------------------------ */

	.connectSource__column {
		display: contents;
	}


	.connectSource__grid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

}


/* ==========================================================
   Smartphone
========================================================== */

@media screen and (max-width: 767px) {

	.connectSource {
		padding: 50px 0;
	}


	.connectSource__inner {
		width: 90%;
		padding:10px;
	}


	/* ======================================================
	   01.つなぐ
	====================================================== */

	.connectSource__sectionHeader {
		margin-bottom: 28px;
	}


	.connectSource__mainTitle {
		font-size: 30px;
	}


	.connectSource__mainTitle span {
		font-size: .65em;
	}


	/* ======================================================
	   Intro
	====================================================== */

	.connectSource__intro {
		display: block;

		margin-bottom: 35px;

		padding: 30px 24px;

		border-radius: 12px;
	}


	.connectSource__intro::before {
		width: 4px;
	}


	.connectSource__intro h3 {
		margin-bottom: 18px;

		font-size: 23px;
		line-height: 1.5;
	}


	.connectSource__en {
		font-size: 12px;
	}


	.connectSource__introText > p:not(.connectSource__en) {
		font-size: 14px;
		line-height: 1.8;
	}


	/* ======================================================
	   150+
	====================================================== */

	.connectSource__number {
		min-height: 0;

		margin-top: 30px;

		padding: 27px 0 0;

		border-top: 1px solid var(--connect-line);
		border-left: 0;
	}


	.connectSource__number strong span {
		font-size: 60px;
	}


	.connectSource__number strong em {
		font-size: 25px;
	}


	/* ======================================================
	   Grid
	====================================================== */

	.connectSource__grid {
		grid-template-columns: 1fr;

		gap: 18px;
	}


	.connectSource__column {
		display: flex;

		gap: 18px;
	}


	/* ======================================================
	   Card header
	====================================================== */

	.connectSource__cardHeader {
		grid-template-columns:
			42px
			minmax(0, 1fr);

		gap: 12px;

		min-height: 80px;

		padding: 17px;
	}


	.connectSource__index {
		width: 40px;
		height: 40px;

		font-size: 13px;
	}


	.connectSource__cardTitle p {
		font-size: 9px;
	}


	.connectSource__cardTitle h4 {
		font-size: 17px;
	}


	/* ======================================================
	   Body
	====================================================== */

	.connectSource__cardBody {
		padding: 20px 18px 22px;
	}


	.connectSource__sourceList li {
		font-size: 13px;
	}


	.connectSource__group h5 {
		font-size: 14px;
	}

}

/* ==========================================================
   02.整える
========================================================== */

.prepareData {
	--prepare-red: var(--color-red, #ee4f4a);
	--prepare-blue: var(--color-blue, #202d98);
	--prepare-text: #30343b;

	--prepare-gray: #f5f7fa;
	--prepare-light: #f7f8fc;
	--prepare-line: #dfe4eb;

	width: 100%;
	padding: 90px 0;

	color: var(--prepare-text);
	background: #fff;
}


.prepareData *,
.prepareData *::before,
.prepareData *::after {
	box-sizing: border-box;
}


/* ==========================================================
   Inner
========================================================== */

.prepareData__inner {
	width: min(92%, 1400px);
	margin-inline: auto;
}


/* ==========================================================
   Section Header
========================================================== */

.prepareData__sectionHeader {
	margin-bottom: 55px;
}


/* ----------------------------------------------------------
   h2
   02.整える
---------------------------------------------------------- */

.prepareData__mainTitle {
	display: flex;
	align-items: baseline;

	gap: .25em;

	margin: 0 0 22px;

	color: var(--prepare-blue);

	font-size: clamp(30px, 3.5vw, 48px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .02em;
}


.prepareData__mainTitle span {
	color: var(--prepare-red);

	font-size: .62em;
	font-weight: 700;
}


/* ----------------------------------------------------------
   Lead
---------------------------------------------------------- */

.prepareData__lead {
	margin: 0;

	color: var(--prepare-text);

	font-size: clamp(21px, 2.1vw, 30px);
	font-weight: 700;
	line-height: 1.55;
}


/* ==========================================================
   Block
========================================================== */

.prepareData__block {
	padding: 50px;
	border: 1px solid var(--prepare-line);
	border-radius: 18px;
	background: #fff;
	box-shadow:
		0 8px 30px rgba(30, 45, 100, .045);
	margin-top:50px;
}


.prepareData__block + .prepareData__block {
	margin-top: 55px;
}


/* ==========================================================
   Block Header
========================================================== */

.prepareData__blockHeader {
	display: flex;
	align-items: center;

	gap: 18px;

	margin-bottom: 28px;
}


/* ----------------------------------------------------------
   Number
---------------------------------------------------------- */

.prepareData__blockNo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	flex-shrink: 0;
	border-radius: 50%;
	color: #fff;
	background: var(--dn-purple);
	font-size: 15px;
	font-weight: 700;
	line-height: 1;
}
.prepareData__blockNo.datasource {
	background: var(--color-red);
}


/* ----------------------------------------------------------
   English
---------------------------------------------------------- */

.prepareData__en {
	margin: 0 0 2px;
	color: var(--prepare-red);
	color:#666;
	font-size: clamp(1.2rem, 1.13rem + 0.188vw, 1.4rem);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .06em;
}


/* ----------------------------------------------------------
   h3
---------------------------------------------------------- */

.prepareData__blockHeader h3 {
	margin: 0;
	color: var(--dn-purple);
	font-size: clamp(24px, 2.5vw, 36px);
	font-weight: 700;
	line-height: 1.4;
}
.prepareData__blockHeader.datasource h3 {
	color: var(--color-red) !important;
}


/* ==========================================================
   Intro
========================================================== */

.prepareData__intro {
	margin-bottom: 40px;

	padding: 28px 32px;
	overflow: hidden;
	border-radius: 12px;
	position: relative;
	background:
		linear-gradient(
			135deg,
			#f7f8fc 0%,
			#fff 100%
		);
}
.prepareData__intro::before {
    content: "";
    width: 6px;
    height: 100%;
    position: absolute;
    top: 0;
    left: 0;
    background: linear-gradient(
			to bottom,
			var(--connect-red) 0%,
			var(--connect-blue) 100%
		);
}

.prepareData__intro p {
	margin: 0;
	font-size: clamp(1.4rem, 1.259rem + 0.376vw, 1.8rem);
	line-height: 1.9;
}


.prepareData__intro p + p {
	margin-top: 7px;
}


.prepareData__intro strong {
	color: var(--prepare-blue);
	font-weight: 700;
}


/* ==========================================================
   Data Processing
========================================================== */

.prepareData__processing {
	width: 100%;
}


/* ----------------------------------------------------------
   Processing Header
---------------------------------------------------------- */

.prepareData__processingHead {
	margin-bottom: 25px;
}


.prepareData__processingHead h4 {
	margin: 0 0 10px;
	color: var(--prepare-text);
	font-size: clamp(18px, 1.7vw, 24px);
	font-weight: 700;
	line-height: 1.5;
	position: relative;
	padding-left:1em;
}
.prepareData__processingHead h4::before{
	content: "";
	display: block;
	width:5px;
	height: 1.5em;
	background:var(--dn-purple);
	margin:auto;
	position: absolute;
	top:0;
	bottom;0;
	left:0;
}

.prepareData__processingHead ul {
	margin: 0;
	color: #555;
	font-size: clamp(1.4rem, 1.33rem + 0.188vw, 1.6rem);
	line-height: 1.75;
	list-style: none;
}


/* ==========================================================
   7 Process List
========================================================== */

.prepareData__processList {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 10px 20px;

	margin: 0;
	padding: 0;

	list-style: none;
}


/* ----------------------------------------------------------
   Item
---------------------------------------------------------- */

/*.prepareData__processList li {
	display: grid;
	grid-template-columns:42px minmax(0, 1fr);
	gap: 14px;
	align-items: center;
	min-height: 58px;
	padding: 10px 15px;
	border: 1px solid var(--prepare-line);
	border-radius: 8px;
	background: #fff;
	font-size: clamp(1.4rem, 1.259rem + 0.376vw, 1.8rem);
	font-weight: 600;
	line-height: 1.55;
}*/
.prepareData__processList {
	list-style: none;
	padding: 0;
	margin: 0;
	margin-bottom:3em;
	border-top: 1px solid #d9dde5;
}

.prepareData__processList > li {
	display: grid;
	grid-template-columns: 50px minmax(220px, 34%) 1fr;
	align-items: stretch;
	border-bottom: 1px solid #d9dde5;
	background: #fff;
}

/* ----------------------------------------------------------
   Number
---------------------------------------------------------- */

/*.prepareData__processNo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	border-radius: 6px;
	color: #fff;
	background: var(--dn-purple);
	font-size: clamp(1.2rem, 1.13rem + 0.188vw, 1.4rem);
	font-weight: 700;
	line-height: 1;
}*/
.prepareData__processNo {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--dn-purple);
	color: #fff;
	font-weight: bold;
	font-size: 1.5rem;
}
/* 項目名 */
.prepareData__processTitle {
	display: flex;
	align-items: center;
	padding: 1em 1.3em;
	font-weight: 500;
	font-size: clamp(1.4rem, 1.3rem + 0.25vw, 1.7rem);
	line-height: 1.6;
	background: #f6f7f9;
}

/* 説明 */
.prepareData__processDesc {
	list-style: none;
	margin: 0;
	padding: 0.8em 1.4em;
	border-left: 1px solid #d9dde5;
	font-size: clamp(1.4rem, 1.33rem + 0.188vw, 1.6rem);
	line-height: 1.65;
}

.prepareData__processDesc li {
	position: relative;
	padding-left: 1em;
}

.prepareData__processDesc li::before {
	content: "・";
	position: absolute;
	left: 0;
	top: 0;
}
@media screen and (max-width: 767px){
	.prepareData__processDesc li::before {
		top: 0.6em;
	}
}
.prepareData__processDesc li + li {
	margin-top: 0.15em;
}
@media screen and (max-width: 767px) {

	.prepareData__processList > li {
		grid-template-columns: 42px 1fr;
	}

	.prepareData__processNo {
		grid-column: 1;
		grid-row: 1;
		font-size: 1.3rem;
	}

	.prepareData__processTitle {
		grid-column: 2;
		grid-row: 1;
		padding: 0.9em 1em;
	}

	.prepareData__processDesc {
		grid-column: 1 / -1;
		grid-row: 2;
		padding: 0.8em 1em 0.8em 1.5em;
		border-left: none;
		border-top: 1px solid #e5e7eb;
		background: #fff;
	}
}
/* =============================
   データクレンジング例
============================= */




/* =============================
   table
============================= */

.prepareData__tableWrap {
	width: 100%;
	overflow-x: auto;
}

.prepareData__table {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: clamp(1.3rem, 1.2rem + 0.2vw, 1.5rem);
}

/* 列幅 */
.prepareData__table th:nth-child(1),
.prepareData__table td:nth-child(1) {
	width: 35%;
}

.prepareData__table th:nth-child(2),
.prepareData__table td:nth-child(2) {
	width: 45%;
}

.prepareData__table th:nth-child(3),
.prepareData__table td:nth-child(3) {
	width: 20%;
}


/* 見出し */
.prepareData__table th {
	padding: 0.8em 1em;
	text-align: left;
	font-weight: bold;
	color: #333;
	background: #e9edf3;
	border-right: 1px solid #fff;
}

.prepareData__table th:last-child {
	border-right: none;
}


/* セル */
.prepareData__table td {
	padding: 0.65em 1em;
	color: #444;
	border-bottom: 1px solid #e5e8ed;
	border-right: 1px solid #e5e8ed;
	line-height: 1.5;
}

.prepareData__table td:last-child {
	border-right: none;
	text-align: right;
	font-variant-numeric: tabular-nums;
}

.prepareData__table tbody tr:last-child td {
	border-bottom: none;
}


/* 交互に背景色 */
.prepareData__table tbody tr:nth-child(even) {
	background: #f8f9fb;
}


/* クレンジング後を強調 */
.prepareData__table td:nth-child(2) {
	font-weight: 500;
	color: #222;
}


/* =============================
   SP
============================= */

@media screen and (max-width: 767px) {

	.prepareData__example {
		margin-top: 2em;
		border-radius: 6px;
	}

	.prepareData__exampleHead {
		display: block;
		padding: 1em 1.2em;
	}

	.prepareData__exampleText {
		margin-top: 0.4em;
	}

	.prepareData__table {
		min-width: 620px;
	}

	.prepareData__table th,
	.prepareData__table td {
		padding: 0.7em 0.8em;
	}

}
/* ======================================
   クレンジング実行結果
====================================== */

.prepareData__cleansing {
	margin-top: 3em;
	margin-bottom: 3em;
	border: 1px solid #9ca3aa;
	background: #fff;
	font-size: clamp(1.2rem, 1.1rem + 0.2vw, 1.5rem);
}


/* 上部ツールバー
-------------------------------------- */

.prepareData__cleansingToolbar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 2em;
	padding: 0.9em 0.8em;
	border-bottom: 1px solid #ddd;
}

.prepareData__cleansingTabs {
	display: flex;
	gap: 1em;
	font-weight: bold;
	white-space: nowrap;
}

.prepareData__cleansingTabs span {
	position: relative;
}

.prepareData__cleansingTabs .is-active::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: -0.5em;
	height: 3px;
	background: var(--color-red);
}

.prepareData__cleansingActions {
	display: flex;
	justify-content: flex-end;
	gap: 2em;
	color: #1688b4;
	font-weight: bold;
	font-size: 0.9em;
}


/* SQL表示
-------------------------------------- */

.prepareData__cleansingQuery {
	display: flex;
	align-items: center;
	gap: 1em;
	padding: 0.7em;
	white-space: nowrap;
	overflow: hidden;
}

.prepareData__cleansingQuery code {
	font-family: inherit;
	color: #333;
}


/* 表
-------------------------------------- */

.prepareData__cleansingTableWrap {
	position: relative;
	overflow: hidden;
}

.prepareData__cleansingTable {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	color: #48535c;
}

.prepareData__cleansingTable th,
.prepareData__cleansingTable td {
	height: 2.15em;
	padding: 0.2em 0.6em;
	border-right: 1px solid #fff;
	border-bottom: 1px solid #fff;
	text-align: left;
	vertical-align: middle;
}

.prepareData__cleansingTable th {
	background: #dfe3e6;
	color: #3e4a52;
	font-weight: bold;
}

.prepareData__cleansingTable td {
	background: #eef0f2;
}

.prepareData__cleansingTable th:nth-child(1),
.prepareData__cleansingTable td:nth-child(1) {
	width: 39%;
}

.prepareData__cleansingTable th:nth-child(2),
.prepareData__cleansingTable td:nth-child(2) {
	width: 39%;
}

.prepareData__cleansingTable th:nth-child(3),
.prepareData__cleansingTable td:nth-child(3) {
	width: 22%;
}


/* 元データ */
.prepareData__before {
	position: relative;
	z-index: 2;
	display: inline-block;
	padding: 0 0.2em;
	border: 3px solid #f2a000;
	border-radius: 5px;
	background: #fff;
	line-height: 1.3;
}


/* クレンジング後 */
.prepareData__after {
	position: relative;
	z-index: 2;
	display: inline-block;
	padding: 0 0.2em;
	border: 3px solid #27b5ad;
	border-radius: 5px;
	background: #fff;
	line-height: 1.3;
}


/* 矢印
-------------------------------------- */

.prepareData__cleansingTable tr.is-mapping td:first-child {
	position: relative;
}

.prepareData__cleansingTable tr.is-mapping td:first-child::after {
	content: "";
	position: absolute;
	z-index: 1;

	left: 5.3em;
	top: 50%;

	width: calc(100% - 5.5em);
	height: 2px;

	background: #4e5559;

	transform: translateY(-50%);
}

.prepareData__cleansingTable tr.is-mapping td:first-child::before {
	content: "";
	position: absolute;
	z-index: 2;

	right: -1px;
	top: 50%;

	width: 0;
	height: 0;

	border-top: 7px solid transparent;
	border-bottom: 7px solid transparent;
	border-left: 11px solid #4e5559;

	transform: translateY(-50%);
}


/* 中央の説明文
-------------------------------------- */

.prepareData__cleansingMessage {
	position: absolute;
	z-index: 5;

	left: 10%;
	top: 21%;

	color: #6677d9;
	font-size: clamp(1.6rem, 1.3rem + 0.8vw, 2.5rem);
	font-weight: bold;
	line-height: 1.25;

	background: rgba(238, 240, 242, 0.92);
	padding: 0.3em 0.7em;
}

.prepareData__cleansingMessage strong {
	font-weight: bold;
}


/* ======================================
   Tablet / SP
====================================== */

@media screen and (max-width: 900px) {

	.prepareData__cleansing {
		overflow-x: auto;
	}

	.prepareData__cleansingToolbar,
	.prepareData__cleansingQuery,
	.prepareData__cleansingTableWrap {
		min-width: 850px;
	}

	.prepareData__cleansingActions {
		gap: 1em;
	}

}
/* ==========================================================
   Metadata Features
========================================================== */

.prepareData__metadataFeatures {
	display: grid;

	grid-template-columns:
		repeat(4, minmax(0, 1fr));

	gap: 15px;

	margin-bottom: 45px;
}


/* ----------------------------------------------------------
   Feature
---------------------------------------------------------- */

.prepareData__feature {
	display: grid;

	grid-template-columns:
		38px
		minmax(0, 1fr);

	gap: 13px;

	padding: 20px;

	border: 1px solid var(--prepare-line);
	border-radius: 10px;

	background: #fff;
}


/* ----------------------------------------------------------
   Feature Number
---------------------------------------------------------- */

.prepareData__featureNo {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 34px;
	height: 34px;

	border-radius: 4px;

	color: #fff;
	background: var(--dn-purple);

	font-size: clamp(1.1rem, 0.994rem + 0.282vw, 1.4rem);

	font-weight: 700;
	line-height: 1;
}


/* ----------------------------------------------------------
   h4
---------------------------------------------------------- */

.prepareData__feature h4 {
	margin: 3px 0 8px;
	color: var(--prepare-blue);
	font-size: clamp(1.4rem, 1.259rem + 0.376vw, 1.8rem);
	font-weight: 700;
	line-height: 1.45;
}


/* ----------------------------------------------------------
   Feature Text
---------------------------------------------------------- */

.prepareData__feature p {
	margin: 0;
	color: #555;
	font-size: clamp(1.4rem, 1.33rem + 0.188vw, 1.6rem);
	line-height: 1.7;
}


/* ==========================================================
   LLM Area
========================================================== */

.prepareData__llm {
	margin-top: 10px;

	padding: 35px;

	border: 1px solid var(--prepare-line);
	border-radius: 14px;

	background:
		linear-gradient(
			135deg,
			#f7f8fc 0%,
			#fff 100%
		);
}


/* ----------------------------------------------------------
   LLM Header
---------------------------------------------------------- */

.prepareData__llmHeader {
	margin-bottom: 20px;
}


.prepareData__llmHeader p {
	margin: 0;

	color: var(--prepare-blue);

	font-size: clamp(16px, 1.5vw, 21px);
	font-weight: 700;
	line-height: 1.5;
}


.prepareData__llmHeader strong {
	color: var(--prepare-red);
	font-weight: 700;
}


/* ==========================================================
   Figure
========================================================== */

.prepareData__figure {
	margin: 0;
}


/* ----------------------------------------------------------
   Image
---------------------------------------------------------- */

.prepareData__figure img {
	display: block;

	width: 100%;
	height: auto;

	border: 1px solid var(--prepare-line);
	border-radius: 8px;

	background: #fff;
}


/* ----------------------------------------------------------
   Caption
---------------------------------------------------------- */

.prepareData__figure figcaption {
	margin-top: 12px;

	color: #666;

	font-size: 12px;
	line-height: 1.7;
}


/* ==========================================================
   AI Flow
========================================================== */

.prepareData__aiFlow {
	display: flex;

	align-items: center;
	justify-content: center;

	gap: 20px;

	margin-top: 45px;

	padding: 30px;

	border-radius: 14px;

	background:
		linear-gradient(
			90deg,
			rgba(238, 79, 74, .05),
			rgba(32, 45, 152, .06)
		);
}


/* ----------------------------------------------------------
   AI Item
---------------------------------------------------------- */

.prepareData__aiItem {
	display: flex;
	flex-direction: column;

	align-items: center;
	justify-content: center;

	width: 190px;
	min-height: 95px;

	padding: 15px;

	border: 1px solid var(--prepare-line);
	border-radius: 10px;

	background: #fff;

	text-align: center;
}


/* ----------------------------------------------------------
   English
---------------------------------------------------------- */

.prepareData__aiItem span {
	margin-bottom: 5px;

	color: var(--prepare-red);

	font-size: 10px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .08em;
}


/* ----------------------------------------------------------
   Japanese
---------------------------------------------------------- */

.prepareData__aiItem strong {
	color: var(--prepare-blue);

	font-size: 15px;
	font-weight: 700;
	line-height: 1.4;
}


/* ----------------------------------------------------------
   Last Item
---------------------------------------------------------- */

.prepareData__aiItem--last {
	border-color: rgba(32, 45, 152, .3);

	background: #f5f6ff;
}


/* ----------------------------------------------------------
   Arrow
---------------------------------------------------------- */

.prepareData__aiArrow {
	color: var(--prepare-blue);

	font-size: 25px;
	font-weight: 700;
	line-height: 1;
}


/* ==========================================================
   Tablet
========================================================== */

@media screen and (max-width: 1024px) {

	.prepareData {
		padding: 70px 0;
	}


	.prepareData__block {
		padding: 40px;
	}


	/* ------------------------------------------------------
	   Metadata 4列 → 2列
	------------------------------------------------------ */

	.prepareData__metadataFeatures {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

}


/* ==========================================================
   Smartphone
========================================================== */

@media screen and (max-width: 767px) {

	.prepareData {
		padding: 55px 0;
	}


	.prepareData__inner {
		width: 90%;
	}


	/* ======================================================
	   Section Header
	====================================================== */

	.prepareData__sectionHeader {
		margin-bottom: 35px;
	}


	.prepareData__mainTitle {
		margin-bottom: 15px;

		font-size: 30px;
	}


	.prepareData__mainTitle span {
		font-size: .65em;
	}


	.prepareData__lead {
		font-size: 20px;
		line-height: 1.6;
	}


	.prepareData__lead br {
		display: none;
	}


	/* ======================================================
	   Block
	====================================================== */

	.prepareData__block {
		padding: 25px 20px;

		border-radius: 12px;
	}


	.prepareData__block + .prepareData__block {
		margin-top: 30px;
	}


	/* ======================================================
	   Block Header
	====================================================== */

	.prepareData__blockHeader {
		gap: 12px;

		margin-bottom: 20px;
	}


	.prepareData__blockNo {
		width: 42px;
		height: 42px;

		font-size: 12px;
	}


	.prepareData__en {
		font-size: 10px;
	}


	.prepareData__blockHeader h3 {
		font-size: 23px;
	}


	/* ======================================================
	   Intro
	====================================================== */

	.prepareData__intro {
		margin-bottom: 30px;

		padding: 20px;
	}


	.prepareData__intro p {
		font-size: 14px;
		line-height: 1.8;
	}


	/* ======================================================
	   Processing
	====================================================== */

	.prepareData__processingHead h4 {
		font-size: 18px;
	}


	.prepareData__processingHead p {
		font-size: 13px;
		line-height: 1.7;
	}


	/* ------------------------------------------------------
	   2列 → 1列
	------------------------------------------------------ */

	.prepareData__processList {
		grid-template-columns: 1fr;

		gap: 8px;
	}


	.prepareData__processList li {
		grid-template-columns:
			36px
			minmax(0, 1fr);

		gap: 10px;

		min-height: 54px;

		padding: 9px 10px;

		font-size: 13px;
	}


	.prepareData__processNo {
		width: 31px;
		height: 31px;

		font-size: 10px;
	}


	/* ======================================================
	   Metadata
	====================================================== */

	.prepareData__metadataFeatures {
		grid-template-columns: 1fr;

		gap: 10px;

		margin-bottom: 30px;
	}


	.prepareData__feature {
		padding: 16px;
	}


	.prepareData__feature h4 {
		font-size: 14px;
	}


	.prepareData__feature p {
		font-size: 12px;
	}


	/* ======================================================
	   LLM
	====================================================== */

	.prepareData__llm {
		padding: 20px;

		border-radius: 10px;
	}


	.prepareData__llmHeader {
		margin-bottom: 15px;
	}


	.prepareData__llmHeader p {
		font-size: 16px;
		line-height: 1.6;
	}


	.prepareData__figure figcaption {
		font-size: 11px;
	}


	/* ======================================================
	   AI Flow
	====================================================== */

	.prepareData__aiFlow {
		flex-direction: column;

		gap: 10px;

		margin-top: 30px;

		padding: 20px;
	}


	.prepareData__aiItem {
		width: 100%;
		min-height: 75px;
	}


	.prepareData__aiArrow {
		transform: rotate(90deg);

		font-size: 21px;
	}

}

/* ==========================================================
   03.届ける
========================================================== */

.deliverData {
	--deliver-red: var(--color-red, #ee4f4a);
	--deliver-blue: var(--color-blue, #202d98);

	--deliver-text: #30343b;
	--deliver-gray: #f5f7fa;
	--deliver-light: #f7f8fc;
	--deliver-line: #dfe4eb;

	width: 100%;

	padding: 90px 0;

	color: var(--deliver-text);
	background: #f5f5f5;
}


.deliverData *,
.deliverData *::before,
.deliverData *::after {
	box-sizing: border-box;
}


/* ==========================================================
   Inner
========================================================== */

.deliverData__inner {
	width: min(92%, 1400px);
	margin-inline: auto;
}


/* ==========================================================
   Section Header
========================================================== */

.deliverData__sectionHeader {
	margin-bottom: 55px;
}


/* ----------------------------------------------------------
   h2
---------------------------------------------------------- */

.deliverData__mainTitle {
	display: flex;
	align-items: baseline;

	gap: .25em;

	margin: 0 0 22px;

	color: var(--deliver-blue);

	font-size: clamp(30px, 3.5vw, 48px);
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: .02em;
}


.deliverData__mainTitle span {
	color: var(--deliver-red);

	font-size: .62em;
	font-weight: 700;
}


/* ----------------------------------------------------------
   Lead
---------------------------------------------------------- */

.deliverData__lead {
	margin: 0;

	color: var(--deliver-text);

	font-size: clamp(21px, 2.1vw, 30px);
	font-weight: 700;
	line-height: 1.55;
}


/* ==========================================================
   Block
========================================================== */

.deliverData__block {
	padding: 50px;
	border: 1px solid var(--deliver-line);
	border-radius: 18px;
	background: #fff;
	box-shadow:	0 8px 30px rgba(30, 45, 100, .045);
	margin-top:50px;
}


.deliverData__block + .deliverData__block {
	margin-top: 55px;
}
.deliverData__block p.image80,
.connectSource__inner p.image80{
	margin:auto;
	width:80%;
}
@media(max-width:767px){
	.deliverData__block p.image80,
	.connectSource__inner p.image80{
		width:100%;
	}
}
.deliverData__block p.image60,
.connectSource__inner p.image60{
	margin:auto;
	width:60%;
}
@media(max-width:767px){
	.deliverData__block p.image60,
	.connectSource__inner p.image60{
		width:100%;
	}
}
.deliverData__block p.image50,
.connectSource__inner p.image50{
	margin:auto;
	width:50%;
}
@media(max-width:767px){
	.deliverData__block p.image50,
	.connectSource__inner p.image50{
		width:100%;
	}
}
.deliverData__block p img,
.connectSource__inner p img{
	max-width:100%;
}

/* ==========================================================
   Block Header
========================================================== */

.deliverData__blockHeader {
	display: flex;
	align-items: center;

	gap: 18px;

	margin-bottom: 28px;
}


/* number */

.deliverData__blockNo {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 52px;
	height: 52px;

	flex-shrink: 0;

	border-radius: 50%;

	color: #fff;
	background: var(--deliver-blue);

	font-size: 15px;
	font-weight: 700;
	line-height: 1;
}


/* English */

.deliverData__en {
	margin: 0 0 2px;
	color:#666;
	font-size: clamp(1.2rem, 1.13rem + 0.188vw, 1.4rem);
	font-weight: 700;
	line-height: 1.4;
	letter-spacing: .06em;
}


/* h3 */

.deliverData__blockHeader h3 {
	margin: 0;

	color: var(--deliver-blue);

	font-size: clamp(24px, 2.5vw, 36px);
	font-weight: 700;
	line-height: 1.4;
}


/* ==========================================================
   Intro
========================================================== */

.deliverData__intro {
	margin-bottom: 40px;

	padding: 28px 32px;

	border-radius: 12px;

	background:
		linear-gradient(
			135deg,
			#f7f8fc 0%,
			#fff 100%
		);
}


.deliverData__intro p {
	margin: 0;
	font-size: clamp(1.4rem, 1.259rem + 0.376vw, 1.8rem);
	line-height: 1.9;
}


.deliverData__intro p + p {
	margin-top: 7px;
}


.deliverData__intro strong {
	color: var(--deliver-blue);
	font-weight: 700;
}


/* ==========================================================
   Two Column Layout
========================================================== */

.deliverData__layout {
	display: grid;

	grid-template-columns:
		minmax(0, .9fr)
		minmax(0, 1.1fr);

	gap: 45px;

	align-items: center;
}


.deliverData__layout--reverse {
	grid-template-columns:
		minmax(0, 1.1fr)
		minmax(0, .9fr);
}


/* ==========================================================
   Content
========================================================== */

.deliverData__content {
	min-width: 0;
}


.deliverData__content > p {
	margin: 0;

	color: #555;

	font-size: 14px;
	line-height: 1.8;
}


/* ==========================================================
   h4
========================================================== */

.deliverData__subTitle {
	margin: 0 0 12px;

	color: var(--deliver-text);

	font-size: clamp(18px, 1.6vw, 23px);
	font-weight: 700;
	line-height: 1.5;
}


/* ==========================================================
   Protocol
========================================================== */

.deliverData__protocols {
	display: flex;
	flex-wrap: wrap;

	gap: 8px;

	margin-top: 25px;
}


.deliverData__protocols span {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	min-width: 65px;

	padding: 7px 12px;

	border-radius: 30px;

	color: var(--deliver-blue);
	background: #eef1ff;

	font-size: 12px;
	font-weight: 700;
	line-height: 1.3;
}


/* ==========================================================
   Tools
========================================================== */

.deliverData__tools {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 10px;

	margin-top: 25px;
}


.deliverData__tools div {
	display: flex;
	align-items: center;
	justify-content: center;

	min-height: 58px;

	padding: 10px;

	border: 1px solid var(--deliver-line);
	border-radius: 8px;

	background: #fff;
}


.deliverData__tools span {
	color: var(--deliver-text);

	font-size: 13px;
	font-weight: 700;
}


/* ==========================================================
   Figure
========================================================== */

.deliverData__figure {
	margin: 0;
}


.deliverData__figure img {
	display: block;

	width: 100%;
	height: auto;

	border: 1px solid var(--deliver-line);
	border-radius: 8px;

	background: #fff;
}


.deliverData__figure figcaption {
	margin-top: 10px;

	color: #666;

	font-size: 11px;
	line-height: 1.7;
}


/* ==========================================================
   Check List
========================================================== */

.deliverData__checkList {
	margin: 25px 0 0;
	padding: 0;

	list-style: none;
}


.deliverData__checkList li {
	margin: 0;

	padding: 9px 0 9px 25px;

	position: relative;

	border-bottom: 1px solid var(--deliver-line);

	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}


.deliverData__checkList li::before {
	content: "✓";

	position: absolute;

	top: 9px;
	left: 0;

	color: var(--deliver-red);

	font-weight: 700;
}


/* ==========================================================
   AI
========================================================== */

.deliverData__ai {
	display: grid;

	grid-template-columns:
		minmax(0, .8fr)
		minmax(0, 1.2fr);

	gap: 45px;

	align-items: center;
}


/* AI h4 */

.deliverData__aiText h4 {
	margin: 0 0 14px;

	color: var(--deliver-blue);

	font-size: clamp(18px, 1.7vw, 24px);
	font-weight: 700;
	line-height: 1.5;
}


.deliverData__aiText > p {
	margin: 0;

	color: #555;

	font-size: 14px;
	line-height: 1.8;
}


/* ==========================================================
   Catalog Features
========================================================== */

.deliverData__catalogFeatures {
	display: grid;

	grid-template-columns:
		repeat(2, minmax(0, 1fr));

	gap: 12px;

	margin-top: 25px;
}


.deliverData__catalogFeatures div {
	display: flex;
	flex-direction: column;

	justify-content: center;

	min-height: 90px;

	padding: 15px 18px;

	border: 1px solid var(--deliver-line);
	border-radius: 8px;

	background: #fff;
}


.deliverData__catalogFeatures strong {
	margin-bottom: 5px;

	color: var(--deliver-red);

	font-size: 10px;
	font-weight: 700;
	letter-spacing: .06em;
}


.deliverData__catalogFeatures span {
	color: var(--deliver-blue);

	font-size: 14px;
	font-weight: 700;
}


/* ==========================================================
   Security Grid
========================================================== */

.deliverData__securityGrid {
	display: grid;
	grid-template-columns:
		repeat(2, minmax(0, 1fr));
	gap: 15px;
}


/* ----------------------------------------------------------
   Security Card
---------------------------------------------------------- */

.deliverData__securityCard {
	min-width: 0;
	padding: 25px 20px;
	position: relative;

	border: 1px solid var(--deliver-line);
	border-radius: 12px;
	background: #fff;
}
.deliverData__securityCard p {
	font-weight: bold;
	padding:1em;
	color:var(--color-blue);
}


/* 上部ライン */

.deliverData__securityCard::before {
	content: "";

	display: block;

	width: 100%;
	height: 10px;

	position: absolute;

	top: 0;
	left: 0;

	border-radius: 12px 12px 0 0;

	background:
		linear-gradient(
			to right,
			var(--deliver-red),
			var(--deliver-blue)
		);
	background:var(--color-blue);
}


/* number */

.deliverData__securityNo {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	height: 32px;
	margin-bottom: 15px;
	border-radius: 50%;
	color: #fff;
	background: var(--deliver-blue);
	font-size: 10px;
	font-weight: 700;
}


/* h4 */

.deliverData__securityCard h4 {
	margin: 0 0 12px;
	color: var(--deliver-blue);
	font-size: clamp(1.6rem, 1.318rem + 0.751vw, 2.4rem);
	font-weight: 700;
	line-height: 1.4;
	padding-bottom:12px;
	border-bottom:2px solid #ccc;
}


/* text */

.deliverData__securityCard p {
	margin: 0 0 15px;
	color: var(--color-blue);
	font-size: clamp(1.4rem, 1.259rem + 0.376vw, 1.8rem);
	line-height: 1.7;
	border:1px solid #ddd;
	border-radius: 8px;
	background-image:linear-gradient(to right,#efefef,#afb3d9)
}


/* list */

.deliverData__securityCard ul {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	grid-template-columns:
		repeat(2, minmax(0, 1fr));
	margin-bottom: 1em;
}
.deliverData__securityCard ul.single {
	grid-template-columns:
		repeat(1, minmax(0, 1fr));
}

.deliverData__securityCard li {
	padding: 4px 0 4px 14px;
	position: relative;
	color: #444;
	font-size: clamp(1.4rem, 1.259rem + 0.376vw, 1.8rem);
	line-height: 1.55;
	margin-left:1em;
}


.deliverData__securityCard li::before {
	content: "";
	width: 5px;
	height: 5px;
	position: absolute;
	top: .75em;
	left: 0;
	border-radius: 50%;
	background: var(--deliver-red);
}


/* ==========================================================
   Security Figure
========================================================== */

.deliverData__securityFigure {
	margin: 40px 0 0;
	padding: 30px;
	border-radius: 12px;
	background: var(--deliver-light);
}


.deliverData__securityFigure img {
	display: block;
	width: 100%;
	height: auto;
	margin-inline: auto;
}


/* ==========================================================
   Tablet
========================================================== */

@media screen and (max-width: 1024px) {

	.deliverData {
		padding: 70px 0;
	}


	.deliverData__block {
		padding: 40px;
	}


	/* 2 column */

	.deliverData__layout,
	.deliverData__layout--reverse,
	.deliverData__ai {
		grid-template-columns: 1fr;

		gap: 35px;
	}


	/* security */

	.deliverData__securityGrid {
		grid-template-columns:
			repeat(2, minmax(0, 1fr));
	}

}


/* ==========================================================
   Smartphone
========================================================== */

@media screen and (max-width: 767px) {

	.deliverData {
		padding: 55px 0;
	}


	.deliverData__inner {
		width: 90%;
	}


	/* ======================================================
	   Section Header
	====================================================== */

	.deliverData__sectionHeader {
		margin-bottom: 35px;
	}


	.deliverData__mainTitle {
		margin-bottom: 15px;

		font-size: 30px;
	}


	.deliverData__mainTitle span {
		font-size: .65em;
	}


	.deliverData__lead {
		font-size: 20px;
		line-height: 1.6;
	}


	.deliverData__lead br {
		display: none;
	}


	/* ======================================================
	   Block
	====================================================== */

	.deliverData__block {
		padding: 25px 20px;

		border-radius: 12px;
	}


	.deliverData__block + .deliverData__block {
		margin-top: 30px;
	}


	/* ======================================================
	   Header
	====================================================== */

	.deliverData__blockHeader {
		gap: 12px;

		margin-bottom: 20px;
	}


	.deliverData__blockNo {
		width: 42px;
		height: 42px;

		font-size: 12px;
	}


	.deliverData__en {
		font-size: 10px;
	}


	.deliverData__blockHeader h3 {
		font-size: 23px;
	}


	/* ======================================================
	   Intro
	====================================================== */

	.deliverData__intro {
		margin-bottom: 30px;

		padding: 20px;
	}


	.deliverData__intro p {
		font-size: 14px;
		line-height: 1.8;
	}


	/* ======================================================
	   Tools
	====================================================== */

	.deliverData__tools {
		grid-template-columns: 1fr 1fr;
	}


	/* ======================================================
	   Catalog
	====================================================== */

	.deliverData__catalogFeatures {
		grid-template-columns: 1fr 1fr;
	}


	/* ======================================================
	   Security
	====================================================== */

	.deliverData__securityGrid {
		grid-template-columns: 1fr;

		gap: 10px;
	}


	.deliverData__securityCard {
		padding: 22px 18px;
	}


	.deliverData__securityFigure {
		margin-top: 25px;

		padding: 15px;
	}

}

.prepareData__metadataVisual {
	display: flex;
	align-items: flex-start;
	gap: 2rem;
}

.prepareData__metadataVisual img {
	width: calc(50% - 1rem);
	height: auto;
	display: block;
}
@media screen and (max-width: 767px) {
	.prepareData__metadataVisual {
		flex-direction: column;
		gap: 1.5rem;
	}

	.prepareData__metadataVisual img {
		width: 100%;
	}
}

/* ========================================
   Service Flow
======================================== */

.serviceFlow {
	padding: 100px 30px;
	background: #fff;
	color: #333;
}

.serviceFlow * {
	box-sizing: border-box;
}

.serviceFlow__inner {
	width: min(1400px, 100%);
	margin-inline: auto;
}


/* ----------------------------------------
   heading
---------------------------------------- */

.serviceFlow__heading {
	margin-bottom: 70px;
	text-align: center;
}

.serviceFlow__en {
	margin: 0 0 10px;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .18em;
	color: #1c3f95;
	margin-bottom:25px;
}

.serviceFlow__heading h2 {
	margin: 0 0 18px;
	font-size: clamp(28px, 3vw, 42px);
	font-weight: 700;
	line-height: 1.4;
	color: #202735;
	position: relative;
	padding-bottom:18px;
}
.serviceFlow__heading h2::after {
    content: "";
    position: absolute;
    left: 50%;
    bottom: 0;
    width: 90px;
    height: 3px;
    transform: translateX(-50%);
    background: linear-gradient(
			90deg,
			#e34a44 0%,
			#704bb6 50%,
			#286bc0 100%
		);
}
.serviceFlow__heading > p:last-child {
	margin: 0;
	font-size: clamp(1.4rem, 1.259rem + 0.376vw, 1.8rem);
	line-height: 2;
	color: #333;
}


/* ----------------------------------------
   body
---------------------------------------- */

.serviceFlow__body {
	position: relative;
}


/* ----------------------------------------
   period
---------------------------------------- */

.serviceFlow__periods {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	gap: 28px;
	margin-bottom: 18px;
	padding-inline: 0;
}

.serviceFlow__period {
	position: relative;
	height: 38px;
	border-top: 1px solid #8aa6dc;
}

.serviceFlow__period::before,
.serviceFlow__period::after {
	content: "";
	position: absolute;
	top: -1px;
	width: 1px;
	height: 8px;
	background: #8aa6dc;
}

.serviceFlow__period::before {
	left: 0;
}

.serviceFlow__period::after {
	right: 0;
}

.serviceFlow__period span {
	position: absolute;
	top: -40px;
	left: 50%;
	transform: translateX(-50%);
	padding: 0 15px;
	white-space: nowrap;
	background: #fff;
	font-size: clamp(1.4rem, 1.259rem + 0.376vw, 1.8rem);
	font-weight: 700;
	color: #3157a3;
}

.serviceFlow__period--poc {
	grid-column: 1 / 4;
}

.serviceFlow__period--trial {
	grid-column: 4 / 5;
}

@media(min-width:768px){
	span.forMobile{
		display: none;
	}
}
@media(max-width:767px){
	span.forMobile{
		display: block;
		text-align: center;
	}
}


/* ----------------------------------------
   list
---------------------------------------- */

.serviceFlow__list {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 28px;
	margin: 0;
	padding: 0;
	list-style: none;
}


/* ----------------------------------------
   item
---------------------------------------- */

.serviceFlow__item {
	position: relative;
	display: flex;
	flex-direction: column;
}


/* 矢印 */

.serviceFlow__item:not(:last-child)::after {
	content: "";
	position: absolute;
	z-index: 3;
	top: 31px;
	right: -20px;
	width: 14px;
	height: 14px;
	border-top: 3px solid #b5bbc4;
	border-right: 3px solid #b5bbc4;
	transform: rotate(45deg);
}


/* ----------------------------------------
   title
---------------------------------------- */

.serviceFlow__title {
	position: relative;
	display: flex;
	align-items: stretch;
	height: 72px;
	margin-bottom: 18px;
	background: #f3f5f8;
	overflow: hidden;
}

.serviceFlow__title::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 3px;
	background: linear-gradient(
		90deg,
		#df323d 0%,
		#7952b3 50%,
		#2869bb 100%
	);
}

.serviceFlow__no {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 54px;
	flex-shrink: 0;

	font-size: 20px;
	font-weight: 700;
	color: #fff;

	background:
		linear-gradient(
			160deg,
			#28369c 0%,
			#4320a0 100%
		);
}

.serviceFlow__title h3 {
	display: flex;
	align-items: center;
	margin: 0;
	padding: 0 18px;
	font-size: clamp(1.6rem, 1.389rem + 0.563vw, 2.2rem);
	font-weight: 700;
	color: #303642;
}


/* ----------------------------------------
   card
---------------------------------------- */

.serviceFlow__card {
	position: relative;
	flex-grow: 1;
	min-height: 245px;
	padding: 30px 24px;

	background:
		linear-gradient(
			145deg,
			#fafbfc 0%,
			#f3f5f8 100%
		);

	border: 1px solid #e3e7ed;
	border-radius: 4px;
}

.serviceFlow__card::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 3px;
	height: 100%;

	background: linear-gradient(
		180deg,
		#2a4ca2,
		#6b4ab4
	);
}

.serviceFlow__card ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.serviceFlow__card li {
	position: relative;
	margin-bottom: 24px;
	padding-left: 18px;
	font-size: clamp(1.4rem, 1.259rem + 0.376vw, 1.8rem);
	font-weight: 500;
	line-height: 1.65;
}

.serviceFlow__card li:last-child {
	margin-bottom: 0;
}

.serviceFlow__card li::before {
	content: "";
	position: absolute;
	top: .7em;
	left: 0;

	width: 5px;
	height: 5px;
	border-radius: 50%;
	background: #3157a3;
}

.serviceFlow__card small {
	display: block;
	margin-top: 3px;
	font-size: clamp(1.2rem, 1.13rem + 0.188vw, 1.4rem);
	font-weight: 400;
	color: #777f8d;
}


/* ----------------------------------------
   trial note
---------------------------------------- */

.serviceFlow__item--trial {
	position: relative;
}

.serviceFlow__note {
	position: absolute;
	z-index: 5;
	top: 49px;
	left: 72px;

	margin: 0;
	font-size: clamp(0.9rem, 0.794rem + 0.282vw, 1.2rem);
	color: #555;
}

.serviceFlow__note span::before {
	content: "★";
	margin-right: 2px;
	font-size: clamp(0.9rem, 0.794rem + 0.282vw, 1.2rem);
}


/* ----------------------------------------
   本番導入
---------------------------------------- */

.serviceFlow__item--production .serviceFlow__title::after {
	background: linear-gradient(
		90deg,
		#3157a3,
		#2581ba
	);
}

.serviceFlow__item--production .serviceFlow__card::before {
	background: linear-gradient(
		180deg,
		#3157a3,
		#2581ba
	);
}


/* ========================================
   Tablet
======================================== */

@media screen and (max-width: 1100px) {

	.serviceFlow {
		padding-inline: 24px;
	}

	.serviceFlow__list {
		gap: 18px;
	}

	.serviceFlow__periods {
		gap: 18px;
	}

	.serviceFlow__title h3 {
		padding-inline: 12px;
		font-size: 15px;
	}

	.serviceFlow__no {
		width: 45px;
		font-size: 17px;
	}

	.serviceFlow__card {
		padding: 25px 18px;
	}

	.serviceFlow__card li {
		font-size: 14px;
	}

	.serviceFlow__item:not(:last-child)::after {
		right: -13px;
	}

}


/* ========================================
   Mobile
======================================== */

@media screen and (max-width: 767px) {

	.serviceFlow {
		padding: 70px 20px;
	}

	.serviceFlow__heading {
		margin-bottom: 45px;
		text-align: left;
	}

	.serviceFlow__heading h2 {
		font-size: 28px;
	}

	.serviceFlow__heading > p:last-child {
		font-size: 14px;
		line-height: 1.9;
	}

	.pc {
		display: none;
	}


	/* ----------------------------------------
	   期間表示
	   PCでは工程上部のバー、
	   モバイルでは「期間の目安」としてカード表示
	---------------------------------------- */

	.serviceFlow__periods {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 10px 12px;
		margin: 0 0 28px;
		padding: 0;
	}

	.serviceFlow__periods::before {
		content: "期間の目安";
		grid-column: 1 / -1;
		margin-bottom: 2px;
		font-size: 12px;
		font-weight: 700;
		letter-spacing: .08em;
		color: #68758c;
	}

	.serviceFlow__period {
		position: static;
		display: flex;
		align-items: center;
		justify-content: center;
		grid-column: auto;
		height: auto;
		min-height: 44px;
		padding: 8px 12px;
		border: 1px solid #cbd7ed;
		border-radius: 6px;
		background:
			linear-gradient(
				135deg,
				#f8faff 0%,
				#f1f5fc 100%
			);
	}

	.serviceFlow__period::before,
	.serviceFlow__period::after {
		display: none;
	}

	.serviceFlow__period span {
		position: static;
		transform: none;
		padding: 0;
		white-space: nowrap;
		background: transparent;
		font-size: 14px;
		font-weight: 700;
		line-height: 1.4;
		color: #3157a3;
	}

	.serviceFlow__period--poc,
	.serviceFlow__period--trial {
		grid-column: auto;
	}


	/* 縦型フロー */

	.serviceFlow__list {
		position: relative;
		display: block;
	}

	.serviceFlow__list::before {
		content: "";
		position: absolute;
		top: 35px;
		bottom: 35px;
		left: 25px;

		width: 1px;
		background: #d7dce5;
	}


	.serviceFlow__item {
		position: relative;
		display: block;
		margin-bottom: 34px;
		padding-left: 0;
	}

	.serviceFlow__item:last-child {
		margin-bottom: 0;
	}


	/* 横向き矢印を縦向きに */

	.serviceFlow__item:not(:last-child)::after {
		top: auto;
		right: auto;
		bottom: -22px;
		left: 20px;

		width: 10px;
		height: 10px;

		border-top: 0;
		border-right: 2px solid #aeb5c0;
		border-bottom: 2px solid #aeb5c0;

		transform: rotate(45deg);
	}


	.serviceFlow__title {
		height: 64px;
		margin-bottom: 10px;
	}

	.serviceFlow__no {
		width: 52px;
		font-size: 17px;
	}

	.serviceFlow__title h3 {
		padding-inline: 18px;
		font-size: 17px;
	}


	.serviceFlow__card {
		min-height: 0;
		margin-left: 52px;
		padding: 23px 20px;
	}

	.serviceFlow__card li {
		margin-bottom: 16px;
		font-size: 14px;
	}


	.serviceFlow__note {
		top: 41px;
		left: 69px;
		font-size: 8px;
	}

}

/* ========================================
   Service Flow - Desktop safeguard
   768px以上では必ず横5列に戻す
======================================== */
@media screen and (min-width: 768px) {

	.serviceFlow__list {
		display: grid !important;
		grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
		gap: clamp(18px, 2vw, 28px);
	}

	.serviceFlow__item {
		display: flex !important;
		flex-direction: column;
		margin-bottom: 0;
		padding-left: 0;
	}

	.serviceFlow__list::before {
		content: none !important;
		display: none !important;
	}

	.serviceFlow__item:not(:last-child)::after {
		top: 31px;
		right: -20px;
		bottom: auto;
		left: auto;
		width: 14px;
		height: 14px;
		border-top: 3px solid #b5bbc4;
		border-right: 3px solid #b5bbc4;
		border-bottom: 0;
		transform: rotate(45deg);
	}

	.serviceFlow__title {
		height: 72px;
		margin-bottom: 18px;
	}

	.serviceFlow__card {
		flex-grow: 1;
		min-height: 245px;
		margin-left: 0;
		padding: 30px 24px;
	}

	.serviceFlow__periods {
		display: grid !important;
		grid-template-columns: repeat(5, 1fr);
		gap: clamp(18px, 2vw, 28px);
		margin-bottom: 18px;
		padding-inline: 0;
	}

	.serviceFlow__periods::before {
		content: none !important;
		display: none !important;
	}

	.serviceFlow__period {
		position: relative;
		display: block;
		grid-column: auto;
		height: 38px;
		min-height: 0;
		padding: 0;
		border: 0;
		border-top: 1px solid #8aa6dc;
		border-radius: 0;
		background: transparent;
	}

	.serviceFlow__period::before,
	.serviceFlow__period::after {
		content: "";
		display: block;
		position: absolute;
		top: -1px;
		width: 1px;
		height: 8px;
		background: #8aa6dc;
	}

	.serviceFlow__period::before {
		left: 0;
	}

	.serviceFlow__period::after {
		right: 0;
	}

	.serviceFlow__period span {
		position: absolute;
		top: -40px;
		left: 50%;
		transform: translateX(-50%);
		padding: 0 15px;
		white-space: nowrap;
		background: #fff;
		font-size: clamp(1.4rem, 1.259rem + 0.376vw, 1.8rem);
		font-weight: 700;
		line-height: normal;
		color: #3157a3;
	}

	.serviceFlow__period--poc {
		grid-column: 1 / 4;
	}

	.serviceFlow__period--trial {
		grid-column: 4 / 5;
	}

}

/* 768〜1100pxは既存のタブレット間隔を維持 */
@media screen and (min-width: 768px) and (max-width: 1100px) {

	.serviceFlow__item:not(:last-child)::after {
		right: -13px;
	}

	.serviceFlow__card {
		padding: 25px 18px;
	}

}

/* ==========================================
   PoC Support
========================================== */

.pocSupport {
	padding: 100px 30px;
	background: #fff;
}

.pocSupport *,
.pocSupport *::before,
.pocSupport *::after {
	box-sizing: border-box;
}

.pocSupport__inner {
	width: min(1440px, 100%);
	margin-inline: auto;
}


/* ==========================================
   heading
========================================== */

.pocSupport h2 {
	position: relative;

	margin: 0 0 25px;
	padding-bottom: 18px;

	color: #262d38;

	font-size: clamp(28px, 3vw, 40px);
	font-weight: 700;
	line-height: 1.4;

	text-align: center;
}

.pocSupport h2::after {
	content: "";

	position: absolute;
	left: 50%;
	bottom: 0;

	width: 90px;
	height: 3px;

	transform: translateX(-50%);

	background:
		linear-gradient(
			90deg,
			#e34a44 0%,
			#704bb6 50%,
			#286bc0 100%
		);
}

.pocSupport__lead {
	margin: 0 0 50px;

	color: #606671;

	font-size: 16px;
	line-height: 1.9;

	text-align: center;
}


/* ==========================================
   table wrapper
========================================== */

.pocSupport__tableWrap {
	width: 100%;
	overflow-x: auto;

	border-radius: 5px;

	box-shadow:
		0 7px 30px rgba(30, 48, 80, .07);

	-webkit-overflow-scrolling: touch;
}


/* ==========================================
   table
========================================== */

.pocSupport__table {
	width: 100%;
	min-width: 1200px;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	background: #fff;
	color: #343942;
	font-size: clamp(1.4rem, 1.33rem + 0.188vw, 1.6rem);
	line-height: 1.65;
}


/* ------------------------------------------
   width
------------------------------------------ */

.pocSupport__table .col-no {
	width: 55px;
}

.pocSupport__table .col-phase {
	width: 130px;
}

.pocSupport__table .col-item {
	width: 190px;
}

.pocSupport__table .col-work {
	width: auto;
}

.pocSupport__table .col-role {
	width: 82px;
}

.pocSupport__table .col-output {
	width: 210px;
}


/* ==========================================
   header
========================================== */

.pocSupport__table thead th {
	padding: 14px 12px;
	border-right: 1px solid rgba(255,255,255,.25);
	border-bottom: 1px solid rgba(255,255,255,.35);
	background:
		linear-gradient(
			135deg,
			#33249a 0%,
			#2553aa 100%
		);

	color: #fff;
	font-size: clamp(1.4rem, 1.259rem + 0.376vw, 1.8rem);
	font-weight: 600;
	text-align: center;
	vertical-align: middle;
}

.pocSupport__table thead tr:first-child th {
	height: 58px;
}

.pocSupport__table thead tr:last-child th {
	padding-top: 8px;
	padding-bottom: 8px;

	background:
		linear-gradient(
			135deg,
			#4230a2 0%,
			#3164b8 100%
		);
}

.pocSupport__table thead th:last-child {
	border-right: 0;
}


/* ==========================================
   cells
========================================== */

.pocSupport__table tbody td {
	padding: 24px 22px;

	border-right: 1px solid #dce1e8;
	border-bottom: 1px solid #dce1e8;

	background: #fff;

	vertical-align: middle;
}

.pocSupport__table tbody td:first-child {
	border-left: 1px solid #dce1e8;
}


/* ------------------------------------------
   no
------------------------------------------ */

.pocSupport__no {
	padding-inline: 8px !important;
	color: #68707d;
	font-size: clamp(1.3rem, 1.194rem + 0.282vw, 1.6rem);
	font-weight: 600;
	text-align: center;
}


/* ==========================================
   phase
========================================== */

.pocSupport__phase {
	position: relative;
	padding-inline: 18px !important;
	color: #28303c;
	font-size: clamp(1.4rem, 1.259rem + 0.376vw, 1.8rem);
	font-weight: 700;
	text-align: center;
	background:
		linear-gradient(
			135deg,
			#f7f8fc 0%,
			#f1f4fa 100%
		) !important;
}

/* フェーズ間の矢印 */

.pocSupport__phase--arrow::after {
	content: "";

	position: absolute;
	z-index: 5;

	left: 50%;
	bottom: -13px;

	width: 0;
	height: 0;

	transform: translateX(-50%);

	border-left: 14px solid transparent;
	border-right: 14px solid transparent;
	border-top: 14px solid #303d9f;
}


/* ==========================================
   item
========================================== */

.pocSupport__item {
	color: #303641;
	font-size: clamp(1.4rem, 1.259rem + 0.376vw, 1.8rem);
	font-weight: 600;
}


/* ==========================================
   work
========================================== */

.pocSupport__work {
	padding: 24px 28px !important;
}

.pocSupport__workTitle {
	margin: 0 0 10px;
	font-size: clamp(1.4rem, 1.259rem + 0.376vw, 1.8rem);
	font-weight: 600;
}

.pocSupport__work ul,
.pocSupport__output ul {
	margin: 0;
	padding: 0;

	list-style: none;
}

.pocSupport__work li,
.pocSupport__output li {
	position: relative;

	margin-bottom: 5px;
	padding-left: 16px;
}

.pocSupport__work li:last-child,
.pocSupport__output li:last-child {
	margin-bottom: 0;
}

.pocSupport__work li::before,
.pocSupport__output li::before {
	content: "";

	position: absolute;

	top: .72em;
	left: 1px;

	width: 5px;
	height: 5px;

	border-radius: 50%;

	background: #4058aa;
}


/* ==========================================
   example
========================================== */

.pocSupport__example {
	margin: 8px 0 0 16px;
	color: #747c88;
	font-size: clamp(1.2rem, 1.13rem + 0.188vw, 1.4rem);
	line-height: 1.6;
}


/* ==========================================
   role
========================================== */

.pocSupport__role {
	padding: 20px 8px !important;
	color: #606875;
	font-size: clamp(1.4rem, 1.048rem + 0.939vw, 2.4rem);
	font-weight: 500;
	text-align: center;
}

.pocSupport__role--main {
	color: #304ba3;
	font-weight: 700;
}


/* ==========================================
   output
========================================== */

.pocSupport__output {
	color: #353b45;
	font-size: clamp(1.2rem, 1.059rem + 0.376vw, 1.6rem);
	font-weight: 500;
	background: #fafbfc !important;
}


/* ==========================================
   hover
========================================== */

@media (hover: hover) {

	.pocSupport__table tbody tr:hover > td:not(.pocSupport__phase) {
		background: #f8faff;
	}

}


/* ==========================================
   note
========================================== */

.pocSupport__note {
	margin: 13px 0 0;
	color: #7a818c;
	font-size: clamp(1.2rem, 1.13rem + 0.188vw, 1.4rem);
	text-align: right;
}


/* ==========================================
   tablet
========================================== */

@media screen and (max-width: 1000px) {

	.pocSupport {
		padding-inline: 24px;
	}

}


/* ==========================================
   mobile
========================================== */

@media screen and (max-width: 767px) {

	.pocSupport {
		padding: 70px 20px;
	}

	.pocSupport h2 {
		font-size: 28px;
	}

	.pocSupport__lead {
		margin-bottom: 35px;

		font-size: 14px;
		line-height: 1.8;
	}

	.pocSupport__tableWrap {
		position: relative;
	}

	.pocSupport__table {
		min-width: 1100px;

		font-size: 13px;
	}

	.pocSupport__table tbody td {
		padding: 20px 18px;
	}

	.pocSupport__note {
		text-align: left;
	}

}

/* ========================================
   役務支援メニュー
======================================== */

.serviceSupport {
	padding: 100px 30px;
	background: #fff;
	color: #30343b;
}

.serviceSupport *,
.serviceSupport *::before,
.serviceSupport *::after {
	box-sizing: border-box;
}

.serviceSupport__inner {
	width: min(1440px, 100%);
	margin-inline: auto;
}


/* ========================================
   heading
======================================== */

.serviceSupport h2 {
	position: relative;

	margin: 0 0 25px;
	padding-bottom: 18px;

	color: #262d38;

	font-size: clamp(28px, 3vw, 40px);
	font-weight: 700;
	line-height: 1.4;

	text-align: center;
}

.serviceSupport h2::after {
	content: "";

	position: absolute;
	left: 50%;
	bottom: 0;

	width: 90px;
	height: 3px;

	transform: translateX(-50%);

	background:
		linear-gradient(
			90deg,
			#e34a44 0%,
			#704bb6 50%,
			#286bc0 100%
		);
}


/* ========================================
   lead
======================================== */

.serviceSupport__lead {
	margin: 0 0 50px;

	color: #606671;

	font-size: 16px;
	line-height: 1.9;

	text-align: center;
}


/* ========================================
   table wrapper
======================================== */

.serviceSupport__tableWrap {
	width: 100%;

	border-radius: 5px;
	overflow: hidden;

	box-shadow:
		0 7px 30px rgba(30, 48, 80, .07);
}


/* ========================================
   table
======================================== */

.serviceSupport__table {
	width: 100%;
	border-collapse: separate;
	border-spacing: 0;
	table-layout: fixed;
	background: #fff;
	color: #343942;
	font-size: clamp(1.4rem, 1.33rem + 0.188vw, 1.6rem);
	line-height: 1.8;
}


/* column */

.serviceSupport__colMenu {
	width: 34%;
}

.serviceSupport__colDescription {
	width: 66%;
}


/* ========================================
   thead
======================================== */

.serviceSupport__table thead th {
	padding: 20px 25px;

	border-right: 1px solid rgba(255, 255, 255, .25);

	background:
		linear-gradient(
			135deg,
			#33249a 0%,
			#2553aa 100%
		);

	color: #fff;

	font-size: 15px;
	font-weight: 700;

	text-align: center;
	vertical-align: middle;
}

.serviceSupport__table thead th:last-child {
	border-right: 0;
}


/* ========================================
   tbody
======================================== */

.serviceSupport__table tbody th,
.serviceSupport__table tbody td {
	padding: 29px 30px;

	border-right: 1px solid #dce1e8;
	border-bottom: 1px solid #dce1e8;

	background: #fff;

	vertical-align: middle;
}

.serviceSupport__table tbody th {
	border-left: 1px solid #dce1e8;
	color: #303641;
	font-size: clamp(1.4rem, 1.259rem + 0.376vw, 1.8rem);
	font-weight: 600;
	text-align: left;
}

.serviceSupport__table tbody td {
	color: #444b56;
}

.serviceSupport__table tbody td:last-child {
	border-right: 1px solid #dce1e8;
}


/* ========================================
   hover
======================================== */

@media (hover: hover) {

	.serviceSupport__table tbody tr:hover th,
	.serviceSupport__table tbody tr:hover td {
		background: #f8faff;
	}

	.serviceSupport__table tbody tr:hover th {
		color: #3157a3;
	}

}


/* ========================================
   note
======================================== */

.serviceSupport__notes {
	margin-top: 22px;
	color: #656d79;
	font-size: clamp(1.2rem, 1.13rem + 0.188vw, 1.4rem);
	line-height: 1.8;
}

.serviceSupport__notes p {
	margin: 0 0 4px;
}

.serviceSupport__notesBottom {
	margin-top: 45px;
}


/* ========================================
   mobile
======================================== */

@media screen and (max-width: 767px) {

	.serviceSupport {
		padding: 70px 20px;
	}

	.serviceSupport h2 {
		font-size: 28px;
	}

	.serviceSupport__lead {
		margin-bottom: 35px;

		font-size: 14px;
		line-height: 1.8;

		text-align: left;
	}


	/* table */

	.serviceSupport__colMenu {
		width: 37%;
	}

	.serviceSupport__colDescription {
		width: 63%;
	}

	.serviceSupport__table {
		font-size: 13px;
		line-height: 1.7;
	}

	.serviceSupport__table thead th {
		padding: 14px 10px;
		font-size: 13px;
	}

	.serviceSupport__table tbody th,
	.serviceSupport__table tbody td {
		padding: 18px 14px;
	}

	.serviceSupport__table tbody th {
		font-size: 13px;
	}


	/* note */

	.serviceSupport__notes {
		margin-top: 18px;
		font-size: 11px;
	}

	.serviceSupport__notesBottom {
		margin-top: 30px;
	}

}
/* =========================================================
   CASE STUDIES & USE CASES
   事例・ユースケース一覧ページ
========================================================= */


/* =========================================================
   Hero
========================================================= */

.caseUseHero {
	position: relative;
	width: 100%;
	height: 200px;
	padding: 20px 0;

	overflow: hidden;

	background:
		linear-gradient(
			to right,
			rgba(255, 255, 255, 1) 0%,
			rgba(255, 255, 255, .90) 35%,
			rgba(255, 255, 255, .40) 72%,
			rgba(255, 255, 255, .15) 100%
		),
		url("../images/bg_case.webp")
		center center / cover no-repeat;

	box-shadow:
		0 3px 12px rgba(0, 0, 0, .25);
}


/* ---------------------------------------------------------
   inner
--------------------------------------------------------- */

.caseUseHero__inner {
	display: flex;
	align-items: center;

	width: min(92%, 1400px);
	height: 100%;

	margin-inline: auto;
}


/* ---------------------------------------------------------
   heading
--------------------------------------------------------- */

.caseUseHero__heading {
	position: relative;

	padding-left: 28px;
}


/* 左側のライン */

.caseUseHero__heading::before {
	content: "";

	position: absolute;
	top: 0;
	left: 0;

	width: 4px;
	height: 150px;

	border-radius: 999px;

	background:
		linear-gradient(
			to bottom,
			#f2554a 0%,
			#a54fc4 52%,
			#2144c7 100%
		);
}


/* 英文 */

.caseUseHero__eyebrow {
	display: inline-block;

	margin: 0 0 14px;

	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1;

	letter-spacing: .22em;

	background:
		linear-gradient(
			90deg,
			#f2554a 0%,
			#a54fc4 52%,
			#2144c7 100%
		);

	-webkit-background-clip: text;
	background-clip: text;

	color: transparent;
}


/* h1 */

.caseUseHero__heading h1 {
	margin: 0;

	color: #222b36;

	font-size:
		clamp(
			2.4rem,
			1.555rem + 2.254vw,
			4.8rem
		);

	font-weight: 700;
	line-height: 1.2;

	letter-spacing: .04em;
}


/* リード */

.caseUseHero__lead {
	margin: 10px 0 0;

	color: #4d5662;

	font-size: 1.5rem;
	font-weight: 500;
	line-height: 1.5;
}


/* =========================================================
   Archive
========================================================= */

.caseUseArchive {
	width: 100%;

	padding: 80px 30px 110px;

	background: #fff;
}


.caseUseArchive *,
.caseUseArchive *::before,
.caseUseArchive *::after {
	box-sizing: border-box;
}


/* ---------------------------------------------------------
   inner
--------------------------------------------------------- */

.caseUseArchive__inner {
	width: min(1400px, 100%);

	margin-inline: auto;
}


/* =========================================================
   Filter
========================================================= */

.caseUseArchive__filter {
	display: flex;
	justify-content: flex-end;
	align-items: center;

	gap: 14px;

	margin-bottom: 40px;
}


.caseUseArchive__filter[hidden] {
	display: none;
}


/* label */

.caseUseArchive__filterLabel {
	color: #515761;

	font-size: 1.4rem;
	font-weight: 600;
}


/* select wrapper */

.caseUseArchive__selectWrap {
	position: relative;

	width: 240px;
}


/* arrow */

.caseUseArchive__selectWrap::after {
	content: "";

	position: absolute;

	top: 50%;
	right: 18px;

	width: 8px;
	height: 8px;

	border-right: 2px solid #39404c;
	border-bottom: 2px solid #39404c;

	transform:
		translateY(-70%)
		rotate(45deg);

	pointer-events: none;
}


/* select */

.caseUseArchive__select {
	width: 100%;
	height: 50px;

	padding:
		0
		45px
		0
		18px;

	border: 1px solid #c9ced6;
	border-radius: 3px;

	color: #30343b;
	background: #fff;

	font-size: 1.5rem;
	font-weight: 600;

	cursor: pointer;

	appearance: none;

	transition:
		border-color .25s ease,
		box-shadow .25s ease;
}


.caseUseArchive__select:hover {
	border-color: #808997;
}


.caseUseArchive__select:focus-visible {
	outline: none;

	border-color: #243b97;

	box-shadow:
		0 0 0 3px
		rgba(36, 59, 151, .12);
}


/* =========================================================
   Grid
========================================================= */

.caseUseArchive__grid {
	display: grid;

	grid-template-columns:
		repeat(3, minmax(0, 1fr));

	gap: 45px 36px;
}


/* =========================================================
   Item
========================================================= */

.caseUseItem {
	min-width: 0;
}


.caseUseItem[hidden] {
	display: none;
}


/* =========================================================
   Link
========================================================= */

.caseUseItem__link {
	display: flex;
	flex-direction: column;

	height: 100%;

	overflow: hidden;

	border:
		1px solid
		#d8dce3;

	border-radius: 5px;

	color: #30343b;
	background: #fff;

	text-decoration: none;

	box-shadow:
		0 5px 18px
		rgba(20, 35, 70, .06);

	transition:
		border-color .3s ease,
		box-shadow .3s ease;
}


/*
位置は動かさず、
シャドウ・ボーダーだけ変化
*/

@media (hover: hover) {

	.caseUseItem__link:hover {
		border-color: #aeb6c4;

		box-shadow:
			0 10px 28px
			rgba(20, 35, 70, .14);
	}

}


/* =========================================================
   Thumbnail
   16 : 9
========================================================= */

.caseUseItem__thumb {
	position: relative;

	width: 100%;

	aspect-ratio: 16 / 9;

	overflow: hidden;

	background: #eef0f3;
}


.caseUseItem__thumb img {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform .45s
		cubic-bezier(
			.22,
			1,
			.36,
			1
		);
}


@media (hover: hover) {

	.caseUseItem__link:hover
	.caseUseItem__thumb img {
		transform: scale(1.035);
	}

}


/* =========================================================
   Body
========================================================= */

.caseUseItem__body {
	display: flex;
	flex-direction: column;

	flex-grow: 1;

	padding:
		25px
		25px
		23px;
}


/* =========================================================
   Category
========================================================= */

.caseUseItem__category {
	align-self: flex-start;

	margin: 0 0 17px;

	padding:
		5px
		13px;

	border:
		1px solid
		#e55751;

	border-radius: 3px;

	color: #df4842;

	background: #fff;

	font-size: 1.3rem;
	font-weight: 700;
	line-height: 1.4;
}


/* =========================================================
   Title
========================================================= */

.caseUseItem__title {
	margin:
		0
		0
		14px;

	color: #252b35;

	font-size:
		clamp(
			1.7rem,
			1.594rem + .282vw,
			2rem
		);

	font-weight: 700;
	line-height: 1.7;
}


/* =========================================================
   Text
========================================================= */

.caseUseItem__text {
	margin:
		0
		0
		24px;

	color: #626975;

	font-size:
		clamp(
			1.4rem,
			1.33rem + .188vw,
			1.6rem
		);

	line-height: 1.85;
}


/* =========================================================
   More
========================================================= */

.caseUseItem__more {
	position: relative;

	display: flex;
	align-items: center;

	margin:
		auto
		0
		0;

	padding-top: 17px;

	border-top:
		1px solid
		#e1e4e9;

	color: #283d94;

	font-size: 1.4rem;
	font-weight: 700;
	line-height: 1.5;
}


/* circle */

.caseUseItem__more::before {
	content: "";

	position: absolute;

	top: calc(50% + 8px);
	right: 0;

	width: 25px;
	height: 25px;

	border:
		1px solid
		#263f9c;

	border-radius: 50%;

	transform:
		translateY(-50%);

	transition:
		background-color .25s ease;
}


/* arrow */

.caseUseItem__more::after {
	content: "";

	position: absolute;

	top: calc(50% + 8px);
	right: 10px;

	width: 6px;
	height: 6px;

	border-top:
		1px solid
		#263f9c;

	border-right:
		1px solid
		#263f9c;

	transform:
		translateY(-50%)
		rotate(45deg);

	transition:
		border-color .25s ease;
}


/* hover */

@media (hover: hover) {

	.caseUseItem__link:hover
	.caseUseItem__more {
		color: #e34c46;
	}


	.caseUseItem__link:hover
	.caseUseItem__more::before {
		border-color: #e34c46;

		background: #e34c46;
	}


	.caseUseItem__link:hover
	.caseUseItem__more::after {
		border-color: #fff;
	}

}


/* =========================================================
   Tablet
========================================================= */

@media screen and (max-width: 1024px) {

	.caseUseArchive {
		padding:
			70px
			24px
			90px;
	}


	.caseUseArchive__grid {
		grid-template-columns:
			repeat(
				2,
				minmax(0, 1fr)
			);

		gap:
			35px
			25px;
	}

}


/* =========================================================
   Smartphone
========================================================= */

@media screen and (max-width: 767px) {

	/* Hero */

	.caseUseHero {
		height: auto;

		min-height: 170px;

		padding:
			30px
			0;

		background-position:
			center center;
	}


	.caseUseHero__inner {
		width:
			calc(
				100% - 32px
			);
	}


	.caseUseHero__heading {
		padding-left: 20px;
	}


	.caseUseHero__heading::before {
		width: 3px;
		height: 125px;
	}


	.caseUseHero__eyebrow {
		margin-bottom: 10px;

		font-size: 1.1rem;

		letter-spacing: .16em;
	}


	.caseUseHero__heading h1 {
		font-size: 3rem;
	}


	.caseUseHero__lead {
		margin-top: 13px;

		font-size: 1.3rem;
		line-height: 1.7;
	}


	/* Archive */

	.caseUseArchive {
		padding:
			50px
			20px
			70px;
	}


	/* filter */

	.caseUseArchive__filter {
		display: block;

		margin-bottom: 30px;
	}


	.caseUseArchive__filterLabel {
		display: block;

		margin-bottom: 8px;

		font-size: 1.3rem;
	}


	.caseUseArchive__selectWrap {
		width: 100%;
	}


	/* grid */

	.caseUseArchive__grid {
		grid-template-columns: 1fr;

		gap: 28px;
	}


	/* body */

	.caseUseItem__body {
		padding:
			22px
			20px
			20px;
	}


	.caseUseItem__category {
		margin-bottom: 13px;

		font-size: 1.2rem;
	}


	.caseUseItem__title {
		font-size: 1.7rem;
	}


	.caseUseItem__text {
		font-size: 1.4rem;
		line-height: 1.8;
	}

}
.breadcrumb {
	background: #fff;
}

.breadcrumb__inner {
	width: min(1400px, calc(100% - 48px));
	margin-inline: auto;
	padding: 14px 0;
}

.breadcrumb ol {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: clamp(1.2rem, 1.13rem + 0.188vw, 1.4rem);
	line-height: 1.6;
}

.breadcrumb li {
	display: flex;
	align-items: center;
}

.breadcrumb li:not(:last-child)::after {
	content: ">";
	margin-left: 6px;
	color: #8c8f95;
}

.breadcrumb a {
	color: #333;
	text-decoration: none;
}

.breadcrumb a:hover {
	text-decoration: underline;
}

ul.tags{
	display: flex;
	flex-wrap: wrap;
	gap:0.5em;
	margin-top:1em;
	margin-bottom:1em;
}
ul.tags li{
	display: inline-block;
	white-space: normal;
	background:#efefef;
	padding:0 5px;
}
@media(max-width:640px){
	ul.tags li{
		font-size:1.4rem;
	}
}
/* =========================================================
	CASE DETAIL
========================================================= */

.caseDetail {
	--case-blue: #075b85;
	--case-blue-dark: #063f64;
	--case-blue-light: #eaf5fa;
	--case-red: #d71920;
	--case-navy: #152b44;
	--case-text: #333;
	--case-gray: #f5f7f9;
	--case-line: #dce3e8;

	color: var(--case-text);
	font-family:
		"Noto Sans JP",
		"Yu Gothic",
		"YuGothic",
		"Hiragino Kaku Gothic ProN",
		sans-serif;
	line-height: 1.9;
}

.caseDetail *,
.caseDetail *::before,
.caseDetail *::after {
	box-sizing: border-box;
}

.caseDetail img {
	max-width: 100%;
	height: auto;
}

.caseDetailSection__inner,
.caseDetailHero__inner {
	width: min(1200px, calc(100% - 60px));
	margin-inline: auto;
}


/* =========================================================
	HERO
========================================================= */

.caseDetailHero {
	position: relative;
	padding: 80px 0 55px;
	overflow: hidden;
	background:
		linear-gradient(
			120deg,
			rgba(255,255,255,1) 0%,
			rgba(255,255,255,.96) 55%,
			rgba(231,244,250,.95) 100%
		);
	border-bottom: 1px solid #d9e4e9;
}

.caseDetailHero::before {
	content: "";
	position: absolute;
	top: -220px;
	right: -150px;
	width: 600px;
	height: 600px;
	border: 1px solid rgba(0,104,148,.12);
	border-radius: 50%;
}

.caseDetailHero::after {
	content: "";
	position: absolute;
	top: -110px;
	right: -30px;
	width: 360px;
	height: 360px;
	border: 1px solid rgba(215,25,32,.08);
	border-radius: 50%;
}

.caseDetailHero__inner {
	position: relative;
	z-index: 2;
}

.caseDetailHero__main {
	display: grid;
	grid-template-columns: 320px minmax(0, 1fr);
	gap: 55px;
	align-items: center;
}

.caseDetailHero__logo {
	display: flex;
	align-items: center;
	justify-content: center;
}

.caseDetailHero__logoPlaceholder {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	aspect-ratio: 16 / 9;
	padding: 5px;
	background: #fff;
	border: 1px solid #d9e1e5;
	box-shadow: 0 6px 22px rgba(0,0,0,.06);
}

.caseDetailHero__logoPlaceholder span {
	font-size: 14px;
	color: #89949b;
}

.caseDetailHero__label {
	margin-bottom: 10px;
	color: var(--case-blue);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: .14em;
}

.caseDetailHero__title {
	margin: 0;
	color: #152b44;
	font-size: clamp(20px, 3vw, 36px);
	font-weight: 700;
	line-height: 1.45;
	letter-spacing: .03em;
}

.caseDetailHero__title::after {
	content: "";
	display: block;
	width: 60px;
	height: 3px;
	margin-top: 22px;
	background: linear-gradient(to right, #f2554a 0%, #a54fc4 52%, #2144c7 100%);
}

.caseDetailHero__lead {
	max-width: 850px;
	margin: 24px 0 0;
	font-size: 17px;
	line-height: 2;
}

.caseDetailHero__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.caseDetailHero__tags li {
	padding: 7px 18px;
	color: #25536d;
	background: #e9f3f7;
	border-radius: 4px;
	font-size: clamp(1.2rem, 1.13rem + 0.188vw, 1.4rem);
	font-weight: 500;
}


/* CTA */

.caseDetailHero__buttons {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 360px));
	justify-content: center;
	gap: 25px;
	margin-top: 48px;
}

.caseDetailHero__button {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: 86px;
	padding: 15px 50px;
	color: #fff;
	text-decoration: none;
	overflow: hidden;
	border-radius: 4px;
	transition:
		background-color .3s ease,
		box-shadow .3s ease;
}

.caseDetailHero__button--download {
	background: var(--case-blue);
}

.caseDetailHero__button--contact {
	background: var(--case-navy);
}

.caseDetailHero__button:hover {
	box-shadow: 0 8px 24px rgba(0,0,0,.17);
	color:#fff;
}


.caseDetailHero__buttonSub {
	font-size: clamp(1.2rem, 1.13rem + 0.188vw, 1.4rem);
	opacity: .75;
}

.caseDetailHero__buttonMain {
	display: flex;
	align-items: center;
	gap: 15px;
	font-size: 17px;
	font-weight: 500;
}

.caseDetailHero__arrow {
	position: absolute;
	right: 22px;
	font-size: 22px;
}


/* =========================================================
	SECTION
========================================================= */

.caseDetailSection {
	padding: 90px 0;
}

.caseDetailSection--gray {
	background: #f5f7f9;
}


/* =========================================================
	HEADING
========================================================= */

.caseDetailHeading {
	position: relative;
	margin-bottom: 45px;
	padding-left: 24px;
}

.caseDetailHeading::before {
	content: "";
	position: absolute;
	top: 3px;
	bottom: 3px;
	left: 0;
	width: 4px;
	background: linear-gradient(to bottom, #f2554a 0%, #a54fc4 52%, #2144c7 100%);
}

.caseDetailHeading__en {
	display: block;
	margin-bottom: 2px;
	color: var(--case-blue);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: .18em;
}

.caseDetailHeading__title {
	margin: 0;
	color: #182b3f;
	font-size: 30px;
	line-height: 1.4;
}


/* =========================================================
	OVERVIEW
========================================================= */

.caseDetailOverview {
	max-width: 1100px;
	margin-inline:auto;
}

.caseDetailOverview p {
	margin: 0 0 20px;
	font-size: clamp(1.4rem, 1.259rem + 0.376vw, 1.8rem);
}

.caseDetailOverview strong {
	color: var(--case-blue);
	font-weight: 700;
}


/* =========================================================
	SUMMARY
========================================================= */

.caseDetailSummary {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 25px;
	margin-top: 60px;
}

.caseDetailSummary__item {
	position: relative;
	padding: 0 30px 30px;
	background: #fff;
	border: 1px solid #dce4e8;
	box-shadow: 0 6px 22px rgba(18,54,77,.06);
}

.caseDetailSummary__head {
	display: flex;
	align-items: center;
	gap: 14px;
	min-height: 66px;
	margin: 0 -30px 25px;
	padding: 0 30px;
	color: #fff;
	background:
		linear-gradient(
			120deg,
			var(--case-blue-dark),
			var(--case-blue)
		);
}

.caseDetailSummary__number {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .1em;
	opacity: .7;
}

.caseDetailSummary__head h3 {
	margin: 0;
	font-size: 19px;
	font-weight: 500;
}

.caseDetailSummary__item ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

.caseDetailSummary__item li {
	position: relative;
	padding: 10px 0 10px 20px;
	border-bottom: 1px solid #edf1f3;
	font-size: 14px;
	line-height: 1.7;
}

.caseDetailSummary__item li:last-child {
	border-bottom: 0;
}

.caseDetailSummary__item li::before {
	content: "";
	position: absolute;
	top: 21px;
	left: 2px;
	width: 6px;
	height: 6px;
	background: var(--case-blue);
	border-radius: 50%;
}


/* =========================================================
	SYSTEM ARCHITECTURE
========================================================= */

.caseDetailSystem {
	padding: 90px 0;
	background: #f2f7fa;
}

.caseArchitecture {
	display: grid;
	grid-template-columns:
		minmax(180px, 1fr)
		120px
		minmax(280px, 1.15fr)
		120px
		minmax(180px, 1fr);
	align-items: center;
	gap: 15px;
	padding: 50px;
	background: #fff;
	border: 1px solid #dfe8ed;
	box-shadow: 0 10px 35px rgba(7,66,98,.07);
}

.caseArchitecture__groupTitle {
	margin: 0 0 14px;
	color: #65747d;
	font-size: 12px;
	font-weight: 700;
	text-align: center;
	letter-spacing: .08em;
}

.caseArchitecture__sources,
.caseArchitecture__users {
	display: grid;
	gap: 12px;
}

.caseArchitecture__source,
.caseArchitecture__user {
	display: grid;
	grid-template-columns: 42px minmax(0,1fr);
	align-items: center;
	column-gap: 12px;
	padding: 13px 15px;
	background: #f6f8fa;
	border: 1px solid #dde4e8;
}

.caseArchitecture__sourceIcon,
.caseArchitecture__user > span {
	grid-row: 1 / 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 40px;
	height: 40px;
	color: #fff;
	background: #6f8998;
	border-radius: 50%;
	font-size: 10px;
	font-weight: 700;
}

.caseArchitecture__source strong,
.caseArchitecture__user strong {
	color: #213645;
	font-size: 14px;
	line-height: 1.3;
}

.caseArchitecture__source small {
	color: #7b858c;
	font-size: 10px;
	line-height: 1.3;
}


/* arrow */

.caseArchitecture__arrow {
	display: flex;
	flex-direction: column;
	align-items: center;
	color: var(--case-blue);
}

.caseArchitecture__arrow span {
	font-size: 38px;
	font-weight: 300;
	line-height: 1;
}

.caseArchitecture__arrow small {
	margin-top: 5px;
	font-size: 10px;
	white-space: nowrap;
}


/* Denodo */

.caseArchitecture__denodo {
	position: relative;
	padding: 35px 25px;
	color: #fff;
	text-align: center;
	background:
		linear-gradient(
			135deg,
			#094b74 0%,
			#08769d 100%
		);
	box-shadow: 0 12px 30px rgba(7,81,121,.18);
}

.caseArchitecture__denodo::before {
	content: "";
	position: absolute;
	inset: 8px;
	border: 1px solid rgba(255,255,255,.2);
	pointer-events: none;
}

.caseArchitecture__denodoLabel {
	display: block;
	margin-bottom: 3px;
	font-size: 9px;
	letter-spacing: .16em;
	opacity: .65;
}

.caseArchitecture__denodo h3 {
	margin: 0;
	font-size: 31px;
	letter-spacing: .03em;
}

.caseArchitecture__denodo p {
	margin: 6px 0 20px;
	font-size: 12px;
	line-height: 1.7;
	opacity: .85;
}

.caseArchitecture__denodo ul {
	display: grid;
	grid-template-columns: repeat(2,1fr);
	gap: 5px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.caseArchitecture__denodo li {
	padding: 7px 4px;
	background: rgba(255,255,255,.12);
	font-size: 10px;
}


/* bottom governance */

.caseArchitecture__bottom {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	margin-top: 18px;
	border: 1px solid #dbe4e8;
	background: #fff;
}

.caseArchitecture__bottom div {
	padding: 14px 20px;
	color: #3a4b55;
	border-right: 1px solid #dbe4e8;
	font-size: 12px;
	text-align: center;
}

.caseArchitecture__bottom div:last-child {
	border-right: 0;
}

.caseArchitecture__bottom span {
	display: block;
	color: var(--case-blue);
	font-size: 9px;
	font-weight: 700;
	letter-spacing: .12em;
}


/* =========================================================
	BACKGROUND CARDS
========================================================= */

.caseDetailCards {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 25px;
}

.caseDetailCard {
	position: relative;
	min-height: 300px;
	padding: 43px 32px 35px;
	overflow: hidden;
	background: #fff;
	border-top: 4px solid var(--case-blue);
	box-shadow: 0 6px 22px rgba(18,54,77,.07);
}

.caseDetailCard__number {
	position: absolute;
	top: 10px;
	right: 18px;
	color: #edf3f6;
	font-size: 70px;
	font-weight: 700;
	line-height: 1;
}

.caseDetailCard h3 {
	position: relative;
	z-index: 2;
	margin: 0 0 24px;
	color: #17374b;
	font-size: 20px;
	line-height: 1.65;
}

.caseDetailCard h3::after {
	content: "";
	display: block;
	width: 35px;
	height: 2px;
	margin-top: 16px;
	background: var(--case-red);
}

.caseDetailCard p {
	position: relative;
	z-index: 2;
	margin: 0;
	font-size: 14px;
	line-height: 2;
}


/* =========================================================
	WHY DENODO
========================================================= */

.caseDetailReasons {
	border-top: 1px solid #dce3e7;
}

.caseDetailReason {
	display: grid;
	grid-template-columns: 150px minmax(0,1fr);
	gap: 45px;
	padding: 42px 15px;
	border-bottom: 1px solid #dce3e7;
}

.caseDetailReason__number {
	display: flex;
	flex-direction: column;
	justify-content: center;
	color: #9aa7ae;
	font-size: 10px;
	font-weight: 700;
	text-align: center;
	letter-spacing: .15em;
}

.caseDetailReason__number strong {
	display: block;
	color: var(--case-blue);
	font-size: 38px;
	line-height: 1.2;
	letter-spacing: normal;
}

.caseDetailReason__contents h3 {
	margin: 0 0 16px;
	color: #1b3042;
	font-size: 21px;
	line-height: 1.6;
}

.caseDetailReason__contents h3 span {
	color: var(--case-blue);
}

.caseDetailReason__contents p {
	margin: 0;
	font-size: 14px;
	line-height: 2;
}


/* =========================================================
	RESULT
========================================================= */

.caseDetailResult {
	padding: 90px 0 100px;
	background:
		linear-gradient(
			135deg,
			#052e49 0%,
			#075e86 65%,
			#087da4 100%
		);
}

.caseDetailHeading--white .caseDetailHeading__en {
	color: rgba(255,255,255,.55);
}

.caseDetailHeading--white .caseDetailHeading__title {
	color: #fff;
}

.caseDetailHeading--white::before {
	background: #fff;
}

.caseDetailResult__list {
	display: grid;
	grid-template-columns: repeat(3,1fr);
	gap: 22px;
}

.caseDetailResult__item {
	position: relative;
	min-height: 315px;
	padding: 42px 30px 35px;
	overflow: hidden;
	background: #fff;
}

.caseDetailResult__number {
	position: absolute;
	right: 18px;
	bottom: -15px;
	color: #edf4f7;
	font-size: 95px;
	font-weight: 700;
	line-height: 1;
}

.caseDetailResult__item h3 {
	position: relative;
	z-index: 2;
	margin: 0 0 25px;
	color: #153d55;
	font-size: 19px;
	line-height: 1.65;
}

.caseDetailResult__item h3::before {
	content: "";
	display: block;
	width: 30px;
	height: 3px;
	margin-bottom: 17px;
	background: var(--case-red);
}

.caseDetailResult__item p {
	position: relative;
	z-index: 2;
	margin: 0;
	font-size: 14px;
	line-height: 2;
}


/* =========================================================
	RESPONSIVE
========================================================= */

@media screen and (max-width: 1000px) {

	.caseDetailHero__main {
		grid-template-columns: 160px minmax(0,1fr);
		gap: 35px;
	}

	.caseDetailSummary,
	.caseDetailCards,
	.caseDetailResult__list {
		grid-template-columns: 1fr;
	}

	.caseArchitecture {
		grid-template-columns: 1fr;
		max-width: 650px;
		margin-inline: auto;
	}

	.caseArchitecture__arrow {
		transform: rotate(90deg);
		padding: 5px 0;
	}

	.caseArchitecture__arrow small {
		display: none;
	}

	.caseArchitecture__sources,
	.caseArchitecture__users {
		grid-template-columns: repeat(3,1fr);
	}

	.caseArchitecture__bottom {
		grid-template-columns: 1fr;
		max-width: 650px;
		margin-inline: auto;
		margin-top: 15px;
	}

	.caseArchitecture__bottom div {
		border-right: 0;
		border-bottom: 1px solid #dbe4e8;
	}

	.caseArchitecture__bottom div:last-child {
		border-bottom: 0;
	}

}


@media screen and (max-width: 767px) {

	.caseDetailSection__inner,
	.caseDetailHero__inner {
		width: calc(100% - 40px);
	}

	.caseDetailHero {
		padding: 50px 0 40px;
	}

	.caseDetailHero__main {
		display: block;
	}

	.caseDetailHero__logo {
		justify-content: flex-start;
		margin-bottom: 30px;
	}

	.caseDetailHero__logoPlaceholder {
		width: 150px;
	}

	.caseDetailHero__title {
		font-size: 27px;
		line-height: 1.5;
	}

	.pcOnly {
		display: none;
	}

	.caseDetailHero__lead {
		font-size: 14px;
		line-height: 1.9;
	}

	.caseDetailHero__lead br {
		display: none;
	}

	.caseDetailHero__buttons {
		grid-template-columns: 1fr;
		gap: 12px;
		margin-top: 35px;
	}

	.caseDetailHero__button {
		min-height: 75px;
	}

	.caseDetailSection,
	.caseDetailSystem,
	.caseDetailResult {
		padding: 65px 0;
	}

	.caseDetailHeading {
		margin-bottom: 32px;
	}

	.caseDetailHeading__title {
		font-size: 25px;
	}

	.caseDetailOverview {
		font-size: 14px;
	}

	.caseDetailSummary {
		margin-top: 40px;
	}

	.caseArchitecture {
		padding: 25px 20px;
	}

	.caseArchitecture__sources,
	.caseArchitecture__users {
		grid-template-columns: 1fr;
	}

	.caseArchitecture__denodo {
		padding: 30px 20px;
	}

	.caseDetailReason {
		grid-template-columns: 70px minmax(0,1fr);
		gap: 20px;
		padding: 30px 0;
	}

	.caseDetailReason__number strong {
		font-size: 30px;
	}

	.caseDetailReason__contents h3 {
		font-size: 18px;
	}

	.caseDetailResult__item {
		min-height: 0;
	}

}
/* =========================================================
	導入背景・選定ポイント・導入効果
	3カラム
========================================================= */

.caseDetailPoints {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: 60px;
	padding:0 3% 3%;
}


/* 各カラム */

.caseDetailPoint {
	position: relative;
	overflow: hidden;
	background: #fff;
	border: 1px solid #dde5e9;
	box-shadow: 0 8px 25px rgba(18, 54, 77, .07);
}


/* 見出し */

.caseDetailPoint__heading {
	position: relative;
	min-height: 92px;
	padding: 22px 28px 20px;
	color: #fff;
	background:
		linear-gradient(
			120deg,
			#064566 0%,
			#086f96 100%
		);
}

.caseDetailPoint__heading::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 55px;
	height: 4px;
	background: #d71920;
}

.caseDetailPoint__en {
	display: block;
	margin-bottom: 2px;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: .15em;
	opacity: .65;
}

.caseDetailPoint__heading h3 {
	margin: 0;
	font-size: clamp(1.6rem, 1.389rem + 0.563vw, 2.2rem);
	font-weight: 500;
	line-height: 1.4;
}


/* 中身 */

.caseDetailPoint__contents {
	padding: 8px 28px 28px;
}


/* 各項目 */

.caseDetailPoint__item {
	position: relative;
	padding: 30px 0;
	border-bottom: 1px solid #e5eaed;
}

.caseDetailPoint__item:last-child {
	padding-bottom: 5px;
	border-bottom: 0;
}


/* 番号 */

.caseDetailPoint__number {
	position: absolute;
	top: 26px;
	right: 0;
	color: #e7eef2;
	font-size: 38px;
	font-weight: 700;
	line-height: 1;
}


/* 小見出し */

.caseDetailPoint__item h4 {
	position: relative;
	z-index: 2;
	margin: 0 45px 14px 0;
	color: #17374b;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.65;
}




/* 本文 */

.caseDetailPoint__item p {
	margin: 0;
	color: #4a555c;
	font-size: clamp(1.2rem, 1.059rem + 0.376vw, 1.6rem);
	line-height: 1.9;
}


/* =========================================================
	カラムごとの差別化（見出し色をより明確に）
========================================================= */

/* 導入背景：スレートブルー寄り */
.caseDetailPoint--background .caseDetailPoint__heading {
	background: linear-gradient(
		120deg,
		#4b6475 0%,
		#6a8392 100%
	);
}

/* 選定ポイント：はっきりしたブルー */
.caseDetailPoint--selection .caseDetailPoint__heading {
	background: linear-gradient(
		120deg,
		#005f8f 0%,
		#1683b3 100%
	);
}

/* 導入効果：ティール寄り */
.caseDetailPoint--result .caseDetailPoint__heading {
	background: linear-gradient(
		120deg,
		#0d7f8f 0%,
		#25a6a2 100%
	);
}


/* 下線アクセントも少し差を強める */

.caseDetailPoint--background .caseDetailPoint__heading::after {
	background: #e53935;
}

.caseDetailPoint--selection .caseDetailPoint__heading::after {
	background: #f39a3d;
}

.caseDetailPoint--result .caseDetailPoint__heading::after {
	background: #52d2c7;
}

/* =========================================================
	RESPONSIVE
========================================================= */

@media screen and (max-width: 1000px) {

	.caseDetailPoints {
		gap: 15px;
	}

	.caseDetailPoint__heading {
		padding-inline: 20px;
	}

	.caseDetailPoint__contents {
		padding-inline: 20px;
	}

	.caseDetailPoint__item h4 {
		font-size: 15px;
	}

}


@media screen and (max-width: 767px) {

	.caseDetailPoints {
		grid-template-columns: 1fr;
		gap: 20px;
		margin-top: 40px;
	}

	.caseDetailPoint__heading {
		min-height: 78px;
		padding: 17px 22px;
	}

	.caseDetailPoint__heading h3 {
		font-size: 19px;
	}

	.caseDetailPoint__contents {
		padding: 5px 22px 22px;
	}

	.caseDetailPoint__item {
		padding: 24px 0;
	}

	.caseDetailPoint__number {
		top: 22px;
		font-size: 32px;
	}

	.caseDetailPoint__item h4 {
		font-size: 16px;
	}

	.caseDetailPoint__item p {
		font-size: 13px;
	}

}
/* =========================================================
   CASE DETAIL HERO CTA
   下部CTAとデザインを統一
========================================================= */

.caseDetailHero__buttons {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 450px));
	justify-content: center;
	gap: 32px;
	margin-top: 48px;
}


/* 共通 */
.caseDetailHero__button {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	width: 100%;
	min-height: 100px;
	padding: 16px 65px 16px 35px;

	box-sizing: border-box;

	color: #fff;
	text-decoration: none;

	border-radius: 9999px;
	overflow: hidden;

	background-repeat: no-repeat;
	background-position:
		right 28px center,
		left center;
	background-size:
		20px auto,
		200% 100%;

	box-shadow: none;

	transition:
		background-position 0.55s cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 0.15s ease;
}


/* =========================================================
   PDFダウンロード
   下部「資料を無料ダウンロード」と同じ赤系
========================================================= */

.caseDetailHero__button--download {
	background-color: var(--color-red);

	background-image:
		url("../images/arrow_cta.svg"),
		linear-gradient(
			90deg,
			var(--color-red) 0%,
			var(--color-red) 50%,
			#ff8a20 100%
		);
}


/* =========================================================
   お問い合わせ
   下部「お問い合わせフォームへ」と同じ青系
========================================================= */

.caseDetailHero__button--contact {
	background-color: var(--color-blue);

	background-image:
		url("../images/arrow_cta.svg"),
		linear-gradient(
			90deg,
			var(--color-blue) 0%,
			var(--color-blue) 50%,
			#168cff 100%
		);
}


/* 上段の補足文 */
.caseDetailHero__buttonSub {
	display: block;
	margin-bottom: 5px;

	color: rgba(255,255,255,.75);

	font-size: clamp(1.2rem, 1.13rem + 0.188vw, 1.4rem);
	font-weight: 500;
	line-height: 1.4;
}


/* メイン文言 */
.caseDetailHero__buttonMain {
	display: block;

	color: #fff;

	font-size: clamp(1.6rem, 1.46rem + 0.375vw, 2rem);
	font-weight: 700;
	line-height: 1.4;

	text-align: center;
}


/*
既存HTML内の「→」は非表示。
矢印は下部CTAと同じ arrow_cta.svg を使用。
*/
.caseDetailHero__arrow {
	display: none;
}


/* =========================================================
   hover
========================================================= */

@media (hover: hover) {

	.caseDetailHero__button:hover {
		color: #fff;

		background-position:
			right 21px center,
			right center;

		box-shadow: 0 8px 20px rgba(0, 0, 0, .18);

		/* hoverでボタン位置は動かさない */
		transform: none;
	}

}


/* キーボード操作 */
.caseDetailHero__button:focus-visible {
	outline: 3px solid rgba(255,255,255,.9);
	outline-offset: -6px;

	background-position:
		right 21px center,
		right center;
}


/* =========================================================
   Tablet
========================================================= */

@media screen and (max-width: 900px) {

	.caseDetailHero__buttons {
		gap: 20px;
	}

	.caseDetailHero__button {
		min-height: 90px;

		padding:
			14px
			55px
			14px
			25px;

		background-position:
			right 22px center,
			left center;

		background-size:
			17px auto,
			200% 100%;
	}

}


/* =========================================================
   Smartphone
========================================================= */

@media screen and (max-width: 767px) {

	.caseDetailHero__buttons {
		grid-template-columns: 1fr;

		width: min(100%, 460px);
		margin: 35px auto 0;

		gap: 14px;
	}

	.caseDetailHero__button {
		min-height: 78px;

		padding:
			12px
			50px
			12px
			22px;

		background-position:
			right 20px center,
			left center;

		background-size:
			15px auto,
			200% 100%;
	}

	.caseDetailHero__buttonSub {
		font-size: 1.2rem;
	}

	.caseDetailHero__buttonMain {
		font-size: 1.7rem;
	}

}


/* 動きを減らす設定 */
@media (prefers-reduced-motion: reduce) {

	.caseDetailHero__button {
		transition: none;
	}

}
/* ========================================
   TECH COLUMN
========================================= */

.techColumn {
  width: 100%;
  color: #252a35;
  background: #fff;
}


/* ========================================
   Breadcrumb
========================================= */

.techColumn__breadcrumb {
  width: min(1200px, calc(100% - 48px));
  margin: 18px auto 0;
  font-size: 14px;
  line-height: 1.6;
  color: #666;
}

.techColumn__breadcrumb a {
  color: #555;
  text-decoration: none;
}

.techColumn__breadcrumb a:hover {
  text-decoration: underline;
}

.techColumn__breadcrumb span {
  margin-left: 5px;
}


/* ========================================
   Hero
========================================= */

.techColumnHero {
  position: relative;
  overflow: hidden;
  margin-top: 12px;
  border-top: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  background:
    linear-gradient(
      110deg,
      rgba(247, 249, 252, 1) 0%,
      rgba(255, 255, 255, 1) 56%,
      rgba(239, 244, 252, 1) 100%
    );
}

.techColumnHero::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 6px;
  height: 100%;
  background: linear-gradient(
    to bottom,
    #e94b51,
    #ca2835
  );
}

.techColumnHero::after {
  content: "";
  position: absolute;
  top: -120px;
  right: 6%;
  width: 330px;
  height: 330px;
  border: 1px solid rgba(31, 47, 140, 0.08);
  border-radius: 50%;
}

.techColumnHero__inner {
  position: relative;
  z-index: 2;
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  padding: 50px 0 54px;
}

.techColumnHero__en {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #d83f49;
}

.techColumnHero h1 {
  margin: 0;
  font-size: clamp(34px, 4vw, 48px);
  line-height: 1.25;
  letter-spacing: 0.02em;
  color: #202538;
}

.techColumnHero__lead {
  margin: 22px 0 0;
  font-size: 16px;
  line-height: 1.9;
  color: #626875;
}


/* ========================================
   List
========================================= */

.techColumnList {
  padding: 72px 0 110px;
}

.techColumnList__inner {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
}


/* ========================================
   Filter
========================================= */

.techColumnFilter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  margin-bottom: 38px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e1e4e9;
}

.techColumnFilter--hidden {
  display: none;
}

.techColumnFilter__label {
  margin: 0;
  font-size: 14px;
  font-weight: 700;
  color: #414653;
}

.techColumnFilter__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.techColumnFilter__button {
  appearance: none;
  min-width: 90px;
  padding: 9px 18px;
  border: 1px solid #d7dbe2;
  border-radius: 100px;
  color: #444b59;
  background: #fff;
  font-family: inherit;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition:
    border-color 0.25s ease,
    color 0.25s ease,
    background-color 0.25s ease;
}

.techColumnFilter__button:hover {
  border-color: #e34851;
  color: #d73742;
}

.techColumnFilter__button.is-active {
  border-color: #28378b;
  color: #fff;
  background: #28378b;
}


/* ========================================
   Grid
========================================= */

.techColumnGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 42px 32px;
}


/* ========================================
   Card
========================================= */

.techColumnCard {
  min-width: 0;
}

.techColumnCard__link {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  border: 1px solid #e1e4e9;
  border-radius: 4px;
  color: inherit;
  background: #fff;
  text-decoration: none;
  box-shadow:
    0 4px 12px rgba(29, 39, 64, 0.03),
    0 16px 32px rgba(29, 39, 64, 0);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.techColumnCard__link:hover {
  border-color: #cbd0da;
  box-shadow:
    0 8px 20px rgba(29, 39, 64, 0.07),
    0 18px 36px rgba(29, 39, 64, 0.08);
  transform: translateY(-4px);
}


/* image */

.techColumnCard__image {
  position: relative;
  overflow: hidden;
  aspect-ratio: 16 / 9;
  background:
    linear-gradient(
      135deg,
      #edf0f6 0%,
      #dfe5f0 100%
    );
}

.techColumnCard__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(.2,.7,.2,1);
}

.techColumnCard__link:hover .techColumnCard__image img {
  transform: scale(1.045);
}


/* category */

.techColumnCard__category {
  position: absolute;
  top: 16px;
  left: 16px;
  z-index: 2;
  padding: 7px 13px;
  border-radius: 2px;
  color: #fff;
  background: var(--color-blue);
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
}


/* body */

.techColumnCard__body {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 25px 26px 27px;
}

.techColumnCard__date {
  display: block;
  margin-bottom: 11px;
  color: #333;
  font-size: clamp(1.2rem, 1.13rem + 0.188vw, 1.4rem);
  line-height: 1.5;
  letter-spacing: 0.05em;
}

.techColumnCard__title {
  margin: 0;
  color: #272c3b;
  font-size: 18px;
  line-height: 1.65;
  font-weight: 700;
  letter-spacing: 0.01em;
}



/* more */

.techColumnCard__more {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 13px;
  align-self: flex-start;
  margin-top: 1em;
  color: #28378b;
  font-size: 13px;
  font-weight: 700;
}

.techColumnCard__more::after {
  content: "";
  width: 24px;
  height: 1px;
  background: currentColor;
  transition: width 0.3s ease;
}

.techColumnCard__link:hover .techColumnCard__more::after {
  width: 38px;
}


/* ========================================
   Tablet
========================================= */

@media screen and (max-width: 960px) {

  .techColumnGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 24px;
  }

  .techColumnFilter {
    align-items: flex-start;
    flex-direction: column;
    gap: 12px;
  }

}


/* ========================================
   Mobile
========================================= */

@media screen and (max-width: 640px) {

  .pc {
    display: none;
  }

  .techColumn__breadcrumb {
    width: calc(100% - 32px);
    margin-top: 12px;
    font-size: 12px;
  }

  .techColumnHero__inner {
    width: calc(100% - 40px);
    padding: 38px 0 40px;
  }

  .techColumnHero__en {
    font-size: 11px;
  }

  .techColumnHero h1 {
    font-size: 32px;
  }

  .techColumnHero__lead {
    margin-top: 17px;
    font-size: 14px;
    line-height: 1.8;
  }

  .techColumnList {
    padding: 48px 0 70px;
  }

  .techColumnList__inner {
    width: calc(100% - 32px);
  }

  .techColumnGrid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .techColumnCard__body {
    padding: 21px 20px 23px;
  }

  .techColumnCard__title {
    font-size: 17px;
  }

  .techColumnCard__text {
    margin-top: 12px;
    font-size: 13px;
  }

  .techColumnCard__link:hover {
    transform: none;
  }

}
/* ========================================
   TECH COLUMN DETAIL
========================================= */

.techColumnDetail {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  padding: 64px 0 110px;
  color: #282d3a;
}


/* ========================================
   Article
========================================= */

.techColumnDetail__article {
  max-width: 1100px;
  margin: 0 auto;
}


/* ========================================
   Article Head
========================================= */

.techColumnDetailHead {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 42%;
	align-items: center;
	gap: 64px;
	padding: 0 0 52px;
	border-bottom: 1px solid #d9dde5;
}
/* 子要素が1つだけの場合 */
.techColumnDetailHead:has(> :only-child) {
	grid-template-columns: 1fr;
	gap: 0;
}

/* text */

.techColumnDetailHead__info {
  min-width: 0;
}

.techColumnDetailHead__meta {
  display: flex;
  align-items: center;
  gap: 18px;
  margin-bottom: 18px;
}

.techColumnDetailHead__meta time {
	color: #333;
	font-size: clamp(1.2rem, 1.13rem + 0.188vw, 1.4rem);
	line-height: 1.5;
	letter-spacing: 0.05em;
}

.techColumnDetailHead__category {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  border-radius: 2px;
  color: #fff;
  background: #28378b;
  font-size: 12px;
  line-height: 1.4;
  font-weight: 700;
}

.techColumnDetailHead__title {
  margin: 0;
  color: #222735;
  font-size: clamp(28px, 3vw, 40px);
  line-height: 1.55;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.techColumnDetailHead__lead {
  margin: 24px 0 0;
  color: #626875;
  font-size: 15px;
  line-height: 1.9;
}


/* visual */

.techColumnDetailHead__visual {
  position: relative;
  overflow: hidden;
  margin: 0;
  aspect-ratio: 16 / 9;
  border-radius: 4px;
  background: #edf0f5;
}

.techColumnDetailHead__visual::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  border: 1px solid rgba(32, 41, 72, 0.08);
}

.techColumnDetailHead__visual img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}


/* ========================================
   Article Body
========================================= */

.techColumnDetailBody {
  max-width: 900px;
  margin: 0 auto;
  padding: 66px 0 0;
}


/* section */

.techColumnDetailSection + .techColumnDetailSection {
  margin-top: 68px;
}


/* h2 */

.techColumnDetailSection h2 {
  position: relative;
  margin: 2em 0 1em;
  padding: 0 0 17px 22px;
  color: #252a38;
  font-size: 27px;
  line-height: 1.55;
  font-weight: 700;
}

.techColumnDetailSection h2::before {
  content: "";
  position: absolute;
  top: 0.2em;
  bottom: 18px;
  left: 0;
  width: 4px;
  border-radius: 2px;
  background: linear-gradient(
    to bottom,
    #e7434c 0%,
    #e7434c 52%,
    #293b96 100%
  );
}

.techColumnDetailSection h2::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: 0;
	left: 0;
	height: 1px;
	background: #d9dde4;
}


/* h3 */

.techColumnDetailSection h3 {
	margin: 38px 0 18px;
	padding-left: 16px;
	border-left: 3px solid #293b96;
	color: #303544;
	font-size: clamp(1.6rem, 1.459rem + 0.376vw, 2rem);
	line-height: 1.6;
}


/* text */

.techColumnDetailSection p {
	margin: 0;
	color: #333;
	font-size: clamp(1.4rem, 1.259rem + 0.376vw, 1.8rem);
	line-height: 2;
}

.techColumnDetailSection p + p {
	margin-top: 18px;
}


/* lists */

.techColumnDetailSection ul,
.techColumnDetailSection ol {
	margin: 25px 0;
	padding-left: 1.6em;
	color: #4f5562;
	font-size: clamp(1.4rem, 1.259rem + 0.376vw, 1.8rem);
	line-height: 2;
}

.techColumnDetailSection li + li {
	margin-top: 6px;
}


/* images in article */

.techColumnDetailSection figure {
	margin: 40px 0;
}

.techColumnDetailSection figure img {
	display: block;
	width: 100%;
	height: auto;
}

.techColumnDetailSection figcaption {
	margin-top: 10px;
	color: #858a94;
	font-size: 12px;
	line-height: 1.7;
}


/* ========================================
   Detail Button
========================================= */

.techColumnDetailMore {
  max-width: 900px;
  margin: 70px auto 0;
  text-align: center;
}

.techColumnDetailMore__button {
  display: block;

  width: 40%;
  height: 80px;
  margin: 0 auto;

  color: #fff;
  font-size: clamp(1.6rem, 1.53rem + 0.188vw, 1.8rem);
  line-height: 80px;
  text-align: center;
  text-decoration: none;

  border-radius: 4em;

  background-color: var(--color-blue);

  /* 1層目：矢印
     2層目：ホバー用グラデーション */
  background-image:
    url("../images/arrow_cta.svg"),
    linear-gradient(
      90deg,
      var(--color-blue) 0%,
      var(--color-blue) 50%,
      #168cff 100%
    );

  background-repeat: no-repeat;

  background-position:
    right 5% center,
    left center;

  background-size:
    4% auto,
    200% 100%;

  transition:
    background-position 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.15s ease;
}


/* hover */

.techColumnDetailMore__button:hover,
.techColumnDetailMore__button:focus-visible {

  background-position:
    right 4% center,
    right center;
	color:#fff;
  box-shadow:
    0 8px 20px rgba(0, 0, 0, 0.18);
}


/* keyboard */

.techColumnDetailMore__button:focus-visible {
  outline: 3px solid rgba(255, 255, 255, 0.9);
  outline-offset: -6px;
}


/* tablet */

@media screen and (max-width: 1100px) {

  .techColumnDetailMore__button {
    width: 60%;
  }

}


/* mobile */

@media screen and (max-width: 768px) {

  .techColumnDetailMore {
    margin-top: 52px;
  }

  .techColumnDetailMore__button {
    width: 80%;
    height: 64px;
    line-height: 64px;
  }

}


/* reduced motion */

@media (prefers-reduced-motion: reduce) {

  .techColumnDetailMore__button {
    transition: none;
  }

}

/* ========================================
   Previous / Next
========================================= */

.techColumnPager {
	max-width: 1100px;
	margin: 90px auto;
}

.techColumnPager__line {
  width: 100%;
  height: 1px;
  margin-bottom: 46px;
  background: #cfd3db;
}

.techColumnPager__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 64px;
}


/* direction */

.techColumnPager__direction {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0 0 15px;
  color: #555c6b;
  font-size: 13px;
  line-height: 1.4;
  font-weight: 700;
}

.techColumnPager__item--next .techColumnPager__direction {
  justify-content: flex-end;
}

.techColumnPager__directionArrow {
  color: #28378b;
  font-size: 18px;
  font-weight: 400;
}


/* ========================================
   Pager Card
========================================= */

.techColumnPagerCard {
  display: grid;
  grid-template-columns: 42% minmax(0, 1fr);
  min-height: 160px;
  overflow: hidden;
  border: 1px solid #e0e3e9;
  border-radius: 4px;
  color: inherit;
  background: #fff;
  text-decoration: none;
  box-shadow: 0 4px 14px rgba(30, 39, 67, 0.04);
  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease;
}

.techColumnPagerCard:hover {
  border-color: #c9ced8;
  box-shadow:
    0 8px 18px rgba(30, 39, 67, 0.07),
    0 18px 34px rgba(30, 39, 67, 0.06);
}


/* image */

.techColumnPagerCard__image {
  position: relative;
  overflow: hidden;
  background: #edf0f5;
}

.techColumnPagerCard__image img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}

.techColumnPagerCard:hover
.techColumnPagerCard__image img {
  transform: scale(1.04);
}


/* category */

.techColumnPagerCard__category {
  position: absolute;
  top: 12px;
  left: 12px;
  padding: 5px 10px;
  border-radius: 2px;
  color: #fff;
  background: rgba(39, 53, 137, 0.94);
  font-size: 10px;
  line-height: 1.4;
  font-weight: 700;
}


/* body */

.techColumnPagerCard__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 22px 24px;
}

.techColumnPagerCard__date {
  margin-bottom: 9px;
  color: #868b95;
  font-size: 11px;
  letter-spacing: 0.04em;
}

.techColumnPagerCard__title {
  margin: 0;
  color: #2a2f3d;
  font-size: 15px;
  line-height: 1.7;
  font-weight: 700;
  transition: color 0.25s ease;
}

.techColumnPagerCard:hover
.techColumnPagerCard__title {
  color: #28378b;
}


/* ========================================
   Tablet
========================================= */

@media screen and (max-width: 960px) {

  .techColumnDetailHead {
    grid-template-columns: 1fr 40%;
    gap: 38px;
  }

  .techColumnPager__grid {
    gap: 30px;
  }

  .techColumnPagerCard {
    grid-template-columns: 1fr;
  }

  .techColumnPagerCard__image {
    aspect-ratio: 16 / 9;
  }

}


/* ========================================
   Mobile
========================================= */

@media screen and (max-width: 640px) {

  .techColumnDetail {
    width: calc(100% - 32px);
    padding: 42px 0 72px;
  }


  /* head */

  .techColumnDetailHead {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 30px;
    padding-bottom: 38px;
  }

  .techColumnDetailHead__info {
    display: flex;
    flex-direction: column;
  }

  .techColumnDetailHead__meta {
    margin-bottom: 13px;
  }

  .techColumnDetailHead__title {
    font-size: 27px;
    line-height: 1.5;
  }

  .techColumnDetailHead__lead {
    margin-top: 18px;
    font-size: 14px;
  }

  .techColumnDetailHead__visual {
    width: 100%;
  }


  /* body */

  .techColumnDetailBody {
    padding-top: 45px;
  }

  .techColumnDetailSection + .techColumnDetailSection {
    margin-top: 50px;
  }

  .techColumnDetailSection h2 {
    margin-bottom: 23px;
    padding: 0 0 14px 17px;
    font-size: 22px;
  }

  .techColumnDetailSection h3 {
    margin-top: 30px;
    font-size: 18px;
  }

  .techColumnDetailSection p {
    font-size: 14px;
    line-height: 1.95;
  }


  /* button */

  .techColumnDetailMore {
    margin-top: 52px;
  }

  .techColumnDetailMore__button {
    min-height: 58px;
  }


  /* pager */

  .techColumnPager {
    margin-top: 64px;
  }

  .techColumnPager__line {
    margin-bottom: 34px;
  }

  .techColumnPager__grid {
    grid-template-columns: 1fr;
    gap: 38px;
  }

  .techColumnPager__item--next
  .techColumnPager__direction {
    justify-content: flex-start;
  }

  .techColumnPagerCard {
    grid-template-columns: 38% minmax(0, 1fr);
    min-height: 130px;
  }

  .techColumnPagerCard__image {
    aspect-ratio: auto;
  }

  .techColumnPagerCard__body {
    padding: 18px;
  }

  .techColumnPagerCard__title {
    font-size: 14px;
  }

}


/* ========================================
   Small Mobile
========================================= */

@media screen and (max-width: 420px) {

  .techColumnPagerCard {
    grid-template-columns: 1fr;
  }

  .techColumnPagerCard__image {
    aspect-ratio: 16 / 9;
  }

}

/* ========================================
   RESOURCE LIST
========================================= */

.resourceList {
  width: 100%;
  padding: 70px 0 110px;
  background: #fff;
}

.resourceList__inner {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
}


/* ========================================
   Filter
========================================= */

.resourceFilter {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 22px;
  margin-bottom: 40px;
  padding-bottom: 24px;
  border-bottom: 1px solid #e1e4e9;
}

.resourceFilter--hidden {
  display: none;
}

.resourceFilter__label {
  margin: 0;
  color: #414653;
  font-size: 14px;
  font-weight: 700;
}

.resourceFilter__buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.resourceFilter__button {
  appearance: none;
  min-width: 90px;
  padding: 9px 18px;
  border: 1px solid #d7dbe2;
  border-radius: 100px;

  color: #444b59;
  background: #fff;

  font-family: inherit;
  font-size: 13px;
  font-weight: 700;

  cursor: pointer;

  transition:
    color 0.25s ease,
    border-color 0.25s ease,
    background-color 0.25s ease;
}

.resourceFilter__button:hover {
  color: #d73742;
  border-color: #e34851;
}

.resourceFilter__button.is-active {
  color: #fff;
  border-color: #28378b;
  background: #28378b;
}


/* ========================================
   Grid
========================================= */

.resourceGrid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 44px 34px;
}


/* ========================================
   Card
========================================= */

.resourceCard {
  min-width: 0;
}

.resourceCard__link {
  display: flex;
  flex-direction: column;
  height: 100%;

  overflow: hidden;

  border: 1px solid #e0e3e9;
  border-radius: 4px;

  color: inherit;
  background: #fff;
  text-decoration: none;

  box-shadow:
    0 4px 14px rgba(31, 41, 70, 0.03),
    0 18px 40px rgba(31, 41, 70, 0);

  transition:
    border-color 0.3s ease,
    box-shadow 0.3s ease,
    transform 0.3s ease;
}

.resourceCard__link:hover {
  border-color: #c9ced8;

  box-shadow:
    0 7px 18px rgba(31, 41, 70, 0.06),
    0 22px 42px rgba(31, 41, 70, 0.08);

  transform: translateY(-4px);
}


/* ========================================
   Visual
========================================= */

.resourceCard__visual {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  height: 410px;
  padding: 34px;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #f6f7f9 0%,
      #edf0f5 100%
    );
}


/* 背景アクセント */

.resourceCard__visual::before {
  content: "";
  position: absolute;
  right: -60px;
  bottom: -70px;

  width: 180px;
  height: 180px;

  border: 1px solid rgba(39, 55, 139, 0.08);
  border-radius: 50%;
}

.resourceCard__visual::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;

  width: 4px;
  height: 100%;

  background:
    linear-gradient(
      to bottom,
      #e54950,
      #29388d
    );

  opacity: 0;
  transition: opacity 0.3s ease;
}

.resourceCard__link:hover
.resourceCard__visual::after {
  opacity: 1;
}


/* ========================================
   Cover
========================================= */

.resourceCard__cover {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
}


/*
  縦A4・横A4共通

  object-fit: contain にすることで、
  縦横どちらでもトリミングされません。
*/

.resourceCard__cover img {
  display: block;

  width: auto;
  height: auto;

  max-width: 100%;
  max-height: 100%;

  object-fit: contain;

  background: #fff;

  box-shadow:
    0 5px 12px rgba(25, 32, 55, 0.10),
    0 15px 30px rgba(25, 32, 55, 0.14);

  transition:
    transform 0.45s cubic-bezier(.2,.7,.2,1),
    box-shadow 0.45s ease;
}

.resourceCard__link:hover
.resourceCard__cover img {
  transform: scale(1.025);

  box-shadow:
    0 8px 18px rgba(25, 32, 55, 0.13),
    0 20px 38px rgba(25, 32, 55, 0.18);
}


/* ========================================
   Body
========================================= */

.resourceCard__body {
  display: flex;
  flex-direction: column;
  flex: 1;

  padding: 22px 24px 26px;
}


/* metadata */

.resourceCard__meta {
  display: flex;
  align-items: center;
  justify-content: space-between;

  gap: 15px;

  margin-bottom: 16px;
}


/* category */

.resourceCard__category {
	display: inline-flex;
	align-items: center;
	min-height: 28px;
	padding: 5px 11px;
	border: 1px solid #d5d9e1;
	border-radius: 2px;
	color: var(--color-blue);
	background: #fff;
	font-size: clamp(1.2rem, 1.13rem + 0.188vw, 1.4rem);
	line-height: 1.4;
	font-weight: 700;
}


/* date */

.resourceCard__date {
	flex-shrink: 0;
	color: #333;
	font-size: clamp(1.2rem, 1.13rem + 0.188vw, 1.4rem);
	line-height: 1.4;
	letter-spacing: 0.04em;
}


/* title */

.resourceCard__title {
  margin: 0;

  color: #272c3a;

  font-size: clamp(1.4rem, 1.259rem + 0.376vw, 1.8rem);

  line-height: 1.7;
  font-weight: 700;

  transition: color 0.25s ease;
}

.resourceCard__link:hover
.resourceCard__title {
  color: #28378b;
}


/* ========================================
   Tablet
========================================= */

@media screen and (max-width: 960px) {

  .resourceGrid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 30px 24px;
  }

  .resourceCard__visual {
    height: 390px;
  }

  .resourceFilter {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

}


/* ========================================
   Mobile
========================================= */

@media screen and (max-width: 640px) {

  .resourceList {
    padding: 48px 0 72px;
  }

  .resourceList__inner {
    width: calc(100% - 32px);
  }

  .resourceGrid {
    grid-template-columns: 1fr;
    gap: 26px;
  }

  .resourceCard__visual {
    height: 400px;
    padding: 30px;
  }

  .resourceCard__body {
    padding: 20px 20px 23px;
  }

  .resourceCard__title {
    font-size: 16px;
  }

  .resourceCard__link:hover {
    transform: none;
  }

}


/* ========================================
   Small Mobile
========================================= */

@media screen and (max-width: 420px) {

  .resourceCard__visual {
    height: 340px;
    padding: 26px;
  }

}
/* ========================================
   RESOURCE DETAIL
========================================= */

.resourceDetail {
  width: min(1200px, calc(100% - 48px));
  margin: 0 auto;
  padding: 64px 0 110px;

  color: #292e3b;
}


/* ========================================
   Article
========================================= */

.resourceDetail__article {
  max-width: 1100px;
  margin: 0 auto;
}


/* ========================================
   Main
========================================= */

.resourceDetail__main {
  display: grid;
  grid-template-columns: 38% minmax(0, 1fr);
  align-items: stretch;

  gap: 68px;

  padding: 48px;

  border: 1px solid #e0e3e9;
  border-radius: 4px;

  background: #fff;

  box-shadow:
    0 5px 16px rgba(30, 40, 70, 0.03),
    0 24px 50px rgba(30, 40, 70, 0.04);
}


/* ========================================
   Cover Area
========================================= */

.resourceDetail__visual {
  position: relative;

  display: flex;
  align-items: center;
  justify-content: center;

  min-height: 500px;

  padding: 38px;

  overflow: hidden;

  background:
    linear-gradient(
      135deg,
      #f5f6f8 0%,
      #edf0f5 100%
    );
}


/* 背景の薄い装飾 */

.resourceDetail__visual::before {
  content: "";

  position: absolute;
  right: -90px;
  bottom: -90px;

  width: 260px;
  height: 260px;

  border: 1px solid rgba(41, 55, 139, 0.07);
  border-radius: 50%;
}

.resourceDetail__visual::after {
  content: "";

  position: absolute;
  top: 0;
  left: 0;

  width: 4px;
  height: 100%;

  background:
    linear-gradient(
      to bottom,
      #eb4750 0%,
      #a843a0 50%,
      #273a99 100%
    );
}


/* ========================================
   Cover Image
========================================= */

.resourceDetail__cover {
  position: relative;
  z-index: 2;

  display: flex;
  align-items: center;
  justify-content: center;

  width: 100%;
  height: 100%;
}


/*
  A4縦・A4横とも自動対応
*/

.resourceDetail__cover img {
  display: block;

  width: auto;
  height: auto;

  max-width: 100%;
  max-height: 500px;

  object-fit: contain;

  background: #fff;

  box-shadow:
    0 7px 16px rgba(26, 33, 58, 0.12),
    0 20px 40px rgba(26, 33, 58, 0.16);
}


/* ========================================
   Content
========================================= */

.resourceDetail__content {
  display: flex;
  flex-direction: column;

  min-width: 0;
  padding: 10px 0;
}


/* ========================================
   Meta
========================================= */

.resourceDetail__meta {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  gap: 20px;

  margin-bottom: 27px;
}


/* category */

.resourceDetail__category {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 30px;
	padding: 6px 14px;
	border: 1px solid #d5d9e2;
	border-radius: 2px;
	color: var(--color-blue);
	background: #fff;
	font-size: clamp(1.2rem, 1.13rem + 0.188vw, 1.4rem);
	line-height: 1.4;
	font-weight: 700;
}


/* date */

.resourceDetail__date {
	color: #333;
	font-size: clamp(1.2rem, 1.13rem + 0.188vw, 1.4rem);
	line-height: 1.4;
	letter-spacing: 0.05em;
}


/* ========================================
   Title
========================================= */

.resourceDetail__title {
  position: relative;

  margin: 0 0 31px;
  padding: 0 0 24px;

  color: #232936;

  font-size: clamp(28px, 3vw, 38px);
  line-height: 1.5;
  font-weight: 700;
  letter-spacing: 0.01em;
}

.resourceDetail__title::after {
  content: "";

  position: absolute;

  right: 0;
  bottom: 0;
  left: 0;

  height: 2px;

  background:
    linear-gradient(
      to right,
      #29388e 0%,
      #29388e 70px,
      #dfe2e8 70px,
      #dfe2e8 100%
    );
}


/* ========================================
   Description
========================================= */

.resourceDetail__description {
  color: #505763;

  font-size: 15px;
  line-height: 2;
}

.resourceDetail__description p {
	margin: 0;
	font-size: clamp(1.4rem, 1.259rem + 0.376vw, 1.8rem);
	color:#333;
}

.resourceDetail__description p + p {
  margin-top: 16px;
}


/* ========================================
   Points
========================================= */

.resourceDetail__points {
  margin-top: 35px;
  padding: 25px 28px;

  border-left: 3px solid #29388e;

  background: #f7f8fb;
}

.resourceDetail__pointsTitle {
	margin: 0 0 14px;
	color: #303646;
	font-size: clamp(1.4rem, 1.259rem + 0.376vw, 1.8rem);
	font-weight: 700;
}

.resourceDetail__points ul {
  margin: 0;
  padding: 0;

  list-style: none;
}

.resourceDetail__points li {
	position: relative;
	margin: 0;
	padding-left: 22px;
	color: #555c69;
	font-size: clamp(1.4rem, 1.33rem + 0.188vw, 1.6rem);
	line-height: 1.85;
}

.resourceDetail__points li + li {
  margin-top: 6px;
}

.resourceDetail__points li::before {
  content: "";

  position: absolute;
  top: 0.75em;
  left: 2px;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background: #e84750;
}


/* ========================================
   Download
========================================= */

.resourceDetail__download {
  margin-top: 54px;

  text-align: center;
}


/* button */

.resourceDetail__downloadButton {
  display: block;

  width: min(420px, 100%);
  height: 80px;

  margin: 0 auto;

  color: #fff;

  font-size: clamp(1.6rem, 1.53rem + 0.188vw, 1.8rem);
  line-height: 80px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;

  border-radius: 4em;

  background-color: #e84d3f;

  background-image:
    url("../images/arrow_cta.svg"),
    linear-gradient(
      90deg,
      #e84d3f 0%,
      #ed6435 50%,
      #f28a27 100%
    );

  background-repeat: no-repeat;

  background-position:
    right 5% center,
    left center;

  background-size:
    4% auto,
    200% 100%;

  transition:
    background-position 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.2s ease;
}

.resourceDetail__downloadButton:hover,
.resourceDetail__downloadButton:focus-visible {
	background-position:
		right 4% center,
		right center;
	box-shadow:
		0 8px 20px rgba(0, 0, 0, 0.16);
	color:#fff;
}


/* note */

.resourceDetail__downloadNote {
  margin: 13px 0 0;

  color: #333;

  font-size: clamp(1.2rem, 1.13rem + 0.188vw, 1.4rem);

  line-height: 1.6;
}


/* ========================================
   Back Link
========================================= */

.resourceDetailBack {
  max-width: 1100px;

  margin: 65px auto 0;
  padding-top: 30px;

  border-top: 1px solid #d5d9e0;

  text-align: center;
}

.resourceDetailBack__link {
  display: inline-flex;
  align-items: center;

  gap: 12px;

  color: #343a49;

  font-size: 14px;
  font-weight: 700;

  text-decoration: none;

  transition: color 0.25s ease;
}

.resourceDetailBack__arrow {
  color: #29388e;

  font-size: 20px;

  transition: transform 0.25s ease;
}

.resourceDetailBack__link:hover {
  color: #29388e;
}

.resourceDetailBack__link:hover
.resourceDetailBack__arrow {
  transform: translateX(-4px);
}


/* ========================================
   Tablet
========================================= */

@media screen and (max-width: 960px) {

  .resourceDetail__main {
    grid-template-columns: 40% minmax(0, 1fr);

    gap: 40px;

    padding: 36px;
  }

  .resourceDetail__visual {
    min-height: 430px;

    padding: 28px;
  }

  .resourceDetail__cover img {
    max-height: 430px;
  }

}


/* ========================================
   Mobile
========================================= */

@media screen and (max-width: 700px) {

  .resourceDetail {
    width: calc(100% - 32px);

    padding: 45px 0 72px;
  }

  .resourceDetail__main {
    display: flex;
    flex-direction: column;

    gap: 32px;

    padding: 22px;
  }


  /* cover */

  .resourceDetail__visual {
    min-height: 0;

    height: 410px;

    padding: 28px;
  }

  .resourceDetail__cover img {
    max-height: 350px;
  }


  /* content */

  .resourceDetail__content {
    padding: 0;
  }


  /* meta */

  .resourceDetail__meta {
    justify-content: flex-start;

    margin-bottom: 18px;
  }


  /* title */

  .resourceDetail__title {
    margin-bottom: 25px;
    padding-bottom: 19px;

    font-size: 26px;
  }


  /* text */

  .resourceDetail__description {
    font-size: 14px;
    line-height: 1.9;
  }


  /* points */

  .resourceDetail__points {
    margin-top: 28px;
    padding: 21px 20px;
  }


  /* download */

  .resourceDetail__download {
    margin-top: 40px;
  }

  .resourceDetail__downloadButton {
    width: min(100%, 360px);

    height: 64px;

    line-height: 64px;
  }

}


/* ========================================
   Small Mobile
========================================= */

@media screen and (max-width: 420px) {

  .resourceDetail__visual {
    height: 350px;
  }

  .resourceDetail__cover img {
    max-height: 295px;
  }

}