@charset "UTF-8";
@import url("https://use.typekit.net/abt2sgu.css");
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@400;700&display=swap');

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;}

/*contents*/
#top{width: 100vw; position: relative; overflow: hidden;} 

#contents{min-width: 982px; width: calc(100% - 100px); margin: 0 auto; position: relative;}
.style{position: relative; margin-bottom: 220px;}
.style3{margin-bottom: 400px;}
.style5{margin-bottom: 400px;}
.style7{margin-bottom: 600px;}
.style9{margin-bottom: 600px;}

.flexContent1{display: flex; justify-content: space-between;}
.flexContent2{display: flex; align-items: center;}
.flexContent3{display: flex; justify-content: space-between; align-items: center;}

.logoWrap{width: calc(100% - 200px);  margin: 20px auto; }
.mainLogo{width: 150px; }

.mainVisual{width: calc(100% - 200px); margin: 0 auto; }
.mainVisual p{font-size: 14px; line-height: 2; font-family: 'Noto Sans JP', sans-serif; font-weight: 400;}
.mainVisual .mainImg{opacity: 0; margin-bottom: 60px; animation: fadeIn 1.0s ease forwards; animation-delay: 0.3s; }

@keyframes fadeIn {
  0%  { opacity: 0;}
  100%  { opacity: 1;}
}

.mainVisual .mainTit{margin-bottom: 50px;}
.mainVisual .mainTit p{font-family: trajan-sans-pro, sans-serif; font-weight: 400; font-style: normal; overflow: hidden;}
.mainVisual .mainTit .tit1 p{font-size: 70px !important; margin-bottom: 35px; line-height: 0.9;}
.mainVisual .mainTit .tit2 p{font-size: 26px !important;}
.mainVisual .leadTxt{margin-bottom: 45px;}
.mainVisual .staff{font-size: 12px; line-height: 1.5; margin-bottom: 200px;}

.txtWrap .txt,.txtWrap .txt span{display: block;}
.txtWrap .txt{font-family: trajan-sans-pro, sans-serif; font-weight: 400; font-style: normal; font-size: 95px; line-height: 1; overflow: hidden; opacity: 0; margin: 0;}
.txtWrap .txt span{
  opacity: 0;
  transform: matrix(1, 0, 0, 1, 0, 100);
  transition: 1.2s cubic-bezier(.01,.9,.31,1);	
}
.txtWrap.is-animated .txt{opacity: 1;}
.txtWrap.is-animated .txt span{
  opacity: 1;
  transform: matrix(1, 0, 0, 1, 0, 0);	
}

.movWrap{width: 600px;}

.img1-1{width: 38%; margin: 0 auto 30px;}
.img1-2{width: 27%; position: absolute; right: 8%; top:400px;}
.txt1{position: absolute; top: 36%; left: 8%;}
.credit1{width: 480px; margin: 0 auto 0;}

.img2-1{width: 48%;}
.credit2{margin-left: 50px;}

.mov1{margin-left: auto;}
.txt2{position: absolute;
	top: 50%;
    left: 80px;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
}
.credit3{position: absolute; left: 80px; bottom: 20px;}

.img2-2{width: 46%; margin: 0 auto 30px;}
.credit4{width: 46%; margin: 0 auto;}

.img3-1{width: 40%; margin: 0 0 30px 20%;}
.img3-2{width: 32%; position: absolute; right: 12%; top:46%;}
.credit5{width: 40%; margin: 0 0 0 20%;}

.img4-1{width: 40%; margin: 0 auto;}
.credit6{width: 480px; position: absolute; left: 100px; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);}

.img4-2{width: 56%;}
.credit7{position: absolute; left: 60%; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);}

.img4-3{width: 62%; margin-left: auto;}
.txt3{position: absolute; top: 90px; left: 11%; z-index: 10;}
.credit8{position: absolute; left: 12%; top: 50%; transform: translateY(-50%); -webkit-transform: translateY(-50%); -ms-transform: translateY(-50%);}

