@charset 'utf-8';

html {
  scroll-behavior: smooth;
}


*,
*::after,
*::before {
  box-sizing: border-box;
  list-style: none;
  text-decoration: none;
  letter-spacing: 0.1em;
  line-height: 1.5;
  font-size: 16px;
  color: rgb(115, 114, 114);

}

body {
  font-family: "Gabriola", "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}

.wrapper {
  max-width: 1500px;
  margin: 0 auto;
  padding-right: 30px;
  padding-left: 30px;
  /* background-color: antiquewhite; */
}

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

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

.top-mp4 {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

#video {
  width: 100%;
  height: 100vh;
  object-fit: cover;
}

#video source {
  width: 100%;
  height: 100vh;
}


.top-img {
  background: url(../images/cupple2.jpg) no-repeat center center;
  background-size: cover;
  width: 100%;
  height: 100vh;
  z-index: 0;
  /* opacity: 0; */
}

.top-img img {
  width: 100%;
  height: 100%;
  z-index: 10;

}

.big-logo {
  position: absolute;
  padding-right: 10px;
  top: 52%;
  /* left: 60%; */
  right: 3%;
  width: 400px;
  height: 250px;
  z-index: 30 ;
}

.big-logo.appear {
  opacity: 1;
}

.big-logo img {}

.footer small {
  position: absolute;
  bottom: 20px;
  left: 50%;
  transform: translate(-50%, 0);
  color: #fff;
  font-size: 20px;
}

/* load --------------------------------------------------*/

.load-wrapper {
  
}

.sk-cube-grid {
  width: 40px;
  height: 40px;
  margin: 100px auto;
}

.sk-cube-grid .sk-cube {
  width: 33%;
  height: 33%;
  background-color: rgb(255, 255, 255);
  float: left;
  -webkit-animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
  animation: sk-cubeGridScaleDelay 1.3s infinite ease-in-out;
}

.sk-cube-grid .sk-cube1 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube2 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube3 {
  -webkit-animation-delay: 0.4s;
  animation-delay: 0.4s;
}

.sk-cube-grid .sk-cube4 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube5 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

.sk-cube-grid .sk-cube6 {
  -webkit-animation-delay: 0.3s;
  animation-delay: 0.3s;
}

.sk-cube-grid .sk-cube7 {
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

.sk-cube-grid .sk-cube8 {
  -webkit-animation-delay: 0.1s;
  animation-delay: 0.1s;
}

.sk-cube-grid .sk-cube9 {
  -webkit-animation-delay: 0.2s;
  animation-delay: 0.2s;
}

@-webkit-keyframes sk-cubeGridScaleDelay {

  0%,
  70%,
  100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }

  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}

@keyframes sk-cubeGridScaleDelay {

  0%,
  70%,
  100% {
    -webkit-transform: scale3D(1, 1, 1);
    transform: scale3D(1, 1, 1);
  }

  35% {
    -webkit-transform: scale3D(0, 0, 1);
    transform: scale3D(0, 0, 1);
  }
}


@keyframes fadeOut {
  from {
    opacity: 1;
  }

  to {
    display: none;
    opacity: 0;
    z-index: -1;
  }
}

#loader {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background-color: #7c7730;
  z-index: 1000;
  /* 環境によって「z-index」追加 */
}

/* 読み込み完了後に「loaded」を付与する */
#loader.loaded {
  animation: fadeOut 1s forwards;
}

.load-p {
  color: #FFF;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  margin-top: 20%;
  margin-bottom: 100px;
}

.load-p2 {
  color: #FFF;
  font-size: 30px;
  font-weight: bold;
  text-align: center;
  margin-top: 100px;
}

/*-------------------------------------------------- load */


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


.top-img a.current {
  color: rgb(202, 192, 8);
}


