@charset "utf-8";

/* ======================================================================
 * CSSカスタムプロパティ（変数）
 * ====================================================================== */
:root {
	--magenta: #d80084;
	--primary-red: #e60012;
	--white: #fff;
	--dark-gray: #374151;
	--charcoal-gray: #4b5563;
	--gray: #6b7280;
	--medium-gray: #9aa3b2;
	--soft-gray: #d1d5db;
	--light-gray: #e5e7eb;
	--pale-gray: #f3f4f6;

	--card: var(--white);
	--sub-card: #fafbfc;
	--text-dark: #1f2937;
	--text-light: var(--gray);

	--ewide-color: #003087;
	--espot-color: #00857a;

	--font-weight-bold: 600;
}

/* 小さいヒーローエリア
------------------------------------------------ */
.lf-hero-a.hero-small {
	height: 200px !important;
	max-height: 200px !important;
	min-height: 200px !important;
}

@media only screen and (max-width: 767px) {
	.lf-hero-a.hero-small {
		height: auto !important;
		min-height: auto !important;
		max-height: none !important;
	}
}

.lf-hero-a.hero-small .lf-hero-contents {
	justify-content: flex-start;
	align-items: center;
	width: 100%;
	padding-left: calc((100% - 1280px) / 2);
}

.lf-hero-a.hero-small .lf-hero-contents-inner {
	width: 100%;
}

@media only screen and (max-width:1280px) {
	.lf-hero-a.hero-small .lf-hero-contents-inner {
		width: 100%;
		margin-right: calc(275vw*100/1280);
	}
}

@media only screen and (max-width:767px) {
	.lf-hero-a.hero-small .lf-hero-contents {
		background-size: cover;
		background-position: center !important;
		background-repeat: no-repeat;
		min-height: 200px;
		display: flex;
		align-items: center;
		padding-right: 16px;
	}
	.lf-hero-a.hero-small .lf-hero-contents-inner {
		margin-right: 0;
		width: auto;
	}
}

.lf-hero-a .lf-hero-contents .lf-hero-contents-inner .sub-title {
	font-size: 2.0rem;
}

.lf-hero-a .lf-hero-contents .lf-hero-contents-inner .sub-title_btm {
	font-size: 1.4rem;
	margin-top: 16px;
}

.lf-hero-a.hero-small .lf-hero-contents-inner .main-title {
	font-size: 3.5rem;
}

@media screen and (max-width: 1280px) {
.lf-hero-a.hero-small .lf-hero-contents-inner .main-title {
		font-size: 3.5rem;
	}
}

@media screen and (max-width: 767px) {
	.lf-hero-a .lf-hero-contents .lf-hero-contents-inner .sub-title {
		font-size: 2.0rem;
	}
	.lf-hero-a .lf-hero-contents .lf-hero-contents-inner .sub-title_btm {
		font-size: 1.4rem;
	}
	.lf-hero-a.hero-small .lf-hero-contents-inner .main-title {
		font-size: 3.5rem;
		line-height: 1.2 !important;
		min-height: auto !important;
	}
}

@media only screen and (max-width: 1000px) {
	.main-contents .js-nav-fixed+.section .section-inner{
		margin-top:56px !important;
	}
}

/* ヒーローエリアの背景図
------------------------------------------------ */
.lf-hero-a.lf-cy-bl2 .lf-hero-contents {background-image: url(/solutions/common/images/infinity/lf-bgg-cy-bl.png); background-position: bottom;}


/* リスト
------------------------------------------------ */

/* 中点のリスト */
.list-a2 {
  padding-left: 20px;
}

.list-a2 + *:not([class^="hdg-"]):not([class*=" hdg-"]){
  margin-top: 34px;
}

@media only screen and (max-width: 480px) {
  .list-a2 + *:not([class^="hdg-"]):not([class*=" hdg-"]){
    margin-top: 28px;
  }
}

