@charset "utf-8";

/*====================================================================

style.css

====================================================================*/

/*--------------------------------------------------------------------
01.format
--------------------------------------------------------------------*/
body,div,span,
dl,dt,dd,
h1,h2,h3,h4,h5,h6,
pre,form,fieldset,p,blockquote,address,
table,tr,th,td,img{
   margin:0;
   padding:0;
   border:none;
}
hr{display:none;}
/*img{display:block;}
li{list-style-type: none;}*/

/* iOSでのデフォルトスタイルをリセット */
input[type="submit"],
input[type="button"] {
  border-radius: 0;
  -webkit-box-sizing: content-box;
  -webkit-appearance: button;
  appearance: button;
  border: none;
  box-sizing: border-box;
  cursor: pointer;
}
input[type="submit"]::-webkit-search-decoration,
input[type="button"]::-webkit-search-decoration {
  display: none;
}
input[type="submit"]::focus,
input[type="button"]::focus {
  outline-offset: -2px;
}

/*a
----------------------------------------------------------------*/
a{
   color:#e95504;
   text-decoration: none;
}
a:visited{
   color:#e95504;
   text-decoration:none;
}
a:hover{
   color:#e95504;
   text-decoration:underline;
}
a:active{
   color:#e95504;
   text-decoration:none;
}


/* custom
-----------------------------------*/
/*pure-drawer*/
.pure-drawer{
   width: 70% !important;
}
.pure-overlay{
   background-color: rgba(233, 85, 4, 0.8);
}
.pure-toggle[data-toggle='right'] ~ .pure-overlay[data-overlay='right'] {
   right: 0 !important;
}

/*modaal*/
.modaal-inner-wrapper{
   padding: 15px !important;
}
.modaal-container{
   height: 100%;
   -webkit-border-radius: 10px;
   -moz-border-radius: 10px;
   border-radius: 10px;
}
.modaal-content,
.modaal-content-container{
   height: 100%;
}

.modaal-content-container{
   padding: 0;
}
.modaal-fullscreen .modaal-close,
.modaal-close{
   background: none;
   position: absolute;
   right: 0;
   top: 0;
   width: 45px;
   height: 45px;
}
.modaal-close::after,
.modaal-close::before{
   left: 22px;
   top: 9px;
   height: 30px;
   width: 2px;
   background-color: #e95504;
}



/*--------------------------------------------------------------------
02.body
--------------------------------------------------------------------*/
body {
   color: #333333;
   line-height: 1.8;
   font-size: 14px;
   font-family: 游ゴシック体, 'Yu Gothic', YuGothic, 'ヒラギノ角ゴシック Pro', 'Hiragino Kaku Gothic Pro', メイリオ, Meiryo, Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
   -moz-font-feature-settings:'jp90';
   -moz-font-feature-settings:'jp90=1';
   -webkit-font-feature-settings:'jp90' 1;
}

/*--------------------------------------------------------------------
03.layout
--------------------------------------------------------------------*/
#container{
   position: relative;
   min-width: 1200px;
}
.contents-container{
   width: 960px;
   margin: auto;
}

/*--------------------------------------------------------------------
04.共通要素
--------------------------------------------------------------------*/
.desktop{display: block;}
.sp{display: none;}

table td.desktop{display: table-cell !important;}

/*部品
-----------------------------------*/
/*btns*/
.btns{
   width: 576px;
   margin: 15px auto;
}
/*.btns .btn{
   display: block;
   width: 100%;
   background: #e95504;
   color: #fff;
   font-size: 14px;
   text-decoration: none;
   text-align: center;
   line-height: 1;
   border: none;
   cursor: pointer;
   padding: 14px 0px;
   -webkit-border-radius: 7px;
   -moz-border-radius: 7px;
   border-radius: 7px;
}*/
.btns .btn{
   display: block;
   width: 100%;
   color: #e95504;
   font-size: 14px;
   text-decoration: none;
   text-align: center;
   line-height: 1;
   border: none;
   cursor: pointer;
   padding: 14px 0px;
   border: solid 1px #ccc;
   -webkit-border-radius: 7px;
   -moz-border-radius: 7px;
   border-radius: 7px;
}
.btns .btn:hover{
   border: solid 1px #999;
}

