@charset "UTF-8";




/* =========================================================
Layout Components
========================================================= */

/* 背景アニメーションCanvas */
.p-top__bgCanvas {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 1;
  pointer-events: none;
}

/* Header */
.l-header {
  display: flex;
  align-items: center;
  gap: var(--gap01);
  width: 100%;
  position: relative;
  z-index: 100;
  padding-left: var(--gap05);
  transition: all 0.3s ease;
}
@media (max-width: 768px) {
	.l-header {
		padding-left: var(--gap04);
	}
}
@media (max-width: 640px) {
	.l-header {
		padding-left: var(--gap04);
  		gap: var(--gap02);
	}
}

/* ヘッダー追尾表示 */
.l-header.__sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(10px);
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  animation: headerSlideIn 0.3s ease-out;
}

/* ヘッダー追尾非表示 */
.l-header.__sticky-out {
  animation: headerSlideOut 0.3s ease-in forwards;
}

/* ヘッダープレースホルダー */
.l-header__placeholder {
  transition: height 0.3s ease;
}

/* 上から下にスライドイン */
@keyframes headerSlideIn {
  0% {
    transform: translateY(-100%);
    opacity: 0;
  }
  100% {
    transform: translateY(0);
    opacity: 1;
  }
}

/* 下から上にスライドアウト */
@keyframes headerSlideOut {
  0% {
    transform: translateY(0);
    opacity: 1;
  }
  100% {
    transform: translateY(-100%);
    opacity: 0;
  }
}



.l-headerInner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--gap05);
}

.l-headerLogo {
  display: flex;
  align-items: center;
  gap: var(--gap04);
  flex-shrink: 0;
}
@media (max-width: 1440px) {
	.l-headerLogo {
		gap: var(--gap00);
	}
}
@media (max-width: 768px) {
	.l-headerLogo__item {
		width: 109px;
	}
}
.l-headerLogo__desc {
  display: flex;
  flex-direction: column;
  gap: 1px;
  font-size: var(--fs-tiny);
  font-weight: 700;
}
@media (max-width: 1440px) {
	.l-headerLogo__desc {
		display: none;
	}
}


.l-headerActions {
  display: flex;
  align-items: center;
  gap: 1px;
  position: relative;
}

.l-headerActions__btn {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 90px;
	height: 100px;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: var(--gap02) var(--gap00);
	background: var(--gradient-header-actions);
	border: none;
	cursor: pointer;
	transition: opacity .3s;
	color: var(--base-color02);
	font-size: 15px;
	@media (max-width: 768px) { 
		font-size: var(--fs-min);
		width: 80px;
		height: 90px;
	}
	@media (max-width: 640px) {
		width: 70px;
		height: 80px;
	}

	&:hover {
		opacity: .9;
	}

	&.__menu {
		display: none;
	}

	&.__login {
		background: var(--accent-color01);
		color: #fff;
	}
}


@media (max-width: 1024px) {
	.l-headerActions__btn.__menu {
	  display: flex;
	}
}



.l-headerActions__icon {
  font-size: var(--fs-large)!important;
}


.l-headerActions__badge {
  position: absolute;
  top: 23px;
  right: 12px;
  width: 20px;
  height: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-color03);
  border-radius: 2px;
  font-family: var(--font-quantico);
  font-size: var(--fs-tiny);
  color: var(--base-color02);
}
@media (max-width: 768px) {
	.l-headerActions__badge {
    top: 8px;
    right: 8px;
    width: 16px;
	}
}

.l-headerActions__btnText {
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-text-overflow: ellipsis;
  width: -webkit-fill-available;
}


.l-breadcrumb {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap01);
  width: 100%;
  padding-top: var(--gap08);
}
@media (max-width: 768px) {
	.l-breadcrumb {
    margin-bottom: 0;
	}
}

.l-breadcrumbText {
  flex: 1;
  font-weight: 500;
  color: var(--text-color01);
  font-size: var(--fs-min);
}

/* =========================================================
p-topHero
========================================================= */


/* Hero Section */
.p-topHero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap01);
  width: 100%;
  background: var(--gradient-hero);
  overflow: hidden;
}
@media (max-width: 1024px) {
	.p-topHero {
		overflow: inherit;
	}
}

.p-topHero__bgText {
  position: absolute;
  top: 120px;
  left: 0;
  opacity: .11;
  font-family: var(--font-quantico);
  font-weight: 500;
  font-size: 10vw;
  text-align: center;
  letter-spacing: -3px;
  white-space: nowrap;
  mix-blend-mode: plus-lighter;
}

@media (max-width: 1024px) {
	.p-topHero__bgText {
		font-size: 20vw;
		list-style: 1;
		white-space: initial;
		text-wrap: balance;
		text-align: left;
	}
}

.p-topHero__cont {
	width: 100%;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap05);
  position: relative;
  z-index: 1;
  margin-top: 20vh;

  @media (max-width: 1024px) {
    margin-top: 0;
  }
}
.p-topHero__textBox {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap01);
}

