@charset "utf-8";
/* CSS Document */

/* base
-----------------------------------------------*/
/* ========== base style ========== */

/* common parts
-----------------------------------------------*/
/* ========== text ========== */
/* ========== border ========== */
/* ========== float ========== */
/* ========== display ========== */
/* ========== position ========== */
/* ========== overflow ========== */
/* ========== width ========== */
/* ========== margin ========== */
/* ========== background ========== */
/* ========== device displaying ========== */
/* ========== animation for ScrollTrigger.min.js  ========== */

/* other style
-----------------------------------------------*/



/* base
-----------------------------------------------*/
picture {
display: block;
}

/* ========== base style ========== */
.allwrapper {
width: 100%;
min-height: 100vh;
color: #3e3c3c;
font-family: futura-pt, sans-serif;
font-style: normal;
font-weight: 300;
font-size: 5.6vw;
line-height: 100%;
font-feature-settings: "palt";
letter-spacing: 0.01em;
background: #e2e0da;
animation-delay: 0.75s;
}
.allwrapper * {
box-sizing: border-box;
}
.allwrapper a:link,
.allwrapper a:visited,
.allwrapper .acordion_btn {
color: #3e3c3c;
text-decoration: none;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}
.allwrapper a:hover,
.allwrapper a:hover img,
.allwrapper button:hover img {
opacity: 0.80;
filter: alpha(opacity=80);
}
.allwrapper ol,
.allwrapper ul {
list-style:none;
}
.allwrapper img, 
.allwrapper video,
.allwrapper button {
width: 100%;
height: auto;
display: block;
margin-left: auto;
margin-right: auto;
-webkit-transition: all 0.3s ease;
-moz-transition: all 0.3s ease;
-o-transition: all 0.3s ease;
transition: all  0.3s ease;
}
.allwrapper button {
cursor: pointer;
color: #3e3c3c;
font-family: futura-pt, sans-serif;
font-style: normal;
font-weight: 300;
font-size: 5.6vw;
line-height: 100%;
font-feature-settings: "palt";
letter-spacing: 0.01em;
}
@media (min-width:768px){
	.allwrapper {
	width: 100vw;
	font-size: 18px;
	}
}

/* common parts
-----------------------------------------------*/
/* ========== text ========== */
/* align */
.al_left { text-align: left; }
.al_center { text-align: center; }
.al_right { text-align: right; }

/* size */
.fs8 { font-size: 2.13vw; }
.fs9 { font-size: 2.4vw; }
.fs10 { font-size: 2.67vw; }
.fs11 { font-size: 2.93vw; }
.fs12 { font-size: 3.2vw; }
.fs13 { font-size: 3.47vw; }
.fs14 { font-size: 3.73vw; }
.fs15 { font-size: 4vw; }
.fs16 { font-size: 4.27vw; }
.fs17 { font-size: 4.53vw; }
.fs18 { font-size: 4.8vw; }
@media (min-width:768px){
	.fs10 { font-size: 10px; }
	.fs12 { font-size: 12px; }
	.fs18 { font-size: 18px; }
}

/* weight */
.fw200 { font-weight: 200 !important; }
.fw300 { font-weight: 300 !important; }
.fw400 { font-weight: 400 !important; }
.fw500 { font-weight: 500 !important; }
.fw600 { font-weight: 600 !important; }
.fw700 { font-weight: 700 !important; }

/* line height */
.lh120 { line-height: 120%; }
.lh130 { line-height: 130%; }
.lh140 { line-height: 140%; }
.lh150 { line-height: 150%; }
.lh160 { line-height: 160%; }
.lh170 { line-height: 170%; }
.lh180 { line-height: 180%; }
.lh190 { line-height: 190%; }
.lh200 { line-height: 200%; }
.lh210 { line-height: 210%; }

