/* CSS Document */
#main .mainVisual {
	padding: 0;
	height: calc(100vh - 160px);
	position: relative;
	z-index: 15;
	background-image: url("../img/pg_bcn/mainvisual_bg.jpg")
}

#pg_bcn #main .mainVisual {
	padding: 0;
	height: 300px;
	position: relative;
	z-index: 15;
	background-image: url("../img/pg_bcn/mainvisual_bg.jpg")
}

#main .mainVisual .comBox {
	padding: 0 0 50px;
	height: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	align-content: center;
	box-sizing: border-box;
}

#main .mainVisual h2 {
	font-family: 'Roboto', sans-serif;
	font-size: 7rem;
	font-weight: 700;
	color: #011D57;
	width: 100%;
}

#main .mainVisual p {
	margin: 15px 0 0;
	font-size: 2.6rem;
	line-height: 1.57;
	color: #000;
}

#main .mainVisual p span {
	font-weight: 500;
}

.scroll a:before {
	height: 55px;
	background-color: #000;
}

.scroll a:after {
	background-color: #fff;
}

.scroll a:hover:before {
	background-color: #000;
}

.scroll a:hover:after {
	background-color: #000;
}

@keyframes vertical {
	0% {
		height: 0px;
		bottom: auto;
		top: 113px
	}

	49.9% {
		bottom: auto;
		top: 113px
	}

	50% {
		height: 50px;
		top: auto;
		bottom: 0
	}

	100% {
		height: 0px;
		top: auto;
		bottom: 0
	}
}

@keyframes verticalh {
	0% {
		bottom: auto;
		top: 113px
	}

	49.9% {
		bottom: auto;
		top: 113px
	}

	50% {
		height: 50px;
		top: auto;
		bottom: 0
	}

	100% {
		height: 50px;
		top: auto;
		bottom: 0
	}
}



/*------------------------------------------------------------
SPメディアクエリ
------------------------------------------------------------*/

@media all and (max-width: 767px) {
	#main .mainVisual {
		height: 460px;
		background-image: url("../img/pg_bcn/sp_mainvisual_bg.jpg");
	}

	#pg_bcn #main .mainVisual {
		height: 460px;
		background-image: url("../img/pg_bcn/sp_mainvisual_bg.jpg");
	}

	#main .mainVisual h2 {
		font-size: 4rem;
	}

	#main .mainVisual p {
		font-size: 1.9rem;
	}

	.scroll {
		bottom: 0;
		width: 20.5px;
	}

	.scroll a:after {
		width: 2px;
	}

	.scroll a:before {
		height: 47px;
		width: 2px;
		background-color: #000;
	}
}


/*------------------------------------------------------------
プラットフォーム関連
------------------------------------------------------------*/

.platform .headline04 {
	margin-bottom: 15px;
}

.platform .h4Ttl {
	margin-bottom: 5px;
}

.platform p {
    margin-bottom: 35px;
    font-size: 1.6rem;
	font-weight: 400;
	line-height: 1.6;
}

.platform p.indent1 {
	text-indent: -1em;
	padding-left: 1em;
}

.platform p:last-child {
	margin-bottom: 0;
}

.platform .imgArea {
	margin-bottom: 45px;
}

.platform .text {
	margin-bottom: 60px;
	line-height: 2;
	font-size: 1.6rem;
}

.platform .comTableBox {
	margin: 55px 0 40px;
	padding-bottom: 10px;
	border-bottom: 1px solid #f1f1f1;
}

.platform .comTableBox .img {
	margin-bottom: 5px;
	max-width: 383px;
}

.platform .comTxtUl02 {
	margin: -10px 0 0;
}


@media all and (min-width: 768px) {
	.platform .comTableBox th {
		width: 218px;
	}
}

@media all and (max-width: 767px) {
	.platform .headline04 {
		margin: 0 0 15px;
	}

	.platform .spLarge {
		margin-left: 5px;
		margin-right: 5px;
		font-size: 2.5rem;
	}

	.platform .h4Ttl {
		margin-bottom: 4px;
	}

	.platform .imgArea {
		margin-bottom: 30px;
		overflow-x: scroll;
	}

	.platform .imgArea img {
		max-width: inherit;
		height: 463px;
	}

	.platform.blueBg p {
		font-size: 1.4rem;
		font-weight: 400;
		line-height: 2;
		letter-spacing: -1px;
	}

	.platform .text {
		margin-bottom: 30px;
		font-size: 1.4rem;
	}

	.platform .comTableBox {
		margin: 40px 0 40px;
		padding-bottom: 0;
	}

	.platform .comTableBox .img {
		margin: 10px 0 0;
		max-width: 100%;
	}

	.platform .comTableBox .img img {
		width: 100%;
	}
	.platform p {
    	margin-bottom: 30px;
	    font-size: 1.35rem;
   	 line-height: 1.8;
	}
}






