@charset "utf-8";

/**
 *
 * style
 *
 */

/*--------------------------------------------------------------------------
adjust
---------------------------------------------------------------------------*/

.swiper-container {
height: 100%;
}

h2.title {
 margin-bottom: 40px;
 text-align: center;
 line-height: 1;
}
h2.title img {
 width: auto;
 height: 56px;
}
h2.title span {
 padding-top: 10px;
 display: block;
 line-height: 1;
 color: #36367A;
 font-size: 11px;
 font-weight: normal;
}

@media screen and (max-width: 980px) {
 h2.title { margin-bottom: 30px;}
 h2.title img { height: 50px;}
 h2.title span {
  padding-top: 7px;
  font-size: 10px;
 }
}
@media screen and (max-width: 640px) {
 h2.title { margin-bottom: 25px;}
 h2.title img { height: 42px;}
 h2.title span {
  padding-top: 5px;
  font-size: 9px;
 }
}


/*--------------------------------------------------------------------------
 Header
---------------------------------------------------------------------------*/
#header {
 width: 100%;
 height: 75px;
 position: fixed;
 top: 0;
 left: 0;
 background: #FFF;
 z-index: 10;
}
#header h1 {
 top: 15px;
 left: 30px;
 position: absolute;
}
#header h1 a {
 height: 45px;
 display: block;
}
#header h1 a img {
 width: auto;
 height: 100%;
}
#header ul {
 position: absolute;
 top: 50%;
 right: 30px;
-webkit-transform: translateY(-50%);
transform: translateY(-50%);
}
#header ul li {
 margin-left: 15px;
 float: right;
}
#header ul li.btn { padding-top: 3px; }
#header ul li.btn a {
 width: 125px;
 display: block;
 text-align: center;
 letter-spacing: 0.14em;
 line-height: 29px;
 color: #FFF;
 font-size: 12px;
 font-weight: bold;
 -webkit-border-radius: 15px;
         border-radius: 15px;
 -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
     -ms-transition: all 0.4s;
      -o-transition: all 0.4s;
         transition: all 0.4s;
}
#header ul li.tel { line-height: 0;}
#header ul li.tel img {
 width: auto;
 height: 35px;
 line-height: 0;
}
#header ul li.btn a { background: #F6678A;}
#header ul li.btn a:hover { background: #F0033D;}

@media screen and (max-width: 980px) {
 #header { height: 68px;}
 #header h1 { top: 13px;}
 #header h1 a { height: 40px;}
 #header ul li.tel img {
  width: auto;
  height: 29px;
 }
 #header ul li.btn a {
  width: 110px;
  line-height: 24px;
  font-size: 10px;
 }
}

@media screen and (max-width: 640px) {
 #header {
  position: static;
  height: 60px;
 }
 #header h1 {
  top: 12px;
  left: 50%;
 -webkit-transform: translateY(0) translateX(-50%);
 transform: translateY(0) translateX(-50%);

 }
 #header h1 a { height: 36px;}
 #header ul { display: none;}
}

/*--------------------------------------------------------------------------
 Main visual
---------------------------------------------------------------------------*/
#main-visual {
 height: 85vh;
 margin: 0 0 7%;
 background: url(../img/guam-main-main.jpg) 50% 50% no-repeat;
 -webkit-background-size: cover;
      -o-background-size: cover;
         background-size: cover;
 position: relative;
 z-index: 0;
}
/* #main-visual::after {
 content: "";
 width: 100%;
 height: 227px;
 display: block;
 position: absolute;
 left: 0;
 bottom: 0;
 background: url(../img/guam-main-shadow.png) left bottom repeat-x;
} */
#main-visual h2 {
 width: 25%;
 max-width: 300px;
 line-height: 0;
 position: absolute;
 left: 50%;
 bottom: 0;
 z-index: 1;
-webkit-transform: translateY(64%) translateX(-50%);
transform: translateY(64%) translateX(-50%);
}
#main-visual .copy {
 width: 44.44444%;
 max-width: 800px;
 position: absolute;
 left: 50%;
 top: 9%;
 z-index: 1;
 -webkit-transform: translateX(-50%);
 transform: translateX(-50%);
}
#main-visual .price {
 width: 31.1111%;
 max-width: 556px;
 line-height: 0;
 position: absolute;
 bottom: 3.5%;
 right: 2%;
 z-index: 1;
}

@media screen and (max-width: 980px) {
 #main-visual { margin: 0 0 10%;}
 #main-visual .copy {
  width: 60%;
  top: 20%;
 }
 #main-visual .price {
  width: 40%;
  right: 2%;
  top: 2%;
 }
 #main-visual h2 {}
}

@media screen and (max-width: 640px) {
 #main-visual {
  height: 70vh;
  /*margin: 0 0 50%;*/
  margin: 0 0 18%;
  background: url(../img/guam-main-main-sp.jpg) 50% 50% no-repeat;
  -webkit-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
 }

/*#main-visual {
  height: 70vh;
  margin: 0 0 28%;
  background: url(../img/guam-main-main-sp.jpg) 50% 50% no-repeat;
  -webkit-background-size: cover;
       -o-background-size: cover;
          background-size: cover;
 }*/

 #main-visual .copy {
  width: 75%;
  top: 15%;
 }
 #main-visual .price {
  width: 90%;
  max-width: 640px;
  left: 50%;
  top: auto;
  bottom: -23%;
  -webkit-transform: translateY(50%) translateX(-50%);
  transform: translateY(50%) translateX(-50%);
 }

/*  #main-visual .price {
  width: 90%;
  max-width: 640px;
  left: 50%;
  top: auto;
  bottom: 0;
  -webkit-transform: translateY(50%) translateX(-50%);
  transform: translateY(50%) translateX(-50%);
 }*/

 #main-visual h2 {
  width: 46.875%;
  bottom: 22%;
  -webkit-transform: translateY(120%) translateX(-50%);
  transform: translateY(120%) translateX(-50%);
 }
}

@media screen and (max-width: 420px) {
 #main-visual .copy {
  width: 90%;
  top: 17%;
 }
}

