@charset "utf-8";
/***********************
2015.02.18 shuji higashimae
location page layout
************************/


#body {
padding-top: 0;
 background: #FFF;
}
.page-up { background: #FFF;}
#right_bnr { display: none !important;}

#header { display: none;}
.fade-left {
 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(-40px,0);
 -webkit-transform: translate(-40px,0);
}
.left {
 opacity: 1.0;
 transform: translate(0,0);
 -webkit-transform: translate(0,0);
}
.fade-right {
 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(40px,0);
 -webkit-transform: translate(40px,0);
}
.right {
 opacity: 1.0;
 transform: translate(0,0);
 -webkit-transform: translate(0,0);
}

.sp { display: none;}
@media screen and (max-width: 640px) {
 #header {
  display: block;
  background: none;
 }
 #header #logo { display: none;}
 .pc,.sp-none { display: none;}
 .sp { display: block;}
 .fade-left,
 .fade-right {
  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,40px);
  -webkit-transform: translate(0,40px);
 }
 .left,
 .right {
  opacity: 1.0;
  transform: translate(0,0);
  -webkit-transform: translate(0,0);
 }
}

.line-title {
margin-bottom: 40px;
 padding-bottom: 18px;
 letter-spacing: 0.12em;
 line-height: 1;
 color: #192E3C;
 text-align: center;
 font-size: 20px;
 font-family: 'Catamaran', sans-serif;
 font-weight: 800;
 position: relative;
}
.line-title::before {
 width: 30px;
 height: 2px;
 margin: 0 auto 0 -15px;
 content:"";
 display: block;
 background: #192E3C;
 position: absolute;
 left: 50%;
 bottom: 0;
}
.line-title + p {
 text-align: center;
 line-height: 1;
 color: #192E3C;
 font-size: 14px;
 letter-spacing: 0.08em;
}

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

 .line-title {
  margin-bottom: 30px;
  font-size: 18px;
 }
 .line-title::before {
 }
 .line-title + p { font-size: 10px;}
}

/*======================
 main-visual
=======================*/
#main-visual {
 padding: 60px 60px 0;
 position: relative;
}
#main-visual h1 {
 width: 170px;
 position: absolute;
 left: 60px;
 top: 20px;
}
#main-visual h1 img {
 width: 100%;
 height: auto;
}
#main-visual #slideshow {
 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 */
 width: 100%;
 padding-top: 90vh;
}
#main-visual #slideshow_sp { display: none;}

#main-visual p {
 line-height: 1;
 text-align: right;
 color: #192E3C;
 font-size: 12px;
 font-weight: 600;
 position: absolute;
 bottom: -22px;
 right: 60px;
}

@media screen and (max-width: 640px) {
 #main-visual { padding: 0; }
 #main-visual #slideshow { display: none;}
 #main-visual #slideshow_sp {
  display: block;
  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 */
  width: 100%;
  padding-top: 120%;
 }
 #main-visual p { display: none;}
}

/*======================
 lead
=======================*/
#lead {
 width: 90%;
 max-width: 800px;
 margin: 0 auto;
 padding: 0 0 80px;
}
#lead * {
 color: #192E3C;
}
#lead .main-tit {
 width: 50%;
 max-width: 266px;
 margin: -133px auto 35px;
 position: relative;
 z-index: 10;
}
#lead .main-tit img {
 width: 100%;
 height: auto;
 line-height: 0;
}
#lead h2 {
 margin-bottom: 30px;
 letter-spacing: 0.04em;
 line-height: 1.33;
 font-size: 28px;
 font-weight: 600;
}
#lead p {
 letter-spacing: 0.08em;
 line-height: 1.85;
 font-size: 14px;
 font-weight: 300;
}
#lead p strong {
 font-weight: 300;
}
#lead h2 span,
#lead p span {
 font-size: inherit;
 font-weight: inherit;
}

@media screen and (max-width: 640px) {
 #lead { padding: 0 0 40px;}
 #lead .main-tit { margin: -24% auto 25px;}
 #lead h2 {
  margin-bottom: 20px;
  font-size: 20px;
 }
 #lead p {
  text-align: left;
  line-height: 1.6;
  font-size: 12px;
 }
 #lead p br { display: none;}
}

@media screen and (max-width: 420px) {
 #lead {}
 #lead .main-tit { margin: -25% auto 20px;}
}

