@charset "utf-8";
/* CSS Document */
html {scroll-behavior: smooth;}

.contents{ overflow-x: hidden!important;}

a.anchor_h {
    padding-top: 90px !important;
    margin-top: -94px !important;
    display: block;
}
@media (max-width: 650px) {
    a.anchor_h {
		padding-top: 100px !important;
		margin-top: -104px !important;
		display: block;
	}
}

section{padding: 70px 0;}
section h2{font-weight: bold; font-size: 25px; line-height: 1.3em; margin-bottom: 30px;}
section h3{font-weight: bold; font-size: 20px;}
section h4{font-weight: bold; font-size: 14px;}


/* 背景色 */
.gray-light {
	padding: 50px 0;
	background: #F4F5F7;
} 
.gray-heavy {
	padding: 50px 0;
	background: #dde8f1;
}

.bg_gray{background: #f5f4f4;}

/* 背景色 */
.bg_right_gray_v2{background-color: #f5f4f4;}
.bg_right_blue_v2{background-color: #deebff;}

.bg_right_gray:before{
    background-color: #f5f4f4;
    /*width: 100%;*/
}


.pageTitle_bg{background: #e4ecf8;}


.flex_bk_color{width: calc(100% - 40px); background: #0967b2; color: #FFF; padding: 20px; border-radius: 16px;}

.flex_bk_color h3{margin: 20px auto 30px;}


/* eye_catching */
.eye_catching{text-align: center; padding: 0px 0px 20px;}
.eye_catching div{text-align: center; padding: 0px 0px; display: flex; flex-wrap: wrap; margin: auto;}


.eye_catching div{}
.eye_catching div h1{width: 100%; font-size: 1.8em; font-weight: bold; line-height: 140%; text-align: center; margin-bottom: 20px;}
.eye_catching div h1 b{font-size: 1.6em;}


.eye_catching div img{width: calc(64% - 100px); height: auto; margin: auto;}

.eye_catching div div.txt{width: calc(36% - 70px); margin-left: 30px; text-align: center;}
.eye_catching div div.txt p{width: calc(100% - 0px); text-align: left; line-height: 120%;}

.eye_catching div div.txt p.btn{margin: 20px auto auto; text-align: center;}
.eye_catching div div.txt p.btn a{background: #ff9900; padding: 16px 30px; font-size: 16px; font-weight: normal;}
.eye_catching div div.txt p.btn a:hover{background: #ff6600;}

@media (max-width: 600px) {
    .eye_catching{text-align: center; padding: 20px 0px 20px;}
    
    .eye_catching div{padding-top: 0px;}
    
    .eye_catching div img{width: calc(90% - 0px); height: auto; margin: auto auto 20px;}
    .eye_catching div div.txt{width: calc(100% - 0px); margin-left: 0px;}
    .eye_catching div div.txt p{width: calc(100% - 0px); text-align: center; line-height: 120%;}
    
    /*
    .eye_catching div h1{width: 100%; font-size: 1.2em; text-align: center;}
    
    .eye_catching div h1 b{font-size: 1.6em; position: relative; top:0px; left: 0%; width: 100%; display: block; margin-bottom: 0px;}
    */

    
    
    .eye_catching div div.txt p.btn{margin: 10px auto 20px; text-align: center;}
}


/* ページナビ */
nav.nav_contents{width: 100%; height: 70px; background: #242269;}
nav.nav_contents #nav_lst{display: none;}
nav.nav_contents #nav_lst + label.logo_area{display: none;}

@media (min-width: 600px) {
	nav.nav_contents{display: flex; justify-content: center;}
	nav.nav_contents #nav_lst + label.logo_area + ul{width: 1000px; display: flex; justify-content:flex-start;}
	nav.nav_contents #nav_lst + label.logo_area + ul li{width: fit-content; height: 100%;}
	nav.nav_contents #nav_lst + label.logo_area + ul li a{display: flex; justify-content: center; align-items: center; font-size: 16px; height: 100%; padding: 0 50px; color: #FFF;}

	nav.nav_contents #nav_lst + label.logo_area + ul li a sup{position: relative; top:-0.5em;}

	/* リスト5以上は以下を適用 */
	nav.nav_contents #nav_lst + label.logo_area + ul.over_5{display: flex; justify-content: space-between;}
	nav.nav_contents #nav_lst + label.logo_area + ul.over_5 li a{padding: 0 20px;}

	/* ロゴエリアは固定余白 */
	nav.nav_contents #nav_lst + label.logo_area + ul li:first-child a{padding: 0 20px;}
	nav.nav_contents #nav_lst + label.logo_area + ul li:first-child a{font-weight: bold; font-size: 1.3em; line-height: 120%;}
	
	/* 白ロゴがない場合はこの形式を
	nav.nav_contents #nav_lst + label.logo_area + ul li:first-child{background: #FFF;}
	nav.nav_contents #nav_lst + label.logo_area + ul li:first-child a img{height: 50px; width: auto;}
     */
    nav.nav_contents #nav_lst + label.logo_area + ul li:first-child a img{height: 30px; width: auto;}
}

@media (max-width: 1000px) {
	nav.nav_contents #nav_lst + label.logo_area + ul{width: 100%;}
}

@media (max-width: 600px) {
	nav.nav_contents{width: 100%; height: auto; background: #242269;}
	nav.nav_contents #nav_lst + label.logo_area{width: calc(100% - 20px); height: 50px; display: flex; align-items: center; padding-left: 20px;}
	nav.nav_contents #nav_lst + label.logo_area:hover{cursor: pointer;}

	nav.nav_contents #nav_lst + label.logo_area{position: relative;}
	nav.nav_contents #nav_lst + label.logo_area:after{content: ""; width: 8px; height: 8px; position: relative; left:1.6em; 
		border-left: 2px solid #FFF; border-top: 2px solid #FFF; transform: rotate(45deg);}
	nav.nav_contents #nav_lst:checked + label.logo_area:after{transform: rotate(-135deg);}

	nav.nav_contents #nav_lst + label.logo_area + ul{display: none;}
	nav.nav_contents #nav_lst:checked + label.logo_area + ul{width: 100%; display: block; background: #F4F5F7;}
	nav.nav_contents #nav_lst:checked + label.logo_area + ul li:first-child{display: none;}
	nav.nav_contents #nav_lst:checked + label.logo_area + ul li{border-bottom: 1px solid #ddd; padding: 10px 20px;}
	nav.nav_contents #nav_lst:checked + label.logo_area + ul li a{font-size: 1.0em;}
	
	nav.nav_contents #nav_lst + label.logo_area{color: #FFF; font-weight: 600; font-size: 1.3em;}

	/* 白ロゴがない場合はこの形式を
	nav.nav_contents #nav_lst + label.logo_area{background: #FFF;}
	nav.nav_contents #nav_lst + label.logo_area img{height: 40px; width: auto; background: #FFF; padding: 4px 20px;}
     */
    
    nav.nav_contents #nav_lst + label.logo_area img{height: 30px; width: auto; padding: 4px 4px;}
}

/* コンタクト */
.product_contact{
	padding: 75px 0 60px 0;
	background: #0747A6;
}
.product_contact h2{
	margin-bottom: 30px;
	text-align: center;
	color: #fff;
	font-size: 25px;
	font-weight: bold;
	
}
.product_contact ul{
	display: flex; display: -webkit-flex; /* Safari */
	justify-content: center; -webkit-justify-content: center; /* Safari */
}
.product_contact ul li:not(:last-child){margin-right: 20px;}
.product_contact ul li a{
	display: block;
	padding: 13px 70px;
	background: #FF991F;
	border-radius: 5px;
	color: #fff;
	font-size: 18px;
	font-weight: bold;
}
.product_contact ul li a:hover{background: #ff6600;}

@media (max-width: 600px) {
	.product_contact{ padding: 65px 0 55px 0; }
	.product_contact h2{
		margin-bottom: 21px;
		color: #fff;
		font-size: 21px;
		line-height: 1.3em;
	}
    .product_contact ul{ justify-content: center; -webkit-justify-content: center; flex-wrap: wrap; -webkit-flex-wrap: wrap;}
	.product_contact ul li{ width: calc(60% - 0%);}
	.product_contact ul li:not(:last-child){ margin-right: 0px; margin-bottom: 8px;}
	.product_contact ul li a{
		display: block;
		padding: 10px 0px;
		font-size: 15px;
		text-align: center;
		font-weight: bold;
		
	}
}

.product_contact li{width: calc(40% - 40px); background: #FFF; border-radius: 6px; padding: 40px 20px 10px; text-align: center;}
.product_contact li h3{font-weight: bold; font-size: 1.3em; margin-bottom: 10px;}
.product_contact li p{margin-bottom: 20px; text-align: center;}
.product_contact li a{margin-bottom: 10px; border-radius: 30px!important; padding: 13px 20px!important; font-size: 1.2em!important;}

@media (max-width: 600px) {
	.product_contact li{margin-bottom: 20px!important;}
}




/* Assetsとは？  overview */
section.overview{padding: 60px 20px; text-align: center; background: linear-gradient(to bottom, #FFF 0%, #FFF 90%, #EBEBEB);}

section.overview h2{color: #222; font-size: 25px; text-align: center; line-height: 1.3em; font-family: 'Noto Sans JP', sans-serif; font-weight: 500;}
section.overview p{text-align: center;}

section.overview .overview_btn{text-align: center;}
section.overview .overview_btn a{display: inline-block; border: 2px solid #0747A6; background: #FFF; color: #0747A6; font-size: 1.2em; padding: 10px 40px;}
section.overview .overview_btn a:hover{background: #0747A6; color: #FFF;}


@media (max-width: 600px) {
    section.overview .overview_btn a{padding: 10px 20px;}
}





/* Rovo Dev のユースケース */
.lst_solution{width: 100%; padding: 20px 0px 80px; text-align: center;}
.lst_solution h3{width: 100%; align-items: center; color: #294A7D; font-size: 1.6em;  font-weight: bold; margin-bottom: 10px; line-height: 120%; position: relative;}
.lst_solution h3 i{display: inline-block; position: absolute; top:-26px; font-size: 70%; line-height: 100%; font-weight: normal; padding: 4px 10px 1px; background:#294A7D; color: #FFF;  border-radius: 2px;}

.lst_solution .assignment{width: calc(90% - 40px); margin: auto auto 70px; background: #ebebeb; border-radius: 10px; padding: 20px;}

.lst_solution .solution{width: calc(90% - 40px); margin: auto; border: 2px solid #ccc; border-radius: 10px; padding: 20px;}
.lst_solution .solution dt{background: #009df7; color: #FFF; padding: 16px 10px; font-size: 1.6em; text-align: center; font-weight: bold; border-radius: 10px 10px 0 0; width: calc(100% + 24px); position: relative; top:-22px; left: -22px;}
.lst_solution .solution dd{width: calc(100% - 0px); display: flex; justify-content: flex-start; align-items: center; flex-wrap: wrap; align-content: center;}

.lst_solution .solution dd div{width: 50%;}
.lst_solution .solution dd div p{margin-bottom: 30px; text-align: left;}
.lst_solution .solution dd div + img{width: 35%; height: auto; margin: auto;}

.lst_solution .solution{position: relative;}
.lst_solution .solution:before {content: ""; display: block; border: 24px transparent solid; border-top-width: 0; border-right-color: #009df7; position: absolute; top: calc(0% - 52px); left: calc(50% - 15px);  transform: rotate(135deg);}

.lst_solution .solution:after {content: ""; display: block; width: 20px; height: 20px; background: #009df7; position: absolute; left:  calc(50% - 10px);  top: calc(0% - 50px);}

@media screen and (max-width: 650px) {
	.lst_solution{width: calc(100% - 0px); display: flex; flex-wrap: wrap; padding: 20px 0px 50px;}
	.lst_solution h3{font-size: 1.4em; margin-bottom: 10px; line-height: 120%;}
    /*
	.lst_solution h3 i{display: block; width: 100%; font-size: 1.2em; margin-bottom: 10px;}*/
	.lst_solution .solution dd div{width: 100%; padding: 0;}
	.lst_solution .solution dd div + img{width: 70%; height: auto;}
}


/* Rovo Dev 利用環境 */
.environment{width: 100%; padding: 20px 0px 50px; text-align: center;}
.environment_lst{display: flex; flex-wrap: wrap; max-width: 1000px; width: 100%; margin: auto;}
.environment_lst img{width: calc(50% - 4px); margin-right: 4px;}
.environment_lst ul{width: 50%; display: flex; flex-wrap: wrap; justify-content: space-between;}
.environment_lst ul li{width: calc(50% - 4px); border: 1px solid #aaa; display: flex; flex-wrap: wrap; justify-content: center; align-content: center; text-align: center;
font-size: 1.3em; font-weight: bold; background: rgba(255,255,255, 0.6);}
.environment_lst ul li small{display: block; font-size: 60%; width: 100%; line-height: 120%; font-weight: normal;}
.environment_lst ul li:nth-child(1),.environment_lst ul li:nth-child(2){margin-bottom: 4px;}

@media screen and (max-width: 650px) {
    .environment_lst{width: 80%;}
    .environment_lst img{width: calc(100% - 0px); margin-right: 0px; margin-bottom: 4px;}
    .environment_lst ul{width: 100%; display: flex; flex-wrap: wrap; justify-content: space-between;}
    .environment_lst ul li{height: 80px;}
    
}


/* Rovo Dev 価格 */
/*
input.acd-check{display: none;}
label.acd-label{display: block; width: 50%; margin: auto auto 20px auto;}
label.acd-label:after{display: none;}

label.acd-label h3 {width: calc(100% - 80px);  padding: 10px 40px; background: #0747a6; color: #FFF; border-radius: 30px;
box-shadow: 0 1px 5px 2px rgba(0, 0, 0, .3); text-align: center; font-size: 25px; line-height: 1.3em; font-weight: 500; font-family: 'Noto Sans Japanese', sans-serif;}
label.acd-label h3:hover{cursor: pointer;}

label.acd-label h3{position: relative;}
label.acd-label h3:after {content:''; box-sizing: border-box; display: block; width: 10px; height: 10px; 
	position: absolute; top:calc(50% - 7px); right: 30px; border-top: 8px solid transparent; border-bottom: 8px solid transparent; border-right: 14px solid #FFF;}

label.acd-label h3 + p {display: none; position: absolute;}

input.acd-check + label.acd-label + div.acd-content{display: none;}
input.acd-check:checked + label.acd-label{ margin: auto auto 30px auto;}
input.acd-check:checked + label.acd-label + div.acd-content{display: block;}
input.acd-check:checked + label.acd-label h3:after{transform: rotate(-90deg);}

input.acd-check:checked + label.acd-label + div.acd-content{width: 70%; margin: auto;}

@media (min-width: 600px) {
	label.acd-label{position: relative;}
	label.acd-label h3 + p{ position: absolute; top:-65px; left: 0; border: 3px solid #0848db; padding: 10px 20px; border-radius: 10px; background: #FFF; z-index: 9;}
	label.acd-label h3 + p:before {content: ""; position: absolute; bottom: -25px; left: 50%; margin-left: -15px; 
    border: 13px solid transparent; border-top: 13px solid #FFF; z-index: 2;}
	label.acd-label h3 + p:after {content: ""; position: absolute; bottom: -30px; left: 50%; margin-left: -17px; 
    border: 14px solid transparent; border-top: 14px solid #0848db; z-index: 1; }
	label.acd-label h3:hover + p{display: block;}
}

@media (max-width: 600px) {
	label.acd-label{display: block; width: 80%; margin: auto auto 20px auto;}
	label.acd-label h3{font-size: 20px;}
	label.acd-label h3:after{right: 20px;}
}
*/
 div.price_area{width: 70%; margin: auto;}