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

html{-webkit-text-size-adjust: none; height:100%; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box;}

body{font-family:"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif; font-size:14px; line-height:1.5; margin:0; background-size: 100%;}

body, input, button{-moz-osx-font-smoothing:grayscale; -webkit-font-smoothing:antialiased;}

*, *:before, *:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
  }

.clearfix:after { content: "."; display: block; height: 0; clear: both; visibility: hidden; }
img{vertical-align: middle; image-rendering: -webkit-optimize-contrast;}

a{text-decoration: none; color: #000;}

.warpper{max-width:1000px; margin: 0 auto; padding:0 10px;}
main{ margin: auto;}

/* -------- font -------- */
@font-face {
  font-family: 'M2c-medium';
  src: url('../fonts/mplus-2c-medium.eot');
  src: url('../fonts/mplus-2c-medium.eot?#iefix') format('embedded-opentype'),
      url('../fonts/mplus-2c-medium.woff2') format('woff2'),
      url('../fonts/mplus-2c-medium.woff') format('woff'),
      url('../fonts/mplus-2c-medium.ttf') format('truetype'),
      url('../fonts/mplus-2c-medium.svg#mplus-2c-medium') format('svg');
  font-weight: 500;
  font-style: normal;
}

/* -------- header -------- */
.warpper-menu{ max-width: 1024px; display: flex; flex-wrap: wrap; margin: auto; padding: 23px 0 10px; align-items: center;}
.warpper-menu .logo{ width: 280px;}
.warpper-menu .logo h1{     font-size: 9px;
    white-space: nowrap;
    position: absolute;
    z-index: 9999;
    top: 3px;
	font-weight:normal;
}
.warpper-menu .logo img{ width: 100%;}
.warpper-menu .logo img:hover{ opacity: 0.8;}
.warpper-menu .menu-web{ width: 744px; padding-left: 25px;}
.warpper-menu .menu-web ul.mobile-sub.wsmenu-list li a span{ display: block;}
/* .warpper-menu .menu-web ul.mobile-sub.wsmenu-list li:first-child a span{ border-left: 1px solid #ccc;} */
/* Underline From Left */
.wsmenu-list > li > a {
  display: inline-block;
  vertical-align: middle;
  -webkit-transform: perspective(1px) translateZ(0);
  transform: perspective(1px) translateZ(0);
  box-shadow: 0 0 1px transparent;
  position: relative;
  overflow: hidden;
}
.wsmenu-list > li > a:before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 100%;
  bottom: 0;
  border-bottom: 4px solid #2d3170;
  -webkit-transition-property: right;
  transition-property: right;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  -webkit-transition-timing-function: ease-out;
  transition-timing-function: ease-out;
}
.wsmenu-list > li > a:hover:before, .wsmenu-list > li > a:focus:before, .wsmenu-list > li > a:active:before {
  right: 0;
}