/* letter space */
.ltrspace0 { letter-spacing: 0; }
.ltrspace0025 { letter-spacing: 0.025em; }
.ltrspace005 { letter-spacing: 0.05em; }
.ltrspace0075 { letter-spacing: 0.075em; }
.ltrspace01 { letter-spacing: 0.1em; }
.ltrspace0125 { letter-spacing: 0.125em; }
.ltrspace015 { letter-spacing: 0.15em; }


/* ========== float ========== */
/* clearfix */
.clearfix:before,
.clearfix:after {
display: table;
content: " ";
}
.clearfix:after { clear: both; }

/* float */
.float_left { float: left; }
.float_right { float: right; }


/* ========== display ========== */
.disp_block { display: block !important; }
.disp_iblock { display: inline-block !important; }
.disp_inline { display: inline !important; }
.disp_none { display: none; }
.disp_flex { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-start; }


/* ========== position ========== */
.posi_relative { position: relative !important; }
.posi_absolute { position: absolute !important; }
.posi_fixed { position: fixed !important; }


/* ========== overflow ========== */
.overflow_hidden { overflow: hidden !important; }


/* ========== margin ========== */
/* margin-auto */
.mx_auto { margin-left: auto; margin-right: auto; }


/* ========== device displaying ========== */
.sp_none{ display: none; }
img.sp_none{ display: none; }
.sp_only{ display: block; }
img.sp_only{ display: block; }
@media (min-width:768px){
	.sp_none{display: block;}
	img.sp_none{display: block;}
	.tab_none { display: none; }
	img.tab_none { display: none; }
	.sp_only{display: none;}
	img.sp_only{display: none;}
	.sp_only{display: none;}
	img.sp_only{display: none;}
}
.spc_none{ display: block; }
@media (min-width:1199px){.pc_none{display: block;}}
.pc_only{ display: none; }
@media (min-width:1200px){.pc_none{display: none;}
.pc_only{display: block;}
.tab_none{ display: block; }
}


/* ========== animation for ScrollTrigger.min.js  ========== */
.invisible {
transition: opacity 1s ease;
opacity: 0.0;
}
.visible {
transition: opacity 1s ease;
opacity: 1.0;
}



/* other style
-----------------------------------------------*/
body {
overflow: visible !important;
}
.allwrapper {
padding-bottom: 17.33vw;
animation-delay: 0.75s;
}
video.sp_none {
display: none !important;
}
.ff_yu-gothic {
font-family: yu-gothic-pr6n, sans-serif;
font-weight: 400;
}
@media (min-width:768px){
	.allwrapper {
	padding-bottom: 100px;
	}
	video.sp_only {
	display: none !important;
	}
	video.sp_none {
	display: block !important;
	}
}

.mv {
overflow: hidden;
width: 100%;
min-height: 133vw;
}
.mv_logo {
top: 118.9vw;
left: 25.07vw;
width: 49.86vw;
z-index: 2;
}
.mv_img01 {
top: 20vw;
left: 16.935vw;
width: 66.13vw;
height: 88.35466vw;
background: #000;
}
.mv_stayc {
top: 0;
left: 0;
width: 100vw;
}
.mv_title {
width: 52vw;
margin-top: 20vw;
}
.mv_img02 {
width: 100%;
margin-top: 16.8vw;
}
@media (min-width:768px){
	.mv {
	min-height: 585px;
	}
	video.mv_movie {
	width: 1250px;
	height: auto;
	margin-left: calc(50% - 625px);
	}
	.mv_logo {
	top: 475px;
	left: calc(50% - 95px);
	width: 190px;
	}
	.mv_img01 {
	top: 105px;
	left: calc(50% - 123px);
	width: 247px;
	height: 330px;
	}
	.mv_stayc {
	top: 30px;
	left: calc(50% - 190px);
	width: 380px;
	}
	.mv_title {
	width: 280px;
	margin: 770px auto 0 calc(50% + 50px);
	}
	.mv_img02 {
	width: 350px;
	margin: -350px 50% 0 auto;
	}
}
@media (min-width:1250px){
	video.mv_movie {
	width: 100%;
	height: auto;
	margin-left: 0;
	}
	.mv_logo {
	top: 38vw;
	left: 42.4%;
	width: 15.2%;
	}
	.mv_img01 {
	top: 8.4vw;
	left: 40.13%;;
	width: 19.76%;
	}
	.mv_stayc {
	top: 2.4vw;
	left: 34.8%;
	width: 30.4%;
	}
	.mv_title {
	width: 333px;
	margin: calc(46.64vw + 210px) auto 0 calc(50% + 65px);
	}
	.mv_img02 {
	width: 375px;
	margin: -390px calc(50% + 57px) 0 auto;
	}
}

