@charset "utf-8";
/***********************
2018.07.20 kari
location page layout
************************/
@import url('https://fonts.googleapis.com/css?family=Noto+Sans+JP&display=swap');

#body { background: #FFF;}
.page-up { background: #FFF;}
#left-bnr {display: none;}
article { float: none;}
article * { font-family: 'Open Sans', 'Noto Sans TC', sans-serif; color: #111;}
article:before, article:after { content: " "; display: table;}
article:after { clear: both;}
article { *zoom: 1;}
.drawer-overlay {z-index: 9!important}

.sp { display: none;}
@media screen and (max-width: 640px) {
 .pc { display: none;}
 .sp { display: block;}
}

h3.line-title {
 margin-bottom: 30px;
 padding-bottom: 18px;
 letter-spacing: 0.12em;
 line-height: 1;
 color: #1d1d1d;
 text-align: center;
 font-size: 20px;
 font-family: 'Catamaran', sans-serif;
 font-weight: 800;
 position: relative;
}

h4.line-title {
 margin-bottom:30px;
 text-align: center;
 letter-spacing: 0.2em;
 line-height: 1.5;
 font-size: 14px;
 font-weight: 400;
}

h3.line-title::before {
 width: 30px;
 height: 2px;
 margin: 0 auto 0 -15px;
 content:"";
 display: block;
 background: #1d1d1d;
 position: absolute;
 left: 50%;
 bottom: 0;
}

.fade-in {
 transition: all 1.2s;
  -o-transition: all 1.2s; /* opera */
  -moz-transition: all 1.2s; /* firefox */
  -webkit-transition: all 1.2s; /* chrome, safari */
  -ms-transition: all 1.2s; /* ie */
 opacity: 0;
}
.in {
 opacity: 1.0;
}
.fade-up {
 transition: all 1.2s;
  -o-transition: all 1.2s; /* opera */
  -moz-transition: all 1.2s; /* firefox */
  -webkit-transition: all 1.2s; /* chrome, safari */
  -ms-transition: all 1.2s; /* ie */
 opacity: 0;
 transform: translate(0,60px);
 -webkit-transform: translate(0,60px);
}
.up {
 opacity: 1.0;
 transform: translate(0,0);
 -webkit-transform: translate(0,0);
}

@media screen and (max-width: 640px) {
 .pc { display: none;}
 .sp { display: block;}
 /*.drawer-hamburger-icon, .drawer-hamburger-icon::before, .drawer-hamburger-icon::after { background: #FFF !important;}*/
 .drawer-open .drawer-hamburger-icon { background-color: transparent !important;}

 h3.line-title {
  margin-bottom: 15px;
  padding-bottom: 15px;
  font-size: 18px;
  line-height: 1.2;
 }
 h4.line-title {
  margin-bottom: 15px;
  padding-bottom: 15px;
  font-size: 10px;
 }
}
@media screen and (max-width: 920px){
#header.fixed {z-index: 10}
}
/*======================
 main-visual
=======================*/
#header {
 background: transparent;
 position: absolute;
 top: 0;
 left: 0;
}

#header.fixed #gnav { display: block;}
#right_bnr { display: none;}
#header.fixed + *::before { content: none;}
picture {
 display: block;
 line-height: 0;
}

.basic-btn {
 margin-top: 40px;
 max-width: 200px;
 line-height: 44px;
 color: #FFF;
 background: #2d2d2d;
 -webkit-border-radius: 22px;
         border-radius: 22px;
 position: relative;
 -webkit-transition: all 0.4s ease;
    -moz-transition: all 0.4s ease;
     -ms-transition: all 0.4s ease;
      -o-transition: all 0.4s ease;
         transition: all 0.4s ease;
}
#spring .basic-btn { background: #ff5973;}
#summer .basic-btn { background: #417ccc;}
#autumn .basic-btn { background: #f13827;}
#winter .basic-btn { background: #45abc1;}
a:hover .basic-btn { background: #000 !important;}
.basic-btn span {
 padding-left: 20px;
 letter-spacing: 0;
 line-height: 1;
 font-size: 15px;
 font-family: neue-haas-unica, sans-serif;
 font-weight: 600;
 font-feature-settings : "palt";
}
.basic-btn i {
 font-size: 20px;
 position: absolute;
 top: 50%;
 right: 15px;
 -webkit-transform: translateY(-50%);
 -ms-transform: translateY(-50%);
 transform: translateY(-50%);
}

@media screen and (max-width: 1200px) {
 .basic-btn {
  margin-top: 35px;
  max-width: 180px;
  line-height: 40px;
  -webkit-border-radius: 20px;
          border-radius: 20px;
 }
 .basic-btn span {
  padding-left: 15px;
  font-size: 16px;
 }
 .basic-btn i {
  font-size: 16px;
  right: 12px;
 }
}
@media screen and (min-width: 921px) and (max-width: 1200px) {
 #header #gnav { display: block;}
}
@media screen and (max-width: 920px) {
 #header.fixed #gnav { display: none;}
}
@media screen and (max-width: 768px) {
 .basic-btn {
  margin-top: 25px;
  max-width: 160px;
  line-height: 36px;
  -webkit-border-radius: 18px;
          border-radius: 18px;
 }
 .basic-btn span {
  padding-left: 15px;
  font-size: 14px;
 }
 .basic-btn i {
  font-size: 12px;
  right: 10px;
 }
}

/*--------------------------------------------------------------------------
 hero
---------------------------------------------------------------------------*/
#hero {
 width: 100%;
 height: 100vh;
 min-height: 767px;
 display: flex;
 position: relative;
}
#hero .slide-wrap {
 -webkit-flex: 0 1 50%;
     -ms-flex: 0 1 50%;
         flex: 0 1 50%;
 max-width: 50%;
 height: 100vh;
 min-height: 767px;
 text-align: center;
 position: relative;
}
#hero .slide-wrap .slideshow {
 width: 100%;
 height: 100vh;
 min-height: 767px;
 position: relative; /* can either be relative, absolute or fixed. If position is not set (i.e. static), it would be set to "relative" by script */
 overflow: hidden; /* to bound the empty top space created by inner element's top margin */
 left: 0;
}
#hero .slide-wrap .slideshow .vegas-slide-inner {
 background-color: rgba(0,0,0,.08) !important;
 background-blend-mode: multiply;