/*======================
 plan
=======================*/
#plan {
 padding: 80px 0;
 background: #FAF7F2;
}
#plan .line-title { margin-bottom: 15px;}
#plan .line-title +p {}
#plan .line-title +p img {
 width: 100%;
 height: auto;
}
#plan .inner {
 width: 100%;
 margin: 0 auto;
 max-width: 1200px;
}
#plan .inner ul {
 font-size: 0;
 letter-spacing: -5px;
}
#plan .inner ul li {
 width: 15.8333333%;
 padding: 20px 1%;
 margin: 0 auto 1% 1%;
 display: inline-block; *display: inline; *zoom: 1;
 vertical-align: top;
 text-align: center;
 background: #FFF;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}
#plan .inner ul li:nth-of-type(6n+1) { margin-left: 0;}
#plan .inner ul li figure img {
 width: 100%;
 max-width: 100px;
 height: auto;
}
#plan .inner ul li p {
 min-height: 48px;
 margin-top: 15px;
 line-height: 1.5;
 letter-spacing: 0.04em;
 color: #192E3C;
 font-size: 12px;
 font-weight: 400;
}
#plan .inner ul li p small {
 display: block;
 letter-spacing: 0.04em;
  color: #192E3C;
 font-size: 10px;
 font-weight: 300;
}
/* #plan .inner .price {
 width: 100%;
 margin: 40px auto;
 line-height: 0;
 text-align: center;
} */
#plan .inner h4 {
 margin: 40px auto;
 text-align: center;
}
#plan .inner h4 span {
 padding: 12px 2em;
 display: inline-block; *display: inline; *zoom: 1;
 letter-spacing: 0.04em;
 line-height: 1;
 color: #192E3C;
 font-size: 20px;
 font-weight: 400;
 border-top: 1px solid #192E3C;
 border-bottom: 1px solid #192E3C;
}

/* #plan .inner .price img {
 width: 100%;
 max-width: 766px;
 height: auto;
} */
#plan .inner .note {
 margin-top: 20px;
 text-align: center;
 letter-spacing: 0.04em;
 font-size: 12px;
}

@media screen and (max-width: 640px) {
 #plan { padding: 70px 0 40px;}
 #plan .inner ul {
  display: none;
  background: #FAF7F2;
 }
 #plan .detail-btn {
  width: 100%;
  padding: 18px 5%;
  display:table;
  text-align: center;
  box-sizing: border-box;
  cursor: pointer;
  border-top: 1px solid #192E3C;
  border-bottom: 1px solid #192E3C;
  background: #FFF;
  position: relative;
 }
 #plan .detail-btn span {
  display: table-cell;
  *display: inline; *zoom: 1;
  vertical-align: middle;
  letter-spacing: 0.1em;
  line-height: 1;
  color: #192E3C;
  font-size: 14px;
  font-weight: 400;
 }
 #plan .detail-btn .txt_close {
  display: none;
 }
 #plan .detail-btn.active .txt_open { display: none;}
 #plan .detail-btn.active .txt_close { display: table-cell;}
 #plan .detail-btn  .plus::before,#plan .detail-btn .plus::after {
   display: block;
   content: '';
   width: 2px;
   height: 14px;
   margin-top: -7px;
   background-color: #192E3C;
   position: absolute;
   top: 50%;
   right: 21px;
 }
 #plan .detail-btn  .plus::before {
   width: 14px;
   height: 2px;
   margin-top: -1px;
   top: 50%;
   right: 15px;
 }
 #plan .detail-btn .minus,
 #plan .detail-btn.active .plus,
 #Faq .faq_list dd {
  display: none;
 }
 #plan .detail-btn.active .minus { display: block;}
 #plan .detail-btn.active .minus::before {
   display: block;
   content: '';
   width: 14px;
   height: 2px;
   margin-top: -1px;
   background-color: #192E3C;
   position: absolute;
   top: 50%;
   right: 15px;
 }
 #plan .inner ul li {
  width: 90%;
  padding: 10px 0;
  margin: 0 auto 2px !important;
  display: block;
  text-align: left;
  line-height: 0;
  letter-spacing: -10px;
  background: url("../img/dotline.png") left bottom repeat-x;
  -webkit-background-size: 5px 1px;
       -o-background-size: 5px 1px;
          background-size: 5px 1px;
  }
 #plan .inner ul li figure {
  width: 22%;
  height: auto;
  margin: 0;
  display: inline-block;
  *display: inline;
  *zoom: 1;
  vertical-align: middle;
  text-align: center;}
 #plan .inner ul li p {
  width: 73%;
  min-height: 0;
  margin: 0 0 0 5%;
  display: inline-block; *display: inline; *zoom: 1;
  font-size: 15px;
  font-weight: 500;
 }
 #plan .inner ul li p small { font-size: 10px;}
