@charset "UTF-8";

/*======================== PCだけ指定 ========================*/
@media (min-width:769px) {   

/*////////// KeyVisual //////////*/
.KeyVisual{padding: 3vw 6vw 0 2vw;
    position: relative;}
.KvLogo {position: absolute;
    right: -7vw;
    top: 3vw;
    transform: rotate(90deg);
    transform-origin: top left;
    width: 10vw;}
.KvInner {
    display: flex;
    justify-content: space-between;}
.KvLeft {
    width: 52%;
    position: relative;}
.KvImgKiri {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 63%;}
.KvTypo {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    align-items: center;
    padding: 0.5vw 0;}
.KvTypo p {
    font-size: 13vw;
    line-height: 1;
    letter-spacing: -0.4rem;}
.KvRight {
    width: 46%;
    position: relative;}
.KvTtlMain {
    position: absolute;
    top: 50%;
    left: -4vw;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);}
.KvTtlMain p {
    font-size: 40vw;
    letter-spacing: -0.7rem;}
.KvTtlSub {
    position: absolute;
    bottom: 1.4vw;
    right: 1.4vw;}
.KvTtlSub p {
    text-align: right;
    font-size: 6vw;
    line-height: 1;}
.LeadWrap {
    padding: 100px 0 100px;}
.LeadTtl {
    text-align: center;
    font-size: 2vw;
    padding: 0 0 24px;}
.lead {
    text-align: center;
    line-height: 2;}


/*////////// コンテンツ共通CSS //////////*/
.container{display: flex;
    flex-wrap: wrap;
    padding: 0vw 7vw 0vw;
    justify-content: space-between;}

.ListTtl {
    position: absolute;
    top: 0%;
    writing-mode: vertical-rl;
    color: #ffffff;
    font-size: 1.4vw;
    height: 100%;
    text-align: center;
    left: 1.2vw;
    letter-spacing: 0.1rem!important;}

.ListIt {position: absolute;
    color: #ffffff;
    font-size: 8vw;}
.Item1 .ListIt {top: 0.7vw;
    left: 1.6vw;}
.Item2 .ListTtl {text-shadow: 0px 0px 28px rgb(0 0 0 / 60%);}
.Item3 .ListTtl {
    color: #000000;}
.Item5 .ListIt {top: 0.7vw;
    left: 1.6vw;}
.Item7 .ListIt {color: #000000;
    top: 0.7vw;
    left: 1.6vw;}
.Item8 .ListTtl {
    color: #000000;}
.Item9 .ListTtl {color: #000000;}
.Item10 .ListTtl {text-shadow: 0px 0px 28px rgb(0 0 0 / 60%);}
.Item11 .ListTtl {
    color: #000000;}
.Item13 .ListIt {top: 0.7vw;
    left: 1.6vw;}
.Item17 .ListTtl {
    color: #000000;}
.Item17 .ListIt {top: 0.7vw;
    left: 1.6vw;
    color: #000000;}
.ListItem.Item18 {
				width: calc(100% / 3 - 3vw);
    margin: 0 0 4.5vw;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;}
.ListItem.Item18 a {
    text-align: left;
    color: #000000;
    text-decoration: none;
    display: block;
    padding: 1vw 0;}
.ListItem.Item18 a:hover {
    opacity: 0.6;}
.ListItem.Item18 a p {
    font-size: 2.8vw;}
.ListCatch {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    color: #ffffff;
    font-size: 3vw;
    text-shadow: 0px 0px 25px rgb(0 0 0 / 80%);}
.CoryRight {
    text-align: center;
    color: #888888;
    font-size: 10px;
    padding: 4vw 0 3vw;}


.look{}
.set.pc {display: flex!important;
    justify-content: space-between;
    margin: 0 10vw;}
.set.sp {display: none!important;}

.ModLogo {
    position: fixed;
    transform: rotate(90deg);
    top: 50%;
    width: 10vw;
    right: 0;}

.ProductName{font-size: 1.7vw;
				position: relative;}
.ItemCredit{letter-spacing: 0.05rem!important;
				position: relative;}
.ItemCredit a {color: #000000;}
.ItemCredit span {
    font-size: 10px;
    display: inline-block;
    padding: 0 0 0.4vw;
    text-decoration: none!important;
				font-weight: normal!important;}
.Catchcopy{font-size: 1.6vw;
    line-height: 1.3;
				font-weight: bold;
				position: relative;}
.flexWrap {display: flex;}



#modal01 {background: #ffffff;}
#modal01 .flexBox1{width: 40%;}
#modal01 .ModImg1{}
#modal01 .CategoryName{font-size: 6vw;
    margin: -7% 0 0;}

#modal01 .flexBox2{width: 26%;
    padding: 0 3% 0;}
#modal01 .flexWrap {align-items: center;}
#modal01 .ModIt{font-size: 12vw;
    margin: -11% 0 0;}
#modal01 .ProductName{font-size: 1.9vw;
    padding: 3.8vw 0 0 0.6vw;}
#modal01 .Credit1{    text-align: center;
    padding: 3vw 0 5.1vw;}
#modal01 .Catchcopy{text-align: center;
    font-size: 1.6vw;
    line-height: 1.3;
    padding: 0 0 1.6vw;}
#modal01 .Exp{font-size: 1vw;
    line-height: 1.8;
    text-align: justify;
    text-align-last: center;}

