@charset "UTF-8";
/* ===================================================================
CSS information
 file name  :  common.css
 style info :  サイト全体共通css
=================================================================== */
/* fontsize YUI
10px = 77% 11px = 85% 12px = 93% 13px = 100%
14px = 108% 15px = 116% 16px = 123.1% 17px = 131%
18px = 138.5% 19px = 146.5% 20px = 153.9% 21px = 161.6%
22px = 167% 23px = 174% 24px = 182% 25px = 189% 26px = 197% */
/*----------------------------------------------------------------------------------
		 								body、リンク色etc
------------------------------------------------------------------------------------*/
/* 基本リンク色 */
a {
  color: #C9C7C6;
  text-decoration: none; }

a:hover {
  color: #999;
  text-decoration: underline; }

a.hover_img img {
  transition: all 0.5s ease; }

a:hover.hover_img img {
  opacity: 0.6;
  filter: alpha(opacity=60);
  -ms-filter: "alpha(opacity=60)"; }

body {
  color: #4A4A4A;
  font-family: "Times New Roman", "YuMincho", "Hiragino Mincho ProN", "Yu Mincho", "MS PMincho", serif;
  font-size: 18px; }

.clearfix {
  *zoom: 1; }

.clearfix:after {
  content: ".";
  display: block;
  clear: both;
  height: 0;
  visibility: hidden; }

img.alignright {
  display: block;
  margin: 0 0 0 auto; }

img.alignleft {
  display: block;
  margin: 0 auto 0 0; }

img.aligncenter {
  display: block;
  margin: 0 auto; }

blockquote {
  background-color: #ddd;
  padding: 1em 1em 1em 3em;
  position: relative;
  margin: 15px 0; }

blockquote:before {
  content: "“";
  font-size: 600%;
  line-height: 1em;
  color: #999;
  position: absolute;
  left: 0;
  top: 0; }

embed,
iframe,
object {
  max-width: 100%; }

/*----------------------------------------------------------------------------------
		 								container 
------------------------------------------------------------------------------------*/
@media only screen and (min-width: 1080px) {
  #container {
    width: 100%;
    margin: 0 auto;
    /*padding: 70px 0 0 0;*/ }
    #container #containerInner {
      width: 850px;
      margin: 0 auto; }
  #inner {
    width: 980px;
    margin: 0 auto; }
    #inner.freedom {
      width: 940px;
      margin: 50px auto; }
      #inner.freedom img {
        width: 100%; }
    #inner.nature {
      width: 940px;
      margin: 50px auto; }
      #inner.nature img {
        width: 100%; }
    #inner.material {
      width: 940px;
      margin: 0 auto; }
  h2 {
    text-align: center; } }

@media only screen and (min-width: 640px) and (max-width: 1079px) {
  #container {
    width: 100%;
    margin: 0 auto;
    /*padding: 70px 0 0 0;*/ }
    #container #containerInner {
      width: 100%;
      margin: 0 auto; }
  #inner {
    width: 100%;
    margin: 0 auto; }
  h2 {
    text-align: center; } }

@media only screen and (max-width: 639px) {
  #container {
    width: 100%;
    margin: 0 auto; }
    #container #containerInner {
      width: 100%;
      margin: 0 auto; }
  #inner {
    width: 100%;
    margin: 0 auto; }
    #inner.freedom {
      width: 95%;
      margin: 50px auto; }
    #inner.nature {
      width: 95%;
      margin: 50px auto; }
    #inner.material {
      width: 95%;
      margin: 50px auto; }
    #inner.pro {
      width: 95%;
      margin: 30px auto; }
    #inner img {
      width: 100%; }
  h2 {
    text-align: center; } }

