@charset "UTF-8";

html,html > body{box-sizing:border-box;height:500px;height:100vh;}
html > body > header{}
html > body > article{width:100%;margin-top:-80px;margin-bottom:0;}
html > body > article > section{max-width:1920px;margin:auto;overflow:hidden;box-sizing:border-box;height:500px;height:100vh;padding-top:80px;position:relative;background-size:cover;background-position:50%;}
html > body > article > section{perspective:-300px;}

/* #top以外のsection */
html > body > article > section > h1{position:absolute;left:50%;top:50%;transform:translate(-50%, -50%);text-align:center;font-size:1.6em;width:300px;border-width:0;}
html > body > article > section > h1{}
html > body > article > section > h1 > a{display:block;margin-top:0.5em;padding:1em;border:solid 3px white;color:rgba(255,255,255,1);background:rgba(58,96,170,0);transition:0.3s;}
html > body > article > section > h1 > a:after{content:"\00a0▶";display:inline-block;width:0;overflow:hidden;transition:0.3s;vertical-align:bottom;}
html > body > article > section > h1 > a:hover{color:rgba(255,255,255,1);background:rgba(58,96,170,1);text-shadow:none;}
html > body > article > section > h1 > a:hover:after{width:1.5em;}
html > body > article > section > p:nth-of-type(1){position:absolute;top:100px;right:6%;font-size:1.6em;line-height:2em;}
html > body > article > section > p:nth-of-type(2){position:absolute;bottom:10%;left:16%;font-size:2.5em;font-weight:bold;line-height:1.6em;z-index:0;}
html > body > article > section > a{display:block;width:60px;height:60px;position:absolute;left:50%;bottom:40px;border:solid gray;border-width:0 0 2px 2px;transform:rotate(-45deg) translate(-40%, -50%);transition:0.3s;z-index:2;}
html > body > article > section > a:hover{border-width:0 0 6px 6px;border-style:double;}
html > body > article > section > small{position:absolute;color:white;right:1em;bottom:1em;}

/* #top */
html > body > article > section#top{background:url(../img/topPage/background/top.jpg) no-repeat;background-position:center 80px;background-size:cover;position:relative;color:white;}
html > body > article > section#top > h1{position:absolute;top:0;left:0;width:200%;height:200%;background-color:white;transition:ease-out 4s;}
html > body > article > section#top > div{position:absolute;top:170px;right:-460px;text-align:right;transition:ease 1s;}
html > body > article > section#top > div > p{font-size:1.6em;line-height:1.5em;transform:scale(1,1.1);text-align:right;}
html > body > article > section#top > div > p:nth-child(1){color:#999;font-weight:bold;font-size:3em;border-bottom:solid 1px black;padding-bottom:20px;padding-right:20px;}
html > body > article > section#top > div > p:nth-child(2){font-size:2em;letter-spacing:-0.1em;line-height:2.9em;color:white;background:black;width:390px;height:75px;text-align:center;display:inline-block;position:relative;top:40px;}
html > body > article > section#top > div > a{display:block;position:relative;top:100px;}
html > body > article > section#top > a{border-color:#333;}

/* section個別指定 */
/*headHunting*/
html > body > article > section#headHunting{background-image:url(../img/topPage/background/headHunting.jpg);}
html > body > article > section#headHunting > h1{color:white;text-shadow:0 0 4px #000;}
html > body > article > section#headHunting > h1 > a{color:white;}
html > body > article > section#headHunting > p:nth-of-type(1){color:white;}
html > body > article > section#headHunting > p:nth-of-type(2){color:white;text-shadow:2px 2px 3px #333;}
html > body > article > section#headHunting > a{border-color:#fff;}
/*nailSalon*/
html > body > article > section#nailSalon{background-image:url(../img/topPage/background/nailSalon.jpg);}
html > body > article > section#nailSalon > h1{color:black;}
html > body > article > section#nailSalon > h1 > a{color:black;border-color:black;}
html > body > article > section#nailSalon > h1 > a:hover{color:white;}
html > body > article > section#nailSalon > p:nth-of-type(1){color:black;}
html > body > article > section#nailSalon > p:nth-of-type(2){color:black;text-shadow:0 0 3px #fff;}
html > body > article > section#nailSalon > a{border-color:#333;}
/*wholesaleTrade*/
html > body > article > section#wholesaleTrade{background-image:url(../img/topPage/background/wholesaleTrade.jpg);}
html > body > article > section#wholesaleTrade > h1{color:white;text-shadow:0 0 4px #000;}
html > body > article > section#wholesaleTrade > h1 > a{color:white;border-color:white;box-shadow:0 0 3px #333;}
html > body > article > section#wholesaleTrade > h1 > a:hover{color:white;}
html > body > article > section#wholesaleTrade > p:nth-of-type(1){color:white;}
html > body > article > section#wholesaleTrade > p:nth-of-type(2){color:white;text-shadow:2px 2px 3px #333;}
html > body > article > section#wholesaleTrade > a{border-color:white;}
/*socialBusiness*/
html > body > article > section#socialBusiness{background-image:url(../img/topPage/background/socialBusiness.jpg);}
html > body > article > section#socialBusiness > h1{color:white;}
html > body > article > section#socialBusiness > h1 > a{color:white;border-color:white;}
html > body > article > section#socialBusiness > p:nth-of-type(1){color:white;}
html > body > article > section#socialBusiness > p:nth-of-type(2){color:white;text-shadow:2px 2px 2px #333;}
html > body > article > section#socialBusiness > a{border-color:white;}

html > body > article > p{position:fixed;bottom:40px;right:4%;z-index:100;}
html > body > article > p > a{display:block;width:100px;height:100px;background:url(../img/common/topLink.png);position:relative;}
@media screen and (min-width:1001px){
	html > body > article > p > a:hover:after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:rgba(255,255,255,.3);border-radius:12px;}
}

html > body > footer{width:100%;}

/* 横幅1000pxを切ったら(スマホ用) */
@media screen and (max-width:1000px){
html > body > article > section#top > div{right:-675px;}
html > body > article > section > p:nth-of-type(1){top:130px;}

	/* 縦向き */
	@media screen and (orientation: portrait){
html > body > article > section > h1{font-size:3em;width:500px;}
html > body > article > section > h1 > a{font-size:.9em;padding:0;line-height:1.4em;}
html > body > article > section > p:nth-of-type(1){font-size:2.6em;}
html > body > article > section#nailSalon > p:nth-of-type(1){box-sizing:border-box;width:26em;}
html > body > article > section > p:nth-of-type(2){font-size:2.4em;bottom:20%;}
html > body > article > section#wholesaleTrade > p:nth-of-type(2) > br.none{display:inline !important;}

html > body > article > section > a{bottom:200px;}


html > body > article > section#top > div > p:nth-child(1){font-size:5em;}
html > body > article > section#top > div > p:nth-child(2){font-size:3em;line-height:2.5em;height:2.5em;width:14em;top:40px;}
html > body > article > section#top > div > a > img{width:500px;}
	}
	/* 横向き */
	@media screen and (orientation: landscape){

html > body > article > section > p:nth-of-type(1){font-size:2.2em;line-height:1.5em;}
html > body > article > section > p:nth-of-type(2){font-size:1.5em;bottom:10%;}

html > body > article > section > a{width:40px;height:40px;bottom:20px;}

html > body > article > section#top > div{top:80px;}
html > body > article > section#top > div > p:nth-child(1){padding-bottom:10px;}
html > body > article > section#top > div > p:nth-child(2){top:20px;}
html > body > article > section#top > div > a{top:30px;}
	}
}