@import url(https://fonts.googleapis.com/earlyaccess/notosansjapanese.css);

html {
  font-size: 62.5%; /* sets the base font to 10px for easier math */
}
body {
  margin: 0;
  height: 100%;
  font-family: "Hiragino Kaku Gothic ProN","メイリオ", sans-serif;
  font-size: 12px;
  font-size: 1.2rem;
  line-height: 1.8;
  background: url(../img/bg.jpg) repeat;
  overflow-x: hidden;
  /* sets the default sizing to make sure nothing is actually 10px */
}
h1 {
  font-family: 'Noto Sans Japanese', serif;
  font-weight:900;
  font-size: 28px;
  font-size: 2.8rem;
}
h2 {
  font-family: 'Noto Sans Japanese', serif;
  font-weight:900;
  font-size: 24px;
  font-size: 2.4rem;
  line-height: 0.8;
}
h2 small:before{
  content: "\A";
  white-space: pre;
}
h2 small{
  font-size: 12px;
  color: #1976D2;
  letter-spacing: 3px;
}
h3 {
  font-family: 'Noto Sans Japanese', serif;
  font-weight:900;
  font-size: 18px;
  font-size: 1.8rem;
}
h4 {
  font-family: 'Noto Sans Japanese', serif;
  font-weight:900;
  font-size: 12px;
  font-size: 1.2rem;
}
h5 {
  font-family: 'Noto Sans Japanese', serif;
  font-weight:900;
  font-size: 14px;
  font-size: 1.4rem;
}
h1,h2,h3,h4,h5,p,ul,ol,li{
  margin: 0;
  padding: 0;
}
article,aside,canvas,details,figcaption,figure,
header,footer,main,menu,nav,section,summary {
  display: block;
}
address{
  font-style: normal;
}

/*----------------------------------------------------------------*/
/*-----------------------------header-----------------------------*/
/*----------------------------------------------------------------*/
@media screen and (min-width:768px){
    /*　画面サイズが768px以上の場合読み込む　*/
    #header-wrap{
      width: 100%;
      height: 72px;
      background: #186E4B;
      -webkit-box-shadow: 0 0 5px 3px #3F3F3F;
      -moz-box-shadow: 0 0 5px 3px #3F3F3F;
      box-shadow: 0 0 5px 3px #3F3F3F;
    }
    #header{
      margin: 0 auto;
      width: 100%;
      max-width: 940px;
    }
    #header h2{
      margin: 16px 10px 0 10px;
      padding: 0 5px 5px 10px;
      width: 270px;
      color: #fff;
      font-size: 18px;
      line-height: 1.1;
      border-left: 2px solid #fff;
    }
    #header h1{
      padding-top: 16px;
      width: 211px;
    }
    #header-contact{
      margin-top: 10px;
      text-align: right;
    }
    #header-contact-text{
      font-family: 'Noto Sans Japanese', serif;
      font-weight:900;
      font-size: 16px;
      font-size: 1.6rem;
      color: #fff;
      line-height: 1.2;
    }
    #header-contact-tel,#header-contact-fax{
      font-family: 'Noto Sans Japanese', serif;
      font-weight:900;
      color: #fff;
      font-size: 18px;
      font-size: 1.8rem;
      line-height: 1;
    }
}
@media screen and (max-width:767px) { 
    /*　画面サイズが767px以下の場合読み込む　*/
    #header-wrap{
      background: #186E4B;
      height: auto;
      padding-bottom: 12px;
      -webkit-box-shadow: 0 0 5px 3px #3F3F3F;
      -moz-box-shadow: 0 0 5px 3px #3F3F3F;
      box-shadow: 0 0 5px 3px #3F3F3F;
      text-align: center;
    }
    #header{
      margin: 0 auto;
      width: auto;
    }
    #header h2{
      margin: 0;
      padding: 0;
      color: #fff;
      font-size: 18px;
      line-height: 1.1;
      border-left: 0;
    }
    #header h1 img{
      margin: 16px auto;
    }
    #header-contact{
      margin-top: 10px;
      text-align: center;
    }
    #header-contact-text{
      font-family: 'Noto Sans Japanese', serif;
      font-weight:900;
      font-size: 21px;
      font-size: 2.1rem;
      color: #fff;
      line-height: 1.2;
    }
    #header-contact-tel,#header-contact-fax{
      font-family: 'Noto Sans Japanese', serif;
      font-weight:900;
      color: #fff;
      font-size: 24px;
      font-size: 2.4rem;
      line-height: 1;
    }
}