.p-topHero__title {
  font-weight: 700;
  color: var(--base-color02);
  font-size: var(--fs-big);
  letter-spacing: -1.65px;
  line-height: 1.2;
}
@media (max-width: 640px) {
	.p-topHero__title {
    font-size: var(--fs-xlarge);
  }
}
@media (max-width: 480px) {
	.p-topHero__title {
    font-size: var(--fs-large);
  }
}

@media (max-width: 1024px) {
	.p-topHero__titleWrap {
		background: var(--base-color01);
		padding: 2px var(--gap02) 5px;
		margin-bottom: 1px;
	}
}

.p-topHero__desc {
  font-weight: 500;
  color: var(--base-color02);
  font-size: var(--fs-p);
  line-height: 1.5;
}


.p-topHero__features {
  display: flex;
  gap: var(--gap00);
  width: 100%;
}

.p-topHero__featuresLabel {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--gap01);
  padding: var(--gap01) var(--gap02);
  background: var(--accent-color08);
  font-weight: 700;
  color: var(--base-color02);
  font-size: var(--fs-mid);
  text-align: center;
}
@media (max-width: 1024px) {
	.p-topHero__featuresLabel {
		display: none;
	}
}

.p-topHero__featuresList {
  display: inline-flex;
  align-items: center;
  gap: var(--gap04);
  padding: var(--gap01) var(--gap04);
  background: var(--base-color01);
}
@media (max-width: 1024px) {
	.p-topHero__featuresList {
		background: none;
		padding: 0;
		flex-wrap: wrap;
	}
}


.p-topHero__featureItem {
  display: inline-flex;
  align-items: center;
  gap: var(--gap01);
}

.p-topHero__featureIcon {
  width: 10px;
  height: 10px;
  background: var(--accent-color08);
}

.p-topHero__featureText {
  font-weight: 700;
  color: var(--base-color02);
  font-size: var(--fs-mid);
  white-space: nowrap;
}
@media (max-width: 1024px) {
	.p-topHero__featureText {
	}
}

.p-topLead {
  position: relative;
  z-index: 1;
	display: none;
  font-weight: 700;
  color: var(--base-color02);
  font-size: var(--fs-mid);
  padding-top: var(--gap05);
  border-top: 1px solid var(--base-color02);
}
@media (max-width: 1024px) {
	.p-topLead {
		display: block;
		width: 100%;
	}
}

.p-topHero__device {
  position: absolute;
  top: var(--gap08);
  right: var(--gap08);
  height: 700px;
  z-index: 0;
  display: block;
  width: clamp(300px,32vw,750px);
  @media (max-width: 1440px) {
    top: var(--gap05);
    right: 0;
    width: 450px;
  }
  @media (max-width: 1024px) {
    position: relative;
    top: 0;
    right: 0;
    height: 400px;
    width: clamp(400px, 45vw, 560px);
    display: flex
;
    justify-content: center;
    align-items: center;
    margin: auto;
  }
  @media (max-width: 640px) {
    height: 200px;
    width: 260px;
    top: -40px;
  }
}
.p-topHero__deviceImg {
  position: absolute;
  display: block;
  object-fit: contain;

  &.__pc {
    right: 0;
    top: 0;
    @media (max-width: 1024px) {
      right: -6vw;
      height: auto;
    }
    @media (max-width: 640px) {
      right: -30px;
    }
  }
  &.__sp {
    left: clamp(-6rem, 20vw, -10rem);
    width: clamp(100px, 11vw, 175px);
    bottom: clamp(10rem, 20vw, 15rem);
    @media (max-width: 1440px) {
      left: -100px;
      width: 15vw;
      bottom: 250px;
    }
    @media (max-width: 1024px) {
      left: -5vw;
      width: 20vw;
      bottom: 0;
    }
    @media (max-width: 640px) {
      left: -20px;
      width: 100px;
      bottom: -70px;
    }
  }

}

/* =========================================================
p-topCourses
========================================================= */
/* Courses Section */
.p-topCourses {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-start;
  background: #fff;
  box-shadow: 0 4px 25px rgba(17,28,59,.25);
  position: relative;
  z-index: 1;
  overflow: visible;
}
.p-topCourses__tabs,
.p-topCourses__category,
.p-topCourses__items,
.p-topCourses__link {
	padding: 0 var(--gap07);
	font-size: var(--fs-mid);
}
@media (max-width: 1024px) {
	.p-topCourses__tabs,
	.p-topCourses__category,
	.p-topCourses__items,
  .p-topCourses__link {
		padding: 0 var(--gap04);
		font-size: var(--fs-mid);
	}
}
.p-topCourses__tabs {
  display: inline-flex;
  align-items: flex-start;
  position: relative;
}