#modal01 .flexBox3{width: 28%;}
#modal01 .ModImg2{}
#modal01 .ModImg3{margin: -3% 0 0 -10%;
    width: 96%;}



#modal02 {background: #eeeeee;}
#modal02 .flexBox1{width: 32%;
    padding: 3vw 0 0;}
#modal02 .flexBox1 .flexWrap {
    justify-content: space-between;}
#modal02 .ModImg1{width: 80%;}
#modal02 .ProductName{font-size: 1.7vw;}
#modal02 .ProdName1 {
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    text-align: center;}
#modal02 .ModImg2{width: 60%;
    margin: 1.8vw 0 0 auto;}
#modal02 .Catchcopy{font-size: 1.6vw;
    line-height: 1.3;}
#modal02 .Copy1 {margin: -7% 0 1.1vw 0;}
#modal02 .Credit1{}

#modal02 .flexBox2{width: 33%;
    padding: 0 0 0 2%;}
#modal02 .flexBox2 .flexWrap {
    align-items: center;}
#modal02 .ModIt{font-size: 12vw;
    margin: -11% 0 0;}
#modal02 .CategoryName{font-size: 3.5vw;
    padding: 0 0 1.5vw 0.8vw;}
#modal02 .flexBox2 .Catchcopy {
    text-align: center;
    padding: 1vw 0 1vw;}
#modal02 .ModImg3{}
#modal02 .ProdName2 {
    margin: -2vw 0vw 1vw -2vw;}
#modal02 .Credit2{text-align: right;
    margin: -1.2vw 0 0;}

#modal02 .flexBox3{width: 25%;
    padding: 1vw 0 0;}
#modal02 .Copy3 {
    position: relative;}
#modal02 .ModImg4{width: 60%;
    margin: -3vw 0 0 auto;}
#modal02 .flexBox3 .ProductName {
    text-align: right;
    padding: 1.3vw 0 1.4vw;}
#modal02 .Credit3 {text-align: right;}
#modal02 .ModImg5{width: 88%;
    margin: 2vw 0 0 auto;
    height: 40%;
    overflow: hidden;}
#modal02 .ModImg5 img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: 0% 100%;}


#modal03 {background: #ffffff;}
#modal03 .flexBox1{width: 35%;}
#modal03 .Fw1 {align-items: flex-end;}
#modal03 .ModIt {
    font-size: 12vw;
    margin: -11% 0 0;}
#modal03 .CategoryName {
    font-size: 6vw;
    margin: 0 0 0.6vw 1vw;}
#modal03 .Fw2 {
    align-items: flex-end;}
#modal03 .Fw2 div:first-child {
    width: 50%;
    padding: 0 0 7vw;}
#modal03 .flexBox1 .ProductName {
    padding: 0 0 0.4vw;}
#modal03 .Credit1{}
#modal03 .ModImg1 {width: 65%;
    margin: 0 0 0 -15%;}
#modal03 .Fw3 {
    margin: -4vw 0 0;}
#modal03 .ModImg2 {
    width: 58%;}
#modal03 .Copy1 {
    margin: 7vw 0 0 -1.9vw;}

#modal03 .flexBox2{width: 25%;
    padding: 8.6vw 0 0;}
#modal03 .ProdName2 {
    padding: 0 0 0.6vw;}
#modal03 .Credit2 {
    padding: 0 0 1.8vw;}
#modal03 .ModImg3{}
#modal03 .Copy2 {
    padding: 1vw 0 0;}

#modal03 .flexBox3{width: 32%;}
#modal03 .Copy3 {
    width: 67%;
    margin: 1.3vw 0 0.7vw auto;}
#modal03 .ModImg4{width: 67%;
    margin: 0 0 0 auto;}
#modal03 .ProdName3 {
    margin: -36% 0 0.9vw;}
#modal03 .ModImg5{width: 70%;
    padding: 0 0 0.8vw;}
#modal03 .Credit3{}



#modal04 {background: #eeeeee;}
#modal04 .flexBox1{width: 35%;
    position: relative;}
#modal04 .ModImg1{}
#modal04 .PreOrder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    font-size: 4.5vw;
    width: 100%;
    text-align: center;
    color: #ffb400;}

#modal04 .flexBox2{width: 26%;}
#modal04 .Fw1 {
    align-items: flex-end;}
#modal04 .ModIt{font-size: 12vw;
    margin: -11% 0 0;}
#modal04 .CategoryName{margin: 0 0 0.9vw 0.6vw;
    font-size: 3.4vw;}
#modal04 .Catchcopy{text-align: center;
    padding: 4.3vw 0 1.1vw;}
#modal04 .Exp{font-size: 1vw;
    line-height: 1.8;
    text-align: justify;
    text-align-last: center;}

