@charset "UTF-8";
/* ------------------------------------------------------------------------------------------------------------------------ */
html, body {
width: 100%;
height: auto; }
html {
font-size: 62.5%;
-ms-text-size-adjust: 100%;
-webkit-text-size-adjust: 100%; }
.font { font-family: 'Marcellus', serif;}
.pc { display: block;}
.sp { display: none;}
body {
font-family: 'Marcellus', serif;
font-size: 1.2em;
line-height: 2rem;
color: #111;
text-align: center;
-webkit-text-size-adjust: 100%;
background-color: #FFF;
background-repeat: repeat-y;
background-position: center;
background-size: auto;
height: 100%;
/* overflow: hidden;
position: fixed; */
left: 0px;
top: 0px; }
body.loaded {
position: static;
overflow: scroll; }
body.looking {
overflow: hidden; }
a {
color: #111;
text-decoration: none;
cursor: pointer; }
a:hover, a:active, a.active {
color: #999; }
img {
width: 100%;
height: auto;
vertical-align: bottom; }
i {
font-style: normal; }
form, section, p, div, ul, li, dl, dt, dd, a, span, input, textarea {
padding: 0px;
margin: 0px;
box-sizing: border-box;
list-style: none; }
/* ---------------------------------------------------------page--------------------------------------------------------- */

header {
width: 100%;
padding: 36px;
/* position: fixed; */
left: 0px;
top: 0px;
z-index: 999;
box-sizing: border-box;
/* transition: opacity 0.5s ease-in 0.5s; */
/* display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: flex-end;
align-items: center; */
opacity: 1; }
/* header ul {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: flex-start;
align-items: center; }
header ul li a {
color: #111;
font-family: futura-pt-condensed, sans-serif;
font-size: 2.6rem;
font-weight: 700;
line-height: 100%;
letter-spacing: 0em;
font-style: italic;
transition: all 0.25s ease-in 0s; }
header ul li a:hover {
color: #111; }
header ul li:not(:first-child) {
margin-left: 16px; }
header.active {
opacity: 1; } */
#title {
width: 400px;
padding: 0px;
margin: -90px 0 0 0;
position: fixed;
box-sizing: border-box;
left: 36px;
top: 50%;
z-index: 10;
opacity: 0.86;
transition: all 0.75s ease-out 0.5s; }
#title .inner {
width: 100%; }
#title.active {
margin: 0px;
top: 36px; }
main {
width: 100%;
padding: 115px 0 150px 0;
margin: 0px;
position: relative;
z-index: 0;
box-sizing: border-box;
transition: padding-top 1s ease-in 0s;
/*
&::before{
content: '';
width: $w1;
height: 500px;
background-color: $col2;
position: absolute;
left: 0px;
top:0px;
z-index: -1;
}
*/
/* //index */ }
.max { width: 100%;}
.lead { margin: 160px 0 40px; text-align: center;}
.txt { margin: 160px 0; text-align: center;}
h2 { font-size: 1.8em;
  text-align: left;}