/*  #plan .inner .price {
  width: 90%;
  max-width: 400px;
  margin: 20px auto;
 } */
#plan .inner h4 {
 width: 90%;
 margin: 25px auto;
}
#plan .inner h4 span {
 padding: 0;
 display: block;
 line-height: 1.33;
 font-size: 18px;
 font-weight: 400;
 border: none;
}


 #plan .inner .note {
  width: 90%;
  margin: 15px auto 0;
  font-size: 12px;
 }
}

@media screen and (max-width: 420px) {
 #plan .inner ul li p {
  font-size: 12px;
  font-weight: bold;
 }
 #plan .inner ul li p small { font-size: 10px;}
 #plan .inner .note { font-size: 9px;}
}

/*============================
 location
============================*/
#location {
 width: 100%;
 position: relative;
 background: #FFF;
}
#location .introduce {
 width: 100%;
 position: relative;
}

.introduce-photo img {width:100%}
#location .introduce-photo {
 position:absolute;
 overflow:hidden;
 width:60vw;
 height:600px;
}
#location .introduce-photo img {
 position:absolute;
 top: 50%;
 left: 0;
 -webkit-transform:translateY(-50%);
 -ms-transform:translateY(-50%);
 transform:translateY(-50%);
}
#location .introduce-photo img.fix {
 position:absolute;
 top: auto;
 bottom: 0;
 -webkit-transform:translateY(0);
 -ms-transform:translateY(0);
 transform:translateY(0)
}

#location .introduce-text { width: 370px; height: 600px;}
#location .introduce-text * { color: #192E3C;}
.introduce-left .introduce-text {
 float:right;
 padding-right : -webkit-calc(60vw + 420px) ;
 padding-right : calc(60vw + 420px) ;
}
#location .introduce-left .introduce-photo {
 right: 0;
}
.introduce-right .introduce-text {
 float:left;
 padding-left : -webkit-calc(60vw + 50px) ;
 padding-left : calc(60vw + 50px) ;
}
#location .introduce-right .introduce-photo {
 left:0;
}
.introduce-inner {
 width: 370px;
 position:absolute;
 top:50%;
 -webkit-transform:translateY(-50%);
 -ms-transform:translateY(-50%);
 transform:translateY(-50%)
}
#location .tit {
 width: 52%;
 max-width: 192px;
 margin: 0 auto 10px ;
 text-align: center;
 line-height: 0;
}
#location .tit img  {
 width: 100%;
 height: auto;
}
#location h3 {
 margin-bottom: 15px;
 text-align: center;
 letter-spacing: 0.06em;
 line-height: 1;
 font-size: 20px;
 font-weight: 600;
 letter-spacing:0.1em
}
#location h3 span {
 margin-top: 12px;
 display: block;
 letter-spacing: 0.12em;
 line-height: 1;
 font-family: 'Catamaran', sans-serif;
 font-size: 9px;
 font-weight: 300;
}
#location .description {
 padding-top:20px;
 letter-spacing: 0.08em;
 line-height: 2;
 font-size: 14px;
 font-weight: 300;
 background: url("../img/dotline.png") left top repeat-x;
 -webkit-background-size: 5px 1px;
      -o-background-size: 5px 1px;
         background-size: 5px 1px;
}
#location .btn {
 width: 240px;
 margin: 40px auto 0;
 text-align: center;
}
#location .btn a {
 padding: 15px 0;
 display: block;
 letter-spacing: 0.1em;
 line-height: 1;
 text-decoration: none;
 font-size: 14px;
 color: #192E3C;
 position: relative;
 border: 1px solid #8C969E;
}
#location .btn a::before {
 margin-top: -5px;
 content: "";
 position: absolute;
 right: 12px;
 top: 50%;
 width: 7px;
 height: 7px;
 border-top: 1px solid #192E3C;
 border-right: 1px solid #192E3C;
 -webkit-transform: rotate(45deg);
 transform: rotate(45deg);
}
#location .btn a:hover {
 color: #FFF !important;
 background: #4F9EC2;
}
#location .btn a:hover::before { border-color: #FFF;}
#location .photoswipe li {
 display: none;
 position: relative;
}
#location .photoswipe .btn { display: block;}
#location .photoswipe li img.hit {
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
}

