@charset "UTF-8";

header{
  z-index: 999;
}


header.container{
    padding: 0;
    margin: 0;
  }
 .site-header{
    background: rgba(255,255,255,1);
    padding: 0;
    position: fixed;
    justify-content: space-between;
    transition: .5s;
    width: 100%;
    border-bottom:  1px solid #e5e5e5;
       height: 60px ;
  }

.hero{
  height: 400px;
  overflow: hidden;
  width: 100%;
  background: url(/img/main_img01_sp.jpg) center center no-repeat;
  background-position: center;
  background-size: cover;
}

.logo {
  z-index: 9999;
  float: left;
  font-weight: normal;
  padding: 0;
  margin: 0;
  font-size: 1em;
}
.logo img{
  width: 150px ;
  transition: .5s;
    padding-top: 10px;
}


#toggle {
  display: inline-block;
  background: #203749;
  color: #fff;
  text-align: center;
  width: 40px;
  height: 40px;
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 100;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
}
#toggle:hover{
	background: #619DB9;
	transition: .5s;
	cursor: pointer;
}

.trigger,
.trigger span {
  display: inline-block;
  -webkit-transition: all .4s;
          transition: all .4s;
}
.trigger {
  position: relative;
  width: 20px;
  height: 19px;
}

.trigger span {
  position: absolute;
  left: 0;
  width: 100%;
  height: 3px;
  background-color: #FFF;
  border-radius: 4px;
}
.trigger span:nth-of-type(1) {
  top: 0;
}
.trigger span:nth-of-type(2) {
  top: 8px;
}
.trigger span:nth-of-type(2)::after {
  position: absolute;
  top: 0;
  left: 0;
  content: '';
  width: 100%;
  height: 3px;
  background-color: #fff;
}
.trigger span:nth-of-type(3) {
  bottom: 0;
}
.trigger.active span:nth-of-type(1) {
  -webkit-transform: translateY(8px) scale(0);
          transform: translateY(8px) scale(0);
}
.trigger.active span:nth-of-type(2) {
  -webkit-transform: rotate(-45deg);
          transform: rotate(-45deg);
}
.trigger.active span:nth-of-type(2)::after {
  -webkit-transform: rotate(90deg);
          transform: rotate(90deg);
}
.trigger.active span:nth-of-type(3) {
  -webkit-transform: translateY(-8px) scale(0);
          transform: translateY(-8px) scale(0);
}

.toggleWrap {
  background: rgba(97,157,185,1.0);
  padding: 50px 15px 10px 15px;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}
.mainNav li {
  list-style-type: none;
	border-bottom: 1px dotted #A5C2CF;
}
.mainNav li a{
  display: block;
  text-decoration: none;
  padding: 15px;
  text-align: left;
	font-family: "dnp-shuei-mgothic-std",sans-serif;
  color: #fff;
	font-size: 16px ;
}
.mainNav li:nth-child(1) a:before{
  position:relative;
    top:2px;
	content: "\f36f";
	font-family: ionicons;
	padding-right: 8px;
  font-size: 20px;
}
.mainNav li:nth-child(2) a:before{
    position:relative;
    top:2px;
	content: "\f47e";
	font-family: ionicons;
	padding-right: 8px;
  font-size: 20px;
}
.mainNav li:nth-child(3) a:before{
    position:relative;
    top:2px;
	content: "\f2a2";
	font-family: ionicons;
	padding-right: 8px;
  font-size: 20px;
}
.mainNav li:nth-child(4) a:before{
    position:relative;
    top:2px;
	content: "\f26d";
	font-family: ionicons;
	padding-right: 8px;
  font-size: 20px;
}
.mainNav li:nth-child(5) a:before,
.mainNav li:nth-child(6) a:before,
.mainNav li:nth-child(7) a:before,
.mainNav li:nth-child(8) a:before{
    position:relative;
    top:2px;
	content: "\f3d1";
	font-family: ionicons;
	padding-right: 8px;
   font-size: 20px;
}

.webbilling{
  display: block;
  position: fixed;
  bottom:0 ;
  right: 0;
}

.webbilling a{
  text-decoration: none;
    background: #E54B1E;
  padding: 1em ;
  color: #fff;
  width: 100%;
  border-radius: 0 ;
}