#modal04 .flexBox3{width: 29%;}
#modal04 .ProductName{text-align: right;}
#modal04 .Credit1{text-align: right;
    padding: 0.9vw 0 1.8vw;}
#modal04 .ModImg2{}



#modal05 {padding-bottom: 0!important;}
.BgWrap1 {border-bottom: 1px solid;
    padding: 0 0 80px;}
.FlexBoxInner {
    display: flex;
    justify-content: space-between;}
#modal05 .flexBox1 {
    width: 36%;
    display: flex;
    align-items: center;
    justify-content: space-between;}
#modal05 .flexBox1 .ProductName {
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;}
#modal05 .Fw1 {
    flex-direction: column;
    width: 88%;}
#modal05 .ModImg1 {
    position: relative;}
#modal05 .Credit1 {
    padding: 1.3vw 0 0.4vw;}
#modal05 .flexBox1 .PreOrder {
    font-size: 4vw;
    color: #1c356a;}
				
#modal05 .flexBox2 {
    width: 33%;
    margin: 0 0 0 -6vw;}
#modal05 .Fw2 {align-items: flex-start;
    justify-content: flex-end;
    margin: 0 -2.2vw 0 0;}
#modal05 .ModIt {
    font-size: 12vw;
    margin: 0 0 0;}
#modal05 .flexBox2 .CategoryName {
    font-size: 6vw;
    padding: 1.5vw 0 0vw 1.3vw;}
#modal05 .flexBox2 .Catchcopy {
    padding: 1.7vw 0 0.1vw;}
#modal05 .ModImg2 {
    width: 73%;
    margin: 1vw 0 0 1.7vw;}
#modal05 .flexBox3 {
    width: 28%;
    padding: 1.7vw 0 0;}
#modal05 .Copy2 {
    padding: 0 0 0.8vw;}
#modal05 .ModImg3{}
#modal05 .Fw3 {
    align-items: flex-start;
    justify-content: space-between;
    padding: 1vw 0 0;}
#modal05 .ProdName2 {
    padding: 0 0 0;}
#modal05 .Credit2 {text-align: right;
    margin: -0.2vw 0 2vw -20%;
    width: 70%;}

.BgWrap2 {
    background: #eeeeee;
    padding: 80px 0 80px;}
#modal05 .flexBox4 {
    width: 56%;}
#modal05 .Fw3 {
    align-items: center;
    justify-content: space-between;
    padding: 1vw 0 0;}
#modal05 .Fw4 {
    align-items: flex-end;
    position: relative;
    margin: 0 8vw 0 0;}
#modal05 .flexBox4 .CategoryName {
    font-size: 3.5vw;
    padding: 0 0 0.9vw 0.3vw;}
#modal05 .Fw5 {
    margin: -5vw 0 0;
    align-items: center;}
#modal05 .ModImg4 {
    width: 68%;}
#modal05 .Copy3 {
    width: 42%;
    margin: 0 0 0 -10%;}
#modal05 .Fw6 {
    align-items: flex-end;
    margin: 0.5vw 0 0;}
#modal05 .flexBox4 .PreOrder {
    font-size: 4vw;
    color: #5aa90d;}
#modal05 .Credit3 {
    padding: 0 0vw 0.4vw 1.4vw;}
#modal05 .flexBox5 {
    width: 37%;}
#modal05 .Credit4 {
    text-align: right;
    margin: -3vw 0 1.6vw;}
.PosRel {
    position: relative;}
#modal05 .ModImg5 {}
#modal05 .flexBox5 .PreOrder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    width: 100%;
    font-size: 4vw;
    text-align: center;
    color: #ffffff;}
#modal05 .Copy4 {
    padding: 1vw 0 0;}


#modal06 {background: #ffffff;}
#modal06 .flexBox1 {
    padding: 8vw 0 0;}
#modal06 .Fw1 {
    align-items: flex-end;}
#modal06 .Credit1 {
    padding: 0 0 0.2vw 1.1vw;}
#modal06 .Fw2 {
    margin: 0 0 0 12%;
    align-items: center;}
#modal06 .ModImg1 {
    width: 65%;
    padding: 2vw 0 0;}
#modal06 .Copy1 {
    width: 40%;
    margin: 0 0 0 -11%;}

#modal06 .flexBox2 {
    margin: -1.4vw 0 0;}
#modal06 .Fw4 {
    align-items: center;
    justify-content: flex-end;
    position: relative;}
#modal06 .ModIt {
    font-size: 12vw;
    margin: 0 0 0;}
#modal06 .CategoryName {
    font-size: 6vw;
    padding: 1vw 0 0 1.2vw;}
#modal06 .ModImg2 {
    width: 70%;
    margin: -5vw 0 0;}
#modal06 .Copy2 {
    margin: -1.3vw 0 0 auto;
    display: flex;
    justify-content: flex-end;}
#modal06 .Fw5 {
    align-items: flex-end;
    margin: -0.8vw 0 0;}