main p i {
color: #111;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-size: 1.4rem;
font-weight: 500;
line-height: 2.4rem;
letter-spacing: 0em;
font-style: italic; }
main #index {
width: 98%;
max-width: 1354px;
padding: 0px;
margin: 0 auto;
position: relative;
display: flex;
flex-wrap: wrap;
flex-direction: row;
justify-content: flex-start;
align-items: flex-start; }
main #index .line .thumb:nth-child(1) div {
transition-delay: 0.25s; }
main #index .line .thumb:nth-child(2) div {
transition-delay: 0.5s; }
main #index .line .thumb:nth-child(3) div {
transition-delay: 0.75s; }
main #index .thumb {
width: 33.3333%;
margin: 0px;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: center;
align-items: center;
box-sizing: border-box;
clip-path: inset(0%);
transition: all 0.3s ease-out 0s; }
main #index .thumb div {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: relative;
clip-path: inset(2.5%);
transition: all 0.25s ease-in 0.1s;
opacity: 0;
top: 10px;
cursor: pointer; }
main #index .thumb div strong {
width: 60px;
height: 60px;
background-image: url(../images/btn_detail.png);
text-align: left;
text-indent: 999%;
white-space: nowrap;
display: block;
overflow: hidden;
background-repeat: no-repeat;
background-position: center;
background-size: contain;
position: absolute;
left: 15px;
bottom: 15px;
display: none; }
main #index .thumb.active div {
opacity: 1;
clip-path: inset(0%);
top: 0px; }
main #index .thumb:hover {
opacity: 0.7; }
section#looks {
background-color: #FFF;
width: 100%;
height: 100vh;
padding: 115px 0 220px 0;
margin: 0px;
position: fixed;
left: 0px;
top: -100vh;
z-index: 9999;
overflow: scroll;
opacity: 0;
-webkit-overflow-scrolling: touch; }
section#looks.active {
top: 0px; }
section#looks.active ul.btnset {
display: block; }
section#looks ul.btnset {
width: 330px;
margin: 0 auto;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-between;
align-items: center; }
section#looks ul.btnset li {
text-align: center;
width: 100%;
background-color: rgba(255, 255, 255, 0.8);
border: solid 2px #111;
transition: all 0.25s ease-in 0s;
box-sizing: border-box;
cursor: pointer; }
section#looks ul.btnset li a {
color: #111;
font-family: futura-pt-condensed, sans-serif;
font-size: 3rem;
font-weight: 700;
line-height: 100%;
letter-spacing: 0.1em;
font-style: italic;
padding: 10px;
display: block;
transition: all 0.25s ease-in 0s; }
section#looks ul.btnset li:hover {
border: solid 2px #111; }
section#looks ul.btnset li:hover a {
color: #111; }
section#looks .close {
width: 32px;
height: 32px;
position: fixed;
top: 50px;
right: 50px;
cursor: pointer; }
section#looks .close::before {
content: '';
width: 32px;
height: 2px;
background-color: #111;
transform: rotate(-45deg);
position: absolute;
left: 0px;
top: 0px;
transition: background-color 0.3s linear; }
section#looks .close::after {
content: '';
width: 32px;
height: 2px;
background-color: #111;
transform: rotate(45deg);
position: absolute;
left: 0px;
top: 0px;
transition: background-color 0.3s linear; }
section#looks .close:hover::before,
section#looks .close:hover::after {
background-color: #111; }
section#looks .title {
width: 266px;
padding: 0px;
margin: 0 0 0 -480px;
position: fixed;
box-sizing: border-box;
left: 50%;
top: 50px;
z-index: 10;
opacity: 0.86; }
section#looks .title .inner {
width: 100%; }
section#looks .title.active .inner {
margin: 0px;
position: fixed;
left: 36px;
top: 36px; }
section#looks .look {
width: 100%;
max-width: 980px;
margin: 40px auto 100px auto;}
section#looks .look .set {
width: 100%;
padding: 40px 0 0;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-between;
align-items: flex-end; }
section#looks .look .set .text {
width: 280px;
padding: 0px;
order: 1;
text-align: left;}
section#looks .look .set .text .thick { font-weight: 700; margin-bottom: 1em;
  margin-top: 30px;}
section#looks .look .set .text .credits .credit:not(:last-child) {
margin-bottom: 20px; }

section#looks .look .set .text .credits .credit li {
text-align: left;}
section#looks .look .set .text .credits .credit li a {
text-decoration: underline;
}
ul.js-catalog__links { margin-bottom: 0.5em;}
a.cta.js-cta {
  text-decoration: underline;
  text-underline-offset: 0.1em;}