.modal {
display: none;
}
.modal_btn,
.modal_btn02 {
top: 15px;
right: 15px;
width: 22px;
cursor: pointer;
}
img.modal_close {
top: 10px;
right: 10px;
width: 14px;
cursor: pointer;
z-index: 2;
}
.credit {
top: calc(50% - 58.5vw);
left: calc(50% - 44vw);
width: 88vw;
height: 117vw;
padding: 0 5.06vw;
background: #fff;
z-index: 100;
}
.creditlink {
left: 0;
width: 100%;
}
.creditlink li + li {
margin-top: 17px;
}
.credit_inner {
align-items: center;
height: 100%;
}
.creditlink .disp_flex {
justify-content: flex-start;
align-items: center;
}
.creditlink span {
display: block;
}
.creditlink .itemname {
width: 6.75em;
}
.creditlink .price {
width: 4.1em;
}
.creditlink .check {
width: 16.66vw;
text-align: center;
font-size: 4.4vw;
background: #000;
color: #fff;
}
@media (min-width:768px){
	.credit {
	top: calc(50% - 207px);
	left: calc(50% - 150px);
	width: 300px;
	height: 415px;
	padding: 0 20px;
	}
	.creditlink .itemname {
	width: 6.5em;
	}
	.creditlink .price {
	width: 4.25em;
	}
	.creditlink .check {
	width: 65px;
	font-size: 16px;
	}
}

.message {
width: 100%;
background: #000;
}
.message_inner {
width: 90%;
padding-bottom: 1.4vw;
color: #fff;
font-size: 6.66vw;
}
.messagemovie {
top: 16vw;
left: 10vw;
width: 80vw;
height: 0;
padding-top: 107.3vw;
}
.messagemovie iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media (min-width:768px){
	.message_inner {
	width: 100%;
	padding: 5px 0 12px 10px;
	font-size: 27px;
	}
	.messagemovie {
	top: 10vw;
	left: 32%;
	width: 36%;
	padding-top: 48.17vw;
	}
}
@media (min-width:1250px){
	.message_inner {
	width: 1200px;
	margin: 0 auto;
	padding: 12px 0 22px 0;
	font-size: 45px;
	}
	.messagemovie {
	top: 100px;
	left: 32%;
	width: 450px;
	padding-top: 602px;
	}

}

.sec01 {
width: 80vw;
margin-top: 16vw;
}
@media (min-width:768px){
	.sec01 {
	width: 100%;
	margin-top: 60px;
	}
}
@media (min-width:1250px){
	.sec01 {
	margin-top: 100px;
	}
}

