/* font */
@import url(https://fonts.googleapis.com/earlyaccess/notosansjp.css);



#firstView {
  height: 100vh;
  height: calc(var(--vh) * 100);
}
	
/* bass */		
body {
font-family: 
'Hiragino Sans',
'Hiragino Kaku Gothic ProN',
'Noto Sans JP',
 sans-serif;
line-height: 100%; }

body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,span,
form,fieldset,input,textarea,p,blockquote,th,td {
padding: 0;margin: 0;}
ol,ul {list-style: none;margin:0;padding:0;}
html,body {height: 100%;text-decoration: none;}

a,a:hover,a:visited{
color: inherit;text-decoration: none;
}

iframe {float: left;
width: 100%;
aspect-ratio: 16/9; 
}

img{
width: 100%;
height: auto;
}

#loader {
position: absolute;
width: 100px;
top: 50%;left:50%;
transform: translate(-50%, -50%);
color: #6b6968;
font-family: 'Poppins', sans-serif;
	
}


#fade {
	width: 100%;
	height: 100%;
	display: none;
	background-color: #fff;
	position: fixed;
	top: 0px;
	left: 0px;
	z-index: 98;	
}



.wrapper {
position: relative;
width: 100%;
height:auto;
overflow: hidden;
}

.page-t{
position: fixed;
display: none;
bottom: 0;right: 25px;
width: 100px;
height:35px;text-align: right;
z-index: 2;
}


.sp-footer {
position: fixed;
z-index: 999;
bottom: 0;left: 0; 
width: 100%;
height:60px;	
background-color: #DF004E;	
}

.sp-footer-x{
color: #fff;margin-left: auto;
margin-right: auto;
width: 100%;
display:flex;
justify-content: center;align-items:center
}

.bt-l{ position: relative;
width: 179px;height:60px;
border-left: 30px solid transparent;	
border-right: 50px solid transparent;	
box-sizing: border-box;
display:flex;
justify-content: space-between;align-items:center
}
.bt-r{ position: relative;
width: 179px;height:60px;

}

.top-logo {
position: fixed;
top: 0;left: 100px;
z-index: 99999999;
width: 200px;height: 180px;
background:url(../img/G_Joliesse_logo_M2.png) center center/ cover no-repeat;
}


.header-container {
display: block;visibility: visible;
position: fixed;
top: 0;left: 0px;
width: 100vw;
height: 90px;
background-color: rgba(0, 0, 0, 0.8);
z-index: 9;
}


header{
position: absolute;
top: 0;right: 35px;
width: 450px;margin-top: 50px;
}



.margin-150{margin-top: 150px;width: 100%;float: left;}
.margin-140{margin-top: 140px;width: 100%;float: left;}
.margin-130{margin-top: 140px;width: 100%;float: left;}
.margin-100{margin-top: 100px;width: 100%;float: left;}
.margin-60{margin-top: 60px;width: 100%;float: left;}
.margin-50{margin-top: 50px;width: 100%;float: left;}
.margin-40{margin-top: 40px;width: 100%;float: left;}
.margin-30{margin-top: 30px;width: 100%;float: left;}
.margin-25{margin-top: 25px;width: 100%;float: left;}
.margin-20{margin-top: 20px;width: 100%;float: left;}

.line-h-250{line-height: 225%;}
.line-h-200{line-height: 180%;}
.line-h-150{line-height: 150%;}
.line-h-100{line-height: 100%;}


@media (max-width:767px),(min-width:767px)  {
.margin-20{margin-top: 15px;width: 100%;float: left;}
.margin-30{margin-top: 20px;width: 100%;float: left;}

.br-sp { display: inline; }
.br-pc { display: none; }
	
.s-typo-700{font-size: 50px;font-weight: 200;width: 100%;float: left;}	
.s-typo-500{font-size: 40px;font-weight: 200;width: 100%;float: left;}
	
.s-typo-250{font-size: 38px;font-weight: 200;}
.s-typo-200{font-size: 22px;font-weight: 200;}
.s-typo-180{font-size: 20px;font-weight: 200;}
.s-typo-20{font-size: 20px;font-weight: 200;}
.s-typo-16{font-size: 14px;font-weight: 200;}
.s-typo-14{font-size: 13px;font-weight: 200;}
.s-typo-13{font-size: 13px;font-weight: 200;}
.s-typo-12{font-size: 12px;font-weight: 200;}
.s-typo-11{font-size: 11px;font-weight: 200;}
.s-typo-10{font-size: 10px;font-weight: 200;}
.s-typo-9{font-size: 9px;font-weight: 200;}
}

