@charset "UTF-8";
@import url("https://use.typekit.net/uzo6geb.css");

html, body, div, span, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
abbr, address, cite, code,
del, dfn, em, img, ins, kbd, q, samp,
small, strong, sub, sup, var,
b, i,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, dialog, figure, footer, header,
hgroup, menu, nav, section,
time, mark, audio, video {
	margin:0;
	padding:0;
	border:0;
	outline:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}
body {
	line-height:1;
}

article, aside, dialog, figure, footer, header,
hgroup, nav, section {
	display:block;
}

ul {
	list-style:none;
}

blockquote, q {
	quotes:none;
}

blockquote:before, blockquote:after,
q:before, q:after {
	content:'';
	content:none;
}

a {
	margin:0;
	padding:0;
	border:0;
	font-size:100%;
	vertical-align:baseline;
	background:transparent;
}

ins {
	background-color:#ff9;
	color:#000;
	text-decoration:none;
}

mark {
	background-color:#ff9;
	color:#000;
	font-style:italic;
	font-weight:bold;
}

del {
	text-decoration: line-through;
}

abbr[title], dfn[title] {
	border-bottom:1px dotted #000;
	cursor:help;
}

table {
	border-collapse:collapse;
	border-spacing:0;
}

hr {
    display:block;
    height:1px;
    border:0;
    border-top:1px solid #cccccc;
    margin:1em 0;
    padding:0;
}

input, select {
	vertical-align:middle;
}
img{width: 100%; height: auto;}

.pc{display: block;} .sp{display: none;}

