/* common css */
html { font-size: 100%; line-height: 1.5; background: #e6e5e5; color: #3c3a39; }
body { min-width: 1000px; }
a {
  color: #0c324a; text-decoration:underline;
  &:hover {
    text-decoration: none;
    img { opacity: 0.6; }
  }
}
.clearfix {
  min-height: 1px;
  &:after { content: "."; display: block; clear: both; height: 0; visibility: hidden; }
}
* html .clearfix { height: 1px; /*¥*//*/ height: auto; overflow: hidden; /**/ }
.mincho { font-family: "Times New Roman", "游明朝", YuMincho, "Hiragino Mincho ProN", Meiryo, serif; }
ul.notice li { text-indent: -1em;  margin-left: 1em; }
ul.notice li:before { content: "※"; }
ul.circle li { text-indent: -1em;  margin-left: 1em; }
ul.circle li:before { content: "◯"; }

/* common less */
.margin_auto (@top:0, @bottom:0) { margin: @top auto @bottom; }
.container_width { width: 1000px; }
@color_green: #8dba3a;
@color_black: #121212;
@url_images: '../images/';

/* header */
#globalHeader { padding: 60px 0 30px; background: #202020;}
#globalHeaderContainer { .margin_auto(); .container_width(); position: relative; z-index: 10; }
#globalHeaderLogo { margin-top: 10px; width: 86px; margin-right: 44px; float: left; }
#globalHeaderRight {
  width: 870px; float: left;
  & > p {
    float: left; width: 449px; margin-right: 70px; line-height: 24px;
    img { margin-right: 15px; width: 270px; float: left; }
    strong { font-weight: normal; float: left; padding-top: 2px; color: #a1a1a1; font-size: 13px; }
  }
  & > a { float: left; margin-right: 30px; }
}
#globalNav {
  @height: 38px;
  width: 580px; height: @height; float: left; margin-top: 30px;
  ul { position: relative; }
  ul li {
    float: left; border-right: 1px solid #8d8d8d;
    a { height: @height; display: block; }
  }
  @padding_left: 21px;
  @padding_right: 21px;
  ul li#gn1 a { padding: 0 @padding_left 0 2px; }
  ul li#gn2 a { padding: 0 @padding_left 0 @padding_right; }
  ul li#gn3 a { padding: 0 @padding_left 0 @padding_right; }
  ul li#gn4 a { padding: 0 @padding_left 0 @padding_right; }
  ul li#gn5 {
    border-right: none;
    a { padding: 0 @padding_left 0 19px; }
  }
  ul li#productsHover {
    padding-top: 40px; position: absolute; z-index: 5; top: 12px; left: 118px; border-right: none;
    ul {
       width: 145px; background: #fdfdfd url('@{url_images}common/txt_global_navi_products_menu.png') center 10px no-repeat; opacity: 0.9; padding: 30px 0 20px; color: #202020; float: none !important; border-right: none !important;
      li {
        color: #202020; float: none; border-right: none;
        a { text-decoration: none; font-size: 18px; background: url('@{url_images}common/icon_global_navi_arrow.png') 20px center no-repeat; line-height: 18px; height: auto; padding: 10px 0 10px 35px; }
      }
    }
  }
}
#globalBtnOrder { position: absolute; top: 70px; right: 80px; z-index: 10; }
.page #globalBtnOrder { top: 63px; }
.btnFixed { position: fixed !important; top: auto !important; bottom: 50px !important; right: 50px !important; }

