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

.modal {

width: 100%;

min-height: 100vh;

color: #000;

font-family: acumin-pro-condensed, sans-serif;

font-style: normal;

font-weight: 400;

font-size: 4vw;

line-height: 100%;

font-feature-settings: "palt";

letter-spacing: 0.05em;

background: #fff;

animation-delay: 0.75s;

}

.modal .sml {

font-size:11px!important;

}

.modal {

min-height: auto;

}

.allwrapper *,

.modal * {

box-sizing: border-box;

}

.allwrapper a:link,

.allwrapper a:visited,

.allwrapper .acordion_btn {

color: #000;

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;

}

@media (min-width:768px){

	.allwrapper {

	width: 100vw;

	}

	.allwrapper,

	.modal {

	font-size: 16px;

	}

}

@media (min-width:1200px){

	.allwrapper,

	.modal {

	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.133333vw; }

.fs9 { font-size: 2.4vw; }

.fs10 { font-size: 2.666666vw; }

.fs11 { font-size: 2.933333vw; }

.fs11_5 { font-size: 3.066666vw; }

.fs12 { font-size: 3.2vw; }

.fs12_5 { font-size: 3.33333333vw; }

.fs13 { font-size: 3.466666vw; }

.fs13_5 { font-size: 3.6vw; }

.fs14 { font-size: 3.733333vw; }

.fs15 { font-size: 4vw; }

.fs16 { font-size: 4.266666vw; }

.fs17 { font-size: 4.533333vw; }

.fs18 { font-size: 4.8vw; }

.fs19 { font-size: 5.066666vw; }

.fs20 { font-size: 5.333333vw; }



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

.lh100 { line-height: 100%; }

.lh110 { line-height: 110%; }

.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

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

.allwrapper {

padding-bottom: 70px;

}

body.static .wrapper {

margin-top: 0;

}

.footer {

position: relative;

background: #fff;

z-index: 2;

}

.help-area,

.sns-area,

.group-area {

background: #fff;

border-top: 1px solid #ddd;

}

#ch-plugin {

display: none !important;

}

@media (min-width:768px){

	.allwrapper {

	padding-bottom: 10.4vw;

	}

	.footer-inner {

	background: #fff;

	border-top: 1px solid #C9C9C9;

	}

	.footer-group {

	border-bottom: 1px solid #C9C9C9;

	background: #fff;

	}

	.help-area,

	.sns-area {

	border: none;

	}

}





.mv {

padding: 1.6vw 0 16.8vw;

}

.mv_img {

width: 96.8%;

}

.mv_title {

width: 66.66666666%;

margin: 9.33vw auto 0 6.66666666%;

animation-delay: 1.5s;

}

img.mv_brandlogo {

top: 114.66vw;

left: 67.46666666%;

width: 24%;

animation-delay: 1.5s;

}

@media (min-width:768px){

	.mv {

	width: 91.66666666%;

	padding: 0.83333333vw 0;

	}

	.mv_img {

	width: 50vw;

	margin: 0 auto 0 0;

	}

	.mv_title {

	position: absolute;

	top: 34.58333333vw;

	left: 57.08333333vw;

	width: 26.0833333333vw;

	margin: 0;

	}

	img.mv_brandlogo {

	top: 25vw;

	left: 57.08333333vw;

	width: 9.41666666vw;

	}

}



.imglist_wrapper {

width: 97.0666666666%;

}

.modal_open {

cursor: pointer;

-webkit-transition: all 0.3s ease;

-moz-transition: all 0.3s ease;

-o-transition: all 0.3s ease;

transition: all  0.3s ease;

}

.modal_open:hover {

opacity: 0.70;

filter: alpha(opacity=70);

}

.imglist_box {

width: 48vw;

margin-bottom: 1.06666666vw;

}

.imglist_num {

bottom: 2.66vw;

right: 2.66vw;

color: #fff;

}

.imglist_num.color_black {

color: #000;

}

.imglist_box picture {

filter: grayscale(100%);

}

.imglist_box picture.changetone {

animation: anime_changetone 0.4s ease-out forwards;

}

.imglist_box:nth-child(2n) picture.changetone {

animation-delay: 0.3s;

}

@keyframes anime_changetone {

	0% {

	filter: grayscale(100%);

	}

	100% {

	filter: grayscale(0);

	}

}

img.bottomlogo {

width: 72px;

margin-top: 70px;

}

@media (min-width:768px){

	.imglist_wrapper {

	width: 91.66666666%;

	}

	.imglist_box {

	width: 32.72727272727273%;

	margin-bottom: 0.83333333vw;

	}

	.imglist_box:nth-child(3n) picture.changetone {

	animation-delay: 8s;

	}

	.imglist_box:nth-child(3n - 1) picture.changetone {

	animation-delay: 0.4s;

	}

	.imglist_box:nth-child(3n - 2) picture.changetone {

	animation-delay: 0s;

	}

	.imglist_num {

	bottom: 10px;

	right: 10px;

	font-size: 16px;

	}

}

@media (min-width:1200px){

	.imglist_num {

	bottom: 1.08333333vw;

	right: 1.08333333vw;

	font-size: 1.5vw;

	}

	img.bottomlogo {

	width: 6%;

	margin-top: 10.4vw;

	}

}



/* ========== modal ========== */

body.is-modal-active,

body.is-concept-active {

overflow: hidden;

}

body.is-concept-active .wrapper {

transform: translateX(-86.66vw);

}



.modal {

z-index: 200;

}

.modal__container{

z-index:9000;

position: fixed;

top: -150vh;

left: 0;

width: 100%;

height: 101%;

text-align: center;

background: rgba(255,255,255,90%);

padding: 6.13vw 0 32.27vw;

overflow: auto;

opacity: 0;

visibility: hidden;

box-sizing: border-box;

}

.modal__container.is-active{

visibility: visible;

top: 0;

}

.modal__close-btn{

position: fixed;

top: 6vw;

right: 2.66666666vw;

width: 4vw;

cursor: pointer;

}

img.modal__close-btn-img {

width: 100%;

height: auto;

}

.modal__content{

text-align: left;

}

.modal_item + .modal_item {

margin-top: 50px;

}

.modal_box {

width: 90.666666666%;

margin: 0 auto 0 0;

}

.modal_box picture,

.modal_box img {

width: 100%;

height: auto;

}

.modal_box ul {

margin-top: 3.2vw;

}

.modal_box ul,

.modal_box li {

list-style: none;

}

.modal_box li {

line-height: 160%;

text-align: right;

}

.modal_box li span {

text-decoration: underline!important;

}



@media (min-width:768px){

	.modal__container {

	padding: 50px 0 100px;

	}

	.modal__close-btn{

	top: 50px;

	right: calc(50% - 300px);

	width: 24px;

	}

	.modal_box {

	width: 500px;

	margin: 0 auto;

	}

	.modal_box ul {

	margin-top: 15px;

	}

	.modal_item + .modal_item {

	margin-top: 110px;

	}

}

@media (min-width:1200px){

	.modal_box {

	width: 680px;

	}

	.modal__close-btn{

	right: calc(50% - 395px);

	width: 30px;

	}

}