.list-a2 + p,
.list-a2 + [class^=list-],
.list-a2 + [class*=" list-"] {
  margin-top: 28px !important;
}

.list-a2 > li + li {
  margin-top: 12px;
}

.list-a2 > li > ul,
.list-a2 > li > ol,
.list-a2 > li > .item > ul,
.list-a2 > li > .item > ol,
.list-a2 > li > p + *,
.list-a2 > li > p + [class^=list-],
.list-a2 > li > p + [class*=" list-"] {
  margin-top: 12px !important;
}

.list-a2[class*=diff-col]{
  display: flex;
  flex-wrap: wrap;
  margin-left: -40px;
  margin-bottom: -12px;
  padding-left: 0;
  flex-grow: 1;
}

@media only screen and (max-width: 767px) {
  .list-a2[class*=diff-col]{
    display: block;
    margin-left: 0;
  }
}

.list-a2[class*=diff-col]>li{
  margin-top: 0;
  margin-bottom: 12px;
  padding-left: 40px;
}

@media only screen and (max-width: 767px) {
  .list-a2[class*=diff-col]>li{
    padding-left: 0;
  }
}

.list-a2.diff-col2>li{
  width: 50%;
}

@media only screen and (max-width: 767px) {
  .list-a2.diff-col2>li{
    width: 100%;
  }
}

.list-a2.diff-col3>li{
  width: 33.33333%;
}

@media only screen and (max-width: 767px) {
  .list-a2.diff-col3>li{
    width: 100%;
  }
}

.list-a2.diff-col4>li{
  width: 25%;
}

@media only screen and (max-width: 767px) {
  .list-a2.diff-col4>li{
    width: 100%;
  }
}

.list-a2 > li{
  position: relative;
  padding-left: 24px;
}

.list-a2 > li:before{
  display: block;
  position: absolute;
  content: "・";
  color: #6d6e70;
  left: 0;
  top: 0.1em;
  font-size: 1.2em;
  line-height: 1;
}

@media only screen and (max-width: 480px) {
  .list-a2 > li:before{
    top: 0em;
  }
}

.list-a2[class*=diff-col]>li{
  padding-left: 57px;
}

@media only screen and (max-width: 767px) {
  .list-a2[class*=diff-col]>li{
    padding-left: 17px;
  }
}

.list-a2[class*=diff-col]>li:before{
  left: 40px;
}

@media only screen and (max-width: 767px) {
  .list-a2[class*=diff-col]>li:before{
    left: 0;
  }
}

@media only screen and (max-width: 767px) {
  .list-a2 {
    padding-left: 0;
  }
}

/* list-error-a2 太字効果削除 */
.list-error-a2{
  padding-left: 20px;
}

.list-error-a2 + *:not([class^="hdg-"]):not([class*=" hdg-"]){
  margin-top: 34px;
}

@media only screen and (max-width: 480px) {
  .list-error-a2 + *:not([class^="hdg-"]):not([class*=" hdg-"]){
    margin-top: 28px;
  }
}

.list-error-a2 + p,
.list-error-a2 + [class^=list-],
.list-error-a2 + [class*=" list-"] {
  margin-top: 28px !important;
}

.list-error-a2 > li + li {
  margin-top: 12px;
}

.list-error-a2 > li > ul,
.list-error-a2 > li > ol,
.list-error-a2 > li > .item > ul,
.list-error-a2 > li > .item > ol,
.list-error-a2 > li > p + *,
.list-error-a2 > li > p + [class^=list-],
.list-error-a2 > li > p + [class*=" list-"] {
  margin-top: 12px !important;
}

.list-error-a2 > li{
  color: #000;
  position: relative;
  padding-left: 36px;
}

.list-error-a2 > li::before{
  display: block;
  position: absolute;
  content: "";
  background-position: -56px 0;
  width: 20px;
  height: 20px;
  left: 0;
  top: .25em;
  background-image:url(/solutions/common/images/icon/sprite2.png);
}

