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

padding-bottom: 0;

color: #000;

font-family: yu-gothic-pr6n, sans-serif;

font-style: normal;

font-weight: 400;

font-size: 2.66666666vw;

line-height: 100%;

letter-spacing: 0.01em;

animation-delay: 0.75s;

}

@media (min-width:768px){

	.allwrapper {

	font-size: 11.4px;

	}

}

.sp-menu,

.pc-menu {

position: relative;

z-index: 2;

background: #fff;

}

.allwrapper *,

.modal * {

box-sizing: border-box;

}

.allwrapper a:link,

.allwrapper a:visited,

.allwrapper .acordion_btn {

color: #040000;

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 button:hover {

opacity: 0.65;

filter: alpha(opacity=65);

}

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

}



/* common parts

-----------------------------------------------*/

/* ========== text ========== */

/* align */

.al_left { text-align: left; }

.al_center { text-align: center; }

.al_right { text-align: right; }



/* size */

.fs8 { font-size: 2.13333333vw; }

.fs9 { font-size: 2.4vw; }

.fs10 { font-size: 2.66666666vw; }

.fs11 { font-size: 2.93333333vw; }

.fs12 { font-size: 3.2vw; }

.fs13 { font-size: 3.46666666vw; }

.fs14 { font-size: 3.73333333vw; }

.fs15 { font-size: 4vw; }

.fs16 { font-size: 4.26666666vw; }

.fs17 { font-size: 4.53333333vw; }

.fs18 { font-size: 4.8vw; }

@media (min-width:768px){

	.fs9 { font-size: 10px; }

	.fs12 { font-size: 14px; }

	.fs14 { font-size: 16px; }

}



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

}





