.ccm-page ul.globalnav > * {
  margin: 0;
  padding: 0;
  list-style: none;
  box-sizing: border-box;
}

.ccm-page ul.globalnav { padding: 0; width: 100%; }
.ccm-page ul.globalnav > li { width: 100%; }
.ccm-page ul.globalnav ul{ padding: 0; }
.ccm-page ul.globalnav > li > a {
  display: block;
  width: 100%;
  padding: 10px 0;
  border-bottom: 1px solid #ccc;
  background-color: #fff;
  color: #000;
  text-align: center;
  text-decoration: none;
}
.ccm-page ul.globalnav > li:first-child > a{border-top: 1px solid #ccc;}
.ccm-page ul.globalnav > li > ul { margin: 0; padding: 0; display: none; }
.ccm-page ul.globalnav > li li{ margin: 0; padding: 0; list-style: none; }
.ccm-page ul.globalnav > li li > a {
  display: block;
  width: 100%;
  padding: 10px 5%;
  border-bottom: 1px solid #3b7ca4;
  background-color: #155c87;
  color: #fff;
}

.ccm-page .toggle:hover{ cursor: pointer; }
.ccm-page .toggle::after{
  content : '▼';
  color : #fff;
}

@media screen and (min-width: 700px) {
  .ccm-page ul.globalnav {
    width: 960px;
    margin: 0;
    padding: 0;
    font-size: 0;
  }
  .ccm-page ul.globalnav > li {
    display: inline-block;
    width: calc(100% / 5);
    font-size: 1.5rem;
    vertical-align: top;
  }
  .ccm-page ul.globalnav > li > a {
    border: none;
    border-left: 1px solid #ccc;
  }
  .ccm-page ul.globalnav > li:first-child > a {
    border-top: none;
    border-left: none;
  }
}



.ccm-page nav.global-nav ul{ margin-bottom: 0;  list-style: none;  display: flex;  justify-content: center;}
.ccm-page nav.global-nav ul ul{  display: block; }

.ccm-page nav.global-nav ul li{  position: relative; }

.ccm-page nav.global-nav ul li a{  display: block; text-decoration: none; padding:20px 30px; transition:all .3s;}
.ccm-page nav.global-nav ul li li a{ padding:10px 20px; }
.ccm-page nav.global-nav ul li.has-child::after{  content:'';  position: absolute;  right:15px; top:25px; width:6px; height:6px;  border-top: 2px solid #999; border-right:2px solid #999; transform: rotate(135deg);}
.ccm-page nav.global-nav ul ul li.has-child::before{  content:'';  position: absolute;  left:6px;  top:17px;  width:6px;  height:6px;    border-top: 2px solid #fff;    border-right:2px solid #fff;    transform: rotate(45deg);}
.ccm-page nav.global-nav li.has-child ul{  padding-left: 0; position: absolute; left:0; top:60px;  z-index: 4;  background:#3d6c99;  width:200px;  visibility: hidden;  opacity: 0;  transition: all .3s;}

.ccm-page nav.global-nav li.has-child:hover > ul,
.ccm-page nav.global-nav li.has-child ul li:hover > ul,
.ccm-page nav.global-nav li.has-child:active > ul,
.ccm-page nav.global-nav li.has-child ul li:active > ul{  visibility: visible;  opacity: 1;}
.ccm-page nav.global-nav li.has-child ul li a{  color: #fff;  border-bottom:solid 1px rgba(255,255,255,0.6);}
.ccm-page nav.global-nav li.has-child ul li:last-child a{ border-bottom:none; }
.ccm-page nav.global-nav li.has-child ul li a:hover,nav.global-nav li.has-child ul li a:active{ background:#335b80; }
.ccm-page nav.global-nav li.has-child ul ul{ top:0; left:182px; background:#66ADF5; }
.ccm-page nav.global-nav li.has-child ul ul li a:hover,nav.global-nav li.has-child ul ul li a:active{ background:#448ED3; }

.ccm-page #menu-btn-check { display: none; }

@media screen and (max-width:889px){
  .ccm-page nav.global-nav{ margin-top: 0; padding: 0;}
  .ccm-page nav.global-nav ul{ display: block; }
  .ccm-page nav.global-nav ul li{ text-align: center; background-position: 38% 10px !important;  }
  .ccm-page nav.global-nav li.has-child ul,nav.global-nav li.has-child ul ul{ position: relative; left:0; top:0; width:100%; visibility:visible; opacity:1; display: none; transition:none; }
  .ccm-page nav.global-nav ul li a{ padding: 16px 0;  border-bottom:1px solid #ccc; }
  .ccm-page nav.global-nav ul li.has-child::before{ left:20px; }
  .ccm-page nav.global-nav ul ul li.has-child::before{ transform: rotate(135deg); left:20px; } 
  .ccm-page nav.global-nav ul li.has-child.active::before{ transform: rotate(-45deg); }


  .ccm-page .menu-btn { position: fixed; top: 40px; right: 10px; display: flex; height: 56px; width: 56px; justify-content: center; align-items: center; z-index: 2000; background-color: #145B9B; }
  .ccm-page .menu-btn span,.ccm-page .menu-btn span:before,.ccm-page .menu-btn span:after {    content: '';    display: block;    height: 3px;    width: 25px;    border-radius: 3px;    background-color: #ffffff;    position: absolute;}
  .ccm-page .menu-btn span:before { bottom: 8px;}
  .ccm-page .menu-btn span:after { top: 8px;}

  .ccm-page #menu-btn-check:checked ~ .menu-btn span {  background-color: rgba(255, 255, 255, 0);}
  .ccm-page #menu-btn-check:checked ~ .menu-btn span::before { bottom: 0; transform: rotate(45deg);}
  .ccm-page #menu-btn-check:checked ~ .menu-btn span::after { top: 0; transform: rotate(-45deg);}
  .ccm-page .menu-content { width: 100%; height: 100%; position: fixed; top: 0; left: 100%; z-index: 1500; transition: all 0.5s; background:#ffffff  }

  .ccm-page #menu-btn-check:checked ~ .menu-content { left: 0;/*メニューを画面内へ*/ }
}

.ccm-page nav.global-nav ul li a:hover{background: rgba(255,255,255,0.3);}
.ccm-page nav.global-nav ul li small{ display: block; color: #81b38b; }


@media screen and (min-width:890px) and (max-width:1020px){ 
  .ccm-page nav.global-nav{ margin-top: 0; }
  .ccm-page nav.global-nav ul li a{ padding: 40px 40px 10px; }
  .ccm-page nav.global-nav ul li a small{ display: none; }
}

@media screen and (min-width:890px){
  .ccm-page .menu-btn{ display: none; }
}




/*================================
  @media
==================================*/
@media screen and (max-width: 767px){ 
  .ccm-page nav.navbar{ padding-top: 150px; }
  .ccm-page button.navbar-toggler{ position: absolute; top:20px; right: 10px; z-index: 10000; }
}

@media screen and (min-width:992px){
  .ccm-page nav.navbar ul.navbar-nav{ width: 100%; }
  .ccm-page nav.navbar ul.navbar-nav li{ width: 16.7%; }
}

@media (min-width: 1200px){
  .ccm-page .container, .ccm-page .container-lg, .ccm-page .container-md, .ccm-page .container-sm, .ccm-page .container-xl { max-width: 1140px; }
}