@media (max-width: 1024px) {
	.p-topCourses__tabs {
		position: sticky;
		top: 0;
		bottom: 100px;
		z-index: 10;
		background: #fff;
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
		width: 100%;
		left: 0;
		right: 0;
	}
	
	.p-topCourses__tabs::-webkit-scrollbar {
		display: none;
	}
}
/* Course Tab */
.p-topCourses__tabItem {
	font-weight: 700;
	color: var(--text-color01);
	background: none;
	border: none;
	cursor: pointer;
	white-space: nowrap;
	flex-shrink: 0;
	position: relative;
	padding: var(--gap04);
	transition: all 0.2s ease-out; /* ホバーエフェクト用のトランジション追加 */
  
	&.inactive {
	  opacity: .32;
	}
  
	&.active {
	  &::after {
		content: "";
		position: absolute;
		top: -0px;
		left: 0;
		width: 100%;
		height: 3px;
		background: var(--accent-color01);
	  }
	}
	
	&:hover {
		opacity: 1;
		transform: translateY(-2px);
	}
}
@media (max-width: 1024px) {
	.p-topCourses__tabItem {
		padding: var(--gap04) var(--gap02);
	}
}


.p-topCourses__category {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  background: var(--base-color02);
}

@media (max-width: 1024px) {
	.p-topCourses__category {
		position: sticky;
		top: 50px;
		bottom: 50px;
		z-index: 9;
		background: var(--base-color02);
		overflow-x: auto;
		white-space: nowrap;
		-webkit-overflow-scrolling: touch;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}
	
	.p-topCourses__category::-webkit-scrollbar {
		display: none;
	}
}
.p-topCourses__categoryList {
  display: inline-flex; 
  align-items: center;
  padding: var(--gap01) 0;
  gap: var(--gap02);
}

@media (max-width: 1024px) {
	.p-topCourses__categoryList {
		white-space: nowrap;
		flex-wrap: nowrap;
	}
}

@media (max-width: 1080px) {
	.p-topCourses__categoryList {
		white-space: nowrap;
		flex-wrap: nowrap;
	}
}
@media (max-width: 1024px) {
	.p-topCourses__categoryItem {
		gap: var(--gap01);
	}
}
.p-topCourses__categoryItem {
	padding: var(--gap02);
	display: inline-flex;
	align-items: flex-start;
	background: var(--base-color02);
	font-weight: 700;
	white-space: nowrap;
	flex-shrink: 0;
	color: var(--text-color01);
	border: 1px solid transparent;
	cursor: pointer;
	transition: all 0.2s ease-out; /* ホバーエフェクト用のトランジションに統合 */

	&:hover {
		border: 1px solid var(--accent-color02);
		transform: translateY(-1px);
		background: rgba(255,255,255,.8);
	}
  
	&.active {
		background: rgba(255,255,255,.8);
	  border: 1px solid var(--accent-color02);
	  color: var(--accent-color01);
	}
}
@media (max-width: 1024px) {
	.p-topCourses__categoryItem {
		padding: var(--gap01);
	}
}

.p-topCourses__items {
	width: 100%;
  
	grid-template-columns: 1fr 1fr 1fr 1fr;
    display: grid;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--gap04) 0;
  padding-top: var(--gap04);
  padding-bottom: var(--gap04);
}
@media (max-width: 1024px) {
	.p-topCourses__items {
		gap: var(--gap01);
		grid-template-columns: 1fr 1fr 1fr;
	}
}
@media (max-width: 768px) {
	.p-topCourses__items {
		grid-template-columns: 1fr 1fr;
	}
}
@media (max-width: 480px) {
	.p-topCourses__items {
		grid-template-columns: 1fr;
	}
}

.p-topCourses__itemsBox {
	position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap00);
  padding: var(--gap01) var(--gap04);
  cursor: pointer;
  width: 100%;
  min-width: 0; /* flexアイテムの縮小を許可 */
  transition: all 0.3s ease-out; /* ホバーエフェクト用のトランジション追加 */

  &::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 5px;
	height: 100%;
	background: var(--gradient-line02);        
	filter: brightness(0.2);
	opacity: .1;
	transition: background 0.2s, height 0.2s, opacity 0.2s, filter 0.2s;
  }
  &:hover {
	transform: translateY(-4px);
	&::before {
	  background: var(--gradient-line02);
	  filter: brightness(1);
	  opacity: 1;
	}
	.p-topCourses_itemBox__title {
		color: var(--accent-color01);
	}
  }
}
@media (max-width: 1024px) {
	.p-topCourses__itemsBox {
		padding: var(--gap01) var(--gap04);
	}
}
.p-topCourses__itemsBox__info {
	display: inline-flex;
	gap: 5px;
	align-items: center;
	font-weight: 500;
	font-size: var(--fs-tiny);
}
.p-topCourses_itemBox__title {
	font-weight: 700;
	transition: color 0.3s;
	width: 100%;
	min-width: 0; /* flexアイテムの縮小を許可 */
	
	/* テキスト省略の設定 */
	white-space: nowrap; /* 改行しない */
	overflow: hidden; /* 溢れた部分を隠す */
	text-overflow: ellipsis; /* 「…」と省略 */
	-webkit-text-overflow: ellipsis; /* Safari用 */
	-o-text-overflow: ellipsis; /* Opera用 */
}
.p-topCourses_itemBox__price {
	font-weight: 700;
	font-family: var(--font-outfit);
	color: var(--accent-color01);
	&.__campaign {
		display: flex;
		gap: var(--gap00);
		align-items: center;
		color: var(--accent-color04);
		&::after {
			content: "期間限定";
			font-size: 11px;
			display: flex;
			justify-content: center;
			align-items: center;
			color: var(--accent-color04);
			border: 1px solid var(--accent-color04);
			padding: 1px 6px;
			border-radius: 2px;
		}
	}
}
/* 講座一覧タブ切り替えアニメーション */