@media screen and (max-width: 1500px) {
 #location .introduce .introduce-photo {height:450px}
 #location .introduce .introduce-text {height:450px}
 #location .introduce-text { width: 35%;}
 .introduce-left .introduce-text { padding-right :62.5%;}
 .introduce-right .introduce-text { padding-left : 62.5%;}
 #location .introduce-right .introduce-photo {
  left:0;
 }
 .introduce-inner { width: 35%;}
}
@media screen and (max-width: 640px) {
 #location .tit {
  width: 40%;
  max-width: 153px;
 }
 #location .introduce .introduce-photo,
 #location .introduce .introduce-photo img {
  width: 100%;
  height: auto;
  position: static;
  transform: none !important;
 }
 #location .introduce-text {
  width: 90%;
  height: auto !important;
  margin: 5% auto 10%;
  padding: 0;
  float: none !important;
  position: static !important;
 }
 .introduce-inner {
  width: 100%;
  padding: 0;
  position: static !important;
  top: auto;
  transform: none;
  -webkit-transform:translateY(0);
  -ms-transform:translateY(0);
  transform:translateY(0);
 }
 #location .tit { margin: 0 auto 3px ;}
 #location h3 {
  margin-bottom: 15px;
  font-size: 18px;
 }
 #location .description {
  padding-top:15px;
  font-size: 12px;
 }
 #location .btn {
  width: 200px;
  margin: 25px auto 0;
 }
 #location .btn a {
  padding: 15px 0;
  font-size: 12px;
 }
 #location .btn a::before {
  margin-top: -4px;
  content: "";
  position: absolute;
  right: 10px;
  top: 50%;
  width: 5px;
  height: 5px;
  border-top: 1px solid #FFF;
  border-right: 1px solid #FFF;
  -webkit-transform: rotate(45deg);
  transform: rotate(45deg);
 }
}

@media screen and (max-width: 420px) {
 #location h3 { font-size: 16px;}
 #location .description { font-size: 12px;}
}

/*============================
 optional
============================*/
#optional { padding: 120px 0 100px;}
#optional * { color: #192E3C;}
#optional .line-title { margin-bottom: 20px;}
#optional .line-title + p { margin-bottom: 40px;}


#optional ul {
 width: 100%;
 max-width: 1560px;
 margin: 0 auto;
}
#optional ul li {
 width: 31.8%;
 margin-left: 2.3%;
 margin-bottom: 40px;
 float: left;
}
#optional ul li:nth-of-type(3n+1) { margin-left: 0;}
#optional ul li figure {}
#optional ul li figure img {
 width: 100%;
 height: auto;
}
#optional ul li p {
 padding: 20px 0 0 20px;
 letter-spacing: 0.04em;
 line-height: 1.33;
 font-size: 18px;
 font-weight: 400;
}

#optional p.note {
 text-align:center;
 margin-top: 20px;
 letter-spacing: 0.04em;
 font-size: 12px;
 color: #192E3C;
}
@media screen and (max-width: 1600px) {
 #optional ul { width: 90%;}
}

@media screen and (max-width: 640px) {
 #optional { padding: 40px 0 20px;}
 #optional .line-title { letter-spacing: 0.06em; }
 #optional .line-title + p { margin-bottom: 30px;}
 #optional ul { width: 90%;}
 #optional ul li {
  width: 49%;
  margin-left: 2%;
  margin-bottom: 20px;
 }
 #optional ul li:nth-of-type(3n+1) { margin-left: 2%;}
 #optional ul li:nth-of-type(2n+1) { margin-left: 0;}
 #optional ul li figure {}
 #optional ul li figure img {
  width: 100%;
  height: auto;
 }
 #optional ul li p {
  padding: 14px 0 0 0;
  text-align: center;
  line-height: 1.33;
  font-size: 14px;
 }
}

@media screen and (max-width: 420px) {
 #optional ul li p {
  padding-top: 12px;
  font-size: 12px;
 }
 #optional p.note {
  margin-top: 8px;
  font-size: 10px;
 }
}