/* animation: zoom 7s 0s ease;*/
}
@keyframes zoom {
 0% {
  transform: scale(1.03,1.03);
  -webkit-transform: scale(1.03,1.03);
 }
 100% {
  transform: scale(1,1);
  -webkit-transform: scale(1,1);
 }
}
#hero .slide-wrap .copy {
 width: 86.6666%;
 margin: 0 auto;
 position: absolute;
 left: 50%;
 bottom: 6.666%;
 z-index: 10;
 -webkit-transform: translateX(-50%);
 -ms-transform: translateX(-50%);
 transform: translateX(-50%);
}
#hero .txt-wrap {
 padding: 0;
 max-width: 50%;
 -webkit-flex: 0 1 50%;
     -ms-flex: 0 1 50%;
         flex: 0 1 50%;
 text-align: center;
 position: relative;
 -webkit-align-self: center;
         align-self: center;
  z-index: 100;
}
#hero .txt-wrap.sp {
  display: none;
}
#hero .txt-wrap h2 img{
  width: 100%;
  max-width: 1000px;
  height: auto;
}
#hero .txt-wrap h2{
  width: 60%;
  margin: 0 auto;
  max-width: 570px;
  padding-top: 3em;
}
#hero .txt-wrap .textarea{
  width: 90%;
  margin: 0 auto;
  padding-top: 33px;
}
#hero .txt-wrap .textarea img {
  width: 35%;
  max-width: 195px;
  margin: 0 auto;
}
#hero .txt-wrap .offs{
  padding-top: 50px;
}
#hero .txt-wrap .offs img {
  width: 90%;
  margin: 0 auto;
  max-width: 760px;
}
#hero .txt-wrap .offs span{
  display: block;
  padding-top: 15px;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px; 
  letter-spacing: 0.07em;
}

#hero .txt-wrap p {
  font-family: 'Noto Sans JP', sans-serif;
  padding-top: 20px;
  font-size: 13px;
  letter-spacing: 0.07em;
}
.vegas-slide-inner p{
  color: #fff;
  position: absolute;
  bottom: 3%;
  right: 3%;
  font-weight: 400;
  letter-spacing: 0.1em;
}

