@charset "utf-8";
/* CSS Document */

/* =================================== */
/*    Name: rickcloud.css
/*
/*    Create: 20210621
/*    Update: 
/* =================================== */


/*==============================*/
/* ページナビ */
/*==============================*/
@media (min-width: 600px) {
	.contnets_navi{background: #0747A6;}
	.contnets_navi dl dt{display: none;}
	.contnets_navi ul{display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center;}
	.contnets_navi ul li{text-align: center; color:#FFF; font-size: 16px; font-family: 'Noto Sans Japanese', sans-serif;
	}
	.contnets_navi ul li:not(:last-child){ margin-right: 6%;}
	.contnets_navi ul li a{padding: 10px 0; display: block;}
}

@media (max-width: 600px) {
	.contnets_navi dl dt{
        color:#FFF;
		position: relative;
		padding: 12px 0 12px 14px;
		background: #0747A6;
		box-shadow: 0px 4px 6px -3px rgba(153,153,153,0.7);
		-moz-box-shadow: 0px 4px 6px -3px rgba(153,153,153,0.7);
		-webkit-box-shadow: 0px 4px 6px -3px rgba(153,153,153,0.7);
		cursor: pointer;
        font-size: 16px; font-family: 'Noto Sans Japanese', sans-serif;
	}
	.contnets_navi dl dt:before{
		position: absolute; top: 13px; left: 260px;
		content: "";
		color: #fff;
		width: 9px;
		height: 9px;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
	}
	.contnets_navi dl dt.active:before{
		position: absolute; top: 20px; left: 260px;
		content: "";
		color: #fff;
		width: 9px;
		height: 9px;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	.contnets_navi dl dd{ background: #F4F5F7; }
	.contnets_navi dl dd ul li:first-child{display: none;}
	.contnets_navi dl dd ul li a{
		display: block;
		padding: 13px 0 13px 15px;
		font-size: 15px;
		border-bottom: 1px solid #ddd;
	}
	.contnets_navi dl dd ul li a:hover{ color: #005fe5; background: #DFE1E5; }
	.contnets_navi dl dd ul li a img{ width: 80%; }
}


/* ISO 27001関連 */
#isms .img_left{display:flex;}
#isms .img_left img{margin-right: 30px; height: 50px; width: auto;}


/* アイコン option */
.ico_check_option{height:16px; width:16px; display:inline-block; position:relative; font-size: 0; top:-8px; font-style:normal;} 
.ico_check_option:before{content:'!'; height:0px; width:0px; display:block; position:absolute; top:0px; left:0px; border:transparent solid; border-bottom-color:#ffc400; border-width:0px 9px 16px 9px; color:#253858; font-family:Verdana; font-weight:bold; font-size:13px; line-height:21px; text-indent:-2px;}

/* アイコン NG */
.ico_check_NG{height:18px; width:18px; display:inline-block; position:relative; font-size: 0; top:-8px;} 
.ico_check_NG{border-radius:50px;-webkit-border-radius:50px;-moz-border-radius:50px; background:#f70303;}
.ico_check_NG:before, .ico_check_NG:after{content:''; height:2px; width:12px; display:block; background:#fff; border-radius:10px;-webkit-border-radius:10px;-moz-border-radius:10px; position:absolute; top:8px; left:3px; transform:rotate(-45deg);-webkit-transform:rotate(-45deg);-moz-transform:rotate(-45deg);-o-transform:rotate(-45deg);-ms-transform:rotate(-45deg);}
.ico_check_NG:after{transform:rotate(45deg);-webkit-transform:rotate(45deg);-moz-transform:rotate(45deg);-o-transform:rotate(45deg);-ms-transform:rotate(45deg);}

/* アイコン on、off */
.ico_check_on,
.ico_check_off{
    position: relative;
    padding-left: 15px;
    top:-12px;
    font-size: 0;
}
@media (max-width: 600px){
}
.ico_check_on:before,
.ico_check_off:before{
    content: "";
    position: absolute;
    top: .2em;
    left: 0;
    width: 16px;
    height: 16px;
    /*border-radius: 2px;*/
    border-radius: 50%;
}
.ico_check_on:before{border: 1px solid #54a840; background-color: #54a840;}
.ico_check_off:before{border: 1px solid #f70303; background-color: #f70303;}

.ico_check_on:after {
    content: "";
    position: absolute;
    top: 1px;
    left: 5px;
    -webkit-transform: rotate(50deg);
    -ms-transform: rotate(50deg);
    transform: rotate(50deg);
    width: 5px;
    height: 9px;
    border-right: 2px solid #FFF;
    border-bottom: 2px solid #FFF;
    border-radius: 2px;
}
.ico_check_off:after {
    content: "";
    position: absolute;
    top: 8px;
    left: 4px;
    width: 10px;
    height: 2px;
    /*border-bottom: 2px solid #FFF;*/
    background-color: #FFF;
    border-radius: 2px;
}


/* 背景グレー */
.gray-light {
    padding: 50px 0;
    background: #F4F5F7;
}


/* 追従アイコン（お問い合わせ）表示位置調整 */
#link-form {bottom: 93px;}
@media (max-width: 600px) {
    #link-form {bottom: 48px;}
}

/* h2背景のSP調整 */
@media (max-width: 600px){
    .pageTitle{width: 100%;}
}


/* ライトボックス サイズ調整*/
.lightbox img {
    width: auto;
    height: 90vh;
}
@media (max-width: 600px) {
    .lightbox img {
        width: 90%;
        height: auto;
    }
}


/* 利用可能なソフトウェアリスト */
.soft_lst{display: flex; justify-content: center; flex-wrap: wrap;}
.soft_lst li{margin: auto 5px;}
@media (max-width: 600px) {
    .soft_lst li{margin: auto 0; width: 100%; text-align: center;}
}

/* 構成とオプション */
.constitution h3{font-weight: bold; font-size:1.2em; line-height: 160%;}
/*
.license .license_lst{display:flex; justify-content: space-between;}
.license .license_lst dl{width:32%; background-color:#ebebeb; text-align: center; }
*/
.license .license_lst{display:flex; justify-content: center;}
.license .license_lst dl{width:60%; background-color:#ebebeb; text-align: center; }

.license .license_lst dl dt{font-weight: bold; font-size:1.2em; padding-top:20px;}
/*
.license .license_lst dl dd{padding:20px;}

.license .license_lst dl dd img{width:100%; margin-bottom: 20px;}
*/
.license .license_lst dl dd{padding:20px; text-align: center;}
.license .license_lst dl dd img{width:50%; margin-bottom: 20px;}
.license .license_lst dl dd p{text-align: center;}


@media (max-width: 600px) {
    .license .license_lst{display:flex; flex-wrap: wrap;}
    .license .license_lst dl{width:100%; margin-bottom: 20px;}
.license .license_lst dl dd img{width:100%; margin-bottom: 20px;}

}

.constitution table td{background-color: #FFF; text-align: left;}
.constitution table th:nth-child(1),
.constitution table td:nth-child(1){display: none;}
.constitution table td:nth-child(3),
.constitution table td:nth-child(4),
.constitution table td:nth-child(5){text-align: center;}
.constitution table th{text-align: center; font-weight: bold;}


.constitution .option_lst{width:100%;}
.constitution .option_lst dl{width:60%; margin: auto; }
.constitution .option_lst dl dt{font-weight: bold; font-size:1.12em; padding:4px 10px; margin-top: 0px; background-color: #555; color:#FFF;}
.constitution .option_lst dl dd{padding:10px; border: 1px solid #aaa; background-color: #FFF;}


.constitution .option_lst dl dt{margin-top: 20px;}
.constitution .option_lst dl dd{text-align: center;}
.constitution .option_lst dl dd p{text-align: center;}
.constitution .option_lst dl dd img{margin: auto auto 20px;}



@media (max-width: 600px){
    .constitution .option_lst dl{width:90%; margin: auto; }
    .constitution .option_lst img{width:100%;}
}

.plan_ico{display:flex; justify-content:center; margin: 10px auto 20px;}

.plan_ico{display:inline-flex; justify-content:center; margin: 0;}
.constitution .option_lst dl dt{position:relative;}
.plan_ico{width:100%; position:absolute; left:0; top:5px; justify-content: flex-end;}


.plan_ico li{ width: 80px; height: 18px; background: #aaa; border-radius: 3px; margin: 0 6px; font-weight: bold; font-size: 0.8em; line-height: 0.6em; color: #FFF;}

.plan_ico li{border: 1px solid #FFF; width: 70px; height: 15px; line-height: 15px; text-align: center; padding: 2px 0 0;}

.plan_ico .single{background: #5eb1f7;}
.plan_ico .multi{background: #f3a51e;}
.plan_ico .optplus{background: #269701;}
    
@media (max-width: 600px){
    .plan_ico{width:100%; position:relative; justify-content: center; margin-bottom: 10px;}
}



/*  DC版プラン */
 .pricing_plan_dc .x_plan{padding-left:132px;}
    @media (max-width: 600px) {
        .pricing_plan_dc .x_plan{padding-left:10px;}
    }


.pc_view{display:block;}
.sp_view{display:none;}
@media (max-width: 600px){
    .pc_view{display:none;}
    .sp_view{display:block;}
}

a.anchor{padding-top: 90px!important; margin-top:-94px!important; display: block;}