/*======================
 feature
=======================*/
#feature {
 padding: 80px 0;
 background: #F9F7F1;
 position: relative;
}
#feature > .inner {
 width: 100%;
 max-width: 1200px;
 margin: 0 auto;
}
#feature > .inner .line-title { margin-bottom: 20px;}
#feature > .inner .line-title + p { margin-bottom: 40px;}
#feature > .inner .box {
 margin-top: 50px;
 padding: 2%;
 background: #FFF;
 position: relative;
}
#feature > .inner .box.first { margin-top: 0;}
#feature > .inner .box figure {
 width: 46.5%;
 line-height: 0;
}
#feature .box.odd figure { float: left;}
#feature .box.even figure { float: right;}
#feature > .inner .box figure img {
 width: 100%;
 height: auto;
}
#feature > .inner .box .txt-wrap {
 width: 48%;
 position: absolute;
 top: 50%;
 -webkit-transform: translateY(-50%);
 transform: translateY(-50%);
}
#feature .box.odd .txt-wrap { right: 2.5%;}
#feature .box.even .txt-wrap { left: 2.5%;}
#feature > .inner .box .txt-wrap h4 {
 margin-bottom: 24px;
 letter-spacing: 0.04em;
 line-height: 1.33;
 color: #192E3C;
 font-size: 20px;
 font-weight: 600;
}
#feature .box .txt-wrap h4 small {
 color: #192E3C;
 font-size: 14px;
}
#feature > .inner .box .txt-wrap p {
 letter-spacing: 0.04em;
 line-height: 1.85;
 color: #192E3C;
 font-size: 14px;
 font-weight: 300;
}

@media screen and (max-width: 640px) {
 #feature { padding: 40px 0;}
 #feature > .inner {
  width: 90%;
  margin: 0 5%;
 }
 #feature > .inner .line-title + p { margin-bottom: 30px;}
 #feature > .inner .box {
  margin-top: 25px;
  padding: 5%;
 }

 #feature > .inner .box figure {
  width: 100%;
  float: none !important;
 }
 #feature > .inner .box .txt-wrap {
  width: 94%;
  padding: 5% 3% 3%;
  position: static !important;
  -webkit-transform: none!important;
  transform: none!important;
 }
 #feature > .inner .box .txt-wrap h4 {
  margin-bottom: 12px;
  text-align: center;
  font-size: 16px;
 }
 #feature > .inner .box .txt-wrap h4 small {
  display: block;
  font-size: 12px;
 }
 #feature > .inner .box .txt-wrap h4 span { display: none;}
 #feature > .inner .box .txt-wrap p {
  padding-top: 12px;
  line-height: 1.6;
  font-size: 11px;
  border-top: 1px solid #DEE0E2;
 }
}

/*============================
 gallery
============================*/
#gallery {
 padding: 80px 0;
 background: #FFF;
}
#gallery .inner {
 width: 100%;
 max-width: 1200px;
 margin: 0 auto;
}
#gallery .inner * { color: #192E3C;}
#gallery .inner .line-title { margin-bottom: 20px;}
#gallery .inner .line-title + p { margin-bottom: 40px;}
#gallery .inner #sort-btn {
 width: 66.3333%;
 margin: 0 auto 25px;
}
#gallery .inner #sort-btn li {
 width: 49.25%;
 padding: 2px;
 text-align: center;
 border: 1px solid #192E3C;
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}
#gallery .inner #sort-btn li a {
 display: block;
 letter-spacing: 0.05em;
 line-height: 54px;
 color: #192E3C;
 font-size: 16px;
}
#gallery .inner #sort-btn li a:hover {
 color: #FFF;
 background: #4F9EC2;
}
#gallery .inner #sort-btn li a.on-tab {
 color: #FFF;
 background: #192E3C;
 pointer-events: none;
}

#gallery .inner #sort-btn li.left { float: left;}
#gallery .inner #sort-btn li.right { float: right;}
#gallery .inner .photoswipe {
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}
#gallery .inner .photoswipe li {
 width: 15.833333%;
 margin: 1% 0 0 1%;
 float: left;
 line-height: 0;
 cursor: pointer;
 vertical-align: top;
 position: relative;
 background: #000;
}
#gallery .inner .photoswipe li.ceremony { display: none;}
#gallery .inner .photoswipe li:first-child,
#gallery .inner .photoswipe li:nth-child(7),
#gallery .inner .photoswipe li:nth-child(13),
#gallery .inner .photoswipe li:nth-child(19) { margin-left: 0;}
#gallery .inner .photoswipe li img {
 width: 100%;
 height: auto;
}
#gallery .inner .photoswipe li img.hit {
 width: 100%;
 height: 100%;
 position: absolute;
 top: 0;
 left: 0;
}
#gallery .inner .photoswipe li a {
 -webkit-transition:  all 0.4s;
 -moz-transition:  all 0.4s;
 -o-transition:  all 0.4s;
 transition:  all 0.4s;
}
#gallery .inner .photoswipe li a:hover {
 opacity: 0.8;
}
.pswp__caption__center { text-align: center !important;}

