@charset "UTF-8";

/* ==========================================================
   AI-SOC for FortiGate
   デザイン（AIデータ）：PC 幅1920px・コンテンツ幅1200px／SP 幅393px
   明朝体の見出し・写真・図解はパーツ画像、説明文はHTMLテキスト
   ========================================================== */

/* ---------- 共通 ---------- */
.fg-inner {
	position: relative;
	width: 1200px;
	margin: 0 auto;
}

.fg-inner img {
	display: block;
	max-width: none;
	width: 100%;
	height: auto;
}

.fg-inner picture {
	display: block;
}

/* カードの絵柄（見出し・本文を除いて書き出した画像）。文字はこの上にHTMLで重ねる */
.fg-art {
	position: absolute;
	left: 0;
	top: 0;
}

.page-fortigate strong {
	font-weight: 700;
}

/* 和欧間の約1/4文字のすき間（Illustratorの自動スペースと同じ見た目にする） */
.fg-as {
	display: inline-block;
	width: .25em;
}

.fg-as.sp {
	display: none;
}

/* ---------- FV ---------- */
.fv {
	position: relative;
	background: #0d2a2f;
}

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

.fv-ms365 {
	position: absolute;
	left: 12.7083%;
	top: 88.0141%;
	width: 39.6875%;
	z-index: 2;
	transition: transform .4s ease;
}

.fv-ms365 img {
	display: block;
	width: 100%;
	height: auto;
}

a.fv-ms365:hover {
	opacity: 1;
	transform: scale(1.03);
}

/* FV内フォーム：デザイン（幅608px・上下中央）を画面幅に比例して拡縮 */
.fv .fv-contact {
	width: 608px;
	max-width: none;
	top: 51.7%;
	transform-origin: right center;
	transform: translateY(-50%) scale(var(--fvs, 1));
	z-index: 3;
}

/* ---------- こんな課題ありませんか？ ---------- */
.fg-worry {
	overflow: hidden;
	padding: 129px 0 32px;
	background: #f4f4f4 url(../img/fortigate/pc/worry_bg.webp) center top / 1920px auto no-repeat;
}

.fg-worry-title {
	width: 699px;
	margin-left: 517px;
}

.fg-worry-list {
	margin: 29.5px 0 0 533px;
}

.fg-worry-list li {
	position: relative;
	display: flex;
	align-items: center;
	box-sizing: border-box;
	width: 667px;
	height: 157.5px;
	padding-left: 165px;
	border-radius: 13px;
	background: linear-gradient(90deg, rgba(255, 255, 255, .85) 0%, rgba(228, 228, 228, .92) 63%, rgba(254, 254, 254, .96) 100%);
	box-shadow: 0 2px 10px rgba(0, 0, 0, .25);
}

.fg-worry-list li + li {
	margin-top: 28px;
}

.fg-worry-list li::before {
	content: "";
	position: absolute;
	left: 75px;
	top: 50%;
	width: 62px;
	height: 62px;
	margin-top: -31px;
	background: url(../img/fortigate/check.svg) no-repeat center / contain;
}

.fg-worry-list p {
	font-size: 27px;
	line-height: 42px;
	font-weight: 700;
	letter-spacing: .05em;
	color: #1a1a1a;
}

.fg-worry-arrow {
	width: 405px;
	margin: 35.5px 0 0 388px;
}

/* ---------- 「AI-SOC for FortiGate」が解決します！ ---------- */
.fg-assign {
	overflow: hidden;
	padding: 3px 0 126px;
	background: #bddbcf url(../img/fortigate/pc/assign_bg.webp) center top / 1920px auto no-repeat;
}

.fg-assign-banner {
	width: 1247px;
	margin-left: -16px;
}

.fg-assign-title {
	width: 1231px;
	margin: 47px 0 0 -16px;
}

/* 下の図解（背景ごとの画像）が本文の最終行に少し重なるので、本文を手前に出す */
.fg-assign-text {
	position: relative;
	z-index: 1;
	margin: 16.5px 0 0 3px;
	font-size: 21px;
	line-height: 35px;
	font-weight: 400;
	letter-spacing: .075em;
	white-space: nowrap;
	color: #1a1a1a;
}

/* 図解は背景ごと書き出しているので、背景画像と位置を揃える */
.fg-assign-diagram {
	width: 1275px;
	margin: -9.5px 0 0 -38px;
}