/*----------------------------------------------------------------------------------
		 								header 
------------------------------------------------------------------------------------*/
@media only screen and (min-width: 1080px) {
  #topHeader {
    width: 100%;
    margin: 0 auto;
    z-index: 9999;
    /*height: 70px;*/
    background: #ffffff; }
    #topHeader #headerInner {
      width: auto;
      margin: 0 auto;
      padding: 0;
      position: relative; }
      #topHeader #headerInner.phone {
        display: none; }
      #topHeader #headerInner #main-img {
        width: auto;
        margin: 0px auto; }
        #topHeader #headerInner #main-img img {
          width: 100%; }
      #topHeader #headerInner #h_logo {
        z-index: 1;
        position: absolute;
        top: 50%;
        transform: translateY(-50%); }
    #topHeader #h_nav {
      position: absolute;
      background-color: rgba(255, 255, 255, 0.7);
      padding: 15px 0;
      z-index: 1;
      top: 25px;
      right: 50px;
      padding-left: 30px; }
      #topHeader #h_nav.fixed {
        position: fixed;
        top: 0;
        text-align: right;
        z-index: 10000; }
      #topHeader #h_nav #navInner {
        margin: 0 auto; }
      #topHeader #h_nav li {
        float: left;
        margin-left: 10px; }
        #topHeader #h_nav li.qa {
          font-size: 18px;
          margin: 0 30px 0 0px;
          line-height: 25px;
          text-align: center; }
          #topHeader #h_nav li.qa a {
            color: #000000; }
          #topHeader #h_nav li.qa a:hover {
            text-decoration: none;
            opacity: 0.7; }
          #topHeader #h_nav li.qa br {
            display: block;
            content: "";
            margin-top: -5px; }
          #topHeader #h_nav li.qa span {
            font-size: 14px;
            color: #E38A3D; }
      #topHeader #h_nav p.contact {
        text-align: center;
        margin: 0 0 0 10%;
        font-size: 10px;
        width: 120px;
        float: left; }
        #topHeader #h_nav p.contact .button {
          color: #ffffff;
          line-height: 25px;
          -webkit-transition: none;
          transition: none;
          display: inline-block;
          width: 100%;
          height: 25px;
          text-align: center;
          text-decoration: none;
          outline: none;
          border: 1px solid #ffffff;
          border-radius: 27px;
          -webkit-border-radius: 27px;
          -moz-border-radius: 27px; }
        #topHeader #h_nav p.contact .button:hover {
          background: #ffffff;
          border: #024E90 1px solid;
          color: #024E90; } }

@media only screen and (min-width: 640px) and (max-width: 1079px) {
  #topHeader {
    width: 100%;
    margin: 0 auto;
    z-index: 9999;
    /*height: 70px;*/
    background: #ffffff; }
    #topHeader #headerInner {
      width: auto;
      margin: 0 auto;
      padding: 0;
      position: relative; }
      #topHeader #headerInner.phone {
        display: none; }
      #topHeader #headerInner #main-img {
        width: auto;
        margin: 0px auto; }
        #topHeader #headerInner #main-img img {
          width: 100%; }
      #topHeader #headerInner #h_logo {
        z-index: 1;
        position: absolute;
        top: 50%;
        transform: translateY(-50%); }
        #topHeader #headerInner #h_logo img {
          width: 60%; }
    #topHeader #h_nav {
      position: fixed;
      top: 0;
      width: 100%;
      padding: 10px 0;
      height: 20px;
      z-index: 10;
      /* スマホ用メニュー */ }
      #topHeader #h_nav #navInner {
        margin: 0 auto;
        text-align: center; }
      #topHeader #h_nav #h_logo {
        top: 0;
        margin: 0 auto;
        display: block;
        position: relative;
        z-index: 1; }
      #topHeader #h_nav .gblnv_box {
        width: 100%;
        height: 124px;
        position: absolute;
        top: 0;
        text-align: right;
        z-index: 10; }
      #topHeader #h_nav .gblnv_box a {
        margin: 8px 8px 0 0; }
      #topHeader #h_nav .gblnv_block {
        background-color: #EDAB73;
        color: #ffffff;
        height: 350px;
        display: none;
        z-index: 10; }
      #topHeader #h_nav .gblnv_block ul {
        padding: 10px;
        text-align: center; }
      #topHeader #h_nav .gblnv_block ul li {
        line-height: 100%; }
      #topHeader #h_nav .gblnv_block ul li a {
        color: #ffffff;
        font-size: 16px;
        line-height: 250%;
        font-weight: bold; }
      #topHeader #h_nav .gblnv_block ul li span {
        display: none; }
      #topHeader #h_nav .onanimation {
        display: block;
        margin-top: -35px; }
      #topHeader #h_nav .menu-trigger,
      #topHeader #h_nav .menu-trigger span {
        display: inline-block;
        transition: all .4s;
        box-sizing: border-box; }
      #topHeader #h_nav .menu-trigger {
        position: relative;
        width: 30px;
        height: 22px; }
      #topHeader #h_nav .menu-trigger span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #ff8c29;
        border-radius: 4px; }
      #topHeader #h_nav .menu-trigger span:nth-of-type(1) {
        top: 0; }
      #topHeader #h_nav .menu-trigger span:nth-of-type(2) {
        top: 10px; }
      #topHeader #h_nav .menu-trigger span:nth-of-type(3) {
        bottom: 0; }
      #topHeader #h_nav .menu-trigger.active span:nth-of-type(1) {
        -webkit-transform: translateY(10px) rotate(-45deg);
        transform: translateY(10px) rotate(-40deg);
        background-color: #ffffff; }
      #topHeader #h_nav .menu-trigger.active span:nth-of-type(2) {
        left: 50%;
        opacity: 0;
        -webkit-animation: active-menu-bar02 .8s forwards;
        animation: active-menu-bar02 .8s forwards; }
  @-webkit-keyframes active-menu-bar02 {
    100% {
      height: 0; } }
  @keyframes active-menu-bar02 {
    100% {
      height: 0; } }
      #topHeader #h_nav .menu-trigger.active span:nth-of-type(3) {
        -webkit-transform: translateY(-20px) rotate(45deg);
        transform: translateY(-10px) rotate(40deg);
        background-color: #ffffff; }
  .contact a {
    background: url(../images/contact.svg) no-repeat;
    background-size: contain;
    width: 22px;
    position: fixed;
    top: 12px;
    right: 10px;
    display: block;
    text-indent: -9999em; } }

