body {
	font-family:"Hiragino Kaku Gothic Pro", Meiryo, sans-serif;
		-webkit-font-smoothing: antialiased;
		font-size: 89.5%;
		letter-spacing: 0.03rem;
		line-height: 1.5;
		color: #333;
		-ms-text-size-adjust: 100%;
		-webkit-text-size-adjust: 100%;
		background:#FFFFFF;
        word-break: break-all;
}

img{
max-width: 100%;
}

.pd10{
padding:10px;
}

.mt10 {margin-top:10px;}
.mt20 {margin-top:20px;}
.mt30 {margin-top:30px;}
.mt40 {margin-top:40px;}
.mt50 {margin-top:50px;}
.mt60 {margin-top:60px;}
.mt70 {margin-top:70px;}
.mt80 {margin-top:80px;}
.mt90 {margin-top:90px;}
.mt100 {margin-top:100px;}
.mt110 {margin-top:110px;}
.mt120 {margin-top:120px;}
.mt130 {margin-top:130px;}
.mt140 {margin-top:140px;}
.mt150 {margin-top:150px;}
.mt160 {margin-top:160px;}
.mt170 {margin-top:170px;}
.mt180 {margin-top:180px;}
.mt190 {margin-top:190px;}
.mt200 {margin-top:200px;}

.mb10 {margin-bottom:10px;}
.mb20 {margin-bottom:20px;}
.mb30 {margin-bottom:30px;}
.mb40 {margin-bottom:40px;}
.mb50 {margin-bottom:50px;}
.mb60 {margin-bottom:60px;}
.mb70 {margin-bottom:70px;}
.mb80 {margin-bottom:80px;}
.mb90 {margin-bottom:90px;}
.mb100 {margin-bottom:100px;}
.mb110 {margin-bottom:110px;}
.mb120 {margin-bottom:120px;}
.mb130 {margin-bottom:130px;}
.mb140 {margin-bottom:140px;}
.mb150 {margin-bottom:150px;}
.mb160 {margin-bottom:160px;}
.mb170 {margin-bottom:170px;}
.mb180 {margin-bottom:180px;}
.mb190 {margin-bottom:190px;}
.mb200 {margin-bottom:200px;}

.mr10 {margin-right:10px;}
.mr20 {margin-right:20px;}
.mr30 {margin-right:30px;}
.mr40 {margin-right:40px;}
.mr50 {margin-right:50px;}
.mr60 {margin-right:60px;}
.mr70 {margin-right:70px;}
.mr80 {margin-right:80px;}
.mr90 {margin-right:90px;}
.mr100 {margin-right:100px;}
.mr110 {margin-right:110px;}
.mr120 {margin-right:120px;}
.mr130 {margin-right:130px;}
.mr140 {margin-right:140px;}
.mr150 {margin-right:150px;}
.mr160 {margin-right:160px;}
.mr170 {margin-right:170px;}
.mr180 {margin-right:180px;}
.mr190 {margin-right:190px;}
.mr200 {margin-right:200px;}

.ml10 {margin-left:10px;}
.ml20 {margin-left:20px;}
.ml30 {margin-left:30px;}
.ml40 {margin-left:40px;}
.ml50 {margin-left:50px;}
.ml60 {margin-left:60px;}
.ml70 {margin-left:70px;}
.ml80 {margin-left:80px;}
.ml90 {margin-left:90px;}
.ml100 {margin-left:100px;}
.ml110 {margin-left:110px;}
.ml120 {margin-left:120px;}
.ml130 {margin-left:130px;}
.ml140 {margin-left:140px;}
.ml150 {margin-left:150px;}
.ml160 {margin-left:160px;}
.ml170 {margin-left:170px;}
.ml180 {margin-left:180px;}
.ml190 {margin-left:190px;}
.ml200 {margin-left:200px;}