.sec02,
.sec03 {
height: 750vw;
padding-top: 20vw;
background: #e2e0da;
}
.sec03 {
z-index: 4;
}
img.sec02_name {
position: -webkit-sticky;
position: sticky;
top: 5vw;
width: 13.3vw;
margin: 0 auto 1vw 4vw;
z-index: 3;
}
img.sec03_name {
position: -webkit-sticky;
position: sticky;
top: 5vw;
width: 68.26vw;
margin: 0 auto 1vw 1.33vw;
z-index: 3;
}
.sec02_01,
.sec03_01 {
position: -webkit-sticky;
position: sticky;
top: 40px;
}
.sec02_02,
.sec02_03,
.sec02_04,
.sec03_02,
.sec03_03,
.sec03_04 {
position: -webkit-sticky;
position: sticky;
top: 40px;
margin: 50vw auto 0;
}
.sec02_04,
.sec03_04 {
z-index: 3;
}
@media (min-width:768px){
	.sec_imgbox {
	width: 350px;
	}
	.sec02,
	.sec03 {
	height: calc(63.93vw + 2000px);
	margin-top: 75px;
	padding-top: 0;
	}
	.sec03 {
	padding-bottom: 60px;	
	}
	img.sec02_name,
	img.sec03_name {
	top: 60px;
	left: calc(50% - 345px);
	z-index: 2;
	margin: 0;
	}
	img.sec02_name {
	width: 40px;	
	}
	img.sec03_name {
	width: 215px;	
	}
	.sec02_01,
	.sec03_01 {
	margin: -60px auto 0 calc(50% - 355px);
	}
	.sec02_02,
	.sec02_03,
	.sec03_02,
	.sec03_03 {
	margin-top: 120px;
	margin-left: calc(50% + 10px);
	}
	.sec02_04,
	.sec03_04 {
	margin-top: 170px;
	}
	.sec02_04,
	.sec03_04 {
	z-index: 5;
	}
}
@media (min-width:1250px){
	.sec_imgbox {
	width: 562px;
	}
	.sec02,
	.sec03 {
	margin-top: 120px;
	}
	.sec02 {
	height: 4000px;
	}
	.sec03 {
	height: 4000px;
	padding-bottom: 100px;
	}
	img.sec02_name,
	img.sec03_name {
	left: calc(50% - 560px);
	}
	img.sec02_name {
	width: 62px;	
	}
	img.sec03_name {
	width: 346px;	
	}
	.sec02_01,
	.sec03_01 {
	margin: -95px auto 0 calc(50% - 580px);
	}
	.sec02_02,
	.sec02_03,
	.sec03_02,
	.sec03_03 {
	margin-top: 150px;
	margin-left: calc(50% + 20px);
	}
	.sec02_04,
	.sec03_04 {
	height: 750px;
	overflow: hidden;
	}
}

.sec04 {
margin-top: 26.66vw;
}
@media (min-width:768px){
	.sec04 {
	margin-top: 0;
	}
	.sec04_01 {
	width: 700px;
            margin-bottom: 50px;
	}
}
@media (min-width:1250px){
	.sec04_01 {
	width: 950px;
    
	}
}

.comingsoon {
margin-top: 26.6vw;
}
.comingsoon_title {
margin-bottom: 4.5vw;
font-size: 9.33333vw;
}
.comingsooon_ul {
margin-top: 2.66vw;
    padding: 0;
}
	.comingsooon_ul img {
	width: 100%;

       
	}


@media (min-width:768px){
	.comingsoon {
	margin-top: 75px;
	}
	.comingsoon_title {
	margin-bottom: 40px;
	font-size: 30px;
	}
	.comingsooon_ul {

	width: 450px;
	margin-top: 30px;
        padding-left: 0px

	}
	.comingsooon_ul img {
	width: 470px;
	margin-top: 0;
       
	}
}
@media (min-width:1250px){
	.comingsoon {
	margin-top: 130px;
	}
	.comingsoon_title {
	margin-bottom: 60px;
	font-size: 50px;
	}
	.comingsooon_ul {
	width: 1105px;
	margin-top: 30px;
	}
	.comingsooon_ul img {
	width: 537px;
	}
}