.header-flex {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-left {
  margin-left: 40px;
}



.header-right {}

.header-right ul {
  display: flex;
  justify-content: right;
  align-items: center;
}

.header-right li {
  margin: 40px;
}

.header-right a {
  color: #fff;
  font-size: 25px;
  transition: 0.6s;
}

.header-right a:hover {
  color: var(--hover);
  text-shadow: 1px 1px 1px rgb(241, 242, 236);
  transition: 0.6s;
}


/* js対応 --------------------------------------------------- */



.sp-navigation.show {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.9s ease, visibility 0.9s ease;

}


/* --------------------------------------------------- js対応 */
/* sp-navigation ---------------------------------------------*/

.sp-navigation {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 0px;
  background-color: rgba(236, 229, 218, 0.9);
  opacity: 0;
  transition: opacity 0.9s ease, visibility 0.9s ease;
  visibility: hidden;
  z-index: 1;
  overflow: auto;
  display: none;
}

.sp-navigation-title {
  font-size: 45px;
  text-align: center;
  margin-bottom: 10px;
}

.sp-navigation ul {
  margin: 0 auto;
  text-align: center;
}

.sp-navigation li {
  text-align: center;
  margin: 40px;
  /* background-color: aqua; */
}

.sp-navigation a {
  padding: 15px 20px;
  width: 160px;
  height: 50px;
  font-size: 24px;
  /* background-color: azure; */
}

.sp-navigation p {
  color: rgb(115, 114, 114);
  text-align: center;
  margin-bottom: 10px;
}

.sp-header-ad, 
.sp-working-days, 
.sp-tel {
  font-family: "HGS教科書体",
  "Helvetica Neue",
  Arial,
  "Hiragino Kaku Gothic ProN",
  "Hiragino Sans",
  Meiryo,
  sans-serif;
}


/* --------------------------------------------- sp-navigation*/




/* to-top --------------------- */

.to-top {
  position: fixed;
  right: 20px;
  bottom: 20px;
}

.to-top a {
  width: 30px;
  height: 30px;
  background-color: rgb(182, 148, 97);
  color: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}




/* sub-page frame ---------------------------------------------------------------- */

section {
  margin-bottom: 300px;
}

#square {
  padding-top: 100px;
}

#boston,
#oval,
#wellington {
  padding-top: 360px;
}

.sub-page .header-right a {
  color: rgb(131, 122, 97);

}

.sub-page a:hover {
  color: rgb(212, 212, 11);
  transition: 0.6s;
}

.sub-page h2 {
  font-size: 60px;
  text-align: center;
  color: rgb(131, 122, 97);
  margin-bottom: 70px;
}

.sub-page a.current {
  color: rgb(202, 192, 8);
}

.sub-page .title-flex {}

.sub-page .title-flex ul {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 0px;
}

.sub-page .title-flex li {
  margin: 100px;
}


.sub-page .title-flex a {
  font-size: 24px;
}

.sub-page .flex-left {
  width: 700px;
  margin: 0 auto;
  padding-left: 0px;
  padding-bottom: 0;
  /* background-color: burlywood; */
}

.sub-page .description {
  position: relative;
  padding-left: 10px;
  padding-right: 10px;
  /* background-color: beige; */
}

