@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;}


.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;}

	/* 白ロゴがない場合はこの形式を */
	/*
	xxnav.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;}
}




/* Strategy Collectionとは？  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 h2 b{font-size: 38px; color: #f94a6b; margin-left: 6px; font-weight: bold;}
section.overview p{text-align: center;}

section.overview .overview_lst{display: flex; max-width: 1000px; width: 100%; margin: 50px auto; justify-content: center; }
section.overview .overview_lst li{margin-bottom: 30px; width: 50%; height: 400px;}

section.overview .overview_lst li:nth-child(1){display: flex; justify-content: center; align-content: center; align-items: center; }
section.overview .overview_lst li:nth-child(1) dl{text-align: center; width: 100%; margin: auto; background: #f9ecc5; padding: 30px 20px; border-radius: 0px;}
section.overview .overview_lst li:nth-child(1) dl dt{font-weight: bold; font-size: 1.4em; margin-bottom: 30px; margin-top: 20px;}
section.overview .overview_lst li:nth-child(1) dl dd{display: flex; /*font-size: 1.4em;*/ font-size: 1.2em; justify-content: center; margin-bottom: 20px; 
    /*background: #FFF; padding: 20px 10px; border-radius: 10px;*/}
section.overview .overview_lst li:nth-child(1) dl dd b{font-size: 1.2em; margin-left: 6px;}
section.overview .overview_lst li:nth-child(1) dl dd img{width: 20px; height: auto; margin-right: 6px; position: relative; top:-2px;}

section.overview .overview_lst li:nth-child(2){position: relative;}
section.overview .overview_lst li:nth-child(2) img{width: 400px; height: auto; position: absolute; bottom: 0; left: calc(50% - 150px);}