#modal06 .Credit2 {
    padding: 0 0 0.2vw 1.2vw;}


#modal07 {
    background: #eeeeee;
				padding-bottom: 100px!important;}
#modal07 .flexBox1 {
    width: 30%;}
#modal07 .ModImg1 {}
#modal07 .ProdName1 {
    padding: 1.6vw 0 0.7vw;}
#modal07 .Credit1 {}

#modal07 .flexBox2 {
    width: 32%;
    margin: 0 0 0 -5vw;}
#modal07 .Fw1 {
    align-items: flex-end;}
#modal07 .ModIt {
    font-size: 12vw;
    margin: 0 0 0;}
#modal07 .CategoryName {
    font-size: 6vw;
    padding: 0vw 0 0.7vw 1.2vw;}
#modal07 .Copy2 {
    padding: 3vw 2vw 0 0;
    text-align: justify;}
#modal07 .ModImg2 {
    width: 60%;
    padding: 2vw 0 0;}
#modal07 .flexBox3 {
    width: 39%;}
#modal07 .Fw2 {
    align-items: flex-end;}
#modal07 .Credit2 {
    padding: 0vw 0 0.1vw 1.1vw;}
#modal07 .ModImg3 {
    width: 80%;
    padding: 1vw 0 0;}
#modal07 .Copy3 {
    padding: 1.5vw 0 0;}



.PageTop {display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 56px 0 80px;
    flex-direction: column;
    cursor: pointer;}
.ArwTop {
    display: inline-block;
    vertical-align: middle;
    color: #000000;
    line-height: 1;
    width: 24px;
    height: 24px;
    border: 1px solid #000000;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: translateY(25%) rotate(-45deg);
    margin: 0 0 7px 1px;}
.PageTop p.font {
    color: #000000;
    font-size: 20px;}



section#looks {background-color: #FFF;
    width: 100%;
    height: 100vh;
    padding: 0px 0 220px 0;
    margin: 0px;
    position: fixed;
    left: 0px;
    top: -100vh;
    z-index: 9999;
    overflow: scroll;
    opacity: 0;
    -webkit-overflow-scrolling: touch;}
section#looks .look {width: 100%;
    margin: 0 auto;
    padding: 80px 0 80px;
    border-bottom: 1px solid #000000;}
section#looks.active {top: 0px;}
body.looking {overflow: hidden; }


.modal-open{cursor: pointer;
    position: relative;
    width: calc(100% / 3 - 3vw);
				margin: 0 0 4.5vw;}


.CloseIcon {position: fixed;
    top: 2vw;
    right: 2vw;
    cursor: pointer;
    height: 4vw;
    width: 4vw;}
.CloseIcon div {display: inline-block;
    vertical-align: middle;
    color: #333;
    line-height: 1;
    width: 4vw;
    height: 1px;
    background: currentColor;
    border-radius: 0.1em;
    position: relative;
    transform: rotate(45deg);}
.CloseIcon div:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    transform: rotate(90deg);}


ul.js-catalog__links {}
a.cta.js-cta {text-decoration: underline;
    text-underline-offset: 0.14em;
    text-decoration-thickness: 0.07vw;}