/* content common */
#content { .container_width(); .margin_auto(); text-align: left; min-height: 150px; background: #e6e5e5; position: relative; z-index: 5; }
.pager a, .pager b { padding: 5px; margin-right: 5px; }
.pager a { text-decoration: none; border: 1px solid #393939; }

/* footer */
#globalFooter { margin-top: -150px; padding-top: 240px; padding-bottom: 60px; background: #494949; min-width: 1000px; }
#globalFooterContainer { margin: 0 auto; .container_width(); color: #fff; overflow: hidden; }
#globalFooterContact {
  overflow: hidden; margin-bottom: 60px;
  h3 {
    margin-bottom: 30px; font-size: 16px; font-weight: normal; line-height: 32px;
    img { margin-right: 40px; line-height: 28px; vertical-align: top; }
  }
  div.left {
    width: 210px; padding: 25px 25px 30px; float: left; margin-right: 40px; overflow: hidden; border-radius: 10px; -webkit-border-radius: 10px; -moz-border-radius: 10px; background: @color_green;
    p {
      font-size: 14px; margin-bottom: 30px;
      &:nth-child(2) { margin-bottom: 15px; text-align: center; }
    }
    ul li {
      width: 67px; float: left; background: #fff; text-align: center;
      .common { margin-right: 4px; }
      &:nth-child(1) { .common(); }
      &:nth-child(2) { .common(); }
      a { color: @color_green; text-decoration: none; font-size: 14px; }
    }
  }
  div.center { width: 260px; float: left; }
  div.right { float: right; width: 420px; }
  #msgError { border: 1px solid red; padding: 10px; margin-left: 300px; margin-bottom: 20px; background: #fff; color: red; }
  form {
    .common { font-size: 14px; border: none; padding-left: 5px; }
    .margin_bottom { margin-bottom: 30px; }
    input {
      width: 255px; padding: 5px 0 5px 5px; height: 24px; margin-bottom: 10px; .common();
      &:nth-child(2) { .margin_bottom(); }
      &:nth-child(4) { .margin_bottom(); }
      &:nth-child(5) { margin-bottom: 0; }
    }
    textarea { width: 416px; height: 182px; padding-left: 5px;border: none; .margin_bottom(); }
    #globalFooterContactSubmit { background: @color_green; color: #fff; height: 34px; width: 100px; float: right; margin: 0; padding: 0; }
  }
}
#globalFooterInfo {
  width: 260px; float: left; margin-right: 40px; margin-top: 40px;
  #globalFooterInfoLogo { width: 154px; height: 40px; display: block; margin-bottom: 20px; }
  #globalFooterInfoTitle { font-size: 14px; color: #7c7c7c; margin-bottom: 20px; }
  #globalFooterInfoAddress { font-size: 14px; font-style: normal; margin-bottom: 5px; }
  #globalFooterInfoTel { font-size: 14px; margin-bottom: 5px; }
  #globalFooterInfoEmail { font-size: 14px; margin-bottom: 20px; }
  #globalFooterInfoCopyright { font-size: 10px; }
}
#globalFooterSitemap {
  width: 700px; float: left;
  div {
    width: 175px; float: left;
    &:nth-child(1) { width: 240px; }
    &:nth-child(4) { width: 110px; }
    &:first-child {
      ul {
        &:first-child { margin-bottom: 34px; margin-top: -5px; }
      }
    }
    ul {
      li {
        margin-bottom: 10px;
        a { font-size: 14px; font-weight: normal; color: #fff; text-decoration: none; }
      }
    }
    h4 { border-left: 3px solid #d3d3d3; line-height: 80%; padding-left: 10px; font-size: 14px; font-weight: normal; margin-bottom: 30px; color: #d3d3d3; }
  }
}

/* home */
#home {
  background: #7c7c7c;
  #content { margin-top: 15px; }
  #slider {
    .bx-viewport {
      box-shadow: none; border: none; left: 0;
    }
    .bx-controls {
      .bx-prev { background: url(../images/home/btn_bxslider_prev.png) no-repeat; width: 48px; height: 61px; }
      .bx-next { background: url(../images/home/btn_bxslider_next.png) no-repeat; width: 48px; height: 61px; }
    }
/*
    overflow: hidden;
    .common { height: 520px; float: left; }
    ul.left { width: 710px; .common(); }
    ul.right { width: 290px; .common(); }
*/
  }
  #products {
    overflow: hidden;
    @height: 792px;
    div.left {
      position: relative; display: inline-block; width: 250px;	height: @height; background: @color_black;	z-index: 10; float: left;
      &:before { content: ""; position: absolute; top: 50%; right: -45px; margin-top: -23px; display: block;	width: 0px;	height: 0px; border-style: solid;	border-width: 23px 0 23px 45px;	border-color: transparent transparent transparent @color_black;z-index: 0; }
      & > h2 { position: absolute; width: 170px; height: 66px; top: 305px; left: 40px;  }
      & > a { position: absolute; width: 170px; height: 23px; top: 415px; left: 40px;  }
    }
    div.right {
      width: 750px; height: @height; background: #f8efe1; float: right;
      & > p { margin: 30px 0 0 30px; font-size: 14px; line-height: 22px; }
      ul {
        padding-top: 30px;
        li {
          width: 240px; height: 314px; float: left; font-size: 14px; margin-bottom: 20px; color: #fff;
          .common { margin-left: 15px; }
          &:nth-child(1) { .common(); }
          &:nth-child(4) { .common(); }
          a { color: #fff; }
          .ch_hover p { padding: 10px; }
        }
      }
    }
  }
  #news {
    width: 625px; height: 350px; background: @color_green; float: left;
    h2 { width: 250px; text-align: center; float: left; padding-top: 144px; }
    #facebook { padding-top: 20px; }
  }
  #works {
    width: 375px; height: 330px; background: #d9cc3c; padding-top: 20px; float: right;
    a.img { width: 336px; height: 246px; overflow: hidden; display: block; margin: 0 0 20px 20px; }
    p {
      margin-left: 20px;
      span { margin-right: 10px; }
    }
  }
  #brand {
    .container_width(); height: 454px; clear: both;
    h2 { background: @color_black; width: 250px; height: 263px; text-align: center; float: left; padding-top: 191px; }
    div.right {
      width: 750px; height: 454px; float: right;
      ul {
        li { float: left; }
      }
    }
  }
}