@media screen and (max-width: 1200px) {
 }
@media screen and (max-width: 767px) {
#hero .txt-wrap .offs{
  padding-top: 20px;
}
#hero .txt-wrap .offs span{
  display: block;
  padding-top: 5px;
  font-size: 11px; 
}
#hero .txt-wrap.pc {
  display: none;
}
#hero .txt-wrap.sp {
  display: block;
}
 #hero {
  width: 100%;
  height: auto;
  min-height: initial;
  display: block;
 }
 #hero .slide-wrap {
  width: 100%;
  max-width: initial;
  height: auto;
  min-height: initial;
 }
 #hero .slide-wrap .slideshow {
  width: 100%;
  height: 0;
  min-height: initial;
  padding-top: 75%;
 }
 #hero .slide-wrap .slideshow.sp { display: block;}
 #hero .slide-wrap .copy { bottom: 6%;}
 #hero .txt-wrap {
  width: 100%;
  max-width: initial;
  padding: 30px 0 0;
 }
 #hero .txt-wrap p img {
  width: 90%;
}
 }




/*======================
 service
=======================*/
#service {
  padding: 150px 0 0;
  width: 100%;
  background: #fff;
}
#service p {
  text-align: center;
  line-height: 1.8;
  font-family: 'Noto Sans JP', sans-serif;
  font-size: 13px; 
  letter-spacing: 0.07em;
}
#service .inner{
  width: 100%;
  margin: 0 auto;
  max-width: 1200px;
}
#service .service ul {
  width: 100%;
  margin:0 auto;
}
#service .service li {
  margin: 50px 0;
}
#service .service li .image{
  float: left;
  width: 60%;
}
#service .service li .txt {
  float: right;
  width: 40%;
  padding:5% 3%;
}
#service .service li .right{
  float: right;
}
#service .service li .left {
  float: left;
}
#service .service li .txt h3{
  width: 80%;
  margin:0 auto;
  padding: 15% 0 8%;
}
#service .service li .txt p{
  text-align: left;
  letter-spacing: 0.07em;
  line-height: 1.8;
}
@media screen and (max-width: 640px) {
#service {
  padding: 60px 0 0;
}
#service p {
  text-align: left;
  font-size: 12px; 
  letter-spacing: 0.07em;
}
p.sub{
  padding: 0 5%;
  text-align: left!important;
  font-size: 12px!important;
}
#service .service ul {
  width: 90%;
}
#service .service li {
  margin: 0;
  padding-top: 30px;
}
#service .service li .image{
  width: 100%;
  float: none;
}
#service .service li .txt {
  width: 100%;
  float: none;
}
#service .service li .right{
  float: none;
}
#service .service li .left {
  float: none;
}
#service .service li .txt h3{
  width: 55%;
  margin:0 auto;
  padding: 2% 0;
}
}

/*======================
 Japan shops
=======================*/
#japan {
 padding: 100px 0;
 background: #fff;
}
#japan p {
  font-family: 'Noto Sans JP', sans-serif;
  text-align: center;
  margin-bottom: 60px;
  font-size: 13px;
}
#japan .shops {
  max-width: 50%;
  height: auto;
  margin:0 auto;
}

@media screen and (max-width: 640px) {
#japan {
 padding: 60px 0 40px;
}
#japan .shops {
  max-width: 100%;
}
}

/*======================
 Offer
=======================*/
#offer {
 padding: 100px 0;
 background: #fff;
}
#offer p {
  text-align: center;
  margin-bottom: 60px;
}

#offer .offer ul {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  margin:0 auto;
}
#offer .offer li {
  margin: 0;
  margin-bottom: 100px;
}
#offer .offer li .image{
  float: left;
  width: 70%;
}
#offer .offer li .txt {
  float: right;
  width: 30%;
}
#offer .offer li .right{
  float: right;
}
#offer .offer li .left {
  float: left;
}
#offer .offer li .txt h3{
  width: 100%;
  margin:0 auto;
  margin-left: 15%;
  padding-top: 20%;
}
#offer .offer li .txt.right h3 {
   margin-left: -15%;
  padding-top: 20%; 
}
#offer .offer li .txt p{
  text-align: left;
  letter-spacing: 0.07em;
  line-height: 1.666;
}
@media screen and (max-width: 640px) {
#offer {
  padding: 40px 0 0;
}
#offer p {
  margin-bottom: 30px;
}