/*--------------------------------------------------------------------------
 Lead
---------------------------------------------------------------------------*/
#lead {
 width: 90%;
 max-width: 1200px;
 margin: 0 auto;
 padding: 25px 0;
 background: url(../img/guam/bg-lead.gif) center center no-repeat;
 -webkit-background-size: contain;
      -o-background-size: contain;
         background-size: contain;
 position: relative;
 z-index: 10;
}
#lead h2 {
 margin-bottom: 20px;
 text-align: center;
 letter-spacing: 0.22em;
 line-height: 1.5;
 color: #B29A64;
 font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
 font-size: 28px;
 font-weight: 300;
}
#lead p {
 text-align: center;
 letter-spacing: 0.1em;
 line-height: 2.2;
 font-size: 16px;
}

@media screen and (max-width: 980px) {
 #lead { padding: 15px 0;}
 #lead h2 {
  margin-bottom: 15px;
  font-size: 22px;
 }
 #lead p { font-size: 13px;}
}
@media screen and (max-width: 767px) {
 #lead p { text-align: left;}
 #lead p br { display: none;}
}

@media screen and (max-width: 640px) {
 #lead { padding: 10px 0;}
 #lead h2 {
  margin-bottom: 12px;
  letter-spacing: 0.14em;
  font-size: 18px;
 }
 #lead p {
  line-height: 2;
  font-size: 12px;
  }
}

/*--------------------------------------------------------------------------
 plan
---------------------------------------------------------------------------*/
#plan {
 margin: 0px auto 0;
 padding: 80px 0;
 background: #BAE2F8 url(../img/guam/plan/bg-plan.gif) center center;
 -webkit-background-size: 400px auto;
      -o-background-size: 400px auto;
         background-size: 400px auto;
}

#plan figure { line-height: 0;}
#plan figure .sp { display: none;}
#plan figure + p {
 margin-top: 40px;
 text-align: center;
 letter-spacing: 0.1em;
 line-height: 2.2;
 font-size: 14px;
}
#plan .price {
 width: 80%;
 max-width: 532px;
 margin: 40px auto 20px;
 text-align: center;
 line-height: 0;
}
#plan .price + p {
 width: 100%;
 max-width: 700px;
 margin: 0 auto;
 padding-top: 20px;
 text-align: center;
 letter-spacing: 0.1em;
 line-height: 2;
 font-size: 12px;
 border-top: 1px solid #9A9BBD;
}
#plan h4 {
 margin: 40px 0 5px;
 text-align: center;
 letter-spacing: 0.1em;
 font-size: 14px;
 font-weight: normal;
}
#plan ul {
 max-width: 1000px;
 margin: 0 auto;
 letter-spacing: -5px;
 text-align: center;
 font-size: 0;
}
#plan ul li {
 width: 18.8%;
 margin: 1.5% 0 0 1.5%;
 display: inline-block; *display: inline; *zoom: 1;
 letter-spacing: normal;
}
#plan ul li:nth-of-type(5n+1) { margin-left: 0;}
/* gallery */
#plan .gallery-wrap{
  max-width: 700px;
  margin: 60px auto 0;
}
#plan .gallery{
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
#plan .gallery .item{width: 25%;}
#plan .gallery .item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media screen and (max-width: 980px) {
 #plan {padding: 60px 0;}
 #plan figure + p {
  margin-top: 30px;
  line-height: 1.8;
  text-align: left;
  font-size: 12px;
 }
 #plan figure + p br { display: none;}
 #plan .price { margin: 30px auto 20px;}
 #plan .price + p {
  padding-top: 20px;
  font-size: 10px;
 }
 #plan h4 {
  margin: 30px 0 5px;
  text-align: center;
  font-size: 12px;
 }
}

@media screen and (max-width: 640px) {
 #plan {
  /* margin: 40px auto 0; */
  padding: 40px 0;
 }
 #plan figure .pc { display: none;}
 #plan figure .sp { display: block;}
 #plan figure + p {
  margin-top: 20px;
  line-height: 1.8;
  text-align: left;
  font-size: 10px;
 }
 #plan figure + p br { display: none;}
 #plan .price { margin: 20px auto 5px;}
 #plan .price + p {
  text-align: left;
  padding-top: 10px;
 }
 #plan h4 {
  margin: 20px 0 5px;
  text-align: center;
  font-size: 12px;
 }
 #plan ul li {
  width: 32.3333%;
  float: left;
 }
 #plan ul li:nth-of-type(5n+1) { margin-left: 1.5%;}
 #plan ul li:nth-of-type(3n+1) { margin-left: 0;}
}

@media screen and (max-width: 420px) {
 #plan figure + p { margin-top: 12px;}
  #plan .price {
   width: 100%;
   margin: 20px auto 10px;
   text-align: center;
   line-height: 1;
  }
   #plan .price + p { font-size: 9px;}
/*  #plan ul li { width: 49.25%;}
 #plan ul li:nth-of-type(3n+1) { margin-left: 1.5%;}
 #plan ul li:nth-of-type(2n+1) { margin-left: 0;} */
}


 /*--------------------------------------------------------------------------
 chapelphoto
---------------------------------------------------------------------------*/
#chapelphoto {
  margin-top: 70px;
 padding: 80px 0;
 background: #F8F5F0;
}
/* #chapelphoto .box {
 letter-spacing: -5px;
 font-size: 0;
}
#chapelphoto .box:nth-child(3) {margin-top: 60px;} */
/* #chapelphoto figure {
 width: 55%;
 display: inline-block; *display: inline; *zoom: 1;
 vertical-align: middle;
} */
/* #chapelphoto .txt-wrap {
 width: 45%;
 text-align: center;
 display: inline-block; *display: inline; *zoom: 1;
 vertical-align: middle;
}
#chapelphoto .txt-wrap h3 {
 text-align: center;
 letter-spacing:0.1em;
 line-height: 1.33;
 color: #B29A64;
 font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
 font-size: 22px;
}
#chapelphoto .txt-wrap p.price {
 width: 100%;
 max-width: 394px;
 margin: 20px auto 0;
}
#chapelphoto .txt-wrap p.cap{
  max-width: 394px;
  margin: 5px auto 0 ;
  letter-spacing: 0.1em;
  line-height: 1.6;
  font-size: 10px;
  text-align: left;
  color: #36357a;
}
#chapelphoto .txt-wrap ul {
  max-width: 394px;
  margin: 20px auto 0;
 letter-spacing: 0.1em;
 line-height: 2.2;
 font-size: 14px;
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
}
#chapelphoto .txt-wrap ul li{
  width: 48%;
  padding: 10px 0;
  margin-bottom: 0px;
  font-size: 10px;
  line-height: 1.4;
  text-align: left;
  border-bottom: 1px dotted #B29A64;
  display: flex;
  align-items: center;
  min-height: 20px;
} */
/* #chapelphoto .box:nth-child(3) {margin-top: 60px;} */