#header-contact-tel:before{
  content: "TEL ";
  color: #fff;
}
#header-contact-fax:before{
  content: "FAX ";
  color: #fff;
}
#header-contact-tel a{
  color: #fff;
  text-decoration: none;
}

/*------------------------------main video-----------------------------*/
@media screen and (min-width:768px){
    /*　画面サイズが768px以上の場合読み込む　*/
    #main-video img{
      margin: 12px auto 0 auto;
      width: 940px;
    }
}

@media screen and (max-width:767px) { 
    /*　画面サイズが767px以下の場合読み込む　*/
    #main-video img{
      margin: 12px auto 0 auto;
      width: auto;
    }
}


/*------------------------------order-----------------------------*/
@media screen and (min-width:768px){
    /*　画面サイズが768px以上の場合読み込む　*/
    #order{
      margin: 0 auto;
      width: 100%;
      max-width: 940px;
    }
    #order h2{
      color: #186E4B;
      font-size: 36px;
      line-height: 1.1;
    }
    #order h2 span:before{
      content: "\A";
      white-space: pre;
    }
    #order h2 span{
      color: #6D3718;
    }
    #order img{
      margin-top: 12px;
      width: 496px;
    }
}

@media screen and (max-width:767px) { 
    /*　画面サイズが767px以下の場合読み込む　*/
    #order{
      margin: 0 auto;
      width: auto;
    }
    #order h2{
      color: #186E4B;
      font-size: 36px;
      line-height: 1.1;
      padding-bottom: 12px;
    }
    #order h2 span:before{
      content: "";
    }
    #order h2 span{
      color: #6D3718;
    }
    #order img{
      margin: 12px auto;
    }
}
@media screen and (max-width:480px) { 
    /*　画面サイズが767px以下の場合読み込む　*/
    #order h2{
      color: #186E4B;
      font-size: 28px;
      line-height: 1.1;
      padding-bottom: 12px;
    }
}
/*----------------------------------------------------------------*/
/*--------------------------description---------------------------*/
/*----------------------------------------------------------------*/
@media screen and (min-width:768px){
    /*　画面サイズが768px以上の場合読み込む　*/
    #description-wrap img{
      position: absolute;
      z-index: 1;
      width: 176px;
      height: 491px;
    }
    #description-text{
      position: relative;
      z-index: 0;
      margin: 6px 12px;
      padding: 12px;
      border: 2px solid #186E4B;
      background: #fff;
      max-width: 910px;
    }
}
@media screen and (max-width:767px) { 
    /*　画面サイズが767px以下の場合読み込む　*/
    #description-wrap img{
      position: absolute;
      z-index: 1;
    }
    #description-text{
      position: relative;
      z-index: 0;
      margin: 6px 12px;
      padding: 12px;
      border: 2px solid #186E4B;
      background: #fff;
      max-width: 100%;
    }
}

#description-wrap{
  max-width: 940px;
}
#description-wrap h2{
  margin: 6px 0;
  color: #186E4B;
  line-height: 1.2;
}
#description-wrap h3{
  margin-top: 14px;
  padding-left: 5px;
  font-size: 14px;
  font-size: 1.4rem;
  border-left: 5px solid #186E4B;
  line-height: 1.5;
}
#description-wrap h3:first-child{
  margin-top: 0;
}

#description-wrap p{
  margin-left: 10px;
}
#description-wrap ol{
  margin-left: 26px;
}


/*----------------------------------------------------------------*/
/*----------------------------details-----------------------------*/
/*----------------------------------------------------------------*/
#details{
  margin: 0 auto;
  max-width: 940px;
  position: relative;
  z-index: 0;
}
#details table{
  border-collapse: collapse;
  margin-top: 12px;
  width: 100%;
}
#details tbody{
  width: 940px;
}
#details td{
  background: #fff;
  border: 2px solid #186E4B;
  font-family: 'Noto Sans Japanese', serif;
  font-weight:900;
  text-align: center;
  padding: 3px;
}
.td20{ width: 20%; }
.td30{ width: 150px; }
.td50{ width: 50%; }
.td70{ width: 790px; }
.td100{ width: 940px; }
#details td.details-remark{
  text-align: left;
  vertical-align: top;
}
.details-remark p{
  margin: 0;
}

