@charset "UTF-8";

/*
========================================

	jc.css
    各サイトごとに自由に設定
    
========================================
*/

body {
    background: #f2f2f7;
}

div.container-fluid {
	margin-top: 56px;/*header高さ*/
    background-repeat: repeat-y;
    background-size: 100% 100%;
    background-position: 0 0;
    background-image: linear-gradient(#fff,#fff);
}

@media (min-width: 992px) {
	
	div.container-fluid {
		margin-top: 80px;/*header高さ*/
	}

}

@media (min-width: 1920px) {
	
	div.container-fluid {
        background-repeat: repeat-y;
        background-size: 92% 100%;
        background-position: 0 0;
        background-image: linear-gradient(#fff,#fff);
	}

}

/*base.cssの上書き*/

main {
    padding-bottom: 56px;
}

@media (min-width: 1200px) {
	
  div.container {
    max-width: 1600px !important;
  }
	
}/*@media end*/

@media (min-width: 992px) {
    
    .wrapper {
        border-left:1px solid #d2d2de;/*レイアウト罫線用の指定*/
        border-right: 1px solid rgba(0,0,0,0); /*レイアウト罫線用の指定*/
    }
    
}

/*----------------------------------------
	breadcrumb
----------------------------------------*/

div.bcBox {
    display: none;
}

.breadcrumb {/*表示・非表示の設定はd-none d-lg-flexと同じ*/
	/*background-color: transparent;
	border-radius: 0;
	margin: 0;
	min-height: 32px;
    padding:0.5rem 0.5rem 0,5rem 1rem;
	line-height: 2;
    font-size:0.75rem;
    color: #f2f2f7;=#242c97*0.15*/
    display: none;
}

.breadcrumb > li + li:before {
    content: "\0203a";/*小さい＞記号　10進数では　›*/
    padding: 0 8px;
    color: #171c91;
}

.breadcrumb > .active {
    color: #171c91;
}

@media (min-width: 992px) {
    
    div.bcBox {
        display: block;
        width: 100%;
        min-height: 32px;
        /*background:#fff;
        position: fixed !important;*/
        z-index: 999;
        border-left:5px solid #d2d2de;
    }
	
    .breadcrumb { 
		display: flex;
		padding:0 1rem;
        min-height: 32px;
        line-height: 32px;
        color: #171c91;
        font-size:0.75rem;
        width: 100%;
        max-width: 1920px;
        margin: 0 auto;
        background: none;
    }
	
}/*@media end*/

/*--------------------------------------------------------
	its common
	事業部の色指定など（base.css必須）
--------------------------------------------------------*/

main hr {
  margin-top: 1rem;
  margin-bottom: 1rem;
  border: 0;
  border-top: 3px solid #f2f2f7;/*=#242c97*0.15*/
}

main hr.thin {
  border-top: 1px solid #f2f2f7;/*=#242c97*0.15*/
}

main hr.hide {
  border-color: transparent;
}

.btn {
    border-radius: 0;
}

/*color*/
/*#242c97--------基準色*/

/*.bg-ta_its {background-color: #242c97 !important;}----------bootstraptheme.cssで設定可能*/

.bg-ta_its01 { 
    background-image: url("/common/cmn_img/bg_pink01.jpg");
    background-size: cover;
    background-position: top center;
}

.bg-ta_its02 {background-color:#ffe8f0 !important;}/*=#242c97*0.1*/
.bg-ta_its03 {
    border: 2px solid #d2d2de !important; 
    border-radius:2px; 
    background-color: #fff;
}
.bg-ta_its04 {
    background-color:#242c97 !important; 
    color:#fff !important;
}
.bg-ta_its05 {
    background-color:#eb5b8b !important;
    color:#fff !important;
}

.bg-pink015 {background-color:#f2f2f7 !important;}

.bg-pink01 {background-color: #fceaf0 !important;}

.bg-ta01 {background-color: rgba(92,107,192,0.1) !important;}

.bg-ta05 {background-color: rgba(92,107,192,0.5) !important;}

.bg-stripe01 {
  background-image: linear-gradient(-45deg,#fff 25%, #e6f2fa 25%, #e6f2fa 50%, #fff 50%, #fff 75%,#e6f2fa 75%, #e6f2fa );
  background-size: 8px 8px;
}

.bg-line {
    background: linear-gradient(0deg, #fff 45%, #d2d2de 45%, #d2d2de 49%,#fff 49%);

}

.text_jc {color:#242c97;}
.text_Pk99 {color:#d81b60;}
/*.text_Pk10 {color:#242c97;}*/
.text_Pk09 {color:#e8467c;}
.text_Pk08 {color:#eb5b8b;}
.text_Pk07 {color:#ed6f99;}
.text_Pk06 {color:#f084a8;}
.text_Pk05 {color:#d2d2de;}

.marker {
	display:inline !important;
	vertical-align: middle;
    /*background: transparent;*/
    line-height:1.75 !important;/*上記の★印参照*/
	padding:0 0.25rem;
	background:linear-gradient(transparent 75%, transparent 75%);
	/*text-shadow: 1px 1px 0 rgba(255,255,255,0.1), -1px -1px 0 rgba(255,255,255,0.1),
						-1px 1px 0 rgba(255,255,255,0.1), 1px -1px 0 rgba(255,255,255,0.1),
						0px 1px 0 rgba(255,255,255,0.1),  0-1px 0 rgba(255,255,255,0.1),
						-1px 0 0 rgba(255,255,255,0.1), 1px 0 0 rgba(255,255,255,0.1);*/
}

.mk_Bl {background:linear-gradient(transparent 75%, #87ccf9 75%);}
.mk_Pk {background:linear-gradient(transparent 75%, #fbacdb 75%);}

.mk_Bl_w {background:linear-gradient(transparent 40%, #c3e5fc 40%);}
.mk_Pk_w {background:linear-gradient(transparent 40%, #fdd6ed 40%);}

.bg_Rd {}
.bg_Pk {}
.bg_Pp {}
.bg_Dp {}

.bg_Id {}
.bg_Bl {background: rgba(92,107,192,0.5) !important;}
.bg_Lb {}
.bg_Cy {}

.bg_Tl {}
.bg_Gr{}
.bg_Lg {background-color:#c5e1a5;}
.bg_Lm {background-color:#e6ee9c;}

.bg_Ye {}
.bg_Am {}
.bg_Or {}
.bg_Do {}
.bg_Br {}

.text_Rd {}
.text_Pk {}/*上記*/

.text_Pp {}
.text_Dp {}

.text_Id {}
.text_Bl {}
.text_Lb {}
.text_Cy {}

.text_Tl {}
.text_Gr {}
.text_Lg {}
.text_Lm {}

.text_Ye {}
.text_Am {}
.text_Or {}
.text_Do {}
.text_Br {}

.bg_photo01 {
    background-image: url("/common/cmn_img/bg_photo01.jpg");
    background-size: cover;
    background-repeat: repeat-y;
    background-position: 35% top;
     
    /*-webkit-filter: grayscale(25%); filter: grayscale(25%);
    opacity: 0.75;*/
}

.bg_photo02 {
    background-image: url("/common/cmn_img/bg_photo02.jpg");
    background-size: cover;
    background-repeat: repeat-y;
    background-position: left top;
}

.bg_photo03 {
    background-image: url("/common/cmn_img/bg_photo03.jpg");
    background-size: cover;
    background-repeat: repeat-y;
    background-position: left top;
}

.bg_photo04 {
    background-image: url("/common/cmn_img/bg_photo04.jpg");
    background-size: cover;
    background-repeat: repeat-y;
    background-position: right bottom;
}

.bg_photo05 {
    background-image: url("/common/cmn_img/bg_photo05.jpg");
    background-size: cover;
    background-repeat: repeat-y;
    background-position: left top;

}

/*table*/
.table th,
.table td {
  border-color: #d2d2de;/*=#242c97*0.5*/
}

.table.tableCard th {background-color:#f2f2f7;}/*=#242c97*0.15*/
.table.tableCard td {background-color:#fff;}

.table.tableCard th,
.table.tableCard td {border: 1px solid #d2d2de;}/*=#242c97*0.5*/

.table .border-bottom {
    border-bottom: 1px solid #d2d2de !important;/*=#242c97*0.5*/
}

@media (max-width:991.98px) {
	
.table.tableCard {
	border-bottom: 1px solid #d2d2de;/*=#242c97*0.5*/
}

.table.tableCard th,
.table.tableCard td {
	width: 100%;
	display: block;
}
	
.table.tableCard  th {
	border-bottom: none;
}
	
.table.tableCard td {
	border-top: none;
	border-bottom: none;
}

}/*@media end*/


/*linkList table*/

.table.linkList  {
	border-bottom: 1px solid #d2d2de;/*=#242c97*0.5*/
	margin-bottom: 2rem;
}

.table.linkList th {
	width: 12.5%;
	padding-left: 1.5rem;
	padding-right: 1.5rem;
	background-color:#fceaf0;/*=#242c97*0.1*/
	text-align-last: justify;
}

.table.linkList td {
	padding: 0;
}

.table.linkList td a.iconBlank {
	position: relative;
	display: block;
	vertical-align: middle;
    /*background: transparent;*/
    line-height:1.75 !important;/*上記の★印参照*/
	padding: 1rem;
	margin-left: 0.5rem;
	margin-right: 0.5rem;
  }

.table.linkList td span.notes {
	display: block;
	padding: 1rem ;
}

.table.linkList td a.iconBlank::before {/*＝.icon .right */
	position: absolute;
	display: block;
	content: "";
	/*filter: drop-shadow(1px 1px 1px rgba(0,0,0,0.6));*/
	line-height:inherit !important;
	width: 1rem;
	height: 1rem;
    top: 50%;
	left:inherit !important;
	right: 0.5rem !important; 
    -webkit-transform: translateY(-50%); 
    -ms-transform: translateY(-50%); 
    transform: translateY(-50%);
    background-image: url(/common/cmn_img/icon_totec.png);/*アイコン画像*/
    background-repeat: no-repeat;
	background-size: calc(1200 / 100 * 100%) calc(1200 / 100 * 100%);
	background-position: calc(1000 / 1100 * 100%) calc(400 / 1100 * 100%);
}

.table.linkList.table-striped tbody tr:nth-of-type(odd) {
 	background-color: #fceaf0;/*=#242c97*0.1*/
}

.table.linkList td a.iconBlank:hover,
.table.linkList.table-striped tbody tr:nth-of-type(odd) a.iconBlank:hover{
	/*color: #25348e;*/
	background:linear-gradient(transparent 0%, transparent 25%, #fad6e2 25%, #fad6e2 75%,#fad6e2 75%,transparent 0%,transparent 0%);/*=#242c97*0.2*/
}

/*contact*/

section.contactBox {
    background:#171c61;
    color: #fff;
    height: 120px;
}

section.contactBox span.number,
section.contactBox span.nsm {
	color:#4150a7;
}

section.contactBox a {
    width: 100%;
    height: 100%;

    color:#fff !important;
    background: linear-gradient(135deg, #171c61 0%, #242c97 50%,#17a2b8 100%);
    background-size: 100% 600%;
    background-position: 0 0;
    transition: background-position 0.4s;
    
	/*flexCenter*/
	display: flex;
    flex-direction: column; /* 子要素を縦方向に揃える */
    justify-content: center; /* 子要素を中央に配置 */
    /*align-items: center;   子要素を中央に配置 */
}

section.contactBox a:hover {
    background: linear-gradient(135deg, #171c61 0%, #242c97 50%,#17a2b8 100%);
    background-size: 100% 600%;
    background-position: 0 100%;
    transition: background-position 0.4s;
   /*filter: brightness(105%) saturate(110%);*/
}

section.summaryBox {
    background-image: url("/common/cmn_img/bg_03.jpg");
    background-size: cover;
    background-position: center center;
    color: #fff;
    height: 120px;
}

section.summaryBox a {
    width: 100%;
    height: 100%;
    color:#fff !important;
    transition: all 0.4s;
    
	/*flexCenter*/
	display: flex;
    flex-direction: column; /* 子要素を縦方向に揃える */
    justify-content: center; /* 子要素を中央に配置 */
    /*align-items: center;   子要素を中央に配置 */
    
    /*background-color: rgba(23,162,184,0);#17a2b8*/
    background-color: rgba(23,28,97,1);/*#171c61*/
}

section.summaryBox a:hover {
    /*background-color: rgba(23,162,184,0.2);#17a2b8*/
    background-color: rgba(23,28,97,0);/*#171c61*/
    filter: brightness(120%) saturate(110%);
}


@media (min-width: 992px) {
    
    section.summaryBox  {
        height: 240px;
    }

}

/*----------------------------------------
　sub pages
----------------------------------------*/

/*aside {display: none;}

ul#sideNav li.its > ul.category02{display: block;}
ul#sideNav li.egs > ul.category02 {display: block;}
ul#sideNav li.vds > ul.category02{display: block;}*/

/*main.contentsArea*/
/*メインコンテンツの設定-----------(main.contentsArea)*/

main.contentsArea {
    background: #fff;
}

.contentsArea section {
    padding: 1rem 0.5rem;
    /*border:1px dotted #ccc;ガイド*/
}

@media (min-width: 992px) {
    
    main.contentsArea {
        /*border-top:1px dashed #d2d2de;レイアウト罫線用の指定*/
        /*border-right:1px dashed #d2d2de;レイアウト罫線用の指定*/
    }

    .contentsArea section {padding:1.5rem;}
}

/*イントロダクション*/

.contentsArea section.introBox {
	margin-top: 0 !important;
    padding-top: 0;/*breadcrumbありの場合*/
    padding-bottom: 0;
    min-height: 160px;

	/*flexCenter*/
	display: flex;
    flex-direction: column; /* 子要素を縦方向に揃える */
    justify-content: center; /* 子要素を中央に配置 */
    /*align-items: center;   子要素を中央に配置 */
    
    /*border-bottom: 1px solid #d2d2de;レイアウト罫線用の指定*/
    
    background-image: url("/common/cmn_img/bg_main02.jpg");
    background-size: cover;
    background-position: left center;
}

@media (min-width: 992px) {
    
    .contentsArea section.introBox {
        min-height:255px;/*288px-32px-1px---レイアウト罫線用の指定*/
        
        background-image: url("/common/cmn_img/bg_main02.jpg");
        /*background-size: 57.5%;*/
        background-size: 75%;
        background-repeat: repeat-y;
        background-position: left center;
    }
    
}

/*イントロダクションの画像*/

.contentsArea section.introBox img.mainImg01 {/*切り抜きの場合*/
	/*max-width: 560px;*/
	max-width: 680px;
	height: auto;
}

.contentsArea section.introBox img.mainImg02 {/*角版の場合 .ofiとセット必須*/
	max-width: none;
	height: 100%;
}

/*@media (max-width: 1199.98px) {*/
@media (max-width: 991.98px) {
	
    .contentsArea section.introBox img.mainImg01 {/*切り抜きの場合*/
        width: 100%;
        max-width: 600px;
        height: auto;
        margin-top: 2rem;
    }

    .contentsArea section.introBox img.mainImg02 {/*角版の場合 .ofiとセット必須*/
        max-width: 640px;
        height: auto;
        margin-top: 2rem;
    }

}/*@media end*/

@media (max-width: 768px) {

    .contentsArea section.introBox img.mainImg02 {/*角版の場合 .ofiとセット必須*/
        margin-top: 0;
    }

}/*@media end*/


/*h2 見出し*/

.contentsArea h2.sectionTitle {
	padding:1rem;
    font-size: 1rem;
    color: #fff;
    
    height: 160px;
    
	/*flexCenter*/
	display: flex;
    flex-direction: column; /* 子要素を縦方向に揃える */
    justify-content: center; /* 子要素を中央に配置 */
    /*align-items: center;   子要素を中央に配置 */
}

.contentsArea h2.sectionTitle span.subText ,
.contentsArea h2.sectionTitle span.subText02 {
	display: block;
	/*margin: 0.5rem auto;
	border: 1px dotted #000;ガイド*/
    margin-left: -0.25rem;
    font-family: 'Oswald', sans-serif;
}

.contentsArea h2 span.subText {
	display: inline-block;
    text-shadow: 3px 3px 0 rgba(210,210,222,0.15);/*#d2d2de*/
    -webkit-text-stroke: 1px #d2d2de;
    color:rgba(36,44,151,0) !important;/*#242c97;*/
    
    /*font-size:calc(1.575rem + 3.9vw);---display-3*/
    font-size:calc(1.475rem + 2.7vw);/*---display-4*/
    line-height: 1.25;
}

_:-ms-lang(x)::-ms-backdrop, .contentsArea h2 span.subText {/* IE11 のみ適用される */
    color:rgba(255,255,255,0.85) !important;/*#242c97;*/
}

@media (min-width: 992px) {
	
    .contentsArea h2.sectionTitle {
        /*padding: 2rem;*/
        /*padding: 4.5rem 2rem 3rem 2rem;breadcrumbがある場合*/
        padding: 2rem;
        font-size: 1.25rem;
        height: 255px;/*288px-32px-1px*/
    }

}/*@media end*/


@media (min-width: 1200px) {
	
    .contentsArea h2.sectionTitle {
        border-left:1px dashed rgba(210,210,2222,0.85);/*#d2d2de-----レイアウト罫線用の指定*/
        border-right: 1px solid rgba(0,0,0,0);/*レイアウト罫線用の指定*/
    }
    
    .contentsArea h2 span.subText {
        font-size: 5rem;
    }
	
}/*@media end*/

.contentsArea h3,
.contentsArea .h3 {
    padding:0 1rem 1.5rem 1rem;
    color: #242c97;
    /*font-size: 1.75rem !important;=.display-8*/
    font-size: 2.25rem !important;/*=.display-7*/
    font-weight:700;
}

@media (max-width: 1199.98px) {

    .contentsArea h3,
    .contentsArea .h3 {
       /*font-size:calc(1.3rem + .6vw) !important;=.display-8*/
        font-size:calc(1.325rem + .9vw) !important;/*=.display-7*/
    }
    
}

.contentsArea h3 span.subText {
	display: block;
	margin: 0.5rem auto;
	/*border: 1px dotted #000;ガイド*/
	font-size: 1.25rem;
	font-weight: 700;
	color:#8787a6;
	/*font-style: oblique;*/
}

@media (min-width: 992px) {

    .contentsArea h3 {
        padding:0 1rem 2rem 1rem;
    }

}/*@media end*/

section.typoBox {
    position: relative;
    padding-top: 2rem;
}

.contentsArea h4,
.contentsArea .h4 {
    /*text-align: center;*/
    padding:1rem 1rem 0.75rem 1rem; 
    margin-bottom: 1.5rem;
    color: #242c97;
    font-size: 1.5rem !important;/*=.display-9*/
 
    border-left:8px solid #d2d2de;
    border-top:1px solid #d2d2de;
    
    margin-left: -5px;
}

.contentsArea h4.typo {
    display:block;
    position:absolute; 
    top: -1rem;
    left: 0.5rem;
    border: none;
    opacity:0.25;
    
    /*font-size:9rem !important;
    font-weight: 700;
    opacity: 0.5;
    font-style: oblique;*/
}

.contentsArea h4 span.number {
    font-size: 3rem;/*=display-5
    font-style: oblique;*/
    font-weight: 300;
    color: rgba(36,44,151,0.2);
    font-family: 'Oswald', sans-serif;
    vertical-align: baseline;
    margin-right: 1rem;
}

@media (max-width: 1199.98px) {

    .contentsArea h4,
    .contentsArea .h4 {
        font-size:calc(1.275rem + .3vw) !important;/*=.display-9*/
    }
    
}

.contentsArea p {
	/*border: 1px dotted #ccc;ガイド*/
}

.contentsArea p.lead {
    padding:0 1rem 1rem 1rem;
	/*border: 1px dotted #ccc;ガイド*/
    line-height: 2;
}

.contentsArea p.lead.leadHead {
    padding:0 1rem 1.5rem 1rem;
	/*border: 1px dotted #ccc;ガイド*/
    line-height: 1.75;
    font-weight: 500;
    color: #242c97;
    opacity: 0.9;
}
/*
.contentsArea p.lead.display-9 {
    padding:0 1rem 1.5rem 1rem;
	border: 1px dotted #ccc;ガイド
    line-height: 1.75;
    font-weight: 500;
    color: #242c97;
    opacity: 0.9;
}*/

.contentsArea div.contentsAreaTop {
    min-height: 360px;
    margin-bottom: 1.5rem;
}

.contentsArea div.contentsAreaTop h4 {
    margin: 0;
    padding: 0;
    border: 0;
}

.contentsArea div.contentsAreaTop p.lead {
    padding:2rem;
}

.contentsArea div.contentsAreaTop.greeting {
    background-image: url("/company/img/bg_greeting.jpg");
    background-size: cover;
    background-position: top right;
}

.contentsArea div.contentsAreaTop.summary {
    background-image: url("/business/summary/img/bg_summary.jpg");
    background-size: cover;
    background-position: top right;
}

.contentsArea div.contentsAreaTop.toradex {
    background-image: url("/business/toradex/img/bg_toradex.jpg");
    background-size: cover;
    background-position: top right;
}

/*.contentsArea div.contentsAreaTop.toradex p {

}*/

.contentsArea div.contentsAreaTop.training {
    min-height: 180px;
}

.contentsArea dt {
    font-weight: 500;
    margin-bottom: 0;
}

.contentsArea dt.display-8 {
    margin-bottom: 0.9375rem !important;
}

@media (min-width: 992px) {

    .contentsArea p.lead {
        padding:0 1rem 1rem 1rem;
    }
    
    .contentsArea div.contentsAreaTop {
        min-height: 360px;
        padding: 0;
    }
    
    .contentsArea dt.display-8 {
        margin-bottom: 1.125rem !important;
    }

}

/*-------------------------------------------------------------------------
	broken grid
------------------------------------------------------------------------*/

@media (min-width: 1200px) {
    
    .xl-brokenTop05 {
        margin-top: -5%;
    }
    
    .xl-brokenTop10 {
        margin-top: -10%;
    }

    .xl-brokenTop15 {
        margin-top: -15%;
    }
    
    .xl-brokenTop25 {
        margin-top: -25%;
    }

}

.contentsArea .figure {
    position: relative;
    margin-bottom: 1.5rem;
}

.contentsArea .figure.sc {
    position: relative;
    border: 1px solid #999;
    margin-bottom: 1.5rem;
}

.contentsArea .figure.sch {
    position: relative;
    border-top: 1px solid #999;
    border-left: 1px solid #999;
    margin-bottom: 1.5rem;
}

.contentsArea span.figure-caption {
    display: inline-block;
    position: absolute;
    background: #242c97;
    color: #fff;
    right: 0;
    bottom: 0;
    padding: 0.25rem 0.5rem;
    white-space: nowrap;
    min-width: 100px;
    text-align: center;
}

/*tab*/
/*.rowは使用しない----この場合、iOSで崩れる*/

ul.tabBox {
	margin: 0;
	padding: 0;
	width: 100% !important;
	border-right: 2px solid #fff;
	border-bottom: 2px solid #fff;
	
	display: flex;
	/* justify-content: space-between;子要素の最初と最後のアイテムは端に、残りは等間隔で配置 */
	flex-wrap: wrap;/* 子要素を横複数行に配置 */
	align-items: stretch;/* 子要素を親要素の高さ（または幅）いっぱいに配置 */
}

ul.tabBox li {
	border-top: 2px solid #fff;
	border-left: 2px solid #fff;
	min-height: 96px;
	font-weight: 500;
}

ul.tabBox li a {
	width:100%;
	height: 100%;
	/*display:table;--------------edgeでpaddingのバグあり*/
	transition:all .2s ease;
	margin: auto;
	vertical-align: middle;
	
	/*flexCenter*/
	display: flex;
    flex-direction: column; /* 子要素を縦方向に揃える */
    justify-content: center; /* 子要素を中央に配置 */
    align-items: center;  /* 子要素を中央に配置 */
}

ul.tabBox li a:hover {
	cursor: pointer;
}

ul.tabBox li a small.opacity50 {
	font-weight: 400;
}

ul.tabBox li.firstShow a {
}
/*色指定*/
ul.tabBox#sectionTab li.firstShow a {color:#fff; background:#242c97;}

ul.tabBox li span.icon {/*=icon icon-lg four06 left middle inner py-3 px-2 px-lg-3 text-center*/
	text-align: center;
	padding: 1rem 0.5rem !important;
}

ul.tabBox li.thin {
	min-height: 62px;/*高さ低め*/
}

ul.tabBox li.reset {
	cursor: pointer;
	transition:all .2s ease;
	min-height: 62px;
}

ul.tabBox li span.icon::before {/*非表示*/
	display: none;
} 

@media (min-width: 992px) {
	
ul.tabBox li {
	min-height: 88px;
}
    
ul.tabBox li span.icon {
	width: 100%;
	padding-left: 2rem !important;
	padding-right: 2rem !important;
	/*border: 1px dotted #000;ガイド*/
}

ul.tabBox li span.icon::before {/*表示*/
	display: block;
} 

}/*@media end*/

/*導入事例など*/

.card {
  border-radius: 0;/*------作成中-----あとで統一する*/
}

ul.cardBox {
	/*max-width: 1080px;*/
}

ul.cardBox li {
	padding: 1rem 0.5rem;
}

ul.cardBox li a,
ul.cardBox li div.nolink/*まだリンク先がない場合*/ {
	display: block;
	width: 100%;
	height: 100%;
	margin:auto;
	padding: 1rem;
	background: #fff;
	border-top: 2px solid #f2f2f7;
	border-right: 2px solid #f2f2f7;
	border-bottom: 2px solid #f2f2f7;
	border-left: 2px solid #f2f2f7;
	/*border-radius: 2px;*/
	overflow: hidden;
	/*max-width: 320px;
	max-width: 400px;*/
	transition:all .2s ease; 
}

ul.cardBox li a:hover {
	background: #fff;
	border: 2px solid #d2d2de;
    box-shadow: 4px 4px 0 #f2f2f7;
}

dt.card-title {
    margin-bottom: 0.5rem;
}

ul.cardBox li.seminar span.icon,
ul.cardBox li.seminar span.data,
ul.cardBox li.seminar span.area,
ul.cardBox li.seminar span.title,
ul.cardBox li.seminar span.text {
	display: inline-block;
}

ul.cardBox li.seminar span.icon::before {/*アイコン表示なし*/
    display: none !important;
  }

ul.cardBox li.seminar span.icon img {
	width: 100%;
    margin: 0 auto;
	border: 1px solid #ddd;
}

ul.cardBox li.seminar span.data {
	margin-top: 1rem;
}

ul.cardBox li.seminar span.title {
	font-weight: 700;
	font-size: 125% !important;/*=large*/
	margin-top: 0.5rem;
	margin-bottom: 0.5rem;
}

ul.cardBox li.seminar span.text {
	 font-size: 87.5% !important;/*=small*/
}

div.card p.logoCaption {
	margin-top: 0.75rem !important;
	margin-bottom: -0.625rem !important;
	font-weight: 500;
	font-size: 0.75rem;
	color: #666;
	z-index: 2 !important;
	line-height: 1.25;
}

div.card p.logoCaption.xs-s_small {font-size:75% !important;}/*max-width 991.98pxまで.s_smalと同じになるように*/

@media (min-width: 992px) {
	ul.cardBox li {
		padding: 0.5rem;
	}
	
	div.card p.logoCaption {
		font-size: 0.875rem;
	}
	
	div.card p.logoCaption.xs-s_small {
		margin-top: 1.25rem !important;
		margin-bottom: -0.875rem !important;
		font-size: 0.875rem !important;/*p.logoCaption本来の大きさに戻すように*/
	}
}

/*リスト*/

ul.listBox {
	/*max-width: 1080px;*/
}

ul.listBox li {
	padding: 0.25rem 0;
}

ul.listBox li a {
	/*display: block;*/
	width: 100%;
	height: 100%;
	margin:auto;
	padding: 1rem;
	background: #fff;
	border: 2px solid #d2d2de;
	border-radius: 2px;
	overflow: hidden;
	/*max-width: 320px;*/
	max-width: 400px;
    vertical-align: middle;
    
    /*flexCenter*/
	display: flex;
    flex-direction: column; /* 子要素を縦方向に揃える */
    justify-content: center;  /*子要素を中央に配置 */
    /*align-items: center;    子要素を中央に配置 */
}

ul.listBox li a:hover {
	background: #fff;
	border: 2px solid #d2d2de;
    padding-right: 0.75rem;
}

ul.listBox li a .icon.right::before {
    transition:all .1s linear;
}

ul.listBox li a:hover .icon.right::before {
    right: -1rem;
    transition:all .1s linear;
}

@media (min-width: 992px) {
	ul.listBox li {
		padding: 0.25rem;
	}
    
    ul.listBox li a {
        max-width: none;
    }
}

/*フローチャート*/

ul.flowChart {
    background: linear-gradient(0deg, #3ab0c3 0%, #454ba6 100%);/*#17a2b8 , #242c97*/
}

ul.flowChart li {
	position: relative;
	margin-bottom: 16px;
}

ul.flowChart li::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	display: block;
    width: 100%;
    height: 16px;
    background: #fff;
}

ul.flowChart li::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -16px;
	border: 16px solid transparent;
	border-top: 16px solid #a3a4bf;/*=#242c97*0.5*/
}

ul.flowChart li:last-child::after {
	content: none ;
}

ul.flowChart li div.item {
	/*display: block;*/
	width: 100%;
	height: 100%;
	margin:auto;
	
	background: transparent;
    color: #fff;
	border: 2px solid #fff;
	/*border-radius: 0;*/
    padding: 1rem;
    font-size:112.5%;
    
    /*flexCenter*/
	display: flex;
    flex-direction: column; /* 子要素を縦方向に揃える */
    justify-content: center;  /*子要素を中央に配置 */
    align-items: center;    /*子要素を中央に配置 */

}

    @media (min-width: 992px) {

        ul.flowChart {
            background: linear-gradient(90deg, #ffffff 4.2%, #333880 4.2%, #39adbf 95.8%, #ffffff 95.8%);
        }

        ul.flowChart li {
            position: relative;
            margin-bottom: 0;
        }

        ul.flowChart li::before {
            content: "";
            position: absolute;
            top: 0;
            right: 0;
            left: auto;
            display: block;
            width: 16px;
            height: 100%;
            background: #fff;
        }

        ul.flowChart li::after {
            content: "";
            position: absolute;
            top: 50%;
            right: 0;
            left:100%;
            margin-left: -16px;
            margin-top: -16px;
            border: 16px solid transparent;
            border-left: 16px solid #a3a4bf;/*=#242c97*0.5*/
            z-index: 2;
        }

        ul.flowChart li.reverse::after {
            content: "";
            position: absolute;
            top: 50%;
            right: 100%;
            left:0;
            margin-left: 0;
            margin-top: -16px;
            border: 16px solid transparent;
            border-right: 16px solid #a3a4bf;/*=#242c97*0.5*/
            z-index: 2;
        }

        ul.flowChart li div.item {
            width: calc(100% - 16px);
            margin-right: 16px;
            margin-left: 0;
            height: 100%;
            padding: 3rem 1rem;
            min-height: 240px;

            /*flexCenter*/
            display: flex;
            flex-direction: column; /* 子要素を縦方向に揃える */
            justify-content: center;  /*子要素を中央に配置 */
            align-items: center;    /*子要素を中央に配置 */
           }

        ul.flowChart li div.item span {
            -webkit-writing-mode: vertical-rl; /* 縦書きにする */
            -ms-writing-mode: tb-rl; /* 縦書きにする */
            writing-mode: vertical-rl; /* 縦書きにする */
            letter-spacing: 2px;
        }       

        .text-combine {
            font-family:'Noto Sans JP','ヒラギノ角ゴ Pro W3','Hiragino Kaku Gothic Pro','Osaka','メイリオ','Meiryo','ＭＳ Ｐゴシック','MS PGothic',Sans-Serif;
            -webkit-text-combine: horizontal; /* 英数字の向きを縦にする */
            -ms-text-combine-horizontal: all; /* 英数字の向きを縦にする */
            text-combine-upright: all; /* 英数字の向きを縦にする */
        }

        .tategaki {
            -webkit-writing-mode: vertical-rl; /* 縦書きにする */
            -ms-writing-mode: tb-rl; /* 縦書きにする */
            writing-mode: vertical-rl; /* 縦書きにする */
            letter-spacing: 2px;
        }       

        .mixed{
            -webkit-text-orientation: mixed;
            text-orientation: mixed;
        }

        .upright{
            -webkit-text-orientation: upright;
            text-orientation: upright;
        }

        .sideways{
            -webkit-text-orientation: sideways;
            text-orientation: sideways;
        }

    }/*@media end*/

    .sm-tategaki {
        -webkit-writing-mode: vertical-rl; /* 縦書きにする */
        -ms-writing-mode: tb-rl; /* 縦書きにする */
        writing-mode: vertical-rl; /* 縦書きにする */
        letter-spacing: 2px;
        align-items: center !important;
    }

    @media (min-width: 562px) {

        .sm-tategaki {
          -webkit-writing-mode: horizontal-tb; /* 横書きにする */
            -ms-writing-mode: lr-tb; /*横書きにする */
            writing-mode: horizontal-tb; /* 横書きにする */
            letter-spacing: inherit;
            align-items: center !important;
        }

    }/*@media end*/

/*入れ子のフローチャート*/

 .flowChart02 li.step:nth-child(odd){
     background: #e6e6f3;
}

 .flowChart02 li.step:nth-child(even){
     background: #f2f2f7;
}

 .flowChart02 li.first {
    /*padding: 16px;
    font-weight: 500;
    color: #242c97;
     padding: 16px;*/
     padding: 0;
}

.flowChart02 li.first span.large {
    /*flexCenter*/
	display: flex;
    flex-direction: column; /* 子要素を縦方向に揃える */
    justify-content: center; /* 子要素を中央に配置 */
    align-items: center;  /* 子要素を中央に配置 */
    -ms-flex-direction: inherit; /*for IE only   ...これはimg.ofiのためだけの設定...*/
    
    padding: 16px;
    width: 100%;
    height: 100%;
    font-weight: 500;
    color: #25348e;
}

 .flowChart02 li.second ul.row {
    height:100%;
}

 .flowChart02 .second ul li {
    margin-top: 8px;
    margin-bottom: 8px;
}

 .flowChart02 .second span.item {
    height: 100%;
    margin: 0 16px;
    padding: 16px 4px;
    background: #000;
    color: #fff;
    
    /*flexCenter*/
	display: flex;
    flex-direction: column; /* 子要素を縦方向に揃える */
    justify-content: center;  /*子要素を中央に配置 */
    align-items: center;  /*子要素を中央に配置 */
    border-radius: 4px;
     
    font-weight: 500;
}

 .flowChart02 li.step:nth-child(odd) span.item {
    /*background: #333880;*/
    background: linear-gradient(135deg, #333880, #7075b9);
    color: #fff;
}

 .flowChart02 li.step:nth-child(even) span.item {
    /*background: #39adbf;*/
    background: linear-gradient(135deg, #39adbf, #a3ced9);
    color: #fff;
}

 .flowChart02 .arrow {
	position: relative;
}

 .flowChart02 .arrow.bf::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
    margin-top: -16px;
	margin-left: -16px;
	border: 16px solid transparent;
	border-top: 16px solid #a3a4bf;
	z-index: 2;
}

 .flowChart02 .arrow.af::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -16px;
	border: 16px solid transparent;
	border-top: 16px solid #a3a4bf;
	z-index: 2;
}

 .flowChart02 .arrow.af_long::before {
    display: block;
    width: 32px;
    height: 80px; 
    background:linear-gradient(90deg, transparent 0%, transparent 35%, #a3a4bf 35%,#a3a4bf 65%, transparent 65%);

	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -16px;
	border: none !important;
	z-index: 2;
}

 .flowChart02 .arrow.af_long::after {
	content: "";
	position: absolute;
	top: calc(100% + 80px);
	left: 50%;
    margin-top: -8px;
	margin-left: -16px;
	border: 16px solid transparent;
	border-top: 16px solid #a3a4bf;
	z-index: 2;
}

    @media (min-width: 576px) {
        
        .flowChart02 li.first span.large {
            display: block;
             /*line-height:3rem; 中点・の対策*/
        }
        
    }/*@media end*/

    @media (min-width: 1200px) {

        .flowChart02 li .row {
            height: 100%;
        }

         .flowChart02 li.first {
            height: 18%;
        }

        .flowChart02 li.first span.large {
            line-height:inherit;
        }

         .flowChart02 li.second {
            height: 82%;
        }

         .flowChart02 .second span.item {
            margin: 0 8px;
            /*box-shadow:0 0 0 2px #fff inset;*/
         }

         .flowChart02 li.step{
             min-height: 360px !important;
        }

         .flowChart02 li.step:nth-child(odd) span.item {
            /*box-shadow:0 0 0 1px #e6e6f3 inset;*/
            border: 2px solid #e6e6f3;
        }

         .flowChart02 li.step:nth-child(even) span.item {
            /*box-shadow:0 0 0 2px #f2f2f7 inset;*/
            border: 2px solid #f2f2f7;
        }

         .flowChart02 .arrow {
            position: relative;
        }

         .flowChart02 .arrow.bf::before {
            content: "";
            position: absolute;
            top: 50%;
            left: 0;
            right:100%;
            margin-left: -8px;
            margin-top: -16px;
            border: 16px solid transparent;
            border-left: 16px solid #a3a4bf;
            z-index: 2;
        }

         .flowChart02 .arrow.af::after {
            content: "";
            position: absolute;
            top: 50%;
            right: 0;
            left:100%;
            margin-left: -8px;
            margin-top: -16px;
            border: 16px solid transparent;
            border-left: 16px solid #a3a4bf;
            z-index: 2;
        }

         .flowChart02 .arrow.af_long::before {
            display: block;
            width: 100%;
            height: 32px; 
            background:linear-gradient( transparent 0%, transparent 35%, #a3a4bf 35%,#a3a4bf 65%, transparent 65%);

            content: "";
            position: absolute;
            top: 50%;
            right: 0;
            left:100%;
            margin-left:-8px;
            margin-top: -16px;
            border: none !important;
            z-index: 2;
        }

         .flowChart02 .arrow.af_long::after {
            content: "";
            position: absolute;
            top: 50%;
            right: 0;
            left:100%;
            margin-left: calc(100% - 8px);
            margin-top: -16px;
            border: 16px solid transparent;
            border-left: 16px solid #a3a4bf;
            z-index: 2;
        }

    }/*@media end*/

/*EMS用*/

 .flowChart02 li.step.ems{
    background: #c5e4a0 !important;
}

 .flowChart02 li.step.ems .emsInner{
     background: rgba(255,255,255,0.5) !important;
}

 .flowChart02 li.step.ems span.item {
    border: 2px solid #fff;
    font-size:106.25% !important;
}

.flowChart02 .second span.item.gray {
    -webkit-filter: grayscale(100%); filter: grayscale(100%);
    opacity: 0.5;
}

.bg-gray01 {
    /*background: #f2f2f2 !important;*/
    background-image: linear-gradient(-45deg,#fff 25%, #e8e8e8 25%, #e8e8e8 50%, #fff 50%, #fff 75%,#e8e8e8 75%, #e8e8e8 ) !important;
    background-size: 8px 8px !important;
    font-size:87.5% !important;
    font-weight: 400 !important;
}

.bg-gray02 {
    background-image: linear-gradient(-45deg,#fff 25%, #e8e8e8 25%, #e8e8e8 50%, #fff 50%, #fff 75%,#e8e8e8 75%, #e8e8e8 ) !important;
    background-size: 8px 8px !important;
    font-size:87.5% !important;
    font-weight: 400 !important;
}

/*EMS用ここまで*/

/*On site用*/

div.chartBoxOnsite {
    width: 100%;
    overflow: hidden;
    padding-bottom: 0;
    margin:0 auto 1.5rem auto;
    position: relative;
}

div.chartBoxOnsite .bar01 {
    position: absolute;
    width: 8%;
    height: 100%;
    top:0;
    right: 1%;
    border:2px solid rgba(92,107,192,0.35);/*5c6bc0*/
    background: rgba(255,255,255,0.75);
    box-shadow: 3px 3px 0 rgba(92,107,192,0.1);/*5c6bc0*/
}

div.chartBoxOnsite .bar02 {
    position: absolute;
    width: 8%;
    height: 22%;
    top:18%;
    right: 10%;
    /*border:2px solid rgba(92,107,192,0.35);5c6bc0*/
    background: rgba(255,255,255,0.75);
    box-shadow: 3px 3px 0 rgba(92,107,192,0.1);/*5c6bc0*/
}

div.chartBoxOnsite .bar03 {
    position: absolute;
    width: 8%;
    height: 16%;
    top:auto;
    right: 10%;
    bottom: 8%;
    /*border:2px solid rgba(92,107,192,0.35);5c6bc0*/
    background: rgba(255,255,255,0.75);
    box-shadow: 3px 3px 0 rgba(92,107,192,0.1);/*5c6bc0*/
}

div.chartBoxOnsite div.innerBar {
    width: 100%;
    height: 100%;   
	display: flex;
    justify-content: center;
    align-items: center;
}

div.chartBoxOnsite div.innerBar p.rl {
    -webkit-writing-mode: vertical-rl; /* 縦書きにする */
    -ms-writing-mode: tb-rl; /* 縦書きにする */
    writing-mode: vertical-rl; /* 縦書きにする */
    letter-spacing: 2px;
    white-space: nowrap;
    margin: 1rem 0;/*align-items: center;が効かない場合用*/
    font-size:87.5%;
}

div.chartBoxOnsite .bar02::after{
    content: "";
    position: absolute;
    top: 50%;
    left: -15px;
    margin-top: -8px;
    border: 8px solid transparent;
    border-right: 8px solid #9ccc65;
 }

div.chartBoxOnsite .bar03::after{
    content: "";
    position: absolute;
    top: 50%;
    left: -15px;
    margin-top: -8px;
    border: 8px solid transparent;
    border-right: 8px solid #7ebf95;
 }

    @media (min-width: 1200px) {

        div.chartBoxOnsite {
            width: 100%;
            margin:2rem auto 0 auto;
            position: relative;
            padding-top: 60px;
            padding-bottom: 120px;
            padding-left: 0;
            padding-right:0;
            background: rgba(92,107,192,0);/*5c6bc0*/
        }

         /*div.chartBoxOnsite .flowChart02 .arrow.af_long::before {筐体製造
            width: 50%;
        }*/
         /*div.chartBoxOnsite .flowChart02 .arrow.af_long::after {筐体製造
            left:50%;
        }*/
        
        div.chartBoxOnsite .bar01 {
            position: absolute;
            width: 100%;
            height: auto;
            top:0;
            right: auto;
            /*bottom:72px;
            bottom:112px;*/
            left: 0;
            font-weight: 500;
            font-size: 112.5%;
            /*color: #fff;
            background: #25348e;*/
        }

        div.chartBoxOnsite .bar02 {
            position: absolute;
            width:24%;
            height: auto;
            top:auto;
            right: auto;
            /*bottom:0;*/
            bottom: 0;
            left:17.5%;
        }
        
        div.chartBoxOnsite .bar03 {
            position: absolute;
            width:20%;
            height: auto;
            top:auto;
            right: auto;
            /*bottom:0;*/
            bottom: 0;
            left: 75.5%;
        }

        div.chartBoxOnsite div.innerBar {
            width: 100%;
            height: 100%;
            text-align: center;
            display: block;
            padding: 0.5rem 0 1rem 0;
        }

        div.chartBoxOnsite div.innerBar p.rl {
            -webkit-writing-mode: horizontal-tb; /* 横書きにする */
            -ms-writing-mode: lr-tb; /*横書きにする */
            writing-mode: horizontal-tb; /* 横書きにする */
            letter-spacing: inherit;
            white-space:normal;
            margin: 0;/*line1451の取り消し*/
            font-size:100%;
        }

        div.allArea {
            width: calc(100% - 8px);
            height:4px;
            background-color:rgba(92,107,192,0.5);/*#5c6bc0*/
            position:relative;
            margin: 10px auto 0 auto;
        }
        
        div.allArea:before {
            content:'';
            display:inline-block;
            position:absolute;
            top:-14px;
            left:-20px;
            border:16px solid transparent;
            border-right:16px solid #5c6bc0;
        }
        div.allArea:after {
            content:'';
            display:inline-block;
            position:absolute;
            top:-14px;
            right:-20px;
            border:16px solid transparent;
            border-left:16px solid #5c6bc0;
        }
        div.allArea p {
            position:absolute;
            left:0;
            right:0;
            top:-14px;
            margin:auto;
            width:10rem;
            text-align:center;
            background-color:#fff;
            color: #5c6bc0;
        }

        div.chartBoxOnsite .bar02::after{
            content:none;
         }

        div.chartBoxOnsite .bar03::after{
            content:none;
         }

    }/*@media end*/

/*.flowChart02 li.step span.item.onsite01,
.flowChart02 li.step span.item.onsite02 {
    color: #25348e;
    font-weight: 700;
}*/

.flowChart02 li.step span.item.onsite01{
    background: linear-gradient(135deg, #9ccc65, #afd683);
    color: #fff;   
}

div.chartBoxOnsite .bar02,
div.area01 p.d-xl-none {
    background:#9ccc65;
    color: #fff;
    font-weight: 700;
}

.flowChart02 li.step span.item.onsite02{
    background: linear-gradient(135deg, #7ebf95, #97cbaa);
    color: #fff;
}

div.chartBoxOnsite .bar03,
div.area02 p.d-xl-none {
    background: #7ebf95;
    color: #fff;
    font-weight: 700;
}

div.area01{
    border-left:8px solid #9ccc65;
}

div.area02{
    border-left:8px solid #7ebf95;
}

div.area01,
div.area02 {
    padding:0;
    margin-top: 1rem;
}

div.area01 p.d-xl-none ,
div.area02 p.d-xl-none {
    font-size:112.5%;
    padding: 1rem;
    margin-bottom: 1rem;
}

div.area01 ul ,
div.area02 ul {
    margin: 1.5rem 0 1.5rem 1.5rem;
}

    @media (min-width: 1200px) {
        
        div.chartBoxOnsite .bar01 {
            border: 0;
            box-shadow:none;
        }
        
        div.chartBoxOnsite .bar02,
        div.chartBoxOnsite .bar03 {
            border: 0;
            box-shadow: 5px -5px 0 rgba(92,107,192,0.1);/*5c6bc0*/
        }
        
        div.area01::after{
              content: "";
              position: absolute;
              margin: 0;
              top: -38px;
              left: 32px;
              width: 0;
              height: 0;
              border-top: 48px solid #9ccc65;
              border-left: 8px solid transparent;
              border-right: 8px solid transparent;
              transform: rotate(60deg); 
            }

            div.area02::after{
              content: "";
              position: absolute;
              margin: 0;
              top: -38px;
              left: 40px;
              width: 0;
              height: 0;
              border-top: 48px solid #7ebf95;
              border-left: 8px solid transparent;
              border-right: 8px solid transparent;
              transform: rotate(60deg); 
            }
        
    }/*@media end*/

/*On site用ここまで*/

/*button like a bar*/

div.btnBar {
	margin: auto;
}

div.btnBar a {
	display: block;
	width: 100%;
	text-align: center;
	font-size: 1em;
	cursor: pointer;
	padding: 0.25rem 0 0.5rem 0;
}

div.btnBar span.icon.top.icon-lgh {
	padding-top: 1rem;
}

/*open next content*/

div.nextContents {
	margin: auto;
	margin-top: 2rem;
	/*width: 25%;
	min-width: 280px;*/
    background: #fff;
}

div.nextContents span.subText {
	color:#fff;
	text-align: center;
	text-indent: -0.25rem;
	/*display: block;*/
    display: inline-block;
	background: #d2d2de;/*=#242c97*0.5*/
	width: 40px;
	height: 40px;
	border-radius: 20px;
	margin: 0 auto;
	padding: 0;
	line-height: 40px;
	font-size: 0.875rem;
	font-weight:500;
}

div.nextContents span.icon {
    display: inline-block;
}

div.nextContents a {
	display: block;
	width: 100%;
	padding: 0.5rem 1rem;
	/*text-align: center;*/
    text-align: right;
	font-size: 0.875rem;
	cursor: pointer;
}

div.nextContents a span.nextTitle {
    display: block;
}
div.nextContents a span.nextTitle::after {
    display: block;
    content: "";
    border-bottom: solid 2px #f00;
    transition: all .2s ease;
    width: 0;
}
div.nextContents a:hover span.nextTitle::after {
  width: 100%;
}

/*
div.nextContents a span.nextTitle {	
	background: none;
	padding: 0.25rem 0;
	border-bottom: 3px solid #f2f2f7;=#242c97*0.15*
	transition:all .2s ease;
}

div.nextContents a:hover span.nextTitle {
	border-bottom: 3px solid rgba(230,50,110,1);#242c97
	transition:all .2s ease;
}
*/

@media (min-width: 992px) {

	div.nextContents span.subText {
		width: 48px;
		height: 48px;
		border-radius: 24px;
		margin: 0 auto;
		padding: 0;
		line-height: 46px;
		font-size: 1rem;
	}

	div.nextContents a {
		font-size: 1.125em;
	}

}/*@media end*/

/*----------------------------------------
	other parts
----------------------------------------*/

.badgeType {/*-----badgeみたいなタイトル*/
	display: inline-block;
	padding: 0.25rem 1rem 0.4rem 1rem;
	background-color:#fff;
	border-radius: 3px;
	margin-bottom: 1rem;
}

span.badgeType {/*タイトルの左上のバッジ*/
	display: inline-flex;
	padding: 0.25rem 1rem;
	font-style: oblique;
	font-weight:500;
	font-size: 87.5% !important;
	/*background-color:rgba(230,50,110,0.8) !important;#242c97*/
	background:linear-gradient(135deg, #d81b60  0%, #242c97 100%);
	color:#fff !important;
}

span.badgeType  span.large {
	font-weight:700;
	font-size:150%;
	margin-top: -0.25rem !important;
	margin-bottom: -0.125rem !important;
	padding: 0;
 }

.badge-PC {/*PC専用ページのバッジ*/
	display: inline-block;
	background-color: #fff;
	color: #eb5b8b;/*=#242c97*0.8*/
	border: 1px solid #eb5b8b;/*=#242c97*0.8*/
	margin-left: 0;
	font-weight: 400;
	padding-right: 0.5rem;
	padding-left: 0.5rem;
	padding-bottom: 0.25rem;
	border-radius: 10rem;
}

/*箇条書きボックス形式で見せる場合*/

dl.item {/*箇条書きボックス形式で見せる場合*/
	height: 100%;
	padding: 1rem;
	border: 2px solid #d2d2de;
	border-radius:2px; 
	background-color: #fff;
}

dl.item dt {/*-----特長のタイトル*/	
	/*display: block;
	width: 100%;
	text-align: center;
	margin-left:auto;
	margin-right: auto;
	margin-bottom: 1rem;
	padding: 0.25rem 1rem 0.4rem 1rem;
	background-color:#eb5b8b;  =#242c97*0.8
	border-radius:2px;
    color: #fff;*/
}

/*
dl.item dt.merit {-----特長のタイトル	
	display: block;
	width: 100%;
	text-align: center;
	margin-left:auto;
	margin-right: auto;
	margin-bottom: 1rem;
	padding: 0.25rem 1rem 0.4rem 1rem;
	background-color:#eb5b8b;
	border-radius:80px;
    color: #fff;
}

dl.item dt.merit span.icon.left {
}*/

dl.item dd {
	padding: 1rem;	
}

ul.merit,
p.merit {
    border-left:2px solid rgba(36,44,151,0.1);/*#242c97*/
    padding:1rem;
    margin-left: -5px;
}

ul.merit li {
    /*padding:0 1rem 1rem 0;*/
}

ul.merit li dl.number {

}

ul.merit li dl.number dt {
    margin: 0;
    padding: 0 2rem 0 0;
    font-size: 3rem;/*=display-5
    font-style: oblique;*/
    font-weight: 300;
    color: rgba(36,44,151,0.2);
    font-family: 'Oswald', sans-serif;
}


ul.merit li dl.number dt::before {
    content: '';
    display: inline-block;
    /*background: rgba(127,92,192,0.5);*/
    height: 5px;
    width: 16px;
    margin-right: 12px;
    margin-bottom: 5px;
    vertical-align: middle;
    border-top:2px solid rgba(36,44,151,0.1);
    border-bottom: 2px solid rgba(36,44,151,0.1);
}

/*
ul.merit li dl.number dt::after {
    content: '';
    display: inline-block;
    height: 5px;
    width: 16px;
    margin-left: 18px;
    margin-bottom: 5px;
    vertical-align: middle;
    border-top:2px solid #ccc;
    border-bottom: 2px solid #ccc;
}
*/

ul.merit li dl.number dd,
ul.merit li p.item {
    font-size: 125%
}

@media (max-width: 1199.98px) {

    ul.merit li dl.number dt {font-size:calc(1.375rem + 1.5vw);}/*=display-5*/

}/*@media end*/

@media (max-width: 991.98px) {
    
    /*ul.merit li dl.number dt::before {
        display: none;
    }*/
    
}/*@media end*/

/*balloon*/

.balloon_top,
.balloon_bottom {
  position: relative;
  /*display: inline-block;*/
  display: block;
  padding: 2rem;
}

.balloon_top::before {
	content: "";
	position: absolute;
	top: 0;
	left: 50%;
	margin-left: -20px;
	border: 20px solid transparent;
	border-bottom: 20px solid #d2d2de;/*=#242c97*0.5*/
}

.balloon_bottom::before {
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -20px;
	border: 20px solid transparent;
	border-top: 20px solid #d2d2de;/*=#242c97*0.5*/
}

.balloon_bottom + img {
	margin: 0 48% 0 auto;/*矢印が頭に刺さらないように*/
}

@media (min-width: 768px) {

.balloon_bottom.min-h-85 {min-height: 85% !important;}/*文字量による*/

}/*@media end*/

blockquote {
    position: relative;
    padding: 1rem;
    font-style: italic;
    border: solid 1px #d2d2de;/*=#242c97*0.5*/
	background: rgba(255,255,255,0.75);
}

blockquote::before{
    display: inline-block;
    position: absolute;
    top: 0.5rem;
    left: 0.5rem;
    content: "“";
    color: #242c97;
    font-size: 1.25rem;
    line-height: 1;
}

blockquote::after{
    display: inline-block;
    position: absolute;
    bottom: 0.5rem;
    right: 0.5rem;
    content: "”";

    color: #242c97;
    font-size: 1.25rem;
    line-height: 1;
}
blockquote p {
 /*font-size: 87.5% !important;*/
}

blockquote cite {
    display: block;
    /*position: absolute;
    bottom: 1.5rem;
    right: 0.5rem;*/
    text-align: right;
    font-size: 75% !important;
}

blockquote cite a {
    display: inline !important;
	margin: 0 !important;
	padding: 0 !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	overflow: inherit !important;
	max-width: none !important;
	transition: unset;
}

/*news include*/

ul.newsList {
	width: 100%;
	/*border: 1px dotted #000;ガイド*/
	padding: 1rem;
}

/*ul.newsList li {display: none;}----------htmlに直接記述 jQuery*/
ul.newsList li img {display: none;}
/*ul.newsList li.mimamori {display: block;}----------htmlに直接記述 jQuery*/

ul.newsList li dt {
	display:block;
	float:left;
	width:16%;
	margin:0 0 0 2%;
	padding: 0 1% 0 0;
	border-right:3px solid #f2f2f7;
	font-size: 1rem;
    font-weight: 500;
}

ul.newsList li dd.mark {
	display:block;
	float:left;
	width:10%;
	margin:4px 2%;
	
	text-align:center;
	color:#fff;
	background:#fff;
	
	border-radius:12px;
	font-size: 0.75rem;
	
	/*font-weight:bold;*/
	height:22px;
	line-height:0.875rem;/*0.75rem + 上下border 2px */
}

ul.newsList li dd.typeA_01 {border:1px solid #8c61ab; color:#8c61ab; /*background:#9769b8;*/ letter-spacing:-1px;}/*-------------プレスリリース*/
ul.newsList li dd.typeA_02 {border:1px solid #e37c14; color:#e37c14; /*background:#f08115;*/}/*---------お知らせ*/
ul.newsList li dd.typeA_03 {border:1px solid #e03d3f; color:#e03d3f; /*background:#ee4143;*/}/*---------製品・事例*/
ul.newsList li dd.typeA_04 {border:1px solid #3e53b0; color:#3e53b0; /*background:#4359bd;*/}/*---------更新情報*/
ul.newsList li dd.typeA_05 {border:1px solid #769617; color:#769617; /*background:#82a419;*/}/*---------採用情報*/
ul.newsList li dd.typeA_99 {border:1px solid #0d91a8; color:#0d91a8; /*background:#0f9ab4;*/}/*--------掲載事例*/

ul.newsList li dd.typeA_01 {border:1px solid #8c61ab; color:#8c61ab; /*background:#9769b8;*/ letter-spacing:-1px;}/*-------------プレスリリース*/
ul.newsList li dd.typeA_02 {border:1px solid #e37c14; color:#e37c14; /*background:#f08115;*/}/*---------お知らせ*/
ul.newsList li dd.typeA_03 {border:1px solid #e03d3f; color:#e03d3f; /*background:#ee4143;*/}/*---------製品・事例*/
ul.newsList li dd.typeA_04 {border:1px solid #eb5b8b /*=#242c97*0.8*/; color:#eb5b8b /*=#242c97*0.8*/; /*background:#4359bd;*/}/*---------更新情報*/
ul.newsList li dd.typeA_05 {border:1px solid #769617; color:#769617; /*background:#82a419;*/}/*---------採用情報*/
ul.newsList li dd.typeA_99 {border:1px solid #eb5b8b /*=#242c97*0.8*/; color:#fff; background:#eb5b8b /*=#242c97*0.8*/;}/*--------掲載事例*/

ul.newsList li dd.text {
	display:block;
	float:left;
	width:67%;
	padding-bottom:24px;
	font-size: 1rem;
}

ul.newsList li dd.text span.notes {
	font-size: 75% !important;
	vertical-align: baseline;
}

ul.newsList li dd.text a,
ul.newsList li a dd.text {
	text-decoration: underline;
	/*color: #242c97;*/
	color:#eb5b8b; /*=#242c97*0.8*/
}

@media (max-width: 1199.98px) {

	ul.newsList li dt {
		width:100%;
		border-right:0; 
	}
	ul.newsList li dd.mark {
		width:16%;
	}
	ul.newsList li dd.text {
		width:80%;
	}
	
}/*@media end*/

@media (max-width: 991px) {

	ul.newsList li dt {
		width:100%;
		border-right:0; 
	}
	ul.newsList li dd.mark {
		width:100%;
		max-width: 120px;
	}
	ul.newsList li dd.text {
		width:98%;
		margin-left: 2%;
		font-size: 0.875rem;
	}
	
}/*@media end*/

/*可変の円の中にコンテンツを入れる*/

.adjustBox {
    position: relative;
    width: 90%;
    height: auto;
    background: #fff;
	border-radius: 50%;
	overflow: hidden;
    border: 4px solid #FCEEF4;
}

.adjustBox::before {
    content: "";
    display: block;
    padding-top: 100%;
}

.adjustBox .inner {
    position: absolute;
    /*top: 0; 
    left: 0;
    width: 120%;画像縦横1920*1600の場合
    height: 120%;*/
    
    width: 100%;
    height: 100%;
    
    top: 50%;
    left: 50%;
    
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
}

/*各インデックスページの基本の大きさ*/

/*画像トリミング*/

ul.cardBox li img.card-img-top {/*角版の場合 .ofiとセット必須*/
	max-width: none;
	height:35vw;
}

@media (min-width: 576px) {
	ul.cardBox li img.card-img-top {/*角版の場合 .ofiとセット必須*/
		/*max-height: 128px;*/
        max-height: 172px;
	}
}

@media (min-width: 992px) {
	ul.cardBox li img.card-img-top {/*角版の場合 .ofiとセット必須*/
		max-height: 180px;
	}
}