/* page */
.page {
  #mainTitle {
    #mainTitleContainer {
      .container_width(); .margin_auto();
      .common { color: #fff; font-weight: normal; letter-spacing: 3px; line-height: 100%; }
      h1 { font-size: 26px; margin-bottom: 20px; .common(); }
      p { font-size: 22px; .common(); }
    }
  }
  #content { padding-bottom: 100px; padding-top: 120px; }
  #globalFooter { margin-top: 0px; padding-top: 50px; }
}

/* works */
#works {
  #mainTitle {
    background: #5f8a88;
    #mainTitleContainer {
      height: 110px; padding-top: 40px; background: url('@{url_images}works/txt_main_title.png') no-repeat center center ;
    }
  }
  #content {
    #columnRight {
      width: 770px; float: right;
      & > p { font-size: 22px; margin-bottom: 50px; }
      ul li {
        width: 240px; float: left; margin-right: 25px; margin-bottom: 50px; font-size: 16px;
        &:nth-child(3n) { margin-right: 0; }
        img { margin-bottom: 10px; }
        }
      
    }
    #columnLeft {
      width: 174px; float: left; padding-top: 83px;
      .common { border: 2px solid #5f8a88; width: 170px; text-align: center; padding: 30px 0; }
      h3 {
        .common(); border-bottom: none;
        img:first-child { margin-bottom: 10px; }
      }
      ul {
        .common(); margin-bottom: 40px;
        li {
          margin-bottom: 40px;
          &:last-child { margin-bottom: 0; }
        }
      }
    }
  }
}

/* about */
#about {
  #mainTitle {
    background: #8dba3a;
    #mainTitleContainer {
      height: 88px; padding-top: 62px;  background: url('@{url_images}about/txt_main_title.png') no-repeat center center ;
    }
  }
  #content {
    img.main { margin-bottom: 50px; }
    h2 { margin-bottom: 30px; }
    img.article {  }
    .article {
      border-top: 1px solid #000; padding-top: 20px; margin-bottom: 100px;
      img:first-child { margin-right: 36px; }
    }
    table {
      font-size: 16px;
      th { font-weight: normal; width: 120px; padding: 3px 0; vertical-align: top; }
      td { padding: 3px 0; vertical-align: top; }
      .email { padding-bottom: 30px; }
    }
  }
}