#chapelphoto .img-wrap{
  display: flex;
  justify-content: space-between;
}
#chapelphoto .img-wrap img{width: 50%;}
#chapelphoto .price {
 width: 80%;
 max-width: 532px;
 margin: 10px auto 20px;
 text-align: center;
 line-height: 0;
}
#chapelphoto .price + p {
 width: 80%;
 max-width: 700px;
 margin: 0 auto;
 padding-top: 20px;
 text-align: center;
 letter-spacing: 0.1em;
 line-height: 2;
 font-size: 12px;
 border-top: 1px solid #9A9BBD;
}
#chapelphoto h4 {
 margin: 40px 0 5px;
 text-align: center;
 letter-spacing: 0.1em;
 font-size: 14px;
 font-weight: normal;
}
#chapelphoto h3 {
  margin-top: 20px;
 text-align: center;
 letter-spacing:0.1em;
 color: #B29A64;
 font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
 font-size: 22px;
}
#chapelphoto ul {
  width: 80%;
  max-width: 700px;
  margin: 0px auto 0;
 letter-spacing: 0.1em;
 line-height: 2.2;
 font-size: 14px;
 display: flex;
 justify-content: space-between;
 flex-wrap: wrap;
}
#chapelphoto ul li{
  width: 32%;
  padding: 10px 0;
  margin-bottom: 0px;
  font-size: 10px;
  line-height: 1.4;
  text-align: left;
  border-bottom: 1px dotted #B29A64;
  display: flex;
  align-items: center;
  min-height: 20px;
}
#chapelphoto .point{
  width: 80%;
  margin: 10px auto 0;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}
#chapelphoto .point .point-item{
  width: 32%;
   position: relative; /* 番号を相対配置するために必要 */
}
#chapelphoto .point .point-item p{
  margin-top: 5px;
  font-size: 14px;
  line-height: 1.4;
  text-align: center;
}
#chapelphoto .point .point-item p i{
  font-style: normal;
  font-size: 12px;
}
.triangle-label {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
  border-top: 50px solid #B29A64;
  border-right: 50px solid transparent;
  z-index: 1;
}
.triangle-label span {
  position: absolute;
  top: -47px;
  left: 5px;
  color: #fff;
  font-size: 14px;
  font-weight: bold;
  z-index: 2;
}


/* @media screen and (max-width: 1200px) {
 #chapelphoto .txt-wrap {
  width: 35%;
  padding-left: 5%;
 }
 #chapelphoto .txt-wrap h3 {
  text-align: left;
  font-size: 18px;
 }
 #chapelphoto .txt-wrap p.price {
  max-width: 394px;
  margin: 10px auto 0;
 }
} */

@media screen and (max-width: 980px) {
 #chapelphoto { padding: 60px 0;}
 #chapelphoto .price {
  width: 90%;
  margin: 30px auto 20px;
}
 #chapelphoto .price + p {
  width: 90%;
  padding-top: 20px;
  font-size: 10px;
 }
 #chapelphoto h4 {
  margin: 30px 0 5px;
  text-align: center;
  font-size: 12px;
 }
 #chapelphoto ul{
  width: 90%;
 }
}

@media screen and (max-width: 767px) {
 #chapelphoto .inner {
  width: 100%;
  padding: 0;
 }
/*  #chapelphoto figure {
  width: 100%;
  display: block;
 }
 #chapelphoto .txt-wrap {
  width: 90%;
  margin: 0 auto;
  padding: 5% 5% 0;
  text-align: center;
  display: block;
 }
 #chapelphoto .txt-wrap h3 {text-align: center;} */
}

@media screen and (max-width: 640px) {
  #chapelphoto { padding: 40px 0;}
   #chapelphoto .price { margin: 20px auto 5px;}
   #chapelphoto .price + p {
    text-align: left;
    padding-top: 10px;
   }
   #chapelphoto .txt-wrap h3 {
    margin-bottom: 20px;
    font-size: 16px;
   }
   #chapelphoto h4 {
    margin: 20px 0 5px;
    text-align: center;
    font-size: 12px;
   }
   #chapelphoto ul li{padding: 5px 0;}
    #chapelphoto .point {
      width: 90%;
    flex-direction: column;
    gap: 20px;
  }
  #chapelphoto .point .point-item {
    width: 100%;
    display: flex;
    align-items: center;
    gap: 20px;
    position: relative;
  }
  #chapelphoto .point .point-item img {
    width: 40%;
    height: auto;
  }
  #chapelphoto .point .point-item p {
    width: 60%;
    font-size: 12px;
    text-align: left;
  }
  #chapelphoto .point .point-item p i{font-size: 10px;}
  .triangle-label {
    border-top: 30px solid #B29A64;
    border-right: 30px solid transparent;
    top: 0;
    left: 0;
  }
  .triangle-label span {
    top: -28px;
    font-size: 11px;
}
}

/* @media screen and (max-width: 640px) {
 #chapelphoto .txt-wrap p.price { margin: 20px auto 0;}
 #chapelphoto .txt-wrap p.cap{font-size: 10px;} 
}
 */


/*--------------------------------------------------------------------------
 location
---------------------------------------------------------------------------*/
#location {
 width: 100%;
 position: relative;
}
#location .introduce { 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-photo img.loc02 {
 top: auto;
 bottom: 0;
 left: 0;
 -webkit-transform:translateY(0);
 -ms-transform:translateY(0);
 transform:translateY(0);
}