.campaign {
margin-top: 26.66vw;
padding: 10.66vw 0;
background: #cd9d96;
}
.campaign * {
color: #fff;
}
.campaign_title {
width: 64vw;
margin-bottom: 5vw;
}
.campaign_img01 {
width: 92.8vw;
margin-top: 10vw;
}
.campaign_movie {
width: 93.33vw;
height: 0;
padding-top: 52.5vw;
margin-top: 6.66vw;
}
.campaign_movie iframe {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
.campaign_btn {
width: 93.33vw;
margin-top: 6.93vw;
}

    .campaign_bnr {
	width: 93.33vw;
        margin-top: 10.93vw;
	}

  .campaignphoto img{
	width: 60.33vw;
        margin-top:  5.93vw;
	}

@media (min-width:768px){
	.campaign {
	margin-top: 95px;
	padding: 75px 0;
	}
	.campaign_title {
	width: 286px;
	margin-bottom: 40px;
	}
	.campaign_text {
	font-size: 19px;
	}
	.campaign_img01 {
	width: 467px;
	margin-top: 45px;
	}
	.campaign_movie {
	width: 590px;
	padding-top: 332px;
	margin-top: 70px;
	}
	.campaign_btn {
	width: 422px;
	margin-top: 58px;
	}
    .campaign_bnr {
	width: 622px;
	margin-top: 58px;
	}
    .campaignphoto img{
	width: 200px;
        margin-top: 58px;
	}
}
@media (min-width:1250px){
	.campaign {
	margin-top: 150px;
	padding-bottom: 75px;
	}
	.campaign_left {
	width: 467px;
	margin-left: calc(50% - 537px);
	}
	.campaign_right {
	width: 590px;
	margin: -545px auto 0 calc(50% - 40px);
        margin-bottom: 200px;
	}
	.campaign_movie {
	margin-top: 0;
	}
}

.making {
padding-top: 26.6vw;
}
.making_title {
font-size: 9.3333vw;
line-height: 85%;
}
.making_movie {
width: 93.33vw;
height: 0;
padding-top: 52.5vw;
margin-top: 6.66vw;
}
.making_movie iframe {
top: 0;
left: 0;
width: 100%;
height: 100%;
}
@media (min-width:768px){
	.making {
	padding-top: 90px;
	}
	.making_title {
	font-size: 30px;
	line-height: 90%;
	}
	.making_title span {
	font-size: 18px;
	}
	.making_movie {
	width: 590px;
	padding-top: 332px;
	margin-top: 20px;
	}
    

}
@media (min-width:1250px){
	.making {
	padding-top: 150px;
	}
	.making_title {
	font-size: 50px;
	line-height: 100%;
	}
	.making_title span {
	font-size: 30px;
	}
	.making_movie {
	width: 960px;
	padding-top: 541px;
	margin-top: 35px;
	}
}

.profile {
margin-top: 20vw;
}
.profile_title {
width: 46.66vw;
}
.profile_img01 {
width: 81.33vw;
margin-top: 6.66vw;
}
.profile_text {
margin-top: 7vw;
}
.profile_url {
margin-top: 3vw;
}
.profile_url a {
text-decoration: underline !important;
}
@media (min-width:768px){
	.profile {
	margin-top: 130px;
	}
	.profile_title {
	width: 258px;
	}
	.profile_img01 {
	width: 560px;
	margin: 50px auto 0;
	}
	.profile_text {
	margin-top: 40px;
	font-size: 20px;
	}
	.profile_url {
	margin-top: 25px;
	font-size: 16px;
	}
}
@media (min-width:1250px){
	.profile_title {
	margin-left: calc(50% + 175px);
	}
	.profile_img01 {
	margin: -20px auto 0 calc(50% - 580px);
	}
	.profile_text {
	width: 550px;
	margin: -300px auto 0 calc(50% + 30px);
	}
	.profile_url {
	width: 550px;
	margin-left: calc(50% + 30px);
	}
}

.brandlogo {
margin-top: 100px;
}
.brandlogo img {
width: 90px;
margin-bottom: 10px;
}
@media (min-width:768px){
	.brandlogo {
	margin-top: 150px;
	font-size: 15px;
	}
	.brandlogo img {
	width: 85px;
	margin-bottom: 12px;
	}
}