@charset "UTF-8";

.base {
	max-width:1080px;
	margin:auto;
}
.container {
	clear: both;
	color:dimgray;
	font-size:100%;
	font-weight:normal;
	text-align:center;
	align-items: center;
	justify-content: top;
}

.notice {
	display:inline-block;
	font-size:80%;
	text-align:left;
}

.linkbtn {
	cursor: pointer;
	color: white;
	font-size:120%;
	font-weight: bold;
	border-style: none;
	height: 80px;
	background-color: #014099;
	padding-left:30px;
	padding-right:30px;
	margin-left:30px;
	margin-right:15px;
	margin-bottom:3px;
}


.linkbtn:hover{
	background-color: #024f84 !important;
}
.linkbtn_br:hover{
	background-color: #024f84 !important;
}
.closeButton {
	cursor: pointer;
	border: none;
	background: none;
}
.closeButtonImage {
	width: 70%;
}



/*-------------------------------------
 ページヘッダ
---------------------------------------*/
.headContainer {
	background-color:dimgray;
	color:white;
	padding-top:20px;
	padding-bottom:20px;
}
.headTitle {
	font-size:200%;
	font-weight: bold;
}
.headComment {
	font-size:110%;
	font-weight: bold;
}

/*-------------------------------------
 各セクション（"運用タイプ"、"料金形態を選ぶ"、・・・）タイトル
---------------------------------------*/
.sectionTitle {
	font-size:160%;
	font-weight:bold;
}

.sectionComment {
	font-size:110%;
}


/*-------------------------------------
 選択ブロック（運用タイプ/料金形態）
---------------------------------------*/
.selBlockContainer {
	display:inline-block;
	width:100%;
}

.selBlock {
	border:2px solid dimgray;
	border-radius:10px;
	padding:15px;
	padding-bottom:50px;
	display:inline-block;
	vertical-align:top;
	margin:5px;
	position:relative;
	background-color: whitesmoke;
	cursor:pointer;
}

.selBlockRadio {
	width:20px;
	height:20px;
	cursor:pointer;
}
.selBlockTitle {
	text-align:left;
	font-size:110%;
	padding-left:10px;
	cursor:pointer;
}
.selBlockComment {
	word-break: break-all;
	text-align:left;
	font-size:90%;
	cursor:pointer;
}
.selBlockLink {
	position:absolute;
	right:20px;
	bottom:10px;
	font-size:90%;
}

.activeBlock {
	background-color: #4169E1;
	color:white;
}
.activeBlock:link, .activeBlock:visited, .activeBlock:hover, .activeBlock:active{
	color:white;
}

/*-------------------------------------
 データベース利用
---------------------------------------*/
.cloudDBContainer {
	font-size:120%;
}
.cloudDBCount {
	height:30px;
    width:40px;
}

/*-------------------------------------
 ソフトウェア
---------------------------------------*/
.softContainer {
	width:90%;
	max-width:1200px;
	margin:auto;
}
.softItemContainer {
	display:inline-block;
	padding-bottom:20px;
}
.softItemImgContainer {
	float:left;
	padding-left:10px;
	width:210px;
}
.softItemCountContainer {
	float:left;
	padding-top:10px;
	padding-left:10px;
	padding-right:20px;
	width:60px;
}

.softItemCount {
	height:30px;
	width:35px;
}
.softItemLink {
	text-align:right;
	font-size:90%;
}


/*-------------------------------------
 計算結果
---------------------------------------*/
.errormsg {
	color:red;
	font-weight:bold;
}
.resultBlock {
	width:90%;
	background-color:whitesmoke;
	padding-top:20px;
	padding-bottom:20px;
	margin: auto;
}
.resultFirstPrice {
	color:#DD0000;
	font-size:180%;
	font-weight:bold;
}
.resultNextPrice {
	color:#DD0000;
	font-size:110%;
	font-weight:bold;
}

.resultDetailTitle {
	display:inline-block;
	color:dimgray;
	font-size:140%;
	font-weight:bold;
}
.resultDetailBlock {
	width:90%;
	margin:auto;
	padding-bottom:20px;
}
.resultChart {
	width:90%;
	margin:auto;
	padding-right:10px;
	padding-right:30px;
	display:inline-block;
}

.resultModalTitle {
	color:navy;
	font-size:140%;
	font-weight:bold;
}

/*-------------------------------------
 計算結果内訳
---------------------------------------*/
.resultTbl {
	display:inline-block;
}
.resultTblTh {
	background-color:#333366;
	border: 1px solid white;
	color:white;
	padding-left:10px;
	padding-right:10px;
}
.resultTblTd1 {
	background-color:#EEEEEE;
	border: 1px solid white;
	color:black;
	padding-left:10px;
	padding-right:10px;
	text-align: left;
}
.resultTblTd2 {
	background-color:#DDDDDD;
	border: 1px solid white;
	color:black;
	padding-left:10px;
	padding-right:10px;
}
.resultTblTdTotal {
	background-color:#BBBBBB;
	border: 1px solid white;
	color:black;
	padding-left:10px;
	padding-right:10px;
}


/*-------------------------------------
 モーダル表示
---------------------------------------*/
.contactTitle {
	width:90%;
	text-align:left;
	fond-size:110%;
	margin: auto;
}
.contactBlock {
	width:90%;
	border:2px solid lightgray;
	margin: auto;
	text-align: left;
}
.contactInfo {
	fond-size:110%;
	padding: 20px;
}