@media screen and (max-width: 640px){
 #gallery { padding: 40px 0;}
 #gallery .inner {
  width: 90%;
  margin: 0 5%;
 }
 #gallery> .inner .line-title + p { margin-bottom: 30px;}
 #gallery .inner #sort-btn {
  width: 100%;
  margin: 0 auto 15px;
 }
 #gallery .inner #sort-btn li a {
  line-height: 44px;
  font-size: 12px;
 }
 #gallery .inner .photoswipe li { width: 24.25%;}
 #gallery .inner .photoswipe li.sp-none,
 #gallery .inner .photoswipe li.sp-none a { display: none;}
 #gallery .inner .photoswipe li:nth-child(7),
 #gallery .inner .photoswipe li:nth-child(13),
 #gallery .inner .photoswipe li:nth-child(19) { margin-left: 1%;}
 #gallery .inner .photoswipe li:nth-child(5),
 #gallery .inner .photoswipe li:nth-child(9),
 #gallery .inner .photoswipe li:nth-child(13),
 #gallery .inner .photoswipe li:nth-child(17),
 #gallery .inner .photoswipe li:nth-child(21) { margin-left: 0;}
}

@media screen and (max-width: 420px){
 #gallery .inner #sort-btn li a {
  line-height: 40px;
  font-size: 10px;
 }
}

/*======================
 schedule
=======================*/
#schedule {
 padding: 80px 0;
 background: #FAF7F2;
 position: relative;
}
#schedule .inner {
 width: 90%;
 max-width: 1000px;
 margin: 0 auto;
}
#schedule .inner * { color: #192E3C;}
#schedule .inner .line-title { margin-bottom: 20px;}
#schedule .inner .line-title + p { margin-bottom: 40px;}
#schedule .inner .schedule-list {
 border-top: 1px solid #889196;
 border-bottom: 1px solid #889196;
}
#schedule .inner .schedule-list > li {
 padding: 1%;
 background: url(../img/schedule/line.png) center top no-repeat;
 -webkit-background-size: 1000px 10px;
      -o-background-size: 1000px 10px;
         background-size: 1000px 10px;
}
#schedule .inner .schedule-list > li:first-child,
#schedule .inner .schedule-list > li:nth-child(3),
#schedule .inner .schedule-list > li:nth-child(5) {
 background: #FFF url(../img/schedule/line02.png) center top no-repeat;
 -webkit-background-size: 1000px 10px;
      -o-background-size: 1000px 10px;
         background-size: 1000px 10px;
}
#schedule .inner .schedule-list li:first-child { background-image: none;}
#schedule .inner .schedule-list li.first,
#schedule .inner .schedule-list li.third { background-color: #FFF;}
#schedule .inner .schedule-list li .wrap {
 padding-left: 60px;
 font-size: 0;
 letter-spacing: -10px;
 -webkit-background-size: 60px 60px !important;
 -o-background-size: 60px 60px !important;
 background-size: 60px 60px !important;
}
#schedule .inner .schedule-list li:first-child .wrap { background: #192E3C url(../img/schedule/step01.png) left center no-repeat;}
#schedule .inner .schedule-list li:nth-child(2) .wrap { background: #4F9EC2 url(../img/schedule/step02.png) left center no-repeat;}
#schedule .inner .schedule-list li:nth-child(3) .wrap { background: #192E3C url(../img/schedule/step03.png) left center no-repeat;}
#schedule .inner .schedule-list li:nth-child(4) .wrap { background: #4F9EC2 url(../img/schedule/step04.png) left center no-repeat;}
#schedule .inner .schedule-list li .box {
 letter-spacing: -10px;
 font-size: 0;
}
#schedule .inner .schedule-list > li:first-child .box,
#schedule .inner .schedule-list > li:nth-child(3) .box { background: #FFF;}
#schedule .inner .schedule-list > li:nth-child(2) .box,
#schedule .inner .schedule-list > li:nth-child(4) .box { background: #FAF7F2;}
#schedule .inner .schedule-list > li .box {
 letter-spacing: -10px;
 font-size: 0;
}
#schedule .inner .schedule-list li .box .txt {
 width: 750px;
 padding: 0 25px;
 display: inline-block; *display: inline; *zoom: 1;
 vertical-align: middle;
}
#schedule .inner .schedule-list li .box .txt h4 {
 margin-bottom: 13px;
 letter-spacing: 0.04em;
 line-height: 1;
 color: #3d3d3d;
 font-size: 18px;
 font-weight: bold;
}
#schedule .inner .schedule-list li .box .txt p {
 letter-spacing: 0.04em;
 line-height: 1.6;
 color: #3d3d3d;
 font-size: 14px;
 font-weight: 300;
}
#schedule .inner .schedule-list li .box figure {
 width: 120px;
 display: inline-block; *display: inline; *zoom: 1;
 vertical-align: middle;
}
#schedule .inner .schedule-list li .box figure img {
 width: 100%;
 height: auto;
}