.img5-1{width: 40%; margin: 0 0 320px 8%;}
.img5-2{width: 55%; position: absolute; right: 3%; top: 53%;}
.credit9{position: absolute; top: 22%; left: 54%;}

.img5-3{width: 40%; margin-left: auto;}
.img5-4{width: 680px; position: absolute; left: 4%; top: 70%;}
.credit10{position: absolute; top: 34%; left: 21%;}
.txt4{position: absolute; top:17%; left: 20%;}

.img6-1{width: 40%; z-index: 10; position: relative;}
.img6-2{width: 53%; position: absolute; right: 3%; top: 60%;}
.credit11{position: absolute; top: 25%; left: 44%;}

.img7{width: 40%; margin-left: 10%; margin-bottom:500px;}
.mov2{position: absolute; right: 0; top: 70%;}
.credit12{position: absolute; top: 230px; left: 700px;}

.img8Box{width: 600px; margin: 0 auto;}
.img8{width: 480px;}
.credit13{margin-left: 40px;}

.img9-1{width: 40%; }
.img9-2{width: 44%; position: absolute; left: 44%; top: 37%;}
.txt5{position: absolute; top: 130px; left: 600px;}
.credit14{position: absolute; left: 27%; top: 125%;}

.img10-1{width: 43%; margin: 0px 21% 450px auto;}
.img10-2{width: 36%; position: absolute; left: 5%; top: 40%;}
.credit15{width: 43%; margin: 0 0 0 auto; position: absolute; top: 103%; right: 12%;}

.img11-1{width: 42%; margin:0 0 50px 7%;}
.img11-2{width: 65%; margin:0 0 50px auto;}
.img11-3{width: 65%; margin:0 0 400px 200px;}
.credit16{position: absolute; left: 15%; top:53%;}

.img12-1{width: 43%; margin: 0 auto; position: relative; z-index: 10;}
.img12-2{width: 40%; margin:-100px 0 0 200px;}
.img12-3{width: 40%; margin: -70px 200px 0 auto; position: relative; z-index: 15;}
.txt6{position: absolute; top: -6.5%; left: 13%; z-index: 20;}
.credit17{position: absolute; left: 200px; bottom:300px;}

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