a.cta.js-cta.disable {
  pointer-events: none;
  text-decoration: none;
  color: #333;
}
a.cta.js-cta.disable::after {
  content: "Coming soon.";
  padding-left: 20px;
}
section#looks .look .set .text .credits .credit dl dt strong {
color: #111;
font-family: futura-pt, sans-serif;
font-size: 1.2rem;
font-weight: 500;
line-height: 1.1;
letter-spacing: 0.05em;
display: block; }
section#looks .look .set .text .credits .credit dl dt span {
color: #111;
font-family: futura-pt, sans-serif;
font-size: 1.2rem;
font-weight: 500;
line-height: 1.1;
letter-spacing: 0.05em;
display: inline-block;
padding: 0 0 0 5px; }
section#looks .look .set .text .credits .credit dl dt span:not(.nc)::after {
content: '(TAX IN)';
padding: 0 0 0 5px; }
section#looks .look .set .text .credits .credit dl dd {
padding-top: 5px;
display: block; }
section#looks .look .set .text .credits .credit dl dd a {
color: #FFF;
font-family: futura-pt-condensed, sans-serif;
font-size: 1.6rem;
font-weight: 700;
line-height: 100%;
letter-spacing: 0em;
font-style: italic;
padding: 1px 8px;
background-color: #111;
transition: all 0.25s ease-in 0s; }
section#looks .look .set .text .credits .credit dl dd a:not([href]) {
display: none; }
section#looks .look .set .text .credits .credit dl dd a:hover {
background-color: #111; }
section#looks .look .set .photo {
width: 660px;
order: 1;
position: relative; }
section#looks .look .set .photo.wv {
min-height: 825px; }
section#looks .look .set .photo.wv::before {
content: '';
width: 660px;
height: 825px;
border: solid 1px #CCC;
position: absolute;
left: 0px;
top: 0px;
z-index: -1;
box-sizing: border-box; }
section#looks .look .set .photo video {
width: 100%;
box-sizing: border-box;
position: relative;
z-index: 1; }
footer {
text-align: center;}
footer .inner p {
color: #111;
font-size: 1em;
line-height: 2.4rem;
letter-spacing: 0.1em; }
footer .inner p:not(:last-child) {
margin-bottom: 50px; }
footer .inner ul {
margin: 30px 0;}
footer .inner ul li {
color: #111;
font-size: 1em;
line-height: 2.4rem;
letter-spacing: 0em; }
footer .inner.active {
opacity: 1; }
footer #pgtop {
position: fixed;
right: 3%;
bottom: 3%;
background: #fff;
padding: 10px;}
footer #pgtop a {
width: 100%;
height: 100%;
transition: all 0.25s ease-in 0s; }
footer #pgtop a:hover {}
/* ----------------------------------------------- Media Queries Smartphone ----------------------------------------------- */
@media screen and (max-width: 768px) {
  .pc { display: none;}
.sp { display: block;}
.txt { margin: 60px 0; font-size: 0.8em;}
.lead { font-size: 0.8em; margin: 60px 0 40px;}
header {
padding: 0px;
max-width: calc(100% - 10px);
margin: auto;}
header ul {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: flex-start;
align-items: center; }
header ul li a {
color: #111;
font-family: futura-pt-condensed, sans-serif;
font-size: 1.4rem;
font-weight: 700;
line-height: 100%;
letter-spacing: 0em; }
header ul li a:hover {
color: #111; }
header ul li:not(:first-child) {
margin-left: 9px; }
#title {
width: 150px;
margin: -68px 0 0 0;
left: 10px;
top: 50%; }
#title .inner {
width: 100%; }
#title .inner h1 {
width: 150px;
height: 27px;
margin-bottom: 9px; }
#title .inner h1 span {
background-repeat: no-repeat;
background-position: left top;
background-size: 150px 27px;
height: 27px; }
#title .inner h3 {
width: 81px;
height: 12px; }
#title.active {
margin: 0px;
top: 10px; }
main {
width: 100%;
padding: 23px 0 50px 0;
overflow: hidden;
max-width: calc(100% - 10px);
margin: auto;
/* //index */ }
main p i {
color: #111;
font-family: "游明朝", YuMincho, "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
font-size: 1.4rem;
font-weight: 500;
line-height: 2.4rem;
letter-spacing: 0em;
font-style: italic; }
main #index { width: 100%;}
main #index .line {
width: 100%; }
main #index .line .thumb:nth-child(1) div {
transition-delay: 0.25s; }
main #index .line .thumb:nth-child(2) div {
transition-delay: 0.5s; }
main #index .line.l13 {
margin-bottom: 70px; }
main #index .thumb {
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: center;
align-items: center;
box-sizing: border-box;
clip-path: inset(0%);
transition: all 0.3s ease-out 0s; }
main #index .thumb div {
clip-path: inset(10%);
transition: all 0.3s ease-in 0.1s;
opacity: 0;
cursor: pointer; }
main #index .thumb.active div {
opacity: 1;
clip-path: inset(0%);
top: 0px; }
main #index .thumb:hover {
opacity: 0.7; }
section#looks {
background-color: #FFF;
width: 100%;
height: 100vh;
padding: 42px 0 110px 0;
margin: 0px;
position: fixed;
left: 0px;
top: -100vh;
z-index: 9999;
overflow: scroll;
opacity: 0;
-webkit-overflow-scrolling: touch; }
section#looks.active {
top: 0px; }
section#looks ul.btnset {
width: calc(100% - 38px);
margin: 0 auto;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-between;
align-items: center; }
section#looks ul.btnset li {
text-align: center;
width: 100%;
background-color: rgba(255, 255, 255, 0.8);
border: solid 2px #111;
transition: all 0.25s ease-in 0s;
box-sizing: border-box;
cursor: pointer; }
section#looks ul.btnset li a {
font-size: 2.4rem;
padding: 9px; }
section#looks .close {
width: 20px;
height: 20px;
top: 10px;
right: 10px; 
z-index: 1;}
section#looks .close::before {
content: '';
width: 20px;
height: 2px;
background-color: #111;
transform: rotate(-45deg);
position: absolute;
left: 0px;
top: 9px;
transition: background-color 0.3s linear; }
section#looks .close::after {
content: '';
width: 20px;
height: 2px;
background-color: #111;
transform: rotate(45deg);
position: absolute;
left: 0px;
top: 9px;
transition: background-color 0.3s linear; }
section#looks .close:hover::before,
section#looks .close:hover::after {
background-color: #111; }
section#looks .title {
width: 150px;
padding: 0px;
margin: 0px;
position: fixed;
left: 10px;
top: 10px; }
section#looks .title .inner {
width: 100%; }
section#looks .title .inner h2 {
  font-size: 1.3em;}