/* ========== 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-x: visible; overflow-y: visible; }

.allwrapper { width: 100vw; }

.allwrapper::before {

content: ""; width: 100vw; height: calc(100vh - 80px);

position: fixed; bottom: 0; left: 0;

background: url("../images/bgimg_pc.jpg") center center/ cover;

z-index: -1;

}

.sp-menu,

.pc-menu {

position: relative;

width: 100%;

z-index: 3;

background: #fff;

}

.pc-menu {

position: fixed;

}

@media (min-width:768px){

	.allwrapper { margin-top: -105px; z-index: 2; }

}

@media (min-width:1200px){

	body { overflow: hidden; }

}



.introanime {

top: 0; left: 0;

display: flex; align-items: center; width: 100%; height: 100vh;

background: #4164bc; z-index: 9999; animation-delay: 1.5s;

}

.introanime.disp_none { display: none !important; }

.introanime_logo { width: 36%; margin-top: -5vw; margin-left: 34%; }

.maincontents { width: 100%; background: #faf7f3; animation-delay: 2.5s; }

@media (min-width:768px){

	.introanime_logo { width: 200px; margin-top: -15px; margin-left: calc(50% - 90px); }

	.maincontents { width: 430px; position: relative; padding-top: 80px; }

}



.mv { width: 100%; height: 177.86666666%; }

.mv h1,

.mv_text,

img.mv_brandlogo { animation-delay: 3.25s; }

img.mv_title { top: 5.86vw; left: 4.26666666%; width: 15.2%; }

img.mv_copy { bottom: 18.4vw; left: 5.33%; width: 81%; }

.mv_text { bottom: 4.53vw; left: 5.33%; color: #fff; }

img.mv_brandlogo { top: 5.33vw; right: 5.33333333%; width: 32%; }

@media (min-width:768px){

	.mv { height: 764.8px; }

	img.mv_title { top: 25px; }

	img.mv_copy { bottom: 80px; }

	.mv_text { bottom: 20px; }

	img.mv_brandlogo { top: 23px; }

}

@media (min-width:1200px){

	img.mv_brandlogo { display: none; }

}



.price_wrapper { width: 60%; margin-top: 8vw; }

.price_wrapper * { font-family: poppins, sans-serif; letter-spacing: 0.05em; }

.pricebox + .pricebox { margin-top: 2.4vw; }

.pricebox .disp_flex { align-items: center; background: url("../images/btn-buy_black.svg") right center / 20.44444444% 4.26666666vw no-repeat; }

.pricebox .disp_flex:hover { background: url("../images/btn-buy_blue.svg") right center / 20.44444444% 4.26666666vw no-repeat; }

.pricebox a { -webkit-transition: none !important; -moz-transition: none !important; -o-transition: none !important; transition: none !important; }

.price_itemname { width: 47.11111112%; line-height: 4.3493333333vw; margin-top: 0.4em; }

.price_price { width: 32.44444444%; line-height: 4.3493333333vw; margin-top: 0.4em; }

.price_buy { width: 20.44444444%; }

.price_notice { margin-top: 4.26vw; }

@media (min-width:768px){

	.price_wrapper { margin-top: 35px; }

	.pricebox + .pricebox { margin-top: 10px; }

	.pricebox .disp_flex { background: url("../images/btn-buy_black.svg") right center / 53px 19px no-repeat; }

	.pricebox .disp_flex:hover { background: url("../images/btn-buy_blue.svg") right center / 53px 19px no-repeat; }

	.price_itemname { line-height: 14px; }

	.price_price { line-height: 14px; }

	.price_notice { margin-top: 18px; }

}



img.intro_logo { position: sticky; top: 6vw; width: 34.66%; margin: 6vw auto 0 3.2%; z-index: 3; }

.intro_title { width: 49.86666666%; margin: 12.53vw auto 0 44.26666666%; }

.intro_itemcopy { color: #4164bc; }

.intro_itemimg { width: 77.33333333%; margin-top: 7.2vw }

.intro_itemtext { width: 89.33333333%; margin-top: 9.33vw; line-height: 240%; text-align: justify; }

.intro_item01 { margin-top: 20.8vw; }

.intro_item01 .intro_itemcopy { margin-left: 5.86666666%; }

.intro_item01 .intro_itemimg { margin-left: 0; }

.intro_item01 .price_wrapper { margin-left: 5.6%; }

.intro_item02 { margin-top: 18.66vw; padding-bottom: 39.2vw; }

.intro_item02 .intro_itemcopy,

.intro_item02 .intro_itemimg,

.intro_item02 .price_wrapper { margin-left: 22.66666666%; }

@media (min-width:768px){

	img.intro_logo { top: 105px; margin-top: 25px; }

	.intro_title { margin-top: 55px; }

	.intro_itemimg { margin-top: 30px; }

	.intro_itemtext { margin-top: 40px; }

	.intro_item01 { margin-top: 90px; }

	.intro_item02 { margin-top: 80px; padding-bottom: 70px; }

}

@media (min-width:1200px){

	img.intro_logo { position: static; }

}



.lookbox { padding-bottom: 30.66vw; }

.look_mv { width: 100%; height: 146.666666vw; padding: 9.33vw 11.6% 0; }

img.look_num { top: 15.2vw; width: auto; height: 11.73vw; z-index: 2; }

.look_mvimg { margin-top: 9.33vw; }

.look_text { width: 71.46666666%; margin-top: 14.13vw; line-height: 240%; text-align: justify; }

@media (min-width:768px){

	.lookbox { padding-top: 80px; padding-bottom: 70px; }

	.look_mv { height: 630px; padding-top: 40px; }

	img.look_num { top: 65px; height: 50px; }

	.look_mvimg { margin-top: 40px; }

	.look_text { margin-top: 60px; }

}



.look01 .look_mv { background: url("../images/look01-mainbg.jpg") 0 0 / cover; }

.look01 img.look_num { left: 8.53333333%; }

.look01_subimg01 { width: 50.13333333%; margin: 9.33vw auto 0 36% }

.look01_subimg02 { width: 34.13333333%; margin: 5.33vw auto 0 14.4% }

@media (min-width:768px){

	.look01_subimg01 { margin-top: 40px; }

	.look01_subimg02 { margin-top: 23px; }

}



.look02 .look_mv { background: url("../images/look02-mainbg.jpg") 0 0 / cover; }

.look02 img.look_num { left: 7.46666666%; }

.look02_subimg01 { width: 71.46666666%; margin: 11.2vw 0 0 auto; }

.look02_subimg02 { width: 49.33333333%; margin: 4.53vw auto 0 5.33333333%; }

@media (min-width:768px){

.look02_subimg01 { margin-top: 48px; }

.look02_subimg02 { margin-top: 20px; }

}



.look03 .look_mv { background: url("../images/look03-mainbg.jpg") 0 0 / cover; }

.look03 img.look_num { left: 7.2%; }

.look03_subimg01 { width: 34.13333333%; margin: 14.4vw auto 0 51.73333333%; z-index: 2; }

.look03_subimg02 { width: 50.13333333%; margin: -5.86vw auto 0 14.66666666%; }

@media (min-width:768px){

	.look03_subimg01 { margin-top: 62px; }

	.look03_subimg02 { margin-top: -25px; }

}



.look04 .look_mv { background: url("../images/look04-mainbg.jpg") 0 0 / cover; }

.look04 img.look_num { left: 6.66666666%; }

.look04_subimg01 { width: 50.13333333%; margin: 14.66vw auto 0 35.73333333%; }

.look04_subimg02 { width: 34.13333333%; margin: 3.2vw auto 0 14.4%; }

@media (min-width:768px){

	.look04_subimg01 { margin-top: 63px; }

	.look04_subimg02 { margin-top: 14px; }

}



.look05 .look_mv { background: url("../images/look05-mainbg.jpg") 0 0 / cover; }

.look05 img.look_num { left: 7.46666666%; }

.look05_subimg01 { width: 34.13333333%; margin: 10.66vw auto 0 51.73333333%; z-index: 2; }

.look05_subimg02 { width: 50.13333333%; margin: -3.2vw auto 0 14.13333333%; }

@media (min-width:768px){

	.look05_subimg01 { margin-top: 45px; }

	.look05_subimg02 { margin-top: 14px; }

}



.look06 .look_mv { background: url("../images/look06-mainbg.jpg") 0 0 / cover; }

.look06 img.look_num { left: 7.2%; }

.look06_subimg01 { width: 49.06666666%; margin: 8vw 0 0 auto; }

.look06_subimg02 { width: 71.46666666%; margin: 2.66vw auto 0 5.86666666%; }

@media (min-width:768px){

	.look06 { padding-bottom: 150px; }

	.look06_subimg01 { margin-top: 35px; }

	.look06_subimg02 { margin-top: 12px; }

}



.contentesfooter { padding: 16.53vw 0 20.53vw; background: #4164bc; }

.staffcredit { font-family: poppins, sans-serif; letter-spacing: 0.05em; color: #fff; line-height: 240%; }

.footerlogo { width: 26.66666666%; margin-top: 18.13vw; }

@media (min-width:768px){

	.contentesfooter { padding: 70px 0 90px; }

	.footerlogo { margin-top: 80px; }

}



img.pagetitle_pc { width: 30px; }

img.pagebrandlogo { width: 155px; }

@media (min-width:1200px){

	img.pagetitle_pc { top: 110px; right: 50px; display: block; }

	img.pagebrandlogo { top: 110px; left: 50px; display: block; }



	.snsshare,

	.lnav { position: fixed; display: block; }

	.snsshare *,

	.lnav * { font-family: poppins, sans-serif; letter-spacing: 0.05em }



	.snsshare { bottom: 50px; left: 60px;  width: 170px; }

	.snsshare_shareon { font-size: 12px; }

	.snsshare_list { margin-top: 15px; }

	.snsshare_list li { font-size: 13px; }



	.lnav { bottom: 40px; right: 60px; width: 225px; }

	.lnav li { font-size: 13px; }

	.lnav li a { display: block; width: 30px; line-height: 30px; }

}