.p-topCourses__items {
	transition: opacity 300ms ease-out, transform 300ms ease-out;
}

.p-topCourses__noResults {
	grid-column: 1 / -1;
	text-align: center;
	padding: var(--gap08);
	color: var(--text-color02);
	font-size: var(--fs-p);
}

.p-topCourses__link {
  width: 100%;
  padding-bottom: var(--gap04);
}



/* =========================================================
p-topNews
========================================================= */
/* News Section */
.p-topNews {
  position: relative;
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  gap: var(--gap10);
}
@media (max-width: 768px) {
	.p-topNews {
    flex-direction: column;
    gap: var(--gap05);
	padding: var(--gap10) var(--gap05) var(--gap05) !important;
	}
}

.p-topNews__head {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap03);
  flex-shrink: 0;
}
@media (max-width: 768px) {
	.p-topNews__head {
    gap: var(--gap02);
	}
}

.p-topNews__titleWrap {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
}

.p-topNews__title {
  font-weight: 700;
  color: var(--text-color01);
  font-size: 20px;
  text-decoration: underline;
  white-space: nowrap;
}

.p-topNews__subtitle {
  font-family: var(--font-quantico);
  font-weight: 500;
  color: var(--text-color01);
  font-size: 13px;
}

.p-topNews__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  flex: 1;
}

/* News Item */
.p-topNews__item {
	position: relative;
	width: 100%;
  display: inline-flex;
  align-items: center;
  gap: var(--gap04);
  padding-bottom: var(--gap04);
  margin-bottom: var(--gap04);
  border-bottom: 1px solid var(--border-color01);
}
@media (max-width: 768px) {
	.p-topNews__item {
    flex-wrap: wrap;
    justify-content: space-between;
	}
}

.p-topNews__category {
  font-weight: 500;
  color: var(--text-color01);
  font-size: var(--fs-tiny);
  white-space: nowrap;
}

.p-topNews__date {
  font-family: var(--font-quantico);
  font-weight: 500;
  color: var(--text-color01);
  font-size: var(--fs-tiny);
  white-space: nowrap;
}

.p-topNews__text {
  font-weight: 700;
  color: var(--text-color01);
  font-size: var(--fs-mid); 
}

.p-topNews__scroll {
  position: absolute;
  top: -1px;
  right: 0;
  color: var(--text-color04);
  font-size: 10px;
  font-family: var(--font-quantico);
  font-weight: 100;
  letter-spacing: 3px;

  display: flex;
  justify-content: center;
  align-items: center;
  padding: var(--gap03)  var(--gap10);
  background: var(--accent-color02);
	@media (max-width: 640px) {
  		padding: var(--gap03)  var(--gap06);
		font-size: 0px;
	}
}


/* =========================================================
p-topStrength
========================================================= */
/* Strength Section */
.p-topStrength {
	margin-top: 0 !important;
	padding-top: 0!important;
  padding-bottom: 20rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  align-items: flex-end;
  gap: var(--gap08);
  position: relative;
}
@media (max-width: 768px) {
  .p-topStrength {
    padding-bottom: var(--gap10);
    margin-bottom: 0px!important;
	}
}

.p-topStrength__head {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-end;
  position: relative;
  gap: var(--gap04);
  margin-bottom: var(--gap08);
}

.p-topStrength__title {
  font-weight: 700;
  font-size: var(--fs-huge);
  text-align: right;
  letter-spacing: -1.75px;
  flex-shrink: 0;
  line-height: 1.2;
	@media (max-width: 768px) {
		font-size: 2.4rem;
	}
	@media (max-width: 640px) {
		font-size: 1.9rem;
	}
}

.p-topStrength__subtitle {
  font-family: var(--font-outfit);
  font-weight: 500;
  color: var(--accent-color02);
  font-size: var(--fs-p);
}

.p-topStrength__cont {
  width: 100%;
  display: flex;
  justify-content: space-between;
  gap: var(--gap07); 
}
@media (max-width: 768px) {
	.p-topStrength__cont  {
    flex-direction: column;
    gap: var(--gap10); 
	}
}

