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

.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: 30px 0;}
.eye_catching h1{display: none;}
.eye_catching p{text-align: center; line-height: 120%;}
.eye_catching h1 + p{font-size: 1.8em; font-weight: bold; text-align: center; margin: auto auto 30px; line-height: 120%;}
.eye_catching img{margin: 30px auto; width: 300px; height: auto;}
.eye_catching p.btn{margin: 30px auto auto;}
.eye_catching p.btn a{background: #ff9900; padding: 16px 30px; font-size: 16px; font-weight: normal;}
.eye_catching p.btn a:hover{background: #ff6600;}

@media (max-width: 600px) {
    .eye_catching img{margin: 30px auto; width: 260px; height: auto;}
}


/* ページナビ */
nav.nav_contents{width: 100%; height: 70px; background: #0747A6;}
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;}
	*/
}

@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: #0747A6;}
	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;}
	*/
}

/* コンタクト */
.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(30% - 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;}
}


.note{border: 3px double #CCC; padding:30px; box-sizing: border-box;}


/* エンタープライズ企業の経営者・組織のリーダーが直面する課題  problem-section */
section.problem-section{padding: 60px 0; text-align: center; background: linear-gradient(to bottom, #FFF 0%, #FFF 90%, #EBEBEB);}

section.problem-section h2{color: #222; font-size: 25px; text-align: center; line-height: 1.3em; font-family: 'Noto Sans JP', sans-serif; font-weight: 500;}
section.problem-section h2 b{font-size: 38px; color: #f94a6b; margin-left: 6px;}
section.problem-section h2 + p{text-align: center;}

section.problem-section .problem-list{display: flex; max-width: 1000px; width: 100%; margin: auto; justify-content: center; }
section.problem-section .problem-list img.img_problem{width: auto; height: 360px; margin: auto;}
section.problem-section .problem-list ul{width: fit-content; margin-top: 50px;}
section.problem-section .problem-list ul li{margin-bottom: 30px;}
section.problem-section .problem-list ul li h3{display: flex; justify-content: flex-start; align-items: center; color: #00666a; font-size: 22px;}
section.problem-section .problem-list ul li h3 img{width: 25px; height: auto; margin-right: 10px;}
section.problem-section .problem-list ul li p{margin-bottom: 4px; text-align: left;}


@media (max-width: 1100px) {
    section.problem-section{padding: 60px 20px;}
    
}
@media (max-width: 600px) {
    section.problem-section h2 b{font-size: 30px; color: #f94a6b; margin-left: 6px;}

    section.problem-section .problem-list ul{margin-top: 30px;}
    section.problem-section .problem-list ul li h3{font-size: 16px; text-align: left;}
    section.problem-section .problem-list img.img_problem{margin: auto 20px;}

}



/* 戦略的ポートフォリオ管理（SPM） */
section.spm_area{padding: 60px 0; text-align: center;}
section.spm_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.spm_area h2 + p{text-align: center;}

section.spm_area div{background: #63c1c5; max-width: calc(1000px - 50px); width: calc(100% - 50px); margin: auto; display: flex; flex-wrap: wrap; justify-content:center; padding: 25px 25px;  border-radius: 20px;}
section.spm_area div h3{width: 100%; color: #FFF; font-size: 1.8em; font-weight: bold; text-align: center; padding: 10px 0;}
section.spm_area div dl{width: calc(50% - 50px); background: #FFF; margin: 25px; border-radius: 16px;}

section.spm_area div dl dt{text-align: center; font-size: 1.4em; padding: 40px 0 20px; font-weight: bold;}
section.spm_area div dl dd p{text-align: center;}
section.spm_area div dl dd div{background: #FFF; width: 100%; height: 200px; padding: 0 0; margin: auto auto 40px; display: flex; justify-content: center; align-content: center;}
section.spm_area div dl dd img{width: 50%; height: auto; margin: auto;}
section.spm_area div dl:nth-child(1) dd img{width: 40%; height: auto; margin: auto;}

@media (max-width: 1100px) {
    section.spm_areas{padding: 60px 20px;}
}
@media (max-width: 600px) {
    section.spm_area div{flex-wrap: wrap;}
    section.spm_area div dl{width: calc(100% - 50px);}
}



/* Focusで戦略を一元管理することで、組織は変わる！ */
section.change_flow{padding: 60px 0 80px; text-align: center;}
section.change_flow 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.change_flow h2 b{font-size: 38px; color: #f94a6b;}

section.change_flow h2 + ul{display: flex; width: 100%; justify-content: space-between;}
section.change_flow h2 + ul li{width: calc(30% - 40px); background: #FFF; position: relative; padding: 20px;}

section.change_flow h2 + ul li:not(:first-child):after{content: ""; width: 50px; height: 50px; display: block; position: absolute; top:calc(50% - 25px); left: -50px;
    background-image: url(/common/img/product/focus/change_flow_alow.svg); background-repeat: no-repeat;}
section.change_flow h2 + ul li h3{margin: auto auto 20px; color: #00666a;}

section.change_flow h2 + ul li p{text-align: center;}
section.change_flow h2 + ul + img {margin: 50px auto 40px; display: block;}
section.change_flow h2 + ul + img + div{width: calc(100% - 40px); padding: 0 20px; display: flex; background: #63c0c4; align-items: center;}
section.change_flow h2 + ul + img + div img{width: 50%; height: auto;}
section.change_flow h2 + ul + img + div p{width: 50%; color: #FFF; font-size: 2.4em; font-family: 'Noto Sans JP', sans-serif; font-weight: 700; line-height: 140%;}


@media (max-width: 1100px) {
    section.change_flow{padding: 60px 20px;}
}
@media (max-width: 600px) {
    section.change_flow h2 b{font-size: 30px; color: #f94a6b; margin: 10px auto auto;}
    section.change_flow h2 + ul{flex-wrap: wrap;}
    section.change_flow h2 + ul li{width: calc(100% - 40px); margin: auto auto 50px;}
    section.change_flow h2 + ul li:not(:first-child):after{content: ""; width: 50px; height: 50px; display: block; position: absolute; left:calc(50% - 25px); top: -50px;
    background-image: url(/common/img/product/focus/change_flow_alow.svg); background-repeat: no-repeat; transform: rotate(90deg);}
    section.change_flow h2 + ul + img{margin: auto auto 30px;}
    section.change_flow h2 + ul + img + img + p{margin: auto auto; text-align: center; font-size: 2.0em; color: #00666a; display:block; background: #FFF; padding: 50px 0;
font-family: 'Noto Sans JP', sans-serif; font-weight: 700; line-height: 140%;}

    section.change_flow h2 + ul + img + div{display: flex; flex-wrap: wrap;}
    section.change_flow h2 + ul + img + div img{width: 80%; height: auto; margin: auto;}
    section.change_flow h2 + ul + img + div p{width: 100%; font-size: 2.0em; margin-bottom: 20px;}
}



/* 製品特長 */
section.features{padding: 60px 0; text-align: center;}
section.features 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.features i.ico_point{font-style: normal; display: inline-block; background: #FFA6A8; color: #FFF; padding: 6px 6px 4px; border-radius: 2px; font-size: 12px; line-height: 100%;}
section.features ul{margin-left: 1em;}
section.features ul li{list-style: disc!important; margin-bottom: 10px; }


/* 戦略と現場をつなぎ、変化に強い組織づくりをご支援するソリューション */
section.solution{padding: 60px 0; text-align: center;}
section.solution 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: 50px;}
section.solution dl{display: flex; width: 100%;}
section.solution dl dt{width: 60%;}

section.solution dl dt{position: relative;}
section.solution dl dt ul li:nth-child(1){width: 152px; height: 58px; position: absolute; top:173px; left: 42px;}
section.solution dl dt ul li:nth-child(2){width: 50px; height: 50px; position: absolute; top:227px; left: 353px;}
section.solution dl dt ul li:nth-child(3){width: 50px; height: 50px; position: absolute; top:227px; left: 421px;}
section.solution dl dt ul li:nth-child(4){width: 155px; height: 50px; position: absolute; top:65px; left: 185px;}
section.solution dl dt ul li:nth-child(5){width: 50px; height: 50px; position: absolute; top:342px; left: 421px;}

section.solution dl dt ul li a{display: block; width: 100%; height: 100%; background: #FFF; opacity: 0.0;}
section.solution dl dt ul li a:hover{opacity: 0.5;}

section.solution dl dt ul + p {text-indent: -1em; padding-left: 1em;}


section.solution dl dt img{width: 90%; height: auto; margin: auto;}
section.solution dl dd{width: 40%;}
section.solution dl dd h3{margin-bottom: 20px;}

@media (max-width: 600px) {
    
    section.solution dl{display: flex; width: 100%; flex-wrap: wrap;}
    section.solution dl dt{width: 100%; margin-bottom: 30px;}
    section.solution dl dd{width: 100%;}
    
    /* クリッカブルの為、固定で */
    section.solution dl dt img{width: 100%; height: auto; margin: auto;}
    section.solution dl dt{position: relative;}
    section.solution dl dt ul li:nth-child(1){width: 29%; height: 11%; position: absolute; top:31%; left: 2%;}
    section.solution dl dt ul li:nth-child(2){width: 9%; height: 8%; position: absolute; top:42%; left: 60%}
    section.solution dl dt ul li:nth-child(3){width: 9%; height: 8%; position: absolute; top:42%; left: 73%;}
    section.solution dl dt ul li:nth-child(4){width: 30%; height: 10%; position: absolute; top:11%; left: 28%;}
    section.solution dl dt ul li:nth-child(5){width: 9%; height: 8%; position: absolute; top:63%; left: 73%;}

    section.solution dl dt ul + p {width: 100%; margin-left: 0!important;}
}

@media (max-width: 550px) {
    section.solution dl dt ul li:nth-child(2){width: 9%; height: 9%; position: absolute; top:41%; left: 60%}
    section.solution dl dt ul li:nth-child(3){width: 9%; height: 9%; position: absolute; top:41%; left: 73%;}
    section.solution dl dt ul li:nth-child(5){width: 9%; height: 9%; position: absolute; top:62%; left: 73%;}
}
@media (max-width: 500px) {
    section.solution dl dt ul li:nth-child(1){width: 29%; height: 11%; position: absolute; top:30%; left: 2%;}
    section.solution dl dt ul li:nth-child(2){width: 9%; height: 9%; position: absolute; top:40%; left: 60%}
    section.solution dl dt ul li:nth-child(3){width: 9%; height: 9%; position: absolute; top:40%; left: 73%;}
    section.solution dl dt ul li:nth-child(5){width: 9%; height: 9%; position: absolute; top:60%; left: 73%;}
}

@media (max-width: 400px) {
    section.solution dl dt ul li:nth-child(1){width: 29%; height: 11%; position: absolute; top:29%; left: 2%;}
    section.solution dl dt ul li:nth-child(2){width: 9%; height: 9%; position: absolute; top:39%; left: 60%}
    section.solution dl dt ul li:nth-child(3){width: 9%; height: 9%; position: absolute; top:39%; left: 73%;}
    section.solution dl dt ul li:nth-child(4){width: 30%; height: 10%; position: absolute; top:10%; left: 28%;}
    section.solution dl dt ul li:nth-child(5){width: 9%; height: 9%; position: absolute; top:58%; left: 73%;}
}

/*  のプラン・価格 */
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%;}
}

/* Focusをご検討中の皆様へ */
section.consideration > div{display: flex; flex-wrap: wrap; max-width: 1000px; width: calc(100% - 40px); margin: auto auto; justify-content: center; background: #f9ecc5; padding: 30px 20px 30px;}
section.consideration > div h3{width: 100%; color: #EF7700; font-weight: bold; font-size: 1.9em; margin: auto auto 20px;}
section.consideration > div > a{width: calc(100% / 3 - 62px); margin: auto 10px; display: block; padding: 20px; background: #FFF;}
section.consideration > div > a:hover{cursor: pointer; opacity: 0.5;}
section.consideration > div > a.active {border: 2px solid #EF7700;}

section.consideration > div dl{/*width: calc(100% / 3 - 60px); */ width: 100%; /*margin: auto 10px; padding: 20px; background: #FFF;  */}
section.consideration > div dl dt{text-align: center; font-weight: bold; font-size: 1.2em; display: flex; justify-content: center; align-content: center; align-items: center; height: 50px;}
section.consideration > div dl dd{text-align: center; height: 200px;}
section.consideration > div dl dd img{height: 50px; width: auto; margin: 30px auto 30px;}
section.consideration > div dl dd p{text-align: center; line-height: 120%;}
section.consideration > div p.btn {margin-top: 30px;}
section.consideration > div p.btn a {display: block; background-color: #ff9900; padding: 16px 30px; font-size: 1.2em;}
section.consideration > div p.btn a:hover{background-color: #ff6600;}

section.consideration h2 + p + p {margin-bottom: 30px;}

@media (max-width: 600px) {
    section.consideration > div{padding: 30px 20px 10px;}
    section.consideration > div a{width: calc(100% / 1 - 60px); margin: auto auto 20px;}
    section.consideration > div dl dd{text-align: center; height: auto;}
    section.consideration > div dl dt{height: auto;}
    section.consideration > div dl dd img{height: 40px; width: auto; margin: 30px auto 30px;}
    section.consideration > div p.btn{width: calc(100% - 20px); text-align: center; margin-top: 10px;}
}