/* price */
#price {
  @color_main: #c37066;
  #mainTitle {
    background: @color_main;
    #mainTitleContainer {
      height: 88px; padding-top: 62px;  background: url('@{url_images}price/txt_main_title.png') no-repeat center center ;
    }
  }
  #content {
    h2 { margin-bottom: 25px; }
    section { margin-bottom: 50px; }
    #washi {
      .left {
        width: 281px; float: left; margin-right: 60px;
        img { margin-bottom: 15px; }
        p { font-size: 22px; font-weight: bold; }
      }
      .right {
        width: 659px; float: left;
        & > img {
          float: left; margin-right: 10px;
          &+p { line-height: 135%; }
        }
        dl {
          font-size: 18px; width: 520px; text-align: right; padding-top: 18px; overflow: hidden; margin-bottom: 10px;
          dt { width: 120px; float: left; margin-bottom: 2px; }
          dd { width: 100px; padding-right: 40px; float: left; margin: 0 0 2px; color: @color_main; }
        }
        p.notice { font-size: 16px; font-weight: bold; margin-left: 27px; }
      }
    }
    #denpo { margin-right: 0px !important; }
    #kiji, #mochikomi, #denpo {
      width: 280px; float: left; margin-right: 80px;
      h2 img { margin-bottom: 0px !important; }
      img { margin-bottom: 15px; }
    }
    #tokudai {
      div { float: left; }
      .col1 {
        width: 113px; padding-top: 16px; margin-right: 30px;
        img:first-child { margin-bottom: 60px; }
      }
      .col2 {
        width: 197px; margin-right: 45px;
        img {
          margin-bottom: 12px;
          &:nth-child(2) { margin-bottom: 30px; }
          &:nth-child(4) { margin-bottom: 0px; }
        }
      }
      .col3 {
        width: 40px; padding-top: 83px; margin-right: 45px;
      }
      .col4 {
        width: 185px;
        img { margin-bottom: 35px; }
      }
    }
    #option {
      margin-bottom: 100px;
      h2 { text-align: center; }
      table#optionList {
        margin-bottom: 50px;
        tr { 
          &:nth-child(2) td:first-child { padding-left: 0; }
          &:nth-child(3) td { padding: 10px 0 40px 35px; }
          &:nth-child(4) th:last-child { vertical-align: middle; }
          &:nth-child(6) td { padding-top: 10px; }
          th {
            font-size: 20px; color: #5b5b5b; font-weight: normal; text-align: center; padding-left: 35px; padding-bottom: 5px; vertical-align: top;
            &.col1 { width: 170px; padding-left: 0; }
            &.col2 { width: 242px; }
            &.col3 { width: 242px; }
            &.col4 { width: 242px; }
          }
          td {
            padding-left: 35px; vertical-align: top; font-size: 16px; color: #988a47; font-weight: bold; text-align: center;
            img { vertical-align: top; }
          }
        }
      }
      div#optionSupport {
        > img { width: 170px; float: left; margin-right: 30px; }
        table {
          width: 800px; border: 1px solid #474747;
          .common { border: 1px solid #474747; padding: 16px 0 15px; text-align: center; color: #474747; font-size: 18px; }
          th { background: #fff;  font-weight: normal; .common(); }
          td { background: #e1e0e0; font-weight: normal; .common(); }
        }
      }
    }
    #postage {
      h2 {
        font-size: 26px; color: @color_main; text-align: center; line-height: 46px;
        img { margin-right: 30px; }
      }
      p {
        text-align: center;
        &:nth-child(2) {
          font-size: 20px; margin-bottom: 5px;
          strong { margin-right: 10px; }
        }
        &:nth-child(3) { color: @color_main; font-size: 21px; margin-bottom: 10px; }
        &:nth-child(4) { font-size: 18px; }
      }
    }
  }
}