a.cta.js-cta.disable {
				pointer-events: none;
				text-decoration: none;
				color: #000000;}
a.cta.js-cta.disable::after {
				content: "";
/*				content: "Coming soon.";
				padding-left: 8px;*/
				font-size: 12px;
				color: #aaaaaa;}
li {list-style: none;}








/*////////// 個別ID設定 //////////*/
/*////////// 規定数値変更 //////////*/
/*////////// クレジットデザイン調整 //////////*/
/*////////// COMMON(PC) //////////*/
.pc{display: block;} .sp{display: none;}
.Bd{margin-left: calc(50% - 50vw + 8px);margin-right: calc(50% - 50vw + 8px);border-bottom: 1px solid #333333;padding: 80px 0 0 0;margin-bottom: 100px!important;}



}

/*======================== SPだけ指定 ========================*/
@media (max-width:768px) {


/*////////// KeyVisual //////////*/

.KeyVisual {
    border: 1px solid #000000;
    padding: 0 5vw 4vw;}
.KvLogo {
    width: 30%;
    line-height: 1;
    margin: 7vw 0vw 6vw auto;}
.KvInner {
    position: relative;
    padding: 0 0 6vw;}
.KvImgKiri {position: absolute;
    bottom: 0;
    left: 52%;
    transform: translateX(-50%);
    -webkit-transform: translateX(-50%);
    -ms-transform: translateX(-50%);
    width: 92%;}
.KvTtlMain {
    position: absolute;
    top: -19vw;
    left: 2vw;}
.KvTtlMain p {
    font-size: 48vw;}
.KvTtlSub {
    position: absolute;
    top: 9vw;
    left: 34vw;}
.KvTtlSub p {
    font-size: 8vw;}

.LeadWrap {
    padding: 8vw 0 9vw;}
.LeadTtl {
    text-align: center;
    font-size: 6vw;
    padding: 0 0 3vw;}
.lead {
    text-align: center;
    line-height: 1.5;
    font-size: 3.3vw;}


/*////////// コンテンツ共通CSS //////////*/
.container {
    display: flex;
    flex-wrap: wrap;
    padding: 0 2.4vw;
    justify-content: space-between;}
div.sp.ItemTypo {
    width: calc(50% - 1.2vw);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;}
.ItemTypo p {
    font-size: 10.9vw;
    padding: 0vw 0;}
.ListItem {
    width: calc(50% - 1.2vw);
    position: relative;
				margin: 0 0 2.4vw;}
.ListItem a {
    position: relative;
				display: block;}
.ListIt {position: absolute;
    font-size: 14vw;
    top: 0.9vw;
    left: 2vw;
    color: #000000;
    text-decoration: none;}
.ListTtl {
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    position: absolute;
    left: 2vw;
    top: 50%;
    transform: translateY(-50%);
    -webkit-transform: translateY(-50%);
    -ms-transform: translateY(-50%);
    color: #ffffff;
    font-size: 3.6vw;
    height: 100%;
    text-align: center;
    letter-spacing: 0.08rem!important;}
.Item2 .ListTtl {text-shadow: 0px 0px 22px rgb(0 0 0 / 60%);}
.Item3 .ListTtl {
    color: #000000;}
.Item9 .ListIt {color: #ffffff;}
.Item9 .ListTtl {text-shadow: 0px 0px 25px rgb(0 0 0 / 80%);}
.Item8 .ListTtl {
    color: #000000;}
.Item10 .ListTtl {}
.Item11 .ListTtl {
    color: #000000;}
.Item17 .ListTtl {
    color: #000000;}
.ListCatch {
    color: #ffffff;
    text-align: center;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    font-size: 5vw;
    text-shadow: 0px 0px 25px rgb(0 0 0 / 80%);}
.ListItem.Item18 {
    width: 100%;
    padding: 11vw 0 11vw;}	
.ListItem.Item18 div {
    display: flex;
    flex-direction: column;
    align-items: center;}
.ListItem.Item18 div a {
    color: #000000;
    text-decoration: none;
    padding: 1.5vw 0;}
.ListItem.Item18 div a p {
    font-size: 5vw;}
.CoryRight{text-align: center;
    font-size: 10px;
    padding: 0 0 6vw;
    color: #888888;}


.ZoomIcon {
    position: absolute;
    bottom: 3.6vw;
    right: 2vw;}
.Zoom {
    display: inline-block;
    vertical-align: middle;
    color: #ffffff;
    line-height: 1;
    width: 5vw;
    height: 1px;
    background: currentColor;
    position: relative;}
.Zoom::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    transform: rotate(90deg);}
.Item9 .Zoom {color: #000000!important;}



.set.sp {
    padding: 0 5vw;}
.flexWrap {
    display: flex;}
.ModIt{font-size: 30vw;}
.CategoryName{}
.ProductName{font-size: 5vw;
    line-height: 1.1;
				position: relative;}
.ItemCredit{line-height: 1.3;
    font-size: 12px;}
.ItemCredit a {color: #000000;}
.ItemCredit span {font-size: 10px;
    display: inline-block;
    padding: 0 0 0.4vw;
    text-decoration: none!important;
    font-weight: normal!important;}
.Catchcopy{font-weight: bold;
    font-size: 4vw;
    line-height: 1.4;}
.Exp{line-height: 1.5;
    word-break: break-all;}
.ModImg{}



#modal01 {
    background: #ffffff;}
#modal01 .flexBox1 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;}
#modal01 .Fw1 {
    align-items: flex-end;}
#modal01 .CategoryName {
    font-size: 10vw;
    padding: 0 0 2.5vw 1.2vw;}
#modal01 .ProductName {
    text-align: center;
    padding: 3.8vw 0 0;}

#modal01 .flexBox2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4vw 0 0;}
#modal01 .Fw2 {
    flex-direction: column;
    width: 50%;}
#modal01 .ModImg1 {
    padding: 0 0 2vw;}
#modal01 .Fw3 {
    flex-direction: column;
    width: 44%;}
#modal01 .Catchcopy {
    text-align: center;
    padding: 0 0 3vw;}
#modal01 .Exp1 {
    text-align: justify;
    padding: 0 0 11vw;}
#modal01 .flexBox3 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -10vw 0 0;}
#modal01 .Exp2 {
    width: 42%;
    text-align: center;}
#modal01 .ModImg2 {
    width: 50%;}
#modal01 .flexBox4 {
    width: 50%;
    margin: -8vw 0 0 11vw;}



#modal02 {
    background: #eeeeee;}
#modal02 .flexBox1 {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;}
#modal02 .CategoryName {
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    font-size: 6vw;
    padding: 0 0 2.8vw 0.5vw;}
#modal02 .flexBox2 {
    display: flex;
    margin: -17.7vw 0 0;}
#modal02 .Fw1 {
    flex-direction: column;
    width: 48%;}
#modal02 .Copy1 {
    padding: 0 0 2vw;}
