@charset "UTF-8";

/* ローカルナビ
----------------------------------------------- */
/* ショートカットナビゲーション PC */
.nav-a::before {
	display: none;
}
.nav-a {
	z-index: 201;
}
.nav-a > .nav-a-inner > ul {
	position: relative;
}
.nav-a > .nav-a-inner > ul a {
	padding: 21px 21px;
	position: relative;
}
.nav-a > .nav-a-inner > ul a.disabled {
	cursor: default;
}

.nav-a > .nav-a-inner > ul a span {
	vertical-align: baseline;
}
.nav-a > .nav-a-inner > ul > li {
	position: static;
}
.nav-a > .nav-a-inner > ul > li::before,
.nav-a > .nav-a-inner > ul > li::after {
	display: none;
}
.nav-a > .nav-a-inner > ul > li:hover > a { 
	background: #c5c5bf;
}
.nav-a > .nav-a-inner > ul > li > a::after {
	display: block;
	position: absolute;
	content: "";
	top: 50%;
	right: -1px;
	width: 1px;
	height: 32px;
	margin-top: -16px;
	background: #b1b1ac;
}
.nav-a > .nav-a-inner > ul > li:hover > a::after {
	background: #dad9d6;
}
.nav-a > .nav-a-inner > ul > li:first-child > a::before {
	display: block;
	position: absolute;
	content: "";
	top: 50%;
	left: 0;
	width: 1px;
	height: 32px;
	margin-top: -16px;
	background: #b1b1ac;
}
.nav-a > .nav-a-inner > ul > li:first-child:hover > a::before {
	background: #dad9d6;
}


.nav-a > .nav-a-inner > ul > li.portal > a,
.nav-a > .nav-a-inner > ul > li:nth-last-child(1) > a {
	padding: 11px 22px;
}
.nav-a > .nav-a-inner > ul > li.portal > a > span {
	padding: 10px 12px;
	background-color: #fff;
	transition: .2s;
}
.nav-a > .nav-a-inner > ul > li:nth-last-child(1) > a > span {
	padding: 10px 12px;
	color: #ffffff;
	background-color: #b02d34;
	transition: .2s;
}
.nav-a > .nav-a-inner > ul > li.portal > a:hover > span {
	color: #b02d34;
}
.nav-a > .nav-a-inner > ul > li:nth-last-child(1) > a:hover > span {
	color: #b02d34;
	background-color: #ffffff;
}
.nav-a > .nav-a-inner > ul a,
.nav-a > .nav-a-inner ul a,
.nav-a > .nav-a-inner ul a {
	transition: .2s;
}
.nav-a > .nav-a-inner ul a:hover,
.nav-a > .nav-a-inner ul a:active,
.nav-a > .nav-a-inner ul a:focus {
	color: inherit;
}
.nav-a > .nav-a-inner > ul > li:nth-last-child(1) a:hover, 
.nav-a > .nav-a-inner > ul > li:nth-last-child(1) a:active,
.nav-a > .nav-a-inner > ul > li:nth-last-child(1) a:focus {
	color: inherit;
	background-color: inherit;
}
.nav-a > .nav-a-inner > ul > li.is-current a {
	font-weight: inherit;
}
.nav-a > .nav-a-inner > ul > li > ul {
	display: none;
	position: absolute;
	width: 100%;
	padding: 10px;
	left: 0;
	background: #c5c5bf;
	z-index: 202;
}
.nav-a > .nav-a-inner > ul > li:hover > ul {
	display: flex;
	animation-name: show;
	animation-duration: 0.2s;
}
.nav-a > .nav-a-inner > ul > li > ul > li {
	width: 25%;
	margin-right: 10px;
	font-size: 1.6rem;
	display: flex;
}
.nav-a > .nav-a-inner > ul > li > ul > li:last-child {
	margin-right: 0;
}
.nav-a > .nav-a-inner > ul > li > ul > li::before,
.nav-a > .nav-a-inner > ul > li > ul > li::after {
	display: none !important;
}
.nav-a > .nav-a-inner > ul > li > ul > li > a {
	width: 100%;
	padding: 11px 21px;
	color: #333;
	background: #f2f2f2;
	height: 5em;
	display: flex;
	align-items: center;
	justify-content: center;
}
.nav-a > .nav-a-inner > ul > li > ul > li > a.summary {
	height: auto;
	flex-direction: column;
	align-items: inherit;
}
.nav-a > .nav-a-inner > ul > li > ul > li > a span {
	display: block;
	margin-top: 1em;
	font-size: 1.4rem;
}
.nav-a > .nav-a-inner > ul > li > ul > li:nth-last-child(1) > a {
	padding: 11px 21px;
	border-bottom: none;
}
.nav-a > .nav-a-inner > ul > li > ul > li > a:hover {
	background: #fff !important;
}
.nav-a > .nav-a-inner > ul > li > ul > li > a.disabled {
	pointer-events: none;
	background: #dbdbdb;
	color: #666;
}
.nav-a > .nav-a-inner > ul > li > ul > li > a.disabled:hover {
	background: #dad9d6 !important;
}
@keyframes show{
	from{
		opacity: 0;
		transform: translateY(-50px);
	}
	to{
		opacity: 1;
		transform: translateY(0);
	}
}

