/* COMMON */
html {
  font-size: 62.5%;
}
body {
  font-family: "Sawarabi Mincho", sans-serif;
}
h1 {
  font-size: calc(2rem + 1vw);
}

h2 {
  font-size: calc(1.5rem + 1vw);
}

h3 {
  font-size: calc(.8rem + 1vw);
}
ul {
  list-style: none;
}
li,p {
  font-size: 1.7rem;
}
button {
  font-family: 'Catamaran', sans-serif;
}
a {
  text-decoration: none;
  color: #000;
}
a:hover {
  color: orange;
  text-decoration: none;
}
.btn-origin {
  background: #20001A;
  color: #fff;
}

/* ===================================
 * Navigation
 =================================== */
.main-head {
  /* box-shadow: 0px 10px 10px rgba(0,0,0,0.1); */
  z-index: 3;
  position: relative;
}
nav {
  width: 90%;
  margin: auto;
  display: flex;
  align-items: center;
  min-height: 10vh;
  padding: 1.5rem 0rem;
}
#logo{
  flex: 1 1 40rem;
}
#logo img {
  width: 80%;
  height: auto;
}
.nav-links {
  display: flex;
  justify-content: space-around;
  flex: 3 1 60rem;
}
.nav-links li {
  font-size: calc(.3rem + 1vw);
}
.nav-bar-btn {
  background: #49a7a7;
  border-radius: 20px;
  font-size: inherit;
  box-shadow: none;
  border: none;
  text-shadow: none;
  padding: 1.5rem 3rem;
  transition: background-color 0.25s;
  font-size: inherit;
}
.nav-bar-btn a { 
  color: #fff;
}
.nav-bar-btn:hover {
  background: #56c4c4;
  cursor: pointer;
}


/* ===================================
 * top area (Parallax Background)
 =================================== */
#hero-sec {
  position: relative;
  display: flex;
  height: 90vh;
  background: url('../img/hero_bg.jpg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  overflow: hidden;
  flex-wrap: wrap;
}

#hero-sec .hero-text-area {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 30rem;
}
#hero-sec .hero-text-area .hero-txt {
  color: #fff;
  font-size: 10rem;
  z-index: 2;
  text-shadow: 1px 1px 1px rgba(0,0,0, 0.1);
}
#hero-sec .hero-text-area .wall-left {
  position: absolute;
  background-color: #c1bddc;
  width: 25vw;
  min-width: 20rem;
  height: 100%;
  left: 0;
  box-shadow: .1rem 0rem 2rem rgba(179,157,193, 0.1);
  display: none;
}
#hero-sec .hero-text-area .hero-txt h1{
  position: absolute;
  left: 19%;
  top: 45%;
}

#hero-sec .hero-photo-area {
  display: flex;
  justify-content: center;
  align-items: center;
  flex: 1 1 30rem;
  z-index: 1;
}

#hero-sec .hero-photo-area img{
  max-width: 68rem;
  width: 100%;
  height: 100%;
  object-fit: cover;
  position: absolute;
  bottom : -30%;
  right: 50%;
  left: 70rem;
  top: 0;
}

/* ===================================
 * poem1 area
 =================================== */
#poem1-sec {
  text-align: center;
}

#poem1-sec h2 img {
  padding: 5rem 0rem;
  margin: 0 auto;
  width: 40%;
}

/* ===================================
 * face-to-face area
 =================================== */
#facetoface-sec {
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 0 2rem 0;
  padding: 5rem 2.5rem;
  background-color: #ece8ff;
  overflow: hidden;
  min-height: 60vh;
}
#facetoface-sec .items {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: row;
}
/* =============
 * Start: div 
 */

 /* div textarea */
#facetoface-sec .textarea {
  display: flex;
  flex-direction: column;
  justify-content: start;
  padding: 0;
  margin: 0rem 2rem 0 1rem;
  width: 40%;
}
#facetoface-sec a { 
  color: #fff;
}
#facetoface-sec a:active {
  color: #fff;
}
#facetoface-sec h1 {
  font-family: 'Open Sans', sans-serif;
  margin-bottom: 2rem;
}
#facetoface-sec p{
  margin-bottom: 2rem;
  color: #7d8285;
}

/* button textarea */
#facetoface-sec .textarea .btn-facetoface {
  width: 60%;
  font-size: 3rem;
}
#facetoface-sec .textarea .btn-facetoface:hover {
  color: #fff;
  background: #300027;

}
/* div imgarea */
#facetoface-sec .imgarea {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

/* firstimg imgarea */
#facetoface-sec .imgarea .firstimg {
  display: flex;
  align-self: flex-end;
  width: 70%;
  height: auto;
}


/* secondimg imgarea */
#facetoface-sec .imgarea .secondimg {
  width: 70%;
  height: auto;
  margin: -4rem 0 0 0;
}


/* 
 * End: div 
 ========================== */


/* ===================================
 * contents-sec area
 =================================== */