/* products */
#products {
  #mainTitle {
    background: #7c6856;
    #mainTitleContainer {
      height: 110px; padding-top: 40px; background: url('@{url_images}products/txt_main_title.png') no-repeat center center ;
    }
  }
  #pageWashiContainer { background: #e6e5e5 url('@{url_images}products/img_products_washi_bg.gif') repeat-y center; height: 500px; }
  #pageTokudaiContainer { background: #e6e5e5 url('@{url_images}products/img_products_tokudai_bg.gif') repeat-y center; height: 500px; }
  #pageMochikomiContainer { background: #e6e5e5 url('@{url_images}products/img_products_mochikomi_bg.gif') repeat-y center; height: 500px; }
  #pageKijiContainer { background: #e6e5e5 url('@{url_images}products/img_products_kiji_bg.gif') repeat-y center; height: 500px; }
  #pageDenpouContainer { background: #e6e5e5 url('@{url_images}products/img_products_denpou_bg.gif') repeat-y center; height: 500px; }
  .pageContentTop {
    .content {
     width: 800px; padding-top: 40px;
      & > p { font-size: 18px; color: #fff; margin-left: 50px; margin-bottom: 40px; }
      img.imgMain { margin-left: -180px; width: 622px; float: left; }
      div.right {
        float: right; width: 262px;
        img { margin-bottom: 10px; }
      }
    }
    .side { padding-top: 40px; }
  }
  .commonDL {
    margin: 20px 0;
    dt {
      width: auto; float: left; margin-left: 30px;
      &:first-child { margin-left: 0; }
    }
    dd { width: auto; float: left; font-size: 20px; line-height: 37px; margin-left: 20px; }
  }
  #pageContainer {
    background: #e6e5e5 url('@{url_images}products/img_products_bg.gif') repeat-y center;
    .content {
      width: 750px; padding-top: 90px; padding-left: 50px; padding-bottom: 100px;
      h2 { margin-bottom: 40px; text-align: center; }
      #price {
        margin-bottom: 120px;
        .left {
          width: 550px; float: left; margin-bottom: 30px;
          img.price { margin-bottom: 30px; }
          p {
            font-size: 18px;
            strong { font-size: 22px; }
          }
          dl { .commonDL(); }
          ul.disc {
            margin-bottom: 30px;
            li { list-style-type: disc; list-style-position: inside; font-size: 18px; }
          }
          #washiSize { width: 779px; max-width: 779px; margin: 0 0 30px -30px; }
        }
        .right {
          width: 200px; float: right;
          a { width: 200px; height: 52px; display: block; margin-bottom: 30px; }
        }
        #use {
          clear: both; border: 2px solid #000; padding: 20px; min-height: 88px;
          ul {
            width: 590px; float: left;
            li { list-style-type: disc; list-style-position: inside; float: left; margin-right: 20px; line-height: 180%; }
          }
          img { float: right; padding-top: 40px; }
        }
      }
      #works {
        margin-bottom: 100px;
        h2 {
          font-size: 18px; line-height: 100%; margin-bottom: 20px;
          &:before { content: ''; width: 67px; height: 17px; background: url(../images/products/txt_works.gif) no-repeat; display: inline-block; margin-right: 5px; line-height: inherit; }
          a {
            font-size: 16px; text-decoration: none;
          &:before { content: ''; width: 17px; height: 17px; background: url(../images/products/gly_works_play.gif) no-repeat; display: inline-block; margin: 0 5px 0 25px; line-height: inherit; vertical-align: -2px; }
          }
        }
        .bx-wrapper {
          .bx-viewport { box-shadow: none; border: none; background: none; }
        }
        .bx-controls {
          .bx-prev { content: ''; left: -60px; width: 32px; height: 43px; display: inline-block; background: url(../images/products/btn_bxslider_prev.gif) no-repeat; }
          .bx-next { content: ''; right: -60px; width: 32px; height: 43px; display: inline-block; background: url(../images/products/btn_bxslider_next.gif) no-repeat; }
        }
      }
      #photoProcessing {
        margin-bottom: 90px;
        ul {
          margin-bottom: 40px;
          li { float: left; padding: 0 25px; font-size: 18px; text-align: center; font-weight: bold; }
        }
        & > img { margin-bottom: 40px; }
        p { text-align: center; font-size: 20px; font-weight: bold; }
      }
      #japanesePattern, #backgroundColor {
        text-align: center; margin-bottom: 90px;
        & > img { margin-bottom: 40px; }
        p { text-align: center; font-size: 20px; font-weight: bold; margin-bottom: 10px; }
      }
      #otherServices {
        margin-bottom: 90px;
        div {
          width: 355px; float: left; margin-left: 20px;
          &.one { margin-left: 200px; }
          img { float: left; width: 142px; margin-right: 20px; }
          p {
            font-size: 18px;
            &:nth-child(2) { margin-bottom: 10px; }
            &:nth-child(3) { margin-bottom: 10px; }
            strong { font-size: 20px; }
          }
        }
      }
      #option {
        margin-bottom: 90px;
        ul {
          li {
            width: 233px; float: left; text-align: center; margin-bottom: 30px; font-size: 20px; font-weight: normal; margin-right: 25px; color: #5c5b5b;
            &:nth-child(3n) { margin-right: 0; }
            &.btn { padding-top: 30px; }
            img { margin-bottom: 20px; }
          }
        }
      }
      #aboutKiji {
        margin-bottom: 90px;
        h2 + img { margin-left: 45px; }
        & > img { float: left; margin-left: 20px; margin-bottom: 30px; }
        & > img + p { clear: both; text-align: center; font-size: 18px; margin-bottom: 40px; }
        dl { clear: both; padding-left: 30px; .commonDL(); margin-bottom: 30px; }
        div.notice {
          border: 2px solid #e63600; padding: 10px 0 10px 30px; font-size: 18px; font-weight: bold; margin-bottom: 20px;
          span { margin-right: 30px; }
        }
        p {
          font-size: 18px;
          span { color: #e63600; font-weight: bold; }
        }
      }
      #keystone {
        margin-bottom: 90px;
        ul {
          margin-bottom: 30px;
          li {
            float: left; font-size: 20px; text-align: center; font-weight: bold;
            &:first-child { margin-left: 40px; }
            &:last-child { margin-left: 30px; }
            img { margin-bottom: 10px; }
          }
        }
        ul + p { font-size: 20px !important; margin-bottom: 8px; }
        ul ~ p { font-size: 20px; text-align: center; }
      }
      #sameKiji {
        margin-bottom: 90px;
        & > img { margin-bottom: 40px; margin-left: 45px; }
        img + p { font-size: 20px !important; margin-bottom: 8px; }
        img ~ p { font-size: 20px; text-align: center; }
      }
      #tokudaiGoldWhite {
        margin-bottom: 90px;
        & > img { float: left; margin-left: 20px; margin-bottom: 30px; }
        h2 + img { margin-left: 45px; }
        p { clear: both; font-size: 20px; text-align: center; }
      }
      #optionTable {
        p { font-size: 18px; margin: 0 0 60px 95px; }
        table {
          width: 750px; border: 1px solid #474747; margin-bottom: 30px;
          .common { border: 1px solid #474747; padding: 16px 0 15px; text-align: center; color: #474747; font-size: 18px; }
          th { background: #fff;  font-weight: normal; .common(); }
          td { background: #e1e0e0; font-weight: normal; .common(); }
        }
        ul { margin: 0 0 130px 185px; }
      }
      #goldSilverPrint {
        margin-bottom: 105px;
        #goldSilverImg {
          margin-bottom: 40px;
          img {
            float: left;
            &:first-child { margin-right: 5px; }
          }
        }
        #goldSilverPercent { text-align: center; margin-bottom: 50px; }
        #goldSilverPrice { text-align: center; margin-bottom: 20px; }
        p { font-size: 18px; margin-left: 30px; }
      }
      #slotting {
        margin-bottom: 110px;
        & > img { margin-bottom: 20px; }
        #slottingColor { margin-bottom: 40px; }
        #slottingPrice { text-align: center; margin-bottom: 20px; }
        p { font-size: 18px; margin-left: 10px; }
      }
      #blackBone {
        margin-bottom: 110px;
        & > img { margin-bottom: 40px; }
        #blackBonePrice { text-align: center; margin-bottom: 20px; }
        p { font-size: 18px; margin-left: 100px; }
      }
      #makeupBox {
        margin-bottom: 100px;
        & > img { margin-bottom: 20px; }
        #blackBonePrice { text-align: center; margin-bottom: 20px; }
        #makeupBoxImg {
          margin-bottom: 30px;
          img {
            float: left; margin-left: 5px;
            &:first-child { margin-left: 0; }
          }
        }
        p { font-size: 18px; margin-left: 30px; margin-bottom: 10px; }
        p.notice { font-size: 16px; }
      }
      #howtoOrder2 { text-align: center; margin-bottom: 100px; }
    }
    .side {
      padding-top: 90px;
      .common { border: 2px solid #fff; width: 170px; text-align: center; padding: 30px 0; }
      h3 {
        .common(); border-bottom: none;
        img:first-child { margin-bottom: 10px; }
      }
      ul {
        .common(); margin-bottom: 40px;
        li {
          margin-bottom: 40px;
          &:last-child { margin-bottom: 0; }
        }
      }
    }
    .optionSide {
      & > img { margin: 0 0 500px 36px; }
    }
  }
  .pageWrapper {
    .container_width(); .margin_auto(); position: relative; z-index: 5;
    .content {
      float: right;
    }
    .side {
      width: 200px; float: left;
    }
  }
}

