@charset "UTF-8";

@font-face {
    font-family: 'q_stencilregular';
    src: url('../font/q_stencil/q_stencil-webfont.woff2') format('woff2'),
         url('../font/q_stencil/q_stencil-webfont.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

body { background: #fff }
#third-anniversary { /*font-family: neue-haas-grotesk-text, sans-serif;*/ color: #172129 }

#third-anniversary .kv { position: relative; opacity: 0 }
#third-anniversary .kv h1 { position: absolute; left:0; top: 14.6%; width: 100%; z-index: 10; }
#third-anniversary .kv h2 { position: absolute; left:0; bottom: 14.6%; width: 100%; z-index: 10 }
#third-anniversary .kv .thankyou { position: absolute; left:0; bottom: -14.6%; width: 0; z-index: 10; overflow: hidden }
#third-anniversary .kv .vis { position: relative; z-index: 0 }

#third-anniversary .intro { padding: 120px 0 }
#third-anniversary .intro p.serif { font-size: 17px; letter-spacing: 0.12em }
#third-anniversary .intro p.read { font-size: 16px; font-weight: bold }
#third-anniversary .intro .sep { margin: 30px 0 }

#third-anniversary .bigtit h2 { position: relative; font-family: 'q_stencilregular'; font-size: 72px; letter-spacing: 0.12em; line-height: 1.12em; opacity: 0 }
#third-anniversary .bigtit span.ln { position: relative; margin: 0; padding: 0; opacity: 0; left: -20px }

#third-anniversary #newmodel { padding: 0 11.4vw }
#third-anniversary #newmodel .model { padding: 40px 0 0 }
#third-anniversary #newmodel .model .modeltit { margin: 30px 0 0 }
#third-anniversary #newmodel .model .modeltit h3 { font-size: 32px; font-weight: 500; line-height: 1em }
#third-anniversary #newmodel .model p { margin-top: 1em }
#third-anniversary #newmodel .model .btn-more01 { margin-top: 0; }
#third-anniversary #newmodel .model .btn-more01 a {font-size: 24px; line-height: 56px }

.slider {  }
.slider .ph { position: relative }
.slider .ph img { position: absolute; left: 0; top: 0; display: none; width: 100%; height: auto }
.slider .thumbs { width: auto; margin: -50px auto 0; font-size: 0 }
.slider .thumbs li { display: inline-block; border: solid 1px #e7e7e7; margin-left: -1px; cursor: pointer; position: relative; z-index: 0 }
.slider .thumbs li.on { z-index: 10 }
.slider .thumbs li span { position: absolute; left: 0; top: 0; width: 140px; height: 50px; border: solid 2px #fff }
.slider .thumbs li.on span { left: -1px; top: -1px; border: solid 2px #b7b7b7 }

#third-anniversary #letherlcase { position: relative; margin: 40px 0 0 }
#third-anniversary #letherlcase .cont { position: absolute; left: 5.7vw; top: 20%; text-align: left; z-index: 10 }
#third-anniversary #letherlcase .cont .bigtit { margin-bottom: 30px }
#third-anniversary #letherlcase .cont .bigtit h2 { font-size: 64px; letter-spacing: 0.08em  }
#third-anniversary #letherlcase .cont h3.serif { font-size: 20px; font-weight: normal; margin-bottom: 11.7% }
#third-anniversary #letherlcase .cont p { width: 38.6vw; text-shadow: rgba(255, 255, 255, 0.95) 1.95px 1.95px 0.25px; }

#third-anniversary #originalitems { position: relative; margin: -64px 0 0 }
#third-anniversary #originalitems .bigtit { width: 50vw; margin-left: 44.3vw; text-align: left }
#third-anniversary #originalitems .bigtit span.ln img { margin-left: 11.4vw }
#third-anniversary #originalitems .cont { position: relative; float: left; width: 50%; text-align: left }
#third-anniversary #originalitems .cont h3 { font-size: 20px; font-weight: normal; margin-bottom: 30px; letter-spacing: 0.12em }
#third-anniversary #originalitems .cont h3 .en { font-family: 'q_stencilregular'; color: #c09f7b; font-size: 36px }
#third-anniversary #originalitems .cont:nth-child(1) .cont-inner { padding: 0 5.7vw }
#third-anniversary #originalitems .cont:nth-child(1) .vis { margin: 60px 0 0 -5.7vw; width: 112.87% }
#third-anniversary #originalitems .cont:nth-child(2) { margin-top: 120px }
#third-anniversary #originalitems .cont:nth-child(2) .cont-inner { padding: 0 5.7vw 0 0 }

#third-anniversary #interview { padding: 80px 0 0 }
#third-anniversary #interview .bigtit { position: relative; z-index: 10 }
#third-anniversary #interview .portrait { position: relative; margin-top: -60px }
#third-anniversary #interview .portrait .name { position: absolute; left: 5.7vw; bottom: 40px; text-align: left }
#third-anniversary #interview .portrait .name h3 { font-size: 32px; letter-spacing: 0.08em }
#third-anniversary #interview .portrait p { position: absolute; right: 5.7vw; bottom: 40px; color: #fff; text-align: right }
#third-anniversary #interview .cont { padding: 30px 11.7vw 0; text-align: left }
#third-anniversary #interview .cont .cont-inner { padding-left: 30px; border-left: solid 4px #c09f7b }
#third-anniversary #interview .cont .cont-inner h3 { font-weight: 500; font-size: 18px }
#third-anniversary #interview .cont .cont-inner h3 span { font-size: 14px }

#third-anniversary #interview h4 { font-size: 20px; font-weight: 500; letter-spacing: 0.08em; margin:0 0 10px; }
#third-anniversary #interview h4 span { display:inline-block; letter-spacing:-0.2em; padding:0 8px 0 0; }
#third-anniversary #interview .cap { font-size:12px; line-height:2.0; margin:10px 0 0; }
#third-anniversary #interview .block01 { margin:90px 0 65px; }
#third-anniversary #interview .block01 .box-l { float:left; width:50%; }
#third-anniversary #interview .block01 .box-l .inner { padding:0 2.85vw 0 0; }
#third-anniversary #interview .block01 .box-r { float:right; width:50%; margin:0 -11.7vw 0 0; }
#third-anniversary #interview .block01 .box-r .inner { padding:0 0 0 2.85vw; margin:0 0 0 -11.7vw; }
#third-anniversary #interview .block02 { margin:0 0 65px; }
#third-anniversary #interview .block02 .box-l { float:left; width:50%; margin:0 -11.7vw 0 0; }
#third-anniversary #interview .block02 .box-l .inner { padding:0 2.85vw 0 0; margin:0 0 0 -11.7vw; }
#third-anniversary #interview .block02 .box-r { float:right; width:50%; margin:0 0 0 0; }
#third-anniversary #interview .block02 .box-r .inner { padding:0 0 0 2.85vw; }
#third-anniversary #interview .block02 .cap { text-align:right; }
#third-anniversary #interview .block03 { margin:0 0 65px; }
#third-anniversary #interview .block03 .box-l { float:left; width:50%; }
#third-anniversary #interview .block03 .box-l .inner { padding:0 2.85vw 0 0; }
#third-anniversary #interview .block03 .box-r { float:right; width:50%; }
#third-anniversary #interview .block03 .box-r .inner { padding:0 0 0 2.85vw; }
#third-anniversary #interview .block04 { margin:0 0 65px; }
#third-anniversary #interview .block04 .box-l { float:left; width:50%; }
#third-anniversary #interview .block04 .box-l p.pr { padding-right: 2.85vw }
#third-anniversary #interview .block04 .box-l .inner { padding:0 2.85vw 0 0; }
#third-anniversary #interview .block04 .box-r { float:right; width:50%; }
#third-anniversary #interview .block04 .box-r .inner { padding:50px 0 0 2.85vw; }
#third-anniversary #interview .btn-back { margin-top: 40px }

#third-anniversary #brandconcept { padding: 120px 0 0 }
#third-anniversary #brandconcept .cont { position: relative }
#third-anniversary #brandconcept .cont .cont-inner { position: absolute; left: 50%; top: 13.33%; padding: 0 5.7vw; }
#third-anniversary #brandconcept .cont .cont-inner h3 { font-size: 36px; color: #fff; margin-bottom: 20px }
#third-anniversary #brandconcept .cont .cont-inner p { color: #fff; text-align: left }
#third-anniversary #brandconcept .cont .tagline {  position: absolute; left: 50%; bottom: 4.7vw; padding: 0 5.7vw; color: #fff; font-size: 72px; line-height: 0.5em; font-family: 'q_stencilregular'; display: none }
#third-anniversary #brandconcept .cont .tagline .txtlt { opacity: 0 }

#third-anniversary footer { padding: 60px 0 30px }
#third-anniversary footer p { margin-top: -1em }

.fd { position: relative; top: 60px; opacity: 0 }


@media screen and (max-width: 780px) {
	
	#third-anniversary .kv h1 img { width: 60% }
	#third-anniversary .kv h2 img { width: 84% }
	#third-anniversary .kv .thankyou { bottom: -22%; }
	#third-anniversary .kv .thankyou img { width: 50% }
	
	#third-anniversary .intro { padding: 50px 5.4vw; text-align: left }
	#third-anniversary .intro p.serif { font-size: 15px; }
	#third-anniversary .intro p.serif br { display: none }
	#third-anniversary .intro p.read { font-size: 14px; font-weight: bold }
	#third-anniversary .intro .sep { margin: 20px 0; text-align: center }
	#third-anniversary .intro .sep img { width: 60px }
	
	#third-anniversary .bigtit h2 { font-size: 40px; letter-spacing: 0.112em; line-height: 1em }
	#third-anniversary .bigtit span.ln img { height: 10px }
	
	#third-anniversary #newmodel { padding: 0 }
	#third-anniversary #newmodel .model { padding: 40px 0 0 }
	#third-anniversary #newmodel .model .modeltit { margin: 20px 0 15px }
	#third-anniversary #newmodel .model .modeltit h3 { font-size: 26px; }
	#third-anniversary #newmodel .model p { padding: 0 5.4vw }
	
	.slider .ph { position: relative }
	.slider .ph img { position: absolute; left: 0; top: 0; display: none; width: 100%; height: auto }
	.slider .thumbs { width: 246px; margin: 10px auto 0; font-size: 0 }
	.slider .thumbs li img { width: 80px }
	.slider .thumbs li span { position: absolute; left: 0; top: 0; width: 80px; height: 30px; border: solid 2px #fff }
	
	#third-anniversary #letherlcase { position: relative; margin: 40px 0 0 }
	#third-anniversary #letherlcase .vis { margin-left: -20%; width: 120% }
	#third-anniversary #letherlcase .cont { position: relative; left: 5.4vw; top: -30px; text-align: left; z-index: 10 }
	#third-anniversary #letherlcase .cont .bigtit { margin-bottom: 15px }
	#third-anniversary #letherlcase .cont .bigtit h2 { font-size: 32px; letter-spacing: 0.08em  }
	#third-anniversary #letherlcase .cont h3.serif { font-size: 16px; font-weight: normal; margin-bottom: 15px }
	#third-anniversary #letherlcase .cont p { width: 88.6vw }
	
	#third-anniversary #originalitems { position: relative; margin: 0 }
	#third-anniversary #originalitems .bigtit { width: 88.6vw; margin-left: 5.7vw; text-align: left; margin-bottom: 15px }
	#third-anniversary #originalitems .bigtit span.ln img { margin-left: 0 }
	#third-anniversary #originalitems .cont { position: relative; float: none; width: 100%; text-align: left }
	#third-anniversary #originalitems .cont h3 { font-size: 18px; font-weight: normal; margin-bottom: 10px; letter-spacing: 0.12em }
	#third-anniversary #originalitems .cont h3 .en { font-family: 'q_stencilregular'; color: #c09f7b; font-size: 26px }
	#third-anniversary #originalitems .cont:nth-child(1) .cont-inner { padding: 0 5.7vw }
	#third-anniversary #originalitems .cont:nth-child(1) .vis { margin: 20px 0 0; width: 100% }
	#third-anniversary #originalitems .cont:nth-child(2) { margin-top: 40px }
	#third-anniversary #originalitems .cont:nth-child(2) .cont-inner { padding: 0 5.7vw }
	
	#third-anniversary #interview { padding: 40px 0 0 }
	#third-anniversary #interview .portrait { position: relative; margin-top: -40px }
	#third-anniversary #interview .portrait .vis { width: 150%; margin: 0 -25% }
	#third-anniversary #interview .portrait .name { position: relative; left: 5.7vw; bottom: inherit; text-align: left }
	#third-anniversary #interview .portrait .name h3 { font-size: 20px; letter-spacing: 0.08em }
	#third-anniversary #interview .portrait p { display: none }
	#third-anniversary #interview .cont { padding: 15px 5.4vw 0; text-align: left }
	#third-anniversary #interview .cont .cont-inner { padding-left: 15px; border-left: solid 3px #c09f7b }
	#third-anniversary #interview .cont .cont-inner h3 { font-weight: 500; font-size: 16px }
	#third-anniversary #interview .cont .cont-inner h3 span { font-size: 14px }
	
	#third-anniversary #interview h4 { font-size: 18px; font-weight: 500; letter-spacing: 0.08em; margin:0 0 10px; }
	#third-anniversary #interview h4 span { display:inline-block; letter-spacing:-0.2em; padding:0 6px 0 0; }
	#third-anniversary #interview .cap { font-size:11px; line-height:2.0; margin: 10px 5.7vw 0; }
	#third-anniversary #interview .block01 { margin:40px 0; }
	#third-anniversary #interview .block01 .box-l { float:none; width:100%; }
	#third-anniversary #interview .block01 .box-l .inner { padding:0; }
	#third-anniversary #interview .block01 .box-r { float:none; width:100%; margin:0; }
	#third-anniversary #interview .block01 .box-r .inner { padding:0; margin: 20px -5.7vw 0; }
	#third-anniversary #interview .block02 { margin:0 0 40px; }
	#third-anniversary #interview .block02 .box-l { float:none; width:100%; margin:0; }
	#third-anniversary #interview .block02 .box-l .inner { padding:0; margin:20px -5.7vw 0; }
	#third-anniversary #interview .block02 .box-r { float:none; width:100%; margin:0 0 0 0; }
	#third-anniversary #interview .block02 .box-r .inner { padding:0; }
	#third-anniversary #interview .block02 .cap { margin: 10px 5.7vw 0; text-align:left; }
	#third-anniversary #interview .block03 { margin:0 0 40px; }
	#third-anniversary #interview .block03 .box-l { float:none; width:100%; }
	#third-anniversary #interview .block03 .box-l .inner { padding:0; }
	#third-anniversary #interview .block03 .box-r { float:none; width:100%; }
	#third-anniversary #interview .block03 .box-r .inner { padding:0; margin:20px -5.7vw 0;  }
	#third-anniversary #interview .block04 { margin:0 0 40px; }
	#third-anniversary #interview .block04 .box-l { float:none; width:100%; }
	#third-anniversary #interview .block04 .box-l .inner { padding:0; margin:20px -5.7vw 0; }
	#third-anniversary #interview .block04 .box-r { float:none; width:100%; }
	#third-anniversary #interview .block04 .box-r .inner { padding:40px 0 0 }
	#third-anniversary #interview .btn-back { margin-top: 20px }
	
	#third-anniversary #brandconcept { padding: 60px 0 0 }
	#third-anniversary #brandconcept .cont { position: relative }
	#third-anniversary #brandconcept .cont .cont-inner { position: absolute; left: 50%; top: 13.33%; padding: 0; }
	#third-anniversary #brandconcept .cont .cont-inner h3 { font-size: 14px; color: #fff; margin-bottom: 20px }
	#third-anniversary #brandconcept .cont .cont-inner p { color: #fff; text-align: left; display: none }
	#third-anniversary #brandconcept .cont .cont-inner .btn-more02 { display: none }
	#third-anniversary #brandconcept .cont .tagline {  position: absolute; left: 50%; bottom: 4.7vw; padding: 0; color: #fff; font-size: 24px; line-height: 0.5em; font-family: 'q_stencilregular'; }
	
	#third-anniversary footer { padding: 40px 0 20px }
	#third-anniversary footer img { height: 96px }
	#third-anniversary footer p { margin-top: -1em; font-size: 11px }
}