/*------------------------------------------------------------
PC追加スタイル
------------------------------------------------------------*/

/*ヘッダーロゴ調整*/
#gHeader h1 {
	width: 140px; /*ここは変える*/
	justify-content: center;
	align-items: center;
	top: auto;
}

/*サンプルコード*/
.samplecode_list .comTxtUl03 li {
	background: none;
	padding-left: unset;
}

.samplecode {
	max-width: 840;
	border: 1px solid #000000;
	padding: 20px;
	white-space: pre-wrap;
}

.samplecode_list .comTxtUl03 li:not(:last-child) {
	margin-bottom: 78px;
}

/*テーブル幅100％*/
.table_full td {
	width: calc(100% / 4);
}

/*パフォーマンス下部マージン*/
.comBox p:last-child {
	margin-bottom: 40px;
}


/*パフォーマンス表*/
.productBox .imgArea {
	margin-bottom: 58px;
}

.productBox th {
	padding-top: 10px;
}

/*バージョン部分のリスト*/
.productBox .comTxtUl03 li:first-child {
	background: none;
	padding-left: unset;
}
.platform .comTxtUl03 li:first-child {
	background: none;
	padding-left: unset;
}


.productBox ul:not(:last-of-type) {
	margin-bottom: 78px;
}

.productBox ul:last-child {
	margin-bottom: 0;
}

/*販売価格表*/
.platform th {
	padding-top: 10px;
}

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

.flexbox > * {
	width: 50%;
}

.flexbox div:last-child {
	margin-bottom: 0;
}

.flexbox img {
	text-align: center;
	width: 100%;
	max-width: 80%;
	height: auto;
	margin: 0 auto;
	display: block;
}

/*
.flexbox div {
	text-align: center;
}
*/

/*ストラクチャビルダー*/s
.platform p {
    margin-bottom: 35px;
    font-size: 1.6rem;
    font-weight: 400;
    line-height: 1.6;
}

.platform strong {
    font-size: 1.85rem;
}

.deepBlue .comBox .item1{
	width: 55%;
}

.deepBlue .comBox .item2{
	width: 45%;
}

/*対応データベース*/
.platform .imgArea {
	margin-bottom: 90px;
}
.platform .imgArea:last-child {
	margin-bottom: 0;
}
.platform .imgArea p{
    font-size: 1.4rem;
    margin-top: 30px;
}

/*ログインボタン*/
.btn_login {
	margin-bottom: 20px;
}

.contact .comTableBox {
	margin-bottom: 0;
}
.contact .comTableBox {
	margin-bottom: 0;
}

.contact th {
	padding-top: 20px;

}

/*ヘッダーお問い合わせボタン*/
#gHeader .rBox .btn a {
	background-color: #F93A3A;
}

/*フッターお問い合わせボタン*/
#main .content .btn a {
	background-color: #F93A3A;
	border-radius: 4px;
}
#main .content .btn a:hover {
	background-color: #F93A3A;
	opacity: 0.7;
}

/*ナビ下部バー*/
#gNavi li a:hover {
	border-bottom: 2px solid #F93A3A;
}

/*ログインボタン*/
.btn_login {
	margin-bottom: 20px;
}

.contact .Center_BOX {
	text-align: center;
}

/*------------------------------------------------------------
SP追加スタイル
------------------------------------------------------------*/
@media all and (max-width: 767px) {

	/*ハンバーガー内問い合わせボタン*/
	#gHeader .menuBox .btn a {
		background-color: #F93A3A;
		border-radius: 4px;
	}

	/*productBox内リスト*/
	.productBox .comTxtUl03:not(:last-of-type) {
		margin-bottom: 54px;
	}

	.productBox .comTxtUl03 {
		margin-bottom: 35px;
	}

	/*サンプルコード*/
	.samplecode_list .comTxtUl03 li:not(:last-child) {
		margin-bottom: 54px;
	}

	.productBox .imgArea {
		margin: 0 10px 50px;
	}

	.flexbox {
		display: block;
	}
	.flexbox > * {
		width: 100%;
	}

	.flexbox > *:not(last-child) {
		margin-bottom: 50px;
	}
	.platform p {
        margin-bottom: 30px;
        font-size: 1.35rem;
        line-height: 1.8;
	}
	.platform strong {
        font-size: 1.7rem;
	}
	.deepBlue .comBox .item1 {
    	width: 100%;
	}
	.deepBlue .comBox .item2 {
    	width: 100%;
	}
}