/*modal
-----------------------------------*/
.modal-header{
   position: relative;
   height: 45px;
   border-bottom: solid 1px #cccccc;
}
.modal-header .title,
.modal-header .caution{
   height: 45px;
   line-height: 45px;
}
.modal-header .title{
   text-align: center;
   font-size: 14px;
   font-weight: bold;
   color: #e95504;
   letter-spacing: 2px;
}
.modal-header .caution{
   position: absolute;
   left: 15px;
   top: 0;
   font-size: 9px;
   color: #333333;
}
.modal-contents{
   height: 100%;
   overflow-y: scroll;
}


/*header
-----------------------------------*/
.g-header,
.g-header .logo,
.g-header .menu,
.g-header .language{
   height: 90px;
}
.g-header{
   text-align: left;
   vertical-align: middle;
   box-shadow:0px 1px 3px -1px #999;
   -moz-box-shadow:0px 1px 3px -1px #999;
   -webkit-box-shadow:0px 1px 3px -1px #999;
}
.g-header:after{
   content: ".";
   display: block;
   clear: both;
   height: 0;
   font-size: 0;
   visibility: hidden;
}
.g-header .logo,
.g-header .menu{
   float: left;
}
.g-header .language{
   float: right;
}

/*logo*/
.g-header .logo{
   border-right: solid 1px #cccccc;
}
.g-header .logo a{
   display: block;
   width: 277px;
   height: 90px;
   text-indent: -9999px;
   overflow: hidden;
   background: url(../img/logo.png) no-repeat center center;
}

/*menu*/
.g-header .menu{}
.g-header .menu ul{}
.g-header .menu ul li,
.g-header .menu ul li a,
.g-header .menu ul li ul{
   display: inline-block;
}
.g-header .menu ul li{
   height: 90px;
   line-height: 90px;
   font-size: 14px;
   font-weight: bold;
   border-right: solid 1px #cccccc;
   padding: 0 30px;
}
.g-header .menu ul li a{
   color: #000000;
}
.g-header .menu ul li ul{}
.g-header .menu ul li ul li{
   font-size: 12px;
   border-right: none;
   padding: 0 0 0 15px;
}
.g-header .menu ul li ul li a{
   color: #333333;
}
.g-header .menu ul li ul li:before{
   content: "・";
   color: #333333;
}

/*member*/
.g-header .language{
   width: 120px;
   border-left: solid 1px #cccccc;
}
.g-header .language ul{
   padding: 30px 0 0 20px;
   vertical-align: middle;
}
.g-header .language ul li,
.g-header .language ul li a{
   width: 30px;
   height: 30px;
}
.g-header .language ul li{
   display: inline-block;
   vertical-align: middle;
   margin: 0 5px;
   border: solid 1px #e95504;
   -webkit-border-radius: 30px;
   -moz-border-radius: 30px;
   border-radius: 30px;
   overflow: hidden;
}
.g-header .language ul li a{
   display: block;
   color: #ff3005;
   font-size: 12px;
   text-align: center;
   line-height: 30px;
}
.g-header .language ul li.active a{
   color: #fff;
   background-color: #e95504;
}


/* mainvisual
-----------------------------------*/
.mainvisual{
   position: relative;
   height: 400px;
   background: #ccc;
}
.mainvisual .items{}
.mainvisual .items li{
   width: 283px !important;
}
.mainvisual .items img{
   height: 400px;
   width: auto;
}


/* contents
-----------------------------------*/
.contents{margin-top: 90px;}
.contents .header{}
.contents .header .title{
   text-align: center;
   color: #e95504;
   font-size: 30px;
   line-height: 1;
}
.contents .header .title span{
   font-size: 18px;
}

/*
.contents .sub-title{
   width: 300px;
   height: 45px;
   line-height: 45px;
   color: #e95504;
   text-align: center;
   font-size: 16px;
   border: solid 1px #ccc;
   -webkit-border-radius: 45px;
   -moz-border-radius: 45px;
   border-radius: 45px;
   margin: auto;
}*/
.contents .sub-title{
   width: 300px;
   height: 45px;
   line-height: 45px;
   color: #fff;
   text-align: center;
   font-size: 16px;
   background: #e95504;
   -webkit-border-radius: 45px;
   -moz-border-radius: 45px;
   border-radius: 45px;
   margin: auto;
}
.contents .desc{
   color: #333333;
   font-size: 14px;
   text-align: center;
   margin-top: 25px;
}