.sub-page .description p {
  margin: 0 auto;
  margin-bottom: 125px;
  max-width: 530px;
  font-family: "HGS教科書体",
    "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}

.sub-page .description p::after {
  content: 'square';
  font-size: 120px;
  color: rgba(131, 122, 97, 0.1);
  position: absolute;
  top: -55px;
  left: 30%;
  transform: rotate(-20deg);
  text-transform: capitalize;
  font-family: "Gabriola",
    "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}

.sub-page .item-flex {
  display: flex;
  justify-content: space-between;
  /* align-items: center; */
  margin: 30px 30px 0 30px;
  padding-bottom: 0;
  /* background-color: aliceblue; */
}

.sub-page .item {
  margin: 20px 20px 0 20px;
  padding-bottom: 0;
  /* background-color: aqua; */
}

.sub-page .item img {
  /* background-color: bisque; */
}

.sub-page .item p {
  margin-bottom: 0;
  padding-bottom: 0;
  font-family: "HGS教科書体", "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
}

.sub-page .sec-flex {
  display: flex;
  justify-content: center;
  /* align-items:center; */
  padding-bottom: 0;
}

.sub-page .flex-img {
  width: 750px;

}

.sub-page .flex-img img {
  margin-right: 20px;
  padding-right: 30px;
}

.sub-page .footer small {
  color: rgb(131, 122, 97);
}

.frame .footer {
  display: block;
  text-align: center;
}

.frame .footer small {
  position: static;
  padding-bottom: 30px;
}



/* square -------------------------- */


.square .description p::after {
  letter-spacing: 0.04em;
}

/* boston -------------------------- */


.boston .description p::after {
  content: 'boston';
  top: -55px;
  left: 32%;
  letter-spacing: 0.04em;
}

/* oval -------------------------- */


.oval .description p::after {
  content: 'oval';
  top: -55px;
  left: 38%;
  letter-spacing: 0.04em;
}

/* wellington -------------------------- */

.wellington {
  margin-bottom: 500px;
}

.wellington .description p::after {
  content: 'wellington';
  top: -15px;
  left: 22%;
  letter-spacing: 0.04em;
}

/* lens ---------------------------------------------------------------- */

.lens .sec-1 {
  margin-top: 180px;
  margin-bottom: 250px;
}

.lens .flex-left {
  /* max-width: 700px; */
  margin-bottom: 50px;
}

.lens .description p::after {
  content: 'lens';
  top: -55px;
  left: 32%;
}


.lens .item img {
  /* max-width: 300px; */
  margin-bottom: 30px;
  /* background-color: bisque; */
}

.lens .item p {
  max-width: 310px;

}

.lens .under p {
  text-align: center;
  font-family: "HGS教科書体",
    "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;
  margin-bottom: 10px;
}

.lens .footer {
  display: block;
  text-align: center;
}

.lens .footer small {
  position: static;
  padding-bottom: 20px;
}

* {
  /* outline: auto; */
}

/* about ---------------------------------------------------------------- */

.about .sec-1 {
  margin-top: 200px;
  margin-bottom: 0;
  padding-bottom: 0;

}

.about .description p {
  margin-bottom: 80px;
}

.about .description p::after {
  content: 'about';
  top: -55px;
  left: 32%;
}

.about-content {
  /* background-color: antiquewhite; */
}

.about .about-content dl {
  margin: 0 auto;
  padding-left: 20px;
  margin-bottom: 125px;
  max-width: 530px;
  margin-bottom: 0;
  padding-bottom: 0;
}

.about-content dd {
  padding-left: 30px;
}

.about-content dt,
.about-content dd {
  font-family: "HGS教科書体",
    "Helvetica Neue",
    Arial,
    "Hiragino Kaku Gothic ProN",
    "Hiragino Sans",
    Meiryo,
    sans-serif;

}

  .sub-page .footer {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 20px;
  }

  .sub-page .footer small {
    position: static;
  }

  /* * {
    outline:auto;
  } */

/* access --------------------------------------------------------------- */

.access .sec-1 {
  margin-top: 200px;
  margin-bottom: 0;
  padding-bottom: 0;

}

.access .flex-left {
  /* background-color: aliceblue; */
}

.access .description {}

.access .description p {
  text-align: center;
  /* width: 380px; */
  margin-bottom: 80px;
  /* background-color: aqua; */
}

.access .description p::after {
  content: 'access';
  top: -55px;
  left: 27%;
  color: rgba(131, 122, 97, 0.1);
}

.access-map {
  /* background-color: antiquewhite; */
  /* max-width: 720px; */
  text-align: center;
  /* margin-left: 35px; */
}

.access-map iframe {
  margin: 0 auto;
  max-width: 460px;
  /* background-color: antiquewhite; */
  /* width: 460px; */
}

.access .flex-img img {
  /* width: 750px; */
  /* padding-right: 20px; */
}

* {
  /* outline: auto; */
}


/* 1024~768 -------------------------------------------------------------*/

@media screen and (max-width: 1024px) {

  .big-logo {
  position: absolute;
  padding-right: 10px;
  top: 52%;
  /* left: 60%; */
  right: 3%;
  width: 300px;
  height: 200px;
  z-index: 30 ;
}

  section {
    margin-bottom: 200px;
    /* padding-right: 30px; */
    /* background-color: aliceblue; */
  }

  .sp-navigation {
    display: none;
  }

  #square {
    padding-top: 100px;
  }

  #boston,
  #oval {
    padding-top: 180px;
  }

  #wellington {
    padding-top: 140px;
  }

  .header-right li {
    margin: 20px;
  }

  .sub-page .sec-flex {
    display: block;
  }

  .sub-page .flex-left {
    display: block;
    margin: 0 auto;
    padding-bottom: 70px;
    /* background-color: bisque; */
  }

  .sub-page .title-flex li {
    margin: 30px;
  }

  .sub-page .description p {
    margin: 0 auto;
    margin-bottom: 60px;
    max-width: 530px;

  }

  .square .description p::after {
    font-size: 90px;
    top: -35px;
    left: 32%;
  }

  .boston .description p::after {
    font-size: 90px;
  }

  .oval .description p::after {
    font-size: 90px;
  }

  .wellington .description p::after {
    font-size: 90px;
  }

  .sub-page .flex-img {
    width: 650px;
    height: auto;
    margin: 0 auto;
    /* padding-right: 0px; */
    /* padding-left: 30px; */
    /* background-color: antiquewhite; */
  }

  .sub-page .flex-img img {
    width: 100%;
    object-fit: cover;
    padding-right: 0;
    margin-right: 0;
  }

  /* lens ------------------------------------------ */

  .lens .description p::after {
    font-size: 90px;
  }

  /* ------------------------------------------ lens */
  /* about ------------------------------------------ */

  .about .description p::after {
    font-size: 90px;
  }

  .sub-page .flex-img img {
    margin-bottom: 30px;
  }

  .sub-page .footer {
    text-align: center;
    margin-top: 50px;
    margin-bottom: 20px;
  }

  .sub-page .footer small {
    position: static;
  }

  /* ------------------------------------------ about */
  /* access ------------------------------------------ */

  .access .description p::after {
    font-size: 90px;
    
  }

  /* ------------------------------------------ access */


}