/* qa */
#qa {
  #mainTitle {
    background: #8dba3a;
    #mainTitleContainer {
      height: 88px; padding-top: 62px;  /* background: url('@{url_images}about/txt_main_title.png') no-repeat center center ; */
    }
  }
}

/* qa */
#howto {
  background: #464545;
  #mainTitle {
    background: #202020;
    #mainTitleContainer {
      height: 88px; padding-top: 62px;  background: url('@{url_images}howto/txt_main_title.png') no-repeat center center ;
    }
  }
  .detailTitle {
    #mainTitleContainer {
      padding-top: 45px !important; height: 105px !important;
      h1 { font-size: 22px !important; }
      p { font-size: 18px !important; }
    }
  }
  
  #content {
    background: #464545; color: #fff; padding-top: 55px;
    & > p { text-align: center; font-size: 18px; margin-bottom: 70px; }
    div.link {
      width: 690px; margin: 0 auto 90px;
      & > img { width: 148px; float: left; margin-right: 32px; }
      p.productsName {
        width: 210px; float: left; padding-top: 15px; font-size: 18px;
        span { display: block; font-size: 12px; padding-top: 5px; }
      }
      & > a {
        float: left; margin-top: 15px;
        &.btnOrder { margin-right: 21px; }
      }
      div.ai {
        clear: both; padding-top: 30px;
        a { float: right; }
        p { float: right; font-size: 14px; line-height: 35px; margin-right: 10px; }
      }
    }
    #howtoNav {
      margin-bottom: 50px; width: 1000px; background: #464545; padding-top: 10px;
      li {
        a { height: 31px; float: left; font-size: 14px; color: #fff; text-decoration: none; padding-top: 14px; border-bottom: 7px solid #858383; margin-left: 3px; }
        &:first-child a { margin-left: 0px; }
        &:last-child a { margin-left: 5px; }
        &#hn1 a { background: url('@{url_images}howto/txt_nav_step1.png') no-repeat; padding-left: 47px; width: 93px; }
        &#hn2 a { background: url('@{url_images}howto/txt_nav_step2.png') no-repeat; padding-left: 52px; width: 88px; }
        &#hn3 a { background: url('@{url_images}howto/txt_nav_step3.png') no-repeat; padding-left: 52px; width: 88px; }
        &#hn4 a { background: url('@{url_images}howto/txt_nav_step4.png') no-repeat; padding-left: 44px; width: 96px; }
        &#hn5 a { background: url('@{url_images}howto/txt_nav_step5.png') no-repeat; padding-left: 52px; width: 88px; }
        &#hn6 a { background: url('@{url_images}howto/txt_nav_step6.png') no-repeat; padding-left: 38px; width: 102px; }
        &#hn7 a { background: url('@{url_images}howto/txt_nav_step7.png') no-repeat; padding-left: 49px; width: 91px; }
      }
    }
    .navFixed {
        position: fixed;
        top: 0;
        z-index: 1;
    }
    section {
      border-top: 2px solid #858383; clear: both; position: relative; padding-top: 20px; margin-bottom: 70px;
      &:after { content:''; display:table; clear:both; }
      &:before { content: ""; position: absolute; top: -27px; display: block;	width: 0px;	height: 0px; border-style: solid;	border-width: 0 15px 25px 15px;	border-color: transparent transparent #858383 transparent ; z-index: 0; }
      &#step1:before { left: 55px; }
      &#step2:before { left: 197px; }
      &#step3:before { left: 339px; }
      &#step4:before { left: 481px; }
      &#step5:before { left: 623px; }
      &#step6:before { left: 765px; }
      &#step7:before { left: 907px; }
      & > img { float: left; width: 420px; margin-right: 25px; }
      & > .left {
        float: left; width: 420px; margin-right: 25px;
      }
      & > .right {
        float: left; width: 555px;
        dl.download {
          dt { width: 60px; float: left; }
        }
        ul.disc {
          list-style-type: disc; list-style-position: inside;
        }
        ul.notice {
          font-size: 14px;
        }
      }
    }
    
    .howtoSize {
      & > .right {
        .download { margin-bottom: 45px; }
        p { margin-bottom: 20px; }
      }
    }
    .howtoBackground {
      p { margin-bottom: 20px; }
      a { margin-bottom: 35px; display: block; width: 185px; height: 35px; }
    }
    .howtoDesign {
      p:first-child { margin-bottom: 50px; }
      div { margin-bottom: 35px; }
      p.notice { font-size: 14px; }
    }
    .howtoPhoto {
      .right {
        p:nth-of-type(1) { margin-bottom: 50px; }
        p:nth-of-type(2) { margin-bottom: 10px; }
      }
    }
    .howtoOption {
      p:first-child { margin-bottom: 25px; }
      a { margin-bottom: 35px; display: block; width: 185px; height: 35px; }
    }
    .howtoCustomer {
      ul.notice {
        margin-bottom: 5px;
      }
      .right {
        p:nth-of-type(1) { line-height: 180%; margin-bottom: 5px; } 
        p:nth-of-type(2) { margin-bottom: 25px; } 
        p:nth-of-type(3) { margin-bottom: 15px; } 
      }
    }
    
    #howtoKiji,
    #howtoWashi {
      #step1 { .howtoSize(); }
      #step3 { .howtoBackground(); }
      #step4 { .howtoDesign(); }
      #step5 { .howtoPhoto(); }
      #step6 { .howtoOption(); }
      #step7 { .howtoCustomer(); }
    }
    #howtoMochikomi {
      #step1 { .howtoSize(); }
      #step3 { .howtoBackground(); ul { margin-bottom: 30px; } }
      #step4 { .howtoDesign(); p:first-child { margin-bottom: 30px; } }
      #step5 { .howtoOption(); }
      #step6 { .howtoCustomer(); }
    }
    #howtoTokudai {
      #step1 { .howtoSize(); ul { margin-bottom: 40px; } }
      #step3 {
        .left {
          & > img:first-child { margin-bottom: 10px; }
        } 
        .right {
          p:nth-child(1) { margin-bottom: 30px; }
          p:nth-child(2) { margin-bottom: 15px; }
          a { margin-bottom: 50px; display: block; width: 185px; height: 35px; }
          p:nth-child(4) { margin-bottom: 30px; }
        }
      }
      #step4 { .howtoCustomer(); }
    }
    #howtoDenpou {
      #step1 { .howtoSize(); }
      #step3 { .howtoBackground(); }
      #step4 {
        .right {
          p:nth-child(1) { margin-bottom: 30px; }
          p:nth-child(2) { margin-bottom: 30px; }
          p:nth-child(3) { margin-bottom: 15px; }
          a { margin-bottom: 30px; display: block; width: 185px; height: 35px; }
        }
      }
      #step5 { .howtoOption(); }
      #step6 { .howtoCustomer(); }
    }
  }
}
/* 404 */
#notfound {
  #mainTitle {
    background: #8dba3a;
    #mainTitleContainer {
      height: 88px; padding-top: 62px;  /* background: url('@{url_images}about/txt_main_title.png') no-repeat center center ; */
    }
  }
}