@media only screen and (max-width: 639px) {
  #topHeader {
    width: 100%;
    margin: 0 auto;
    z-index: 9999;
    /*height: 70px;*/
    background: #ffffff; }
    #topHeader #headerInner {
      width: auto;
      margin: 0 auto;
      padding: 0;
      position: relative; }
      #topHeader #headerInner.phone {
        display: none; }
      #topHeader #headerInner #main-img {
        width: auto;
        margin: 0px auto; }
        #topHeader #headerInner #main-img img {
          width: 100%; }
      #topHeader #headerInner #h_logo {
        z-index: 1;
        position: absolute;
        top: 50%;
        transform: translateY(-50%); }
        #topHeader #headerInner #h_logo img {
          width: 30%; }
    #topHeader #h_nav {
      position: fixed;
      top: 0;
      width: 100%;
      padding: 10px 0;
      height: 20px;
      z-index: 10;
      /* スマホ用メニュー */ }
      #topHeader #h_nav #navInner {
        margin: 0 auto;
        text-align: center; }
      #topHeader #h_nav #h_logo {
        top: 0;
        margin: 0 auto;
        display: block;
        position: relative;
        z-index: 1; }
      #topHeader #h_nav .gblnv_box {
        width: 100%;
        height: 124px;
        position: absolute;
        top: 0;
        text-align: right;
        z-index: 10; }
      #topHeader #h_nav .gblnv_box a {
        margin: 8px 8px 0 0; }
      #topHeader #h_nav .gblnv_block {
        background-color: #EDAB73;
        color: #ffffff;
        height: 350px;
        display: none;
        z-index: 10; }
      #topHeader #h_nav .gblnv_block ul {
        padding: 10px;
        text-align: center; }
      #topHeader #h_nav .gblnv_block ul li {
        line-height: 100%; }
      #topHeader #h_nav .gblnv_block ul li a {
        color: #ffffff;
        font-size: 16px;
        line-height: 250%;
        font-weight: bold; }
      #topHeader #h_nav .gblnv_block ul li span {
        display: none; }
      #topHeader #h_nav .onanimation {
        display: block;
        margin-top: -35px; }
      #topHeader #h_nav .menu-trigger,
      #topHeader #h_nav .menu-trigger span {
        display: inline-block;
        transition: all .4s;
        box-sizing: border-box; }
      #topHeader #h_nav .menu-trigger {
        position: relative;
        width: 30px;
        height: 22px; }
      #topHeader #h_nav .menu-trigger span {
        position: absolute;
        left: 0;
        width: 100%;
        height: 2px;
        background-color: #ff8c29;
        border-radius: 4px; }
      #topHeader #h_nav .menu-trigger span:nth-of-type(1) {
        top: 0; }
      #topHeader #h_nav .menu-trigger span:nth-of-type(2) {
        top: 10px; }
      #topHeader #h_nav .menu-trigger span:nth-of-type(3) {
        bottom: 0; }
      #topHeader #h_nav .menu-trigger.active span:nth-of-type(1) {
        -webkit-transform: translateY(10px) rotate(-45deg);
        transform: translateY(10px) rotate(-40deg);
        background-color: #ffffff; }
      #topHeader #h_nav .menu-trigger.active span:nth-of-type(2) {
        left: 50%;
        opacity: 0;
        -webkit-animation: active-menu-bar02 .8s forwards;
        animation: active-menu-bar02 .8s forwards; }
  @-webkit-keyframes active-menu-bar02 {
    100% {
      height: 0; } }
  @keyframes active-menu-bar02 {
    100% {
      height: 0; } }
      #topHeader #h_nav .menu-trigger.active span:nth-of-type(3) {
        -webkit-transform: translateY(-20px) rotate(45deg);
        transform: translateY(-10px) rotate(40deg);
        background-color: #ffffff; }
  .contact a {
    background: url(../images/contact.svg) no-repeat;
    background-size: contain;
    width: 22px;
    position: fixed;
    top: 12px;
    right: 10px;
    display: block;
    text-indent: -9999em; } }