/* ---------- 選ばれる理由 ---------- */
.fg-reason {
	overflow: hidden;
	padding: 108px 0 164px;
	background: url(../img/fortigate/pc/reason_bg.webp) center top / 1920px auto no-repeat, linear-gradient(#00af7b, #146460);
}

.fg-reason-title {
	position: relative;
	z-index: 1;
	width: 857px;
	margin-left: -15px;
}

.fg-reason-list li {
	position: relative;
}

.fg-reason-txt {
	position: relative;
}

.fg-reason-txt h3 {
	font-weight: 700;
	letter-spacing: .05em;
	color: #29626e;
}

.fg-reason-txt p {
	font-weight: 400;
	letter-spacing: .05em;
	white-space: nowrap;
	color: #1a1a1a;
}

/*
 * PC：Microsoft 365 と同じく、カードは画面の端に寄せて最大1560px（画面が狭いときは画面幅-15px）。
 * カードの中身（絵柄・文字）はカード幅に比例して拡縮するので、どの画面幅でも途切れない。
 * --k はデザイン上の1px（カード幅1560px基準）
 */
@media screen and (min-width: 835px) {
	.fg-reason-list {
		container-type: inline-size;
		width: 100vw;
		margin: -57.5px 0 0 calc(50% - 50vw);
	}

	.fg-reason-list li {
		--w: min(1560px, 100cqw - 15px);
		container-type: inline-size;
		width: var(--w);
		aspect-ratio: 1560 / 349.5;
		margin-left: auto;
	}

	.fg-reason-list li:nth-child(even) {
		aspect-ratio: 1560 / 344.5;
		margin-left: 0;
		margin-right: auto;
	}

	.fg-reason-list li + li {
		margin-top: calc(var(--w) * 66.5 / 1560);
	}

	.fg-reason-list li > * {
		--k: calc(100cqw / 1560);
	}

	.fg-reason-list li:nth-child(1) .fg-art { left: calc(var(--k) * -17); top: calc(var(--k) * -145.5); width: calc(var(--k) * 1577); }
	.fg-reason-list li:nth-child(2) .fg-art { left: 0; top: calc(var(--k) * -217.5); width: calc(var(--k) * 1581); }
	.fg-reason-list li:nth-child(3) .fg-art { left: calc(var(--k) * -17); top: calc(var(--k) * -17.5); width: calc(var(--k) * 1577); }
	.fg-reason-list li:nth-child(4) .fg-art { left: 0; top: calc(var(--k) * -18.5); width: calc(var(--k) * 1584); }
	.fg-reason-list li:nth-child(5) .fg-art { left: calc(var(--k) * -17); top: calc(var(--k) * -26.5); width: calc(var(--k) * 1577); }

	.fg-reason-txt {
		padding-left: calc(var(--k) * 102);
	}

	.fg-reason-list li:nth-child(even) .fg-reason-txt {
		padding-left: calc(var(--k) * 730.5);
	}

	.fg-reason-list li:nth-child(1) .fg-reason-txt { padding-top: calc(var(--k) * 102.3); }
	.fg-reason-list li:nth-child(2) .fg-reason-txt { padding-top: calc(var(--k) * 75.4); }
	.fg-reason-list li:nth-child(3) .fg-reason-txt { padding-top: calc(var(--k) * 77.2); }
	.fg-reason-list li:nth-child(4) .fg-reason-txt { padding-top: calc(var(--k) * 90.4); }
	.fg-reason-list li:nth-child(5) .fg-reason-txt { padding-top: calc(var(--k) * 102); }

	.fg-reason-txt h3 {
		font-size: calc(var(--k) * 43);
		line-height: calc(var(--k) * 60);
	}

	.fg-reason-txt p {
		margin-top: calc(var(--k) * 18);
		font-size: calc(var(--k) * 22);
		line-height: calc(var(--k) * 35);
	}

	.fg-reason-list li:nth-child(even) .fg-reason-txt p {
		margin-left: calc(var(--k) * 5);
	}
}

/* ---------- オプション ---------- */
.fg-option {
	overflow: hidden;
	padding: 165px 0 179px;
	background: #f2f2f2 url(../img/fortigate/pc/option_bg.webp) center top / 1920px auto no-repeat;
}

.fg-option-title {
	position: relative;
	z-index: 1;
	width: 862px;
	margin-left: -17px;
}

.fg-option-list {
	display: flex;
	gap: 22px;
	margin: -15px 0 0 -1px;
}

.fg-option-list li {
	position: relative;
	flex-shrink: 0;
	width: 386px;
	height: 613px;
}

.fg-option-list .fg-art {
	left: -46px;
	top: -47px;
	width: 478px;
}

.fg-option-list li:nth-child(1) .fg-art {
	width: 479px;
}

.fg-option-list h3 {
	position: absolute;
	left: 33px;
	top: 37px;
	font-size: 30px;
	line-height: 45px;
	font-weight: 700;
	letter-spacing: .05em;
	white-space: nowrap;
	color: #29626e;
}

.fg-option-list p {
	position: absolute;
	left: 32px;
	top: 143px;
	font-size: 21px;
	line-height: 32px;
	font-weight: 400;
	letter-spacing: .05em;
	white-space: nowrap;
	color: #1a1a1a;
}

/* ---------- お申込みの流れ ---------- */
.fg-flow {
	overflow: hidden;
	padding: 170px 0 186px;
	background: #f2f2f2 url(../img/fortigate/pc/flow_bg.webp) center top / 1920px auto no-repeat;
}

.fg-flow-title {
	position: relative;
	z-index: 1;
	width: 727px;
	margin-left: -15px;
}

.fg-flow-list {
	position: relative;
	width: 1198px;
	margin: -18.5px 0 0 1px;
}

/* アイコンの丸をつなぐ線 */
.fg-flow-list::before {
	content: "";
	position: absolute;
	left: 74px;
	top: 77px;
	bottom: 76.5px;
	width: 6px;
	background: #19135d;
}

.fg-flow-list li {
	position: relative;
	height: 153.5px;
}

.fg-flow-list li + li {
	margin-top: 35px;
}

/* 所要日数の丸が次のカードに重なるよう、上のカードほど手前にする */
.fg-flow-list li:nth-child(1) { z-index: 6; }
.fg-flow-list li:nth-child(2) { z-index: 5; }
.fg-flow-list li:nth-child(3) { z-index: 4; }
.fg-flow-list li:nth-child(4) { z-index: 3; }
.fg-flow-list li:nth-child(5) { z-index: 2; }
.fg-flow-list li:nth-child(6) { z-index: 1; }

.fg-flow-list .fg-art {
	left: -37px;
	top: -38.5px;
	width: 1272px;
}

.fg-flow-list li > p:not(.fg-flow-day) {
	position: absolute;
	left: 303px;
	top: 80.2px;
	font-size: 21px;
	line-height: 32px;
	font-weight: 400;
	letter-spacing: .05em;
	white-space: nowrap;
	color: #1a1a1a;
}

.fg-flow-list li:nth-child(1) > p:not(.fg-flow-day) {
	top: 63.2px;
}

.fg-flow-day {
	position: absolute;
	left: 992px;
	top: 69.5px;
	width: 190px;
}

/* ---------- 追従ポップアップ：AIデータのカード（幅437px）と×（直径45px、カード左上から左3px・上6px） ---------- */
.page-fortigate .fixed-cont-box {
	width: 437px;
}

.page-fortigate .fixed-cont-box span {
	width: 10.2975%;
	left: -0.6865%;
	top: -1.5038%;
	transition: transform .3s ease, opacity .3s ease;
}

.page-fortigate .fixed-cont-box span img {
	display: block;
	width: 100%;
	height: auto;
}

.page-fortigate .fixed-cont-box span:hover {
	opacity: .8;
	transform: scale(1.08);
}

.page-fortigate .fixed-cont-box a {
	display: block;
}

@media screen and (max-width: 1560px) {
	.page-fortigate .fixed-cont-box {
		width: 330px;
	}
}

@media screen and (max-width: 1400px) {
	.page-fortigate .fixed-cont-box {
		width: 290px;
	}
}

/* ==========================================================
   SP（デザイン幅393px を画面幅に合わせて拡縮）
   ========================================================== */
@media screen and (max-width: 834px) {
	.page-fortigate {
		--u: calc(100vw / 393);
	}

	.fg-inner {
		width: 100%;
	}

	.fg-as.sp {
		display: inline-block;
	}

	.fv {
		background: #fff;
	}

	.fv-ms365 {
		left: 3.5623%;
		top: 94.5479%;
		width: 92.8753%;
	}

	/* 課題 */
	.fg-worry {
		padding: calc(var(--u) * 207) 0 calc(var(--u) * 7);
		background: #fff url(../img/fortigate/sp/worry_bg.webp) center top / 100% auto no-repeat;
	}

	.fg-worry-title {
		width: calc(var(--u) * 361);
		margin-left: calc(var(--u) * 16);
	}

	.fg-worry-list {
		margin: calc(var(--u) * 6.5) 0 0 calc(var(--u) * 25);
	}

	.fg-worry-list li {
		width: calc(var(--u) * 343);
		height: calc(var(--u) * 79);
		padding-left: calc(var(--u) * 62.5);
		border-radius: calc(var(--u) * 6);
		box-shadow: 0 calc(var(--u) * 1) calc(var(--u) * 5) rgba(0, 0, 0, .2);
	}

	.fg-worry-list li + li {
		margin-top: calc(var(--u) * 14);
	}

	.fg-worry-list li::before {
		left: calc(var(--u) * 23);
		width: calc(var(--u) * 24);
		height: calc(var(--u) * 24);
		margin-top: calc(var(--u) * -12);
	}

	.fg-worry-list p {
		font-size: calc(var(--u) * 17);
		line-height: calc(var(--u) * 24);
	}

	.fg-worry-arrow {
		width: calc(var(--u) * 144);
		margin: calc(var(--u) * 28.5) 0 0 calc(var(--u) * 121);
	}

	/* 解決 */
	.fg-assign {
		padding: 0 0 calc(var(--u) * 33);
		background: #bddbcf url(../img/fortigate/sp/assign_bg.webp) center top / 100% auto no-repeat;
	}

	.fg-assign-banner {
		width: calc(var(--u) * 364);
		margin-left: calc(var(--u) * 12);
	}

	.fg-assign-title {
		width: calc(var(--u) * 378);
		margin: calc(var(--u) * 17) 0 0 calc(var(--u) * 15);
	}

	.fg-assign-text {
		margin: calc(var(--u) * 14.1) 0 0 calc(var(--u) * 25);
		font-size: calc(var(--u) * 16);
		line-height: calc(var(--u) * 29);
	}

	.fg-assign-diagram {
		width: calc(var(--u) * 378);
		margin: calc(var(--u) * 19.9) 0 0 calc(var(--u) * 8);
	}

	/* 選ばれる理由 */
	.fg-reason {
		padding: 0 0 calc(var(--u) * 83.2);
		background: url(../img/fortigate/sp/reason_bg.webp) center top / 100% auto no-repeat, linear-gradient(#00af7b, #146460);
	}

	.fg-reason-title {
		width: calc(var(--u) * 381);
		margin-left: 0;
	}

	.fg-reason-list {
		margin-top: calc(var(--u) * -27.7);
	}

	.fg-reason-list li,
	.fg-reason-list li:nth-child(even) {
		width: calc(var(--u) * 343);
		margin-left: calc(var(--u) * 25);
	}

	.fg-reason-list li + li {
		margin-top: calc(var(--u) * 39);
	}

	/* SPは縦並びなので下からフェードイン */
	.fg-reason-list li.fade-left,
	.fg-reason-list li.fade-right {
		transform: translateY(50px);
	}

	.fg-reason-list li.show {
		transform: none;
	}

	.fg-reason-list li:nth-child(1) { height: calc(var(--u) * 403); }
	.fg-reason-list li:nth-child(2) { height: calc(var(--u) * 424.7); }
	.fg-reason-list li:nth-child(3) { height: calc(var(--u) * 402.6); }
	.fg-reason-list li:nth-child(4) { height: calc(var(--u) * 384.7); }
	.fg-reason-list li:nth-child(5) { height: calc(var(--u) * 411.1); }

	.fg-reason-list li:nth-child(1) .fg-art { left: calc(var(--u) * -18); top: calc(var(--u) * -9.1); width: calc(var(--u) * 367); }
	.fg-reason-list li:nth-child(2) .fg-art { left: calc(var(--u) * -12); top: calc(var(--u) * -8.1); width: calc(var(--u) * 370); }
	.fg-reason-list li:nth-child(3) .fg-art { left: calc(var(--u) * -7); top: calc(var(--u) * -7.8); width: calc(var(--u) * 356); }
	.fg-reason-list li:nth-child(4) .fg-art { left: calc(var(--u) * -7); top: calc(var(--u) * -8.3); width: calc(var(--u) * 361); }
	.fg-reason-list li:nth-child(5) .fg-art { left: calc(var(--u) * -7); top: calc(var(--u) * -7.7); width: calc(var(--u) * 362); }

	.fg-reason-list li:nth-child(n) .fg-reason-txt {
		padding: calc(var(--u) * 27.7) 0 0 calc(var(--u) * 20.6);
	}

	.fg-reason-txt h3 {
		font-size: calc(var(--u) * 22);
		line-height: calc(var(--u) * 31);
	}

	.fg-reason-txt p,
	.fg-reason-list li:nth-child(even) .fg-reason-txt p {
		margin: calc(var(--u) * 12) 0 0;
		font-size: calc(var(--u) * 15);
		line-height: calc(var(--u) * 22);
	}

	/* オプション */
	.fg-option {
		padding: calc(var(--u) * 48) 0 calc(var(--u) * 55);
		background: #f2f2f2 url(../img/fortigate/sp/option_bg.webp) center top / 100% auto no-repeat;
	}

	.fg-option-title {
		width: calc(var(--u) * 354);
		margin-left: calc(var(--u) * 19);
	}

	.fg-option-list {
		display: block;
		margin: calc(var(--u) * 25) 0 0 calc(var(--u) * 25);
	}

	.fg-option-list li {
		width: calc(var(--u) * 343);
	}

	.fg-option-list li + li {
		margin-top: calc(var(--u) * 36);
	}

	.fg-option-list li:nth-child(1) { height: calc(var(--u) * 423); }
	.fg-option-list li:nth-child(2) { height: calc(var(--u) * 452); }
	.fg-option-list li:nth-child(3) { height: calc(var(--u) * 441); }

	.fg-option-list .fg-art,
	.fg-option-list li:nth-child(1) .fg-art {
		left: calc(var(--u) * -6);
		top: calc(var(--u) * -7);
		width: calc(var(--u) * 355);
	}

	.fg-option-list li:nth-child(3) .fg-art {
		left: calc(var(--u) * -25);
		width: calc(var(--u) * 393);
	}

	.fg-option-list h3 {
		left: calc(var(--u) * 20);
		top: calc(var(--u) * 25.5);
		font-size: calc(var(--u) * 23);
		line-height: calc(var(--u) * 35);
	}

	.fg-option-list p {
		left: calc(var(--u) * 20.6);
		font-size: calc(var(--u) * 16);
		line-height: calc(var(--u) * 23);
	}

	.fg-option-list li:nth-child(1) p { top: calc(var(--u) * 73.7); }
	.fg-option-list li:nth-child(2) p { top: calc(var(--u) * 102.7); }
	.fg-option-list li:nth-child(3) p { top: calc(var(--u) * 71.7); }

	/* お申込みの流れ */
	.fg-flow {
		padding: calc(var(--u) * 43) 0 calc(var(--u) * 80.3);
		background: #f2f2f2 url(../img/fortigate/sp/flow_bg.webp) center top / 100% auto no-repeat;
	}

	.fg-flow-title {
		width: calc(var(--u) * 329);
		margin-left: calc(var(--u) * 19);
	}

	.fg-flow-list {
		width: calc(var(--u) * 343);
		margin: calc(var(--u) * 21.7) 0 0 calc(var(--u) * 25);
	}

	.fg-flow-list::before {
		left: calc(var(--u) * 36.4);
		top: calc(var(--u) * 78.4);
		bottom: calc(var(--u) * 65.7);
		width: calc(var(--u) * 6);
		background: #1b4e59;
	}

	.fg-flow-list li + li {
		margin-top: calc(var(--u) * 32);
	}

	.fg-flow-list li:nth-child(1) { height: calc(var(--u) * 225); }
	.fg-flow-list li:nth-child(2) { height: calc(var(--u) * 168); }
	.fg-flow-list li:nth-child(3),
	.fg-flow-list li:nth-child(4),
	.fg-flow-list li:nth-child(5) { height: calc(var(--u) * 145); }
	.fg-flow-list li:nth-child(6) { height: calc(var(--u) * 79); }

	.fg-flow-list .fg-art {
		left: calc(var(--u) * -18);
		top: calc(var(--u) * -18.7);
		width: calc(var(--u) * 379);
	}

	.fg-flow-list li:nth-child(6) .fg-art {
		left: calc(var(--u) * -15);
		top: calc(var(--u) * -15.7);
		width: calc(var(--u) * 373);
	}

	.fg-flow-list li > p:not(.fg-flow-day),
	.fg-flow-list li:nth-child(1) > p:not(.fg-flow-day) {
		left: calc(var(--u) * 22.9);
		top: calc(var(--u) * 99.8);
		font-size: calc(var(--u) * 16);
		line-height: calc(var(--u) * 23);
	}

	.fg-flow-day {
		left: calc(var(--u) * 250);
		width: calc(var(--u) * 101);
	}

	.fg-flow-list li:nth-child(2) .fg-flow-day { top: calc(var(--u) * 128.3); }
	.fg-flow-list li:nth-child(3) .fg-flow-day { top: calc(var(--u) * 103.3); }
	.fg-flow-list li:nth-child(4) .fg-flow-day { top: calc(var(--u) * 102.3); }
	.fg-flow-list li:nth-child(5) .fg-flow-day { top: calc(var(--u) * 111.3); }
}