@media only screen and (max-width: 480px) {
  .list-error-a2 > li::before{
    top: .1em;
  }
}

@media only screen and (max-width: 767px) {
  .list-error-a2 {
    padding-left: 0;
  }
}

/* PDFアイコン */
.u-icon_pdf.u-icon_pdf-l {
	position: relative;
	padding-left: 20px;
	text-indent: 0;
}

.u-icon_pdf.u-icon_pdf-l::before {
	background: url(/solutions/common/images/icon/icon-pdf-02.png) no-repeat;
	width: 12px;
	height: 13.71px;
	background-size: contain;
	position: absolute;
	left: 0;
	top: 6px;
	margin-right: 0;
}

/* メールアイコン */
.u-icon_mail-l {
  text-indent: -26px;
  padding-left: 26px;
  position: relative;
  list-style: none;
}

.u-icon_mail-l::before {
  content: "";
  display: inline-block;
  width: 20px;
  height: 16px;
  background: url(/solutions/common/images/icon/sprite2.png) no-repeat;
  background-position: -69px -75px;
  margin-right: 10px;
  margin-left: 0;
  vertical-align: middle;
  left: 0;
  top: 1px;
  transform: none;
  margin-top: 0;
}

/* ■ */
.u-icon_square-l {
  padding-left: 17px;
  text-indent: 0;
  position: relative;
  display: block;
}

.u-icon_square-l::before {
  content: "■";
  display: inline-block;
  font-size: 1em;
  line-height: 1;
  color: #333;
  width: auto;
  height: auto;
  margin-right: 8px;
  margin-left: 0;
  vertical-align: middle;

  position: absolute;
  left: 0px;
  top: 3px;
  margin-top: 0;
}

/* マゼンタ色の矢印アイコン */
.u-icon_arw.magenta::before {
  border-top: 2px solid var(--magenta);
  border-right: 2px solid var(--magenta);
}

/* @@@@ */
.list-a.list-a-check > li {
	list-style: none;
	padding-left: 0;
	position: relative;
	padding-left: 18px;
}

.list-a.list-a-check > li::before {
  content: none !important;
}

.list-a.list-a-check > li::after {
  content: "✓";
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  left: 0;
  font-size: 0.9em; /* ul li のフォントサイズに合わせるか、適宜調整 */
  line-height: 1;
}

/*ぶら下げインデント
------------------------------------------------ */
.u-hanging-indent {
	text-indent: -1.4em;
	padding-left: 1.4em;
}

.utility-txt.home::after {
	content: "";
	display: inline-block;
	width: 0;
	height: 35px;
	vertical-align: middle;
}

@media screen and (max-width: 1000px) {
	.utility-txt.home::after {
		display: none;
	}
}

.hdg-l-mg {
	font-size: 2rem;
	border-left: 4px solid var(--magenta);
	padding-left: 12px;
	margin: 20px 0;
}

/* カタログ
------------------------------------------------ */
.catalog-item {
	background: var(--card);
	border: 1px solid var(--light-gray);
	border-radius: 6px;
	padding: 18px;
	box-shadow: 0 1px 3px rgba(0,0,0,.04);
	transition: 0.2s ease;
	cursor: pointer;
}

.catalog-item:hover {
	background: var(--card);
	transform: translateY(-2px);
	box-shadow: 0 4px 12px rgba(0,0,0,.08);
/*
	transform: translateY(-4px);
	box-shadow: 0 10px 24px rgba(0,0,0,0.12); */
}

/* カード間余白 */
.catalog-item + .catalog-item {
	margin-top: 24px;
}

.catalog-inner {
	display: flex;
	align-items: flex-start;
	gap: 12px;
}

.catalog-thumb {
	width: 80px;
	flex-shrink: 0;
	border: 1px solid var(--soft-gray);
	background: var(--card);
}