/* ストラクチャーナビゲーション TB SP */
.nav-structure-a > ul > li > ul > li a.disabled {
	pointer-events: none;
	background: rgba(211, 211, 211, 0.96);
	color: #666;
}

@media only screen and (min-width: 1000px) {
	.section.pc-none {
		display: none !important;
	}
}
@media only screen and (max-width: 1000px) {
	.section.pc-none .section-inner {
		padding: 0 16px 20px !important;
	}
}
@media only screen and (max-width: 767px) {
	.section.pc-none .section-inner {
		padding: 0 !important;
	}
	.nav-structure-a {
		padding: 0;
	}
	.nav-structure-a > ul {
		margin-top: 0;
	}
	.nav-structure-a > .menu-btn {
		padding: 11px 46px 11px 16px;
	}
}


/* 共通
----------------------------------------------- */
/* 見出しタイプC カラー */
.hdg-d {
	color: #000;
}


/* 強制改行 */
.d-sp {
	display: none;
}
@media only screen and (max-width: 767px) {
	.d-pc {
		display: none;
	}
	.d-sp {
		display: block;
	}
}


/* マージン */
.mt-10 {
	margin-top: 10px!important;
}


/* タイトル周り */
.wrap-hdg {
	width: 100%;
	background: #fff;
}
.wrap-hdg > .hdg-a {
	font-size: 2.4rem;
	line-height: 1.3;
	padding: 10px 8px 20px 58px;
	max-width: 1280px;
	min-height: 45px;
	margin: 0 auto 0;
	position: relative;
	font-weight: bold;
}
.wrap-hdg > .hdg-a::before {
	display: inline-block;
	background: url(/solutions/cloud/fjcloud/images/fjcloud-logo-g.svg) ;
	background-size: contain;
	width: 50px;
	height: 45px;
	content: '';
	position: absolute;
	left: 0;
	top: 0;
}
.wrap-hdg > .hdg-a > a {
	padding-right: 0;
}
.wrap-hdg > .hdg-a > a::before {
	display: none;
}

/* 新VI化 */
.breadcrumb-wrapper + #main .lf-hero-a {
    margin-top: 0;
}
.lf-hero-a.lf-cy-bl .lf-hero-contents {
    color: #fff;
	background-position: left bottom;
}
.lf-hero-a.lf-cy-bl .lf-hero-contents .c-btn.u-fz-flat {
    background: #fff;
    padding: 10px 13px 10px 20px;
    border-radius: 100vh;
    color: #1A30BE!important;
}
.lf-hero-a.lf-cy-bl .lf-hero-contents .c-btn.u-fz-flat .c-btn-ico {
	width: 36px;
    height: 36px;
}
.lf-hero-a.lf-cy-bl .lf-hero-contents .c-btn.u-fz-flat .c-btn-ico::before {
    border: 1px solid #1A30BE;
}
.lf-hero-a.lf-cy-bl .lf-hero-contents .c-btn.u-fz-flat .c-btn-ico svg {
    fill: #1A30BE;
}
.lf-hero-a.lf-cy-bl .lf-hero-contents .c-btn.u-fz-flat .c-btn-ico svg .circle {
    stroke: #1A30BE;
}
.lf-hero-a.lf-cy-bl .lf-hero-contents a.c-btn.u-fz-flat:hover .c-btn-ico svg .circle {
    stroke: #1A30BE;
}
/*
.lf-hero-btns a {
    display: inline-block;
    padding: 1.3125em 4.25em 1.3125em 1.3125em;
    text-decoration: none;
    position: relative;
    line-height: 1.5;
    background: #fff;
    color: #1A30BE!important;
    border-radius: 100vh;
}
.lf-hero-btns a::before {
    width: 50px;
    height: 50px;
    border: 1px solid;
    border-radius: 50%;
    left: auto;
    right: 0.5em;
    top: 50%;
    transform: translateY(-50%);
}
.lf-hero-btns a::after {
    width: 16px;
    height: 16px;
    border-top: 1px solid;
    border-right: 1px solid;
    left: auto;
    right: calc(0.5em + 20px);
    top: 50%;
    transform: translateY(-50%) rotate(45deg);
}
*/
/*
@media only screen and (max-width: 1280px) {
.lf-hero-contents-inner {
	width: calc(415vw*100/1280);
    margin-right: calc(225vw*100/1280);
}
}
*/
/*
media only screen and (max-width: 767px) {
.lf-hero-contents-inner {
	width: 100%;
    margin-right: 0;
}
}
*/