@media screen and (max-width: 640px) {
 #schedule { padding: 40px 0 0;}
 #schedule .inner .line-title + p { margin-bottom: 30px;}
 #schedule .inner .schedule-list { border: none;}
 #schedule .inner .schedule-list li {
  padding: 5% 5% 24px;
  background: #FFF url(../img/schedule/line.png) center top no-repeat !important;
  -webkit-background-size: auto 8px !important;
       -o-background-size: auto 8px !important;
          background-size: auto 8px !important;
 }
 #schedule .inner .schedule-list li:first-child { background-image: none !important;}
 #schedule .inner .schedule-list li .wrap {
  padding-left: 0;
  padding-top: 52px;
  -webkit-background-size: 52px 52px !important;
  -o-background-size: 52px 52px !important;
  background-size: 52px 52px !important;
  background-position: center top !important;
 }
 #schedule .inner .schedule-list li .box { background-color: #FFF !important;}
 #schedule .inner .schedule-list li .box .txt {
  width: 100%;
  padding: 15px 0;
  display: block;
 }
 #schedule .inner .schedule-list li .box .txt h4 {
  margin-bottom: 10px;
  text-align: center;
  line-height: 1.6;
  font-size: 16px;
 }
 #schedule .inner .schedule-list li .box .txt p { font-size: 12px;}
 #schedule .inner .schedule-list li .box .txt p br { display: none;}
 #schedule .inner .schedule-list li .box figure {
  width: 40%;
  max-width: 200px;
  margin: 0 auto;
  display: block;
 }
}

@media screen and (max-width: 420px) {
 #schedule .inner .schedule-list li {}
 #schedule .inner .schedule-list li .wrap {
  padding-left: 0;
  padding-top: 45px;
  -webkit-background-size: 45px 45px !important;
  -o-background-size: 45px 45px !important;
  background-size: 45px 45px !important;
 }
 #schedule .inner .schedule-list li .box figure { width: 120px;}
}

/*======================
 options
=======================*/
#options {
 padding: 0 0 80px;
 background: #FAF7F2;
 position: relative;
}
#options .inner {
 width: 100%;
 max-width: 1200px;
 margin: 0 auto;
}
#options .inner * { color: #192E3C;}
#options .inner .line-title { margin-bottom: 20px;}
#options .inner .line-title + p { margin-bottom: 40px;}

#options .inner .box {
 width: 100%;
 height: 450px;
 font-size: 0;
 letter-spacing: -10px;
 background: #FFF;
}
#options .inner .box .pht {
 width: 50%;
 display: inline-block;
 *display: inline;
 *zoom: 1;
 line-height: 0;
 vertical-align: middle;
}
#options .inner .box .pht img {
 width: 100%;
 max-width: 100%;
 height: auto;
}
#options .inner .box .txt {
 width: 43%;
 padding: 0 3.5%;
 margin-top: -40px;
 display: inline-block;
 *display: inline;
 *zoom: 1;
 vertical-align: middle;
 position: relative;
}
#options .inner .box .txt .tit {
 margin-left: -15px;
 line-height: 0;
 position: relative;
}
#options .inner .box .txt .tit img { max-width: 299px;}
#options .inner .box .txt h4 {
 margin-top: -15px;
 margin-bottom: 30px;
 text-align: center;
 line-height: 1.33;
 letter-spacing: 0.04em;
 color: #3d3d3d;
 font-size: 20px;
 font-weight: 400;
 position: relative;
}
#options .inner .box .txt p {
 color: #3d3d3d;
 letter-spacing: 0.04em;
 line-height: 1.85;
 font-size: 14px;
}


@media screen and (max-width: 640px) {
 #options { padding: 40px 0;}
 #options .inner .line-title + p { margin-bottom: 30px;}

 #options .inner .box {
  height: auto;
  background: none;
 }
 #options .inner .box .pht {
  width: 100%;
  display: block;
 }
 #options .inner .box .pht img {
  width: 100%;
  max-width: 100%;
  height: auto;
 }
 #options .inner .box .txt .tit { margin-left: -3%;}
 #options .inner .box .txt .tit img { max-width: 200px;}
 #options .inner .box .txt {
  width: 90%;
  margin-top: -40px;
  padding: 15px 5%;
  display: block;}
 #options .inner .box .txt h4 {
  margin-top: 0;
  margin-bottom: 10px;
  font-size: 20px;
 }
 #options .inner .box .txt p { font-size: 12px;}
}