img.w10{
width:10%;
}
img.w20{
width:20%;
}
img.w30{
width:30%;
}
img.w40{
width:40%;
}
img.w50{
width:50%;
}
img.w60{
width:60%;
}
img.w70{
width:70%;
}
img.w80{
width:80%;
}
img.w90{
width:90%;
}
img.w100{
width:100%;
}

.absolute {
position: absolute;
z-index: 100;
}

.relative {
position: relative;
}



#wrap{
    position: relative;
    width: 100%;
    max-width: 22.5vw;
    margin: 0 28.125vw 0 auto;
    background-color: #FFFFFF;
}

.contentsSection:before{
  content:"";
  position: absolute;
  left: 0;
  top:0;
  height: 100%;
  width: 10px;
  background-color: #247684;
  z-index: 2;
  mix-blend-mode: overlay; 
}

.contentsSection:after{
  content:"";
  position: absolute;
  right: 0;
  top:0;
  height: 100%;
  width: 10px;
  background-color: #247684;
  z-index: 2;
  mix-blend-mode: overlay; 
}

.contentsSection{
box-sizing:border-box;
position: relative;
width:100%;
text-align: center;
}

#mainimage img.cvimg{
  left: 0%;
  top: 51%;
}

#mainimage img.main_campaign{
  left: 0;
  bottom:0.5%;
}



#mainunder img.mainunder_01{
  left: 0;
  top:5.5%;
}
#mainunder img.mainunder_02{
  left: 9%;
  top: 59.8%;
}
#mainunder img.mainunder_03{
  left: 0%;
  bottom:-1%;
}

#warr{
}

#warr img.warr_01{
  left: 5%;
  top:6%;
}
#warr img.warr_02{
  left: 0%;
  top: 22%;
}
#warr img.warr_03{
  left: 0%;
  bottom: 0.5%;
}


#warr #baANchor{
  position: absolute;
  width: 100%;
  top:39%;
}


#warr video{
width: 100%;
}

#warr img.warr_after{
margin-top: -23%;
}

#point{
  background-image: url('../img/point_bg.png?');
  background-repeat: repeat-y;
  background-size: 101% auto;
  padding: 5% 0 10%;
}

#point img.point_02{
  margin-top: 5%;
}
#point img.point_03{
  margin-top: -5%;
}

#point .videoBox{
  right: 0;
  top: 20.9%;
  width: 93%;
}

#point .videoBox .relative{
  width: 100%;
  padding-bottom: 50%;
}

#point video{
width: 100%;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
}
#campaign{
  background-color: #000000;
}

#campaign img.campaign{
  margin-top: -10%;
}

#campaign video{
  width: 100%;
  vertical-align: middle;
}

#campaign img.campaign_02{
}



#flow .videoBox{
  right: 0;
  width: 100%;
  background-color: #FFFFFF;
}

#flow .videoBox.video01{
  top: 17.3%;
}
#flow .videoBox.video02{
  top: 35.7%;
}
#flow .videoBox.video03{
  top: 53.1%;
}
#flow .videoBox.video04{
  top: 70.9%;
}

#flow .videoBox .relative{
  width: 100%;
  padding-bottom: 55%;
}

#flow video{
width: 100%;
left: 50%;
top:50%;
transform: translate(-50%,-50%);
-webkit-transform: translate(-50%,-50%);
}

#declaration #declarationANchor{
  position: absolute;
  width: 100%;
  top:19%;
}

#faq{
  background-image: url('../img/faq_bg.png?');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center top;
  padding: 15% 0 10%;
}

#faq .faqBlock{
background-color: #FFFFFF;
width: 86%;
margin: 5% auto;
padding: 10% 0;
}

#faq .faqBlock img.faq_01{
  margin-bottom: 5%;
}

#faq a.accOpen.open{
  display: none;
}


#access{
}