.credit{font-size:12px; line-height: 2.4; font-family: trajan-sans-pro, sans-serif; font-weight: 400; font-style: normal;}
.credit span{margin-left: 20px;}
.credit a{color: #000; text-decoration: none; }
.credit a span{background-color: #000; color: #FFF; padding: 0 3px 1px; border:1px solid #000; box-sizing: border-box;}
.credit a:hover span{background-color: #FFF;  color: #000;}

.shopInfo{width: 680px; margin: 0 auto 200px; text-align: center;}
.shopInfo .titInfo{font-family: trajan-sans-pro, sans-serif; font-weight: 400; font-style: normal; font-size: 35px; line-height: 1; margin-bottom: 40px;}
.shopInfo p{font-size: 14px; line-height: 2; font-family: 'Noto Sans JP', sans-serif; font-weight: 400; margin-bottom: 40px; }
.shopInfo p span{font-weight: 700;}
.shopInfo .insta{width: 30px; margin: 0 auto;}

.shopInfo .jsShop{ padding-top: 60px; border-top: 1px solid #CCC; margin-top: 60px;}


footer{width: calc(100% - 200px); margin: 0 auto; border-top: 1px solid; padding-bottom: 100px; }
.ftLogo{width: 200px; margin: 100px auto 80px;}
.copyright{text-align: center; font-size: 14px; font-family: trajan-sans-pro, sans-serif; font-weight: 400; font-style: normal;}

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

@media(max-width:982px){
	#contents{min-width: 982px; width: 982px; }
}

@media(max-width:768px){
	.pc{display: none;} .sp{display: block;}
	#top{width: 100vw; position: relative; overflow: hidden;} 
	
	#contents{min-width: 100%; width: 100%; margin: 0 auto; position: relative;}
	.style{position: relative; margin-bottom: 100px;}
	.style3{margin-bottom: 110px;}

	.style5{margin-bottom: 100px;}
	.style7{margin-bottom: 100px;}
	.style9{margin-bottom: 100px;}
	
	.flexContent1{display: flex; justify-content: space-between;}
	.flexContent2{display: block; align-items: center;}
	.flexContent3{display: block; justify-content: space-between; align-items: center;}
	
	.logoWrap{width: calc(100% - 20px);  margin: 20px auto; }
	.mainLogo{width: 120px; }
	
	.mainVisual{width: 100%; margin: 0 auto; }
	.mainVisual  .mainImg{margin-bottom: 30px;}
	.mainVisual  .mainTit{width: calc(100% - 30px); margin:0 auto 30px; }

	.mainVisual .mainTit .tit1 p{font-size: 46px !important; margin-bottom: 25px; line-height: 0.9;}
	.mainVisual .mainTit .tit2 p{font-size: 20px !important;}
	.mainVisual .leadTxt{margin-bottom: 20px;}
	.mainVisual .staff{font-size: 12px; line-height: 1.5; width: calc(100% - 30px); margin:0 auto 100px; }

	.leadTxt{width: calc(100% - 30px); font-size: 13px; line-height: 2; margin:0 auto 100px; }
	
	.txtWrap .txt,.txtWrap .txt span{display: block;}
	.txtWrap .txt{font-size: 45px; line-height: 1;}
	.txtWrap .txt span{
	  opacity: 0;
	  transform: matrix(1, 0, 0, 1, 0, 100);
	  transition: 1.2s cubic-bezier(.01,.9,.31,1);	
	}
	.txtWrap.is-animated .txt{opacity: 1;}
	.txtWrap.is-animated .txt span{
	  opacity: 1;
	  transform: matrix(1, 0, 0, 1, 0, 0);	
	}
	
	.movWrap{width: 90%;}
	
	.img1-1{width: 76%; margin: 0 0 10px 0; z-index: 10; position: relative;}
	.img1-2{width: 70%; position: relative; right: initial; top:initial; margin: -40px 0 0 auto;}
	.txt1{position: absolute; top: -27px; left: 13px; z-index: 20;}
	.credit1{width: 70%; margin: 20px 0 0 auto;}
	
	.img2-1{width: 80%; margin: 0 auto;}
	.credit2{margin-left: 40px; margin-top: 12px;}
	
	.mov1{margin: -66px 0 0 auto;}
	.txt2{position: relative;
		top: initial;
	    left: initial;
	    margin-left: 10px;
	}
	.credit3{width: 90%;
    position: relative;
    left: initial;
    bottom: initial;
    margin: 12px 0 0 auto;}

	.img2-2{width: 78%; margin: 0 auto 20px;}
	.credit4{width: 78%; margin: 12px auto 0;}
	
	.img3-1{width: 76%; margin: 0 15px 0 auto;}
	.img3-2{width: 68%; position: relative; right: 0; top:0; margin: 20px 0 0 15px;}
	.credit5{width: 80%; margin: 12px 0 0 15px;}
	
	.img4-1{width: 80%; margin: 0 auto;}
	.credit6{width: 80%; position: relative; left: 0; right: 0; top: initial; margin: 12px auto; }
	
	.img4-2{width: 100%;}
	.credit7{position: relative; left: initial; top: 50%; margin:12px 0 0 20px; }
	
	.img4-3{width: 90%; margin: -20px 0 0 auto;}
	.credit8{width: 90%; position: relative; left: initial; top: initial; margin: 12px 0 0 auto;}
	.txt3{position: relative; top: initial; left: initial; margin: 0 0 0 15px;}
	
	.img5-1{width: 80%; margin: 0 0 0 auto;}
	.img5-2{width: 90%; position: relative; right: initial; top: initial; margin: 15px 0 0 0;}
	.credit9{position: relative; top: initial; left: 0; margin: 12px 0 130px 15px;}
	
	.img5-3{width: 75%; margin-left: 10px;}
	.img5-4{width: 90%; position: relative; left: initial; top: initial; margin: 15px 10px 0 auto;}
	.credit10{position: relative; top: initial; left: initial; right: initial; width: 90%; margin: 12px 0 0 auto;}
	.txt4{position: absolute; top:-21px; left: 125px;}
	
	.img6-1{width: 80%; margin: 0 auto 15px; z-index: 10; position: relative;}
	.img6-2{width: 90%; margin: 0 auto; position: relative; right: 0; top: initial; z-index: 15;}
	.credit11{position: relative; top: initial; left: 0; width: 90%; margin: 10px auto 0;}
	
	.img7{width: 85%; margin:0 0 0 15px;}
	.mov2{position: relative; right: 0; top: initial; margin: 15px 10px 0 auto;}
	.credit12{position: relative; top: initial; left: 0;  width: 90%; margin: 15px 0 0 auto;}
	
	.img8Box{width: 80%; margin: 0 auto 0;}
	.img8{width: 100%;}
	.credit13{margin: 15px 0 130px 0;}
	
	.img9-1{width: 75%; margin:0 20px 0 auto;}
	.img9-2{width: 70%; position: relative; left: 0; top: initial; margin: 15px 0 0 15px;}
	.txt5{position: absolute; top: -20px; left: 10px;}
	.credit14{position: relative; left: 0; top: initial; margin: 15px 0 0 15px;}
	
	.img10-1{width: 80%; margin: 0px auto;}
	.img10-2{width: 90%; position: relative; left: 0; top: initial; margin: 15px 0 0 15px;}
	.credit15{width: 90%; margin: 15px 0 0 15px; position: initial; top: initial; right: initial;}
	
	.img11-1{width: 80%; margin: 0 0 15px 15px;}
	.img11-2{width: 90%;  margin: 0 0 15px auto;}
	.img11-3{width: 90%; margin: 0;}
	.credit16{position: relative; left: 0; top:initial; margin: 15px 0 130px 15px;}
	
	.img12-1{width: 70%; margin: 0 auto; position: relative; z-index: 10;}
	.img12-2{width: 70%; margin: -60px 0 0 0; z-index: 9; position: relative;}
	.img12-3{width: 70%; margin: -35px 0 0 auto; position: relative; z-index: 8;}
	.txt6{position: absolute; top: -60px; left: 15px; z-index: 20;}
	.credit17{position: relative; left: initial; bottom:initial; margin: 15px 0 0 20px;}
	
	.marL{margin-left: auto;}
	.marC{margin: 0 auto;}
	.marR{margin-right: auto;}

	.shopInfo{width: calc(100% - 20px); margin: 0 auto 80px; text-align: center;}
	.shopInfo .titInfo{font-size: 28px; line-height: 1; margin-bottom: 30px;}
	.shopInfo p{font-size: 13px; margin-bottom: 30px; }
	.shopInfo .insta{width: 30px; margin: 0 auto;}
	.shopInfo .jsShop{ padding-top: 40px; border-top: 1px solid #CCC; margin-top: 40px;}
	
	.credit{font-size:12px; line-height: 2.4; font-family: trajan-sans-pro, sans-serif; font-weight: 400; font-style: normal;}
	.credit span{margin-left: 20px;}
	.credit a{color: #000; text-decoration: none; }
	.credit a span{background-color: #000; color: #FFF; padding: 0 3px 1px; border:1px solid #000; box-sizing: border-box;}
	.credit a:hover span{background-color: #FFF;  color: #000;}
	
	footer{width: 100%; padding-bottom: 80px; }
	.ftLogo{width: 120px; margin: 80px auto 45px;}
	.copyright{font-size: 12px;}


}