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

@import url(//fonts.googleapis.com/earlyaccess/notosansjp.css);

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: 'Noto Sans JP',"ヒラギノ角ゴ Pro W3", "Hiragino Kaku Gothic Pro",Osaka, "メイリオ", Meiryo, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;  line-height:1.5; font-size: 14px;
margin:0; background-size: 100%;font-weight: 400; color:#494848;}

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 -------- */
header{background-color: #070707;
}
/*.warpper-menu{ max-width: 1024px; display: flex; flex-wrap: wrap; margin: auto; padding: 20px 0 0px; align-items: center; }*/
.warpper-menu{ max-width: 1280px; display: flex; flex-wrap: wrap; margin: auto; padding: 20px 0 0px; align-items: center; }
.warpper-menu .logo{ width: 153px;    margin: -8px 0 0 0;}

.warpper-menu .logo h1{     font-size: 9px;
    white-space: nowrap;
    position: absolute;
    z-index: 9999;
    top: 3px;
	font-weight:normal;
  color: #FFF;
}
.warpper-menu .logo img{ width: 100%;}
.warpper-menu .logo img:hover{ opacity: 0.8;}
.warpper-menu .menu-web{     /* width: 744px; */    width: 1070px; padding-left: 20px;}
.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: 3px solid #f7ff25;
  -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 -------- */

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

.breadcrumb ol li a{
  text-align: center;
  /*padding: 10px;*/
}

.breadcrumb ol li{
  display:inline;
}


.breadcrumb ol li::after{
  content: ">";
  margin-left: 1em;
}



/* -------- Title -------- */
.head-title{ padding: 40px 0 30px;}
.head-title h2{font-size: 20px; color: #000; text-align: center; font-weight: 400;
/* font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif;  */
font-weight: bold; font-style: italic;
}
.head-title h2 span{
   font-size: 33px !important;
    color: #000;
    line-height: 40px;
    font-style: normal;
    /* font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif; */
    font-weight: normal;
    border-bottom: 4px solid #000;
    padding: 0 15px 10px;}
/*--h3   */
.head-title-sub{ border-bottom: 1px solid #e2e2e2; margin-bottom: 20px; }
.head-title-sub h3{  font-size: 20px; margin: 10px; font-weight: 500;}
.head-title-sub .line{ display: flex; flex-wrap: wrap; width: 100%; border-radius: 18px; overflow: hidden; margin: 0 auto; position: relative; bottom: -1px;}
.head-title-sub .line .line-yellow{ width: 40%; height: 5px; background: #fff109; display: block;}
.head-title-sub .line .line-lightblue{width: 60%;  height: 5px; background: #c2c2c2; display: block;}
.head-title-sub .line:after {position: absolute;content: '';width: 0px;height: 0px;z-index: 1;
  top: 0;left: 39.3%;;border-width: 5px 7px 0 0px;border-color: transparent #c2c2c2 transparent transparent;border-style: solid;}
  /*--h3-2   */
  .head-title-sub-2{ width: 360px; margin: auto;}
  .head-title-sub-2 h3{font-size: 30px; color: #494848; text-align: center; font-weight: 400; margin: 10px 0 5px;}
  .head-title-sub-2 .line{ display: flex; flex-wrap: wrap; width: 30%; border-radius: 18px; overflow: hidden; margin: 0 auto; position: relative;}
  .head-title-sub-2 .line .line-yellow{ width: 55%; height: 5px; background: #fff109; display: block;}
  .head-title-sub-2 .line .line-lightblue{ width: 45%; height: 5px; background: #c2c2c2; display: block;}
  .head-title-sub-2 .line:after {position: absolute;content: '';width: 0px;height: 0px;z-index: 1;}
  .head-title-sub-2 .line:after {top: 0;left: 48%;border-width: 5px 7px 0 0px;border-color: transparent #c2c2c2 transparent transparent;border-style: solid;
   }
.head-title-sub3{ margin-bottom: 20px; }
.head-title-sub3 h3{  font-size: 20px; margin: 10px; font-weight: 600;}

/*-- add --*/
.warpper-menu .logo .h-1{     
  font-size: 9px;
  white-space: nowrap;
  position: absolute;
  z-index: 9999;
  top: 3px;
  font-weight:normal;
  color: #FFF;
}

.head-title .h-2 {
  font-size: 20px;
  color: #000;
  text-align: center;
  font-weight: 400;
  /* font-family: Georgia,游明朝,"Yu Mincho",YuMincho,"Hiragino Mincho ProN",HGS明朝E,メイリオ,Meiryo,serif; */
  font-weight: bold;
  font-style: italic;
}

.head-title .h-2 span{
   font-size: 33px !important;
   color: #000;
   line-height: 40px;
   font-style: normal;
   /* font-family: TimesNewRoman, "Times New Roman", Times, Baskerville, Georgia, serif; */
   font-weight: normal;
   border-bottom: 4px solid #000;
   padding: 0 15px 10px;
}

.head-title-sub .h-3{  
  font-size: 20px; 
  margin: 10px; 
  font-weight: 500;
}

/* -------- footer -------- */
footer{ margin: 100px 0 0 0;background-image: url(/common/images/footer.jpg); background-size: cover; padding: 50px 0 0; border-bottom: 10px solid #fff109;}

.list-menu-footer{ padding: 0px 0 14px;}
.list-menu-footer ul{ text-align: left; margin: 0 0 30px;}
.list-menu-footer ul li{ display: inline-block; width: 22%; margin: 0 2.3em 0 0; vertical-align: top; }
.list-menu-footer ul li:nth-child(4n){ margin: 0 !important;}
.list-menu-footer ul li div{  margin: 0 0 20px 0; }
.list-menu-footer ul li a{ padding:3px; color: #FFF; font-weight: 200;}
.list-menu-footer .hvr-underline-from-left:before {
  background:#fff109;
      height: 2px;
}
.contact-footer .store-fotter{
    display: -webkit-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    -ms-flex-wrap: wrap;
    -webkit-flex-wrap: wrap;
    flex-wrap: wrap; width: 23%;
    float: left;
    margin: 0 2.5% 30px 0;
	cursor:pointer;
}
.contact-footer .store-fotter:nth-child(4n){
  margin: 0 0% 30px 0;

}
.contact-footer .store-fotter .store-fotter-data{ background-color: #181f24; width: 150px; color: #fff; padding:5px 5px 5px 15px; position: relative; }
.contact-footer .store-fotter .store-fotter-data i{ color: #fff109; }
.store-fotter-data p{ font-size: 14px;}
.store-fotter-data span{ display: block; font-size: 12px; margin: 2px 0 0; color:#FFF !important;}
.store-fotter-data span.footer_tel{  font-size: 14px !important; line-height: 22px;}
.store-fotter-data span.footer_tel i{  font-size: 16px !important; margin: 2px 5px 0 0; top: 2px; position: relative;}
.store-fotter-data span.footer_tel a{ color:#FFF !important;}
.store-fotter-data span.footer_tel a:visited{ color:#FFF !important;}

.store-fotter-data .fa-long-arrow-right {
  position: absolute;
  top: 50%;
  right: 1em;
  transition: all .2s;
  font-weight: 100;

}
.store-fotter-data:hover .fa-long-arrow-right {
  right: 0.5em;
}

.contact-footer a{ width: 33.33%; padding: 12px 8px; }


.warpper-copyright{ background-image: url(/common/images/footer_icon.png); background-repeat: no-repeat; background-position:  center top;
  color: #fff; text-align: center; padding:130px 4px 30px; font-size: 12px; text-transform: uppercase; font-weight: 100; margin: 40px 0 0 ;}


/* -------- contact top -------- */
.contact-top{ position: fixed; right: 0; display: table; top: 32%;}
.contact-top a{ width: 150px; height: 110px; padding:20px 6px; text-align: center; display: table-cell; vertical-align: middle; color: #fff!important;display: flex; border: 2px solid #000;border-bottom: transparent;}
.contact-top a img{ display: block; margin: auto;}
.contact-top a.contact-mail{ background:  url(/index/images/pattern-tile-blue.png);}


/* -------- 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;}


/*-------- midashi --------*/
.headline{
  color:#fff;
  text-align:center;
  padding:20px 0;
  font-size:35px;
  font-family:Book Antiqua;
}

.headline span{
  font-size:22px;
}

/*---------Mobile---------*/
@media(max-width:1580px){
	/* .contact-top{ display: block; margin: 0 0 15px;}
	.contact-top a{ display: block; height: auto; padding: 15px 6px;} */
}

@media(max-width:1273px){
	.contact-top{ position: relative; top: 0; display: table; width: 100%;}
	.contact-top a{ display: table-cell; width: 50%; padding: 15px 6px ;height: auto;}
  footer{padding: 0;}
}
@media(max-width:1040px){
  .warpper-slide .center a {
    width: 30%;
    margin: 30px 1% 30px !important;
  }
  .warpper-slide .center a img{
    width: 100%;
  }
  .warpper-slide{
    height: auto !important;
  }
  .list-menu-footer,.contact-footer{ display: none;}
  .warpper-copyright {
    padding: 80px 4px 13px;
    font-size: 12px;
    margin: 22px 0 0;
    background-size: 50px;
}

}
@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: 81px;}
  header{ z-index: 99; position: fixed; background: #000; 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%;}

  .h-1 {display:none!important;}
.head-title .h-2 span {font-size: 25px !important;}
}

@media(max-width:620px){

  .head-title h2 span{font-size: 25px !important;} 
  .head-title { padding: 20px 0 10px;}

  .warpper-menu {padding:0;}

}

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


}

@media(max-width:380px){

}