#modal02 .Credit1 {
    padding: 2vw 0 0;}
#modal02 .flexBox2 .ProductName {
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    padding: 13.6vw 0 0 2.8vw;}
#modal02 .flexBox3 {
    width: 44%;
    margin: -20vw 0 0 auto;
    position: relative;}
#modal02 .Copy2 {
    padding: 0vw 0 2vw;}
#modal02 .ProdName2 {
    position: absolute;
    top: 24.6vw;
    left: -10vw;}
#modal02 .Credit2 {
    padding: 1.3vw 0 0;}
#modal02 .flexBox4 {
    position: relative;
    margin: -27vw 0 0;}
#modal02 .ProdName3 {
    padding: 0 0 0 2.7vw;}
#modal02 .Copy3 {
    position: absolute;
    top: 41.7vw;
    left: 34vw;}
#modal02 .ModImg4 {
    width: 47%;
    margin: -13vw 0 0;}
#modal02 .Credit3 {
    padding: 1.4vw 0 0;}




#modal03 {
    background: #ffffff;}
#modal03 .flexBox1 {
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
				margin: -6vw 0 0;}
#modal03 .CategoryName {
    font-size: 10vw;
    padding: 0 1.2vw 2.5vw 0;}
#modal03 .flexBox2 {
    padding: 4vw 0 0;}
#modal03 .Fw2 {
    flex-direction: column;
    width: 66%;
    margin: 0 0 0 auto;}
#modal03 .Copy1 {
    padding: 0 0 1.3vw;}
#modal03 .ProdName1 {
    text-align: right;
    padding: 3vw 0 1.3vw;}
#modal03 .Credit1 {
    text-align: right;}
#modal03 .ModImg2 {
    width: 50%;
    margin: -36vw 0 0;}
#modal03 .flexBox3 {
    padding: 10vw 0 0;}
#modal03 .Fw3 {
    position: relative;}
#modal03 .Copy2 {
    position: absolute;
    top: 44vw;
    left: 14vw;}
#modal03 .ModImg4 {
    width: 62%;
    margin: 0 0 0 auto;}
#modal03 .Fw4 {
    position: relative;}
#modal03 .ModImg5 {
    width: 60%;
    margin: -16vw 0 0;}
#modal03 .Fw5 {
    flex-direction: column;
    position: absolute;
    top: 3vw;
    left: 48vw;}
#modal03 .Credit2 {
    padding: 1.3vw 0 0;}
#modal03 .flexBox4 {
    padding: 10vw 0 0;}
#modal03 .Fw6 {
    position: relative;}
#modal03 .Copy3 {
    position: absolute;
    top: 28.3vw;
    left: 9vw;}
#modal03 .ModImg3 {
    width: 50%;
    margin: 0 0 0 auto;}
#modal03 .Fw7 {
    padding: 4vw 0 0;
    align-items: center;}
#modal03 .Credit3 {
    padding: 0 0 0 3vw;}




#modal04 {
    background: #eeeeee;}
#modal04 .flexBox1 {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;}
#modal04 .ProductName {
    text-align: right;
    padding: 4vw 0 0;}
#modal04 .flexBox2 {
    padding: 2vw 0 0;
    display: flex;
    align-items: center;
    justify-content: space-between;}
#modal04 .ModImg1 {
    width: 50%;}
#modal04 .Exp1 {
    text-align: justify;
    width: 44%;}
#modal04 .flexBox3 {
    display: flex;
    justify-content: space-between;
    align-items: center;}
#modal04 .Fw1 {
    flex-direction: column;
    width: 46%;}
#modal04 .Credit1 {
    text-align: center;}
#modal04 .PreOrder {
    color: #ffb400;
    text-align: center;
    font-size: 8.8vw;
    padding: 5vw 0 4vw;}
#modal04 .Exp2 {
    text-align: justify;}
#modal04 .ModImg2 {
    width: 50%;}



#modal05 {
    background: #ffffff;}
#modal05 .flexBox1 {
    display: flex;
    justify-content: space-between;}
#modal05 .Fw1 {
    flex-direction: column;
    width: 50%;
    justify-content: space-between;}
#modal05 .Fw2 {
    flex-direction: column;}
#modal05 .flexBox1 .CategoryName {
    font-size: 10vw;
    color: #a67536;}
#modal05 .Fw4 {
    flex-direction: column;}
#modal05 .ProdName1 {
    padding: 0 0 1.2vw;}
#modal05 .Fw3 {
    flex-direction: column;
    width: 70%;
    margin: 0 0 0 -20%;
    padding: 9vw 0 7.7vw;}
#modal05 .Copy2 {
    padding: 0 0 2vw;}
#modal05 .flexBox2 {
    padding: 10vw 0 0;
    width: 84%;}
#modal05 .Fw5 {
    margin: -2.2vw 0 0;}
#modal05 .flexBox2 .PreOrder {
    color: #5aa90d;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    font-size: 8vw;
    padding: 0 0 0 3vw;}