#location .introduce-text { width: 370px; height: 600px; box-sizing: content-box;}
#location .introduce-text * { color: #B29A64;}
.introduce-left .introduce-text {
 float:right;
 padding-right : -webkit-calc(60vw + 50px) ;
 padding-right : calc(60vw + 50px) ;
}
#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: 100%;
 margin: 0;
 text-align: center;
 line-height: 0;
}
#location .tit img  {
 width: 100%;
 height: auto;
}
#location h3 {
 margin-bottom: 20px;
 text-align: center;
 font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
 font-size: 22px;
 font-weight: 300;
 letter-spacing:0.1em
}
#location h3 span {
 display: block;
 letter-spacing: 0.2em;
 font-family: 'Lato', sans-serif;
 font-size: 9px;
}
#location .description {
 padding-top:20px;
 letter-spacing: 0.1em;
 line-height: 2;
 color: #6A3906;
 font-size: 14px;
 background: url("../img/guam/dotline.png") left top repeat-x;
 -webkit-background-size: 6px 1px;
      -o-background-size: 6px 1px;
         background-size: 6px 1px;
}


@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: 1200px) {
 #location .introduce .introduce-photo {height:400px}
 #location .introduce .introduce-text {height:400px}
 #location h3 {
  margin-bottom: 15px;
  font-size: 18px;
 }
 #location .description {
  padding-top:15px;
  line-height: 1.8;
  font-size: 12px;
 }
}

@media screen and (max-width: 1000px) {
 #location .introduce .introduce-photo {height: 350px;}
 #location .introduce .introduce-text {height: 350px;}
}


@media screen and (max-width: 920px) {
 #location .tit {
  width: 80%;
  margin: 0 auto;
  max-width: 300px;
 }
 #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 h3 {
  margin-bottom: 15px;
  font-size:22px;
 }
 #location .description {
  padding-top:15px;
  font-size: 13px;
 }
}

@media screen and (max-width: 640px) {
 #location h3 {
  margin-bottom: 13px;
  font-size:18px;
 }
 #location h3 span { font-size: 8px;}
 #location .description {
  padding-top: 13px;
  font-size: 11px;
 }
}

/*--------------------------------------------------------------------------
 feature
---------------------------------------------------------------------------*/
#feature {
 padding: 80px 0;
 background: #F8F5F0;
}
#feature .box {
 margin-top: 50px;
 padding: 2%;
 background: #FFF;
 position: relative;
}
#feature .box.first { margin-top: 0;}
#feature .box figure {
 width: 46.5%;
 line-height: 0;
}
#feature .box.odd figure { float: left;}
#feature .box.even figure { float: right;}
#feature .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 .box .txt-wrap h3 {
 margin-bottom: 20px;
 letter-spacing:0.1em;
 line-height: 1.33;
 color: #B29A64;
 font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
 font-size: 22px;
 font-weight: 300;
}
#feature .box .txt-wrap h3 span {
 margin-top: 0.25em;
 display: block;
 letter-spacing: 0.2em;
 line-height: 1.33;
 font-family: 'Lato', sans-serif;
 font-size: 9px;
}
#feature .box .txt-wrap p {
 letter-spacing: 0.08em;
 line-height: 2;
 font-size: 14px;
}
#feature .box .txt-wrap p a {
 margin-top: 0.5em;
 display: block;
 color: #B29A64;
 font-size: 14px;
 text-decoration: underline;
}
#feature .box .txt-wrap p a:hover {
 color: #6A3906;
 text-decoration: none;
}
/* #feature .resort_link{margin-top: 80px;}
#feature .resort_link h4{
   margin-bottom: 15px;
   text-align: center;
   line-height: 1.33;
   font-size: 16px;
}
#feature .resort_link h4 .sp{display: none;}
#feature .resort_link figure{
   width: 80%;
   margin: 0 auto;
}
#feature .resort_link figure a:hover{opacity: .7;} */

@media screen and (max-width: 1200px) {
 #feature .box .txt-wrap h3 {
  margin-bottom: 15px;
  font-size: 18px;
 }
 #feature .box .txt-wrap p,
 #feature .box .txt-wrap p a {
  line-height: 1.8;
  font-size: 12px;
 }
}

@media screen and (max-width: 980px) {
 #feature { padding: 60px 0;}
 #feature .box { margin-top: 40px;}
}

@media screen and (max-width: 850px) {
 #feature .box { padding: 5%;}
 #feature .box figure {
  width: 100%;
  float: none !important;
 }
 #feature .box .txt-wrap {
  width: 94%;
  padding: 5% 3% 3%;
  position: static !important;
  -webkit-transform: none!important;
  transform: none!important;
 }
}

@media screen and (max-width: 640px) {
 #feature { padding: 40px 0;}
 #feature .box { margin-top: 25px;}
 #feature .box .txt-wrap h3 {
  margin-bottom: 13px;
  letter-spacing: 0.06em;
  font-size: 16px;
 }
 #feature .box .txt-wrap h3 span { font-size: 8px;}
 #feature .box .txt-wrap p,
 #feature .box .txt-wrap p a { font-size: 11px;}
/*  #feature .resort_link{margin-top: 40px;}
#feature .resort_link h4{
   margin-bottom: 10px;
   font-size: 14px;
}
#feature .resort_link h4 .sp{display: block;}
#feature .resort_link figure{width: 100%;} */
}

/*--------------------------------------------------------------------------
 contact
---------------------------------------------------------------------------*/
.contact {
 width: 100%;
 max-width: 640px;
 margin: 80px auto 0;
}
.contact h4 {
 margin-bottom: 25px;
 text-align: center;
 line-height: 1.33;
 font-size: 16px;
}
.contact ul {}
.contact ul li {
 line-height: 0;
 margin-top: 20px;
}
.contact ul li:first-child {
 margin-top: 0;
}
.contact ul li a {
 display: block;
 -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
     -ms-transition: all 0.4s;
      -o-transition: all 0.4s;
         transition: all 0.4s;
}
.contact ul li a:hover {
 opacity: 0.8;
}

@media screen and (max-width: 980px) {
 .contact { margin: 60px auto 0;}
}
@media screen and (max-width: 640px) {
 .contact { display: none;}
}