.catalog-thumb img {
	width: 100%;
	height: 80px;
	object-fit: cover;
}

.catalog-body {
	flex: 1;
}

.catalog-title {
	font-size: 1.6rem;
	font-weight: var(--font-weight-bold);
	line-height: 1.4;
	color: var(--text-dark);
	margin-bottom: 6px;
}

.catalog-desc {
	font-size: 1.4rem;
	line-height: 1.6;
	color: var(--charcoal-gray);
	margin-bottom: 6px;
}

/*
.catalog-link {
	color: var(--magenta);
	text-decoration: none;
} */

.catalog-link-detail {
	display: block;
	margin-top: 4px;
	color: var(--text-light);
}

.catalog-link:hover,
.catalog-item:hover .catalog-title,
.catalog-link-detail:hover {
	text-decoration: underline;
}

.catalog-actions {
	display: flex;
	gap: 12px;
	padding: 0;
	margin-top: 8px;
	margin-bottom: 0;
	list-style: none;
	align-items: center;
}

/* liをボタンコンテナにする（背景/枠/高さを揃える） */
.catalog-actions > li {
	position: relative;
	display: flex;
	align-items: center;
	height: 32px;
	border-radius: 4px;
	border: 1px solid transparent;
	padding: 0 16px 0 42px !important;
	box-sizing: border-box;
	min-width: 120px;
	justify-content: center;
}

/* aは「全面クリック」になるよう伸ばす */
.catalog-actions > li > a {
	display: flex;
	align-items: center;
	height: 100%;
	line-height: 1;
	text-decoration: none !important;
	font-size: 1.3rem;
	white-space: nowrap;
	color: var(--text-light);
	font-weight: var(--font-weight-bold);
}

.catalog-actions > li:hover {
	filter: brightness(0.96);
}

/* actions内では display: block をやめて横並びに統一 */
.catalog-actions .catalog-link-detail {
	display: inline-flex;
	margin-top: 0;
}

.catalog-actions > li.u-icon_pdf.u-icon_pdf-l {
	background: var(--primary-red);
	border-color: var(--primary-red);
}

.catalog-actions > li.u-icon_pdf.u-icon_pdf-l > a {
	color: var(--white);
}

.catalog-actions > li.u-icon_pdf.u-icon_pdf-l::before {
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	margin-right: 0;
}

/* 矢印アイコン */
.u-icon_arw.u-icon_arw-l {
	padding-left: 14px;
}

.u-icon_arw.u-icon_arw-l::before {
	width: 6px;
	height: 6px;
	position: absolute;
	top: calc(50% + 1px);
	border-top: 1.5px solid var(--text-light);
	border-right: 1.5px solid var(--text-light);
}

.catalog-actions > li.u-icon_arw.u-icon_arw-l {
	background: var(--card);
	border-color: var(--soft-gray);
	color: var(--text-light);
}

.catalog-actions > li.u-icon_arw.u-icon_arw-l::before {
	left: 20px;
	top: 15px;
	transform: rotate(45deg);
/* @@@
	border-top: 1.5px solid currentColor;
	border-right: 1.5px solid currentColor;*/
	box-sizing: border-box;
}

/* ======================================================================
 * カード関連のスタイル
 * ====================================================================== */

.fcena-card {
	background: var(--white);
	border: 1px solid var(--soft-gray);
	border-radius: 8px;
	padding: 20px 22px;
	box-shadow:
		0 1px 2px rgba(0,0,0,.04),
		0 8px 18px rgba(0,0,0,.05);

	position: relative;
	overflow: hidden;
}

.fcena-card-title {
	margin: 0 0 10px;
	font-size: 2rem;
	line-height: 1.5;
	font-weight: var(--font-weight-bold);
	color: var(--text-dark);
}

.fcena-card-copy {
	margin: 0 0 6px;
	font-size: 1.5rem;
	line-height: 1.8;
	color: var(--charcoal-gray);
}