#modal05 .flexBox3 {
    display: flex;
    justify-content: space-between;
    margin: -5vw 0 0;
    align-items: flex-end;}
#modal05 .Fw6 {
    flex-direction: column;
    width: 42%;}
#modal05 .Copy3 {
    text-align: justify;
    padding: 0 0 4vw;}
#modal05 .ModImg6 {
    width: 50%;}
#modal05 .flexBox4 {
    padding: 10vw 0 0;}
#modal05 .ProdName4 {
    text-align: center;}
#modal05 .Credit2 {
    text-align: center;
    padding: 2vw 0 3vw;}
#modal05 .Fw7 {
    position: relative;
    width: 80%;
    margin: auto;}
#modal05 .flexBox4 .PreOrder {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    -webkit-transform: translate(-50%, -50%);
    -ms-transform: translate(-50%, -50%);
    color: #ffffff;
    width: 100%;
    text-align: center;
    font-size: 10vw;}
#modal05 .Copy4 {
    width: 80%;
    margin: -3vw auto 0;
    position: relative;}
#modal05 .flexBox5 {
    display: flex;
    justify-content: space-between;
    position: relative;}
#modal05 .ModImg4 {
    padding: 13vw 0 0;
    width: 60%;}
#modal05 .Fw8 {
    flex-direction: column;
    justify-content: space-between;
    width: 36%;}
#modal05 .Fw9 {
    align-items: flex-end;
    margin: 0 0 0 auto;}
#modal05 .flexBox5 .CategoryName {
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
    font-size: 6vw;
    padding: 0 0 2.8vw 0.5vw;}
#modal05 .ProdName2 {
    padding: 0 0 13vw;}
#modal05 .flexBox6 {
    display: flex;
    align-items: center;
    margin: -9vw 0 0;}
#modal05 .Fw10 {
    flex-direction: column;
    width: 70%;
    position: relative;}
#modal05 .flexBox6 .PreOrder {
    font-size: 8vw;
    color: #1c356a;
    padding: 0 0 6vw;}
#modal05 .Copy1 {
    padding: 0 0 1.3vw;}
#modal05 .ModImg5 {
    width: 60%;
    margin: 0 0 0 -30%;}




#modal06 {
    background: #eeeeee;}
#modal06 .flexBox1 {
    display: flex;
    align-items: flex-end;
    margin: -6vw 0 0 8vw;}
#modal06 .CategoryName {
    font-size: 10vw;
    padding: 0 0 2vw 1.4vw;}
#modal06 .flexBox2 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 5vw 0 0;}
#modal06 .ModImg1 {
    width: 60%;}
#modal06 .Fw1 {
    flex-direction: column;
    width: 45%;
    margin: 0 0 0 -5%;}
#modal06 .Credit1 {
    padding: 5vw 0 6vw;}
#modal06 .flexBox3 {
    display: flex;
    align-items: center;
    padding: 6vw 0 0;}
#modal06 .Fw2 {
    flex-direction: column;
    width: 50%;
    position: relative;}
#modal06 .Credit2 {
    padding: 5vw 0 5vw;}
#modal06 .ModImg2 {
    width: 60%;
    margin: 0 0 0 -10%;}




#modal07 {background: #ffffff;border-bottom: none!important;}
#modal07 .flexBox1 {
    display: flex;
    justify-content: space-between;
    margin: -5vw 0 0;}
#modal07 .ModImg1 {
    width: 60%;
    padding: 15vw 0 0;}
#modal07 .Fw1 {
    flex-direction: column;
    justify-content: space-between;
    width: 45%;
    margin: 0 0 0 -15%;}
#modal07 .Fw2 {
    flex-direction: column;
    padding: 0 0 0 11vw;}
#modal07 .CategoryName {
    font-size: 10vw;}
#modal07 .Fw3 {
    flex-direction: column;
    padding: 0 0 17vw;}
#modal07 .ProdName1 {
    padding: 0 0 1.3vw;}
#modal07 .flexBox2 {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin: -9vw 0 0;}
#modal07 .Copy2 {
    width: 52%;
    position: relative;
    text-align: center;}
#modal07 .ModImg2 {
    width: 45%;}
#modal07 .flexBox3 {
    padding: 10vw 0 0;}
#modal07 .ProdName2 {
    text-align: center;}
#modal07 .Credit2 {
    text-align: center;
    padding: 2vw 0 3vw;}
#modal07 .ModImg3 {
    width: 80%;
    margin: auto;}
#modal07 .Copy3 {
    text-align: center;
    padding: 3vw 0 0;}



.PageTop {display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 16px 0 120px;
    flex-direction: column;}
.ArwTop {
    display: inline-block;
    vertical-align: middle;
    color: #000000;
    line-height: 1;
    width: 6vw;
    height: 6vw;
    border: 1.6px solid #000000;
    border-left: 0;
    border-bottom: 0;
    box-sizing: border-box;
    transform: translateY(25%) rotate(-45deg);
    margin: 0 0 0.7vw 0.9vw;}
.PageTop p.font {
    color: #000000;
    font-size: 6vw;}