/*--------------------------------------------------------------------------
 after
---------------------------------------------------------------------------*/
#after {
 padding: 80px 0;
 background: #BAE2F8 url(../img/guam/after/bg-after.gif) center center;
 -webkit-background-size: 400px auto;
      -o-background-size: 400px auto;
         background-size: 400px auto;
}
#after .upr {
 width: 100%;
 position: relative;
}
#after .upr figure {
 width: 55.83333%;
 max-width: 670px;
 margin-left: 9%;
 line-height: 0;
}
#after .upr .txt-wrap {
 width: 39%;
 padding: 25px 3%;
 border: 1px solid #AA9781;
 background: rgba(255,255,255,0.5);
 position: absolute;
 right: 0;
 bottom: 9%;
}
#after .upr .txt-wrap h3 {
 margin-bottom: 13px;
 padding-bottom: 13px;
 text-align: center;
 letter-spacing:0.1em;
 line-height: 1.33;
 font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
 font-size: 20px;
 border-bottom: 1px solid #AA9781;
}
#after .upr .txt-wrap p {
 letter-spacing: 0.08em;
 line-height: 1.8;
 font-size: 14px;
}
#after .lwr { padding-top: 20px; }
#after .lwr ul {
 letter-spacing: -5px;
 font-size: 0;
}
#after .lwr ul li {
 width: 32%;
 margin-top: 40px;
 margin-left: 2%;
 display: inline-block; *display: inline; *zoom: 1;
 vertical-align: top;
}
#after .lwr ul li figure {
 width: 100%;
 letter-spacing: -5px;
 line-height: 0;
}
#after .lwr ul li:nth-of-type(3n+1) { margin-left: 0;}
#after .lwr ul li .txt { padding: 5% 5% 0;}
#after .lwr ul li .txt h4 {
 margin-bottom: 0.5em;
 letter-spacing: 0.1em;
 line-height: 1.33;
 font-size: 18px;
}
#after .lwr ul li .txt p {
 letter-spacing: 0.08em;
 line-height: 1.8;
 font-size: 12px;
}

@media screen and (max-width: 1200px) {
 #after .upr figure { margin-left: 0;}
 #after .upr .txt-wrap { padding: 2% 3%;}
 #after .upr .txt-wrap h3 {
  margin-bottom: 12px;
  padding-bottom: 10px;
  font-size: 16px;
 }
 #after .upr .txt-wrap p { font-size: 12px;}

 #after .lwr { padding-top: 0;}
 #after .lwr ul li { margin-top: 30px;}
 #after .lwr ul li .txt h4 { font-size: 14px;}
 #after .lwr ul li .txt p { font-size: 10px;}
}

@media screen and (max-width: 980px) {
 #after { padding: 60px 0;}
}

@media screen and (max-width: 767px) {
 #after .upr figure {
  width: 80%;
  margin: 0 auto;
 }
 #after .upr .txt-wrap {
  width: 90%;
  margin-bottom: 30px;
  padding: 4% 5%;
  position: static;
 }
 #after .lwr ul li { width: 49%;}
 #after .lwr ul li:nth-of-type(3n+1) { margin-left: 2%;}
 #after .lwr ul li:nth-of-type(2n+1) { margin-left: 0;}
}

@media screen and (max-width: 640px) {
 #after { padding: 40px 0;}
 #after .upr figure { width: 100%;}
 #after .upr .txt-wrap h3 {
  margin-bottom: 12px;
  padding-bottom: 10px;
  letter-spacing: 0.06em;
  font-size: 14px;
 }
 #after .upr .txt-wrap p { font-size: 11px;}
 #after .lwr ul li { margin-top: 15px;}
 #after .lwr ul li .txt { padding: 5% 0 0;}
 #after .lwr ul li .txt h4 {
  letter-spacing: 0.06em;
  font-size: 10px;
  font-weight: normal;
 }
 #after .lwr ul li .txt p { display: none;}
}

/*--------------------------------------------------------------------------
 photo
---------------------------------------------------------------------------*/
#photo {
 padding: 80px 0;
}
#photo .box {
 letter-spacing: -5px;
 font-size: 0;
}
#photo figure {
 width: 60%;
 display: inline-block; *display: inline; *zoom: 1;
 vertical-align: middle;
}
#photo .txt-wrap {
 width: 40%;
 text-align: center;
 display: inline-block; *display: inline; *zoom: 1;
 vertical-align: middle;
}
#photo .txt-wrap h3 {
 margin-bottom: 30px;
 text-align: center;
 letter-spacing:0.1em;
 line-height: 1.33;
 color: #B29A64;
 font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
 font-size: 22px;
}
#photo .txt-wrap h3 +p {
 letter-spacing: 0.1em;
 line-height: 2.2;
 font-size: 14px;
}
#photo .txt-wrap p.price {
 width: 100%;
 max-width: 394px;
 margin: 40px auto 0;
}
#photo .txt-wrap p.cap{
  max-width: 394px;
  margin: 0 auto;
  letter-spacing: 0.1em;
  line-height: 2.2;
  font-size: 12px;
  text-align: left;
  color: #36357a;
}

@media screen and (max-width: 1200px) {
 #photo .txt-wrap {
  width: 35%;
  padding-left: 5%;
 }
 #photo .txt-wrap h3 {
  margin-bottom: 20px;
  text-align: left;
  font-size: 18px;
 }
 #photo .txt-wrap h3 +p {
  text-align: left;
  font-size: 12px;
 }
 #photo .txt-wrap h3 +p  br { display: none;}
 #photo .txt-wrap p.price {
  max-width: 394px;
  margin: 30px auto 0;
 }
}

@media screen and (max-width: 980px) {
 #photo { padding: 60px 0;}
}

@media screen and (max-width: 767px) {
 #photo .inner {
  width: 100%;
  padding: 0;
 }
 #photo figure {
  width: 100%;
  display: block;
 }
 #photo .txt-wrap {
  width: 90%;
  padding: 5% 5% 0;
  text-align: center;
  display: block;
 }
 #photo .txt-wrap h3 {
  text-align: center;
 }
}

@media screen and (max-width: 640px) {
 #photo { padding: 40px 0;}
 #photo .txt-wrap h3 {
  margin-bottom: 15px;
  font-size: 16px;
 }
 #photo .txt-wrap h3 +p {
  line-height: 1.8;
  font-size: 11px;
 }
 #photo .txt-wrap h3 +p  br { display: none;}
 #photo .txt-wrap p.price { margin: 20px auto 0;}
 #photo .txt-wrap p.cap{font-size: 10px;}
}