.contents .contents-item{
   margin-top: 30px;
   padding-top: 30px;
   border-top: solid 1px #cccccc;
}


/*service*/
.service{}
.service .about{padding: 60px 0 30px;}
.service .about h3{
   font-size: 21px;
   color: #333333;
   line-height: 1.5;
   letter-spacing: 2px;
   text-align: center;
}
.service .about p{}

.service .handing .items.desktop{
   overflow: hidden;
   zoom: 1;
}
.service .handing .items.desktop ul{
   padding-top: 20px;
}
.service .handing .items.desktop ul li{
   display: block;
   float: left;
   width: 150px;
   height: 211px;
   text-align: center;
   margin: 0 12px 12px 0;
   background-color: #ddd;
}
.service .handing .items.desktop ul li:nth-child(6n){
   margin-right: 0;
}
.service .handing .items.desktop ul li img{
   width: 100%;
   height: auto
}

.service .distribution .items,
.modal-contents .items{
   overflow: hidden;
   zoom: 1;
}
.service .distribution .items ul,
.modal-contents .items ul{
   padding-top: 20px;
   text-align: center;
}
.service .distribution .items ul li,
.modal-contents .items ul li{
   position: relative;
   display: inline-block;
   width: 148px;
   height: 58px;
   border: solid 1px #cccccc;
   margin: 0 8px 6px 0;
   overflow: hidden;
}
.service .distribution .items ul li:nth-child(6n),
.modal-contents .items ul li:nth-child(3n){
   margin-right: 0;
}
.service .distribution .items ul li a,
.modal-contents .items ul li a{

}
.service .distribution .items ul li span,
.modal-contents .items ul li span{
   position: absolute;
   display: block;
   top: 5px;
   bottom: 5px;
   right: 10px;
   left: 10px;
   width: auto;
   height: auto;
   text-indent: -9999px;
   overflow: hidden;
   background-repeat: no-repeat;
   background-position: center center;
   -moz-background-size:  contain;
   -webkit-background-size: contain;
   background-size: contain;
}
.service .distribution .items ul li img,
.modal-contents .items ul li img{
   display: block;
   visibility: hidden;
   width: 100%;
   height: auto;
}

.modal-contents .items{
   position: relative;
}
.modal-contents .items ul{
   text-align: center;
   padding-bottom: 40px;
}
.modal-contents .items ul li{
   width: 29%;
   height: 55px;
   margin: 0 10px 10px 0;
}
.modal-contents .items ul li img{
   width: 100%;
   height: auto;
}

/*company*/
.company{}
.company .message{}

.company .about{}
.company .about .normal{
   width: 100%;
   margin-top: 30px;
}
.company .about .normal th,
.company .about .normal td{
   vertical-align: top;
   line-height: 1.5;
   padding: 4px 0;
}
.company .about .normal th{
   white-space: nowrap;
   width: 150px;
}
.company .about .map{
   margin-top: 30px;
}
.company .about .map #map-canvas{
   width: 100%;
   height: 300px;
   background: #eee;
}

.company .partner .items{
   overflow: hidden;
   zoom: 0;
   margin-top: 30px;
}
.company .partner .items ul{
   display: inline-block;
   width: 48%;
   vertical-align: top;
}
.company .partner .items ul li{
   height: 25px;
}