.fcena-card-features {
	list-style: none;
	margin-top: 16px;
	padding: 0;
	font-size: 1.4rem;
}

.fcena-card-features li {
	list-style: none;
	padding-left: 0;
	position: relative;
	padding-left: 18px;
}

.fcena-card-features li::before {
	content: "✓";
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	left: 0;
	font-size: 0.9em; /* ul li のフォントサイズに合わせるか、適宜調整 */
	line-height: 1;
}

/* 外向け導線UI（追加カード用ラッパー）*/
.fcena-additional-cards {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(0, 1fr));
	gap: 16px;
	margin-top: 16px;
	margin-bottom: 24px;
	align-items: stretch;
}

/* カード内の2カラムコンテナ */
.fcena-double-column-content {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 24px;
	margin-top: 0 !important;
}

/* 2倍幅カード内のタイトルは、カードに対して1つ、横2列を上端で揃える */
.fcena-card.is-double-width .fcena-card-title {
	grid-column: span 2;
	margin-bottom: 20px;
}

.fcena-card .fcena-card-title {
	margin-bottom: 20px;
}

/* 子カードのスタイル */
.fcena-sub-card {
	background: var(--sub-card);
	border: 1px solid var(--soft-gray);
	border-radius: 8px;
	padding: 10px 16px;
	box-shadow: 0 1px 3px rgba(0,0,0,.04);
}

/* 子カード内のタイトルやコピーの調整（必要であれば） */
.fcena-sub-card .fcena-card-title {
	margin-top: 0;
	font-size: 1.2rem;
	color: var(--gray);
	margin-bottom: 6px; /* 必要に応じて調整 */
}

.fcena-sub-card .fcena-card-copy {
	font-size: 1.4rem;
	font-weight: var(--font-weight-bold);
	color: var(--dark-gray);

	margin-top: 0;
	margin-bottom: 0; /* 必要に応じて調整 */
}

.service-badges {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 8px 0 16px;
}

.service-badge {
	display: inline-flex;
	align-items: center;

	height: 28px;
	padding: 0 14px;

	border-radius: 9999px;

	font-size: 1.2rem;
	font-weight: var(--font-weight-bold);

	background: #eef5f8;
	color: #24546a;
}
.service-badge-ewide {
	background: var(--ewide-color);
	color: var(--white);
}
.service-badge-espot {
	background: var(--espot-color);
	color: var(--white);
}
.ewide {
	color: var(--ewide-color);
}
.espot {
	color: var(--espot-color);
}
a.ewide {
	color: var(--ewide-color);
	text-decoration-color: currentColor;
	text-underline-offset: 2px;
}
a.espot {
	color: var(--espot-color);
	text-decoration-color: currentColor;
	text-underline-offset: 2px;
}
.price {
	font-size: 1.2rem;
	margin: 10px 0 8px;
	padding-bottom: 4px;
	border-bottom: 1px solid var(--soft-gray);
	width: 96%;
}
.price .ewide {
	color: var(--ewide-color);
	font-weight: var(--font-weight-bold);
	font-size: 2.4rem;
	margin-right: 4px;
}
.price .espot {
	color: var(--espot-color);
	font-weight: var(--font-weight-bold);
	font-size: 2.4rem;
	margin-right: 4px;
}

.fcena-price-breakdown {
	display: inline-grid;
	gap: 4px;
	margin-top: 8px;
}

.fcena-price-row {
	display: grid;
	grid-template-columns:
		18rem /* 製品名 */
		7em /* ライセンス数 */
		6em; /* 金額 */
	column-gap: 1.2em;
	align-items: baseline;

	padding: 2px 0;
	font-size: 1.4rem;
	line-height: 1.4;
}

.fcena-price-amount {
	text-align:right;
}