/*--------------------------------------------------------------------------
 flow
---------------------------------------------------------------------------*/
#flow {
 padding: 80px 0;
 background: #F8F5F0;
}
#flow .flow-list {
 margin: 0 auto;
 max-width: 1000px;
 border-top: 1px solid #9792B2;
 border-bottom: 1px solid #9792B2;
}
#flow .flow-list > li {
 padding: 1%;
 background: url(../img/guam/flow/line.png) center top no-repeat;
 -webkit-background-size: 1000px 10px;
      -o-background-size: 1000px 10px;
         background-size: 1000px 10px;
}
#flow .flow-list > li:first-child,
#flow .flow-list > li:nth-child(3),
#flow .flow-list > li:nth-child(5) {
 background: #FFF url(../img/guam/flow/line02.png) center top no-repeat;
 -webkit-background-size: 1000px 10px;
      -o-background-size: 1000px 10px;
         background-size: 1000px 10px;
}
#flow .flow-list > li:first-child { background-image: none;}
#flow .flow-list > li .wrap {
 padding-left: 6.112%;
 font-size: 0;
 letter-spacing: 0;
 -webkit-background-size: 6.112% auto !important;
 -o-background-size: 6.112% auto !important;
 background-size: 6.112% auto !important;
}
#flow .flow-list > li:first-child .wrap { background: #36367A url(../img/guam/flow/step01.png) left center no-repeat;}
#flow .flow-list > li:nth-child(2) .wrap { background: #5B77AF url(../img/guam/flow/step02.png) left center no-repeat;}
#flow .flow-list > li:nth-child(3) .wrap { background: #36367A url(../img/guam/flow/step03.png) left center no-repeat;}
#flow .flow-list > li:nth-child(4) .wrap { background: #5B77AF url(../img/guam/flow/step04.png) left center no-repeat;}
#flow .flow-list > li:nth-child(5) .wrap { background: #36367A url(../img/guam/flow/step05.png) left center no-repeat;}
#flow .flow-list > li .box {
 letter-spacing: 0;
 font-size: 0;
}
#flow .flow-list > li:first-child .box,
#flow .flow-list > li:nth-child(3) .box,
#flow .flow-list > li:nth-child(5) .box { background: #FFF;}
#flow .flow-list > li:nth-child(2) .box,
#flow .flow-list > li:nth-child(4) .box { background: #F8F5F0;}
#flow .flow-list > li .box .txt {
 width: 79%;
 padding: 0 2.7%;
 display: inline-block; *display: inline; *zoom: 1;
 vertical-align: middle;
}
#flow .flow-list > li .box .txt h4 {
 letter-spacing: 0.1em;
 line-height: 2;
 color: #B29A64;
 font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
 font-size: 18px;
}
#flow .flow-list > li .box .txt h4 small {
 font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", "ヒラギノ角ゴ ProN W3", Hiragino Kaku Gothic ProN, "Yu Gothic", YuGothic, Arial, "メイリオ", Meiryo, sans-serif;
 font-size: 14px;
 font-weight: normal;
}
#flow .flow-list > li .box .txt p {
 letter-spacing: 0.08em;
 line-height: 1.8;
 font-size: 12px;
}
#flow .flow-list > li .box .txt p small {
 margin-top: 1em;
 display: block;
 color: #B29A64;
 font-size: 10px;
}
#flow .flow-list > li .box .txt ul { margin-top: 15px;}
#flow .flow-list > li .box .txt ul li {
 margin-right: 15px;
 float: left;
}
#flow .flow-list > li .box .txt ul li.btn { padding-top: 3px; }
#flow .flow-list > li .box .txt ul li.btn a {
 width: 125px;
 display: block;
 text-align: center;
 letter-spacing: 0.14em;
 line-height: 29px;
 color: #FFF;
 font-size: 12px;
 font-weight: bold;
 -webkit-border-radius: 15px;
         border-radius: 15px;
 -webkit-transition: all 0.4s;
    -moz-transition: all 0.4s;
     -ms-transition: all 0.4s;
      -o-transition: all 0.4s;
         transition: all 0.4s;
}
#flow .flow-list > li .box .txt ul li.tel { line-height: 0;}
#flow .flow-list > li .box .txt ul li.tel img {
 width: auto;
 height: 35px;
 line-height: 0;
}
#flow .flow-list > li .box .txt ul li.btn a { background: #F6678A;}
#flow .flow-list > li .box .txt ul li.btn a:hover { background: #F0033D;}

#flow .flow-list > li .box figure {
 width: 15.2%;
 display: inline-block; *display: inline; *zoom: 1;
 vertical-align: middle;
}

@media screen and (max-width: 1200px) {
 #flow .flow-list > li .box .txt h4 { font-size: 15px;}
 #flow .flow-list > li .box .txt h4 small { font-size: 12px;}
 #flow .flow-list > li .box .txt p { font-size: 11px;}
 #flow .flow-list > li .box .txt p small {
  margin-top: 0.5em;
  font-size: 9px;
 }
}

@media screen and (max-width: 980px) {
 #flow { padding: 60px 0;}
}

@media screen and (max-width: 767px) {
 #flow { padding: 70px 0 40px;}
 #flow .flow-list { border: none;}
 #flow .flow-list > li {
  padding: 5% 5% 24px;
  background: #FFF url(../img/guam/flow/line.png) center top no-repeat !important;
  -webkit-background-size: auto 8px !important;
       -o-background-size: auto 8px !important;
          background-size: auto 8px !important;
 }
 #flow .flow-list > li:first-child { background-image: none !important;}
 #flow .flow-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;
  background-color: #36367A !important;
 }
 #flow .flow-list > li .box { background-color: #FFF !important;}
 #flow .flow-list > li .box .txt {
  width: 100%;
  padding: 20px 0 15px;
  display: block;
 }
 #flow .flow-list > li .box .txt h4 {
  margin-bottom: 15px;
  text-align: center;
  line-height: 1.6;
  font-size: 15px;
 }
 #flow .flow-list > li .box .txt h4 small {
  display: block;
  font-size: 11px;
 }
 #flow .flow-list > li .box .txt p { font-size: 11px;}
 #flow .flow-list > li .box .txt p br { display: none;}
 #flow .flow-list > li .box .txt ul { display: none;}
 #flow .flow-list > li .box figure {
  width: 40%;
  max-width: 200px;
  margin: 0 auto;
  display: block;
 }
}