.p-topStrength__pic {
  flex-basis: 70%;
}
.p-topStrength__picWrap {
  position: relative;
  height: 100%;
}
.p-topStrength__picBg {
    position: sticky;
    top: 3rem;
}
.p-topStrength__picBg__img {
    object-fit: cover;
	height: 120%!important;
  object-position: 40%;
}
.p-topStrength__picDevice {
  position: absolute;
  bottom: -14rem;
  left: 0;
  right: 0;
  width: 90%; 
  margin: auto;
  mix-blend-mode: multiply;
  z-index: 10;
	@media (max-width: 768px) {
		bottom: -100px;
		width: 80%; 
	}
}
.p-topStrength__list {
	flex-basis: 50%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap08);
  counter-reset: p-topStrength__boxNum;
  padding: var(--gap10) 0 var(--gap04);
	@media (max-width: 768px) {
  		gap: var(--gap05);
	}
}

.p-topStrength__box {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap03);
  width: 100%;
  counter-increment: p-topStrength__boxNum;
}

.p-topStrength__boxNum {
	width: 100%;
  display: flex;
  align-items: center;
  gap: var(--gap03);

  &::before {
	content: "0" counter(p-topStrength__boxNum);

	font-family: var(--font-outfit);
	font-weight: 700;
	color: var(--accent-color02);
	font-size: var(--fs-xlarge);
	white-space: nowrap;
  }
}
.p-topStrength__boxNum__bar {
	position: relative;
	width: 100%;
	height: 2px;
	background: var(--base-color05);
	&::before {
		content: "";
		display: block;

		position: absolute;
		top: 0;
		left: 0;
		width: 50px;
		background: var(--gradient-line03);
		height: 2px;
  }
}

.p-topStrength__boxTitle {
	font-weight: 700;
	color: var(--text-color01);
	font-size: var(--fs-title);
	width: 100%;
	@media (max-width: 768px) {
		font-size: var(--fs-subtitle);
	}
}

.p-topStrength__boxDesc {
  font-weight: 500;
  color: var(--text-color01);
  font-size: var(--fs-p);
  white-space: pre-line;
  width: 100%;
	@media (max-width: 768px) {
		font-size: var(--fs-mid);
	}
}

/* =========================================================
p-topCase
========================================================= */
/* Case Study Section */
.p-topCase {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: var(--base-color01);
}

.p-topCase__inner {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  gap: var(--gap08);
	padding-top: var(--gap10)!important;
	padding-bottom: var(--gap10)!important;
}

@media (max-width: 1080px) {
	.l-wrap .p-topCase__inner {
		padding-right: 0!important;
	}
}
@media (max-width: 768px) {
	.l-wrap .p-topCase__inner {
    padding: var(--gap00) 0 var(--gap00)!important;
	}
}

.p-topCase__header {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
  text-align: center;
	gap: var(--gap04);
  width: 100%;
  position: relative;
}
@media (max-width: 768px) {
	.p-topCase__header {
    padding: 0 var(--gap05);
	}
}

.p-topCase__title {
  font-weight: 700;
  color: white;
  font-size: var(--fs-xlarge);
}

.p-topCase__subtitle {
  font-family: var(--font-outfit);
  font-weight: 500;
  color: var(--accent-color01);
  font-size: var(--fs-p);
  text-align: center;
  width: 100%;
}

.p-topCase__cont {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap04);
  width: 100%;
  color: var(--text-color04);
}

@media (max-width: 768px) {
	.p-topCase__cont {
    padding: 0 0 0 var(--gap04);
	}
}

.p-topCase__category {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap05);
  width: 100%;
}

.p-topCase__categoryTitle {
display: flex;
align-items: center;
  font-weight: 700;
  gap: var(--gap04);
  color: var(--text-color04);
  font-size: var(--fs-p);
  &::before {
	content: "";
	display: block;
	width: 6vw;
	height: 5px;
	background: var(--gradient-line04);
  }
}

.p-topCase__unit {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: var(--gap04);
  width: 100%;
}

@media (max-width: 1080px) {
  .p-topCase__unit {
    display: flex;
    overflow-x: auto;
    gap: var(--gap04);
    padding-bottom: 10px;
    scroll-behavior: smooth;
    -webkit-overflow-scrolling: touch;
    position: relative;
  }
  
  /* スクロールバーを非表示 */
  .p-topCase__unit::-webkit-scrollbar {
    display: none;
  }
  
  .p-topCase__unit {
    -ms-overflow-style: none; /* IE and Edge */
    scrollbar-width: none; /* Firefox */
  }
}

.p-topCase__card {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  border-radius: 2px;
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 15px;
    aspect-ratio: 1/1;
    background-color: var(--accent-color02);
    z-index: 2;
  }
}

@media (max-width: 1080px) {
  .p-topCase__card {
    flex: 0 0 80vw;
    min-width: 80vw;
    max-width: 80vw;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
  }
  
  .p-topCase__card:last-child {
    margin-right: var(--gap06);
  }
}