.webbilling a:hover{
    background: #A12224;
}

  .webbilling a:before{
    position:relative;
    top:2px;
	content: "\f2dd";
	font-family: ionicons;
	padding-right: 8px;
  font-size: 20px;
}

.mainNav li a:hover,.mainNav li a:active{
  color: #203749;
  text-decoration: none;
}

.toggleWrap .mainNav li a br{
	display: none;
}

.mainNav li a br{
	display: none;
}

.hide {
  opacity: 0;
  visibility: hidden;
  overflow: hidden;
}
.animation {
  -webkit-transition-property: opacity, visibility;
  transition-property: opacity, visibility;
  -webkit-transition-duration: .3s;
          transition-duration: .3s;
  -webkit-transition-timing-function: ease-in;
          transition-timing-function: ease-in;
}
.no-scroll {
  overflow: hidden;
}

/**************
member
***************/

.m_logo {
  float: left;
  font-weight: normal;
  padding: 5px;
  margin: 0;
  font-size: 1em;
}
.m_logo img{
  width: 100px ;
  transition: .5s;
}
.sns-icon{
	display:none;
}


@media screen and (min-width: 768px) {
.hero{
  height: 700px;
  overflow: hidden;
  width: 100%;
  background: url(/img/main_img01_pc.jpg) center center no-repeat;
  background-position: center;
  background-size: cover;
}


  
}

@media screen and (min-width: 1001px) {

    .webbilling{
  position: fixed;
  top:100px ;
  right: 0;
  border-radius: 8px 0 0 8px ;
}
header.container{
    padding: 0;
    margin: 0;
  }

  .logo img{
  width: 180px ;
  transition: .5s;
  padding-top: 0;
}
  .site-header{
    background: rgba(255,255,255,1);
    padding:1em 0em ;
    position: fixed;
    justify-content: space-between;
    transition: .5s;
    width: 100%;
    height: auto;
		border-bottom:  1px solid #e5e5e5;
}
  #toggle {
    display: none;
  }
  .toggleWrap {
    float: right;
    background: none;
    height: auto;
    position: static;
    padding: 0;
    margin-top: 5px;
    width: calc(100% - 230px);
  }
  .mainNav {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: justify;
    -webkit-justify-content: space-between;
    -ms-flex-pack: justify;
    justify-content: space-between;
    margin: 0 auto;
  }
	.mainNav li {
		border: none;
	}
  .mainNav li a {
    padding: 5px 0px;
    margin: 0 15px;
    font-size: 1em;
		font-size: 16px ;
		color: #777;
		font-family: "dnp-shuei-mgothic-std",sans-serif;
  }
  .mainNav li a:hover {
    color:#24609F;
  }
  .animation {
  -webkit-transition: none;
          transition: none;
  }
  .hide {
    opacity: 1;
    visibility: visible;
  }

  .site-header.head-fixed{
    background: rgba(255,255,255,1);
    padding:0.5em 0em ;
    border-bottom: 1px solid #eee;
}

 .site-header.head-fixed .logo img{
   width: 180px ;
  }
  .site-header.head-fixed .toggleWrap {
    margin-top: 5px;
  }

  .site-header.head-fixed .mainNav li a {
    padding: 5px 0px;
    margin: 0 15px;
		font-size: 14px ;
  }
	.site-header.head-fixed.sns-icon{
			display: none;
	}
  

	  /*  sns-icon
/*--------------------------------- */
.sns-icon{
  display: block;
  margin: 0;
  padding: 5px 0;
}

.sns-icon ul{
	text-align:right;
}

.sns-icon li{
	display:inline-block;
  zoom:1 ;
	padding-left: 15px;
	font-size:0.9em ;
cursor: pointer;
}

.sns-icon li a{
	text-decoration: none;
	}


.sns-icon li:before{
	content: "\f3d1";
	font-family: ionicons;
	padding-right: 8px;
}


.sns-icon i{
	display:none;
}

.sns-icon li a:hover{
	color: #619DB9;
}


  .mainNav>li.nav_show{
	display:none;
}


  /**************
  member
  ***************/

  .m_logo {
    float: left;
    font-weight: normal;
    padding: 0;
    margin: 0;
    font-size: 1em;
  }
  .m_logo img{
    padding: 0px;
    width: 120px ;
    transition: .5s;
  }
}

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

.mainNav li a br{
	display: block;
}