@media screen and (max-width: 640px) {
 #flow { padding: 40px 0;}
}

@media screen and (max-width: 420px) {
 #flow .flow-list > li {
  -webkit-background-size: auto 7px !important;
       -o-background-size: auto 7px !important;
          background-size: auto 7px !important;
 }
 #flow .flow-list > li .wrap {
  padding-left: 0;
  padding-top: 40px;
  -webkit-background-size: 40px 40px !important;
  -o-background-size: 40px 40px !important;
  background-size: 40px 40px !important;
 }
 #flow .flow-list > li .box .txt { padding: 18px 0 14px;}
 #flow .flow-list > li .box .txt h4 {
  margin-bottom: 10px;
  font-size: 14px;
 }
}

/*--------------------------------------------------------------------------
 Faq
---------------------------------------------------------------------------*/
#faq {
 width: 90%;
 max-width: 1000px;
 margin: 0 auto;
 padding: 80px 0;
}
#faq .faq_list {}
#faq .faq_list dt {
 width: 100%;
 margin-top: 15px;
 display:table;
 box-sizing: border-box;
 border: 1px solid #9A9BBD;
 cursor: pointer;
}
#faq .faq_list dt:hover {
 background-color: #EBEBF2;
}
#faq .faq_list dt:first-child { margin-top: 0; }
#faq .faq_list dt.active {
 border-bottom: none;
 background-color: #EBEBF2;
}
#faq .faq_list dt span {
 display: table-cell;
 *display: inline; *zoom: 1;
 vertical-align: middle;
}
#faq .faq_list dt .icon {
 width: 68px;
 text-align: center;
 line-height: 0;
 background: #36367A;
}
#faq .faq_list .icon img { max-width: 22px;}
#faq .faq_list dt .txt {
 padding: 20px;
 letter-spacing: 0.1em;
 line-height: 1.5;
 color: #36367A;
 font-family: "ヒラギノ明朝 ProN W3", "Hiragino Mincho ProN", "游明朝", YuMincho, "HG明朝E", "ＭＳ Ｐ明朝", "ＭＳ 明朝", serif;
 font-size: 18px;
 font-weight: bold;
 position: relative;
}
#faq .faq_list dt .plus:before,#faq .faq_list dt .plus:after {
  display: block;
  content: '';
  width: 2px;
  height: 18px;
  margin-top: -9px;
  background-color: #36367A;
  position: absolute;
  top: 50%;
  right: 38px;
}
#faq .faq_list dt .plus:before {
  width: 18px;
  height: 2px;
  margin-top: -1px;
  top: 50%;
  right: 30px;
}
#faq .faq_list dt .minus,
#faq .faq_list dt.active .plus,
#faq .faq_list dd {
 display: none;
}
#faq .faq_list dt.active .minus { display: block;}
#faq .faq_list dt.active .minus:before {
  display: block;
  content: '';
  width: 18px;
  height: 2px;
  margin-top: -1px;
  background-color: #36367A;
  position: absolute;
  top: 50%;
  right: 30px;
}
#faq .faq_list dd {
 width: 100%;
 box-sizing: border-box;
 border: 1px solid #9A9BBD;
 border-top: none;
 background: #EBEBF2 url(../img/guam/dotline02.png) left top repeat-x;
 -webkit-background-size: 4px 1px;
 -o-background-size: 4px 1px;
 background-size: 4px 1px;
}
#faq .faq_list dd .icon {
 width: 68px;
 padding-top: 18px;
 float: left;
 display: inline-block; *display: inline; *zoom: 1;
 text-align: center;
 vertical-align: middle;
}
#faq .faq_list dd .txt {
 width : -webkit-calc(100% - 108px);
 width : calc(100% - 108px);
 padding: 18px 20px;
 letter-spacing: 0.08em;
 line-height: 1.8;
 float: left;
 font-size: 14px;
}
#faq .faq_list dd .txt a {
 color: #2DA27E;
 text-decoration: underline;
}
#faq .faq_list dd .txt a:hover {
 color: #3d3d3d;
 text-decoration: none;
}

@media screen and (max-width: 980px){
 #faq { padding: 60px 0;}
 #faq .faq_list dt .icon {
  width: 60px;
 }
 #faq .faq_list dt .txt {
  padding: 16px 60px 16px 20px;
  font-size: 16px;
 }
 #faq .faq_list dd .icon {
  width: 60px;
  padding-top: 16px;
 }
 #faq .faq_list dd .txt {
  width : -webkit-calc(100% - 100px);
  width : calc(100% - 100px);
  font-size: 12px;
 }
}
@media screen and (max-width: 920px){
 #faq .faq_list dt:hover { background-color: #FFF;}
 #faq .faq_list dt.active { background-color: #EBEBF2;}
}
@media screen and (max-width: 767px){
 #faq {
  padding-top: 40px;
  margin-bottom: 20px;
 }
 #faq .faq_list dt .icon {
  width: 54px;
 }
 #faq .faq_list dt .txt {
  padding: 15px 42px 15px 15px;
  font-size: 15px;
 }
 #faq .faq_list dt .plus:before,#faq .faq_list dt .plus:after {
   width: 2px;
   height: 12px;
   margin-top: -6px;
   right: 15px;
 }
 #faq .faq_list dt .plus:before {
   width: 12px;
   height: 2px;
   margin-top: -1px;
   right: 10px ;
 }
 #faq .faq_list dt.active .minus:before {
   width: 12px;
   height: 2px;
   margin-top: -1px;
   top: 50%;
   right: 10px;
 }
 #faq .faq_list dd .icon {
  width: 54px;
 }
 #faq .faq_list dt .icon img,
 #faq .faq_list dd .icon img {
  width: 11px;
 }
 #faq .faq_list dd .txt {
  width : -webkit-calc(100% - 84px);
  width : calc(100% - 84px);
  padding: 15px;
 }
 #faq .faq_list dd .txt br { display: none;}
}

@media screen and (max-width: 640px){
 #faq { padding: 40px 0;}
}