section#looks {
background-color: #FFF;
width: 100%;
height: 100vh;
padding: 0px 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 .look {width: 100%;
    margin: 0px auto 0 auto;
    border-bottom: 1px solid #000000;
    padding: 48px 0 48px;}




.CloseIcon {position: fixed;
    top: 7vw;
    right: 5vw;
    cursor: pointer;
    height: 12vw;
    width: 12vw;
    z-index: 999;}
.CloseIcon div {display: inline-block;
    vertical-align: middle;
    color: #333;
    line-height: 1;
    width: 12vw;
    height: 1px;
    background: currentColor;
    border-radius: 0.1em;
    position: relative;
    transform: rotate(45deg);}
.CloseIcon div:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: inherit;
    border-radius: inherit;
    transform: rotate(90deg);}
body.looking {overflow: hidden; }





a.cta.js-cta {text-decoration: underline;
    text-underline-offset: 0.14em;
    text-decoration-thickness: 0.07vw;}







ul.js-catalog__links {}
a.cta.js-cta {
  text-decoration: underline;
  text-underline-offset: 0.1em;}
a.cta.js-cta.disable {
  pointer-events: none;
  text-decoration: none;
  color: #000000;}
a.cta.js-cta.disable::after {
				content: "";
/*				content: "Coming soon.";
				padding-left: 8px;*/
				font-size: 10px;
				color: #aaaaaa;}
li {list-style: none;}




/*////////// 個別ID設定 //////////*/
/*////////// 規定数値変更 //////////*/  
.c-header {z-index: 1;}
.c-footer-navigation-container.zAjust{z-index: 0!important;}
/*////////// クレジットデザイン調整 //////////*/
/*////////// COMMON(SP) //////////*/
.pc{display: none;} .sp{display: block;}
/*////////// 背景色変える時使用 //////////*/

}

/*======================== common ========================*/
p {font-family: YuGothic,'Yu Gothic','Yu Gothic UI','Hiragino Kaku Gothic ProN','ヒラギノ角ゴ ProN W3','ヒラギノ角ゴシック','Hiragino Sans','ＭＳ ゴシック',sans-serif;font-feature-settings:"palt"; font-size: 13px; padding: 0 0px;letter-spacing: 0.03rem;}


img {width: 100%;}


/*////////// .font { } //////////*/  
.font{font-family: urw-din-condensed, sans-serif;font-weight: 700;font-style: normal;font-feature-settings:"palt";margin-bottom:0;letter-spacing: 0;}
.fontJp{font-style: normal;font-feature-settings:"palt";margin-bottom:0;}

/*////////// Animetion //////////*/
/*ブラー*/
/*@keyframes blur {0% {filter: blur(10px);}100% {filter: blur(0);}}
.fadein {filter: blur(10px);}
.fadein.scrollin {filter: blur(0);animation-name: blur;animation-duration: 1s;animation-iteration-count:1;animation-fill-mode:forwards;}*/
/*106%→100%*/
/*.fadein {opacity:0; -webkit-transform: scale3d(1.06, 1.06, 1.06);transform: scale3d(1.06, 1.06, 1.06);transition : all 2s ease;}
.fadein.scrollin { opacity:1; -webkit-transform: scale3d(1, 1, 1);transform: scale3d(1, 1, 1);}*/ 
/*FadeinUp*/
.fadein {opacity:0; transform : translate(0, 40px); transition : all 0.3s ease;}
.fadein.scrollin { opacity:1; transform : translate(0, 0);}

@-webkit-keyframes fadeInDown {from {opacity: 0;-webkit-transform: translate3d(0, -10%, 0);transform: translate3d(0, -10%, 0);}to {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}}
@keyframes fadeInDown {from {opacity: 0;-webkit-transform: translate3d(0, -10%, 0);transform: translate3d(0, -10%, 0);}to {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}}

@-webkit-keyframes fadeInLeft {
from {opacity: 0;-webkit-transform: translate3d(-15%, 0, 0);transform: translate3d(-15%, 0, 0);}to {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}}
@keyframes fadeInLeft {from {opacity: 0;-webkit-transform: translate3d(-15%, 0, 0);transform: translate3d(-15%, 0, 0);}
to {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}}

@-webkit-keyframes fadeInRight {from {opacity: 0;-webkit-transform: translate3d(15%, 0, 0);transform: translate3d(15%, 0, 0);}to {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}}
@keyframes fadeInRight {from {opacity: 0;-webkit-transform: translate3d(15%, 0, 0);transform: translate3d(15%, 0, 0);}to {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}}

@-webkit-keyframes fadeInUp {from {opacity: 0;-webkit-transform: translate3d(0, 15%, 0);transform: translate3d(0, 15%, 0);}to {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}}
@keyframes fadeInUp {from {opacity: 0;-webkit-transform: translate3d(0, 15%, 0);transform: translate3d(0, 15%, 0);}to {opacity: 1;-webkit-transform: translate3d(0, 0, 0);transform: translate3d(0, 0, 0);}}