/* qa */
#qa {
  #mainTitle {
    background: #9ba390;
    #mainTitleContainer {
      height: 88px; padding-top: 62px;  background: url('@{url_images}qa/txt_main_title.png') no-repeat center center ;
    }
  }
  #content {
    & > p { text-align: center; font-size: 18px; margin-bottom: 40px; }
    section {
      overflow: hidden; margin-bottom: 50px;
      &#washi div { background: #ce4027; }
      &#kiji div { background: #f1be00; }
      &#mochikomi div { background: #89b89a; }
      &#tokudai div { background: #2d7aaf; }
      &#denpou div { background: #ad9cd0; }
      & > div {
        width: 712px; height: 30px; margin: 0 auto 20px; padding: 9px; overflow: hidden;
        h2 { float: left; width: 550px; font-size: 18px; color: #fff; font-weight: normal; }
        a {
          float: right; width: 120px; text-align: right; font-size: 14px; color: #fff; text-decoration: none; line-height: 27px;
          img { margin-left: 10px; }
        }
      }
      dl {
        width: 730px; margin: 0 auto;
        dt { font-size: 18px; font-weight: bold; padding: 23px 0 23px 68px; background: #fff url('@{url_images}qa/txt_q.gif') 20px 20px no-repeat; }
        dd {
          min-height: 48px; font-size: 16px; margin: 0 0 35px; padding: 23px 0 0 68px; background: url('@{url_images}qa/txt_a.gif') 20px 32px no-repeat;
          &:last-child { margin-bottom: 0; }
        }
      }
    }
  }
}