/* ------------------------------------------------------------ 1024~768 */
/* 768~ -------------------------------------------------------------*/

@media screen and (max-width: 768px) {

  .header-left h1 {
  width: 80px;
  height: auto;
  margin: 0 auto;
}

  .frame,
  .lens,
  .about,
  .access {
    padding: 10px;
  }

  section {
    margin-bottom: 50px;
  }

  .sp-navigation {
    display: block;
  }


  /* ハンバーガーボタン・top申し込みボタン -----*/

  .hamburger {
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 30;
    transition: 0.3s;
  }

  .hamburger-pac {
    position: relative;
    width: 30px;
    height: 30px;
    cursor: pointer;
    /* background-color: aqua; */
  }

  .hamburger-pac span {
    position: absolute;
    width: 30px;
    height: 1px;
    background-color: rgb(115, 114, 114);
    box-shadow: rgb(32, 27, 27) 1px 1px 1px;
    top: 50%;
    transition: all .4s;
  }

  .hamburger-pac span:nth-child(1) {
    top: 5px;
  }

  .hamburger-pac span:nth-child(3) {
    top: 26px;
  }

  /* 1本目の線を-45度回転        後で.activeを付ける*/
  .hamburger-pac.active span:nth-child(1) {
    top: 13px;
    left: 0px;
    background: rgb(115, 114, 114);
    box-shadow: none;
    transform: rotate(-45deg);

  }

  /* 2本目と3本目は重ねて45度回転 */
  .hamburger-pac.active span:nth-child(2),
  .hamburger-pac.active span:nth-child(3) {
    top: 13px;
    right: 0px;
    background: rgb(115, 114, 114);
    box-shadow: none;
    transform: rotate(45deg);
  }



  /* ------ ハンバーガーボタン・申し込みボタン */

  #square {
    padding-top: 80px;
  }

  #boston,
  #oval {
    padding-top: 130px;
  }

  #wellington {
    padding-top: 80px;
  }

  .header-flex {
    display: block;
  }

  .header-left {
    margin-left: 0;
  }

  .header-left h1 {
    text-align: center;
    margin-bottom: 50px;
  }

  .header-right {
    display: none;
  }

  .sub-page .title-flex ul {
    display: block;
  }

  .sub-page .title-flex li {
    text-align: center;
  }

  .sub-page .sec-flex {
    display: block;
  }

  .sub-page .flex-left {
    display: block;
    width: 100%;
    margin: 0 auto;
    padding-bottom: 70px;
    /* background-color: bisque; */
  }

  .sub-page .title-flex li {
    margin: 30px;
  }

  .sub-page .description {
    /* background-color: aqua; */
  }

  .sub-page.description p {
    margin-left: 0;
    margin-bottom: 60px;
    /* background-color: antiquewhite; */
  }

  .square .description p::after {
    font-size: 90px;
    top: -25px;
    left: 31%;
  }

  .boston .description p::after {
    font-size: 90px;
    top: -30px;
    left: 31%;
  }

  .oval .description p::after {
    font-size: 90px;
    top: -25px;
    left: 38%;
  }

  .wellington .description p::after {
    font-size: 90px;
    top: -10px;
    left: 21%;
  }

  .sub-page .item-flex {
    display: block;
    margin: 0 auto;
  }

  .sub-page .item {
    max-width: 100%;
    margin: 0 auto;
  }

  .sub-page .item img {
    width: 100%;
    /* background-color: antiquewhite; */
  }

  .sub-page .item p {
    /* background-color: aquamarine; */
  }

  .sub-page .flex-img {
    max-width: 100%;
    /* background-color: antiquewhite; */
  }

  .sub-page .flex-img img {
    width: 100%;
    object-fit: cover;
    padding-right: 0;
    margin-right: 0;
  }

  /* to-top --------------------- */

  .to-top {
    position: fixed;
    right: 10px;
    bottom: 10px;
  }



  /* index ------------------------------------------ */

  .top-img {
    padding: 0px;
    padding-top: 10px;
  }

/* lens ------------------------------------------ */

.lens .item p {
  max-width: 100%;

}



  /* about ------------------------------------------ */

  .about .description p::after {
    font-size: 90px;
    top: -25px;
    left: 27%;
  }

  .sub-page .flex-img img {
    margin-bottom: 30px;
  }

  .sub-page .footer {
    text-align: center;
    margin-top: 50px;
  }

  .sub-page .footer small {
    position: static;
  }

  /* ------------------------------------------ about */
  /* access ----------------------------------------- */

  .access .description p::after {
    font-size: 90px;
    top: -25px;
    left: 29%;
    
  }

  /* ----------------------------------------- access */


}

/* ------------------------------------------------------------ 768~ */