@charset "UTF-8"; /*--------------------------------------------
main
--------------------------------------------*/
#mv .inner        { margin:0 calc(50% - 50vw); width:100vw; max-width:100%; position:relative; max-width:100%; height:auto; display:flex; align-items:flex-start; justify-content:center; overflow:hidden; max-height:500px; }
#mv .inner:before { content:""; display:block; padding-top:35.714285714285715%; }
#mv .inner img    { position:absolute; width:100%; top:0; left:0; opacity:0; transition:.8s; }
#mv .inner img.show { opacity:1; }
#mv .inner h2 { z-index:3; position:absolute; bottom:50px; width:1000px; margin:0 auto; font-size:2.25em; }
#mv .inner h2 strong { background-color:rgba(0,0,0,0.8); color:#fff; padding:20px 10px; display:inline-block; }



/*----------------------
ご挨拶
-----------------------*/
#greeting { background:url("../../common/imgtop/bg1.gif"); color:#fff; }
#greeting .inner div:first-child     { display:flex; justify-content:space-between; align-items:center; border-bottom:solid 1px #fff; padding-bottom:80px; }
#greeting .inner div:first-child div { width:50%; display:block; border-bottom:none; }
#greeting h3 { font-size:3em; }
#greeting h2 { font-size:1.25em; }
main h4      { font-size:2.5em; text-align:center; margin:80px 0 50px 0; }
main h4 span { font-size:0.4em; display:block; }

#greeting ul                     { margin:0; padding:0; }
#greeting figure                 { display:flex; justify-content:space-between; align-items:flex-start; width:100%; padding:0; margin:0 0 80px 0; }
#greeting figure:nth-child(even) { flex-direction:row-reverse; }
#greeting figure img             { width:45%; }
#greeting figure figcaption      { width:49.5%; margin:0; padding:0; font-size:1.25em; line-height: 1.7; }
#greeting figure figcaption h5   { background:#000; color:#fff; padding:25px 20px; font-size:1em; margin:0 0 30px 0; font-size:1.1em; line-height: 1.5; }


/*----------------------
内装工事
-----------------------*/
#interior    { background-color:#000; background-image:url("../../common/imgtop/bg2.jpg"); background-size:100%; background-position:bottom; background-repeat:no-repeat; }
#interior h4 { margin-top:0; color:#fff; }
#interior h5 { background:#003f39; color:#fff; padding:10px; position:relative; margin:0 0 20px 0; font-size:1.5em; }
#interior h5 span { font-weight:300; position:absolute; left:300px; font-size:0.667em; vertical-align: middle; line-height: 2.4; }

#interior .inner div             { display:flex; justify-content:space-between; margin:0 0 80px 0; padding:0; }
#interior .inner div img         { width:32%; }
#interior .inner div.cushion img { width:49%; }

#interior .inner ul     { display:flex; justify-content:space-between; list-style:none; flex-wrap:wrap; margin:30px 0 0 0; padding:0; }
#interior .inner li     { width:49%; padding:0; margin:0 0 20px 0; }
#interior .inner li img { width:100%; height:auto; }

#interior .inner li p { background:#417e77; color:#fff; padding:10px; }


/*----------------------
内装工事
-----------------------*/
#view    { background-color:#000; background-image:url("../../common/imgtop/bg2.jpg"); background-size:100%; background-position:bottom; background-repeat:no-repeat; }
#view h4 { margin-top:0; color:#fff; }
#view h5 { color:#fff; font-size: 1.375em; margin: 60px 0; }
#view h5 span { font-size: 0.727em; display: block; font-weight: 300; margin: 10px 0 0 0; }
#view .inner ul        { display:flex; justify-content:space-between; list-style:none; flex-wrap:wrap; margin:30px 0 0 0; padding:0; }
#view .inner ul li     { width:31.3%; margin:0 0 25px 0; padding:0; }
#view .inner ul li img { width:100%; height:auto; }


/*----------------------
ギャラリー
-----------------------*/
#gallery    { background:#dedede; color:#000; }
#gallery h4 { margin-top:0; }
#gallery ul { display:flex; flex-wrap:wrap; margin:0; padding:0; justify-content:space-between; list-style:none; }
#gallery ul li     { width:31.3%; margin:0 0 25px 0; padding:0; }
#gallery ul li img { width:100%; height:auto; cursor:pointer; }
#gallery ul li a   { display:block; margin:0 0 10px 0; border:2px solid #dedede; outline:none; transition:all .2s; position:relative; }


#gallery ul li a:before,
#gallery ul li a:after  { position:absolute; z-index:2; content:''; width:0; height:0; border:2px solid transparent; box-sizing:content-box; }
#gallery ul li a:before { top:-2px; left:-2px; }
#gallery ul li a:after  { bottom:-2px; right:-2px; }
#gallery ul li a:hover  { color:#000; background:#000; }
#gallery ul li a:hover img { opacity:0.6; }

#gallery ul li a:hover::before,
#gallery ul li a:hover::after  { width:100%; height:100%; }
#gallery ul li a:hover::before { border-bottom-color:#000; border-left-color:#000; transition:height .3s, width .3s .3s; }
#gallery ul li a:hover::after  { border-top-color:#000; border-right-color:#000; transition:height .3s, width .3s .3s; }


/*----------------------
固定背景
-----------------------*/
.parallax-bg { height: 400px; display: flex; justify-content: center; align-items: center; background-size: cover; background-position: center; background-repeat: no-repeat; background-attachment: fixed; }
.img-bg-01 { background-image:url('../../common/imgtop/parallax-bg1.jpg'); }
.img-bg-02 { background-image:url('../../common/imgtop/parallax-bg2.jpg'); }






@media screen and (max-width:1400px) {
	#mv .inner { max-height:initial; width:100%; margin:0; padding:0; max-height:500px; height:auto; }
}



@media only screen and (max-device-width: 1024px) {
	/*safari*/
	_::-webkit-full-page-media, _:future, :root .parallax-bg { background-attachment: initial !important; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -webkit-box-sizing: border-box; box-sizing: border-box; background-repeat: no-repeat; background-size: cover; width: 100%; height: 400px; overflow: auto; }
}