.p-topCase__cardBg {
  position: absolute;
  top: 0;
  left: 0;
  &::before {
	content: "";
	position: absolute;
	bottom: 0;
	width: 100%;
	height: 200px;
	z-index: 2;
	background: var(--gradient-card-overlay);
  }
  
}
.p-topCase__cardBg__img {
	position: relative;
	width: 100%;
	top: 0;
	left: 0;
	object-fit: cover;
	aspect-ratio: 1.618/1;
	object-position: center;
	z-index: 1;
}

.p-topCase__cardCont {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap01);
  padding: var(--gap04);
  padding-top: 10vw;
  position: relative;
  z-index: 10;
}
@media (max-width: 1080px) {
  .p-topCase__cardCont {
    padding-top: 30vw;
  }
}

.p-topCase__company {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--gap00);
  width: 100%;
}

.p-topCase__companyName {
  font-weight: 700;
  color: var(--text-color04);
  font-size: var(--fs-min);
  text-align: right;
  width: 100%;
}

.p-topCase__companyScale {
  font-weight: 500;
  color: var(--text-color04);
  font-size: var(--fs-min);
}

.p-topCase__main {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--gap04);
  width: 100%;
}

.p-topCase__desc {
  display: flex;
  flex-direction: column;
  gap: var(--gap00);
  width: 100%;
  &.__problem {
		.p-topCase__descCat {
			color: var(--accent-color03);
			&::before {
				content: "\e5cd";
			}
		}
	}
  &.__solution {
		.p-topCase__descCat {
			color: var(--accent-color01);
			&::before {
				content: "\ef4a";
			}
		}
	}
}

.p-topCase__descCat {
	display: flex;
	align-items: center;
	gap: var(--gap00);
  font-weight: 700;
  font-size: var(--fs-min);
  &::before {
	content: "";
	font-family: 'Material Symbols Outlined';
  }
}

.p-topCase__descTitle {
  font-weight: 700;
  color: var(--text-color04);
  font-size: var(--fs-postp);
	line-height: 1.6;
  width: 100%;
  @media (max-width: 768px) {
  	font-size: var(--fs-p);
	line-height: 1.4;
  }
}

.p-topCase__descText {
  font-weight: 500;
  color: var(--text-color04);
  font-size: var(--fs-min);
}

.p-topCase__separator {
	position: relative;
	width: 100%;
	&::before {
		content: "";
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 1px;
		background: #2F3C63;
	}
	&::after {
		content: "";
		position: absolute;
		top: 4px;
		bottom: 0;
		left: 0;
		right: 0;
		margin: auto;
		width: 45px;
		height: 20px;

		clip-path: polygon(0 0,50% 70%,100% 0);
		background: var(--gradient-line02);
	}
}

/* =========================================================
p-topFlow
========================================================= */
/* Flow Section */
.p-topFlow {
  width: 100%;
  background: var(--gradient-hero-simple);
  position: relative;
  color: var(--text-color04);
  margin-bottom: var(--gap10);
}
@media (max-width: 768px) {
	.p-topFlow {
    margin-bottom: var(--gap10);
  }
}
.p-topFlow__wrap {
  position: relative;
  padding-bottom: var(--gap10);
}
.p-topFlow__inner {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap05);
}

.p-topFlow__header {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  position: relative;
}

.p-topFlow__headerContent {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.p-topFlow__title {
  font-weight: 700;
  color: var(--text-color04);
  font-size: var(--fs-big);
  text-align: right;
  width: 100%;
	@media (max-width: 768px) {
  		font-size: var(--fs-xlarge);
	}
}

.p-topFlow__subtitle {
  font-family: var(--font-outfit);
  font-weight: 500;
  color: var(--base-color02);
  font-size: var(--fs-p);
  width: 100%;
}

.p-topFlow__content {
  display: flex;
  gap: var(--gap10);
  width: 100%;
}
@media (max-width: 768px) {
	.p-topFlow__content {
    gap: var(--gap06);
    flex-direction: column-reverse;
	}
}

.p-topFlow__link {
	font-size: var(--fs-min);
	flex-shrink: 0;
}
@media (max-width: 768px) {
	.p-topFlow__link {
    padding-top: var(--gap06);
    border-top: 1px solid var(--border-color08);
  }
}

.p-topFlow__linkBox {
  position: sticky;
  top: var(--gap04);
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.p-topFlow__linkItem {
  display: inline-flex;
  align-items: center;
  gap: var(--gap02);
  padding: var(--gap02) var(--gap03);
  background: var(--accent-color10);
  color: var(--text-color04);
  width: 100%;
  transition: background .3s;

  &:hover {
	background: rgba(89,131,255,.9);
  }

  &::before {
	content: "";
	width: 10px;
	height: 10px;
	background: var(--accent-color07);
  }
}
@media (max-width: 768px) {
	.p-topFlow__linkItem {
    width: fit-content;
  }
}

.p-topFlow__main {
  display: flex;
  flex-direction: column;
  flex-basis: 100%;
}

.p-topFlow__box {
  display: flex;
  align-items: center;
  gap: var(--gap07);
  width: 100%;
  &:not(:last-child) {
	margin-bottom: var(--gap07);
	padding-bottom: var(--gap07);
	border-bottom: 1px solid #7D9AF8;
  }
}
@media (max-width: 1024px) {
	.p-topFlow__box {
    flex-direction: column-reverse;
    align-items: baseline;
    gap: var(--gap05);
	}
}

.p-topFlow__boxInfo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap03);
  flex-basis: 100%;
}