.lyt-btn-b.fcena-link-btn li .btn-a {
	/* 背景色と文字色 */
	color: var(--white) !important;
	background: var(--gray);
	border-color: var(--gray);
	padding: 14px 46px;
	border-radius: 8px;

	display: inline-flex; /* Flexboxで内側の要素を配置するため */
	align-items: center; /* 垂直方向中央寄せ */
	justify-content: center; /* 水平方向中央寄せ */
	text-decoration: none; /* 下線をなくす */
	transition: 0.2s ease;
}
.lyt-btn-b.fcena-link-btn li .btn-a::before {
	border-color: var(--white) !important;
}
.lyt-btn-b.fcena-link-btn li .btn-a:hover,
.lyt-btn-b.fcena-link-btn li .btn-a:active {
	background-color: var(--dark-gray);
	border-color: var(--dark-gray);
	transform: translateY(-1px);
}

/* ======================================================================
 * SVGコンテナのアスペクト比を維持するためのスタイル
 * ====================================================================== */
.svg-container {
	position: relative;
	width: 100%;
	/* アスペクト比を計算: (高さ / 幅) * 100% */
	/* 535px / 1202px * 100% = 約 44.5% */
	/* padding-bottom: 44.50915%; */
    aspect-ratio: var(--ratio-w) / var(--ratio-h);

	overflow: hidden;
	margin: 0 auto;
}

.svg-container object,
.svg-container img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	display: block;
    /* 古いブラウザでheightを無視させるための指定 */
    min-height: 1px; 
}

/* モダンブラウザ用：aspect-ratioを優先し、padding-bottomを無効化 */
@supports (aspect-ratio: 1/1) {
    .svg-container {
        padding-bottom: 0 !important;
    }
}

/* 古いブラウザ用：aspect-ratioが使えない場合のみpadding-bottomを使用 */
@supports not (aspect-ratio: 1/1) {
    .svg-container {
        position: relative;
        /* 変数計算が使えない環境を考慮し、ここはインラインスタイルで指定推奨 */
        /* もしくは CSS で static に数値を指定する設計にする必要があります */
    }
    
    .svg-container object {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
    }
}

/* ======================================================================
 * レスポンシブ調整
 * ====================================================================== */

/* タブレット向けスタイル */
@media only screen and (max-width: 1000px) {
	.fcena-grid {
		grid-template-columns: 1fr;
	}

	.hero-area-b {
		height: auto;
		min-height: 300px;
		max-height: none;
	}

	/* 新規追加カードのレスポンシブスタイル */
	.fcena-additional-cards {
		grid-template-columns: 1fr;
		margin-left: 0;
	}

	.fcena-card.is-double-width {
		grid-column: span 1;
	}

	.fcena-card.is-double-width .fcena-card-title {
		grid-column: span 1;
	}

	.fcena-additional-cards > * > .fcena-card {
		margin: 0 0 16px 0;
	}

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

/* スマートフォン向けスタイル */
@media only screen and (max-width: 767px) {
	.fcena-card {
		padding: 18px 18px;
	}

	.fcena-double-column-content {
		grid-template-columns: 1fr;
		gap: 16px;
	}

	.fcena-double-column-content .left-col-content-wrapper {
		margin-bottom: 32px;
	}

	.fcena-price-breakdown {
		width: 100%;
	}

	.fcena-price-row {
		grid-template-columns:
			minmax(0, 1fr)
			auto
			auto;
		column-gap: 0.6em;
		font-size: 1.2rem;
	}

	.fcena-price-item {
		min-width: 0;
	}
}

/* ======================================================================
 * 比較表
 * ====================================================================== */
.tbl-a.compare-table thead tr:first-child th:nth-child(2) {
	background: var(--ewide-color);
	color: var(--white);
}

/* compare-table クラスを持つテーブルの行タイトルの3列目（eSpot）のスタイル */
.tbl-a.compare-table thead tr:first-child th:nth-child(3) {
	background: var(--espot-color);
	color: var(--white);
}