html, body { height: 100%; font-size: 10px; }
body { color: #000; font-family: adobe-garamond-pro, serif; font-weight: 400; font-style: normal;}

#top{margin: 0 calc(50% - 50vw) 120px; width: calc(100vw - 8px); height: 600px; position: relative; overflow: hidden; text-align: center; } 

.titMain{width:283px; position: absolute; top:32.3%; left: 68.7%; z-index: 10; opacity: 0; transition : all 0.8s 0.8s ease;}
.titMain.show {opacity: 1; transform : translate(0, 0);}

#contents{min-width: 982px; width: calc(100% - 100px); margin: 0 auto; position: relative;}
.style{position: relative; margin-bottom: 200px;}
.style p{margin-bottom:40px;}
.flexContent{display: flex; justify-content: space-between;}

.w280{min-width: 280px; width: 28%;}
.w350{width: 50%;}
.w420{min-width: 420px; width: 42%;}
.w480{min-width: 480px; width: 48%;}
.w520{min-width: 520px; width: 52%;}
.w640{min-width: 640px; width: 64%;}
.w840{min-width: 800px; width: 80%;}
.img3Wrap{width: 60%;}
.img5Wrap{width: 60%; margin-left: 25%;}
.img1Wrap,.img7Wrap{width: 65%;}

.img1-2{margin-top: 320px;}
.img2-3{margin-left: 100px;}
.img3-3{margin-top: 300px;}
.img5-1{margin-left: 180px;}
.img6-1{margin-left: 150px;}
.img6-2{width: 30%; margin: -130px 15% 0 0;}
.img7-2{margin-top: 240px;}
.img8-1{margin-left: 200px;}
.img8-2{margin-left: auto;}

.marL{margin-left: auto;}
.marC{margin: 0 auto;}
.marR{margin-right: auto;}

.credit{font-size:13px; line-height: 1.6; position: absolute;}
.credit a{color: #000;}

.credit1{top:71%; left: 23%;}
.credit2{top:80%; left: 47%;}
.credit3{top:86%; left: 22%;}
.credit4{top:65%; left: 12%;}
.credit5{top:41%; left: 57%;}
.credit6{top:24%; left: 56%;}
.credit7{top:38%; left: 21%;}
.credit8{top:75%; left: 30%;}
	
.staffCredit{font-size: 13px; line-height: 1.6; text-align: center; padding-bottom: 150px;}

.btnWrap{padding-bottom: 180px;}
.btnRect a{display: block; width: 400px; height: 50px; line-height: 50px; font-size: 13px; color: #FFF; background-color: #000; margin: 0 auto 30px; border: 2px solid #000; box-sizing: border-box; transition: background-color 0.4s; text-align: center; font-family: adobe-caslon-pro, serif; font-weight: 400;font-style: normal;}
.btnRect a:hover{color: #000; background-color: #FFF; text-decoration: none;}
.insta{width: 42px; margin: 0 auto;}

/* look */
#look{display: none; position: relative; z-index: 10; margin: 0 calc(50% - 50vw); width: calc(100vw - 8px); min-height:100vh; padding: 120px 0; background-color: #FFF; position: absolute; top:0; left: 0;}
.lookBox{padding-top: 20px; width: 80%; margin:0 auto 160px; display: flex; justify-content: space-between; align-items: center;}
.lookImg{ margin-bottom: 20px; width: 60%;}
.lookBox .credit{position: relative; width: 35%;}
.lookBox2{display: block;}
.lookBox2 .lookImg{width: 100%;}
.lookBox .credit{pwidth: 100%;}
.btnClose{width: 32px; height: 32px; position: fixed; top:50px; right: 50px; cursor: pointer;}

.lookShow{position: relative; padding-top: 20px;}
.lookShow::before{content: ""; position: absolute; top: 40px; right: 20px; width: 30px; height: 30px; background: url( "https://baycrews.jp/src/feature/20210903_uby/img/btn_open.png" ) 0 0 / 30px 30px no-repeat; z-index: 10; -webkit-transition: all 0.3s ease; transition: all  0.5s ease;}
.lookShow2::before{background: url( "https://baycrews.jp/src/feature/20210903_uby/img/btn_open_bk.png" ) 0 0 / 30px 30px no-repeat;}

.lookShow a{}
.lookShow a:hover{opacity: 0.7;}



/* fadein */
.fadein {transition: 0.8s; -webkit-transition: 0.8s; transform: translate(0px,30px); -webkit-transform: translate(0px,30px); opacity: 0; transition-delay: 0.3s;}
.fadein.scrollin { opacity:1; transform : translate(0, 0); -webkit-transform : translate(0, 0); }
.fadein2 {transition: 0.8s; -webkit-transition: 0.8s; opacity: 0; transition-delay: 0.3s;}
.fadein2.scrollin { opacity:1; }

.slide{opacity: 0; transition : all 0.9s ease; transition-delay: 0.3s;}
.slideL{transform:translate(-40px,0);} 
.slideR{transform:translate(40px,0);}
.slide.show{opacity: 1; transform: translate(0, 0);}

.colorBox{position:relative;}
.colorBox::after{
	content: "";
	display: block;
    position: absolute;
    top: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
    background-color: #E4E3CF;
    transition: width 1.2s cubic-bezier(.43,.05,.17,1) 0.3s;
}
.active.colorBox::after{width:0;}

@media(max-width:982px){
	.credit1{top:650px; left: 200px;}
	.credit2{top:1160px; left: 460px;}
	.credit3{top:1240px; left: 200px;}
	.credit4{top:567px; left: 90px;}
	.credit5{top:500px; left: 590px;}
	.credit6{top:290px; left: 560px;}
	.credit7{top:600px; left: 200px;}
	.credit8{top:850px; left: 270px;}
	
	.img6-2{width: 30%; margin: -130px 100px 0 0;}
	#look{ margin: 0 auto; width: 982px;}
}

@media(max-width:768px){

	#top{width: 100%; height: auto; margin: 0 auto 60px; position: relative;} 
	.titMain{width: 36%; position: absolute; top:7.2%; left: 6%;}
	.titMain.show {opacity: 1; transform : translate(0, 0);}
	.pc{display: none;} .sp{display: block;}
	
	#contents{width: 100%; min-width: 100%; margin: 0 auto; overflow: hidden;}
	.style{position: relative; margin-bottom: 100px;}
	.style p{margin-bottom:20px;}
	.flexContent{display: flex; justify-content: space-between;}
	
	.w280{min-width:33%; width: 33%;}
	.w340{min-width:50%; width: 50%;}
	.w350{min-width:50%; width: 50%;}
	.w420{min-width:80%; width: 80%;}
	.w480{min-width:80%; width: 80%;}
	.w520{min-width:82%; width: 82%;}
	.w640{min-width:86%; width: 86%;}
	.w840{min-width:100%; width: 100%;}
	.img3Wrap{width: 92%;}
	.img5Wrap{width: 100%; margin-left: 0;}
	.img1Wrap{width: 92%;}
	.img7Wrap{width: 100%;}
	
	.img1-2{margin-top: 120px;}
	.img2-3{margin-left: 5%;}
	.img3-3{margin-top: 140px;}
	.img4-1{margin-left: 5% !important;}
	.img5-1{margin-left: 0; width: 82%; margin-left: auto; margin-right: 5%;}
	.img6-1{margin-left: 3%;}
	.img6-2{margin: -60px 0 0 0;}
	.img7-2{margin-top: 120px;}
	.img8-1{width: 100%; margin:0 auto;}
	.img8-2{margin-left: auto;}
	
	.marL{margin-left: auto;}
	.marC{margin: 0 auto;}
	.marR{margin-right: auto;}
	
	.credit{font-size:13px; line-height: 1.6; position: relative;}
	.credit a{color: #000;}
	.credit1{top:0; left: 0; margin-left: 4%;}
	.credit2{position: absolute; top:83%; left: 0; margin-left: 47%;}
	.credit3{top:0; left: 0; margin-left: 3%;}
	.credit4{top:0; left: 0; margin-left: 5%;}
	.credit5{top:0; left: 0; margin-left: 5%;}
	.credit6{position: relative; top:0; left: 0; margin-left: 5%;}
	.credit7{position: relative; top:0; left: 0; margin-left: 10%; margin-bottom: 35px;}
	.credit8{position: relative; top:0; left: 0; margin-left: 20%;}
	
	.staffCredit{ padding-bottom: 120px;}
	
	/* look */
	#look{margin: 0 auto; width: 100%; padding: 60px 0;}
	.lookBox{padding-top: 20px; width: 80%; margin:0 auto 80px;display: block; }
	.lookImg{ margin-bottom: 20px; width: 100%; }
	.lookBox .credit{position: relative; width: 100%;}
	.btnClose{width: 20px; height: 20px; top:10px; right: 10px;}		
	
	.lookShow{position: relative; padding-top: 20px;}
	.lookShow::before{top: 30px; right: 10px; width: 20px; height: 20px; background: url( "https://baycrews.jp/src/feature/20210903_uby/img/btn_open.png" ) 0 0 / 20px 20px no-repeat; }
	.lookShow2::before{background: url( "https://baycrews.jp/src/feature/20210903_uby/img/btn_open_bk.png" ) 0 0 / 20px 20px no-repeat;}

	.btnRect a{width: calc(100% - 30px); height: 50px; line-height: 50px; margin: 0 auto 40px;}
	.insta{width: 7.8%; margin: 0 auto;}
	.btnWrap{padding-bottom: 100px;}
}