@media screen and (max-width: 420px) {
 #options .inner .box .txt h4 { font-size: 18px;}
}

/*======================
 access
=======================*/
#access { padding: 105px 0 80px;}
#access > .inner {
 width: 100%;
 max-width: 1200px;
 margin: 0 auto;
}
#access > .inner .line-title + p img { max-width: 328px;}
#access > .inner .box { margin-bottom: 40px;padding-top: 20px;}
#access > .inner .box .pht {
 width: 48.333333%;
 float: right;
 line-height: 0;
}
#access > .inner .box .pht img {
 width: 100%;
 height: auto;
}
#access > .inner .box .map {
 width: 48.333333%;
 float: left;
}
#access > .inner .box .gmap {
 position: relative;
 padding-bottom: 66.66666%;
}
.gmap iframe,
.gmap object,
.gmap embed {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 100%;
}
#access > .inner .description {
 padding: 25px 30px;
 background: #F5F5F5;
}
#access > .inner .description h4 {
 margin-bottom: 7px;
 letter-spacing: 0.075em;
 line-height: 1.6;
 color: #3d3d3d;
 font-size: 18px;
 font-weight: 400;
}
#access > .inner .description p {
 letter-spacing: 0.05em;
 line-height: 1.6;
 color: #3d3d3d;
 font-size: 14px;
 font-weight: 300;
}
#access > .inner .description p b {
 color: #3d3d3d;
 vertical-align: baseline;
 font-weight: 400;
}

@media screen and (max-width: 640px) {
 #access { padding: 70px 0 40px;}
 #access > .inner {
  width: 90%;
  margin: 0 5%;
 }
 #access > .inner .line-title + p img { max-width: 287px;}
 #access > .inner .box { margin-bottom: 20px;}
 #access > .inner .box .pht {
  width: 100%;
  float: none;
  line-height: 0;
 }
 #access > .inner .box .map {
  width: 100%;
  float: none;
 }
 #access > .inner .box .gmap {
  margin-bottom: 10px;
  padding-bottom: 50%;
 }
 #access > .inner .description { padding: 5%;}
 #access > .inner .description h4 {
  letter-spacing: 0.05em;
  font-size: 15px;
  font-weight: 400;
 }
 #access > .inner .description p {
  font-size: 13px;
  font-weight: 300;
 }
 #access > .inner .description p b {
  font-weight: 600;
 }
 #access > .inner .description p .sp-none { display: none;}
 #access > .inner .description p .sp { display: inline;}
}

@media screen and (max-width: 420px) {
 #access > .inner .description h4 { font-size: 13px;}
 #access > .inner .description p { font-size: 12px;}
}

/* Common Styles */
#access .swiper-pagination-fraction,
#access .swiper-pagination-custom,
#access .swiper-container-horizontal > .swiper-pagination-bullets { bottom: 0;}

/*============================
 contact
============================*/
.contact {
 width: 100%;
 max-width: 1200px;
 padding: 80px 0 0;
 margin: 0 auto;
 border: none;
}
.contact h3 { margin-bottom: 20px;}
.contact h3 + p { margin-bottom: 40px;}
.contact .contact-btn {
 width: 50%;
 margin: 0 auto;
}
.contact .contact-btn a {
 display: block;
 text-align: center;
 background: #192E3C;
 position: relative;
}
.contact .contact-btn a:hover { background: #4F9EC2;}
.contact .contact-btn a .icon {
 width: 72px;
 margin-top: -36px;
 position: absolute;
 left: 10px;
 top: 50%;
}
.contact .contact-btn a .icon img {
 width: 100%;
 height: auto;
}
.contact .contact-btn a .txt {
 line-height: 6;
 color: #FFF;
 font-size: 16px;
}
@media screen and (max-width:640px) {
 .contact {
  width: 90%;
  margin: 0 auto;
  padding: 40px 0 0;
  display: block;
 }
 .contact h3 {}
 .contact h3 + p { margin-bottom: 30px;}
 .contact .contact-btn { width: 90%;}
 .contact .contact-btn a .icon {
  width: 40px;
  margin-top: -20px;
 }
 .contact .contact-btn a .icon img {
  width: 100%;
  height: auto;
 }
 .contact .contact-btn a .txt {
  line-height: 5;
  font-size: 12px;
 }
 #footer { padding-bottom: 0 !important;}
}

@media screen and (max-width:420px) {
 .contact .contact-btn { width: 100%;}
 .contact h3 + p { font-size: 12px;}
 #footer { padding-bottom: 0 !important;}
}