/*----------------------------
店舗一覧
----------------------------*/
@font-face {
  font-family: 'Yu Gothic bold';
  src: url("../fonts/YuGothic-B.woff") format("woff");
}
@font-face {
  font-family: 'Yu Gothic medium';
  src: url("../fonts/YuGothic-M.woff") format("woff");
}
#access {
  background-image: url('../img/access_bg.png?');
  background-repeat: repeat-y;
  background-size: 101% auto;
  padding: 10% 0 10%;
  margin: 0 auto;
}
#access img.access_ttl{
    margin-bottom: 5%;
}

#access .ttl .en {
  letter-spacing: 0.1rem;
}
.shopTitle img {
  width: 250px;
}
.area_open, .kantou_open, .shop_open {
	display: none;
}
.shop_list {
	font-size: 24px;
	width: 90%;
	margin: 0 auto;
}
button {
	font-size: 24px;
	padding: 5px;
	font-family: "Yu Gothic medium";
}
.area_btn {
	width: 100%;
	position: relative;
	background: linear-gradient(#01072f, #006b88);
	color: #fff;
	margin: 0 auto 10px;
	color: #fff;
}
.area_btn::before, .area_btn::after {
	width: 15px;
    height: 3px;
    background: #ccc;
    position: absolute;
    content: "";
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
}
.area_btn::after {
	transform: translateY(-50%)rotate(-90deg);
    transition: 0.5s;
}
.area_btn.active::after {
	transform: translateY(-50%);
    transition: 0.5s;
}
.kantou_btn {
	display: block;
	width: 95%;
	background-color: #01072f;
	color: #fff;
	margin: 0 auto 10px;
	border: 0;
}
.shop_btn {
	display: block;
	width: 95%;
	margin: 0 auto 10px;
	background-color: #006b88;
	border: #555 1px solid;
	color: #fff;
}
.shop_contents {
	width: 90%;
	margin: 0 auto;
}
.store {
  align-items: center;
  width: 90%;
  margin: 0 auto;
}
.store p {
  color: #000;
}
.store, .storeInfo_A, .storeInfo_B {
  align-items: baseline;
  display: flex;
  flex-wrap: wrap;
}
.mensOnly {
  background-color: #ff6e80;
  color: #000;
  margin: 0 10px;
  padding: 1px 2px;
}
.storeName {
  font-size: 18pt;
  /* font-family: "Yu Gothic bold"; */
  font-weight: bold;
  text-align: left;
  padding-top: 10px;
}
.storeName, .address {
  margin: 0 auto;
}
.storeName, .address, .storeInfo_A, .storeInfo_B, .infoWrap {
  width: 90%;
}
.tel {
  font-size: 15pt;
  width: calc(100% - 80px);
  text-align: left;
  font-family: 'Roboto', sans-serif;
}
.tel a {
  color: #0e0e10;
}
_::-webkit-full-page-media, _:future, :root .tel.en a {
  color: #0e0e10;
}
.infoWrap {
  background-color: #fafafa;
  margin: 15px auto;
  padding: 10px 10px 10px 0;
}
.storeInfo_A {
  font-size: 12pt;
  margin-bottom: 10px;
}
.storeInfo_B {
  font-size: 12pt;
}
.storeInfo_A, .storeInfo_B {
  margin: auto;
}
.addressFront, .timeFront {
  justify-content: center;
  background-color: #000000;
  color: #fff;
  width: 50px;
  padding: 0 10px;
  margin: 0 10px 0 0;
}
.addressFront {
  display: flex;
  align-items: baseline;
  margin: 0 10px 0 0;
  font-family: 'Roboto', sans-serif;
}
.address, .time {
  text-align: left;
  font-size: 20px;
}

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


#roland{
  background-color: #1b304d;
  padding: 10% 0 20%;
}
#roland img.toTop{
  right: 5%;
  bottom:2%;
}