@media screen and (max-width: 420px){
 #faq .faq_list dt { margin-top: 12px;}
 #faq .faq_list dt .icon {
  width: 24px;
 }
 #faq .faq_list dt .txt {
  padding: 12px 42px 12px 12px;
  font-size: 14px;
  font-size: 1.4rem;
 }
 #faq .faq_list dd .icon {
  width: 24px;
 }
 #faq .faq_list dd .txt {
  width : -webkit-calc(100% - 48px);
  width : calc(100% - 48px);
  padding: 12px;
  font-size: 11px;
  font-size: 1.1rem;
 }
}

/*--------------------------------------------------------------------------
 Information
---------------------------------------------------------------------------*/
#information {
 width: 90%;
 max-width: 1000px;
 margin: 0 auto;
 padding: 0 0 80px;
}
#information dl {
 letter-spacing: -5px;
 font-size: 0;
 background: url(../img/guam/dotline.png) left bottom repeat-x;
 -webkit-background-size: 4px 1px;
 -o-background-size: 4px 1px;
 background-size: 4px 1px;
}
#information dl dt {
 width: 20%;
 padding: 1em 0;
 display: inline-block; *display: inline; *zoom: 1;
 vertical-align: top;
 text-align: center;
 letter-spacing: 0.08em;
 font-size: 14px;
 background: url(../img/guam/dotline.png) left top repeat-x;
 -webkit-background-size: 4px 1px;
 -o-background-size: 4px 1px;
 background-size: 4px 1px;
}
#information dl dd {
 width: 75%;
 padding: 1em 5% 1em 0;
 display: inline-block; *display: inline; *zoom: 1;
 vertical-align: top;
 letter-spacing: 0.08em;
 font-size: 14px;
 background: url(../img/guam/dotline.png) left top repeat-x;
 -webkit-background-size: 4px 1px;
 -o-background-size: 4px 1px;
 background-size: 4px 1px;
}

@media screen and (max-width: 980px){
 #information { padding: 0 0 60px;}
 #information dl dt {
  width: 25%;
  font-size: 12px;
 }
 #information dl dd {
  width: 75%;
  padding-right: 0;
  font-size: 12px;
 }
}

@media screen and (max-width: 420px){
 #information { padding: 0 0 40px;}
 #information dl dt {
  font-size: 10px;
  font-weight: bold;
 }
 #information dl dd { font-size: 10px;}
}

/*--------------------------------------------------------------------------
 Footer
---------------------------------------------------------------------------*/
#footer {
 margin-top: 80px;
 padding: 60px 0;
 text-align: center;
 background: #404040;
}
#footer h2 {
 width: 38%;
 max-width: 163px;
 margin: 0 auto 20px;
}
#footer h2:hover{
  opacity: .6;
  transition: .6s;
}
#footer ul {
  width: 86.666%;
  margin: 0 auto 10px;
  display: flex;
  justify-content: center;
}
#footer ul li {
  padding: 0 1.5%;
  position: relative;
  font-size: 13px;
}
#footer ul li:first-child{padding-left: 0;}
#footer ul li::after {
  content: "│";
  color: #B3B3B3;
  position: absolute;
  top: 0;
  right: -3%;
}
#footer ul li:last-child:after {display: none;}
#footer ul li a{color: #B3B3B3;}
#footer ul li a:hover{
  opacity: .6;
  transition: .6s;
}
#footer ul + p {
 letter-spacing: 0.08em;
 color: #B3B3B3;
 font-size: 9px;
}

@media screen and (max-width: 767px) {
#footer {
  margin-top: 40px;
  padding: 40px 0;
 }
 #footer h2 { margin-bottom: 15px;}
#footer ul li {
  padding: 0 3%;
  font-size: 10px;
}
#footer ul li::after {right: -2%;}
 #footer ul + p { font-size: 8px;}
}

/*--------------------------------------------------------------------------
 fix-contact
---------------------------------------------------------------------------*/
#fix-contact { display: none;}

@media screen and (max-width: 640px) {
 body {
  padding-bottom: -webkit-calc(16% + 18px) ;
  padding-bottom: calc(16% + 18px) ;
 }
 #fix-contact {
  width : 94%;
  padding: 1.5% 3% 3%;
  position: fixed;
  display: block;
  bottom: -100px;
  z-index: 100;
  opacity: 0;
  filter:alpha(opacity=0);
  -webkit-transition: 0.5s ease-in-out;
  -moz-transition: 0.5s ease-in-out;
  -o-transition: 0.5s ease-in-out;
  transition: 0.5s ease-in-out;
  background: #FFF;
  border-top: 1px solid #dfdfdf;
 }
 #fix-contact.active {
  bottom: 0;
  opacity: 1;
  filter:alpha(opacity=100);
 }
 #fix-contact h4 {
  margin-bottom: 5px;
  text-align: center;
  letter-spacing: 0.1em;
  font-size: 10px;
 }
 #fix-contact ul {}
 #fix-contact ul li {
  float: left;
  width: 48.83333%;
  line-height: 0;
 }
 #fix-contact ul li:last-child { float: right;}
}

/*--------------------------------------------------------------------------
 Select Area
---------------------------------------------------------------------------*/
#select-area, #sp-select-area {
  margin: 0 auto 10px;
  padding: 10px 0;
  max-width: 480px;
  background-color: #faf5ea;
  border-radius: 10px;
  text-align: center;
}
#select-area *, #sp-select-area * {
 -moz-box-sizing: border-box;
 -webkit-box-sizing: border-box;
 box-sizing: border-box;
}
#select-area h3, #sp-select-area h3 {
  margin: 5px 0 10px;
}

#select-area ul, #sp-select-area ul {
  display: block;
  margin: 5px 5px 10px;
  padding: 0 5px;
}

#select-area ul li, #sp-select-area ul li {
  display: block;
  margin-bottom: 10px;
  line-height: 0;
}

#select-area ul li a:hover, #sp-select-area ul li a:hover {
  opacity: .8;
}

.chapel .photo .bx-wrapper img, .studio .photo .bx-wrapper img {
  max-width: 100%;
  display: block;
  vertical-align: top;
  width: auto;
  line-height: 0;
  margin: 0 auto;
  max-height: 257px;
}

@media screen and (max-width: 420px) {
 #select-area {
  width: 270px;
  margin: 0 auto 20px;
 }
 #select-area h3 {
   line-height: 10px;
   font-size: 10px;
 }
}