.p-topFlow__boxInfo__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--gap00)var(--gap03);
  font-weight: 700;
  font-size: var(--fs-mid);
  color: var(--text-color01);
  background: var(--base-color02);

  &.__corp {
	color: var(--text-color04);
	background: var(--gradient-button02);
  }
}

.p-topFlow__boxInfo__title {
  font-weight: 700;
  color: var(--text-color04);
  font-size: var(--fs-large);
  width: 100%;
}

.p-topFlow__boxInfo__step {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap03);
  counter-reset: p-topFlow__boxInfo__stepItem;
}

.p-topFlow__boxInfo__stepItem {
	display: flex;
	align-items: flex-start;
	gap: var(--gap03);
	font-weight: normal;
	color: var(--text-color04);
	font-size: var(--fs-p);
	line-height: 1.6;
	counter-increment: p-topFlow__boxInfo__stepItem;
  &::before {
    content: counter(p-topFlow__boxInfo__stepItem) "";
    display: flex;
    justify-content: center;
    align-items: center;
    aspect-ratio: 1/1;
    padding: var(--gap01) var(--gap01);
    border: 1px solid var(--text-color04);
    font-size: var(--fs-tiny);
    font-family: var(--font-outfit);
    line-height: 1.6;
    color: var(--text-color04);
    height: 1vw;
    width: 1vw;
	@media (max-width: 1024px) {
		margin-top: 3px;
	}
  }
}

.p-topFlow__boxInfo__stepItem__attention {
	display: block;
	font-size: var(--fs-min);
}

.p-topFlow__boxImg {
	position: relative;
	flex-basis: 100%;
	object-fit: cover;
    aspect-ratio: 1.618 / 1;
}
@media (max-width: 1024px) {
	.p-topFlow__boxImg {
    width: 100%;
	}
}
.p-topFlow__boxImg__item {
	object-fit: cover;
	aspect-ratio: 1.618/1;
}
.p-topFlow__boxImg__link {
	position: absolute;
	bottom: -1vw;
	right: 0;

	display: flex;
	justify-content: center;
	align-items: center;
	gap: var(--gap02);
	padding: var(--gap04) var(--gap05);
	background: var(--gradient-button01);

	color: var(--text-color04);
	font-size: var(--fs-mid);
	font-weight: 700;
	&::after {
		content: "";
		width: 10px;
		height: 10px;
		background: var(--gradient-icon01);
	}
}
@media (max-width: 1024px) {
	.p-topFlow__boxImg__link {
    bottom: -25px;
	}
}
/* Footer Additional Styles */


/* Footer */
.l-footer {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: center;
  gap: var(--gap10);
}
@media (max-width: 768px) {
	.l-footer {
    gap: var(--gap05);
	padding-bottom: 80px;
	}
}

.l-footerCourses {
  display: flex;
  flex-direction: column;
  width: 100%;
  align-items: flex-start;
  gap: var(--gap08);
}
@media (max-width: 768px) {
	.l-footerCourses {
    display: none;
	}
}

.l-footerCategory {
  position: relative;
  display: flex;
  width: 100%;
  gap: var(--gap05);
	&::before {
    content: "";
    position: absolute;
    top: -25px;
    left: 0;
    width: 50%;
    height: 2px;
    background: var(--gradient-line01);
  }
}
@media (max-width: 768px) {
	.l-footerCategory {
    flex-direction: column;
	}
}

.l-footerCategory__title {
  font-weight: 700;
  width: clamp(200px, 10vw, 250px);
  flex-shrink: 0;
  font-size: var(--fs-mid);
}

.l-footerCategory__items {
  display: inline-flex;
  align-items: center;
  gap: var(--gap04);
  flex-wrap: wrap;
  list-style: none;
}

.l-footerCategory__item {
  font-weight: 500;
  cursor: pointer;
  font-size: var(--fs-mid);

  &:hover {
	text-decoration: underline;
  }
}

.l-footerCategory {
	
	&.__partner {
		.l-footerCategory__item {
			display: flex;
			align-items: center;
			gap: var(--gap00);
			&::after {
				content: "\e89e";
				font-family: 'Material Symbols Outlined';
				font-size: var(--fs-tiny);
				color: var(--accent-color01);
			}
		}

	}
}

.l-footerOthers {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 100%;
  max-width: var(--max-width-big);
  margin-left: auto;
  margin-right: auto;
  padding-left: var(--ptb-big);
  padding-right: var(--ptb-big);
}
@media (max-width: 768px) {
	.l-footerOthers {
    padding-left: var(--gap05);
    padding-right: var(--gap05);
	}
}
@media (max-width: 768px) {
	.l-footerOthers {
    padding-left: 0;
    padding-right: 0;
	}
}

