@charset "utf-8";

/* ---------------------------------------------------------------------------------------------- */
/*
SETTING
COLOR:::#464140
*/
/* ---------------------------------------------------------------------------------------------- */

/* ---------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */
/* BODY */
/* ---------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */
@media (max-width: 600px) {
  html {
    width:100% !important;
    height:100% !important;
  }
  body {
    position:relative;
    width:100% !important;
    height:100% !important;
  }
    #bodybox {
      position:relative;
      height: auto !important;
      height:100%;
      min-height:100%;
    }
      #bodybox #contentsbox {
        z-index:10;
        position:relative;
        width:100%;
        margin:0 auto;
        padding: 0 0 350px 0;
      }
        #bodybox #detailbox {
          width:80%;
          margin: 0 auto;
          padding: 130px 0 0 0;
        }
        #bodybox #detailbox h2 {
          margin: 0 0 10px 0;
        }
      #bodybox #bgbox {
        z-index:1;
        position: absolute;
        bottom:0;
        left:50%;
        width:100%;
        height:350px;
        min-height:350px;
        margin-left:-50%;
        background-image:url(../images/common/bg01.png);
        background-position:50% 0%;
        background-repeat:no-repeat;
        background-size:200px auto;
      }
}


@media (min-width: 601px) {
  html {
    width:100% !important;
    height:100% !important;
  }
  body {
    position:relative;
    width:100% !important;
    height:100% !important;
  }
    #bodybox {
      position:relative;
      height:100% !important;
    }
      #bodybox #contentsbox {
        z-index:10;
        position:relative;
        width:100%;
        height: auto !important;
        height:100%;
        min-height:100%;
        margin:0 auto;
      }
        #bodybox #detailbox {
          width:620px;
          margin: 0 auto;
          padding: 250px 40px 100px 40px;
        }
        #bodybox #detailbox h2 {
          margin: 0 0 10px 0;
        }
      #bodybox #bgbox {
        z-index:1;
        position:fixed;
        top:0;
        left:50%;
        width:700px;
        height: auto !important;
        height:100%;
        min-height:100%;
        margin-left:-350px;
        background-image:url(../images/common/bg01.png);
        background-position:100% 100%;
        background-repeat:no-repeat;
        background-size:300px auto;
      }
}


/* ---------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */
/* HEADER */
/* ---------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */

@media (max-width: 600px) {
  #header {
    position:fixed;
    width:100%;
    background-color:#FFF;
  }
    #header #header_detail {
      position:relative;
      width:90%;
      margin:0 auto;
      padding: 30px 0 0 0;
    }
      #header h1 {
        margin: 0 0 12px 0;
        padding: 0 0 0 0;
        text-align:center;
      }
        #header h1 img {
          width:150px;
        }
}


@media (min-width: 601px) {
  #header {
    position:fixed;
    width:100%;
    background-color:#FFF;
  }
    #header #header_detail {
      position:relative;
      width:700px;
      margin:0 auto;
      padding: 100px 0 0 0;
    }
      #header h1 {
        margin: 0 0 20px 0;
        padding: 0 0 0 0;
      }
        #header h1 img {
          width:200px;
        }
}


/* ---------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */
/* NAVI */
/* ---------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */

@media (max-width: 600px) {
  #gnavi {
    width:auto;
    padding:0 0 20px 0;
    text-align:center;
  }
    #gnavi li {
      display:inline-block;
      width:auto;
    }
      #gnavi li a {
        display:block;
        width:auto;
        margin:0;
        padding:5px 15px;
      }
      #gnavi li:hover {
        background-color:#5D686A;
      }
      #gnavi li a:hover {
        color:#FFF;
      }
}

@media (min-width: 601px) {
  #gnavi {
    width:auto;
    padding:0 25px 20px 25px;
  }
    #gnavi li {
      display:inline-block;
      width:auto;
    }
      #gnavi li a {
        display:block;
        width:auto;
        margin:0;
        padding:5px 15px;
      }
      #gnavi li:hover {
        background-color:#5D686A;
      }
      #gnavi li a:hover {
        color:#FFF;
      }
}


/* ---------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */
/* FOOTER */
/* ---------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */

@media (max-width: 600px) {
  #footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:30px;
    font-size:10px;
    line-height:12px;
    text-align:center;
  }
}

@media (min-width: 601px) {
  #footer {
    position:absolute;
    bottom:0;
    width:100%;
    height:30px;
    font-size:12px;
    line-height:16px;
    text-align:right;
  }
}


/* ---------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */
/* CONTACT */
/* ---------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */

@media (max-width: 600px) {
  #contactform {
    margin: 0 0 20px 0;
  }
    #contactform .contactform_name {
      margin: 0 0 3px 0;
    }
    #contactform .contactform_input {
      margin: 0 0 10px 0;
    }
}

@media (min-width: 601px) {
  #contactform {
    margin: 0 0 20px 0;
  }
    #contactform .contactform_name {
      margin: 0 0 3px 0;
    }
    #contactform .contactform_input {
      margin: 0 0 10px 0;
    }
}


/* ---------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */
/* BTN */
/* ---------------------------------------------------------------------------------------------- */
/* ---------------------------------------------------------------------------------------------- */

.mfp_buttons button,
.btn01 {
  color:#FFF;
  font-size:14px !important;
  line-height:24px !important;
  padding:5px 15px;
	border-radius:3px;
	-webkit-border-radius:3px;
	-moz-border-radius:3px;
  background-color:#8BCED4;
  border:none;
}