section.overview .overview_lst li:nth-child(2) p{position: absolute; width: 200px; height: auto; padding: 20px; border-radius: 20px; border: 2px solid #666600; background: #FFF; color: #222; font-weight: bold;}
section.overview .overview_lst li:nth-child(2) p:before{content: ""; position: absolute; bottom: -27px; left: 50%; margin-left: -17px;
border:15px solid transparent; border-top:15px solid #FFF; z-index: 2;}
section.overview .overview_lst li:nth-child(2) p:after{content: ""; position: absolute; bottom: -30px; left: calc(50% - 2px); margin-left: -15px; 
    border:15px solid transparent; border-top:15px solid #666600; z-index: 1;}


section.overview .overview_lst li:nth-child(2) img + p{position: absolute; left: calc(50% - 250px); top:0px;}
section.overview .overview_lst li:nth-child(2) img + p + p{position: absolute; left: calc(50% - 0px); top:18px;}
section.overview .overview_lst li:nth-child(2) img + p + p + p{position: absolute; left: calc(50% - 180px); top:90px;}

@media (max-width: 600px) {
    section.overview h2 b{font-size: 30px; color: #f94a6b; margin-left: 6px;}
    section.overview .overview_lst{flex-wrap: wrap;}
    section.overview .overview_lst li{margin-bottom: 30px; width: 100%;}
    section.overview .overview_lst li:nth-child(1){height: auto; text-align: center;}
    section.overview .overview_lst li:nth-child(1) dl{text-align: center; width: 70%; margin: auto;}
    
    section.overview .overview_lst li:nth-child(2){height: 400px;}
    section.overview .overview_lst li:nth-child(2) img{width: 80%; height: auto; position: absolute; bottom: 0; left: calc(50% - 40%);}

    section.overview .overview_lst li:nth-child(2) p{position: absolute; }
    section.overview .overview_lst li:nth-child(2) img + p{position: absolute; left: calc(50% - 180px); top:0px; width: 170px;}
    section.overview .overview_lst li:nth-child(2) img + p + p{position: absolute; left: calc(50% - 10px); top:70px; width: 150px;}
    section.overview .overview_lst li:nth-child(2) img + p + p + p{position: absolute; left: calc(50% - 150px); top:140px; width: 150px;}
}




/* Strategy Collectionに含まれる製品 app_area */
section.app_area{padding: 60px 0; text-align: center;}
section.app_area h2{color: #222; font-size: 25px; text-align: center; line-height: 1.3em; font-family: 'Noto Sans JP', sans-serif; font-weight: 700;}

section.app_area div{display: flex; flex-wrap: wrap; max-width: 1000px; width: calc(100% - 40px); margin: auto auto; justify-content: center; background: #b2c5f0; padding: 30px 20px 30px;}

section.app_area div a{width: calc(100% / 4 - 60px); margin: auto 10px; display: block; padding: 20px; background: #FFF;}
section.app_area div a:hover{cursor: pointer; opacity: 0.5;}

section.app_area div dl{width: 100%;}
section.app_area div dl dt img{height: 70px; width: auto; margin: 20px auto 20px;}
section.app_area div dl dt{text-align: center; font-weight: bold; font-size: 1.2em; height: calc(70px + 100px);}

section.app_area div dl dd{text-align: center; height: auto;}
section.app_area div dl dd p{text-align: center; line-height: 120%;}
section.app_area div dl dd.coming_soon{height: 62px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; color: #aaa;}

section.app_area div dl dd .link_btn{background: #364279; color: #FFF; border:1px solid #364279; display: inline-block; padding: 4px 10px; border-radius: 4px;}
section.app_area div a:hover dl dd .link_btn{background: #FFF; color: #364279; }

@media (max-width: 600px) {
    section.app_area div{padding: 30px 20px 10px;}
    section.app_area div a{width: calc(100% / 1 - 60px); margin: auto auto 20px;}
   
    section.app_area div dl dt img{height: 70px; width: auto; margin: 20px auto 20px;}
    section.app_area div dl dt{height: auto; margin-bottom: 20px;}
    
    section.app_area div dl dd{text-align: center; height: auto;}
    section.app_area div dl dd.coming_soon{height: auto; display: flex; justify-content: center; align-items: center;}

}



/* Service Collectionで実現できること */
section.realization{padding: 60px 0; text-align: center; }
section.realization h2{color: #222; font-size: 25px; text-align: center; line-height: 1.3em; font-family: 'Noto Sans JP', sans-serif; font-weight: 700;}

section.realization .realization_lst{width: calc(100%); display: flex; flex-wrap: wrap; justify-content: center; margin-bottom: 70px; }
section.realization .realization_lst li{width: calc(100% / 3 - 40px - 10px); border: 2px solid #ccc; margin: auto auto 6px; padding: 20px; height: 80px; display: flex; justify-content:center; align-items:center; text-align: center; flex-wrap: wrap; font-weight: bold; background: #FFF;}

section.realization .realization_lst li{position: relative;}
section.realization .realization_lst li i{position: relative; top:0; right: 0; font-style: normal; font-size: 80%; background: #FF8E90; height: 20px; width: 50px; display: block; text-align: center; margin: auto calc(50% - 25px) 2px; color: #FFF;}

@media (max-width: 600px) {
    section.realization .realization_lst li{width: calc(100% / 1 - 40px - 10px); height: auto;}
}

/* Service Collectionを使ったユースケース例 */
section.realization h3{}
section.realization .use_case{}
section.realization .use_case dt img.img_use_case{width: 300px; height: auto; margin-bottom: 10px;}
section.realization .use_case dt img.ico_arrow{width: 40px; height: auto; margin: 10px auto 20px;}


section.realization .use_case dt p{text-align: center; font-size: 1.2em; font-weight: bold; color: #0275AE;}

section.realization .use_case dd{width: calc(80% - 0px); padding: 40px 20px; background: #FFF; border-radius: 10px; margin: auto auto 100px; text-align: center; position: relative;}
section.realization .use_case dd:last-child{margin: auto auto 0px;}
section.realization .use_case dd img.ico_solve{width: 60px; height: auto; position: absolute; right: 20px; top:20px;}

section.realization .use_case dd b{font-size: 1.2em; margin-bottom: 30px; display: block; text-align: center;}
section.realization .use_case dd p{width: calc(100% - 40px); margin: auto}

@media (max-width: 600px) {
    section.realization .use_case dt img.img_use_case{width: 70%; height: auto; margin-bottom: 10px;}
    section.realization .use_case dt img.ico_arrow{width: 30px; height: auto; margin: 0px auto 10px;}
    section.realization .use_case dd{width: calc(100% - 0px); padding: 40px 10px 20px; margin: auto auto 30px; }
    section.realization .use_case dd img.ico_solve{width: 40px; height: auto; position: absolute; right: 30px; top:10px;}
}



/* よくある質問 */
section.faq{padding: 60px 0; text-align: center; }
section.faq h2{color: #222; font-size: 25px; text-align: center; line-height: 1.3em; font-family: 'Noto Sans JP', sans-serif; font-weight: 700;}

section.faq .faq_lst{width: calc(100% - 0px); text-align: left;}
section.faq .faq_lst dt{background: #e4edff; padding: 40px 40px 0 40px; font-weight: bold; color: #767cc5; border-radius: 10px 10px 0 0; font-size: 1.2em;}
section.faq .faq_lst dd{background: #e4edff; padding: 20px 40px 40px 40px; font-weight: normal; color: #222;  border-radius: 0 0 10px 10px; text-indent: -1em; padding-left: calc(40px + 1em); margin-bottom: 20px;}

@media (max-width: 600px) {
    section.faq .faq_lst dt{background: #e4edff; padding: 20px 20px 0 20px; }
    section.faq .faq_lst dd{background: #e4edff; padding: 10px 20px 20px 20px; padding-left: calc(20px + 1em); }
}



/*  のプラン・価格 */
section.plan_price{padding: 60px 0; text-align: center;}
section.plan_price h2{color: #222; font-size: 25px; text-align: center; line-height: 1.3em; font-family: 'Noto Sans JP', sans-serif; font-weight: 700; margin-bottom: 30px;}

section.plan_price ul{}

/* プラン・価格 */
section.plan_price .btn_lst a{width: 300px;}



/* ボタンリスト */
section.plan_price .btn_lst{width: 100%; display: flex; flex-wrap: wrap; margin: 10px auto; justify-content: center;}
section.plan_price .btn_lst li a{display: flex; justify-content: center; align-items: center; font-size:1.16em; font-weight: normal; width: auto; height:40px; border-radius:4px; padding: 0 15px 0 25px;}

section.plan_price .btn_lst li a{background-color: #ff9900; color:#FFF;}
section.plan_price .btn_lst li a:hover{background-color: #ffb018; color:#FFF;}

@media (max-width: 600px) {
    section.plan_price .btn_lst li{margin: auto; width: 70%;}
}





.solution h2 + ul.solution_link_lst{display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: auto;
/*position: sticky; top:97px; z-index: 9;*/}
.solution h2 + ul.solution_link_lst li{display: flex; justify-content: center; align-items: center; 
padding: 2px 6px; margin: auto 2px 4px; background: #f8f9fa; border: 1px solid #e0e0e0; font-weight: bold; color: #222; border-radius: 4px;}
.solution h2 + ul.solution_link_lst li:hover{color: #252961; background: #e3e5ff;}

@media (max-width: 600px) {
    /*.solution h2 + ul.solution_link_lst{position: sticky; top:120px; z-index: 9;}*/
}


/* 親コンテナ全体のスタイル */
.assets-solution-box {
    font-family: "Noto Sans JP", "Helvetica Neue", Arial, sans-serif;
    color: #333;
    max-width: 900px;
    margin: 40px auto;
    padding: 0 20px;
    line-height: 1.8;
    text-align: center;
}

/* タイトル（IT運用管理部門） */
.assets-solution-box h3 {
    /*
    color: #252961; 
    font-size: 1.8rem;
    text-align: center;
    margin-bottom: 20px;
    position: relative;
    padding-bottom: 10px;
    */
    display: inline-block;
    background: #f7941d;
    font-size: 1.2rem;
    color: #FFF;
    text-align: center;
    padding: 0px 10px;
    border-radius: 4px;
    font-weight: normal;
    margin-bottom: 10px;
}

.assets-solution-box h3::after {
    /*
    content: "";
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 4px;
    background-color: #f7941d; 
    */
}

/* 導入文 */
.assets-solution-box > p {
    text-align: center;
    font-size: 1.6rem;
    line-height: 120%;
    margin-bottom: 30px;
    font-weight: bold;
     color: #252961; 
}

/* --- 課題セクション (dl) --- */
.assets-solution-box dl {
    background-color: #f8f9fa;
    border-radius: 12px;
    padding: 30px;
    margin-bottom: 0px;
    border: 1px solid #e0e0e0;
    text-align: left;
}

.assets-solution-box dt {
    font-weight: bold;
    font-size: 1.2rem;
    color: #252961;
    margin-bottom: 20px;
    display: flex;
    align-items: center;
}

.assets-solution-box dt::before {
    content: "?";
    display: inline-block;
    width: 28px;
    height: 28px;
    background: #f7941d;
    color: #fff;
    border-radius: 50%;
    text-align: center;
    line-height: 28px;
    margin-right: 12px;
    font-size: 0.9rem;
}

.assets-solution-box dd {
    margin-left: 0;
    margin-bottom: 15px;
    padding-left: 1.5em;
    position: relative;
    border-bottom: 1px dotted #ccc;
    padding-bottom: 10px;
}

.assets-solution-box dd:last-child {
    border-bottom: none;
}
    
.assets-solution-box dl + img{width: 150px; height: auto; margin: 10px auto;}

/* --- 解決方法セクション (ul) --- */
.assets-solution-box h4 {
    background: #252961;
    color: #fff;
    padding: 15px;
    border-radius: 8px 8px 0 0;
    font-size: 1.1rem;
    text-align: center;
    margin-bottom: 0;
}

.assets-solution-box ul {
    list-style: none;
    padding: 0;
    margin: 0;
    border: 2px solid #252961;
    border-top: none;
    border-radius: 0 0 8px 8px;
    display: flex;
    flex-wrap: wrap;
}

.assets-solution-box ul li {
    flex: 1;
    min-width: 300px;
    padding: 25px;
    /*background: #fff;*/
    border-right: 1px solid #eee;
}

.assets-solution-box ul li:last-child {
    border-right: none;
}

.assets-solution-box h5 {
    color: #252961;
    font-size: 1.1rem;
    font-weight: bold;
    margin: 0 0 10px 0;
    display: flex;
    align-items: center;
}

.assets-solution-box h5::before {
    content: "✔";
    color: #f7941d;
    font-weight: bold;
    margin-right: 8px;
}

.assets-solution-box b {
    color: #252961;
    background: linear-gradient(transparent 70%, #fff0cc 70%);
}

/* スマホ対応 */
@media (max-width: 600px) {
    .assets-solution-box ul {
        flex-direction: column;
    }
    .assets-solution-box ul li {
        border-right: none;
        border-bottom: 1px solid #eee;
    }
}
    

/* 特長 */
.feature .btn_lst a{width: 300px;}
.feature h3{font-size: 1.4em; font-weight: bold; border-bottom: 3px dotted #ccc; padding-bottom: 0.5em;}
.feature h3 + div{border: 0px solid #ccc; border-radius: 16px; padding: 20px; background: #FFF;}
.feature h3 + div img{border-radius: 16px;}
@media (max-width: 600px) {
    .feature p{text-align: center;}
    .feature img{width: 80%; height: auto; margin: auto;}
}