/*----------------------------------------------------------------*/
/*------------------------------form------------------------------*/
/*----------------------------------------------------------------*/
#formWrap{
  margin: 0 auto;
  width: 100%;
  max-width: 940px;
}
#formWrap h3{
  margin: 12px 0;
  color: #186E4B;
  font-size: 24px;
  font-size: 2.4rem;
  line-height: 1.1;
}
#formWrap table{
  margin-left: 0;
  width: 100%;
  max-width: 940px;
  border-collapse: collapse;
  background: #fff;
}
#formWrap th{
  padding: 3px 6px;
  min-width: 180px;
  font-family: 'Noto Sans Japanese', serif;
  font-weight:900;
  text-align: left;
  border: 2px solid #186E4B;
}
#formWrap td{
  padding: 3px 6px;
  font-family: 'Noto Sans Japanese', serif;
  font-weight:900;
  text-align: left;
  border: 2px solid #186E4B;
}
#formWrap input,textarea{
  border: 1px solid #ccc;
}
#formWrap textarea{
  width: 100%;
}
#mail-button{
  margin-top: 12px;
  width: 350px;
}
#mail-button input{
  margin-left: 24px;
  width: 7em;
  border: 2px solid #186E4B;
  background: #fff;
  font-family: 'Noto Sans Japanese', serif;
  font-weight:900;
}
#mail-button input:first-child{
  margin-left: 0;
}
#mail-button input:hover{
  background: #186E4B;
  color: #fff;
  font-weight:600;
}

/*----------------------------------------------------------------*/
/*-----------------------------footer-----------------------------*/
/*----------------------------------------------------------------*/
@media screen and (min-width:768px){
    /*　画面サイズが768px以上の場合読み込む　*/
    #footer-contact{
      line-height: 1.1;
      text-align: right;
    }
    #footer-agent{
      text-align: right;
    }
    #footer-agent img{
      position: absolute;
      z-index: 1;
      right: 24px;
      margin-top: -88px;
    }
    #footer-contact-text{
      font-family: 'Noto Sans Japanese', serif;
      font-weight:900;
      font-size: 16px;
      font-size: 1.6rem;
      color: #fff;
      line-height: 1.2;
    }
    #footer-contact-tel,#footer-contact-fax{
      font-family: 'Noto Sans Japanese', serif;
      font-weight:900;
      color: #fff;
      font-size: 18px;
      font-size: 1.8rem;
      line-height: 1;
    }
    #footer h2{
      font-size: 18px;
      font-size: 1.8rem;
      line-height: 1.3;
    }
}
@media screen and (max-width:767px) { 
    /*　画面サイズが767px以下の場合読み込む　*/
    #footer-contact{
      line-height: 1.1;
      text-align: left;
    }
    #footer-agent{
      text-align: right;
    }
    #footer-agent img{
      position: relative;
      max-width: 100%;
      z-index: 0;
      right: auto;
      margin-top: 0px;
    }
    #footer h2{
      font-size: 18px;
      font-size: 1.8rem;
      line-height: 1.3;
    }
}
@media screen and (max-width:480px) { 
    /*　画面サイズが767px以下の場合読み込む　*/
    #footer h2{
      font-size: 14px;
      font-size: 1.4rem;
      line-height: 1.3;
    }
    #footer-contact-text{
      font-family: 'Noto Sans Japanese', serif;
      font-weight:900;
      font-size: 14px;
      font-size: 1.4rem;
      color: #fff;
      line-height: 1.2;
    }
    #footer-contact-tel,#footer-contact-fax{
      font-family: 'Noto Sans Japanese', serif;
      font-weight:900;
      color: #fff;
      font-size: 14px;
      font-size: 1.4rem;
      line-height: 1;
    }
}
#footer-wrap{
  position: relative;
  background: #186E4B;
}
#footer{
  margin: 0 auto;
  padding: 12px 0 6px 0;
  max-width: 940px;
  font-family: 'Noto Sans Japanese', serif;
  font-weight: 900;
  color: #fff;
}

#footer-enterprise{
  margin-top: 12px;
  font-size: 14px;
  line-height: 1.4;
}
#footer-content{
}


#footer-contact a{
  color: #fff;
  text-decoration: none;
}
#footer-contact-tel:before{
  content: "TEL ";
  color: #fff;
}
#footer-contact-fax:before{
  content: "FAX ";
  color: #fff;
}
#footer-cover{
  position: absolute;
  z-index: -1;
  width: 100%;
  height: 88px;
  bottom: 0;
  background: #186E4B;
}

/*----------------------------------------------------------------*/
/*---------------------------clear fix----------------------------*/
/*----------------------------------------------------------------*/
.cf:before,
.cf:after {
    content:"";
    display:table;
}
.cf:after {
    clear:both;
}
/* For IE 6/7 (trigger hasLayout) */
.cf {
    zoom:1;
}