html {
    min-width: 1200px; /* viewport */
}



/*=============================================
 * body
 *=============================================*/

 body {
    color: #000;
    font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
    font-size: 15px;
    line-height: 34px;
    letter-spacing: 1.8px;
    background: url(../img/shared/bg-main.jpg);
    min-width: inherit;
    min-height: inherit;
    max-height: 100%;
}



/*=============================================
 * fonts - DON'T EDIT
 *=============================================*/

 .fnt-mincho {
    font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "メイリオ", Meiryo, "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
}
.fnt-meiryo {
    font-family: "メイリオ", Meiryo, "ヒラギノ角ゴシックPro", "ＭＳ ゴシック", "Hiragino Kaku Gothic Pro", Osaka, "ＭＳ Ｐゴシック", "MS PGothic", sans-serif;
}
.fnt-gothic {
    font-family: "游ゴシック", YuGothic, "ヒラギノ角ゴ Pro", "Hiragino Kaku Gothic Pro", "メイリオ", "Meiryo", Osaka, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
}



/*=============================================
 * .fnt - customs
 *=============================================*/

 .fnt-mincho {
 }
 .fnt-meiryo {
 }
 .fnt-gothic {
 }
 .fnt-garamond {
 }



/*=============================================
 * #wrapper
 *=============================================*/

 #wrapper {
    clear: both;
    width: 100%;
    position: relative;
    overflow: hidden;
}
.wrap {
    width: 1000px;
}



/*=============================================
 * header
 *=============================================*/

 #header {
    position: relative;
    min-height: 1040px;
}
#header h1 {
    position: absolute;
    right: 20px;
    top: 990px;
    width: 216px;
    font-size: 11.5px;
    text-align: center;
    line-height: 18px;
}

#header .ttl{
    position: absolute;
    top: 202px;
    right: 56px;
}
#header .logo {
    position: absolute;
    top: 0;
    left: -30px;
    
}
#header .tel {
    position: absolute;
    top: 820px;
    right: 0;
}
#header .insta {
    position: absolute;
    top: 900px;
    right: 0;
}


#header .nav {
    position: absolute;
    top: 34px;
    left: 100px;
}

/* nav-fixed */
#header .nav-fixed{
    position: relative;
    height: 90px;
    opacity: 0;
    visibility: hidden;
    transition:0.4s ease-in-out;
}

#header .nav-fixed.fixed{
    position: fixed;
    top: 0;
    left: 0;
    opacity: 1;
    visibility: visible;
    width: 100%;
    z-index: 4;
    transition:0.4s ease-in-out;
}

#header .nav-fixed .nav-inline{
    display: inline-block;
    padding-top: 20px;
}

#header .nav-fixed .tel-fixed{
    float: right;
}

#header .nav-fixed::before{
    content:"";
    top:0;
    left:0;
    right:0;
    bottom:0;
    position:absolute;
    background:url(../img/shared/bg-black.jpg);
    opacity: 0.85;
}
/*=============================================
 * key
 *=============================================*/

 #key {
    background-color: #000;
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    min-height: 500px;
    position: relative;
}
#key ul {
    min-height: inherit;
}
#key li {
    background-repeat: no-repeat;
    background-position: center top;
    background-size: cover;
    min-height: inherit;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}



/*=============================================
 * container
 *=============================================*/

 #container {
 }



/*=============================================
 * #socialbuttons
 *=============================================*/

 #socialbuttons {
    margin-top: 3px;
    text-align: center;
}



.social-twitter{
    position: relative;
    left: 185px;
    top: 0px;
}

.social-google{
    top: 0px;
    left: 109px;
    position: relative;
}

.social-line{
    top: 0px;
    position: relative;
    left: 124px;
}


/*=============================================
 * footer
 *=============================================*/

 #footer {
    position: relative;
    background:url(../img/shared/bg-black.jpg);
    min-height: 636px;
}

#footer .wrap.clearfix{
    height: 514px;
}

#footer .logo {
    position: absolute;
    top: 54px;
    left: 60px;
}
#footer .tel {
    position: absolute;
    top: 289px;
    left: 60px;
}

#footer .spec{
    width: 249px;
    text-align: center;
    line-height: 19px;
    letter-spacing:1.8px;
    color: #FFF;
    font-size: 13px;
    position: absolute;
    top: 404px;
    left: 62px;
}
#footer .nav {
    text-align: center;
    color: #FFF;
    padding-top: 21px;
    padding-bottom: 17px;
    background: rgba(255, 255, 255, 0.05);
}
#footer .nav li{
    padding-left: 30px;
}

#footer .nav li:first-child{
   position: relative;
}

#footer .nav li:first-child::before{
   content: "";
   top: 8px;
   left: -20px;
   right: 0;
   bottom: 0;
   position: absolute;
   width: 1px;
   height: 16px;
   background: #FFF;
}

#footer .nav li:last-child{
   position: relative;
}

#footer .nav li:last-child::after{
   content: "";
   top: 8px;
   left: 197px;
   right: 0;
   bottom: 0;
   position: absolute;
   width: 1px;
   height: 16px;
   background: #FFF;
}

#footer .nav li::before:first-child {
    content: "\7C";
    padding-right: 47px;
}
#footer .nav li + li {
}
#footer .nav li + li::before {
    content: "\7C";
    padding-right: 46px;
}

#footer .menu-list{
    color: #FFF;
    font-size: 14px;
    line-height: 25px;
    letter-spacing: 1px;
    padding-top: 72px;
}
#footer .menu-list dl{
    display: inline-block;
    padding-bottom: 25px;
    margin-left: 409px;
}
#footer .menu-list dt,
#footer .menu-list dd{
    float: left;
}

#footer .menu-list dd{
    width: 428px;
}
#footer .menu-list dt{
    width: 132px;
}

/*=============================================
 * copyright
 *=============================================*/

 address {
    position: relative;
    bottom: 0;
    left:  0;
    color:  #fff;
    text-align:  center;
    font-size:  13px;
    background: #000;
    padding: 11px 0 6px;
    letter-spacing: 1.3px;
}



@media only screen
  and (min-device-width: 320px) 
  and (max-device-width: 480px)
  and (-webkit-min-device-pixel-ratio: 2) {
    #footer .nav li:last-child{
        padding-left: 0px;
        width: 200px;
    }
}