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

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

.contents{ padding-bottom: 0!important; }
.tmb{ background: #fff;}


.contents{
	padding-bottom: 0!important;
}

@media (max-width: 600px) {
	.contents{ padding-top: 90px; }
}

.notion {
	border:3px double #ccc;
	background-color:#fcfcfc;
	color:#000;
	padding:30px 30px 20px;
	box-sizing: border-box;
}
.notion .ico_notion{position: relative; top:-5px; margin-right: 4px;}

.bg_gray:before { background: #eff3f7;}
.gray-light {padding: 50px 0; background: #F4F5F7;}
.gray-heavy {padding: 50px 0; background: #dde8f1;}

@media (max-width: 600px) {
	.wide_wrap:before { width: 100vw!important;}
	.wrap,
	.wrap90{ overflow: visible; }
}

.pageImg_new_v2 div{width: 40%;}
.pageImg_new_v2 img.eyecatch{width: 45%; height: auto;}

.pageImg_new_v2 div ul.btn_lst{width:330px; justify-content: center;}
@media (max-width: 600px){
    .pageImg_new_v2 div{width: 100%;}
    .pageImg_new_v2 img.eyecatch{width: 70%; height: auto;}
    .pageImg_new_v2 div ul.btn_lst{width:100%; justify-content: center;}
}

.pageImg_new_v2 .type_lst {
    display: flex;
    width: 330px;
    font-weight: bold;
    font-size: 0.9em;
    justify-content: center;
}

.pageImg_new_v2 .type_lst li {
    background: #0747A6;
    color: #FFF;
    margin: 0 4px;
    padding: 2px 8px 0px;
    border-radius: 4px;
}

@media (max-width: 600px){
	.pageImg_new_v2 .type_lst {
		width: 100%;
		display: flex;
		justify-content: center;
		font-size: 1.06em;
		margin-top: 20px;
	}
}


/*==============================*/
/* pageImg */
/*==============================*/
@media (min-width: 600px) {
	div.pageImg_new{
		width: 100%;
		height: 0;
		position: relative;
		padding-top: calc( 270 / 1000 * 100%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
		background: url(/common/img/product/issue-editor/eie-main_bg.png) center center / cover no-repeat;
	}
	div.pageImg_new ul{
		width: calc( 40 / 200 * 100%);
		position: absolute;
		left: calc( 49% - 40 / 190 * 100% );
		bottom: calc( 25% - 20 / 270 * 100% );
		display: flex; display: -webkit-flex; /* Safari */
		justify-content: center; -webkit-justify-content: center; /* Safari */
	}
	div.pageImg_new ul li:not(:last-child){ margin-right: 10px;}
}
@media (max-width: 600px) {
	div.pageImg_new{
		width: 100%;
		height: 0;
		position: relative;
		padding-top: calc( 230 / 360 * 90%); /* calc(画像高さ ÷ 画像横幅 × 100%) */
		background: url(/common/img/product/issue-editor/eie-main_bg_sp.png) center center / cover no-repeat;
	}
	div.pageImg_new ul{
		width: 50%;
		position: absolute;
		left: 50%;
		bottom: calc( 20% - 20 / 270 * 100% );
		margin-left: -40%;
		display: flex; display: -webkit-flex; /* Safari */
		justify-content: space-between; -webkit-justify-content: space-between; /* Safari */
	}
	div.pageImg_new ul li{ width: calc(50% - 1%); }
	div.pageImg_new ul li img{ width: 100%;}
}

div.pageImg_new a:hover{ opacity: 0.9; }




/*==============================*/
/* ページナビ */
/*==============================*/
@media (min-width: 600px) {
	.contents_navi{
		background: #0747A6;
	}
	.contents_navi dl dt{display: none;}
	.contents_navi ul{
		display: flex; display: -webkit-flex; /* Safari */
		align-items: center; -webkit-align-items: center; /* Safari */
	}
	.contents_navi ul li{ text-align: center; }
	.contents_navi ul li:not(:last-child){ margin-right: 6%;}
	.contents_navi ul li a{
		padding: 20px 0;
		display: block;
		color: #fff;
		font-size: 16px;
	}
}

@media (max-width: 600px) {
	.contents_navi dl dt{
		position: relative;
		padding: 12px 0 12px 10px;
		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;
	}
	.contents_navi dl dt:before{
		position: absolute; top: 25px; left: 210px;
		content: "";
		color: #fff;
		width: 9px;
		height: 9px;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
		-webkit-transform: rotate(135deg);
		transform: rotate(135deg);
	}
	.contents_navi dl dt.active:before{
		position: absolute; top: 30px; left: 210px;
		content: "";
		color: #fff;
		width: 9px;
		height: 9px;
		border-top: 2px solid #fff;
		border-right: 2px solid #fff;
		-webkit-transform: rotate(-45deg);
		transform: rotate(-45deg);
	}
	.contents_navi dl dd{ background: #F4F5F7; }
	.contents_navi dl dd ul li:first-child{display: none;}
	.contents_navi dl dd ul li a{
		display: block;
		padding: 13px 0 13px 15px;
		font-size: 15px;
		border-bottom: 1px solid #ddd;
	}
	.contents_navi dl dd ul li a:hover{ color: #005fe5; background: #DFE1E5; }
	.issue-editor dl dd ul li a img{ width: 80%; }
}

/*==============================*/
/* section */
/*==============================*/
section { padding: 70px 0 60px 0; }

/* ======= SP =======*/
@media (max-width: 600px) {
	section { padding: 50px 0 40px 0; }
}

/*==============================*/
/* タイトル */
/*==============================*/
.section_tit{
	margin-bottom: 30px;
	line-height: 1.3em;
	font-size: 25px;
	font-weight: bold;
}

/* ======= SP =======*/
@media (max-width: 600px) {
	.section_tit{
		margin-bottom: 25px;
		line-height: 1.3em;
		font-size: 21px;
	}
}


/*==============================*/
/* コンタクト */
/*==============================*/
.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: 400;
		
	}
}


@media (max-width: 600px) {
    .pageTitle{border-bottom: 1px solid #FFF; margin-bottom: 30px;}
    .pageTitle_tab{margin-bottom: 0px!important;}
}

.pageTitle{border-bottom: 1px solid #FFF;} /*タイトル部分の高さを正しく表示するのに必要 */
.pricing_h2{margin-bottom: 0px!important; }



/* アイキャッチ */	
.eye_catching{width: 100%; text-align: center; padding: 0em 0 2em 0;}
.eye_catching>div{/*width: 1000px;*/width: 800px; margin: auto; /*background: #fcfcfc;*/ display: flex; flex-wrap: wrap;}/* 調整はここだけにしたい */
.eye_catching>div h1{width: 100%; text-align: center; font-size: 1.8em; font-weight: bold; line-height: 140%; margin-bottom: 30px;}
.eye_catching>div h1 small{display: inline-block; margin-bottom: 10px; line-height: 140%;}
	
.eye_catching>div div.area_txt{width: 50%; height: auto;}
.eye_catching>div div.area_txt ul.environment{display: flex; justify-content: center;}
.eye_catching>div div.area_txt ul.environment li{font-size: 0.9em; font-weight: bold; background: #0747A6; color: #FFF; 
	 text-align: center; border-radius: 4px; padding: 2px 8px 0; margin: auto 4px;}
.eye_catching>div div.area_txt p.txt{text-align: left; width: fit-content; margin: auto auto 20px;}
	
.eye_catching>div div.area_img{width: calc(50% - 20px); height: auto; padding: 0px 10px;}
/*.eye_catching>div div.area_img img.eyecatch{width:100%; height: 200px; object-fit: cover;}*/
.eye_catching>div div.area_img img.eyecatch{width:100%; height: 230px; object-fit:contain;} /* Dlセットがない場合は個別で調整 */

.logo_and_txt{display: flex; justify-content: center; align-items: center; font-size: 1.6em; font-weight: bold; color:#333;}
.logo_and_txt img{width: 60px; height: auto; margin-right: 10px;}
.logo_and_txt p{text-align: left;;}
.logo_and_txt span{display: block; text-align: left;}

.eye_catching>div{position: relative;}
.eye_catching>div .btn_lst{position: absolute; left: 0; bottom:0px;}
.eye_catching>div .btn_lst{width: 50%; display: flex; flex-wrap: wrap; justify-content: center;}
.eye_catching>div .btn_lst li a{background-color: #ff9900; color: #FFF; display: flex; justify-content: center; align-items: center;
font-size: 1.16em; font-weight: normal; width: 180px; height: 40px; border-radius: 4px; margin: auto 10px;}
.eye_catching>div .btn_lst li a:hover{background: #ff6600;}

@media (max-width: 1000px) {
	.eye_catching>div{width: 90%;}
	.eye_catching>div div.area_txt{width: 60%; height: auto;}
	.eye_catching>div div.area_img{width: calc(40% - 20px);}
	.eye_catching>div div.area_img{display: flex; align-items: center;}
	.eye_catching>div div.area_img img.eyecatch{width:100%; height: auto; object-fit: cover;}
}
@media (max-width: 600px) {
	.eye_catching{width: 100%; text-align: center; padding: 2em 0 2em 0;}
    
    .eye_catching>div div.area_txt{width: 100%; height: auto;}
    .eye_catching>div div.area_img{width: 100%; height: auto; text-align: center; margin-bottom: 20px;}
    .eye_catching>div div.area_img img.eyecatch{width:80%; height: 150px; object-fit: cover; object-position: 100% 30%; margin: auto;}
    /*
	.eye_catching>div.jwm-solution div.area_img img.eyecatch{width:120%; height: auto; object-fit: cover;}*/
    
	.eye_catching>div .btn_lst{width: 100%; position: relative; left: 0; bottom:0;}
    .eye_catching>div .btn_lst li a{margin: auto 10px 10px!important;}

}


/* ページナビ */
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; color: #FFF; font-weight: bold;}

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

@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); top:4px;}
	nav.nav_contents #nav_lst:checked + label.logo_area:after{transform: rotate(-135deg);  top:2px;}

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



.border_shadow{border: 1px solid #ccc; box-shadow: 5px 5px 10px -5px #aaa;}

.shadow_area{width: calc(100% - 40px); padding: 20px; border-radius: 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: center;}
.shadow_area img{border: 1px solid #ccc; margin: auto;}
@media (max-width: 600px) {
    
}

.support_list{width:fit-content; margin: auto;}
.support_list li{text-align: left;}