/*contact*/
.contact{}
.contact .form{}
.contact .form .inner{
   width: 576px;
   margin: auto;
}
.contact .form span{color: #e95504;}
.contact .form .normal{
   width: 100%;
}
.contact .form .normal th{
   width: 144px;
   vertical-align: top;
   padding-top: 16px;
}
.contact .form .normal td{
   padding: 8px 0;
}
.contact .form .text{
   display: block;
   width: 95%;
   font-size: 14px;
   border: solid 1px #e1e1e1;
   background: #fafafa;
   padding: 10px;
   -webkit-border-radius: 7px;
   -moz-border-radius: 7px;
   border-radius: 7px;
}
.contact .form .btns{
   margin-top: 20px;
}



/* footer
-----------------------------------*/
.g-footer{margin-top: 90px;}
.g-footer .copyright{
   border-top: solid 1px #ccc;
   padding: 30px 0;
}
.g-footer .copyright p{
   width: 960px;
   margin: auto;
   text-align: left;
   font-size: 10px;
   color: #666;
}
.g-footer .copyright.company{
   border: none;
}
.g-footer .copyright.company p{
   text-align: center;
   font-size: 12px;
   font-size: #333;
}

.group-links{
   text-align: center;
   font-size: 0;
   border-top: solid 1px #ccc;
}
.group-links .link{
   display: inline-block;
   height: 150px;
   font-size: 1.2rem;
   margin: 0 15px;
}
.group-links .link img{
   display: block;
   width: auto;
   height: 100%;
}


.pagetop{
   position: fixed;
   right: 25px;
   bottom: 25px;
   width: 60px;
   height: 60px;
}
.pagetop a{
   display: block;
   width: 60px;
   height: 60px;
   line-height: 60px;
   color: #fff;
   font-size: 40px;
   text-align: center;
   text-decoration: none;
   background-color: #e95504;
   -webkit-border-radius: 60px;
   -moz-border-radius: 60px;
   border-radius: 60px;
}






/*====================================================================

SP

====================================================================*/
@media screen and ( max-width:750px ){

   .desktop{display: none;}
   .sp{display: block;}


   .pure-toggle-label{
      width: 66px;
      height: 66px;
      color: #e95504 !important;
      right: 0 !important;
      top: 0 !important;
      border: none;
      -webkit-border-radius: 10px;
      -moz-border-radius: 10px;
      border-radius: 10px;
   }
   .pure-toggle-label:hover {
     border-color: #e95504;
     color: #e95504;
   }
   .pure-toggle-label:hover .pure-toggle-icon,
   .pure-toggle-label:hover .pure-toggle-icon:before,
   .pure-toggle-label:hover .pure-toggle-icon:after {
     background-color: #e95504;
   }
   .pure-toggle-label:active {
   }
   .pure-toggle-label .pure-toggle-icon,
   .pure-toggle-label .pure-toggle-icon:before,
   .pure-toggle-label .pure-toggle-icon:after {
     position: absolute;
     top: 50%;
     left: 50%;
     height: 3px;
     width: 30px;
     cursor: pointer;
     background: #e95504;
     display: block;
     content: '';
     transition: all 300ms ease-in-out;}
   .pure-toggle-label .pure-toggle-icon {
     transform: translate3d(-50%, -2px, 0);
     -webkit-transform: translate3d(-50%, -2px, 0); }
   .pure-toggle-label .pure-toggle-icon:before {
     transform: translate3d(-50%, -12px, 0);
     -webkit-transform: translate3d(-50%, -12px, 0); }
   .pure-toggle-label .pure-toggle-icon:after {
     transform: translate3d(-50%, 8px, 0);
     -webkit-transform: translate3d(-50%, 8px, 0); }

   body{
      position: relative;
   }
   #container{
      min-width: auto;
      min-height: auto;
      max-width: auto;
   }
   .contents-container{
      width: auto;
      overflow: hidden;
   }
   .contents .contents-item{
      padding-top: 15px;
      margin-top: 15px;
   }
   .contents .contents-item .inner{
      padding: 30px 15px;
   }

   .btns{
      width: 100%;
   }

   .toggle-btn{}
   .toggle-btn .btn{
      width: 45px;
      height: 45px;
      line-height: 50px;
      font-size: 40px;
      font-weight: bold;
      text-align: center;
      color: #e95504;
      border: solid 1px #ccc;
      -webkit-border-radius: 45px;
      -moz-border-radius: 45px;
      border-radius: 45px;
      cursor: pointer;
   }

   table.normal tr th,
   table.normal tr td{
      display: block;
   }

   .sp-menu{
      background-color: #fff;
   }
   .sp-menu .close{
      float: right;
      width: 66px;
      height: 66px;
      line-height: 66px;
      font-size: 36px;
      color: #e95504;
      text-align: center;
      cursor: pointer;
   }
   .sp-menu ul.menu{
      clear: both;
      border-bottom: solid 1px #ccc;
   }
   .sp-menu ul li{
      line-height: 1;
      padding: 25px 15px;
      border-top: solid 1px #ccc;
   }
   .sp-menu ul li a{
      display: inline-block;
      width: 100%;
      color: #000;
      font-size: 14px;
      font-weight: bold;
      overflow: hidden;
      zoom: 1;
   }
   .sp-menu ul li a .fa{
      display: inline-block;
      float: right;
      color: #e95504;
   }
   .sp-menu ul li ul{}
   .sp-menu ul li ul li{
      border-top: none;
      padding: 25px 0 0;
   }
   .sp-menu ul li ul li:before{
      content: "・";
      color: #333333;
   }
   .sp-menu ul li ul li a{
      width: auto;
      color: #333;
   }


   .g-header,
   .g-header .logo,
   .g-header .logo a{
      height: 66px;
   }
   .g-header .logo a{
      width: 86px;
      background-image: url(../img/sp-logo.png);
      -moz-background-size:  100% auto;
      -webkit-background-size: 100% auto;
      background-size: 100% auto;
   }
   .g-header .menu{
      display: none;
   }
   .g-header .menu-icon,
   .g-header .menu-icon button{
      width: 66px;
      height: 66px;
   }
   .g-header .menu-icon{
      float: right;
      border-left: solid 1px #cccccc;
   }
   .g-header .menu-icon button{
      display: block;
      line-height: 66px;
      font-size: 30px;
      color: #e95504;
      text-align: center;
      border: none;
      background-color: transparent;
   }
   .g-header .language{
      border-left: none;
      height: auto;
   }
   .g-header .language ul{
      padding: 22px 0 0;
      margin-right: 30px;
   }
   .g-header .language ul li,
   .g-header .language ul li a{
      width: auto;
      height: auto;
   }
   .g-header .language ul li{
      display: inline-block;
      vertical-align: middle;
      margin: 0 5px;
      border: none;
      -webkit-border-radius: 0px;
      -moz-border-radius: 0px;
      border-radius: 0px;
      overflow: hidden;
   }
   .g-header .language ul li a{
      display: inline-block;
      color: #e95504;
      font-size: 14px;
      font-weight: bold;
      line-height: 1;
      text-align: center;
      vertical-align: middle;
      padding: 0 5px 5px;
   }
   .g-header .language ul li:hover a,
   .g-header .language ul li.active a{
      color: #e95504;
      text-decoration: none;
      background-color: transparent;
      border-bottom: solid 2px #e95504;
   }

   .mainvisual,
   .mainvisual .items img{
      height: 300px;
   }
   .mainvisual .items li{
      width: 212px !important;
   }

   .contents{margin-top: 45px;}
   .contents .sub-title{
      width: 60%;
   }
   .contents .desc{
      font-size: 12px;
      text-align: left;
      padding: 0 0px;
   }

   /*about*/
   .service .about h3{
      font-size: 18px;
      font-weight: bold;
      padding: 0 25px;
   }

   /*handing*/
   .service .handing .sp.items{
      padding: 10px 0;
   }
   .service .handing .sp.items ul li{
      width: 90px;
      height: 126px;
      margin-right: 5px;
   }
   .service .handing .sp.items ul li:nth-child(6n){
      margin-right: 5px;
   }
   .service .handing .sp.items ul li img{
      height: 100%;
      width: auto;
   }
   .service .handing .sp-desc{
      text-align: center;
   }

   /*about*/
   .about table.normal{}
   .about table.normal tr th,
   .about table.normal tr td{
      display: block;
      padding: 0 !important;
   }
   .about table.normal tr th{
      font-weight: bold;
      margin-top: 5px
   }
   .about table.normal tr td.desktop{
      display: none !important;
   }

   /*partner*/
   .company .partner{
      position: relative;
   }
   .company .partner .toggle-btn{
      position: absolute;
      right: 15px;
      top: 45px;
   }
   .company .partner .items{
      /*height: 0px;*/
   }
   .company .partner .items ul{
      display: block;
      width: auto;
      padding: 0 15px;
   }
   .company .partner .items ul li{
      height: auto;
      line-height: 1.4;
      margin-top: 7px
   }

   /*contact*/
   .contact .form .inner{
      width: auto;
   }

   .g-footer{
      margin-top: 45px;
   }
   .g-footer .copyright p{
      width: auto;
      padding: 0 15px;
   }


}