#offer .offer ul {
  width: 100%;
}
#offer .offer li {
  margin: 0;
  padding-bottom: 0;
  position: relative;
  margin-bottom: 60%;
}

#offer .offer li .image{
  width: 100%;
  float: none;
}
#offer .offer li .txt {
  width: 100%;
  float: none;
}
#offer .offer li .txt h3{
  margin-left: 0; 
}
#offer .offer li .right{
  float: none;
}
#offer .offer li .left {
  float: none;
}
#offer .offer li .txt h3{
  padding-top: 0; 
  width: 80%;
  position: absolute;
  bottom: -65%;
  left: 0;
  margin-left: 10%;
}
#offer .offer li .txt.right h3 {
  margin-left: 10%;
}
}



#offer .movie {
  position: relative;
}
#offer h2 {
  width: 26%;
  max-width: 146px;
  margin: 0 auto;
  padding-top: 0;
  padding-bottom: 50px;
}
#offer h2 img {
  width: 100%;
}
#offer .js-modal-btn{
  width: 100%;
  max-width: 960px;
  margin: 0 auto;
  position: relative;
  background: #000;
}


#offer figure span img {
  opacity: 0.7;
}
#offer .play {
position: absolute;
top: 50%;
left: 50%;
transform: translateY(-50%) translateX(-50%);
-webkit- transform: translateY(-50%) translateX(-50%);
}
#offer .play img {
  width: 60px;
}
#offer .movie p {
  width: 100%;
  max-width: 900px;
  position: absolute;
    top: 105%;
    left: 50%;
    transform: translateY(-50%) translateX(-50%);
    -webkit- transform: translateY(-50%) translateX(-50%);
  z-index: 2;
}

@media screen and (max-width: 640px) {
#offer .movie {
  width: 90%;
  margin:0 auto 90px;
}
#offer h2 {
  padding-bottom: 30px;
}
#offer .movie::before {
    height: 105px;
}
#offer .movie p {
  padding-top: 10px;
  width: 95%;
  margin:0 auto;
}
}
/*======================
 information
=======================*/
#information {
 max-width: 1200px;
 margin: 0 auto;
 padding: 60px 0;
 border-top: 1px solid #999;
}
#information .line-title + p img { max-width: 328px;}
#information .box {}
#information .box .map {
 width: 48.333333%;
 float: right;
}
#information .box .gmap {
 position: relative;
 padding-bottom: 60.344%;
}
.gmap iframe,
.gmap object,
.gmap embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
#information .box .txt {
 width: 44.333333%;
 padding-top: 5%;
 float: left;
}
#information .box .txt h2{
  font-size: 20px;
  margin-bottom: 30px;
}
#information .box .txt dl { width: 100%;position: relative;}
#information .box .txt dl dt{
    position: absolute;
    left: 0;
    width: 5em;
}
#information .box .txt dl dd{
    padding-left: 5em;
    border-bottom: solid 1px #dfdfdf;
}
#information .box .txt dl dt,
#information .box .txt dl dd {
 margin-bottom: 7px;
 padding-bottom: 7px;
 font-size: 16px;
 letter-spacing: 0.07em;
}
#information .box .txt dl .last-child {
 margin-bottom: 0;
 padding-bottom: 0;
 border: none;
}



@media screen and (max-width: 640px) {
 #information { padding: 30px 0;}
 #information {
  width: 90%;
  margin: 0 5%;
 }
 #information .box {}
 #information .box .map {
  width: 100%;
  float: none;
 }
 #information .box .gmap {
  margin-bottom: 10px;
  padding-bottom: 60%;
 }
 #information .box .txt {
  width: 100%;
  padding-top: 0;
  float: none;
 }
 #information .box .txt h2{
   font-size: 14px;
   margin-bottom: 20px;
   text-align: center;
   padding-left: 0;
 }
 #information .box .txt dl { width: 100%;padding-top: 10px}
 #information .box .txt dl dt,
 #information .box .txt dl dd {
  margin-bottom: 5px;
  padding-bottom: 5px;
  font-size: 14px;
 }
}

@media screen and (max-width: 420px) {
 #information .box .txt dl dt,
 #information .box .txt dl dd {
  font-size: 12px;
 }
}

