@charset "utf-8";
/* ----------------------------------
              COMMON
---------------------------------- */
body { margin:0px auto;font-size:16px;
       font-family:'メイリオ', Meiryo, 'ＭＳ Ｐゴシック' ,sans-serif;
       background: #fff; color:#000; }
header,section,article,aside,footer{ 	display: block;}
img{ margin:0; padding:0; border:none; vertical-align:bottom; }
ul,ol{	margin:0;padding:0;list-style:none;list-style-position:outside;}
h1,h2,h3,h4,h5,h6{margin:0;padding:0;}
p{ margin:0;padding:0;}
div{ 	margin:0;padding:0;}
/* ----------------------------------
           COMMON LINK
---------------------------------- */
a:link{ color:#fff;text-decoration:none;}
a:visited{ color:#fff;text-decoration:none;}
a:hover{ color:#ccc; text-decoration:none; opacity: 0.9; }
/* ----------------------------------
          ClearFix
---------------------------------- */
.cf { clear:both;}
.cf:after {  display:block; height:0;  visibility:hidden;
            clear:both;   content:".";}
/*-------------------------------------
             IMAGE
-------------------------------------*/
img{ max-width: 100%;height: auto;width /***/:auto;　}
/*-------------------------------------
             SPAN
-------------------------------------*/
span.bold { font-weight:bold; }
span.red { color:#ff0000; }
span.big { font-size:16px; }
/*-------------------------------------
             BR
-------------------------------------*/
.pc { display:block; }
.tb { display:none; }
.sp { display:none; }
.pctb { display:block; }
  @media screen and (max-width : 769px){
     .pc { display:none; }
     .tb { display:block; }
     .sp { display:none; }
     .pctb { display:block; }
  }
  @media screen and (max-width : 480px) { 
       .pc { display:none; }
       .tb { display:none; }
       .sp { display:block; }
       .pctb { display:none; }
  }

/* ----------------------------------
          UNDER CONSTRACTION
---------------------------------- */
.uc { font-size:26px; margin:30% auto; }

/*-------------------------------------
	     Header
-------------------------------------*/
header { width:100%; height:70px; position:fixed; top:0; z-index:20;
         background-color:rgba(255, 255, 255, 0.8); }
nav { width:100%; font-family:Times New Roman; 
       font-size:12px; z-index:20; } 
.nav-inner { width:98%; margin:0 auto; }
 h1 { float:left; padding:0; width:40%; }
nav ul  { float:right; width:60%;  }
nav li { float:right;margin:10px 2px; padding:16px 0; font-weight:bold; 
         background-color:rgba(51, 51, 51, 0.8);}
nav li:first-letter { font-size: 1.3em; }
nav li.member { background-color:rgba(255, 153, 51, 0.8); }
nav li a:link { padding:0 10px; }

  @media screen and (min-width : 824px){
     nav li a:link { padding:0 10px; }
  }
  @media screen and (min-width : 824px){
     .openIcon { display:none; }
  }
  @media screen and (max-width : 823px){
     nav { position: fixed;  top: 0px; left:0;  margin:0; border-bottom:none;
           background:none;width:100%;z-index:20; height:100%; }
      h1 {  width:100%; text-align:center; position:absolute; top:0; }
     .openIcon {  float:left; }
     nav ul  { float:none;  }
     nav.open { height:47px; width:50px; -webkit-transition: .5s linear; 	transition: .5s linear;  }
     nav.close { width:100%;height:100%;margin-left:230px;
              -webkit-transition: .5s linear; transition: .5s linear; }
     nav ul { list-style:none; padding:0px; width:230px; 
              margin:0px 0px 0px -231px;height:100%;background:#333;}
     nav ul li { color:#fff;font-size: 14px;font-weight: bold;padding:15px 0px 15px 20px;
                 background: #333 ; text-align:left;
                 width: 210px;border-bottom: 1px solid #FFF;}
     nav li.member { margin:0px 0px; padding:15px 0 15px 20px;  }
     nav li:first-letter { font-size: 1.0em; }
     nav ul li a:link { color:#fff; }
     nav ul li a:visited { color:#fff; }
  }
  @media screen and (max-width : 480px) { 
  }

/* ----------------------------------
             MAIN
---------------------------------- */
main {  width:100%;  margin-bottom:70px; }
article { width:100%;   }
section { clear:both; margin:0; padding-bottom:30px; }
#slide { margin:70px auto 0; background:#eee; padding-bottom:0; }
.slideInner { max-width:1200px; margin:0 auto; }
.sectionInner { max-width:1000px; margin:30px auto 0px; position:relative; }

h2 { text-align:center; padding:20px 0; background-color:rgba(240, 240, 240, 0.8); 
     border-top:1px #ccc solid; border-bottom:1px #ccc solid; }

.contentsLeft40 { float:left; width:38%; padding:1%; }
.contentsRight60 { float:left; width:58%; padding:1%; }
.contentsRight60 p { margin-bottom:20px; }
.contentsLeft60 { float:left; width:58%; padding:1%; }
.contentsLeft60 p { margin-bottom:20px; }
.contentsRight40 { float:left; width:38%; padding:1%; }

  @media screen and (max-width : 480px) { 
       #slide { width:100%; overflow:hidden; }
       .slideInner { width:140%; }
       .slideInner img { margin-left:-10%; }
       .contentsLeft40 { float:none; width:98%; padding:1%; }
       .contentsRight60 { float:none; width:98%; padding:1%; }
       .contentsLeft60 { float:none; width:98%; padding:1%; }
       .contentsRight40 { float:none; width:98%; padding:1%; }
  }


.service { display:flex; flex-wrap:wrap; font-size:20px; }
.service p { width:calc(17% - 2px); margin:0.5%; padding:1%; border:1px #aaa solid; border-radius:5px; }

.service p.order1 { background-image:url(../image/service/001.png); background-repeat:no-repeat; 
           background-position:bottom right; background-size:50% auto; }
.service p.order2 { background-image:url(../image/service/002.png); background-repeat:no-repeat; 
           background-position:bottom right; background-size:60% auto; }
.service p.order3 { background-image:url(../image/service/003.png); background-repeat:no-repeat; 
           background-position:bottom right; background-size:50% auto; }
.service p.order4 { background-image:url(../image/service/004.png); background-repeat:no-repeat; 
           background-position:bottom right; background-size:70% auto; }
.service p.order5 { background-image:url(../image/service/005.png); background-repeat:no-repeat; 
           background-position:bottom right; background-size:50% auto; }
.service p.order6 { background-image:url(../image/service/006.jpg); background-repeat:no-repeat; 
           background-position:bottom right; background-size:50% auto; }

.service p.pic { width:calc(18% - 2px); margin:0.5%; padding:0.5%; border:1px #aaa solid; border-radius:5px; }


h3 { text-align:center; padding:20px 0; }

.service2 { display:flex; flex-wrap:wrap; font-size:20px; margin:0px auto 30px; }
.service2 p { width:170px; height:110px; border-radius: 170px; padding-top:57px; 
              margin:1%; text-align: center; border:1px #aaa solid; background:#f1f8ff; }
.service2 p:nth-child(odd) { background:#fff1fe; }
.service2 p.line3 { padding:45px 0 15px;  }
.service2 p.pic { padding:0; height:170px; }
.service2 p.pic img { width:170px; height:170px; border-radius: 170px; }


  @media screen and (max-width : 768px){ 
       section { width:98%; margin:0 1%; }
      .service p { width:calc(30.3% - 2px); margin:0.5%; padding:1%; height:22vw;
            border:1px #aaa solid; border-radius:5px; }
      .service p.pic { width:calc(30.3% - 2px); padding:1%; }
      .service2 { display:flex; flex-wrap:wrap; font-size:20px; margin:0px auto 30px; }
      .service2 p { width:calc(31% - 2px); border-radius: 50%; padding:8% 0 0; 
              margin:1%; text-align: center; border:1px #aaa solid; }
      .service2 p.line3 { padding:6% 0 2%;  }
      .service2 p.pic { display:none;}
  }
  @media screen and (max-width : 480px) { 
      .service { font-size:18px; }
      .service p { width:calc(47% - 2px); margin:0.5%; padding:1%; height:25vw; overflow:hidden;
            border:1px #aaa solid; border-radius:5px; }
      .service p.pic { width:calc(47% - 2px); padding:1%; }
      .service p.order1 { background-size:30% auto; }
      .service p.order2 { background-size:40% auto; }
      .service2 { display:flex; flex-wrap:wrap; font-size:20px; margin:0px auto 30px; }
      .service2 p { width:calc(47% - 2px); border-radius: 50%; padding:8% 0 0; 
              margin:1%; text-align: center; border:1px #aaa solid; }
      .service2 p.line3 { padding:6% 0 2%;  }

  }
  @media screen and (max-width : 390px) { 
      .service { font-size:16px; }
      .service p { height:30vw;  }
      .service p.order1 { background-size:30% auto; }
      .service p.order2 { background-size:40% auto; }
  }

/*-------------------------------------
	   ABOUT US
-------------------------------------*/
.aboutCon { max-width:468px; line-height:2.0em; }
.company-left { width:28%; float:left; padding:0 1%; }
.company-right { width:68%; float:left; padding:0 1%;  }
.about-right h3 { text-align:left; 10px 0; }
.about-right p { line-height:2.0em; }

  @media screen and (max-width : 768px) {
      .aboutCon {  font-size:18px; padding:30px 0 30px 10%; }
      .about-left { width:28%; float:left; padding:1%; }
      .about-right { width:58%; float:left; padding:1%;}
  }
  @media screen and (max-width : 480px) {
      .aboutCon {  font-size:18px; padding:30px 0 30px 0%; }
      .about-left { width:98%; float:none; padding:1%; }
      .about-right { width:95%; float:none; padding:1% 1% 1% 4%;}
  }
/*-------------------------------------
	   POINT
-------------------------------------*/
.bgGreen { background:#effcf0; }
.bgPink { background:#;}
.bgBlue { background:#f3f6ff; }
.prohibited { width:800px; background-image:url(../image/prohibited.png); background-size: contain; 
         font-size:20px;  text-shadow:1px 1px 1px #fff, -1px -1px 1px #fff; 
         background-repeat:no-repeat; background-position: center bottom; }

.contentsLeft50 { float:left; width:calc(46% - 4px); padding:1%; margin:0 1%; border:2px #0000ff solid;
         border-radius:30px; }
.contentsRight50 { float:left; width:calc(46% - 4px); padding:1%; margin:0 1%; border:2px #ff0000 solid; 
         border-radius:30px; }
h4 { margin-top:10px; }
.demeritImage { text-align:right;height:100px; }
.demeritImage img { height:100px; }

  @media screen and (max-width : 768px) {
      .prohibited { width:100%; } 
      .demeritImage { text-align:right;height:168px; }
      .demeritImage img { height:168px; }
  }
  @media screen and (max-width : 768px) {
       .contentsLeft50 { float:none; width:calc(94% - 4px); padding:2%; margin-bottom:20px; }
       .contentsRight50 { float:none; width:calc(94% - 4px); padding:2%; }
  }
/*-------------------------------------
	   CONTACT
-------------------------------------*/
.contact-left { width:48%; float:left; padding:1%; }
.contact-right { width:48%; float:left; padding:1%;  font-size:14px; }
.contactTex input { margin:5px 0; }
.contactTex input.name { width:96%; padding:20px 1%; border-radius:8px; border:none; background:#eee; }
.contactArea { clear:left; width:100%; padding:10px 0;  }
.contactArea textarea.message { width:97%; height:114px; padding:20px 1%; 
          border-radius:8px; border:none; background:#eee; }
.contactTex input.submit { width:98%; padding:20px 1%; border-radius:8px; 
          color:#fff; font-weight:bold; font-size:16px; 
          border:none; cursor:pointer; background-color:rgba(255, 102, 0, 0.8);  }
.contactTex input.submit:hover { background-color:rgba(255, 102, 0, 1.0);  }
.contactBox { width:90%; margin:0px auto 10px; padding:0px; }
.submitBtn { margin-left:200px;}

  @media screen and (max-width : 768px){
    input, .contactRight textarea { width:80%;}
    .submitBtn { margin-left:5%;}
  }
  @media screen and (max-width : 480px) {
    .contact-left { width:98%; float:none; padding:1%; }
    .contact-right { width:98%; float:none; padding:1%; }
    input, .contactRight textarea { width:100%;}
    .submitBtn { margin-left:5%;}
  }

#contactForm { margin:40px auto; max-width:800px; }
#contactForm table { table-layout:fixed; }
#contactForm .formTable { width:80%;margin:10px auto 10px auto;
         border-spacing:0;border-collapse:collapse; }
#contactForm .formTable td { width:69%;padding:5px;word-wrap:break-word; }
#contactForm .formTable th { width:29%;padding:5px; }
/*-------------------------------------
	   GOOGLE MAP
-------------------------------------*/
.ggmap { position: relative; padding-bottom: 80%; padding-top: 30px; height: 0; overflow: hidden; }
.ggmap iframe, .ggmap object, .ggmap embed { position: absolute; top: 0; left: 0;
             width: 100%; height: 100%; }
.facebook { display:none;  }

  @media screen and (max-width : 768px) {
  }
  @media screen and (max-width : 480px) {
      .facebook { display:block; width:100%; text-align:center; margin:10px auto; }
  }
/*-------------------------------------
	     Footer
-------------------------------------*/
footer { width: 100%; padding:0; }

#copyright { background: #323333; width:100%; height:20px;
	padding:20px 0 10px; margin:0 auto; text-align:center; font-size:12px;
	font-weight:500; line-height:100%; color:#FFF; font-family:Meiryo; }
  @media screen and (max-width : 768px){
    footer #footer-inner { width:98%; margin:0 1%; }
  }
  @media screen and (max-width : 480px) {
    .footer-left { width:98%; margin:0 1%; float:none; }
    .footer-right { width:98%; margin:20px 1%; float:none; }
    footer li { float:none;width:96%; padding:10px 0; }
  }