/* ul */
#contents-sec {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 6rem auto;
  height: 60vh;
  min-height: 55vh;
  width: 100%;
}
#contents-sec a {
  color: #fff;
}
#contents-sec .contents-items {
  justify-content: space-between;
}
#contents-sec .contents-items h3{
  font-family: 'Open Sans', sans-serif;
  margin-bottom: 3rem;
  margin-left: -12.5%;
}

#contents-sec .list-group {
  border-style: none;
  padding: 0 0 0 2rem;
}

/* li */
#contents-sec .list-group .list-group-item {
  border-style: none;
  padding: 3px;
  font-size: 2rem;
}

#contents-sec .list-group .list-group-item a {
  color: #000;
}
#contents-sec .list-group .list-group-item:hover {
  cursor: pointer;
}
#contents-sec .list-group .list-group-item a:hover {
  color: orange;
}


/* 
 * menu-photo-area
 */

/* div parent */
#contents-sec .menu-photo-area {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
  /* div child */
  #contents-sec .menu-photo-area .photo-text {
    position: absolute;
    background: linear-gradient(rgba(41, 41, 41, 0.5), rgba(0,0,0,0.7));
    color: #fff;
    padding: 2rem;
    text-align: center;
    z-index: 2;
  }

  #contents-sec .menu-photo-area .photo-item {
    display: flex;
    justify-content: center;
    align-items: flex-start;
    flex-direction: column;
    z-index: 1;
  }
  #contents-sec .menu-photo-area .disactive {
    visibility: hidden;
  }

  /* -> img */
  #contents-sec .menu-photo-area .photo-item img {
    width: 80%;
    height: auto;
  }
    /* img1 */
    #contents-sec .menu-photo-area .photo-item .menu-img1{
      display: flex;
      align-self: flex-end;
    }
    /* img2 */
    #contents-sec .menu-photo-area .photo-item .menu-img2{
      margin: -4rem 0 0 0;
    }
    #contents-sec .menu-photo-area .photo-item .close-btn {
      display: none;
    }
    #contents-sec .menu-photo-area .photo-item button {
      background: #20001A;
      color: #fff;
      border: none;
      padding: 1rem 6rem;
      border-radius: 10px;
      font-size: calc(.5rem + 1vw);
      margin-top: 3rem;
      align-self: center;
      transition: all .5s ease;
    }
    #contents-sec .menu-photo-area .photo-item button:hover {
      opacity: 0.8;
    }

/* ===================================
 * highlight Phone-sec area
 * almost settings are in [Highlight-Phone.css]
 =================================== */
#highlight-phone-sec {
  /* margin: 2rem 0; */
  background-color: #ece8ff;
}

#highlight-phone-sec h3{ 
  font-family: 'Open Sans', sans-serif;
}

#highlight-phone-sec h1 {
  margin-bottom: 3rem;
}

#highlight-phone-sec .highlight-phone-box {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
}

/* ===================================
 *  Lightbox Gallery-sec area
 * almost settings are in [Lightbox-Gallery.css]
 =================================== */
.photo-gallery {
  color: #313437;
  overflow: hidden;
}
.photo-gallery .photos-box .pin-spacer{
  margin: 0 !important;
  
}
.photo-gallery .photos {
  padding-bottom: 20px;
}

.photo-gallery .item {
  padding-bottom: 20px;
}


/* ===================================
 * bottom area (Parallax Background)
 =================================== */
#bottom-px-area img{
  width: 100%;
  height: auto;
}

/* ===================================
 * request area
 =================================== */
.request-area {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  min-height: 30vh;
  margin: 2rem 0rem;
  text-align: center;
}
.request-area h1{
  font-family: 'Open Sans', sans-serif;
  margin: 2rem 0rem;
  font-size: 5rem;
}
.request-area a {
  color: #fff;
}
.request-area a:active {
  color: #fff;
}
.request-area button{
  font-size: 3rem;
  padding: .7rem 6rem;
  border-radius: .7rem;
  box-shadow: 0rem .2rem 1.3rem rgba(0,0,0, 0.3);
}

.request-area button:hover {
  color: #fff;
  background: #300027;
}


/* ===================================
 * footer
 =================================== */
footer {
  display: flex;
  justify-content: space-around;
  align-items: center;
  flex-wrap: wrap;
  padding: 1rem 5rem;
  background-color: #000;
  color: #fff;
  overflow: hidden;
}
footer h1{
  margin: 1rem 0rem;
  flex: 1 1 40rem;
}
footer h1 img {
  width: 60%;
}
footer p{
  display: flex;
  justify-content: flex-end;
  margin: 1rem 0rem;
  flex: 1 1 60rem;
  font-size: calc(.1rem + 1vw);
}

/* ===================================
 * loader
 =================================== */
 .loader {
  display: none;
  opacity: 0;
  transition: all 0.5s ease-out; 
}
 .loader-active {
   display: block;
   opacity: 1;
   position: fixed;
   width: 100vw;
   height: 100vh;
   background: #fff;
   z-index: 9999;
   display: flex;
   justify-content: center;
   align-items: center;
 }