.l-footerAllCourses {
  display: none!important;
}
@media (max-width: 768px) {
	.l-footerAllCourses {
    display: flex!important;
	}
}


.l-footerPartner {
  display: flex;
  gap: var(--gap03);
  justify-content: center;
  align-items: center;
  padding: var(--gap05);
  width: 100%;
  font-size: var(--fs-mid);
  background: var(--base-color03);
}
.l-footerPartner__link {
	flex-shrink: 0;
}
.l-footerPartner__logo {
  width: clamp(80px, 8vw, 120px);
}

.l-footerSat__cont {
  width: 812px;
  height: 38px;
  position: relative;
}

.l-footerSat__text {
  font-weight: 700;
  color: var(--text-color01);
  font-size: var(--fs-p);
}

.l-footerInfo {
  display: flex;
  width: 100%;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--gap08);
}
@media (max-width: 768px) {
	.l-footerInfo {
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: var(--gap08);
	}
}

.l-footerInfo__logoSec {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--gap01);
  font-size: var(--fs-min);
  font-weight: 500;
  flex-shrink: 0;
}
@media (max-width: 768px) {
  .l-footerInfo__logoSec {
    align-items: center;
    gap: var(--gap03);
    font-size: var(--fs-p);
  }
}
.l-footerInfo__logo {

}

.l-footerInfo__logoText {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
  width: 100%;
  font-size: var(--fs-min);
}

.l-footerInfo__nav {
  display: inline-flex;
  align-items: flex-start;
  justify-content: space-evenly;
  gap: var(--gap08);
  font-size: var(--fs-mid);
  font-weight: 500;
}
@media (max-width: 1440px) {
  .l-footerInfo__nav {
    width: 100%;
    display: grid;
    gap: var(--gap08) var(--gap04);
    grid-template-columns: 1fr 1fr;
    font-size: var(--fs-mid);
  }
}

.l-footerInfo__navList {
	position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  list-style: none;
  gap: var(--gap03);
	&::before {
		content: "";
		position: absolute;
		top: -25px;
		left: 0;
		width: 100%;
		height: 2px;
		background: var(--gradient-line01);
	}
}
@media (max-width: 768px) {
  .l-footerInfo__navList {
    width: 100%;
  }
}

.l-footerInfo__navLink {
	&:hover {
		text-decoration: underline;
	}
}

.l-footerInfo__colLine {
  width: 173px;
  height: 3px;
  transform: rotate(180deg);
  background: var(--gradient-line);
}

.l-footerInfo__link {
  font-weight: 500;
  color: var(--text-color01);
  font-size: 16px;
  cursor: pointer;

  &:hover {
	text-decoration: underline;
  }
}

.l-footerCopy {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-min);
  font-weight: 500;
  width: 100%;
	@media (max-width: 768px) {
		font-size: 10px;
	}
}




/* =========================================================
Utility Classes
========================================================= */

/* Icons */
.icon-chevron-down {
  width: 17px;
  height: 17px;
}

.icon-external {
  width: 20px;
  height: 20px;
}

/* Gradients */
.gradient-orange {
  background: var(--gradient-orange);
}

.gradient-blue {
  background: var(--gradient-blue);
}

/* Colors */
.color-blue {
  color: var(--accent-color01);
}

.color-problem {
  color: var(--accent-color03);
}

.color-solution {
  color: var(--accent-color01);
}

/* Badges */
.badge-corporate {
  background: var(--base-color02);
  color: var(--text-color01);
}

.badge-personal {
  background: var(--gradient-orange);
  color: var(--text-color04);
}


.l-ctaSide {
	position: fixed;
	right: 0;
	top: 0;
	bottom: 0;
	margin: auto;
	z-index: 10;

	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 1px;
}
@media (max-width: 768px) {
	.l-ctaSide {
    flex-direction: row;
    left: 0;
    top: inherit;
	}
}
.l-ctaSide__btn {
	display: inline-flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: var(--gap00);
	padding: var(--gap03) var(--gap03) var(--gap03);

	color: var(--text-color04);
	font-size: var(--fs-mid);
	font-weight: 700;
	text-align: center;
	letter-spacing: 2px;
    line-height: 1;

	&.__corp {
		background: var(--gradient-button02);
	}
	&.__inquiry {
		background: var(--gradient-button01);
	}
	
}
@media (max-width: 768px) {
	.l-ctaSide__btn {
    flex-direction: row;
    flex-basis: 100%;
	letter-spacing: 0px;
  }
}
.l-ctaSide__btnIcon {
	font-size: var(--fs-mid)!important;
}

.l-ctaSide__btnText {
	writing-mode: vertical-rl;
	-ms-writing-mode: tb-rl;
}
@media (max-width: 768px) {
	.l-ctaSide__btnText {
    writing-mode: inherit;
  }
}