@media screen and (min-width: 1024px)  {
.margin-20{margin-top: 20px;width: 100%;float: left;}
.margin-30{margin-top: 30px;width: 100%;float: left;}

.br-sp { display: none; }
.br-pc { display: inline; }
	
.s-typo-700{font-size: 70px;font-weight: 200;width: 100%;float: left;}
.s-typo-500{font-size: 50px;font-weight: 200;width: 100%;float: left;}
	
.s-typo-250{font-size: 29px;font-weight: 200;}
.s-typo-200{font-size: 29px;font-weight: 200;}
.s-typo-180{font-size: 27px;font-weight: 200;}
.s-typo-20{font-size: 20px;font-weight: 200;}
.s-typo-16{font-size: 16px;font-weight: 200;}
.s-typo-11{font-size: 12px;font-weight: 200;}
}

@media screen and (min-width: 1280px)  {
.br-sp { display: none; }
.br-pc { display: inline; }
	


}

.font-color-b{color: #000;}
.font-color-f{color: #fff;}
.font-color-g{color: #8E8E8E;}
.font-color-r{color: #C90050;}


.font-bold{font-weight: 600;}
.font-light{font-weight: 200;}

.bg-c-ff{background-color: #fff;}
.bg-c-f7{background-color: #f7f7f7;}
.bg-c-ed{background-color: #ededed;}


.main-container{
width: 100%;
background-color: #fff;
border-left: 35px solid transparent;
border-right: 35px solid transparent;
box-sizing: border-box;
}

.main-container-1210 {
margin-left: auto;
margin-right: auto;
display:flex;
justify-content: center;
flex-direction: column;
width: 1210px;

}


.main-container-1080 {
margin-left: auto;
margin-right: auto;
display:flex;
flex-direction: column;
width: 1080px;
}




@media (max-width:767px),(min-width:767px)  {
	
.top-logo {top: 0;left: 17px;width: 145px;height: 130px;}
header{display:none;visibility: hidden;}
.sp-footer {display: block;visibility: visible;}
.page-t{right: 17px;margin-bottom: 60px;}
	

	
.main-container{
border-left: 17px solid transparent;
border-right: 17px solid transparent;}
.main-container-1210 {width: 100%;}
.main-container-1080 {width: 100%;}	
}


@media screen and (min-width: 1024px)  {
	
.top-logo {top: 0;left: 100px;width: 200px;height: 180px;}	
header{display: block;visibility: visible;}
.sp-footer {display:none;visibility: hidden;}
.page-t{right: 25px;margin-bottom:0px;}
	


.main-container{
border-left: 35px solid transparent;
border-right: 35px solid transparent;}
.main-container-1210 {width: 100%;}
.main-container-1080 {width: 100%;max-width: 1024px;}	
}




@media screen and (min-width: 1210px)  {
	
.top-logo {top: 0;left: 100px;width: 200px;height: 180px;}	
header{display: block;visibility: visible;}
.sp-footer {display:none;visibility: hidden;}
	
.main-container-1210 {width: 1210px;}
.main-container-1080 {width: 1080px;max-width: 1080px;}
}


/* section1 */
.section1 {
position: relative;
float: left;
display:flex;
justify-content:center;
width: 100vw;
min-height: 100vh;
}

.top-copy{
position: absolute;
bottom: 17vh;
text-align: center;
z-index: 1;
color: #fff;
}



/* slick */
.slider {
	

position: relative;
width: 100vw;
height: 100vh;
z-index: 0;
background-color: #000;
}
.slick-img  {	
width: 100vw;
height: 100vh;
overflow: hidden;
position: relative;
}

.slick-img img {
width: 100%;height: 100vh;
object-fit: cover;	
}
	
@keyframes zoomUp {
  0% {
    transform: scale(1);
  }
  100% {
    transform: scale(1.2); 
  }
}
.add-animation {
  animation: zoomUp 10s linear 0s normal both;
}
/* slick */



/* section1 */








/* section2 */
.section2 {
position: relative;
width: 100%;
height: 910px;

}

.s-2-1{
position: absolute;
top: 10px;left: 0;
transform:translate(0,0);
width: 50%;
height: 900px;
overflow: hidden;
}
.s-2-1 img{
width: 100%;height: auto;
object-fit: cover;
}

.s-2-2{
position: absolute;
top: 200px;
right: 169px;
width: 50%;
height: 700px;
box-sizing: border-box;
text-align: center;
z-index: 2;
}


@media (max-width:767px),(min-width:767px)  {
.top-copy{bottom: 25vh;}
.section2 {height: 1400px;}
.s-2-1{left: 50%;width: 393px;height: 650px;transform:translate(-50%,0);}	
.s-2-2{
top: 575px;
right: 0px;
width: 100%;
height: 700px;

}
	


@media screen and (min-width: 1024px)  {
.top-copy{bottom: 17vh;}
.section2 {height: 910px;}
.s-2-1{left: 0;width: 50%;height: 900px;transform:translate(0,0);}
.s-2-2{
top: 200px;
right: 169px;
width: 50%;
height: 700px;
}

}

/* section2 */


/* section3 */
.section3 {
display:flex;
justify-content: space-between;
margin-left: auto;
margin-right: auto;
width: 100%;
height: 900px;
overflow: hidden;
}

.s-3{
position: relative;
float: left;
width: 285px;
height: 285px;
}

.link-01{margin-top: 210px;}
.link-02{margin-top: 60px;}
.link-03{margin-top: 25px;}
.link-04{margin-top: 140px;}
.link-05{margin-top: 25px;}
.link-06{margin-top: 300px;}


.tax-free-s{position: absolute;z-index: 2;
width: 100%;height: 45px; top: 250px;text-align: right;}
.tax-free-s img{height: 45px;width: auto;}



@media (max-width:390px),(min-width:390px)  {
.section3 {
display: inline;
height: auto;
margin-bottom: 50px;	
}
.s-3 {width: 100%;height: auto;}

.link-01{margin-top: 50px;}
.link-02{margin-top: 50px;}
.link-03{margin-top: 50px;}
.link-04{margin-top: 50px;}
.link-05{margin-top: 50px;}
.link-06{margin-top: 50px;}
	
.tax-free-s{top: 60px;right: 10px;}
}

@media screen and (min-width: 467px)  {
.section3 {display: inline;width: 390px;height: auto;}
}


@media screen and (min-width: 1024px)  {
.section3 {
display:flex;
flex-wrap:  nowrap;align-items:  stretch;
width: 100%;
height: 900px;
margin-bottom: 0px;
}
.s-3 {width: 23%;height: auto;}
.link-01{margin-top: 210px;}
.link-02{margin-top: 60px;}
.link-03{margin-top: 25px;}
.link-04{margin-top: 140px;}
.link-05{margin-top: 25px;}
.link-06{margin-top: 300px;}
	
.tax-free-s{top: 250px;right: 0px;}
	
	
}
@media screen and (min-width: 1280px)  {
.s-3 {width: 285px;}
}





/* section3 */


/* section4 */
.section4 {
position: relative;
width: 100%;
height: 420px;
background-color: #F4F4F4;
}

.s-4{
position: relative;
float: left;
width: 50%;
height: 420px;
}

.s-4-text{
position: absolute;
top: 20px;
width: 500px;
height: 340px;
border-left: 70px solid transparent;
border-right: 0px solid transparent;
box-sizing: border-box;
}

.s-4-img{
width: 100%;
height: 420px;
margin: 0;
padding: 0;
background: #fff;
overflow: hidden;
display: flex;
justify-content: center;
align-items:center;
background-color: #F4F4F4;
}

.s-4-img img{
display: block;
object-fit: cover;
width: 100%;
height: 420px;
}

.s-4-link{
position: absolute;
bottom: 40px;
right: 35px;
color: #DF004E;
}

@media (max-width:767px),(min-width:767px)  {
.section4 {height: 750px;}
.s-4{
width: 100%;
height: auto;
}
.s-4-img{height: 260px;}
.s-4-img img{height: 260px;}
.s-4-text{top: 10px;height: 400px;width: 100%;
border-left: 26px solid transparent;
border-right: 26px solid transparent;}
.s-4-link{bottom: 50px;right: 17px;}
}



@media screen and (min-width: 1024px)  {
.section4 {height: 420px;}
.s-4{
width: 50%;
height: 420px;

}
.s-4-img{height: 420px;}
.s-4-img img{height: 420px;}
.s-4-text{top: 20px;height: 340px;width: 500px;
border-left: 70px solid transparent;
border-right: 0px solid transparent;}
.s-4-link{bottom: 40px;right: 35px;}
}


/* section4 */

/* section5 */
.section5 {
float: left;
width: 100%;
background: #fff; 
}

.s-5-header{
float: left;
position: relative;
width: 100%;
height: 200px;
border-bottom: 1px solid #999;
}
.s-5-fotter{
float: left;
position: relative;
width: 100%;
height: 185px;

}

.s-5-title{
width: 100%;
text-align: center;	
position: absolute;
bottom: 30px;
}

.s-5-link{
position: absolute;
top: 25px;
right: 0px;
color: #DF004E;
}


.s-5-con{
float: left;
width: 100%;
border-bottom: 1px solid #999;
}
.s-5-con-t{
float: left;
width: 37%;
padding-top: 18px;
padding-bottom: 15px;
overflow-wrap: break-word;
}
.s-5-con-t .date{
width: 100%;
float: left;
}
.s-5-con-t .title{
float: left;
width: 100%;
color: #DF004E;
font-weight: 500;
}
.s-5-con-d{
float: left;
width: 63%;
padding-top: 18px;
padding-bottom: 15px;
overflow-wrap: break-word;
}

@media (max-width:767px),(min-width:767px)  {
.s-5-con-t{width: 100%;padding-bottom: 5px;}
.s-5-con-d{width: 100%;padding-top: 5px;}
}



@media screen and (min-width: 1024px)  {
.s-5-con-t{width: 37%;padding-bottom: 15px;}
.s-5-con-d{width: 63%;padding-top: 18px;}
}


/* section5 */



/* section6 */
.section6 {
float: left;
width: 100%;
}
	
.insta-p {
float: left;
width: 100%;
height: auto;
margin-bottom: 50px;
}	
.insta-header {width: 300px;;height: 40px; float: left;position: relative;left: 50px;}
.insta-header::before {
  content: '';
  position: absolute;
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  left: -50px;
  transform: translateY(-12px);
  width: 40px;
  height: 40px;
  background-image: url(../img/insta.svg);
}
}	
	
.insta-p-i {
float: left;
width: 100%;
height: auto;
background: #fff;  
border: 1px solid #DF004E;
box-sizing: border-box;
}
	
	
	
/* section6 */


/* section7 */
.section7 {
float: left;
width: 100%;
margin-bottom: 20px;
}
	
.tax-free{
float: left;
width: 120px;height: 50px;
background:url(../img/TATE.jpg) center center/ cover no-repeat;
}

/* section7 */

	
	
.irekae{
float: left;
width: 100%;
display: flex;
flex-wrap:wrap;
align-items:  stretch;
justify-content: space-between;
}
	
.irekae :nth-child(1) { order: 2; }
.irekae :nth-child(2) { order: 3; }
.irekae :nth-child(3) { order: 1; }


/* footer */


.footer-container {
position: relative;
float: left;
width: 100%;
height: 195px;
background: #DF004E;
}
	
footer{
width: 100%;
height: 195px;

}

.footer{
float: left;
color: #fff;
width: 100%;
display:flex;
flex-direction: column;
}



.footer-nav{
width: 100%;float: left;margin-top: 25px;}

.footer-text{
color: #fff;margin-left: auto;
margin-right: auto;
width: 310px;
display:flex;
justify-content: space-between;
}

.footer-text .link{display: block;white-space: nowrap;transition: all 0.2s;cursor: pointer;opacity: 1;}
.footer-text .link:hover{opacity: 0.5;}



.footer-sns{
margin-left: auto;
margin-right: auto;
width: 160px;
display:flex;
justify-content: space-between;}

.footer-sns .link{display: block;white-space: nowrap;transition: all 0.2s;cursor: pointer;opacity: 1;}
.footer-sns .link:hover{opacity: 0.5;}

.sns-line{width: 33px;height:33px;background:url(../img/line.png) center center/ cover no-repeat;}
.sns-facebook{width: 30px;height:30px;background:url(../img/facebook.png) center center/ cover no-repeat;}
.sns-twitter{width: 30px;height:30px;background:url(../img/twitter.png) center center/ cover no-repeat;}
.map-link{width: 30px;height:36px;background:url(../img/map.png) center center/ cover no-repeat;}
.contact-link{width: 179px;height:35px;background:url(../img/contact.png) center center/ cover no-repeat;}
.copyright {float: left;width: 100vw;text-align: center;}



@media (max-width:700px),(min-width:700px)  {
.footer-container{height: 255px;}
}

@media screen and (min-width: 1024px)  {
.footer-container{height: 195px;}
}



/* footer */


/* reCAPTCHA*/

.grecaptcha-badge{
visibility: hidden;
display: none;
margin-bottom: 120px;
}

.recaptcha_policy{
font-size:9px;
margin-bottom: 10px;
text-align: center;
color: #666;}

.recaptcha_policy a{
color: #C90050;}
/* reCAPTCHA*/


@media (max-width:700px),(min-width:700px)  {
.recaptcha_policy{text-align: left;margin-left: 20px;}
}

@media screen and (min-width: 1024px)  {
.recaptcha_policy{text-align: center;margin-left: 0;}
}