#fixbtn{
  position:fixed;
  left: 50%;
  bottom:0;
  transform: translate(-50%,0);
  -webkit-transform: translate(-50%,0);
  z-index: 900;
      width: 100%;
      max-width: 600px;
  }

  #fixbtn.contentsSection:before,
  #fixbtn.contentsSection:after{
    content:none;
  }


  /*PC BG*/

  .backgrounds{
    position: fixed;
    left: 0;
    top:0;
    width: 100%;
    height: 100%;
  }
.backgrounds .scrollWrap {
    overflow: hidden;
    width: 100vw;
    height: 100vh; 
    position: relative;
}

.backgrounds .scrollContent {
    display: flex;
    width: 936vh; /* Double the width to accommodate two images */
    animation: scrollAnimation 150s linear infinite;
}

.backgrounds .scrollItem {
    flex: 1;
    height: 100vh;
    position: relative;
    padding-right: 468vh;
    overflow: hidden;
  }
  .backgrounds .scrollItem img {
  position: absolute;
  left: 0;
  top:0;
  height: 100%;
}

.backgrounds .headLogo{
    position: absolute;
    width: 100%;
    height: 5.875vw;
    background-color: rgba(255,255,255,0.2);
    left: 0;
    top:0;
  }

  .backgrounds .headLogo .relative{
    height: 5.875vw;
  }
  .backgrounds .headLogo img.logo_head{
    width: 13.125vw;
    position: absolute;
    right: 7.5vw;
    top:0;
  }

  .backgrounds .menuRight{
    position: absolute;
    right: 3.5vw;
    top:30%;
    width: 20.625vw;
  }
  .backgrounds .menuRight img{
    width: 20.625vw;
  }

  .backgrounds .menuLeft img.lumix_logo{
    width: 15.625vh;
    position: absolute;
    right: 0;
    bottom: 28vh;
    display: inline-block;
    animation: rotate-z 5s linear infinite;
    }
    @keyframes rotate-z {
      from { transform: rotateZ(0deg); }
      to { transform: rotateZ(360deg); }
    }


    .backgrounds .menuLeft{
      position: absolute;
      left: 0;
      bottom:0;
      height: 86vh;
    }
    .backgrounds .menuLeft .relative{
      height: 86vh;
      z-index: 2;
    }
    .backgrounds .menuLeft .relative img.menuLeft_bg{
      max-height: 100%;
    }

    .backgrounds .menuLeft a{
      position: absolute;
      left: 7.52%;
      width: 34.8%;
    }
    .backgrounds .menuLeft a:hover .relative:after{
      content:"'";
      z-index: 1;
      position: absolute;
      left: 0;
      top:0;
      background-image: url('../img/leftMenu_hover.png');
      background-size: 100% auto;
      background-position: center center;
      width: 100%;
      height: 100%;
    }

    .backgrounds .menuLeft a .relative{
      height: auto;
    }
    .backgrounds .menuLeft a:nth-of-type(1){
      top: 15.3%;
    }
    .backgrounds .menuLeft a:nth-of-type(2){
      top: 22.9%;
    }

    .backgrounds .menuLeft a:nth-of-type(3){
      top: 30.5%;
    }

    .backgrounds .menuLeft a:nth-of-type(4){
      top: 38.1%;
    }

    .backgrounds .menuLeft a:nth-of-type(5){
      bottom: 46.7%;
    }

    .backgrounds .menuLeft a:nth-of-type(6){
      bottom: 39%;
    }





@keyframes scrollAnimation {
  from {
      transform: translateX(0%);
  }
  to {
      transform: translateX(-50%);
  }
}



@media screen and (min-width:768px) {
  #wrap{
    box-shadow: 0px 0px 41px 0px #67a9b5;
  }
  #fixbtn{
    visibility: hidden;
    opacity: 0;
  }
}

@media screen and (max-width:767px) {
    .backgrounds{
        display: none;
    }
    #wrap{
        max-width: 100%;
        margin-left: auto;
        border-left:none ;
        border-right:none ;
        overflow: hidden;
    }
  }