@charset "utf-8";

@media screen and (min-width:641px){
#contents,
#siteHeader {min-width: 1060px;}
}

#loader {background: #fff;}

#navmask {z-index: 100;}

#wrapper {position: relative; background: #111; }
#wrapper::after{content: ''; width: 55%; background: url(/img/top/bg-photography.jpg) right bottom no-repeat #111; height: 100%; position: absolute; right: 50%; top: 0; margin-right: -20px; z-index: 0;}
#siteFooter {display: none;}

#contents {overflow:hidden;}

h1 {position: absolute; left: 0; top: 0; font-size: 0; line-height: 1;}
main h2 {font-family: 'Montserrat'; font-size: 30px; font-weight: bold; letter-spacing: 0.2em;}

[data-content='photography'] {width: 50%; display:block; vertical-align: top; height: 100vh; padding: 0; transition: width 0.5s; z-index: 0; float: left; position: absolute; left: 0; top: 0; opacity: 0;}
[data-content='design'] {width: 50%; display: block; vertical-align: top; height: 100vh; background: #fff; color: #000; transition: 0.5s; position: relative; z-index: 10; float: right; clear: none; opacity: 0;}

.windowloaded [data-content='photography'],
.windowloaded [data-content='design'] {opacity: 1;}


.half { min-height: 640px; cursor: pointer; }
.half div{width: 100%; cursor: pointer; height: 460px; padding:0; position: absolute; top: 0; left: 0;}
.half figure {background: #e3e3e3; width: 480px; margin: 54px auto 104px; position: relative;}
.half figure::after{content: ''; width: 100%; height: 100%; background: rgba(0,0,0,0.3); position: absolute; left: 0; top: 0; transition: 0.5s;}
[data-content='design'] figure::after{background-color: rgba(255,255,255,0.3);}
.half img {
    width: 480px;
    height: 240px;
    object-fit: none;
    object-position: right top;
    transition: 0.5s;
    left: 0; top: 0;
    position: relative;
}

.half .lead {font-size: 16px; line-height: 1; text-align: center; position: absolute; left: 0; top: 0; width: 100%; font-weight: bold; letter-spacing: 0.1em; padding: 0 1.5em;}
.half .lead::after,
.half .lead::before{content: ' - ';}
.half h2 {position: absolute; left: 0; top: 346px; width: 100%;}

main[data-layout='photography'] [data-content='photography'] figure::after{opacity: 0;}
main[data-layout='photography'] [data-content='photography'] img {
    left: -10px; top: 10px;
    width: 480px;
    height: 240px;
    object-fit: none;
    object-position: left bottom;
}
[data-content='design'] div {left: inherit; right: 0;}
main[data-layout='design'] [data-content='design'] img {
    left: -10px; top: 10px;
    width: 480px;
    height: 240px;
    object-fit: none;
    object-position: left bottom;
}
main[data-layout='design'] [data-content='design'] figure::after{opacity: 0;}
/*
main[data-layout='photography'] [data-content='photography'] p.btn a,
main[data-layout='design'] [data-content='design'] p.btn a{filter: brightness(1.2);}
*/
main[data-layout='design'] [data-content='design'] div {marign-right: 20px;}
main[data-layout='photography'] [data-content='photography'] div {marign-right: -20px;}

[data-content='about'] {display: none;}

main[data-layout='design'] [data-content='design'] p.btn a {color: #777; background: #e3e3e3;}
main[data-layout='photography'] [data-content='photography'] p.btn a {color: #777; background: #e3e3e3;}
p.btn a:hover {filter: brightness(1.2);}


@media screen and (max-width:640px){
body,#wrapper  { background: #fff;}

/*

	SP STYLE

**************************************************************/
#siteFooter {display: block;}
#wrapper::after{display: none;}

[data-content='photography'] {width: 100vw !important; display: block; height: 101.333333vw; background: url(/img/top/photography-sp.jpg) center center no-repeat; background-size: cover; color: #fff; position: relative; float: none; left: 0; top: 0;}
[data-content='photography']::after{content: ''; width: 5vw; height: 5vw; border-bottom: 2px solid #fff; border-right: 2px solid #fff; position: absolute; left: 50%; bottom: 5vw; z-index: 10; margin: 0 0 0 -2.5vw; transform:rotate(45deg);}
[data-content='design'] {width:100vw !important; display: block; height: 101.333333vw; background: url(/img/top/design-sp.jpg) center center no-repeat; background-size: cover; float: none;}

.half { min-height: inherit; display: flex; align-items: center;}
.half div{height: auto; position: static; padding: 0;}
.half figure {display: none;}
.half .lead {font-size: 3.733333vw; line-height: 5.733333vw; position: static; font-weight: bold; margin: 4.833333vw 0 4.233333vw;}
.half .lead::after,
.half .lead::before{display: none;}
.half h2 {position: static;font-size: 6.4vw; letter-spacing: 0.1em;}

[data-content='about'] {display: block; height: auto; padding: 15.733333vw 0;}
[data-content='about'] h2 {color: #111; margin-bottom: 8.366667vw;}
[data-content='about'] p {color: #111; font-size: 3.733333vw; line-height: 6.666667vw; text-align: left; padding: 0 6.666667vw; letter-spacing: 0.1em;}
[data-content='about'] p + p {margin-top: 7.366667vw;}


}

/* js */
@media screen and (max-width:640px){
main section {opacity:0; transition: opacity 0.8s ease,transform 0.8s; transform: translateY(0);}
main section.fadein {opacity:1; transform: translateY(0);}
main section.fadein {opacity:1; transform: none;}
}