/*----------------------------------------------------------------------------------
		 								footer 
------------------------------------------------------------------------------------*/
@media only screen and (min-width: 1080px) {
  #footer {
    width: 100%;
    background-color: #F8F8F8;
    padding: 120px 30px; }
    #footer.common {
      padding: 80px 0 0;
      width: 100%; }
    #footer #footerInter {
      font-size: 14px;
      width: 85%;
      margin: 0 auto 50px;
      text-align: center; }
      #footer #footerInter .footerLogo {
        width: 200px;
        margin: 0;
        padding: 45px;
        border-right: 1px solid #707070;
        float: left; }
        #footer #footerInter .footerLogo img {
          width: 80%; }
      #footer #footerInter .address {
        width: 250px;
        margin: 0;
        padding: 45px;
        float: left;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: left; }
        #footer #footerInter .address p {
          font-size: 15px;
          line-height: 1.8em; }
    #footer #copyright {
      clear: both;
      color: #000000;
      text-align: center;
      font-size: 14px;
      padding: 5px 0; }
      #footer #copyright br {
        display: none; } }

@media only screen and (min-width: 640px) and (max-width: 1079px) {
  #footer {
    width: 100%;
    background-color: #F8F8F8;
    padding: 120px 30px; }
    #footer.common {
      padding: 80px 0 0;
      width: 100%; }
    #footer #footerInter {
      font-size: 14px;
      width: 85%;
      margin: 0 auto 50px;
      text-align: center; }
      #footer #footerInter .footerLogo {
        width: 200px;
        margin: 0;
        padding: 45px;
        border-right: 1px solid #707070;
        float: left; }
        #footer #footerInter .footerLogo img {
          width: 80%; }
      #footer #footerInter .address {
        width: 250px;
        margin: 0;
        padding: 45px;
        float: left;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: left; }
        #footer #footerInter .address p {
          font-size: 15px;
          line-height: 1.8em; }
    #footer #copyright {
      clear: both;
      color: #000000;
      text-align: center;
      font-size: 14px;
      padding: 5px 0; }
      #footer #copyright br {
        display: none; } }

@media only screen and (max-width: 639px) {
  #footer {
    width: 100%;
    background-color: #F8F8F8;
    padding: 120px 30px; }
    #footer.common {
      padding: 80px 0 0;
      width: 100%; }
    #footer #footerInter {
      font-size: 14px;
      width: 85%;
      margin: 0 auto 50px;
      text-align: center; }
      #footer #footerInter .footerLogo {
        width: 200px;
        margin: 0 auto;
        padding: 45px; }
        #footer #footerInter .footerLogo img {
          width: 80%; }
      #footer #footerInter .address {
        width: 250px;
        margin: 0 auto;
        padding: 45px;
        float: left;
        text-align: left;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: left; }
        #footer #footerInter .address p {
          font-size: 15px;
          line-height: 1.8em; }
    #footer #copyright {
      clear: both;
      color: #000000;
      text-align: center;
      font-size: 14px;
      padding: 5px 0; }
      #footer #copyright br {
        display: none; } }