@charset "utf-8";
/* CSS Document */

/*** 共通項目 ***/
body { color:#666; overflow-x: hidden;}

a, a:visited { color: #666;  }
a:hover { text-decoration:underline; }
a:hover img { opacity: 0.4;}
    @media (min-width: 769px) {
    	a[href^="tel:"] { pointer-events: none; }
    }


/*** ヘッダー ***/
.header { height: 25.0rem; margin: 0; padding:0; width: 100%; text-align: center; position: relative; }
.header .intro { width: 100%; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
.header .intro  img { width: 200px; margin-bottom: 1.0rem; }
.header p { font-size: 0.9rem; text-align: left; padding: 1.0rem; line-height: 1.4rem; margin:  auto; font-weight: 400;}
    @media (min-width:768px){
        .header { height: 100vh; }
        .header .intro img {  width: 400px; margin-bottom: 2.0rem;}
        .header h2 { font-size:3.0rem; }
        .header p { width: 700px; text-align: center;}
    }
    @media (min-width:992px){
        .header .intro img { width: 500px; }
        .header p { width: 900px;}
    }


/***ナビゲーション***/
.nav { background-color: #F9F9F9; margin-bottom: 2.0rem; z-index: +1; }
.slider { display: none; height: 25vw; }
.slider.slick-initialized { display: block;}
.slider li img { width: 100%; filter: saturate(0%);}
.slider li:hover img { filter: saturate(100%); opacity: 1.0;}
    @media (min-width:480px){
        .slider { height: 20.5vw;}
    }
    @media (min-width:768px){
        .slider { height: 8.0rem;}
    }
    @media (min-width:992px){
        .slider { height: 5.5rem;}
    }
    @media (min-width:1200px){
        .slider { height: 7.25rem;}
    }


/***コンテンツ***/
.content { width: 100%; margin: 0 auto; padding: 0; font-size: 0px;}

.box { width: 100%; padding-top: 25vw}
    @media (min-width:480px){
        .box { padding-top: 20.5vw;}
    }
    @media (min-width:768px){
        .box { padding-top: 8.0rem;}
    }
    @media (min-width:992px){
        .box { padding-top: 5.5rem;}
    }
    @media (min-width:1200px){
        .box { padding-top: 7.25rem;}
    }
.box img { width: 100%;}

.btn { width: 100%; margin: 0; padding: 0.25rem; position: relative; font-size: 1.0rem; text-align: center; font-weight: 500; background-color: #333; color: #FFF; border:solid 0.1rem #333; border-radius: 0.5rem; transition: .4s;}
.btn a { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: block; text-indent: -9999px;}
.btn:hover { background-color: transparent; color: #333; border-radius: 1.0rem;}

/*** フッター ***/
.footer {width: 100%; margin: 25vw auto 0 auto; padding: 2.0rem 0; background-color: #333; color: #EEE;}
    @media (min-width:480px){
        .footer { margin-top: 20.5vw;}
    }
    @media (min-width:768px){
        .footer { margin-top: 8.0rem;}
    }
    @media (min-width:992px){
        .footer { margin-top: 5.5rem;}
    }
    @media (min-width:1200px){
        .footer { margin-top: 7.25rem;}
    }

.footer .container { margin: 0 auto; padding: 0; font-size: 0px;}
.contact, .logo { display: inline-block; width: 100%; padding: 2.0rem; box-sizing: border-box; vertical-align: bottom;}
    @media(min-width:768px){
        .contact, .logo { width: 50%;}
    }
.contact h2{font-size: 1.4rem; margin-bottom: 1.0rem; width: 100%;}
.txt {font-size: 1.0rem; font-weight: 300; line-height: 1.2rem; padding: 0.25rem; margin-bottom: 0.25rem; border-bottom: dashed 1px #AAA;}
.txt span {font-size: 0.8rem; line-height: 1.0rem;}
.txt a, .txt a:visited {color: #EEE;}

.logo { text-align: center;}
.logo span { font-size:10.0rem;}
.logo .copy {font-size: 0.8rem; margin-top:0.25rem;}