section#looks .title .inner h3 {
width: 81px;
height: 12px; }
section#looks .title.active .inner {
margin: 0px;
position: fixed;
left: 36px;
top: 36px; }
section#looks .look {
width: calc(100% - 38px);
max-width: calc(100% - 38px);
margin: 0px auto 100px auto; }
section#looks .look .set {
width: 100%;
padding: 40px 0 0;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start; }
section#looks .look .set .text {
width: 100%;
padding: 0px;
order: 2; }
section#looks .look .set .text .credits .credit:not(:last-child) {
margin-bottom: 15px; }
section#looks .look .set .text .credits .credit dl {
text-align: left;
display: flex;
flex-wrap: nowrap;
flex-direction: row;
justify-content: space-between;
align-items: flex-start; }
section#looks .look .set .text .credits .credit dl dt strong {
color: #111;
font-family: futura-pt, sans-serif;
font-size: 1.2rem;
font-weight: 500;
line-height: 1.1;
letter-spacing: 0.05em;
display: block; }
section#looks .look .set .text .credits .credit dl dt span {
color: #111;
font-family: futura-pt, sans-serif;
font-size: 1.2rem;
font-weight: 500;
line-height: 1.1;
letter-spacing: 0.05em;
display: inline-block;
padding: 0 0 0 5px; }
section#looks .look .set .text .credits .credit dl dd {
padding-top: 5px;
display: block; }
section#looks .look .set .text .credits .credit dl dd a {
color: #FFF;
font-size: 1.6rem;
font-weight: 700;
line-height: 100%;
letter-spacing: 0em;
font-style: italic;
padding: 1px 8px;
background-color: #111; }
section#looks .look .set .photo {
width: 100%;
margin-bottom: 22px;
order: 1; }
section#looks .look .set .photo.wv {
min-height: calc((100vw - 38px)*1.25); }
section#looks .look .set .photo.wv::before {
width: 100%;
height: calc((100vw - 38px)*1.25); }
section#looks .look .set .photo video {
width: 100%;
box-sizing: border-box;
position: relative;
z-index: 1; }
footer {
text-align: left;
width: 100%;
height: auto;
max-height: auto;
padding: 0 10px;
position: relative;
z-index: 10; }
footer .inner {
width: 100%;
height: auto;
display: flex;
flex-wrap: nowrap;
flex-direction: column;
justify-content: flex-start;
align-items: flex-start;
opacity: 1;
transition: all 0.5s ease-out 0.5s; }
footer .inner p {
color: #111;
font-size: 0.9em;
font-weight: 600;
line-height: 1.9rem;
letter-spacing: 0em; }
footer .inner p:not(:last-child) {
margin-bottom: 20px; }
footer .inner ul {
margin-bottom: 20px; }
footer .inner ul li {
color: #111;
font-size: 0.9em;
font-weight: 600;
line-height: 1.9rem;
letter-spacing: 0em; }
footer #pgtop {
z-index: 999; }
footer #pgtop a:hover {
opacity: 1; } }