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

/* XXXXXXXXXXX  root階層用  XXXXXXXXXXX */


/* border-boxを全ての要素に適用 */
*, *:before, *:after {
	-webkit-box-sizing: border-box;
	box-sizing: border-box;
}



/* XXXXXXXXXXXXXXXXXXXXXXXX  image  XXXXXXXXXXXXXXXXXXXXXXXX */
div.ccm-page img {
	max-width: 100%;
	height: auto;
	vertical-align: bottom;
}


div.ccm-page a img {
	border-width: 0px;
	border-style: none;
	border-color: #fff;
	background: transparent;
}
div.ccm-page a img:hover {
	opacity: 0.6;
    -ms-filter: "alpha(opacity=60)";
	filter: alpha(opacity=60);
}

/* PCとモバイルでの画像切り替え用*/
.img-mb {
    display: none;
}




/* XXXXXXXXXXXXXXXXXXXXXXXX  video  XXXXXXXXXXXXXXXXXXXXXXXX */

div.ccm-page .video1 {
    width: 1100px;
    /*iPhone safariの枠線を消す*/
    filter: drop-shadow(0px 0px #000);
    /*PCのChromeの枠線を消す*/
    outline: none;
    border: none;
}

div.ccm-page video {
    /*iPhone safariの枠線を消す*/
    filter: drop-shadow(0px 0px #000);
    /*PCのChromeの枠線を消す*/
    outline: none;
    border: none;
}

div.ccm-page video.video1_main {
    width: 100%;
    max-width: 1100px;
    /*iPhone safariの枠線を消す*/
    filter: drop-shadow(0px 0px #000);
    /*PCのChromeの枠線を消す*/
    outline: none;
    border: none;
}

div.ccm-page .video2 {
    width: 100%;
    max-width: 500px;
    /*iPhone safariの枠線を消す*/
    filter: drop-shadow(0px 0px #000);
    /*PCのChromeの枠線を消す*/
    outline: none;
    border: none;
}



/* XXXXXXXXXXXXXXXXXXXXXXXX  wrap  XXXXXXXXXXXXXXXXXXXXXXXX */


div.ccm-page {
	width: auto;
}

div.ccm-page .wrap-all {
    background-color: #e1e7f5;
	width: auto;
    margin: 0;
    padding: 0;
}






/* XXXXXXXXXXXXXXXXXXXXXXXX  header  XXXXXXXXXXXXXXXXXXXXXXXX */

/* xxxxxxxxxxxx  header 1  xxxxxxxxxxxx */
div.ccm-page header {
	width: auto;
	margin: 0;
	padding: 0;
}
div.ccm-page .wrap-head {
	width: auto;
    height: auto;
    margin: 0;
	padding: 0;
    position: relative;
    background-color: #FFFFFF;
    box-shadow: 0px 3px 4px 0px gray;
}
div.ccm-page .wrap-head-inner {
	width: 1100px;
    height: 95px;
	margin: 0px auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-content: center;
}

div.ccm-page .head-logo {
    width: 220px;
    height: auto;
}





    /* 背景を暗くするオーバーレイ。モバイルメニュー時に使用 */
    /*div.ccm-page .overlay {
        display: none;
        position: fixed;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, .6);
        z-index: 4;
    }*/


/* xxxxxxxxxxxx  hamburger menu (.head-menu)xxxxxxxxxxxx */
div.ccm-page .head-menu {
    visibility: hidden;
    
    position: absolute;
    top: 20px;
    right: 20px;
    width: 40px;
    height: 40px;
    /*border: solid 1px #333333;*/
    /*padding: 5px;*/
    background-color: #FFFFFF;
    z-index: 16;
    cursor: pointer;
}
div.ccm-page .head-menu span { /*3本の線*/
    display: block;
    transition: all .3s; /**/
    /*position: absolute;*/
    width: 100%;
    height: 4px;
    border-radius: 2px;
    margin: 8px 0;
    background-color: #666666;
    z-index: 18;
}
div.ccm-page .head-menu.open span:nth-of-type(1) {
    transform: translate(4px, 12px) rotate(45deg);
}
div.ccm-page .head-menu.open span:nth-of-type(2) {
    opacity: 0; /*透明に*/
}
div.ccm-page .head-menu.open span:nth-of-type(3) {
    transform: translate(4px, -12px) rotate(-45deg);
}






/* xxxxxxxxxxxx  global menu PC  xxxxxxxxxxxx */
div.ccm-page .wrap-head-nav { /* グローバルメニューバックのラッパー */
    /*display: none;*/
	width: 100%;
	height: 45px;
	margin: 0px;
	padding: 0px;
    background-color: #FFFFFF;
    z-index: 10;
    position: relative;
}

div.ccm-page .wrap-head-nav-inner {
    width: 1100px;
    margin: 0 auto;
}
div.ccm-page .wrap-head-nav-inner ul {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
}
div.ccm-page .wrap-head-nav-inner ul li {
    position: relative;
    width: auto;
    text-align: center;
    list-style: none;
    font-size: 1rem;
    border-left: 1px solid #C3C3C3;
    border-right: 1px solid #C3C3C3;
}
div.ccm-page .wrap-head-nav-inner ul li+ li {
    border-left: 0;
    border-right: 1px solid #C3C3C3;
}
div.ccm-page .wrap-head-nav-inner ul li a {
    display: block;
    padding: 10px 18px;
    text-decoration: none;
    color: #5e9676;
}
div.ccm-page .wrap-head-nav-inner ul li a:hover {
    background-color: #5e9676;
    color: #FFFFFF;
}

/*
div.ccm-page .wrap-head-nav-inner ul li ul {
    width: 200px;
    margin-top: 0px;
    margin-left: 0px;
    padding: 0px;
    display:flex;
    flex-direction: column;
    position: absolute;
    list-style: none;
}
div.ccm-page .wrap-head-nav-inner ul li ul li {
    overflow: hidden;
    height: 0px;
    color: #2E872A;
    text-align: left;
}
div.ccm-page .wrap-head-nav-inner ul li:hover ul li {
    overflow: visible;
    width: 200px;
    height: 40px;
}
div.ccm-page .wrap-head-nav-inner ul li ul li a {
    padding: 11px 10px;
    color: #2E872A;
    font-size: 1rem;
    background-color: #F2F7E5;
}
*/






/* XXXXXXXXXXXXXXXXXXXXXXXX  article  XXXXXXXXXXXXXXXXXXXXXXXX */


/* xxxxxxxxxxxx  back color  xxxxxxxxxxxx */
div.ccm-page .back-color01 { /*トップ途中バックカラー*/
    background-color: #fdf9f1;
}






/* xxxxxxxxxxxx  article A Full系  xxxxxxxxxxxx */
div.ccm-page article {
	width: auto;
	margin: 0;
	padding: 0;
}

div.ccm-page .wrap-photo {
    width: 100%;
    text-align: center;
}

div.ccm-page .wrap-full-conte {
    width: 100%;
}



/* パンくずリスト */
/*
div.ccm-page .wrap-breadcrumb {
	width: auto;
    padding:  0px;
    margin: 0px;
	background-color: #EFEFEF;
}
div.ccm-page .breadcrumb-text {
	width: 1100px;
    margin: 0px auto;
    padding: 8px;
    font-size: 12px;
    line-height: 1.1;
    text-align: right;
}
*/




/* xxxxxxxxxxxxxxxxxx  article B contents系  xxxxxxxxxxxxxxxxxx */
div.ccm-page .wrap-conte {
	width: 1100px;
    margin: 0 auto;
    padding: 0;
}
div.ccm-page .wrap-conte-m20 {
	width: 1100px;
    margin: 20px auto;
    padding: 0;
}
div.ccm-page .wrap-conte-m50 {
	width: 1100px;
    margin: 50px auto;
    padding: 0;
}
div.ccm-page .conte-inner {
    width: 100%;
    padding: 0px 20px;
}





/* xxxxxxxxxxxxxxxxxxxxx  title  xxxxxxxxxxxxxxxxxxxxx */

/*文字はh1を使う*/
/*
div.ccm-page .arti-title-A {
    position: relative;
    width: 100%;
    margin: 40px 0;
    background-color: #e6f0f0;
    padding: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
}
div.ccm-page .arti-title-A .circle {
    width: 78px;
    height: 78px;
    border-radius: 39px;
    
}
div.ccm-page .arti-title-A .circle.color-gene {
    background-color: #00a2a0;
}*/

/*文字はh1を使う*//*
div.ccm-page .arti-title-A .title-text-gene {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translateY(-50%) translateX(-50%);
    transform: translateY(-50%) translateX(-50%);
    width: auto;
    text-align: center;
    color: #FFFFFF;  
}*/


/*SVGで縁ありタイトル文字　h1　共通グリーン系　concretCMSでh1を使えない*/
/*
div.ccm-page .svgTitleA-gene text {
    font-weight       : bold;
    font-size         : 32px;
    font-family       : "BIZ UDPGothic", "Meiryo", "Hiragino Kaku Gothic ProN", "Hiragino Sans";
    stroke            : #00a2a0;
    fill              : #ffffff;
    letter-spacing    : 4px;
    text-anchor       : middle;
    dominant-baseline : alphabetic;
}
div.ccm-page .svgTitleA-gene > svg > use:nth-of-type(1) {
    stroke-width      : 17px;
    paint-order       : stroke;
    stroke-linejoin   : round ;
}
div.ccm-page .svgTitleA-gene > svg > use:nth-of-type(2) {
    stroke-width      : 0;
}
*/

/*SVGで縁ありタイトル文字　h1　教育*/
/*
div.ccm-page .svgTitleA-educ text {
    font-weight       : bold;
    font-size         : 32px;
    font-family       : "BIZ UDPGothic", "Meiryo", "Hiragino Kaku Gothic ProN", "Hiragino Sans";
    stroke            : #ec6d81;
    fill              : #ffffff;
    letter-spacing    : 4px;
    text-anchor       : middle;
    dominant-baseline : alphabetic;
}
div.ccm-page .svgTitleA-educ > svg > use:nth-of-type(1) {
    stroke-width      : 17px;
    paint-order       : stroke;
    stroke-linejoin   : round ;
}
div.ccm-page .svgTitleA-educ > svg > use:nth-of-type(2) {
    stroke-width      : 0;
}
*/

/*SVGで縁ありタイトル文字　h1　人材育成*/
/*
div.ccm-page .svgTitleA-jinzai text {
    font-weight       : bold;
    font-size         : 32px;
    font-family       : "BIZ UDPGothic", "Meiryo", "Hiragino Kaku Gothic ProN", "Hiragino Sans";
    stroke            : #f39800;
    fill              : #ffffff;
    letter-spacing    : 4px;
    text-anchor       : middle;
    dominant-baseline : alphabetic;
}
div.ccm-page .svgTitleA-jinzai > svg > use:nth-of-type(1) {
    stroke-width      : 17px;
    paint-order       : stroke;
    stroke-linejoin   : round ;
}
div.ccm-page .svgTitleA-jinzai > svg > use:nth-of-type(2) {
    stroke-width      : 0;
}
*/

/*SVGで縁ありタイトル文字　h1　コンサルティング*/
/*
div.ccm-page .svgTitleA-consul text {
    font-weight       : bold;
    font-size         : 32px;
    font-family       : "BIZ UDPGothic", "Meiryo", "Hiragino Kaku Gothic ProN", "Hiragino Sans";
    stroke            : #0092d8;
    fill              : #ffffff;
    letter-spacing    : 4px;
    text-anchor       : middle;
    dominant-baseline : alphabetic;
}
div.ccm-page .svgTitleA-consul > svg > use:nth-of-type(1) {
    stroke-width      : 17px;
    paint-order       : stroke;
    stroke-linejoin   : round ;
}
div.ccm-page .svgTitleA-consul > svg > use:nth-of-type(2) {
    stroke-width      : 0;
}
*/



div.ccm-page .arti-title-A0-gene {
    width: 100%;
    margin: 0;
    /*background-color: #e6f0f0;*/
    background-color: #ffffff;
    padding: 0px;
    text-align: center;
}
div.ccm-page .arti-title-A0-gene img {
    width: auto;
    height: 96px;
}
div.ccm-page .arti-title-A0-educa {
    position: relative;
    width: 100%;
    margin: 0;
    background-color: #ffffff;
    padding: 0px;
    text-align: center;
}
div.ccm-page .arti-title-A0-educa img {
    width: auto;
    height: 96px;
}
div.ccm-page .arti-title-A0-jinzai {
    position: relative;
    width: 100%;
    margin: 0;
    background-color: #ffffff;
    padding: 0px;
    text-align: center;
}
div.ccm-page .arti-title-A0-jinzai img {
    width: auto;
    height: 96px;
}
div.ccm-page .arti-title-A0-consul {
    position: relative;
    width: 100%;
    margin: 0;
    background-color: #ffffff;
    padding: 0px;
    text-align: center;
}
div.ccm-page .arti-title-A0-consul img {
    width: auto;
    height: 96px;
}

/* ｈ1用のタイトル横に置くサブ（脱XXXX） */
div.ccm-page .arti-title-A0-sub {
    position: absolute;
    width: 200px;
    top: 25px;
    right: 170px;
}
div.ccm-page .arti-title-A0-sub img {
    width: 200px;
    height: auto;
}


/* title上下のスペース */
div.ccm-page .title-A0-up-space {
    width: auto;
    height: 60px;
}
div.ccm-page .title-A0-dwn-space {
    width: auto;
    height: 40px;
}






div.ccm-page .arti-title-B-gene { /*文字はh2を使う*/
    width: 100%;
    margin: 20px 0;
    /*padding: 0px 20px;*/
    color: #00a2a0;
    /*font-size: 1.75rem;*/
   /* line-height: 1.2;*/
    /*font-family: "jun 501";*/
    border-left: solid 10px #00a2a0;
    border-bottom: solid 1px #00a2a0;  
}
div.ccm-page .arti-title-B-educa { /*文字はh2を使う*/
    width: 100%;
    margin: 20px 0;
    /*padding: 0px 20px;*/
    color: #ec6d81;
    /*font-size: 1.375rem;*/
    /*line-height: 1.2;*/
    /*font-family: "jun 501";*/
    border-left: solid 10px #ec6d81;
    border-bottom: solid 1px #ec6d81;  
}
div.ccm-page .arti-title-B-jinzai { /*文字はh2を使う*/
    width: 100%;
    margin: 20px 0;
    /*padding: 0px 20px;*/
    color: #f39800;
    /*font-size: 1.375rem;*/
    /*line-height: 1.2;*/
    /*font-family: "jun 501";*/
    border-left: solid 10px #f39800;
    border-bottom: solid 1px #f39800;  
}
div.ccm-page .arti-title-B-consul { /*文字はh2を使う*/
    width: 100%;
    margin: 20px 0;
    /*padding: 0px 20px;*/
    color: #0092d8;
    /*font-size: 1.375rem;*/
    /*line-height: 1.2;*/
    /*font-family: "jun 501";*/
    border-left: solid 10px #0092d8;
    border-bottom: solid 1px #0092d8;  
}






/* zzzzzzzzzzzzzzz Individual elements used in arti zzzzzzzzzzzzzzzz */

/* xxxxxxxxxxxxxxxx  text box  xxxxxxxxxxxxxxxx */
div.ccm-page .text-box1 {
    display: inline-block;
    background-color: #00a2a0;
    margin: 15px auto;
    padding: 8px 40px;
    text-align: center;
    color: #FFFFFF;
    border-radius: 6px;
    line-height: 1.2;
}

div.ccm-page .text-box2 {
    display: inline-block;
    background-color: #e6f0f0;
    margin: 15px auto;
    padding: 8px 40px;
    text-align: center;
    color: #111111;
    border-radius: 6px;
    line-height: 1.2;
}

div.ccm-page .text-box3 {
    display: inline-block;
    background-color: #ffffff;
    margin: 15px auto;
    padding: 8px 40px;
    text-align: center;
    color: #111111;
    border-radius: 6px;
    line-height: 1.2;
}


/* xxxxxxxxxxxxxxxx  box  xxxxxxxxxxxxxxxx */
div.ccm-page .box-full1 {
    width: 100%;
}

div.ccm-page .flex-box-tate-wrap {
    display: flex;
    flex-direction: column;
}

div.ccm-page .flex-box2 {  /* wrap space-aroud */
    width: 100%;
    margin-top: 5px;
    margin-bottom: 40px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

div.ccm-page .flex-box2-j-c-sbetween {  /* wrap space-between　端そろえ */
    width: 100%;
    margin-top: 5px;
    margin-bottom: 40px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}

div.ccm-page .flex-box2-j-c-center {  /* wrap space-aroud */
    width: 100%;
    margin-top: 5px;
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

div.ccm-page .flex-box3 {  /* wrap space-aroud */
    width: 100%;
    margin-top: 5px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
}

div.ccm-page .flex-box3-sbetween {  /* wrap space-between　端そろえ */
    width: 100%;
    margin-top: 5px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}





/* xxxxxxx Free Box for flex no onmouse xxxxxxx */
div.ccm-page .Fr-box-flexitem-2box-noon {
    width: 370px;
    height: auto;
    margin: 35px 7px;
}
    
div.ccm-page .Fr-box-flexitem-2box-half-noon {
    width: 47%;
    height: auto;
    /*margin: 25px 7px;*/
}

div.ccm-page .Fr-box-flexitem-3box-noon {
    width: 260px;
    height: auto;
    margin: 25px 7px;
    border: solid 1px #999999;
    background-color: #FFFFFF;
    padding: 4px;
}

div.ccm-page .Fr-box-flexitem-3box-noborder-noon {
    width: 300px;
    height: auto;
    margin: 25px 7px;
    /*background-color: #FFFFFF;*/
    padding: 4px;
}



div.ccm-page .border1 {
    border: solid 1px #999999;
}
div.ccm-page .box-text1 {
    width: 100%;
    padding: 10px;
}
div.ccm-page .box-padding1 {
    padding: 10px;
}




/* xxxxxxx Free Box for flex with onmouse xxxxxxx */
div.ccm-page .Fr-box-flexitem-2box {
    width: 370px;
    height: auto;
    margin: 25px 7px;
}
    
div.ccm-page .Fr-box-flexitem-2box-half {
    width: 47%;
    height: auto;
    margin: 25px 7px;
}

div.ccm-page .Fr-box-flexitem-3box {
    width: 260px;
    height: auto;
    margin: 25px 7px;
    border: solid 1px #999999;
    background-color: #FFFFFF;
    padding: 4px;
}


div.ccm-page .Fr-box-flexitem-2box a {
	text-decoration: none;
}
div.ccm-page .Fr-box-flexitem-2box:hover {
	background-color: #F9E3E3;
    cursor: pointer;
}

div.ccm-page .Fr-box-flexitem-2box-half a {
	text-decoration: none;
}
div.ccm-page .Fr-box-flexitem-2box-half:hover {
	background-color: #F9E3E3;
    cursor: pointer;
}

div.ccm-page .Fr-box-flexitem-3box a {
	text-decoration: none;
}
div.ccm-page .Fr-box-flexitem-3box:hover {
	background-color: #F9E3E3;
    cursor: pointer;
}





/* xxxxxxx for flow （ご利用について等） xxxxxxx */
div.ccm-page .flow-item-wap {
    width: 100%;
    border: solid 1px #63b6d1;
    background-color: #FFFFFF;
    border-radius: 12px;
    display: flex;
}

div.ccm-page .flow-item-head {
    width: 380px;
    background-color: #63b6d1;
    text-align: center;
    color: #FFFFFF;
    padding: 25px;
    border-radius: 12px;
}

div.ccm-page .flow-item-body {
    width: auto;
    padding: 0px 30px;
    display: flex;
  align-items: center;
}

div.ccm-page .flow-arrow {
    width: 380px;
    text-align: center;
    line-height: 1.1;
    padding: 5px;
    color: #63b6d1;
    transform: scale(1, 0.6);
}




/* xxxxxxx for jigyo （事業ページ上部イラスト配置等） xxxxxxx */
/* flexのコンテナは、2ボックスのものを使う */
div.ccm-page .jigyo-box-text {
    width: 38%;
}
div.ccm-page .jigyo-box-img {
    width: 58%;
}




/* xxxxxxx objects in a list (flex) 2objects xxxxxxx */
.obje-list1 {
    margin: 30px 0;
}
.obje-list1 ul {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    list-style: none;
}
.obje-list1 ul li {
    width: 40%;
    padding: 0;
    text-align: center;
    margin: 20px;
}
.obje-list1 ul li img {
    width: 100%;
}






/* xxxxxxx color box xxxxxxx */
div.ccm-page .Fr-box-color-red1 {
    background-color: #DA2500;
    text-align: center;
    color: #FFFFFF;
    font-weight: bold;
    padding: 5px;
}
div.ccm-page .Fr-box-color-bule1 {
    background-color: #0022DA;
    text-align: center;
    color: #FFFFFF;
    font-weight: bold;
    padding: 5px;
}

div.ccm-page .Fr-box-border-color-green1 {
    border: solid 1px #1EAA39;
    padding: 20px;
}




/* XXXXXXXXXXXXXXXXXXXXXXXX  footer  XXXXXXXXXXXXXXXXXXXXXXXX */
div.ccm-page footer {
	width: auto;
	margin: 0;
	padding: 0;
}

div.ccm-page .wrap-foot { /* フッターのラップ */
	width: auto;
	/*background-color: #F2F7E5;*/
    background-color: #f4f4ee;
	padding: 30px 0px;
    margin: 0px;
}
div.ccm-page .wrap-foot-inner {
    width: 1100px;
    padding: 0px;
    margin: 0 auto;
}
div.ccm-page .wrap-foot-nav-and {
    width: 100%;
    padding: 0px;
    display: flex;
    justify-content: space-between;
}
div.ccm-page .foot-logo {
    width: 150px;
}
div.ccm-page .foot-mark {
    width: 150px;
}
div.ccm-page .foot-mark-img {
    width: 85px;
    margin: 0 0 0 auto;
}



div.ccm-page .wrap-foot-nav { /* フッターのナビ */
    width: 600px;
}
div.ccm-page .wrap-foot-nav ul {
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}
div.ccm-page .wrap-foot-nav ul li {
    text-align: center;
    list-style: none;
    font-size: 0.9rem;
}
div.ccm-page .wrap-foot-nav ul li a {
    display: block;
    margin: 5px;
    padding: 10px 15px;
    text-decoration: none;
    color: #9C9C9C;
}
div.ccm-page .wrap-foot-nav ul li a:hover {
    background-color: #BDBD99;
    color: #FFFFFF;
}


div.ccm-page .wrap-foot-text {
    width: auto;
    margin-top: 30px;
    text-align: center;
    font-size: 0.8rem;
}





/* XXXXXXXXXXXXXXXXXXXXXXXX  float clear  XXXXXXXXXXXXXXXXXXXXXXXX */
div.ccm-page .clearBo {
	clear: both;
}
div.ccm-page .clearR {
	clear: right;
}
div.ccm-page .clearL {
	clear: left;
}
	
	
	
	
/* XXXXXXXXXXXXXXXXXXXXXXXX  etc  XXXXXXXXXXXXXXXXXXXXXXXX */




/* 「別ウインドウへのリンク」にFontAwesomeアイコンを自動で入れる */
div.ccm-page a[target="_blank"]::after{
  font-family: "Font Awesome 5 Free"; /* ver5用 */
  /*font-family: "FontAwesome";*/ /* ver4用 */
  content: '\f35d';
  font-size: 1em;
  font-weight: 900;
  margin: 0 3px;
}



/* 一般ボタン */
div.ccm-page .general-btn1 {
	text-align: center;
	font-size: 1rem;
	/*font-weight: bold;*/ 
}
div.ccm-page .general-btn1 a {
    display: inline-block;
    color: #0071BC;
    padding: 1px 40px;
    border: solid 1px #0071BC;
	border-radius: 4px;
	text-decoration: none;
    background-color: #FFFFFF;
}
div.ccm-page .general-btn1 a:hover {
	text-decoration: none;
	color: #FFFFFF;
	background-color: #0071BC;
}

div.ccm-page .general-btn1-left {
	/*text-align: center;*/
	font-size: 1rem;
	/*font-weight: bold;*/ 
}
div.ccm-page .general-btn1-left a {
	display: inline-block;
	color: #0071BC;
	padding: 1px 40px;
	border: solid 1px #0071BC;
	border-radius: 4px;
	text-decoration: none;
	background-color: #FFFFFF;
}
div.ccm-page .general-btn1-left a:hover {
	text-decoration: none;
	color: #FFFFFF;
	background-color: #0071BC;
}


div.ccm-page .general-btn1-long {
	text-align: center;
	font-size: 1rem;
    width: 90%;
    margin: 10px 0 30px 0;
	/*font-weight: bold;*/  
}
div.ccm-page .general-btn1-long a {
    display: block;
    color: #0071BC;
    padding: 5px;
    border: solid 1px #0071BC;
	border-radius: 4px;
	text-decoration: none;
    background-color: #FFFFFF;
    margin: 0;
}
div.ccm-page .general-btn1-long a:hover {
	text-decoration: none;
	color: #FFFFFF;
	background-color: #0071BC;
}



div.ccm-page .general-btn2 { /*G-menuと同じ色*/
    text-align: center;
    font-size: 1rem;
	/*font-weight: bold;*/
}
div.ccm-page .general-btn2 a {
    display: inline-block;
    color: #5e9676;
    padding: 1px 40px;
    border: 1px solid #5e9676;
    border-radius: 4px;
	text-decoration: none;
    background-color: #FFFFFF;
}
div.ccm-page .general-btn2 a:hover {
	text-decoration: none;
	color: #FFFFFF;
	background-color: #5e9676;
}



/* エラー404 */
div.ccm-page .err404 {
    width: 80%;
    margin: 0 auto;
    text-align: center;
}
div.ccm-page .err404img {
    width: 40%;
    margin: 0 auto;
}



/* 天地スペース */
div.ccm-page .space20 {
	width: auto;
	height: 20px;
}
div.ccm-page .space40 {
	width: auto;
	height: 40px;
}
div.ccm-page .space60 {
	width: auto;
	height: 60px;
}
div.ccm-page .space80 {
	width: auto;
	height: 80px;
}
div.ccm-page .space100 {
	width: auto;
	height: 100px;
}
div.ccm-page .space120 {
	width: auto;
	height: 120px;
}





/* google map embed用 */
div.ccm-page .ggmap {
	position: relative;
	padding: 0 0 56%;
	height: 0;
	overflow: hidden;
    width: 80%;
    margin: 20px auto 40px auto;
}
div.ccm-page .ggmap iframe {
	position: absolute;
	top: 0;
	left: 0;
	width: 100% !important;
	height: 100% !important;
}



/* jQueryでフワッと表示（下からフェードイン） */

.inview {
    /* ●px下げる */
    transform: translateY(80px);
    /* 要素を透明にする */
    opacity: 0;
    /* ●秒かけて、変化させる */
    transition: transform 1s, opacity 1s;
  }
  
  .inview.show {
    transform: translateY(0);
    opacity: 1;
  }








/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXX  RESPONSIVE 1  XXXXXXXXXXXXXXXXXXXXXXXXX */
/* xxxxxxxxxxxxxxxxxxxxx  for PC or big tablet  xxxxxxxxxxxxxxxxxxxxx */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

@media only screen and (max-width: 1100px){
	

    /* XXXXXXXXXXXXXXXXXXXXXXXX  header  XXXXXXXXXXXXXXXXXXXXXXXX */

    /* xxxxxxxxxxxx  header 1  xxxxxxxxxxxx */
    
    div.ccm-page .wrap-head-inner {
        height: 85px;
    }

    div.ccm-page .head-logo {
        width: 190px;
        
    }
    

    
    
    
    /* head-menu */
    div.ccm-page .head-menu {
        visibility: visible;
    }
    

    

    
    
    
    /* XXXXXXXXXXXXXXXXXXXXXXXX  video  XXXXXXXXXXXXXXXXXXXXXXXX */

    div.ccm-page .video1 {
        width: 100%;
    }
    

    
    div.ccm-page .wrap-head-inner {
        width: 100%;
        height: 85px
    }


    /* xxxxxxxxxxxx  global menu mobile  xxxxxxxxxxxx */
	div.ccm-page .wrap-head-nav { /* グローバルメニューバックのラッパー */
        width: 100%;
        height: auto;
        margin: 0 auto;
        padding: 0;
        display: none;
    }
    
    div.ccm-page .wrap-head-nav-inner {
    width: 100%;
        height: auto;
        
}
    
    div.ccm-page .wrap-head-nav ul {
        display: flex;
        flex-wrap: wrap;
      
}
   div.ccm-page .wrap-head-nav-inner ul li {
    
    width: 145px;
       margin: 3px;
    border: 1px solid #C3C3C3;
       border-radius: 3px;

}
div.ccm-page .wrap-head-nav-inner ul li+ li {
    border-left: 1px solid #C3C3C3;
    border-right: 1px solid #C3C3C3;
}
div.ccm-page .wrap-head-nav-inner ul li a {

    padding: 2px 5px;
}
 
    
    
    
    
    
    /* XXXXXXXXXXXXXXXXXXXXXXXX  article  XXXXXXXXXXXXXXXXXXXXXXXX */

    /* パンくずリスト */
    /*div.ccm-page .breadcrumb-text {
        width: 100%;
    }*/
    
    
    
    /* xxxxxxxxxxxxxxxxxx  article B contents系  xxxxxxxxxxxxxxxxxx */
    div.ccm-page .wrap-conte {
        width: 100%;
        margin: 0px auto;
        padding: 40px 10px;
    }
    /*div.ccm-page .wrap-conte-m20 {
        width: 100%;
        margin: 0 auto;
        padding: 0px 10px;
    }*/
    /*div.ccm-page .wrap-conte-m50 {
        width: 100%;
        margin: 0 auto;
        padding: 0px 10px;
    }*/
    div.ccm-page .conte-inner {

        padding: 0px 10px;
    }


    
    
      /* xxxxxxxxxxxxxxxxxxxxx  title  xxxxxxxxxxxxxxxxxxxxx */
    
    /* ｈ1用のタイトル */
    div.ccm-page .arti-title-A0-educa {

        height: 140px;

    }
    
    div.ccm-page .arti-title-A0-jinzai {
        
        height: 140px;
    }
    
    div.ccm-page .arti-title-A0-consul {
        
        height: 140px;
    }
    
    /* ｈ1用のタイトル横に置くサブ（脱XXXX） */
    div.ccm-page .arti-title-A0-sub {

        top: 80%;
        left: 50%;
        transform: translate(-50%, -50%);
    }  
    

  
    
    /* XXXXXXXXXXXXXXXXXXXXXXXX  footer  XXXXXXXXXXXXXXXXXXXXXXXX */
    
    div.ccm-page .wrap-foot-inner {
        width: 100%;
        padding: 0 20px;
    }
    
    div.ccm-page .wrap-foot-nav-and {
        display: flex;
        flex-wrap: wrap;
        flex-direction: column;
        justify-content: center;
        align-content: center;
        align-items: center;
    }
    div.ccm-page .wrap-foot-nav {
        width: 100%;
        margin: 25px 0;
    }

    div.ccm-page .foot-mark-img {
    margin: 0 auto;
}
	
    
    
	
}







/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXX  RESPONSIVE 2  XXXXXXXXXXXXXXXXXXXXXXXXX */
/* xxxxxxxxxxxx  for small tablet and middle smartphone 1  xxxxxxxxxx */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

@media only screen and (max-width: 900px){
    .img-pc {
        display: none;
    }
    .img-mb {
        display: block;
    }




}







/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXX  RESPONSIVE 3  XXXXXXXXXXXXXXXXXXXXXXXXX */
/* xxxxxxxxxxxx  for small tablet and middle smartphone 2 xxxxxxxxxxxx */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

@media only screen and (max-width: 768px){
 
    
    /* XXXXXXXXXXXXXXXXXXXXXXXX  header  XXXXXXXXXXXXXXXXXXXXXXXX */
    
    /* xxxxxxxxxxxx  header 1  xxxxxxxxxxxx */
    div.ccm-page .wrap-head-inner {
        height: 75px;
    }
    div.ccm-page .head-logo {
        width: 160px;
    }
   
    
   
    
    /* xxxxxxxxxxxxxxxxxxxxx  title  xxxxxxxxxxxxxxxxxxxxx */

    /* title上下のスペース */
    div.ccm-page .title-A0-up-space {
        height: 30px;
    }
    div.ccm-page .title-A0-dwn-space {
        height: 10px;
    }
    
    
    
    
    /* zzzzzzzzzzzzzzz Individual elements used in arti zzzzzzzzzzzzzzzz */
    /* エラー404 */
    div.ccm-page .err404 {
        width: 100%;
    }
    div.ccm-page .err404img {
        width: 70%;
    }

    
    
   /* xxxxxxx Free Box for flex no onmouse xxxxxxx */
    div.ccm-page .Fr-box-flexitem-2box-noon {
        width: 47%;
    }
    
    div.ccm-page .Fr-box-flexitem-2box-half-noon {
        width: 100%;
    }

    div.ccm-page .Fr-box-flexitem-3box-noon {
        width: 47%;
    } 

    div.ccm-page .Fr-box-flexitem-3box-noborder-noon {
        width: 47%;
    }
    
    
    
    
    /* xxxxxxx Free Box for flex with onmouse xxxxxxx */
    /*.Fr-box-flexitem-2box {
        width: 47%;
    }*/
    
    div.ccm-page .Fr-box-flexitem-2box-half {
        width: 100%;
    }

    /*.Fr-box-flexitem-3boxn {
        width: 47%;
    } */

  
    
    
    
    
    /* xxxxxxx for flow （ご利用について等） xxxxxxx */
    div.ccm-page .flow-item-wap {
        width: 90%;
        margin: 0 auto;
        display: flex;
        flex-flow: column;
    }
    div.ccm-page .flow-item-head {
        width: auto;
        background-color: #63b6d1;
        text-align: center;
        color: #FFFFFF;
        padding: 20px 10px;
        border-radius: 12px;
    }

    div.ccm-page .flow-item-body {
        width: auto;
        padding: 20px 30px;

    }

    div.ccm-page .flow-arrow {
        width: auto;
    
    }
    
    
    
    
    /* xxxxxxx for jigyo （事業ページ上部イラスト配置等） xxxxxxx */
/* flexのコンテナは、2ボックスのものを使う */
div.ccm-page .jigyo-box-text {
    width: 100%;
}
div.ccm-page .jigyo-box-img {
    width: 100%;
    margin: 30px 0;
}

    
    
    
    

    /* xxxxxxx objects in a list (flex) 2objects xxxxxxx */


    .obje-list1 ul li {
        width: 80%;
    }
    
    


    /* XXXXXXXXXXXXXXXXXXXXXXXX  etc  XXXXXXXXXXXXXXXXXXXXXXXX */
    /* 一般ボタン */
    div.ccm-page .general-btn1-long {

        width: 100%
 
}
    
	
}








/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXX  RESPONSIVE 4  XXXXXXXXXXXXXXXXXXXXXXXXX */
/* xxxxxxxxxxxxxxxxxxxxx  for small smartphone  xxxxxxxxxxxxxxxxxxxxx */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

@media only screen and (max-width: 600px){
	

    /* XXXXXXXXXXXXXXXXXXXXXXXX  header  XXXXXXXXXXXXXXXXXXXXXXXX */

    /* xxxxxxxxxxxx  header 1  xxxxxxxxxxxx */



	
}





/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXX  RESPONSIVE 5  XXXXXXXXXXXXXXXXXXXXXXXXX */
/* xxxxxxxxxxxxxxxxxxxxx  for small smartphone 2  xxxxxxxxxxxxxxxxxxxxx */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

@media only screen and (max-width: 500px){
	
    /* xxxxxxxxxxxx  article B wrap and big title  xxxxxxxxxxxx */

    
    
	/* xxxxxxxxxxxxxxxx  box  xxxxxxxxxxxxxxxx */
    
    /* xxxxxxx Free Box for flex no onmouse xxxxxxx */
    div.ccm-page .Fr-box-flexitem-2box-noon {
        width: 100%;
    }
    div.ccm-page .Fr-box-flexitem-2box-half-noon {
        width: 100%;
    }  
    div.ccm-page .Fr-box-flexitem-3box-noon {
        width: 100%;
    }
    div.ccm-page .Fr-box-flexitem-3box-noborder-noon {
        width: 100%;
    }
    
    
    /* xxxxxxx Free Box for flex with onmouse xxxxxxx */
	
    div.ccm-page .Fr-box-flexitem-2box {
        width: 100%;
    }
    div.ccm-page .Fr-box-flexitem-2box-half {
        width: 100%;
    }  
    div.ccm-page .Fr-box-flexitem-3box {
        width: 100%;
    }
    
    
}





/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */
/* XXXXXXXXXXXXXXXXXXXXXXXXX  RESPONSIVE 6  XXXXXXXXXXXXXXXXXXXXXXXXX */
/* xxxxxxxxxxxxxxxxxxxxx  for small smartphone 3  xxxxxxxxxxxxxxxxxxxxx */
/* XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX */

@media only screen and (max-width: 400px){
	
    /* xxxxxxxxxxxx  article B wrap and big title  xxxxxxxxxxxx */
    

    
	
	
}