/*============================
 contact
============================*/
.contact {
 width: 100%;
 margin: 20px auto 0;
 padding: 80px 0;
}
.border {
 margin-bottom: 20px;
 background: #f4f4f4;
}
.contact h3 + p {
 margin-bottom: 40px;
 text-align: center;
 line-height: 1.8;
 font-size: 17px;
}
.contact ul {
 max-width: 820px;
 margin: 0 auto;
}
.contact ul li {
 width: 48.5%;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}
.contact ul li a {
 text-align: center;
 display: block;
 line-height: 100px;
 position: relative;
 background: #FFF;
 border: 1px solid #111111;
 -moz-box-shadow:5px 5px 0px 0px #111111;
 -webkit-box-shadow:5px 5px 0px 0px #111111;
 box-shadow:5px 5px 0px 0px #111111;
}
.contact ul li a.sp { display: none;}
.contact ul li a .icon {
 width: 60px;
 margin-top: -30px;
 position: absolute;
 left: 12px;
 top: 50%;
}
.contact ul li a .txt {
 letter-spacing: 0.04em;
 font-family: 'Catamaran', sans-serif;
 font-size: 16px;
 font-weight: 500;
}
.contact ul li a:hover { background: #ff3d00;}
.contact ul li a:hover .txt { color: #FFF;}
.contact ul li.mail { float: left;}
.contact ul li.fb { float: right;}
.contact ul + p {
 margin-top: 40px;
 text-align: center;
}

.contact ul + p,
.contact ul + p a {
 font-family: 'Catamaran', sans-serif;
 font-size: 16px;
 font-weight: 500;
 color: #111;
}

@media screen and (min-width:641px) {
 .contact ul + p a {
  pointer-events:none;
  cursor:default;
 }
}

@media screen and (max-width:640px) {
 .contact {
  margin: 10px auto 0;
  padding: 40px 0;
 }
 .contact h3 + p {
  margin-bottom: 20px;
  text-align: center;
  font-size: 15px;
 }
 .contact ul {
  width: 90%;
  margin: 0 auto;
 }
 .contact ul li {
  width: 100%;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
 }
 .contact ul li a {
  text-align: center;
  display: block;
  line-height: 60px;
  position: relative;
  background: #FFF;
  border: 1px solid #111111;
  -moz-box-shadow:5px 5px 0px 0px #111111;
  -webkit-box-shadow:5px 5px 0px 0px #111111;
  box-shadow:5px 5px 0px 0px #111111;
 }
 .contact ul li a.pc { display: none;}
 .contact ul li a.sp { display: block;}
 .contact ul li a .icon {
  width: 40px;
  margin-top: -20px;
  left: 10px;
 }
 .contact ul li a .txt { font-size: 14px;}
 .contact ul li.mail {
  margin-bottom: 15px;
  float: none;
 }
 .contact ul li.fb { float: none;}
 .contact ul + p {
  margin-top: 20px;
  text-align: center;
 }

 .contact ul + p,
 .contact ul + p a { font-size: 14px;}
 footer { padding-bottom: 0 !important;}
}

@media screen and (max-width:420px) {
 .contact h3 + p { font-size: 13px;}
 .contact ul li a .txt { font-size: 12px;}
 .contact ul + p,
 .contact ul + p a { font-size: 12px;}
}



/*ボタン*/
.gallery_b {
  padding-top:30px;
  text-align:center;
}
.gallery_b a{
  color:#333;
  font-weight:400;
}
.button {
  display: inline-block;
  width: 200px;
  height: 54px;
  text-align: center;
  text-decoration: none;
  line-height: 54px;
  outline: none;
  position: relative;
  z-index: 2;
  background-color: #fff;
  border: 1px solid #333;
  color: #333;
  line-height: 50px;
  overflow: hidden;
}
.button:hover{
   opacity: .6;
}

.button::before,
.button::after {
  position: absolute;
  z-index: -1;
  display: block;
  content: '';
}
.button,
.button::before,
.button::after {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  -webkit-transition: all .3s;
  transition: all .3s;
}

.yajirushi::before{
  right: 20px;
  top: 20px;
  width: 10px;
  height: 10px;
  border-top: 1px solid #333;
  border-right: 1px solid #333;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
}