/* メインビジュアル */
.hero-area-c .lyt-btn-b {
	margin-top: 16px;
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
	.hero-area-c {
		max-height: 250px;
		height: calc(250vw*100/1280);
	}
	.hero-area-c .visual {
		height: calc(250vw*100/1280);
	}
}
@media only screen and (min-width: 768px) {
	.hero-area-c {
		background:#273c59;
		min-height: 250px;
	}
	.hero-area-c .visual {
		min-height: 250px;
		z-index: -1;
	}
	.hero-area-c .content-inner {
		max-width: inherit;
	}
	.hero-area-c .content-inner .main-txt,
	.hero-area-c .content-inner .sub-txt {
		text-shadow: 
			rgba(39, 60, 89, 0.5) 2px 0px 3px, rgba(39, 60, 89, 0.5) -2px 0px 3px,
			rgba(39, 60, 89, 0.5) 0px -2px 3px, rgba(39, 60, 89, 0.5) -2px 0px 3px,
			rgba(39, 60, 89, 0.5) 2px 2px 3px, rgba(39, 60, 89, 0.5) -2px 2px 3px,
			rgba(39, 60, 89, 0.5) 2px -2px 3px, rgba(39, 60, 89, 0.5) -2px -2px 3px,
			rgba(39, 60, 89, 0.5) 1px 2px 3px, rgba(39, 60, 89, 0.5) -1px 2px 3px,
			rgba(39, 60, 89, 0.5) 1px -2px 3px, rgba(39, 60, 89, 0.5) -1px -2px 3px,
			rgba(39, 60, 89, 0.5) 2px 1px 3px, rgba(39, 60, 89, 0.5) -2px 1px 3px,
			rgba(39, 60, 89, 0.5) 2px -1px 3px, rgba(39, 60, 89, 0.5) -2px -1px 3px,
			rgba(39, 60, 89, 0.5) 1px 1px 3px, rgba(39, 60, 89, 0.5) -1px 1px 3px,
			rgba(39, 60, 89, 0.5) 1px -1px 3px, rgba(39, 60, 89, 0.5) -1px -1px 3px;
	}
}
@media screen and (min-width: 768px) and (max-width: 1280px) {
	.hero-area-c {
		max-height: 250px;
		height: calc(250vw*100/1280);
	}
	.hero-area-c .visual {
		height: calc(250vw*100/1280);
	}
}

/* 文字色赤 */
.diff-color-a {
    color: #a30b1a;
}

/* リンク無効 */
.unlink {
    pointer-events: none;
}

/* テキストセンター寄せ */
.textcenter {
	text-align: center;
}

/* リンクアイコン */
a.link-icon {
	position: relative;
}
a.link-icon::after {
	display: inline-block;
	width: 8px;
	height: 8px;
	margin: -3px 2px 0 6px;
	vertical-align: middle;
	border-top: 2px solid #a40e1c;
	border-right: 2px solid #a40e1c;
	content: "";
	-webkit-transform: rotate(45deg);
	transform: rotate(45deg);
}

/* ボタン スモール アイコンなし*/
.lyt-btn-a .btn-a.small,
.lyt-btn-a .btn-b.small,
.lyt-btn-a .btn-c.small {
	font-size: 1.8rem;
	min-width: inherit;
}
.btn-a.no-icon::before,
.btn-b.no-icon::before {
	display: none;
}

/* お問い合わせ */
h2.box-hdg-a.diff-center {
	margin-bottom: 32px;
	text-align: center;
}
.lyt-contact-a .list-a {
	padding-left: 0;
	display: flex;
}
.lyt-contact-a .list-a > li {
	width: 100%;
	padding-left: 0;
	display: flex;
	flex-direction: column;
}
.lyt-contact-a .list-a > li:before {
	display: none;
}
.lyt-contact-a .list-a a {
	display: flex;
	flex-grow: 1;
	align-items: center;
	justify-content: center;
	width: 100%;
	position: relative;
	background: #fff;
	color: #a10c20;
	box-shadow: 0 1px 2px rgba(0,0,0,.18);
	border: 1px solid #a10c20;
	text-decoration: none;
}
.lyt-contact-a .list-a a:hover {
	background: #f6cfd3;
}
.lyt-contact-a .list-a a li {
}
.lyt-contact-a > .col {
	display: flex;
}
.lyt-contact-a > .col ul {
	flex-grow: 1;
}
.lyt-contact-a .notes-a {
	font-size: 1.2rem;
	margin-top: 12px;
	line-height: 1.6;
}
.lyt-contact-a > .col+.col {
	padding-left: 32px;
}

@media only screen and (max-width:767px){
	.lyt-contact-a > .col+.col {
		padding-left: 0;
	}
	.lyt-contact-a .list-a a {
		padding: 2em;
	}
}

/* 導入事例
----------------------------------------------- */
.case-studies .lyt-idx-b > * {
	display: flex;
}
.case-studies .lyt-idx-b > * a {
	width: 100%;
	display: flex;
	flex-direction: column;
	background: #fff;
}
.case-studies .lyt-idx-b .text-box {
	flex-grow: 1;
}
.case-studies .lyt-idx-b .visual {
	flex-shrink: 0;
}
.case-studies .lyt-idx-b .text-box {
	flex-grow: 1;
}
.case-studies .icon-fixed-a {
    background: #fff;
    padding: 11px 12px;
}
.lyt-idx-b .icon-ctg-a {
    margin: 0 10px 10px 0;
}
.case-studies + .section {
    margin-top: -2.5rem;
}