/* tokushou */
#tokushou {
  #mainTitle {
    background: #a5a5a4;
    #mainTitleContainer {
      height: 88px; padding-top: 62px;
    }
  }
  #content {
    width: 770px;
    table {
      font-size: 14px; margin-bottom: 70px;
      th { width: 130px; padding: 5px 0; }
      td { padding: 5px 0; }
    }
    section {
      margin-bottom: 30px; font-size: 14px;
      h2 { font-size: 16px; margin-bottom: 10px; }
      p { font-size: 14px; }
      &#cancel {
        p {
          &:nth-child(2) { margin-bottom: 10px; }
        }
        ul {
          &.notice { margin-bottom: 10px; }
          &.circle { margin-bottom: 10px; }
        }
        div {
          p:first-child { margin-bottom: 10px; }
        }
      }
    }
  }
}

/* privacy, kiyaku */
#kiyaku,
#privacy {
  #mainTitle {
    background: #a5a5a4;
    #mainTitleContainer {
      height: 101px; padding-top: 49px;
    }
  }
  #content {
    width: 770px;
    section {
      margin-bottom: 80px;
      h2 { font-size: 18px; text-align: center; margin-bottom: 20px; } 
      &#about {
        h2 { margin-bottom: 55px; }
      }
      h3 { font-size: 16px; margin-bottom: 1em; }
      p { font-size: 14px; margin-bottom: 2em; }
      &#last {
        p { margin-bottom: 3em; }
      }
    }
  }
}

#kiyaku {
  #mainTitle {
    background: #a5a5a4;
    #mainTitleContainer {
      height: 88px; padding-top: 62px;
    }
  }
}
#privacy {
  #mainTitle {
    background: #a5a5a4;
    #mainTitleContainer {
      height: 107px; padding-top: 43px;
      h1 { line-height: 32px; }
    }
  }
}