/* -------- breadcrumb -------- */
.warpper-line-blue{ background: url(../images/pattern-line.png); padding: 22px 0;}
.warpper-line-blue .head-title{ position: relative; padding: 12px 0; background: #fff; margin: 18px auto;}
.warpper-line-blue .head-title .line-top{ background:url(../images/curve-top.png); height: 12px; width: 100%; position: absolute; top: -12px;}
.warpper-line-blue .head-title .line-bottom{ background:url(../images/curve-bottom.png); height: 12px; width: 100%; position: absolute; bottom: -12px;}
.warpper-line-blue .head-title .text-head{ padding: 12px 0; border-bottom: 1px solid #ccc;}
.warpper-line-blue .head-title .text-head h2{ font-size: 26px; padding-left: 20px;}
.warpper-line-blue .head-title .text-head img{ margin-top: -25px;}

.breadcrumb{ font-size: 14px; margin-bottom: 20px;}
.breadcrumb a{ margin: auto 12px;}
.breadcrumb a:first-child{ margin-left: 0;}
.breadcrumb a:hover{ color: #0071e5; text-decoration: underline; display: inline-block;}


/* -------- footer -------- */
.line-blue{ width: 100%; height: 5px; background: #147cf1;}
.contact-footer{ display: flex; flex-wrap: wrap; align-items: center; padding: 8px 0;}
.contact-footer div{ width: 33.33%; padding: 12px 8px; }
.contact-footer .logo-footer{ padding-right: 18px;}
.contact-footer .logo-footer img{ max-width: 100%;}
.contact-footer .tel-footer{ padding-left: 18px;}
.contact-footer .tel-footer .text-blue{ display: inline-block; font-size: 14px; padding: 2px; text-align: center; border-radius: 22px; background: #c8f4fd; color: #00a2ff; width: 100px;}
.contact-footer .tel-footer .tel{ font-size: 22px; font-weight: bold;}
.contact-footer .tel-footer p{ color: #000;}
.list-menu-footer{ padding: 0px 0 14px;}
.list-menu-footer ul{ text-align: center;}
.list-menu-footer ul li{ display: inline-block; margin: 4px auto;}
.list-menu-footer ul li a{ border-right: 1px solid #ccc; padding:0 12px;}
.list-menu-footer ul li:first-child a{ border-left: 1px solid #ccc;}
.list-menu-footer ul li a:hover{ text-decoration: underline;}
.warpper-copyright{ background: #000; color: #fff; text-align: center; padding: 4px; font-size: 12px; text-transform: uppercase;}


/* -------- contact top -------- */
.contact-top{ position: fixed; right: 0; display: table; top: 32%;}
.contact-top a{ width: 150px; height: 150px; padding: 6px; text-align: center; display: table-cell; vertical-align: middle; color: #fff!important;}
.contact-top a h3{ font-size: 17px;}
.contact-top a img{ display: block; margin: auto;}
.contact-top a.contact-tel{ background: url(../images/pattern-tile-darkblue.png);}
.contact-top a.contact-mail{ background:  url(../images/pattern-tile-blue.png);padding-top:50px;}


/* -------- button -------- */
.position-button{ text-align: center; margin: 35px auto;}
/*.button-border-blue{ background: #fff; display: block; padding: 6px; border: 3px solid #0279ff; box-shadow: inset 3px 3px 0 #d2d2d2; text-align: center; margin: auto; font-size: 24px; color: #0279ff; width: 300px; font-family: "M2c-medium";}*/
.button-border-blue{ background: #28a6ff; display: block; padding: 6px; box-shadow:0 3px 0 #186bd2; text-align: center; margin: auto; font-size: 24px; color: #FFF; width: 300px; font-family: "M2c-medium";}
.button-border-blue:hover{background: #0279ff; color: #fff; box-shadow: inset 3px 3px 0 #fff;}


/*---------Mobile---------*/

	.contact-top{ display: block;}
	.contact-top a{ display: block; height: auto; padding: 22px 6px;height:150px;}


@media(max-width:1273px){
	.contact-top{ position: relative; top: 0; display: table; width: 100%;}
	.contact-top a{ display: table-cell; width: 50%;}
}

@media( max-width:1024px){
  .warpper-menu .logo{ width: 256px; display: block; margin: auto;}
  .warpper-menu .menu-web{ display: block; width: 100%; padding: 4px 0; text-align: center;}

}

@media( max-width:780px){
  main{ padding-top: 89px;}
  header{ z-index: 99; position: fixed; background: #fff; width: 100%;}
  .warpper-menu .menu-web ul.mobile-sub.wsmenu-list li a span{ border: 0;}
  .warpper-menu .menu-web ul.mobile-sub.wsmenu-list li:first-child a span{ border: 0;}

  .contact-footer div{ display: block;  text-align: center;}
  .contact-footer .logo-footer{ width: 100%;}
  .contact-footer .tel-footer{ width: 50%;}
}

@media(max-width:620px){

}

@media(max-width:480px){
  .warpper-menu .logo{ margin-left: 12px;}
  .warpper-menu .logo h1{ display: none;}
  .contact-footer .tel-footer{ width: 100%;}
	.warpper-menu {
	    padding: 20px 0 0px;
	}
	main {
	    padding-top: 79px;
	}
}

@media(max-width:380px){

}