@charset "UTF-8";

/* *************************************************************

*   Since:2016-12
*   Editor:ricostyle

************************************************************* */


/* Common
------------------------------------------------------------ */
svg{position:absolute;height:100%;opacity:.8;}
svg path{fill:#e3e3e3;}
#full-slide svg{opacity:.4;z-index:9;}

#contact .bigger{font-size:1.2em;}
#contact .bigger a{color:#444;}
#contact .bigger a:hover{color:#777;}

.ftviolet{color:#9B7BD8;}
.ftyel{	color: #CC6633;}
.conterror{text-align:center;margin:0 auto 5px;}



/* NAVI */
#hero header .nav-toggle{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:80px;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;cursor:pointer;}
#hero header .nav-toggle p{margin-bottom:12px;font-size:14px;font-family:"Raleway",Helvetica,sans-serif;text-transform:uppercase;}
#hero header .nav-toggle span,#hero header .nav-toggle span:before,#hero header .nav-toggle span:after{content:"";position:relative;display:block;width:23px;height:2px;background-color:#111;}
#hero header .nav-toggle span:before{bottom:7px;}
#hero header .nav-toggle span:after{top:5px;}

#hero header .nav{visibility:hidden;position:absolute;top:75px;right:0;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:100px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;margin:0;padding:0;list-style:none;background-color:#e3e3e3;border:1px solid #111;border:1px solid rgba(17,17,17,0.15);opacity:0;z-index:10;-webkit-transition:opacity .3s ease-in-out,visibility 0s .3s;transition:opacity .3s ease-in-out,visibility 0s .3s;}
#hero header .nav.open{visibility:visible;opacity:1;-webkit-transition:opacity .3s ease-in-out;transition:opacity .3s ease-in-out;}
#hero header .nav:before{content:"";position:absolute;top:-12px;left:50%;-webkit-transform:translateX(-50%) rotate(45deg);transform:translateX(-50%) rotate(45deg);width:25px;height:25px;border:1px solid #111;border:1px solid rgba(17,17,17,0.15);background-color:#e3e3e3;}
#hero header .nav li{position:relative;width:100%;text-align:center;border-bottom:1px solid #111;border-bottom:1px solid rgba(17,17,17,0.15);background-color:#e3e3e3;overflow:hidden;z-index:10;}
#hero header .nav li:last-child{border-bottom:none;}
#hero header .nav li a{display:block;width:100%;height:100%;padding:5px 0;color:#111;font-size:12px;font-family:"Raleway",Helvetica,sans-serif;text-transform:uppercase;text-decoration:none;-webkit-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out;}
#hero header .nav li a:hover{background-color:#dbdbdb;}


/* full-slide */
#full-slide .banner li{position:absolute;top:0;left:0;right:0;bottom:0;background-position:center;background-size:cover;background-repeat:no-repeat;opacity:0;-webkit-transition:opacity .6s ease-in-out;transition:opacity .6s ease-in-out;}
#full-slide .banner li.active{opacity:1;-webkit-transition:opacity .6s ease-in-out;transition:opacity .6s ease-in-out;}
#full-slide .banner li:nth-child(1){background-image:url("../img/full-slide/thumb-1.jpg");}
#full-slide .banner li:nth-child(2){background-image:url("../img/full-slide/thumb-2.jpg");}
#full-slide .banner li:nth-child(3){background-image:url("../img/full-slide/thumb-3.jpg");}
#full-slide i{position:absolute;top:50%;-webkit-transform:translateY(-50%) scale(1);transform:translateY(-50%) scale(1);width:60px;height:60px;font-size:28px;text-align:center;line-height:60px;background-color:#fff;cursor:pointer;z-index:10;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;}
#full-slide i:hover{-webkit-transform:translateY(-50%) scale(1.1);transform:translateY(-50%) scale(1.1);}
#full-slide .prev{left:0;}
#full-slide .next{right:0;}

/* contact */
#contact .wrapper form{width:90%;margin:0 auto;position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-flex-wrap:wrap;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;color:#111;font-family:"Raleway",Helvetica,sans-serif;}
#contact .wrapper form input[type="email"],#contact .wrapper form input[type="text"]
{width:42%;height:40px;padding:0 15px;border:1px solid #111;border-radius:0;background:transparent;}
#contact .wrapper form input[type="email"]::-webkit-input-placeholder,#contact .wrapper form input[type="text"]::-webkit-input-placeholder
{color:#111;}
#contact .wrapper form input[type="email"]::-moz-placeholder,#contact .wrapper form input[type="text"]::-moz-placeholder
{color:#111;}
#contact .wrapper form input[type="email"]:-ms-input-placeholder,#contact .wrapper form input[type="text"]:-ms-input-placeholder
{color:#111;}
#contact .wrapper form input[type="email"]::placeholder,#contact .wrapper form input[type="text"]::placeholder
{color:#111;}
#contact .wrapper form input[type="email"]:focus,#contact .wrapper form input[type="text"]:focus
{outline:none;}
#contact .wrapper form textarea
{width:100%;height:90px;margin:30px 0;padding:10px 15px;border:1px solid #111;border-radius:0;background:transparent;resize:none;}
#contact .wrapper form textarea::-webkit-input-placeholder
{color:#111;}
#contact .wrapper form textarea::-moz-placeholder
{color:#111;}
#contact .wrapper form textarea:-ms-input-placeholder
{color:#111;}
#contact .wrapper form textarea::placeholder
{color:#111;}
#contact .wrapper form textarea:focus
{outline:none;}
#contact .wrapper form input[type="submit"]
{width:100%;height:40px;color:#fff;font-weight:700;text-transform:uppercase;border:none;border-radius:0;background-color:#111;}
#contact .wrapper form input[type="email"],#contact .wrapper form input[type="text"]
{width:100%;margin-bottom:10px;}
#contact .wrapper form textarea
{margin:0 0 10px 0;}



/* Style Responsive
------------------------------------------------------------ */
@media (max-width: 415px){
/* common */
svg{display:none;}
#hero,#about,#full-slide,#about2,#featured,#contact
{position:relative;width:100%;height:auto;margin:0 auto 15px;background-color:#efefef;overflow:hidden;font-size:0.9em;}
.wrap1{width:90%;}
.wrap1:after{display:none;}
.wrapper{text-align:left;position:relative;}
.wrapper h1,.wrapper h2{margin-top:0;margin-bottom:15px;font-size:25px;font-family:"Raleway",Helvetica,sans-serif;font-weight:100;line-height:1.1em;}
.wrapper p{font-size:0.9em;line-height:1.3em;}

/* hero */
#hero .wrapper .wrap1{margin:30px auto;}
#hero .wrapper .wrap1 h1{margin:80px 0 15px;}
#hero .wrapper .photo{display:none;}

/* totop */
#topbtn{position: fixed;bottom:0;left:0;width:100%;height:auto;background-color:#000;opacity:.30;z-index:1000;}
#topbtn:hover{opacity:.20;}
#topbtn a{display:block;padding:20px;text-decoration:none;color:#FFF;line-height:1em;}
#topbtn a:hover{text-decoration:none;color:#FFF;}

/* head */
#head{text-align:left;}
#head div{background:url(../img/img_url.png) no-repeat right 30px;}
#head img{width:100px;margin:20px 10px;}

/* NAVI */
#hero header{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:95%;height:80px;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;z-index:10;}

/* about */
#about .wrapper .wrap1{margin:30px auto;}
#about .wrapper .photo{display:none;}

/* full-slide */
#full-slide .banner{position:relative;min-height:200px;margin:0;}
#full-slide i{position:absolute;top:50%;-webkit-transform:translateY(-50%) scale(1);transform:translateY(-50%) scale(1);width:50px;height:50px;font-size:28px;text-align:center;line-height:50px;background-color:#fff;cursor:pointer;z-index:10;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;}

/* about-photo2 */
#about2 .wrapper .wrap1{margin:-40px auto 30px;}
#about2 .wrapper .photo{width:30%;margin:20px 0 0 20px;}
#about2 .wrapper .photo img{width:100%;opacity:.2;}

/* featured */
#featured .wrapper .wrap1{margin:30px auto 20px;}
#featured .wrapper .photo img{margin:0 0 30px 20px;width:50%;}

/* contact */
#contact{margin-bottom:50px;}
#contact .wrapper .wrap1{text-align:center;margin:30px auto;}
#contact .wrapper .wrap1 p{margin-bottom:20px;}
#contact .wrapper .wrap1 p span{display:block;margin-top:20px;font-weight:bold;}

/* copyright */
#contact .copyright
{font-family:"Raleway",Helvetica,sans-serif;font-size:12px;margin:30px auto;text-align:center;}
}




@media (min-width: 415px) and (max-width: 768px){
/* common */
#hero,#about,#full-slide,#about2,#featured,#contact
{position:relative;width:95%;height:auto;margin:10px auto 15px;background-color:#efefef;overflow:hidden;font-size:0.85em;}
.wrap1:after{display:none;}
#hero svg,#about svg,#full-slide svg{left:-110px;}
#featured svg{left:-80px;}
#about2 svg,#contact svg{left:0px;}


/* totop */
#topbtn{position: fixed;bottom:0;left:0;width:100%;height:auto;background-color:#000;opacity:.30;z-index:1000;}
#topbtn:hover{opacity:.20;}
#topbtn a{display:block;padding:20px;text-decoration:none;color:#FFF;line-height:1em;}
#topbtn a:hover{text-decoration:none;color:#FFF;}


/* head */
#head{text-align:left;}
#head div{background:url(../img/img_url.png) no-repeat right 30px;}
#head img{width:100px;margin:20px;}


/* hero */
#hero .wrapper{position:relative;min-height:360px;}
#hero .wrapper .wrap1{width:90%;margin:0 auto;}
#hero .wrapper .wrap1 h1{margin-bottom:20px;font-size:30px;font-family:"Raleway",Helvetica,sans-serif;font-weight:100;line-height:1.3em;text-align:left;}
#hero .wrapper .wrap1 p{margin-bottom:30px;text-align:left;}
#hero .wrapper .photo{display:none;}


/* NAVI */
#hero header{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:95%;height:80px;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;z-index:10;}


/* about */
#about .wrapper{position:relative;min-height:360px;}
#about .wrapper .wrap1{width:90%;margin:30px auto;}
#about .wrapper .wrap1 h2{margin-top:0;margin-bottom:30px;font-size:30px;font-family:"Raleway",Helvetica,sans-serif;font-weight:100;}
#about .wrapper .wrap1 p{}
#about .wrapper .photo{display:none;}


/* full-slide */
#full-slide .banner{position:relative;min-height:360px;margin:0;}
#full-slide i{position:absolute;top:50%;-webkit-transform:translateY(-50%) scale(1);transform:translateY(-50%) scale(1);width:50px;height:50px;font-size:28px;text-align:center;line-height:50px;background-color:#fff;cursor:pointer;z-index:10;-webkit-transition:all .2s ease-in-out;transition:all .2s ease-in-out;}


/* about-photo2 */
#about2 .wrapper{position:relative;min-height:400px;}
#about2 .wrapper .wrap1{width:90%;margin:20px auto 30px;}
#about2 .wrapper .wrap1 h2{margin-top:0;margin-bottom:30px;font-size:30px;font-family:"Raleway",Helvetica,sans-serif;font-weight:100;}
#about2 .wrapper .wrap1 p{max-width:600px;margin-bottom:20px;font-size:0.9em;line-height:1.2em;}
#about2 .wrapper .photo{width:20%;margin:30px auto 0;}
#about2 .wrapper .photo img{width:100%;opacity:.6;}


/* featured */
#featured .wrapper{position:relative;min-height:400px;}
#featured .wrapper .wrap1{width:90%;margin:30px auto 20px;}
#featured .wrapper .wrap1 h2{margin-top:0;margin-bottom:30px;font-size:30px;font-family:"Raleway",Helvetica,sans-serif;font-weight:100;}
#featured .wrapper .wrap1 p{margin:0;padding:0;}
#featured .wrapper .photo img{margin:0 auto 30px;width:50%;}


/* contact */
#contact .wrapper{position:relative;min-height:400px;}
#contact .wrapper .wrap1{width:90%;text-align:center;margin:30px auto;}
#contact .wrapper .wrap1 h2{margin-top:0;margin-bottom:30px;font-size:30px;font-family:"Raleway",Helvetica,sans-serif;font-weight:100;}
#contact .wrapper .wrap1 p{margin-bottom:20px;}
#contact .wrapper .wrap1 p span{display:block;margin-top:20px;font-weight:bold;}


#contact .copyright
{font-family:"Raleway",Helvetica,sans-serif;font-size:12px;margin-bottom:50px;}
}





@media (min-width: 768px){
/* common */
#hero,#about,#full-slide,#about2,#featured,#contact{position:relative;width:1440px;max-width:95%;height:600px;margin:10px auto 30px;background-color:#efefef;overflow:hidden;}
.wrap1:after{display:none;}
#hero svg,#about svg,#about2 svg,#featured svg,#three-slide svg,#full-slide svg,#contact svg{left:0;}


/* totop */
#topbtn{position: fixed;bottom:0;left:0;width:auto;height:auto;background-color:#000;opacity:.30;z-index:1000;}
#topbtn:hover{opacity:.20;}
#topbtn a{display:block;padding:40px 35px;text-decoration:none;color:#FFF;line-height:1em;}
#topbtn a:hover{text-decoration:none;color:#FFF;}


/* head */
#head{background:url(../img/img_url.png) no-repeat right 30px;margin:0 auto;width:95%;max-width:1440px;height:90px;text-align:left;}
#head div{}
#head img{width:110px;margin:15px 20px 20px 5px;}


/* hero */
#hero .wrapper{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:1180px;max-width:95%;height:100%;margin:0 auto;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
#hero .wrapper .wrap1{width:55%;}
#hero .wrapper .wrap1 h1{margin-bottom:20px;font-size:38px;font-family:"Raleway",Helvetica,sans-serif;font-weight:100;line-height:1.3em;text-align:left;}
#hero .wrapper .wrap1 p{margin-bottom:0;text-align:left;}
#hero .wrapper .photo{width:45%;line-height:0;margin:0 0 0 40px;}
#hero .wrapper .photo img{width:100%;opacity:.90;}

#hero header{position:absolute;left:50%;-webkit-transform:translateX(-50%);transform:translateX(-50%);display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:95%;height:80px;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:end;-webkit-justify-content:flex-end;-ms-flex-pack:end;justify-content:flex-end;z-index:10;}


/* about */
#about .wrapper{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:1180px;max-width:95%;height:100%;margin:0 auto;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
#about .wrapper .wrap1{width:55%;}
#about .wrapper .wrap1 h2{margin-top:0;margin-bottom:30px;font-size:38px;font-family:"Raleway",Helvetica,sans-serif;font-weight:100;}
#about .wrapper .wrap1 p{max-width:600px;margin-bottom:45px;}
#about .wrapper .photo{width:45%;}
#about .wrapper .photo img{width:90%;}
/* SNSボタン 使うなら復活
#about .wrapper .wrap1 .social{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:180px;-webkit-box-pack:justify;-webkit-justify-content:space-between;-ms-flex-pack:justify;justify-content:space-between;}
#about .wrapper .wrap1 .social a{color:#fff;text-decoration:none;}
#about .wrapper .wrap1 .social i{display:block;width:30px;height:30px;font-size:16px;text-align:center;line-height:30px;background-color:#909090;-webkit-transition:background-color .2s ease-in-out;transition:background-color .2s ease-in-out;}
#about .wrapper .wrap1 .social i:hover{background-color:#020202;}*/


/* full-slide */
#full-slide .banner{position:relative;width:100%;height:100%;margin:0;padding:0;list-style:none;}


/* about-photo2 */
#about2 .wrapper{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:1180px;max-width:95%;height:100%;margin:0 auto;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;}
#about2 .wrapper .wrap1{width:55%;}
#about2 .wrapper .wrap1 h2{margin-top:0;margin-bottom:30px;font-size:38px;font-family:"Raleway",Helvetica,sans-serif;font-weight:100;}
#about2 .wrapper .wrap1 p{max-width:600px;margin-bottom:45px;}
#about2 .wrapper .photo{width:40%;}
#about2 .wrapper .photo img{width:80%;opacity:.2;}


/* featured */
#featured .wrapper{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:1180px;max-width:95%;height:100%;margin:0 auto;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center}
#featured .wrapper .wrap1{width:55%;}
#featured .wrapper .wrap1 h2{margin-top:0;margin-bottom:30px;font-size:42px;font-family:"Raleway",Helvetica,sans-serif;font-weight:100;}
#featured .wrapper .wrap1 p{max-width:400px;margin:0 auto 30px;}
#featured .wrapper .photo{width:45%;}
#featured .wrapper .photo img{width:100%;}


/* contact */
#contact .wrapper{position:relative;display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;width:1180px;max-width:95%;height:100%;margin:0 auto;-webkit-box-align:center;-webkit-align-items:center;-ms-flex-align:center;align-items:center;-webkit-box-orient:vertical;-webkit-box-direction:normal;-webkit-flex-direction:column;-ms-flex-direction:column;flex-direction:column;-webkit-box-pack:center;-webkit-justify-content:center;-ms-flex-pack:center;justify-content:center;}
#contact .wrapper .wrap1{max-width:950px;margin-top:-45px;text-align:center;}
#contact .wrapper .wrap1 h2{margin-top:0;margin-bottom:30px;font-size:42px;font-family:"Raleway",Helvetica,sans-serif;font-weight:100;}
#contact .wrapper .wrap1 p{margin-bottom:30px;}
#contact .wrapper .wrap1 p span{display:block;margin-top:20px;}
#contact .wrapper form{max-width:600px;}
#contact .bigger a{text-decoration:none;}

/* conpyright */
#contact .copyright
{position:absolute;bottom:10px;left:50%;-webkit-transform:translate(-50%);transform:translate(-50%);margin-bottom:0;font-family:"Raleway",Helvetica,sans-serif;font-size:12px;}
}